/* Peak / Ford / Norfolk Southern shared component contract.
   Keep project palettes and evidence-specific modules narrowly scoped. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.reveal.visible { opacity: 1; transform: none; }
.d1 { transition-delay: .07s } .d2 { transition-delay: .14s } .d3 { transition-delay: .21s } .d4 { transition-delay: .28s }

/* ─── NAV — pixel-match index.html (same faces/sizes/spacing; Peak paper/ink only) ─── */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 32px;
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 32px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.top-name {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.5;
  flex-shrink: 0;
  white-space: nowrap;
}
.top-role {
  color: var(--ink-3);
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}
.top-dot {
  display: inline-block;
  margin-inline: 0.5em;
}
.top-nav {
  font-family: "Hanken Grotesk", -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.5;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.top-nav a {
  color: var(--ink-3);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.top-nav a:hover { color: var(--ink); }
.top-nav .sep { color: var(--ink-4); }

.doc { padding-top: var(--nav-h); }

/* Shared structure. The current reference page supplies Peak's approved
   Showroom palette below; Ford and NS override these tokens from their UI. */
:root {
  /* Image treatment — radius + hairline + lifted shadow live per-theme. */
  --line-img: 1px solid var(--rule);
  --col-gap: clamp(40px, 5vw, 72px);
  --sect-y: clamp(88px, 10vw, 132px);

  --max: 1320px;
  --reading: 720px;
  --nav-h: 74.5px; /* measured index .top */
  --mark-under: 0.33em;
  --ease: cubic-bezier(.22, 1, .36, 1);
  /* Mid-page product shots share one width (hero excluded). Sized so a
     3-up still fits the --max well: (1320 - 2×32 gap) / 3 ≈ 418. */
  --shot-phone: 360px;

  /* Display roles are intentionally separate. Editorial titles can carry the
     project-facing serif/sans pairing; special bands remain all sans. */
  --display-editorial: var(--display);
  --display-band: var(--sans);

  /* Type DNA — shared across Peak / Ford / NS; only faces + palette change. */
  --track-1: -0.038em;   /* 100px+ display */
  --track-2: -0.032em;   /* 70-100px */
  --track-3: -0.026em;   /* 45-70px */
  --track-4: -0.018em;   /* 24-45px */
  --track-title: -0.025em; /* ~20-32px block titles */
  --track-label: -0.005em;
  --weight-hero: 670;     /* masthead wordmark only */
  --weight-display: 610;  /* chapter / statement / outcome / block nums */
  --weight-title: 610;    /* block titles */
  --weight-label: 600;
  --weight-body: 450;
  --label-size: 13.5px;
  --prose-size: clamp(21px, 1.55vw, 23px);
  --prose-sans: clamp(17px, 1.2vw, 18px);
  --block-body: clamp(16.5px, 1.15vw, 17.5px);
  --deck-size: clamp(19px, 1.4vw, 21px);
  --lh-display: 1.04;
  --lh-title: 1.08;
  --lh-body: 1.58;

  /* Surface aliases — dark bands remap these; components read aliases. */
  --fg: var(--ink);
  --fg-muted: var(--ink-3);
  --fg-faint: var(--ink-4);
  --accent: var(--volt);
  --accent-soft: var(--volt-mid);
  --on-dark: var(--band-ink);
  --on-dark-muted: var(--band-mut);
  --on-dark-faint: var(--band-faint);
}

/* Peak reference palette. */
[data-theme="c"] {
  --paper: #F3F6FB; --paper-2: #FFFFFF;
  --ink: #14183C; --ink-2: #363C66; --ink-3: #5F6488; --ink-4: #9095B2;
  --rule: #DCE3EE; --rule-soft: #E9EEF5;
  --volt: #5246E5; --volt-soft: #ECEAFC; --volt-mid: #9C94F4; --highlight: #6FE0C0;
  --navy: #0C1030;
  --display: "Newsreader", Georgia, serif;
  --display-editorial: "Newsreader", Georgia, serif;
  --display-band: "Instrument Sans", "Helvetica Neue", sans-serif;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Instrument Sans", "Helvetica Neue", sans-serif;
  --r: 10px; --shadow-img: 0 30px 70px -24px rgba(8, 10, 40, 0.35);
  --band-ink: #fff;
  --band-mut: rgba(255,255,255,.72);
  --band-faint: rgba(255,255,255,.55);
  --band-line: rgba(255,255,255,.28);
  --band-line-soft: rgba(255,255,255,.18);
  --band-star: rgba(111,224,192,.08);
  --band-accent: var(--highlight);
  --band-accent-soft: var(--volt-mid);
}

.insight-well,
.outcome,
.phone-grid {
  --accent: var(--band-accent);
  --accent-soft: var(--band-accent-soft);
  --fg: var(--on-dark);
  --fg-muted: var(--on-dark-muted);
  --fg-faint: var(--on-dark-faint);
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
  font-optical-sizing: auto;
}
body {
  background: var(--paper);
  font-family: var(--sans);
  color: var(--ink);
  line-height: 1.55;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
em, i { font-style: normal; }
h1, h2, h3, h4 { text-wrap: balance; }
::selection { background: var(--highlight); color: var(--ink); }
mark {
  background: transparent;
  color: inherit;
  padding: 0 .08em;
  border-radius: 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* ─── Layout foundations (single source; editorial pass styles type/chrome on top) ─── */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-top: 64px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.stat-strip > div { padding: 22px 20px 22px 0; }
.stat-strip > div + div { padding-left: 20px; border-left: 1px solid var(--rule-soft); }
.curve-hd {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.curve-legend {
  display: flex;
  gap: 18px;
  font-size: var(--label-size);
  color: var(--ink-3);
  font-weight: 500;
}
.curve-legend span { display: flex; align-items: center; gap: 7px; }
.swatch { width: 10px; height: 10px; border-radius: 2px; }
.swatch.off {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--volt) 28%, var(--paper)) 0 1.5px,
    color-mix(in srgb, var(--volt) 10%, var(--paper)) 1.5px 4px
  );
}
.swatch.mid { background: color-mix(in srgb, var(--volt) 48%, var(--paper)); }
.swatch.on { background: var(--volt); }
.curve-chart {
  position: relative;
  height: 240px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule-soft);
}
.bar {
  flex: 1;
  border-radius: 2px 2px 0 0;
  position: relative;
  min-width: 0;
  transition: opacity .2s var(--ease);
}
/* One Peak volt hue — hatch for off-peak, solid shades for mid/on. */
.bar.off {
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--volt) 28%, var(--paper)) 0 1.5px,
    color-mix(in srgb, var(--volt) 10%, var(--paper)) 1.5px 4px
  );
}
.bar.mid { background: color-mix(in srgb, var(--volt) 48%, var(--paper)); }
.bar.on { background: var(--volt); }
.bar.stress {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--volt) 70%, var(--ink));
  z-index: 1;
}
/* The axis mirrors the chart's own 24-track / 4px-gap geometry, so every
   label and tick lands exactly on its hour boundary at any width. --hr is
   the grid column, i.e. hour + 1. */
.curve-hours {
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  gap: 4px;
  margin-top: 0;
  font-family: var(--sans);
  font-size: 12px;
  color: var(--ink-4);
  font-feature-settings: "tnum";
}
.curve-hours span {
  grid-column: var(--hr);
  justify-self: start;
  transform: translateX(-50%);
  position: relative;
  padding-top: 8px;
  white-space: nowrap;
}
/* Ticks rise from the axis line into the chart, not down into the labels. */
.curve-hours span::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 50%;
  width: 1px;
  height: 5px;
  background: var(--ink-4);
  opacity: .55;
}
/* The two midnights sit on the chart's outer edges, so they align inward
   rather than centring and overflowing. */
.curve-hours span:first-child { transform: none; }
.curve-hours span:first-child::before { left: 0; }
.curve-hours span:last-child { justify-self: end; transform: none; }
.curve-hours span:last-child::before { left: auto; right: 0; }
.prose p + p { margin-top: 20px; }
.insight-inner { max-width: var(--max); margin: 0 auto; position: relative; }
.phone-grid {
  display: grid;
  gap: 40px 32px;
  margin-top: 64px;
  justify-content: center;
  justify-items: center;
}
.phone-grid.four { grid-template-columns: repeat(4, minmax(0, var(--shot-phone))); }
.phone-grid.three { grid-template-columns: repeat(3, minmax(0, var(--shot-phone))); }
.phone-grid.two { grid-template-columns: repeat(2, minmax(0, var(--shot-phone))); }
.phone-fig {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  width: min(100%, var(--shot-phone));
}
.phone-fig img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 26px 44px rgba(7,16,31,0.18));
}
.cs-next {
  display: block;
  padding: clamp(72px, 8vw, 112px) max(24px, calc((100vw - var(--max)) / 2));
  transition: background-color .3s var(--ease);
}
.cs-next:hover { background: var(--paper-2); }
.cs-next-in { display: block; }
.cs-next-line {
  /* Flex centring uses the title's full line box, which reserves descender
     space the headline rarely fills — so the circle rides low. Lift it to
     the cap-height centre; the nudge scales with the title. */
  --next-size: clamp(30px, 3.2vw, 44px);
  --next-lift: calc(var(--next-size) * -0.125);
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 10px;
}
.cs-next-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--rule);
  border-radius: 50%;
  color: var(--volt);
  transform: translateY(var(--next-lift));
  transition: background-color .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.cs-next:hover .cs-next-arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
  transform: translate(8px, var(--next-lift));
}
.cs-next-arrow svg { width: 17px; height: 17px; }

/* Hero — thesis on the left, proof on the right. */
.masthead {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(36px, 4vw, 56px) 0 0;
}
.masthead-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(300px, .5fr);
  gap: clamp(56px, 8vw, 120px);
  align-items: end;
  padding: clamp(4px, 1vw, 16px) 0 clamp(48px, 6vw, 64px);
}
.masthead-kicker {
  margin-bottom: 26px;
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.008em;
  text-transform: none;
}
.masthead-title {
  max-width: none;
  margin: 0;
  font-family: var(--display-editorial);
  font-size: clamp(64px, 9.5vw, 132px);
  font-variation-settings: normal;
  font-weight: var(--weight-hero);
  letter-spacing: var(--track-1);
  line-height: .86;
}
.masthead-title span { display: block; }
.masthead-title span:first-child { color: var(--volt); }
.masthead-deck {
  max-width: 730px;
  margin-top: 48px;
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.25;
}
.masthead-deck .hl {
  box-shadow: inset 0 calc(-1 * var(--mark-under)) 0 var(--highlight);
  font-weight: 500;
}
.masthead-impact {
  position: relative;
  padding: 22px 0 6px;
  border-top: 2px solid var(--ink);
}
.impact-label {
  color: var(--ink-3);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: none;
}
.impact-value {
  display: block;
  margin: 24px 0 16px;
  color: var(--volt);
  font-size: clamp(68px, 8vw, 104px);
  font-variation-settings: normal;
  font-weight: 650;
  letter-spacing: var(--track-2);
  line-height: .84;
  font-feature-settings: "tnum";
}
.impact-copy {
  max-width: 29ch;
  color: var(--ink-3);
  font-size: 14.5px;
  line-height: 1.55;
}
.impact-proof {
  display: inline-block;
  margin-top: 24px;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--ink);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.stat-strip {
  margin: 0;
  border-color: var(--ink);
}
.stat-strip > div { padding: 20px 20px 24px 0; }
.stat-strip > div + div {
  padding-left: 24px;
  border-color: var(--rule);
}
.stat-k {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  color: var(--ink-4);
  text-transform: none;
}
.stat-v { font-size: 17px; font-weight: 600; letter-spacing: -.015em; }

.hero-shot {
  max-width: 1680px;
  margin-top: 40px;
  margin-inline: auto;
  padding: 0 24px;
}
.hero-shot-frame {
  position: relative;
  padding: clamp(48px, 7vw, 108px) clamp(24px, 5vw, 80px) 0;
  overflow: hidden;
  border: 0;
  border-radius: 4px;
  background: var(--volt);
}
.hero-shot img {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0 auto;
  display: block;
  filter:
    drop-shadow(0 40px 56px rgba(11,8,64,.38))
    drop-shadow(0 8px 16px rgba(11,8,64,.22));
}
.hero-shot-cap {
  max-width: 1632px;
  margin: 18px auto 0;
  padding: 0;
  color: var(--ink-4);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: var(--track-label);
  text-transform: none;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
/* Caption separator. Spacing lives here, not in typed spaces, so it is
   tunable and reusable across caption components. */
.cap-dot {
  display: inline-block;
  /* Three-space equivalent on either side, without relying on collapsible
     typed whitespace in caption markup. */
  margin-inline: 0.9em;
}

/* Chapter rail creates the shared template language. */
.section {
  --rail-width: 168px;
  --rail-gap: clamp(44px, 7vw, 92px);
  display: grid;
  grid-template-columns: var(--rail-width) minmax(0, 1fr);
  column-gap: var(--rail-gap);
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(104px, 11vw, 156px) 0;
}
.section.tight { padding: 88px 0 120px; }
.section-body {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}
.section-num {
  grid-column: 1;
  grid-row: 1;
  position: sticky;
  top: calc(var(--nav-h) + 36px);
  align-self: start;
  z-index: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin: 0;
  padding-top: 14px;
  border-top: 2px solid var(--ink);
}
/* Evidence chapters keep the numbered rail sticky through the text intro. The
   proof gallery lives in a sibling block so the rail's containing block ends
   before imagery begins. */
.section--evidence { padding-bottom: 0; }
.evidence-proof {
  width: min(calc(100% - 64px), var(--max));
  margin: 0 auto;
  padding-bottom: clamp(104px, 11vw, 156px);
}
.section-count {
  color: var(--volt);
  font-size: 16px;
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  font-feature-settings: "tnum";
}
.section-label {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.012em;
}
.section-title {
  max-width: 15ch;
  margin-bottom: 44px;
  font-family: var(--display-editorial);
  font-size: clamp(42px, 4.9vw, 66px);
  font-variation-settings: normal;
  font-weight: var(--weight-display);
  letter-spacing: var(--track-3);
  line-height: var(--lh-display);
}
/* Display crispness baseline = .section-title (610 / tight track / ~1.04 lh).
   Other sans claims should echo that DNA at their scale. */
.section-title.wide { max-width: 18ch; }
.prose {
  max-width: var(--reading);
  color: var(--ink-2);
  font-family: var(--serif);
  font-size: var(--prose-size);
  line-height: 1.62;
}
.prose .lead {
  color: var(--ink);
  font-size: inherit;
  line-height: inherit;
}
/* Body mark: same geometry as masthead .hl; softer tint so it doesn’t shout on paper. */
.prose .lead mark {
  background: transparent;
  color: inherit;
  font-weight: 650;
  padding: 0 .04em;
  white-space: nowrap;
  box-shadow: inset 0 calc(-1 * var(--mark-under)) 0 color-mix(in srgb, var(--highlight) 78%, transparent);
}
/* Same geometry as .lead mark, for the two-rules statement in sans columns. */
.prose.cols-2 mark {
  background: transparent;
  color: inherit;
  font-weight: 600;
  padding: 0 .04em;
  box-shadow: inset 0 calc(-1 * var(--mark-under)) 0 color-mix(in srgb, var(--highlight) 78%, transparent);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.prose.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 44px;
  max-width: 920px;
  columns: unset;
  font-family: var(--sans);
  font-size: var(--prose-sans);
  line-height: 1.7;
}
/* Stack margins are for vertical prose only — not side-by-side columns. */
.prose.cols-2 p + p { margin-top: 0; }
.prose--gap { margin-top: 40px; }

/* Evidence blocks use rules and type, not a pile of rounded cards. */
.curve-block {
  margin-top: 64px;
  padding: 32px 0 28px;
  border: solid var(--ink);
  border-width: 2px 0 1px;
  border-radius: 0;
  background: transparent;
}
.curve-hd h3 {
  font-size: 20px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: 1.15;
}
.curve-legend {
  letter-spacing: var(--track-label);
  text-transform: none;
}
/* Caption under figures/charts — sans, quieter than narration prose. */
.curve-note {
  max-width: 680px;
  font-family: var(--sans);
  font-size: clamp(15.5px, 1.1vw, 16.5px);
  font-weight: var(--weight-body);
  line-height: 1.55;
  color: var(--ink-3);
  letter-spacing: var(--track-label);
}
.curve-note strong { color: var(--ink); font-weight: 600; }

/* Bridge pull — thesis between chapters, never chapter-rail chrome.
   Uses the same content-column offset as .section so it continues
   the reading line — empty left track, no label in the rail. */
.approach {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  column-gap: clamp(44px, 7vw, 92px);
  width: min(calc(100% - 64px), var(--max));
  max-width: var(--max);
  margin: 0 auto;
  padding: 8px 0 96px;
}
.approach-inner {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 0;
  border: 0;
}
/* Matches the section rail's label scale and its 2px ink rule, so the band
   reads as a sibling landmark rather than a stray heading. The label carries
   volt; the rule stays ink so it still matches the rail. */
.approach-label {
  padding-top: 14px;
  border-top: 2px solid var(--ink);
  color: var(--volt);
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.012em;
  text-transform: none;
}
.approach-text {
  max-width: 28ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 44px);
  font-weight: 500;
  letter-spacing: var(--track-4);
  line-height: 1.12;
  color: var(--ink);
}
.approach-text b {
  font-weight: 650;
  font-style: normal;
  color: inherit;
  box-shadow: inset 0 calc(-1 * var(--mark-under)) 0 var(--highlight);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The core insight gets a full tonal reset. */
.insight-well {
  padding: clamp(112px, 13vw, 180px) 0;
  background: var(--navy);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
.insight-kicker {
  margin-bottom: 40px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.008em;
  text-transform: none;
}
.insight-statement {
  max-width: 16ch;
  margin-bottom: 40px;
  font-family: var(--display-band);
  font-size: clamp(44px, 6.2vw, 84px);
  font-variation-settings: normal;
  font-weight: var(--weight-display);
  letter-spacing: var(--track-2);
  line-height: 1.0;
}
.insight-statement .pop {
  color: var(--accent);
  font-style: normal;
  font-weight: inherit;
}
.insight-body {
  max-width: 680px;
  margin-bottom: 96px;
  font-family: var(--sans);
  font-size: var(--deck-size);
  line-height: var(--lh-body);
  color: var(--fg-muted);
  letter-spacing: -.008em;
}
.insight-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  gap: 48px;
}
.insight-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 26px 0 0;
  border: solid var(--band-line);
  border-width: 1px 0 0;
  border-radius: 0;
  background: none;
}
/* Grows to equalize card height, but never below the min gap above “Instead of”. */
.insight-card::after {
  content: "";
  flex: 1 1 auto;
  min-height: 28px;
  order: 1;
}
.insight-card-num,
.insight-card p.insight-card-num {
  margin: 0 0 18px;
  color: var(--accent);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.insight-card h3 {
  max-width: 17ch;
  margin: 0 0 14px;
  font-size: clamp(24px, 2.4vw, 32px);
  font-weight: var(--weight-display);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
}
.insight-card > p:not(.insight-card-num):not(.instead) {
  max-width: 58ch;
  margin: 0;
  font-size: clamp(17px, 1.25vw, 18.5px);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
/* Shared baseline across the row; gap above the rule comes from ::after (min 28px). */
.insight-card .instead {
  order: 2;
  margin-top: 0;
  padding-top: 18px;
  border-top: 1px solid var(--band-line-soft);
  font-size: clamp(14.5px, 1.05vw, 15.5px);
  line-height: 1.5;
  color: var(--fg-faint);
}
.insight-card .instead strong {
  color: var(--fg);
  font-weight: 600;
  margin-inline-end: .55em;
}

/* Phone + notes as one unit, centered in the main well (--max). */
.showcase {
  display: grid;
  grid-template-columns: minmax(220px, var(--shot-phone)) minmax(0, 560px);
  column-gap: clamp(64px, 9vw, 128px);
  justify-content: center;
  width: 100%;
  margin-top: 112px;
  text-align: left;
  align-items: center;
}
.showcase.flip {
  grid-template-columns: minmax(0, 560px) minmax(220px, var(--shot-phone));
}
.showcase.flip .showcase-media { order: 2; }
/* Inside numbered chapters, span past the rail so centering is well-wide. */
/* The dark device band is genuinely full-bleed, so the rail slides behind
   it and disappears cleanly. */
.section-body > .phone-grid {
  position: relative;
  z-index: 1;
  margin-left: calc(-1 * (max(32px, calc((100vw - var(--max)) / 2)) + var(--rail-width) + var(--rail-gap)));
}
/* Transparent showcases may extend across the rail track to keep the phone
   and notes centred in the full content well. The rail remains visible. */
.section-body > .showcase {
  width: calc(100% + var(--rail-width) + var(--rail-gap));
  margin-left: calc(-1 * (var(--rail-width) + var(--rail-gap)));
}
.showcase-media {
  position: relative;
  width: min(100%, var(--shot-phone));
  max-width: var(--shot-phone);
}
/* No offset panel behind phones — a ::before rect flashed through the
   PNG's transparent margins on load, and a hard colored drop-shadow made
   that same silhouette permanent. Soft depth only. */
.showcase-media img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 28px 48px rgba(7,16,31,0.18));
}
.insight-well .showcase-media img {
  filter: drop-shadow(0 32px 48px rgba(0,0,0,0.5)) drop-shadow(0 8px 14px rgba(0,0,0,0.3));
}
.showcase-notes {
  max-width: 560px;
  gap: 0;
}
.showcase-note { padding: 0; }
.showcase-note + .showcase-note {
  margin-top: 30px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.insight-well .showcase-note + .showcase-note { border-color: var(--band-line-soft); }
.showcase-note-label {
  margin-bottom: 10px;
  color: var(--volt);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.insight-well .showcase-note-label { color: var(--accent-soft); }
.showcase-note h4 {
  font-size: clamp(26px, 2.5vw, 30px);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 12px;
}
.showcase-note p {
  font-size: var(--block-body);
  line-height: 1.55;
  color: var(--ink-3);
}
.insight-well .showcase-note p { color: var(--fg-muted); }

/* Empathize · structure 3: quotes in the lead, editorial compare, quiet audit. */
.ours-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  padding: 0 9px;
  border-radius: 5px;
  background: var(--volt);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: var(--track-label);
}
/* Four rows shared across both panes (tag, title, body, metric) so the
   divider and the top rule run full height regardless of copy length, and
   tag/title/body/metric line up across panes the way component 10 does. */
.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: clamp(40px, 6vw, 72px);
  margin-top: 56px;
  border: 0;
  align-items: stretch;
}
.compare-pane {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 4;
  row-gap: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.compare-pane.bad { opacity: 1; }
.compare-pane.good {
  padding-left: 0;
  border-left: 0;
  border-top-color: var(--volt);
  box-shadow: none;
}
.compare-tag {
  display: inline-flex;
  align-items: center;
  height: 23px;
  padding: 0;
  margin-bottom: 14px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-4);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.compare-pane.bad .compare-tag {
  background: transparent;
  color: var(--ink-4);
}
.compare-pane.good .compare-tag { display: none; }
.compare-pane.good .ours-chip {
  justify-self: start;
  width: max-content;
  margin-bottom: 14px;
}
.compare-pane h4 {
  font-family: var(--sans);
  font-size: clamp(22px, 2.2vw, 26px);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 12px;
  max-width: 16ch;
}
.compare-pane p {
  font-family: var(--sans);
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 40ch;
  flex: none;
}
.compare-metric {
  margin-top: 16px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-4);
}
.compare-pane.bad .compare-metric {
  background: transparent;
  color: var(--ink-4);
}
.compare-pane.good .compare-metric {
  background: transparent;
  color: var(--volt);
  font-weight: 600;
}

/* Beat frames · make each Empathize block’s job obvious before the evidence. */
.block-frame {
  max-width: 52ch;
  margin-top: 72px;
}
/* Borrows the approach band's rule-over-volt-label pattern one tier down:
   hairline instead of 2px, tag scale instead of heading scale. The block
   frame appears three times to the approach band's once, so it has to read
   as family without outranking the landmark. Also gives .block-frame the
   top edge its name implies. */
.block-kicker {
  display: inline-block;
  margin: 0 0 12px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  color: var(--volt);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.block-dek {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--block-body);
  font-weight: var(--weight-body);
  line-height: 1.55;
  color: var(--ink-2);
  letter-spacing: -.01em;
}
/* Audit · stacked findings list (not another column grid). */
.gaps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  max-width: 60ch;
  margin-top: 72px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}
.gap {
  padding: 0;
  border: 0;
}
.gap + .gap { margin-top: 26px; }
.gap h4 {
  font-size: clamp(18px, 1.4vw, 20px);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: 1.12;
  margin-bottom: 6px;
}
.gap p {
  margin: 0;
  font-size: var(--block-body);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 48ch;
}

/* Mindsets · stacked bands: title left, questions right. */
.duo {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 6vw, 80px);
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  border-bottom: 0;
}
.duo-card {
  display: grid;
  grid-template-columns: minmax(14ch, 0.95fr) minmax(0, 1.15fr);
  column-gap: clamp(40px, 6vw, 80px);
  align-items: start;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.duo-card.cost,
.duo-card.env { border: 0; }
/* Shares .fl-tag's exact pill treatment (component 23) rather than a
   second copy of the same values: both mark which uniform category an
   item belongs to, applied to every item in the set, unlike the solid
   "Ours" chip (10, 17) which calls out a single exception among options. */
.duo-tag {
  grid-column: 1;
  grid-row: 1;
  display: inline-block;
  width: max-content;
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--volt);
  background: color-mix(in srgb, var(--volt) 11%, transparent);
  padding: 3px 8px;
  border-radius: 5px;
}
.duo-card h3 {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  max-width: 14ch;
  font-size: clamp(26px, 2.6vw, 32px);
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: 1.06;
}
.duo-card ol {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  counter-reset: duo-q;
}
.duo-card li {
  display: grid;
  grid-template-columns: 1.35em minmax(0, 1fr);
  column-gap: 0.35em;
  align-items: baseline;
  font-size: var(--block-body);
  font-weight: var(--weight-body);
  line-height: 1.5;
  color: var(--ink-3);
  counter-increment: duo-q;
}
.duo-card li::before {
  content: counter(duo-q) ".";
  background: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: inherit;
}
.duo-card.cost li::before,
.duo-card.env li::before { background: none; color: inherit; }

/* Frame sits tight above its evidence block. */
.block-frame + .gaps,
.block-frame + .compare,
.block-frame + .duo {
  margin-top: 28px;
}

/* A sharp editorial interruption, not another content panel. */
.moment {
  max-width: none;
  padding: clamp(88px, 10vw, 144px) 32px;
  border: 0;
  background: var(--highlight);
}
.moment-text,
.moment-attr {
  width: min(100%, var(--max));
  margin-inline: auto;
}
.moment-text {
  max-width: var(--max);
  font-family: var(--serif);
  font-size: clamp(38px, 5.2vw, 72px);
  font-weight: 560;
  letter-spacing: var(--track-3);
  line-height: 1.04;
}
.moment-text mark {
  background: var(--ink);
  color: var(--highlight);
}
/* The citation is what makes the claim a verified external finding rather
   than a boast, so it cannot be the quietest thing in the loudest band. At
   13.5px under a 72px line it ran a 5.33x ratio, worse than the approach
   band (3.3x) or the tone strip (3.6x), both already promoted. Volt is
   unusable on the mint field, so this promotes on weight and scale. */
.moment-attr {
  margin-top: 40px;
  max-width: none;
  color: var(--ink);
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.008em;
  text-transform: none;
}

/* Pilot treatments · refined editorial index (A). */
/* Three rows shared across all columns (chip, title, body) so titles line
   up with titles and body copy lines up with body copy no matter how many
   lines a title takes. Columns stretch, so the dividers run the full
   height of the tallest one. */
.triage {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto 1fr;
  gap: clamp(36px, 5vw, 72px);
  margin-top: 72px;
  border: 0;
  align-items: stretch;
}
.triage-col {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.triage-col + .triage-col { padding-left: 0; border-left: 0; }
.triage-col.ours {
  border-top-color: var(--volt);
  background: transparent;
  box-shadow: none;
}
/* Shared label row so Ours chip doesn't push the title below peers. */
.triage-label {
  display: flex;
  align-items: center;
  min-height: 23px;
  margin-bottom: 14px;
}
.triage-col.ours .ours-chip { margin-bottom: 0; }
.triage-col h4 {
  font-size: 24px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 11px;
}
.triage-col p {
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 34ch;
}

/* Constraints · refined editorial index (A). */
.constraints {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 5vw, 72px);
  margin-top: 56px;
  border: 0;
  align-items: stretch;
}
.constraint {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
}
.constraint + .constraint { padding-left: 0; border-left: 0; }
.constraint h3 {
  font-size: 24px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 12px;
}
.constraint p {
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 40ch;
}
/* Shared baseline for implication lines; min gap above the rule via ::after. */
.constraint::after {
  content: "";
  flex: 1 1 auto;
  min-height: 28px;
  order: 1;
}
.constraint .forced {
  order: 2;
  margin-top: 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  color: var(--volt);
  font-size: clamp(15px, 1.05vw, 15.5px);
  font-weight: 600;
  line-height: 1.5;
  max-width: 38ch;
}
/* Row 2 of the constraints grid, under the second card. Auto-placement put
   it in column 1, under "No real-time meter data", but it is evidence for
   "Appliance disaggregation was unproven" and its "ask rather than assert"
   resolution, so it is pinned to that card's column. */
.constraint-proof {
  grid-column: 2;
  margin: 56px 0 0;
  max-width: 420px;
}
.constraint-proof img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  filter: drop-shadow(0 18px 28px rgba(7,16,31,0.12)) drop-shadow(0 4px 8px rgba(7,16,31,0.06));
}
.constraint-proof figcaption {
  margin: 14px 0 0;
  font-size: var(--label-size);
  line-height: 1.45;
  color: var(--ink-4);
  max-width: 36ch;
}

/* Design chapter · same rail/title language as other chapters; features = refined A. */
/* Feature list. Three zones per row: the screen name at the title's own
   scale, the title plus body, and a principle tag hard right that is
   optically centred on the first line of text. Rows size independently, so
   uneven copy length cannot leave dead cells the way a fixed grid does. */
.feature-list {
  margin-top: 56px;
  border-top: 1px solid var(--ink);
}
.fl-row {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) auto;
  column-gap: clamp(28px, 3.5vw, 56px);
  align-items: start;
  padding: 30px 0 32px;
  border-bottom: 1px solid var(--rule);
}
.fl-screen {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  color: var(--ink-3);
}
.fl-body h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 10px;
  max-width: 22ch;
}
.fl-body p {
  font-family: var(--sans);
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 56ch;
}
/* Borrows the title's line box so the tag centres on the first line rather
   than on the whole column. Tracks automatically if the title size changes. */
.fl-tagcol {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: calc(24px * var(--lh-title));
}
.fl-tag {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--volt);
  background: color-mix(in srgb, var(--volt) 11%, transparent);
  padding: 3px 8px;
  border-radius: 5px;
}

.features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, auto auto 1fr);
  gap: clamp(40px, 5vw, 64px) clamp(36px, 5vw, 72px);
  margin-top: 56px;
  border: 0;
  align-items: stretch;
}
.feature {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  padding: 20px 0 0;
  border: 0;
  border-top: 2px solid var(--rule);
  border-radius: 0;
  background: transparent;
}
.feature-id {
  margin-bottom: 14px;
  color: var(--ink-4);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  text-transform: none;
}
.feature h3 {
  font-family: var(--sans);
  font-size: 24px;
  font-weight: var(--weight-title);
  letter-spacing: var(--track-title);
  line-height: var(--lh-title);
  margin-bottom: 12px;
  max-width: 16ch;
}
/* Scoped to the body paragraph only. As `.feature p` this also matched
   `<p class="feature-id">` and, being one specificity point higher, silently
   overrode the eyebrow's size and colour so it rendered as body copy. */
.feature h3 ~ p {
  font-family: var(--sans);
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-3);
  max-width: 40ch;
}

/* Devices sit on one dark proof field inside the chapter. */
.phone-grid {
  gap: 28px 32px;
  width: 100vw;
  margin: 80px 0 0 calc(50% - 50vw);
  padding: 56px max(28px, calc((100vw - var(--max)) / 2)) 88px;
  overflow: hidden;
  background: var(--navy);
}
.phone-grid-kicker {
  grid-column: 1 / -1;
  margin: 0 0 28px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-transform: none;
}
.phone-tag {
  color: var(--accent);
  font-size: var(--label-size);
  font-weight: 600;
  letter-spacing: -.008em;
  text-transform: none;
}
.phone-cap {
  color: var(--fg-muted);
  font-size: var(--label-size);
  line-height: 1.45;
  max-width: 28ch;
}
/* Tone pull. Shows the Home message rather than retyping it: the product's
   voice is a rounded sans in volt on cyan, so setting it in the case
   study's own serif contradicted the point the component exists to make.
   Sits directly under the "One day" band so the close-up reads as a
   magnification of the Home phone still in view above, not a second
   appearance of the same screen. */
.tone-strip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  margin-top: 40px;
  border: 0;
  background: transparent;
}
/* Proportional rather than a fixed 380px column: the section's 168px rail
   leaves the content column narrow, and a fixed shot width squeezed the
   body copy to 270px at 1024. */
.tone-shot { margin: 0; max-width: 380px; }
.tone-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  filter: drop-shadow(0 18px 28px rgba(7,16,31,0.12)) drop-shadow(0 4px 8px rgba(7,16,31,0.06));
}
/* Same kicker as component 15, one tier below the approach band. */
.tone-label {
  display: inline-block;
  margin: 0 0 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--volt);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.tone-meta {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--block-body);
  line-height: var(--lh-body);
  color: var(--ink-2);
  letter-spacing: -.01em;
  max-width: 54ch;
}

/* Outcome ends with proof at poster scale — all sans (special band). */
.outcome {
  padding: clamp(120px, 13vw, 188px) 0;
  background: var(--navy);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
.outcome-inner {
  max-width: var(--max);
  margin: 0 auto;
  position: relative;
}
.outcome-eyebrow {
  margin: 0 0 28px;
  color: var(--accent);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.008em;
  text-transform: none;
}
.outcome h2 {
  max-width: 14ch;
  margin: 0 0 28px;
  font-family: var(--display-band);
  font-size: clamp(48px, 7vw, 98px);
  font-variation-settings: normal;
  font-weight: var(--weight-display);
  letter-spacing: var(--track-1);
  line-height: .98;
  color: var(--band-ink);
}
.outcome-deck {
  max-width: 540px;
  margin: 0 0 72px;
  font-family: var(--sans);
  font-size: var(--deck-size);
  line-height: var(--lh-body);
  color: var(--fg-muted);
}
.results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0 0 80px;
  padding: 0;
  border: 1px solid var(--band-line);
}
.result {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 0;
  padding: 36px 28px 40px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.result + .result {
  border-left: 1px solid var(--band-line-soft);
}
.result.star {
  background: var(--band-star);
  box-shadow: none;
}
.result.star .result-period,
.result.star .result-num { color: var(--accent); }
/* Out of flow so period labels share a baseline with the other results. */
.result-badge {
  position: absolute;
  top: 36px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 23px;
  margin: 0;
  padding: 0 9px;
  border-radius: 5px;
  background: var(--highlight);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 650;
  letter-spacing: var(--track-label);
  text-transform: none;
}
.result-period {
  margin: 0 0 20px;
  font-family: var(--sans);
  font-size: var(--label-size);
  font-weight: var(--weight-label);
  letter-spacing: var(--track-label);
  color: var(--fg-faint);
  text-transform: none;
}
.result-num {
  margin: 0 0 14px;
  font-family: var(--sans);
  font-size: clamp(58px, 7vw, 94px);
  font-weight: var(--weight-display);
  font-variation-settings: normal;
  font-feature-settings: "tnum";
  letter-spacing: var(--track-2);
  line-height: .95;
  color: var(--band-ink);
}
.result-desc {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--block-body);
  line-height: 1.55;
  color: var(--fg-faint);
  max-width: 28ch;
}
.outcome-close {
  max-width: 640px;
  margin: 0;
  font-family: var(--sans);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.35;
  color: var(--band-mut);
}
.outcome-close strong {
  color: var(--band-ink);
  font-weight: 600;
}
.outcome-close + .outcome-close { margin-top: 28px; }

.cs-next-label { color: var(--volt); font-size: var(--label-size); font-weight: var(--weight-label); letter-spacing: var(--track-label); text-transform: none; margin-bottom: 16px; }
.cs-next-title {
  font-family: var(--display-editorial);
  font-size: var(--next-size);
  font-variation-settings: normal;
  font-weight: var(--weight-display);
  letter-spacing: var(--track-3);
  line-height: 1.06;
}
.cs-next-company { font-family: var(--sans); font-size: 15.5px; font-weight: 500; color: var(--ink-3); }

/* ─── Eyebrow system ───
   Number chip = numeral only (1, not 01); word label sits beside, not inside.
   Word-only labels stay plain: sentence case, color, weight. */
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 23px;
  height: 23px;
  padding: 0 5px;
  margin-right: 10px;
  border-radius: 5px;
  background: var(--volt);
  color: #fff;
  font-size: 11.5px;
  font-weight: 650;
  font-feature-settings: "tnum";
  letter-spacing: 0;
  vertical-align: middle;
  transform: translateY(-1px);
}
.insight-well .chip,
.outcome .chip {
  background: var(--accent);
  color: var(--ink);
}
.insight-card-num {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ink-2);
}
/* Chip + word = one mint eyebrow on dark bands.
   Must beat `.insight-card p` (same element is a <p>). */
.insight-card p.insight-card-num { color: var(--accent); }
.insight-card-num .chip { margin-right: 0; }

/* ─── Micro details. Felt, not seen. ─── */
.reveal {
  transform: translateY(16px);
  transition-duration: .9s;
  transition-timing-function: var(--ease);
}
a:focus-visible {
  outline: 2px solid var(--volt);
  outline-offset: 3px;
  border-radius: 2px;
}
.stat-v, .result-num, .impact-value, .curve-hours { font-feature-settings: "tnum", "ss01"; }
.prose, .insight-body, .curve-note, .outcome-deck, .outcome-close {
  hanging-punctuation: first;
}
.masthead-title, .section-title, .insight-statement, .outcome h2 {
  -webkit-font-smoothing: antialiased;
  font-kerning: normal;
}
.phone-fig img, .showcase-media img, .hero-shot img {
  transform: translateZ(0);
}
.moment-text mark { padding: 0 .14em; }

@media (max-width: 1380px) {
  .masthead, .section, .approach, .outcome-inner {
    width: min(calc(100% - 64px), var(--max));
  }
}

@media (max-width: 960px) {
  .masthead-grid { grid-template-columns: 1fr; gap: 64px; }
  .masthead-impact { max-width: 420px; }
  .section {
    display: block;
    padding-block: 104px;
  }
  .section-body { min-width: 0; }
  .section-body > .showcase {
    width: auto;
    margin-left: 0;
  }
  .section-num {
    position: static;
    flex-direction: row;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 50px;
  }
  .approach {
    display: block;
    padding-block: 8px 80px;
  }
  .approach-inner { grid-column: auto; }
  .prose.cols-2 { grid-template-columns: 1fr; gap: 18px; }
  .insight-inner { width: min(calc(100% - 64px), var(--max)); }
  .showcase, .showcase.flip {
    grid-template-columns: minmax(180px, 238px) minmax(0, 420px);
    justify-content: center;
    align-items: center;
    text-align: left;
  }
  .compare, .triage, .results { grid-template-columns: 1fr; }
  /* Stacked, the shared rows have nothing to align to. */
  .triage-col { display: block; grid-row: auto; }
  .compare-pane { display: block; grid-row: auto; }
  /* Screen name and tag share the first line, body spans beneath. */
  .fl-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 14px;
    padding: 26px 0 28px;
  }
  .fl-screen { grid-column: 1; grid-row: 1; }
  .fl-tagcol { grid-column: 2; grid-row: 1; }
  .fl-body { grid-column: 1 / -1; grid-row: 2; }
  .duo-card {
    grid-template-columns: 1fr;
    row-gap: 18px;
  }
  .duo-card ol {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
  .triage-col + .triage-col { border-top: 2px solid var(--rule); }
  .triage-col.ours + .triage-col { border-top-color: var(--rule); }
  .triage-label { min-height: 0; margin-bottom: 10px; }
  .triage-col:not(.ours) .triage-label[aria-hidden="true"] { display: none; }
  .results {
    gap: 0;
    padding: 0;
    border: 1px solid var(--band-line);
  }
  .result {
    padding: 28px;
    border-bottom: 1px solid var(--band-line-soft);
  }
  .result:last-child { border-bottom: 0; }
  .result + .result { border-left: 0; }
  .result-badge { top: 28px; right: 28px; }
  .features { grid-template-columns: 1fr; gap: 36px; }
  .section-body > .phone-grid {
    width: auto;
    margin: 64px -32px 0;
    padding-inline: 32px;
  }
}

/* index.html nav collapses at 700px → padding 16px 24px */
@media (max-width: 700px) {
  :root { --nav-h: 60px; }
  .top { padding: 16px 24px; }
  .top-role { display: none; }
  /* Two columns leave the shot too small to read the message at this width. */
  .tone-strip { grid-template-columns: 1fr; gap: 28px; }
  .tone-shot { max-width: 420px; }
}

@media (max-width: 680px) {
  /* Thin the axis back to every 6 hours; 3-hourly labels crowd on a phone. */
  .curve-hours span:nth-child(even) { display: none; }
  .masthead, .section, .approach, .outcome-inner {
    width: calc(100% - 36px);
    padding-left: 0;
    padding-right: 0;
  }
  .masthead { padding-top: 60px; }
  .masthead-grid { padding-block: 48px; }
  .masthead-title { font-size: clamp(66px, 24vw, 102px); }
  .masthead-deck { margin-top: 36px; }
  .stat-strip { grid-template-columns: 1fr 1fr; }
  .stat-strip > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .hero-shot { padding: 0; }
  .hero-shot-cap { padding-inline: 18px; }
  .hero-shot-cap > span:last-child { display: none; }
  .section-title { font-size: 46px; }
  .curve-legend { display: none; }
  .curve-chart { height: 150px; }
  .insight-well { padding-block: 96px; }
  .insight-inner { width: calc(100% - 36px); }
  .insight-statement { font-size: 47px; }
  .insight-grid, .compare, .constraints, .triage, .features { grid-template-columns: 1fr; }
  .feature { display: block; grid-row: auto; }
  .insight-card + .insight-card { margin-top: 28px; }
  .showcase, .showcase.flip {
    grid-template-columns: 1fr;
    gap: 64px;
    align-items: start;
  }
  .showcase-media { width: min(76vw, 280px); max-width: 280px; margin-inline: auto; }
  .compare-pane.good { border-top: 2px solid var(--volt); }
  .duo-card {
    grid-template-columns: 1fr;
    row-gap: 16px;
  }
  .duo-card ol {
    grid-column: 1;
    grid-row: auto;
    align-self: start;
  }
  .constraints { grid-template-columns: 1fr; }
  .moment { padding-inline: 18px; }
  .moment-text { font-size: 38px; }
  .phone-grid.four,
  .phone-grid.three,
  .phone-grid.two {
    grid-template-columns: repeat(2, minmax(0, var(--shot-phone)));
    gap: 56px 14px;
  }
  .section-body > .phone-grid {
    width: auto;
    margin: 56px -18px 0;
    padding: 80px 18px 72px;
  }
  .evidence-proof {
    width: calc(100% - 36px);
  }
  .evidence-proof > .phone-grid {
    margin-top: 56px;
    padding: 80px 18px 72px;
  }
  /* Single column here, so the pinned column would be a phantom second one. */
  .constraint-proof { grid-column: 1; max-width: none; }
  .outcome h2 { font-size: 58px; }
  .cs-next { padding-inline: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .top-nav a,
  .bar,
  .cs-next,
  .cs-next-arrow { transition: none; }
}

/* Honesty note above the results grid (multi-arm pilot framing). */
.outcome-note {
  margin: 0 0 40px;
  max-width: 680px;
  font-family: var(--sans);
  font-size: var(--label-size);
  line-height: 1.55;
  color: var(--band-faint);
  letter-spacing: var(--track-label);
}

/* Showroom treatment: paper-2 cells inside one bordered container.
   data-theme="c" remains as a compatibility hook for the Peak integration;
   new pages opt in explicitly with data-treatment="showroom" so palette and
   component treatment are no longer coupled. */
/* Square corners. A 2px accent stroke cannot cover a 10px radius, so the
   corner is removed rather than the stroke thickened. */
:is([data-treatment="showroom"], [data-theme="c"]) .constraints,
:is([data-treatment="showroom"], [data-theme="c"]) .features,
:is([data-treatment="showroom"], [data-theme="c"]) .triage,
:is([data-treatment="showroom"], [data-theme="c"]) .compare {
  gap: 0;
  border: 1px solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  background: var(--paper-2);
}
:is([data-treatment="showroom"], [data-theme="c"]) .constraint,
:is([data-treatment="showroom"], [data-theme="c"]) .feature,
:is([data-treatment="showroom"], [data-theme="c"]) .triage-col,
:is([data-treatment="showroom"], [data-theme="c"]) .compare-pane {
  border-top: none;
  padding: 28px;
  background: var(--paper-2);
}
:is([data-treatment="showroom"], [data-theme="c"]) .constraint + .constraint,
:is([data-treatment="showroom"], [data-theme="c"]) .feature + .feature,
:is([data-treatment="showroom"], [data-theme="c"]) .triage-col + .triage-col,
:is([data-treatment="showroom"], [data-theme="c"]) .compare-pane + .compare-pane {
  border-left: 1px solid var(--rule);
}
:is([data-treatment="showroom"], [data-theme="c"]) .features .feature:nth-child(n+3) { border-top: 1px solid var(--rule); }
:is([data-treatment="showroom"], [data-theme="c"]) .triage-col.ours,
:is([data-treatment="showroom"], [data-theme="c"]) .compare-pane.good { box-shadow: inset 0 2px 0 var(--volt); border-top: none; }
:is([data-treatment="showroom"], [data-theme="c"]) .stat-strip {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--paper-2);
}
:is([data-treatment="showroom"], [data-theme="c"]) .stat-strip > div { padding: 20px 24px; }
:is([data-treatment="showroom"], [data-theme="c"]) .stat-strip > div + div { padding-left: 24px; }

@media (max-width: 960px) {
  :is([data-treatment="showroom"], [data-theme="c"]) .constraint + .constraint,
  :is([data-treatment="showroom"], [data-theme="c"]) .feature + .feature,
  :is([data-treatment="showroom"], [data-theme="c"]) .triage-col + .triage-col,
  :is([data-treatment="showroom"], [data-theme="c"]) .compare-pane + .compare-pane {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }

  :is([data-treatment="showroom"], [data-theme="c"]) .features .feature:nth-child(n+3) {
    border-top: 1px solid var(--rule);
  }
}