/* THE TYPE SYSTEM, on its own, so it can be applied one family of pages at a time.
 *
 * WHY IT IS A SEPARATE FILE rather than an edit to shared.css. The design rollout covers /learn/,
 * /insights/ and the offers page, and /compare/ is waiting on a decision about whether the board
 * replaces it. Editing shared.css would apply the change to all 400-odd pages at once, including
 * the ones nobody has looked at yet and the two hubs that are explicitly NOT being redesigned.
 * A separate sheet is added to one template at a time and each stage can be seen before the next
 * one starts.
 *
 * WHAT IT DOES AND DOES NOT DO. It sets typeface, weight and the heading scale. It does not touch
 * layout, spacing, components or colour. A page that loads it should be recognisably the same
 * page set in a different face, and if anything moves, this file is wrong.
 *
 * WHY INTER AND INTER TIGHT. design-7-agreed.html specifies them and Martin approved them on
 * 19 Sep as a site-wide typography change. Both are SIL Open Font License, the same licence as
 * the DM Sans, DM Mono and Syne already self-hosted here; see OFL.txt. They are served from our
 * own origin for the reason fonts.css gives at length: a third-party font host discloses the
 * reader's IP and the page they are on before they have agreed to anything.
 *
 * LOAD ORDER MATTERS. This must come after shared.css and after the family sheet (learn.css,
 * insights.css), because those set "Syne" and "DM Sans" on the same selectors. It carries no
 * !important: if a rule here loses, the fix is the order, not more weight.
 */

:where(body) { font-family: 'Inter', system-ui, sans-serif; }
body,
p, li, dd, dt, blockquote, figcaption, label, input, select, textarea, button, table {
  font-family: 'Inter', system-ui, sans-serif;
}

/* Inter Tight for headings, which is the pairing the design uses: the tighter face holds a large
   size without the loose tracking Inter gets above about 24px. */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-weight: 650;
  letter-spacing: -0.018em;
  line-height: 1.18;
}
h1 { font-weight: 700; letter-spacing: -0.024em; }

/* Numerals line up in a column. On a site whose subject is prices this is not a refinement:
   proportional figures make two prices of the same length look like different lengths. */
.num, .price, .figure, td, th, time, data { font-variant-numeric: tabular-nums; }

/* The faces the old stack set explicitly, brought across. These selectors are named in shared.css
   and learn.css with "Syne", so they need naming again rather than inheriting. */
.btn, .button, .cta, .pill, .badge, .tag, .eyebrow, .section-label, .kicker {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.005em;
}

/* ── PER FAMILY, BECAUSE SPECIFICITY BEATS ORDER ──────────────────────────────────────────────
 *
 * The bare `h1, h2, h3` rules above are specificity 0,0,1. shared.css sets Syne at the same
 * weight, so load order decides and this file wins. learn.css and insights.css do NOT: they set
 * Syne on `.article-header h1` and `.article-body h2`, specificity 0,1,1, which beats a bare
 * element selector however late it loads. The first deploy of this file left every learn heading
 * in Syne while the body text changed to Inter, and the page looked deliberate.
 *
 * So each family's selectors are named here, at MATCHING specificity, and order does the rest.
 * Still no !important. A block is added when that family's stage runs, and
 * check-type-rollout.mjs refuses a family that is wired up but has selectors left behind.
 */

/* /learn/ — stage one, 20 Sep 2026 */
.article-header h1,
.article-body h2,
.article-body h3,
.cta-block h3,
.cta-button,
.learn-landing h1,
.article-card h2,
.learn-listing-empty h2 {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.018em;
}
/* Two more the check found and my own grep had not: I searched for Syne and these set DM Sans
   and DM Mono. Body face rather than heading face, so they take Inter, not Inter Tight. */
.share-btn,
.learn-filter {
  font-family: 'Inter', system-ui, sans-serif;
}

/* /insights/ — stage two, 20 Sep 2026.
 *
 * Checked BEFORE the template was linked rather than after, because stage one shipped with every
 * heading still in Syne and the page looked deliberate. The method: list every rule setting a
 * legacy face in all three sheets an insights page loads, compute its specificity, and keep only
 * the ones whose classes actually appear on a real insights page. That last step matters.
 * shared.css has 46 uncovered legacy-face selectors and most are scoped to .connect,
 * .guides-index or .live-board, which cannot match here; covering them by name would have been
 * 46 rules of which 44 did nothing.
 *
 * Insights pages load learn.css too, so the /learn/ block above is already doing work here. */
.insights-article .related-articles h2,
.insights-article .related-card h3,
.insights-article .cta-affiliate-block h3,
.insights-article .cta-affiliate-block-button,
.insights-article .cta-affiliate-inline a,
.insights-article .article-body thead th,
.insights-article .article-body .table-stack td::before,
.insights-article .category-pill,
.insights-article .breadcrumb-chain,
.insights-landing h1,
.insights-landing .section-label,
.insights-card h3,
.insights-listing-empty h2,
.insights-pagination a,
.insights-pagination span,
.insights-filter {
  font-family: 'Inter Tight', 'Inter', system-ui, sans-serif;
  letter-spacing: -0.018em;
}

/* ── THE CHROME STAGE RAN, 20 Sep 2026 ───────────────────────────────────────────────────────
 *
 * The note this replaces said chrome was deferred, and it was, for one working day. Stage two had
 * been verified in a browser and found 140 elements on a converted insights page still on DM Sans
 * or Syne: the nav, the search box, the chat widget, the ticker, the market tables and the offer
 * band. None was a missed selector. They render from shared.css on all 432 pages, and shared.css
 * does not know which family it is on, so they could not be converted family by family.
 *
 * They are converted now, in shared.css itself, where 42 font-family declarations moved from
 * "Syne" and "DM Sans" to 'Inter Tight' and 'Inter'. DM Mono was left: it is a monospace doing a
 * different job. The faces moved into fonts.css, which every page already loads, so one edit
 * reached all 432 rather than two link tags reaching 111 pages and six generators; fonts-inter.css
 * is gone and each face is now declared once.
 *
 * WHAT THIS FILE IS STILL FOR. learn.css and insights.css set legacy faces on COMPOUND selectors
 * that beat a bare element selector however late a sheet loads, so the per-family blocks below
 * are still doing the work they were written for. shared.css no longer needs overriding at all.
 */