/* ============================================================================
   Hello Sally — globals.css
   All design tokens + every class/style for the marketing site live here.
   Built on the Hello Sally design system (direction D · Warm × Editorial).
   Sections:
     1. Tokens (colors, type, spacing, radii, shadows, motion)
     2. Base / reset
     3. Layout helpers (wrap, section, sechead, kicker, eyebrow)
     4. Buttons & form controls
     5. Navigation
     6. Hero
     7. Character grid
     8. Timeline (playful horizontal path)
     9. Beauty & Brains
    10. Memory note
    11. Telefoontjes
    12. Pricing
    13. Ask / contact
    14. Footer
    15. Modals
    16. Thank-you page
    17. Reduced motion
============================================================================ */

/* ── 1. Tokens ────────────────────────────────────────────────────────── */
:root {
  /* Brand: Sally Blue (ramp keeps the --coral-* names so every reference recolours centrally) */
  --coral-50:#EEF3FF; --coral-100:#DAE4FF; --coral-200:#B7CCFF; --coral-300:#8AACFF;
  --coral-400:#5B8AF7; --coral-500:#2F6BFF; --coral-600:#1F57E8; --coral-700:#1A45C0;
  --coral-800:#163795; --coral-900:#142C73;

  /* Cool slate (neutrals) */
  --ink-900:#0F172A; --ink-800:#1E293B; --ink-700:#334155; --ink-600:#475569;
  --ink-500:#64748B; --ink-400:#94A3B8; --ink-300:#CBD5E1; --ink-200:#E2E8F0;
  --ink-100:#F1F5F9; --ink-50:#F8FAFC;

  /* Paper / surfaces (clean white) */
  --paper:#FFFFFF; --paper-sunken:#F4F7FB; --surface:#FFFFFF; --surface-alt:#FBFCFE;

  /* Accents (brighter) */
  --mint-50:#E5F7F0; --mint-100:#C6EFE0; --mint-300:#6FD8B5; --mint-500:#14B981; --mint-600:#129974; --mint-700:#0E7A5B;
  --sky-500:#0EA5E9; --sky-700:#1C6A98;
  --butter-500:#FFB020;
  --berry-500:#F0413E;

  /* Multi-color accents (per-index palette) */
  --acc-blue:#2F6BFF; --acc-green:#14B981; --acc-amber:#FFB020;
  --acc-orange:#FF6A2C; --acc-red:#F0413E; --acc-sky:#0EA5E9;

  /* Borders */
  --border-hairline:var(--ink-200);
  --border-strong:var(--ink-300);

  /* Fonts */
  --font-display:'Sora',system-ui,sans-serif;
  --font-sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-mono:'JetBrains Mono',ui-monospace,'SF Mono',Menlo,monospace;

  /* Type scale */
  --text-2xs:.6875rem; --text-xs:.75rem; --text-sm:.875rem; --text-md:1rem;
  --text-lg:1.125rem; --text-xl:1.375rem; --text-2xl:1.75rem; --text-3xl:2.25rem;
  --text-4xl:3rem; --text-5xl:4rem; --text-6xl:5.25rem;

  /* Line heights & letter spacing */
  --lh-tight:1.05; --lh-snug:1.18; --lh-normal:1.5; --lh-relaxed:1.65;
  --ls-tighter:-0.03em; --ls-tight:-0.015em; --ls-wide:0.04em; --ls-caps:0.08em;

  /* Spacing (4px grid) */
  --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem;
  --space-6:1.5rem; --space-8:2rem; --space-10:2.5rem; --space-12:3rem; --space-16:4rem;
  --space-20:5rem; --space-24:6rem; --space-32:8rem;

  /* Radii (squarer / harder corners) */
  --radius-xs:2px; --radius-sm:3px; --radius-md:5px; --radius-lg:6px;
  --radius-xl:8px; --radius-2xl:10px; --radius-pill:999px;

  /* Shadows (flat, slate-tinted, low alpha) */
  --shadow-xs:0 1px 1px rgba(15,23,42,.04);
  --shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --shadow-md:0 2px 6px rgba(15,23,42,.06);
  --shadow-lg:0 6px 16px rgba(15,23,42,.07);
  --shadow-xl:0 12px 32px rgba(15,23,42,.09);
  --shadow-coral:none;

  /* Motion */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* Focus ring */
  --ring:0 0 0 3px var(--coral-200);

  /* Layout */
  --container:1180px;
  --pad-x:40px;
}

/* ── 2. Base / reset ──────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body {
  margin:0; font-family:var(--font-sans); font-size:var(--text-md);
  line-height:var(--lh-normal); font-weight:400; color:var(--ink-800);
  background:var(--paper); -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5 {
  font-family:var(--font-display); font-weight:700; color:var(--ink-900);
  line-height:var(--lh-snug); letter-spacing:var(--ls-tight); margin:0;
}
p { margin:0; }
img,svg { display:block; max-width:100%; }
a { color:var(--coral-600); text-decoration:none; }
ul,ol { margin:0; padding:0; list-style:none; }
::selection { background:var(--coral-200); color:var(--ink-900); }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-sm); }

/* ── 3. Layout helpers ────────────────────────────────────────────────── */
.wrap { max-width:var(--container); margin:0 auto; padding-inline:var(--pad-x); }

.section { padding:96px 0; }
.section--sunken { background:var(--paper-sunken); }

.sechead { max-width:640px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
.sechead--center { margin-inline:auto; text-align:center; align-items:center; }
.sectitle { font-size:40px; line-height:1.08; letter-spacing:var(--ls-tighter); font-weight:700; }
.secsub { font-size:18px; line-height:1.55; color:var(--ink-600); }

/* Let the timeline intro span the available width (one line when there's room). */
#how .sechead { max-width:none; }

.kicker {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--coral-500);
  display:inline-flex; align-items:center; gap:12px;
}
.kicker::before { content:''; width:30px; height:1px; background:var(--coral-500); }

.hero__title .hl {
  display:inline-block; color:#fff; background:var(--acc-orange);
  padding:.08em .12em .02em .12em; border-radius:0px; box-decoration-break:clone;
  -webkit-box-decoration-break:clone;
}
.sechead--center .kicker::after { content:''; width:30px; height:1px; background:var(--coral-500); }

.eyebrow {
  display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  font-size:14px; font-weight:600; color:var(--coral-700);
  background:var(--coral-50); border:1px solid var(--coral-100);
  padding:7px 14px; border-radius:var(--radius-pill);
}

/* ── 4. Buttons & form controls ───────────────────────────────────────── */
.btn {
  font-family:var(--font-sans); font-weight:700; font-size:15px; cursor:pointer;
  border:0; border-radius:var(--radius-md); padding:0 20px; height:46px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  white-space:nowrap; transition:background var(--dur-base) var(--ease-out),
  transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out),
  border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
.btn--lg { height:54px; font-size:16px; padding:0 26px; }
.btn--block { width:100%; }
.btn--primary { background:var(--coral-500); color:#fff; box-shadow:var(--shadow-coral); }
.btn--primary:hover { background:var(--coral-600); }
.btn--secondary { background:var(--surface); color:var(--ink-800); border:1px solid var(--border-strong); box-shadow:none; }
.btn--secondary:hover { border-color:var(--coral-400); color:var(--coral-700); }
.btn--sky { background:var(--acc-orange); color:#fff; box-shadow:none; }
.btn--sky:hover { background:#E55E22; }
.btn--dl {
  background:var(--acc-blue); color:#fff;
  box-shadow:0 4px 14px rgba(47,107,255,.35);
  gap:10px;
}
.btn--dl:hover { background:#1a58f5; box-shadow:0 6px 18px rgba(47,107,255,.45); }
.btn--dl .ic { font-size:18px; }

.field { display:flex; flex-direction:column; gap:6px; }
.field label {
  font-size:12px; font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ink-500);
}
.input {
  font-family:var(--font-sans); font-size:16px; color:var(--ink-900);
  height:50px; padding:0 16px; border-radius:var(--radius-md);
  border:1.5px solid var(--ink-200); background:var(--surface);
  outline:none; width:100%;
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.input::placeholder { color:var(--ink-400); }
.input:focus { border-color:var(--coral-400); box-shadow:var(--ring); }
.input--icon { padding-left:42px; }
.inputwrap { position:relative; }
.inputwrap__icon { position:absolute; left:13px; top:50%; transform:translateY(-50%); font-size:15px; }

.check { display:flex; align-items:flex-start; gap:10px; font-size:14px; color:var(--ink-700); line-height:1.45; }
.check input { margin-top:2px; width:18px; height:18px; accent-color:var(--coral-500); flex:none; }

/* ── 5. Navigation ────────────────────────────────────────────────────── */
.nav {
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.80);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--border-hairline);
}
.nav__inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand { display:inline-flex; align-items:center; gap:11px; }
.brand img:first-child { border-radius:10px; flex:none; }
.brand__logo { height:56px; width:auto; display:block; margin-top:12px; }
.nav__links { display:flex; align-items:center; gap:30px; }
.navlink { font-size:15px; font-weight:600; color:var(--ink-700); transition:color var(--dur-fast) var(--ease-out); }
.navlink:hover { color:var(--coral-600); }
.nav__cta { display:flex; align-items:center; gap:12px; }
.nav__burger {
  display:none; width:42px; height:42px; border:0; background:none; cursor:pointer;
  flex-direction:column; justify-content:center; gap:5px; align-items:center;
}
.nav__burger span { width:22px; height:2px; background:var(--ink-800); border-radius:2px; transition:transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); }
.nav__burger[aria-expanded="true"] span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
/* Full-page overlay menu (mobile). Sits below the sticky header (z-index 100)
   so the burger/X in the header stays clickable to close it. */
.nav__drawer {
  position:fixed; inset:0; z-index:90;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; padding:calc(80px + 28px) var(--pad-x) 48px;
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
}
.nav__drawer[hidden] { display:none; } /* beats the .nav__drawer display:flex above */
.nav__drawer-link { font-size:24px; font-weight:600; color:var(--ink-800); padding:10px 8px; }
.nav__drawer-link:hover { color:var(--coral-600); }
.nav__drawer-actions {
  margin-top:22px; display:flex; flex-direction:column; gap:12px; min-width:220px;
}

@media (max-width:900px) {
  .nav__links { display:none; }
  .nav__burger { display:inline-flex; }
  .nav__cta > .btn { display:none; } /* "Bestellen" zit in het menu; header houdt alleen de burger/X */
}
@media (min-width:901px) { .nav__drawer { display:none !important; } }

/* ── 6. Hero ──────────────────────────────────────────────────────────── */
.hero { padding:56px 0 92px; background:rgba(241,238,234,.5); }
.hero__grid { display:grid; grid-template-columns:1.04fr .96fr; gap:60px; align-items:stretch; }

.hero__title { font-size:54px; line-height:1.04; letter-spacing:var(--ls-tighter); font-weight:700; margin-top:12px; }
.hero__wink { display:inline; font-style:normal; color:var(--coral-600); }

.card {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:24px 26px 26px; box-shadow:var(--shadow-md);
}
.hero__form-card { margin-top:28px; max-width:480px; }
.card__head { display:flex; align-items:center; gap:10px; }
.card__num { display:inline-flex; color:var(--acc-blue); }
.card__num .ic { width:24px; height:24px; }
.card__title { font-size:20px; font-weight:700; white-space:nowrap; }
.card__sub { font-size:14px; line-height:1.5; color:var(--ink-600); margin:7px 0 16px; }

.lead-form__row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lead-form .field { margin-top:14px; }
.lead-form .lead-form__row .field { margin-top:0; }

.submit {
  margin-top:18px; height:56px; border:1px solid var(--coral-600); border-radius:var(--radius-md);
  background:var(--coral-600); color:#fff; font-family:var(--font-sans);
  font-weight:700; font-size:16px; cursor:pointer; display:flex;
  align-items:center; justify-content:space-between; gap:9px; width:100%;
  padding:0 12px 0 22px; box-shadow:none; transition:background var(--dur-base) var(--ease-out);
}
.submit:hover { background:var(--coral-700); }
.submit:hover .submit__arrow { transform:translateX(3px); }
.submit__label { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.submit__meta { display:inline-flex; align-items:center; gap:9px; font-size:13.5px; font-weight:600; white-space:nowrap; }
.submit__meta > span:first-child { opacity:.85; }
.submit__arrow {
  width:36px; height:36px; border-radius:var(--radius-sm); background:rgba(255,255,255,.18);
  display:inline-flex; align-items:center; justify-content:center; font-size:18px;
  transition:transform var(--dur-base) var(--ease-out);
}
.lead-form__fine { font-size:12.5px; color:var(--ink-400); margin-top:12px; display:flex; align-items:center; gap:7px; }
.lead-form__status { margin-top:12px; font-size:14px; font-weight:600; padding:11px 14px; border-radius:var(--radius-md); }
.lead-form__status.is-ok { background:var(--mint-50); color:var(--mint-700); }
.lead-form__status.is-err { background:var(--berry-50,#FCE7E8); color:var(--berry-500); }

/* hero stage: photo + balloon + chips */
.hero__stage { position:relative; display:flex; flex-direction:column; justify-content:flex-end; }
.hero__photo {
  position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-xl);
  border:1px solid var(--border-hairline); width:100%; height:100%;
}
.hero__photo img { width:100%; height:100%; object-fit:cover; }
.hero__blob { position:absolute; border-radius:var(--radius-lg); z-index:-1; }
.hero__blob--coral { right:-44px; top:-34px; width:220px; height:220px; background:var(--coral-100); }
.hero__blob--mint { left:-38px; bottom:-26px; width:150px; height:150px; background:var(--mint-100); }

/* Anchored to its bottom-right corner with PERCENTAGES of the photo, so the
   tail keeps pointing at roughly the same spot (Sally's face) no matter how
   wide/tall the photo renders.
   right: 54% → right edge (and tail) sits ~46% from the left of the photo.
   bottom: 78% → bottom edge (and tail) sits ~22% down from the photo top.
   The bubble has a FIXED width/height (sized for the longest string) so it
   does not jump around while the text is typed in letter-by-letter. */
.balloon { position:absolute; top:auto; bottom:78%; left:auto; right:calc(54% - 16px); z-index:4; width:295px; animation:float 5.5s ease-in-out infinite; }
.balloon__inner {
  position:relative; background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-md); padding:15px 18px; box-shadow:var(--shadow-lg);
  color:var(--ink-800); font-size:15.5px; line-height:1.5; font-weight:500;
}
.balloon__inner::after {
  content:''; position:absolute; right:22px; bottom:-9px; width:18px; height:18px;
  background:var(--surface); border-right:1px solid var(--border-hairline);
  border-bottom:1px solid var(--border-hairline); transform:rotate(45deg);
}
.balloon__name {
  display:flex; align-items:center; justify-content:flex-start; gap:9px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; margin-bottom:7px; font-weight:600; color:var(--ink-400);
}
/* Fixed height = 3 lines (line-height 1.5em) so the balloon stays put for the
   longest string; shorter strings just leave whitespace below. */
.balloon__text { height:4.5em; margin:0; overflow:hidden; }
.dot {
  width:8px; height:8px; border-radius:50%; background:var(--mint-500);
  box-shadow:0 0 0 0 rgba(20,185,129,.55); animation:pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow:0 0 0 0 rgba(20,185,129,.55); }
  70% { box-shadow:0 0 0 6px rgba(20,185,129,0); }
  100% { box-shadow:0 0 0 0 rgba(20,185,129,0); }
}
.balloon__text::after {
  content:''; display:inline-block; width:2px; height:1.05em; vertical-align:-.18em;
  margin-left:2px; background:currentColor; animation:blink 1s steps(1) infinite;
}

.chip {
  position:absolute; z-index:5; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:600; padding:9px 18px; border-radius:var(--radius-pill);
  background:var(--surface); box-shadow:var(--shadow-lg); white-space:nowrap;
}
.chip--mint { color:var(--mint-700); }
.chip--coral { color:var(--coral-700); }
.chip--orange { color:var(--acc-orange); }
.chip--a { bottom:38px; right:32px; }
.chip--b { bottom:-14px; left:30px; }

@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
/* small-screen variant: same float but shifted left so the bubble overhangs the photo edge */
@keyframes float-x { 0%,100%{ transform:translate(-16px,0); } 50%{ transform:translate(-16px,-12px); } }
@keyframes blink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

/* ── Decorative dotfield (drifting dots behind the "Zo doet Sally dat" section) */
/* The section is the positioning context; the dotfield fills it at z-index 0 so
   it paints above the section background but below the content (lifted to z-1). */
#how { position:relative; }
#how > .wrap { position:relative; z-index:1; }
.dotfield {
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
}
.dotfield__dot {
  position:absolute; top:0; left:0; width:12px; height:12px; border-radius:50%;
  will-change:transform,opacity; opacity:0;
}

/* ── 6b. Value strip / offer band (blue row directly under the hero) ───── */
.valuestrip { padding-block:28px; }
.offerband {
  display:flex; align-items:center; justify-content:space-between; gap:32px;
  background:var(--coral-500); color:#fff;
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  padding:30px 38px;
}
.offerband__copy { min-width:0; }
.offerband__kicker {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:rgba(255,255,255,.78); margin:0;
}
.offerband__nos {
  display:flex; flex-wrap:wrap; align-items:center; gap:8px 26px;
  margin:14px 0 12px; font-size:14px; font-weight:500;
}
.offerband__no {
  display:inline-flex; align-items:center; gap:8px;
  color:rgba(255,255,255,.72); line-height:1.2;
}
.offerband__no s { text-decoration:line-through; text-decoration-thickness:1.5px; }
.offerband__ic { font-size:15px; display:inline-flex; flex:none; color:rgba(255,255,255,.7); }
.offerband__yes {
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:28px; line-height:1.1; letter-spacing:var(--ls-tight); margin:0 0 12px;
}
.offerband__yes-tag { white-space:nowrap; }
.offerband__cta {
  flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:10px; text-align:right;
}
.offerband__btn {
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  font-family:var(--font-sans); font-weight:700; font-size:16px;
  background:#fff; color:var(--coral-600); border:0;
  border-radius:var(--radius-md); padding:0 24px; height:52px; white-space:nowrap;
  box-shadow:var(--shadow-md);
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.offerband__btn:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.offerband__btn .ic { font-size:18px; }
.offerband__meta {
  font-family:var(--font-mono); font-size:11px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:rgba(255,255,255,.7);
}

@media (max-width:760px) {
  .offerband { flex-direction:column; align-items:flex-start; gap:24px; padding:26px 24px; }
  .offerband__cta { align-items:stretch; text-align:left; width:100%; }
  .offerband__btn { width:100%; justify-content:center; }
  .offerband__yes { font-size:24px; }
}

/* ── 6b2. "Sally neemt de telefoon op voor …" (rotating profession) ──── */
.forwho-sec { padding:96px 0px 96px 0px; text-align:left; }
.forwho__sub {
  font-family:var(--font-mono); font-size:13px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--coral-500); margin:0 0 12px;
  display:inline-flex; align-items:center; gap:12px;
}
.forwho__sub::before { content:''; width:30px; height:1px; background:var(--coral-500); }
.forwho__title {
  font-size:34px; line-height:1.15; letter-spacing:var(--ls-tight);
  font-weight:700; color:var(--ink-900); margin:0;
}
.forwho__rotator {
  /* Slot-machine window: words slide through and get clipped top & bottom. */
  display:inline-block; position:relative;
  vertical-align:bottom; white-space:nowrap;
  overflow:hidden; line-height:1.15;
}
.forwho__word {
  display:block; color:var(--coral-500);
  transition:opacity .28s var(--ease-out), transform .28s var(--ease-out);
}
/* Exit: current word zakt subtiel naar beneden en fadet uit. */
.forwho__word.is-out { opacity:0; transform:translateY(0.4em); }
/* Enter start: next word wacht subtiel boven en fadet in terwijl het zakt. */
.forwho__word.is-in  { opacity:0; transform:translateY(-0.4em); }
/* Hidden until JS picks the first (shuffled) word, so the server-rendered
   fallback never flashes before the rotation starts. A <noscript> override in
   the markup re-shows it when JS is disabled. */
.forwho__word--init { opacity:0; }

@media (max-width:600px) {
  .forwho-sec { padding:56px 0px 56px 0px; }
  .forwho__title { font-size:26px; }
}

/* ── 6c. On/off band (copy of the offer band, text-free with a mockup) ── */
.onoffband-sec { padding-block:28px; }
/* The wrap is the query container so the phone + copy scale to the band width,
   independent of the viewport (which is decoupled from it by the max-width). */
.onoffband-sec .wrap { container-type:inline-size; }
.onoffband {
  position:relative;
  display:flex; align-items:center;
  background:var(--coral-500); color:#fff;
  border-radius:var(--radius-xl);
  /* Phone footprint scales fluidly with the band width. */
  --band-px: clamp(22px, 3.6cqi, 40px);
  --phone-w: clamp(150px, 34cqi, 340px);
  --phone-r: clamp(14px, 6cqi, 56px);
  padding: clamp(30px, 4.4cqi, 50px) var(--band-px) clamp(24px, 3.4cqi, 40px);
}
/* Reserve exactly the space the phone occupies (+ a gap) so it can never
   overlap the copy at any width. */
.onoffband__copy {
  min-width:0; flex:1 1 auto;
  padding-right: calc(var(--phone-r) + var(--phone-w) - var(--band-px) + 28px);
}
.onoffband__title {
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:clamp(22px, 3.4cqi, 30px); line-height:1.1; letter-spacing:var(--ls-tight); margin:0 0 8px;
}
.onoffband__sub {
  font-family:var(--font-sans); font-size:clamp(14px, 1.9cqi, 17px); line-height:1.35;
  color:rgba(255,255,255,.85); margin:0;
}
/* Mockup peeks over the top edge and is clipped at the band's bottom edge. */
.onoffband__media {
  position:absolute; right:var(--phone-r); top:-30px; bottom:0;
  width:var(--phone-w); overflow:hidden;
}
.onoffband__media img { width:100%; height:auto; }
/* Full copy by default; the short copy only kicks in once the reserved copy
   column is too narrow to keep the full sentence beside the phone. */
.onoffband__t-short { display:none; }

@container (max-width:400px) {
  .onoffband__t-full { display:none; }
  .onoffband__t-short { display:inline; }
}

/* ── 7. Character grid ────────────────────────────────────────────────── */
.char-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; }
.char-card {
  background:var(--surface);
  border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:26px;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.char-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.char-card__icon {
  width:46px; height:46px; border-radius:var(--radius-md); background:var(--coral-50);
  display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
.char-card__title { font-size:19px; font-weight:700; margin-top:18px; }
.char-card__desc { font-size:15px; line-height:1.55; color:var(--ink-600); margin-top:8px; }

/* ── 7b. Quotes (twee foto's naast elkaar, tekst-overlay links) ────────── */
.quotes .sechead { max-width:none; }
/* Losse CTA-rij; bodempadding spiegelt de 96px bodempadding van de quotes-sectie erboven */
.ctaband { padding-bottom:96px; }
.ctaband__inner {
  display:flex; align-items:center; justify-content:center; gap:20px;
  text-align:center;
}
.ctaband__action { display:flex; flex-direction:column; align-items:center; gap:10px; }
/* 2e variant van de CTA-knoppen: ruimere binnenpadding links en rechts */
.ctaband__buttons { display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; }
.ctaband__btn.btn--lg {
  height:58px; font-size:17px; padding:0 44px; border-radius:8px; gap:10px;
  line-height:1; /* anker en button exact gelijk verticaal centreren */
}
.ctaband__btn.btn--sky { box-shadow:0 6px 20px rgba(255,106,44,.4); }
.ctaband__btn.btn--sky:hover { box-shadow:0 8px 24px rgba(255,106,44,.5); }
.ctaband__btn.btn--dl { box-shadow:0 6px 20px rgba(47,107,255,.4); }
.ctaband__btn.btn--dl:hover { box-shadow:0 8px 24px rgba(47,107,255,.5); }
.ctaband__btn .ic { font-size:18px; }
@media (max-width:720px) {
  .ctaband { padding-bottom:64px; }
  /* knoppen onder elkaar en even breed; oranje knop bepaalt de breedte,
     met gematigde binnenpadding zodat de blauwe knop niet extreem breed wordt */
  .ctaband__buttons { flex-direction:column; align-items:stretch; max-width:100%; }
  .ctaband__btn.btn--lg { width:100%; max-width:100%; padding:0 32px; }
}
.quotes__grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:52px; }
.quote-card {
  position:relative; margin:0; border-radius:var(--radius-xl); overflow:hidden;
  box-shadow:var(--shadow-lg); aspect-ratio:4/3; isolation:isolate;
}
.quote-card__img { width:100%; height:100%; object-fit:cover; display:block; }
.quote-card__overlay {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:28px;
  background:linear-gradient(90deg, rgba(139, 136, 134, 0.72) 0%, rgba(139, 136, 134, 0.42) 40%, rgba(139, 136, 134, 0) 70%);
}
.quote-card__header {
  font-family:var(--font-display); font-weight:700; color:#fff;
  font-size:24px; line-height:1.2; text-wrap:balance;
  max-width:62%;
}
.quote-card__sub {
  font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.9);
}

@media (max-width:760px) {
  .quotes__grid { grid-template-columns:1fr; gap:18px; }
  .quote-card__overlay { padding:22px; }
  .quote-card__header { font-size:20px; max-width:46%; }
  .quote-card__sub { max-width:100%; }
}

/* ── 8. Timeline (cards in a row, icon-circle below; cards light in turn) ── */
.tl { position:relative; margin-top:64px; padding-bottom:44px; }

.tl__track { display:grid; grid-template-columns:repeat(6,1fr); gap:14px; position:relative; z-index:1; align-items:start; }
.tl__step { position:relative; container-type:inline-size; }

/* De cirkel schaalt volledig mee met zijn eigen breedte (cqw = 1% van de kaartbreedte).
   Daardoor blijft de verhouding tekst↔diameter constant: altijd perfect rond, nooit
   een ei, en de tekst past er op elke resolutie in. Waarden geijkt op de desktopmaat. */
.tl__card {
  position:relative; aspect-ratio:1/1; background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:50%; padding:24cqw 10cqw 10cqw; box-shadow:var(--shadow-sm); text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
}

/* circle hangs just below the card, overlapping its bottom edge a little */
.tl__node {
  position:absolute; top:100%; left:50%; margin-top:-14px; transform:translateX(-50%);
  width:52px; height:52px; border-radius:100%; background:var(--coral-500); color:#fff;
  box-shadow:var(--shadow-coral); display:flex; align-items:center; justify-content:center; z-index:2;
}
.tl__num {
  position:absolute; top:-7px; left:-7px; width:24px; height:24px; border-radius:50%;
  background:var(--surface); color:var(--coral-700); font-family:var(--font-display);
  font-weight:800; font-size:12px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm); border:1px solid var(--coral-100);
}
.tl__emoji { font-size:23px; line-height:1; }
/* font-size & marges in cqw zodat de tekst mee schaalt met de cirkel en altijd past */
.tl__title { font-size:9.3cqw; font-weight:700; margin-top:1.2cqw; }
.tl__desc { font-size:7.8cqw; line-height:1.4; color:var(--ink-600); margin-top:3.5cqw; }

/* ── 9. Beauty & Brains ───────────────────────────────────────────────── */
.bb__grid { display:grid; grid-template-columns:.92fr 1.08fr; gap:56px; align-items:center; }
.bb__media { position:relative; }
.bb__photo {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-hairline); box-shadow:var(--shadow-xl); aspect-ratio:1/1;
}
.bb__photo img { width:100%; height:100%; object-fit:cover; }
.bb__blob { right:auto; top:auto; left:-34px; bottom:-30px; width:170px; height:170px; }
/* match the kicker/title/sub rhythm of the centred section heads (.sechead, 16px) */
.bb__copy .sectitle, .ask__copy .sectitle { margin-top:16px; }
.bb__copy .secsub, .ask__copy .secsub { margin-top:16px; }
.bb__list { margin-top:28px; display:flex; flex-direction:column; gap:0px; }
.bb__item { display:flex; align-items:center; gap:12px; font-size:16px; color:var(--ink-700); line-height:1.45; }
.bb__icon {
  width:36px; height:36px; border-radius:50%; background:var(--surface);
  display:inline-flex; align-items:center; justify-content:center; font-size:17px; flex:none;
}
.bb__actions { display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; }
.bb__actions--dl { align-items:center; }
.dl__meta { font-size:14px; color:var(--ink-400); }
.dl__meta--dark { color:var(--ink-500); }

/* ── 10. Memory note ──────────────────────────────────────────────────── */
.note {
  margin:52px auto 0; max-width:720px; background:var(--surface);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-lg); overflow:hidden;
}
.note__bar {
  display:flex; align-items:center; gap:12px; padding:14px 20px;
  background:var(--paper-sunken); border-bottom:1px solid var(--border-hairline);
}
.note__dots { display:inline-flex; gap:6px; }
.note__dots i { width:11px; height:11px; border-radius:50%; background:var(--ink-300); display:block; }
.note__dots i:first-child { background:var(--coral-400); }
.note__label { font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-wide); color:var(--ink-500); text-transform:uppercase; }
/* Editable example area — typed text is not saved (demo only). The native
   text caret is hidden; the orange blinking block (.note__caret) is the cursor,
   kept at the end by note.js so typing always continues from there. */
.note__body { padding:26px 30px 30px; position:relative; font-size:16px; line-height:1.7; color:var(--ink-700); }
.note__line { font-size:16px; line-height:1.7; color:var(--ink-700); }
.note__line--greeting { font-weight:700; color:var(--ink-900); margin-bottom:6px; }
.note__caret { display:inline-block; width:9px; height:20px; background:var(--coral-400); margin-top:4px; animation:blink 1.1s steps(1) infinite; vertical-align:middle; }
.memory__actions { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:32px; }
.memory__actions--dl { align-items:center; }

/* ── 11. Telefoontjes ─────────────────────────────────────────────────── */
#calls { display:none; }
.calls__grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:48px; }
.calls__col {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:30px;
}
.calls__heading { font-size:21px; font-weight:700; display:flex; align-items:center; gap:10px; }
.calls__badge { font-size:20px; }
.calls__sub { font-size:15px; color:var(--ink-600); line-height:1.5; margin-top:10px; }
.calls__list { margin-top:20px; display:flex; flex-direction:column; gap:12px; }
.calls__bubble {
  background:var(--paper-sunken); border-radius:16px 16px 16px 4px; padding:13px 16px;
  font-size:15px; color:var(--ink-800); line-height:1.4; position:relative;
}
.calls__col--want .calls__bubble { background:#e8f3fb; }

/* ── 11b. Zo eenvoudig is het (3 stappen) ─────────────────────────────── */
.simple__grid {
  --fone-w:190px;       /* fixed phone width (keeps phones the same size) */
  --fone-margin:44px;   /* equal gap between phone and panel on top/left/right */
  margin-top:52px; display:grid; gap:24px; justify-content:center;
  grid-template-columns:repeat(3, calc(var(--fone-w) + 2 * var(--fone-margin)));
}
.simple__step {
  --acc:var(--acc-blue); --tint:var(--coral-50);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.simple__step--blue  { --acc:var(--acc-blue);   --tint:var(--coral-50); }
.simple__step--mint  { --acc:var(--acc-green);  --tint:var(--mint-50); }
.simple__step--amber { --acc:var(--acc-orange); --tint:#FFF1E8; }

.simple__panel {
  position:relative; width:100%; aspect-ratio:1/1;
  background:var(--tint); border-radius:var(--radius-2xl);
  padding:var(--fone-margin) var(--fone-margin) 0;   /* equal top/left/right margin */
  overflow:hidden;
}
.simple__num {
  position:absolute; top:14px; left:14px; z-index:2;
  width:30px; height:30px; border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--acc);
  font-family:var(--font-display); font-weight:700; font-size:15px;
  box-shadow:var(--shadow-sm);
}

/* Phone mockup: an SVG that fills the padded width (→ equal left/right) and is
   taller than the panel so its open bottom is clipped by the rounded panel. */
.fone {
  display:block; position:relative; width:100%; height:auto;
}

.simple__caption {
  margin-top:22px; max-width:240px;
  font-family:var(--font-display); font-weight:700; font-size:18px;
  line-height:1.3; color:var(--ink-900);
}

@media (max-width:720px) {
  .simple__grid { grid-template-columns:calc(var(--fone-w) + 2 * var(--fone-margin)); gap:36px; }
}

/* ── 12. Pricing ──────────────────────────────────────────────────────── */
.plans { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:52px; align-items:start; max-width:920px; margin-inline:auto; }
.plan {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); padding:26px 24px; position:relative;
  display:flex; flex-direction:column; height:100%;
}
.plan--featured { border-color:var(--coral-300); box-shadow:var(--shadow-lg); }
.plan__tag {
  position:absolute; top:-12px; left:24px; background:var(--coral-500); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:var(--ls-wide); text-transform:uppercase;
  padding:5px 12px; border-radius:var(--radius-pill);
}
.plan__name { font-size:20px; font-weight:700; }
.plan__for { font-size:13.5px; color:var(--ink-500); margin-top:2px; }
.plan__specs { list-style:none; margin:14px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; }
.plan__specs li { font-size:14px; color:var(--ink-700); font-weight:600; }
.plan__price { display:flex; align-items:baseline; gap:4px; margin:14px 0 2px; min-height:48px; }
.plan__cur { font-family:var(--font-display); font-weight:600; font-size:24px; color:var(--ink-900); }
.plan__amt { font-family:var(--font-display); font-weight:600; font-size:34px; color:var(--ink-900); letter-spacing:var(--ls-tight); }
.plan__per { font-size:14px; color:var(--ink-500); font-weight:600; }
.plan__custom { font-family:var(--font-display); font-weight:600; font-size:30px; color:var(--ink-900); }
.plan__meter { list-style:none; margin:6px 0 0; padding:0; display:flex; flex-flow:row wrap; align-items:baseline; gap:4px 8px; }
.plan__meter li { font-size:13.5px; color:var(--ink-600); white-space:nowrap; }
.plan__note { font-size:13px; color:var(--ink-500); margin-top:6px; }
.plan__feats { margin:20px 0 22px; display:flex; flex-direction:column; gap:10px; }
.plan__feat { display:flex; align-items:flex-start; gap:9px; font-size:14px; color:var(--ink-700); }
.plan__feat.is-off { color:var(--ink-400); }
.plan__check {
  width:18px; height:18px; border-radius:50%; flex:none; display:inline-flex;
  align-items:center; justify-content:center; font-size:11px; font-weight:800;
  background:var(--mint-100); color:var(--mint-700); margin-top:1px;
}
.plan__feat.is-off .plan__check { background:var(--ink-100); color:transparent; }
.plan__feat-label { flex:0 1 auto; }
/* Info-tip: het [i]-icoontje toont bij hover/focus de uitleg uit het schema. */
.plan__info {
  position:relative; flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-top:2px; color:var(--ink-400); cursor:help; outline:none;
}
.plan__info .ic { width:15px; height:15px; stroke-width:2.25; }
.plan__info:hover, .plan__info:focus-visible { color:var(--coral-500); }
.plan__tip {
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px);
  z-index:5; width:max-content; max-width:220px; padding:8px 11px;
  background:var(--ink-900); color:#fff; font-size:12.5px; font-weight:500; line-height:1.4;
  text-align:left; border-radius:var(--radius-md, 10px); box-shadow:var(--shadow-lg);
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .15s ease, transform .15s ease;
}
.plan__tip::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--ink-900);
}
.plan__info:hover .plan__tip, .plan__info:focus-visible .plan__tip {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;
}
.plan .btn { margin-top:auto; }
.plan .btn[disabled] { background:var(--ink-200); color:var(--ink-500); border-color:transparent; box-shadow:none; cursor:not-allowed; }
.plan .btn[disabled]:hover { background:var(--ink-200); color:var(--ink-500); border-color:transparent; }
/* "Komt binnenkort"-pakketten: tekst en icoontjes grijs/uitgeschakeld. */
.plan--disabled .plan__name,
.plan--disabled .plan__for,
.plan--disabled .plan__specs li,
.plan--disabled .plan__cur,
.plan--disabled .plan__amt,
.plan--disabled .plan__per,
.plan--disabled .plan__custom,
.plan--disabled .plan__meter li,
.plan--disabled .plan__feat,
.plan--disabled .plan__info { color:var(--ink-400); }
.plan--disabled .plan__check { background:var(--ink-100); color:var(--ink-400); }
.plan--disabled .plan__feat.is-off .plan__check { color:transparent; }
.plan--disabled .plan__tag { background:var(--ink-400); }

/* ── 12b. Social proof (testimonials) ─────────────────────────────────── */
/* Keep these titles on one line on wide screens (centred head allows overflow). */
@media (min-width:820px) {
  #ervaringen .sectitle,
  #top-vragen .sectitle { white-space:nowrap; }
}
.sp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.sp-card {
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:26px;
  display:flex; flex-direction:column; height:100%;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out);
}
.sp-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.sp-card__stars { display:inline-flex; gap:3px; color:#FFB400; font-size:18px; }
.sp-card__stars svg { fill:currentColor; stroke:currentColor; }
.sp-card__quote {
  margin:16px 0 0; font-size:15.5px; line-height:1.6; color:var(--ink-700);
  font-style:normal; border:0; padding:0; quotes:none;
}
.sp-card__person { display:flex; align-items:center; gap:13px; margin-top:22px; padding-top:0; }
.sp-card__avatar {
  flex:none; width:46px; height:46px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.02em;
}
.sp-card__avatar--blue   { background:var(--acc-blue);   color:#fff; }
.sp-card__avatar--green  { background:var(--acc-green);  color:#fff; }
.sp-card__avatar--amber  { background:var(--acc-amber);  color:#fff; }
.sp-card__avatar--orange { background:var(--acc-orange); color:#fff; }
.sp-card__avatar--red    { background:var(--acc-red);    color:#fff; }
.sp-card__avatar--sky    { background:var(--acc-sky);    color:#fff; }
.sp-card__meta { display:flex; flex-direction:column; line-height:1.3; }
.sp-card__name { font-size:15px; font-weight:700; color:var(--ink-900); }
.sp-card__company { font-size:13.5px; color:var(--ink-500); }

/* ── 13. Ask / contact ────────────────────────────────────────────────── */
.ask__grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:56px; align-items:center; }
.ask__media { position:relative; }
.ask__photo {
  position:relative; border-radius:var(--radius-xl); overflow:hidden;
  border:1px solid var(--border-hairline); box-shadow:var(--shadow-xl); aspect-ratio:1/1;
}
.ask__photo img { width:100%; height:100%; object-fit:cover; }
.ask__chip { bottom:24px; right:20px; }
.ask__body { font-size:16px; line-height:1.6; color:var(--ink-700); margin-top:14px; max-width:46ch; }
.ask__call {
  display:inline-flex; align-items:center; gap:16px; margin-top:28px;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-pill); padding:8px 22px 8px 8px; box-shadow:var(--shadow-md);
  transition:box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.ask__call:hover { box-shadow:var(--shadow-lg); transform:translateY(-2px); }
.ask__call-btn {
  display:inline-flex; align-items:center; gap:9px; background:var(--coral-500); color:#fff;
  font-weight:700; font-size:16px; padding:13px 20px; border-radius:var(--radius-pill);
  box-shadow:var(--shadow-coral);
}
.ask__call-num { font-family:var(--font-mono); font-size:18px; font-weight:600; color:var(--ink-900); letter-spacing:.01em; }


/* ── 13b. Providers (logostrip boven de footer) ───────────────────────── */
.providers { padding:72px 0; background:#fff; --logo-gap:48px; }

/* Full-bleed strip; de rij wrapt nooit. Op brede schermen staat één set
   gecentreerd, op smallere schermen loopt een naadloze marquee (de track
   bevat daarvoor een tweede, identieke set logo's). */
.providers__marquee { overflow:hidden; margin-top:48px; }
.providers__track { display:flex; width:max-content; margin-inline:auto; gap:var(--logo-gap); }
.providers__set { display:flex; align-items:center; gap:var(--logo-gap); flex:none; }
.providers__set--dup { display:none; }

/* Vaste hoogte zodat alle logo's optisch even groot zijn; breedte volgt. */
.providers__logo { height:40px; width:auto; max-width:170px; object-fit:contain; flex:none; }

/* Onder ~1400px past de volledige rij niet meer in beeld → marquee aan. */
@media (max-width:1400px) {
  .providers__set--dup { display:flex; }
  .providers__track { margin-inline:0; animation:providers-marquee 30s linear infinite; }
}
/* Eén set + één tussen-gap opschuiven = exact het naadloze looppunt. */
@keyframes providers-marquee {
  to { transform:translateX(calc(-50% - (var(--logo-gap) / 2))); }
}

@media (max-width:720px) {
  .providers { padding:56px 0; --logo-gap:32px; }
  .providers__marquee { margin-top:34px; }
  .providers__track { animation-duration:22s; }
  .providers__logo { height:30px; max-width:130px; }
}

@media (prefers-reduced-motion:reduce) {
  .providers__track { animation:none; }
}

/* ── 14. Footer ───────────────────────────────────────────────────────── */
.foot { background:var(--ink-900); color:rgba(251,246,239,.7); padding:64px 0 30px; }
.foot__grid { display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:36px; }
.foot__tagline { font-size:14.5px; line-height:1.55; margin-top:14px; max-width:30ch; color:rgba(251,246,239,.6); }
.foot__col h3 {
  font-family:var(--font-sans); font-size:13px; font-weight:700; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:rgba(251,246,239,.45); margin-bottom:14px;
}
.foot__col a { display:block; font-size:14.5px; color:rgba(251,246,239,.78); margin-bottom:10px; transition:color var(--dur-fast) var(--ease-out); }
.foot__col a:hover { color:#fff; }
.foot__text { display:block; font-size:14.5px; color:rgba(251,246,239,.78); margin-bottom:10px; }
.foot__legal {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin-top:48px; padding-top:22px; border-top:1px solid rgba(255,255,255,.1);
  font-size:13px; color:rgba(251,246,239,.5); flex-wrap:wrap;
}
.foot__legal a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
.foot__legal a:hover { color:rgba(251,246,239,.85); }

/* ── 15. Modals ───────────────────────────────────────────────────────── */
.modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:flex-start; justify-content:center; padding:40px 20px; overflow-y:auto; }
.modal[hidden] { display:none; }
.modal__overlay { position:fixed; inset:0; background:rgba(33,28,24,.55); backdrop-filter:blur(3px); }
.modal__dialog {
  position:relative; z-index:1; width:100%; max-width:520px; background:var(--surface);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-xl); padding:38px 34px 42px;
  margin:auto; animation:modal-in var(--dur-slow) var(--ease-spring);
}
.modal__close {
  position:absolute; top:16px; right:18px; width:36px; height:36px; border:0;
  background:var(--paper-sunken); border-radius:50%; cursor:pointer; font-size:22px;
  line-height:1; color:var(--ink-600); display:inline-flex; align-items:center; justify-content:center;
}
.modal__close:hover { background:var(--ink-100); color:var(--ink-900); }
.modal__title { font-size:30px; font-weight:700; letter-spacing:var(--ls-tighter); margin-top:10px; }
.modal__sub { font-size:15px; color:var(--ink-600); line-height:1.5; margin-top:8px; }
.modal__pakket { color:var(--coral-500); font-weight:700; }
.modal__form { margin-top:22px; display:flex; flex-direction:column; gap:10px; }
.modal__form .field { gap:4px; }
.modal__form .input {
  height:42px; padding:0 12px; font-size:15px;
}
.modal__form .input::placeholder { color:var(--ink-300); }
.modal__form .input--icon { padding-left:36px; }
.modal__form .inputwrap__icon { left:11px; font-size:14px; }
.modal__form .check { margin-bottom:14px; }
.modal__form .lead-form__row { gap:10px; }
.modal__form.lead-form .field { margin-top:0; }
@keyframes modal-in { from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
body.modal-open { overflow:hidden; }

/* ── Bestellen / onboarding-modal (QR of download-badges) ─────────────── */
.modal__dialog--order { max-width:640px; padding:48px 46px 50px; }
.order { display:flex; flex-direction:column; gap:30px; }

/* Header: kop in dezelfde stijl als de website (kicker + sectitle) */
.order__head { gap:14px; }
.order__title { font-size:34px; line-height:1.08; }

/* Drie app-stappen — hergebruikt de .simple__*-vormgeving, compacter. */
.order__steps {
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:start;
}
.order__steps .simple__panel { --fone-margin:18px; padding:var(--fone-margin) var(--fone-margin) 0; }
.order__steps .simple__num { width:26px; height:26px; top:11px; left:11px; font-size:13px; }
.order__steps .simple__caption { margin-top:14px; max-width:none; font-size:14px; line-height:1.3; }

/* Download-blok */
.order__download {
  /* Expliciete breedte: zonder deze leidt iOS Safari de breedte af uit de
     hoogte via de aspect-ratio, waardoor het blok buiten het scherm valt. */
  width:100%;
  aspect-ratio: 1 / 0.5;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; background:var(--paper-sunken);
  border:1px solid var(--border-hairline); border-radius:var(--radius-xl); padding:52px 26px;
}
.order__dl-title {
  font-family:var(--font-display); font-size:16px; font-weight:700; color:var(--ink-900); margin:0;
}
.order__qr { margin-top:18px; display:flex; flex-direction:column; align-items:center; gap:16px; }
/* `display:flex` hierboven wint van het standaard [hidden]-gedrag; expliciet verbergen. */
.order__qr[hidden], .order__badges[hidden] { display:none; }
.order__qr-link { display:inline-flex; }
.order__qr-img {
  width:164px; height:164px; padding:10px; background:#fff;
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
}
.order__qr-hint {
  display:inline-flex; align-items:center; gap:7px; margin:0;
  font-size:13px; font-weight:500; color:var(--ink-600); text-transform:uppercase;
}
.order__qr-hint .ic { width:16px; height:16px; }
.order__badges {
  margin-top:18px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
}
.order__badge[hidden] { display:none; }
.order__badge { display:inline-flex; position:relative; }
.order__badge img { height:70px; width:auto; display:block; }
.order__badge--disabled { cursor:not-allowed; }
.order__badge--disabled img { filter:grayscale(1); opacity:.42; }
.order__badge-soon,
.help-article__download-soon,
.lightbox__store-soon {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  padding:5px 9px; border-radius:var(--radius-pill);
  background:var(--ink-900); color:#fff;
  font-size:11px; font-weight:700; line-height:1; text-transform:uppercase;
  letter-spacing:.04em; white-space:nowrap;
}

/* USP's: twee kolommen, links plussen (✓), rechts doorgestreept (✗) */
.order__usps { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; max-width:480px; margin-inline:auto; }
.order__usp-col { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.order__usp { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:600; color:var(--ink-800); }
.order__usp-ic {
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
}
.order__usp-ic .ic { width:13px; height:13px; stroke-width:3; }
.order__usp--yes .order__usp-ic { background:var(--mint-100); color:var(--mint-700); }
.order__usp--no { color:var(--ink-400); }
.order__usp--no span:last-child { text-decoration:line-through; }
.order__usp--no .order__usp-ic { background:var(--ink-100); color:var(--ink-400); }

/* Op smal scherm: dialoog nooit hoger dan het scherm, met interne scroll. */
@media (max-width:640px) {
  .modal { padding:12px; align-items:flex-start; }
  .modal__dialog--order {
    padding:32px 22px 34px; max-height:calc(100dvh - 24px); overflow-y:auto;
  }
  .order { gap:24px; }
  .order__title { font-size:26px; }
  .order__steps { gap:10px; }
  .order__steps .simple__panel { --fone-margin:12px; }
  .order__steps .simple__num { width:22px; height:22px; top:8px; left:8px; font-size:12px; }
  .order__steps .simple__caption { font-size:12.5px; }
  /* Op smal scherm bepaalt de inhoud de hoogte; geen vaste verhouding. */
  .order__download { aspect-ratio:auto; padding:36px 20px; }
}

/* Bel-bevestiging overlay */
.modal__dialog--center { max-width:460px; }
.callstate { text-align:center; padding:32px 0px 0px 0px; display:flex; flex-direction:column; align-items:center; }
.callstate .kicker { margin-top:22px; }
.callstate .kicker::after { content:''; width:30px; height:1px; background:var(--coral-500); }
.callstate .modal__title { margin-top:8px; }
.callstate .modal__sub { margin-top:10px; max-width:none; text-wrap:balance; }

/* Consent/bevestig-stap — only shown in the confirm state. */
.callconsent { display:none; width:100%; margin-top:36px; text-align:left; }
.callstate.is-confirm .callconsent { display:block; }
/* Informatieve variant — altijd zichtbaar, verborgen bij een fout. */
.callconsent--info { display:block; }
.callstate.is-error .callconsent--info { display:none; }
.callconsent__lead { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:var(--ls-caps); color:var(--ink-500); margin-bottom:14px; }
.callconsent__list { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:14px; }
.cc-item { display:flex; align-items:center; gap:13px; }
.cc-item__ic { flex:none; width:40px; height:40px; border-radius:50%; background:var(--coral-50); color:var(--coral-500); display:inline-flex; align-items:center; justify-content:center; font-size:19px; }
.cc-item__txt { display:flex; flex-direction:column; gap:1px; min-width:0; }
.cc-item__txt strong { font-size:14.5px; font-weight:700; color:var(--ink-800); line-height:1.25; }
.cc-item__txt em { font-style:normal; font-size:12.5px; color:var(--ink-500); line-height:1.3; }
.callconsent__privacy { font-size:12px; color:var(--ink-500); line-height:1.5; background:var(--paper-sunken); border-radius:var(--radius-md); padding:11px 13px; margin-bottom:16px; }
.check--sm { font-size:12.5px; color:var(--ink-600); align-items:flex-start; line-height:1.4; margin-bottom:18px; }
.callconsent .btn[disabled] { background:var(--ink-200); color:var(--ink-500); box-shadow:none; cursor:not-allowed; }
.callconsent .btn[disabled]:hover { background:var(--ink-200); }
.callstate__orb {
  --pulse:47,107,255;
  width:74px; height:74px; border-radius:50%; display:block;
  box-shadow:0 0 0 0 rgba(var(--pulse),.45);
  animation:callorb-pulse 2.6s ease-out infinite;
}
.callstate__orb-img {
  width:100%; height:100%; border-radius:50%; display:block;
  filter:hue-rotate(210deg) saturate(1.05);
}
.callstate.is-done .callstate__orb { --pulse:60,184,128; }
.callstate.is-done .callstate__orb-img { filter:hue-rotate(130deg) saturate(1.1); }
.callstate.is-error .callstate__orb { --pulse:255,92,57; }
.callstate.is-error .callstate__orb-img { filter:none; }
@keyframes callorb-pulse {
  0%   { box-shadow:0 0 0 0 rgba(var(--pulse),.45); }
  70%  { box-shadow:0 0 0 22px rgba(var(--pulse),0); }
  100% { box-shadow:0 0 0 22px rgba(var(--pulse),0); }
}

/* ── 16. Thank-you page ───────────────────────────────────────────────── */
.thanks { padding:120px 0; }
.thanks__inner { max-width:680px; margin:0 auto; text-align:center; display:flex; flex-direction:column; align-items:center; gap:18px; }
.thanks__mark img { border-radius:20px; box-shadow:var(--shadow-lg); }
.thanks__title { font-size:44px; font-weight:700; letter-spacing:var(--ls-tighter); line-height:1.08; }
.thanks__lead { font-size:18px; line-height:1.6; color:var(--ink-600); max-width:52ch; }
.thanks__steps { display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin:10px 0 6px; }
.thanks__step { background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--radius-pill); padding:10px 18px; font-size:14.5px; color:var(--ink-700); box-shadow:var(--shadow-sm); }

/* ── 17. Over ons / bedrijfsprofiel ───────────────────────────────────── */
.about-hero { padding:120px 0 72px; }
.about-hero__inner { max-width:720px; display:flex; flex-direction:column; gap:18px; }
.about-hero__title { font-size:44px; line-height:1.08; letter-spacing:var(--ls-tighter); }

.about-block__inner,
.about-contact__inner { max-width:680px; display:flex; flex-direction:column; gap:24px; }
.about-block__title { font-size:28px; line-height:1.15; letter-spacing:var(--ls-tight); }
.about-block__body { display:flex; flex-direction:column; gap:18px; font-size:18px; line-height:1.65; color:var(--ink-600); }

.about-contact__card {
  display:flex; flex-direction:column; gap:8px; font-style:normal; font-size:18px; line-height:1.55;
  background:var(--surface); border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  padding:24px 28px; box-shadow:var(--shadow-sm);
}
.about-contact__company { font-family:var(--font-display); font-size:20px; color:var(--ink-900); margin-bottom:4px; }
.about-contact__card a { font-weight:500; }

/* ── 18. Vitamine AI page hero (full-bleed background image) ───────────── */
.vita-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:min(48vh, 440px); display:flex; align-items:center;
  padding:72px 0;
}
.vita-hero__bg {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%; z-index:-2;
  /* Lichte blur + iets uitvergroten maskeert de zachtheid van de foto en
     voorkomt dat de blur-randen langs de zijkanten zichtbaar worden. */
  filter:blur(2px) saturate(1.05); transform:scale(1.08);
}
/* Overlay maskeert de onscherpte: een donkere gradient (links sterker zodat de
   tekst leesbaar blijft) plus een subtiele merkblauwe tint over het geheel. */
.vita-hero__overlay {
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(15,23,42,.70) 0%, rgba(15,23,42,.48) 45%, rgba(15,23,42,.22) 100%),
    linear-gradient(0deg, rgba(47,107,255,.18), rgba(47,107,255,.18));
}
.vita-hero__inner { position:relative; z-index:1; width:100%; }
.vita-hero__copy { display:flex; flex-direction:column; gap:18px; max-width:620px; color:#fff; }
.vita-hero__copy .kicker { color:rgba(255,255,255,.85); }
.vita-hero__copy .kicker::before { background:#fff; }
.vita-hero__title { font-size:56px; line-height:1.04; letter-spacing:var(--ls-tighter); color:#fff; }
.vita-hero__lead { font-size:18px; line-height:1.65; color:rgba(255,255,255,.92); }
.vita-hero__actions { display:flex; gap:14px; margin-top:10px; flex-wrap:wrap; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:1040px) {
  .char-grid { grid-template-columns:repeat(2,1fr); }
  .sp-grid { grid-template-columns:repeat(2,1fr); }
}
@media (min-width:961px) {
  .hero__stage { margin-top:60px; }
  .balloon { right:calc(50% - 24px); bottom:81%; }
}
@media (max-width:960px) {
  .hero__grid { grid-template-columns:1fr; gap:44px; }
  .hero { padding:40px 0 64px; }
  .hero__stage { margin-top:40px; }
  .hero__photo { height:auto; aspect-ratio:4/4.4; }
  .hero__form-card { max-width:none; }
  .bb__grid, .ask__grid { grid-template-columns:1fr; gap:40px; }
  .bb__media, .ask__media { max-width:460px; }
  .bb__list { gap:6px; }
  /* Pakketten: horizontale carrousel. Eerste kaart start gecentreerd dankzij
     de inline padding (helft van de restruimte); snap centreert elke kaart. */
  .plans {
    --plan-w: min(78vw, 340px);
    display:flex; align-items:stretch; gap:14px;
    max-width:none; margin-inline:calc(-1 * var(--pad-x));
    padding:16px calc((100vw - var(--plan-w)) / 2) 24px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none;
  }
  .plans::-webkit-scrollbar { display:none; }
  .plan { flex:0 0 var(--plan-w); scroll-snap-align:center; }
  /* let the balloon spill a little past the photo's left edge on small screens.
     (auto-width clamps the left edge to the photo edge, so we nudge with a
     transform — baked into the float keyframes so they don't conflict) */
  .balloon { right:54%; animation-name:float-x; }
}
@media (max-width:820px) {
  /* timeline → stacked cards, icon-circle below each card */
  .tl { padding-bottom:0; }
  .tl__track { grid-template-columns:1fr; gap:50px; max-width:380px; margin-inline:auto; }
  .tl__card { aspect-ratio:auto; border-radius:var(--radius-lg); padding:44px 22px 26px; } /* op mobiel weer een kaart, ruimte boven voor de cirkel */
  .tl__title { font-size:17px; margin-top:2px; }   /* vaste px i.p.v. cqw op de bredere mobiele kaart */
  .tl__desc { font-size:14.5px; margin-top:6px; }
  .tl__node { top:0; margin:0; transform:translate(-50%,-50%); } /* cirkel half boven de kaart, gecentreerd */
  .calls__grid { grid-template-columns:1fr; }
}
@media (max-width:720px) {
  :root { --pad-x:22px; }
  .section { padding:64px 0; }
  .sectitle { font-size:30px; }
  .hero__title { font-size:36px; }
  .modal__title { font-size:26px; }
  .thanks { padding:84px 0; }
  .thanks__title { font-size:32px; }
  .about-hero { padding:84px 0 56px; }
  .about-hero__title { font-size:32px; }
  .vita-hero { min-height:auto; padding:56px 0; }
  .vita-hero__title { font-size:38px; }
  .vita-hero__lead { font-size:16px; }
  .about-block__title { font-size:24px; }
  .about-block__body { font-size:16px; }
}
@media (max-width:560px) {
  .char-grid { grid-template-columns:1fr; }
  .sp-grid { grid-template-columns:1fr; max-width:420px; margin-inline:auto; }
  .foot__grid { grid-template-columns:1fr 1fr; gap:30px; }
  .foot__brand { grid-column:1 / -1; }
  .lead-form__row { grid-template-columns:1fr; }
  .submit__meta > span:first-child { display:none; }
  /* Stapel als "bel-kaart": nummer prominent bovenaan, knop als volledige CTA eronder. */
  .ask__call { display:flex; flex-direction:column-reverse; align-items:stretch; text-align:center; gap:14px; border-radius:var(--radius-xl); padding:18px 16px 16px; }
  .ask__call-btn { justify-content:center; padding:15px 20px; font-size:17px; }
  .ask__call-num { font-size:22px; letter-spacing:.02em; }
}
@media (max-width:600px) {
  /* Op smalle schermen de live-balloon volledig binnen beeld houden en wat
     lager zetten, zodat hij niet over de "Bel mij"-knop hangt. Anker links
     i.p.v. de overhang-positie, en gebruik de gewone (verticale) float. */
  .balloon {
    right:auto; left:16px; width:min(82vw, 295px);
    bottom:78%; animation-name:float;
  }
  .balloon__inner::after {
    right:auto; left:58%; transform:translateX(-50%) rotate(45deg);
  }
  .chip--a { right:16px; }
}

/* ── 16b. Lucide icons (inline SVG) ───────────────────────────────────── */
/* Icons render at 1em and inherit colour via currentColor; size/colour is
   tuned per context below. */
.ic { width:1em; height:1em; display:inline-block; vertical-align:-0.125em; flex:none; }

.eyebrow .ic { color:var(--coral-600); }

/* hero form */
.inputwrap__icon { color:var(--ink-400); font-size:17px; }
.submit__label .ic { font-size:18px; }
.lead-form__fine .ic { color:var(--ink-400); font-size:14px; }

/* floating chips */
.chip .ic { font-size:15px; }

/* character cards */
.char-card__icon { color:var(--coral-600); font-size:23px; }

/* beauty list */
.bb__icon { color:var(--coral-600); font-size:18px; }

/* timeline node */
.tl__emoji { color:#fff; font-size:25px; }

/* telefoontjes badges */
.calls__badge { color:var(--coral-600); font-size:20px; }
.calls__col--want .calls__badge { color:#4391ca; }

/* memory note */
.note__line { display:flex; gap:10px; }
.note__line--greeting { display:block; }
.note__dash { color:var(--coral-500); flex:none; font-weight:600; }

/* ask / contact */
.ask__chip .ic { font-size:15px; }
.ask__call-btn .ic { font-size:17px; }

/* pricing check bullets */
.plan__check .ic { width:12px; height:12px; stroke-width:2.5; }

/* thank-you page */
.thanks__pop { color:var(--coral-500); width:.85em; height:.85em; vertical-align:-0.05em; }
.thanks__step .ic { color:var(--coral-500); font-size:16px; margin-right:2px; vertical-align:-0.15em; }

/* ── 16b. Hoor Sally — audio-demo (dark band) ─────────────────────────── */
.listen { background:#11172a; color:#f4f7fb; }
.listen__grid {
  display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center;
}
/* Collapse to one column on mobile. Staat hier (ná de basisregel) zodat het de
   2-koloms basis overschrijft — anders blijft het 2 koloms en ontstaat er een
   lege strook rechts door de overlopende soundwave. */
@media (max-width:960px) {
  .listen__grid { grid-template-columns:1fr; gap:40px; }
}
.listen__copy .kicker { color:var(--coral-400); }
.listen__copy .kicker::before { background:var(--coral-500); }
.listen__copy .sectitle { color:#fff; margin-top:16px; }
.listen__copy .secsub { color:#f4f7fb; opacity:.9; margin-top:16px; max-width:42ch; }

.player {
  background:rgba(255,255,255,.045); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-xl); padding:26px 30px 28px;
  box-shadow:var(--shadow-xl);
}
.player__top { display:flex; align-items:center; gap:20px; }

.player__play {
  flex:none; width:60px; height:60px; border:0; border-radius:50%; cursor:pointer;
  background:var(--coral-500); color:#fff; box-shadow:var(--shadow-coral);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.player__play:hover { background:var(--coral-600); transform:scale(1.05); }
.player__icon { display:none; }
.player__icon .ic { width:24px; height:24px; }
.player__icon--play .ic { margin-left:2px; } /* optisch centreren van de driehoek */
.player:not(.is-playing) .player__icon--play { display:flex; }
.player.is-playing .player__icon--pause { display:flex; }

.player__meter { flex:1; min-width:0; display:flex; flex-direction:column; gap:11px; }

/* Soundwave: smalle balkjes met variërende hoogtes, gecentreerd om de
   middenlijn. Twee identieke lagen liggen exact over elkaar; de coral laag
   wordt van links naar rechts onthuld (--progress) als een voice-recorder. */
.player__bars { position:relative; width:100%; height:38px; }
.player__wave {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:space-between;
}
.player__wave i {
  width:2px; flex:none; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.20);
}
.player__wave--fill {
  clip-path:inset(0 calc(100% - var(--progress, 0%)) 0 0);
  transition:clip-path 110ms linear;
}
.player__wave--fill i { background:var(--coral-400); }

.player__meta {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:#f4f7fb;
}
.player__meta [data-audio-time] { color:#f4f7fb; }

.player__quote {
  margin-top:22px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1);
  font-size:17px; line-height:1.6; font-style:italic; color:#f4f7fb; opacity:.9;
}

/* ── 17. FAQ accordion ────────────────────────────────────────────────── */
.faq { background:var(--paper-sunken); }
.faq .sechead { max-width:none; }

.faq__list {
  margin:0; padding:0;
  margin-top:48px;
  max-width:760px; margin-inline:auto;
  display:flex; flex-direction:column; gap:0;
}

.faq__item {
  border-bottom:1px solid var(--ink-200);
}
.faq__item:first-child { border-top:1px solid var(--ink-200); }

.faq__btn {
  width:100%; display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding:22px 4px;
  background:none; border:none; cursor:pointer;
  text-align:left;
  color:var(--ink-900);
}
.faq__btn:focus-visible {
  outline:2px solid var(--coral-400); outline-offset:2px; border-radius:4px;
}

.faq__label {
  font-size:17px; font-weight:600; line-height:1.4;
}
@media (max-width:600px) { .faq__label { font-size:15px; } }

.faq__icon {
  flex-shrink:0; width:22px; height:22px; color:var(--coral-500);
  transition:transform .25s ease;
}
.faq__btn[aria-expanded="true"] .faq__icon {
  transform:rotate(180deg);
}

.faq__a {
  margin:0; padding:0 4px 22px;
  overflow:hidden;
}
.faq__a[hidden] { display:none; }

.faq__body {
  margin:0; font-size:16px; line-height:1.7; color:var(--ink-600);
}

.faq__cta {
  display:inline-flex; align-items:center; gap:8px;
  margin-top:16px; padding:10px 18px;
  background:var(--coral-500); color:#fff;
  border:none; border-radius:999px; cursor:pointer;
  font-size:15px; font-weight:600; line-height:1.2;
  transition:background .2s ease, transform .1s ease;
}
.faq__cta:hover { background:var(--coral-600, var(--coral-500)); }
.faq__cta:active { transform:translateY(1px); }
.faq__cta:focus-visible {
  outline:2px solid var(--coral-400); outline-offset:2px;
}
.faq__cta-icon {
  display:inline-flex; width:18px; height:18px;
}
.faq__cta-icon svg { width:100%; height:100%; }

/* ── 18. Prose / Legal pages ─────────────────────────────────────────── */
.legal-hero {
  padding-block: 80px 56px;
  background: var(--paper-sunken);
  border-bottom: 1px solid var(--ink-100);
}
.legal-hero .kicker { margin-bottom: 10px; }
.legal-hero h1 {
  font-size: clamp(28px, 5vw, 46px);
  font-weight: 800;
  letter-spacing: var(--ls-tighter);
  line-height: 1.15;
  margin-bottom: 14px;
}
.legal-hero__meta {
  font-size: 14px;
  color: var(--ink-500);
}

.prose {
  padding-block: 56px 80px;
  max-width: 720px;
}
.prose h2 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  margin: 48px 0 12px;
  color: var(--ink-900);
}
.prose h2:first-child { margin-top: 0; }
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  margin-bottom: 16px;
}
.prose ul, .prose ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 16px;
}
.prose li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-700);
  margin-bottom: 6px;
  padding-left: 28px;
  position: relative;
}
.prose ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--ink-400);
  font-weight: 400;
}
.prose ol {
  counter-reset: prose-ol;
}
.prose ol li {
  counter-increment: prose-ol;
}
.prose ol li::before {
  content: counter(prose-ol) ".";
  position: absolute;
  left: 0;
  color: var(--ink-400);
  font-weight: 600;
  font-size: 14px;
  top: 3px;
}
.prose a {
  color: var(--coral-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.prose a:hover { color: var(--coral-600); }
/* Knoppen in prose houden hun eigen (witte) tekst, geen link-styling. */
.prose a.btn { color:#fff; text-decoration:none; }
.prose a.btn:hover { color:#fff; }
.vita-back { margin-top: 24px; }
.prose strong { font-weight: 600; color: var(--ink-900); }
.prose hr {
  border: none;
  border-top: 1px solid var(--ink-100);
  margin: 40px 0;
}

/* ── 20. Help-pagina ──────────────────────────────────────────────────── */
/* (a) Chat met Sally — lichtblauwe band met een witte chatkaart erin. */
.helpchat-band { background:var(--coral-50); padding:64px 0; }

.helpchat {
  margin:0 auto; max-width:760px;
  /* (Min-of-meer) vaste hoogte: de invoerbalk blijft altijd op dezelfde plek. */
  height:580px;
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  padding:18px 18px 16px; display:flex; flex-direction:column;
}

.helpchat__log {
  /* Vult de ruimte boven de invoerbalk; berichten scrollen omhoog. */
  flex:1; min-height:0; overflow-y:auto;
  padding:10px 12px 4px; display:flex; flex-direction:column;
}

/* Welkomstscherm: groet + suggestiekaarten, gecentreerd. */
.helpchat__welcome {
  text-align:center; display:flex; flex-direction:column; align-items:center;
  padding:20px 6px 10px; width:100%;
}
.helpchat__welcome[hidden] { display:none; }
.helpchat__avatar img { border-radius:14px; box-shadow:var(--shadow-sm); }
.helpchat__portrait { width:72px; height:72px; border-radius:50%; object-fit:cover; object-position:top center; box-shadow:var(--shadow-sm); }
.helpchat__greeting { font-size:26px; line-height:1.15; margin-top:18px; }
.helpchat__welcome-sub { font-size:15px; line-height:1.55; color:var(--ink-600); margin-top:10px; }
.helpchat__suggests { margin-top:28px; display:grid; grid-template-columns:1fr 1fr; gap:14px; width:100%; }
.helpchat__suggest {
  text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  padding:15px 18px; display:flex; flex-direction:column; gap:5px;
  transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.helpchat__suggest:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--coral-300); }
.helpchat__suggest-title { font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--ink-900); }
.helpchat__suggest-q { font-size:14px; line-height:1.4; color:var(--coral-600); }

/* Invoerbalk: pill met tekstveld + ronde verstuurknop. */
.helpchat__bar {
  margin-top:14px; margin-inline:auto; width:95%; display:flex; align-items:center; gap:8px;
  background:var(--surface); border:1.5px solid var(--ink-200);
  border-radius:var(--radius-pill); padding:6px 6px 6px 10px; box-shadow:var(--shadow-xs);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.helpchat__bar:focus-within { border-color:var(--coral-400); box-shadow:var(--ring); }
.helpchat__input {
  flex:1; min-width:0; border:0; background:none; outline:none; height:44px;
  padding:0 8px; font-family:var(--font-sans); font-size:16px; color:var(--ink-900);
}
.helpchat__input::placeholder { color:var(--ink-400); }
.helpchat__input:disabled { opacity:.6; }
/* Alleen de buitenste balk krijgt de focus-gloed; overschrijf de globale :focus-visible-ring. */
.helpchat__input:focus, .helpchat__input:focus-visible { box-shadow:none; outline:none; }
.helpchat__send {
  flex:none; width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background:var(--coral-500); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-spring);
}
.helpchat__send:hover { background:var(--coral-600); transform:scale(1.05); }
.helpchat__send[disabled] { background:var(--ink-200); color:var(--ink-400); cursor:not-allowed; transform:none; }
.helpchat__send .ic { font-size:20px; }

.helpchat__disclaimer {
  margin-top:12px; text-align:center; font-size:12.5px; color:var(--ink-400);
}

/* Chatberichten */
.chatmsg { display:flex; margin-top:18px; }
.chatmsg:first-child { margin-top:0; }
.chatmsg--user { justify-content:flex-end; }
.chatmsg--assistant { flex-direction:column; align-items:flex-start; }
.chatmsg__header { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.chatmsg__portrait { width:32px; height:32px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; }
.chatmsg__sender { font-size:13px; font-weight:600; color:var(--ink-500); }
.helpchat__topbar { display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); }
.helpchat__topbar[hidden] { display:none; }
.helpchat__topbar-portrait { width:42px; height:42px; border-radius:50%; object-fit:cover; object-position:top center; flex-shrink:0; }
.helpchat__topbar-name { font-size:15px; font-weight:700; color:var(--ink-900); line-height:1.2; }
.helpchat__topbar-status { font-size:12.5px; color:var(--ink-400); margin-top:2px; }
.helpchat__topbar-reset {
  margin-left:auto; flex:none; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper-sunken); color:var(--ink-500);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.helpchat__topbar-reset:hover { background:var(--ink-100); color:var(--ink-800); }
.helpchat__topbar-reset .ic { font-size:17px; }
.chatmsg__bubble { font-size:15.5px; line-height:1.6; overflow-wrap:anywhere; }
.chatmsg--user .chatmsg__bubble {
  background:var(--coral-500); color:#fff; padding:10px 16px;
  border-radius:16px 16px 4px 16px; max-width:82%;
  line-height:1.4;
}
.chatmsg--assistant .chatmsg__bubble { color:var(--ink-800); max-width:100%; }
.chatmsg__bubble p + p { margin-top:10px; }
.chatmsg__link { color:var(--coral-600); text-decoration:underline; text-underline-offset:2px; }
.chatmsg__link:hover { color:var(--coral-500); }
.chatmsg--user .chatmsg__link { color:#fff; }
.chatmsg__copy {
  margin-top:6px; padding:5px; border:0; background:none; cursor:pointer;
  color:var(--ink-400); border-radius:var(--radius-sm); display:inline-flex; line-height:0;
  transition:color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.chatmsg__copy:hover { color:var(--coral-600); background:var(--paper-sunken); }
.chatmsg__copy.is-done { color:var(--mint-600); }

/* "Sally denkt na…"-puntjes */
.chatdots { display:inline-flex; gap:5px; padding:8px 2px; }
.chatdots i { width:8px; height:8px; border-radius:50%; background:var(--ink-300); animation:chatdot 1.2s infinite ease-in-out; }
.chatdots i:nth-child(2) { animation-delay:.18s; }
.chatdots i:nth-child(3) { animation-delay:.36s; }
@keyframes chatdot { 0%,80%,100% { transform:scale(.55); opacity:.4; } 40% { transform:scale(1); opacity:1; } }

/* (b) De belangrijkste vragen — klikbare kaarten. */
.help-top { margin-top:48px; display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.help-top__card {
  text-align:left; cursor:pointer; background:var(--surface);
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  padding:22px 20px 20px; display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  min-height:160px;
  transition:transform var(--dur-slow) var(--ease-out), box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}
.help-top__card:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); border-color:var(--coral-300); }
.help-top__icon {
  width:46px; height:46px; border-radius:var(--radius-md); background:var(--coral-50);
  color:var(--coral-600); display:inline-flex; align-items:center; justify-content:center; font-size:22px;
}
.help-top__label { font-family:var(--font-display); font-weight:700; font-size:16.5px; line-height:1.3; color:var(--ink-900); }
.help-top__arrow { margin-top:auto; color:var(--coral-500); font-size:19px; display:inline-flex; transition:transform var(--dur-base) var(--ease-out); }
.help-top__card:hover .help-top__arrow { transform:translateX(4px); }

/* (c) FAQ-lijst — elke rij opent een dialoog. */
.help-faq__list { margin-top:40px; max-width:760px; margin-inline:auto; display:flex; flex-direction:column; }
.help-faq__item { border-bottom:1px solid var(--ink-200); }
.help-faq__item:first-child { border-top:1px solid var(--ink-200); }
.help-faq__btn {
  width:100%; display:flex; align-items:center; gap:14px; padding:18px 4px;
  background:none; border:0; cursor:pointer; text-align:left; color:var(--ink-900);
}
.help-faq__ic-lead {
  flex:none; width:36px; height:36px; border-radius:var(--radius-md);
  background:var(--surface); border:1px solid var(--border-hairline); box-shadow:var(--shadow-xs);
  color:var(--coral-600); display:inline-flex; align-items:center; justify-content:center; font-size:17px;
}
.help-faq__q { flex:1; font-size:17px; font-weight:600; line-height:1.4; }
.help-faq__ic { flex:none; color:var(--coral-500); font-size:20px; display:inline-flex; transition:transform var(--dur-base) var(--ease-out); }
.help-faq__btn:hover .help-faq__q { color:var(--coral-700); }
.help-faq__btn:hover .help-faq__ic { transform:translate(2px,-2px); }
@media (max-width:600px) { .help-faq__q { font-size:15px; } }

/* (d) Article-dialoog — uitgebreid antwoord met stappen en screenshots. */
.modal__dialog--help { max-width:760px; padding:40px 38px 44px; }
.help-article .kicker { margin-bottom:4px; }
.help-article__lead { font-size:17px; line-height:1.6; color:var(--ink-700); margin-top:14px; }
.help-article__body { margin-top:24px; display:flex; flex-direction:column; gap:16px; }
.help-article__h { font-size:18px; font-weight:700; color:var(--ink-900); margin-top:18px; }
.help-article__p { font-size:16px; line-height:1.7; color:var(--ink-700); }

.help-article__steps { counter-reset:help-step; display:flex; flex-direction:column; gap:12px; }
.help-article__steps li {
  counter-increment:help-step; display:flex; gap:14px; align-items:flex-start;
  font-size:16px; line-height:1.6; color:var(--ink-700);
}
.help-article__steps li::before {
  content:counter(help-step); flex:none; width:28px; height:28px; border-radius:50%;
  background:var(--coral-500); color:#fff; font-family:var(--font-display); font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; margin-top:1px;
  line-height: 0; 
}
.help-article__list { display:flex; flex-direction:column; gap:8px; }
.help-article__list li { position:relative; padding-left:26px; font-size:16px; line-height:1.6; color:var(--ink-700); }
.help-article__list li::before { content:''; position:absolute; left:8px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--coral-400); }

.help-article__note {
  display:flex; gap:12px; align-items:flex-start;
  background:var(--coral-50); border:1px solid var(--coral-100); border-radius:var(--radius-md);
  padding:14px 16px; font-size:15px; line-height:1.6; color:var(--ink-700);
}
.help-article__note-ic { flex:none; color:var(--coral-500); font-size:18px; margin-top:1px; display:inline-flex; }

/* Audio-demospeler in een artikel — zelfde donkere "Hoor Sally"-look als de
   homepage, zodat de witte speler-elementen leesbaar blijven in de dialoog. */
.help-article__player {
  margin:4px 0;
  background:#11172a; border-radius:var(--radius-xl); padding:8px;
}
.help-article__player .player {
  box-shadow:none; border-color:rgba(255,255,255,.09);
}

.help-article__shot {
  margin:2px 0; text-align:center;
  background:var(--paper-sunken); border:1px solid var(--border-hairline);
  border-radius:var(--radius-lg); padding:22px;
}
.help-article__shot img { max-width:200px; max-height:360px; width:100%; height:auto; margin:0 auto; }
.help-article__shot figcaption {
  margin-top:12px; font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-wide);
  text-transform:uppercase; color:var(--ink-500);
}

/* Crop-variant: caption boven, vaste hoogte (het "blauwe vlak"). De screenshot
   staat op ware breedte en wordt omhoog geschoven binnen dit kader, zodat de
   bovenkant (logo + titel) buiten beeld valt en de kaart "Geef je eigen
   instructies aan Sally" in beeld komt. */
.help-article__shot--crop { padding-bottom:0; }
.help-article__shot--crop figcaption { margin-top:0; margin-bottom:16px; }
.help-article__shot-crop {
  overflow:hidden; max-width:340px; height:320px; margin:0 auto;
}
.help-article__shot--crop .help-article__shot-crop img {
  display:block; width:100%; height:auto; max-width:none; max-height:none;
  margin:-54% auto 0;   /* omhoog schuiven: bovenkant valt weg (~25% van de hoogte) */
}

/* Onderkant-uitsnede: alleen de onderste strook (bv. de menubalk met de knop
   Instructies). Bovenkant valt weg, de afbeelding plakt tegen de onderrand.
   Spiegelbeeld van de andere shots: beeld bovenaan, bijschrift eronder. */
.help-article__shot--crop-bottom { padding-top:0; padding-bottom:22px; }
.help-article__shot--crop-bottom figcaption { margin-top:16px; margin-bottom:0; }
.help-article__shot--crop-bottom .help-article__shot-crop {
  position:relative; height:180px;
}
.help-article__shot--crop-bottom .help-article__shot-crop img {
  position:absolute; left:0; bottom:0; width:100%; height:auto;
  max-width:none; max-height:none; margin:0;
}

/* Genummerde stappen met screenshot links (25%) en uitleg rechts (75%).
   Net als de 1-2-3 op de homepage: een lichtblauw vlak met marge boven/links/rechts
   en geen marge onder, zodat de screenshot van onderen uit het vlak steekt. De
   telefoon-statusbalk (bovenste ~152px) wordt weggesneden via de binnenlaag
   (152/1206 ≈ 12.6% van de breedte); het vlak is daardoor evenveel korter. */
.help-article__stepshots { counter-reset:stepshot; display:flex; flex-direction:column; gap:22px; margin:4px 0; }
.help-article__stepshot { display:grid; grid-template-columns:25% 1fr; gap:18px; align-items:start; }
.help-article__stepshot-shot {
  position:relative; overflow:hidden;
  aspect-ratio:1206 / 1348;
  background:var(--coral-50); border-radius:var(--radius-xl);
  padding:14px 14px 0;   /* gelijke marge boven/links/rechts, geen marge onder */
  border:0; cursor:zoom-in; display:block; width:100%; text-align:left;
}
.help-article__stepshot-shot:focus-visible { outline:2px solid var(--coral-500); outline-offset:2px; }
.help-article__stepshot-crop {
  overflow:hidden;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.help-article__stepshot-crop img { display:block; width:100%; height:auto; margin-top:-12.6%; }
.help-article__stepshot-zoom {
  position:absolute; top:20px; right:20px; z-index:2;
  width:30px; height:30px; border-radius:var(--radius-md);
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--coral-600); box-shadow:var(--shadow-sm);
  opacity:0; transform:scale(.9); transition:opacity .15s ease, transform .15s ease;
}
.help-article__stepshot-zoom svg { width:16px; height:16px; }
.help-article__stepshot-shot:hover .help-article__stepshot-zoom,
.help-article__stepshot-shot:focus-visible .help-article__stepshot-zoom { opacity:1; transform:scale(1); }

/* Download-stap: twee store-badges in plaats van een screenshot. */
.help-article__stepshot-shot--downloads {
  aspect-ratio:1; overflow:visible; cursor:zoom-in;
  padding:16px 14px;
  display:flex; flex-direction:column; justify-content:center; gap:10px;
}
.help-article__stepshot-download { display:block; width:100%; }
.help-article__stepshot-download[hidden] { display:none; }
.help-article__stepshot-download img { display:block; width:100%; height:auto; }
.help-article__stepshot-download--disabled { position:relative; }
.help-article__stepshot-download--disabled img { filter:grayscale(1); opacity:.42; }

/* Lightbox: één installatiestap in beeld — witte achtergrond, screenshot in
   een lichtblauw kader met stapnummer, uitleg ernaast en pijltjes om door de
   stappen te lopen. */
.lightbox { position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center; padding:0; }
.lightbox[hidden] { display:none; }
.lightbox__overlay { position:fixed; inset:0; z-index:0; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); }
/* Beeldvullend wit vlak; de content zelf blijft gecentreerd op ± dezelfde maat. */
.lightbox__frame {
  position:relative; z-index:1; display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
  padding:0;
  background:var(--surface);
  animation:lightbox-pop var(--dur-base) var(--ease-out) both;
}
@keyframes lightbox-pop { from { opacity:0; transform:scale(.98) translateY(8px); } to { opacity:1; transform:none; } }

.lightbox__content {
  display:grid; grid-template-columns:auto minmax(0, 1fr); gap:48px;
  align-items:start; /* tekst lijnt boven uit t.o.v. het plaatje */
  width:min(1080px, calc(100vw - 176px)); min-width:0;
}
/* Blauw vlak vierkant zolang er ruimte voor is; de (staande) screenshot vult de
   breedte, is boven verankerd en loopt onderaan het vlak uit (± 20% verborgen). */
.lightbox__shot {
  --shot:min(82dvh, 660px);
  position:relative; flex:none; width:var(--shot); height:var(--shot);
  background:var(--coral-50); border-radius:var(--radius-2xl);
  padding:24px 24px 0;
}
.lightbox__crop {
  width:100%; height:100%; overflow:hidden;
  display:flex; align-items:flex-start; justify-content:center;
  border-radius:var(--radius-md) var(--radius-md) 0 0;
}
.lightbox__crop[hidden] { display:none; }
.lightbox__img {
  display:block; width:auto; max-width:none;
  /* 25% hoger dan het zichtbare deel → onderste ~20% van het beeld valt buiten. */
  height:calc((var(--shot) - 24px) * 1.25);
  border-radius:var(--radius-md) var(--radius-md) 0 0; box-shadow:var(--shadow-sm);
}
/* Stap 1: QR-code (desktop) of store-badge (mobiel), gecentreerd in het vlak. */
.lightbox__downloads {
  position:absolute; inset:0; z-index:1;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  padding:24px;
}
.lightbox__downloads[hidden] { display:none; }
.lightbox__qr-link { display:block; width:min(66%, 300px); }
.lightbox__qr-link[hidden] { display:none; }
.lightbox__qr { display:block; width:100%; height:auto; }
.lightbox__store { display:block; width:min(74%, 260px); }
.lightbox__store[hidden] { display:none; }
.lightbox__store img { display:block; width:100%; height:auto; }
.lightbox__store--disabled { position:relative; cursor:not-allowed; }
.lightbox__store--disabled img { filter:grayscale(1); opacity:.42; }
.lightbox__badge {
  position:absolute; top:-14px; left:-14px;
  min-width:36px; height:36px; padding:0 10px;
  border-radius:var(--radius-pill); background:var(--coral-500); color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:16px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 6px 16px rgba(47,107,255,.35);
}
.lightbox__body { min-width:0; max-width:380px; }
.lightbox__counter { font-size:12.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--coral-600); }
.lightbox__title { margin-top:10px; font-family:var(--font-display); font-size:23px; font-weight:700; line-height:1.25; color:var(--ink-900); }
.lightbox__text { margin-top:12px; font-size:16px; line-height:1.65; color:var(--ink-700); }

.lightbox__nav {
  position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:48px; height:48px; border-radius:50%; cursor:pointer;
  background:var(--surface); border:1px solid var(--border-hairline); color:var(--ink-700);
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-sm);
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
             border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.lightbox__nav svg { width:22px; height:22px; }
.lightbox__nav:hover { background:var(--coral-50); color:var(--coral-600); border-color:var(--coral-200); }
.lightbox__nav:focus-visible { outline:2px solid var(--coral-500); outline-offset:2px; }
.lightbox__nav:disabled { opacity:.3; cursor:default; box-shadow:none; }
.lightbox__nav:disabled:hover { background:var(--surface); color:var(--ink-700); border-color:var(--border-hairline); }
.lightbox__nav--prev { left:16px; }
.lightbox__nav--next { right:16px; }

.lightbox__close {
  position:absolute; top:12px; right:12px; z-index:3;
  width:40px; height:40px; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper-sunken); color:var(--ink-500); font-size:24px; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.lightbox__close:hover { background:var(--ink-100); color:var(--ink-800); }

/* Klein/smal scherm: kaart vult het scherm; screenshot bóven de uitleg en de
   pijltjes vast onderaan, zodat je met je duim door de stappen loopt. */
@media (max-width:720px) {
  .lightbox { padding:0; }
  .lightbox__frame {
    width:100%; height:100dvh; max-height:100dvh;
    flex-direction:column; align-items:stretch; justify-content:flex-start;
    padding:58px 22px 104px; overflow-y:auto;
  }
  .lightbox__content { grid-template-columns:1fr; gap:22px; justify-items:center; text-align:center; width:100%; align-content:start; }
  /* Blauw vlak pakt de volle breedte, blijft vierkant; screenshot loopt onder uit. */
  .lightbox__shot { --shot:calc(100vw - 44px); width:var(--shot); height:var(--shot); }
  .lightbox__body { max-width:none; }
  .lightbox__nav {
    position:fixed; top:auto; bottom:20px; transform:none;
    width:54px; height:54px; box-shadow:0 8px 22px rgba(15,23,42,.16);
  }
  .lightbox__nav--prev { left:20px; }
  .lightbox__nav--next { right:20px; }
}
.help-article__stepshot-body { min-width:0; }
.help-article__stepshot-title {
  counter-increment:stepshot; display:flex; align-items:center; gap:10px;
  font-size:17px; font-weight:700; color:var(--ink-900); line-height:1.3;
}
.help-article__stepshot-title::before {
  content:counter(stepshot); flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--coral-500); color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  line-height: 0; padding: 2px 0px 0px 0px;
}
.help-article__stepshot-text { margin-top:8px; font-size:15px; line-height:1.6; color:var(--ink-700); }
@media (max-width:640px) {
  .help-article__stepshot { grid-template-columns:30% 1fr; gap:14px; }
  .help-article__stepshot-title { font-size:16px; }
}

@media (max-width:860px) {
  .help-top { grid-template-columns:1fr 1fr; }
}
@media (max-width:560px) {
  .help-top { grid-template-columns:1fr; }
  .help-top__card {
    flex-direction:row; align-items:center; gap:14px;
    min-height:0; padding:14px 16px;
  }
  .help-top__icon { flex:none; }
  .help-top__label { flex:1; }
  .help-top__arrow { margin-top:0; margin-left:auto; }
  .helpchat__suggests { grid-template-columns:1fr; }
  .helpchat__suggest:nth-child(n+3) { display:none; }
  .helpchat__suggest-title { display:none; }
  .helpchat__greeting { font-size:22px; }
  .helpchat { height:580px; }
  .helpchat-band { padding:32px 0; }
}
@media (max-width:640px) {
  .modal__dialog--help { padding:30px 22px 34px; max-height:calc(100dvh - 24px); overflow-y:auto; }
}

/* ── 21. Zwevende chat-widget (homepage) ──────────────────────────────── */
/* Sally rechtsonderin; klik opent een chat-paneel dat dezelfde .helpchat
   hergebruikt. Blijft onder de modals (z-index 1100). */
.chatwidget { position:fixed; right:24px; bottom:24px; z-index:1000; }

/* Launcher: ronde foto van Sally met een klein chat-badge. */
.chatwidget__launcher {
  position:relative; width:68px; height:68px; padding:0; border:0; cursor:pointer;
  border-radius:50%; background:var(--surface); box-shadow:var(--shadow-lg);
  overflow:visible; display:inline-flex;
  transition:transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out);
  animation:chatwidget-pop var(--dur-slow) var(--ease-spring) both;
}
.chatwidget__launcher:hover { transform:scale(1.06); box-shadow:var(--shadow-xl, 0 18px 40px rgba(0,0,0,.22)); }
.chatwidget__launcher:focus-visible { outline:2px solid var(--coral-500); outline-offset:3px; }
.chatwidget__launcher-img {
  width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:top center;
  border:2.5px solid var(--surface);
}
.chatwidget__launcher-badge {
  position:absolute; right:-2px; bottom:-2px; width:26px; height:26px; border-radius:50%;
  background:var(--coral-500); color:#fff; border:2px solid var(--surface);
  display:inline-flex; align-items:center; justify-content:center; font-size:14px;
}
/* Pulserende ring om aandacht te trekken (rustig, niet opdringerig). */
.chatwidget__launcher::after {
  content:''; position:absolute; inset:0; border-radius:50%;
  box-shadow:0 0 0 0 var(--coral-400);
  animation:chatwidget-ring 2.6s var(--ease-out) infinite;
}
@keyframes chatwidget-ring {
  0% { box-shadow:0 0 0 0 rgba(47,107,255,.40); }
  70% { box-shadow:0 0 0 14px rgba(47,107,255,0); }
  100% { box-shadow:0 0 0 0 rgba(47,107,255,0); }
}
@keyframes chatwidget-pop {
  from { opacity:0; transform:scale(.4) translateY(12px); }
  to { opacity:1; transform:scale(1) translateY(0); }
}

/* Verberg de launcher zolang het paneel open is. */
.chatwidget.is-open .chatwidget__launcher { display:none; }

/* Chat-paneel. */
.chatwidget__panel {
  position:absolute; right:0; bottom:0;
  width:min(384px, calc(100vw - 32px)); height:min(600px, calc(100dvh - 48px));
  background:var(--surface); border:1px solid var(--border-hairline);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-lg);
  display:flex; flex-direction:column; overflow:hidden;
  transform-origin:bottom right;
  animation:chatwidget-panel var(--dur-base) var(--ease-out) both;
}
.chatwidget__panel[hidden] { display:none; }
@keyframes chatwidget-panel {
  from { opacity:0; transform:translateY(16px) scale(.98); }
  to { opacity:1; transform:translateY(0) scale(1); }
}

/* Koptekst met portret + naam + sluitknop. */
.chatwidget__head {
  flex:none; display:flex; align-items:center; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--border-hairline);
}
.chatwidget__head-id { display:flex; align-items:center; gap:12px; min-width:0; }
.chatwidget__head-portrait {
  width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:top center; flex:none;
}
.chatwidget__head-name { font-size:15px; font-weight:700; color:var(--ink-900); line-height:1.2; }
.chatwidget__head-status { font-size:12.5px; color:var(--ink-400); margin-top:2px; }
.chatwidget__actions { margin-left:auto; flex:none; display:flex; align-items:center; gap:6px; }
.chatwidget__action {
  flex:none; width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:var(--paper-sunken); color:var(--ink-500); font-size:18px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.chatwidget__action:hover { background:var(--ink-100); color:var(--ink-800); }
.chatwidget__action .ic { font-size:17px; }

/* De hergebruikte .helpchat past zich aan het paneel aan (geen eigen kaart).
   Eén breedte-model: de widget bepaalt de zij-inspring (padding); álles
   daarbinnen (log, welkomst, berichten, invoerbalk) is 100% breed. Zo is de
   invoer in elke staat exact even breed als de content. */
.helpchat--widget {
  width:100%; height:auto; flex:1; min-height:0; max-width:none;
  border:0; border-radius:0; box-shadow:none; background:transparent;
  padding:12px 24px 12px;
}
.helpchat--widget .helpchat__log { width:100%; padding:8px 0 4px; scrollbar-width: none; }
.helpchat--widget .helpchat__welcome { padding:14px 0 6px; }
.helpchat--widget .helpchat__greeting { font-size:21px; margin-top:6px; }
.helpchat--widget .helpchat__welcome-sub { font-size:14px; margin-top:8px; }
.helpchat--widget .helpchat__suggests { grid-template-columns:1fr; gap:10px; margin-top:20px; }
.helpchat--widget .helpchat__suggest { padding:12px 14px; }
.helpchat--widget .helpchat__suggest-title { display:none; }
.helpchat--widget .helpchat__suggest-q { font-size:14.5px; }
.helpchat--widget .helpchat__bar { width:100%; margin:10px 0 0; }
.helpchat--widget .helpchat__disclaimer { margin-top:10px; font-size:11.5px; }

/* Mobiel: paneel vult (bijna) het hele scherm. */
@media (max-width:560px) {
  .chatwidget { right:16px; bottom:16px; }
  .chatwidget__panel {
    position:fixed; right:0; bottom:0; left:0; top:0;
    width:100%; height:100dvh; border-radius:0; border:0;
  }
  .helpchat--widget .helpchat__suggest:nth-child(n+3) { display:flex; }
}

/* ── 22. Perskit-pagina (/pers) ───────────────────────────────────────────
   Sober downloadoverzicht voor journalisten: veel witruimte, geen marketing.
   Bewust geen site-navigatie of CTA's — alleen logo, materiaal en downloads. */
.press-body { background:var(--paper); }

.press-top { border-bottom:1px solid var(--border-hairline); }
.press-top__inner { display:flex; align-items:center; justify-content:space-between; height:72px; }
.press-top__tag {
  font-family:var(--font-mono); font-size:12px; letter-spacing:var(--ls-caps);
  text-transform:uppercase; color:var(--ink-500);
}

.press-section { padding:56px 0; border-bottom:1px solid var(--border-hairline); }
.press-section:last-child { border-bottom:0; }
.press-section h2 { font-size:26px; }
.press-section__sub { font-size:15.5px; color:var(--ink-600); margin-top:8px; max-width:620px; }
.press-section__group {
  font-family:var(--font-mono); font-size:12.5px; font-weight:600;
  letter-spacing:var(--ls-caps); text-transform:uppercase; color:var(--ink-500);
  margin-top:32px;
}
.press-section__group:first-of-type { margin-top:22px; }
.press-section__group + .press-grid { margin-top:14px; }

/* Introductie */
.press-intro { padding:72px 0 56px; background:#f8f6f4; }
.press-intro h1 { font-size:38px; margin-top:14px; }
.press-intro__text { max-width:640px; margin-top:20px; display:flex; flex-direction:column; gap:14px; }
.press-intro__text p { font-size:16.5px; line-height:1.65; color:var(--ink-700); }
.press-intro__zip { margin-top:28px; }
.press-intro__zipsize { font-weight:400; opacity:.8; }

/* Citeerbare boilerplate ("Over Hello Sally") */
.press-boilerplate {
  margin:20px 0 0; max-width:640px; padding:20px 24px;
  border-left:3px solid var(--coral-400); background:var(--paper-sunken);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:16.5px; line-height:1.65; color:var(--ink-700);
}

/* Grid van downloadbare bestanden */
.press-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:24px; margin-top:28px;
}
.press-item { margin:0; display:flex; flex-direction:column; }
.press-item__thumb {
  display:block; width:100%; aspect-ratio:1; padding:0; cursor:zoom-in;
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  background:var(--paper-sunken); overflow:hidden;
  transition:border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.press-item__thumb:hover { border-color:var(--border-strong); box-shadow:var(--shadow-sm); }
.press-item__thumb img { width:100%; height:100%; object-fit:cover; }
.press-item__meta { display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.press-item__name { font-size:14px; font-weight:600; color:var(--ink-800); }
.press-item__info { font-size:12.5px; color:var(--ink-500); }
.press-item__dl {
  margin-top:8px; align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  font-size:13.5px; font-weight:600; color:var(--ink-700);
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  padding:7px 12px; transition:border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.press-item__dl:hover { border-color:var(--coral-400); color:var(--coral-700); }

/* Logotegels: logo's passen binnen de tegel; tint per variant zodat witte
   (knockout) en donkere onderdelen zichtbaar blijven. */
.press-item__thumb--logo { display:flex; align-items:center; justify-content:center; padding:24px; }
.press-item__thumb--logo img { width:100%; height:100%; object-fit:contain; }
.press-item__thumb--dark { background:var(--ink-800); }
.press-item__thumb--grey { background:var(--ink-300); }

/* Kleurstalen */
.press-colors { display:grid; grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); gap:24px; margin-top:28px; }
.press-color {
  position:relative; display:flex; flex-direction:column; padding:0; border:0;
  background:none; cursor:copy; text-align:left; font-family:var(--font-sans);
}
.press-color__swatch {
  display:block; width:100%; aspect-ratio:5/3;
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
}
.press-color__meta { display:flex; flex-direction:column; gap:2px; margin-top:10px; }
.press-color__name { font-size:14px; font-weight:600; color:var(--ink-800); }
.press-color__hex { font-family:var(--font-mono); font-size:13px; color:var(--ink-500); }
.press-color__copied {
  position:absolute; top:12px; left:12px; display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:600; color:var(--ink-800);
  background:rgba(255,255,255,.92); border-radius:var(--radius-md); padding:5px 10px;
  opacity:0; transition:opacity var(--dur-fast) var(--ease-out); pointer-events:none;
}
.press-color.is-copied .press-color__copied { opacity:1; }

/* Lettertype-specimens */
.press-fonts { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:24px; margin-top:28px; }
.press-font {
  border:1px solid var(--border-hairline); border-radius:var(--radius-lg);
  padding:28px; background:var(--surface); display:flex; flex-direction:column;
}
.press-font__specimen { font-size:52px; font-weight:700; line-height:1.1; color:var(--ink-900); letter-spacing:var(--ls-tight); }
.press-font__sentence { font-size:18px; color:var(--ink-600); margin-top:10px; }
.press-font__meta { display:flex; flex-direction:column; gap:2px; margin-top:20px; }
.press-font__meta .press-item__name { font-size:15px; }
.press-font .press-item__dl { margin-top:12px; }

/* Voettekst */
.press-foot { padding:32px 0 48px; }
.press-foot p { font-size:13.5px; color:var(--ink-500); }

/* Lightbox */
.press-lightbox {
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  padding:48px; background:rgba(15,23,42,.72); cursor:zoom-out;
}
.press-lightbox[hidden] { display:none; }
.press-lightbox__img {
  max-width:min(1100px, 100%); max-height:100%; object-fit:contain; cursor:default;
  border-radius:var(--radius-md); background:var(--paper); box-shadow:var(--shadow-xl);
}
.press-lightbox.is-dark .press-lightbox__img { background:var(--ink-800); }
.press-lightbox__close {
  position:absolute; top:20px; right:20px; width:44px; height:44px; border:0; cursor:pointer;
  border-radius:50%; background:rgba(255,255,255,.14); color:#fff; font-size:20px;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background var(--dur-fast) var(--ease-out);
}
.press-lightbox__close:hover { background:rgba(255,255,255,.26); }

@media (max-width:640px) {
  .press-intro h1 { font-size:30px; }
  .press-section { padding:44px 0; }
  .press-grid, .press-colors { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; }
  .press-font__specimen { font-size:40px; }
  .press-lightbox { padding:16px; }
}

/* ── 19. Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .balloon { animation:none; }
  .balloon__text::after, .note__caret { animation:none; }
  .dot { animation:none; }
  .dotfield { display:none; }
  .modal__dialog { animation:none; }
  .chatdots i { animation:none; }
  .chatwidget__launcher, .chatwidget__launcher::after, .chatwidget__panel { animation:none; }
  * { transition-duration:.01ms !important; }
}
/* keep the small-screen balloon overhang even when motion is reduced */
@media (prefers-reduced-motion:reduce) and (max-width:960px) {
  .balloon { transform:translateX(-16px); }
}
/* op smalle schermen geen overhang: balloon staat links-verankerd binnen beeld */
@media (prefers-reduced-motion:reduce) and (max-width:600px) {
  .balloon { transform:none; }
}