/* ============================================================
   CUBIQ — El frío, computado.
   Token system adapted from the ORYZO teardown (fluid --screen-unit,
   16-col grid, single 768px breakpoint) with the CUBIQ ice palette.
   ============================================================ */

@font-face {
  font-family: "Hanken";
  src: url("../fonts/hankengrotesk.woff2") format("woff2");
  font-weight: 300 800;
  font-display: swap;
}
@font-face {
  font-family: "Literata";
  src: url("../fonts/literata.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "DM Mono";
  src: url("../fonts/dmmono.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* ---- Palette: glacial ---- */
  --white: #e8f4ff;
  --black: #04080d;
  --panel: #0a1620;
  --panel-2: #0d1f2b;
  --silver: #c8d4dc;
  --muted: #6d8496;
  --blue: #7ab8d9;
  --accent: #00e0ff;
  --pale: #dbe9f2;
  --pale-ink: #06121b;

  /* ---- Type ---- */
  --display: "Hanken", system-ui, sans-serif;
  --text: "Hanken", system-ui, sans-serif;
  --serif: "Literata", Georgia, serif;
  --mono: "DM Mono", ui-monospace, monospace;

  /* ---- Fluid unit: min(width-based, height-based) ---- */
  --vh: 1vh;
  --site-padding-x: 3.125vw;
  --inner-width: calc(100vw - var(--site-padding-x) * 2);
  --screen-unit: min(var(--inner-width) / 1800, calc(var(--vh) * 100) / 1024 * 1.25);

  --h1: calc(164 * var(--screen-unit));
  --h2: calc(68 * var(--screen-unit));
  --h3: calc(45 * var(--screen-unit));
  --h4: calc(32 * var(--screen-unit));
  --h5: calc(20 * var(--screen-unit));
  --body1: calc(38 * var(--screen-unit));
  --body2: calc(24 * var(--screen-unit));
  --body3: calc(18 * var(--screen-unit));
  --sub1: calc(24 * var(--screen-unit));
  --sub2: calc(16 * var(--screen-unit));
  --quote: calc(30 * var(--screen-unit));
  --btn: calc(16 * var(--screen-unit));

  --grid-columns: 16;
  --gap: calc(20 * var(--screen-unit));
  --section-y: calc(160 * var(--screen-unit));
}

@media (max-width: 767.98px) {
  :root {
    --site-padding-x: 4.267vw;
    --screen-unit: min(var(--inner-width) / 343, calc(var(--vh) * 100) / 844 * 1.1);
    /* 62, not the reference's 96: "computado." is a longer word than ORYZO's and
       overflows 390px at 96. */
    --h1: calc(62 * var(--screen-unit));
    --h2: calc(38 * var(--screen-unit));
    --h3: calc(26 * var(--screen-unit));
    --h4: calc(16 * var(--screen-unit));
    --h5: calc(14 * var(--screen-unit));
    --body1: calc(18 * var(--screen-unit));
    --body2: calc(16 * var(--screen-unit));
    --body3: calc(14 * var(--screen-unit));
    --sub1: calc(16 * var(--screen-unit));
    --sub2: calc(12 * var(--screen-unit));
    --quote: calc(28 * var(--screen-unit));
    --btn: calc(12 * var(--screen-unit));
    --grid-columns: 4;
    --section-y: calc(90 * var(--screen-unit));
  }
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--text);
  font-size: var(--body2);
  line-height: 1.45;
  font-weight: 400;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body.is-loading { overflow: hidden; height: 100vh; }
img, video, canvas, svg { display: block; max-width: 100%; }
/* Round 4 wrapped every page image in <picture> for the desktop/mobile art-directed
   pairs. `display: contents` takes the wrapper out of layout entirely, so every
   existing rule that sizes an <img> (height:100%, aspect-ratio, object-fit) keeps
   working against the real parent instead of an unsized inline box. */
picture { display: contents; }
/* ...but `display: contents` promotes BOTH of picture's children to items of the
   real parent, and <source> computes to `display: block` (the UA sheet never has
   to hide it, because a normal <picture> renders only the <img>). In the
   testimonial grid that stray zero-height box claimed column 1 and squeezed every
   quote into a 73px ribbon. Hide it explicitly. */
picture > source { display: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input { font: inherit; color: inherit; }
::selection { background: var(--accent); color: var(--black); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; }

/* ---- Layout helpers ---- */
.wrap { padding-inline: var(--site-padding-x); }
.section { position: relative; padding-block: var(--section-y); }
.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--gap);
}
.eyebrow {
  font-family: var(--mono);
  font-size: var(--sub2);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--blue);
}
.rule { height: 1px; background: rgba(200, 212, 220, 0.16); border: 0; }

/* ============================================================
   0 · Preloader
   ============================================================ */
#preloader {
  position: fixed; inset: 0; z-index: 200;
  background: var(--black);
  display: grid; place-items: center;
}
#preloader-canvas { width: min(70vw, 620px); height: calc(180 * var(--screen-unit)); }
#preloader.is-done { pointer-events: none; }

/* ============================================================
   1 · Global grain canvas
   ============================================================ */
#canvas {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: soft-light;
}
#page { position: relative; z-index: 1; }

/* ============================================================
   Persistent chrome — pill nav, mobile menu, scroll indicator
   ============================================================ */
#header {
  position: fixed; top: calc(20 * var(--screen-unit)); left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--site-padding-x);
  pointer-events: none;
}
#header > * { pointer-events: auto; }
/* Chip keeps the wordmark legible over the pale paper/sustainability sections too. */
.brand {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(22 * var(--screen-unit));
  letter-spacing: 0.14em;
  background: rgba(10, 22, 32, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(122, 184, 217, 0.22);
  border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(20 * var(--screen-unit));
  color: var(--white);
}
.brand span { color: var(--accent); }
.pill-nav {
  display: flex; align-items: center; gap: calc(26 * var(--screen-unit));
  background: rgba(10, 22, 32, 0.66);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(122, 184, 217, 0.22);
  border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(26 * var(--screen-unit));
}
.pill-nav a { font-size: var(--btn); letter-spacing: 0.1em; text-transform: uppercase; }
.nav-cta {
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: calc(11 * var(--screen-unit)) calc(24 * var(--screen-unit));
  font-size: var(--btn); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(0, 224, 255, 0.06);
}
.menu-btn { display: none; }

@media (max-width: 767.98px) {
  .pill-nav, .nav-cta { display: none; }
  .menu-btn {
    display: block;
    border: 1px solid rgba(122, 184, 217, 0.35);
    border-radius: 999px;
    padding: calc(9 * var(--screen-unit)) calc(18 * var(--screen-unit));
    font-size: var(--btn); text-transform: uppercase; letter-spacing: 0.1em;
    background: rgba(10, 22, 32, 0.7);
  }
}

#mobile-menu {
  position: fixed; inset: 0; z-index: 150;
  background: var(--black);
  display: none;
  flex-direction: column; justify-content: center; gap: calc(18 * var(--screen-unit));
  padding: var(--site-padding-x);
}
#mobile-menu.is-open { display: flex; }
#mobile-menu a { font-family: var(--display); font-size: var(--h3); }
#mobile-menu .close {
  position: absolute; top: calc(24 * var(--screen-unit)); right: var(--site-padding-x);
  font-size: var(--h4);
}

#scroll-indicator {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  height: 2px; background: rgba(200, 212, 220, 0.12);
}
#scroll-indicator__bar-inner {
  height: 100%; width: 0%;
  background: var(--accent);
  box-shadow: 0 0 10px 3px rgba(0, 224, 255, 0.45);
}
#scroll-indicator__dot {
  position: absolute; top: 50%; left: 0;
  width: calc(9 * var(--screen-unit)); height: calc(9 * var(--screen-unit));
  min-width: 6px; min-height: 6px;
  border-radius: 50%; background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 1em var(--accent);
}

/* ---- Letter flipper (.is-flipper) ----
   The mask is the char itself; the inner span is what translates, carrying its
   clone up from below. Masking on the button instead would let the clone show
   inside the button's padding. */
.is-flipper .flip-char {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.15;
}
.is-flipper .flip-inner {
  display: inline-block;
  position: relative;
  will-change: transform;
}
.is-flipper .flip-clone {
  position: absolute; left: 0; top: 100%;
  display: block;
}

/* ---- Split reveal masks ---- */
.split-line { overflow: hidden; }

/* ============================================================
   2 · Hero — two-phase scroll choreography (ORYZO pattern)
   A: the ice-lab bench dims to black, the cube stays lit and pinned.
   B: on the black ground the pinned cube rotates, scrubbed by scroll.
   The section is a tall scroll track; #hero-pin is the sticky viewport.
   ============================================================ */
#hero { position: relative; height: 500svh; }
#hero-pin {
  position: sticky; top: 0;
  height: 100svh; overflow: hidden;
  background: var(--black);
}

/* --- layers, back to front ---
   R8/A1: #hero-scene is the NO-WEBGL plate only, and it is a build-time capture
   of the live 3D hero rather than the retired photograph. As a background image
   on a .no3d-only rule it is never even requested on the WebGL path. */
#hero-scene { position: absolute; inset: 0; }
.no3d #hero-scene {
  background: #05090c url("../public/hero3d.webp") center / cover no-repeat;
}
@media (max-width: 767.98px) {
  .no3d #hero-scene { background-image: url("../public/hero3d-m.webp"); }
}
#hero-load, #hero-phaseb { position: absolute; inset: 0; }
#hero-phaseb { opacity: 0; }

/* --- phase A: the load state --- */
/* Sits above the wordmark rather than beside it: this build's nav is a centred
   pill, so the reference's beside-the-mark position would run under it. */
.hero-tagline {
  position: absolute; top: calc(96 * var(--screen-unit)); left: var(--site-padding-x);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--white);
}
.hero-mark {
  position: absolute; top: calc(128 * var(--screen-unit)); left: var(--site-padding-x);
  font-family: var(--display); font-size: calc(240 * var(--screen-unit));
  font-weight: 800; letter-spacing: -0.02em; line-height: 0.82; color: var(--white);
}
.hero-side {
  position: absolute; top: 42%; right: var(--site-padding-x);
  width: calc(500 * var(--screen-unit));
  font-size: var(--body2); line-height: 1.32; color: var(--white);
}
.hero-trust {
  position: absolute; left: var(--site-padding-x); bottom: calc(52 * var(--screen-unit));
  width: calc(320 * var(--screen-unit)); min-width: 210px;
  padding: calc(22 * var(--screen-unit));
  background: linear-gradient(to bottom, rgba(20, 44, 60, 0.62), rgba(10, 22, 32, 0.28));
  border: 1px solid rgba(122, 184, 217, 0.16);
}
.hero-trust__lead {
  font-size: var(--h5); font-weight: 700; line-height: 1.16;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--white);
  padding-bottom: calc(52 * var(--screen-unit));
  border-bottom: 1px dashed rgba(200, 212, 220, 0.35);
}
.hero-trust__tail {
  margin-top: calc(14 * var(--screen-unit));
  font-size: var(--body3); line-height: 1.3; text-align: right; color: var(--white);
}
.hero-cue {
  position: absolute; left: 50%; bottom: calc(34 * var(--screen-unit)); transform: translateX(-50%);
  display: flex; align-items: center; gap: calc(12 * var(--screen-unit));
  white-space: nowrap;
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--white);
}
.hero-cue__ring {
  width: calc(26 * var(--screen-unit)); height: calc(26 * var(--screen-unit)); min-width: 20px; min-height: 20px;
  border: 1px solid rgba(232, 244, 255, 0.5); border-radius: 50%;
  background: no-repeat center / 40% 40%
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e8f4ff' stroke-width='1.6'/%3E%3C/svg%3E");
}

/* --- phase B: the text pair around the rotating cube --- */
.hero-b-left {
  position: absolute; top: 50%; left: var(--site-padding-x); transform: translateY(-50%);
  font-size: var(--h2); font-weight: 800; line-height: 1.02;
  letter-spacing: -0.02em; text-transform: uppercase; color: var(--white);
}
.hero-b-right {
  position: absolute; top: 42%; right: var(--site-padding-x);
  width: calc(330 * var(--screen-unit));
  font-size: var(--body2); font-weight: 600; line-height: 1.34; color: var(--white);
}
.hero-b-right sup { color: var(--accent); }
.hero-b-note {
  position: absolute; right: var(--site-padding-x); bottom: calc(34 * var(--screen-unit));
  padding-top: calc(10 * var(--screen-unit));
  border-top: 1px dashed rgba(200, 212, 220, 0.4);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase; text-align: right; color: var(--white);
  opacity: 0;
}

/* Reduced motion / no WebGL2: no track, no scrub — the load state, held still. */
#hero.is-static { height: 100svh; }
#hero.is-static #hero-phaseb { display: none; }

/* ============================================================
   2b · Round 5 — the live-3D intro arc
   Eight beats on one scroll track. The WebGL canvas is a single layer between
   the bench still and the copy; every beat's opacity/transform is written by
   js/scene3d.js off the same scroll progress, so nothing here animates on its
   own and there is no second clock to drift against.
   ============================================================ */
/* R8/A3: 780svh -> 620svh. The last ~1.5 screens of the old track were the dead
   stretch in r011.jpg — the card had already landed and nothing else happened
   before the pin released. Every beat keeps its share of a shorter ruler. */
.has3d #hero { height: 620svh; }
.has3d #hero-scene { display: none; }      /* the live scene IS the hero */
.has3d #ai-static { display: none; }       /* played by the arc instead */
.no3d #stage3d, .no3d #arc-title, .no3d #arc-eq, .no3d #arc-side, .no3d #arc-hint,
.no3d #arc-reveal, .no3d #arc-portable, .no3d #arc-foot, .no3d #arc-spec,
.no3d #arc-rgb, .no3d #arc-card { display: none; }

/* Opaque from frame 0 — there is no still underneath it any more. */
#stage3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1;
}
/* The round-4 load state and B1 text pair carry no z-index of their own, so the
   canvas painted straight over them and B1's copy never appeared on screen. */
.has3d #hero-load, .has3d #hero-phaseb { z-index: 3; }
/* Nav target. On the arc it sits on the hand beat; without WebGL it drops to the
   end of the track, which is exactly where the fallback #ai-static begins. */
.arc-anchor { position: absolute; left: 0; width: 1px; height: 1px; top: 45%; }
.no3d .arc-anchor { top: 100%; }

#hero-pin > #arc-title, #hero-pin > #arc-eq, #hero-pin > #arc-side,
#hero-pin > #arc-hint, #hero-pin > #arc-reveal, #hero-pin > #arc-portable,
#hero-pin > #arc-foot, #hero-pin > #arc-spec, #hero-pin > #arc-card {
  position: absolute; z-index: 3; opacity: 0; margin: 0; pointer-events: none;
}

/* --- B2/B3: the title, resolving character by character out of blur --- */
#arc-title {
  top: calc(96 * var(--screen-unit)); left: 0; right: 0;
  text-align: center; font-size: var(--h1); font-weight: 800;
  line-height: 0.9; letter-spacing: -0.03em; color: var(--white);
}
/* words are unbreakable boxes: with every character its own inline-block the
   headline wrapped mid-word ("por I / A") on a 390px viewport */
#arc-title .w { display: inline-block; white-space: nowrap; }
#arc-title .ch { display: inline-block; will-change: filter; }
#arc-title sup { font-size: 0.26em; color: var(--accent); vertical-align: super; }
/* Under the tail of the title, right-aligned — the reference's ORYZO-1 slot.
   Centring it put the model name straight through the headline's baseline. */
#arc-eq {
  top: calc(258 * var(--screen-unit)); right: 19%; text-align: right;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--accent);
}
#arc-eq b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--silver); letter-spacing: 0; }

/* --- B3: the deadpan triplet, right-aligned like the reference --- */
#arc-side {
  right: var(--site-padding-x); bottom: calc(150 * var(--screen-unit));
  text-align: right; font-size: var(--sub1); font-weight: 700;
  line-height: 1.5; letter-spacing: 0.02em; text-transform: uppercase; color: var(--white);
}

/* --- B4: the hover instruction + the joke it reveals --- */
#arc-hint {
  left: calc(var(--site-padding-x) + 240 * var(--screen-unit));
  bottom: calc(150 * var(--screen-unit));
  display: flex; flex-direction: column; gap: calc(12 * var(--screen-unit));
  align-items: center;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--silver);
  pointer-events: none;
}
#arc-hint .ai-hand { width: calc(24 * var(--screen-unit)); min-width: 17px; fill: none; stroke: var(--silver); stroke-width: 1.4; }
#arc-hint .arc-rule { display: block; width: calc(160 * var(--screen-unit)); min-width: 110px; border-top: 1px dashed rgba(200, 212, 220, 0.5); }
#arc-reveal {
  left: var(--site-padding-x); bottom: calc(268 * var(--screen-unit));
  width: calc(400 * var(--screen-unit)); min-width: 240px;
  font-size: var(--body3); line-height: 1.5; color: var(--silver);
}
#arc-reveal em { color: var(--accent); font-style: italic; }

/* --- B5: "TAN PORTÁTIL," + the measurement overlay --- */
#arc-portable {
  left: var(--site-padding-x); top: 33%;
  font-size: var(--h5); font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--white);
}
#arc-foot {
  right: var(--site-padding-x); bottom: calc(34 * var(--screen-unit));
  padding-top: calc(10 * var(--screen-unit));
  border-top: 1px dashed rgba(200, 212, 220, 0.4);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
}
#arc-spec { inset: 0; --sx: 50%; --sy: 50%; --sr: 200px; --sw: 300px; --sh: 300px; }
#arc-spec i { position: absolute; display: block; }
.arc-spec__ring {
  left: var(--sx); top: var(--sy); width: calc(var(--sr) * 2); height: calc(var(--sr) * 2);
  transform: translate(-50%, -50%); border-radius: 50%;
  border: 1px dashed rgba(232, 244, 255, 0.55);
}
.arc-spec__frame {
  left: var(--sx); top: var(--sy); width: var(--sw); height: var(--sh);
  transform: translate(-50%, -50%); border: 1px dashed rgba(232, 244, 255, 0.45);
}
.arc-spec__tick {
  left: var(--sx); width: calc(1px); height: calc(14 * var(--screen-unit));
  background: rgba(232, 244, 255, 0.7);
}
.arc-spec__tick--t { top: calc(var(--sy) - var(--sh) / 2); }
.arc-spec__tick--b { top: calc(var(--sy) + var(--sh) / 2 - 14 * var(--screen-unit)); }
.arc-spec__dot {
  left: calc(var(--sx) + var(--sw) / 2 - 6px); top: calc(var(--sy) - var(--sh) / 2 - 6px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--white);
}

/* --- B4: the gamer-RGB joke. A conic rainbow, blurred, framing the viewport. --- */
#arc-rgb {
  position: absolute; inset: 0; z-index: 2; opacity: 0;
  pointer-events: none; overflow: hidden;
  --rgb-turn: 0deg;
}
/* A feathered radial mask, not an inset ring: an xor/padding ring leaves a crisp
   rectangle where the mask ends, which read as a lit box rather than a glow. */
#arc-rgb::before {
  content: ""; position: absolute; inset: calc(-10 * var(--screen-unit));
  background: conic-gradient(from var(--rgb-turn),
    #ff2d55, #ff9500, #ffe600, #34ff6a, #00e0ff, #4d6bff, #b34dff, #ff2d55);
  filter: blur(calc(30 * var(--screen-unit))) saturate(1.25);
  -webkit-mask-image: radial-gradient(115% 115% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.45) 62%, #000 88%);
  mask-image: radial-gradient(115% 115% at 50% 50%, transparent 34%, rgba(0, 0, 0, 0.45) 62%, #000 88%);
}

/* --- B7: the gallery's first card rises over the 3D world ---
   R8/A3: this box is now .g-item's box, to the pixel — same height, same 4:3,
   same left gutter, same vertical centring. The pin releases with the card
   already sitting where the gallery is about to draw it, so the seam that
   r011.jpg caught (a card parked at the top of an empty frame, then a screen
   of black before the rail arrived) has nothing left to show. */
#arc-card {
  left: calc(28 * var(--screen-unit)); top: 50%;
  height: min(70svh, 660px); width: auto; aspect-ratio: 4 / 3;
  border: 1px solid rgba(122, 184, 217, 0.16);
  border-radius: calc(16 * var(--screen-unit));
  overflow: hidden;
  transform: translateY(-50%);
}
#arc-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
#arc-card picture > source { display: none; }
.arc-card__dot {
  position: absolute; right: calc(18 * var(--screen-unit)); top: calc(18 * var(--screen-unit));
  width: 7px; height: 7px; border-radius: 50%; background: var(--white);
}

@media (max-width: 767.98px) {
  .has3d #hero { height: 580svh; }
  /* the headline wraps to two lines at 390px, so the model name goes BELOW the
     whole block, not at a fixed offset that lands on the second line */
  #arc-title { font-size: calc(54 * var(--screen-unit)); top: calc(76 * var(--screen-unit)); line-height: 0.95; }
  #arc-eq { top: calc(232 * var(--screen-unit)); left: 0; right: 0; text-align: center; font-size: calc(12 * var(--screen-unit)); }
  .arc-eq__long { display: none; }   /* the full parameter line needs a second row it does not have */
  #arc-side { left: var(--site-padding-x); right: var(--site-padding-x); text-align: left; bottom: calc(190 * var(--screen-unit)); font-size: var(--body3); }
  #arc-hint { left: var(--site-padding-x); bottom: calc(96 * var(--screen-unit)); align-items: flex-start; }
  #arc-reveal { width: auto; right: var(--site-padding-x); bottom: calc(300 * var(--screen-unit)); }
  #arc-portable { top: 24%; }
  /* .g-item on a phone is width-driven, so the handoff card follows it there. */
  #arc-card { left: calc(12 * var(--screen-unit)); width: 86vw; height: auto; }
  #arc-rgb::before { padding: calc(46 * var(--screen-unit)); filter: blur(calc(34 * var(--screen-unit))); }
}

.hero-lede { max-width: calc(560 * var(--screen-unit)); font-size: var(--body2); color: var(--silver); }
#hero-load .video-thumb {
  position: absolute; right: var(--site-padding-x); bottom: calc(52 * var(--screen-unit));
  width: calc(240 * var(--screen-unit)); min-width: 160px;
}
/* ROUND 4: accent border + a real PLAY pill, matching the reference's hero
   thumbnail. Round 3 dimmed the whole frame behind a full-cover gradient label,
   which hid the still it was advertising. */
.video-thumb {
  position: relative; width: calc(300 * var(--screen-unit)); min-width: 180px;
  border-radius: calc(14 * var(--screen-unit)); overflow: hidden;
  border: 1px solid var(--accent);
  box-shadow: 0 0 0 1px rgba(0, 224, 255, 0.18), 0 10px 34px rgba(0, 224, 255, 0.14);
  cursor: pointer;
}
.video-thumb img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
.video-thumb__play {
  position: absolute; left: 50%; bottom: calc(14 * var(--screen-unit));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: calc(8 * var(--screen-unit));
  white-space: nowrap;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--black);
  background: var(--accent);
  border-radius: 999px;
  padding: calc(8 * var(--screen-unit)) calc(18 * var(--screen-unit));
  transition: transform 0.3s ease;
}
.video-thumb:hover .video-thumb__play { transform: translateX(-50%) scale(1.06); }

@media (max-width: 767.98px) {
  /* 390px: the reference's four-corner layout has no room, so the load state
     stacks — mark, copy, then the card and reel thumb side by side at the foot. */
  .hero-tagline { top: calc(72 * var(--screen-unit)); }
  .hero-mark { top: calc(96 * var(--screen-unit)); font-size: calc(96 * var(--screen-unit)); }
  .hero-side {
    top: calc(210 * var(--screen-unit)); left: var(--site-padding-x); right: var(--site-padding-x);
    width: auto; font-size: var(--body3);
  }
  .hero-trust {
    left: var(--site-padding-x); right: auto; bottom: calc(30 * var(--screen-unit));
    width: 48%; min-width: 0; padding: calc(14 * var(--screen-unit));
  }
  .hero-trust__lead { font-size: var(--body3); padding-bottom: calc(14 * var(--screen-unit)); }
  .hero-trust__tail { display: none; }
  #hero-load .video-thumb {
    right: var(--site-padding-x); bottom: calc(30 * var(--screen-unit));
    width: 42%; min-width: 0;
  }
  .hero-cue { display: none; }
  /* Phase B on mobile frames the (now smaller) cube instead of overlapping it. */
  .hero-b-left {
    top: auto; bottom: calc(96 * var(--screen-unit)); transform: none;
    font-size: var(--h3);
  }
  .hero-b-right {
    top: calc(96 * var(--screen-unit)); width: auto; max-width: 70%;
    font-size: var(--body3);
  }
}

/* ============================================================
   3 · AI pitch
   ============================================================ */
#ai { text-align: center; }
.ai-title { font-size: var(--h1); line-height: 0.9; }
.ai-title sup { font-size: 0.3em; color: var(--accent); vertical-align: super; }
.ai-instruction {
  display: inline-flex; align-items: center; gap: calc(10 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--blue); margin-top: calc(32 * var(--screen-unit));
}
.ai-hand { width: calc(22 * var(--screen-unit)); min-width: 16px; fill: var(--accent); }
.ai-footnote {
  margin-top: calc(70 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--body3); color: var(--muted);
}
.ai-reveal {
  display: block; margin: calc(30 * var(--screen-unit)) auto 0;
  max-width: calc(640 * var(--screen-unit));
  font-size: var(--body2); color: var(--silver);
}

/* Round 3: the plate puts the cube dead centre and bright, so the copy cannot
   sit on top of it -- the reference keeps its text pinned to the frame edges and
   lets the product own the middle. Instruction goes left, revealed copy right. */
#ai .ai-instruction {
  position: absolute; left: var(--site-padding-x); top: 46%;
  margin-top: 0; text-align: left; max-width: calc(300 * var(--screen-unit));
}
#ai .ai-reveal {
  position: absolute; right: var(--site-padding-x); top: 44%;
  margin: 0; text-align: right;
  max-width: calc(370 * var(--screen-unit));
  text-shadow: 0 1px 18px rgba(4, 8, 13, 0.9);
}
/* Footnote and cue drop to the section foot so they clear the cube's lit core. */
#ai .ai-footnote { position: absolute; left: 0; right: 0; bottom: calc(112 * var(--screen-unit)); margin: 0; }
#ai .scroll-cue { position: absolute; left: 0; right: 0; bottom: calc(52 * var(--screen-unit)); margin: 0; }
#ai .eyebrow { position: absolute; left: 0; right: 0; top: calc(96 * var(--screen-unit)); z-index: 2; }

@media (max-width: 767.98px) {
  #ai .ai-instruction, #ai .ai-reveal,
  #ai .ai-footnote, #ai .scroll-cue, #ai .eyebrow {
    position: static; max-width: none; text-align: center; margin-top: calc(26 * var(--screen-unit));
  }
}

/* ============================================================
   4 · Gallery (scroll-scrubbed horizontal)
   ============================================================ */
#gallery { padding: 0; }
#gallery-pin { height: 100svh; overflow: hidden; position: relative; display: flex; align-items: center; }
#gallery-track { display: flex; align-items: center; will-change: transform; }
/* Height-driven so the stage fills the pinned viewport; width follows the ratio. */
.g-item {
  position: relative;
  flex: 0 0 auto;
  height: min(70svh, 660px);
  margin-inline: calc(28 * var(--screen-unit));
  border-radius: calc(16 * var(--screen-unit));
  overflow: hidden;
  border: 1px solid rgba(122, 184, 217, 0.16);
}
.g-item img, .g-item video { height: 100%; width: auto; aspect-ratio: 4/3; object-fit: cover; }
.g-item__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(20 * var(--screen-unit));
  background: linear-gradient(to top, rgba(4, 8, 13, 0.9), transparent);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.g-item__idx { color: var(--accent); margin-right: 0.8em; }

/* overlay: warning (yoga) */
.g-warning {
  position: absolute; top: calc(20 * var(--screen-unit)); left: calc(20 * var(--screen-unit));
  right: calc(20 * var(--screen-unit));
  border: 1px solid var(--accent);
  background: rgba(4, 8, 13, 0.72);
  padding: calc(12 * var(--screen-unit)) calc(16 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent);
}
/* overlay: fake chat (swim) */
.g-chat {
  position: absolute; left: calc(24 * var(--screen-unit)); bottom: calc(90 * var(--screen-unit));
  width: calc(420 * var(--screen-unit)); min-width: 210px;
  background: rgba(10, 22, 32, 0.9);
  border: 1px solid rgba(122, 184, 217, 0.28);
  border-radius: calc(14 * var(--screen-unit));
  padding: calc(16 * var(--screen-unit));
  font-size: var(--body3);
}
.g-chat__row { display: flex; gap: calc(10 * var(--screen-unit)); margin-bottom: calc(10 * var(--screen-unit)); }
.g-chat__who { font-family: var(--mono); font-size: var(--sub2); color: var(--accent); min-width: 5.5em; text-transform: uppercase; }
.g-chat__row:last-child { margin-bottom: 0; }
.g-chat__row.is-bot .g-chat__who { color: var(--blue); }

/* magazine finale */
.g-item--mag img { aspect-ratio: 3/4; }
.mag-overlay { position: absolute; inset: 0; padding: calc(28 * var(--screen-unit)); display: flex; flex-direction: column; justify-content: space-between; }
.mag-masthead {
  font-family: var(--display); font-weight: 700;
  font-size: calc(96 * var(--screen-unit));
  letter-spacing: 0.02em; line-height: 0.8;
  text-align: center; color: var(--white);
  mix-blend-mode: difference;
}
.mag-lines { display: flex; flex-direction: column; gap: calc(8 * var(--screen-unit)); }
.mag-line { font-family: var(--display); font-size: var(--h4); text-transform: uppercase; letter-spacing: 0.01em; }
.mag-line em { font-style: normal; color: var(--accent); }
.mag-foot { display: flex; align-items: flex-end; justify-content: space-between; font-family: var(--mono); font-size: var(--sub2); }
.mag-barcode { display: flex; gap: 2px; align-items: flex-end; height: calc(34 * var(--screen-unit)); }
.mag-barcode i { display: block; width: 2px; background: var(--white); height: 100%; }

/* rails */
.g-rail {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  display: flex; flex-direction: column; gap: calc(10 * var(--screen-unit));
  pointer-events: none;
  /* backdrop so the rail reads as chrome over the full-bleed stage, not stray thumbnails */
  padding: calc(10 * var(--screen-unit));
  border-radius: calc(10 * var(--screen-unit));
  background: rgba(4, 8, 13, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(122, 184, 217, 0.14);
}
.g-rail--l { left: calc(18 * var(--screen-unit)); }
.g-rail--r { right: calc(18 * var(--screen-unit)); }
.g-rail img {
  width: calc(56 * var(--screen-unit)); min-width: 34px;
  aspect-ratio: 1; object-fit: cover;
  border-radius: calc(6 * var(--screen-unit));
  opacity: 0.28;
  border: 1px solid transparent;
  transition: opacity 0.35s ease, border-color 0.35s ease;
}
.g-rail img.is-active { opacity: 1; border-color: var(--accent); }
.g-progress {
  position: absolute; bottom: calc(28 * var(--screen-unit)); left: 50%; transform: translateX(-50%);
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.16em; z-index: 5;
}
.g-progress b { color: var(--accent); font-weight: 400; }

@media (max-width: 767.98px) {
  /* Width-driven on mobile: height-driven 4:3 items end up wider than the viewport. */
  .g-item { height: auto; width: 86vw; margin-inline: calc(12 * var(--screen-unit)); }
  .g-item img, .g-item video { width: 100%; height: auto; }
  .g-rail { display: none; }
  .g-chat { width: 70%; bottom: calc(70 * var(--screen-unit)); }
  .mag-masthead { font-size: calc(46 * var(--screen-unit)); }
}

/* ============================================================
   5 · Features
   ============================================================ */
.section-head { margin-bottom: calc(60 * var(--screen-unit)); }
/* Half the sections put .section-head on a wrapping div, half put it straight on
   the <h2>. The descendant selector only covered the first shape, so those other
   headings silently fell back to the UA default (~27px against a 51px token) --
   which is most of why the page read timid. Both shapes are matched now. */
.section-head h2, h2.section-head { font-size: var(--h2); margin-top: calc(14 * var(--screen-unit)); max-width: 18ch; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.feature-card {
  border: 1px solid rgba(122, 184, 217, 0.18);
  border-radius: calc(16 * var(--screen-unit));
  padding: calc(28 * var(--screen-unit));
  background: linear-gradient(160deg, rgba(13, 31, 43, 0.7), rgba(4, 8, 13, 0.2));
}
.feature-card h3 { font-size: var(--h4); margin-bottom: calc(12 * var(--screen-unit)); }
.feature-card p { font-size: var(--body3); color: var(--silver); }
.feature-card__no { font-family: var(--mono); font-size: var(--sub2); color: var(--accent); margin-bottom: calc(22 * var(--screen-unit)); }
.feature-card__eq {
  margin-top: calc(22 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); color: var(--muted);
  border-top: 1px solid rgba(200, 212, 220, 0.12);
  padding-top: calc(12 * var(--screen-unit));
}

#features-curve {
  margin-top: calc(70 * var(--screen-unit));
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(50 * var(--screen-unit)); align-items: center;
}
#features-curve-canvas { width: 100%; height: calc(320 * var(--screen-unit)); min-height: 200px; }

/* temperature slider */
.temp { margin-top: calc(30 * var(--screen-unit)); }
.temp__label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: calc(14 * var(--screen-unit)); }
.temp__label b { color: var(--accent); font-weight: 400; }
#temp-bar {
  position: relative; height: calc(46 * var(--screen-unit)); min-height: 34px;
  border: 1px solid rgba(122, 184, 217, 0.3);
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(0, 224, 255, 0.05), rgba(0, 224, 255, 0.22));
  cursor: grab;
  touch-action: none;
}
#temp-bar.is-drag { cursor: grabbing; }
#temp-knob {
  position: absolute; top: 50%; left: 50%;
  width: calc(38 * var(--screen-unit)); height: calc(38 * var(--screen-unit));
  min-width: 26px; min-height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 1em var(--accent);
  pointer-events: none;
}
.temp__ticks { display: flex; justify-content: space-between; margin-top: calc(12 * var(--screen-unit)); font-family: var(--mono); font-size: var(--sub2); color: var(--muted); }
.temp__ticks span.is-on { color: var(--accent); }
.temp__read { margin-top: calc(16 * var(--screen-unit)); font-size: var(--body3); color: var(--silver); min-height: 3em; }

@media (max-width: 767.98px) {
  .feature-grid { grid-template-columns: 1fr; }
  #features-curve { grid-template-columns: 1fr; }
}

/* ============================================================
   6 · Encode / decode
   ============================================================ */
#encode { text-align: center; }
.encode-field {
  position: relative;
  max-width: calc(760 * var(--screen-unit));
  margin: calc(40 * var(--screen-unit)) auto 0;
}
.encode-field input {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(122, 184, 217, 0.4);
  text-align: center;
  font-family: var(--display);
  font-size: var(--h3);
  padding: calc(14 * var(--screen-unit)) 0;
  outline: none;
}
.encode-field input:focus { border-bottom-color: var(--accent); }
.encode-lines { display: flex; justify-content: center; gap: calc(6 * var(--screen-unit)); margin-top: calc(18 * var(--screen-unit)); }
.encode-lines i { display: block; width: calc(26 * var(--screen-unit)); height: 1px; background: rgba(122, 184, 217, 0.4); }
#encode-btn {
  margin-top: calc(34 * var(--screen-unit));
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: 999px;
  padding: calc(14 * var(--screen-unit)) calc(34 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--btn); text-transform: uppercase; letter-spacing: 0.14em;
}
#encode-out {
  margin-top: calc(26 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--body3); color: var(--muted);
  word-break: break-all; min-height: 2em;
  max-width: calc(760 * var(--screen-unit)); margin-inline: auto;
}

/* ============================================================
   7 · Grip / zoom lens
   ============================================================ */
#grip-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: calc(50 * var(--screen-unit)); align-items: center; }
#grip-zoom-box {
  position: relative; overflow: hidden;
  border-radius: calc(16 * var(--screen-unit));
  border: 1px solid rgba(122, 184, 217, 0.2);
  aspect-ratio: 16/10;
  cursor: none;
}
#grip-zoom-box img { width: 100%; height: 100%; object-fit: cover; }
#grip-lens {
  position: absolute; width: calc(210 * var(--screen-unit)); height: calc(210 * var(--screen-unit));
  min-width: 120px; min-height: 120px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  box-shadow: inset 0 0 0.75em rgba(0, 224, 255, 0.5), 0 0 24px rgba(0, 224, 255, 0.25);
  background-repeat: no-repeat;
  background-size: 280% 280%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#grip-zoom-box:hover #grip-lens { opacity: 1; }
.grip-read {
  position: absolute; right: calc(18 * var(--screen-unit)); bottom: calc(18 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  background: rgba(4, 8, 13, 0.78);
  border: 1px solid rgba(122, 184, 217, 0.25);
  padding: calc(10 * var(--screen-unit)) calc(14 * var(--screen-unit));
  border-radius: calc(8 * var(--screen-unit));
  letter-spacing: 0.08em;
}
.grip-read b { color: var(--accent); font-weight: 400; }
.grip-instruction {
  display: inline-flex; align-items: center; gap: calc(10 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); color: var(--blue);
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-top: calc(26 * var(--screen-unit));
}
.grip-wheel { width: 16px; height: 22px; border: 1px solid var(--blue); border-radius: 999px; position: relative; }
.grip-wheel::after {
  content: ""; position: absolute; left: 50%; top: 4px; width: 2px; height: 5px;
  background: var(--accent); transform: translateX(-50%);
  animation: wheel-dash 1.8s ease-in-out infinite;
}
@keyframes wheel-dash { 0%, 100% { opacity: 0; transform: translate(-50%, 0); } 40% { opacity: 1; transform: translate(-50%, 6px); } }

@media (max-width: 767.98px) { #grip-stage { grid-template-columns: 1fr; } }

/* ============================================================
   8 · Sustainability
   ============================================================ */
#sustain { background: var(--pale); color: var(--pale-ink); }
#sustain .eyebrow { color: #3d6b85; }
#sustain .rule { background: rgba(6, 18, 27, 0.15); }
.sustain-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin-top: calc(50 * var(--screen-unit)); }
/* ROUND 4: real glacial-blue cards carrying hand-drawn line art. Round 3 had a
   photographic plate here like every other section; the reference's equivalent
   block is illustrated, and the page needs one section with no photograph in it. */
.stat {
  border: 1px solid rgba(29, 74, 96, 0.22);
  border-radius: calc(16 * var(--screen-unit));
  padding: calc(28 * var(--screen-unit));
  background: linear-gradient(165deg, rgba(196, 222, 238, 0.75), rgba(226, 240, 249, 0.5));
}
.stat__n { font-family: var(--display); font-size: var(--h2); line-height: 1; }
.stat__u { font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.12em; color: #3d6b85; margin-top: calc(8 * var(--screen-unit)); }
.stat__d { font-size: var(--body3); color: #33505f; margin-top: calc(12 * var(--screen-unit)); }
/* Illustration leads the card, the number follows it. */
.stat__svg { width: 100%; height: calc(150 * var(--screen-unit)); min-height: 104px; margin-bottom: calc(22 * var(--screen-unit)); }
.stat__svg .s-line {
  fill: none; stroke: #1d4a60;
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
  /* Long enough to cover the longest path here; short values leave a permanent gap. */
  stroke-dasharray: 900; stroke-dashoffset: 900;
}
.stat.is-in .s-line { animation: s-draw 2s ease forwards; }
@keyframes s-draw { to { stroke-dashoffset: 0; } }
.stat__svg .s-pulse { fill: #0f8fb0; transform-origin: center; }
.stat.is-in .s-pulse { animation: s-pulse 2.4s ease-in-out infinite; }
@keyframes s-pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
.stat__svg .s-rot { transform-origin: center; }
.stat.is-in .s-rot { animation: s-rot 26s linear infinite; }
@keyframes s-rot { to { transform: rotate(360deg); } }
/* The two "cycle" drawings get a dashed orbit that keeps turning after the draw-in. */
.stat__svg .s-orbit { stroke-dasharray: 6 7; stroke-dashoffset: 0; opacity: 0.65; }
.stat.is-in .s-orbit { animation: s-orbit 3.2s linear infinite; }
@keyframes s-orbit { to { stroke-dashoffset: -26; } }
.sustain-aside { margin-top: calc(40 * var(--screen-unit)); font-family: var(--mono); font-size: var(--body3); color: #33505f; }

@media (max-width: 767.98px) { .sustain-grid { grid-template-columns: 1fr; } }

/* ============================================================
   9 · Testimonies
   ============================================================ */
/* R8/B5 · the carousel. The viewport is a native overflow-x scroller: swipe,
   trackpad and keyboard come free, JS only adds drift, pointer-drag and dots. */
.vc {
  overflow-x: auto; overflow-y: hidden;
  margin-inline: calc(var(--site-padding-x) * -1);
  padding-inline: var(--site-padding-x);
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab;
  /* the drag handler needs the pointer stream, not the browser's pan gesture */
  touch-action: pan-y;
}
.vc::-webkit-scrollbar { display: none; }
.vc.is-drag { cursor: grabbing; }
.vc-track { display: flex; gap: var(--gap); width: max-content; }
.vc-card {
  flex: 0 0 calc(62 * var(--inner-width) / 100);
  display: grid; grid-template-columns: calc(230 * var(--screen-unit)) minmax(0, 1fr);
  gap: calc(34 * var(--screen-unit)); align-items: center;
  padding: calc(30 * var(--screen-unit));
  /* dotted, like every other hairline the reference draws */
  border: 1px dotted rgba(200, 212, 220, 0.3);
  background: linear-gradient(160deg, rgba(13, 31, 43, 0.72), rgba(4, 8, 13, 0.44));
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.vc-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.vc-card * { user-select: none; -webkit-user-drag: none; }
.vc-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: calc(20 * var(--screen-unit)); }
.vc-dots { display: flex; gap: calc(10 * var(--screen-unit)); justify-content: center; margin-top: calc(34 * var(--screen-unit)); }
.vc-dots button {
  width: calc(9 * var(--screen-unit)); height: calc(9 * var(--screen-unit));
  min-width: 7px; min-height: 7px;
  border-radius: 50%; background: rgba(200, 212, 220, 0.3);
  transition: background-color 0.3s ease, transform 0.3s ease;
}
.vc-dots button.is-on { background: var(--accent); transform: scale(1.35); }
.voice-who { font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.14em; color: var(--white); }
.voice-role { font-family: var(--mono); font-size: var(--sub2); color: var(--blue); text-transform: uppercase; letter-spacing: 0.1em; margin-top: calc(4 * var(--screen-unit)); }
/* The reference leads each row with the QUOTE at display scale and drops the
   name to a mono microlabel. Round 2 had it the other way round, which is why
   this section read like a support-ticket list. */
.voice-quote {
  font-family: var(--display); font-weight: 700;
  font-size: var(--quote); line-height: 1.12; letter-spacing: -0.015em;
  color: var(--white); margin-bottom: calc(16 * var(--screen-unit));
  max-width: 40ch;
}
.voice-quote em { font-style: normal; color: var(--accent); }
.stars { font-size: var(--body3); color: var(--accent); letter-spacing: 0.2em; white-space: nowrap; }
.stars small { display: block; font-family: var(--mono); font-size: var(--sub2); color: var(--muted); letter-spacing: 0.12em; margin-top: calc(6 * var(--screen-unit)); }

@media (max-width: 767.98px) {
  /* One card, nearly full width, with the next edge showing so the swipe is
     discoverable. The portrait goes on top: a 112px thumbnail beside the quote
     was illegible, which is what round 4 already found. */
  .vc-card {
    flex-basis: calc(86 * var(--inner-width) / 100);
    grid-template-columns: 1fr; gap: calc(20 * var(--screen-unit));
    padding: calc(20 * var(--screen-unit));
  }
  .vc-card img { aspect-ratio: 16 / 10; }
  .vc-foot { flex-direction: column; align-items: flex-start; gap: calc(10 * var(--screen-unit)); }
}

/* ============================================================
   10 · Social moodboard
   ============================================================ */
/* R8/B3: a strict 2x2. Four equal cells, no spans, no mixed aspect ratios — the
   masonry's ragged right edge was half of why the block read as filler. Cell
   shape is set by aspect-ratio on the tile, so every plate is cover-cropped to
   the SAME box whatever its source ratio (two of them are portrait). */
.social-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  align-items: stretch;
  /* full-bleed: the moodboard breaks the page gutter like the reference's does */
  margin-inline: calc(var(--site-padding-x) * -1);
}
/* Round 3: the reference's moodboard is edge-to-edge -- no gaps, no rounded
   corners, and the caption is display type laid ACROSS the image, not a chip
   tucked in a corner. Round 2's gapped, rounded, small-caption grid is what
   made this section read like a stock card layout. */
.tile { position: relative; overflow: hidden; aspect-ratio: 16 / 10; }
.tile picture { display: block; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; }
/* One grade for all four: the sources are a magenta GPU rig, a white sweep, a
   grey floor and a brown desk. Desaturate, then push the remaining hue to the
   page's blue with a partial `color` blend — enough to make them one set, not
   so much that the GPU's neon reads as flat. */
.social-grid .tile img { filter: saturate(0.5) brightness(0.93) contrast(1.08); }
.social-grid .tile::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(170deg, rgba(28, 92, 130, 0.55), rgba(10, 38, 58, 0.62));
  mix-blend-mode: color;
}
.tile__cap {
  z-index: 2;
  position: absolute; left: 0; right: 0; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  padding: calc(34 * var(--screen-unit));
  background: linear-gradient(to right, rgba(4, 8, 13, 0.74) 0%, rgba(4, 8, 13, 0.28) 55%, transparent 100%);
  font-family: var(--display); font-weight: 700; font-size: var(--h3);
  line-height: 1.02; letter-spacing: -0.02em;
  text-wrap: balance;
}
.tile__cap small { display: block; font-family: var(--mono); font-weight: 400; font-size: var(--sub2); color: var(--blue); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: calc(14 * var(--screen-unit)); }
#social-content-progress { display: none; }

@media (max-width: 767.98px) {
  /* One column at 390: a 195px-wide cell cannot carry a display-type caption. */
  .social-grid { grid-template-columns: 1fr; }
  .tile { aspect-ratio: 4 / 3; }
  .tile__cap { font-size: var(--h4); }
  #social-content-progress { display: flex; gap: 6px; justify-content: center; margin-top: calc(20 * var(--screen-unit)); }
  #social-content-progress i { width: 5px; height: 5px; border-radius: 50%; background: rgba(200, 212, 220, 0.3); }
  #social-content-progress i.is-on { background: var(--accent); }
}

/* ============================================================
   11 · Product tiers + spec table
   ============================================================ */
.sku-picker { display: flex; gap: calc(12 * var(--screen-unit)); flex-wrap: wrap; }
.sku-btn {
  border: 1px solid rgba(122, 184, 217, 0.3);
  border-radius: 999px;
  padding: calc(12 * var(--screen-unit)) calc(28 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--btn); text-transform: uppercase; letter-spacing: 0.12em;
}
.sku-btn.is-on { border-color: var(--accent); color: var(--accent); background: rgba(0, 224, 255, 0.08); }
#product-details {
  margin-top: calc(36 * var(--screen-unit));
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--screen-unit)); align-items: center;
}
#product-details h3 { font-size: var(--h2); }
#product-details .p-sub { font-family: var(--mono); font-size: var(--sub2); color: var(--accent); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: calc(14 * var(--screen-unit)); }
#product-details p { font-size: var(--body3); color: var(--silver); margin-top: calc(16 * var(--screen-unit)); }
#product-details img { border-radius: calc(14 * var(--screen-unit)); aspect-ratio: 4/3; object-fit: cover; }
.spec-table { width: 100%; border-collapse: collapse; margin-top: calc(70 * var(--screen-unit)); font-size: var(--body3); }
.spec-table th, .spec-table td { text-align: left; padding: calc(16 * var(--screen-unit)) calc(12 * var(--screen-unit)); border-bottom: 1px solid rgba(200, 212, 220, 0.14); }
.spec-table thead th { font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.12em; color: var(--blue); }
.spec-table tbody th { font-weight: 400; color: var(--silver); }
.spec-table td { color: var(--white); }
.spec-wrap { overflow-x: auto; }

@media (max-width: 767.98px) {
  #product-details { grid-template-columns: 1fr; }
  .spec-table { min-width: 520px; }
}

/* ============================================================
   12 · Fake paper
   ============================================================ */
#paper { background: var(--pale); color: var(--pale-ink); font-family: var(--serif); }
#paper .eyebrow { color: #3d6b85; font-family: var(--mono); }
.paper-title { font-family: var(--serif); font-weight: 600; font-size: var(--h3); max-width: 28ch; line-height: 1.15; margin-top: calc(16 * var(--screen-unit)); letter-spacing: -0.01em; }
.paper-authors { font-size: var(--body3); color: #33505f; margin-top: calc(16 * var(--screen-unit)); font-style: italic; }
.paper-arxiv { font-family: var(--mono); font-size: var(--sub2); color: #3d6b85; margin-top: calc(8 * var(--screen-unit)); }
.paper-body { display: grid; grid-template-columns: 1fr 1fr; gap: calc(50 * var(--screen-unit)); margin-top: calc(50 * var(--screen-unit)); }
.paper-body h4 { font-family: var(--serif); font-size: var(--body1); margin-bottom: calc(10 * var(--screen-unit)); font-weight: 600; }
.paper-body p { font-size: var(--body3); line-height: 1.6; margin-bottom: calc(22 * var(--screen-unit)); }
.paper-body pre {
  font-family: var(--mono); font-size: var(--sub2); line-height: 1.7;
  background: rgba(6, 18, 27, 0.06);
  border-left: 2px solid #0f8fb0;
  padding: calc(18 * var(--screen-unit));
  overflow-x: auto;
}
.paper-links { display: flex; gap: calc(20 * var(--screen-unit)); margin-top: calc(30 * var(--screen-unit)); font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.12em; flex-wrap: wrap; }
.paper-links a { border-bottom: 1px solid #0f8fb0; color: #0d5f78; }

@media (max-width: 767.98px) { .paper-body { grid-template-columns: 1fr; } }

/* ============================================================
   12c · ROUND 8 · W3 — the melt finale
   A sticky stage over a two-screen track. The canvas melts the cube; the claim
   rises out of the puddle. Without WebGL the section collapses to its final
   state, which is the claim on black — i.e. exactly what the footer used to
   open with, so nothing is lost on that path.
   ============================================================ */
#melt { position: relative; height: 210svh; background: var(--black); }
/* The claim sits in the UPPER third: the puddle spreads across the lower half,
   and a line set on top of it is a line nobody can read. */
#melt-pin {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 15svh var(--site-padding-x) 0;
}
#melt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 26ch, not the footer's 20ch: two lines clear the puddle, three do not. */
#melt-claim { position: relative; z-index: 2; text-align: center; max-width: 26ch; }
/* No WebGL / reduced motion: no track, no stage — just the line. */
.no3d #melt { height: auto; }
.no3d #melt-pin { position: static; height: auto; padding-block: var(--section-y); }
.no3d #melt-canvas { display: none; }
@media (max-width: 767.98px) { #melt { height: 190svh; } }

/* ============================================================
   13 · Footer
   ============================================================ */
#footer { padding-block: calc(30 * var(--screen-unit)) calc(70 * var(--screen-unit)); text-align: center; }
.footer-punch { font-size: var(--h2); max-width: 20ch; margin-inline: auto; line-height: 1.02; }
.footer-punch em { font-style: normal; color: var(--accent); }
.footer-sub { font-size: var(--body2); color: var(--silver); max-width: calc(640 * var(--screen-unit)); margin: calc(26 * var(--screen-unit)) auto 0; }
.footer-cta {
  display: inline-block; margin-top: calc(36 * var(--screen-unit));
  border: 1px solid var(--accent); color: var(--accent);
  border-radius: 999px;
  padding: calc(15 * var(--screen-unit)) calc(38 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--btn); text-transform: uppercase; letter-spacing: 0.14em;
}
.footer-meta {
  margin-top: calc(70 * var(--screen-unit));
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: calc(14 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.1em;
}
.footer-meta a { color: var(--blue); }

/* ---- Video lightbox ---- */
#video-overlay {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(4, 8, 13, 0.94);
  display: none; place-items: center;
  padding: var(--site-padding-x);
}
#video-overlay.is-open { display: grid; }
#video-overlay video { width: min(100%, 1100px); border-radius: calc(12 * var(--screen-unit)); }
#video-overlay .close {
  position: absolute; top: calc(24 * var(--screen-unit)); right: var(--site-padding-x);
  font-family: var(--mono); font-size: var(--body3); text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent);
}

/* ============================================================
   Reduced motion — kill hijack + parallax, static layout
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  #canvas { display: none; }
  #gallery-pin { height: auto; overflow-x: auto; padding-block: calc(40 * var(--screen-unit)); }
  #gallery-track { transform: none !important; }
  .g-rail { display: none; }
  .tile { transform: none !important; }
}

/* ============================================================
   ROUND 3 — parity layer
   Three deltas from the section-by-section comparison against the
   reference (.qa/pairs/*), in order of how much they cost us:

   1. GROUND. Every reference section is a full-bleed art-directed
      photograph with the copy laid over it. Round 2 sat every section on
      flat near-black, which is what made the page read empty.
   2. RHYTHM. The reference alternates dark sections with a pale block and
      drops full-bleed macro-texture beats between them. Round 2 was one
      uniform dark tone from top to bottom.
   3. DECORATION. The reference carries a constant technical layer --
      dotted rules, DM-Mono microlabels, equation flourishes, side tabs,
      corner dots, a repeated scroll cue. Round 2 had almost none of it.
   ============================================================ */

/* ---- 1 · Section grounds -------------------------------------------- */
.section { isolation: isolate; }
.sec-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sec-bg img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim: a horizontal wash on the copy side plus a vertical vignette, so the
   plate stays photographic in the open areas and never fights the type. */
.sec-bg img { filter: brightness(1.16) saturate(1.05); }
.sec-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(4, 8, 13, 0.94) 0%, rgba(4, 8, 13, 0.62) 30%, rgba(4, 8, 13, 0.06) 62%, transparent 100%),
    linear-gradient(to bottom, var(--black) 0%, transparent 18%, transparent 82%, var(--black) 100%);
}
/* For sections whose copy is CENTRED there is no quiet side to hide in, so the
   plate takes an even veil instead of a directional wash. */
.sec-bg--veil img { filter: brightness(0.82) saturate(1.02); }
.sec-bg--veil::after {
  background:
    linear-gradient(to bottom, var(--black) 0%, rgba(4, 8, 13, 0.66) 26%, rgba(4, 8, 13, 0.68) 74%, var(--black) 100%);
}
.sec-bg--center::after {
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(4, 8, 13, 0.05) 0%, rgba(4, 8, 13, 0.72) 72%, var(--black) 100%),
    linear-gradient(to bottom, var(--black) 0%, transparent 22%, transparent 78%, var(--black) 100%);
}
/* Sections now carry a plate, so they get a full screen to show it. */
#ai, #features, #encode, #sustain, #voices, #social, #product, #paper, #footer {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
}
/* Flex blockifies inline-block children, which stretched the pill CTAs into
   full-width bars. They opt back out rather than the layout being unpicked. */
.footer-cta, #encode-btn { align-self: center; }
/* Centre-composed sections: the 18ch measure on the heading left the block
   hanging off-centre while its text was centred inside it. */
#encode h2.section-head { margin-inline: auto; }

/* ---- 2 · Rhythm: the pale block + the macro transition beats --------- */
/* ROUND 4. Round 3 had exactly ONE light section (#paper), so the page was a
   near-uninterrupted dark scroll and every section read the same. The reference
   cycles four formats: dark scene -> pale block -> daylight environment ->
   colour-field. `.is-light` re-points the palette tokens locally, so any section
   can take the pale treatment and every child follows automatically. */
.is-light {
  --white: #08131c;
  --silver: #24404f;
  --muted: #59788c;
  --blue: #2c6b8d;
  --accent: #0090b8;
  color: var(--white);
}
/* Pale scrim: for the sections that carry dark ink. */
.is-light .sec-bg::after, .sec-bg--pale::after {
  background: linear-gradient(to bottom, rgba(232, 242, 250, 0.9) 0%, rgba(226, 238, 248, 0.82) 50%, rgba(232, 242, 250, 0.94) 100%);
}
.sec-bg--pale img { filter: brightness(1.1) saturate(0.9); }
/* The decorative layer is drawn in light ink by default; on the pale blocks it
   has to flip too, or the flourishes and cues vanish. */
#sustain .scroll-cue, .is-light .scroll-cue { color: #35566a; }
#sustain .scroll-cue i, .is-light .scroll-cue i { border-color: rgba(6, 18, 27, 0.34); }
#sustain .deco-eq, .is-light .deco-eq { color: #4d6c7e; }
#sustain .deco-eq b, .is-light .deco-eq b { color: #21384a; }
#sustain .deco-dots, .is-light .deco-dots { border-top-color: rgba(6, 18, 27, 0.3); }
.is-light pre { background: rgba(8, 19, 28, 0.06); border-color: rgba(8, 19, 28, 0.14); }
.is-light .paper-links a, .is-light .pill-btn { border-color: rgba(8, 19, 28, 0.3); }

/* ---- ROUND 4 · the four-format rhythm -------------------------------- */
/* Each light block gets its OWN ground temperature, so three pale sections in
   one page still read as three different places rather than one long white run:
   #encode frost-blue, #product cool white, #paper warm cream. */
#encode.is-light { --pale-ground: #e2eef7; }
#product.is-light { --pale-ground: #eef4f8; }
#paper.is-light { --pale-ground: #f2ece1; }
/* #product carries no plate, so its ground is drawn on the section itself. */
#product.is-light { background: linear-gradient(to bottom, #e7eff6, var(--pale-ground) 45%, #e4edf5); }
#encode.is-light .sec-bg::after,
#product.is-light .sec-bg::after,
#paper.is-light .sec-bg::after {
  background: linear-gradient(to bottom,
    color-mix(in srgb, var(--pale-ground) 92%, transparent) 0%,
    color-mix(in srgb, var(--pale-ground) 86%, transparent) 50%,
    var(--pale-ground) 100%);
}
/* The encode field is drawn in light ink; on the frost block it has to flip. */
#encode.is-light .encode-field input { border-bottom-color: rgba(8, 19, 28, 0.35); }
#encode.is-light .encode-lines i { background: rgba(8, 19, 28, 0.3); }

/* 04 Features: the DAYLIGHT beat. A full-bleed sunlit environment with the copy
   floating on top -- so the scrim must stay light and the cards must thin out,
   or the photograph might as well not be there. */
#features.is-light .sec-bg::after {
  background:
    linear-gradient(to right, rgba(240, 246, 251, 0.82) 0%, rgba(240, 246, 251, 0.44) 44%, rgba(240, 246, 251, 0.16) 100%),
    linear-gradient(to bottom, rgba(240, 246, 251, 0.95) 0%, transparent 22%, transparent 74%, rgba(240, 246, 251, 0.95) 100%);
}
#features.is-light .sec-bg img { filter: brightness(1.06) saturate(1.04); }
#features.is-light .feature-card {
  background: rgba(255, 255, 255, 0.52);
  border-color: rgba(8, 19, 28, 0.16);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
#features.is-light .feature-card__eq { border-top-color: rgba(8, 19, 28, 0.16); }
#features.is-light #temp-bar { border-color: rgba(8, 19, 28, 0.28); background: linear-gradient(90deg, rgba(0, 144, 184, 0.06), rgba(0, 144, 184, 0.26)); }
#features.is-light .spec-table th, #features.is-light .spec-table td { border-bottom-color: rgba(8, 19, 28, 0.14); }

/* 10 Product: pale block -- the spec table's hairlines are drawn for dark ink. */
#product.is-light .spec-table th, #product.is-light .spec-table td { border-bottom-color: rgba(8, 19, 28, 0.16); }
#product.is-light .sku-btn { border-color: rgba(8, 19, 28, 0.28); }
#product.is-light .sku-btn.is-on { border-color: var(--accent); color: var(--accent); background: rgba(0, 144, 184, 0.08); }
#product.is-light .mono-rail { border-block-color: rgba(8, 19, 28, 0.18); }
/* Frost-white sweep renders: let the sweep merge into the section ground
   instead of sitting in a hard-edged photo box. */
#product.is-light #product-details img { background: #fff; border: 1px solid rgba(8, 19, 28, 0.08); }

/* Chrome over a pale ground: the outline RESERVAR pill and the wordmark chip are
   both drawn for a dark backdrop and vanish on the light blocks. */
#header.is-over-light .brand { background: rgba(255, 255, 255, 0.72); border-color: rgba(8, 19, 28, 0.16); color: #08131c; }
#header.is-over-light .brand span { color: #0090b8; }
#header.is-over-light .pill-nav { background: rgba(255, 255, 255, 0.72); border-color: rgba(8, 19, 28, 0.16); color: #08131c; }
#header.is-over-light .nav-cta { background: #0090b8; border-color: #0090b8; color: #fff; }
#header.is-over-light .menu-btn { background: rgba(255, 255, 255, 0.78); border-color: rgba(8, 19, 28, 0.2); color: #08131c; }
#header .brand, #header .pill-nav, #header .nav-cta, #header .menu-btn {
  transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease;
}

/* Eased section handoffs: a shared ground colour bleeds out of the top and foot
   of every light block, so the page never hard-cuts from dark to pale. */
/* The bands sit at z-index -1 and the plate drops to -2, so the stack is
   plate -> handoff band -> content without touching `position` on any child.
   (An earlier attempt used `.is-light > * { position: relative }` to lift the
   content instead; that has the same specificity as `.sec-bg { position:
   absolute }` and, coming later, silently pulled every background plate into
   normal flow and pushed each section's content down past the fold.) */
.is-light::before, .is-light::after, #sustain::before, #sustain::after {
  content: ""; position: absolute; left: 0; right: 0; height: calc(120 * var(--screen-unit));
  pointer-events: none; z-index: -1;
}
.is-light::before, #sustain::before { top: 0; background: linear-gradient(to bottom, #04080d, transparent); opacity: 0.3; }
.is-light::after, #sustain::after { bottom: 0; background: linear-gradient(to top, #04080d, transparent); opacity: 0.3; }
.is-light > .sec-bg, #sustain > .sec-bg { z-index: -2; }

/* ---- R8/W4 · the seam sweep ------------------------------------------ */
/* R8 cut two full-bleed beats out of the lower page (B1, B4), which left the
   remaining sections butting straight against each other. Instead of putting
   photographs back in, each boundary gets a soft band of light that travels
   across it while the seam is in view — the transition without the payload.
   z-index -1 puts it over the section's plate and under all of its copy. */
.seam {
  position: absolute; left: 0; right: 0; top: 0; z-index: -1;
  height: calc(150 * var(--screen-unit));
  overflow: hidden; pointer-events: none;
}
.seam::before {
  content: ""; position: absolute; top: 0; bottom: 0;
  left: var(--sx, -60%); width: 58%;
  background: linear-gradient(90deg, transparent, rgba(150, 220, 255, 0.14) 45%, rgba(190, 240, 255, 0.2) 55%, transparent);
  filter: blur(calc(26 * var(--screen-unit)));
}
/* Over a pale block the same band has to be a shadow, not a highlight. */
.is-light > .seam::before, #sustain > .seam::before {
  background: linear-gradient(90deg, transparent, rgba(20, 70, 100, 0.1) 45%, rgba(12, 52, 76, 0.14) 55%, transparent);
}

/* Full-bleed macro beat: a texture plate on its own, no copy -- the reference
   uses these as the seam between two sections instead of a hard cut. */
.macro-beat { position: relative; height: 74vh; overflow: hidden; }
.macro-beat img { width: 100%; height: 100%; object-fit: cover; }
.macro-beat::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--black) 0%, transparent 20%, transparent 80%, var(--black) 100%);
}
.macro-beat__label {
  position: absolute; left: var(--site-padding-x); bottom: calc(30 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--silver);
}
/* The warm seam sits BETWEEN two pale blocks, so it has to feather into their
   grounds; the default beat fades to near-black at both edges and would read as
   two hard bands across the light end of the page. */
.macro-beat--warm { height: 52vh; }
.macro-beat--warm::after {
  background: linear-gradient(to bottom, #050c13 0%, transparent 26%, transparent 74%, #f2ece1 100%);
}
.macro-beat--warm .macro-beat__label { color: #f4e6d2; }
@media (max-width: 767.98px) { .macro-beat--warm { height: 34vh; } }

/* ---- 3 · The decorative layer ---------------------------------------- */
/* Equation flourish, pinned to a section's lower right like the reference's
   "Constant lift via geometry  dh ~ t". */
.deco-eq {
  position: absolute; right: var(--site-padding-x); bottom: calc(34 * var(--screen-unit));
  display: flex; align-items: baseline; gap: calc(16 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
  pointer-events: none;
}
.deco-eq b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: var(--h4); color: var(--silver); letter-spacing: 0; text-transform: none; }
.deco-eq--left { right: auto; left: var(--site-padding-x); }

/* Dotted rule: the reference's hairline of choice, never a solid 1px. */
.deco-dots { height: 0; border-top: 1px dotted rgba(200, 212, 220, 0.34); }
.deco-dots--short { width: calc(250 * var(--screen-unit)); }

/* Corner dot marker. */
.deco-dot {
  position: absolute; width: calc(7 * var(--screen-unit)); height: calc(7 * var(--screen-unit));
  border-radius: 50%; background: var(--silver); opacity: 0.8;
  top: calc(26 * var(--screen-unit)); left: var(--site-padding-x);
}

/* Vertical side tab (hero, right edge). */
.side-tab {
  position: absolute; top: 0; right: 0; z-index: 4;
  writing-mode: vertical-rl;
  background: var(--pale); color: var(--pale-ink);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.2em; text-transform: uppercase;
  padding: calc(22 * var(--screen-unit)) calc(11 * var(--screen-unit));
  display: flex; align-items: center; gap: calc(12 * var(--screen-unit));
}
.side-tab::before {
  content: ""; width: calc(6 * var(--screen-unit)); height: calc(6 * var(--screen-unit));
  border-radius: 50%; background: var(--pale-ink);
}

/* Mono microlabel rail -- the reference's "ANCIENT GREECE. C. 500 BCE" strip. */
.mono-rail {
  display: flex; justify-content: space-between; gap: var(--gap);
  border-block: 1px solid rgba(200, 212, 220, 0.16);
  padding-block: calc(14 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted);
}
.mono-rail span { white-space: nowrap; }

/* Repeated scroll cue, centred at a section's foot. */
.scroll-cue {
  display: flex; align-items: center; justify-content: center; gap: calc(12 * var(--screen-unit));
  margin-top: calc(56 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--silver);
}
.scroll-cue i {
  width: calc(26 * var(--screen-unit)); height: calc(26 * var(--screen-unit));
  border: 1px solid rgba(200, 212, 220, 0.4); border-radius: 50%;
  display: grid; place-items: center; font-style: normal; font-size: calc(11 * var(--screen-unit));
}
.scroll-cue i::before { content: "\2304"; line-height: 1; }

/* Pill button with a glyph, used by the paper section's asset links. */
.pill-btn {
  display: inline-flex; align-items: center; gap: calc(10 * var(--screen-unit));
  border: 1px solid rgba(200, 212, 220, 0.3); border-radius: 999px;
  padding: calc(13 * var(--screen-unit)) calc(26 * var(--screen-unit));
  font-size: var(--btn); letter-spacing: 0.12em; text-transform: uppercase;
  background: rgba(200, 212, 220, 0.06);
}

.paper-pills {
  display: flex; justify-content: center; flex-wrap: wrap;
  gap: calc(14 * var(--screen-unit));
  margin-block: calc(34 * var(--screen-unit)) calc(90 * var(--screen-unit));
}

/* ---- 4 · Display type: the reference sets its display face heavy ------ */
h1, h2, h3 { font-weight: 700; }
.hero-mark { font-weight: 800; }
/* A giant wordmark, reused as the opening beat of the product and paper
   sections the way the reference repeats ORYZO at h1 scale down the page. */
.big-mark {
  font-family: var(--display); font-weight: 800;
  font-size: var(--h1); line-height: 0.86; letter-spacing: -0.035em;
  text-align: center;
}
.big-mark__eyebrow {
  text-align: center; font-family: var(--display); font-weight: 700;
  font-size: var(--h5); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: calc(12 * var(--screen-unit));
}

@media (max-width: 767.98px) {
  .side-tab, .deco-eq { display: none; }
  .macro-beat { height: 46vh; }
  #ai, #features, #encode, #sustain, #voices, #social, #product, #paper, #footer { min-height: 0; }
  /* The spans are nowrap so the desktop rail reads as one ruled strip; at 390px
     that pushed the document to 586px wide. On mobile they wrap instead. */
  .mono-rail { display: grid; grid-template-columns: 1fr 1fr; gap: calc(10 * var(--screen-unit)); }
  .mono-rail span { white-space: normal; }
}

/* ============================================================
   ROUND 7 · post-intro parity
   ============================================================ */

/* ---- S1 · Visión térmica -------------------------------------------- */
#thermal {
  --th-h: 100svh;
  position: relative; isolation: isolate;
  height: var(--th-h); min-height: calc(620 * var(--screen-unit));
  overflow: hidden; background: var(--black);
}
.th-plate { position: absolute; inset: 0; overflow: hidden; }
.th-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(var(--th-h) * 1.75)); aspect-ratio: 1344 / 768;
}
.th-frame img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---- R8/W1 · thermal lens ------------------------------------------- */
/* The "sensor off" grade: the false-colour plate stripped to a cold monochrome
   so it reads as the same camera in visible light. sepia+hue-rotate is the
   cheapest way to tint a greyscale in one filter chain. */
.th-cold {
  /* <picture> is display:contents in the UA sheet, so without this it generates
     no box at all and the filter, the mask and the z-index are all discarded. */
  display: block;
  position: absolute; inset: 0; z-index: 1;
  filter: grayscale(1) brightness(1.34) contrast(0.9) sepia(0.7) hue-rotate(172deg) saturate(1.25);
  /* --lx/--ly are written by js/main.js on the frame; the fallback keeps the
     hole off-canvas so nothing is revealed before the first pointer event. */
  --lr: calc(147 * var(--screen-unit));   /* ~220px lens at 1440 */
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx, -50%) var(--ly, -50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 88%, #000 100%);
  mask-image: radial-gradient(circle var(--lr) at var(--lx, -50%) var(--ly, -50%), rgba(0,0,0,0) 0, rgba(0,0,0,0) 88%, #000 100%);
  opacity: 0; transition: opacity 0.5s ease;
  pointer-events: none;
}
/* Only ever shown once the script has taken over — see thermalLens(). */
#thermal.has-lens .th-cold { opacity: 1; }
#thermal.has-lens { cursor: none; }
.th-lens {
  position: absolute; z-index: 2; pointer-events: none;
  left: var(--lx, -50%); top: var(--ly, -50%);
  width: calc(294 * var(--screen-unit)); aspect-ratio: 1;
  margin: calc(-147 * var(--screen-unit));
  border-radius: 50%;
  border: 1px solid rgba(0, 224, 255, 0.75);
  box-shadow: 0 0 calc(30 * var(--screen-unit)) rgba(0, 224, 255, 0.28), inset 0 0 calc(24 * var(--screen-unit)) rgba(0, 224, 255, 0.16);
  opacity: 0; transition: opacity 0.4s ease;
}
.th-lens::before, .th-lens::after {
  content: ""; position: absolute; left: 50%; top: 50%; background: rgba(0, 224, 255, 0.6);
}
.th-lens::before { width: calc(18 * var(--screen-unit)); height: 1px; transform: translate(-50%, -50%); }
.th-lens::after { width: 1px; height: calc(18 * var(--screen-unit)); transform: translate(-50%, -50%); }
#thermal.has-lens .th-lens { opacity: 1; }
/* Sits in the copy column, so it inherits that block's flow and needs no
   positioning of its own. Hidden until the lens is live, and it fades out for
   good the first time the pointer actually moves it. */
.th-hint {
  display: none; align-items: center; gap: calc(10 * var(--screen-unit));
  margin-top: calc(22 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--blue);
  transition: opacity 0.4s ease;
}
.th-hint i {
  width: calc(14 * var(--screen-unit)); min-width: 11px; aspect-ratio: 1;
  border: 1px solid currentColor; border-radius: 50%;
}
#thermal.has-lens .th-hint { display: inline-flex; }
#thermal.lens-used .th-hint { opacity: 0; }
/* Detector lock-on: a dashed box on the cube's projected rect + corner ticks. */
/* z-index 3: both of these have to stay over the R8 lens layers (1 and 2). */
.th-box {
  position: absolute; left: 48.5%; top: 50%; width: 16.6%; height: 25.5%; z-index: 3;
  border: 1px dashed rgba(190, 235, 255, 0.6);
}
.th-box::before, .th-box::after {
  content: ""; position: absolute; background: var(--accent);
}
.th-box::before { left: 50%; top: -1px; width: calc(30 * var(--screen-unit)); height: 2px; transform: translateX(-50%); }
.th-box::after { left: 50%; bottom: -1px; width: calc(30 * var(--screen-unit)); height: 2px; transform: translateX(-50%); }
.th-read {
  position: absolute; left: 56.8%; top: 79%; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: baseline; gap: calc(12 * var(--screen-unit));
  white-space: nowrap;
  padding: calc(8 * var(--screen-unit)) calc(16 * var(--screen-unit));
  background: rgba(4, 8, 13, 0.72); border: 1px solid rgba(0, 224, 255, 0.35);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.16em; text-transform: uppercase; color: #dff4ff;
}
.th-read b { color: var(--accent); font-size: var(--body3); font-weight: 400; letter-spacing: 0.06em; }

/* Copy column: the reference darkens the left third to hold ink over the plate. */
#thermal::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to right, rgba(4,8,13,0.94) 0%, rgba(4,8,13,0.86) 17%, rgba(4,8,13,0) 36%),
    linear-gradient(to top, rgba(4,8,13,0.96) 0%, rgba(4,8,13,0.55) 16%, rgba(4,8,13,0) 34%),
    linear-gradient(to bottom, rgba(4,8,13,0.7) 0%, rgba(4,8,13,0) 14%);
}
#thermal > *:not(.th-plate) { position: absolute; z-index: 2; }

.th-copy { left: var(--site-padding-x); top: calc(150 * var(--screen-unit)); width: calc(430 * var(--screen-unit)); max-width: 30vw; }
.th-icon {
  display: grid; place-items: center;
  width: calc(66 * var(--screen-unit)); height: calc(66 * var(--screen-unit));
  border-radius: 50%; background: rgba(190, 235, 255, 0.12);
  margin-bottom: calc(40 * var(--screen-unit));
}
.th-icon svg { width: 55%; fill: none; stroke: #cfeeff; stroke-width: 1.3; }
.th-copy .eyebrow { color: var(--white); font-family: var(--display); font-weight: 700; font-size: var(--h5); letter-spacing: 0.02em; }
.th-lede { margin-top: calc(18 * var(--screen-unit)); font-size: var(--body3); color: var(--silver); }
.th-mode { margin-top: calc(40 * var(--screen-unit)); padding-top: calc(20 * var(--screen-unit)); border-top: 1px dotted rgba(200, 212, 220, 0.34); }
.th-mode__label { display: flex; justify-content: space-between; gap: 1em; font-family: var(--mono); font-size: var(--sub2); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.th-mode__label b { color: var(--accent); font-weight: 400; }
#thermal .temp__read { margin-top: calc(12 * var(--screen-unit)); font-size: var(--body3); color: var(--silver); min-height: 4.6em; }

/* Vertical tick rail, right edge. */
.th-rail { right: var(--site-padding-x); top: 26%; height: 48%; width: calc(230 * var(--screen-unit)); }
#temp-bar {
  position: absolute; right: 0; top: 0; width: calc(10 * var(--screen-unit)); min-width: 7px; height: 100%;
  border: 1px solid rgba(200, 212, 220, 0.45);
  background: linear-gradient(to bottom, #ffe9a8, #ff7ad0 42%, #6a3ad6 74%, #050a14);
  cursor: grab; touch-action: none;
}
#temp-bar.is-drag { cursor: grabbing; }
#temp-knob {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: calc(26 * var(--screen-unit)); min-width: 18px; aspect-ratio: 1;
  border: 2px solid var(--white); border-radius: 50%;
  background: rgba(4, 8, 13, 0.5); box-shadow: 0 0 calc(20 * var(--screen-unit)) rgba(0, 224, 255, 0.7);
}
#thermal .temp__ticks { position: absolute; inset: 0; right: calc(44 * var(--screen-unit)); }
#thermal .temp__ticks span {
  position: absolute; right: 0; top: var(--p); transform: translateY(-50%);
  text-align: right; cursor: pointer; white-space: nowrap;
  font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(232, 244, 255, 0.55);
}
#thermal .temp__ticks span b { display: block; font-weight: 400; }
#thermal .temp__ticks span i { font-style: normal; color: var(--muted); }
#thermal .temp__ticks span.is-on { color: var(--white); }
#thermal .temp__ticks span.is-on i { color: var(--accent); }
#thermal .temp__ticks span::after {
  content: ""; position: absolute; right: calc(-30 * var(--screen-unit)); top: 50%;
  width: calc(22 * var(--screen-unit)); height: 1px; background: currentColor;
}

.th-punch {
  left: var(--site-padding-x); bottom: calc(44 * var(--screen-unit));
  font-size: calc(86 * var(--screen-unit)); line-height: 0.9; font-weight: 700; text-transform: none;
}
.th-eq {
  right: var(--site-padding-x); bottom: calc(44 * var(--screen-unit));
  display: flex; align-items: center; gap: calc(24 * var(--screen-unit));
  text-align: right;
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--silver);
}
.th-eq__sub { color: var(--muted); }
.th-eq__f { font-family: var(--serif); font-size: var(--h4); letter-spacing: 0; text-transform: none; color: var(--white); }
.th-eq__f b { font-weight: 400; font-style: italic; }

@media (max-width: 767.98px) {
  #thermal { --th-h: 62svh; height: auto; min-height: 0; padding-block: calc(70 * var(--screen-unit)); }
  .th-plate { position: relative; height: var(--th-h); }
  #thermal::before { background: linear-gradient(to bottom, rgba(4,8,13,0.6) 0%, rgba(4,8,13,0) 12%, rgba(4,8,13,0) 46%, var(--black) 62%); }
  #thermal > *:not(.th-plate) { position: relative; }
  .th-copy { left: 0; top: 0; width: 100%; max-width: none; padding-inline: var(--site-padding-x); margin-top: calc(30 * var(--screen-unit)); }
  /* The section is auto-height on mobile, so the rail is measured off the PLATE
     height, not off a percentage of the whole (much taller) section box. */
  .th-rail { position: absolute !important; right: var(--site-padding-x); top: calc(var(--th-h) * 0.18); height: calc(var(--th-h) * 0.52); width: calc(160 * var(--screen-unit)); }
  #thermal .temp__ticks span { background: rgba(4, 8, 13, 0.66); padding: calc(4 * var(--screen-unit)) calc(8 * var(--screen-unit)); }
  .th-punch { left: 0; bottom: 0; padding-inline: var(--site-padding-x); margin-top: calc(40 * var(--screen-unit)); font-size: var(--h2); }
  .th-eq { right: 0; bottom: 0; padding-inline: var(--site-padding-x); margin-top: calc(26 * var(--screen-unit)); flex-direction: column; align-items: flex-start; text-align: left; gap: calc(10 * var(--screen-unit)); }
  .th-read { top: auto; bottom: calc(14 * var(--screen-unit)); font-size: calc(10 * var(--screen-unit)); }
  /* 390px: a 220px lens would be more than half the screen. */
  .th-cold { --lr: calc(78 * var(--screen-unit)); }
  .th-lens { width: calc(156 * var(--screen-unit)); margin: calc(-78 * var(--screen-unit)); }
  #thermal.has-lens { cursor: auto; }
}

/* ---- #features · protocol list replacing the relocated slider ---------- */
.spec-list { margin-top: calc(24 * var(--screen-unit)); }
.spec-list > div {
  display: flex; justify-content: space-between; gap: 1em;
  padding-block: calc(13 * var(--screen-unit));
  border-bottom: 1px dotted rgba(8, 19, 28, 0.28);
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.1em; text-transform: uppercase;
}
.spec-list dt { color: #33505f; }
.spec-list dd { color: #08131c; }

/* ---- S3 · Cifrado ---------------------------------------------------- */
/* R8/B7: the head used to start 120u down, which put "Cifrado por congelación"
   straight under the nav pill for the whole time the section was on screen.
   200u clears the chrome band with air to spare at every viewport. */
#encode {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 108svh; padding-block: calc(200 * var(--screen-unit)) calc(96 * var(--screen-unit));
  padding-inline: var(--site-padding-x);
  display: flex; flex-direction: column; align-items: center;
  color: var(--pale-ink); text-align: center;
}
.en-plate { position: absolute; inset: 0; z-index: -1; }
.en-plate img { width: 100%; height: 100%; object-fit: cover; }
/* The desk still is already near-white; a light wash only stops the ink from
   sitting straight on the window blow-out. */
.en-plate::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(240,247,252,0.84) 0%, rgba(240,247,252,0.36) 32%, rgba(240,247,252,0.12) 60%, rgba(226,238,247,0.72) 100%);
}
#encode .eyebrow { color: #2b5a73; }
.en-title { font-size: calc(96 * var(--screen-unit)); line-height: 0.92; margin-top: calc(16 * var(--screen-unit)); }
.en-sub { margin-top: calc(20 * var(--screen-unit)); font-size: var(--body3); color: #2c4a5b; max-width: 34ch; margin-inline: auto; }
/* R8/B7: pushed to the FOOT of the section instead of its middle, so the whole
   toy lands on the desk in the plate rather than in the empty wall above it.
   The perspective is set on the parent — the frame's own rotateX below is what
   lays it down on the surface. */
.en-stage {
  margin-top: auto; margin-bottom: calc(30 * var(--screen-unit));
  width: min(100%, calc(560 * var(--screen-unit)));
  display: flex; flex-direction: column; align-items: center;
  perspective: calc(1100 * var(--screen-unit));
  /* nudged off dead centre so the sheet lands on the free part of the desk mat
     and stops short of the cube instead of lying across it */
  transform: translateX(calc(-80 * var(--screen-unit)));
}
#encode .encode-field { width: 100%; margin: 0; }
#encode .encode-field input {
  width: 100%; text-align: center; background: none; border: 0;
  border-bottom: 1px solid rgba(8, 19, 28, 0.3);
  padding-block: calc(10 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--body3); color: #0a1a25;
  letter-spacing: 0.06em;
}
#encode .encode-field input:focus { outline: none; border-bottom-color: #0090b8; }
#encode .encode-lines { display: flex; justify-content: center; gap: calc(6 * var(--screen-unit)); margin-top: calc(14 * var(--screen-unit)); }
#encode .encode-lines i { display: block; width: calc(26 * var(--screen-unit)); height: 1px; background: rgba(8, 19, 28, 0.28); }

/* Lying ON the desk, not floating in front of it: a shallow rotateX hinged at
   the near edge plus a contact shadow under it. 17deg is the calibration knob —
   steeper reads as a lid, flatter and the ciphertext stops being legible. */
.en-frame {
  position: relative; width: 100%;
  margin-top: calc(34 * var(--screen-unit));
  border: 1px dashed rgba(8, 19, 28, 0.5);
  background: rgba(219, 236, 246, 0.55);
  padding: calc(22 * var(--screen-unit)) calc(20 * var(--screen-unit));
  min-height: calc(86 * var(--screen-unit));
  display: grid; place-items: center; overflow: hidden;
  transform-origin: 50% 100%;
  transform: rotateX(17deg);
  box-shadow: 0 calc(16 * var(--screen-unit)) calc(30 * var(--screen-unit)) rgba(8, 30, 45, 0.2);
  transition: border-color 0.4s ease, background 0.4s ease;
}
#encode-out {
  margin: 0;
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.18em; color: #0a1a25; word-break: break-all;
  filter: blur(calc(5 * var(--screen-unit))); opacity: 0.85;
  transition: filter 0.55s ease, opacity 0.55s ease, letter-spacing 0.55s ease;
}
.en-frame.is-clear #encode-out { filter: blur(0); opacity: 1; letter-spacing: 0.1em; }
.en-frame.is-clear { border-style: solid; border-color: #0090b8; background: rgba(255, 255, 255, 0.78); }

#encode-btn {
  margin-top: calc(26 * var(--screen-unit)); align-self: center;
  background: var(--black); color: var(--white);
  border: 0; border-radius: 999px;
  padding: calc(15 * var(--screen-unit)) calc(34 * var(--screen-unit));
  font-size: var(--btn); letter-spacing: 0.14em; text-transform: uppercase;
  /* it stands on the desk next to the frame, so it casts too */
  box-shadow: 0 calc(10 * var(--screen-unit)) calc(22 * var(--screen-unit)) rgba(8, 30, 45, 0.28);
}
.en-state {
  margin-top: calc(16 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.16em; text-transform: uppercase; color: #46697c;
}
#encode .scroll-cue { color: #35566a; margin-top: 0; }
#encode .scroll-cue i { border-color: rgba(6, 18, 27, 0.34); }
#encode .deco-eq { color: #4d6c7e; }
#encode .deco-eq b { color: #21384a; }

@media (max-width: 767.98px) {
  /* 150u top: the phone chrome is a brand chip and a MENÚ button on one line,
     and the eyebrow was landing inside it. */
  #encode { min-height: 0; padding-block: calc(150 * var(--screen-unit)) calc(70 * var(--screen-unit)); }
  .en-title { font-size: var(--h2); }
  .en-stage { margin-top: calc(56 * var(--screen-unit)); margin-bottom: calc(30 * var(--screen-unit)); transform: none; }
}

/* ---- S4 · sostenibilidad --------------------------------------------- */
.su-hero { text-align: center; padding-block: calc(40 * var(--screen-unit)) calc(110 * var(--screen-unit)); }
.su-eyebrow {
  font-family: var(--display); font-weight: 700; font-size: var(--h5);
  letter-spacing: 0.06em; text-transform: uppercase; color: #12384c;
}
/* Edge to edge, gutter and all — the reference sets this word wider than the
   text column it belongs to. */
.su-giant {
  margin-inline: calc(var(--site-padding-x) * -1);
  margin-top: calc(24 * var(--screen-unit));
  font-size: 13.6vw; line-height: 0.82; font-weight: 700;
  letter-spacing: -0.045em; color: var(--pale-ink);
}
.su-lines { margin-top: calc(60 * var(--screen-unit)); font-size: var(--body3); color: #21404f; }
.su-lines p { max-width: 46ch; margin-inline: auto; }

.su-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); align-items: stretch; }
.su-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: calc(500 * var(--screen-unit));
  padding: calc(38 * var(--screen-unit));
  background: #eaf3f9; color: var(--pale-ink);
}
.su-card h3 {
  font-family: var(--display); font-weight: 700; font-size: var(--h4);
  line-height: 1.06; letter-spacing: 0; text-transform: uppercase;
  color: #12586f; max-width: 14ch;
}
.su-card p { font-size: var(--body3); color: #33505f; }
.su-card > p:not(.su-foot) { margin-top: calc(26 * var(--screen-unit)); max-width: 30ch; }
.su-foot { margin-top: auto; padding-top: calc(30 * var(--screen-unit)); }
.su-foot b { font-weight: 400; color: var(--pale-ink); }

.su-card--solid { background: #0d3547; color: var(--white); }
.su-card--solid h3 { color: #9fd8ea; }
.su-card--solid p { color: rgba(232, 244, 255, 0.76); }
.su-card--solid .su-foot { color: rgba(232, 244, 255, 0.5); }
/* The ghost number: a display figure bled off the card's bottom-left corner. */
.su-ghost {
  position: absolute; left: calc(-10 * var(--screen-unit)); bottom: calc(6 * var(--screen-unit));
  font-family: var(--display); font-weight: 800;
  font-size: calc(230 * var(--screen-unit)); line-height: 0.78;
  letter-spacing: -0.05em; color: rgba(159, 216, 234, 0.22);
  pointer-events: none;
}
.su-card--solid .su-foot { position: relative; z-index: 1; }

.su-round {
  margin-top: calc(34 * var(--screen-unit));
  aspect-ratio: 1; width: min(100%, calc(230 * var(--screen-unit)));
  margin-inline: auto; border-radius: 50%; background: #0d3547;
  display: grid; place-items: center;
}
.su-round .stat__svg { width: 78%; height: auto; margin: 0; min-height: 0; }
.su-round .s-line { stroke: #bfe6f4; }
.su-round .s-pulse { fill: #6fd0ea; }

/* --- the ambient carousel (the page's one always-moving element) --- */
.su-ring { position: relative; margin-top: calc(28 * var(--screen-unit)); aspect-ratio: 1 / 0.96; width: 100%; }
.su-ring__o {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px dashed rgba(18, 88, 111, 0.35); border-radius: 50%;
}
.su-ring__o:nth-of-type(1) { width: 96%; aspect-ratio: 1; }
.su-ring__o:nth-of-type(2) { width: 74%; aspect-ratio: 1; }
.su-ring__o:nth-of-type(3) { width: 52%; aspect-ratio: 1; }
.lang-chip {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  padding: calc(11 * var(--screen-unit)) calc(22 * var(--screen-unit));
  border-radius: 999px; background: #0d3547; color: #eaf6fc;
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transition: transform 0.85s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.85s ease;
  will-change: transform;
}

/* ---- S6 · Siempre activo --------------------------------------------- */
#always {
  --al-h: 100svh;
  position: relative; isolation: isolate;
  height: var(--al-h); min-height: calc(560 * var(--screen-unit));
  overflow: hidden; background: var(--black);
}
.al-plate { position: absolute; inset: 0; overflow: hidden; }
/* R8/B6: the plate is the 2752x1536 reshoot now — 16:9 exactly, not the old
   1344x768 (1.75). Cover would otherwise shave the sides and the clip-path
   below is measured in IMAGE percentages, so the box has to match the file. */
.al-frame {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: max(100%, calc(var(--al-h) * 1.79)); aspect-ratio: 2752 / 1536;
}
.al-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The claim is stacked BETWEEN the two plates: the second plate is the same
   still clipped to the fridge column, so the type disappears behind the lit
   unit with no cut-out asset and no visible seam (identical pixels). */
.al-punch {
  position: absolute; left: var(--site-padding-x); top: 42%; z-index: 1;
  margin: 0; font-size: 12.4vw; line-height: 0.9;
  font-weight: 800; letter-spacing: -0.035em; color: var(--white);
  white-space: nowrap;
}
.al-cut { z-index: 2; }
/* The fridge column in the R8 plate: left edge of the cabinet at 64.5% of the
   image, right edge of the swung-open door at 94.5%. Calibration knob — if the
   claim ever pokes through the unit, widen this band. */
.al-cut .al-frame { clip-path: inset(0 5.5% 0 64.5%); }
#always::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(to bottom, rgba(4,8,13,0.75) 0%, rgba(4,8,13,0) 18%, rgba(4,8,13,0) 62%, rgba(4,8,13,0.9) 100%);
}
.al-label {
  position: absolute; left: var(--site-padding-x); bottom: calc(44 * var(--screen-unit)); z-index: 4;
  font-family: var(--display); font-weight: 700; font-size: var(--h5);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--white);
}
#always .deco-eq { z-index: 4; }

@media (max-width: 767.98px) {
  /* 390px cannot hold a 14-character word crossing an object, so the phone
     drops the text-behind composite: the frame anchors right so the lit fridge
     stays in shot and the claim wraps onto the dark half in front of it. */
  #always { --al-h: 74svh; }
  /* Slide the frame so the lit fridge lands on the RIGHT half and the claim has
     the dark kitchen to sit on. -63% is a fraction of the frame's own width. */
  .al-frame { transform: translate(-63%, -50%); }
  .al-cut { display: none; }
  .al-punch { top: auto; bottom: calc(96 * var(--screen-unit)); font-size: var(--h2); white-space: normal; max-width: 8ch; }
  .al-label { font-size: var(--sub2); font-family: var(--mono); letter-spacing: 0.14em; }
}

/* ---- S11 · the finale -------------------------------------------------- */
#fall-canvas {
  position: absolute; inset: 0; z-index: -1;
  width: 100%; height: 100%; pointer-events: none;
}
.foot-grid {
  display: grid; grid-template-columns: calc(300 * var(--screen-unit)) 1fr auto;
  gap: calc(60 * var(--screen-unit));
  align-items: start; text-align: left;
  margin-top: calc(96 * var(--screen-unit));
}
.share-box {
  border: 1px dashed rgba(200, 212, 220, 0.4);
  padding: calc(24 * var(--screen-unit));
  display: flex; flex-direction: column; gap: calc(14 * var(--screen-unit));
}
.share-box__brand {
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent);
}
.share-box__brand span { color: var(--blue); }
.share-box__line {
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--white);
}
.share-box__btn {
  align-self: flex-end;
  border: 1px dashed rgba(200, 212, 220, 0.5); border-radius: 999px;
  padding: calc(10 * var(--screen-unit)) calc(22 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--silver);
  transition: color 0.25s ease, border-color 0.25s ease;
}
.share-box__btn.is-done { color: var(--accent); border-color: var(--accent); border-style: solid; }

.nl__label {
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted);
}
.nl__form {
  display: flex; align-items: center; gap: calc(20 * var(--screen-unit));
  margin-top: calc(22 * var(--screen-unit));
  border-bottom: 1px dotted rgba(200, 212, 220, 0.42);
  padding-bottom: calc(12 * var(--screen-unit));
}
.nl__form input {
  flex: 1; min-width: 0; background: none; border: 0;
  font-size: var(--body3); color: var(--white);
  letter-spacing: 0.08em; text-transform: uppercase;
}
.nl__form input::placeholder { color: var(--muted); }
.nl__form input:focus { outline: none; }
.nl__form button {
  font-size: var(--h4); line-height: 1; color: var(--white);
  transition: transform 0.25s ease;
}
.nl__form button:hover { transform: translateX(4px); }
.nl__state {
  margin-top: calc(12 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.1em; color: var(--accent); min-height: 1.4em;
}

.foot-cols { display: flex; flex-direction: column; gap: calc(26 * var(--screen-unit)); }
.foot-cols__label { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.foot-cols__val { font-family: var(--mono); font-size: var(--sub2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); margin-top: calc(6 * var(--screen-unit)); }

.footer-meta__disc { max-width: calc(520 * var(--screen-unit)); text-align: right; color: var(--muted); }

@media (max-width: 767.98px) {
  .foot-grid { grid-template-columns: 1fr; gap: calc(46 * var(--screen-unit)); margin-top: calc(60 * var(--screen-unit)); }
  .footer-meta__disc { max-width: none; text-align: left; }
}

/* ---- S10 · research appendix ------------------------------------------ */
#paper-body { background: #05090e; }
.pb-col { max-width: calc(760 * var(--screen-unit)); margin-left: 22%; }
.pb-label {
  margin-top: calc(58 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2);
  letter-spacing: 0.14em; color: var(--muted);
}
.pb-label:first-child { margin-top: 0; }
#paper-body p, #paper-body blockquote {
  margin-top: calc(18 * var(--screen-unit));
  font-size: var(--body3); line-height: 1.55; color: var(--white);
}
#paper-body em { font-style: normal; color: var(--accent); }
.pb-quote { font-size: var(--body2); }
.pb-cite { color: var(--muted); font-size: var(--sub2) !important; margin-top: calc(8 * var(--screen-unit)) !important; }
.pb-small { color: var(--silver); }
.pb-small em { color: var(--blue); font-style: italic; }
.pb-bib {
  margin-top: calc(18 * var(--screen-unit));
  background: #141b21; border: 1px solid rgba(200, 212, 220, 0.1);
  padding: calc(26 * var(--screen-unit));
  font-family: var(--mono); font-size: var(--sub2); line-height: 1.75;
  color: var(--silver); overflow-x: auto; white-space: pre;
}
.paper-links--cover { justify-content: flex-start; margin-top: calc(46 * var(--screen-unit)); }

@media (max-width: 767.98px) {
  .pb-col { margin-left: 0; }
  .pb-bib { padding: calc(18 * var(--screen-unit)); font-size: calc(11 * var(--screen-unit)); }
}

/* ---- S9 · Elija su CUBIQ --------------------------------------------- */
/* The section is dark again (round 4 had it pale). The blueprint wall is
   knocked right down — it is a texture behind the wordmark, not a picture. */
#product { background: #050c13; isolation: isolate; text-align: center; }
.pk-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.pk-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; filter: saturate(0.7) brightness(0.72); }
.pk-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 42%, rgba(5,12,19,0.86) 0%, rgba(5,12,19,0.5) 55%, rgba(5,12,19,0.92) 100%);
}
#product .big-mark__eyebrow { color: var(--white); }
#product .big-mark { margin-bottom: calc(34 * var(--screen-unit)); }
#product .sku-picker { justify-content: center; }
#product .sku-btn {
  border: 1px solid rgba(200, 212, 220, 0.18); border-radius: 999px;
  background: rgba(232, 244, 255, 0.06);
  padding: calc(14 * var(--screen-unit)) calc(34 * var(--screen-unit));
  font-size: var(--btn); letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(232, 244, 255, 0.72);
  transition: color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#product .sku-btn.is-on {
  color: var(--white); border-color: var(--accent);
  background: rgba(0, 224, 255, 0.1);
  box-shadow: 0 0 calc(26 * var(--screen-unit)) rgba(0, 224, 255, 0.45), inset 0 0 calc(20 * var(--screen-unit)) rgba(0, 224, 255, 0.18);
}
.pk-stage { margin-top: calc(46 * var(--screen-unit)); }

/* --- R8/W2: the live picker stage --------------------------------------
   The canvas replaces the three stills once the module has booted. The stills
   stay in the markup and stay visible until then, so a slow 3D boot shows the
   product rather than a hole, and a no-WebGL visitor never notices. */
#pk-canvas { display: none; }
.pk-live #pk-canvas {
  display: block;
  width: min(100%, calc(760 * var(--screen-unit)));
  height: calc(520 * var(--screen-unit));
  min-height: 340px;
  margin-inline: auto;
}
.pk-live .pk-stage picture { display: none; }
@media (max-width: 767.98px) {
  .pk-live #pk-canvas { height: 62vh; min-height: 300px; }
}

.pk-stage img {
  width: min(100%, calc(760 * var(--screen-unit))); margin-inline: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
  /* The tier renders were shot on a frost-white sweep. On the dark stage the
     plate is cropped in on the object and feathered to nothing, so it reads as
     a lit product on the blueprint wall, not a pasted white rectangle. */
  -webkit-mask-image: radial-gradient(ellipse 34% 48% at 50% 56%, #000 26%, rgba(0,0,0,0) 74%);
  mask-image: radial-gradient(ellipse 34% 48% at 50% 56%, #000 26%, rgba(0,0,0,0) 74%);
  filter: brightness(0.8) contrast(1.14);
}
.pk-stage { position: relative; }
.pk-stage::before {
  content: ""; position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
  width: 46%; height: 26%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 224, 255, 0.28), rgba(0, 224, 255, 0) 70%);
  filter: blur(calc(18 * var(--screen-unit)));
}
#product #product-details { grid-template-columns: 1fr; text-align: left; max-width: calc(760 * var(--screen-unit)); margin-inline: auto; }
#product .section-head h2, #product h2.section-head { margin-inline: auto; }

@media (max-width: 767.98px) {
  .pk-stage img { width: 100%; }
}

/* ---- S8 · Soporte legado — section deleted in R8/B4, styles with it. ---- */

@media (max-width: 767.98px) {
  .su-giant { font-size: 15.5vw; }
  .su-hero { padding-bottom: calc(70 * var(--screen-unit)); }
  .su-cards { grid-template-columns: 1fr; }
  .su-card { min-height: 0; }
  .su-ghost { font-size: calc(160 * var(--screen-unit)); bottom: calc(4 * var(--screen-unit)); }
}