/* ============================================================
   v3 subpages. The approved v2 content classes, dressed in the
   Auros tokens from v3.css: teal surface stack, kelp cards,
   DM Sans 400/500, DM Mono for labels, 16px cards / 6px buttons.
   ============================================================ */
.sub main{position:relative;z-index:1}
.sub h1,.sub h2,.sub h3,.sub h4{color:var(--platinum);font-weight:500;letter-spacing:-.03em}
.sub h1{font-size:clamp(40px,5.2vw,78px);line-height:1;max-width:16ch}
.sub h2{font-size:clamp(28px,3.4vw,50px);line-height:1.05;max-width:22ch}
.sub h3{font-size:22px;line-height:1.2;letter-spacing:-.02em}
.sub h4{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.sub p,.sub li{color:var(--silver)}
.sub .lede{margin-top:22px;font-size:18px;line-height:1.5;max-width:62ch;color:var(--silver)}
.sub main a:not([class]){color:var(--mist);text-decoration:underline;text-underline-offset:3px}
.sub .rv{opacity:1;transform:none}
.sub .sec{padding-block:96px}
.sub .sec+.sec{padding-top:0}
@media(max-width:700px){.sub .sec{padding-block:64px}}

/* hero: the terminal lattice film sits behind the first screen */
.sub-film{position:absolute;left:0;right:0;top:0;height:min(88vh,760px);overflow:hidden;pointer-events:none;z-index:0}
.sub-film video{width:100%;height:100%;object-fit:cover;opacity:.5}
.sub-film::after{content:"";position:absolute;inset:0;background:linear-gradient(rgba(1,38,36,.55),var(--abyss) 94%)}
.sub .hero{position:relative;padding-block:120px 96px;min-height:0;display:block}
.sub .hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:flex-start;margin-top:34px}
.sub .hero-re{margin-top:22px;font:400 12px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.hero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:end}
@media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:36px}}
.prod-found{margin-top:22px;font-size:15px;max-width:52ch}
.prod-found span{display:inline-block;margin-right:10px;padding:4px 10px;border-radius:var(--r-small);background:var(--kelp);
  font:500 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.wflow{background:var(--kelp);border-radius:var(--r-card);padding:28px}
.wflow .k{display:block;font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:14px}
.wflow ol{list-style:none;counter-reset:w}
.wflow li{counter-increment:w;display:flex;gap:14px;padding:11px 0;border-top:1px solid rgba(255,255,255,.07);font-size:15px;color:var(--platinum)}
.wflow li::before{content:counter(w,decimal-leading-zero);font:400 11px 'DM Mono',monospace;color:#96e8e5;padding-top:3px}

/* card grids: every repeating block is one kelp surface */
.bens,.ldrs,.offs,.steps,.egs,.layers,.fly-bens-grid,.ev,.wgroups,.exec,.casegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;margin-top:36px}
.ben,.ldr,.off,.step,.eg,.layer,.fly-ben,.ev-card,.wgroup,.exec>div{background:var(--kelp);border-radius:var(--r-card);padding:28px}
.ben b,.eg b,.fly-ben b{display:block;color:var(--platinum);font-weight:500;font-size:17px;letter-spacing:-.01em}
.ben p,.eg p,.fly-ben p,.step p,.layer p,.ev-card p,.exec p{margin-top:10px;font-size:15px;line-height:1.5}
.exec h4{margin-bottom:4px}
.wgroup ul,.blk ul,.tlist{list-style:none}
.wgroup ul{margin-top:14px}
.wgroup li,.blk li{position:relative;padding:9px 0 9px 18px;border-top:1px solid rgba(255,255,255,.06);font-size:15px}
.wgroup li::before,.blk li::before{content:"";position:absolute;left:0;top:17px;width:6px;height:6px;border-radius:50%;background:#96e8e5}
.avail{display:inline-block;margin-top:16px;font:400 10px 'DM Mono',monospace;letter-spacing:.12em;color:var(--phosphor)}
.layer .k{display:block;font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mist);margin-bottom:10px}
.flowline{margin-top:28px;padding:14px 16px;border-radius:var(--r-small);background:var(--deep);font:400 13px/1.5 'DM Mono',monospace;color:var(--mist);overflow-wrap:anywhere}
.fly-bens{margin-top:56px}
.fly-bens-h{font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.concept{margin-top:18px;font-size:13px;max-width:70ch}
.flowtabs{display:flex;gap:8px;flex-wrap:wrap;margin-top:32px}
.flowtabs [role=tab]{font:500 13px var(--font);letter-spacing:.04em;text-transform:uppercase;color:var(--platinum);background:var(--kelp);border:0;border-radius:var(--r-small);padding:12px 16px;cursor:pointer}
.flowtabs [role=tab][aria-selected=true]{background:var(--mist);color:#222}
.flowpanel{margin-top:14px;background:var(--kelp);border-radius:var(--r-card);padding:28px;max-width:720px}
.flowpanel p{margin-top:10px}.flowpanel a{display:inline-block;margin-top:16px}

/* company */
.ldr-ph{display:block;width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--deep);box-shadow:0 0 0 1px rgba(150,232,229,.32),0 12px 28px -14px rgba(0,0,0,.7)}   /* the founders' photos (from v1) */
.ldr h4{margin-top:16px;font-size:26px;font-weight:500;letter-spacing:-.02em;text-transform:none;color:var(--platinum)}
.ldr .role{margin-top:8px;font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#96e8e5}
.ldr .bio{margin-top:14px;font-size:15px}
.off h4{font-size:22px;letter-spacing:-.02em;text-transform:none;color:var(--platinum)}
.off .entity{display:block;margin-top:10px;font:400 12px 'DM Mono',monospace;color:var(--mist)}
.off address{margin-top:12px;font-style:normal;white-space:pre-line;font-size:15px;color:var(--silver)}
.off a{display:inline-block;margin-top:12px;color:var(--mist);font:400 13px 'DM Mono',monospace}
.prose h3{margin-top:72px}
.tlist{margin-top:26px;max-width:760px}
.tlist li{display:flex;gap:14px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08);font-size:16px;color:var(--platinum)}
.tlist li svg{flex:none;margin-top:3px}
.step h3{font-size:20px}

/* the contact form reuses v3's .frm; these are the extra v2 pieces */
.sub #contact .frm{margin-top:36px;max-width:560px;background:var(--deep);border-radius:var(--r-card);padding:32px}
.frm-actions{display:flex;gap:16px;align-items:center}
.frm .err{font-size:13px;color:#F4A596}
.frm-note{font-size:13px;margin-top:6px}
.sending{font-size:14px;color:var(--silver)}

/* cases */
.hstats{list-style:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:8px}
.hstat{background:var(--kelp);border-radius:var(--r-card);padding:24px}
.hstat b{display:block;font-size:48px;font-weight:500;letter-spacing:-.046em;line-height:1;color:var(--phosphor)}
.hs-l{display:block;margin-top:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.hs-q{display:block;margin-top:10px;font-size:14px;line-height:1.45;color:var(--silver)}
.hs-note{margin-top:20px;font-size:13px;max-width:72ch}
.caseset{display:grid;gap:20px;margin-top:40px}
.case{background:var(--kelp);border-radius:var(--r-card);padding:32px;scroll-margin-top:100px}
.case-deep{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:40px}
@media(max-width:900px){.case-deep{grid-template-columns:1fr;gap:24px}}
.case .metric,.ev-card .metric{font-size:56px;font-weight:500;letter-spacing:-.046em;line-height:1;color:var(--phosphor)}
.case h3{margin-top:14px}
.who{display:block;margin-top:8px;font:400 11px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--mist)}
.qual{margin-top:14px;font-size:15px}
.deep-tag{display:inline-block;margin-top:18px;padding:4px 10px;border-radius:var(--r-small);background:var(--deep);font:400 10px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#96e8e5}
.blk+.blk{margin-top:22px}
.blk p{margin-top:8px;font-size:15px}
.blk ul{margin-top:8px}
.sechead{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-top:96px}
.casegrid .case{padding:28px}

/* legal */
.rd{max-width:760px}
.intro{margin-top:18px;font-size:17px}
.toc{margin-top:40px;background:var(--kelp);border-radius:var(--r-card);padding:28px}
.toc h2{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--mist)}
.toc ol{list-style:none;margin-top:12px}
.toc ol ol{margin:6px 0 10px 16px}
.toc li{padding:4px 0}
.toc a{color:var(--platinum)!important;text-decoration:none!important}
.toc a:hover{color:#96e8e5!important}
.doc{margin-top:72px}
.doc h2{font-size:clamp(28px,3vw,40px)}
.doc section{margin-top:36px;scroll-margin-top:100px}
.doc h3{font-size:20px}
.doc p,.doc li{margin-top:12px;font-size:16px;line-height:1.65}
.doc ul{margin-left:20px}
.backtop{font:400 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;text-decoration:none!important}

/* the closing band on subpages */
.sub .cta .wrap{background:var(--deep);border-radius:var(--r-card);padding:72px 48px}
@media(max-width:700px){.sub .cta .wrap{padding:44px 22px}}
.nav-links a[aria-current]{color:var(--platinum)}
@media(max-width:480px){.sub main .btn-aurora,.sub main .btn-kelp{white-space:normal;text-align:center;line-height:1.3}}
/* the recognition wall is a paper section: ink type, not the dark-page platinum */
.sub .recog h2,.sub .recog h3{color:var(--ink)}
.sub .recog p{color:#3A4450}
.sub .recog .aw span{color:var(--tmute)}

/* ============================================================
   Motion (sub.js). One authored entrance per page, then motion
   that explains: the lit lobe, the workflow trace, the tabs.
   ============================================================ */
@keyframes sub-rise{from{clip-path:inset(0 0 100% 0);transform:translateY(28px)}to{clip-path:inset(-10% -5% -20% -5%);transform:none}}
@keyframes sub-fade{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.sub .hero h1{animation:sub-rise .9s cubic-bezier(.16,1,.3,1) .05s both}
.sub .hero .lede,.sub .hero .prod-found,.sub .hero .hero-cta,.sub .hero .intro{animation:sub-fade .7s cubic-bezier(.16,1,.3,1) .35s both}
.sub .hero .wflow{animation:sub-fade .8s cubic-bezier(.16,1,.3,1) .5s both}

/* the signal instrument */
.sig{position:relative;height:190px;margin:-6px -6px 20px;border-radius:12px;background:radial-gradient(ellipse at 50% 55%,rgba(150,232,229,.08),transparent 70%);border-bottom:1px solid rgba(255,255,255,.07)}
.sig canvas{position:absolute;inset:0;width:100%;height:100%}
.sub .hero{overflow:hidden}
.sig-hero{position:absolute;right:max(20px,calc((100% - var(--max)) / 2 + 20px));top:50%;width:min(46vw,640px);height:min(62vh,460px);margin:0;transform:translateY(-50%);border:0;background:none;pointer-events:none;animation:sub-fade 1.2s cubic-bezier(.16,1,.3,1) .4s both}
.sub .hero .wrap{position:relative;z-index:1}
@media(max-width:980px){.sig-hero{display:none}}

/* platform tabs: one mist pill slides to the chosen step */
.flowtabs{position:relative;isolation:isolate}
.flowtabs [role=tab]{position:relative;z-index:1;background:transparent;box-shadow:inset 0 0 0 1px rgba(237,255,254,.18);transition:color .25s}
.flowtabs [role=tab][aria-selected=true]{background:transparent;color:#222;box-shadow:none}
@keyframes panel-in{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.flowpanel [role=tabpanel].in{animation:panel-in .35s cubic-bezier(.16,1,.3,1) both}

/* workflow trace */
.wflow ol.tracing li{color:var(--silver);transition:color .3s,background .3s;border-radius:6px}
.wflow ol.tracing li.on{color:var(--platinum);background:linear-gradient(90deg,rgba(150,232,229,.12),transparent 70%)}
.wflow ol.tracing li::before{transition:color .3s,text-shadow .3s}
.wflow ol.tracing li.on::before{color:var(--phosphor);text-shadow:0 0 12px rgba(150,232,229,.8)}

/* legal: reading rail + contents that follow */
.read-rail{position:fixed;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,#96e8e5,#fde9ff);transform:scaleX(0);transform-origin:0 50%;z-index:70;pointer-events:none}
.toc a{display:inline-block;transition:color .25s,transform .25s}
.toc a.here{color:#96e8e5!important;transform:translateX(8px)}

@media(prefers-reduced-motion:reduce){
  .sub .hero h1,.sub .hero .lede,.sub .hero .prod-found,.sub .hero .hero-cta,.sub .hero .intro,.sub .hero .wflow,.sig-hero{animation:none}
  .tab-ind,.toc a,.wflow ol.tracing li{transition:none}
  .flowpanel [role=tabpanel].in{animation:none}
}

/* platform flow diagram in the v3 world, lit by the tabs */
.loop-fig{margin-top:32px;background:var(--deep);border-radius:var(--r-card);padding:24px}
.loop-fig svg{width:100%;height:auto;display:block}
.loop-fig g{font-family:'DM Sans',sans-serif}
.loop-fig g[id^=n] rect{fill:var(--kelp);stroke:rgba(237,255,254,.14);stroke-width:1.4;transition:stroke .35s,fill .35s}
.loop-fig g[id^=n] text{fill:var(--silver)}
.loop-fig g[id^=n] text:first-of-type{fill:var(--platinum);font-weight:500}
.loop-fig g[id^=n].lit rect{stroke:#96e8e5;stroke-width:2.2;fill:#004541}
.loop-fig g[id^=n].lit text:first-of-type{fill:#cbfffc}
.loop-fig path,.loop-fig [marker-end]{stroke:#96e8e5}
.loop-fig marker path{fill:#96e8e5;stroke:none}
.loop-fig text[fill="#16A6AC"]{fill:#96e8e5}
.loop-fig #pf-g stop:nth-child(1){stop-color:#00827c}.loop-fig #pf-g stop:nth-child(2){stop-color:#2fb9b3}.loop-fig #pf-g stop:nth-child(3){stop-color:#96e8e5}
.loop-fig path[stroke-dasharray]{animation:flow-dash 1.4s linear infinite}
@keyframes flow-dash{to{stroke-dashoffset:-24}}
@media(prefers-reduced-motion:reduce){.loop-fig path[stroke-dasharray]{animation:none}}
/* instruments: sized so labels stay inside */
.sig{height:220px}
.sig-hero{top:64px;bottom:48px;height:auto;transform:none}

/* ============================================================
   v3_1 · product pages (revision guide s23): one structure for every product
   ============================================================ */
.sub .hero .kicker{color:#96e8e5}
.sub .hero h1{margin-top:18px}
.sub .claim{font-size:clamp(19px,1.8vw,24px);line-height:1.35;color:var(--platinum);max-width:34ch}
.runs-on{display:inline-block;padding:5px 11px;border-radius:var(--r-small);background:var(--kelp);
  font:500 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.runs-on:hover{background:#004541;color:var(--platinum)}
.sub .glance-h{font:400 11px 'DM Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#96e8e5;max-width:none}
.glance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:20px}
@media(max-width:1100px){.glance{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.glance{grid-template-columns:1fr}}
.cmp-wrap{margin-top:36px;overflow-x:auto;border-radius:var(--r-card);background:var(--kelp)}
.cmp{width:100%;min-width:700px;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.cmp th,.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid rgba(255,255,255,.07);color:var(--silver)}
.cmp thead th{font:500 11px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
.cmp tbody th{color:var(--platinum);font-weight:500}
.cmp tr>:last-child{background:rgba(150,232,229,.07);color:var(--platinum)}
.cmp tbody tr:last-child>*{border-bottom:0}
.sub .deploy-line{margin-top:24px;padding:0;max-width:none;color:var(--platinum)}   /* a plain line on the cards' left edge, as wide as the row (owner, 2026-10-04) */
.ldr-in{display:inline-block;margin-top:14px;font:400 12px 'DM Mono',monospace;letter-spacing:.08em;text-transform:uppercase;color:#96e8e5}
.ldr-in:hover{color:var(--platinum)}

/* platform: the flywheel (s42) and its intelligence loop */
.fly{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:28px;align-items:center;margin-top:40px}
@media(max-width:980px){.fly{grid-template-columns:1fr}}
.stgs{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:640px){.stgs{grid-template-columns:1fr}}
.stg{background:var(--kelp);border-radius:var(--r-card);padding:24px;transition:box-shadow .25s}
.stg:hover{box-shadow:inset 0 0 0 1px rgba(150,232,229,.45)}
.stg .k{display:block;font:400 10.5px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:#96e8e5}
.sub .stg h3{margin-top:12px;font-size:18px;line-height:1.3}
.sub .stg p{margin-top:10px;font-size:14.5px;line-height:1.5}
.iloop{background:var(--deep);border-radius:var(--r-card);padding:20px}
.iloop svg{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
.il-ring{fill:none;stroke:rgba(150,232,229,.3);stroke-width:1.5;stroke-dasharray:4 7;animation:il-dash 6s linear infinite}
@keyframes il-dash{to{stroke-dashoffset:-110}}
.il-arc{fill:none;stroke:rgba(150,232,229,.5);stroke-width:2.2;transition:stroke .3s}
.iloop marker path{fill:#96e8e5}
.il-mid{font:italic 400 15px var(--font);fill:var(--mist)}
.il-node rect{fill:var(--kelp);stroke:rgba(150,232,229,.55);stroke-width:1.4;transition:fill .3s,stroke .3s}
.il-node text{font:500 16px var(--font);fill:var(--platinum)}
.il-node text.s{font:400 11px 'DM Mono',monospace;letter-spacing:.04em;fill:var(--silver)}
/* pointing at a stage lights its leg of the loop */
.fly:has(.stg[data-s="1"]:hover) .a1,.fly:has(.stg[data-s="2"]:hover) .a2,.fly:has(.stg[data-s="3"]:hover) .a2,.fly:has(.stg[data-s="4"]:hover) .a3{stroke:#cbfffc;stroke-width:3.4}
.fly:has(.stg[data-s="1"]:hover) :is(.n-byo,.n-pos) rect,.fly:has(.stg[data-s="2"]:hover) :is(.n-pos,.n-dms) rect,
.fly:has(.stg[data-s="3"]:hover) :is(.n-dms,.n-pos) rect,.fly:has(.stg[data-s="4"]:hover) :is(.n-dms,.n-byo) rect{fill:#004541;stroke:#cbfffc}
/* s43: six benefits sit three by two inside the page grid */
.fly-bens-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:980px){.fly-bens-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fly-bens-grid{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.il-ring{animation:none}.il-arc,.il-node rect,.stg{transition:none}}
.cmp td p{margin:0;font-size:inherit;color:inherit}
.cmp-l{display:none}
@media(max-width:720px){
  .cmp-wrap{background:none;overflow:visible}
  .cmp,.cmp tbody,.cmp tr,.cmp th,.cmp td{display:block;min-width:0;width:auto}
  .cmp thead{display:none}
  .cmp tr{background:var(--kelp);border-radius:var(--r-card);padding:18px 20px;margin-bottom:12px}
  .cmp th,.cmp td{padding:10px 0;border-bottom:1px solid rgba(255,255,255,.07)}
  .cmp tbody th{font-size:17px;padding-top:0}
  .cmp tr>:last-child{background:none;border-bottom:0;padding-bottom:0}
  .cmp-l{display:block;margin-bottom:4px;font:400 10.5px 'DM Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--mist)}
  .cmp td:last-child .cmp-l{color:#96e8e5}
}
/* counting figures (sub.js): fixed-width digits so the arrow does not jitter while they count */
.metric .ct{display:inline-block;font-variant-numeric:tabular-nums;text-align:right}
/* case figures that are words ("Transparency", "NB & UW") scale with their card, never past 56px */
.ev-card{container-type:inline-size}
.ev-card .metric{font-size:min(56px,15cqi)}
/* the delivery table fits a 768px tablet column without scrolling */
@media(min-width:721px){.cmp{min-width:640px}}