/* ============================================================
   WWScore — homepage (marketing) stylesheet
   Recreated from the Claude Design handoff (React + Tailwind
   prototype) in plain CSS, using the WWScore design tokens.
   No CDN, no build step — matches the app's vendored stack.

   HARD BRAND RULES baked in:
     - Narrow palette: ink / blue / paper / surface / stone /
       hairline / track. One accent (Signaalblauw).
     - red & green are RESULT-ONLY semantics (ok/warn/over) —
       never brand, nav, buttons or decoration.
     - sans = Hanken Grotesk (UI/text); mono = IBM Plex Mono
       (ALL numbers, tabular).
   ============================================================ */

/* Tokens, fonts, base reset, focus ring, .shell, wordmark, eyebrow, chips and
   buttons now live in the shared brand.css (linked before this file). */

/* ============================================================
   Header
   ============================================================ */
.site-header {
  position: sticky; top: 0; z-index: 20;
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.site-header__inner {
  max-width: var(--shell); margin-inline: auto; padding-inline: 28px;
  height: 64px; display: flex; align-items: center; justify-content: space-between;
}
.site-nav { display: flex; align-items: center; gap: 28px; }
.site-nav__links { display: none; align-items: center; gap: 28px; }
.site-nav__link {
  font-family: var(--font-sans); font-size: 14px; color: var(--ink-80);
  transition: color .2s var(--ease);
}
.site-nav__link:hover { color: var(--ink); }
@media (min-width: 640px) { .site-nav__links { display: flex; } }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  max-width: var(--shell); margin-inline: auto; padding: 64px 28px 56px;
  display: grid; align-items: center; gap: 48px; grid-template-columns: 1fr;
}
.hero__title {
  font-family: var(--font-sans); font-weight: 600; color: var(--ink);
  margin: 12px 0 0; letter-spacing: -0.02em; font-size: 34px; line-height: 1.08;
}
.hero__tagline {
  font-family: var(--font-sans); font-weight: 500; color: var(--blue);
  margin: 12px 0 0; font-size: 20px; letter-spacing: -0.01em;
}
.hero__lede {
  font-family: var(--font-sans); color: var(--ink-80); margin: 20px 0 0;
  max-width: 460px; font-size: 17px; line-height: 1.55;
}
.hero__cta { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; }
.hero__trust { margin-top: 28px; display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 8px; }
.hero__trust span { font-family: var(--font-sans); font-size: 13px; color: var(--stone); }

/* meter card */
.meter-card {
  background: var(--surface); border: 1px solid var(--hairline);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 24px;
}
.meter-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 4px; }
.meter-card__top-label { font-family: var(--font-mono); font-size: 13px; color: var(--stone); }
.meter-card__wrap { display: flex; justify-content: center; padding: 8px 0 4px; }
.meter-card__hint { text-align: center; font-family: var(--font-sans); font-size: 13px; color: var(--stone); margin: -4px 0 20px; }
.meter-card__hint .mono { font-size: 13px; }
.meter-card__payoff {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding-top: 20px; border-top: 1px solid var(--hairline);
}
.meter-card__rent-label { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.meter-card__rent {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500;
  color: var(--ink); line-height: 1.05; font-size: 38px;
}
.meter-card__rent-sub { font-family: var(--font-sans); font-size: 12.5px; color: var(--stone); margin-top: 4px; }
.meter-card__link {
  font-family: var(--font-sans); font-size: 14px; color: var(--blue);
  white-space: nowrap; padding-bottom: 4px; transition: color .2s var(--ease);
}
.meter-card__link:hover { color: var(--blue-strong); text-decoration: underline; }
.meter-card__note { font-family: var(--font-sans); font-size: 12px; color: var(--ink-60); margin: 16px 0 0; line-height: 1.5; }

/* ---------- ScoreMeter (built by home.js) ---------- */
.scoremeter { position: relative; }
.scoremeter__surface { border-radius: var(--radius-lg); touch-action: none; }
.scoremeter__surface[data-interactive="true"] { cursor: pointer; }
.scoremeter__surface[data-dragging="true"] { cursor: grabbing; }
.scoremeter__svg { display: block; }
.scoremeter__readout {
  position: absolute; left: 0; right: 0; text-align: center; pointer-events: none;
}
.scoremeter__value {
  font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink);
  line-height: 1; letter-spacing: -0.02em; font-weight: 500;
}
.scoremeter__unit { font-family: var(--font-sans); color: var(--stone); margin-top: 4px; }
.scoremeter__boundary {
  position: absolute; font-family: var(--font-mono); color: var(--stone); font-size: 11px;
  pointer-events: none; white-space: nowrap; transform: translate(-30%, -130%);
}

/* ============================================================
   Hoe het werkt
   ============================================================ */
.howitworks { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.howitworks__inner { max-width: var(--shell); margin-inline: auto; padding: 64px 28px; }
.section-h2 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin: 8px 0 0; font-size: 28px; letter-spacing: -0.01em; }
.howitworks__lede { font-family: var(--font-sans); color: var(--ink-80); margin: 8px 0 40px; font-size: 16px; }
/* Numbered connected flow — a process on an instrument, not three cards */
.flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; grid-template-columns: 1fr; }
.flow-step { position: relative; }
.flow-step__num {
  display: block; font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  font-weight: 500; font-size: 40px; line-height: 1; color: var(--blue);
}
.flow-step__title { font-family: var(--font-sans); font-weight: 600; color: var(--ink); font-size: 18px; margin: 12px 0 6px; }
.flow-step__desc { font-family: var(--font-sans); color: var(--ink-80); font-size: 14.5px; line-height: 1.55; margin: 0; max-width: 34ch; }

/* ============================================================
   Breakdown — "De Onderbouwing"
   ============================================================ */
.breakdown {
  max-width: var(--shell); margin-inline: auto; padding: 64px 28px;
  display: grid; align-items: start; gap: 48px; grid-template-columns: 1fr;
}
.breakdown__why-h2 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin: 8px 0 0; font-size: 28px; letter-spacing: -0.01em; text-wrap: balance; }
.breakdown__why-p { font-family: var(--font-sans); color: var(--ink-80); margin: 16px 0 0; font-size: 16px; line-height: 1.55; max-width: 400px; }
.breakdown__why-p .warn { color: var(--warn); font-weight: 500; }

.ledger { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.ledger__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; }
.ledger__head-title { font-family: var(--font-sans); font-weight: 600; color: var(--ink); font-size: 16px; }
.ledger__head-note { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }
.ledger__row { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-top: 1px solid var(--hairline); }
.ledger__row--alt { background: var(--paper-deep); }
.ledger__row-label { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ledger__row-label > .label { font-family: var(--font-sans); font-size: 14.5px; color: var(--ink-80); }
.ledger__row-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: pre; }
.ledger__total { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-top: 1px solid var(--hairline); }
.ledger__total-label { font-family: var(--font-sans); font-weight: 600; color: var(--ink); font-size: 15px; }
.ledger__total-value { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 600; color: var(--ink); font-size: 22px; }

/* semantic result — the ONLY place red lives */
.result {
  margin-top: 16px; display: flex; align-items: center; gap: 16px;
  border-radius: var(--radius); padding: 16px 20px;
  background: var(--over-bg); border: 1px solid var(--over-border);
}
.result__amount { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--over); font-size: 26px; white-space: nowrap; }
.result__text { font-family: var(--font-sans); font-size: 14.5px; line-height: 1.45; color: #8E2E1E; }
.result__text strong { font-weight: 500; }
.result__text .nowrap { white-space: nowrap; }

/* ============================================================
   Neutraliteit
   ============================================================ */
.neutrality { background: var(--ink); }
.neutrality__inner { max-width: 860px; margin-inline: auto; padding: 72px 28px; text-align: center; }
.neutrality__eyebrow { font-family: var(--font-mono); font-size: 13px; color: #7E8AA0; }
.neutrality__h { font-family: var(--font-sans); font-weight: 600; color: #fff; margin: 16px 0 0; font-size: 27px; line-height: 1.32; letter-spacing: -0.01em; text-wrap: balance; }
.neutrality__p { font-family: var(--font-sans); margin: 20px auto 0; font-size: 16px; line-height: 1.55; max-width: 560px; color: #AEB6C4; }
.neutrality__cta { margin-top: 36px; display: flex; justify-content: center; }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--surface); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.faq__inner { max-width: 820px; margin-inline: auto; padding: 64px 28px; }
.faq__h2 { font-family: var(--font-sans); font-weight: 600; color: var(--ink); margin: 8px 0 28px; font-size: 28px; letter-spacing: -0.01em; }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  text-align: left; padding: 20px 0; cursor: pointer; background: none; border: none;
}
.faq__q-text { font-family: var(--font-sans); font-weight: 500; color: var(--ink); font-size: 17px; }
.faq__q-plus {
  font-family: var(--font-mono); color: var(--stone); font-size: 20px; line-height: 1; flex-shrink: 0;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.faq__q:hover .faq__q-plus { color: var(--ink); }
.faq__q[aria-expanded="true"] .faq__q-plus { transform: rotate(45deg); }
.faq__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); }
.faq__panel[data-open="true"] { grid-template-rows: 1fr; }
.faq__panel-inner { overflow: hidden; }
.faq__a { font-family: var(--font-sans); color: var(--ink-80); font-size: 15.5px; line-height: 1.6; padding-bottom: 24px; margin: 0; max-width: 680px; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer { background: var(--surface); border-top: 1px solid var(--hairline); }
.site-footer__inner { max-width: var(--shell); margin-inline: auto; padding: 56px 28px 36px; }
.site-footer__cols { display: grid; gap: 40px; grid-template-columns: 1fr; }
.site-footer__about { font-family: var(--font-sans); color: var(--stone); font-size: 14px; margin: 12px 0 0; max-width: 280px; line-height: 1.5; }
.site-footer__col-title { font-family: var(--font-mono); font-size: 12px; color: var(--stone); margin-bottom: 12px; }
.site-footer__list { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.site-footer__list a { font-family: var(--font-sans); font-size: 14px; color: var(--ink-80); transition: color .2s var(--ease); }
.site-footer__list a:hover { color: var(--ink); }
.site-footer__bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--hairline);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.site-footer__legal { font-family: var(--font-sans); font-size: 12.5px; color: var(--stone); max-width: 560px; line-height: 1.5; }
.site-footer__copy { font-family: var(--font-mono); font-size: 12px; color: var(--stone); }

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 640px) {
  .hero__title { font-size: 44px; }
  .hero__tagline { font-size: 22px; }
  .meter-card { padding: 32px; }
  .meter-card__rent { font-size: 42px; }
  .section-h2, .breakdown__why-h2, .faq__h2 { font-size: 30px; }
  .neutrality__h { font-size: 32px; }
  .flow { grid-template-columns: repeat(3, 1fr); }
  .flow-step:not(:last-child)::after {
    content: ""; position: absolute; top: 20px; left: 56px; right: -28px;
    height: 2px; background: var(--hairline);
  }
}

@media (min-width: 768px) {
  .hero { padding-top: 80px; padding-bottom: 64px; gap: 56px; grid-template-columns: 1.05fr 0.95fr; }
  .breakdown { grid-template-columns: 0.85fr 1.15fr; }
  .breakdown__why { padding-top: 8px; }
  .site-footer__cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}