/* ===== launch.css ===== */
/* ============================================================
   Rimark — launch.css
   Source of truth: site/mock-product-grid.html
   Adds: light-theme variant, nav, footer, marquee, menu, reveal.
   Component class names match the mock exactly (.rk-card, .eyebrow, etc.).
   ============================================================ */

/* ---------- 0. Fonts — self-hosted WOFF2 subsets ----------
   Subset to Latin (Basic + Extended-A) + General Punctuation + Arrows +
   Misc Symbols + Currency. Source files in site/fonts/.
   `font-display: swap` so fallback (system-ui / ui-monospace) renders
   instantly, then swaps to the brand face once loaded. */







*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------- 1. Tokens — dark is the canonical (mock) ---------- */
:root {
  /* Brand accents — constant in both themes
     New palette: warm coral → pink → dusty rose → periwinkle → steel teal
     (--sol-* names retained for backwards compat with existing classes) */
  --g-1: #FF4530;   /* vibrant coral-red */
  --g-2: #FF4D8E;   /* hot pink */
  --g-3: #D14DC8;   /* vivid magenta */
  --g-4: #6970E0;   /* electric periwinkle */
  --g-5: #2A6FA8;   /* saturated cerulean */
  --sol-purple:  var(--g-1);   /* coral — hover glow, preview dot */
  --sol-magenta: var(--g-3);   /* rose — secondary accent */
  --sol-green:   #14F195;      /* unchanged — semantic "live" status only */
  --gradient: linear-gradient(90deg, var(--g-1) 0%, var(--g-2) 25%, var(--g-3) 50%, var(--g-4) 75%, var(--g-5) 100%);

  --sans: 'DM Sans', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Dark tokens (default — matches mock-product-grid.html exactly) */
  --bg:        #0a0a0a;
  --bg-card:   #111111;
  --bg-card-2: #0e0e0e;
  --bg-elev:   #141414;
  --line:      #1f1f1f;
  --line-2:    #2a2a2a;
  --text:      #f4f4f2;
  --text-mid:  #b8b8b3;
  --text-dim:  #8a8a86;
  --text-faint:#5a5a55;

  --nav-bg:        rgba(10,10,10,0.55);
  --hover-glow:    rgba(59, 130, 246, 0.22);   /* clean blue wash (no green undertone) */
  --logo-invert:   none;
  --code-bg:       #050505;
  --shadow-card:   0 16px 48px rgba(0,0,0,0.55);
}

[data-theme="dark"] {
  --bg:        #0a0a0a;
  --bg-card:   #111111;
  --bg-card-2: #0e0e0e;
  --bg-elev:   #141414;
  --line:      #1f1f1f;
  --line-2:    #2a2a2a;
  --text:      #f4f4f2;
  --text-mid:  #b8b8b3;
  --text-dim:  #8a8a86;
  --text-faint:#5a5a55;

  --nav-bg:        rgba(10,10,10,0.55);
  --hover-glow:    rgba(59, 130, 246, 0.22);   /* clean blue wash (no green undertone) */
  --logo-invert:   none;
  --code-bg:       #050505;
  --shadow-card:   0 16px 48px rgba(0,0,0,0.55);
}

/* Light theme — same architectural identity, inverted surface */
[data-theme="light"] {
  --bg:        #ffffff;
  --bg-card:   #ffffff;
  --bg-card-2: #fafaf8;
  --bg-elev:   #f4f4f1;
  --line:      #e8e8e4;
  --line-2:    #d8d8d3;
  --text:      #0a0a0a;
  --text-mid:  #4a4a47;
  --text-dim:  #8a8a86;
  --text-faint:#b5b5b0;

  --nav-bg:        rgba(255,255,255,0.6);
  --hover-glow:    rgba(59, 130, 246, 0.12);   /* clean blue wash, lighter for white surface */
  --logo-invert:   invert(1);
  --code-bg:       #0a0e1a;
  --shadow-card:   0 16px 48px rgba(0,0,0,0.08);
}

/* ---------- 2. Base ---------- */
html, body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
html { font-size: 16px; scroll-behavior: smooth; }
body { transition: background 0.3s ease, color 0.3s ease; overflow-x: clip; } /* clip, not hidden — hidden kills position:sticky (DS rule) */

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

/* ---------- 3. Layout primitives ---------- */
.rk-wrap { max-width: 1600px; margin: 0 auto; padding: 0 3rem; }
.wrap--wide { max-width: min(1600px, 96vw); }

/* Section = vertical rhythm container; .rk-wrap inside controls horizontal */
.rk-section { padding: 6rem 0; }
.section--lg { padding: 8rem 0; }
.section--sm { padding: 4rem 0; }

hr.rk-divider { border: none; height: 1px; max-width: 1600px; margin: 0 auto; padding: 0 3rem; background: var(--line); background-clip: content-box; }

@media (max-width: 900px) {
  .rk-wrap { padding: 0 1.5rem; }
  hr.rk-divider { padding: 0 1.5rem; }
  .rk-section { padding: 4rem 0; }
  .section--lg { padding: 5rem 0; }
}

/* ---------- 4. Section header (mock: .section-head + .eyebrow + h2 + .section-sub) ---------- */
.section-head {
  margin-bottom: 3rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 3rem;
  flex-wrap: wrap;
}
.eyebrow {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.eyebrow::before {
  content: '';
  width: 18px; height: 1px;
  background: var(--text-dim);
}
.eyebrow--plain::before { display: none; }

h1, h2, h3, h4 { font-weight: 500; color: var(--text); }
h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 0.96; letter-spacing: -0.035em; max-width: 1000px; }
h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.02; letter-spacing: -0.028em; max-width: 720px; }

/* Statement type — the top step above h2. Em tracking scales with the size;
   reserve for one or two statement/closer moments per page. */
.t-giant {
  font-weight: 500;
  font-size: clamp(52px, 9.5vw, 150px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  max-width: none;
}
.t-giant--closer { font-size: clamp(44px, 6vw, 92px); }
h3 { font-size: 1.65rem; letter-spacing: -0.022em; line-height: 1.1; }
h4 { font-size: 1.15rem; letter-spacing: -0.015em; line-height: 1.2; }

.section-sub {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.55;
  max-width: 360px;
  font-weight: 300;
}

/* ---------- 5. Gradient accent ---------- */
.accent {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---------- 6. Grid ---------- */
.grid       { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.grid-2     { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.grid-4     { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
@media (max-width: 980px) {
  .grid, .grid-2, .grid-4 { grid-template-columns: 1fr; }
}

/* ---------- 7. Card (LITERAL port from mock-product-grid.html) ---------- */
.rk-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 2rem 1.75rem 1.5rem;
  display: flex; flex-direction: column;
  min-height: 320px;
  overflow: hidden;
  transition: border-color 0.3s, transform 0.3s, background 0.3s;
  text-decoration: none; color: inherit;
}
.rk-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px; background: var(--gradient);
  opacity: 0; transition: opacity 0.3s;
}
.rk-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), var(--hover-glow), transparent 40%);
  opacity: 0; transition: opacity 0.3s;
  pointer-events: none;
}
.rk-card:hover {
  border-color: var(--line-2);
  background: var(--bg-card-2);
  transform: translateY(-2px);
}
.rk-card:hover::before { opacity: 1; }
.rk-card:hover::after  { opacity: 1; }
/* keep opaque code blocks above the mouse-follow glow (a positioned ::after that
   otherwise paints over them) so the glow reads as a background spotlight, not a
   wash over the code — fixes the "buggy" glow on cards with code blocks */
.rk-card pre, .rk-card .uc-code { position: relative; z-index: 1; }

/* ---- custom cursor: inverting lens that follows the pointer (from rimark.io) ---- */
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 20px; height: 20px; border-radius: 50%;
  -webkit-backdrop-filter: invert(1); backdrop-filter: invert(1);
  pointer-events: none; z-index: 2147483647;
  opacity: 0; will-change: transform;
  transition: transform 0.12s cubic-bezier(0.16,1,0.3,1),
              width 0.22s cubic-bezier(0.16,1,0.3,1),
              height 0.22s cubic-bezier(0.16,1,0.3,1),
              opacity 0.25s ease;
}
.cursor-dot.is-visible { opacity: 1; }
.cursor-dot.is-hover   { width: 46px; height: 46px; }
.cursor-dot.is-down    { width: 14px; height: 14px; }
/* hide the native cursor only once the custom one is live (JS adds the class) */
@media (hover: hover) and (pointer: fine) {
  html.has-custom-cursor, html.has-custom-cursor * { cursor: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot { transition: opacity 0.25s ease; }   /* instant follow, no smoothing */
}

.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.75rem;
}
.card-tag {
  font-family: var(--mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim);
  padding: 0.32rem 0.65rem;
  border: 1px solid var(--line-2); border-radius: 100px;
}
.card-mark { width: 28px; height: 28px; opacity: 0.55; transition: opacity 0.3s; }
.rk-card:hover .card-mark { opacity: 1; }
.card-mark svg { width: 100%; height: 100%; stroke: var(--text-mid); fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

.card-title {
  font-size: 1.65rem; font-weight: 500; letter-spacing: -0.022em;
  line-height: 1.1; margin-bottom: 0.6rem;
  color: var(--text);
}
.card-desc {
  font-size: 0.92rem; color: var(--text-mid); line-height: 1.55;
  font-weight: 300; max-width: 90%;
}

.card-foot {
  margin-top: auto; padding-top: 1.5rem;
  display: flex; align-items: center; justify-content: space-between;
  border-top: 1px solid var(--line);
  gap: 1rem; flex-wrap: wrap;
}
.card-link {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  color: var(--text); letter-spacing: -0.005em;
  display: inline-flex; align-items: center; gap: 0.5rem;
  transition: gap 0.2s;
}
.card-link .arrow { display: inline-block; transition: transform 0.2s; }
.rk-card:hover .card-link { gap: 0.75rem; }
.rk-card:hover .card-link .arrow { transform: translateX(2px); }

.card-meta {
  font-family: var(--mono); font-size: 0.68rem;
  color: var(--text-dim); letter-spacing: 0.04em;
}
.card-meta .dot {
  color: var(--sol-green); margin-right: 0.4rem;
  text-shadow: 0 0 8px var(--sol-green);
}
.card-meta .dot--dev     { color: var(--text-dim); text-shadow: none; }
.card-meta .dot--preview { color: var(--sol-purple); text-shadow: 0 0 8px rgba(255,69,48,0.7); }

/* ---------- 8. Strip ("also in the stack") ---------- */
.strip {
  margin-top: 4rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; flex-wrap: wrap;
}
.strip-label {
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim);
  letter-spacing: 0.12em; text-transform: uppercase;
}
.strip-links { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.strip-links a {
  font-family: var(--mono); font-size: 0.78rem; color: var(--text-mid);
  transition: color 0.2s;
  display: inline-flex; align-items: center; gap: 0.4rem;
}
.strip-links a:hover { color: var(--text); }
.strip-links a::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-dim); transition: background 0.2s, box-shadow 0.2s;
}
.strip-links a:hover::before { background: var(--sol-green); box-shadow: 0 0 8px var(--sol-green); }

/* ---------- 9. Buttons ---------- */
.btn {
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  color: var(--text-mid);
  padding: 0.65rem 1.1rem;
  border: 1px solid var(--line-2); border-radius: 10px;   /* rounds out fully on hover */
  display: inline-flex; align-items: center; gap: 0.5rem;
  /* Button motion ported from the live Rimark site: on hover the corners
     round out from 10px to a full pill and the button settles 2px down
     under a soft shadow. */
  transition: color 0.3s, border-color 0.3s, background 0.3s, transform 0.3s, box-shadow 0.3s,
              border-radius 0.42s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
  background: transparent;
  white-space: nowrap;
}
/* Target just past half the button's height. A huge value like 999px looks
   like a snap: the pill is visually complete by ~half-height, so the rest of
   the transition has nothing left to animate. */
.btn:hover { color: var(--text); border-color: var(--text-mid); border-radius: 22px; transform: translateY(2px); box-shadow: 0 5px 10px rgba(0,0,0,0.10); }
.btn-lg:hover { border-radius: 26px; }
.btn.primary {
  color: var(--text);
  background: var(--bg-card);
  border-color: var(--line-2);
}
.btn.primary:hover { background: var(--bg-card-2); border-color: var(--text-mid); }
.btn.gradient {
  /* origin must be border-box: with the default padding-box the gradient is
     sized to the padding box but clipped to the border box, so it tiles and
     leaves a 1px seam of the next repeat down the right edge. */
  background: var(--gradient);
  background-origin: border-box; background-repeat: no-repeat;
  color: #ffffff;
  font-family: var(--sans); font-weight: 600;
  border-color: transparent;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.btn.gradient:hover { opacity: 0.94; box-shadow: 0 5px 10px rgba(0,0,0,0.10), 0 0 24px rgba(59,130,246,0.40); color: #ffffff; }
.btn-lg { font-size: 0.85rem; padding: 0.85rem 1.4rem; }

/* ---------- 10. Nav ---------- */
nav.lc-nav {
  position: fixed;
  top: 16px; left: 3%; right: 3%;
  width: 94%;
  height: 44px;
  padding: 8px 18px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 100;
  background: var(--nav-bg);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: background 0.3s, border-color 0.3s;
}
.rk-nav-logo img { height: 12px; width: auto; filter: var(--logo-invert); display: block; }

.nav-links { display: flex; gap: 1.6rem; align-items: center; }
.nav-links a {
  font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-mid); white-space: nowrap;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--text); }
.nav-links a.active { color: var(--text); }
.nav-links a.active::after {
  content: ''; display: block; height: 1px;
  background: var(--gradient); margin-top: 2px;
}
@media (max-width: 1100px) { .nav-links { display: none; } }

.nav-cta {
  font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  color: var(--text);
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--line-2); border-radius: 100px;
  letter-spacing: 0.04em;
  transition: border-color 0.2s, color 0.2s;
}
.nav-cta:hover { border-color: var(--text); }

/* Theme toggle button (sun/moon) */
.nav-theme {
  width: 28px; height: 28px; padding: 0;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: 50%;
  color: var(--text-mid);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.85rem; line-height: 1;
  transition: color 0.2s, border-color 0.2s, transform 0.2s;
}
.nav-theme:hover { color: var(--text); border-color: var(--text-mid); transform: rotate(15deg); }
.nav-theme .ico-sun, .nav-theme .ico-moon { display: none; }
[data-theme="dark"]  .nav-theme .ico-sun  { display: inline; }
[data-theme="light"] .nav-theme .ico-moon { display: inline; }

.nav-hamburger {
  display: flex; flex-direction: column; justify-content: space-between;
  height: 12px; width: 22px;
  cursor: pointer; padding: 0; background: none; border: none;
}
.nav-hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--text);
  transition: opacity 0.2s, transform 0.3s, background 0.3s;
}
.nav-hamburger:hover span { opacity: 0.6; }
.nav-hamburger.is-open span:first-child { transform: translateY(5px) rotate(45deg); }
.nav-hamburger.is-open span:last-child  { transform: translateY(-5px) rotate(-45deg); }

/* ---------- 11. Full-screen menu ---------- */
.lc-menu {
  position: fixed; inset: 0;
  background: rgba(10, 10, 10, 0.45);
  -webkit-backdrop-filter: blur(26px) saturate(1.3);
  backdrop-filter: blur(26px) saturate(1.3);
  z-index: 90;
  display: flex; flex-direction: column;
  padding: 4.25rem calc(3% + 18px) 3rem;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s ease;
  overflow-y: auto;
}
[data-theme="light"] .lc-menu { background: rgba(255, 255, 255, 0.5); }
.lc-menu.is-open { opacity: 1; pointer-events: auto; }

/* centered content column, top-aligned */
.menu-inner { width: 100%; max-width: 1160px; margin: 0 auto; }

.menu-eyebrow {
  font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim);
}

/* header row: eyebrow + grid/list view toggle */
.menu-head {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding-bottom: 1rem; margin-bottom: 1.2rem;
  border-bottom: 1px solid var(--line);
}
.menu-view-toggle {
  position: relative;
  display: inline-flex; gap: 0;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-2);
  border-radius: 100px; padding: 0.28rem;
}
[data-theme="light"] .menu-view-toggle { background: rgba(0,0,0,0.08); }
/* sliding indicator that glides between the two views (no drop shadow — frosted) */
.menu-view-toggle::before {
  content: ''; position: absolute; z-index: 0;
  top: 0.28rem; bottom: 0.28rem; left: 0.28rem; width: 84px;
  border-radius: 100px; background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .menu-view-toggle::before { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.09); }
.menu-view-toggle:has([data-view="list"].is-active)::before { transform: translateX(100%); }
.menu-view-toggle button {
  position: relative; z-index: 1; width: 84px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); background: none; border: none; cursor: pointer;
  padding: 0.5rem 0; border-radius: 100px;
  transition: color 0.25s ease;
}
.menu-view-toggle button:hover { color: var(--text-mid); }
.menu-view-toggle button.is-active { color: var(--text); }
.menu-view-toggle .tsw-ico { font-size: 1em; line-height: 1; opacity: 0.8; transition: opacity 0.25s; }
.menu-view-toggle button.is-active .tsw-ico { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .menu-view-toggle::before { transition: none; } }

/* all menu content as interactive cards in a grid */
.menu-grid {
  width: 100%;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}
@media (max-width: 1080px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .menu-grid { grid-template-columns: 1fr; } }

/* compact card built on the shared .rk-card system — frosted glass, no drop shadow */
.menu-card {
  min-height: 168px; padding: 1.3rem 1.35rem 1.15rem; border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
[data-theme="light"] .menu-card { background: rgba(255, 255, 255, 0.5); }
.menu-card .card-head { margin-bottom: 0.95rem; }
.menu-card .card-title { font-size: 1.3rem; margin-bottom: 0.3rem; }
.menu-card .card-desc { font-size: 0.82rem; max-width: 100%; }
.menu-card .card-foot { margin-top: auto; padding-top: 1rem; }
.menu-card:hover { transform: none; box-shadow: none; }
.menu-card.active { border-color: var(--line-2); }
.menu-card.active::before { opacity: 1; }
.menu-card.active .card-title { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.menu-card.active .card-tag { color: var(--text); border-color: var(--text-mid); }

/* theme card — full-width; text left, switch right */
.menu-card--theme {
  position: relative;
  grid-column: 1 / -1;
  display: grid; grid-template-columns: 1fr auto;
  column-gap: 2rem; align-content: center; align-items: center;
  min-height: 176px;
}
.menu-card--theme .card-head  { grid-column: 1; grid-row: 1; }
.menu-card--theme .card-title { grid-column: 1; grid-row: 2; }
.menu-card--theme .card-desc  { grid-column: 1; grid-row: 3; }
/* switch is absolutely centered so its height doesn't distort the text rows */
.menu-card--theme .menu-theme-switch {
  position: absolute; top: 50%; right: 1.35rem; transform: translateY(-50%);
  margin: 0;
}
@media (max-width: 640px) {
  .menu-card--theme { display: flex; flex-direction: column; min-height: 0; }
  .menu-card--theme .menu-theme-switch { position: static; transform: none; margin-top: 1rem; align-self: flex-start; }
}
.menu-theme-switch {
  position: relative; margin-top: 1rem; align-self: flex-start;
  display: inline-flex; gap: 0;
  background: rgba(255,255,255,0.05);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--line-2);
  border-radius: 20px; padding: 0.45rem;
}
[data-theme="light"] .menu-theme-switch { background: rgba(0,0,0,0.08); }
/* sliding indicator that glides between the three modes (no drop shadow — frosted) */
.menu-theme-switch::before {
  content: ''; position: absolute; z-index: 0;
  top: 0.45rem; bottom: 0.45rem; left: 0.45rem; width: 100px;
  border-radius: 15px; background: rgba(255,255,255,0.09);
  box-shadow: inset 0 0 0 1px var(--line-2);
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
}
[data-theme="light"] .menu-theme-switch::before { background: #fff; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.09); }
.menu-theme-switch:has([data-theme-mode="light"].is-active)::before { transform: translateX(100%); }
.menu-theme-switch:has([data-theme-mode="dark"].is-active)::before  { transform: translateX(200%); }
.menu-theme-switch button {
  position: relative; z-index: 1; width: 100px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-dim); background: none; border: none; cursor: pointer;
  padding: 1.15rem 0; border-radius: 15px;
  transition: color 0.25s ease;
}
.menu-theme-switch button:hover { color: var(--text-mid); }
.menu-theme-switch button.is-active { color: var(--text); }
.menu-theme-switch .tsw-ico { font-size: 1.5rem; line-height: 1; opacity: 0.7; transition: opacity 0.25s; }
.menu-theme-switch button.is-active .tsw-ico { opacity: 1; }
/* per-mode sub-descriptor — adds detail and fills the taller segment */
.menu-theme-switch button::after {
  font-family: var(--mono); font-size: 0.54rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-faint); font-weight: 400;
}
.menu-theme-switch [data-theme-mode="system"]::after { content: 'System'; }
.menu-theme-switch [data-theme-mode="light"]::after  { content: 'Day'; }
.menu-theme-switch [data-theme-mode="dark"]::after   { content: 'Night'; }
@media (prefers-reduced-motion: reduce) { .menu-theme-switch::before { transition: none; } }

/* staggered card entrance (hover uses shadow, not transform, to avoid clash) */
.menu-grid > * { opacity: 0; transform: translateY(18px); transition: opacity 0.25s ease, transform 0.25s ease; }
.lc-menu.is-open .menu-grid > * {
  opacity: 1; transform: none;
  transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1),
              border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.lc-menu.is-open .menu-grid > *:nth-child(1){ transition-delay: 0.04s, 0.04s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(2){ transition-delay: 0.08s, 0.08s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(3){ transition-delay: 0.12s, 0.12s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(4){ transition-delay: 0.16s, 0.16s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(5){ transition-delay: 0.20s, 0.20s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(6){ transition-delay: 0.24s, 0.24s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(7){ transition-delay: 0.28s, 0.28s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(8){ transition-delay: 0.32s, 0.32s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(9){ transition-delay: 0.36s, 0.36s, 0s, 0s, 0s; }
.lc-menu.is-open .menu-grid > *:nth-child(10){ transition-delay: 0.40s, 0.40s, 0s, 0s, 0s; }
@media (prefers-reduced-motion: reduce) {
  .menu-grid > * { opacity: 1; transform: none; transition: none; }
  .lc-menu.is-open .menu-grid > * { transition: none; }
}

/* ---- list view: same cards restyled as numbered rows ---- */
.lc-menu.view-list .menu-grid { grid-template-columns: 1fr; gap: 0; }
.lc-menu.view-list .menu-card {
  min-height: 0; padding: 0.9rem 0; border: none; border-radius: 0;
  border-bottom: 1px solid var(--line); background: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  display: flex; flex-direction: row; align-items: baseline; gap: 1.15rem;
}
.lc-menu.view-list .menu-card .card-desc { flex: 1; }
.lc-menu.view-list .menu-card::before, .lc-menu.view-list .menu-card::after { display: none; }
.lc-menu.view-list .menu-card:hover { background: none; box-shadow: none; transform: translateX(0.55rem); border-color: var(--line-2); }
.lc-menu.view-list .menu-card:hover .card-title { color: var(--text); }
.lc-menu.view-list .menu-card .card-head { margin: 0; }
.lc-menu.view-list .menu-card .card-tag { border: none; padding: 0; color: var(--text-faint); font-size: 0.72rem; min-width: 1.6rem; }
.lc-menu.view-list .menu-card .card-title { font-size: 1.35rem; margin: 0; }
.lc-menu.view-list .menu-card .card-desc { margin: 0; color: var(--text-dim); font-size: 0.85rem; font-weight: 300; }
.lc-menu.view-list .menu-card .card-foot { margin: 0 0 0 auto; padding: 0; border: none; }
.lc-menu.view-list .menu-card .card-meta { display: none; }
.lc-menu.view-list .menu-card.active .card-title { -webkit-text-fill-color: transparent; }
/* theme row keeps its inline switch */
.lc-menu.view-list .menu-card--theme { align-items: center; flex-wrap: wrap; grid-column: auto; }
.lc-menu.view-list .menu-card--theme .card-desc { display: none; }
.lc-menu.view-list .menu-card--theme .menu-theme-switch { position: static; transform: none; margin: 0 0 0 auto; padding: 0.3rem; border-radius: 100px; }
.lc-menu.view-list .menu-theme-switch::before { top: 0.3rem; bottom: 0.3rem; left: 0.3rem; width: 84px; border-radius: 100px; }
.lc-menu.view-list .menu-theme-switch button { flex-direction: row; width: 84px; padding: 0.5rem 0; gap: 0.45rem; border-radius: 100px; }
.lc-menu.view-list .menu-theme-switch button::after { display: none; }
.lc-menu.view-list .menu-theme-switch .tsw-ico { font-size: 1.05em; }
@media (max-width: 520px) {
  .lc-menu.view-list .menu-card .card-desc { display: none; }
}

body.menu-open { overflow: hidden; }

/* ---------- 12. Footer ---------- */
footer.lc-footer {
  border-top: 1px solid var(--line);
  padding: 4rem 0 0;          /* watermark is the last child and sits flush */
  margin-top: 6rem;
}
/* When a CTA closes the page, run it flush into the footer: the section's
   ambient wash is clipped to its own box, so a margin here leaves a dead band
   the gradient can't reach. The CTA's own bottom padding keeps the breathing
   room. */
.cta + footer.lc-footer { margin-top: 0; }
.footer-grid {
  /* aligns precisely with the nav logo (which sits at 3% + 18px from viewport edge) */
  box-sizing: border-box;
  width: 100%; max-width: none; margin: 0;
  padding-left: calc(3% + 18px);
  padding-right: calc(3% + 18px);
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 3rem;
}
.footer-col { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; }
.footer-brand img { width: 93px; height: 14px; opacity: 0.95; margin-bottom: 0.4rem; filter: var(--logo-invert); align-self: flex-start; display: block; }
/* home team strip: alumni logo marquee (no individuals, per voice rules).
   Wordmark text items stand in where no clean SVG exists yet
   (Northwestern Mutual, Alipay, Circle). */
.marquee-item--text {
  font-weight: 600; font-size: 1.05rem; letter-spacing: 0.01em;
  color: var(--text); opacity: 0.6; white-space: nowrap;
}

.footer-tagline { font-size: 0.82rem; color: var(--text-mid); line-height: 1.6; max-width: 280px; font-weight: 300; }
.footer__wordmark {
  margin-top: 3rem;
  margin-bottom: 0;
  padding: 0 calc(3% + 18px);   /* aligns with the footer grid + nav-logo axis */
  box-sizing: border-box;
}
.footer__wordmark img {
  width: 100%; height: auto; display: block;
  opacity: 0.1;
  filter: var(--logo-invert);
}
.footer-address { font-style: normal; font-family: var(--mono); font-size: 0.72rem; color: var(--text-dim); line-height: 1.8; margin-top: 0.4rem; }
.footer-address a { color: var(--text); }
.footer-address a:hover { opacity: 0.6; }
.footer-heading {
  font-family: var(--mono);
  font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text); margin-bottom: 0.4rem;
}
.footer-col a {
  font-family: var(--mono);
  font-size: 0.78rem; color: var(--text-mid);
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  box-sizing: border-box;
  width: 100%; max-width: none; margin: 3rem 0 0;
  padding-top: 1.5rem;
  padding-left: calc(3% + 18px);
  padding-right: calc(3% + 18px);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
}
.footer-copy, .rk-footer-compliance {
  font-family: var(--mono);
  font-size: 0.68rem; color: var(--text-dim);
  letter-spacing: 0.06em;
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; padding: 0 1.5rem; }
  .footer-bottom { padding: 1.5rem 1.5rem 0; }
}

/* ---------- 13. Reveal-on-scroll ---------- */
.reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1);
}
.reveal.in-view { opacity: 1; transform: translateY(0); }

/* ---------- 14. Marquee (partners) ---------- */
.marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:         linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  padding: 2.5rem 0;
}
.marquee-track {
  display: flex; align-items: center; gap: 5rem;
  width: max-content;
  animation: marqueeScroll 46s linear infinite;
  animation-delay: -12s; /* start mid-flow: logos visible on first paint */
}
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item { flex: 0 0 auto; height: 28px; display: inline-flex; align-items: center; }
.marquee-item img {
  height: 100%; width: auto; max-width: 180px; object-fit: contain;
  opacity: 0.55; transition: opacity 0.25s;
}
[data-theme="light"] .marquee-item img { filter: grayscale(1) brightness(0) contrast(1.1); }
[data-theme="dark"]  .marquee-item img { filter: grayscale(1) brightness(0) invert(1) contrast(1.1); opacity: 0.6; }
.marquee-item:hover img { opacity: 1; }

/* ---------- 15. KBD + code chips ---------- */
kbd {
  font-family: var(--mono);
  font-size: 0.72rem;
  padding: 0.08rem 0.4rem;
  background: var(--bg-elev);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  color: var(--text-mid);
}
.code-chip {
  font-family: var(--mono); font-size: 0.78rem;
  padding: 0.18rem 0.5rem;
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
}

/* ---------- 16. Theme toggle toast ---------- */
.theme-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(80px);
  background: var(--bg-card); border: 1px solid var(--line-2);
  border-radius: 100px; padding: 0.55rem 1.2rem;
  font-family: var(--mono); font-size: 0.72rem; color: var(--text);
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  z-index: 1000; pointer-events: none;
}
.theme-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.theme-toast kbd { margin-left: 0.4rem; }

/* ---- DS widget modules inside .rk-wrap: the section shell provides the outer padding ---- */
.rk-wrap > .w-tele, .rk-wrap > .w-thread, .rk-wrap > .w-calc, .rk-wrap > .w-stack, .rk-wrap > .w-flow { padding: 0; }
.rk-wrap .w-pin-sticky, .rk-wrap .w-pipe-sticky { padding: 24px 0 32px; }
.rk-wrap > .w-mesh { padding: 0; }
.rk-wrap > .w-mesh .mesh-hint { left: 0; }

/* elevated-page depth system must not flatten the frosted menu cards */
.elevated-page .rk-card.menu-card { background: rgba(255,255,255,0.05); border-color: var(--line); box-shadow: none; }
.elevated-page .rk-card.menu-card:hover { background: rgba(255,255,255,0.08); }
[data-theme="light"] .elevated-page .rk-card.menu-card { background: rgba(255,255,255,0.5); }
[data-theme="light"] .elevated-page .rk-card.menu-card:hover { background: rgba(255,255,255,0.65); }

/* plate paddings when plates wrap full site blocks */
.newsletter-grid.plate { padding: 3rem; }
.cta-plate { padding: 4.5rem 3rem; }

/* elevated-page in light mode: subtle off-white, not grey (site override of the DS #e7e7e4) */
[data-theme="light"] body.elevated-page { background: #f8f8f6; }


/* light mode: cards are frosted glass (40% white + backdrop blur); borders stay
   the default light-grey var(--line)/var(--line-2) (reverted from the white-border pass). */
html[data-theme="light"] .rk-card:not(.menu-card) {
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}
html[data-theme="light"] .rk-card:not(.menu-card):hover {
  background: rgba(255,255,255,0.55);
}

/* list view: menu rows carry no fill */
html .lc-menu.view-list .rk-card.menu-card { background: none; }

/* frost the card-like widget panels too (match the frosted .rk-card look) */
html[data-theme="light"] .tele-panel,
html[data-theme="light"] .tele-counters,
html[data-theme="light"] .led,
html[data-theme="light"] .lane,
html[data-theme="light"] .calc-outs,
html[data-theme="light"] .rail-card,
html[data-theme="light"] .flow-end,
html[data-theme="light"] .rev-track,
html[data-theme="light"] .data-table {
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}

/* white page bg everywhere in light mode (neutralize the elevated-page grey too) */
html[data-theme="light"] .elevated-page { background: #ffffff; }


/* section "doors" — quiet mono links from a home section down into its depth page */
.sec-door {
  display: inline-block; margin-top: 1.6rem; align-self: flex-start;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); text-decoration: none;
  border-bottom: 1px solid var(--line-2); padding-bottom: 3px;
  transition: color 0.2s, border-color 0.2s;
}
.sec-door:hover { color: var(--text); border-bottom-color: var(--text-mid); }

/* chapter ledes — the plain-language claim each section's widget then proves */
.chapter-lede {
  font-size: 1.02rem; font-weight: 300; line-height: 1.62;
  color: var(--text-mid); max-width: 560px; margin: 0.9rem 0 0;
}

/* "Built on" partner band (home) — compact quick-glance credibility strip */
.built-on-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.4rem 1.1rem; max-width: 880px; margin: 0 auto;
  align-items: start;
}
.built-on-cell {
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  text-align: center;
  padding: 0;
}
.built-on-cell img {
  height: 24px; width: auto; max-width: 120px; object-fit: contain;
  opacity: 0.78; transition: opacity 0.25s;
}
[data-theme="dark"]  .built-on-cell img { filter: grayscale(1) brightness(0) invert(1) contrast(1.1); }
[data-theme="light"] .built-on-cell img { filter: grayscale(1) brightness(0) contrast(1.1); }
.built-on-cell:hover img { opacity: 1; }
.built-on-cap {
  font-family: var(--mono); font-size: 0.6rem;
  color: var(--text-dim); line-height: 1.45; letter-spacing: 0.03em;
  max-width: 165px;
}
.built-on-tm {
  max-width: 620px; margin: 2rem auto 0; text-align: center;
  font-size: 0.63rem; line-height: 1.6; color: var(--text-dim); opacity: 0.7; font-weight: 300;
}
.built-on-cap .cap-kicker {
  display: block;
  text-transform: uppercase;
  font-size: 0.54rem;
  letter-spacing: 0.13em;
  opacity: 0.7;
  margin-bottom: 0.22rem;
}
/* Quick-glance credibility chips: stay one row down to small-tablet, then 2x2 on
   mobile. Never a single column — logo association, not a list to read. */
@media (max-width: 720px) {
  .built-on-row { grid-template-columns: repeat(2, 1fr); gap: 1.9rem 1.25rem; max-width: 420px; }
}

/* secondary buttons: pure-glass fill — near-zero tint, the backdrop blur does the work */
.btn:not(.gradient) {
  background: rgba(255,255,255,0.01);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
}

/* pinned widgets live inside .rk-wrap — the DS modules' inner padding double-gutters
   the page. Kill it; keep a small top inset so pinned content clears the nav. */
.rk-wrap > .w-pin > .w-pin-sticky { padding: 24px 0 0; }
.w-pin-sticky .w-stack { padding: 0; }

/* media cards — live-set texture treatment: full-bleed image + shade, light-on-image text */
.card--media .card-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transform: scale(1.001);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.card--media .card-shade {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(185deg, rgba(8,8,10,0.08) 32%, rgba(8,8,10,0.78) 100%);
}
.card--media:hover .card-bg { transform: scale(1.05); }
.card--media > *:not(.card-bg):not(.card-shade) { position: relative; z-index: 2; }
.card--media, html[data-theme="light"] .card--media { border-color: rgba(255,255,255,0.18); }
.card--media .card-title { color: #ffffff; }
.card--media .card-desc { color: rgba(255,255,255,0.85); }
.card--media .card-tag {
  color: #ffffff; border-color: rgba(255,255,255,0.4);
  background: rgba(8,8,10,0.28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.card--media .card-mark svg { stroke: #ffffff; }
.card--media .card-link { color: #ffffff; }
.card--media .card-meta { color: rgba(255,255,255,0.8); }
.card--media .card-foot { border-top-color: rgba(255,255,255,0.3); }

/* ---------- 1c ambient color fields (selective) ----------
   One gradient-stop wash per section, whisper-quiet; keys:
   products=coral(g1) · platform=cerulean(g5) · journey=periwinkle(g4) · cta=magenta(g3) */
.has-wash { position: relative; }
.has-wash > .rk-wrap { position: relative; z-index: 1; }
.reveal .wash { opacity: 0; transition: opacity 1.4s ease 0.3s; }
.reveal.in-view .wash { opacity: 1; }
/* light mode: same stops at ~half alpha (study rule) */
[data-theme="light"] .wash--tl { background: radial-gradient(720px 420px at 12% -10%, rgba(255,69,48,0.045), transparent 70%); }
[data-theme="light"] .wash--tr { background: radial-gradient(680px 400px at 95% 0%, rgba(105,112,224,0.04), transparent 70%); }
[data-theme="light"] .wash--l { background: radial-gradient(640px 420px at 0% 55%, rgba(42,111,168,0.045), transparent 70%); }
[data-theme="light"] .wash--b { background: radial-gradient(560px 320px at 50% 115%, rgba(209,77,200,0.05), transparent 72%); }

/* gradient hairline dividers (1c) — masked so they breathe at the edges */
hr.rk-divider {
  background: var(--gradient);
  background-clip: content-box;
  opacity: 0.3;
  -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
[data-theme="light"] hr.rk-divider { opacity: 0.22; }

/* eyebrow key-dashes match each section's wash stop */
#products .eyebrow::before { background: var(--g-1); }
#platform .eyebrow::before { background: var(--g-5); }
#how .eyebrow::before { background: var(--g-4); }
.cta .eyebrow::before { background: var(--g-3); }


/* ===== rimark-web-ext.css ===== */
/* ==========================================================================
   rimark-web-ext.css — extensions to the verbatim launch.css vocabulary.
   Two kinds of rule, both documented in README.md → "Intentional additions":
   1. PROMOTED — patterns that shipped inline on one site page, generalized
      with values unchanged (source noted per block).
   2. ADDED — new vocabulary with no site precedent, derived from tokens.
   ========================================================================== */

/* --- Data table — PROMOTED verbatim from site/status.html --- */
.data-table {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 14px; overflow: hidden;
  font-family: var(--mono);
}
.data-table-head {
  display: grid; gap: 0.8rem;
  background: var(--bg-card-2);
  border-bottom: 1px solid var(--line);
  padding: 0.9rem 1.4rem;
  font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-dim);
}
.data-table-row {
  display: grid; gap: 0.8rem;
  padding: 0.95rem 1.4rem;
  border-bottom: 1px solid var(--line);
  align-items: center;
  font-size: 0.78rem; color: var(--text);
  transition: background 0.15s;
}
.data-table-row:last-child { border-bottom: none; }
.data-table-row:hover { background: var(--bg-card-2); }
.num-col { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* Chip cell — the .jur-chip / .rpc-region pattern (status.html) */
.table-chip {
  font-size: 0.62rem; padding: 0.18rem 0.5rem;
  background: var(--bg-elev); border: 1px solid var(--line-2);
  border-radius: 100px; color: var(--text-mid);
  letter-spacing: 0.08em; white-space: nowrap;
}

/* Status cell — the .rpc-status / .validator-id glowing-dot pattern (status.html) */
.table-status { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--sol-green); }
.table-status::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; box-shadow: 0 0 6px currentColor; flex-shrink: 0;
}
.table-status--dev { color: var(--text-dim); }
.table-status--preview { color: var(--sol-purple); }

/* --- Pill input + form states --- */
/* Base = the styleguide §08 input pattern, squircle-cornered per owner direction
   (Jul 2026): inputs are 12px squircles — the pill personality stays reserved
   for buttons/tags/toggles. :focus = PROMOTED from site/status.html
   (.subscribe-form input:focus). States beyond that are ADDED. No success
   state by design — green is "live" status only; confirmation is copy, not
   color. (Class + component keep the legacy "pill" name for API stability.) */
.pill-input {
  flex: 1; min-width: 0;
  background: var(--bg-card);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  padding: 0.7rem 1.2rem;
  font-family: var(--sans);
  font-size: 0.88rem;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s;
}
.pill-input::placeholder { color: var(--text-faint); }
.pill-input:focus { border-color: var(--sol-purple); }
.pill-input:disabled { opacity: 0.45; cursor: not-allowed; background: var(--bg-elev); }
.pill-input.is-invalid { border-color: var(--g-1); background: rgba(255, 69, 48, 0.06); }

/* Field wrapper — label + control + note (ADDED) */
.field { display: flex; flex-direction: column; gap: 0.5rem; }
.field-label {
  font-family: var(--mono); font-size: 0.65rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim);
}
.field-note { font-family: var(--mono); font-size: 0.68rem; color: var(--text-dim); line-height: 1.5; }
.field-note.is-error { color: var(--g-1); }
.form-row { display: flex; gap: 0.6rem; } /* the subscribe-form row pattern */

/* --- Attribute-less defaults (ADDED) ---
   launch.css defines these only under [data-theme="dark"]; without the
   attribute they had no value at all. Mirror the dark defaults so a page
   that forgot to establish data-theme still renders sanely. (Every page
   should still set it — see README "Theming".) */
html:not([data-theme]) .nav-theme .ico-sun { display: inline; }
html:not([data-theme]) .marquee-item img { filter: grayscale(1) brightness(0) invert(1) contrast(1.1); opacity: 0.6; }

/* --- Footer legal cluster (ADDED) — Privacy · Security · Changelog links --- */
.footer-legal {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--mono); font-size: 0.68rem; color: var(--text-faint);
}
.footer-legal a { color: var(--text-dim); transition: color 0.2s; }
.footer-legal a:hover { color: var(--text); }


/* ===== rimark-web-widgets.css ===== */
/* ==========================================================================
   rimark-web-widgets.css — depth systems + widget modules, committed from the
   depth exploration (explorations/Depth Exploration.html is the living
   reference: usage notes, pairing rules, markup contracts).
   Owner rules (see README): one depth system per page; shadows at container
   level only; gradient hairlines inset + masked; max two pinned widgets/page.
   ========================================================================== */

/* --- Depth system A: surface ladder --- */
.band { background: #0f0f0f; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); }
.band-strip { background: #0d0d0d; border-top: 1px solid var(--line); }
.band .rk-card, .band .p-card { background: #161616; border-color: var(--line-2); }
.band .data-table { background: #141414; }

/* --- Depth system B: elevation (shadowed containers on a deepened page) --- */
.elevated-page { background: #060606; }
.plate { background: #0e0e0e; border: 1px solid var(--line); border-top-color: rgba(255,255,255,0.07); border-radius: 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.45), 0 2px 8px rgba(0,0,0,0.35); }
.plate--float { box-shadow: 0 24px 64px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.4); }
.elevated-page .rk-card, .elevated-page .p-card { background: #181818; border-color: #2e2e2e; border-top-color: rgba(255,255,255,0.09); box-shadow: none; }

/* --- Depth system C: ambient color fields (one wash per viewport, brand stops only) --- */
.wash { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.wash--tl { background: radial-gradient(720px 420px at 12% -10%, rgba(255,69,48,0.09), transparent 70%); }
.wash--tr { background: radial-gradient(680px 400px at 95% 0%, rgba(105,112,224,0.08), transparent 70%); }
.wash--l { background: radial-gradient(640px 420px at 0% 55%, rgba(42,111,168,0.09), transparent 70%); }
.wash--b { background: radial-gradient(560px 320px at 50% 115%, rgba(209,77,200,0.09), transparent 72%); }
.g-rule { height: 1px; border: none; background: linear-gradient(90deg, transparent, rgba(255,77,142,0.38), transparent); }
.key-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; }

/* --- Depth system D: frosted strata --- */
.strata-page { position: relative; }
.strata-bg { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(115deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 8px), radial-gradient(440px 300px at 85% 6%, rgba(105,112,224,0.32), rgba(105,112,224,0.10) 48%, transparent 68%), radial-gradient(520px 340px at 6% 48%, rgba(42,111,168,0.30), rgba(42,111,168,0.10) 50%, transparent 70%), radial-gradient(420px 280px at 72% 96%, rgba(255,77,142,0.22), rgba(255,77,142,0.07) 48%, transparent 70%); }
.strata-bg--v { background: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 8px), radial-gradient(440px 300px at 85% 6%, rgba(105,112,224,0.32), rgba(105,112,224,0.10) 48%, transparent 68%), radial-gradient(520px 340px at 6% 48%, rgba(42,111,168,0.30), rgba(42,111,168,0.10) 50%, transparent 70%), radial-gradient(420px 280px at 72% 96%, rgba(255,77,142,0.22), rgba(255,77,142,0.07) 48%, transparent 70%); }
.stratum { background: color-mix(in srgb, var(--bg) 42%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.15); backdrop-filter: blur(18px) saturate(1.15); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stratum--deep { background: color-mix(in srgb, var(--bg) 28%, transparent); -webkit-backdrop-filter: blur(26px) saturate(1.2); backdrop-filter: blur(26px) saturate(1.2); }
.strata-page .rk-card, .strata-page .p-card { background: color-mix(in srgb, var(--bg-card) 52%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border-color: var(--line-2); }
.strata-page .data-table { background: color-mix(in srgb, var(--bg-card) 60%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }

/* --- Light-mode equivalents --- */
[data-theme="light"] .band { background: #f5f5f2; box-shadow: inset 0 1px 0 rgba(255,255,255,0.8); }
[data-theme="light"] .band-strip { background: #f0f0ed; }
[data-theme="light"] .band .rk-card, [data-theme="light"] .band .p-card { background: #ffffff; }
[data-theme="light"] .band .data-table { background: #fbfbfa; }
[data-theme="light"] .elevated-page { background: #e7e7e4; }
[data-theme="light"] .plate { background: #fbfbfa; border-top-color: rgba(255,255,255,1); box-shadow: 0 12px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06); }
[data-theme="light"] .plate--float { box-shadow: 0 24px 64px rgba(0,0,0,0.12), 0 6px 16px rgba(0,0,0,0.07); }
[data-theme="light"] .elevated-page .rk-card, [data-theme="light"] .elevated-page .p-card { background: #ffffff; border-color: #d8d8d3; }
[data-theme="light"] .elevated-page .rk-card:hover { background: #fafaf8; border-color: #c9c9c4; }
[data-theme="light"] .strata-bg { background: repeating-linear-gradient(115deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 8px), radial-gradient(440px 300px at 85% 6%, rgba(105,112,224,0.20), rgba(105,112,224,0.07) 48%, transparent 68%), radial-gradient(520px 340px at 6% 48%, rgba(42,111,168,0.18), rgba(42,111,168,0.06) 50%, transparent 70%), radial-gradient(420px 280px at 72% 96%, rgba(255,77,142,0.14), rgba(255,77,142,0.05) 48%, transparent 70%); }
[data-theme="light"] .strata-bg--v { background: repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0 1px, transparent 1px 8px), radial-gradient(440px 300px at 85% 6%, rgba(105,112,224,0.20), rgba(105,112,224,0.07) 48%, transparent 68%), radial-gradient(520px 340px at 6% 48%, rgba(42,111,168,0.18), rgba(42,111,168,0.06) 50%, transparent 70%), radial-gradient(420px 280px at 72% 96%, rgba(255,77,142,0.14), rgba(255,77,142,0.05) 48%, transparent 70%); }

/* ===== widget modules (verbatim from the exploration) ===== */
/* Turn 2 — widget explorations (2a–2d). Experimental: nothing here ships to the DS yet. */

.frame.frame-clip { overflow: clip; }

/* ============ 2a — SETTLEMENT PIPELINE (scroll-pinned) ============ */
.w-pipe { height: 2400px; position: relative; }
.w-pipe-sticky { position: sticky; top: 70px; padding: 56px 64px 64px; }
.pipe-head { display: flex; justify-content: space-between; align-items: flex-end; }
.pipe-pct { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; color: var(--text-dim); }
.pipe-pct b { color: var(--text); font-weight: 500; }
.pipe-rail { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 3.2rem; }
.pipe-track, .pipe-fill { position: absolute; top: 25px; left: 2%; right: 2%; height: 1px; background: var(--line-2); }
.pipe-fill { right: auto; width: 0%; max-width: 96%; background: var(--gradient); box-shadow: 0 0 12px rgba(255,77,142,0.45); }
.pipe-packet { position: absolute; top: 21px; left: 2%; width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); }
.pipe-node { position: relative; padding-top: 58px; opacity: 0.32; transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1); }
.pipe-node .pn-dot { position: absolute; top: 17px; left: calc(50% - 8px); width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); transition: border-color 0.4s, box-shadow 0.4s; }
.pipe-node .pn-i { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.18em; color: var(--text-dim); display: block; margin-bottom: 0.4rem; text-align: center; }
.pipe-node h4 { font-size: 1rem; font-weight: 500; letter-spacing: -0.01em; margin: 0 0 0.35rem; text-align: center; }
.pipe-node p { font-size: 0.78rem; font-weight: 300; color: var(--text-mid); line-height: 1.55; margin: 0; text-align: center; }
.pipe-node.is-active { opacity: 1; }
.pipe-node.is-active .pn-dot { border-color: var(--g-2); box-shadow: 0 0 14px rgba(255,77,142,0.55); }
.pipe-foot { margin-top: 3rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--text-faint); text-align: center; }

/* ============ 2b — LIVE TELEMETRY ============ */
.w-tele { padding: 56px 64px 64px; display: flex; flex-direction: column; gap: 28px; }
.tele-counters { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--bg-card); }
.tele-counters .tc { padding: 24px 28px; border-left: 1px solid var(--line); }
.tele-counters .tc:first-child { border-left: none; }
.tc .k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 8px; }
.tc .num { font-family: var(--mono); font-size: 2.1rem; color: var(--text); font-variant-numeric: tabular-nums; }
.tc .num small { font-size: 1rem; color: var(--text-dim); }
.tele-panel { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.tele-panel .ph { display: flex; justify-content: space-between; padding: 14px 20px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
.tele-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 20px; }
.tele-bars .bar { flex: 1; position: relative; height: var(--h); background: var(--sol-green); opacity: 0.85; border-radius: 2px; transform: scaleY(0); transform-origin: bottom; transition: transform 0.7s cubic-bezier(0.16,1,0.3,1) var(--d, 0s), opacity 0.2s; }
.in-view .tele-bars .bar { transform: scaleY(1); }
.tele-bars .bar:hover { opacity: 1; }
.tele-bars .bar .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 0.6rem; color: var(--text); background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 6px; padding: 2px 6px; opacity: 0; pointer-events: none; transition: opacity 0.15s; white-space: nowrap; }
.tele-bars .bar:hover .tip { opacity: 1; }
.feed-row { display: grid; grid-template-columns: 1.6fr 1fr 0.9fr 0.9fr; gap: 12px; align-items: center; padding: 0.75rem 1.3rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.74rem; color: var(--text); transition: background 0.15s; }
.feed-row:hover { background: var(--bg-card-2); }
.feed-row.is-new { animation: w2RowIn 0.5s cubic-bezier(0.16,1,0.3,1); }
@keyframes w2RowIn { from { opacity: 0; transform: translateY(-10px); } }
.feed-row .amt { text-align: right; font-variant-numeric: tabular-nums; }
.feed-row .st { display: inline-flex; align-items: center; gap: 0.4rem; justify-self: end; font-size: 0.62rem; letter-spacing: 0.1em; }
.feed-row .st::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.st.pending { color: var(--sol-purple); }
.st.settled { color: var(--sol-green); }

/* ============ 2c — VALIDATOR MESH ============ */
.w-mesh { position: relative; height: clamp(560px, 74vh, 880px); padding: 56px 64px; }
.w-mesh .sec-copy { position: relative; z-index: 3; pointer-events: none; width: fit-content; max-width: 560px; padding: 22px 26px; background: color-mix(in srgb, var(--bg) 10%, transparent); -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px); border: 1px solid color-mix(in srgb, var(--line) 35%, transparent); border-radius: 14px; }
.mesh-field { position: absolute; inset: 0; z-index: 1; }
.mesh-field .mdot { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: var(--line-2); will-change: transform, opacity; }
.mline { position: absolute; height: 1px; background: var(--line-2); transform-origin: 0 0; opacity: 0.45; transition: opacity 0.25s, background 0.25s, box-shadow 0.25s; z-index: 1; }
.mline.is-hot { background: var(--g-2); opacity: 0.9; box-shadow: 0 0 8px rgba(255,77,142,0.5); }
.mnode { position: absolute; z-index: 2; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--text-mid); cursor: default; }
.mnode::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sol-green); box-shadow: 0 0 8px var(--sol-green); }
.mnode::after { content: ''; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--sol-green); opacity: 0; animation: w2Pulse 3s cubic-bezier(0.16,1,0.3,1) infinite; }
.mnode:nth-child(odd)::after { animation-delay: 1.4s; }
@keyframes w2Pulse { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.mnode .mtip { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 4px); width: 210px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; opacity: 0; pointer-events: none; transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16,1,0.3,1); font-family: var(--mono); }
.mnode:hover .mtip { opacity: 1; transform: translate(-50%, 0); }
.mnode:hover { border-color: var(--sol-green); }
.mtip .id { font-size: 0.7rem; color: var(--text); margin-bottom: 6px; }
.mtip .row { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-dim); line-height: 1.8; }
.mtip .row b { color: var(--text-mid); font-weight: 500; }
.mesh-hint { position: absolute; left: 64px; bottom: 28px; z-index: 3; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-dim); background: var(--nav-bg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 100px; padding: 6px 12px; }

/* ============ 2d — ARCHITECTURE STACK ============ */
.w-stack { padding: 64px; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.stk-rows { display: flex; flex-direction: column; gap: 6px; }
.stk-row { display: grid; grid-template-columns: 40px 1fr; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 12px; transition: background 0.25s, border-color 0.25s; }
.stk-row .i { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-dim); padding-top: 4px; }
.stk-row h4 { font-size: 0.95rem; font-weight: 500; margin: 0 0 0.15rem; }
.stk-row p { font-size: 0.78rem; font-weight: 300; color: var(--text-mid); line-height: 1.5; margin: 0; }
.stk-row.is-active { background: var(--bg-card); border-color: var(--line); }
.stack-scene { height: 430px; display: flex; align-items: center; justify-content: center; perspective: 1400px; }
.stack { position: relative; width: 270px; height: 270px; transform-style: preserve-3d; transform: rotateX(57deg) rotateZ(-42deg); }
.layer { position: absolute; inset: 0; border-radius: 16px; border: 1px solid var(--line-2); background: color-mix(in srgb, var(--bg-elev) 74%, transparent); transform: translateZ(var(--z)); transition: transform 0.35s cubic-bezier(0.16,1,0.3,1), opacity 0.3s, border-color 0.3s, background 0.3s; }
.layer i { position: absolute; top: 12px; left: 14px; font-style: normal; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-dim); }
[data-reveal]:not(.in-view) .layer { opacity: 0; }
[data-reveal].in-view .layer { animation: w2StkIn 0.9s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--d, 0s); }
@keyframes w2StkIn { from { transform: translateZ(calc(var(--z) + 150px)); opacity: 0; } to { transform: translateZ(var(--z)); opacity: 1; } }
.w-stack.has-active .layer:not(.is-active) { opacity: 0.3; }

/* mobile: unpin the stack and lay it out vertically — rows first, scene below.
   The scroll-scrub, parallax, and row-to-slab connector are desktop affordances;
   on a phone the rows work by tap and the pinned track just reads as dead space. */
@media (max-width: 767px) {
  .w-stack { grid-template-columns: 1fr; gap: 36px; padding: 28px 18px; }
  .w-stack .stack-scene { order: 2; min-height: 0; }
  #w2-stack-pin { height: auto !important; }
  #w2-stack-pin > .w-pin-sticky { position: static; }
  #stack-link { display: none !important; }
  #stack3d { width: min(320px, 84vw); }
  .w-mesh { padding: 32px 20px; }
}
.layer.is-active { transform: translateZ(calc(var(--z) + 20px)); border-color: var(--sol-purple); background: color-mix(in srgb, var(--sol-purple) 10%, var(--bg-elev)); }
.layer.is-active i { color: var(--text); }

/* ============ INTERACTION LAYER — turn-1 frames (scroll build-in + hover) ============ */
[data-reveal] { transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
[data-reveal]:not(.in-view) { opacity: 0; transform: translateY(24px); }
/* card hover = the DS .rk-card treatment, verbatim values (launch.css §7 + bindCardGlow) */
.elevated-page .rk-card:hover { background: #1d1d1d; border-color: #383838; }
[data-reveal] .wash { opacity: 0; transition: opacity 1.4s ease 0.3s; }
[data-reveal].in-view .wash { opacity: 1; }
[data-reveal] .g-rule-in { transform: scaleX(0); transition: transform 1.2s cubic-bezier(0.16,1,0.3,1) 0.2s; }
[data-reveal].in-view .g-rule-in { transform: scaleX(1); }

/* ============ 3a — TOKEN CORRIDOR ============ */
.w-flow { padding: 64px; }
.flow-lane { position: relative; display: grid; grid-template-columns: 200px 1fr 200px; gap: 28px; align-items: center; margin-top: 3.2rem; }
.flow-end { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); padding: 18px 20px; }
.flow-end .bk { font-family: var(--mono); font-size: 0.78rem; color: var(--text); margin-bottom: 6px; }
.flow-end .op { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-dim); }
.flow-end .op b { font-weight: 500; }
.flow-end--burn .op b { color: var(--sol-purple); }
.flow-end--mint .op b { color: var(--sol-green); }
.flow-mid { position: relative; height: 60px; }
.flow-track { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); }
.flow-packet { position: absolute; left: 0; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); opacity: 0; will-change: transform, opacity; }
.flow-cap { margin-top: 2.2rem; text-align: center; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--text-faint); }

/* ============ 3b — LEDGER ZOOM (pinned; shares the audit-compose vocabulary with 5b) ============ */

/* ============ 3c — SECTION THREAD ============ */
.w-thread { padding: 64px; }
.thread-wrap { position: relative; margin-top: 3rem; padding: 8px 0; }
.thread-line, .thread-fill { position: absolute; left: 31px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.thread-fill { bottom: auto; height: 0; background: var(--gradient); box-shadow: 0 0 10px rgba(255,77,142,0.35); }
.thread-packet { position: absolute; left: 27px; top: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); opacity: 0; will-change: transform; }
.th-stop { position: relative; display: grid; grid-template-columns: 64px 1fr; margin-bottom: 84px; opacity: 0.4; transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1); }
.th-stop:last-child { margin-bottom: 0; }
.th-dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--bg); margin-left: 25px; margin-top: 5px; transition: border-color 0.4s, box-shadow 0.4s; }
.th-stop h4 { font-size: 1.05rem; font-weight: 500; margin: 0 0 0.3rem; }
.th-stop p { font-size: 0.82rem; font-weight: 300; color: var(--text-mid); line-height: 1.6; margin: 0; max-width: 460px; }
.th-stop .meta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; color: var(--text-dim); margin-top: 0.5rem; }
.th-stop.is-on { opacity: 1; }
.th-stop.is-on .th-dot { border-color: var(--g-2); box-shadow: 0 0 12px rgba(255,77,142,0.5); }

/* ============ TURN 4 — PINNED EXPLAINERS (generic pin scaffold) ============ */
.w-pin { position: relative; height: 1900px; }
.w-pin-sticky { position: sticky; top: 70px; padding: 56px 64px 64px; }
.xp-caps { position: relative; min-height: 170px; }
.xp-cap { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); transition: opacity 0.45s, transform 0.45s cubic-bezier(0.16,1,0.3,1); pointer-events: none; }
.xp-cap.is-on { opacity: 1; transform: none; }
.xp-cap h4 { font-size: 1.15rem; font-weight: 500; margin: 0 0 0.4rem; }
.xp-cap p { font-size: 0.88rem; font-weight: 300; color: var(--text-mid); line-height: 1.65; margin: 0 0 0.6rem; }
.xp-cap .meta { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-dim); }

/* 4a — transfer-hook x-ray */
.xray-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; margin-top: 2.6rem; align-items: start; }
.xr-block { border: 1px solid var(--line); border-radius: 14px; background: var(--code-bg); padding: 16px; font-family: var(--mono); font-size: 0.8rem; }
/* .xr-block sits on --code-bg (dark in BOTH themes) — row ink is theme-invariant light, never theme tokens */
.xr-row { display: flex; justify-content: space-between; gap: 18px; padding: 11px 12px; border-radius: 8px; color: rgba(242,242,239,0.55); transition: background 0.4s, color 0.4s, box-shadow 0.4s, opacity 0.4s; }
.xr-row .k { color: rgba(242,242,239,0.34); }
.xr-row.is-lit { background: color-mix(in srgb, var(--sol-purple) 14%, transparent); color: #f2f2ef; box-shadow: inset 2px 0 0 var(--sol-purple); }
.xr-row.is-lit .k { color: rgba(242,242,239,0.72); }
.xray-grid .xp-idx { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-faint); margin-bottom: 1rem; }

/* 4b — atomic swap split ledger */
.atomic-grid { display: grid; grid-template-columns: 1fr 130px 1fr; gap: 20px; align-items: stretch; margin-top: 2.6rem; }
.led { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.led .lh { padding: 12px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-dim); display: flex; justify-content: space-between; }
.led-row { display: flex; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.76rem; color: var(--text); position: relative; }
.led-row:last-child { border-bottom: none; }
.led-row .strike { position: absolute; left: 16px; top: 50%; height: 1px; background: var(--sol-purple); width: 0; }
.led-row .delta { font-variant-numeric: tabular-nums; }
.delta.neg { color: var(--sol-purple); }
.delta.pos { color: var(--sol-green); }
.atomic-mid { position: relative; }
.atomic-mid .lane { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--line-2); border: 0; border-radius: 0; padding: 0; }
.atomic-packet { position: absolute; left: 0; top: calc(50% - 4px); width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); opacity: 0; will-change: transform, opacity; }
.atomic-cap { margin-top: 2rem; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--text-dim); display: flex; justify-content: space-between; }
.atomic-cap b { color: var(--text); font-weight: 500; }

/* 4c — reversibility window */
.rev-track { position: relative; height: 92px; margin-top: 3rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; display: flex; }
.rev-zone { position: relative; border-right: 1px solid var(--line); transition: background 0.4s; }
.rev-zone .zl { position: absolute; top: 10px; left: 12px; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--text-dim); white-space: nowrap; }
.rev-zone--settle { width: 16%; }
.rev-zone--window { width: 50%; }
.rev-zone--window.is-in { background: color-mix(in srgb, var(--sol-purple) 6%, transparent); }
.rev-zone--sealed { flex: 1; border-right: none; }
.rev-head { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--text); will-change: left; }
.rev-head::after { content: ''; position: absolute; top: -1px; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: var(--text); }
.rev-status { margin-top: 1.8rem; }

/* ============ TURN 5 — ZOOM EXPLAINERS ============ */
.node-stage, .audit-stage { position: relative; height: 400px; margin-top: 2.6rem; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.node-scene { position: absolute; inset: 0; will-change: transform; background-image: radial-gradient(var(--line) 1px, transparent 1px); background-size: 26px 26px; }
.n5 { position: absolute; width: 12px; height: 12px; margin: -6px; border-radius: 50%; border: 1px solid var(--text-mid); background: var(--bg); }
.n5::before { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--sol-green); box-shadow: 0 0 8px var(--sol-green); }
.n5--target::after { content: ''; position: absolute; inset: -7px; border-radius: 50%; border: 1px solid var(--sol-purple); }
.node-detail { position: absolute; right: 24px; top: 24px; width: 300px; background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; font-family: var(--mono); opacity: 0; transform: translateY(8px); will-change: opacity, transform; }
.node-detail .id { font-size: 0.74rem; color: var(--text); margin-bottom: 8px; }
.node-detail .row { display: flex; justify-content: space-between; font-size: 0.62rem; color: var(--text-dim); line-height: 1.9; }
.node-detail .row b { color: var(--text-mid); font-weight: 500; }
.node-link { position: absolute; height: 1px; background: var(--line-2); transform-origin: 0 0; opacity: 0; will-change: transform, opacity; }
.audit-table { position: absolute; inset: 24px; }
.audit-head { display: flex; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); will-change: transform, opacity; }
.audit-row { display: flex; gap: 14px; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 0.7rem; color: var(--text-mid); white-space: nowrap; overflow: hidden; will-change: transform, opacity; }
.audit-row.is-focus { background: color-mix(in srgb, var(--sol-purple) 7%, transparent); color: var(--text); border-radius: 8px; border-bottom-color: transparent; }
.audit-hero { position: absolute; left: 50%; top: 45%; transform: translate(-50%, -50%); width: 420px; overflow: hidden; background: color-mix(in srgb, var(--bg-elev) 88%, transparent); border: 1px solid var(--line-2); border-radius: 14px; padding: 22px 24px; font-family: var(--mono); will-change: transform, opacity; }
.audit-hero::before { content: ''; position: absolute; top: 0; left: 14px; right: 14px; height: 1px; background: var(--gradient); -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); opacity: var(--hl, 1); }
.audit-hero .ah-tint { position: absolute; inset: 0; background: color-mix(in srgb, var(--sol-purple) 7%, var(--bg-card)); opacity: 0; pointer-events: none; }
.audit-hero .ah-body { position: relative; }
.audit-hero .ah-rowline { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 10px 14px; font-size: 0.7rem; color: var(--text); opacity: 0; white-space: nowrap; }
.audit-hero .ah-eyebrow { font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-dim); margin-bottom: 8px; }
.audit-hero .ah-sig { font-size: 1rem; color: var(--text); margin-bottom: 14px; }
.audit-hero .ah-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.audit-hero .ah-f .k { font-size: 0.56rem; letter-spacing: 0.14em; color: var(--text-faint); margin-bottom: 2px; }
.audit-hero .ah-f .v { font-size: 0.74rem; color: var(--text-mid); }
.audit-count { position: absolute; left: 24px; bottom: 16px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--text-mid); background: color-mix(in srgb, var(--bg) 55%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--line); border-radius: 100px; padding: 7px 13px; opacity: 0; }
.dive-stage { position: relative; height: 500px; margin-top: 2.4rem; display: flex; align-items: center; justify-content: center; }
.dive-layer { position: absolute; width: min(780px, 94%); min-height: 260px; padding: 34px 38px; border: 1px solid var(--line-2); border-radius: 16px; background: color-mix(in srgb, var(--bg-elev) 82%, transparent); opacity: 0; will-change: transform, opacity; display: grid; grid-template-columns: 1.05fr 1fr; gap: 36px; align-items: center; text-align: left; }
.dive-layer .dl-i { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-dim); margin-bottom: 8px; }
.dive-layer h4 { font-size: 1.35rem; font-weight: 500; margin: 0 0 0.5rem; }
.dive-layer p { font-size: 0.88rem; font-weight: 300; color: var(--text-mid); line-height: 1.6; margin: 0; }
.dive-viz { position: relative; height: 180px; border: 1px solid var(--line); border-radius: 12px; background: color-mix(in srgb, var(--bg) 55%, transparent); overflow: hidden; }
.dv-agents { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; height: 100%; align-content: center; padding: 16px; box-sizing: border-box; }
.dv-agents span { font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.12em; color: var(--text-mid); border: 1px solid var(--line-2); border-radius: 100px; padding: 6px 10px; text-align: center; opacity: clamp(0.14, calc((var(--lp, 0) - var(--i)) * 4.5), 1); }
.dv-lane { position: absolute; left: 18px; right: 18px; top: 50%; height: 1px; background: var(--line-2); }
.dv-lane-fill { position: absolute; left: 18px; top: 50%; height: 1px; width: calc((100% - 36px) * var(--lp, 0)); background: var(--gradient); }
.dv-packet { position: absolute; top: calc(50% - 4px); left: calc(18px + (100% - 45px) * var(--lp, 0)); width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); }
.dv-end { position: absolute; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--text-dim); }
.dv-end--burn { left: 16px; top: calc(50% + 14px); }
.dv-end--mint { right: 16px; top: calc(50% + 14px); color: var(--sol-green); opacity: clamp(0.3, calc(var(--lp, 0) * 1.4 - 0.3), 1); }
.dv-checks { display: flex; flex-direction: column; gap: 12px; justify-content: center; height: 100%; padding: 16px 18px; box-sizing: border-box; }
.dv-checks .row { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--text-mid); opacity: clamp(0.15, calc((var(--lp, 0) - var(--i)) * 4), 1); }
.dv-checks .row b { color: var(--sol-green); font-weight: 500; opacity: clamp(0, calc((var(--lp, 0) - var(--i) - 0.18) * 5), 1); }
.dv-blocks { display: flex; gap: 12px; align-items: center; justify-content: center; height: calc(100% - 34px); }
.dv-blocks i { width: 48px; height: 48px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--bg-elev); opacity: clamp(0.1, calc((var(--lp, 0) - var(--i)) * 4), 1); transform: scale(clamp(0.78, calc(0.78 + (var(--lp, 0) - var(--i)) * 1.1), 1)); }
.dv-final { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.16em; color: var(--sol-green); opacity: clamp(0, calc((var(--lp, 0) - 0.75) * 4), 1); }
.dive-meta { margin-top: 1.4rem; text-align: center; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--text-dim); }

/* ============ TURN 6 — RACE / CALC / RAIL / DISCLOSURE / HERO MEDIA ============ */
.race-lanes { margin-top: 2.4rem; display: grid; gap: 18px; }
.lane { position: relative; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); padding: 16px 20px 34px; }
.lane .lh { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 22px; }
.lane .lh b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.lane-track { position: relative; height: 1px; background: var(--line-2); margin: 0 4px; }
.lane-fill { position: absolute; left: 0; top: 0; height: 1px; width: 0; }
.lane--sol .lane-fill { background: var(--gradient); box-shadow: 0 0 10px rgba(255,77,142,0.4); }
.lane--leg .lane-fill { background: var(--text-faint); }
.lane-dot { position: absolute; top: -4px; left: 0; width: 9px; height: 9px; border-radius: 50%; background: var(--g-2); box-shadow: 0 0 10px var(--g-2); }
.lane--leg .lane-dot { background: var(--text-dim); box-shadow: none; }
.lane-hop { position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--line-2); }
.lane-hop i { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); font-style: normal; font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.1em; color: var(--text-faint); white-space: nowrap; }
.race-note { margin-top: 1.6rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.12em; color: var(--text-dim); }

.w-calc { padding: 64px; }
.calc-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; margin-top: 2.4rem; align-items: center; }
.calc-controls { display: flex; flex-direction: column; gap: 28px; }
.calc-field label { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; color: var(--text-dim); margin-bottom: 10px; }
.calc-field label b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
.calc-field input[type="range"] { width: 100%; accent-color: var(--g-2); }
.calc-note { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--text-faint); }
.calc-outs { border: 1px solid var(--line); border-radius: 14px; background: var(--bg-card); overflow: hidden; }
.calc-out { padding: 20px 24px; border-top: 1px solid var(--line); }
.calc-out:first-child { border-top: none; }
.calc-out .k { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-dim); margin-bottom: 6px; }
.calc-out .num { font-family: var(--mono); font-size: 1.9rem; color: var(--text); font-variant-numeric: tabular-nums; }
.calc-out--hero .num { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }

.rail-stage { margin-top: 2.4rem; overflow: hidden; }
.rail-track { display: flex; gap: 18px; will-change: transform; }
.rail-card { flex: 0 0 360px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg-card); padding: 26px; min-height: 210px; display: flex; flex-direction: column; gap: 10px; }
.rail-card .q { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.16em; color: var(--text-dim); }
.rail-card h4 { font-size: 1.2rem; font-weight: 500; margin: 0; }
.rail-card p { font-size: 0.84rem; font-weight: 300; color: var(--text-mid); line-height: 1.6; margin: 0; flex: 1; }
.rail-card .st { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.12em; color: var(--sol-green); }
.rail-card .st--dim { color: var(--text-faint); }
.rail-prog { margin-top: 18px; height: 1px; background: var(--line-2); position: relative; }
.rail-prog i { position: absolute; left: 0; top: 0; height: 1px; background: var(--gradient); width: 0; }

.disc-item { border-bottom: 1px solid var(--line); }
.disc-item:last-child { border-bottom: none; }
.disc-head { display: grid; grid-template-columns: 1.8fr 1fr 0.9fr 1fr 24px; gap: 12px; align-items: center; padding: 0.95rem 1.4rem; font-family: var(--mono); font-size: 0.78rem; color: var(--text); cursor: pointer; transition: background 0.15s; }
.disc-head:hover { background: var(--bg-card-2); }
.disc-head .chev { justify-self: end; color: var(--text-dim); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); font-size: 0.7rem; }
.disc-item.is-open .chev { transform: rotate(90deg); }
.disc-detail { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1); }
.disc-item.is-open .disc-detail { max-height: 180px; }
.disc-detail-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; padding: 4px 1.4rem 1.2rem; }
.disc-detail .k { font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.14em; color: var(--text-faint); margin-bottom: 3px; }
.disc-detail .v { font-family: var(--mono); font-size: 0.72rem; color: var(--text-mid); }

.hero-media { position: relative; min-height: 540px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hm-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.hm-video--light { display: none; }
[data-theme="light"] .hm-video--dark { display: none; }
[data-theme="light"] .hm-video--light { display: block; }
.hm-tint { position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 25%, transparent), var(--bg) 97%); }
.hm-body { position: relative; z-index: 1; padding: 90px 64px 36px; }
.hm-strip { position: relative; z-index: 1; margin: 0 28px 28px; border-radius: 14px; border: 1px solid var(--line); overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal]:not(.in-view) { opacity: 1; transform: none; }
  [data-reveal] .wash { opacity: 1 !important; transform: none !important; transition: none; }
  .mnode::after { animation: none; }
  .tele-bars .bar { transform: scaleY(1); transition: none; }
  .feed-row.is-new { animation: none; }
  .kin-over { width: 100% !important; }
  .layer { animation: none !important; opacity: 1 !important; }
  .th-stop { opacity: 1; }
  .flow-packet { opacity: 0.9 !important; }
  .xp-cap { transition: none; }
  .pipe-node { opacity: 1; }
}

/* spec strip — page-anatomy cells promoted for HeroMedia and hand-written strips */
.spec-strip { display: flex; }
.spec-strip .cell { flex: 1; padding: 14px 20px; border-left: 1px solid var(--line); font-family: var(--mono); }
.spec-strip .cell:first-child { border-left: none; }
.spec-strip .k { font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.spec-strip .v { font-size: 1.05rem; color: var(--text); }



/* ===== solstice page styles ===== */
  /* ===== Hero ===== */
  .solstice-hero { position: relative; padding: 0; overflow: hidden; min-height: 80vh; }
  .solstice-hero .hero-frame { position: absolute; inset: 90px 3% 3% 3%; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--bg-card); }
  .hero-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: 0.5; pointer-events: none; will-change: transform; }
  .hero-orb.o1 { width: 46vw; height: 46vw; left: -12vw; top: -14vw; background: radial-gradient(circle, rgba(255,69,48,0.5) 0%, transparent 65%); }
  .hero-orb.o2 { width: 42vw; height: 42vw; right: -10vw; bottom: -16vw; background: radial-gradient(circle, rgba(105,112,224,0.5) 0%, transparent 65%); }
  .hero-orb.o3 { width: 24vw; height: 24vw; right: 18vw; top: -8vw; background: radial-gradient(circle, rgba(201,60,236,0.35) 0%, transparent 65%); }
  .solstice-hero .hero-content { position: relative; z-index: 3; padding: 7rem calc(3% + 3rem) 6rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(2.5rem, 5vw, 6rem); min-height: 80vh; }
  .hero-copy { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
  /* two-layer stack graphic — spec-card language */
  .hero-stack { position: relative; width: clamp(300px, 36vw, 660px); margin-right: clamp(0.5rem, 1.5vw, 2rem); display: flex; flex-direction: column; }
  .hs-card { position: relative; background: var(--bg-card); border: 1px solid var(--line-2); border-radius: 16px; padding: clamp(1.2rem, 1.9vw, 1.8rem) clamp(1.3rem, 2.1vw, 2rem); }
  .hs-card::before { content: ''; position: absolute; top: -1px; left: 14px; right: 14px; height: 1px; }
  .hs-card.net { z-index: 2; box-shadow: 0 28px 60px rgba(0,0,0,0.45), 0 6px 16px rgba(0,0,0,0.25); animation: hsFloat 7s ease-in-out infinite; }
  .hs-card.net::before { background: linear-gradient(90deg, #6970E0, rgba(105,112,224,0.15)); }
  .hs-card.core { box-shadow: 0 14px 34px rgba(0,0,0,0.3); }
  .hs-card.core::before { background: var(--gradient); }
  [data-theme="light"] .hs-card.net { box-shadow: 0 24px 48px rgba(20,20,40,0.16), 0 4px 12px rgba(20,20,40,0.08); }
  [data-theme="light"] .hs-card.core { box-shadow: 0 12px 28px rgba(20,20,40,0.12); }
  @keyframes hsFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
  .hc-t { display: flex; justify-content: flex-start; align-items: baseline; gap: 1rem; font-family: var(--mono); font-size: clamp(0.68rem, 0.95vw, 0.86rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); font-weight: 500; }
  .hc-t span { margin-left: auto; color: var(--text-faint); font-weight: 400; letter-spacing: 0.1em; }
  .hc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.8rem, 1.4vw, 1.5rem); margin-top: clamp(0.9rem, 1.5vw, 1.3rem); padding-top: clamp(0.8rem, 1.3vw, 1.1rem); border-top: 1px solid var(--line); }
  .hc-grid .k { font-family: var(--mono); font-size: clamp(0.52rem, 0.66vw, 0.6rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); }
  .hc-grid .v { margin-top: 0.35rem; font-family: var(--mono); font-size: clamp(0.6rem, 0.8vw, 0.74rem); letter-spacing: 0.04em; color: var(--text-mid); }
  .hs-gap { position: relative; height: clamp(64px, 11vh, 116px); width: 60%; margin: 0 auto; }
  .hs-gap i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--line-2); }
  .hs-gap i:nth-child(1) { left: 0; } .hs-gap i:nth-child(2) { left: 50%; } .hs-gap i:nth-child(3) { right: 0; }
  .hs-dot { position: absolute; top: 0; width: 6px; height: 6px; margin-left: -2.5px; border-radius: 50%; background: var(--text); opacity: 0; animation: hsDot 4.8s ease-in-out infinite; }
  .hs-dot.side { width: 4px; height: 4px; margin-left: -1.5px; filter: opacity(0.5); }
  .hs-dot.d1 { left: 0; animation-delay: 1.6s; }
  .hs-dot.d2 { left: 50%; }
  .hs-dot.d3 { left: 100%; animation-delay: 3.2s; }
  @keyframes hsDot { 0%, 20% { top: 0; opacity: 0; } 28% { opacity: 1; } 46% { top: calc(100% - 6px); opacity: 1; } 54%, 100% { top: calc(100% - 6px); opacity: 0; } }
  .hs-card.net .hc-t::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #6970E0; align-self: center; margin-right: 0.6rem; animation: hsBurn 4.8s ease-in-out infinite; }
  @keyframes hsBurn { 0%, 16% { opacity: 1; } 30%, 60% { opacity: 0.15; } 76%, 100% { opacity: 1; } }
  /* Core liveness dot — coral, phased complementary to the net dot: brightens as the payment lands (dot ~46%, mint ping ~56%) */
  .hs-card.core .hc-t::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: #FF4530; align-self: center; margin-right: 0.6rem; animation: hsCoreMint 4.8s ease-in-out infinite; }
  @keyframes hsCoreMint { 0%, 16% { opacity: 0.2; } 40%, 72% { opacity: 1; } 88%, 100% { opacity: 0.2; } }
  .hs-ping { position: absolute; right: 1.4rem; top: 1.3rem; width: 16px; height: 16px; border-radius: 50%; border: 1px solid rgba(255,69,48,0.85); opacity: 0; animation: hsMint 4.8s ease-out infinite; }
  @keyframes hsMint { 0%, 46% { opacity: 0; transform: scale(0.3); } 56% { opacity: 1; } 82%, 100% { opacity: 0; transform: scale(1.9); } }
  .hs-stat { display: block; margin-top: 1.2rem; text-align: center; font-family: var(--mono); font-size: clamp(0.6rem, 0.78vw, 0.7rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); }
  @media (max-width: 800px) { .hero-stack { display: none; } .solstice-hero .hero-content { grid-template-columns: 1fr; } }
  @media (max-height: 640px) { .hs-stat { display: none; } .hero-stack { transform: translateY(-28px); } .hs-card { padding: 0.9rem 1.2rem; } .hs-gap { height: 40px; } .hc-grid { margin-top: 0.7rem; padding-top: 0.65rem; gap: 0.8rem; } .hc-grid .k { font-size: 0.5rem; } .hc-grid .v { font-size: 0.58rem; margin-top: 0.25rem; } .hc-t { font-size: 0.64rem; } }
  html.rm .hs-card.net, html.rm .hs-dot, html.rm .hs-card.net .hc-t::before, html.rm .hs-card.core .hc-t::before, html.rm .hs-ping { animation: none; }
  .solstice-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5.6rem); line-height: 0.97; font-weight: 500; letter-spacing: -0.035em; color: var(--text); max-width: 900px; }
  .solstice-hero .lede { color: var(--text-mid); font-size: 1.05rem; line-height: 1.6; max-width: 600px; font-weight: 300; margin-top: 0.5rem; }
  .solstice-hero .chip-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1rem; }
  .solstice-hero .chip-row span { font-family: var(--mono); font-size: 0.66rem; padding: 0.28rem 0.65rem; border-radius: 100px; background: var(--bg-elev); color: var(--text-mid); border: 1px solid var(--line-2); letter-spacing: 0.04em; }
  .solstice-hero .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }
  .scroll-cue { position: absolute; left: 50%; bottom: calc(3% + 1.4rem); transform: translateX(-50%); z-index: 4; display: flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); }
  .scroll-cue i { font-style: normal; animation: cueDip 1.8s ease-in-out infinite; }
  @keyframes cueDip { 0%,100% { transform: translateY(-2px); opacity: 0.5; } 50% { transform: translateY(3px); opacity: 1; } }

  /* Content band aligns with nav (3% gutters, no 1240px cap) */
  .rk-wrap { max-width: none; padding: 0 3%; }
  hr.rk-divider { max-width: none; padding: 0 3%; }

  /* ===== Prologue ===== */
  .prologue { padding: 9rem 0 8rem; text-align: center; }
  .prologue .line { font-size: clamp(1.6rem, 3.4vw, 2.6rem); font-weight: 500; letter-spacing: -0.028em; line-height: 1.15; max-width: 780px; margin: 1.25rem auto 1.5rem; text-wrap: balance; }
  .prologue .line em { font-style: normal; color: var(--text-dim); }
  .prologue .sub { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
  .prologue .sub b { color: var(--text-mid); font-weight: 500; }

  /* ===== Chapter scaffolding — split stage: copy rail left, full-bleed visual right ===== */
  .ch-run { position: relative; }
  .ch-stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-columns: minmax(300px, 31%) 1fr; padding: 0 3%; box-sizing: border-box; }
  .st-left { position: relative; z-index: 6; padding: calc(90px + 3vh) 1.5rem 5.5vh 0; display: flex; flex-direction: column; }
  .st-left h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -0.028em; font-weight: 500; margin-top: 0.6rem; line-height: 1.02; }
  .st-caps { position: relative; margin-top: auto; min-height: 11.5em; }
  .sc-cap { position: absolute; left: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(14px); transition: opacity 0.45s ease, transform 0.45s ease; pointer-events: none; }
  .sc-cap.on { opacity: 1; transform: none; }
  .sc-cap p { font-size: clamp(0.95rem, 1.4vw, 1.1rem); color: var(--text-mid); line-height: 1.62; font-weight: 300; text-wrap: pretty; }
  .sc-cap p strong { color: var(--text); font-weight: 500; }
  .sc-cap .cap-tag { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); display: block; margin-bottom: 0.7rem; }
  .cap-index { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; color: var(--text-faint); margin-top: 1.4rem; }
  .cap-index b { color: var(--text); font-weight: 500; }
  .st-vis { position: relative; overflow: hidden; }
  .glass { background: rgba(16,16,18,0.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line-2); }
  [data-theme="light"] .glass { background: rgba(255,255,255,0.72); }

  /* ===== Scene 1 — spec schematic (5a) ===== */
  .sc-layers { position: absolute; inset: 0; }
  .r5-wrap { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 88%; --bh: clamp(220px, 31vh, 240px); --g0: clamp(72px, 11vh, 120px); }
  .r5-block { position: absolute; left: 0; right: 0; height: var(--bh); border-top: 1px solid var(--line-2); padding: clamp(1.5rem, 2.8vh, 2.3rem) 0 2.6rem; display: flex; flex-direction: column; transition: opacity 0.45s; }
  .r5-block.net { top: calc(50% - var(--bh) - var(--g0)); }
  .r5-block.core { top: calc(50% + var(--g0)); border-top: none; }
  .r5-head { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: clamp(0.72rem, 1vw, 0.95rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--text); }
  .r5-head span { color: var(--text-faint); letter-spacing: 0.14em; }
  .r5-grid { margin-top: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.9rem 1.8rem; }
  .r5-grid .k { font-family: var(--mono); font-size: clamp(0.6rem, 0.8vw, 0.78rem); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 0.85rem; }
  .r5-grid .v { font-size: clamp(1rem, 1.6vw, 1.5rem); font-weight: 300; color: var(--text-mid); }
  .r5-edge { position: absolute; left: 0; right: 0; height: 1px; background: var(--line-2); transform-origin: left; transform: scaleX(0); }
  .r5-edge.e-net { bottom: 0; }
  .r5-edge.e-core { top: 0; }
  .r5-conn i { position: absolute; width: 1px; background: var(--line); transform-origin: top; }
  .r5-conn i:nth-child(1) { left: 28%; } .r5-conn i:nth-child(2) { left: 50%; } .r5-conn i:nth-child(3) { left: 72%; }
  .r5-dot { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--text); transform: translate(-50%, -50%); opacity: 0; }
  .r5-gaplbl { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--mono); font-size: clamp(0.64rem, 0.85vw, 0.82rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; background: var(--bg); padding: 0 0.8rem; z-index: 2; transition: opacity 0.4s; }
  .r5-seam { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--gradient); opacity: 0; }
  .r5-final { position: absolute; right: 0; top: 50%; transform: translateY(-50%); padding-left: 0.7rem; background: var(--bg); font-family: var(--mono); font-size: clamp(0.64rem, 0.85vw, 0.82rem); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); opacity: 0; transition: opacity 0.4s; z-index: 3; }

  /* ===== Scene 2 — vertical settlement spine ===== */
  .sc-spine { position: absolute; inset: 0; --pd: 0; --sx: clamp(56px, 16%, 200px); }
  .spine { position: absolute; left: var(--sx); top: 9%; bottom: 9%; width: 1px; background: var(--line-2); }
  .spine-fill { position: absolute; left: var(--sx); top: 9%; width: 1px; height: calc(82% * var(--pd)); background: var(--gradient); }
  .tx-dot { position: absolute; left: var(--sx); top: calc(9% + 82% * var(--pd)); width: 6px; height: 6px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--text); z-index: 3; }
  .station { position: absolute; left: var(--sx); top: calc(9% + 82% * var(--i)); }
  .station .st-node { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--bg); border: 1px solid var(--line-2); transition: background 0.3s, border-color 0.3s; }
  .station .st-card { position: absolute; left: 34px; top: 0; transform: translateY(-50%); width: min(420px, calc(100vw * 0.66 - var(--sx) - 4rem)); border-top: 1px solid var(--line-2); padding: 0.7rem 0 0; opacity: 0.3; transition: opacity 0.35s; }
  .station .st-card .st-t { display: flex; justify-content: space-between; align-items: baseline; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); }
  .station .st-card .st-n { font-size: clamp(1rem, 1.4vw, 1.25rem); font-weight: 300; color: var(--text); letter-spacing: -0.01em; margin-top: 0.45rem; }
  .station .st-card .st-lg { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em; color: var(--text-faint); margin-top: 0.45rem; line-height: 1.7; transition: color 0.35s; }
  .station.on .st-node { background: var(--text); border-color: var(--text); }
  .station.on .st-card { opacity: 1; }
  .station.on .st-card .st-lg { color: var(--text-dim); }
  .station.on .st-card .st-lg b { color: var(--text-mid); font-weight: 500; }
  .tx-ghost { position: absolute; right: 3%; bottom: 4%; font-family: var(--mono); font-weight: 500; font-size: clamp(4rem, 13vw, 12rem); letter-spacing: -0.05em; line-height: 1; color: var(--text); opacity: 0.07; font-variant-numeric: tabular-nums; pointer-events: none; white-space: nowrap; }
  .tx-hud { position: absolute; top: calc(90px + 3vh); right: 3%; z-index: 5; display: flex; align-items: center; gap: 0.9rem; font-variant-numeric: tabular-nums; }
  .tx-status { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-dim); transition: color 0.4s; }
  .tx-status.final { color: var(--text); }
  .st-ping { position: absolute; left: 0; top: 0; width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(255,69,48,0.85); opacity: 0; transform: translate(-50%, -50%) scale(0.3); pointer-events: none; }
  .st-ping.go { animation: stMint 0.9s ease-out forwards; }
  @keyframes stMint { 0% { opacity: 0; transform: translate(-50%,-50%) scale(0.3); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.1); } }
  html.rm .st-ping { display: none; }

  /* ===== Scene 3 — shield, full height ===== */
  .sc-shield { position: absolute; inset: 0; display: grid; place-items: center; }
  .shield { position: relative; width: min(74vh, 88%); aspect-ratio: 1; display: grid; place-items: center; }
  .ledger { position: relative; width: 32%; aspect-ratio: 1; border-radius: 14px; background: var(--bg-card); border: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; text-align: center; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.3); }
  .ledger::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--gradient); }
  [data-theme="light"] .ledger { box-shadow: 0 24px 50px rgba(20,20,40,0.18), 0 4px 12px rgba(20,20,40,0.1); }
  .ledger .ld-t { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--text); }
  .ledger .ld-s { font-family: var(--mono); font-size: 0.58rem; color: var(--text-dim); }
  .ring { position: absolute; border-radius: 32px; opacity: 0; transform: scale(1.14); will-change: transform, opacity; }
  .ring .r-label { position: absolute; top: -0.62em; left: 30px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; background: var(--bg); padding: 0 8px; white-space: nowrap; }
  .ring.r1 { width: 56%; height: 56%; border: 1px solid rgba(255,69,48,0.55); box-shadow: 0 10px 30px rgba(0,0,0,0.25); } .ring.r1 .r-label { color: var(--g-1); }
  .ring.r2 { width: 77%; height: 77%; border: 1px solid rgba(201,60,236,0.5); box-shadow: 0 18px 44px rgba(0,0,0,0.3); } .ring.r2 .r-label { color: var(--g-2); }
  .ring.r3 { width: 98%; height: 98%; border: 1px solid rgba(105,112,224,0.55); box-shadow: 0 28px 60px rgba(0,0,0,0.35); } .ring.r3 .r-label { color: var(--g-5, #6970e0); }
  [data-theme="light"] .ring.r1 { box-shadow: 0 10px 26px rgba(20,20,40,0.1); }
  [data-theme="light"] .ring.r2 { box-shadow: 0 16px 36px rgba(20,20,40,0.12); }
  [data-theme="light"] .ring.r3 { box-shadow: 0 24px 48px rgba(20,20,40,0.14); }
  .shield-badge { position: absolute; left: 50%; bottom: -2.6rem; transform: translateX(-50%); font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-mid); opacity: 0; transition: opacity 0.5s; white-space: nowrap; }
  .shield-badge.on { opacity: 1; }

  @media (max-width: 980px) {
    .ch-stage { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
    .st-left { padding: calc(76px + 2vh) 0 0; }
    .st-caps { min-height: 9.5em; margin-top: 1rem; }
    .ch-stage { grid-template-rows: auto minmax(0, 1fr); }
    .st-vis { min-height: 0; }
    .r5-wrap { width: 92%; height: 100%; max-height: 340px; --bh: 104px; --g0: 34px; }
    .r5-block { height: 104px; padding-top: 0.7rem; }
    .r5-block.net { top: calc(50% - 104px - 34px); }
    .r5-block.core { top: calc(50% + 34px); }
    .r5-grid { margin-top: 0.6rem; }
    .r5-grid .k { font-size: 0.48rem; margin-bottom: 0.2rem; }
    .r5-gaplbl { font-size: 0.52rem; }
    .r5-final { font-size: 0.52rem; }
    .r5-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem 0.8rem; }
    .r5-grid .v { font-size: 0.72rem; }
    .r5-head { font-size: 0.56rem; }
    .st-caps { min-height: 6.5em; }
    .st-left h2 { font-size: clamp(1.3rem, 4.5vw, 1.7rem); }
    .sc-spine { --sx: 30px; }
    .station .st-card { width: calc(100vw - 80px); }
    .tx-ghost, .tx-hud { display: none; }
    .shield { width: min(48vh, 92%); }
  }

  /* ===== Detail scaffold — echoes the chapter stage ===== */
  .detail { padding: clamp(4.5rem, 10vh, 7.5rem) 3%; display: grid; grid-template-columns: minmax(300px, 31%) 1fr; gap: 1.5rem; align-items: start; }
  /* depth-exercise widgets — same d-head / d-body rhythm as the other detail
     sections, but pinned: the grid lives inside the sticky so it scrubs. */
  .detail.wgt-full { display: block; padding: 0 3%; }
  .wgt-full .w-pin-sticky { padding: clamp(4.5rem, 10vh, 7.5rem) 0 clamp(3rem, 7vh, 5rem); }
  .wgt-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vh, 2.5rem); align-items: start; }
  .wgt-full .d-body > :first-child { margin-top: 0; }
  /* Taller widget graphics — viewport-dynamic (vh with min/max); inner rows distribute to fill */
  .xr-block { min-height: clamp(280px, 42vh, 440px); display: flex; flex-direction: column; }
  .xr-row { flex: 1; align-items: center; }
  .atomic-grid { min-height: clamp(260px, 40vh, 400px); }
  .led { display: flex; flex-direction: column; }
  .led .lh { flex: 0 0 auto; }
  .led-row { flex: 1; align-items: center; }
  .rev-track { height: clamp(140px, 22vh, 210px); }
  @media (max-width: 980px) { .wgt-grid { grid-template-columns: 1fr; gap: 2rem; align-items: start; } }
  @media (max-width: 700px) { .xray-grid { grid-template-columns: 1fr; gap: 24px; } }
  .detail .d-head { padding-right: 1.5rem; }
  .detail .d-head h2 { font-size: clamp(1.7rem, 2.6vw, 2.5rem); letter-spacing: -0.028em; font-weight: 500; margin-top: 0.6rem; line-height: 1.06; text-wrap: balance; }
  .detail .d-sub { margin-top: 1.1rem; font-size: clamp(0.95rem, 1.4vw, 1.05rem); color: var(--text-mid); line-height: 1.62; font-weight: 300; max-width: 400px; text-wrap: pretty; }
  .d-body { min-width: 0; padding-top: 0.5rem; }
  @media (max-width: 980px) { .detail { grid-template-columns: 1fr; gap: 2rem; } }
  .d-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
  .d-stats > div { border-top: 1px solid var(--line-2); padding-top: 1rem; }
  .d-stats .num { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 300; color: var(--text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
  .d-stats .num .unit { font-size: 0.55em; font-weight: 400; color: var(--text-dim); margin-left: 0.1em; }
  .d-stats .cap { font-family: var(--mono); font-size: 0.64rem; color: var(--text-dim); letter-spacing: 0.1em; margin-top: 0.55rem; line-height: 1.7; text-transform: uppercase; }
  @media (max-width: 900px) { .d-stats { grid-template-columns: 1fr; gap: 1.25rem; } }
  .spec-table { background: var(--bg-card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; font-family: var(--mono); font-size: 0.82rem; }
  .spec-row { display: grid; grid-template-columns: 220px 1fr; border-bottom: 1px solid var(--line); padding: 0.95rem 1.5rem; align-items: center; }
  .spec-row:last-child { border-bottom: none; }
  .spec-key { color: var(--text-dim); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
  .spec-val { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; }
  .spec-val .accent-val { background: var(--gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
  @media (max-width: 700px) { .spec-row { grid-template-columns: 1fr; gap: 0.35rem; padding: 1rem 1.25rem; } }

  /* 6d "Disclosure table" port from the depth exercise — the table is the
     interface: each spec row expands in place with its supporting detail.
     One row open at a time, chevron rotates, height-only ease. */
  .spec-table .ph { display: flex; justify-content: space-between; padding: 14px 1.5rem; border-bottom: 1px solid var(--line); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); }
  .disc-item { border-bottom: 1px solid var(--line); }
  .disc-item:last-child { border-bottom: none; }
  .spec-table .disc-head { display: grid; grid-template-columns: 220px 1fr 24px; gap: 12px; align-items: center; padding: 0.95rem 1.5rem; cursor: pointer; transition: background 0.15s; }
  .spec-table .disc-head:hover { background: var(--bg-card-2); }
  .disc-head .chev { justify-self: end; color: var(--text-dim); transition: transform 0.3s cubic-bezier(0.16,1,0.3,1); font-size: 0.7rem; }
  .disc-item.is-open .chev { transform: rotate(90deg); }
  .disc-detail { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.16,1,0.3,1); }
  .disc-item.is-open .disc-detail { max-height: 180px; }
  .disc-detail-in { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; padding: 4px 1.5rem 1.2rem; }
  .disc-detail .k { font-size: 0.56rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 3px; }
  .disc-detail .v { font-size: 0.72rem; color: var(--text-mid); }
  @media (max-width: 700px) {
    .spec-table .disc-head { grid-template-columns: 1fr 24px; gap: 0.35rem; padding: 1rem 1.25rem; }
    .disc-detail-in { grid-template-columns: 1fr 1fr; padding: 4px 1.25rem 1.1rem; }
    .disc-item.is-open .disc-detail { max-height: 260px; }
  }
  .uc-strip { display: flex; flex-direction: column; gap: 0.9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--bg-card); padding: 1.5rem 1.75rem; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.03em; }
  .uc-strip .uc-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: baseline; }
  .uc-strip .uc-k { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-dim); min-width: 120px; }
  .uc-strip .uc-row span { color: var(--text-mid); }
  .uc-strip .uc-row span b { color: var(--text); font-weight: 500; }

  /* exploration switcher (remove when a direction is chosen) */
  .variant-strip { position: fixed; bottom: 16px; right: 16px; z-index: 1500; display: flex; gap: 4px; background: var(--bg-elev); border: 1px solid var(--line-2); border-radius: 100px; padding: 4px; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em; }
  .variant-strip a, .variant-strip span { padding: 0.3rem 0.7rem; border-radius: 100px; color: var(--text-dim); }
  .variant-strip .on { background: var(--text); color: var(--bg); }
  .variant-strip a:hover { color: var(--text); }

  /* Reduced motion: collapse runways, show final states */
  html.rm .ch-run { height: auto !important; }
  html.rm .ch-stage { position: relative; height: auto; min-height: 88vh; }
  html.rm .scroll-cue i { animation: none; }

/* ===== webflow template neutralizer ===== */
p, li, address, figure, blockquote { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
/* the local `.cta + footer` seam fix can't match across .w-embed wrappers;
   this bundle is home-only so the flat rule is safe */
footer.lc-footer { margin-top: 0; }

/* ===== CMS news rail (home) — #news-scoped: whtml drops classes it didn't
   create styles for, so the section/head/wrap divs publish classless ===== */
#news { position: relative; padding: 4rem 0; }
#news > div { max-width: 1600px; margin: 0 auto; padding: 0 3rem; }
#news > div > div:first-child { display: flex; align-items: center;
  justify-content: space-between; gap: 2rem; margin-bottom: 2.4rem; }
#news > div > div:first-child h2 { margin: 0; }
#news > div > div:first-child > div { display: flex; gap: 0.6rem; }
#news a[data-rknk] { width: 46px; height: 46px; border-radius: 12px;
  border: 1px solid var(--line-2); background: transparent; color: var(--text-mid);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1rem;
  text-decoration: none; padding: 0;
  transition: color 0.3s, border-color 0.3s, transform 0.3s,
              border-radius 0.42s cubic-bezier(0.16,1,0.3,1); }
#news a[data-rknk]:hover { color: var(--text); border-color: var(--text-mid);
  border-radius: 24px; transform: translateY(2px); }
#news a[data-rknk].is-off { opacity: 0.3; pointer-events: none; }
#news .w-dyn-items { display: grid; grid-auto-flow: column;
  grid-auto-columns: minmax(380px, 1fr); gap: 1.5rem; overflow-x: auto;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none;
  padding-bottom: 4px; }
#news .w-dyn-items::-webkit-scrollbar { display: none; }
#news .w-dyn-item { scroll-snap-align: start; display: flex; }
#news .card { background: var(--bg-card); border: 1px solid var(--line);
  border-radius: 16px; box-shadow: none; color: var(--text); width: 100%;
  min-height: 0; padding: 0; transition: border-color 0.3s, transform 0.3s; }
#news .card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: none; }
#news .blog-card-title { color: var(--text); }
#news .blog-card-excerpt { color: var(--text-mid); font-weight: 300; }
#news .arrow-link-circle { background: rgba(255,255,255,0.05); color: var(--text); }
#news .card:hover .arrow-link-circle { background: var(--text); color: var(--bg); }
#news .badge { display: none; }
.rk-news-door { margin-top: 2.2rem; }
.rk-news-door a { display: inline-block; font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
  text-decoration: none; border-bottom: 1px solid var(--line-2); padding-bottom: 6px; }
.rk-news-door a:hover { color: var(--text); border-bottom-color: var(--text-mid); }
@media (max-width: 700px) { #news .w-dyn-items { grid-auto-columns: minmax(280px, 86%); } }