/* ============================================================
   ITP6 — home page styles
   Tokens first (light), dark redefined under media + data-theme.
   ============================================================ */

:root {
  /* palette */
  --bg:        #F3F5F8;   /* cool slate off-white */
  --bg-alt:    #E9EDF2;
  --surface:   #FFFFFF;
  --surface-2: #F7F9FB;
  --ink:       #131A24;
  --ink-2:     #3A4655;
  --muted:     #64707F;
  --line:      #D8DEE6;
  --line-2:    #C6CED8;
  --accent:    #C4682A;   /* copper */
  --accent-2:  #A8541F;
  --accent-soft: #F6E7DB;
  --up:        #1F8A5B;
  --down:      #C93B3B;
  --up-soft:   #DFF3E8;
  --down-soft: #F9E1E1;
  --nav-bg:    rgba(243,245,248,0.82);
  --shadow:    0 1px 2px rgba(19,26,36,0.06), 0 8px 24px rgba(19,26,36,0.06);

  /* Accent for the About band, which inverts with the theme: the band is
     dark on the light theme, so it needs the LIGHT orange, and vice versa. */
  --accent-band: #E08A4A;

  /* Live badge chip. YouTube-style red; swap to #147A4E for the green
     version. This one token drives the chip, the halo and the sweep. */
  --live:      #E60000;

  /* pricing tiers */
  --tier-1:    #1F8A5B;
  --tier-2:    #2E6FD0;
  --tier-3:    #C4682A;
  --tier-4:    #7A4FC0;

  /* type */
  --f-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "IBM Plex Sans", "Segoe UI", Roboto, sans-serif;
  --f-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  --step--1: 0.875rem;
  --step-0:  1rem;
  --step-1:  1.125rem;
  --step-2:  1.375rem;
  --step-3:  1.75rem;
  --step-4:  2.25rem;
  --step-5:  clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);

  --wrap: 1180px;
  --radius: 10px;
  --radius-sm: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0E1219;
    --bg-alt:    #131924;
    --surface:   #161C27;
    --surface-2: #1C2330;
    --ink:       #E8ECF2;
    --ink-2:     #C3CBD6;
    --muted:     #8B96A6;
    --line:      #26303E;
    --line-2:    #33404F;
    --accent:    #E08A4A;
    --accent-2:  #F0A066;
    --accent-soft: #3A2716;
    --up:        #3FBF85;
    --down:      #E4605F;
    --up-soft:   #143126;
    --down-soft: #3A1B1B;
    --nav-bg:    rgba(14,18,25,0.82);
    --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
    --tier-1:    #3FBF85;
    --tier-2:    #6AA0F0;
    --tier-3:    #E08A4A;
    --tier-4:    #A98BE8;
  }
}
:root[data-theme="dark"] {
  --bg:        #0E1219;
  --bg-alt:    #131924;
  --surface:   #161C27;
  --surface-2: #1C2330;
  --ink:       #E8ECF2;
  --ink-2:     #C3CBD6;
  --muted:     #8B96A6;
  --line:      #26303E;
  --line-2:    #33404F;
  --accent:    #E08A4A;
  --accent-2:  #F0A066;
  --accent-soft: #3A2716;
  --up:        #3FBF85;
  --down:      #E4605F;
  --up-soft:   #143126;
  --down-soft: #3A1B1B;
  --nav-bg:    rgba(14,18,25,0.82);
  --shadow:    0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.35);
  --tier-1:    #3FBF85;
  --tier-2:    #6AA0F0;
  --tier-3:    #E08A4A;
  --tier-4:    #A98BE8;
  --accent-band: #8F4718;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; }

/* Section headings run in capitals and take the copper accent, matching the
   eyebrow above them. Caps need a little positive tracking to breathe, so the
   negative letter-spacing from the rule above is reversed here. */
h2,
.scale__intro h3,
.tiers-block__head h3 {
  text-transform: uppercase;
  letter-spacing: 0.012em;
  color: var(--accent);
}
/* the about band flips light and dark with the theme, so its heading keeps
   the band's own text colour rather than the accent */
.about h2 { color: inherit; }
p { margin: 0; }
a { color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
dl { margin: 0; }
dd { margin: 0; }
img, svg, canvas { display: block; max-width: 100%; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.wrap--narrow { max-width: 760px; }
.mono { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.up { color: var(--up); }
.down { color: var(--down); }
.fine { font-size: var(--step--1); color: var(--muted); max-width: 68ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}
.link { color: var(--accent); text-decoration: none; font-weight: 500; }
.link:hover { text-decoration: underline; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.1rem;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
  white-space: nowrap;
}
.btn--lg { padding: 0.85rem 1.4rem; font-size: var(--step-1); }
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { background: var(--accent-2); }
.btn--outline { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--outline:hover { border-color: var(--ink); }
.btn--ghost { color: var(--ink-2); background: transparent; }
.btn--ghost:hover { color: var(--accent); }
.btn--block { display: flex; width: 100%; }
.btn:active { transform: translateY(1px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__inner { display: flex; align-items: center; gap: 2rem; height: 64px; }
.brand {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--f-display); font-weight: 800; font-size: 1.2rem;
  text-decoration: none; letter-spacing: 0.02em;
}
.brand__mark { width: 26px; height: 26px; color: var(--accent); }
.nav__links { display: flex; gap: 1.5rem; margin-left: auto; }
.nav__links a { text-decoration: none; color: var(--ink-2); font-size: 0.95rem; transition: color 0.15s; }
/* hover takes the primary button's colour, the same as the footer links do */
.nav__links a:hover { color: var(--accent); }
.nav__actions { display: flex; gap: 0.5rem; }
.nav__burger {
  display: none; margin-left: auto;
  width: 40px; height: 40px; border: 0; background: transparent;
  flex-direction: column; justify-content: center; gap: 6px; align-items: center;
}
.nav__burger span { width: 20px; height: 2px; background: var(--ink); }

/* ---------- intro reel: the whole first screen ----------
   The film is 1536×866, and only rows 147–623 of it are usable: above
   them sit its old title lines (with a typo), below them the old stats
   row and logo. That 476-row band is placed in the middle of a frame the
   height of the viewport, scaled as large as it can go while the centre
   word stays whole — the word spans 17–83% of the film's width, so up to
   a third can be cropped off the sides — and the dark teal of the film
   fills the rest of the frame above and below. The title sits under the
   nav, the figures and the ITP6 mark along the bottom, and a glowing
   accent line closes the frame. The nav is pulled over the top and goes
   transparent while the page is at the top (see .nav.is-over). */
.reel { margin-top: -64px; }             /* under the 64px nav */
.reel__frame {
  position: relative;
  height: 100vh; height: 100svh; min-height: 620px;
  /* height the band may take: the viewport less room for title and bar,
     but never so tall that the crop would eat into the centre word */
  --band-h: min(calc(100svh - 64px - 230px), 46vw);
  background: #071722;                   /* the film's own dark teal */
  color: #E8ECF2;                        /* everything on the film is light, whatever the theme */
}
.reel__screen { position: absolute; inset: 0; overflow: hidden; }
/* The clip box. The film is scaled to a width Wv = max(100vw, 3.227 ×
   --band-h); the band is 476/1536 = 31% of that, so the box is exactly
   band-high, and the film inside it is pulled up by the 147 rows above
   the band (147/866 = 16.97% of the film's own height). Nothing above or
   below those rows can show, whatever the frame's height. */
.reel__band {
  position: absolute; left: 0; right: 0; top: 64px;   /* the film starts right under the nav */
  height: max(31vw, var(--band-h));
  overflow: hidden;
}
.reel__video {
  position: absolute; left: 50%; top: 0;
  width: max(100vw, calc(var(--band-h) * 3.227));
  height: auto; aspect-ratio: 1536 / 866;
  transform: translate(-50%, -16.97%);
}
/* a light shade under the nav, and the band's foot dissolving into the
   frame's dark fill where the figures sit */
.reel__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 23, 34, 0.6) 0%, rgba(7, 23, 34, 0) 16%),
    linear-gradient(0deg,   #071722 0%, rgba(7, 23, 34, 0) 26%);
}
.reel__bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: clamp(1.5rem, 4vh, 3rem);
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem 2.5rem;
}
.reel__stats { display: flex; gap: clamp(1.25rem, 4vw, 4rem); }
.reel__stats div { display: grid; gap: 0.3rem; }
.reel__stats dd {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: -0.02em; line-height: 1; display: flex; align-items: center; gap: 0.6rem;
}
.reel__stats dt { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #B9C6D1; }
.reel__stats .dot { box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.25); }
/* the live figure carries a dot before the word, so its label is indented
   past the dot and gap to start under the L, not under the dot */
.reel__stat--live dt { padding-left: calc(8px + 0.6rem); }

/* the ITP6 mark the film used to carry in its corner, rebuilt in type so
   it can glow in the site's own accent rather than the film's cyan */
.reel__logo {
  display: grid; justify-items: end; line-height: 0.85; text-align: right;
  user-select: none;
}
.reel__logo-itp {
  font-family: var(--f-mono); font-weight: 500; font-size: clamp(1.4rem, 2.6vw, 2.4rem);
  letter-spacing: 0.22em; margin-right: -0.22em; color: #F0A066;
  text-shadow: 0 0 6px rgba(240, 160, 102, 0.9), 0 0 18px rgba(224, 138, 74, 0.7), 0 0 42px rgba(224, 138, 74, 0.45);
}
.reel__logo-6 {
  font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 8vw, 7rem);
  letter-spacing: -0.04em; color: #FFFFFF; margin-top: 0.05em;
  text-shadow: 0 0 6px rgba(255, 255, 255, 0.85), 0 0 22px rgba(255, 255, 255, 0.5), 0 0 60px rgba(240, 160, 102, 0.35);
}
/* the glowing line that closes the frame and opens the page under it */
.reel__frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, rgba(240, 160, 102, 0) 0%, #F0A066 12%, #FFD3A6 50%, #F0A066 88%, rgba(240, 160, 102, 0) 100%);
  box-shadow: 0 0 10px 1px rgba(240, 160, 102, 0.75), 0 0 28px 4px rgba(224, 138, 74, 0.45), 0 0 70px 10px rgba(224, 138, 74, 0.2);
}

/* the nav over the film: transparent and light while the page is at the
   top, its normal self as soon as the visitor scrolls (js/main.js toggles
   the class). An open mobile menu always gets the solid background. */
.nav { transition: background 0.25s ease, border-color 0.25s ease; }
.nav.is-over:not(.is-open) {
  background: linear-gradient(180deg, rgba(7, 23, 34, 0.55), rgba(7, 23, 34, 0));
  border-bottom-color: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.nav.is-over:not(.is-open) .brand,
.nav.is-over:not(.is-open) .nav__links a { color: #E8ECF2; }
.nav.is-over:not(.is-open) .nav__links a:hover { color: #F0A066; }
.nav.is-over:not(.is-open) .brand__mark { color: #F0A066; }
.nav.is-over:not(.is-open) .btn--ghost { color: #E8ECF2; }
.nav.is-over:not(.is-open) .nav__burger span { background: #E8ECF2; }

/* ---------- hero ---------- */
.hero { padding: clamp(3rem, 6vw, 6rem) 0 clamp(2rem, 4vw, 4rem); }
.reel + .hero { padding-top: clamp(2.5rem, 5vw, 4.5rem); }   /* the film already opens the page */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.hero__title {
  font-size: var(--step-5);
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variation-settings: "opsz" 96;
}
.hero__lede { font-size: var(--step-1); color: var(--ink-2); max-width: 48ch; margin-top: 1.5rem; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero__fine { font-size: var(--step--1); color: var(--muted); margin-top: 1rem; }
.hero__fine a { color: var(--accent); }

/* copy stream panel */
.stream {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1rem 1.25rem 1.1rem;
  font-size: 0.9rem;
}
.stream__head {
  display: flex; align-items: center; gap: 0.5rem;
  font-weight: 500; padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
}
.stream__clock { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up); flex: none; }
.dot--live { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--up) 45%, transparent); } 60% { box-shadow: 0 0 0 6px transparent; } }

.stream__master { padding: 1rem 0 0.25rem; }
.stream__label {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem;
}
.stream__trade {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.9rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.9rem;
}
.stream__trade.is-new { animation: flash 0.6s ease-out; }
@keyframes flash { 0% { border-color: var(--accent); background: var(--accent-soft); } 100% { } }
.stream__pair { font-weight: 600; }
.stream__tag { margin-left: auto; font-size: 0.72rem; color: var(--muted); }
.side {
  font-size: 0.75rem; font-weight: 500; padding: 0.1rem 0.45rem; border-radius: 4px;
}
.side--buy { background: var(--up-soft); color: var(--up); }
.side--sell { background: var(--down-soft); color: var(--down); }

.stream__fan { color: var(--line-2); height: 44px; }
.stream__fan svg { width: 100%; height: 100%; }

.stream__followers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; }
.follower {
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.7rem;
  display: grid; gap: 0.15rem;
  font-size: 0.78rem;
  min-width: 0;
}
.follower__acct { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.follower__lots { font-weight: 500; }
.follower__status { color: var(--up); font-weight: 500; }
.follower.is-pending .follower__status { color: var(--muted); }
.follower.is-pending .follower__lat { visibility: hidden; }
.follower.is-filled { border-color: color-mix(in srgb, var(--up) 45%, var(--line)); }
.follower__lat { color: var(--muted); }

.stream__foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem;
  margin-top: 1rem; padding-top: 0.75rem;
  border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted);
}

/* ---------- stats ---------- */
.stats { border-block: 1px solid var(--line); background: var(--surface); }
.stats__row { display: grid; grid-template-columns: repeat(4, 1fr); }
.stat { padding: 1.5rem 1.5rem 1.25rem 0; display: grid; gap: 0.15rem; }
.stat + .stat { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.stat__num { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.02em; }
.stat__lbl { font-size: var(--step--1); color: var(--muted); }
.stats__note {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  padding: 0 0 1.1rem; font-size: 0.8rem; color: var(--muted);
  font-family: var(--f-mono);
}
.stats__note a { color: var(--accent); text-decoration: none; }
.stats__note a:hover { text-decoration: underline; }

/* ---------- sections ---------- */
.section { padding: clamp(3.5rem, 7vw, 6.5rem) 0; }
.section--alt { background: var(--bg-alt); }
.section__head { margin-bottom: clamp(2rem, 4vw, 3.5rem); max-width: 60ch; }
.section__head--split {
  max-width: none;
  display: flex; align-items: end; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
}
.section__aside { max-width: 40ch; color: var(--ink-2); font-size: 0.95rem; }

/* ---------- results ---------- */
.results {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.25rem 1.5rem 1.1rem;
}
.results__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.rs {
  padding: 1.1rem 1rem 1.1rem 0;
  border-bottom: 1px solid var(--line);
  display: grid; gap: 0.15rem;
}
.rs:nth-child(4n+2), .rs:nth-child(4n+3), .rs:nth-child(4n+4) { border-left: 1px solid var(--line); padding-left: 1rem; }
.rs:nth-last-child(-n+4) { border-bottom: 0; }
.rs dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.rs dd { font-size: 1.35rem; font-weight: 500; letter-spacing: -0.01em; }
.results__meta {
  margin-top: 0.5rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: 0.75rem; color: var(--muted); line-height: 1.8;
}
.results__meta strong { font-weight: 500; color: var(--ink-2); }

/* ---------- growth chart ---------- */
.chart {
  margin: 0 0 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.1rem 1.5rem 1rem;
}
.chart__head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--line);
}
.chart__title { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); }
.chart__sub { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; }
.chart__now { text-align: right; display: grid; }
.chart__now-num { font-size: var(--step-3); font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }
.chart__now-lbl { font-size: 0.75rem; color: var(--muted); }
.chart__body { height: 300px; padding-top: 0.75rem; position: relative; }
.chart__body canvas { width: 100%; height: 100%; }
/* the live endpoint of the growth line. The canvas hands it over once the
   intro sweep arrives; it then blinks and haloes like the LIVE chip. */
.chart__pulse {
  position: absolute; width: 9px; height: 9px; margin: 0;
  border-radius: 50%; background: var(--up);
  transform: translate(-50%, -50%); pointer-events: none;
  animation: blink 1.3s ease-in-out infinite;
}
.chart__pulse::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  animation: pulse 1.6s ease-in-out infinite;
}
.chart__foot {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: center;
  margin-top: 0.5rem; padding-top: 0.75rem; border-top: 1px solid var(--line);
  font-size: 0.78rem; color: var(--muted);
}
.chart__foot a { margin-left: auto; color: var(--accent); text-decoration: none; }
.chart__foot a:hover { text-decoration: underline; }
.chart__key { display: inline-block; width: 14px; height: 0; margin-right: 0.45rem; vertical-align: middle; }
.chart__key--line { border-top: 2px solid var(--up); }
.chart__key--dd { border-top: 2px dashed var(--down); }
.chart__title { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.chart__brand {
  font-family: var(--f-display); font-weight: 800; font-size: 1.6rem;
  letter-spacing: -0.02em; color: var(--accent);
  font-variation-settings: "opsz" 96;
}
/* letters alternate copper and the theme's strongest text colour, which is
   white on the dark theme and near-black on the light one. Pure white would
   disappear against the light card, so it follows --ink instead. */
.chart__brand i { font-style: normal; color: var(--accent); }
.chart__brand i:nth-child(even) { color: var(--ink); }
/* live badge: broadcast-style two-tone pill with a breathing halo
   and a light that sweeps across it every few seconds */
.badge-real {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: stretch;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--live) 40%, var(--line));
  font-family: var(--f-mono); font-size: 0.76rem; font-weight: 600;
  text-transform: uppercase; line-height: 1;
  animation: badge-halo 2.8s ease-out infinite;
}
.badge-real__live {
  display: inline-flex; align-items: center; gap: 0.45rem;
  background: var(--live); color: #fff;
  letter-spacing: 0.18em;
  padding: 0.5rem 0.8rem 0.5rem 0.7rem;
  border-radius: 999px 0 0 999px;
}
.badge-real__txt {
  display: inline-flex; align-items: center;
  color: var(--ink-2);
  letter-spacing: 0.1em;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
}
.badge-real .dot { background: #fff; width: 9px; height: 9px; box-shadow: none; }
.badge-real .dot--live { animation: blink 1.3s ease-in-out infinite; }
.badge-real::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg,
    transparent 38%,
    color-mix(in srgb, var(--live) 22%, transparent) 50%,
    transparent 62%);
  transform: translateX(-130%);
  animation: badge-sweep 4.5s ease-in-out infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@keyframes badge-halo {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--live) 45%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@keyframes badge-sweep {
  0%, 55% { transform: translateX(-130%); }
  100%    { transform: translateX(130%); }
}
.chart--hero .chart__now-num { color: var(--up); }
.chart__stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 0.5rem; border-top: 1px solid var(--line);
}
.chart__stats div { padding: 0.75rem 0.75rem 0.6rem 0; display: grid; gap: 0.05rem; }
.chart__stats div + div { border-left: 1px solid var(--line); padding-left: 0.75rem; }
.chart__stats dt { font-size: 0.68rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.chart__stats dd { font-size: 1.15rem; font-weight: 500; }
.chart--hero { margin: 0; padding: 1rem 1.25rem 0.9rem; scroll-margin-top: 84px; }
[id] { scroll-margin-top: 72px; }
.chart--hero .chart__body { height: 230px; }
.chart--hero .chart__now-num { font-size: var(--step-4); }

/* stream placed under the steps */
.how__stream { max-width: 820px; margin: clamp(2.5rem, 5vw, 4rem) auto 0; display: grid; gap: 1rem; }
.how__stream-cap { color: var(--ink-2); max-width: 60ch; }

/* ---------- scale calculator ---------- */
.scale {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
  align-items: start;
}
.scale__intro { display: grid; gap: 1rem; }
.scale__intro h3 { font-size: var(--step-3); font-weight: 700; }
.scale__intro p { color: var(--ink-2); max-width: 52ch; }
.scale__intro .eyebrow { margin-bottom: 0; }
.scale__calc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.25rem 1.5rem 1.25rem;
  display: grid; gap: 1rem;
}
.scale__title { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); }
.scale__pick { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip {
  font-family: var(--f-mono); font-size: 0.85rem;
  padding: 0.45rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent; color: var(--ink-2);
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.scale__custom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 0.85rem; color: var(--muted); }
.scale__input {
  display: inline-flex; align-items: center; gap: 0.25rem;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem; color: var(--ink); background: var(--surface-2);
}
.scale__input input {
  width: 7.5em; border: 0; background: transparent; color: inherit; font: inherit;
  font-family: var(--f-mono); padding: 0.1rem 0;
}
.scale__input input:focus { outline: none; }
.scale__input:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.scale__out { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.scale__out div { padding: 0.85rem 0.75rem 0.85rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.1rem; }
.scale__out div:nth-child(even) { border-left: 1px solid var(--line); padding-left: 0.75rem; }
.scale__out div:first-child { grid-column: 1 / -1; border-left: 0; padding-left: 0; }
.scale__out div:first-child dd { font-size: 2.25rem; }
/* with three cells the first spans the row, so the divider belongs on the third */
.scale__out div:nth-child(2) { border-left: 0; padding-left: 0; }
.scale__out div:nth-child(3) { border-left: 1px solid var(--line); padding-left: 0.75rem; }
.scale__out div:last-child dd { color: var(--up); }
.scale--solo { margin-top: 0; }
.scale__out dt { font-size: 0.72rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.scale__out dd { font-size: 1.25rem; font-weight: 500; }
.scale__note { font-size: 0.85rem; color: var(--ink-2); }
.scale__note strong { font-family: var(--f-mono); font-weight: 500; color: var(--ink); }
.scale__note--free {
  padding: 0.7rem 0.9rem; border-radius: var(--radius-sm);
  background: var(--up-soft); border: 1px solid color-mix(in srgb, var(--up) 30%, transparent);
}
.scale__note--free span { font-family: var(--f-mono); color: var(--up); font-weight: 500; }

/* ---------- pricing ---------- */
.pricing { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.price-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
.price-tile {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.1rem 1.1rem 1rem; display: grid; gap: 0.3rem; align-content: start;
}
.price-tile--main { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.price-tile__num { font-size: var(--step-4); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.price-tile--main .price-tile__num { color: var(--accent); }
.price-tile--free .price-tile__num { color: var(--up); }
.price-tile__lbl { font-size: 0.85rem; color: var(--ink-2); }
.terms { display: grid; gap: 0.9rem; margin-top: 1.75rem; border-top: 1px solid var(--line-2); padding-top: 1.5rem; }
.terms li { color: var(--ink-2); padding-left: 1.6rem; position: relative; max-width: 62ch; }
.terms li strong { color: var(--ink); font-weight: 600; }
.terms li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.8rem; height: 0.45rem;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.price-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.25rem 1.5rem 1.25rem; display: grid; gap: 0.9rem;
}
.price-card__title { font-family: var(--f-display); font-weight: 600; font-size: var(--step-1); }
.price-card__sub { font-size: 0.8rem; color: var(--muted); margin-top: -0.6rem; }
/* the balance picker, repeated inside the card so pricing is self-contained */
.price-card .scale__pick { gap: 0.4rem; }
.price-card .chip { font-size: 0.8rem; padding: 0.38rem 0.72rem; }
.price-card .scale__custom { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.price-card__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.price-card__table td { padding: 0.55rem 0; border-bottom: 1px solid var(--line); }
.price-card__table td:last-child { text-align: right; }
.price-card__table td:first-child { color: var(--ink-2); font-family: var(--f-body); }
.price-card__total td { border-bottom: 0; padding-top: 0.9rem; font-size: 1.25rem; font-weight: 500; }
.price-card__total td:first-child { color: var(--ink); }
.price-card__table--loss { border-top: 1px dashed var(--line-2); }
.price-card__table--loss td { color: var(--muted); }
.price-card__table--loss td:last-child { color: var(--ink-2); }

/* ---------- tier tables: return, fee and take-home by account size ---------- */
/* the tiers lead the pricing section; the fee terms and calculator follow */
.tiers-block { margin-bottom: clamp(3rem, 6vw, 5rem); }
.tiers-block__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem; flex-wrap: wrap;
  padding-bottom: 1.1rem; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--line-2);
}
.tiers-block__head h3 { font-size: var(--step-3); }
.tiers-block__head p { color: var(--ink-2); font-size: 0.95rem; max-width: 58ch; margin-top: 0.5rem; }
.tiers-block__legend {
  display: flex; gap: 0.4rem; flex-wrap: wrap;
  font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase;
  margin-top: 0 !important; max-width: none !important;
}
.tiers-block__legend span {
  border: 1px solid var(--line-2); border-radius: 999px;
  padding: 0.3rem 0.7rem; color: var(--muted); white-space: nowrap;
}
.tiers-block__legend span:first-child { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, var(--line-2)); }
.tiers-block__legend span:last-child { color: var(--up); border-color: color-mix(in srgb, var(--up) 45%, var(--line-2)); }

.tiers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.tier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--tier, var(--accent));
  border-radius: var(--radius);
  overflow: hidden;
}
.tier--1 { --tier: var(--tier-1); }
.tier--2 { --tier: var(--tier-2); }
.tier--3 { --tier: var(--tier-3); }
.tier--4 { --tier: var(--tier-4); }
.tier__head {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}
.tier__head h4 {
  font-family: var(--f-display); font-weight: 700; font-size: var(--step-1);
  letter-spacing: -0.01em; color: var(--tier, var(--accent));
}
.tier__head p { font-size: 0.8rem; color: var(--muted); }
.tier__scroll { overflow-x: auto; }
.tier__table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tier__table th {
  font-family: var(--f-mono); font-weight: 500; font-size: 0.66rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted);
  text-align: right; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.tier__table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
.tier__table th:first-child, .tier__table td:first-child { text-align: left; padding-left: 1.1rem; color: var(--ink-2); }
.tier__table th:last-child, .tier__table td:last-child { padding-right: 1.1rem; }
.tier__table td:last-child { font-weight: 500; }
.tier__table tbody tr:last-child td { border-bottom: 0; }
.tier__table tbody tr:hover td { background: var(--surface-2); }

.tiers-block__note {
  margin-top: 1.25rem; padding: 0.9rem 1.1rem;
  background: var(--up-soft); border: 1px solid color-mix(in srgb, var(--up) 35%, transparent);
  border-radius: var(--radius-sm);
  color: var(--ink-2); font-size: 0.9rem; max-width: 78ch;
}
.tiers-block__note strong { color: var(--up); font-weight: 600; }
.tiers-block .fine { margin-top: 0.9rem; }

/* ---------- steps: a real sequence, so numbered ---------- */
.steps {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
  border-top: 1px solid var(--line-2);
}
.step { padding: 1.75rem 1.5rem 0 0; display: grid; gap: 0.6rem; align-content: start; }
.step + .step { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.step__n { color: var(--accent); font-size: 0.8rem; }
.step h3 { font-size: var(--step-1); }
.step p { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- the same steps, drawn as a flow diagram ----------
   Cards in a row, joined by a line and an arrowhead sitting in the grid
   gap. The connector is dropped from the last card, and rotated to point
   downwards once the row stacks into a column. */
.flow__cap { color: var(--ink-2); max-width: 62ch; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.steps--flow { grid-template-columns: repeat(5, 1fr); gap: 2rem; border-top: 0; }
.steps--flow .step,
.steps--flow .step + .step {
  padding: 1.15rem 1.15rem 1.3rem; gap: 0.5rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  position: relative;
}
.steps--flow .step::after {
  content: ""; position: absolute; top: 50%; left: 100%;
  width: 2rem; height: 1px; background: var(--line-2);
}
.steps--flow .step::before {
  content: ""; position: absolute; top: 50%; left: calc(100% + 2rem - 7px);
  width: 6px; height: 6px;
  border-top: 1px solid var(--line-2); border-right: 1px solid var(--line-2);
  transform: translateY(-50%) rotate(45deg);
}
.steps--flow .step:last-child::after,
.steps--flow .step:last-child::before { content: none; }

/* the wire is the connector filling in as the flow runs, drawn over the
   grey track; JS adds .is-active / .is-done to the cards in sequence */
.steps--flow .step__wire {
  position: absolute; top: 50%; left: 100%;
  width: 2rem; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.steps--flow .step:last-child .step__wire { display: none; }
.steps--flow .step.is-done .step__wire,
.steps--flow .step.is-active .step__wire { transform: scaleX(1); }
.steps--flow .step {
  transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
}
.steps--flow .step.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
  transform: translateY(-3px);
}
.steps--flow .step.is-active .step__n { color: var(--accent-2); }
.steps--flow .step .step__n::before {
  content: ""; display: inline-block; width: 6px; height: 6px;
  border-radius: 50%; background: var(--line-2);
  margin-right: 0.45rem; vertical-align: 0.08em;
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.steps--flow .step.is-done .step__n::before { background: var(--accent); }
.steps--flow .step.is-active .step__n::before {
  background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
}
.steps--flow .step h3 { font-size: var(--step-0); }
.steps--flow .step p { font-size: 0.9rem; }
.steps--flow .link { font-size: 0.85rem; }

.step__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.step__who {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
  border: 1px solid currentColor; border-radius: 999px;
  padding: 0.15rem 0.45rem; white-space: nowrap;
}
.step__who--itp { color: var(--accent); }
.step__who--auto { color: var(--up); }

/* ---------- broker: referral link + QR ---------- */
.link--quiet { color: var(--muted); font-weight: 400; font-size: 0.9rem; }
.link--quiet:hover { color: var(--accent); }
.broker {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.broker__copy { display: grid; gap: 1.25rem; }
.broker__copy .eyebrow { margin-bottom: -0.5rem; }
.broker__copy > p { color: var(--ink-2); max-width: 56ch; }
.broker__copy .fine { margin-top: -0.25rem; }
.broker__copy .fine strong { color: var(--ink); font-weight: 500; }
.checks--ink { margin-top: 0; }
.checks--ink li { color: var(--ink-2); }
.checks--ink li::before { border-color: var(--accent); }
.broker__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.25rem; }

.reflink { display: grid; gap: 0.4rem; max-width: 560px; }
.reflink__lbl {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--muted);
}
.reflink__row {
  display: flex; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  overflow: hidden;
}
.reflink__row:focus-within { outline: 2px solid var(--accent); outline-offset: 1px; }
.reflink__url {
  flex: 1; min-width: 0; display: flex; align-items: center;
  padding: 0.6rem 0.9rem; font-size: 0.92rem; color: var(--ink);
  text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reflink__url:hover { color: var(--accent); }
.reflink__url strong { font-weight: 600; color: var(--accent); }
.reflink__copy {
  border: 0; border-left: 1px solid var(--line-2); border-radius: 0;
  padding: 0.6rem 1rem; background: var(--surface-2); min-width: 7.5rem;
}
.reflink__copy:hover { background: var(--accent-soft); border-color: var(--line-2); color: var(--accent-2); }
.reflink__copy.is-done { color: var(--up); background: var(--up-soft); }

.qr { margin: 0; display: grid; gap: 0.75rem; justify-items: center; text-align: center; }
.qr__card {
  display: grid; gap: 0.5rem; justify-items: center;
  background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 0.9rem 0.9rem 0.75rem;
  width: min(100%, 268px);
}
.qr__img { width: 100%; height: auto; aspect-ratio: 1; }
.qr__code {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: #64707F;
}
.qr__cap { font-size: 0.85rem; color: var(--ink-2); max-width: 24ch; }
.qr__save { display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; color: var(--muted); }
.qr__save .link { background: none; border: 0; padding: 0; cursor: pointer; font-size: inherit; font-family: inherit; }

/* ---------- algorithm ---------- */
.algo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.algo__intro { display: grid; gap: 1rem; position: sticky; top: 96px; }
.algo__intro .eyebrow { margin-bottom: 0; }
.algo__intro p { color: var(--ink-2); max-width: 40ch; }
.algo__facts { border-top: 1px solid var(--line-2); }
.algo__facts div {
  display: grid; grid-template-columns: 9rem 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.algo__facts dt { font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-top: 0.2rem; }
.algo__facts dd { color: var(--ink); }
.algo__facts dd span { font-family: var(--f-mono); font-size: 0.95em; }

/* ---------- risk controls ---------- */
.risk__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 5rem); }
.risk__intro { display: grid; gap: 1rem; align-content: start; position: sticky; top: 96px; }
.risk__intro p { color: var(--ink-2); max-width: 40ch; }
.risk__intro .eyebrow { margin-bottom: 0; }
.controls { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line-2); }
.controls li { padding: 1.4rem 1.5rem 1.4rem 0; border-bottom: 1px solid var(--line); display: grid; gap: 0.4rem; }
.controls li:nth-child(even) { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.controls h3 { font-size: var(--step-1); }
.controls p { color: var(--ink-2); font-size: 0.95rem; }

/* ---------- about (dark band) ---------- */
.about { background: var(--ink); color: var(--bg); }
.about .eyebrow { color: var(--accent-band); }
.about__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about__grid > div > p { color: color-mix(in srgb, var(--bg) 78%, transparent); max-width: 52ch; margin-top: 1rem; }
.about .btn--outline { color: var(--bg); border-color: color-mix(in srgb, var(--bg) 35%, transparent); margin-top: 2rem; }
.about .btn--outline:hover { border-color: var(--bg); }
.checks { display: grid; gap: 0.7rem; margin-top: 1.5rem; }
.checks li { padding-left: 1.6rem; position: relative; }
.checks li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 0.8rem; height: 0.45rem;
  border-left: 2px solid var(--accent-band); border-bottom: 2px solid var(--accent-band);
  transform: rotate(-45deg);
}
.payout {
  background: color-mix(in srgb, var(--bg) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--bg) 18%, transparent);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
}
.payout__title { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in srgb, var(--bg) 60%, transparent); margin-bottom: 0.75rem; }
.payout__table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.payout__table td { padding: 0.55rem 0; border-bottom: 1px solid color-mix(in srgb, var(--bg) 14%, transparent); }
.payout__table td:last-child { text-align: right; }
.payout__table td:first-child { color: color-mix(in srgb, var(--bg) 70%, transparent); font-family: var(--f-body); }
.payout__total td { border-bottom: 0; padding-top: 0.9rem; font-size: 1.2rem; font-weight: 500; }
.payout__total td:first-child { color: var(--bg); }
.payout__total a { text-decoration: none; }
.payout__total a:hover { text-decoration: underline; }
.payout .fine { margin-top: 0.9rem; color: color-mix(in srgb, var(--bg) 55%, transparent); }
.about .accent { color: var(--accent-band); }

/* ---------- faq ---------- */
.faq { border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0;
  font-family: var(--f-display); font-weight: 600; font-size: var(--step-1);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0.25rem; top: 50%; transform: translateY(-50%);
  font-family: var(--f-mono); color: var(--accent); font-size: 1.2rem;
}
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 0 1.25rem; color: var(--ink-2); max-width: 65ch; }

/* ---------- cta ---------- */
.cta { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.cta__inner { text-align: center; display: grid; gap: 1.5rem; justify-items: center; }
.cta h2 { max-width: 26ch; font-size: var(--step-4); }
.cta__form { display: flex; gap: 0.6rem; width: min(560px, 100%); }
.cta__form input {
  flex: 1; min-width: 0;
  padding: 0.85rem 1rem; font: inherit;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
}
.cta__form input::placeholder { color: var(--muted); }
.cta__form input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.cta .hero__fine { margin-top: 0; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--surface); padding: 3rem 0 2rem; font-size: 0.9rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; }
.footer__brand p { color: var(--muted); margin-top: 0.75rem; }
.footer__brand a:not(.brand) { color: var(--ink-2); text-decoration: none; }
.footer__brand a:not(.brand):hover { color: var(--accent); }
.footer nav { display: grid; gap: 0.5rem; align-content: start; }
.footer nav a { text-decoration: none; color: var(--ink-2); }
.footer nav a:hover { color: var(--accent); }
.footer h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-family: var(--f-mono); font-weight: 500; margin-bottom: 0.4rem; }
.footer__legal { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); display: grid; gap: 0.75rem; color: var(--muted); font-size: 0.8rem; max-width: 90ch; }

/* ---------- justified prose ----------
   Justification only touches lines before the last one, so single-line
   labels and short captions are unaffected. Hyphenation is switched on
   so the narrower columns close up instead of opening rivers of space;
   it needs the lang attribute on <html>, which the page sets. */
.hero__lede,
.section__aside,
.how__stream-cap,
.step p,
.scale__intro p,
.scale__note,
.broker__copy > p,
.terms li,
.tiers-block__head > div > p,
.tiers-block__note,
.algo__intro p,
.risk__intro p,
.controls p,
.about__grid > div > p,
.faq details p,
.footer__legal p,
.fine {
  text-align: justify;
  text-justify: inter-word;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 7 4 3;
}

/* ---------- responsive ---------- */
/* seven primary links plus two buttons get tight before the burger kicks in */
@media (max-width: 1120px) {
  .nav__inner { gap: 1.25rem; }
  .nav__links { gap: 1rem; }
  .nav__links a { font-size: 0.88rem; }
}
@media (max-width: 1000px) {
  .steps { grid-template-columns: repeat(2, 1fr); }
  .step:nth-child(3) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 1.5rem; }
  .stats__row { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(3) { border-left: 0; padding-left: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
  .results__grid { grid-template-columns: repeat(2, 1fr); }
  .rs { border-left: 0 !important; padding-left: 0 !important; border-bottom: 1px solid var(--line) !important; }
  .rs:nth-child(even) { border-left: 1px solid var(--line) !important; padding-left: 1rem !important; }
  .rs:nth-last-child(-n+2) { border-bottom: 0 !important; }
  .scale { grid-template-columns: 1fr; }
  .pricing { grid-template-columns: 1fr; }
  .broker { grid-template-columns: 1fr; }
  .qr { justify-items: start; text-align: left; }
  .tiers { grid-template-columns: 1fr; }
  .risk__grid, .algo__grid { grid-template-columns: 1fr; }
  .risk__intro, .algo__intro { position: static; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 820px) {
  .hero__grid { grid-template-columns: 1fr; }
  .about__grid { grid-template-columns: 1fr; }
  .nav__links, .nav__actions { display: none; }
  .nav__burger { display: flex; }
  .nav.is-open .nav__links, .nav.is-open .nav__actions {
    display: flex; flex-direction: column; align-items: stretch; gap: 0.25rem;
  }
  .nav.is-open .nav__inner { flex-wrap: wrap; height: auto; padding: 0.75rem 0 1rem; }
  .nav.is-open .nav__links { width: 100%; margin: 0; order: 3; }
  .nav.is-open .nav__links a { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .nav.is-open .nav__actions { width: 100%; order: 4; margin-top: 0.75rem; flex-direction: row; }
  .nav.is-open .nav__actions .btn { flex: 1; }
}
@media (max-width: 560px) {
  .steps, .controls { grid-template-columns: 1fr; }
  .step + .step, .controls li:nth-child(even) { border-left: 0; padding-left: 0; }
  .step:nth-child(n+2) { border-top: 1px solid var(--line); margin-top: 1.25rem; }
  .stream__followers { grid-template-columns: repeat(2, 1fr); }
  .stream__fan { display: none; }
  .stream__followers { margin-top: 0.75rem; }
  .stream__tag { margin-left: 0; }
  .algo__facts div { grid-template-columns: 1fr; gap: 0.25rem; }
  .badge-real { font-size: 0.68rem; }
  .badge-real__live { padding: 0.45rem 0.65rem 0.45rem 0.6rem; letter-spacing: 0.14em; }
  .badge-real__txt { padding: 0.45rem 0.7rem 0.45rem 0.6rem; letter-spacing: 0.07em; }
  .chart__body, .chart--hero .chart__body { height: 200px; }
  .chart__now { text-align: left; }
  .chart__foot a { margin-left: 0; }
  .chart__stats { grid-template-columns: 1fr 1fr; }
  .chart__stats div:nth-child(3) { border-left: 0; padding-left: 0; }
  .chart__stats div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .scale__custom { flex-direction: column; align-items: flex-start; gap: 0.4rem; }
  .price-tiles { grid-template-columns: 1fr; }
  .scale__out { grid-template-columns: 1fr; }
  .scale__out div:nth-child(3) { border-left: 0; padding-left: 0; }
  .tier__table { font-size: 0.8rem; }
  .broker__actions .btn { flex: 1; }
  .reflink__row { flex-direction: column; }
  .reflink__copy { border-left: 0; border-top: 1px solid var(--line-2); }
  .cta__form { flex-direction: column; }
  .footer__grid { grid-template-columns: 1fr; }
  .stats__row { grid-template-columns: 1fr; }
  .stat + .stat { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* The reel on narrower screens: a shorter frame, the band allowed a
   larger share of it, the mark smaller, and the figures in one row. */
@media (max-width: 820px) {
  .reel__frame { min-height: 0; height: max(560px, 82svh); --band-h: min(calc(82svh - 260px), 46vw); }
}
@media (max-width: 560px) {
  .reel__frame { height: max(520px, 78svh); --band-h: min(calc(78svh - 240px), 46vw); }
  .reel__bar { flex-direction: column; align-items: stretch; gap: 1rem; bottom: 1.25rem; }
  .reel__stats { justify-content: space-between; gap: 0.75rem; }
  .reel__stats dd { font-size: 1.3rem; }
  .reel__stats dt { font-size: 0.6rem; letter-spacing: 0.06em; }
  .reel__logo-itp { font-size: 1.1rem; }
  .reel__logo-6 { font-size: 3rem; }
}

/* Five cards in a row need real width, so the flow diagram turns into a
   single column earlier than the other grids — and its connectors, wires
   and arrowheads turn with it. Placed last so it wins over the generic
   .steps rules in the breakpoints above. */
@media (max-width: 1080px) {
  .steps--flow { grid-template-columns: 1fr; gap: 2.25rem; }
  .steps--flow .step,
  .steps--flow .step + .step,
  .steps--flow .step:nth-child(n+2),
  .steps--flow .step:nth-child(n+3) {
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: 1.15rem 1.15rem 1.3rem; margin-top: 0;
  }
  .steps--flow .step.is-active { border-color: var(--accent); }
  .steps--flow .step::after { top: 100%; left: 50%; width: 1px; height: 2.25rem; }
  .steps--flow .step::before {
    top: calc(100% + 2.25rem - 7px); left: 50%;
    transform: translateX(-50%) rotate(135deg);
  }
  .steps--flow .step__wire {
    top: 100%; left: 50%; width: 1px; height: 2.25rem;
    transform: scaleY(0); transform-origin: center top;
  }
  .steps--flow .step.is-done .step__wire,
  .steps--flow .step.is-active .step__wire { transform: scaleY(1); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dot--live, .badge-real .dot--live, .stream__trade.is-new,
  .badge-real, .badge-real::after,
  .chart__pulse, .chart__pulse::after { animation: none; }
  .btn, .chip, .nav__links a { transition: none; }
  .steps--flow .step, .steps--flow .step__wire, .steps--flow .step__n::before { transition: none; }
  .steps--flow .step.is-active { transform: none; }
}