/* hostlaws.com
   Two rules govern everything: no hue is attributable to a provider,
   and no fact lives behind interaction.
   Dark is the default surface; light mode is deliberate, not inverted. */

/* --------------------------------------------------------- self-hosted fonts */

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/PublicSans-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/PublicSans-Medium.woff2") format("woff2");
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/PublicSans-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/JetBrainsMono-Medium.woff2") format("woff2");
}

/* ------------------------------------------------------------- dark default */

:root {
  color-scheme: dark;

  /* Dark surfaces (default) */
  --paper:          #0D0F12;
  --paper-raised:   #14171C;
  --paper-sunken:   #1C2028;

  /* Ink */
  --ink:            #E6E9EE;
  --ink-muted:      #8A93A0;
  --ink-faint:      #636D7A;

  /* Evidence marks */
  --mark:           #C0C8D2;

  /* Interaction */
  --accent:         #3987E5;
  --accent-strong:  #5A9FEF;
  --accent-visited: #9B7FCC;

  /* Age of our own data. The only warning hue. Never on a provider. */
  --age:            #E0B05A;
  --age-rule:       #B88D3A;

  /* Structure */
  --rule:           #232830;
  --rule-strong:    #2E3540;
  --border-control: #4A5360;
  --focus:          #3987E5;

  /* Type */
  --font-text:  "Public Sans", ui-sans-serif, system-ui, -apple-system,
                "Helvetica Neue", Arial, sans-serif;
  --font-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono",
                Menlo, Consolas, "Liberation Mono", monospace;

  --text-2xs:  0.6875rem;
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.125rem;
  --text-lg:   1.375rem;
  --text-xl:   1.75rem;

  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-loose:  1.7;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold:   700;

  /* Space */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-0: 0;
  --radius-1: 2px;

  --measure: 40rem;
  --page-width: 1120px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --paper:          #FBFBF9;
    --paper-raised:   #F2F2EE;
    --paper-sunken:   #ECECE7;
    --ink:            #16181B;
    --ink-muted:      #4C5157;
    --ink-faint:      #63696F;
    --mark:           #2E3338;
    --accent:         #2A78D6;
    --accent-strong:  #184F95;
    --accent-visited: #5B3A78;
    --age:            #6E4200;
    --age-rule:       #8A6A1F;
    --rule:           #E0E0DA;
    --rule-strong:    #C3C4BE;
    --border-control: #84888E;
    --focus:          #2A78D6;
  }
}

/* ---------------------------------------------------------------- reset */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* Dataset free text carries field paths, bare hostnames and long URLs inside
     ordinary prose. Without this they push the page sideways on a phone. */
  overflow-wrap: break-word;
  word-break: break-word;
}

h1, h2, h3, h4 {
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-4);
  font-weight: var(--weight-bold);
  text-wrap: balance;
}

h1 { font-size: var(--text-xl); }
h2 { font-size: var(--text-lg); }
h3 { font-size: var(--text-md); font-weight: var(--weight-medium); }
h4 { font-size: var(--text-base); font-weight: var(--weight-medium); }

p, ul, ol, dl, table, blockquote, figure { margin: 0 0 var(--space-4); }

a {
  color: var(--accent);
  text-underline-offset: 0.15em;
}
a:visited { color: var(--accent-visited); }
a:hover, a:active { color: var(--accent-strong); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

code, .iso, .token, .url-link,
.num, .price-amount, .cost-stat-value,
.signature-unit, .prov-stamp, .rank-number,
.col-sub, .sec-num, .wordmark {
  font-family: var(--font-mono);
}

code, .token {
  background: var(--paper-sunken);
  padding: 0.05em 0.3em;
  border-radius: var(--radius-1);
  font-size: 0.9em;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--paper);
  color: var(--accent);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--rule-strong);
  z-index: 10;
}
.skip-link:focus { left: var(--space-4); top: var(--space-2); }

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

.site-header,
.site-footer,
main {
  max-width: var(--page-width);
  margin: 0 auto;
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-3) var(--space-6);
  padding-top: var(--space-6);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--rule-strong);
}

.wordmark {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-md);
  font-weight: var(--weight-medium);
}
.wordmark a { color: var(--ink); text-decoration: none; }
.wordmark a:hover { text-decoration: underline; }

.site-header nav ul,
.site-footer nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
}

.site-header nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration-thickness: 2px;
}

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

main { padding-top: var(--space-8); padding-bottom: var(--space-12); }

.page > section { margin-bottom: var(--space-12); }

.page-head { margin-bottom: var(--space-12); }

.standfirst {
  max-width: var(--measure);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--ink-muted);
}

.retrieval,
.section-note,
.counts-date,
.who,
.decides-summary,
.qualifier,
.col-sub,
.footer-dates {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  max-width: var(--measure);
}

.section-note { line-height: var(--leading-snug); }

.prose p,
.prose-page > section > p,
.prose-page > section > ul,
.prose-page > section > ol,
.caveat p,
.decides,
.legend dd {
  max-width: var(--measure);
}

.prose p { margin-bottom: var(--space-4); }

.breadcrumb {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-bottom: var(--space-4);
}

/* ------------------------------------------------------- headline block */

.finding {
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
  padding: var(--space-6) 0;
}

.headline {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  line-height: var(--leading-tight);
  max-width: var(--measure);
}

.finding p, .finding .more { max-width: var(--measure); }

/* ------------------------------------------------------------- the 2x2 */

.cross-tab {
  border: 1px solid var(--rule-strong);
  padding: var(--space-6);
  margin-bottom: var(--space-8);
  background: var(--paper);
}

.cross-tab-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
}

.cross-tab h2 { font-size: var(--text-md); margin-bottom: var(--space-4); }
.cross-tab > p:last-child {
  max-width: var(--measure);
  margin-bottom: 0;
  font-size: var(--text-sm);
  color: var(--ink-muted);
}

.crosstab-table { max-width: 44rem; }
.crosstab-table td.num {
  font-size: var(--text-lg);
  font-weight: var(--weight-medium);
  text-align: center;
}
.crosstab-table thead th { width: 30%; }

/* ---------------------------------------------------------------- lists */

.use-case-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule-strong);
}
.use-case-list > li {
  border-bottom: 1px solid var(--rule);
  padding: var(--space-4) 0;
}
.use-case-list h3 { margin-bottom: var(--space-1); max-width: var(--measure); }
.use-case-list p { margin-bottom: var(--space-1); }

.plain-list { padding-left: var(--space-4); }
.plain-list.columns {
  columns: 22ch 3;
  column-gap: var(--space-8);
}

.decides { padding-left: var(--space-4); }
.decides li { margin-bottom: var(--space-2); }

.other-providers {
  font-size: var(--text-sm);
  line-height: var(--leading-loose);
}

/* ---------------------------------------------------------------- table */

/* Table cells may contain dataset-derived text with long unbreakable strings. */
th, td { overflow-wrap: break-word; word-break: break-word; }

/* --------------------------------------------------- scroll affordance
   Below 640px compare tables are wider than the viewport. The .table-wrap
   provides scrolling; .scroll-hint below it tells the reader that scroll
   exists. Both are invisible on wide screens. */

.scroll-hint {
  display: none;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  text-align: right;
  padding: 0;
  margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

@media (max-width: 640px) {
  .scroll-hint { display: block; }
}

/* Only .register stacks below 719px. Everything else degrades to a scrollable
   region rather than widening the page. */
.table-wrap { margin-bottom: var(--space-4); overflow-x: auto; }

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.data-table caption {
  text-align: left;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  padding-bottom: var(--space-2);
}

.data-table th,
.data-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--rule);
}
.data-table th:first-child,
.data-table td:first-child { padding-left: 0; }
.data-table th:last-child,
.data-table td:last-child { padding-right: 0; }

.data-table thead th {
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  vertical-align: bottom;
}

/* The corner cell of a cross tabulation is a td, because it labels nothing and
   must not be announced as a column header. It still belongs to the band. */
.data-table thead th,
.data-table thead td {
  background: var(--paper-raised);
  border-bottom: 1px solid var(--rule-strong);
}

.data-table tbody th {
  font-weight: var(--weight-medium);
}

.col-sub {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-weight: var(--weight-normal);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Column widths for the 21-row register only. The affiliate table on the
   about page shares the stacking behaviour but not the columns. */
.provider-register th:nth-child(1), .provider-register td:nth-child(1) { width: 15%; }
.provider-register th:nth-child(2), .provider-register td:nth-child(2) { width: 30%; }
.provider-register th:nth-child(3), .provider-register td:nth-child(3) { width: 5%; }
.provider-register th:nth-child(4), .provider-register td:nth-child(4) { width: 15%; }
.provider-register th:nth-child(5), .provider-register td:nth-child(5) { width: 26%; }
.provider-register th:nth-child(6), .provider-register td:nth-child(6) { width: 9%; }

.num {
  font-variant-numeric: tabular-nums;
}
td.num, th.num { text-align: right; }

/* Tables written in a prose field, so they sit near the prose measure rather
   than running the full page width away from their row labels. */
.prose-table { max-width: 44rem; }

.facts-table { max-width: 46rem; }
/* No fixed width: two single-digit columns reserving 8rem each cannot compress
   inside a 343px viewport. */
.facts-table td.num { text-align: right; min-width: 3rem; }

.cell-provider { font-size: var(--text-md); }
.cell-provider a { text-decoration-thickness: 1px; }
.cell-regions { width: 4.5rem; }

.qualifier {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
}
.qualifier-page { max-width: var(--measure); margin-top: calc(-1 * var(--space-2)); }

.cell-label { display: none; }

/* --------------------------------------------------- axis A: the chain */

.chain { display: block; font-size: var(--text-sm); }
.chain-line {
  display: flex;
  gap: var(--space-2);
  line-height: var(--leading-tight);
  padding-bottom: 0.15em;
}
.chain .iso { flex: 0 0 1.6rem; }
.chain .entity { display: block; }
.chain .none { color: var(--ink-faint); }
/* Where the chain records a relationship the primary sources do not characterise,
   the qualification travels with the node rather than living on the page below. */
.chain-caveat {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
}

.iso {
  font-family: var(--font-mono);
  font-size: 0.9em;
  letter-spacing: 0.02em;
}

.chain-block { margin-bottom: var(--space-6); font-size: var(--text-md); }
.chain-block .chain-line { padding-bottom: var(--space-1); }

/* ------------------------------------------ axis B: the evidence mark */

.mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--mark);
  border-radius: var(--radius-1);
  margin-right: var(--space-1);
  vertical-align: 0.02em;
}
.mark-filled { background: var(--mark); }
.mark-hollow { background: transparent; }

.doc { display: block; }
.doc-verb { display: block; }
.doc-detail {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  padding-left: calc(9px + var(--space-1));
}

.legend {
  border-top: 1px solid var(--rule);
  padding-top: var(--space-3);
  margin-bottom: var(--space-6);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  line-height: var(--leading-snug);
}
.legend dt { font-weight: var(--weight-medium); margin-top: var(--space-2); }
.legend dd { margin: 0 0 var(--space-2); padding-left: calc(9px + var(--space-1)); }

/* --------------------------------------------------------------- price */

.price { display: block; }
.price-amount {
  display: block;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
}
.price-period { font-weight: var(--weight-normal); }
.price-none { display: block; color: var(--ink-muted); }
.price-qualifier {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
  line-height: var(--leading-snug);
}
.price-block { font-size: var(--text-md); margin-bottom: var(--space-4); }
.price-block .price-qualifier { font-size: var(--text-sm); }

.age { color: var(--age); border-bottom: 1px solid var(--age-rule); }

/* ----------------------------------------------------------- affiliate */

.paid-tag,
.unpaid-tag {
  display: inline-block;
  font-size: var(--text-xs);
  white-space: nowrap;
}
.paid-tag {
  border: 1px solid var(--border-control);
  border-radius: var(--radius-1);
  padding: 0 var(--space-1);
  color: var(--ink-muted);
}
.unpaid-tag { color: var(--ink-faint); }

.affiliate-note {
  border: 1px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.affiliate-note h2 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.affiliate-note p {
  margin: 0;
  font-size: var(--text-sm);
  max-width: var(--measure);
  color: var(--ink-muted);
}

/* ------------------------------------------------------ provider page */

.provider-page section > h2 {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-3);
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
}
.sec-num {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--weight-normal);
  color: var(--ink-faint);
  flex: 0 0 1.4rem;
}

.provider-page h3 {
  margin-top: var(--space-6);
  max-width: var(--measure);
}

.statement {
  font-size: var(--text-md);
  max-width: var(--measure);
}
.statement-small { max-width: var(--measure); }

.record { margin: 0 0 var(--space-6); }
.record-row {
  display: grid;
  grid-template-columns: 14rem 1fr;
  gap: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--rule);
  padding: var(--space-2) 0;
}
.record dt {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-muted);
  padding-top: 0.15em;
}
/* min-width:0 so a long unbreakable string in a dd cannot widen the grid track. */
.record dd { margin: 0; min-width: 0; max-width: var(--measure); }
.record dd p:last-child { margin-bottom: 0; }

.quote {
  border-left: 2px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  line-height: var(--leading-loose);
}
.quote p:last-child { margin-bottom: 0; }
.quote p::before { content: "\201C"; }
.quote p::after { content: "\201D"; }

blockquote {
  border-left: 2px solid var(--rule-strong);
  background: var(--paper-raised);
  padding: var(--space-4);
  margin: 0 0 var(--space-4);
  max-width: var(--measure);
  line-height: var(--leading-loose);
}
blockquote p:last-child { margin-bottom: 0; }

.url-list, .sources {
  padding-left: var(--space-6);
  font-size: var(--text-sm);
}
.url-list li, .sources li { margin-bottom: var(--space-2); }
.url-link {
  font-family: var(--font-mono);
  font-size: 0.9em;
  overflow-wrap: anywhere;
}
.url-line { overflow-wrap: anywhere; }
.source-claim { display: block; color: var(--ink-muted); }

/* Section 9 is the one editorial field and must not look like the sourced ones.
   The tint is the screen treatment; the border is what survives the print
   palette, where --paper-raised resolves to the paper colour. */
.editorial {
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  padding: var(--space-6);
}
.provider-page section.editorial > h2 { border-top: 0; padding-top: 0; }
.editorial .prose { color: var(--ink-muted); }

.categories { font-size: var(--text-sm); }

.ext { font-size: 0.85em; color: var(--ink-faint); }

/* Staleness indicator: shown when last verified > 90 days ago. */
.stale-marker {
  display: block;
  font-size: var(--text-xs, 0.75rem);
  color: var(--ink-faint);
  font-weight: normal;
  margin-top: 0.15em;
}

/* --------------------------------------------------------- use case */

.ranked { list-style: none; margin: 0; padding: 0; }
.ranked-item {
  border-top: 1px solid var(--rule-strong);
  padding: var(--space-4) 0 var(--space-6);
}
.ranked-item h3 {
  display: flex;
  gap: var(--space-3);
  align-items: baseline;
  flex-wrap: wrap;
  margin-top: 0;
}
.rank-number {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--ink-faint);
  font-weight: var(--weight-normal);
}
.reason { max-width: var(--measure); }
.caveat { border-top: 1px solid var(--rule-strong); padding-top: var(--space-4); }

.toc {
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  padding: var(--space-4) var(--space-6);
  margin-bottom: var(--space-12);
  max-width: var(--measure);
}
.toc h2 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.toc ol { margin: 0; padding-left: var(--space-4); font-size: var(--text-sm); }
.toc li { margin-bottom: var(--space-1); }

.pager { border-top: 1px solid var(--rule-strong); padding-top: var(--space-4); }
.pager h2 { font-size: var(--text-base); }

/* ------------------------------------------------------------- cost hero
   Home page cost-first block: year-two promise with highlighted numbers. */

.cost-hero {
  margin-bottom: var(--space-12);
  border-top: 2px solid var(--ink);
  padding-top: var(--space-6);
}

.cost-hero h2 {
  font-size: var(--text-xl);
  max-width: var(--measure);
}

.cost-numbers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: var(--space-6) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.cost-stat {
  min-width: 0;
}

.cost-stat-value {
  display: block;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
}

.cost-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  max-width: 22ch;
  line-height: var(--leading-snug);
  margin-top: var(--space-1);
}

/* -------------------------------------------------- spec sheet (provider page)
   Plans table and service-level facts on a provider page. */

.spec-plan-table { max-width: none; }
.spec-plan-table th, .spec-plan-table td { white-space: nowrap; }
.spec-plan-table .cell-plan-name { white-space: normal; min-width: 9rem; }

.renewal-delta {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-faint);
}

.promo-badge {
  font-size: var(--text-xs);
  border: 1px solid var(--border-control);
  border-radius: var(--radius-1);
  padding: 0 var(--space-1);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* ----------------------------------------- compare entry points on home page */

.compare-entry-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.compare-entry-list a {
  display: inline-block;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  text-decoration: none;
  color: var(--accent);
}

.compare-entry-list a:hover {
  background: var(--paper-raised);
}

/* ---- Data series colour tokens (validated palette) ------------------- */

:root {
  /* Dark defaults */
  --series-1:      #3987E5;
  --series-2:      #D95926;
  --series-1-wash: rgba(57, 135, 229, 0.18);
  --series-2-wash: rgba(217, 89, 38, 0.18);
  /* Sequential blue ramp for magnitude bars */
  --bar-1:  #86B6EF;
  --bar-2:  #5598E7;
  --bar-3:  #2A78D6;
  --bar-4:  #184F95;
}

@media (prefers-color-scheme: light) {
  :root {
    --series-1:      #2A78D6;
    --series-2:      #EB6834;
    --series-1-wash: rgba(42, 120, 214, 0.14);
    --series-2-wash: rgba(235, 104, 52, 0.14);
  }
}

/* ---- Inline proportion bars behind numeric table cells -------------- */

td.bar-cell {
  background: linear-gradient(
    to right,
    var(--series-1-wash) var(--bar, 0%),
    transparent var(--bar, 0%)
  );
}

/* ---- Chart containers ---------------------------------------------- */

.chart-block {
  margin-bottom: var(--space-8);
}

.chart-block svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  max-width: 640px;
}

.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-bottom: var(--space-3);
  align-items: center;
}

.chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.chart-swatch {
  display: inline-block;
  width: 12px;
  height: 4px;
  border-radius: 2px;
  flex: 0 0 12px;
}

.chart-swatch-1 { background: var(--series-1); }
.chart-swatch-2 { background: var(--series-2); }

.chart-note {
  font-size: var(--text-xs);
  color: var(--ink-faint);
  margin-top: var(--space-2);
  max-width: var(--measure);
}

/* ---- Answer-first: caveats/methodology folded below table ----------- */

.compare-caveats {
  border-top: 1px solid var(--rule);
  margin-top: var(--space-6);
  margin-bottom: var(--space-4);
}

.compare-caveats summary {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  cursor: pointer;
  padding: var(--space-3) 0;
  list-style: none;
  user-select: none;
}

.compare-caveats summary::-webkit-details-marker { display: none; }

.compare-caveats summary::before {
  content: '+ ';
  font-weight: var(--weight-medium);
}

details[open].compare-caveats summary::before { content: '- '; }

.compare-caveats > div {
  padding-bottom: var(--space-4);
  color: var(--ink-muted);
  font-size: var(--text-sm);
  max-width: var(--measure);
}

/* ---- Stat tiles (home page hero numbers) --------------------------- */

.stat-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-1);
  transition: color 0.1s;
}

.stat-tile-link:hover .cost-stat-value { color: var(--accent); }

/* ---- Signature unit: €3.81 -> €15.99 x4.2 ----------------------- */

.signature-unit {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  letter-spacing: 0;
}

.sig-adv   { color: var(--ink); }
.sig-arrow { color: var(--ink-muted); margin: 0 0.25em; }
.sig-ren   { color: var(--ink); }
.sig-mult  { color: var(--series-1); margin-left: 0.5em; font-weight: 500; }
.sig-np    { color: var(--ink-muted); }  /* not published variant */

/* Hero signature unit (larger) */
.signature-unit-lg {
  font-size: var(--text-lg);
  display: block;
}

/* ---- Provenance stamp: api 4h / snapshot 187d -------------------- */

.prov-stamp {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--ink-faint);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.prov-stamp.prov-aged {
  color: var(--age);
}

/* ---- Sticky compare tables --------------------------------------- */

.table-scroll {
  overflow-x: auto;
  max-height: 80vh;
  overflow-y: auto;
  margin-bottom: var(--space-4);
}

.compare-table thead th,
.compare-table thead td {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--paper-raised);
}

.compare-table th:first-child,
.compare-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--paper);
}

.compare-table thead th:first-child {
  z-index: 3;
  background: var(--paper-raised);
}

/* Row focus: attended row full ink, neighbours quiet */
.compare-table tbody tr:focus-within td,
.compare-table tbody tr:focus-within th {
  background: var(--paper-raised);
}

.compare-table tbody tr:hover td,
.compare-table tbody tr:hover th {
  background: var(--paper-sunken);
}

/* ---- Home page: thesis-first composition ------------------------- */

.home-head {
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: var(--space-6);
  margin-bottom: var(--space-8);
}

.home-thesis {
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  margin-bottom: var(--space-3);
  letter-spacing: -0.01em;
}

.home-sub {
  font-size: var(--text-sm);
  color: var(--ink-muted);
  margin-bottom: var(--space-6);
}

.home-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
}

.home-stats .stat-tile-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.home-stats .cost-stat-value {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--series-1);
  line-height: var(--leading-tight);
}

.home-stats .cost-stat-label {
  display: block;
  font-size: var(--text-xs);
  color: var(--ink-muted);
  margin-top: var(--space-1);
}

.home-stats .stat-tile-link:hover .cost-stat-value {
  color: var(--accent-strong);
}

.home-board { margin-bottom: var(--space-12); }

.home-board-nav { margin-bottom: var(--space-6); }

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

.site-footer {
  border-top: 1px solid var(--rule-strong);
  padding-top: var(--space-6);
  padding-bottom: var(--space-16);
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.site-footer p { max-width: var(--measure); }

/* --------------------------------------------------------------- mobile */

@media (max-width: 719px) {
  .data-table.register thead { display: none; }
  .data-table.register,
  .data-table.register tbody,
  .data-table.register tr,
  .data-table.register th,
  .data-table.register td {
    display: block;
    width: auto;
  }
  .data-table.register tr {
    border-bottom: 1px solid var(--rule-strong);
    padding: var(--space-4) 0;
  }
  .data-table.register th,
  .data-table.register td {
    border-bottom: 0;
    padding: 0 0 var(--space-2);
  }
  .data-table.register td.num { text-align: left; }
  .data-table.register .cell-label {
    display: block;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ink-muted);
  }
  .record-row { grid-template-columns: 1fr; gap: var(--space-1); }
  .crosstab-table thead th { width: auto; }
  .cross-tab { padding: var(--space-4); }
  .plain-list.columns { columns: 1; }
}

/* ---------------------------------------------------------------- print */

@media print {
  :root {
    color-scheme: light;
    --paper: #FFF;
    --paper-raised: #FFF;
    --paper-sunken: #FFF;
    --ink: #000;
    --ink-muted: #222;
    --ink-faint: #333;
    --mark: #000;
    --accent: #000;
    --accent-visited: #000;
    --rule: #999;
    --rule-strong: #555;
  }
  body { font-size: 10pt; }
  .skip-link, .site-header nav, .toc, .pager { display: none; }
  main { max-width: none; padding: 0; }
  .table-wrap { overflow-x: visible; }
  .data-table.register,
  .data-table.register tbody { display: table; width: 100%; }
  .data-table.register thead { display: table-header-group; }
  .data-table.register tr { display: table-row; }
  .data-table.register th { display: table-cell; }
  .data-table.register td { display: table-cell; }
  .data-table.register .cell-label { display: none; }
  .mark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .mark-filled { background: #000; }
  a { text-decoration: underline; }
  a[href^="http"]:not(.url-link)::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    overflow-wrap: anywhere;
  }
  section, .ranked-item, tr { break-inside: avoid; }
  h2, h3 { break-after: avoid; }
}

/* Page shell and lede, introduced with the tabbed layout. */
.page {
  margin: 0;
}
.page-lede {
  max-width: var(--measure);
  margin: 0 0 var(--space-6);
  color: var(--ink-muted);
  font-size: var(--text-base);
}
.footer-note {
  max-width: var(--measure);
  margin: var(--space-3) 0 0;
  color: var(--ink-faint);
  font-size: var(--text-xs);
  line-height: 1.6;
}
.footer-note a { color: var(--ink-muted); }