/* ==========================================================================
   Greystone Digital — Design System
   Mobile-first. No Tailwind CDN, no build step. Native CSS3.
   Tokens are immutable — see docs/design-brief-stich.md §3-4.
   ========================================================================== */

/* ---- 1. Design tokens ---- */
:root {
  /* Color */
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --bg-tertiary: #f1f5f9;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  /* Darkened from #94a3b8: that value gave only 2.45:1 on --bg-secondary,
     well under the WCAG AA 4.5:1 minimum for small text. This value passes on
     white (5.45), --bg-secondary (5.21) and --bg-tertiary (4.97). */
  --text-muted: #5b6b7f;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-light: #eff6ff;
  --primary: #004ac6;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --success: #16a34a;
  --warning: #f59e0b;
  --error: #dc2626;
  --on-primary: #ffffff;

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Fluid type scale (mobile-first) */
  --fs-display: clamp(2.25rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.875rem, 4vw, 2.5rem);
  --fs-h2: clamp(1.5rem, 3vw, 1.875rem);
  --fs-h3: 1.25rem;
  --fs-body-large: 1.125rem;
  --fs-body: 1rem;
  --fs-body-small: 0.875rem;
  --fs-caption: 0.8rem;
  --fs-mono-badge: 0.75rem;

  /* Line heights */
  --lh-tight: 1.2;
  --lh-heading: 1.3;
  --lh-body: 1.7;

  /* Spacing scale */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-section: 7.5rem;

  /* Containers */
  --content-narrow: 720px;
  --content-standard: 1080px;
  --content-wide: 1280px;

  --radius-sm: 8px;
  --radius: 0.25rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-full: 9999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.12);

  --header-h: 64px; /* h-16 */

  --focus-ring: 2px solid var(--accent);
  --focus-ring-offset: 2px;
}

/* ---- 2. Base reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 0.75rem); }

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: 0;
  color: var(--text-primary);
  background: var(--bg-primary);
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img, svg { display: block; max-width: 100%; height: auto; }
/* `height: auto` discards the width/height attributes, and for an SVG the
   intrinsic ratio is unknown until the file loads, so the element collapses and
   then pushes the layout down (layout shift). Reserve the box up front for the
   logo images, whose ratio is fixed at 170x36. */
.site-header__logo img, .site-footer__brand img, .custom-logo { aspect-ratio: 170 / 36; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
code { font-family: var(--font-mono); font-size: 0.75rem; background: var(--bg-tertiary); padding: 0 0.25rem; border-radius: 4px; }

/* Accessibility: visible focus ring, keyboard-first */
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
  border-radius: 2px;
}

/* Skip-to-content link (first focusable element on every page) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
}
.skip-link:focus {
  left: 0.5rem;
  top: 0.5rem;
  width: auto;
  height: auto;
  padding: 0.6rem 1rem;
  background: var(--accent);
  color: var(--on-primary);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

/* ---- 3. Layout containers ---- */
.main { flex: 1; width: 100%; padding-top: var(--header-h); }

.section { width: 100%; padding: var(--space-2xl) 0; }
.section--secondary { background: var(--bg-secondary); }
.section--primary { background: var(--bg-primary); }
.section--lg { padding: var(--space-3xl) 0; }

.container {
  width: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ---- 3a. Overflow guards ----
   Keep the page inside the viewport at every width. Flex/grid children default
   to min-width:auto, which lets long content force an element wider than its
   parent; setting min-width:0 lets them shrink instead. */
html, body { max-width: 100%; }
/* Use overflow-x: clip, NOT hidden. `hidden` forces the computed overflow-y to
   `auto`, which turns html AND body into nested scroll containers and breaks
   touch scrolling on mobile. `clip` prevents horizontal overflow without
   creating a scroll container, so the document keeps scrolling normally. */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}
@supports not (overflow: clip) {
  html, body { overflow-x: hidden; }
}
.main, main { max-width: 100%; overflow-x: clip; }
.container, .article-body { min-width: 0; }
.container > *, .article-body > * { min-width: 0; }
img, svg, video, iframe, table { max-width: 100%; }
/* Grid/flex children may shrink below their content size. */
.grid-2 > *, .grid-3 > *, .grid-4 > *, .card, .feat-list, .feat-list li { min-width: 0; }
/* Long unbroken strings (URLs, code) must wrap rather than widen the page. */
.article-body, article, p, li, td, code { overflow-wrap: break-word; word-wrap: break-word; }
@media (max-width: 400px) {
  /* Very narrow devices: tighten the horizontal rhythm a touch. */
  .container { padding: 0 var(--space-sm); }
  .card { padding: var(--space-md); }
}
.container--narrow { max-width: var(--content-narrow); }

/* ---- 4. Typography ---- */
.type-display {
  font-size: var(--fs-display);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.type-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: 1.2; letter-spacing: -0.025em; }
.type-h2 { font-size: var(--fs-h2); font-weight: 600; line-height: 1.3; letter-spacing: -0.02em; }
.type-h3 { font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; }
.type-body-large { font-size: var(--fs-body-large); line-height: var(--lh-body); font-weight: 400; }
.type-body { font-size: var(--fs-body); line-height: var(--lh-body); }
.type-body-small { font-size: var(--fs-body-small); line-height: 1.6; }
.type-caption { font-size: var(--fs-caption); line-height: 1.5; font-weight: 500; }
.type-mono-badge {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-badge);
  line-height: 1.2;
  letter-spacing: 0.04em;
  font-weight: 600;
  text-transform: uppercase;
}

.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--text-muted); }
.text-primary-t { color: var(--primary); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-center { text-align: center; }

/* ---- 5. Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-body-small);
  font-weight: 600;
  line-height: 1.4;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
  text-decoration: none;
}
.btn:active { transform: scale(0.98); }
.btn .material-symbols-outlined { font-size: 18px; }

.btn-primary {
  background: var(--accent);
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--accent-hover); }

.btn-secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
}
.btn-secondary:hover { background: var(--bg-tertiary); }

.btn-outline-accent {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--border-strong);
}
.btn-outline-accent:hover { background: var(--accent-light); }

.btn-white {
  background: #ffffff;
  color: var(--primary);
  box-shadow: var(--shadow-md);
}
.btn-white:hover { background: #f1f5f9; }

.btn-white-ghost {
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.btn-white-ghost:hover { background: rgba(255, 255, 255, 0.2); }

.btn-block { width: 100%; }

/* ---- 6. Badges / pills ---- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-badge);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pill--accent { background: var(--accent-light); color: var(--primary); }
.pill--accent-dot::before {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
}
.pill--neutral { background: var(--bg-tertiary); color: var(--text-secondary); }
.pill--success { background: var(--bg-secondary); color: var(--success); }

/* ---- 7. Cards ---- */
.card {
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.card--secondary { background: var(--bg-secondary); }
.card--surface { background: var(--bg-tertiary); }

/* ---- 8. Material Symbols (must have BOTH font link + this class) ---- */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  /* NOTE: deliberately no fixed width/height here. Some glyphs (e.g. "hub")
     paint slightly outside the 1em box, so an overflow:hidden 1em box clips
     them. The residual pre-font-load reflow is small and CLS stays in the
     "good" range; correctness of the glyph wins. */
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.ms-14 { font-size: 14px; }
.ms-16 { font-size: 16px; }
.ms-18 { font-size: 18px; }
.ms-20 { font-size: 20px; }
.ms-26 { font-size: 26px; }
.ms-success { color: var(--success); }
.ms-primary { color: var(--primary); }
.ms-muted { color: var(--text-muted); }
.ms-warning { color: var(--warning); }
.ms-error { color: var(--error); }
.ms-text { color: var(--text-primary); }
.ms-text-secondary { color: var(--text-secondary); }

/* ---- 9. Header ---- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
  height: var(--header-h);
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.02);
}
.site-header__inner {
  height: 100%;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: 0 var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.site-header__left { display: flex; align-items: center; gap: var(--space-lg); min-width: 0; }
.site-header__logo { display: flex; align-items: center; gap: var(--space-xs); min-width: 0; }
.site-header__logo img { height: 36px; width: auto; max-width: 100%; }

/* Header CTA: never wrap, never crowd the logo. Hidden on the smallest screens
   (the mobile menu already carries the same link). */
.site-header__inner > .btn {
  white-space: nowrap;
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .site-header__inner > .btn { display: none; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  /* Tablet: keep a compact CTA so it fits beside the hamburger. */
  .site-header__inner > .btn {
    font-size: var(--fs-caption);
    padding: 0.5rem 0.75rem;
  }
}

.site-nav { display: none; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-xs); }
.site-nav__link {
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-small);
  color: var(--text-secondary);
}
.site-nav__link:hover { color: var(--text-primary); background: var(--bg-secondary); }

/* Mobile nav toggle (hidden on desktop) */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle[aria-expanded="true"] .ms-menu { display: none; }
.nav-toggle[aria-expanded="false"] .ms-close { display: none; }

/* Mobile nav (hidden panel) */
.mobile-nav {
  display: none;
  position: fixed;
  top: var(--header-h);
  left: 0;
  width: 100%;
  z-index: 49;
  background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
  padding: var(--space-md);
}
.mobile-nav.is-open { display: block; }
.mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.mobile-nav__link {
  padding: 0.75rem var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-small);
  color: var(--text-primary);
}
.mobile-nav__link:hover { background: var(--bg-secondary); }

@media (min-width: 1024px) {
  .site-nav { display: block; }
  .nav-toggle { display: none; }
  .mobile-nav { display: none; }
}

/* ---- 10. Footer ---- */
.site-footer {
  width: 100%;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  margin-top: var(--space-3xl);
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  padding: var(--space-xl) 0;
}
@media (min-width: 768px) { .site-footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .site-footer__grid { grid-template-columns: repeat(12, 1fr); } }

.site-footer__brand { grid-column: 1; }
@media (min-width: 1024px) { .site-footer__brand { grid-column: span 4; } }

.site-footer__col { grid-column: 1; }
@media (min-width: 1024px) { .site-footer__col { grid-column: span 2; } }

.site-footer__heading {
  font-size: var(--fs-caption);
  text-transform: uppercase;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: var(--space-xs);
}
.site-footer__list { display: grid; gap: var(--space-xs); font-size: var(--fs-body-small); }
.site-footer__list a { color: var(--text-secondary); }
.site-footer__list a:hover { color: var(--text-primary); }

.site-footer__bottom {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .site-footer__bottom { flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---- 11. Breadcrumbs ---- */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-badge);
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.breadcrumbs a { color: var(--text-secondary); }
.breadcrumbs a:hover { color: var(--primary); }
.breadcrumbs__sep { color: var(--text-muted); }
.breadcrumbs__current { color: var(--text-primary); font-weight: 600; }

/* ---- 12. Hero ---- */
.hero {
  padding: var(--space-2xl) 0 var(--space-3xl);
  position: relative;
  overflow: hidden; /* contain the decorative blob; prevents horizontal scroll */
}
.hero::after {
  content: '';
  position: absolute;
  top: -4rem;
  right: -6rem;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.10), transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.hero > .container { position: relative; z-index: 1; }
.hero__eyebrow { margin-bottom: var(--space-sm); }
.hero__title { max-width: 48rem; }
.hero__lede { margin-top: var(--space-md); color: var(--text-secondary); font-size: var(--fs-body-large); max-width: 40rem; }
.hero .container--narrow .hero__title { max-width: 100%; }

/* ---- 13. Metric bars (benchmark visualizations) ---- */
.metrics { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .metrics { grid-template-columns: repeat(3, 1fr); } }

.metric {
  background: var(--bg-primary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
}
.metric__label {
  display: block;
  font-size: var(--fs-caption);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.metric__value { display: flex; align-items: baseline; gap: var(--space-xs); margin: var(--space-xs) 0 var(--space-sm); }
.metric__fig { font-size: var(--fs-h2); font-weight: 600; color: var(--primary); }
.metric__vs { font-size: var(--fs-caption); color: var(--text-muted); }

.metric__bar-wrap { space: 0; display: grid; gap: var(--space-xs); }
.metric__bar { width: 100%; background: var(--bg-tertiary); height: 0.5rem; border-radius: var(--radius-full); overflow: hidden; }
.metric__bar-fill--blue { background: var(--primary); height: 100%; border-radius: var(--radius-full); }
.metric__bar-fill--grey { background: #94a3b8; height: 100%; border-radius: var(--radius-full); }
.metric__note { margin-top: var(--space-sm); color: var(--text-secondary); font-size: var(--fs-body-small); }

/* ---- 14. Comparison table ---- */
.matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  background: var(--bg-primary);
}
/* On narrow screens, signal that the table scrolls sideways. */
@media (max-width: 767px) {
  .matrix-wrap {
    position: relative;
    border-left: 3px solid var(--accent);
  }
  .matrix-wrap::after {
    content: 'Swipe to see more →';
    position: sticky;
    left: 0;
    display: block;
    padding: var(--space-xs) var(--space-sm);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
  }
}
.matrix { width: 100%; border-collapse: collapse; font-size: var(--fs-body-small); }
.matrix thead th {
  position: sticky;
  top: var(--header-h);
  z-index: 20;
  background: rgba(248, 250, 252, 0.95);
  backdrop-filter: blur(8px);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  text-align: left;
  min-width: 200px;
}
.matrix thead th:first-child { width: 40%; min-width: 260px; }
.matrix thead th.matrix__winner-col { background: rgba(226, 239, 254, 0.6); }
.matrix tbody tr.group-row { background: rgba(241, 245, 249, 0.6); }
.matrix tbody tr.group-row td {
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--fs-mono-badge);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  font-weight: 600;
}
.matrix tbody tr.data-row:hover { background: var(--bg-secondary); }
.matrix tbody tr.data-row td { padding: var(--space-md) var(--space-lg); vertical-align: top; }
.matrix tbody tr.data-row td.winner-cell { background: rgba(226, 239, 254, 0.3); }
.matrix__criterion strong { display: block; font-weight: 600; color: var(--text-primary); }
.matrix__criterion span { display: block; font-size: var(--fs-caption); color: var(--text-muted); }

.mat-cell { display: flex; align-items: flex-start; gap: var(--space-2xs); }
.mat-cell--win { color: var(--success); font-weight: 500; }
.mat-cell--loss { color: var(--text-muted); }
.mat-cell--neutral { color: var(--text-secondary); }
.mat-cell--warn { color: var(--text-secondary); }
.mat-cell .material-symbols-outlined { font-size: 18px; }
.mat-cell--warn .material-symbols-outlined { color: var(--warning); }

/* ---- 15. Verdict / callout ---- */
.verdict-callout {
  background: var(--accent-light);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 768px) { .verdict-callout { flex-direction: row; align-items: center; justify-content: space-between; } }

.scorecard { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 1024px) { .scorecard { grid-template-columns: 1fr 1fr; } }

.scorecard__card {
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}
.scorecard__card--winner { background: var(--bg-tertiary); }
.scorecard__card--runner { background: var(--bg-secondary); }

.icon-chip {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--on-primary);
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}
.icon-chip--blue { background: var(--primary); }
.icon-chip--neutral { background: var(--text-secondary); }

/* ---- 16. Grid + hub cards ----
   Mobile-first: every grid starts as 1 column; scales up at breakpoint.
   Each size MUST declare display:grid at base or it never becomes a grid. */
.grid-1, .grid-2, .grid-3, .grid-4 { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.hub-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background: var(--bg-secondary);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  color: var(--text-primary);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}
.hub-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}
.hub-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.hub-card:hover::before { transform: scaleX(1); }
.hub-card__eyebrow { font-family: var(--font-mono); font-size: var(--fs-mono-badge); color: var(--primary); letter-spacing: 0.04em; text-transform: uppercase; }
.hub-card__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.hub-card__desc { color: var(--text-secondary); font-size: var(--fs-body-small); line-height: 1.6; }
.hub-card__meta { margin-top: auto; display: flex; align-items: center; gap: var(--space-xs); color: var(--text-muted); font-size: var(--fs-caption); }
.hub-card__meta .material-symbols-outlined { transition: transform 0.2s ease; }
.hub-card:hover .hub-card__meta .material-symbols-outlined { transform: translateX(3px); }

/* ---- 17. Feature/eligibility lists (pros-cons, scenario matcher) ---- */
.feat-list { display: flex; flex-direction: column; gap: var(--space-md); font-size: var(--fs-body-small); }
.feat-list li { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--text-secondary); }
.feat-list li strong, .feat-list > div > strong { color: var(--text-primary); font-weight: 600; }
.feat-list .material-symbols-outlined { font-size: 20px; flex-shrink: 0; margin-top: 1px; }

/* Not every .feat-list is a <ul> of <li> rows. Some hold a single icon beside
   a heading (a card header), and some wrap each row in a <div>. In those the
   icon span is a DIRECT child, so as a flex/grid child it stretched to the
   full column width and pushed the text onto its own line. Keep the icon at
   its natural size and let the wrapped forms sit side by side. */
.feat-list > .material-symbols-outlined { align-self: flex-start; }
.feat-list:has(> .material-symbols-outlined) { flex-direction: row; align-items: center; gap: var(--space-sm); }
.feat-list:has(> .material-symbols-outlined) > .material-symbols-outlined { margin-top: 0; }
.feat-list > div:has(> .material-symbols-outlined) { display: flex; gap: var(--space-sm); align-items: flex-start; color: var(--text-secondary); min-width: 0; }

/* ---- 18. Article body (review / long-form) ----
   Readability scaffolding. These apply to every article via the shared
   .article-body wrapper, so content files stay untouched.
   Shell spans the full design width (1280) like every other page; prose keeps
   a comfortable reading measure inside it; wide blocks (tables, cards, CTA
   bands) use the full width. */
.article-body { max-width: var(--content-wide); margin: 0 auto; color: var(--text-secondary); }
/* The page wrapper also carries .container--narrow; make the wide shell win. */
.article-body.container--narrow { max-width: var(--content-wide); }
.article-body > * { line-height: var(--lh-body); }

/* Readable measure for prose, LEFT-ALIGNED to the shell's left edge so the
   text column lines up with the full-width cards/tables below it (no ragged
   centred edge). Headlines get a wider measure than body copy. */
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote { max-width: 78ch; }
.article-body > h2,
.article-body > h3,
.article-body > .type-h1,
.article-body > .type-h2,
.article-body > .type-display { max-width: 62ch; }
@media (min-width: 1024px) {
  .article-body > p,
  .article-body > ul,
  .article-body > ol,
  .article-body > blockquote { max-width: 820px; }
  .article-body > h2,
  .article-body > h3,
  .article-body > .type-h1,
  .article-body > .type-h2,
  .article-body > .type-display { max-width: 880px; }
}

/* Paragraphs: a touch larger line-height, tighter colour for warmth */
.article-body p { margin-bottom: var(--space-md); font-size: 1.0625rem; }
.article-body p strong { color: var(--text-primary); font-weight: 600; }

/* Section headings: more air + a hairline to anchor the eye.
   The large top margin applies ONLY to top-level section headings, so it does
   not leak into headings inside components (cards, callouts). */
.article-body h2 {
  color: var(--text-primary);
  font-size: var(--fs-h2);
  line-height: 1.25;
}
.article-body > h2 {
  margin: calc(var(--space-4xl) * 0.9) 0 var(--space-sm);
  position: relative;
  padding-top: var(--space-sm);
}
/* Accent bar only on top-level section headings (not inside cards/callouts). */
.article-body > h2::before {
  content: '';
  display: block;
  width: 2.5rem;
  height: 3px;
  border-radius: 2px;
  background: var(--accent);
  margin-bottom: var(--space-sm);
}
.article-body h3 {
  margin: var(--space-xl) 0 var(--space-xs);
  color: var(--text-primary);
  font-size: var(--fs-h3);
}
.article-body h3, .article-body h2 { scroll-margin-top: calc(var(--header-h) + 1rem); }

/* Lists: clean, compact, readable */
.article-body ul, .article-body ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: var(--space-lg);
  display: grid;
  gap: var(--space-xs);
}
.article-body ul li, .article-body ol li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.0625rem;
}
.article-body ul li::before {
  content: '';
  position: absolute;
  left: 0.25rem;
  top: 0.55rem;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--accent);
}
.article-body ol { counter-reset: item; }
.article-body ol li { counter-increment: item; }
.article-body ol li::before {
  content: counter(item);
  position: absolute;
  left: 0.1rem;
  top: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  line-height: 1.6;
}

/* Cards inside article: softer surface, clear separation */
.article-body .card { margin: var(--space-xl) 0; border: 1px solid var(--border); }

/* Pull quote: breaks the wall of text */
.article-body blockquote {
  border: none;
  border-left: 3px solid var(--accent);
  margin: var(--space-2xl) 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--bg-secondary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-style: italic;
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--text-primary);
}
.article-body blockquote p { margin: 0; font-size: 1.125rem; }

/* Inline code: consistent */
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--bg-tertiary);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  color: var(--text-primary);
}

/* Keypoint / callout boxes authors may reference */
.article-body .callout {
  background: var(--accent-light);
  border: 1px solid transparent;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
}
.article-body .callout p { margin: 0; color: var(--text-primary); }

/* Tables: tidy and readable */
.article-body .matrix-wrap { margin: var(--space-xl) 0; }


/* ---- 19. Forms (contact) ---- */
.form { display: grid; gap: var(--space-md); max-width: 640px; }
.form label { display: grid; gap: 0.35rem; font-size: var(--fs-body-small); font-weight: 500; }
.form input, .form textarea, .form select {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  color: var(--text-primary);
  background: var(--bg-primary);
}
.form input:focus, .form textarea:focus, .form select:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-light);
}
.form input[aria-invalid="true"], .form textarea[aria-invalid="true"] { border-color: var(--error); }

/* ---- 20. Meta / transparency row ---- */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  color: var(--text-muted);
  font-size: var(--fs-body-small);
}
.meta-row .meta-item { display: flex; align-items: center; gap: var(--space-2xs); }
.meta-row .material-symbols-outlined { font-size: 16px; color: var(--primary); }

/* ---- 21. Section header ---- */
.section-head { max-width: 42rem; margin-bottom: var(--space-2xl); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-top: var(--space-xs); }
.section-head .pill { margin-bottom: var(--space-sm); }

/* ---- 22. Utility spacing ---- */
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.pt-sm { padding-top: var(--space-sm); }

/* ---- 23. CTA band (high-converting gradient box) ---- */
.cta-band {
  background: linear-gradient(135deg, var(--primary), var(--accent-hover));
  color: var(--on-primary);
  border-radius: 1rem;
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.cta-band__inner { max-width: 48rem; position: relative; z-index: 10; }
.cta-band h2 { color: #ffffff; }
.cta-band p { color: rgba(255, 255, 255, 0.85); max-width: 42rem; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-md); }
.cta-band__assurance {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.85);
}
.cta-band__assurance .meta-item { display: flex; align-items: center; gap: var(--space-2xs); }

/* ---- 24. Eyes-only responsive fine-tune ---- */
@media (max-width: 767px) {
  :root { --space-section: 5rem; }
  .cta-band { padding: var(--space-lg); }

  /* Migrated article bodies carry hardcoded inline grids from the static build
     (2-column and auto-fit/minmax variants). Inline styles win over normal CSS,
     so these need !important to collapse to a single column on small screens
     (otherwise they force horizontal overflow).
     Scope is deliberately broad: migrated prose can sit under .article-body OR
     directly under the singular <article>, depending on the template. */
  .article-body [style*="grid-template-columns"],
  .entry-content [style*="grid-template-columns"],
  article [style*="grid-template-columns"],
  main [style*="grid-template-columns"],
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
  /* Prevent any content block from exceeding the viewport. */
  .article-body .card,
  .article-body .matrix-wrap,
  .article-body table,
  article .card,
  article table {
    max-width: 100%;
  }
}
/* Between 768px and 1023px, allow at most two columns so hardcoded grids cannot
   overflow the narrower tablet viewport. */
@media (min-width: 768px) and (max-width: 1023px) {
  [style*="grid-template-columns:repeat"],
  [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ---- 25. Cookie consent banner (Consent Mode v2) ----
   Fixed to the bottom, reserves no layout height as a wall; dismissible and
   re-openable from the footer. */
.cookie-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: var(--bg-primary);
  border-top: 1px solid var(--border);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08);
  padding: var(--space-md);
}
.cookie-banner[hidden] { display: none; }
.cookie-banner__inner {
  max-width: var(--content-wide);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .cookie-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.cookie-banner__text { font-size: var(--fs-body-small); color: var(--text-secondary); margin: 0; max-width: 46rem; }
.cookie-banner__text a { color: var(--accent); }
.cookie-banner__actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }

/* Footer "Cookie settings" control: reads as a link, is a button. */
.footer-cookie-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--text-secondary);
  cursor: pointer;
  text-align: left;
}
.footer-cookie-btn:hover { color: var(--text-primary); }

/* ---- 22. Blog listing (home.php) ---- */
.blog-list-item {
  max-width: var(--content-standard);
  padding: var(--space-xl) 0;
  border-bottom: 1px solid var(--border);
}
.blog-list-item:first-child { padding-top: 0; }
.blog-list-item:last-child { border-bottom: 0; }
.blog-list-item__title {
  font-size: var(--fs-h2);
  font-weight: 600;
  line-height: var(--lh-heading);
  margin: 0 0 var(--space-xs);
}
.blog-list-item__title a { color: var(--text-primary); text-decoration: none; }
.blog-list-item__title a:hover { color: var(--accent); }
.blog-list-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md);
  color: var(--text-muted);
  font-size: var(--fs-body-small);
  margin-bottom: var(--space-sm);
}
.blog-list-item__meta .material-symbols-outlined { font-size: 16px; color: var(--primary); }
.blog-list-item__excerpt {
  color: var(--text-secondary);
  font-size: var(--fs-body-large);
  line-height: var(--lh-body);
  margin: 0 0 var(--space-sm);
  max-width: 62ch;
}
.blog-list-item__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--accent);
  font-weight: 600;
  font-size: var(--fs-body-small);
  text-decoration: none;
}
.blog-list-item__link:hover { color: var(--accent-hover); }
.blog-list-item__link .material-symbols-outlined { font-size: 16px; }

/* Blog pagination (WordPress core .next/.prev + numeric) */
.posts-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin-top: var(--space-xl);
}
.posts-pagination a,
.posts-pagination span,
.posts-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 var(--space-sm);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-primary);
  color: var(--text-secondary);
  font-size: var(--fs-body-small);
  font-weight: 600;
  text-decoration: none;
}
.posts-pagination a:hover,
.posts-pagination .page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.posts-pagination .current,
.posts-pagination span.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-primary);
}

/* ---- 14. Cover imagery (2026-10-18) ---- */
.hero__media { margin: var(--space-xl) 0 0; }
.hero__media img { display: block; width: 100%; height: auto; border-radius: var(--radius-xl); border: 1px solid var(--border); }
.hub-card__thumb { display: block; margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0; }
.hub-card__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.blog-list-item__thumb { margin-bottom: var(--space-md); }
.blog-list-item__thumb img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-xl); border: 1px solid var(--border); }
@media (max-width: 767px) {
  .hero__media { margin-top: var(--space-lg); }
  .hero__media img { border-radius: var(--radius-lg); }
}

/* ---- 15. Category explorer (2026-10-18) ---- */
.page-hero--textured { position: relative; }
.page-hero--textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--border) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  opacity: 0.9;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 96%);
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.95), transparent 96%);
  pointer-events: none;
  z-index: 0;
}
.page-hero--textured > .container { position: relative; z-index: 1; }
.cat-hero__copy { max-width: 44rem; }
.cat-hero__intro { margin-top: var(--space-md); }
.cat-hero__intro p { margin: 0; }
.cat-hero__deco {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: min(420px, 36vw); opacity: 0.55; pointer-events: none;
}
@media (max-width: 1100px) { .cat-hero__deco { display: none; } }

.cat-stats {
  display: inline-flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-md) var(--space-lg);
  padding: 12px 20px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  font-family: var(--font-mono); font-size: var(--fs-caption);
  color: var(--text-secondary); letter-spacing: 0.02em; text-transform: uppercase;
}
.cat-stats__item { display: inline-flex; align-items: center; gap: 6px; }
.cat-stats__item strong { color: var(--primary); font-weight: 700; }
.cat-stats__item .material-symbols-outlined { font-size: 18px; }

.cat-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 768px) { .cat-grid { grid-template-columns: repeat(2, 1fr); } }

.cat-tile {
  display: flex; flex-direction: column;
  background: var(--bg-primary); border: 1px solid var(--border);
  border-radius: var(--radius-xl); overflow: hidden; position: relative;
  color: var(--text-primary); box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
.cat-tile::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s ease; z-index: 2;
}
.cat-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.cat-tile:hover::before { transform: scaleX(1); }
.cat-tile__media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--accent-light), var(--bg-secondary)); }
.cat-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.cat-tile:hover .cat-tile__media img { transform: scale(1.03); }
.cat-tile__media--plain::after {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(var(--border) 1.2px, transparent 1.2px);
  background-size: 26px 26px; opacity: 0.6;
}
.cat-tile__count {
  position: absolute; top: var(--space-sm); left: var(--space-sm);
  background: rgba(15, 23, 42, 0.78); color: #fff;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.cat-tile__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-lg); }
.cat-tile__title { font-size: var(--fs-h3); font-weight: 600; line-height: 1.3; }
.cat-tile__desc { color: var(--text-secondary); font-size: var(--fs-body-small); line-height: 1.6; }
.cat-tile__latest { display: flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-caption); line-height: 1.5; }
.cat-tile__latest .material-symbols-outlined { font-size: 16px; }
.cat-tile__cta {
  margin-top: var(--space-xs); display: inline-flex; align-items: center; gap: var(--space-xs);
  color: var(--primary); font-weight: 600; font-size: 1rem;
}
.cat-tile__cta .material-symbols-outlined { transition: transform 0.2s ease; }
.cat-tile:hover .cat-tile__cta .material-symbols-outlined { transform: translateX(3px); }
.cat-cta-wrap { margin-top: var(--space-2xl); }
@media (max-width: 767px) {
  .cat-tile__body { padding: var(--space-md); }
  .cat-stats { gap: var(--space-xs) var(--space-md); padding: 10px 14px; }
}

/* ---- 16. Site polish (2026-10-18) ---- */
.site-footer { padding-bottom: 88px; } /* clears the fixed cookie banner */
.current-menu-item .site-nav__link,
.site-nav__link[aria-current="page"] { color: var(--primary); font-weight: 600; }