/* ============================================================
   CADDIUM — publieke site, één samenhangend ontwerp
   ------------------------------------------------------------
   Vervangt styles.css op de publieke pagina's. De ingelogde app
   (/app/**) blijft op styles.css; hier staat niets voor .app-*.

   De vijf keuzes die het geheel bij elkaar houden:

   1. RADIUS-SCHAAL — drie stappen, nooit meer:
      pil (999px) voor wat je indrukt, 16px voor waar je in
      kijkt (kaarten, panelen, video), 10px voor wat je invult
      (velden, tegels). Nergens een vierde waarde.

   2. SCHADUWTAAL — één zachte, groengetinte schaduw in twee
      hoogtes (rust en zweven). Geen gloed, geen tweede soort.
      Nadruk komt van randen: het aanbevolen plan krijgt een
      gouden ring, niet een grotere schaduw.

   3. KNOPVORM — alle knoppen zijn pillen. Primair gevuld
      Fairway Green, secundair alleen een rand, ghost zonder
      rand, goud alleen als het hét accent van zijn oppervlak is.

   4. NADRUK — Champagne Gold is het enige accent en per
      oppervlak staat er hooguit één gouden element (de stip in
      de aankondigingspil, de ring om het aanbevolen plan, de
      sierlijnen op de analysevideo). Semantiek — betrouwbaarheid
      van een meting, statusvinkjes — blijft in de groenreeks en
      telt niet als accent. Waar goud tekst is, is het leesbaar
      goud #8F7434; sierlijnen mogen #C8A24B.

   5. TYPE-SCHAAL — Sora voor koppen en cijfers (600/700), Inter
      voor lopende tekst. display 40–60 / kop 28 / subkop 20 /
      body 16.5 / klein 14 / label 12 kapitaal met letterspatie.
      Alles wat een getal is staat in tabular-nums, zodat cijfers
      niet verspringen terwijl ze animeren.

   Grijzen zijn naar het groen getrokken, nooit neutraal. De
   grond is Off-white #F7F7F5. Alleen licht thema: de site is
   één merkwereld.
   ============================================================ */

/* Sora en Inter komen van onze eigen server, niet van Google. Drie redenen,
   in volgorde van gewicht:

   1. Een bezoek aan een Nederlandse site hoort geen IP-adres naar Google te
      sturen. Duitse rechters hebben daar al over geoordeeld; dit is geen
      theoretisch risico.
   2. `@import` is de traagste manier om iets te laden: de browser moet eerst
      deze stylesheet ophalen en lezen voordat hij weet dat er nog een bestand
      volgt. Twee ronden op het kritieke pad, voor tekst die meteen zichtbaar
      moet zijn.
   3. De bestanden stonden er al -- de pagina's preloaden ze zelfs. Ze bij
      Google ophalen zou betekenen dat we ze twee keer binnenhalen.

   Variabele fonts, dus één bestand dekt het hele gewichtsbereik. */
@font-face {
  font-family: "Sora";
  src: url("/static/fonts/sora-variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/static/fonts/inter-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --green: #0F3D2E;        /* Fairway Green — koppen, primaire knoppen */
  --sage: #8DAA8D;         /* stil ondersteunend */
  --ground: #F7F7F5;       /* Off-white — de grond */
  --ink: #1E1E1E;          /* Graphite — lopende tekst */
  --gold: #C8A24B;         /* Champagne Gold — sierlijnen, ring */
  --gold-text: #80672E;    /* leesbaar goud waar goud tekst is */

  --card: #FFFFFF;
  --card-soft: #F0F2EE;    /* tegels, velden — groengetint grijs */
  --border: #DDE3DC;       /* groengetinte rand */
  --border-strong: #C3CEC2;
  --text-muted: #55655B;   /* groengetint secundair grijs */
  --text-faint: #647167;
  --green-tint: #E4EBE3;   /* sage-waas voor chips, banden, zones */
  --gold-tint: #F2EBD9;    /* goudwaas — alleen voor waarschuwing/fout */
  --btn-text: #F7F7F5;

  --shadow-rest: 0 1px 2px rgba(15, 61, 46, .05), 0 6px 18px rgba(15, 61, 46, .07);
  --shadow-float: 0 2px 4px rgba(15, 61, 46, .06), 0 14px 34px rgba(15, 61, 46, .11);

  --r-pill: 999px;
  --r-card: 16px;
  --r-field: 10px;

  --font-head: "Sora", "Trebuchet MS", sans-serif;
  --font-body: "Inter", "Segoe UI", sans-serif;

  /* Dezelfde maatschaal als voorheen: pagina's gebruiken deze
     tokens inline (var(--space-5), var(--section-y)). */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;
  --section-y: clamp(72px, 9vw, 128px);

  --nav-h: 72px;
  --wrap-narrow: 680px;
  --wrap: 860px;
  --wrap-wide: 1180px;
}

/* ---------- grond ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: clip; }  /* clip, niet hidden: hidden breekt position: sticky */

body.public-site {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--green);
  margin: 0 0 var(--space-3);
  line-height: 1.15;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 700; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw, 1.75rem); font-weight: 600; letter-spacing: -0.01em; }
h3 { font-size: 1.25rem; font-weight: 600; }
h4 { font-size: 1.05rem; font-weight: 600; }

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

a { color: var(--green); text-underline-offset: 2px; }
a:hover { color: var(--gold-text); }

img, video, svg { max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

::selection { background: var(--green-tint); }

/* ---------- kaders ---------- */

.wrap,
.wrap-wide,
.wrap-narrow {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-5);
}
.wrap { max-width: var(--wrap); }
.wrap-wide { max-width: var(--wrap-wide); }
.wrap-narrow { max-width: var(--wrap-narrow); }

.section { padding-block: var(--section-y); }
.main-flush { padding-top: 0; }

.text-center { text-align: center; }
.muted { color: var(--text-muted); }
.small { font-size: 0.875rem; }

/* Toestandsklasse die overal door JS wordt gezet; !important zodat hij
   ook wint van display-regels met gelijke specificiteit (.form-page-grid,
   .preview, …), ongeacht volgorde in dit bestand. */
.hidden { display: none !important; }

/* Twee namen, bewust exact dezelfde regel: beide staan in de markup. */
.visually-hidden,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  transform: translateY(-200%);
  background: var(--card);
  color: var(--green);
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-float);
  text-decoration: none;
}
.skip-link:focus-visible { transform: none; }

/* ---------- sectiekoppen ---------- */

.section-eyebrow,
.hero-eyebrow,
.auth-eyebrow {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: var(--space-2);
}

.section-heading,
.pricing-section-heading,
.trial-section-heading { margin-bottom: var(--space-6); }

.section-heading-center {
  text-align: center;
  margin-inline: auto;
  max-width: 44rem;
}

.section-lead {
  color: var(--text-muted);
  max-width: 44rem;
  font-size: 1.1rem;
}
.section-heading-center .section-lead { margin-inline: auto; }

.section-title { margin-bottom: var(--space-4); }

.subheading {
  color: var(--text-muted);
  font-size: 1.1rem;
  max-width: 44rem;
}

/* ---------- knoppen: allemaal pillen ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.72rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--green);
  color: var(--btn-text);
  border-color: var(--green);
}
.btn-primary:hover { background: #14503C; border-color: #14503C; color: var(--btn-text); }

.btn-secondary {
  background: transparent;
  color: var(--green);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--green); color: var(--green); }

.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: transparent;
}
.btn-ghost:hover { background: var(--green-tint); color: var(--green); }

/* Goud gevuld: alleen inzetten als hét ene gouden element van zijn
   oppervlak (de afsluitende CTA op donkergroen). */
.btn-gold {
  background: var(--gold);
  color: var(--green);
  border-color: var(--gold);
}
.btn-gold:hover { background: #D4B15F; border-color: #D4B15F; color: var(--green); }

.btn-large { padding: 0.9rem 2rem; font-size: 1.05rem; }
.btn-small { padding: 0.45rem 1.1rem; font-size: 0.85rem; }

/* Knop die zich als tekstlink gedraagt (in lopende zinnen). */
.link-btn {
  display: inline;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.link-btn:hover { color: var(--gold-text); }

/* ---------- navigatie ---------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ground);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-nav.is-scrolled {
  border-bottom-color: var(--border);
  box-shadow: var(--shadow-rest);
}

.nav-bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--nav-h);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: none;
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.brand-emblem,
.brand-icon-crop {
  display: inline-flex;
  width: 34px;
  height: 34px;
  border-radius: var(--r-field);
  overflow: hidden;
  flex: none;
}
.brand-emblem img,
.brand-icon-crop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.brand-wordmark { display: inline-flex; }
.brand-wordmark img { height: 22px; width: auto; }
.site-nav .brand-emblem--official { width: 42px; height: 42px; border-radius: 11px; }
.site-nav .brand-wordmark--official img { width: auto; height: 30px; }

.nav-links { margin-inline: auto; }
.nav-items {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-items a,
.nav-sub-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  background: none;
  border: none;
  padding: 0.45rem 0.85rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  white-space: nowrap;
}
.nav-items a:hover,
.nav-sub-toggle:hover { background: var(--green-tint); color: var(--green); }

.nav-items a[aria-current="page"],
.nav-items .active {
  color: var(--green);
  font-weight: 600;
  background: var(--green-tint);
}

.nav-item.has-sub { position: relative; }
.nav-sub-toggle svg { transition: transform .15s ease; }
.nav-sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.nav-sub {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 240px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  padding: var(--space-2);
  margin: 0;
  list-style: none;
  z-index: 10;
}
.nav-sub[hidden] { display: none; }
.nav-sub-link {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-field);
  white-space: normal;
}
.nav-sub .nav-sub-link[aria-current="page"],
.nav-sub .active { background: var(--green-tint); color: var(--green); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-left: auto;
  flex: none;
}

.lang-picker select {
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.7rem;
  cursor: pointer;
}

.nav-auth { display: inline-flex; align-items: center; }
.nav-login-link {
  display: inline-flex;
  align-items: center;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  padding: 0.45rem 1rem;
  border-radius: var(--r-pill);
}
.nav-login-link:hover { background: var(--green-tint); color: var(--green); }

.nav-cta-btn { padding: 0.55rem 1.25rem; font-size: 0.9rem; }

/* Hamburger: drie streepjes die naar een kruis draaien. */
.nav-toggle-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  cursor: pointer;
  flex: none;
}
.nav-toggle-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: var(--r-pill);
  background: var(--ink);
  transition: transform .2s ease, opacity .2s ease;
}
.is-menu-open .nav-toggle-btn span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.is-menu-open .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.is-menu-open .nav-toggle-btn span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-backdrop { display: none; }

/* Mobiel/tablet: lade van rechts. Breekpunt 779px is gedeeld met
   shared.js — verander je hem hier, verander hem daar ook. */
@media (max-width: 779px) {
  .nav-desktop-only { display: none; }
  .nav-toggle-btn { position: relative; z-index: 70; display: inline-flex; }
  .site-nav .brand-emblem--official { width: 34px; height: 34px; border-radius: 9px; }
  .site-nav .brand-wordmark--official img { height: 27px; }

  .nav-links {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(340px, 88vw);
    margin: 0;
    background: var(--card);
    padding: calc(var(--nav-h) + var(--space-4)) var(--space-5) var(--space-6);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .25s ease;
    z-index: 60;
  }
  .is-menu-open .nav-links { transform: none; box-shadow: var(--shadow-float); }

  .nav-items {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  .nav-items a,
  .nav-sub-toggle {
    width: 100%;
    justify-content: space-between;
    padding: 0.7rem 0.85rem;
  }

  .nav-item.has-sub { position: static; }
  .nav-sub {
    position: static;
    min-width: 0;
    border: none;
    box-shadow: none;
    background: var(--card-soft);
    padding: var(--space-2);
    margin-top: var(--space-1);
  }

  .nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    border: none;
    background: rgba(15, 61, 46, .45);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    z-index: 55;
  }
  .is-menu-open .nav-backdrop { opacity: 1; pointer-events: auto; }
}

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

.hero { position: relative; }

.hero-home {
  display: flex;
  align-items: center;
  min-height: clamp(540px, 72vh, 760px);
  overflow: hidden;
  padding-block: var(--space-8);
}
.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Donkergroene waas van links: houdt de tekst leesbaar en het beeld groen. */
.hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(10, 29, 22, .85) 0%,
    rgba(10, 29, 22, .6) 45%,
    rgba(10, 29, 22, .18) 100%);
  pointer-events: none;
}
.hero-layout { position: relative; z-index: 1; }
.hero-copy { max-width: 40rem; }

.hero-home h1 { color: var(--ground); }
.hero-home .hero-eyebrow { color: var(--sage); }
.hero-lead {
  color: rgba(247, 247, 245, .88);
  font-size: 1.15rem;
  max-width: 34rem;
  margin-bottom: var(--space-6);
}

/* De aankondigingspil: de gouden stip is het ene accent van dit oppervlak. */
.announce-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid rgba(247, 247, 245, .35);
  border-radius: var(--r-pill);
  background: rgba(247, 247, 245, .1);
  color: var(--ground);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.35rem 1rem 0.35rem 0.8rem;
  margin-bottom: var(--space-5);
}
.announce-pill:hover { border-color: rgba(247, 247, 245, .7); color: var(--ground); }
.announce-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--gold);
  flex: none;
}
.announce-more { color: var(--gold); font-weight: 600; }

/* Paginakop op de binnenpagina's: lichte sage-waas, geen foto. */
.page-hero {
  background: var(--green-tint);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(48px, 7vw, 96px);
}
.page-hero-inner { max-width: var(--wrap-wide); }
.page-hero-lead {
  color: var(--text-muted);
  font-size: 1.15rem;
  max-width: 42rem;
}
/* De knoppenrij onder een paginahero. Wrapt op smalle schermen in plaats van
   de pagina horizontaal te laten scrollen. */
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* ---------- store-badges (in de hero, op donker) ---------- */

.store-badges {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(247, 247, 245, .1);
  border: 1px solid rgba(247, 247, 245, .35);
  border-radius: var(--r-pill);
  color: var(--ground);
  padding: 0.55rem 1.3rem 0.55rem 1rem;
  cursor: pointer;
  text-align: left;
}
.store-badge:disabled { opacity: .55; cursor: not-allowed; }
.store-badge-icon { width: 26px; height: 26px; flex: none; }
.store-badge-copy { display: flex; flex-direction: column; line-height: 1.25; }
.store-badge-copy small { font-size: 0.68rem; color: rgba(247, 247, 245, .75); }
.store-badge-copy strong { font-family: var(--font-head); font-size: 0.95rem; font-weight: 600; }
.store-coming-soon { font-size: 0.85rem; color: rgba(247, 247, 245, .75); }

/* ---------- vertrouwensband ---------- */

.trust-band {
  background: var(--green-tint);
  border-block: 1px solid var(--border);
  padding-block: var(--space-6);
}
.trust-band-layout { display: grid; gap: var(--space-5); }
.trust-band-title {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--green);
  margin: 0;
}
.trust-band-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
  list-style: none;
  margin: 0;
  padding: 0;
}
.trust-band-grid li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.trust-band-grid svg {
  width: 26px;
  height: 26px;
  flex: none;
  color: var(--sage);
}

/* ---------- kaart, badge, chips ---------- */

.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.8rem;
  background: var(--green-tint);
  color: var(--green);
}
.badge-muted { background: var(--card-soft); color: var(--text-faint); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.85rem;
  background: var(--green-tint);
  color: var(--green);
}
/* Waarschuwing op een chip: goud is de enige warme toon in het palet. */
.chip.warn { background: var(--gold-tint); color: var(--gold-text); }

/* Klein rond kleurpunt; de kleur zet JS inline. */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--sage);
  flex: none;
}

/* Betrouwbaarheid van een meting: semantiek, dus groenreeks — geen goud,
   geen stoplicht. Hoe onzekerder, hoe stiller het element. */
.rel-high { background: var(--green-tint); color: var(--green); }
.rel-medium { background: var(--card-soft); color: var(--text-muted); }
.rel-low {
  background: transparent;
  color: var(--text-faint);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}

.confidence {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.85rem;
  font-variant-numeric: tabular-nums;
}

/* ---------- prijzen ---------- */

.pricing-main { padding-block: var(--space-7) var(--section-y); }
.pricing-main > section + section { margin-top: var(--section-y); }

.pricing-plans .pricing-section-heading,
.pricing-products .pricing-section-heading,
.pricing-club .pricing-section-heading {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.pricing-section-heading p { color: var(--text-muted); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-5);
  align-items: stretch;
}
.pricing-grid-three { max-width: 1060px; margin-inline: auto; }

.price-card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: 1.75rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* Nadruk uit keuze 2: een gouden ring, niet een grotere schaduw.
   Dit is het ene gouden element van het prijzenoppervlak. */
.price-card.highlight {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), var(--shadow-float);
}

.price-card-loading {
  min-height: 320px;
  background: var(--card-soft);
  border-color: var(--border);
  box-shadow: none;
  animation: skeleton-breathe 1.4s ease-in-out infinite alternate;
}
@keyframes skeleton-breathe {
  from { opacity: 1; }
  to { opacity: .55; }
}

.price-card-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 1.6rem;
}
.price-card-eyebrow {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--green);
}
.price-card-choice {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.price-card-choice select { flex: 1; }

.price-card-cost {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.price-card-unit,
.price-card-term {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.price-card-total {
  font-size: 0.85rem;
  color: var(--text-faint);
  min-height: 1.3em;
  font-variant-numeric: tabular-nums;
}
.plan-price-free {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--ink);
}

.price-card-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-size: 0.95rem;
  color: var(--text-muted);
}
.price-card-features li {
  position: relative;
  padding-left: 1.4rem;
}
.price-card-features li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}
.price-card-blurb { font-size: 0.9rem; color: var(--text-muted); }
.price-card-excludes {
  font-size: 0.85rem;
  color: var(--text-faint);
}
.price-card-excludes li::before { content: "\2013"; color: var(--text-faint); font-weight: 400; }

.price-card .btn { margin-top: auto; }

/* Stripe is nog niet live: dit staat waar de betaalknop hoort. Een
   eerlijke lege plek met het gewicht van een uitgeschakelde knop —
   geen badge die aandacht vraagt. */
.plan-coming-soon {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.5rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--border);
  color: var(--text-faint);
  font-size: 0.95rem;
  font-weight: 600;
  background: var(--card-soft);
  cursor: not-allowed;
}
.plan-coming-soon-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* -- termijnschakelaar: schuivende pil, staat standaard op jaar -- */

.term-toggle {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card);
  padding: 4px;
  margin-top: var(--space-3);
}
.term-toggle-pill {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: var(--r-pill);
  background: var(--green);
  transition: transform .22s ease;
}
.term-toggle[data-term="month"] .term-toggle-pill { transform: translateX(0); }
.term-toggle[data-term="year"] .term-toggle-pill { transform: translateX(100%); }

.term-toggle button {
  position: relative;
  z-index: 1;
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.5rem 1.4rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  color: var(--text-muted);
  transition: color .22s ease;
  white-space: nowrap;
}
.term-toggle button[aria-pressed="true"] { color: var(--btn-text); }
.term-save {
  display: inline-block;
  margin-left: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--gold-text);
}
.term-toggle button[aria-pressed="true"] .term-save { color: var(--gold); }

/* -- hoe je abonnement werkt -- */

.how-credits-work { max-width: var(--wrap); margin-inline: auto; }
.how-credits-work h2 { text-align: center; margin-bottom: var(--space-6); }
.how-credits-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-5);
}
.how-credits-step {
  background: var(--card-soft);
  border-radius: var(--r-field);
  padding: var(--space-5);
  font-size: 0.95rem;
  color: var(--text-muted);
}
.how-credits-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-pill);
  background: var(--green);
  color: var(--btn-text);
  font-family: var(--font-head);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-3);
}

/* -- gratis proefswing-band -- */

.welcome-credit-band {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  background: var(--green);
  color: var(--ground);
  border-radius: var(--r-card);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: var(--wrap);
  margin-inline: auto;
}
.welcome-credit-band h2 { color: var(--ground); }
.welcome-credit-band p { color: rgba(247, 247, 245, .8); }
/* Het ene gouden element van dit oppervlak: het cijfer 1. */
.welcome-credit-number {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(3.5rem, 7vw, 5rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  flex: none;
}

/* -- eerlijk geteld + club -- */

.pricing-operations { max-width: var(--wrap); margin-inline: auto; }
.pricing-operation-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.club-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-5);
  max-width: 1060px;
  margin-inline: auto;
}
.club-min-seats {
  text-align: center;
  margin-top: var(--space-5);
  font-variant-numeric: tabular-nums;
}
.club-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-5);
  flex-wrap: wrap;
  margin-top: var(--space-5);
  text-align: center;
}
.club-selling-point {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 34rem;
  margin: 0;
}

/* ---------- FAQ ---------- */

.faq-section { padding-block: var(--section-y); }
.faq-container { max-width: var(--wrap-narrow); margin-inline: auto; }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item:first-of-type { border-top: 1px solid var(--border); }
.faq-item h3 { margin: 0; }

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  background: none;
  border: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--ink);
  padding: 1.1rem 0.25rem;
  cursor: pointer;
}
.faq-question:hover { color: var(--green); }

/* Plusje uit twee streepjes; draait naar een kruis bij openen. */
.faq-icon {
  position: relative;
  width: 16px;
  height: 16px;
  flex: none;
  transition: transform .2s ease;
}
.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: var(--sage);
  border-radius: var(--r-pill);
  transform: translate(-50%, -50%);
}
.faq-icon::before { width: 16px; height: 2px; }
.faq-icon::after { width: 2px; height: 16px; }
.faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }

.faq-answer {
  padding: 0 0.25rem 1.2rem;
  color: var(--text-muted);
  max-width: 40rem;
}
.faq-answer[hidden] { display: none; }

/* Letter-voor-letter-onthulling: elk teken wacht --i keer 11ms. */
.faq-char {
  opacity: 0;
  filter: blur(4px);
  transition: opacity .3s ease, filter .3s ease;
  transition-delay: calc(var(--i) * 11ms);
}
.faq-answer.faq-revealed .faq-char { opacity: 1; filter: blur(0); }

/* ---------- formulieren ---------- */

.field,
.field-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  text-align: left;
}
.field-group { gap: var(--space-4); }

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-4);
}

.public-site label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.public-site input,
.public-site select,
.public-site textarea {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--ground);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: 0.65rem 0.85rem;
  width: 100%;
}
.public-site input:focus-visible,
.public-site select:focus-visible,
.public-site textarea:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 0;
  border-color: var(--green);
}
.public-site ::placeholder { color: var(--text-faint); }
.public-site textarea { min-height: 7rem; resize: vertical; }
.public-site input[type="checkbox"],
.public-site input[type="radio"] {
  width: auto;
  accent-color: var(--green);
}
.public-site progress { accent-color: var(--green); width: 100%; }

.form-hint,
.field-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
}
/* Geen rood in het palet: fouten gebruiken de enige warme toon,
   leesbaar goud, plus gewicht. */
.form-error {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gold-text);
}
.form-status {
  min-height: 1.4em;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin: 0;
}

.form-page-grid {
  display: grid;
  gap: var(--space-3);
}
.form-page-grid label { margin-top: var(--space-2); }
.form-page-grid .btn { margin-top: var(--space-4); justify-self: start; }
.form-page-grid .auth-submit { justify-self: stretch; }

/* "Doorgaan met Google" volgens Googles knopregels: wit vlak, dun neutraal
   randje en het vierkleurige G-logo. Bewust geen eigen merkkleuren — de
   herkenbaarheid ís de functie van deze knop. */
.form-page-grid .auth-google { justify-self: stretch; margin-top: var(--space-2); }
.auth-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: #1f1f1f;
  border: 1px solid #747775;
}
.auth-google:hover { background: #f8f9fa; }
.auth-google-logo { width: 20px; height: 20px; flex: 0 0 auto; }

.password-field { position: relative; }
.password-field input { padding-right: 4.5rem; }
.password-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.password-toggle:hover { background: var(--green-tint); color: var(--green); }

.inline-check {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-muted);
}

/* ---------- inlogpagina ---------- */

.auth-layout {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--space-6);
  align-items: stretch;
  max-width: var(--wrap-wide);
  margin-inline: auto;
  padding: var(--space-7) var(--space-5);
}

/* De verhaalkolom: diep Fairway Green, het merkmoment van de pagina. */
.auth-story {
  background: var(--green);
  border-radius: var(--r-card);
  color: var(--ground);
  display: flex;
  align-items: center;
  padding: clamp(2rem, 4vw, 3.5rem);
}
.auth-story-content { max-width: 30rem; }
.auth-story h1 {
  color: var(--ground);
  font-size: clamp(1.75rem, 3.5vw, 2.4rem);
}
.auth-story p { color: rgba(247, 247, 245, .82); }
/* Het ene gouden element van dit oppervlak. */
.auth-eyebrow { color: var(--gold); }

.auth-benefits {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.auth-benefits li {
  position: relative;
  padding-left: 1.6rem;
  color: rgba(247, 247, 245, .9);
}
.auth-benefits li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}
.auth-credit-note {
  font-size: 0.9rem;
  color: rgba(247, 247, 245, .7);
  border-top: 1px solid rgba(247, 247, 245, .2);
  padding-top: var(--space-4);
}

.auth-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: clamp(1.75rem, 4vw, 2.75rem);
}
.auth-panel-heading { margin-bottom: var(--space-5); }
.auth-panel-heading p { color: var(--text-muted); }

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--card-soft);
  padding: 4px;
  margin-bottom: var(--space-5);
}
.auth-tab {
  border: none;
  background: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-muted);
  padding: 0.5rem 1rem;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.auth-tab.active { background: var(--green); color: var(--btn-text); }

.auth-switch {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.auth-inline-action { text-align: center; }
.auth-privacy {
  font-size: 0.85rem;
  color: var(--text-faint);
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
  margin-top: var(--space-5);
}

/* ---------- proefpagina /probeer ---------- */

.probeer-main {
  display: grid;
  gap: var(--space-5);
  padding-block: var(--space-7) var(--section-y);
}
#step-result { display: grid; gap: var(--space-5); }

.probeer-step-heading {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  margin-bottom: var(--space-5);
}
.step-number {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1.2;
  color: var(--sage);
  font-variant-numeric: tabular-nums;
  flex: none;
}
.probeer-step-heading p { color: var(--text-muted); }

/* De cameravraag van /probeer staat vóór de dropzone en gebruikt dezelfde
   keuzekaartjes als de rest van deze stylesheet (.flight-option): zacht vlak,
   groene rand zodra er gekozen is. */
.trial-viewpoint {
  border: 0;
  margin: 0 0 var(--space-5);
  padding: 0;
}
.trial-viewpoint legend {
  padding: 0;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}
.trial-viewpoint-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
.trial-viewpoint-options small { font-weight: 400; }
.trial-viewpoint .field-hint { margin-top: var(--space-2); }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-card);
  background: var(--card-soft);
  padding: var(--space-7) var(--space-5);
  text-align: center;
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease;
}
.dropzone:hover,
.dropzone:focus-visible,
.dropzone.active {
  border-color: var(--green);
  background: var(--green-tint);
}
.dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
}
.upload-icon { width: 40px; height: 40px; color: var(--sage); }
.dropzone-title { font-weight: 600; color: var(--ink); margin: 0; }
.dropzone-hint { font-size: 0.85rem; color: var(--text-faint); margin: 0; }

.upload-progress {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
  font-size: 0.9rem;
  color: var(--text-muted);
}

.preview { margin-top: var(--space-5); }
.preview video {
  width: 100%;
  border-radius: var(--r-card);
  background: var(--ink);
}
.preview-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-3);
  flex-wrap: wrap;
}
.preview-meta h3 { margin: 0; font-size: 1rem; color: var(--ink); }

.probeer-upload-card > .btn { margin-top: var(--space-5); }

.probeer-analysing { text-align: center; }
.analysis-pulse {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--r-pill);
  background: var(--green);
  margin-bottom: var(--space-4);
  animation: pulse-breathe 1.2s ease-in-out infinite alternate;
}
@keyframes pulse-breathe {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(1.6); opacity: .45; }
}

.progress-track {
  height: 8px;
  border-radius: var(--r-pill);
  background: var(--card-soft);
  overflow: hidden;
  margin-top: var(--space-5);
}
.progress-bar {
  height: 100%;
  width: 0;
  border-radius: var(--r-pill);
  background: var(--green);
  transition: width .3s ease;
}

.probeer-sticky-cta {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-3));
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  padding: var(--space-3) var(--space-5);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}

.summary-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.summary-head h2 { margin: 0; }
.summary-text { color: var(--text-muted); margin-bottom: var(--space-4); }

.trial-finding {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  padding-block: var(--space-4);
}
.trial-finding + .trial-finding { border-top: 1px solid var(--border); }
.trial-finding h3 { margin-bottom: var(--space-1); font-size: 1.05rem; }
.trial-finding p { color: var(--text-muted); }
.trial-finding-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-pill);
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
  flex: none;
}
.trial-finding-positive .trial-finding-icon { background: var(--green-tint); color: var(--green); }
.trial-finding-focus .trial-finding-icon { background: var(--green); color: var(--btn-text); }
.trial-effect { font-size: 0.9rem; color: var(--text-faint); }

.trial-recording-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-6);
}
.trial-recording-grid h3 { font-size: 1rem; }

.trial-upgrade { text-align: center; }
.trial-upgrade .section-eyebrow { color: var(--text-faint); }
.trial-unlock-list {
  list-style: none;
  margin: var(--space-4) auto var(--space-5);
  padding: 0;
  display: inline-flex;
  flex-direction: column;
  gap: 0.55rem;
  text-align: left;
}
.trial-unlock-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--text-muted);
}
.trial-unlock-list li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}
.trial-upgrade-note { margin-top: var(--space-3); }

.probeer-dialog {
  border: none;
  border-radius: var(--r-card);
  box-shadow: var(--shadow-float);
  background: var(--card);
  color: var(--ink);
  padding: var(--space-6);
  max-width: 420px;
  text-align: center;
}
.probeer-dialog::backdrop { background: rgba(15, 61, 46, .45); }
.probeer-dialog-actions {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

.empty-state { text-align: center; }
.empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--r-pill);
  background: var(--card-soft);
  color: var(--sage);
  margin-bottom: var(--space-4);
}
.empty-icon svg { width: 26px; height: 26px; }

/* ---------- analyse-weergave (voorbeeldrapport, proefresultaat) ---------- */

.analysis-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 6fr);
  gap: var(--space-6);
  align-items: start;
}

.analysis-media { margin: 0; }
.analysis-media figcaption {
  font-size: 0.85rem;
  color: var(--text-faint);
  margin-top: var(--space-3);
}

.analysis-video-shell {
  position: relative;
  border-radius: var(--r-card);
  overflow: hidden;
  background: var(--ink);
  box-shadow: var(--shadow-rest);
}
.analysis-video-shell video { display: block; width: 100%; }

/* De sierlijnen over de swing: het ene gouden element van dit oppervlak. */
.analysis-video-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.analysis-video-guides path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  opacity: .85;
}
.analysis-video-guides circle { fill: var(--gold); }

.video-toggle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--card);
  box-shadow: var(--shadow-float);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.video-toggle:hover { transform: translate(-50%, -50%) scale(1.06); }
.video-play-icon {
  display: block;
  width: 0;
  height: 0;
  border-left: 16px solid var(--green);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  margin-left: 4px;
}

.video-timeline {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: rgba(247, 247, 245, .35);
}
.video-timeline span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--sage);
}

.video-error {
  position: absolute;
  inset: auto var(--space-4) var(--space-4);
  background: var(--card);
  border-radius: var(--r-field);
  padding: var(--space-3) var(--space-4);
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
}

.analysis-report {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-rest);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.analysis-score-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}
.analysis-score-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.analysis-score {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
}
.analysis-score span {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-muted);
}
.demo-label {
  align-self: flex-start;
  display: inline-flex;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.28rem 0.8rem;
  background: var(--card-soft);
  color: var(--text-faint);
}

.analysis-strengths { margin-bottom: var(--space-5); }
.analysis-strengths h3,
.analysis-improvements h3 { font-size: 1rem; }

.finding-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.finding-list li { position: relative; padding-left: 1.5rem; }
.finding-list li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--text-faint);
}
.finding-good li::before { content: "\2713"; color: var(--sage); font-weight: 700; }

.finding-card {
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--card-soft);
  margin-top: var(--space-3);
}
.finding-card summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  padding: 0.85rem 1rem;
  position: relative;
  padding-right: 2.4rem;
}
.finding-card summary::-webkit-details-marker { display: none; }
.finding-card summary::after {
  content: "+";
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--sage);
  font-weight: 700;
  font-size: 1.1rem;
  transition: transform .2s ease;
}
.finding-card[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.finding-card summary:hover { color: var(--green); }

.finding-detail {
  margin: 0;
  padding: 0 1rem 1rem;
  font-size: 0.9rem;
}
.finding-detail dt {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: var(--space-3);
}
.finding-detail dd {
  margin: 0.2rem 0 0;
  color: var(--text-muted);
}

.insight-card {
  background: var(--card-soft);
  border-radius: var(--r-field);
  padding: var(--space-4) var(--space-5);
  margin-top: var(--space-3);
}
.insight-card-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-bottom: 0.3rem;
}
.insight-card-text { color: var(--text-muted); margin: 0; }

/* Framekaartjes en meetdetails uit de gedeelde resultaatweergave. */
.fc-title {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink);
}
.fc-meta {
  display: block;
  font-size: 0.8rem;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}
.approx { color: var(--text-faint); font-style: italic; }

.override-input {
  width: 6em;
  font-variant-numeric: tabular-nums;
  padding: 0.4rem 0.6rem;
  font-size: 0.85rem;
}

.flight-option {
  display: inline-flex;
  cursor: pointer;
}
.flight-option input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.flight-option span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  background: var(--card-soft);
  color: var(--text-muted);
  font-size: 0.8rem;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.flight-option svg { width: 30px; height: 30px; }
.flight-option input:checked + span {
  border-color: var(--green);
  background: var(--green-tint);
  color: var(--green);
}
.flight-option input:focus-visible + span {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

.lightbox-close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  border: none;
  background: var(--card);
  color: var(--ink);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  z-index: 2;
}

/* ---------- meldingen ---------- */

.alert {
  border-radius: var(--r-field);
  padding: var(--space-4) var(--space-5);
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}
/* Het palet heeft geen rood of oranje: fout en waarschuwing gebruiken de
   goudreeks (de enige warme toon), succes de groenreeks. Fout is de
   zwaarste vorm: volle rand plus vet. */
.alert-error {
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  color: var(--gold-text);
  font-weight: 600;
}
.alert-warn {
  background: var(--gold-tint);
  border: 1px solid transparent;
  color: var(--gold-text);
}
.alert-success {
  background: var(--green-tint);
  border: 1px solid transparent;
  color: var(--green);
}

/* ---------- status ---------- */

.status-grid {
  display: grid;
  gap: var(--space-3);
  margin-block: var(--space-5);
}
.status-grid p {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-field);
  padding: var(--space-3) var(--space-4);
  margin: 0;
}
.status-icon {
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  margin-right: 0.5rem;
}
.status-ok { color: var(--green); font-weight: 700; }
/* Semantiek zonder rood: falen is leesbaar goud plus gewicht. */
.status-fail { color: var(--gold-text); font-weight: 700; }

.status-detail dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.4rem var(--space-6);
  margin: 0;
}
.status-detail dt { font-weight: 600; color: var(--text-muted); }
.status-detail dd { margin: 0; font-variant-numeric: tabular-nums; }

.status-disclaimer {
  background: var(--green-tint);
  border-left: 3px solid var(--sage);
  border-radius: var(--r-field);
  padding: var(--space-4) var(--space-5);
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-block: var(--space-5);
}

/* ---------- inhouds- en juridische pagina's ---------- */

.content-page,
.legal-page { padding-block: var(--space-7) var(--section-y); }

.content-section { margin-top: var(--space-7); }
.content-section h2 { margin-top: var(--space-6); }

.legal-page h2 { font-size: 1.35rem; margin-top: var(--space-7); }
.legal-page h3 { font-size: 1.05rem; margin-top: var(--space-5); }
.legal-page p,
.legal-page li { color: var(--text-muted); max-width: 70ch; }

.cookies-note { max-width: 70ch; }

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  margin-block: var(--space-5);
}
.table-wrap table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.table-wrap th {
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--card-soft);
  padding: 0.7rem 1rem;
}
.table-wrap td {
  padding: 0.7rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
}

.limits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.limits li { position: relative; padding-left: 1.4rem; }
.limits li::before {
  content: "\2013";
  position: absolute;
  left: 0;
  color: var(--sage);
  font-weight: 700;
}

.steps-grid-plain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-6);
}

/* ---------- afsluitende CTA ---------- */

.closing-cta {
  background: var(--green);
  color: var(--ground);
  text-align: center;
  padding-block: var(--section-y);
}
.closing-cta h2 { color: var(--ground); }
.closing-cta p {
  color: rgba(247, 247, 245, .8);
  max-width: 36rem;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

/* ---------- voettekst ---------- */

.site-footer {
  background: var(--green);
  color: rgba(247, 247, 245, .75);
  padding-block: var(--space-8) var(--space-6);
  font-size: 0.9rem;
}
.reference-footer-simple { display: none; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-6);
}
.footer-brand p { color: rgba(247, 247, 245, .65); max-width: 22rem; }
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--ground);
  text-decoration: none;
  margin-bottom: var(--space-4);
}
.footer-logo:hover { color: var(--ground); }

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sage);
  margin-bottom: var(--space-4);
}
.footer-col a {
  display: block;
  color: rgba(247, 247, 245, .85);
  text-decoration: none;
  padding-block: 0.3rem;
}
.footer-col a:hover { color: var(--ground); text-decoration: underline; }

.footer-bottom {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  border-top: 1px solid rgba(247, 247, 245, .18);
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  font-size: 0.82rem;
  color: rgba(247, 247, 245, .6);
}
.footer-privacy-note { color: rgba(247, 247, 245, .6); }

/* ---------- responsief ---------- */

@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .analysis-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .welcome-credit-band { flex-direction: column; text-align: center; gap: var(--space-4); }
}

@media (max-width: 560px) {
  .footer-grid { grid-template-columns: 1fr; }
  .hero-home { min-height: 0; }
  .btn-large { width: 100%; }
  .probeer-sticky-cta { position: static; }
}

/* ---------- beperkte beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;   /* !important: wint van elke animatieregel hierboven, dat is precies de bedoeling */
    transition: none !important;  /* idem */
  }
  /* De FAQ-tekst staat er meteen, ook halverwege een onthulling. */
  .faq-answer .faq-char { opacity: 1; filter: none; transition-delay: 0s; }
  .price-card-loading { opacity: .7; }
}