/* Reachly site — shared design system.
   Extracted from index.html when the site grew past one page: two copies of
   this would drift within a week. Page-specific rules stay in the page. */

:root{
  --bg:#08090c; --bg-2:#0e1015; --panel:#12151b; --rule:#20242c; --rule-2:#2b313b;
  --ink:#fff; --ink-2:#9ba3b4; --ink-3:#646c7d;
  --accent:#ff5c3d; --accent-2:#ff8f6b; --cool:#5b8dff;
  --f:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
}
*{box-sizing:border-box}
/* CLIP, not hidden. overflow-x:hidden on html/body makes them a scroll
   container, which silently kills position:sticky for every descendant — the
   sticky demo panel simply stopped pinning. overflow-x:clip stops the sideways
   drag identically WITHOUT creating that container, so sticky survives.
   hidden stays as the fallback for browsers without clip: those lose sticky,
   never the layout. */
html{scroll-behavior:smooth;overflow-x:hidden;width:100%}
body{margin:0;background:var(--bg);color:var(--ink-2);font-family:var(--f);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;width:100%;max-width:100%}
@supports (overflow:clip){
  html{overflow-x:clip}
  body{overflow-x:clip}
}
img,canvas,svg{max-width:100%}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px}

/* ── reveal ───────────────────────────────────────── */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* ── nav ──────────────────────────────────────────── */
nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
nav.stuck{background:rgba(8,9,12,.78);backdrop-filter:blur(20px) saturate(140%);border-bottom-color:var(--rule)}
.nav{display:flex;align-items:center;gap:34px;height:72px}
/* Lockup: mark + wordmark. The wordmark stays LIVE TEXT rather than an SVG
   path — it stays selectable, scales with the type system, and there is one
   less file to keep in sync when the weight changes. The mark carries the
   identity; the word carries the name. */
.logo{display:inline-flex;align-items:center;gap:9px;font-weight:800;font-size:20px;letter-spacing:-.04em;color:#fff;line-height:1}
.logo i{font-style:normal;color:var(--accent)}
.logo svg{flex-shrink:0;display:block}
/* The ring turns slowly; the customer at the centre never moves — which is the
   argument the whole page makes. Pauses when the tab is hidden. */
.logo .ring-g{transform-origin:16px 16px;animation:orbit 18s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.logo .ring-g{animation:none}}
.nlinks{display:flex;gap:28px}
.nlinks a{font-size:14.5px;font-weight:450;color:var(--ink-2);transition:color .2s}
.nlinks a:hover{color:#fff}
.nright{margin-left:auto;display:flex;align-items:center;gap:20px}
.btn{display:inline-block;background:var(--accent);color:#fff;font-weight:600;font-size:15px;padding:12px 22px;border-radius:11px;border:0;cursor:pointer;font-family:var(--f);position:relative;overflow:hidden;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,92,61,.32)}
.btn.sm{padding:10px 18px;font-size:14.5px}
.btn.lg{padding:17px 34px;font-size:17px;border-radius:13px}

/* ── hero ─────────────────────────────────────────── */
.hero{position:relative;padding:190px 0 110px;min-height:96vh;display:flex;align-items:center}
#field{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.hero .wrap{position:relative;z-index:2}
.tagpill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);border:1px solid rgba(255,92,61,.28);background:rgba(255,92,61,.08);padding:7px 15px;border-radius:100px}
.tagpill .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
h1{font-size:clamp(46px,7.4vw,88px);line-height:.98;letter-spacing:-.045em;font-weight:800;color:#fff;margin:30px 0 0;max-width:15ch}
h1 .w{display:inline-block;opacity:0;transform:translateY(28px);animation:rise .95s cubic-bezier(.16,1,.3,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}
h1 .grad{background:linear-gradient(102deg,var(--accent) 0%,var(--accent-2) 46%,#ffb89e 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.sub{font-size:20px;line-height:1.55;color:var(--ink-2);max-width:54ch;margin:26px 0 0}
.hcta{display:flex;align-items:center;gap:20px;margin:38px 0 0;flex-wrap:wrap}
.note{font-size:14.5px;color:var(--ink-3)}
.scroll-hint{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);z-index:2}
.scroll-hint::after{content:'';display:block;width:1px;height:34px;margin:12px auto 0;background:linear-gradient(var(--ink-3),transparent);animation:drop 2.2s ease-in-out infinite}
@keyframes drop{0%{opacity:0;transform:scaleY(.3)}40%{opacity:1}100%{opacity:0;transform:scaleY(1)}}

/* ── type ─────────────────────────────────────────── */
section{padding:150px 0;position:relative}
.kicker{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 20px}
h2{font-size:clamp(34px,4.6vw,58px);line-height:1.05;letter-spacing:-.038em;font-weight:800;color:#fff;margin:0 0 20px;max-width:19ch}
h2 .dim{color:var(--ink-3)}
/* scroll-write: the line lights up word by word as it passes through the
   viewport, so reading it and scrolling it are the same gesture. */
.write span{color:#2b313b;transition:color .28s ease}
.write span.lit{color:#fff}
@media (prefers-reduced-motion:reduce){.write span{color:#fff}}

/* ── light sections ───────────────────────────────────
   The page alternates ground. Dark carries the product screens (they are dark
   in the real app); light carries the human sections — the argument, the
   agents, who it is for. Rhythm, and the dark hits harder for the contrast. */
.light{background:#f5f6f8;color:#4a5160}
.light h2{color:#0d0f13}
.light h3{color:#0d0f13}
.light .lead{color:#525a6b}
.light .kicker{color:#e04a2c}
.light .write span{color:#d5d9e0}
.light .write span.lit{color:#0d0f13}
@media (prefers-reduced-motion:reduce){.light .write span{color:#0d0f13}}

/* ── agent roster: a sticky stack ──────────────────────
   Each card pins a little lower than the one before, so as you scroll they
   pile up — Qualify, then Support over it, then Conversion, then Relationship —
   and by the end all four sit stacked with their titles showing. The offsets
   (+34px per card) are exactly the height of a card's heading line, which is
   why the four names stay readable in the finished stack.
   A single column, not a grid: sticky inside grid areas is constrained to the
   area, so the cards would each pin in their own cell and never overlap. */
.agrid{display:flex;flex-direction:column;margin:44px auto 0;max-width:820px}
.acard{position:sticky;background:#fff;border:1px solid #e6e8ec;border-radius:16px;padding:26px 26px 22px;
       margin-bottom:26px;box-shadow:0 6px 20px rgba(13,15,19,.05);
       transition:box-shadow .35s,border-color .35s}
.acard:nth-of-type(1){top:104px}
.acard:nth-of-type(2){top:138px}
.acard:nth-of-type(3){top:172px}
.acard:nth-of-type(4){top:206px}
/* The last card carries the deepest shadow because it sits on top of the pile. */
.acard:nth-of-type(4){box-shadow:0 -8px 34px rgba(13,15,19,.10)}
.acard:hover{border-color:#d7dbe2}
@media (prefers-reduced-motion:reduce){.acard{position:static}}
.acard .ico{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;margin-bottom:18px}
.acard h3{font-size:19.5px;letter-spacing:-.02em;font-weight:700;margin:0 0 8px}
.acard p{margin:0;font-size:15.5px;line-height:1.6;color:#525a6b}
.acard .owns{margin-top:16px;padding-top:14px;border-top:1px solid #eef0f3;font-size:13px;color:#8b91a0}
.acard .owns b{color:#0d0f13;font-weight:600}

/* orchestrator — dark card on the light ground, exactly as it sits in the app */
.orch{background:linear-gradient(135deg,#141922,#0d1016);border:1px solid #232833;border-radius:18px;padding:38px 36px;color:#9ba3b4;box-shadow:0 24px 60px rgba(13,15,19,.16);position:relative;overflow:hidden}
.orch::after{content:'';position:absolute;right:-90px;top:-90px;width:320px;height:320px;background:radial-gradient(circle,rgba(255,92,61,.16),transparent 66%);pointer-events:none}
.orch .pill{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--accent-2);border:1px solid rgba(255,92,61,.3);background:rgba(255,92,61,.1);padding:6px 14px;border-radius:100px}
.orch h3{font-size:clamp(26px,3vw,34px);letter-spacing:-.03em;font-weight:800;color:#fff;margin:20px 0 12px}
.orch h3 em{font-style:normal;color:var(--accent)}
.orch p{margin:0;font-size:16.5px;max-width:56ch;color:#9ba3b4}
.orch .flow{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px;position:relative;z-index:2}
.orch .fnode{font-size:13px;color:#c8ceda;background:#1b212b;border:1px solid #2b313b;border-radius:9px;padding:8px 14px}
.orch .farr{color:var(--accent);align-self:center;font-size:14px}
.lead{font-size:19.5px;color:var(--ink-2);max-width:58ch;margin:0}

/* ── sticky scroll ────────────────────────────────── */
.sticky-wrap{display:grid;gap:60px}
@media(min-width:980px){.sticky-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:80px;align-items:start}}
.steps-col{display:flex;flex-direction:column}
.stepblock{padding:64px 0;border-left:2px solid var(--rule);padding-left:30px;transition:border-color .5s,opacity .5s;opacity:.34}
.stepblock.on{opacity:1;border-left-color:var(--accent)}
.stepblock .n{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em}
.stepblock h3{font-size:26px;letter-spacing:-.025em;font-weight:700;color:#fff;margin:14px 0 10px}
.stepblock p{margin:0;font-size:16.5px;color:var(--ink-2)}
.visual-col{position:sticky;top:120px}

/* ── product panel ────────────────────────────────── */
.panel{background:var(--panel);border:1px solid var(--rule);border-radius:18px;box-shadow:0 40px 90px rgba(0,0,0,.5);overflow:hidden}
.pbar{display:flex;align-items:center;gap:7px;padding:14px 17px;border-bottom:1px solid var(--rule)}
.dot{width:9px;height:9px;border-radius:50%;background:#2b313b}
.ptitle{margin-left:12px;font-size:12.5px;color:var(--ink-3);font-family:var(--mono)}
.pbody{padding:22px;min-height:392px}
.pane{display:none;animation:fade .5s cubic-bezier(.16,1,.3,1)}
.pane.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.phd{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.phd .t{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.phd .live{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-family:var(--mono)}
.row{display:flex;align-items:center;gap:13px;padding:14px 0;border-top:1px solid #191d24}
.av{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;font-size:12px;font-weight:700;flex-shrink:0}
.nm{font-size:14.5px;color:#fff;font-weight:500}
.mt{font-size:12.5px;color:var(--ink-3)}
.band{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px}
.b-loyal{background:rgba(22,163,74,.16);color:#5ad19a}
.b-ready{background:rgba(255,92,61,.16);color:var(--accent-2)}
.b-win{background:rgba(124,83,201,.2);color:#b79aff}
.nx{font-size:12.5px;color:var(--accent);margin-top:3px}
.bar{width:66px;height:5px;border-radius:3px;background:#20242c;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--accent-2));width:0;transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.num{font-family:var(--mono);font-size:13.5px;color:#fff;min-width:26px;text-align:right}
.mono-sm{font-family:var(--mono);font-size:12.5px;color:var(--ink-3)}

/* chat bubbles */
.chat{display:flex;flex-direction:column;gap:11px}
.bub{max-width:78%;padding:11px 15px;border-radius:14px;font-size:14.5px;line-height:1.5}
.bub.them{background:#1b2028;color:#dfe3ea;border-bottom-left-radius:5px;align-self:flex-start}
.bub.us{background:linear-gradient(135deg,var(--accent),#e04a2c);color:#fff;border-bottom-right-radius:5px;align-self:flex-end}
.who-tag{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:-4px}
.handoff{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--cool);background:rgba(91,141,255,.1);border:1px solid rgba(91,141,255,.22);border-radius:9px;padding:9px 13px;margin:4px 0}

/* revenue */
.rev-row{display:flex;align-items:center;justify-content:space-between;padding:15px 0;border-top:1px solid #191d24}
.rev-amt{font-family:var(--mono);font-size:15px;color:#5ad19a}
.attr{font-size:12px;color:var(--ink-3);margin-top:3px}

/* journey */
.jstep{display:flex;align-items:center;gap:13px;padding:13px 0}
.jdot{width:26px;height:26px;border-radius:50%;border:2px solid var(--rule-2);display:grid;place-items:center;font-size:11px;color:var(--ink-3);flex-shrink:0}
.jdot.done{background:var(--accent);border-color:var(--accent);color:#fff}
.jline{width:2px;height:16px;background:var(--rule-2);margin-left:12px}

/* ── stat band ────────────────────────────────────── */
.stats{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:16px;overflow:hidden}
@media(min-width:760px){.stats{grid-template-columns:repeat(3,1fr)}}
.stat{background:var(--bg-2);padding:38px 30px}
.stat .v{font-size:44px;font-weight:800;letter-spacing:-.04em;color:#fff;font-feature-settings:'tnum'}
.stat .l{font-size:14.5px;color:var(--ink-2);margin-top:6px}

/* ── cards ────────────────────────────────────────── */
.vgrid{display:flex;flex-wrap:wrap;gap:12px;margin-top:44px}
.vert{border:1px solid var(--rule);background:var(--bg-2);border-radius:100px;padding:11px 21px;font-size:15px;color:var(--ink-2);transition:border-color .3s,color .3s,transform .3s}
.vert:hover{border-color:var(--accent);color:#fff;transform:translateY(-2px)}
.light .vert{background:#fff;border-color:#e2e5ea;color:#4a5160}
.light .vert:hover{border-color:var(--accent);color:#0d0f13}

/* ── cta ──────────────────────────────────────────── */
/* overflow:hidden so the glow can be wider than the column without ever
   reaching the document scroller. */
.cta{text-align:center;padding:170px 0;position:relative;overflow:hidden}
.cta h2{margin:0 auto 18px;max-width:17ch}
.cta .lead{margin:0 auto 38px}
.glow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:760px;max-width:none;height:420px;background:radial-gradient(ellipse,rgba(255,92,61,.16),transparent 68%);pointer-events:none;filter:blur(28px)}

footer{border-top:1px solid var(--rule);padding:62px 0 48px;font-size:14.5px}
.fg{display:flex;flex-wrap:wrap;gap:52px;justify-content:space-between}
.fc h4{color:#fff;font-size:12px;letter-spacing:.13em;text-transform:uppercase;margin:0 0 15px;font-weight:600}
.fc a{display:block;margin-bottom:10px;color:var(--ink-2);transition:color .2s}
.fc a:hover{color:var(--accent)}
.fb{margin-top:48px;padding-top:24px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink-3)}

/* ── mobile ───────────────────────────────────────────
   Not a shrink of the desktop page — three things genuinely change:
   the nav drops to logo + one action, the sticky demo moves ABOVE the steps
   so it stays visible while you read them, and the product rows lose the
   intent bar (a 66px meter beside a name does not survive 375px). */
@media (max-width:860px){
  body{font-size:16px}
  .wrap{padding:0 20px}

  /* nav: links out, one clear action left */
  .nav{gap:0;height:62px}
  .nlinks{display:none}
  .nright{gap:14px}
  .nright a{display:none}
  .btn{padding:11px 18px;font-size:14.5px}
  .btn.lg{padding:15px 26px;font-size:16px;width:100%;text-align:center}

  /* hero: shorter, and the headline stops fighting the viewport */
  .hero{padding:118px 0 76px;min-height:auto}
  h1{font-size:clamp(36px,9.2vw,52px);letter-spacing:-.035em;max-width:none;margin-top:22px}
  .sub{font-size:17.5px;margin-top:18px}
  .hcta{margin-top:28px;gap:14px}
  .hcta .note{width:100%;text-align:center}
  .scroll-hint{display:none}

  section{padding:78px 0}
  h2{font-size:clamp(27px,7vw,36px);letter-spacing:-.028em;max-width:none}
  .lead{font-size:17px}
  .kicker{margin-bottom:14px}

  /* The heading leads, the demo sits under it. The panel is pinned to the
     BOTTOM of the viewport, so 01 → 02 → 03 → 04 travel up past a screen that
     stays put and changes to match whichever one you are reading. Sticking it
     to the top instead put the demo above its own explanation and shoved the
     heading off-screen. */
  .sticky-wrap{display:flex;flex-direction:column;gap:0}
  .steps-col{padding-bottom:20px}
  .visual-col{position:sticky;bottom:0;top:auto;z-index:20;padding:16px 0 18px;background:var(--bg);
              box-shadow:0 -16px 26px -14px rgba(8,9,12,.94)}
  .light .visual-col{background:#f5f6f8;box-shadow:0 -16px 26px -14px rgba(13,15,19,.24)}
  .pbody{min-height:0;padding:16px}
  .panel{border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.4)}
  .stepblock{padding:30px 0;padding-left:20px}
  .stepblock h3{font-size:21px}
  .stepblock p{font-size:15.5px}

  /* product rows: name + verdict only */
  .row{gap:10px;padding:11px 0}
  .row .bar,.row .num{display:none}
  .av{width:30px;height:30px;border-radius:9px;font-size:11px}
  .nm{font-size:13.5px}
  .mt,.nx{font-size:11.5px}
  .band{font-size:10.5px;padding:2px 7px}
  .phd .live{font-size:10.5px}
  .bub{max-width:88%;font-size:13.5px;padding:10px 13px}
  .handoff{font-size:11.5px;padding:8px 11px}
  .rev-row{padding:12px 0}
  .rev-amt{font-size:14px}

  .stat{padding:26px 22px}
  .stat .v{font-size:34px}

  .orch{padding:26px 22px;border-radius:15px}
  .orch h3{font-size:24px}
  .orch p{font-size:15.5px}
  .orch .flow{gap:7px;margin-top:18px}
  .orch .fnode{font-size:11.5px;padding:7px 11px}
  .orch .farr{display:none}
  /* Stack offsets follow the 62px mobile nav, and step by the mobile heading
     height (26px) so all four names stay visible in the finished pile. */
  .agrid{margin-top:32px}
  .acard{padding:22px 20px 18px;margin-bottom:20px}
  .acard:nth-of-type(1){top:76px}
  .acard:nth-of-type(2){top:102px}
  .acard:nth-of-type(3){top:128px}
  .acard:nth-of-type(4){top:154px}
  .acard .ico{width:40px;height:40px;font-size:19px;margin-bottom:14px}
  .acard h3{font-size:18px}
  .acard p{font-size:15px}

  .cta{padding:92px 0}
  .glow{width:520px;height:280px}
  .hero{overflow:hidden}
  .vgrid{gap:9px;margin-top:28px}
  .vert{padding:9px 16px;font-size:14px}

  footer{padding:44px 0 36px}
  .fg{gap:32px}
  .fc{min-width:44%}
}

/* very small phones — the headline is the only thing that still strains */
@media (max-width:380px){
  h1{font-size:33px}
  .orch .fnode{font-size:11px}
}

/* landscape phones: the sticky demo would eat the whole screen */
@media (max-height:520px) and (max-width:900px){
  .visual-col{position:static;order:0;box-shadow:none;padding:0 0 22px}
}

/* ── mega menu ─────────────────────────────────────────
   Hover-opened on desktop, but ALSO click/focus-openable so it is reachable
   from a keyboard — a hover-only menu is invisible to anyone tabbing. */
.ndrop{position:relative}
.ntrig{background:none;border:0;font:inherit;font-size:14.5px;font-weight:450;color:var(--ink-2);cursor:pointer;padding:0;display:inline-flex;align-items:center;gap:5px;transition:color .2s}
.ntrig .chev{font-size:9px;opacity:.6;transition:transform .25s}
.ndrop:hover .ntrig,.ndrop.open .ntrig{color:#fff}
.ndrop:hover .chev,.ndrop.open .chev{transform:rotate(180deg)}
.nmenu{position:absolute;top:calc(100% + 14px);left:-18px;display:grid;grid-template-columns:1fr 1fr;gap:0 8px;
       background:#101319;border:1px solid var(--rule);border-radius:16px;padding:14px;min-width:600px;
       box-shadow:0 26px 60px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(-8px);
       transition:opacity .22s cubic-bezier(.16,1,.3,1),transform .22s cubic-bezier(.16,1,.3,1),visibility .22s}
.nmenu.one{grid-template-columns:1fr;min-width:330px}
.ndrop:hover .nmenu,.ndrop.open .nmenu{opacity:1;visibility:visible;transform:none}
/* keeps the pointer from falling through the gap between trigger and menu */
.ndrop::after{content:'';position:absolute;top:100%;left:0;right:0;height:16px}
.nmcol{display:flex;flex-direction:column}
.nmcol.two-up{display:grid;grid-template-columns:1fr 1fr;gap:0 6px}
.nmenu a{display:block;padding:11px 13px;border-radius:10px;transition:background .18s}
.nmenu a:hover{background:#181c24}
.nmenu a b{display:block;font-size:14.5px;font-weight:600;color:#fff;letter-spacing:-.01em}
.nmenu a span{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px;line-height:1.45}
/* the two pages a reseller cannot write get a marker */
.nmenu a.feat b::after{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:7px;vertical-align:2px}

/* mobile drawer */
.nburger{display:none;background:none;border:0;cursor:pointer;padding:8px;margin-left:14px;flex-direction:column;gap:5px}
.nburger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:transform .3s,opacity .3s}
.nburger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.nburger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.nmob{display:none;background:#0b0d11;border-top:1px solid var(--rule);max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.16,1,.3,1)}
.nmob.open{max-height:80vh;overflow-y:auto}
.nmob .wrap{padding-top:14px;padding-bottom:22px}
.nmob-h{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:16px 0 6px}
.nmob a{display:block;padding:10px 0;font-size:16px;color:#dfe3ea;border-bottom:1px solid #14181e}

@media(max-width:1040px){
  .nlinks{display:none}
  .nburger{display:flex}
  .nmob{display:block}
  .nright a[href*="app."]:not(.btn){display:none}
}

/* ── feature page template ─────────────────────────────
   Shared by every Platform page so writing page eight is filling a form, not
   designing a page. */
.phero{padding:150px 0 90px;position:relative}
.phero h1{font-size:clamp(38px,5.4vw,68px);max-width:16ch}
.phero .sub{font-size:19px}
.crumb{display:inline-block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:18px}
.crumb:hover{color:var(--accent)}
.phero .tagpill{display:block;width:fit-content;margin-bottom:0}

/* the honest comparison — us vs the way it is normally done */
.vs{display:grid;gap:18px;margin-top:44px}
@media(min-width:780px){.vs{grid-template-columns:1fr 1fr;gap:22px}}
.vs-col{background:#fff;border:1px solid #e4e7ec;border-radius:16px;padding:26px 26px 22px}
.vs-col.win{border-color:rgba(241,91,65,.35);box-shadow:0 14px 40px rgba(241,91,65,.10)}
.vs-h{font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:#8b91a0;font-weight:600;margin-bottom:16px}
.vs-col.win .vs-h{color:#e04a2c}
.vs-col ul{margin:0;padding-left:19px}
.vs-col li{font-size:15.5px;color:#525a6b;margin-bottom:10px}
.vs-col.win li{color:#2d3340}

/* numbered mechanism steps */
.gsteps{display:grid;gap:0;margin-top:46px;border-top:1px solid var(--rule)}
.gstep{display:grid;grid-template-columns:1fr;gap:6px 26px;padding:30px 0;border-bottom:1px solid var(--rule)}
@media(min-width:760px){.gstep{grid-template-columns:88px 1fr}}
.gn{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.1em;padding-top:5px}
.gstep h3{font-size:21px;letter-spacing:-.022em;font-weight:700;color:#fff;margin:0 0 7px}
.gstep p{margin:0;font-size:16px;color:var(--ink-2);max-width:64ch}

/* live goal panel */
.gpanel{background:#fff;border:1px solid #e4e7ec;border-radius:18px;padding:26px;margin-top:42px;max-width:660px;box-shadow:0 18px 50px rgba(13,15,19,.07)}
.gp-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:16px}
.gp-t{font-size:18px;font-weight:700;color:#0d0f13;letter-spacing:-.015em}
.gp-s{font-size:13px;color:#8b91a0;margin-top:3px}
.gp-score{font-size:30px;font-weight:800;color:#0d0f13;letter-spacing:-.03em;white-space:nowrap}
.gp-score small{font-size:13.5px;font-weight:500;color:#8b91a0;margin-left:4px}
.gp-bar{height:7px;border-radius:4px;background:#eef0f3;overflow:hidden}
.gp-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#ff8f6b);border-radius:4px}
.gp-rows{margin-top:18px}
.gp-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-top:1px solid #f0f2f5;font-size:14.5px}
.gp-k{color:#8b91a0}
.gp-v{color:#2d3340;font-weight:500}
.gp-v.ok{color:#0a7a47}
.gp-note{margin-top:18px;padding:13px 15px;background:#fff5f2;border:1px solid #ffd9cd;border-radius:11px;font-size:14.5px;color:#a8442a;line-height:1.55}

/* related cross-links */
.rel{display:grid;gap:14px;margin-top:38px}
@media(min-width:820px){.rel{grid-template-columns:repeat(3,1fr)}}
.relc{display:block;background:#fff;border:1px solid #e4e7ec;border-radius:14px;padding:22px;transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s}
.relc:hover{transform:translateY(-3px);box-shadow:0 16px 38px rgba(13,15,19,.08);border-color:#d7dbe2}
.relc b{display:block;font-size:16px;color:#0d0f13;letter-spacing:-.015em;margin-bottom:6px}
.relc span{display:block;font-size:14.5px;color:#525a6b;line-height:1.55}

@media(max-width:860px){
  .phero{padding:104px 0 62px}
  .phero h1{font-size:clamp(32px,8.4vw,46px)}
  .gpanel{padding:20px}
  .gp-score{font-size:25px}
  .gstep{padding:24px 0}
  .gstep h3{font-size:19px}
}

/* ── agents page ───────────────────────────────────────
   Hero: the mark at size, with the lit node travelling between agents. That
   movement IS a handover, so the logo explains the product before the copy. */
.ahero{display:grid;gap:48px;align-items:center}
@media(min-width:940px){.ahero{grid-template-columns:1.05fr .95fr;gap:64px}}
.orbit-wrap{display:flex;justify-content:center}
.orbit{width:min(340px,84vw);height:auto;overflow:visible}
.orbit .onode circle{fill:#2b313b;transition:fill .5s cubic-bezier(.16,1,.3,1),r .5s cubic-bezier(.16,1,.3,1)}
.orbit .onode text{fill:#646c7d;font-size:11px;font-weight:600;text-anchor:middle;letter-spacing:.02em;transition:fill .5s}
.orbit .onode.lit circle{fill:var(--accent);r:12}
.orbit .onode.lit text{fill:#fff}
.orbit .ocore{fill:#fff}
.orbit .olabel{fill:#0d0f13;font-size:9.5px;font-weight:700;text-anchor:middle}
/* a soft pulse under whichever node is active */
.orbit .onode.lit circle{filter:drop-shadow(0 0 12px rgba(255,92,61,.55))}
@media (prefers-reduced-motion:reduce){.orbit .onode circle,.orbit .onode text{transition:none}}

/* ── the handover demo ─────────────────────────────── */
.hdemo{display:grid;gap:20px;margin-top:44px}
@media(min-width:940px){.hdemo{grid-template-columns:1.25fr .75fr;gap:24px;align-items:start}}
.hd-chat{background:var(--panel);border:1px solid var(--rule);border-radius:16px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.4)}
.hd-bar{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--rule)}
.hd-body{padding:20px;display:flex;flex-direction:column;gap:12px;min-height:392px}
/* every step starts hidden; the script reveals them in order */
.hd-step{display:flex;flex-direction:column;gap:6px;opacity:0;transform:translateY(10px);transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1)}
.hd-step.on{opacity:1;transform:none}
.hd-route{font-size:12.5px;color:var(--ink-3);display:flex;align-items:center;gap:7px}
.hd-agent{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:6px}
.hd-agent.sup{background:rgba(91,141,255,.14);color:#8fb0ff}
.hd-think{font-size:12.5px;color:var(--ink-3);font-style:italic;padding-left:2px}
.hd-think em{color:var(--accent-2);font-style:normal}
.hd-think::after{content:'';display:inline-block;width:4px;height:4px;border-radius:50%;background:var(--ink-3);margin-left:7px;animation:blink 1.1s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}

/* case file, filling as the conversation runs */
.hd-case{background:var(--bg-2);border:1px solid var(--rule);border-radius:16px;padding:20px}
.hd-case-h{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:16px}
.hd-case-h span{display:block;font-size:11px;font-weight:400;letter-spacing:.02em;text-transform:none;color:var(--ink-3);margin-top:4px}
.cf-row{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-top:1px solid #1b1f26;font-size:13.5px;opacity:0;transform:translateX(-6px);transition:opacity .55s,transform .55s}
.cf-row.on{opacity:1;transform:none}
.cf-k{color:var(--ink-3);white-space:nowrap}
.cf-v{color:#fff;text-align:right}
.cf-v.warn{color:#ff8f6b;font-weight:600}
.hd-case-f{margin-top:16px;padding-top:14px;border-top:1px solid #1b1f26;font-size:12.5px;color:var(--ink-3)}

/* ── limits ────────────────────────────────────────── */
.limits{display:grid;gap:18px;margin-top:42px}
@media(min-width:820px){.limits{grid-template-columns:1fr 1fr;gap:22px}}
.limit{border-left:2px solid var(--rule);padding-left:22px}
.limit b{display:block;font-size:17px;color:#fff;letter-spacing:-.015em;margin-bottom:7px}
.limit span{display:block;font-size:15.5px;color:var(--ink-2);line-height:1.6}

@media(max-width:860px){
  .ahero{gap:34px}
  .hd-body{min-height:0;padding:16px}
  .hd-case{padding:16px}
  .orbit{width:min(280px,80vw)}
}