/* ============================================================
   TravelAppBuilder — B2C (consument) · zelfde dark/olijf-thema
   als de hoofdsite, maar volledig eigen bestanden en b2c-prefix.
   ============================================================ */

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

:root {
  color-scheme: dark;
  --b2c-bg: #101014;
  --b2c-surface: #1a1a20;
  --b2c-surface-2: #22222b;
  --b2c-line: #26262e;
  --b2c-text: #f2f2f5;
  --b2c-dim: #9a9aa5;
  --b2c-accent: #a3b763;
  --b2c-accent-2: #c5d98a;
  --b2c-btn: #879a4c;
}

html { scroll-behavior: smooth; }

body.b2c {
  background: var(--b2c-bg);
  color: var(--b2c-text);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.5;
  overflow-x: clip;
}

.b2c a { color: var(--b2c-accent); text-decoration: none; }
.b2c img, .b2c svg { max-width: 100%; }

.b2c-wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

.b2c :focus-visible { outline: 3px solid var(--b2c-accent); outline-offset: 2px; border-radius: 6px; }

/* ── Knoppen (identiek aanvoelend aan de hoofdsite) ─────── */
.b2c-btn {
  display: inline-block; background: var(--b2c-btn); color: #101014;
  border: none; border-radius: 14px; padding: 12px 22px;
  font: inherit; font-weight: 800; font-size: 15px; cursor: pointer;
  transition: transform .15s, filter .15s;
}
.b2c-btn:hover { transform: translateY(-2px); filter: brightness(1.06); }
.b2c-btn--lg { padding: 16px 30px; font-size: 16.5px; border-radius: 16px; }
.b2c-btn--ghost { background: var(--b2c-bg); border: 2px solid var(--b2c-line); color: var(--b2c-text); }
/* knoptekst altijd zwart: de algemene linkkleur (.b2c a, olijf) is specifieker
   dan .b2c-btn en won anders op <a>-knoppen */
.b2c a.b2c-btn { color: #101014; }
.b2c a.b2c-btn--ghost { color: var(--b2c-text); }

/* ── Header ─────────────────────────────────────────────── */
.b2c-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(16, 16, 20, .82); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--b2c-line);
}
/* ⚠️ Indeling gelijk aan decisionmaker.ceo (vraag Carl): logo links, navigatie
   GECENTREERD, taal + CTA uiterst rechts. Dat centreren komt niet van een
   justify-content maar van twee even brede flanken (flex:1 1 0 op het logo én op
   .b2c-header-actions) — hetzelfde patroon als Bootstrap's center-nav daar.
   Vandaar ook geen margin-left:auto meer op nav; dat plakte de links rechts vast. */
/* ⚠️ De header loopt BREDER dan de rest van de site: 1320 px, net als de container
   van decisionmaker.ceo, zodat logo en CTA verder naar de randen staan. Alleen hier
   scopen — .b2c-wrap zelf blijft op 1120 px voor de paginainhoud. */
.b2c-header .b2c-wrap { max-width: 1320px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.b2c-logo { display: flex; align-items: center; gap: 10px; flex: 1 1 0; }
.b2c-header-actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.b2c-logo img { width: 38px; border-radius: 10px; }
.b2c-logo .b2c-brand { font-weight: 800; font-size: 21px; color: var(--b2c-text); }
.b2c-logo .b2c-brand span { color: var(--b2c-accent); }
.b2c-header nav { display: flex; gap: 24px; align-items: center; font-size: 15.5px; font-weight: 700; }
.b2c-header nav a { color: var(--b2c-dim); white-space: nowrap; }
.b2c-header nav a:hover { color: var(--b2c-text); }
.b2c-header nav .b2c-btn { color: #101014; padding: 11px 18px; font-size: 14px; }
/* Pagina waar je staat: accentkleur + een streepje eronder. mktHeader() zet
   aria-current="page" op dat item, dus de markering volgt de toegankelijkheids-
   status i.p.v. een aparte class — één bron van waarheid. */
.b2c-header nav a[aria-current="page"] { position: relative; color: var(--b2c-accent); }
.b2c-header nav a[aria-current="page"]::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--b2c-accent); border-radius: 2px;
}

/* Taalkiezer in de header. Had hier GEEN styling, waardoor je het standaard
   <details>-driehoekje zag staan naast ons eigen pijltje (feedback Carl 27/7).
   Toont enkel de taalcode: EN / NL, geen vlag en geen taalnaam — zie langSwitcher(). */
.b2c-header .lang-switch { position: relative; }
.b2c-header .lang-switch > summary { list-style: none; cursor: pointer; display: inline-flex;
  align-items: center; gap: 5px; color: var(--b2c-dim); font-size: 13px; font-weight: 800;
  letter-spacing: .02em; padding: 6px 11px; border: 1px solid var(--b2c-line);
  border-radius: 999px; white-space: nowrap; }
.b2c-header .lang-switch > summary::-webkit-details-marker { display: none; }
.b2c-header .lang-switch[open] > summary,
.b2c-header .lang-switch > summary:hover { color: var(--b2c-text); border-color: var(--b2c-accent); }
.b2c-header .lang-switch .menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  min-width: 92px; background: var(--b2c-surface); border: 1px solid var(--b2c-line);
  border-radius: 12px; padding: 5px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4); }
.b2c-header .lang-switch .menu a { display: block; color: var(--b2c-dim); font-size: 14px;
  font-weight: 700; padding: 8px 11px; border-radius: 8px; white-space: nowrap; }
.b2c-header .lang-switch .menu a:hover { background: var(--b2c-surface-2); color: var(--b2c-text); }
.b2c-header .lang-switch .menu a.on { color: var(--b2c-accent); }
@media (max-width: 860px) { .b2c-header .lang-switch > summary { font-size: 12px; padding: 5px 9px; } }
.b2c-header-actions .b2c-btn { flex-shrink: 0; white-space: nowrap; }

/* ── Uitklapmenu (☰) op smallere schermen ───────────────────────────────────
   ⚠️ card-854305275: hier liep de header hórizontaal buiten het scherm. De vier
   nav-links zijn samen 507 px breed (Nederlands is de breedste taal; Engels 431),
   plus logo 111, taalkiezer + knop 246, twee gaps en 44 px padding → de header past
   pas vanaf ± 950 px op één regel. Tussen 721 px (waar de links tot dan pas
   verdwenen) en 950 px werd de CTA-knop dus letterlijk buiten beeld geduwd: op een
   venster van 844 px stond haar rechterrand op 910 px. Flexbox kon dat niet
   opvangen — elke link staat op white-space:nowrap (min-content = volle breedte) en
   de knop op flex-shrink:0 — en body{overflow-x:clip} maakte het erger: je kón niet
   eens naar de knop toe scrollen, ze was gewoon onbereikbaar.
   Onder 980 px verhuizen de links daarom naar dit menu in plaats van te verdwijnen.
   Dat herstelt meteen ook de navigatie op de telefoon: daar stond helemaal geen menu
   meer, alleen nog de links in de footer.
   Wijzig je de nav-teksten of de CTA, meet dan opnieuw op 980 px of alles nog past. */
/* ⚠️ flex-shrink:0 op het menu én op het icoon is GEEN sierlijkheid. Zonder dat kreeg
   de knop op een telefoon (375 px) te weinig ruimte in .b2c-header-actions en kromp ze
   mee; het streepjes-icoon staat op `.b2c svg { max-width: 100% }` en klapte dan naar
   0 px breed — je zag een leeg pilletje van 20 px, half onder de CTA-knop. */
.b2c-menu { display: none; position: relative; flex-shrink: 0; }
.b2c-menu > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; color: var(--b2c-dim); padding: 6px 9px; line-height: 0;
  border: 1px solid var(--b2c-line); border-radius: 999px;
}
.b2c-menu > summary svg { flex: none; }
.b2c-menu > summary::-webkit-details-marker { display: none; }
.b2c-menu[open] > summary,
.b2c-menu > summary:hover { color: var(--b2c-text); border-color: var(--b2c-accent); }
.b2c-menu .menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 210px;
  background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 14px;
  padding: 6px; display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .4);
}
.b2c-menu .menu a { display: block; color: var(--b2c-dim); font-size: 15px; font-weight: 700;
  padding: 10px 12px; border-radius: 9px; white-space: nowrap; }
.b2c-menu .menu a:hover { background: var(--b2c-surface-2); color: var(--b2c-text); }
.b2c-menu .menu a[aria-current="page"] { color: var(--b2c-accent); }

@media (max-width: 979px) {
  .b2c-header nav { display: none; }
  .b2c-menu { display: block; }
}
@media (max-width: 720px) {
  .b2c-logo img { width: 30px; border-radius: 8px; }
  .b2c-logo .b2c-brand { font-size: 16px; }
  .b2c-header-actions .b2c-btn { padding: 9px 13px; font-size: 13px; }
}
/* Heel smalle toestellen (± 320 px): logo, taal, knop en ☰ passen daar alleen nog
   met krappere tussenruimtes. Opgemeten op 320 px: 30 + 52 + 138 + 38 = 258 aan
   inhoud, drie gaps van 6 en 28 px padding → 304 van de 320. */
@media (max-width: 420px) {
  .b2c-header .b2c-wrap { gap: 6px; padding-left: 14px; padding-right: 14px; }
  .b2c-header-actions { gap: 6px; }
  .b2c-header-actions .b2c-btn { padding: 8px 11px; font-size: 12.5px; }
  .b2c-menu > summary { padding: 6px 8px; }
}
/* smal scherm: alleen het logo-icoon, zodat de CTA-knop nooit over de
   merknaam valt (brand krimpt in flex en liep onder de knop door) */
@media (max-width: 600px) {
  .b2c-logo .b2c-brand { display: none; }
}

/* ── Hero ───────────────────────────────────────────────── */
.b2c-hero { position: relative; padding: 56px 0 34px; overflow: clip; }
.b2c-hero::before {
  content: ""; position: absolute; inset: -40% -20% auto; height: 130%;
  background: radial-gradient(46% 60% at 20% 30%, rgba(163, 183, 99, .13), transparent 70%);
  pointer-events: none;
}
.b2c-hero .b2c-wrap { position: relative; display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 920px) { .b2c-hero { padding: 80px 0 56px; } .b2c-hero .b2c-wrap { grid-template-columns: 1.05fr 1fr; } }

.b2c-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(163, 183, 99, .12); color: var(--b2c-accent);
  border-radius: 999px; padding: 8px 16px;
  font-size: 12.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  margin-bottom: 18px;
}
.b2c-hero h1 { font-size: clamp(30px, 4.4vw, 47px); line-height: 1.08; font-weight: 800; letter-spacing: -.02em; }
.b2c-hero h1 em { font-style: normal; color: var(--b2c-accent); }

/* ── Herotitel altijd op twee regels (card-e75k0vt, 4/8/2026) ──────────────────────────
   "Een ALL-IN-ONE reisgids in enkele minuten" hoort in twee regels te breken, precies op de
   <br>. Met de vuistregel hierboven (4.4vw) gebeurde dat nooit: de titel groeit met het
   VENSTER, terwijl hij moet passen in zijn KOLOM — en die is op de home maar ± de helft
   breed. Gevolg: de titel brak af in "…reis-" / "app" / "in enkele minuten", drie regels.
   De titel schaalt daarom mee met de kolom (cqi) in plaats van met het venster. De factor
   is opgemeten: de titel is 11,34x zijn lettergrootte breed in het Nederlands en 12,68x in
   het Engels (de Engelse zin heeft meer letters), dus 100/11,34 ≈ 8,8cqi respectievelijk
   100/12,68 ≈ 7,9cqi is het maximum dat nog op één regel past. We nemen er telkens ± 2,5%
   marge onder. Verandert de zin, meet dan opnieuw — anders klapt hij weer naar drie regels.
   Browsers zonder containerqueries vallen terug op de clamp-regel hierboven. */
.b2c-heromain { container-type: inline-size; }
.b2c-hero .b2c-heromain h1 { font-size: min(46px, 8.6cqi); }
:lang(en) .b2c-hero .b2c-heromain h1 { font-size: min(46px, 7.7cqi); }
.b2c-hero .b2c-lede { color: var(--b2c-dim); font-size: 18px; line-height: 1.6; margin: 20px 0 26px; max-width: 520px; }
.b2c-hero .b2c-lede b { color: var(--b2c-text); font-weight: 800; }
.b2c-hero .b2c-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.b2c-hero .b2c-note { color: var(--b2c-dim); font-size: 13.5px; margin-top: 14px; }
.b2c-hero .b2c-note b { color: var(--b2c-accent); }

/* hero-visual: echte app-screenshots in telefoonkaders (zoals hoofdsite) */
.b2c-phones { position: relative; height: 540px; }
@media (max-width: 919px) { .b2c-phones { height: 460px; max-width: 420px; margin: 0 auto; } }
.b2c-phone {
  position: absolute; border-radius: 34px; border: 1px solid #33333d; background: #000;
  padding: 10px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}
.b2c-phone img { display: block; width: 100%; border-radius: 26px; }
.b2c-phone--a { width: 56%; left: 4%; top: 30px; transform: rotate(-5deg); z-index: 1; }
.b2c-phone--b { width: 58%; right: 2%; top: 0; z-index: 2; }
.b2c-float { animation: b2cFloat 7s ease-in-out infinite; }
.b2c-float.d2 { animation-delay: 1.6s; }
@keyframes b2cFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@media (prefers-reduced-motion: reduce) { .b2c-float { animation: none; } }

/* losstaande telefoon (oplossing/voorbeeld) */
.b2c-phone-solo {
  width: min(280px, 78vw); margin: 0 auto; border-radius: 34px; border: 1px solid #33333d;
  background: #000; padding: 10px; box-shadow: 0 26px 60px rgba(0, 0, 0, .5); rotate: 2deg;
}
.b2c-phone-solo img { display: block; width: 100%; border-radius: 26px; }

/* ── Secties ────────────────────────────────────────────── */
.b2c-blk { padding: 58px 0; }
@media (min-width: 920px) { .b2c-blk { padding: 78px 0; } }
.b2c-blk--tint { background: var(--b2c-surface); border-top: 1px solid var(--b2c-line); border-bottom: 1px solid var(--b2c-line); }
.b2c-eyebrow { color: var(--b2c-accent); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .1em; }
.b2c h2.b2c-big { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.14; font-weight: 800; letter-spacing: -.015em; margin: 10px 0 12px; }
.b2c p.b2c-sub { color: var(--b2c-dim); font-size: 16px; line-height: 1.65; max-width: 560px; }
.b2c-center { text-align: center; }
.b2c-center p.b2c-sub { margin: 0 auto; }

/* ── Probleem (3 compacte kaarten) ──────────────────────── */
.b2c-problems { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
@media (min-width: 820px) { .b2c-problems { grid-template-columns: repeat(3, 1fr); } }
.b2c-problem {
  background: var(--b2c-bg); border: 1px solid var(--b2c-line);
  border-radius: 20px; padding: 22px; text-align: left;
}
.b2c-blk:not(.b2c-blk--tint) .b2c-problem { background: var(--b2c-surface); }
.b2c-problem .ic { font-size: 26px; margin-bottom: 10px; }
/* Icoon gecentreerd boven de kop, ALLEEN in de probleemsectie (card-foyft7o): daar staan de
   drie kaarten naast elkaar en hingen de iconen links, wat de rij rommelig maakte. De tekst
   blijft links uitgelijnd — gecentreerde lopende tekst leest slechter.
   ⚠️ Bewust gescopet op #probleem: .b2c-problem wordt op acht plekken hergebruikt (o.a. de
   voordelen- en reiskostenblokken). Die zijn niet gevraagd en veranderen dus niet mee. */
#probleem .b2c-problem .ic { display: block; text-align: center; }
.b2c-problem h3 { font-size: 16.5px; margin-bottom: 6px; }
.b2c-problem p { color: var(--b2c-dim); font-size: 14px; line-height: 1.6; }

/* ── Oplossing ──────────────────────────────────────────── */
.b2c-solution { display: grid; grid-template-columns: 1fr; gap: 36px; align-items: center; }
@media (min-width: 920px) { .b2c-solution { grid-template-columns: 1fr 1.15fr; gap: 60px; } }
.b2c-checks { list-style: none; display: grid; gap: 12px; margin-top: 22px; }
.b2c-checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.b2c-checks .ok {
  flex-shrink: 0; width: 25px; height: 25px; border-radius: 50%;
  background: rgba(163, 183, 99, .15); color: var(--b2c-accent);
  display: grid; place-items: center; font-size: 13px; font-weight: 800; margin-top: 1px;
}
.b2c-checks b { font-weight: 800; }
.b2c-checks span.d { color: var(--b2c-dim); }

/* ── Stappenplan ────────────────────────────────────────── */
.b2c-steps { display: grid; grid-template-columns: 1fr; gap: 22px; margin-top: 40px; }
@media (min-width: 880px) { .b2c-steps { grid-template-columns: repeat(4, 1fr); gap: 16px; } }
.b2c-step {
  background: var(--b2c-surface); border: 1px solid var(--b2c-line);
  border-radius: 20px; padding: 26px 22px 22px; position: relative; text-align: left;
  transition: transform .18s ease, border-color .18s ease;
}
.b2c-step:hover { transform: translateY(-4px); border-color: var(--b2c-accent); }
.b2c-step .num {
  position: absolute; top: -16px; left: 20px; width: 32px; height: 32px; border-radius: 50%;
  background: var(--b2c-accent); color: #101014; font-weight: 800; display: grid; place-items: center;
}
/* .b2c-step .ic bestaat niet meer: de emoji zijn op 28/7/2026 uit de stapkaarten
   gehaald (vraag Carl) — het genummerde bolletje benoemt de stap al. */
.b2c-step h3 { font-size: 16px; margin-bottom: 6px; }
.b2c-step p { color: var(--b2c-dim); font-size: 13.5px; line-height: 1.6; }

/* ── Voorbeeld: echte app-screenshots ───────────────────── */
.b2c-example {
  margin-top: 38px; background: var(--b2c-surface); border: 1px solid var(--b2c-line);
  border-radius: 24px; overflow: hidden;
}
.b2c-example-head {
  display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center;
  padding: 18px 22px; border-bottom: 1px solid var(--b2c-line);
}
.b2c-example-head .t { font-weight: 800; font-size: 17px; }
.b2c-example-head .meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--b2c-dim); font-size: 13px; font-weight: 600; }
.b2c-example-badge {
  margin-left: auto; background: rgba(163, 183, 99, .13); color: var(--b2c-accent);
  border-radius: 999px; padding: 4px 12px; font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
}
.b2c-shots {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 26px 22px; align-items: start;
}
@media (max-width: 720px) { .b2c-shots { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }
.b2c-shot figure { margin: 0; }
.b2c-shot .frame {
  border-radius: 26px; border: 1px solid #33333d; background: #000; padding: 8px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45);
}
.b2c-shot img { display: block; width: 100%; border-radius: 20px; }
.b2c-shot figcaption { text-align: center; color: var(--b2c-dim); font-size: 13px; font-weight: 700; margin-top: 10px; }
.b2c-example-foot { padding: 16px 22px 22px; border-top: 1px solid var(--b2c-line); text-align: center; }
.b2c-example-foot .d { color: var(--b2c-dim); font-size: 13px; margin-bottom: 13px; }

/* ── Vertrouwen ─────────────────────────────────────────── */
.b2c-trust-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 720px) { .b2c-trust-grid { grid-template-columns: 1fr 1fr; } }
.b2c-trust-item { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.b2c-trust-item .ic {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(163, 183, 99, .12); display: grid; place-items: center; font-size: 19px;
}
.b2c-trust-item b { display: block; font-size: 14.5px; margin-bottom: 2px; }
.b2c-trust-item span { color: var(--b2c-dim); font-size: 13.5px; line-height: 1.55; }

/* ── FAQ ────────────────────────────────────────────────── */
.b2c-faq { max-width: 740px; margin: 34px auto 0; display: grid; gap: 10px; }
.b2c-faq details { background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 15px; overflow: hidden; }
.b2c-faq details[open] { border-color: var(--b2c-accent); }
.b2c-faq summary {
  list-style: none; cursor: pointer; padding: 15px 18px;
  font-weight: 800; font-size: 15px; display: flex; align-items: center; gap: 12px;
}
.b2c-faq summary::-webkit-details-marker { display: none; }
.b2c-faq summary::after {
  content: "+"; margin-left: auto; font-size: 20px; font-weight: 600;
  color: var(--b2c-accent); transition: rotate .18s ease; line-height: 1;
}
.b2c-faq details[open] summary::after { rotate: 45deg; }
.b2c-faq .a { padding: 0 18px 16px; color: var(--b2c-dim); font-size: 14px; line-height: 1.65; }

/* ── CTA-band ───────────────────────────────────────────── */
.b2c-cta-band {
  background: linear-gradient(135deg, rgba(163, 183, 99, .16), var(--b2c-surface));
  border: 1px solid #2e2e38; border-radius: 24px; padding: 40px 26px; text-align: center;
}
.b2c-cta-band h2 { font-size: clamp(22px, 3vw, 31px); font-weight: 800; letter-spacing: -.015em; }
.b2c-cta-band p { color: var(--b2c-dim); margin: 10px auto 22px; max-width: 460px; font-size: 15.5px; line-height: 1.6; }

/* ── Footer ─────────────────────────────────────────────── */
.b2c-footer { border-top: 1px solid var(--b2c-line); margin-top: 60px; background: var(--b2c-surface); }
.b2c-footer .grid {
  display: grid; grid-template-columns: 1fr; gap: 26px;
  max-width: 1120px; margin: 0 auto; padding: 38px 22px 28px;
}
@media (min-width: 640px) { .b2c-footer .grid { grid-template-columns: 1.5fr 1fr 1fr; } }
.b2c-footer .fbrand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; color: var(--b2c-text); }
.b2c-footer .fbrand img { width: 32px; border-radius: 9px; }
.b2c-footer .fbrand span { color: var(--b2c-accent); }
.b2c-footer p { color: var(--b2c-dim); font-size: 13.5px; line-height: 1.65; margin-top: 12px; max-width: 320px; }
.b2c-footer h4 { font-size: 12.5px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; color: var(--b2c-text); }
.b2c-footer .col a { display: block; color: var(--b2c-dim); font-size: 14px; padding: 4px 0; }
.b2c-footer .col a:hover { color: var(--b2c-accent); }
.b2c-footer .bottom { border-top: 1px solid var(--b2c-line); }
.b2c-footer .bottom .in {
  max-width: 1120px; margin: 0 auto; padding: 15px 22px;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  color: var(--b2c-dim); font-size: 12.5px;
}
.b2c-footer .bottom a { color: var(--b2c-dim); }
.b2c-footer .bottom a:hover { color: var(--b2c-accent); }

/* ============================================================
   Nieuwe homepage (juli 2026): live mockups, chips, één-app-blok,
   feature-grid + de pagina's hoe-het-werkt en voorbeeld.
   ============================================================ */

/* ── Hero-visual: één kristalheldere interactieve mockup (schaal 1,
   geen transform-blur, geen float) + labels die de widgets volgen ── */
.b2c-heroviz { position: relative; min-height: 692px; display: flex; justify-content: center; }
.b2c-heroviz .tabmock.hv-app { --s: 1; position: relative; z-index: 1; }
.b2c-heroviz .tabmock .phone { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
/* prijslabel op de hoek van de telefoon: oranjegele zonnesticker (starburst).
   box-shadow werkt niet met clip-path — daarom drop-shadow als filter. */
.b2c-phonewrap { position: relative; align-self: flex-start; }
.b2c-pricetag {
  position: absolute; top: -36px; right: -38px; z-index: 5; rotate: 12deg;
  width: 122px; height: 122px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; line-height: 1.05;
  background: radial-gradient(circle at 35% 30%, #ffd94d, #ffb020 65%, #f59300);
  color: #3a2600; font-weight: 800; font-size: 27px; letter-spacing: -.02em;
  clip-path: polygon(100% 50%, 90.2% 58%, 96.2% 69.1%, 84.1% 72.8%, 85.4% 85.4%,
    72.8% 84.1%, 69.1% 96.2%, 58% 90.2%, 50% 100%, 42% 90.2%, 30.9% 96.2%,
    27.2% 84.1%, 14.6% 85.4%, 15.9% 72.8%, 3.8% 69.1%, 9.8% 58%, 0% 50%,
    9.8% 42%, 3.8% 30.9%, 15.9% 27.2%, 14.6% 14.6%, 27.2% 15.9%, 30.9% 3.8%,
    42% 9.8%, 50% 0%, 58% 9.8%, 69.1% 3.8%, 72.8% 15.9%, 85.4% 14.6%,
    84.1% 27.2%, 96.2% 30.9%, 90.2% 42%);
  filter: drop-shadow(0 12px 26px rgba(255, 176, 32, .35));
}
.b2c-pricetag small { font-size: 11.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: .04em; margin-top: 2px; }
/* labels: JS zet top (widgetpositie) en .on (widget in beeld).
   ⚠️ Gedeeld met .ft-chips op de functionaliteitenpagina — wijzig je hier iets,
   bekijk dan zowel de homepage-hero als /functionaliteiten/ in de browser. */
.b2c-herochips .b2c-chipf,
.ft-chips .b2c-chipf {
  position: absolute; z-index: 4; white-space: nowrap; top: 0;
  background: rgba(26, 26, 32, .88); backdrop-filter: blur(6px);
  border: 1px solid #2e2e38; border-radius: 999px; padding: 9px 15px;
  font-size: 13.5px; font-weight: 800; color: var(--b2c-text);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease, visibility .35s, top .3s ease;
  animation: b2cChipDance 2.6s ease-in-out infinite;
}
.b2c-herochips .b2c-chipf.on,
.ft-chips .b2c-chipf.on { opacity: 1; visibility: visible; }
/* links/rechts van de gecentreerde telefoon (342px, halve breedte 171):
   de chip raakt net de bezel (24px overlap) zonder widgettekst te bedekken */
.b2c-herochips .b2c-chipf[data-side="l"] { right: calc(50% + 147px); }
.b2c-herochips .b2c-chipf[data-side="r"] { left: calc(50% + 147px); }
@media (min-width: 920px) and (max-width: 1120px) {
  .b2c-herochips .b2c-chipf[data-side="l"] { right: calc(50% + 132px); }
  .b2c-herochips .b2c-chipf[data-side="r"] { left: calc(50% + 132px); }
}
/* Scroll-hint: grijze swoosh-pijl met "Scrollen maar", wijst naar de scrollbar van
   de demo-telefoon. Stond hier tot de swap en is toen verdwenen (card-153188935).
   ⚠️ Bewust GEEN dansanimatie — de chips bewegen, deze pijl hoort stil te staan. */
.b2c-scrollhint {
  position: absolute; z-index: 5; pointer-events: none;
  left: calc(50% + 150px); top: 17%;
  width: 118px; color: var(--b2c-dim); opacity: .95;
  transition: opacity .45s ease, visibility .45s;
}
.b2c-scrollhint em { display: block; font-style: normal; font-weight: 700; font-size: 14px;
  white-space: nowrap; margin: 0 0 3px 26px; }
.b2c-scrollhint svg { display: block; width: 92px; height: 80px;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, .5)); }
.b2c-scrollhint.off { opacity: 0; visibility: hidden; }
@media (max-width: 919px) { .b2c-scrollhint { display: none; } }

/* dansend stippelpijltje van label naar widget */
.b2c-chipf .arr { position: absolute; width: 30px; height: 25px; color: var(--b2c-accent); opacity: .8; bottom: -20px; }
.b2c-chipf[data-side="l"] .arr { right: -24px; }
.b2c-chipf[data-side="r"] .arr { left: -24px; transform: scaleX(-1); }
@keyframes b2cChipDance { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.b2c-herochips .b2c-chipf:nth-child(2n),
.ft-chips .b2c-chipf:nth-child(2n) { animation-delay: 1.1s; }
.b2c-herochips .b2c-chipf:nth-child(3n),
.ft-chips .b2c-chipf:nth-child(3n) { animation-delay: .6s; }
@media (prefers-reduced-motion: reduce) {
  .b2c-herochips .b2c-chipf,
  .ft-chips .b2c-chipf { animation: none; }
}
@media (max-width: 919px) {
  .b2c-heroviz { min-height: 0; flex-direction: column; align-items: center; gap: 20px; }
  /* schaal vloeiend mee met de viewport i.p.v. een vaste factor;
     tan(atan2(px,px)) = unitless deling (px/px mag niet in calc) */
  .b2c-heroviz .tabmock.hv-app { --s: min(.75, tan(atan2(100vw - 96px, 342px))); }
  .b2c-phonewrap { align-self: center; }
  .b2c-pricetag { width: 98px; height: 98px; font-size: 21px; top: -28px; right: -24px; }
  .b2c-pricetag small { font-size: 9.5px; }
  /* labels als statische rij onder de telefoon, zonder pijltjes */
  .b2c-herochips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .b2c-herochips .b2c-chipf { position: static; font-size: 12.5px; padding: 7px 12px;
    opacity: 1; visibility: visible; animation: none; }
  .b2c-chipf .arr { display: none; }
}
@media (max-width: 560px) {
  .b2c-hero .b2c-btns .b2c-btn { width: 100%; text-align: center; }
}
/* geen scroll-trap in de hero op touchtoestellen — behalve in de
   interactieve demo-telefoon: daar is scrollen juist de bedoeling */
@media (pointer: coarse) { .b2c-hero .tabmock:not(.tabmock--app) .sbody { overflow: hidden; } }

/* subpagina-hero (hoe-het-werkt, voorbeeld): gecentreerd, zonder visual */
.b2c-hero--sub { padding-bottom: 26px; }
.b2c-hero--sub .b2c-wrap { display: block; }

/* ── "Eén app in plaats van tien" ───────────────────────── */
.b2c-onegrid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 920px) { .b2c-onegrid { grid-template-columns: 1.1fr 1fr; gap: 60px; } }
.b2c-onechaos { display: flex; align-items: center; justify-content: center; gap: 18px; }
.b2c-minitiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 300px; }
.b2c-minitile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  aspect-ratio: 1; border-radius: 16px; background: var(--b2c-surface);
  border: 1px solid var(--b2c-line); font-size: 21px;
  filter: saturate(.35); opacity: .85;
}
.b2c-minitile i { font-style: normal; font-size: 9.5px; font-weight: 700; color: var(--b2c-dim); }
.b2c-minitile.t2 { rotate: 3deg; } .b2c-minitile.t3 { rotate: -2deg; }
.b2c-minitile.t5 { rotate: -3deg; } .b2c-minitile.t8 { rotate: 2deg; }
.b2c-onearrow { width: 56px; flex-shrink: 0; }
.b2c-onetile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  width: 158px; aspect-ratio: 1; border-radius: 30px; text-align: center;
  background: linear-gradient(145deg, rgba(163, 183, 99, .22), var(--b2c-surface));
  border: 1.5px solid var(--b2c-accent);
  box-shadow: 0 18px 44px rgba(163, 183, 99, .14);
}
.b2c-onetile img { width: 54px; border-radius: 14px; }
.b2c-onetile b { font-size: 14px; margin-top: 5px; }
.b2c-onetile span { font-size: 11px; color: var(--b2c-accent); font-weight: 700; }
@media (max-width: 560px) {
  .b2c-onechaos { flex-direction: column; }
  .b2c-onearrow { rotate: 90deg; width: 44px; }
}

/* ── Feature-grid (8 kaarten → voorbeeldschermen) ───────── */
.b2c-features { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 34px; }
@media (min-width: 880px) { .b2c-features { grid-template-columns: repeat(4, 1fr); } }
.b2c-feature {
  display: block; background: var(--b2c-bg); border: 1px solid var(--b2c-line);
  border-radius: 20px; padding: 20px 18px; text-align: left; color: var(--b2c-text);
  transition: transform .18s ease, border-color .18s ease;
}
.b2c-feature:hover { transform: translateY(-4px); border-color: var(--b2c-accent); }
.b2c-feature .ic { font-size: 24px; display: block; margin-bottom: 9px; }
.b2c-feature h3 { font-size: 15px; margin-bottom: 5px; }
.b2c-feature p { color: var(--b2c-dim); font-size: 13px; line-height: 1.55; }

/* ── "meer"-links onder secties ─────────────────────────── */
.b2c-morelink { margin-top: 30px; font-weight: 800; font-size: 15.5px; }
.b2c-morelink a:hover { color: var(--b2c-accent-2); }

/* ── Voorbeeld-teaser: live mockup tussen de screenshots ── */
.b2c-shot--live { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.b2c-shot--live .tabmock { --s: .82; }
.b2c-shotcap { text-align: center; color: var(--b2c-dim); font-size: 13px; font-weight: 700; margin-top: 10px; }
/* de mockup heeft een vaste breedte (342×--s): schaal mee met de 3-koloms grid,
   anders duwt hij de kolommen breder dan de container (horizontale overflow) */
@media (max-width: 1060px) { .b2c-shot--live .tabmock { --s: .66; } }
@media (max-width: 840px)  { .b2c-shot--live .tabmock { --s: .56; } }
@media (max-width: 720px)  { .b2c-shot--live .tabmock { --s: min(.74, tan(atan2(100vw - 110px, 342px))); } }

/* ── Hoe-het-werkt: stappenrijen + vignettes ────────────── */
.b2c-hiw { display: grid; gap: 54px; }
.b2c-hiwrow { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 880px) {
  .b2c-hiwrow { grid-template-columns: 1fr 1fr; gap: 60px; }
  .b2c-hiwrow:nth-child(even) .b2c-hiwviz { order: -1; }
}
.b2c-hiwnum {
  display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--b2c-accent); color: #101014; font-weight: 800; font-size: 18px;
  margin-bottom: 12px;
}
.b2c-hiwviz { display: flex; justify-content: center; }
.b2c-hiwviz--phone .tabmock.hiw-phone { --s: min(.72, tan(atan2(100vw - 88px, 342px))); }
/* ── Alex groot over de rand van de telefoon (card-yntza1y, 4/8/2026) ──────────────
   De gids die dit blok verkoopt, stond alleen piepklein in de chatregel ín het scherm.
   .b2c-alexviz krimpt om de telefoon heen (inline-block), zodat het portret zich op de
   linkerrand van het toestel kan afzetten in plaats van op de kolombreedte: bij een andere
   schaal (--s) blijft de overlap dus even groot. De helft die buiten de telefoon valt, past
   ook op 375 px nog ruim binnen het scherm. */
.b2c-alexviz { position: relative; display: inline-block; }
.b2c-alexface {
  position: absolute; z-index: 3; top: 4%; left: 0; transform: translateX(-46%);
  width: clamp(104px, 11vw, 152px); height: auto; aspect-ratio: 1; border-radius: 50%;
  object-fit: cover; background: var(--b2c-surface);
  border: 3px solid var(--b2c-accent);
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65);
}
/* vignette: mock.css-primitieven (bubbels, chips, widgets) in een
   losse kaart i.p.v. een volledig telefoonkader */
.tabmock.b2c-vignette {
  width: 100%; max-width: 400px; height: auto;
  background: var(--b2c-bg); border: 1px solid #2e2e38; border-radius: 24px;
  padding: 20px 18px; display: flex; flex-direction: column; gap: 11px;
  font-size: 13.5px; line-height: 1.45; box-shadow: 0 22px 50px rgba(0, 0, 0, .4);
}
.tabmock.b2c-vignette .cat { display: inline-block; margin: 3px 4px 0 0; }
.b2c-trust-grid--3 { grid-template-columns: 1fr; max-width: 980px; margin-inline: auto; }
@media (min-width: 880px) { .b2c-trust-grid--3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ── Voorbeeld-pagina: mockup-grid + 5 screenshots ──────── */
.b2c-mockgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 46px 26px; justify-items: center; margin-top: 10px;
}
.b2c-mockshot {
  display: flex; flex-direction: column; align-items: center; max-width: 360px;
  scroll-margin-top: 90px;                     /* ankers vallen niet achter de sticky header */
  content-visibility: auto; contain-intrinsic-size: 320px 700px;  /* 8 telefoon-DOM's goedkoop houden */
}
.b2c-mockshot .tabmock { --s: min(.9, tan(atan2(100vw - 88px, 342px))); }
.b2c-mockcap { margin-top: 16px; text-align: center; }
.b2c-mockcap h2 { font-size: 17.5px; margin-bottom: 5px; }
.b2c-mockcap p { font-size: 13.5px; color: var(--b2c-dim); max-width: 42ch; line-height: 1.6; }
.b2c-shots--5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 920px) { .b2c-shots--5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .b2c-shots--5 { grid-template-columns: 1fr 1fr; max-width: none; } }

/* ============================================================
   Reisadviseurs-sectie (B2B, juli 2026): hero-visual, statstrip,
   vergelijkingstabellen, browser-frame, quote + contactformulier.
   ============================================================ */

/* ── B2B-hero: twee statische live mockups ──────────────── */
.b2c-b2bviz { position: relative; height: 470px; }
.b2c-b2bviz .tabmock { position: absolute; }
.b2c-b2bviz .tabmock .phone { box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }
.b2c-b2bviz .bv-a { --s: .55; left: 6px; top: 44px; rotate: -6deg; opacity: .92; }
.b2c-b2bviz .bv-b { --s: .62; right: 6px; top: 0; z-index: 2; }
@media (max-width: 919px) {
  .b2c-b2bviz { height: auto; display: flex; justify-content: center; }
  .b2c-b2bviz .bv-a { display: none; }
  .b2c-b2bviz .bv-b { position: static; --s: min(.62, tan(atan2(100vw - 96px, 342px))); }
}

/* ── Statstrip ──────────────────────────────────────────── */
.b2c-strip { border-block: 1px solid var(--b2c-line); background: var(--b2c-surface); }
.b2c-strip .in {
  max-width: 1120px; margin: 0 auto; padding: 15px 22px;
  display: flex; flex-wrap: wrap; gap: 8px 36px; justify-content: center;
  color: var(--b2c-dim); font-size: 14.5px; font-weight: 600;
}
.b2c-strip b { color: var(--b2c-accent); font-weight: 800; }

/* ── Vergelijkingstabellen (meerwaarde) ─────────────────── */
.b2c-cmp { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 34px; }
@media (min-width: 880px) { .b2c-cmp { grid-template-columns: 1fr 1fr; align-items: start; } }
.b2c-cmp .vt { background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 20px; overflow: hidden; }
.b2c-cmp table { width: 100%; border-collapse: collapse; }
.b2c-cmp th { text-align: left; padding: 16px 18px; font-size: 16.5px; border-bottom: 1px solid var(--b2c-line); }
/* Handgetekende rode cirkel om een kop. ⚠️ .vt heeft overflow:hidden (voor de
   afronding), dus de cirkel moet bínnen de padding van de th blijven: 16px speling
   links/rechts tegen 18px padding, 13px boven/onder tegen 16px. */
.b2c-omcirkeld { position: relative; display: inline-block; }
.b2c-omcirkeld > svg {
  /* Bewust asymmetrisch: links is er maar 18px padding vóór de clip, rechts staat de
     rest van de kaartbreedte leeg. Zo kan de cirkel ruim zijn zonder afgesneden te
     worden — een handgetrokken cirkel is toch nooit netjes gecentreerd. */
  position: absolute; left: -15px; top: 50%; transform: translateY(-50%);
  width: calc(100% + 67px); height: calc(100% + 30px);
  color: #ff4d4f; pointer-events: none;
  /* Twee valkuilen, allebei gemeten:
     1. `.b2c img, .b2c svg { max-width: 100% }` (r. 32) klemt de cirkel terug op de
        tekstbreedte — vandaar max-width:none.
     2. Een svg mét viewBox is een VERVANGEN element met intrinsieke verhouding: bij
        width:auto rekent de browser de breedte uit de hoogte en negeert hij `right`.
        De breedte moet dus expliciet, niet via left+right. */
  max-width: none;
}
.b2c-cmp td { padding: 11px 14px 11px 0; border-bottom: 1px solid #1e1e26; font-size: 13.5px; color: var(--b2c-dim); line-height: 1.5; vertical-align: top; }
.b2c-cmp tr:last-child td { border-bottom: none; }
.b2c-cmp td.c { width: 44px; padding: 13px 12px 0 16px; color: var(--b2c-accent); font-weight: 800; }
.b2c-cmp td b { display: block; color: var(--b2c-text); font-size: 14.5px; }

/* ── Browser-frame (cp-wizard-screenshot) ───────────────── */
.b2c-browser { border: 1px solid #33333d; border-radius: 16px; background: #000; overflow: hidden; box-shadow: 0 26px 60px rgba(0, 0, 0, .5); }
.b2c-browser .bar { display: flex; gap: 6px; padding: 10px 12px; background: #15151b; border-bottom: 1px solid #26262e; }
.b2c-browser .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2e2e38; }
.b2c-browser img { display: block; width: 100%; }

/* ── Quote ──────────────────────────────────────────────── */
.b2c-quote { max-width: 700px; margin: 0 auto; text-align: center; }
.b2c-quote p { font-size: clamp(19px, 2.6vw, 26px); font-weight: 800; line-height: 1.45; letter-spacing: -.01em; }
.b2c-quote footer { color: var(--b2c-dim); margin-top: 14px; font-size: 14px; }

/* ── Contactformulier ───────────────────────────────────── */
.b2c-form { max-width: 560px; margin: 0 auto; text-align: left; }
.b2c-form label { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--b2c-dim); margin: 18px 0 6px; }
.b2c-form input[type=text], .b2c-form input[type=email], .b2c-form textarea {
  width: 100%; background: var(--b2c-surface); border: 1px solid #2e2e38; border-radius: 12px;
  padding: 14px 15px; font: inherit; font-size: 16px; color: var(--b2c-text); outline: none;
}
.b2c-form input:focus, .b2c-form textarea:focus { border-color: var(--b2c-accent); }
.b2c-form textarea { min-height: 140px; resize: vertical; }
.b2c-form .b2c-btn { width: 100%; margin-top: 26px; }
.b2c-err { background: rgba(248, 113, 113, .12); color: #f87171; border-radius: 10px; padding: 12px 15px; font-size: 14px; margin: 14px 0 4px; }
.b2c-okbox { background: rgba(163, 183, 99, .1); border: 1px solid var(--b2c-accent); border-radius: 16px; padding: 26px; font-size: 16px; line-height: 1.6; max-width: 560px; margin: 24px auto 0; text-align: left; }
.b2c-okbox b { color: var(--b2c-accent); }
.b2c-hp { position: absolute; left: -5000px; top: -5000px; }

/* ============================================================
   Functionaliteiten / Features (public/b2c/functionaliteiten/) — scrollytelling.
   Eén telefoon blijft staan terwijl de tekstblokken erlangs scrollen; het scherm
   ÍN de telefoon wisselt per blok mee en de labels springen naar hun widget.
   Alle klassen met .ft- (features). De labels zelf hergebruiken .b2c-chipf
   hierboven — die selectorlijsten noemen .ft-chips expliciet.
   ============================================================ */
.ft-scroll .b2c-wrap { max-width: 1240px; }   /* iets breder: tekst + telefoon + rail */
.ft-grid { display: grid; gap: 30px; }

/* ── De functies als labels onder de hero-knop ──────────────
   Vervangt de lap uitleg die daar stond; elk label springt naar zijn blok. */
.ft-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px;
  max-width: 860px; margin: 30px auto 0; }
.ft-tags a {
  background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 999px;
  padding: 8px 15px; font-size: 13.5px; font-weight: 700; color: var(--b2c-text);
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.ft-tags a:hover, .ft-tags a:focus-visible {
  border-color: var(--b2c-accent); background: var(--b2c-surface-2); transform: translateY(-2px);
}
@media (max-width: 560px) { .ft-tags a { font-size: 12.5px; padding: 7px 12px; } }
@media (prefers-reduced-motion: reduce) { .ft-tags a:hover { transform: none; } }

/* ── Tekstblokken ───────────────────────────────────────── */
.ft-step {
  min-height: 74vh; padding: 30px 0; scroll-margin-top: 90px;
  display: flex; flex-direction: column; justify-content: center;
  opacity: .4; transition: opacity .45s ease;
}
.ft-step.on { opacity: 1; }
.ft-num { display: block; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  color: var(--b2c-accent); margin-bottom: 12px; will-change: transform; }
.ft-step h2 { font-size: clamp(23px, 3vw, 33px); font-weight: 800; letter-spacing: -.02em;
  line-height: 1.2; margin: 4px 0 12px; }
.ft-step .b2c-sub { margin: 0 0 18px; max-width: 46em; }
.ft-step .b2c-checks { margin-top: 0; }

/* ── Rail met bolletjes (alleen op ruime schermen) ──────── */
.ft-rail { display: none; }
.ft-rail a { position: relative; display: block; padding: 8px 0; text-decoration: none; }
.ft-rail i { display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--b2c-surface-2); border: 1px solid var(--b2c-line);
  transition: background .3s ease, border-color .3s ease, scale .3s ease; }
.ft-rail a.on i { background: var(--b2c-accent); border-color: var(--b2c-accent); scale: 1.45; }
.ft-rail span {
  position: absolute; left: 20px; top: 50%; translate: 0 -50%; z-index: 3;
  white-space: nowrap; font-size: 12.5px; font-weight: 700; color: var(--b2c-text);
  background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 999px;
  padding: 4px 11px; opacity: 0; pointer-events: none; transition: opacity .2s ease;
}
.ft-rail a:hover span, .ft-rail a:focus-visible span { opacity: 1; }

/* ── De telefoon ────────────────────────────────────────── */
.ft-stage { position: relative; --ph: 342px; }
.ft-stage .tabmock.ft-app { position: relative; z-index: 1; --s: 1; }
.ft-stage .tabmock .phone { box-shadow: 0 30px 70px rgba(0, 0, 0, .55); }
/* zachte accentgloed achter de telefoon — het enige parallax-element.
   Bewust volledig BINNEN de kolom: uitsteken zou horizontaal scrollen geven. */
.ft-glow {
  position: absolute; inset: -30px 0 auto 0; height: 430px; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(163, 183, 99, .20), transparent 72%);
  filter: blur(26px); will-change: transform;
}
/* De telefoon staat LINKS en de tekst rechts; de labels staan LINKS van de telefoon
   (feedback Carl 27/7) en wijzen naar rechts het scherm in. De telefoon wordt
   daarvoor rechts in zijn kolom geduwd, zodat er links ruimte vrijkomt.
   ⚠️ .ft-chips staat absoluut zodat het geen flex-item wordt en de telefoon niet
   verschuift; pointer-events uit, anders vangen de pijlen kliks op de telefoon af. */
/* ⚠️ Het label WIJST alleen aan; klikken doe je op de widget in de telefoon zelf,
   net als in de echte app. Daarom blijft pointer-events uit staan — anders vangen
   het label en zijn pijl de klik af die voor de widget bedoeld is. */
.ft-chips { position: absolute; inset: 0; pointer-events: none; }
/* ⚠️ max-width ruim genoeg dat het langste label op ÉÉN regel past — anders komt
   "klik hier" op regel drie terecht (feedback Carl 27/7). */
.ft-chips .b2c-chipf {
  right: calc(var(--ph) + 34px); max-width: 240px; white-space: normal; line-height: 1.3;
  text-align: right;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 10px 16px;
}
.ft-chips .b2c-chipf b { font-size: 13.5px; font-weight: 800; }
.ft-chips .b2c-chipf i {
  font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--b2c-accent);
}

/* Het aangewezen onderdeel ín de telefoon: pulserende ring zodat duidelijk is dat
   je dáár moet tikken. Outline i.p.v. border — dat verschuift de layout niet. */
.ft-stage .tabmock .ft-tapme {
  cursor: pointer; outline: 2px solid var(--b2c-accent); outline-offset: 3px;
  animation: ftTapPuls 1.8s ease-in-out infinite;
}
@keyframes ftTapPuls {
  0%, 100% { outline-color: rgba(163, 183, 99, .3); }
  50%      { outline-color: rgba(163, 183, 99, 1); }
}
@media (prefers-reduced-motion: reduce) {
  .ft-stage .tabmock .ft-tapme { animation: none; outline-color: var(--b2c-accent); }
}
/* Het pijltje wijst horizontaal naar het anker en steekt bewust ± 30 px ÍN het
   telefoonscherm: zo zie je precies welk onderdeel bedoeld wordt. De chip heeft
   z-index 4 en de telefoon 1, dus het pijltje tekent eroverheen.
   scaleX(-1) spiegelt de pijl die naar links wees; translate en transform zijn
   aparte eigenschappen, dus het verticaal centreren blijft werken. */
.ft-chips .ft-arr {
  position: absolute; left: 100%; top: 50%; translate: 0 -50%; transform: scaleX(-1);
  width: 76px; height: 22px; color: var(--b2c-accent);
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .55));
}

@media (max-width: 919px) {
  /* Telefoon plakt bovenaan, de tekst scrollt eronderdoor. Eén telefoon-DOM voor
     de hele pagina: tien losse mockups zouden ± 60 kB HTML extra kosten. */
  .ft-grid { grid-template-columns: 1fr; gap: 4px; }
  /* ⚠️ top = de hoogte van de sticky sitekop (63 px), anders schuift de telefoon
     eronder. De achtergrond is bewust DEKKEND: de tekst scrollt onder de telefoon
     door en mag niet in de kieren links en rechts ervan blijven doorschemeren. */
  .ft-stage { order: -1; position: sticky; top: 63px; z-index: 2;
    display: flex; justify-content: center;
    padding: 8px 0 10px; background: var(--b2c-surface); }
  .ft-stage::after {                    /* zachte overgang naar de tekst eronder */
    content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
    background: linear-gradient(var(--b2c-surface), transparent); pointer-events: none;
  }
  /* De telefoon neemt ± 38 % van de vensterhoogte (met kop en marges samen ± de
     helft); de rest is voor de tekst die eronder doorscrollt. Drie grenzen: nooit
     groter dan .62, nooit breder dan het scherm, nooit hoger dan 38vh.
     tan(atan2(a,b)) = deling van twee lengtes, want px/px mag niet in calc(). */
  .ft-stage .tabmock.ft-app {
    --s: min(.62, tan(atan2(100vw - 40px, 342px)), tan(atan2(38vh, 668px)));
  }
  .ft-glow, .ft-chips { display: none; }
  .ft-step { min-height: 0; padding: 24px 0 34px; opacity: 1; }
  .ft-step:first-child { padding-top: 8px; }
}
/* De DOM-volgorde blijft rail → tekst → telefoon (een schermlezer krijgt zo eerst
   de tekst); de kolommen worden hieronder omgezet zodat de telefoon links staat. */
@media (min-width: 920px) {
  .ft-grid { grid-template-columns: 400px minmax(0, 1fr); align-items: start; }
  .ft-stage { grid-column: 1; grid-row: 1; position: sticky; top: max(84px, calc(50vh - 334px)); }
  /* extra witruimte tussen telefoon en tekst (feedback Carl 27/7) */
  .ft-steps { grid-column: 2; grid-row: 1; padding-left: 34px; }
  .ft-chips { display: none; }            /* te weinig ruimte naast de telefoon */
  .ft-stage .tabmock.ft-app { --s: 1; }
}
@media (min-width: 1200px) {
  /* stagekolom = labelstrook (240) + tussenruimte (34) + telefoon (342) */
  .ft-grid { grid-template-columns: 24px 620px minmax(0, 1fr); }
  .ft-rail { display: block; grid-column: 1; grid-row: 1; position: sticky; top: calc(50vh - 130px); }
  .ft-stage { grid-column: 2; display: flex; justify-content: flex-end; }
  .ft-steps { grid-column: 3; padding-left: 60px; }
  .ft-chips { display: block; }
}
/* Lage vensters: de telefoon van 668 px past niet meer naast de sticky header. */
@media (min-width: 1200px) and (max-height: 830px) {
  .ft-stage { --ph: 280px; }
  .ft-stage .tabmock.ft-app { --s: .82; }
}
@media (prefers-reduced-motion: reduce) {
  /* schermen blijven wisselen (dat is inhoud), alleen de beweging valt weg */
  .ft-step { transition: none; opacity: 1; }
  .ft-num, .ft-glow { transform: none !important; }
}

/* ── "En verder"-kaarten ────────────────────────────────── */
.ft-more { display: grid; gap: 18px; margin-top: 34px; text-align: left; }
@media (min-width: 720px) { .ft-more { grid-template-columns: repeat(2, 1fr); } }
.ft-more article { background: var(--b2c-surface); border: 1px solid var(--b2c-line);
  border-radius: 18px; padding: 24px 24px 26px; }
.ft-more h3 { font-size: 18px; font-weight: 800; margin-bottom: 8px; }
.ft-more h3 .svgi, .ft-more .ic { color: var(--b2c-accent); }
.ft-more p { color: var(--b2c-dim); font-size: 15.5px; line-height: 1.6; }

/* Avatar van Alex boven zijn stap (feedback Carl 27/7) */
.ft-ava { width: 82px; height: 82px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--b2c-accent); margin-bottom: 16px; }


/* Onderlijnde nadruk in lopende tekst (Carl 27/7). Accentkleur en wat afstand,
   zodat het niet als link leest. */
.b2c-sub u { color: var(--b2c-text); text-decoration-color: var(--b2c-accent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ── Prijzen B2B — SLAPEND sinds card-xddnws2 (4/8/2026) ─────
   Drie pakketkaarten uit planCatalog(). Zelfde ritme als .b2c-problems
   (mobiel één kolom, vanaf 820px drie), maar met een uitgelichte middelste
   kaart voor het pakket dat een label draagt.
   ⚠️ De sectie stond op /reisadviseurs/#prijzen en is naar het bureaupaneel verhuisd
   (panel/billing.php). Deze regels staan dus even op non-actief; ze blijven staan omdat
   billing.php ze nabouwt en dit de plek is waar dat ontwerp vandaan komt. */
.b2c-plans { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 34px; }
@media (min-width: 820px) { .b2c-plans { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.b2c-plan {
  position: relative; background: var(--b2c-bg); border: 1px solid var(--b2c-line);
  border-radius: 20px; padding: 26px 22px 22px; text-align: left;
  display: flex; flex-direction: column; gap: 10px;
}
.b2c-blk:not(.b2c-blk--tint) .b2c-plan { background: var(--b2c-surface); }
/* Het uitgelichte pakket: accentrand, geen schaalvergroting — dat laatste
   duwt op mobiel de kaart buiten de wrap. */
.b2c-plan--hi { border-color: var(--b2c-accent); }
.b2c-plan-badge {
  position: absolute; top: -11px; left: 22px; padding: 3px 11px; border-radius: 999px;
  background: var(--b2c-accent); color: #101014;
  font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
}
.b2c-plan h3 { font-size: 18px; }
.b2c-plan-price { font-size: 32px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.b2c-plan-price span { font-size: 14px; font-weight: 600; color: var(--b2c-dim); letter-spacing: 0; }
.b2c-plan-per { color: var(--b2c-accent); font-size: 14px; font-weight: 700; margin-top: -6px; }
.b2c-plan-pitch { color: var(--b2c-dim); font-size: 14px; line-height: 1.6; }
.b2c-plan-list { list-style: none; display: grid; gap: 8px; margin: 4px 0 6px; }
.b2c-plan-list li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.b2c-plan-list li::before {
  content: ''; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px;
  border-left: 2px solid var(--b2c-accent); border-bottom: 2px solid var(--b2c-accent);
  transform: rotate(-45deg);
}
/* De knop staat altijd onderaan, ook als de ene kaart meer bullets heeft. */
.b2c-plan .b2c-btn { margin-top: auto; text-align: center; }
.b2c-note--hi { color: var(--b2c-accent); font-weight: 700; }

/* ── Differentiator-sectie "Een reisgids die jóuw reis kent" (card-n27zn1q, 3/8/2026) ──
   Ontwerp van Carl, overgenomen uit zijn losse ontwerpbestand. Twee bewuste afwijkingen:
   de kleuren komen uit de b2c-variabelen (anders staan er twee groenen op de pagina) en het
   label gebruikt de systeem-monostack in plaats van IBM Plex Mono — één labeltje is een extra
   Google-Fonts-verzoek niet waard.

   De desktopvisual is een vaste tekening van 700x470: de tegels, de hub en de uitkomsten
   liggen op absolute posities die exact op de SVG-lijnen aansluiten. Raak die getallen dus
   niet los van elkaar aan. Onder 1180px valt de hele tekening weg en neemt .tab-diff__mobile
   het over met chips, een pijl en dezelfde hub eronder. */
/* Deze ene sectie krijgt een iets bredere kolom dan de standaard 1120px, zodat de vergrote
   tekening er met wat lucht in past. */
#een-app .b2c-wrap { max-width: 1200px; }
/* De slogan draagt sinds card-vimmiza ook de vier slagzinnen die eerst als vinkjeslijst naast
   het schema stonden; op 560px zou dat een smalle toren van zes regels worden. */
#een-app p.b2c-sub { max-width: 780px; }
#een-app p.b2c-sub b { color: var(--b2c-text); font-weight: 700; }

/* De kop staat nu bóven de tekening in plaats van ernaast (card-vimmiza, 4/8/2026), dus de
   tekening krijgt de volle breedte en mag groter. Ze bestaat uit absolute posities binnen een
   vast 700x470-kader, dus vergroten doen we met één transform in plaats van elk getal apart
   aan te raken — zo blijven de SVG-lijnen exact op de tegels aansluiten.
   --tds loopt in stappen mee met het venster tot 1,5x. Bewust met media queries en niet met
   min(1.5, calc((100vw - 60px)/700)): dat laatste levert een LENGTE op, geen getal, en scale()
   wil een getal — de hele transform is dan ongeldig en er gebeurt niets. Elke stap is zo
   gekozen dat 700px x --tds binnen de kolom past (venster min ±60px voor padding en schuifbalk).
   Een transform verandert de layout niet, dus de extra hoogte die de schaal oplevert vangen we
   op met margin-bottom; transform-origin houdt de tekening gecentreerd. */
.tab-diff { --tds: 1; display: block; margin-top: 38px; text-align: left; }
@media (min-width:  820px) { .tab-diff { --tds: 1.08; } }
@media (min-width:  940px) { .tab-diff { --tds: 1.25; } }
@media (min-width: 1060px) { .tab-diff { --tds: 1.42; } }
@media (min-width: 1180px) { .tab-diff { --tds: 1.5; } }

.tab-diff__visual { position: relative; width: 700px; height: 470px; margin: 0 auto;
  transform: scale(var(--tds)); transform-origin: top center;
  margin-bottom: calc((var(--tds) - 1) * 470px); }
.tab-diff__wires { position: absolute; inset: 0; overflow: visible; }
.tab-diff__eyebrow { position: absolute; top: 22px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #5d5d54; }
.tab-diff__eyebrow--in { left: 0; }
.tab-diff__eyebrow--out { left: 570px; }
.tab-diff__tiles { position: absolute; left: 0; top: 78px; display: grid; grid-template-columns: 120px 120px; gap: 10px 12px; }
.tab-diff__tile { background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 11px;
  padding: 0 12px; height: 44px; display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--b2c-dim); }
.tab-diff__tile i { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #4d4d45; }

.tab-diff__hub { position: absolute; left: 340px; top: 147px; width: 200px; height: 176px; padding: 24px 20px;
  border-radius: 18px; text-align: center; background: linear-gradient(180deg, #1b1e12, #141510);
  border: 1px solid color-mix(in srgb, var(--b2c-accent) 45%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--b2c-accent) 5%, transparent),
              0 24px 60px -18px color-mix(in srgb, var(--b2c-accent) 28%, transparent); }
.tab-diff__mark { width: 42px; height: 42px; margin: 0 auto 14px; border-radius: 12px; display: block; }
.tab-diff__hub b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tab-diff__hub p { margin: 5px 0 0; font-size: 12.5px; color: var(--b2c-accent-2); }
.tab-diff__hub small { display: block; margin-top: 6px; font-size: 11px; color: #83837a;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.tab-diff__out { position: absolute; left: 570px; width: 130px; height: 56px; display: flex; align-items: center;
  background: var(--b2c-surface); border: 1px solid color-mix(in srgb, var(--b2c-accent) 25%, transparent);
  border-radius: 11px; padding: 0 14px; font-size: 12.5px; line-height: 1.35; color: var(--b2c-text); }
.tab-diff__out--1 { top: 127px; }
.tab-diff__out--2 { top: 207px; }
.tab-diff__out--3 { top: 287px; }

.tab-diff__mobile { display: none; }
/* Vroeger klapte de sectie al om op 1219px, want dan moest er nog een tekstkolom van 400px
   naast de tekening passen. Die kolom is weg (card-vimmiza), dus de tekening kan veel langer
   mee: onder 800px zou --tds onder 1 duiken en werd ze kleiner dan het origineel — dáár klapt
   ze nu om naar de mobiele variant met chips, een pijl en dezelfde hub. */
@media (max-width: 800px) {
  .tab-diff { margin-top: 28px; }
  .tab-diff__visual { display: none; }
  .tab-diff__mobile { display: flex; flex-direction: column; gap: 18px; }
  .tab-diff__chips { display: flex; flex-wrap: wrap; gap: 7px; }
  .tab-diff__chip { background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 8px;
    padding: 7px 10px; font-size: 11.5px; color: var(--b2c-dim); }
  .tab-diff__arrow { align-self: center; color: #6f7a52; font-size: 18px; line-height: 1; }
  /* De hub is op mobiel geen absoluut geplaatst blok meer maar gewoon een kaart in de kolom. */
  .tab-diff__hub { position: static; width: 100%; height: auto; }
  .tab-diff__outs { display: flex; flex-direction: column; gap: 8px; }
  .tab-diff__out { position: static; width: 100%; height: auto; padding: 11px 13px; font-size: 13.5px; }
}

/* ── "De top 10 ergernissen" — vervangt de prijzentabel (card-tccby2k, 3/8/2026) ──
   Letterlijk overgenomen uit Carls ontwerpbestand. Drie afwijkingen, dezelfde als bij
   card-n27zn1q: het groen komt uit --b2c-accent (anders twee groenen op één pagina), het
   label gebruikt de systeem-monostack in plaats van IBM Plex Mono, en de teksten lopen via
   t() omdat deze pagina ook in het Engels bestaat. De warme tint van de ergernissenkolom is
   nieuw en staat hieronder als --b2c-warm.

   De prijs hoort klein en NA de voordelen te blijven staan — dat is een uitdrukkelijke
   instructie uit het ontwerp, niet zomaar een opmaakkeuze. */
.tabw { --b2c-warm: #c98a63; display: flex; flex-direction: column; gap: 52px; }
.tabw .b2c-wrap { display: flex; flex-direction: column; gap: 52px; }
.tabw__head { display: flex; flex-direction: column; gap: 16px; max-width: 680px; }
.tabw__title { margin: 0; font-size: clamp(34px, 4.2vw, 52px); line-height: 1.04; letter-spacing: -.03em; font-weight: 800; }
.tabw__sub { margin: 0; font-size: 17.5px; line-height: 1.6; color: var(--b2c-dim); max-width: 600px; text-wrap: pretty; }
.tabw__cols { display: flex; gap: 28px; align-items: stretch; }
.tabw__col { flex: 1; display: flex; }

/* De ergernissenkolom stond op bijna-zwart (#0f0f0e) met kleine grijze regels: precies de
   kolom die de bezoeker moet lézen, was het slechtst leesbaar. Sinds card-qstr9ok (4/8/2026,
   op vraag van Carl) staat hij op dezelfde lichtere tint als de sectie "Jouw documenten, jouw
   reis" (--b2c-surface) en zijn de tien regels even groot en even wit als de winst ernaast. */
.tabw__pain { flex: 1; background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 18px;
  padding: 34px 32px; display: flex; flex-direction: column; gap: 22px; }
.tabw__eyebrow { display: flex; align-items: center; gap: 10px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.tabw__eyebrow--warm { color: var(--b2c-warm); }
.tabw__eyebrow--warm i { width: 7px; height: 7px; border-radius: 50%; background: var(--b2c-warm); }
.tabw__list { display: flex; flex-direction: column; gap: 13px; margin: 0; padding: 0; list-style: none; }
.tabw__li { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: var(--b2c-text); }
.tabw__x { flex: none; width: 19px; height: 19px; border-radius: 50%; margin-top: 2px;
  background: color-mix(in srgb, var(--b2c-warm) 13%, transparent); color: var(--b2c-warm);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; }

.tabw__fix { flex: 1; border-radius: 18px; padding: 34px 32px; display: flex; flex-direction: column; gap: 22px;
  background: linear-gradient(180deg, #1c1f13, #141510);
  border: 1px solid color-mix(in srgb, var(--b2c-accent) 42%, transparent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--b2c-accent) 4%, transparent),
              0 34px 80px -24px color-mix(in srgb, var(--b2c-accent) 26%, transparent); }
.tabw__eyebrow--accent { color: var(--b2c-accent-2); }
.tabw__mark { width: 34px; height: 34px; border-radius: 10px; display: block; }
.tabw__wins { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }
.tabw__win { display: flex; gap: 13px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; }
.tabw__check { flex: none; width: 20px; height: 20px; border-radius: 50%; margin-top: 2px;
  background: color-mix(in srgb, var(--b2c-accent) 13%, transparent); color: var(--b2c-accent-2);
  display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
/* margin-top:auto duwt prijs + knop naar beneden, zodat beide kaarten even hoog blijven
   ook als de ergernissenlijst langer is. */
.tabw__foot { margin-top: auto; display: flex; flex-direction: column; gap: 16px; }
.tabw__price { border-top: 1px solid color-mix(in srgb, var(--b2c-accent) 14%, transparent);
  padding-top: 18px; display: flex; flex-direction: column; gap: 5px; }
.tabw__price b { font-size: 17px; font-weight: 700; }
.tabw__price span { font-size: 13.5px; color: var(--b2c-dim); line-height: 1.5; }
/* .b2c a (olijf) is specifieker dan .tabw__cta, waardoor de knoptekst olijf op olijf stond en
   de knop dus leeg leek. Vandaar .b2c a.tabw__cta, net als bij .b2c a.b2c-btn bovenaan. */
.b2c a.tabw__cta { display: block; text-align: center; background: var(--b2c-accent); color: #12140a;
  font-size: 16px; font-weight: 700; padding: 15px 20px; border-radius: 12px; text-decoration: none; }
.b2c a.tabw__cta:hover { background: var(--b2c-accent-2); }
.tabw__fine { font-size: 12.5px; color: #7d7d74; line-height: 1.5; text-align: center; }
.tabw__quote { text-align: center; font-size: 20px; line-height: 1.4; color: #c3c3b9; letter-spacing: -.01em; }

@media (max-width: 1000px) {
  .tabw, .tabw .b2c-wrap { gap: 26px; }
  .tabw__sub { font-size: 15px; }
  .tabw__cols { flex-direction: column; gap: 20px; }
  .tabw__pain, .tabw__fix { padding: 24px 20px; }
  .tabw__li, .tabw__win { font-size: 15px; }
  .tabw__quote { font-size: 17px; }
}

/* ── /probeer/ ↔ /free-try/ — scan de QR en je hebt de app (card-855875017) ───────────
   Eén kolom, zoals de bureausimulator (feedback Carl 4/8/2026): de code in een kaart met de
   drie stapregels eronder, en verder niets. Alles wat hier bij komt, komt tussen de bezoeker
   en zijn camera te staan. */
/* ⚠️ Alles moet binnen één scherm passen (feedback Carl): daarom een krappere sectie, een
   kleinere kop en een QR van 220 px in plaats van de gebruikelijke maten. */
.b2c-probeer-sec { padding-top: 34px; padding-bottom: 14px; }
.b2c-probeer .b2c-kicker { margin-bottom: 12px; }
.b2c-probeer h1 { font-size: clamp(26px, 4vw, 34px); margin-bottom: 8px; }
.b2c-probeer .b2c-lede { margin-inline: auto; margin-bottom: 0; }

/* De naam wijzigen is een extraatje, geen stap: klein, onder de code, en wie niets doet
   scant gewoon de QR die er al staat. */
.b2c-probeer-naam {
  display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 14px; font-size: 14px; color: var(--b2c-dim);
}
.b2c-probeer-naam input {
  width: 130px; padding: 7px 11px; font: inherit; font-size: 14px; text-align: center;
  color: var(--b2c-text); background: var(--b2c-surface);
  border: 1px solid var(--b2c-line); border-radius: 10px;
}
.b2c-probeer-naam input:focus-visible { outline: 2px solid var(--b2c-accent); outline-offset: 2px; }
.b2c-probeer-naam button {
  padding: 7px 13px; font: inherit; font-size: 14px; cursor: pointer;
  color: var(--b2c-text); background: transparent;
  border: 1px solid var(--b2c-line); border-radius: 10px;
}
.b2c-probeer-naam button:hover { border-color: var(--b2c-accent); color: var(--b2c-accent); }

/* ⚠️ De QR is bewust 220 px: alles moet op één scherm passen, zonder scrollen. */
.b2c-probeer-qr {
  max-width: 340px; margin: 18px auto 14px; text-align: center;
  background: var(--b2c-surface); border: 1px solid var(--b2c-line); border-radius: 20px; padding: 16px;
}
.b2c-probeer-qr img { width: 100%; max-width: 220px; height: auto; border-radius: 12px; }

.b2c-probeer-stappen {
  list-style: none; counter-reset: stap; margin: 14px 0 0; padding: 0;
  display: grid; gap: 8px; text-align: left;
}
.b2c-probeer-stappen li {
  counter-increment: stap; position: relative; padding-left: 34px;
  font-size: 14.5px; line-height: 1.45; color: var(--b2c-dim);
}
/* Het cijfer als vorm, niet als emoji — zelfde regel als de rest van de chrome. */
.b2c-probeer-stappen li::before {
  content: counter(stap); position: absolute; left: 0; top: -1px;
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: color-mix(in srgb, var(--b2c-accent) 18%, transparent);
  color: var(--b2c-accent); font-weight: 800; font-size: 13px;
}

.b2c-probeer-trust { color: var(--b2c-dim); font-size: 14.5px; margin: 0; }

@media (max-width: 600px) {
  .b2c-probeer-qr { padding: 16px; margin-top: 24px; }
  .b2c-probeer-qr img { max-width: 260px; }
}