/* StackCredits — design system
   Light-first, dark via prefers-color-scheme. System fonts only: no external requests. */

:root {
  --ink: #0a0c11;
  --ink-2: #26303f;
  --muted: #5b6579;
  /* Both muted tones clear 4.5:1 on --surface and --surface-2 at small sizes. */
  --muted-2: #697285;
  --line: rgba(20, 22, 27, .13);
  --line-strong: rgba(20, 22, 27, .22);
  --canvas: #f7f1e6;
  --surface: #ffffff;
  --surface-2: #efe6d3;
  --surface-3: #e9dfc9;
  --primary: #14161b;
  --primary-ink: #000000;
  --primary-soft: rgba(20, 22, 27, .07);
  /* Deep enough to clear 4.5:1 both on white and on --accent-soft, since the
     accent carries credit amounts and chip text, not just decoration. */
  --accent: #07784f;
  --accent-soft: #e6f7f0;
  --warn: #b4690e;
  --warn-soft: #fdf3e3;
  /* Foreground on a primary fill, and the error colour: tokens rather than
     media-query overrides, so an explicit theme choice cannot miss them. */
  --on-primary: #ffffff;
  --danger: #c0392b;
  /* Restrained: hairline borders carry structure, shadows only lift what floats. */
  --shadow-sm: 0 1px 2px rgba(10, 12, 17, .05);
  --shadow-md: 0 2px 4px rgba(10, 12, 17, .04), 0 8px 20px rgba(10, 12, 17, .05);
  --radius: 7px;
  --radius-lg: 22px;
  --maxw: 1160px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  /* Serif for prose headings, grotesque for figures: an editorial pairing that
     signals "reference desk" rather than product landing page. */
  --display: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Dark palette, declared twice on purpose: once for people who never touched
   the toggle and whose OS asks for dark, once for an explicit choice. CSS has
   no way to share one block between the two selectors. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f5fa;
    --ink-2: #c9d2e0;
    --muted: #97a1b3;
    --muted-2: #7d8798;
    --line: #232a36;
    --line-strong: #333c4c;
    --canvas: #0c0f15;
    --surface: #0c0f15;
    --surface-2: #12161f;
    --surface-3: #182031;
    --primary: #f2f5fa;
    --primary-ink: #ffffff;
    --primary-soft: rgba(242, 245, 250, .1);
    --accent: #37c78f;
    --accent-soft: #10251d;
    --warn: #e0a44c;
    --warn-soft: #2a2015;
    --on-primary: #0a0c11;
    --danger: #ff8a7a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
  }
}

:root[data-theme="dark"] {
  --ink: #f2f5fa;
  --ink-2: #c9d2e0;
  --muted: #97a1b3;
  --muted-2: #7d8798;
  --line: #232a36;
  --line-strong: #333c4c;
  --canvas: #0c0f15;
  --surface: #0c0f15;
  --surface-2: #12161f;
  --surface-3: #182031;
  --primary: #f2f5fa;
  --primary-ink: #ffffff;
  --primary-soft: rgba(242, 245, 250, .1);
  --accent: #37c78f;
  --accent-soft: #10251d;
  --warn: #e0a44c;
  --warn-soft: #2a2015;
  --on-primary: #0a0c11;
  --danger: #ff8a7a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-md: 0 2px 4px rgba(0, 0, 0, .4), 0 8px 20px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  /* German compound words and long URLs must break rather than push the layout
     sideways; hyphens: auto uses the lang attribute, which every page sets. */
  overflow-wrap: break-word;
  hyphens: auto;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  margin: 0; line-height: 1.18; font-weight: 600;
  font-family: var(--display); letter-spacing: -.01em;
  text-wrap: balance;
  /* Headlines never split a word mid-way — body's hyphens: auto is for prose. */
  hyphens: none;
}
h1 { font-size: clamp(2.05rem, 4.6vw, 3.05rem); line-height: 1.09; }
h2 { font-size: clamp(1.5rem, 3vw, 2.05rem); }
h3 { font-size: 1.12rem; }

/* Figures stay on the grotesque, lined up in columns. Old-style serif numerals
   would wobble against each other in a table of amounts. */
.stat-value, .perk-value, .detail-value, .cat-ceiling, .stage-value,
.results-count, .fact-value, .stage-count, .post-kicker {
  font-family: var(--sans);
  hyphens: none;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}
p { margin: 0; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; }
ul, ol { margin: 0; padding-left: 1.15em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 760px; }
.skip {
  position: absolute; left: -9999px; top: 0; background: var(--primary); color: var(--on-primary);
  padding: 10px 16px; z-index: 100; border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

/* ---------- header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--canvas) 55%, transparent);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner { display: flex; align-items: center; gap: 28px; height: 66px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--ink); font-weight: 660; font-size: 1.06rem; letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 28px; height: 28px; flex: none; overflow: visible; }
.header-right { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav { display: flex; align-items: center; gap: 4px; }
/* :not(.btn) so these never override the CTA button's own colours — a plain
   `.nav a` rule wins on specificity and leaves dark text on the blue button. */
.nav a:not(.btn) {
  color: var(--ink-2); font-size: .945rem; font-weight: 500;
  padding: 8px 11px; border-radius: 8px;
}
.nav a:not(.btn):hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.nav a:not(.btn)[aria-current="page"] { color: var(--ink); background: var(--surface-2); }
.nav-cta { margin-left: 8px; }

/* ---------- theme toggle ---------- */

.theme-toggle {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; margin-left: 6px; padding: 0;
  background: none; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); cursor: pointer;
}
.theme-toggle:hover { background: var(--surface-2); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; display: block; }

/* Icon shown mirrors the token blocks above: moon while light, sun while dark,
   including the untouched-toggle case where only the OS preference is known. */
.theme-toggle .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: block; }
/* ---------- language suggestion strip ---------- */

.lang-hint { background: var(--primary-soft); border-bottom: 1px solid var(--line); }
.lang-hint-inner {
  display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap;
  padding: 11px 22px; font-size: .93rem;
}
.lang-hint-inner p { margin: 0; color: var(--ink-2); }
.lang-hint-link { font-weight: 560; color: var(--primary-ink); }
.lang-hint-dismiss {
  margin-left: auto; background: none; border: 0; padding: 4px 2px;
  color: var(--muted); font: inherit; font-size: .9rem; cursor: pointer;
  text-decoration: underline;
}
.lang-hint-dismiss:hover { color: var(--ink); }
@media (max-width: 520px) {
  .lang-hint-dismiss { margin-left: 0; }
}

/* ---------- language picker ---------- */

.lang-picker { position: relative; flex: none; margin-left: 6px; }
.lang-picker > summary {
  display: flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink-2); cursor: pointer; list-style: none;
  font-size: .85rem; font-weight: 560; font-family: var(--sans);
}
.lang-picker > summary::-webkit-details-marker { display: none; }
.lang-picker > summary:hover { background: var(--surface-2); color: var(--ink); }
.lang-picker > summary svg { width: 16px; height: 16px; flex: none; }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 176px; display: grid; gap: 1px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 5px; box-shadow: var(--shadow-md);
}
.lang-menu a {
  padding: 8px 10px; border-radius: 5px; color: var(--ink-2);
  font-size: .92rem; white-space: nowrap;
}
.lang-menu a:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }
.lang-menu a[aria-current="true"] { color: var(--ink); font-weight: 580; background: var(--surface-3); }

/* A note when an article is still only available in the default language. */
.translation-note {
  margin: 24px 0 0; padding: 12px 14px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  color: var(--ink-2); font-size: .9rem;
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  color: var(--ink); border-radius: 8px; padding: 8px 11px; cursor: pointer;
  font: inherit; font-size: .9rem; margin-left: 6px;
}

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute; top: 66px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 12px 22px 18px; margin: 0; display: none;
    box-shadow: var(--shadow-md);
  }
  .nav.open { display: flex; }
  .nav a:not(.btn) { padding: 11px 12px; font-size: 1rem; }
  .nav-cta { margin: 8px 0 0; text-align: center; }
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .965rem; font-weight: 560; line-height: 1;
  padding: 13px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .06s ease, background .15s ease, border-color .15s ease;
  /* Buttons must wrap: a translated label can be half again as long as the
     English one, and nowrap makes it push the whole column sideways. */
  white-space: normal;
  text-align: center;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary); color: var(--on-primary); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--primary-ink); }
.btn-ghost { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-sm { padding: 9px 14px; font-size: .9rem; }
.btn-lg { padding: 17px 30px; font-size: 1.05rem; }
.btn-block { width: 100%; }

/* ---------- generic sections ---------- */

.section { padding: 84px 0; }
.section-tight { padding: 56px 0; }
.section-alt { background: var(--surface-2); border-block: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 + p { margin-top: 14px; color: var(--muted); font-size: 1.075rem; }
/* A dated standfirst rather than an uppercase letterspaced tagline. */
.eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-size: .87rem; font-weight: 500;
  color: var(--muted); margin-bottom: 18px;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; flex: none;
  background: var(--primary); border-radius: 2px;
}
.lede { font-size: 1.14rem; color: var(--muted); }

/* ---------- hero ---------- */

/* No radial glow behind the headline: hierarchy and a hairline do the work. */
.hero { padding: 64px 0 60px; position: relative; }
.hero-inner { max-width: 860px; }
.hero h1 + p { margin-top: 20px; font-size: 1.16rem; color: var(--muted); max-width: 42em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-actions.stage-cta { justify-content: center; margin: 48px 0 44px; }
.stage-cta-bottom { margin-bottom: 0; }

.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 56px; align-items: center; }
@media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- hero mock database card ---------- */

.hero-shot-wrap { perspective: 1400px; display: flex; justify-content: center; }
.hero-shot {
  width: 100%; max-width: 400px; background: var(--surface);
  border-radius: 22px; overflow: hidden;
  box-shadow: 0 16px 32px -18px rgba(20, 25, 40, .22), 0 4px 10px -6px rgba(20, 25, 40, .12);
  transform: rotateY(-14deg) rotateX(6deg) rotateZ(1deg); transform-style: preserve-3d;
}
.hero-shot-bar { display: flex; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.hero-shot-bar span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); display: block; }
.hero-shot-body { padding: 18px 18px 20px; }
.hero-shot-title { font-family: var(--display); font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; color: var(--ink); }
.hero-shot-search { font-size: .78rem; color: var(--muted-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-bottom: 14px; }
.hero-shot-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.hero-shot-row:first-of-type { border-top: none; }
.hero-shot-name { font-size: .82rem; font-weight: 620; color: var(--ink); }
.hero-shot-name span { display: block; font-weight: 440; color: var(--muted-2); font-size: .72rem; margin-top: 2px; }
.hero-shot-value { font-size: .8rem; font-weight: 650; color: var(--accent); white-space: nowrap; }
@media (max-width: 1000px) { .hero-shot { transform: none; } }

/* ---------- stage-by-stage card ---------- */

.hero-card {
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px 26px 22px; box-shadow: var(--shadow-md);
}
.hero-card h2 { font-size: 1.02rem; letter-spacing: -.01em; color: var(--ink); }
.hero-card-below {
  margin-top: 32px; padding: 48px 36px 8px; text-align: center; border: 2px solid var(--ink);
}
.hero-card-below h2 { font-family: var(--display); font-size: 1.65rem; margin-bottom: 10px; }
.stage-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 720px) { .stage-list { grid-template-columns: repeat(2, 1fr); } }
.stage-row a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 28px 14px; text-align: center; border-radius: 18px;
  background: var(--surface); box-shadow: var(--shadow-sm), 0 10px 24px -14px rgba(20, 22, 27, .22);
  color: inherit; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.stage-row a:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow-sm), 0 18px 32px -14px rgba(20, 22, 27, .28);
}
.stage-name {
  font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--ink);
  padding-bottom: 6px; border-bottom: 1px solid var(--ink);
}
.stage-value { font-weight: 700; font-size: 1.3rem; color: var(--accent); letter-spacing: -.01em; }

/* ---------- provider marquee ---------- */

.marquee-section { padding: 18px 0 44px; }
.marquee {
  overflow: hidden; padding: 5px 0;
  /* fade both edges so chips enter and leave instead of being cut off */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: 30px; width: max-content;
  animation: marquee 62s linear infinite;
}
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 74s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-chip {
  flex: none; padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: .93rem; font-weight: 540; color: var(--ink-2); white-space: nowrap;
}
/* Grey silhouette logos: a CSS mask lets one file drive the shape at any
   size. mask-mode: alpha is required — the default luminance mode reads a
   solid-black icon as 0% visible and the whole chip disappears. */
.logo-chip { width: 54px; height: 46px; padding: 0; border: none; background: transparent; }
.logo-chip::before {
  content: ""; display: block; width: 100%; height: 100%;
  background-color: var(--ink);
  -webkit-mask-image: var(--logo-src); mask-image: var(--logo-src);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  mask-mode: alpha; -webkit-mask-mode: alpha;
}
.marquee-note { margin-top: 20px; font-size: .82rem; color: var(--muted-2); max-width: 60em; }

/* Half the track is a duplicate, so -50% lands exactly on the loop point. */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- category tiles ---------- */

.cat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.cat-tile {
  display: grid; gap: 5px; align-content: start;
  padding: 20px; border-radius: var(--radius); color: inherit;
  border: 1px solid var(--line); background: var(--surface);
  transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}
.cat-tile:hover {
  text-decoration: none; border-color: var(--line-strong);
  box-shadow: var(--shadow-md); transform: translateY(-2px);
}
.cat-name { font-weight: 580; font-size: .99rem; letter-spacing: -.012em; }
.cat-ceiling { font-weight: 660; font-size: 1.32rem; color: var(--accent); letter-spacing: -.03em; }
.cat-count { font-size: .84rem; color: var(--muted-2); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; margin-top: 56px; }
.stat { background: var(--surface); padding: 26px 24px; text-align: center; }
.stat-value { font-size: 2.1rem; font-weight: 660; letter-spacing: -.035em; line-height: 1; }
.stat-label { margin-top: 8px; color: var(--muted); font-size: .93rem; }

/* ---------- cards ---------- */

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
/* Exactly 2 columns rather than grid-2's auto-fit, which packs 3 across on
   a wide viewport and leaves the 4th item alone on its own row. */
.why-2x2 { grid-template-columns: repeat(2, minmax(min(320px, 100%), 1fr)); }
.section-link { margin-top: 26px; text-align: center; }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
}
.card h3 { letter-spacing: -.02em; margin: 0; }
.card-head { display: flex; align-items: center; gap: 10px; }
.card-icon { width: 22px; height: 22px; color: var(--ink); flex: none; }
.card-head + p, .card h3 + p { margin-top: 10px; color: var(--muted); font-size: .99rem; }

/* Numeral over a rule, not a coloured chip. */
.step { position: relative; padding-top: 16px; border-top: 2px solid var(--ink); }
.step-num {
  display: block; font-family: var(--sans); font-variant-numeric: tabular-nums;
  font-size: .82rem; font-weight: 600; color: var(--muted);
  margin-bottom: 10px; letter-spacing: .02em;
}

/* ---------- perk cards ---------- */

.perk-toolbar { display: grid; gap: 14px; margin-bottom: 26px; }
.search-row { position: relative; }
.search-row input {
  width: 100%; font: inherit; font-size: 1rem; padding: 15px 16px 15px 46px;
  border: 1px solid var(--line-strong); border-radius: 12px;
  background: var(--surface); color: var(--ink);
}
.search-row input::placeholder { color: var(--muted-2); }
.search-row svg { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: var(--muted-2); }
.filter-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.field { display: grid; gap: 6px; }
.field > label { font-size: .82rem; font-weight: 580; color: var(--muted); letter-spacing: .01em; }
.field select, .field input, .field textarea {
  font: inherit; font-size: .95rem; padding: 10px 12px; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px;
  min-width: 160px;
}
.results-line { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; justify-content: space-between; color: var(--muted); font-size: .95rem; margin-bottom: 18px; }
.results-count { font-weight: 580; color: var(--ink); }

.perk-list { display: grid; gap: 16px; }
.perk {
  display: block; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 22px 24px; color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.perk:hover { text-decoration: none; border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.perk-top { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; }
.perk-provider { font-weight: 640; font-size: 1.12rem; letter-spacing: -.02em; }
.perk-program { color: var(--muted); font-size: .95rem; }
.perk-value {
  margin-left: auto; font-weight: 660; font-size: 1.05rem; color: var(--accent);
  white-space: nowrap; letter-spacing: -.02em;
}
.perk-summary { margin-top: 12px; color: var(--ink-2); font-size: .99rem; }
.perk-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.perk[hidden] { display: none; }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 540; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-3); color: var(--ink-2); border: 1px solid transparent;
  white-space: nowrap;
}
.chip-primary { background: var(--primary-soft); color: var(--primary-ink); }
.chip-accent { background: var(--accent-soft); color: var(--accent); }
.chip-warn { background: var(--warn-soft); color: var(--warn); }
.chip-outline { background: transparent; border-color: var(--line-strong); color: var(--muted); }
a.chip:hover { background: var(--surface-2); color: var(--ink); text-decoration: none; }

.facet-nav { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); text-align: center; }
.facet-nav-heading { color: var(--muted); font-size: .9rem; margin-bottom: 12px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.empty-state { text-align: center; padding: 60px 20px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); }
.empty-state h2 { font-size: 1.1rem; }
.empty-state p { margin-top: 10px; color: var(--muted); max-width: 40em; margin-inline: auto; }
.legend { margin-top: 28px; font-size: .89rem; color: var(--muted-2); max-width: 62em; }

/* ---------- perk detail ---------- */

.detail-head { padding: 52px 0 34px; }
.crumb { font-size: .9rem; color: var(--muted); margin-bottom: 18px; }
.detail-value { font-size: 1.9rem; font-weight: 660; color: var(--accent); letter-spacing: -.03em; margin-top: 6px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 30px 0; }
@media (max-width: 480px) { .facts { grid-template-columns: 1fr; } }
.fact { background: var(--surface); padding: 18px 20px; text-align: center; }
.fact-label { font-size: .78rem; letter-spacing: .07em; color: var(--muted-2); font-weight: 600; }
.fact-value { margin-top: 7px; font-weight: 560; font-size: .99rem; }
.detail-block { margin-top: 34px; }
.detail-block h2 { font-size: 1.3rem; }
.detail-block ul { margin-top: 14px; display: grid; gap: 9px; color: var(--ink-2); }
.callout {
  margin-top: 30px; padding: 18px 20px; border-radius: var(--radius);
  background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 26%, transparent);
  color: var(--ink-2); font-size: .97rem;
}
.callout strong { color: var(--ink); }

/* ---------- accordion ---------- */

.faq { display: grid; gap: 0; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font-weight: 570; font-size: 1.055rem; list-style: none; letter-spacing: -.012em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 27px;
  width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .18s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details > div { padding: 0 44px 22px 0; color: var(--muted); }

/* ---------- blog ---------- */

.post-list {
  display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
}
.post-item { background: var(--surface); padding: 26px 28px; display: block; color: inherit; }
.post-item:hover { text-decoration: none; background: var(--surface-2); }
.post-item h2 { font-size: 1.24rem; letter-spacing: -.024em; }
.post-item p { margin-top: 9px; color: var(--muted); max-width: 62em; }
.post-kicker { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: .85rem; color: var(--muted-2); margin-bottom: 10px; }
.post-reviewed { color: var(--accent); }

/* ------------------------------------------------------------------ playbook */

.playbook-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(min(340px, 100%), .85fr); gap: 46px; align-items: start; }
.playbook-intro { max-width: 640px; }
.playbook-h2 { font-size: 1.16rem; margin-top: 34px; letter-spacing: -.012em; }
.playbook-list { margin-top: 14px; display: grid; gap: .7em; padding-left: 1.25em; color: var(--ink-2); }
.playbook-after { margin-top: 12px; color: var(--muted); max-width: 58em; }
.playbook-narrow { max-width: 640px; }

.playbook-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 28px 26px; position: sticky; top: 88px;
}
.playbook-card h2 { font-size: 1.2rem; }
.playbook-form { margin-top: 18px; display: grid; gap: 14px; }
.playbook-form .field-input { width: 100%; }

/* Honeypot: off-screen rather than display:none, because some bots skip hidden
   fields but not positioned ones. Never focusable, never announced. */
.pb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.pb-consent { display: flex; gap: 10px; align-items: flex-start; font-size: .92rem; color: var(--ink-2); line-height: 1.5; cursor: pointer; }
.pb-consent input { margin-top: 3px; width: 17px; height: 17px; flex: none; accent-color: var(--primary); }
.pb-submit { width: 100%; justify-content: center; }
.pb-status { font-size: .93rem; line-height: 1.5; margin-top: 2px; }
.pb-status[data-state="error"] { color: var(--danger); }
.pb-status[data-state="ok"] { color: var(--accent); }
.pb-note { margin-top: 12px; font-size: .85rem; color: var(--muted-2); line-height: 1.5; }

@media (max-width: 880px) {
  .playbook-grid { grid-template-columns: 1fr; gap: 34px; }
  .playbook-card { position: static; }
}

/* --------------------------------------------------------- analytics notice */

/* A strip at the bottom, above the opt-in card so the two never overlap. */
.notice-bar {
  position: fixed; z-index: 70; left: 0; right: 0; bottom: 0;
  background: var(--surface); border-top: 1px solid var(--line-strong);
  box-shadow: 0 -6px 24px rgba(15, 23, 42, .09);
  transform: translateY(100%); transition: transform .26s ease;
}
.notice-bar[data-shown] { transform: none; }
.notice-inner {
  display: flex; gap: 16px; align-items: center; justify-content: space-between;
  flex-wrap: wrap; padding: 13px 24px;
}
.notice-inner p { font-size: .9rem; color: var(--muted); max-width: 76ch; }
.notice-inner a { color: var(--primary); }

/* Clears the strip so it never covers the opt-in card. */
.notice-bar[data-shown] ~ .optin { bottom: 84px; }

@media (prefers-reduced-motion: reduce) { .notice-bar { transition: none; } }

/* Switch on the cookie policy page. */
.analytics-switch {
  margin-top: 26px; padding: 18px 20px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--surface-2);
}
.analytics-switch h2 { font-size: 1.05rem; }
.analytics-switch p { margin: 8px 0 14px; color: var(--muted); font-size: .95rem; }

/* ------------------------------------------------------- opt-in invitation */

/* A bottom sheet, never a full-screen overlay: Google demotes pages whose
   mobile content is covered by an interstitial, and a sheet leaves the article
   readable underneath. */
.optin {
  position: fixed; z-index: 60; right: 20px; bottom: 20px; width: min(380px, calc(100vw - 32px));
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px;
  padding: 20px 20px 18px; box-shadow: 0 18px 42px rgba(15, 23, 42, .16);
  transform: translateY(16px); opacity: 0; transition: transform .28s ease, opacity .28s ease;
}
.optin[data-shown] { transform: none; opacity: 1; }
.optin h2 { font-size: 1.06rem; padding-right: 26px; }
.optin p { margin-top: 8px; font-size: .92rem; color: var(--muted); line-height: 1.5; }
.optin-actions { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.optin-dismiss { background: none; border: 0; color: var(--muted-2); font: inherit; font-size: .9rem; cursor: pointer; padding: 6px 2px; }
.optin-dismiss:hover { color: var(--ink); }
.optin-close {
  position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; border: 0; border-radius: 7px;
  background: none; color: var(--muted-2); font-size: 19px; line-height: 1; cursor: pointer;
}
.optin-close:hover { background: var(--surface-3); color: var(--ink); }

@media (max-width: 560px) {
  .optin { right: 12px; left: 12px; bottom: 12px; width: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .optin { transition: none; }
}

/* Citations under a news item. Deliberately plain and dense: this block exists
   to be checked, not read through. */
.sources { max-width: 760px; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line); }
.sources h2 { font-size: 1.06rem; letter-spacing: -.01em; }
.source-list { margin-top: 14px; display: grid; gap: .6em; font-size: .96rem; padding-left: 1.35em; }
.source-list li { color: var(--ink-2); }
.source-meta { color: var(--muted-2); }

.article { padding: 48px 0 20px; }
.article-head { max-width: 760px; }
.article-head h1 { font-size: clamp(1.9rem, 4.2vw, 2.9rem); }
.article-head .lede { margin-top: 18px; }
.prose { max-width: 760px; margin-top: 40px; font-size: 1.075rem; }
.prose > * + * { margin-top: 1.35em; }
.prose h2 { font-size: 1.55rem; margin-top: 2.4em; }
.prose h3 { font-size: 1.2rem; margin-top: 2em; }
.prose ul, .prose ol { display: grid; gap: .55em; }
.prose li > ul { margin-top: .55em; }
.prose blockquote {
  margin: 1.8em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--primary);
  color: var(--ink-2); font-size: 1.06rem;
}
.prose code { font-family: var(--mono); font-size: .88em; background: var(--surface-3); padding: 2px 6px; border-radius: 5px; }
.prose table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.prose .table-scroll { overflow-x: auto; margin: 1.8em 0; border: 1px solid var(--line); border-radius: var(--radius); }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--surface-2); font-weight: 600; font-size: .88rem; letter-spacing: .01em; }
/* border-collapse defeats a radius on <table> itself, so it goes on the head
   cells at each end — the standard trick for a rounded collapsed-border table. */
.prose th:first-child { border-top-left-radius: var(--radius); }
.prose th:last-child { border-top-right-radius: var(--radius); }
.prose tr:last-child td { border-bottom: 0; }
.prose strong { font-weight: 620; color: var(--ink); }

/* ---------- forms ---------- */

.form { display: grid; gap: 18px; max-width: 640px; }
.form .field { gap: 7px; }
.form .field > label { font-size: .92rem; color: var(--ink); font-weight: 560; }
.form .hint { font-size: .86rem; color: var(--muted-2); }
.form input, .form select, .form textarea { width: 100%; min-width: 0; padding: 12px 14px; font-size: 1rem; }
.form textarea { min-height: 108px; resize: vertical; }
.form .req { color: var(--primary); }
.checkbox { display: flex; gap: 11px; align-items: flex-start; font-size: .94rem; color: var(--muted); }
.checkbox input { width: 22px; height: 22px; margin-top: 1px; flex: none; accent-color: var(--primary); }
.field-error { font-size: .86rem; color: var(--danger); }
.form-status { padding: 20px 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-2); }
.form-status h2 { font-size: 1.06rem; }
.form-status p { margin-top: 8px; color: var(--muted); font-size: .97rem; }
.form-status.ok { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, transparent); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px) { .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */

.cta-band { background: var(--surface-3); border-block: 1px solid var(--line); padding: 66px 0; text-align: center; }
.cta-band p { margin: 14px auto 0; color: var(--muted); max-width: 46em; font-size: 1.075rem; }
.cta-band .btn { margin-top: 28px; }

/* ---------- footer ---------- */

.site-footer { border-top: 1px solid var(--line); padding: 56px 0 34px; background: var(--surface-2); }
/* min() keeps the track from demanding more than the viewport can give. */
.footer-grid { display: grid; grid-template-columns: minmax(min(240px, 100%), 1.6fr) repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 34px; }
.footer-brand p { margin-top: 14px; color: var(--muted); font-size: .93rem; max-width: 34em; }
.footer-col h2 { font-size: .82rem; letter-spacing: .08em; color: var(--muted-2); margin-bottom: 14px; font-weight: 600; }
.footer-col ul { list-style: none; padding: 0; display: grid; gap: 9px; }
/* inline-block + padding takes these to a 24px target height (WCAG 2.2 AA). */
.footer-col a { color: var(--ink-2); font-size: .93rem; display: inline-block; padding: 2px 0; }
.footer-bottom {
  margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  color: var(--muted-2); font-size: .86rem;
}
.footer-disclaimer { max-width: 68em; margin-top: 18px; color: var(--muted-2); font-size: .84rem; line-height: 1.55; }

/* ---------- misc ---------- */

.lang-note { font-size: .84rem; color: var(--muted-2); }
[hidden] { display: none !important; }
.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;
}

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .section { padding: 60px 0; }
  .hero { padding: 52px 0 44px; }
  /* Long values such as "Up to $100,000 + up to 35% off" must wrap here. */
  .perk-value { margin-left: 0; width: 100%; white-space: normal; }
  .field select, .field input { min-width: 0; width: 100%; }
  .filter-row { display: grid; grid-template-columns: 1fr 1fr; }
  .filter-row .field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* Below 380px even the mark plus wordmark is too much, so the header keeps only
   the mark. The logo link carries an aria-label, so hiding the text is safe. */
@media (max-width: 380px) {
  .site-header .logo span { display: none; }
}

/* Three controls plus the wordmark stop fitting around 430px: drop the language
   code down to just the globe and tighten the gaps. */
@media (max-width: 430px) {
  .header-inner { gap: 10px; }
  .wrap { padding: 0 16px; }
  .lang-picker > summary span { display: none; }
  .lang-picker > summary { padding: 0 9px; }
  .lang-picker, .theme-toggle, .nav-toggle { margin-left: 4px; }
  .nav-toggle { padding: 8px 9px; }
  .logo { font-size: 1rem; gap: 7px; }
  .logo-mark { width: 24px; height: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  /* Stop the marquee outright rather than let it loop at 0.01ms: wrap the rows,
     drop the decorative duplicates, keep every provider readable. */
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; }
  .marquee { mask-image: none; -webkit-mask-image: none; }
  .marquee-dupe { display: none; }
  .marquee-reverse { margin-top: 10px; }
}

@media print {
  .site-header, .site-footer, .cta-band, .perk-toolbar { display: none; }
}