/* =====================================================================
   HSI DARK GALLERY — homepage theme (loaded after style.css, html.dark)
   Design Language: dark museum room, luminous system intelligence,
   liquid glass sparingly (nodes, core, panel, primary CTAs), motion =
   meaning on the one engine clock. No SVG filters (perf law), no neon
   overload, no spinning. The intelligence is the light.
   ===================================================================== */

html.dark {
  /* approved dark palette (revision brief 2026-07-12) */
  /* COLOR CANON V2 (2026-07-14): true black + neutral ink + steel blue + gold.
     Extracted from Sheri's approved mockup. No navy floods, NO PURPLE. */
  --bg-0: #020204;          /* page — true black */
  --bg-1: #030408;          /* sections */
  --bg-2: #0a0e14;          /* cards / surfaces */
  --ink: #e9eaec;
  --ink-soft: #a9adb4;
  --ink-faint: #70757d;
  --electric: #3d7cc3;      /* steel blue — the accent */
  --cobalt: #16324f;
  --sky: #5b9bd9;
  --ice: #8fc2ea;
  --glass-bg: rgba(10, 14, 20, 0.6);
  --glass-edge: rgba(140, 165, 195, 0.18);
  --glass-hi: rgba(255, 255, 255, 0.07);
  --gold: #e8ce9c;
  --particle-rgb: 120, 160, 205;
}

html.dark body {
  background: var(--bg-0);
  color: var(--ink);
}

/* ---------- atmosphere: layer 1 of the depth language ---------- */
html.dark .atmosphere {
  background:
    radial-gradient(60% 45% at 18% 8%,  rgba(61, 124, 195, 0.08), transparent 70%),
    radial-gradient(55% 40% at 85% 30%, rgba(232, 206, 156, 0.04), transparent 72%),
    radial-gradient(70% 55% at 50% 105%, rgba(61, 124, 195, 0.06), transparent 75%);
  opacity: calc(0.7 + 0.3 * var(--drift, 0.5));
}
/* almost-invisible field grid */
html.dark body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(0deg,  transparent 0 79px, rgba(120, 160, 205, 0.012) 79px 80px),
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(120, 160, 205, 0.012) 79px 80px);
}
html.dark .nav, html.dark section, html.dark footer, html.dark .strip, html.dark .divider-star { position: relative; z-index: 1; }

/* ---------- nav ---------- */
html.dark .nav {
  background: rgba(9, 12, 20, 0.72);
  border-bottom: 1px solid rgba(148, 178, 224, 0.12);
}
html.dark .nav-links a { color: var(--ink-soft); }
html.dark .nav-links a:hover { color: var(--ice); }
html.dark .brand-word { color: var(--ink); }
html.dark .brand-sub { color: var(--ink-soft); }
html.dark .brand svg circle[stroke] { stroke: #d7e3f4; }
html.dark .brand svg circle[fill] { fill: var(--sky); }

/* ---------- type ---------- */
html.dark .hero h1, html.dark .title { color: var(--ink); }
html.dark .hero h1 .accent { color: var(--sky); }
html.dark .kicker { color: var(--sky); }
html.dark .lede, html.dark .sub { color: var(--ink-soft); }
html.dark .eyebrow { color: var(--sky); }

/* ---------- buttons: liquid glass ghost, luminous primary ---------- */
html.dark .btn-primary {
  background: linear-gradient(180deg, #2f66c4, #1c3f86);
  border: 1px solid rgba(96, 165, 250, 0.55);
  box-shadow: 0 0 22px rgba(37, 99, 235, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  color: #f2f7ff;
}
html.dark .btn-primary:hover { box-shadow: 0 0 30px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.22); }
html.dark .btn-ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--glass-edge);
  color: var(--ice);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html.dark .btn-ghost:hover { border-color: rgba(148, 178, 224, 0.45); }

/* ---------- hero: the dark room ---------- */
html.dark .hero { background: var(--bg-0); position: relative; }
html.dark .hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 4;
  background: linear-gradient(90deg, transparent 4%, rgba(232, 206, 156, 0.45) 30%, rgba(232, 206, 156, 0.7) 50%, rgba(232, 206, 156, 0.45) 70%, transparent 96%);
  box-shadow: 0 0 12px rgba(232, 206, 156, 0.35);
  opacity: calc(0.6 + 0.4 * var(--breath, 0.4));
}
/* mobile: one unified vertical composition — art covers, text anchors low */
@media (max-width: 700px) {
  /* in-flow art + text right after = a void is structurally impossible */
  html.dark .hero { position: relative; min-height: 0; display: block; overflow: hidden; }
  html.dark .hero-figure {
    position: relative; inset: auto; margin: 0; z-index: 1; pointer-events: none;
    height: 58svh;
  }
  html.dark .hero-figure picture, html.dark .hero-figure .hero-art {
    width: 100%; height: 100%; object-fit: cover; object-position: center 12%;
  }
  html.dark .hero-veil {
    position: absolute; inset: -2px; z-index: 2;
    background: linear-gradient(0deg, #020204 0%, rgba(2, 2, 4, 0.55) 14%, transparent 34%);
  }
  html.dark .hero-inner {
    position: relative; z-index: 3; width: 100%;
    padding: 6px 22px 36px; margin: -30px 0 0;
    min-height: 0; text-align: left;
  }
  html.dark .hero-inner > div { display: grid; gap: 12px; }
  html.dark .hero h1 { font-size: clamp(30px, 9vw, 38px); margin: 0; }
  html.dark .hero .kicker { margin: 0; }
  html.dark .hero .lede-short { margin: 0; }
  html.dark .hero-ctas { margin-top: 6px; }
}
html.dark .hero .tm { color: var(--ink-faint); }
html.dark .field-ring { border-color: rgba(96, 165, 250, 0.16); }
/* the figure dissolves into the room — no hard photo edge */
html.dark .hero-figure img {
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
}
html.dark .hero-wave { display: none; }

/* ---------- trust strip ---------- */
html.dark .strip {
  background: rgba(3, 5, 8, 0.85);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-top: 1px solid rgba(148, 178, 224, 0.14);
  border-bottom: 1px solid rgba(148, 178, 224, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
html.dark .strip-item h4 { color: var(--ink); }
html.dark .strip-item p { color: var(--ink-faint); }
html.dark .strip-item svg { color: var(--sky); }

html.dark .divider-star { background: transparent; }

/* ---------- sections ---------- */
html.dark section.block { background: var(--bg-1); }
html.dark section.block.tinted { background: linear-gradient(180deg, #030408, #04060b); }

/* =====================================================================
   LIQUID GLASS  (.lg) — the interface material.
   Glass = backdrop refraction + inner depth + edge highlight + a whisper
   of chromatic dispersion AT THE RIM ONLY (two hue-shifted edge rings,
   sub-pixel offset — no SVG displacement filters, ever).
   ===================================================================== */
.lg {
  position: relative;
  background:
    radial-gradient(120% 120% at 30% 20%, rgba(255, 255, 255, 0.07), transparent 55%),
    var(--glass-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.25); backdrop-filter: blur(14px) saturate(1.25);
  border: 1px solid var(--glass-edge);
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -10px 22px rgba(9, 14, 26, 0.5),
    0 14px 40px rgba(0, 0, 0, 0.45);
}
/* chromatic whisper: warm rim upper-left, cool rim lower-right */
.lg::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  border: 1px solid transparent;
  background:
    linear-gradient(135deg, rgba(255, 170, 150, 0.16), transparent 28%) border-box,
    linear-gradient(315deg, rgba(120, 200, 255, 0.18), transparent 28%) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
}

/* flow stroke: a slow arc of deep cobalt light circulating the rim.
   Not rotation of the object — a traveling brightness on the border. */
@property --lga { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.lg-flow::after {
  content: ""; position: absolute; inset: -2px; border-radius: inherit; pointer-events: none;
  padding: 2px;
  background: conic-gradient(from var(--lga),
    transparent 0deg, rgba(37, 99, 235, 0.0) 250deg,
    rgba(37, 99, 235, 0.65) 300deg, rgba(96, 165, 250, 0.85) 320deg,
    rgba(37, 99, 235, 0.4) 340deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 27s linear infinite, lgbreathe 9s ease-in-out infinite;
}
@keyframes lgflow { to { --lga: 360deg; } }
@keyframes lgbreathe { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lg-flow::after { animation: none; opacity: 0.5; } }

/* =====================================================================
   ORBITAL SYSTEM MAP — the exhibit
   ===================================================================== */
html.dark .map-layout {
  display: grid; grid-template-columns: minmax(200px, 0.62fr) minmax(0, 1.5fr) minmax(260px, 0.72fr);
  gap: 44px; align-items: center; max-width: 1400px; margin: 0 auto; padding: 10px 28px 30px;
  position: relative;
}
html.dark .map-layout::before {
  content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 700px; height: 700px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(61, 124, 195, 0.10), rgba(232, 206, 156, 0.03) 45%, transparent 70%);
  opacity: calc(0.6 + 0.4 * var(--breath, 0.4));
}
html.dark .map-intro { display: grid; gap: 16px; align-content: start; }
html.dark .map-intro .intro-rule {
  width: 44px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  box-shadow: 0 0 8px rgba(233, 205, 150, 0.6);
}
html.dark .map-intro p { color: var(--ink-faint); font-size: 14px; line-height: 1.7; margin: 0; }
html.dark .map-intro p strong { color: var(--ink); font-weight: 600; font-size: 15px; }
html.dark .map-intro .btn { justify-self: start; margin-top: 6px; }
html.dark .orbit {
  position: absolute; inset: 5%; border-radius: 50%; pointer-events: none;
  border: 1px dashed rgba(91, 132, 255, 0.16);
  animation: orbitspin 180s linear infinite;
}
@media (prefers-reduced-motion: reduce) { html.dark .orbit { animation: none; } }
@keyframes orbitspin { to { transform: rotate(360deg); } }
@media (max-width: 1080px) {
  html.dark .map-layout { grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr); }
  html.dark .map-intro { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 900px) { html.dark .map-layout { grid-template-columns: 1fr; } }

html.dark .map-stage { position: relative; aspect-ratio: 1/1; max-width: 700px; width: 100%; margin: 0 auto; }
html.dark .map-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
html.dark .map-line { stroke: #5b84ff; stroke-width: 0.3; stroke-opacity: calc(0.07 + 0.13 * var(--breath, 0.4)); }
html.dark .map-line.active {
  stroke: rgba(96, 165, 250, 0.9); stroke-width: 0.45;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  animation: linkdraw 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
@keyframes linkdraw { to { stroke-dashoffset: 0; } }

/* the coherence core */
html.dark .map-core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 34%; aspect-ratio: 1/1; border-radius: 50%; z-index: 2;
  display: grid; place-content: center; text-align: center; gap: 4px;
}
html.dark .map-core span {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 600; letter-spacing: 0.22em;
  color: var(--ink); margin-left: 0.22em;
}
html.dark .map-core small { font-size: 10px; letter-spacing: 0.34em; color: var(--sky); margin-left: 0.34em; }
/* halo breathes with the room; blooms on coherence pulse */
html.dark .map-core .halo {
  position: absolute; inset: -24%; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(91, 132, 255, 0.45), rgba(63, 110, 232, 0.12) 55%, transparent 74%);
  opacity: calc(0.5 + 0.5 * var(--breath, 0.4));
  transform: scale(calc(1 + 0.05 * var(--breath, 0.4) + 0.25 * var(--pulse, 0)));
  transition: transform 0.6s ease;
}

/* nodes */
html.dark .map-node {
  position: absolute; z-index: 3; transform: translate(-50%, -50%);
  display: grid; justify-items: center; gap: 8px;
  background: none; border: 0; padding: 6px; cursor: pointer;
  font: inherit; -webkit-tap-highlight-color: transparent;
  --hue: 61, 184, 255;
}
html.dark .map-node .orb-core {
  position: relative; width: 62px; height: 62px; border-radius: 50%;
  display: grid; place-items: center;
  color: rgb(var(--hue));
  box-shadow: 0 0 0 1px rgba(var(--hue), 0.5), 0 0 16px rgba(var(--hue), 0.22),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: box-shadow 0.32s ease, transform 0.32s ease;
}
html.dark .map-node .orb-core svg { width: 26px; height: 26px; position: relative; z-index: 1;
  filter: drop-shadow(0 0 6px rgba(var(--hue), 0.55)); }
html.dark .map-node .nl {
  font-size: 10px; font-weight: 650; letter-spacing: 0.16em; color: var(--ink-faint);
  transition: color 0.32s ease;
}
html.dark .map-node:hover .orb-core,
html.dark .map-node.active .orb-core {
  box-shadow: 0 0 26px rgba(var(--hue), 0.4), inset 0 1px 0 var(--glass-hi), 0 14px 40px rgba(0,0,0,0.45);
  transform: scale(1.05);
}
html.dark .map-node.active .nl, html.dark .map-node:hover .nl { color: rgba(var(--hue), 0.95); }
html.dark .map-node:focus-visible { outline: none; }
html.dark .map-node:focus-visible .orb-core { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5); }

/* system hues — approved system colors (accents only, never floods) */
html.dark .n-breath    { --hue: 61, 184, 255; }
html.dark .n-brain     { --hue: 61, 124, 224; }
html.dark .n-heart     { --hue: 255, 77, 90; }
html.dark .n-nervous   { --hue: 168, 85, 247; }
html.dark .n-fascia    { --hue: 244, 185, 66; }
html.dark .n-lymphatic { --hue: 0, 217, 255; }
html.dark .n-spine     { --hue: 214, 160, 69; }
html.dark .n-biofield  { --hue: 142, 220, 255; }

/* rest-state presence: each node wears its hue as a quiet ring + inner light */
html.dark .map-node .orb-core {
  box-shadow: 0 0 0 1px rgba(var(--hue), 0.42), 0 0 18px rgba(var(--hue), 0.16),
              inset 0 1px 0 var(--glass-hi), inset 0 0 18px rgba(var(--hue), 0.10);
}

/* per-system §7 motion identities (same laws as /systems/, dark voicing) */
html.dark .n-breath .orb-core { transform: scale(calc(1 + 0.08 * var(--breath, 0.4))); }
html.dark .n-breath:hover .orb-core, html.dark .n-breath.active .orb-core { transform: scale(calc(1.05 + 0.08 * var(--breath, 0.4))); }
html.dark .n-heart .orb-core {
  box-shadow: 0 0 0 1px rgba(var(--hue), 0.42), 0 0 18px rgba(var(--hue), 0.16),
              inset 0 1px 0 var(--glass-hi), inset 0 0 18px rgba(var(--hue), 0.10),
              0 0 calc(36px * var(--beat, 0)) rgba(var(--hue), 0.75);
}
html.dark .n-brain .orb-core::before { box-shadow: 0 0 calc(10px + 16px * var(--breath2, 0.4)) rgba(var(--hue), 0.3); }
html.dark .n-nervous .signal {
  position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px;
  border-radius: 50%; background: rgb(var(--hue)); box-shadow: 0 0 8px rgb(var(--hue));
  animation: nsignal 9s linear infinite; pointer-events: none;
}
@keyframes nsignal { from { transform: rotate(0turn) translateX(33px); } to { transform: rotate(1turn) translateX(33px); } }
html.dark .n-fascia .orb-core { animation: fweave 13.5s cubic-bezier(0.37, 0, 0.63, 1) infinite; }
@keyframes fweave { 0%,100% { transform: scale(1,1); } 33% { transform: scale(1.02,0.985); } 66% { transform: scale(0.985,1.02); } }
html.dark .n-lymphatic .orb-core::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(60% 32% at 50% calc(100% - 92% * var(--breath, 0.4)), rgba(var(--hue), 0.35), transparent 75%);
}
html.dark .n-spine .orb-core::after {
  content: ""; position: absolute; left: 50%; width: 2px; margin-left: -1px; height: 13px;
  border-radius: 2px; background: linear-gradient(180deg, transparent, rgb(var(--hue)), transparent);
  top: calc(6px + (100% - 25px) * (1 - var(--breath, 0.4))); opacity: 0.9; pointer-events: none;
}
html.dark .n-biofield .orb-core::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  border: 1px solid rgba(var(--hue), 0.75);
  transform: scale(calc(1 + 0.4 * var(--breath, 0.4)));
  opacity: calc(0.85 - 0.8 * var(--breath, 0.4));
}
@media (prefers-reduced-motion: reduce) {
  html.dark .n-nervous .signal, html.dark .n-fascia .orb-core { animation: none; }
  html.dark .map-line.active { animation: none; stroke-dashoffset: 0; }
}

/* =====================================================================
   PREVIEW PANEL — the illuminated exhibit card
   ===================================================================== */
html.dark .map-panel { border-radius: 22px; padding: 32px 32px 30px; min-height: 280px; }
html.dark .map-panel .sys-tagline {
  color: rgba(var(--hue, 91, 132, 255), 0.95); font-size: 14px; margin: -4px 0 12px;
  padding-bottom: 12px; border-bottom: 1px solid rgba(var(--hue, 91, 132, 255), 0.25);
}
html.dark .map-panel h2 { font-size: 23px; margin: 4px 0 10px; color: var(--ink); }
html.dark .map-panel p { color: var(--ink-soft); line-height: 1.65; margin: 0 0 8px; }
html.dark .map-panel .motion-line { font-style: italic; color: var(--ink-faint); font-size: 13.5px; }
html.dark .map-panel a.btn { margin-top: 14px; }
html.dark .map-panel a.btn[hidden] { display: none; }

/* 3-stage micro-storyboard */
html.dark .stages { list-style: none; display: flex; gap: 8px; margin: 16px 0 4px; padding: 0; }
html.dark .stages li {
  flex: 1; text-align: center; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-faint);
  padding: 9px 4px 8px; border-radius: 10px;
  border: 1px solid rgba(148, 178, 224, 0.12);
  background: rgba(14, 20, 34, 0.5);
  transition: color 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
  position: relative;
}
html.dark .stages li::before {
  content: ""; display: block; width: 5px; height: 5px; border-radius: 50%;
  margin: 0 auto 6px; background: rgba(148, 178, 224, 0.25);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}
html.dark .stages li.on { color: var(--ice); border-color: rgba(96, 165, 250, 0.45); }
html.dark .stages li.on::before { background: var(--sky); box-shadow: 0 0 8px rgba(96, 165, 250, 0.8); }

/* =====================================================================
   SYSTEM CARDS — calmer glass, below the exhibit
   ===================================================================== */
html.dark .sys-card {
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.6), rgba(13, 18, 31, 0.6));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 178, 224, 0.14);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35);
  color: var(--ink);
}
html.dark .sys-card h3 { color: var(--ink); }
html.dark .sys-card p { color: var(--ink-faint); }
html.dark .sys-card .sys-icon {
  background: rgba(16, 23, 39, 0.8);
  border: 1px solid rgba(148, 178, 224, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: rgba(var(--hue, 96, 165, 250), 0.95);
}
html.dark .sys-card .sys-icon::before { background: radial-gradient(circle, rgba(var(--hue, 96,165,250), 0.28), transparent 70%); }
html.dark .sys-card:hover, html.dark .sys-card.active {
  transform: translateY(-3px);
  border-color: rgba(var(--hue, 96, 165, 250), 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--hue, 96,165,250), 0.16);
}
html.dark .sys-card:hover .sys-icon svg, html.dark .sys-card.active .sys-icon svg {
  filter: drop-shadow(0 0 6px rgba(var(--hue, 96,165,250), 0.6));
}
/* hue per card — approved system colors */
html.dark .sys-card[data-sys="breath"]    { --hue: 61, 184, 255; }
html.dark .sys-card[data-sys="brain"]     { --hue: 61, 124, 224; }
html.dark .sys-card[data-sys="heart"]     { --hue: 255, 77, 90; }
html.dark .sys-card[data-sys="nervous"]   { --hue: 168, 85, 247; }
html.dark .sys-card[data-sys="fascia"]    { --hue: 244, 185, 66; }
html.dark .sys-card[data-sys="lymphatic"] { --hue: 0, 217, 255; }
html.dark .sys-card[data-sys="spine"]     { --hue: 214, 160, 69; }
html.dark .sys-card[data-sys="biofield"]  { --hue: 142, 220, 255; }

/* collectible-module presence at rest: hue ring on the icon, brighter border */
html.dark .sys-card { border-color: rgba(148, 178, 224, 0.2); }
html.dark .sys-card .sys-icon {
  box-shadow: 0 0 0 1px rgba(var(--hue, 96,165,250), 0.35),
              inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 14px rgba(var(--hue, 96,165,250), 0.12);
}
html.dark .sys-card .sys-icon svg { filter: drop-shadow(0 0 4px rgba(var(--hue, 96,165,250), 0.4)); }

/* one slow border-light run on hover only (perf: not at rest) */
html.dark .sys-card:hover::after {
  content: ""; position: absolute; inset: -1px; border-radius: 18px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lga, 0deg),
    transparent 0deg 290deg, rgba(var(--hue, 96,165,250), 0.8) 325deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 2.4s cubic-bezier(0.37, 0, 0.63, 1) 1;
  opacity: 0.9;
}
html.dark .sys-card { position: relative; }

@keyframes nsignal-sm { from { transform: rotate(0turn) translateX(27px); } to { transform: rotate(1turn) translateX(27px); } }
@media (max-width: 640px) {
  html.dark .map-node .orb-core { width: 50px; height: 50px; }
  html.dark .map-node .orb-core svg { width: 22px; height: 22px; }
  html.dark .map-node .nl { font-size: 8.5px; letter-spacing: 0.12em; }
  html.dark .map-core span { letter-spacing: 0.16em; }
  html.dark .n-nervous .signal { animation-name: nsignal-sm; }
}

/* ---------- library / professionals / bodyview / waitlist ---------- */
html.dark .lib-card {
  background: linear-gradient(160deg, rgba(20, 28, 46, 0.55), rgba(13, 18, 31, 0.55));
  border: 1px solid rgba(148, 178, 224, 0.14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35),
              0 0 calc(10px + 14px * var(--breath, 0.4)) rgba(63, 110, 232, 0.10);
}
html.dark .lib-card .lib-art { position: relative; }
html.dark .lib-card .lib-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 55%, rgba(91, 132, 255, 0.16), transparent 75%);
  opacity: calc(0.35 + 0.65 * var(--breath, 0.4));
}
html.dark .lib-card h3 { color: var(--ink); }
html.dark .lib-card p { color: var(--ink-faint); }
html.dark .lib-card .lib-art { background: linear-gradient(160deg, #101726, #0b101c); border-bottom: 1px solid rgba(148,178,224,0.1); }
html.dark .lib-card .lib-art svg { color: var(--sky); opacity: 0.9; }
html.dark .lib-link { color: var(--sky); }

html.dark .pro-chip {
  background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.18);
  color: var(--ink-soft); box-shadow: none;
}

html.dark .bv-band {
  background:
    radial-gradient(90% 130% at 80% 20%, rgba(61, 124, 195, 0.10), transparent 60%),
    linear-gradient(160deg, #0a0e14, #05070a);
  border: 1px solid rgba(140, 165, 195, 0.14);
  box-shadow: 0 0 calc(14px + 18px * var(--breath, 0.4)) rgba(61, 124, 195, 0.10);
}
html.dark .pro-chip { transition: border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease; }
html.dark .pro-chip:hover {
  border-color: rgba(91, 132, 255, 0.5); transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4), 0 0 16px rgba(63, 110, 232, 0.2);
}
html.dark .bv-band h2, html.dark .bv-band p { color: var(--ink); }
html.dark .bv-band .note { color: var(--ink-faint); }

html.dark .waitlist-form input[type="email"] {
  background: rgba(14, 20, 34, 0.8); border: 1px solid rgba(148, 178, 224, 0.22);
  color: var(--ink);
}
html.dark .waitlist-form input[type="email"]::placeholder { color: var(--ink-faint); }
html.dark .form-note { color: var(--ink-faint); }

/* ---------- hero video: the living film ---------- */
html.dark .hero-video, html.dark .hero-art { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
/* the coherence center breathes with the engine */
html.dark .hero-figure::before {
  content: ""; position: absolute; z-index: 2; pointer-events: none;
  left: 50%; top: 46%; width: 34vmin; height: 34vmin; transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91, 155, 217, 0.20), rgba(232, 206, 156, 0.05) 55%, transparent 72%);
  opacity: calc(0.35 + 0.65 * var(--breath, 0.4));
}
@media (max-width: 700px) {
  html.dark .hero-figure::before { top: 30%; width: 52vmin; height: 52vmin; }
}
html.dark .hero-figure { position: relative; }
/* a navy halo BEHIND the film, matched to the film's own edge tone, so the
   frame dissolves into atmosphere instead of meeting the room's black */
html.dark .hero-figure::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 52% at 50% 50%, rgba(13, 17, 40, 0.95), rgba(11, 14, 32, 0.5) 60%, transparent 80%);
}
/* the veil: paints matching darkness over the film's edges — plain gradient
   bands, no masks (masks on composited video are unreliable). Edge color =
   the film's own border navy, NOT page black: fading to a darker tone than
   the surroundings re-draws the rectangle you're trying to erase. */
html.dark .hero-veil {
  position: absolute; inset: -2px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(270deg, #070a12 0%, transparent 12%),
    linear-gradient(90deg,  #070a12 0%, transparent 12%),
    linear-gradient(180deg, #070a12 0%, transparent 14%),
    linear-gradient(0deg,   #070a12 0%, transparent 14%);
}

/* desktop: the film IS the section — figure large on the right, text overlays */
@media (min-width: 701px) {
  html.dark .hero {
    position: relative; overflow: hidden;
    min-height: max(90vh, 640px);
    display: flex; align-items: center;
    padding-top: 0; padding-bottom: 0;
  }
  html.dark .hero-inner {
    grid-template-columns: minmax(320px, 560px);
    position: relative; z-index: 2; width: 100%;
  }
  /* headline must live inside its column, never under the film */
  html.dark .hero h1 { font-size: clamp(32px, 3.6vw, 50px); max-width: 560px; }
  html.dark .hero .lede { max-width: 470px; }
  /* the text column must stack ABOVE its figure sibling */
  html.dark .hero-inner > div:first-child { position: relative; z-index: 3; }
  html.dark .hero-figure {
    position: absolute; top: 0; bottom: 0; right: 2%; left: auto;
    width: min(64%, 1000px); max-width: none;
    margin: 0; z-index: 1; pointer-events: none;
  }
  html.dark .hero-figure picture { display: block; width: 100%; height: 100%; }
  html.dark .hero-figure .hero-art {
    width: 100%; height: 100%; object-fit: contain; object-position: 82% center;
  }
  /* the field artwork is composed with its own dark left half — near-full-bleed */
  /* desktop veil: reading band strong enough to quiet the art's left nodes */
  html.dark .hero-veil {
    background:
      linear-gradient(90deg, #020204 0%, rgba(2, 2, 4, 0.7) 30%, rgba(2, 2, 4, 0.25) 46%, transparent 56%),
      linear-gradient(0deg, rgba(7, 8, 14, 0.85) 0%, transparent 16%);
  }
}

/* panel tagline */
html.dark .sys-tagline {
  font-weight: 650; color: var(--ice); font-size: 14px; letter-spacing: 0.02em;
  margin: -4px 0 10px !important;
}
html.dark .sys-tagline:empty { display: none; }

/* ---------- mobile hero copy swap (layout lives in the unified hero block) ---------- */
.lede-short { display: none; }
@media (max-width: 700px) {
  html.dark .hero .kicker { font-size: 11px; }
  /* homepage hero swaps to .lede-short; scoped so landing-page ledes survive */
  html.dark .hero .lede { display: none; }
  html.dark .lede-short {
    display: block; color: var(--ink-soft); font-size: 15.5px; line-height: 1.55;
    margin: 0; max-width: 34ch;
  }
}

/* =====================================================================
   DARK SYSTEM PAGES (/systems/<slug>/) — clean, clinical, premium.
   Each page sets --hue inline on <body>.
   ===================================================================== */
html.dark .sys-hero { background: transparent; position: relative; overflow: hidden; }
/* 'Foundation System' chip retired (Sheri 2026-07-13 — collided with art
   badges); visibility keeps its space so art/badge seating is untouched */
html.dark .sys-hero .label { visibility: hidden; }
/* full-bleed system artwork behind the hero (art bg is near-black, so
   plain gradient veils dissolve it into the room — no masks) */
html.dark .sys-art {
  position: absolute; left: 50%; transform: translateX(-50%);
  top: var(--art-top, 0px); width: max(100%, 1100px); max-width: 1750px; z-index: 0; pointer-events: none;
}
@media (max-width: 700px) {
  /* phone: art renders at its 1100px floor, badge Y scales by 1100/1247 ≈ 0.88 */
  html.dark .sys-art { top: calc(var(--art-top, 0px) * 0.96); }
  /* dedicated 9:16 mobile art: full-width, composed for the phone — no offset */
  html.dark .sys-art--m { width: 100%; top: 0; }
}
html.dark .sys-art picture { display: block; }
html.dark .sys-art img { width: 100%; height: auto; display: block; opacity: 0.9; }
html.dark .sys-art::after {
  content: ""; position: absolute; inset: -1px;
  background:
    linear-gradient(0deg,   #05070b 0%, rgba(5, 7, 11, 0.55) 16%, transparent 42%),
    linear-gradient(180deg, rgba(5, 7, 11, 0.7) 0%, transparent 18%),
    linear-gradient(90deg,  rgba(5, 7, 11, 0.8) 0%, transparent 14%),
    linear-gradient(270deg, rgba(5, 7, 11, 0.8) 0%, transparent 14%);
}
html.dark .sys-hero > *:not(.sys-art) { position: relative; z-index: 1; }
html.dark .sys-hero::before {
  content: ""; position: absolute; inset: -10% -20% auto; height: 130%; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 55% at 50% 32%, rgba(var(--hue, 91,132,255), 0.14), transparent 72%);
  opacity: calc(0.6 + 0.4 * var(--breath, 0.4));
}
html.dark .sys-hero .label {
  background: rgba(16, 23, 39, 0.7); color: var(--ice);
  border: 1px solid rgba(var(--hue, 91,132,255), 0.4);
}
html.dark .sys-hero .sys-icon {
  background: rgba(14, 20, 34, 0.85); color: rgba(var(--hue, 91,132,255), 0.95);
  border: 1px solid rgba(var(--hue, 91,132,255), 0.45);
  box-shadow: 0 0 0 1px rgba(var(--hue, 91,132,255), 0.15),
              0 0 calc(18px + 16px * var(--breath, 0.4)) rgba(var(--hue, 91,132,255), 0.3),
              inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
html.dark .sys-hero .sys-icon::before { background: radial-gradient(circle, rgba(var(--hue, 91,132,255), 0.35), transparent 70%); }
html.dark .sys-hero .sys-icon svg { filter: drop-shadow(0 0 6px rgba(var(--hue, 91,132,255), 0.6)); }
html.dark .sys-hero h1 { color: var(--ink); }
html.dark .sys-hero .desc { color: var(--ink-soft); }

/* four product cards — premium previews, stacked rows on phones */
html.dark .prod-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  max-width: 1060px; margin: 34px auto 8px; padding: 0 20px; text-align: left;
}
html.dark .prod-card {
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.86), rgba(5, 7, 12, 0.86));
  border: 1px solid rgba(var(--hue, 140, 165, 195), 0.32); border-radius: 16px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform var(--dur-card, 0.4s) ease, border-color var(--dur-card, 0.4s) ease, box-shadow var(--dur-card, 0.4s) ease;
}
html.dark .prod-card:hover {
  transform: translateY(-3px); border-color: rgba(var(--hue, 91,132,255), 0.5);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), 0 16px 40px rgba(0,0,0,0.5), 0 0 20px rgba(var(--hue, 91,132,255), 0.15);
}
html.dark .prod-prev {
  background: radial-gradient(80% 90% at 50% 30%, rgba(var(--hue, 91,132,255), 0.08), transparent 75%), #04060a;
  border-bottom: 1px solid rgba(var(--hue, 91,132,255), 0.18);
  display: grid; place-items: center; padding: 12px 14px;
}
html.dark .prod-prev svg { width: 100%; max-width: 190px; height: auto; }
html.dark .prod-card:hover .prod-prev svg { filter: drop-shadow(0 0 8px rgba(var(--hue, 91,132,255), 0.35)); }
html.dark .prod-body { padding: 16px 18px 16px; }
html.dark .prod-card h3 {
  font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif;
  font-weight: 500; font-size: 19px; color: var(--ink); margin: 0 0 6px;
}
html.dark .prod-card p { color: var(--ink-faint); font-size: 13.5px; line-height: 1.5; margin: 0 0 10px; }
html.dark .prod-card .soon {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: var(--sky);
}
@media (max-width: 900px) { html.dark .prod-grid { grid-template-columns: repeat(2, 1fr); } }
/* phones: full-width stacked rows — body left, preview right, tight */
@media (max-width: 640px) {
  html.dark .prod-grid { grid-template-columns: 1fr; gap: 10px; max-width: none; }
  html.dark .prod-card { flex-direction: row; align-items: stretch; }
  html.dark .prod-body { flex: 1; order: 1; padding: 14px 4px 14px 16px; }
  html.dark .prod-prev { order: 2; }
  html.dark .prod-card h3 { font-size: 17px; }
  html.dark .prod-card p { font-size: 12.5px; margin-bottom: 8px; }
  html.dark .prod-prev {
    flex: 0 0 118px; border-bottom: 0; border-left: 1px solid rgba(var(--hue, 91,132,255), 0.18);
    padding: 10px;
  }
}

/* ending callout: the page closes on purpose */
html.dark .sys-callout {
  max-width: 640px; margin: 70px auto 0; padding: 34px 28px; border-radius: 22px;
  text-align: center;
}
html.dark .sys-callout h3 {
  font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif;
  font-weight: 500; font-size: clamp(22px, 3vw, 28px); color: var(--ink); margin: 0 0 8px;
}
html.dark .sys-callout p { color: var(--ink-soft); margin: 0 0 18px; }
@media (max-width: 640px) { html.dark .sys-callout { margin: 48px 16px 0; padding: 26px 20px; } }

/* educational reveal block */
html.dark .reveal-block { max-width: 640px; margin: 64px auto 0; padding: 0 22px; text-align: center; }
html.dark .reveal-block h2 {
  font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif;
  font-weight: 500; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin: 8px 0 14px;
}
html.dark .reveal-block p { color: var(--ink-soft); line-height: 1.7; }

/* how it connects */
html.dark .connects { max-width: 720px; margin: 52px auto 0; padding: 0 22px; text-align: center; }
html.dark .connects h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--sky); margin: 0 0 18px;
}
html.dark .connect-chips { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
html.dark .connect-chips a {
  padding: 9px 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
  background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.2);
  transition: color 0.32s ease, border-color 0.32s ease, box-shadow 0.32s ease, transform 0.32s ease;
  --chue: 91, 132, 255;
}
html.dark .connect-chips a::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  margin-right: 8px; vertical-align: 1px;
  background: rgba(var(--chue), 0.9); box-shadow: 0 0 6px rgba(var(--chue), 0.7);
}
html.dark .connect-chips a:hover {
  color: var(--ice); border-color: rgba(var(--chue), 0.55); transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4), 0 0 14px rgba(var(--chue), 0.2);
}

html.dark .back-link { color: var(--ink-faint); }
html.dark .back-link:hover { color: var(--ice); }

/* ---------- footer ---------- */
html.dark footer { background: #070a10; border-top: 1px solid rgba(148, 178, 224, 0.1); }
html.dark footer h5 { color: var(--ink-faint); }
html.dark footer a { color: var(--ink-soft); }
html.dark footer a:hover { color: var(--ice); }
html.dark .foot-legal { color: var(--ink-faint); border-color: rgba(148, 178, 224, 0.1); }
html.dark .foot-tagline { color: var(--ink-faint); }


/* ---------- library preview scenes ---------- */
html.dark .lib-card .lib-scene {
  height: 150px; display: grid; place-items: center; padding: 10px 14px;
  background:
    radial-gradient(80% 90% at 50% 20%, rgba(63, 110, 232, 0.10), transparent 70%),
    linear-gradient(160deg, #0c1322, #080d18);
}
html.dark .lib-card .lib-scene svg { width: 100%; max-width: 230px; height: auto; }
html.dark .lib-card:hover .lib-scene svg { filter: drop-shadow(0 0 10px rgba(91, 132, 255, 0.35)); }

/* ---------- professionals: glowing pills on a faint field ---------- */
html.dark #professionals {
  background:
    radial-gradient(60% 80% at 50% 10%, rgba(61, 124, 195, 0.07), transparent 70%),
    linear-gradient(180deg, #04060a, #06080d);
}
html.dark .pro-chip { border-color: rgba(var(--chip-hue, 91, 132, 255), 0.4);
  box-shadow: 0 0 14px rgba(var(--chip-hue, 91, 132, 255), 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.05); }
html.dark .pro-chip:nth-of-type(1) { --chip-hue: 61, 184, 255; }
html.dark .pro-chip:nth-of-type(2) { --chip-hue: 214, 160, 69; }
html.dark .pro-chip:nth-of-type(3) { --chip-hue: 61, 124, 224; }
html.dark .pro-chip:nth-of-type(4) { --chip-hue: 244, 185, 66; }
html.dark .pro-chip:nth-of-type(5) { --chip-hue: 0, 217, 255; }
html.dark .pro-chip:nth-of-type(6) { --chip-hue: 142, 220, 255; }
html.dark .pro-chip:nth-of-type(7) { --chip-hue: 61, 184, 255; }
html.dark .pro-chip:nth-of-type(8) { --chip-hue: 168, 85, 247; }

/* ---------- Living Presence portal band ---------- */
html.dark .lp-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 1.05fr); gap: 40px; align-items: center; }
@media (max-width: 860px) { html.dark .lp-band { grid-template-columns: 1fr; text-align: center; } }
html.dark .lp-devices { display: block; }
html.dark .lp-devices img { width: 100%; height: auto; display: block; border-radius: 14px;
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.dark .lp-devices:hover img { transform: translateY(-4px) scale(1.01); }
html.dark .lp-portal { position: relative; width: 170px; aspect-ratio: 1/1; }
html.dark .lp-ring { position: absolute; border-radius: 50%; border: 1px solid; }
html.dark .lp-ring.r1 { inset: 0;   border-color: rgba(91, 155, 217, 0.28); transform: scale(calc(1 + 0.03 * var(--breath, 0.4))); }
html.dark .lp-ring.r2 { inset: 13%; border-color: rgba(232, 206, 156, 0.35); transform: scale(calc(1 + 0.05 * var(--breath2, 0.4))); }
html.dark .lp-ring.r3 { inset: 27%; border-color: rgba(143, 194, 234, 0.45); transform: scale(calc(1 + 0.07 * var(--breath, 0.4))); }
html.dark .lp-core {
  position: absolute; inset: 38%; border-radius: 50%;
  background: radial-gradient(circle at 42% 35%, rgba(240, 244, 250, 0.95), rgba(143, 194, 234, 0.5) 55%, rgba(232, 206, 156, 0.18) 100%);
  box-shadow: 0 0 calc(24px + 26px * var(--breath, 0.4)) rgba(91, 155, 217, 0.45);
}
html.dark .lp-band .eyebrow { color: var(--gold); }


/* =====================================================================
   MOBILE HERO — FINAL WORD (must outrank every earlier .hero rule)
   Unified vertical composition: the map fills the upper block (cropping
   the artwork's empty lower third), text follows immediately — no gap.
   ===================================================================== */
@media (max-width: 700px) {
  html.dark .hero { position: relative; display: block; min-height: 0; padding: 0; overflow: hidden; }
  html.dark .hero-figure {
    position: relative; inset: auto; margin: 0; max-width: none; width: 100%;
    height: 60svh; z-index: 1; pointer-events: none;
  }
  html.dark .hero-figure picture, html.dark .hero-figure .hero-art {
    width: 100%; height: 100%; object-fit: cover; object-position: center 18%;
  }
  html.dark .hero-veil {
    position: absolute; inset: -2px; z-index: 2;
    background: linear-gradient(0deg, #06070d 0%, rgba(6, 7, 13, 0.4) 14%, transparent 30%);
  }
  html.dark .hero-inner {
    position: relative; z-index: 3; width: 100%;
    display: block; padding: 2px 22px 44px; margin: 0; max-width: none;
  }
  html.dark .hero-inner > div { display: grid; gap: 12px; justify-items: start; text-align: left; }
  html.dark .hero h1 { font-size: clamp(30px, 8.6vw, 38px); margin: 0; max-width: none; }
  html.dark .hero .kicker { margin: 0; font-size: 11px; }
  html.dark .hero-ctas { margin-top: 6px; }
  html.dark .hero-figure::before { top: 38%; }
}


/* ---------- storyboard card mode: her card IS the panel ---------- */
html.dark .map-panel.has-card {
  background: none; border: 0; box-shadow: none; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
html.dark .map-panel.has-card::before { display: none; }
html.dark .map-card { display: block; }
html.dark .map-card[hidden] { display: none; }
html.dark .map-card img {
  width: 100%; height: auto; display: block; border-radius: 22px;
  border: 1px solid rgba(140, 165, 195, 0.14);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 0 calc(10px + 14px * var(--breath, 0.4)) rgba(61, 124, 195, 0.10);
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.4s ease;
}
html.dark .map-card:hover img { transform: translateY(-4px); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65), 0 0 26px rgba(61, 124, 195, 0.22); }
html.dark .map-panel.has-card .btn { margin-top: 16px; width: 100%; justify-content: center; }


/* ---------- alive cards: pointer tilt + glare sheen + swap rise ---------- */
html.dark .tilt {
  transform: perspective(950px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform 0.18s ease-out;
  will-change: transform;
}
html.dark .tilt:hover { transition: transform 0.06s linear; }
html.dark .map-card.tilt, html.dark .lp-devices.tilt { position: relative; }
html.dark .map-card.tilt::after, html.dark .lp-devices.tilt::after {
  content: ""; position: absolute; inset: 0; border-radius: 22px; pointer-events: none;
  background: radial-gradient(280px circle at var(--gx, 50%) var(--gy, 50%), rgba(232, 218, 190, 0.09), transparent 65%);
  opacity: 0; transition: opacity 0.3s ease;
}
html.dark .map-card.tilt:hover::after, html.dark .lp-devices.tilt:hover::after { opacity: 1; }
@keyframes swaprise {
  from { opacity: 0; transform: perspective(950px) translateY(14px) scale(0.985); }
  to   { opacity: 1; transform: perspective(950px) translateY(0) scale(1); }
}
html.dark .map-card.swap-in { animation: swaprise 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  html.dark .tilt { transform: none; }
  html.dark .map-card.swap-in { animation: none; }
}


/* ---------- product cards: always-on circling border light ---------- */
html.dark .prod-card { position: relative; }
html.dark .prod-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lga, 0deg),
    transparent 0deg 300deg, rgba(var(--hue, 140, 165, 195), 0.75) 336deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 21s linear infinite; opacity: 0.55;
}
html.dark .prod-card:nth-child(2)::after { animation-delay: -5.25s; }
html.dark .prod-card:nth-child(3)::after { animation-delay: -10.5s; }
html.dark .prod-card:nth-child(4)::after { animation-delay: -15.75s; }
html.dark .prod-card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.dark .prod-card::after { animation: none; opacity: 0.4; } }


/* phones: the exhibit turns its lights up */
@media (max-width: 700px) {
  html.dark .map-node .orb-core {
    box-shadow: 0 0 0 1.5px rgba(var(--hue), 0.7), 0 0 20px rgba(var(--hue), 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  html.dark .map-node .orb-core svg { filter: drop-shadow(0 0 7px rgba(var(--hue), 0.75)); }
  html.dark .map-node .nl { color: var(--ink-soft); }
  html.dark .map-line { stroke-opacity: calc(0.14 + 0.16 * var(--breath, 0.4)); }
}

/* practitioner pills breathe — staggered, gentle, alive */
html.dark .pro-chip {
  box-shadow: 0 0 calc(8px + 9px * var(--breath, 0.4)) rgba(var(--chip-hue, 91, 132, 255), 0.16),
              inset 0 1px 0 rgba(255, 255, 255, 0.05);
  animation: chipfloat 9s var(--ease-organic, ease-in-out) infinite;
}
html.dark .pro-chip:nth-of-type(2n) { animation-delay: -3s; }
html.dark .pro-chip:nth-of-type(3n) { animation-delay: -6s; }
html.dark .pro-chip:nth-of-type(4n+1) { animation-delay: -1.5s; }
@keyframes chipfloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { html.dark .pro-chip { animation: none; } }


/* =====================================================================
   NAV: Systems dropdown (desktop; mobile nav hides text links anyway)
   ===================================================================== */
html.dark .nav-drop { position: relative; display: flex; align-items: center; }
html.dark .nav-drop > a::after {
  content: "▾"; font-size: 12px; margin-left: 7px; vertical-align: 0;
  color: var(--sky); opacity: 0.95; display: inline-block;
  transition: transform 0.25s ease;
}
html.dark .nav-drop:hover > a::after, html.dark .nav-drop:focus-within > a::after { transform: translateY(1px) rotate(180deg); }
/* invisible hover bridge so the menu doesn't die crossing the gap */
html.dark .nav-drop::before { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 18px; }
html.dark .nav-menu {
  position: absolute; top: calc(100% + 15px); left: 50%; z-index: 60;
  min-width: 238px; padding: 10px; border-radius: 16px; display: grid; gap: 1px;
  opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(8px);
  transition: opacity 0.26s ease, transform 0.26s ease, visibility 0s linear 0.26s;
}
html.dark .nav-drop:hover .nav-menu, html.dark .nav-drop:focus-within .nav-menu,
html.dark .nav-drop.open .nav-menu {
  opacity: 1; visibility: visible; transform: translateX(-50%); transition-delay: 0s;
}
html.dark .nav-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-radius: 10px; font-size: 12px; letter-spacing: 0.07em;
}
html.dark .nav-menu a:hover { background: rgba(61, 124, 195, 0.14); color: var(--ice); }
html.dark .nav-menu .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(var(--chue, 91, 155, 217), 0.95);
  box-shadow: 0 0 8px rgba(var(--chue, 91, 155, 217), 0.8);
}
html.dark .nav-menu .nav-all { margin-top: 5px; padding-top: 10px; border-top: 1px solid rgba(148, 178, 224, 0.14); color: var(--sky); }

/* =====================================================================
   ENTRANCE MOTION — cards drop in deeper on dark, and on phones they
   slide in from alternating sides (coherence.js tags .reveal-l/.reveal-r
   on card-like targets; base .reveal/.is-visible machinery + its
   reduced-motion and safety-net rules live in design-system.css)
   ===================================================================== */
html.dark .reveal:not(.is-visible) { transform: translateY(30px); }
@media (max-width: 700px) {
  html.dark .reveal.reveal-l:not(.is-visible) { transform: translateX(-36px); }
  html.dark .reveal.reveal-r:not(.is-visible) { transform: translateX(36px); }
}
@media (prefers-reduced-motion: reduce) {
  html.dark .reveal:not(.is-visible), html.dark .reveal.reveal-l:not(.is-visible),
  html.dark .reveal.reveal-r:not(.is-visible) { transform: none; opacity: 1; }
}

/* =====================================================================
   LIBRARY CARDS — lights on: per-card hue rim + breathing glow +
   always-on circling border light (same voice as the product cards)
   ===================================================================== */
html.dark .lib-card {
  position: relative;
  border-color: rgba(var(--lhue, 91, 155, 217), 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 30px rgba(0, 0, 0, 0.35),
              0 0 calc(10px + 12px * var(--breath, 0.4)) rgba(var(--lhue, 91, 155, 217), 0.12);
}
html.dark .lib-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lga, 0deg),
    transparent 0deg 300deg, rgba(var(--lhue, 91, 155, 217), 0.75) 336deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 24s linear infinite; opacity: 0.5;
}
html.dark .lib-card:nth-child(2)::after { animation-delay: -4s; }
html.dark .lib-card:nth-child(3)::after { animation-delay: -8s; }
html.dark .lib-card:nth-child(4)::after { animation-delay: -12s; }
html.dark .lib-card:nth-child(5)::after { animation-delay: -16s; }
html.dark .lib-card:nth-child(6)::after { animation-delay: -20s; }
html.dark .lib-card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.dark .lib-card::after { animation: none; opacity: 0.35; } }
html.dark .lib-card:nth-child(1) { --lhue: 91, 155, 217; }
html.dark .lib-card:nth-child(2) { --lhue: 232, 206, 156; }
html.dark .lib-card:nth-child(3) { --lhue: 0, 217, 255; }
html.dark .lib-card:nth-child(4) { --lhue: 214, 160, 69; }
html.dark .lib-card:nth-child(5) { --lhue: 61, 184, 255; }
html.dark .lib-card:nth-child(6) { --lhue: 142, 220, 255; }

/* =====================================================================
   MOBILE SPACING — kill the last dead space between sections
   ===================================================================== */
@media (max-width: 700px) {
  html.dark section.block { padding: 50px 0; }
  html.dark h2.title { font-size: 26px; }
  html.dark p.sub { font-size: 14.5px; margin-top: 10px; }
  html.dark .lib-grid { margin-top: 24px; gap: 14px; }
  html.dark .lib-card .lib-scene { height: 116px; }
  html.dark .pro-grid { margin-top: 22px; }
  html.dark .map-layout { gap: 24px; padding-bottom: 16px; }
  html.dark .divider-star { padding-top: 22px; }
}

/* =====================================================================
   SYSTEM LANDING PAGES (V2 — Sheri's breath mockup, 2026-07-15)
   Black room (Canon V2), split hero, editorial rows: intro left,
   content right. Every page sets --hue inline on <body>.
   ===================================================================== */
html.dark .land-hero {
  position: relative; overflow: hidden; background: var(--bg-0);
  min-height: max(74vh, 560px); display: flex; align-items: center;
}
html.dark .land-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html.dark .land-art picture { display: block; width: 100%; height: 100%; }
html.dark .land-art img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; display: block; }
html.dark .land-veil {
  position: absolute; inset: -2px;
  background:
    linear-gradient(90deg, #020204 6%, rgba(2, 2, 4, 0.78) 30%, rgba(2, 2, 4, 0.22) 52%, transparent 64%),
    linear-gradient(0deg, #020204 0%, transparent 16%),
    linear-gradient(180deg, rgba(2, 2, 4, 0.6) 0%, transparent 14%);
}
html.dark .land-hero .wrap { position: relative; z-index: 1; width: 100%; }
html.dark .land-hero-copy { max-width: 520px; display: grid; gap: 18px; justify-items: start; padding: 70px 0; }
html.dark .land-hero .label {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ice);
  background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(var(--hue, 91, 155, 217), 0.4);
  border-radius: 999px; padding: 7px 16px;
}
html.dark .land-hero h1 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: clamp(40px, 5vw, 62px); line-height: 1.06;
  letter-spacing: -0.005em; color: var(--ink); margin: 0;
}
html.dark .land-hero h1 .tm { font-size: 0.4em; vertical-align: super; color: var(--ink-faint); }
html.dark .land-hero .lede { color: var(--ink-soft); font-size: 17.5px; line-height: 1.6; max-width: 40ch; margin: 0; }
html.dark .land-hero .hero-ctas { margin-top: 6px; }
/* per-mockup: the chip + CTA wear the system's own color */
html.dark .land-hero .label { color: rgba(var(--hue, 91, 155, 217), 0.95); }
html.dark .land-hero .btn-primary {
  background: linear-gradient(180deg, rgba(var(--hue, 61, 124, 195), 0.92), rgba(var(--hue, 61, 124, 195), 0.6));
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 0 24px rgba(var(--hue, 61, 124, 195), 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  color: #04060b; font-weight: 700;
}
html.dark .land-hero .btn-primary:hover { box-shadow: 0 0 34px rgba(var(--hue, 61, 124, 195), 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* sections: editorial rows */
html.dark .land-sec { padding: 84px 0; background: var(--bg-1); position: relative; z-index: 1; }
html.dark .land-sec.tinted2 { background: linear-gradient(180deg, #030408, #04060b); }
html.dark .land-sec h2 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: clamp(26px, 3.2vw, 36px); line-height: 1.16;
  color: var(--ink); margin: 12px 0 14px;
}
html.dark .land-copy p { color: var(--ink-soft); line-height: 1.7; font-size: 15.5px; margin: 0 0 16px; }
html.dark .land-link { color: var(--sky); font-size: 13.5px; font-weight: 650; text-decoration: none; }
html.dark .land-link:hover { color: var(--ice); }
html.dark .land-split { display: grid; grid-template-columns: minmax(300px, 0.95fr) 1.05fr; gap: 56px; align-items: center; }
html.dark .land-row { display: grid; grid-template-columns: minmax(240px, 0.72fr) 2fr; gap: 56px; align-items: start; }

/* storyboard film card */
html.dark .land-video {
  position: relative; display: block; border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(var(--hue, 91, 155, 217), 0.35);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55),
              0 0 calc(10px + 16px * var(--breath, 0.4)) rgba(var(--hue, 91, 155, 217), 0.12);
}
html.dark .land-video img { width: 100%; height: auto; aspect-ratio: 16 / 9.4; object-fit: cover; display: block; }
html.dark .land-poster { max-width: 430px; margin: 0 auto; }
html.dark .land-poster img { aspect-ratio: auto; width: 100%; height: auto; }
html.dark .poster-cta { text-align: center; margin-top: 18px; }
@media (max-width: 700px) { html.dark .land-poster { max-width: 340px; } }
html.dark .land-video .vplay {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center;
  color: #eaf2ff; background: rgba(8, 12, 20, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.35);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 0 calc(12px + 14px * var(--breath, 0.4)) rgba(var(--hue, 91, 155, 217), 0.35);
  transition: transform 0.3s ease, background 0.3s ease;
}
html.dark .land-video .vplay svg { width: 26px; height: 26px; margin-left: 3px; }
html.dark .land-video:hover .vplay { transform: translate(-50%, -50%) scale(1.08); background: rgba(37, 99, 235, 0.5); }
html.dark .land-video .vsoon {
  position: absolute; top: 12px; right: 12px; font-size: 10px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice);
  background: rgba(8, 12, 20, 0.72); border: 1px solid rgba(148, 178, 224, 0.3);
  border-radius: 999px; padding: 5px 10px;
}
html.dark .vcap { color: var(--ink-faint); font-size: 12.5px; text-align: right; margin: 10px 2px 0; }

/* why it matters — 4 pillars */
/* auto-fit: 4 pillars sit wide, 5-6 pillars tighten to fit (heart/nervous) */
html.dark .why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 26px 18px; }
html.dark .why-item { text-align: center; display: grid; gap: 8px; justify-items: center; align-content: start; }
html.dark .why-ic {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: rgba(var(--hue, 91, 155, 217), 0.95);
  background: rgba(14, 20, 34, 0.7); border: 1px solid rgba(var(--hue, 91, 155, 217), 0.4);
  box-shadow: 0 0 0 1px rgba(var(--hue, 91, 155, 217), 0.12),
              0 0 calc(10px + 12px * var(--breath, 0.4)) rgba(var(--hue, 91, 155, 217), 0.22);
}
html.dark .why-ic svg { width: 26px; height: 26px; filter: drop-shadow(0 0 5px rgba(var(--hue, 91, 155, 217), 0.5)); }
html.dark .why-item h3 {
  font-size: 12.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink); margin: 6px 0 0; line-height: 1.5;
}
html.dark .why-item p { font-size: 12.5px; color: var(--ink-faint); line-height: 1.55; margin: 0; }

/* storyboard frames */
html.dark .sb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
html.dark .sb-img {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(var(--hue, 91, 155, 217), 0.3);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4);
}
html.dark .sb-img img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform 0.5s ease; }
html.dark .sb-frame:hover .sb-img img { transform: scale(1.045); }
html.dark .sb-frame h3 { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 650; color: var(--ink); margin: 12px 0 4px; }
html.dark .sb-n {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: #060a12;
  background: rgb(var(--hue, 91, 155, 217)); box-shadow: 0 0 10px rgba(var(--hue, 91, 155, 217), 0.6);
}
html.dark .sb-frame p { font-size: 12.5px; color: var(--ink-faint); margin: 0; line-height: 1.5; }

/* resources & products — priced preview cards */
html.dark .shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 640px; }
html.dark .shop-card {
  position: relative; overflow: hidden; border-radius: 16px;
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.86), rgba(5, 7, 12, 0.86));
  border: 1px solid rgba(var(--hue, 140, 165, 195), 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
html.dark .shop-card:hover {
  transform: translateY(-3px); border-color: rgba(var(--hue, 91, 132, 255), 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--hue, 91, 132, 255), 0.15);
}
html.dark .shop-card::after {
  content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lga, 0deg),
    transparent 0deg 300deg, rgba(var(--hue, 140, 165, 195), 0.75) 336deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  animation: lgflow 21s linear infinite; opacity: 0.5;
}
html.dark .shop-card:nth-child(2)::after { animation-delay: -3.5s; }
html.dark .shop-card:nth-child(3)::after { animation-delay: -7s; }
html.dark .shop-card:nth-child(4)::after { animation-delay: -10.5s; }
html.dark .shop-card:nth-child(5)::after { animation-delay: -14s; }
html.dark .shop-card:nth-child(6)::after { animation-delay: -17.5s; }
html.dark .shop-card:hover::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { html.dark .shop-card::after { animation: none; opacity: 0.4; } }
html.dark .shop-prev {
  height: 122px; display: grid; place-items: center; padding: 12px;
  background: radial-gradient(80% 90% at 50% 30%, rgba(var(--hue, 91, 132, 255), 0.08), transparent 75%), #04060a;
  border-bottom: 1px solid rgba(var(--hue, 91, 132, 255), 0.16);
}
html.dark .shop-prev svg { width: 100%; max-width: 168px; height: auto; }
html.dark .shop-qr img { width: 86px; height: 86px; border-radius: 8px; background: #fff; padding: 5px; box-sizing: content-box; }
html.dark .shop-body { padding: 14px 16px 15px; }
html.dark .shop-body h3 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: 17px; color: var(--ink); margin: 0 0 2px;
}
html.dark .shop-body p { font-size: 12px; color: var(--ink-faint); margin: 0 0 10px; }
html.dark .shop-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
html.dark .shop-meta .price { color: var(--gold); font-weight: 650; font-size: 14.5px; }
html.dark .shop-meta .soon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sky); }

/* related systems */
html.dark .rel-grid { display: flex; flex-wrap: wrap; gap: 18px 30px; align-items: flex-start; }
html.dark .rel-item {
  display: grid; justify-items: center; gap: 10px; text-align: center; width: 96px;
  font-size: 11.5px; font-weight: 650; letter-spacing: 0.04em; line-height: 1.4;
  color: var(--ink-soft); text-decoration: none;
  transition: transform 0.3s ease, color 0.3s ease;
}
html.dark .rel-orb {
  width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  color: rgb(var(--hue, 91, 155, 217));
  background: rgba(14, 20, 34, 0.7); border: 1px solid rgba(var(--hue, 91, 155, 217), 0.5);
  box-shadow: 0 0 0 1px rgba(var(--hue, 91, 155, 217), 0.15), 0 0 16px rgba(var(--hue, 91, 155, 217), 0.18),
              inset 0 0 14px rgba(var(--hue, 91, 155, 217), 0.1);
  transition: box-shadow 0.3s ease;
}
html.dark .rel-orb svg { width: 25px; height: 25px; filter: drop-shadow(0 0 6px rgba(var(--hue, 91, 155, 217), 0.55)); }
html.dark .rel-item:hover { transform: translateY(-3px); color: var(--ink); }
html.dark .rel-item:hover .rel-orb { box-shadow: 0 0 26px rgba(var(--hue, 91, 155, 217), 0.4), 0 0 0 1px rgba(var(--hue, 91, 155, 217), 0.4); }

/* landing responsive */
@media (max-width: 1000px) {
  html.dark .land-split, html.dark .land-row { grid-template-columns: 1fr; gap: 32px; }
  html.dark .why-grid { grid-template-columns: repeat(2, 1fr); }
  html.dark .sb-grid { grid-template-columns: repeat(2, 1fr); }
  html.dark .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  /* in-flow art, text right after — no dead space, same law as home hero */
  html.dark .land-hero { display: block; min-height: 0; }
  html.dark .land-art { position: relative; height: 54svh; }
  /* bias the cover-crop toward the art's upper third — faces live there */
  html.dark .land-art img { object-position: center 26%; }
  html.dark .land-veil {
    background: linear-gradient(0deg, #020204 0%, rgba(2, 2, 4, 0.5) 16%, transparent 36%);
  }
  html.dark .land-hero .wrap { margin-top: -36px; }
  html.dark .land-hero-copy { padding: 0 0 40px; gap: 14px; max-width: none; }
  html.dark .land-hero h1 { font-size: clamp(32px, 9.4vw, 40px); }
  html.dark .land-hero .lede { font-size: 15.5px; max-width: none; }
  html.dark .land-sec { padding: 50px 0; }
  html.dark .why-grid { gap: 22px 14px; }
  html.dark .sb-grid { gap: 12px; }
  html.dark .sb-frame h3 { font-size: 12.5px; margin-top: 9px; }
  html.dark .shop-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  html.dark .shop-prev { height: 96px; }
  html.dark .shop-body { padding: 12px 12px 13px; }
  html.dark .shop-body h3 { font-size: 15px; }
  html.dark .vcap { text-align: center; }
  html.dark .rel-grid { gap: 14px 6px; justify-content: center; }
  html.dark .rel-item { width: 84px; }
}


/* =====================================================================
   MOBILE NAV — burger + glass panel (text links hide ≤960px)
   ===================================================================== */
.nav-burger { display: none; }
@media (max-width: 960px) {
  html.dark .nav-burger {
    display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px;
    background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.28);
    border-radius: 10px; color: var(--ice); cursor: pointer; flex: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.dark .nav-burger[aria-expanded="true"] { border-color: rgba(91, 155, 217, 0.6); color: #fff; }
}
html.dark .nav-mobile {
  position: absolute; top: calc(100% + 8px); left: 10px; right: 10px; z-index: 70;
  border-radius: 18px; padding: 12px; display: grid; gap: 1px;
  max-height: calc(100svh - 90px); overflow-y: auto;
  /* SOLID panel — the .lg glass is too sheer and lets page content bleed
     through (Sheri 2026-07-22). Opaque bg + strong blur + real shadow. */
  background: #080b12;
  -webkit-backdrop-filter: blur(22px) saturate(1.2); backdrop-filter: blur(22px) saturate(1.2);
  border: 1px solid rgba(148, 178, 224, 0.22);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
html.dark .nav-mobile::before { display: none; }
html.dark .nav-mobile[hidden] { display: none; }
html.dark .nav-mobile a {
  display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--ink-soft);
}
html.dark .nav-mobile a:hover { background: rgba(61, 124, 195, 0.14); color: var(--ice); }
html.dark .nav-mobile .dot {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: rgba(var(--chue, 91, 155, 217), 0.95);
  box-shadow: 0 0 8px rgba(var(--chue, 91, 155, 217), 0.8);
}
html.dark .nav-mobile .sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-faint); padding: 12px 14px 4px;
}
html.dark .nav { position: sticky; }

/* the map invites the tap (phones only) */
.tap-hint { display: none; }
@media (max-width: 900px) {
  html.dark .tap-hint {
    display: block; margin: 4px 0 0; font-size: 13px; color: var(--ink-soft);
    opacity: calc(0.65 + 0.35 * var(--breath, 0.4));
  }
}

/* =====================================================================
   LANDING ACCENT TEXT wears the system color (Sheri 2026-07-16) —
   eyebrows, learn-more links, coming-soon tags; headings stay ink.
   ===================================================================== */
html.dark .land-sec .eyebrow { color: rgba(var(--hue, 91, 155, 217), 0.95); }
html.dark .land-link { color: rgba(var(--hue, 91, 155, 217), 0.95); }
html.dark .land-link:hover { color: var(--ice); }
html.dark .shop-meta .soon { color: rgba(var(--hue, 91, 155, 217), 0.85); }

/* small phones: tighten the bar so brand + CTA + burger all fit */
@media (max-width: 560px) {
  html.dark .nav-inner { gap: 12px; padding: 0 14px; }
  html.dark .nav-links { gap: 12px; }
  html.dark .nav-links .btn-sm { padding: 8px 12px; font-size: 11px; letter-spacing: 0.04em; }
  html.dark .nav-burger { width: 38px; height: 38px; margin-left: 0; }
}


/* =====================================================================
   POSTER COLLECTION (/posters/) + real product thumbnails
   ===================================================================== */
/* landing shop cards: real poster thumbs fill the preview */
html.dark .shop-prev.shop-img { padding: 0; height: auto; }
html.dark .shop-img img { width: 100%; height: auto; display: block; }


/* series hero: the collection piece is the exhibit */
html.dark .series-hero { display: block; border-radius: 22px; overflow: hidden; }
html.dark .series-hero img {
  width: 100%; height: auto; display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}
html.dark .series-hero:hover img { transform: scale(1.012); }

/* series print pair */
html.dark .series-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html.dark .series-pair img {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid rgba(148, 178, 224, 0.2);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45);
}
html.dark .series-pair p {
  text-align: center; margin: 8px 0 0; font-size: 11px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint);
}

/* per-system collection cards */
html.dark .pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 38px; }
html.dark .pc-card {
  position: relative; border-radius: 18px; padding: 20px 20px 16px;
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.86), rgba(5, 7, 12, 0.86));
  border: 1px solid rgba(var(--hue, 91, 132, 255), 0.3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 28px rgba(0, 0, 0, 0.35),
              0 0 calc(8px + 10px * var(--breath, 0.4)) rgba(var(--hue, 91, 132, 255), 0.08);
}
html.dark .pc-card h3 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: 20px; color: var(--ink); margin: 0 0 14px;
}
html.dark .pc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
html.dark .pc-pair a { position: relative; display: block; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(var(--hue, 91, 132, 255), 0.25); }
html.dark .pc-pair img { width: 100%; height: auto; display: block;
  transition: transform 0.45s ease; }
html.dark .pc-pair a:hover img { transform: scale(1.03); }
html.dark .pc-pair span {
  position: absolute; left: 8px; bottom: 8px; font-size: 9.5px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ice);
  background: rgba(5, 8, 14, 0.72); border: 1px solid rgba(148, 178, 224, 0.25);
  border-radius: 999px; padding: 4px 9px;
}
html.dark .pc-meta {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 14px;
}
html.dark .pc-meta .soon { font-size: 9.5px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: rgba(var(--hue, 91, 132, 255), 0.85); }
@media (max-width: 760px) {
  html.dark .pc-grid { grid-template-columns: 1fr; gap: 14px; }
  html.dark .series-pair { grid-template-columns: 1fr; }
}

/* homepage: the Foundation Series band */
html.dark .series-band { display: block; border-radius: 20px; overflow: hidden; margin-top: 34px;
  border: 1px solid rgba(148, 178, 224, 0.18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 calc(10px + 14px * var(--breath, 0.4)) rgba(61, 124, 195, 0.12); }
html.dark .series-band img { width: 100%; height: auto; display: block;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
html.dark .series-band:hover img { transform: scale(1.012); }

/* buy buttons on shop cards (render once Stripe links land in the generator) */
html.dark .shop-buy { padding: 8px 16px; font-size: 11px; }


/* nav never wraps — caret stays glued to its label */
html.dark .nav-links { flex-wrap: nowrap; }
html.dark .nav-links a { white-space: nowrap; }

/* nav crowding: 8 items need room — tighten mid widths, burger sooner */
@media (min-width: 1081px) and (max-width: 1320px) {
  html.dark .nav-links { gap: 15px; }
  html.dark .nav-links a { font-size: 11px; letter-spacing: 0.06em; }
}
@media (max-width: 1080px) {
  html.dark .nav-links a:not(.btn) { display: none; }
  html.dark .nav-drop { display: none; }
  html.dark .nav-burger {
    display: grid; place-items: center; width: 40px; height: 40px; margin-left: 4px;
    background: rgba(16, 23, 39, 0.7); border: 1px solid rgba(148, 178, 224, 0.28);
    border-radius: 10px; color: var(--ice); cursor: pointer; flex: none;
    -webkit-tap-highlight-color: transparent;
  }
}


/* =====================================================================
   LIGHTBOX — click any poster to read it full-size (coherence.js wires
   [data-zoom] images; backdrop/×/Esc close; page scroll locks)
   ===================================================================== */
html.dark .lightbox {
  position: fixed; inset: 0; z-index: 200; overflow: auto;
  background: rgba(2, 2, 4, 0.94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  padding: 28px 16px 48px; text-align: center;
}
html.dark .lightbox[hidden] { display: none; }
html.dark .lightbox img {
  max-width: min(1100px, 96vw); width: 100%; height: auto;
  border-radius: 10px; box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(148, 178, 224, 0.18);
}
html.dark .lb-close {
  position: fixed; top: 14px; right: 16px; z-index: 201;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: rgba(16, 23, 39, 0.85); border: 1px solid rgba(148, 178, 224, 0.35);
  color: #fff; font-size: 24px; line-height: 1;
}
html.dark .lb-hint {
  color: var(--ink-faint); font-size: 12px; letter-spacing: 0.08em;
  text-transform: uppercase; margin: 12px 0 0;
}
html.dark [data-zoom] { cursor: zoom-in; }

/* pc-card action row: Buy + Explore, side by side */
html.dark .pc-actions { display: flex; gap: 10px; margin-top: 14px; }
html.dark .pc-actions .btn { flex: 1; text-align: center; padding: 10px 12px; font-size: 11px; }

/* =====================================================================
   LIVING HERO — the field breathes and drifts; she is not a still
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {
  html.dark .hero-figure .hero-art {
    animation: herolive 26s ease-in-out infinite alternate;
    will-change: transform;
  }
  @keyframes herolive {
    from { transform: scale(1.005); }
    to   { transform: scale(1.055) translateX(-0.8%); }
  }
  /* the spine channel glows in slow waves over the art */
  html.dark .hero-figure::after {
    content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: radial-gradient(14% 42% at 62% 52%, rgba(232, 206, 156, 0.16), transparent 75%);
    opacity: calc(0.25 + 0.75 * var(--breath, 0.4));
    mix-blend-mode: screen;
  }
}

/* =====================================================================
   NAV ABOVE ALL — dark.css line ~50 once flattened .nav to z-index:1,
   which painted the dropdown + mobile panel BEHIND the hero/sections
   (menus "opened" invisibly). The nav layer must outrank every section.
   ===================================================================== */
html.dark .nav { z-index: 60; }


/* =====================================================================
   HSI SYSTEM ASSESSMENT (/assessment/) — one reflection per screen,
   system-hue lighting rides --hue on <body>; words, never scores.
   ===================================================================== */
html.dark .as-page { min-height: 72vh; position: relative; z-index: 1; }
html.dark .as-screen { padding: 72px 0 90px; }
html.dark .as-wrap { max-width: 640px; text-align: center; position: relative; }
html.dark .as-wrap::before {
  content: ""; position: absolute; inset: -120px -40% auto; height: 380px; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 50% 30%, rgba(var(--hue, 61, 124, 195), 0.12), transparent 75%);
  opacity: calc(0.6 + 0.4 * var(--breath, 0.4));
  transition: background 0.6s ease;
}
html.dark .as-title {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: clamp(30px, 4.4vw, 44px); line-height: 1.14;
  color: var(--ink); margin: 14px 0 16px;
}
html.dark .as-lede { color: var(--ink-soft); font-size: 16.5px; line-height: 1.65; margin: 0 0 18px; }
html.dark .as-privacy {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(var(--hue, 61, 124, 195), 0.95);
  border: 1px solid rgba(var(--hue, 61, 124, 195), 0.35); border-radius: 999px;
  padding: 7px 16px; margin: 0 0 26px;
}
html.dark .as-disclaimer { color: var(--ink-faint); font-size: 12px; line-height: 1.6; max-width: 46ch; margin: 34px auto 0; }

html.dark .as-progress { height: 4px; border-radius: 4px; background: rgba(148, 178, 224, 0.14); overflow: hidden; margin: 6px 0 14px; }
html.dark .as-bar {
  height: 100%; width: 0; border-radius: 4px;
  background: linear-gradient(90deg, rgba(var(--hue, 61, 124, 195), 0.6), rgb(var(--hue, 61, 124, 195)));
  box-shadow: 0 0 12px rgba(var(--hue, 61, 124, 195), 0.6);
  transition: width 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), background 0.45s ease;
}
html.dark .as-count { font-size: 11.5px; letter-spacing: 0.18em; color: var(--ink-faint); text-transform: uppercase; margin: 0 0 26px; }
html.dark .as-q {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: clamp(22px, 3.2vw, 30px); line-height: 1.3;
  color: var(--ink); margin: 0 0 30px; min-height: 3.2em;
}
html.dark .as-options { display: grid; gap: 10px; max-width: 420px; margin: 0 auto 26px; }
html.dark .as-opt {
  padding: 15px 18px; border-radius: 14px; font-size: 15px; font-weight: 600;
  color: var(--ink-soft); text-align: center; cursor: pointer;
  background: rgba(14, 20, 34, 0.72); border: 1px solid rgba(148, 178, 224, 0.18);
  transition: border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
  -webkit-tap-highlight-color: transparent; font-family: inherit;
}
html.dark .as-opt:hover { border-color: rgba(var(--hue, 61, 124, 195), 0.5); color: var(--ink); transform: translateY(-1px); }
html.dark .as-opt.sel {
  border-color: rgba(var(--hue, 61, 124, 195), 0.85); color: var(--ink);
  box-shadow: 0 0 0 1px rgba(var(--hue, 61, 124, 195), 0.5), 0 0 22px rgba(var(--hue, 61, 124, 195), 0.25);
}
html.dark .as-navrow { display: flex; justify-content: space-between; gap: 12px; max-width: 420px; margin: 0 auto; }

html.dark .as-r-card {
  border-radius: 18px; padding: 26px 24px; margin: 18px auto 0; max-width: 460px;
  border: 1px solid rgba(var(--hue, 61, 124, 195), 0.45);
  box-shadow: 0 0 calc(14px + 16px * var(--breath, 0.4)) rgba(var(--hue, 61, 124, 195), 0.16);
}
html.dark .as-r-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(var(--hue, 61, 124, 195), 0.95);
}
html.dark .as-r-card h3 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: 26px; color: var(--ink); margin: 8px 0 0;
}
html.dark .as-r-tips { max-width: 460px; margin: 26px auto 0; padding: 22px 26px; border-radius: 18px; text-align: left; }
html.dark .as-r-tips h3 {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(var(--hue, 61, 124, 195), 0.95); margin: 0 0 12px;
}
html.dark .as-r-tips ol { margin: 0; padding-left: 20px; color: var(--ink-soft); line-height: 1.6; font-size: 14.5px; display: grid; gap: 10px; }
html.dark .as-r-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 28px; }
html.dark .as-r-optin { max-width: 480px; margin: 40px auto 0; padding-top: 30px; border-top: 1px solid rgba(148, 178, 224, 0.12); }
@media (max-width: 640px) {
  html.dark .as-screen { padding: 44px 0 64px; }
  html.dark .as-q { min-height: 4.2em; }
}


/* ---------- library v2: photo card + living assessment card ---------- */
html.dark .lib-art.lib-photo { height: 170px; padding: 0; display: block; border-bottom: 1px solid rgba(148, 178, 224, 0.12); }
html.dark .lib-art.lib-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 32%; display: block; }
html.dark .lib-feature {
  --lhue: 61, 184, 255;
  border-color: rgba(61, 184, 255, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 12px 34px rgba(0, 0, 0, 0.4),
              0 0 calc(14px + 16px * var(--breath, 0.4)) rgba(61, 184, 255, 0.18);
}
html.dark .lib-sliders svg { max-width: 200px; }
@media (prefers-reduced-motion: no-preference) {
  html.dark .lib-sliders .k1 { animation: libk 7s ease-in-out infinite alternate; }
  html.dark .lib-sliders .k2 { animation: libk 9s ease-in-out -3s infinite alternate-reverse; }
  html.dark .lib-sliders .k3 { animation: libk 11s ease-in-out -6s infinite alternate; }
  @keyframes libk { from { transform: translateX(0); } to { transform: translateX(-26px); } }
}


/* ---------- poster bundles ---------- */
html.dark .bundle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
html.dark .bundle-card { border-radius: 18px; padding: 26px 26px 22px; position: relative; }
html.dark .bundle-card h3 {
  font-family: "Iowan Old Style", "New York", "Palatino Linotype", Palatino, Georgia, serif;
  font-weight: 500; font-size: 24px; color: var(--ink); margin: 0 0 8px;
}
html.dark .bundle-card p { color: var(--ink-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 18px; }
html.dark .bundle-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html.dark .bundle-meta .price { color: var(--gold); font-weight: 650; font-size: 22px; }
html.dark .bundle-meta .price s { color: var(--ink-faint); font-weight: 400; font-size: 14px; margin-left: 6px; }
html.dark .bundle-feature {
  border: 1px solid rgba(232, 206, 156, 0.55);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 40px rgba(0, 0, 0, 0.45),
              0 0 calc(14px + 16px * var(--breath, 0.4)) rgba(232, 206, 156, 0.18);
}
html.dark .bundle-badge {
  display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #04060b; background: var(--gold);
  border-radius: 999px; padding: 5px 12px; margin: 0 0 14px;
}
@media (max-width: 760px) { html.dark .bundle-grid { grid-template-columns: 1fr; } }


/* ---------- practitioner ring: a light travels the community ----------
   one pill lights after another, full loop = one breath (8 x 1.125s = 9s) */
html.dark .pro-chip {
  animation: chipfloat 9s var(--ease-organic, ease-in-out) infinite,
             chipwave 9s linear infinite;
}
html.dark .pro-chip:nth-of-type(1) { animation-delay: -1.3s, -9s; }
html.dark .pro-chip:nth-of-type(2) { animation-delay: -3.9s, -7.875s; }
html.dark .pro-chip:nth-of-type(3) { animation-delay: -6.5s, -6.75s; }
html.dark .pro-chip:nth-of-type(4) { animation-delay: -2.6s, -5.625s; }
html.dark .pro-chip:nth-of-type(5) { animation-delay: -5.2s, -4.5s; }
html.dark .pro-chip:nth-of-type(6) { animation-delay: -0.65s, -3.375s; }
html.dark .pro-chip:nth-of-type(7) { animation-delay: -4.55s, -2.25s; }
html.dark .pro-chip:nth-of-type(8) { animation-delay: -7.8s, -1.125s; }
@keyframes chipwave {
  0%, 14%, 100% {
    border-color: rgba(var(--chip-hue, 91, 132, 255), 0.4);
    box-shadow: 0 0 14px rgba(var(--chip-hue, 91, 132, 255), 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    color: var(--ink-soft);
  }
  6% {
    border-color: rgba(var(--chip-hue, 91, 132, 255), 1);
    box-shadow: 0 0 30px rgba(var(--chip-hue, 91, 132, 255), 0.55), 0 0 0 1px rgba(var(--chip-hue, 91, 132, 255), 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
    color: var(--ink);
  }
}
@media (prefers-reduced-motion: reduce) { html.dark .pro-chip { animation: none; } }


/* ---------- freebie band: the wallpaper lead magnet ---------- */
html.dark .freebie-band {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 44px; align-items: center;
}
html.dark .freebie-art img {
  width: 100%; height: auto; display: block; border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55),
              0 0 calc(14px + 18px * var(--breath, 0.4)) rgba(61, 124, 195, 0.14);
}
html.dark .freebie-copy .waitlist-form { justify-content: flex-start; }
@media (max-width: 820px) {
  html.dark .freebie-band { grid-template-columns: 1fr; gap: 26px; text-align: center; }
  html.dark .freebie-copy .waitlist-form { justify-content: center; }
  html.dark .freebie-copy .sub { margin-left: auto; margin-right: auto; }
  html.dark .freebie-art { max-width: 420px; margin: 0 auto; }
}

/* ---------- landing "better together" upsell ---------- */
html.dark .upsell {
  grid-column: 1 / -1; margin-top: 22px; border-radius: 16px; padding: 20px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  border: 1px solid rgba(232, 206, 156, 0.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 0 calc(10px + 12px * var(--breath, 0.4)) rgba(232, 206, 156, 0.12);
}
html.dark .upsell-eye { font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
html.dark .upsell h3 { font-family: "Iowan Old Style","New York","Palatino Linotype",Palatino,Georgia,serif; font-weight: 500; font-size: 20px; color: var(--ink); margin: 6px 0 4px; }
html.dark .upsell p { color: var(--ink-soft); font-size: 13.5px; margin: 0; }
html.dark .upsell-cta { display: grid; justify-items: end; gap: 8px; }
html.dark .upsell-price { color: var(--gold); font-weight: 650; font-size: 20px; }
html.dark .upsell-price s { color: var(--ink-faint); font-weight: 400; font-size: 13px; margin-left: 5px; }
html.dark .upsell-link { color: var(--sky); font-size: 12.5px; }
@media (max-width: 640px) { html.dark .upsell { flex-direction: column; align-items: flex-start; } html.dark .upsell-cta { justify-items: start; } }

/* ---------- poster FAQ ---------- */
html.dark .faq-list { margin-top: 32px; display: grid; gap: 12px; }
html.dark .faq-item {
  background: linear-gradient(160deg, rgba(10, 14, 22, 0.7), rgba(5, 7, 12, 0.7));
  border: 1px solid rgba(148, 178, 224, 0.16); border-radius: 14px; padding: 18px 22px;
}
html.dark .faq-item h3 { font-size: 15.5px; font-weight: 650; color: var(--ink); margin: 0 0 6px; }
html.dark .faq-item p { font-size: 14px; line-height: 1.6; color: var(--ink-soft); margin: 0; }
html.dark .faq-item a { color: var(--sky); }