/* Design system tokens. Every other stylesheet references these variables,
   never a hardcoded hex value or arbitrary pixel spacing. Mobile-first:
   base rules target the smallest viewport, breakpoints add complexity. */

:root {
  /* Color palette, "policy document" (2026-09-30): deep navy primary, white
     sheets on a white page with cool-grey bands, and one protective
     teal-green accent for primary actions and "your result". Replaces the
     navy + seal-gold set, whose yellow read as a worksheet, not a firm.
     --color-ink is the text color; --color-neutral-400 is the muted-text
     tone and passes WCAG AA (4.5:1) on white and on --color-bg-page-alt.
     The -rgb triplets let shadows/tints track the token. */
  --color-primary: #0b2545;
  --color-primary-dark: #071a33;
  --color-primary-light: #1f4e8c;
  --color-primary-rgb: 11, 37, 69;
  --color-accent: #0e7c66;
  --color-accent-dark: #0a5e4d;
  --color-accent-light: #e2f1ec;
  --color-accent-rgb: 14, 124, 102;
  --color-ink: #0f1f33;
  --color-ink-rgb: 15, 31, 51;
  --color-neutral-100: #f5f7fa;
  --color-neutral-200: #e4e9ef;
  --color-neutral-400: #52606f;
  --color-neutral-900: #0f1f33;
  --color-success: #1f7a4d;
  --color-success-bg: #e5f3ec;
  --color-warning: #b3400f;
  --color-warning-bg: #fcefe7;

  /* Category colors: each calculator category gets its own muted accent,
     used only for that category's icons and chart series, per the site's
     per-category wayfinding pattern (see includes/tool-header.php,
     [data-category] below). Never body text or a second primary color. */
  --color-cat-auto: #2f6fc0;
  --color-cat-auto-tint: #eaf1f9;
  --color-cat-health: #1c8577;
  --color-cat-health-tint: #e8f5f2;
  --color-cat-home: #b5602f;
  --color-cat-home-tint: #faf0e8;
  --color-cat-general: #6a5b8f;
  --color-cat-general-tint: #f0edf6;
  --color-cat-life: #a34574;
  --color-cat-life-tint: #f8ecf2;
  --color-cat-business: #4a5a6a;
  --color-cat-business-tint: #eef1f3;

  /* White page; alternating sections use the cool-grey alt band. Sheets
     (calculator, result, cards) are white and separated by a hairline. */
  --color-bg-page: #ffffff;
  --color-bg-page-alt: #f3f6f9;
  --color-bg-card: #ffffff;
  --color-bg: var(--color-bg-page);
  --color-text: var(--color-ink);
  --color-border: #dde3ea;
  --color-rule: #c9d2dc;

  /* Spacing scale, 8px base unit */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-6: 48px;
  --space-8: 64px;

  /* Geometry: radii step up with importance (controls 8, cards 10, the
     result panel 14) instead of one radius everywhere. Ordinary cards are
     flat with a hairline border; the only real elevation on a page is
     --shadow-panel, reserved for the result panel and the homepage
     example card. */
  --radius-sm: 8px;
  --radius-card: 10px;
  --radius-panel: 14px;
  --shadow-card: 0 1px 2px rgba(var(--color-ink-rgb), 0.04);
  --shadow-card-hover: 0 10px 24px -14px rgba(var(--color-ink-rgb), 0.28);
  --shadow-panel: 0 1px 2px rgba(var(--color-ink-rgb), 0.06), 0 24px 48px -24px rgba(var(--color-primary-rgb), 0.45);
  --shadow-glow-accent: 0 8px 20px -10px rgba(var(--color-accent-rgb), 0.7);

  /* Type scale: 12 / 14 / 16 / 20 / 28 / 40 / 56, used instead of
     one-off font-sizes. */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.5rem;
  --text-3xl: 3.5rem;

  /* Typography: Source Serif 4 (--font-display) for h1 to h3, the wordmark
     and headline figures; Public Sans for everything else. --font-heading
     is the UI face (nav, buttons, labels, card titles) and is Public Sans;
     --font-mono no longer means a monospace face, it maps to Public Sans so
     every older "figure" rule gets aligned tabular numbers instead of a
     typewriter look. Both fonts are self-hosted (assets/css/fonts.css,
     preloaded in header.php) and fall back to system stacks. */
  --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-heading: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: var(--font-display);
  --font-mono: var(--font-heading);
  --font-body: var(--font-heading);

  /* Motion */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-number: 400ms ease;
}

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

/* Category color wiring: set once per category, either on a tool page's
   <main data-category="auto"> (see includes/header.php) or directly on a
   homepage/directory card (see .category-card, .tool-preview-card).
   Everything downstream (icon chips, card accent borders, the result
   panel's top edge, FAQ chevrons, next-steps numbers) reads
   var(--category-color)/var(--category-tint) with a neutral fallback, so
   a component never needs to know which of the 4 categories it's in. */
[data-category="auto"] {
  --category-color: var(--color-cat-auto);
  --category-tint: var(--color-cat-auto-tint);
}

[data-category="health"] {
  --category-color: var(--color-cat-health);
  --category-tint: var(--color-cat-health-tint);
}

[data-category="home"] {
  --category-color: var(--color-cat-home);
  --category-tint: var(--color-cat-home-tint);
}

[data-category="general"] {
  --category-color: var(--color-cat-general);
  --category-tint: var(--color-cat-general-tint);
}

[data-category="life"] {
  --category-color: var(--color-cat-life);
  --category-tint: var(--color-cat-life-tint);
}

[data-category="business"] {
  --category-color: var(--color-cat-business);
  --category-tint: var(--color-cat-business-tint);
}

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

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-page);
  line-height: 1.5;
}

/* Tabular figures anywhere numbers need to line up or feel "computed":
   result values, legend amounts, sliders. Small detail, outsized trust
   effect per the numbers-align-cleanly guidance. */
.tabular-nums,
.result-panel__value,
.result-panel__range,
.breakdown-legend__value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* Every figure the visitor reads as "the answer" is set in the mono face,
   like a typed entry on a printed form. */
.tabular-nums,
.result-panel__value,
.breakdown-legend__value,
.stat-strip__value {
  font-family: var(--font-mono);
}

/* Brief highlight pulse on any element whose value just changed. Toggled
   by calc-engine.js's pulseElement() helper, never left permanently on. */
@keyframes pulse-update {
  0% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0.18); }
  100% { box-shadow: 0 0 0 10px rgba(var(--color-primary-rgb), 0); }
}

.is-updating {
  animation: pulse-update 600ms ease-out;
}

/* h1 to h3 are the serif display face (the "policy document" voice); h4
   and smaller labels stay in the sans UI face. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
  margin: 0 0 var(--space-2);
  /* Balanced wrapping avoids a one-word last line on wrapped headings. */
  text-wrap: balance;
}

h4 {
  font-family: var(--font-heading);
}

h1 {
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, var(--text-2xl));
  letter-spacing: -0.015em;
  line-height: 1.1;
  /* Defends against a long unbreakable string (currently the
     PLACEHOLDER_SITE_NAME placeholder itself, an underscore-joined run
     with no spaces to wrap on) forcing horizontal overflow at narrow
     widths, found via a mobile-viewport audit on /pages/about.php. Real
     copy always has spaces to wrap on, so this is a no-op once a real
     site name replaces the placeholder, kept as a defensive floor. */
  overflow-wrap: break-word;
}

h2 {
  font-size: var(--text-xl);
  letter-spacing: -0.01em;
}

h3 {
  font-size: 1.3125rem;
}

/* Kept for any page that still uses the class; renders as plain
   emphasis in the primary color rather than a second accent hue. */
.text-accent {
  color: var(--color-primary);
}

p {
  margin: 0 0 var(--space-2);
  line-height: 1.65;
  /* Same defensive reasoning as the h1 rule above: PLACEHOLDER_SITE_NAME
     appears as literal unbreakable body prose on pages like about.php,
     not just in headings, so the same narrow-viewport overflow risk
     applies here too until a real site name replaces the placeholder. */
  overflow-wrap: break-word;
}

a {
  color: var(--color-primary-light);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--color-primary);
  text-decoration-thickness: 2px;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 var(--space-2);
}

/* Flash/alert message after a form POST (saved, sent, validation errors).
   Used by both the admin panel and the public contact form, so it lives
   here rather than in admin.css. A list of multiple errors uses the
   built-in <ul>/<li>; a single-line success message just needs a <p>. */
.form-alert {
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-weight: 600;
  margin-bottom: var(--space-3);
}

.form-alert p,
.form-alert ul {
  margin: 0;
}

.form-alert ul {
  padding-left: var(--space-3);
  font-weight: 500;
}

.form-alert--success {
  background: var(--color-success-bg);
  color: var(--color-success);
}

.form-alert--error {
  background: var(--color-warning-bg);
  color: var(--color-warning);
}

/* Small muted note under a form, e.g. contact.php's "prefer email?" line.
   Plain block text (not flex, unlike .tool-sidebar__trust which this used
   to borrow), specifically so a long unbreakable string like an email
   address can wrap/break normally instead of forcing a flex item past its
   default min-width:auto floor (found via a mobile-viewport audit:
   contact.php was overflowing 17px at 375px because of exactly this). */
.form-note {
  font-size: 0.8125rem;
  color: var(--color-neutral-400);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  overflow-wrap: break-word;
}

.form-note a {
  color: var(--color-primary);
  font-weight: 600;
}

/* Honeypot field for a public form (currently the contact page): visually
   and functionally present in the DOM so a bot's form-filler still finds
   it, but placed off-canvas rather than display:none, since some bots
   skip display:none fields but still miss ones parked off-screen. Real
   visitors never see or reach it (also tabindex="-1"). */
.form-honeypot {
  position: absolute;
  left: -9999px;
}

/* Narrower variant of .tool-card (tools.css) for a single-column form
   page like contact.php, where the full split calculator layout doesn't
   apply. */
.tool-card--narrow {
  max-width: 640px;
}

/* Ad slot wrapper (includes/ad-slot.php). Only ever present when the
   admin panel has actually enabled + populated that position, so this
   rule only needs to add breathing room, never reserve space for an
   empty/disabled slot. */
.ad-slot {
  margin: var(--space-3) 0;
  text-align: center;
  overflow: hidden;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-1) var(--space-2);
  z-index: 100;
}

.skip-link:focus {
  left: var(--space-1);
  top: var(--space-1);
}

/* Focus ring: the lighter primary blue on white; dark surfaces (hero,
   footer, the result summary band) switch it to white. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
}

.hero a:focus-visible,
.site-footer a:focus-visible,
.result-panel__summary a:focus-visible {
  outline-color: #fff;
}

/* Site header / nav: white, slightly translucent over scrolled content,
   one hairline under it. Sticky, so the calculator's result panel sits
   below it. */
.site-header {
  background: rgba(255, 255, 255, 0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: var(--space-1);
  padding-top: 14px;
  padding-bottom: 14px;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--color-primary);
}

/* Shield mark: navy tile, white glyph. Not a designed brand asset, just
   enough of a mark that the wordmark does not read as bare text. */
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
}

.logo-mark .icon {
  width: 16px;
  height: 16px;
}

.site-nav__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin: 0;
  padding: 0;
}

/* Small screens: the nav is one row that scrolls sideways instead of
   wrapping onto a second line, and the header stops being sticky, so it
   never takes a quarter of a phone screen on every page. */
@media (max-width: 640px) {
  .site-header {
    position: static;
  }

  .site-header__inner {
    padding-bottom: 0;
  }

  .site-nav {
    width: calc(100% + 2 * var(--space-2));
    margin: 0 calc(-1 * var(--space-2));
    overflow-x: auto;
    scrollbar-width: none;
  }

  .site-nav::-webkit-scrollbar {
    display: none;
  }

  .site-nav__list {
    flex-wrap: nowrap;
    gap: 18px;
    padding: 6px var(--space-2) 12px;
    white-space: nowrap;
  }

  .site-nav__list a {
    font-size: 0.875rem;
  }
}

.site-nav__list a {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--color-ink);
  padding-bottom: 2px;
}

.site-nav__list a:hover {
  color: var(--color-primary);
}

.site-nav__list a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -4px;
  height: 2px;
  background: var(--color-accent);
  transition: right var(--transition-fast);
}

.site-nav__list a:hover::after,
.site-nav__list a:focus-visible::after {
  right: 0;
}

/* Site footer: flat deep navy, 3 columns then a trust line. */
.site-footer {
  background: var(--color-primary-dark);
  margin-top: var(--space-8);
  padding: var(--space-8) 0 var(--space-4);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  margin: 0 0 var(--space-6);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
}

@media (min-width: 600px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
}

.site-footer__col-title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  color: #fff;
  margin: 0 0 var(--space-2);
}

.site-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.site-footer__col a {
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
}

.site-footer__col a:hover {
  color: #fff;
  text-decoration: underline;
}

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: var(--space-4);
}

.site-footer__reviewer {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.9);
}

.site-footer__reviewer .byline-block__avatar {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.site-footer__reviewer a {
  color: #fff;
  font-weight: 600;
}

.site-footer__disclaimer,
.site-footer__copyright {
  margin: var(--space-1) 0 0;
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
}

/* ==========================================================================
   Marketing / homepage components: hero, buttons, stat row, category
   grid, tool preview cards, how-it-works steps. Reused by tools/index.php
   for the category-grouped listing, not homepage-only. All colors and
   spacing pull from the tokens above.
   ========================================================================== */

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

/* Buttons: solid, calm, 8px corners. Primary is the teal accent (the one
   "act here" color); hover deepens it rather than moving it. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast);
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background: var(--color-accent-dark);
  color: #fff;
  box-shadow: var(--shadow-glow-accent);
}

.btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.45);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: #fff;
  color: #fff;
}

.btn-outline {
  background: var(--color-bg-card);
  color: var(--color-primary);
  border-color: var(--color-rule);
}

.btn-outline:hover,
.btn-outline:focus-visible {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--sm {
  padding: 8px 16px;
  font-size: 0.8125rem;
}

.btn--block {
  width: 100%;
  justify-content: center;
}

/* Hero: flat policy navy with one soft lighter pool of blue at the top
   right, so the block has depth without a busy pattern. Homepage and
   index pages only, never on a calculator. */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--color-primary);
  color: #fff;
  padding: var(--space-8) 0;
}

/* Depth without a pattern: one soft pool of lighter blue behind the
   example card, and a faint guilloche-style ring pair (the fine-line
   engraving on policy certificates and banknotes), drawn in CSS. */
.hero__decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 82% 38%, transparent 0 229px, rgba(255, 255, 255, 0.07) 230px 231px, transparent 232px 259px, rgba(255, 255, 255, 0.05) 260px 261px, transparent 262px),
    radial-gradient(ellipse 55% 75% at 82% 30%, rgba(31, 78, 140, 0.55) 0%, rgba(31, 78, 140, 0) 70%);
}

/* Two columns on desktop: copy left, a static worksheet fragment right
   that shows what the product is. Single column, visual hidden, below
   900px. minmax(0, 1fr) so long unbreakable content can never force the
   grid wider than the viewport. */
.hero__row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: center;
}

@media (min-width: 900px) {
  .hero__row {
    grid-template-columns: minmax(0, 1fr) 380px;
  }
}

.hero__inner {
  position: relative;
  max-width: 760px;
  animation: fade-up 600ms ease both;
}

.hero__eyebrow {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0 0 var(--space-2);
}

.hero h1 {
  color: #fff;
  font-size: clamp(2.375rem, 5.2vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.06;
  max-width: 17ch;
  margin: 0 0 var(--space-3);
}

.hero__subtitle {
  color: rgba(255, 255, 255, 0.84);
  font-size: 1.125rem;
  max-width: 52ch;
  margin: 0 0 var(--space-4);
}

/* On navy the primary action is a white button: the highest-contrast
   object in the hero, and it keeps teal from sitting on navy. */
.hero .btn-primary {
  background: #fff;
  color: var(--color-primary);
}

.hero .btn-primary:hover,
.hero .btn-primary:focus-visible {
  background: var(--color-accent-light);
  color: var(--color-primary);
  box-shadow: none;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hero__trust {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.875rem;
  margin: 0;
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Static "example worksheet" fragment, homepage hero only, hidden below
   900px. Pure markup (no screenshot, no chart library), aria-hidden since
   it is decoration. Its figures are the umbrella calculator's own default
   inputs and resulting recommendation, labeled "Example" in the markup so
   it is never mistaken for a quote. */
.hero__visual-wrap {
  position: relative;
}

.hero__visual {
  display: none;
}

@media (min-width: 900px) {
  .hero__visual {
    display: block;
    animation: fade-up 700ms ease 150ms both;
  }
}

/* Same anatomy as a calculator's result panel: inputs as hairline rows,
   then the answer on a full-bleed navy band in the serif face. */
.hero__visual-card {
  background: var(--color-bg-card);
  color: var(--color-ink);
  border-radius: var(--radius-panel);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.08);
  padding: var(--space-3) var(--space-3) 0;
  overflow: hidden;
}

.hero__visual-card__label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: 0 0 var(--space-1);
}

.hero__visual-card__rows {
  margin: 0;
}

.hero__visual-card__rows > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9375rem;
}

.hero__visual-card__rows > div:last-child {
  border-bottom: 0;
}

.hero__visual-card__rows dt {
  color: var(--color-neutral-400);
}

.hero__visual-card__rows dd {
  margin: 0;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.hero__visual-card__total {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--space-2) calc(-1 * var(--space-3)) 0;
  padding: 18px var(--space-3) 20px;
  background: var(--color-primary);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.875rem;
}

.hero__visual-card__total strong {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.5rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.hero__visual-card__note {
  margin: 0 calc(-1 * var(--space-3));
  padding: 10px var(--space-3) 14px;
  background: var(--color-primary);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.66);
}

/* Sources line directly under the hero: plain names separated by rules,
   no pill badges. This is the site's real social proof (citations, not
   testimonials or star ratings). */
.trust-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
}

.trust-bar__label {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-neutral-400);
  white-space: nowrap;
}

.trust-bar__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) 0;
  margin: 0;
  padding: 0;
}

.trust-bar__list li {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--color-primary);
  padding: 0 var(--space-2);
  border-left: 1px solid var(--color-rule);
}

.trust-bar__list li:first-child {
  padding-left: 0;
  border-left: none;
}

/* On a phone the names wrap, and a divider at the start of a wrapped line
   reads as a stray mark, so narrow screens drop the dividers for spacing. */
@media (max-width: 640px) {
  .trust-bar__list {
    gap: 6px var(--space-3);
  }

  .trust-bar__list li {
    padding: 0;
    border-left: none;
  }
}

/* Stat row: four figures separated by ink rules, left-aligned, no boxes. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  margin: 0;
}

.stat-strip__item {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.stat-strip__value {
  font-family: var(--font-display);
  font-size: 2.5rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--color-primary);
  margin: 0;
}

.stat-strip__label {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: 4px 0 0;
}

@media (min-width: 768px) {
  .stat-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.section {
  margin: var(--space-8) 0;
}

/* Full-bleed alternating band: gives the homepage and /tools/ hub visible
   rhythm when scrolled. Applied to every other top-level section, never
   stacked two of the same tone in a row. */
.band {
  padding: var(--space-6) 0;
  margin: 0;
}

.band--tint {
  background: var(--color-bg-page-alt);
}

.band--primary {
  background: var(--color-primary);
}

.band .section {
  margin: 0;
}

.section__header {
  max-width: 70ch;
  margin: 0 0 var(--space-4);
}

.section__title {
  margin: 0;
}

/* Category grid: four sheets, each with a 3px top rule in its category
   color (that color is real wayfinding, it recurs on the calculator
   pages). No hover lift; hover darkens the border and underlines the
   title. */
.category-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .category-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Three across on desktop: the site has 6 categories, so 3 fills two
   rows exactly (4 across left two empty slots). */
@media (min-width: 1024px) {
  .category-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.category-card {
  display: block;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.category-card:hover {
  color: var(--color-ink);
  border-color: var(--color-rule);
  box-shadow: var(--shadow-card-hover);
}

.category-card:hover .category-card__title {
  color: var(--color-primary);
}

/* Icon sits on a soft tile of its category tint, the only place the
   category colors appear as fills. */
.category-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: var(--radius-sm);
  background: var(--category-tint, var(--color-neutral-100));
  color: var(--category-color, var(--color-primary));
  margin-bottom: var(--space-2);
}

.category-card__icon svg {
  width: 100%;
  height: 100%;
}

.category-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3125rem;
  transition: color var(--transition-fast);
  margin: 0 0 6px;
}

.category-card__desc {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: 0 0 var(--space-1);
}

.category-card__count {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--category-color, var(--color-primary));
  margin: 0;
}

/* Tool preview cards: shared by the homepage "popular" grid and every
   category section on /tools/. */
.tool-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

@media (min-width: 600px) {
  .tool-card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .tool-card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tool-preview-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 20px var(--space-3);
  text-decoration: none;
  color: var(--color-ink);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.tool-preview-card:hover {
  color: var(--color-ink);
  border-color: var(--color-rule);
  box-shadow: var(--shadow-card-hover);
}

.tool-preview-card:hover .tool-preview-card__title {
  color: var(--color-primary);
}

/* Plain colored icon: this component repeats dozens of times per page, so
   the category color rides on the icon alone. */
.tool-preview-card__icon {
  display: flex;
  align-items: center;
  width: 24px;
  height: 24px;
  color: var(--category-color, var(--color-primary));
  margin-bottom: 4px;
}

.tool-preview-card__icon svg {
  width: 100%;
  height: 100%;
}

.tool-preview-card[hidden] {
  display: none;
}

.tool-preview-card__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
  transition: color var(--transition-fast);
  margin: 0;
}

.tool-preview-card__blurb {
  font-size: 0.875rem;
  color: var(--color-neutral-400);
  margin: 0;
}

/* How it works: a real 3-step sequence, so numbering is meaningful here.
   Each step is a ruled column headed by its number in the mono face. */
.how-it-works {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .how-it-works {
    grid-template-columns: repeat(3, 1fr);
  }
}

.how-it-works__step {
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-rule);
}

.how-it-works__step h3 {
  margin: 0 0 4px;
}

.how-it-works__step p {
  color: var(--color-neutral-400);
  margin: 0;
}

.how-it-works__number {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2rem;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--color-accent);
  margin-bottom: var(--space-2);
}

.author-strip {
  border-top: 1px solid var(--color-rule);
  padding-top: var(--space-4);
}

.author-strip__note {
  color: var(--color-neutral-400);
  font-size: 0.9375rem;
  max-width: 70ch;
  margin: 0;
}

/* Tools index page: category section headers */
.tools-index-intro {
  max-width: 70ch;
}

.tools-index-section {
  margin: var(--space-6) 0;
  scroll-margin-top: 88px;
}

.tools-index-section__header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-rule);
}

.tools-index-section__header h2 {
  margin: 0;
}

.tools-index-section__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--category-tint, var(--color-neutral-100));
  color: var(--category-color, var(--color-primary));
  flex-shrink: 0;
}

.tools-index-section__desc {
  color: var(--color-neutral-400);
  font-size: 0.9375rem;
  margin: 4px 0 0;
}

/* Index-page hero: a compact variant of .hero reused by /tools/ and
   /blog/ (see includes/index-hero.php). */
.index-hero {
  padding: var(--space-6) 0;
}

/* The container keeps its full width so the hero copy shares the left
   edge of the category sections below; only the text is held to a
   readable measure. */
.index-hero__inner {
  position: relative;
}

.index-hero__inner > * {
  max-width: 640px;
}

.index-hero h1 {
  color: #fff;
  margin: 0 0 var(--space-2);
}

.index-hero p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.0625rem;
  margin: 0 0 var(--space-3);
}

.index-hero a {
  color: #fff;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}

/* Client-side search box, filters the .tool-preview-card grid below it by
   title/blurb text (see assets/js/index-filter.js). */
.index-search {
  position: relative;
  max-width: 420px;
  margin-top: var(--space-3);
}

.index-search input {
  width: 100%;
  padding: 13px var(--space-2) 13px 42px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  box-shadow: 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  font-size: 0.9375rem;
  font-family: var(--font-body);
  background: var(--color-bg-card);
  color: var(--color-ink);
}

.index-search input::placeholder {
  color: var(--color-neutral-400);
}

.index-search .icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-neutral-400);
  pointer-events: none;
}

/* Set by index-filter.js on a .tools-index-section whose every card is
   hidden by the current search term, so an empty category collapses
   instead of leaving a heading over a blank grid. */
.tools-index-section[hidden] {
  display: none;
}

.index-search__empty {
  display: none;
  color: var(--color-neutral-400);
  padding: var(--space-4) 0;
}

.index-search__empty.is-visible {
  display: block;
}

/* Respect the visitor's reduced-motion setting: the hero entrance, button
   hover shifts and nav underline all switch off. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}