/* Beeylo Business, English homepage.
   Colors come from lib/theme/tokens.dart in the app, so the site and the
   product are one family. Satoshi is what Beeylo says; Source Serif is what
   a person wrote. Yellow means "this is yours to act on". */

@font-face {
  font-family: Satoshi;
  src: url(../fonts/satoshi-var.woff2) format('woff2');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url(../fonts/source-serif-4-400.woff2) format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --ground: #F7F7F5;
  --sheet: #FFFFFF;
  --soft: #F3F3F0;
  --hover: #EEEDEA;
  --line: #ECEBE7;
  --line-strong: #DCDAD4;
  --ink: #17160F;
  --ink2: #4A473E;
  --ink3: #6B675D;
  --quiet: #A29E94;
  --amber: #F5B400;
  --amber-hover: #FFC21F;
  --amber-edge: #E0A300;
  --on-amber: #16130A;
  --amber-ink: #8A6300;
  --amber-wash: #FFF9EA;
  --amber-tint: #FDF1CE;
  --amber-soft: rgba(245, 180, 0, .18);
  --mark: rgba(245, 180, 0, .38);
  --good: #1F8A4F;
  --btn: #1B1A16;
  --on-btn: #FBFAF7;
  --panel-a: #FFF9EA;
  --panel-b: #FDEBB8;
  --panel-c: #F9D46A;
  --panel-ink: #16130A;
  --panel-card: #FFFFFF;
  --worth-a: #2A2720;
  --worth-b: #1E1C17;
  --shadow-sm: 0 1px 2px rgba(23, 22, 15, .05);
  --shadow-card: 0 1px 2px rgba(23, 22, 15, .04), 0 20px 50px -24px rgba(120, 80, 0, .22);
  --shadow-lift: 0 2px 4px rgba(23, 22, 15, .05), 0 28px 60px -24px rgba(120, 80, 0, .30);
  --shadow-sheet: 0 1px 1px rgba(23, 22, 15, .04), 0 2px 6px rgba(23, 22, 15, .04), 0 24px 60px -20px rgba(23, 22, 15, .12);
  --glow: rgba(245, 180, 0, .14);
  --stip: rgba(23, 22, 15, .12);
  --doek: #EEEDE8;
  --draad: rgba(23, 22, 15, .32);
  --schaduw-plat: .1;
  --sans: Satoshi, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
  --fast: 140ms;
  color-scheme: light;
}

/* Voor nu altijd donker, op elk apparaat (Kees, 25-09-2026). Het lichte thema
   hierboven is compleet en komt tevoorschijn met data-theme="light" op <html>. */
@media all {
  :root:not([data-theme="light"]) {
    --ground: #14161B;
    --sheet: #1D2026;
    --soft: #23272E;
    --hover: #2A2F37;
    --line: #2A2E36;
    --line-strong: #3B404B;
    --ink: #F2F3F5;
    --ink2: #B3B8C2;
    --ink3: #8A909B;
    --quiet: #646A75;
    --amber-ink: #F5B400;
    --amber-soft: rgba(245, 180, 0, .14);
    --mark: rgba(245, 180, 0, .32);
    --good: #6CC08B;
    --btn: #F2F3F5;
    --on-btn: #14130F;
    --worth-a: #23262D;
    --worth-b: #1B1E24;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 20px 50px -24px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 28px 60px -24px rgba(0, 0, 0, .7);
    --shadow-sheet: 0 1px 1px rgba(0, 0, 0, .3), 0 24px 60px -20px rgba(0, 0, 0, .55);
    --glow: rgba(245, 180, 0, .07);
    --stip: rgba(255, 255, 255, .09);
    --doek: #1D2026;
    --draad: rgba(255, 255, 255, .34);
    --schaduw-plat: .22;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* Op een laptop en groter alles iets kleiner, zoals de site er uitgezoomd
   uitziet: meer lucht, rustiger koppen (Kees, 24-09-2026). Telefoons en
   tablets houden hun maat. */
@media (min-width: 1100px) { html { zoom: .82; } }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
img, svg { max-width: 100%; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--btn); color: var(--on-btn); padding: 10px 16px; border-radius: 10px; text-decoration: none; font-weight: 700; transition: top var(--fast) var(--ease); }
.skip:focus { top: 16px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 48px); }

/* ---------- type ---------- */
.display { font-size: clamp(44px, 6.6vw, 90px); line-height: 1; letter-spacing: -.044em; font-weight: 650; text-wrap: balance; }
.title { font-size: clamp(32px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -.034em; font-weight: 650; text-wrap: balance; }
.lead { font-size: clamp(18px, 1.5vw, 20px); line-height: 1.55; color: var(--ink2); text-wrap: pretty; }
.small { font-size: 14.5px; line-height: 1.5; color: var(--ink3); }
.letter { font-family: var(--serif); }

/* A plain highlighter, straight edges, drawn left to right. */
.hl {
  background: linear-gradient(var(--mark), var(--mark)) no-repeat 0 60% / 100% 78%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: inherit;
  padding: 0 .12em;
  margin: 0 -.06em;
  border-radius: 3px;
  transition: background-size .7s var(--ease);
}
.hl.off { background-size: 0% 78%; }
/* In de mail bovenaan staat de gemarkeerde vraag in wit: beter leesbaar op het donkere vlak (Kees, 24-09-2026). */
.win-body .hl { color: var(--ink); transition: background-size .7s var(--ease), color .4s var(--ease); }
.win-body .hl.off { color: inherit; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--btn); color: var(--on-btn);
  font-weight: 700; font-size: 15.5px; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease), background var(--fast);
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -10px rgba(23, 22, 15, .45); }
.btn:active { transform: translateY(0) scale(.98); box-shadow: none; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14.5px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; transition: background .2s, box-shadow .2s, backdrop-filter .2s; }
.nav.scrolled { background: color-mix(in srgb, var(--ground) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); box-shadow: 0 1px 0 var(--line); }
.nav-in { display: flex; align-items: center; gap: 32px; height: 76px; }
.mark { display: inline-flex; align-items: baseline; font-weight: 900; font-size: 23px; letter-spacing: -.045em; text-decoration: none; white-space: nowrap; }
.mark img { width: 24px; height: auto; margin-right: 8px; align-self: center; }
.mark i { color: var(--amber); font-style: normal; }
.mark span { font-weight: 500; font-size: 15px; letter-spacing: 0; color: var(--ink3); margin-left: 8px; }
.nav nav { margin-left: auto; display: flex; gap: 28px; align-items: center; font-size: 15px; font-weight: 500; color: var(--ink2); }
.nav nav a:not(.btn) { text-decoration: none; transition: color var(--fast); }
.nav nav a:not(.btn):hover { color: var(--ink); }
/* Taalknop: klein en rustig, alleen de andere taal. */
.nav nav a.taal { font-size: 12.5px; font-weight: 600; letter-spacing: .04em; line-height: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink3, var(--ink2)); }
.nav nav a.taal:hover { border-color: var(--ink3, var(--ink2)); }
/* Tijdelijke knop voor licht en donker, naast NL/EN (Kees, 28-09-2026). */
.nav .thema { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid var(--line); border-radius: 999px; background: none; color: var(--ink3); cursor: pointer; transition: border-color var(--fast), color var(--fast); }
.nav .thema:hover { border-color: var(--ink3); color: var(--ink); }
.nav .thema svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav .thema .ic-maan { display: none; }
:root[data-theme="light"] .nav .thema .ic-zon { display: none; }
:root[data-theme="light"] .nav .thema .ic-maan { display: block; }
@media (max-width: 760px) { .nav nav { gap: 16px; } }
@media (max-width: 760px) { .nav nav .hide-sm { display: none; } }
@media (max-width: 420px) { .nav nav .hide-xs { display: none; } .mark span { display: none; } .nav-in { gap: 12px; } .nav nav { gap: 10px; } .nav .btn-sm { height: 36px; padding: 0 14px; font-size: 13.5px; } }

/* ---------- entrance and reveal ---------- */
.js [data-in] { opacity: 0; transform: translateY(12px); }
.js .ready [data-in], .js body.ready [data-in] { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].seen { opacity: 1; transform: none; }

/* The choice dialogs: a white card on the warm panel, in light and dark. */
.win-side, .cx-panel {
  --ground: #F7F7F5; --ink: #17160F; --ink2: #4A473E; --ink3: #6B675D;
  --sheet: #FFFFFF; --soft: #F3F3F0; --line: #ECEBE7; --line-strong: #DCDAD4;
  --amber-ink: #8A6300; --amber-soft: rgba(245, 180, 0, .18);
  --btn: #1B1A16; --on-btn: #FBFAF7;
  color-scheme: light;
}

/* ---------- hero ---------- */
/* De kop (variant H, Kees 01-10-2026). Laptop: de foto loopt van rand tot
   rand, de tekst staat links, de vraag van de klant hangt rechts over de
   onderrand en "Werkt met" staat los op de pagina eronder. De foto is
   gespiegeld zodat de bakker rechts staat, naast de tekst.
   Telefoon: eerst de foto vrij in beeld met een kleine vraag over de onderrand,
   daarna de tekst rustig op de pagina en één korte regel "Werkt met". */
/* --zoom volgt de zoom op html, zodat de kop het scherm vult. */
:root { --zoom: 1; }
@media (min-width: 1100px) { :root { --zoom: .82; } }
.hero { position: relative; padding-bottom: clamp(90px, 12vw, 170px); }
.hero-vlak { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, calc(100svh / var(--zoom) - 76px - 120px), 900px); padding-block: clamp(64px, 7vw, 110px) clamp(110px, 10vw, 150px); color: #FFFFFF; background: #1A1813; }
.hero-in { width: 100%; }
.hero .display { max-width: 13ch; font-size: clamp(40px, 6vw, 84px); line-height: 1.02; color: #FFFFFF; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); }
.hero .lead { max-width: 40ch; margin-top: 24px; color: rgba(255, 255, 255, .88); }
.hero .signup { margin: 34px 0 0; }
.hero .signup-note { color: rgba(255, 255, 255, .82); }
.hero-foto { position: absolute; inset: 0; z-index: -1; display: block; overflow: hidden; }
.hero-foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 45% 45%; transform: scaleX(-1); }
.hero-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(16, 14, 10, .8), rgba(16, 14, 10, .55) 50%, rgba(16, 14, 10, .2)); }

/* De vraag van de klant: rechts, half over de onderrand van de foto. */
.r2-kaart { position: absolute; z-index: 2; right: max(clamp(20px, 5vw, 48px), calc((100% - 1160px) / 2 + 48px)); bottom: -56px; width: 430px; box-sizing: border-box; padding: 22px; border-radius: 18px; background: #FFFFFF; color: #17160F; text-align: left; box-shadow: 0 1px 2px rgba(80, 50, 0, .06), 0 30px 60px -24px rgba(0, 0, 0, .55); }
.r2-wie { font-size: 13px; color: #6B675D; }
.r2-vraag { margin-top: 6px; font-size: 20px; line-height: 1.28; letter-spacing: -.014em; font-weight: 700; text-wrap: balance; }
.r2-rij { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.r2-keuze { white-space: nowrap; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #DCDAD4; background: #FFFFFF; color: #17160F; font-weight: 600; font-size: 14px; cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.r2-keuze:hover { border-color: #F5B400; }
.r2-keuze[aria-pressed="true"] { border-color: #F5B400; background: rgba(245, 180, 0, .2); font-weight: 700; }
.r2-stuur { margin-left: auto; height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: #F5B400; color: #16130A; font-weight: 700; font-size: 14px; cursor: pointer; transition: background var(--fast), transform var(--fast) var(--ease); white-space: nowrap; }
.r2-stuur:hover { background: #FFC21F; }
.r2-stuur.klaar { background: transparent; color: #1F8A4F; padding-inline: 4px; cursor: default; }

/* Werkt met: los op de pagina, op één regel onder de kaart. */
.werkt { padding-block: 96px 0; }
.werkt-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.werkt-label { font-size: 13.5px; color: var(--ink3); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px 28px; }
.logos li { display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ink2); white-space: nowrap; }
.logos svg { width: 19px; height: 19px; fill: currentColor; }
/* De logo's in hun eigen kleuren (Kees, 01-10-2026); alleen het envelopje blijft in de tekstkleur. */
.logos .imap svg { opacity: .9; }
.logos .imap { font-weight: 500; color: var(--ink3); }
.logos .imap svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.werkt-kort { display: none; }

@media (max-width: 760px) {
  /* telefoon: foto, kleine vraag, tekst, korte regel */
  .hero-vlak { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; color: var(--ink); background: none; }
  .hero-foto { position: relative; inset: auto; z-index: 0; height: 330px; }
  .hero-foto img { transform: none; object-position: 14% 40%; }
  .hero-foto::after { background: linear-gradient(180deg, rgba(16, 14, 10, 0) 55%, rgba(16, 14, 10, .35)); }
  .r2-kaart { position: relative; right: auto; bottom: auto; order: 1; width: auto; max-width: 340px; margin: -58px 16px 0; padding: 13px 15px; border-radius: 14px; }
  .r2-wie { font-size: 12px; }
  .r2-vraag { margin-top: 3px; font-size: 16px; }
  .r2-rij { margin-top: 10px; gap: 6px; }
  .r2-keuze { height: 36px; padding: 0 12px; font-size: 13px; }
  .r2-stuur { display: none; }
  .hero-in { order: 2; padding-top: 28px; }
  .hero .display { color: var(--ink); text-shadow: none; font-size: clamp(34px, 9.5vw, 42px); }
  .hero .lead { margin-top: 14px; color: var(--ink2); font-size: 16px; }
  .hero .signup { margin-top: 22px; flex-direction: row; border-radius: 999px; }
  .hero .signup .btn { width: auto; }
  .hero .signup-note { color: var(--ink3); }
  .werkt { padding-top: 22px; }
  .werkt-label, .logos { display: none; }
  .werkt-kort { display: block; font-size: 13.5px; line-height: 1.5; color: var(--ink3); }
  .werkt-kort b { color: var(--ink2); font-weight: 600; }
}

/* De strook mensen onder "voor jou gemaakt": schuift om de paar seconden een
   plek op, alleen de middelste laat naam en vraag zien. home.js zet plek,
   maat en doorzicht. */
.c1-strip { position: relative; height: 310px; margin-top: clamp(56px, 7vw, 88px); overflow: hidden; }
.c1-t { position: absolute; left: 50%; top: 50%; margin: 0; overflow: hidden; border-radius: 18px; background: var(--soft); transition: transform .8s var(--ease), width .8s var(--ease), height .8s var(--ease), opacity .8s var(--ease), border-radius .8s var(--ease), box-shadow .8s var(--ease); }
.c1-t.stil { transition: none; }
.c1-t img { display: block; width: 100%; height: 100%; object-fit: cover; }
.c1-t.midden { border-radius: 24px; box-shadow: 0 0 0 2px var(--amber), 0 30px 60px -24px rgba(0, 0, 0, .55); }
.c1-t figcaption, .c1-naam { opacity: 0; transform: translateY(8px); transition: opacity .35s var(--ease), transform .35s var(--ease); pointer-events: none; }
.c1-t.midden figcaption, .c1-t.midden .c1-naam { opacity: 1; transform: none; transition-delay: .55s; }
.c1-t figcaption { position: absolute; left: 12px; right: 12px; bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .96); color: #17160F; font-family: var(--serif); font-size: 13.5px; line-height: 1.35; text-align: left; }
.c1-t figcaption b { display: table; margin-top: 8px; padding: 5px 11px; border-radius: 999px; border: 1px solid #F5B400; background: rgba(245, 180, 0, .2); font: 700 12.5px/1.2 var(--sans); }
.c1-naam { position: absolute; left: 12px; top: 12px; padding: 5px 10px; border-radius: 999px; background: rgba(23, 22, 15, .75); color: #FFFFFF; font-size: 12px; font-weight: 600; white-space: nowrap; }
@media (max-width: 760px) {
  .c1-strip { height: 230px; }
  .c1-t figcaption { font-size: 12px; padding: 8px 9px; left: 9px; right: 9px; bottom: 9px; }
  .c1-naam { font-size: 11px; left: 9px; top: 9px; }
}
/* Het voorbeeld staat meteen onder de kop, met de oude gloed eronder. */
.demo { position: relative; isolation: isolate; padding-bottom: clamp(40px, 6vw, 80px); }
.demo::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -20%; width: 130%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(245, 180, 0, .16), rgba(245, 180, 0, .05) 55%, transparent); pointer-events: none; }
.demo .win { margin-top: 0; }
.signup { position: relative; display: flex; gap: 8px; max-width: 460px; margin: 38px auto 0; padding: 6px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--sheet); box-shadow: var(--shadow-sheet); transition: box-shadow var(--fast), border-color var(--fast); }
.signup:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft), var(--shadow-sheet); }
.signup input { flex: 1; min-width: 0; border: 0; background: transparent; height: 44px; padding: 0 16px; font-size: 16px; }
.signup input:focus { outline: none; }
.signup input::placeholder { color: var(--ink3); }
.signup .btn { height: 44px; }
.signup.shake { animation: shake .32s var(--ease); }
@keyframes shake { 25% { transform: translateX(-5px); } 50% { transform: translateX(4px); } 75% { transform: translateX(-2px); } }
.signup-note { margin-top: 14px; transition: color var(--fast); }
.signup-note.ok { color: var(--good); font-weight: 600; }
.zie { margin-top: 18px; font-size: 15px; }
.zie a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 4px; transition: color var(--fast), text-decoration-color var(--fast); }
.zie a:hover { color: var(--ink); text-decoration-color: var(--amber); }
@media (max-width: 480px) { .signup { flex-direction: column; border-radius: 20px; } .signup .btn { width: 100%; } }

.win { position: relative; z-index: 1; margin: clamp(60px, 7.5vw, 100px) auto 0; max-width: 1120px; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--sheet); border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: 0 2px 4px rgba(23, 22, 15, .04), 0 40px 100px -30px rgba(120, 80, 0, .28); text-align: left; }
.win-mail { padding: 0 clamp(24px, 4vw, 56px) clamp(32px, 4vw, 52px); }
.win-top { display: flex; align-items: center; justify-content: space-between; height: 60px; border-bottom: 1px solid var(--line); margin: 0 calc(-1 * clamp(24px, 4vw, 56px)) 30px; padding: 0 clamp(24px, 4vw, 56px); font-size: 13.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.win-top b { color: var(--ink); font-size: 14.5px; }
.win-from { display: flex; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--ink3); }
.win-from b { display: block; color: var(--ink); font-size: 16px; }
.win-body { font-family: var(--serif); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.7; color: var(--ink2); margin-top: 22px; min-height: 15em; }
.win-body p + p { margin-top: .85em; }
.swap-in { animation: swapIn .34s var(--ease) both; }
@keyframes swapIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.96); } }

.win-side { position: relative; background: linear-gradient(160deg, var(--panel-a) 0%, var(--panel-b) 48%, var(--panel-c) 100%); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; min-height: 520px; color: var(--panel-ink); }
.win-side .wings { position: absolute; right: -50px; bottom: -70px; width: 480px; height: 393px; opacity: .95; filter: drop-shadow(0 20px 30px rgba(160, 100, 0, .25)); pointer-events: none; }
.float { animation: float 7s ease-in-out infinite alternate; }
@keyframes float { to { transform: translateY(-8px) rotate(-1.2deg); } }
.card { position: relative; z-index: 1; background: var(--panel-card); color: var(--ink); border-radius: 16px; padding: 22px 22px 20px; box-shadow: 0 1px 2px rgba(80, 50, 0, .08), 0 18px 40px -12px rgba(120, 80, 0, .30); animation: pop .32s var(--ease) both; }
.card .who { font-size: 13px; color: var(--ink3); }
.card h3 { font-size: clamp(19px, 1.7vw, 22px); line-height: 1.25; letter-spacing: -.015em; font-weight: 700; margin-top: 8px; text-wrap: balance; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.opt { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink); font-weight: 600; font-size: 14.5px; cursor: pointer; transition: background var(--fast), border-color var(--fast), transform var(--fast) var(--ease); }
.opt:hover { border-color: var(--amber); background: var(--amber-soft); }
.opt:active { transform: scale(.97); }
.opt[aria-pressed="true"] { background: var(--amber-soft); border-color: var(--amber); animation: press .22s var(--spring); }
/* Zolang je nog niets koos, glanst er af en toe een streep over de keuzes:
   zo zie je dat je erop kunt klikken (Kees, 24-09-2026). */
.card .opt { position: relative; overflow: hidden; }
.card .opts:not(:has([aria-pressed="true"])) .opt::after, .card.auto .opt:not([aria-pressed="true"])::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 25%, rgba(245, 180, 0, .32) 50%, transparent 75%); transform: translateX(-130%); animation: shine 6s var(--ease) infinite; animation-delay: calc(1.8s + var(--k, 0) * .16s); }
@keyframes shine { 0%, 72% { transform: translateX(-130%); } 90%, 100% { transform: translateX(130%); } }
@keyframes press { 50% { transform: scale(.96); } }
.card .draft-text { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-family: var(--serif); font-size: 16px; line-height: 1.6; white-space: pre-line; animation: rise .26s var(--ease) both; }
/* Nog niets gekozen: de ruimte staat al klaar, zodat de kaart niet verspringt. */
.card .draft-text.leeg { border-top-color: transparent; animation: none; }
.card .go.leeg, .card .src.leeg { display: none; }
/* Een ander moment voorstellen: een weekje, dinsdag doorgestreept. */
.card .kal { margin-top: 14px; animation: rise .26s var(--ease) both; }
.card .kal-lbl { font-size: 12.5px; font-weight: 700; color: var(--ink3); margin-bottom: 6px; }
.card .dagen { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.card .dagen button { display: grid; gap: 2px; justify-items: center; padding: 7px 0 6px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink3); font: 600 11.5px/1.1 var(--sans); cursor: pointer; transition: background var(--fast), border-color var(--fast); }
.card .dagen b { font-size: 16px; color: var(--ink); }
.card .dagen button:hover:not(:disabled) { border-color: var(--amber); }
.card .dagen button[aria-pressed="true"] { background: var(--amber-soft); border-color: var(--amber); }
.card .dagen button:disabled { opacity: .45; cursor: default; }
.card .dagen button:disabled b { text-decoration: line-through; }
.card .src { font-size: 12.5px; color: var(--ink3); margin-top: 10px; }
.go { display: flex; align-items: center; gap: 14px; margin-top: 14px; flex-wrap: wrap; }
.send { height: 42px; padding: 0 22px; border-radius: 999px; border: 0; background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 15px; cursor: pointer; transition: background var(--fast), transform var(--fast) var(--ease), box-shadow var(--fast); }
.send:hover { background: var(--amber-hover); transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgba(200, 140, 0, .6); }
.send:active { transform: scale(.97); }
.send[disabled] { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.go span { font-size: 13px; color: var(--ink3); }
.stack { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.stack .lbl { font-size: 12.5px; font-weight: 700; opacity: .6; margin: 6px 0 2px; }
.done-pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 8px; border-radius: 999px; background: rgba(23, 22, 15, .88); color: #fff; font-size: 14.5px; font-weight: 500; box-shadow: 0 10px 24px -8px rgba(60, 40, 0, .4); animation: pop .36s var(--spring) both; }
.done-pill i { width: 28px; height: 28px; border-radius: 50%; background: var(--amber); display: grid; place-items: center; color: var(--on-amber); }
.done-pill i svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.done-pill button { background: none; border: 0; color: rgba(255, 255, 255, .72); font-weight: 700; font-size: 13px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; margin-left: 4px; }
.all-done { position: relative; z-index: 1; font-size: 15px; max-width: 26ch; animation: rise .3s var(--ease) both; }
.all-done b { display: block; font-size: 21px; letter-spacing: -.01em; margin-bottom: 4px; }
.all-done button { margin-top: 12px; background: none; border: 0; padding: 0; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 860px) { .win { grid-template-columns: 1fr; } .win-body { min-height: 0; } .win-side { min-height: 440px; } }
.providers { position: relative; z-index: 1; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 40px; margin-top: 52px; font-size: 16px; font-weight: 500; color: var(--ink3); }
.providers span:first-child { font-weight: 400; }

/* ---------- sections ---------- */
.s { padding-block: clamp(110px, 13vw, 190px); }
.glow { position: relative; isolation: isolate; }
.glow::before { content: ""; position: absolute; inset: 12% -10% 0; background: radial-gradient(50% 50% at 50% 55%, var(--glow), transparent 70%); pointer-events: none; z-index: -1; }
.center-head { text-align: center; max-width: 820px; margin: 0 auto; }
.center-head .lead { margin: 20px auto 0; max-width: 46ch; }

/* Een assistent die klinkt als jij: jouw stem (donker) en Beeylo (wit),
   hetzelfde patroon. Ze bewegen samen. Geen tekst in het beeld. */
.voice-art { margin: clamp(48px, 6vw, 72px) auto 0; max-width: 980px; border-radius: 22px; padding: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 56px); background: linear-gradient(160deg, var(--panel-a) 0%, var(--panel-b) 48%, var(--panel-c) 100%); box-shadow: var(--shadow-card); }
.voice-art { padding: 0; overflow: hidden; }
.voice-art svg { display: block; width: 100%; height: clamp(160px, 22vw, 260px); }
.voice-art path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.voice-art .v-you { stroke: var(--panel-ink); stroke-width: 2.4; opacity: .85; }
.voice-art .v-bee { stroke: #fff; stroke-width: 3.2; filter: drop-shadow(0 3px 8px rgba(160, 100, 0, .35)); }
.voice-art .v-echo { stroke: #fff; stroke-width: 1.4; opacity: .55; }
.voice-art .v-ver { opacity: .3; }
/* Een voorbeeld van een uitgebreid antwoord, zoals het in je eigen woorden klaarstaat. */
.voorbeeld { max-width: 680px; margin: clamp(48px, 6vw, 72px) auto 0; background: linear-gradient(160deg, var(--panel-a), var(--panel-b) 70%); color: #16130A; border-radius: 22px; padding: clamp(24px, 3.4vw, 36px) clamp(22px, 4vw, 44px); box-shadow: var(--shadow-card); }
.voorbeeld-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13.5px; padding-bottom: 14px; margin-bottom: 18px; border-bottom: 1px solid rgba(138, 99, 0, .18); }
.voorbeeld-kop span { font-size: 12.5px; color: #6B5A2E; }
.voorbeeld-brief p { font-family: var(--serif); font-size: 16px; line-height: 1.65; }
.voorbeeld-brief p + p { margin-top: 12px; }
.voice-points { list-style: none; padding: 0; margin: clamp(36px, 4vw, 52px) auto 0; max-width: 980px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.voice-points li { font-size: 16px; line-height: 1.55; color: var(--ink2); }
.voice-points .ic-tile { margin-bottom: 14px; }
.voice-points b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.voice-points.keep { margin-top: clamp(40px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--line); }
@media (max-width: 760px) { .voice-points { grid-template-columns: 1fr; } }
.ic-tile { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: linear-gradient(145deg, #FFF3CC, #FFE08A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 6px 14px -6px rgba(200, 140, 0, .45); color: #16130A; flex: none; }
.ic-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-tile.sm { width: 40px; height: 40px; border-radius: 12px; }
.ic-tile.sm svg { width: 19px; height: 19px; }

/* four jobs */

/* the long email */
.cx { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(56px, 7vw, 88px); align-items: start; }
.sheet { background: var(--sheet); border-radius: 6px; box-shadow: var(--shadow-sheet); padding: clamp(26px, 3.5vw, 44px); }
.sheet .from { display: flex; justify-content: space-between; gap: 16px; font-size: 13.5px; color: var(--ink3); padding-bottom: 20px; margin-bottom: 24px; border-bottom: 1px solid var(--line); }
.sheet .from b { color: var(--ink2); }
.sheet .letter { font-size: 17.5px; line-height: 1.7; color: var(--ink2); }
.sheet .letter p + p { margin-top: .9em; }
/* De vragen staan verstopt in de alinea's, zoals in echte mail. Pas als
   Beeylo een vraag vindt, krijgt hij een streep en een nummer, en licht hij
   op zolang hij rechts aan de beurt is (Kees, 25-09-2026). */
.qn { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ink); color: var(--ground); font: 700 11px/1 var(--sans); vertical-align: 2px; margin-right: 4px; transition: opacity .25s, transform .25s var(--spring); }
.letter .q .qn { display: none; margin-right: 6px; }
.letter .q.nu .qn, .letter .q.klaar .qn { display: inline-grid; animation: pop .3s var(--spring) both; }
.letter .q.nu .hl { box-shadow: 0 0 0 3px var(--mark); transition: box-shadow .3s var(--ease); }
/* Wisselen naar het volgende voorbeeld: even uitfaden, dan de nieuwe mail. */
.cx .sheet .from, .cx .sheet .letter, .cx-head b, .cx-scroll { transition: opacity .35s var(--ease); }
.cx.wissel .sheet .from, .cx.wissel .sheet .letter, .cx.wissel .cx-head b, .cx.wissel .cx-scroll { opacity: 0; }
.cx-panel { background: linear-gradient(165deg, var(--panel-a), var(--panel-b)); border-radius: 28px; padding: clamp(20px, 3vw, 32px); color: var(--panel-ink); box-shadow: 0 30px 70px -34px rgba(160, 110, 0, .45); }
.cx-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.cx-head b { font-size: clamp(19px, 1.7vw, 22px); letter-spacing: -.015em; }
.cx-head span { font-size: 13.5px; opacity: .65; white-space: nowrap; }
.cq { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
/* De kaart heeft een vaste hoogte en scrolt als geheel: de vragen en
   daaronder je antwoord (Kees, 24-09-2026). De hoogte zet home.js. */
.cx-panel { display: flex; flex-direction: column; min-height: 0; }
.cx-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 calc(-1 * clamp(20px, 3vw, 32px)); padding: 0 clamp(20px, 3vw, 32px) 4px; scrollbar-width: thin; scrollbar-color: rgba(120, 80, 0, .35) transparent; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 24px), transparent); }
.draft .box { animation: vanOnder .5s var(--ease) both; }
@keyframes vanOnder { from { opacity: 0; transform: translateY(28px); } }
.draft .opstellen .lbl { justify-content: flex-start; gap: 10px; align-items: center; }
.draft .opstellen .dots { display: inline-flex; gap: 4px; }
.draft .opstellen .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); animation: blink 1s infinite ease-in-out; }
.draft .opstellen .dots i:nth-child(2) { animation-delay: .15s; }
.draft .opstellen .dots i:nth-child(3) { animation-delay: .3s; }
.draft .opstellen .regel { height: 10px; border-radius: 6px; margin-top: 12px; background: linear-gradient(90deg, var(--soft) 0%, var(--amber-tint) 40%, var(--soft) 80%); background-size: 250% 100%; animation: glans 1.2s linear infinite; }
.draft .opstellen .regel:nth-child(3) { width: 86%; }
.draft .opstellen .regel:nth-child(4) { width: 62%; }
@keyframes glans { from { background-position: 100% 0; } to { background-position: -150% 0; } }
.cq li { background: var(--panel-card); color: var(--ink); border-radius: 16px; padding: 14px 16px; box-shadow: var(--shadow-sm); animation: pop .34s var(--ease) both; }
.cq .top { display: flex; gap: 10px; align-items: flex-start; }
.cq .top .qn { flex: none; margin-top: 1px; }
.cq h4 { font-size: 15.5px; line-height: 1.35; letter-spacing: -.005em; flex: 1; }
.cq .ans { margin: 8px 0 0 30px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); animation: rise .26s var(--ease) both; }
.cq .src { display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 30px; font-size: 12.5px; font-weight: 600; color: var(--amber-ink); background: var(--amber-soft); padding: 4px 10px; border-radius: 999px; animation: rise .3s var(--ease) both; }
.cq .src svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cq .look { margin: 8px 0 0 30px; font-size: 13.5px; color: var(--ink3); display: flex; gap: 8px; align-items: center; }
.cq .look i { display: inline-flex; gap: 3px; }
.cq .look i::before, .cq .look i::after, .cq .look i span { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--amber); animation: blink 1s infinite ease-in-out; }
.cq .look i span { animation-delay: .15s; }
.cq .look i::after { animation-delay: .3s; }
@keyframes blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.cq .yours { display: inline-block; margin: 8px 0 0 30px; font-size: 12.5px; font-weight: 700; color: var(--on-amber); background: var(--amber); padding: 3px 10px; border-radius: 999px; }
.cq .note { margin: 6px 0 0 30px; font-size: 14px; color: var(--ink2); }
.cq .opts { margin: 10px 0 0 30px; gap: 6px; }
.cq .opt { height: 36px; padding: 0 14px; font-size: 14px; }
.cq li.done h4 { color: var(--ink3); }
.cq li { transition: box-shadow .3s var(--ease); }
.cq li.nu { box-shadow: 0 0 0 2px var(--amber), var(--shadow-sm); }
.draft { margin-top: 14px; }
.draft .box { background: var(--panel-card); color: var(--ink); border-radius: 18px; padding: 18px 20px; animation: pop .32s var(--ease) both; }
.draft .lbl { font-size: 13px; font-weight: 700; color: var(--ink3); display: flex; justify-content: space-between; }
.draft .txt { font-family: var(--serif); font-size: 16px; line-height: 1.6; margin-top: 10px; }
.draft .txt span { transition: opacity .3s; }
.draft .txt span.wait { opacity: 0; }
.draft .txt sup { font: 700 10px/1 var(--sans); color: var(--amber-ink); margin-left: 2px; }
.gap { font-family: var(--sans); font-size: .82em; font-weight: 700; font-style: normal; color: var(--on-amber); background: var(--amber-soft); box-shadow: inset 0 -1.5px 0 var(--amber); padding: 2px 8px; border-radius: 4px; white-space: nowrap; }
/* Een stukje dat je zelf invult, zoals een prijs. */
input.gap { border: 0; outline: 0; margin: 0 1px; color: var(--ink); font-size: .9em; line-height: 1.3; width: auto; min-width: 3ch; vertical-align: baseline; }
input.gap::placeholder { color: var(--amber-ink); opacity: 1; }
input.gap:focus, input.gap.typt { box-shadow: inset 0 -2px 0 var(--amber); background: var(--amber-tint, var(--amber-soft)); }
.send.druk { transform: scale(.94); }
.cx-done { margin-top: 14px; font-weight: 700; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; animation: rise .3s var(--ease) both; }
.cx-done button { background: none; border: 0; padding: 0; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 36px; margin-top: 44px; font-size: 15px; color: var(--ink2); }
.rules span { display: inline-flex; gap: 10px; align-items: center; }
.rules span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
@media (max-width: 900px) {
  .cx { grid-template-columns: 1fr; }
  /* Op een smal scherm staat het antwoord onder de mail: bijzinnen weg en
     een iets kleinere letter, zodat je sneller bij het antwoord bent. */
  .letter .bij { display: none; }
  .sheet .letter { font-size: 16px; line-height: 1.6; }
}

/* three things */
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(48px, 6vw, 72px); }
.feat { background: var(--sheet); border-radius: 24px; padding: 26px 26px 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.feat:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
.feat header { display: flex; align-items: center; gap: 14px; }
.feat h3 { font-size: 19px; line-height: 1.25; letter-spacing: -.015em; }
.feat > p { margin-top: 14px; font-size: 15.5px; line-height: 1.5; color: var(--ink2); flex: 1; }
.snip { margin-top: 20px; border-radius: 14px; background: var(--soft); padding: 12px 14px; display: grid; gap: 10px; font-size: 14px; }
.snip b { display: block; font-size: 14px; line-height: 1.3; }
.snip small { display: block; font-size: 12.5px; color: var(--ink3); }
.snip-row, .snip-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.snip-line + .snip-line { border-top: 1px solid var(--line); padding-top: 10px; }
.snip-line em { font-style: normal; font-size: 12.5px; color: var(--ink3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.snip-go { height: 32px; padding: 0 14px; border-radius: 999px; background: var(--amber); color: var(--on-amber); font-weight: 700; font-size: 13.5px; display: inline-flex; align-items: center; }
.snip-bar { height: 5px; border-radius: 999px; background: var(--line-strong); overflow: hidden; }
.snip-bar i { display: block; height: 100%; background: var(--amber); border-radius: 999px; }
.snip-keys { display: flex; align-items: center; gap: 6px; }
.snip-keys kbd { font: 700 12px/1 var(--sans); min-width: 24px; height: 24px; display: inline-grid; place-items: center; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--sheet); color: var(--ink2); }
.snip-keys span { margin-left: auto; font-size: 12.5px; color: var(--ink3); }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

/* what Beeylo knows */
/* Wat Beeylo weet: zoals het scherm in de app. Elk feit met waar het vandaan
   komt, en wat je ermee kunt. */
.know .kb { max-width: 760px; margin: clamp(48px, 6vw, 72px) auto 0; }
.kb { background: var(--sheet); border-radius: 24px; padding: clamp(24px, 3.4vw, 40px); box-shadow: var(--shadow-lift); }
.kb-titel { font-size: 19px; line-height: 26px; letter-spacing: -.01em; }
.kb-sub { margin-top: 8px; font-size: 15px; line-height: 1.6; color: var(--ink2); max-width: 52ch; }
.kb-add { margin-top: 24px; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 16px; border: 1.5px dashed var(--line-strong); border-radius: 14px; transition: border-color var(--fast), box-shadow var(--fast); }
.kb-add:focus-within { border-style: solid; border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.kb-plus { font-size: 20px; line-height: 1; color: var(--ink3); }
.kb-add input { flex: 1; min-width: 0; border: 0; background: transparent; height: 40px; font-size: 15px; color: var(--ink); }
.kb-add input::placeholder { color: var(--ink3); }
.kb-add input:focus { outline: none; }
.kb-add button { height: 40px; padding: 0 18px; border-radius: 10px; border: 0; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 14px; cursor: pointer; transition: transform var(--fast) var(--ease); }
.kb-add button:active { transform: scale(.97); }
.kb-lijst { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 24px; }
.kb-lijst li { border-left: 2px solid var(--line-strong); padding: 2px 0 2px 18px; }
.kb-lijst p { font-size: 15.5px; line-height: 1.5; color: var(--ink); }
.kb-lijst small { display: block; margin-top: 4px; font-size: 12.5px; color: var(--ink3); }
.kb-acties { display: flex; gap: 20px; margin-top: 10px; font-size: 13.5px; color: var(--ink3); }
.kb-lijst li.new { border-left-color: var(--amber); animation: pop .36s var(--spring) both; }
.kb-note { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink3); }

/* works with */
.prov { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 920px; margin: clamp(40px, 5vw, 56px) auto 0; }
.prov span { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border-radius: 10px; background: var(--sheet); box-shadow: var(--shadow-card); font-size: 14px; font-weight: 600; transition: transform .2s var(--ease); }
.prov span:hover { transform: translateY(-2px); }
.prov span svg { width: 16px; height: 16px; fill: none; stroke: var(--ink3); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.prov span.any { color: var(--ink3); font-weight: 500; }
.flow { display: grid; grid-template-columns: minmax(0, 1fr) 72px 160px 72px minmax(0, 1fr); align-items: center; margin-top: clamp(40px, 5vw, 64px); background: color-mix(in srgb, var(--sheet) 45%, transparent); border: 1px solid var(--line); border-radius: 28px; padding: 28px; }
.flow .col { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.fr { display: flex; align-items: center; gap: 14px; height: 66px; padding: 0 16px; border-radius: 16px; background: var(--sheet); box-shadow: var(--shadow-sm), 0 10px 24px -16px rgba(23, 22, 15, .25); }
.fr .ico { width: 36px; height: 36px; border-radius: 10px; background: var(--soft); display: grid; place-items: center; flex: none; }
.fr .ico svg { width: 19px; height: 19px; fill: none; stroke: var(--ink2); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fr .t { flex: 1; min-width: 0; }
.fr b { display: block; font-size: 14.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr small { display: block; font-size: 13px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr time { font-size: 12.5px; color: var(--ink3); white-space: nowrap; }
.fr .st { font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--ink); white-space: nowrap; }
.fr .st.q { background: var(--btn); color: var(--on-btn); }
.fr .st.n { background: var(--soft); color: var(--ink2); }
.wires { width: 100%; height: 100%; overflow: visible; }
.wires path { fill: none; stroke: var(--amber); stroke-width: 1.5; stroke-opacity: .7; vector-effect: non-scaling-stroke; stroke-dasharray: 240; stroke-dashoffset: 0; }
/* Stroompjes: grijs van je inbox naar Beeylo, geel van Beeylo naar wat eruit
   komt. Zo zie je dat er iets verandert (Kees, 24-09-2026). */
.wires.in path:not(.stroom) { stroke: var(--ink3); stroke-opacity: .25; }
.wires.uit path:not(.stroom) { stroke-opacity: .3; }
.wires path.stroom { stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 2 16; stroke-dashoffset: 0; opacity: 0; transition: opacity .6s var(--ease) 1.1s; animation: stroom 1.4s linear infinite; animation-delay: calc(var(--s) * -0.27s); }
.wires.in path.stroom { stroke: var(--ink2); stroke-opacity: .7; }
.wires.uit path.stroom { stroke: var(--amber); stroke-opacity: 1; }
.flow.wired .wires path.stroom { opacity: 1; }
@keyframes stroom { to { stroke-dashoffset: -18; } }
.flow-kop { display: grid; grid-template-columns: minmax(0, 1fr) 304px minmax(0, 1fr); margin: clamp(40px, 5vw, 64px) 0 12px; padding: 0 44px; font-size: 13.5px; font-weight: 700; color: var(--ink3); }
.flow-kop span:last-child { grid-column: 3; color: var(--amber-ink); }
.flow-kop + .flow { margin-top: 0; }
.js .flow:not(.wired) .wires path:not(.stroom) { stroke-dashoffset: 240; }
.js .flow .wires path { transition: stroke-dashoffset 1s var(--ease) .25s; }
.hub { width: 160px; height: 160px; border-radius: 38px; background: var(--sheet); display: grid; place-items: center; font-weight: 900; font-size: 32px; letter-spacing: -.05em; box-shadow: var(--shadow-sm), 0 30px 70px -20px rgba(200, 140, 0, .45); position: relative; }
.hub i { color: var(--amber); font-style: normal; }
/* Een langzaam draaiende gloed rond Beeylo: hier verandert je mail. */
@property --draai { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.hub::after { content: ""; position: absolute; inset: -2px; border-radius: 40px; z-index: -1; background: conic-gradient(from var(--draai), transparent 0deg 220deg, rgba(245, 180, 0, .95) 300deg, transparent 360deg); animation: draai 3.6s linear infinite; }
@keyframes draai { to { --draai: 360deg; } }
.hub::before { content: ""; position: absolute; inset: -40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 180, 0, .32), transparent); z-index: -1; animation: breathe 4s ease-in-out infinite alternate; }
@keyframes breathe { to { opacity: .55; transform: scale(.94); } }
@media (max-width: 980px) { .flow-kop { display: none; } .flow { grid-template-columns: 1fr; gap: 18px; } .wires { display: none; } .hub { margin: 0 auto; width: 132px; height: 132px; font-size: 27px; border-radius: 30px; } }

/* what your email time is worth */
.worth { background: linear-gradient(165deg, var(--worth-a), var(--worth-b)); color: #F2F3F5; border-radius: 36px; padding: clamp(32px, 6vw, 80px); position: relative; overflow: hidden; isolation: isolate; }
.worth::after { content: ""; position: absolute; right: -12%; top: -30%; width: 60%; height: 120%; background: radial-gradient(closest-side, rgba(245, 180, 0, .26), transparent); pointer-events: none; z-index: -1; }
.worth .title { max-width: 14ch; }
.worth-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 96px); margin-top: clamp(40px, 5vw, 64px); }
.worth label { display: flex; justify-content: space-between; align-items: baseline; font-size: 16px; color: #C4C8D0; gap: 12px; }
.worth output { font-size: 22px; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ctl + .ctl { margin-top: 34px; }
.worth input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; margin-top: 12px; background: transparent; cursor: pointer; }
.worth input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; background: linear-gradient(90deg, var(--amber) var(--p, 30%), rgba(255, 255, 255, .16) var(--p, 30%)); }
.worth input[type=range]::-moz-range-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .16); }
.worth input[type=range]::-moz-range-progress { height: 6px; border-radius: 999px; background: var(--amber); }
.worth input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -8px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); transition: transform var(--fast) var(--ease); }
.worth input[type=range]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, .4); }
.worth input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }
.worth .hint { margin-top: 4px; font-size: 13.5px; color: #969BA6; }
.out { display: grid; gap: 26px; align-content: start; }
.out .row { border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 18px; }
.out .row > p:first-child { font-size: 14.5px; color: #C4C8D0; }
.out .num { font-size: clamp(44px, 5.4vw, 76px); font-weight: 700; letter-spacing: -.04em; line-height: 1; margin-top: 8px; color: #fff; font-variant-numeric: tabular-nums; }
.out .num.money { color: var(--amber); }
.out .num small { font-size: .36em; letter-spacing: -.01em; font-weight: 600; color: #C4C8D0; margin-left: 8px; }
.out .part { font-size: 16px; color: #DDE0E5; line-height: 1.5; }
.out .part b { color: #fff; }
.out .fine { margin-top: 10px; font-size: 13px; color: #969BA6; }
@media (max-width: 860px) { .worth-grid { grid-template-columns: 1fr; } }

/* who it's for */
.proof { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; max-width: 1000px; margin: clamp(56px, 7vw, 80px) auto 0; }
.quote-card { background: var(--sheet); border-radius: 28px; padding: clamp(28px, 4vw, 48px); box-shadow: var(--shadow-card); }
.quote-card .qm { font-family: var(--serif); font-size: 72px; line-height: .6; color: var(--amber); height: 34px; }
.quote-card blockquote { font-size: clamp(22px, 2.3vw, 30px); line-height: 1.3; letter-spacing: -.018em; font-weight: 500; margin-top: 18px; text-wrap: balance; }
.quote-card figcaption { margin-top: 26px; font-size: 14.5px; color: var(--ink3); }
.stat-card { background: linear-gradient(160deg, #FFF6D8, #FFE39A); border-radius: 28px; padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; justify-content: flex-end; color: #16130A; }
.stat-card .n { font-size: clamp(72px, 8vw, 112px); font-weight: 700; letter-spacing: -.05em; line-height: .9; }
.stat-card p { margin-top: 14px; font-size: 17px; line-height: 1.4; max-width: 18ch; }
.stat-card small { display: block; margin-top: 14px; font-size: 13.5px; color: rgba(22, 19, 10, .66); }
@media (max-width: 860px) { .proof { grid-template-columns: 1fr; } }
/* Voor wie: drie beroepen, elk met één echte vraag (Kees, 24-09-2026). */
.beroepen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: 1000px; margin: clamp(48px, 6vw, 72px) auto 0; }
.beroep { background: var(--sheet); border-radius: 24px; overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; }
.beroep-art { background: linear-gradient(160deg, var(--panel-a) 0%, var(--panel-b) 55%, var(--panel-c) 100%); padding: 18px 18px 6px; }
.beroep-art svg { display: block; width: 100%; height: auto; max-height: 150px; }
.beroep-in { padding: 22px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.beroep .wie { font-size: 13.5px; font-weight: 700; color: var(--amber-ink); }
/* Het gesprek: de vraag van de klant (echte mail, dus de briefletter), dan het
   witte kaartje van Beeylo, zoals in de andere voorbeelden. */
.beroep .vraag { font-family: var(--serif); font-size: 18px; line-height: 1.4; color: var(--ink); margin-top: 10px; }
.beroep .vraag small { display: block; font-family: var(--sans); font-size: 12.5px; color: var(--ink3); margin-top: 4px; }
.beroep .antw { margin-top: 14px; background: var(--panel-card); color: #16130A; border-radius: 14px; padding: 12px 14px; box-shadow: 0 1px 2px rgba(80, 50, 0, .08), 0 12px 26px -14px rgba(120, 80, 0, .35); }
.beroep .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.beroep .chips span { font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid #DCDAD4; }
.beroep .chips .aan { background: rgba(245, 180, 0, .18); border-color: #F5B400; }
.beroep .zin { font-family: var(--serif); font-size: 15px; line-height: 1.5; margin-top: 10px; }
.beroep .antw > .zin:first-child { margin-top: 0; }
.beroep .bron { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; font-weight: 600; color: #8A6300; background: rgba(245, 180, 0, .18); padding: 3px 9px; border-radius: 999px; }
.beroep .bron svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.beroep .doet { font-size: 14.5px; line-height: 1.5; color: var(--ink2); margin-top: auto; padding-top: 14px; }
/* Aan de slag: drie stappen, zelfde kaarten als de beroepen. */
.beroepen.start { margin-bottom: clamp(56px, 7vw, 88px); }
.beroep h3 { font-size: 19px; letter-spacing: -.012em; line-height: 1.3; margin-top: 8px; }
.beroepen.start .doet { margin-top: 8px; padding-top: 0; }
@media (max-width: 860px) { .beroepen { grid-template-columns: 1fr; max-width: 520px; } }
/* AI privacy: the safeguard on the left, its practical meaning on the right. */
.privacy { scroll-margin-top: 90px; }
.privacy-head { max-width: 1100px; margin: 0 auto 48px; text-align: center; }
.privacy-head .title { max-width: 30ch; margin-inline: auto; }
.privacy-head > p { margin-top: 24px; font-size: 22px; line-height: 1.55; color: var(--ink2); }
.privacy-body { max-width: 1100px; margin: 0 auto; background: var(--sheet); border-radius: 24px; padding: 8px clamp(24px, 4vw, 48px) 0; }
.privacy-point { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 56px); padding: 36px 0; align-items: start; }
.privacy-point + .privacy-point { border-top: 1px solid var(--line-strong); }
.privacy-point h3 { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; font-size: 26px; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; }
.privacy-point h3 svg { flex: none; width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.privacy-point p { font-size: 22px; line-height: 1.55; color: var(--ink2); max-width: 48ch; }
.privacy-point .privacy-standards { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 16px 0 0; font-size: 19px; font-weight: 700; color: var(--ink); }
.privacy-sources { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px 28px; padding: 24px 0 28px; border-top: 1px solid var(--line-strong); font-size: 18px; line-height: 1.5; }
.privacy-sources span { flex: 1 1 100%; color: var(--ink2); }
.privacy-sources a { text-underline-offset: 5px; text-decoration-thickness: 1px; }
.privacy-sources a:hover { text-decoration-thickness: 2px; }
.privacy-sources a:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; border-radius: 2px; }
@media (max-width: 760px) {
  .privacy-head { margin-bottom: 32px; }
  .privacy-head > p { font-size: 20px; }
  .privacy-body { border-radius: 20px; }
  .privacy-point { grid-template-columns: 1fr; gap: 16px; padding: 28px 0; }
  .privacy-point h3 { font-size: 24px; gap: 12px; }
  .privacy-point h3 svg { width: 25px; height: 25px; }
  .privacy-point p { font-size: 19px; }
  .privacy-point .privacy-standards { font-size: 17px; }
  .privacy-sources { font-size: 17px; gap: 14px; }
  .privacy-sources a { flex-basis: 100%; }
}


/* fine print */
.fine-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 5vw, 72px); }
.fine-grid h3 { font-size: 19px; letter-spacing: -.012em; }
.fine-grid p { margin-top: 10px; color: var(--ink2); font-size: 16px; }
.fine-grid ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; color: var(--ink2); font-size: 16px; }
@media (max-width: 860px) { .fine-grid { grid-template-columns: 1fr; } }
.faq { margin: clamp(88px, 10vw, 140px) auto 0; max-width: 760px; }
details { border-top: 1px solid var(--line); }
details:last-of-type { border-bottom: 1px solid var(--line); }
summary { list-style: none; cursor: pointer; padding: 24px 44px 24px 0; font-weight: 600; font-size: clamp(18px, 1.6vw, 21px); letter-spacing: -.012em; position: relative; transition: color var(--fast); }
summary:hover { color: var(--ink2); }
summary::-webkit-details-marker { display: none; }
summary::after, summary::before { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 1.8px; background: var(--ink3); border-radius: 2px; transition: transform .22s var(--ease); }
summary::before { transform: rotate(90deg); }
details[open] summary::before { transform: rotate(0deg); }
details > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
details[open] > div { grid-template-rows: 1fr; }
details > div > p { overflow: hidden; padding: 0 0 0; color: var(--ink2); font-size: 16.5px; max-width: 58ch; }
details[open] > div > p { padding-bottom: 26px; }

/* close */
.close { text-align: center; padding-block: clamp(110px, 13vw, 190px); }
.close .obj, .foot .obj { position: relative; isolation: isolate; width: min(440px, 78vw); margin: 0 auto; }
/* Het echte Beeylo-logo, overgetrokken en in 3D: een dikke onderkant, een
   glanzende bovenkant en een lichtrand (Kees, 24-09-2026). */
.obj .logo3d { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 30px 50px rgba(200, 130, 0, .35)); }
.obj::before { content: ""; position: absolute; inset: -18% -12%; background: radial-gradient(closest-side, rgba(245, 180, 0, .22), transparent); z-index: -1; }
.close .display { margin: clamp(56px, 7vw, 96px) auto 0; max-width: 12ch; }
.close .lead { margin: 22px auto 0; max-width: 34ch; }

.foot { padding-block: 40px 56px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink3); }
.foot-in { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot a { text-decoration: none; transition: color var(--fast); }
.foot a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-in], .js [data-reveal] { opacity: 1; transform: none; }
}

.center-head + .worth { margin-top: clamp(40px, 5vw, 56px); }

/* Op het lichte thema is de schaduw onder het logo zachter. */
.logo3d .schaduw { opacity: .45; }
:root:not([data-theme="light"]) .logo3d .schaduw { opacity: 1; }

/* Aan de slag in vier stappen: vier naast elkaar, op een tablet twee, op een telefoon één. */
.beroepen.vier { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 1120px; gap: 16px; }
.beroepen.vier .beroep-in { padding: 18px 18px 20px; }
.beroepen.vier h3 { font-size: 17px; }
@media (max-width: 1100px) { .beroepen.vier { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; } }
@media (max-width: 560px) { .beroepen.vier { grid-template-columns: 1fr; max-width: 520px; } }

/* Niets mag breder zijn dan het scherm: de gloed achter een sectie loopt
   anders op een telefoon buiten beeld en dan kun je zijwaarts schuiven. */
.glow { overflow-x: clip; }
body { overflow-x: clip; }

/* Prijs: één plan (Kees, 25-09-2026). */
.prijs { max-width: 460px; margin: clamp(40px, 5vw, 56px) auto 0; background: linear-gradient(160deg, #FFF6D8, #FFE39A); color: #16130A; border-radius: 28px; padding: clamp(28px, 4vw, 40px); box-shadow: 0 30px 70px -34px rgba(160, 110, 0, .45); text-align: left; }
.prijs .bedrag { display: flex; align-items: baseline; gap: 10px; }
.prijs .bedrag span { font-size: clamp(56px, 7vw, 76px); font-weight: 700; letter-spacing: -.045em; line-height: 1; }
.prijs .bedrag small { font-size: 17px; color: rgba(22, 19, 10, .7); }
.prijs .btw { margin-top: 6px; font-size: 13.5px; color: rgba(22, 19, 10, .6); }
.prijs ul { list-style: none; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid rgba(22, 19, 10, .14); display: grid; gap: 12px; }
.prijs li { display: flex; gap: 10px; align-items: center; font-size: 16px; }
.prijs li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: #1F8A4F; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.prijs .btn { display: flex; justify-content: center; margin-top: 28px; background: #16130A; color: #FBFAF7; }
.prijzen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; max-width: 860px; margin: clamp(40px, 5vw, 56px) auto 0; }
.prijzen .prijs { max-width: none; margin: 0; display: flex; flex-direction: column; }
.prijs .plan { font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.prijzen .prijs ul { margin-bottom: 28px; }
.prijzen .prijs .btn { margin-top: auto; }
/* Starter rustig op het blad, Pro in het geel. */
.prijs:not(.pro) { background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-card); }
.prijs:not(.pro) .bedrag small, .prijs:not(.pro) .btw { color: var(--ink3); }
.prijs:not(.pro) ul { border-top-color: var(--line); }
.prijs:not(.pro) li svg { stroke: var(--amber); }
.prijs:not(.pro) .btn { background: var(--btn); color: var(--on-btn); }
@media (max-width: 760px) { .prijzen { grid-template-columns: 1fr; max-width: 460px; } }
.prijs-note { margin-top: 12px; font-size: 14px; text-align: center; color: rgba(22, 19, 10, .66); }

/* Telefoon: kleinere koppen waar ze lang zijn, en ruimte waar het krap werd. */
@media (max-width: 560px) {
  .cx-head { flex-direction: column; align-items: flex-start; gap: 2px; }
  .know .title { font-size: 28px; max-width: none; }
  .sent div { flex-direction: column; gap: 6px; }
  .sent span { white-space: normal; }
}
@media (max-width: 980px) { .flow-kop + .flow { margin-top: 28px; } }

/* Alles wat erin zit, onder de prijs, in vier groepjes (Kees, 25-09-2026). */


/* ---------- elke mail wordt een duidelijke volgende stap ---------- */
/* Links een lange mail, rechts een canvas: Beeylo haalt er kaartjes uit, met
   stippellijnen van de zin naar de kaart (Kees, 25-09-2026). */
.ctx { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; max-width: 1120px; margin: clamp(40px, 5vw, 64px) auto 0; align-items: stretch; }
.ctx-brief { position: relative; padding: clamp(22px, 2.6vw, 32px); opacity: .92; }
.ctx-brief .from { margin-bottom: 12px; padding-bottom: 14px; }
.ctx-onderwerp { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 14px; }
.ctx-brief .letter { font-size: 15px; line-height: 1.65; }
.ctx-doek { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; padding: 32px; border-radius: 24px; background-color: var(--doek); background-image: radial-gradient(circle, var(--stip) 1px, transparent 1.3px); background-size: 18px 18px; box-shadow: var(--shadow-card); }
.node { position: relative; z-index: 1; background: #FFFFFF; color: #16130A; border-radius: 14px; padding-bottom: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 18px 40px -18px rgba(0, 0, 0, .6); transition: opacity .45s var(--ease), transform .5s var(--spring); }
.js .ctx .node:not(.aan) { opacity: 0; transform: translateY(10px) scale(.97); }
.node-kop { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #ECEBE7; font-size: 13px; }
.node-kop b { font-weight: 700; }
.node-kop span:last-child { margin-left: auto; font-size: 11.5px; color: #6B675D; white-space: nowrap; }
.node-ic { flex: none; width: 22px; height: 22px; border-radius: 6px; background: rgba(245, 180, 0, .22); display: grid; place-items: center; }
.node-ic svg { width: 14px; height: 14px; fill: none; stroke: #8A6300; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.node-tekst { padding: 11px 14px 0; font-size: 14px; line-height: 1.45; }
.node-groot { padding: 10px 14px 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.node-klein { padding: 3px 14px 0; font-size: 12.5px; color: #6B675D; }
.node-klein.sterk { color: #8A6300; font-weight: 600; }
.node-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 11px 14px 0; }
.node-chips i { font-style: normal; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid #DCDAD4; transition: background .25s, border-color .25s, transform .25s var(--spring); }
.node-chips i.gekozen { background: rgba(245, 180, 0, .22); border-color: #F5B400; transform: scale(1.04); }
.n-antwoord { background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); }
.n-antwoord .node-kop { border-bottom-color: rgba(138, 99, 0, .15); }
.n-antwoord .node-tekst { font-family: var(--serif); font-size: 15px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n-antwoord .send-mini { display: inline-block; margin: 12px 14px 0; font-size: 12.5px; font-weight: 700; background: #F5B400; color: #16130A; padding: 5px 14px; border-radius: 999px; }
/* Eén actie per mail: de vragen met hun keuzes, dan het concept en Versturen. */
.actie { width: min(440px, 100%); padding: 20px 20px 22px; }
.actie-van { font-size: 12.5px; color: #6B675D; }
.actie-titel { margin-top: 4px; font-size: 18px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.av { margin-top: 16px; padding-top: 14px; border-top: 1px solid #ECEBE7; }
.av-kop { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; font-weight: 600; line-height: 1.4; }
.av-n { flex: none; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: rgba(245, 180, 0, .22); color: #8A6300; font-size: 11.5px; font-weight: 700; }
.av .node-chips { padding: 10px 0 0 30px; }
.av-concept { margin-top: 16px; padding: 12px 14px 14px; border-radius: 12px; background: #F6F4EE; }
.av-concept p { font-size: 12.5px; font-weight: 700; color: #6B675D; }
.av-concept i { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: #E6E1D3; }
.av-concept i:nth-of-type(2) { width: 88%; }
.av-concept i:nth-of-type(3) { width: 56%; }
.av-go { margin-top: 14px; }
.actie .send-mini { display: inline-block; font-size: 13px; font-weight: 700; background: #F5B400; color: #16130A; padding: 7px 18px; border-radius: 999px; transition: transform .2s var(--spring); }
.actie .send-mini.druk { transform: scale(.94); }
.actie .send-mini.klaar { background: transparent; color: #1F8A4F; padding-inline: 0; }
/* Wat Beeylo zelf regelt uit dezelfde mail: een vinkje in plaats van een nummer. */
.av-n.ok { background: rgba(31, 138, 79, .14); color: #1F8A4F; }
.av-n.ok svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.av-sub { margin: 4px 0 0 30px; font-size: 13.5px; line-height: 1.45; color: #4A463D; }
.av-sub b { font-weight: 600; color: #8A6300; }
.stap { transition: opacity .45s var(--ease), transform .5s var(--spring); }
/* Het paneel groeit mee: een stap staat er pas als hij aan de beurt is. */
.js .ctx .stap:not(.aan) { display: none; }
.js .ctx .stap.aan { animation: rise .4s var(--ease) both; }
.ctx-lijnen { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ctx-lijnen path { fill: none; stroke: var(--draad); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0; transition: opacity .6s var(--ease); }
.ctx-lijnen path.aan { opacity: 1; animation: mieren 2.4s linear infinite; }
.ctx-lijnen circle { fill: var(--amber); opacity: 0; transition: opacity .4s; }
.ctx-lijnen circle.aan { opacity: 1; }
@keyframes mieren { to { stroke-dashoffset: -18; } }
@media (prefers-reduced-motion: reduce) { .ctx-lijnen path.aan { animation: none; } }
@media (max-width: 900px) {
  .ctx { grid-template-columns: 1fr; gap: 20px; }
  .ctx-doek { align-content: start; }
  .ctx-lijnen { display: none; }
  .ctx-doek { padding: 18px; }
}

/* ---------- de zin met een boterkaart ---------- */
/* Een deel van de zin ligt op een boterkaart, het kaartje uit de app voor wat
   op jou wacht (kleuren uit docs/ontwerp/beslistaal.md, donker: lamplicht).
   Komt een keer rustig in beeld (Kees, 25-09-2026). */
.zin-blok { padding-top: clamp(80px, 10vw, 150px); }
.zin { max-width: 17ch; margin: 0 auto; text-align: center; font-size: clamp(38px, 5.4vw, 74px); line-height: 1.12; letter-spacing: -.04em; font-weight: 650; text-wrap: balance; }
.zin .streep { display: inline-block; margin: .06em 0 0 .04em; padding: .02em .3em .1em; border-radius: .3em; color: #17160F; background: linear-gradient(180deg, #EADCB6, #E1CC99); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 0 0 1px rgba(0, 0, 0, .35), 0 22px 40px -20px rgba(0, 0, 0, .9); transition: opacity .5s var(--ease), transform .7s var(--spring); }
.js .zin:not(.aan) .streep { opacity: 0; transform: translateY(14px) scale(.94); }

/* ---------- aan de slag in een stap ---------- */
.een { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 980px; margin: clamp(48px, 6vw, 72px) auto clamp(56px, 7vw, 88px); }
.een-art svg { display: block; width: 100%; height: auto; }
.een-art ellipse { opacity: var(--schaduw-plat); }
.een-art .k-lijn { animation: mieren 1.6s linear infinite; }
.een-tekst .wie { font-size: 13.5px; font-weight: 700; color: var(--amber-ink); }
.een-tekst > h3 { font-size: clamp(26px, 2.6vw, 32px); letter-spacing: -.02em; line-height: 1.15; margin-top: 6px; }
.een-tekst .doet { font-size: 16px; line-height: 1.5; color: var(--ink2); margin-top: 10px; }
.een-rest { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--line); }
.een-rest h3 { font-size: 18px; letter-spacing: -.015em; }
.een-rest ul { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
.een-rest li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.45; color: var(--ink2); }
.een-rest li svg { flex: none; width: 18px; height: 18px; margin-top: 2px; fill: none; stroke: var(--amber); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 760px) { .een { grid-template-columns: 1fr; max-width: 520px; } .een-art { max-width: 380px; margin: 0 auto; } }

/* Het slot: aan de slag in een stap, met daaronder de wachtlijst. */
.slot { text-align: center; padding-bottom: clamp(96px, 12vw, 160px); }
.slot .een { text-align: left; margin-bottom: clamp(40px, 5vw, 56px); }
.slot .lead { margin: 0 auto; max-width: 34ch; }
.foot .obj { width: min(320px, 64vw); margin: clamp(24px, 4vw, 48px) auto clamp(48px, 6vw, 80px); }
#faq .faq { margin-top: clamp(40px, 5vw, 56px); }

/* Op een telefoon is een lange mail een klein venster waarin je kunt swipen.
   Het loopt vanzelf mee naar de vraag die oplicht; de rand onderaan vervaagt,
   zodat je ziet dat er meer is. De lijst in de kennisbank werkt net zo. */
@media (max-width: 760px) {
  [data-inklap], .kb-lijst { max-height: 360px; overflow-y: auto; overscroll-behavior: contain; -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); scrollbar-width: none; }
  [data-inklap]::-webkit-scrollbar, .kb-lijst::-webkit-scrollbar { display: none; }
  [data-inklap] { padding-bottom: 56px; }
  .kb-lijst { max-height: 300px; padding-bottom: 40px; }
}

/* ---------- klinkt als jij: zinnen die Beeylo van je kent ---------- */
/* Echte zinnen uit je eigen mail, dus in de briefletter. Drie kolommen die
   iets verspringen, zodat het rustig leest (Kees, 29-09-2026). */
.zinnen { list-style: none; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0; max-width: 1040px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: start; }
.zinnen li { background: var(--sheet); border-radius: 20px; padding: 26px 26px 22px; box-shadow: var(--shadow-card); }
.zinnen li:nth-child(3n + 2) { margin-top: 36px; }
.zinnen li:nth-child(3n + 3) { margin-top: 12px; }
.zinnen p { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; color: var(--ink); text-wrap: pretty; }
.zinnen small { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13px; color: var(--ink3); }
.zinnen small::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
@media (max-width: 860px) { .zinnen { grid-template-columns: 1fr; max-width: 520px; } .zinnen li:nth-child(n) { margin-top: 0; } }

/* ---------- vijf vragen, alle vijf kies jij ---------- */
.node-chips button { font: 600 12.5px/1.2 var(--sans); padding: 6px 11px; border-radius: 999px; border: 1px solid #DCDAD4; background: #FFFFFF; color: #16130A; cursor: pointer; transition: background .25s, border-color .25s, transform .25s var(--spring); }
.node-chips button:hover { border-color: #F5B400; }
.node-chips button[aria-pressed="true"] { background: rgba(245, 180, 0, .22); border-color: #F5B400; transform: scale(1.04); }
.av-tekst { margin-top: 8px; font-family: var(--serif); font-size: 14.5px; line-height: 1.55; color: #16130A; white-space: pre-line; animation: rise .3s var(--ease) both; }
.av-tekst.laden i { display: block; height: 8px; margin-top: 9px; border-radius: 4px; background: linear-gradient(90deg, #E6E1D3 0%, #FDF1CE 40%, #E6E1D3 80%); background-size: 250% 100%; animation: glans 1.2s linear infinite; }
.av-tekst.laden i:nth-of-type(2) { width: 88%; }
.av-tekst.laden i:nth-of-type(3) { width: 56%; }
.actie button.send-mini { border: 0; font-family: var(--sans); cursor: pointer; }
.actie button.send-mini:disabled { cursor: default; }
.ctx .actie { width: min(460px, 100%); }

/* ---------- voor wie ---------- */

/* ---------- echte mensen bij de voorbeelden ---------- */
/* Wie de mail stuurt, en jij bij je antwoord. Foto's uit het werk, niet
   geposeerd (Kees, 30-09-2026). */
.foto { flex: none; display: block; border-radius: 50%; object-fit: cover; background: var(--soft); box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.win-from .wie, .sheet .from .wie { display: flex; align-items: center; gap: 12px; min-width: 0; }
.win-from .foto { width: 44px; height: 44px; }
.win-from { align-items: center; }
.sheet .from { align-items: center; }
.sheet .from .foto { width: 36px; height: 36px; }
.card .door { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; animation: rise .26s var(--ease) both; }
.card .door .foto { width: 32px; height: 32px; }
.card .door.leeg { display: none; }
.card .door + .draft-text { margin-top: 8px; padding-top: 0; border-top: 0; }
.av-concept .door { display: flex; align-items: center; gap: 8px; }
.av-concept .door .foto { width: 28px; height: 28px; }
.zinnen small::before { content: none; }
.zinnen small { gap: 9px; }
.zinnen small .foto { width: 28px; height: 28px; }
.zinnen small b { color: var(--ink2); font-weight: 600; }

/* ---------- keurmerken van Mistral ---------- */
/* Eigen neutrale zegels in plaats van de officiële logo's: die horen bij
   Mistral en hun keuringsinstanties, niet bij ons (Kees, 30-09-2026). */
.privacy-point .privacy-standards { flex-direction: column; gap: 14px; margin-top: 26px; font-size: inherit; }
.privacy-standards li { display: flex; align-items: center; gap: 14px; }
.privacy-standards li span { display: flex; flex-direction: column; font-size: 14.5px; line-height: 1.35; font-weight: 500; color: var(--ink3); }
.privacy-standards li b { font-size: 17px; font-weight: 700; color: var(--ink); }
.zegel { flex: none; width: 58px; height: 58px; color: var(--ink); }
.zegel circle { fill: none; stroke: currentColor; stroke-width: 1.6; }
.zegel .binnen { stroke-width: 1; stroke-dasharray: 2 3; opacity: .55; }
.zegel text { fill: currentColor; text-anchor: middle; font-family: var(--sans); font-weight: 800; }
.zegel .z1 { font-size: 11.5px; letter-spacing: .02em; }
.zegel .z2 { font-size: 9.5px; font-weight: 700; letter-spacing: .04em; opacity: .75; }

/* Het antwoord vervangt de vragen zodra het klaar is (Kees, 30-09-2026). */
.js .ctx .actie.klaar .av { display: none; }
.av-concept .door { flex-wrap: wrap; }
.av-terug { margin-left: auto; padding: 0; border: 0; background: none; font: 600 12.5px/1.2 var(--sans); color: #8A6300; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.av-terug:hover { color: #16130A; }
.mark { flex: none; }

/* Licht is de standaard en de enige keuze op de live site (Kees, 01-10-2026).
   Het donkere thema blijft in de code staan: de knop is alleen verborgen en
   het script in de kop zet data-theme="light" vast. Terugzetten = die regel
   in de kop weer laten afhangen van de bewaarde keuze en deze regel weghalen. */
.nav .thema { display: none !important; }

/* Titels en ondertitels: loopt een zin over meerdere regels, dan verdeelt de
   browser de woorden gelijkmatig over die regels (Kees, 01-10-2026). */
h1, h2, h3, h4, .display, .title, .zin, .lead, .center-head p, .privacy-head > p, .kb-sub { text-wrap: balance; }