/* UK Credit Card Statistics — v6 (BE staging build)
   Scoped stylesheet for /data/payments/uk-credit-card-statistics/.
   Source: v6/styles-v6.css from design handoff + page-local <style>
   additions extracted from UK Credit Card Statistics.html. */

/* UK Payments Statistics — v6
   Readability-first revision.
   Newsreader (serif) for headings + numerals.
   Source Sans 3 for body and UI.
   IBM Plex Mono used sparingly, only in the citation block. */

:root {
  --ink-0: #0b0d11;     /* titles, headline numbers */
  --ink-1: #16181d;     /* body */
  --ink-2: #3f434a;     /* secondary body */
  --ink-3: #5d626b;     /* meta — never below 13px */
  --line: #e3e1e6;
  --line-soft: #eef0ec;
  --paper: #ffffff;
  --paper-2: #faf8fb;
  --lavender: #f3edf8;
  --lavender-2: #f8f4fb;
  --purple: #5b2a86;
  --purple-2: #7a3fb5;
  --purple-soft: #e8dff2;
  --warn: #8a4a0f;
  --warn-bg: #fbf3e8;
  --ok: #1f6b3c;
  --bad: #a02a23;

  /* Per-topic identities for the hub home tile grid */
  --pay:   #1f6b3c;
  --frd:   #a02a23;
  --crd:   #5b2a86;
  --ecm:   #7a3fb5;
  --prc:   #8a4a0f;

  --serif: 'Newsreader', Georgia, serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ============== MASTHEAD ============== */
.mast {
  border-bottom: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 30;
}
.mast .inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.mast nav {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.mast nav a {
  text-decoration: none;
  font-size: 15px;
  color: var(--ink-2);
  padding: 6px 0;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.mast nav a:hover { color: var(--ink-0); }
.mast nav a.on {
  color: var(--ink-0);
  border-bottom-color: var(--purple);
  font-weight: 600;
}

/* Data Hub primary nav (header.php for ph_dataset posts uses
   .nav-links--data-hub > a.nav-trigger.is-current, NOT the in-page
   .mast nav). Active tab gets a hand-drawn pencil-style underline
   (slightly wavy SVG with rounded ends, purple, sitting just below
   the label inside the existing 8px bottom padding). */
.nav-links--data-hub .nav-trigger.is-current {
  color: var(--purple);
  font-weight: 600;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10' preserveAspectRatio='none'><path d='M3 6 C 18 1.5, 33 8.5, 50 4.5 S 82 8, 97 3' fill='none' stroke='%235b2a86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: 50% calc(100% - 2px);
  background-size: calc(100% - 16px) 8px;
}
.nav-links--data-hub .nav-trigger.is-current:hover {
  /* keep the active styling on hover — don't switch to the grey-bg hover state */
  background-color: transparent;
  color: var(--purple);
}

/* Data Hub page footer (.foot-site lives in the post content for v6 pages).
   The matching ruleset is in be-data-hub.css but that file is only loaded
   for non-v6 data-hub pages, so v6 pages need a self-contained version
   to stop the footer collapsing to unstyled stacked words. */
.foot-site {
  margin-top: 72px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.foot-site .inner {
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 40px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 32px;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.55;
}
.foot-site .col-6 { grid-column: span 6; }
.foot-site .col-3 { grid-column: span 3; }
.foot-site h4 {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-0);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  margin: 0 0 14px;
}
.foot-site p {
  margin: 0 0 10px;
  max-width: 52ch;
}
.foot-site a {
  color: var(--ink-2);
  display: block;
  padding: 4px 0;
  text-decoration: none;
}
.foot-site a:hover { color: var(--purple); }
@media (max-width: 900px) {
  .foot-site .inner { padding: 40px 24px; }
  .foot-site .col-6, .foot-site .col-3 { grid-column: 1 / -1; }
}
.mast .meta {
  font-size: 14px;
  color: var(--ink-2);
}
.mast .meta a { text-decoration: none; color: var(--ink-2); }
.mast .meta a:hover { color: var(--purple); }

/* ============== WRAP ============== */
.wrap {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
}
@media (min-width: 1500px) {
  .wrap { padding: 0 56px; }
}

/* ============== HERO ============== */
.hero {
  position: relative;
  padding: 80px 0 96px;
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--lavender-2);
  z-index: -1;
}
.hero.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 72px;
  row-gap: 32px;
  align-items: start;
}
.crumb {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  max-width: none;
  font-size: 14px;
  color: var(--ink-2);
}
.hero-main {
  grid-column: 1;
  grid-row: 2;
  min-width: 0;
  align-self: start;
}
.hero-main h1 { margin: 0 0 24px; }
/* .hero-body keeps its canonical 0 0 36px margin from the rule below — do not override here */
.hero-aside {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  margin-top: 84px; /* drop below the title, beside the body */
}
.crumb a { text-decoration: none; color: var(--ink-2); }
.crumb a:hover { color: var(--purple); }
.crumb b { color: var(--ink-0); font-weight: 600; }
.crumb .audit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ok);
  font-weight: 600;
}
.crumb .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(31,107,60,.18);
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.04;
  letter-spacing: -.014em;
  margin: 24px 0 32px;
  color: var(--ink-0);
  max-width: 18ch;
  text-wrap: balance;
}
.hero-body {
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-1);
  margin: 0 0 36px;
  max-width: 56ch;
  text-wrap: pretty;
}
.hero-body b { font-weight: 700; color: var(--ink-0); }

.cite-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(20,15,30,.04);
}
.cite-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.cite-title {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 600;
}
.cite-icon {
  background: var(--lavender);
  border: 1px solid var(--line);
  color: var(--purple);
  width: 32px; height: 32px;
  border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.cite-icon:hover { background: var(--purple-soft); }
.cite-block {
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-1);
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  padding: 12px 14px;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.cite-actions {
  display: flex;
  gap: 18px;
  margin: 14px 0 0;
  font-size: 14px;
}
.cite-link {
  text-decoration: none;
  color: var(--purple);
  font-weight: 600;
}
.cite-link:hover { text-decoration: underline; }
.cite-link.method { color: var(--ink-2); font-weight: 500; }

/* "How to read" — holds the page's caveats */
.howto {
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 8px;
  padding: 22px 28px;
  max-width: 640px;
}
.howto .k {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--purple);
  margin-bottom: 10px;
}
.howto p {
  margin: 0;
  font-size: 16px;
  color: var(--ink-1);
  line-height: 1.55;
}
.howto ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.howto ul li {
  font-size: 16px;
  color: var(--ink-1);
  line-height: 1.5;
  padding-left: 18px;
  position: relative;
}
.howto ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
}

.byline {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 36px;
  border-top: 1px solid var(--line);
  padding-top: 22px;
}
.byline .item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-right: 1px solid var(--line-soft);
  padding-right: 16px;
}
.byline .item:last-child { border-right: 0; }
.byline .item .k {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
}
.byline .item .v { font-size: 15px; color: var(--ink-1); font-weight: 500; }
.byline .item .v a { color: var(--purple); text-decoration: none; font-weight: 600; }

/* ============== KEY FINDINGS SECTION (statistics page) ============== */
/* .findings.grid has <header class="section-head"> + <ol> as direct children.
   Without explicit grid-column, each auto-places in 1/12 of the 12-column
   .grid and the h2 text overflows. Pin them to left and right zones. */
section.findings.grid {
  padding: 64px 0;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
section.findings.grid > .section-head {
  grid-column: 1 / 4;
  align-self: start;
  max-width: none;
}
section.findings.grid > ol {
  grid-column: 4 / -1;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 40px;
}
section.findings.grid > ol > li {
  padding: 18px 0;
  border-top: 1px solid var(--line-soft);
}
.findings.grid ol .n {
  display: block;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--purple);
  margin-bottom: 8px;
}
.findings.grid ol h3 {
  font-family: var(--serif);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-0);
  margin: 0 0 8px;
}
.findings.grid ol p {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0;
}
.findings.grid ol .src {
  font-size: 11px;
  color: var(--ink-3);
  font-family: var(--sans);
  font-weight: 500;
  margin-left: 6px;
}
@media (max-width: 900px) {
  section.findings.grid > .section-head { grid-column: 1 / -1; }
  section.findings.grid > ol { grid-column: 1 / -1; }
  section.findings.grid > ol { grid-template-columns: 1fr; }
}

/* ============== SECTION HEAD ============== */
.section {
  padding: 88px 0;
  border-top: 1px solid var(--line);
}
.section.last { padding-bottom: 96px; }
.section-head {
  /* Canonical design: left-aligned within the .wrap container, capped at 820px. */
  margin: 0 0 44px;
  max-width: 820px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 20px;
  align-items: baseline;
}
.section-head .num {
  font-family: var(--serif);
  font-weight: 500;
  font-style: italic;
  font-size: 22px;
  color: var(--purple);
  line-height: 1;
  align-self: start;
  padding-top: 8px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  margin: 0 0 14px;
  font-size: clamp(30px, 2.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.008em;
  color: var(--ink-0);
  text-wrap: balance;
}
.section-head p {
  grid-column: 2;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-1);
  margin: 0;
  max-width: 64ch;
  text-wrap: pretty;
}

/* Optional small kicker label that sits in the right column ABOVE the
   H2 (used on credit-card and ec-payment pages, where each section has
   a category label like "Outstanding balances" or "Interest rates"
   above its heading). Explicit grid-column on h2 keeps auto-flow from
   pushing it into the left column once the kicker fills the row. */
.section-head h2 { grid-column: 2; }
.section-head .kicker {
  grid-column: 2;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--purple);
  margin: 0 0 8px;
}

.section .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 32px;
}
.span4 { grid-column: span 4; }
.span5 { grid-column: span 5; }
.span6 { grid-column: span 6; }
.span7 { grid-column: span 7; }
.span8 { grid-column: span 8; }
.span9 { grid-column: span 9; }
.span10 { grid-column: span 10; }
.span11 { grid-column: span 11; }
.span12 { grid-column: 1 / -1; }

/* ============== METRICS ============== */
.metric-group + .metric-group { margin-top: 56px; }
.mg-head {
  /* Canonical design: direct child of .metric-group (sits above .metrics, not inside it). */
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mg-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--ink-0);
}
.mg-desc {
  font-size: 15px;
  color: var(--ink-2);
}
.metrics {
  /* Canonical design: 2-up grid inside .metric-group, constrained by the .wrap container. */
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.metric {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 36px 30px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.metric.lead {
  background: var(--lavender-2);
  border-color: var(--purple-soft);
}
.metric .lbl {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.metric .num {
  font-family: var(--serif);
  font-size: 64px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--ink-0);
  margin: 0;
}
.metric .num .unit {
  font-size: 30px;
  margin-left: 4px;
  color: var(--ink-1);
  font-weight: 500;
}
.metric .delta {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-1);
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.metric .delta .arrow { font-weight: 700; }
.metric .delta.up { color: var(--ok); }
.metric .delta.dn { color: var(--bad); }
.metric .delta .ref { color: var(--ink-2); font-weight: 500; }
.metric .insight {
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-1);
  margin-top: 4px;
  max-width: 32ch;
}
.metric .insight b { color: var(--ink-0); font-weight: 700; }
.metric .foot {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-2);
}
.metric .foot .src { font-weight: 600; }
.metric .foot .yr { color: var(--ink-3); }

/* sparkline slot inside a metric card */
.metric .spark {
  margin: 2px -4px 0;
  height: 44px;
}
.metric .spark.spark-bars {
  height: 90px;
  display: flex;
  justify-content: center;
}
.metric .spark svg { width: 100%; height: 100%; }

/* volume list with sparklines (Sec 2) */
.vol-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vol-list li {
  padding: 16px 0 14px;
  border-bottom: 1px solid var(--line-soft);
}
.vol-list li:first-child { padding-top: 4px; }
.vol-list li:last-child { border-bottom: 0; }
.vol-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.vol-lab {
  font-size: 16px;
  color: var(--ink-1);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.vol-sub {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 400;
}
.vol-val {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 600;
  color: var(--ink-0);
  white-space: nowrap;
}
.vol-val .u {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  margin-left: 2px;
}
.vol-d {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  margin-left: 4px;
  vertical-align: middle;
}
.vol-d.up { color: var(--ok); }
.vol-d.dn { color: var(--bad); }
.spark-row {
  height: 36px;
  margin-left: -2px;
}
.spark-row svg { width: 100%; height: 100%; }

/* ranked-bar list (Sec 3 surface cards) */
.surf-card .rank-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.surf-card .rank-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  grid-template-columns: none;
  align-items: stretch;
}
.surf-card .rank-list li:first-child { padding-top: 2px; }
.surf-card .rank-list li:last-child { border-bottom: 0; }
.rl-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rl-top .name {
  font-size: 16px;
  color: var(--ink-1);
  font-weight: 600;
}
.rl-top .v {
  font-family: var(--serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink-0);
  white-space: nowrap;
}
.rl-bar {
  height: 8px;
  background: var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
.rl-bar > span {
  display: block;
  height: 100%;
  border-radius: 2px;
}
.rank-list .note {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.4;
}

/* reimbursement delta card (Sec 6) */
.reim-delta-card { padding: 36px 38px; }
.reim-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}
.reim-text { min-width: 0; }
.reim-eyebrow {
  font-size: 14px;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 10px;
}
.reim-big {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(40px, 4vw, 56px);
  letter-spacing: -.015em;
  color: var(--ink-0);
  line-height: 1.05;
  margin-bottom: 14px;
}
.reim-arrow {
  color: var(--purple);
  margin: 0 8px;
  font-weight: 400;
}
.reim-sub {
  font-size: 17px;
  color: var(--ink-1);
  line-height: 1.5;
  max-width: 48ch;
}
.reim-chart { height: 200px; }
.reim-chart svg { width: 100%; height: 100%; }

.byline-line {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink-2);
}
.byline-line b { color: var(--ink-0); font-weight: 600; }
.byline-line a { color: var(--purple); text-decoration: none; font-weight: 600; }
.byline-line a:hover { text-decoration: underline; }
.byline-line .sep { color: var(--ink-3); }

/* Section 5 — why-list */
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.why-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
}
.why-k {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
  color: var(--purple);
  line-height: 1;
}
.why-h {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink-0);
  margin-bottom: 4px;
}
.why-b {
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.5;
}

/* Section 6 — firm spread */
.firm-spread {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.fs-title {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 700;
}
.fs-scale { position: relative; }
.fs-track {
  position: relative;
  height: 14px;
  background: var(--line-soft);
  border-radius: 2px;
  margin-bottom: 32px;
}
.fs-fill {
  position: absolute;
  top: 0; bottom: 0;
  background: linear-gradient(to right, var(--purple-soft), var(--purple));
  border-radius: 2px;
}
.fs-tick {
  position: absolute;
  top: -4px;
  width: 2px;
  height: 22px;
  background: var(--ink-0);
  transform: translateX(-1px);
}
.fs-tick.fs-best { background: var(--purple); }
.fs-tick::after {
  content: attr(data-lab);
  position: absolute;
  top: 26px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink-0);
  white-space: nowrap;
}
.fs-tick::before {
  content: attr(data-cap);
  position: absolute;
  top: 48px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
  white-space: nowrap;
}
.fs-tick.fs-best::after { color: var(--purple); }
.fs-axis {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 4px;
}
.fs-sub {
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.5;
  max-width: 36ch;
}

@media (max-width: 900px) {
  .reim-row { grid-template-columns: 1fr; }
}

/* ============== CARDS / CHARTS ============== */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 36px 38px 36px;
  display: flex;
  flex-direction: column;
}
.card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink-0);
  letter-spacing: -.004em;
  text-wrap: balance;
}
.card .caption {
  font-size: 16px;
  color: var(--ink-2);
  margin: 0 0 22px;
  line-height: 1.55;
  max-width: 58ch;
}
.chart {
  position: relative;
  width: 100%;
  aspect-ratio: 9/5;   /* 540×300 SVG viewBox — reserves space before JS */
  min-height: 200px;   /* floor on very narrow screens */
}
.chart.tall { aspect-ratio: 2/1; min-height: 280px; }
.footnote {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-2);
}
.footnote .src-tag { font-weight: 600; color: var(--ink-1); }
.footnote .fresh {
  margin-left: auto;
  color: var(--ok);
  font-weight: 600;
}
.footnote .fresh::before {
  content: '';
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ok);
  margin-right: 8px;
  vertical-align: middle;
}

/* annot list (right-side metric lists in cards) */
.annot {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.annot li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--line-soft);
}
.annot li:first-child { padding-top: 4px; }
.annot li:last-child { border-bottom: 0; }
.annot .lab {
  font-size: 16px;
  color: var(--ink-1);
  font-weight: 600;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.annot .sub {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 400;
  line-height: 1.5;
}
.annot .val {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-0);
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  white-space: nowrap;
}
.annot .val .unit {
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 500;
  font-family: var(--sans);
  margin-left: 2px;
}
.annot .delta {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
}
.annot .delta.up { color: var(--ok); }
.annot .delta.dn { color: var(--bad); }
.annot .val-text {
  font-size: 16px;
  font-family: var(--sans);
  color: var(--ink-1);
  font-weight: 600;
  max-width: 18ch;
  text-align: right;
}

/* tables */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tbl thead th {
  text-align: left;
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 700;
  padding: 12px 12px 14px;
  border-bottom: 2px solid var(--ink-3);
}
.tbl tbody td {
  padding: 16px 12px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-1);
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl b { font-weight: 700; color: var(--ink-0); }

/* takeaway */
.takeaway {
  grid-column: 1 / -1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple);
  border-radius: 10px;
  padding: 22px 28px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
.takeaway .lbl {
  font-size: 15px;
  color: var(--purple);
  font-weight: 700;
}
.takeaway p {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink-1);
  text-wrap: pretty;
}

.caveat {
  grid-column: 1 / -1;
  background: var(--warn-bg);
  border: 1px solid #ecd7b6;
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 16px 22px;
  font-size: 16px;
  line-height: 1.55;
  color: #4a3008;
}
.caveat b { color: #2c1c04; font-weight: 700; }

/* Reading-the-data callout (and similar contextual callouts inside .grid sections) */
.callout {
  grid-column: 1 / -1;
  background: var(--tint, #f4f6fb);
  border: 1px solid #d6e2ee;
  border-radius: 8px;
  padding: 16px 22px;
  margin-top: 16px;
}
.callout .lbl {
  font-size: 11px;
  color: #1f3656;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.callout p {
  font-family: var(--serif, Georgia, serif);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1, #1f2937);
  margin: 0;
}
.callout p + p { margin-top: 8px; }

/* definition cards (APP regime) */
.def-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}
.def-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 28px;
}
.def-card .k {
  font-size: 14px;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 10px;
}
.def-card h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink-0);
}
.def-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-1);
}

/* compare (before/after) */
.compare {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
.compare > .col {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 32px;
}
.compare > .col.after {
  border-color: var(--purple-soft);
  background: var(--lavender-2);
}
.compare .stamp {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 700;
  margin-bottom: 8px;
}
.compare .col.after .stamp { color: var(--purple); }
.compare h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink-0);
}
.compare .lede {
  font-size: 16px;
  color: var(--ink-1);
  margin: 0 0 22px;
  line-height: 1.5;
}
.compare dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  row-gap: 14px;
  column-gap: 20px;
}
.compare dt {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 600;
  align-self: baseline;
}
.compare dd {
  margin: 0;
  font-size: 16px;
  color: var(--ink-1);
  font-weight: 500;
}
.compare dd b { color: var(--purple); font-weight: 700; }

/* surface group cards */
.surf-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 4px;
}
.surf-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 30px 22px;
}
.surf-card.a { border-top: 4px solid var(--purple); }
.surf-card.b { border-top: 4px solid var(--ok); }
.surf-card .h {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.surf-card .group-label {
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 700;
}
.surf-card .total {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--ink-0);
  font-weight: 600;
}
.surf-card h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  margin: 6px 0 16px;
  color: var(--ink-0);
}
.surf-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.surf-card li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
  gap: 16px;
  align-items: baseline;
}
.surf-card li:last-child { border-bottom: 0; }
.surf-card .name {
  font-size: 16px;
  color: var(--ink-1);
  font-weight: 600;
}
.surf-card .note {
  font-size: 14px;
  color: var(--ink-2);
  margin-top: 4px;
  display: block;
  font-weight: 400;
  line-height: 1.4;
}
.surf-card .v {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink-0);
  white-space: nowrap;
}

/* disclosure / sources */
.disclose {
  grid-column: 1 / -1;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.disclose summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  cursor: pointer;
  font-weight: 600;
}
.disclose summary::-webkit-details-marker { display: none; }
.disclose .label {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: var(--ink-0);
  font-size: 18px;
}
.disclose .tag {
  font-size: 13px;
  background: var(--lavender);
  color: var(--purple);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 700;
}
.disclose .chev {
  color: var(--ink-2);
  transition: transform .2s;
  font-size: 16px;
}
.disclose[open] .chev { transform: rotate(180deg); }
.disclose .body {
  padding: 8px 28px 24px;
  border-top: 1px solid var(--line-soft);
}

.method-acc {
  grid-column: 1 / -1;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
  overflow: hidden;
}
.method-acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px;
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-0);
  font-size: 18px;
}
.method-acc summary::-webkit-details-marker { display: none; }
.method-acc .chev { color: var(--ink-2); transition: transform .2s; }
.method-acc[open] .chev { transform: rotate(180deg); }
.method-acc:not([open]) .body { display: none; }
.method-acc[open] .body {
  padding: 4px 28px 28px;
  border-top: 1px solid var(--line-soft);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 48px;
}
.method-acc h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  margin: 22px 0 8px;
  color: var(--ink-0);
}
.method-acc p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-1);
}

/* ============== FOOT ============== */
.page-foot {
  border-top: 1px solid var(--line);
  padding: 36px 0 56px;
  font-size: 14px;
  color: var(--ink-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.page-foot a { color: var(--ink-1); font-weight: 600; }

/* ============== RESPONSIVE ============== */
@media (max-width: 1100px) {
  .hero.grid { grid-template-columns: 1fr; }
  .hero-aside { grid-column: 1; grid-row: auto; margin-top: 0; max-width: 640px; }
  .span4, .span5, .span6, .span7, .span8 { grid-column: span 12; }
  .metrics { grid-template-columns: 1fr; }
  .byline { grid-template-columns: repeat(2, 1fr); row-gap: 16px; }
  .byline .item:nth-child(2n) { border-right: 0; }
  .def-grid, .compare, .surf-grid { grid-template-columns: 1fr; }
  .compare dl { grid-template-columns: 1fr; row-gap: 4px; }
  .compare dt { margin-top: 10px; }
  .method-acc[open] .body { grid-template-columns: 1fr; }
  .takeaway { grid-template-columns: 1fr; gap: 10px; }
  .section-head { grid-template-columns: 1fr; }
  .section-head .num { padding-top: 0; }
  .section-head p { grid-column: 1; }
}
@media (max-width: 640px) {
  .wrap { padding: 0 20px; }
  .mast .inner { padding: 12px 20px; flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero { padding: 40px 0; }
  .section { padding: 48px 0; }
  .metric .num { font-size: 52px; }
  .metric { padding: 24px 22px 20px; }
  .card { padding: 24px 22px 22px; }
}

/* ============== WP INTEGRATION OVERRIDES ============== */
/* Hidden on WP: theme nav already shows the data-hub section tabs. */
.mast { display: none !important; }
/* be-citation.css scopes `.be-citation-page .hero` at higher specificity.
   Match the selector so v6 hero values win, and add isolation so the
   ::before lavender background isn't hidden by parent stacking contexts. */
.be-citation-page .hero,
.hero {
  isolation: isolate;
}
.be-citation-page .hero {
  border-bottom: 0;
  background: transparent;
  padding: 96px 0 112px;  /* override be-citation.css padding */
}
/* be-citation.css defines `.method` as a 16x16 status badge. Reset
   that here so the "View sources and methodology" link renders as
   normal inline text. */
.be-citation-page .cite-actions .cite-link,
.be-citation-page .cite-actions .cite-link.method {
  display: inline-block;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
  vertical-align: baseline;
}
.be-citation-page .cite-actions .cite-link { color: var(--purple); }
.be-citation-page .cite-actions .cite-link.method { color: var(--ink-2); }
.be-citation-page .cite-actions .cite-link:hover { text-decoration: underline; }

/* be-citation.css defines `.be-citation-page .caveat` as a 90px/1fr grid
   with a grey background — it clobbers the v6 amber inline caveat at higher
   specificity. Re-assert the v6 caveat appearance scoped to the wrapper so
   it wins on every v6 page (fraud, credit cards, ecommerce, benchmarks). */
.be-citation-page .caveat {
  display: block;
  grid-column: 1 / -1;
  background: var(--warn-bg);
  border: 1px solid #ecd7b6;
  border-left: 4px solid var(--warn);
  border-radius: 8px;
  padding: 16px 22px;
  margin: 0;
  gap: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a3008;
}
.be-citation-page .caveat b {
  color: #2c1c04;
  font-weight: 700;
  font-family: var(--sans);
}
.be-citation-page .caveat p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: #4a3008;
  max-width: none;
}

/* ============== PAGE-LOCAL ADDITIONS (Credit Cards) ============== */

  /* Page-local additions only — sits on top of v6/styles-v6.css */

  /* "verify" pill for unconfirmed figures (the markdown flagged several [VERIFY] cells) */
  .vfy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a4a0f;
    background: #fbf3e8;
    border: 1px solid #ecd7b6;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--sans);
  }
  .metric .num .vfy { font-size: 10px; margin-left: 10px; transform: translateY(-12px); }

  /* Small inline data tables — used in §2 balances and §4 APRs as the underlying-data
     companion that the editorial calls out as the source of truth. */
  .data-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-top: 4px;
  }
  .data-tbl thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--ink-3);
    background: transparent;
  }
  .data-tbl tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
  }
  .data-tbl tbody tr:last-child td { border-bottom: 0; }
  .data-tbl tbody tr:last-child td { color: var(--ink-0); font-weight: 700; }
  .data-tbl .delta { font-size: 13px; font-weight: 700; }
  .data-tbl .delta.up { color: var(--ok); }
  .data-tbl .delta.dn { color: var(--bad); }
  .data-tbl .delta.flat { color: var(--ink-3); }
  .data-tbl td.num { font-family: var(--serif); font-weight: 600; font-size: 16px; }

  /* Persistent-debt distribution rows (§3) — name, bar, accounts, balance */
  .pd-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .pd-list li {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .pd-list li:first-child { padding-top: 6px; }
  .pd-list li:last-child { border-bottom: 0; }
  .pd-name {
    font-size: 16px;
    color: var(--ink-1);
    font-weight: 600;
    display: flex;
    flex-direction: column;
    gap: 3px;
  }
  .pd-name .sub {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 400;
    line-height: 1.4;
  }
  .pd-bar {
    height: 10px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
    min-width: 80px;
  }
  .pd-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
  }
  .pd-acc, .pd-bal {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink-0);
    white-space: nowrap;
    text-align: right;
    min-width: 64px;
  }
  .pd-bal { color: var(--purple); }
  .pd-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.2fr) auto auto;
    gap: 18px;
    align-items: center;
    padding: 0 0 10px;
    border-bottom: 1.5px solid var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .pd-head .r { text-align: right; }

  /* Timeline (§7) — horizontal milestone strip */
  .timeline {
    grid-column: 1 / -1;
    position: relative;
    padding: 10px 0 0;
  }
  .tl-axis {
    position: relative;
    height: 2px;
    background: var(--line);
    margin: 56px 12px 0;
  }
  .tl-axis::before,
  .tl-axis::after {
    content: '';
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-3);
  }
  .tl-axis::before { left: -4px; }
  .tl-axis::after { right: -4px; }
  .tl-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-top: -78px;
    position: relative;
  }
  .tl-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px 18px;
    position: relative;
  }
  .tl-item .yr {
    font-family: var(--serif);
    font-style: italic;
    font-weight: 600;
    color: var(--purple);
    font-size: 17px;
    margin-bottom: 6px;
  }
  .tl-item h5 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--ink-0);
    text-wrap: balance;
  }
  .tl-item p {
    margin: 0;
    font-size: 14px;
    color: var(--ink-1);
    line-height: 1.5;
  }
  .tl-item::before {
    content: '';
    position: absolute;
    bottom: -38px;
    left: 24px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--purple);
    border: 3px solid var(--paper-2);
    box-shadow: 0 0 0 1px var(--purple);
  }

  /* Business card stat strip (§6) */
  .biz-strip {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
  }
  .biz-cell {
    padding: 28px 28px 26px;
    border-right: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .biz-cell:last-child { border-right: 0; }
  .biz-cell .k {
    font-size: 13px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .biz-cell .v {
    font-family: var(--serif);
    font-size: 34px;
    font-weight: 600;
    letter-spacing: -.012em;
    color: var(--ink-0);
    line-height: 1.05;
    margin-top: 2px;
  }
  .biz-cell .v .u {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 4px;
  }
  .biz-cell .sub {
    font-size: 14px;
    color: var(--ink-2);
    line-height: 1.5;
    margin-top: 4px;
  }

  /* BNPL caveat box variant — same as .caveat but accepts inline data */
  .bnpl-meta {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
  .bnpl-meta div { display: flex; flex-direction: column; gap: 2px; }
  .bnpl-meta .k { font-size: 12px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
  .bnpl-meta .v { font-family: var(--serif); font-size: 18px; color: var(--ink-0); font-weight: 600; }

  @media (max-width: 1100px) {
    .tl-grid { grid-template-columns: repeat(2, 1fr); }
    .tl-axis { display: none; }
    .tl-item::before { display: none; }
    .biz-strip { grid-template-columns: repeat(2, 1fr); }
    .biz-cell { border-bottom: 1px solid var(--line-soft); }
    .biz-cell:nth-child(2n) { border-right: 0; }
    .biz-cell:nth-last-child(-n+2) { border-bottom: 0; }
    .pd-list li,
    .pd-head { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pd-list li .pd-bar { grid-column: 1 / -1; order: 5; }
    .pd-head { grid-template-columns: minmax(0, 1fr) auto auto; }
    .pd-head .r-bar { display: none; }
  }

/* ============== PAGE-LOCAL ADDITIONS (E-commerce) ============== */

  /* Page-local additions — sits on top of v6/styles-v6.css */

  .vfy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a4a0f;
    background: #fbf3e8;
    border: 1px solid #ecd7b6;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--sans);
  }
  .metric .num .vfy { font-size: 10px; margin-left: 10px; transform: translateY(-12px); }

  .data-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-top: 4px;
  }
  .data-tbl thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--ink-3);
  }
  .data-tbl tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
  }
  .data-tbl tbody tr:last-child td { border-bottom: 0; color: var(--ink-0); font-weight: 700; }
  .data-tbl td.num { font-family: var(--serif); font-weight: 600; font-size: 16px; }
  .data-tbl .delta { font-size: 13px; font-weight: 700; }
  .data-tbl .delta.up { color: var(--ok); }
  .data-tbl .delta.dn { color: var(--bad); }
  .data-tbl .delta.flat { color: var(--ink-3); }
  .data-tbl tbody tr.peak td { background: var(--lavender-2); }
  .data-tbl tbody tr.peak td:first-child { box-shadow: inset 3px 0 0 var(--purple); }

  /* Payment-mix slope reference list under the slope chart */
  .mix-key {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 24px;
  }
  .mix-key li {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .mix-key .sw { width: 12px; height: 12px; border-radius: 2px; }
  .mix-key .nm { font-size: 14px; color: var(--ink-1); font-weight: 600; }
  .mix-key .ch {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 700;
    color: var(--purple);
    white-space: nowrap;
  }
  .mix-key .ch.dn { color: var(--bad); }
  .mix-key .ch.flat { color: var(--ink-3); }

  /* Cart abandonment estimate cards (§5) */
  .est-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
  .est-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-top: 4px solid var(--warn);
    border-radius: 12px;
    padding: 26px 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .est-card .k {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--warn);
  }
  .est-card .v {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 44px;
    line-height: 1.05;
    color: var(--ink-0);
    letter-spacing: -.015em;
  }
  .est-card .v .u {
    font-family: var(--sans);
    font-size: 16px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 4px;
  }
  .est-card p {
    margin: 4px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-1);
  }
  .est-card .src {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 600;
  }

  /* §7 cross-link box */
  .xlink {
    grid-column: 1 / -1;
    background: var(--lavender-2);
    border: 1px solid var(--purple-soft);
    border-radius: 12px;
    padding: 28px 32px;
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
  }
  .xlink h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 8px;
    color: var(--ink-0);
  }
  .xlink p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-1);
  }
  .xlink .cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--purple);
    font-weight: 700;
    font-size: 16px;
    margin-top: 14px;
  }
  .xlink .cta:hover { text-decoration: underline; }
  .xlink .stat {
    background: var(--paper);
    border: 1px solid var(--purple-soft);
    border-radius: 10px;
    padding: 20px 22px;
  }
  .xlink .stat .k {
    font-size: 12px;
    color: var(--purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .xlink .stat .v {
    font-family: var(--serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--ink-0);
    margin: 4px 0 6px;
    letter-spacing: -.015em;
  }
  .xlink .stat .sub {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.4;
  }

  /* cross-border combined card */
  .cb-row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 32px;
    align-items: stretch;
  }
  .cb-stats {
    display: flex;
    flex-direction: column;
    gap: 18px;
    justify-content: center;
  }
  .cb-stat {
    border-left: 3px solid var(--purple-soft);
    padding: 4px 0 4px 18px;
  }
  .cb-stat .k {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 600;
  }
  .cb-stat .v {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 600;
    color: var(--ink-0);
    line-height: 1.1;
  }
  .cb-stat .v .u {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 2px;
  }
  .cb-stat .sub {
    font-size: 13px;
    color: var(--ink-2);
    line-height: 1.45;
    margin-top: 2px;
  }

  @media (max-width: 1100px) {
    .mix-key { grid-template-columns: repeat(2, 1fr); }
    .est-grid { grid-template-columns: 1fr; }
    .xlink, .cb-row { grid-template-columns: 1fr; }
  }

/* ============== PAGE-LOCAL ADDITIONS (Card Processing) ============== */

  /* Page-local additions */

  .vfy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a4a0f;
    background: #fbf3e8;
    border: 1px solid #ecd7b6;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--sans);
  }
  .metric .num .vfy { font-size: 10px; margin-left: 10px; transform: translateY(-12px); }

  .data-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    margin-top: 4px;
  }
  .data-tbl thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 8px 10px;
    border-bottom: 1.5px solid var(--ink-3);
  }
  .data-tbl tbody td {
    padding: 11px 10px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    font-variant-numeric: tabular-nums;
  }
  .data-tbl tbody tr:last-child td { border-bottom: 0; }
  .data-tbl tbody tr.total td {
    background: var(--lavender-2);
    color: var(--ink-0);
    font-weight: 700;
    border-top: 1.5px solid var(--ink-3);
  }
  .data-tbl td.num { font-family: var(--serif); font-weight: 600; font-size: 16px; }

  /* Interchange rate matrix (§3) — heat-mapped table */
  .rate-matrix {
    width: 100%;
    border-collapse: separate;
    border-spacing: 4px;
    font-size: 15px;
  }
  .rate-matrix thead th {
    text-align: center;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    background: transparent;
  }
  .rate-matrix thead th:first-child { text-align: left; }
  .rate-matrix tbody td {
    padding: 18px 16px;
    text-align: center;
    border-radius: 8px;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink-0);
    font-variant-numeric: tabular-nums;
    background: var(--lavender-2);
    position: relative;
  }
  .rate-matrix tbody td:first-child {
    background: transparent;
    font-family: var(--sans);
    font-weight: 600;
    font-size: 15px;
    color: var(--ink-1);
    text-align: left;
    padding-left: 0;
  }
  .rate-matrix td.capped { background: #e8dff2; }
  .rate-matrix td.capped::after {
    content: 'capped';
    position: absolute;
    top: 4px;
    right: 6px;
    font-family: var(--sans);
    font-size: 9px;
    font-weight: 700;
    color: var(--purple);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .rate-matrix td.heat-1 { background: #faf3e8; color: var(--ink-1); }
  .rate-matrix td.heat-2 { background: #f5e2c2; color: var(--ink-0); }
  .rate-matrix td.heat-3 { background: #ecc185; color: var(--ink-0); }
  .rate-matrix td.heat-4 { background: #d99956; color: #fff; }
  .rate-matrix td.heat-5 { background: #b56e1f; color: #fff; }

  /* §5 merchant-ladder dumbbell rows */
  .ladder {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
  }
  .ladder li {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) auto;
    gap: 28px;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ladder li:last-child { border-bottom: 0; }
  .ladder .seg-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .ladder .seg-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink-0);
  }
  .ladder .seg-sub {
    font-size: 13px;
    color: var(--ink-2);
  }
  .ladder .ld-track {
    position: relative;
    height: 36px;
  }
  .ladder .ld-axis {
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 4px;
    background: var(--line-soft);
    border-radius: 2px;
    transform: translateY(-50%);
  }
  .ladder .ld-range {
    position: absolute;
    top: 50%;
    height: 10px;
    border-radius: 2px;
    transform: translateY(-50%);
  }
  .ladder .ld-pt {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--paper);
    border: 3px solid var(--purple);
    transform: translate(-50%, -50%);
  }
  .ladder .ld-lbl {
    position: absolute;
    top: -2px;
    font-family: var(--serif);
    font-weight: 700;
    font-size: 13px;
    color: var(--purple);
    transform: translateX(-50%);
    white-space: nowrap;
  }
  .ladder .ld-com {
    font-family: var(--serif);
    font-size: 17px;
    font-weight: 600;
    color: var(--warn);
    white-space: nowrap;
    text-align: right;
    min-width: 110px;
  }
  .ladder-axis {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr) auto;
    gap: 28px;
    align-items: center;
    padding: 0 0 12px;
    border-bottom: 1.5px solid var(--ink-3);
    font-size: 12px;
    font-weight: 700;
    color: var(--ink-2);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .ladder-axis .ld-axis-row {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--ink-3);
    font-weight: 600;
    margin-top: 4px;
  }

  /* PSR review cards (§6) */
  .review-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .review-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 30px;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .review-card.focus {
    border-color: var(--purple-soft);
    background: var(--lavender-2);
  }
  .review-card .tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
  }
  .review-card .code {
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 600;
    color: var(--purple);
    background: var(--lavender);
    padding: 3px 8px;
    border-radius: 4px;
  }
  .review-card.focus .code { background: var(--paper); }
  .review-card .status {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ok);
  }
  .review-card .status.live { color: var(--ok); }
  .review-card .status.dev { color: var(--warn); }
  .review-card .status.adj { color: var(--ink-2); }
  .review-card h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    color: var(--ink-0);
    text-wrap: balance;
  }
  .review-card .summary {
    font-size: 16px;
    line-height: 1.55;
    color: var(--ink-1);
    margin: 0;
  }
  .review-card .remedies {
    list-style: none;
    margin: 0;
    padding: 14px 0 0;
    border-top: 1px solid var(--line-soft);
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .review-card.focus .remedies { border-top-color: var(--purple-soft); }
  .review-card .remedies li {
    font-size: 14px;
    color: var(--ink-1);
    line-height: 1.5;
    padding-left: 18px;
    position: relative;
  }
  .review-card .remedies li::before {
    content: '';
    position: absolute;
    left: 0; top: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--purple);
  }

  /* "Where the £1 goes" hero treatment in §2 */
  .pound-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
  }
  .pound-figure {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 24px 28px;
  }
  .pound-figure h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 20px;
    margin: 0 0 4px;
    color: var(--ink-0);
  }
  .pound-figure .yr-sub {
    font-size: 13px;
    color: var(--ink-2);
    margin-bottom: 18px;
  }
  .pound-keep {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 48px;
    line-height: 1;
    letter-spacing: -.018em;
    color: var(--ink-0);
    margin-bottom: 4px;
  }
  .pound-keep .of {
    font-size: 16px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 6px;
    font-family: var(--sans);
  }
  .pound-bar {
    display: flex;
    height: 32px;
    margin: 20px 0 14px;
    border-radius: 4px;
    overflow: hidden;
  }
  .pound-bar > span {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
  }
  .pound-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
  }
  .pound-legend .pl-row {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
  }
  .pound-legend .sw { width: 10px; height: 10px; border-radius: 2px; }
  .pound-legend .nm { color: var(--ink-1); font-weight: 600; }
  .pound-legend .val { font-family: var(--serif); font-weight: 700; color: var(--ink-0); }

  /* §4 fees-index chart caveat strip */
  .index-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
  .index-meta .cell .k {
    font-size: 12px;
    color: var(--ink-3);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    display: block;
    margin-bottom: 4px;
  }
  .index-meta .cell .v {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 600;
    color: var(--ink-0);
    line-height: 1.1;
  }
  .index-meta .cell .v.warn { color: var(--warn); }
  .index-meta .cell .sub {
    font-size: 13px;
    color: var(--ink-2);
    margin-top: 4px;
    line-height: 1.4;
  }

  @media (max-width: 1100px) {
    .pound-card { grid-template-columns: 1fr; }
    .review-grid { grid-template-columns: 1fr; }
    .ladder li, .ladder-axis { grid-template-columns: 1fr; gap: 12px; }
    .index-meta { grid-template-columns: 1fr; }
    .rate-matrix tbody td { padding: 12px 8px; font-size: 14px; }
  }

/* ============== PAGE-LOCAL ADDITIONS (Methodology) ============== */

  /* Page-local additions — this page is a typographic operating manual,
     so the extras are mostly table treatments and numbered cards.
     No charts → no JS. */

  .vfy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a4a0f;
    background: #fbf3e8;
    border: 1px solid #ecd7b6;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--sans);
  }
  .metric .num .vfy { font-size: 10px; margin-left: 10px; transform: translateY(-12px); }

  /* §2 source-category matrix — included/excluded states are visible at a glance */
  .src-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    margin-top: 4px;
  }
  .src-matrix thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border-bottom: 1.5px solid var(--ink-3);
  }
  .src-matrix tbody td {
    padding: 18px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    line-height: 1.5;
    vertical-align: top;
  }
  .src-matrix tbody tr:last-child td { border-bottom: 0; }
  .src-matrix .cat {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    color: var(--ink-0);
    display: flex;
    align-items: center;
    gap: 10px;
    width: 28%;
  }
  .src-matrix .ex {
    color: var(--ink-2);
    font-size: 15px;
  }
  .src-matrix tr.included { background: rgba(91, 42, 134, 0.025); }
  .src-matrix tr.included .cat::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--ok);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(31,107,60,0.15);
  }
  .src-matrix tr.estimate .cat::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--warn);
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(138, 74, 15, 0.18);
  }
  .src-matrix tr.excluded { color: var(--ink-3); }
  .src-matrix tr.excluded .cat {
    color: var(--ink-2);
    text-decoration: line-through;
    text-decoration-color: rgba(160, 42, 35, 0.5);
    text-decoration-thickness: 1.5px;
  }
  .src-matrix tr.excluded .cat::before {
    content: '';
    width: 10px; height: 10px;
    border-radius: 50%;
    background: transparent;
    border: 2px solid var(--bad);
    flex-shrink: 0;
  }
  .src-matrix tr.excluded td:last-child {
    font-weight: 700;
    color: var(--bad);
  }

  /* §3 update-cadence table */
  .cadence {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
  }
  .cadence thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border-bottom: 1.5px solid var(--ink-3);
  }
  .cadence tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    vertical-align: top;
  }
  .cadence tbody tr:last-child td { border-bottom: 0; }
  .cadence td.src { font-weight: 600; color: var(--ink-0); width: 38%; }
  .cadence td.cad {
    width: 22%;
  }
  .cadence td.cad .pill {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--purple);
    background: var(--lavender);
    padding: 3px 10px;
    border-radius: 12px;
  }
  .cadence td.cad .pill.q { color: #1f6b3c; background: rgba(31,107,60,0.10); }
  .cadence td.cad .pill.m { color: #1f8a5b; background: rgba(31,138,91,0.10); }
  .cadence td.cad .pill.a { color: var(--purple); background: var(--lavender); }
  .cadence td.cad .pill.h { color: var(--warn); background: var(--warn-bg); }
  .cadence td.cad .pill.ah { color: var(--ink-2); background: var(--paper-2); border: 1px solid var(--line); }

  /* §4 rule cards */
  .rule-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .rule-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 28px 30px 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
  }
  .rule-card .rule-n {
    position: absolute;
    top: 24px;
    right: 28px;
    font-family: var(--serif);
    font-style: italic;
    font-size: 22px;
    color: var(--purple);
    font-weight: 500;
  }
  .rule-card .lab {
    font-size: 12px;
    color: var(--purple);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .rule-card h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    margin: 0;
    color: var(--ink-0);
    text-wrap: balance;
    padding-right: 40px;
  }
  .rule-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-1);
  }
  .rule-card .eg {
    background: var(--paper-2);
    border-left: 3px solid var(--purple-soft);
    padding: 12px 16px;
    border-radius: 4px;
    font-size: 14px;
    color: var(--ink-1);
    line-height: 1.5;
  }
  .rule-card .eg b { color: var(--ink-0); }

  /* §5 numbered process flow */
  .flow {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 16px;
    counter-reset: flow;
  }
  .flow > li {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 20px 20px 22px;
    position: relative;
    counter-increment: flow;
  }
  .flow > li::before {
    content: counter(flow);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    background: var(--purple);
    color: #fff;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 15px;
    border-radius: 50%;
    margin-bottom: 14px;
  }
  .flow h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 17px;
    line-height: 1.25;
    margin: 0 0 8px;
    color: var(--ink-0);
    text-wrap: balance;
  }
  .flow p {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink-1);
  }

  /* §6 out-of-scope grid */
  .scope-grid {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }
  .scope-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 22px 26px 20px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px 18px;
    align-items: start;
  }
  .scope-item .mark {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(160, 42, 35, 0.08);
    color: var(--bad);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 15px;
    grid-row: 1 / span 2;
    flex-shrink: 0;
  }
  .scope-item h4 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    line-height: 1.25;
    margin: 0;
    color: var(--ink-0);
    align-self: center;
  }
  .scope-item p {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-2);
    grid-column: 2;
  }
  .scope-item p b { color: var(--ink-1); font-weight: 600; }

  /* §1 hero callout — 100% coverage strip across the 5 pages */
  .coverage {
    grid-column: 1 / -1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 28px 32px;
    margin-top: 24px;
  }
  .coverage h3 {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    margin: 0 0 6px;
    color: var(--ink-0);
  }
  .coverage .sub {
    font-size: 15px;
    color: var(--ink-2);
    margin: 0 0 22px;
  }
  .coverage-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
  }
  .cov-cell {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .cov-cell .nm {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 600;
  }
  .cov-cell .ct {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 600;
    color: var(--ink-0);
    line-height: 1;
  }
  .cov-cell .ct .of {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 2px;
  }
  .cov-bar {
    height: 4px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
  }
  .cov-bar > span {
    display: block;
    height: 100%;
    background: var(--ok);
    border-radius: 2px;
  }

  @media (max-width: 1100px) {
    .rule-grid, .scope-grid { grid-template-columns: 1fr; }
    .flow, .coverage-grid { grid-template-columns: repeat(2, 1fr); }
  }

/* ============== PAGE-LOCAL ADDITIONS (Payments rebuild) ============== */

  /* Page-local additions */

  .vfy {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #8a4a0f;
    background: #fbf3e8;
    border: 1px solid #ecd7b6;
    padding: 1px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 8px;
    font-family: var(--sans);
  }

  /* Pills used in §3 systems table and §7 source register */
  .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
  }
  .pill.ok { color: var(--ok); background: rgba(31,107,60,0.10); }
  .pill.warn { color: var(--warn); background: var(--warn-bg); }
  .pill .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
  }

  /* §3 systems table — slightly richer than the base .tbl */
  .systems {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
  }
  .systems thead th {
    text-align: left;
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 10px 12px;
    border-bottom: 1.5px solid var(--ink-3);
  }
  .systems thead th.r,
  .systems tbody td.r { text-align: right; }
  .systems tbody td {
    padding: 14px 12px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-1);
    vertical-align: top;
    font-variant-numeric: tabular-nums;
  }
  .systems tbody tr:last-child td { border-bottom: 0; }
  .systems .sys-nm {
    font-weight: 700;
    color: var(--ink-0);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .systems .sys-nm .sub {
    font-size: 12px;
    color: var(--ink-2);
    font-weight: 400;
  }
  .systems td.num {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 16px;
    color: var(--ink-0);
  }

  /* §4 Open Banking use-cases — bar list */
  .ob-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }
  .ob-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .ob-list li:last-child { border-bottom: 0; }
  .ob-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
  }
  .ob-top .name {
    font-size: 15px;
    color: var(--ink-1);
    font-weight: 600;
  }
  .ob-top .v {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ink-0);
    white-space: nowrap;
  }
  .ob-bar {
    height: 8px;
    background: var(--line-soft);
    border-radius: 2px;
    overflow: hidden;
  }
  .ob-bar > span {
    display: block;
    height: 100%;
    border-radius: 2px;
  }

  /* §6 cash-reliance demographic cards */
  .demo-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .demo-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 16px 18px;
  }
  .demo-card.lead { background: var(--lavender-2); border-color: var(--purple-soft); }
  .demo-card .k {
    font-size: 13px;
    color: var(--ink-2);
    font-weight: 600;
    margin-bottom: 4px;
  }
  .demo-card .v {
    font-family: var(--serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--ink-0);
    line-height: 1.05;
    letter-spacing: -.012em;
  }
  .demo-card .v .u {
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-2);
    font-weight: 500;
    margin-left: 2px;
  }
  .demo-card .sub {
    font-size: 12px;
    color: var(--ink-2);
    margin-top: 4px;
  }

  /* Side-by-side card-payments charts in §5 */
  .twin-charts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  /* Mix-stack legend below the chart */
  .mix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
  }
  .mix-legend .pair {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ink-1);
    font-weight: 600;
  }
  .mix-legend .sw {
    width: 12px; height: 12px;
    border-radius: 2px;
  }

  @media (max-width: 1100px) {
    .twin-charts { grid-template-columns: 1fr; }
    .demo-grid { grid-template-columns: 1fr; }
  }

/* ============== PAGE-LOCAL ADDITIONS (Fraud rebuild) ============== */

/* ============== PAGE-LOCAL ADDITIONS (E-commerce) ============== */

.vfy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #8a4a0f;
  background: #fbf3e8;
  border: 1px solid #ecd7b6;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
  margin-left: 8px;
  font-family: var(--sans);
}
.metric .num .vfy { font-size: 10px; margin-left: 10px; transform: translateY(-12px); }

.est { font-size: 10px; vertical-align: super; color: var(--ink-3); font-weight: 600; letter-spacing: .02em; }
.metric .num .est { margin-left: 6px; transform: translateY(-8px); display: inline-block; }
.val .est { font-size: 9px; }

.data-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin-top: 4px;
}
.data-tbl thead th {
  text-align: left;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 8px 10px;
  border-bottom: 1.5px solid var(--ink-3);
}
.data-tbl tbody td {
  padding: 11px 10px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.data-tbl tbody tr:last-child td { border-bottom: 0; color: var(--ink-0); font-weight: 700; }
.data-tbl td.num { font-family: var(--serif); font-weight: 600; font-size: 16px; }
.data-tbl .delta { font-size: 13px; font-weight: 700; }
.data-tbl .delta.up { color: var(--ok); }
.data-tbl .delta.dn { color: var(--bad); }
.data-tbl .delta.flat { color: var(--ink-3); }
.data-tbl tbody tr.peak td { background: var(--lavender-2); }
.data-tbl tbody tr.peak td:first-child { box-shadow: inset 3px 0 0 var(--purple); }

/* Payment-mix slope reference list under the slope chart */
.mix-key {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 24px;
}
.mix-key li {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line-soft);
}
.mix-key .sw { width: 12px; height: 12px; border-radius: 2px; }
.mix-key .nm { font-size: 14px; color: var(--ink-1); font-weight: 600; }
.mix-key .ch {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  color: var(--purple);
  white-space: nowrap;
}
.mix-key .ch.dn { color: var(--bad); }
.mix-key .ch.flat { color: var(--ink-3); }

/* Cart abandonment estimate cards (§5) */
.est-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.est-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 4px solid var(--warn);
  border-radius: 12px;
  padding: 26px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.est-card .k {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--warn);
}
.est-card .v {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.05;
  color: var(--ink-0);
  letter-spacing: -.015em;
}
.est-card .v .u {
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink-2);
  font-weight: 500;
  margin-left: 4px;
}
.est-card p {
  margin: 4px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
}
.est-card .src {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 600;
}

/* §7 cross-link box */
.xlink {
  grid-column: 1 / -1;
  background: var(--lavender-2);
  border: 1px solid var(--purple-soft);
  border-radius: 12px;
  padding: 28px 32px;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.xlink h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
  color: var(--ink-0);
}
.xlink p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-1);
}
.xlink .cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--purple);
  font-weight: 700;
  font-size: 16px;
  margin-top: 14px;
}
.xlink .cta:hover { text-decoration: underline; }
.xlink .stat {
  background: var(--paper);
  border: 1px solid var(--purple-soft);
  border-radius: 10px;
  padding: 20px 22px;
}
.xlink .stat .k {
  font-size: 12px;
  color: var(--purple);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.xlink .stat .v {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 600;
  color: var(--ink-0);
  margin: 4px 0 6px;
  letter-spacing: -.015em;
}
.xlink .stat .sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.4;
}

/* Cross-border combined card */
.cb-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 32px;
  align-items: stretch;
}
.cb-stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
}
.cb-stat {
  border-left: 3px solid var(--purple-soft);
  padding: 4px 0 4px 18px;
}
.cb-stat .k {
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
}
.cb-stat .v {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--ink-0);
  line-height: 1.1;
}
.cb-stat .v .u {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-2);
  font-weight: 500;
  margin-left: 2px;
}
.cb-stat .sub {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.45;
  margin-top: 2px;
}

@media (max-width: 1100px) {
  .mix-key { grid-template-columns: repeat(2, 1fr); }
  .est-grid { grid-template-columns: 1fr; }
  .xlink, .cb-row { grid-template-columns: 1fr; }
}


/* ============================================================
   HUB HOME (page slug "payments", template-payments-hub-home.php)
   Body content uses these classes; scoped to data-page-type so they
   don't collide with article-page styles.
   ============================================================ */

/* Hide the auto-inserted citation-page-header on the hub home — the
   design provides its own hero. */
.be-citation-page[data-page-type="hub-home"] .be-citation-header { display: none; }

/* Wrap the hub-home article so its grid behaves like .wrap on article pages */
.be-citation-page[data-page-type="hub-home"] .be-citation-page__article {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 40px;
  font-family: var(--sans);
  color: var(--ink-1);
}
@media (min-width: 1500px) {
  .be-citation-page[data-page-type="hub-home"] .be-citation-page__article { padding: 0 56px; }
}
@media (max-width: 900px) {
  .be-citation-page[data-page-type="hub-home"] .be-citation-page__article { padding: 0 24px; }
}

/* Hero — lavender bleed background; mirrors v6 article hero shape.
   Padding matches .be-citation-page .hero (96/112) so the H1 lines up
   at the same Y position as the article pages. */
.be-citation-page[data-page-type="hub-home"] .hub-hero {
  position: relative;
  padding: 96px 0 112px;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero::before {
  content: '';
  position: absolute;
  inset: 0 calc(50% - 50vw);
  background: var(--lavender-2);
  z-index: -1;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero.grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 72px;
  row-gap: 32px;
  align-items: start;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-2);
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb a { text-decoration: none; color: var(--ink-2); }
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb a:hover { color: var(--purple); }
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb b { color: var(--ink-0); font-weight: 600; }
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb .audit {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ok); font-weight: 600;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .crumb .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(31,107,60,.18);
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .hero-main { grid-column: 1; min-width: 0; }
.be-citation-page[data-page-type="hub-home"] .hub-hero .hero-aside {
  grid-column: 2; grid-row: 2; align-self: start; margin-top: 84px;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(40px, 4.2vw, 64px);
  line-height: 1.04; letter-spacing: -.014em;
  margin: 24px 0 32px;
  color: var(--ink-0);
  max-width: 18ch; text-wrap: balance;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero h2 em {
  font-style: italic; font-weight: 600; color: var(--purple);
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .hero-body {
  font-size: 21px; line-height: 1.5; color: var(--ink-1);
  margin: 0 0 36px; max-width: 56ch; text-wrap: pretty;
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .hero-body b { font-weight: 700; color: var(--ink-0); }
.be-citation-page[data-page-type="hub-home"] .hub-hero .byline-line {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px;
  margin-top: 36px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: 15px; color: var(--ink-2);
}
.be-citation-page[data-page-type="hub-home"] .hub-hero .byline-line b { color: var(--ink-0); font-weight: 600; }
.be-citation-page[data-page-type="hub-home"] .hub-hero .byline-line a { color: var(--purple); text-decoration: none; font-weight: 600; }
.be-citation-page[data-page-type="hub-home"] .hub-hero .byline-line a:hover { text-decoration: underline; }
.be-citation-page[data-page-type="hub-home"] .hub-hero .byline-line .sep { color: var(--ink-3); }
@media (max-width: 1100px) {
  .be-citation-page[data-page-type="hub-home"] .hub-hero.grid { grid-template-columns: 1fr; }
  .be-citation-page[data-page-type="hub-home"] .hub-hero .hero-aside { grid-column: 1; grid-row: auto; margin-top: 0; max-width: 640px; }
}

/* Aside cite-panel ("What's in this hub" + hub counters) */
.be-citation-page[data-page-type="hub-home"] .cite-panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 24px 20px;
  box-shadow: 0 1px 2px rgba(20,15,30,.04);
}
.be-citation-page[data-page-type="hub-home"] .cite-panel .cite-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.be-citation-page[data-page-type="hub-home"] .cite-panel .cite-title { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.cite-tag {
  font-family: var(--mono); font-size: 12px;
  color: var(--purple); background: var(--lavender);
  border: 1px solid var(--purple-soft);
  padding: 2px 8px; border-radius: 4px; font-weight: 500;
}
.hub-counters { list-style: none; margin: 0; padding: 0; }
.hub-counters li {
  display: grid; grid-template-columns: 56px 1fr;
  align-items: baseline; gap: 14px;
  padding: 12px 0; border-bottom: 1px solid var(--line-soft);
}
.hub-counters li:last-child { border-bottom: 0; padding-bottom: 2px; }
.hub-counters .n {
  font-family: var(--serif); font-size: 30px; font-weight: 600;
  color: var(--ink-0); line-height: 1; letter-spacing: -.01em;
}
.hub-counters .l { font-size: 13px; color: var(--ink-2); line-height: 1.4; }

/* Contents strip */
.hub-strip {
  display: flex; align-items: baseline; gap: 24px;
  padding: 48px 0 24px;
}
.hub-strip .label {
  font-family: var(--mono); font-size: 12px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}
.hub-strip .sep { flex: 1; height: 1px; background: var(--line); transform: translateY(-4px); }
.hub-strip .meta { font-family: var(--sans); font-size: 13px; color: var(--ink-3); }

/* Tile grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding-bottom: 56px;
}
@media (max-width: 1000px) { .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .tile-grid { grid-template-columns: 1fr; } }
.tile {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 26px 28px 22px;
  text-decoration: none; color: inherit;
  overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 470px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px -22px rgba(15,17,21,.25);
  border-color: var(--ink-3);
}
.tile .t-kind {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: 14px;
  display: flex; align-items: center; justify-content: space-between;
}
.tile .t-kind .swatch { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.tile h2 {
  font-family: var(--serif); font-weight: 500;
  font-size: 32px; line-height: 1.05; letter-spacing: -.012em;
  color: var(--ink-0); margin: 0 0 6px; text-wrap: balance;
}
.tile .t-sub {
  font-size: 14px; color: var(--ink-2); line-height: 1.45;
  margin: 0 0 16px; max-width: 38ch;
}
.tile .t-stat { display: flex; align-items: baseline; gap: 12px; margin-top: auto; }
.tile .t-stat .num {
  font-family: var(--serif); font-size: 36px; line-height: 1;
  font-weight: 600; letter-spacing: -.01em; color: var(--ink-0);
}
.tile .t-stat .num .u { font-size: 18px; font-weight: 500; color: var(--ink-1); margin-left: 1px; }
.tile .t-stat .lab {
  font-family: var(--sans); font-size: 12px; color: var(--ink-3);
  line-height: 1.3; max-width: 18ch;
}
.tile .t-cta {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px; color: var(--ink-2);
}
.tile .t-cta .src {
  font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em;
}
.tile .t-cta .go {
  font-weight: 700; font-size: 13px; color: var(--ink-0);
  display: inline-flex; align-items: center; gap: 6px;
}
.tile .t-cta .go .arr { transition: transform .2s; }
.tile:hover .t-cta .go .arr { transform: translateX(4px); }
.tile .vis {
  margin: 0 -28px 20px;
  height: 180px; flex-shrink: 0; overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
}
.tile .vis svg { width: 100%; height: 100%; }

/* Topic colour identity */
.t-pay .t-kind { color: var(--pay); }
.t-pay:hover { border-color: var(--pay); }
.t-frd .t-kind { color: var(--frd); }
.t-frd:hover { border-color: var(--frd); }
.t-crd .t-kind { color: var(--crd); }
.t-crd:hover { border-color: var(--crd); }
.t-ecm .t-kind { color: var(--ecm); }
.t-ecm:hover { border-color: var(--ecm); }
.t-prc .t-kind { color: var(--prc); }
.t-prc:hover { border-color: var(--prc); }
.t-mth .t-kind { color: var(--ink-1); }
.t-mth:hover { border-color: var(--ink-1); }

@media (max-width: 680px) {
  .tile { min-height: 0; padding: 24px 22px 20px; }
  .tile .vis { margin: 0 -22px 16px; height: 160px; }
}

/* Hub-home page footer (different from .foot-site) */
.hub-foot {
  border-top: 1px solid var(--line);
  padding: 28px 0 64px;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap;
}
.hub-foot a { color: var(--purple); text-decoration: none; font-weight: 600; }
.hub-foot a:hover { text-decoration: underline; }

/* ─── FAQ section — injected at render time into all hub report pages ─── */
.section.faq {
  padding: 64px 0 72px;
  border-top: 1px solid var(--line);
}
.faq__head {
  margin-bottom: 36px;
}
.faq__title {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: var(--ink-0);
  margin: 6px 0 0;
  letter-spacing: -.01em;
}
.faq__list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq__item {
  border-bottom: 1px solid var(--line);
}
.faq__item[open] .faq__q {
  color: var(--purple);
}
.faq__q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 4px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-0);
  cursor: pointer;
  list-style: none;
  gap: 16px;
  line-height: 1.4;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: "+";
  font-size: 20px;
  font-weight: 400;
  color: var(--ink-3);
  flex-shrink: 0;
  transition: transform .15s;
}
.faq__item[open] .faq__q::after {
  content: "−";
}
.faq__a {
  padding: 0 4px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-1);
}
.faq__a a { color: var(--purple); text-decoration: none; }
.faq__a a:hover { text-decoration: underline; }
@media (max-width: 680px) {
  .section.faq { padding: 44px 0 52px; }
  .faq__q { font-size: 14px; padding: 16px 2px; }
}