/* style.css — DK finance sites network. Plain CSS, zero dependencies, light-only.
   Every selector below matches the fixed markup in docs/CONTRACTS.md §7. */

/* ===================================================================== 1. reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; }
summary { cursor: pointer; }
[hidden] { display: none !important; }

/* ===================================================================== 2. base */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-400);
  line-height: var(--lh-body);
  color: var(--c-ink);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { font-weight: var(--fw-bold); line-height: var(--lh-head); color: var(--c-ink); }
h1 { font-size: var(--fs-900); line-height: var(--lh-tight); letter-spacing: -.01em; }
h2 { font-size: var(--fs-800); }
h3 { font-size: var(--fs-700); }
h4 { font-size: var(--fs-600); }

a { color: var(--c-brand); text-underline-offset: .18em; }
a:hover { color: var(--c-brand-2); }
strong, b { font-weight: var(--fw-bold); }
small { font-size: var(--fs-200); }

:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-sm); }
:where(.site-header, .site-footer, .hero) :focus-visible { outline-color: var(--c-accent); }
[id] { scroll-margin-top: calc(var(--header-h) + 12px); }

::selection { background: var(--c-brand-tint); color: var(--c-ink); }

/* ===================================================================== 3. utilities */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--wrap-narrow); }
/* !important so component rules (e.g. `.leadform input`) cannot re-inflate the
   honeypot — an un-neutralised .hp is a visible, submittable field. */
.visually-hidden, .hp {
  position: absolute !important;
  width: 1px !important; height: 1px !important; min-height: 0 !important;
  padding: 0 !important; margin: -1px !important; border: 0 !important;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.center { text-align: center; }
.muted { color: var(--c-ink-3); }
.section__title { font-size: var(--fs-800); margin-bottom: var(--sp-2); }
.section__intro { color: var(--c-ink-2); margin-bottom: var(--sp-5); max-width: 60ch; }

.skip {
  position: absolute; left: var(--sp-2); top: -60px; z-index: 100;
  background: var(--c-surface); color: var(--c-brand); font-weight: var(--fw-bold);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-md); box-shadow: var(--sh-2);
  transition: top var(--dur);
}
.skip:focus { top: var(--sp-2); }

/* ===================================================================== 4. buttons */
.btn {
  --btn-bg: var(--c-brand); --btn-ink: var(--c-brand-ink); --btn-bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 48px; padding: var(--sp-3) var(--sp-6);
  font-size: var(--fs-400); font-weight: var(--fw-bold); line-height: 1.2;
  text-align: center; text-decoration: none; cursor: pointer;
  color: var(--btn-ink); background: var(--btn-bg);
  border: 2px solid var(--btn-bd); border-radius: var(--r-md);
  transition: background var(--dur), transform var(--dur), box-shadow var(--dur);
}
.btn:hover { color: var(--btn-ink); background: var(--c-brand-2); }
.btn:active { transform: translateY(1px); }
.btn--cta { --btn-bg: var(--c-cta); --btn-ink: var(--c-cta-ink); box-shadow: var(--sh-1); }
.btn--cta:hover { background: var(--c-cta-hover); box-shadow: var(--sh-2); }
.btn--ghost {
  --btn-bg: transparent; --btn-ink: var(--c-brand); --btn-bd: var(--c-line-2);
}
.btn--ghost:hover { background: var(--c-surface-2); color: var(--c-brand); }
.btn--sm { min-height: 40px; padding: var(--sp-2) var(--sp-4); font-size: var(--fs-300); }
.btn--block { display: flex; width: 100%; }

/* ===================================================================== 5. header + nav */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: var(--c-brand); color: var(--c-brand-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), var(--sh-1);
}
.header__inner {
  position: relative;
  /* flex-wrap is load-bearing: below 900px the burger menu sets
     `.nav { flex-basis: 100% }` to drop onto its own row. Without wrapping it
     stays in the logo row and renders as a squashed right-hand column. */
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4);
  min-height: var(--header-h);
}
.header__logo { display: flex; align-items: center; flex: 0 0 auto; margin-right: auto; }
/* explicit height (not max-height) so the box is reserved from the
   width/height attributes before the bitmap decodes — CLS 0 */
.header__logo img { height: 40px; width: auto; }
/* laanmigpenge's logo is a WHITE knockout → sits directly on the navy bar.
   kreditoversigten's is a NAVY wordmark → needs a white plate to stay legible
   on the navy bar (header + footer). Keyed off data-brand, no markup change. */
[data-brand="kreditoversigten"] .header__logo img,
[data-brand="kreditoversigten"] .footer__brand img,
[data-brand="amyfinans"] .header__logo img,
[data-brand="amyfinans"] .footer__brand img {
  background: #fff; padding: 4px 10px; border-radius: var(--r-sm);
}

.nav__toggle { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.nav__burger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 10px; cursor: pointer; flex: 0 0 auto;
}
.nav__burger span { display: block; height: 2px; background: var(--nav-ink); border-radius: 2px; }

.nav { display: flex; align-items: center; gap: var(--sp-5); }
.nav__list { display: flex; align-items: center; gap: var(--sp-4); list-style: none; margin: 0; }
.nav__item { position: relative; }
.nav__item > a, .nav__sub > summary {
  display: flex; align-items: center; min-height: 44px;
  color: var(--nav-ink); font-size: var(--fs-300); font-weight: var(--fw-semi);
  text-decoration: none; white-space: nowrap;
}
.nav__item > a:hover, .nav__sub > summary:hover { color: var(--nav-ink-hover); }

.nav__sub { position: relative; }
.nav__sub > summary { list-style: none; gap: 6px; }
.nav__sub > summary::-webkit-details-marker { display: none; }
.nav__sub > summary::after {
  content: ""; width: 9px; height: 9px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--dur);
}
.nav__sub[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.nav__sub > ul {
  list-style: none; margin: 0;
  position: absolute; top: 100%; left: -12px; min-width: 240px; z-index: 5;
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); box-shadow: var(--sh-3); padding: var(--sp-2);
}
.nav__sub > ul a {
  display: flex; align-items: center; min-height: 44px; padding: 0 var(--sp-3);
  color: var(--c-ink); font-size: var(--fs-300); font-weight: var(--fw-semi);
  text-decoration: none; border-radius: var(--r-sm);
}
.nav__sub > ul a:hover { background: var(--c-surface-2); color: var(--c-brand); }
/* hover-open on pointer devices, click-open (native <details>) everywhere */
@media (hover: hover) and (min-width: 900px) {
  .nav__item--has-sub:hover .nav__sub > ul,
  .nav__sub:focus-within > ul { display: block; content-visibility: visible; }
  .nav__item--has-sub:hover .nav__sub::details-content,
  .nav__sub:focus-within::details-content { content-visibility: visible; block-size: auto; }
}
.header__cta { flex: 0 0 auto; }

@media (max-width: 899px) {
  .nav__burger { display: flex; order: 3; }
  .header__logo, .header__cta { order: 1; }
  .nav {
    display: none; order: 4; flex-basis: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--sp-2) 0 var(--sp-4);
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .nav__toggle:checked ~ .nav { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item > a, .nav__sub > summary {
    min-height: 48px; font-size: var(--fs-400);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .nav__sub > summary::after { margin-left: auto; }
  .nav__sub > ul {
    position: static; min-width: 0; box-shadow: none; border: 0;
    background: rgba(255, 255, 255, .06); border-radius: 0; padding: 0 0 var(--sp-2);
  }
  .nav__sub > ul a { color: var(--nav-ink); padding-left: var(--sp-5); }
  .nav__sub > ul a:hover { background: rgba(255, 255, 255, .08); color: #fff; }
  /* 44px minimum tap target inside the drawer */
  .header__cta { margin-top: var(--sp-3); align-self: flex-start; min-height: 44px; }
}

/* ===================================================================== 6. hero */
.hero {
  position: relative; isolation: isolate;
  padding: var(--sp-9) 0 var(--sp-10);
  color: #fff;
  background: linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background-image: none;
  background-size: cover; background-position: center;
  mix-blend-mode: soft-light; opacity: .85;
}
/* The hero texture is decoration only. Load it on wide viewports so the mobile
   LCP path stays text + CSS gradient (no extra image request). */
@media (min-width: 900px) {
  .hero::before { background-image: var(--hero-img); }
}
.hero--compact { padding: var(--sp-7) 0 var(--sp-8); }
.hero__grid { display: grid; gap: var(--sp-7); align-items: start; }
.hero__copy { min-width: 0; }
.hero h1 { color: #fff; margin-bottom: var(--sp-3); }
.hero__sub { font-size: var(--fs-500); color: #d7e2f2; margin-bottom: var(--sp-5); max-width: 46ch; }
.hero__points { list-style: none; display: grid; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.hero__points li {
  position: relative; padding-left: 30px; font-weight: var(--fw-semi); color: #eaf1fa;
}
.hero__points li::before {   /* accent disc */
  content: ""; position: absolute; left: 0; top: .22em; width: 22px; height: 22px;
  border-radius: var(--r-pill); background: var(--c-accent);
}
.hero__points li::after {    /* check glyph on the disc */
  content: ""; position: absolute; left: 4px; top: calc(.22em + 4px); width: 14px; height: 14px;
  background-color: var(--c-accent-ink);
  -webkit-mask: var(--i-check) center / contain no-repeat;
  mask: var(--i-check) center / contain no-repeat;
}
.hero__mascot { height: 320px; width: auto; margin-top: var(--sp-4); }
.hero--compact .hero__mascot { display: none; }

@media (min-width: 900px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr); gap: var(--sp-9); }
}
@media (max-width: 899px) {
  /* form is the second element on mobile, immediately under the h1 block */
  .hero__mascot { display: none; }
}

/* ===================================================================== 7. lead form */
.leadform {
  background: var(--c-surface); color: var(--c-ink);
  border-radius: var(--r-lg); box-shadow: var(--sh-3);
  padding: var(--sp-6);
  display: grid; gap: var(--sp-4);
}
.leadform__title { font-size: var(--fs-600); font-weight: var(--fw-bold); line-height: var(--lh-head); }
.field { display: grid; gap: 6px; }
.field label { font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--c-ink-2); }
.leadform input[type="text"], .leadform input[type="tel"], .leadform input[type="email"],
.leadform input:not([type]), .leadform select {
  width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4);
  font-size: 16px; /* never below 16px: iOS zoom */
  color: var(--c-ink); background: var(--c-surface);
  border: 1px solid var(--c-line-2); border-radius: var(--r-md);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.leadform input::placeholder { color: var(--c-ink-3); }
.leadform input:focus { border-color: var(--c-focus); box-shadow: 0 0 0 3px rgba(27, 110, 243, .18); outline: none; }
.leadform input[aria-invalid="true"] { border-color: var(--c-err); }
.consent {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-size: var(--fs-200); line-height: 1.5; color: var(--c-ink-2); cursor: pointer;
}
.consent input[type="checkbox"] { width: 20px; height: 20px; margin: 2px 0 0; flex: 0 0 auto; accent-color: var(--c-cta); }
.consent a { color: var(--c-brand); }
.leadform__trust { font-size: var(--fs-200); color: var(--c-ink-3); text-align: center; }
.leadform__error {
  font-size: var(--fs-300); font-weight: var(--fw-semi);
  color: var(--c-err); background: var(--c-err-bg);
  border: 1px solid #f2c2be; border-radius: var(--r-md); padding: var(--sp-3);
}
.leadform.is-busy { opacity: .7; pointer-events: none; }

/* ===================================================================== 8. steps */
.steps { padding: var(--sp-9) 0; background: var(--c-brand-tint-soft); }
.steps__list { list-style: none; display: grid; gap: var(--sp-6); counter-reset: step; }
.step { text-align: center; }
.step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: var(--sp-3);
  border-radius: var(--r-pill);
  background: var(--c-accent); color: var(--c-accent-ink);
  font-size: var(--fs-700); font-weight: var(--fw-bold); line-height: 1;
}
.step__img { height: 96px; width: auto; margin: 0 auto var(--sp-3); }
.step__title { font-size: var(--fs-600); margin-bottom: var(--sp-2); }
.step p { color: var(--c-ink-2); }
@media (min-width: 700px) { .steps__list { grid-template-columns: repeat(3, 1fr); } }

/* ===================================================================== 9. deal list + chips */
.deallist-section { padding: var(--sp-9) 0; }
.chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: var(--sp-4) 0 var(--sp-5);
}
.chip__input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-300); font-weight: var(--fw-semi); color: var(--c-ink-2);
  background: var(--c-surface-3); border: 1px solid transparent;
  border-radius: var(--r-pill); cursor: pointer; user-select: none;
  transition: background var(--dur), color var(--dur);
}
.chip:hover { background: var(--c-line); }
.chip__input:checked + .chip {
  background: var(--c-brand); color: var(--c-brand-ink); border-color: var(--c-brand);
}
.chip__input:focus-visible + .chip { outline: 3px solid var(--c-focus); outline-offset: 2px; }

.deallist { display: grid; gap: var(--sp-4); }
/* Default order (also the no-:has() fallback): "recommended". */
.deallist .deal { order: var(--o-rec, 0); }
/* The radios live INSIDE .chips and .deallist is a following sibling of .chips,
   so the CONTRACTS §7 hint `#sort-apr:checked ~ .deallist` cannot match.
   :has() on the .chips wrapper is the working form (Baseline 2023). */
.chips:has(#sort-rec:checked) ~ .deallist .deal { order: var(--o-rec, 0); }
.chips:has(#sort-apr:checked) ~ .deallist .deal { order: var(--o-apr, 0); }
.chips:has(#sort-amount:checked) ~ .deallist .deal { order: var(--o-amount, 0); }

/* ===================================================================== 10. deal card */
.deal {
  position: relative;
  display: grid; gap: var(--sp-4);
  grid-template-areas: "brand" "facts" "benefits" "cta" "repex" "warn";
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
}
.deal--featured { border-color: var(--c-cta); box-shadow: var(--sh-3); }
.deal[data-hidden="1"] { display: none; }

.deal__badge {
  position: absolute; top: -11px; left: var(--sp-5);
  padding: 3px 12px; border-radius: var(--r-pill);
  background: var(--c-cta); color: var(--c-cta-ink);
  font-size: var(--fs-100); font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.deal__ad {
  position: absolute; top: var(--sp-2); right: var(--sp-4);
  font-size: var(--fs-100); color: var(--c-ink-3);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}

.deal__brand { grid-area: brand; display: flex; align-items: center; gap: var(--sp-4); min-width: 0; }
.deal__logo {
  width: 150px; height: 53px; flex: 0 0 auto; object-fit: contain;
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-sm); padding: 4px;
}
.deal__name { font-size: var(--fs-600); margin: 0; }

.deal__facts { grid-area: facts; display: grid; gap: var(--sp-3); margin: 0; }
.deal__facts > div {
  background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4);
}
.deal__facts dt {
  font-size: var(--fs-100); font-weight: var(--fw-bold); color: var(--c-ink-3);
  letter-spacing: var(--tracking-caps); text-transform: uppercase;
}
.deal__facts dd {
  margin: 2px 0 0; font-size: var(--fs-400); font-weight: var(--fw-bold);
  color: var(--c-ink); font-variant-numeric: tabular-nums;
}
@media (min-width: 560px) { .deal__facts { grid-template-columns: repeat(3, 1fr); } }

.deal__benefits { grid-area: benefits; list-style: none; display: grid; gap: 6px; margin: 0; }
.deal__benefit {
  position: relative; padding-left: 28px; font-size: var(--fs-300); color: var(--c-ink-2);
}
.deal__benefit::before {
  content: ""; position: absolute; left: 0; top: .18em; width: 18px; height: 18px;
  background-color: var(--c-ok);
  -webkit-mask: var(--i-check) center / 16px 16px no-repeat;
  mask: var(--i-check) center / 16px 16px no-repeat;
}
.deal__benefit--heart::before {
  background-color: var(--c-accent);
  -webkit-mask-image: var(--i-heart); mask-image: var(--i-heart);
}
.deal--inline .deal__benefit--heart::before,
[data-brand="kreditoversigten"] .deal__benefit--heart::before { background-color: #e2536b; }

.deal__cta { grid-area: cta; min-height: 52px; width: 100%; }

.repex {
  grid-area: repex;
  background: var(--c-surface-2); border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-200); line-height: 1.55; color: var(--c-ink-2);
}
.repex__label {
  font-weight: var(--fw-bold); color: var(--c-ink); font-size: var(--fs-200);
  letter-spacing: var(--tracking-caps); text-transform: uppercase; margin-bottom: 2px;
}
.deal__warn {
  grid-area: warn; margin: 0;
  font-size: var(--fs-200); font-weight: var(--fw-semi); color: var(--c-warn);
}

.deal--inline { margin: var(--sp-6) 0; }

@media (min-width: 900px) {
  .deal {
    grid-template-columns: 220px minmax(0, 1fr) 220px;
    grid-template-areas:
      "brand   facts     cta"
      "brand   benefits  cta"
      "repex   repex     repex"
      "warn    warn      warn";
    align-items: start;
    column-gap: var(--sp-6);
    padding: var(--sp-6);
  }
  .deal__brand { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }
  .deal__cta { align-self: center; }
  /* an inline card lives inside the 68ch .prose column — keep it stacked */
  .deal--inline {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "brand" "facts" "benefits" "cta" "repex" "warn";
  }
  .deal--inline .deal__brand { flex-direction: row; align-items: center; gap: var(--sp-4); }
}

/* ===================================================================== 11. warn box */
.warnbox {
  background: var(--c-warn-bg); border-left: 4px solid var(--c-warn-line);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5);
  font-size: var(--fs-300); color: #4d3200;
}
.warnbox strong { color: #3a2500; }
.warnbox[data-market-slot="se-warning"] { padding-left: calc(var(--sp-5) + 36px); position: relative; }
.warnbox[data-market-slot="se-warning"]::before {
  content: ""; position: absolute; left: var(--sp-4); top: var(--sp-4); width: 24px; height: 22px;
  background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 1 23 21H1z' fill='%23d61f1f' stroke='%23fff' stroke-width='1.5'/%3E%3Crect x='11' y='7' width='2' height='7' fill='%23fff'/%3E%3Ccircle cx='12' cy='17' r='1.3' fill='%23fff'/%3E%3C/svg%3E");
}

/* ===================================================================== 12. content + toc + prose */
.content { padding: var(--sp-9) 0; }
.content__grid { display: grid; gap: var(--sp-7); }
.toc {
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
}
.toc__title {
  font-size: var(--fs-200); font-weight: var(--fw-bold); text-transform: uppercase;
  letter-spacing: var(--tracking-caps); color: var(--c-ink-3); margin-bottom: var(--sp-2);
}
.toc ol { margin: 0; padding-left: 1.1em; display: grid; gap: 2px; }
.toc a { display: inline-block; padding: 4px 0; font-size: var(--fs-300); color: var(--c-ink-2); text-decoration: none; }
.toc a:hover { color: var(--c-brand); text-decoration: underline; }

.prose { max-width: var(--prose); min-width: 0; }
.prose > * + * { margin-top: var(--sp-4); }
.prose h2 {
  margin-top: var(--sp-8); padding-left: var(--sp-4);
  border-left: 4px solid var(--c-accent);
}
.prose h3 { margin-top: var(--sp-6); }
.prose ul, .prose ol { padding-left: 1.35em; display: grid; gap: 6px; }
.prose li::marker { color: var(--c-brand-2); }
.prose a { color: var(--c-brand); text-decoration: underline; }
.prose .btn { text-decoration: none; color: var(--btn-ink); }
.prose img { border-radius: var(--r-md); margin-inline: auto; }
.prose .deal img { margin-inline: 0; }   /* inline deal card keeps its own layout */
.prose blockquote {
  padding: var(--sp-4) var(--sp-5); background: var(--c-brand-tint-soft);
  border-left: 4px solid var(--c-brand-tint); border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--c-ink-2); font-style: italic;
}
.prose table { width: 100%; font-size: var(--fs-300); }
.prose :where(table) { display: block; overflow-x: auto; }
.prose th, .prose td { padding: var(--sp-3) var(--sp-4); text-align: left; border-bottom: 1px solid var(--c-line); }
.prose th {
  font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-ink-3); border-bottom: 2px solid var(--c-line-2); white-space: nowrap;
}
.prose tbody tr:nth-child(even) { background: var(--c-surface-2); }
.prose hr { border: 0; border-top: 1px solid var(--c-line); margin: var(--sp-7) 0; }

@media (min-width: 1100px) {
  .content__grid { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-9); align-items: start; }
  .toc { position: sticky; top: calc(var(--header-h) + 16px); max-height: calc(100vh - var(--header-h) - 32px); overflow: auto; }
}

/* ===================================================================== 13. faq */
.faq { padding: var(--sp-8) 0; background: var(--c-surface-2); }
.faq__item {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-md); margin-bottom: var(--sp-3);
}
.faq__q {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 56px; padding: var(--sp-3) var(--sp-5);
  font-weight: var(--fw-semi); color: var(--c-ink); list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after {
  content: ""; margin-left: auto; flex: 0 0 auto; width: 12px; height: 12px;
  border-right: 2px solid var(--c-brand-2); border-bottom: 2px solid var(--c-brand-2);
  transform: translateY(-3px) rotate(45deg); transition: transform var(--dur);
}
.faq__item[open] .faq__q::after { transform: translateY(2px) rotate(-135deg); }
.faq__a { padding: 0 var(--sp-5) var(--sp-4); color: var(--c-ink-2); }
.faq__a > * + * { margin-top: var(--sp-3); }

/* ===================================================================== 14. logostrip */
.logostrip { padding: var(--sp-8) 0; }
.logostrip__title {
  text-align: center; font-size: var(--fs-200); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-caps);
  color: var(--c-ink-3); margin-bottom: var(--sp-5);
}
.logostrip__list {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  justify-content: center; gap: var(--sp-5) var(--sp-7);
}
.logostrip__list img {
  height: 34px; width: auto;
  filter: grayscale(100%); opacity: .65;
  transition: filter var(--dur), opacity var(--dur);
}
.logostrip__list li:hover img { filter: none; opacity: 1; }

/* ===================================================================== 15. breadcrumbs, lenderhero, marketgrid, thanks */
.breadcrumbs { padding: var(--sp-3) 0; font-size: var(--fs-200); color: var(--c-ink-3); }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; }
.breadcrumbs li + li::before { content: "›"; margin-right: var(--sp-2); color: var(--c-line-2); }
.breadcrumbs a { color: var(--c-ink-3); text-decoration: none; }
.breadcrumbs a:hover { color: var(--c-brand); text-decoration: underline; }

.lenderhero {
  padding: var(--sp-8) 0; color: #fff;
  background: linear-gradient(150deg, var(--hero-from) 0%, var(--hero-to) 100%);
}
.lenderhero .wrap { display: grid; gap: var(--sp-5); align-items: center; }
.lenderhero h1 { color: #fff; }
.lenderhero__logo {
  width: 180px; height: 64px; object-fit: contain;
  background: #fff; border-radius: var(--r-md); padding: var(--sp-2);
}
.lenderhero__facts { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.lenderhero__facts > div { background: rgba(255, 255, 255, .1); border-radius: var(--r-md); padding: var(--sp-3) var(--sp-4); }
.lenderhero__facts dt { font-size: var(--fs-100); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: #c5d3e6; }
.lenderhero__facts dd { margin: 2px 0 0; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .lenderhero .wrap { grid-template-columns: 200px minmax(0, 1fr); } }

.marketgrid { padding: var(--sp-9) 0; }
.marketgrid > .wrap > p { color: var(--c-ink-2); max-width: 62ch; margin-bottom: var(--sp-6); }
.marketgrid__list { list-style: none; display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
/* The tile is an <li> wrapping the <a>; the LINK is the card, so the whole
   surface is clickable and the focus ring traces the card. */
.markettile { display: flex; }
.markettile > a {
  flex: 1 1 auto;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  column-gap: var(--sp-4); row-gap: 0;
  min-height: 76px; padding: var(--sp-4) var(--sp-5);
  background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--r-md);
  box-shadow: var(--sh-1); text-decoration: none; color: var(--c-ink);
  transition: transform var(--dur), box-shadow var(--dur), border-color var(--dur);
}
.markettile > a:hover {
  transform: translateY(-2px); box-shadow: var(--sh-2);
  border-color: var(--c-brand-tint); color: var(--c-ink);
}
.markettile__flag { grid-row: 1 / span 2; font-size: 1.9rem; line-height: 1; }
.markettile__name { font-weight: var(--fw-bold); }
/* markup emits __lang; __local kept as an alias so either name renders */
.markettile__lang, .markettile__local {
  display: block; font-size: var(--fs-200); color: var(--c-ink-3); font-weight: var(--fw-normal);
}

/* ------------------------------------------------- language switcher (.lang-switch)
   9 locales will not fit as words in the bar, so the desktop bar shows flag
   chips with the language name kept for assistive tech; the burger menu shows
   the full flag + name rows. */
.lang-switch { display: flex; align-items: center; gap: var(--sp-1); flex: 0 0 auto; flex-wrap: wrap; }
.lang-switch a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-width: 40px; min-height: 40px; padding: 0 var(--sp-2);
  border-radius: var(--r-sm); text-decoration: none;
  color: var(--nav-ink); font-size: var(--fs-300); font-weight: var(--fw-semi);
  border: 1px solid transparent;
}
.lang-switch a:hover { background: rgba(255, 255, 255, .12); color: var(--nav-ink-hover); }
.lang-switch a[aria-current] {
  background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .3);
  color: var(--nav-ink-hover);
}
.lang__flag { font-size: 1.1rem; line-height: 1; }
@media (min-width: 900px) {
  .lang-switch .lang__name {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
}
@media (max-width: 899px) {
  .lang-switch {
    order: 5; flex-basis: 100%; margin-top: var(--sp-3); padding-top: var(--sp-3);
    border-top: 1px solid rgba(255, 255, 255, .14);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--sp-1);
  }
  .lang-switch a { justify-content: flex-start; min-height: 44px; }
}

.thanks { padding: var(--sp-10) 0; text-align: center; }
.thanks__icon {
  width: 72px; height: 72px; margin: 0 auto var(--sp-5); border-radius: var(--r-pill);
  background: var(--c-brand-tint); color: var(--c-brand);
  display: flex; align-items: center; justify-content: center;
}
.thanks p { max-width: 56ch; margin-inline: auto; color: var(--c-ink-2); }
.thanks .btn { margin-top: var(--sp-6); }

/* ===================================================================== 16. sticky bar */
.stickybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
  display: none; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom, 0px));
  background: var(--c-brand); box-shadow: 0 -6px 20px rgba(16, 26, 48, .25);
}
.stickybar .btn { flex: 1; min-height: 48px; }
@media (max-width: 767px) { .stickybar:not([hidden]) { display: flex; } }

/* ===================================================================== 17. footer */
.site-footer {
  background: var(--c-brand); color: #c5d3e6;
  padding: var(--sp-9) 0 var(--sp-7); margin-top: var(--sp-8);
  font-size: var(--fs-300);
}
.footer__grid { display: grid; gap: var(--sp-6); }
.footer__brand img { height: 40px; width: auto; margin-bottom: var(--sp-3); }
.footer__brand p { color: #a9bbd4; }
.site-footer a { color: #e2eaf6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer__nav ul { list-style: none; display: grid; gap: var(--sp-2); margin: 0; }
.footer__nav a { display: inline-flex; align-items: center; min-height: 32px; }
.footer__disclosure,
.footer__responsible {
  grid-column: 1 / -1;
  font-size: var(--fs-200); line-height: 1.55; color: #a9bbd4;
  padding-top: var(--sp-4); border-top: 1px solid rgba(255, 255, 255, .14);
}
.footer__responsible { padding-top: 0; border-top: 0; }
.footer__copy { grid-column: 1 / -1; font-size: var(--fs-200); color: #a9bbd4; }
@media (min-width: 800px) {
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ===================================================================== 18. consent banner */
.consent-banner, .consent#consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  padding: var(--sp-4) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface); border-top: 1px solid var(--c-line);
  box-shadow: 0 -10px 30px rgba(16, 26, 48, .18);
}
.consent__box {
  max-width: var(--wrap); margin-inline: auto;
  display: grid; gap: var(--sp-4); align-items: center;
}
.consent__text { font-size: var(--fs-300); color: var(--c-ink-2); }
.consent__text a { color: var(--c-brand); }
.consent__actions { display: grid; gap: var(--sp-3); grid-auto-flow: column; grid-auto-columns: 1fr; }
/* Accept and Reject are visually equal in weight and size */
.consent__actions .btn { min-height: 48px; font-size: var(--fs-300); padding-inline: var(--sp-4); }
@media (min-width: 800px) {
  .consent__box { grid-template-columns: minmax(0, 1fr) auto; }
  .consent__actions { grid-auto-columns: minmax(150px, auto); }
}

/* ===================================================================== 19. icons (data-URI masks; icons.svg mirrors these as <symbol>s) */
:root {
  --i-check: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20.3 5.7a1 1 0 0 1 0 1.4l-9.9 9.9a1 1 0 0 1-1.4 0l-5.3-5.3a1 1 0 1 1 1.4-1.4l4.6 4.6 9.2-9.2a1 1 0 0 1 1.4 0z"/></svg>');
  --i-heart: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 21s-8-4.9-8-10.4A4.6 4.6 0 0 1 12 7.6 4.6 4.6 0 0 1 20 10.6C20 16.1 12 21 12 21z"/></svg>');
  --i-chevron: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.6 4.6 16 12l-7.4 7.4-1.4-1.4L13.2 12 7.2 6z"/></svg>');
  --i-shield: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 2 4 5.5v6c0 5 3.4 9.3 8 10.5 4.6-1.2 8-5.5 8-10.5v-6z"/></svg>');
  --i-menu: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>');
}
.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: 0 0 auto; }

/* ===================================================================== 20. print */
@media print {
  .site-header, .stickybar, .consent, .chips, .toc, .skip, .logostrip { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .hero { background: none !important; color: #000; padding: 0 0 12pt; }
  .hero h1, .hero__sub { color: #000; }
  .deal, .repex, .faq__item { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  .faq__item[open] .faq__a, .faq__a { display: block !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}