/* ═══════════════════════════════════════════════════════════════════════
   Gestu — SECTIONS
   Hero · Workflows · Manifesto · Engine stack · Pricing · Footer
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ B. HERO — THE ANTI-BIG-TECH SOVEREIGN BRAIN ═══════════════════ */
.hero {
  position: relative;
  min-height: 100vh;              /* fallback for engines without dvh */
  min-height: min(100svh, 56rem); /* svh: excludes mobile browser chrome */
  display: flex;
  align-items: flex-start;
  /* Clears the fixed top bar: island (~53px) + its padding + the floating
     status row (~29px) + breathing room. Without the status-row allowance the
     pills sat on top of the hero badge. */
  padding: clamp(8.75rem, 15vh, 11rem) 0 clamp(1.8rem, 4vh, 3rem);
  overflow: hidden;
  isolation: isolate;
}

/* Upward-projected gold→frost gradient halo rising from the well rim.
   Deliberately additive-only: nothing here may darken or occlude the
   headline, the spec bar, or the telemetry rail.

   `contain: paint` is load-bearing, not decoration. The rim below rotates
   forever, and a rotating box's axis-aligned bounding box oscillates between
   its side and its diagonal (a √2 swing). Without containment the document
   reserved scroll space for that overflow, so the whole page crept up and
   down by ~16px while idle. Containment keeps the halo's geometry out of
   layout and scroll calculation entirely. */
.hero__halo {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  contain: paint;
  overflow: hidden;
}
.hero__halo > * { position: absolute; left: 50%; translate: -50% 0; }

/* The carved rim of Gestu Well, seen from above at the bottom edge.
   Whisper-quiet: a metal edge catching light, never a shape competing
   with the headline.

   IMPORTANT: the rotation lives on ::before, not on this box. A rotated
   element's axis-aligned bounding box swings between its side and its
   diagonal (√2), and the document reserved scroll space for that overflow —
   the page crept up and down by ~16px on a 52s cycle. The parent keeps a
   fixed box; only the pseudo-element turns. */
.hero__halo-ring {
  position: absolute;
  bottom: -112vw;
  width: 168vw; height: 168vw;
  border-radius: 50%;
  opacity: 0.34;
  contain: paint;
}
.hero__halo-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 200deg,
    transparent 0deg,
    var(--gold-a14) 46deg,
    transparent 128deg,
    var(--frost-a16) 212deg,
    transparent 300deg);
  filter: blur(110px);
  will-change: transform;
  animation: wellTurn 52s linear infinite;
}
@keyframes wellTurn { to { transform: rotate(360deg); } }

/* Drawn rim arcs — the twelve-fold tick ring, etched, not filled. */
.hero__halo-well {
  bottom: -72vw;
  width: 132vw; height: 132vw;
  border-radius: 50%;
  background: none;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 8%, transparent),
    0 0 40px 4px color-mix(in srgb, var(--gold) 4%, transparent);
  opacity: 0.7;
}

/* The light rising out of the well — warm at the rim, cold above. */
.hero__halo-glow {
  bottom: -30vw;
  width: 120vw; height: 82vw;
  background: radial-gradient(ellipse at 50% 100%,
    color-mix(in srgb, var(--gold) 17%, transparent) 0%,
    color-mix(in srgb, var(--gold) 6%, transparent) 28%,
    color-mix(in srgb, var(--frost) 3%, transparent) 54%,
    transparent 76%);
  filter: blur(36px);
}

.hero__shell { display: grid; gap: clamp(0.9rem, 2.2vh, 1.7rem); }
.hero__shell > .badge { justify-self: start; }

.hero__title {
  font-size: clamp(2.1rem, 6.6vw, 5.1rem);
  line-height: 0.98;
  letter-spacing: var(--track-tight);
  text-wrap: balance;
  display: grid;
  gap: clamp(0.05rem, 0.3vw, 0.16rem);
}
.hero__title-line--sans {
  font-family: var(--f-sans);
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.hero__title-line--serif {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.012em;
  line-height: 1.06;
  padding-bottom: 0.06em;
}

.hero__lede {
  max-width: 44rem;
  font-size: clamp(0.97rem, 1.25vw, 1.15rem);
  line-height: 1.62;
  color: var(--ink-2);
}
.hero__lede em { font-family: var(--f-serif); font-style: italic; color: var(--gold); font-size: 1.06em; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

/* ── LIVE SPEC BAR ──────────────────────────────────────────────────── */
.specbar {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(0.6rem, 2vh, 1.4rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--hairline);
  position: relative;
  box-shadow: 0 30px 70px -50px #000;
}
.specbar::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inlay-soft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.specbar__cell {
  padding: 1.05rem 1.15rem 1.15rem;
  background: linear-gradient(168deg,
    color-mix(in srgb, var(--surface-2) 88%, transparent),
    color-mix(in srgb, var(--surface-1) 96%, transparent));
  display: grid;
  gap: 0.28rem;
  align-content: start;
  transition: background var(--dur-mid);
}
.specbar__cell:hover { background: var(--surface-2); }
.specbar__k {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-4);
}
.specbar__v {
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: -0.012em;
  color: var(--ink);
}
.specbar__v b { font-weight: 700; color: var(--gold); }
.specbar__m {
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-4);
  /* Never wrap. The mesh status text grows when a provider is quarantined
     ("30/31 routes armed · Gemini quarantined"), and a second line here
     pushed the entire page down ~15px on a timer — the "site shifts by
     itself" bug. One line, clipped, with the full text on the title. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.2em;
}
.specbar__cell:nth-child(2) .specbar__m { color: var(--frost-deep); }
.specbar__cell:nth-child(4) .specbar__v b { color: var(--frost); }

.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

/* ── HERO: where-your-words-go ──────────────────────────────────────────
   The honest counterpart to the halo. Small, precise, unmissable — it sits
   directly under the spec bar because a sceptic looks there first. */
.hero__plain {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.5rem clamp(1rem, 2.4vw, 2rem);
  align-items: start;
  margin-top: clamp(0.5rem, 1.6vh, 1rem);
  padding: 0.95rem 1.15rem 1.05rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--hairline);
  border-left: 2px solid color-mix(in srgb, var(--frost) 48%, transparent);
  background:
    linear-gradient(100deg, var(--frost-a08), transparent 62%),
    color-mix(in srgb, var(--surface-1) 72%, transparent);
}
.hero__plain-k {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--frost);
  padding-top: 0.15rem;
}
.hero__plain-c {
  font-size: 0.76rem;
  line-height: 1.68;
  color: var(--ink-3);
  max-width: 62rem;
}
.hero__plain-c b { color: var(--ink); font-weight: 650; }
.hero__telemetry {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.5rem;
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
.tel i {
  font-style: normal;
  color: var(--ink-4);
  letter-spacing: var(--track-mid);
  margin-right: 0.42rem;
}
.tel b { color: var(--sage); }

.scroll-cue { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--ink-4); }
.scroll-cue__label {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  transition: color var(--dur-mid);
}
.scroll-cue__rail {
  display: block;
  width: 2px; height: 34px;
  border-radius: 2px;
  background: var(--hairline);
  position: relative;
  overflow: hidden;
}
.scroll-cue__rail i {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--gold), var(--frost));
  animation: descend 2.4s var(--ease-deep) infinite;
}
@keyframes descend {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(100%); }
  100% { transform: translateY(100%); }
}
.scroll-cue:hover { color: var(--gold); }
.scroll-cue:hover .scroll-cue__label { color: var(--gold); }

/* ═══ C. WORKFLOWS ═════════════════════════════════════════════════ */
.workflows { position: relative; padding: var(--section-y) 0; }

.panels {
  position: relative;
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  /* Height is authored by js/artifacts.js to the tallest panel, and panels are
     taken out of flow. Without this the section resized on every tab switch
     (freelancer 601 / manager 557 / developer 716) which moved the whole page
     under the reader — the "cards shift the layout" bug. */
  transition: height var(--dur-mid) var(--ease-forge);
}
.panel {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.panel.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  animation: panelIn var(--dur-slow) var(--ease-forge);
}
/* Before JS runs, keep the first panel in flow so content is never stranded
   inside a zero-height container. */
html:not(.js) .panel { position: relative; opacity: 1; visibility: visible; pointer-events: auto; }
html:not(.js) .panel[hidden] { display: none; }
html:not(.js) .panels { height: auto !important; }
@keyframes panelIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

.artifact {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--card-face);
  border: 1px solid var(--hairline);
  box-shadow: 0 50px 100px -70px #000, var(--bevel);
  position: relative;
}
.artifact::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inlay);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.artifact__meta {
  padding: clamp(1.5rem, 3.4vw, 2.6rem);
  display: grid;
  align-content: start;
  gap: 0.9rem;
  border-right: 1px solid var(--hairline);
  background:
    radial-gradient(120% 80% at 0% 0%, var(--gold-a08), transparent 62%),
    transparent;
}
.artifact__kicker {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.artifact__title {
  font-family: var(--f-display);
  font-size: var(--t-h3);
  font-weight: 700;
  line-height: 1.14;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.artifact__copy { color: var(--ink-2); font-size: 0.95rem; line-height: 1.68; }
.artifact__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 1.6rem; }

.artifact__rig {
  display: grid;
  align-content: start;
  background: color-mix(in srgb, var(--obsidian-void) 40%, transparent);
}
.artifact__rig > .readout { margin-top: auto; }

/* ═══ D. MANIFESTO ════════════════════════════════════════════════ */
.manifesto { position: relative; padding: var(--section-y) 0; overflow: hidden; }
.manifesto__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(70% 50% at 50% 0%, color-mix(in srgb, var(--trap) 7%, transparent), transparent 62%),
    radial-gradient(70% 60% at 50% 100%, color-mix(in srgb, var(--gold) 6%, transparent), transparent 66%);
  pointer-events: none;
}

.compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 4.5rem minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

.col {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.2rem;
  padding: clamp(1.5rem, 3vw, 2.4rem);
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.col__head { display: grid; gap: 0.5rem; }
.col__kicker {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}
.col__title {
  font-family: var(--f-display);
  font-size: clamp(1.16rem, 2.1vw, 1.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: var(--track-tight);
}
.col__list { display: grid; gap: 1.05rem; }
.col__list li { display: grid; grid-template-columns: auto 1fr; gap: 0.8rem; align-items: start; }
.col__list b { display: block; font-size: 0.9rem; font-weight: 650; line-height: 1.4; }
.col__list i { font-style: normal; display: block; font-size: var(--t-small); line-height: 1.55; color: var(--ink-3); }
.col__verdict {
  margin-top: 0.4rem;
  padding-top: 1.05rem;
  border-top: 1px dashed var(--hairline);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Trap column — red-tinted charcoal */
.col--trap {
  background: linear-gradient(168deg, var(--trap-surface), #120C0F 70%);
  border: 1px solid var(--trap-hairline);
  filter: saturate(0.92);
}
.col--trap .col__kicker { color: var(--trap); }
.col--trap .col__title { color: color-mix(in srgb, var(--ink) 82%, var(--trap)); }
.col--trap .col__list b { color: color-mix(in srgb, var(--ink) 88%, var(--trap)); }
.col--trap .col__verdict { color: var(--trap); border-top-color: var(--trap-hairline); }
.col--trap::after {
  content: "";
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--trap) 5%, transparent) 0 2px,
    transparent 2px 11px);
  pointer-events: none;
}

.mk { width: 22px; height: 22px; position: relative; flex: none; margin-top: 0.1rem; }
.mk--x::before, .mk--x::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 1.5px;
  background: var(--trap);
  translate: -50% -50%;
  border-radius: 2px;
}
.mk--x::before { rotate: 45deg; }
.mk--x::after  { rotate: -45deg; }
.mk--ok {
  border-radius: 50%;
  background: var(--gold-a08);
  box-shadow: inset 0 0 0 1px var(--gold-a24);
}
.mk--ok::before {
  content: "";
  position: absolute;
  left: 50%; top: 46%;
  width: 9px; height: 5px;
  translate: -50% -50%;
  border-left: 1.6px solid var(--gold);
  border-bottom: 1.6px solid var(--gold);
  rotate: -45deg;
  filter: drop-shadow(0 0 5px var(--gold-a40));
}

/* Sovereign column — obsidian + gold glow */
.col--sovereign {
  background: linear-gradient(168deg, var(--surface-2), var(--surface-1) 58%, #0C111B);
  border: 1px solid var(--gold-a24);
  box-shadow: 0 0 0 1px var(--gold-a08), 0 60px 110px -70px color-mix(in srgb, var(--gold) 55%, transparent);
}
.col--sovereign .col__kicker { color: var(--gold); }
.col--sovereign .col__title { color: var(--ink); }
.col--sovereign .col__list b { color: var(--ink); }
.col--sovereign .col__list i { color: var(--ink-2); }
.col--sovereign .col__verdict { color: var(--gold); border-top-color: var(--gold-a24); }
.col__glow {
  position: absolute;
  top: -34%; right: -22%;
  width: 78%; height: 78%;
  background: var(--halo-gold);
  filter: blur(30px);
  pointer-events: none;
  opacity: 0.62;
}

.compare__rift {
  display: grid;
  place-items: center;
  position: relative;
}
.compare__rift::before {
  content: "";
  position: absolute;
  top: 8%; bottom: 8%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--hairline) 22%, var(--gold-a24) 50%, var(--hairline) 78%, transparent);
}
.rift__runes {
  position: relative;
  writing-mode: vertical-rl;
  font-family: var(--f-display);
  font-size: 0.66rem;
  letter-spacing: 0.5em;
  color: var(--gold);
  opacity: 0.6;
  background: var(--obsidian);
  padding: 0.8rem 0.3rem;
}

/* ═══ E. ENGINE ARCHITECTURE — STICKY STACKING PROTOCOL ═══════════
   The three strata share one grid cell and are pinned by a single sticky
   deck, so they genuinely seal over one another instead of racing up the
   shaft. Scroll progress is driven by js/motion.js.                        */
.engine { position: relative; padding: var(--section-y) 0 clamp(3rem, 7vh, 6rem); }

/* Height is authored by js/motion.js: (layers x viewport) + stack height. */
.stack-scroll {
  position: relative;
  height: 300dvh;
}

.stack-viewport {
  position: sticky;
  top: clamp(5.25rem, 10vh, 7.25rem);
  height: min(72dvh, 40rem);
  min-height: 22rem;
  display: grid;
  align-content: center;
  justify-items: stretch;
}

.stack {
  position: relative;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: grid;
  /* Top-aligned: every stratum shares one anchor line, so the crossfade
     between two cards never jitters vertically. */
  align-items: start;
  justify-items: stretch;
}

.layer {
  grid-area: 1 / 1;
  width: 100%;
  will-change: transform, filter, opacity;
  /* Scale from the base edge: a receding stratum shrinks downward, so it
     tucks behind the newer card instead of peeking over its top rim. */
  transform-origin: 50% 100%;
}
.layer__card {
  position: relative;
  border-radius: var(--r-2xl);
  background: var(--card-face);
  border: 1px solid var(--hairline);
  overflow: hidden;
  box-shadow: 0 70px 130px -80px #000, var(--bevel);
}
.layer__card::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inlay);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.layer__card::before {
  content: "";
  position: absolute;
  top: -40%; left: 50%;
  translate: -50% 0;
  width: 70%; height: 70%;
  background: var(--halo-frost);
  filter: blur(34px);
  opacity: 0.4;
  pointer-events: none;
}
.layer[data-layer="2"] .layer__card::before { background: var(--halo-gold); }
.layer[data-layer="3"] .layer__card::before { background: var(--halo-frost); opacity: 0.3; }

.layer__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1.4rem, 3.4vw, 3rem);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 3.2rem);
}
.layer__body { display: grid; gap: 0.9rem; align-content: start; }
.layer__no {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--frost);
}
.layer[data-layer="2"] .layer__no { color: var(--gold); }
.layer__title {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: var(--track-tight);
  color: var(--ink);
  text-wrap: balance;
}
.layer__copy { color: var(--ink-2); font-size: 0.98rem; line-height: 1.7; max-width: 34rem; }

.layer__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 0.9rem;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
}
.layer__specs > div {
  display: grid;
  gap: 0.18rem;
  padding: 0.8rem 0.95rem;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
}
.layer__specs .k { font-size: 0.56rem; letter-spacing: var(--track-mid); color: var(--ink-4); }
.layer__specs .v { font-size: 0.82rem; color: var(--ink); font-weight: 500; letter-spacing: -0.008em; }

/* ── The mesh caveat — the one thing a cloud mesh cannot promise away ──── */
.layer__caveat {
  margin-top: 1rem;
  padding: 0.85rem 1rem 0.9rem 1.05rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  border-left: 2px solid color-mix(in srgb, var(--gold) 46%, transparent);
  background: linear-gradient(100deg, var(--gold-a08), transparent 60%);
  font-size: 0.76rem;
  line-height: 1.66;
  color: var(--ink-3);
  max-width: 34rem;
}
.layer__caveat-k {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.55rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--gold);
}
.layer__caveat b { color: var(--ink); font-weight: 650; }

.layer__viz { display: grid; justify-items: center; gap: 1rem; }
.viz { width: 100%; max-width: 22rem; height: auto; }
.viz__ticks line { stroke: var(--hairline); stroke-width: 1; }
.viz__ring { fill: none; stroke: var(--hairline); stroke-width: 1; }
.viz__ring--2 { stroke: var(--frost-a16); stroke-dasharray: 4 7; }
.viz__label {
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  fill: var(--ink-4);
}
.viz__bars rect { fill: var(--frost); opacity: 0.75; }
.viz__bars rect:nth-child(3n) { fill: var(--gold); opacity: 0.85; }
.viz__cap {
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
}
.viz__cap [data-tone="sage"] { color: var(--sage); }

/* Mesh visualiser */
.mesh {
  position: relative;
  width: 100%;
  max-width: 22rem;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.mesh__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.mesh__edge { stroke: var(--hairline); stroke-width: 1; }
.mesh__edge.is-hot {
  stroke: var(--gold);
  stroke-width: 1.3;
  filter: drop-shadow(0 0 5px var(--gold-a40));
  animation: dash 1.4s linear infinite;
  stroke-dasharray: 10 6;
}
@keyframes dash { to { stroke-dashoffset: -32; } }
.mesh__core { fill: var(--gold); filter: drop-shadow(0 0 16px var(--gold)); }
.mesh__core-ring { fill: none; stroke: var(--gold-a40); stroke-width: 1; }
.mesh__node { fill: var(--surface-2); stroke: var(--hairline); stroke-width: 1; }
.mesh__node.is-live { fill: var(--frost); stroke: var(--frost); filter: drop-shadow(0 0 7px var(--frost)); }
.mesh__node.is-down { fill: var(--trap); stroke: var(--trap); }

/* Filesystem map */
.fsmap {
  width: 100%;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--obsidian-void) 65%, transparent);
  overflow: hidden;
}
.fsmap__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.66rem 0.95rem;
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 60%, transparent);
}
.fsmap__row:last-child { border-bottom: 0; }
.fsmap__row .p { font-size: 0.68rem; color: var(--ink-2); letter-spacing: 0.01em; }
.fsmap__row .s { font-size: 0.62rem; color: var(--ink-4); letter-spacing: 0.06em; }
.fsmap__row .s[data-tone="frost"] { color: var(--frost); }
.fsmap__row .s[data-tone="gold"] { color: var(--gold); }
.fsmap__row .s[data-tone="sage"] { color: var(--sage); }

/* ═══ E2. DEVICE EVIDENCE — real captures in forged bezels ════════ */
.evidence { position: relative; padding: var(--section-y) 0; }

.viewer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(17rem, 26vw, 23rem);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
  min-width: 0;
}
.viewer > * { min-width: 0; }

/* ── Featured plate ─────────────────────────────────────────────────── */
.plate {
  margin: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.3rem, 3.2vw, 2.6rem);
  align-items: center;
  min-width: 0;
}

/* A forged bezel — drawn, never a bitmap, so it stays crisp at any DPI. */
.phone {
  position: relative;
  width: min(19rem, 30vw);
  aspect-ratio: 1272 / 2772;
  border-radius: 13% / 6%;
  padding: clamp(6px, 1.1vw, 10px);
  background:
    linear-gradient(163deg, #2A3446 0%, #10141D 22%, #05070A 58%, #1C2431 100%);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--gold) 14%, transparent),
    0 0 0 2px #04060A,
    0 44px 90px -44px #000,
    0 0 70px -24px color-mix(in srgb, var(--gold) 30%, transparent),
    inset 0 1px 0 color-mix(in srgb, #fff 9%, transparent);
}
.phone__bezel {
  position: relative;
  height: 100%;
  border-radius: 11% / 5%;
  background: #000;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 6%, transparent);
}
.phone__notch {
  position: absolute;
  top: 1.1%;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  width: 30%;
  height: 1.1%;
  border-radius: var(--r-pill);
  background: #000;
  box-shadow: 0 0 0 1px color-mix(in srgb, #fff 5%, transparent);
}
.phone__screen { position: absolute; inset: 0; }
.plate__shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
}
.phone__side {
  position: absolute;
  left: -2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2A3446, #0A0D13);
}
.phone__side--vol { top: 19%; height: 8%; }
.phone__side--pwr { top: 31%; height: 6%; left: auto; right: -2px; }

.plate__cap { display: grid; gap: 0.7rem; align-content: center; min-width: 0; }
.plate__index {
  font-size: var(--t-micro);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--frost);
}
.plate__index > span:first-child { color: var(--gold); }
.plate__title {
  font-family: var(--f-sans);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.plate__copy { font-size: 0.96rem; line-height: 1.68; color: var(--ink-2); max-width: 34rem; }
.plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.3rem;
}
.plate__meta li {
  padding: 0.28rem 0.68rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  white-space: nowrap;
}

/* ── Index rail ─────────────────────────────────────────────────────── */
.rail {
  display: grid;
  gap: 0.45rem;
  min-width: 0;
  max-height: min(46rem, 74vh);
  overflow-y: auto;
  padding-right: 0.35rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.rail__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.5rem 0.75rem 0.5rem 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  text-align: left;
  transition: background var(--dur-mid) var(--ease-forge),
              border-color var(--dur-mid), translate var(--dur-fast) var(--ease-forge);
}
.rail__item img {
  width: 34px;
  height: 60px;
  object-fit: cover;
  object-position: top center;
  border-radius: 5px;
  border: 1px solid var(--hairline);
  filter: grayscale(0.62) brightness(0.78);
  transition: filter var(--dur-mid), border-color var(--dur-mid), box-shadow var(--dur-mid);
}
.rail__label {
  font-size: 0.82rem;
  font-weight: 550;
  letter-spacing: -0.005em;
  color: var(--ink-3);
  transition: color var(--dur-mid);
}
.rail__item::after {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  translate: 0 -50%;
  width: 2px;
  height: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--gold), var(--frost));
  transition: height var(--dur-mid) var(--ease-forge);
}
.rail__item:hover { background: color-mix(in srgb, #fff 4%, transparent); }
.rail__item:hover img { filter: grayscale(0.25) brightness(0.95); }
.rail__item:hover .rail__label { color: var(--ink); }

.rail__item.is-active {
  background: linear-gradient(100deg, var(--gold-a08), color-mix(in srgb, var(--surface-2) 70%, transparent));
  border-color: var(--gold-a24);
}
.rail__item.is-active img {
  filter: none;
  border-color: var(--gold-a40);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--gold) 70%, transparent);
}
.rail__item.is-active .rail__label { color: var(--gold-bright); }
.rail__item.is-active::after { height: 62%; }

/* ── Capability strip ───────────────────────────────────────────────── */
.capstrip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3.4rem);
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--hairline);
  position: relative;
}
.capstrip::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inlay-soft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.cap {
  padding: 1.15rem 1.25rem 1.3rem;
  background: color-mix(in srgb, var(--surface-1) 90%, transparent);
  display: grid;
  gap: 0.3rem;
  align-content: start;
  transition: background var(--dur-mid);
}
.cap:hover { background: var(--surface-2); }
.cap__k {
  font-size: 0.55rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-4);
}
.cap__v {
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--gold);
}
.cap:nth-child(3) .cap__v { color: var(--frost); }
.cap__n { font-size: 0.78rem; line-height: 1.55; color: var(--ink-3); }
.cap__n .mono { color: var(--ink-2); }

/* Plate swap feedback */
.plate.is-swapping .plate__shot { opacity: 0.35; }
.plate__shot { transition: opacity 220ms var(--ease-deep); }
.plate__cap { transition: opacity 220ms var(--ease-deep); }
.plate.is-new .plate__cap { animation: plateIn 480ms var(--ease-forge); }
@keyframes plateIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* ═══ F. PRICING ══════════════════════════════════════════════════ */
.pricing { position: relative; padding: var(--section-y) 0; }

.price-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(1rem, 2.4vw, 1.8rem);
  align-items: start;
}

.price {
  position: relative;
  display: grid;
  gap: 1.4rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-radius: var(--r-2xl);
  background: var(--card-face);
  border: 1px solid var(--hairline);
  box-shadow: 0 40px 90px -70px #000, var(--bevel);
}
.price__head { display: grid; gap: 0.35rem; }
.price__name {
  font-family: var(--f-display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.price__tag {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--ink-4);
}
.price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.1rem;
  margin-top: 0.5rem;
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
}
.price__amount .cur { font-size: 0.42em; translate: 0 -0.72em; color: var(--ink-3); }
.price__amount .dec { font-size: 0.5em; color: var(--ink-3); }
.price__amount .per {
  font-family: var(--f-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-4);
  margin-left: 0.5rem;
}
.price__sub { font-size: var(--t-small); color: var(--ink-3); }

.price__list { display: grid; gap: 0.72rem; }
.price__list li {
  position: relative;
  padding-left: 1.65rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
}
.price__list li b { color: var(--gold); font-weight: 650; }
.price__list li::before {
  content: "";
  position: absolute;
  left: 0.18rem; top: 0.42em;
  width: 9px; height: 5px;
  border-left: 1.6px solid var(--sage);
  border-bottom: 1.6px solid var(--sage);
  rotate: -45deg;
}
.price__list li.is-muted { color: var(--ink-4); }
.price__list li.is-muted::before {
  width: 8px; height: 1.5px;
  border: 0;
  rotate: 0;
  top: 0.72em;
  background: var(--ink-4);
  border-radius: 2px;
}
.price__fine { font-size: 0.6rem; letter-spacing: 0.07em; color: var(--ink-4); text-align: center; }

/* ── FAIR USE — full-width, below the grid ──────────────────────────────
   Kept out of the Pro card so the two tiers stay visually balanced, and set
   in a readable size because a boundary nobody can find is worse than none. */
.fairuse {
  display: grid;
  grid-template-columns: 14rem minmax(0, 1fr);
  gap: 0.6rem clamp(1.4rem, 3vw, 2.6rem);
  align-items: start;
  margin-top: clamp(1.1rem, 2.4vw, 1.7rem);
  padding-top: clamp(1.1rem, 2.4vw, 1.7rem);
  border-top: 1px dashed color-mix(in srgb, var(--gold) 26%, transparent);
}
.fairuse__k {
  font-size: var(--t-micro);
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
  color: var(--gold);
  padding-top: 0.2rem;
}
.fairuse__c {
  font-size: 0.82rem;
  line-height: 1.72;
  color: var(--ink-3);
  max-width: 62rem;
}
.fairuse__c b { color: var(--ink); font-weight: 650; }
.fairuse__t {
  grid-column: 2;
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  color: var(--ink-4);
}

/* Pro tier */
.price--pro {
  background: linear-gradient(168deg, #1A2233 0%, var(--surface-2) 46%, #0C1119 100%);
  border-color: var(--gold-a24);
  overflow: hidden;
  box-shadow: 0 70px 130px -80px color-mix(in srgb, var(--gold) 60%, transparent), var(--bevel);
}
.price__rim {
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(150deg, var(--gold) 0%, var(--gold-a24) 26%, transparent 52%, var(--frost-a16) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.price__glow {
  position: absolute;
  top: -38%; right: -18%;
  width: 74%; height: 74%;
  background: var(--halo-gold);
  filter: blur(38px);
  opacity: 0.7;
  pointer-events: none;
}
.price--pro > *:not(.price__rim):not(.price__glow) { position: relative; z-index: 1; }
.price--pro .price__name { color: var(--gold-bright); }
.price--pro .price__amount { color: var(--gold-bright); }
.price--pro .price__list li::before { border-color: var(--gold); }
.price__flag {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  z-index: 2;
  padding: 0.28rem 0.7rem;
  border-radius: var(--r-pill);
  background: linear-gradient(160deg, var(--gold-bright), var(--gold-deep));
  color: var(--gold-ink);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: var(--track-mid);
  text-transform: uppercase;
}

/* ── SUPPORT ASSURANCE BOX ──────────────────────────────────────────── */
.support {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(1.1rem, 2.6vw, 2.2rem);
  align-items: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  padding: clamp(1.5rem, 3vw, 2.3rem);
  border-radius: var(--r-2xl);
  background:
    radial-gradient(80% 120% at 100% 0%, var(--frost-a08), transparent 60%),
    linear-gradient(168deg, var(--surface-2), var(--surface-1) 65%, #0C1119);
  border: 1px solid var(--hairline);
  overflow: hidden;
}
.support::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--inlay-soft);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.support__seal {
  display: grid; place-items: center;
  width: 62px; height: 62px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-a14), transparent 70%), var(--surface-1);
  border: 1px solid var(--gold-a24);
  color: var(--gold);
  font-family: var(--f-display);
  font-size: 1.5rem;
  box-shadow: 0 0 34px -10px var(--gold-a40), inset 0 1px 0 color-mix(in srgb, #fff 6%, transparent);
}
.support__body { display: grid; gap: 0.5rem; }
.support__k { font-size: var(--t-micro); letter-spacing: var(--track-wide); text-transform: uppercase; color: var(--frost); }
.support__title {
  font-family: var(--f-display);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: var(--track-tight);
  color: var(--ink);
}
.support__copy { font-size: 0.92rem; line-height: 1.65; color: var(--ink-2); max-width: 44rem; }
.support__copy b { color: var(--ink); font-weight: 650; }
.support__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
}
.support__stats > div {
  padding: 0.75rem 1rem;
  background: color-mix(in srgb, var(--obsidian-void) 45%, transparent);
  display: grid;
  gap: 0.12rem;
  min-width: 7.6rem;
}
.support__stats dt { font-size: 0.55rem; letter-spacing: var(--track-mid); color: var(--ink-4); }
.support__stats dd { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--ink); }
.support__stats dd.gold { color: var(--gold); }

/* ═══ FOOTER — DEEP CANVAS ════════════════════════════════════════ */
.foot {
  position: relative;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding-top: clamp(3rem, 7vw, 5rem);
  background: linear-gradient(180deg, #090C11, var(--obsidian-void) 70%);
  border-top-left-radius: var(--r-foot);
  border-top-right-radius: var(--r-foot);
  overflow: hidden;
}
.foot::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  translate: -50% 0;
  width: 84%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-a40), var(--frost-a32), transparent);
}
.foot__runes {
  position: absolute;
  top: 0.6rem; left: 0; right: 0;
  text-align: center;
  font-family: var(--f-display);
  font-size: 0.62rem;
  letter-spacing: 0.85em;
  color: var(--gold);
  opacity: 0.16;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}
.foot__shell { display: grid; gap: clamp(1.8rem, 4vw, 3rem); padding-bottom: 2rem; }

.foot__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(1.6rem, 4vw, 3.4rem);
  align-items: start;
}
.foot__brand { display: flex; gap: 1rem; align-items: flex-start; }
.foot__wordmark {
  font-family: var(--f-display);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.foot__tag { margin-top: 0.35rem; font-size: 1rem; color: var(--ink-2); max-width: 22rem; }

.foot__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.foot__col { display: grid; gap: 0.15rem; align-content: start; }
.foot__h {
  font-size: 0.56rem;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 0.24rem;
}
.foot__col a {
  display: block;
  padding: 0.42rem 0;
  font-size: 0.85rem;
  color: var(--ink-2);
  width: fit-content;
  transition: color var(--dur-fast), translate var(--dur-fast) var(--ease-forge);
}
.foot__col a:hover { color: var(--gold); translate: 3px 0; }

.foot__declarations {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1.1rem 0;
  border-top: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--hairline) 70%, transparent);
}
.decl {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-1) 70%, transparent);
  border: 1px solid var(--hairline);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.decl i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ink-4);
  flex: none;
}
.decl[data-tone="gold"] i  { background: var(--gold); box-shadow: 0 0 8px var(--gold-a40); }
.decl[data-tone="frost"] i { background: var(--frost); box-shadow: 0 0 8px var(--frost-a32); }
.decl[data-tone="sage"] i  { background: var(--sage); }

.foot__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 1.5rem;
  min-width: 0;
  font-size: var(--t-micro);
  letter-spacing: 0.05em;
  color: var(--ink-4);
}
.foot__bar > p { min-width: 0; max-width: 100%; }
.foot__legal { font-size: 0.66rem; letter-spacing: 0.03em; }
.foot__legal a { color: var(--ink-3); white-space: nowrap; }
.foot__legal a:hover { color: var(--gold); }

/* ── FOOTER: the whole truth, not the flattering half ─────────────────── */
.foot__privacy {
  margin-top: -0.6rem;
  padding: 0.95rem 1.15rem 1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--hairline);
  border-left: 2px solid color-mix(in srgb, var(--frost) 42%, transparent);
  background: color-mix(in srgb, var(--surface-1) 55%, transparent);
  font-size: 0.72rem;
  line-height: 1.7;
  color: var(--ink-4);
  max-width: 62rem;
}
.foot__privacy b { color: var(--ink-2); font-weight: 650; }
.status-chip--wide { font-size: 0.6rem; }
.foot__disclaimer {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: -0.4rem 0 0;
  white-space: normal;
  overflow-wrap: anywhere;
  font-size: 0.58rem;
  line-height: 1.7;
  color: var(--ink-4);
  opacity: 0.72;
  letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

/* The live status tier used to sit inside the island, competing for width with
   the links and the CTA — which is why it had to be shed in two steps as the
   viewport narrowed. It now floats on its own row above the island, so it is
   never dropped. Only the gap tightens on small screens. */
@media (max-width: 640px) {
  .nav__status { gap: 0.3rem; }
  .nav__status .status-chip { padding: 0.26rem 0.55rem 0.26rem 0.45rem; }
}

@media (max-width: 1024px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__actions { margin-left: auto; }

  .artifact { grid-template-columns: 1fr; }
  .artifact__meta { border-right: 0; border-bottom: 1px solid var(--hairline); }

  .compare { grid-template-columns: 1fr; gap: 1.2rem; }
  .compare__rift { display: none; }

  .layer__grid { grid-template-columns: 1fr; }
  .layer__viz { order: -1; }
  .viz, .mesh { max-width: 17rem; }

  .price-grid { grid-template-columns: 1fr; }

  /* Evidence: rail becomes a horizontal filmstrip beneath the plate. */
  .viewer { grid-template-columns: 1fr; }
  .rail {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    overflow-y: hidden;
    max-height: none;
    padding-bottom: 0.5rem;
    padding-right: 0;
  }
  .rail__item { width: auto; padding-right: 0.9rem; }
  .rail__item::after { display: none; }
  .capstrip { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .support { grid-template-columns: auto 1fr; }
  .support__stats { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .foot__top { grid-template-columns: 1fr; }
}

/* Below the stacking threshold the deck becomes a plain vertical run —
   js/motion.js reads this to switch its scroll driver off. */
@media (max-width: 900px) {
  .stack-scroll { height: auto; }
  .stack-viewport {
    position: static;
    height: auto;
    min-height: 0;
    display: block;
  }
  .stack { display: grid; gap: clamp(1.4rem, 4vw, 2.4rem); place-items: stretch; }
  .layer { grid-area: auto; }
  .layer__viz { max-width: 15rem; justify-self: center; }
  .stack-viewport .layer__card { transform: none !important; filter: none !important; opacity: 1 !important; }
}@media (max-width: 860px) {
  .specbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tabs { grid-template-columns: 1fr; }
  .tabs__ink { display: none; }
  .tab {
    border-radius: var(--r-md);
    border: 1px solid transparent;
  }
  .tab.is-active {
    background: linear-gradient(160deg, var(--gold-a14), color-mix(in srgb, var(--surface-2) 90%, transparent));
    border-color: var(--gold-a24);
  }
}

@media (max-width: 640px) {
  :root { --r-foot: 2.5rem; --r-2xl: 1.75rem; }

  /* The hero is a full-viewport composition — tighten it so the headline
     never rides up under the floating nav island on a phone, and so the
     data-path callout fits without pushing the fold. */
  .hero { min-height: auto; padding: 8.25rem 0 clamp(1.2rem, 3vh, 2rem); align-items: flex-start; }
  .hero__shell { gap: 0.7rem; }
  .hero__title { font-size: clamp(2rem, 9.6vw, 3rem); }
  .hero__lede { font-size: 0.88rem; line-height: 1.52; }
  .badge { padding: 0.32rem 0.55rem 0.32rem 0.35rem; letter-spacing: 0.06em; }
  .badge__seal { width: 20px; height: 20px; font-size: 0.68rem; }
  .specbar { margin-top: 0.4rem; }
  .hero__actions { gap: 0.5rem; }
  .hero__foot { gap: 0.6rem; }
  .hero__plain { margin-top: 0.35rem; padding: 0.7rem 0.85rem 0.78rem; }
  .hero__plain-c { font-size: 0.71rem; line-height: 1.58; }
  .hero__telemetry { font-size: 0.56rem; gap: 0.3rem 0.9rem; }
  .scroll-cue__rail { height: 22px; }

  .nav__actions .btn--ghost { display: none; }
  .btn--lg { padding: 0.85rem 1.2rem; font-size: 0.86rem; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { width: 100%; }
  .btn--bare { align-items: center; }
  .hero__foot { flex-direction: column; align-items: flex-start; }

  .layer__specs { grid-template-columns: 1fr; }

  .specbar__cell { padding: 1rem 1rem 1.1rem; }
  .specbar__v { font-size: 0.92rem; }
  .specbar__m { font-size: 0.55rem; letter-spacing: 0.04em; }

  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__bar { flex-direction: column; align-items: flex-start; }

  .readout__row { grid-template-columns: 1fr; gap: 0.3rem; }
  .feed__item { grid-template-columns: auto 1fr; }
  .feed__tag { grid-column: 2; justify-self: start; }
  .support { grid-template-columns: 1fr; }
  .support__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .support__seal { width: 52px; height: 52px; font-size: 1.2rem; }

  /* Evidence plate stacks: the bezel becomes the hero of the block. */
  .plate { grid-template-columns: 1fr; justify-items: center; }
  .phone { width: min(15rem, 62vw); }
  .plate__cap { text-align: center; }
  .plate__copy { margin-inline: auto; }
  .plate__meta { justify-content: center; }
  .capstrip { grid-template-columns: 1fr; }
  .fairuse { grid-template-columns: 1fr; gap: 0.5rem; }
  .fairuse__t { grid-column: 1; }
  .hero__plain { grid-template-columns: 1fr; gap: 0.45rem; }
}

@media (max-width: 430px) {
  /* Brand + burger only: the island must never exceed its own pill. */
  .nav__actions .btn--gold { display: none; }
  .nav__pill { padding-right: 0.4rem; }
}

/* On phones the sticky stack would fight the 100dvh hero — flatten it. */
@media (max-height: 720px) {
  .hero { min-height: auto; padding-top: 8.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__halo-ring { animation: none; }
  .doc__scan::after { animation: none; width: 100%; }
  .scroll-cue__rail i { animation: none; }
  .mesh__edge.is-hot { animation: none; }
  .eq.is-live i { animation: none; height: 60%; }
  .status-chip__dot, .pulse-dot { animation: none; }
}