/* NOTE: embedded in landseed.earth/landseed-ai, not a standalone app page.
   The body rule below has had `overflow:hidden` and `height:100vh` stripped
   so the host page still scrolls. Layout containment lives in ai.css
   under .ctdams. Do not re-add them here. */
:root{
  --deep:#070F07; --forest:#0D1F0D; --green:#2D5A27; --accent:#00BE5A; --alive:#00FF64;
  --text:#F0F0EA; --dim:rgba(240,240,234,.74); --muted:rgba(240,240,234,.56);
  --aqua:#32C8FF;
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
/* ...but not the shared site chrome. This file is embedded in a full marketing
   page, so the reset above also reached the nav and footer and flipped them to
   border-box — which made this page's header 29px shorter than every other
   page's, because .site-nav sizes itself off a min-height. The page's own
   content IS authored against the reset, so exempt the chrome rather than
   scoping the reset away from it. */
.site-nav, .site-nav *, .site-footer, .site-footer *{box-sizing:content-box}
body{background:var(--deep);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;}
#scene{position:fixed;inset:0;width:100vw;height:100vh;display:block;cursor:grab}
#scene:active{cursor:grabbing}
#scene.pointing{cursor:pointer}

/* loader */
#loader{position:fixed;inset:0;z-index:50;background:var(--deep);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px}
#loader span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.loader-word{width:168px;height:auto;animation:breathe 2.6s ease-in-out infinite}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:1}}

/* boot choreography — chrome fades in after the opening flight */
.hud,#chapters,#labels,#leaders,#plegend,#specs{transition:opacity 1s ease}
body.booting .hud,body.booting #chapters,body.booting #labels,body.booting #leaders,body.booting #plegend,body.booting #specs,body.booting #caption{opacity:0!important;pointer-events:none}

/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:18px 24px;pointer-events:none}
a.brand{pointer-events:auto;cursor:pointer;display:block}
a.brand:hover .b-word{opacity:1}
.hud>*{pointer-events:auto}
.brand .b-word{height:22px;width:auto;display:block;opacity:.95}

/* editorial verb watermark behind the staged device */
#verb{position:fixed;top:84px;left:50%;transform:translateX(-50%);z-index:5;font-size:clamp(56px,7.5vw,104px);font-weight:300;letter-spacing:.28em;text-transform:uppercase;color:rgba(240,240,234,.055);white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .8s ease}
#verb.show{opacity:1}
.hud-right{display:flex;align-items:center;gap:14px}
.hud-tag{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* first-run hint */
#hint{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:20;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.7);text-shadow:0 1px 10px rgba(0,0,0,.9);transition:opacity .8s;pointer-events:none}
#hint.gone{opacity:0}

/* ── device labels (catalogue view) — name plate pinned above each unit ──── */
#labels{position:fixed;inset:0;z-index:8;pointer-events:none}
#leaders{position:fixed;inset:0;z-index:7;pointer-events:none;width:100%;height:100%}
#leaders line{stroke:rgba(232,238,235,.32);stroke-width:1;transition:opacity .25s}
/* name plates sit BELOW each unit, on the deck: name · what it is · price */
.dlabel{position:absolute;transform:translate(-50%,14px);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;line-height:1.3;transition:opacity .3s,transform .15s;pointer-events:auto;cursor:pointer;padding:5px 8px;max-width:170px}
.dlabel .dn{display:flex;align-items:center;gap:7px;font-weight:800;font-size:15.5px;letter-spacing:.005em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 14px rgba(0,0,0,.8);white-space:nowrap}
.dlabel .dn::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fa,#fff);box-shadow:0 0 7px var(--fa,#fff)}
.dlabel .dd{font-weight:500;font-size:12px;color:rgba(240,240,234,.88);text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85);white-space:normal}
.dlabel .dp{font-weight:700;font-size:11.5px;color:var(--fa,#9fb8a4);text-shadow:0 1px 3px rgba(0,0,0,.9);font-variant-numeric:tabular-nums}
.dlabel:hover,.dlabel.hl{transform:translate(-50%,14px) scale(1.06)}
.dlabel:hover .dn,.dlabel.hl .dn{color:var(--fa,#fff)}
/* the floating product reads from above, clear of everything on the deck */
.dlabel.up{transform:translate(-50%,-112%)}
.dlabel.up:hover,.dlabel.up.hl{transform:translate(-50%,-112%) scale(1.06)}

/* ── part callouts (device views) — quiet cartographic annotations:
      a dot on the part, a hairline, set type. No boxes. ─────────────────── */
.klabel{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:2px;line-height:1.4;transition:opacity .3s;pointer-events:none;width:max-content;max-width:230px;padding:2px 0}
.klabel .kn{font-weight:700;font-size:13.5px;letter-spacing:.02em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.95),0 0 16px rgba(0,0,0,.85)}
.klabel .ks{font-size:12px;font-weight:400;color:rgba(240,240,234,.78);white-space:normal;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 12px rgba(0,0,0,.85)}
.klabel.kr{text-align:right;align-items:flex-end}
.klabel.kw{max-width:190px}
.klabel.kc{text-align:center;align-items:center;max-width:240px}
#leaders circle{fill:rgba(240,240,234,.85);transition:opacity .25s}

/* ── product-line key (catalogue) — right rail ───────────────────────────── */
#plegend{position:fixed;right:30px;top:88px;z-index:24;width:264px;opacity:0;transform:translateY(-6px);transition:opacity .4s,transform .4s;pointer-events:none}
#plegend.show{opacity:1;transform:none}
#plegend .wl-h{display:flex;justify-content:space-between;align-items:baseline;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--muted);padding-bottom:9px;border-bottom:1px solid rgba(240,240,234,.14);margin-bottom:3px;text-shadow:0 1px 6px rgba(0,0,0,.8)}
#plegend .wl-h .wl-tap{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600}
#plegend .wl-row{display:flex;align-items:baseline;gap:9px;font-size:13.5px;line-height:1}
#plegend .wl-row.dv{pointer-events:auto;cursor:pointer;padding:8px 8px;margin:0 -8px;border-radius:8px;transition:background .15s;border-bottom:1px solid rgba(240,240,234,.06)}
#plegend .wl-row.dv:last-of-type{border-bottom:0}
#plegend .wl-row.dv:hover{background:rgba(255,255,255,.06)}
#plegend .wl-row.dv.on{background:rgba(255,255,255,.08)}
#plegend .wl-row i{width:7px;height:7px;border-radius:50%;flex:none;background:var(--fa,#fff);box-shadow:0 0 6px var(--fa,#fff);align-self:center}
#plegend .wl-row b{font-weight:600;color:var(--text);text-shadow:0 1px 6px rgba(0,0,0,.8)}
#plegend .wl-row span{font-size:10.5px;font-weight:500;letter-spacing:.05em;color:rgba(240,240,234,.44);text-shadow:0 1px 5px rgba(0,0,0,.8)}
#plegend .wl-row em{margin-left:auto;padding-left:10px;font-style:normal;font-size:11.5px;font-weight:500;color:rgba(240,240,234,.66);font-variant-numeric:tabular-nums;text-shadow:0 1px 5px rgba(0,0,0,.8)}
#plegend .pl-foot{font-size:10.5px;line-height:1.55;color:var(--muted);padding-top:10px;text-shadow:0 1px 6px rgba(0,0,0,.8)}

/* ── device-view panels — everything visible at once, no scrolling ────────
   left: #howto (the chain / the scenarios) · right: #specs (the record) */
#howto,#specs{position:fixed;top:78px;z-index:24;width:min(356px,26vw);opacity:0;transition:opacity .45s ease,transform .45s ease;transition-delay:0s;pointer-events:none}
#specs{right:24px;transform:translateX(14px)}
#howto{left:28px;transform:translateX(-14px);width:min(410px,30vw)}
/* the chain reads at a step up from the spec record — it is the pitch, not the fine print */
#cap-how .pan-h{font-size:12px}
#cap-how .sp-step{font-size:13px;padding:7px 0;align-items:center}
/* chain steps read as ONE line — title runs into the description */
#cap-how .sp-step b{display:inline;font-size:13.5px;margin:0 7px 0 0}
#cap-how .sp-step span{display:inline}
#cap-how .sp-step i{width:21px;height:21px;font-size:11.5px}
#cap-how .sp-row{font-size:13px;padding:5px 0;line-height:1.5}
#caption.tight .sp-step{padding:4px 0}
#caption.tight .sp-step span{font-size:12.5px}
#caption.tight #cap-how .sp-step{font-size:12.5px}
/* mini must never strip the chain's descriptions — shrink, don't hide */
#howto.mini .sp-step span{display:inline}
#howto.mini .sp-step{font-size:12px;padding:3px 0}
#howto.mini .sp-step b{font-size:12.5px}
#howto.mini .sp-step i{width:18px;height:18px;font-size:10.5px}
#specs.show,#howto.show{opacity:1;transform:none;pointer-events:auto}
/* device views: the caption IS the left rail — one card, top 78 to bottom 92,
   identical on every page. Title block up top, chain in the middle (scrolls
   if it must), the action buttons pinned to the bottom edge */
body.devview #caption{top:64px;bottom:40px;display:flex;flex-direction:column}
/* devview condensation — buys the chain its room without touching type sizes */
body.devview #cap-kicker{margin-bottom:6px}
body.devview #cap-title{margin-bottom:7px}
body.devview #cap-line{line-height:1.5}
body.devview #cap-stats{margin-top:11px;padding-top:9px}
body.devview #cap-how .sp-step{padding:6px 0}
body.devview #specs{top:64px}
body.devview #specs-scroll{max-height:calc(100vh - 142px);overflow-y:auto;scrollbar-width:none}
body.devview #specs-scroll::-webkit-scrollbar{display:none}
body.devview #caption>*{flex:none}
body.devview #cap-how{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;margin-top:12px;padding-top:11px;border-top:1px solid rgba(240,240,234,.13);scrollbar-width:none}
body.devview #cap-how::-webkit-scrollbar{display:none}
body.devview #cap-links{margin-top:12px}
#cap-how:empty{display:none}
#howto.show{transition-delay:.25s}
#specs.show{transition-delay:.45s}
/* auto-fit tiers — applied by JS when a panel would collide with the caption
   or run past the chip bar; density rises, nothing overlaps */
.tight .sp-step{padding:3px 0}
.tight .sp-step span,.tight .sp-scen p{font-size:11.5px}
.tight .sp-row{padding:2px 0;font-size:12px}
.tight .sp-scen{padding:5px 0 6px}
.tight .sp-best{font-size:12px}
.tight .sp-h,.tight .pan-h{margin-top:9px;margin-bottom:5px}
.tight .sp-h:first-child,.tight .pan-h:first-child{margin-top:0}
.mini .sp-step span{display:none}
.mini .sp-scen p{display:none}
.mini .sp-note{display:none}
#specs-scroll,#howto-body{border-radius:12px;background:linear-gradient(180deg,rgba(7,15,7,.6),rgba(7,15,7,.74));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(240,240,234,.1);padding:17px 18px 15px}
.pan-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,240,234,.7);margin:0 0 10px;display:flex;align-items:center;gap:9px}
.pan-h::after{content:"";flex:1;height:1px;background:rgba(240,240,234,.12)}
.pan-h+.pan-h{margin-top:14px}
.sp-h{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(240,240,234,.7);margin:14px 0 8px;display:flex;align-items:center;gap:9px}
.sp-h::after{content:"";flex:1;height:1px;background:rgba(240,240,234,.12)}
.sp-h:first-child{margin-top:0}
.sp-row{display:grid;grid-template-columns:96px 1fr;gap:0 14px;font-size:12.5px;line-height:1.5;padding:3px 0;border-bottom:1px solid rgba(240,240,234,.05);align-items:baseline}
.sp-row:last-child{border-bottom:0}
.sp-row span{color:var(--muted);font-weight:500}
.sp-row b{font-weight:600;color:var(--text);text-align:left}
.sp-note{font-size:10.5px;line-height:1.5;color:var(--muted);margin-top:11px}
.sp-badge{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--fa,var(--alive));border:1px solid color-mix(in srgb,var(--fa,var(--alive)) 34%,transparent);background:color-mix(in srgb,var(--fa,var(--alive)) 8%,transparent);border-radius:6px;padding:4px 8px;margin:0 6px 8px 0}
.sp-best{font-size:13px;line-height:1.55;color:var(--dim);margin-bottom:2px}
/* numbered chain — how it works */
.sp-step{display:flex;gap:12px;padding:6px 0;font-size:12.5px;line-height:1.45;border-bottom:1px solid rgba(240,240,234,.05)}
.sp-step:last-child{border-bottom:0}
.sp-step i{flex:none;font-style:normal;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;color:var(--deep);background:var(--fa,var(--accent));margin-top:1px}
.sp-step div{flex:1}
.sp-step b{display:block;font-weight:700;color:var(--text);font-size:13px;margin-bottom:1px}
.sp-step span{color:var(--dim)}
/* connectivity scenarios */
.sp-scen{border-bottom:1px solid rgba(240,240,234,.05);padding:8px 0 9px}
.sp-scen:last-of-type{border-bottom:0;padding-bottom:2px}
.sp-scen b{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;font-weight:700;color:var(--text);margin-bottom:2px}
.sp-scen b em{font-style:normal;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sp-scen p{font-size:12px;line-height:1.45;color:var(--dim);margin:0}

/* caption — the field-note card, bottom left */
#caption{position:fixed;left:28px;bottom:92px;z-index:25;width:min(410px,30vw);padding:19px 22px 17px;border-radius:14px;background:linear-gradient(180deg,rgba(6,11,9,.66),rgba(6,11,9,.78));backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.09);opacity:0;transition:opacity .5s ease}
#caption.in{opacity:1;animation:capin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes capin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#cap-kicker{display:flex;align-items:center;gap:8px;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--fa,var(--accent));margin-bottom:8px}
#cap-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fa,var(--accent));box-shadow:0 0 8px var(--fa,var(--accent));flex:none}
#cap-kicker:empty{display:none}
#cap-title{font-size:clamp(24px,2.7vw,31px);font-weight:800;letter-spacing:-.015em;line-height:1.06;margin-bottom:9px;color:#f4f3ee}
#cap-line{font-size:14px;line-height:1.55;color:rgba(240,240,234,.82);max-width:46ch}
#cap-stats{display:flex;flex-wrap:nowrap;margin-top:13px;border-top:1px solid rgba(240,240,234,.13);padding-top:11px}
#cap-stats:empty{display:none}
#cap-stats div{display:flex;flex-direction:column;gap:2px;padding:0 11px;border-left:1px solid rgba(240,240,234,.1);min-width:0}
#cap-stats div:first-child{padding-left:0;border-left:0}
#cap-stats b{font-size:16px;font-weight:800;letter-spacing:-.01em;color:#eef0ea;font-variant-numeric:tabular-nums;white-space:nowrap}
#cap-stats span{font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-top:2px}
/* stack2 — long stat labels (Landseed AI) sit in a roomy 2×2 grid instead of a squeezed row;
   the card matches the how-it-works width so the two read as one aligned left rail */
#caption.stack2 #cap-line{font-size:13.5px}
#caption.stack2 #cap-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 0}
#caption.stack2 #cap-stats div{padding:0 0 0 14px;border-left:1px solid rgba(240,240,234,.1)}
#caption.stack2 #cap-stats div:nth-child(odd){padding-left:0;border-left:0}
#caption.stack2 #cap-stats span{white-space:nowrap}

/* caption action links */
#cap-links{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
#cap-links:empty{display:none}
.cap-link{background:color-mix(in srgb,var(--fa,var(--accent)) 10%,transparent);border:1px solid color-mix(in srgb,var(--fa,var(--accent)) 42%,transparent);color:var(--fa,var(--alive));font-family:var(--sans);font-size:12px;font-weight:600;padding:7px 13px;border-radius:999px;cursor:pointer;transition:.2s}
.cap-link:hover{background:var(--fa,var(--accent));color:var(--deep);border-color:var(--fa,var(--accent))}

/* chapter chips */
#chapters{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:25;display:flex;gap:8px;padding:6px;border-radius:999px;background:rgba(7,15,7,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(240,240,234,.1);max-width:96vw}
.chip{background:none;border:0;color:var(--dim);font-family:var(--sans);font-size:13px;font-weight:500;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.2s;white-space:nowrap;text-decoration:none;display:inline-flex;align-items:center}
.chip:hover{color:var(--text)}
.chip.on{background:var(--accent);color:var(--deep);font-weight:700}
.chip-div{width:1px;height:20px;background:rgba(240,240,234,.18);margin:0 4px;align-self:center;flex:none}
.chip.dive{color:#c9a4ff;border:1px solid rgba(155,108,224,.4)}
.chip.dive:hover{color:#fff;border-color:#9B6CE0;background:rgba(155,108,224,.12)}
.chip.dive.on{background:#9B6CE0;color:var(--deep);border-color:#9B6CE0}

/* narrower desktops — plates slim down so the tighter bay stays clean */
@media(max-width:1560px){
  .dlabel{max-width:178px}
  .dlabel .dn{font-size:14px}
  .dlabel .dd{font-size:11px}
  .dlabel .dp{font-size:10.5px}
}
/* cramped layouts — plates drop their descriptions; name + price stay crisp.
   Applied by JS the moment stacked plates would touch the chip bar. */
.slim-plates .dlabel .dd{display:none}
@media(max-height:700px){
  .dlabel .dd{display:none}
}
/* ── tablet / large phone ───────────────────────────────────────────────── */
@media(max-width:900px){
  .hud{padding:12px 16px}
  .hud-tag{display:none}
  .brand .b-mark{height:20px}
  .brand .b-word{height:18px}
  .brand .b-ai{font-size:15px}
  #plegend{top:62px;right:12px;max-width:46vw;padding:11px 13px 10px;width:auto}
  #plegend .wl-row{font-size:11px}
  #specs{top:62px;right:12px;width:min(320px,44vw);max-height:calc(100vh - 220px)}
  #howto{top:62px;left:12px;width:min(320px,44vw);max-height:34vh}
  #specs-scroll,#howto-body{max-height:inherit;overflow-y:auto}
  #caption{left:14px;bottom:92px;width:auto;max-width:56vw;padding:15px 17px 14px}
  body.devview #caption{top:auto;bottom:92px}
  body.devview #specs{top:62px;bottom:auto}
  body.devview #cap-how{max-height:26vh}
  #cap-line{max-width:none}
  #chapters{bottom:14px;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}
  #chapters::-webkit-scrollbar{display:none}
  .dlabel .dn{font-size:12px}
}
/* ── phone (portrait) ───────────────────────────────────────────────────── */
@media(max-width:560px){
  #plegend{top:46px;left:11px;right:auto;max-width:62vw;max-height:52vh;overflow-y:auto}
  #specs{top:46px;left:11px;right:11px;width:auto;max-height:34vh}
  #howto{display:none}
  #caption{left:11px;right:11px;bottom:110px;width:auto;max-width:none;padding:13px 15px 12px}
  #cap-title{font-size:20px;margin-bottom:6px}
  #cap-line{font-size:12px;line-height:1.5}
  #cap-stats div{padding:0 11px}
  #cap-stats b{font-size:14px}
  #cap-links{margin-top:10px}
  #chapters{bottom:12px;padding:5px;gap:3px}
  #chapters .chip{font-size:11px;padding:7px 12px}
  .klabel{max-width:150px}
  .klabel .ks{font-size:10px}
}
/* ── phone: the integrated scroll catalogue (main.js builds #mcat + body.mcat on
   ≤560). Each product is ONE seamless container — the device renders full-bleed
   on the SAME dark surface the copy sits on (no box, no border, no divider), and
   the whole unit scrolls together. The one canvas hops into whichever card is
   most in view and reveals the device while the copy staggers in. Desktop never
   gets body.mcat, so all of this is inert there — the 3D catalogue is untouched.
   ─────────────────────────────────────────────────────────────────────────*/
body.mcat{overflow-y:auto;overflow-x:hidden;height:auto}
body.mcat #leaders,body.mcat #labels,body.mcat #verb,body.mcat #hint,
body.mcat #plegend,body.mcat #howto,body.mcat #specs,body.mcat #caption{display:none!important}
body.mcat header.hud{background:linear-gradient(#050d08 62%,rgba(5,13,8,0))}   /* mask content scrolling up behind the wordmark */
#mcat{display:block;max-width:600px;margin:0 auto;padding:58px 18px 92px}
.mc-hero{padding:8px 0 2px}
.mc-hero h1{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:9px 0 11px;color:#F0F0EA}
.mc-tag{font-size:14.5px;line-height:1.55;color:var(--dim)}
.mc-kick{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--alive)}
.mc-nums{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.mc-nums div{border-left:1px solid rgba(240,240,234,.14);padding-left:9px}
.mc-nums b{display:block;font-size:15px;font-weight:800;color:#eef0ea;font-variant-numeric:tabular-nums;line-height:1.15}
.mc-nums span{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mc-strip{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;margin:20px -18px 2px;padding:2px 18px 6px;-webkit-overflow-scrolling:touch}
.mc-strip::-webkit-scrollbar{display:none}
.mc-pill{flex:none;display:inline-flex;align-items:center;gap:7px;background:rgba(11,18,12,.6);border:1px solid rgba(240,240,234,.12);border-radius:999px;cursor:pointer;font-family:var(--sans);padding:8px 13px;color:var(--dim);font-size:12.5px;font-weight:700;white-space:nowrap}
.mc-pill i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--fa);box-shadow:0 0 8px color-mix(in srgb,var(--fa) 70%,transparent)}
.mc-cards{margin-top:26px;display:flex;flex-direction:column;gap:11vh}
/* one seamless container: the device zone is full-bleed and border-less; the
   canvas renders on the same #050d08 the page uses, so its edges vanish and the
   device floats on the card's own surface. The bottom fade dissolves the render
   straight into the copy — no seam. */
.mc-card{position:relative;scroll-margin-top:64px}
.mc-viz{position:relative;height:46vh;margin:0 -18px}
/* pointer-events:none — the render never swallows a touch (OrbitControls pins
   touch-action:none on #scene), so the page scrolls even with a finger on the
   device. No tap interaction is needed here; the pills and nav handle it. */
#scene.mc-live{position:absolute;top:0;left:0;display:block;opacity:0;pointer-events:none;touch-action:auto;will-change:opacity;cursor:default}
.mc-viz::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(rgba(5,13,8,0),#050d08);pointer-events:none;z-index:1}
.mc-copy{position:relative;margin-top:-30px;z-index:2}
/* copy reveals once, when its card first enters view (.shown is permanent, set
   by the IntersectionObserver) — so text never fades out while you're reading it
   and no card is ever left blank */
.mc-copy>*{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .6s cubic-bezier(.2,.75,.25,1)}
.mc-card.shown .mc-copy>*{opacity:1;transform:none}
.mc-card.shown .mc-copy>:nth-child(1){transition-delay:.05s}
.mc-card.shown .mc-copy>:nth-child(2){transition-delay:.11s}
.mc-card.shown .mc-copy>:nth-child(3){transition-delay:.17s}
.mc-card.shown .mc-copy>:nth-child(4){transition-delay:.23s}
.mc-card.shown .mc-copy>:nth-child(5){transition-delay:.29s}
.mc-card.shown .mc-copy>:nth-child(6){transition-delay:.35s}
.mc-card.shown .mc-copy>:nth-child(7){transition-delay:.41s}
@media(prefers-reduced-motion:reduce){.mc-copy>*{opacity:1;transform:none;transition:opacity .3s ease}}
.mc-copy .mc-kick{color:color-mix(in srgb,var(--fa) 72%,#fff)}
.mc-copy h2{font-size:28px;font-weight:800;letter-spacing:-.015em;line-height:1.04;margin:8px 0 0;color:#F0F0EA}
.mc-price{margin-top:8px;font-size:15px;font-weight:800;color:var(--fa)}
.mc-line{margin-top:12px;font-size:15px;line-height:1.6;color:var(--dim)}
.mc-cardnums{margin-top:20px}
.mc-how{margin-top:22px;padding-top:16px;border-top:1px solid rgba(240,240,234,.12);font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mc-chain{margin-top:11px}
.mc-step{display:flex;gap:10px;padding:7px 0;font-size:13.5px;line-height:1.5}
.mc-step i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--fa);color:#071007;font-style:normal;font-weight:800;font-size:11.5px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.mc-step b{color:#F0F0EA;font-weight:700;margin-right:6px}
.mc-step span{color:var(--dim)}
.mc-step span em{font-style:normal;font-weight:700;color:color-mix(in srgb,var(--fa) 70%,#fff)}
.mc-subh{margin:16px 0 9px;font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.mc-spec{display:flex;justify-content:space-between;gap:14px;padding:7px 0;font-size:13.5px;border-bottom:1px solid rgba(240,240,234,.05)}
.mc-spec:last-child{border-bottom:0}
.mc-spec>span{color:var(--muted);flex:none}
.mc-spec b{color:#F0F0EA;font-weight:600;text-align:right}
@media(prefers-reduced-motion:reduce){#caption.in{animation:none}.loader-mark{animation:none}}