/* Ailard. Split screen: a sticky ink stage that shows the customer journey (canvas, journey.js)
   and a paper column with the 10 chapters. Monochrome plus one lime pop.
   Shape rule: interactive elements are pills, surfaces are near square (4px). */

@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope.woff2?v=1") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist Mono";
  src: url("fonts/geistmono.woff2?v=1") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #f2f1ec;
  --paper-2: #e7e6e0;
  --white: #fbfbf8;
  --ink: #121211;
  --ink-2: #1d1d1b;
  --mute: #5d5b55;
  --mute-d: #a3a19a;
  --line: rgba(18, 18, 17, 0.14);
  --line-d: rgba(242, 241, 236, 0.16);
  --lime: #d7ff00;

  --r: 4px;
  --nav: 72px;
  --stage: 44%;
  --pad: clamp(24px, 5vw, 88px);

  --display: "Manrope", system-ui, "Segoe UI", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav) + 24px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--display);
  font-size: 18px;
  font-weight: 450;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
img, svg, canvas { display: block; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 500; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.close :focus-visible, .foot :focus-visible, .tier--partnership :focus-visible, .zin :focus-visible, .lagen__big :focus-visible { outline-color: var(--lime); }
[hidden] { display: none !important; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: var(--r); text-decoration: none; }
.skip:focus { top: 12px; }

/* ── Shared bits ─────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px; border-radius: 999px; white-space: nowrap;
  font: 600 16px/1 var(--display); text-decoration: none; letter-spacing: -0.005em;
  transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s;
}
.btn:active { transform: scale(0.97); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ink:hover { background: #000; }
.btn--lime { background: var(--lime); color: var(--ink); }
.btn--lime:hover { background: #e6ff4d; }
.btn--lg { min-height: 60px; padding: 0 30px; font-size: 18px; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.link svg { transition: transform 0.25s var(--ease); }
.link:hover svg { transform: translateX(3px); }
.link--light { color: var(--paper); }
.tag {
  display: inline-block; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--lime); color: var(--ink); padding: 5px 8px 4px; border-radius: var(--r); vertical-align: middle; line-height: 1.2;
}

/* Reveal */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.8s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* ── Nav: left half sits on the ink stage, right half on paper ── */
.nav {
  position: fixed; z-index: 50; inset: 0 0 auto 0; height: var(--nav);
  display: grid; grid-template-columns: var(--stage) 1fr; align-items: stretch;
}
.nav__brand {
  display: inline-flex; align-items: center; gap: 10px; align-self: center; justify-self: start;
  margin-left: var(--pad); color: var(--paper);
  font-weight: 700; font-size: 19px; text-decoration: none; letter-spacing: -0.02em;
}
.nav__brand svg { color: var(--lime); }
.nav__right {
  display: flex; align-items: center; justify-content: flex-end; gap: 28px;
  padding: 0 var(--pad); background: rgba(242, 241, 236, 0.9);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav__links { display: flex; gap: 24px; margin-right: auto; }
.nav__links a { text-decoration: none; font-weight: 500; font-size: 15px; color: var(--mute); transition: color 0.2s; }
.nav__links a:hover { color: var(--ink); }
.nav__cta { min-height: 42px; padding: 0 18px; font-size: 15px; }
.nav__right { transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease); }
.nav.is-dark .nav__right { background: rgba(18, 18, 17, 0.9); border-color: var(--line-d); }
/* at the end of the page the stage scrolls up under the nav: a solid bar keeps the brand clear of the stage labels */
.nav.is-dark { background: rgba(18, 18, 17, 0.94); }
.nav.is-dark .nav__links a { color: var(--mute-d); }
.nav.is-dark .nav__links a:hover { color: var(--paper); }
.nav.is-dark .nav__cta { background: var(--lime); color: var(--ink); }

/* ── Split ───────────────────────────────────────────────── */
.split { display: grid; grid-template-columns: var(--stage) 1fr; }
.js .split { position: relative; }

.stage {
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  background: var(--ink); color: var(--paper);
  display: grid; grid-template-rows: 1fr auto; overflow: hidden;
  padding: calc(var(--nav) + 8px) var(--pad) clamp(24px, 4vh, 44px);
}
html:not(.js) .stage { display: none; }
html:not(.js) .split { grid-template-columns: 1fr; }
html:not(.js) .nav { grid-template-columns: auto 1fr; background: var(--ink); }
html:not(.js) .nav__brand { padding-right: 32px; }

/* the stage is one canvas (journey.js) that draws the customer journey, driven by the scroll position */
.stage__view { position: relative; min-height: 0; }
.journey { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.stage__cap { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: end; position: relative; }
.stage__idx { grid-row: span 2; color: var(--mute-d); font-size: 13px; align-self: start; padding-top: 6px; }
.stage__idx b { color: var(--lime); font-weight: 600; }
.stage__name { font-size: clamp(24px, 2vw, 30px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; }
.stage__text { color: var(--mute-d); margin-top: 6px; }
.swap { animation: swap 0.5s var(--ease); }
@keyframes swap { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Chapters column ─────────────────────────────────────── */
.chapters { min-width: 0; container: col / inline-size; } /* components size themselves to the column, not the window */
.ch { padding: clamp(96px, 16vh, 168px) var(--pad); border-top: 1px solid var(--line); }
/* Anchor jumps (#herken, #werk, #aanbod, #beheer, #vragen) land with the section's top rule
   hidden behind the fixed nav, so the chapter starts with its own top padding. */
.ch { scroll-margin-top: calc(-1 * (var(--nav) + 24px)); }
.ch.hero { scroll-margin-top: 100vh; } /* #top always lands on the very top of the page */
.ch > * + * { margin-top: clamp(40px, 6vh, 64px); }
.ch__head { max-width: 40rem; }
.ch__head > * + * { margin-top: 20px; }
.ch__head > .idx + * { margin-top: 28px; }
.ch h2 { font-size: clamp(34px, 3.3vw, 54px); line-height: 1.08; letter-spacing: -0.04em; }
.ch h2 span { color: var(--mute); }
.ch__head p:not(.idx) { color: var(--mute); max-width: 56ch; }
.ch__head .lede { color: var(--ink); font-size: clamp(20px, 1.6vw, 24px); line-height: 1.35; font-weight: 500; }

.idx { display: inline-flex; align-items: center; gap: 12px; color: var(--mute); }
.idx span {
  display: inline-grid; place-items: center; min-width: 34px; height: 24px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); font-weight: 600;
  transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s;
}
.ch.is-active .idx span { background: var(--ink); border-color: var(--ink); color: var(--lime); }

/* 01 Hero */
.hero { border-top: 0; min-height: 100vh; min-height: 100dvh; padding-top: calc(var(--nav) + clamp(56px, 12vh, 140px)); display: flex; flex-direction: column; justify-content: space-between; gap: 64px; }
.hero > * + * { margin-top: 0; }
.hero h1 { margin-top: 28px; font-size: clamp(50px, 6.6vw, 112px); line-height: 1.04; letter-spacing: -0.045em; max-width: 9ch; }
.hero h1 .ai { display: inline-block; background: var(--ink); color: var(--lime); padding: 0 0.1em; margin-right: 0.04em; border-radius: var(--r); }
.hero__sub { margin-top: 28px; font-size: clamp(19px, 1.5vw, 22px); line-height: 1.42; color: var(--mute); max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 26px; margin-top: 36px; }
.hero__micro { margin-top: 22px; color: var(--mute); }

.miss { background: var(--ink); color: var(--paper); border-radius: var(--r); padding: clamp(28px, 3vw, 44px); max-width: 44rem; }
.miss h3 { font-size: clamp(22px, 1.8vw, 28px); display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.miss ol { margin-top: 22px; counter-reset: m; }
.miss li { counter-increment: m; display: grid; grid-template-columns: 40px 1fr; padding: 13px 0; border-top: 1px solid var(--line-d); font-size: 19px; }
.miss li::before { content: "0" counter(m); font-family: var(--mono); font-size: 12px; color: var(--lime); padding-top: 5px; }

/* 03 Department */
.vs { max-width: 46rem; }
.vs__row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.vs__row--labels { padding-top: 0; }
.vs__row p { display: grid; grid-template-columns: 26px 1fr; gap: 8px; }
.vs__row p:first-child { font-weight: 600; }
.vs__row p:first-child svg { color: var(--ink); background: var(--lime); border-radius: 2px; padding: 1px; margin-top: 3px; }
.vs__row p:last-child { color: var(--mute); text-decoration: line-through; text-decoration-color: rgba(93, 91, 85, 0.45); text-decoration-thickness: 1px; }
.vs__row p:last-child svg { margin-top: 6px; }
.note { color: var(--mute); max-width: 52ch; padding-left: 18px; border-left: 3px solid var(--lime); }

/* 04 Ladder */
.tiers { display: grid; gap: 16px; }
.tier {
  display: grid; gap: 18px; padding: clamp(24px, 2.6vw, 36px);
  border: 1px solid var(--line); border-radius: var(--r); background: var(--white);
  transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.tier--partnership { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tier__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.tier h3 { font-size: clamp(30px, 2.6vw, 40px); letter-spacing: -0.03em; }
.tier__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.tier__price b { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.tier__price span { font-size: 14px; color: var(--mute); }
.tier--partnership .tier__price span, .tier--partnership .tier__what, .tier--partnership dt { color: var(--mute-d); }
.tier__quote { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.35; font-weight: 500; max-width: 40ch; }
.tier__what { color: var(--mute); max-width: 52ch; }
.tier__spec { display: grid; grid-template-columns: 120px 180px 1fr; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; }
.tier--partnership .tier__spec { border-color: var(--line-d); }
.tier__spec dt { color: var(--mute); margin-bottom: 6px; }
.tier--partnership .tier__spec dt { color: var(--mute-d); }
.tier__spec dd { font-size: 16px; line-height: 1.35; font-weight: 600; }
.tier .btn, .tier .link { justify-self: start; }

/* 06 Rounds */
.rounds__list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.round { display: grid; grid-template-columns: 64px 1fr; gap: 20px; padding: 32px 0; border-bottom: 1px solid var(--line); }
.round__num { font-size: 13px; padding-top: 10px; color: var(--mute); transition: color 0.4s; }
.round h3 { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.03em; }
.round__body > p { margin-top: 10px; color: var(--mute); max-width: 48ch; }
.round__vis { margin-top: 22px; max-width: 30rem; display: grid; gap: 8px; padding: 18px; border-radius: var(--r); background: rgba(18, 18, 17, 0.05); }
.note-s { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 11px 14px; font-weight: 600; font-size: 15px; line-height: 1.3; justify-self: start; }
.note-s:nth-child(2) { margin-left: 10%; }
.note-s--on { border-color: var(--ink); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.win { background: var(--white); border: 1.5px solid var(--ink); border-radius: var(--r); overflow: hidden; }
.win__bar { display: flex; align-items: center; gap: 6px; padding: 9px 12px; border-bottom: 1.5px solid var(--ink); }
.win__bar i { width: 8px; height: 8px; background: var(--ink); }
.win__bar .mono { margin-left: auto; font-size: 11px; }
.win__body { display: grid; grid-template-columns: 60px 1fr; grid-template-rows: 18px 10px 10px 26px; gap: 10px 14px; padding: 16px; }
.sk { display: block; background: var(--paper-2); border-radius: 2px; }
.sk--side { grid-row: 1 / span 4; background: var(--ink); }
.sk--h { width: 55%; } .sk--l { width: 90%; } .sk--l2 { width: 70%; }
.sk--btn { width: 100px; background: var(--lime); border: 1.5px solid var(--ink); }
.round__vis--chat { background: var(--ink); }
.bubble { justify-self: start; max-width: 30ch; padding: 11px 14px; border-radius: var(--r); background: rgba(242, 241, 236, 0.1); color: var(--paper); font-size: 15px; line-height: 1.35; }
.bubble--me { justify-self: end; background: var(--lime); color: var(--ink); font-weight: 600; display: flex; gap: 10px; align-items: center; }
.bubble--me svg { flex: none; }
.meter { display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: center; }
.meter__bar { height: 30px; border-radius: 2px; background: var(--ink); }
.meter__bar--open { background: transparent; border: 1.5px dashed var(--ink); display: flex; align-items: center; padding: 0 12px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; font-weight: 500; }

/* 07 Cases */
.cases { display: grid; gap: 16px; }
.case { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); padding: clamp(22px, 2.4vw, 32px); display: grid; gap: 18px; transition: border-color 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.case__name { display: grid; gap: 6px; }
.case__name .mono { color: var(--mute); }
.case__name h3 { font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.03em; }
.case__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; border-top: 1px solid var(--line); padding-top: 18px; }
.case__pair p { font-size: 16px; line-height: 1.45; color: var(--mute); }
.case__pair p:last-child { color: var(--ink); }
.case__k { display: inline-block; margin-bottom: 8px; padding: 3px 6px; border-radius: 2px; border: 1px solid var(--line); color: var(--mute); }
.case__k--now { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.case__pair p > .case__k { display: table; }

.facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.facts li { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }

/* 10 FAQ */
.faq__list { border-top: 1px solid var(--line); max-width: 48rem; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; font-size: clamp(19px, 1.5vw, 22px); font-weight: 600; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 28px; height: 28px; padding: 6px; border-radius: var(--r); background: var(--ink); color: var(--paper); transition: transform 0.3s var(--ease), color 0.3s; }
.faq summary:hover svg { color: var(--lime); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--lime); }
.faq details p { padding: 0 48px 24px 0; color: var(--mute); max-width: 60ch; }
.faq details p + p { margin-top: -10px; }
.faq details strong { color: var(--ink); font-weight: 600; }

/* 11 Close */
.close { background: var(--ink); color: var(--paper); border-top: 0; min-height: 100vh; min-height: 100dvh; display: grid; align-content: center; }
.close__in > * + * { margin-top: 26px; }
.close .idx { color: var(--mute-d); }
.close .idx span { border-color: var(--line-d); color: var(--paper); }
.close.is-active .idx span { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.close h2 { font-size: clamp(38px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -0.045em; max-width: 14ch; }
.close__in > p:not(.idx) { color: var(--mute-d); max-width: 44ch; font-size: clamp(18px, 1.4vw, 21px); }
.close__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; padding-top: 10px; }

/* Footer */
.foot { background: var(--ink); color: var(--mute-d); padding: 0 var(--pad) 40px; }
.foot__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--line-d); padding-top: 28px; }
.foot__brand { display: inline-flex; align-items: center; gap: 12px; color: var(--paper); text-decoration: none; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.foot__brand svg { color: var(--lime); }
.foot a { color: inherit; }

/* ── Medium widths: narrower stage ───────────────────────── */
@media (max-width: 1200px) {
  :root { --stage: 40%; }
  .tier__spec { grid-template-columns: 1fr 1fr; }
  .tier__spec div:last-child { grid-column: 1 / -1; }
  .nav__links { display: none; }
}

/* ── Mobile: no stage, one column ────────────────────────── */
@media (max-width: 900px) {
  :root { --pad: 20px; --nav: 60px; }
  .nav { position: relative; grid-template-columns: auto 1fr; background: var(--ink); }
  .nav__right { background: transparent; border: 0; padding: 0 var(--pad) 0 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav__cta { background: var(--lime); color: var(--ink); min-height: 38px; padding: 0 14px; font-size: 14px; }
  .nav__cta:hover { background: #e6ff4d; }
  .split { grid-template-columns: 1fr; }
  .stage { display: none; }               /* the journey is decoration and added nothing on a phone */
  html { scroll-padding-top: 0; }
  .ch { scroll-margin-top: 0; }
  .ch.hero { scroll-margin-top: 100vh; }

  .ch { padding: 72px var(--pad); }
  .hero { min-height: 0; padding-top: 48px; gap: 48px; }
  .hero h1 { font-size: clamp(44px, 13vw, 64px); }
  .vs__row { grid-template-columns: 1fr; gap: 8px; }
  .vs__row--labels { display: none; }
  .tier__top { flex-direction: column; align-items: flex-start; gap: 4px; }
  .tier__price { justify-content: flex-start; }
  .tier__spec { grid-template-columns: 1fr; gap: 12px; }
  .round { grid-template-columns: 1fr; gap: 8px; }
  .round__num { padding-top: 0; }
  .case__pair { grid-template-columns: 1fr; gap: 16px; }
  .faq details p { padding-right: 0; }
  .close { min-height: 0; padding-block: 96px; }
}

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .tier, .case, .idx span { transition: none; }
  .swap { animation: none; }
}

/* ══ Variant K: sharpened proposition (modules, mirror, cases counted) ══ */
.hero h1 { max-width: 14ch; font-size: clamp(42px, 5.2vw, 88px); }
.hero__sub { max-width: 40ch; }
.nowrap { white-space: nowrap; }

.lnk { color: inherit; font-weight: 600; text-decoration: none; background: linear-gradient(var(--lime), var(--lime)) no-repeat 0 92% / 100% 0.32em; transition: background-size 0.25s var(--ease); }
.lnk:hover { background-size: 100% 100%; }

/* 03 The test */
.miss__foot { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-d); color: var(--mute-d); }

/* 04 One unit */
.tier__spec { grid-template-columns: 90px 130px 150px 1fr; }

/* 06 Cases counted in modules */
.case__meta { display: flex; flex-wrap: wrap; gap: 8px; color: var(--mute); }
.case__meta span { padding: 5px 8px; border: 1px solid var(--line); border-radius: var(--r); }
.case__meta span:nth-child(2) { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.case__pick { display: grid; gap: 10px; justify-items: start; padding: 16px 18px; background: var(--paper); border-radius: var(--r); font-size: 16px; line-height: 1.45; max-width: 60ch; }

@media (max-width: 1200px) {
  .tier__spec { grid-template-columns: 1fr 1fr 1fr; }
  .tier__spec div:last-child { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .hero h1 { font-size: clamp(38px, 11vw, 56px); }
  .tier__spec { grid-template-columns: 1fr; }
}

/* ── WhatsApp: floating pill + inline links (shown by app.js only when a number is set) ── */
[data-wa][hidden], [data-wa-wrap][hidden] { display: none !important; }
.wa-fab {
  position: fixed; z-index: 45; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 16px;
  border-radius: 999px; background: var(--ink); color: var(--paper); text-decoration: none;
  font: 600 16px/1 var(--display); letter-spacing: -0.005em;
  box-shadow: 0 0 0 1px var(--line-d), 0 10px 28px rgba(18, 18, 17, 0.28);
  transition: transform 0.25s var(--ease), background-color 0.25s;
}
.wa-fab svg { color: var(--lime); flex: none; }
.wa-fab:hover { background: #000; transform: translateY(-2px); }
.wa-fab:active { transform: scale(0.97); }
.wa-fab:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.foot { padding-bottom: 96px; }
@media (max-width: 900px) {
  .wa-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); min-height: 48px; padding: 0 16px 0 14px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .wa-fab { transition: none; } .wa-fab:hover { transform: none; } }
@media print { .wa-fab { display: none !important; } }

/* Footer: legal links */
.foot__legal { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-top: 22px; font-size: 13px; }
.foot__legal a { color: var(--mute-d); text-decoration: none; }
.foot__legal a:hover { color: var(--paper); text-decoration: underline; }

/* Cases: plain-language list instead of the module list (bundle 3) */
.case__list { display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 18px; max-width: 60ch; }
.case__list li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 16px; line-height: 1.45; }
.case__list svg { margin-top: 3px; color: var(--ink); background: var(--lime); border-radius: 3px; padding: 2px; }

/* ══ Compact sections (okt 2026): 02 De zin, 04 Lagen, 05 De ronde, 06 Hoe lang blijf je, 07 Pakketten, 08 Redenen ══
   Each component is built up by app.js, which adds .is-live. Without JS the plain list or cards show.
   Sizes follow the column (container "col" on .chapters), so the stage width never squeezes a component. */

/* ── 02 De zin: one sentence per example ─────────────────── */
.zin { max-width: 48rem; display: grid; gap: 20px; padding: clamp(24px, 3vw, 34px) clamp(20px, 3vw, 36px) clamp(22px, 2.6vw, 30px); background: var(--ink); color: var(--paper); border-radius: var(--r); }
.zin__top { color: var(--mute-d); font-size: 15px; }
.zin__item + .zin__item { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-d); }
.zin__sent { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.22; font-weight: 650; letter-spacing: -0.025em; text-wrap: balance; }
.hl { background: var(--lime); color: var(--ink); border-radius: var(--r); padding: 0 0.14em; margin: 0 -0.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.zin__cost { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-top: 14px; }
.zin__cost .mono { color: var(--mute-d); }
.zin__v { color: var(--lime); font-weight: 600; font-size: 16px; }
/* live: the seven sentences share one grid cell, so the card keeps the height of the longest one */
.zin.is-live .zin__list { display: grid; }
.zin.is-live .zin__item { grid-area: 1 / 1; display: flex; flex-direction: column; margin: 0; padding: 0; border: 0; visibility: hidden; opacity: 0; transition: opacity 0.35s var(--ease), visibility 0s linear 0.35s; }
.zin.is-live .zin__item.is-on { visibility: visible; opacity: 1; transition: opacity 0.35s var(--ease); }
.zin.is-live .zin__cost { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-d); }
.zin.is-live .zin__sent { margin-bottom: 22px; }
.zin__step { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 12px; }
.zin__dots, .zin__navs { display: flex; gap: 8px; }
.zin__navs { margin-left: auto; }
.zin__dot, .zin__nav {
  width: 44px; height: 44px; flex: none; display: grid; place-items: center; padding: 0;
  border-radius: 50%; border: 1px solid rgba(242, 241, 236, 0.3); background: none; color: var(--paper);
  font: 600 13px/1 var(--mono); cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.zin__dot:hover { border-color: var(--lime); }
.zin__dot[aria-pressed="true"] { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.zin__nav:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.zin__act { max-width: 48rem; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.ch > .zin__act { margin-top: 28px; }

/* ── 04 Lagen: overview, was and now, six automations, one highlighted ── */
.lagen { display: grid; gap: 22px; }
.lagen.is-live .cases { display: none; }
.lagen__stations { display: flex; align-items: center; }
.lagen__st { flex: none; display: flex; align-items: center; gap: 9px; padding: 4px 0; background: none; border: 0; font: inherit; color: inherit; cursor: pointer; }
.lagen__st[disabled] { cursor: default; opacity: 0.8; }
.lagen__sq { width: 30px; height: 30px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: var(--r); background: var(--paper); font: 600 12px/1 var(--mono); transition: background-color 0.3s, color 0.3s; }
.lagen__nm { font-weight: 600; font-size: 14px; color: var(--mute); white-space: nowrap; }
.lagen__st.is-done .lagen__sq { background: var(--ink); color: var(--lime); }
.lagen__st.is-now .lagen__sq { background: var(--lime); }
.lagen__st.is-now .lagen__nm, .lagen__st.is-done .lagen__nm { color: var(--ink); }
.lagen__ln { flex: 1; min-width: 10px; height: 2px; margin: 0 9px; background: #d6d5cf; transition: background-color 0.3s; }
.lagen__ln.is-on { background: var(--ink); }
.lagen__vp { overflow: hidden; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.lagen__track { display: flex; transition: transform 0.6s var(--ease); }
.lagen[data-lvl="1"] .lagen__track { transform: translateX(-100%); }
.lagen[data-lvl="2"] .lagen__track { transform: translateX(-200%); }
.lagen[data-lvl="3"] .lagen__track { transform: translateX(-300%); }
.lagen__pn { flex: 0 0 100%; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 24px; }
.lagen__pn.is-off { visibility: hidden; transition: visibility 0s linear 0.6s; }
.lagen__pn:focus { outline: none; }
.lagen__pn:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.lagen__rows { display: flex; flex-direction: column; margin: -6px -8px 0; }
.lagen__row { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 8px; background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: var(--r); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.lagen__row:last-child { border-bottom: 0; }
.lagen__row:hover { background: #fff; }
.lagen__rt { display: flex; flex-direction: column; gap: 2px; }
.lagen__rt .mono, .lagen__ph > .mono { color: var(--mute); }
.lagen__rh { margin-top: 6px; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; text-wrap: balance; }
.lagen__rr { flex: none; display: flex; align-items: center; gap: 16px; color: var(--mute); }
.lagen__go { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--lime); }
.lagen__ph { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lagen__pills { display: flex; align-items: center; gap: 6px; }
.lagen__pills > .mono { margin-right: 4px; color: var(--mute); }
.lagen__pill { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(18, 18, 17, 0.3); border-radius: 50%; background: none; color: var(--ink); font: 600 12px/1 var(--mono); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.lagen__pill:hover { border-color: var(--ink); }
.lagen__pill[aria-pressed="true"] { background: var(--ink); color: var(--lime); border-color: var(--ink); }
.lagen__pt { font-size: 22px; }
.lagen__wn { flex: 1; display: grid; grid-template-columns: 1fr 28px 1fr; gap: 10px; align-items: stretch; }
.lagen__was, .lagen__nu { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); }
.lagen__was { border: 1px dashed rgba(18, 18, 17, 0.4); background: var(--paper); }
.lagen__nu { border: 1px solid var(--ink); background: #fff; box-shadow: 4px 4px 0 var(--lime); }
.lagen__was p, .lagen__nu p { font-size: 15px; line-height: 1.45; }
.lagen__was p { color: var(--mute); }
.lagen__arr { display: grid; place-items: center; color: var(--mute); }
.lagen__lab { align-self: flex-start; padding: 3px 7px; border-radius: var(--r); background: var(--paper-2); color: var(--mute); font-size: 11px; }
.lagen__lab--on { background: var(--lime); color: var(--ink); }
.lagen__zb { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--ink); color: var(--lime); font: 600 15px/1.2 var(--display); text-align: left; cursor: pointer; transition: background-color 0.2s; }
.lagen__zb:hover { background: #000; }
.lagen__grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lagen__ac { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--paper); font: inherit; color: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.lagen__ac:hover { border-color: var(--ink); background: #fff; }
.lagen__at { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; font-weight: 700; font-size: 15px; line-height: 1.25; letter-spacing: -0.01em; }
.lagen__at .mono { margin-right: 8px; color: var(--mute); font-weight: 500; }
.lagen__as { font-size: 13.5px; line-height: 1.4; color: var(--mute); }
.lagen__big { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 26px 28px; border-radius: var(--r); background: var(--ink); color: var(--paper); }
.lagen__bt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--mute-d); }
.lagen__bt .tag { margin-left: auto; }
.lagen__big h3 { font-size: 22px; }
.lagen__bp { margin-top: 12px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; font-weight: 600; letter-spacing: -0.015em; }
.lagen__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.lagen__back { padding: 0 0 1px; background: none; border: 0; border-bottom: 1.5px solid currentColor; color: var(--paper); font: 600 14px/1.3 var(--display); cursor: pointer; }
.lagen__arws { display: flex; gap: 8px; }
.lagen__arw { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(242, 241, 236, 0.3); border-radius: 50%; background: none; color: var(--paper); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.lagen__arw:hover { background: var(--paper); color: var(--ink); }
@container col (max-width: 700px) {
  .lagen__st:not(.is-now) .lagen__nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ── 05 De ronde: four buttons on a circle, the step as detail ── */
.ring__dial { position: relative; flex: none; width: min(330px, 100%); aspect-ratio: 330 / 290; } /* positions in % of 330 x 290 */
.ring__circ { position: absolute; left: 24.55%; top: 19.31%; width: 50.91%; height: 57.93%; border: 2px dashed var(--ink); border-radius: 50%; }
.ring__chev { position: absolute; width: 10px; height: 10px; border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); }
.ring__chev--0 { left: 66.36%; top: 25.86%; transform: rotate(90deg); }
.ring__chev--1 { left: 66.36%; top: 66.9%; transform: rotate(180deg); }
.ring__chev--2 { left: 30.3%; top: 66.9%; transform: rotate(270deg); }
.ring__chev--3 { left: 30.3%; top: 25.86%; }
.ring__pill { position: absolute; width: 35.15%; height: 40px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 0; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font: 700 14px/1 var(--display); cursor: pointer; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.ring__pill .mono { color: var(--mute); }
.ring__pill:hover { background: #fff; box-shadow: 3px 3px 0 var(--ink); }
.ring__pill[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: none; }
.ring__pill[aria-pressed="true"] .mono { color: var(--lime); }
.ring__pill--0 { left: 32.42%; top: 11.03%; }
.ring__pill--1 { left: 57.88%; top: 41.38%; }
.ring__pill--2 { left: 32.42%; top: 71.72%; }
.ring__pill--3 { left: 6.97%; top: 41.38%; }
.round__of { display: none; }
.ring.is-live { display: flex; flex-direction: column; align-items: center; gap: 24px; }
.ring.is-live .ring__det { align-self: stretch; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 20px 22px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--white); box-shadow: 5px 5px 0 rgba(18, 18, 17, 0.9); }
.ring.is-live .rounds__list { flex: 1; display: grid; border: 0; }
.ring.is-live .round { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 10px; padding: 0; border: 0; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.ring.is-live .round.is-on { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
.ring.is-live .round__n { display: none; }
.ring.is-live .round__of { display: inline; }
.ring.is-live .round__num { padding-top: 0; }
.ring.is-live .round__body { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.ring.is-live .round h3 { font-size: 22px; }
.ring.is-live .round__body > p { margin-top: 0; font-size: 15.5px; line-height: 1.45; }
.ring.is-live .round__vis { margin-top: auto; max-width: none; gap: 6px; padding: 12px; }
.ring.is-live .note-s { padding: 7px 10px; font-size: 13.5px; }
.ring.is-live .bubble { padding: 8px 12px; font-size: 13.5px; }
.ring.is-live .win__body { grid-template-columns: 44px 1fr; grid-template-rows: 14px 8px 8px 20px; gap: 8px 12px; padding: 12px; }
.ring.is-live .meter__bar { height: 24px; }
.ring__next { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 0 0 1px; background: none; border: 0; border-bottom: 1.5px solid currentColor; color: var(--ink); font: 600 14px/1.3 var(--display); cursor: pointer; }
.ring__next svg { transition: transform 0.25s var(--ease); }
.ring__next:hover svg { transform: translateX(3px); }
@container col (min-width: 760px) {
  .ring.is-live { flex-direction: row; align-items: stretch; }
  .ring.is-live .ring__det { flex: 1; }
}

/* ── 06 Hoe lang blijf je: the bar chart is the choice ──── */
.kies { display: grid; gap: 22px; }
.kies__ui { display: grid; gap: 22px; }
.kies__ask { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.kies__ask h3 { font-size: clamp(20px, 1.6vw, 24px); }
.kies__ask .mono { color: var(--mute); }
.kies__chart { display: flex; }
.kies__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 6px 0; background: none; border: 0; border-radius: var(--r); font: inherit; color: inherit; cursor: pointer; }
.kies__pl { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--mute); transition: color 0.25s; }
.kies__stack { width: 100%; height: 150px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.kies__sv { display: block; width: 56px; max-width: 80%; border: 1px dashed var(--mute); border-bottom: 0; border-radius: 3px 3px 0 0; }
.kies__bar { display: block; width: 56px; max-width: 80%; background: #e1e0d9; border: 1px solid var(--line); border-radius: 3px 3px 0 0; transition: background-color 0.25s; }
.kies__col--0 .kies__sv { height: 0; border: 0; } .kies__col--0 .kies__bar { height: 150px; }
.kies__col--1 .kies__sv { height: 25px; } .kies__col--1 .kies__bar { height: 125px; }
.kies__col--2 .kies__sv { height: 38px; } .kies__col--2 .kies__bar { height: 112px; }
.kies__col--3 .kies__sv { height: 50px; } .kies__col--3 .kies__bar { height: 100px; }
.kies__col--4 .kies__sv { height: 63px; } .kies__col--4 .kies__bar { height: 87px; }
.kies__ax { position: relative; width: 100%; height: 18px; }
.kies__ax::before { content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 2px; background: var(--ink); }
.kies__ax i { position: absolute; left: 50%; top: 1px; width: 16px; height: 16px; margin-left: -8px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); transition: background-color 0.25s; }
.kies__lb { text-align: center; color: var(--mute); }
.kies__col:hover .kies__bar { background: #cfcec6; }
.kies__col[aria-pressed="true"] .kies__bar { background: var(--lime); border-color: var(--ink); }
.kies__col[aria-pressed="true"] .kies__pl { color: var(--ink); }
.kies__col[aria-pressed="true"] .kies__ax i { background: var(--lime); box-shadow: 0 0 0 3px var(--ink); }
.kies__col[aria-pressed="true"] .kies__lb { color: var(--ink); font-weight: 600; }
.kies__res { display: grid; grid-template-columns: 1fr; gap: 18px; padding: 24px; border-radius: var(--r); background: var(--ink); color: var(--paper); }
.kies__res h3 { font-size: 22px; }
.kies__un { margin-top: 6px; font-size: 14px; color: var(--mute-d); }
.kies__big { font-size: 40px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--lime); }
.kies__specs { display: flex; flex-direction: column; gap: 8px; }
.kies__specs div { display: flex; justify-content: space-between; gap: 12px; padding-top: 8px; border-top: 1px solid var(--line-d); }
.kies__specs dt { color: var(--mute-d); }
.kies__specs dd { font-weight: 700; font-size: 15px; text-align: right; white-space: nowrap; }
.kies__more { justify-self: start; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; background: none; color: var(--ink); font: 600 15px/1 var(--display); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.kies__more:hover { background: var(--ink); color: var(--lime); }
.kies__more svg { transition: transform 0.3s var(--ease); }
.kies__more[aria-expanded="true"] svg { transform: rotate(90deg); }
.tier__body { display: grid; gap: 18px; }
.tier__act { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.tier__guar { font-weight: 600; font-size: 15px; }
.tier__note { font-size: 15px; color: var(--mute); }
.tier--partnership .tier__note { color: var(--mute-d); }
/* live: the matching card is the explanation under "Wat is dit precies?" */
.kies.is-live .tier { grid-template-columns: 1fr; gap: 18px 24px; padding: 24px; background: var(--white); color: var(--ink); border-color: var(--ink); box-shadow: 6px 6px 0 rgba(18, 18, 17, 0.9); }
.kies.is-live .tier.is-off, .kies.is-live .tier__top { display: none; }
.kies.is-live .tier__quote { font-size: 22px; line-height: 1.28; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.kies.is-live .tier__body { gap: 12px; }
.kies.is-live .tier__what { font-size: 15.5px; color: var(--ink); }
.kies.is-live .tier__spec { display: block; padding: 0; border: 0; }
.kies.is-live .tier__spec > div:not(.tier__ex) { display: none; }
.kies.is-live .tier__ex { padding-left: 14px; border-left: 3px solid var(--lime); }
.kies.is-live .tier__ex dt { color: var(--mute); margin-bottom: 2px; }
.kies.is-live .tier__ex dd { font-size: 15px; font-weight: 450; }
.kies.is-live .tier__note { font-size: 14px; color: var(--mute); }
.kies.is-live .tier__act { padding-top: 16px; border-top: 1px solid var(--line); }
.kies.is-live .tier--partnership :focus-visible { outline-color: var(--ink); }
.kies__foot { max-width: 56ch; font-size: 16px; color: var(--mute); }
.ch > .kies__foot { margin-top: 28px; }
@container col (min-width: 720px) {
  .kies__res { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.6fr); gap: 20px; }
  .kies.is-live .tier { grid-template-columns: 1fr 1fr; }
  .kies.is-live .tier__act { grid-column: 1 / -1; }
}

/* ── 07 Pakketten: plan, what is always included, what 299 saves ── */
.care__plans { display: grid; grid-template-columns: 1fr; gap: 12px; }
.care__plan { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); font: inherit; text-align: left; transition: background-color 0.3s, color 0.3s, box-shadow 0.3s, border-color 0.3s; }
button.care__plan { cursor: pointer; }
button.care__plan:hover { border-color: var(--ink); }
.care__name { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.care__price { display: flex; align-items: baseline; gap: 6px; }
.care__price b { font-size: 28px; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.care__price span { font-size: 13px; color: var(--mute); }
.care__fit { display: block; font-size: 14px; line-height: 1.35; color: var(--mute); }
.care__cells { display: grid; grid-template-columns: repeat(20, minmax(0, 1fr)); gap: 2px; width: 100%; max-width: 178px; margin-top: 2px; }
.care__cells i { aspect-ratio: 1; border-radius: 1px; background: #d6d5cf; }
.care__cells i.l { background: var(--lime); box-shadow: inset 0 0 0 1px var(--ink); }
.care__plan[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 6px 6px 0 var(--lime); }
.care__plan[aria-pressed="true"] .care__price span, .care__plan[aria-pressed="true"] .care__fit { color: var(--mute-d); }
.care__plan[aria-pressed="true"] .care__cells i { background: #3a3a37; }
.care__plan[aria-pressed="true"] .care__cells i.l { background: var(--lime); box-shadow: none; }
.ch > .care__terms { margin-top: 16px; }
.ch > .care__inc, .ch > .care__value { margin-top: 40px; }
.care__terms { color: var(--mute); }
.care__sh { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.care__sh h3 { font-size: clamp(20px, 1.6vw, 24px); }
.care__arrows { display: flex; gap: 8px; }
.care__arr { width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(18, 18, 17, 0.3); border-radius: 50%; background: var(--white); color: var(--ink); cursor: pointer; transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.care__arr:hover:not([disabled]) { background: var(--ink); color: var(--lime); }
.care__arr[disabled] { opacity: 0.35; cursor: default; }
.care__incl { display: grid; grid-template-columns: 1fr; gap: 14px 28px; margin-top: 18px; }
.care__incl li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 17px; line-height: 1.45; color: var(--mute); }
.care__incl li b { color: var(--ink); font-weight: 700; }
.care__incl svg { margin-top: 3px; color: var(--ink); background: var(--lime); border-radius: 3px; padding: 2px; }
.care__inc.is-live .care__incl { display: none; }
.care__track { display: flex; gap: 10px; margin: 12px calc(-1 * var(--pad)) 0 -6px; padding: 6px var(--pad) 10px 6px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 6px; overscroll-behavior-x: contain; scrollbar-width: none; }
.care__track::-webkit-scrollbar { display: none; }
.care__tc { flex: 0 0 200px; min-height: 132px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); color: var(--ink); font: inherit; text-align: left; scroll-snap-align: start; cursor: pointer; transition: background-color 0.25s, color 0.25s, border-color 0.25s; }
.care__tc:hover { border-color: var(--ink); }
.care__tn { color: var(--mute); }
.care__tt { font-size: 16px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.care__ts { font-size: 13.5px; line-height: 1.35; color: var(--mute); }
.care__tc[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.care__tc[aria-pressed="true"] .care__tn { color: var(--lime); }
.care__tc[aria-pressed="true"] .care__ts { color: var(--mute-d); }
.care__dt { min-height: 56px; margin-top: 8px; padding: 2px 0 2px 18px; border-left: 3px solid var(--lime); max-width: 60ch; font-size: 16px; line-height: 1.5; color: var(--mute); }
.care__dt b { display: block; margin-bottom: 2px; color: var(--ink); }
.care__value { border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
.care__vh { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 16px 20px 4px; font-size: 16px; letter-spacing: -0.01em; }
.care__vk { margin-left: auto; color: var(--mute); font-weight: 500; }
.care__value.is-live .care__vh { display: block; padding: 0; }
.care__vbtn { width: 100%; min-height: 56px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; padding: 10px 20px; background: none; border: 0; border-radius: var(--r); color: var(--ink); font: 700 16px/1.3 var(--display); letter-spacing: -0.01em; text-align: left; cursor: pointer; }
.care__vbtn:hover { background: #fff; }
.care__vbtn:focus-visible { outline-offset: -3px; }
.care__pl { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; transition: transform 0.3s var(--ease), background-color 0.3s, color 0.3s; }
.care__vbtn[aria-expanded="true"] .care__pl { transform: rotate(45deg); background: var(--ink); color: var(--lime); }
.care__vb { display: grid; gap: 14px; padding: 4px 20px 20px; }
.care__vi { max-width: 60ch; font-size: 15px; color: var(--mute); }
.care__bars { display: grid; grid-template-columns: 1fr; gap: 20px; }
.care__k { margin-bottom: 6px; color: var(--mute); }
.care__stack li { display: grid; grid-template-columns: 1fr 70px 52px; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.25; }
.care__stack .care__lbl { grid-column: 1; grid-row: 1; }
.care__stack .care__blk { grid-column: 2; grid-row: 1; }
.care__stack em { grid-column: 3; grid-row: 1; text-align: right; font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.care__blk { display: flex; flex-wrap: wrap; gap: 2px; }
.care__stack i { width: 10px; height: 10px; border-radius: 1px; background: #c9c8c0; }
.care__me12 { display: flex; flex-wrap: wrap; gap: 3px; width: 150px; padding: 10px 0; }
.care__me12 i { width: 16px; height: 16px; border-radius: 2px; background: var(--lime); box-shadow: inset 0 0 0 1px var(--ink); }
.care__sum { margin-top: 8px; font-size: 14px; line-height: 1.4; color: var(--mute); }
.care__sum b { font-size: 17px; color: var(--ink); }
.care__anchor { padding: 12px 14px; border-radius: var(--r); background: var(--ink); color: var(--paper); font-size: 15px; line-height: 1.45; }
.care__anchor b { color: var(--lime); white-space: nowrap; }
.care__foot { color: var(--mute); }
@container col (min-width: 640px) {
  .care__plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .care__incl { grid-template-columns: 1fr 1fr; }
  .care__bars { grid-template-columns: 1.15fr 1fr; }
}

/* ── 08 Waarom Ailard · over Allard: pick a reason ────── */
.ch__head .why__bio { color: var(--ink); font-size: clamp(18px, 1.35vw, 20px); line-height: 1.5; }
.ch__head > .facts { margin-top: 16px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px; }
.facts li { padding: 7px 10px; border: 1px solid var(--line); border-radius: var(--r); color: var(--ink); }
.whys { max-width: 46rem; border-top: 1px solid var(--line); }
.whys li { display: grid; gap: 8px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.whys h3 { font-size: clamp(21px, 1.7vw, 25px); letter-spacing: -0.02em; line-height: 1.15; }
.whys p:not(.mono) { color: var(--mute); font-size: 16px; }
.whys__n { display: none; }
.whys p.whys__q { margin-top: 4px; padding: 12px 14px; border-left: 3px solid var(--lime); border-radius: 0 var(--r) var(--r) 0; background: var(--white); color: var(--ink); font-weight: 600; line-height: 1.45; }
.whys__q .mono { display: block; margin-bottom: 4px; color: var(--mute); font-weight: 500; }
.redenen.is-live { display: grid; grid-template-columns: 1fr; overflow: hidden; border: 1px solid var(--ink); border-radius: var(--r); background: var(--white); box-shadow: 6px 6px 0 rgba(18, 18, 17, 0.9); }
.redenen__list { display: flex; flex-direction: column; background: var(--paper); border-bottom: 1px solid var(--line); }
.redenen__it { display: grid; grid-template-columns: 28px 1fr; gap: 8px; min-height: 54px; padding: 14px 16px; background: none; border: 0; border-bottom: 1px solid rgba(18, 18, 17, 0.1); color: var(--ink); font: 700 15px/1.25 var(--display); letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.redenen__it:last-child { border-bottom: 0; }
.redenen__it .mono { padding-top: 2px; color: var(--mute); }
.redenen__it:hover { background: var(--paper-2); }
.redenen__it:focus-visible { outline-offset: -4px; }
.redenen__it[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.redenen__it[aria-pressed="true"] .mono { color: var(--lime); }
.redenen__it[aria-pressed="true"]:focus-visible { outline-color: var(--lime); }
.redenen.is-live .whys { display: grid; max-width: none; min-height: 300px; padding: 24px 26px; border: 0; }
.redenen.is-live .whys li { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 14px; padding: 0; border: 0; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--ease), visibility 0s linear 0.3s; }
.redenen.is-live .whys li.is-on { visibility: visible; opacity: 1; transition: opacity 0.3s var(--ease); }
.redenen.is-live .redenen__pn { flex: 1; display: flex; flex-direction: column; gap: 14px; }
.redenen.is-live .whys__n { display: block; color: var(--mute); }
.redenen.is-live .whys h3 { font-size: 24px; }
.redenen.is-live .whys p:not(.mono) { font-size: 16.5px; line-height: 1.5; }
.redenen.is-live .whys__q { margin-top: auto; background: var(--paper); font-size: 16px; }
.nots { display: grid; gap: 10px; }
.nots > .mono { color: var(--mute); }
.nots ul { display: grid; grid-template-columns: 1fr; gap: 10px; }
.nots li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); font-size: 15px; line-height: 1.4; }
.nots li svg { margin-top: 4px; color: var(--mute); }
@container col (min-width: 640px) {
  .redenen.is-live { grid-template-columns: 238px 1fr; }
  .redenen__list { border-bottom: 0; border-right: 1px solid var(--line); }
  .redenen__it { min-height: 62px; }
  .nots ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 10 Starten: only the question and the button */
.close .close__actions { padding-top: 14px; }

@media (prefers-reduced-motion: reduce) {
  .zin.is-live .zin__item, .ring.is-live .round, .redenen.is-live .whys li, .lagen__track, .lagen__pn.is-off,
  .zin__dot, .zin__nav, .lagen__sq, .lagen__ln, .lagen__pill, .lagen__ac, .ring__pill, .ring__next svg,
  .kies__pl, .kies__bar, .kies__ax i, .kies__more, .kies__more svg, .care__plan, .care__arr, .care__tc, .care__pl, .redenen__it { transition: none !important; }
  .care__track { scroll-behavior: auto; }
}

/* ══ Phone (max 900 px, no stage): mobile boards M2C, M4B, M5B, M6B, M7A, M89A ══
   Side padding 24 px, H2 29 px, running text 16 px, buttons at least 44 px, CTAs full width (52 px).
   Swipe: touch-action pan-y on the sliding parts, app.js reads horizontal swipes; the rows in 07 scroll natively. */
.zin__mid, .lagen__lvl, .lagen__bk, .lagen__rm, .lagen__sub, .lagen__chev, .care__pd, .redenen__ah { display: none; }
.zin__view, .lagen__vp { touch-action: pan-y; }

@media (max-width: 900px) {
  :root { --pad: 24px; }
  body { font-size: 16px; }
  .ch h2 { font-size: 29px; line-height: 1.1; }
  .ch__head .lede { font-size: 18px; }
  .ch .btn { width: 100%; min-height: 52px; padding: 10px 20px; white-space: normal; text-align: center; line-height: 1.2; }

  /* 02: prev / seven segments with "Situatie 3 van 7" / next */
  .zin { gap: 16px; padding: 22px 20px 20px; }
  .zin__top { font-size: 14px; line-height: 1.4; }
  .zin__sent { font-size: 24px; }
  .zin.is-live .zin__sent { margin-bottom: 18px; }
  .zin__cost { flex-direction: column; align-items: flex-start; gap: 4px; }
  .zin__step { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; }
  .zin__dots { display: none; }
  .zin__navs { display: contents; }
  .zin__nav { width: 48px; height: 48px; border-color: rgba(242, 241, 236, 0.35); }
  .zin__nav[data-zin-prev] { grid-column: 1; grid-row: 1; }
  .zin__nav[data-zin-next] { grid-column: 3; grid-row: 1; }
  .zin__mid { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
  .zin__segs { display: flex; gap: 4px; width: 100%; }
  .zin__segs i { flex: 1; height: 5px; border-radius: 2px; background: rgba(242, 241, 236, 0.22); transition: background-color 0.3s; }
  .zin__segs i.is-on { background: var(--lime); }
  .zin__cnt { color: var(--mute-d); }
  .zin__act { flex-direction: column; align-items: stretch; gap: 14px; }
  .zin__act .link { align-self: center; font-size: 15px; }

  /* 04: four squares plus "Niveau 2 van 4 · Was en nu", one panel at a time, sliding in from the right */
  .lagen { gap: 0; }
  .lagen__st { width: 44px; height: 44px; justify-content: center; padding: 0; opacity: 1; }
  .lagen__st[disabled] { opacity: 1; }
  .lagen__sq { width: 32px; height: 32px; }
  .lagen__nm { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .lagen__ln { margin: 0; }
  .lagen__lvl { display: block; margin: 6px 0 20px; color: var(--mute); }
  .lagen__lvl b { color: var(--ink); font-weight: 600; }
  .lagen__vp { overflow: visible; border: 0; background: none; }
  .lagen__track { display: block; transform: none !important; transition: none; }
  .lagen__pn { padding: 18px 16px 20px; border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
  .lagen__pn.is-off { display: none; }
  .lagen__pn:not(.is-off) { animation: lagen-in 0.4s var(--ease); }
  .lagen__rows { margin: -6px -4px; }
  .lagen__row { min-height: 88px; gap: 12px; padding: 16px 4px; }
  .lagen__rh { margin: 4px 0 6px; font-size: 18px; }
  .lagen__rm { display: block; color: var(--mute); }
  .lagen__rr .mono { display: none; }
  .lagen__ph { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 8px; margin: -8px 0 0 -6px; }
  .lagen__bk { grid-column: 1; grid-row: 1; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--ink); font: 600 14.5px/1.2 var(--display); cursor: pointer; }
  .lagen__pills { grid-column: 2; grid-row: 1; }
  .lagen__pills > .mono { display: none; }
  .lagen__pill { width: 40px; height: 40px; }
  .lagen__sec { grid-column: 1 / -1; grid-row: 2; margin-left: 6px; }
  .lagen__sub { display: inline; }
  .lagen__pt { font-size: 20px; }
  .lagen__wn { grid-template-columns: 1fr; }
  .lagen__was, .lagen__nu { padding: 14px; gap: 8px; }
  .lagen__was p, .lagen__nu p { font-size: 14.5px; }
  .lagen__arr svg { transform: rotate(90deg); }
  .lagen__zb { align-self: stretch; justify-content: center; min-height: 52px; padding: 10px 18px; text-align: center; }
  .lagen__grid { grid-template-columns: 1fr; gap: 0; }
  .lagen__ac { display: grid; grid-template-columns: 1fr 18px; align-items: center; gap: 8px; min-height: 52px; padding: 0 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
  .lagen__ac:hover { background: #fff; }
  .lagen__as { display: none; }
  .lagen__at { align-items: center; font-weight: 650; }
  .lagen__at .tag { font-size: 10.5px; padding: 4px 6px 3px; }
  .lagen__chev { display: block; color: var(--mute); }
  .lagen__big { gap: 12px; padding: 20px 18px; }
  .lagen__bt .tag { margin-left: 0; }
  .lagen__big h3 { font-size: 19px; }
  .lagen__bp { font-size: 20px; line-height: 1.35; }
  .lagen__back { min-height: 44px; }

  /* 05: the circle stays (it scales below 330 px), detail below, full-width next step */
  .ring__pill { height: 44px; }
  .ring__pill--0 { top: calc(11.03% - 2px); }
  .ring__pill--2 { top: calc(71.72% - 2px); }
  .ring__pill--1, .ring__pill--3 { top: calc(41.38% - 2px); }
  .ring.is-live .ring__det { padding: 20px 18px; }
  .ring__next { align-self: stretch; justify-content: center; min-height: 48px; padding: 0 20px; border: 1px solid var(--ink); border-radius: 999px; font-size: 15px; }
  .ring__next:hover { background: var(--ink); color: var(--lime); }
  .rounds > .note { font-size: 14.5px; }

  /* 06: five horizontal rows (label | bar | price), the dashed part is what you save */
  .kies__ask { flex-direction: column; gap: 4px; }
  .kies__ask h3 { font-size: 19px; }
  .kies__chart { flex-direction: column; gap: 8px; }
  .kies__col { display: grid; grid-template-columns: 78px minmax(0, 1fr) 58px; align-items: center; gap: 10px; min-height: 58px; padding: 8px 12px; border: 1px solid var(--line); background: var(--white); transition: background-color 0.25s, border-color 0.25s, box-shadow 0.25s; }
  .kies__lb { grid-column: 1; grid-row: 1; text-align: left; line-height: 1.3; }
  .kies__stack { grid-column: 2; grid-row: 1; height: 24px; flex-direction: row-reverse; justify-content: flex-end; align-items: stretch; }
  .kies__pl { grid-column: 3; grid-row: 1; text-align: right; font-size: 15px; color: var(--ink); }
  .kies__ax { display: none; }
  .kies__bar, .kies__col .kies__bar { max-width: none; height: auto; border-right: 0; border-radius: 3px 0 0 3px; }
  .kies__sv, .kies__col .kies__sv { max-width: none; height: auto; border: 1px dashed var(--mute); border-left: 0; border-radius: 0 3px 3px 0; }
  .kies__col--0 .kies__bar { width: 100%; } .kies__col--0 .kies__sv { width: 0; border: 0; }
  .kies__col--1 .kies__bar { width: 83.33%; } .kies__col--1 .kies__sv { width: 16.67%; }
  .kies__col--2 .kies__bar { width: 75%; } .kies__col--2 .kies__sv { width: 25%; }
  .kies__col--3 .kies__bar { width: 66.67%; } .kies__col--3 .kies__sv { width: 33.33%; }
  .kies__col--4 .kies__bar { width: 58.33%; } .kies__col--4 .kies__sv { width: 41.67%; }
  .kies__col[aria-pressed="true"] { background: #fff; border-color: var(--ink); box-shadow: 4px 4px 0 var(--ink); }
  .kies__res { gap: 14px; padding: 22px 20px; }
  .kies__res h3 { font-size: 21px; }
  .kies__big { font-size: 42px; letter-spacing: -0.045em; }
  .kies__more { justify-self: stretch; justify-content: center; min-height: 52px; }
  .kies.is-live .tier { gap: 14px; padding: 20px 18px; box-shadow: 5px 5px 0 rgba(18, 18, 17, 0.9); }
  .kies.is-live .tier__quote { font-size: 20px; }
  .tier__act { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .kies__foot { font-size: 15px; }

  /* 07: three plan buttons in a row, the chosen plan in one card; included cards of 220 px that run to the screen edge */
  [data-care-plans][role="group"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  button.care__plan { min-height: 64px; gap: 2px; padding: 10px 12px; }
  button.care__plan .care__fit, button.care__plan .care__cells, button.care__plan .care__price span { display: none; }
  button.care__plan .care__name { font: 500 12px/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--mute); }
  button.care__plan[aria-pressed="true"] .care__name { color: var(--mute-d); }
  button.care__plan .care__price b { font-size: 19px; }
  button.care__plan[aria-pressed="true"] { box-shadow: 4px 4px 0 var(--lime); }
  .care__pd { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; padding: 18px; border: 1px solid var(--ink); border-radius: var(--r); background: var(--white); }
  .care__pd .care__price b { font-size: 30px; letter-spacing: -0.04em; }
  .care__pd .care__price span { font-size: 14px; }
  .care__pd .care__fit { font-size: 15px; line-height: 1.45; color: var(--ink); }
  .care__cells--pd { grid-template-columns: repeat(20, 10px); max-width: none; }
  .care__cap { color: var(--mute); }
  .care__sh h3 { font-size: 19px; }
  .care__tc { flex-basis: 220px; min-height: 136px; }
  .care__dt { min-height: 96px; font-size: 15.5px; }
  .care__vk { display: none; }
  .care__vh { padding: 14px 16px 4px; }
  .care__vbtn { min-height: 64px; flex-wrap: nowrap; justify-content: space-between; padding: 10px 16px; font-size: 15.5px; }
  .care__vb { padding: 4px 16px 18px; }

  /* 08: an accordion, one reason open at a time */
  .ch__head .why__bio { font-size: 15.5px; }
  .redenen.is-live { display: block; box-shadow: 5px 5px 0 rgba(18, 18, 17, 0.9); }
  .redenen__list { display: none; }
  .redenen.is-live .whys { display: block; min-height: 0; padding: 0; }
  .redenen.is-live .whys li { display: block; visibility: visible; opacity: 1; transition: none; }
  .redenen.is-live .whys li + li { border-top: 1px solid var(--line); }
  .redenen__ah { width: 100%; min-height: 60px; display: grid; grid-template-columns: 28px 1fr 28px; align-items: center; gap: 8px; padding: 10px 14px; background: none; border: 0; color: var(--ink); font: 700 15.5px/1.25 var(--display); letter-spacing: -0.01em; text-align: left; cursor: pointer; transition: background-color 0.2s, color 0.2s; }
  .redenen__ah .mono { color: var(--mute); font-weight: 500; }
  .redenen__pl { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; transition: transform 0.3s var(--ease); }
  .redenen__ah[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
  .redenen__ah[aria-expanded="true"] .mono { color: var(--lime); }
  .redenen__ah[aria-expanded="true"] .redenen__pl { transform: rotate(45deg); }
  .redenen__ah:focus-visible { outline-offset: -4px; }
  .redenen__ah[aria-expanded="true"]:focus-visible { outline-color: var(--lime); }
  .redenen.is-live .redenen__pn { display: none; padding: 16px 16px 20px; }
  .redenen.is-live .whys li.is-open .redenen__pn { display: flex; }
  .redenen.is-live .redenen__pn .whys__n, .redenen.is-live .redenen__pn h3 { display: none; }
  .redenen.is-live .redenen__pn p:not(.mono) { font-size: 15.5px; }
  .redenen.is-live .whys__q { margin-top: 0; }
  .nots li { font-size: 14.5px; }
}
@keyframes lagen-in { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .lagen__pn:not(.is-off) { animation: none !important; }
  .zin__segs i, .kies__col, .redenen__ah, .redenen__pl { transition: none !important; }
}

/* Reduced motion: no transitions or animations anywhere, colour fades included */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* ══ Switch: <body data-stage="off"> turns the stage (journey) off ══════════════════════════
   The page becomes one full-width site: a nav bar over the full width and the chapters in one
   centred column of 662 px content (the width the sections were designed on). The stage code,
   canvas and css stay in place; journey.js then draws nothing and only marks chapters and the
   dark nav at the end. Back to the stage = remove the attribute. Phone (max 900 px) is unchanged. */
body[data-stage="off"] .stage { display: none; }
body[data-stage="off"] .split { grid-template-columns: 1fr; }
@media (min-width: 901px) {
  body[data-stage="off"] .nav {
    grid-template-columns: auto 1fr; background: rgba(242, 241, 236, 0.92); border-bottom: 1px solid var(--line);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease);
  }
  body[data-stage="off"] .nav__brand { color: var(--ink); padding-right: 0; }
  body[data-stage="off"] .nav__brand svg { color: var(--ink); }
  body[data-stage="off"] .nav__right { background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body[data-stage="off"] .nav__links { display: flex; margin-right: 0; } /* without the stage there is room for the links down to 901 px */
  body[data-stage="off"] .nav.is-dark { background: rgba(18, 18, 17, 0.94); border-color: var(--line-d); }
  body[data-stage="off"] .nav.is-dark .nav__right { background: none; }
  body[data-stage="off"] .nav.is-dark .nav__brand { color: var(--paper); }
  body[data-stage="off"] .nav.is-dark .nav__brand svg { color: var(--lime); }
  body[data-stage="off"] .ch { padding-left: max(var(--pad), calc((100% - 662px) / 2)); padding-right: max(var(--pad), calc((100% - 662px) / 2)); }
  body[data-stage="off"] .care__track { margin-right: 0; padding-right: 6px; }
}