/* 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: #e4e8f0;
  --line-strong: #cfd6e2;
  --surface: #ffffff;
  --surface-2: #f6f8fc;
  --surface-3: #eef2f9;
  --primary: #2f5bff;
  --primary-ink: #1e3fc0;
  --primary-soft: #eaf0ff;
  /* 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: 10px;
  --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;
    --surface: #0c0f15;
    --surface-2: #12161f;
    --surface-3: #182031;
    --primary: #7c9bff;
    --primary-ink: #a3b9ff;
    --primary-soft: #16203b;
    --accent: #37c78f;
    --accent-soft: #10251d;
    --warn: #e0a44c;
    --warn-soft: #2a2015;
    --on-primary: #08101f;
    --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;
  --surface: #0c0f15;
  --surface-2: #12161f;
  --surface-3: #182031;
  --primary: #7c9bff;
  --primary-ink: #a3b9ff;
  --primary-soft: #16203b;
  --accent: #37c78f;
  --accent-soft: #10251d;
  --warn: #e0a44c;
  --warn-soft: #2a2015;
  --on-primary: #08101f;
  --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(--surface);
  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;
}
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(--surface) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  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: 10px; 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-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; margin-top: 32px; }
.hero-trust { margin-top: 20px; font-size: .93rem; color: var(--muted-2); }

.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 stage card ---------- */

/* surface-2, not surface: the card has to separate from the page in both
   themes, and a border alone reads flat. */
.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); }
.stage-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 4px; }
.stage-row a {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  padding: 11px 12px; border-radius: 10px; color: inherit; text-decoration: none;
  transition: background .15s ease;
}
.stage-row a:hover { background: var(--surface-3); text-decoration: none; }
.stage-name { font-weight: 560; font-size: .96rem; }
.stage-value { font-weight: 640; font-size: .96rem; color: var(--accent); letter-spacing: -.01em; }
/* Bar length = programs open at this stage, relative to the busiest stage.
   Filled portion = the share you can apply to without an introduction. */
.stage-bar {
  grid-column: 1 / -1; height: 8px; border-radius: 999px;
  background: var(--surface-3); overflow: hidden; margin-top: 5px; min-width: 8px;
}
.stage-bar-fill {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--accent)));
}
.stage-count { grid-column: 1 / -1; font-size: .8rem; color: var(--muted-2); }
.stage-note { margin-top: 16px; font-size: .82rem; color: var(--muted-2); line-height: 1.5; }

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

.marquee-section { padding: 18px 0 44px; }
.marquee-heading {
  font-size: .8rem; font-weight: 620; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted-2); margin-bottom: 18px;
}
.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; gap: 10px; width: max-content;
  animation: marquee 46s linear infinite;
}
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 58s; }
.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;
}
.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; }
.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)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 26px;
}
.card h3 { letter-spacing: -.02em; }
.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); }

.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(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 30px 0; }
.fact { background: var(--surface); padding: 18px 20px; }
.fact-label { font-size: .78rem; text-transform: uppercase; 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-block: 1px solid var(--line); }
.post-item { background: var(--surface); padding: 26px 4px; 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; font-size: .85rem; color: var(--muted-2); margin-bottom: 10px; }

.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; }
.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; text-transform: uppercase; 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; }
}