/* NeuralFlow site system: tokens, base, nav, buttons, sections, footer. Shared by every page. */
/* Self-hosted Inter 4 variable (OFL): wght 400–700, opsz 14–32 (opsz 32 is Inter Display). One family,
   one @font-face for the whole site (audit 3, rule 17). Geist is retired from the pages. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-var-400-700.woff2) format('woff2')}
/* ─── Tokens ─────────────────────────────────────────────────────────────── */
/* Theme tokens (audit 2, Oct 2026): light is the default and reads on a solid white ground;
   dark is the product's deep ink (#0b0f1a ground, #10141f / #161b29 surfaces), never black.
   The system preference picks the start; the toggle stores an explicit choice (site.js). */
:root{
  --paper:#FFFFFF; --surface:#F5F5F9; --surface-2:#EBEBF2; --card:#FFFFFF; --ink:#14141F; --ink-2:#3A3A4C; --muted:#5F5F73; --line:#E6E6EE; --line-2:#D1D1DD;
  --accent:#F25A1C; --accent-ink:#FFFFFF; --ok:#2E7D4F;
  --display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* --mono is kept as the token name every label style uses; labels are no longer monospace (rule 17), so it resolves to Inter */
  --mono:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-s:10px; --r-m:16px; --r-l:28px; --pill:999px;
  --ease:cubic-bezier(.32,.72,0,1); --fast:.16s cubic-bezier(.25,.46,.45,.94);
  --gutter:clamp(20px,4vw,72px); --max:clamp(1240px,76vw,1520px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0B0F1A;--surface:#10141F;--surface-2:#161B29;--card:#10141F;--ink:#F3F4F8;--ink-2:#C9CCD8;--muted:#9A9FB3;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--accent:#FF7A45;--accent-ink:#0B0F1A;--ok:#7FC48B;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0B0F1A;--surface:#10141F;--surface-2:#161B29;--card:#10141F;--ink:#F3F4F8;--ink-2:#C9CCD8;--muted:#9A9FB3;--line:rgba(255,255,255,.08);--line-2:rgba(255,255,255,.15);--accent:#FF7A45;--accent-ink:#0B0F1A;--ok:#7FC48B;color-scheme:dark}

/* ─── Base ───────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.55;font-optical-sizing:auto;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter)}
section{padding-block:clamp(72px,9vw,128px)}
.eyebrow{font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sec,var(--accent));margin:0 0 18px}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.03em;line-height:1.02;margin:0;text-wrap:balance;font-variation-settings:'opsz' 32}
h1{font-size:clamp(40px,5.6vw,72px)}
h2{font-size:clamp(32px,4.2vw,52px)}
h3{font-size:clamp(20px,2vw,24px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.lede{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2);max-width:56ch}
.muted{color:var(--muted)}
.head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,5vw,80px);align-items:end;margin-bottom:clamp(36px,5vw,64px)}
.head .lede{max-width:46ch}
@media (max-width:860px){.head{grid-template-columns:1fr;align-items:start}}

/* Buttons: black pill, outline pill. Nothing else. */
.btn{display:inline-flex;align-items:center;gap:8px;height:48px;padding:0 22px;border-radius:var(--pill);font-weight:500;font-size:15px;white-space:nowrap;border:1px solid var(--ink);background:var(--ink);color:var(--paper);transition:transform var(--fast),background-color var(--fast),border-color var(--fast),color var(--fast)}
.btn:hover{transform:translateY(-1px)}
.btn.o{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.o:hover{border-color:var(--ink)}
.btn.s{height:40px;padding:0 16px;font-size:14px}
.arrow{display:inline-block;transition:transform var(--fast)}
a:hover .arrow,.btn:hover .arrow{transform:translateX(3px)}
.link{font-weight:500;display:inline-flex;align-items:center;gap:6px;color:var(--ink)}

/* ─── Nav ─────────────────────────────────────────────────────────────────── */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:saturate(1.2) blur(12px);-webkit-backdrop-filter:saturate(1.2) blur(12px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:68px}
.brand{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.brand i{width:26px;height:25px;flex:none;display:inline-block;background:url(/assets/img/nf-mark-sm.svg) center/contain no-repeat}
.nav-links{display:flex;gap:26px;margin-left:12px;font-size:15px;color:var(--ink-2)}
.nav-links a{position:relative;padding:6px 0;transition:color var(--fast)}
.nav-links a:hover{color:var(--ink)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.theme{width:44px;height:44px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line-2);color:var(--ink-2);transition:border-color var(--fast),color var(--fast)}
.theme:hover{border-color:var(--ink);color:var(--ink)}
.theme svg{width:18px;height:18px}
.theme .moon{display:none}
:root[data-theme="dark"] .theme .sun{display:none}:root[data-theme="dark"] .theme .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme .sun{display:none}:root:not([data-theme="light"]) .theme .moon{display:block}}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--line-2);align-items:center;justify-content:center}
.burger svg{width:18px;height:18px}
.drawer{display:none}
@media (max-width:900px){
  .nav-links{display:none}.burger{display:inline-flex}.nav .btn{display:none}
  .drawer{display:none;position:fixed;inset:76px 0 0 0;background:var(--paper);z-index:49;padding:24px var(--gutter);flex-direction:column;gap:4px;border-top:1px solid var(--line)}
  .drawer.open{display:flex}
  .drawer a{font-family:var(--display);font-size:28px;font-weight:600;letter-spacing:-.03em;padding:12px 0;border-bottom:1px solid var(--line)}
  .drawer .btn{display:inline-flex;margin-top:18px;align-self:flex-start;font-family:var(--body);font-size:15px;font-weight:500;border-bottom:1px solid var(--ink)}
}

/* ─── Hero ────────────────────────────────────────────────────────────────── */
.hero{padding-block:clamp(36px,5vw,64px) clamp(40px,5vw,72px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,8fr) minmax(300px,4fr);gap:clamp(24px,4vw,64px);align-items:end}
@media (max-width:860px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.hero .demo{margin-top:clamp(36px,5vw,64px)}
.demo-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.next{border-left:1px solid var(--line);background:var(--surface);padding:22px;display:flex;flex-direction:column;gap:14px}
.next .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.next .ev{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:grid;grid-template-columns:28px 1fr;gap:10px;align-items:start;font-size:14px;line-height:1.4}
.next .ev i{width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px}
.next .ev b{display:block;font-weight:500}.next .ev span{color:var(--muted)}
.next .ev.live i{background:var(--accent);color:var(--accent-ink)}
@media (max-width:860px){.demo-grid{grid-template-columns:minmax(0,1fr)}.next{display:none}.demo-foot span:last-child{display:none}}
/* Rotating word: four words stacked in one grid cell (width = the widest), each fades/rises in for a quarter of an 8s cycle */
.hero h1 .rot{display:inline-grid;vertical-align:baseline;color:var(--accent);text-align:left}
.hero h1 .rot b{grid-area:1/1;font-weight:300;white-space:nowrap;opacity:0;transform:translateY(.35em);animation:word 8s cubic-bezier(.2,.7,.2,1) infinite}
.hero h1 .rot b:nth-child(1){animation-delay:0s}.hero h1 .rot b:nth-child(2){animation-delay:2s}.hero h1 .rot b:nth-child(3){animation-delay:4s}.hero h1 .rot b:nth-child(4){animation-delay:6s}
@keyframes word{0%{opacity:0;transform:translateY(.35em)}4%,22%{opacity:1;transform:none}27%,100%{opacity:0;transform:translateY(-.35em)}}
.hero-form{display:flex;gap:8px;margin-top:24px;max-width:520px;background:var(--card);border:1px solid var(--line-2);border-radius:var(--pill);padding:5px 5px 5px 20px;align-items:center;transition:border-color var(--fast)}
.hero-form:focus-within{border-color:var(--ink)}
.hero-form input{flex:1 1 0;width:0;min-width:0;border:0;background:transparent;font:inherit;font-size:16px;color:var(--ink);outline:none}
.hero-form input::placeholder{color:var(--muted)}
.hero-form .btn{height:42px}
@media (max-width:480px){.hero-form{flex-wrap:wrap;border-radius:24px;padding:8px}.hero-form input{flex:1 1 100%;width:100%;padding:8px 10px}.hero-form .btn{width:100%;justify-content:center}}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;font-size:14px;color:var(--muted)}
.chips span{display:inline-flex;align-items:center;gap:8px}
.chips i{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.chips i.ok{background:var(--ok);box-shadow:none}

/* Demo card: the product, in the hero */
.demo{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;box-shadow:0 1px 0 var(--line)}
/* the visitor names their own business, or picks an example */
.demo-setup{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr) auto;gap:6px;padding:10px;background:var(--surface);border-bottom:1px solid var(--line)}
.demo-setup input{height:40px;min-width:0;border:1px solid var(--line-2);border-radius:var(--pill);padding:0 14px;font:inherit;font-size:14px;background:var(--card);color:var(--ink);outline:none;transition:border-color var(--fast)}
.demo-setup input:focus{border-color:var(--ink)}
.demo-setup .btn{height:40px}
.demo-picks{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.demo-picks button{height:28px;padding:0 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink-2);font-size:12.5px;font-weight:500;transition:border-color var(--fast),color var(--fast)}
.demo-picks button:hover{border-color:var(--ink);color:var(--ink)}
.demo-picks button.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.compose input:disabled,.compose .btn:disabled{opacity:.55;cursor:not-allowed}
@media (max-width:600px){.demo-setup{grid-template-columns:1fr 1fr}.demo-setup .btn{grid-column:1/-1;justify-content:center}}
.chat{display:flex;flex-direction:column;height:400px}
.chat-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.avatar{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;letter-spacing:.02em}
.chat-head b{font-weight:500;display:block;font-size:15px;line-height:1.2}
.chat-head small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}
.chat-head small i{width:6px;height:6px;border-radius:50%;background:var(--ok)}
.log{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px;scroll-behavior:smooth}
.msg{max-width:86%;padding:10px 14px;border-radius:16px;font-size:15px;line-height:1.45;white-space:pre-wrap;animation:pop .32s var(--ease) both}
.msg.a{align-self:flex-start;background:var(--surface);border-bottom-left-radius:5px}
.msg.u{align-self:flex-end;background:var(--ink);color:var(--paper);border-bottom-right-radius:5px}
.typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--surface);border-radius:16px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.compose{display:flex;gap:8px;padding:12px;border-top:1px solid var(--line)}
.compose input{flex:1 1 0;width:0;min-width:0;height:44px;border:1px solid var(--line-2);border-radius:var(--pill);padding:0 16px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink);outline:none;transition:border-color var(--fast)}
.compose input:focus{border-color:var(--ink)}
.compose .btn{height:44px}
.demo-foot{display:flex;justify-content:space-between;align-items:center;padding:10px 18px;font-size:12px;color:var(--muted);background:var(--surface);border-top:1px solid var(--line)}

/* Hero choreography: one moment, then stillness. */
.js .hero .in{animation:rise .8s var(--ease) both}
.js .hero h1.in{animation:blurin .9s var(--ease) both}
.js .hero .in.d1{animation-delay:.12s}.js .hero .in.d2{animation-delay:.22s}.js .hero .in.d3{animation-delay:.32s}.js .hero .demo.in{animation-delay:.28s}
@keyframes blurin{from{opacity:0;filter:blur(14px);transform:translateY(10px)}to{opacity:1;filter:blur(0);transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* ─── Services strip ─────────────────────────────────────────────────────── */
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,78vw);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.svc{scroll-snap-align:start;border-radius:var(--r-l);min-height:400px;display:flex;flex-direction:column;justify-content:flex-end;padding:22px;position:relative;overflow:hidden;border:1px solid var(--line);background:var(--surface);transition:transform .35s var(--ease)}
.svc:hover{transform:translateY(-3px)}
.svc.ink{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.svc h3{margin-bottom:12px}
.svc ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:15px;color:inherit}
.svc ul li{display:flex;gap:10px;align-items:flex-start}
.svc ul li::before{content:"";width:16px;height:16px;border-radius:50%;flex:none;margin-top:3px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.svc .pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{font-size:12px;font-weight:500;padding:5px 10px;border-radius:var(--pill);border:1px solid var(--line-2);color:var(--ink-2);background:var(--card)}
.svc.ink .pill{border-color:rgba(255,255,255,.22);color:var(--paper);background:rgba(255,255,255,.06)}
.svc .art{position:absolute;inset:0;pointer-events:none}
/* the grainy duotone panel: our signature surface (ElevenLabs' agents card, in our ink) */
.grain{color:#fff;background:
  radial-gradient(120% 90% at 85% 10%,rgba(242,90,28,.62),transparent 55%),
  radial-gradient(90% 80% at 10% 100%,rgba(123,97,255,.32),transparent 60%),
  #101014}
.grain::after{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E")}
.svc .mini{position:relative;z-index:1;display:grid;gap:8px;margin-bottom:18px}
.bub{max-width:88%;padding:9px 12px;border-radius:14px;font-size:13.5px;line-height:1.4;background:rgba(255,255,255,.92);color:#101014}
.bub.r{align-self:flex-end;justify-self:end;background:rgba(16,16,20,.78);color:#fff;border:1px solid rgba(255,255,255,.18)}
.svc .shot{position:relative;z-index:1;border-radius:12px;border:1px solid var(--line);background:var(--card);padding:12px;margin-bottom:16px;font-size:12px;color:var(--muted);display:grid;gap:8px}
.shot .bar{height:8px;border-radius:4px;background:var(--surface-2)}
.shot .bar.w{width:60%}.shot .bar.k{background:var(--ink);width:34%}
.shot .row{display:flex;gap:8px;align-items:center}
.shot .num{font-family:var(--display);font-size:26px;font-weight:300;letter-spacing:-.02em;color:var(--ink)}
.strip-nav{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.strip-nav button{width:40px;height:40px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;transition:border-color var(--fast)}
.strip-nav button:hover{border-color:var(--ink)}
.strip-nav svg{width:16px;height:16px}

/* ─── Plans ──────────────────────────────────────────────────────────────── */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){.plans{grid-template-columns:1fr}}
.plan{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:28px;display:flex;flex-direction:column;gap:18px;min-width:0;transition:border-color .3s}
.plan:hover{border-color:var(--line-2)}
.plan.lead{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.plan .tag{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.plan.lead .tag{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.plan h3{font-size:26px;font-weight:300;letter-spacing:-.02em}
.plan .for{color:var(--muted);font-size:15px}.plan.lead .for{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:15px;border-top:1px solid var(--line);padding-top:18px}
.plan.lead ul{border-color:rgba(255,255,255,.14)}
.plan ul li{display:flex;gap:10px}.plan ul li::before{content:"";width:16px;height:16px;flex:none;margin-top:3px;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.plan .foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:8px}
.plan .price{font-size:14px;color:var(--muted)}.plan.lead .price{color:color-mix(in srgb,var(--paper) 72%,transparent)}
.plan.lead .btn{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.plans-note{margin-top:18px;font-size:14px;color:var(--muted)}

/* ─── Bottlenecks ───────────────────────────────────────────────────────── */
.bott{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:900px){.bott{grid-template-columns:1fr}}
.checks{background:var(--ink);color:var(--paper);border-radius:var(--r-l);padding:28px;display:grid;gap:14px}
.checks div{display:flex;gap:14px;align-items:flex-start;font-size:16px;line-height:1.4;padding-bottom:14px;border-bottom:1px solid rgba(255,255,255,.12)}
.checks div:last-child{border:0;padding-bottom:0}
.checks i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.checks i::after{content:"";width:12px;height:12px;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.checks b{font-weight:500}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
@media (max-width:560px){.stats{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);padding:20px}
.stat b{display:block;font-family:var(--display);font-weight:300;font-size:40px;letter-spacing:-.03em;line-height:1;margin-bottom:8px}
.stat span{font-size:14px;color:var(--muted)}
.quote{font-size:clamp(20px,2.2vw,26px);font-weight:300;line-height:1.35;letter-spacing:-.015em;text-wrap:pretty}
.who{display:flex;align-items:center;gap:12px;margin-top:20px;font-size:14px}
.who img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.who b{display:block;font-weight:500}.who span{color:var(--muted)}

/* ─── Proof ─────────────────────────────────────────────────────────────── */
.proof{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.proof{grid-template-columns:1fr}}
.shotcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);overflow:hidden;min-width:0}
.shotcard figure{margin:0;background:var(--surface);aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid var(--line)}
.shotcard figure img{width:100%;height:100%;object-fit:contain;display:block}
.shotcard figure .ph{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.shotcard .cap{padding:18px 22px;display:grid;gap:4px}
.shotcard .cap b{font-weight:500}
.shotcard .cap span{font-size:14px;color:var(--muted)}

/* ─── How it works ───────────────────────────────────────────────────────── */
.how{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:900px){.how{grid-template-columns:1fr}}
.steps{display:grid;gap:10px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;transition:border-color var(--fast)}
.step[open]{border-color:var(--line-2)}
.step summary{list-style:none;display:flex;align-items:center;gap:16px;padding:18px 20px;cursor:pointer;font-size:19px;font-weight:400;letter-spacing:-.01em}
.step summary::-webkit-details-marker{display:none}
.step summary .n{font-family:var(--mono);font-size:12px;color:var(--muted);width:24px}
.step summary .chev{margin-left:auto;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.step[open] summary .chev{transform:rotate(180deg)}
.step .body{padding:0 20px 20px 60px;color:var(--ink-2);font-size:15px;line-height:1.5}
.how-shot{position:sticky;top:92px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);aspect-ratio:4/3;overflow:hidden;display:flex;align-items:center;justify-content:center}
.how-shot img{width:100%;height:100%;object-fit:contain;object-position:center;display:none;background:#eceae4}
.how-shot img.on{display:block}
.how-shot .ph{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}

/* ─── Built for ─────────────────────────────────────────────────────────── */
.verts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.verts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.verts{grid-template-columns:1fr}}
.vert{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:12px;min-height:280px;transition:transform .35s var(--ease),border-color var(--fast)}
.vert:hover{transform:translateY(-3px);border-color:var(--line-2)}
.vert .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.vert h3{font-size:22px;font-weight:300;letter-spacing:-.02em;line-height:1.15}
.vert p{font-size:15px;color:var(--ink-2)}
.vert .link{margin-top:auto;font-size:14px}

/* ─── About ─────────────────────────────────────────────────────────────── */
.about{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,72px);align-items:start}
@media (max-width:860px){.about{grid-template-columns:1fr}}
.portrait{border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:var(--surface);border:1px solid var(--line)}
.portrait img{width:100%;height:100%;object-fit:cover}
.about .lede{max-width:60ch}
/* founder signature only: the journey phone status bar also has an <svg class="sig"> */
div.sig{margin-top:22px;display:grid;gap:4px;font-size:14px;color:var(--muted)}
div.sig b{color:var(--ink);font-weight:500;font-size:15px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:28px}
@media (max-width:560px){.facts{grid-template-columns:1fr}}
.fact{border-top:1px solid var(--line);padding-top:12px;font-size:14px;color:var(--muted)}
.fact b{display:block;color:var(--ink);font-weight:500;font-size:15px;margin-bottom:2px}

/* ─── Changelog ─────────────────────────────────────────────────────────── */
.log-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1000px){.log-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.log-list{grid-template-columns:1fr}}
.entry{border-top:1px solid var(--ink);padding-top:14px;display:grid;gap:8px;min-width:0}
.entry time{font-family:var(--mono);font-size:12px;color:var(--muted)}
.entry b{font-weight:500;font-size:16px;line-height:1.3}
.entry p{font-size:14px;color:var(--muted)}

/* ─── FAQ ───────────────────────────────────────────────────────────────── */
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(20px,4vw,56px);align-items:start}
@media (max-width:900px){.faq{grid-template-columns:1fr}}
.qa{border-top:1px solid var(--line)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;padding:18px 0;cursor:pointer;font-size:18px;font-weight:400;letter-spacing:-.01em}
.qa summary::-webkit-details-marker{display:none}
.qa summary .chev{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s var(--ease)}
.qa details[open] summary .chev{transform:rotate(180deg)}
.qa .body{padding:0 0 18px;color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:60ch}
.ask{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;display:grid;gap:12px;position:sticky;top:92px}

/* ─── CTA + footer ──────────────────────────────────────────────────────── */
.cta{position:relative;border-radius:var(--r-l);overflow:hidden;padding:clamp(40px,6vw,88px);color:#fff;min-height:420px;display:flex;flex-direction:column;justify-content:center}
.cta h2{color:#fff;max-width:14ch}
.cta .lede{color:rgba(255,255,255,.78);margin-top:14px}
.cta .hero-form{background:rgba(255,255,255,.96);border-color:transparent;margin-top:28px}
.cta .hero-form input{color:#101014}
.cta .hero-form .btn{background:#101014;color:#fff;border-color:#101014}
footer{padding:48px 0 32px;border-top:1px solid var(--line);font-size:14px;color:var(--muted)}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:28px}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}
.foot b{display:block;color:var(--ink);font-weight:500;margin-bottom:10px}
.foot a{display:block;padding:3px 0;transition:color var(--fast)}.foot a:hover{color:var(--ink)}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:36px;padding-top:18px;border-top:1px solid var(--line);font-size:13px}

/* Reveal on scroll: one fade, no transforms racing the scroll */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rv.on{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
  .hero h1 .rot b{opacity:0;transform:none}.hero h1 .rot b:first-child{opacity:1}
}

/* ─── Additions II: availability ping, faces, animated service demos, tablet demo, story ── */
.avail{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:500;color:var(--ink-2);padding:6px 12px 6px 8px;border-radius:999px;border:1px solid var(--line);background:var(--card);margin-bottom:18px}
.avail i{width:9px;height:9px;border-radius:50%;background:#2E9E5B;position:relative}
.avail i::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid #2E9E5B;opacity:0;animation:ping 2s cubic-bezier(.2,.7,.2,1) infinite}
@keyframes ping{0%{transform:scale(.5);opacity:.9}80%,100%{transform:scale(1.4);opacity:0}}
.faces{display:flex;align-items:center;gap:12px;margin-top:22px;font-size:13.5px;color:var(--muted);max-width:520px}
.faces .hs{display:flex;flex:none}.faces img{width:36px;height:36px;border-radius:50%;border:2px solid var(--paper);object-fit:cover;margin-left:-8px}.faces img:first-child{margin-left:0}
/* strip demos */
.mini.loop .bub{opacity:0;animation:bubin .5s var(--ease) forwards}
.mini.loop .bub:nth-child(1){animation-delay:.4s}.mini.loop .bub:nth-child(2){animation-delay:1.6s}.mini.loop .bub:nth-child(3){animation-delay:3.2s}.mini.loop .bub:nth-child(4){animation-delay:4.6s}
.mini.loop{animation:loopreset 9s steps(1) infinite}
.bub.ok{background:#2E9E5B;color:#fff}
@keyframes bubin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes loopreset{0%,100%{opacity:1}}
.svc .mini.loop .bub{animation-iteration-count:infinite;animation-duration:9s;animation-timing-function:var(--ease)}
@keyframes bubin{0%{opacity:0;transform:translateY(8px)}5%,75%{opacity:1;transform:none}82%,100%{opacity:0;transform:translateY(-4px)}}
.shot.load .bar{position:relative;overflow:hidden}
.shot.load .bar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:translateX(-100%);animation:shine 2.6s ease-in-out infinite}
.shot.load .bar:nth-child(3)::after{animation-delay:.3s}
@keyframes shine{to{transform:translateX(100%)}}
/* the status ticker: one track slides up a word at a time (one animation, so two words never overlap) */
.shot.rank .num{display:inline-block;height:1.15em;overflow:hidden;font-size:20px;line-height:1.15;white-space:nowrap;vertical-align:middle}
.shot.rank .num .track{display:flex;flex-direction:column;animation:rankticker 6s cubic-bezier(.6,0,.2,1) infinite}
.shot.rank .num em{font-style:normal;height:1.15em}
.shot.rank .num em:nth-child(3){color:var(--accent)}
@keyframes rankticker{0%,27%{transform:translateY(0)}33%,60%{transform:translateY(-1.15em)}66%,93%{transform:translateY(-2.3em)}100%{transform:translateY(-3.45em)}}
.shot.rank .bar{animation:grow 6s ease-in-out infinite;transform-origin:left}
.shot.rank .bar.g1{width:70%;animation-name:grow1}.shot.rank .bar.g2{width:46%;animation-name:grow2}
@keyframes grow1{0%{width:30%}60%,100%{width:70%}}@keyframes grow2{0%{width:18%}60%,100%{width:46%}}
.flow{position:relative;z-index:1;display:flex;align-items:center;gap:6px;margin-bottom:18px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.flow span{padding:6px 9px;border-radius:8px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);animation:node 4.8s ease-in-out infinite}
.flow span:nth-child(3){animation-delay:1.2s}.flow span:nth-child(5){animation-delay:2.4s}.flow span:nth-child(7){animation-delay:3.6s}
.flow i{flex:1;height:1px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.flow i::after{content:"";position:absolute;left:-30%;top:0;width:30%;height:100%;background:var(--accent);animation:pulse 4.8s linear infinite}
.flow i:nth-child(4)::after{animation-delay:1.2s}.flow i:nth-child(6)::after{animation-delay:2.4s}
@keyframes node{0%,20%{background:rgba(255,255,255,.06)}8%{background:rgba(242,90,28,.55)}}
@keyframes pulse{0%{left:-30%}25%,100%{left:100%}}
/* tablet demo */
.demo2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
@media (max-width:900px){.demo2{grid-template-columns:minmax(0,1fr)}}
.ticks{list-style:none;padding:0;margin:24px 0 28px;display:grid;gap:10px;font-size:15.5px;color:var(--ink-2)}
.ticks li{display:flex;gap:12px}.ticks li::before{content:"";width:18px;height:18px;flex:none;margin-top:2px;border-radius:50%;background:var(--ink);mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='8'/%3E%3C/svg%3E") center/contain no-repeat;position:relative}
.dev-tablet{background:#15151B;border-radius:30px;padding:14px;position:relative;box-shadow:0 44px 84px -40px rgba(16,16,20,.6),inset 0 0 0 1px rgba(255,255,255,.08);max-width:640px;margin:0 auto}
.dev-tablet::before{content:"";position:absolute;top:6px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2a2a32}
.tab-screen{background:var(--paper);border-radius:18px;height:460px;display:flex;flex-direction:column;overflow:hidden}
.tab-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.tab-head b{display:block;font-weight:500;font-size:15px;line-height:1.2}.tab-head small{color:var(--muted);font-size:12px;display:flex;align-items:center;gap:6px}.tab-head small i{width:6px;height:6px;border-radius:50%;background:#2E9E5B}
.tab-head .live{margin-left:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#2E9E5B;border:1px solid color-mix(in srgb,#2E9E5B 40%,transparent);padding:4px 8px;border-radius:999px}
.tab-log{flex:1;overflow:hidden;padding:18px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.tab-m{max-width:82%;padding:10px 14px;border-radius:16px;font-size:14.5px;line-height:1.45;animation:pop .35s var(--ease) both}
.tab-m.a{align-self:flex-start;background:var(--surface);border-bottom-left-radius:5px}
.tab-m.u{align-self:flex-end;background:var(--brand,var(--ink));color:#fff;border-bottom-right-radius:5px}
.tab-m.ok{align-self:flex-start;background:#2E9E5B;color:#fff;border-bottom-left-radius:5px}
.tab-typing{align-self:flex-start;display:flex;gap:4px;padding:12px 14px;background:var(--surface);border-radius:16px}
.tab-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:blink 1s infinite}.tab-typing i:nth-child(2){animation-delay:.15s}.tab-typing i:nth-child(3){animation-delay:.3s}
.tab-in{display:flex;align-items:center;justify-content:space-between;margin:12px;height:44px;border:1px solid var(--line-2);border-radius:999px;padding:0 6px 0 16px;font-size:14px;color:var(--muted)}
.tab-in i{width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--paper);display:inline-flex;align-items:center;justify-content:center;font-style:normal}
/* story */
.story{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(24px,5vw,80px);align-items:start}
@media (max-width:900px){.story{grid-template-columns:minmax(0,1fr)}.phone-col{order:-1}}
.steps-col{position:relative;padding:4vh 0 30vh 36px}
.steps-col::before{content:"";position:absolute;left:11px;top:0;bottom:0;width:1px;background:var(--line-2)}
@media (max-width:900px){.steps-col{padding:0 0 0 36px}}
.sstep{padding:28px 0;opacity:.38;transition:opacity .5s var(--ease);position:relative}
.sstep::before{content:"";position:absolute;left:-30px;top:40px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:2px solid var(--line-2);transition:background .3s,border-color .3s,box-shadow .3s}
.sstep.on{opacity:1}.sstep.on::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 18%,transparent)}
.sstep .t{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.06em}
.sstep h3{font-family:var(--display);font-weight:300;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:6px 0 8px}
.sstep p{font-size:16px;line-height:1.55;color:var(--ink-2);max-width:46ch}
.phone-col{position:sticky;top:96px}
.dev-phone{width:300px;margin:0 auto;background:#15151B;border-radius:44px;padding:12px;box-shadow:0 44px 84px -40px rgba(16,16,20,.65),inset 0 0 0 1px rgba(255,255,255,.08);position:relative}
.dev-phone::before{content:"";position:absolute;top:22px;left:50%;width:96px;height:26px;margin-left:-48px;border-radius:14px;background:#0a0a0d;z-index:2}
.ph-screen{background:var(--paper);border-radius:34px;height:600px;position:relative;overflow:hidden}
.ph-status{display:flex;justify-content:space-between;padding:16px 26px 0;font-size:12px;font-weight:500;color:var(--ink)}
.ph-view{position:absolute;inset:60px 16px 20px;opacity:0;transform:translateY(14px);transition:opacity .5s var(--ease),transform .5s var(--ease);display:flex;flex-direction:column}
[data-step="0"] .v0,[data-step="1"] .v1,[data-step="2"] .v2,[data-step="3"] .v3{opacity:1;transform:none}
.ph-site{display:grid;gap:10px;padding:14px}.ph-site b{font-family:var(--display);font-weight:400;font-size:18px;color:#1F3A5F}.ph-site span{height:9px;border-radius:5px;background:var(--surface-2);display:block}.ph-hero{height:110px;border-radius:12px;background:linear-gradient(135deg,#dfe6ef,#f3f6fa)}
.ph-bubble{margin-top:auto;align-self:flex-end;background:#1F3A5F;color:#fff;font-size:13px;font-weight:500;padding:11px 16px;border-radius:999px;box-shadow:0 10px 24px -12px rgba(0,0,0,.4);animation:bob 2.4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-4px)}}
.ph-chat{display:flex;flex-direction:column;gap:10px;padding:8px}
.ph-m{max-width:88%;padding:10px 13px;border-radius:14px;font-size:13.5px;line-height:1.4}
.ph-m.a{align-self:flex-start;background:var(--surface);border-bottom-left-radius:4px}.ph-m.u{align-self:flex-end;background:var(--brand,var(--ink));color:#fff;border-bottom-right-radius:4px}
.ph-cal{padding:8px;display:grid;gap:8px}.ph-cal-head{font-family:var(--display);font-size:20px;font-weight:300;letter-spacing:-.02em;margin-bottom:6px}
.ph-slot{border:1px solid var(--line-2);border-radius:12px;padding:14px;font-size:15px;font-weight:500;background:var(--card)}
.ph-slot.sel{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ph-note{font-size:12px;color:var(--muted);margin-top:6px}
.ph-done{padding:18px 8px;display:grid;gap:8px;justify-items:start}
.ph-check{width:52px;height:52px;border-radius:50%;background:#2E9E5B;position:relative;margin-bottom:8px}
.ph-check::after{content:"";position:absolute;inset:14px;background:#fff;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.ph-done b{font-family:var(--display);font-weight:300;font-size:26px;letter-spacing:-.02em}.ph-done>span{font-size:14px;color:var(--ink-2);margin-bottom:8px}
.ph-card{display:flex;gap:10px;align-items:center;width:100%;font-size:13px;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--line)}
.ph-card i{width:8px;height:8px;border-radius:50%;background:#2E9E5B;flex:none}
/* verticals with faces */
.vert{padding:0;overflow:hidden}
.vert .vphoto{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vert .k,.vert h3,.vert p{margin-inline:24px}.vert .k{margin-top:18px}.vert .link{margin:auto 24px 22px}
@media (prefers-reduced-motion:reduce){.avail i::after,.mini.loop .bub,.shot.load .bar::after,.shot.rank .num em,.shot.rank .bar,.flow span,.flow i::after,.ph-bubble{animation:none!important;opacity:1}}
@media (prefers-reduced-motion:reduce){.shot.rank .num .track{animation:none!important;transform:translateY(-2.3em)}}
.hero-grid{align-items:start}
.hero-grid>div:last-child{padding-top:clamp(28px,5vw,78px)}
.vert .vphoto{aspect-ratio:16/10;object-position:center 30%}
.who-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:28px;padding:18px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
.who-foot .hs{display:flex;flex:none}.who-foot img{width:40px;height:40px;border-radius:50%;border:2px solid var(--paper);object-fit:cover;margin-left:-10px}.who-foot img:first-child{margin-left:0}
.who-foot p{flex:1 1 320px;font-size:15px;color:var(--ink-2);margin:0}
.hero h1 .rot{width:var(--rw,auto);transition:width .45s var(--ease);justify-items:start}

/* ─── Pass 4: ring carousel, voice call, agents, changelog cards, light hero color ── */
.hero{padding-block:clamp(20px,3vw,40px) clamp(40px,5vw,72px)}
.hero-grid>div:last-child{padding-top:clamp(16px,3.5vw,52px)}
.ring-wrap{position:relative;height:520px;perspective:1700px;perspective-origin:50% 38%;touch-action:pan-y;user-select:none;cursor:grab}
.ring-wrap.drag{cursor:grabbing}
.ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-7deg) rotateY(0deg)}
.ring .svc{position:absolute;left:-160px;top:-215px;width:320px;min-height:430px;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform;cursor:pointer;transition:none}
.ring .svc:hover{transform:none}
.ring .svc:not(.ink):not(.grain){background:var(--card);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
.ring-hint{text-align:center;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:-6px}
@media (max-width:760px){
  .ring-wrap{height:auto;perspective:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);padding-bottom:12px;scrollbar-width:none;cursor:default}
  .ring{position:static;transform:none!important;display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,80vw);gap:14px;width:auto;height:auto}
  .ring .svc{position:static;left:auto;top:auto;width:auto;transform:none!important;opacity:1!important;scroll-snap-align:start}
  .ring-hint{display:none}
}
/* voice call demo */
.call{display:grid;gap:10px;padding:14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);margin-bottom:16px;position:relative;z-index:1}
.call-head{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.call-head i{width:8px;height:8px;border-radius:50%;background:#2E9E5B;animation:pingdot 1.6s ease-in-out infinite}
.wave{display:flex;align-items:center;gap:4px;height:34px}
.wave i{width:4px;border-radius:2px;background:linear-gradient(180deg,#FF6B2B,#7B61FF);height:30%;animation:wave 1.1s ease-in-out infinite}
.wave i:nth-child(2){animation-delay:.1s}.wave i:nth-child(3){animation-delay:.2s}.wave i:nth-child(4){animation-delay:.3s}.wave i:nth-child(5){animation-delay:.15s}.wave i:nth-child(6){animation-delay:.05s}.wave i:nth-child(7){animation-delay:.35s}.wave i:nth-child(8){animation-delay:.25s}.wave i:nth-child(9){animation-delay:.4s}.wave i:nth-child(10){animation-delay:.12s}.wave i:nth-child(11){animation-delay:.3s}.wave i:nth-child(12){animation-delay:.2s}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}
.call-line{font-size:13.5px;line-height:1.4;color:var(--ink)}
.call-tag{align-self:start;font-size:12px;font-weight:500;color:#fff;background:#2E9E5B;padding:4px 9px;border-radius:999px}
/* agents */
.agents{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:960px){.agents{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.agents{grid-template-columns:minmax(0,1fr)}}
.agent{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:24px;display:flex;flex-direction:column;gap:10px;min-width:0}
.ag-ic{width:42px;height:42px;border-radius:12px;background:var(--brand,var(--ink));color:#fff;display:inline-flex;align-items:center;justify-content:center;margin-bottom:6px}
.ag-ic svg{width:20px;height:20px}
.agent h3{font-size:21px;font-weight:400;letter-spacing:-.015em}
.agent p{font-size:15px;line-height:1.5;color:var(--ink-2)}
.ag-k{margin-top:auto;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-top:8px}
/* problem markers on the problem card: a dash, not a tick */
.checks i{background:rgba(255,122,69,.16);box-shadow:inset 0 0 0 1px rgba(255,122,69,.45)}.checks i::after{width:10px;height:2px;border-radius:2px;background:#FF7A45;-webkit-mask:none;mask:none}
/* changelog as even cards */
.entry{border-top:0;padding:22px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);grid-template-rows:auto auto 1fr;align-content:start}
.entry b{min-height:2.6em}
/* footer brand dot spacing */
footer .brand{display:inline-flex!important;align-items:center;gap:10px}
/* light hero: more color */
.hero .glass-field i:first-child{background:radial-gradient(circle at 40% 40%,rgba(242,90,28,.34),transparent 66%)}
.hero .glass-field i:last-child{background:radial-gradient(circle at 60% 60%,rgba(123,97,255,.30),transparent 66%)}
.hero .glass-field::after{background:radial-gradient(circle,rgba(255,107,43,.14) 0%,rgba(123,97,255,.12) 55%,transparent 75%)}
@media (prefers-reduced-motion:reduce){.wave i,.call-head i{animation:none}}
.hero h1 .rot b{animation:none;opacity:0;transform:translateY(.35em);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.hero h1 .rot b.on{opacity:1;transform:none}
.ring-wrap{height:580px}
.svc-more{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:14px;font-weight:500;color:inherit;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:1px;align-self:flex-start}
/* legal pages */
.legal{max-width:72ch}.legal h2{font-size:clamp(22px,2.4vw,28px);font-weight:400;letter-spacing:-.015em;margin:40px 0 10px}.legal h3{font-size:17px;font-weight:500;margin:18px 0 6px}
.legal p,.legal li{font-size:16px;line-height:1.6;color:var(--ink-2)}.legal ul{padding-left:20px;margin:0 0 10px;display:grid;gap:8px}.legal a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}.legal strong{color:var(--ink);font-weight:500}
/* roi */
.roi{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:clamp(18px,3vw,40px);align-items:start}
@media (max-width:900px){.roi{grid-template-columns:minmax(0,1fr)}}
.roi-in{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);padding:clamp(20px,3vw,32px);display:grid;gap:22px}
.roi-in .field{display:grid;grid-template-columns:1fr auto;gap:6px 14px;align-items:center}
.roi-in label{grid-column:1/-1;font-size:15px;font-weight:500}.roi-in label small{display:block;font-weight:400;color:var(--muted);font-size:13px;margin-top:2px}
.roi-in input[type=range]{width:100%;accent-color:var(--accent)}
.roi-in output{font-family:var(--display);font-weight:400;font-size:20px;letter-spacing:-.01em;min-width:72px;text-align:right}
.roi-in select{grid-column:1/-1;height:44px;border:1px solid var(--line-2);border-radius:12px;padding:0 12px;font:inherit;font-size:15px;background:var(--paper);color:var(--ink)}
.roi-out{position:sticky;top:96px;border-radius:var(--r-l);padding:clamp(22px,3vw,34px);color:#fff;display:grid;gap:14px;overflow:hidden}
.roi-out>*{position:relative;z-index:1}
.roi-out .k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.roi-out .big{display:grid;gap:2px}.roi-out .big b{font-family:var(--display);font-weight:300;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em;line-height:1}.roi-out .big span{font-size:14px;color:rgba(255,255,255,.75)}
.roi-out .big.acc b{color:#FFB38A}.roi-out .big.year b{font-size:clamp(40px,5vw,64px)}
.roi-out hr{border:0;border-top:1px solid rgba(255,255,255,.14);margin:4px 0}
.roi-note{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.roi-form{display:grid;gap:10px;margin-top:8px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14)}
.roi-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:520px){.roi-form .row2{grid-template-columns:1fr}}
.roi-form input{height:44px;border:1px solid rgba(255,255,255,.22);border-radius:12px;padding:0 14px;font:inherit;font-size:15px;background:rgba(255,255,255,.08);color:#fff;outline:none}.roi-form input::placeholder{color:rgba(255,255,255,.55)}.roi-form input:focus{border-color:#fff}
.roi-form .btn{background:#fff;color:#101014;border-color:#fff;justify-content:center}
.roi-msg{font-size:14px;color:#fff}

.plan .foot{align-items:center;padding-top:18px;border-top:1px solid var(--line)}.plan.lead .foot{border-color:rgba(255,255,255,.14)}
.plan.lead .foot .btn{margin-left:auto}
.lp-demo-wrap{display:grid;gap:12px}
.lp-demo-cap{font-size:14px;line-height:1.45;color:var(--muted)}
/* ring on phones: smaller cards, same carousel */
@media (max-width:760px){
  .ring-wrap{height:520px;perspective:1100px;overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none;cursor:grab}
  .ring{position:absolute;left:50%;top:50%;width:0;height:0;display:block;transform:rotateX(-7deg)}
  .ring .svc{position:absolute;left:-130px;top:-215px;width:260px;min-height:400px;padding:18px;scroll-snap-align:none}
  .ring .svc h3{font-size:19px}.ring .svc ul{font-size:14px}
  .ring-hint{display:block}
}

/* ─── Mobile pass: shorter, swipeable, compact ─────────────────────────── */
.lede-m{display:none}
@media (max-width:760px){
  section{padding-block:clamp(44px,10vw,64px)}
  .head{margin-bottom:22px;gap:10px}
  h1{font-size:clamp(36px,10.5vw,44px)}h2{font-size:clamp(27px,7.6vw,32px)}
  .lede{font-size:16px}
  .hero{padding-block:16px 36px}
  .hero .glass-field i{width:360px;height:320px;filter:blur(44px)}
  .hero .lede:not(.lede-m){display:none}.hero .lede-m{display:block;margin-top:6px}
  .hero-grid{gap:14px}.hero-grid>div:last-child{padding-top:0}
  .avail{margin-bottom:12px;font-size:12.5px}
  .eyebrow{font-size:11px;margin-bottom:12px}
  .chips{gap:6px 14px;margin-top:14px;font-size:13px}.chips span:nth-child(3){display:none}
  .faces{margin-top:14px;font-size:12.5px}.faces img{width:30px;height:30px}
  .hero .demo{margin-top:22px}.chat{height:360px}.demo-foot{font-size:11px}
  /* swipeable rows */
  .plans,.proof,.verts,.log-list{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84vw;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);padding-bottom:14px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .plans::-webkit-scrollbar,.proof::-webkit-scrollbar,.verts::-webkit-scrollbar,.log-list::-webkit-scrollbar{display:none}
  .plans>*,.proof>*,.verts>*,.log-list>*{scroll-snap-align:start;min-width:0}
  .plan{padding:22px}.plan h3{font-size:23px}.plan ul{font-size:14px;gap:7px}
  .vert{min-height:0}.vert .vphoto{aspect-ratio:16/10}.vert h3{font-size:19px}.vert p{font-size:14px}
  .shotcard .cap{padding:14px 16px}
  .entry{padding:18px}.entry b{min-height:0}
  .swipe-hint{display:none}
@media (max-width:760px){.swipe-hint{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:2px}}
  /* agents: compact two-up */
  .agents{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .agent{padding:14px;gap:6px;border-radius:16px}.ag-ic{width:32px;height:32px;border-radius:9px;margin-bottom:2px}.ag-ic svg{width:16px;height:16px}
  .agent h3{font-size:15px;line-height:1.2}.agent p{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.ag-k{display:none}
  /* problem */
  .checks{padding:16px;gap:8px}.checks div{font-size:14.5px;padding:10px 12px}
  .quote{font-size:19px}.stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:18px}.stat{padding:12px 10px}.stat b{font-size:24px}.stat span{font-size:11px;line-height:1.3}
  /* journey */
  .journey{padding:16px;gap:14px;grid-template-columns:minmax(0,1fr)}
  .j-feed{display:none}
  .j-steps{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;margin-inline:-6px;padding-inline:6px}
  .j-step{flex:0 0 auto;grid-template-columns:auto;gap:2px;padding:9px 12px 12px;border-radius:999px;transform:none!important}
  .j-step .n{display:none}.j-step b{font-size:13px}.j-step .d{display:none}.j-step .bar{height:2px;left:12px;right:12px;bottom:6px;border-radius:2px}
  .j-phone .dev-phone{width:232px;padding:9px;border-radius:36px}.j-phone .ph-screen{height:450px;border-radius:28px}.ph-view{inset:52px 12px 14px}
  .dev-phone::before{top:17px;width:76px;height:20px;margin-left:-38px}.ph-status{padding:12px 20px 0;font-size:11px}
  /* how */
  .how-shot{position:static;padding:8px}
  /* about */
  .about{gap:18px}.portrait{max-width:200px;aspect-ratio:1/1}.bio{padding:18px}.facts{grid-template-columns:1fr 1fr;gap:10px}.fact{font-size:13px}
  /* faq + cta + footer */
  .qa summary{font-size:16px;padding:14px 0}.ask{padding:18px}
  .cta{padding:28px 20px;min-height:0}.cta h2{font-size:28px}
  .mega-cta{font-size:34px}.foot{gap:18px}footer.mega{padding-top:44px}
  .ar-nudge{max-width:calc(100vw - 100px)}
}

/* ─── Final pass: mobile services carousel, compact plans, nudge glow, laptop float ── */
@media (max-width:760px){
  .ring-wrap{height:auto;perspective:none;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);padding-bottom:12px;scrollbar-width:none;cursor:default;scroll-behavior:smooth}
  .ring-wrap::-webkit-scrollbar{display:none}
  .ring{position:static;transform:none!important;display:grid;grid-auto-flow:column;grid-auto-columns:82vw;gap:12px;width:auto;height:auto}
  .ring .svc{position:static;left:auto;top:auto;width:auto;min-height:380px;transform:none!important;opacity:1!important;scroll-snap-align:start;padding:18px}
  .ring-hint{display:none}
  .plans{grid-auto-columns:76vw}.plan{padding:18px;gap:12px;border-radius:20px}.plan h3{font-size:21px}.plan .for{display:none}.plan ul{font-size:13.5px;gap:6px;padding-top:12px}.plan ul li:nth-child(n+5){display:none}.plan .foot{padding-top:12px}.plan .price{font-size:12.5px}
  .proof{grid-auto-columns:78vw}
  .how-shot{padding:6px;border-radius:18px}
  .j-steps{scroll-snap-type:x proximity;scroll-behavior:smooth}.j-step{scroll-snap-align:center}
}
.ar-nudge{border:1px solid rgba(123,97,255,.75);box-shadow:0 22px 48px -26px rgba(16,16,20,.4),0 0 0 0 rgba(123,97,255,.45)}
.ar-nudge.on{animation:nudgeglow 2.2s ease-out infinite}
@keyframes nudgeglow{0%{box-shadow:0 22px 48px -26px rgba(16,16,20,.4),0 0 0 0 rgba(123,97,255,.45)}70%{box-shadow:0 22px 48px -26px rgba(16,16,20,.4),0 0 0 10px rgba(123,97,255,0)}100%{box-shadow:0 22px 48px -26px rgba(16,16,20,.4),0 0 0 0 rgba(123,97,255,0)}}
/* scene laptops on service pages: float, slow yaw, brand glow underneath */
.lp-demo-wrap{perspective:1600px}
.lp-demo-wrap .laptop{position:relative;isolation:isolate;animation:lapfloat 14s ease-in-out infinite;transform-style:preserve-3d}
.lp-demo-wrap .laptop::before{content:"";position:absolute;left:8%;right:8%;bottom:-26px;height:70px;border-radius:50%;background:radial-gradient(closest-side,rgba(242,90,28,.45),rgba(123,97,255,.25) 60%,transparent);filter:blur(22px);z-index:-1;animation:glowpulse 7s ease-in-out infinite}
@keyframes lapfloat{0%,100%{transform:rotateY(-5deg) rotateX(2deg) translateY(0) scale(1)}25%{transform:rotateY(2deg) rotateX(1deg) translateY(-6px) scale(1.015)}50%{transform:rotateY(5deg) rotateX(2deg) translateY(0) scale(1.03)}75%{transform:rotateY(1deg) rotateX(3deg) translateY(-5px) scale(1.015)}}
@keyframes glowpulse{50%{opacity:.6;transform:scaleX(1.08)}}
/* the how-it-works laptop sits in a glass card: a gentle tilt so it reads as a device on a desk */
.how-shot{perspective:1500px}
.how-shot .laptop{animation:lapsoft 16s ease-in-out infinite;transform-style:preserve-3d}
@keyframes lapsoft{0%,100%{transform:rotateY(-3deg) rotateX(2deg) translateY(0)}50%{transform:rotateY(3deg) rotateX(3deg) translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.how-shot .laptop{animation:none}}
@media (prefers-reduced-motion:reduce){.lp-demo-wrap .laptop,.lp-demo-wrap .laptop::before,.ar-nudge.on{animation:none}}

/* ─── Mobile: everything fits the page width, no horizontal rows ───────── */
@media (max-width:760px){
  .ring-wrap{overflow:visible;margin-inline:0;padding-inline:0;scroll-snap-type:none;padding-bottom:0}
  .ring{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row;grid-auto-columns:auto;gap:10px}
  .ring .svc{min-height:0;padding:14px;border-radius:16px;justify-content:flex-start;scroll-snap-align:none}
  .ring .svc .mini,.ring .svc .shot,.ring .svc .flow,.ring .svc .call,.ring .svc .pills,.ring .svc .art{display:none}
  .ring .svc h3{font-size:16px;margin-bottom:8px}.ring .svc ul{font-size:12.5px;gap:5px}.ring .svc ul li:nth-child(n+3){display:none}.ring .svc ul li::before{width:13px;height:13px;margin-top:2px}
  .ring .svc.grain{background:radial-gradient(120% 90% at 85% 10%,rgba(242,90,28,.62),transparent 55%),#101014}
  .svc-more{font-size:12.5px;margin-top:10px}
  .swipe-hint{display:none!important}
  .plans,.proof,.verts,.log-list{grid-auto-flow:row;grid-auto-columns:auto;overflow:visible;scroll-snap-type:none;margin-inline:0;padding-inline:0;padding-bottom:0}
  .plans{grid-template-columns:minmax(0,1fr);gap:10px}
  .plan{padding:16px 16px 14px;gap:10px}.plan ul li:nth-child(n+4){display:none}
  .proof{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .shotcard figure{aspect-ratio:4/3}.shotcard .cap{padding:10px 12px;gap:2px}.shotcard .cap b{font-size:13px;line-height:1.25}.shotcard .cap span{font-size:11.5px;line-height:1.35}
  .verts{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .vert{border-radius:16px}.vert .vphoto{aspect-ratio:4/3}.vert .k{margin:10px 12px 0;font-size:10px}.vert h3{font-size:14.5px;margin:4px 12px 0;line-height:1.2}.vert p{display:none}.vert .link{margin:8px 12px 12px;font-size:12.5px}
  .log-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .entry{padding:14px;border-radius:16px}.entry time{font-size:11px}.entry b{font-size:14px;line-height:1.25}.entry p{display:none}
  .who-foot{padding:14px;gap:12px}.who-foot .row img{width:34px;height:34px;margin-left:-8px}.who-foot .row img:first-child{margin-left:0}.who-foot .row{gap:0}.who-foot p{font-size:13.5px}
}

/* ─── Smoothness pass: longer, softer easing everywhere ─────────────────── */
:root{--ease-out:cubic-bezier(.22,1,.36,1)}
.js .rv{transform:translateY(18px);transition:opacity .95s var(--ease-out),transform .95s var(--ease-out)}
.lit{transition:transform .6s var(--ease-out),box-shadow .6s var(--ease-out),border-color .4s ease,background-color .4s ease}
.step summary .chev{transition:transform .5s var(--ease-out)}
.step .body{animation:stepin .55s var(--ease-out) both}
@keyframes stepin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.btn,.btn-solid,.btn-ghost{transition:transform .5s var(--ease-out),background-color .3s ease,color .3s ease,border-color .3s ease,box-shadow .5s var(--ease-out)}
.nav .bar{transition:padding .5s var(--ease-out),background-color .5s ease,box-shadow .5s ease}
.svc,.agent,.plan,.vert,.shotcard,.entry,.stat{backface-visibility:hidden;-webkit-font-smoothing:antialiased}
img{image-rendering:auto}
body{overscroll-behavior-y:none;-webkit-tap-highlight-color:transparent}
@media (max-width:760px){
  html{scroll-padding-top:84px}
  .js .rv{transform:translateY(12px);transition-duration:.7s}
  a,button,summary{touch-action:manipulation}
}
@media (prefers-reduced-motion:reduce){.step .body{animation:none}}

/* ─── Mobile: bigger tap targets and readable small type ────────────────── */
.tabs button{height:40px}
@media (max-width:760px){
  .ring .svc ul{font-size:13.5px;gap:6px}
  .svc-more{font-size:14px;margin-top:8px;padding-block:9px 7px;min-height:40px}
  .crumbs a{padding-block:10px;display:inline-block}
  .open-aria{display:inline-block;padding-block:10px}
  .lp-demo-wrap{overflow-x:clip}
}

/* ─── Scroll choreography (assets/scroll.js) ─────────────────────────────── */
/* word masks on headlines */
.js .split .sw{display:inline-block;overflow:hidden;vertical-align:top;padding:0 .04em .12em 0;margin:0 -.04em -.12em 0}
.js .split .sw>span{display:inline-block;transform:translateY(112%);transition:transform 1s var(--ease-out);transition-delay:var(--d,0ms);will-change:transform}
.js .on .sw>span,.js .split.on .sw>span{transform:none}
html,body{overflow-x:clip}
.js .split.rv{opacity:1;transform:none}
/* eyebrow dash draws in */
.js .rv .eyebrow::before{transform:scaleX(0);transform-origin:left center;transition:transform .9s var(--ease-out) .15s}
.js .rv.on .eyebrow::before{transform:none}
/* entrance variety */
.js .rv.rv-p{transform:translateY(30px) scale(.975);transition-duration:1.15s}
.js .rv.rv-s{transform:translateY(18px) scale(.94)}
.js .rv.rv-l{transform:translate3d(-32px,10px,0)}
.js .rv.rv-r{transform:translate3d(32px,10px,0)}
.js .rv.on{transform:none}
/* parallax layers */
.px{will-change:transform}
.vert .vphoto.px,.portrait img.px{transform:scale(1.12)}
.hero .hero-grid{will-change:transform,opacity}
/* quotes that light up as you read */
.js .ink-words .iw{opacity:.26;transition:opacity .45s ease}
.js .ink-words .iw.on{opacity:1}
@media (max-width:760px){.js .rv.rv-l{transform:translate3d(-18px,10px,0)}.js .rv.rv-r{transform:translate3d(18px,10px,0)}}
@media (prefers-reduced-motion:reduce){.js .split .sw>span{transform:none}.js .rv .eyebrow::before{transform:none}.js .ink-words .iw{opacity:1}.px{transform:none!important}}

/* ─── Plans: one footer layout for all three cards ───────────────────────── */
.plan .foot{flex-direction:column;align-items:stretch;gap:12px;padding-top:18px}
.plan .foot .price{order:0}
.plan .foot .btn{order:1;justify-content:center;width:100%;margin:0;line-height:1}
.plan.lead .foot .btn{margin-left:0}
.btn,.btn-solid,.btn-ghost{line-height:1}
.btn .arrow{line-height:1;position:relative;top:-.02em}

/* ─── Agent cards are links ───────────────────────────────────────────────── */
a.agent{color:inherit;text-decoration:none;transition:transform .5s var(--ease-out),border-color .3s,box-shadow .5s var(--ease-out)}
a.agent:hover{transform:translateY(-3px);border-color:var(--line-2)}
.agent .link{margin-top:auto;padding-top:8px;font-size:14px;font-weight:500;color:var(--ink);display:inline-flex;align-items:center;gap:6px}
.agent .link .arrow{transition:transform .35s var(--ease)}
a.agent:hover .link .arrow{transform:translateX(3px)}
@media (max-width:760px){.agent .link{font-size:12.5px;padding-top:4px}}

/* ─── Pause / play for the animated demos ───────────────────────────────── */
.demo-bar{display:flex;justify-content:flex-end;margin-top:10px}
.demo-pause,.j-pause{display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 14px 0 11px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);color:var(--ink);font:500 13px/1 var(--body);cursor:pointer;transition:background .25s,border-color .25s,transform .3s var(--ease-out)}
.demo-pause:hover,.j-pause:hover{border-color:var(--ink);transform:translateY(-1px)}
.demo-pause svg,.j-pause svg{width:12px;height:12px;fill:currentColor;display:block}
.j-pause svg[hidden],.demo-pause svg[hidden]{display:none}
.how-shot .demo-bar{margin:8px 4px 0}
.j-pause{grid-column:1/-1;justify-self:start;background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.22);color:#fff;margin-top:4px}
.j-pause:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.5)}
.journey.paused .j-step.on .bar::after,#steps.paused .step.auto .prog::after{animation-play-state:paused}
/* the site footer's `.foot a{display:block}` also matched the plan buttons: pin the plan footer */
.plans .plan .foot{flex-direction:column;align-items:stretch;gap:12px;padding-top:18px}
.plans .plan .foot a.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;padding:0 16px;margin:0;line-height:1}
.plans .plan .foot .price{display:block;padding:0}
/* ─── What we build: a static grid of the service cards, and the team strip ── */
.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.svc-grid .svc{cursor:pointer;min-height:380px}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.svc-grid{gap:12px}.svc-grid .svc{min-height:0;padding:18px}}
@media (max-width:600px){.svc-grid{grid-template-columns:1fr}.svc-grid .svc{padding:16px;justify-content:flex-start}}
.team-strip{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;margin-top:16px;padding:16px 22px;border:1px solid var(--line);border-radius:var(--r-l);background:var(--card)}
.team-strip b{font-weight:500;font-size:15px;flex:0 1 auto}
.team-strip .tp{display:flex;flex-wrap:wrap;gap:6px}
.team-strip .tp a{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);font-size:13px;font-weight:500;color:var(--ink-2);transition:border-color var(--fast),color var(--fast)}
.team-strip .tp a:hover{border-color:var(--ink);color:var(--ink)}
#services .who-foot{margin-top:16px}
/* a small status pill, shown when an email address is tapped and copied */
.nf-toast{position:fixed;left:50%;bottom:max(22px,env(safe-area-inset-bottom));transform:translate(-50%,16px);z-index:90;max-width:min(92vw,520px);padding:12px 18px;border-radius:999px;background:var(--ink);color:var(--paper);font:500 14px/1.3 var(--body);box-shadow:0 18px 40px -18px rgba(0,0,0,.5);opacity:0;pointer-events:none;text-align:center;overflow-wrap:anywhere;transition:opacity .3s,transform .4s var(--ease-out)}
.nf-toast.on{opacity:1;transform:translate(-50%,0)}
@media (max-width:760px){.nf-toast{bottom:88px}}

/* ─── Phone pass (Oct 2026): shorter, calmer, thumb-friendly ─── */
/* Phone-only show/hide pair: .m-hide disappears at 760px and below, .m-only appears there. */
.m-only{display:none}
@media (max-width:760px){
  .m-hide{display:none!important}
  .m-only{display:inline}

  /* rhythm: tighter section seams, one heading scale, faster reveals, quotes fully inked */
  section{padding-block:36px}
  .head{margin-bottom:16px;gap:8px}
  .head .lede{font-size:15px;line-height:1.45}
  h1{font-size:clamp(32px,8.8vw,36px);line-height:1.06;letter-spacing:-.022em}
  h2,.cta h2{font-size:clamp(25px,6.8vw,28px);line-height:1.1;letter-spacing:-.02em}
  .eyebrow,.lp-eyebrow{font-size:11px;line-height:1.45;letter-spacing:.07em;padding-left:28px;text-indent:-28px}
  .js .split .sw>span{transition-delay:0ms;transition-duration:.5s}
  .js .ink-words .iw{opacity:1}

  /* hero: eyebrow, headline, one line, the email capsule, then the demo */
  .hero{padding-block:8px 28px}
  .hero .avail,.hero .chips,.hero .faces{display:none}
  .hero .eyebrow{margin-bottom:10px}
  .hero h1{font-size:clamp(32px,9vw,38px);line-height:1.06}
  .hero h1 .nw{white-space:nowrap}
  .hero .lede-m{margin-top:10px;font-size:16px;line-height:1.45}
  .hero .demo{margin-top:16px}
  .hero-form{flex-wrap:nowrap;border-radius:999px;padding:4px 4px 4px 16px;gap:6px;margin-top:16px;max-width:none}
  .hero-form input{flex:1 1 0;width:0;min-width:0;height:44px;padding:0;font-size:16px}
  .hero-form .btn{width:auto;flex:none;height:44px;padding:0 14px;font-size:14px}

  /* hero demo: one-tap examples first, stacked fields, 16px inputs (no iOS zoom), live status shown */
  #demo{display:flex;flex-direction:column}
  #demo .demo-picks{order:-1;gap:6px;padding:10px}
  #demo .demo-picks button{height:36px;padding:0 11px;font-size:13px;position:relative}
  #demo .demo-picks button::after{content:"";position:absolute;inset:-4px}
  #demo .demo-setup{grid-template-columns:minmax(0,1fr);gap:6px;padding:10px}
  #demo .demo-setup input{height:44px;font-size:16px;padding:0 14px}
  #demo .demo-setup .btn{grid-column:auto;height:44px;width:100%;justify-content:center}
  #demo .chat{height:auto}
  #demo .log{flex:0 1 auto;min-height:96px;max-height:min(260px,46vh);padding:14px;gap:8px}
  #demo .chat-head{padding:10px 14px}
  #demo .compose{padding:10px}
  #demo .compose input{font-size:16px}
  #demo .demo-foot{flex-direction:column;align-items:flex-start;gap:4px;padding:8px 14px;font-size:12px;line-height:1.4}
  #demo .demo-foot #dStatus{display:block;order:-1;font-weight:500;color:var(--ink-2)}

  /* the problem: checklist at phone size (glass.css set it back to 17px), two-line stat captions */
  .bott .checks{padding:14px;gap:6px}
  .bott .checks div{font-size:15px;line-height:1.4;padding:10px 12px;gap:10px}
  .bott .checks i{width:20px;height:20px}
  .quote{font-size:18px;line-height:1.42;font-weight:400;letter-spacing:-.01em}
  .stats{gap:6px;margin-top:14px}
  .stat{padding:12px 10px 14px}
  .stat b{font-size:24px;margin-bottom:4px}
  .stat span{display:block;font-size:12px;line-height:1.35}

  /* what we build: compact text cards, decorative art off, quiet labels, a real tap target */
  .svc-grid{gap:10px}
  .svc-grid .svc{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;padding:16px 16px 12px;min-height:0;border-radius:18px}
  .svc-grid .svc>h3,.svc-grid .svc>ul{grid-column:1/-1}
  .svc-grid .svc .art,.svc-grid .svc .mini,.svc-grid .svc .call,.svc-grid .svc .shot,.svc-grid .svc .flow{display:none}
  .svc-grid .svc h3{font-size:18px;line-height:1.25;margin-bottom:8px}
  .svc-grid .svc ul{font-size:14.5px;line-height:1.4;gap:6px}
  .svc-grid .svc ul li::before{width:14px;height:14px;margin-top:3px}
  .svc-grid .svc>.pills{gap:4px 14px;margin-top:4px}
  .svc-grid .svc>.pills .pill{background:none!important;border:0!important;padding:0;border-radius:0;font-family:var(--mono);font-size:11px;font-weight:400;letter-spacing:.06em;text-transform:uppercase;opacity:.8}
  .svc-more{display:inline-block;border-bottom:0;padding:0;min-height:0;line-height:44px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;font-size:15px;margin-top:4px;justify-self:end;align-self:center}
  .team-strip{margin-top:10px;padding:12px 14px;gap:8px;flex-direction:column;align-items:stretch;border-radius:18px}
  .team-strip b{font-size:15px;line-height:1.3}
  .team-strip .tp{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:8px;margin-inline:-14px;padding-inline:14px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .team-strip .tp::-webkit-scrollbar{display:none}
  .team-strip .tp a{flex:0 0 auto;height:40px;padding:0 14px;font-size:14px}
  #services .who-foot{margin-top:10px}
  .who-foot{padding:14px;gap:10px;border-radius:18px}
  .who-foot p{font-size:14px;line-height:1.45;flex-basis:100%}
  .who-foot .btn{height:44px}

  /* journey: numbered tabs in one row above the phone, Pause at the end of the row */
  .journey.grain{padding:14px;gap:10px}
  .journey .j-steps{order:-2;display:flex;align-items:center;gap:6px;margin:0;padding:0;overflow:visible}
  .journey .j-step{flex:0 0 auto;display:grid;grid-template-columns:auto;place-items:center;width:44px;height:44px;padding:0 0 4px;border-radius:12px}
  .journey .j-step .n{display:block;grid-row:auto;font-size:12px}
  .journey .j-step.on .n{color:#fff}
  .journey .j-step b,.journey .j-step .d{display:none}
  .journey .j-step .bar{left:0;right:0;bottom:0;height:3px;border-radius:0}
  .journey .j-pause{margin:0 0 0 auto;height:44px;padding:0 16px 0 13px;font-size:14px}

  /* how it works: steps that keep their shape when a title wraps */
  .how{gap:14px}
  .steps{gap:8px}
  .step summary{font-size:17px;line-height:1.3;gap:12px;padding:16px}
  .step summary .n,.step summary .chev{flex:none}
  .step summary .n{font-size:11px;width:22px}
  .step summary .chev{width:28px;height:28px}
  .step .body{padding:0 16px 16px 50px}

  /* founder: round headshot framed on the face, text on the page edge, facts in one column */
  .about{gap:14px}
  .about .portrait{max-width:none;width:128px;aspect-ratio:1/1;border-radius:50%}
  .about .portrait img,.about .portrait img.px{transform:scale(1.45)!important;transform-origin:50% 18%}
  .about .bio{padding:0}
  .about .sig{margin-top:14px;font-size:14px;line-height:1.45}
  .about .facts{grid-template-columns:minmax(0,1fr);gap:0;margin-top:16px}
  .about .fact{padding:10px 0;font-size:14px;line-height:1.45}
  .about .fact b{display:inline;font-size:15px;margin-right:6px}

  /* faq: questions first, the "still have a question" card after them */
  .faq{gap:0}
  .faq>div:first-child{display:contents}
  .faq .qa{order:1;margin-top:20px}
  .faq .ask{order:2;margin-top:14px!important;padding:16px}
  .btn.open-aria{display:inline-flex;padding-block:0}
  .qa summary{font-size:15.5px;line-height:1.35;padding:12px 0;gap:12px}
  .qa summary .chev{width:24px;height:24px}
  .qa .body{font-size:15px;line-height:1.5;padding-bottom:14px}
  @supports ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){.faq .qa details{margin-bottom:6px;padding-inline:14px}}

  /* footer: one-line headline, full-width brand and contact rows, 36px link rows, no dangling separators */
  body footer.mega{padding-top:36px}
  footer.mega .mega-cta{font-size:clamp(28px,8.2vw,32px);line-height:1.1;padding-block:4px}
  footer.mega .mega-cta em{white-space:nowrap}
  footer.mega .mega-sub{margin:10px 0 24px;font-size:11px;letter-spacing:.06em;line-height:1.5}
  footer.mega .foot{grid-template-columns:1fr 1fr;gap:16px 14px}
  footer.mega .foot>div:first-child{grid-column:1/-1}
  footer.mega .foot>div:first-child p{max-width:none!important;margin-top:8px!important}
  footer.mega .foot>div:last-child{grid-column:1/-1}
  footer.mega .foot>div:last-child a{display:inline-block;margin-right:14px}
  footer.mega .foot>div:last-child div{display:inline-flex!important;margin-top:0!important}
  footer.mega .foot>div:last-child div a{display:inline-flex;align-items:center;min-width:44px;min-height:40px}
  footer.mega .foot b{margin-bottom:6px}
  footer.mega .foot a{padding-block:7px;line-height:22px;font-size:14px}
  footer.mega .foot>div:first-child p a{display:inline-block;padding-block:9px}
  footer.mega .foot-meta{margin-top:24px;gap:6px 12px;font-size:10.5px;letter-spacing:.06em}
  footer.mega .foot-meta .sep,footer.mega .foot-meta>span:last-child,footer.mega .foot-bottom>span:last-child{display:none}
  body footer.mega .foot-bottom{margin-top:10px;gap:4px 12px;font-family:var(--mono);font-size:11px;letter-spacing:.06em}
}
@media (max-width:760px) and (prefers-reduced-motion:no-preference){.js .rv{transform:translateY(8px);transition-duration:.5s}}
@media (max-width:340px){.journey .j-steps{gap:4px}.journey .j-step{width:40px}.journey .j-pause{padding:0 12px 0 10px}}
/* Phone pass, QA round 3: overflow, idle demo, card footers, founder, journey caption, proof, footer */
@media (max-width:760px){
  /* hero demo: before Start, no second (disabled) composer and no tall empty log */
  #demo .compose:has(#dInput:disabled){display:none}
  #demo .chat:has(#dInput:disabled) .log{min-height:0}

  /* what we build: one column per card, tags on their own row, "Learn more" on the left (away from the launcher) */
  .svc-grid .svc{grid-template-columns:minmax(0,1fr)}
  .svc-grid .svc>.pills{grid-column:1/-1}
  .svc-more{justify-self:start;line-height:40px;margin-top:2px}
  /* team strip: a non-wrapping column, so the chip scroller is as wide as the card and fades at its edge */
  .team-strip{flex-wrap:nowrap;min-width:0;overflow:hidden}
  .team-strip .tp{min-width:0}

  /* no one-word last lines in short copy */
  .head .lede,.who-foot p,.svc-grid .svc li,.step .body,.shotcard .cap span,.about .lede{text-wrap:pretty}

  /* journey: the active step's name as a one-line caption under the numbered tabs */
  .journey .j-steps{flex-wrap:wrap;row-gap:10px}
  .journey .j-steps::after{order:9;flex:1 0 100%;font:500 15px/1.3 var(--display);letter-spacing:-.01em;color:#fff;content:"A visitor lands"}
  .journey .j-steps:has(.j-step.on[data-j="1"])::after{content:"ARIA qualifies"}
  .journey .j-steps:has(.j-step.on[data-j="2"])::after{content:"Calendar checked, live"}
  .journey .j-steps:has(.j-step.on[data-j="3"])::after{content:"Booked. You're pinged."}

  /* founder: a small headshot beside the eyebrow and first heading lines, text wraps around it */
  .about{position:relative}
  .about .portrait{position:absolute;top:0;right:var(--gutter);width:72px;z-index:1}
  .about .bio::before{content:"";float:right;width:84px;height:76px}
  .about .facts{padding-right:56px}

  /* close: the #cta card already asks, so the footer skips its own headline on pages that have one */
  body:has(#cta) footer.mega .mega-cta,body:has(#cta) footer.mega .mega-sub{display:none}
  footer.mega .mega-sub{text-wrap:balance}
  /* footer links: 44px rows */
  footer.mega .foot a{padding-block:11px}
  footer.mega .foot>div:first-child p a{padding-block:11px}
  footer.mega .foot>div:last-child div a{min-height:44px}
}
@media (max-width:600px){
  /* proof: one readable screen at a time, swipe for the next */
  .proof{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 6px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
  .proof::-webkit-scrollbar{display:none}
  .proof .shotcard{flex:0 0 86%;scroll-snap-align:center}
  .proof .shotcard figure{aspect-ratio:16/10}
  .proof .shotcard .cap{padding:12px 14px;gap:2px}
  .proof .shotcard .cap b{font-size:15px}
  .proof .shotcard .cap span{font-size:13.5px;line-height:1.4}
}
@media (max-width:340px){.journey .j-steps::after{font-size:14px}}
/* touch screens keep :hover after a tap: no stuck lifts or stuck pointer light */
@media (hover:none){
  :root .lit:hover,:root .svc:hover,:root .vert:hover,:root a.agent:hover,:root .feature-card:hover,:root .btn:hover,:root .btn-solid:hover,:root .btn-ghost:hover,:root .demo-pause:hover,:root .j-pause:hover{transform:none}
  :root .lit::after{display:none}
}

/* ═══ Full-bleed pass (Oct 2026): the page fills the screen, color arrives as light ═══
   Brief: docs/design/FULL-BLEED.md. The column and the type grow with the viewport
   (--max/--gutter tokens at the top), sections get one idea per screen, the hero
   stands on a 3D gradient floor with product fragments at depths (scroll.js tilts
   the floor flat and drifts the fragments), a capability ticker runs under it,
   the big product visuals bleed past the text column (.panel-wide), reveals rise
   through a blur, the journey pins while its steps advance with scroll, every
   section headline carries one gradient word, and the close offers two options.
   Everything that moves is transform/opacity; the floor and fragments are the only
   will-change layers. Phones keep the lighter choreography of the phone pass. */
:root{--ease-rv:cubic-bezier(.2,.7,.2,1);--c-ok:#237A48;--c-sys:#5B45D6;--c-need:#D9470F;--c-cal:#1D63D1}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--c-ok:#7FC48B;--c-sys:#A596FF;--c-need:#FF8A5B;--c-cal:#7AB0FF}}
:root[data-theme="dark"]{--c-ok:#7FC48B;--c-sys:#A596FF;--c-need:#FF8A5B;--c-cal:#7AB0FF}

/* scale: fluid type and rhythm (phones keep the phone-pass sizes below 760px) */
@media (min-width:761px){
  body{font-size:clamp(17px,1.05vw,18px)}
  .hero h1{font-size:clamp(46px,6.4vw,132px);letter-spacing:-.035em;line-height:.98}
  h2{font-size:clamp(34px,3.8vw,68px);letter-spacing:-.03em;line-height:1.02}
  h3{font-size:clamp(20px,1.4vw,26px)}
  .lede{font-size:clamp(17px,1.25vw,22px);line-height:1.5}
  .eyebrow{font-size:13px}
  section{padding-block:clamp(88px,11vw,184px)}
  .head{margin-bottom:clamp(40px,5vw,80px);gap:clamp(24px,5vw,96px)}
  .head .lede{max-width:40ch}
  .svc{padding:clamp(22px,2vw,30px)}
  .svc-grid{gap:clamp(16px,1.4vw,22px)}
  .svc-grid .svc{min-height:clamp(380px,28vw,460px)}
  .svc ul{font-size:clamp(15px,1.05vw,16.5px)}
  .checks div{font-size:clamp(16px,1.15vw,18px)}
  .stat b{font-size:clamp(40px,3.2vw,56px)}
  .quote{font-size:clamp(22px,1.9vw,30px)}
  .qa summary{font-size:clamp(18px,1.3vw,21px);padding-block:20px}
  .qa .body{font-size:clamp(15.5px,1.05vw,17px)}
  .step summary{font-size:clamp(18px,1.3vw,21px)}
  .step .body{font-size:clamp(15px,1.05vw,16.5px)}
  .team-strip{padding:20px 26px}
  .j-step b{font-size:clamp(17px,1.2vw,19px)}
  .j-feed .ev b{font-size:clamp(15px,1.05vw,16.5px)}
}

/* one gradient word per headline (scroll.js reveals it as one masked unit) */
.hx{font-style:normal;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.02em}
.hero h1 .rot b{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;padding-right:.04em}

/* semantic pills: green = booked / done, violet = the system, orange = the human and the need, blue = calendar */
.pill.ok{background:color-mix(in srgb,var(--c-ok) 14%,transparent);border-color:color-mix(in srgb,var(--c-ok) 50%,transparent);color:var(--c-ok)}
.pill.sys{background:color-mix(in srgb,var(--c-sys) 14%,transparent);border-color:color-mix(in srgb,var(--c-sys) 50%,transparent);color:var(--c-sys)}
.pill.need{background:color-mix(in srgb,var(--c-need) 14%,transparent);border-color:color-mix(in srgb,var(--c-need) 50%,transparent);color:var(--c-need)}
.pill.cal{background:color-mix(in srgb,var(--c-cal) 14%,transparent);border-color:color-mix(in srgb,var(--c-cal) 50%,transparent);color:var(--c-cal)}
.svc.grain .pill{border-color:rgba(255,255,255,.3);color:#fff;background:rgba(255,255,255,.08)}
.svc.grain .pill.ok{background:rgba(46,158,91,.5);border-color:rgba(120,220,150,.6)}
.svc.grain .pill.sys{background:rgba(123,97,255,.5);border-color:rgba(190,175,255,.6)}
.svc.grain .pill.cal{background:rgba(59,130,246,.5);border-color:rgba(150,190,255,.6)}
.svc.grain h3,.svc.grain ul{position:relative;z-index:1;color:#fff}
.svc.grain .pills{position:relative;z-index:1}

/* .panel-wide: the big product visuals bleed past the text column at desktop */
@media (min-width:1000px){
  .panel-wide{--pw:min(96vw,calc(var(--max) + 2*var(--gutter)));width:var(--pw);max-width:none;margin-inline:calc(50% - var(--pw)/2)}
}

/* ── Hero: the stage ─────────────────────────────────────────────────────── */
.hero{padding-block:clamp(28px,3.5vw,56px) clamp(72px,8vw,150px)}
.hero-grid{align-items:end;gap:clamp(32px,5vw,96px)}
.hero-grid>div:last-child{padding-top:0;padding-bottom:.4em}
.hero .lede{max-width:44ch}
.hero .avail{margin-bottom:22px}
.hero .demo-stage{position:relative;max-width:min(100%,74vw);margin:clamp(72px,9vw,150px) auto 0}
.hero .demo{margin-top:0;position:relative;z-index:2}
@media (max-width:1100px){.hero .demo-stage{max-width:100%}}
@media (max-width:860px){.hero-grid>div:last-child{padding-bottom:0}}
/* the floor: a full-width gradient plane in perspective; --tilt goes 55deg → 0 as the hero leaves (scroll.js) */
.stage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1400px;perspective-origin:50% 28%}
.floor{position:absolute;left:1.5vw;right:1.5vw;bottom:-6%;height:150%;border-radius:28px;transform-origin:50% 100%;transform:rotateX(var(--tilt,55deg));will-change:transform;overflow:hidden;
  background:
    radial-gradient(56% 48% at 50% 64%,rgba(255,255,255,.55),transparent 70%),
    linear-gradient(112deg,#FFD0AE 0%,#EBC6E0 36%,#CFC5FF 66%,#BCD5FF 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 34%,#000 100%)}
.hero .glass-field{display:none}
/* fragments: our real product, at depths. .frag carries the parallax (custom properties set by scroll.js),
   .fi the idle float; --pf is the scroll factor (positive = nearer than the page, negative = behind it) */
.frags{position:absolute;inset:0;z-index:1;pointer-events:none}
.frag{position:absolute;--pf:.3;--pp:6px;--sy:calc(var(--scroll,0) * var(--pf) * -1px);will-change:transform;transform:translate3d(calc(var(--mx,0) * var(--pp)),calc(var(--my,0) * var(--pp) * .6 + var(--sy)),0)}
.js .frag:not([data-path]){animation:fragin 1s var(--ease-rv) both;animation-delay:calc(.55s + var(--i,0) * 90ms)}
.frag:nth-child(1){--i:0}.frag:nth-child(2){--i:1}.frag:nth-child(3){--i:2}.frag:nth-child(4){--i:3}.frag:nth-child(5){--i:4}.frag:nth-child(6){--i:5}.frag:nth-child(7){--i:6}.frag:nth-child(8){--i:7}
@keyframes fragin{from{opacity:0;scale:.86;filter:blur(6px)}to{opacity:1;scale:1;filter:none}}
.frag .fi{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:14px;font-weight:500;line-height:1.2;letter-spacing:-.005em;animation:fragfloat var(--fd,7s) ease-in-out infinite alternate;animation-delay:var(--fo,0s)}
.frag:nth-child(2n) .fi{--fd:8.5s;--fo:-3s}.frag:nth-child(3n) .fi{--fd:6.5s;--fo:-1.5s}
@keyframes fragfloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.frag.pill .fi{padding:10px 15px;border-radius:999px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -14px rgba(0,0,0,.6)}
.frag.need .fi{background:#FF6B2B}.frag.sys .fi{background:#7B61FF}.frag.ok .fi{background:#2E9E5B}.frag.cal .fi{background:#3B82F6}
.frag.bub .fi{padding:11px 15px;border-radius:16px 16px 16px 4px;background:var(--card);color:var(--ink);box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 18px 40px -18px rgba(0,0,0,.5)}
.frag.bub.need .fi{background:#FF6B2B;color:#fff}
.frag.chip .fi{padding:9px 13px;border-radius:12px;background:var(--card);color:var(--ink);font-size:13.5px;box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 18px 40px -18px rgba(0,0,0,.5)}
.frag.chip .fi i{width:8px;height:8px;border-radius:50%;background:#2E9E5B;flex:none}
.frag.chip.sys .fi{background:var(--card);color:var(--ink)}.frag.chip.sys .fi i{background:#7B61FF}
.frag.card .fi{display:grid;gap:3px;padding:12px 16px 12px 14px;border-radius:14px;background:var(--card);color:var(--ink);text-align:left;box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 22px 48px -20px rgba(0,0,0,.55);border-left:3px solid var(--c-need)}
.frag.card.cal .fi{border-left-color:#3B82F6}
.frag.card .fi b{font-weight:500;font-size:14px}.frag.card .fi>span{font-size:12.5px;color:var(--muted)}
.frag.deep{--pf:-.2;--pp:3px;opacity:.82}.frag.deep .fi{scale:.88;font-size:12.5px}
.frag.near{--pf:.6;--pp:10px}.frag.near .fi{scale:1.05}
.frag.mid{--pf:.38;--pp:7px}
.frag .cur2{position:absolute;left:calc(100% - 7px);top:calc(100% - 9px);width:20px;height:20px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3L5 20L9.6 16L13.2 22.6L15.8 21.3L12.2 14.8L18.5 14Z' fill='%23101014' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
@media (min-width:901px){
  .f1{left:-1%;top:-102px}
  .f2{left:17%;top:-56px}
  .f3{right:calc(-13vw + 10px);top:37%}
  .f4{right:0;top:-118px}
  .f5{left:calc(-13vw + 4px);top:64%}
  .f6{right:-13vw;top:66%}
  .f7{right:calc(-11vw + 4px);top:9%}
  .f8{left:calc(-12vw + 10px);top:15%}
}
@media (min-width:901px) and (max-width:1199px){.f5,.f6,.f7,.f8{display:none}.f3{right:calc(-10vw + 6px);top:30%}}
@media (max-width:900px){
  .hero .demo-stage{margin-top:118px}
  .stage{perspective:none}
  .floor{transform:none;left:0;right:0;bottom:-10%;height:92%;border-radius:0;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)}
  .frag{--pp:0px;--pf:0}.frag .fi{scale:1;font-size:13.5px}
  .f1{left:0;top:-100px}.f3{right:0;top:-100px}.f2{left:22%;top:-52px}
  .f4,.f5,.f6,.f7,.f8,.frag .cur2{display:none}
}
@media (max-width:420px){.f1{top:-104px}.f3{top:-104px}.f2{left:12%;top:-54px}}
@media (prefers-reduced-motion:reduce){.frag,.frag .fi{animation:none;transform:none;opacity:1}.floor{transform:rotateX(50deg)}}

/* (the capability ticker under the hero was removed in audit 3, rule 16: the hero hands straight to the next section) */

/* ── Reveals: rise through a blur, 70 ms stagger per child (motion.js) ─────── */
.js .rv{opacity:0;transform:translateY(48px);filter:blur(8px);transition:opacity .9s var(--ease-rv),transform .9s var(--ease-rv),filter .9s var(--ease-rv)}
.js .rv.rv-p{transform:translateY(120px) scale(.96);transition-duration:1.1s}
.js .rv.rv-s{transform:translateY(36px) scale(.94)}
.js .rv.rv-l{transform:translate3d(-40px,24px,0)}.js .rv.rv-r{transform:translate3d(40px,24px,0)}
.js .rv.on{opacity:1;transform:none;filter:none}
.js .split.rv{opacity:1;transform:none;filter:none}
@media (max-width:760px){.js .rv,.js .rv.rv-s,.js .rv.rv-l,.js .rv.rv-r{transform:translateY(22px);filter:none;transition-duration:.6s}.js .rv.rv-p{transform:translateY(40px) scale(.985);filter:none;transition-duration:.7s}}
@media (prefers-reduced-motion:reduce){.js .rv,.js .rv.rv-p,.js .rv.rv-s,.js .rv.rv-l,.js .rv.rv-r{opacity:1;transform:none;filter:none}}

/* ── Journey: pinned scroll-telling at desktop (section.pinned set by the page script) ── */
.js .pinned{padding-block:0;min-height:250vh}
.js .pinned .j-pin{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,4vh,56px);box-sizing:border-box}
.js .pinned .head{margin-bottom:clamp(20px,3vh,40px)}
.js .pinned .j-pause{display:none}
.js .pinned .j-step{cursor:default}
.js .pinned .j-step.on .bar::after{animation:none;transform:scaleX(var(--jp,0));transition:transform .12s linear}
.js .pinned .journey{align-items:center}
@media (max-height:860px){.js .pinned .j-phone{height:516px;align-items:flex-start}.js .pinned .j-phone .dev-phone{transform:scale(.86);transform-origin:top center}.js .pinned .journey{padding-block:28px}.js .pinned .head h2{font-size:clamp(34px,3.2vw,52px)}}
@media (max-height:760px){.js .pinned .j-phone{height:450px}.js .pinned .j-phone .dev-phone{transform:scale(.75)}.js .pinned .head{display:none}}

/* ── The close: two options ──────────────────────────────────────────────── */
.cta{min-height:0;padding:clamp(40px,6vw,96px)}
.cta h2{max-width:16ch}
.cta .lede{max-width:48ch}
.cta-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:clamp(28px,3vw,44px);max-width:960px}
.cta .opt{position:relative;display:grid;gap:6px;padding:clamp(20px,2.2vw,30px);padding-right:84px;border-radius:20px;background:rgba(255,255,255,.08);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 .5px rgba(255,255,255,.14);color:#fff;transition:background .3s,transform .5s var(--ease-out)}
.cta .opt:hover{background:rgba(255,255,255,.14);transform:translateY(-3px)}
.cta .opt .k{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.cta .opt b{font-family:var(--display);font-weight:500;font-size:clamp(20px,1.6vw,27px);letter-spacing:-.015em;line-height:1.15}
.cta .opt .d{font-size:15px;line-height:1.45;color:rgba(255,255,255,.78);text-wrap:pretty}
.cta .opt .arrow{position:absolute;right:22px;top:50%;translate:0 -50%;width:42px;height:42px;border-radius:50%;background:#fff;color:#101014;display:inline-flex;align-items:center;justify-content:center;font-size:18px;transition:transform .35s var(--ease-out)}
.cta .opt:hover .arrow{transform:translateX(3px)}
@media (max-width:640px){.cta-opts{grid-template-columns:1fr;gap:10px}.cta .opt{padding:18px 70px 18px 18px;border-radius:16px}.cta .opt .arrow{right:16px}}
@media (max-width:760px){.cta{padding:28px 20px}}

/* ═══ CRM homepage (Oct 2026): the product leads. The product's own colors appear only inside
   product panels (app blue #2150E8, agent purple #6B5BFF, navy #0F1230, ground #F6F7FB);
   the site keeps the orange→violet identity around them. ═══ */
:root{--app-blue:#2150E8;--app-purple:#6B5BFF;--app-navy:#0F1230;--app-ground:#F6F7FB;--app-ink:#0F1230;--app-mute:#5B6075;--app-line:#E1E4F0}
/* hero: centred statement, the Today screen on the stage */
.hero-c{text-align:center;display:grid;justify-items:center}
.hero-c .eyebrow{margin-bottom:clamp(16px,2vw,26px)}
.hero-c .eyebrow::before{display:none}
.hero-c .eyebrow .prod{color:var(--ink);font-weight:500}
.hero-c h1{max-width:21ch;font-size:clamp(42px,5.6vw,104px);text-wrap:balance}
.hero-c .lede{max-width:60ch;margin:clamp(16px,1.6vw,24px) auto 0;font-size:clamp(17px,1.3vw,22px);text-wrap:pretty}
.hero-ctas{display:flex;gap:10px;margin-top:clamp(20px,2.2vw,30px);flex-wrap:wrap;justify-content:center}
.hero-ctas .btn.o{background:var(--card)}
@media (max-width:760px){.hero-c h1{font-size:clamp(32px,9vw,40px)}.hero-c .lede{font-size:16px;margin-top:14px}.hero-c .eyebrow{padding-left:0;text-indent:0;white-space:nowrap;font-size:10.5px}.hero-c .lede-m{max-width:30ch}.shot-stage .frag .fi{max-width:calc(100vw - 40px);white-space:normal}.hero-ctas{margin-top:18px;width:100%}.hero-ctas .btn{flex:1 1 0;justify-content:center;height:46px;padding:0 14px;font-size:14px}}
.shot-stage{max-width:min(100%,70vw);margin-top:clamp(56px,6vw,96px);perspective:1800px}
.shot-wrap{position:relative;z-index:2}
.shot-panel{border-radius:clamp(14px,1.4vw,22px);overflow:hidden;background:var(--app-ground);transform:rotateX(var(--ptilt,9deg));transform-origin:50% 100%;will-change:transform;box-shadow:0 0 0 1px rgba(255,255,255,.16),0 70px 140px -50px rgba(0,0,0,.8),0 36px 70px -36px rgba(33,80,232,.4)}
.shot-panel img{display:block;width:100%;height:auto}
.shot-stage .frags{z-index:3}
.crm-hero .floor{bottom:-12%;height:160%}
@media (max-width:900px){.shot-stage{margin-top:120px}.shot-panel{border-radius:12px}}
/* fragments: product moments (white app cards, the SMS bubble, the Nexus pill) */
.frag.app .fi,.frag.sms .fi{display:grid;gap:8px;white-space:normal;text-align:left;font-weight:400;line-height:1.35;font-size:12.5px;letter-spacing:0}
.frag.app .fi{width:272px;padding:12px 14px;border-radius:14px;background:#fff;color:var(--app-ink);box-shadow:0 0 0 1px rgba(15,18,48,.08),0 24px 50px -22px rgba(0,0,0,.55)}
.frag.app.nx .fi{width:300px}
.frag .ah{display:flex;align-items:center;gap:8px;font-weight:600;font-size:12.5px;color:var(--app-ink)}
.ag{display:inline-flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:6px;background:var(--app-purple);color:#fff;font:600 9.5px/1 var(--mono);letter-spacing:.02em}
.ag.nxa{background:var(--app-navy)}
.av{display:inline-flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;border-radius:50%;background:#E3F3EE;color:#1E7A46;font:600 9.5px/1 var(--mono)}
.frag .ab{background:var(--app-blue);color:#fff;padding:9px 11px;border-radius:12px 12px 12px 3px;font-size:12.5px}
.why{display:flex;flex-wrap:wrap;gap:5px}
.why i{font-style:normal;font-size:10.5px;padding:3px 7px;border-radius:999px;background:#EEF0F6;color:var(--app-mute);border:1px solid var(--app-line)}
.ar{display:flex;gap:6px;flex-wrap:wrap}
.ar b{font-weight:500;padding:6px 11px;border-radius:8px;border:1px solid var(--app-line);font-size:12px;color:var(--app-ink);background:#fff}
.ar b.ok-b{background:var(--app-blue);color:#fff;border-color:var(--app-blue)}
.frag .st{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:10px;background:var(--app-ground);font-size:12px}
.frag .st em{margin-left:auto;font-style:normal;font-size:10px;font-weight:600;padding:3px 7px;border-radius:999px;background:#EEF0FF;color:var(--app-blue);white-space:nowrap}
.frag .st em.auto{background:#E6F6EC;color:#1E7A46}
.frag .am{color:var(--app-mute)}
.frag .drop{border:1.5px dashed var(--app-blue);color:var(--app-blue);text-align:center;padding:7px;border-radius:10px;font-weight:600;font-size:12px}
.frag.sms .fi{width:246px;padding:11px 13px;border-radius:16px 16px 16px 4px;background:#EEF0F4;color:#1A1A2E;gap:4px;box-shadow:0 0 0 1px rgba(15,18,48,.06),0 24px 50px -22px rgba(0,0,0,.5)}
.frag .sh{font-size:11px;color:#6B7080}.frag .sr{font-weight:600;color:var(--app-ink);margin-top:2px}
.frag.nxp .fi{background:var(--app-navy);color:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 18px 40px -16px rgba(0,0,0,.6)}
.mic{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--app-purple);box-shadow:0 0 0 3px rgba(107,91,255,.3);flex:none}
/* (the earlier .f1–.f8 slots set the other side; each slot here pins one side and frees the other) */
@media (min-width:901px){
  .shot-stage .f1{left:calc(-13vw + 18px);right:auto;top:9%}
  .shot-stage .f2{right:0;left:auto;top:-66px}
  .shot-stage .f3{right:calc(-13vw + 20px);left:auto;top:28%}
  .shot-stage .f4{left:calc(-12vw + 6px);right:auto;top:52%}
  .shot-stage .f5{right:calc(-12vw - 6px);left:auto;top:74%}
  .shot-stage .f6{left:1%;right:auto;top:-62px}
}
@media (min-width:901px) and (max-width:1199px){.shot-stage .f1,.shot-stage .f4{left:-8vw}.shot-stage .f3,.shot-stage .f5{right:-8vw}.shot-stage .f4{top:56%}}
@media (max-width:900px){.shot-stage .f2{right:0;left:auto;top:-58px}.shot-stage .f6{display:block;left:0;right:auto;top:-112px}.shot-stage .f1,.shot-stage .f3,.shot-stage .f4,.shot-stage .f5{display:none}
  /* phones: the floor is a quiet wash behind the panel, not behind the headline */
  .crm-hero .floor{opacity:.55;height:78%;bottom:-8%;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 45%,#000 100%)}}
/* three cards (what an agent is), crew cards, control cards: glass cards with room */
.three,.agent-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.4vw,22px)}
.tcard,.acard,.ccard{position:relative;display:grid;gap:12px;align-content:start;padding:clamp(22px,2.2vw,32px);border-radius:24px;background:var(--card);border:1px solid var(--line);min-width:0}
.tcard .n{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.08em}
.tcard h3,.acard h3,.ccard h3{font-size:clamp(20px,1.5vw,26px);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.tcard p,.acard p,.ccard p{font-size:clamp(15px,1.05vw,16.5px);line-height:1.5;color:var(--ink-2);text-wrap:pretty}
.mini-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.why.big{margin-top:4px}.why.big i{font-size:12px;padding:5px 9px;background:var(--surface);color:var(--ink-2);border-color:var(--line-2)}
.ar.big{margin-top:4px}.ar.big b{padding:9px 16px;border-radius:10px;font-size:13.5px}
.acard .ag{width:38px;height:38px;border-radius:11px;font-size:12px;margin-bottom:2px}
.acard .stat{font-family:var(--mono);font-size:12px;line-height:1.5;letter-spacing:.02em;color:var(--muted);border-top:1px solid var(--line);padding-top:12px;margin-top:6px}
.addons{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;margin-top:clamp(18px,2vw,28px);font-size:14px;color:var(--ink-2)}
.addons b{font-weight:500;color:var(--ink);margin-right:4px}
.addons small{flex:1 1 100%;font-size:13px;color:var(--muted);margin-top:4px}
@media (max-width:1000px){.three,.agent-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.three,.agent-cards{grid-template-columns:minmax(0,1fr);gap:10px}.tcard,.acard,.ccard{padding:18px;border-radius:18px;gap:8px}}
/* Nexus: the command agent, a wide navy product panel */
.nexus{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,3vw,56px);padding:clamp(22px,3vw,48px);border-radius:28px;background:var(--app-navy);color:#fff;position:relative;overflow:hidden;box-shadow:0 60px 120px -60px rgba(107,91,255,.55),0 0 0 .5px rgba(255,255,255,.12)}
.nexus::before{content:"";position:absolute;inset:-40% -20% auto auto;width:70%;height:120%;background:radial-gradient(closest-side,rgba(107,91,255,.35),transparent 70%);pointer-events:none}
.nexus>*{position:relative;z-index:1}
.nx-left{display:grid;gap:14px;align-content:start}
.nx-say{justify-self:end;max-width:30em;background:var(--app-blue);color:#fff;padding:14px 18px;border-radius:18px 18px 4px 18px;font-size:clamp(15px,1.1vw,18px);line-height:1.4;display:grid;gap:6px}
.nx-say small{font-size:12px;color:rgba(255,255,255,.75)}
.nx-intro{font-size:clamp(15px,1.05vw,17px);color:rgba(255,255,255,.85)}.nx-intro b{color:#fff;font-weight:600}
.nx-plan{display:grid;gap:8px}
.nx-plan .st{display:grid;grid-template-columns:28px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 14px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nx-plan .st .ag{width:28px;height:28px;border-radius:8px;font-size:10px}
.nx-plan .st b{display:block;font-size:12px;font-weight:500;color:rgba(255,255,255,.65)}
.nx-plan .st span{font-size:clamp(14px,1vw,15.5px);line-height:1.35}
.nx-plan .st em{font-style:normal;font-size:11px;font-weight:600;padding:5px 9px;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;white-space:nowrap}
.nx-plan .st em.auto{background:rgba(46,158,91,.3);color:#9BE7B3}
.nx-plan .st em.tell{background:rgba(33,80,232,.35);color:#BFD0FF}
.nexus .ar.big b{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff}
.nexus .ar.big b.ok-b{background:var(--app-blue);border-color:var(--app-blue)}
.nx-right{display:grid;gap:18px;align-content:center}
.nx-right>p{font-size:clamp(15px,1.05vw,17px);line-height:1.5;color:rgba(255,255,255,.78);text-wrap:pretty}
.nx-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.nx-stats div{padding:14px;border-radius:14px;background:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.nx-stats b{display:block;font-family:var(--display);font-weight:300;font-size:clamp(28px,2.4vw,40px);letter-spacing:-.03em;line-height:1}
.nx-stats span{font-size:12.5px;color:rgba(255,255,255,.65);line-height:1.3;display:block;margin-top:6px}
.nx-ask{display:inline-flex;align-items:center;gap:10px;justify-self:start;padding:12px 16px 12px 14px;border-radius:999px;background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 18px 40px -16px rgba(0,0,0,.6);font-size:15px}
.nx-ask b{font-weight:600}.nx-ask span{font-size:12px;padding:4px 8px;border-radius:6px;border:1px solid rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
.nx-chips{display:flex;flex-wrap:wrap;gap:6px}
.nx-chips span{font-size:12.5px;padding:7px 11px;border-radius:999px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);border:1px solid rgba(255,255,255,.12)}
@media (max-width:900px){.nexus{grid-template-columns:minmax(0,1fr);padding:20px;border-radius:20px}.nx-say{justify-self:stretch;max-width:none}.nx-plan .st{grid-template-columns:24px minmax(0,1fr);gap:8px 10px}.nx-plan .st em{grid-column:2;justify-self:start}.nx-stats{gap:8px}.nx-stats div{padding:12px}}
/* the product tour: four real screens; pinned at desktop (scroll.js), tappable steps elsewhere */
.tour{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(20px,3vw,44px);align-items:center;padding:clamp(20px,2.6vw,40px);border-radius:28px;color:#fff;position:relative;overflow:hidden}
.tour::after{z-index:0}.tour>*{position:relative;z-index:1}
.tour .j-steps{display:grid;gap:10px;align-content:center}
.tour .j-step{align-items:start;padding:14px 16px 18px;grid-template-columns:36px minmax(0,1fr)}
.tour .j-step .d{font-size:clamp(13.5px,.95vw,15px);line-height:1.45;max-height:0;overflow:hidden;opacity:0;transition:max-height .6s var(--ease-rv),opacity .4s}
.tour .j-step.on .d{max-height:12em;opacity:1}
.tour-screens{position:relative;aspect-ratio:1.4;border-radius:16px;overflow:hidden;background:var(--app-ground);box-shadow:0 40px 80px -40px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.tour-screens .ts{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transform:translate3d(48px,0,0) scale(1.02);transition:opacity .55s var(--ease-rv),transform .8s var(--ease-rv);will-change:transform,opacity}
[data-step="0"] .ts0,[data-step="1"] .ts1,[data-step="2"] .ts2,[data-step="3"] .ts3{opacity:1;transform:none;z-index:1}
.tcap{display:none;grid-column:1/-1;font-size:14px;line-height:1.45;color:rgba(255,255,255,.85);margin:0}
@media (max-width:900px){
  .tour{grid-template-columns:minmax(0,1fr);padding:14px;gap:12px;border-radius:20px}
  .tour .j-steps{display:flex;gap:6px;align-content:start}
  .tour .j-step{flex:0 0 auto;display:grid;grid-template-columns:auto;place-items:center;width:44px;height:44px;padding:0 0 4px;border-radius:12px;transform:none!important}
  .tour .j-step .n{grid-row:auto;font-size:12px}.tour .j-step.on .n{color:#fff}
  .tour .j-step b,.tour .j-step .d{display:none}
  .tour .j-step .bar{height:3px}
  .tour-screens{border-radius:12px}
  [data-step="0"] .tcap[data-for="0"],[data-step="1"] .tcap[data-for="1"],[data-step="2"] .tcap[data-for="2"],[data-step="3"] .tcap[data-for="3"]{display:block}
}
/* you're always in control: six cards and the phone */
.ctrl{display:grid;grid-template-columns:minmax(0,8fr) minmax(300px,4fr);gap:clamp(24px,4vw,64px);align-items:center}
.ctrl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.2vw,18px)}
.ccard{padding:clamp(18px,1.8vw,26px);border-radius:20px;gap:8px}
.ccard h3{font-size:clamp(18px,1.25vw,21px)}
.ccard p{font-size:clamp(14.5px,1vw,15.5px)}
.ladder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:6px}
.ladder span{font-size:11px;font-weight:500;text-align:center;padding:7px 4px;border-radius:8px;background:var(--surface);color:var(--muted);border:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ladder span.on{background:var(--app-purple);color:#fff;border-color:var(--app-purple)}
.ctrl-phone{display:grid;gap:14px;justify-items:center}
.ctrl-phone .ph-img{position:absolute;inset:46px 0 0;width:100%;height:calc(100% - 46px);object-fit:cover;object-position:top;z-index:1}
.ctrl-phone .ph-cap{font-size:14px;line-height:1.45;color:var(--muted);text-align:center;max-width:32ch;text-wrap:pretty}
.trust{display:flex;align-items:center;gap:14px;margin-top:clamp(20px,2.4vw,36px);padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:var(--card);font-size:clamp(15px,1.05vw,16.5px);color:var(--ink-2)}
.trust i{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px color-mix(in srgb,var(--ok) 20%,transparent)}
@media (max-width:1000px){.ctrl{grid-template-columns:minmax(0,1fr)}.ctrl-phone{order:-1}}
@media (max-width:640px){.ctrl-list{grid-template-columns:minmax(0,1fr)}.ctrl-phone{display:none}.trust{align-items:flex-start;font-size:14.5px;padding:14px 16px}.trust i{margin-top:5px}}
/* who it's for: a row of trades */
.who-chips{display:flex;flex-wrap:wrap;gap:10px}
.who-chips span{display:inline-flex;align-items:center;height:48px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font-size:clamp(15px,1.1vw,18px);font-weight:500}
.who-chips .more{border-style:dashed;color:var(--muted);font-weight:400}
@media (max-width:760px){.who-chips{gap:8px}.who-chips span{height:42px;padding:0 14px;font-size:14.5px}}
/* (early access pricing was removed in pass 2: no prices on the site) */

/* ═══ Milestone 3 (Oct 2026): the research findings hold on the Reflex homepage ═══
   (a) phones are short: one thing per section, long ledes swap for a one-line .m-only twin,
       the crew, the control cards, the three "what an agent is" cards and the pricing rows are
       swipeable rows (scroll-snap, hidden scrollbar); (b) 44px targets; (c) smoothness: the
       section washes neither animate nor hold a compositor layer, and the hero fragments, the
       ticker and the footer ping pause while their section is off screen (motion.js sets .vis);
       (e) two heading sizes only; (f) tighter desktop rhythm so sections hand off. */
.lede.m-only{display:none}
@media (min-width:761px){
  section{padding-block:clamp(72px,8.5vw,140px)}
  .hero{padding-block:clamp(28px,3.5vw,56px) clamp(56px,6.5vw,116px)}
  .head{margin-bottom:clamp(36px,4.5vw,72px)}
}
@media (max-height:860px){.js .pinned .head h2{font-size:clamp(34px,3.8vw,68px)}}
/* washes: a plain gradient, no filter, no animation, no layer of its own */
.wash-o .glass-field i,.wash-v .glass-field i{animation:none;will-change:auto;transform:none}
/* off-screen sections rest (motion.js toggles .vis on sections, the ticker and the footer) */
.js .hero:not(.vis) .frag .fi,.js footer:not(.vis) .ping::after{animation-play-state:paused}
.hero .hero-c{will-change:transform,opacity}
.who-chips span{min-height:44px}
@media (max-width:760px){
  .lede.m-only{display:block}
  .head .lede.m-only{max-width:34ch}
  /* swipe rows */
  .three,.agent-cards,.ctrl-list{display:flex;flex-wrap:nowrap;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:4px var(--gutter) 12px;scroll-padding-inline:var(--gutter);scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .three::-webkit-scrollbar,.agent-cards::-webkit-scrollbar,.ctrl-list::-webkit-scrollbar{display:none}
  .tcard,.acard,.ccard{flex:0 0 min(82vw,320px);scroll-snap-align:start;padding:18px;border-radius:18px;gap:8px}
  .tcard p,.acard p,.ccard p{font-size:14.5px;line-height:1.45}
  .acard .stat{font-size:11.5px;padding-top:10px;margin-top:2px}
  .ccard h3{font-size:17px}
  .addons{margin-top:12px;gap:6px 8px;font-size:13.5px}.addons .pill{white-space:nowrap}.addons small{font-size:12px;line-height:1.4}
  /* Nexus panel: the plan and the stats; the explainer and the sample questions are desktop air */
  .nx-right>p,.nx-chips{display:none}
  .nexus{gap:16px}.nx-right{gap:12px}
  .nx-stats b{font-size:24px}.nx-stats span{font-size:11.5px}
  .who-chips span{height:44px}
  .trust{margin-top:14px}
  .ctrl-phone{display:none}
  .cta .lede{margin-top:10px}.cta-opts{margin-top:18px}
}

/* ═══ Pass 2 (Oct 2026, founder audits 1 + 2): the nav, the headline, a calmer hero floor, section
   stages that alternate with solid white reading sections, side fragments with parallax, the crew fan,
   the Nexus fly-in, the tour's mock moments, softer reveals. New classes only; nothing renamed. ═══ */
:root{--ease-rv2:cubic-bezier(.22,.61,.25,1)}

/* ── Nav: Product · Features · Technology · Services · Resources ▾ · CTA ─────────────────── */
.nav-links{gap:22px}
.nav-links a{white-space:nowrap}
.nav-menu{position:relative}
.nav-menu summary{list-style:none;display:inline-flex;align-items:center;gap:6px;padding:6px 0;cursor:pointer;color:var(--ink-2);transition:color var(--fast);white-space:nowrap;border-radius:4px}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary:hover,.nav-menu[open] summary{color:var(--ink)}
.nav-menu summary svg{width:11px;height:11px;transition:transform .35s var(--ease-out)}
.nav-menu[open] summary svg{transform:rotate(180deg)}
.nav-pop{position:absolute;top:calc(100% + 14px);left:50%;translate:-50% 0;min-width:176px;padding:6px;border-radius:16px;display:grid;gap:2px;background:var(--card);border:1px solid var(--line);box-shadow:inset 0 1px 0 var(--lg-spec,rgba(255,255,255,.6)),0 0 0 .5px var(--lg-edge,rgba(16,16,20,.12)),0 24px 48px -22px rgba(16,16,20,.4);animation:popin .35s var(--ease-rv2) both;z-index:5}
.nav-pop::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-pop a{display:block;padding:9px 12px;border-radius:10px;font-size:14.5px;color:var(--ink-2);transition:background .2s,color .2s}
.nav-pop a:hover{background:var(--surface);color:var(--ink)}
@keyframes popin{from{opacity:0;translate:-50% -6px}to{opacity:1;translate:-50% 0}}
.drawer-k{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:18px 0 6px}
@media (max-width:900px){.drawer a.sub{font-size:20px;padding:10px 0 10px 18px}}
@media (max-width:1040px) and (min-width:901px){.nav-links{gap:16px;font-size:14px}}

/* ── Headline: the name and "while you sleep" on the gradient, CRM highlighted ────────── */
.hero-c h1{max-width:19ch;font-size:clamp(40px,5.4vw,100px)}
.hero-c h1 .hl{font-weight:500;color:inherit;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--accent) 26%,transparent) 58%,color-mix(in srgb,#7B61FF 22%,transparent) 100%) no-repeat;padding:0 .04em;border-radius:.06em}
:root[data-theme="dark"] .hero-c h1 .hl{background-image:linear-gradient(transparent 58%,rgba(255,122,69,.34) 58%,rgba(140,118,255,.32) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-c h1 .hl{background-image:linear-gradient(transparent 58%,rgba(255,122,69,.34) 58%,rgba(140,118,255,.32) 100%)}}
.hero-c .lede{max-width:48ch}
@media (min-width:761px){.hero-c h1 .nw{white-space:nowrap}}
@media (max-width:760px){.hero-c h1{font-size:clamp(34px,9.6vw,40px);max-width:none}}
@media (max-width:400px){.hero-c h1 .nw{white-space:nowrap}}

/* ── Hero floor: no grid; a slow light sweep, a soft pulse under the panel, two drifting bands ─ */
.floor .sweep{position:absolute;left:-30%;top:-10%;width:40%;height:120%;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.22) 48%,rgba(255,255,255,.0) 100%);transform:translateX(-60%) skewX(-16deg);animation:floorsweep 16s ease-in-out infinite;will-change:transform}
.floor .pulse{position:absolute;left:50%;top:58%;width:70%;height:60%;translate:-50% -50%;border-radius:50%;background:radial-gradient(closest-side,rgba(255,255,255,.26),rgba(255,255,255,0) 100%);animation:floorpulse 7s ease-in-out infinite;will-change:transform,opacity}
:root[data-theme="dark"] .floor .sweep{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.12) 48%,transparent 100%)}
:root[data-theme="dark"] .floor .pulse{background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .floor .sweep{background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.12) 48%,transparent 100%)}:root:not([data-theme="light"]) .floor .pulse{background:radial-gradient(closest-side,rgba(255,255,255,.16),rgba(255,255,255,0) 100%)}}
@keyframes floorsweep{0%{transform:translateX(-60%) skewX(-16deg)}100%{transform:translateX(420%) skewX(-16deg)}}
@keyframes floorpulse{0%,100%{transform:scale(.9);opacity:.6}50%{transform:scale(1.08);opacity:1}}
/* light bands: long diagonal strips of colour drifting at different speeds (hero and the stages) */
.lband{position:absolute;left:-25vw;width:150vw;height:clamp(90px,10vw,200px);top:34%;pointer-events:none;will-change:transform;
  background:linear-gradient(90deg,transparent 8%,rgba(255,107,43,.11) 38%,rgba(123,97,255,.11) 62%,transparent 92%);transform:rotate(-14deg);animation:bandA 30s ease-in-out infinite alternate}
.lband.b2{top:66%;height:clamp(60px,7vw,140px);background:linear-gradient(90deg,transparent 8%,rgba(123,97,255,.10) 36%,rgba(59,130,246,.09) 64%,transparent 92%);animation:bandB 38s ease-in-out infinite alternate}
.hero .lband{top:48%;mix-blend-mode:screen;opacity:.9}.hero .lband.b2{top:72%}
@keyframes bandA{from{transform:rotate(-14deg) translate3d(-7vw,0,0)}to{transform:rotate(-14deg) translate3d(7vw,0,0)}}
@keyframes bandB{from{transform:rotate(-14deg) translate3d(6vw,0,0)}to{transform:rotate(-14deg) translate3d(-6vw,0,0)}}
/* the hero Today screen is cropped to the moment: the greeting, the live crew row, the numbers */
.shot-panel.crop{aspect-ratio:2.15;position:relative}
.shot-panel.crop img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:0 0}
@media (max-width:900px){.shot-panel.crop{aspect-ratio:1.3}.shot-panel.crop img{width:170%;max-width:none;left:-17%;object-position:0 0}}

/* ── Section stages (alternating with .plain reading sections) ───────────────────────── */
.stage-sec{overflow:visible}
.sstage{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1400px;perspective-origin:50% 18%}
.sfloor{position:absolute;left:-2vw;right:-2vw;top:clamp(140px,22%,320px);bottom:-2%;border-radius:48px 48px 0 0;
  background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.5),transparent 70%),linear-gradient(112deg,#FFD9BE 0%,#F0D4E6 38%,#D9D2FF 68%,#CFE0FF 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 82%,transparent 100%)}
.wash-v .sfloor{background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.5),transparent 70%),linear-gradient(248deg,#FFD9BE 0%,#F0D4E6 38%,#D9D2FF 68%,#CFE0FF 100%)}
.sfloor.deep{opacity:.92}
.sfloor.tilt{top:auto;height:115%;bottom:-18%;transform:rotateX(52deg);transform-origin:50% 100%;border-radius:40px;left:1.5vw;right:1.5vw;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 30%,#000 100%)}
:root[data-theme="dark"] .sfloor{background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.10),transparent 70%),linear-gradient(112deg,rgba(201,74,28,.42) 0%,rgba(142,63,114,.36) 38%,rgba(86,68,200,.36) 68%,rgba(58,95,198,.34) 100%)}
:root[data-theme="dark"] .wash-v .sfloor{background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.10),transparent 70%),linear-gradient(248deg,rgba(201,74,28,.40) 0%,rgba(142,63,114,.36) 38%,rgba(86,68,200,.38) 68%,rgba(58,95,198,.34) 100%)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .sfloor{background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.10),transparent 70%),linear-gradient(112deg,rgba(201,74,28,.42) 0%,rgba(142,63,114,.36) 38%,rgba(86,68,200,.36) 68%,rgba(58,95,198,.34) 100%)}
  :root:not([data-theme="light"]) .wash-v .sfloor{background:radial-gradient(60% 50% at 50% 60%,rgba(255,255,255,.10),transparent 70%),linear-gradient(248deg,rgba(201,74,28,.40) 0%,rgba(142,63,114,.36) 38%,rgba(86,68,200,.38) 68%,rgba(58,95,198,.34) 100%)}
}
/* reading sections: a solid ground, no wash in light; in dark the wash stays at a whisper so the page has depth */
.plain{background:var(--paper)}
.plain .glass-field{display:none}
:root[data-theme="dark"] .plain .glass-field{display:block;opacity:.35}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .plain .glass-field{display:block;opacity:.35}}
/* the stages' washes are already full-bleed; the stage itself carries the edge-to-edge floor */
.stage-sec .glass-field{opacity:.7}
/* side fragments: product moments in the margins, each at its own depth (scroll.js parallax via data-amp) */
.sfrags{position:absolute;inset:0;pointer-events:none;z-index:0}
.sfrag{position:absolute;will-change:transform}
.js .stage-sec .sfrag{opacity:0;transition:opacity 1.3s var(--ease-rv2)}
.js .stage-sec.vis .sfrag{opacity:1}
.sfrag .fi{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;font-size:13.5px;font-weight:500;line-height:1.2;letter-spacing:-.005em;animation:fragfloat var(--fd,7s) ease-in-out infinite alternate;animation-delay:var(--fo,0s)}
.sfrag:nth-child(2n) .fi{--fd:8.5s;--fo:-3s}.sfrag:nth-child(3n) .fi{--fd:6.5s;--fo:-1.5s}
.sfrag.chip .fi,.sfrag.bub .fi,.sfrag.tile .fi{background:var(--card);color:var(--ink);box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 22px 48px -22px rgba(0,0,0,.45)}
.sfrag.chip .fi{padding:10px 14px;border-radius:12px}
.sfrag.bub .fi{padding:11px 15px;border-radius:16px 16px 16px 4px;font-weight:400;max-width:260px;white-space:normal;text-align:left}
.sfrag.tile .fi{padding:10px 16px 10px 10px;border-radius:14px;gap:10px}
.sfrag .ag.big{width:34px;height:34px;border-radius:10px;font-size:11px}
.sfrag.pill .fi{padding:10px 15px;border-radius:999px;color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 30px -14px rgba(0,0,0,.6)}
.sfrag.pill.ok .fi{background:#2E9E5B}.sfrag.pill.sys .fi{background:#7B61FF}.sfrag.pill.need .fi{background:#FF6B2B}.sfrag.pill.nxp .fi{background:var(--app-navy)}
.sfrag .d{width:8px;height:8px;border-radius:50%;flex:none;background:#2E9E5B}
.sfrag .d.sys{background:#7B61FF}.sfrag .d.need{background:#FF6B2B}.sfrag .d.cal{background:#3B82F6}
.sl1{left:clamp(12px,2.6vw,60px);top:30%}.sl2{left:clamp(20px,4.2vw,100px);top:64%}
.sr1{right:clamp(12px,2.6vw,60px);top:34%}.sr2{right:clamp(20px,4.2vw,100px);top:68%}
@media (max-width:1299px){.sfrags{display:none}}
/* loops rest while their section is off screen (motion.js sets .vis) */
.js .stage-sec:not(.vis) .lband,.js .stage-sec:not(.vis) .sfrag .fi,.js .hero:not(.vis) .lband,.js .hero:not(.vis) .sweep,.js .hero:not(.vis) .pulse{animation-play-state:paused}

/* ── Reveals: a little longer and softer, blur-rise, nothing jumps ───────────────────── */
.js .rv{transform:translateY(44px);filter:blur(10px);transition:opacity 1.05s var(--ease-rv2),transform 1.05s var(--ease-rv2),filter 1.05s var(--ease-rv2)}
.js .rv.rv-p{transform:translateY(110px) scale(.965);transition-duration:1.25s}
.js .rv.on{transform:none;filter:none}
/* the crew fans out from the stage: each card from its own angle, back to rest */
.js .agent-cards.fan>.rv:nth-child(1){transform:translate3d(-64px,76px,0) rotate(-5deg)}
.js .agent-cards.fan>.rv:nth-child(2){transform:translate3d(0,96px,0)}
.js .agent-cards.fan>.rv:nth-child(3){transform:translate3d(64px,76px,0) rotate(5deg)}
.js .agent-cards.fan>.rv:nth-child(4){transform:translate3d(-80px,44px,0) rotate(-3deg)}
.js .agent-cards.fan>.rv:nth-child(5){transform:translate3d(0,64px,0)}
.js .agent-cards.fan>.rv:nth-child(6){transform:translate3d(80px,44px,0) rotate(3deg)}
.js .agent-cards.fan>.rv.on{transform:none}
/* the Nexus plan: the spoken line from the right, the steps fly in from alternate edges */
.js .nx-stage .nx-say,.js .nx-stage .nx-plan .st,.js .nx-stage .nx-right>*{opacity:0;transition:opacity .9s var(--ease-rv2),transform 1s var(--ease-rv2)}
.js .nx-stage .nx-say{transform:translate3d(60px,0,0)}
.js .nx-stage .nx-plan .st{transform:translate3d(-90px,0,0)}
.js .nx-stage .nx-plan .st:nth-child(even){transform:translate3d(90px,0,0)}
.js .nx-stage .nx-right>*{transform:translate3d(70px,0,0)}
.js .nx-stage.on .nx-say,.js .nx-stage.on .nx-plan .st,.js .nx-stage.on .nx-right>*{opacity:1;transform:none}
.js .nx-stage.on .nx-say{transition-delay:.25s}
.js .nx-stage.on .nx-plan .st:nth-child(1){transition-delay:.5s}.js .nx-stage.on .nx-plan .st:nth-child(2){transition-delay:.62s}.js .nx-stage.on .nx-plan .st:nth-child(3){transition-delay:.74s}.js .nx-stage.on .nx-plan .st:nth-child(4){transition-delay:.86s}
.js .nx-stage.on .nx-right>*:nth-child(1){transition-delay:.6s}.js .nx-stage.on .nx-right>*:nth-child(2){transition-delay:.75s}.js .nx-stage.on .nx-right>*:nth-child(3){transition-delay:.9s}
/* control cards come out from the edges: left column from the left, right column from the right */
.js .ctrl-list.edges>.rv:nth-child(odd){transform:translate3d(-90px,16px,0)}
.js .ctrl-list.edges>.rv:nth-child(even){transform:translate3d(90px,16px,0)}
.js .ctrl-list.edges>.rv.on{transform:none}
@media (max-width:760px){
  .js .agent-cards.fan>.rv,.js .ctrl-list.edges>.rv{transform:translateY(22px)}
  .js .nx-stage .nx-say,.js .nx-stage .nx-plan .st,.js .nx-stage .nx-right>*{transform:translateY(14px)}
}

/* ── The tour, opened up: captions as fragments beside the screen, both on the stage floor ── */
.tour.open{background:none;padding:0;overflow:visible;color:var(--ink);box-shadow:none!important;gap:clamp(24px,3vw,56px);border-radius:0}
.tour.open::after{display:none}
.tour.open .j-step{background:var(--card);color:var(--ink);box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 22px 48px -24px rgba(16,16,20,.35)}
.tour.open .j-step:hover{background:var(--surface)}
.tour.open .j-step.on{background:var(--card);box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 1px color-mix(in srgb,var(--accent) 45%,transparent),0 30px 60px -30px rgba(242,90,28,.35)}
.tour.open .j-step.done{opacity:.62}
.tour.open .j-step .n{color:var(--muted)}.tour.open .j-step .d{color:var(--ink-2)}
.tour.open .j-step .bar{background:var(--line)}
.tour.open .j-step.on .bar::after{background:var(--brand)}
.tour.open .j-step.done .bar::after{background:var(--line-2)}
.tour.open .tcap{color:var(--ink-2)}
.tour.open .tour-screens{box-shadow:0 0 0 1px var(--line),0 60px 120px -50px rgba(0,0,0,.6)}
@media (min-width:1300px){.tour.open .j-step:nth-child(2),.tour.open .j-step:nth-child(4){margin-left:22px}.tour.open .j-step:nth-child(3){margin-left:-14px}}
.js .pinned .tour.open{box-shadow:none}
.js .pinned .tour.open .j-step.on{transform:translateX(10px)}
/* short viewports: the pinned tour gives the screen less width so the headline, steps and screen all fit */
@media (max-height:920px) and (min-width:961px){.js .pinned .tour.open{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}.js .pinned .head{margin-bottom:clamp(16px,2.4vh,32px)}}
@media (max-height:780px) and (min-width:961px){.js .pinned .tour.open{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}}
/* the mock moments: real DOM, em-based so they scale with the screen (container units) */
.tour-screens{container-type:inline-size}
.ts.tm{display:grid;background:var(--app-ground);color:var(--app-ink);font-family:var(--body);font-size:clamp(7.5px,1.75cqi,15px);line-height:1.35;text-align:left}
.tm .ag{width:1.9em;height:1.9em;border-radius:.5em;font-size:.72em}
.tm .av{width:2.1em;height:2.1em;font-size:.72em}
.tm .ah{font-size:.92em;gap:.6em}.tm .ab{padding:.7em .9em;border-radius:1em 1em 1em .25em;font-size:.95em}
.tm .why{gap:.35em}.tm .why i{font-size:.75em;padding:.25em .55em}
.tm .ar{gap:.45em}.tm .ar b{font-size:.85em;padding:.5em .9em;border-radius:.6em}
/* 01 inbox */
.tm0{grid-template-columns:34% 1fr}
.tm-side{background:#fff;border-right:1px solid var(--app-line);padding:1.1em .9em;display:grid;gap:.35em;align-content:start}
.tm-side>b{font-weight:600;font-size:1.05em;margin-bottom:.4em;padding:0 .3em}
.tm-side .row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:.6em;align-items:center;padding:.55em .7em;border-radius:.8em;min-width:0}
.tm-side .row.on{background:#EEF1FF}
.tm-side .row b{display:block;font-weight:600;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-side .row span{display:block;color:var(--app-mute);font-size:.85em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-side .row em{font-style:normal;font-size:.78em;color:var(--app-mute)}
.tm-thread{padding:1.4em 1.6em;display:grid;gap:.9em;align-content:start;min-width:0}
.tm-in{justify-self:start;max-width:76%;background:#fff;border:1px solid var(--app-line);padding:.8em 1em;border-radius:1.1em 1.1em 1.1em .3em;display:grid;gap:.3em}
.tm-in small{font-size:.78em;color:var(--app-mute)}
.tm-typing{display:inline-flex;align-items:center;gap:.6em;justify-self:start;font-size:.88em;color:var(--app-mute)}
.tm-typing span{display:inline-flex;gap:.25em}.tm-typing span i{width:.42em;height:.42em;border-radius:50%;background:var(--app-mute);animation:blink 1s infinite}.tm-typing span i:nth-child(2){animation-delay:.15s}.tm-typing span i:nth-child(3){animation-delay:.3s}
.tm-draft{justify-self:end;width:min(100%,26em);background:#fff;border-radius:1em;padding:.9em 1em;display:grid;gap:.6em;box-shadow:0 0 0 1px rgba(15,18,48,.08),0 1.6em 3em -1.6em rgba(0,0,0,.5)}
.tm-sent{justify-self:end;display:inline-flex;align-items:center;gap:.5em;font-size:.85em;color:#1E7A46;font-weight:600}.tm-sent i{width:.6em;height:.6em;border-radius:50%;background:#2E9E5B}
[data-step="0"] .tm-in{animation:tmIn .7s var(--ease-rv2) .25s both}
[data-step="0"] .tm-typing{animation:tmTyping 2.4s linear 1s both}
[data-step="0"] .tm-draft{animation:tmUp .8s var(--ease-rv2) 2.7s both}
[data-step="0"] .tm-draft .ok-b{animation:tmPress .5s ease 4.3s both}
[data-step="0"] .tm-sent{animation:tmIn .6s var(--ease-rv2) 4.9s both}
/* 03 pipeline */
.tm2{--g:1em;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g);padding:1.2em 1.2em 3.8em;position:relative;align-content:start}
.tm-col{display:grid;gap:.6em;align-content:start;background:#EEF0F6;border-radius:1em;padding:.8em;min-width:0}
.tm-col.booked{background:#E8EFFF}
.tm-col>b{display:flex;justify-content:space-between;font-weight:600;font-size:.95em;padding:0 .2em .2em}.tm-col>b em{font-style:normal;color:var(--app-mute);font-weight:500}
.tm-card{background:#fff;border-radius:.8em;padding:.7em .85em;font-weight:600;font-size:.95em;display:grid;gap:.2em;box-shadow:0 0 0 1px rgba(15,18,48,.06);position:relative;min-width:0}
.tm-card span{font-weight:400;color:var(--app-mute);font-size:.88em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tm-card em{position:absolute;right:.7em;top:.65em;font-style:normal;font-size:.7em;font-weight:600;color:#1E7A46;background:#E6F6EC;padding:.2em .55em;border-radius:999px}
.tm-slot{border:1.5px dashed var(--app-blue);color:var(--app-blue);text-align:center;padding:.85em;border-radius:.8em;font-weight:600;font-size:.9em}
.tm-note{position:absolute;left:1.2em;bottom:1.1em;display:inline-flex;align-items:center;gap:.6em;background:#fff;border-radius:999px;padding:.5em 1em .5em .6em;font-size:.9em;font-weight:500;box-shadow:0 0 0 1px rgba(15,18,48,.08),0 1.2em 2.4em -1.2em rgba(0,0,0,.5)}
.tm-note em{font-style:normal;color:var(--app-blue);font-weight:600;margin-left:.3em}
[data-step="2"] .tm-card.mover{animation:tmMove 1.5s cubic-bezier(.5,0,.2,1) 1.2s both;z-index:2}
[data-step="2"] .tm-slot{animation:tmFade .3s ease 2.55s both}
[data-step="2"] .tm-note{animation:tmUp .6s var(--ease-rv2) 2.8s both}
@keyframes tmMove{0%{transform:none;box-shadow:0 0 0 1px rgba(15,18,48,.06)}25%{transform:translate3d(0,-.4em,0) rotate(-2deg) scale(1.04);box-shadow:0 0 0 1px rgba(15,18,48,.06),0 1.6em 3em -1.4em rgba(0,0,0,.5)}100%{transform:translate3d(calc(200% + 5.2em),0,0);box-shadow:0 0 0 1px rgba(15,18,48,.06)}}
@keyframes tmFade{to{opacity:0}}
/* 04 reports */
.tm3{padding:1.6em 1.8em;gap:1.2em;align-content:start}
.tm-q{justify-self:end;background:var(--app-blue);color:#fff;padding:.8em 1.1em;border-radius:1.1em 1.1em .3em 1.1em;max-width:72%}
.tm-chart{background:#fff;border-radius:1em;padding:1.2em 1.4em;display:grid;gap:.9em;box-shadow:0 0 0 1px rgba(15,18,48,.06)}
.tm-chart .bar{display:grid;grid-template-columns:5.5em minmax(0,1fr) 2em;align-items:center;gap:.8em;font-size:.95em}
.tm-chart .bar i{height:1.3em;border-radius:.4em;background:linear-gradient(90deg,var(--app-blue),var(--app-purple));transform-origin:left;display:block}
.tm-chart .w1{width:100%}.tm-chart .w2{width:64%}.tm-chart .w3{width:43%}.tm-chart .w4{width:29%}
.tm-chart .bar b{font-weight:600;text-align:right}
.tm-how{display:inline-flex;align-items:center;gap:.6em;font-size:.88em;color:var(--app-mute);background:#fff;border-radius:999px;padding:.5em 1em .5em .6em;justify-self:start;box-shadow:0 0 0 1px rgba(15,18,48,.06)}
[data-step="3"] .tm-q{animation:tmIn .6s var(--ease-rv2) .2s both}
[data-step="3"] .tm-chart .bar i{animation:tmGrow 1.1s var(--ease-rv2) .9s both}
[data-step="3"] .tm-chart .bar:nth-child(2) i{animation-delay:1.05s}[data-step="3"] .tm-chart .bar:nth-child(3) i{animation-delay:1.2s}[data-step="3"] .tm-chart .bar:nth-child(4) i{animation-delay:1.35s}
[data-step="3"] .tm-chart .bar b{animation:tmIn .5s var(--ease-rv2) 1.7s both}
[data-step="3"] .tm-chart .bar:nth-child(2) b{animation-delay:1.85s}[data-step="3"] .tm-chart .bar:nth-child(3) b{animation-delay:2s}[data-step="3"] .tm-chart .bar:nth-child(4) b{animation-delay:2.15s}
[data-step="3"] .tm-how{animation:tmUp .6s var(--ease-rv2) 2.4s both}
@keyframes tmIn{from{opacity:0;transform:translateY(.6em)}}
@keyframes tmUp{from{opacity:0;transform:translateY(1.1em) scale(.98)}}
@keyframes tmTyping{0%{opacity:0}12%,80%{opacity:1}100%{opacity:0}}
@keyframes tmPress{50%{transform:scale(.93);filter:brightness(.9)}}
@keyframes tmGrow{from{transform:scaleX(0)}}
/* 02 contact: the one real tour screen, cropped to the timeline (the crew's actions and the draft) */
.tm1{display:block;overflow:hidden}
.tm1 img{position:absolute;left:-19%;top:-24%;width:148%;max-width:none;height:auto}
@media (max-width:900px){.tm1 img{left:-24%;top:-28%;width:160%}}
/* a quiet idle for the screen stack (no sideways slide: the moments do the moving) */
.tour-screens .ts{transform:translate3d(0,14px,0) scale(.99)}
[data-step="0"] .ts0,[data-step="1"] .ts1,[data-step="2"] .ts2,[data-step="3"] .ts3{transform:none}

/* ── Phone: inside the gutters, washes still bleed, the stages are quieter ───────────── */
@media (max-width:760px){
  .sfloor{top:18%;border-radius:28px 28px 0 0;left:0;right:0}
  .sfloor.tilt{transform:none;height:auto;top:22%;bottom:0;border-radius:28px 28px 0 0}
  .lband{height:70px}.lband.b2{height:44px}
  .tour.open{gap:12px}
}
@media (prefers-reduced-motion:reduce){
  .floor .sweep,.floor .pulse,.lband,.sfrag .fi,.nav-pop{animation:none}
  .js .stage-sec .sfrag{opacity:1}
  .js .nx-stage .nx-say,.js .nx-stage .nx-plan .st,.js .nx-stage .nx-right>*{opacity:1;transform:none}
  .js .agent-cards.fan>.rv,.js .ctrl-list.edges>.rv{transform:none}
  .tour-screens .ts{transform:none}
}

/* ═══ Pass 3 (Oct 2026, founder audit 3): Inter at 600, reversible reveals, depth, colour in the reading
   sections, the crew's pitch, hover on everything, the floating nav (glass.css), ultra-wide stages. ═══ */
/* ── Type: one voice (rule 17). Headlines Inter Display (opsz 32) 600; labels Inter 600 upper, never mono ── */
.tcard h3,.acard h3,.ccard h3,.cta .opt b,.j-step b,.nx-stats b,.stat b,.mega-cta,.shot .num,.roi-out .big b,.sstep h3,.ph-done b,.ph-cal-head,.drawer a,.footer .wm{font-weight:600}
.nx-stats b,.stat b,.mega-cta,.roi-out .big b{letter-spacing:-.03em;font-variation-settings:'opsz' 32}
.hero-c h1 .hl{font-weight:600}
.tcard .n,.cta .opt .k,.next .k,.drawer-k,.mega-sub,.foot-meta,.foot-bottom,.j-step .n,.plan .tag,.vert .k,.ag-k,.ring-hint,.call-head,.shotcard figure .ph,.how-shot .ph,.step summary .n,.flow,.sstep .t,.tab-head .live,.roi-out .k,.entry time,.swipe-hint,.lp-eyebrow{font-family:var(--body);font-weight:600;letter-spacing:.1em}
.lp-eyebrow{font-size:13px;letter-spacing:.12em;color:var(--sec,var(--accent))}
/* the eyebrow carries a gradient hairline above it, in place of the dash (rules 17, 21) */
.eyebrow,.lp-eyebrow{position:relative;padding-top:14px}
.eyebrow::before,.lp-eyebrow::before{position:absolute;left:0;top:0;width:44px;height:2px;margin:0;border-radius:2px;background:var(--brand);vertical-align:initial}
.hero-c .eyebrow{padding-top:0}
@media (max-width:760px){.eyebrow,.lp-eyebrow{padding-left:0;text-indent:0;font-size:12px;letter-spacing:.1em;padding-top:12px}.hero-c .eyebrow{padding-top:0;font-size:11px}}

/* ── Each section has one accent (rule 21): orange on the .wash-o sections, violet on .wash-v; green only for booked/done ── */
.wash-o{--sec:var(--c-need)}.wash-v{--sec:var(--c-sys)}
.next .ev.live i{background:var(--sec,var(--accent));color:#fff}
.ladder span.on{background:var(--app-purple)}

/* ── Depth (rule 19): a tight contact shadow and a long soft one in the section's tint, a 1px top highlight ── */
.tcard,.acard,.ccard{box-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 1px 2px rgba(16,16,20,.06),0 3px 6px -3px rgba(16,16,20,.05),0 30px 50px -30px color-mix(in srgb,var(--sec,var(--accent)) 42%,transparent)}
:root[data-theme="dark"] .tcard,:root[data-theme="dark"] .acard,:root[data-theme="dark"] .ccard{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.4),0 3px 6px -3px rgba(0,0,0,.4),0 30px 50px -30px color-mix(in srgb,var(--sec,var(--accent)) 45%,transparent)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tcard,:root:not([data-theme="light"]) .acard,:root:not([data-theme="light"]) .ccard{box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 1px 2px rgba(0,0,0,.4),0 3px 6px -3px rgba(0,0,0,.4),0 30px 50px -30px color-mix(in srgb,var(--sec,var(--accent)) 45%,transparent)}}
/* a colour tab on the reading-section cards; an icon on the three "what an agent is" cards */
.tcard::before,.ccard::before{content:"";position:absolute;left:clamp(22px,2.2vw,32px);top:-1px;width:40px;height:3px;border-radius:0 0 3px 3px;background:var(--sec,var(--accent))}
.ccard::before{left:clamp(18px,1.8vw,26px)}
.tcard .ti{width:42px;height:42px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--sec,var(--accent)) 12%,transparent);color:var(--sec,var(--accent));margin-bottom:2px}
.tcard .ti svg{width:22px;height:22px}
/* hover: lift 4px and tilt up to 3deg toward the cursor (motion.js sets translate/rotate; fine pointers only), spring back on leave */
.three,.agent-cards,.ctrl-list,.cta-opts,.next,.tour .j-steps,.nx-stats,.sfrags{perspective:1100px}
.t3d{transition:translate .5s var(--ease-out),rotate .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .3s ease,border-color .3s ease}
.t3d.trk{transition-duration:.12s,.12s,.5s,.3s,.3s;transition-timing-function:linear,linear,var(--ease-out),ease,ease}
.t3d.back{transition:translate .75s cubic-bezier(.34,1.5,.64,1),rotate .75s cubic-bezier(.34,1.5,.64,1),box-shadow .5s var(--ease-out)}
.tcard.hov,.acard.hov,.ccard.hov{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 2px 4px rgba(16,16,20,.08),0 8px 14px -8px rgba(16,16,20,.12),0 44px 64px -32px color-mix(in srgb,var(--sec,var(--accent)) 55%,transparent)}
/* product panels sit in perspective: rotateX 8deg at rest, flat at the centre of the viewport (scroll.js sets --pt),
   with a reflected floor shadow underneath. The tilt lives on its own element, never on a reveal. */
.js .p3d{transform:perspective(1600px) rotateX(var(--pt,0deg));transform-origin:50% 100%;will-change:transform;transition:box-shadow .5s ease}
.js .nexus.p3d{box-shadow:0 0 0 .5px rgba(255,255,255,.12),0 30px 50px -30px rgba(15,18,48,.55),0 90px 110px -56px rgba(107,91,255,.6)}
.tour.open .tour-screens.p3d{box-shadow:0 0 0 1px var(--line),0 30px 50px -30px rgba(16,16,20,.45),0 90px 110px -56px color-mix(in srgb,var(--sec,var(--accent)) 60%,transparent)}
.js .demo.p3d{box-shadow:0 1px 0 var(--line),0 30px 50px -30px rgba(16,16,20,.35),0 90px 110px -56px color-mix(in srgb,var(--sec,var(--accent)) 55%,transparent)}
@media (max-width:760px){.js .p3d{transform:none}}
/* the floors: a horizon glow at the far edge and a ground shadow under the hero panel, so things stand on the floor */
.sstage::after{content:"";position:absolute;left:-10vw;right:-10vw;top:calc(clamp(140px,22%,320px) - 70px);height:140px;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,255,255,.9),rgba(255,255,255,0) 70%)}
.sstage:has(.sfloor.tilt)::after{top:12%}
:root[data-theme="dark"] .sstage::after{background:radial-gradient(50% 50% at 50% 50%,rgba(255,190,150,.2),rgba(140,118,255,0) 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sstage::after{background:radial-gradient(50% 50% at 50% 50%,rgba(255,190,150,.2),rgba(140,118,255,0) 70%)}}
.shot-wrap::after{content:"";position:absolute;left:6%;right:6%;bottom:-5%;height:14%;border-radius:50%;z-index:-1;background:radial-gradient(50% 50% at 50% 50%,rgba(15,18,48,.5),rgba(15,18,48,0) 70%)}
.shot-panel{transition:translate .5s var(--ease-out)}
.shot-wrap:hover .shot-panel{translate:0 -6px}
/* fragments get real stacking: translateZ depths; the nearer ones larger and sharper, the far ones smaller and fainter */
.frags{transform-style:preserve-3d}
.frag.near{--z:70px}.frag.mid{--z:20px}.frag.deep{--z:-60px;opacity:.72}
.frag{transform:translate3d(calc(var(--mx,0) * var(--pp)),calc(var(--my,0) * var(--pp) * .6 + var(--sy)),var(--z,0))}
@media (max-width:900px){.frag{--z:0px}}
/* buttons: an inner top highlight on the primary, a pressed state */
.btn:not(.o){box-shadow:inset 0 1px 0 rgba(255,255,255,.22)}
.btn,.who-chips button,.cta .opt,.demo-picks button,.j-step{transition-property:transform,background-color,color,border-color,box-shadow,scale,translate;transition-duration:.5s,.3s,.3s,.3s,.5s,.15s,.4s}
.btn:active,.who-chips button:active,.cta .opt:active,.demo-picks button:active,.j-step:active{scale:.98}

/* ── The headline reacts to the cursor (rule 20, fine pointers): the gradient words track the pointer's x,
   a light sweeps across them, the highlighted word lifts. motion.js sets --hx (position) and --hs (sweep). ── */
@property --hs{syntax:'<number>';inherits:true;initial-value:0}
@property --hx{syntax:'<number>';inherits:true;initial-value:0}
@media (hover:hover) and (pointer:fine){
  .js .hc{transition:--hs .45s ease,--hx .3s ease}
  .js .hc .hx,.js .mega-cta.hc em{background-image:linear-gradient(100deg,rgba(255,255,255,0) calc(var(--hx) * 100% - 18%),rgba(255,255,255,calc(var(--hs) * .62)) calc(var(--hx) * 100%),rgba(255,255,255,0) calc(var(--hx) * 100% + 18%)),linear-gradient(135deg,#FF6B2B 0%,#7B61FF 50%,#FF6B2B 100%);background-size:100% 100%,200% 100%;background-position:0 0,calc(var(--hx) * 100%) 0;background-repeat:no-repeat}
  .hc .hl{display:inline-block;transition:translate .5s var(--ease-out)}
  .hc:hover .hl{translate:0 -.06em}
}

/* ── The crew's pitch (rules 22, 23): the job in one line; the pitch slides up over the card on hover at desktop,
   on tap on the phone (motion.js toggles .open). Transform and opacity only. ── */
.acard{overflow:hidden;min-height:clamp(212px,15vw,240px);cursor:pointer}
.acard .hint{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .3s}
.acard .hint::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-top:1.6px solid currentColor;transform:rotate(-45deg) translateY(2px);transition:transform .4s var(--ease-out)}
.acard:hover .hint,.acard.open .hint{color:var(--app-purple)}
.acard .pitch{position:absolute;left:0;right:0;bottom:0;display:grid;gap:6px;padding:clamp(16px,1.6vw,22px) clamp(22px,2.2vw,32px) clamp(20px,2vw,28px);background:var(--card);border-top:3px solid var(--app-purple);box-shadow:0 -18px 28px -18px rgba(16,16,20,.25);translate:0 104%;opacity:0;transition:translate .55s var(--ease-out),opacity .35s ease;pointer-events:none}
.acard .pitch b{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--app-purple)}
.acard .pitch p{font-size:clamp(14px,1vw,15.5px);line-height:1.5;color:var(--ink)}
.acard.open .pitch,.acard:focus-visible .pitch{translate:0 0;opacity:1}
.acard.open .hint::after,.acard:focus-visible .hint::after{transform:rotate(135deg) translateY(-2px)}
@media (hover:hover) and (pointer:fine){.acard:hover .pitch{translate:0 0;opacity:1}.acard:hover .hint::after{transform:rotate(135deg) translateY(-2px)}}
:root[data-theme="dark"] .acard .pitch b,:root[data-theme="dark"] .acard:hover .hint,:root[data-theme="dark"] .acard.open .hint{color:#A596FF}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .acard .pitch b,:root:not([data-theme="light"]) .acard:hover .hint,:root:not([data-theme="light"]) .acard.open .hint{color:#A596FF}}
@media (max-width:760px){.acard{min-height:208px}.acard .pitch{padding:14px 18px 18px}}

/* ── Hover on everything (rule 23): chips lift and tint, plan steps light, the tour's screen steps on click ── */
.who-chips button,.who-chips span{display:inline-flex;align-items:center;min-height:44px;height:48px;padding:0 20px;border-radius:999px;border:1px solid color-mix(in srgb,var(--sec,var(--accent)) 34%,transparent);background:color-mix(in srgb,var(--sec,var(--accent)) 7%,var(--card));font-size:clamp(15px,1.1vw,18px);font-weight:500;color:var(--ink);box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.who-chips button{cursor:pointer;transition:translate .4s var(--ease-out),background-color .3s,border-color .3s,box-shadow .4s var(--ease-out),scale .15s}
.who-chips button:hover{translate:0 -3px;background:color-mix(in srgb,var(--sec,var(--accent)) 15%,var(--card));border-color:color-mix(in srgb,var(--sec,var(--accent)) 60%,transparent);box-shadow:0 16px 28px -16px color-mix(in srgb,var(--sec,var(--accent)) 55%,transparent)}
.who-chips .more{border-style:dashed;border-color:var(--line-2);background:transparent;color:var(--muted);font-weight:400;box-shadow:none}
@media (max-width:760px){.who-chips button,.who-chips span{height:44px;padding:0 14px;font-size:14.5px}}
.mini-row .pill,.why i,.ar b,.nx-chips span,.addons .pill,.ladder span,.nx-plan .st,.nx-stats div,.demo-picks button,.cta .opt .k{transition:translate .35s var(--ease-out),background-color .25s,border-color .25s,color .25s,box-shadow .35s}
.mini-row .pill:hover,.why i:hover,.addons .pill:hover,.ladder span:hover,.nx-chips span:hover{translate:0 -2px}
.ar b:hover{translate:0 -1px;box-shadow:0 6px 14px -8px rgba(15,18,48,.5)}
.ladder span:hover{border-color:var(--app-purple);color:var(--ink)}
.nx-plan .st:hover{background:rgba(255,255,255,.12)}
.nx-chips span:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.3)}
.trust{transition:border-color .3s,box-shadow .4s}.trust:hover{border-color:color-mix(in srgb,var(--ok) 50%,transparent);box-shadow:0 18px 32px -24px color-mix(in srgb,var(--ok) 50%,transparent)}
.tour.open .j-step{transition:background-color .3s,box-shadow .4s,opacity .4s,transform .3s var(--ease),translate .5s var(--ease-out),rotate .5s var(--ease-out)}
.js .pinned .j-step{cursor:pointer}

/* ── Tour step 02 (rule 26): the contact moment is a 1x cut of the source (1024x731, the panel's own 1.4 ratio),
   centred like the other steps; a ring and a callout say what the crew just did on the record ── */
.tm1 img{position:absolute;inset:0;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center}
.tm-ring{position:absolute;left:8.4%;right:32.6%;top:75%;bottom:1.6%;border:.16em solid var(--app-blue);border-radius:.9em;box-shadow:0 0 0 .45em rgba(33,80,232,.16);pointer-events:none}
.tm-call{position:absolute;left:8.4%;top:63.5%;display:inline-flex;align-items:center;gap:.6em;background:#fff;color:var(--app-ink);padding:.5em 1em .5em .6em;border-radius:999px;font-size:.95em;font-weight:600;white-space:nowrap;box-shadow:0 0 0 1px rgba(15,18,48,.08),0 1.2em 2.4em -1.2em rgba(0,0,0,.55)}
[data-step="1"] .tm-ring{animation:tmIn .6s var(--ease-rv2) .35s both}
[data-step="1"] .tm-call{animation:tmUp .6s var(--ease-rv2) .7s both}

/* ── Side cards on the stages (rule 27): label, value, one-line meaning, at hero-fragment depths, placed just
   outside the content column (nearer it on wide screens, tucked under its edge at 1600–1900) ── */
.stage-sec>.wrap{position:relative;z-index:1}
.sfrag.card .fi{display:grid;gap:4px;width:clamp(200px,12vw,264px);padding:14px 16px 15px;border-radius:16px;white-space:normal;text-align:left;background:var(--card);color:var(--ink);box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 1px 2px rgba(16,16,20,.06),0 30px 56px -26px rgba(16,16,20,.45)}
.sfrag.card .sk{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sfrag.card .sk .ag{width:22px;height:22px;border-radius:6px;font-size:9.5px}
.sfrag.card b{font-family:var(--display);font-weight:600;font-size:clamp(20px,1.4vw,26px);letter-spacing:-.025em;line-height:1.1;font-variation-settings:'opsz' 32}
.sfrag.card .sm{font-size:13px;font-weight:400;line-height:1.35;color:var(--ink-2)}
.sfrag.near .fi{scale:1.04}.sfrag.deep{opacity:.8}.sfrag.deep .fi{scale:.88}
.sl1{left:clamp(16px,calc(50% - var(--max) / 2 - 12.5vw),20vw);top:26%}
.sl2{left:clamp(44px,calc(50% - var(--max) / 2 - 10vw),22vw);top:60%}
.sr1{right:clamp(16px,calc(50% - var(--max) / 2 - 12.5vw),20vw);top:30%}
.sr2{right:clamp(44px,calc(50% - var(--max) / 2 - 10vw),22vw);top:64%}
@media (max-width:1599px){.sfrags{display:none}}
/* ultra-wide (rule 25): the hero fragments come in a little and one more joins; floors and washes are in vw already */
@media (min-width:901px){
  .shot-stage .f1{left:calc(-11vw + 18px)}
  .shot-stage .f3{right:calc(-11vw + 20px)}
  .shot-stage .f4{left:calc(-10vw + 6px)}
  .shot-stage .f5{right:-10vw}
  .shot-stage .f7{left:calc(-9vw + 10px);right:auto;top:86%}
}
@media (min-width:901px) and (max-width:1199px){.shot-stage .f7{display:none}}
@media (min-width:2200px){.hero .demo-stage,.shot-stage{max-width:min(100%,62vw)}.shot-stage .f1,.shot-stage .f4,.shot-stage .f7{left:-9vw}.shot-stage .f3,.shot-stage .f5{right:-9vw}}

/* ── Live early-access count (rule 29): hidden until the server says show; motion.js fills it ── */
.ea-live{display:inline-flex;align-items:center;gap:10px;margin-top:14px;padding:8px 14px 8px 11px;border-radius:999px;font-size:14px;font-weight:500;color:var(--ink);background:color-mix(in srgb,var(--ok) 9%,var(--card));border:1px solid color-mix(in srgb,var(--ok) 36%,transparent)}
.ea-live[hidden]{display:none}
.ea-live b{font-weight:600;font-variant-numeric:tabular-nums}
.ea-live .d{width:9px;height:9px;border-radius:50%;background:#2E9E5B;box-shadow:0 0 0 3px rgba(46,158,91,.22);animation:pingdot 2s ease-in-out infinite}
.cta .ea-live{color:#fff;background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);box-shadow:inset 0 1px 0 rgba(255,255,255,.16)}
.cta .ea-live .d{background:#7FDA9A;box-shadow:0 0 0 3px rgba(127,218,154,.25)}

/* ── Rest states (rule 15): reduced motion rests everything visible and still ── */
@media (prefers-reduced-motion:reduce){
  .js .p3d{transform:none}
  .t3d,.t3d.trk,.t3d.back{transition:none;translate:none;rotate:none}
  .ea-live .d,.shot-panel{animation:none;transition:none}
  .acard .pitch{transition:none}
  [data-step="1"] .tm-ring,[data-step="1"] .tm-call{animation:none}
}
/* ultra-wide floors (rule 25): the tilted planes are far wider than the viewport, so after the perspective
   convergence their near edge still runs past both sides at 2560 and 3440 (the stage clips the rest) */
@media (min-width:901px){.floor,.sfloor.tilt{left:-34vw;right:-34vw}}
/* the Nexus pill on the dark ground: a lighter navy with a rim, so it never sinks into the page */
:root[data-theme="dark"] .frag.nxp .fi,:root[data-theme="dark"] .sfrag.pill.nxp .fi{background:#232A52;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 18px 40px -16px rgba(0,0,0,.7)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .frag.nxp .fi,:root:not([data-theme="light"]) .sfrag.pill.nxp .fi{background:#232A52;box-shadow:0 0 0 1px rgba(255,255,255,.22),0 18px 40px -16px rgba(0,0,0,.7)}}
/* while the pitch covers a crew card, the text under it is hidden (Chrome renders text that overlaps other text
   on split paint chunks with uneven anti-aliasing); the hide waits for the pitch to arrive */
.acard>h3,.acard>p,.acard>.hint{transition:visibility 0s linear .3s}
.acard.open>h3,.acard.open>p,.acard.open>.hint,.acard:focus-visible>h3,.acard:focus-visible>p,.acard:focus-visible>.hint{visibility:hidden}
@media (hover:hover) and (pointer:fine){.acard:hover>h3,.acard:hover>p,.acard:hover>.hint{visibility:hidden}}
.cta .opt.t3d:hover{transform:none}
.tm-call{left:auto;right:34.2%;top:88.2%;font-size:.88em}
@media (max-width:900px){.frag.deep{opacity:.92}}

/* ═══ Pass 4 (audit 4, rules 30–35): the calm hero, the eyebrow pill, fragments that converge and part,
   reveals by role (data-rv), near/mid/far layering, the live count pill. Transforms and opacity only. ═══ */
/* rule 30: smaller, calmer headline; air above; one composition with the panel */
.hero{padding-top:clamp(40px,11vh,132px)}
.hero-c h1{max-width:min(100%,17.4ch);font-size:clamp(40px,4.6vw,76px);letter-spacing:-.03em;line-height:1.04;font-weight:600}
.hero-c .lede{max-width:76ch;margin-top:clamp(14px,1.4vw,20px);font-size:clamp(17px,1.2vw,20px);line-height:1.5}
.hero-ctas{margin-top:clamp(18px,2vw,26px)}
.shot-stage{margin-top:clamp(48px,5.2vw,84px)}
@media (min-width:1200px){.hero .demo-stage.shot-stage{max-width:min(100%,58vw)}}
@media (hover:hover) and (pointer:fine){
  .js .hero-c h1.hc .hx{background-image:linear-gradient(100deg,rgba(255,255,255,0) calc(var(--hx) * 100% - 18%),rgba(255,255,255,calc(var(--hs) * .34)) calc(var(--hx) * 100%),rgba(255,255,255,0) calc(var(--hx) * 100% + 18%)),linear-gradient(135deg,#FF6B2B 0%,#7B61FF 50%,#FF6B2B 100%)}
}
/* rule 31: the eyebrow pill. A brand-tinted bubble with a sparkle; ink text; both themes from the card colour */
.eyebrow-pill{display:inline-flex;align-items:center;gap:9px;height:36px;padding:0 15px 0 11px;margin:0 0 clamp(18px,2.2vw,28px);border-radius:999px;font-family:var(--body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;
  background:linear-gradient(135deg,color-mix(in srgb,#FF6B2B 15%,var(--card)) 0%,color-mix(in srgb,#7B61FF 15%,var(--card)) 100%);
  border:1px solid color-mix(in srgb,#7B61FF 32%,color-mix(in srgb,#FF6B2B 32%,transparent));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 26px -18px rgba(123,97,255,.5)}
.eyebrow-pill .sp{width:13px;height:13px;flex:none;background:var(--brand);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.eyebrow-pill .sep{color:var(--muted);font-weight:400;margin:0 -2px}
:root[data-theme="dark"] .eyebrow-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -18px rgba(0,0,0,.6);border-color:color-mix(in srgb,#8C76FF 38%,color-mix(in srgb,#FF7A45 30%,transparent))}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .eyebrow-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -18px rgba(0,0,0,.6);border-color:color-mix(in srgb,#8C76FF 38%,color-mix(in srgb,#FF7A45 30%,transparent))}}
.hero-c .eyebrow-pill{justify-self:center}
/* rule 32: fragments converge toward the panel and part back to the edges. scroll.js writes --g (0 parted,
   1 gathered) on each .frag[data-path]; the path sets where "parted" is (--fx/--fy/--fs). The depth parallax
   (--sy) and the pointer parallax stay, smaller than before so the parting reads as the motion. */
.frag{--g:1;--fx:0px;--fy:0px;--fs:1;--fo:1;
  transform:translate3d(calc(var(--hmx,0) * var(--pp) + (1 - var(--g)) * var(--fx)),calc(var(--hmy,0) * var(--pp) * .6 + var(--sy) + (1 - var(--g)) * var(--fy)),var(--z,0)) scale(calc(1 - (1 - var(--g)) * (1 - var(--fs))));
  opacity:calc(var(--fo) * (.2 + .8 * var(--g)))}
.frag.near{--pf:.3}.frag.mid{--pf:.18}.frag.deep{--pf:-.1;--fo:.78;opacity:calc(var(--fo) * (.2 + .8 * var(--g)))}
.frag[data-path="left"]{--fx:-24vw;--fs:.9}
.frag[data-path="right"]{--fx:24vw;--fs:.9}
.frag[data-path="above"]{--fy:-200px;--fs:.92}
.frag[data-path="behind"]{--fy:150px;--fs:.82}
/* layering (rule 34): .frags.back sits under the panel (z 1 < panel z 2 < .frags z 3), so a fragment there rises
   from behind it; the stage gets a far plane (.far), a second, slower glow behind the floor */
.shot-stage .frags.back{z-index:1}
.stage .far,.sstage .far{position:absolute;left:-20vw;right:-20vw;top:-10%;height:120%;pointer-events:none;will-change:transform;
  background:radial-gradient(42% 38% at 50% 72%,rgba(123,97,255,.26),transparent 70%),radial-gradient(34% 30% at 18% 26%,rgba(255,107,43,.20),transparent 70%),radial-gradient(30% 28% at 84% 36%,rgba(59,130,246,.16),transparent 70%)}
.stage .far{transform:translate3d(0,calc(var(--scroll,0) * .1px),0)}
:root[data-theme="dark"] .stage .far,:root[data-theme="dark"] .sstage .far{background:radial-gradient(42% 38% at 50% 72%,rgba(140,118,255,.30),transparent 70%),radial-gradient(34% 30% at 18% 26%,rgba(255,122,69,.22),transparent 70%),radial-gradient(30% 28% at 84% 36%,rgba(80,140,255,.2),transparent 70%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .stage .far,:root:not([data-theme="light"]) .sstage .far{background:radial-gradient(42% 38% at 50% 72%,rgba(140,118,255,.30),transparent 70%),radial-gradient(34% 30% at 18% 26%,rgba(255,122,69,.22),transparent 70%),radial-gradient(30% 28% at 84% 36%,rgba(80,140,255,.2),transparent 70%)}}
/* the six desktop slots, inside the stage (the panel is 58vw, the floor fills the viewport) */
@media (min-width:901px){
  .shot-stage .f1{left:calc(-14vw + 8px);right:auto;top:1%}
  .shot-stage .f2{right:-2%;left:auto;top:-64px}
  .shot-stage .f3{right:calc(-14vw + 10px);left:auto;top:24%}
  .shot-stage .f4{left:calc(-13vw - 4px);right:auto;top:62%}
  .shot-stage .f5{right:calc(-12vw - 12px);left:auto;top:70%}
  .shot-stage .f6{left:31%;right:auto;top:-50px}
}
@media (min-width:901px) and (max-width:1199px){.shot-stage .f1,.shot-stage .f4{left:-7vw}.shot-stage .f3,.shot-stage .f5{right:-7vw}.shot-stage .f4{top:64%}}
/* phone: three (above, behind, one in front from the right), shorter paths */
@media (max-width:900px){
  .shot-stage .f6{display:block;left:0;right:auto;top:-104px}
  .shot-stage .f2{right:0;left:auto;top:-52px}
  .shot-stage .f3{display:block;right:-4px;left:auto;top:68%}
  .shot-stage .f1,.shot-stage .f4,.shot-stage .f5{display:none}
  .frag[data-path="left"]{--fx:-40vw}.frag[data-path="right"]{--fx:40vw}.frag[data-path="above"]{--fy:-120px}.frag[data-path="behind"]{--fy:80px}
}
/* rule 33: reveals by role. data-rv picks the start state; .on is rest (transform:none); the transition on .rv
   plays it backwards when the element leaves. All transform and opacity (plus a blur that sharpens). */
.js .rv[data-rv="rise"]{transform:translateY(44px);filter:blur(10px)}
.js .rv[data-rv="behind"]{transform:translateY(56px) scale(.92);filter:blur(6px);transition-duration:1.25s}
.js .rv[data-rv="under"]{transform:translateY(-56px) scale(.96);filter:none;z-index:0}
.js .rv[data-rv="over"]{transform:translateY(-96px) scale(1.04);filter:none}
.js .rv[data-rv="left"]{transform:translate3d(-64px,0,0);filter:none;transition-duration:1s}
.js .rv[data-rv="right"]{transform:translate3d(64px,0,0);filter:none;transition-duration:1s}
.js .rv[data-rv="pop"]{transform:scale(.6);filter:none;transition:opacity .45s var(--ease-rv2),transform .55s cubic-bezier(.34,1.56,.64,1)}
.js .rv[data-rv].on{transform:none;filter:none;z-index:auto}
/* a card that arrives over another casts a soft tinted shadow on the one beneath (rule 34) */
[data-rv="under"],[data-rv="over"]{position:relative}
.js .rv[data-rv="over"].on,.js .rv[data-rv="under"].on{box-shadow:inset 0 1px 0 var(--lg-spec),0 0 0 .5px var(--lg-edge),0 30px 60px -28px color-mix(in srgb,var(--accent,#7B61FF) 45%,transparent)}
/* stage side cards come in from their own side (the translate property, so scroll.js keeps its transform) */
.js .stage-sec .sfrag{transition:opacity 1.3s var(--ease-rv2),translate 1.3s var(--ease-rv2)}
.js .stage-sec .sfrag.sl1,.js .stage-sec .sfrag.sl2{translate:-72px 0}
.js .stage-sec .sfrag.sr1,.js .stage-sec .sfrag.sr2{translate:72px 0}
.js .stage-sec.vis .sfrag{translate:0 0}
@media (max-width:760px){
  .js .rv[data-rv="rise"]{transform:translateY(22px);filter:none}
  .js .rv[data-rv="behind"]{transform:translateY(32px) scale(.96);filter:none;transition-duration:.8s}
  .js .rv[data-rv="under"]{transform:translateY(-28px) scale(.97)}
  .js .rv[data-rv="over"]{transform:translateY(-44px) scale(1.02)}
  .js .rv[data-rv="left"]{transform:translate3d(-28px,0,0)}.js .rv[data-rv="right"]{transform:translate3d(28px,0,0)}
  .js .rv[data-rv].on{transform:none}
  .js .stage-sec .sfrag.sl1,.js .stage-sec .sfrag.sl2{translate:-28px 0}.js .stage-sec .sfrag.sr1,.js .stage-sec .sfrag.sr2{translate:28px 0}
}
/* rule 35: the live count pill inside a button ("Join early access · 16"); never a typed number */
.ea-count{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px 0 8px;margin:0 -6px 0 4px;border-radius:999px;font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0;color:inherit;background:color-mix(in srgb,currentColor 14%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 12%,transparent)}
.ea-count[hidden]{display:none}
.ea-count::before{content:"";width:7px;height:7px;border-radius:50%;background:#34C06B;box-shadow:0 0 0 3px rgba(52,192,107,.22);animation:pingdot 2s ease-in-out infinite}
.ea-count b{font-weight:600}
.btn.s .ea-count{height:22px;font-size:12px;margin-right:-4px}
.drawer .btn .ea-count{margin-left:8px}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* phone sizes for the hero */
@media (max-width:760px){
  .hero{padding-top:clamp(28px,6vh,56px)}
  .hero-c h1{font-size:clamp(34px,9.4vw,40px);line-height:1.06;max-width:none}
  .hero-c .lede{font-size:16px;margin-top:12px}
  .eyebrow-pill{height:32px;font-size:11.5px;gap:7px;padding:0 12px 0 9px;margin-bottom:16px}
  .eyebrow-pill .sp{width:11px;height:11px}
}
/* reduced motion: everything rests visible, fragments in place, no far-plane drift */
@media (prefers-reduced-motion:reduce){
  .js .rv[data-rv],.js .rv[data-rv="pop"],.js .rv[data-rv="behind"]{opacity:1;transform:none;filter:none;transition:none}
  .frag{--g:1;transform:none;opacity:var(--fo,1)}
  .js .stage-sec .sfrag{translate:0 0;transition:none}
  .stage .far{transform:none}
  .ea-count::before{animation:none}
}
/* a pill fragment is styled by its .fi; the generic .pill chip style must not draw a halo around it (shared with product.css) */
.frag.pill,.sfrag.pill{background:none;padding:0;border:0;box-shadow:none}