/* DiscreteRate site layer (2026-09-25) — docs/brand-style-guide.md §9.
   Loads AFTER each page's own <style>, so rules here win at equal specificity.
   Pages carry body.dr; the sandbox is an app and does not load this sheet.

   Parts:  nav / footer (shared markup on every page)
           heroes   .dr-hero--center | --split (still right) | --split.--flip (still left)
                    | --pattern (tank levels behind centred text) | --short (legal, FAQ)
           bands    .dr-ground | .dr-ground-2 | .dr-band (Brushed Steel) | .dr-warm (Rate Steel)
           joins    .dr-join--down | --up | --to-warm | --from-warm (liquid-surface curves)
           closers  .dr-closer--warm | --outline | --light | --pattern
   Page map: docs/brand-style-guide.md §9. */

/* ── Legacy page tokens mapped onto the roles (ground context) ── */
:root {
  --blue: var(--t-drs); --blue-dk: var(--rate-steel); --blue-mid: var(--t-drs);
  --green: var(--t-buffer); --green-dk: var(--action);
  --amber: var(--t-des); --red: var(--t-interrupt); --purple: var(--t-cont);
  --bg0: var(--ground); --bg1: var(--ground-2); --bg2: var(--ground-2); --bg3: var(--ground-3); --bg4: #272E36;
  --text: var(--on-ground); --dim: var(--on-ground-2); --faint: var(--on-ground-2);
  --border: var(--rule); --r: 14px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body.dr {
  font-family: var(--font-text); font-size: 17px; line-height: 1.7;
  background: var(--ground); color: var(--on-ground);
  overflow-x: clip; -webkit-font-smoothing: antialiased;
}
body.dr main { background: transparent; }

/* ── Type ── */
body.dr h1, body.dr h2, body.dr h3, body.dr h4 { text-wrap: balance; }
body.dr p, body.dr li, body.dr dd, body.dr figcaption, body.dr .faq-answer, body.dr summary { text-wrap: pretty; }
body.dr h1 { font-family: var(--font-display); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; }
body.dr h2 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; }
body.dr h3, body.dr h4 { font-family: var(--font-head); font-weight: 700; letter-spacing: -0.005em; }
body.dr h1 em, body.dr h2 em { font-style: normal; }
body.dr strong, body.dr b { font-weight: 700; }
body.dr code, body.dr kbd, body.dr pre, body.dr .mono,
body.dr .fb-val, body.dr .iv-stat, body.dr .pub-year, body.dr .timeline-year { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
/* colour-coded words are always bold too: colour is never the only cue */
body.dr .hl-blue, body.dr .hl-green, body.dr .hl-amber, body.dr .hl-red, body.dr .hl-purple, body.dr .hl-violet { font-weight: 700; }
body.dr h1 .hl-blue, body.dr h1 .hl-amber, body.dr h1 .hl-purple { font-weight: inherit; }
.hl-violet { color: var(--t-cont); }

/* eyebrow: plain uppercase label led by a thin stepped rate line; never a pill */
body.dr .kicker, body.dr .hero-eyebrow, body.dr .dr-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-label) !important; font-weight: 600 !important; font-size: 14px !important;
  letter-spacing: 0.12em !important; text-transform: uppercase;
  color: var(--eyebrow, var(--accent)) !important;
  background: none !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important;
  margin-bottom: 16px;
}
body.dr .kicker::before, body.dr .hero-eyebrow::before, body.dr .dr-eyebrow::before {
  content: ''; flex: none; width: 28px; height: 12px;
  background: var(--eyebrow-mark, url('/images/brand/rate-step.svg')) left center / contain no-repeat;
}

/* links in running text: underlined, never colour alone */
body.dr a { color: var(--link, var(--accent)); }
body.dr p a:not([class]), body.dr li a:not([class]), body.dr td a:not([class]), body.dr dd a:not([class]),
body.dr .faq-answer a:not([class]), body.dr figcaption a:not([class]) {
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
}
body.dr p a:not([class]):hover, body.dr li a:not([class]):hover { text-decoration-thickness: 2px; }
body.dr :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

/* ── Buttons: one action, outlines for the rest ── */
body.dr .btn, .dr-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-text); font-weight: 700; font-size: 16px; line-height: 1.2;
  padding: 13px 24px; border-radius: 8px; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
body.dr .btn-green, body.dr .btn-primary, .dr-btn--action {
  background: var(--action) !important; color: #fff !important; border: 0 !important;
}
body.dr .btn-green:hover, body.dr .btn-primary:hover, .dr-btn--action:hover { background: var(--action-hi) !important; color: #fff !important; }
body.dr .btn-outline, .dr-btn--outline {
  background: transparent !important; color: var(--accent) !important; border: 1.5px solid var(--accent) !important;
}
body.dr .btn-outline:hover, .dr-btn--outline:hover { background: rgba(0,207,255,0.08) !important; }
/* quiet text link with an arrow: the "second action" of a section */
.dr-textlink { font-weight: 600; color: var(--on-ground) !important; text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; }
.dr-textlink::after { content: ' \2192'; color: var(--accent); }
.dr-textlink:hover { text-decoration-thickness: 2.5px; }
.dr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 28px; }

/* ── Nav (same markup on every page) ── */
body.dr > nav.dr-nav, nav.dr-nav {
  position: sticky; top: 0; left: auto; right: auto; z-index: 100;
  display: flex; align-items: center; gap: 12px;
  height: 72px; padding: 0 max(16px, 4vw);
  background: rgba(17,20,24,0.96); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,207,255,0.16);
  font-family: var(--font-label);
}
/* The logo file's viewBox has wide empty margins, so the nav shows a cropped
   window onto it. The crop keeps the full art: "Discrete" renders 124px wide
   (the guide's minimum is 120px). */
.dr-brand { --lh: 45px; position: relative; display: block; flex: none; overflow: hidden;
  width: calc(var(--lh) * 690 / 252); height: var(--lh); }
.dr-brand img { position: absolute; max-width: none !important; height: auto;
  width: calc(var(--lh) * 800 / 252); left: calc(var(--lh) * -100 / 252); top: calc(var(--lh) * -150 / 252); }
nav.dr-nav .nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }
nav.dr-nav .nav-links a {
  font-family: var(--font-label); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #C9D0D7; text-decoration: none; padding: 8px 12px; border-radius: 6px; white-space: nowrap;
}
nav.dr-nav .nav-links a:hover { color: #fff; background: rgba(0,207,255,0.08); }
nav.dr-nav .nav-links a[aria-current="page"] { color: #fff; box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
.dr-nav-cta {
  flex: none; margin-left: 10px; background: var(--action); color: #fff !important; text-decoration: none;
  font-family: var(--font-label); font-weight: 600; font-size: 15px; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 8px; white-space: nowrap;
}
.dr-nav-cta:hover { background: var(--action-hi); }
nav.dr-nav .nav-mobile-toggle {
  display: none; margin-left: 8px; background: transparent; color: #fff; cursor: pointer;
  border: 1px solid rgba(0,207,255,0.35); border-radius: 8px; font-size: 20px; line-height: 1; padding: 8px 12px;
}
@media (max-width: 900px) {
  nav.dr-nav { height: 64px; }
  .dr-brand { --lh: 38px; }
  nav.dr-nav .nav-links { display: none; }
  nav.dr-nav .nav-mobile-toggle { display: block; }
  .dr-nav-cta { margin-left: auto; }
  nav.dr-nav .nav-links.mobile-open {
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    background: rgba(17,20,24,0.98); padding: 10px 16px 16px; border-bottom: 1px solid var(--rule);
  }
  nav.dr-nav .nav-links.mobile-open a { padding: 12px 8px; font-size: 16px; }
}
@media (max-width: 420px) {
  .dr-brand { --lh: 34px; }
  .dr-nav-cta { padding: 9px 12px; font-size: 14px; }
}

/* ── Sections and scopes ── */
.dr-ground   { background: var(--ground); }
.dr-ground-2 { background: var(--ground-2); }
.dr-band {
  background: var(--band); color: var(--ink);
  --text: var(--ink); --dim: var(--ink-2); --faint: var(--ink-2);
  --bg0: var(--band); --bg1: var(--card-light); --bg2: var(--card-light); --bg3: #EEF1F4; --bg4: #E8ECEF;
  --border: var(--rule-band);
  --blue: var(--t-drs-ink); --blue-dk: var(--rate-steel); --green: var(--t-buffer-ink); --amber: var(--t-des-ink);
  --red: var(--t-interrupt-ink); --purple: var(--t-cont-ink);
  --accent: var(--accent-band); --link: var(--accent-band);
  --eyebrow: var(--accent-band); --eyebrow-mark: url('/images/brand/rate-step-band.svg');
}
.dr-band .hl-violet { color: var(--t-cont-ink); }
.dr-band h1, .dr-band h2, .dr-band h3, .dr-band h4, .dr-band strong { color: var(--ink); }
.dr-band p, .dr-band li { color: var(--ink-2); }
.dr-band .dr-textlink { color: var(--ink) !important; }
.dr-band .dr-textlink::after { color: var(--accent-band); }
.dr-warm {
  background: var(--warm); color: var(--on-warm);
  --text: var(--on-warm); --dim: var(--on-warm-2); --faint: var(--on-warm-2);
  --bg1: #22405D; --bg2: #23425F; --bg3: #305576; --border: #4A6F92;
  --link: #fff; --eyebrow: #fff;
}
.dr-warm h1, .dr-warm h2, .dr-warm h3, .dr-warm strong { color: #fff; }
.dr-warm p, .dr-warm li { color: var(--on-warm-2); }
.dr-warm .dr-textlink::after { color: #fff; }

/* dark cards: charts and figures keep a dark ground wherever they sit */
.dr-dark, .dr-figure {
  --text: var(--on-ground); --dim: var(--on-ground-2); --faint: var(--on-ground-2);
  --bg1: var(--ground-2); --bg2: var(--ground-3); --bg3: #272E36; --border: var(--rule);
  --blue: var(--t-drs); --green: var(--t-buffer); --amber: var(--t-des); --red: var(--t-interrupt); --purple: var(--t-cont);
  --accent: var(--neon-cyan); --link: var(--neon-cyan);
  color: var(--on-ground);
}
.dr-figure { background: var(--ground-2); border: 1px solid var(--rule); border-radius: var(--radius); padding: 22px; }
.dr-band .dr-figure { box-shadow: 0 10px 30px rgba(17,20,24,0.18); }
.dr-dark h3, .dr-dark h4, .dr-figure h3, .dr-figure h4, .dr-dark strong, .dr-figure strong { color: var(--on-ground); }
.dr-dark p, .dr-figure p { color: var(--on-ground-2); }

/* ── Joins: a liquid surface (a tank level) with the contrast eased on both sides ── */
.dr-join { display: block; height: 120px; width: 100%; background: center / 100% 100% no-repeat; }
.dr-join--down      { background-image: url('/images/brand/join-down.svg'); }
.dr-join--up        { background-image: url('/images/brand/join-up.svg'); }
.dr-join--to-warm   { background-image: url('/images/brand/join-to-warm.svg'); height: 64px; }
.dr-join--from-warm { background-image: url('/images/brand/join-from-warm.svg'); height: 64px; }
@media (max-width: 700px) {
  .dr-join { height: 76px; }
  .dr-join--to-warm, .dr-join--from-warm { height: 36px; }
}

/* ── Heroes ── */
.dr-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ground); padding: 72px max(16px, 5vw) 80px; }
.dr-hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; }
.dr-hero-copy { max-width: 640px; }
body.dr .dr-hero h1 { font-size: clamp(34px, 4.6vw, 56px); color: #F2F4F6; margin: 0 0 20px; max-width: 20ch; }
body.dr .dr-hero .lead, body.dr .dr-hero .dr-lede {
  font-size: 19px; line-height: 1.65; color: var(--on-ground-2); max-width: 62ch; margin: 0 0 12px;
}
body.dr .dr-hero .lead strong { color: var(--on-ground); }
.dr-hero--split .dr-hero-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 56px; align-items: center;
}
.dr-hero--split.dr-hero--flip .dr-hero-inner { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.dr-hero--split.dr-hero--flip .dr-still { order: -1; }
/* a sweep of Rate Steel behind the still (the brand's shape: a tank, rounded) */
.dr-hero--split::before {
  content: ''; position: absolute; z-index: 0; top: 12%; bottom: 14%; right: -6%; width: 46%;
  background: var(--rate-steel); opacity: 0.4; border-radius: 48px;
}
.dr-hero--split.dr-hero--flip::before { right: auto; left: -6%; }
/* sandbox still: rectangular (it carries labels), 14px corners, 1px cyan outline, no blur */
.dr-still { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--ground-2); border: 1px solid var(--neon-cyan); box-shadow: 0 24px 60px rgba(0,0,0,0.45); }
.dr-still img { display: block; width: 100%; height: auto; }
.dr-still figcaption { font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-ground-2); padding: 10px 16px; border-top: 1px solid var(--rule); background: var(--ground-2); }
.dr-still figcaption a { color: var(--on-ground); }
.dr-hero--center { text-align: center; padding: 104px max(16px, 5vw) 96px; }
.dr-hero--center .dr-hero-copy { max-width: 860px; margin: 0 auto; }
body.dr .dr-hero--center h1 { margin-left: auto; margin-right: auto; max-width: 22ch; }
body.dr .dr-hero--center .lead, body.dr .dr-hero--center .dr-lede { margin-left: auto; margin-right: auto; }
.dr-hero--center .dr-actions { justify-content: center; }
.dr-hero--short { padding-top: 64px; padding-bottom: 56px; }
body.dr .dr-hero--short h1 { font-size: clamp(32px, 4vw, 46px); }
/* tank levels + flow lane behind centred text */
.dr-hero--pattern::after, .dr-pattern::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url('/images/brand/levels-ground.svg') center bottom / auto 52% no-repeat; opacity: 0.4;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 45%, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 45%, #000 100%);
}
.dr-hero--pattern::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,20,24,0.0) 40%, rgba(17,20,24,0.55) 100%);
}
@media (max-width: 900px) {
  .dr-hero { padding: 44px 16px 56px; }
  .dr-hero--split .dr-hero-inner, .dr-hero--split.dr-hero--flip .dr-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .dr-hero--split.dr-hero--flip .dr-still { order: 0; }
  .dr-hero--split::before { display: none; }
  .dr-hero--center { padding: 64px 16px 64px; }
  body.dr .dr-hero h1 { font-size: clamp(30px, 8.4vw, 40px); }
  body.dr .dr-hero .lead, body.dr .dr-hero .dr-lede { font-size: 17px; }
}

/* ── Article reading surfaces ── */
body.dr main:not(.dr-read) { max-width: none; margin: 0; padding: 0; }
body.dr .dr-read { max-width: 780px; margin: 0 auto; padding: 56px max(16px, 4vw) 72px; }
body.dr .dr-read.dr-read--wide { max-width: 900px; }
body.dr .dr-read > :first-child { margin-top: 0; }
body.dr .dr-read h2 { font-size: clamp(26px, 3vw, 32px); margin: 56px 0 16px; }
body.dr .dr-read > h2:first-child, body.dr .dr-read > .dr-first { margin-top: 0; }
body.dr .dr-read h3 { font-size: 20px; margin: 32px 0 10px; }
body.dr .dr-read p { font-size: 17px; line-height: 1.75; max-width: 70ch; }
body.dr .dr-read p.muted { color: var(--dim); }
body.dr .dr-band .callout, body.dr .dr-band .verdict-box, body.dr .dr-band .quote {
  background: var(--card-light); border-color: #D6DCE2; border-left-color: var(--accent-band); box-shadow: var(--shadow-band);
}
body.dr .dr-band .callout p { color: var(--ink); }
body.dr .dr-band table { background: var(--card-light); }
body.dr .dr-band table th { background: #EEF1F4; color: var(--ink); }
body.dr .dr-band table td { color: var(--ink-2); border-color: #D6DCE2; }
body.dr .dr-band table td strong { color: var(--ink); }
body.dr .dr-band details.faq { border-color: #CBD2D9; }
body.dr .dr-band details.faq > summary { color: var(--ink); }
body.dr .dr-band details.faq > summary::after { color: var(--accent-band); }
body.dr .dr-band .faq-answer, body.dr .dr-band .faq-answer p { color: var(--ink-2); }
body.dr .dr-band .dr-figure p, body.dr .dr-band .panels .panel p { color: var(--on-ground-2); }
body.dr .dr-band .panels .panel h4 { font-family: var(--font-head); }
body.dr .fine-print, body.dr .dr-read p.fine-print { font-size: 14px; line-height: 1.6; color: var(--dim); border-top: 1px solid var(--border); padding-top: 18px; margin-top: 40px; }

/* ── Cards on the band ── */
.dr-card { background: var(--card-light); border: 1px solid #D6DCE2; border-radius: var(--radius); box-shadow: var(--shadow-band); color: var(--ink); }
/* icons: one line weight, one colour, inside the brand's rounded-square container (PDF p.9) */
.dr-icon { width: 48px; height: 48px; flex: none; display: inline-grid; place-items: center;
  border: 1.75px solid var(--icon, var(--neon-cyan)); border-radius: 12px; background: transparent !important; }
.dr-icon svg { width: 24px; height: 24px; fill: none; stroke: var(--icon, var(--neon-cyan)); stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.dr-band .dr-icon { --icon: var(--accent-band); }

/* ── Closers ── */
.dr-closer { position: relative; isolation: isolate; overflow: hidden; }
.dr-closer-inner { max-width: 1080px; margin: 0 auto; position: relative; z-index: 1; }
body.dr .dr-closer h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; }
body.dr .dr-closer p { font-size: 17px; max-width: 60ch; margin: 0; }
/* Rate Steel band with the one rounded corner */
.dr-closer--warm { background: var(--warm); padding: 72px max(16px, 5vw); border-radius: 0 0 120px 0; }
/* outlined box on the ground (cyan outline, no blur) */
.dr-closer--outline { padding: 72px max(16px, 5vw) 88px; background: var(--ground); }
.dr-closer--outline .dr-closer-inner { border: 1.5px solid var(--neon-cyan); border-radius: var(--radius); padding: 40px 44px; background: var(--ground-2); }
/* light band closer (Brushed Steel) */
.dr-closer--light { background: var(--band); padding: 64px max(16px, 5vw) 80px; }
.dr-closer--light .dr-closer-inner { border-left: 4px solid var(--accent-band); padding-left: 28px; }
/* tank-level pattern panel on the ground */
.dr-closer--pattern { background: var(--ground); padding: 88px max(16px, 5vw) 120px; }
.dr-closer--pattern::after { opacity: 0.5; }
@media (max-width: 700px) {
  .dr-closer--warm { border-radius: 0 0 56px 0; padding: 52px 16px; }
  .dr-closer--outline { padding: 48px 16px 64px; }
  .dr-closer--outline .dr-closer-inner { padding: 28px 20px; }
  .dr-closer--light { padding: 48px 16px 56px; }
  .dr-closer--light .dr-closer-inner { padding-left: 18px; }
  .dr-closer--pattern { padding: 64px 16px 96px; }
}

/* ── Footer (same markup on every page) ── */
footer.dr-footer {
  background: var(--ground-2); border-top: 1px solid var(--rule); color: var(--on-ground-2);
  padding: 56px max(16px, 5vw) 32px; font-family: var(--font-text);
}
.dr-footer .footer-inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; max-width: 1180px; margin: 0 auto 40px; }
.dr-footer .footer-brand { max-width: 340px; }
.dr-footer .footer-brand .dr-brand { --lh: 45px; margin-bottom: 16px; }
.dr-footer .footer-brand p { font-size: 15px; line-height: 1.65; color: var(--on-ground-2); }
.dr-footer .footer-col h4 { font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--on-ground); margin: 0 0 14px; }
.dr-footer .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0; }
.dr-footer .footer-col li a { font-size: 15px; color: var(--on-ground-2); text-decoration: none; }
.dr-footer .footer-col li a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.dr-footer .footer-bottom { border-top: 1px solid var(--rule); padding-top: 22px; font-size: 14px; line-height: 1.6; color: var(--on-ground-2); text-align: center; max-width: 1180px; margin: 0 auto; }

/* three-primitives: the three cards sit on the Rate Steel band as light cards,
   the category colour as border and heading only */
.dr-primitives .primitive-card {
  background: var(--card-light) !important; border: 1px solid #D6DCE2 !important; border-left: 5px solid var(--t-drs-ink) !important;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18); color: var(--ink);
  --text: var(--ink); --dim: var(--ink-2); --bg2: #EEF1F4; --link: var(--accent-band);
}
.dr-primitives .primitive-card.buffer { border-left-color: var(--t-buffer-ink) !important; }
.dr-primitives .primitive-card.interrupt { border-left-color: var(--t-interrupt-ink) !important; }
.dr-primitives .primitive-card h2, .dr-primitives .primitive-card strong { color: var(--ink) !important; }
.dr-primitives .primitive-card p { color: var(--ink-2) !important; }
.dr-primitives .primitive-card .name { color: var(--t-drs-ink) !important; }
.dr-primitives .primitive-card.buffer .name { color: var(--t-buffer-ink) !important; }
.dr-primitives .primitive-card.interrupt .name { color: var(--t-interrupt-ink) !important; }
.dr-primitives .primitive-card .examples { background: #EEF1F4 !important; color: var(--ink-2) !important; }
.dr-primitives .primitive-card:first-child { margin-top: 0; }

/* ── Home page (index.html) ─────────────────────────────────────────────── */
body.dr-home section { padding: 96px max(16px, 5vw); }
#hero.dr-hero { padding: 136px max(16px, 5vw) 128px; text-align: center; background: var(--ground); }
#hero.dr-hero::before { background: linear-gradient(180deg, rgba(17,20,24,0) 40%, rgba(17,20,24,0.55) 100%); }
body.dr-home #hero h1 { font-size: clamp(38px, 5.6vw, 72px); max-width: 18ch; margin: 8px auto 26px; }
body.dr-home #hero .hero-sub { color: var(--on-ground-2); font-size: clamp(17px, 1.9vw, 20px); margin: 0 auto 14px; max-width: 640px; }
body.dr-home #hero .hero-sub--credit { font-size: 17px; }
body.dr-home #hero .dr-actions { justify-content: center; margin-top: 30px; }
body.dr-home .dr-btn--action { padding: 14px 28px; }
.dr-home .sim-canvas-wrap { border-color: var(--rule); background: var(--ground-2); }

/* the three primitives as white cards on the band */
.dr-home .dr-band .block-card, .dr-home .dr-band .pub-card {
  background: var(--card-light); border: 1px solid #D6DCE2; box-shadow: var(--shadow-band); border-radius: var(--radius);
}
.dr-home .dr-band .block-card .block-sub { font-family: var(--font-label); font-size: 14px; letter-spacing: 0.12em; }
.dr-home .dr-band .interrupt-types { background: var(--card-light) !important; border-color: #D6DCE2 !important; }
.dr-home .dr-band .interrupt-types p { color: var(--ink-2) !important; }
/* tags are a quiet line of words, not a stack of pills */
.block-tags { gap: 0 !important; }
.block-tag { border: 0 !important; background: none !important; padding: 0 !important; border-radius: 0 !important;
  font-family: var(--font-label); font-size: 14px !important; letter-spacing: 0.06em; color: var(--ink-2) !important; }
.block-tag + .block-tag::before { content: '\00B7'; padding: 0 8px; color: var(--ink-2); }
.dr-home .dr-band .pub-card:hover { border-color: var(--accent-band); }
.dr-home .dr-band .pub-year { color: var(--accent-band); }
.dr-home .dr-band .pub-title { color: var(--ink); font-size: 15px; }
.dr-home .dr-band .pub-venue { color: var(--ink-2); }
.dr-home .dr-band .pub-all { color: var(--accent-band); text-decoration: underline; text-underline-offset: 3px; }
.dr-home .dr-band .compare-grid { border-color: #D6DCE2; box-shadow: var(--shadow-band); }
.dr-home .dr-band .compare-header.left, .dr-home .dr-band .compare-cell.left { background: #EEF1F4; color: var(--ink-2); }
.dr-home .dr-band .compare-header.right { background: #DCEEF3; color: var(--ink); }
.dr-home .dr-band .compare-cell.right { background: var(--card-light); color: var(--ink); border-top-color: #D6DCE2; }
.dr-home .dr-band .compare-cell.left { border-top-color: #D6DCE2; }
.dr-home .dr-band #compare .inner-sm > div[style*="border-left"], .dr-home #compare div[style*="border-left:3px"] {
  background: var(--card-light) !important; border-color: #D6DCE2 !important; border-left-color: var(--accent-band) !important;
}
.dr-home #compare div[style*="border-left:3px"] p { color: var(--ink) !important; font-weight: 400 !important; }
.dr-home #compare div[style*="border-left:3px"] p + p { color: var(--ink-2) !important; }

/* problem cards and the rest on the ground */
.dr-home .card, .dr-home .use-card, .dr-home .change-card { background: var(--ground-2); border: 1px solid #3A424B; border-radius: var(--radius); }
.dr-home #what .card, .dr-home #interrupt .iv-row { background: var(--ground-3); }
.dr-home .card:hover { border-color: var(--accent); }
.dr-home .card .dr-icon { margin-bottom: 20px; }
.dr-home .card h3 { font-size: 21px; }
.concept-pill { border-radius: 12px !important; background: var(--ground-3) !important; }
.concept-pill.green { border-color: #707070 !important; color: var(--on-ground) !important; }
.flow-diagram { background: var(--ground); border-color: #3A424B; }
.flow-block { background: var(--ground-3); border-color: #3A424B; }
.flow-block .fb-label { color: var(--on-ground); letter-spacing: 0.06em; }
.flow-block .fb-val { color: var(--on-ground); }
.flow-block .fb-note { font-size: 14px; color: var(--on-ground-2); margin-top: 4px; }
.flow-block.blocked { border: 1.5px solid #707070; background: rgba(112,112,112,0.14); }
.flow-block.buf { border: 1.5px solid var(--t-buffer); background: rgba(95,211,141,0.08); }
.flow-block.interrupt { border: 1.5px solid var(--t-interrupt); background: rgba(242,85,90,0.08); }
.flow-block.starved { border: 1.5px dashed #707070; background: transparent; }
.flow-label { font-size: 14px !important; }
.iv-row.active { border-color: var(--accent) !important; background: rgba(0,207,255,0.05) !important; }
.change-delta { color: var(--on-ground); }

/* products: Rate Steel closer; the dashboard mock-up stays a dark card */
#products.dr-closer--warm { padding: 96px max(16px, 5vw); }
#products a[style*="display:block"] { background: var(--ground-2) !important; border-color: #3A424B !important; }
#products a[style*="display:block"] p { color: var(--on-ground-2) !important; }
#products a[style*="display:block"] .dr-textlink { color: var(--on-ground) !important; }
#products a[style*="display:block"] .dr-textlink::after { color: var(--accent); }
#products .platform-screenshot.dr-dark { background: var(--ground-2); border-color: #3A424B; box-shadow: 0 20px 50px rgba(0,0,0,0.35); }
#products .platform-screenshot::before { background: var(--ground-3); color: var(--on-ground-2); font-size: 14px; }
#products .ps-stat, #products .ps-bar-track { background: var(--ground-3); }
#contact input[type="text"], #contact input[type="email"] { border-color: #3A424B !important; background: var(--ground-2) !important; font-size: 16px !important; }
#contact label { opacity: 1 !important; color: var(--on-ground-2); }
#contact h2 + p, #contact div[style*="letter-spacing:2px"] { opacity: 1 !important; color: var(--on-ground-2); }
@media (max-width: 700px) {
  body.dr-home section { padding: 64px 16px; }
  #hero.dr-hero { padding: 72px 16px 80px; }
  #products.dr-closer--warm { padding: 56px 16px; }
}

/* ── Legal pages: short centred hero, Brushed Steel reading band only ── */
body.dr-legal .dr-band {
  --text-dim: var(--ink-2); --text-faint: var(--ink-2); --amber: var(--accent-band); --teal: var(--accent-band);
  --accent: var(--accent-band); --accent-lt: var(--accent-band); --bg-card: transparent; --bg1: transparent; --bg2: #EEF1F4;
  --border: #CBD2D9;
}
body.dr-legal main.dr-read { background: transparent; border: 0; border-radius: 0; margin: 0 auto; }
body.dr-legal .dr-hero .subtitle { color: var(--on-ground-2); font-family: var(--font-label); font-size: 15px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 auto; }
body.dr-legal .dr-read h2 { font-size: 24px; margin: 40px 0 12px; }
body.dr-legal .dr-read p, body.dr-legal .dr-read li { font-size: 16px; color: var(--ink-2); }
body.dr-legal .dr-read a { text-decoration: underline; text-underline-offset: 3px; }
body.dr-legal .toc, body.dr-legal .product-list { background: var(--card-light); border-color: #D6DCE2; }
body.dr-legal .dr-read table { display: block; overflow-x: auto; }
body.dr-legal .dr-read code { background: #EEF1F4; color: var(--ink); overflow-wrap: anywhere; }
body.dr-legal .footer { color: var(--ink-2); }

/* ── Lineage: eras step from Machined grey to Neon Cyan (a progression, not
      the teaching colours; every era also carries its name) ── */
.dr-lineage .dr-read { --amber: #B4BCC4; --green: #90BCD8; --purple: #6FB9E6; --blue: var(--neon-cyan); }
.dr-lineage .dr-read .era-card { background: var(--ground-3); }

/* long split-hero titles: let the column set the measure so balance can work */
body.dr .dr-hero--split h1 { max-width: none; font-size: clamp(32px, 3.9vw, 50px); }
body.dr-home #hero h1 { max-width: 16ch; }
.dr-footer li { color: var(--on-ground-2); }
@media (max-width: 900px) { body.dr .dr-hero--split h1 { font-size: clamp(28px, 7.4vw, 36px); } }

/* colour is never the only cue: down/loss bars are hatched as well as red */
.iv-segment.down, .ps-bar-fill[style*="var(--red)"], .change-bar[style*="var(--red)"] {
  background-image: repeating-linear-gradient(135deg, rgba(17,20,24,0.55) 0 3px, transparent 3px 7px) !important;
}
@media (max-width: 700px) { .dr-hero--pattern::after { opacity: 0.18; } }