/* ---------- hero: full-bleed living road ---------- */
#hero{position:relative;min-height:max(100svh,720px);display:flex;align-items:center;overflow:hidden;isolation:isolate}
.media{position:absolute;inset:0;z-index:-1;background:#dfe5ea}
.media video,.media canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* neutral scrim: keeps the road alive on the right, quiet behind the copy */
.veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.88) 0%,rgba(255,255,255,.7) 38%,rgba(255,255,255,.18) 70%,rgba(255,255,255,.1) 100%)}
.hero-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s6);align-items:center;width:100%;padding-top:calc(var(--header) + 72px);padding-bottom:96px}
.copy h1{font-size:min(var(--f6),9.5vh);line-height:.98;letter-spacing:-.045em;max-width:11em}
html[lang^=zh] .copy h1{line-height:1.12;letter-spacing:-.02em;max-width:8em}
.copy .lead{margin-top:var(--s3)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3);margin-top:var(--s5)}
.stage{position:relative}
.sbody{display:flex;flex-direction:column;transition:opacity .2s,transform .2s var(--ease)}
.sbody.sw{opacity:0;transform:scale(.97)}
.seg{position:relative;display:inline-flex;padding:4px;border-radius:var(--r-pill);margin-bottom:var(--s2)}
.seg button{min-height:44px;padding:0 20px;border:0;border-radius:var(--r-pill);background:none;font-weight:600;font-size:var(--f1);transition:background-color .25s,color .25s}
.seg button[aria-pressed="true"]{background:var(--fg);color:#fff}
.device{margin:0;padding:10px;aspect-ratio:16/9.6}
.device img{width:100%;height:100%;object-fit:contain;border-radius:var(--r-media);transition:opacity .3s}
/* compact card sits under the screenshot panel, same edges, 16 px gap: never over the screenshot */
.readout{position:relative;margin:var(--s2) 0 0;padding:14px 20px;border-radius:24px;background:var(--glass-strong);
  display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:20px;align-items:center;
  grid-template-areas:"tag tag" "num word" "num why" "ctl ctl"}
.readout .tag{grid-area:tag}.readout .num{grid-area:num}.readout .word{grid-area:word}.readout .why{grid-area:why}.readout .ctl{grid-area:ctl}
.readout .tag{display:flex;justify-content:space-between;gap:12px;font-size:13px;font-weight:600;color:var(--mute)}
.readout .num{font-size:clamp(72px,7vw,108px);line-height:.9;font-weight:750;letter-spacing:-.05em;color:var(--lvt);transition:color .4s}
.readout .ctl{flex-wrap:nowrap;margin-top:8px}
.sbody-note{margin:var(--s1) 0 0;font-size:13px;color:var(--fg);text-shadow:0 0 8px rgba(255,255,255,.9)}
/* phone view: tall phone-shaped frame, the card stands beside it */
.sbody.phone{flex-direction:row;align-items:center;gap:var(--s3)}
.sbody.phone .device{flex:none;height:min(500px,56vh);width:auto;aspect-ratio:520/1125;padding:10px;border-radius:44px}
.sbody.phone .device img{border-radius:34px;object-fit:cover}
.sbody.phone .readout{flex:1;min-width:0;margin:0;display:block}
.sbody.phone .readout .num{display:block;margin-top:8px}
.sbody.phone .readout .ctl{flex-wrap:wrap}
.readout .num.none{font-weight:200}
.readout .word{font-size:var(--f3);font-weight:700;color:var(--lvt)}
.readout .why{font-size:var(--f1);min-height:2.8em;color:var(--fg)}
.sbody.phone .readout .why{min-height:6.6em}
.ctl{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.chip-btn{min-height:44px;padding:0 14px;border-radius:var(--r-pill);border:1px solid var(--glass-line);background:rgba(255,255,255,.7);font-size:14px;font-weight:600}
.chip-btn:hover{background:#fff}
@media (max-width:900px){
  #hero{min-height:auto}
  .veil{background:linear-gradient(180deg,rgba(255,255,255,.9) 0%,rgba(255,255,255,.76) 55%,rgba(255,255,255,.3) 100%)}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--s5);padding-top:calc(var(--header) + 48px);padding-bottom:96px}
  .sbody.phone{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .sbody.phone .device{align-self:center;height:min(440px,58svh)}
  .sbody.phone .readout{display:grid}
  .sbody.phone .readout .num{font-size:clamp(64px,6vw,96px)}
}
@media (max-width:600px){.readout{padding:14px 16px}.readout .ctl{gap:6px}.readout .chip-btn{padding:0 10px;font-size:13px}.sbody.phone .readout .ctl{flex-wrap:wrap}}

/* ---------- level chip band ---------- */
#band{position:relative;z-index:2;margin-top:-56px}
.band{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s4);align-items:center;padding:var(--s3) var(--s3) var(--s3) var(--s4)}
.band h2{font-size:var(--f3);letter-spacing:-.015em}
.band p{font-size:var(--f1);color:var(--mute);margin-top:4px;max-width:56ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips button,.lvbtns button{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 20px 0 16px;border-radius:var(--r-pill);border:1px solid var(--glass-line);background:#fff;font-weight:650;transition:transform .2s var(--ease),box-shadow .2s}
.chips button::before,.lvbtns button::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c)}
.chips button:hover,.lvbtns button:hover{transform:translateY(-1px)}
.chips button[aria-pressed="true"],.lvbtns button[aria-pressed="true"]{background:var(--fg);color:#fff;border-color:var(--fg)}
@media (max-width:900px){.band{grid-template-columns:minmax(0,1fr);padding:var(--s3)}#band{margin-top:-32px}}

/* ---------- chapters ---------- */
.chapter{padding:var(--s8) 0}
.chapter.field{background:var(--field)}
@media (max-width:900px){.chapter{padding:var(--s7) 0}}
.chead{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);margin-bottom:var(--s6)}
.chead h2{font-size:var(--f5);line-height:1.04;letter-spacing:-.035em;max-width:16em}
html[lang^=zh] .chead h2{line-height:1.2;letter-spacing:-.01em}
.chead .lead{margin-top:var(--s2);font-size:var(--f2);max-width:56ch;color:var(--mute)}

/* A: problem + pinned story */
.problem{margin-bottom:var(--s8)}
.p-h{font-size:var(--f4);line-height:1.15;max-width:22em}
.problem ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);margin-top:var(--s5)}
.problem li{padding-top:var(--s3);border-top:3px solid var(--fg);font-size:var(--f2);max-width:34ch}
@media (max-width:900px){.problem ul{grid-template-columns:minmax(0,1fr);gap:var(--s3)}}
.story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:start}
.steps>li{min-height:50vh;display:flex;flex-direction:column;justify-content:center;gap:var(--s2);transition:opacity .4s}
.steps>li:first-child{min-height:40vh}
.steps>li:last-child{min-height:60vh}
.js .steps>li:not(.on){color:var(--mute)}
.js .steps>li:not(.on) .k::before{background:var(--line)}
.steps h3{font-size:var(--f4);letter-spacing:-.025em}
.steps p{max-width:32ch;font-size:var(--f3);line-height:1.4}
.steps .k{display:inline-flex;align-items:center;gap:10px;font-size:var(--f1);font-weight:650;color:var(--mute)}
.steps .k::before{content:"";width:28px;height:3px;border-radius:2px;background:var(--lv)}
.lvrows{display:grid;gap:12px;margin-top:var(--s1)}
.lvrows li{padding:12px 16px 12px 18px;border-radius:16px;background:var(--field);border-left:4px solid var(--c)}
.lvrows b{color:var(--ct)}
.lvrows span{display:block;font-size:var(--f1);color:var(--fg)}
.pin{position:sticky;top:calc(50vh - 230px)}
.diagram{margin:0;padding:var(--s4)}
.diagram svg{width:100%;height:auto}
.node rect{fill:#fff;stroke:var(--line);stroke-width:1.5;transition:fill .4s,stroke .4s}
.node .t1{font:700 20px var(--sans);fill:var(--fg)}
.node .t2{font:400 15px var(--sans);fill:var(--mute)}
.wire{fill:none;stroke:var(--line);stroke-width:3;stroke-linecap:round;transition:stroke .4s}
.wire.dash{stroke-dasharray:4 8}
.lbl{font:600 14px var(--sans);fill:var(--mute)}
.node.on rect{fill:color-mix(in srgb,var(--lv) 16%,#fff);stroke:var(--lv);stroke-width:2.5}
.wire.on{stroke:var(--fg)}
.dg-num{display:flex;align-items:baseline;justify-content:space-between;margin-top:var(--s2);padding-top:var(--s2);border-top:1px solid var(--line);font-size:var(--f1);font-weight:600;color:var(--mute)}
.dg-num b{font-size:56px;line-height:1;font-weight:750;letter-spacing:-.04em;color:var(--lvt)}
@media (max-width:900px),(prefers-reduced-motion:reduce){
  .story{grid-template-columns:minmax(0,1fr);gap:var(--s5)}
  .pin{position:static;order:-1}
  .steps>li,.steps>li:first-child,.steps>li:last-child{min-height:0;padding:var(--s3) 0}
  .js .steps>li:not(.on){color:inherit}
  .node rect{fill:color-mix(in srgb,var(--lv) 10%,#fff)}
  .wire{stroke:var(--mute)}
}

/* B: three screens carousel */
.lvbtns{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:var(--s3)}
.car{position:relative;padding:0;overflow:hidden;touch-action:pan-y}
.track{display:flex;transition:transform .6s var(--ease)}
.track{align-items:flex-start}
.slide{flex:0 0 100%;margin:0;min-width:0;padding:12px 12px 4px}
.frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--ink)}
.frame img,.frame video{width:100%;height:100%;object-fit:cover}
.frame.phone{display:flex;justify-content:center;padding:20px;box-sizing:border-box;background:linear-gradient(135deg,#f4f6f9,#e6ecf2)}
.frame.phone img{width:auto;height:100%;min-height:0;aspect-ratio:520/1125;object-fit:cover;border-radius:26px;border:5px solid #fff;box-shadow:0 18px 44px -14px rgba(14,17,22,.35)}
.prog{display:flex;gap:6px;padding:8px 24px 12px}
.prog i{flex:1;height:3px;border-radius:3px;background:var(--line);overflow:hidden;position:relative}
.prog i::after{content:"";position:absolute;inset:0;background:var(--fg);transform-origin:left;transform:scaleX(var(--p,0))}
.no-auto .prog{display:none}
#autoBtn[aria-pressed="true"] .ig,#autoBtn[aria-pressed="false"] .ip{display:none}
.slide figcaption{padding:16px 12px 6px;font-size:var(--f1);color:var(--fg);max-width:80ch}
.slide figcaption b{margin-right:6px}
.carctl{display:flex;align-items:center;gap:8px;width:fit-content;max-width:100%;margin:var(--s3) auto 0;padding:6px;border-radius:var(--r-pill)}
.arrow{display:grid;place-items:center;width:48px;height:48px;border:0;border-radius:50%;background:var(--fg);color:#fff}
.arrow:hover{background:#2a313a}
.tabs{display:flex;gap:2px}
.tabs button{min-height:44px;padding:0 14px;border:0;border-radius:var(--r-pill);background:none;font-size:14px;font-weight:600}
.tabs button[aria-current="true"]{background:#fff;box-shadow:0 1px 3px rgba(14,17,22,.15)}
.count{min-width:4.5ch;text-align:center;font-size:14px;font-weight:650;color:var(--mute)}
@media (max-width:700px){.tabs{display:none}.slide{padding:6px 6px 2px}.frame{border-radius:12px}.frame.phone{aspect-ratio:auto;height:460px}.frame.phone{padding:14px}.prog{padding:6px 14px 10px}}

/* C: voice copilot */
.duo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s7);align-items:center}
.duo .chead{margin-bottom:var(--s3)}
.duo .note{margin-top:var(--s3)}
.transcript{padding:var(--s4);background-color:var(--field)}
.transcript .ex{font-size:13px;font-weight:650;color:var(--mute)}
.transcript ul{display:grid;gap:var(--s2);margin:var(--s3) 0}
.transcript li{display:grid;gap:4px;max-width:88%}
.transcript li:nth-child(even){justify-self:end;text-align:right}
.transcript li b{font-size:13px;color:var(--mute);font-weight:650}
.transcript li span{padding:14px 18px;border-radius:20px 20px 20px 6px;background:#fff;box-shadow:0 1px 2px rgba(14,17,22,.08);text-align:left}
.transcript li:nth-child(even) span{border-radius:20px 20px 6px 20px;background:var(--fg);color:#fff}
.ro{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 18px;border-radius:16px;background:var(--lime);color:var(--lime-ink);font-weight:550}
.ro b{font-weight:750}
@media (max-width:900px){.duo{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* D: privacy, large statements */
.vows{display:grid;gap:var(--s5)}
.vows li{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s3);align-items:start}
.vows svg{width:56px;height:56px}
.vows h3{font-size:var(--f3);line-height:1.25;letter-spacing:-.025em}
.vows p{margin-top:var(--s1);color:var(--mute);max-width:60ch}
#privacy .note{margin-top:var(--s6);padding-top:var(--s3);border-top:1px solid var(--line)}
@media (max-width:600px){.vows li{grid-template-columns:40px minmax(0,1fr);gap:var(--s2)}.vows svg{width:40px;height:40px}}

/* E: evidence, dark, hairline grid + limits */
.dark{background:var(--ink);color:var(--on-ink)}
.dark .sub{font-size:var(--f2);font-weight:650;color:var(--on-ink-mute);letter-spacing:0;margin-bottom:var(--s3)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink-line);border-left:1px solid var(--ink-line)}
.fact{min-width:0;padding:var(--s4);border-right:1px solid var(--ink-line);border-bottom:1px solid var(--ink-line)}
.fact .v{font-size:clamp(40px,3.4vw,64px);line-height:1;font-weight:750;letter-spacing:-.035em;color:var(--c,var(--on-ink));overflow-wrap:anywhere}
.fact .k{margin-top:var(--s2);font-weight:650}
.fact .c{margin-top:var(--s1);font-size:var(--f1);color:var(--on-ink-mute)}
@media (max-width:1000px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.facts{grid-template-columns:minmax(0,1fr)}.fact{padding:var(--s3)}}
.limits{margin-top:var(--s7);padding:var(--s6);border-radius:var(--r-panel);background:#fff;color:var(--fg);border-left:10px solid var(--alert)}
.limits h3{font-size:var(--f5);line-height:1.04;letter-spacing:-.035em}
.limits ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s3) var(--s4);margin:var(--s5) 0 var(--s4)}
.limits li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:12px;font-size:var(--f2);font-weight:550;line-height:1.45}
.limits li::before{content:"";width:14px;height:3px;margin-top:.7em;border-radius:2px;background:var(--alert-t)}
.limits .tlink{color:var(--link)}
@media (max-width:1000px){.limits ul{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.limits{padding:var(--s4) var(--s3);border-left-width:6px}}

/* team and lab */
.crew{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s7);align-items:end}
.crew .chead{margin-bottom:var(--s4)}
.by{font-size:var(--f3);line-height:1.4;font-weight:600;max-width:30em;margin-bottom:var(--s4)}
.affil{padding-top:var(--s3);border-top:1px solid var(--line);display:grid;gap:4px;max-width:40em}
.crew p{margin-top:var(--s1)}
.lab{padding:var(--s5) var(--s4);display:grid;gap:var(--s3);background-color:var(--field)}
.lab address{font-style:normal;display:grid;gap:var(--s1);font-size:var(--f1)}
.lab strong{font-size:var(--f2)}
.lab .labname{display:inline-flex;align-items:center;min-height:44px;color:var(--link);text-underline-offset:4px}
.lab .labname:hover{text-decoration-thickness:2px}
@media (max-width:900px){.crew{grid-template-columns:minmax(0,1fr);gap:var(--s5)}}

/* footer: dark directory */
.foot{background:var(--ink);color:var(--on-ink);padding:var(--s7) 0 var(--s5)}
.foot-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s3);padding-bottom:var(--s5);border-bottom:1px solid var(--ink-line)}
.fbrand{font-size:var(--f5);font-weight:750;letter-spacing:-.04em;line-height:1}
.fline{color:var(--on-ink-mute);max-width:32ch}
.dir{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s4);padding:var(--s5) 0}
.dir h2{font-size:var(--f1);font-weight:650;color:var(--on-ink-mute);letter-spacing:0;margin-bottom:var(--s1)}
.dir a{display:flex;align-items:center;min-height:44px;color:var(--on-ink);text-decoration:none;font-weight:550}
.dir a:hover{color:var(--lime)}
.base{padding:var(--s4) 0;border-top:1px solid var(--ink-line);font-size:var(--f1);color:var(--on-ink-mute)}
.base p+p{margin-top:4px}
.base .sim{color:var(--on-ink);font-weight:600}
.legal{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--s3);padding-top:var(--s3);border-top:1px solid var(--ink-line);font-size:var(--f1);color:var(--on-ink-mute)}
.legal p:nth-child(2){text-align:center}
.legal a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-ink);text-underline-offset:4px}
.foot .lang{background:rgba(255,255,255,.08)}
.foot .lang button{color:var(--on-ink)}
.foot .lang button[aria-pressed="true"]{background:#fff;color:var(--fg)}
@media (max-width:900px){.dir{grid-template-columns:repeat(2,minmax(0,1fr))}.legal{grid-template-columns:minmax(0,1fr);justify-items:start}.legal p:nth-child(2){text-align:left}}
/* short laptop screens: keep the demo card inside the first screen */
@media (min-width:901px) and (max-height:820px){.hero-grid{padding-top:calc(var(--header) + 24px);padding-bottom:24px}.seg{margin-bottom:8px}.readout{margin-top:var(--s2);padding:8px 20px}.readout .ctl{margin-top:4px}.sbody:not(.phone) .readout .why{min-height:1.5em}}