/* ============================================================
   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; }
@media (max-width: 720px) {
  .b2c-header nav { gap: 14px; font-size: 14px; }
  .b2c-header nav a.b2c-hide-m { display: none; }
  .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; }
}
/* 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); }
.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; }
.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))); }
/* 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 (/reisadviseurs/#prijzen) ───────────────────
   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. */
.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; }