/* ============================================================
   Ground Truth — Marketing landing (web-native re-art-direction)
   Navy base · Geist · purple→teal as a SHARP accent · real
   product UI forked from the Ground Truth design system.
   Loaded AFTER kit/colors_and_type.css + kit/kit.css, so the
   :root block below re-skins the design-system tokens to navy
   and the real product components inherit it.
   ============================================================ */

/* ---- Re-skin the design-system surface tokens to navy ----
   (signal / severity / purple / health tokens are left untouched —
   they carry product meaning) */
:root {
  --background:           oklch(0.155 0.026 264);
  --foreground:           oklch(0.95 0.006 264);
  --card:                 oklch(0.198 0.026 264);
  --card-foreground:      oklch(0.95 0.006 264);
  --popover:              oklch(0.198 0.026 264);
  --popover-foreground:   oklch(0.95 0.006 264);
  --secondary:            oklch(0.235 0.026 264);
  --secondary-foreground: oklch(0.92 0.006 264);
  --muted:                oklch(0.235 0.026 264);
  --muted-foreground:     oklch(0.66 0.016 264);
  --accent:               oklch(0.235 0.026 264);
  --accent-foreground:    oklch(0.92 0.006 264);
  --border:               oklch(1 0.02 264 / 0.10);
  --input:                oklch(1 0.02 264 / 0.12);
  --sidebar:                    oklch(0.175 0.026 264);
  --sidebar-foreground:         oklch(0.93 0.006 264);
  --sidebar-accent:             oklch(0.30 0.045 264);
  --sidebar-accent-foreground:  oklch(0.82 0.11 264);
  --sidebar-border:             oklch(1 0.02 264 / 0.10);

  /* marketing-side aliases */
  --bg:      var(--background);
  --bg-2:    oklch(0.178 0.026 264);
  --surf:    var(--card);
  --surf-2:  oklch(0.232 0.026 264);
  --line:    var(--border);
  --line-2:  oklch(1 0.02 264 / 0.16);
  --fg:      var(--foreground);
  --fg-soft: oklch(0.82 0.012 264);
  --fg-mute: var(--muted-foreground);
  --fg-faint:oklch(0.52 0.018 264);

  --purple:    oklch(0.62 0.22 264);
  --purple-lt: oklch(0.76 0.15 264);
  --teal:      oklch(0.80 0.13 192);
  --coral:     var(--signal-risk);
  --green:     var(--signal-upsell);
  --amber:     var(--signal-action);
  --grad: linear-gradient(100deg, var(--purple) 0%, oklch(0.70 0.17 248) 45%, var(--teal) 100%);

  --font:  var(--font-sans);
  --mono:  var(--font-mono);
  --maxw: 1180px;
  --gutter: clamp(20px, 5vw, 64px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: auto; min-height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  background: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.5;
  overflow-x: clip;
}
::selection { background: oklch(0.62 0.22 264 / 0.4); color: #fff; }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.025em; line-height: 1.06; font-weight: 700; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.grad-text {
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ---- Layout primitives ---- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(40px, 5vw, 76px); position: relative; }
.section.alt { background: var(--bg-2); }
.section.tight { padding-block: clamp(32px, 4vw, 56px); }
.divline { border: none; border-top: 1px solid var(--line); margin: 0; }

.mkt-eyebrow {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em; color: var(--teal);
  display: inline-block; margin-bottom: 7px;
}
.mkt-eyebrow::before { display: none; }

.head { max-width: 600px; }
.head .h-title {
  font-size: clamp(30px, 4vw, 46px); margin-top: 10px;
  letter-spacing: -0.03em; line-height: 1.05; text-wrap: balance;
}
.head .lede {
  margin-top: 22px; font-size: clamp(16px, 1.4vw, 18.5px);
  color: var(--fg-mute); line-height: 1.6; max-width: 540px; text-wrap: pretty;
}
/* Two-column section header — headline left, description right (uses the horizontal space) */
.head.head-split { max-width: none; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(30px, 5vw, 80px); align-items: end; }
.head.head-split .h-title { margin-top: 0; }
.head.head-split .lede { margin-top: 0; max-width: 480px; }
@media (max-width: 860px) { .head.head-split { grid-template-columns: 1fr; gap: 16px; align-items: start; } }

/* ---- Buttons (marketing — namespaced .mbtn to avoid kit .btn) ---- */
.mbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-size: 15px; font-weight: 600;
  padding: 0 20px; height: 46px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, background .2s, border-color .2s, box-shadow .25s;
}
.mbtn:active { transform: translateY(1px); }
.mbtn-primary { background: var(--grad) border-box; color: #fff; }
.mbtn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 30px oklch(0.62 0.22 264 / 0.35); }
.mbtn-ghost { background: oklch(1 0 0 / 0.05); color: var(--fg); border-color: var(--line-2); }
.mbtn-ghost:hover { background: oklch(1 0 0 / 0.09); }
.mbtn-sm { height: 38px; font-size: 14px; padding: 0 16px; }
.mbtn-lg { height: 52px; font-size: 16px; padding: 0 26px; }
.mbtn .arr { transition: transform .2s; }
.mbtn:hover .arr { transform: translateX(3px); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 100;
  background: oklch(0.155 0.026 264 / 0.72);
  backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.nav.scrolled { border-bottom-color: var(--line); background: oklch(0.15 0.026 264 / 0.88); }
.nav-inner { height: 68px; display: flex; align-items: center; gap: 32px; }
.brand { display: flex; align-items: center; gap: 11px; }
.brand .wordmark { height: 21px; width: auto; display: block; }
.brand .wordmark.wordmark-lg { height: 25px; }
.brand .mark { width: 25px; height: 25px; flex: none; display: block; }
.brand .word { font-size: 16.5px; font-weight: 700; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 30px; margin-left: 14px; }
.nav-links a { font-size: 14.5px; color: var(--fg-mute); transition: color .2s; }
.nav-links a:hover { color: var(--fg); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.nav-cta .ghost { font-size: 14.5px; color: var(--fg-soft); white-space: nowrap; }
.nav-cta .ghost:hover { color: var(--fg); }

/* ============================================================
   HERO — left-aligned copy, full-width real product shot below
   ============================================================ */
.hero { padding-top: clamp(56px, 9vh, 104px); padding-bottom: clamp(40px, 6vw, 72px); overflow: hidden; }
.hero-halo {
  position: absolute; top: -340px; left: 50%; transform: translateX(-50%);
  width: 1100px; height: 700px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, oklch(0.62 0.22 264 / 0.22), transparent 70%);
  filter: blur(40px);
}
.hero-inner { position: relative; z-index: 2; max-width: 880px; }
.hero-pill {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 14px 6px 7px; border-radius: 999px;
  background: oklch(1 0 0 / 0.04); border: 1px solid var(--line-2);
  font-size: 13px; color: var(--fg-soft); margin-bottom: 28px;
}
.hero-pill .tag {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: oklch(0.62 0.22 264 / 0.16); color: var(--purple-lt);
  white-space: nowrap; flex: none;
}
.hero-inner h1 {
  font-size: clamp(40px, 6.4vw, 80px); letter-spacing: -0.04em; line-height: 0.98;
  max-width: 16ch; text-wrap: balance;
}
.hero .sub {
  margin-top: 26px; font-size: clamp(17px, 1.6vw, 20px);
  color: var(--fg-mute); max-width: 600px; line-height: 1.55; text-wrap: pretty;
}
.hero .cta-row { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
.hero-shot-wrap { position: relative; z-index: 2; margin-top: clamp(48px, 6vw, 80px); }

/* ============================================================
   Browser frame + product shot scaler
   ============================================================ */
.frame {
  border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line-2); background: var(--bg-2);
  box-shadow: 0 40px 100px oklch(0 0 0 / 0.5);
}
.frame.glow { box-shadow: 0 40px 110px oklch(0 0 0 / 0.55), 0 0 80px oklch(0.62 0.22 264 / 0.18); }
.frame-bar {
  height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 15px;
  background: oklch(0.185 0.024 264); border-bottom: 1px solid var(--line);
}
.frame-bar .dots { display: flex; gap: 7px; }
.frame-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: oklch(1 0.02 264 / 0.16); }
.frame-url {
  margin-left: 10px; flex: 1; max-width: 360px; height: 25px; border-radius: 7px;
  background: oklch(1 0 0 / 0.05); border: 1px solid var(--line);
  display: flex; align-items: center; gap: 8px; padding: 0 11px;
  font-size: 12px; color: var(--fg-faint); font-family: var(--mono);
}
.frame-url svg { width: 12px; height: 12px; color: var(--teal); }

/* The scaler: fixed-width product render, scaled down to fit its column */
.shot { position: relative; width: 100%; overflow: hidden; }
.shot-stage { transform-origin: top left; }     /* JS sets width + transform scale */
.gt-frame { background: var(--bg); overflow: hidden; }
/* Size the kit's app shell to its content inside the frame (--gt-h is a floor, not a cap — prevents clipping) */
.gt-frame .app { height: auto; min-height: var(--gt-h, 600px); }
.gt-frame .content { overflow: visible; }
/* Hero product mock is an autoplay demo, not interactive — block pointer input + enable the cinematic zoom */
#island-hero .app { pointer-events: none; transform-origin: 0 0; transition: transform .9s cubic-bezier(.4, 0, .2, 1); will-change: transform; }

/* ---- Navy fixes for kit's few hardcoded warm-stone literals ---- */
.header { background: oklch(0.155 0.026 264 / 0.95) !important; }
.dense-row:hover { background: oklch(0.235 0.03 264 / 0.55) !important; }
.dense-row.selected { background: oklch(0.62 0.22 264 / 0.08) !important; }
.dense-row.expanded { background: oklch(0.235 0.03 264 / 0.4) !important; }
.signal-expand { background: oklch(0.21 0.028 264 / 0.45) !important; }
.top-picks {
  background: linear-gradient(135deg, oklch(0.30 0.05 264 / 0.5) 0%, oklch(0.20 0.026 264) 100%) !important;
}
.input { background: oklch(0.235 0.026 264 / 0.6) !important; }
.table tbody tr:hover { background: oklch(0.235 0.03 264 / 0.4) !important; }

/* Neutralize kit entrance animations (frozen-clock safe — the product UI
   must always be visible in static captures / reduced-motion) */
.page-enter, .stagger > * { animation: none !important; opacity: 1 !important; transform: none !important; }
/* Keep dense-row action labels on one line */
.btn { white-space: nowrap; }
/* A bit more breathing room for the embedded focus-signal detail */
.list-card .signal-expand { padding: 16px 22px 20px; }

/* ---------- Rep Home (hero — faithful fork of rep-home.tsx) ---------- */
.rhx { position: relative; display: flex; flex-direction: column; gap: 20px; }

/* Autoplay cursor + click ripple (hero demo) */
.rhx-cursor { position: absolute; z-index: 60; pointer-events: none; transform: translate(-4px, -3px); opacity: 0; }
.rhx-cursor[data-shown="1"] { opacity: 1; transition: opacity .35s; }
.rhx-cursor[data-glide="1"] { transition: left .85s cubic-bezier(.45,.05,.2,1), top .85s cubic-bezier(.45,.05,.2,1), opacity .35s; }
.rhx-cursor-arrow { display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); transition: transform .12s ease; transform-origin: 20% 20%; }
.rhx-cursor-arrow[data-pressed="1"] { transform: scale(.82); }
.rhx-ripple { position: absolute; z-index: 59; pointer-events: none; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 999px; background: oklch(0.74 0.16 264 / .45); transform: scale(0); animation: rhxRipple .6s ease-out forwards; }
@keyframes rhxRipple { 0% { transform: scale(0); opacity: .75; } 100% { transform: scale(2.6); opacity: 0; } }
.rhx-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.rhx-hi { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.rhx-sub { font-size: 13px; color: var(--muted-foreground); margin-top: 5px; }
.rhx-sub .fg { color: oklch(0.93 0.006 264 / 0.8); }
.rhx-sub .due { color: var(--destructive); }
.rhx-chips { display: flex; gap: 6px; }
.rhx-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 7px; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); border: 1px solid var(--border); }
.rhx-chip b { font-variant-numeric: tabular-nums; font-weight: 600; }
.rhx-chip.active { background: var(--muted); color: var(--foreground); border-color: oklch(1 0.02 264 / 0.2); }
.rhx-chip.purple.active, .rhx-chip.purple { color: var(--muted-foreground); }

.rhx-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.rhx-kpi { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 14px; min-height: 92px; display: flex; flex-direction: column; }
.rhx-kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.rhx-kpi-lab { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); line-height: 1.3; }
.rhx-kpi-ic { color: var(--muted-foreground); flex: none; }
.rhx-kpi-val { font-size: 24px; font-weight: 700; margin-top: auto; }
.rhx-kpi-val.dest { color: var(--destructive); }
.rhx-kpi-sub { font-size: 11px; color: var(--muted-foreground); margin-top: 6px; }

.rhx-cols { display: flex; gap: 16px; align-items: stretch; }
.rhx-list { width: 300px; flex: none; display: flex; flex-direction: column; gap: 10px; }
.rhx-item { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.rhx-item:hover { border-color: oklch(1 0.02 264 / 0.2); }
.rhx-item.active { border-color: oklch(0.62 0.22 264 / 0.5); background: oklch(0.30 0.045 264 / 0.3); }
.rhx-item-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rhx-sev { width: 7px; height: 7px; border-radius: 999px; flex: none; }
.rhx-item-hl { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rhx-item-hl sup { margin-left: 5px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.rhx-item-sub { font-size: 13px; color: var(--muted-foreground); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhx-item-sub .ev { color: oklch(0.93 0.006 264 / 0.7); }
.rhx-item-bot { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 8px; }
.rhx-item-bot span:first-child { font-size: 11.5px; color: var(--muted-foreground); }
.rhx-item-bot .num { font-size: 14px; font-weight: 600; }
.rhx-viewall { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; color: var(--gt-purple-light); cursor: pointer; padding: 4px; }
.rhx-viewall:hover { text-decoration: underline; }

.rhx-focus { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--border); border-radius: 12px; }
.rhx-focus-head { padding: 14px 20px; border-bottom: 1px solid var(--border); }
.rhx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 9px; }
.rhx-due { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--signal-risk); }
.rhx-upd { font-size: 11px; color: var(--muted-foreground); }
.rhx-focus-hl { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.rhx-focus-acct { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-foreground); margin-top: 7px; flex-wrap: wrap; }
.rhx-focus-acct .rhx-ic { display: inline-flex; align-items: center; gap: 5px; }
.rhx-focus-body { padding: 14px 20px; display: flex; flex-direction: column; gap: 13px; }
.rhx-why { display: flex; gap: 10px; padding: 11px; border-radius: 10px; background: oklch(0.30 0.045 264 / 0.3); border: 1px solid oklch(0.62 0.22 264 / 0.2); }
.rhx-why svg { width: 16px; height: 16px; color: var(--gt-purple-light); flex: none; margin-top: 1px; }
.rhx-why-t { font-size: 13px; line-height: 1.55; }
.rhx-lbl { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground); margin-bottom: 9px; }
.rhx-p { font-size: 13px; line-height: 1.55; }
.rhx-ev { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rhx-ev li { display: flex; gap: 10px; font-size: 13px; line-height: 1.45; }
.rhx-ev li svg { width: 14px; height: 14px; color: var(--muted-foreground); flex: none; margin-top: 2px; }
.rhx-focus-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }

/* ---- Draft email composer (hero "Draft email" flow) ---- */
@keyframes rhxSlideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.rhx-compose { animation: rhxSlideIn .28s cubic-bezier(.2,.7,.2,1); }
.rhx-compose-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--border); }
.rhx-compose-eyebrow { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gt-purple-light); }
.rhx-compose-x { appearance: none; border: 1px solid var(--border); background: transparent; color: var(--muted-foreground); width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; cursor: pointer; transition: background .15s, color .15s; }
.rhx-compose-x:hover { background: var(--muted); color: var(--foreground); }
.rhx-compose-fields { padding: 13px 20px; border-bottom: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.rhx-compose-row { display: flex; gap: 12px; font-size: 13px; align-items: baseline; }
.rhx-compose-row .k { width: 50px; flex: none; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.rhx-compose-row .v { color: var(--foreground); min-width: 0; }
.rhx-compose-row .v.subj { font-weight: 600; }
.rhx-compose-row .addr { color: var(--muted-foreground); }
.rhx-compose-body { flex: 1; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 11px; font-size: 13px; line-height: 1.6; color: oklch(0.93 0.006 264 / 0.92); white-space: pre-line; }
.rhx-compose-foot { margin-top: auto; padding: 14px 16px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 8px; }

/* ---- Sent confirmation ---- */
.rhx-sent { align-items: center; justify-content: center; animation: rhxSlideIn .28s cubic-bezier(.2,.7,.2,1); }
.rhx-sent-inner { margin: auto; padding: 28px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 13px; }
.rhx-sent-check { width: 52px; height: 52px; border-radius: 999px; background: var(--signal-upsell-bg); color: var(--health-growing); display: grid; place-items: center; animation: rhxPop .4s cubic-bezier(.2,.9,.3,1.35); }
@keyframes rhxPop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.rhx-sent-title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.rhx-sent-sub { font-size: 13px; color: var(--muted-foreground); line-height: 1.5; max-width: 280px; }

.rhx-acct { width: 272px; flex: none; display: flex; flex-direction: column; gap: 18px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 18px; }
.rhx-acct-top { display: flex; align-items: flex-start; gap: 12px; }
.rhx-avatar { width: 40px; height: 40px; border-radius: 9px; background: oklch(0.55 0.15 264); color: #fff; font-weight: 600; display: grid; place-items: center; flex: none; }
.rhx-acct-id { flex: 1; min-width: 0; }
.rhx-acct-name { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.rhx-acct-name svg { color: var(--muted-foreground); flex: none; }
.rhx-acct-dom { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }
.rhx-health-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rhx-hbadge { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 7px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; }
.rhx-health-score { font-size: 24px; font-weight: 700; }
.rhx-health-bar { height: 6px; border-radius: 999px; background: var(--muted); overflow: hidden; }
.rhx-health-bar i { display: block; height: 100%; border-radius: 999px; }
.rhx-pred { display: flex; gap: 9px; padding: 11px; border-radius: 9px; background: oklch(0.235 0.026 264 / 0.5); border: 1px solid var(--border); font-size: 13px; line-height: 1.4; }
.rhx-pred svg { width: 14px; height: 14px; color: var(--signal-action); flex: none; margin-top: 2px; }
.rhx-deal-name { font-weight: 600; }
.rhx-deal-sub { font-size: 11.5px; color: var(--muted-foreground); margin-top: 2px; }
.rhx-stake { display: flex; }
.rhx-savatar { width: 28px; height: 28px; border-radius: 999px; color: #fff; font-size: 10px; font-weight: 600; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--card); margin-left: -6px; }
.rhx-savatar:first-child { margin-left: 0; }
.rhx-last { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rhx-last-t { font-size: 11px; color: var(--muted-foreground); margin-top: 2px; }
.rhx-askai { width: 100%; }

.rhx-activity { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 18px 20px; }
.rhx-act-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.rhx-act-head h3 { font-size: 15px; font-weight: 600; }
.rhx-activity ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rhx-activity li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; }
.rhx-act-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--muted); display: grid; place-items: center; color: var(--muted-foreground); flex: none; }
.rhx-act-when { width: 78px; font-size: 11.5px; color: var(--muted-foreground); flex: none; margin-top: 1px; }
.rhx-act-txt { flex: 1; min-width: 0; color: oklch(0.93 0.006 264 / 0.9); }

/* ============================================================
   TRUST / TOOLS STRIP
   ============================================================ */
.tools { padding-block: clamp(34px, 4vw, 52px); background: var(--bg-2); }
.tools-lab { font-size: 13px; color: var(--fg-faint); text-align: center; margin-bottom: 26px; }
.tools-row {
  display: flex; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 56px);
  flex-wrap: wrap;
}
.tool {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--fg-mute); opacity: 0.85;
}
.tool-logo { height: 22px; width: auto; display: block; }

/* ============================================================
   SPLIT SECTIONS
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 92px); align-items: center; }
.split.flip .split-visual { order: -1; }
.split.vwide { grid-template-columns: 1.12fr 0.88fr; }
.split-copy { max-width: 520px; }
.split-copy .lede { margin-top: 22px; font-size: clamp(16px, 1.4vw, 18.5px); color: var(--fg-mute); line-height: 1.6; }

/* ============================================================
   PROBLEM — asymmetric: big headline + stacked typographic stats
   ============================================================ */
.problem-grid { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.problem-grid .h-title { font-size: clamp(30px, 4.4vw, 52px); }
.pstats { display: flex; flex-direction: column; }
.pstat { padding: 22px 0; border-top: 1px solid var(--line); display: flex; gap: 18px; align-items: baseline; }
.pstat:first-child { border-top: none; padding-top: 4px; }
.pstat .pv { font-family: var(--mono); font-size: clamp(28px, 3vw, 38px); font-weight: 500; letter-spacing: -0.03em; color: var(--fg); flex: none; min-width: 110px; }
.pstat .pl { font-size: 14.5px; color: var(--fg-mute); line-height: 1.45; }
.problem-points {
  margin-top: clamp(44px, 5vw, 68px); padding-top: clamp(34px, 4vw, 48px); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3vw, 44px);
}
.pp { display: flex; flex-direction: column; gap: 11px; }
.pp .pp-n { font-family: var(--mono); font-size: 13px; font-weight: 600; color: var(--coral); }
.pp p { font-size: 15px; color: var(--fg-mute); line-height: 1.5; }
.pp p b { color: var(--fg); font-weight: 600; }
.problem-close { margin-top: clamp(34px, 4vw, 52px); }
.problem-close .pc-main { font-size: clamp(19px, 2.3vw, 28px); font-weight: 700; letter-spacing: -0.02em; }
.problem-close .pc-main .c { color: var(--coral); }
.problem-close .pc-sub { margin-top: 10px; font-size: 15px; color: var(--fg-faint); }

/* ============================================================
   SOLUTION — one living closed-loop graphic
   ============================================================ */
.loop-graphic { margin-top: clamp(40px, 5vw, 68px); }
.loop-graphic svg { width: 100%; height: auto; display: block; overflow: visible; }
.loop-graphic text { font-family: var(--font); }
.lg-lab   { fill: var(--fg-faint); font-size: 12px; font-weight: 700; letter-spacing: 0.16em; }
.lg-num   { fill: var(--teal); font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.04em; }
.lg-title { fill: var(--fg); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.lg-sub   { fill: var(--fg-mute); font-size: 13px; }
.lg-chiptext { fill: var(--fg-soft); font-size: 14px; font-weight: 500; }
.lg-learn { fill: var(--fg); font-size: 13.5px; font-weight: 600; letter-spacing: 0.01em; }
.lg-fb-ic { fill: var(--teal); }
.lg-fbnode rect { fill: url(#lg-core); stroke: oklch(0.62 0.22 264 / 0.32); stroke-width: 1; }
.lg-node rect { fill: var(--surf); stroke: var(--line-2); stroke-width: 1; }
.lg-core rect { fill: url(#lg-core); stroke: oklch(0.62 0.22 264 / 0.32); stroke-width: 1; }
.lg-chip rect { fill: oklch(1 0 0 / 0.04); stroke: var(--line); stroke-width: 1; }
.lg-flow { fill: none; stroke: url(#lg-grad); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 7 12; }
.lg-arc  { fill: none; stroke: var(--teal); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 7 12; opacity: 0.6; }
.lg-dot  { fill: var(--teal); }
.lg-dot.p { fill: var(--purple-lt); }
.lg-travel { fill: var(--teal); offset-distance: 0; offset-rotate: 0deg; }
.lg-travel.tin  { fill: var(--purple-lt); offset-path: path("M170 114 C 212 114 226 128 250 127"); }
.lg-travel.tf1  { offset-path: path("M400 128 L468 128"); }
.lg-travel.tf2  { offset-path: path("M625 128 L693 128"); }
.lg-travel.tout { offset-path: path("M850 128 C 878 128 884 140 900 140"); }
.lg-travel.tfb  { offset-path: path("M775 167 C 775 300 720 368 670 368 L 430 368 C 380 368 325 300 325 167"); }
@media (prefers-reduced-motion: no-preference) {
  .lg-flow { animation: lgflow 1s linear infinite; }
  .lg-arc  { animation: lgflow 1.5s linear infinite; }
  .lg-travel.tin  { animation: lgtravel 1.6s linear infinite; }
  .lg-travel.tf1  { animation: lgtravel 1.5s linear infinite; }
  .lg-travel.tf2  { animation: lgtravel 1.5s linear 0.5s infinite; }
  .lg-travel.tout { animation: lgtravel 1.6s linear 0.3s infinite; }
  .lg-travel.tfb  { animation: lgtravel 3s linear infinite; }
}
@keyframes lgflow { to { stroke-dashoffset: -38; } }
@keyframes lgtravel { from { offset-distance: 0; } to { offset-distance: 100%; } }

/* ============================================================
   HOW — flip split with real focus signal frame
   ============================================================ */
.how-points { margin-top: 30px; display: flex; flex-direction: column; gap: 22px; }
.how-pt { display: flex; gap: 16px; }
.how-pt .n { font-family: var(--mono); font-size: 13px; color: var(--teal); font-weight: 600; flex: none; width: 22px; padding-top: 2px; }
.how-pt h4 { font-size: 15.5px; }
.how-pt p { font-size: 13.5px; color: var(--fg-mute); margin-top: 4px; line-height: 1.5; }
.how-cap { margin-top: 30px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }

/* ============================================================
   SIGNALS — full-width real dense list
   ============================================================ */
.signals-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; }
.signals-shot { margin-top: clamp(40px, 5vw, 60px); }
.legend { display: flex; gap: 18px; flex-wrap: wrap; }
.legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-mute); }
.legend .lg .d { width: 8px; height: 8px; border-radius: 50%; }

/* ============================================================
   RESULTS — horizontal stat row + quiet quotes
   ============================================================ */
.results-stats { margin-top: clamp(48px, 6vw, 72px); display: grid; grid-template-columns: repeat(3, 1fr); }
.rstat { padding: 8px 30px; border-left: 1px solid var(--line); }
.rstat:first-child { border-left: none; padding-left: 0; }
.rstat .rv { font-family: var(--mono); font-size: clamp(40px, 5vw, 60px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--fg); }
.rstat .rl { font-size: 14.5px; color: var(--fg-mute); margin-top: 14px; line-height: 1.4; max-width: 220px; }
.quotes { margin-top: clamp(48px, 6vw, 80px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px); }
.quote { display: flex; flex-direction: column; gap: 18px; }
.quote p { font-size: 17px; line-height: 1.5; color: var(--fg); font-weight: 500; letter-spacing: -0.01em; text-wrap: pretty; }
.quote .qa { font-size: 13px; color: var(--fg-faint); display: flex; align-items: center; gap: 9px; }
.quote .qa::before { content: ""; width: 18px; height: 1px; background: var(--teal); }

/* ============================================================
   PRICING — split comparison
   ============================================================ */
.price-old { display: flex; flex-direction: column; gap: 9px; }
.price-old .po-lab { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fg-faint); font-weight: 700; margin-bottom: 6px; }
.po-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.po-item .po-name { font-size: 14.5px; font-weight: 600; }
.po-item .po-tool { font-size: 12px; color: var(--fg-faint); margin-top: 2px; }
.po-item .po-cost { font-family: var(--mono); font-size: 14px; color: var(--fg-mute); }
.po-sub { display: flex; justify-content: space-between; align-items: baseline; padding-top: 14px; font-size: 14px; color: var(--fg-mute); }
.po-sub b { font-family: var(--mono); font-size: 18px; color: var(--coral); }
.price-new {
  background: linear-gradient(165deg, oklch(0.28 0.05 264 / 0.4), var(--surf));
  border: 1px solid oklch(0.62 0.22 264 / 0.3); border-radius: 18px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.price-new .pn-brand { display: flex; align-items: center; gap: 10px; }
.price-new .pn-brand .wordmark { height: 20px; width: auto; display: block; }
.price-new .pn-brand .mark { width: 23px; height: 23px; display: block; }
.price-new .pn-brand b { font-size: 16px; }
.price-new .pn-price { font-family: var(--mono); font-size: 42px; font-weight: 500; letter-spacing: -0.03em; }
.price-new .pn-price span { font-size: 15px; color: var(--fg-mute); font-family: var(--font); }
.price-new .pn-save { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; font-size: 13px; color: var(--green); background: var(--signal-upsell-bg); padding: 7px 13px; border-radius: 999px; }
.price-new ul { margin: 4px 0 8px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 11px; }
.price-new li { font-size: 14px; color: var(--fg-soft); display: flex; gap: 10px; align-items: center; }
.price-new li svg { width: 15px; height: 15px; color: var(--teal); flex: none; }

/* ============================================================
   FINAL CTA — intentional full-bleed gradient
   ============================================================ */
.final-band {
  position: relative; border-radius: 24px; overflow: hidden;
  padding: clamp(56px, 8vw, 100px) var(--gutter); text-align: center;
  background: linear-gradient(115deg, oklch(0.42 0.20 270) 0%, oklch(0.50 0.17 252) 48%, oklch(0.60 0.13 196) 100%);
}
.final-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 18% 16%, oklch(1 0 0 / 0.16), transparent 42%), radial-gradient(circle at 84% 84%, oklch(0.80 0.13 192 / 0.4), transparent 46%);
}
.final-band h2 { position: relative; font-size: clamp(30px, 4.6vw, 56px); color: #fff; letter-spacing: -0.03em; max-width: 16ch; margin-inline: auto; text-wrap: balance; }
.final-band p { position: relative; margin-top: 18px; font-size: clamp(16px, 1.6vw, 19px); color: oklch(1 0 0 / 0.86); max-width: 520px; margin-inline: auto; }
.final-band .cta-row { position: relative; margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.mbtn-on-grad { background: #fff; color: oklch(0.30 0.12 268); }
.mbtn-on-grad:hover { transform: translateY(-1px); box-shadow: 0 12px 36px oklch(0 0 0 / 0.3); }
.mbtn-line { background: oklch(1 0 0 / 0.12); border-color: oklch(1 0 0 / 0.32); color: #fff; }
.mbtn-line:hover { background: oklch(1 0 0 / 0.2); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { padding-block: 64px 44px; border-top: 1px solid var(--line); }
.footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.footer .brand .mark { color: var(--teal); }
.footer-tag { font-size: 14px; color: var(--fg-mute); max-width: 280px; margin-top: 16px; line-height: 1.5; }
.footer-cols { display: flex; gap: 64px; flex-wrap: wrap; }
.footer-nav { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.footer-nav a:not(.mbtn) { font-size: 14px; color: var(--fg-mute); transition: color .2s; }
.footer-nav a:not(.mbtn):hover { color: var(--fg); }
.fcol h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--fg-faint); font-weight: 600; margin-bottom: 16px; }
.fcol a { display: block; font-size: 14px; color: var(--fg-mute); margin-bottom: 11px; transition: color .2s; }
.fcol a:hover { color: var(--fg); }
.footer-bot { margin-top: 50px; padding-top: 26px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--fg-faint); }

/* ============================================================
   GOALS — section header + real two-pane goals app
   ============================================================ */
.goals-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: end; }
.goals-pts { display: flex; flex-direction: column; gap: 14px; }
.goals-pt { display: flex; gap: 12px; font-size: 14px; color: var(--fg-mute); line-height: 1.45; }
.goals-pt .n { font-family: var(--mono); font-size: 12px; color: var(--teal); font-weight: 600; flex: none; padding-top: 1px; }
.goals-pt b { color: var(--fg); font-weight: 600; }
.goals-shot { margin-top: clamp(36px, 4vw, 56px); }
@media (max-width: 920px) { .goals-head { grid-template-columns: 1fr; gap: 28px; } }

/* two-pane goals app (forked from goals page + goal-detail) */
.gl { display: flex; height: var(--gt-h, 600px); font-size: 13px; }
.gl-list { width: 320px; flex: none; border-right: 1px solid var(--border); display: flex; flex-direction: column; }
.gl-list-head { padding: 16px; border-bottom: 1px solid var(--border); }
.gl-list-titlerow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gl-list-title { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.gl-list-title .muted { color: var(--muted-foreground); }
.gl-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.gl-filter { padding: 4px 10px; font-size: 11.5px; border-radius: 999px; color: var(--muted-foreground); border: none; background: transparent; cursor: pointer; transition: background .15s, color .15s; }
.gl-filter:hover { color: var(--foreground); background: var(--accent); }
.gl-filter.on { background: var(--gt-purple, oklch(0.62 0.22 264)); color: #fff; }
.gl-list-body { flex: 1; overflow: hidden; padding: 12px; display: flex; flex-direction: column; gap: 8px; }

.gl-card { text-align: left; background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px; cursor: pointer; font-family: inherit; transition: border-color .15s, background .15s; }
.gl-card:hover { background: oklch(0.235 0.03 264 / 0.4); }
.gl-card.sel { border-color: oklch(0.62 0.22 264 / 0.55); background: oklch(0.30 0.045 264 / 0.3); }
.gl-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.gl-card-title { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 600; min-width: 0; }
.gl-card-title svg { color: var(--muted-foreground); flex: none; }
.gl-card-badges { display: inline-flex; gap: 6px; flex: none; }
.gl-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 6px; line-height: 1.4; }
.gl-badge-active { background: var(--gt-purple, oklch(0.62 0.22 264)); color: #fff; }
.gl-badge-plan { background: transparent; border: 1px solid var(--border); color: var(--muted-foreground); }
.gl-badge-rev { background: var(--signal-risk, oklch(0.70 0.18 30)); color: #fff; }
.gl-card-obj { font-size: 12px; color: var(--muted-foreground); margin-bottom: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gl-card-stats { display: flex; gap: 12px; font-size: 11px; color: var(--muted-foreground); margin-top: 8px; }

.gl-funnel { display: flex; border-radius: 999px; overflow: hidden; background: var(--muted); }
.gl-funnel span { display: block; }

.gl-detail { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.gl-detail-head { padding: 16px 18px; border-bottom: 1px solid var(--border); }
.gl-dh-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.gl-dh-title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; }
.gl-dh-obj { font-size: 13px; color: var(--muted-foreground); margin-top: 3px; }
.gl-dh-actions { display: flex; gap: 7px; flex: none; }
.gl-danger { color: var(--destructive) !important; }
.gl-dh-stats { display: flex; gap: 14px; font-size: 12px; color: var(--muted-foreground); margin-top: 10px; flex-wrap: wrap; }
.gl-attn { color: var(--signal-action, oklch(0.80 0.14 78)); }
.gl-tabs { display: flex; gap: 2px; margin-top: 14px; margin-bottom: -16px; border-bottom: 1px solid var(--border); }
.gl-tab { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; font-size: 13px; color: var(--muted-foreground); background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; transition: color .15s; }
.gl-tab:hover { color: var(--foreground); }
.gl-tab.on { color: var(--foreground); font-weight: 600; border-bottom-color: var(--gt-purple, oklch(0.62 0.22 264)); }
.gl-tab-badge { font-size: 10px; background: var(--signal-risk, oklch(0.70 0.18 30)); color: #fff; border-radius: 5px; padding: 0 5px; line-height: 16px; }

.gl-detail-body { flex: 1; overflow: hidden; padding: 18px; display: flex; flex-direction: column; gap: 22px; }
.gl-strips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.gl-strip { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--card); }
.gl-strip-bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.gl-strip-n { font-size: 26px; font-weight: 700; line-height: 1; }
.gl-strip-l { font-size: 11.5px; color: var(--muted-foreground); margin-top: 7px; }

.gl-sec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; color: var(--foreground); }
.gl-sec-head svg { color: var(--muted-foreground); flex: none; }
.gl-sec-head h3 { font-size: 13.5px; font-weight: 600; }
.gl-sec-n { font-size: 12px; color: var(--muted-foreground); }
.gl-sec-sub { font-size: 12px; color: var(--muted-foreground); opacity: 0.7; }
.gl-rows { display: flex; flex-direction: column; gap: 2px; }
.gl-row { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 8px; border-left: 2px solid transparent; transition: background .15s; }
.gl-row:hover { background: oklch(0.235 0.03 264 / 0.3); }
.gl-row.blocked { border-left-color: var(--signal-risk, oklch(0.70 0.18 30)); }
.gl-row-main { flex: 1; min-width: 0; }
.gl-row-acct { font-size: 13px; font-weight: 600; }
.gl-row-meta { font-size: 12px; color: var(--muted-foreground); margin-top: 2px; line-height: 1.4; }
.gl-row-meta.risk { color: oklch(0.70 0.18 30); }
.gl-row-btn { font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 7px; background: oklch(1 0 0 / 0.05); border: 1px solid var(--line-2); color: var(--fg); flex: none; cursor: pointer; transition: background .15s; }
.gl-row-btn:hover { background: oklch(1 0 0 / 0.1); }
.gl-row-btn.prime { background: var(--grad) border-box; border-color: transparent; color: #fff; }
.gl-row-btn.prime:hover { filter: brightness(1.08); }

/* ============================================================
   Reveal (frozen-clock safe — armed only when clock is live)
   ============================================================ */
.reveal { opacity: 1; transform: none; }
html.anim-live .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.anim-live .reveal.in { opacity: 1; transform: none; }
html.anim-live .reveal.d1 { transition-delay: .06s; }
html.anim-live .reveal.d2 { transition-delay: .12s; }
html.anim-live .reveal.d3 { transition-delay: .18s; }
@media (prefers-reduced-motion: reduce) {
  html.anim-live .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   TWEAK OVERRIDES
   ============================================================ */
html.accent-purple { --teal: oklch(0.74 0.16 264); --grad: linear-gradient(100deg, oklch(0.55 0.22 264), oklch(0.74 0.16 264)); }
html.accent-teal   { --purple: oklch(0.70 0.15 220); --purple-lt: oklch(0.80 0.12 205); --grad: linear-gradient(100deg, oklch(0.64 0.16 235), oklch(0.82 0.13 190)); }
html.bg-stone {
  --background: oklch(0.145 0.006 75); --bg-2: oklch(0.175 0.006 75);
  --card: oklch(0.198 0.006 75); --surf-2: oklch(0.232 0.006 75);
  --sidebar: oklch(0.172 0.006 75); --muted: oklch(0.235 0.006 75); --secondary: oklch(0.235 0.006 75);
  --border: oklch(1 0.004 80 / 0.10); --foreground: oklch(0.95 0.004 80); --muted-foreground: oklch(0.62 0.008 80);
}
html.no-texture .hero-halo, html.no-texture .final-band::before { display: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 920px) {
  .split, .problem-grid { grid-template-columns: 1fr; gap: 44px; }
  .problem-points { grid-template-columns: 1fr; gap: 22px; }
  .split.flip .split-visual { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .step { border-right: none; border-bottom: 1px solid var(--line); }
  .step:last-child { border-bottom: none; }
  .results-stats { grid-template-columns: 1fr; gap: 0; }
  .rstat { border-left: none; border-top: 1px solid var(--line); padding: 26px 0; }
  .rstat:first-child { border-top: none; }
  .quotes { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 680px) {
  .nav-links { display: none; }
  .hero-inner h1 { font-size: clamp(34px, 11vw, 52px); }
}