/* NeuralFlow site system: tokens, base, nav, buttons, sections, footer. Shared by every page. */
/* Self-hosted Geist (Google Fonts build, OFL). One family, light display to medium UI. */
@font-face{font-family:'Geist';font-style:normal;font-weight:300 600;font-display:swap;src:url(/assets/fonts/geist-300-600.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/geistmono-400.woff2) format('woff2')}
@font-face{font-family:'Geist Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/geistmono-500.woff2) format('woff2')}
/* ─── Tokens ─────────────────────────────────────────────────────────────── */
:root{
  --paper:#FBFAF7; --surface:#F2F0EA; --surface-2:#E9E6DE; --card:#FFFFFF; --ink:#101014; --ink-2:#3A3935; --muted:#6E6B64; --line:#E3E0D8; --line-2:#CFCBC1;
  --accent:#F25A1C; --accent-ink:#FFFFFF; --ok:#2E7D4F;
  --display:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --body:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --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,5vw,64px); --max:1240px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--paper:#0F0F12;--surface:#17171B;--surface-2:#202026;--card:#141418;--ink:#F2F1ED;--ink-2:#CFCDC6;--muted:#9B9892;--line:#26262B;--line-2:#34343B;--accent:#FF7A45;--accent-ink:#101014;--ok:#7FC48B;color-scheme:dark}}
:root[data-theme="dark"]{--paper:#0F0F12;--surface:#17171B;--surface-2:#202026;--card:#141418;--ink:#F2F1ED;--ink-2:#CFCDC6;--muted:#9B9892;--line:#26262B;--line-2:#34343B;--accent:#FF7A45;--accent-ink:#101014;--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;-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(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
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:500;letter-spacing:-.015em;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:40px;height:40px;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:40px;height:40px;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:68px 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:300;letter-spacing:-.02em;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%)}}
.shot.rank .num{display:inline-grid;height:1em;overflow:hidden}
.shot.rank .num em{grid-area:1/1;font-style:normal;opacity:0;animation:rankin 6s ease-in-out infinite}
.shot.rank .num em:nth-child(1){animation-delay:0s}.shot.rank .num em:nth-child(2){animation-delay:2s}.shot.rank .num em:nth-child(3){animation-delay:4s;color:var(--accent)}
@keyframes rankin{0%{opacity:0;transform:translateY(60%)}6%,30%{opacity:1;transform:none}36%,100%{opacity:0;transform:translateY(-60%)}}
.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}}
.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}
}