/* ══════════════════════════════════════════════════════════════════════════
   AUTOPILOT X — DESIGN SYSTEM TOKENS
   Dark-first. One blue anchor (Blue 500), one ownable signature (Signal cyan,
   used sparingly for active/live/focus only), a single cool neutral ramp, and
   a muted status tier that never competes with the brand.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* core brand */
  --blue-300:#6FA0FF; --blue-500:#2E6BF6; --blue-700:#1B4AD1; --blue-900:#12327F;
  /* signature */
  --signal-300:#7DECF6; --signal-500:#16D6E8; --signal-700:#0A9FB5;
  /* cool neutral ramp */
  --c-ink:#05070E; --c-navy:#0B1220; --c-graphite:#131E33; --c-steel:#24334D;
  --c-slate:#475A78; --c-mist:#8595B0; --c-cloud:#C3CEDE; --c-fog:#EEF2FB; --c-paper:#FFFFFF;
  /* status — functional only */
  --success:#16B364; --warning:#E8A33D; --error:#E5484D;
  --success-soft:#4bd58f; --warning-soft:#f0b566; --error-soft:#f2787c;
  /* edges, radius, elevation */
  --edge:rgba(255,255,255,.08); --edge2:rgba(255,255,255,.14);
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:20px;
  --e1:0 1px 2px rgba(0,0,0,.4);
  --e2:0 6px 18px rgba(0,0,0,.45);
  --e3:0 18px 44px rgba(0,0,0,.55);
  --glow:0 0 32px rgba(22,214,232,.45);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* semantic aliases — what the app's components actually consume.
     Navy = app surface, Graphite = cards/panels, Cloud = body text,
     Mist = secondary, Steel/edge = borders. */
  --bg:var(--c-navy); --card:var(--c-graphite); --ink:var(--c-fog); --muted:var(--c-mist);
  --line:var(--edge); --accent:var(--blue-500);
  --ok:var(--success); --warn:var(--warning); --bad:var(--error);
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--bg); color:var(--c-cloud);
  font:15px/1.5 var(--sans); -webkit-font-smoothing:antialiased;
}
/* The ambient brand wash that anchors every product surface. Hung off .wrap, not
   body — the signed-out landing has its own mono-dark ground and must not get it. */
.wrap::before {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(900px 480px at 88% -8%, rgba(22,214,232,.10), transparent 60%),
    radial-gradient(760px 520px at -4% 0%, rgba(46,107,246,.13), transparent 55%);
}
.wrap { position:relative; z-index:0; max-width: 900px; margin: 0 auto; padding: 28px 20px 60px; }
.wrap > * { position:relative; z-index:1; }
h1 { font-size: 22px; margin: 0 0 2px; letter-spacing:-.025em; font-weight:800; color:var(--c-paper); }
.sub { color: var(--muted); margin: 0 0 24px; font-size: 13px; }
.tiles { display:grid; grid-template-columns: repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:24px; }
.tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px; }
.tile .n { font-size:26px; font-weight:800; letter-spacing:-.02em; color:var(--c-paper); }
.tile .l { color:var(--muted); font-size:11.5px; margin-top:4px; font-weight:500; }
.section { margin-bottom:28px; }
.section h2 { font-size:12px; text-transform:uppercase; letter-spacing:.16em; color:var(--c-slate); font-weight:600; margin:0 0 12px; }
.post {
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent), var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; margin-bottom:10px;
}
.post .txt { white-space:pre-wrap; color:var(--c-fog); }
.post .meta { color:var(--muted); font-size:12px; margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
/* pills — status carried by tinted fill + matching hairline, never raw colour */
.badge { font-size:11px; font-weight:600; padding:3px 10px; border-radius:999px; border:1px solid var(--line); letter-spacing:.02em; }
.b-draft{ color:var(--muted); }
.b-approved{ color:#8fb2ff; background:rgba(46,107,246,.16); border-color:rgba(46,107,246,.34); }
.b-published{ color:var(--success-soft); background:rgba(22,179,100,.14); border-color:rgba(22,179,100,.3); }
.b-rejected{ color:var(--error-soft); background:rgba(229,72,77,.14); border-color:rgba(229,72,77,.3); }
.pill { background:rgba(255,255,255,.04); border:1px solid var(--edge2); border-radius:999px; padding:4px 10px; font-size:11px; font-weight:600; color:var(--c-cloud); }
.ready { color:var(--success-soft); font-weight:600; } .waiting { color:var(--warning-soft); font-weight:600; }
a { color:var(--blue-300); }
code { font-family: var(--mono); font-size:12px; color:var(--c-cloud); }
.empty { color:var(--c-slate); font-size:13px; }
.inp {
  width:100%; margin-bottom:8px; padding:11px 13px; border:1px solid var(--edge2); border-radius:10px;
  background:rgba(255,255,255,.04); color:var(--c-fog); font:inherit; font-size:14px; resize:vertical;
}
.inp::placeholder { color:var(--c-slate); }
.inp:focus { outline:none; border-color:var(--signal-500); box-shadow:0 0 0 3px rgba(22,214,232,.18); }
.btn {
  display:inline-flex; align-items:center; gap:8px; justify-content:center;
  padding:10px 16px; border:1px solid transparent; border-radius:10px;
  background:var(--accent); color:#fff; font:inherit; font-size:13px; font-weight:600;
  letter-spacing:.01em; line-height:1.2; cursor:pointer;
  box-shadow:0 4px 14px rgba(46,107,246,.4); transition:.15s;
}
.btn:hover:not(:disabled) { background:var(--blue-700); }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,214,232,.5); }
.btn:disabled { opacity:.4; cursor:default; box-shadow:none; }
.btn.ghost { background:rgba(255,255,255,.06); color:var(--c-fog); border-color:var(--edge2); box-shadow:none; }
.btn.ghost:hover:not(:disabled) { background:rgba(255,255,255,.1); }
.btn.sm { padding:7px 12px; font-size:12px; }
a.btn { display:inline-flex; text-decoration:none; }
.btn.sm.danger { color:var(--error); background:transparent; border-color:rgba(229,72,77,.5); box-shadow:none; }
.btn.sm.danger:hover:not(:disabled) { background:rgba(229,72,77,.12); border-color:var(--error); }
/* queue action row */
.acts { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; padding-top:12px; border-top:1px solid var(--line); }
.over { color:var(--warning-soft); font-weight:600; }

/* top bar + tab nav — active tab carries the blue wash, Signal is reserved for
   the live/active affordance only (see .tab.active::after). */
.topbar {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px;
  margin-bottom:20px; position:sticky; top:0; z-index:10;
  background:rgba(11,18,32,.88); backdrop-filter:blur(12px);
  padding:12px 0; border-bottom:1px solid var(--line);
}
.nav { display:flex; gap:4px; flex-wrap:wrap; align-items:center; }
.tab {
  position:relative; padding:8px 13px; border:1px solid transparent; border-radius:10px;
  background:transparent; color:var(--muted); font:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:.15s;
}
.tab:hover { color:var(--c-fog); background:rgba(255,255,255,.04); }
.tab.active { color:#fff; font-weight:600; background:rgba(46,107,246,.16); border-color:rgba(46,107,246,.34); }
.tab.active::after {
  content:""; position:absolute; left:13px; right:13px; bottom:3px; height:1.5px;
  border-radius:2px; background:var(--signal-500); box-shadow:0 0 8px rgba(22,214,232,.7);
}
.tab:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,214,232,.5); }
.tab.logout { color:var(--c-slate); margin-left:6px; }

/* login */
.login { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-card {
  width:100%; max-width:360px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-xl); padding:28px 26px; box-shadow:var(--e3);
}
.login-card h1 { margin-bottom:2px; }
.login-card .sub { margin-bottom:18px; }
.login-card .btn { width:100%; margin-top:4px; }
.err { color:var(--error-soft); font-size:13px; margin:0 0 10px; }

/* settings + forms */
.field { margin-bottom:14px; }
.field label { display:block; font-size:11.5px; font-weight:600; color:var(--c-cloud); margin-bottom:7px; }
.row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.seg { display:inline-flex; border:1px solid var(--edge2); border-radius:10px; overflow:hidden; }
.seg button { padding:8px 15px; border:none; background:rgba(255,255,255,.04); color:var(--muted); font:inherit; font-size:13px; font-weight:600; cursor:pointer; transition:.15s; }
.seg button:hover:not(.on) { color:var(--c-fog); background:rgba(255,255,255,.08); }
.seg button.on { background:var(--accent); color:#fff; }
.tag { display:inline-flex; align-items:center; gap:6px; background:rgba(255,255,255,.04); border:1px solid var(--edge2); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--c-cloud); }
.tag a { cursor:pointer; color:var(--c-slate); }
.tag a:hover { color:var(--error-soft); }
.saved { color:var(--success-soft); font-size:12px; }
.dot { display:inline-block; width:8px; height:8px; border-radius:50%; }
.dot.on { background:var(--success); box-shadow:0 0 8px rgba(22,179,100,.6); } .dot.off { background:var(--c-slate); }

/* analytics charts */
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; }
.chart {
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent), var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px 22px;
}
.chart h3 { font-size:11px; text-transform:uppercase; letter-spacing:.16em; color:var(--c-slate); font-weight:600; margin:0 0 16px; }
.bar-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:13px; }
.bar-row .lbl { width:110px; color:var(--muted); flex:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-row .track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
/* the fill is a <span> inside the track — it needs display:block or height:100%
   is dropped (non-replaced inline boxes ignore height) and the bar renders empty */
.bar-row .fill { display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--signal-500)); border-radius:999px; }
.bar-row .val { width:40px; text-align:right; flex:none; font-family:var(--mono); font-size:12px; color:var(--c-cloud); font-variant-numeric:tabular-nums; }
.funnel .fill { background:var(--success); }
/* stacked bars — label on its own line, fully readable */
.bar-stack { margin-bottom:12px; }
.bar-stack:last-child { margin-bottom:0; }
.bar-head { display:flex; justify-content:space-between; align-items:baseline; gap:10px; font-size:13px; margin-bottom:5px; }
.bar-head .lbl2 { color:var(--c-fog); overflow-wrap:anywhere; }
.bar-head .val { color:var(--muted); flex:none; font-family:var(--mono); font-size:12px; font-variant-numeric:tabular-nums; }
.bar-stack .track { display:block; height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; }
.bar-stack .fill { display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--signal-500)); border-radius:999px; }
/* clickable topic categories */
.cat-row { border-bottom:1px solid var(--line); }
.cat-row:last-child { border-bottom:none; }
.cat-head { display:flex; align-items:center; gap:10px; width:100%; padding:10px 0; background:none; border:none; font:inherit; color:var(--c-fog); cursor:pointer; text-align:left; }
.cat-head:hover .cat-name { color:var(--signal-300); }
.cat-chev { color:var(--c-slate); font-size:11px; width:10px; flex:none; }
.cat-name { font-size:13px; font-weight:600; flex:none; max-width:46%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-track { flex:1; height:8px; background:rgba(255,255,255,.06); border-radius:999px; overflow:hidden; min-width:40px; }
.cat-fill { display:block; height:100%; background:linear-gradient(90deg,var(--blue-500),var(--signal-500)); border-radius:999px; }
.cat-count { width:28px; text-align:right; flex:none; font-family:var(--mono); font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.cat-detail { padding:2px 0 12px 20px; }
.cat-full { font-size:12px; color:var(--c-slate); margin:0 0 10px; font-style:italic; }
.cat-post { background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:10px; padding:10px 12px; margin-bottom:8px; }
.cat-post-txt { font-size:13px; white-space:pre-wrap; color:var(--c-cloud); }
.cat-post .meta { margin-top:6px; }

/* premium plan card — the one place Signal marks a surface, not just a state */
.chart.premium { border-color:rgba(22,214,232,.32); box-shadow:0 0 0 1px rgba(22,214,232,.18) inset, 0 0 40px rgba(22,214,232,.1); }
.spark { width:100%; height:44px; display:block; }
.notice { background:rgba(255,255,255,.03); border:1px dashed var(--edge2); border-radius:var(--r-md); padding:16px; color:var(--muted); font-size:13px; }

/* ══════════════════════════════════════════════════════════════════════════
   LANDING PAGE — mono-dark, scoped under .lp so it never leaks into the app.
   Greyscale ramp + exactly one warm accent. Hard edges (radius 0), hairline
   rules, Inter Tight display with tight negative tracking, mono eyebrows.
   ══════════════════════════════════════════════════════════════════════════ */
.lp {
  --lp-bg:#0a0a0a; --lp-bg2:#161616;
  --lp-ink:#f5f5f5; --lp-soft:#a8a8a8; --lp-faint:#6a6a6a;
  --lp-rule:rgba(245,245,245,.14); --lp-accent:#d8a14a;
  --lp-display:"Inter Tight","Inter",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --lp-sans:"Inter",-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif;
  --lp-mono:"JetBrains Mono","IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  background:var(--lp-bg); color:var(--lp-ink); font-family:var(--lp-sans);
  min-height:100vh; margin:0; overflow-x:hidden;
}
.lp * { box-sizing:border-box; }
.lp h1,.lp h2,.lp h4 { font-family:var(--lp-display); font-weight:700; margin:0; text-wrap:balance; }
.lp p { margin:0; }
.lp .accent { color:var(--lp-accent); }

/* reveal */
.lp .rv { opacity:0; transform:translateY(10px);
  transition:opacity 700ms cubic-bezier(.2,.7,.2,1), transform 700ms cubic-bezier(.2,.7,.2,1); }
.lp .rv.rv-in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .lp .rv { opacity:1; transform:none; transition:none; } }

/* nav */
.lp-nav { display:flex; align-items:center; justify-content:space-between;
  padding:22px clamp(20px,5vw,64px); border-bottom:1px solid var(--lp-rule);
  max-width:1180px; margin:0 auto; }
.lp-mark { font-family:var(--lp-display); font-weight:700; font-size:16px; letter-spacing:-.02em; }
.lp-nav-cta { font-family:var(--lp-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--lp-soft); text-decoration:none; border:1px solid var(--lp-rule); padding:8px 14px; transition:.15s; }
.lp-nav-cta:hover { color:var(--lp-ink); border-color:var(--lp-ink); }

/* eyebrow */
.lp-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:22px;
  font-family:var(--lp-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--lp-soft); }
.lp-rule { width:34px; height:1px; background:var(--lp-soft); opacity:.5; flex:none; }

/* hero */
.lp-hero { padding:clamp(56px,10vw,120px) clamp(20px,5vw,64px) clamp(48px,7vw,96px); max-width:1180px; margin:0 auto; }
/* sub-1 line-height crops the visual box, so add a little optical padding below
   the headline — otherwise the deck reads as if it's touching the last line. */
.lp-hero h1 { font-size:clamp(38px,7.2vw,92px); line-height:.95; letter-spacing:-.042em; max-width:16ch; padding-bottom:.1em; }
.lp .lp-deck { font-family:var(--lp-display); font-weight:400; font-size:clamp(17px,2vw,23px);
  line-height:1.45; letter-spacing:-.01em; color:var(--lp-soft); max-width:58ch; margin-top:clamp(22px,3vw,40px); }
.lp-actions { margin-top:34px; display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.lp-cta { display:inline-block; background:var(--lp-ink); color:var(--lp-bg); text-decoration:none;
  font-weight:600; font-size:15px; padding:13px 24px; border:1px solid var(--lp-ink); border-radius:0;
  cursor:pointer; transition:.15s; font-family:var(--lp-sans); }
.lp-cta:hover { background:transparent; color:var(--lp-ink); transform:translateY(-1px); }
.lp-cta:disabled { opacity:.5; cursor:default; }
.lp-cta-big { font-size:16px; padding:15px 30px; }
.lp-note { font-size:13px; color:var(--lp-faint); }
.lp-pw { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.lp-input { background:transparent; border:1px solid var(--lp-rule); color:var(--lp-ink);
  padding:12px 14px; font:inherit; font-size:14px; border-radius:0; min-width:200px; }
.lp-input:focus { outline:none; border-color:var(--lp-ink); }
.lp-err { color:#e0674f; font-size:13px; width:100%; }

/* sections */
.lp-sec { padding:clamp(56px,8vw,104px) clamp(20px,5vw,64px); max-width:1180px; margin:0 auto;
  border-top:1px solid var(--lp-rule); }
.lp-sec h2 { font-size:clamp(29px,4.6vw,58px); line-height:1.02; letter-spacing:-.035em; max-width:20ch; padding-bottom:.06em; }
.lp .lp-lead { font-size:clamp(16px,1.5vw,19px); line-height:1.62; color:var(--lp-soft); max-width:70ch; margin-top:clamp(20px,2.4vw,32px); }

.lp-cols,.lp-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(24px,3vw,44px); margin-top:44px; }
.lp-cols h4,.lp-steps h4 { font-size:18px; letter-spacing:-.02em; margin-bottom:9px; }
.lp .lp-cols p,.lp .lp-steps p { font-size:15px; line-height:1.6; color:var(--lp-soft); }
.lp-steps > div { border-top:1px solid var(--lp-rule); padding-top:18px; }
.lp-num { display:block; font-family:var(--lp-mono); font-size:11px; letter-spacing:.18em;
  color:var(--lp-accent); margin-bottom:12px; }

/* inverted sample-post panel */
.lp-invert { background:#f4f3f0; color:#0d0d0c; border-top:none; max-width:none; }
.lp-invert .lp-eyebrow,.lp-invert .lp-fine { color:#5a5852; }
.lp-invert .lp-rule { background:#5a5852; }
.lp-invert > div { max-width:1180px; margin:0 auto; }
.lp-sample { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:clamp(24px,4vw,56px); margin-top:40px; }
.lp-sample-post { white-space:pre-line; font-size:clamp(17px,1.7vw,21px); line-height:1.5;
  background:#fff; border:1px solid #dedcd6; padding:clamp(22px,3vw,34px); }
.lp-rules { list-style:none; margin:0; padding:0; }
.lp-rules li { font-size:15px; line-height:1.6; color:#3d3b36; padding:13px 0; border-bottom:1px solid #dedcd6; }
.lp-rules li:last-child { border-bottom:none; }
.lp-rules b { color:#0d0d0c; }
.lp .lp-fine { font-size:13px; color:var(--lp-faint); margin-top:26px; }

/* pricing */
.lp-tiers { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:16px; margin-top:44px; }
.lp-tier { border:1px solid var(--lp-rule); padding:26px 22px; position:relative; }
.lp-tier.best { border-color:var(--lp-accent); }
.lp-badge { position:absolute; top:-1px; right:-1px; background:var(--lp-accent); color:#0a0a0a;
  font-family:var(--lp-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; }
.lp-tier h4 { font-size:15px; letter-spacing:-.01em; color:var(--lp-soft); font-weight:600; }
.lp-price { font-family:var(--lp-display); font-weight:700; font-size:34px; letter-spacing:-.035em; margin:8px 0 4px; }
.lp-price span { font-size:14px; font-weight:400; color:var(--lp-faint); letter-spacing:0; }
.lp-tier-meta { font-family:var(--lp-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--lp-accent); margin-bottom:14px; }
.lp .lp-tier p { font-size:14px; line-height:1.55; color:var(--lp-soft); }
/* capability list — the tier's actual contents, since volume no longer carries
   the story. Hairline separators keep it scannable without bullets. */
.lp-tier-lines { list-style:none; margin:16px 0 0; padding:0; }
.lp-tier-lines li { font-size:13px; line-height:1.5; color:var(--lp-soft);
  padding:7px 0; border-top:1px solid var(--lp-rule); }

/* tier CTA — outlined by default so the four don't shout at each other; the
   recommended tier gets the accent fill. */
.lp-tier-cta { display:block; width:100%; margin-top:20px; padding:11px 16px;
  background:transparent; color:var(--lp-ink); border:1px solid var(--lp-rule); border-radius:0;
  font-family:var(--lp-sans); font-size:14px; font-weight:600; cursor:pointer; transition:.15s; }
.lp-tier-cta:hover { border-color:var(--lp-ink); background:var(--lp-ink); color:var(--lp-bg); }
.lp-tier-cta.best { background:var(--lp-accent); border-color:var(--lp-accent); color:#0a0a0a; }
.lp-tier-cta.best:hover { background:transparent; color:var(--lp-accent); }
.lp-tier { display:flex; flex-direction:column; }
.lp-tier p { flex:1; }

/* faq */
.lp-faq { margin-top:38px; max-width:860px; }
.lp-faq-item { border-bottom:1px solid var(--lp-rule); }
.lp-faq-item button { display:flex; justify-content:space-between; align-items:center; gap:20px;
  width:100%; background:none; border:none; color:var(--lp-ink); font-family:var(--lp-display);
  font-weight:600; font-size:clamp(16px,1.7vw,20px); letter-spacing:-.02em;
  padding:22px 0; cursor:pointer; text-align:left; }
.lp-faq-item button:hover { color:var(--lp-accent); }
.lp-faq-chev { color:var(--lp-faint); font-size:20px; flex:none; font-family:var(--lp-sans); }
.lp .lp-faq-item p { font-size:15px; line-height:1.65; color:var(--lp-soft); max-width:72ch; padding:0 0 24px; }

/* final cta + footer */
.lp-final { padding:clamp(64px,9vw,120px) clamp(20px,5vw,64px); border-top:1px solid var(--lp-rule);
  max-width:1180px; margin:0 auto; }
.lp-final h2 { font-size:clamp(30px,5vw,62px); line-height:1; letter-spacing:-.04em; max-width:18ch; }
.lp-page { min-height:calc(100vh - 196px); border-top:none; padding-top:clamp(56px,8vw,92px); }
.lp-page h1 { font-family:var(--lp-display); font-size:clamp(36px,6vw,72px); line-height:.98;
  letter-spacing:-.04em; max-width:16ch; margin:0; padding-bottom:.08em; }
.lp-page a { color:var(--lp-ink); text-decoration-color:var(--lp-accent); text-underline-offset:3px; }
.lp-policy { max-width:760px; margin-top:46px; }
.lp-policy-section { padding:24px 0; border-top:1px solid var(--lp-rule); }
.lp-policy-section h2 { font-size:clamp(20px,2.4vw,28px); line-height:1.15; letter-spacing:-.025em; max-width:none; margin-bottom:10px; }
.lp .lp-policy-section p { font-size:15px; line-height:1.7; color:var(--lp-soft); max-width:72ch; }
.lp-foot { display:flex; justify-content:space-between; align-items:flex-start; gap:34px; flex-wrap:wrap;
  padding:30px clamp(20px,5vw,64px); border-top:1px solid var(--lp-rule); max-width:1180px; margin:0 auto;
  color:var(--lp-soft); }
.lp-foot-brand { display:flex; flex-direction:column; gap:9px; font-family:var(--lp-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; }
.lp-foot-dim { color:var(--lp-faint); }
.lp-foot-links { display:flex; gap:clamp(28px,5vw,64px); flex-wrap:wrap; }
.lp-foot-group { min-width:118px; }
.lp-foot-group h4 { font-family:var(--lp-mono); font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--lp-faint); margin:0 0 10px; }
.lp-foot-group a { display:block; color:var(--lp-soft); text-decoration:none; font-size:13px; line-height:1.7; }
.lp-foot-group a:hover { color:var(--lp-accent); }

/* logo lockups */
.brand { display:flex; align-items:center; gap:9px; }
/* The "A" takes the surface ink; the blade carries its own blue gradient, so the
   mark stays two-tone on both the navy app and the mono-dark landing. */
.brand .logo { color:var(--ink); flex:none; }
.lp-mark { display:inline-flex; align-items:center; gap:9px; }
.lp a.lp-mark { color:var(--lp-ink); text-decoration:none; }
.lp-foot-mark { display:inline-flex; align-items:center; gap:8px; }
.lp-mark .logo,.lp-foot-mark .logo { color:var(--lp-ink); flex:none; }

/* onboarding + trial */
.onb { padding:24px 26px; }
.onb-steps { display:flex; gap:16px; flex-wrap:wrap; margin-bottom:18px; font-size:11.5px; color:var(--c-slate); }
.onb-step { display:inline-flex; align-items:center; gap:6px; }
.onb-step.on { color:var(--signal-300); font-weight:600; }
.onb-step.done { color:var(--success-soft); }
.onb-h { font-size:18px; margin:0 0 6px; letter-spacing:-.02em; font-weight:700; color:var(--c-paper); }
.notice.trial { border-style:solid; border-color:rgba(46,107,246,.34); background:rgba(46,107,246,.1); color:var(--c-fog); margin-bottom:20px; }

/* onboarding chat agent */
.chat { background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--e2); }
.chat-log { padding:18px; max-height:52vh; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.msg { max-width:80%; padding:11px 14px; border-radius:14px; font-size:14.5px; line-height:1.55; white-space:pre-wrap; }
.msg.assistant { background:rgba(255,255,255,.05); border:1px solid var(--line); color:var(--c-fog); align-self:flex-start; border-bottom-left-radius:4px; }
.msg.user { background:var(--accent); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; box-shadow:0 4px 14px rgba(46,107,246,.3); }
.msg.typing { display:flex; gap:4px; align-items:center; padding:14px; }
.msg.typing span { width:6px; height:6px; border-radius:50%; background:var(--signal-500); animation:blink 1.3s infinite; }
.msg.typing span:nth-child(2){ animation-delay:.2s } .msg.typing span:nth-child(3){ animation-delay:.4s }
@keyframes blink { 0%,60%,100%{opacity:.25} 30%{opacity:1} }
.chat-applied { display:flex; gap:8px; flex-wrap:wrap; padding:0 14px 12px; }
.chat-input { display:flex; gap:8px; padding:12px 14px; border-top:1px solid var(--line); }
.chat-input .inp { flex:1; }

/* copyable command block (Claude Code connect snippet) */
.cmd {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(0,0,0,.35); border: 1px solid var(--edge2);
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: var(--c-cloud);
  overflow-x: auto; white-space: pre;
}

/* setup panel */
.setup-row { display:flex; gap:11px; padding:12px 0; border-bottom:1px solid var(--line); }
.setup-row:last-child { border-bottom:none; }
.setup-row .dot { margin-top:6px; flex:none; }
.setup-body { flex:1; }
.setup-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; color:var(--c-fog); font-weight:600; }
.setup-fix { display:inline-block; margin-top:6px; font-size:12.5px; font-weight:600; color:var(--signal-300); }