/* ── SigmaGEX logged-out landing — skylit terminal language ──────────────────
 *
 * Scoped stylesheet for templates/landing.html ONLY (no other page loads it).
 * Design language: docs/mockups/SKYLIT_REFERENCE.md + ictCinematic.css —
 * flat near-black panels, 1px hairline separation, barely-there wells,
 * de-rounded 4–6px corners, light-on-dark primary pills, 9px uppercase
 * micro-captions, tabular mono numerics, ONE neutral focus ring, and
 * premium restraint: no drop shadows, no chrome gradients, no glow.
 *
 * Theme-aware: dark is canonical (brand); light theme swaps the token set
 * via prefers-color-scheme. Screenshots stay on a dark stage in both.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --bg: #07080b;
  --panel: #0c0e14;
  --panel-2: #10131b;
  --stage: #08090d;                       /* dark stage behind screenshots  */
  --hairline: rgba(255, 255, 255, .08);
  --line-strong: rgba(255, 255, 255, .17);
  --well: rgba(255, 255, 255, .04);
  --well-hover: rgba(255, 255, 255, .07);
  --text: #e6ebf5;
  --text-2: #c3cadb;
  --muted: #8b93a7;
  --faint: #565d6e;
  --primary-fill: #e5e5e7;                /* light-on-dark active pill      */
  --primary-fg: #1c1c1f;
  --pos: #34d399;                         /* green = live ONLY              */
  --accent: #33c6e6;                      /* brand cyan (matches app accent)*/
  --accent-fg: #04181d;                   /* text on an accent fill         */
  --bull: #2bd4e0;                        /* Founder's Bull — data positive */
  --bear: #fa8a7a;                        /* Founder's Bear — data negative */
  --ring: #71717a;
  --focus: 0 0 0 3px color-mix(in oklab, var(--ring) 45%, transparent);
  --r-card: 6px;
  --r-md: 6px;
  --r-sm: 4px;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
               Consolas, "Liberation Mono", monospace;

  /* ── type scale ────────────────────────────────────────────────────────
     The ONLY sizes on this page. Before this existed the sheet used ad-hoc
     15/16/14/13/12.5/12/11.5/10.5/9.5/9 — nine near-identical sizes that read
     as noise. Everything new references these; the legacy literals that remain
     are the ones these tokens were derived from.
     2026-08-10 (Derek): whole scale stepped down a notch, and --t-hero pulled
     WAY down (62→30 max) — the tagline was reading as a billboard, and the
     logo above it already carries the brand voice. */
  --t-hero:  clamp(22px, 2.6vw, 30px);
  --t-h2:    clamp(21px, 2.7vw, 27px);
  --t-h3:    15.5px;
  --t-h4:    13px;
  --t-lead:  14px;
  --t-body:  13px;
  --t-small: 12px;
  --t-micro: 10.5px;
  --t-cap:   9px;

  /* ── space scale (4px base) — all vertical rhythm ───────────────────── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 24px;
  --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;

  /* ── page rhythm — the ONE lever for total page length ─────────────────
     Section padding, not content, dominated this page's height: ~1250px of
     the old 5138px desktop scroll was section padding alone. The hero also
     opened on 104px of dead space under the sticky nav, which pushed the
     headline and CTA needlessly far down the fold. These tokens centralise
     that rhythm — tune the page's length HERE, never on individual sections.
     Mobile values first; the 640px breakpoint below steps them up.
     2026-08-10 (Derek): tightened again, hard — the goal is logo → tagline →
     carousel inside one ~900px viewport, so every vertical token gives blood. */
  --hero-pt: 14px;   /* hero space under the logo banner */
  --hero-pb: 20px;
  --sec-y:   28px;   /* every content section, top and bottom */

  /* Measure. Widened 1072 → 1180: the asymmetric hero and the 3-up flagship
     row need it. Text blocks stay measure-limited independently, so the wider
     container never produces a long line. */
  --wrap-max: 1180px;

  /* Strength of the hero's accent wash — the one permitted glow. Tuned for
     near-black; the light scheme dials it down (see below) because the same
     mix reads as a smudge on white. */
  --hero-wash: 9%;
}

/* Desktop step-up for the page rhythm. Barely steps up any more — desktop is
   exactly where the one-viewport (~900px) budget bites hardest. */
@media (min-width: 640px) {
  :root {
    --hero-pt: 16px;
    --hero-pb: 24px;
    --sec-y:   34px;
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #fafafa;
    --panel: #ffffff;
    --panel-2: #f4f4f5;
    --hairline: rgba(0, 0, 0, .10);
    --line-strong: rgba(0, 0, 0, .20);
    --well: rgba(0, 0, 0, .03);
    --well-hover: rgba(0, 0, 0, .06);
    --text: #17181c;
    --text-2: #3d4048;
    --muted: #5f6572;
    --faint: #9096a3;
    --primary-fill: #1c1c1f;
    --primary-fg: #f5f5f7;
    --pos: #059669;
    --accent: #0891b2;
    --accent-fg: #ffffff;
    --bull: #0798ac;
    --bear: #dc5b44;
    --hero-wash: 5%;
  }
}

/* ── base ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0;
  overflow-x: clip;
  background: var(--bg);                  /* flat ground — no radial glow   */
  color: var(--text);
  font: 400 14px/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
figure { margin: 0; }
a { color: inherit; }
::selection { background: color-mix(in oklab, var(--ring) 35%, transparent); }

/* Side gutters cut ~30% (Derek 2026-08-10): 20→14 mobile, 32→22 desktop. */
.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 14px; }
@media (min-width: 640px) { .wrap { padding: 0 22px; } }

/* skylit uppercase micro-caption */
.cap {
  font-size: var(--t-cap);
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}
.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ── buttons — skylit .pill recipe ──────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 16px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--text-2);
  font: 600 12.5px/1 var(--font-sans);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.btn:hover { background: var(--well-hover); border-color: var(--line-strong); color: var(--text); }
.btn:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus); }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent);
  border-color: transparent;
  color: var(--accent-fg);
  font-weight: 700;
}
.btn-primary:hover {
  background: color-mix(in oklab, var(--accent) 86%, white);
  border-color: transparent;
  color: var(--accent-fg);
}
.btn-lg { height: 40px; padding: 0 20px; font-size: 13px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* ── brand hero banner — the VolStrata wordmark logo at the top of the page ──
   The PNG (static/img/volstrata-hero.png) is a transparent-background RGBA cut
   of the logo composition and carries its own baked glow. On top of that we add
   a slow, subtle accent-cyan halo that breathes around the logo so the banner
   feels alive without shimmering — deliberately gentle and slow (8s), not a
   flashing shine. drop-shadow() follows the PNG's ALPHA, so the halo hugs the
   V + wordmark silhouette rather than a rectangle. The static (resting) logo is
   already complete, so under reduced-motion the animation simply never applies
   and nothing is lost. Sizing stays inline on the <img>; this class only lights
   it. */
@media (prefers-reduced-motion: no-preference) {
  .brand-hero .hero-logo {
    animation: hero-glow 8s ease-in-out infinite;
  }
  @keyframes hero-glow {
    0%, 100% {
      filter: drop-shadow(0 0 5px color-mix(in oklab, var(--accent) 18%, transparent));
    }
    50% {
      filter: drop-shadow(0 0 20px color-mix(in oklab, var(--accent) 40%, transparent));
    }
  }
}

/* ── top nav ────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}
.nav-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img { width: 24px; height: 24px; border-radius: var(--r-sm); }
.brand-word {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text);
}
.brand-word .dim { color: var(--faint); font-weight: 700; }
.nav-links { display: flex; align-items: center; gap: 8px; }
.nav-doclink {
  display: none;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--r-md);
  transition: color 120ms ease, background-color 120ms ease;
}
.nav-doclink:hover { color: var(--text); background: var(--well-hover); }
@media (min-width: 640px) { .nav-doclink { display: inline-block; } }

/* ── hero — asymmetric: editorial copy left, instrument panel right ────────
   This is the page's ONE signature layout gesture. The previous hero was a
   centered stack, which is the single most generic SaaS shape there is and the
   main reason the page read as template-generated. Copy is LEFT-aligned at
   width; it only centers on the stacked mobile layout where a left rag against
   a narrow measure looks accidental rather than intentional. */
.hero {
  /* vertical-only — never clobber .wrap's horizontal padding */
  padding-top: var(--hero-pt);
  padding-bottom: var(--hero-pb);
  /* faint accent wash — the one permitted glow, barely-there */
  background: radial-gradient(760px 340px at 22% -120px,
              color-mix(in oklab, var(--accent) var(--hero-wash), transparent),
              transparent 72%);
}
/* padding steps up via the --hero-pt/--hero-pb tokens at 640px — see :root */

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s7);
  align-items: center;
}
@media (min-width: 940px) {
  .hero-grid { grid-template-columns: 7fr 6fr; gap: var(--s7); }
}

/* Source order is copy → CTAs → panel, so the stacked mobile layout keeps the
   primary CTA above the instrument panel without any order juggling. A 390px
   viewport must never have the SVG pushing "Create your free account" below
   the fold. */
.hero-copy { min-width: 0; }

.live-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: var(--well);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.live-pill .lp-on { color: var(--pos); }
.live-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos);
  animation: breathe 2.4s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { opacity: .55; box-shadow: 0 0 0 0 color-mix(in oklab, var(--pos) 55%, transparent); }
  50%      { opacity: 1;   box-shadow: 0 0 6px 1px color-mix(in oklab, var(--pos) 45%, transparent); }
}

.hero h1 {
  margin: var(--s3) 0 0;
  font-size: var(--t-hero);
  font-weight: 750;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  /* was 15ch at 62px — at the new small size a 15ch cage wraps the line into
     three stubby rows, so let it run (~1–2 lines). */
  max-width: 40ch;
  text-wrap: balance;
}
/* the accent word — brand cyan with a soft data-glow */
.hero h1 .ah {
  font-style: normal;
  color: var(--accent);
  text-shadow: 0 0 26px color-mix(in oklab, var(--accent) 38%, transparent);
}
.hero .sub {
  margin: 10px 0 0;
  max-width: 58ch;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.hero .cta-row {
  margin-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.hero .cta-note { margin-top: var(--s3); }

/* Mobile: a left rag inside a narrow measure reads as a mistake, so the
   stacked layout centers. At ≥940px the two-column split makes left-alignment
   structural and it stays left. */
@media (max-width: 939px) {
  .hero-copy { text-align: center; display: flex; flex-direction: column; align-items: center; }
  .hero-copy .cta-row { justify-content: center; }
}

/* ── hero instrument panel ─────────────────────────────────────────────────
   Hand-authored inline SVG, static geometry. NOT a screenshot and NOT a chart
   library: zero LCP cost, perfect theme-token color in light AND dark, and
   structurally immune to the screenshot-leak risk (there are no pixels to
   audit — every mark is a token-colored path).

   Uses --panel, deliberately NOT --stage. --stage has no light-scheme override
   because the carousel behind it holds dark-UI screenshots in both schemes;
   the panel must flip with the theme or it becomes the one element on the page
   that ignores light mode. */
.inst {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--panel);
  overflow: hidden;
  /* Capped (Derek 2026-08-10): the panel's 420×200 SVG scales with its column,
     and at full 6fr width it was the hero's height driver. 420px keeps it
     legible while shaving ~90px off the fold budget. */
  max-width: 420px;
  width: 100%;
  justify-self: end;
}
@media (max-width: 939px) { .inst { justify-self: center; } }
/* Metrics deliberately identical to .sg-chrome (34px, hairline bottom) so the
   hero panel and the carousel frame rhyme rather than merely coexist. */
.inst-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel-2);
}
.inst-chrome .inst-title {
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  white-space: nowrap;
}
/* "Illustrative" is load-bearing, not decoration: this panel shows round
   invented numbers and must never imply a live quote on a static page. */
.inst-chrome .inst-note {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}
.inst-body { padding: 10px 10px 6px; }
.inst-body svg { width: 100%; height: auto; display: block; overflow: visible; }

.inst-foot {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--hairline);            /* 1px-gap trick = hairline grid  */
  border-top: 1px solid var(--hairline);
}
.inst-cell { background: var(--panel); padding: 7px 12px 8px; min-width: 0; }
.inst-cell .v {
  margin-top: var(--s1);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-2);
}
.inst-cell.is-bull .v { color: var(--bull); }
.inst-cell.is-bear .v { color: var(--bear); }
.inst-cell.is-acc  .v { color: var(--accent); }

/* instrument marks */
.in-axis  { stroke: var(--line-strong); stroke-width: 1; }
.in-bull  { fill: var(--bull); }
.in-bear  { fill: var(--bear); }
.in-zg    { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 4 4; }
.in-wall-bull { stroke: var(--bull); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.in-wall-bear { stroke: var(--bear); stroke-width: 1; stroke-dasharray: 3 3; opacity: .75; }
.in-spot  { stroke: var(--text); stroke-width: 1.4; opacity: .8; }
.in-spot-cap { fill: var(--text); opacity: .8; }
.in-lab   { font: 700 8px var(--font-mono); letter-spacing: .06em; }
.in-lab-bull { fill: var(--bull); }
.in-lab-bear { fill: var(--bear); }
.in-lab-acc  { fill: var(--accent); }
.in-lab-mut  { fill: var(--faint); }

/* Bars draw in ONCE from the axis and end fully visible — nothing here loops,
   and with reduced-motion the animation simply never applies (the static end
   state is the default), so no content depends on motion to be readable. */
@media (prefers-reduced-motion: no-preference) {
  .in-bar { transform-box: fill-box; animation: in-draw 340ms cubic-bezier(.22, .7, .3, 1) both; animation-delay: calc(var(--i, 0) * 22ms); }
  .in-bar.up { transform-origin: center bottom; }
  .in-bar.dn { transform-origin: center top; }
  @keyframes in-draw { from { transform: scaleY(0); } to { transform: none; } }
}

/* terminal stat strip — hairline cells, mono values */
.stats {
  margin-top: 52px;
  width: 100%;
  max-width: 880px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--hairline);            /* 1px-gap trick = hairline grid  */
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
/* Coverage-rail variant: the same hairline grid, promoted out of the hero into
   its own full-width section (in the hero it competed with the instrument
   panel for the same glance). */
.stats.cover { margin-top: 0; max-width: none; }
@media (min-width: 720px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  background: var(--panel);
  padding: 11px 14px 12px;
  text-align: left;
}
/* --muted, not the inherited --faint: in the coverage rail these labels are
   the only thing naming what the value beside them IS, and --faint on --panel
   measures 2.93:1 — under 4.5 for 9px text. --faint stays decorative-only. */
.stat .cap { color: var(--muted); }
/* accent tick before each stat caption — quiet wayfinding */
.stat .cap::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-right: 7px;
  border-radius: 1px;
  background: var(--accent);
  opacity: .85;
  transform: translateY(-1px);
}
.stat .v {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
}

/* ── section headers ────────────────────────────────────────────────────── */
.sec { padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
/* the coverage rail hugs the section above it (now the carousel tour) —
   it is a spec line, not its own act */
.sec.sec-tight { padding-top: 0; padding-bottom: var(--sec-y); }
.sec-head { max-width: 640px; margin: 0 auto 18px; text-align: center; }
/* kickers are wayfinding — accent-lit with hairline rules either side */
.sec-head .cap {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.sec-head .cap::before,
.sec-head .cap::after {
  content: '';
  width: 16px;
  height: 1px;
  background: color-mix(in oklab, var(--accent) 55%, transparent);
}
.sec-head h2 {
  margin: 8px 0 0;
  font-size: clamp(19px, 2.5vw, 24px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.sec-head p { margin: 6px 0 0; font-size: var(--t-body); color: var(--muted); }

/* ── carousel — flat terminal frame, frameless screenshots ─────────────── */
.sg-carousel {
  position: relative;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--stage);
  overflow: hidden;
}
.sg-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 34px;
  padding: 0 12px;
  border-bottom: 1px solid var(--hairline);
  background: var(--panel);
}
.sg-chrome .sg-host {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}
.sg-chrome .sg-view {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sg-chrome .sg-count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 10px;
  color: var(--faint);
  white-space: nowrap;
}
/* The arrows are positioned against the STAGE, not the whole frame, so adding
   the docked caption bar below cannot drag them off the media's centre line
   (the old `top: calc(50% + 17px)` hand-compensated for the chrome bar and
   would have needed a second fudge factor for the caption). */
.sg-stage { position: relative; }
.sg-viewport { overflow: hidden; }
.sg-track {
  display: flex;
  will-change: transform;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.sg-slide { flex: 0 0 100%; min-width: 0; }
/* WHY `contain` AND NOT `cover`.
   This box holds PRODUCT SCREENSHOTS, and the curated pool is deliberately
   mixed-aspect: full-page captures run ~1.60 (1600x1000), the shipped
   product-*.png run 1.39, and the wide ladder/heatmap shots run 2.27-2.63.
   A fixed box with `cover` crops whatever does not match it — measured live at
   11% (chart-*.png), 21.7% (product-*.png) and 32.4% (product-trinity.png).
   What gets cut is the outside of the frame, which on these captures is exactly
   the chart title, the axis labels and the flow panel — i.e. the parts that make
   a screenshot legible as a product. A marketing carousel that amputates a third
   of the product is worse than one that letterboxes, so: show the whole frame.
   `--stage` behind it means the letterbox reads as the panel, not as a gap.
   16/10 is the box because it matches the ~1.60 capture set, which minimises the
   bars for the shots Derek is actually choosing between. */
.sg-media {
  width: 100%;
  aspect-ratio: 16 / 10;
  /* Viewport cap (Derek 2026-08-10, one-viewport goal): at full wrap width the
     16/10 box alone is ~700px tall. Capping to 60vh lets the whole frame fit a
     ~900px window; `contain` letterboxes onto --stage either side, which reads
     as the panel, not as a gap. */
  max-height: min(60vh, 620px);
  background: var(--stage);
  overflow: hidden;
}
.sg-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.sg-media.pos-top img { object-position: center top; }
.sg-media.pos-left img { object-position: left center; }

.sg-arrow {
  position: absolute;
  top: 50%;                               /* centred on the media, via .sg-stage */
  transform: translateY(-50%);
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--panel) 82%, transparent);
  color: var(--text-2);
  cursor: pointer;
  z-index: 5;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sg-arrow:hover { background: var(--panel-2); color: var(--text); }
.sg-arrow:active { transform: translateY(-50%) translateY(0.5px); }
.sg-arrow:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus); }
.sg-prev { left: 10px; }
.sg-next { right: 10px; }
.sg-arrow svg { width: 16px; height: 16px; }

/* Caption DOCKS into the frame as a bottom bar rather than floating below it.
   The frame then reads as one instrument — chrome bar → media → caption bar —
   instead of a picture with a stray line of text under it. */
.sg-capbar {
  display: flex;
  align-items: center;
  min-height: 38px;
  padding: 9px 14px;
  border-top: 1px solid var(--hairline);
  background: var(--panel);
  font-size: var(--t-small);
  line-height: 1.5;
  color: var(--muted);
}

/* Named TAB RAIL replaces anonymous dots. The views have real names; seven
   identical ticks threw that information away. Scrolls inside ITSELF at narrow
   widths — the page body must never scroll horizontally. */
.sg-tabs {
  /* positioned so the tab buttons' offsetLeft resolves against the RAIL, which
     is what the controller's keep-active-tab-visible arithmetic assumes.
     Without this the offsetParent is an ancestor and the maths is silently
     wrong — the rail simply never scrolls to follow autoplay. */
  position: relative;
  display: flex;
  gap: 2px;
  margin-top: var(--s3);
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.sg-tabs::-webkit-scrollbar { height: 3px; }
.sg-tabs::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 2px; }
.sg-tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  /* 40px min: the rail is the primary slide control on touch, and a 9px
     micro-cap on its own is not a tappable target. */
  min-height: 40px;
  border: 0;
  padding: 0 13px;
  background: transparent;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font: 700 var(--t-cap)/1.2 var(--font-sans);
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease, background-color 120ms ease;
}
.sg-tab:hover { color: var(--text-2); background: var(--well-hover); }
.sg-tab[aria-current="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.sg-tab:focus-visible { outline: none; color: var(--text); box-shadow: var(--focus); border-radius: var(--r-sm); }

/* One slide: no arrows, no rail, no autoplay — a "carousel" of one is a
   picture, and controls that do nothing are worse than no controls. */
.sg-carousel.is-single .sg-arrow { display: none; }

/* ── product grid — dense hairline cells ───────────────────────────────── */
.cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 560px)  { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px)  { .cards { grid-template-columns: repeat(4, 1fr); } }
.card {
  position: relative;
  background: var(--panel);
  padding: 16px 18px 20px;
  /* inset ring is clip-safe inside the overflow:hidden hairline grid; drop
     shadows would be clipped, so accent lift is carried by the inset ring. */
  box-shadow: inset 0 0 0 0 transparent;
  transition: background-color 140ms ease, box-shadow 220ms ease;
}
.card:hover {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
              inset 0 22px 46px -26px color-mix(in oklab, var(--accent) 34%, transparent);
}
/* accent stripe (rizen kpi-stripe motif) — draws in on hover */
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.22, .7, .3, 1);
}
.card:hover::before { transform: scaleX(1); }
.card .cap { color: color-mix(in oklab, var(--accent) 72%, var(--muted)); }
.card h3 {
  margin: 9px 0 0;
  font-size: var(--t-h4);
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--text);
}
.card p {
  margin: 6px 0 0;
  font-size: var(--t-small);
  line-height: 1.6;
  color: var(--muted);
}

/* ── card mini-graphics — rizen data-motif SVGs ─────────────────────────── */
/* The DATA carries the colour (bull/bear/accent), the chrome stays flat.    */
.card-fig {
  height: 58px;
  margin: 2px 0 13px;
  display: flex;
  align-items: center;
}
.card-fig svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: filter 160ms ease, opacity 160ms ease;
  opacity: .92;
}
.card:hover .card-fig svg { filter: brightness(1.16); opacity: 1; }

.fg-axis { stroke: var(--line-strong); stroke-width: 1; }
.fg-mid  { stroke: var(--line-strong); stroke-width: 1; }
.fg-zg   { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 3; opacity: .95; }
.fg-atm  { stroke: var(--faint); stroke-width: 1; stroke-dasharray: 2 3; }
.fg-bull { fill: var(--bull); }
.fg-bear { fill: var(--bear); }
.fg-spot { fill: none; stroke: var(--text); stroke-width: 1.4; opacity: .85;
           stroke-linecap: round; stroke-linejoin: round; }
.fg-px   { fill: none; stroke: var(--faint); stroke-width: 1.4;
           stroke-linecap: round; stroke-linejoin: round; }
.fg-cvd  { fill: none; stroke: var(--accent); stroke-width: 1.8;
           stroke-linecap: round; stroke-linejoin: round; }
.fg-curve { fill: none; stroke: var(--accent); stroke-width: 1.8;
            stroke-linecap: round; stroke-linejoin: round; }
.fg-dot      { fill: var(--accent); }
.fg-dot-halo { fill: var(--accent); opacity: .18; }
.fg-dot-mut  { fill: var(--faint); }
.fg-dot-mut2 { fill: var(--muted); }
.fg-dot-bull { fill: var(--bull); }
.fg-dot-bear { fill: var(--bear); }
.fg-lvl-bull { stroke: var(--bull); stroke-width: 1.2; stroke-dasharray: 5 4; }
.fg-lvl-bear { stroke: var(--bear); stroke-width: 1.2; stroke-dasharray: 5 4; }
.fg-lvl-acc  { stroke: var(--accent); stroke-width: 1.2; stroke-dasharray: 3 3; }
.fg-spark-a { fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fg-spark-b { fill: none; stroke: var(--bull);   stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fg-spark-c { fill: none; stroke: var(--bear);   stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fg-lab { font: 700 6px var(--font-mono); letter-spacing: .04em; }
.fg-lab-bull { fill: var(--bull); }
.fg-lab-bear { fill: var(--bear); }
.fg-lab-acc  { fill: var(--accent); }
.fg-lab-mut  { fill: var(--muted); }
.fg-cmd  { font: 600 7.5px var(--font-mono); fill: var(--accent); letter-spacing: .02em; }
.fg-resp  { fill: var(--muted); opacity: .38; }
.fg-resp2 { fill: var(--muted); opacity: .22; }
.fg-caret { fill: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .fg-caret { animation: fg-blink 1.15s steps(2, jump-none) infinite; }
  @keyframes fg-blink { 0% { opacity: 1; } 100% { opacity: 0; } }
}

/* additional motif marks (flagship + new grid rows) */
.fg-cell      { fill: var(--accent); }
.fg-cell-bear { fill: var(--bear); }
.fg-cell-hot  { fill: none; stroke: var(--text); stroke-width: 1.2; }
.fg-candle-w  { stroke: var(--faint); stroke-width: 1; }
.fg-fvg       { fill: var(--accent); opacity: .16; }
.fg-ob        { fill: var(--bear); opacity: .20; }
.fg-sweep     { stroke: var(--text); stroke-width: 1; stroke-dasharray: 4 3; opacity: .7; }
.fg-rank      { fill: var(--muted); opacity: .45; }
.fg-rank-lead { fill: var(--accent); }
.fg-tick-ok   { fill: none; stroke: var(--pos);  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fg-tick-no   { fill: none; stroke: var(--bear); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* label at flagship scale — the 6px .fg-lab is sized for the 132×44 minis */
.fg-lab-lg    { font: 700 9px var(--font-mono); letter-spacing: .06em; }
.fg-chip      { fill: none; stroke: var(--accent); stroke-width: 1; opacity: .7; }
.fg-equity    { fill: none; stroke: var(--accent); stroke-width: 1.8;
                stroke-linecap: round; stroke-linejoin: round; }

/* ── flagship trio — three wide cards, LARGE motifs ────────────────────────
   The "more graphical" lever. Eight identical quarter-width cells with 132×44
   micro-SVGs was uniform mush: nothing led, so nothing landed. Hierarchy, not
   size, was the actual problem — three big motifs on top, dense rows beneath. */
.flags {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}
@media (min-width: 1000px) { .flags { grid-template-columns: repeat(3, 1fr); } }
.flag {
  position: relative;
  background: var(--panel);               /* fills the 1px-gap hairline grid */
  padding: var(--s5) var(--s5) var(--s6);
  box-shadow: inset 0 0 0 0 transparent;
  transition: background-color 140ms ease, box-shadow 220ms ease;
}
.flag:hover {
  background: var(--panel-2);
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent),
              inset 0 22px 46px -26px color-mix(in oklab, var(--accent) 34%, transparent);
}
/* same accent stripe as .card — the two tiers should feel like one family */
.flag::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in oklab, var(--accent) 55%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 260ms cubic-bezier(.22, .7, .3, 1);
}
.flag:hover::before { transform: scaleX(1); }
.flag .cap { color: color-mix(in oklab, var(--accent) 72%, var(--muted)); }
/* the motif takes the top of the card — that is the point */
.flag-fig {
  height: 116px;
  margin-bottom: var(--s5);
  display: flex;
  align-items: center;
}
.flag-fig svg {
  width: 100%; height: 100%;
  overflow: visible;
  opacity: .94;
  transition: filter 160ms ease, opacity 160ms ease;
}
.flag:hover .flag-fig svg { filter: brightness(1.14); opacity: 1; }
.flag h3 {
  margin: var(--s2) 0 0;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--text);
}
.flag p {
  margin: var(--s2) 0 0;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--muted);
}

/* Dense variant of the existing grid — smaller motif, tighter box. Sits BELOW
   the flagship trio, so it reads as the index rather than the pitch. */
.cards--dense .card-fig { height: 42px; margin: 0 0 var(--s3); }
.cards--dense .card { padding: var(--s4) var(--s4) var(--s5); }
.cards--dense .card h3 { font-size: var(--t-h4); }

/* ── method — the three beats ──────────────────────────────────────────────
   The page asserted capability but never explained mechanism. A single
   hairline runs THROUGH the numeral row: the numeral carries the page
   background and sits on the rule, so the rule appears to pass behind it. No
   icons, no arrows — the restraint is the point. */
.method {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s6);
}
@media (min-width: 760px) { .method { grid-template-columns: repeat(3, 1fr); gap: var(--s6); } }
.m-step { position: relative; padding-top: var(--s5); }
.m-step::before {
  content: '';
  position: absolute;
  left: 0; right: calc(var(--s6) * -1);
  top: 8px;
  height: 1px;
  background: var(--hairline);
}
@media (max-width: 759px) { .m-step::before { right: 0; } }
.m-step:last-child::before { right: 0; }
.m-num {
  position: absolute;
  top: 0; left: 0;
  padding-right: 12px;
  background: var(--bg);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 17px;
  color: var(--faint);
}
.m-step h3 {
  margin: 0;
  font-size: var(--t-h3);
  font-weight: 700;
  letter-spacing: -0.014em;
  color: var(--text);
}
.m-step p {
  margin: var(--s2) 0 0;
  max-width: 42ch;
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--muted);
}

/* ── pricing strip — quiet, one row ────────────────────────────────────────
   Tier NAMES only. Dollar amounts live in the plan catalog and would drift the
   moment they were duplicated here; the strip sets expectations and hands off
   to /pricing for the numbers. */
/* the strip is quiet enough that a full .sec-head would overpower it */
.price-head {
  margin: 0 0 var(--s3);
  color: var(--accent);
}
.price-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4) var(--s5);
  padding: var(--s4) var(--s5);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--panel);
}
.price-tiers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.price-tier {
  font-family: var(--font-mono);
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--muted);
}
.price-tier.is-free { color: var(--accent); }
.price-tiers .sep { color: var(--faint); }
/* --muted, not --faint: this is a real sentence a reader is meant to read
   (2.93:1 vs 6.27:1). --faint is reserved for genuinely decorative marks. */
.price-note { font-size: var(--t-small); color: var(--muted); }
.price-cta { margin-left: auto; }
@media (max-width: 719px) { .price-cta { margin-left: 0; } }

/* ── education chips ────────────────────────────────────────────────────── */
.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 820px;
  margin: 0 auto;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 7px 13px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--muted);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.chip:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  border-color: color-mix(in oklab, var(--accent) 45%, transparent);
  color: var(--text);
}
.chip:focus-visible { outline: none; border-color: var(--ring); box-shadow: var(--focus); }
.docs-more { margin-top: 22px; text-align: center; font-size: 13px; }
.docs-more a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.docs-more a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.docs-more .sep { margin: 0 10px; color: var(--faint); }

/* ── signup panel ───────────────────────────────────────────────────────── */
.signup {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--panel);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .signup { grid-template-columns: 5fr 6fr; } }
.signup-pitch { padding: 30px 26px; }
@media (min-width: 880px) {
  .signup-pitch { padding: 40px 38px; border-right: 1px solid var(--hairline); }
}
.signup-pitch h2 {
  margin: 12px 0 0;
  font-size: clamp(20px, 2.5vw, 25px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
}
.signup-pitch .lead { margin: 12px 0 0; font-size: var(--t-body); line-height: 1.65; color: var(--muted); }
.signup-points { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; }
.signup-points li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--text-2);
}
.signup-points .tick {
  flex: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--pos);
  transform: translateY(-1px);
}
.signup-form { padding: 26px 26px 30px; background: var(--panel); }
@media (min-width: 880px) { .signup-form { padding: 36px 38px; background: var(--panel-2); } }

.f-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 560px) { .f-grid { grid-template-columns: 1fr 1fr; } }
.f-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.f-field input[type="text"],
.f-field input[type="email"],
.f-field input[type="password"] {
  display: block;
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-md);
  background: var(--well);
  color: var(--text);
  font: 500 13.5px/1.3 var(--font-sans);
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease;
}
.f-field input:hover { background: var(--well-hover); }
.f-field input:focus-visible,
.f-field input:focus {
  border-color: var(--ring);
  box-shadow: var(--focus);
  background: var(--well);
}
.f-hint { margin-top: 5px; font-size: 10.5px; line-height: 1.45; color: var(--faint); }

.f-checks { margin-top: 18px; display: grid; gap: 12px; }
.f-check { display: flex; align-items: flex-start; gap: 10px; }
.f-check input[type="checkbox"] {
  flex: none;
  width: 15px; height: 15px;
  margin: 2px 0 0;
  accent-color: var(--primary-fill);
}
.f-check label { font-size: 12px; line-height: 1.55; color: var(--muted); }
.f-check label a { color: var(--text-2); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.f-check label a:hover { color: var(--text); }
.f-check .strong { color: var(--text-2); font-weight: 600; }

.f-submit { margin-top: 20px; width: 100%; }
.f-foot { margin-top: 14px; text-align: center; font-size: 12.5px; color: var(--muted); }
.f-foot a { color: var(--text-2); font-weight: 600; text-decoration: none; }
.f-foot a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }

/* invite / waitlist mode badges */
.mode-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  background: var(--well);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted);
}
.mode-badge .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--pos); }

/* ── footer ─────────────────────────────────────────────────────────────── */
.foot {
  margin-top: 26px;
  border-top: 1px solid var(--hairline);
  padding: 26px 0 34px;
}
.foot-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
@media (min-width: 640px) { .foot-in { flex-direction: row; } }
.foot-brand { display: flex; align-items: center; gap: 9px; color: var(--faint); font-size: 11.5px; }
.foot-brand img { width: 18px; height: 18px; border-radius: 4px; }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; font-size: 12px; }
.foot-links a { color: var(--muted); text-decoration: none; transition: color 120ms ease; }
.foot-links a:hover { color: var(--text); }

/* ── reveal motion (tasteful, gated) ────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .55s cubic-bezier(.22, .7, .3, 1) both; }
  .rise-2 { animation-delay: 70ms; }
  .rise-3 { animation-delay: 140ms; }
  .rise-4 { animation-delay: 210ms; }
  @keyframes rise {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
}
@media (prefers-reduced-motion: reduce) {
  .sg-track { transition: none; }
  .live-dot { animation: none; }
  .card::before, .flag::before { transition: none; }
  .card-fig svg { transition: none; }
  .flag-fig svg { transition: none; }
}

/* ── scroll-reveal (progressive enhancement) ────────────────────────────────
   .js-sr is added by the landing script ONLY when IntersectionObserver exists
   AND the user has no reduced-motion preference — so with JS off, in old
   browsers, or with reduced motion, everything below simply never applies. */
.js-sr .sr {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.22, .7, .3, 1),
              transform .6s cubic-bezier(.22, .7, .3, 1);
}
.js-sr .sr.sr-in { opacity: 1; transform: none; }
/* cards stagger in behind their section (per-card --i set inline) */
.js-sr .sr .card,
.js-sr .sr .flag {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .5s cubic-bezier(.22, .7, .3, 1),
              transform .5s cubic-bezier(.22, .7, .3, 1),
              background-color 140ms ease;
  transition-delay: calc(120ms + var(--i, 0) * 45ms), calc(120ms + var(--i, 0) * 45ms), 0ms;
}
.js-sr .sr.sr-in .card,
.js-sr .sr.sr-in .flag { opacity: 1; transform: none; }