/* ==========================================================================
   Typography and text-spacing layer
   Loaded last on: home (coming-soon), cards (portfolio), bank support,
   reviews index, disclaimer and 404. Not used by the HSBC Live+ review,
   which has its own type system in review-page.css.

   Rules of the scale
   - Nothing below 12px. Labels and pills 12px, secondary UI 13px,
     UI and body 14–16px, long-form reading 16px.
   - Unitless line-height: 1.5–1.6 for reading, 1.3–1.45 for wrapping UI
     text, 1.1–1.25 for headings.
   - Uppercase labels at 12px or smaller get 0.06–0.08em tracking.
   - Reading text is capped at roughly 65–72 characters per line.
   - Counts, prices and phone numbers use tabular figures.

   Many older rules on these pages use !important, so selectors here are
   prefixed with `html body` and keep !important to win deterministically.
   ========================================================================== */

/* ---------- Shared: reading rhythm ---------- */
html body :where(h1, h2, h3) { text-wrap: balance; }
html body :where(p, li, dd, figcaption) { text-wrap: pretty; }
html body :where(a) { text-underline-offset: 0.18em; }

/* ---------- Shared: footer ---------- */
html body .global-footer__column h2 {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
}
html body .global-footer__column a { font-size: 14px !important; line-height: 1.45 !important; }
html body .global-footer__identity p {
  max-width: 32ch;
  font-size: 14px !important;
  line-height: 1.55 !important;
}
html body .global-footer__bottom {
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   Home (coming soon)
   ========================================================================== */
html body .home-eyebrow {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
  line-height: 1.4 !important;
}
html body .home-marquee-set {
  font-size: 12px !important;
  letter-spacing: 0.12em !important;
}
html body .home-intro {
  max-width: 34em !important;
  line-height: 1.6 !important;
  letter-spacing: 0 !important;
}
html body .primary-pill small {
  font-size: 12px !important;
  letter-spacing: 0.01em !important;
  line-height: 1.35 !important;
}
html body .small-pill {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}
html body .home-footer {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  line-height: 1.4 !important;
}
html body .crafted-badge {
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
}
html body .crafted-badge strong { font-size: 13px !important; letter-spacing: -0.01em !important; }

@media (max-width: 720px) {
  html body .home-eyebrow { font-size: 11px !important; letter-spacing: 0.1em !important; }
  html body .home-marquee-set { font-size: 11px !important; letter-spacing: 0.1em !important; }
  html body .home-intro { max-width: 30em !important; font-size: 15px !important; line-height: 1.55 !important; }
  html body .small-pill { font-size: 12px !important; }
  html body .home-footer { font-size: 11px !important; }
  html body .crafted-badge { font-size: 11px !important; }
  html body .crafted-badge strong { font-size: 12px !important; }
}

/* ==========================================================================
   Cards (portfolio)
   ========================================================================== */
html body .hero-copy > p {
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
html body .hero-meta span { font-size: 12px !important; line-height: 1.35 !important; }
html body .stat-meta strong { font-variant-numeric: tabular-nums; }
html body .stat-meta span {
  font-size: 13px !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
}

html body .collection-head p {
  max-width: 60ch;
  font-size: 14px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}
html body .collection-count {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-variant-numeric: tabular-nums;
}

/* Filters */
html body .quick,
html body .reset-button {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}
html body .legend-title {
  font-size: 12px !important;
  letter-spacing: 0.06em !important;
}
html body .legend-items > span { font-size: 13px !important; line-height: 1.4 !important; }

/* Bank group header */
html body .bank-heading-copy strong {
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
html body .bank-heading-copy span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
  font-variant-numeric: tabular-nums;
}
html body .bank-short {
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

/* Card rows: name, network, reward type, tags and fee pill */
html body .card-name {
  font-size: 15px !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}
html body .network {
  font-family: var(--site-font) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
}
html body .card-meta-line {
  font-family: var(--site-font) !important;
  font-size: 13px !important;
  line-height: 1.4 !important;
  letter-spacing: 0 !important;
}
html body .mini-tag {
  font-family: var(--site-font) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.3 !important;
}
html body .fee-pill {
  font-family: var(--site-font) !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  letter-spacing: 0.01em !important;
}

@media (max-width: 720px) {
  html body .hero-copy > p { font-size: 15px !important; }
  html body .hero-meta span { font-size: 12px !important; }
  html body .stat-meta span { font-size: 12px !important; line-height: 1.25 !important; }
  html body .collection-head p { max-width: 36ch; font-size: 14px !important; }
  html body .collection-count { font-size: 12px !important; }
  html body .quick, html body .reset-button { font-size: 13px !important; }
  html body .bank-heading-copy strong { font-size: 15px !important; }
  html body .bank-heading-copy span { font-size: 12px !important; }
  html body .bank-short { font-size: 11px !important; }
  html body .card-name { font-size: 15px !important; }
  html body .network { font-size: 12px !important; }
  html body .card-meta-line { font-size: 13px !important; }
  html body .mini-tag { font-size: 12px !important; }
  html body .fee-pill { font-size: 12px !important; }
}

/* ==========================================================================
   Bank support
   ========================================================================== */
html body .support-intro-desc {
  max-width: 62ch !important;
  letter-spacing: 0 !important;
}
html body .support-intro-badge span {
  font-size: 13px !important;
  letter-spacing: 0 !important;
}
html body .feature-meta strong { font-size: 14px !important; line-height: 1.3 !important; }
html body .feature-meta span {
  font-size: 12px !important;
  line-height: 1.35 !important;
  letter-spacing: 0 !important;
}
html body .support-verified-date {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}
html body .support-count-badge {
  font-size: 12px !important;
  font-variant-numeric: tabular-nums;
}
html body .support-escalation-guide {
  font-size: 14px !important;
  line-height: 1.55 !important;
  max-width: 70ch;
}
html body .support-group-label {
  font-size: 12px !important;
  letter-spacing: 0 !important;
}
html body .support-bank-copy span {
  font-size: 13px !important;
  font-variant-numeric: tabular-nums;
}
html body .support-contact-chip a { font-variant-numeric: tabular-nums; }
html body .support-contact-section h3 {
  font-size: 14px !important;
  line-height: 1.35 !important;
}
html body .support-no-results,
html body .support-empty-placeholder,
html body .support-unlisted { font-size: 14px !important; line-height: 1.5 !important; }

@media (max-width: 720px) {
  html body .support-intro-desc { font-size: 15px !important; line-height: 1.55 !important; }
  html body .support-verified-date { font-size: 12px !important; }
  html body .support-escalation-guide { font-size: 13px !important; }
}

/* ==========================================================================
   Reviews index
   ========================================================================== */
html body #card-reviews-root h1 + p,
html body .reviews-static > p {
  max-width: 58ch !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  letter-spacing: 0 !important;
}

/* ==========================================================================
   Disclaimer
   ========================================================================== */
html body .legal-page { max-width: 760px !important; }
html body .legal-card h1 {
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}
html body .legal-card h2 {
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  margin-block: 36px 12px !important;
}
html body .legal-card p,
html body .legal-card li {
  max-width: 68ch;
  font-size: 16px !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}
html body .legal-card p + p { margin-block-start: 14px; }
html body .legal-badge,
html body .legal-badge * {
  font-family: var(--site-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

@media (max-width: 640px) {
  html body .legal-card h1 { font-size: 26px !important; }
  html body .legal-card h2 { font-size: 18px !important; margin-block: 30px 10px !important; }
  html body .legal-card p,
  html body .legal-card li { font-size: 15px !important; line-height: 1.6 !important; }
}