/* ============================================================
   NanoInsure v3 — Auros style reference
   Abyssal terminal: teal surface stack, no shadows, depth by
   surface colour. Two weights only (400/500). Cards 16px,
   buttons 6px, and nothing else.
   Matter is not licensed here; DM Sans is the guide's own
   geometric-grotesk substitute.
   ============================================================ */
:root{
  --abyss:#012624; --deep:#011d1c; --kelp:#003734;
  --mist:#edfffe; --platinum:#fff; --silver:#bbc7c6; --ash:#f2f2f2;
  --slate:#707777; --phosphor:#fde9ff;
  --aurora:linear-gradient(90deg,#cbfffc 0%,#edfffe 26.25%,#fffdfa 47.57%,#fad1ff 88.96%);
  --biolum:linear-gradient(90deg,#00827c 0%,#cbfffc 100%);
  --font:'DM Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  --max:1440px; --gap:68px;
  --r-card:16px; --r-small:6px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--abyss);color:var(--silver);font-family:var(--font);
  font-weight:400;font-size:16px;line-height:1.4;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
a{color:var(--silver);text-decoration:none}
h1,h2,h3{color:var(--platinum);font-weight:500;line-height:1}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:40px}
@media(max-width:700px){.wrap{padding-inline:20px}}

/* eyebrow — wide tracking is the signature instrumentation label */
.kicker{display:block;font-size:12px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--silver)}
.kicker-mist{color:var(--mist)}

/* nav */
.nav{position:sticky;top:0;z-index:50;height:80px;display:flex;align-items:center;
  background:rgba(1,38,36,.82);backdrop-filter:blur(14px)}
.nav-in{display:flex;align-items:center;gap:24px;width:100%}
.nav-brand{display:inline-flex;align-items:center;gap:10px;flex:none}
.nav-brand img{height:24px;width:auto}
.nav-links{display:flex;gap:16px;margin-inline:auto}
.nav-links a{font-size:12px;font-weight:400;letter-spacing:.12em;text-transform:uppercase}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--platinum)}
@media(max-width:900px){.nav-links{display:none}}

/* the one gradient gesture on the page */
.btn-aurora{display:inline-flex;align-items:center;justify-content:center;
  background:var(--aurora);color:#222;border-radius:var(--r-small);
  padding:14px 22px;font-size:14px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap;border:0;cursor:pointer}
.btn-aurora:hover{filter:brightness(1.08) saturate(1.12)}
.btn-kelp{display:inline-flex;align-items:center;justify-content:center;
  background:var(--kelp);color:var(--platinum);border-radius:var(--r-small);
  padding:14px 22px;font-size:14px;font-weight:500;letter-spacing:.06em;
  text-transform:uppercase;white-space:nowrap}
.btn-kelp:hover{background:#00534e;box-shadow:inset 0 0 0 1px rgba(150,232,229,.45)}
.btn-aurora,.btn-kelp{transition:filter .2s,background-color .2s,box-shadow .2s,transform .12s}
.btn-aurora:active,.btn-kelp:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.btn-aurora,.btn-kelp{transition:none}}

.hero-cta{display:flex;gap:16px;justify-content:center;margin-top:40px;flex-wrap:wrap}

/* carrier band — chips so the marks keep their true colours on the abyss */
.carriers{padding-block:120px}
.carrier-row{display:flex;align-items:center;gap:20px;margin-top:40px;flex-wrap:wrap}
/* equal chips: the marks range from 1.2:1 to 10:1, so sizing by height alone
   gives wildly different widths. Equal flex basis plus contain keeps the row
   tidy and every logo at its true colour. */
.chip{background:var(--mist);border-radius:var(--r-card);
  padding:20px 24px;display:flex;align-items:center;justify-content:center;
  flex:1 1 0;min-width:0;height:104px}
.chip img{max-height:100%;max-width:100%;width:auto;height:auto;object-fit:contain}
@media(max-width:860px){
  .carrier-row{gap:14px}
  .chip{height:76px;padding:14px 16px;flex:1 1 40%}
}

/* statistics — pink is punctuation, never body */
.stats{padding-block:0 120px}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px}
.stat b{display:block;font-size:clamp(40px,5.6vw,86px);font-weight:500;
  line-height:1;letter-spacing:-.046em;color:var(--phosphor)}
.stat span{display:block;margin-top:14px;font-size:13px;letter-spacing:.055em;
  text-transform:uppercase;color:var(--mist)}
.stat .pending{display:block;margin-top:10px;font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--silver)}
@media(max-width:900px){.stat-grid{grid-template-columns:1fr 1fr;gap:32px}}

/* explore — asymmetric: cards left, molecular diagram right */
.explore{padding-block:120px;border-top:1px solid rgba(255,255,255,.08)}
.explore-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:80px;align-items:start;margin-top:48px}
@media(max-width:1000px){.explore-grid{grid-template-columns:1fr;gap:48px}}
.frow{display:flex;align-items:flex-start;gap:24px;
  padding:48px 36px;border-top:1px solid rgba(255,255,255,.08)}
.frow:first-child{border-top:0;padding-top:0}
@media(max-width:700px){
  /* the row's own 36px gutters sit inside the wrap's, which overflows 360 */
  .frow{padding:32px 0;gap:16px}
  .frow h3{font-size:26px}
  .explore h2{font-size:clamp(28px,7vw,40px)!important}
}
.frow-body{flex:1 1 auto}
.frow h3{font-size:36px;letter-spacing:-.02em}
.frow p{margin-top:16px;font-size:16px;color:var(--silver);max-width:52ch}
.arrow{flex:none;width:32px;height:32px;border-radius:var(--r-small);
  background:rgba(3,81,75,.5);display:grid;place-items:center;color:var(--platinum)}
.arrow:hover{background:rgba(3,81,75,.9)}
.molecule{width:100%;height:auto}

/* surface card + recessed well */
.card{background:var(--kelp);border-radius:var(--r-card);padding:36px}
.card h3{font-size:36px}
.card p{margin-top:16px;color:var(--silver)}
.well{background:var(--deep);border-radius:var(--r-card);padding:120px 36px;text-align:center}
.well h2{font-size:clamp(32px,4.4vw,61px);letter-spacing:-.04em;max-width:22ch;margin-inline:auto}
.well p{margin:24px auto 0;max-width:56ch;color:var(--silver)}
.well .hero-cta{margin-top:40px}
.closing{padding-block:0 120px}

/* footer — the deep pool */
.foot{background:var(--deep);padding-block:120px 64px;margin-top:0}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:40px}
.foot h4, .foot h4 a{font-size:10px;font-weight:500;letter-spacing:.15em;text-transform:uppercase;
  color:var(--mist);margin-bottom:18px}
.foot a{display:block;font-size:14px;margin-bottom:10px}
.foot a:hover{color:var(--platinum)}
.foot-note{margin-top:64px;padding-top:28px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;
  font-size:13px;color:var(--silver)}
@media(max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}}

.preview-bar{background:var(--kelp);color:var(--mist);text-align:center;
  padding:10px 16px;font-size:12px;letter-spacing:.06em}
.vh{position:absolute;left:-9999px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============================================================
   Homepage · Deep-Water Terminal
   ============================================================ */
:root{--paper:#F4F1EA;--line:#DAD4C8;--ink:#0B0F14;--tmute:#55606C}
.skip{position:absolute;left:-999px;top:8px;z-index:99;background:#fff;color:#111;padding:10px 14px;border-radius:6px}
.skip:focus{left:12px}
:focus-visible{outline:2px solid #96e8e5;outline-offset:3px}
.nav{transition:background .35s}
.nav.light{background:rgba(244,241,234,.9)}
.nav .wm-l{display:none}
.nav.light .wm-d{display:none}.nav.light .wm-l{display:block}
.nav.light .nav-links a{color:var(--tmute)}.nav.light .nav-links a:hover{color:var(--ink)}
.mono{font-family:'DM Mono',monospace}
.sec{padding-block:120px}
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(32px,4.4vw,61px);letter-spacing:-.04em;max-width:18ch;margin-top:20px}


/* carriers: a paper interlude — the marks keep their own colours on the
   ground they were designed for */
.carriers{background:var(--paper);color:#1D2530;padding-block:100px}
.carriers .kicker{color:var(--tmute)}
.carriers h2{color:var(--ink);font-size:clamp(30px,3.6vw,52px);letter-spacing:-.04em;max-width:20ch;margin-top:18px}
.logos{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
  margin-top:48px;padding-block:44px;border-block:1px solid var(--line)}
.logos img{height:56px;width:auto}.logos img.w{height:25px}.logos img.t{height:70px}
.cfigs{display:grid;grid-template-columns:repeat(4,1fr);gap:32px;margin-top:48px}
.cfigs b{display:block;font-size:clamp(40px,4.8vw,72px);font-weight:500;letter-spacing:-.046em;line-height:1;color:var(--ink)}
.cfigs span{display:block;margin-top:12px;font-size:13px;letter-spacing:.055em;text-transform:uppercase;color:var(--tmute)}
.cfigs .pending{margin-top:8px;font:500 10px 'DM Mono',monospace;letter-spacing:.12em;color:#8A5A00}
@media(max-width:900px){.cfigs{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.logos{gap:26px 32px;justify-content:flex-start}.logos img{height:36px}.logos img.w{height:17px}.logos img.t{height:46px}}

/* terminal: product instruments on kelp */
.illus{font:400 11px/1.4 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--silver)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:48px}
.inst{background:var(--kelp);border-radius:16px;padding:28px;min-width:0}
.i-pos{grid-column:span 5}.i-dms{grid-column:span 7}.i-life{grid-column:span 7}.i-uni{grid-column:span 5}
@media(max-width:1000px){.i-pos,.i-dms,.i-life,.i-uni{grid-column:span 12}}
@media(max-width:700px){.inst{padding:20px}}
.i-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.i-top b{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.i-top span{font:400 11px 'DM Mono',monospace;color:var(--silver)}
.i-title{margin-top:18px;font-size:24px;font-weight:500;color:#fff;letter-spacing:-.02em}
.q-row{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px}
.q-row em{font-style:normal;color:#fff}
.q-prem{margin-top:18px;font-size:34px;font-weight:400;letter-spacing:-.03em;color:var(--phosphor)}
.steps{display:flex;gap:6px;margin-top:18px}
.steps i{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.1);transition:background .4s}
.steps i.on{background:#96e8e5}
.step-l{display:flex;justify-content:space-between;margin-top:8px;font:400 10px 'DM Mono',monospace;letter-spacing:.06em;text-transform:uppercase;color:var(--silver)}
.led-wrap{overflow-x:auto}
.led{width:100%;min-width:420px;border-collapse:collapse;margin-top:14px;font-size:14px}
.led th{text-align:left;font:400 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);padding:8px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.led td{padding:11px 0;border-bottom:1px solid rgba(255,255,255,.05)}
.led td:last-child,.led th:last-child{text-align:right}
.led tr.hot td{color:var(--phosphor)}
.lanes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:18px}
.lane h5{font:400 10px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);margin-bottom:10px}
.ticket{background:rgba(1,29,28,.7);border-radius:6px;padding:10px 12px;margin-bottom:8px;font-size:13px;color:var(--mist)}
.ticket span{display:block;font:400 10px 'DM Mono',monospace;color:var(--silver);margin-top:3px}
.rule{margin-top:18px;background:rgba(1,29,28,.7);border-radius:6px;padding:14px;font:400 13px/1.5 'DM Mono',monospace;color:var(--mist);overflow-wrap:anywhere}
.chan{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);font-size:14px}
.tick{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);transition:all .35s}
.tick.on{background:#96e8e5;border-color:#96e8e5}

/* product index: one row per product, grouped by where it sits on the mark */
.pidx{border-top:1px solid rgba(255,255,255,.08)}
.pgrp{display:grid;grid-template-columns:220px 1fr;gap:40px;padding-block:44px;border-bottom:1px solid rgba(255,255,255,.08)}
.pgrp>.kicker{padding-top:10px}
.prow{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr) 32px;gap:24px;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.05)}
.prow:first-child{border-top:0}
.prow h3{font-size:26px;letter-spacing:-.02em}
.prow p{color:var(--silver);font-size:15px}
a.prow:hover h3{color:#96e8e5}
.prow .arrow{visibility:hidden}a.prow .arrow{visibility:visible}
@media(max-width:860px){.pgrp{grid-template-columns:1fr;gap:10px}.prow{grid-template-columns:1fr 32px;gap:6px 16px}.prow p{grid-column:1}.prow .arrow{grid-row:1/3;grid-column:2}}

/* stories: case files */
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:48px}
.case{background:var(--kelp);border-radius:16px;padding:28px;display:flex;flex-direction:column;gap:10px;transition:background .25s}
.case:hover{background:#004541}
.case .id{font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--silver)}
.case .m{font-size:56px;font-weight:500;letter-spacing:-.046em;line-height:1;color:var(--phosphor);margin-top:8px}
.case h3{font-size:19px;letter-spacing:-.01em;line-height:1.25}
.case p{font-size:14.5px;color:var(--silver);line-height:1.5}
.case .go{margin-top:auto;padding-top:12px;font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
@media(max-width:1000px){.cases{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.cases{grid-template-columns:1fr}}

/* company */
.co-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:20px;margin-top:48px}
.co-grid .card{grid-column:span 6}
.co-grid .card.s4{grid-column:span 4;padding:28px}
.card .role{margin-top:10px;font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#96e8e5}
.card h3{font-size:30px;letter-spacing:-.02em}
.card.s4 b{font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.card.s4 p{font-size:15px;margin-top:12px}
@media(max-width:900px){.co-grid .card,.co-grid .card.s4{grid-column:span 12}}

/* contact: the recessed well holds the form */
.well{text-align:left;padding:80px 56px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:56px;align-items:start}
.well h2{margin-inline:0;max-width:14ch}
.well p{margin-inline:0}
@media(max-width:900px){.well{grid-template-columns:1fr;padding:48px 22px;gap:36px}}
.frm{display:grid;gap:14px}
.fld{display:grid;gap:6px}
.fld label{font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.req{color:var(--silver);letter-spacing:.04em;text-transform:none}
.fld input,.fld textarea{font:inherit;font-size:16px;color:#fff;background:var(--kelp);border:1px solid transparent;border-radius:6px;padding:12px 14px}
.fld input:focus,.fld textarea:focus{outline:none;border-color:#96e8e5}
.fld [aria-invalid=true]{border-color:#F4A596}
.frm .btn-aurora{justify-self:start}
.frm-result p,.fine{font-size:14px}.ok{color:#96e8e5}.bad{color:#F4A596}.bad a{text-decoration:underline}
.fine{color:var(--silver)}

.abx{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;gap:4px;align-items:center;background:var(--deep);
  border:1px solid rgba(255,255,255,.12);border-radius:6px;padding:5px 6px 5px 12px;font:400 11px 'DM Mono',monospace;color:var(--silver)}
.abx a,.abx b{padding:5px 9px;border-radius:4px;color:var(--mist)}
.abx b{background:var(--aurora);color:#222;font-weight:500}
@media(max-width:760px){.abx{position:static;margin:0 20px 24px;width:max-content}}
section[id]{scroll-margin-top:80px}

/* the stage — one pinned canvas (../v2/stage.js); the hero copy and four chapters take turns over it */
.stage{position:relative;height:550vh;--hero:1}
.stage-pin{position:sticky;top:0;height:100dvh;overflow:hidden}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
/* ---- hero: the stage's first screen ---------------------------------------------------------
   One block for every size. Desktop: the copy is centred in the space under the 80px header, in a
   left column the ribbon may pass behind (stage.js fades its dots there). Stacked (≤900px): the mark
   sits above and the copy below (stage.js keeps the mark clear of it). Short landscape: side by side. */
.hero-in{position:absolute;left:0;right:0;bottom:0;padding-bottom:calc(8vh + 116px);z-index:2;max-width:var(--max);margin:0 auto;
  opacity:var(--hero);transform:translateY(calc((1 - var(--hero)) * -8vh))}
.stage.past-hero .hero-in{pointer-events:none}
.hero-in h1{font-size:clamp(40px,5vw,76px);line-height:1.02;letter-spacing:-.04em;max-width:17ch;text-wrap:balance}
.hero-in p{margin-top:24px;max-width:48ch;font-size:16px;color:var(--silver)}
.hero-in .hero-cta{justify-content:flex-start;margin-top:34px}
html:is([lang^="zh"],[lang="ja"]) .hero-in h1{line-height:1.18;max-width:12.5em}
html[lang^="zh"] .hero-in h1{word-break:keep-all;overflow-wrap:anywhere}   /* break at the spaces around "AI" before splitting a word */
@media(min-width:901px) and (min-height:501px){
  .hero-in{top:0;bottom:calc(80px + 7vh);display:flex;flex-direction:column;justify-content:center;padding-bottom:0}
  .hero-in h1{font-size:clamp(38px,4.4vw,66px);max-width:min(620px,calc(44vw - 40px))}
  .hero-in p{font-size:17px;max-width:min(520px,calc(44vw - 40px))}
  html[lang="ja"] .hero-in h1{font-size:clamp(30px,3.3vw,54px);max-width:min(620px,calc(44vw - 40px))}
  html[lang^="zh"] .hero-in h1{font-size:clamp(34px,4vw,60px);max-width:min(620px,calc(44vw - 40px))}
}
@media(max-width:900px){
  .hero-in{padding:0 20px calc(3vh + 132px)}
  .hero-in h1{font-size:clamp(32px,9vw,40px)}
  .hero-in p{font-size:15px;margin-top:14px}
  .hero-in .hero-cta{margin-top:20px;gap:10px}
  html[lang="ja"] .hero-in h1{font-size:clamp(26px,7.4vw,36px)}
}
@media(min-width:600px) and (max-width:900px) and (min-height:501px){   /* portrait tablets: tablet-sized type */
  .hero-in h1{font-size:clamp(40px,6.4vw,56px)}
  html[lang="ja"] .hero-in h1{font-size:clamp(34px,5.2vw,46px)}
  .hero-in p{font-size:17px;margin-top:18px}
  .hero-in .hero-cta{margin-top:26px;gap:12px}
}
@media (max-height:500px) and (orientation:landscape){   /* the stage starts under the 56px header */
  .hero-in{padding:0 20px 28px;bottom:56px;max-width:55%;margin:0}
  .hero-in h1{font-size:clamp(24px,4.2vw,34px)}
  .hero-in p{font-size:13.5px;margin-top:10px}
  .hero-in .hero-cta{margin-top:14px;flex-wrap:nowrap}
}
.chs{position:absolute;inset:0;pointer-events:none;max-width:var(--max);margin:0 auto}
.ch{position:absolute;top:50%;width:min(40%,540px);opacity:0;transform:translateY(calc(-50% + 24px));pointer-events:none;
  transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.ch.left{left:40px}.ch.right{right:40px}
.ch.on{opacity:1;transform:translateY(-50%);pointer-events:auto;transition-delay:.2s}
.ch h2{font-size:clamp(32px,3.8vw,56px);letter-spacing:-.04em;margin-top:18px;max-width:14ch}
.ch>p{margin-top:20px;max-width:46ch;color:var(--silver)}
.mod-cta{margin-top:28px}
.plist{margin-top:24px;border-top:1px solid rgba(255,255,255,.08)}
.plist .prow{grid-template-columns:minmax(0,200px) minmax(0,1fr) 32px;padding:14px 0}
.plist .prow h3{font-size:21px}
.st-rail{position:absolute;left:50%;bottom:26px;translate:-50% 0;display:flex;gap:6px;z-index:3;opacity:calc(1 - var(--hero))}
.stage:not(.past-hero) .st-rail{pointer-events:none}
.st-rail a{font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--silver);padding:10px 12px 8px;border-top:2px solid rgba(255,255,255,.14);transition:color .3s,border-color .3s}
.st-rail a.on{color:var(--mist);border-color:#96e8e5}
@media(max-width:900px){
  .stage{height:520vh}
  .ch,.ch.left,.ch.right{left:20px;right:20px;width:auto;top:auto;bottom:74px;transform:translateY(24px)}
  .ch.on{transform:none}
  .ch h2{font-size:clamp(28px,7.6vw,40px);margin-top:10px}
  .ch>p{font-size:15px;margin-top:12px}
  .plist{margin-top:12px}
  .plist .prow{grid-template-columns:1fr 32px;padding:9px 0}
  .plist .prow p{display:none}
  .mod-cta{margin-top:16px}
  .st-rail{left:20px;right:20px;translate:none;justify-content:space-between;bottom:14px;gap:4px}
  .st-rail a{font-size:9.5px;padding:8px 2px 4px;flex:1;text-align:center}
}
@media(max-height:700px) and (max-width:900px){.ch>p{display:none}}
@media(prefers-reduced-motion:reduce){.ch,.hero-in{transition:none}}
/* Higgsfield loops and the explainer */
.term{position:relative}
.term-film{position:absolute;inset:0 0 auto 0;height:520px;pointer-events:none;overflow:hidden;z-index:0}
.term-film video{width:100%;height:100%;object-fit:cover;opacity:.55}
.term-film::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(1,38,36,.35),var(--abyss) 92%)}
.term>*:not(.term-film){position:relative;z-index:1}
.watch-frame{margin-top:48px;border-radius:var(--r-card);overflow:hidden;background:var(--deep);aspect-ratio:16/9}
.watch-frame video{width:100%;height:100%;display:block}
.well{position:relative;overflow:hidden}
.well-film{position:absolute;inset:0;pointer-events:none}
.well-film video{width:100%;height:100%;object-fit:cover;opacity:.5}
.well-film::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(1,29,28,.95) 0%,rgba(1,29,28,.7) 55%,rgba(1,29,28,.9) 100%)}
.well>*:not(.well-film){position:relative}
/* company: facts only now */
@media(min-width:901px){.co-grid .card.s4{grid-column:span 4}}
/* header atom */
.atom{width:44px;height:26px;color:#96e8e5;overflow:visible;flex:none}
.atom path{stroke-opacity:.5}
.atom .nuc{fill:#fde9ff}.atom .e{fill:#fff}.atom .e2{fill:#96e8e5}
.nav.light .atom{color:#00827c}.nav.light .atom .e{fill:#00827c}.nav.light .atom .nuc{fill:#0B0F14}
@media(max-width:420px){.nav-in{gap:12px}.nav .btn-aurora{padding:10px 12px;font-size:12px}.nav-brand img{height:18px}.nav-brand .atom{width:34px}}
@media(max-width:420px){.nav .btn-aurora{letter-spacing:.02em;padding:10px}}
/* the Infinite N lockup */
.nav-brand .lk{height:30px;width:auto;display:block}
.nav-brand .lk-l{display:none}
.nav.light .nav-brand .lk-d{display:none}.nav.light .nav-brand .lk-l{display:block}
@media(max-width:420px){.nav-brand .lk{height:24px}}

/* recognition: awards on paper, each mark on the ground it was designed for */
.recog{background:var(--paper);color:#1D2530;padding-block:24px 110px}
.recog-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;padding-top:72px;border-top:1px solid var(--line)}
.recog h2{color:var(--ink);font-size:clamp(30px,3.6vw,52px);letter-spacing:-.04em;max-width:18ch;margin-top:18px}
.recog .kicker{color:var(--tmute)}
.recog-head p{max-width:40ch;color:#3A4450;font-size:16px}
.aw-wall{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:44px}
.aw{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 18px 18px;display:flex;flex-direction:column;align-items:center;gap:16px;min-height:200px}
.aw img{flex:1;width:100%;max-height:110px;object-fit:contain}
.aw span{font:500 10.5px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--tmute);text-align:center;line-height:1.4}
.aw-also{display:flex;align-items:center;gap:36px;flex-wrap:wrap;margin-top:40px;padding-top:32px;border-top:1px solid var(--line)}
.aw-also ul{list-style:none;display:flex;align-items:center;gap:clamp(24px,4vw,56px);flex-wrap:wrap}
.aw-also img{height:44px;width:auto;max-width:180px;object-fit:contain}
@media(max-width:1000px){.aw-wall{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){.aw-wall{grid-template-columns:repeat(2,minmax(0,1fr))}.aw{min-height:160px;padding:18px 12px 14px}.aw img{max-height:80px}.aw-also img{height:32px}}
.aw-also img.aw-lg{height:64px}@media(max-width:620px){.aw-also img.aw-lg{height:46px}}
.aw-also img{mix-blend-mode:multiply}

/* language switcher (tools/build_v3_i18n.py writes the links) */
.lang-switch{/*display:flex;*/display:none;align-items:center;gap:2px;margin-left:auto;margin-right:4px}
.nav-links + .lang-switch{margin-left:0}
.lang-switch a{font:500 12px/1 'DM Sans','Noto Sans TC','Noto Sans SC','Noto Sans JP',sans-serif;letter-spacing:.04em;color:var(--silver);
  padding:8px 7px;border-radius:4px;min-width:28px;text-align:center}
.lang-switch a:hover{color:var(--platinum);background:rgba(255,255,255,.06)}
.lang-switch a[aria-current]{color:var(--abyss);background:var(--mist)}
.nav.light .lang-switch a{color:#4a6765}.nav.light .lang-switch a[aria-current]{color:#fff;background:#012624}
@media(max-width:480px){.lang-switch{gap:0}.lang-switch a{padding:7px 4px;min-width:22px;font-size:11px}}

/* Chinese and Japanese: a matching sans for the glyphs DM Sans lacks, and no negative tracking */
html[lang^="zh-Hant"] body{font-family:'DM Sans','Noto Sans TC',sans-serif}
html[lang^="zh-Hans"] body{font-family:'DM Sans','Noto Sans SC',sans-serif}
html[lang="ja"] body{font-family:'DM Sans','Noto Sans JP',sans-serif}
html:is([lang^="zh"],[lang="ja"]) :is(h1,h2,h3,.q-prem,.m,.stat b,.cfigs b){letter-spacing:0}
html:is([lang^="zh"],[lang="ja"]) :is(h1,h2){line-height:1.18}
html:is([lang^="zh"],[lang="ja"]) body{line-height:1.7}
html:is([lang^="zh"],[lang="ja"]) .kicker,html:is([lang^="zh"],[lang="ja"]) .st-rail a{letter-spacing:.06em}
html:is([lang^="zh"],[lang="ja"]) :is(h1,h2){text-wrap:balance}
@media(max-width:380px){.nav-brand .lk{height:20px}.nav-in{gap:8px}}
.legal-note{margin-top:18px;padding:12px 14px;border-radius:6px;background:rgba(150,232,229,.08);color:var(--silver);font-size:14px;max-width:70ch}
@media(max-width:420px){.nav-brand .lk{height:21px}.nav-in{gap:8px}}
@media(max-width:380px){.nav-brand .lk{height:19px}}
.frm-privacy{font-size:13px;color:var(--silver)}
.frm-privacy a{color:var(--mist);text-decoration:underline}

/* ---------------------------------------------------------------- adapt: web and mobile (2026-10-01) */
/* Nothing may make the page scroll sideways. Causes are fixed at the source; this only keeps a
   future slip invisible. clip, not hidden: it creates no scroll container, so sticky still works. */
html{overflow-x:clip}

/* phone/tablet header: logo, Book a demo, menu. The menu sheet (nav.js) holds the links and languages. */
.nav-menu{display:none;width:44px;height:44px;flex:none;border:0;border-radius:var(--r-small);background:transparent;cursor:pointer;
  place-content:center;gap:6px;padding:0}
.nav-menu span{display:block;width:22px;height:2px;border-radius:1px;background:var(--mist);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.nav-menu[aria-expanded="true"] span:first-child{transform:translateY(4px) rotate(45deg)}
.nav-menu[aria-expanded="true"] span:last-child{transform:translateY(-4px) rotate(-45deg)}
.nav.light .nav-menu span{background:var(--ink)}
.nav-sheet{position:fixed;left:0;right:0;bottom:0;z-index:49;background:var(--abyss);overflow-y:auto;
  padding:12px 20px max(28px, env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:28px;
  animation:ns-in .26s cubic-bezier(.16,1,.3,1)}
.nav-sheet[hidden]{display:none}
@keyframes ns-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.ns-links{display:flex;flex-direction:column}
.ns-links a{display:flex;align-items:center;min-height:60px;font-size:26px;font-weight:500;letter-spacing:-.02em;color:var(--platinum);border-bottom:1px solid rgba(255,255,255,.08)}
.ns-links a[aria-current]{color:#96e8e5}
.ns-lang{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ns-lang a{display:grid;place-items:center;min-height:48px;border-radius:var(--r-small);background:var(--kelp);color:var(--mist);font-size:15px}
.ns-lang a[aria-current]{background:var(--mist);color:var(--abyss)}
.ns-cta{width:100%;min-height:52px;margin-top:auto}
html.menu-open,html.menu-open body{overflow:hidden}
@media(max-width:900px){
  .nav-menu{display:grid}
  .nav .lang-switch{display:none}
  .nav-in{gap:10px}
  .nav-brand{margin-right:auto}
}
@media(min-width:901px){.nav-sheet{display:none!important}}
html:is([lang^="zh"],[lang="ja"]) .ns-links a{letter-spacing:0}

/* touch: the rail and the footer links get real targets */
@media(pointer:coarse){
  .foot a{padding:7px 0;margin-bottom:2px}
  .lang-switch a{min-height:36px;/*display:inline-grid;*/display:none;place-items:center}
}
@media(max-width:900px){
  .st-rail a{min-height:44px;display:flex;align-items:center;justify-content:center;font-size:10.5px;padding:6px 2px}
}

/* the commission ledger fits a phone instead of scrolling sideways inside its card */
@media(max-width:600px){
  .led-wrap{overflow:visible}
  .led{min-width:0;font-size:13px}
  .led th:nth-child(2),.led td:nth-child(2){display:none}
  .led td:first-child{padding-right:8px}
}
@media(prefers-reduced-motion:reduce){.nav-sheet{animation:none}.nav-menu span{transition:none}}

/* phone landscape: short and wide, so the stage goes side by side like desktop, scaled down */
@media (max-height:500px) and (orientation:landscape){
  .nav{height:56px}
  .nav .btn-aurora{padding:9px 14px;font-size:12px}
  .ch,.ch.left,.ch.right{top:50%;bottom:auto;width:min(46%,400px);transform:translateY(calc(-50% + 20px))}
  .ch.left{left:20px;right:auto}.ch.right{right:20px;left:auto}
  .ch.on{transform:translateY(-50%)}
  .ch h2{font-size:clamp(20px,3.4vw,28px);margin-top:6px}
  .ch>p,.plist .prow p{display:none}
  .plist{margin-top:8px}.plist .prow{padding:5px 0}.plist .prow h3{font-size:15px}
  .mod-cta{margin-top:10px}
  .st-rail{bottom:8px}.st-rail a{min-height:34px}
  .abx{display:none}
}

/* ============================================================
   v3_1 · the founder's revision guide rev10
   ============================================================ */
/* header menus: Products and Platform open on hover, or on click/Enter (nav.js) */
.nav-dd{position:relative;display:flex}
.nav-dd>button{display:flex;align-items:center;gap:7px;padding:0;border:0;background:none;cursor:pointer;
  font:400 12px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.nav-dd>button::after{content:"";width:5px;height:5px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.nav-dd>button[aria-expanded=true]::after{transform:translateY(1px) rotate(225deg)}
.nav-dd>button:hover,.nav-dd>button.cur,.nav-dd>button[aria-expanded=true],.nav-links>a.cur{color:var(--platinum)}
.nav .dd{position:absolute;top:calc(100% + 16px);left:-14px;z-index:60;display:none;min-width:228px;padding:8px;
  background:var(--kelp);border:1px solid rgba(150,232,229,.2);border-radius:12px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6)}
.nav .dd::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.nav-dd:hover .dd,.nav-dd>button[aria-expanded=true]+.dd{display:block}
.nav .dd a{display:block;padding:10px 12px;border-radius:8px;font-size:14px;letter-spacing:0;text-transform:none;color:var(--mist)}
.nav .dd a:hover,.nav .dd a:focus-visible{background:rgba(150,232,229,.1);color:var(--platinum)}
.nav .dd a[aria-current]{color:#96e8e5}
.nav.light .nav-dd>button{color:var(--tmute)}.nav.light .nav-dd>button:hover,.nav.light .nav-dd>button.cur{color:var(--ink)}
.nav.light .dd a{color:var(--mist)}
/* in the phone sheet the menus are simply groups */
.ns-h{margin-top:22px;font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--silver)}
.ns-links .nav-dd{display:block}
.ns-links .dd{display:block}
.ns-links .dd a{min-height:52px;font-size:21px}
.ns-links>a{margin-top:6px}

/* footer */
.foot-tag{margin-top:16px;font-size:14px;max-width:30ch}
.foot-addr{margin-top:14px;font-size:13px;line-height:1.8}
.foot-addr a,.foot-legal a{display:inline;font-size:inherit;margin:0;padding:0}
.foot-addr a:hover,.foot-legal a:hover{color:var(--platinum)}

/* home */
.sec-lede{margin-top:18px;max-width:62ch;font-size:16px;color:var(--silver)}
.byo-figs{display:grid;grid-template-columns:1fr 1fr;gap:18px 22px;margin-top:20px}
.byo-figs dt{font-size:30px;letter-spacing:-.02em;color:var(--phosphor);line-height:1}
.byo-figs dd{margin-top:8px;font-size:13px;line-height:1.45;color:var(--silver)}
.byo-close{margin-top:20px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);font-size:14px;color:var(--mist)}
.watch .bens{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:20px}
.watch .bens li{background:var(--kelp);border-radius:var(--r-card);padding:22px}
.watch .bens b{display:block;color:var(--platinum);font-weight:500;font-size:15px;line-height:1.3}
.watch .bens p{margin-top:8px;font-size:14px;line-height:1.5}
@media(max-width:1100px){.watch .bens{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:760px){.watch .bens{grid-template-columns:1fr}}
.fld-check{display:flex;gap:12px;align-items:flex-start}
.fld-check input{flex:none;width:20px;height:20px;margin:2px 0 0;accent-color:#96e8e5}
.fld-check label{font-size:14px;line-height:1.5;color:var(--silver)}
.fld-check a{color:var(--mist);text-decoration:underline}
.fld-check input[aria-invalid=true]{outline:2px solid #F4A596;outline-offset:2px}
/* the recognition band now holds four awards */
.aw-wall{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1000px){.aw-wall{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the option 2 logo is a single line (mark at the height of the name, 8.9:1), so it sits lower than the v3 mark */
.nav-brand .lk{height:22px}
@media(max-width:420px){.nav-brand .lk{height:15px}}
@media(max-width:380px){.nav-brand .lk{height:14px}}
/* figures in the founder's order put US$3B+ first: on phones its column must not grow past half the row */
@media(max-width:900px){.cfigs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:420px){.cfigs b{font-size:34px}}
/* CJK headlines: ch is half a CJK glyph, so size the hero in em; Japanese breaks between phrases, not inside words */
html[lang="ja"] :is(h1,h2,h3,.ch h2){word-break:auto-phrase;overflow-wrap:anywhere}   /* a phrase wider than the line may still break */


/* cookie consent (consent.js; only rendered when an analytics ID is configured) */
.cc{position:fixed;left:20px;bottom:20px;z-index:79;max-width:420px;padding:18px 18px 16px;border-radius:var(--r-card);background:var(--kelp);
  border:1px solid rgba(150,232,229,.22);box-shadow:0 24px 48px -16px rgba(0,0,0,.6);font-size:14px;line-height:1.5;color:var(--silver)}
.cc a{color:var(--mist);text-decoration:underline}
.cc-b{display:flex;gap:10px;justify-content:flex-end;margin-top:14px}
@media(max-width:560px){.cc{left:12px;right:76px;bottom:12px;max-width:none}}