/* furnipilot.com, version 9 (25-10-2026): the shared design system (design/ONTWERP-V9.md §1).
   Loaded after site.css (and the help centre's docs.css) on every page. It holds:
   0. what v8.css still did (the light tokens of site.css, a few rules); v8.css itself is gone;
   1. the tokens (colour, type, rhythm, radius, elevation, motion) and the base type: Albert Sans, weight 400 for all large
      type, one h2 size on the whole site;
   2. the wrap, the kicker, buttons and links;
   3. the header (.k9), the footer (.voet9), the close (.slot9);
   4. the old shared parts of site.css (sections, page heads, plans, comparison, questions, help centre, legal pages)
      brought onto the same tokens, so every page is one system;
   5. the chat button;
   6. the two devices (gsm, laptop) and the app drawn live inside them (native px, scaled with --k by js/v9.js).
   Section styles of the home page (hero, story, hub, gsm and computer) live next to their part, after this file.
   Rules for the parts that follow: transform and opacity only for motion; hover only on (hover: hover) and
   (pointer: fine); headings inside <main> get weight 400 from ".v8 main h1, .v8 main h2" below. */

@font-face {
  font-family: "Albert Sans";
  src: url("/fonts/albert-sans-italic-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Caveat: the handwriting on the paper documents (IBM Plex Mono, the numbers on them, keeps its @font-face in site.css).
   A browser only fetches them on a page that draws a document. The file is a subset (about 8 KB instead of 51 KB): the
   characters the documents write by hand plus every digit and lower-case letter, with kerning only. tools/regels.mjs
   (HAND) fails when a handwritten text uses another character; to add one, subset the full Caveat 500 again with
   pyftsubset --text="<HAND>" --layout-features=kern --flavor=woff2 and widen the unicode-range here. */
@font-face {
  font-family: "Caveat";
  src: url("/fonts/caveat-500-hand.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020, U+0022, U+002B-003A, U+0044, U+004C, U+0056, U+0061-007A;
}

/* ================================================================== 0. what v8.css still did (v8.css is gone, 26-10-2026)
   The tokens of site.css on the light surfaces, and the few v8 rules the pages still use. Here before the v9 tokens, so
   the v9 values win where both name a token, as they did when v8.css loaded before this file. */
:root {
  /* the shared tokens of site.css, light */
  --nacht: #FFFFFF;
  --band: #F5F7FB;
  --vlak-2: #F1F4F9;
  --glas: rgba(15, 27, 51, 0.04);
  --glas-2: rgba(15, 27, 51, 0.07);
  --haar: rgba(15, 27, 51, 0.09);
  --haar-2: rgba(15, 27, 51, 0.16);
  --kop-tekst: #0F1B33;
  --tekst: #3B4457;
  --zacht: #5B6474;
  --blauw: #2856BE;
  --blauw-vol: #3E6FD8;
  --blauw-zacht: rgba(62, 111, 216, 0.1);
  --oranje: #B45309;
  --groen: #177A45;
  --rood: #B42318;
  --knop: #3E6FD8;
  --knop-tekst: #FFFFFF;
  --knop-hover: #2F5FC9;
  --kaart: 0 0 0 1px rgba(15, 27, 51, 0.08), 0 1px 2px rgba(15, 27, 51, 0.05), 0 16px 32px -20px rgba(15, 27, 51, 0.28);
  --zweef: 0 0 0 1px rgba(15, 27, 51, 0.08), 0 2px 4px rgba(15, 27, 51, 0.05), 0 40px 80px -36px rgba(15, 27, 51, 0.45);
  --korrel: none;
  /* of version 8: orange (darker, for contrast), the old shadows, the faces of the documents */
  --tint-3: #DCE6FA;
  --o: #9A4D09;
  --o-tint: #FDF0E2;
  --sch-1: 0 0 0 1px rgba(15, 27, 51, 0.07), 0 1px 2px rgba(15, 27, 51, 0.05);
  --sch-2: 0 0 0 1px rgba(15, 27, 51, 0.07), 0 18px 40px -24px rgba(15, 27, 51, 0.35);
  --sch-3: 0 0 0 1px rgba(15, 27, 51, 0.06), 0 50px 90px -46px rgba(23, 48, 111, 0.5);
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --hand: "Caveat", "Bradley Hand", "Segoe Print", cursive;
}
.v8 h1, .v8 h2, .v8 h3 { color: var(--ink); text-wrap: balance; }
.pl-voordeel { background: var(--g-tint); color: var(--g); }
.codebalk-sluit:hover { background: rgba(15, 27, 51, 0.08); color: var(--ink); }
.pk-code b { color: var(--ink); }
body.v8 .dn a.is-actief, body.v8 .dn-start.is-actief { background: var(--tint-2); color: var(--b-ink); }
/* buttons inside an old light section use the blue */
.licht { --knop: #3E6FD8; --knop-tekst: #FFFFFF; --knop-hover: #2F5FC9; }
@media (prefers-reduced-motion: reduce) {
  .v8 *, .v8 *::before, .v8 *::after { animation: none !important; transition: none !important; }
}

/* ================================================================== 1. tokens */
:root {
  /* ink and text */
  --ink: #0F1B33;
  --t: #3B4457;
  --s: #5B6474;
  --s2: #8A93A6;
  /* surfaces: white canvas, one cool surface, hairlines instead of tinted gradients */
  --wit: #FFFFFF;
  --vlak: #F6F8FC;
  --tint: #F4F7FD;
  --tint-2: #EAF0FC;
  --lijn: #E4E9F2;
  --lijn-2: #D3DBE8;
  /* the blue of the app: actions and Furnipilot itself */
  --b: #3E6FD8;
  --b-ink: #2856BE;
  --b-hover: #3363CC;
  --b-diep: #17306F;
  --b-zacht: #DCE6FA;
  /* meaning only, the chip colours of the app (orange keeps the darker value of v8 for contrast) */
  --r: #C81E1E; --r-tint: #FDECEC;
  --g: #177A45; --g-tint: #E6F5EC;
  --p: #6D3FC0; --p-tint: #F1ECFC;
  --papier: #FCFBF8;
  /* three elevations, tinted to the ink, always with an offset; no glow */
  --e1: 0 0 0 1px rgba(15, 27, 51, 0.07), 0 1px 2px rgba(15, 27, 51, 0.05);
  --e2: 0 0 0 1px rgba(15, 27, 51, 0.07), 0 2px 4px rgba(15, 27, 51, 0.04), 0 16px 32px -18px rgba(15, 27, 51, 0.28);
  --e3: 0 0 0 1px rgba(15, 27, 51, 0.06), 0 4px 10px rgba(15, 27, 51, 0.04), 0 40px 80px -34px rgba(23, 48, 111, 0.42);
  --knop-schaduw: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(23, 48, 111, 0.3), 0 8px 18px -10px rgba(62, 111, 216, 0.75);
  /* radius: 8 controls inside cards, 12 buttons and tabs, 18 cards, 28 stages; pills only for chips */
  --r1: 8px; --r2: 12px; --r3: 18px; --r4: 28px;
  /* type */
  --font: "Albert Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-held: clamp(2.75rem, 1.2rem + 4.2vw, 4.5rem);
  --t-h1: clamp(2.5rem, 1.7rem + 2.4vw, 3.5rem);
  --t-h2: clamp(2rem, 1.3rem + 2.4vw, 3.25rem);
  --t-h3: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
  --t-rij: clamp(1.625rem, 1.2rem + 1.1vw, 2.125rem);
  --t-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --t-body: 1.0625rem;
  --t-klein: 0.875rem;
  /* rhythm: 4px base; sections breathe, groups stay tight */
  --sectie: clamp(88px, 6vw + 48px, 152px);
  --goot: clamp(16px, 4vw, 40px);
  --gutter: var(--goot);
  --kop: 64px;
  --uit: cubic-bezier(0.23, 1, 0.32, 1);
  --zacht-uit: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

html { background: var(--wit); scroll-padding-top: calc(var(--kop) + 16px); }
body { font-family: var(--font); font-size: var(--t-body); line-height: 1.6; color: var(--t); background: var(--wit); }
::selection { background: var(--b-zacht); color: var(--ink); }
:focus-visible { outline: 2px solid var(--b); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { color: var(--ink); font-weight: 400; text-wrap: balance; }
h1 { font-size: var(--t-h1); line-height: 1.04; letter-spacing: -0.035em; }
h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.032em; }
h3 { font-size: var(--t-h3); line-height: 1.25; letter-spacing: -0.015em; font-weight: 500; }
p { text-wrap: pretty; }
b, strong { font-weight: 500; }
/* v8 set every heading in <main> to 600; v9 sets them to 400, h3 to 500 */
.v8 main h1 { font-weight: 400; letter-spacing: -0.035em; }
.v8 main h2 { font-weight: 400; letter-spacing: -0.032em; }
.v8 main h3 { font-weight: 500; }
em.v9-nadruk { font-style: italic; color: var(--b); letter-spacing: -0.02em; }

/* ================================================================== 2. wrap, kicker, buttons, links */
/* one width on every page: 1280 with the gutter inside, so the header, the sections and the footer share one edge */
.wrap, .v9-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--goot); }
.v9-kicker, .label { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border-radius: 0; background: none; font-size: var(--t-klein); font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--b-ink); }
.v9-kicker svg { width: 16px; height: 16px; }

.v9-knop, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; height: auto; padding: 0 22px;
  border: 0; border-radius: var(--r2); font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: -0.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.16s var(--uit), box-shadow 0.16s var(--uit), color 0.16s var(--uit), transform 0.16s var(--uit);
}
.knop { height: 48px; }
.v9-knop svg { width: 18px; height: 18px; transition: transform 0.18s var(--uit); }
.v9-knop:active, .knop:active { transform: translateY(1px); }
.v9-knop--vol, .knop { background: var(--b); color: #FFFFFF; box-shadow: var(--knop-schaduw); }
.v9-knop--rand, .knop--rand { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lijn-2), 0 1px 2px rgba(15, 27, 51, 0.04); }
.v9-knop--klein, .knop--klein { min-height: 40px; height: 40px; padding: 0 16px; font-size: 0.9375rem; border-radius: 10px; }
.knop--groot { height: 48px; padding: 0 22px; font-size: 1rem; }
.knop:hover { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .v9-knop--vol:hover, .knop:hover { background: var(--b-hover); color: #FFFFFF; }
  .v9-knop--vol:hover svg { transform: translateX(3px); }
  .v9-knop--rand:hover, .knop--rand:hover { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px #B9C5D8, 0 1px 2px rgba(15, 27, 51, 0.04); }
}
@media (hover: none) { .knop:hover { background: var(--b); } .knop--rand:hover { background: #FFFFFF; color: var(--ink); } }

.v9-link { display: inline-flex; align-items: center; gap: 6px; color: var(--b-ink); font-weight: 500; text-decoration: none; }
.v9-link svg { width: 16px; height: 16px; transition: transform 0.18s var(--uit); }
@media (hover: hover) and (pointer: fine) {
  .v9-link:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
  .v9-link:hover svg { transform: translateX(3px); }
}
a { text-underline-offset: 3px; }

/* ================================================================== 3a. header */
/* opaque white: a see-through header turned grey-blue over the dark close (and blurred text under it everywhere else) */
.k9 { position: sticky; top: 0; z-index: 50; background: #FFFFFF; border-bottom: 1px solid var(--lijn); }
.k9-in { display: flex; align-items: center; gap: 28px; height: 64px; }
.k9-logo { flex: none; display: flex; border-radius: 6px; }
.k9-logo img { display: block; width: 124px; height: auto; }
.k9-nav { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; }
.k9-nav > ul { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.k9-nav > ul > li { position: relative; }
.k9-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); font: inherit; font-size: 0.9688rem; font-weight: 500; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 0.16s var(--uit), color 0.16s var(--uit); }
.k9-link[aria-expanded="true"] { background: var(--tint); }
.k9-link[aria-current="page"] { color: var(--b-ink); }
.k9-link svg { width: 14px; height: 14px; color: var(--s); transition: transform 0.2s var(--uit); }
.k9-link[aria-expanded="true"] svg { transform: rotate(180deg); }
.k9-rechts { display: flex; align-items: center; gap: 6px; margin-left: auto; flex: none; }
.k9-menu, .k9-nav-mobiel { display: none; }
@media (hover: hover) and (pointer: fine) { .k9-link:hover { background: var(--tint); color: var(--ink); } }

/* the Functies panel: one card under the header line, two columns */
.k9-paneel { position: absolute; top: calc(100% + 12px); left: -14px; width: min(720px, calc(100vw - 48px)); padding: 10px; border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e3); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px; animation: k9-paneel 0.18s var(--uit); }
.k9-paneel[hidden] { display: none; }
@keyframes k9-paneel { from { opacity: 0; transform: translateY(-4px); } }
.k9-paneel > a { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 2px 12px; align-items: start; align-content: start; padding: 10px 12px; border-radius: var(--r2); color: var(--t); text-decoration: none; transition: background-color 0.16s var(--uit); }
.k9-paneel b { padding-top: 1px; color: var(--ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.3; }
.k9-paneel small { grid-column: 2; color: var(--s); font-size: 0.8125rem; line-height: 1.4; }
.k9-paneel > a[aria-current="page"] b { color: var(--b-ink); }
.k9-ico { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--tint-2); color: var(--b-ink); }
.k9-ico svg { width: 18px; height: 18px; }
.k9-paneel-voet { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 12px 12px 4px; border-top: 1px solid var(--lijn); font-size: 0.875rem; color: var(--s); }
.k9-paneel-voet .v9-link { white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .k9-paneel > a:hover { background: var(--vlak); } .k9-paneel > a:hover b { color: var(--b-ink); } }

/* the code of a letter or a referrer, under the header line */
.k9 .codebalk { background: var(--tint-2); box-shadow: inset 0 1px 0 var(--lijn); }
.k9 .codebalk p, .k9 .codebalk-sluit { color: var(--ink); }
.k9 .codebalk-code { background: #FFFFFF; color: var(--ink); box-shadow: inset 0 0 0 1px var(--lijn-2); }
/* on a phone the bar does not stick: it hangs under the header line, in a space the header keeps free below itself
   (--code-h, measured by js/site.js), and goes once the page scrolls, so the header plus what sticks under it (the plan
   names of /plannen) keep the screen free; nothing moves when it goes. Back at the top, it is there again. */
@media (max-width: 559.98px) {
  .k9 .codebalk { position: absolute; left: 0; right: 0; top: 100%; transition: opacity 0.2s var(--uit), visibility 0s linear 0s; }
  .k9:has(.codebalk:not([hidden])) { margin-bottom: var(--code-h, 58px); }
  .k9.is-gescrold .codebalk, .k9.is-open .codebalk { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s var(--uit), visibility 0s linear 0.2s; }
}

/* phone and tablet: the button and a Menu control; the menu opens over the page, under the header */
@media (max-width: 960px) {
  .k9-in { gap: 10px; }
  .k9-logo img { width: 112px; }
  .k9-inlog { display: none; }
  .k9-menu { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--tint); color: var(--ink); font: inherit; font-size: 0.9375rem; font-weight: 500; cursor: pointer; }
  .k9-menu i { position: relative; width: 16px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .k9.is-open .k9-menu i { background: transparent; box-shadow: none; }
  .k9.is-open .k9-menu i::before, .k9.is-open .k9-menu i::after { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 2px; border-radius: 2px; background: currentColor; transform: rotate(45deg); }
  .k9.is-open .k9-menu i::after { transform: rotate(-45deg); }
  .k9-nav { position: fixed; top: 65px; left: 0; right: 0; height: calc(100vh - 65px); height: calc(100dvh - 65px); display: none; flex-direction: column; align-items: stretch; padding: 8px var(--goot) 32px; background: #FFFFFF; overflow-y: auto; overscroll-behavior: contain; }
  .k9.is-open .k9-nav { display: flex; }
  .k9-nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .k9-nav > ul > li { border-bottom: 1px solid var(--lijn); }
  .k9-link { width: 100%; height: 56px; padding: 0 2px; border-radius: 0; font-size: 1.125rem; justify-content: space-between; }
  .k9-link[aria-expanded="true"] { background: none; }
  .k9-paneel { position: static; width: auto; padding: 0 0 12px; border-radius: 0; box-shadow: none; grid-template-columns: minmax(0, 1fr); animation: none; }
  .k9-paneel > a { padding: 10px 2px; }
  /* on a phone the panel keeps only its way to the overview of all functions */
  .k9-paneel-voet { margin-top: 0; padding: 6px 2px 4px; border-top: 0; }
  .k9-paneel-voet > span { display: none; }
  .k9-nav-mobiel { display: grid; gap: 10px; margin-top: 24px; }
  .k9-nav-mobiel .v9-knop { width: 100%; }
}
/* without JavaScript the Menu control is a link to the links of the footer (Kop.astro); the button needs the script */
.k9-menu--voet { text-decoration: none; }
html.js .k9-menu--voet, html:not(.js) [data-menu-knop] { display: none; }
@media (max-width: 420px) {
  .k9-in { gap: 8px; }
  .k9-logo img { width: 104px; }
  .k9-rechts .v9-knop { padding: 0 12px; font-size: 0.875rem; }
  .k9-menu { padding: 0 11px; }
  .k9-menu-tekst { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ================================================================== 3b. footer: light, a hairline on top */
.voet9 { padding-block: clamp(56px, 6vw, 80px) 28px; background: var(--vlak); border-top: 1px solid var(--lijn); color: var(--t); font-size: 0.9375rem; line-height: 1.5; }
.voet9-in { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.55fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.voet9-merk { display: grid; gap: 16px; align-content: start; justify-items: start; }
.voet9-merk img { display: block; width: 124px; height: auto; }
.voet9-merk p { max-width: 30ch; color: var(--s); }
.voet9 h2 { margin: 0 0 14px; color: var(--ink); font-size: 0.9375rem; font-weight: 500; line-height: 1.4; letter-spacing: 0; }
.voet9 ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.voet9 nav a, .voet9-chat { padding: 0; border: 0; background: none; color: var(--t); font: inherit; text-decoration: none; text-align: left; cursor: pointer; transition: color 0.16s var(--uit); }
.voet9 nav a[aria-current="page"] { color: var(--b-ink); }
@media (hover: hover) and (pointer: fine) { .voet9 nav a:hover, .voet9-chat:hover { color: var(--b-ink); text-decoration: underline; text-decoration-thickness: 1px; } }
.voet9-onder { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 32px; margin-top: clamp(40px, 5vw, 56px); padding-top: 20px; border-top: 1px solid var(--lijn); color: var(--s); font-size: 0.875rem; }
.voet9-onder p { margin: 0; }
@media (max-width: 1080px) {
  .voet9-in { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); }
  .voet9-merk { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .voet9-in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
  .voet9-functies { grid-column: 1 / -1; }
  .voet9-functies ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; }
}
@media (max-width: 480px) { .voet9-functies ul { grid-template-columns: minmax(0, 1fr); } }

/* ================================================================== 3c. the close: the one dark moment of a page */
.slot9 { position: relative; padding-block: clamp(80px, 8vw, 128px); background: var(--b-diep); color: #DCE4F5; text-align: center; box-shadow: none; overflow: visible; }
.slot9 h2 { max-width: 18ch; margin: 0 auto; color: #FFFFFF; font-size: var(--t-h2); font-weight: 400; line-height: 1.06; letter-spacing: -0.032em; }
.slot9 p { max-width: 50ch; margin: 18px auto 0; color: #DCE4F5; font-size: var(--t-lead); line-height: 1.6; }
.slot9-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
/* on a phone the two buttons stack with one width */
@media (max-width: 480px) { .slot9-knoppen .v9-knop { flex: 1 1 100%; max-width: 320px; } }
.slot9 .v9-knop--rand { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); }
@media (hover: hover) and (pointer: fine) {
  .slot9 .v9-knop--rand:hover { background: rgba(255, 255, 255, 0.06); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
}
.slot9 .v9-knop--vol { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 20px -10px rgba(0, 0, 0, 0.5); }

/* ================================================================== 4. sections, also the old shared parts */
.s9 { padding-block: var(--sectie); }
.s9--vlak { background: var(--vlak); border-block: 1px solid var(--lijn); }
.s9-kop { display: grid; gap: 18px; max-width: 760px; margin-bottom: clamp(36px, 4vw, 56px); }
.s9-kop p:not(.v9-kicker) { font-size: var(--t-lead); max-width: 58ch; }
.s9-kop--midden { margin-inline: auto; text-align: center; justify-items: center; }

/* v7 sections (plans, data, questions, help centre, legal pages) */
.sectie--band { background: var(--vlak); box-shadow: 0 -1px 0 var(--lijn), 0 1px 0 var(--lijn); }
.licht { background: transparent; --band: var(--vlak); --vlak: #F6F8FC; }
.sectie-kop { gap: 18px; margin-bottom: clamp(36px, 4vw, 56px); }
.sectie-kop > p { color: var(--t); font-size: var(--t-lead); line-height: 1.6; }
.sectie-kop--rij > p { color: var(--s); }
.sectie-kop--rij > div { gap: 18px; }
.lead { font-size: var(--t-lead); line-height: 1.6; color: var(--t); }
.pagina-kop { padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 56px); }
.pagina-kop .wrap { gap: 18px; }
.pagina-kop h1 { max-width: 18ch; font-size: var(--t-h1); }
.pagina-kop .lead { max-width: 60ch; color: var(--s); }
.kruimel { font-size: var(--t-klein); color: var(--s); }
.kruimel li + li::before { color: var(--lijn-2); }
.kruimel a { color: var(--s); }
.kruimel a:hover { color: var(--b-ink); }
/* one h2 size: the section titles of v7 and v8 take the v9 size */
.sectie-kop h2, .vr-kop h2, .regels-wrap h2, .hulp-docs h2 { font-size: var(--t-h2); line-height: 1.06; letter-spacing: -0.032em; }

/* plans */
.plan { border-radius: var(--r3); padding: 28px 26px 30px; background: #FFFFFF; box-shadow: var(--e2); transition: none; }
.plan--toonzaal { box-shadow: inset 0 0 0 1.5px var(--b), var(--e2); }
.plan--toonzaal::before { content: none; }
.plan:hover { transform: none; }
.plan-naam { font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.plan-voorwie, .pp-onder { color: var(--s); }
.plan-prijs { border-top-color: var(--lijn); }
.plan-grootte li { padding: 4px 10px; background: var(--vlak); color: var(--ink); font-size: 0.8125rem; font-weight: 500; }
.plan-lijst { border-top-color: var(--lijn); }
.pl-schakel { padding: 3px; border-radius: var(--r2); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.pl-knop { height: 38px; border-radius: 9px; color: var(--s); font-weight: 500; }
.pl-knop:hover { color: var(--ink); }
.pl-knop[aria-pressed="true"], .pl-knop[aria-pressed="true"]:hover { background: #FFFFFF; color: var(--ink); box-shadow: var(--e1); }
.pl-knop[aria-pressed="true"] .pl-voordeel { background: var(--g-tint); color: var(--g); }
.regels { border-top-color: var(--lijn); }
.regels dt { color: var(--b-ink); }
.regels dd a { color: var(--s); }
.regels dd a:hover { color: var(--b-ink); }

/* the comparison */
.vt-wrap { border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e2); }
.vt th, .vt td { border-top-color: var(--lijn); }
.vt .vt-groep th { background: var(--vlak); color: var(--s); }
.vt tbody th a:hover { color: var(--b-ink); }
.vt .ic { color: var(--b-ink); }
.vt .ic[data-uit] { color: var(--lijn-2); }

/* questions: hairlines and a plus that turns into a minus */
.vr-lijst, .vr-item { border-color: var(--lijn); }
.vr-item summary { font-size: 1.0625rem; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.vr-item summary:hover { color: var(--b-ink); }
.vr-plus { width: 20px; height: 20px; border-radius: 0; box-shadow: none; }
.vr-plus::before, .vr-plus::after { width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--b-ink); }
.vr-item[open] .vr-plus { background: none; }
.vr-a { color: var(--t); }

/* where the data is, contact, status, the letter page */
.hulp-weg, .sts { border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e2); }
.hulp-ic { border-radius: var(--r2); background: var(--tint-2); color: var(--b-ink); }
.v8 main .hulp-weg h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.pk-code { background: var(--tint-2); box-shadow: inset 0 0 0 1px var(--lijn-2); }
.pk-rij input { border-color: var(--lijn-2); background: #FFFFFF; color: var(--ink); }

/* the help centre */
.docs-zoek input { height: 48px; border-radius: var(--r2); border-color: var(--lijn-2); background-color: #FFFFFF; color: var(--ink); }
.v8 main .di-groep h2 { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0; color: var(--b-ink); }
.di-groep ul, .di-groep a { border-color: var(--lijn); }
.di-groep a:hover b { color: var(--b-ink); }
.dp h1 { font-size: var(--t-h1); }
.v8 main .db h2 { font-size: 1.375rem; font-weight: 500; letter-spacing: -0.015em; }
.db .sig { height: 24px; padding: 0 10px; border-radius: 99px; box-shadow: none; }
.db .sig--r { background: var(--r-tint); } .db .sig--o { background: var(--o-tint); } .db .sig--p { background: var(--p-tint); }
.db-beeld img { border-radius: var(--r3); box-shadow: var(--e3); }
.db-def, .db-def > div, .dp-hulp { border-color: var(--lijn); }
.dn a:hover { background: var(--vlak); color: var(--ink); }
.dp-ook a { background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--lijn-2); color: var(--ink); }
.dp-ook a:hover { background: var(--vlak); }
.dp-nav a { box-shadow: inset 0 0 0 1px var(--lijn); }
.dp-nav a:hover { background: var(--vlak); }

/* legal pages */
.jur-tabel { box-shadow: inset 0 0 0 1px var(--lijn); }
.jur-tabel th, .jur-tabel td { border-top-color: var(--lijn); }
.jur-tabel thead th { background: var(--vlak); }

/* ================================================================== 4b. shared lists of v9 (start page, /functies, function pages)
   The index of the functions (§3.7): hairlines, an icon, the title, the short line, an arrow on hover. The questions: one
   column, hairlines, a plus that turns into a minus. The plan badge of the hub (.kp9) outside the hub. */
.index9 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(32px, 5vw, 72px); border-top: 1px solid var(--lijn-2); }
.index9 li { border-bottom: 1px solid var(--lijn); }
.index9 a { display: grid; grid-template-columns: 22px minmax(0, 1fr) 20px; gap: 4px 16px; align-items: start; align-content: start; height: 100%; padding: 17px 2px; color: inherit; text-decoration: none; }
.index9-ico { grid-row: 1 / span 2; display: block; width: 22px; height: 22px; margin-top: 1px; color: var(--b-ink); }
.index9-ico svg { display: block; width: 22px; height: 22px; }
.index9 b { color: var(--ink); font-weight: 500; line-height: 1.4; }
.index9-kort { grid-column: 2; font-size: 0.9375rem; line-height: 1.5; color: var(--s); }
.index9-pijl { grid-column: 3; grid-row: 1; display: block; width: 18px; height: 18px; margin-top: 2px; color: var(--s2); transition: transform 0.18s var(--uit), color 0.18s var(--uit); }
.index9-pijl svg { display: block; width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
  .index9 a:hover b { color: var(--b-ink); }
  .index9 a:hover .index9-pijl { transform: translateX(3px); color: var(--b-ink); }
}
.faq9 { max-width: 760px; border-top: 1px solid var(--lijn-2); }
.faq9 details { border-bottom: 1px solid var(--lijn); }
.faq9 summary { display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center; padding: 17px 2px; list-style: none; cursor: pointer; color: var(--ink); font-size: 1.0625rem; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; }
.faq9 summary::-webkit-details-marker { display: none; }
.faq9 summary i { position: relative; width: 20px; height: 20px; }
.faq9 summary i::before, .faq9 summary i::after { content: ""; position: absolute; left: 3px; right: 3px; top: 9px; height: 2px; border-radius: 2px; background: var(--b-ink); transition: transform 0.22s var(--uit); }
.faq9 summary i::after { transform: rotate(90deg); }
.faq9 details[open] summary i::after { transform: rotate(0deg); }
.faq9 details > p { max-width: 64ch; padding: 0 2px 22px; color: var(--t); }
.faq9 details > p a { color: var(--b-ink); font-weight: 500; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .faq9 summary:hover { color: var(--b-ink); } }
.kp9 { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 0.8125rem; font-weight: 500; line-height: 1; white-space: nowrap; text-decoration: none; background: var(--vlak); color: var(--s); box-shadow: inset 0 0 0 1px var(--lijn); }
.kp9--toonzaal { background: var(--tint-2); color: var(--b-ink); box-shadow: none; }
.kp9--keten { background: var(--ink); color: #FFFFFF; box-shadow: none; }
@media (max-width: 760px) {
  .index9 { grid-template-columns: minmax(0, 1fr); }
  .index9 a { padding: 16px 0; }
  .faq9 summary { padding: 18px 0; font-size: 1rem; }
}

/* ================================================================== 5. the chat button
   Small, bottom right, never on text at rest (js/v9.js decides when it shows):
   - from 1520px with a mouse: a 40px pill with its word, at the screen corner, where it fits in the margin beside the text;
   - from 1100px with a mouse, while the margin beside the text is at least 60px: the 44px circle, just outside the text;
   - everywhere else (touch, under 1100px, and widths like 1280 where the margin is narrower): only after a scroll up, and
     gone again after 3 seconds still;
   - always gone while the app of the story, the dark close, the docs next/previous cards or the footer are in view, and
     wherever text, an image, a control or a card lies under its box (js/v9.js tests that), so a question's plus, a line
     of text or a card never sits under it and the lists keep their full width.
   Only sent while the chat is on (CHAT_AAN in src/data/app.mjs).
   Hidden means also visibility:hidden, so it leaves the tab order (the footer keeps its own Chat link). A
   sticky action bar at the bottom of a phone screen marks itself with [data-plak-cta]; the button then sits above it. */
.chat-knop { right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--plak-hoogte, 0px)); width: 44px; height: 44px; padding: 0; justify-content: center; gap: 8px; border-radius: 99px; background: #FFFFFF; color: var(--b-ink); font-size: 0.9375rem; font-weight: 500; box-shadow: var(--e3); visibility: visible; transition: opacity 0.2s var(--uit), transform 0.24s var(--uit), visibility 0s linear 0s; }
.chat-knop svg { width: 20px; height: 20px; flex: none; }
.chat-knop span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.chat-knop:hover { transform: none; }
.chat-knop.is-weg, .chat-knop.is-wacht, .chat-knop[aria-expanded="true"], body:has(.k9.is-open) .chat-knop { opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden; transition: opacity 0.2s var(--uit), transform 0.24s var(--uit), visibility 0s linear 0.2s; }
body:has([data-plak-cta]:not([hidden])) .chat-knop { --plak-hoogte: 76px; }
@media (min-width: 1100px) and (hover: hover) and (pointer: fine) {
  .chat-knop { right: max(12px, calc((100vw - 1280px) / 2 - 56px)); }
}
@media (min-width: 1520px) and (hover: hover) and (pointer: fine) {
  .chat-knop { right: max(16px, env(safe-area-inset-right)); width: auto; height: 40px; padding: 0 16px 0 13px; }
  .chat-knop span { position: static; width: auto; height: auto; overflow: visible; clip: auto; color: var(--ink); }
  .chat-knop:hover { box-shadow: 0 0 0 1px rgba(15, 27, 51, 0.1), 0 4px 10px rgba(15, 27, 51, 0.06), 0 40px 80px -34px rgba(23, 48, 111, 0.5); }
}
/* the button needs js/site.js and js/v9.js; without them it would only cover the page */
html:not(.js) .chat-knop { display: none; }
/* the main button stays white on blue, also after a tap on a touch screen (where :hover sticks) */
.v9-knop--vol, .v9-knop--vol:hover, .v9-knop--vol:active, .v9-knop--vol:focus-visible { color: #FFFFFF; }

/* ================================================================== 6. the devices and the app drawn inside them
   The app inside is drawn at its own native size (gsm 390 x 844, laptop 1024 x 640) and scaled to the frame with --k
   (js/v9.js), the way a screenshot would be. */
.gsm9 { position: relative; border-radius: calc(var(--gsm-rand, 8px) * 5.2); padding: var(--gsm-rand, 8px); background: #0B1220; box-shadow: 0 0 0 1px rgba(15, 27, 51, 0.12), inset 0 0 0 1.5px #2A3346, 0 30px 60px -28px rgba(15, 27, 51, 0.6), 0 8px 16px -8px rgba(15, 27, 51, 0.3); }
.gsm9-scherm { position: relative; width: 100%; aspect-ratio: 390 / 844; overflow: hidden; border-radius: calc(var(--gsm-rand, 8px) * 4.3); background: var(--vlak); }
.gsm9-in { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(var(--k, 0.5)); transform-origin: 0 0; }
.gsm9-eiland { position: absolute; z-index: 9; top: calc(var(--gsm-rand, 8px) + 1.4%); left: 50%; width: 30%; height: 3.6%; margin-left: -15%; border-radius: 99px; background: #0B1220; }
.pc9 { position: relative; }
.pc9-scherm { position: relative; padding: 1.6%; border-radius: 14px; background: #0B1220; box-shadow: 0 0 0 1px rgba(15, 27, 51, 0.12), inset 0 0 0 1.5px #2A3346, 0 50px 90px -46px rgba(15, 27, 51, 0.55); }
.pc9-beeld { position: relative; width: 100%; aspect-ratio: 1024 / 640; overflow: hidden; border-radius: 4px; background: var(--vlak); }
.pc9-in { position: absolute; left: 0; top: 0; width: 1024px; height: 640px; transform: scale(var(--k, 0.5)); transform-origin: 0 0; }
.pc9-voet { position: relative; height: 0; padding-bottom: 2.6%; margin: 0 -6.5%; border-radius: 0 0 12px 12px / 0 0 100% 100%; background: linear-gradient(180deg, #E3E8F0 0%, #C3CCDA 60%, #A9B4C6 100%); box-shadow: 0 14px 24px -14px rgba(15, 27, 51, 0.45); }
.pc9-voet::before { content: ""; position: absolute; left: 50%; top: 0; width: 14%; height: 40%; margin-left: -7%; border-radius: 0 0 8px 8px; background: #AEB8C9; }

/* app parts (native px, drawn as in the app) */
.app { font-family: var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px; border-radius: 99px; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.chip--gekocht { background: #E6EEFC; color: var(--b-ink); }
.chip--bevestigd { background: var(--p-tint); color: var(--p); }
.chip--ontvangen { background: #E3F1F8; color: #0E6A8C; }
.chip--afgerond { background: var(--g-tint); color: var(--g); }
.chip--o { background: var(--o-tint); color: var(--o); }
.chip--r { background: var(--r-tint); color: var(--r); }
.chip--p { background: var(--p-tint); color: var(--p); }
/* a signal: a dot and a word, as in the app's lists (the pill of site.css stays for the help centre, see .db .sig) */
.sig { display: inline-flex; align-items: center; gap: 5px; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.2; white-space: nowrap; }
.sig::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sig--r { color: var(--r); } .sig--o { color: var(--o); } .sig--p { color: var(--p); }
.sig--r::before, .sig--o::before, .sig--p::before { background: currentColor; }
.sig.chip { height: 24px; padding: 0 10px; border-radius: 99px; }
.sig.chip::before { width: 6px; height: 6px; }
.sig--r.chip { background: var(--r-tint); } .sig--o.chip { background: var(--o-tint); } .sig--p.chip { background: var(--p-tint); }
.lev { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; background: #1B1F27; color: #FFFFFF; font-size: 10px; font-weight: 700; }
.lev--fable { background: #F3E3D3; color: #8A5A2B; } .lev--nord { background: #1E5C73; } .lev--kast { background: #111; } .lev--linnen { background: #E9EDF3; color: #4A5468; }
/* thumbnails: --x, --y name the top-left of a 145 px square in the real screenshot pc-kaarten-1440; the squares are cut
   into one small sprite of 5 x 2 tiles (img/app/duimen.jpg, 22 KB, made by tools/maak-duimen.mjs), column (x - 167) / 262.5,
   row (y - 142) / 305 */
.duim { flex: none; width: var(--d, 40px); height: var(--d, 40px); border-radius: 9px; background: #D9DFEA url("/img/app/duimen.jpg") no-repeat; background-size: calc(var(--d, 40px) * 5) calc(var(--d, 40px) * 2); background-position: calc(var(--d, 40px) * -1 * (var(--x) - 167) / 262.5) calc(var(--d, 40px) * -1 * (var(--y) - 142) / 305); }
.duim--lisa { background: #D9DFEA url("/img/app/lisa-hoeksalon.jpg") center / cover no-repeat; }
/* the reading chip: "Leest" while the AI reads, "Gelezen" when done (not the marked rows of the v8 paper, which use .lees too) */
.lees:not(.papier8 *) { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 99px; background: var(--tint-2); box-shadow: none; color: var(--b-ink); font-size: 0.8125rem; font-weight: 600; white-space: nowrap; }
.lees:not(.papier8 *)::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: v9-puls 0.9s ease-in-out infinite; }
.lees.klaar:not(.papier8 *) { background: var(--g-tint); color: var(--g); }
.lees.klaar:not(.papier8 *)::before { animation: none; }
@keyframes v9-puls { 50% { opacity: 0.25; } }
/* the card that floats next to the devices: the same card the app shows */
.zweef { border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e3); }

/* the app on the laptop (native 1024 x 640) */
.pa { display: grid; grid-template-columns: 64px 1fr; height: 640px; background: #F3F6FB; }
.pa-zij { display: grid; align-content: start; justify-items: center; gap: 14px; padding-top: 14px; background: #FFFFFF; border-right: 1px solid #E8ECF3; }
.pa-zij .logo { width: 32px; height: 32px; border-radius: 9px; background: var(--b); color: #FFFFFF; display: grid; place-items: center; font-weight: 700; font-size: 15px; margin-bottom: 8px; }
.pa-zij span { display: grid; justify-items: center; gap: 3px; width: 52px; padding: 7px 0; border-radius: 10px; font-size: 10px; color: #5B6474; }
.pa-zij span.aan { background: #EAF0FC; color: var(--b-ink); }
.pa-zij svg { width: 18px; height: 18px; }
.pa-hoofd { padding: 18px 22px; overflow: hidden; }
.pa-balk { display: flex; align-items: center; gap: 14px; }
.pa-balk h4 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.pa-tabs { display: flex; gap: 2px; padding: 3px; border-radius: 99px; background: #E9EDF4; font-size: 13px; }
.pa-tabs span { padding: 6px 12px; border-radius: 99px; color: #3B4457; font-weight: 500; }
.pa-tabs span.aan { background: #FFFFFF; color: var(--ink); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 27, 51, 0.08); }
.pa-tabs em { font-style: normal; display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; border-radius: 99px; background: var(--b); color: #FFF; font-size: 11px; font-weight: 700; }
.pa-nieuw { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border-radius: 99px; background: var(--b); color: #FFF; font-size: 13px; font-weight: 600; }
.pa-filters { display: flex; gap: 6px; margin: 14px 0 12px; }
.pa-filters span { padding: 5px 10px; border-radius: 99px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E8F0; font-size: 12px; color: #3B4457; font-weight: 500; }
.pa-tabel { border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px #E6EAF1; overflow: hidden; }
.pa-kol { display: grid; grid-template-columns: 2.3fr 1.05fr 1.15fr 0.9fr 0.6fr; align-items: center; gap: 10px; padding: 0 16px; }
.pa-kop { height: 34px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: #8A93A6; font-weight: 600; border-bottom: 1px solid #EEF1F6; }
.pa-rij { height: 58px; border-bottom: 1px solid #EEF1F6; font-size: 13px; color: #3B4457; background: #FFFFFF; transition: transform 0.6s var(--zacht-uit), background-color 1.6s; }
.pa-naam { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pa-naam b { display: block; font-size: 14px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.pa-naam small { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #5B6474; }
.pa-rij .duim { --d: 38px; }
.pa-lijst { position: relative; }
.pa-lijst[data-nieuw="nee"] .pa-rij:not(.pa-lisa) { transform: translateY(-58px); }
.pa-lisa { position: relative; z-index: 1; transition: opacity 0.5s var(--uit), background-color 2.4s; }
.pa-lijst[data-nieuw="nee"] .pa-lisa { opacity: 0; }
.pa-lisa.vers { background: #EAF0FC; }
.pa-lisa .nieuw { display: none; margin-left: 6px; padding: 1px 6px; border-radius: 5px; background: var(--b); color: #FFF; font-size: 10px; font-weight: 700; letter-spacing: 0.02em; }
.pa-lisa.vers .nieuw { display: inline-block; }
.pa-wissel { display: inline-grid; justify-items: start; align-items: center; }
.pa-wissel > * { grid-area: 1 / 1; transition: opacity 0.4s, transform 0.45s var(--zacht-uit); }
.pa-wissel > .uit { opacity: 0; transform: translateY(4px); }
/* the upload card on the laptop */
.pa-op { position: absolute; z-index: 3; right: 22px; top: 64px; width: 440px; border-radius: 14px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E8F0, 0 24px 48px -20px rgba(15, 27, 51, 0.4); padding: 14px 16px; opacity: 0; transform: translateY(-8px); transition: opacity 0.4s var(--uit), transform 0.5s var(--zacht-uit); }
.pa-op.aan { opacity: 1; transform: none; }
.pa-op b { display: block; font-size: 17px; color: var(--ink); margin-bottom: 10px; }
.pa-bestand { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 10px; background: #F3F6FB; font-size: 14px; color: var(--ink); }
.pa-bestand i { font-style: normal; padding: 3px 5px; border-radius: 4px; background: #D1453B; color: #FFF; font-size: 10px; font-weight: 700; }
.pa-bestand span { flex: 1; font-family: var(--mono); font-size: 14px; }
.pa-voortgang { height: 4px; margin-top: 10px; border-radius: 4px; background: #E9EDF4; overflow: hidden; }
.pa-voortgang i { display: block; height: 100%; width: 100%; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.pa-op.vol .pa-voortgang i { transform: scaleX(1); }
.pa-op small { display: block; margin-top: 10px; font-size: 15px; color: var(--s); }
.pa-op.klaar small { color: var(--g); font-weight: 600; }

/* the app on the gsm (native 390 x 844) */
.ga { position: absolute; inset: 0; transition: opacity 0.35s; }
.ga.uit { opacity: 0; pointer-events: none; }
.ga-status { display: flex; justify-content: space-between; padding: 16px 28px 0; font-size: 16px; font-weight: 600; color: var(--ink); }
.ga--camera { background: #000; }
.ga--camera .ga-status { color: #FFF; }
.ga-annuleer { padding: 22px 20px 0; color: #FFF; font-size: 18px; }
.ga-zoeker { position: absolute; left: 0; right: 0; top: 96px; height: 560px; background: #3B3027; display: grid; place-items: center; overflow: hidden; }
.ga-blad { position: relative; width: 300px; aspect-ratio: 1 / 1.4142; background: var(--papier); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); padding: 24px 22px; transform: rotate(-1.2deg); }
.ga-blad::after { content: ""; position: absolute; inset: -4px; border: 2px solid #5B9BF0; }
.ga-hoek { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #FFF; box-shadow: 0 0 0 2px #5B9BF0; z-index: 2; }
.ga-label { position: absolute; z-index: 3; top: 18px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; background: rgba(15, 22, 35, 0.9); color: #FFF; font-size: 16px; font-weight: 600; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15); }
.ga-scan { position: absolute; left: -4px; right: -4px; top: 0; height: 60px; background: linear-gradient(180deg, rgba(91, 155, 240, 0), rgba(91, 155, 240, 0.28) 85%, rgba(91, 155, 240, 0.7)); opacity: 0; }
.ga-zoeker.scant .ga-scan { animation: ga-scan 1.1s cubic-bezier(0.4, 0, 0.2, 1) both; }
@keyframes ga-scan { 0% { transform: translateY(-40px); opacity: 0; } 15% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(400px); opacity: 0; } }
.ga-flits { position: absolute; inset: 0; background: #FFF; opacity: 0; pointer-events: none; z-index: 8; }
.ga-flits.knip { animation: ga-knip 0.45s ease-out; }
@keyframes ga-knip { 12% { opacity: 0.85; } 100% { opacity: 0; } }
.ga-onder { position: absolute; left: 16px; right: 16px; bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ga-onder span { display: grid; place-items: center; height: 56px; border-radius: 18px; background: #232A36; color: #FFF; font-size: 18px; font-weight: 600; }
.ga-onder span.blauw { background: var(--b); }
/* paper content, shared with the story (an A4 order form of a fictional supplier, 1 : 1.414) */
.blad-merk { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 2px solid #1A1F29; }
.blad-merk b { font-size: 19px; letter-spacing: 0.32em; color: #1A1F29; font-weight: 700; }
.blad-merk span { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1A1F29; }
.blad-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 12px 0 14px; font-size: 9px; color: #55606F; }
.blad-meta span:nth-child(even) { font-family: var(--mono); color: #1A1F29; }
.blad-tabel { font-size: 8.5px; color: #1A1F29; }
.blad-tabel .k { display: grid; grid-template-columns: 22px 1fr 26px 52px; gap: 6px; padding: 4px 6px; background: #1A1F29; color: #FFF; font-weight: 700; }
.blad-tabel .r { display: grid; grid-template-columns: 22px 1fr 26px 52px; gap: 6px; padding: 7px 6px; border-bottom: 1px solid #E2DED5; }
.blad-tabel .r span:last-child, .blad-tabel .k span:last-child { text-align: right; font-family: var(--mono); }
.blad-hand { font-family: var(--hand); font-size: 17px; line-height: 0.8; color: #1F3A8A; }
/* the cell rules set the mono face on the last span; handwriting outranks them */
.blad-tabel .r span.blad-hand, .blad-meta span.blad-hand, .ga-blad span.blad-hand { font-family: var(--hand); font-size: 17px; font-weight: 500; line-height: 0.9; text-align: left; color: #1F3A8A; }
.blad-meta span.blad-nr { color: #B3261E; font-family: var(--mono); }
.blad-grijs { display: grid; gap: 6px; margin-top: 16px; }
.blad-grijs i { display: block; height: 5px; border-radius: 3px; background: #E7E3DA; }
.ga--fiche { background: #F3F6FB; }
.gf-terug { display: flex; justify-content: space-between; padding: 22px 18px 0; color: var(--b); font-size: 18px; }
.gf-kop { display: grid; grid-template-columns: 104px 1fr; gap: 14px; align-items: center; padding: 16px 18px 6px; }
.gf-kop .duim { --d: 104px; border-radius: 18px; }
.gf-kop h5 { margin: 0 0 8px; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.gf-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gf-chips .chip { height: 28px; font-size: 14px; padding: 0 12px; }
.gf-week { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.gf-week.laat { color: var(--r); }
.gf-lijn { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); margin: 14px 10px 4px; }
.gf-lijn::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 7px; border-top: 2px dashed #CBD3E1; }
.gf-lijn .vul { position: absolute; left: 12.5%; top: 6px; height: 3px; width: 25%; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); transition: transform 0.7s var(--zacht-uit); }
.gf-lijn div { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; font-size: 13px; color: #8A93A6; }
.gf-lijn i { width: 16px; height: 16px; border-radius: 50%; background: #FFF; box-shadow: inset 0 0 0 2px #CBD3E1; }
.gf-lijn .af i { background: var(--b); box-shadow: 0 0 0 4px #DCE6FA; }
.gf-lijn .af b { color: var(--ink); }
.gf-lijn b { font-weight: 600; font-size: 13px; }
.gf-blok { margin: 14px 16px 0; border-radius: 18px; background: #FFF; padding: 4px 16px; }
.gf-lev { display: flex; align-items: center; gap: 12px; padding: 12px 0; font-size: 17px; font-weight: 600; color: var(--ink); }
.gf-lev .lev { width: 38px; height: 38px; border-radius: 10px; font-size: 18px; }
.gf-lev span.k { margin-left: auto; display: inline-grid; place-items: center; height: 38px; padding: 0 16px; border-radius: 99px; background: #EAF0FC; color: var(--b-ink); font-size: 15px; }
.gf-docs h6 { display: flex; justify-content: space-between; margin: 18px 18px 8px; font-size: 19px; color: var(--ink); }
.gf-docs h6 em { font-style: normal; color: var(--o); }
.gf-doc { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid #EEF1F6; font-size: 16px; color: #8A93A6; }
.gf-doc:last-child { border-bottom: 0; }
.gf-doc i { width: 18px; height: 22px; border-radius: 3px; border: 1.5px dashed #BBC4D3; }
.gf-doc.er { color: var(--ink); font-weight: 600; }
.gf-doc.er i { border: 0; background: #2FA86A; }
.gf-balk { position: absolute; left: 0; right: 0; bottom: 0; height: 86px; background: #FFF; border-top: 1px solid #E8ECF3; display: flex; justify-content: space-around; padding-top: 10px; font-size: 11px; color: #5B6474; }
.gf-balk span { display: grid; justify-items: center; gap: 2px; }
.gf-balk span.aan { color: var(--b); }
.gf-balk svg { width: 22px; height: 22px; }

/* ================================================================== motion: reduced motion shows the clean end state */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}