/* ==========================================================================
   InCyTrade — landing page styles
   Palette: deep navy + teal (prevention layer) + slate blue (correlation
   layer), on a cool-tinted paper neutral. Display/body: IBM Plex Sans.
   Utility/data: IBM Plex Mono — echoes the tracked, terminal-style labels
   already used across the pitch deck.
   ========================================================================== */

:root {
  --navy-950: #0b1622;
  --navy-900: #0f1f2e;
  --navy-800: #16293b;
  --teal-500: #2ec4b6;     /* on dark backgrounds only — 2.2:1 on white, fails AA text */
  --teal-600: #1c786f;     /* same hue, darkened for AA text on light backgrounds (5.3:1 on white, 4.9:1 on mist) */
  --teal-100: #e3f6f4;
  --blue-600: #3c5a80;
  --blue-100: #e8edf3;
  --ink-900: #131a22;
  --ink-700: #2a3540;
  --muted-500: #5c6b78;    /* secondary text on light backgrounds — 5.5:1 on white, 5.1:1 on mist */
  --muted-400: #7c8b97;    /* secondary text on dark backgrounds only — 3.5:1 on white, fails AA small text */
  --paper-0: #ffffff;
  --mist-100: #f3f6f8;
  --line-200: #dde3e8;
  --line-300: #c7d0d7;     /* decorative borders only — never use as text color, ~1.6:1 */

  --font-display: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --max: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--paper-0);
  color: var(--ink-900);
  font-family: var(--font-display);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
  color: var(--navy-900);
}

p { margin: 0; }

a { color: inherit; }

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--teal-500);
  color: var(--navy-950);
  padding: 0.75rem 1.25rem;
  z-index: 200;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 1.75rem;
}

/* keeps an anchor-jump target (nav links, skip link, in-page #refs) from
   landing underneath the sticky header — WCAG 2.4.11 Focus Not Obscured */
section[id] {
  scroll-margin-top: 84px;
}

/* ---------- eyebrow / utility labels ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin: 0 0 0.85rem;
}

.eyebrow-on-dark {
  color: var(--teal-500);
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line-200);
}

.header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.65rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--navy-900);
}

.wordmark-small { font-size: 1.05rem; }

.accent-cy { color: var(--teal-500); }
.accent-cy-text { color: var(--teal-500); }
/* header sits on a light background — teal-500 fails text contrast there,
   so the header's wordmark specifically uses the darker on-light teal */
.site-header .accent-cy { color: var(--teal-600); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.primary-nav a {
  text-decoration: none;
  font-size: 0.94rem;
  color: var(--ink-700);
  font-weight: 500;
}

.primary-nav a:hover { color: var(--teal-600); }

.nav-cta {
  border: 1px solid var(--navy-900);
  border-radius: 3px;
  padding: 0.5rem 1rem;
  color: var(--navy-900) !important;
  font-family: var(--font-mono);
  font-size: 0.82rem !important;
  letter-spacing: 0.04em;
}
.nav-cta:hover {
  background-color: var(--navy-900);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 14px 14px;
  color: var(--paper-0) !important;
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span {
  display: block;
  height: 2px;
  width: 24px;
  background: var(--navy-900);
  margin: 0 auto;
}

/* ---------- hero ---------- */

.hero {
  background: var(--navy-950);
  background-image:
    radial-gradient(circle at 88% -10%, rgba(46, 196, 182, 0.16), transparent 55%);
  color: var(--paper-0);
  padding: 5rem 0 6rem;
}

/* On a phone the desktop rhythm reads as dead space rather than air: the
   headline sits low, and the chart is two thumb-flicks below the fold. These
   tighten the vertical gaps and lift the type a step, so the page keeps the
   density it has on a desktop. Nothing moves and nothing is removed. */
@media (max-width: 700px) {
  /* The manual break belongs to the desktop measure. On a phone it splits the
     headline into more lines than it needs, so the text wraps on its own. */
  .hero-quote br { display: none; }
  .hero-quote { max-width: none; }

  /* The display type is where a phone layout usually gives itself away. On a
     desktop the headline has room to breathe at a loose line height. Shrunk to
     a phone it reads like body copy. Larger, tighter and with the tracking
     pulled in makes the same words read as a headline again. */
  .hero-quote {
    font-size: 2.15rem;
    line-height: 1.08;
    letter-spacing: -0.022em;
  }

  .section-head h2,
  .band-quote,
  .contact-inner h2 {
    line-height: 1.1;
    letter-spacing: -0.018em;
  }

  .hero { padding: 3.25rem 0 2.75rem; }
  .hero-quote { margin-bottom: 1.5rem; }
  .hero-sub { margin-bottom: 1.75rem; }
  .hero-ctas { margin-bottom: 2rem; }
  .hero-viz { margin-top: 0; }
  .hero-viz-col { margin-top: 0.25rem; margin-bottom: 2rem; }
  .hero-ctas { margin-bottom: 2.25rem; }
  .viz-canvas { height: 270px; }
  .signal-strip { padding-top: 1.75rem; }
  .section { padding: 3.25rem 0; }
  .section-head { margin-bottom: 1.75rem; }
}

/* ---- Hero correlation visual ------------------------------------------- */

/* On a phone the chart is the thing worth seeing, so it comes straight after
   the sentence that sets it up, and the buttons follow. On a desktop nothing
   moves: the copy and the buttons stack in the left column, the chart holds
   the right one, and the figures run the full width underneath. */
.hero-inner {
  display: flex;
  flex-direction: column;
}

.hero-copy { order: 1; }
.hero-viz-col { order: 2; }
.hero-ctas { order: 3; }
.hero-inner > .signal-strip { order: 4; }

@media (min-width: 981px) {
  .hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
    grid-template-areas:
      "copy viz"
      "cta  viz"
      "strip strip";
    grid-template-rows: auto auto auto;
    column-gap: 3.5rem;
    align-items: start;
  }
  .hero-copy { grid-area: copy; }
  .hero-ctas { grid-area: cta; }
  .hero-viz-col {
    grid-area: viz;
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  /* The rule stays with the caption it separates, and the line of type is
     centred inside the whole space that remains below it. Auto margins would
     centre the box, rule and all, which pushes the type to the top of it. */
  .hero-viz-col > .category {
    flex: 1;
    padding-top: 0;
    padding-bottom: 0;
  }
  .hero-inner > .signal-strip { grid-area: strip; }
}

.hero-viz {
  border: 1px solid #1e2f3d;
  background: rgba(9, 18, 28, 0.55);
  padding: 0.85rem 0.95rem 0.7rem;
}

.viz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  margin-bottom: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted-400);
}

.viz-live {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--teal-500);
}

.viz-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  animation: viz-pulse 1.9s ease-in-out infinite;
}

@keyframes viz-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.8); }
}

.viz-keys {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.viz-key {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.viz-key::before {
  content: "";
  width: 10px;
  height: 2px;
  background: currentColor;
}

.viz-key-price { color: #cfdce6; }
.viz-key-alert { color: #6f9fd0; }
.viz-key-corr  { color: var(--teal-500); }

.viz-canvas {
  display: block;
  width: 100%;
  height: 330px;
}

.hero-viz-col { margin-bottom: 3.25rem; }

.viz-caption {
  margin: 0.85rem 0 0;
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #9fb1bf;
  text-wrap: balance;
}

.viz-caption span { color: var(--paper-0); }

@media (max-width: 980px) {
  .hero-viz { margin-top: 0.25rem; }
  .viz-canvas { height: 240px; }
}

@media (max-width: 620px) {
  .viz-keys { display: none; }
  .viz-canvas { height: 200px; }
}

@media (prefers-reduced-motion: reduce) {
  .viz-live i { animation: none; }
}

.hero-quote {
  font-size: clamp(2rem, 4.4vw, 3.15rem);
  color: var(--paper-0);
  max-width: 20ch;
  margin-bottom: 1.5rem;
}

.hero-sub {
  max-width: 62ch;
  /* small enough that the closing word never falls to a line of its own,
     which it does at 0.94 now that "internal" is in the sentence */
  font-size: 0.9rem;
  color: #c7d3dc;
  margin-bottom: 2.25rem;
}

.hero-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.25rem;
}

.btn {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: 3px;
  border: 1px solid transparent;
}

.btn-primary {
  background: var(--teal-500);
  color: var(--navy-950);
  font-weight: 600;
}
.btn-primary:hover { background: #43d6c8; }

.btn-ghost {
  border-color: #3a4d5c;
  color: var(--paper-0);
}
.btn-ghost:hover { border-color: var(--teal-500); color: var(--teal-500); }

.btn-ghost-dark {
  border-color: #3a4d5c;
  color: var(--paper-0);
}
.btn-ghost-dark:hover { border-color: var(--teal-500); color: var(--teal-500); }

.signal-strip {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  border-top: 1px solid #22323f;
  padding-top: 2rem;
}

.signal-cell {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.signal-num {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--teal-500);
  font-variant-numeric: tabular-nums;
}

.signal-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-400);
}

/* While the strip is resolving, each arrow stays hidden until the figure to
   its left has settled, so the three steps read in order. .is-live is only
   added by script.js, so with JS off the strip renders complete and static. */
.signal-strip.is-live .signal-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.signal-strip.is-live .signal-arrow.is-shown {
  opacity: 1;
  transform: none;
}

.signal-strip.is-live .signal-num.is-counting {
  color: var(--paper-0);
}

.signal-strip.is-live .signal-num.is-set {
  color: var(--teal-500);
  transition: color 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .signal-strip.is-live .signal-arrow,
  .signal-strip.is-live .signal-num.is-counting {
    opacity: 1;
    transform: none;
    color: var(--teal-500);
    transition: none;
  }
}

.signal-arrow {
  color: #3a4d5c;
  font-size: 1.2rem;
}

/* ---------- generic sections ---------- */

.section {
  padding: 5.5rem 0;
}

.section-alt {
  background: var(--mist-100);
}

.section-head {
  max-width: 46rem;
  margin-bottom: 2.5rem;
}

.section-head h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.15rem);
}

/* the head block is capped at 46rem for readable paragraphs, which broke this
   one line in two. The heading alone is allowed the full column. */
.section-head.section-head-wide {
  max-width: none;
}

.section-head.section-head-wide h2 {
  text-wrap: nowrap;
}

@media (max-width: 900px) {
  .section-head.section-head-wide h2 { text-wrap: balance; }
}

.section-dek {
  margin-top: 0.9rem;
  color: var(--muted-500);
  font-size: 1.05rem;
  max-width: 52ch;
}

.prose {
  max-width: 42rem;
}

.prose p {
  margin-bottom: 1.15rem;
  color: var(--ink-700);
}
.prose p:last-child { margin-bottom: 0; }

.prose-lead p { font-size: 1.08rem; }

.callout-line strong {
  color: var(--navy-900);
}

/* ---------- blind spot split ---------- */

.split-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--line-200);
  margin-bottom: 2rem;
}

.split-col {
  padding: 2rem 2.25rem;
}
.split-col:first-child {
  border-right: 1px solid var(--line-200);
}
.split-col p:last-child {
  color: var(--ink-700);
}

.split-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-500);
  margin-bottom: 0.9rem !important;
}

.callout-band {
  background: var(--navy-900);
  color: var(--paper-0);
  padding: 1.75rem 2.25rem;
  font-size: 1.05rem;
}
.callout-band strong { color: var(--teal-500); }

/* ---------- timeline (precedent) ---------- */

.timeline {
  list-style: none;
  margin: 0 0 3rem;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: auto auto 1fr auto auto;
  gap: 1.25rem;
}

.timeline-item {
  border-top: 3px solid var(--teal-500);
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
}

/* Subgrid makes every card share the parent's five rows, so the figures sit on
   one continuous baseline no matter how long a blurb or citation runs. Falls
   back to the flex column above where subgrid isn't supported. */
@supports (grid-template-rows: subgrid) {
  .timeline-item {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    row-gap: 0;
  }
  .timeline-detail { margin-bottom: 0 !important; }
  .timeline-stat { margin-top: 1.1rem; }
  .timeline-stat-sub { min-height: 0; }
}

.timeline-date {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--muted-500);
  margin-bottom: 0.5rem !important;
}

.timeline-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy-900);
  margin-bottom: 0.6rem !important;
}

.timeline-detail {
  font-size: 0.92rem;
  color: var(--muted-500);
  margin-bottom: 1.1rem !important;
  flex: 1 1 auto;
}

/* A second rule, echoing the teal one above each card title, runs across all
   five figures. It makes the shared baseline visible rather than implied. */
.timeline-stat {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--teal-600);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 2px solid var(--blue-600);
  padding-top: 0.85rem;
}

/* Reserve two lines for the citation strip so every stat block is the same
   height - that is what keeps the green figures on one continuous baseline
   across the five cards, whatever length the citation runs to. */
.timeline-stat-sub {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted-500);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-height: 3em;
}

.subgrid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.fact-list {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.fact-list > div {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  gap: 1rem;
}

.fact-list dt {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy-900);
}

.fact-list dd {
  margin: 0;
  font-size: 0.94rem;
  color: var(--muted-500);
}

/* ---------- dark quote band ---------- */

.band-dark {
  background: var(--navy-950);
  color: var(--paper-0);
}

.band-quote {
  font-size: clamp(1.25rem, 2.4vw, 1.65rem);
  line-height: 1.5;
  max-width: 44rem;
  color: #dbe5eb;
  text-wrap: balance;
}

/* ---------- product / layers ---------- */

.layer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.layer-card {
  border: 1px solid var(--line-200);
  border-top: 3px solid var(--teal-500);
  padding: 2.25rem;
  background: var(--paper-0);
}

.layer-card-blue { border-top-color: var(--blue-600); }

.layer-kicker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 0.75rem !important;
}
.layer-card-blue .layer-kicker { color: var(--blue-600); }

.layer-card h3 {
  font-size: 1.4rem;
  margin-bottom: 0.9rem;
}

.layer-card > p {
  color: var(--muted-500);
  margin-bottom: 1.25rem;
}

.layer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.layer-list li {
  position: relative;
  padding-left: 1.15rem;
  font-size: 0.94rem;
  color: var(--ink-700);
}

.layer-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--teal-500);
}
.layer-card-blue .layer-list li::before { background: var(--blue-600); }

/* ---------- modules ---------- */

.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.module-card {
  background: var(--paper-0);
  border: 1px solid var(--line-200);
  border-left: 3px solid var(--teal-500);
  padding: 2rem 2.1rem;
}

.module-blue { border-left-color: var(--blue-600); }

.module-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-500);
  margin-bottom: 0.6rem !important;
}

.module-card h3 {
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
}

.module-question {
  font-size: 1rem;
  font-weight: 500;
  color: var(--navy-900);
  margin-bottom: 1.1rem !important;
}

.module-list {
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.module-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.92rem;
  color: var(--muted-500);
}

.module-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--muted-500);
}

.module-foot {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-500);
  border-top: 1px solid var(--line-200);
  padding-top: 0.9rem;
}

/* ---------- team ---------- */

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-bottom: 1.75rem;
}

.team-card {
  border: 1px solid var(--line-200);
  padding: 2rem 2.1rem;
}

.team-name {
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy-900);
  margin-bottom: 0.2rem !important;
}

.team-role {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal-600);
  margin-bottom: 0.9rem !important;
}

.team-bio {
  color: var(--muted-500);
  margin-bottom: 1.1rem !important;
}

.team-mail {
  font-family: var(--font-mono);
  font-size: 0.86rem;
  color: var(--navy-900);
  text-decoration: none;
  border-bottom: 1px solid var(--line-300);
}
.team-mail:hover { color: var(--teal-600); border-color: var(--teal-600); }

.team-note {
  font-size: 0.9rem;
  color: var(--muted-500);
}

/* ---------- contact ---------- */

.contact-inner { max-width: 40rem; }

.contact-heading {
  color: var(--paper-0);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  margin-bottom: 1.1rem;
}

.contact-body {
  color: #c7d3dc;
  font-size: 1.05rem;
  margin-bottom: 2.25rem;
  max-width: 46ch;
}

/* ---------- footer ---------- */

.site-footer {
  background: var(--navy-950);
  border-top: 1px solid #1c2b38;
  padding: 2.25rem 0;
}

.footer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-row .wordmark {
  color: var(--paper-0);
  font-size: 1.25rem;
}

.footer-tagline {
  font-size: 0.85rem;
  color: var(--muted-400);
  text-align: center;
  flex: 1;
}

.footer-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted-400);
  letter-spacing: 0.04em;
}

.footer-meta a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 1px;
}

.footer-meta a:hover {
  color: var(--teal-500);
  border-bottom-color: var(--teal-500);
}

.footer-legal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid #1c2b38;
}

.footer-copyright {
  font-size: 0.82rem;
  color: var(--muted-400);
}

.footer-legal-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.5rem;
}

.footer-legal-nav a {
  font-size: 0.82rem;
  color: var(--muted-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #3a4d5c;
}
.footer-legal-nav a:hover {
  color: var(--teal-500);
  text-decoration-color: var(--teal-500);
}

/* ---------- legal pages ---------- */

.legal-hero {
  padding: 3.25rem 0 2.25rem;
  background: var(--mist-100);
  border-bottom: 1px solid var(--line-200);
}

.legal-hero h1 {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  margin: 0.4rem 0 0.6rem;
}

.legal-updated {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--muted-500);
}

/* The heading block and the body were two containers of different widths, so
   the text started well to the right of the title it belonged to. The
   container now matches the one the heading uses, and the measure is kept
   comfortable by capping each block of text instead of the column. */
/* The section below the title band carried the full page rhythm, which left
   a gap wide enough to read as a mistake. The body now starts close enough
   to belong to the heading above it. */
.legal-hero + .section {
  padding-top: 2.75rem;
}

.legal-body {
  max-width: var(--max);
}

.legal-body > * {
  max-width: 42rem;
}

.legal-body h2 {
  font-size: 1.25rem;
  margin: 2.5rem 0 1rem;
}
.legal-body h2:first-of-type { margin-top: 0; }

.legal-body h3 {
  font-size: 1.02rem;
  margin: 1.75rem 0 0.75rem;
}

.legal-body p {
  color: var(--ink-700);
  margin-bottom: 1.1rem;
  font-size: 0.98rem;
}

.legal-body ul {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
}
.legal-body li {
  color: var(--ink-700);
  margin-bottom: 0.6rem;
  font-size: 0.98rem;
}

.legal-body a {
  color: var(--teal-600);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-body a:hover { color: var(--navy-900); }

.legal-body strong { color: var(--navy-900); }


.placeholder {
  color: var(--blue-600);
  background: var(--blue-100);
  padding: 0.05em 0.35em;
  border-radius: 3px;
  font-style: italic;
}

.legal-note {
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
  background: var(--mist-100);
  border: 1px solid var(--line-200);
  font-size: 0.9rem;
  color: var(--muted-500);
}
.legal-note strong { color: var(--navy-900); }

.legal-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.75rem;
  font-size: 0.9rem;
}
.legal-table-wrap { overflow-x: auto; }
.legal-table th,
.legal-table td {
  text-align: left;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--line-200);
  vertical-align: top;
}
.legal-table th {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted-500);
  background: var(--mist-100);
}
.legal-table td { color: var(--ink-700); }

.footer-legal-nav a[aria-current="page"] {
  color: var(--paper-0);
  text-decoration-color: var(--teal-500);
}

/* ---------- cookie notice (vanilla-cookieconsent theming) ----------
   Overrides the library's own CSS custom properties (defined in
   vendor/cookieconsent/cookieconsent.css) to match the site palette,
   rather than touching the vendored file itself. */

:root {
  --cc-font-family: var(--font-display);
  --cc-bg: var(--navy-900);
  --cc-primary-color: var(--paper-0);
  --cc-secondary-color: #c7d3dc;
  --cc-link-color: var(--teal-500);
  --cc-overlay-bg: rgba(11, 22, 34, 0.6);
  --cc-modal-border-radius: 4px;
  --cc-btn-border-radius: 3px;

  --cc-btn-primary-bg: var(--teal-500);
  --cc-btn-primary-color: var(--navy-950);
  --cc-btn-primary-border-color: var(--teal-500);
  --cc-btn-primary-hover-bg: #43d6c8;
  --cc-btn-primary-hover-color: var(--navy-950);
  --cc-btn-primary-hover-border-color: #43d6c8;

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--paper-0);
  --cc-btn-secondary-border-color: #3a4d5c;
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.08);
  --cc-btn-secondary-hover-color: var(--paper-0);
}

/* ---------- scroll reveal ---------- */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .layer-grid,
  .module-grid,
  .team-grid,
  .split-columns,
  .subgrid {
    grid-template-columns: 1fr;
  }
  .split-col:first-child {
    border-right: none;
    border-bottom: 1px solid var(--line-200);
  }
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px) {
  .primary-nav {
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: var(--paper-0);
    border-bottom: 1px solid var(--line-200);
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 0.5rem 1.75rem 1.25rem;
    display: none;
  }
  .primary-nav.is-open { display: flex; }
  /* The divider rules below are for the plain links only. They used to catch
     the button too, repainting its bottom edge in the divider colour and then
     removing it on :last-child, which left it looking sliced off. */
  .primary-nav a:not(.nav-cta) {
    padding: 0.75rem 0;
    width: 100%;
    border-bottom: 1px solid var(--line-200);
  }
  .primary-nav a:not(.nav-cta):last-child { border-bottom: none; }
  .nav-cta {
    width: 100%;
    margin-top: 0.9rem;
    padding: 0.7rem 1rem;
    text-align: center;
  }
  .nav-toggle { display: flex; }

  .hero { padding: 3.5rem 0 3rem; }
  .section { padding: 3.5rem 0; }

  .timeline { grid-template-columns: 1fr 1fr; }
  .timeline-detail { min-height: 0; }
}

@media (max-width: 700px) {
  /* On a phone the page is one narrow column, so the generous desktop padding
     eats the reading width. Everything below trades inner padding for line
     length, and unstacks the two-column pieces that were squeezing text into
     a third of the screen. */
  .wrap { padding: 0 1.35rem; }

  .split-col,
  .layer-card,
  .module-card,
  .team-card { padding: 1.6rem 1.35rem; }

  .callout-band { padding: 1.5rem 1.35rem; }

  /* term-and-definition rows: label above the text instead of beside it */
  .fact-list > div {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  /* full-width buttons read as deliberate on a phone, half-width reads broken */
  .hero-ctas { gap: 0.75rem; }
  .hero-ctas .btn,
  .contact-inner .btn {
    display: block;
    width: 100%;
    text-align: center;
  }

  .footer-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
  }
  .footer-tagline {
    text-align: left;
    flex: none;
  }
  .footer-legal {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }
  .footer-legal-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem 1.1rem;
  }

  .legal-table { font-size: 0.85rem; }
  .legal-table th,
  .legal-table td { padding: 0.6rem 0.5rem; }
}

@media (max-width: 480px) {
  .timeline { grid-template-columns: 1fr; }
  .signal-strip { gap: 1rem; }
  .hero-quote { font-size: 2.12rem; }
}

/* Provenance line under the precedent timeline. */
.source-note {
  margin-top: 2.25rem;
  font-size: 0.85rem;
  line-height: 1.65;
  color: var(--muted-500);
  max-width: 78ch;
}

/* Footer imprint — operator identity and securities notice. Sits on the dark
   footer, so it uses the dark-background muted token (5.2:1 on --navy-950). */
.footer-imprint {
  padding-top: 1.25rem;
  margin-top: 1.25rem;
  border-top: 1px solid #1c2b38;
}

.footer-imprint p {
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted-400);
  margin: 0 0 0.45rem;
  max-width: 78ch;
}

.footer-imprint p:last-child { margin-bottom: 0; }

.footer-imprint a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #3a4d5c;
}

.footer-imprint a:hover {
  color: var(--teal-500);
  text-decoration-color: var(--teal-500);
}

/* Second row of evidence blocks under the timeline. */
.subgrid-row-2 {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line-200);
}

/* The consent notice is a compact box in the corner rather than a full-width
   bar, so it never sits on top of the hero figures. */
#cc-main .cm--box {
  max-width: 22rem;
}

/* ==========================================================================
   "Why now?" floating note
   A small launcher pinned to the bottom right that opens a chat-style panel
   and types the answer out. Fixed position and a low footprint, so it never
   covers page content, and it lifts out of the way while the cookie notice
   is on screen.
   ========================================================================== */

.whynow {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 90;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.75rem;
  transition: bottom 0.25s ease;
}

/* the consent notice sits in the same corner until it is dismissed */
html.show--consent .whynow { bottom: 15.5rem; }

.whynow-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 1px solid #24384a;
  background: var(--navy-900);
  color: var(--teal-500);
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease, background 0.18s ease;
}

.whynow-fab:hover { transform: translateY(-2px); background: var(--navy-800); }

.whynow-fab:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 3px;
}

.whynow-glyph {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}

/* the accessible name lives in the DOM, off screen */
.whynow-label,
.whynow-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* a short prompt so the circle is not just a mystery glyph */
.whynow-teaser {
  position: absolute;
  right: calc(100% + 0.6rem);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-400);
  background-color: var(--navy-900);
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 14px 14px;
  border: 1px solid #24384a;
  padding: 0.4rem 0.7rem;
  opacity: 0;
  transform: translateX(6px);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.whynow-fab:hover .whynow-teaser,
.whynow-fab:focus-visible .whynow-teaser,
.whynow.is-hinting .whynow-teaser {
  opacity: 1;
  transform: none;
}

.whynow.is-open .whynow-teaser { opacity: 0; }

.whynow-panel {
  position: relative;
  width: 360px;
  max-width: calc(100vw - 3rem);
  background: var(--navy-950);
  border: 1px solid #24384a;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* the same squares as the rest of the dark surfaces, on a tighter pitch so
   they read inside a small panel. The launcher circle stays plain. */
.whynow-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 28% 38%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 28% 38%, #000 0%, transparent 80%);
}

.whynow-panel > * {
  position: relative;
  z-index: 1;
}

.whynow-panel[hidden] { display: none; }

.whynow.is-open .whynow-panel {
  animation: whynow-in 0.22s ease-out;
}

@keyframes whynow-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.whynow-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid #1c2b38;
}

.whynow-title {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal-500);
}

.whynow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-500);
  animation: viz-pulse 1.9s ease-in-out infinite;
}

.whynow-close {
  background: none;
  border: 0;
  color: var(--muted-400);
  font-size: 1.3rem;
  line-height: 1;
  padding: 0 0.15rem;
  cursor: pointer;
}

.whynow-close:hover { color: var(--paper-0); }

.whynow-close:focus-visible {
  outline: 2px solid var(--teal-500);
  outline-offset: 2px;
}

.whynow-body { padding: 0.95rem 0.9rem 1.1rem; }

.whynow-text {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.62;
  color: #c7d3dc;
  min-height: 7.5rem;
}

/* the caret only blinks while text is still arriving */
.whynow.is-typing .whynow-text::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 1em;
  margin-left: 2px;
  background: var(--teal-500);
  vertical-align: -0.15em;
  animation: whynow-caret 1s step-end infinite;
}

@keyframes whynow-caret {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@media (max-width: 700px) {
  .whynow { right: 1rem; bottom: 1rem; }

  /* beside the button there is no room on a phone, so the hint sits above it */
  .whynow-teaser {
    right: 0;
    bottom: calc(100% + 0.5rem);
    transform: translateY(4px);
  }

  .whynow-fab:hover .whynow-teaser,
  .whynow-fab:focus-visible .whynow-teaser,
  .whynow.is-hinting .whynow-teaser { transform: none; }
  html.show--consent .whynow { bottom: 17rem; }
  .whynow-panel { width: calc(100vw - 2rem); }
  .whynow-text { min-height: 9.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .whynow-dot,
  .whynow.is-open .whynow-panel,
  .whynow.is-typing .whynow-text::after { animation: none; }
  .whynow-fab:hover { transform: none; }
}

/* ---- The category ------------------------------------------------------- */

/* Stated once in the hero, under the chart: the short form large enough to
   remember, the long form small enough not to compete with the headline. */
/* Centred under the panel and ruled across its full width, so it reads as the
   panel's caption rather than as a stray label hanging off the left edge. */
/* One line: the short name, the long name, and the mark closing it, centred
   in whatever space the chart column leaves over. */
.category {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  width: 100%;
  margin-top: 1rem;
  padding-top: 1rem;
  padding-bottom: 0;
  border-top: 1px solid #1e2f3d;
  text-align: center;
}

.category-mark {
  width: 44px;
  height: 44px;
  flex: none;
  color: var(--paper-0);
  filter: drop-shadow(0 0 18px rgba(46, 196, 182, 0.3));
}

.category-mark circle {
  transform-origin: 32px 32px;
  animation: mark-blink 0.9s ease-in-out infinite;
}

@keyframes mark-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.2; transform: scale(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  .category-mark circle { animation: none; }
}

.category-names {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.85rem;
}

.category-abbr {
  font-family: var(--font-mono);
  font-size: 2.1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--teal-500);
  line-height: 1;
}

.category-full {
  position: relative;
  top: 3px;
  font-family: var(--font-mono);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted-400);
}


@media (max-width: 700px) {
  .category-mark { width: 34px; height: 34px; }

  /* the same single line on a phone, scaled to fit the width */
  .category {
    gap: 0.6rem;
    margin-top: 1.35rem;
    padding-top: 1.5rem;
    padding-bottom: 0.5rem;
  }
  .category-names { gap: 0.55rem; }
  .category-abbr { font-size: 1.35rem; }
  .category-full { font-size: 0.66rem; letter-spacing: 0.1em; }
}

/* ---- Soft grid on the dark surfaces ------------------------------------- */
/* The faint squares from the brand card, carried onto every navy area of the
   site. The radial mask keeps it away from the edges, so it reads as texture
   rather than as graph paper. */
.hero,
.callout-band,
.band-dark,
.site-footer {
  position: relative;
}

.hero::before,
.callout-band::before,
.band-dark::before,
.site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
  mask-image: radial-gradient(circle at 30% 40%, #000 0%, transparent 72%);
}

.hero > *,
.callout-band > *,
.band-dark > *,
.site-footer > * {
  position: relative;
  z-index: 1;
}

/* the callout is a shallow band, so it takes a tighter grid and a softer mask */
.callout-band::before {
  background-size: 32px 32px;
  -webkit-mask-image: radial-gradient(circle at 22% 50%, #000 0%, transparent 80%);
  mask-image: radial-gradient(circle at 22% 50%, #000 0%, transparent 80%);
}

/* ---- Footer social marks ------------------------------------------------- */
/* Placeholders until the accounts exist: they carry no href, so nothing is
   focusable and nothing is announced as a link that goes nowhere. */
.footer-social {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social .social-link {
  display: inline-flex;
  color: var(--teal-500);
}

.footer-social svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---- The phone fold ------------------------------------------------------ */
/* Three earlier media blocks each set part of the hero's phone spacing, and
   the last one wins. Rather than chase them, the fold is settled once, here,
   at the end of the file. Everything is inside a max-width query, so the
   desktop layout is untouched by design and not by luck.

   The goal is the one thing that separates a phone page that looks built from
   one that looks typed: the live panel has to land whole inside the first
   screen, under the headline, without the reader scrolling for it. */
@media (max-width: 700px) {
  .hero { padding: 2.4rem 0 2.5rem; }

  .hero .eyebrow { margin-bottom: 0.7rem; }

  .hero-quote { margin-bottom: 1.05rem; }

  /* At desktop size this paragraph runs seven lines on a 390px screen and
     reads as a wall of text. One step down in size, with the leading tightened
     to match, keeps it comfortable and buys back the height the panel needs. */
  .hero-sub {
    font-size: 0.94rem;
    line-height: 1.55;
    margin-bottom: 1.25rem;
  }

  .hero-viz-col { margin-top: 0; margin-bottom: 1.5rem; }
  .hero-viz { margin-top: 0; padding: 0.7rem 0.8rem 0.6rem; }
  .hero-ctas { margin-bottom: 1.9rem; }
}


/* ---- The category line sits between two rules --------------------------- */
/* The chart column carried a bottom margin, so the space below the line of
   type was the column's leftover plus that margin, and the line read as
   sitting high. The column now runs down to the rule above the figures, and
   the type is centred in the gap the eye actually sees. */
@media (min-width: 981px) {
  .hero-inner > .hero-viz-col { margin-bottom: 0; }
}

/* ==========================================================================
   The phone edition
   --------------------------------------------------------------------------
   A phone is not a narrow desktop. The desktop composition is two columns
   holding each other in balance; on a 390px screen that balance is gone and
   what is left is one long column, where the same type sizes read as a wall.

   Everything below is inside a max-width query, so the desktop layout is
   untouched by construction rather than by care. The work is in three places:
   the type scale, the density of the first screen, and the rhythm between
   sections.
   ========================================================================== */
@media (max-width: 700px) {

  /* ---- Type -------------------------------------------------------------
     Body copy was set at 17.3px with 27.6px leading, which is a comfortable
     desktop measure and far too heavy on a phone, where the line holds barely
     eight words. Stepping down to 15.4/1.55 is the single change that does
     the most for how the page reads. */
  .prose p,
  .prose-lead p {
    font-size: 0.96rem;
    line-height: 1.58;
    margin-bottom: 1rem;
  }

  .section-dek {
    font-size: 0.96rem;
    line-height: 1.55;
    margin-top: 0.75rem;
  }

  .section-head h2 {
    font-size: 1.48rem;
    line-height: 1.14;
    letter-spacing: -0.012em;
  }

  .section-head { margin-bottom: 1.6rem; }

  .callout-band { font-size: 0.96rem; line-height: 1.6; padding: 1.35rem 1.4rem; }

  .band-quote { font-size: 1.12rem; line-height: 1.45; }

  /* ---- Section rhythm ---------------------------------------------------
     Tighter inside a section, wider between them. That contrast is what makes
     a long page feel composed rather than poured. */
  .section { padding: 3.6rem 0; }

  /* an anchor should not land with its eyebrow hidden under the sticky bar */
  .section, .hero { scroll-margin-top: 76px; }

  /* ---- The figures ------------------------------------------------------
     Three stacked rows with arrows between them ran 250px down the page and
     read as a list. Across, they read as the narrowing they describe. */
  .signal-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.9rem;
    align-items: start;
    padding-top: 1.35rem;
  }

  .signal-arrow { display: none; }

  .signal-cell { gap: 0.35rem; }

  .signal-num { font-size: 1.12rem; }

  .signal-label {
    font-size: 0.56rem;
    letter-spacing: 0.05em;
    line-height: 1.35;
  }

  /* ---- The live panel ---------------------------------------------------
     It is the one thing on the page that moves, so it earns its height. */
  .viz-canvas { height: 226px; }

  /* ---- The first screen -------------------------------------------------
     The headline is the star and keeps its weight, but a phone line holds
     five words, so it is set a step down with tighter leading. The closing
     clause of the paragraph is the one piece of copy that can wait: it names
     the gap, which the whole page then spends itself explaining. Dropping it
     here is what lets the live panel land inside the first screen. */
  .hero-quote {
    font-size: 2rem;
    line-height: 1.09;
  }

  .sub-tail { display: none; }

  .hero-ctas { gap: 0.7rem; }

  /* the hint would sit over the panel on a narrow screen */
  .whynow-teaser { display: none; }

  /* ---- Cards -------------------------------------------------------------
     The split panels and the engine cards inherit the page body size, so they
     were still running at the desktop measure inside a 346px column. They join
     the phone scale, and their padding comes in with them: 2.25rem of inset on
     a narrow card leaves very little line to read on. */
  .split-col { padding: 1.5rem 1.35rem; }
  .split-col p { font-size: 0.96rem; line-height: 1.58; }

  .layer-card { padding: 1.6rem 1.4rem; }
  .layer-card h3 { font-size: 1.22rem; margin-bottom: 0.7rem; }
  .layer-card > p { font-size: 0.96rem; line-height: 1.58; margin-bottom: 1rem; }
  .layer-list { gap: 0.7rem; }
  .layer-list li { font-size: 0.92rem; line-height: 1.55; }

  .fact-list li { font-size: 0.92rem; line-height: 1.55; }

  .contact-heading { font-size: 1.75rem; }
  .contact-body { font-size: 0.98rem; line-height: 1.58; }

  /* ---- The precedent ladder ---------------------------------------------
     Across five columns the cards share a subgrid so the figures land on one
     baseline, and the citation strip reserves two lines to hold that baseline
     true. Stacked in a single column there is no shared baseline to hold, so
     both devices become dead air: every card was padded to the height of the
     longest one. Here each card is only as tall as its own contents. */
  .timeline {
    grid-template-rows: none;
    gap: 1.9rem;
    margin-bottom: 2.25rem;
  }

  .timeline-item {
    display: flex;
    flex-direction: column;
    grid-row: auto;
    grid-template-rows: none;
  }

  .timeline-detail {
    font-size: 0.92rem;
    line-height: 1.55;
    flex: 0 0 auto;
    margin-bottom: 0.9rem !important;
  }

  .timeline-title { font-size: 1.02rem; }
  .timeline-stat { font-size: 1.28rem; margin-top: 0; padding-top: 0.7rem; }

  .timeline-stat-sub {
    min-height: 0;
    font-size: 0.62rem;
    letter-spacing: 0.05em;
  }
}