/* Home page (index.html) only. Shared tokens and classes (.strike .ai .eyebrow .lede .button .card .reveal) live in styles.css.
   Home adds a small accent palette (--h-*) for per-feature color; neutrals and the brand red/blue stay in charge.
   Motion: decorative loops live here and in assets/home.js; everything stops under prefers-reduced-motion. */
.home{
  --h-blue:#2563eb;--h-cyan:#0891b2;--h-green:#2f9e5f;--h-coral:#f0503c;--h-amber:#d08a12;--h-lime:#6f9e1a;--h-violet:#6d5bd0;--h-ink:#2f3a2c;
  --h-tint:10%;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .home{--h-blue:#5b8ff9;--h-cyan:#35c3dd;--h-green:#4cc07f;--h-coral:#ff7361;--h-amber:#f0b140;--h-lime:#b4e05a;--h-violet:#9b8cf2;--h-ink:#a9c29b;--h-tint:16%}
}
:root[data-theme="dark"] .home{--h-blue:#5b8ff9;--h-cyan:#35c3dd;--h-green:#4cc07f;--h-coral:#ff7361;--h-amber:#f0b140;--h-lime:#b4e05a;--h-violet:#9b8cf2;--h-ink:#a9c29b;--h-tint:16%}

#main > section{padding:clamp(56px,7vw,100px) 0;border-top:0}
#main > section + section{border-top:1px solid var(--line)}
.sr-sep{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Section rhythm: eyebrow + heading + lede */
.section-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.section-head h2{font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.04em;font-weight:800;margin:0 0 16px;text-wrap:balance}
.section-head .lede{font-size:clamp(16px,1.5vw,19px);line-height:1.6;color:var(--text-soft);margin:0;max-width:640px}
.section-head .lede a{color:var(--ink)}
.split .section-head{margin-bottom:0}

/* Staggered reveal inside grids (site.js adds .is-in) */
html.js .home .reveal{transition-delay:calc(var(--i,0) * 70ms)}

/* ---------- Hero ---------- */
.home-hero{position:relative;isolation:isolate;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--ink) 9%,transparent) 1px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask:radial-gradient(90% 80% at 70% 30%,#000 20%,transparent 75%);mask:radial-gradient(90% 80% at 70% 30%,#000 20%,transparent 75%)}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:blob 18s var(--ease) infinite alternate}
.b1{width:520px;height:520px;right:4%;top:-120px;background:color-mix(in srgb,var(--ai-to) 30%,transparent)}
.b2{width:380px;height:380px;right:28%;top:120px;background:color-mix(in srgb,var(--ai-from) 30%,transparent);animation-delay:-6s;animation-duration:22s}
.b3{width:300px;height:300px;right:-60px;bottom:-40px;background:color-mix(in srgb,var(--h-lime) 26%,transparent);animation-delay:-3s}
.b4{width:220px;height:220px;left:-60px;top:40px;background:color-mix(in srgb,var(--h-coral) 16%,transparent);animation-delay:-9s;animation-duration:26s}
@keyframes blob{0%{transform:translate(0,0) scale(1)}50%{transform:translate(-40px,30px) scale(1.08)}100%{transform:translate(30px,-20px) scale(.95)}}

.hero-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(32px,4vw,64px);align-items:start;
  padding-top:clamp(56px,7vw,100px);padding-bottom:clamp(40px,5vw,72px)}
/* Wide screens: the headline spans both columns; the copy sits left and the illustration right */
.hero-copy{display:contents}
.hero-eyebrow,.hero-title{grid-column:1/-1}
.hero-lede,.hero-actions,.hero-facts,.home-hero .footnote{grid-column:1}
.hero-stage{grid-column:2;grid-row:3/span 4;align-self:center}
.hero-title{font-size:clamp(44px,7vw,104px);line-height:1;letter-spacing:-.05em;font-weight:900;margin:0 0 clamp(20px,2.4vw,30px);max-width:none}
.hero-line{display:block}
.hero-title sup{font-size:.26em;font-weight:600;letter-spacing:0;vertical-align:super;margin-left:.1em}
.hero-title sup a{color:var(--muted);text-decoration:none}
.hero-title sup a:hover{color:var(--ink)}
.hero-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:var(--text-soft);max-width:580px;margin:0 0 clamp(26px,3vw,34px)}
.hero-actions{gap:12px}
.hero-actions .button.lg:not(.dark) span{display:inline-block;transition:transform .3s var(--ease)}
.hero-actions .button.lg:not(.dark):hover span{transform:translateY(3px)}
.hero-facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 0;font-size:13px;color:var(--muted)}
.hero-facts li{display:inline-flex;align-items:center}
.hero-facts li + li:before{content:"";width:3px;height:3px;border-radius:50%;background:currentColor;margin:0 12px;opacity:.7}
.hero-facts .hero-clis{flex-basis:100%;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.hero-clis-label{font-weight:600;color:var(--text-soft);margin-right:4px}
/* Each CLI is a link to the docs' support table. Fully supported CLIs are solid; .chip-more (basic / experimental) is quieter, on its own row under the "Early support" label. */
.hero-clis .chip{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px solid var(--line-strong);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;font-weight:600;text-decoration:none;box-shadow:0 1px 2px #0f10120a;transition:border-color .2s var(--ease),background .2s var(--ease),color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.hero-clis .chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ink);opacity:.55;flex:none}
.hero-clis .chip:hover{border-color:color-mix(in srgb,var(--ink) 30%,var(--line));background:var(--soft);transform:translateY(-1px);box-shadow:var(--shadow)}
.hero-clis .chip:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hero-clis .chip-more{border-style:dashed;background:transparent;color:var(--text-soft);font-weight:550;box-shadow:none}
.hero-clis .chip-more:before{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}
.hero-clis .chip-more:hover{color:var(--ink);box-shadow:none}
.hero-clis-break{flex-basis:100%;height:0}
.home-hero .footnote{margin:14px 0 0;font-size:13px;font-style:italic;color:var(--muted)}
.home-hero .footnote a{text-decoration:none;color:var(--muted);font-style:normal;margin-right:2px}

/* Hero illustration: an Overview-style window drawn in HTML/CSS */
.hero-stage{position:relative;margin:0;padding:18px 0 28px}
.hs-window{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent),0 40px 80px -30px color-mix(in srgb,var(--ai-to) 35%,transparent),0 20px 40px -24px color-mix(in srgb,var(--ink) 30%,transparent);
  transform:perspective(1400px) rotateY(-6deg) rotateX(3deg);transition:transform .8s var(--ease)}
.hero-stage:hover .hs-window{transform:perspective(1400px) rotateY(-2deg) rotateX(1deg)}
.hs-bar{height:38px;display:flex;align-items:center;gap:12px;padding:0 14px;border-bottom:1px solid var(--line);background:var(--soft);font-size:12px}
.hs-bar .dots i{width:9px;height:9px}
.hs-title{font-weight:650;color:var(--text-soft)}
.hs-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--h-green)}
.hs-live i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor;animation:ping 1.8s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--h-green) 60%,transparent)}100%{box-shadow:0 0 0 8px transparent}}
.hs-body{padding:18px;display:grid;gap:16px;background:linear-gradient(180deg,var(--paper),var(--surface))}
.hs-tree{display:grid;gap:12px}
.hs-branch{display:grid;grid-template-columns:1fr 1fr;gap:12px;position:relative;padding-top:14px}
.hs-branch:before{content:"";position:absolute;left:25%;right:25%;top:0;height:14px;border:1.5px solid var(--line-strong);border-bottom:0;border-radius:10px 10px 0 0}
.hs-branch:after{content:"";position:absolute;left:50%;top:-12px;height:12px;border-left:1.5px solid var(--line-strong)}
.hs-card{--s:var(--h-green);position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px 10px;padding:12px 14px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;transition:border-color .4s var(--ease),box-shadow .4s var(--ease)}
.hs-card.is-lead{max-width:62%;margin:0 auto;width:100%}
.hs-card[data-state="needs"]{--s:var(--h-amber);border-color:color-mix(in srgb,var(--h-amber) 45%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--h-amber) 14%,transparent)}
.hs-card[data-state="idle"]{--s:var(--muted)}
.hs-dot{width:9px;height:9px;border-radius:50%;background:var(--s)}
.hs-card[data-state="working"] .hs-dot{animation:ping-s 1.6s ease-out infinite}
@keyframes ping-s{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--h-green) 55%,transparent)}100%{box-shadow:0 0 0 7px transparent}}
.hs-meta{min-width:0;display:flex;flex-direction:column;line-height:1.2}
.hs-meta b{font-size:13px;letter-spacing:-.01em}
.hs-meta em{font-style:normal;font-size:11px;color:var(--muted)}
.hs-status{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:999px;color:var(--s);background:color-mix(in srgb,var(--s) 13%,transparent);white-space:nowrap}
.hs-now{grid-column:1/-1;margin:4px 0 0;font:500 11.5px/1.35 var(--mono);color:var(--text-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-meter{position:absolute;left:0;right:0;bottom:0;height:2px;background:transparent;overflow:hidden}
.hs-meter i{position:absolute;inset:0;width:40%;background:linear-gradient(90deg,transparent,var(--s),transparent);transform:translateX(-100%)}
.hs-card[data-state="working"] .hs-meter i{animation:scan 1.8s linear infinite}
@keyframes scan{to{transform:translateX(260%)}}

.hs-composer{display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 8px 8px 12px;border:1px solid var(--line-strong);border-radius:14px;background:var(--surface);transition:border-color .3s var(--ease),box-shadow .3s var(--ease)}
.hs-mic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--text-soft);transition:background .3s var(--ease),color .3s var(--ease)}
.hs-wave{display:none;align-items:center;gap:3px;height:22px}
.hs-wave i{width:3px;height:30%;border-radius:2px;background:var(--h-coral)}
.hs-text{flex:1;min-width:0;display:flex;align-items:center;font-size:13.5px;color:var(--ink);white-space:nowrap;overflow:hidden}
#hsText{overflow:hidden;text-overflow:ellipsis}
.hs-caret{flex:none;width:1.5px;height:16px;margin-left:1px;background:var(--ink);animation:caret 1s steps(1) infinite}
@keyframes caret{50%{opacity:0}}
.hs-keys{flex:none;display:none;gap:4px}
.hs-keys kbd{font-size:10.5px;padding:2px 6px;transform:translateY(1px);border-bottom-width:1px;background:color-mix(in srgb,var(--h-coral) 10%,var(--surface));border-color:color-mix(in srgb,var(--h-coral) 40%,var(--line))}
.hs-send{flex:none;padding:7px 14px;border-radius:10px;background:#2f3a2c;color:#f7f6f3;font-size:12.5px;font-weight:650;transition:transform .2s var(--ease),box-shadow .3s var(--ease)}
.hs-composer.is-listening{border-color:color-mix(in srgb,var(--h-coral) 55%,var(--line));box-shadow:0 0 0 4px color-mix(in srgb,var(--h-coral) 14%,transparent)}
.hs-composer.is-listening .hs-mic{background:var(--h-coral);color:#fff}
.hs-composer.is-listening .hs-wave,.hs-composer.is-listening .hs-keys{display:flex}
.hs-composer.is-listening .hs-text{display:none}
.hs-composer.is-listening .hs-wave i{animation:wave .9s ease-in-out infinite}
.hs-composer.is-ready .hs-send{box-shadow:0 0 0 4px color-mix(in srgb,var(--h-green) 22%,transparent)}
.hs-wave i:nth-child(2n){animation-delay:-.2s!important}.hs-wave i:nth-child(3n){animation-delay:-.45s!important}.hs-wave i:nth-child(5n){animation-delay:-.7s!important}
@keyframes wave{0%,100%{height:20%}50%{height:100%}}

.hs-tag{position:absolute;z-index:1;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:-.005em;box-shadow:var(--shadow);animation:float 6s ease-in-out infinite}
.hs-tag.t1{left:-18px;bottom:78px;background:var(--h-coral);color:#fff}
.hs-tag.t2{left:-22px;top:120px;background:var(--surface);color:var(--h-green);border:1px solid color-mix(in srgb,var(--h-green) 35%,var(--line));animation-delay:-3s}
@keyframes float{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.hs-cap{margin-top:14px;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- Live demo, framed like an app window ---------- */
#main > #try{padding-top:0;padding-bottom:clamp(40px,5vw,72px);border-top:0}
.try-head{display:flex;justify-content:center;margin-bottom:18px}
.try-line{margin:0;font-size:14px;color:var(--text-soft);text-align:center}
.try-line b{color:var(--ink);font-weight:650}
#try .mini{position:relative;border-radius:16px;border-color:var(--line);
  box-shadow:0 1px 0 color-mix(in srgb,var(--ink) 4%,transparent),0 30px 70px -24px color-mix(in srgb,var(--ink) 28%,transparent),0 0 0 6px color-mix(in srgb,var(--surface) 55%,transparent)}
#try .mini-bar{height:42px;background:var(--soft)}
#try .dots i{background:color-mix(in srgb,var(--ink) 18%,transparent)}
#try .dots i:nth-child(1){background:#ff5f57}#try .dots i:nth-child(2){background:#febc2e}#try .dots i:nth-child(3){background:#28c840}
#try .mini-btn{border-radius:8px}
#try .mini.is-full{border-radius:0;box-shadow:none}

/* ---------- Features ---------- */
#main > .home-features{border-top:0;padding-top:clamp(40px,5vw,72px)}
.feat-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.feat{--c:var(--h-blue);position:relative;isolation:isolate;overflow:hidden;padding:24px 22px 24px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)}
.feat:before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .3s var(--ease);
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--c) 12%,transparent),transparent 70%)}
.feat:after{content:"";position:absolute;left:22px;right:22px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--c);opacity:.85;transform:scaleX(.18);transform-origin:left;transition:transform .45s var(--ease)}
.feat:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--c) 35%,var(--line));box-shadow:0 18px 40px -22px color-mix(in srgb,var(--c) 45%,transparent)}
.feat:hover:before{opacity:1}
.feat:hover:after{transform:scaleX(1)}
.feat-ico{display:grid;place-items:center;width:44px;height:44px;margin-bottom:18px;border-radius:12px;color:var(--c);background:color-mix(in srgb,var(--c) var(--h-tint),var(--surface));border:1px solid color-mix(in srgb,var(--c) 22%,transparent);transition:transform .35s var(--ease)}
.feat:hover .feat-ico{transform:rotate(-6deg) scale(1.06)}
.feat-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 6px;font-size:17px;letter-spacing:-.02em}
.feat p{margin:0;font-size:14.5px;line-height:1.55;color:var(--text-soft)}
.feat a{color:var(--c);font-weight:650;text-decoration:none;white-space:nowrap}
.feat a:after{content:" →"}
.feat a:hover{text-decoration:underline}
.feat-voice{background:linear-gradient(160deg,color-mix(in srgb,var(--h-coral) 9%,var(--surface)),var(--surface) 60%);border-color:color-mix(in srgb,var(--h-coral) 28%,var(--line))}
/* What's new: the same .feat cards with a real app screenshot on top */
.feat-grid.whats-new{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat-shot{display:block;width:100%;height:auto;margin:0 0 16px;border:1px solid var(--line);border-radius:10px;background:var(--paper)}
@media (max-width:900px){.feat-grid.whats-new{grid-template-columns:1fr;max-width:560px}}
@media (max-width:640px){.whats-new .feat{display:block}}

/* ---------- Voice ---------- */
#main > .voice{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--h-coral) 5%,var(--paper)),var(--paper))}
#main > .voice:before{content:"";position:absolute;z-index:-1;right:-10%;top:-20%;width:60%;height:120%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--h-coral) 14%,transparent),transparent)}
.voice-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:40px clamp(40px,5vw,80px);align-items:center}
.voice-copy h2{font-size:clamp(32px,4.4vw,56px);line-height:1.04;letter-spacing:-.045em;font-weight:850;margin:0 0 18px}
.voice-copy .lede{font-size:clamp(16px,1.5vw,19px);margin-bottom:28px}
.voice-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.voice-points li{padding:16px 16px 16px 18px;border:1px solid var(--line);border-left:3px solid var(--h-coral);border-radius:12px;background:var(--surface);font-size:14.5px;line-height:1.5;color:var(--text-soft)}
.voice-points b{display:block;color:var(--ink);font-size:15.5px;letter-spacing:-.01em;margin-bottom:2px}


/* ---------- The signature moment: claims, crossed out ---------- */
#main > .nots{--strike-blend:screen;--nots-ink:#f2f1ee;--nots-soft:#a9abb0;--nots-line:#26282d;position:relative;isolation:isolate;overflow:hidden;background:#0f1012;color:var(--nots-ink);border-top:0;border-bottom:1px solid var(--nots-line)}
#main > .nots:before{content:"";position:absolute;z-index:-1;left:-10%;bottom:-40%;width:60%;height:90%;pointer-events:none;background:radial-gradient(closest-side,#2563eb33,transparent)}
#main > .nots:after{content:"";position:absolute;z-index:-1;right:-10%;top:-30%;width:50%;height:80%;pointer-events:none;background:radial-gradient(closest-side,#ff2a2a1f,transparent)}
#main > .nots + section{border-top:0}
.nots .eyebrow{color:var(--nots-soft)}
.nots .section-head h2{color:var(--nots-ink)}
.nots .nots-list{display:block;list-style:none;margin:0;padding:0;border-top:1px solid var(--nots-line)}
.nots .nots-list li{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:10px 48px;align-items:center;padding:clamp(22px,2.6vw,34px) 0;border-bottom:1px solid var(--nots-line);transition:padding .35s var(--ease),background .35s var(--ease)}
.nots .nots-list li:hover{padding-left:14px;background:linear-gradient(90deg,#ffffff08,transparent 70%)}
.nots .nots-claim,.nots .nots-claim span{margin:0;font-size:clamp(26px,3.7vw,50px);line-height:1.08;letter-spacing:-.04em;font-weight:800;color:var(--nots-ink);text-wrap:balance}
.nots-answer{margin:0;font-size:16px;line-height:1.55;color:var(--nots-soft)}
.nots-answer b{font-weight:700;background:linear-gradient(90deg,#1ee0f5,#5b8ff9);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- How it works: steps beside the promo clip ---------- */
.how-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px 40px;align-items:start}
.how-steps{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.how-steps:before{content:"";position:absolute;left:39px;top:36px;bottom:36px;width:2px;background:linear-gradient(var(--h-blue),var(--h-green),var(--h-coral));opacity:.35}
.how-steps li{position:relative;display:flex;gap:18px;align-items:flex-start;padding:22px 22px 22px 20px;transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.how-steps li:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.how-num{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;font:700 12px/1 var(--mono);letter-spacing:.02em;color:#fff;background:var(--c,var(--h-blue));box-shadow:0 0 0 5px var(--surface)}
.how-steps li:nth-child(1){--c:var(--h-blue)}.how-steps li:nth-child(2){--c:var(--h-green)}.how-steps li:nth-child(3){--c:var(--h-coral)}
.how-steps h3{margin:6px 0 4px;font-size:17px;letter-spacing:-.015em;font-weight:700}
.how-steps p{margin:0;font-size:15px;color:var(--text-soft)}
.promo-clip{margin:0}
.promo-frame{position:relative;aspect-ratio:16/9;border-radius:22px;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(120% 90% at 80% 0%,color-mix(in srgb,var(--ai-to,#2563eb) 10%,transparent),transparent 60%),var(--soft);
  box-shadow:0 24px 60px -30px color-mix(in srgb,var(--ink) 30%,transparent)}
.promo-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;background:transparent}
.promo-sound{position:absolute;left:14px;top:14px;z-index:1}
.promo-clip figcaption{margin-top:12px;font-size:13px;color:var(--muted)}

/* ---------- Accounts ---------- */
#main > #accounts{background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--h-blue) 4%,var(--paper)))}
.acct-steps{counter-reset:a;list-style:none;margin:0;padding:0;display:grid;gap:10px}
.acct-steps li{counter-increment:a;display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:10px;row-gap:4px;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:var(--surface);transition:border-color .3s var(--ease),transform .3s var(--ease)}
.acct-steps li:hover{border-color:color-mix(in srgb,var(--h-blue) 35%,var(--line));transform:translateY(-2px)}
.acct-steps li:before{content:counter(a,decimal-leading-zero);grid-row:span 2;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;font:700 12px/1 var(--mono);color:var(--h-blue);background:color-mix(in srgb,var(--h-blue) var(--h-tint),var(--surface))}
.acct-steps li:nth-child(3):before{color:var(--h-green);background:color-mix(in srgb,var(--h-green) var(--h-tint),var(--surface))}
.acct-steps b{font-size:17px;letter-spacing:-.015em}
.acct-steps span{font-size:15px;color:var(--text-soft)}
#accounts .split{align-items:center;gap:32px 72px}

/* ---------- Who it's for ---------- */
#who .who{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
#who .who div{position:relative;overflow:hidden;padding:28px 24px 26px;border-radius:18px;background:var(--surface);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
#who .who div:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
#who .who div:nth-child(1){--c:var(--h-coral)}#who .who div:nth-child(2){--c:var(--h-violet)}#who .who div:nth-child(3){--c:var(--h-blue)}
#who .who div:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px color-mix(in srgb,var(--c) 50%,transparent)}
#who .who dt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700;margin-bottom:12px}
#who .who dd{font-size:clamp(19px,1.8vw,22px);line-height:1.3;letter-spacing:-.025em;font-weight:750}
#who .privacy{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:28px;padding:10px 16px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:500 14px/1.5 var(--mono)}
#who .term{color:var(--h-green);font-weight:700}

/* ---------- FAQ ---------- */
#faq .split{gap:32px 72px}
#faq .section-head{position:sticky;top:96px}
#faq .faq-more{display:inline-flex;flex-wrap:wrap;align-items:center;gap:6px;margin:24px 0 0;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);font:500 13.5px/1.5 var(--mono);color:var(--text-soft)}
#faq .faq-more .term{color:var(--h-green);margin-right:2px}
#faq .faq-more a{color:var(--ink)}
/* Numbered rows (01, 02 …) like the How-it-works steps; the open one gets a blue edge and a soft tint. */
#faq .faq{counter-reset:faq}
#faq .faq details{counter-increment:faq;position:relative;padding:0;transition:background-color .25s var(--ease)}
#faq .faq details:before{content:"";position:absolute;left:0;top:-1px;bottom:-1px;width:2px;background:var(--h-blue);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
#faq .faq details[open]{background:linear-gradient(90deg,color-mix(in srgb,var(--h-blue) 6%,transparent),transparent 70%)}
#faq .faq details[open]:before{transform:scaleY(1)}
#faq .faq summary{align-items:center;justify-content:flex-start;gap:16px;padding:20px 4px 20px 16px;font-size:17px;letter-spacing:-.01em;transition:color .2s var(--ease)}
#faq .faq summary:before{content:counter(faq,decimal-leading-zero);flex:none;min-width:22px;font:600 12px/1 var(--mono);color:var(--muted);transition:color .2s var(--ease)}
#faq .faq summary:hover,#faq .faq details[open] summary{color:var(--h-blue)}
#faq .faq summary:hover:before,#faq .faq details[open] summary:before{color:var(--h-blue)}
#faq .faq summary:after{margin-left:auto;display:grid;place-items:center;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;font-size:18px;line-height:1;background:var(--surface);transition:transform .25s var(--ease),color .2s var(--ease),border-color .2s var(--ease),background-color .2s var(--ease)}
#faq .faq details[open] summary:after{content:"−";transform:none;color:var(--h-blue);border-color:color-mix(in srgb,var(--h-blue) 40%,var(--line));background:color-mix(in srgb,var(--h-blue) var(--h-tint),var(--surface))}
#faq .faq p{margin:0;padding:0 48px 22px 54px;font-size:15px;line-height:1.65;max-width:620px}
#faq .faq a{color:var(--ink)}
/* Smooth open/close where the browser supports animating <details>; others just snap open. */
@supports (interpolate-size:allow-keywords){
  #faq .faq{interpolate-size:allow-keywords}
  #faq .faq details::details-content{height:0;overflow:clip;transition:height .3s var(--ease),content-visibility .3s allow-discrete}
  #faq .faq details[open]::details-content{height:auto}
}
@media (max-width:900px){#faq .section-head{position:static}}
@media (max-width:640px){#faq .faq summary{padding-left:12px;gap:12px}#faq .faq p{padding:0 12px 20px 46px}}

/* ---------- Closing CTA ---------- */
#main > #get{position:relative;isolation:isolate;overflow:hidden;padding:clamp(88px,12vw,160px) 0;text-align:center}
#get .wrap{display:flex;flex-direction:column;align-items:center}
#get:before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(1000px,130vw);height:560px;transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side at 35% 50%,color-mix(in srgb,var(--ai-from) 16%,transparent),transparent),radial-gradient(closest-side at 65% 50%,color-mix(in srgb,var(--ai-to) 14%,transparent),transparent)}
.closer{font-size:clamp(36px,5.8vw,76px);line-height:1.02;letter-spacing:-.05em;font-weight:900;margin:0 0 36px;text-wrap:balance}
#get .actions{gap:12px;justify-content:center}
.cta-note{margin:20px 0 0;font-size:13px;color:var(--muted)}
/* Email list form (assets/account.js initList): the shared .account-form / input / .button styles, laid out in one row */
#get .list-form{margin:40px auto 0;text-align:left;max-width:460px}
#get .list-form[hidden]{display:none}
.list-row{display:flex;gap:10px}
.list-row input{flex:1;min-width:0}
.list-row .button{flex:none}

@media (max-width:1100px){
  .feat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:980px){
  .hero-inner{grid-template-columns:minmax(0,1fr)}
  .hero-stage{grid-column:1;grid-row:auto;max-width:620px;width:100%;margin:28px auto 0}
  .hs-window{transform:none}
  .voice-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .how-grid{grid-template-columns:1fr}
  .promo-clip{order:-1}
  .nots .nots-list li{grid-template-columns:1fr}
  #who .who{grid-template-columns:1fr}
}
@media (max-width:640px){
  .hero-facts{flex-direction:column;align-items:flex-start;gap:6px}
  .hero-facts li + li:before{display:none}
  .hero-actions .button,#get .actions .button{flex:1 1 100%;justify-content:center}
  .feat-grid,.voice-points{grid-template-columns:1fr}
  .how-steps li{padding:18px}
  .how-steps:before{left:36px}
  .promo-frame{border-radius:16px}
  .hs-body{padding:12px}
  .hs-card.is-lead{max-width:100%}
  .hs-branch{grid-template-columns:1fr}
  .hs-branch:before{display:none}
  .hs-keys{display:none!important}
  .hs-tag.t1{left:4px}.hs-tag.t2{left:4px;top:96px}
  .feat{display:grid;grid-template-columns:40px minmax(0,1fr);column-gap:14px;padding:18px}
  .feat-ico{grid-row:span 2;width:40px;height:40px;margin:0}
  .feat h3{margin-top:2px}
  #try .mini{border-radius:12px;box-shadow:0 20px 40px -24px color-mix(in srgb,var(--ink) 30%,transparent)}
}
@media (prefers-reduced-motion:reduce){
  .blob,.hs-live i,.hs-card .hs-dot,.hs-meter i,.hs-caret,.hs-tag,.hs-wave i{animation:none!important}
  .hs-window,.hero-stage:hover .hs-window{transform:none}
  .hs-wave i{height:55%}.hs-wave i:nth-child(odd){height:30%}
  .feat,.feat-ico,.how-steps li,.acct-steps li,#who .who div,.nots .nots-list li,.chip{transition:none}
  #faq .faq details,#faq .faq details:before,#faq .faq summary,#faq .faq summary:after{transition:none}
  #faq .faq details::details-content{transition:none}
  .feat:hover,.how-steps li:hover,.acct-steps li:hover,#who .who div:hover{transform:none}
}