/* ============================================================
   Retronics — v5: phone RIGHT, content LEFT, arrows back.
   ============================================================ */

:root {
  /* DARK THEME — page bg is PURE BLACK so it matches video_edited.mp4's
     exported black backdrop exactly (MP4 cannot store true transparency). */
  --bg: #000000;
  --bg-elev: #0e0e0e;
  --bg-stage: #000000;
  --ink: #f5f5f5;
  --ink-dim: rgba(245, 245, 245, 0.66);
  --ink-mute: rgba(245, 245, 245, 0.40);
  --ink-faint: rgba(245, 245, 245, 0.18);
  --accent: #c4b8a8;
  --accent-strong: #d8cdb9;
  --accent-dim: rgba(196, 184, 168, 0.55);
  --rule: rgba(255, 255, 255, 0.08);
  --rule-strong: rgba(255, 255, 255, 0.18);
  --chip-bg: rgba(196, 184, 168, 0.07);
  --chip-border: rgba(196, 184, 168, 0.32);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-feature-settings: "ss01", "tnum", "kern";
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html.is-loading,
html.is-loading body { overflow: hidden; height: 100vh; }
::selection { background: var(--accent); color: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent); }

/* ============================================================
   Loader
   ============================================================ */

#loader {
  position: fixed; inset: 0; z-index: 100;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: opacity 700ms var(--ease), visibility 700ms var(--ease);
}
#loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-brand {
  position: absolute; top: var(--pad); left: var(--pad);
  font-family: var(--serif); font-size: 1.35rem; color: var(--ink-dim);
}
.loader-stage { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.loader-text {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--ink-dim);
}
.loader-bar {
  width: min(420px, 56vw); height: 1px; background: var(--ink-faint);
  position: relative; overflow: hidden;
}
.loader-fill {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: var(--accent); transition: width 120ms linear;
}
.loader-count {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; color: var(--ink-mute);
}

/* ============================================================
   Top nav — ported from landing-page.html reference.
   Logo wordmark · centre pill · 4 links + square cart button.
   ============================================================ */

.topnav {
  position: fixed; top: 0; left: 0; right: 0;
  height: 69px;
  display: grid;
  grid-template-columns: 340px 1fr 470px;
  align-items: center;
  padding: 0 28px;
  border-bottom: 1px solid rgba(198,157,89,0.14);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: rgba(0,0,0,0.18);
  z-index: 60;
}

.tn-logo {
  font-family: Inter, system-ui, sans-serif;
  font-size: 17px;
  letter-spacing: 0.52em;
  text-transform: uppercase;
  font-weight: 700;
  color: #f2eee7;
  text-decoration: none;
}

.tn-pill {
  justify-self: center;
  min-width: 680px;
  height: 38px;
  border: 1px solid rgba(198,157,89,0.48);
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e5c487;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  background: linear-gradient(180deg, rgba(198,157,89,0.08), rgba(198,157,89,0.02));
  box-shadow: inset 0 0 20px rgba(198,157,89,0.04);
  white-space: nowrap;
  padding: 0 22px;
}

.tn-links {
  margin: 0; padding: 0;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 32px;
  list-style: none;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  color: #f2eee7;
}
.tn-links a {
  color: #f2eee7;
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.tn-links a:hover { color: #e5c487; }

.tn-cart {
  width: 42px; height: 42px;
  border: 1px solid rgba(198,157,89,0.42);
  border-radius: 10px;
  display: grid; place-items: center;
  color: #e5c487;
  background: rgba(8,8,6,0.55);
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.tn-cart:hover { background: rgba(198,157,89,0.10); border-color: rgba(198,157,89,0.62); }

@media (max-width: 1500px) {
  .topnav { grid-template-columns: 240px 1fr 420px; }
  .tn-pill { min-width: 580px; }
}
@media (max-width: 1200px) {
  .topnav {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px;
    height: auto;
  }
  .tn-logo, .tn-pill, .tn-links { justify-self: center; }
  .tn-pill { min-width: 0; width: 100%; max-width: 680px; }
}
@media (max-width: 700px) {
  .tn-links { gap: 18px; flex-wrap: wrap; justify-content: center; }
  .tn-pill { font-size: 10px; letter-spacing: 0.18em; line-height: 1.4; white-space: normal; text-align: center; padding: 10px 16px; height: auto; }
}

/* ============================================================
   STORY — pinned stage
   ============================================================ */

#story { position: relative; width: 100%; /* height set by JS */ }
.story-stage {
  position: sticky; top: 0;
  width: 100%; height: 100vh;
  overflow: hidden;
  background: var(--bg-stage);
}

/* Soft radial light from above + bottom vignette */
.stage-vignette {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 60% at 72% 40%, rgba(196,184,168,0.08) 0%, rgba(10,10,10,0) 60%),
    radial-gradient(ellipse 90% 70% at 50% 100%, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom, rgba(10,10,10,0.0) 80%, rgba(0,0,0,0.5) 100%);
}

/* ---- Stage overlay: absolute panel host (text + app) ---- */

.stage-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

/* Side-positioned panels: text cards AND app bezels share these placements. */
.content-panel,
.app-bezel {
  position: absolute;
  top: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 560ms var(--ease-out), transform 620ms var(--ease-out);
}
.content-panel.side-left,
.app-bezel.side-left {
  left: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%) translateX(-22px);
}
.content-panel.side-right,
.app-bezel.side-right {
  right: clamp(1.5rem, 4vw, 3rem);
  transform: translateY(-50%) translateX(22px);
}
.content-panel.is-active,
.app-bezel.is-active {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

/* Text card sizing */
.content-panel {
  width: clamp(300px, 28vw, 420px);
  max-height: 80vh;
}

/* HERO panel */
.cp-hero .eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
.cp-hero h1 {
  font-family: var(--serif); font-weight: 400;
  /* New headline is 4 lines — smaller size, tighter leading */
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1.04; letter-spacing: -0.012em;
  margin: 0 0 1.05rem;
}
.cp-hero .line {
  font-family: var(--mono);
  font-size: clamp(10px, 0.85vw, 11.5px);
  letter-spacing: 0.04em;
  color: var(--accent);
  margin: 0 0 1.1rem;
  line-height: 1.55;
  text-transform: uppercase;
}

/* Live counters */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 0 0 0.9rem;
}
.hero-stat { display: flex; flex-direction: column; gap: 0.2rem; }
.hero-stat-num {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.2vw, 2.1rem);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.hero-stat-label {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* Live action log */
.hero-log {
  position: relative;
  height: 130px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: rgba(255, 255, 255, 0.014);
  border-radius: 2px;
}
.hero-log-rows {
  position: absolute;
  inset: 0 0 auto 0;
  padding: 0.55rem 0.7rem 0;
  animation: hero-log-scroll 14s linear infinite;
  will-change: transform;
}
.hero-log-row {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: 10px; line-height: 1.85;
  letter-spacing: 0.02em;
}
.hero-log-action { color: var(--ink-dim); }
.hero-log-hash   { color: var(--accent); opacity: 0.78; }
.hero-log-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, rgba(10,10,10,0) 0%, rgba(10,10,10,0.92) 100%);
  pointer-events: none;
}
@keyframes hero-log-scroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }   /* log is duplicated, so -50% loops seamlessly */
}

/* PROBLEM panel */
.cp-problem .eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.2rem;
}
.cp-problem .p-lines p {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  line-height: 1.06; letter-spacing: -0.008em;
  margin: 0 0 0.3rem; color: var(--ink-dim);
}
.cp-problem .p-lines p:nth-child(2) { color: var(--ink-mute); }
.cp-problem .p-lines p:nth-child(3) { color: var(--ink-faint); }
.cp-problem .punch {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.8rem); line-height: 1;
  margin: 1rem 0 0; color: var(--ink);
}

/* MODULE card — editorial side panel matching explaoding-effect.html.
   NOTE: do NOT set `position` here — it must inherit `position: absolute`
   from .content-panel so the card stays pinned to its side, and the
   absolute .mod-side-ticks below positions against the card itself. */
.cp-module {
  width: clamp(300px, 24vw, 340px);
  max-height: calc(100vh - 260px);
  overflow-y: auto;
  padding: 22px 22px 18px;
  border: 1px solid rgba(200,158,89,0.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(11,10,8,0.86), rgba(8,8,6,0.74));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 24px 80px rgba(0,0,0,0.45);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
  scrollbar-width: thin;
  scrollbar-color: rgba(200,158,89,0.4) transparent;
}
.cp-module::-webkit-scrollbar { width: 4px; }
.cp-module::-webkit-scrollbar-thumb { background: rgba(200,158,89,0.4); border-radius: 2px; }
/* Shift the panel up so it sits ABOVE the new bottom feature strip.
   Specificity (0,2,0) beats the base `.content-panel { top: 50% }`. */
.content-panel.cp-module {
  top: calc(50% - 70px);
}
.cp-module .mod-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #e5c58b;
  font-weight: 700;
  display: block;
  margin: 0 0 14px;
}
.cp-module .mod-title {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.012em;
  color: var(--cream, #f4efe7);
  margin: 0 0 12px;
}
.cp-module .mod-tagline {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 17px;
  font-weight: 500;
  font-style: italic;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--cream, #f4efe7);
  margin: 0 0 14px;
}
.cp-module .mod-intro {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.65;
  color: rgba(244,239,231,0.78);
  margin: 0;
}
.cp-module .mod-divider {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, rgba(200,158,89,0.42), transparent);
  margin: 16px 0 18px;
}
.cp-module .mod-section-title {
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #e5c58b;
  margin: 0 0 12px;
  font-weight: 700;
}
.cp-module .mod-test-list {
  margin: 0 0 18px;
  padding-left: 18px;
  list-style: disc;
  display: grid;
  gap: 9px;
}
.cp-module .mod-test-list li {
  font-family: Inter, system-ui, sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: rgba(244,239,231,0.78);
  padding-left: 0;
  position: static;
  &::marker { color: rgba(200,158,89,0.65); }
}
.cp-module .mod-test-list li::before { content: none; }
.cp-module .mod-test-list li::marker { color: rgba(200,158,89,0.65); }
.cp-module .mod-ghost-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(200,158,89,0.34);
  color: #e5c58b;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  background: rgba(200,158,89,0.04);
  margin: 0 0 22px;
  line-height: 1.4;
  text-align: center;
  max-width: 100%;
}
.cp-module .mod-why {
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.6;
  color: rgba(244,239,231,0.78);
  margin: 0 0 16px;
}
.cp-module .mod-chip-foot {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--accent-dim);
  background: rgba(196,184,168,0.05);
  color: var(--accent);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  border-radius: 4px;
}
.cp-module .mod-chip-foot::before {
  content: ""; width: 5px; height: 5px;
  background: var(--accent); border-radius: 50%;
  box-shadow: 0 0 8px var(--accent);
  animation: chip-pulse 2.2s ease-in-out infinite;
}
@keyframes chip-pulse { 0%,100%{opacity:1;} 50%{opacity:0.45;} }

/* Side ticks indicator — bonus right-edge progress dots */
.cp-module .mod-side-ticks {
  position: absolute;
  right: -34px;
  top: 60px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  opacity: 0.85;
}
.cp-module .mod-side-ticks span {
  width: 14px;
  height: 1px;
  background: rgba(255,255,255,0.18);
  position: relative;
  display: block;
}
.cp-module .mod-side-ticks span.active::before {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #e5c58b;
  box-shadow: 0 0 12px rgba(229,197,139,0.85);
}
.content-panel.side-right .cp-module .mod-side-ticks {
  right: auto; left: -34px;
}
.content-panel.side-right .cp-module .mod-side-ticks span.active::before {
  right: auto; left: 18px;
}

/* OUTRO panel */
.cp-outro .eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.36em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.2rem;
}
.cp-outro h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  line-height: 1.04; letter-spacing: -0.014em;
  margin: 0 0 1.1rem;
}
.cp-outro .sub {
  font-size: clamp(0.9rem, 1.0vw, 1rem); line-height: 1.55;
  color: var(--ink-dim); margin: 0 0 1.2rem; max-width: 40ch;
}
.cp-outro .outro-chart {
  position: relative;
  height: 130px;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.018);
}

/* ---- CENTER phone zone (exploded canvas) ---- */

.phone-zone {
  position: absolute;
  z-index: 1;
  /* JS sets left/top/width/height to fit the center column */
}
#phone-canvas {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: -webkit-optimize-contrast;
}

/* ---- App screenshot panel — the screenshot is ALREADY a phone-with-bezel
   mockup, so no CSS frame, notch, or border is drawn around it. ---- */

.app-bezel {
  width: clamp(280px, 24vw, 360px);
  height: clamp(540px, 76vh, 720px);
  /* no background, no border, no shadow, no notch — bare container */
  overflow: visible;
}
.app-image-wrap {
  position: absolute;
  inset: 0;
  overflow: visible;
}
.app-image-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;        /* show the FULL screenshot incl. its own phone frame */
  object-position: center;
  display: block;
  opacity: 0;
  transition: opacity 520ms var(--ease-out);
}
.app-image-wrap img.is-active { opacity: 1; }

.app-spec { display: none; }   /* caption strip removed with the bezel */

/* ============================================================
   Arrow layer — only visible during module chapters
   ============================================================ */

#arrow-svg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity 380ms var(--ease);
}
#arrow-svg.is-visible { opacity: 1; }
#arrow-svg .arrow-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-linecap: round;          /* solid line (no dashes), straight L→target */
  opacity: 0.95;
}
#arrow-svg .arrow-path.draw {
  animation: arrow-draw 600ms var(--ease-out) both;
}
@keyframes arrow-draw {
  from { opacity: 0; }
  to   { opacity: 0.95; }
}
#arrow-svg .target-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.85;
  animation: target-ping 1.6s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes target-ping {
  0%   { transform: scale(0.4); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}
#arrow-svg .target-dot { fill: var(--accent); }

/* ============================================================
   Chapter dots
   ============================================================ */

.chapter-dots {
  position: absolute;
  right: 0.7rem; top: 50%; transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: auto;
  z-index: 4;
}
.chapter-dots button {
  width: 22px; height: 14px; padding: 0;
  background: transparent; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.chapter-dots button::after {
  content: ""; width: 14px; height: 1px;
  background: var(--ink-faint);
  transition: background 240ms var(--ease), width 240ms var(--ease);
}
.chapter-dots button:hover::after  { background: var(--ink-dim); width: 18px; }
.chapter-dots button.is-active::after { background: var(--accent); width: 22px; }

/* ============================================================
   HUD
   ============================================================ */

.stage-hud {
  position: absolute;
  left: var(--pad);
  right: clamp(2.5rem, 5vw, 4rem);
  bottom: 1.4rem;
  display: flex; flex-direction: column; gap: 0.55rem;
  z-index: 4;
}
.hud-meta {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hud-meta #hudChapter { color: var(--accent); }
.hud-spacer { color: var(--ink-faint); }
.hud-progress {
  height: 1px; background: var(--ink-faint);
  position: relative; overflow: hidden;
}
.hud-progress-bar {
  position: absolute; inset: 0 auto 0 0; width: 0%;
  background: linear-gradient(to right, var(--accent-strong), var(--accent));
  transition: width 80ms linear;
}

/* ============================================================
   Scroll hint
   ============================================================ */

.scroll-hint {
  position: absolute;
  left: var(--pad);
  bottom: 5.6rem;
  display: flex; align-items: center; gap: 0.7rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 600ms var(--ease);
  z-index: 4;
}
.scroll-hint.is-visible { opacity: 1; }
.scroll-hint .line {
  display: inline-block;
  width: 28px; height: 1px;
  background: var(--accent);
  animation: hint-line 1.6s var(--ease) infinite;
  transform-origin: left;
}
.scroll-hint .word {
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.36em; text-transform: uppercase; color: var(--accent);
}
@keyframes hint-line {
  0%   { transform: scaleX(0); opacity: 0; }
  50%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(0); transform-origin: right; opacity: 0; }
}

/* ============================================================
   Per-module SVG visual animations
   ============================================================ */

/* M3 — display pixel grid */
.vis-m3 .px       { fill: #c4b8a8; opacity: 0.32; }
.vis-m3 .px.live  { animation: m3-glow 2.4s ease-in-out infinite; }
.vis-m3 .px.dead  { opacity: 0.07; }
.vis-m3 .scan     { stroke: #c4b8a8; stroke-opacity: 0.6; animation: m3-scan 3.2s linear infinite; }
@keyframes m3-glow { 0%,100%{opacity:0.18;} 50%{opacity:0.62;} }
@keyframes m3-scan { 0%{transform:translateY(0);opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{transform:translateY(220px);opacity:0;} }

/* M4 — touch heatmap + ripples */
.vis-m4 .cell { fill: #c4b8a8; }
.vis-m4 .rip  { fill: none; stroke: #c4b8a8; stroke-width: 1; }
.vis-m4 .r1   { animation: m4-rip 1.6s ease-out infinite; }
.vis-m4 .r2   { animation: m4-rip 1.6s ease-out infinite 0.55s; }
.vis-m4 .r3   { animation: m4-rip 1.6s ease-out infinite 1.05s; }
@keyframes m4-rip { 0%{r:2;opacity:1;} 100%{r:30;opacity:0;} }

/* M2 — ultrasonic chirp + IR */
.vis-m2 .chirp { stroke: #c4b8a8; stroke-width: 1.2; fill: none; stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: m2-chirp 3s ease-in-out infinite; }
.vis-m2 .ir    { stroke: rgba(245,245,245,0.5); stroke-width: 1; fill: none; }
.vis-m2 .ir-bar{ stroke: #c4b8a8; stroke-width: 1.6; animation: m2-bar 1.6s ease-out infinite; }
@keyframes m2-chirp { 0%{stroke-dashoffset:1200;opacity:0;} 20%{opacity:1;} 100%{stroke-dashoffset:0;opacity:0.95;} }
@keyframes m2-bar   { 0%{opacity:1;transform:scaleY(1);} 100%{opacity:0;transform:scaleY(0.3);} }

/* M5 — figure-8 */
.vis-m5 .grid  { fill: rgba(245,245,245,0.08); }
.vis-m5 .fig8  { stroke: #c4b8a8; stroke-width: 1.2; fill: none; stroke-dasharray: 700; stroke-dashoffset: 700; animation: m5-fig 3.4s ease-in-out infinite; }
.vis-m5 .vec   { fill: #c4b8a8; }
@keyframes m5-fig { 0%{stroke-dashoffset:700;} 60%{stroke-dashoffset:0;} 100%{stroke-dashoffset:-700;} }

/* M12 — action log */
.vis-m12 .log-rows { animation: m12-roll 7s linear infinite; }
@keyframes m12-roll { 0%{transform:translateY(0);} 100%{transform:translateY(-220px);} }
.vis-m12 .row text { font-family: var(--mono); font-size: 10px; fill: rgba(245,245,245,0.65); }
.vis-m12 .row .hash{ fill: #c4b8a8; }
.vis-m12 .gutter   { fill: rgba(10,10,10,0.94); }

/* M13 — thermometer */
.vis-m13 .th-bg   { fill: rgba(255,255,255,0.04); stroke: rgba(255,255,255,0.2); }
.vis-m13 .th-fill { fill: #c4b8a8; transform-origin: bottom; animation: m13-rise 3s ease-in-out infinite; }
.vis-m13 .th-line { stroke: rgba(245,245,245,0.32); stroke-dasharray: 3 3; }
@keyframes m13-rise { 0%,100%{transform:scaleY(0.35);} 50%{transform:scaleY(0.78);} }

/* M11 — FFT bars */
.vis-m11 .bar { fill: #c4b8a8; transform-origin: bottom; }
.vis-m11 .bar:nth-child(1)  { animation: m11-bar 1.6s ease-in-out infinite 0.00s; }
.vis-m11 .bar:nth-child(2)  { animation: m11-bar 1.6s ease-in-out infinite 0.05s; }
.vis-m11 .bar:nth-child(3)  { animation: m11-bar 1.6s ease-in-out infinite 0.10s; }
.vis-m11 .bar:nth-child(4)  { animation: m11-bar 1.6s ease-in-out infinite 0.15s; }
.vis-m11 .bar:nth-child(5)  { animation: m11-bar 1.6s ease-in-out infinite 0.20s; }
.vis-m11 .bar:nth-child(6)  { animation: m11-bar 1.6s ease-in-out infinite 0.25s; }
.vis-m11 .bar:nth-child(7)  { animation: m11-bar 1.6s ease-in-out infinite 0.30s; }
.vis-m11 .bar:nth-child(8)  { animation: m11-bar 1.6s ease-in-out infinite 0.35s; }
.vis-m11 .bar:nth-child(9)  { animation: m11-bar 1.6s ease-in-out infinite 0.40s; }
.vis-m11 .bar:nth-child(10) { animation: m11-bar 1.6s ease-in-out infinite 0.45s; }
.vis-m11 .bar:nth-child(11) { animation: m11-bar 1.6s ease-in-out infinite 0.50s; }
.vis-m11 .bar:nth-child(12) { animation: m11-bar 1.6s ease-in-out infinite 0.55s; }
.vis-m11 .bar:nth-child(13) { animation: m11-bar 1.6s ease-in-out infinite 0.60s; }
.vis-m11 .bar:nth-child(14) { animation: m11-bar 1.6s ease-in-out infinite 0.65s; }
.vis-m11 .bar:nth-child(15) { animation: m11-bar 1.6s ease-in-out infinite 0.70s; }
.vis-m11 .bar:nth-child(16) { animation: m11-bar 1.6s ease-in-out infinite 0.75s; }
.vis-m11 .bar:nth-child(17) { animation: m11-bar 1.6s ease-in-out infinite 0.80s; }
.vis-m11 .bar:nth-child(18) { animation: m11-bar 1.6s ease-in-out infinite 0.85s; }
.vis-m11 .bar:nth-child(19) { animation: m11-bar 1.6s ease-in-out infinite 0.90s; }
.vis-m11 .bar:nth-child(20) { animation: m11-bar 1.6s ease-in-out infinite 0.95s; }
@keyframes m11-bar { 0%,100%{transform:scaleY(0.18);} 50%{transform:scaleY(1);} }

/* M10 — drop trace */
.vis-m10 .axis  { stroke: rgba(245,245,245,0.1); }
.vis-m10 .trace { stroke: #c4b8a8; stroke-width: 1.6; fill: none; stroke-dasharray: 700; stroke-dashoffset: 700; animation: m10-trace 2.8s ease-out infinite; }
.vis-m10 .spike { fill: #c4b8a8; animation: m10-spike 2.8s ease-in-out infinite; }
@keyframes m10-trace { 0%{stroke-dashoffset:700;} 80%{stroke-dashoffset:0;} 100%{stroke-dashoffset:0;} }
@keyframes m10-spike { 0%,55%{opacity:0;r:1;} 65%{opacity:1;r:6;} 100%{opacity:0.5;r:3;} }

/* M6 — antenna bars */
.vis-m6 .stack-bg   { fill: rgba(255,255,255,0.04); }
.vis-m6 .stack-fill { fill: #c4b8a8; transform-origin: bottom; }
.vis-m6 .s1 { animation: m6-stack 2s ease-in-out infinite 0.0s; }
.vis-m6 .s2 { animation: m6-stack 2s ease-in-out infinite 0.15s; }
.vis-m6 .s3 { animation: m6-stack 2s ease-in-out infinite 0.30s; }
.vis-m6 .s4 { animation: m6-stack 2s ease-in-out infinite 0.45s; }
.vis-m6 .weak { fill: rgba(245,245,245,0.22); animation: m6-weak 2s ease-in-out infinite 0.6s; }
.vis-m6 .label { font-family: var(--mono); font-size: 10px; fill: rgba(245,245,245,0.55); letter-spacing: 0.08em; }
@keyframes m6-stack { 0%,100%{transform:scaleY(0.55);} 50%{transform:scaleY(1);} }
@keyframes m6-weak  { 0%,100%{transform:scaleY(0.18);} 50%{transform:scaleY(0.36);} }

/* M8 — chassis + freq curve */
.vis-m8 .chassis { fill: none; stroke: #c4b8a8; stroke-width: 1.3; animation: m8-shake 0.18s linear infinite; transform-origin: center; }
.vis-m8 .curve   { stroke: rgba(245,245,245,0.55); stroke-width: 1; fill: none; }
.vis-m8 .peak    { fill: #c4b8a8; animation: m8-peak 1.6s ease-in-out infinite; }
@keyframes m8-shake { 0%,100%{transform:translate(0,0);} 25%{transform:translate(-1.5px,0.5px);} 50%{transform:translate(1.5px,-0.5px);} 75%{transform:translate(-0.5px,1.5px);} }
@keyframes m8-peak  { 0%,100%{transform:scale(1);opacity:0.85;} 50%{transform:scale(1.8);opacity:1;} }

/* M79 — battery gauge */
.vis-m79 .g-bg   { stroke: rgba(255,255,255,0.12); stroke-width: 8; fill: none; }
.vis-m79 .g-fill { stroke: #c4b8a8; stroke-width: 8; fill: none; stroke-linecap: round; animation: m79-fill 3.2s ease-in-out infinite; }
@keyframes m79-fill { 0%{stroke-dasharray:0 500;} 60%{stroke-dasharray:430 500;} 100%{stroke-dasharray:430 500;} }

/* M1 — Merkle tree */
.vis-m1 .edge { stroke: rgba(245,245,245,0.2); stroke-width: 1; }
.vis-m1 .node { fill: rgba(10,10,10,0.85); stroke: #c4b8a8; stroke-width: 1; }
.vis-m1 .n1   { animation: m1-pulse 2.4s ease-in-out infinite 0.0s; }
.vis-m1 .n2   { animation: m1-pulse 2.4s ease-in-out infinite 0.2s; }
.vis-m1 .n3   { animation: m1-pulse 2.4s ease-in-out infinite 0.4s; }
.vis-m1 .n4   { animation: m1-pulse 2.4s ease-in-out infinite 0.6s; }
.vis-m1 .n5   { animation: m1-pulse 2.4s ease-in-out infinite 0.8s; }
.vis-m1 .root { animation: m1-pulse 2.4s ease-in-out infinite 1.0s; fill: rgba(196,184,168,0.22); }
@keyframes m1-pulse { 0%,100%{stroke-opacity:0.4;} 50%{stroke-opacity:1;filter:drop-shadow(0 0 6px #c4b8a8);} }

/* ============================================================
   Mobile — stack content above phone
   ============================================================ */

@media (max-width: 1180px) {
  /* Tablet: hide the app bezel — not enough room for 3 things */
  .app-bezel { display: none; }
  .content-panel { width: clamp(320px, 36vw, 460px); }
}
@media (max-width: 900px) {
  /* Mobile: stack — phone on top, text/app bezel collapsed below */
  .content-panel,
  .app-bezel {
    position: absolute;
    left: 4vw !important; right: 4vw !important;
    width: auto;
    top: auto !important; bottom: 4vh;
    transform: translateY(20px) !important;
  }
  .content-panel.is-active,
  .app-bezel.is-active {
    transform: translateY(0) !important;
  }
  .app-bezel { height: 38vh; }
  .cp-hero h1 { font-size: clamp(2rem, 10vw, 3.6rem); }
  .cp-problem .p-lines p { font-size: clamp(1.4rem, 6vw, 2.4rem); }
  .cp-module { padding: 1.1rem 1.2rem; }
  .cp-module .mod-title { font-size: 1.3rem; }
  .chapter-dots { display: none; }
  #arrow-svg { display: none; }
  .scroll-hint { display: none; }
}

/* ============================================================
   POST-STORY sections
   ============================================================ */

main { position: relative; z-index: 3; }
#receipt, #builders, #regulatory, footer {
  position: relative;
  background: var(--bg);
}

.section-head { max-width: 900px; }
.eyebrow {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1.25rem;
}
h2 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4.5rem); line-height: 1;
  letter-spacing: -0.015em; margin: 0 0 1.5rem;
}
.section-blurb {
  font-size: clamp(1rem, 1.2vw, 1.1rem); line-height: 1.55;
  color: var(--ink-dim); margin: 0 0 0.6rem; max-width: 60ch;
}
.section-blurb.strong { color: var(--ink); }

/* ============================================================
   RECEIPT / VC-RECEIPT STAGE — ported from
   on-device-thirteen-attestations.html. All selectors namespaced
   `.vcr-*` to avoid colliding with prior `.code-*` / `.score-*` /
   `.receipt-*` rules.
   ============================================================ */
#receipt.vcr-stage {
  --vcr-cream:#f2eee6;
  --vcr-muted:rgba(242,238,230,.62);
  --vcr-faint:rgba(242,238,230,.28);
  --vcr-gold:#c99656;
  --vcr-gold2:#e8c78c;
  --vcr-gold3:#ffd79b;
  --vcr-serif:"Cormorant Garamond","Instrument Serif",serif;
  --vcr-mono:"Roboto Mono","JetBrains Mono",monospace;
  --vcr-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  background:
    radial-gradient(circle at 67% 12%, rgba(232,199,140,.12), transparent 20%),
    radial-gradient(circle at 50% 55%, rgba(232,199,140,.07), transparent 40%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 46px clamp(1rem, 7vw, 7vw) 42px;
  color: var(--vcr-cream);
  font-family: var(--vcr-sans);
  display: block;
  border-top: 1px solid var(--rule);
}
#receipt.vcr-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(232,199,140,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,199,140,.014) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 76%);
  z-index: -3;
  opacity: 0.55;
  pointer-events: none;
}
#receipt.vcr-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.66) 100%);
  z-index: -2;
  pointer-events: none;
}

/* Frame corners */
.vcr-corner {
  position: absolute;
  width: 54px; height: 54px;
  z-index: 4;
}
.vcr-corner::before, .vcr-corner::after {
  content: "";
  position: absolute;
  background: var(--vcr-gold2);
  box-shadow: 0 0 12px rgba(232,199,140,.5);
}
.vcr-tl { left: 28px; top: 28px; }
.vcr-tr { right: 28px; top: 28px; }
.vcr-bl { left: 28px; bottom: 28px; }
.vcr-br { right: 28px; bottom: 28px; }
.vcr-tl::before, .vcr-bl::before { left: 0; width: 1px; height: 38px; }
.vcr-tl::after,  .vcr-bl::after  { left: 0; width: 38px; height: 1px; }
.vcr-tr::before, .vcr-br::before { right: 0; width: 1px; height: 38px; }
.vcr-tr::after,  .vcr-br::after  { right: 0; width: 38px; height: 1px; }
.vcr-tl::before, .vcr-tr::before { top: 0; }
.vcr-tl::after,  .vcr-tr::after  { top: 0; }
.vcr-bl::before, .vcr-br::before { bottom: 0; }
.vcr-bl::after,  .vcr-br::after  { bottom: 0; }

/* Hero */
.vcr-hero {
  display: grid;
  grid-template-columns: minmax(620px, 1fr) 420px;
  gap: 42px;
  align-items: start;
  margin: 0 auto 28px;
  max-width: 1480px;
  position: relative;
  z-index: 2;
}
.vcr-eyebrow {
  font: 500 13px/1 var(--vcr-mono);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
  margin-bottom: 18px;
}
#receipt.vcr-stage .vcr-h1 {
  font-family: var(--vcr-serif);
  font-size: clamp(40px, 5.2vw, 86px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--vcr-cream);
  text-shadow: 0 0 24px rgba(255,255,255,.05);
  margin: 0;
}
.vcr-h1 .vcr-gold {
  display: block;
  color: var(--vcr-gold2);
  font-style: normal;
}
.vcr-lead {
  margin-top: 23px;
  max-width: 610px;
  color: rgba(242,238,230,.76);
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.52;
  letter-spacing: -0.01em;
}

/* Trust orbit (right of hero) */
.vcr-trust-orbit {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  overflow: visible;
}
.vcr-orbit {
  position: absolute;
  left: 6px; top: 0;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(232,199,140,.18) 0 1px, transparent 1px 26px);
}
.vcr-orbit::before, .vcr-orbit::after {
  content: "";
  position: absolute;
  background: rgba(232,199,140,.32);
}
.vcr-orbit::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.vcr-orbit::after { left: 0; right: 0; top: 50%; height: 1px; }
.vcr-shield {
  position: absolute;
  left: 68px; top: 54px;
  width: 82px; height: 96px;
  border-radius: 22px 22px 34px 34px;
  border: 1px solid rgba(232,199,140,.58);
  display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(232,199,140,.14), rgba(9,9,7,.88));
  box-shadow:
    0 0 45px rgba(232,199,140,.16),
    inset 0 0 24px rgba(232,199,140,.08);
  color: var(--vcr-gold3);
}
.vcr-shield::before {
  content: "";
  position: absolute; inset: 9px;
  border: 1px solid rgba(232,199,140,.24);
  border-radius: 17px 17px 28px 28px;
}
.vcr-shield svg {
  width: 42px; height: 42px;
  filter: drop-shadow(0 0 12px rgba(232,199,140,.65));
}
.vcr-trust-list {
  position: absolute;
  right: 0; top: 10px;
  display: grid; gap: 18px;
  width: 205px;
}
.vcr-trust-item {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
  align-items: center;
}
.vcr-trust-item .vcr-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(232,199,140,.38);
  display: grid; place-items: center;
  color: var(--vcr-gold2);
}
.vcr-trust-item svg { width: 22px; height: 22px; }
.vcr-trust-item b {
  font: 600 11px/1 var(--vcr-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
}
.vcr-trust-item span {
  display: block;
  margin-top: 5px;
  color: var(--vcr-muted);
  font-size: 13px;
  line-height: 1.25;
}

/* Dashboard */
.vcr-dashboard {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  gap: 14px;
  position: relative;
  z-index: 3;
}
.vcr-card {
  border: 1px solid rgba(232,199,140,.22);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(14,14,12,.78), rgba(7,7,6,.72));
  box-shadow:
    0 22px 85px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.03);
  overflow: hidden;
}

.vcr-vc-card {
  display: grid;
  grid-template-columns: 225px 1fr;
  min-height: 620px;
}
.vcr-device-side {
  border-right: 1px solid rgba(232,199,140,.16);
  padding: 26px 18px 22px;
  background: radial-gradient(circle at 50% 28%, rgba(232,199,140,.07), transparent 30%);
}
.vcr-phone-mini {
  height: 215px;
  border-radius: 28px;
  border: 1px solid rgba(232,199,140,.28);
  background: linear-gradient(180deg,#151411,#030303);
  position: relative;
  margin: 8px auto 28px;
  width: 96px;
  box-shadow: 0 25px 50px rgba(0,0,0,.38);
}
.vcr-phone-mini::before {
  content: "";
  position: absolute;
  left: 50%; top: 13px;
  transform: translateX(-50%);
  width: 45px; height: 9px;
  border-radius: 20px;
  background: #000;
}
.vcr-phone-mini::after {
  content: "";
  position: absolute;
  left: 50%; top: 91px;
  transform: translate(-50%, -50%);
  width: 62px; height: 62px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(232,199,140,.35) 0 1px, transparent 1px 9px);
  box-shadow: 0 0 24px rgba(232,199,140,.18);
}
.vcr-side-label {
  font: 500 11px/1 var(--vcr-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
  margin-bottom: 9px;
}
.vcr-side-box {
  min-height: 38px;
  border: 1px solid rgba(232,199,140,.20);
  border-radius: 6px;
  display: flex;
  align-items: center;
  padding: 8px 10px;
  color: var(--vcr-cream);
  font: 400 11px/1.35 var(--vcr-mono);
  margin-bottom: 20px;
  word-break: break-all;
  overflow-wrap: anywhere;
}
.vcr-side-value {
  color: var(--vcr-cream);
  font: 400 13px/1.5 var(--vcr-mono);
  margin-bottom: 22px;
}
.vcr-side-value small {
  display: block;
  color: var(--vcr-muted);
  font-size: 12px;
  margin-top: 3px;
}

.vcr-code-head {
  height: 58px;
  border-bottom: 1px solid rgba(232,199,140,.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 22px;
  color: var(--vcr-gold2);
  font: 500 12px/1 var(--vcr-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vcr-stage .copy-btn {
  height: 32px;
  border: 1px solid rgba(232,199,140,.26);
  border-radius: 6px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vcr-gold2);
  background: rgba(232,199,140,.04);
  font: 500 11px/1 var(--vcr-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease);
}
.vcr-stage .copy-btn:hover { background: rgba(232,199,140,.10); }
.vcr-stage .copy-btn.is-copied { color: var(--vcr-gold3); border-color: var(--vcr-gold3); }

.vcr-pre {
  margin: 0;
  padding: 22px 30px 28px;
  font: 400 13px/1.62 var(--vcr-mono);
  color: rgba(242,238,230,.78);
  white-space: pre-wrap;
  overflow-x: auto;
}
.vcr-json-key  { color: #a9c7ff; }
.vcr-json-str  { color: #9cd39d; }
.vcr-json-num  { color: #f1c27d; }
.vcr-json-bool { color: #d9a7ff; }
.vcr-json-punc { color: rgba(242,238,230,.55); }

/* Right stack — confidence + rekor */
.vcr-right-stack {
  display: grid;
  grid-template-rows: 1fr auto;
  gap: 14px;
}
.vcr-confidence {
  padding: 22px 24px 24px;
}
.vcr-panel-title {
  font: 500 12px/1 var(--vcr-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
  margin-bottom: 22px;
}
.vcr-score-row {
  display: grid;
  grid-template-columns: 42px 1fr 50px;
  gap: 12px;
  align-items: center;
  height: 25px;
  font: 400 13px/1 var(--vcr-mono);
  color: var(--vcr-muted);
}
.vcr-conf-bar {
  height: 4px;
  border-radius: 3px;
  background: rgba(242,238,230,.13);
  position: relative;
  overflow: hidden;
}
.vcr-conf-bar i {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--vcr-gold), var(--vcr-gold3));
  box-shadow: 0 0 10px rgba(232,199,140,.34);
}
.vcr-score-row span:last-child {
  text-align: right;
  color: var(--vcr-cream);
}
.vcr-truth-score {
  height: 86px;
  border-top: 1px solid rgba(232,199,140,.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px 0 0;
  margin-top: 24px;
}
.vcr-truth-score small {
  font: 500 12px/1 var(--vcr-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
}
.vcr-truth-score b {
  font-family: var(--vcr-serif);
  font-size: 58px;
  font-weight: 400;
  color: var(--vcr-gold2);
}

.vcr-rekor { padding: 18px 20px; }
.vcr-rekor-title {
  font: 500 12px/1 var(--vcr-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
  margin-bottom: 14px;
}
.vcr-rekor-grid {
  display: grid;
  grid-template-columns: 1fr 120px;
  gap: 16px;
  align-items: start;
}
.vcr-rekor .vcr-pre {
  font-size: 12px;
  line-height: 1.48;
  padding: 0;
}
.vcr-qr {
  width: 120px; height: 120px;
  border: 1px solid rgba(232,199,140,.28);
  border-radius: 8px;
  background: #d6ad6c;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 3px;
  padding: 8px;
}
.vcr-qr i { background: #15120c; }
.vcr-qr i:nth-child(3n),
.vcr-qr i:nth-child(7n) { background: transparent; }
.vcr-qr-label {
  text-align: center;
  color: var(--vcr-gold2);
  font: 500 11px/1 var(--vcr-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 10px;
}

/* Bottom proof bar */
.vcr-bottom-proof {
  max-width: 1480px;
  margin: 14px auto 0;
  min-height: 96px;
  border: 1px solid rgba(232,199,140,.18);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(14,14,12,.68), rgba(7,7,6,.58));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
  z-index: 3;
}
.vcr-proof {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 16px;
  align-items: center;
  padding: 20px clamp(20px, 4vw, 64px);
  border-right: 1px solid rgba(232,199,140,.16);
}
.vcr-proof:last-child { border-right: 0; }
.vcr-proof .vcr-ico {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(232,199,140,.35);
  display: grid; place-items: center;
  color: var(--vcr-gold2);
}
.vcr-proof svg { width: 24px; height: 24px; }
.vcr-proof b {
  font: 600 13px/1 var(--vcr-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vcr-gold2);
}
.vcr-proof span {
  display: block;
  margin-top: 7px;
  color: var(--vcr-muted);
  font-size: 15px;
}

@media (max-width: 1100px) {
  #receipt.vcr-stage { padding: 30px 22px; }
  .vcr-hero, .vcr-dashboard { grid-template-columns: 1fr; }
  .vcr-trust-orbit { display: none; }
  .vcr-vc-card { grid-template-columns: 1fr; }
  .vcr-device-side { display: none; }
  .vcr-bottom-proof { grid-template-columns: 1fr; }
  .vcr-proof {
    border-right: 0;
    border-bottom: 1px solid rgba(232,199,140,.14);
    padding: 20px;
  }
  .vcr-proof:last-child { border-bottom: 0; }
  #receipt.vcr-stage .vcr-h1 { font-size: 40px; }
  .vcr-right-stack { grid-template-rows: auto; }
  .vcr-rekor-grid { grid-template-columns: 1fr; }
  .vcr-qr { display: none; }
  .vcr-corner { display: none; }
}

/* ============================================================
   BUILDERS / INS-STAGE — ported from insurers.html.
   Full-bleed artboard with left copy + right API card. Namespaced
   `.ins-*` to avoid colliding with the prior `#builders` rules.
   ============================================================ */
#builders.ins-stage {
  --ins-cream:#f2eee6;
  --ins-cream-soft:rgba(242,238,230,.72);
  --ins-cream-muted:rgba(242,238,230,.46);
  --ins-gold:#c88949;
  --ins-gold-soft:#d79d60;
  --ins-gold-bright:#e7c58c;
  --ins-gold-hot:#ffd89d;
  --ins-green:#82df9b;
  --ins-blue:#8ec9ff;
  --ins-serif:"Cormorant Garamond","Instrument Serif",serif;
  --ins-mono:"Roboto Mono","JetBrains Mono",monospace;
  --ins-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 4rem);
  background: #050504;
  color: var(--ins-cream);
  font-family: var(--ins-sans);
  border-top: 1px solid var(--rule);
  position: relative;
  max-width: none;
  margin: 0;
  grid-template-columns: none;
  gap: 0;
  align-items: center;
}

.ins-artboard {
  position: relative;
  width: min(1760px, 100%);
  aspect-ratio: 1760 / 990;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 3%, rgba(255,216,157,.11), transparent 17%),
    radial-gradient(circle at 72% 55%, rgba(200,137,73,.10), transparent 25%),
    radial-gradient(circle at 23% 43%, rgba(200,137,73,.065), transparent 34%),
    linear-gradient(90deg,#020201 0%,#050504 18%,#080806 50%,#050504 82%,#020201 100%);
  box-shadow: 0 25px 42px rgba(0,0,0,.18);
  isolation: isolate;
  border-radius: 4px;
}
.ins-artboard::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,140,.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,140,.013) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 78%);
  opacity: 0.72;
  z-index: -4;
  pointer-events: none;
}
.ins-artboard::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.68) 100%);
  z-index: -3;
  pointer-events: none;
}
.ins-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) .52px, transparent .52px);
  background-size: 4px 4px;
  opacity: 0.032;
  z-index: 30;
  pointer-events: none;
}

/* Top/bottom rules + stars */
.ins-frame-top, .ins-frame-bottom {
  position: absolute;
  left: 34px; right: 34px;
  height: 1px;
  z-index: 5;
  background: linear-gradient(90deg, transparent, rgba(231,197,140,.55), transparent);
}
.ins-frame-top    { top: 31px; }
.ins-frame-bottom { bottom: 31px; }
.ins-top-star, .ins-bottom-star {
  position: absolute;
  left: 50%;
  width: 13px; height: 13px;
  transform: translateX(-50%);
  z-index: 6;
}
.ins-top-star    { top: 25px; }
.ins-bottom-star { bottom: 25px; }
.ins-top-star::before, .ins-top-star::after,
.ins-bottom-star::before, .ins-bottom-star::after {
  content: "";
  position: absolute;
  background: var(--ins-gold-hot);
  box-shadow: 0 0 18px rgba(255,216,157,.95);
}
.ins-top-star::before, .ins-bottom-star::before { left: 6px; width: 1px; height: 13px; }
.ins-top-star::after, .ins-bottom-star::after { top: 6px; height: 1px; width: 13px; }

/* Corner ticks */
.ins-corner {
  position: absolute;
  width: 95px; height: 95px;
  z-index: 6;
}
.ins-corner::before, .ins-corner::after {
  content: "";
  position: absolute;
  background: var(--ins-gold-bright);
  box-shadow: 0 0 9px rgba(231,197,140,.5);
}
.ins-tl { left: 33px; top: 33px; }
.ins-tr { right: 33px; top: 33px; }
.ins-bl { left: 33px; bottom: 33px; }
.ins-br { right: 33px; bottom: 33px; }
.ins-tl::before, .ins-bl::before { left: 0; width: 1px; height: 45px; }
.ins-tl::after,  .ins-bl::after  { left: 0; width: 94px; height: 1px; }
.ins-tr::before, .ins-br::before { right: 0; width: 1px; height: 45px; }
.ins-tr::after,  .ins-br::after  { right: 0; width: 94px; height: 1px; }
.ins-tl::before, .ins-tr::before { top: 0; }
.ins-tl::after,  .ins-tr::after  { top: 0; }
.ins-bl::before, .ins-br::before { bottom: 0; }
.ins-bl::after,  .ins-br::after  { bottom: 0; }

/* Sparks */
.ins-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ins-gold-hot);
  box-shadow: 0 0 16px rgba(255,216,157,.95);
  z-index: 7;
}
.ins-sp1 { left: 52px; top: 134px; }
.ins-sp2 { left: 155px; top: 341px; }
.ins-sp3 { right: 51px; top: 134px; }
.ins-sp4 { right: 52px; top: 548px; }
.ins-sp5 { left: 88px; bottom: 72px; }
.ins-sp6 { right: 88px; bottom: 72px; }

/* Background ornaments */
.ins-left-arc {
  position: absolute;
  left: -120px; top: 66px;
  width: 620px; height: 780px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,140,.10);
  opacity: 0.86;
  z-index: -1;
}
.ins-left-arc::before {
  content: ""; position: absolute; inset: 78px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,140,.07);
}
.ins-left-arc::after {
  content: ""; position: absolute; inset: 157px;
  border-radius: 50%;
  border: 1px dashed rgba(231,197,140,.075);
}
.ins-left-dotfield, .ins-left-dotfield2 {
  position: absolute;
  left: 58px;
  width: 160px;
  background-image: radial-gradient(rgba(231,197,140,.24) 1px, transparent 1px);
  background-size: 13px 13px;
  -webkit-mask-image: linear-gradient(90deg, black, transparent);
          mask-image: linear-gradient(90deg, black, transparent);
  opacity: 0.52;
}
.ins-left-dotfield  { top: 46px; height: 260px; }
.ins-left-dotfield2 { top: 622px; height: 230px; }
.ins-right-grid {
  position: absolute;
  right: 38px; top: 40px;
  width: 290px; height: 410px;
  background-image:
    linear-gradient(rgba(231,197,140,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,140,.018) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.55;
}

/* Left copy column */
.ins-left-copy {
  position: absolute;
  left: 232px; top: 150px;
  width: 575px;
  max-width: calc(100% - 280px);
  z-index: 10;
}
.ins-kicker {
  font: 500 15px/1 var(--ins-mono);
  letter-spacing: 0.38em;
  text-transform: uppercase;
  color: var(--ins-gold-bright);
  margin-bottom: 42px;
}
#builders.ins-stage .ins-headline {
  font-family: var(--ins-serif);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.93;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ins-cream);
  text-shadow: 0 0 22px rgba(255,255,255,.06);
  margin: 0 0 50px;
}
#builders.ins-stage .ins-headline span { color: #d09355; }

.ins-copy-shine {
  position: absolute;
  left: 0; top: 328px;
  width: 520px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,140,.74), transparent);
}
.ins-copy-shine::after {
  content: "";
  position: absolute;
  left: 120px; top: 50%;
  width: 140px; height: 11px;
  transform: translateY(-50%);
  background: radial-gradient(ellipse at center, rgba(255,216,157,.95), rgba(200,137,73,.24) 38%, transparent 76%);
  filter: blur(2px);
}

.ins-lead {
  color: rgba(241,236,227,.64);
  font-size: clamp(15px, 1.2vw, 19px);
  line-height: 1.55;
  letter-spacing: 0.025em;
  max-width: 370px;
  margin: 0 0 22px;
  font-family: var(--ins-sans);
}
.ins-lead-strong { color: rgba(241,236,227,.86); }

.ins-feature-list {
  margin-top: 27px;
  width: 520px;
  max-width: 100%;
  border-top: 1px solid rgba(231,197,140,.13);
}
.ins-frow {
  height: 43px;
  border-bottom: 1px solid rgba(231,197,140,.10);
  display: grid;
  grid-template-columns: 30px 1fr;
  align-items: center;
  color: rgba(241,236,227,.58);
  font: 400 13px/1 var(--ins-mono);
  letter-spacing: 0.01em;
}
.ins-frow svg {
  width: 17px; height: 17px;
  color: var(--ins-gold-bright);
}

/* API card */
.ins-api-card {
  position: absolute;
  right: 130px; top: 118px;
  width: 812px;
  max-width: calc(100% - 200px);
  height: 760px;
  border: 1px solid rgba(231,197,140,.34);
  background: linear-gradient(180deg, rgba(19,17,14,.80), rgba(6,6,5,.76));
  box-shadow:
    0 25px 92px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.035);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 22px) 100%, 0 100%, 0 24px);
  z-index: 8;
  overflow: hidden;
}
.ins-api-card::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px solid rgba(231,197,140,.15);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 22px) 100%, 0 100%, 0 24px);
  pointer-events: none;
}

.ins-api-head {
  height: 70px;
  border-bottom: 1px solid rgba(231,197,140,.16);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(20px, 3vw, 43px);
  color: var(--ins-cream);
  font: 500 clamp(15px, 1.4vw, 22px)/1 var(--ins-mono);
}
.ins-stage .copy-btn {
  margin-left: 15px;
  font: 500 13px/1 var(--ins-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ins-gold-bright);
  border: 1px solid rgba(231,197,140,.42);
  border-radius: 5px;
  padding: 8px 13px;
  background: rgba(231,197,140,.06);
  vertical-align: middle;
  cursor: pointer;
  transition: background 200ms var(--ease);
}
.ins-stage .copy-btn:hover { background: rgba(231,197,140,.14); }
.ins-stage .copy-btn.is-copied { color: var(--ins-green); border-color: var(--ins-green); }
.ins-status {
  font: 500 13px/1 var(--ins-mono);
  color: var(--ins-green);
  display: flex;
  align-items: center;
  gap: 9px;
}
.ins-status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ins-green);
  box-shadow: 0 0 14px rgba(130,223,155,.82);
}

.ins-api-body {
  position: relative;
  padding: 24px clamp(20px, 3vw, 43px) 96px;
  height: 690px;
  overflow: hidden;
}
.ins-line-numbers {
  position: absolute;
  right: 38px; top: 27px;
  color: rgba(241,236,227,.17);
  font: 400 13px/1.45 var(--ins-mono);
  text-align: right;
}
.ins-api-body pre { margin: 0; }
.ins-code {
  font: 400 13px/1.32 var(--ins-mono);
  white-space: pre-wrap;
  color: rgba(241,236,227,.80);
  letter-spacing: -0.015em;
}
.ins-green     { color: #98d38e; }
.ins-blue      { color: #8bc4ff; }
.ins-gold      { color: var(--ins-gold-bright); }
.ins-muted     { color: rgba(241,236,227,.46); }
.ins-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(231,197,140,.22), transparent);
  margin: 14px 0 16px;
}

.ins-api-badges {
  position: absolute;
  left: 42px; bottom: 22px;
  display: flex;
  gap: 12px;
  z-index: 10;
  flex-wrap: wrap;
}
.ins-badge {
  height: 34px;
  border: 1px solid rgba(231,197,140,.18);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 15px;
  font: 500 13px/1 var(--ins-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(0,0,0,.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.ins-badge-api      { color: var(--ins-gold-bright); border-color: rgba(231,197,140,.32); }
.ins-badge-signed   { color: #94d391; }
.ins-badge-json     { color: #87c8ff; }
.ins-badge-verified { color: #8edc95; }

.ins-verified-mark {
  position: absolute;
  right: 82px; bottom: 172px;
  width: 142px; height: 142px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,140,.15) 0 1px, transparent 1px 24px);
  display: grid;
  place-items: center;
  opacity: 0.92;
  z-index: 2;
}
.ins-verified-mark::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,140,.25);
}
.ins-verified-mark::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,140,.25);
}
.ins-hex {
  position: relative;
  width: 66px; height: 74px;
  display: grid;
  place-items: center;
  color: var(--ins-gold-hot);
  filter: drop-shadow(0 0 18px rgba(255,216,157,.45));
}
.ins-hex svg { width: 72px; height: 72px; }
.ins-check {
  position: absolute;
  font-size: 39px;
  font-weight: 700;
  color: var(--ins-gold-hot);
}

/* Bottom centred label + footer corners */
.ins-bottom-label {
  position: absolute;
  left: 50%; bottom: 39px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--ins-gold-bright);
  font: 500 14px/1 var(--ins-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  z-index: 6;
}
.ins-bottom-label::before, .ins-bottom-label::after {
  content: "";
  width: 115px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ins-gold-bright));
}
.ins-bottom-label::after {
  background: linear-gradient(90deg, var(--ins-gold-bright), transparent);
}
.ins-bottom-label i {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ins-gold-hot);
  box-shadow: 0 0 14px rgba(255,216,157,.9);
}
.ins-footer-left {
  position: absolute;
  left: 64px; bottom: 58px;
  font: 500 14px/1 var(--ins-mono);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ins-gold-bright);
  z-index: 6;
}
.ins-footer-right {
  position: absolute;
  right: 64px; bottom: 58px;
  font: 500 14px/1 var(--ins-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(231,197,140,.55);
  z-index: 6;
}

@media (max-width: 1100px) {
  #builders.ins-stage { padding: 0; }
  .ins-artboard {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    padding: 38px 24px;
    border-radius: 0;
  }
  .ins-frame-top, .ins-frame-bottom,
  .ins-corner, .ins-top-star, .ins-bottom-star,
  .ins-left-arc, .ins-right-grid,
  .ins-left-dotfield, .ins-left-dotfield2,
  .ins-spark, .ins-bottom-label,
  .ins-footer-left, .ins-footer-right {
    display: none;
  }
  .ins-left-copy, .ins-api-card {
    position: relative;
    left: auto; right: auto; top: auto;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .ins-left-copy { margin: 0 auto 32px; }
  #builders.ins-stage .ins-headline { font-size: 48px; }
  .ins-copy-shine { display: none; }
  .ins-feature-list { width: 100%; }
  .ins-api-card {
    clip-path: none;
    border-radius: 12px;
  }
  .ins-api-card::before { clip-path: none; }
  .ins-api-head { padding: 0 22px; }
  .ins-api-body { height: auto; padding: 24px 22px 88px; }
  .ins-code { font-size: 13px; }
  .ins-verified-mark { display: none; }
  .ins-api-badges { left: 22px; right: 22px; }
  .ins-line-numbers { display: none; }
}

/* ============================================================
   REGULATORY / EU-STAGE — ported from eu-digital.html.
   Single full-bleed stage with the manifesto headline + the full
   site footer (brand · product · company · trust · legal).
   Namespaced `.eu-*` to avoid colliding with other stages.
   ============================================================ */
#regulatory.eu-stage {
  --eu-cream:#f2eee6;
  --eu-soft:rgba(242,238,230,.70);
  --eu-muted:rgba(242,238,230,.48);
  --eu-dim:rgba(242,238,230,.28);
  --eu-gold:#c99150;
  --eu-gold2:#e7c58d;
  --eu-gold3:#ffd79b;
  --eu-serif:"Cormorant Garamond","Instrument Serif",serif;
  --eu-mono:"Roboto Mono","JetBrains Mono",monospace;
  --eu-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vh, 6rem) clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 49% 34%, rgba(231,197,141,.07), transparent 25%),
    radial-gradient(circle at 76% 72%, rgba(201,145,80,.05), transparent 26%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  isolation: isolate;
  color: var(--eu-cream);
  font-family: var(--eu-sans);
  border-top: 1px solid var(--rule);
  max-width: none;
}
#regulatory.eu-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.010) 1px, transparent 1px);
  background-size: 76px 76px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 76%);
  opacity: 0.55;
  z-index: -4;
  pointer-events: none;
}
#regulatory.eu-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.75) 100%);
  z-index: -3;
  pointer-events: none;
}

.eu-top-line {
  position: absolute;
  top: 72px; left: 50%;
  transform: translateX(-50%);
  width: min(900px, 48vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242,238,230,.22), transparent);
}
.eu-bottom-glow {
  position: absolute;
  left: 50%; bottom: 78px;
  transform: translateX(-50%);
  width: 540px; height: 28px;
  background: radial-gradient(ellipse at center, rgba(231,197,141,.16), transparent 72%);
  filter: blur(6px);
}
.eu-frame {
  position: absolute;
  inset: 50px;
  border: 1px solid rgba(231,197,141,.14);
  opacity: 0.42;
  pointer-events: none;
}

/* Corner ticks */
.eu-corner {
  position: absolute;
  width: 70px; height: 70px;
  pointer-events: none;
}
.eu-corner::before, .eu-corner::after {
  content: "";
  position: absolute;
  background: var(--eu-gold2);
  box-shadow: 0 0 10px rgba(231,197,141,.42);
}
.eu-corner.eu-tl { left: 50px; top: 50px; }
.eu-corner.eu-tr { right: 50px; top: 50px; }
.eu-corner.eu-bl { left: 50px; bottom: 50px; }
.eu-corner.eu-br { right: 50px; bottom: 50px; }
.eu-corner.eu-tl::before, .eu-corner.eu-bl::before { left: 0; width: 1px; height: 40px; }
.eu-corner.eu-tl::after,  .eu-corner.eu-bl::after  { left: 0; width: 40px; height: 1px; }
.eu-corner.eu-tr::before, .eu-corner.eu-br::before { right: 0; width: 1px; height: 40px; }
.eu-corner.eu-tr::after,  .eu-corner.eu-br::after  { right: 0; width: 40px; height: 1px; }
.eu-corner.eu-tl::before, .eu-corner.eu-tr::before { top: 0; }
.eu-corner.eu-tl::after,  .eu-corner.eu-tr::after  { top: 0; }
.eu-corner.eu-bl::before, .eu-corner.eu-br::before { bottom: 0; }
.eu-corner.eu-bl::after,  .eu-corner.eu-br::after  { bottom: 0; }

/* Orbits + dotfield */
.eu-orbit-left {
  position: absolute;
  left: -160px; top: 150px;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.08);
  opacity: 0.65;
}
.eu-orbit-left::before {
  content: ""; position: absolute; inset: 86px;
  border-radius: 50%;
  border: 1px dashed rgba(231,197,141,.07);
}
.eu-orbit-left::after {
  content: ""; position: absolute; inset: 170px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.06);
}
.eu-orbit-right {
  position: absolute;
  right: -160px; bottom: 100px;
  width: 520px; height: 520px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.08) 0 1px, transparent 1px 36px);
  opacity: 0.38;
}
.eu-orbit-right::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.10);
}
.eu-orbit-right::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.10);
}
.eu-dotfield {
  position: absolute;
  right: 120px; top: 130px;
  width: 260px; height: 420px;
  background-image: radial-gradient(rgba(231,197,141,.17) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
          mask-image: linear-gradient(90deg, transparent, black, transparent);
  opacity: 0.36;
}

/* Sparks */
.eu-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--eu-gold3);
  box-shadow: 0 0 17px rgba(255,215,155,.9);
}
.eu-s1 { left: 17%; top: 25%; }
.eu-s2 { right: 19%; top: 24%; }
.eu-s3 { left: 20%; bottom: 22%; }
.eu-s4 { right: 16%; bottom: 26%; }
.eu-s5 { left: 50%; top: 47%; transform: translateX(-50%); }

/* Wrap */
.eu-wrap {
  position: relative;
  z-index: 5;
  width: min(1180px, 100%);
}

/* Hero */
.eu-hero {
  max-width: 880px;
  margin: 0 auto clamp(48px, 9vh, 94px);
  text-align: left;
  transform: translateX(-40px);
}
.eu-eyebrow {
  font: 500 10px/1 var(--eu-mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(242,238,230,.48);
  margin-bottom: 20px;
}
#regulatory.eu-stage .eu-h1 {
  font-family: var(--eu-serif);
  font-size: clamp(34px, 4vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: rgba(242,238,230,.72);
  text-shadow: 0 0 24px rgba(255,255,255,.04);
  margin: 0;
}
.eu-bright { color: var(--eu-cream); }
.eu-hero-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(231,197,141,.12), rgba(242,238,230,.12), transparent);
  margin-top: 82px;
}

/* Footer panel */
.eu-footer-panel {
  border-top: 1px solid rgba(242,238,230,.10);
  border-bottom: 1px solid rgba(242,238,230,.10);
  padding: 52px 0 46px;
  display: grid;
  grid-template-columns: 1.65fr .85fr .85fr .85fr;
  gap: 60px;
  position: relative;
}
.eu-footer-panel::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.25), transparent);
}
.eu-brand h2 {
  font-family: var(--eu-serif);
  font-size: 26px;
  line-height: 1;
  font-weight: 500;
  color: var(--eu-cream);
  letter-spacing: -0.03em;
  margin: 0 0 16px;
}
.eu-brand p {
  font: 500 10px/1.55 var(--eu-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(242,238,230,.38);
  margin: 0;
}
.eu-brand-address {
  margin-top: 14px !important;
  letter-spacing: 0.16em !important;
  color: rgba(242,238,230,.52) !important;
  text-transform: none !important;
  font-size: 11px !important;
}
.eu-col-title {
  font: 600 10px/1 var(--eu-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(231,197,141,.48);
  margin-bottom: 18px;
}
.eu-links {
  display: grid;
  gap: 10px;
}
.eu-links a {
  font-size: 14px;
  line-height: 1;
  color: rgba(242,238,230,.58);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.eu-links a:hover { color: var(--eu-gold2); }
.eu-trust-chip {
  height: 26px;
  border: 1px solid rgba(231,197,141,.18);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  color: rgba(242,238,230,.58);
  font: 500 11px/1 var(--eu-mono);
  margin-bottom: 8px;
  background: rgba(255,255,255,.018);
  width: fit-content;
}

/* Legal */
.eu-legal {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  padding-top: 26px;
  color: rgba(242,238,230,.28);
  font: 500 10px/1 var(--eu-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.eu-legal::before {
  content: "";
  grid-column: 1 / -1;
  height: 1px;
  background: linear-gradient(90deg, rgba(231,197,141,.14), transparent);
}

@media (max-width: 900px) {
  #regulatory.eu-stage { padding: 80px 24px; }
  .eu-frame, .eu-corner, .eu-orbit-left, .eu-orbit-right,
  .eu-dotfield, .eu-spark, .eu-top-line, .eu-bottom-glow {
    display: none;
  }
  .eu-hero { transform: none; margin-bottom: 50px; }
  #regulatory.eu-stage .eu-h1 { font-size: 32px; }
  .eu-footer-panel { grid-template-columns: 1fr; gap: 34px; padding: 36px 0 30px; }
  .eu-legal { grid-template-columns: 1fr; gap: 8px; padding-top: 20px; }
}

/* Reduced-motion */
#reduced-stack { display: none; }
html.reduced-motion #story { display: none; }
html.reduced-motion #reduced-stack {
  display: block; padding: clamp(4rem, 10vh, 8rem) var(--pad);
}
#reduced-frame { display: block; width: 100%; max-width: 460px; margin: 0 auto 3rem; }
#reduced-modules { max-width: 760px; margin: 0 auto; }
.rs-mod { margin: 0 0 3rem; }
.rs-mod .mod-num {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.5rem;
}
.rs-mod h3 {
  font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 0.5rem;
}

:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ============================================================
   HERO VIDEO — full-viewport landing section
   ============================================================ */

#hero-video {
  /* --hero-reserved-bottom is the vertical band at the bottom of the hero
     that the caption (headline + sub + 2 buttons) and the 6-feature strip
     live in. The video above shrinks from the bottom by this amount so the
     exploded phone in the video never overlaps the text underneath it.

     Sizing math (widescreen): caption is ~260px tall (64px serif headline
     across 2 lines + 16px sub + 22px gap + 54px buttons), bottom-anchored
     at 11rem (176px) above viewport bottom → caption top sits ~436px above
     viewport bottom. The reserved zone must be >= 436px so the video's
     bottom edge ends at-or-above the caption's top edge. */
  --hero-reserved-bottom: clamp(340px, 32vh, 420px);

  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;             /* mobile-safe viewport unit */
  background: var(--bg);
  overflow: hidden;
  isolation: isolate;
}
#heroVideo {
  position: absolute;
  /* Pin top-left, then explicitly size: full viewport width × the upper
     portion of the hero (everything except the reserved bottom band).
     Both width and height are explicit so the <video> never tries to
     resolve dimensions from its intrinsic 720×1280 size — which would
     either left-pin a 720px-wide box (left/right contradiction with no
     width) or stretch to a 3000px-tall box (width:100% + height:auto). */
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - var(--hero-reserved-bottom));
  /* contain → whole portrait phone always visible, dark bars on landscape. */
  object-fit: contain;
  object-position: center;
  background: var(--bg);
  z-index: 0;
  pointer-events: none;
}

/* On narrower viewports the .vc-cta buttons stack vertically (≤1200px),
   adding ~75px to caption height. On phones the headline narrows too but
   the caption stays roughly the same — reserve more, so the video still
   shows the phone clearly above the text. */
@media (max-width: 1200px) {
  #hero-video { --hero-reserved-bottom: clamp(380px, 40vh, 480px); }
}
@media (max-width: 720px) {
  #hero-video { --hero-reserved-bottom: clamp(380px, 46vh, 520px); }
}

.video-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
/* Anatomy stage — matches Phone Anatomy.html design exactly.
   940×1672 SVG canvas, positioned to overlay the video display rect
   (both share the 9:16 portrait aspect). Auto-scales with the viewport. */
.video-anatomy {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  /* viewBox is 2200×1672 (aspect ~1.316). The SVG sits centred over the video;
     the extra ~37% on each side hosts the labels in the page margins, giving
     the arrows real travel from edge label → phone component. */
  aspect-ratio: 2200 / 1672;
  max-height: 100%;
  max-width: 100vw;
  pointer-events: none;
}
.va-stage {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}
.va-label {
  opacity: 0;
  transition: opacity 480ms ease-out;
  will-change: opacity;
}
.va-label.is-visible { opacity: 1; }

/* Design tokens (from Phone Anatomy.html) */
.va-conn {
  fill: none;
  stroke: rgba(240, 200, 140, 0.9);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.va-lbl-shape {
  fill: rgba(14, 12, 10, 0.78);
  stroke: rgba(240, 200, 140, 0.7);
  stroke-width: 1.2;
}
.va-lbl-name {
  fill: #f3ece0;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.va-lbl-desc {
  fill: rgba(225, 211, 184, 0.62);
  font-size: 11px;
  font-weight: 400;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.va-dot      { fill: #fde6bc; }
.va-dot-halo { fill: rgba(244, 200, 138, 0.45); }

/* ============================================================
   STATEMENT / TRUST-STAGE — ported from Dont-buy-used-phone-page.html.
   Two-column: serif headline + paragraphs + quote on the left,
   side-by-side certificate (Normal listing × · Retronics listing) on the right.
   ============================================================ */
#hero-statement.trust-stage {
  --ts-cream:#ede8df;
  --ts-cream-soft:rgba(237,232,223,.78);
  --ts-cream-dim:rgba(237,232,223,.50);
  --ts-gold:#c69d59;
  --ts-gold-bright:#e7c789;
  --ts-gold-soft:rgba(198,157,89,.52);
  --ts-gold-line:rgba(198,157,89,.26);

  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(circle at 68% 49%, rgba(198,157,89,.10), transparent 26%),
    radial-gradient(circle at 92% 50%, rgba(198,157,89,.075), transparent 23%),
    radial-gradient(circle at 40% 25%, rgba(255,255,255,.035), transparent 32%),
    linear-gradient(90deg,#020201 0%,#070706 18%,#080807 50%,#070706 78%,#020201 100%);
  isolation: isolate;
  padding: 42px 40px;
  z-index: 3;
  color: var(--ts-cream);
  font-family: Inter, system-ui, sans-serif;
}
#hero-statement.trust-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(198,157,89,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(198,157,89,.015) 1px, transparent 1px);
  background-size: 138px 138px;
  -webkit-mask-image: radial-gradient(circle at 67% 48%, black 0%, transparent 74%);
          mask-image: radial-gradient(circle at 67% 48%, black 0%, transparent 74%);
  z-index: -3;
  pointer-events: none;
}
#hero-statement.trust-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.55) 100%);
  z-index: -2;
  pointer-events: none;
}

.ts-top-line {
  position: absolute;
  left: 40px; right: 40px; top: 50px;
  height: 1px;
  background: linear-gradient(90deg, rgba(198,157,89,.18), rgba(198,157,89,.38) 54%, rgba(198,157,89,.18));
  opacity: 0.75;
}
.ts-top-line::after {
  content: "";
  position: absolute;
  left: 55%; top: -3px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--ts-gold-bright);
  box-shadow: 0 0 18px rgba(231,199,137,.9), 0 0 34px rgba(198,157,89,.25);
}

.ts-brand {
  position: absolute; top: 36px; left: 38px;
  display: flex; align-items: center; gap: 18px;
  color: var(--ts-gold-bright);
  z-index: 5;
}
.ts-brand-mark {
  width: 32px; height: 32px;
  border: 1px solid rgba(231,199,137,.60);
  border-radius: 3px;
  display: grid; place-items: center;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 23px; font-weight: 600; line-height: 1;
  box-shadow: inset 0 0 14px rgba(198,157,89,.08);
}
.ts-brand-name {
  font-size: 15px; letter-spacing: 0.54em; text-transform: uppercase; font-weight: 600;
}
.ts-brand-sep {
  width: 1px; height: 22px;
  background: rgba(198,157,89,.36);
  margin-left: 2px;
}
.ts-brand-tag {
  font-size: 10px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(237,232,223,.66);
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-weight: 500;
}

/* Decorative right-side orbital + dot grid + bottom glow */
.ts-orbital {
  position: absolute;
  right: -70px; top: 84px;
  width: 640px; height: 640px;
  border-radius: 50%;
  border: 1px solid rgba(198,157,89,.11);
  z-index: -1;
}
.ts-orbital::before {
  content: ""; position: absolute; inset: 92px;
  border-radius: 50%;
  border: 1px solid rgba(198,157,89,.07);
}
.ts-orbital::after {
  content: ""; position: absolute; inset: 190px;
  border-radius: 50%;
  border: 1px dashed rgba(198,157,89,.07);
}
.ts-dot-grid {
  position: absolute;
  right: 30px; top: 338px;
  width: 152px; height: 260px;
  background-image: radial-gradient(rgba(198,157,89,.30) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 45%, transparent);
          mask-image: linear-gradient(90deg, transparent, black 45%, transparent);
  opacity: 0.5;
}
.ts-bottom-glow {
  position: absolute;
  right: 122px; bottom: 68px;
  width: 660px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(198,157,89,.20), rgba(198,157,89,.055) 34%, transparent 72%);
  filter: blur(10px);
  z-index: -1;
}

/* Two-column layout */
.ts-layout {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 84px);
  display: grid;
  grid-template-columns: minmax(520px, 760px) 1fr;
  align-items: center;
  gap: 48px;
  padding-top: 50px;
}

/* Left column — copy */
.ts-copy {
  max-width: 760px;
  padding-left: 22px;
  margin-top: 14px;
}
.ts-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 31px;
  padding: 0 14px 0 12px;
  border: 1px solid rgba(198,157,89,.38);
  border-radius: 6px;
  color: var(--ts-gold-bright);
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.34em; text-transform: uppercase;
  background: rgba(198,157,89,.035);
  margin-bottom: 34px;
}
.ts-eyebrow::before {
  content: "";
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ts-gold-bright);
  box-shadow: 0 0 12px rgba(231,199,137,.8);
}
#hero-statement.trust-stage .ts-headline {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: clamp(36px, 3.8vw, 68px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ts-cream);
  text-shadow: 0 0 32px rgba(255,255,255,.04);
  margin: 0 0 30px;
}
#hero-statement.trust-stage .ts-headline em {
  font-style: italic;
  color: #d2b47c;
  font-weight: 500;
  position: relative;
}
#hero-statement.trust-stage .ts-headline em::after {
  content: "";
  position: absolute;
  left: -8px; right: 8px; bottom: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(231,199,137,.95), transparent);
  box-shadow: 0 0 22px rgba(231,199,137,.85);
}
.ts-para {
  max-width: 650px;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.26;
  letter-spacing: -0.022em;
  color: rgba(237,232,223,.88);
  margin: 0 0 30px;
}
.ts-para strong { color: var(--ts-gold-bright); font-weight: 500; }
.ts-caps {
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ts-cream);
}
.ts-short-line {
  width: 30px; height: 1px;
  background: var(--ts-gold-bright);
  margin: 6px 0 28px;
  opacity: 0.9;
}
.ts-quote {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 0;
  align-items: start;
  margin-top: 38px;
  color: #cdae75;
}
.ts-quote-mark {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 70px; line-height: 0.75;
  color: rgba(198,157,89,.46);
  transform: translateY(7px);
}
.ts-quote-text {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1.33;
  font-style: italic;
  color: #c8aa73;
  letter-spacing: -0.025em;
}

/* Right column — certificate mockup */
.ts-cert-wrap {
  position: relative;
  justify-self: end;
  width: min(910px, 100%);
  height: 610px;
  display: flex; align-items: center; justify-content: center;
  margin-right: 38px;
}
.ts-cert {
  position: relative;
  width: 820px; height: 445px;
  border-radius: 18px;
  border: 1px solid rgba(237,232,223,.20);
  background: linear-gradient(180deg, rgba(18,18,16,.76), rgba(13,13,11,.72));
  box-shadow:
    0 36px 110px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.035);
  overflow: visible;
}
.ts-cert::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.035) 50%, transparent 100%);
  pointer-events: none;
}
.ts-cert::after {
  content: ""; position: absolute;
  left: 0; right: 0; bottom: -34px;
  height: 34px; border-radius: 0 0 18px 18px;
  border: 1px solid rgba(237,232,223,.11); border-top: 0;
  background: rgba(9,9,8,.44);
}

.ts-table {
  position: absolute;
  left: 30px; top: 92px;
  width: 475px; height: 300px;
  border: 1px solid rgba(237,232,223,.12);
  border-radius: 9px;
  overflow: hidden;
  background: rgba(0,0,0,.12);
}
.ts-table::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 1px;
  background: rgba(237,232,223,.09);
}
.ts-normal-head {
  position: absolute;
  left: 260px; top: 42px;
  color: rgba(237,232,223,.80);
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 14px; letter-spacing: 0.08em;
}
.ts-normal-head small {
  display: block;
  margin-top: 8px;
  color: rgba(237,232,223,.52);
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 21px; letter-spacing: 0;
}
.ts-x-icon {
  position: absolute;
  left: 212px; top: 42px;
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(237,232,223,.26);
  color: rgba(237,232,223,.54);
  display: grid; place-items: center;
  font-size: 24px; line-height: 1; font-weight: 200;
}
.ts-row {
  height: 42.85px;
  display: grid;
  grid-template-columns: 58px 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid rgba(237,232,223,.08);
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--ts-gold-bright);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}
.ts-row:last-child { border-bottom: 0; }
.ts-row svg {
  width: 22px; height: 22px;
  stroke: rgba(231,199,137,.7);
  justify-self: center;
}
.ts-unknown {
  justify-self: center;
  color: rgba(237,232,223,.53);
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 18px;
  letter-spacing: 0;
  text-transform: none;
  font-weight: 400;
}

.ts-gold-card {
  position: absolute;
  right: 42px; top: -2px;
  width: 300px; height: 430px;
  border-radius: 17px;
  border: 1px solid rgba(231,199,137,.73);
  background: linear-gradient(180deg, rgba(51,39,21,.72), rgba(19,17,14,.88) 31%, rgba(14,13,11,.93));
  box-shadow:
    0 0 42px rgba(198,157,89,.12),
    inset 0 1px 0 rgba(255,244,216,.18);
  padding: 34px 36px 20px;
  z-index: 3;
}
.ts-gold-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 88px;
  border-radius: 17px 17px 0 0;
  background: radial-gradient(circle at 72% 0%, rgba(231,199,137,.24), transparent 50%);
  pointer-events: none;
}
.ts-listing-title {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.ts-shield {
  width: 30px; height: 34px;
  border: 1px solid rgba(231,199,137,.60);
  border-radius: 4px 4px 10px 10px;
  display: grid; place-items: center;
  color: var(--ts-gold-bright);
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 23px; font-weight: 600;
}
.ts-listing-title strong {
  display: block;
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 13px;
  letter-spacing: 0.23em;
  text-transform: uppercase;
  color: var(--ts-gold-bright);
  line-height: 1.25;
}
.ts-listing-title span {
  display: block;
  margin-top: 6px;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 19px;
  color: rgba(237,232,223,.9);
}
.ts-gold-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,199,137,.55), transparent);
  margin-bottom: 14px;
}
.ts-metric-row {
  height: 42px;
  border-bottom: 1px solid rgba(231,199,137,.13);
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: center;
  color: var(--ts-gold-bright);
}
.ts-metric-row:last-child { border-bottom: 0; }
.ts-metric-row b {
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: #f0d29b;
}
.ts-bar {
  height: 4px;
  border-radius: 5px;
  background: rgba(231,199,137,.18);
  position: relative;
  overflow: visible;
}
.ts-bar span {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  border-radius: 5px;
  background: linear-gradient(90deg, #f3d79f, #b98c47);
  box-shadow: 0 0 12px rgba(231,199,137,.55);
}
.ts-bar::before {
  content: "";
  position: absolute;
  left: -3px; top: 50%;
  transform: translateY(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #f3d79f;
  box-shadow: 0 0 18px rgba(231,199,137,.9);
}

.ts-cert-footer {
  position: absolute;
  left: 64px; top: 405px;
  width: 388px; height: 54px;
  display: flex; align-items: center; gap: 18px;
  color: var(--ts-gold-bright);
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  line-height: 1.5;
  z-index: 2;
  pointer-events: none;
}
.ts-fingerprint {
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(231,199,137,.28);
  display: grid; place-items: center;
  color: var(--ts-gold-bright);
  flex: 0 0 auto;
}
.ts-fingerprint svg { width: 31px; height: 31px; }
.ts-cert-footer span {
  display: block;
  margin-bottom: 4px;
  max-width: 310px;
  white-space: normal;
}
.ts-cert-footer small {
  display: block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--ts-gold-bright);
  max-width: 310px;
  white-space: normal;
}
.ts-seal {
  position: absolute;
  right: 44px; bottom: 26px;
  width: 86px; height: 86px;
  border-radius: 50%;
  border: 1px solid rgba(231,199,137,.45);
  display: grid; place-items: center;
  color: var(--ts-gold-bright);
  background: rgba(13,12,10,.8);
  z-index: 5;
  box-shadow: 0 0 28px rgba(198,157,89,.12);
}
.ts-seal::before {
  content: "RETRONICS • CERTIFIED •";
  position: absolute; inset: 8px;
  border: 1px dashed rgba(231,199,137,.35);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Roboto Mono", "JetBrains Mono", monospace;
  font-size: 7px;
  letter-spacing: 0.09em;
  color: rgba(231,199,137,.65);
}
.ts-seal b {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 42px;
  position: relative;
  z-index: 1;
}

@media (max-width: 1350px) {
  .ts-layout {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-top: 100px;
  }
  .ts-copy { max-width: 850px; }
  .ts-cert-wrap { justify-self: center; margin-right: 0; }
  #hero-statement.trust-stage { padding: 34px 28px; }
  .ts-top-line { left: 28px; right: 28px; }
  .ts-brand { left: 28px; }
  .ts-para { max-width: none; }
}
@media (max-width: 900px) {
  .ts-brand-tag, .ts-brand-sep { display: none; }
  .ts-layout { padding-top: 90px; }
  .ts-cert-wrap {
    height: auto;
    transform: scale(0.78);
    transform-origin: top center;
    margin-bottom: -90px;
  }
  .ts-copy { padding-left: 0; }
  #hero-statement.trust-stage .ts-headline { font-size: 56px; }
  .ts-para { font-size: 19px; }
  .ts-quote-text { font-size: 23px; }
}
@media (max-width: 650px) {
  .ts-cert-wrap { display: none; }
  #hero-statement.trust-stage .ts-headline { font-size: 46px; }
  #hero-statement.trust-stage { padding: 28px 22px; }
  .ts-brand-name { letter-spacing: 0.32em; }
  .ts-eyebrow { letter-spacing: 0.18em; font-size: 9px; }
  .ts-para { font-size: 18px; }
  .ts-quote { grid-template-columns: 34px 1fr; }
  .ts-quote-mark { font-size: 52px; }
}

/* (anatomy SVG removed from story — straight arrows live in #arrow-svg) */

/* Hero caption — ported from landing-page.html. Eyebrow + Cormorant
   headline + subtext + two reference-style buttons. */
.video-caption {
  position: absolute;
  left: 50%;
  bottom: clamp(7rem, 14vh, 11rem);
  transform: translateX(-50%);
  text-align: center;
  z-index: 3;
  pointer-events: auto;
  width: min(760px, 92vw);
  padding: 0 1rem;
  font-family: Inter, system-ui, sans-serif;
}
.vc-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: #e5c487;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 14px;
}
.vc-eyebrow::before, .vc-eyebrow::after {
  content: ""; width: 36px; height: 1px; display: block;
}
.vc-eyebrow::before { background: linear-gradient(90deg, transparent, #e5c487); }
.vc-eyebrow::after  { background: linear-gradient(90deg, #e5c487, transparent); }

.vc-headline {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.0;
  letter-spacing: -0.05em;
  font-weight: 500;
  color: #f2eee7;
  text-shadow: 0 0 26px rgba(255,255,255,0.05);
  margin: 0;
}
.vc-headline em {
  color: #e5c487;
  font-style: italic;
  font-weight: 500;
}
.vc-sub {
  font-family: Inter, system-ui, sans-serif;
  margin: 10px 0 0;
  color: rgba(242,238,231,0.76);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.45;
}

/* Hero-bottom 6-benefit strip (ported from landing-page.html) */
.hero-benefits {
  position: absolute;
  left: 0; right: 0;
  bottom: 0;
  z-index: 3;
  margin: 0 28px;
  border-top: 1px solid rgba(198,157,89,0.16);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  min-height: 82px;
  background: linear-gradient(180deg, rgba(6,6,4,0) 0%, rgba(6,6,4,0.6) 40%, rgba(6,6,4,0.86) 100%);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  font-family: Inter, system-ui, sans-serif;
}
.hb-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
  align-items: center;
  padding: 16px 18px;
  border-right: 1px solid rgba(198,157,89,0.15);
  min-width: 0;
  color: #e5c487;
}
.hb-item:last-child { border-right: 0; }
.hb-item svg { color: #e5c487; flex: 0 0 auto; }
.hb-item strong {
  display: block;
  color: #e5c487;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hb-item span {
  display: block;
  margin-top: 4px;
  color: rgba(242,238,231,0.52);
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1200px) {
  .hero-benefits { grid-template-columns: 1fr 1fr; margin: 0; }
}
@media (max-width: 700px) {
  .hero-benefits { grid-template-columns: 1fr; }
  .hb-item { border-right: 0; border-bottom: 1px solid rgba(198,157,89,0.12); }
  .hb-item:last-child { border-bottom: 0; }
}

/* Scroll cue — appears once the video ends. Sits above the feature strip. */
.video-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(5.5rem, 11vh, 8rem);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--accent);
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.video-scroll-cue.is-visible { opacity: 1; }
.video-scroll-cue .vsc-arrow {
  font-size: 14px;
  animation: vsc-bob 2.2s var(--ease) infinite;
}
@keyframes vsc-bob {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Reduced-motion: no autoplay, no fly-ins. Show poster frame + final label + scroll cue */
@media (prefers-reduced-motion: reduce) {
  #heroVideo { display: none; }
  #hero-video {
    background:
      linear-gradient(rgba(10,10,10,0.55), rgba(10,10,10,0.85)),
      url('/landing/assets/exploded-phone-poster.jpg') center center / cover no-repeat;
  }
}

/* ============================================================
   THE VERDICT — sticky crescendo
   ============================================================ */

/* ============================================================
   VERDICT / VRD-STAGE — ported from one-device-thirteen-audits.html.
   Three-column board: pills · phone · pills, score row + statement.
   The exploded-phone canvas + glow ARE preserved (not disturbed).
   The old `.verdict-badges` that floated tags onto the phone is
   force-hidden so the JS can still inflate (no crash) but nothing
   visually overlaps the device.
   ============================================================ */
#verdict.vrd-stage {
  --vrd-cream:#f3eee6;
  --vrd-soft:rgba(243,238,230,.72);
  --vrd-muted:rgba(243,238,230,.46);
  --vrd-gold:#c99150;
  --vrd-gold2:#e7c58d;
  --vrd-gold3:#ffd79b;
  --vrd-green:#86e39c;
  --vrd-serif:"Cormorant Garamond","Instrument Serif",serif;
  --vrd-mono:"Roboto Mono","JetBrains Mono",monospace;
  --vrd-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  height: auto;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(3rem, 8vh, 5rem) clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 37%, rgba(255,216,156,.09), transparent 20%),
    radial-gradient(circle at 50% 52%, rgba(201,145,80,.08), transparent 35%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  isolation: isolate;
  color: var(--vrd-cream);
  font-family: var(--vrd-sans);
  border-top: 1px solid var(--rule);
}
#verdict.vrd-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.012) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 76%);
  opacity: 0.54;
  z-index: -4;
  pointer-events: none;
}
#verdict.vrd-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.78) 100%);
  z-index: -3;
  pointer-events: none;
}

.vrd-frame {
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(231,197,141,.14);
  pointer-events: none;
  opacity: 0.55;
}
.vrd-top-line {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 42px;
  border-bottom: 1px solid rgba(231,197,141,.10);
  background: linear-gradient(180deg, rgba(255,255,255,.024), transparent);
}

/* Corner ticks */
.vrd-corner {
  position: absolute;
  width: 68px; height: 68px;
  pointer-events: none;
  z-index: 4;
}
.vrd-corner::before, .vrd-corner::after {
  content: "";
  position: absolute;
  background: var(--vrd-gold2);
  box-shadow: 0 0 11px rgba(231,197,141,.48);
}
.vrd-corner.vrd-tl { left: 34px; top: 34px; }
.vrd-corner.vrd-tr { right: 34px; top: 34px; }
.vrd-corner.vrd-bl { left: 34px; bottom: 34px; }
.vrd-corner.vrd-br { right: 34px; bottom: 34px; }
.vrd-corner.vrd-tl::before, .vrd-corner.vrd-bl::before { left: 0; width: 1px; height: 40px; }
.vrd-corner.vrd-tl::after,  .vrd-corner.vrd-bl::after  { left: 0; width: 40px; height: 1px; }
.vrd-corner.vrd-tr::before, .vrd-corner.vrd-br::before { right: 0; width: 1px; height: 40px; }
.vrd-corner.vrd-tr::after,  .vrd-corner.vrd-br::after  { right: 0; width: 40px; height: 1px; }
.vrd-corner.vrd-tl::before, .vrd-corner.vrd-tr::before { top: 0; }
.vrd-corner.vrd-tl::after,  .vrd-corner.vrd-tr::after  { top: 0; }
.vrd-corner.vrd-bl::before, .vrd-corner.vrd-br::before { bottom: 0; }
.vrd-corner.vrd-bl::after,  .vrd-corner.vrd-br::after  { bottom: 0; }

/* Orbits + sparks */
.vrd-orbit-a {
  position: absolute;
  left: -145px; top: 145px;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.08);
  opacity: 0.55;
}
.vrd-orbit-a::before {
  content: ""; position: absolute; inset: 86px;
  border-radius: 50%;
  border: 1px dashed rgba(231,197,141,.065);
}
.vrd-orbit-a::after {
  content: ""; position: absolute; inset: 176px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.055);
}
.vrd-orbit-b {
  position: absolute;
  right: -150px; top: 130px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.075) 0 1px, transparent 1px 34px);
  opacity: 0.34;
}
.vrd-orbit-b::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.1);
}
.vrd-orbit-b::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.1);
}
.vrd-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--vrd-gold3);
  box-shadow: 0 0 16px rgba(255,215,155,.9);
}
.vrd-s1 { left: 17%; top: 28%; }
.vrd-s2 { right: 21%; top: 24%; }
.vrd-s3 { left: 23%; bottom: 20%; }
.vrd-s4 { right: 18%; bottom: 26%; }
.vrd-s5 { left: 50%; top: 50%; transform: translateX(-50%); }

/* Layout */
.vrd-layout {
  position: relative;
  z-index: 5;
  width: min(1280px, 100%);
  display: grid;
  grid-template-rows: auto auto auto;
  justify-items: center;
  gap: 28px;
}

/* Header */
.vrd-header {
  text-align: center;
}
.vrd-eyebrow {
  font: 500 10px/1 var(--vrd-mono);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(243,238,230,.46);
  text-align: center;
}
#verdict.vrd-stage .vrd-headline {
  text-align: center;
  font-family: var(--vrd-serif);
  font-size: clamp(36px, 4.4vw, 82px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--vrd-cream);
  margin: 10px 0 0;
}
#verdict.vrd-stage .vrd-headline em {
  font-style: italic;
  color: #d8b98a;
  font-weight: 500;
}
.vrd-shine {
  width: min(520px, 70vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.56), transparent);
  margin: 18px auto 0;
  position: relative;
}
.vrd-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: 13px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.82), rgba(201,145,80,.2) 42%, transparent 75%);
  filter: blur(2px);
}

/* Three-column board */
.vrd-board {
  width: min(1120px, 100%);
  min-height: 430px;
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 24px;
  align-items: center;
  margin-top: 8px;
}
.vrd-side {
  display: grid;
  gap: 12px;
}
.vrd-pill {
  height: 43px;
  border: 1px solid rgba(243,238,230,.20);
  border-radius: 5px;
  background: rgba(10,10,9,.66);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: rgba(243,238,230,.73);
  font: 600 10px/1 var(--vrd-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}
.vrd-pill::before {
  content: "\2713";
  color: var(--vrd-gold2);
  margin-right: 9px;
}
.vrd-pill-gold {
  border-color: rgba(231,197,141,.44);
  color: var(--vrd-gold2);
  background: rgba(201,145,80,.075);
}

/* Centre device card — uses existing `.verdict-phone` + canvas + glow */
.vrd-device.verdict-phone {
  position: relative;
  left: auto; top: auto;
  transform: none;
  width: 100%;
  max-width: none;
  max-height: none;
  min-height: 430px;
  aspect-ratio: auto;
  border: 1px solid rgba(231,197,141,.28);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(18,18,16,.82), rgba(8,8,7,.62));
  box-shadow:
    0 30px 90px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.04);
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 36px;
}
.vrd-device.verdict-phone::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,215,155,.12), transparent 28%),
    linear-gradient(rgba(231,197,141,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.015) 1px, transparent 1px);
  background-size: auto, 38px 38px, 38px 38px;
  opacity: 0.75;
  pointer-events: none;
}
.vrd-device.verdict-phone::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 370px; height: 370px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.10) 0 1px, transparent 1px 32px);
  opacity: 0.55;
  pointer-events: none;
}
/* Canvas sits centred over the radar backdrop; keep its DPR scaling intact */
.vrd-device.verdict-phone canvas {
  position: relative !important;
  inset: auto !important;
  width: clamp(220px, 26vw, 320px) !important;
  height: auto !important;
  aspect-ratio: 9 / 16;
  max-height: 380px;
  z-index: 2;
}
/* Soft amber glow behind the phone */
.vrd-device.verdict-phone .vp-glow {
  inset: 8%;
  opacity: 0;
  background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(255,215,155,0), rgba(255,215,155,0));
  transition: opacity 900ms var(--ease-out), background 1200ms var(--ease-out);
  z-index: 1;
}
.vrd-device.verdict-phone.is-glow .vp-glow {
  opacity: 1;
  background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(255,215,155,.28) 0%,
    rgba(201,145,80,.10) 40%,
    transparent 72%);
}

/* HIDE the legacy floating badges (JS still inflates them, just invisible) */
.vrd-device .verdict-badges,
.vrd-device .verdict-badge { display: none !important; }

.vrd-vertical-light {
  position: absolute;
  left: 50%; top: 70px; bottom: 38px;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,215,155,.72), transparent);
  z-index: 3;
  box-shadow: 0 0 18px rgba(255,215,155,.55);
}
.vrd-stamp {
  position: absolute;
  z-index: 4;
  right: 30px; top: 24px;
  height: 32px;
  border: 1px solid rgba(134,227,156,.34);
  border-radius: 999px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--vrd-green);
  font: 600 10px/1 var(--vrd-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: rgba(134,227,156,.045);
}
.vrd-stamp i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--vrd-green);
  box-shadow: 0 0 10px rgba(134,227,156,.9);
}

/* Score row */
.vrd-score {
  width: min(760px, 100%);
  text-align: center;
  margin-top: 8px;
}
.vrd-score-title {
  font: 600 9px/1 var(--vrd-mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(243,238,230,.36);
  margin-bottom: 16px;
}
.vrd-numbers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}
.vrd-metric b {
  display: block;
  font-family: var(--vrd-serif);
  font-size: clamp(36px, 4vw, 49px);
  font-weight: 400;
  line-height: 0.85;
  color: var(--vrd-cream);
  font-variant-numeric: tabular-nums;
}
.vrd-metric b .vs-num {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  letter-spacing: -0.012em;
}
.vrd-metric b small {
  font-size: 20px;
  color: rgba(243,238,230,.66);
  font-weight: 400;
}
.vrd-metric span {
  display: block;
  margin-top: 12px;
  font: 600 8px/1 var(--vrd-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(243,238,230,.34);
}
.vrd-statement {
  max-width: 690px;
  margin: 22px auto 0;
  text-align: center;
  font-family: var(--vrd-serif);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.24;
  font-style: italic;
  color: #d7b889;
}
.vrd-root {
  font: 500 8px/1 var(--vrd-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(243,238,230,.34);
  margin-top: 15px;
  text-align: center;
}

@media (max-width: 980px) {
  #verdict.vrd-stage { padding: 72px 20px; }
  .vrd-frame, .vrd-corner, .vrd-orbit-a, .vrd-orbit-b, .vrd-spark { display: none; }
  .vrd-board { grid-template-columns: 1fr; gap: 14px; }
  .vrd-side { grid-template-columns: 1fr 1fr; }
  .vrd-device.verdict-phone { min-height: 400px; }
  #verdict.vrd-stage .vrd-headline { font-size: 38px; }
  .vrd-numbers { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}
@media (max-width: 560px) {
  .vrd-side { grid-template-columns: 1fr; }
  .vrd-pill { height: auto; min-height: 42px; padding: 10px; }
  .vrd-vertical-light { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .vrd-device.verdict-phone.is-glow .vp-glow { transition: none; }
}

/* Reduced-motion: end state instantly, no fly-in */
@media (prefers-reduced-motion: reduce) {
  .verdict-badge,
  .verdict-resolution { opacity: 1; transform: translate(-50%, -50%) scale(1); transition: none; }
  .verdict-resolution { transform: translateX(-50%); }
  .vp-glow { opacity: 1; background: radial-gradient(ellipse 55% 55% at 50% 50%,
    rgba(196,184,168,0.30) 0%, rgba(196,184,168,0.08) 38%, rgba(196,184,168,0.0) 70%); }
}

/* ============================================================
   STATEMENT — extensions (kicker, headline, split comparison)
   ============================================================ */
.hs-kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
}
.hs-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--accent);
}
.hs-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 5rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 0 2rem;
  color: var(--ink);
}
.hs-headline em {
  font-style: italic;
  color: var(--accent-strong);
}
.hs-para b { color: var(--ink); font-weight: 500; }

.hs-split {
  margin: 4rem auto 0;
  max-width: min(1100px, 92vw);
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-elev);
}
.hs-old, .hs-new { padding: 2rem clamp(1.25rem, 2.5vw, 2.25rem); }
.hs-old { border-right: 1px solid var(--rule); background: rgba(255,255,255,0.012); }
.hs-new { background: linear-gradient(180deg, rgba(196,184,168,0.06), transparent); }
.hs-split-eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1rem;
}
.hs-new .hs-split-eyebrow { color: var(--accent); }
.hs-split-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.4;
}
.hs-split-list { list-style: none; padding: 0; margin: 0; }
.hs-split-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-dim);
  letter-spacing: 0.02em;
}
.hs-split-list li:last-child { border-bottom: none; }
.hs-split-list li b { color: var(--accent-strong); font-weight: 500; }

@media (max-width: 760px) {
  .hs-split { grid-template-columns: 1fr; }
  .hs-old { border-right: none; border-bottom: 1px solid var(--rule); }
}

/* ============================================================
   CERTIFICATE / DDC-STAGE — ported from the-cerfiticate-that-shows.html.
   Full-bleed artboard: headline + DDC card + right benefits panel.
   All selectors namespaced `.ddc-*` to avoid collisions.
   ============================================================ */
#certificate.ddc-stage {
  --ddc-cream:#f2eee6;
  --ddc-cream2:rgba(242,238,230,.76);
  --ddc-cream3:rgba(242,238,230,.52);
  --ddc-gold:#c99555;
  --ddc-gold2:#e6c28a;
  --ddc-gold3:#f5d29a;
  --ddc-serif:"Cormorant Garamond","Instrument Serif",serif;
  --ddc-mono:"Roboto Mono","JetBrains Mono",monospace;
  --ddc-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 4rem);
  background: #050504;
  color: var(--ddc-cream);
  font-family: var(--ddc-sans);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 3;
}

.ddc-artboard {
  position: relative;
  width: min(1760px, 100%);
  aspect-ratio: 1760 / 990;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 42%, rgba(246,195,117,.18), transparent 16%),
    radial-gradient(circle at 52% 51%, rgba(198,149,85,.10), transparent 35%),
    radial-gradient(circle at 82% 52%, rgba(198,149,85,.08), transparent 26%),
    linear-gradient(90deg,#020201 0%,#060504 20%,#0a0907 51%,#060504 80%,#020201 100%);
  box-shadow: 0 20px 42px rgba(0,0,0,.16);
  isolation: isolate;
  border-radius: 4px;
}
.ddc-artboard::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(230,194,138,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,194,138,.015) 1px, transparent 1px);
  background-size: 42px 42px;
  -webkit-mask-image: radial-gradient(circle at 55% 50%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 55% 50%, black 0%, transparent 76%);
  opacity: 0.65;
  z-index: -4;
  pointer-events: none;
}
.ddc-artboard::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.62) 100%);
  z-index: -3;
  pointer-events: none;
}
.ddc-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) .5px, transparent .5px);
  background-size: 4px 4px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 30;
}

/* Corner ticks */
.ddc-corner {
  position: absolute;
  width: 96px; height: 96px;
  z-index: 12;
  pointer-events: none;
}
.ddc-corner::before, .ddc-corner::after {
  content: "";
  position: absolute;
  background: var(--ddc-gold2);
  box-shadow: 0 0 8px rgba(230,194,138,.45);
}
.ddc-tl { left: 25px; top: 25px; }
.ddc-tr { right: 25px; top: 25px; }
.ddc-bl { left: 25px; bottom: 25px; }
.ddc-br { right: 25px; bottom: 25px; }
.ddc-tl::before, .ddc-bl::before { left: 0; width: 1px; height: 35px; }
.ddc-tl::after,  .ddc-bl::after  { left: 0; width: 35px; height: 1px; }
.ddc-tr::before, .ddc-br::before { right: 0; width: 1px; height: 35px; }
.ddc-tr::after,  .ddc-br::after  { right: 0; width: 35px; height: 1px; }
.ddc-tl::before, .ddc-tr::before { top: 0; }
.ddc-tl::after,  .ddc-tr::after  { top: 0; }
.ddc-bl::before, .ddc-br::before { bottom: 0; }
.ddc-bl::after,  .ddc-br::after  { bottom: 0; }

/* Sparks */
.ddc-spark {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ddc-gold3);
  box-shadow: 0 0 18px rgba(246,211,154,.95);
  z-index: 10;
}
.ddc-s1 { left: 56px; top: 61px; }
.ddc-s2 { right: 56px; top: 61px; }
.ddc-s3 { left: 61px; bottom: 55px; }
.ddc-s4 { right: 61px; bottom: 55px; }
.ddc-s5 { left: 74px; top: 486px; }
.ddc-s6 { right: 78px; top: 490px; }

/* Left radar + dots + side text */
.ddc-left-radar {
  position: absolute;
  left: -78px; top: 145px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(201,149,85,.15) 0 1px, transparent 1px 24px);
  opacity: 0.8;
}
.ddc-left-radar::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(230,194,138,.20);
}
.ddc-left-radar::after {
  content: "";
  position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(230,194,138,.20);
}
.ddc-left-side-text {
  position: absolute;
  left: 50px; top: 540px;
  font: 600 10px/1.7 var(--ddc-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ddc-gold);
  opacity: 0.7;
}
.ddc-left-dots {
  position: absolute;
  left: 66px; top: 626px;
  display: grid; gap: 10px;
}
.ddc-left-dots i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ddc-gold2);
  opacity: 0.82;
}
.ddc-right-dots {
  position: absolute;
  right: 89px; top: 278px;
  display: grid; gap: 11px;
}
.ddc-right-dots i {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--ddc-gold2);
  opacity: 0.55;
}

/* Top-right cube ornament */
.ddc-top-ornament {
  position: absolute;
  right: 128px; top: 86px;
  width: 170px; height: 210px;
  color: var(--ddc-gold2);
  opacity: 0.8;
}
.ddc-verified {
  font: 600 9px/1 var(--ddc-mono);
  letter-spacing: 0.33em;
  text-transform: uppercase;
  color: var(--ddc-gold2);
  position: absolute;
  left: 9px; top: 0;
}
.ddc-cube-diagram {
  position: absolute;
  left: 12px; top: 46px;
  width: 132px; height: 132px;
  border: 1px solid rgba(230,194,138,.13);
}
.ddc-cube-diagram::before {
  content: "";
  position: absolute;
  left: 50%; top: -34px; bottom: -55px;
  width: 1px;
  border-left: 1px dotted rgba(230,194,138,.32);
}
.ddc-cube-diagram::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ddc-gold3);
  box-shadow: 0 0 25px rgba(246,211,154,.88);
}
.ddc-cube {
  position: absolute;
  left: 31px; top: 28px;
  width: 70px; height: 70px;
  transform: rotate(45deg);
  border: 1px solid rgba(230,194,138,.7);
}
.ddc-cube::before, .ddc-cube::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(230,194,138,.45);
}
.ddc-cube::before { inset: 13px; }
.ddc-cube::after  { inset: 28px; }
.ddc-top-ornament .ddc-hline {
  position: absolute;
  left: -62px; top: 34px;
  width: 105px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ddc-gold2));
}
.ddc-top-ornament .ddc-hline::before {
  content: "";
  position: absolute;
  left: 0; top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ddc-gold2);
  box-shadow: 0 0 12px rgba(230,194,138,.9);
}

/* Header */
.ddc-header {
  text-align: center;
  position: absolute;
  left: 50%; top: 58px;
  transform: translateX(-50%);
  width: 890px;
  max-width: calc(100% - 200px);
  z-index: 5;
}
.ddc-eyebrow {
  font: 500 13px/1 var(--ddc-mono);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: var(--ddc-gold2);
  margin-bottom: 23px;
}
.ddc-title {
  font-family: var(--ddc-serif);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.93;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ddc-cream);
  text-shadow: 0 0 20px rgba(255,255,255,.06);
  margin: 0;
}
.ddc-title .ddc-gold { color: #d49a63; }
.ddc-desc {
  width: 690px;
  max-width: 100%;
  margin: 25px auto 0;
  color: rgba(242,238,230,.72);
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}

.ddc-central-glow {
  position: absolute;
  left: 50%; top: 384px;
  transform: translateX(-50%);
  width: 740px; height: 22px;
  background: radial-gradient(ellipse at center, rgba(246,211,154,.88), rgba(201,149,85,.25) 35%, transparent 75%);
  filter: blur(3px);
  z-index: 1;
}
.ddc-central-line {
  position: absolute;
  left: 50%; top: 392px;
  transform: translateX(-50%);
  width: 1200px;
  max-width: calc(100% - 100px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(230,194,138,.38), transparent);
  z-index: 1;
}

/* Certificate card */
.ddc-certificate {
  position: absolute;
  left: 156px; top: 392px;
  width: 840px; height: 535px;
  border: 1px solid rgba(230,194,138,.42);
  border-radius: 25px;
  background: linear-gradient(180deg, rgba(23,21,18,.85), rgba(10,10,8,.82));
  box-shadow:
    0 0 0 1px rgba(255,255,255,.025) inset,
    0 30px 95px rgba(0,0,0,.55),
    0 0 36px rgba(201,149,85,.12);
  padding: 32px 44px 30px;
  z-index: 3;
}
.ddc-certificate::before {
  content: "";
  position: absolute; inset: 10px;
  border: 1px solid rgba(242,238,230,.08);
  border-radius: 19px;
  pointer-events: none;
}
.ddc-cert-head {
  display: grid;
  grid-template-columns: 1fr 160px;
  align-items: start;
  margin-bottom: 18px;
}
.ddc-device {
  font-size: 22px;
  font-weight: 500;
  color: var(--ddc-cream);
  letter-spacing: 0.01em;
}
.ddc-meta {
  font: 400 12px/1.8 var(--ddc-mono);
  letter-spacing: 0.12em;
  color: rgba(242,238,230,.45);
  margin-top: 6px;
}
.ddc-grade {
  text-align: right;
  font-family: var(--ddc-serif);
  color: var(--ddc-gold2);
  font-size: 62px;
  line-height: 0.8;
}
.ddc-grade span {
  display: block;
  font: 400 13px/1.8 var(--ddc-mono);
  letter-spacing: 0.14em;
  color: rgba(242,238,230,.58);
  margin-top: 12px;
}
.ddc-signed {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 32px;
  border: 1px solid rgba(230,194,138,.52);
  border-radius: 99px;
  padding: 0 17px;
  color: var(--ddc-gold2);
  font: 600 12px/1 var(--ddc-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin-bottom: 14px;
  background: rgba(201,149,85,.055);
}
.ddc-signed svg { width: 16px; height: 16px; }
.ddc-hr {
  height: 1px;
  background: linear-gradient(90deg, rgba(230,194,138,.28), transparent);
  margin-bottom: 20px;
}

.ddc-metric {
  display: grid;
  grid-template-columns: 39px 1fr 70px;
  align-items: center;
  gap: 18px;
  height: 51px;
}
.ddc-micon {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(230,194,138,.42);
  display: grid; place-items: center;
  color: var(--ddc-gold2);
}
.ddc-micon svg { width: 18px; height: 18px; }
.ddc-mtext {
  font: 500 13px/1 var(--ddc-mono);
  letter-spacing: 0.04em;
  color: rgba(242,238,230,.88);
}
.ddc-value {
  text-align: right;
  font: 500 14px/1 var(--ddc-mono);
  color: var(--ddc-cream);
}
.ddc-bar {
  grid-column: 2 / 4;
  height: 4px;
  background: rgba(242,238,230,.18);
  border-radius: 4px;
  margin-top: -9px;
  position: relative;
}
.ddc-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ddc-gold), #f6d7a0);
  border-radius: 4px;
  box-shadow: 0 0 14px rgba(246,211,154,.5);
}
.ddc-bar::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  left: var(--p);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #f6d7a0;
  box-shadow: 0 0 18px rgba(246,211,154,.9);
}

.ddc-cert-bottom {
  position: absolute;
  left: 48px; right: 48px;
  bottom: 33px;
  height: 61px;
  border-top: 1px solid rgba(230,194,138,.13);
  display: grid;
  grid-template-columns: 1.1fr .7fr .9fr 1fr;
  align-items: center;
}
.ddc-bottom-cell {
  border-right: 1px solid rgba(230,194,138,.25);
  padding: 0 20px;
  color: rgba(242,238,230,.72);
  font: 400 15px/1.3 var(--ddc-mono);
  text-align: center;
}
.ddc-bottom-cell:first-child {
  text-align: left;
  padding-left: 0;
  color: var(--ddc-gold2);
}
.ddc-bottom-cell:last-child {
  border-right: 0;
  text-align: right;
  padding-right: 0;
}
.ddc-bottom-cell span {
  display: block;
  color: var(--ddc-gold2);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 6px;
}

/* Right panel — quote + benefits list */
.ddc-right-panel {
  position: absolute;
  left: 1048px; top: 424px;
  width: 540px; height: 395px;
  z-index: 4;
}
.ddc-brace-left {
  position: absolute;
  left: 0; top: 0;
  width: 58px; height: 395px;
  border-left: 1px solid rgba(230,194,138,.52);
  border-top: 1px solid rgba(230,194,138,.52);
  border-bottom: 1px solid rgba(230,194,138,.52);
  border-radius: 11px 0 0 11px;
}
.ddc-brace-left::after {
  content: "";
  position: absolute;
  left: -4px; top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ddc-gold2);
  box-shadow: 0 0 12px rgba(230,194,138,.8);
}
.ddc-rp-quote {
  position: absolute;
  left: 88px; top: 8px;
  width: 455px;
  font-family: var(--ddc-serif);
  font-style: italic;
  font-size: clamp(28px, 2.6vw, 40px);
  line-height: 1.1;
  color: #e5bd82;
  letter-spacing: -0.03em;
}
.ddc-rp-list {
  position: absolute;
  left: 87px; right: 0;
  top: 184px;
}
.ddc-rline {
  height: 55px;
  border-top: 1px solid rgba(230,194,138,.12);
  display: grid;
  grid-template-columns: 42px 142px 1fr;
  align-items: center;
  color: rgba(242,238,230,.62);
  font-size: 15px;
}
.ddc-rline:last-child {
  border-bottom: 1px solid rgba(230,194,138,.12);
}
.ddc-ricon {
  width: 36px; height: 36px;
  border: 1px solid rgba(230,194,138,.38);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ddc-gold2);
}
.ddc-ricon svg { width: 18px; height: 18px; }
.ddc-rline b {
  color: #fff;
  font-weight: 600;
}

/* Right ornaments + floor glow */
.ddc-right-orn {
  position: absolute;
  right: 34px; top: 424px;
  width: 190px; height: 290px;
  z-index: 2;
}
.ddc-right-orn::before {
  content: "";
  position: absolute;
  right: 35px; top: 0;
  height: 260px; width: 1px;
  background: linear-gradient(to bottom, rgba(230,194,138,.45), transparent);
}
.ddc-right-orn::after {
  content: "";
  position: absolute;
  right: 0; top: 0;
  width: 100px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ddc-gold2));
}
.ddc-right-orn .ddc-plus {
  position: absolute;
  right: 27px; top: -8px;
  width: 17px; height: 17px;
}
.ddc-right-orn .ddc-plus::before,
.ddc-right-orn .ddc-plus::after {
  content: "";
  position: absolute;
  background: var(--ddc-gold2);
  box-shadow: 0 0 10px rgba(230,194,138,.8);
}
.ddc-right-orn .ddc-plus::before { left: 8px; width: 1px; height: 17px; }
.ddc-right-orn .ddc-plus::after  { top: 8px; width: 17px; height: 1px; }

.ddc-floor-glow {
  position: absolute;
  left: 50%; bottom: 39px;
  transform: translateX(-50%);
  width: 920px; height: 90px;
  background: radial-gradient(ellipse at center, rgba(246,178,86,.48), rgba(201,149,85,.13) 34%, transparent 75%);
  filter: blur(9px);
  z-index: 1;
}
.ddc-floor-line {
  position: absolute;
  left: 50%; bottom: 69px;
  transform: translateX(-50%);
  width: 980px;
  max-width: calc(100% - 80px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(246,178,86,.78), transparent);
  z-index: 2;
}

@media (max-width: 1100px) {
  #certificate.ddc-stage { padding: 0; }
  .ddc-artboard {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .ddc-corner, .ddc-spark, .ddc-left-radar, .ddc-left-side-text,
  .ddc-left-dots, .ddc-right-dots, .ddc-top-ornament,
  .ddc-central-glow, .ddc-central-line, .ddc-right-orn,
  .ddc-floor-glow, .ddc-floor-line {
    display: none;
  }
  .ddc-header {
    position: relative;
    top: auto; left: auto; transform: none;
    width: 100%; max-width: 100%;
    padding: 64px 24px 20px;
  }
  .ddc-title { font-size: 44px; }
  .ddc-desc { width: auto; }
  .ddc-certificate {
    position: relative;
    left: auto; top: auto;
    width: calc(100% - 32px);
    height: auto;
    margin: 20px auto;
    padding: 28px 22px 120px;
  }
  .ddc-right-panel {
    position: relative;
    left: auto; top: auto;
    width: calc(100% - 32px);
    height: auto;
    margin: 32px auto;
    padding-bottom: 40px;
  }
  .ddc-brace-left { display: none; }
  .ddc-rp-quote, .ddc-rp-list {
    position: relative;
    left: auto; top: auto;
    width: auto;
  }
  .ddc-rp-quote {
    font-size: 30px;
    margin-bottom: 22px;
  }
  .ddc-cert-head { grid-template-columns: 1fr; }
  .ddc-grade { text-align: left; margin-top: 20px; }
  .ddc-metric { grid-template-columns: 39px 1fr 55px; }
  .ddc-cert-bottom {
    grid-template-columns: 1fr 1fr;
    row-gap: 12px;
    height: auto;
    padding: 16px 0;
  }
  .ddc-bottom-cell:nth-child(2) { border-right: 0; }
}

/* ============================================================
   LIVE DEVICE / LD-STAGE — ported from use-the-phone.html.
   Two-column hero: copy + actions on the left, a streaming phone
   mock on the right. HUD chrome + bottom proof strip.
   Namespaced `.ld-*`.
   ============================================================ */
#live-device.ld-stage {
  --ld-cream:#f3eee6;
  --ld-soft:rgba(243,238,230,.72);
  --ld-muted:rgba(243,238,230,.50);
  --ld-gold:#c99150;
  --ld-gold2:#e7c58d;
  --ld-gold3:#ffd79b;
  --ld-red:#ff6d63;
  --ld-green:#8fe09b;
  --ld-serif:"Cormorant Garamond","Instrument Serif",serif;
  --ld-mono:"Roboto Mono","JetBrains Mono",monospace;
  --ld-sans:Inter, system-ui, sans-serif;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 11vh, 7rem) clamp(1rem, 3vw, 3rem);
  background:
    radial-gradient(circle at 67% 43%, rgba(231,197,141,.08), transparent 20%),
    radial-gradient(circle at 48% 48%, rgba(255,255,255,.025), transparent 25%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  isolation: isolate;
  color: var(--ld-cream);
  font-family: var(--ld-sans);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  z-index: 3;
}
#live-device.ld-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.010) 1px, transparent 1px);
  background-size: 74px 74px;
  -webkit-mask-image: radial-gradient(circle at 58% 50%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 58% 50%, black 0%, transparent 76%);
  opacity: 0.55;
  z-index: -4;
  pointer-events: none;
}
#live-device.ld-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 39%, rgba(0,0,0,.74) 100%);
  z-index: -3;
  pointer-events: none;
}

.ld-top-band {
  position: absolute; left: 0; right: 0; top: 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(255,255,255,.022), transparent);
  border-bottom: 1px solid rgba(231,197,141,.10);
}
.ld-bottom-band {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 90px;
  border-top: 1px solid rgba(231,197,141,.10);
  background: linear-gradient(0deg, rgba(255,255,255,.018), transparent);
}
.ld-bottom-gold-line {
  position: absolute; left: 0; right: 0; bottom: 43px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.28), transparent);
}
.ld-bottom-corner {
  position: absolute;
  right: 30px; bottom: 0;
  width: 60px; height: 60px;
  border-right: 1px solid var(--ld-gold2);
  border-top: 1px solid var(--ld-gold2);
  opacity: 0.85;
}
.ld-bottom-corner-left {
  left: 30px; right: auto;
  border-right: 0;
  border-left: 1px solid var(--ld-gold2);
}

.ld-frame {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(231,197,141,.15);
  opacity: 0.46;
  pointer-events: none;
  background: none;
}

/* Corner ticks */
.ld-corner {
  position: absolute;
  width: 70px; height: 70px;
  pointer-events: none;
  z-index: 4;
}
.ld-corner::before, .ld-corner::after {
  content: "";
  position: absolute;
  background: var(--ld-gold2);
  box-shadow: 0 0 10px rgba(231,197,141,.45);
}
.ld-corner.ld-tl { left: 48px; top: 48px; }
.ld-corner.ld-tr { right: 48px; top: 48px; }
.ld-corner.ld-bl { left: 48px; bottom: 48px; }
.ld-corner.ld-br { right: 48px; bottom: 48px; }
.ld-corner.ld-tl::before, .ld-corner.ld-bl::before { left: 0; width: 1px; height: 40px; }
.ld-corner.ld-tl::after,  .ld-corner.ld-bl::after  { left: 0; width: 40px; height: 1px; }
.ld-corner.ld-tr::before, .ld-corner.ld-br::before { right: 0; width: 1px; height: 40px; }
.ld-corner.ld-tr::after,  .ld-corner.ld-br::after  { right: 0; width: 40px; height: 1px; }
.ld-corner.ld-tl::before, .ld-corner.ld-tr::before { top: 0; }
.ld-corner.ld-tl::after,  .ld-corner.ld-tr::after  { top: 0; }
.ld-corner.ld-bl::before, .ld-corner.ld-br::before { bottom: 0; }
.ld-corner.ld-bl::after,  .ld-corner.ld-br::after  { bottom: 0; }

/* Orbits + dotfield */
.ld-orbit-left {
  position: absolute;
  left: -140px; top: 130px;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.08);
  opacity: 0.6;
}
.ld-orbit-left::before {
  content: ""; position: absolute; inset: 82px;
  border-radius: 50%;
  border: 1px dashed rgba(231,197,141,.065);
}
.ld-orbit-left::after {
  content: ""; position: absolute; inset: 170px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.06);
}
.ld-orbit-phone {
  position: absolute;
  right: 210px; top: 180px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.08) 0 1px, transparent 1px 32px);
  opacity: 0.35;
}
.ld-orbit-phone::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.12);
}
.ld-orbit-phone::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.12);
}
.ld-dotfield {
  position: absolute;
  right: 90px; top: 145px;
  width: 250px; height: 360px;
  background-image: radial-gradient(rgba(231,197,141,.17) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
          mask-image: linear-gradient(90deg, transparent, black, transparent);
  opacity: 0.34;
}

/* Sparks */
.ld-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ld-gold3);
  box-shadow: 0 0 16px rgba(255,215,155,.9);
}
.ld-s1 { left: 15%; top: 28%; }
.ld-s2 { right: 23%; top: 22%; }
.ld-s3 { left: 22%; bottom: 24%; }
.ld-s4 { right: 16%; bottom: 30%; }
.ld-s5 { left: 50%; bottom: 48px; transform: translateX(-50%); }

/* Wrap */
.ld-wrap {
  position: relative;
  z-index: 6;
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: clamp(40px, 7vw, 90px);
  align-items: center;
  transform: translateY(6px);
}

/* Copy */
#live-device.ld-stage .ld-copy {
  max-width: 690px;
}
.ld-eyebrow {
  font: 500 10px/1 var(--ld-mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(243,238,230,.55);
  margin-bottom: 22px;
}
#live-device.ld-stage .ld-h1 {
  font-family: var(--ld-serif);
  font-size: clamp(36px, 3.5vw, 70px);
  line-height: 0.98;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ld-cream);
  text-shadow: 0 0 26px rgba(255,255,255,.055);
  margin: 0 0 26px;
}
#live-device.ld-stage .ld-h1 em {
  font-style: italic;
  color: #d8b98a;
  font-weight: 500;
}
.ld-body {
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  color: rgba(243,238,230,.58);
  letter-spacing: -0.012em;
  max-width: 650px;
  margin-bottom: 17px;
}
.ld-body strong {
  color: rgba(243,238,230,.88);
  font-weight: 500;
}
.ld-shine {
  width: min(480px, 80%);
  height: 1px;
  background: linear-gradient(90deg, rgba(231,197,141,.55), rgba(231,197,141,.16), transparent);
  position: relative;
  margin: 30px 0 26px;
}
.ld-shine::before {
  content: "";
  position: absolute;
  left: 128px; top: 50%;
  transform: translateY(-50%);
  width: 160px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.78), rgba(201,145,80,.2) 40%, transparent 75%);
  filter: blur(2px);
}

/* Action row */
.ld-action-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 26px;
}
.ld-btn {
  height: 42px;
  border: 1px solid rgba(231,197,141,.28);
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  font: 500 12px/1 var(--ld-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ld-gold2);
  background: rgba(231,197,141,.045);
  text-decoration: none;
  transition: background 200ms var(--ease);
}
.ld-btn:hover { background: rgba(231,197,141,.10); }
.ld-btn-secondary {
  color: rgba(243,238,230,.62);
  border-color: rgba(243,238,230,.16);
  background: rgba(255,255,255,.025);
}
.ld-btn-secondary:hover { background: rgba(255,255,255,.05); }
.ld-btn i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ld-green);
  box-shadow: 0 0 10px rgba(143,224,155,.8);
}

/* Phone area */
.ld-phone-area {
  position: relative;
  height: 430px;
  display: grid;
  place-items: center;
}
.ld-phone {
  position: relative;
  width: 195px; height: 385px;
  border-radius: 35px;
  border: 1px solid rgba(243,238,230,.17);
  background: linear-gradient(180deg, rgba(31,31,28,.92), rgba(9,10,10,.94));
  box-shadow:
    0 30px 80px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.03);
  overflow: hidden;
  padding: 0;
}
.ld-phone::before {
  content: "";
  position: absolute;
  left: 50%; top: 18px;
  transform: translateX(-50%);
  width: 74px; height: 15px;
  background: #030303;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.ld-phone::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 52% 16%, rgba(231,197,141,.08), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%);
  pointer-events: none;
}
.ld-live {
  position: absolute;
  right: 19px; top: 25px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--ld-red);
  font: 600 9px/1 var(--ld-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  z-index: 2;
}
.ld-live::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--ld-red);
  box-shadow: 0 0 10px rgba(255,109,99,.85);
}
.ld-grade {
  position: absolute;
  left: 0; right: 0; top: 157px;
  text-align: center;
  font-family: var(--ld-serif);
  font-size: 38px;
  line-height: 1;
  color: #e5d3bd;
  z-index: 2;
  display: block;
  font-weight: 400;
}
.ld-unit {
  position: absolute;
  left: 0; right: 0; top: 207px;
  text-align: center;
  color: rgba(243,238,230,.62);
  font: 500 10px/1 var(--ld-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
}
.ld-metrics {
  position: absolute;
  left: 0; right: 0; top: 232px;
  text-align: center;
  color: rgba(243,238,230,.38);
  font: 400 10px/1.55 var(--ld-mono);
  letter-spacing: 0.10em;
  z-index: 2;
}
.ld-phone-glow {
  position: absolute;
  left: 50%; bottom: 8px;
  transform: translateX(-50%);
  width: 170px; height: 26px;
  background: radial-gradient(ellipse at center, rgba(231,197,141,.22), transparent 70%);
  filter: blur(4px);
}
.ld-phone-label {
  position: absolute;
  right: -74px; top: 116px;
  width: 120px;
  color: rgba(231,197,141,.62);
  font: 500 10px/1.5 var(--ld-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.ld-phone-label::before {
  content: "";
  display: block;
  width: 55px; height: 1px;
  background: rgba(231,197,141,.38);
  margin: 0 0 10px -40px;
}
.ld-scan-line {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 260px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.7), transparent);
  opacity: 0.75;
}
.ld-scan-line::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 80px; height: 10px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.78), transparent 74%);
  filter: blur(2px);
}

/* Bottom proof strip */
.ld-proof-strip {
  position: absolute;
  left: 50%; bottom: 96px;
  transform: translateX(-50%);
  width: min(940px, 80vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.25), transparent);
}
.ld-proof-text {
  position: absolute;
  left: 50%; bottom: 71px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 18px;
  color: rgba(231,197,141,.62);
  font: 500 11px/1 var(--ld-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
}
.ld-proof-text::before, .ld-proof-text::after {
  content: "";
  width: 54px; height: 1px;
  background: rgba(231,197,141,.32);
}

@media (max-width: 900px) {
  #live-device.ld-stage { padding: 100px 22px; }
  .ld-frame, .ld-corner, .ld-orbit-left, .ld-orbit-phone,
  .ld-dotfield, .ld-spark, .ld-proof-strip, .ld-proof-text,
  .ld-bottom-corner {
    display: none;
  }
  .ld-wrap {
    grid-template-columns: 1fr;
    gap: 34px;
    transform: none;
  }
  #live-device.ld-stage .ld-h1 { font-size: 38px; }
  .ld-body { font-size: 15px; }
  .ld-shine { width: 80%; }
  .ld-phone-area { height: 390px; }
  .ld-phone-label, .ld-scan-line { display: none; }
}

/* ============================================================
   AGENTS / AGT-STAGE — ported from your-ai-shopper.html.
   Full-bleed agentic-commerce spread: HUD ornaments + centred
   headline + chat shell with user/agent bubbles + tag row + mini-flow.
   Namespaced `.agt-*`.
   ============================================================ */
#agents.agt-stage {
  --agt-cream:#f4efe7;
  --agt-soft:rgba(244,239,231,.72);
  --agt-muted:rgba(244,239,231,.52);
  --agt-gold:#c99150;
  --agt-gold2:#e7c58d;
  --agt-gold3:#ffd79b;
  --agt-serif:"Cormorant Garamond","Instrument Serif",serif;
  --agt-mono:"Roboto Mono","JetBrains Mono",monospace;
  --agt-sans:Inter, system-ui, sans-serif;

  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 35%, rgba(231,197,141,.075), transparent 22%),
    radial-gradient(circle at 50% 63%, rgba(201,145,80,.065), transparent 28%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  isolation: isolate;
  padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 3vw, 2.5rem);
  color: var(--agt-cream);
  font-family: var(--agt-sans);
}
#agents.agt-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.012) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 78%);
  opacity: 0.62;
  z-index: -4;
  pointer-events: none;
}
#agents.agt-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.72) 100%);
  z-index: -3;
  pointer-events: none;
}

.agt-top-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 88px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  border-bottom: 1px solid rgba(231,197,141,.10);
}
.agt-bottom-band {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 58px;
  border-top: 1px solid rgba(231,197,141,.11);
}
.agt-frame {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(231,197,141,.20);
  opacity: 0.45;
  pointer-events: none;
}

/* Corner ticks */
.agt-corner {
  position: absolute;
  width: 74px; height: 74px;
  pointer-events: none;
  z-index: 4;
}
.agt-corner::before, .agt-corner::after {
  content: "";
  position: absolute;
  background: var(--agt-gold2);
  box-shadow: 0 0 12px rgba(231,197,141,.45);
}
.agt-corner.agt-tl { left: 48px; top: 48px; }
.agt-corner.agt-tr { right: 48px; top: 48px; }
.agt-corner.agt-bl { left: 48px; bottom: 48px; }
.agt-corner.agt-br { right: 48px; bottom: 48px; }
.agt-corner.agt-tl::before, .agt-corner.agt-bl::before { left: 0; width: 1px; height: 42px; }
.agt-corner.agt-tl::after,  .agt-corner.agt-bl::after  { left: 0; width: 42px; height: 1px; }
.agt-corner.agt-tr::before, .agt-corner.agt-br::before { right: 0; width: 1px; height: 42px; }
.agt-corner.agt-tr::after,  .agt-corner.agt-br::after  { right: 0; width: 42px; height: 1px; }
.agt-corner.agt-tl::before, .agt-corner.agt-tr::before { top: 0; }
.agt-corner.agt-tl::after,  .agt-corner.agt-tr::after  { top: 0; }
.agt-corner.agt-bl::before, .agt-corner.agt-br::before { bottom: 0; }
.agt-corner.agt-bl::after,  .agt-corner.agt-br::after  { bottom: 0; }

/* Orbits + dotfield */
.agt-orbit-left {
  position: absolute;
  left: -140px; top: 140px;
  width: 560px; height: 560px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.10);
  opacity: 0.78;
}
.agt-orbit-left::before {
  content: ""; position: absolute; inset: 78px;
  border: 1px dashed rgba(231,197,141,.08);
  border-radius: 50%;
}
.agt-orbit-left::after {
  content: ""; position: absolute; inset: 164px;
  border: 1px solid rgba(231,197,141,.07);
  border-radius: 50%;
}
.agt-orbit-right {
  position: absolute;
  right: -120px; top: 260px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.10) 0 1px, transparent 1px 34px);
  opacity: 0.48;
}
.agt-orbit-right::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.12);
}
.agt-orbit-right::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.12);
}
.agt-dotfield {
  position: absolute;
  right: 110px; top: 145px;
  width: 250px; height: 360px;
  background-image: radial-gradient(rgba(231,197,141,.19) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
          mask-image: linear-gradient(90deg, transparent, black, transparent);
  opacity: 0.42;
}

/* Sparks */
.agt-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--agt-gold3);
  box-shadow: 0 0 17px rgba(255,215,155,.9);
  z-index: 4;
}
.agt-s1 { left: 13%; top: 31%; }
.agt-s2 { right: 19%; top: 26%; }
.agt-s3 { left: 21%; bottom: 21%; }
.agt-s4 { right: 16%; bottom: 28%; }
.agt-s5 { left: 50%; top: 49%; transform: translateX(-50%); }

/* Content */
.agt-content {
  position: relative;
  z-index: 5;
  width: min(980px, 100%);
  text-align: center;
  margin: 0 auto;
  transform: translateY(-4px);
}
.agt-eyebrow {
  font: 500 11px/1 var(--agt-mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244,239,231,.62);
  margin-bottom: 18px;
}
#agents.agt-stage .agt-h1 {
  font-family: var(--agt-serif);
  font-size: clamp(40px, 5vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.058em;
  font-weight: 500;
  color: var(--agt-cream);
  text-shadow: 0 0 28px rgba(255,255,255,.06);
  margin: 0 auto 22px;
  max-width: 780px;
}
.agt-intro {
  max-width: 675px;
  margin: 0 auto;
  color: rgba(244,239,231,.64);
  font-size: clamp(14px, 1.2vw, 17px);
  line-height: 1.55;
  letter-spacing: -0.01em;
}
.agt-intro em {
  font-family: var(--agt-serif);
  font-style: italic;
  color: #d7b889;
  font-size: 1.3em;
}
.agt-shine {
  width: min(520px, 90%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.62), transparent);
  margin: 28px auto 38px;
  position: relative;
}
.agt-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 140px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.82), rgba(201,145,80,.22) 42%, transparent 75%);
  filter: blur(2px);
}

/* Chat shell */
.agt-chat-shell {
  width: min(760px, 100%);
  margin: 0 auto;
  border: 1px solid rgba(244,239,231,.16);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(16,16,14,.76), rgba(9,9,8,.68));
  box-shadow:
    0 30px 80px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.035);
  padding: 38px 30px 30px;
  position: relative;
  overflow: hidden;
  text-align: left;
}
.agt-chat-shell::before {
  content: "";
  position: absolute;
  left: 50%; top: -4px;
  transform: translateX(-50%);
  width: 180px; height: 14px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.52), transparent 76%);
  filter: blur(2px);
}
.agt-chat-shell::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(244,239,231,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(244,239,231,.020) 1px, transparent 1px);
  background-size: 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 15%, black 85%, transparent);
          mask-image: linear-gradient(180deg, transparent, black 15%, black 85%, transparent);
  pointer-events: none;
  opacity: 0.45;
}

.agt-bubble {
  position: relative;
  z-index: 2;
  width: 82%;
  border: 1px solid rgba(244,239,231,.15);
  border-radius: 10px;
  background: rgba(255,255,255,.025);
  padding: 15px 18px;
  color: rgba(244,239,231,.86);
  font: 400 13px/1.55 var(--agt-mono);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.agt-bubble + .agt-bubble { margin-top: 11px; }
.agt-bubble-user { margin-left: auto; }
.agt-bubble-agent {
  border-color: rgba(231,197,141,.42);
  background: rgba(201,145,80,.05);
  width: 80%;
}
.agt-bubble .agt-label {
  display: block;
  font: 600 9px/1 var(--agt-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(231,197,141,.70);
  margin-bottom: 9px;
}
.agt-bubble-user .agt-label { color: rgba(244,239,231,.48); }
.agt-bubble-agent::before {
  content: "";
  position: absolute;
  left: -1px; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 44%;
  background: linear-gradient(180deg, transparent, var(--agt-gold2), transparent);
  box-shadow: 0 0 12px rgba(231,197,141,.55);
}

/* Tag row */
.agt-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 8px;
  justify-content: center;
  position: relative;
  z-index: 2;
}
.agt-tag {
  height: 28px;
  border: 1px solid rgba(231,197,141,.20);
  border-radius: 999px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: rgba(244,239,231,.56);
  font: 500 10px/1 var(--agt-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(0,0,0,.20);
}
.agt-tag-gold {
  color: var(--agt-gold2);
  border-color: rgba(231,197,141,.38);
}

.agt-closing {
  position: relative;
  z-index: 2;
  text-align: center;
  font-family: var(--agt-serif);
  font-size: clamp(20px, 1.9vw, 25px);
  line-height: 1.2;
  color: #d8b98a;
  font-style: italic;
  margin-top: 18px;
}
.agt-closing::before {
  content: "";
  display: block;
  width: 130px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--agt-gold2), transparent);
  margin: 0 auto 16px;
  box-shadow: 0 0 12px rgba(231,197,141,.35);
}

.agt-mini-flow {
  position: absolute;
  left: 50%; bottom: 82px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--agt-gold2);
  font: 500 11px/1 var(--agt-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.78;
}
.agt-mini-flow::before, .agt-mini-flow::after {
  content: "";
  width: 95px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--agt-gold2));
}
.agt-mini-flow::after { background: linear-gradient(90deg, var(--agt-gold2), transparent); }
.agt-mini-flow i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--agt-gold3);
  box-shadow: 0 0 12px rgba(255,215,155,.8);
}

@media (max-width: 900px) {
  #agents.agt-stage { padding: 96px 22px; }
  .agt-frame, .agt-corner, .agt-orbit-left, .agt-orbit-right,
  .agt-dotfield, .agt-spark, .agt-mini-flow {
    display: none;
  }
  .agt-content { transform: none; }
  .agt-eyebrow { font-size: 10px; }
  #agents.agt-stage .agt-h1 { font-size: 42px; }
  .agt-intro { font-size: 15px; }
  .agt-chat-shell { padding: 26px 16px; }
  .agt-bubble, .agt-bubble-agent { width: 100%; }
  .agt-bubble-user { margin-left: 0; }
  .agt-closing { font-size: 21px; }
}

/* ============================================================
   BEYOND-SALE / ROLE-STAGE — ported from phone-arrive.html.
   Full-bleed artboard with 3-card triptych. Namespaced `.role-*`.
   ============================================================ */
#beyond-sale.role-stage {
  --role-cream:#f4efe7;
  --role-cream-soft:rgba(244,239,231,.76);
  --role-cream-muted:rgba(244,239,231,.55);
  --role-gold:#c99150;
  --role-gold-soft:#d8a363;
  --role-gold-bright:#e9c88f;
  --role-gold-hot:#ffd89c;
  --role-serif:"Cormorant Garamond","Instrument Serif",serif;
  --role-mono:"Roboto Mono","JetBrains Mono",monospace;
  --role-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vh, 4rem) clamp(1rem, 4vw, 5rem);
  background: #050504;
  color: var(--role-cream);
  font-family: var(--role-sans);
  border-top: 1px solid var(--rule);
  position: relative;
  z-index: 3;
}

.role-artboard {
  position: relative;
  width: min(1760px, 100%);
  aspect-ratio: 1760 / 990;
  overflow: hidden;
  border-radius: 2px;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,216,156,.11), transparent 18%),
    radial-gradient(circle at 52% 55%, rgba(201,145,80,.10), transparent 35%),
    radial-gradient(circle at 17% 42%, rgba(201,145,80,.08), transparent 28%),
    radial-gradient(circle at 84% 43%, rgba(201,145,80,.06), transparent 28%),
    linear-gradient(90deg,#020201 0%,#050504 18%,#080806 50%,#050504 82%,#020201 100%);
  box-shadow: 0 22px 42px rgba(0,0,0,.18);
  isolation: isolate;
}
.role-artboard::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(233,200,143,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,200,143,.014) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 50%, black 0%, transparent 76%);
  opacity: 0.72;
  z-index: -4;
  pointer-events: none;
}
.role-artboard::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.64) 100%);
  z-index: -3;
  pointer-events: none;
}
.role-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.10) .52px, transparent .52px);
  background-size: 4px 4px;
  opacity: 0.032;
  z-index: 30;
  pointer-events: none;
}

/* Outer gold frame */
.role-frame {
  position: absolute;
  inset: 22px;
  border: 1px solid rgba(233,200,143,.58);
  pointer-events: none;
  z-index: 5;
  box-shadow: inset 0 0 35px rgba(201,145,80,.05);
}

/* Corner step ticks */
.role-corner-step {
  position: absolute;
  width: 66px; height: 66px;
  z-index: 7;
  pointer-events: none;
}
.role-corner-step::before, .role-corner-step::after {
  content: "";
  position: absolute;
  background: var(--role-gold-bright);
  box-shadow: 0 0 9px rgba(233,200,143,.55);
}
.role-corner-step.role-tl { left: 22px; top: 22px; }
.role-corner-step.role-tr { right: 22px; top: 22px; }
.role-corner-step.role-bl { left: 22px; bottom: 22px; }
.role-corner-step.role-br { right: 22px; bottom: 22px; }
.role-corner-step.role-tl::before { left: 16px; top: 0; width: 1px; height: 42px; }
.role-corner-step.role-tl::after  { left: 0; top: 16px; width: 42px; height: 1px; }
.role-corner-step.role-tr::before { right: 16px; top: 0; width: 1px; height: 42px; }
.role-corner-step.role-tr::after  { right: 0; top: 16px; width: 42px; height: 1px; }
.role-corner-step.role-bl::before { left: 16px; bottom: 0; width: 1px; height: 42px; }
.role-corner-step.role-bl::after  { left: 0; bottom: 16px; width: 42px; height: 1px; }
.role-corner-step.role-br::before { right: 16px; bottom: 0; width: 1px; height: 42px; }
.role-corner-step.role-br::after  { right: 0; bottom: 16px; width: 42px; height: 1px; }

.role-step-extra {
  position: absolute;
  width: 34px; height: 34px;
  border-color: var(--role-gold-bright);
  z-index: 8;
  pointer-events: none;
}
.role-step-extra.role-tl { left: 38px; top: 38px; border-left: 1px solid; border-top: 1px solid; }
.role-step-extra.role-tr { right: 38px; top: 38px; border-right: 1px solid; border-top: 1px solid; }
.role-step-extra.role-bl { left: 38px; bottom: 38px; border-left: 1px solid; border-bottom: 1px solid; }
.role-step-extra.role-br { right: 38px; bottom: 38px; border-right: 1px solid; border-bottom: 1px solid; }

/* Sparks */
.role-spark {
  position: absolute;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--role-gold-hot);
  box-shadow: 0 0 17px rgba(255,216,156,.95);
  z-index: 7;
}
.role-s1 { left: 165px; top: 84px; }
.role-s2 { right: 165px; top: 84px; }
.role-s3 { left: 168px; bottom: 84px; }
.role-s4 { right: 168px; bottom: 84px; }
.role-s5 { left: 330px; top: 348px; }
.role-s6 { right: 330px; top: 310px; }
.role-s7 { left: 50%; top: 407px; transform: translateX(-50%); }

/* Plus marks */
.role-plus {
  position: absolute;
  width: 19px; height: 19px;
  z-index: 5;
  opacity: 0.8;
}
.role-plus::before, .role-plus::after {
  content: "";
  position: absolute;
  background: var(--role-gold-bright);
  box-shadow: 0 0 8px rgba(233,200,143,.5);
}
.role-plus::before { left: 9px; width: 1px; height: 19px; }
.role-plus::after  { top: 9px; width: 19px; height: 1px; }
.role-p1 { left: 156px; top: 102px; }
.role-p2 { right: 158px; top: 102px; }
.role-p3 { left: 156px; bottom: 198px; }
.role-p4 { right: 158px; bottom: 198px; }

/* Left orbit + target + beam */
.role-left-orbit {
  position: absolute;
  left: 62px; top: 68px;
  width: 545px; height: 545px;
  border-radius: 50%;
  border: 1px solid rgba(233,200,143,.09);
  opacity: 0.9;
  z-index: -1;
}
.role-left-orbit::before {
  content: ""; position: absolute; inset: 66px;
  border: 1px solid rgba(233,200,143,.085);
  border-radius: 50%;
}
.role-left-orbit::after {
  content: ""; position: absolute; inset: 136px;
  border: 1px dashed rgba(233,200,143,.08);
  border-radius: 50%;
}
.role-left-target {
  position: absolute;
  left: 284px; top: 280px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--role-gold-hot);
  box-shadow: 0 0 17px rgba(255,216,156,.9);
}
.role-left-beam {
  position: absolute;
  left: 0; top: 337px;
  width: 322px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,143,.44), transparent);
  transform: rotate(-3deg);
  opacity: 0.55;
}

/* Right diagram */
.role-right-diagram {
  position: absolute;
  right: 102px; top: 150px;
  width: 420px; height: 360px;
  opacity: 0.72;
  z-index: -1;
}
.role-right-diagram::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(233,200,143,.020) 1px, transparent 1px),
    linear-gradient(90deg, rgba(233,200,143,.017) 1px, transparent 1px);
  background-size: 34px 34px;
}
.role-circle {
  position: absolute;
  left: 130px; top: 110px;
  width: 92px; height: 92px;
  border-radius: 50%;
  border: 1px solid rgba(233,200,143,.20);
}
.role-circle::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--role-gold-hot);
  box-shadow: 0 0 13px rgba(255,216,156,.8);
}
.role-arc {
  position: absolute;
  left: 30px; top: 60px;
  width: 260px; height: 190px;
  border: 1px solid rgba(233,200,143,.16);
  border-radius: 50%;
  border-right-color: transparent;
  border-bottom-color: transparent;
  transform: rotate(16deg);
}
.role-ray1, .role-ray2 {
  position: absolute;
  left: 175px;
  height: 1px;
  background: linear-gradient(90deg, rgba(233,200,143,.36), transparent);
  transform-origin: left center;
}
.role-ray1 { top: 158px; width: 260px; transform: rotate(-22deg); }
.role-ray2 { top: 161px; width: 300px; transform: rotate(16deg); }
.role-node {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(233,200,143,.8);
  box-shadow: 0 0 10px rgba(233,200,143,.7);
}
.role-n1 { left: 85px; top: 80px; }
.role-n2 { left: 274px; top: 40px; }
.role-n3 { left: 320px; top: 130px; }
.role-n4 { left: 374px; top: 175px; }

/* Header */
.role-hero {
  text-align: center;
  position: absolute;
  top: 126px;
  left: 50%;
  transform: translateX(-50%);
  width: 1100px;
  max-width: calc(100% - 200px);
  z-index: 10;
}
.role-eyebrow {
  font: 500 15px/1 var(--role-mono);
  letter-spacing: 0.43em;
  text-transform: uppercase;
  color: var(--role-gold-bright);
  margin-bottom: 38px;
  text-shadow: 0 0 12px rgba(233,200,143,.15);
}
.role-eyebrow::after {
  content: "";
  display: block;
  width: 235px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,143,.55), transparent);
  margin: 25px auto 0;
}
#beyond-sale.role-stage .role-h1 {
  font-family: var(--role-serif);
  font-size: clamp(40px, 4.4vw, 72px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--role-cream);
  text-shadow: 0 0 24px rgba(255,255,255,.07);
  margin: 0;
}
#beyond-sale.role-stage .role-h1 span { color: #d9b482; }
.role-hero-shine {
  width: 380px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,143,.62), transparent);
  margin: 34px auto 0;
  position: relative;
}
.role-hero-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 112px; height: 12px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,216,156,.95), rgba(201,145,80,.28) 40%, transparent 76%);
  filter: blur(2px);
}

/* Cards */
.role-cards {
  position: absolute;
  left: 50%; top: 432px;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 360px);
  gap: 24px;
  z-index: 12;
  max-width: calc(100% - 200px);
}
.role-card {
  height: 352px;
  border: 1px solid rgba(233,200,143,.44);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(14,14,12,.78), rgba(8,8,7,.66));
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.035);
  padding: 35px 45px 38px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.role-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -2px;
  height: 14px;
  background: radial-gradient(ellipse at center, rgba(255,216,156,.78), transparent 70%);
  opacity: 0.85;
}
.role-card::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -4px;
  transform: translateX(-50%);
  width: 94px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,216,156,.95), rgba(201,145,80,.24) 45%, transparent 75%);
  filter: blur(2px);
}
.role-icon {
  width: 42px; height: 42px;
  margin: 0 auto 30px;
  color: var(--role-gold-bright);
  position: relative;
}
.role-icon svg { width: 42px; height: 42px; }
.role-icon::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 65px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,143,.45), transparent);
  transform: translate(-50%, -50%);
}
.role-card-kicker {
  font: 600 13px/1.4 var(--role-mono);
  letter-spacing: 0.27em;
  text-transform: uppercase;
  color: var(--role-gold-bright);
  margin-bottom: 22px;
}
#beyond-sale.role-stage .role-card h2 {
  font-family: var(--role-serif);
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-weight: 500;
  color: var(--role-cream);
  margin: 0 0 18px;
}
#beyond-sale.role-stage .role-card h2::after {
  content: "";
  display: block;
  width: 38px; height: 1px;
  background: var(--role-gold-bright);
  margin: 18px auto 0;
  box-shadow: 0 0 10px rgba(233,200,143,.5);
}
.role-card p {
  font-size: 16px;
  line-height: 1.52;
  text-align: left;
  color: rgba(244,239,231,.72);
  letter-spacing: -0.01em;
  margin: 0;
}
.role-card em {
  font-style: italic;
  color: var(--role-cream);
}

/* Bottom rail + R logo */
.role-bottom-rail {
  position: absolute;
  left: 170px; right: 170px;
  bottom: 61px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,200,143,.45), transparent);
  z-index: 6;
}
.role-bottom-logo {
  position: absolute;
  left: 50%; bottom: 54px;
  transform: translateX(-50%);
  width: 85px; height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--role-gold-bright);
  font-family: var(--role-serif);
  font-size: 43px;
  z-index: 8;
  background: linear-gradient(90deg, transparent, #080806 20%, #080806 80%, transparent);
}
.role-bottom-logo::before, .role-bottom-logo::after {
  content: "";
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--role-gold-bright);
  box-shadow: 0 0 10px rgba(233,200,143,.8);
  position: absolute;
  top: 50%;
}
.role-bottom-logo::before { left: -15px; }
.role-bottom-logo::after  { right: -15px; }

@media (max-width: 1100px) {
  #beyond-sale.role-stage { padding: 0; }
  .role-artboard {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    padding: 70px 24px;
  }
  .role-frame, .role-corner-step, .role-step-extra,
  .role-spark, .role-left-orbit, .role-left-target, .role-left-beam,
  .role-right-diagram, .role-bottom-rail, .role-bottom-logo, .role-plus {
    display: none;
  }
  .role-hero {
    position: relative;
    top: auto; left: auto; transform: none;
    width: 100%;
    max-width: 100%;
    margin-bottom: 42px;
  }
  #beyond-sale.role-stage .role-h1 { font-size: 44px; }
  .role-cards {
    position: relative;
    left: auto; top: auto; transform: none;
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 100%;
    gap: 18px;
  }
  .role-card {
    height: auto;
    min-height: 300px;
  }
  .role-card p { text-align: center; }
  .role-eyebrow { font-size: 12px; letter-spacing: 0.32em; }
}

/* ============================================================
   B2B / BIZ-STAGE — ported from for-companies.html.
   Full-bleed enterprise spread with HUD ornaments, chip rail,
   3-up proof cards, and italic closing line. Namespaced `.biz-*`.
   ============================================================ */
#b2b.biz-stage {
  --biz-cream:#f4efe7;
  --biz-soft:rgba(244,239,231,.72);
  --biz-muted:rgba(244,239,231,.52);
  --biz-gold:#c89150;
  --biz-gold2:#e7c58d;
  --biz-gold3:#ffd79b;
  --biz-serif:"Cormorant Garamond","Instrument Serif",serif;
  --biz-mono:"Roboto Mono","JetBrains Mono",monospace;
  --biz-sans:Inter, system-ui, sans-serif;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(231,197,141,.09), transparent 26%),
    radial-gradient(circle at 68% 58%, rgba(201,145,80,.05), transparent 28%),
    linear-gradient(90deg,#010101 0%,#050504 17%,#080806 50%,#050504 83%,#010101 100%);
  isolation: isolate;
  padding: clamp(3rem, 9vh, 6rem) clamp(1rem, 4vw, 3rem);
  color: var(--biz-cream);
  font-family: var(--biz-sans);
}
#b2b.biz-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.012) 1px, transparent 1px);
  background-size: 70px 70px;
  -webkit-mask-image: radial-gradient(circle at 52% 50%, black 0%, transparent 75%);
          mask-image: radial-gradient(circle at 52% 50%, black 0%, transparent 75%);
  opacity: 0.6;
  z-index: -3;
  pointer-events: none;
}
#b2b.biz-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.68) 100%);
  z-index: -2;
  pointer-events: none;
}

.biz-top-band {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 84px;
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
  border-bottom: 1px solid rgba(231,197,141,.10);
}
.biz-bottom-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 58px;
  border-top: 1px solid rgba(231,197,141,.10);
}
.biz-frame {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(231,197,141,.22);
  opacity: 0.45;
  pointer-events: none;
}

/* Corner ticks */
.biz-corner {
  position: absolute;
  width: 76px; height: 76px;
  pointer-events: none;
  z-index: 3;
}
.biz-corner::before, .biz-corner::after {
  content: "";
  position: absolute;
  background: var(--biz-gold2);
  box-shadow: 0 0 12px rgba(231,197,141,.5);
}
.biz-corner.biz-tl { left: 48px; top: 48px; }
.biz-corner.biz-tr { right: 48px; top: 48px; }
.biz-corner.biz-bl { left: 48px; bottom: 48px; }
.biz-corner.biz-br { right: 48px; bottom: 48px; }
.biz-corner.biz-tl::before, .biz-corner.biz-bl::before { left: 0; width: 1px; height: 42px; }
.biz-corner.biz-tl::after,  .biz-corner.biz-bl::after  { left: 0; width: 42px; height: 1px; }
.biz-corner.biz-tr::before, .biz-corner.biz-br::before { right: 0; width: 1px; height: 42px; }
.biz-corner.biz-tr::after,  .biz-corner.biz-br::after  { right: 0; width: 42px; height: 1px; }
.biz-corner.biz-tl::before, .biz-corner.biz-tr::before { top: 0; }
.biz-corner.biz-tl::after,  .biz-corner.biz-tr::after  { top: 0; }
.biz-corner.biz-bl::before, .biz-corner.biz-br::before { bottom: 0; }
.biz-corner.biz-bl::after,  .biz-corner.biz-br::after  { bottom: 0; }

/* Orbit / radar / dotfield */
.biz-orbit-left {
  position: absolute;
  left: -120px; top: 170px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.10);
  opacity: 0.85;
}
.biz-orbit-left::before {
  content: ""; position: absolute; inset: 75px;
  border: 1px dashed rgba(231,197,141,.08);
  border-radius: 50%;
}
.biz-orbit-left::after {
  content: ""; position: absolute; inset: 156px;
  border: 1px solid rgba(231,197,141,.07);
  border-radius: 50%;
}
.biz-radar-right {
  position: absolute;
  right: -80px; bottom: 120px;
  width: 460px; height: 460px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.10) 0 1px, transparent 1px 34px);
  opacity: 0.55;
}
.biz-radar-right::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.12);
}
.biz-radar-right::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.12);
}
.biz-dotfield {
  position: absolute;
  right: 80px; top: 140px;
  width: 260px; height: 360px;
  background-image: radial-gradient(rgba(231,197,141,.20) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
          mask-image: linear-gradient(90deg, transparent, black, transparent);
  opacity: 0.45;
}

/* Sparks */
.biz-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--biz-gold3);
  box-shadow: 0 0 16px rgba(255,215,155,.9);
}
.biz-s1 { left: 14%; top: 28%; }
.biz-s2 { right: 18%; top: 24%; }
.biz-s3 { left: 20%; bottom: 22%; }
.biz-s4 { right: 16%; bottom: 30%; }
.biz-s5 { left: 50%; top: 48%; transform: translateX(-50%); }

/* Content */
.biz-content {
  position: relative;
  z-index: 5;
  width: min(980px, 100%);
  margin: 0 auto;
  transform: translateY(8px);
}
.biz-eyebrow {
  font: 500 11px/1 var(--biz-mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(244,239,231,.62);
  margin-bottom: 24px;
}
#b2b.biz-stage .biz-h1 {
  font-family: var(--biz-serif);
  font-size: clamp(40px, 5vw, 92px);
  line-height: 0.91;
  letter-spacing: -0.06em;
  font-weight: 500;
  color: var(--biz-cream);
  text-shadow: 0 0 28px rgba(255,255,255,.06);
  max-width: 820px;
  margin: 0;
}
#b2b.biz-stage .biz-h1 em {
  font-style: italic;
  color: #d7b889;
  font-weight: 500;
  white-space: nowrap;
}
.biz-shine {
  width: min(780px, 100%);
  height: 1px;
  margin: 30px 0 24px;
  background: linear-gradient(90deg, rgba(231,197,141,.55), rgba(231,197,141,.16), transparent);
  position: relative;
}
.biz-shine::before {
  content: "";
  position: absolute;
  left: 140px; top: 50%;
  transform: translateY(-50%);
  width: 190px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.75), rgba(201,145,80,.20) 40%, transparent 75%);
  filter: blur(2px);
}
.biz-body-copy {
  max-width: 720px;
  color: rgba(244,239,231,.64);
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.6;
  letter-spacing: -0.01em;
  margin-bottom: 28px;
}
.biz-body-copy strong {
  color: var(--biz-cream);
  font-weight: 500;
}

/* Chips */
.biz-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  width: min(900px, 100%);
  margin: 0 0 38px;
}
.biz-chip {
  height: 38px;
  border: 1px solid rgba(231,197,141,.18);
  border-radius: 7px;
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.018));
  display: inline-flex;
  align-items: center;
  padding: 0 18px;
  color: rgba(244,239,231,.70);
  font: 400 13px/1 var(--biz-mono);
  letter-spacing: 0.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}
.biz-chip-gold {
  border-color: rgba(231,197,141,.38);
  color: var(--biz-gold2);
  background: rgba(201,145,80,.08);
}

/* Proof row */
.biz-proof-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  width: min(900px, 100%);
  margin-bottom: 34px;
}
.biz-proof {
  min-height: 112px;
  border: 1px solid rgba(231,197,141,.20);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(13,13,11,.72), rgba(7,7,6,.60));
  padding: 20px 20px 18px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 14px;
  align-items: start;
}
.biz-proof .biz-ico {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.34);
  display: grid;
  place-items: center;
  color: var(--biz-gold2);
}
.biz-proof svg { width: 20px; height: 20px; }
.biz-proof b {
  display: block;
  color: var(--biz-cream);
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 6px;
}
.biz-proof span {
  color: rgba(244,239,231,.56);
  font-size: 13px;
  line-height: 1.45;
}

.biz-closing {
  font-family: var(--biz-serif);
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.2;
  color: #d8b98a;
  font-style: italic;
  letter-spacing: -0.025em;
}
.biz-closing::before {
  content: "";
  display: inline-block;
  width: 34px; height: 1px;
  background: var(--biz-gold2);
  vertical-align: middle;
  margin-right: 14px;
  box-shadow: 0 0 10px rgba(231,197,141,.45);
}

@media (max-width: 900px) {
  #b2b.biz-stage { padding: 80px 22px; }
  .biz-frame, .biz-corner, .biz-orbit-left, .biz-radar-right,
  .biz-dotfield, .biz-spark {
    display: none;
  }
  .biz-content { transform: none; }
  .biz-eyebrow { text-align: left; }
  #b2b.biz-stage .biz-h1 { font-size: 42px; }
  .biz-body-copy { font-size: 15px; }
  .biz-proof-row { grid-template-columns: 1fr; }
  .biz-chips { gap: 8px; }
  .biz-chip { font-size: 11px; padding: 0 12px; }
}

/* ============================================================
   CLOSING / TRUTH-STAGE — ported from the-device-tells-truth.html.
   HUD ornaments + serif headline + 4×2 grid of one-line truth cards.
   Namespaced `.truth-*`.
   ============================================================ */
#closing.truth-stage {
  --truth-cream:#f4efe7;
  --truth-soft:rgba(244,239,231,.72);
  --truth-muted:rgba(244,239,231,.48);
  --truth-gold:#c99150;
  --truth-gold2:#e7c58d;
  --truth-gold3:#ffd79b;
  --truth-serif:"Cormorant Garamond","Instrument Serif",serif;
  --truth-mono:"Roboto Mono","JetBrains Mono",monospace;
  --truth-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(4rem, 10vh, 7rem) clamp(1rem, 3vw, 2.5rem);
  background:
    radial-gradient(circle at 50% 38%, rgba(255,255,255,.035), transparent 17%),
    radial-gradient(circle at 50% 42%, rgba(231,197,141,.07), transparent 28%),
    linear-gradient(90deg,#010101 0%,#050504 19%,#080807 50%,#050504 81%,#010101 100%);
  isolation: isolate;
  color: var(--truth-cream);
  font-family: var(--truth-sans);
  border-top: 1px solid var(--rule);
  text-align: center;
  z-index: 3;
}
#closing.truth-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.010) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 45%, black 0%, transparent 74%);
  opacity: 0.55;
  z-index: -4;
  pointer-events: none;
}
#closing.truth-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 38%, rgba(0,0,0,.72) 100%);
  z-index: -3;
  pointer-events: none;
}

.truth-top-band {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 74px;
  background: linear-gradient(180deg, rgba(255,255,255,.025), transparent);
  border-bottom: 1px solid rgba(231,197,141,.09);
}
.truth-bottom-band {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 66px;
  border-top: 1px solid rgba(231,197,141,.10);
}
.truth-frame {
  position: absolute;
  inset: 48px;
  border: 1px solid rgba(231,197,141,.15);
  opacity: 0.5;
  pointer-events: none;
}

/* Corner ticks */
.truth-corner {
  position: absolute;
  width: 62px; height: 62px;
  z-index: 4;
  pointer-events: none;
}
.truth-corner::before, .truth-corner::after {
  content: "";
  position: absolute;
  background: var(--truth-gold2);
  box-shadow: 0 0 10px rgba(231,197,141,.45);
}
.truth-corner.truth-tl { left: 48px; top: 48px; }
.truth-corner.truth-tr { right: 48px; top: 48px; }
.truth-corner.truth-bl { left: 48px; bottom: 48px; }
.truth-corner.truth-br { right: 48px; bottom: 48px; }
.truth-corner.truth-tl::before, .truth-corner.truth-bl::before { left: 0; width: 1px; height: 36px; }
.truth-corner.truth-tl::after,  .truth-corner.truth-bl::after  { left: 0; width: 36px; height: 1px; }
.truth-corner.truth-tr::before, .truth-corner.truth-br::before { right: 0; width: 1px; height: 36px; }
.truth-corner.truth-tr::after,  .truth-corner.truth-br::after  { right: 0; width: 36px; height: 1px; }
.truth-corner.truth-tl::before, .truth-corner.truth-tr::before { top: 0; }
.truth-corner.truth-tl::after,  .truth-corner.truth-tr::after  { top: 0; }
.truth-corner.truth-bl::before, .truth-corner.truth-br::before { bottom: 0; }
.truth-corner.truth-bl::after,  .truth-corner.truth-br::after  { bottom: 0; }

/* Orbits + dotfield */
.truth-orbit-left {
  position: absolute;
  left: -120px; top: 170px;
  width: 520px; height: 520px;
  border-radius: 50%;
  border: 1px solid rgba(231,197,141,.08);
  opacity: 0.8;
}
.truth-orbit-left::before {
  content: ""; position: absolute; inset: 74px;
  border: 1px dashed rgba(231,197,141,.07);
  border-radius: 50%;
}
.truth-orbit-left::after {
  content: ""; position: absolute; inset: 160px;
  border: 1px solid rgba(231,197,141,.06);
  border-radius: 50%;
}
.truth-orbit-right {
  position: absolute;
  right: -100px; top: 150px;
  width: 480px; height: 480px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.08) 0 1px, transparent 1px 34px);
  opacity: 0.44;
}
.truth-orbit-right::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.10);
}
.truth-orbit-right::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,141,.10);
}
.truth-dotfield {
  position: absolute;
  right: 110px; bottom: 170px;
  width: 270px; height: 270px;
  background-image: radial-gradient(rgba(231,197,141,.17) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(90deg, transparent, black, transparent);
          mask-image: linear-gradient(90deg, transparent, black, transparent);
  opacity: 0.38;
}

/* Sparks */
.truth-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--truth-gold3);
  box-shadow: 0 0 15px rgba(255,215,155,.9);
}
.truth-s1 { left: 16%; top: 27%; }
.truth-s2 { right: 21%; top: 29%; }
.truth-s3 { left: 22%; bottom: 23%; }
.truth-s4 { right: 17%; bottom: 26%; }
.truth-s5 { left: 50%; top: 58%; transform: translateX(-50%); }

/* Content */
.truth-content {
  position: relative;
  z-index: 6;
  width: min(1040px, 100%);
  text-align: center;
  transform: translateY(-6px);
}
.truth-eyebrow {
  font: 500 10px/1 var(--truth-mono);
  letter-spacing: 0.48em;
  text-transform: uppercase;
  color: rgba(244,239,231,.55);
  margin-bottom: 22px;
}
#closing.truth-stage .truth-h1 {
  font-family: var(--truth-serif);
  font-size: clamp(36px, 4.2vw, 74px);
  line-height: 0.94;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--truth-cream);
  text-shadow: 0 0 26px rgba(255,255,255,.055);
  margin: 0 auto 38px;
  max-width: 720px;
}
#closing.truth-stage .truth-h1 em {
  font-style: italic;
  color: #d8b98b;
  font-weight: 500;
  white-space: nowrap;
}
.truth-shine {
  width: min(500px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.56), transparent);
  margin: 0 auto 38px;
  position: relative;
}
.truth-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 132px; height: 12px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.8), rgba(201,145,80,.20) 42%, transparent 76%);
  filter: blur(2px);
}

/* Grid of 6 cards in 4-col layout (cards 5/6 span the inner columns) */
.truth-grid {
  width: min(1010px, 100%);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 0 auto;
}
.truth-card {
  height: 88px;
  border: 1px solid rgba(244,239,231,.13);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(18,18,16,.72), rgba(10,10,9,.62));
  box-shadow:
    0 20px 55px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.025);
  position: relative;
  text-align: left;
  padding: 23px 40px 16px 17px;
  overflow: hidden;
  transition: 0.25s ease;
}
.truth-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.32), transparent);
  opacity: 0.7;
}
.truth-card::after {
  content: attr(data-no);
  position: absolute;
  right: 15px; top: 11px;
  color: rgba(244,239,231,.25);
  font: 500 10px/1 var(--truth-mono);
  letter-spacing: 0.06em;
}
.truth-card p {
  font-family: var(--truth-serif);
  font-size: 18px;
  line-height: 1.18;
  color: rgba(244,239,231,.88);
  letter-spacing: -0.015em;
  margin: 0;
}
.truth-card:hover {
  border-color: rgba(231,197,141,.42);
  transform: translateY(-2px);
}
.truth-card:hover p { color: var(--truth-cream); }

@media (min-width: 901px) {
  .truth-grid { grid-template-rows: 88px 88px; }
  .truth-card:nth-child(5) { grid-column: 1 / span 1; }
  .truth-card:nth-child(6) { grid-column: 2 / span 1; }
}

.truth-bottom-line {
  width: min(1010px, 100%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(244,239,231,.18), transparent);
  margin: clamp(48px, 12vh, 126px) auto 0;
}
.truth-caption {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: rgba(231,197,141,.62);
  font: 500 11px/1 var(--truth-mono);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  margin-top: 22px;
}
.truth-caption::before, .truth-caption::after {
  content: "";
  width: 40px; height: 1px;
  background: rgba(231,197,141,.35);
}

@media (max-width: 900px) {
  #closing.truth-stage { padding: 96px 22px; }
  .truth-frame, .truth-corner, .truth-orbit-left, .truth-orbit-right,
  .truth-dotfield, .truth-spark {
    display: none;
  }
  .truth-content { transform: none; }
  .truth-grid { grid-template-columns: 1fr; }
  .truth-card { height: auto; min-height: 86px; }
  #closing.truth-stage .truth-h1 { font-size: 38px; }
}

/* Old corner asides removed — content now lives on the centerline. */
.hero-side { display: none; }

/* ============================================================
   HERO CARDS — flanking proof cards (ported from landing-page.html).
   Circle icon · serif headline · divider · body · bottom badge.
   ============================================================ */
.hero-card {
  position: absolute;
  top: calc(69px + 110px);
  width: 230px;
  min-height: 330px;
  padding: 18px 20px 16px;
  border: 1px solid rgba(198,157,89,0.45);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(10,10,8,0.88), rgba(8,8,6,0.70));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 20px 70px rgba(0,0,0,0.45);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 5;
  color: #f2eee7;
  font-family: Inter, system-ui, sans-serif;
  display: flex; flex-direction: column;
}
.hero-card-left  { left: 56px; }
.hero-card-right { right: 56px; }

.hc-circle-icon {
  width: 42px; height: 42px;
  border: 1px solid rgba(198,157,89,0.44);
  border-radius: 50%;
  display: grid; place-items: center;
  color: #e5c487;
  background: radial-gradient(circle at 35% 25%, rgba(198,157,89,0.16), rgba(8,8,6,0.72));
  box-shadow: 0 0 24px rgba(198,157,89,0.08), inset 0 0 18px rgba(198,157,89,0.05);
  margin-bottom: 18px;
}

.hc-head {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #f2eee7;
  margin: 0 0 16px;
}
.hc-head em {
  color: #e5c487;
  font-style: italic;
  font-weight: 500;
}

.hc-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(198,157,89,0.55), transparent);
  margin-bottom: 18px;
}

.hc-body {
  color: rgba(242,238,231,0.76);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  font-family: Inter, system-ui, sans-serif;
}

.hc-bullets { display: grid; gap: 18px; }
.hc-bullet {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  align-items: start;
  color: rgba(242,238,231,0.76);
  font-family: Inter, system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.35;
}
.hc-bullet svg { color: #e5c487; margin-top: 1px; }

.hc-footer {
  margin-top: auto;
  padding-top: 18px;
  border-top: 1px solid rgba(198,157,89,0.24);
  display: flex;
  gap: 10px;
  align-items: center;
  color: #e5c487;
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.33em;
  text-transform: uppercase;
}
.hc-footer svg { flex: 0 0 auto; color: currentColor; }

@media (max-width: 1500px) {
  .hero-card-left  { left: 32px; }
  .hero-card-right { right: 32px; }
}
@media (max-width: 1200px) {
  .hero-card { display: none; }
}

/* Centerline brand stamp at the top of the video */
.hero-stamp {
  position: absolute;
  top: clamp(1.5rem, 3.2vh, 2.4rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--accent-dim);
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(10px);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}
.hero-stamp .hs-stamp-divider {
  width: 1px; height: 11px; background: var(--accent-dim);
  display: inline-block;
}
@media (max-width: 760px) {
  .hero-stamp { font-size: 0.56rem; gap: 0.5rem; padding: 0.45rem 0.85rem; }
  .hero-stamp span:last-child { display: none; }
  .hero-stamp .hs-stamp-divider { display: none; }
}

.hs-mark, .hs-stamp {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  padding-bottom: 0.55rem;
  width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
.hs-stamp-right {
  justify-content: flex-end;
  border-bottom: none;
  border-top: 1px solid var(--accent-dim);
  padding-bottom: 0; padding-top: 0.55rem;
}
.hs-stamp-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(196,184,168,0.7);
  animation: hs-pulse-dot 2.6s infinite;
}
@keyframes hs-pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }

/* Poster headline — left side */
.hs-poster {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.1vw, 2.1rem);
  line-height: 1.06;
  letter-spacing: -0.014em;
  color: #f3ece0;
  margin: 0;
  text-shadow: 0 2px 26px rgba(0,0,0,0.85);
}
.hs-poster em { font-style: italic; color: var(--accent-strong); }
.hs-poster-em-line { color: var(--ink-mute); font-style: italic; }
.hs-poster-right { text-align: right; }

/* Rotating verb on the left poster */
.hs-rotator {
  position: relative;
  display: inline-block;
  min-width: 12ch;
  height: 1.2em;
  vertical-align: top;
}
.hs-rot-w {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 520ms var(--ease-out), transform 600ms var(--ease-out);
  white-space: nowrap;
}
.hs-rot-w.is-on { opacity: 1; transform: translateY(0); }

/* Divider between poster and roles list */
.hs-divider {
  width: 56px; height: 1px;
  background: var(--accent-dim);
  margin: 0.4rem 0 0.6rem;
}

/* Tagline above the role list */
.hs-tagline {
  display: flex; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0;
}
.hs-tagline-l { color: var(--ink-mute); }
.hs-tagline-r { color: var(--accent); }

/* Role-pair list: Sensor → Becomes */
.hs-roles {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  gap: 0.55rem;
}
.hs-roles li {
  display: grid;
  grid-template-columns: 5.5rem 0.9rem 1fr;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--serif);
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
  opacity: 0;
  animation: hs-row-in 520ms var(--ease-out) forwards;
}
.hs-roles li:nth-child(1) { animation-delay: 0.45s; }
.hs-roles li:nth-child(2) { animation-delay: 0.70s; }
.hs-roles li:nth-child(3) { animation-delay: 0.95s; }
.hs-roles li:nth-child(4) { animation-delay: 1.20s; }
.hs-roles li:nth-child(5) { animation-delay: 1.45s; }
.hs-role-a { color: var(--ink); }
.hs-role-arrow { color: var(--accent); font-size: 0.85em; }
.hs-role-b { color: var(--accent-strong); font-style: italic; }

/* Big-stat poster blocks on the right */
.hs-bigstat {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.85rem;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
.hs-bigstat-v {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 3.6vw, 3.6rem);
  line-height: 0.9;
  color: var(--ink);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.hs-bigstat.hs-bigstat-zero .hs-bigstat-v { color: var(--accent-strong); }
.hs-bigstat-l {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.4;
  text-align: left;
}

/* Closing italic line on the right column */
.hs-coda-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(0.95rem, 1.15vw, 1.1rem);
  color: var(--ink-dim);
  margin: 0.4rem 0 0;
  text-align: right;
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}
.hs-coda-line em { color: var(--accent-strong); font-style: italic; }

/* Top-floating rotating manifesto strip */
.hero-manifesto {
  position: absolute;
  top: clamp(4rem, 7vh, 6rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
  pointer-events: none;
  text-align: center;
  width: min(720px, 86vw);
  height: 1.6em;
}
.hm-line {
  position: absolute;
  inset: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: -0.005em;
  line-height: 1.2;
  color: rgba(243,236,224,0.82);
  text-shadow: 0 2px 20px rgba(0,0,0,0.9);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out);
}
.hm-line em { color: var(--accent-strong); font-style: italic; }
.hm-line.is-on { opacity: 1; transform: translateY(0); }

.hs-runlist {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 0.42rem;
  font-size: 0.7rem; letter-spacing: 0.02em;
  max-height: 62vh; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 70%, transparent 100%);
}
.hs-runlist li {
  display: grid;
  grid-template-columns: 0.85rem 1fr auto;
  align-items: center;
  gap: 0.5rem;
  opacity: 0;
  animation: hs-row-in 480ms var(--ease-out) forwards;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.hs-runlist li:nth-child(1)  { animation-delay: 0.30s }
.hs-runlist li:nth-child(2)  { animation-delay: 0.55s }
.hs-runlist li:nth-child(3)  { animation-delay: 0.80s }
.hs-runlist li:nth-child(4)  { animation-delay: 1.05s }
.hs-runlist li:nth-child(5)  { animation-delay: 1.30s }
.hs-runlist li:nth-child(6)  { animation-delay: 1.55s }
.hs-runlist li:nth-child(7)  { animation-delay: 1.80s }
.hs-runlist li:nth-child(8)  { animation-delay: 2.05s }
.hs-runlist li:nth-child(9)  { animation-delay: 2.30s }
.hs-runlist li:nth-child(10) { animation-delay: 2.55s }
.hs-runlist li:nth-child(11) { animation-delay: 2.80s }
.hs-runlist li:nth-child(12) { animation-delay: 3.05s }
.hs-runlist li:nth-child(13) { animation-delay: 3.30s }
@keyframes hs-row-in {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
.hs-tick { color: var(--accent); font-size: 0.75rem; line-height: 1; }
.hs-l    { color: var(--ink); letter-spacing: 0.03em; }
.hs-h    { color: var(--ink-mute); }

.hs-quote {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.4vw, 1.4rem);
  line-height: 1.45;
  color: #f3ece0;
  margin: 0;
  text-shadow: 0 2px 28px rgba(0,0,0,0.85);
}
.hs-quote em { font-style: italic; color: var(--accent); display: inline-block; margin-top: 0.4rem; }
.hs-quote-mark {
  font-family: var(--serif);
  font-size: 3rem; line-height: 0.6; color: var(--accent-dim);
  display: block; margin-bottom: 0.3rem;
}
.hs-meta {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--rule);
  padding-top: 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  gap: 0.45rem;
  width: 100%;
  text-shadow: 0 1px 8px rgba(0,0,0,0.8);
}
.hs-meta-row { display: flex; justify-content: space-between; gap: 1rem; }
.hs-meta-l { color: var(--ink-mute); }
.hs-meta-v {
  font-family: var(--serif);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--accent-strong);
}

/* Hero caption CTAs — gold gradient primary + dark secondary */
.vc-cta {
  margin-top: 22px;
  display: flex;
  justify-content: center;
  gap: 26px;
  pointer-events: auto;
  flex-wrap: wrap;
}
.vc-btn {
  min-width: 320px;
  height: 54px;
  padding: 0 28px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease;
  white-space: nowrap;
}
.vc-btn:hover { transform: translateY(-1px); }
.vc-btn svg { flex: 0 0 auto; }
.vc-btn-arrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 18px;
  line-height: 1;
  opacity: 0.85;
}

.vc-btn-primary {
  color: #1f160c;
  background: linear-gradient(180deg, #f7dfb3, #dfbc7f);
  border: 1px solid rgba(255,240,209,0.65);
  box-shadow:
    0 0 28px rgba(198,157,89,0.18),
    inset 0 1px 0 rgba(255,255,255,0.4);
}
.vc-btn-primary:hover {
  box-shadow:
    0 0 36px rgba(198,157,89,0.28),
    inset 0 1px 0 rgba(255,255,255,0.5);
}
.vc-btn-ghost {
  color: #f2eee7;
  background: rgba(8,8,6,0.55);
  border: 1px solid rgba(198,157,89,0.48);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.vc-btn-ghost:hover {
  border-color: rgba(198,157,89,0.78);
  background: rgba(198,157,89,0.08);
}

@media (max-width: 1200px) {
  .vc-cta { flex-direction: column; align-items: center; }
  .vc-btn { min-width: 0; width: min(360px, 100%); }
}

/* ============================================================
   HERO STATS STRIP — three huge numbers right under the video.
   Sits on the centerline so the user can't miss it.
   ============================================================ */
#hero-stats {
  padding: clamp(4rem, 9vh, 7rem) var(--pad) clamp(3rem, 6vh, 4.5rem);
  background:
    radial-gradient(ellipse 70% 50% at 50% 30%, rgba(196,184,168,0.06), transparent 70%),
    var(--bg);
  border-top: 1px solid var(--rule);
  text-align: center;
  position: relative;
  z-index: 3;
}
.hsg-inner {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  position: relative;
}
.hsg-inner::before,
.hsg-inner::after {
  content: "";
  position: absolute;
  top: 18%; bottom: 18%;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--rule), transparent);
}
.hsg-inner::before { left: calc((100% - 2 * (1px + 0px)) / 3 + 4px); transform: translateX(-50%); }
.hsg-inner::after  { right: calc((100% - 2 * (1px + 0px)) / 3 + 4px); transform: translateX(50%); }
@media (max-width: 900px) {
  .hsg-inner { grid-template-columns: 1fr; gap: 2.6rem; }
  .hsg-inner::before, .hsg-inner::after { display: none; }
}

.hsg-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
}
.hsg-v {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.88;
  letter-spacing: -0.045em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.hsg-cell-zero .hsg-v {
  color: var(--accent-strong);
  position: relative;
}
.hsg-cell-zero .hsg-v::after {
  content: "";
  position: absolute;
  inset: -10% -15%;
  background: radial-gradient(circle, rgba(196,184,168,0.18), transparent 60%);
  z-index: -1;
}
.hsg-l {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  line-height: 1.5;
  max-width: 22ch;
}
.hsg-l b {
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.22em;
}

.hsg-coda {
  max-width: 880px;
  margin: clamp(2.4rem, 5vh, 3.5rem) auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.2rem, 1.9vw, 1.65rem);
  line-height: 1.4;
  color: var(--ink-dim);
}
.hsg-coda em { color: var(--accent-strong); font-style: italic; }
.hsg-mark {
  color: var(--accent);
  margin-right: 0.3rem;
}

/* ============================================================
   SELF-TEST TICKER — under the hero video
   ============================================================ */
.self-test-ticker {
  background: var(--bg);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  padding: 0.95rem 0;
  position: relative;
  z-index: 3;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stt-track {
  display: inline-flex; white-space: nowrap; gap: 2.6rem;
  animation: stt-scroll 48s linear infinite;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.stt-track span {
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.stt-track span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px rgba(196,184,168,0.4);
}
@keyframes stt-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   CAPABILITIES — 6-card animated showcase
   ============================================================ */
#capabilities {
  padding: clamp(5rem, 12vh, 9rem) var(--pad);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(196,184,168,0.06), transparent 60%),
    var(--bg);
  position: relative;
  z-index: 3;
}
#capabilities .section-head {
  max-width: 880px;
  margin: 0 auto 4rem;
  text-align: center;
}
#capabilities .section-head h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 5.4vw, 4.4rem); line-height: 1.04; letter-spacing: -0.02em; }
#capabilities .section-blurb { max-width: 60ch; margin: 1rem auto 0; }

.cap-grid {
  max-width: 1280px; margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
}
@media (max-width: 1100px) { .cap-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px)  { .cap-grid { grid-template-columns: 1fr; } }

.cap-card {
  position: relative;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 1.6rem 1.4rem 1.4rem;
  display: flex; flex-direction: column; gap: 0.85rem;
  transition: border-color 320ms var(--ease), transform 360ms var(--ease), background 320ms var(--ease);
  overflow: hidden;
}
.cap-card::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(196,184,168,0.18), transparent 50%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity 320ms var(--ease);
}
.cap-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-dim);
  background: linear-gradient(160deg, rgba(196,184,168,0.04), var(--bg-elev));
}
.cap-card:hover::before { opacity: 1; }

.cap-tag {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(196,184,168,0.06);
  border: 1px solid var(--accent-dim);
  padding: 0.32rem 0.65rem;
  border-radius: 6px;
  width: fit-content;
}
.cap-tag::before { content: "◆"; font-size: 0.5rem; }
.cap-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  line-height: 1.15; letter-spacing: -0.012em;
  color: var(--ink); margin: 0;
}
.cap-card p {
  color: var(--ink-dim); font-size: 0.92rem; line-height: 1.5; margin: 0;
}
.cap-foot {
  margin-top: auto;
  padding-top: 0.65rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
}

.cap-viz {
  position: relative;
  height: 150px;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(0,0,0,0.4), rgba(196,184,168,0.02));
  border: 1px solid var(--rule);
  overflow: hidden;
  padding: 0.7rem;
  display: flex; align-items: center; justify-content: center;
}
.cap-scan {
  position: absolute; left: 0; right: 0; height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  animation: cap-scan-y 3.6s ease-in-out infinite;
}
@keyframes cap-scan-y { 0%, 100% { top: 8% } 50% { top: 88% } }

.wave-bars {
  display: flex; align-items: center; justify-content: center;
  gap: 3px; height: 100%; width: 100%;
}
.wave-bars i {
  width: 3px; min-height: 6px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent-dim));
  border-radius: 2px;
  animation: cap-wave 1.4s ease-in-out infinite;
}
@keyframes cap-wave { 0%,100% { height: 15% } 50% { height: 85% } }

.pixel-grid {
  display: grid; grid-template-columns: repeat(14, 1fr);
  gap: 3px; width: 100%; height: 100%;
}
.pixel-grid i {
  aspect-ratio: 1; border-radius: 2px;
  background: rgba(196,184,168,0.4);
  animation: cap-pixel 4s ease-in-out infinite;
}
.pixel-grid i.warm { background: #d4a23a; opacity: 0.9; }
.pixel-grid i.dead { background: rgba(255,255,255,0.06); animation: none; }
@keyframes cap-pixel { 0%,100% { opacity: 0.25 } 50% { opacity: 0.95 } }

.touch-grid {
  display: grid; grid-template-columns: repeat(8, 1fr);
  gap: 4px; width: 100%; height: 100%;
}
.touch-grid i {
  aspect-ratio: 1; border-radius: 3px;
  background: rgba(196,184,168,0.18);
  transition: background 320ms var(--ease), box-shadow 320ms var(--ease);
}
.touch-grid i.hot {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(196,184,168,0.55);
}

.cap-viz-svg svg { width: 100%; height: 100%; }
.cap-svg-hist {
  fill: none; stroke: var(--accent-strong); stroke-width: 2.5;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: cap-hist 2.2s var(--ease-out) forwards;
}
.cap-svg-pred {
  fill: none; stroke: #d4a23a; stroke-width: 2.5;
  stroke-dasharray: 6 6;
  opacity: 0; animation: cap-fade-in 1s 2.2s var(--ease-out) forwards;
}
.cap-svg-label { font-family: var(--mono); font-size: 8.5px; fill: var(--ink-mute); letter-spacing: 0.04em; }
.cap-svg-label-amber { fill: #d4a23a; }
@keyframes cap-hist { to { stroke-dashoffset: 0; } }
@keyframes cap-fade-in { to { opacity: 1; } }

.cap-viz-rings svg { width: 100%; height: 100%; }
.ring {
  fill: none; stroke: var(--accent-dim); stroke-width: 1.4;
  transform-origin: center;
}
.ring.r0 { stroke: rgba(196,184,168,0.18); animation: ring-pulse 5s linear infinite; }
.ring.r1 { stroke: rgba(196,184,168,0.28); stroke-dasharray: 3 6; animation: ring-rot 18s linear infinite; }
.ring.r2 { stroke: rgba(196,184,168,0.42); stroke-dasharray: 8 6; animation: ring-rot 12s linear infinite reverse; }
.ring.r3 { stroke: rgba(196,184,168,0.65); }
.ring.r4 { stroke: var(--accent-strong); }
@keyframes ring-rot { to { transform: rotate(360deg) } }
@keyframes ring-pulse { 0%,100% { opacity: 0.5 } 50% { opacity: 1 } }

.thermal-grid {
  display: grid; grid-template-columns: repeat(10, 1fr);
  gap: 3px; width: 100%; height: 100%;
}
.thermal-grid i {
  aspect-ratio: 1; border-radius: 2px;
  background: rgba(196,184,168,0.10);
  animation: cap-pixel 3.6s ease-in-out infinite;
}
.thermal-grid i.warm { background: #d4a23a; }
.thermal-grid i.hot  { background: #ff8a4c; box-shadow: 0 0 8px rgba(255,138,76,0.5); }

.cap-pull {
  max-width: 880px; margin: 4rem auto 0;
  text-align: center;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  color: var(--ink);
  line-height: 1.4;
}
.cap-pull em { font-style: italic; color: var(--accent-strong); }

@media (prefers-reduced-motion: reduce) {
  .self-test-ticker .stt-track { animation: none; }
  .cap-scan, .wave-bars i, .pixel-grid i, .thermal-grid i, .ring,
  .cap-svg-hist, .cap-svg-pred { animation: none; }
  .cap-svg-hist { stroke-dashoffset: 0; }
  .cap-svg-pred { opacity: 1; }
}

/* ============================================================
   TRUST STATEMENT (Component Integrity) — Software can lie.
   Physics is harder to fake. Ported from software-can-lie.html.
   All selectors namespaced `.ci-*` to avoid colliding with other
   pages’ `.ts-` / `.corner` / `.divider` / `.headline` classes.
   ============================================================ */
#trust-statement.ci-stage {
  --ci-cream:#f2eee6;
  --ci-cream-soft:rgba(242,238,230,.76);
  --ci-gold:#c89655;
  --ci-gold2:#e7c58b;
  --ci-gold-dim:rgba(231,197,139,.45);
  --ci-serif:"Cormorant Garamond","Instrument Serif",serif;
  --ci-mono:"Roboto Mono","JetBrains Mono",monospace;
  --ci-sans:Inter, system-ui, sans-serif;

  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 7vh, 5rem) clamp(1rem, 5vw, 4rem);
  background: #050504;
  color: var(--ci-cream);
  font-family: var(--ci-sans);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
  z-index: 3;
}

.ci-artboard {
  position: relative;
  width: min(1724px, 100%);
  aspect-ratio: 1724 / 972;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(255,255,255,.042), transparent 15%),
    radial-gradient(circle at 50% 45%, rgba(200,150,85,.09), transparent 34%),
    radial-gradient(circle at 92% 61%, rgba(200,150,85,.07), transparent 24%),
    linear-gradient(90deg,#030302 0%,#070706 22%,#090807 50%,#070706 78%,#030302 100%);
  box-shadow: 0 22px 38px rgba(0,0,0,.16);
  isolation: isolate;
  border-radius: 4px;
}
.ci-artboard::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,139,.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,139,.018) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 75%);
          mask-image: radial-gradient(circle at 50% 48%, black 0%, transparent 75%);
  opacity: 0.5;
  z-index: -4;
  pointer-events: none;
}
.ci-artboard::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,.58) 100%);
  pointer-events: none;
  z-index: -3;
}
.ci-grain {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.08) .55px, transparent .55px);
  background-size: 4px 4px;
  opacity: 0.04;
  pointer-events: none;
  z-index: 2;
}

/* Corner labels */
.ci-corner {
  position: absolute;
  color: var(--ci-gold2);
  font: 600 11px/1 var(--ci-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  z-index: 5;
}
.ci-tl { left: 62px; top: 61px; }
.ci-tr { right: 62px; top: 62px; }
.ci-bl { left: 62px; bottom: 61px; }
.ci-br { right: 62px; bottom: 61px; }
.ci-corner::before, .ci-corner::after {
  content: ""; position: absolute;
  background: var(--ci-gold2);
  opacity: 0.9;
}
.ci-tl::before { left: -28px; top: -22px; width: 1px;  height: 32px; }
.ci-tl::after  { left: -28px; top: -22px; width: 32px; height: 1px;  }
.ci-tr::before { right: -28px; top: -22px; width: 1px;  height: 32px; }
.ci-tr::after  { right: -28px; top: -22px; width: 32px; height: 1px;  }
.ci-bl::before { left: -28px; bottom: -22px; width: 1px;  height: 32px; }
.ci-bl::after  { left: -28px; bottom: -22px; width: 32px; height: 1px;  }
.ci-br::before { right: -28px; bottom: -22px; width: 1px;  height: 32px; }
.ci-br::after  { right: -28px; bottom: -22px; width: 32px; height: 1px;  }
.ci-corner span { position: relative; display: inline-block; }
.ci-tl span::after, .ci-bl span::after {
  content: ""; display: block;
  width: 118px; height: 1px;
  background: linear-gradient(90deg, var(--ci-gold2), transparent);
  margin-top: 13px;
}
.ci-bl span::after { width: 126px; }
.ci-tr span::after {
  content: ""; display: block;
  width: 118px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ci-gold2));
  margin-top: 13px;
}
.ci-br span::after {
  content: ""; display: block;
  width: 154px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ci-gold2));
  margin-top: 13px;
}
.ci-tl span::before, .ci-bl span::before {
  content: ""; position: absolute;
  right: -28px; top: 21px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 10px rgba(231,197,139,.8);
}
.ci-tr span::before, .ci-br span::before {
  content: ""; position: absolute;
  left: -28px; top: 21px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 10px rgba(231,197,139,.8);
}

/* Top cube badge */
.ci-cube-badge {
  position: absolute;
  left: 50%; top: 52px;
  transform: translateX(-50%);
  width: 61px; height: 61px;
  border-radius: 50%;
  border: 1px solid var(--ci-gold-dim);
  display: grid; place-items: center;
  color: var(--ci-gold2);
  box-shadow:
    0 0 24px rgba(200,150,85,.09),
    inset 0 0 18px rgba(200,150,85,.05);
  z-index: 4;
}
.ci-cube-badge svg { width: 31px; height: 31px; }
.ci-cube-badge::after {
  content: "";
  position: absolute;
  right: -8px; top: 9px;
  width: 10px; height: 10px;
  border-top: 1px solid var(--ci-gold2);
  transform: rotate(45deg);
  opacity: 0.75;
}

/* Section title */
.ci-section-title {
  position: absolute;
  left: 50%; top: 156px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 45px;
  color: var(--ci-gold2);
  font: 500 15px/1 var(--ci-mono);
  letter-spacing: 0.54em;
  text-transform: uppercase;
  z-index: 4;
}
.ci-section-title::before, .ci-section-title::after {
  content: ""; width: 115px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ci-gold2));
}
.ci-section-title::after { background: linear-gradient(90deg, var(--ci-gold2), transparent); }
.ci-section-title i {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 10px rgba(231,197,139,.8);
}
.ci-section-title i:first-child { left: 75px; }
.ci-section-title i:last-child  { right: 75px; }

/* Background arc */
.ci-main-arc {
  position: absolute;
  left: 333px; top: 110px;
  width: 955px; height: 740px;
  border-radius: 50%;
  border: 1px solid rgba(200,150,85,.12);
  z-index: -1;
}
.ci-main-arc::after {
  content: ""; position: absolute; inset: 97px;
  border-radius: 50%;
  border: 1px solid rgba(200,150,85,.075);
}

/* Left radar */
.ci-radar-left {
  position: absolute;
  left: 24px; top: 335px;
  width: 268px; height: 268px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(200,150,85,.19) 0 1px, transparent 1px 28px);
  opacity: 0.95;
  z-index: 1;
  color: var(--ci-gold2);
}
.ci-radar-left::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,139,.25);
}
.ci-radar-left::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,139,.25);
}
.ci-wave {
  position: absolute;
  left: 50%; top: 50%;
  width: 152px; height: 58px;
  transform: translate(-50%, -50%);
}
.ci-wave svg { width: 100%; height: 100%; overflow: visible; }
.ci-wave path { filter: drop-shadow(0 0 7px rgba(231,197,139,.65)); }
.ci-radar-left .ci-dot {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 12px rgba(231,197,139,.85);
}
.ci-radar-left .ci-d1 { left: 50%; top: 0; transform: translate(-50%, -50%); }
.ci-radar-left .ci-d2 { left: 50%; bottom: 0; transform: translate(-50%, 50%); }
.ci-radar-left .ci-d3 { left: 0; top: 50%; transform: translate(-50%, -50%); }
.ci-radar-left .ci-d4 { right: 0; top: 50%; transform: translate(50%, -50%); }
.ci-side-list {
  position: absolute;
  left: 303px; top: 366px;
  color: var(--ci-gold2);
  font: 500 10px/1.2 var(--ci-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  z-index: 2;
}
.ci-side-list div { margin-bottom: 27px; }
.ci-side-list div:nth-child(3) { margin-bottom: 23px; }

/* Right blueprint */
.ci-phone-blueprint {
  position: absolute;
  right: 145px; top: 285px;
  width: 196px; height: 420px;
  border-radius: 31px;
  border: 1px solid rgba(200,150,85,.28);
  box-shadow:
    inset 0 0 0 5px rgba(200,150,85,.04),
    0 0 30px rgba(200,150,85,.06);
  z-index: 1;
  opacity: 0.7;
  background:
    linear-gradient(rgba(200,150,85,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(200,150,85,.04) 1px, transparent 1px);
  background-size: 22px 22px;
}
.ci-phone-blueprint::before {
  content: "";
  position: absolute;
  left: 20px; right: 20px; top: 70px;
  height: 64px;
  border: 1px solid rgba(200,150,85,.18);
  border-radius: 9px;
  box-shadow:
    0 91px 0 rgba(200,150,85,.045),
    0 182px 0 rgba(200,150,85,.035);
}
.ci-phone-blueprint::after {
  content: "";
  position: absolute;
  left: 31px; right: 31px; bottom: 34px;
  height: 44px;
  border: 1px solid rgba(200,150,85,.16);
  border-radius: 8px;
}
.ci-right-lines {
  position: absolute;
  right: 35px; top: 408px;
  width: 215px; height: 165px;
  z-index: 1;
  opacity: 0.7;
}
.ci-right-lines span {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, rgba(231,197,139,.45), transparent);
  margin-bottom: 31px;
}
.ci-right-dotgrid {
  position: absolute;
  right: 66px; top: 574px;
  width: 112px; height: 126px;
  background-image: radial-gradient(rgba(200,150,85,.34) 1px, transparent 1px);
  background-size: 14px 14px;
  opacity: 0.48;
}
.ci-right-target {
  position: absolute;
  right: 176px; top: 481px;
  width: 152px; height: 152px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(200,150,85,.18) 0 1px, transparent 1px 23px);
  z-index: 3;
  opacity: 0.9;
}
.ci-right-target::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,139,.25);
}
.ci-right-target::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(231,197,139,.25);
}
.ci-right-target i {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 22px rgba(231,197,139,.95), 0 0 50px rgba(200,150,85,.5);
}
.ci-right-target b {
  position: absolute;
  right: -31px; top: 50%;
  width: 7px; height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 14px rgba(231,197,139,.8);
}
.ci-phy-label {
  position: absolute;
  right: 94px; top: 741px;
  color: var(--ci-gold2);
  font: 600 11px/1.45 var(--ci-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-align: center;
  z-index: 3;
}
.ci-phy-label::before, .ci-phy-label::after {
  content: ""; position: absolute;
  width: 18px; height: 18px;
  border-color: var(--ci-gold2);
}
.ci-phy-label::before {
  left: -28px; top: -7px;
  border-left: 1px solid;
  border-top: 1px solid;
}
.ci-phy-label::after {
  right: -28px; top: -7px;
  border-right: 1px solid;
  border-top: 1px solid;
}

/* Headline */
.ci-headline {
  position: absolute;
  left: 50%; top: 187px;
  transform: translateX(-50%);
  width: 1040px;
  max-width: calc(100% - 200px);
  text-align: center;
  z-index: 4;
}
#trust-statement.ci-stage .ci-headline h1 {
  font-family: var(--ci-serif);
  font-size: clamp(44px, 5.3vw, 87px);
  line-height: 0.96;
  letter-spacing: -0.055em;
  font-weight: 500;
  color: var(--ci-cream);
  text-shadow: 0 0 22px rgba(255,255,255,.08);
  margin: 0;
}
#trust-statement.ci-stage .ci-headline h1 em {
  display: block;
  font-size: clamp(46px, 5.6vw, 92px);
  color: #d4a06b;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.062em;
  text-shadow: 0 0 20px rgba(200,150,85,.18);
}
#trust-statement.ci-stage .ci-headline h1 em span { position: relative; }
#trust-statement.ci-stage .ci-headline h1 em span::after {
  content: "";
  position: absolute;
  left: 6%; right: 6%; bottom: 11px;
  height: 7px;
  background: radial-gradient(ellipse at center, rgba(231,197,139,.55), transparent 70%);
  filter: blur(4px);
}

/* Body copy */
.ci-copy {
  position: absolute;
  left: 50%; top: 434px;
  transform: translateX(-50%);
  width: 735px;
  max-width: calc(100% - 200px);
  text-align: center;
  color: var(--ci-cream-soft);
  font: 400 clamp(15px, 1.4vw, 21px)/1.52 var(--ci-sans);
  letter-spacing: -0.015em;
  z-index: 5;
}
.ci-copy em {
  font-family: var(--ci-serif);
  font-style: italic;
  color: #d6b982;
  font-size: 1.19em;
}
.ci-copy strong { color: #d8bd8a; font-weight: 500; }

/* Divider */
.ci-divider {
  position: absolute;
  left: 50%; top: 644px;
  transform: translateX(-50%);
  width: 800px;
  max-width: 70%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231,197,139,.45), transparent);
  z-index: 5;
}
.ci-divider::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 28px; height: 10px;
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at center, var(--ci-gold2), transparent 70%);
  filter: blur(1px);
}

/* Quote */
.ci-quote {
  position: absolute;
  left: 50%; top: 687px;
  transform: translateX(-50%);
  width: 800px;
  max-width: calc(100% - 160px);
  text-align: center;
  font-family: var(--ci-serif);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.22;
  letter-spacing: -0.025em;
  font-style: italic;
  color: #c8955e;
  text-shadow: 0 0 20px rgba(200,150,85,.12);
  z-index: 5;
}
.ci-quote strong { color: #e3bd82; font-weight: 500; }

/* Bottom glow */
.ci-bottom-glow {
  position: absolute;
  left: 50%; top: 803px;
  transform: translateX(-50%);
  width: 360px; height: 22px;
  background: radial-gradient(ellipse at center, rgba(231,197,139,.85), rgba(200,150,85,.20) 40%, transparent 75%);
  filter: blur(3px);
  z-index: 4;
}

/* Bottom dots row */
.ci-bottom-dots {
  position: absolute;
  left: 50%; bottom: 21px;
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 55px;
  color: var(--ci-gold2);
  z-index: 4;
}
.ci-bottom-dots::before, .ci-bottom-dots::after {
  content: ""; width: 112px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ci-gold2), transparent);
}
.ci-bottom-dots i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ci-gold2);
  box-shadow: 0 0 10px rgba(231,197,139,.75);
}
.ci-bottom-dots b {
  width: 31px; height: 31px;
  border: 1px solid rgba(231,197,139,.36);
  border-radius: 50%;
  display: grid; place-items: center;
  font: 500 13px/1 var(--ci-serif);
}

@media (max-width: 1100px) {
  #trust-statement.ci-stage { padding: 0; background: #050504; }
  .ci-artboard {
    width: 100%;
    min-height: 100vh;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .ci-corner, .ci-radar-left, .ci-side-list,
  .ci-phone-blueprint, .ci-right-lines, .ci-right-dotgrid,
  .ci-right-target, .ci-phy-label, .ci-main-arc, .ci-bottom-dots {
    display: none;
  }
  .ci-cube-badge { top: 38px; }
  .ci-section-title { top: 120px; font-size: 11px; gap: 18px; }
  .ci-section-title::before, .ci-section-title::after { width: 60px; }
  .ci-section-title i:first-child { left: 30px; }
  .ci-section-title i:last-child  { right: 30px; }
  .ci-headline {
    position: relative;
    top: auto; left: auto; transform: none;
    width: 100%; max-width: 100%;
    padding: 160px 22px 0;
  }
  #trust-statement.ci-stage .ci-headline h1 { font-size: 50px; }
  #trust-statement.ci-stage .ci-headline h1 em { font-size: 52px; }
  .ci-copy {
    position: relative;
    top: auto; left: auto; transform: none;
    width: auto; max-width: 100%;
    padding: 20px 26px 0;
    font-size: 16px;
  }
  .ci-divider {
    position: relative;
    top: auto; left: auto; transform: none;
    width: 80%; max-width: 80%;
    margin: 34px auto;
  }
  .ci-quote {
    position: relative;
    top: auto; left: auto; transform: none;
    width: auto; max-width: 100%;
    padding: 0 28px;
    font-size: 26px;
  }
  .ci-bottom-glow { top: auto; bottom: 40px; }
}

/* ============================================================
   CREED — verification screen. Full-bleed editorial spread with
   left rail, right orbit, six proof rows, switch panel, footer.
   Ported from old-refurbished-market.html design.
   ============================================================ */
#creed.creed-screen {
  --creed-bg: #020201;
  --creed-cream: #f2efe7;
  --creed-cream-dim: rgba(242,239,231,.56);
  --creed-cream-faint: rgba(242,239,231,.22);
  --creed-gold: #c7a15d;
  --creed-gold-2: #dfc28a;
  --creed-gold-line: rgba(199,161,93,.36);
  --creed-gold-faint: rgba(199,161,93,.12);
  --creed-panel-line: rgba(199,161,93,.23);

  position: relative;
  width: 100vw;
  min-height: 100vh;
  background:
    radial-gradient(circle at 50% 5%, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(circle at 50% 51%, rgba(199,161,93,.075), transparent 35%),
    radial-gradient(circle at 90% 55%, rgba(199,161,93,.045), transparent 24%),
    linear-gradient(90deg, rgba(0,0,0,.96), rgba(6,6,4,.98) 18%, rgba(4,4,3,.98) 80%, rgba(0,0,0,.96));
  isolation: isolate;
  padding: 32px 0 28px;
  overflow: hidden;
  z-index: 3;
  color: var(--creed-cream);
  font-family: Inter, system-ui, sans-serif;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
#creed.creed-screen::before {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, transparent 0, rgba(199,161,93,.035) 1px, transparent 1px),
    linear-gradient(0deg,  transparent 0, rgba(199,161,93,.026) 1px, transparent 1px);
  background-size: 155px 155px;
  -webkit-mask-image: radial-gradient(circle at 50% 48%, black, transparent 74%);
          mask-image: radial-gradient(circle at 50% 48%, black, transparent 74%);
  pointer-events: none;
  z-index: -2;
}
#creed.creed-screen::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.58) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Brand & top-right pill */
.creed-brand {
  position: absolute; top: 32px; left: 48px;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px; line-height: 1;
  letter-spacing: .62em; font-weight: 700;
  text-transform: uppercase;
}
.creed-topright {
  position: absolute; top: 33px; right: 54px;
  display: flex; align-items: center; gap: 12px;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: .44em; text-transform: uppercase;
  white-space: nowrap;
}
.creed-tr-line {
  display: block; width: 58px; height: 1px;
  background: linear-gradient(90deg, var(--creed-gold), transparent);
  position: relative;
}
.creed-tr-line::before {
  content: ""; position: absolute; right: 7px; top: -3px;
  width: 7px; height: 7px;
  border: 1px solid var(--creed-gold);
  border-radius: 50%;
  background: #050504;
}

/* Left rail */
.creed-left-rail {
  position: absolute; left: 64px; top: 122px;
  height: 594px; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(199,161,93,.34) 20%, rgba(199,161,93,.25) 60%, transparent);
}
.creed-rail-dots {
  position: absolute; left: -2px; top: 0;
  display: flex; flex-direction: column; gap: 13px;
}
.creed-rail-dots i {
  width: 3px; height: 3px;
  background: var(--creed-gold);
  border-radius: 50%; opacity: .58;
}
.creed-rail-badge {
  position: absolute; top: 178px; left: -21px;
  width: 43px; height: 43px;
  border: 1px solid rgba(199,161,93,.45);
  border-radius: 50%;
  display: grid; place-items: center;
  background: #060604;
  box-shadow: 0 0 28px rgba(199,161,93,.1), inset 0 0 20px rgba(199,161,93,.05);
  color: var(--creed-gold);
}
.creed-rail-badge svg { width: 23px; height: 23px; }
.creed-rail-text {
  position: absolute; left: -13px; top: 316px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px; font-weight: 700;
  letter-spacing: .48em; text-transform: uppercase;
  opacity: .72; white-space: nowrap;
}

/* Right orbit */
.creed-right-orbit {
  position: absolute; right: -155px; top: 214px;
  width: 430px; height: 430px;
  border: 1px solid rgba(199,161,93,.09);
  border-radius: 50%; opacity: .8;
}
.creed-right-orbit::before {
  content: ""; position: absolute; inset: 64px;
  border: 1px solid rgba(199,161,93,.075);
  border-radius: 50%;
}
.creed-right-orbit::after {
  content: ""; position: absolute; inset: 128px;
  border: 1px solid rgba(199,161,93,.06);
  border-radius: 50%;
}
.creed-orbit-dot {
  position: absolute; left: 99px; top: 214px;
  width: 6px; height: 6px;
  background: var(--creed-gold);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(199,161,93,.86);
}
.creed-orbit-copy {
  position: absolute; left: 206px; top: 146px;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px; letter-spacing: .35em;
  line-height: 1.75; text-transform: uppercase;
  font-weight: 700;
}

/* Content wrapper */
.creed-content {
  position: relative;
  width: min(1280px, calc(100vw - 210px));
  margin: 0 auto;
  padding-top: 24px;
}

/* Hero */
.creed-hero { text-align: center; margin: 0 auto 38px; }
.creed-h1 {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-weight: 500;
  /* Sized to match the other section headlines on the page
     (Trust statement, Certificate, Verdict, Truth grid, etc. all
     max out around 72–88px). Was 106px which dominated the layout. */
  font-size: clamp(26px, 3vw, 48px);
  line-height: 1.04;
  letter-spacing: -.04em;
  color: var(--creed-cream);
  text-shadow: 0 0 30px rgba(255,255,255,.04);
  margin: 0;
}
.creed-h1-gold {
  font-style: italic;
  color: var(--creed-gold-2);
  font-weight: 500;
}
#creed .creed-sub {
  margin: 22px 0 0;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  color: rgba(242,239,231,.76);
  font-size: 20px;
  letter-spacing: -.015em;
  max-width: none;
}
#creed .creed-sub em { color: var(--creed-gold-2); font-style: italic; }

/* Proof list */
.creed-proof-list { width: min(1090px, 100%); margin: 0 auto; }
.creed-row {
  position: relative;
  height: 54px;
  display: grid;
  grid-template-columns: 90px 1fr 230px;
  align-items: center;
  border-bottom: 1px solid var(--creed-gold-line);
}
.creed-row:first-child { border-top: 1px solid var(--creed-gold-line); }
.creed-row::before, .creed-row::after {
  content: ""; position: absolute; bottom: -3px;
  width: 4px; height: 4px;
  background: var(--creed-gold);
  border-radius: 50%;
  box-shadow: 0 0 18px rgba(199,161,93,.9);
}
.creed-row::before { left: 0; }
.creed-row::after  { right: 0; }
.creed-roman { display: flex; justify-content: center; align-items: center; }
.creed-roman span {
  width: 40px; height: 40px;
  border: 1px solid rgba(199,161,93,.38);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  color: var(--creed-gold-2);
  font-size: 20px; font-style: italic; font-weight: 500;
  background: radial-gradient(circle at 35% 25%, rgba(199,161,93,.18), rgba(5,5,3,.72) 62%);
  box-shadow: inset 0 0 24px rgba(199,161,93,.045), 0 0 22px rgba(199,161,93,.055);
}
.creed-text {
  position: relative;
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: clamp(20px, 2.1vw, 34px);
  line-height: 1;
  letter-spacing: -.045em;
  color: var(--creed-cream);
  padding-left: 28px;
  white-space: nowrap;
}
.creed-text::before {
  content: ""; position: absolute;
  left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 36px;
  background: rgba(199,161,93,.36);
}
.creed-text em { font-style: italic; color: #d7c099; font-weight: 500; }
.creed-chip {
  justify-self: end;
  min-width: 232px;
  height: 33px;
  display: grid; place-items: center;
  color: var(--creed-gold);
  border: 1px solid rgba(199,161,93,.46);
  border-radius: 9px;
  background: linear-gradient(180deg, rgba(199,161,93,.115), rgba(199,161,93,.03));
  box-shadow: inset 0 0 16px rgba(199,161,93,.05), 0 0 24px rgba(199,161,93,.035);
  font-family: Inter, system-ui, sans-serif;
  text-transform: uppercase;
  font-size: 10px; font-weight: 700;
  letter-spacing: .34em;
  white-space: nowrap;
}

/* Switch */
.creed-switch {
  width: min(1150px, 100%);
  height: 196px;
  margin: 54px auto 0;
  border: 1px solid var(--creed-panel-line);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 260px;
  background: linear-gradient(90deg, rgba(255,255,255,.025), rgba(0,0,0,.12) 44%, rgba(199,161,93,.045));
  box-shadow: 0 28px 90px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.045);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.creed-panel {
  position: relative;
  padding: 43px 58px;
  border-right: 1px solid rgba(199,161,93,.2);
}
.creed-panel::before {
  content: ""; position: absolute;
  top: 0; bottom: 0; left: 58px;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(199,161,93,.14), transparent);
}
.creed-mini {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 19px;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .35em; text-transform: uppercase;
}
.creed-mini b {
  width: 23px; height: 23px;
  border: 1px solid rgba(199,161,93,.42);
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 12px; letter-spacing: 0;
  color: var(--creed-gold);
  font-weight: 500;
}
.creed-panel h2 {
  font-family: "Cormorant Garamond", "Instrument Serif", serif;
  font-size: 72px;
  line-height: .88;
  letter-spacing: -.075em;
  font-weight: 500;
  margin: 0;
}
.creed-panel-old h2 { color: rgba(242,239,231,.34); }
.creed-panel-new h2 { color: var(--creed-cream); }
.creed-panel-new h2 em {
  font-style: italic;
  color: var(--creed-gold-2);
  position: relative;
}
.creed-panel-new h2 em::after {
  content: "";
  position: absolute;
  left: 4px; right: 6px; bottom: -6px;
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(199,161,93,.85), transparent);
  border-radius: 10px;
  opacity: .72;
}

.creed-wheel-wrap {
  display: grid; place-items: center;
  position: relative;
  padding: 0 34px;
  background: rgba(199,161,93,.015);
}
.creed-wheel {
  position: relative;
  width: 172px; height: 172px;
  border: 1px solid rgba(199,161,93,.38);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: .34em;
  text-transform: uppercase;
  white-space: nowrap;
}
.creed-wheel::before {
  content: ""; position: absolute; inset: 7px;
  border: 1px dashed rgba(199,161,93,.38);
  border-left-color: transparent;
  border-bottom-color: rgba(199,161,93,.13);
  border-radius: 50%;
}

/* Footer row */
.creed-footer-row {
  margin: 24px auto 0;
  width: min(820px, 100%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(199,161,93,.12);
  padding-top: 17px;
}
.creed-foot-item {
  display: flex; gap: 13px;
  align-items: center; justify-content: center;
  border-right: 1px solid rgba(199,161,93,.18);
  color: var(--creed-gold);
}
.creed-foot-item:last-child { border-right: 0; }
.creed-foot-item svg { width: 29px; height: 29px; flex-shrink: 0; }
.creed-foot-item strong {
  display: block;
  color: var(--creed-gold);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px; letter-spacing: .25em;
  text-transform: uppercase; line-height: 1.45;
  font-weight: 700;
}
.creed-foot-item span {
  display: block;
  color: rgba(242,239,231,.5);
  font-family: Inter, system-ui, sans-serif;
  font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase;
  margin-top: 1px;
}

@media (max-width: 1150px) {
  #creed.creed-screen { padding: 32px 26px; }
  .creed-brand, .creed-topright, .creed-left-rail, .creed-right-orbit { display: none; }
  .creed-content { width: 100%; padding-top: 0; }
  .creed-row {
    grid-template-columns: 78px 1fr;
    min-height: 92px; height: auto;
    padding: 15px 0;
  }
  .creed-chip { grid-column: 2; justify-self: start; margin-top: 8px; }
  .creed-text { font-size: 42px; white-space: normal; padding-left: 24px; }
  .creed-switch { height: auto; grid-template-columns: 1fr; }
  .creed-panel {
    border-right: 0;
    border-bottom: 1px solid rgba(199,161,93,.2);
  }
  .creed-panel h2 { font-size: 64px; }
  .creed-footer-row { grid-template-columns: 1fr; gap: 18px; }
  .creed-foot-item { border-right: 0; justify-content: flex-start; }
  #creed .creed-sub { font-size: 18px; }
}


/* ============================================================
   CATEGORY STATEMENT — the manifesto break before features
   ============================================================ */
/* Category statement — ported from you-can-see-the-outside.html.
   HUD ornaments + serif headline + 4-tile proof panel. */
#category-statement.inside-stage {
  --is-cream:#f0ece3;
  --is-gold:#c69c58;
  --is-gold2:#e4c487;
  --is-serif:"Cormorant Garamond","Instrument Serif",serif;
  --is-mono:"Roboto Mono","JetBrains Mono",monospace;
  --is-sans:Inter, system-ui, sans-serif;

  position: relative;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden;
  padding: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(255,255,255,.035), transparent 16%),
    radial-gradient(circle at 50% 46%, rgba(198,156,88,.08), transparent 32%),
    radial-gradient(circle at 91% 62%, rgba(198,156,88,.07), transparent 24%),
    linear-gradient(90deg,#010101 0%,#050504 17%,#080806 50%,#050504 83%,#010101 100%);
  isolation: isolate;
  color: var(--is-cream);
  font-family: var(--is-sans);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  z-index: 3;
}
#category-statement.inside-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(228,196,135,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(228,196,135,.015) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 74%);
          mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 74%);
  opacity: 0.56;
  z-index: -3;
  pointer-events: none;
}
#category-statement.inside-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.64) 93%);
  z-index: -2;
  pointer-events: none;
}

.is-scale {
  position: relative;
  width: min(2048px, 100vw);
  min-height: 100vh;
  margin: 0 auto;
  overflow: visible;
}

/* --- Background HUD ornaments --- */
.is-center-wire {
  position: absolute; left: 50%; top: 0;
  width: 1px; height: 72px;
  background: linear-gradient(to bottom, rgba(228,196,135,.42), rgba(228,196,135,.06));
}
.is-star {
  position: absolute; left: calc(50% - 11px); top: 111px;
  width: 22px; height: 22px;
}
.is-star::before, .is-star::after {
  content: ""; position: absolute;
  background: var(--is-gold2);
  box-shadow: 0 0 18px rgba(228,196,135,.85);
}
.is-star::before { left: 10px; top: 0; width: 1px; height: 22px; }
.is-star::after  { left: 0; top: 10px; width: 22px; height: 1px; }

.is-left-plus { position: absolute; left: 42px; top: 45px; width: 17px; height: 17px; }
.is-left-plus::before, .is-left-plus::after {
  content: ""; position: absolute;
  background: var(--is-gold2);
  box-shadow: 0 0 10px rgba(228,196,135,.72);
}
.is-left-plus::before { left: 8px; width: 1px; height: 17px; }
.is-left-plus::after  { top: 8px; width: 17px; height: 1px; }

.is-left-top-line {
  position: absolute; left: 79px; top: 54px;
  width: 101px; height: 1px;
  background: linear-gradient(90deg, var(--is-gold2), transparent);
}
.is-left-dots {
  position: absolute; left: 51px; top: 89px;
  display: grid; gap: 17px;
}
.is-left-dots span {
  width: 3px; height: 3px;
  background: var(--is-gold2); border-radius: 50%;
  opacity: 0.75;
}
.is-left-label {
  position: absolute; left: 52px; top: 471px;
  font: 500 13px/1.56 var(--is-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--is-gold2);
}
.is-left-label::after {
  content: "";
  display: block;
  width: 39px; height: 2px;
  background: var(--is-gold2);
  margin-top: 15px;
  box-shadow: 0 0 12px rgba(228,196,135,.52);
}
.is-left-bracket {
  position: absolute; left: 52px; top: 552px;
  width: 24px; height: 24px;
  border-left: 1px solid rgba(228,196,135,.58);
  border-bottom: 1px solid rgba(228,196,135,.58);
}
.is-tiny-plus-left {
  position: absolute; left: 204px; top: 520px;
  width: 14px; height: 14px; opacity: 0.5;
}
.is-tiny-plus-left::before, .is-tiny-plus-left::after {
  content: ""; position: absolute;
  background: rgba(228,196,135,.55);
}
.is-tiny-plus-left::before { left: 7px; width: 1px; height: 14px; }
.is-tiny-plus-left::after  { top: 7px; width: 14px; height: 1px; }

.is-right-label {
  position: absolute; right: 58px; top: 218px;
  text-align: right;
  font: 500 13px/1.58 var(--is-mono);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--is-gold2);
}
.is-right-label::after {
  content: "";
  display: block;
  width: 36px; height: 2px;
  background: var(--is-gold2);
  margin: 16px 0 0 auto;
  box-shadow: 0 0 10px rgba(228,196,135,.46);
}
.is-right-vline {
  position: absolute; right: 49px; top: 305px;
  width: 1px; height: 666px;
  background: linear-gradient(to bottom, rgba(228,196,135,.42), rgba(228,196,135,.15), rgba(228,196,135,.42));
}
.is-right-hline {
  position: absolute; right: 49px; bottom: 57px;
  width: 190px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--is-gold2));
}
.is-right-plus {
  position: absolute; right: 41px; bottom: 49px;
  width: 17px; height: 17px;
}
.is-right-plus::before, .is-right-plus::after {
  content: ""; position: absolute;
  background: var(--is-gold2);
  box-shadow: 0 0 10px rgba(228,196,135,.72);
}
.is-right-plus::before { left: 8px; width: 1px; height: 17px; }
.is-right-plus::after  { top: 8px; width: 17px; height: 1px; }
.is-right-dots {
  position: absolute; right: 49px; bottom: 85px;
  display: grid; gap: 8px;
}
.is-right-dots span {
  width: 3px; height: 3px;
  background: var(--is-gold2);
  border-radius: 50%;
}

.is-corner1 {
  position: absolute; left: 40%; top: 177px;
  width: 10px; height: 10px;
  border-left: 1px solid rgba(228,196,135,.55);
  border-top: 1px solid rgba(228,196,135,.55);
}
.is-corner2 {
  position: absolute; right: 40%; top: 177px;
  width: 10px; height: 10px;
  border-right: 1px solid rgba(228,196,135,.55);
  border-top: 1px solid rgba(228,196,135,.55);
}
.is-tiny-plus-top {
  position: absolute; right: 80px; top: 65px;
  width: 15px; height: 15px; opacity: 0.45;
}
.is-tiny-plus-top::before, .is-tiny-plus-top::after {
  content: ""; position: absolute;
  background: rgba(228,196,135,.55);
}
.is-tiny-plus-top::before { left: 7px; width: 1px; height: 15px; }
.is-tiny-plus-top::after  { top: 7px; width: 15px; height: 1px; }

.is-orbit {
  position: absolute; right: -178px; top: 252px;
  width: 586px; height: 586px;
  border: 1px solid rgba(198,156,88,.13);
  border-radius: 50%;
}
.is-orbit::before {
  content: ""; position: absolute; inset: 76px;
  border: 1px solid rgba(198,156,88,.10);
  border-radius: 50%;
}
.is-orbit::after {
  content: ""; position: absolute; inset: 150px;
  border: 1px solid rgba(198,156,88,.085);
  border-radius: 50%;
}
.is-radar {
  position: absolute; right: -24px; top: 565px;
  width: 222px; height: 222px;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(198,156,88,.16) 0 1px, transparent 1px 22px);
  opacity: 0.88;
}
.is-radar::before {
  content: ""; position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(228,196,135,.24);
}
.is-radar::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(228,196,135,.24);
}
.is-radar span {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--is-gold2);
  box-shadow: 0 0 24px rgba(228,196,135,.95), 0 0 60px rgba(198,156,88,.5);
}

/* --- Content --- */
.is-content {
  position: relative;
  width: min(1544px, calc(100vw - 120px));
  text-align: center;
  padding-top: 180px;
  margin: 0 auto 80px;
}
.is-kicker {
  font: 400 15px/1 var(--is-mono);
  letter-spacing: 0.54em;
  text-transform: uppercase;
  color: var(--is-gold2);
  margin-bottom: 35px;
  transform: translateX(0.27em);
}
#category-statement.inside-stage .is-headline {
  font-family: var(--is-serif);
  font-size: clamp(46px, 6.4vw, 93px);
  line-height: 0.96;
  letter-spacing: -0.056em;
  font-weight: 500;
  color: var(--is-cream);
  text-shadow: 0 0 22px rgba(255,255,255,.065);
  margin: 0;
}
#category-statement.inside-stage .is-headline em {
  display: block;
  margin-top: 8px;
  color: #dbc397;
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.06em;
}

.is-shine {
  position: relative;
  width: min(1260px, 82vw);
  height: 1px;
  margin: 25px auto 39px;
  background: linear-gradient(90deg, transparent, rgba(228,196,135,.34), transparent);
}
.is-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 165px; height: 13px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228,196,135,.95), rgba(198,156,88,.25) 38%, transparent 76%);
  filter: blur(2px);
}
.is-shine::after {
  content: "";
  position: absolute;
  left: 50%; top: -3px;
  transform: translateX(-50%);
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--is-gold2);
  box-shadow: 0 0 18px rgba(228,196,135,.88);
}

.is-intro {
  width: min(930px, 88vw);
  margin: 0 auto;
  color: rgba(238,233,223,.74);
  font: 400 clamp(17px, 1.6vw, 25px) / 1.52 var(--is-sans);
  letter-spacing: -0.021em;
  text-align: center;
}
.is-intro strong {
  color: #e8d0a0;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgba(228,196,135,.56);
  text-shadow: 0 0 14px rgba(228,196,135,.12);
}

/* Proof panel — 4 cells, beveled corners, top/bottom rules + glow */
.is-proof-panel {
  position: relative;
  width: min(1470px, calc(100vw - 280px));
  height: 245px;
  margin: 57px auto 0;
  border-top: 1px solid rgba(228,196,135,.48);
  border-bottom: 1px solid rgba(228,196,135,.48);
  background: linear-gradient(180deg, rgba(15,15,13,.74), rgba(8,8,7,.62));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    0 24px 90px rgba(0,0,0,.38);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.is-proof-panel::before, .is-proof-panel::after {
  content: ""; position: absolute;
  top: -1px; bottom: -1px;
  width: 38px;
  pointer-events: none;
  border-color: rgba(228,196,135,.74);
}
.is-proof-panel::before {
  left: -1px;
  border-left: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
  clip-path: polygon(31px 0, 100% 0, 100% 100%, 31px 100%, 0 calc(100% - 18px), 0 18px);
}
.is-proof-panel::after {
  right: -1px;
  border-right: 1px solid;
  border-top: 1px solid;
  border-bottom: 1px solid;
  clip-path: polygon(0 0, calc(100% - 31px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 31px) 100%, 0 100%);
}
.is-panel-glow-top {
  position: absolute;
  left: 49%; top: -3px;
  width: 112px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228,196,135,.82), transparent 72%);
  filter: blur(1px);
}
.is-panel-glow-bottom {
  position: absolute;
  left: 49%; bottom: -4px;
  width: 120px; height: 8px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(228,196,135,.88), transparent 72%);
  filter: blur(1px);
}

.is-proof-item {
  height: 168px;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  border-right: 1px solid rgba(228,196,135,.16);
  padding: 0 42px;
}
.is-proof-item:last-child { border-right: 0; }
.is-icon {
  width: 82px; height: 82px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 23px;
  color: var(--is-gold2);
  border: 1px dashed rgba(228,196,135,.55);
  box-shadow:
    0 0 28px rgba(198,156,88,.08),
    inset 0 0 18px rgba(198,156,88,.05);
}
.is-icon svg { width: 43px; height: 43px; }
.is-proof-item p {
  font-family: var(--is-serif);
  font-size: clamp(22px, 2.2vw, 31px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--is-cream);
}
.is-proof-item em {
  color: var(--is-gold2);
  font-style: italic;
}

.is-bottom-caption {
  display: inline-flex;
  align-items: center;
  gap: 24px;
  margin-top: 40px;
  color: var(--is-gold2);
  font: 400 14px/1 var(--is-mono);
  letter-spacing: 0.52em;
  text-transform: uppercase;
  transform: translateX(0.26em);
}
.is-bottom-caption::before, .is-bottom-caption::after {
  content: "";
  width: 8px; height: 8px;
  border-color: rgba(228,196,135,.56);
}
.is-bottom-caption::before { border-left: 1px solid; border-bottom: 1px solid; }
.is-bottom-caption::after  { border-right: 1px solid; border-bottom: 1px solid; }
.is-small-under {
  width: 27px; height: 1px;
  background: var(--is-gold2);
  margin: 25px auto 0;
  box-shadow: 0 0 12px rgba(228,196,135,.48);
}

@media (max-width: 1100px) {
  .is-center-wire, .is-star, .is-left-plus, .is-left-top-line, .is-left-dots,
  .is-left-label, .is-left-bracket, .is-tiny-plus-left, .is-right-label,
  .is-right-vline, .is-right-hline, .is-right-plus, .is-right-dots,
  .is-corner1, .is-corner2, .is-tiny-plus-top, .is-orbit, .is-radar {
    display: none;
  }
  .is-content { width: 100%; padding: 90px 22px 0; }
  .is-proof-panel { width: calc(100% - 44px); }
}
@media (max-width: 720px) {
  .is-kicker { font-size: 11px; letter-spacing: 0.32em; }
  #category-statement.inside-stage .is-headline { font-size: 42px; }
  .is-intro { font-size: 16px; }
  .is-shine { width: 90%; }
  .is-proof-panel {
    height: auto;
    grid-template-columns: 1fr;
    margin-top: 42px;
  }
  .is-proof-item {
    border-right: 0;
    border-bottom: 1px solid rgba(228,196,135,.16);
    height: 190px;
  }
  .is-proof-item:last-child { border-bottom: 0; }
  .is-bottom-caption { font-size: 11px; letter-spacing: 0.32em; gap: 14px; }
}

/* Dotted-underline term — visual cue for technical phrases */
.term {
  color: var(--ink);
  border-bottom: 1px dotted var(--accent-dim);
  padding-bottom: 1px;
  cursor: help;
}

/* hs-split — meta line addition */
.hs-split-meta {
  margin: 1.2rem 0 0;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.hs-new .hs-split-meta { color: var(--accent); }
.hs-headline em { font-style: italic; color: var(--accent-strong); }

/* ============================================================
   FEATURE SECTIONS — full-width alternating text + visual.
   The marquee marketing sections (acoustic, battery, display,
   touch, optics+silicon). Each owns ~80vh of real estate.
   ============================================================ */
/* ============================================================
   FEATURES / LAB-STAGE — ported from wwhole-laboratory.html.
   "A whole laboratory, running inside the phone." Six animated
   cards (acoustic / battery / display / haptic / optics / thermal)
   each with their own live viz. Namespaced `.lab-*`.
   ============================================================ */
#features-grid.lab-stage {
  --lab-cream:#f4efe7;
  --lab-soft:rgba(244,239,231,.72);
  --lab-muted:rgba(244,239,231,.48);
  --lab-gold:#c89150;
  --lab-gold2:#e7c58d;
  --lab-gold3:#ffd79b;
  --lab-orange:#ef7f4a;
  --lab-green:#86e39c;
  --lab-serif:"Cormorant Garamond","Instrument Serif",serif;
  --lab-mono:"Roboto Mono","JetBrains Mono",monospace;
  --lab-sans:Inter, system-ui, sans-serif;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(3rem, 7vh, 5rem) clamp(1rem, 3vw, 3rem) clamp(4rem, 9vh, 6rem);
  background:
    radial-gradient(circle at 50% 10%, rgba(244,239,231,.035), transparent 16%),
    radial-gradient(circle at 50% 46%, rgba(231,197,141,.075), transparent 34%),
    linear-gradient(90deg,#010101 0%,#050504 18%,#080806 50%,#050504 82%,#010101 100%);
  isolation: isolate;
  color: var(--lab-cream);
  font-family: var(--lab-sans);
  z-index: 3;
}
#features-grid.lab-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(231,197,141,.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(231,197,141,.010) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 76%);
          mask-image: radial-gradient(circle at 50% 46%, black 0%, transparent 76%);
  opacity: 0.55;
  z-index: -4;
  pointer-events: none;
}
#features-grid.lab-stage::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.76) 100%);
  z-index: -3;
  pointer-events: none;
}

.lab-frame {
  position: absolute;
  inset: 34px;
  border: 1px solid rgba(231,197,141,.15);
  opacity: 0.45;
  pointer-events: none;
}
.lab-corner {
  position: absolute;
  width: 64px; height: 64px;
  z-index: 2;
  pointer-events: none;
}
.lab-corner::before, .lab-corner::after {
  content: "";
  position: absolute;
  background: var(--lab-gold2);
  box-shadow: 0 0 10px rgba(231,197,141,.45);
}
.lab-corner.lab-tl { left: 34px; top: 34px; }
.lab-corner.lab-tr { right: 34px; top: 34px; }
.lab-corner.lab-bl { left: 34px; bottom: 34px; }
.lab-corner.lab-br { right: 34px; bottom: 34px; }
.lab-corner.lab-tl::before, .lab-corner.lab-bl::before { left: 0; width: 1px; height: 38px; }
.lab-corner.lab-tl::after,  .lab-corner.lab-bl::after  { left: 0; width: 38px; height: 1px; }
.lab-corner.lab-tr::before, .lab-corner.lab-br::before { right: 0; width: 1px; height: 38px; }
.lab-corner.lab-tr::after,  .lab-corner.lab-br::after  { right: 0; width: 38px; height: 1px; }
.lab-corner.lab-tl::before, .lab-corner.lab-tr::before { top: 0; }
.lab-corner.lab-tl::after,  .lab-corner.lab-tr::after  { top: 0; }
.lab-corner.lab-bl::before, .lab-corner.lab-br::before { bottom: 0; }
.lab-corner.lab-bl::after,  .lab-corner.lab-br::after  { bottom: 0; }

.lab-orbit {
  position: absolute;
  border-radius: 50%;
  opacity: 0.45;
  pointer-events: none;
}
.lab-o1 {
  left: -190px; top: 120px;
  width: 560px; height: 560px;
  border: 1px solid rgba(231,197,141,.08);
}
.lab-o1::before {
  content: ""; position: absolute; inset: 82px;
  border: 1px dashed rgba(231,197,141,.07);
  border-radius: 50%;
}
.lab-o2 {
  right: -150px; top: 190px;
  width: 520px; height: 520px;
  background: repeating-radial-gradient(circle, rgba(231,197,141,.08) 0 1px, transparent 1px 34px);
}

.lab-spark {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--lab-gold3);
  box-shadow: 0 0 17px rgba(255,215,155,.9);
  animation: lab-twinkle 3.2s ease-in-out infinite;
}
.lab-s1 { left: 16%; top: 18%; }
.lab-s2 { right: 18%; top: 23%; animation-delay: .6s; }
.lab-s3 { left: 23%; bottom: 22%; animation-delay: 1.1s; }
.lab-s4 { right: 20%; bottom: 20%; animation-delay: 1.7s; }
.lab-s5 { left: 50%; top: 51%; animation-delay: 2.2s; }

/* Header */
.lab-header {
  position: relative;
  z-index: 4;
  text-align: center;
  margin: 0 auto clamp(2.4rem, 5vh, 3.4rem);
  max-width: 900px;
}
.lab-eyebrow {
  font: 500 10px/1 var(--lab-mono);
  letter-spacing: 0.45em;
  text-transform: uppercase;
  color: rgba(244,239,231,.52);
  margin-bottom: 18px;
}
#features-grid.lab-stage .lab-headline {
  font-family: var(--lab-serif);
  font-size: clamp(40px, 5vw, 86px);
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-weight: 500;
  color: var(--lab-cream);
  text-shadow: 0 0 28px rgba(255,255,255,.06);
  margin: 0;
}
#features-grid.lab-stage .lab-headline em {
  font-style: italic;
  color: #d7b889;
  font-weight: 500;
}
.lab-sub {
  margin: 20px auto 0;
  max-width: 630px;
  color: rgba(244,239,231,.60);
  font-size: clamp(13px, 1.05vw, 14px);
  line-height: 1.55;
}
.lab-shine {
  width: min(520px, 70vw);
  height: 1px;
  margin: 24px auto 0;
  background: linear-gradient(90deg, transparent, rgba(231,197,141,.58), transparent);
  position: relative;
}
.lab-shine::before {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 150px; height: 13px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.85), rgba(201,145,80,.22) 42%, transparent 76%);
  filter: blur(2px);
}

/* Cards grid (3 × 2) */
.lab-cards {
  position: relative;
  z-index: 4;
  width: min(1040px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lab-card {
  min-height: 430px;
  border: 1px solid rgba(231,197,141,.30);
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(17,17,14,.84), rgba(7,7,6,.72));
  box-shadow:
    0 22px 65px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.035);
  padding: 22px 20px 60px;
  position: relative;
  overflow: hidden;
}
.lab-card::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,215,155,.68), transparent);
  opacity: 0.8;
}
.lab-card::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -5px;
  transform: translateX(-50%);
  width: 120px; height: 16px;
  background: radial-gradient(ellipse at center, rgba(255,215,155,.5), transparent 72%);
  filter: blur(2px);
}

.lab-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 14px;
  border-bottom: 1px dashed rgba(231,197,141,.14);
  margin-bottom: 17px;
}
.lab-name {
  font: 600 10px/1 var(--lab-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(244,239,231,.62);
  display: inline-flex;
  align-items: center;
}
.lab-num {
  font-family: var(--lab-serif);
  font-style: italic;
  font-size: 20px;
  color: var(--lab-gold2);
  margin-right: 10px;
}
.lab-status {
  height: 20px;
  border: 1px solid rgba(244,239,231,.18);
  border-radius: 999px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 8px/1 var(--lab-mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(244,239,231,.55);
}
.lab-status i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--lab-gold3);
  box-shadow: 0 0 10px rgba(255,215,155,.75);
}
.lab-model {
  display: inline-flex;
  height: 25px;
  border: 1px solid rgba(244,239,231,.16);
  border-radius: 4px;
  padding: 0 11px;
  align-items: center;
  font: 600 8px/1 var(--lab-mono);
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: rgba(244,239,231,.60);
  margin-bottom: 18px;
}
.lab-model::before {
  content: "\2022";
  margin-right: 8px;
  color: var(--lab-gold2);
}
#features-grid.lab-stage .lab-card h2 {
  font-family: var(--lab-serif);
  font-size: clamp(20px, 1.9vw, 24px);
  line-height: 1.05;
  letter-spacing: -0.035em;
  font-weight: 500;
  margin: 0 0 14px;
  color: var(--lab-cream);
}
#features-grid.lab-stage .lab-card h2 em {
  font-style: italic;
  color: #d8b98a;
}
.lab-card p {
  font-size: 12px;
  line-height: 1.58;
  color: rgba(244,239,231,.60);
  margin: 0 0 14px;
}
.lab-viz {
  height: 132px;
  border: 1px solid rgba(244,239,231,.10);
  border-radius: 7px;
  background: rgba(0,0,0,.24);
  position: relative;
  overflow: hidden;
  margin: 14px 0 12px;
}
.lab-note {
  border-left: 1px solid rgba(231,197,141,.55);
  padding-left: 12px;
  font-family: var(--lab-serif);
  font-style: italic;
  font-size: clamp(13px, 1.1vw, 15px);
  line-height: 1.25;
  color: #d8b98a;
  margin-top: 8px;
}
.lab-footer {
  position: absolute;
  left: 20px; right: 20px;
  bottom: 16px;
  border-top: 1px dashed rgba(231,197,141,.12);
  padding-top: 12px;
  font: 600 8px/1 var(--lab-mono);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(244,239,231,.28);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Card 01 — waveform */
.lab-wave-viz {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 24px 12px;
}
.lab-bar {
  width: 2px;
  background: rgba(244,239,231,.75);
  height: 24px;
  animation: lab-wave 1.15s ease-in-out infinite;
}
.lab-bar:nth-child(2n) { animation-delay: .08s; }
.lab-bar:nth-child(3n) { animation-delay: .16s; }
.lab-bar:nth-child(4n) { animation-delay: .24s; }
.lab-bar:nth-child(5n) { animation-delay: .32s; }

/* Card 02 — battery graph */
.lab-graph svg {
  position: absolute;
  inset: 16px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
}
.lab-graph .lab-solid {
  stroke: #f2eee6;
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 360;
  animation: lab-draw 3.2s ease-in-out infinite;
}
.lab-graph .lab-dash {
  stroke: var(--lab-gold);
  stroke-width: 2;
  fill: none;
  stroke-dasharray: 5 7;
  animation: lab-dash 3s linear infinite;
}
.lab-graph .lab-dot {
  fill: var(--lab-gold3);
  filter: drop-shadow(0 0 8px rgba(255,215,155,.8));
  animation: lab-pulse 1.5s ease-in-out infinite;
}

/* Card 03 — pixel fatigue grid */
.lab-pixels {
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 4px;
  padding: 14px;
}
.lab-px {
  background: rgba(244,239,231,.18);
  border-radius: 2px;
  aspect-ratio: 1;
}
.lab-px-hot {
  background: var(--lab-gold);
  box-shadow: 0 0 10px rgba(201,145,80,.6);
  animation: lab-blink 1.8s ease-in-out infinite;
}
.lab-px-mid { background: rgba(244,239,231,.38); }

/* Card 04 — haptic grid */
.lab-haptic {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  padding: 18px;
}
.lab-haptic i {
  border-radius: 4px;
  background: rgba(244,239,231,.16);
  aspect-ratio: 1;
  animation: lab-touch 2.4s ease-in-out infinite;
}
.lab-haptic i:nth-child(7n) {
  background: rgba(244,239,231,.82);
  box-shadow: 0 0 16px rgba(244,239,231,.6);
}
.lab-haptic i:nth-child(11n) {
  background: var(--lab-gold3);
  box-shadow: 0 0 16px rgba(255,215,155,.72);
}

/* Card 05 — radar */
.lab-radar {
  position: absolute;
  inset: 0;
  background: repeating-radial-gradient(circle at 50% 54%, rgba(231,197,141,.15) 0 1px, transparent 1px 31px);
}
.lab-radar::before {
  content: "";
  position: absolute;
  left: 50%; top: 0; bottom: 0;
  width: 1px;
  background: rgba(231,197,141,.18);
}
.lab-radar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 54%;
  height: 1px;
  background: rgba(231,197,141,.18);
}
.lab-radar .lab-sweep {
  position: absolute;
  left: 50%; top: 54%;
  width: 110px; height: 1px;
  background: linear-gradient(90deg, var(--lab-gold2), transparent);
  transform-origin: left;
  animation: lab-sweep 3s linear infinite;
}
.lab-radar .lab-target {
  position: absolute;
  left: 50%; top: 54%;
  width: 12px; height: 12px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px solid rgba(244,239,231,.75);
  box-shadow: 0 0 12px rgba(244,239,231,.5);
}

/* Card 06 — thermal */
.lab-thermal {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4px;
  padding: 16px;
}
.lab-thermal i {
  aspect-ratio: 1;
  border-radius: 2px;
  background: rgba(244,239,231,.08);
}
.lab-thermal i:nth-child(n+40):nth-child(-n+55) {
  background: var(--lab-gold);
  animation: lab-heat 2s ease-in-out infinite;
}
.lab-thermal i:nth-child(n+52):nth-child(-n+66) {
  background: var(--lab-orange);
  animation: lab-heat 2s ease-in-out infinite reverse;
}

/* Keyframes */
@keyframes lab-wave { 0%,100% { height: 24px; opacity: .45; } 50% { height: 70px; opacity: .95; } }
@keyframes lab-draw { 0% { stroke-dashoffset: 360; } 45%,70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -360; } }
@keyframes lab-dash { to { stroke-dashoffset: -60; } }
@keyframes lab-pulse { 0%,100% { r: 4; opacity: .65; } 50% { r: 6; opacity: 1; } }
@keyframes lab-blink { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes lab-touch { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes lab-sweep { to { transform: rotate(360deg); } }
@keyframes lab-heat { 0%,100% { filter: none; } 50% { filter: brightness(1.35); box-shadow: 0 0 10px rgba(239,127,74,.45); } }
@keyframes lab-twinkle { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 980px) {
  #features-grid.lab-stage { padding: 60px 20px; }
  .lab-frame, .lab-corner, .lab-orbit, .lab-spark { display: none; }
  .lab-cards { grid-template-columns: 1fr; }
  .lab-card { min-height: 390px; }
  .lab-header { margin-bottom: 30px; }
  #features-grid.lab-stage .lab-headline { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  .lab-bar, .lab-graph .lab-solid, .lab-graph .lab-dash, .lab-graph .lab-dot,
  .lab-px-hot, .lab-haptic i, .lab-radar .lab-sweep,
  .lab-thermal i, .lab-spark {
    animation: none !important;
  }
}

/* ============================================================
   Legacy `#features-grid` fallback — keeps the stage's outer
   `<section>` styled even before the inline `.lab-stage` class
   loads. Harmless: gets visually replaced by `#features-grid.lab-stage`.
   ============================================================ */
#features-grid {
  position: relative;
  padding: clamp(5rem, 11vh, 9rem) var(--pad) clamp(5rem, 11vh, 9rem);
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(196,184,168,0.06), transparent 65%),
    var(--bg);
  z-index: 3;
}

.fg-head {
  max-width: 880px;
  margin: 0 auto clamp(3rem, 6vh, 4.4rem);
  text-align: center;
}
.fg-eyebrow {
  display: inline-flex; align-items: center; gap: 0.9rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin: 0 0 1.2rem;
}
.fg-eyebrow-bar {
  display: inline-block; width: clamp(28px, 5vw, 60px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-dim) 50%, transparent);
}
.fg-title {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.04; letter-spacing: -0.022em;
  margin: 0 0 1rem;
}
.fg-title em { font-style: italic; color: var(--accent-strong); }
.fg-sub {
  font-family: var(--serif);
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 680px;
  margin: 0 auto;
}

/* The 3×2 matrix */
.fg-grid {
  max-width: 1320px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1rem, 1.8vw, 1.6rem);
}
@media (max-width: 1100px) {
  .fg-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .fg-grid { grid-template-columns: 1fr; }
}

/* Card */
.fg-card {
  position: relative;
  background: linear-gradient(165deg, #14110b, #0a0a0a);
  border: 1px solid rgba(196,184,168,0.18);
  border-radius: 16px;
  padding: clamp(1.2rem, 1.6vw, 1.6rem);
  display: flex; flex-direction: column;
  gap: 0.85rem;
  overflow: hidden;
  transition: border-color 320ms var(--ease), transform 320ms var(--ease-out), box-shadow 320ms var(--ease);
}
.fg-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 16px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(196,184,168,0.32), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.fg-card:hover {
  border-color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 28px 60px -28px rgba(0,0,0,0.75);
}

/* Header bar — number · domain · live status */
.fgc-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(196,184,168,0.18);
}
.fgc-num {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--accent-strong);
  line-height: 1;
}
.fgc-domain {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-soft);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fgc-status {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 0.28rem 0.55rem;
  border: 1px solid rgba(196,184,168,0.22);
  border-radius: 999px;
  background: rgba(196,184,168,0.03);
}
.fgc-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(196,184,168,0.7);
  animation: hs-pulse-dot 2.2s infinite;
}

/* Headline */
.fgc-h {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 1.55vw, 1.55rem);
  line-height: 1.1;
  letter-spacing: -0.014em;
  margin: 0.1rem 0 0;
  color: var(--ink);
}
.fgc-h em { font-style: italic; color: var(--accent-strong); }

/* Body */
.fgc-body {
  font-family: var(--serif);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 0;
}
.fgc-body em { font-style: italic; color: var(--accent-strong); }

/* Live visualisation panel */
.fgc-viz {
  position: relative;
  height: clamp(140px, 18vh, 180px);
  border-radius: 10px;
  background:
    radial-gradient(ellipse 70% 50% at 50% 50%, rgba(196,184,168,0.05), transparent 70%),
    rgba(8,7,5,0.55);
  border: 1px solid rgba(196,184,168,0.12);
  padding: 0.9rem 1rem;
  overflow: hidden;
  display: flex; flex-direction: column;
}
.fgc-viz-svg { padding: 0.6rem 0.4rem; }
.fgc-viz-rings { padding: 0; }
.fgc-viz-rings svg { width: 100%; height: 100%; }

/* Punch line */
.fgc-punch {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(0.98rem, 1.1vw, 1.1rem);
  line-height: 1.4;
  color: var(--ink);
  border-left: 2px solid var(--accent);
  padding-left: 0.85rem;
  margin: 0;
}
.fgc-punch em { color: var(--accent-strong); font-style: italic; }

/* Card footer — caps spec line */
.fgc-foot {
  margin: auto 0 0;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(196,184,168,0.18);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Grid footer */
.fg-footer {
  max-width: 1320px;
  margin: clamp(2.4rem, 4.4vh, 3.2rem) auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.fg-footer b { color: var(--accent-strong); font-weight: 500; }
.fg-footer-arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--accent-dim);
  color: var(--accent-strong);
  animation: vsc-bob 2.4s var(--ease) infinite;
}

.model-tag {
  display: inline-flex; align-items: center; gap: 0.55rem;
  width: fit-content;
  font-family: var(--mono); font-size: 0.62rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--accent);
  background: rgba(196,184,168,0.06);
  border: 1px solid var(--accent-dim);
  border-radius: 6px;
  padding: 0.38rem 0.65rem;
}
.model-tag::before { content: "◆"; font-size: 0.5rem; }

/* Legacy aliases — kept so the JS visualisation modules still inflate */
.big-panel { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.bp-scan {
  position: absolute; left: 0; right: 0; height: 1.8px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.55;
  animation: bp-scan-y 4.2s ease-in-out infinite;
}
@keyframes bp-scan-y { 0%, 100% { top: 8% } 50% { top: 88% } }

.bp-foot {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-align: center;
}

/* Big waveform — taller and denser than the small viz */
.big-wave {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  gap: 4px;
  padding: 1rem 0;
}
.big-wave i {
  width: 4px; min-height: 8px;
  background: linear-gradient(180deg, var(--accent-strong), var(--accent-dim));
  border-radius: 2px;
  animation: cap-wave 1.4s ease-in-out infinite;
}

/* Big pixel grid */
.big-pixel {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(18, 1fr);
  gap: 4px;
  padding: 0.4rem 0 1rem;
}
.big-pixel i {
  aspect-ratio: 1; border-radius: 2px;
  background: rgba(196,184,168,0.42);
  animation: cap-pixel 4s ease-in-out infinite;
}
.big-pixel i.warm { background: #d4a23a; opacity: 0.95; }
.big-pixel i.dead { background: rgba(255,255,255,0.06); animation: none; }

/* Big touch grid */
.big-touch {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  padding: 0.6rem 0 1rem;
}
.big-touch i {
  aspect-ratio: 1; border-radius: 4px;
  background: rgba(196,184,168,0.18);
  transition: background 320ms var(--ease), box-shadow 320ms var(--ease);
}
.big-touch i.hot {
  background: var(--accent);
  box-shadow: 0 0 18px rgba(196,184,168,0.6);
}

/* Big SVG — battery */
.big-svg { width: 100%; flex: 1; max-height: 100%; }
.bp-svg-hist {
  fill: none; stroke: var(--accent-strong); stroke-width: 2.5;
  stroke-dasharray: 320; stroke-dashoffset: 320;
  animation: cap-hist 2.4s var(--ease-out) forwards;
}
.bp-svg-pred {
  fill: none; stroke: #d4a23a; stroke-width: 2.5;
  stroke-dasharray: 6 6;
  opacity: 0; animation: cap-fade-in 1s 2.4s var(--ease-out) forwards;
}
.bp-svg-label { font-family: var(--mono); font-size: 9.5px; fill: var(--ink-mute); letter-spacing: 0.04em; }
.bp-svg-label-amber { fill: #d4a23a; }

/* Dual feature row (camera + thermal) */
.feat-dual { padding-bottom: clamp(6rem, 14vh, 10rem); }
.dual-grid {
  max-width: 1240px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.25rem, 2.6vw, 2rem);
}
@media (max-width: 900px) { .dual-grid { grid-template-columns: 1fr; } }
.dual-card {
  position: relative;
  background: linear-gradient(165deg, #14110b, #0a0a0a);
  border: 1px solid var(--rule);
  border-radius: 18px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  display: flex; flex-direction: column; gap: 1rem;
  overflow: hidden;
}
.dual-card::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px;
  padding: 1px;
  background: linear-gradient(160deg, rgba(196,184,168,0.22), transparent 55%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.dual-card h3 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 1.95rem);
  line-height: 1.1; letter-spacing: -0.016em;
  margin: 0.3rem 0 0;
}
.dual-card h3 em { font-style: italic; color: var(--accent-strong); }
.dual-card p {
  color: var(--ink-dim);
  font-size: 0.98rem;
  line-height: 1.6;
  margin: 0;
}
.dual-viz {
  height: 170px;
  display: flex; align-items: center; justify-content: center;
  margin: 0.6rem 0;
}
.dual-viz svg { width: 100%; height: 100%; }
.dual-punch {
  margin-top: auto !important;
  border-left: 2px solid var(--accent);
  padding-left: 1rem;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
}

/* Big thermal grid */
.big-thermal {
  width: 100%; height: 100%;
  display: grid; grid-template-columns: repeat(12, 1fr);
  gap: 3px;
}
.big-thermal i {
  aspect-ratio: 1; border-radius: 2px;
  background: rgba(196,184,168,0.10);
  animation: cap-pixel 3.6s ease-in-out infinite;
}
.big-thermal i.warm { background: #d4a23a; }
.big-thermal i.hot  { background: #ff8a4c; box-shadow: 0 0 10px rgba(255,138,76,0.5); }

@media (prefers-reduced-motion: reduce) {
  .bp-scan, .big-wave i, .big-pixel i, .big-touch i, .big-thermal i,
  .bp-svg-hist, .bp-svg-pred { animation: none; }
  .bp-svg-hist { stroke-dashoffset: 0; }
  .bp-svg-pred { opacity: 1; }
}

/* ============================================================
   STAGE FEATURES STRIP — bottom 5-feature row inside the pinned
   story stage. Re-rendered per chapter by setActiveChapter().
   ============================================================ */
.stage-features {
  position: absolute;
  left: clamp(28px, 5vw, 64px);
  right: clamp(28px, 5vw, 64px);
  bottom: clamp(20px, 3vh, 36px);
  z-index: 5;
  height: clamp(96px, 11vh, 128px);
  border: 1px solid rgba(200,158,89,0.18);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(8,8,7,0.78), rgba(6,6,5,0.66));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.025),
    0 18px 60px rgba(0,0,0,0.4);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  font-family: Inter, system-ui, sans-serif;
  opacity: 1;
  transition: opacity 280ms var(--ease-out);
}
.stage-features.is-swap { opacity: 0.4; }

.sf-cell {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 12px;
  align-items: center;
  padding: clamp(0.85rem, 1.8vh, 1.2rem) clamp(0.9rem, 1.3vw, 1.4rem);
  border-right: 1px solid rgba(200,158,89,0.12);
  min-width: 0;
}
.sf-cell:last-child { border-right: 0; }

.sf-icon {
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(200,158,89,0.38);
  display: grid; place-items: center;
  color: #e5c58b;
  background: radial-gradient(circle at 35% 25%, rgba(200,158,89,0.14), rgba(7,7,6,0.82));
  box-shadow: inset 0 0 12px rgba(200,158,89,0.04);
}
.sf-icon svg { width: 22px; height: 22px; }

.sf-text { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-text strong {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 11px;
  line-height: 1.25;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e5c58b;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-text span {
  display: block;
  font-family: Inter, system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(244,239,231,0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 1100px) {
  .stage-features { grid-template-columns: repeat(3, 1fr); height: auto; }
  .sf-cell:nth-child(n+4) { display: none; }
  .sf-cell:nth-child(3) { border-right: 0; }
}
@media (max-width: 720px) {
  .stage-features {
    left: 14px; right: 14px;
    bottom: 14px;
    grid-template-columns: repeat(2, 1fr);
  }
  .sf-cell { padding: 0.7rem 0.8rem; }
  .sf-cell:nth-child(3) { display: none; }
  .sf-cell:nth-child(2) { border-right: 0; }
}