/* ==========================================================================
   Read Achilles — Trend Indicators Presentation Layer (ui/data-pages.css)
   Author of Record: ARGON
   Scope: Strictly confined to .ra-page-shell and .ra-data-page.
   Constraint: 100% Presentation-Only. Zero claim or DOM mutation.

   BRAND RESTYLE v3 — Marketing tokens of record (2026-10-31 23:40 ET):
     Gold  #C89838  primary brand gold — masthead, pills, rules, accents
     Navy  #0B1F3A  the dark ground; cards are navy surfaces lifted off it
     Amber #F5A623  accent ONLY — never a ground for gold text
     Cream #FAF6EE  primary text on navy
     Ink   #101418  text on gold
   Typography — the real brand fonts only (served from fonts/ beside this
   file; pipeline files of record in
   workspace/tldr-sprint/2026-10-28/design/fonts/):
     Source Serif 4 — masthead / editorial serif
     Oswald         — display / headings
     Source Sans 3  — body + data
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/SourceSerif4-Italic.ttf") format("truetype");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Oswald";
  src: url("fonts/Oswald.ttf") format("truetype");
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/SourceSans3.ttf") format("truetype");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand tokens of record — the only hex values in this layer. Every
     other colour below is derived from these five with color-mix(). */
  --ra-gold: #C89838;
  --ra-navy: #0B1F3A;
  --ra-amber: #F5A623;
  --ra-cream: #FAF6EE;
  --ra-ink: #101418;

  /* Derived surfaces and text tones (color-mix of the tokens above). */
  --ra-ground: color-mix(in srgb, var(--ra-navy) 76%, var(--ra-ink) 24%);
  --ra-surface: color-mix(in srgb, var(--ra-navy) 88%, var(--ra-cream) 12%);
  --ra-surface-raised: color-mix(in srgb, var(--ra-navy) 80%, var(--ra-cream) 20%);
  --ra-surface-inset: color-mix(in srgb, var(--ra-navy) 92%, var(--ra-ink) 8%);
  --ra-text: var(--ra-cream);
  --ra-text-soft: color-mix(in srgb, var(--ra-cream) 78%, var(--ra-navy) 22%);
  --ra-text-mute: color-mix(in srgb, var(--ra-cream) 62%, var(--ra-navy) 38%);
  --ra-line: color-mix(in srgb, var(--ra-cream) 18%, var(--ra-navy) 82%);
  --ra-line-gold: color-mix(in srgb, var(--ra-gold) 55%, var(--ra-navy) 45%);

  --ra-font-serif: "Source Serif 4", serif;
  --ra-font-display: "Oswald", sans-serif;
  --ra-font-sans: "Source Sans 3", sans-serif;

  --ra-text-xs: 0.75rem;
  --ra-text-sm: 0.875rem;
  --ra-text-base: 1rem;
  --ra-text-lg: 1.125rem;

  --ra-space-1: 0.25rem;
  --ra-space-2: 0.5rem;
  --ra-space-3: 0.75rem;
  --ra-space-4: 1rem;
  --ra-space-5: 1.5rem;
  --ra-space-6: 2rem;
  --ra-space-7: 3rem;

  --ra-shell-max: 1160px;
  --ra-radius: 16px;
}

/* Neutralise the UA body margin so the shell — not the browser default —
   owns the page edges (before the restyle the shell began at x=8/y=8). */
body:has(.ra-page-shell) {
  margin: 0;
  background: var(--ra-ground);
}

/* ============================ Outer shell ============================ */

.ra-page-shell {
  box-sizing: border-box;
  background: var(--ra-ground);
  color: var(--ra-text);
  font-family: var(--ra-font-sans);
  font-size: var(--ra-text-base);
  line-height: 1.55;
  min-height: 100vh;
  padding: 0 var(--ra-space-5) var(--ra-space-7);
  -webkit-font-smoothing: antialiased;
}

.ra-page-shell *,
.ra-page-shell *::before,
.ra-page-shell *::after {
  box-sizing: border-box;
}

.ra-page-shell .ra-shell-inner {
  max-width: var(--ra-shell-max);
  margin: 0 auto;
  padding-top: var(--ra-space-5);
}

.ra-page-shell a {
  color: var(--ra-text);
  text-decoration-color: var(--ra-gold);
  text-underline-offset: 3px;
}
.ra-page-shell a:hover { color: var(--ra-gold); }
.ra-page-shell a:focus-visible,
.ra-page-shell button:focus-visible,
.ra-page-shell input:focus-visible {
  outline: 2px solid var(--ra-amber);
  outline-offset: 3px;
}

/* ====================== Masthead + site footer ====================== */
/* Presentation chrome emitted by claimlock_page_shell(). The mark is the
   site master (assets/logo-mark.png) served as-is — never re-drawn,
   never re-coloured. */

.ra-page-shell .ra-masthead {
  background: var(--ra-navy);
  border-bottom: 3px solid var(--ra-gold);
  margin: 0 calc(-1 * var(--ra-space-5));
  padding: 0 var(--ra-space-5);
}
.ra-page-shell .ra-masthead-inner {
  max-width: var(--ra-shell-max);
  margin: 0 auto;
}
.ra-page-shell .ra-brand-row {
  display: flex;
  align-items: center;
  padding: var(--ra-space-4) 0 var(--ra-space-3);
}
.ra-page-shell .ra-brand-link {
  display: inline-flex;
  align-items: center;
  gap: var(--ra-space-3);
  text-decoration: none;
}
.ra-page-shell .ra-brand-mark {
  height: 52px;
  width: auto;
  display: block;
}
.ra-page-shell .ra-wordmark {
  font-family: var(--ra-font-serif);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  letter-spacing: 0.04em;
  color: var(--ra-gold);
  line-height: 1.05;
}
.ra-page-shell .ra-global-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-2) var(--ra-space-5);
  border-top: 1px solid var(--ra-line);
  padding: var(--ra-space-3) 0 var(--ra-space-4);
}
.ra-page-shell .ra-global-nav a {
  font-family: var(--ra-font-display);
  font-size: var(--ra-text-sm);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ra-text-soft);
  padding-bottom: 2px;
}
.ra-page-shell .ra-global-nav a:hover { color: var(--ra-gold); }
.ra-page-shell .ra-global-nav a[aria-current="page"] {
  color: var(--ra-gold);
  border-bottom: 2px solid var(--ra-gold);
}

.ra-page-shell .ra-site-footer {
  max-width: var(--ra-shell-max);
  margin: var(--ra-space-6) auto 0;
  border-top: 1px solid var(--ra-line-gold);
  padding-top: var(--ra-space-5);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ra-space-3) var(--ra-space-5);
}
.ra-page-shell .ra-site-footer .ra-brand-mark { height: 34px; }
.ra-page-shell .ra-site-footer .ra-wordmark { font-size: 1.25rem; }
.ra-page-shell .ra-site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-2) var(--ra-space-4);
}
.ra-page-shell .ra-site-footer nav a {
  font-size: var(--ra-text-sm);
  color: var(--ra-text-soft);
  text-decoration: none;
}
.ra-page-shell .ra-site-footer nav a:hover { color: var(--ra-gold); }

/* ============================ Breadcrumb ============================ */

.ra-page-shell .ra-context-bar {
  font-family: var(--ra-font-display);
  font-size: var(--ra-text-xs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ra-text-mute);
  margin-bottom: var(--ra-space-3);
}
.ra-page-shell .ra-context-bar a {
  color: var(--ra-text-soft);
  text-decoration: none;
  border-bottom: 1px solid var(--ra-line-gold);
}
.ra-page-shell .ra-context-bar a:hover {
  color: var(--ra-gold);
  border-bottom-color: var(--ra-gold);
}

/* ========================= Provenance strips ======================== */
/* Defect 5 cure: no ::before marker square (the old 6x6 data-blue block
   is gone; the strip carries a gold top rule instead).
   Defect 6 disposition: both strips stay in the DOM (content confinement
   — the source line is content, emitted twice by the generator); the
   FOOTER instance is suppressed in presentation only, so the reader sees
   the source line once, above the data it describes. */

.ra-page-shell .ra-provenance,
.ra-page-shell .ra-provenance-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ra-space-1) var(--ra-space-4);
  overflow-wrap: anywhere;
  background: var(--ra-surface-inset);
  border: 1px solid var(--ra-line);
  border-top: 2px solid var(--ra-gold);
  border-radius: 0 0 12px 12px;
  padding: var(--ra-space-3) var(--ra-space-4);
  font-family: var(--ra-font-sans);
  font-size: var(--ra-text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--ra-text-soft);
  line-height: 1.35;
  margin-bottom: var(--ra-space-5);
}
.ra-page-shell .ra-provenance::before,
.ra-page-shell .ra-provenance-strip::before {
  content: none;
  display: none;
}
.ra-page-shell .ra-provenance[data-ra-provenance="footer"] { display: none; }

/* ============================ Article card ========================== */

.ra-page-shell .ra-data-page {
  background: var(--ra-surface);
  border: 1px solid var(--ra-line-gold);
  border-top: 3px solid var(--ra-gold);
  border-radius: var(--ra-radius);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--ra-ink) 45%, transparent);
  padding: var(--ra-space-6);
  margin-bottom: var(--ra-space-5);
}

.ra-data-page h1 {
  font-family: var(--ra-font-serif);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.75rem);
  line-height: 1.12;
  color: var(--ra-text);
  margin: 0 0 var(--ra-space-4);
  padding-bottom: var(--ra-space-4);
  border-bottom: 1px solid var(--ra-line-gold);
}
.ra-data-page h2 {
  font-family: var(--ra-font-display);
  font-weight: 600;
  font-size: 1.375rem;
  letter-spacing: 0.02em;
  line-height: 1.25;
  color: var(--ra-text);
  margin: var(--ra-space-6) 0 var(--ra-space-3);
}
.ra-data-page h3 {
  font-family: var(--ra-font-display);
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.03em;
  line-height: 1.3;
  color: var(--ra-text);
  margin: var(--ra-space-5) 0 var(--ra-space-2);
}
.ra-data-page p {
  color: var(--ra-text-soft);
  margin: 0 0 var(--ra-space-4);
  max-width: 72ch;
}
.ra-data-page a { color: var(--ra-text); text-decoration-color: var(--ra-gold); }
.ra-data-page a:hover { color: var(--ra-gold); }
.ra-data-page small { color: var(--ra-text-mute); }

/* ============================== Stats =============================== */
/* Defect 1 cure (the founder's "too much white space"): the cell no
   longer distributes label and value to opposite ends. The old rule was
   justify-content: space-between inside a row-height-equalised grid, so
   a single-line value was pushed to the cell bottom — measured gaps of
   42px (desktop) and 47px (phone) under a nominal 4px gap. Cells are now
   top-aligned flow with one fixed 8px label-to-value gap. */

.ra-data-page .ra-stats,
.ra-data-page [data-ra-stats] { margin: var(--ra-space-5) 0; }
.ra-data-page .ra-stat-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--ra-space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}
.ra-data-page .ra-stat,
.ra-data-page .ra-stat-cell,
.ra-data-page [data-ra-stat] {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: var(--ra-space-2);
  background: var(--ra-surface-raised);
  border: 1px solid var(--ra-line);
  border-top: 2px solid var(--ra-gold);
  border-radius: 12px;
  padding: var(--ra-space-3) var(--ra-space-4);
  min-width: 0;
}
.ra-data-page .ra-stat-label {
  font-size: var(--ra-text-xs);
  font-weight: 600;
  line-height: 1.4;
  color: var(--ra-text-mute);
}
.ra-data-page .ra-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ra-text);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}
.ra-data-page .ra-stat-callout {
  background: var(--ra-surface-raised);
  border: 1px solid var(--ra-line);
  border-left: 3px solid var(--ra-gold);
  border-radius: 0 12px 12px 0;
  padding: var(--ra-space-4);
  color: var(--ra-text-soft);
}
.ra-data-page .ra-stat-callout small { color: var(--ra-text-mute); }
.ra-data-page .ra-n,
.ra-data-page [data-ra-n-display] {
  font-weight: 700;
  color: var(--ra-text);
  font-variant-numeric: tabular-nums;
}

/* ============================== Tables ============================== */

.ra-data-page .ra-table-scroll {
  overflow-x: auto;
  margin: 0 0 var(--ra-space-5);
  border: 1px solid var(--ra-line);
  border-radius: 12px;
}
.ra-data-page .ra-ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--ra-text-sm);
  font-variant-numeric: tabular-nums;
}
.ra-data-page .ra-ledger-table th {
  font-family: var(--ra-font-display);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  background: var(--ra-gold);
  color: var(--ra-ink);
  padding: var(--ra-space-3) var(--ra-space-4);
  white-space: nowrap;
}
.ra-data-page .ra-ledger-table th.ra-num,
.ra-data-page .ra-ledger-table td.ra-num { text-align: right; }
.ra-data-page .ra-ledger-table td {
  padding: var(--ra-space-2) var(--ra-space-4);
  border-top: 1px solid var(--ra-line);
  color: var(--ra-text-soft);
  vertical-align: top;
}
.ra-data-page .ra-ledger-table tr:hover td {
  background: var(--ra-surface-raised);
  color: var(--ra-text);
}
.ra-data-page .ra-ledger-table td.ra-dist-cell {
  background-image: linear-gradient(
    to right,
    color-mix(in srgb, var(--ra-gold) 30%, transparent) var(--ra-dist, 0%),
    transparent var(--ra-dist, 0%)
  );
}
.ra-data-page [data-ra-date-claim] {
  background: var(--ra-surface-raised);
  border: 1px solid var(--ra-line);
  border-top: 2px solid var(--ra-gold);
  border-radius: 12px;
  padding: var(--ra-space-4);
  margin: 0 0 var(--ra-space-4);
  color: var(--ra-text-soft);
}
.ra-data-page [data-ra-date-claim] small { color: var(--ra-text-mute); }
.ra-data-page [data-ra-date-claim] + .ra-ledger-table,
.ra-data-page [data-ra-date-claim] + .ra-table-scroll { margin-top: 0; }

/* ===================== Directories + hub links ====================== */
/* Defect 3 cure: hub links are separate pills in a wrapping flex row —
   a measured 10px+ gap replaces the old 0px concatenation
   ("Earnings CensusHome"). */

.ra-data-page .ra-hub-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-3);
  margin: var(--ra-space-4) 0;
}
.ra-data-page .ra-hub-links a {
  display: inline-block;
  border: 1px solid var(--ra-gold);
  border-radius: 999px;
  padding: var(--ra-space-2) var(--ra-space-4);
  font-weight: 600;
  text-decoration: none;
  color: var(--ra-text);
}
.ra-data-page .ra-hub-links a:hover {
  background: var(--ra-gold);
  color: var(--ra-ink);
}
.ra-data-page .ra-hub-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-2) var(--ra-space-4);
}
.ra-data-page .ra-hub-note { color: var(--ra-text-mute); }

.ra-data-page .ra-index-directory,
.ra-data-page ul.ra-index-directory,
.ra-data-page ol.ra-index-directory {
  list-style: none;
  margin: 0 0 var(--ra-space-5);
  padding: 0;
  display: grid;
  gap: var(--ra-space-2);
}
.ra-data-page .ra-index-directory li {
  background: var(--ra-surface-raised);
  border: 1px solid var(--ra-line);
  border-radius: 10px;
  padding: var(--ra-space-3) var(--ra-space-4);
}
.ra-data-page dl { margin: 0 0 var(--ra-space-4); }
.ra-data-page dl dt { font-weight: 700; color: var(--ra-text); }
.ra-data-page dl dd {
  margin: 0 0 var(--ra-space-3);
  color: var(--ra-text-soft);
}

/* ================================ FAQ =============================== */

.ra-data-page .ra-faq-section h2,
.ra-data-page .ra-faq-section h3 { color: var(--ra-text); }
.ra-data-page .ra-faq-section dt {
  font-family: var(--ra-font-display);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ra-text);
  margin-top: var(--ra-space-4);
}
.ra-data-page .ra-faq-section dd,
.ra-data-page .ra-faq-section p { color: var(--ra-text-soft); }

.ra-data-page .ra-flag-label {
  font-weight: 700;
  color: var(--ra-amber);
}
.ra-data-page .ra-below-floor,
.ra-data-page .ra-withheld { color: var(--ra-text-mute); }

/* ============================ Disclaimer ============================ */
/* Defect 4 cure: the old 65ch prose measure held the block to a measured
   434px of a 1040px column (41.7%) with ~60% blank to its right. The block
   now spans the full content width. */

.ra-page-shell .ra-disclaimer,
.ra-page-shell [data-ra-disclaimer] {
  max-width: none;
  width: 100%;
  background: var(--ra-surface);
  border: 1px solid var(--ra-line);
  border-left: 3px solid var(--ra-gold);
  border-radius: 0 12px 12px 0;
  padding: var(--ra-space-4) var(--ra-space-5);
  margin-bottom: var(--ra-space-5);
}
.ra-page-shell .ra-disclaimer p,
.ra-page-shell [data-ra-disclaimer] p {
  font-size: var(--ra-text-sm);
  line-height: 1.5;
  color: var(--ra-text-soft);
  margin: 0;
}

/* ================================ CTA =============================== */

.ra-page-shell .ra-cta,
.ra-page-shell .ra-cta-section,
.ra-page-shell section[aria-label="Get Read Achilles research"] {
  background: var(--ra-surface);
  border: 1px solid var(--ra-line-gold);
  border-top: 3px solid var(--ra-gold);
  border-radius: var(--ra-radius);
  padding: var(--ra-space-6);
}
.ra-page-shell .ra-cta h2,
.ra-page-shell .ra-cta-section h2,
.ra-page-shell section[aria-label="Get Read Achilles research"] h2 {
  font-family: var(--ra-font-serif);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.2;
  color: var(--ra-text);
  margin: 0 0 var(--ra-space-3);
}
.ra-page-shell .ra-cta p,
.ra-page-shell .ra-cta-section p,
.ra-page-shell section[aria-label="Get Read Achilles research"] p,
.ra-page-shell .ra-cta-body {
  color: var(--ra-text-soft);
  margin: 0 0 var(--ra-space-4);
}
.ra-page-shell p.ra-cta-alt,
.ra-page-shell .ra-cta p.ra-cta-alt { color: var(--ra-text-mute); }

.ra-page-shell form.signup-form,
.ra-page-shell form[data-ra-cta-form] { margin: 0; }
.ra-page-shell .ra-form-row,
.ra-page-shell .ra-submit-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ra-space-3);
  align-items: center;
}
.ra-page-shell form.signup-form label,
.ra-page-shell form[data-ra-cta-form] label {
  font-size: var(--ra-text-sm);
  font-weight: 600;
  color: var(--ra-text-soft);
}
.ra-page-shell form.signup-form input[type="email"],
.ra-page-shell form[data-ra-cta-form] input[type="email"] {
  flex: 1 1 260px;
  min-height: 48px;
  border: 1px solid var(--ra-line);
  border-radius: 12px;
  background: var(--ra-surface-inset);
  color: var(--ra-text);
  font: inherit;
  padding: 0 var(--ra-space-4);
}
.ra-page-shell form.signup-form input[type="email"]::placeholder,
.ra-page-shell form[data-ra-cta-form] input[type="email"]::placeholder {
  color: var(--ra-text-mute);
}
.ra-page-shell .ra-consent-row {
  display: flex;
  gap: var(--ra-space-2);
  align-items: flex-start;
  margin-top: var(--ra-space-3);
}
.ra-page-shell .ra-consent-label {
  font-size: var(--ra-text-sm);
  color: var(--ra-text-soft);
}
.ra-page-shell form.signup-form input[type="checkbox"],
.ra-page-shell form[data-ra-cta-form] input[type="checkbox"] {
  accent-color: var(--ra-gold);
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

/* Gold pill button of record: gold fill, ink text, fully rounded.
   (Before: a 110x40 black rectangle with white text and square corners.) */
.ra-page-shell .ra-cta .btn,
.ra-page-shell form.signup-form .btn,
.ra-page-shell form.signup-form button,
.ra-page-shell form[data-ra-cta-form] button {
  appearance: none;
  border: 1px solid var(--ra-gold);
  background: var(--ra-gold);
  color: var(--ra-ink);
  border-radius: 999px;
  min-height: 48px;
  padding: 0 var(--ra-space-6);
  font-family: var(--ra-font-sans);
  font-size: var(--ra-text-base);
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
}
.ra-page-shell .ra-cta .btn:hover,
.ra-page-shell form.signup-form .btn:hover,
.ra-page-shell form.signup-form button:hover,
.ra-page-shell form[data-ra-cta-form] button:hover {
  background: var(--ra-amber);
  border-color: var(--ra-amber);
  color: var(--ra-ink);
}

/* ============================ Responsive ============================ */

@media (max-width: 1024px) {
  .ra-data-page .ra-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .ra-page-shell { padding: 0 var(--ra-space-3) var(--ra-space-6); }
  .ra-page-shell .ra-masthead {
    margin: 0 calc(-1 * var(--ra-space-3));
    padding: 0 var(--ra-space-3);
  }
  .ra-page-shell .ra-brand-mark { height: 40px; }
  .ra-page-shell .ra-global-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: var(--ra-space-4);
    padding-bottom: var(--ra-space-3);
  }
  .ra-page-shell .ra-global-nav a { white-space: nowrap; }
  .ra-page-shell .ra-shell-inner { padding-top: var(--ra-space-4); }
  .ra-page-shell .ra-data-page { padding: var(--ra-space-5) var(--ra-space-4); }
  .ra-page-shell .ra-cta,
  .ra-page-shell .ra-cta-section,
  .ra-page-shell section[aria-label="Get Read Achilles research"] {
    padding: var(--ra-space-5) var(--ra-space-4);
  }
  .ra-data-page .ra-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ra-data-page .ra-stat-value { font-size: 1.125rem; }
  .ra-page-shell .ra-form-row,
  .ra-page-shell .ra-submit-row { flex-direction: column; align-items: stretch; }
  /* In the column layout the email field's flex-basis would otherwise
     become a 260px-tall box; pin it to the desktop field height. */
  .ra-page-shell form.signup-form input[type="email"],
  .ra-page-shell form[data-ra-cta-form] input[type="email"] {
    flex: 0 0 auto;
    height: 48px;
  }
  .ra-page-shell form.signup-form button,
  .ra-page-shell form[data-ra-cta-form] button { width: 100%; }
}
/* Phone legibility (a known estate weakness on Marketing's census):
   below 480px the stat grid goes single-column so no value is crushed
   into a two-line wrap inside a half-width cell. */
@media (max-width: 480px) {
  .ra-data-page .ra-stat-grid { grid-template-columns: 1fr; }
  .ra-data-page h1 { font-size: 1.875rem; }
}

/* ============================== Print =============================== */

@media print {
  body:has(.ra-page-shell) { background: white; }
  .ra-page-shell { background: white; color: black; min-height: 0; padding: 0; }
  .ra-page-shell .ra-masthead,
  .ra-page-shell .ra-global-nav,
  .ra-page-shell .ra-site-footer,
  .ra-page-shell .ra-cta,
  .ra-page-shell .ra-cta-section { display: none; }
  .ra-page-shell .ra-data-page {
    background: white;
    color: black;
    border: none;
    box-shadow: none;
    padding: 0;
  }
  .ra-data-page h1, .ra-data-page h2, .ra-data-page h3,
  .ra-data-page p, .ra-data-page .ra-stat-value,
  .ra-page-shell .ra-disclaimer p { color: black; }
  .ra-data-page .ra-stat, .ra-data-page .ra-stat-cell {
    background: white;
    break-inside: avoid;
  }
}

@media (forced-colors: active) {
  .ra-page-shell .ra-provenance::before,
  .ra-page-shell .ra-provenance-strip::before { display: none; }
  .ra-page-shell .ra-data-page,
  .ra-data-page .ra-stat,
  .ra-page-shell .ra-cta { border: 1px solid CanvasText; box-shadow: none; }
}