/* 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);
  --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). De lichte
   kleuren hierboven blijven staan; terug naar "(prefers-color-scheme: dark)"
   zet het volgen van het apparaat weer aan. */
@media all {
  :root {
    --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);
    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)); }
@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; } }

/* ---------- 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 ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(56px, 8vw, 112px) clamp(110px, 14vw, 190px); text-align: center; overflow-x: clip; }
/* De gloed loopt zacht door in de volgende sectie, zonder rand (Kees, 24-09). */
.hero::before { content: ""; position: absolute; z-index: -1; left: 50%; bottom: -38%; width: 130%; height: 95%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(245, 180, 0, .20), rgba(245, 180, 0, .06) 55%, transparent); pointer-events: none; }
.hero .lead { max-width: 40ch; margin: 26px auto 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 { visibility: hidden; }
/* 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; }
.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); }
.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 */
.know .kb { max-width: 1000px; margin: clamp(48px, 6vw, 72px) auto 0; }
.kb-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 48px); }
.pts { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 12px; }
.pts li { display: flex; gap: 14px; align-items: center; font-size: 17px; font-weight: 600; letter-spacing: -.005em; }
.kb { background: var(--sheet); border-radius: 28px; padding: clamp(22px, 3vw, 32px); box-shadow: var(--shadow-lift); }
.kb-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.kb-head b { font-size: 19px; letter-spacing: -.012em; }
.kb-head span { font-size: 13.5px; color: var(--ink3); font-variant-numeric: tabular-nums; }
.kb-h { margin: 22px 0 8px; font-size: 13px; font-weight: 700; color: var(--ink3); letter-spacing: 0; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts span { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 12px; background: var(--soft); font-size: 14.5px; line-height: 1.35; }
.facts span.new { background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber); animation: pop .36s var(--spring) both; }
.sent { display: grid; gap: 8px; }
.sent div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); font-size: 14px; }
.sent span { color: var(--ink3); white-space: nowrap; }
.kb-cols .sent div { flex-direction: column; gap: 6px; }
.kb-cols .sent span { font-size: 13px; }
.sent q { font-family: var(--serif); color: var(--ink2); }
.teach { margin-top: 22px; display: flex; gap: 8px; padding: 6px; border: 1px solid var(--line-strong); border-radius: 999px; transition: border-color var(--fast), box-shadow var(--fast); }
.teach:focus-within { border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); }
.teach input { flex: 1; min-width: 0; border: 0; background: transparent; height: 40px; padding: 0 14px; font-size: 15px; }
.teach input:focus { outline: none; }
.teach button { height: 40px; padding: 0 18px; border-radius: 999px; border: 0; background: var(--btn); color: var(--on-btn); font-weight: 700; font-size: 14.5px; cursor: pointer; transition: transform var(--fast) var(--ease); }
.teach button:active { transform: scale(.97); }
.kb-note { margin-top: 10px; font-size: 13px; color: var(--ink3); }
@media (max-width: 760px) { .kb-cols { grid-template-columns: 1fr; gap: 0; } }

/* 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; }
.privacy-head .title { max-width: 30ch; }
.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. */
.close .logo3d .schaduw { opacity: .45; }
@media all { .close .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; }
.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). */

/* ---------- twee dingen die je niet meer hoeft te onthouden ---------- */
/* Twee kaarten met een klein stukje app erin: de snelle vragen tikken zich af,
   de follow-up loopt zijn stappen door (Kees, 25-09-2026). */
.twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 88px); max-width: 1000px; margin: clamp(48px, 6vw, 72px) auto 0; }
.twee-een { text-align: center; }
.twee-een h3 { margin-top: 30px; font-size: 20px; letter-spacing: -.015em; line-height: 1.3; }
.twee-een > p { margin: 8px auto 0; max-width: 32ch; font-size: 16px; line-height: 1.5; color: var(--ink2); }
/* Een klein stukje app, zonder kaart eromheen: het zweeft op een zachte gloed. */
.vn { position: relative; isolation: isolate; display: grid; place-items: center; min-height: 250px; }
.vn::before { content: ""; position: absolute; inset: 0 8%; background: radial-gradient(closest-side, rgba(245, 180, 0, .16), transparent); z-index: -1; }
.vn-in { width: min(360px, 100%); text-align: left; color: #16130A; }
.vn-kop { display: flex; justify-content: space-between; align-items: center; padding: 0 4px 10px; font-size: 13.5px; color: var(--ink); }
.vn-kop span { font-size: 12px; font-weight: 700; color: #16130A; background: var(--amber); padding: 2px 9px; border-radius: 999px; font-variant-numeric: tabular-nums; }
.vs-rij { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border-radius: 14px; padding: 10px 10px 10px 14px; margin-top: 8px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 14px 30px -18px rgba(0, 0, 0, .55); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.vs-t { flex: 1; min-width: 0; display: flex; flex-direction: column; transition: opacity .4s var(--ease); }
.vs-t b { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-t small { font-size: 12px; color: #6B675D; }
.vs-k { display: flex; gap: 6px; flex: none; }
.vs-k i { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; border: 1px solid #DCDAD4; transition: background .25s, border-color .25s, transform .25s var(--spring); }
.vs-k svg { display: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.vs-rij.klaar .ja { background: var(--amber); border-color: var(--amber); transform: scale(1.05); }
.vs-rij.klaar .ja svg { display: block; }
.vs-rij.klaar .vs-t { opacity: .4; }
.vf-rij { display: flex; align-items: center; gap: 12px; background: #FFFFFF; border-radius: 14px; padding: 12px 12px 12px 12px; box-shadow: 0 1px 2px rgba(0, 0, 0, .15), 0 14px 30px -18px rgba(0, 0, 0, .55); }
.vf-av { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #EFEDE6; color: #4A463D; }
.vf-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vf-t b { font-size: 14px; font-weight: 600; line-height: 1.3; }
.vf-t small { font-size: 12px; color: #6B675D; }
.vf-st { flex: none; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #EFEDE6; color: #4A463D; font-variant-numeric: tabular-nums; transition: background .3s, color .3s, transform .3s var(--spring); }
.vf.terug .vf-st { background: var(--amber); color: #16130A; transform: scale(1.05); }
.vf-nudge { margin: 10px 0 0 46px; background: linear-gradient(160deg, var(--panel-a), var(--panel-b)); border-radius: 14px; padding: 12px 14px; box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55); transition: opacity .45s var(--ease), transform .5s var(--spring); }
.vf-nudge p { font-family: var(--serif); font-size: 14.5px; line-height: 1.45; }
.vf-nudge .send-mini { display: inline-block; margin-top: 10px; font-size: 12.5px; font-weight: 700; background: #F5B400; color: #16130A; padding: 5px 14px; border-radius: 999px; }
.js .vf:not(.terug) .vf-nudge { opacity: 0; transform: translateY(8px) scale(.97); }
@media (max-width: 760px) { .twee { grid-template-columns: 1fr; max-width: 420px; } .vn { min-height: 0; } }

/* ---------- 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: grid; grid-template-columns: minmax(0, 400px); grid-auto-rows: 1fr; gap: 28px; justify-content: center; align-content: center; padding: 32px; border-radius: 24px; background-color: var(--sheet); background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 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); }
.node-notitie { margin: 12px 14px 0; min-height: 40px; padding: 9px 12px; border-radius: 10px; background: #F6F4EE; border: 1px solid #ECE8DC; font-size: 13.5px; line-height: 1.4; color: #3D3A33; }
.node-notitie .caret { display: none; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px; background: #16130A; }
.node-notitie.typt .caret { display: inline-block; animation: blink 1s steps(2) infinite; }
.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; }
.ctx-lijnen { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.ctx-lijnen path { fill: none; stroke: rgba(255, 255, 255, .34); 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 { grid-template-columns: minmax(0, 1fr); gap: 14px; 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); padding-bottom: 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 .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); }