/* ============================================================
   TRADFI DESK
   Tokens, type scale, rule weights, hero form, entry grid, topic
   rows, source cards and footer; class names are this site's own.
   ============================================================ */

/* ---------- fonts (self-hosted, from the template) ---------- */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-800.woff2") format("woff2");
  font-weight: 800; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Libre Caslon Display";
  src: url("/assets/fonts/librecaslondisplay-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plexmono-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}


/* ---------- tokens ---------- */

:root {
  color-scheme: light;

  --surface-page:   #f6f1e7;
  --surface-muted:  #ece5d8;
  --surface-raised: #faf7f0;
  --surface-ink:    #171816;

  --text-primary:   #171816;
  --text-secondary: #555a55;
  --text-inverse:   #f6f1e7;

  --accent:         #d94b2b;
  --accent-strong:  #b83820;
  --accent-wash:    rgba(217, 75, 43, 0.08);

  --long:           #2f6d4f;
  --long-wash:      rgba(47, 109, 79, 0.10);
  --short:          #a8321d;
  --short-wash:     rgba(168, 50, 29, 0.08);

  --line:           rgba(23, 24, 22, 0.28);
  --line-strong:    rgba(23, 24, 22, 0.58);
  --shadow:         rgba(48, 37, 27, 0.12);

  --font-body:    "Manrope", Arial, sans-serif;
  --font-display: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --font-mono:    "IBM Plex Mono", Consolas, monospace;

  --content-width: 1280px;
  --page-gutter: clamp(20px, 4vw, 48px);
  --reading: 760px;
  --bar: 68px;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  color: var(--text-primary);
  background: var(--surface-page);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--accent-strong); }

::selection { color: var(--text-inverse); background: var(--accent-strong); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

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

/* ---------- shell ---------- */

.wrap {
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
}
.wrap--reading { width: min(940px, calc(100% - (var(--page-gutter) * 2))); }

.skip {
  position: fixed; top: 12px; left: 12px; z-index: 100;
  padding: 10px 14px;
  color: var(--text-inverse); background: var(--text-primary);
  font-family: var(--font-mono); font-size: 12px;
  transform: translateY(-160%);
}
.skip:focus { transform: translateY(0); color: var(--text-inverse); }

/* Announcements for screen readers only — a colour change on a button says
   nothing to somebody who is not looking at it. Clipped rather than
   display:none, which assistive tech skips entirely. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip-path: inset(50%);
}

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

.bar {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--line-strong);
  background: color-mix(in srgb, var(--surface-page) 94%, transparent);
  backdrop-filter: blur(12px);
}
.bar__inner {
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  min-height: var(--bar);
  display: flex; align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

.mark {
  flex: none;
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: var(--font-mono);
  font-size: 19px; font-weight: 600;
  letter-spacing: -.055em; white-space: nowrap;
}
.mark:hover { color: var(--text-primary); }
.mark b { color: var(--accent); font-weight: 600; }

.rail {
  flex: 1 1 auto;
  min-width: 0;
  display: flex; align-items: center;
  gap: clamp(18px, 2.4vw, 34px);
  font-size: 13px; font-weight: 700;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail a {
  position: relative;
  min-height: 44px;
  display: inline-flex; align-items: center;
}
.rail a::after {
  content: ""; position: absolute; right: 0; bottom: 12px; left: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 180ms ease;
}
.rail a:hover::after,
.rail a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.rail a[aria-current="page"] { color: var(--accent-strong); }

/* Keep the language control inside the header in either reading direction. */
.langs { position: relative; flex: 0 0 auto; }
.langs summary {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 44px; min-height: 44px;
  cursor: pointer; list-style: none;
  font-size: 13px; font-weight: 700;
}
.langs summary::-webkit-details-marker { display: none; }
.langs summary::after { content: "▾"; }
.langs__menu {
  position: absolute; inset-inline-end: 0; top: 100%;
  width: 190px; padding: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface-page);
}
.langs__menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 44px; padding: 8px 10px;
  font-size: 14px;
}
.langs__menu a:hover, .langs__menu a[aria-current="page"] {
  color: var(--accent-strong); background: var(--surface-muted);
}
.langs__code { font-size: 12px; }

/* The shared error page includes an Arabic section within its English shell. */
.prose[lang="ar"] {
  --font-display: "Segoe UI", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", Tahoma, sans-serif;
  font-family: var(--font-display);
  line-height: 1.95;
}
.prose[lang="ar"] h2, .prose[lang="ar"] h3 { line-height: 1.4; letter-spacing: 0; }

.bar__stamp {
  flex: none; margin: 0;
  padding-left: clamp(16px, 2vw, 28px);
  border-left: 1px solid var(--line-strong);
  min-height: 44px;
  display: flex; align-items: center; gap: .38em;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px;
}
.bar__stamp span { color: var(--accent-strong); font-weight: 600; }
@media (max-width: 1100px) { .bar__stamp { display: none; } }

/* ---------- spec strip ---------- */

.strip { border-bottom: 1px solid var(--line-strong); background: var(--surface-muted); }
.strip__grid {
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.strip__cell {
  padding: 20px clamp(14px, 2vw, 28px);
  border-left: 1px solid var(--line);
}
.strip__cell:first-child { border-left: 0; padding-left: 0; }
.strip__k {
  display: block; margin-bottom: 8px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.strip__v {
  display: block;
  font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 400; line-height: 1;
  /* A stat value should never break across lines. This used to be done by
     writing the date with non-breaking hyphens, which meant build-tables
     could not own the value — doing it in CSS lets the date come straight
     from data/contracts.json. */
  white-space: nowrap;
}
.strip__v small {
  font-family: var(--font-body); font-size: 11px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0;
}
@media (max-width: 720px) {
  .strip__grid { grid-template-columns: 1fr 1fr; }
  .strip__cell:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip__cell:nth-child(n+3) { border-top: 1px solid var(--line); }
}

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

.lede {
  min-height: clamp(560px, calc(100dvh - var(--bar)), 800px);
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(400px, 0.94fr);
  border-bottom: 1px solid var(--line-strong);
}
.lede__left {
  align-self: center;
  padding: clamp(48px, 7vh, 78px) clamp(36px, 5vw, 72px) clamp(48px, 7vh, 78px) 0;
}
.lede__right {
  align-self: stretch;
  min-width: 0; margin: 0;
  padding: clamp(36px, 4vw, 56px);
  border-left: 1px solid var(--line-strong);
  background: var(--surface-muted);
  display: flex; flex-direction: column; justify-content: center;
}
/* full-bleed hero visual variant */
.lede__visual {
  min-width: 0; margin: 0; padding: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--surface-muted);
  overflow: hidden;
}
.lede__visual img {
  width: 100%; height: 100%; min-height: 560px;
  object-fit: cover; object-position: center;
}
@media (max-width: 1100px) { .lede { grid-template-columns: minmax(0,1fr) minmax(340px,.85fr); } }
@media (max-width: 900px) {
  .lede { min-height: 0; grid-template-columns: 1fr; }
  .lede__left { padding: 46px 0 40px; }
  .lede__right { border-left: 0; border-top: 1px solid var(--line-strong); padding: 36px 0; background: transparent; }
  .lede__visual { border-left: 0; border-top: 1px solid var(--line-strong); }
  .lede__visual img { min-height: 320px; max-height: 46vh; }
}

/* ---------- featured story ---------- */

.featured {
  min-height: 420px;
  display: grid;
  grid-template-columns: minmax(320px, 0.8fr) minmax(0, 1.2fr);
  border-bottom: 1px solid var(--line-strong);
}
.featured figure {
  min-width: 0; margin: 0;
  border-right: 1px solid var(--line-strong);
  background: var(--surface-muted);
  overflow: hidden;
}
.featured figure img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; }
.featured__copy { align-self: center; padding: clamp(34px, 5vw, 72px); }
.featured__copy h2 {
  max-width: 680px; margin: 16px 0 0;
  font-family: var(--font-display);
  font-size: clamp(34px, 4.4vw, 62px);
  font-weight: 400; line-height: .99; letter-spacing: -.035em;
}
.featured__copy > p { max-width: 560px; margin: 22px 0 0; color: var(--text-secondary); font-size: 16px; line-height: 1.65; }
.featured__copy .btn-row { margin-top: 26px; }
@media (max-width: 900px) {
  .featured { grid-template-columns: 1fr; }
  .featured figure { border-right: 0; border-bottom: 1px solid var(--line-strong); }
  .featured figure img { min-height: 260px; max-height: 40vh; }
  .featured__copy { padding: 34px 0; }
}

/* ---------- closing statement strip ---------- */

.strip-statement {
  min-height: 210px;
  padding: 52px 0;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-strong);
}
.strip-statement h2 {
  max-width: 720px; margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: clamp(32px, 4.2vw, 58px);
  font-weight: 400; line-height: 1; letter-spacing: -.035em;
}
.strip-statement p { max-width: 560px; margin: 18px 0 0; color: var(--text-secondary); line-height: 1.65; }

.kicker {
  margin: 0 0 14px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

h1.display {
  max-width: 800px;
  margin: 0 0 4px;
  /* -.06em had the letterforms touching at the large end of the clamp, which
     reads as cramped rather than tight. .92 leading also let the serif line's
     descenders run into the cap height of the line under it. */
  letter-spacing: -.035em;
  font-weight: 800;
  font-size: clamp(50px, 6.1vw, 92px);
  line-height: .96;
  text-wrap: balance;
}
/* the template's signature: serif opening line, grotesque payoff line */
h1.display .serif {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
}
h1.display em { font-style: normal; color: var(--accent); }

.lede p {
  max-width: 520px;
  margin: 26px 0 0;
  color: var(--text-secondary);
  font-size: 18px; line-height: 1.6;
}
.lede p strong { color: var(--text-primary); font-weight: 700; }
.lede__right p { font-size: 15px; }

/* ---------- buttons / arrow links ---------- */

.btn {
  width: max-content; min-height: 46px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 0 16px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--text-primary);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.btn::after { content: "\2192"; font-family: var(--font-mono); transition: transform 180ms ease; }
.btn--plain::after { content: none; }
.btn:hover { color: var(--text-inverse); border-color: var(--accent-strong); background: var(--accent-strong); }
.btn:hover::after { transform: translateX(4px); }
.btn--solid { color: var(--text-inverse); border-color: var(--accent-strong); background: var(--accent-strong); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- section headings ---------- */

.rule {
  min-height: 104px;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 18px;
  padding: 44px 0 20px;
  border-bottom: 1px solid var(--line-strong);
  margin-bottom: 0;
}
.rule__t {
  text-wrap: balance;
  flex: none; margin: 0;
  max-width: 100%;
  font-family: var(--font-display);
  font-size: clamp(32px, 3.6vw, 52px);
  font-weight: 400; line-height: 1;
  letter-spacing: -.02em;
  text-transform: none;
}
.rule__line { flex: 1 1 auto; }
.rule__more {
  flex: none; padding-bottom: 10px;
  color: var(--accent-strong);
  font-size: 13px; font-weight: 700;
}
.rule__more:hover { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- card grids (entry grid) ---------- */

.grid {
  display: grid; gap: 0;
  border-bottom: 1px solid var(--line-strong);
}
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.cell {
  padding: clamp(26px, 3vw, 44px);
  display: flex; flex-direction: column; gap: 10px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface-page);
  transition: background 160ms ease;
}
.grid--2 .cell:nth-child(2n), .grid--3 .cell:nth-child(3n), .grid--4 .cell:nth-child(4n) { border-right: 0; }
a.cell:hover { background: var(--surface-muted); color: var(--text-primary); }
a.cell:hover .cell__t {
  text-wrap: balance; color: var(--accent-strong); }

.cell__n {
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.cell__t {
  margin: 6px 0 4px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.3vw, 33px);
  font-weight: 400; line-height: 1.04;
  letter-spacing: -.015em;
}
.cell__d { margin: 0; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
.cell__meta {
  margin-top: auto; padding-top: 18px;
  display: flex; flex-wrap: wrap; gap: 14px;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- topic rows ---------- */

.rows { border-bottom: 1px solid var(--line-strong); }
.row {
  position: relative;
  min-height: 150px;
  padding: 28px 0;
  display: grid;
  grid-template-columns: 44px minmax(260px, 1fr) auto 44px;
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  border-bottom: 1px solid var(--line);
  transition: background 160ms ease;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-muted); color: var(--text-primary); }
.row:hover .row__t { color: var(--accent-strong); }

.row__n {
  align-self: start;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  padding-top: 6px;
}
.row__t {
  display: block; margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.6vw, 38px);
  font-weight: 400; line-height: 1.02;
  letter-spacing: -.015em;
}
.row__d { display: block; max-width: 560px; margin: 0; color: var(--text-secondary); font-size: 15px; line-height: 1.65; }
.row__m {
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.row::after {
  content: "\2192";
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 14px;
  transition: transform 180ms ease, background 160ms ease, color 160ms ease;
}
.row:hover::after { background: var(--accent-strong); border-color: var(--accent-strong); color: var(--text-inverse); transform: translateX(4px); }
@media (max-width: 820px) {
  .row { grid-template-columns: 30px minmax(0,1fr); gap: 16px; min-height: 0; }
  .row__m { grid-column: 2; }
  .row::after { display: none; }
}

/* ---------- filter band ---------- */

.board-tools {
  min-height: 96px;
  padding: 18px 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  border-bottom: 1px solid var(--line-strong);
}
.filter-field {
  min-height: 46px;
  display: flex; align-items: center; gap: 10px;
  flex: 1 1 260px; max-width: 360px;
  padding: 0 4px;
  border-bottom: 2px solid var(--text-primary);
}
.filter-field:focus-within { border-color: var(--accent); }
.filter-field label {
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.filter-field input {
  flex: 1 1 auto; min-width: 0; min-height: 44px;
  border: 0; outline: 0; background: transparent;
  font-size: 14px;
}
.filter-field input::placeholder { color: var(--text-secondary); }

.chip {
  min-height: 44px; padding: 0 15px;
  display: inline-flex; align-items: center; gap: 12px;
  border: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
.chip:hover { border-color: var(--accent-strong); color: var(--accent-strong); }
.chip[aria-pressed="true"] { color: var(--text-inverse); border-color: var(--accent-strong); background: var(--accent-strong); }

.count {
  margin-left: auto;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px;
}

/* ---------- tables ---------- */

.tablewrap { overflow-x: auto; border-bottom: 1px solid var(--line-strong); }

table.data {
  width: 100%; min-width: 720px;
  border-collapse: collapse;
  font-size: 13px;
}
table.data caption {
  padding: 20px 0 16px;
  text-align: left;
  max-width: 760px;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.6;
}
table.data th {
  padding: 12px 16px 12px 0;
  text-align: left; white-space: nowrap;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
table.data td {
  padding: 13px 16px 13px 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  color: var(--text-secondary);
  line-height: 1.5;
}
table.data tbody tr:hover td { background: var(--surface-muted); color: var(--text-primary); }
table.data .num { text-align: right; padding-right: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
table.data th.num { text-align: right; padding-right: 0; }
table.data .sym { color: var(--text-primary); font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
table.data .u { color: var(--text-secondary); }

.tag {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; white-space: nowrap;
}
.tag--equity { color: var(--text-primary); }
.tag--etf    { color: var(--long); border-color: var(--long); background: var(--long-wash); }
.tag--lev    { color: var(--text-inverse); border-color: var(--accent-strong); background: var(--accent-strong); }
.tag--intl   { color: var(--accent-strong); border-color: var(--accent-strong); background: var(--accent-wash); }
.tag--cmdty  { color: var(--text-secondary); }

.empty-row td {
  padding: 60px 0 !important;
  text-align: center;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 12px;
  text-transform: uppercase; letter-spacing: .06em;
}

.kv { width: 100%; border-collapse: collapse; margin-top: 22px; border-top: 1px solid var(--line); }
.kv th {
  width: 46%;
  padding: 11px 12px 11px 0; text-align: left;
  border-bottom: 1px solid var(--line);
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.kv td {
  padding: 11px 0; text-align: right;
  border-bottom: 1px solid var(--line);
  font-size: 13px; font-variant-numeric: tabular-nums;
}

/* ---------- article layout ---------- */

.crumbs {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 26px 0 0;
  color: var(--text-secondary); font-size: 12px;
}
.crumbs a:hover { color: var(--accent-strong); }
.crumbs span { color: var(--line-strong); }

.doc {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: clamp(40px, 8vw, 130px);
  padding: 44px 0 88px;
}
@media (min-width: 1100px) {
  .doc { grid-template-columns: 230px minmax(0, var(--reading)); }
  .doc__rail { order: -1; }
}
.doc__rail-inner { position: sticky; top: calc(var(--bar) + 28px); }

.toc__h {
  margin: 0 0 0;
  padding-bottom: 12px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.toc ol { list-style: none; margin: 0; padding: 0; counter-reset: toc; border-top: 1px solid var(--line-strong); }
.toc li { counter-increment: toc; }
.toc a {
  min-height: 50px;
  display: grid; grid-template-columns: 26px 1fr; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13px; line-height: 1.35;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
}
.toc a:hover, .toc a.is-active { color: var(--accent-strong); }

.doc__body { max-width: var(--reading); min-width: 0; }

.meta {
  display: flex; flex-wrap: wrap; gap: 8px 26px;
  margin: 0 0 30px; padding-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .03em; text-transform: uppercase;
}
.meta b { color: var(--accent-strong); font-weight: 600; }

.doc__body h1 {
  max-width: 900px; margin: 0 0 24px;
  font-family: var(--font-display);
  font-size: clamp(42px, 5.4vw, 76px);
  font-weight: 400; letter-spacing: -.045em; line-height: .95;
}
.standfirst {
  max-width: 720px;
  margin: 0 0 40px; padding-bottom: 34px;
  border-bottom: 1px solid var(--line-strong);
  color: var(--text-secondary);
  font-size: clamp(17px, 1.6vw, 21px); line-height: 1.62;
}

.doc__body h2 {
  margin: 62px 0 20px; padding-top: 34px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400; line-height: 1.02; letter-spacing: -.025em;
  scroll-margin-top: calc(var(--bar) + 24px);
}
.doc__body h3 {
  margin: 40px 0 12px;
  font-family: var(--font-display);
  font-size: clamp(22px, 2.1vw, 28px);
  font-weight: 400; line-height: 1.15; letter-spacing: -.015em;
}
.doc__body h4 {
  margin: 30px 0 10px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.doc__body p { margin: 0 0 20px; font-size: 17px; line-height: 1.78; }
.doc__body p, .prose p { text-wrap: pretty; }
.doc__body ul, .doc__body ol { margin: 0 0 24px; padding-left: 22px; }
.doc__body li { margin-bottom: 10px; font-size: 17px; line-height: 1.7; }
.doc__body li::marker { color: var(--accent); }
.doc__body strong { font-weight: 700; }
.doc__body em { font-style: italic; }
.doc__body code {
  padding: .08em .34em;
  border: 1px solid var(--line);
  background: var(--surface-raised);
  font-family: var(--font-mono); font-size: .86em;
}
.doc__body a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px; }
.doc__body a:hover { color: var(--accent-strong); }

.doc__body blockquote {
  margin: 34px 0; padding: 0 0 0 26px;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: clamp(20px, 2vw, 26px); line-height: 1.42;
}
.doc__body blockquote p { font-size: inherit; line-height: inherit; font-family: inherit; }
.doc__body blockquote cite {
  display: block; margin-top: 14px;
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px; font-style: normal;
  letter-spacing: .04em; text-transform: uppercase;
}

.doc__body .tablewrap { margin: 30px 0; border-top: 1px solid var(--line-strong); }
.doc__body table.data { min-width: 520px; font-size: 12.5px; }
.doc__body table.data th { border-top: 0; }
/* the 6-column contract board needs its full width even inside an article */
[data-board] table.data { min-width: 760px; }

/* callouts */
.note, .warn, .check {
  margin: 34px 0; padding: 24px 26px;
  border: 1px solid var(--line-strong);
  background: var(--surface-raised);
}
.note { border-left: 3px solid var(--line-strong); }
.warn { border-left: 3px solid var(--accent); background: var(--accent-wash); }
.check { border-left: 3px solid var(--long); background: var(--long-wash); }
.note > :last-child, .warn > :last-child, .check > :last-child { margin-bottom: 0; }
.note__h, .warn__h, .check__h {
  margin: 0 0 10px !important;
  font-family: var(--font-mono); font-size: 10px !important; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-secondary) !important;
}
.warn .warn__h { color: var(--accent-strong) !important; }
.check .check__h { color: var(--long) !important; }
.note p, .warn p, .check p, .note li, .warn li, .check li { font-size: 15px !important; line-height: 1.7 !important; }

/* steps */
ol.steps { list-style: none; margin: 34px 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line-strong); }
ol.steps > li {
  counter-increment: step; position: relative;
  margin: 0; padding: 22px 0 22px 58px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
}
ol.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 24px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}
ol.steps > li > strong:first-child {
  display: block; margin-bottom: 6px;
  font-family: var(--font-display); font-size: 21px; font-weight: 400;
}

/* figures */
figure { margin: 40px 0; }
figure img { width: 100%; border: 1px solid var(--line-strong); background: var(--surface-muted); }
figcaption {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.65;
}
figcaption b {
  color: var(--accent-strong); font-weight: 600;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .06em; text-transform: uppercase;
}

/* sources */
sup.ref { font-family: var(--font-mono); font-size: 10px; }
.sources { margin-top: 66px; padding-top: 26px; border-top: 1px solid var(--line-strong); }
.sources h2 {
  margin: 0 0 20px !important; padding-top: 0 !important; border-top: 0 !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important; font-weight: 600 !important;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-strong);
}
.sources ol { padding-left: 20px; }
.sources li { font-size: 13px !important; line-height: 1.6 !important; color: var(--text-secondary); }
.sources a { word-break: break-word; }

/* prev / next */
.nextprev {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin-top: 56px; border-top: 1px solid var(--line-strong);
}
@media (max-width: 640px) { .nextprev { grid-template-columns: 1fr; } }
.nextprev a {
  padding: 26px 26px 26px 0;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
}
.nextprev a:last-child { border-right: 0; padding-left: 26px; }
.nextprev a:hover { background: var(--surface-muted); }
.nextprev span {
  display: block; margin-bottom: 10px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.nextprev b {
  font-family: var(--font-display); font-size: clamp(20px, 2vw, 26px);
  font-weight: 400; line-height: 1.1;
}
.nextprev a:hover b { color: var(--accent-strong); }

/* ---------- CTA ---------- */

.cta {
  margin: 40px 0; padding: 32px;
  border: 1px solid var(--line-strong);
  background: var(--surface-muted);
}
.cta__h {
  margin: 0 0 12px !important;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px !important; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.cta p { font-size: 15px !important; color: var(--text-secondary); margin-bottom: 18px !important; }
.cta__fine { margin: 18px 0 0 !important; font-size: 12px !important; line-height: 1.65 !important; }

/* ---------- calculators ---------- */

.tool {
  display: grid; grid-template-columns: repeat(2, 1fr);
  margin: 36px 0;
  border: 1px solid var(--line-strong);
}
@media (max-width: 820px) { .tool { grid-template-columns: 1fr; } }
.tool__in  { padding: clamp(24px, 3vw, 36px); border-right: 1px solid var(--line-strong); }
.tool__out { padding: clamp(24px, 3vw, 36px); background: var(--surface-muted); }
@media (max-width: 820px) { .tool__in { border-right: 0; border-bottom: 1px solid var(--line-strong); } }
.tool__h {
  margin: 0 0 22px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

.field { margin-bottom: 20px; }
.field > label {
  display: block; margin-bottom: 8px;
  font-size: 13px; font-weight: 700;
}
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; min-height: 46px; padding: 0 12px;
  border: 1px solid var(--line-strong);
  background: var(--surface-page);
  font-family: var(--font-mono); font-size: 15px;
}
.field input:focus, .field select:focus { outline: 0; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.field small { display: block; margin-top: 7px; color: var(--text-secondary); font-size: 12px; line-height: 1.5; }

.seg { display: flex; border: 1px solid var(--line-strong); }
.seg button {
  flex: 1; min-height: 46px;
  border: 0; border-right: 1px solid var(--line-strong);
  background: transparent;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { color: var(--text-inverse); background: var(--accent-strong); }
.seg button[aria-pressed="true"].is-long { background: var(--long); }
.seg button[aria-pressed="true"].is-short { background: var(--accent-strong); }

.readout { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.readout:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.readout__k {
  margin-bottom: 8px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.readout__v {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 52px);
  font-weight: 400; line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.readout__v.is-long  { color: var(--long); }
.readout__v.is-short { color: var(--accent-strong); }
.readout__v.is-amber { color: var(--accent); }
.readout__v small {
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  color: var(--text-secondary); letter-spacing: 0;
}
.readout__n { margin: 12px 0 0; color: var(--text-secondary); font-size: 13px; line-height: 1.6; }

.noscript-note {
  margin: 34px 0; padding: 22px 26px;
  border: 1px solid var(--accent);
  background: var(--accent-wash);
  font-size: 14px; line-height: 1.65;
}

/* ---------- page intro (index / info pages) ---------- */

.page-head {
  min-height: 300px;
  padding: clamp(44px, 6vw, 82px) 0;
  border-bottom: 1px solid var(--line-strong);
}
.page-head h1 {
  max-width: 980px; margin: 0;
  font-family: var(--font-display);
  font-size: clamp(46px, 6.4vw, 92px);
  font-weight: 400; letter-spacing: -.05em; line-height: .92;
  text-transform: none;
}
.page-head p {
  max-width: 720px; margin: 24px 0 0;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.5vw, 20px); line-height: 1.7;
}
.page-head .kicker { margin-bottom: 14px; }

.prose { max-width: var(--reading); padding: 52px 0 20px; }
.prose h2 {
  margin: 52px 0 18px; padding-top: 30px;
  border-top: 1px solid var(--line-strong);
  font-family: var(--font-display);
  font-size: clamp(28px, 3.2vw, 44px);
  font-weight: 400; line-height: 1.02; letter-spacing: -.025em;
}
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 {
  margin: 34px 0 10px;
  font-family: var(--font-display);
  font-size: clamp(21px, 2vw, 26px); font-weight: 400; line-height: 1.15;
}
.prose p { margin: 0 0 20px; font-size: 17px; line-height: 1.78; }
.prose ul, .prose ol { margin: 0 0 24px; padding-left: 22px; }
.prose li { margin-bottom: 10px; font-size: 17px; line-height: 1.7; }
.prose li::marker { color: var(--accent); }
.prose a { color: var(--accent-strong); text-decoration: underline; text-underline-offset: .18em; }
.prose strong { font-weight: 700; }

.mono-note {
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
}

/* inline links inside running copy that is not .prose / .doc__body */
.strip-statement a,
.mono-note a,
.cell__d a,
.featured__copy p a,
.lede p a,
figcaption a,
table.data a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
}
.strip-statement a:hover,
.mono-note a:hover,
.cell__d a:hover,
.featured__copy p a:hover,
.lede p a:hover,
figcaption a:hover,
table.data a:hover { color: var(--accent-strong); }

.updated-flag {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--long); background: var(--long-wash); color: var(--long);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}

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

.foot { border-top: 1px solid var(--line-strong); background: var(--surface-muted); margin-top: 0; }
.foot__grid {
  min-height: 180px;
  padding: 48px 0 40px;
  display: grid;
  grid-template-columns: minmax(240px, 1.4fr) auto auto auto;
  gap: clamp(32px, 6vw, 92px);
  align-items: start;
}
@media (max-width: 1000px) { .foot__grid { grid-template-columns: 1fr 1fr; gap: 36px; } }
@media (max-width: 560px) { .foot__grid { grid-template-columns: 1fr; } }

.foot h2 {
  margin: 0 0 14px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.foot__about h2 {
  color: var(--text-primary);
  font-family: var(--font-mono); font-size: 19px; font-weight: 600;
  letter-spacing: -.055em; text-transform: none;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.foot li { margin: 0; }
/* 44px, matching every other tappable target on the site — footer links are
   the ones a thumb reaches for last and misses most. */
.foot a { min-height: 44px; display: inline-flex; align-items: center; font-size: 13px; }
.foot a:hover { color: var(--accent-strong); }
.foot__about p { max-width: 320px; margin: 0; color: var(--text-secondary); font-size: 13px; line-height: 1.65; }

.foot__bar {
  min-height: 62px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px 28px;
  border-top: 1px solid var(--line);
  color: var(--text-secondary);
  font-family: var(--font-mono); font-size: 11px;
}

/* ---------- button cascade guard ----------
   .doc__body a and .prose a (0,1,1) out-specify .btn / .btn--solid (0,1,0),
   which repainted solid buttons accent-on-accent — invisible red on red.
   These selectors are 0,2,1 and must stay at the end of the file. */

a.btn[class] { text-decoration: none; }
a.btn:not(.btn--solid) { color: var(--text-primary); }
a.btn.btn--solid { color: var(--text-inverse); }
a.btn:hover,
a.btn:focus-visible { color: var(--text-inverse); }
/* solid buttons darken to ink on hover — going lighter to --accent would
   drop the label to 3.74:1, below the AA floor */
a.btn.btn--solid:hover,
a.btn.btn--solid:focus-visible {
  color: var(--text-inverse);
  background: var(--text-primary);
  border-color: var(--text-primary);
}



/* ---------- Referral code band, home page ----------
   Directly under the stat strip so it is inside the first screenful on a
   360px phone as well as on desktop — a code below the fold is a code nobody
   uses. Deliberately not styled as a promo banner: hairline rules, no radius,
   the same mono kicker as the strip above it.

   The code is plain selectable text and the copy button ships hidden for the
   script to reveal, so with JavaScript off there is a code you can select
   rather than a button that does nothing. */

.invite {
  border-bottom: 1px solid var(--line-strong);
  background: var(--surface-raised);
}
.invite__grid {
  width: min(var(--content-width), calc(100% - (var(--page-gutter) * 2)));
  margin-inline: auto;
  padding: 18px 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px clamp(18px, 3vw, 40px);
}
.invite__k {
  display: block; margin-bottom: 6px;
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.invite__code { display: flex; align-items: center; gap: 12px; }
.invite__v {
  font-family: var(--font-mono); font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 600; letter-spacing: .08em; line-height: 1;
  user-select: all;
}
.invite__btn {
  min-height: 38px;
  display: inline-flex; align-items: center;
  padding: 0 14px;
  border: 1px solid var(--accent-strong);
  background: var(--accent-strong);
  color: var(--text-inverse);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.invite__btn:hover { background: var(--text-primary); border-color: var(--text-primary); }
.invite__btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.invite__btn.is-done { background: var(--long); border-color: var(--long); }
.invite__say {
  flex: 1 1 320px; min-width: 0; margin: 0;
  color: var(--text-secondary);
  font-size: 13px; line-height: 1.5;
}
.invite__say b { color: var(--text-primary); font-weight: 700; }
.invite__fine {
  display: block; margin-top: 4px;
  font-family: var(--font-mono); font-size: 10px; line-height: 1.5;
  color: var(--text-secondary);
}

@media (max-width: 720px) {
  .invite__grid { padding: 14px 0; gap: 10px 18px; }
  .invite__say { flex-basis: 100%; font-size: 12px; }
}

/* ---------- Referral code, beside the registration button ----------
   The code sits in the conversion block next to the link that already carries
   it, for the reader who would rather register on the app or type it in by
   hand than follow the link. Hairline outline against the cta's muted fill,
   no radius, mono — it reads as a value to be taken, not a second CTA
   competing with the button next to it.

   The code stays plain selectable text; the button ships hidden and is
   revealed by script, so with JavaScript off there is a copyable code rather
   than a button that does nothing. */

.cta__row {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 14px 20px;
  margin-bottom: 18px;
}
.refcode {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 7px 8px 7px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface-page);
}
.refcode__k {
  color: var(--accent-strong);
  font-family: var(--font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.refcode__v {
  font-family: var(--font-mono); font-size: 16px; font-weight: 600;
  letter-spacing: .08em; line-height: 1;
  /* the one thing here a reader may want to drag-select */
  user-select: all;
}
.refcode__btn {
  min-height: 32px;
  display: inline-flex; align-items: center;
  padding: 0 12px;
  border: 1px solid var(--accent-strong);
  background: var(--accent-strong);
  color: var(--text-inverse);
  font-family: var(--font-body); font-size: 12px; font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.refcode__btn:hover { background: var(--text-primary); border-color: var(--text-primary); }
.refcode__btn:focus-visible { outline: 2px solid var(--accent-strong); outline-offset: 2px; }
.refcode__btn.is-done { background: var(--long); border-color: var(--long); }

@media (max-width: 560px) {
  .refcode { width: 100%; justify-content: space-between; }
}

/* ---------- article TOC below 1100px ----------
   The rail is first in DOM order so the sticky column can sit left at wide
   viewports. Below the breakpoint the grid collapses and that same rail would
   render as a full-width stack ABOVE the <h1> — on the 18-section cornerstone
   that is ~900px of navigation before the headline. Collapse it to a
   horizontal chip rail instead, reusing the .chip idiom from the board filter.
   Scroll-spy (.is-active) keeps working untouched. */

@media (max-width: 1099px) {
  .doc { gap: 28px; }

  .toc__h { padding-bottom: 10px; border-bottom: 0; margin-bottom: 8px; }

  .toc ol {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    border-top: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 20px), transparent 100%);
  }
  .toc ol::-webkit-scrollbar { display: none; }

  .toc li { flex: 0 0 auto; }

  .toc a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    white-space: nowrap;
    border: 1px solid var(--line-strong);
    border-left-width: 1px;
    font-size: 12px;
  }
  .toc a::before { content: counter(toc, decimal-leading-zero); }
  .toc a.is-active,
  .toc a:hover {
    color: var(--text-inverse);
    background: var(--accent-strong);
    border-color: var(--accent-strong);
  }
  .toc a.is-active::before, .toc a:hover::before { color: inherit; }
}

/* checklist questions promoted from <strong> to linkable <h3> inside ol.steps;
   keep the visual weight the <strong> had, and let the list counter do the
   numbering rather than repeating it in the heading text */
ol.steps > li > h3.q {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 23px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.015em;
  scroll-margin-top: calc(var(--bar) + 24px);
}
ol.steps > li[id] { scroll-margin-top: calc(var(--bar) + 24px); }

/* checklist questions appear in the TOC as sub-entries under their group */
.toc li.is-sub a { padding-left: 1.6rem; font-size: 12px; color: var(--text-secondary); }
.toc li.is-sub a::before { content: none; }
.toc li.is-sub a:hover, .toc li.is-sub a.is-active { color: var(--accent-strong); }
@media (max-width: 1099px) {
  .toc li.is-sub a { padding-left: 14px; }
}