/* vibgg — editorial data design.
   A newspaper's data desk, not a dashboard: serif for content, sans for chrome,
   rules instead of boxes, and colour spent only on the sign of a figure. The
   look is doing the same job as the byline and the editorial policy — saying
   that someone is accountable for these numbers. */

:root {
  color-scheme: light dark;

  --bg:        #fdfcfa;   /* warm paper */
  --panel:     #ffffff;
  --panel-alt: #f6f4f0;
  --ink:       #14120f;
  --ink-2:     #3b3833;
  --dim:       #7a736a;
  --line:      #e2ddd4;
  --line-soft: #eeeae3;
  --rule:      #14120f;   /* structural rules are ink, not grey */
  --accent:    #9a3412;   /* ink red */
  --accent-bg: #fbf1ea;
  --pos:       #11745a;   /* positive / up */
  --neg:       #d13b32;   /* negative / down */
  --warn-bg:   #fdf6e6;
  --warn-line: #d9c48a;
  --warn-ink:  #6b5310;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
           "Songti TC", "Noto Serif TC", "Times New Roman", serif;
  --sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
           "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --mono:  ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --r-sm: 2px; --r-md: 3px;
  --wrap: 1120px;
}

/* Night reading, not an inverted palette: the paper dims to a warm dark and the
   ink warms to cream, so the same design holds rather than becoming a different
   one after dark. */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #131211;
    --panel:     #1a1917;
    --panel-alt: #211f1c;
    --ink:       #ece7de;
    --ink-2:     #c3bcb0;
    --dim:       #8d857a;
    --line:      #2e2b26;
    --line-soft: #241f1b;
    --rule:      #6a6055;
    --accent:    #e07a52;
    --accent-bg: #2a1d15;
    --pos:       #4fb583;
    --neg:       #e07a52;
    --warn-bg:   #262009;
    --warn-line: #6e5c22;
    --warn-ink:  #dcc179;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

main { max-width: var(--wrap); margin: 0 auto; padding: 34px 24px 80px; }

/* ── masthead ───────────────────────────────────────────────────────────── */

/* Off-screen until focused, then pinned over the masthead. Deliberately not
   display:none, which would remove it from the tab order and defeat the point. */
.skip-link {
  /* fixed, not absolute: an absolutely positioned skip link scrolls away with
     the document, so a visitor who tabs after scrolling gets a link parked
     off-screen above the page. */
  position: fixed;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  border: 1px solid var(--rule, currentColor);
  border-radius: 4px;
  background: var(--panel, #fff);
  color: var(--ink, #111);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus {
  top: 10px;
  outline: 2px solid var(--accent, #245fe5);
  outline-offset: 2px;
}
/* The target receives focus programmatically and must not show a ring. */
#content:focus { outline: none; }

header.site {
  position: sticky; top: 0; z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}
header.site .topbar {
  max-width: var(--wrap); margin: 0 auto;
  display: flex; align-items: center; gap: 26px;
  padding: 15px 24px;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); flex: none; }
.brand:hover { text-decoration: none; }
.brand .mark { width: 24px; height: 24px; display: block; color: var(--ink); }
.brand b { font-family: var(--serif); font-size: 23px; font-weight: 600; letter-spacing: -.022em; }
.brand .tag {
  color: var(--dim); font-size: 12.5px; padding-left: 12px;
  border-left: 1px solid var(--line);
}

header.site nav { display: flex; gap: 3px; margin-right: auto; }
header.site nav a {
  color: var(--ink-2); font-size: 12.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .08em;
  padding: 6px 10px; border-bottom: 2px solid transparent; border-radius: 0;
  flex: 0 0 auto; white-space: nowrap;
}
header.site nav a:hover { color: var(--ink); background: var(--panel-alt); text-decoration: none; }
header.site nav a[aria-current] { color: var(--ink); border-bottom-color: var(--accent); box-shadow: none; }

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .72);
  cursor: pointer;
}
.nav-toggle:hover { border-color: #aeb8ca; background: #fff; }
.nav-toggle img { width: 22px; height: 22px; display: block; }
.nav-toggle img[hidden] { display: none; }

.lang { position: relative; flex: none; }
.lang summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 9px; font-size: 13.5px; color: var(--ink-2); border-radius: var(--r-sm);
}
.lang summary::-webkit-details-marker { display: none; }
.lang summary:hover, .lang[open] summary { color: var(--ink); background: var(--panel-alt); }
.lang summary .globe { width: 15px; height: 15px; opacity: .7; flex: none; }
.lang summary .chev { width: 9px; height: 9px; opacity: .55; transition: transform .15s; }
.lang[open] summary .chev { transform: rotate(180deg); }
/* Click-away and Escape are handled by app.js; a CSS-only overlay cannot work
   under a sticky header. Without scripting the menu still opens and closes. */
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 196px; z-index: 50;
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: 5px;
}
.lang-menu a {
  display: flex; justify-content: space-between; gap: 14px; align-items: center;
  padding: 8px 11px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14px; white-space: nowrap;
}
.lang-menu a:hover { background: var(--panel-alt); color: var(--ink); text-decoration: none; }
.lang-menu a[aria-current] { color: var(--ink); font-weight: 600; }
.lang-menu a[aria-current]::after { content: "✓"; color: var(--accent); font-size: 12px; }
.lang-menu .code { color: var(--dim); font-size: 11.5px; font-family: var(--mono); white-space: nowrap; }

/* ── type ───────────────────────────────────────────────────────────────── */

h1, h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -.014em; }
h1 { font-size: 35px; line-height: 1.14; margin: 6px 0 12px; }
h2 { font-size: 22px; margin: 40px 0 12px; }
.lede { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--ink-2); max-width: 62ch; margin: 0 0 26px; }
.sub  { color: var(--dim); font-size: 13.5px; margin: -8px 0 16px; }
.note { color: var(--dim); font-size: 13.5px; max-width: 74ch; margin: 14px 0 0; }
.note.basis { border-left: 2px solid var(--line); padding-left: 12px; margin-top: 18px; }
.empty { color: var(--dim); padding: 48px 24px; text-align: center; border: 1px dashed var(--line); }
.dim { color: var(--dim); }
.sm  { font-size: 12px; }
.unit { color: var(--dim); font-size: 11px; margin-left: 2px; }

/* ── hero ───────────────────────────────────────────────────────────────── */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 330px;
  gap: 64px; align-items: start; padding: 46px 0 22px;
}
.hero-copy { min-width: 0; }
.hero h1 { font-size: 54px; line-height: 1.02; max-width: 12ch; letter-spacing: -.024em; margin: 0 0 18px; }
.hero .lede { font-size: 19px; max-width: 44ch; margin: 0; }
.hero .cta { margin: 28px 0 0; }

/* The hero figure is set like a chart caption: a rule above it, no box. */
.hero-card {
  display: grid; gap: 3px; padding: 20px 0 0;
  border-top: 2px solid var(--rule); color: var(--ink);
}
.hero-card:hover { text-decoration: none; border-color: var(--accent); }
.hc-label {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--dim);
}
.hc-symbol { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-top: 8px; letter-spacing: .02em; }
.hc-figure {
  font-family: var(--serif); font-size: 48px; font-weight: 600;
  letter-spacing: -.032em; line-height: 1.06; margin: 4px 0 4px;
  font-variant-numeric: tabular-nums;
}
.hc-caption { font-size: 13px; color: var(--dim); line-height: 1.45; }
.hc-foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 15px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--dim);
}
.hc-foot b { font-family: var(--mono); font-size: 14px; font-variant-numeric: tabular-nums; }
.hc-venue { font-family: var(--mono); font-size: 11.5px; }

.cta { display: flex; gap: 10px; flex-wrap: wrap; margin: 24px 0; }
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: transparent; color: var(--ink); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: background .12s, color .12s;
}
.btn:hover { text-decoration: none; background: var(--panel-alt); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.section-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  margin: 50px 0 0; padding-bottom: 6px;
}
.section-head h2 { margin: 0; }
.section-head .more { font-size: 13px; font-weight: 600; white-space: nowrap; }

/* ── the standfirst figure ──────────────────────────────────────────────── */

.tldr {
  border-left: 3px solid var(--rule); padding: 4px 0 4px 20px;
  margin: 0 0 26px; font-size: 16px; max-width: 78ch;
}
.tldr b { font-family: var(--serif); font-size: 22px; font-variant-numeric: tabular-nums; }

.banner {
  display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: baseline;
  border: 1px solid var(--warn-line); border-radius: var(--r-md);
  padding: 13px 16px; margin: 0 0 20px; font-size: 13.5px;
  background: var(--warn-bg); color: var(--warn-ink);
}
.banner.info { background: var(--panel-alt); border-color: var(--line); color: var(--dim); }
.banner strong { font-weight: 700; }

/* ── tables: rules above and below, never a box ─────────────────────────── */

.scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
}
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td {
  padding: 11px 14px; text-align: left; white-space: nowrap;
  border-bottom: 1px solid var(--line-soft);
}
table.data thead th {
  font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  color: var(--ink); text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--line);
}
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.r, table.data th.r { text-align: right; }
table.data td.r { font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; }
table.data th.narrow, table.data td.narrow { width: 1%; }
table.data td .sym { font-family: var(--serif); font-size: 16px; font-weight: 600; color: var(--ink); }
table.data tbody tr:hover { background: var(--panel-alt); }
table.data tbody tr.best { background: var(--accent-bg); }
table.compare td:first-child { color: var(--dim); }

.pos { color: var(--pos); }
.neg { color: var(--neg); }
.zero { color: var(--dim); }

/* A magnitude rule under each number, on a track so a near-zero value reads as
   small rather than as missing. */
table.data td.bar-col { position: relative; min-width: 128px; padding-bottom: 16px; }
table.data td.bar-col::after {
  content: ""; position: absolute; right: 14px; bottom: 8px;
  height: 3px; width: calc(100% - 28px); background: var(--line-soft);
}
table.data td.bar-col .bar {
  position: absolute; right: 14px; bottom: 8px; z-index: 1;
  height: 3px; max-width: calc(100% - 28px); min-width: 3px;
  background: color-mix(in srgb, var(--ink) 62%, transparent); pointer-events: none;
}
table.data td.bar-col .bar.pos  { background: color-mix(in srgb, var(--pos) 78%, transparent); }
table.data td.bar-col .bar.neg  { background: color-mix(in srgb, var(--neg) 78%, transparent); }
table.data td.bar-col .bar.zero { background: var(--line); }
table.data thead th.bar-col { padding-bottom: 16px; }
table.data thead th.bar-col::after { display: none; }

.flag {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--warn-line); color: #241c00;
  font-size: 10px; font-weight: 800; vertical-align: 1px;
}
a.ex { font-weight: 600; }

.spark { display: block; width: 76px; height: 20px; overflow: visible; }
.spark path { fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.spark .zero-line { stroke: var(--line); stroke-width: 1; }

/* ── forms ──────────────────────────────────────────────────────────────── */

form.calc {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 18px; background: var(--panel-alt); border: 1px solid var(--line);
  border-radius: var(--r-md); padding: 22px; margin: 0 0 28px;
}
form.calc.hold { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.field small { color: var(--dim); font-size: 11.5px; line-height: 1.45; }
.field input, .field select {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--bg); color: var(--ink); font-variant-numeric: tabular-nums;
}
.field input:focus, .field select:focus { border-color: var(--rule); }
.field.check { justify-content: flex-end; }
.field.check label {
  display: flex; gap: 8px; align-items: center; cursor: pointer;
  text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500;
}
.field.check input { width: auto; accent-color: var(--accent); }
.field.submit { justify-content: flex-end; }
.field.submit .btn { width: 100%; justify-content: center; }

/* ── long form ──────────────────────────────────────────────────────────── */

.article-layout { display: grid; grid-template-columns: minmax(0, 66ch) 220px; gap: 56px; align-items: start; }
.prose { max-width: 66ch; }
.prose h2 { font-size: 25px; margin: 42px 0 14px; scroll-margin-top: 84px; }
.prose p, .prose li { font-family: var(--serif); font-size: 17.5px; line-height: 1.72; color: var(--ink-2); }
.prose p { margin: 0 0 17px; }
.prose ul, .prose ol { margin: 0 0 17px; padding-left: 24px; }
.prose li { margin-bottom: 8px; }
.prose strong { color: var(--ink); font-weight: 600; }
.prose .lede { margin-bottom: 20px; }
.prose .article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -8px 0 10px;
  color: var(--dim);
  font-family: var(--sans);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
/* The drop cap opens the article body, not the standfirst. Anchoring it to
   ":first-of-type" put it on the summary paragraph instead; the byline sits
   between the two, so that is what the cap follows. */
.prose > .byline + p::first-letter {
  float: left; font-family: var(--serif); font-size: 3.15em; line-height: .82;
  padding: 6px 10px 0 0; color: var(--ink);
}

.measured {
  margin: 44px 0 0; padding: 20px 22px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--panel-alt);
}
.measured h2 { margin: 0 0 10px; font-size: 17px; }
.measured p { font-family: var(--sans); font-size: 14.5px; margin: 0 0 8px; color: var(--ink-2); }
.measured .note { margin: 10px 0 0; }

.byline {
  font-family: var(--sans); font-size: 13px; color: var(--dim);
  margin: 0 0 28px; padding: 11px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

.toc { position: sticky; top: 84px; }
.toc-inner { border-left: 1px solid var(--line); padding-left: 18px; }
.toc-title {
  font-family: var(--sans); margin: 0 0 10px; font-size: 10.5px; font-weight: 700;
  color: var(--dim); text-transform: uppercase; letter-spacing: .1em;
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li { margin-bottom: 10px; }
.toc a { font-family: var(--sans); color: var(--dim); font-size: 13px; line-height: 1.4; display: block; }
.toc a:hover { color: var(--ink); text-decoration: none; }
.toc-meta { font-family: var(--sans); margin: 18px 0 0; font-size: 12px; }
.guide-more { margin-top: 52px; }

.guide-list { display: grid; margin-top: 22px; border-top: 1px solid var(--line); }
.guide-card { padding: 22px 0; border-bottom: 1px solid var(--line); }
.guide-card h2 { margin: 0 0 8px; font-size: 23px; }
.guide-card p { margin: 0 0 9px; color: var(--dim); font-size: 15px; max-width: 72ch; }
.guide-card .meta { font-family: var(--sans); font-size: 12px; margin: 0; }

.analysis {
  margin: 40px 0 0; padding: 24px 0 0;
  border-top: 1px solid var(--line);
}
.analysis h2 { margin: 0 0 14px; }
.analysis p { font-family: var(--serif); font-size: 17px; margin: 0 0 13px; max-width: 70ch; color: var(--ink-2); }
.analysis p:last-of-type { margin-bottom: 0; }

.related { margin: 52px 0 0; }
.related ul {
  list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 0;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); border-top: 1px solid var(--line);
}
.related a { display: block; padding: 18px 0; border-bottom: 1px solid var(--line); color: var(--ink); margin-right: 28px; }
.related a:hover { text-decoration: none; }
.related a:hover b { color: var(--accent); }
.related b { font-family: var(--serif); display: block; font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.related span { display: block; font-size: 13.5px; color: var(--dim); line-height: 1.5; }

ul.pairs {
  list-style: none; padding: 0; margin: 14px 0 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 9px 22px;
}
ul.pairs a { font-size: 14.5px; }

pre.formula {
  background: var(--panel-alt); border-left: 2px solid var(--rule);
  padding: 16px 18px; margin: 0 0 20px; overflow-x: auto;
  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: var(--ink-2);
}

footer.site { border-top: 1px solid var(--rule); margin-top: 64px; }
footer.site .inner {
  max-width: var(--wrap); margin: 0 auto; padding: 28px 24px 60px;
  color: var(--dim); font-size: 13px;
}
footer.site .disclaimer { max-width: 92ch; margin: 0 0 10px; }
footer.site .meta { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }

/* ── responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; order: -1; margin: 0 0 28px; }
  .toc-inner { border-left: 0; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-md); }
  .toc ol { columns: 2; column-gap: 24px; }
  .toc-meta { display: none; }
}

@media (max-width: 940px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 30px; }
  .hero h1 { font-size: 42px; max-width: 16ch; }
  .hero-card { max-width: 420px; }
}

@media (max-width: 760px) {
  main { padding: 24px 16px 60px; }
  header.site .topbar { padding: 12px 16px; gap: 14px; flex-wrap: wrap; }
  .brand .tag { display: none; }
  header.site nav { order: 3; width: 100%; margin: 0; overflow-x: auto; }
  .hero h1 { font-size: 33px; }
  .hero .lede { font-size: 17px; }
  .prose p, .prose li { font-size: 16.5px; }
  .toc ol { columns: 1; }
}

/* ── home / white research desk ─────────────────────────────────────────── */

body.home-page {
  color-scheme: light;
  --bg: #fff;
  --panel: #fff;
  --panel-alt: #f7f9fc;
  --ink: #070b2d;
  --ink-2: #313854;
  --dim: #68708c;
  --line: #dfe3ec;
  --line-soft: #edf0f5;
  --accent: #245fe5;
  --accent-bg: #eef4ff;
  --pos: #11745a;
  --neg: #d13b32;
  --shadow: 0 1px 2px rgba(7,11,45,.04);
  background: #fff;
  font-family: var(--sans);
  overflow-x: clip;
}

.home-page header.site {
  background: #eef4ff;
  backdrop-filter: none;
  border-color: transparent;
}
.home-page header.site .topbar {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  min-height: 64px;
  padding: 10px 20px;
  gap: 22px;
}
.home-page .brand { gap: 10px; }
.home-page .brand .mark { width: 32px; height: 32px; margin-left: 0; }
.home-page .brand b {
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", var(--sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}
.home-page .brand .tag { margin-left: 6px; padding-left: 15px; color: var(--dim); font-size: 12px; }
.home-page header.site nav {
  position: absolute;
  left: 54%;
  gap: 14px;
  margin: 0;
  transform: translateX(-50%);
}
.home-page header.site nav a {
  color: var(--ink);
  font-size: 16px;
  padding: 6px 4px;
  letter-spacing: 0;
  text-transform: none;
}
.home-page .lang summary { color: var(--ink-2); font-size: 14px; }
.home-page .lang { margin-left: auto; }
.home-page .lang summary .globe { display: none; }

.home-page main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 76px 56px 84px;
}

.home-intro {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(520px, 1fr);
  align-items: start;
  gap: 82px;
  min-height: 286px;
}
/* The hero surface was a 103 KB JPEG of a plain vertical gradient, and being a
   real element it became the Largest Contentful Paint: 4.2 s on localhost, for
   an image carrying no information. Drawn in CSS it costs nothing, cannot be
   an LCP candidate, and the heading takes that role back.
   Stops sampled from the original asset so the surface is unchanged. */
.home-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -76px;
  bottom: -8px;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #eaf1fc 0%,
    #eef2fc 25%,
    #f4f7fd 50%,
    #fafdfe 75%,
    #fefefe 100%
  );
}
.home-copy h1 {
  margin: 0 0 17px;
  max-width: none;
  font-size: clamp(42px, 4vw, 64px);
  line-height: 1.02;
  letter-spacing: -.045em;
  font-family: var(--sans);
  font-weight: 700;
}
.home-copy .lede {
  width: 740px;
  max-width: none;
  margin: 0;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
}
.home-copy .cta { margin: 35px 0 0; gap: 24px; }
.home-copy .btn {
  min-height: 52px;
  padding: 13px 24px;
  border-radius: 6px;
  font-size: 18px;
  font-weight: 650;
}
.home-copy .btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(36,95,229,.14);
}
.home-copy .btn.primary:hover {
  border-color: #174fc9;
  background: #174fc9;
}

.home-formula { min-width: 0; padding-top: 4px; }
.home-formula h2 {
  margin: 0 0 24px;
  color: #48506c;
  font-family: var(--mono);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.formula-row {
  display: grid;
  grid-template-columns: 1fr auto 1.35fr auto .7fr auto 1.15fr;
  align-items: start;
  gap: 14px;
}
.formula-term { min-width: 0; text-align: center; }
.formula-term b {
  display: block;
  white-space: nowrap;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 20px;
  line-height: 1.25;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.formula-term small {
  display: block;
  margin-top: 7px;
  color: var(--dim);
  font-size: 13px;
}
.formula-term.formula-result b { color: var(--accent); font-size: 27px; letter-spacing: -.03em; }
.formula-op { padding-top: 2px; color: var(--ink-2); font-size: 20px; line-height: 1; }
.formula-note {
  margin: 24px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 15px;
}
.formula-margin { margin: 9px 0 0; color: var(--ink-2); font-size: 15px; }

.home-explorer {
  display: grid;
  grid-template-columns: 375px minmax(0, 1fr);
  gap: 28px;
  align-items: end;
  margin-top: 17px;
}
.contract-picker label {
  display: block;
  margin-bottom: 7px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 560;
}
.contract-picker select {
  width: 100%;
  height: 56px;
  padding: 0 44px 0 17px;
  border: 1px solid #cbd1de;
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font: 650 22px/1 var(--sans);
  cursor: pointer;
}
.contract-picker select:hover { border-color: #aab3c5; }
.contract-picker select:focus { border-color: var(--accent); outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent); }
.explorer-context {
  min-height: 56px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 16px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 16px;
}
.explorer-context > span { font-weight: 570; color: var(--ink); }
.explorer-context a { font-weight: 600; }
.explorer-context time { margin-left: auto; color: var(--dim); font-size: 13px; white-space: nowrap; }

.home-comparison {
  display: grid;
  grid-template-columns: 405px minmax(0, 1fr);
  margin-top: 23px;
}
.estimate-summary {
  min-width: 0;
  padding: 0 32px 20px 0;
  border-right: 1px solid var(--line);
}
.estimate-summary h2 {
  margin: 0 0 16px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 530;
}
.estimate-value {
  margin: 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(56px, 5vw, 76px);
  line-height: 1;
  font-weight: 680;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.estimate-basis { margin: 13px 0 0; color: var(--ink-2); font-size: 15px; }
.estimate-margin,
.estimate-best { margin: 17px 0 0; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink-2); }
.estimate-margin,
.estimate-best { font-size: 16px; }
.estimate-margin b { color: var(--ink); font-family: var(--mono); font-size: 21px; }
.estimate-best a { margin-left: 7px; font-family: var(--mono); font-size: 19px; }

.venue-chart { min-width: 0; padding-left: 34px; }
.venue-chart-head,
.venue-chart-row {
  display: grid;
  grid-template-columns: 220px minmax(150px, 1fr) 130px 140px;
  gap: 12px;
  align-items: center;
}
.venue-chart-head {
  min-height: 32px;
  color: var(--dim);
  font-size: 14px;
  border-bottom: 1px solid var(--line);
}
.venue-chart-head span:first-child { grid-column: 1 / 3; }
.venue-chart-head span:nth-child(2),
.venue-chart-head span:nth-child(3) { text-align: right; }
.venue-chart-row {
  min-height: 45px;
  color: var(--ink);
  border-bottom: 1px solid var(--line-soft);
  font-size: 16px;
}
.venue-chart-row:hover { text-decoration: none; background: #fbfcff; }
.venue-name { display: flex; align-items: baseline; gap: 9px; font-weight: 610; }
.venue-name .live-trait { color: var(--accent); font-size: 10.5px; font-weight: 650; }
.venue-bar {
  display: block;
  width: 100%;
  height: 7px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  appearance: none;
  background: #f1f3f7;
}
.venue-bar::-webkit-progress-bar { background: #f1f3f7; }
.venue-bar::-webkit-progress-value { background: #aeb4c1; }
.venue-bar::-moz-progress-bar { background: #aeb4c1; }
.venue-chart-row.is-best .venue-name,
.venue-chart-row.is-best .venue-rate,
.venue-chart-row.is-best .venue-cost { color: var(--accent); }
.venue-chart-row.is-best .venue-bar::-webkit-progress-value { background: var(--accent); }
.venue-chart-row.is-best .venue-bar::-moz-progress-bar { background: var(--accent); }
.venue-rate,
.venue-cost { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.venue-axis {
  display: flex;
  justify-content: space-between;
  margin: 5px 282px 0 232px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.venue-axis-label {
  margin: -1px 282px 0 232px;
  color: var(--ink-2);
  font-size: 12px;
  text-align: center;
}
.venue-saving { margin: 12px 0 0; color: var(--ink-2); font-size: 15px; }
.venue-saving::first-letter { color: var(--ink); }

/* Homepage figures: a short count-up makes the cost calculation legible as a
   sequence, then a restrained settle pulse draws the eye to the answer. */
.number-motion {
  font-variant-numeric: tabular-nums;
}
.number-motion.is-counting,
[data-number-result].is-settled {
  will-change: transform, opacity, filter;
}
.number-motion.is-counting {
  animation: number-rise 640ms cubic-bezier(.2,.75,.25,1) both;
  animation-delay: var(--number-delay, 0ms);
}
[data-number-result].is-settled {
  animation: number-settle 520ms cubic-bezier(.2,.8,.2,1) both;
}
.venue-chart-row.bar-motion .venue-bar::-webkit-progress-value {
  transform: scaleX(0);
  transform-origin: left center;
  animation: venue-bar-grow 760ms cubic-bezier(.2,.75,.25,1) forwards;
  animation-delay: var(--bar-delay, 0ms);
}
.venue-chart-row.bar-motion .venue-bar::-moz-progress-bar {
  transform: scaleX(0);
  transform-origin: left center;
  animation: venue-bar-grow 760ms cubic-bezier(.2,.75,.25,1) forwards;
  animation-delay: var(--bar-delay, 0ms);
}
@keyframes number-rise {
  from { opacity: .12; transform: translateY(.45em); filter: blur(3px); }
  70% { opacity: 1; filter: blur(0); }
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes number-settle {
  0% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  45% { transform: scale(1.035); text-shadow: 0 8px 24px color-mix(in srgb, currentColor 18%, transparent); }
  100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
}
@keyframes venue-bar-grow {
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .number-motion,
  .number-motion.is-counting,
  [data-number-result].is-settled,
  .venue-chart-row.bar-motion .venue-bar::-webkit-progress-value,
  .venue-chart-row.bar-motion .venue-bar::-moz-progress-bar {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

.home-markets { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); }
.home-markets .section-head { margin: 0; }
.home-markets .section-head h2 { font-family: var(--sans); font-size: 21px; }
.home-markets .sub { margin-top: 2px; }
.home-market-scroll { border: 0; border-radius: 0; }
.home-market-table { font-size: 16px; }
.home-market-table thead th { background: #fff; border-top: 0; text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.home-market-table th,
.home-market-table td { padding: 10px 0 10px 18px; font-family: var(--sans); }
.home-market-table td .sym { font-family: var(--sans); }
.home-market-table th:first-child,
.home-market-table td:first-child { padding-left: 0; }
.home-market-table tbody tr:hover { background: #fbfcff; }

@media (max-width: 1080px) {
  .home-page main { padding: 56px 32px 84px; }
  .home-intro { grid-template-columns: 1fr; gap: 38px; }
  .home-intro::before { top: -56px; bottom: -8px; }
  .home-copy .lede { width: auto; max-width: 720px; }
  .home-page header.site nav { position: static; margin: 0 auto; transform: none; }
  .home-formula { max-width: 760px; }
  .home-comparison { grid-template-columns: 310px minmax(0, 1fr); }
  .venue-chart-head,
  .venue-chart-row { grid-template-columns: 210px minmax(110px, 1fr) 105px 112px; }
  .venue-axis { margin-right: 229px; margin-left: 222px; }
}

@media (max-width: 760px) {
  .home-page header.site .topbar { padding: 11px 16px; min-height: 0; gap: 12px; }
  .home-page header.site nav { width: 100%; gap: 14px; margin: 0; }
  .home-page .brand .mark { width: 28px; height: 28px; }
  .home-page main { padding: 38px 16px 60px; }
  .home-intro { min-height: 0; padding-bottom: 40px; }
  .home-intro::before { top: -38px; bottom: 0; }
  .home-copy h1 { font-size: 40px; }
  .home-copy .cta { gap: 10px; }
  .home-copy .btn { flex: 1 1 auto; justify-content: center; }
  .formula-row { grid-template-columns: 1fr auto 1.4fr; row-gap: 18px; }
  .formula-row .formula-op:nth-child(4) { display: none; }
  .formula-row .formula-term:nth-child(1) { grid-column: 1; grid-row: 1; }
  .formula-row .formula-op:nth-child(2) { grid-column: 2; grid-row: 1; }
  .formula-row .formula-term:nth-child(3) { grid-column: 3; grid-row: 1; }
  .formula-row .formula-term:nth-child(5) { grid-column: 1; grid-row: 2; }
  .formula-row .formula-op:nth-child(6) { grid-column: 2; grid-row: 2; }
  .formula-row .formula-term.formula-result { grid-column: 3; grid-row: 2; }
  .formula-term b { font-size: 14px; }
  .formula-term.formula-result b { font-size: 25px; }
  .formula-term small { font-size: 12px; }
  .home-explorer { grid-template-columns: 1fr; gap: 14px; }
  .explorer-context { flex-wrap: wrap; padding: 10px 0; }
  .explorer-context time { width: 100%; margin-left: 0; }
  .home-comparison { grid-template-columns: 1fr; }
  .estimate-summary { padding: 0 0 26px; border-right: 0; border-bottom: 1px solid var(--line); }
  .venue-chart { padding: 22px 0 0; overflow-x: auto; }
  .venue-chart-head,
  .venue-chart-row { min-width: 620px; }
  .venue-axis { min-width: 338px; margin-right: 252px; margin-left: 222px; }
  .home-markets { margin-top: 26px; }
}

/* ── site-wide white / cobalt visual system ────────────────────────────── */

body:not(.home-page) {
  color-scheme: light;
  --bg: #fff;
  --panel: #fff;
  --panel-alt: #f7f9fc;
  --ink: #070b2d;
  --ink-2: #313854;
  --dim: #68708c;
  --line: #dfe3ec;
  --line-soft: #edf0f5;
  --rule: #dfe3ec;
  --accent: #245fe5;
  --accent-bg: #eef4ff;
  --pos: #11745a;
  --neg: #d13b32;
  background: #fff;
  font-family: var(--sans);
}

body:not(.home-page) header.site {
  border-color: var(--line-soft);
  background: #fff;
}
body:not(.home-page) header.site .topbar {
  position: relative;
  max-width: 1440px;
  min-height: 64px;
  margin: 0 auto;
  padding: 10px 20px;
  gap: 22px;
}
body:not(.home-page) .brand { gap: 10px; }
body:not(.home-page) .brand .mark { width: 32px; height: 32px; margin-left: 0; }
body:not(.home-page) .brand b {
  color: var(--ink);
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", var(--sans);
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.045em;
}
body:not(.home-page) .brand .tag {
  margin-left: 6px;
  padding-left: 15px;
  color: var(--dim);
  font-size: 12px;
}
body:not(.home-page) header.site nav {
  position: absolute;
  left: 54%;
  gap: 14px;
  margin: 0;
  transform: translateX(-50%);
}
body:not(.home-page) header.site nav a {
  padding: 6px 4px;
  color: var(--ink);
  font-size: 16px;
  letter-spacing: 0;
  text-transform: none;
}
body:not(.home-page) header.site nav a:hover { background: transparent; color: var(--accent); }
body:not(.home-page) header.site nav a[aria-current] { color: var(--accent); border-bottom-color: var(--accent); box-shadow: none; }
body:not(.home-page) .lang { margin-left: auto; }
body:not(.home-page) .lang summary { color: var(--ink-2); font-size: 14px; }
body:not(.home-page) .lang summary .globe { display: none; }

body:not(.home-page) main {
  max-width: 1440px;
  margin: 0 auto;
  padding: 48px 56px 84px;
}
body:not(.home-page) h1,
body:not(.home-page) h2 {
  color: var(--ink);
  font-family: var(--sans);
}
body:not(.home-page) h1 {
  margin: 0 0 14px;
  font-size: clamp(40px, 3.6vw, 56px);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -.04em;
}
body:not(.home-page) h2 {
  margin-top: 42px;
  font-size: 25px;
  font-weight: 650;
  letter-spacing: -.025em;
}
body:not(.home-page) .lede {
  max-width: 760px;
  margin-bottom: 30px;
  color: var(--ink-2);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.55;
}
body:not(.home-page) a { color: var(--accent); }

body:not(.home-page) .btn {
  min-height: 46px;
  padding: 11px 20px;
  border-color: #cbd1de;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font-size: 15px;
}
body:not(.home-page) .btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 5px 14px rgba(36,95,229,.14);
}
body:not(.home-page) .btn.primary:hover { border-color: #174fc9; background: #174fc9; }

body:not(.home-page) .scroll {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
body:not(.home-page) table.data { font-size: 15px; }
body:not(.home-page) table.data th,
body:not(.home-page) table.data td { padding: 13px 14px; }
body:not(.home-page) table.data thead th {
  color: var(--dim);
  font-size: 11px;
  letter-spacing: .08em;
}
body:not(.home-page) table.data td .sym,
body:not(.home-page) table.data td.r {
  font-family: var(--sans);
}
body:not(.home-page) table.data td .sym { color: var(--ink); font-size: 15px; font-weight: 650; }
body:not(.home-page) table.data td.r { font-size: 14px; font-variant-numeric: tabular-nums; }
body:not(.home-page) table.data tbody tr:hover { background: #fbfcff; }
body:not(.home-page) table.data tbody tr.best { background: var(--accent-bg); }

body:not(.home-page) form.calc {
  gap: 18px;
  padding: 22px;
  border-color: var(--line);
  border-radius: 8px;
  background: var(--panel-alt);
}
body:not(.home-page) .field label {
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: .04em;
}
body:not(.home-page) .field input,
body:not(.home-page) .field select {
  min-height: 44px;
  border-color: #cbd1de;
  border-radius: 6px;
  background: #fff;
}
body:not(.home-page) .field input:focus,
body:not(.home-page) .field select:focus { border-color: var(--accent); outline: 2px solid rgba(36,95,229,.14); }

body:not(.home-page) .tldr {
  border-left-color: var(--accent);
  padding-left: 18px;
}
body:not(.home-page) .tldr b,
body:not(.home-page) .hc-figure,
body:not(.home-page) .related b { font-family: var(--sans); }
body:not(.home-page) .prose p,
body:not(.home-page) .prose li,
body:not(.home-page) .analysis p {
  color: var(--ink-2);
  font-family: var(--sans);
}
body:not(.home-page) .prose > .byline + p::first-letter {
  float: none;
  padding: 0;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
body:not(.home-page) .toc-inner { border-color: var(--line); }
body:not(.home-page) pre.formula { border-left-color: var(--accent); border-radius: 0 6px 6px 0; }

body:not(.home-page) footer.site { border-color: var(--line); }
body:not(.home-page) footer.site .inner {
  max-width: 1440px;
  padding: 28px 56px 60px;
}

@media (max-width: 1080px) {
  body:not(.home-page) header.site nav { position: static; margin: 0 auto; transform: none; }
  body:not(.home-page) main { padding-right: 32px; padding-left: 32px; }
}

@media (max-width: 760px) {
  body:not(.home-page) header.site .topbar { min-height: 0; padding: 11px 16px; gap: 12px; }
  body:not(.home-page) .brand .mark { width: 28px; height: 28px; margin-left: 0; }
  body:not(.home-page) .brand b { font-size: 24px; }
  body:not(.home-page) header.site nav { width: 100%; gap: 14px; margin: 0; }
  body:not(.home-page) header.site nav a { font-size: 15px; }
  body:not(.home-page) main { padding: 30px 16px 60px; }
  body:not(.home-page) h1 { font-size: 40px; }
  body:not(.home-page) .lede { font-size: 17px; }
  body:not(.home-page) table.data th,
  body:not(.home-page) table.data td { padding: 11px 12px; }
  body:not(.home-page) footer.site .inner { padding-right: 16px; padding-left: 16px; }
}

/* ── inner-page comparison workbench (direction 2) ────────────────────── */

.inner-page main {
  max-width: 1440px;
  padding-top: 38px;
}
.inner-page .page-heading { margin: 0 0 28px; }
.inner-page .page-heading .eyebrow,
.inner-page .eyebrow {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.inner-page .page-heading h1 { max-width: 980px; }
.inner-page .page-heading .lede { margin-bottom: 0; }
.inner-page .page-heading-row {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 40px;
}
.inner-page .updated-stamp {
  flex: none;
  margin: 0 0 8px;
  color: var(--dim);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.inner-page .updated-stamp span { display: none; }
.inner-page .heading-action { flex: none; margin: 0 0 7px; }

.inner-page .panel {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.inner-page .panel-head {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 22px;
  border-bottom: 1px solid var(--line);
}
.inner-page .panel-head h2 {
  margin: 1px 0 0;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}
.inner-page .panel-kicker {
  margin: 0;
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.inner-page .panel-meta {
  color: var(--dim);
  font-size: 12px;
  white-space: nowrap;
}
.inner-page .info-dot,
.inner-page .info-label {
  flex: none;
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.inner-page .workbench-toolbar,
.inner-page form.calc.workbench-toolbar {
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(250px, 1.35fr) repeat(2, minmax(110px, .45fr)) auto;
  align-items: end;
  gap: 12px;
  margin: 0 0 22px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.inner-page .market-toolbar { align-items: center; }
.inner-page .contract-control {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.inner-page .contract-control > span {
  color: var(--dim);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.inner-page .contract-control select {
  width: 100%;
  min-height: 46px;
  padding: 0 38px 0 14px;
  border: 1px solid #cbd1de;
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  font: 650 16px/1 var(--sans);
}
.inner-page .toolbar-copy {
  min-height: 46px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  padding: 10px 14px;
  border-left: 1px solid var(--line);
}
.inner-page .toolbar-copy strong { color: var(--ink); font-size: 19px; }
.inner-page .toolbar-copy span { color: var(--dim); font-size: 12px; }
.inner-page .toolbar-action { min-height: 46px; justify-content: center; }

.inner-page form.calc.funding-toolbar {
  grid-template-columns: minmax(190px, 1.35fr) repeat(3, minmax(120px, .72fr)) auto;
}
.inner-page .funding-toolbar .field,
.inner-page .funding-toolbar .field.submit { gap: 5px; justify-content: end; }
.inner-page .funding-toolbar .field input,
.inner-page .funding-toolbar .field select { min-height: 46px; }
.inner-page .funding-toolbar .field.submit .btn { min-height: 46px; }

.inner-page .funding-workbench {
  display: grid;
  grid-template-columns: minmax(330px, .84fr) minmax(0, 1.46fr);
  gap: 14px;
}
.inner-page .estimate-panel { display: flex; flex-direction: column; }
.inner-page .estimate-panel .panel-head { border-bottom: 0; padding-bottom: 4px; }
.inner-page .workbench-metric {
  margin: 8px 22px 0;
  color: var(--ink);
  font-family: var(--mono);
  font-size: clamp(42px, 4vw, 58px);
  line-height: 1;
  font-weight: 680;
  letter-spacing: -.055em;
  font-variant-numeric: tabular-nums;
}
.inner-page .workbench-metric.neg { color: var(--neg); }
.inner-page .workbench-metric.pos { color: var(--pos); }
.inner-page .metric-basis {
  margin: 10px 22px 16px;
  color: var(--ink-2);
  font-size: 14px;
}
.inner-page .metric-detail {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin: 0 22px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 13px;
}
.inner-page .metric-detail strong { color: var(--ink); }
.inner-page .trend-block {
  margin-top: 4px;
  padding: 18px 22px 20px;
  border-top: 1px solid var(--line);
}
.inner-page .trend-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: baseline;
  margin-bottom: 9px;
}
.inner-page .trend-head h3 { margin: 0; font-size: 14px; font-weight: 650; }
.inner-page .trend-head span { color: var(--dim); font-size: 11px; }
.inner-page .spark-stack { border-top: 1px solid var(--line-soft); }
.inner-page .spark-row {
  min-height: 38px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 82px 88px;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 12px;
}
.inner-page .spark-row .spark { width: 82px; }
.inner-page .spark-row b {
  text-align: right;
  font-family: var(--mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
}
.inner-page .trend-block .note { margin-top: 12px; font-size: 11px; }

.inner-page .table-panel .scroll {
  border-top: 0;
  border-bottom: 0;
}
.inner-page .ranked-table thead th {
  height: 42px;
  background: #fbfcff;
}
.inner-page .ranked-table th:first-child,
.inner-page .ranked-table td:first-child { padding-left: 22px; }
.inner-page .ranked-table th:last-child,
.inner-page .ranked-table td:last-child { padding-right: 22px; }
.inner-page .ranked-table tbody tr { height: 54px; }
.inner-page .ranked-table tbody tr.best {
  background: #f2f6ff;
  box-shadow: inset 3px 0 0 var(--accent);
}
.inner-page .ranked-table .rank {
  width: 44px;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 12px;
}
.table-expand-row {
  display: none;
  justify-content: center;
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, #fbfcff 0%, #fff 100%);
}
.js .table-expand-row { display: flex; }
.js [data-collapsible-table]:not(.is-expanded) tbody tr:nth-child(n + 31) { display: none; }
.table-expand {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  border: 1px solid #cbd5e6;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  font: 650 13px/1.2 var(--sans);
  cursor: pointer;
  box-shadow: 0 2px 7px rgba(36,95,229,.06);
}
.table-expand:hover { border-color: var(--accent); background: #f7f9ff; }
.table-expand-icon { font-size: 14px; transition: transform .18s ease; }
[data-collapsible-table].is-expanded .table-expand-icon { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .table-expand-icon { transition: none; }
}
.inner-page .best-badge {
  display: inline-block;
  margin-left: 7px;
  padding: 2px 6px;
  border-radius: 10px;
  background: #dfeaff;
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .05em;
  vertical-align: 1px;
}
.inner-page .market-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--ink);
}
.inner-page .market-link:hover { color: var(--accent); text-decoration: none; }
.inner-page .market-link span { color: var(--accent); }

.inner-page .action-strip {
  min-height: 92px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 18px 0 0;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.inner-page .action-strip-copy {
  display: flex;
  align-items: center;
  gap: 16px;
}
.inner-page .action-strip-copy strong { font-size: 15px; }
.inner-page .action-strip-copy p { margin: 2px 0 0; color: var(--dim); font-size: 13px; }
.inner-page .action-strip .btn { min-width: 210px; justify-content: center; }
.inner-page .action-strip .cta { margin: 0; }
.inner-page .action-strip .ex {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  padding: 0 16px;
  border: 1px solid #cbd1de;
  border-radius: 6px;
}

.inner-page .insight-panel {
  margin: 22px 0 0;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.inner-page .insight-panel h2 { margin: 4px 0 16px; }
.inner-page .analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.inner-page .analysis-grid p {
  margin: 0;
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 14px;
  line-height: 1.55;
}

/* fees */
.inner-page .fee-panel,
.inner-page .market-panel { margin-top: 4px; }
.inner-page .comparison-section {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.inner-page .section-copy h2 { margin: 4px 0 8px; }
.inner-page .section-copy p:last-child { margin: 0; font-size: 14px; line-height: 1.55; }
.inner-page ul.comparison-pairs {
  grid-template-columns: repeat(2, minmax(240px, 1fr));
  gap: 10px;
  margin: 0;
}
.inner-page ul.comparison-pairs a {
  min-height: 54px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--ink);
}
.inner-page ul.comparison-pairs a:hover { border-color: #aebce0; background: #fbfcff; text-decoration: none; }
.inner-page ul.comparison-pairs small { color: var(--dim); }
.inner-page ul.comparison-pairs span:nth-of-type(2) { text-align: right; }
.inner-page ul.comparison-pairs b { color: var(--accent); font-family: var(--sans); }
.inner-page .verdict-panel { margin-bottom: 16px; padding-bottom: 18px; }
.inner-page .verdict-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 16px 18px 4px;
}
.inner-page .verdict-card {
  min-height: 120px;
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.inner-page .verdict-card.is-primary { border-color: #b8cbfb; background: #f5f8ff; }
.inner-page .verdict-card > span { display: block; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.inner-page .verdict-card strong { display: block; margin-top: 5px; font-size: 23px; }
.inner-page .verdict-card p { margin: 14px 0 0; color: var(--dim); font-size: 12px; line-height: 1.45; }
.inner-page .verdict-panel > .note { margin-left: 18px; }
.inner-page .side-panel { margin-top: 0; }
.inner-page .venue-insight-panel { margin-bottom: 16px; }
.inner-page .venue-insight-panel .panel-head { margin: -24px -24px 8px; }
.inner-page .fee-ladders { display: grid; gap: 16px; }
.inner-page .fee-ladders .panel-head h2 { margin: 1px 0 0; }
.inner-page .venue-comparisons { margin-top: 32px; }

/* calculator */
.inner-page .calculator-workbench {
  display: grid;
  grid-template-columns: minmax(320px, .66fr) minmax(0, 1.54fr);
  gap: 14px;
}
.inner-page .calculator-input-panel { align-self: start; }
.inner-page form.calc.calculator-form {
  grid-template-columns: 1fr;
  gap: 18px;
  margin: 0;
  padding: 22px;
  border: 0;
  border-radius: 0;
  background: #fff;
}
.inner-page .calculator-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.inner-page .calculator-form .field.check {
  justify-content: start;
  padding-top: 4px;
}
.inner-page .calculator-form .field.submit .btn { min-height: 48px; }
.inner-page .calculator-results-panel { align-self: start; }
.inner-page .result-summary {
  min-height: 186px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 24px 26px;
  border-bottom: 1px solid var(--line);
}
.inner-page .result-summary h2 { margin: 3px 0 12px; font-size: 20px; }
.inner-page .result-summary .workbench-metric,
.inner-page .result-summary .metric-basis { margin-left: 0; margin-right: 0; }
.inner-page .saving-callout {
  min-width: 150px;
  padding-left: 24px;
  border-left: 1px solid var(--line);
}
.inner-page .saving-callout span,
.inner-page .saving-callout small { display: block; color: var(--dim); font-size: 11px; }
.inner-page .saving-callout strong { display: block; margin: 4px 0; color: var(--accent); font-family: var(--mono); font-size: 25px; }
.inner-page .result-note { margin: 0; padding: 14px 22px; border-top: 1px solid var(--line); }

/* guides */
.inner-page .guide-heading { max-width: none; margin-bottom: 24px; }
.inner-page .guide-heading-row {
  align-items: flex-end;
}
.inner-page .guide-heading-row > div { min-width: 0; }
.inner-page .guide-total {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin: 0 0 3px;
  color: var(--dim);
  white-space: nowrap;
}
.inner-page .guide-total strong {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 30px;
  line-height: 1;
}
.inner-page .guide-total span { font-size: 12px; }
.inner-page .guide-topic-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 27px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.inner-page .guide-topic-nav > span {
  margin-right: 7px;
  color: var(--dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.inner-page .guide-topic-nav a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 6px;
  color: var(--ink-2);
  background: var(--panel-alt);
  font-size: 12px;
  font-weight: 650;
}
.inner-page .guide-topic-nav a:hover {
  color: var(--accent);
  text-decoration: none;
}
.inner-page .guide-topic-nav small {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  place-items: center;
  border-radius: 9px;
  background: #fff;
  color: var(--dim);
  font-family: var(--mono);
  font-size: 9px;
}
.inner-page .featured-guide {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr) 220px;
  min-height: 250px;
  margin-top: 26px;
  padding: 0;
  background: #f7f9ff;
}
.inner-page .featured-guide-marker {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 31px 25px;
  border-right: 1px solid #dfe6f5;
  background: #f0f4fc;
}
.inner-page .featured-guide-marker span {
  color: var(--accent);
  font-family: var(--mono);
  font-size: 24px;
  line-height: 1;
}
.inner-page .featured-guide-marker strong {
  color: var(--dim);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.inner-page .featured-guide-copy {
  align-self: center;
  padding: 30px 42px;
}
.inner-page .featured-guide h2 {
  max-width: 760px;
  margin: 7px 0 14px;
  font-size: clamp(27px, 2.4vw, 38px);
  line-height: 1.12;
}
.inner-page .featured-guide h2 a { color: var(--ink); }
.inner-page .featured-guide h2 a:hover { color: var(--accent); text-decoration: none; }
.inner-page .featured-guide-copy > p:not(.panel-kicker) {
  max-width: 750px;
  margin: 0;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.65;
}
.inner-page .featured-guide-action {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px 27px;
  border-left: 1px solid #dfe6f5;
  background: rgba(255,255,255,.55);
}
.inner-page .featured-guide-action .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  font-size: 11px;
}
.inner-page .featured-guide-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 15px;
  border-top: 1px solid #dfe6f5;
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}
.inner-page .featured-guide-link:hover { text-decoration: none; }
.inner-page .featured-guide-link span:last-child { font-size: 20px; transition: transform .16s ease; }
.inner-page .featured-guide-link:hover span:last-child { transform: translateX(4px); }
.inner-page .guide-catalog { margin-top: 56px; }
.inner-page .guide-catalog-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
}
.inner-page .guide-catalog-heading .eyebrow { margin: 0; }
.inner-page .guide-catalog-heading h2 {
  margin: 0;
  font-size: 28px;
}
.inner-page .guide-topic {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  gap: 34px;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
  scroll-margin-top: 100px;
}
.inner-page .guide-topic-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 13px;
  align-content: start;
}
.inner-page .guide-topic-count {
  margin: 4px 0 0;
  color: var(--accent);
  font-family: var(--mono);
  font-size: 13px;
}
.inner-page .guide-topic-heading h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.2;
}
.inner-page .guide-topic-heading p:not(.guide-topic-count) {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.55;
}
.inner-page .guide-topic-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px;
}
.inner-page .guide-topic-grid .guide-card {
  min-height: 205px;
  display: flex;
  flex-direction: column;
  padding: 20px 22px 17px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.inner-page .guide-topic-grid .guide-card:hover {
  border-color: #b9c8e7;
  box-shadow: 0 10px 26px rgba(18, 44, 91, .06);
  transform: translateY(-2px);
}
.inner-page .guide-card-topic {
  margin: 0 0 9px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.inner-page .guide-topic-grid .guide-card h3 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.3;
}
.inner-page .guide-topic-grid .guide-card h3 a { color: var(--ink); }
.inner-page .guide-topic-grid .guide-card h3 a:hover { color: var(--accent); text-decoration: none; }
.inner-page .guide-topic-grid .guide-card > p:not(.guide-card-topic) {
  margin: 0;
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
}
.inner-page .guide-topic-grid .guide-card footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 16px;
}
.inner-page .guide-topic-grid .guide-card footer .meta { font-size: 10.5px; }
.inner-page .guide-topic-grid .guide-card footer > a {
  display: grid;
  width: 30px;
  height: 30px;
  flex: none;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  font-size: 16px;
}
.inner-page .guide-topic-grid .guide-card footer > a:hover {
  border-color: var(--accent);
  background: var(--accent-bg);
  text-decoration: none;
}
.inner-page .article-layout {
  grid-template-columns: minmax(0, 720px) 260px;
  justify-content: center;
  gap: 72px;
  padding-top: 10px;
}
.inner-page .prose { max-width: 720px; }
.inner-page .prose > h1 { margin-top: 0; }
.inner-page .guide-figure {
  margin: 28px 0 38px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.inner-page .guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
}
.inner-page .guide-figure figcaption {
  margin: 0;
  padding: 12px 15px 13px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.5;
}
.inner-page .prose p,
.inner-page .prose li { font-size: 17px; line-height: 1.78; }
.inner-page .toc-inner {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}
.inner-page .toc-title { margin-top: 7px; color: var(--ink); font-size: 13px; }
.inner-page .toc .panel-kicker { color: var(--accent); }
.inner-page .toc-meta { padding-top: 14px; border-top: 1px solid var(--line); }
.inner-page .guide-more { max-width: 1052px; margin-right: auto; margin-left: auto; }
.inner-page main > .banner {
  margin: 42px 0 0;
  padding: 16px 0 0;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--dim);
  font-size: 11px;
}
.inner-page main > .banner strong { color: var(--ink-2); }
.inner-page .methodology-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 16px;
}
.inner-page .methodology-panel,
.inner-page .disclaimer-panel { padding-bottom: 22px; }
.inner-page .methodology-panel pre.formula {
  margin: 22px;
  border: 0;
  border-radius: 6px;
}
.inner-page .methodology-panel > .note,
.inner-page .disclaimer-panel > p { margin-right: 22px; margin-left: 22px; }
.inner-page .disclaimer-panel > p { color: var(--ink-2); font-size: 14px; line-height: 1.65; }
.inner-page .policy-prose {
  max-width: 820px;
  margin: 10px auto 0;
  padding: 38px 48px 48px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

@media (max-width: 1120px) {
  .inner-page form.calc.funding-toolbar { grid-template-columns: repeat(4, minmax(120px, 1fr)); }
  .inner-page .funding-toolbar .field.submit { grid-column: 1 / -1; }
  .inner-page .funding-workbench,
  .inner-page .calculator-workbench { grid-template-columns: 1fr; }
  .inner-page .featured-guide { grid-template-columns: 100px minmax(0, 1fr); }
  .inner-page .featured-guide-action {
    grid-column: 2;
    flex-direction: row;
    align-items: center;
    gap: 24px;
    padding: 18px 30px;
    border-top: 1px solid #dfe6f5;
    border-left: 0;
  }
  .inner-page .featured-guide-link { min-width: 160px; padding-top: 0; border-top: 0; }
  .inner-page .guide-topic { grid-template-columns: 1fr; gap: 18px; }
  .inner-page .guide-topic-heading { max-width: 560px; }
}

@media (max-width: 760px) {
  .inner-page .page-heading-row { display: block; }
  .inner-page .heading-action,
  .inner-page .updated-stamp { margin-top: 18px; }
  .inner-page .page-heading h1 { font-size: 38px; }
  .inner-page .workbench-toolbar,
  .inner-page form.calc.workbench-toolbar,
  .inner-page form.calc.funding-toolbar { grid-template-columns: 1fr 1fr; }
  .inner-page .market-toolbar .contract-control,
  .inner-page .market-toolbar .toolbar-action,
  .inner-page .funding-toolbar .position-field,
  .inner-page .funding-toolbar .field.submit { grid-column: 1 / -1; }
  .inner-page .toolbar-copy { border-left: 0; border-top: 1px solid var(--line); }
  .inner-page .panel-head { min-height: 70px; padding: 15px 16px; }
  .inner-page .workbench-metric { font-size: 45px; }
  .inner-page .metric-detail,
  .inner-page .workbench-metric,
  .inner-page .metric-basis { margin-right: 16px; margin-left: 16px; }
  .inner-page .trend-block { padding-right: 16px; padding-left: 16px; }
  .inner-page .action-strip { align-items: stretch; flex-direction: column; }
  .inner-page .action-strip .btn { width: 100%; }
  .inner-page .analysis-grid { grid-template-columns: 1fr; }
  .inner-page .comparison-section { grid-template-columns: 1fr; gap: 18px; }
  .inner-page ul.comparison-pairs { grid-template-columns: 1fr; }
  .inner-page .verdict-grid { grid-template-columns: 1fr; }
  .inner-page .result-summary { align-items: flex-start; flex-direction: column; }
  .inner-page .saving-callout { width: 100%; padding: 14px 0 0; border-top: 1px solid var(--line); border-left: 0; }
  .inner-page .guide-heading-row { display: block; }
  .inner-page .guide-total { margin-top: 18px; }
  .inner-page .guide-total strong { font-size: 24px; }
  .inner-page .guide-topic-nav {
    margin-right: -16px;
    padding-right: 16px;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .inner-page .guide-topic-nav::-webkit-scrollbar { display: none; }
  .inner-page .guide-topic-nav > span { display: none; }
  .inner-page .guide-topic-nav a { flex: none; }
  .inner-page .featured-guide { grid-template-columns: 1fr; min-height: 0; }
  .inner-page .featured-guide-marker {
    flex-direction: row;
    align-items: center;
    padding: 17px 18px;
    border-right: 0;
    border-bottom: 1px solid #dfe6f5;
  }
  .inner-page .featured-guide-marker span { font-size: 16px; }
  .inner-page .featured-guide-copy { padding: 23px 18px 25px; }
  .inner-page .featured-guide h2 { font-size: 28px; }
  .inner-page .featured-guide-action {
    grid-column: 1;
    padding: 17px 18px;
  }
  .inner-page .featured-guide-action .meta { gap: 4px; }
  .inner-page .featured-guide-link { min-width: 132px; }
  .inner-page .guide-catalog { margin-top: 44px; }
  .inner-page .guide-catalog-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .inner-page .guide-topic { padding: 26px 0 30px; }
  .inner-page .guide-topic-grid { grid-template-columns: 1fr; }
  .inner-page .guide-topic-grid .guide-card { min-height: 185px; padding: 18px; }
  .inner-page .article-layout { grid-template-columns: 1fr; padding-top: 0; }
  .inner-page .guide-figure { margin: 24px 0 30px; border-radius: 7px; }
  .inner-page .guide-figure figcaption { padding: 10px 12px 11px; font-size: 11px; }
  .inner-page .toc { display: none; }
  .inner-page .methodology-grid { grid-template-columns: 1fr; }
  .inner-page .policy-prose { padding: 24px 18px 30px; }
}

/* ── custom select controls ────────────────────────────────────────────── */

.custom-select {
  position: relative;
  width: 100%;
  min-width: 0;
}
.custom-select-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.custom-select-trigger {
  width: 100%;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border: 1px solid #cbd1de;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
  text-align: left;
  cursor: pointer;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.custom-select-trigger:hover { border-color: #9fa9bc; background: #fbfcff; }
.custom-select-trigger:focus-visible,
.custom-select.is-open .custom-select-trigger {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(36, 95, 229, .13);
}
.custom-select-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-value-wrap {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.custom-select-entity-icon {
  width: 22px;
  height: 22px;
  flex: none;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}
.custom-select-entity-icon[hidden] { display: none; }
.custom-select-chevron {
  width: 18px;
  height: 18px;
  flex: none;
  opacity: .62;
  transition: transform .14s, opacity .14s;
}
.custom-select.is-open .custom-select-chevron { transform: rotate(180deg); opacity: 1; }
.custom-select-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  z-index: 90;
  max-height: 288px;
  overflow: auto;
  padding: 6px;
  border: 1px solid #cbd1de;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(7, 11, 45, .14), 0 3px 10px rgba(7, 11, 45, .07);
}
.custom-select-menu[hidden] { display: none; }
.custom-select-option {
  width: 100%;
  min-height: 42px;
  display: flex;
  align-items: center;
  padding: 9px 11px;
  border: 0;
  border-radius: 5px;
  background: #fff;
  color: var(--ink-2);
  font: 500 14px/1.25 var(--sans);
  text-align: left;
  cursor: pointer;
  gap: 9px;
}
.custom-select-option:hover,
.custom-select-option:focus-visible {
  outline: 0;
  background: #f4f7ff;
  color: var(--ink);
}
.custom-select-option.is-selected {
  background: #eaf1ff;
  color: var(--accent);
  font-weight: 700;
}
.custom-select-option:disabled { opacity: .45; cursor: not-allowed; }
.contract-picker .custom-select-trigger {
  min-height: 56px;
  padding: 0 17px;
  color: var(--accent);
  font-size: 22px;
  font-weight: 650;
}
.contract-picker .custom-select-menu { min-width: 260px; }
.inner-page .contract-control .custom-select-trigger {
  min-height: 46px;
  padding: 0 14px;
  color: var(--accent);
  font-size: 16px;
  font-weight: 650;
}
.calculator-input-panel { overflow: visible !important; }
.calculator-input-panel .panel-head,
.calculator-input-panel .calculator-form { background: #fff; }

/* Real token and venue marks share one compact label system everywhere: in
   headings, tables, charts and the enhanced selects. */
.entity-label {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
}
.entity-label.justify-end { justify-content: flex-end; }
.entity-icon {
  width: 20px;
  height: 20px;
  flex: none;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}
.entity-icon.venue-icon { border-radius: 5px; }
img[src*="icons-default-coin"],
img[src*="icons-default-exchange"] {
  padding: 3px;
  border: 1px solid #d8dfec;
  background: #f5f7fb;
}
.entity-heading {
  display: flex;
  align-items: center;
  gap: 12px;
}
.entity-heading .entity-icon { width: 34px; height: 34px; }
.entity-heading.compact { gap: 9px; }
.entity-heading.compact .entity-icon { width: 28px; height: 28px; }

/* Contract detail heading doubles as a fast symbol switcher. The selected
   pair is visually stronger than the explanatory title, while the h1 keeps
   the full pair name for document structure and search engines. */
.symbol-title-line {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 13px;
}
.symbol-title-line > h1 {
  min-width: 0;
  margin: 0 !important;
  font-size: clamp(30px, 2.7vw, 42px) !important;
  line-height: 1.08 !important;
  font-weight: 630 !important;
  letter-spacing: -.035em !important;
}
.symbol-switcher { position: relative; z-index: 30; flex: none; }
.symbol-switcher > summary,
.symbol-switcher-static {
  min-height: 62px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 7px 11px 7px 8px;
  border: 1px solid #d3def4;
  border-radius: 10px;
  background: #f2f6ff;
  color: var(--ink);
  list-style: none;
}
.symbol-switcher > summary {
  cursor: pointer;
  user-select: none;
  transition: border-color .14s, box-shadow .14s, background .14s;
}
.symbol-switcher > summary::-webkit-details-marker { display: none; }
.symbol-switcher > summary:hover { border-color: #9eb6ef; background: #eaf1ff; }
.symbol-switcher > summary:focus-visible,
.symbol-switcher[open] > summary {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(36, 95, 229, .13);
}
.symbol-switcher-icon,
.symbol-switcher-static > img {
  width: 44px;
  height: 44px;
  flex: none;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}
.symbol-switcher-symbol,
.symbol-switcher-static > span {
  font-size: clamp(34px, 3.15vw, 48px);
  font-weight: 760;
  line-height: .98;
  letter-spacing: -.05em;
  white-space: nowrap;
}
.symbol-switcher-chevron {
  width: 20px;
  height: 20px;
  flex: none;
  opacity: .66;
  transition: transform .14s, opacity .14s;
}
.symbol-switcher[open] .symbol-switcher-chevron { transform: rotate(180deg); opacity: 1; }
.symbol-switcher-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 120;
  width: min(460px, calc(100vw - 48px));
  overflow: hidden;
  border: 1px solid #cbd5e7;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 24px 64px rgba(7, 11, 45, .17), 0 4px 14px rgba(7, 11, 45, .08);
}
.symbol-switcher-panel-head,
.symbol-switcher-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.symbol-switcher-panel-head { padding: 15px 16px 10px; }
.symbol-switcher-panel-head > strong { font-size: 16px; font-weight: 700; }
.symbol-switcher-close {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
}
.symbol-switcher-close:hover { border-color: #9eabc0; background: #f5f7fb; }
.symbol-switcher-close img { width: 18px; height: 18px; display: block; }
.symbol-switcher-search-wrap { padding: 0 16px 12px; }
.symbol-switcher-search {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  border: 1px solid #bfc9da;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: 500 15px/1.2 var(--sans);
}
.symbol-switcher-search:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(36, 95, 229, .13);
}
.symbol-switcher-meta {
  padding: 9px 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 11.5px;
}
.symbol-switcher-meta output { font-variant-numeric: tabular-nums; }
.symbol-switcher-results {
  max-height: 344px;
  overflow: auto;
  padding: 5px;
  overscroll-behavior: contain;
}
.symbol-switcher-option {
  min-height: 54px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: 7px;
  color: var(--ink) !important;
}
.symbol-switcher-option[hidden] { display: none; }
.symbol-switcher-option:hover,
.symbol-switcher-option:focus-visible { background: #f3f6fc; text-decoration: none; }
.symbol-switcher-option.is-current { background: #eaf1ff; }
.symbol-switcher-option > img {
  width: 28px;
  height: 28px;
  display: block;
  border-radius: 50%;
  object-fit: contain;
}
.symbol-switcher-option-copy { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.symbol-switcher-option-copy strong { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.symbol-switcher-option-copy small { margin-top: 4px; color: var(--dim); font-size: 11.5px; }
.symbol-switcher-current {
  padding: 3px 7px;
  border-radius: 999px;
  background: #dce8ff;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
}
.symbol-switcher-empty { margin: 0; padding: 34px 16px; color: var(--dim); font-size: 14px; text-align: center; }
.symbol-switcher-empty[hidden] { display: none; }

@media (max-width: 760px) {
  body.symbol-switcher-open { overflow: hidden; }
  .symbol-title-line { display: block; margin-bottom: 12px; }
  .symbol-title-line > h1 {
    margin-top: 9px !important;
    font-size: 29px !important;
    line-height: 1.12 !important;
    letter-spacing: -.03em !important;
  }
  .symbol-switcher > summary,
  .symbol-switcher-static { width: 100%; min-height: 54px; padding: 7px 10px 7px 7px; }
  .symbol-switcher-icon,
  .symbol-switcher-static > img { width: 36px; height: 36px; }
  .symbol-switcher-symbol,
  .symbol-switcher-static > span { min-width: 0; font-size: 32px; overflow: hidden; text-overflow: ellipsis; }
  .symbol-switcher-chevron { margin-left: auto; }
  .symbol-switcher[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 109;
    background: rgba(7, 11, 45, .38);
  }
  .symbol-switcher-panel {
    position: fixed;
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    width: 100%;
    max-height: min(78dvh, 680px);
    border-width: 1px 0 0;
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -20px 60px rgba(7, 11, 45, .2);
  }
  .symbol-switcher-panel-head { padding: 14px 16px 10px; }
  .symbol-switcher-search-wrap { padding-bottom: 12px; }
  .symbol-switcher-results { max-height: calc(min(78dvh, 680px) - 150px); padding-bottom: max(8px, env(safe-area-inset-bottom)); }
  .symbol-switcher-option { min-height: 58px; }
}
.compare-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.compare-vs { color: var(--dim); font-size: .55em; font-weight: 600; }
.venue-name { align-items: center; }
.inner-page .market-link .entity-label,
.inner-page .market-link .entity-label span { color: inherit; }
.inner-page .market-link > span:last-child { color: var(--accent); }
.entity-label .venue-trait,
.entity-heading .venue-trait,
.venue-name .venue-trait {
  min-height: 17px;
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 6px;
  border: 1px solid #e0e5ef;
  border-radius: 999px;
  background: #f4f6fa;
  color: var(--dim);
  font: 650 9.5px/1.25 var(--sans);
  letter-spacing: .01em;
  white-space: nowrap;
}
.entity-heading .venue-trait { margin-left: 2px; font-size: 10px; }
.venue-name .venue-trait { margin-left: -2px; }
.inner-page .spark-row .entity-label { flex-wrap: wrap; row-gap: 3px; }
.formula-term.formula-result b.pos,
.estimate-value.pos,
.venue-cost.pos,
.venue-chart-row.is-best .venue-cost.pos { color: var(--pos); }
.formula-term.formula-result b.neg,
.estimate-value.neg,
.venue-cost.neg,
.venue-chart-row.is-best .venue-cost.neg { color: var(--neg); }
.venue-chart-row.is-best .venue-rate.pos { color: var(--pos); }
.venue-chart-row.is-best .venue-rate.neg { color: var(--neg); }

/* Keep keyboard focus visible on navigation without drawing a box around the
   active item; the blue baseline is the focus/selected indicator. */
header.site nav a:focus-visible {
  outline: 0;
  border-radius: 0;
  border-bottom-color: var(--accent);
  box-shadow: none;
  text-decoration: none;
}

/* ── structured site footer ────────────────────────────────────────────── */

footer.site {
  margin-top: 74px;
  border-top: 1px solid var(--line);
  background: #fff;
}
footer.site .inner,
body:not(.home-page) footer.site .inner {
  max-width: 1440px;
  padding: 46px 56px 28px;
}
.footer-top {
  display: grid;
  grid-template-columns: minmax(300px, 1.4fr) minmax(360px, .6fr);
  gap: 72px;
  align-items: start;
}
.footer-brand {
  display: inline-flex;
  align-items: flex-start;
  gap: 15px;
  width: fit-content;
  color: var(--ink);
}
.footer-brand:hover { text-decoration: none; }
.footer-brand img { width: 36px; height: 36px; margin-top: 2px; }
.footer-brand span { display: flex; flex-direction: column; }
.footer-brand b {
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", var(--sans);
  font-size: 25px;
  line-height: 1;
  letter-spacing: -.04em;
}
.footer-brand small {
  margin-top: 9px;
  color: var(--dim);
  font-size: 13px;
}
.footer-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(140px, 1fr));
  gap: 28px;
}
.footer-nav > div { display: flex; flex-direction: column; gap: 7px; }
.footer-nav strong {
  margin-bottom: 4px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.footer-nav a { color: var(--ink-2); font-size: 13px; }
.footer-nav a:hover { color: var(--accent); text-decoration: none; }
.footer-disclosures {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  margin-top: 38px;
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8faff;
}
.footer-disclosures .disclaimer {
  max-width: none;
  margin: 0;
  color: var(--dim);
  font-size: 11.5px;
  line-height: 1.65;
}
.footer-disclosures .disclaimer strong { color: var(--ink-2); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  color: var(--dim);
  font-size: 11.5px;
}
.footer-bottom time { font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  footer.site .inner,
  body:not(.home-page) footer.site .inner { padding: 34px 16px 24px; }
  .footer-top { grid-template-columns: 1fr; gap: 30px; }
  .footer-nav { grid-template-columns: 1fr 1fr; }
  .footer-disclosures { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .footer-bottom { flex-direction: column; gap: 5px; }
  .custom-select-menu { max-height: 240px; }
  header.site .topbar,
  .home-page header.site .topbar,
  body:not(.home-page) header.site .topbar { flex-wrap: nowrap; }
  .js .nav-toggle { display: inline-flex; }
  .js header.site nav,
  .js .home-page header.site nav,
  .js body:not(.home-page) header.site nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    width: 100%;
    margin: 0;
    padding: 7px 16px 13px;
    transform: none;
    flex-direction: column;
    gap: 0;
    overflow: visible;
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 16px 30px rgba(7, 11, 45, .09);
  }
  .js .home-page header.site nav { background: #eef4ff; }
  .js header.site nav.is-open,
  .js .home-page header.site nav.is-open,
  .js body:not(.home-page) header.site nav.is-open { display: flex; }
  .js .home-page header.site nav a,
  .js body:not(.home-page) header.site nav a,
  .js header.site nav a {
    width: 100%;
    padding: 11px 2px;
    border-bottom: 1px solid var(--line-soft);
    font-size: 15px;
  }
  .js header.site nav a:last-child { border-bottom: 0; }
  .js header.site nav a[aria-current] {
    color: var(--accent);
    border-bottom-color: var(--line-soft);
  }
  .js header.site nav a:last-child[aria-current] { border-bottom-color: transparent; }
}