/* ── 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. */
  --t-hero:  clamp(40px, 6.4vw, 62px);
  --t-h2:    clamp(24px, 3.2vw, 32px);
  --t-h3:    17px;
  --t-h4:    14px;
  --t-lead:  17px;
  --t-body:  14px;
  --t-small: 12.5px;
  --t-micro: 11px;
  --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. */
  --hero-pt: 40px;   /* hero space under the nav */
  --hero-pb: 40px;
  --sec-y:   40px;   /* 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. Still well below the old 104/72:
   the hero opens tighter under the nav and every section gives back 16px
   top and bottom. */
@media (min-width: 640px) {
  :root {
    --hero-pt: 60px;
    --hero-pb: 56px;
    --sec-y:   56px;
  }
}

@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 15px/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); }

.wrap { max-width: var(--wrap-max); margin: 0 auto; padding: 0 20px; }
@media (min-width: 640px) { .wrap { padding: 0 32px; } }

/* 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 13px/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: 42px; padding: 0 22px; font-size: 13.5px; }
.btn-sm { height: 30px; padding: 0 12px; font-size: 12px; }

/* ── 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(--s5) 0 0;
  font-size: var(--t-hero);
  font-weight: 750;
  letter-spacing: -0.031em;
  line-height: 1.03;
  color: var(--text);
  max-width: 15ch;
  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: var(--s5) 0 0;
  max-width: 58ch;
  font-size: var(--t-lead);
  line-height: 1.62;
  color: var(--muted);
  text-wrap: pretty;
}
.hero .cta-row {
  margin-top: var(--s6);
  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;
}
/* 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: var(--s4) var(--s3) var(--s2); }
.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: 10px 12px 11px; 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: 14px 16px 15px;
  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: 12.5px;
  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 sits tight under the hero — it is a continuation of it */
.sec.sec-tight { padding-top: 0; padding-bottom: var(--sec-y); }
.sec-head { max-width: 640px; margin: 0 auto var(--s6); 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: 10px 0 0;
  font-size: clamp(22px, 3.4vw, 30px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
  text-wrap: balance;
}
.sec-head p { margin: 10px 0 0; font-size: 14px; 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;
  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: 14px;
  font-weight: 700;
  letter-spacing: -0.008em;
  color: var(--text);
}
.card p {
  margin: 6px 0 0;
  font-size: 12.5px;
  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: 12.5px;
  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(22px, 3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.15;
  color: var(--text);
}
.signup-pitch .lead { margin: 12px 0 0; font-size: 14px; 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; }