/* ============================================================
   Sipher6 — Impact Intelligence
   Brand: Navy #0F1F3D · Royal Blue #1D4ED8 · Orange #F97316
   Typography: IBM Plex Sans
   ============================================================ */

:root {
  --bg:              #ffffff;
  --surface:         #f6f8fb;
  --surface-2:       #eef2f7;
  --divider:         #e2e8f0;
  --border:          #d7dfe9;

  --text:            #0f1f3d;
  --text-muted:      #3a4661;
  --text-faint:      #5c6884;

  --navy:            #0f1f3d;
  --navy-lift:       #16294b;
  --primary:         #1d4ed8;
  --primary-hover:   #1739a6;
  --primary-soft:    #dbe6fb;
  --primary-on-dark: #6f93f2;
  --accent:          #f97316;
  --accent-hover:    #dc5f0a;
  --accent-soft:     #fde3cc;
  --accent-ink:      #1a0e00;

  --font: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;

  --shadow-md: 0 8px 24px rgba(15, 31, 61, 0.08);

  --wrap: 1180px;
  --gutter: clamp(20px, 5vw, 130px);
  --section: clamp(64px, 8vw, 104px);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  --step-hero:    clamp(2.75rem, 1.2rem + 5vw, 4.75rem);
  --step-section: clamp(2rem, 1.1rem + 2.6vw, 3rem);
  --step-sub:     clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  --step-lead:    clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  --step-body:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: none; text-size-adjust: none; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul { list-style: none; }
a { color: var(--primary); text-decoration: none; transition: color 180ms var(--ease); }
a:hover { color: var(--primary-hover); }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

h1, h2, h3 { line-height: 1.08; letter-spacing: -0.03em; font-weight: 700; text-wrap: balance; }

::selection { background: var(--primary-soft); color: var(--navy); }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: 6px; }

/* a skip link that actually appears — the previous build hid it permanently */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  display: inline-flex; align-items: center; height: 44px; padding: 0 20px;
  background: var(--accent); color: var(--accent-ink);
  font-size: 14px; font-weight: 600; border-radius: 9999px;
  transition: top 180ms var(--ease);
}
.skip-link:focus { top: 16px; color: var(--accent-ink); }

/* ---------- layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--section); }
.band--surface { background: var(--surface); border-block: 1px solid var(--divider); }
.band--navy { background: var(--navy); }

.eyebrow {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 24px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--primary);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--accent); flex-shrink: 0; }
.band--navy .eyebrow, .masthead .eyebrow { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 56px); }
.section-head h2 { font-size: var(--step-section); margin-bottom: 20px; }
.section-head p { font-size: var(--step-lead); line-height: 1.6; color: var(--text-muted); }
.band--navy .section-head h2 { color: #fff; }
.band--navy .section-head p { color: rgba(255, 255, 255, 0.66); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--divider);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 96px; }

.brand { display: flex; align-items: center; gap: 9px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand svg { width: 50px; height: 58px; flex-shrink: 0; }
.brand-word { display: block; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; }
.brand-tag { display: block; margin-top: 5px; white-space: nowrap; font-size: 12.5px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); }

.nav-links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text-muted); }
.nav-links a:hover, .nav-links a[aria-current='page'] { color: var(--text); }

.nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--text); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 52px; padding: 0 30px; border-radius: 9999px;
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: background 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease), gap 180ms var(--ease);
}
.btn--primary { background: var(--accent); color: var(--accent-ink); }
.btn--primary:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn--sm { height: 40px; padding: 0 22px; font-size: 14px; }
.btn--ghost { padding: 0; height: auto; color: var(--primary); }
.btn--ghost:hover { gap: 12px; }
.btn--on-navy { color: #fff; }
.btn--on-navy:hover { color: #fff; }

.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px; }

/* ---------- hero ---------- */
.hero { padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 76px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 560px; gap: 72px; align-items: center; }
.hero h1 { font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.035em; margin-bottom: 30px; text-wrap: wrap; }
.hero h1 em { font-style: normal; color: var(--primary); }
.hero p { font-size: var(--step-lead); line-height: 1.55; color: var(--text-muted); max-width: 34em; margin-bottom: 20px; }
.hero p + p { margin-bottom: 40px; }

.figure { margin: 0; }
.figure svg { width: 100%; height: auto; overflow: visible; }
.figcap { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--divider); }
.legend { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-bottom: 12px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-muted); }
.dot { width: 9px; height: 9px; border-radius: 9999px; flex-shrink: 0; }
.dot--broker { background: var(--accent); }
.dot--hub { border: 1.5px solid var(--primary); }
.dot--author { background: var(--navy); opacity: 0.28; }
.figcap p { font-size: 13px; line-height: 1.55; color: var(--text-faint); }

/* ---------- claim strip ---------- */
.claims { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--divider); }
.claims > div { padding: 34px 40px 0 0; border-right: 1px solid var(--divider); }
.claims > div:last-child { border-right: 0; padding-right: 0; }
.claims > div + div { padding-left: 40px; }
.claims strong { display: block; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.125rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; margin-bottom: 10px; }
.claims p { font-size: 15px; line-height: 1.55; color: var(--text-muted); }

/* ---------- the argument ---------- */
.compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
.card {
  display: flex; flex-direction: column;
  background: var(--bg); border: 1px solid var(--border); border-radius: 16px;
  padding: 34px 32px 30px;
}
.card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.card-head h3 { font-size: 19px; letter-spacing: -0.01em; }
.card-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); white-space: nowrap; }
.card > p { font-size: 14px; line-height: 1.55; color: var(--text-muted); }

.ranked { display: flex; flex-direction: column; gap: 3px; margin: 26px -10px 0; }
.ranked li { display: flex; align-items: center; gap: 14px; min-height: 34px; padding: 0 10px; border-radius: 6px; }
.ranked li.is-broker { background: var(--accent-soft); }
.ranked .rank { width: 22px; font-size: 12px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ranked .who { width: 52px; font-size: 13.5px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.01em; }
.ranked .track { flex-grow: 1; display: block; height: 7px; }
.ranked .track i { display: block; height: 7px; border-radius: 9999px; background: var(--navy); opacity: 0.22; }
.ranked .val { width: 34px; text-align: right; font-size: 12.5px; font-weight: 600; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.ranked li.is-broker .rank { color: var(--accent); }
.ranked li.is-broker .who,
.ranked li.is-broker .val { color: var(--text); font-weight: 600; }
.ranked li.is-broker .track i { background: var(--accent); opacity: 1; }

.card-foot { margin-top: auto; padding-top: 24px; font-size: 13px; line-height: 1.55; color: var(--text-faint); }
.card-foot b { color: var(--text-muted); font-weight: 600; }

.race-figure { margin: 10px -8px 0; }
.race-figure svg { width: 100%; height: auto; overflow: visible; }
.readout { position: relative; min-height: 92px; margin-top: 8px; padding-top: 18px; border-top: 1px solid var(--divider); }
.readout > div { position: absolute; inset: 18px 0 0 0; }
.readout-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.readout-head span { font-size: 14px; font-weight: 600; color: var(--text); }
.readout-head b { font-size: 13px; font-weight: 700; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.readout p { margin-top: 10px; font-size: 12.5px; line-height: 1.5; color: var(--text-faint); }
.meter { display: block; height: 8px; border-radius: 9999px; background: var(--surface-2); overflow: hidden; }
.meter i { display: block; width: 100%; height: 8px; border-radius: 9999px; }
.meter i.fill-a { background: var(--navy); opacity: 0.45; }
.meter i.fill-b { background: var(--accent); }
.s6r-pb .readout-head b { color: var(--accent); }

.payoff {
  margin-top: 28px; background: var(--navy); border-radius: 16px;
  padding: clamp(32px, 4vw, 44px) clamp(28px, 4vw, 48px);
  display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(32px, 4vw, 56px); align-items: center;
  row-gap: clamp(22px, 2vw, 30px);
}
.payoff h3 { font-size: var(--step-sub); line-height: 1.28; font-weight: 600; letter-spacing: -0.015em; color: #fff; margin-bottom: 14px; }
.payoff > div > p { font-size: 16px; line-height: 1.6; color: rgba(255, 255, 255, 0.68); max-width: 40em; }
.payoff-note {
  grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.56);
}
.gauges { display: flex; flex-direction: column; gap: 20px; }
.gauge-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.gauge-head span { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.62); }
.gauge-head b { font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, 0.62); font-variant-numeric: tabular-nums; }
.gauge--hot .gauge-head span, .gauge--hot .gauge-head b { color: #fff; }
.gauge-bar { display: block; height: 8px; border-radius: 9999px; background: rgba(255, 255, 255, 0.12); }
.gauge-bar i { display: block; height: 8px; border-radius: 9999px; }
.note-fine { font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, 0.66); }

/* ---------- method ---------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.step { border-top: 2px solid rgba(255, 255, 255, 0.16); padding-top: 26px; }
.step:last-child { border-top-color: var(--accent); }
.step-top { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.step-num { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent); font-variant-numeric: tabular-nums; }
.step h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: #fff; margin-bottom: 12px; }
.step p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, 0.62); }

/* ---------- capabilities ---------- */
.leads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin-bottom: 28px; }
.lead {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 40px) clamp(28px, 3vw, 36px);
}
.lead-top { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.lead-num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); font-variant-numeric: tabular-nums; }
.lead-kicker { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-faint); }
.lead h3 { font-size: clamp(1.375rem, 1.1rem + 0.7vw, 1.6875rem); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 14px; }
.lead p { font-size: 16px; line-height: 1.6; color: var(--text-muted); margin-bottom: 26px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { font-size: 12.5px; font-weight: 500; color: var(--text-muted); background: var(--bg); border: 1px solid var(--border); border-radius: 9999px; padding: 6px 14px; }

.caps { border-top: 1px solid var(--divider); }
.cap { display: grid; grid-template-columns: 60px 300px minmax(0, 1fr); gap: 32px; align-items: start; padding: 28px 0; border-bottom: 1px solid var(--divider); }
.cap-num { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; color: var(--accent); font-variant-numeric: tabular-nums; padding-top: 3px; }
.cap h3 { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.cap p { font-size: 16px; line-height: 1.6; color: var(--text-muted); }
.caps-note { margin-top: 32px; font-size: 17px; font-weight: 600; }

/* ---------- how you buy it ---------- */
.buy { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.buy h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); margin-bottom: 18px; }
.buy > div > p { font-size: 17px; line-height: 1.6; color: var(--text-muted); }
.terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.terms > div { background: var(--bg); padding: 32px 34px; }
.terms h3 { font-size: 17px; font-weight: 600; margin-bottom: 10px; letter-spacing: -0.01em; }
.terms p { font-size: 15px; line-height: 1.6; color: var(--text-muted); }

/* ---------- lineage ---------- */
.lineage-head { display: flex; align-items: end; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: clamp(40px, 5vw, 60px); }
.lineage-head .section-head { margin-bottom: 0; }
.rail { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 20px; }
.rail h3 { font-size: 21px; letter-spacing: -0.02em; margin-bottom: 16px; font-variant-numeric: tabular-nums; }
.rail-line { position: relative; height: 2px; background: var(--divider); margin-bottom: 18px; }
.rail-line::before { content: ''; position: absolute; left: 0; top: -3px; width: 8px; height: 8px; border-radius: 9999px; background: var(--primary); }
.rail p { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); }
.rail .is-now h3 { color: var(--accent); }
.rail .is-now .rail-line { background: var(--accent-soft); }
.rail .is-now .rail-line::before { background: var(--accent); }
.rail .is-now p { color: var(--text); font-weight: 500; }

/* ---------- leadership ---------- */
.leader { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: clamp(32px, 4vw, 60px); align-items: start; }
.portrait {
  width: 100%; max-width: 360px; aspect-ratio: 28 / 34; border-radius: 16px;
  background: var(--surface-2); border: 1px dashed var(--border);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-faint);
}
.leader h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); line-height: 1.1; margin-bottom: 8px; }
.leader-role { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-bottom: 30px; }
.leader-role > span { font-size: 16px; font-weight: 600; color: var(--primary); }
.leader-role .sep { width: 1px; height: 14px; background: var(--border); }
.leader-role a { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: 600; color: var(--text-muted); }
.leader-role a:hover { color: var(--primary); }
.creds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; margin-bottom: 30px; max-width: 720px; }
.creds > div { background: var(--bg); padding: 20px 22px; }
.creds strong { display: block; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 4px; }
.creds span { font-size: 13px; line-height: 1.45; color: var(--text-muted); }
.bio { font-size: 17px; line-height: 1.7; color: var(--text-muted); max-width: 68ch; }

/* ---------- CTA ---------- */
.cta {
  background: linear-gradient(135deg, var(--navy), var(--navy-lift));
  border-radius: 24px; padding: clamp(40px, 6vw, 84px) clamp(28px, 5vw, 80px);
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(36px, 5vw, 80px); align-items: center;
}
.cta h2 { font-size: clamp(1.875rem, 1.2rem + 2.2vw, 2.75rem); color: #fff; margin-bottom: 20px; }
.cta > div > p { font-size: 18px; line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 34em; margin-bottom: 34px; }
.next { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: clamp(24px, 3vw, 48px); }
.next-label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); margin-bottom: 20px; }
.next ol { list-style: none; display: flex; flex-direction: column; gap: 16px; }
.next li { display: flex; gap: 14px; align-items: baseline; }
.next li b { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.next li span { font-size: 15px; line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.next > p { margin-top: 26px; font-size: 14px; color: rgba(255, 255, 255, 0.55); }
.next > p a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--divider); padding-block: 44px; }
.footer-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 24px; }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand svg { width: 22px; height: 25px; flex-shrink: 0; }
.footer-brand span { font-size: 12.5px; color: var(--text-faint); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; font-size: 12.5px; color: var(--text-muted); }
.footer-links a:hover { color: var(--primary); }

/* ---------- origin story ---------- */
.masthead { background: var(--navy); padding-block: clamp(48px, 6vw, 80px) clamp(56px, 7vw, 88px); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.66); margin-bottom: 28px; }
.back-link:hover { color: #fff; }
.masthead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: clamp(40px, 5vw, 64px); align-items: center; }
.masthead h1 { font-size: clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem); line-height: 1.04; letter-spacing: -0.035em; color: #fff; margin-bottom: 26px; max-width: 15ch; }
.masthead > .wrap > .masthead-grid > div > p { font-size: var(--step-lead); line-height: 1.6; color: rgba(255, 255, 255, 0.7); max-width: 640px; }

.timeline { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.era { padding: 0 48px 56px 0; }
.era strong { display: block; font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.era span { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.beat { position: relative; border-left: 2px solid var(--divider); padding: 0 0 56px 48px; }
.beat::before { content: ''; position: absolute; left: -7px; top: 10px; width: 12px; height: 12px; border-radius: 9999px; background: var(--primary); border: 3px solid var(--bg); }
.beat h2 { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5625rem); line-height: 1.22; letter-spacing: -0.02em; margin-bottom: 16px; }
.beat p { font-size: clamp(1rem, 0.95rem + 0.3vw, 1.09375rem); line-height: 1.72; color: var(--text-muted); max-width: 68ch; }
.beat p + p { margin-top: 18px; }
.timeline .is-now strong { color: var(--accent); }
.timeline .is-now + .beat { border-left-color: var(--accent-soft); padding-bottom: 8px; }
.timeline .is-now + .beat::before { background: var(--accent); }
.timeline .is-now { padding-bottom: 0; }
.beat .btn { margin-top: 26px; }

/* ---------- request a demo ---------- */
.demo-grid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; }
.demo-form-col { padding: clamp(48px, 6vw, 84px) clamp(20px, 5vw, 100px) clamp(48px, 6vw, 84px) var(--gutter); }
.demo-form-col h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.125rem); line-height: 1.06; letter-spacing: -0.035em; margin-bottom: 20px; }
.demo-form-col > p { font-size: var(--step-lead); line-height: 1.6; color: var(--text-muted); max-width: 34em; margin-bottom: 48px; }
.form { display: flex; flex-direction: column; gap: 26px; max-width: 620px; }
.form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 9px; }
.field label { font-size: 14px; font-weight: 600; }
.field .hint { font-weight: 400; font-size: 13px; color: var(--text-faint); }
.field input, .field textarea {
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 14px 16px; resize: vertical;
  transition: border-color 180ms var(--ease), background 180ms var(--ease);
}
.field input { height: 52px; padding-block: 0; }
.field input:focus, .field textarea:focus { border-color: var(--primary); background: var(--bg); outline: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--text-faint); }
.form-submit { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 6px; }
.form-submit > span { font-size: 14px; color: var(--text-faint); }
.form-status { font-size: 14px; min-height: 1.4em; }
.form-status.is-error { color: var(--accent-hover); }
.form-status.is-success { color: var(--primary); }
/* Demo form result: larger and bold so visitors don't miss it */
#form-status.is-success, #form-status.is-error { font-size: 18px; font-weight: 600; line-height: 1.4; }

.demo-rail { background: var(--navy); padding: clamp(48px, 6vw, 84px) var(--gutter) clamp(48px, 6vw, 84px) clamp(24px, 4vw, 56px); }
.demo-rail .next-label { margin-bottom: 26px; }
.demo-rail ol { list-style: none; display: flex; flex-direction: column; gap: 26px; margin-bottom: 44px; }
.demo-rail li { display: flex; gap: 16px; align-items: baseline; }
.demo-rail li b { font-size: 12px; font-weight: 700; color: var(--accent); font-variant-numeric: tabular-nums; }
.demo-rail li strong { display: block; font-size: 16px; font-weight: 600; color: #fff; margin-bottom: 5px; }
.demo-rail li span { display: block; font-size: 14.5px; line-height: 1.55; color: rgba(255, 255, 255, 0.62); }
.assure { border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.assure div { display: flex; gap: 14px; align-items: flex-start; }
.assure svg { flex-shrink: 0; margin-top: 2px; }
.assure p { font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, 0.72); }

/* ============================================================
   Network motion

   The resting frame is the complete static graph — every
   animation is additive, so a still capture (or a browser with
   motion turned down) shows the finished map, never a blank one.

   The hero reveal runs THREE TIMES on load: each element carries
   its own delay, derived from real graph distance to the broker,
   so the wave spreads outward. Because the delays span ~1.75s and
   each iteration is 3s, the waves arrive about 3s apart with a
   short breath between them. After the third, every animated
   element falls back to its base style (opacity 0) and the map
   settles. Only the ambient drift and the broker's pulse keep going.
   ============================================================ */

/* a signal travelling one edge: a short dash runs start -> end.
   pathLength="100" normalises every path, so one keyframe serves all. */
@keyframes s6-travel {
  0%   { stroke-dashoffset: 116; opacity: 0; }
  3%   { opacity: 1; }
  17%  { stroke-dashoffset: 0;   opacity: 1; }
  24%  { opacity: 0; }
  100% { stroke-dashoffset: 0;   opacity: 0; }
}
.s6-travel { opacity: 0; animation: s6-travel 3s var(--ease) 3; }

/* a node the signal has reached */
@keyframes s6-lit { 0%, 100% { opacity: 0; } 4% { opacity: 1; } 11% { opacity: 0.9; } 21% { opacity: 0; } }
.s6-lit { opacity: 0; animation: s6-lit 3s ease-out 3; }

@keyframes s6-halo {
  0%   { opacity: 0;   transform: scale(0.35); }
  5%   { opacity: 0.7; }
  24%  { opacity: 0;   transform: scale(1.32); }
  100% { opacity: 0;   transform: scale(1.32); }
}
.s6-halo { opacity: 0; transform-box: fill-box; transform-origin: center; animation: s6-halo 3s ease-out 3; }

/* the broker never goes quiet */
@keyframes s6-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.16); } }
.s6-breathe { transform-box: fill-box; transform-origin: center; animation: s6-breathe 4.2s ease-in-out infinite; }
.s6-b2 { animation-delay: -1.5s; }

/* clusters breathe as whole groups — twelve transforms, not 149 */
@keyframes s6-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(var(--dx), var(--dy)); } }
.s6-drift { animation: s6-drift 19s ease-in-out infinite; }
.s6-d0 { --dx: 5px;  --dy: -3px; animation-duration: 21s; }
.s6-d1 { --dx: -4px; --dy: 4px;  animation-duration: 17s; animation-delay: -4s; }
.s6-d2 { --dx: 3px;  --dy: 5px;  animation-duration: 23s; animation-delay: -9s; }
.s6-d3 { --dx: -5px; --dy: -4px; animation-duration: 18s; animation-delay: -2s; }
.s6-d4 { --dx: 4px;  --dy: 3px;  animation-duration: 25s; animation-delay: -13s; }
.s6-d5 { --dx: -3px; --dy: -5px; animation-duration: 20s; animation-delay: -6s; }

/* ---- the reach race: two engagements run back to back on one 6s cycle.
   Percentages are absolute within the cycle, so a node the signal has
   reached STAYS lit for the rest of its phase — the map then agrees
   with the "n of 11" meter beneath it. This one loops, because it sits
   below the fold and a single play would be over before you scrolled. ---- */
@keyframes s6r-tra1 { 0%, 1% { stroke-dashoffset: 114; opacity: 0; } 2% { opacity: 1; } 7% { stroke-dashoffset: 0; opacity: 1; } 10%, 100% { opacity: 0; } }
@keyframes s6r-tra2 { 0%, 7% { stroke-dashoffset: 114; opacity: 0; } 8% { opacity: 1; } 13% { stroke-dashoffset: 0; opacity: 1; } 16%, 100% { opacity: 0; } }
@keyframes s6r-trb1 { 0%, 51% { stroke-dashoffset: 114; opacity: 0; } 52% { opacity: 1; } 57% { stroke-dashoffset: 0; opacity: 1; } 60%, 100% { opacity: 0; } }
@keyframes s6r-trb2 { 0%, 57% { stroke-dashoffset: 114; opacity: 0; } 58% { opacity: 1; } 63% { stroke-dashoffset: 0; opacity: 1; } 66%, 100% { opacity: 0; } }
.s6r-tra1, .s6r-tra2, .s6r-trb1, .s6r-trb2 { opacity: 0; }
.s6r-tra1 { animation: s6r-tra1 6s var(--ease) infinite; }
.s6r-tra2 { animation: s6r-tra2 6s var(--ease) infinite; }
.s6r-trb1 { animation: s6r-trb1 6s var(--ease) infinite; }
.s6r-trb2 { animation: s6r-trb2 6s var(--ease) infinite; }

/* light up on arrival, hold until the phase ends */
@keyframes s6r-ona1 { 0%, 5% { opacity: 0; } 8%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes s6r-ona2 { 0%, 11% { opacity: 0; } 14%, 44% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes s6r-onb1 { 0%, 55% { opacity: 0; } 58%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes s6r-onb2 { 0%, 61% { opacity: 0; } 64%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.s6r-ona1, .s6r-ona2, .s6r-onb1, .s6r-onb2 { opacity: 0; }
.s6r-ona1 { animation: s6r-ona1 6s ease-out infinite; }
.s6r-ona2 { animation: s6r-ona2 6s ease-out infinite; }
.s6r-onb1 { animation: s6r-onb1 6s ease-out infinite; }
.s6r-onb2 { animation: s6r-onb2 6s ease-out infinite; }

/* a ring that pops once, at the moment of arrival */
@keyframes s6r-hla1 { 0%, 5% { opacity: 0; transform: scale(0.4); } 8% { opacity: 0.8; } 16%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes s6r-hla2 { 0%, 11% { opacity: 0; transform: scale(0.4); } 14% { opacity: 0.8; } 22%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes s6r-hlb1 { 0%, 55% { opacity: 0; transform: scale(0.4); } 58% { opacity: 0.8; } 66%, 100% { opacity: 0; transform: scale(1.35); } }
@keyframes s6r-hlb2 { 0%, 61% { opacity: 0; transform: scale(0.4); } 64% { opacity: 0.8; } 72%, 100% { opacity: 0; transform: scale(1.35); } }
.s6r-hla1, .s6r-hla2, .s6r-hlb1, .s6r-hlb2 { opacity: 0; transform-box: fill-box; transform-origin: center; }
.s6r-hla1 { animation: s6r-hla1 6s ease-out infinite; }
.s6r-hla2 { animation: s6r-hla2 6s ease-out infinite; }
.s6r-hlb1 { animation: s6r-hlb1 6s ease-out infinite; }
.s6r-hlb2 { animation: s6r-hlb2 6s ease-out infinite; }

/* whichever author is being engaged glows for their half of the cycle */
@keyframes s6r-src-a { 0%, 44% { opacity: 0.34; } 48%, 96% { opacity: 0.06; } 100% { opacity: 0.34; } }
@keyframes s6r-src-b { 0%, 46% { opacity: 0.10; } 50%, 94% { opacity: 0.42; } 98%, 100% { opacity: 0.10; } }
.s6r-src-a { animation: s6r-src-a 6s ease-in-out infinite; }
.s6r-src-b { animation: s6r-src-b 6s ease-in-out infinite; }

/* the readout under the map swaps with the phase */
@keyframes s6r-pa { 0%, 44% { opacity: 1; } 48%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes s6r-pb { 0%, 46% { opacity: 0; } 50%, 94% { opacity: 1; } 98%, 100% { opacity: 0; } }
.s6r-pa { animation: s6r-pa 6s ease-in-out infinite; }
.s6r-pb { opacity: 0; animation: s6r-pb 6s ease-in-out infinite; }

/* reach meters fill as the signal spreads */
@keyframes s6r-fill-a { 0%, 5% { transform: scaleX(0); } 20%, 44% { transform: scaleX(0.36); } 48%, 100% { transform: scaleX(0); } }
@keyframes s6r-fill-b { 0%, 55% { transform: scaleX(0); } 70%, 94% { transform: scaleX(0.91); } 98%, 100% { transform: scaleX(0); } }
.s6r-fill-a, .s6r-fill-b { transform-origin: left center; }
.s6r-fill-a { animation: s6r-fill-a 6s var(--ease) infinite; }
.s6r-fill-b { animation: s6r-fill-b 6s var(--ease) infinite; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .figure { max-width: 620px; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 28px; }
  .buy { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
  .payoff { grid-template-columns: 1fr; }
  .payoff-note { padding-top: 4px; border-top: 0; }
  .cta { grid-template-columns: 1fr; }
  .next { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-left: 0; padding-top: 32px; }
  .demo-grid { grid-template-columns: 1fr; }
  .demo-form-col { padding-inline: var(--gutter); }
  .masthead-grid { grid-template-columns: 1fr; gap: 40px; }
  .masthead .figure { max-width: 520px; }
}

@media (max-width: 900px) {
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--divider);
    padding: 8px var(--gutter) 20px;
  }
  .nav-links.is-open { display: flex; }
  .nav-links a { display: flex; align-items: center; min-height: 48px; font-size: 16px; }
  .nav-toggle { display: flex; }
  .site-header { position: relative; }
  .compare { grid-template-columns: 1fr; }
  .leads { grid-template-columns: 1fr; }
  .cap { grid-template-columns: 44px minmax(0, 1fr); gap: 8px 20px; }
  .cap h3 { grid-column: 2; }
  .cap p { grid-column: 2; }
  .leader { grid-template-columns: 1fr; }
  .portrait { max-width: 220px; }
  .timeline { grid-template-columns: 1fr; }
  .era { padding: 0 0 20px; }
  .era strong { display: inline-block; }
  .era span { display: inline-block; margin: 0 0 0 14px; }
  .beat { padding-bottom: 48px; }
}

/* touch targets: every standalone control clears 44px on small screens.
   Inline links inside a sentence are exempt and stay as they are. */
@media (max-width: 900px) {
  .btn--sm { height: 44px; padding: 0 20px; }
  .btn--ghost { min-height: 44px; }
  .leader-role a,
  .back-link { min-height: 44px; }
}

@media (max-width: 700px) {
  .claims { grid-template-columns: 1fr; }
  .claims > div,
  .claims > div + div { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--divider); }
  .claims > div:last-child { border-bottom: 0; }
  .steps { grid-template-columns: 1fr; }
  .terms { grid-template-columns: 1fr; }
  .rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .creds { grid-template-columns: 1fr; }
  .form-pair { grid-template-columns: 1fr; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .card { padding: 26px 22px 24px; }
  .readout { min-height: 108px; }
  .actions .btn { width: 100%; }
  .actions .btn--ghost { width: auto; }
}

@media (max-width: 460px) {
  /* the lockup + CTA + menu button do not all fit; the tagline is the one to drop */
  .brand-tag { display: none; }
  .rail { grid-template-columns: 1fr; }
  .card-head { flex-direction: column; gap: 4px; }
}

/* ============================================================
   Reduced motion — hold the finished state so the argument
   still lands without a single pixel moving.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }

  .s6-travel, .s6-lit, .s6-halo, .s6-breathe, .s6-drift,
  .s6r-tra1, .s6r-tra2, .s6r-trb1, .s6r-trb2,
  .s6r-hla1, .s6r-hla2, .s6r-hlb1, .s6r-hlb2,
  .s6r-ona1, .s6r-ona2, .s6r-src-a, .s6r-src-b,
  .s6r-pa, .s6r-pb, .s6r-fill-a, .s6r-fill-b { animation: none !important; }

  .s6r-ona1, .s6r-ona2, .s6r-pa, .s6r-fill-a { display: none !important; }
  .s6r-onb1, .s6r-onb2 { opacity: 1 !important; }
  .s6r-pb { opacity: 1 !important; }
  .s6r-src-b { opacity: 0.42 !important; }
  .s6r-fill-b { transform: scaleX(0.91) !important; }
}


/* ============ v3 adjustments ============ */
/* four callouts instead of three */
.claims { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.claims strong { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.625rem); }
.claims > div { padding: 34px 28px 0 0; }
.claims > div + div { padding-left: 28px; }

@media (max-width: 1080px) {
  .claims { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .claims > div,
  .claims > div + div { padding: 28px 28px 28px 0; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
  .claims > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .claims > div:nth-child(2n+1) { padding-left: 0; }
  .claims > div:nth-child(2n) { padding-left: 28px; }
  .claims > div:nth-last-child(-n+2) { border-bottom: 0; padding-bottom: 0; }
}
@media (max-width: 700px) {
  .claims { grid-template-columns: 1fr; }
  .claims > div,
  .claims > div + div { padding: 24px 0; border-right: 0; border-bottom: 1px solid var(--divider); }
  .claims > div:last-child { border-bottom: 0; }
}
@media (max-width: 560px) {
  .brand svg { width: 38px; height: 44px; }
  .brand-word { font-size: 24px; }
}

/* portrait slot holding a real photograph */
.portrait--photo { border: 0; background: var(--surface-2); overflow: hidden; padding: 0; }
.portrait--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; border-radius: inherit; }

/* ============ v4 — client login ============ */
.nav-login {
  height: 44px; padding: 0 14px; border: 0; background: none; cursor: pointer;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--text-muted);
  transition: color 180ms var(--ease);
}
.nav-login:hover { color: var(--text); }
.nav-login-sm { display: none; }

.modal {
  /* the global reset zeroes margins, which defeats the dialog's own centring —
     restore it explicitly */
  margin: auto; border: 0; padding: 0; background: none;
  width: min(92vw, 420px); max-height: 90vh; overflow: visible;
}
.modal:not([open]) { display: none; }
.modal::backdrop { background: rgba(15, 31, 61, 0.62); }
.modal-card {
  display: flex; flex-direction: column; gap: 20px;
  background: var(--bg); border-radius: 18px; padding: clamp(24px, 4vw, 34px);
  box-shadow: 0 24px 60px rgba(15, 31, 61, 0.28);
}
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.modal-head h2 { font-size: 1.5rem; line-height: 1.2; }
.modal-close {
  flex-shrink: 0; width: 40px; height: 40px; margin: -6px -8px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--text-faint);
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-foot { font-size: 13px; line-height: 1.5; color: var(--text-faint); }
.modal-foot a { color: var(--primary); font-weight: 600; }

@media (max-width: 900px) {
  .nav-login { display: none; }
  .nav-login-sm {
    display: flex; align-items: center; min-height: 48px; width: 100%;
    border: 0; background: none; padding: 0; cursor: pointer;
    font-family: inherit; font-size: 16px; font-weight: 500; color: var(--text-muted); text-align: left;
  }
}
.leader { align-items: center; }
@media (min-width: 901px) and (max-width: 1080px) { .leader { grid-template-columns: 300px minmax(0, 1fr); } .portrait { max-width: 300px; } }
@media (max-width: 900px) { .leader { align-items: start; } .portrait { max-width: 300px; } }

.cta-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 22px; }
.cta-actions > span { font-size: 15px; color: rgba(255, 255, 255, 0.66); }
.cta-actions > span a { color: #fff; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }