/* ============================================================
   Revenup - single-page marketing site
   Gestyled volgens Huisstijl Handboek v1 (aug 2026), met de
   door Sam bevestigde afwijkingen:
   - sectiepadding 64px (handboek: 96px)
   - pulse-animatie in de flow-visuals blijft (naast scroll-fade)
   - subtiele donkere rand op mint knoppen/badges
   - floating CTA als uitzondering op "1 primaire knop per scherm"
   - logo: mint staven + witte R-kop (variant 1)
   Fonts: Geist / Geist Mono, self-hosted via fonts.css.
   ============================================================ */

:root {
  /* Achtergronden */
  --dark: #0B3536;          /* --rv-bg-dark */
  --dark-nested: #06262A;   /* --rv-bg-dark-nested */
  --card: #F3F8F8;          /* --rv-bg-light */
  --white: #FFFFFF;         /* --rv-bg-light-card */

  /* Merkkleuren */
  --teal: #028090;
  --mint: #02C39A;
  --seafoam: #00A896;

  /* Tekst */
  --text-on-dark: #F3F8F8;
  --muted-dark: #A3BFBF;    /* nooit #5C7A7C op donker (contrast) */
  --text: #0B2027;
  --muted: #5C7A7C;

  /* Randen */
  --border-dark: rgba(243, 248, 248, 0.12);
  --border-light: rgba(11, 32, 39, 0.10);

  /* Vorm */
  --radius-card: 12px;
  --radius-control: 8px;

  --font: 'Geist', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, "SF Mono", monospace;
  --container: 1120px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Keep anchor targets clear of the sticky header */
[id] { scroll-margin-top: 76px; }

body {
  font-family: var(--font);
  font-size: 17px;
  color: var(--text);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- Typografie (handboek 4.2) ---------- */

h1 { line-height: 1.15; letter-spacing: -0.02em; font-weight: 600; }
h2 { line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; }
h3 { line-height: 1.3; font-weight: 500; }

h2 { font-size: clamp(1.625rem, 2.6vw, 2rem); margin-bottom: 1.5rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }

.lead { font-size: 1.05rem; max-width: 62ch; }
.lead-dark { color: var(--text-on-dark); }
.lead + .lead, .lead-dark + .lead-dark { margin-top: 1rem; }

/* ---------- Focus (handboek 6.2/12) ---------- */

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 2px;
}

/* ---------- Knoppen (handboek 6.2 + rand-uitzondering) ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 24px;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-control);
  cursor: pointer;
  font-family: inherit;
  transition: background-color 150ms ease, transform 150ms ease;
}

.btn:active { transform: scale(0.98); }

.btn-mint {
  background: var(--mint);
  color: #06262A;
  border: 2px solid rgba(6, 38, 42, 0.35);
}

.btn-mint:hover { background: #02B08B; }

.btn-teal { background: var(--teal); color: var(--white); }
.btn-teal:hover { background: #026F7D; }

.btn-large { min-width: 160px; }
.btn-small { height: 36px; padding: 0 16px; font-size: 0.9rem; }

/* ---------- Header (handboek 6.3) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--dark-nested);
  border-bottom: 1px solid var(--border-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.brand { display: flex; align-items: center; text-decoration: none; }

.brand-logo { height: 34px; width: auto; display: block; }

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.site-nav a {
  color: var(--text-on-dark);
  text-decoration: none;
  font-size: 0.95rem;
}

.site-nav a:hover { color: var(--mint); }
.site-nav a.btn-mint { color: #06262A; }
.site-nav a.btn-mint:hover { color: #06262A; }

.lang-switch {
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-control);
  padding: 0.3rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.site-nav a.lang-switch:hover {
  color: var(--mint);
  border-color: var(--mint);
}

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-on-dark);
  margin: 5px 0;
}

/* ---------- Hero ---------- */

/* Hero op de donkerste tint zodat hij zich onderscheidt van de machine-sectie
   die er direct op volgt (keuze Sam, 17 aug) */
.hero {
  background: var(--dark-nested);
  color: var(--text-on-dark);
  padding: 3.5rem 0;
}

/* Twee kolommen: tekst links, foto rechts in een kader (keuze Sam, 17 aug).
   De eerdere opzet met gecentreerde titel en een vrijstaande foto rechtsonder
   liet te veel leegte links en liet de uitsnede zweven. */
.hero > .container {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-copy { text-align: left; }

.hero-title {
  font-size: clamp(2.1rem, 3.9vw, 3.4rem);
  max-width: 14ch;
  margin: 0;
}

.hero-sub {
  margin: 1.4rem 0 2rem;
  font-size: 1.1rem;
  color: var(--text-on-dark);
  max-width: 44ch;
}

.hero-photo { width: 100%; }

/* Kader met dezelfde ronding als de kaarten elders op de site */
.hero-photo img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 35% 50%;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-dark);
}

/* Ontbreekt het bestand, dan verbergt script/onerror het hele blok */
.hero-photo.is-missing { display: none; }

/* ---------- Secties ---------- */

/* Afwijking van handboek (96px): Sam koos bewust voor compacter, 64px */
.section { padding: 4rem 0; }

.section-light { background: var(--white); }
.section-alt { background: var(--card); }

.section-dark {
  background: var(--dark);
  color: var(--text-on-dark);
}

.section-nested { background: var(--dark-nested); }

/* ---------- Kaarten (handboek 6.1) ---------- */

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 28px 32px;
  position: relative;
  transition: border-color 150ms ease;
}

.card:hover { border-color: rgba(2, 195, 154, 0.35); }

.card-white { background: var(--white); }

.card h3 { color: var(--teal); font-size: 1.15rem; }
.card p { color: var(--text); }

/* Badge in de kaart-hoek zodat de koppen uitlijnen */
.card-eyebrow {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  display: inline-block;
  background: var(--mint);
  border: 2px solid rgba(6, 38, 42, 0.35);
  color: #06262A;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
}

.highlight-line {
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border-left: 4px solid var(--mint);
  background: var(--white);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
  font-weight: 500;
  font-size: 1.05rem;
}

.section-light:not(.section-alt) .highlight-line { background: var(--card); }

.bridge-line {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 1rem;
}

/* Pijn → impact kaarten */
.cost-card h3 { color: var(--text); font-size: 1.05rem; }

.cost-card .impact {
  margin-top: 0.75rem;
  border-left: 3px solid var(--mint);
  padding-left: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- Flow-visual (systeemvisual, handboek 7.1) ----------
   Staat sinds 17 aug op een WITTE sectie, dus alles hier is op licht
   gestyled met teal als accent (handboek: teal is primair op licht,
   mint blijft gereserveerd voor de donkere secties). */

.flow {
  margin-top: 3rem;
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.flow-scope {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-card);
  padding: 2rem 1.25rem 1.25rem;
  position: relative;
  flex: 1;
}

.flow-scope-label {
  position: absolute;
  top: -0.8rem;
  left: 1.25rem;
  background: var(--white);
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.1rem 0.75rem;
  border-radius: 99px;
  border: 1px solid var(--border-light);
}

.flow-scope-revenup {
  color: var(--white);
  background: var(--teal);
  border-color: var(--teal);
}

.flow-scope-yours { flex: 0 0 200px; border-style: dashed; }

.flow-nodes {
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  height: 100%;
}

.flow-node {
  background: var(--card);
  /* De rand ligt altijd klaar zodat de layout niet verspringt bij hover */
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  padding: 1.1rem 1rem;
  flex: 1;
  min-width: 0;
}

.flow-node h3 {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin: 0.5rem 0 0.35rem;
}

.flow-node > p {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  color: var(--muted);
  line-height: 1.5;
}

.flow-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-weight: 600;
  font-size: 0.85rem;
}

.flow-node-final {
  background: transparent;
  border: 1px dashed rgba(11, 32, 39, 0.25);
}

.flow-node-final .flow-step {
  background: transparent;
  border: 1px dashed rgba(11, 32, 39, 0.3);
  color: var(--teal);
}

.flow-arrow {
  align-self: center;
  color: var(--teal);
  font-size: 1.3rem;
  font-weight: 600;
  flex: 0 0 auto;
  opacity: 0.6;
}

/* De doorlopende pulse door de machine is eruit (Sam, 17 aug): stappen lichten
   alleen op waar de muis staat, stap 1 staat open bij het laden. */

/* ---------- Stap-uitleg onder de machine-visual (17 aug) ----------
   Desktop: muis of toetsenbord op een stap vult het paneel eronder.
   Mobiel: de uitleg klapt uit binnen de stap zelf, want het paneel
   onder zes gestapelde stappen zou buiten beeld vallen. */

.flow-hint {
  margin-top: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* Muis- of tiktekst, afhankelijk van het schermformaat */
.hint-touch { display: none; }

.flow-node {
  cursor: pointer;
  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
}

.flow-node.is-active {
  border-color: var(--teal);
  background: var(--white);
  box-shadow: 0 0 0 1px var(--teal), 0 8px 20px rgba(2, 128, 144, 0.15);
}

.flow-node-final.is-active {
  border-style: solid;
  background: rgba(2, 128, 144, 0.06);
}

.flow-node-final.is-active .flow-step { border-color: var(--teal); }

/* Bron van de tekst; op desktop uit de stap gehaald en in het paneel getoond */
.flow-node-detail { display: none; }

.step-detail {
  margin-top: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-card);
  padding: 1.5rem 1.75rem;
  min-height: 9rem;
}

.step-detail p {
  color: var(--text);
  max-width: 90ch;
  font-size: 1rem;
}

/* ---------- Scroll-hint ---------- */

.scroll-hint {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.scroll-hint span {
  width: 12px;
  height: 12px;
  border-right: 2px solid rgba(243, 248, 248, 0.5);
  border-bottom: 2px solid rgba(243, 248, 248, 0.5);
  transform: rotate(45deg);
  animation: hint-bounce 2s infinite;
}

@keyframes hint-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.5; }
  50% { transform: rotate(45deg) translate(6px, 6px); opacity: 1; }
}

/* ---------- Checklists ---------- */

.check-list {
  list-style: none;
  margin-top: 1.5rem;
  max-width: 62ch;
}

.check-list li {
  padding-left: 1.9rem;
  position: relative;
  margin-bottom: 0.75rem;
}

.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--seafoam);
  font-weight: 600;
}

.check-list-card { margin-top: 0.9rem; }

.check-list-card li {
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
  padding-left: 1.6rem;
}

/* ---------- Vinkjes-tabellen ---------- */

.table-scroll { overflow-x: auto; margin-top: 2rem; }

.matrix-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 640px;
  font-size: 0.95rem;
}

.matrix-table th,
.matrix-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--border-light);
  text-align: center;
}

.matrix-table thead th {
  font-size: 1rem;
  font-weight: 600;
  vertical-align: bottom;
  border-bottom: 2px solid var(--dark);
}

.matrix-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--text);
}

.matrix-table td.yes { color: var(--seafoam); font-weight: 600; font-size: 1.1rem; }
.matrix-table td.no { color: var(--muted); font-weight: 400; }
.matrix-table td.na { color: var(--muted); }

.matrix-table .col-revenup { background: var(--dark); }
.matrix-table thead th.col-revenup { color: var(--mint); }
.matrix-table td.col-revenup.yes { color: var(--mint); }

.matrix-table .col-premium {
  background: var(--dark);
  border-left: 3px solid var(--mint);
  border-right: 3px solid var(--mint);
}

.matrix-table thead th.col-premium {
  color: var(--text-on-dark);
  border-top: 3px solid var(--mint);
}

.matrix-table tbody tr:last-child td.col-premium { border-bottom: 3px solid var(--mint); }
.matrix-table td.col-premium.yes { color: var(--mint); }
.matrix-table td.col-premium.no,
.matrix-table td.col-premium.na { color: rgba(243, 248, 248, 0.45); }

.package-name { display: block; font-weight: 600; }
.package-sub {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.col-premium .package-sub { color: var(--muted-dark); }

.package-badge {
  display: inline-block;
  background: var(--mint);
  border: 2px solid rgba(6, 38, 42, 0.35);
  color: #06262A;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.15rem 0.6rem;
  border-radius: 99px;
  margin-bottom: 0.5rem;
}

/* ---------- Bewijs ---------- */

.case-card {
  background: var(--dark-nested);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 2.5rem;
}

.case-client {
  color: var(--mint);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

.case-intro {
  font-size: 1.1rem;
  color: var(--text-on-dark);
  max-width: 62ch;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin: 2.25rem 0 1.5rem;
}

.stat { border-top: 3px solid var(--mint); padding-top: 1rem; }

.stat-number {
  display: block;
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 600;
  color: var(--text-on-dark);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.stat-label {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.9rem;
  color: var(--muted-dark);
}

.case-disclaimer {
  font-size: 0.85rem;
  color: var(--muted-dark);
}

/* ---------- Pakketten ---------- */

.packages-note {
  margin-top: 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---------- Geen lock-in ---------- */

.lockin-grid { margin-top: 2.5rem; }

.lockin-block {
  border-top: 3px solid var(--mint);
  padding-top: 1.25rem;
}

.lockin-block h3 { color: var(--text-on-dark); font-size: 1.05rem; }
.lockin-block p { color: var(--muted-dark); font-size: 0.95rem; }

/* ---------- Hoofd-CTA-sectie ---------- */

.strategy-cta { text-align: center; }
.strategy-cta .lead { margin: 0 auto 2rem; }

.alt-cta {
  margin-top: 1.75rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.alt-cta a { color: var(--teal); font-weight: 500; text-decoration: none; }
.alt-cta a:hover { color: var(--seafoam); }

/* ---------- Over mij ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 2.5rem;
  align-items: start;
}

.about-photo {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--card);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-placeholder-label {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 0.9rem;
}

.about-photo.photo-missing img { display: none; }
.about-photo.photo-missing .photo-placeholder-label { display: flex; }

.about-text h3 { font-size: 1.35rem; font-weight: 600; }
.about-text p { max-width: 62ch; margin-bottom: 1.5rem; }

.about-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.icon-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--teal);
  text-decoration: none;
  font-weight: 500;
}

.icon-link:hover { color: var(--seafoam); }

/* ---------- Contact (handboek 6.4) ---------- */

.contact-form {
  margin-top: 2.5rem;
  max-width: 540px;
}

.form-row { margin-bottom: 1.25rem; }

.form-row label {
  display: block;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--text-on-dark);
}

.form-row input,
.form-row textarea {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-control);
  background: var(--dark-nested);
  color: var(--text-on-dark);
  font-family: inherit;
  font-size: 1rem;
  resize: vertical;
}

.form-row input::placeholder,
.form-row textarea::placeholder { color: var(--muted-dark); }

.form-row input:focus,
.form-row textarea:focus {
  outline: 2px solid var(--mint);
  outline-offset: 0;
  border-color: transparent;
}

.form-status {
  margin-top: 1rem;
  color: var(--mint);
  min-height: 1.5em;
}

/* ---------- Floating CTA (bevestigde uitzondering) ---------- */

.floating-cta {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background: var(--mint);
  border: 2px solid rgba(6, 38, 42, 0.35);
  color: #06262A;
  font-weight: 600;
  font-size: 1rem;
  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
  border-radius: 99px;
  text-decoration: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transform: translateY(1.5rem);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 150ms ease;
}

.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cta-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(6, 38, 42, 0.25);
}

.floating-cta:hover { background: #02B08B; }

/* ---------- Footer ---------- */

.site-footer {
  background: var(--dark-nested);
  color: var(--muted-dark);
  padding: 3rem 0 1.75rem;
  font-size: 0.9rem;
}

.site-footer a { color: var(--muted-dark); }
.site-footer a:hover { color: var(--mint); }

.footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.75rem;
}

.footer-brand { display: inline-flex; }
.footer-brand svg { height: 30px; width: auto; display: block; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

.footer-nav a { text-decoration: none; }

/* Samenvatting voor zoekmachines en voor bezoekers die onderaan beginnen */
.footer-summary {
  max-width: 80ch;
  line-height: 1.7;
  padding-bottom: 1.75rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-dark);
  font-size: 0.85rem;
}

/* ---------- Scroll-fade-in (handboek 8) ---------- */

.will-fade { opacity: 0; transform: translateY(24px); }

.did-fade {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .flow { flex-direction: column; }
  .flow-scope-yours { flex: 1; }
  .flow-arrow-handoff { rotate: 90deg; align-self: center; }
}

@media (max-width: 860px) {
  /* Hero wordt één kolom: eerst de tekst, dan de foto */
  .hero > .container { grid-template-columns: 1fr; gap: 2rem; }
  .hero-title, .hero-sub { max-width: none; }

  .three-col { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-photo { max-width: 260px; }
  .flow-nodes { flex-direction: column; }
  .flow-arrow:not(.flow-arrow-handoff) { rotate: 90deg; align-self: center; }

  /* Uitleg klapt uit in de stap zelf; het gedeelde paneel vervalt */
  .step-detail { display: none; }
  .hint-pointer { display: none; }
  .hint-touch { display: inline; }

  .flow-node.is-active .flow-node-detail {
    display: block;
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--border-light);
  }

  .flow-node-detail p {
    font-family: var(--font);
    font-size: 0.95rem;
    letter-spacing: 0;
    color: var(--text);
    line-height: 1.6;
  }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 3rem 0; }
  .hero-title { font-size: 2rem; }
  .hero-sub { font-size: 1.05rem; }
  .section { padding: 3.5rem 0; }
  .two-col { grid-template-columns: 1fr; }

  /* Cijfers onder elkaar: in twee kolommen werden het stroken van ~110px
     breed waarin de labels zes regels hoog werden */
  .case-card { padding: 1.75rem 1.5rem; }
  .stats-grid { grid-template-columns: 1fr; gap: 1.25rem; margin: 1.75rem 0 1.25rem; }

  /* Mono-regels in de stappen iets groter; 11,5px las te klein op telefoon */
  .flow-node > p { font-size: 0.8rem; }

  .nav-toggle { display: block; }

  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--dark-nested);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
    border-bottom: 1px solid var(--border-dark);
  }

  .site-nav.open { display: flex; }
}


/* ---------- Tabellen als kaarten op mobiel (gegenereerd in script.js) ---------- */

.matrix-cards { display: none; }

@media (max-width: 860px) {
  .table-scroll { display: none; }

  .matrix-cards { display: grid; gap: 1rem; margin-top: 2rem; }

  .matrix-card {
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-card);
    padding: 1.25rem 1.4rem 1.4rem;
  }

  .matrix-card-head { font-weight: 600; font-size: 1.1rem; }
  .matrix-card-head .package-name { font-size: 1.1rem; }

  .matrix-card ul { list-style: none; margin-top: 0.9rem; }

  .matrix-card li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.3rem 0;
    font-size: 0.95rem;
  }

  .matrix-card li .mark { font-weight: 600; flex: 0 0 auto; }
  .matrix-card li.yes .mark { color: var(--seafoam); }
  .matrix-card li.no, .matrix-card li.na { color: var(--muted); }

  .matrix-card-revenup, .matrix-card-premium {
    background: var(--dark);
    color: var(--text-on-dark);
    border: 2px solid var(--mint);
  }

  .matrix-card-revenup .matrix-card-head { color: var(--mint); }
  .matrix-card-premium .matrix-card-head .package-name { color: var(--text-on-dark); }
  .matrix-card-premium .package-sub { color: var(--muted-dark); }
  .matrix-card-revenup li.yes .mark, .matrix-card-premium li.yes .mark { color: var(--mint); }
  .matrix-card-revenup li.no, .matrix-card-revenup li.na,
  .matrix-card-premium li.no, .matrix-card-premium li.na { color: rgba(243, 248, 248, 0.45); }
}

/* ---------- Reduced motion (handboek 8, verplicht) ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint span { animation: none; }
  .flow-node { transition: none; }
  .floating-cta { transition: none; }
  .will-fade { opacity: 1; transform: none; }
  .did-fade { transition: none; }
}