/* ==========================================================================
   Brand faces. This page keeps its own stylesheet rather than consuming
   packages/theme, so the @font-face blocks are repeated here; the files and
   their licence are the same ones theme.css serves from /fonts/.

   Two faces against a four-weight scale, so the ranges stop the browser
   synthesising a weight. See packages/theme/theme.css for the full note.
   ========================================================================== */
@font-face {
  font-family: 'Perfectly Nineties';
  src: url('/fonts/PerfectlyNineties-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('/fonts/AlteHaasGrotesk-Regular.woff2') format('woff2');
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Alte Haas Grotesk';
  src: url('/fonts/AlteHaasGrotesk-Bold.woff2') format('woff2');
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

/* =============================================================================
   The Mu Index — Red Hot Chili Peppers walkthrough
   Warm paper, hairline rule work, serif numerals. No gradients, no shadows,
   no external fonts, one restrained accent reserved for interactive state.
   ========================================================================== */

:root {
  /* Colour comes from packages/theme. This page keeps its own token names so
     the rest of the stylesheet is untouched, but every value is now a brand
     token rather than the editorial cream-and-brown palette it arrived with.

     --paper and --ink are deliberately absent: theme.css defines both, with
     the same meaning (Silver Gray page, Mute Black text), so they flow
     through. Redefining them here would also be circular — theme.css derives
     --surface-page from --paper. */
  --ink-soft:    var(--text-secondary);
  --ink-mute:    var(--text-tertiary);
  --rule:        var(--border-default);
  --rule-soft:   var(--border-subtle);
  --accent:      var(--accent-interactive);   /* was #8A5A3C, a brown */
  --accent-tint: var(--blue-wash);
  /* Baseline chart fill only; the brand has no token this faint, so it stays
     a literal — derived from Mute Black rather than the old #1A1A1A. */
  --ink-tint:    rgba(31, 32, 31, 0.055);

  /* Matches the site: Perfectly Nineties for display, Alte Haas Grotesk for
     body, Helvetica for the wordmark. System stacks stay as fallbacks so the
     page still reads if a face fails to load. */
  --serif: 'Perfectly Nineties', ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, "Hoefler Text", "Times New Roman", Georgia, serif;
  --sans: 'Alte Haas Grotesk', ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --logo: 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --page: 70rem;
  --measure: 35.25rem;  /* the reading column: about 75 characters a line at 17px, measured (the block at the end) */
  --gutter: clamp(1.25rem, 5vw, 4rem);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(1rem, 0.97rem + 0.18vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .finding__figure, .control__value, .readout dd, .compare td, .venn__mark {
  font-family: var(--serif);
  font-variant-numeric: lining-nums tabular-nums;
}

h1, h2, h3 { font-weight: 400; letter-spacing: -0.008em; }

p { margin: 0 0 1.05em; }
:where(p, li):last-child { margin-bottom: 0; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
/* Not on the shared .btn links (the nav's and the closing Get Started): this
   outranks .btn-primary's label colour and turned it blue on blue. */
a:not(.btn):hover { color: var(--accent); }

em { font-style: italic; }
strong { font-weight: 600; }
code {
  font-family: var(--sans);   /* the brand's body face, not a monospace */
  font-size: 0.88em;
  background: var(--accent-tint);
  padding: 0.1em 0.35em;
  border-radius: 2px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 1px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

.skip-link {
  position: absolute; left: var(--gutter); top: 0.5rem;
  transform: translateY(-200%);
  background: var(--paper); border: 1px solid var(--ink);
  padding: 0.5rem 0.9rem; font-size: 0.85rem; z-index: 10;
}
.skip-link:focus { transform: none; }

/* --- masthead ------------------------------------------------------------ */

.masthead {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  max-width: var(--page); margin: 0 auto;
  padding: 1.5rem var(--gutter);
  border-bottom: 1px solid var(--rule);
}
.masthead p { margin: 0; }
.masthead__brand { display: flex; align-items: baseline; gap: 0.6rem; }
.masthead__name { font-size: 0.9rem; letter-spacing: 0.02em; }
.masthead__status {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute);
}

/* --- page frame ---------------------------------------------------------- */

main { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }

.report-head { padding: clamp(3rem, 9vw, 6.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.eyebrow {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-mute); margin-bottom: 1.6rem;
}
h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.55rem);
  line-height: 1.07; margin: 0 0 1.2rem; max-width: 20ch;
}
.dek {
  font-family: var(--serif); font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
  line-height: 1.55; color: var(--ink-soft); max-width: none; margin: 0;
}

main > article > section {
  border-top: 1px solid var(--rule);
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

h2 {
  font-size: clamp(1.45rem, 1.2rem + 1.1vw, 2.05rem);
  margin: 0 0 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem;
}
.section-number {
  font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--ink-mute); flex: 0 0 auto;
}

.report-prose { max-width: var(--measure); }
.report-prose p + p { margin-top: 1.05em; }

.tag {
  font-family: var(--sans); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--ink-mute); border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.2em 0.5em; white-space: nowrap; align-self: center;
}
.tag--quiet { border-color: transparent; padding-left: 0; padding-right: 0; }

/* --- headline findings --------------------------------------------------- */

.findings-layout {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.findings { margin: 0; }
.finding { border-top: 1px solid var(--rule); padding: 1.1rem 0 1.3rem; }
.finding:first-child { border-top-color: var(--ink); }
.finding dd { margin: 0; }
.finding__label {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-mute);
}
.finding__figure {
  font-size: clamp(2.4rem, 1.6rem + 3.4vw, 3.6rem); line-height: 1; margin: 0.35rem 0 0.5rem;
}
.finding__note { font-size: 0.86rem; color: var(--ink-soft); max-width: 30ch; }
.bridge {
  margin-top: 1.8rem; font-family: var(--serif); font-size: 1.08rem; color: var(--ink-soft);
  max-width: none;
}

.caveats { border: 1px solid var(--rule); padding: clamp(1.2rem, 3vw, 1.75rem); }
.caveats h3 {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em; margin: 0 0 1.2rem; color: var(--ink);
}
.caveats dl { margin: 0; }
.caveats dt { font-size: 0.82rem; font-weight: 600; margin-bottom: 0.15rem; }
.caveats dd {
  margin: 0 0 1.05rem; font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft);
}
.caveats dd:last-child { margin-bottom: 0; }

/* --- pillars ------------------------------------------------------------- */

.venn { margin: clamp(2rem, 5vw, 3.5rem) auto; max-width: 30rem; text-align: center; }
.venn__svg { display: block; width: 100%; height: auto; overflow: visible; }
.venn__lines circle { fill: none; stroke: var(--ink); stroke-width: 2.2; }
.venn__label { font-family: var(--sans); font-size: 17px; fill: var(--ink); }
.venn__mark { font-family: var(--logo); font-size: 30px; font-weight: 500; fill: var(--ink); }
.venn figcaption {
  font-size: 0.83rem; color: var(--ink-mute); margin-top: 1rem; max-width: 30rem;
  margin-inline: auto; text-align: center;
}

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.75rem, 4vw, 3rem); }
.pillar { border-top: 1px solid var(--ink); padding-top: 1rem; }
.pillar h3 { font-size: 1.18rem; margin: 0 0 0.7rem; }
.pillar p { font-size: 0.93rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }

/* --- walkthrough steps --------------------------------------------------- */

.notice {
  border: 1px solid var(--accent); border-left-width: 2px;
  padding: 1rem 1.1rem; font-size: 0.9rem; color: var(--ink-soft);
  max-width: none; margin: 2rem 0 0;
}

.step { margin-top: clamp(2.5rem, 6vw, 4rem); }
.step__head { border-top: 1px solid var(--ink); padding-top: 1rem; margin-bottom: 2rem; }
.step__index {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ink-mute); margin: 0 0 0.5rem;
}
.step__head h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin: 0; }
.glyph { color: var(--accent); margin-right: 0.3em; }

.step__grid {   /* one column: the chart panel lines up under the step's heading */
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 2rem; align-items: start;
}
.step__prose { max-width: none; }
.step__prose p { margin: 0; }   /* the report's body size and paragraph spacing, as .report-prose */
.step__prose p + p { margin-top: 1.05em; }
.step__prose--after { margin-top: 2rem; }   /* what the chart shows, under it: the same gap as above the panel */
.step__key { color: var(--ink-mute); font-size: 0.88rem !important; }

.aside { margin-top: 1.5rem; border-top: 1px solid var(--rule-soft); padding-top: 0.9rem; }
.aside summary {
  cursor: pointer; font-size: 0.82rem; letter-spacing: 0.02em; color: var(--ink-soft);
  list-style: none; display: flex; align-items: baseline; gap: 0.5rem;
}
.aside summary::-webkit-details-marker { display: none; }
.aside summary::before { content: "+"; color: var(--accent); font-size: 0.95rem; line-height: 1; }
.aside[open] summary::before { content: "\2212"; }
.aside summary:hover { color: var(--ink); }
.aside p {
  margin: 0.9rem 0 0; font-size: 0.89rem; line-height: 1.6; color: var(--ink-soft);
  padding-left: 1.1rem;
}

.step__panel { border-top: 1px solid var(--rule); padding: clamp(1rem, 2.5vw, 1.4rem) 0 0; }   /* a rule above, no box: the chart starts on the heading's line */

.chart-figure { margin: 0; }
.chart-figure__title {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ink); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: baseline;
  margin-bottom: 0.9rem;
}
.chart-figure__title span { text-transform: none; letter-spacing: 0.02em; color: var(--ink-mute); font-size: 0.78rem; }
.chart { width: 100%; min-height: 180px; }
.chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Dashed grid on both axes; the zero line stays solid because it is the one
   gridline that carries meaning rather than just aiding the eye. */
.chart__grid { stroke: var(--rule-soft); stroke-dasharray: 2 4; }
.chart__grid--base { stroke: var(--rule); stroke-dasharray: none; }
.chart__tick, .chart__axis-label { font-family: var(--sans); font-size: 11px; fill: var(--ink-mute); }
.chart__axis-label { letter-spacing: 0.06em; font-size: 10px; }

/* Series colour is a fixed vocabulary: ink is always ours, rust is always the
   reader's. A line never changes what it means, only how loudly it says it. */
.chart__line { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.chart__line--baseline  { stroke: var(--mu-very-green); stroke-width: 2.4; }
.chart__line--primary   { stroke: var(--mu-electric-blue); stroke-width: 2.4; }
.chart__line--reference { stroke: var(--mu-very-green); stroke-width: 1.4; stroke-dasharray: 5 4; opacity: 0.6; }

.chart__area--baseline { fill: var(--green-wash); }
.chart__area--primary  { fill: var(--blue-wash); }

/* Marked data points: one per forecast year, ringed in paper so they stay
   legible where the line doubles back on the grid. */
.chart__dot { stroke: var(--paper); stroke-width: 1.8; }
.chart__dot--baseline { fill: var(--mu-very-green); }
.chart__dot--primary  { fill: var(--mu-electric-blue); }

.chart-figure__legend {
  display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0.7rem 0 0;
  font-size: 0.76rem; color: var(--ink-soft);
}
.key { display: inline-flex; align-items: center; gap: 0.45rem; }
.key::before { content: ""; width: 18px; height: 0; flex: 0 0 auto; }
.key--baseline::before { border-top: 2px solid var(--mu-very-green); }
.key--primary::before { border-top: 2px solid var(--mu-electric-blue); }
.key--reference::before { border-top: 2px dashed var(--green-edge); }

/* The legend describes what is on the chart, never what could be. Until the
   reader moves a control there is only our baseline to name. */
.chart-figure [data-legend="engaged"] { display: none; }
.chart-figure.is-engaged [data-legend="engaged"] { display: inline-flex; }
.chart-figure.is-engaged [data-legend="rest"] { display: none; }

/* --- controls ------------------------------------------------------------ */

.control { margin-top: 1.6rem; border-top: 1px solid var(--rule); padding-top: 1.1rem; }
.control__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.control__head label { font-size: 0.86rem; color: var(--ink-soft); }
.control__value { font-size: 1.45rem; color: var(--ink); }
.control__scale {
  display: flex; justify-content: space-between; gap: 0.5rem;
  font-size: 0.72rem; color: var(--ink-mute); margin: 0.35rem 0 0;
}
.control__anchor { color: var(--ink-soft); }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; margin: 0.9rem 0 0; background: transparent; cursor: pointer;
  color: inherit;   /* not the browser's form-field black: only the track and thumb paint, in brand colours */
  height: 26px;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: rgba(31, 32, 31, 0.28); border-radius: 2px;
}
input[type="range"]::-moz-range-track {
  height: 2px; background: rgba(31, 32, 31, 0.28); border-radius: 2px;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -10px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease;
}
input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--paper); border: 1.5px solid var(--ink);
  transition: border-color 120ms ease, background-color 120ms ease;
}
input[type="range"]:hover::-webkit-slider-thumb,
input[type="range"]:active::-webkit-slider-thumb { border-color: var(--accent); background: var(--accent-tint); }
input[type="range"]:hover::-moz-range-thumb,
input[type="range"]:active::-moz-range-thumb { border-color: var(--accent); background: var(--accent-tint); }
input[type="range"]:focus { outline: none; }
input[type="range"]:focus-visible::-webkit-slider-thumb {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}
input[type="range"]:focus-visible::-moz-range-thumb {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint);
}

.readouts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem; margin: 1.6rem 0 0;
}
.readouts--triple { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* each panel: the slider, then the figures, then the chart */
.step__panel > .control:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.step__panel > .readouts { margin: 1.6rem 0; }
.readout { border-top: 1px solid var(--rule); padding-top: 0.6rem; }
.readout dt {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.11em; color: var(--ink-mute);
  margin-bottom: 0.2rem;
}
.readout dd { margin: 0; font-size: 1.4rem; line-height: 1.15; }
.readout--lead { border-top-color: var(--ink); }
.readout--lead dd { font-size: 1.75rem; }

.takeaway {
  margin: 2.2rem 0 0; border-left: 2px solid var(--accent); padding-left: 1.1rem;
  font-family: var(--serif); font-size: 1.08rem; line-height: 1.55; max-width: none;
}

/* --- comparison ---------------------------------------------------------- */

.comparison { margin-top: clamp(3rem, 7vw, 4.5rem); }
.comparison h3 {
  font-size: 1.2rem; margin: 0 0 1.2rem; border-top: 1px solid var(--ink); padding-top: 1rem;
}
.table-scroll { overflow-x: auto; }
.compare { width: 100%; border-collapse: collapse; min-width: 34rem; }
.compare th, .compare td { text-align: right; padding: 0.75rem 0.6rem; border-bottom: 1px solid var(--rule-soft); }
.compare th:first-child, .compare td:first-child { text-align: left; padding-left: 0; }
.compare td:last-child, .compare th:last-child { padding-right: 0; }
.compare thead th {
  font-family: var(--sans); font-size: 0.68rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute);
  border-bottom: 1px solid var(--ink);
}
.compare tbody th {
  font-family: var(--sans); font-size: 0.88rem; font-weight: 500; white-space: nowrap;
}
.compare td { font-size: 1.02rem; white-space: nowrap; }
.compare__total th, .compare__total td {
  border-top: 1px solid var(--ink); border-bottom: none; padding-top: 0.9rem; font-size: 1.15rem;
}
.compare tr.is-moved td:nth-of-type(1) { color: var(--accent); }
.compare tr.is-moved td:last-child { color: var(--accent); }
.derived {
  font-family: var(--sans); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-mute); margin-left: 0.5rem;
}

.comparison__foot {
  display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start;
  margin-top: 1.5rem;
}
.footnote { font-size: 0.8rem; line-height: 1.55; color: var(--ink-mute); max-width: none; margin: 0; flex: 1 1 22rem; }

.button {
  font-family: var(--sans); font-size: 0.83rem; letter-spacing: 0.02em;
  /* Pill and semibold, so these read as the same control as the rest of the
     site rather than as a document's own buttons. */
  padding: 0.65rem 1.1rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill); font-weight: var(--weight-semibold);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease,
              transform var(--duration-fast) var(--ease-out);
  flex: 0 0 auto;
}
.button:hover:not(:disabled) { background: var(--ink); color: var(--paper); transform: translateY(-1px); }
.button:disabled { opacity: 0.35; cursor: default; }
.button--solid { background: var(--accent-interactive); color: var(--mu-silver-gray); border-color: transparent; }
.button--solid:hover:not(:disabled) {
  /* Must restate both: this element carries .button too, whose hover turns it
     Mute Black with a light label. The primary stays blue and lifts, as
     .btn-primary does site-wide. */
  background: var(--accent-interactive);
  color: var(--mu-silver-gray);
  transform: translateY(-1px);
}

/* --- valuation report stubs ---------------------------------------------------- */

.stubs {
  list-style: none; padding: 0; margin: 2rem 0 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem 2.5rem;
}
.stubs li { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.stubs h3 {
  font-size: 1.02rem; margin: 0 0 0.4rem;
  display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: baseline;
}
.stubs p { font-size: 0.87rem; color: var(--ink-mute); margin: 0; }

/* --- what we measured ---------------------------------------------------- */

.build {
  margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0; border-top: 1px solid var(--ink);
}
.build div { padding: 0.9rem 1rem 1rem 0; border-bottom: 1px solid var(--rule); }
.build div:last-child { background: var(--mu-neon-yellow); padding-left: 0.75rem; }   /* full Neon Yellow, not the 18% wash */
.build dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.35rem; }
.build dd { margin: 0; font-family: var(--serif); font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.1; white-space: nowrap; }

/* --- where the value sits ------------------------------------------------- */

.value-sits { margin-top: 2.5rem; border-top: 1px solid var(--ink); padding-top: 1.1rem; }
.value-sits h3 { font-size: 1.15rem; margin: 0 0 0.4rem; }
.value-sits__lede { max-width: var(--measure); color: var(--ink-soft); margin: 0 0 1.4rem; }
.value-bars { list-style: none; padding: 0; margin: 0; }
.value-bars__row {
  display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr 3rem 4.5rem;
  gap: 0 1rem; align-items: center;
  padding: 0.45rem 0; border-top: 1px solid var(--rule-soft);
  font-size: 0.9rem;
}
.value-bars__track { height: 0.6rem; background: var(--ink-tint); }
.value-bars__bar { display: block; height: 100%; background: var(--ink); }
.value-bars__share, .value-bars__value { text-align: right; font-variant-numeric: tabular-nums; }
.value-bars__value { color: var(--ink-soft); }
.value-bars__row--rest { border-top-color: var(--rule); color: var(--ink-soft); }
.value-bars__row--rest .value-bars__bar { background: var(--ink-mute); }
.value-sits__note { font-size: 0.8rem; color: var(--ink-mute); margin: 0.9rem 0 0; }
.value-sits__download { font-size: 0.85rem; margin: 0.5rem 0 0; }
.value-sits__download a { color: var(--accent); }

@media (max-width: 34rem) {
  .value-bars__row { grid-template-columns: 1fr 3rem 4.5rem; }
  .value-bars__track { grid-column: 1 / -1; grid-row: 2; margin-top: 0.3rem; }
}

/* --- invitation ---------------------------------------------------------- */

.invite { margin-top: 2rem; max-width: 34rem; }
.invite .footnote { margin-top: 0.9rem; }

/* --- disclaimer ---------------------------------------------------------- */

/* Closes the report. It used to sit in a page-specific footer; the footer is
   now the shared one, and this note stays with the figures it qualifies. */
main > article > .report-disclaimer {
  border-top: 1px solid var(--rule);
  padding-top: 1.5rem;
  max-width: none;
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--ink-mute);
}

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

@media (max-width: 62rem) {
  .findings-layout { grid-template-columns: minmax(0, 1fr); }
  .pillars { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .step__grid { grid-template-columns: minmax(0, 1fr); }
  .step__panel { order: 2; }
}

@media (max-width: 34rem) {
  .readouts, .readouts--triple { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .readout { margin-top: 0.85rem; }
  .compare { min-width: 30rem; }
  .masthead { flex-wrap: wrap; gap: 0.35rem; }
  .step__panel { padding: 0.9rem 0 0; }
}

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

@media print {
  :root { --paper: #fff; }
  body { font-size: 10.5pt; }
  .masthead__status, .skip-link, .notice, input[type="range"], .button, .invite .btn { display: none; }
  main > article > section, .step { break-inside: avoid; }
  .step__grid, .findings-layout, .pillars { grid-template-columns: minmax(0, 1fr); }
}

/* The wordmark links back to the marketing site. Inherit, so the masthead
   reads the same as it did when it was static text. */
.masthead__brand a { color: inherit; text-decoration: none; }
.masthead__brand a:hover { text-decoration: underline; }


/* === RHCP case-study layout ============================================== */

/* where the value sits — compact supporting visual */
.value-sits { margin-top: 1.5rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; max-width: none; }
.value-sits .value-sits__title { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.5rem; font-weight: 700; }   /* an all-caps label: Alte Haas Bold (brand guide) */
.value-bars__row { grid-template-columns: minmax(7rem, 10rem) 1fr 2.5rem 4rem; padding: 0.28rem 0; font-size: 0.82rem; border-top: none; }
.value-bars__track { height: 0.35rem; background: var(--ink-tint); }
.value-bars__bar { background: var(--mu-very-green); }
.value-bars__row--rest { border-top: 1px solid var(--rule-soft); margin-top: 0.2rem; padding-top: 0.45rem; }
.value-bars__row--rest .value-bars__bar { background: var(--ink-mute); opacity: 0.5; }
.value-sits__note { font-size: 0.76rem; margin-top: 0.7rem; }
.value-sits__note a { color: var(--accent-interactive-text); }

/* from streams to cash flow */
.steps-math { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--ink); counter-reset: step; }
.steps-math li { padding: 1rem 1.25rem 1.1rem 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.3rem; counter-increment: step; }
.steps-math li + li { padding-left: 1.25rem; border-left: 1px solid var(--rule-soft); }
.steps-math li:last-child { background: var(--green-wash); }
.steps-math__label { font-size: 0.78rem; color: var(--ink-soft); }
.steps-math__label::before { content: counter(step) ". "; color: var(--ink-mute); }
.steps-math__figure { font-family: var(--serif); font-size: 2rem; line-height: 1.1; }
.steps-math__note { font-size: 0.8rem; color: var(--ink-mute); }

/* benchmark seed */
.seed { max-width: var(--measure); margin: 1.5rem 0 0; padding: 0.8rem 1rem; border-left: 2px solid var(--mu-electric-blue); background: var(--blue-wash); font-size: 0.9rem; }

/* scope and caveats */
.scope-layout { display: grid; gap: 1.5rem; }
.caveats-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 0; counter-reset: caveat; }
.caveats-list .caveat { counter-increment: caveat; display: flex; flex-direction: column; gap: 0.45rem; padding: 1rem 1.1rem 1.15rem; border: 1px solid var(--rule); border-top: 3px solid var(--ink); background: var(--paper-raised); }
.caveats-list .caveat::before { content: counter(caveat, decimal-leading-zero); font-family: var(--serif); font-size: 2rem; line-height: 1; color: var(--ink); }
.caveats-list .caveat dt { margin: 0; font-weight: 700; }
.caveats-list .caveat dd { margin: 0; }
.caveats-list { margin: 0; }
.caveats-list dt { font-size: 0.86rem; font-weight: 600; margin-bottom: 0.15rem; }
.caveats-list dd { margin: 0 0 1rem; font-size: 0.86rem; color: var(--ink-soft); }
.caveats-list .caveat--key { color: var(--green-ink); }
.resale { border: 1px solid var(--green-edge); background: var(--green-wash); padding: clamp(1rem, 3vw, 1.4rem); }
.resale h3 { font-size: 1.05rem; margin: 0 0 0.4rem; }
.resale > p { font-size: 0.9rem; color: var(--ink-soft); margin: 0 0 1rem; max-width: none; }
.payback { margin: 0; max-width: 40rem; }
.payback svg { display: block; width: 100%; height: auto; }
.payback__grid { stroke: var(--rule-soft); stroke-dasharray: 2 4; }
.payback__tick { font-family: var(--sans); font-size: 10px; fill: var(--ink-mute); }
.payback__bar { fill: var(--ink-mute); opacity: 0.35; }
.payback__bar--late { fill: var(--ink-mute); opacity: 0.35; }
.payback__price { stroke-width: 1.5; }
.payback__price--ours { stroke: var(--green-ink); }
.payback__price--alt { stroke: var(--mu-electric-blue); stroke-dasharray: 5 4; }
.payback__label { font-family: var(--sans); font-size: 11px; }
.payback__label--ours { fill: var(--green-ink); }
.payback__label--alt { fill: var(--blue-ink); }

/* walkthrough payoff */
.payoff { margin-top: 2rem; padding: 1.2rem 1.4rem; border-top: 2px solid var(--mu-electric-blue); background: var(--blue-wash); }
.payoff__headline { font-family: var(--serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem); line-height: 1.25; margin: 0 0 0.4rem; }
.payoff__driver { margin: 0; color: var(--ink-soft); max-width: none; }

/* reported price */
.reported { max-width: none; }
.reported__figures { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--ink); margin-bottom: 1rem; }
.reported__figures div { padding: 0.9rem 0 1rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 0.3rem; }
.reported__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.reported__figure { font-family: var(--serif); font-size: 2.2rem; line-height: 1.1; }
.reported p { color: var(--ink-soft); }

/* benchmark payoff */
.bench { margin: 1.25rem 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; max-width: none; }   /* trend and volatility side by side; stacked below 48rem */
.bench div { border-top: 1px solid var(--ink); padding-top: 0.8rem; }
.bench dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 0.35rem; }
.bench dd { margin: 0; }
.bench__ours { font-family: var(--serif); font-size: 1.5rem; display: block; }
.bench__vs { font-size: 0.82rem; color: var(--ink-mute); display: block; margin-bottom: 0.4rem; }
.bench__read { font-size: 0.86rem; color: var(--ink-soft); }
.bench__scale { display: grid; gap: 0.3rem; margin: 0.55rem 0 0.6rem; }   /* RHCP vs the mu 500; bar widths hand-set in index.html */
.bench__row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; color: var(--ink-mute); }
.bench__bar { height: 6px; background: var(--ink-mute); opacity: 0.45; border-radius: 3px; flex: none; }
.bench__row--ours .bench__bar { background: var(--ink); opacity: 1; }
.bench__row--ours .bench__label { color: var(--ink); }
.bench__label { white-space: nowrap; }

/* explainer: a highlighted aside inside the reading column (Warner section) */
.explainer { max-width: var(--measure); margin: 1.75rem auto; padding: 1.1rem 1.25rem; background: var(--paper-raised); border: 1px solid var(--ink); border-left: 4px solid var(--mu-neon-yellow); border-radius: var(--radius-md, 0.75rem); font-size: 0.92rem; }
.explainer p { margin: 0 0 0.75em; }
.explainer__title { font-family: var(--serif); font-size: 1.15rem; line-height: 1.3; }
.explainer .explainer__note { margin: 0; font-size: 0.8rem; color: var(--ink-mute); }

/* simulated deal economics (Warner section) */
#deal > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.deal-label { display: inline-block; padding: 0.15rem 0.5rem; background: var(--mu-neon-yellow); color: var(--mu-mute-black); font-size: 0.8rem; font-weight: 700; border-radius: 4px; }
.deal-box { margin-top: 1.75rem; margin-bottom: 1.75rem; padding: 1rem 1.25rem; background: var(--paper-raised); border: 1px solid var(--ink); border-radius: var(--radius-md, 0.75rem); font-size: 0.86rem; }
.deal-box__title { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 0.5rem; }
.deal-box__foot { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--ink-mute); }
.deal-assumptions { margin: 0; }
.deal-assumptions div { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) 5.5rem; gap: 0.75rem; padding: 0.4rem 0; border-top: 1px solid var(--ink-line, rgba(31, 32, 31, 0.16)); align-items: baseline; }
.deal-assumptions dd { margin: 0; color: var(--ink-soft); }
.deal-tag { justify-self: end; font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 4px; border: 1px solid currentColor; white-space: nowrap; }
.deal-tag--reported { color: var(--green-ink); }
.deal-tag--model { color: var(--blue-ink); }
.deal-tag--assumed { color: var(--ink-mute); }
.deal-toggle { display: flex; gap: 0; border: 1px solid var(--ink); border-radius: 999px; padding: 3px; width: fit-content; margin-top: 0; }
.deal-toggle button { font: inherit; font-size: 0.86rem; background: none; border: 0; padding: 0.35rem 1rem; border-radius: 999px; cursor: pointer; color: var(--ink); }
.deal-toggle button[aria-pressed="true"] { background: var(--mu-mute-black); color: var(--mu-silver-gray); }
.deal-toggle button:hover:not([aria-pressed="true"]) { color: var(--blue-ink); }
.deal-note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 0.6rem; }
.deal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; margin-bottom: 1.75rem; }
.deal-stats div { border-top: 1px solid var(--ink); padding-top: 0.6rem; }
.deal-stats dt { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }
.deal-stats dd { margin: 0.2rem 0 0; font-family: var(--serif); font-size: 1.35rem; }
.deal-chart { margin-top: 0; margin-bottom: 1.75rem; }
.deal-chart svg { display: block; overflow: visible; }
.deal-chart__zero { stroke: var(--ink); stroke-width: 1; }
.deal-chart__marker { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; }
.deal-chart__latest { stroke: var(--ink-mute); stroke-width: 1; stroke-dasharray: 2 4; }
.deal-chart__line { fill: none; stroke: var(--ink-mute); stroke-width: 1.25; opacity: 0.45; }
.deal-chart__line.is-active { stroke: var(--mu-very-green); stroke-width: 2; opacity: 1; }
.deal-chart__axis { font-size: 11px; fill: var(--ink-mute); }
.deal-chart__tag { font-size: 11px; fill: var(--ink-mute); opacity: 0.6; }
.deal-chart__tag.is-active { fill: var(--green-ink); opacity: 1; font-weight: 700; }
.deal-table { width: 100%; border-collapse: collapse; font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.deal-table th, .deal-table td { padding: 0.35rem 0.4rem; text-align: right; border-bottom: 1px solid var(--ink-line, rgba(31, 32, 31, 0.16)); white-space: nowrap; }
.deal-table th:first-child { text-align: left; }
.deal-table thead th { font-weight: 600; color: var(--ink-mute); border-bottom-color: var(--ink); }
.deal-table + * , #deal .table-scroll { margin-bottom: 1.75rem; }
@media (max-width: 40rem) {
  .deal-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deal-assumptions div { grid-template-columns: minmax(0, 1fr) auto; }
  .deal-assumptions dd:not(.deal-tag) { grid-column: 1; }
  .deal-tag { grid-row: 1; grid-column: 2; }
}

.deal-toggles { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.deal-sale { margin-top: 0; margin-bottom: 1.75rem; padding: 1rem 1.25rem; border: 1px solid var(--ink); border-radius: var(--radius-md, 0.75rem); background: var(--paper-raised); }
.deal-sale__title { font-family: var(--serif); font-size: 1.1rem; margin: 0 0 0.5rem; }
.deal-sale__steps { margin: 0; font-variant-numeric: tabular-nums; }
.deal-sale__steps div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.4rem 0; border-top: 1px solid var(--ink-line, rgba(31, 32, 31, 0.16)); }
.deal-sale__steps dd { margin: 0; white-space: nowrap; }
.deal-sale__sub { font-weight: 600; }
.deal-sale__total { border-top: 1px solid var(--ink) !important; font-weight: 700; }
.deal-sale__total dd { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; color: var(--green-ink); }
.deal-sale__foot { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-mute); }

/* fund timeline (Warner section): dated rows inside the reading column */
.timeline { max-width: var(--measure); margin: 1.75rem auto; border-bottom: 1px solid var(--ink-line, rgba(31, 32, 31, 0.16)); }
.timeline div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-top: 1px solid var(--ink-line, rgba(31, 32, 31, 0.16)); }
.timeline div:first-child { border-top-color: var(--ink); }
.timeline dt { font-family: var(--serif); font-size: 1.1rem; line-height: 1.4; }
.timeline dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 40rem) { .timeline div { grid-template-columns: 1fr; gap: 0.2rem; } }

/* call to action */
.cta { margin-top: 2.5rem; padding: clamp(1.4rem, 4vw, 2.2rem); background: var(--ink); color: var(--paper); max-width: none; }
.cta h3 { color: inherit; font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 0.6rem; }
.cta p { color: inherit; opacity: 0.85; margin: 0 0 1.2rem; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin: 0; opacity: 1 !important; }
.cta__actions .button--solid { color: var(--mu-silver-gray); }
.cta__login { color: inherit; font-size: 0.9rem; }

/* still building */
.building { opacity: 0.85; }
.building h2 { font-size: 1rem; font-family: var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); }
.building > p { font-size: 0.85rem; color: var(--ink-mute); margin: 0 0 0.75rem; }
.checklist { list-style: none; padding: 0; margin: 0; font-size: 0.86rem; color: var(--ink-soft); }
.checklist li { padding: 0.35rem 0; border-top: 1px dashed var(--rule); display: flex; gap: 0.75rem; }
.checklist__state { flex: 0 0 4.2rem; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-mute); padding-top: 0.15rem; }

@media (max-width: 48rem) {
  .steps-math, .scope-layout, .bench { grid-template-columns: 1fr; }
  .steps-math li + li { padding-left: 0; border-left: none; }
  .steps-math li:last-child { padding-left: 0.75rem; }
}

.steps-math__foot { margin-top: 0.9rem; max-width: none; }
.cta .cta__write { font-size: 0.82rem; opacity: 0.7; margin: 1rem 0 0; }
.cta__write a { color: inherit; }

/* live 10-year yield */

/* higher rates, lower multiples */
.rate-shift { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1rem, 3vw, 2rem); max-width: 46rem; margin-top: 1.25rem; }
.rate-shift__col { border-top: 1px solid var(--ink); }
.rate-shift__col--today { border-top: 2px solid var(--mu-electric-blue); }
.rate-shift__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0.7rem 0 0.4rem; }
.rate-shift dl { margin: 0; }
.rate-shift dl div { display: flex; justify-content: space-between; align-items: baseline; padding: 0.45rem 0; border-bottom: 1px solid var(--rule-soft); }
.rate-shift dt { font-size: 0.85rem; color: var(--ink-soft); }
.rate-shift dd { margin: 0; font-family: var(--serif); font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.rate-shift__lead dd { font-size: 1.6rem; }
.rate-shift__col--today dd { color: var(--blue-ink); }
@media (max-width: 34rem) { .rate-shift { grid-template-columns: 1fr; } }
.payoff__app { font-size: 0.86rem; color: var(--ink-soft); margin: 0.8rem 0 0; max-width: 44rem; }
.payoff__app a, .report-prose a { color: var(--accent-interactive-text); }

/* highlighter strip — the homepage hero's mark: a flat band across the lower
   half of the words, swept in once */
.marker {
  color: var(--text-primary);
  --mark-color: var(--blue-edge);
  background-color: transparent;
  background-image: linear-gradient(transparent 45%, var(--mark-color) 45%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  padding: 0 var(--space-4, 4px);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 620ms var(--ease-out, cubic-bezier(0.22, 0.61, 0.36, 1));
}
.marker.is-drawn { background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) { .marker { transition: none; background-size: 100% 100%; } }

/* alternate view */
.alt-compare { width: 100%; max-width: none; border-collapse: collapse; margin: 1.25rem 0 1.5rem; }
.alt-compare th, .alt-compare td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--rule-soft); text-align: right; font-variant-numeric: tabular-nums; }
.alt-compare th:first-child { text-align: left; padding-left: 0; font-weight: 400; color: var(--ink-soft); font-size: 0.9rem; }
.alt-compare thead th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; border-bottom: 1px solid var(--ink); }
.alt-compare td { font-family: var(--serif); font-size: 1.1rem; }
/* the alternate view marked as the latest rate is in the rates comparison:
   an Electric Blue rule over its heading, its figures in blue ink */
.alt-compare thead .alt-compare__alt { color: var(--ink); box-shadow: inset 0 2px 0 var(--mu-electric-blue); }
.alt-compare td.alt-compare__alt { color: var(--blue-ink); }
.alt-compare__key td { font-size: 1.35rem; }
.alt-compare__total th, .alt-compare__total td { border-bottom: none; border-top: 1px solid var(--ink); }
.alt-compare__total td { font-size: 1.45rem; }
.alt-compare__note { max-width: none; }

/* scorecard: values share one baseline even when a label wraps */
.build div { display: flex; flex-direction: column; }
.build dt { flex: 1 0 auto; }
.build dd { margin-top: auto; }

/* --- the reading column -------------------------------------------------- */
/* Everything runs in one centred column of about 75 characters a line: the
   text, and the charts, tables and card grids with it, at the same width.
   Last in the file so it wins over the widths and margins set on these
   blocks above. */
.report-head,
main > article > section > h2,
.report-prose,
.value-sits, .value-sits__title, .value-sits__lede,
.rate-build, .bench,
.seed, .notice,
.scope-layout, .payback,
.step__head, .step__prose, .step__panel, .takeaway, .step > .aside,
.comparison > h3, .comparison > .table-scroll, .comparison__foot,
.payoff, .payoff__app,
.resale, .rate-shift,
#alternate .table-scroll,
main > article > section > .footnote,
.cta {
  max-width: var(--measure);
  margin-inline: auto;
}
/* auto margins shrink a grid item to its content (the step panels, the caveats);
   width: 100% keeps each one at the column's width */
.rate-build, .bench, .scope-layout, .step__panel,
.comparison > .table-scroll, #alternate .table-scroll { width: 100%; }
/* The input cards: risk-free rate, discount rate, multiple, and valuation, in one row */
.build { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* One chart from the risk-free rate to the valuation, as of the transaction,
   with the latest 10-year close (js/rates.js) at its foot. */
.rate-build { margin: 1.75rem auto 0; }
.rate-build__title { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); margin: 0 0 0.55rem; }
.rate-build .build { margin: 0; }
.build__sub { display: block; margin-top: 0.15rem; text-transform: none; letter-spacing: 0.01em; }
.rate-build__live { margin: 0.75rem 0 0; font-size: 0.76rem; line-height: 1.5; color: var(--ink-mute); }
.rate-build__latest { color: var(--ink-soft); margin-right: 0.3rem; white-space: nowrap; }
.rate-build__latest::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ink-mute); margin-right: 0.4rem; vertical-align: 0.05rem; }
.rate-build.is-live .rate-build__latest::before { background: var(--mu-very-green); }
.rate-build__latest [data-rate="today"] { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; color: var(--blue-ink); margin-left: 0.2rem; }
.rate-build__live [data-rate="change"] { color: var(--ink-soft); font-weight: 600; }


/* The reported-price note that opens the scope, above the caveats. */
#scope .report-prose + .scope-layout { margin-top: 1.75rem; }

/* Section 01 runs on through how we valued, the scope, the alternate view and
   rates: those parts keep their own <section> (and id) but no heading, rule or
   full section gap. */
main > article > section:has(+ section.continues) { padding-bottom: 0; }
main > article > section.continues { border-top: 0; padding-top: clamp(1.5rem, 3.5vw, 2.25rem); }
/* The fair-value note after the rates comparison */
.rate-shift + .report-prose { margin-top: 1.75rem; }
/* A Greek letter inside an all-caps label stays lower case (µ, not M) */
.nocase { text-transform: none; }

/* Each walkthrough panel: the chart on the left; the slider and its figures on
   the right. Side by side the two need more than the text column, so these two
   panels open out to 56rem; stacked (slider, figures, chart) below 64rem and on phones. */
@media (min-width: 64rem) {
  .step__panel {
    max-width: 56rem; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    grid-template-areas: "chart control" "chart figures";
    grid-template-rows: auto 1fr; column-gap: 1.5rem; align-items: start;
  }
  .step__panel > .chart-figure { grid-area: chart; }
  .step__panel > .control { grid-area: control; }
  .step__panel > .readouts { grid-area: figures; margin: 1.4rem 0 0; grid-template-columns: minmax(0, 1fr); row-gap: 1rem; }
  .step__panel > .readouts--triple { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .step__panel > .readouts--triple .readout--lead { grid-column: 1 / -1; }
}
/* Where you landed, straight above the comparison table */
.payoff + .comparison { margin-top: 1.5rem; }

/* --- vertical rhythm ------------------------------------------------------ */
/* 1.05em between paragraphs (as .report-prose p + p); 1.75rem between text and
   a chart, table, or box, on either side. The parts of 01 run on at the same
   spacing, so a part boundary between two paragraphs reads as a paragraph break.
   Prefixed with main so the phone page's own margins give way to it too. */
main .value-sits, main .rate-build, main .rate-shift, main .payoff, main .cta, main .step { margin-top: 1.75rem; }
main .bench { margin-block: 1.75rem; }   /* top and bottom only: the sides stay auto, centred */
main #alternate .alt-compare { margin: 1.75rem 0 0.75rem; }
main .alt-compare__note + .report-prose,
main .rate-shift + .report-prose,
main #scope .report-prose + .scope-layout,
main .payoff + .comparison,
main .step__prose--after { margin-top: 1.75rem; }
main .step__grid { gap: 1.75rem; }
main > article > section.continues { padding-top: 0; }
main > article > section.continues > :first-child { margin-top: 1.75rem; }
main > article > section:has(> .report-prose:last-child) + section.continues > .report-prose:first-child { margin-top: 1.05em; }

.value-bars__year { color: var(--ink-mute); font-size: 0.8em; margin-left: 0.3em; }   /* album year on track rows */

.footnote + .report-prose { margin-top: 2.5rem; }   /* breathing room when prose follows a chart footnote */