/* furnipilot.com, version 9: one purchase, step by step (design/ONTWERP-V9.md §3.1 and §9 rows 1, 7, 8; prototype
   design/v9-proto/verhaal.html). Lisa hoeksalon of Zitwerk goes through five steps: the order form on the fair (gsm), the
   order confirmation (pdf on the computer), the delivery note (gsm), the invoice (pdf) and Te versturen.
   Left the scene: real A4 sheets (native 420 x 594, 1 : 1.414) on a desk, a gsm that photographs them, or a laptop with the
   pdf viewer. The scene is drawn on a desk of fixed size (625 x 480 on a computer and a tablet, 358 x 300 on a phone) that
   js/v9-verhaal.js scales to the frame with --sk, so nothing reflows, overlaps or is cut at any width. Right the purchase in
   Furnipilot at reading size. Loaded after css/v9.css (devices, chips, the app on the laptop).
   Every rule is scoped to .vh9, so it wins over the v8 heading rules and touches nothing else. Motion: transform and
   opacity only (colour changes are instant, with a small pop); the progress line stands still while the story is off
   screen ([data-rust]); reduced motion shows the end state of a step, without autoplay. */

/* ------------------------------------------------------------------ the band */
.vh9 { --h: clamp(380px, calc(100svh - var(--kop) - 300px), 480px); padding-block: clamp(48px, 5vw, 72px); background: var(--vlak); border-block: 1px solid var(--lijn); scroll-margin-top: -16px; }
/* (the page keeps a scroll padding of the header plus 16 px for headings; the band has its own padding, so "Zo werkt het"
   puts its top right under the header) */
.vh9-kop { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; }
.vh9-kop h2 { margin: 0; max-width: 22ch; }
.vh9-kop p { margin: 0; max-width: 44ch; color: var(--t); }

/* ------------------------------------------------------------------ the tabs: five steps, each names its way in */
.vh9-tabs { margin: 24px 0 14px; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.vh9-tabs li { min-width: 0; }
.vh9 .vh9-tab { position: relative; isolation: isolate; width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 10px; align-items: center; padding: 12px 14px 14px; border: 0; border-radius: var(--r2); background: transparent; color: var(--s); font: inherit; line-height: 1.3; text-align: left; cursor: pointer; }
/* the white card of the active tab fades in under it (opacity only) */
.vh9 .vh9-tab::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: #FFFFFF; box-shadow: var(--e2); opacity: 0; transition: opacity 0.22s var(--uit); }
.vh9 .vh9-tab svg { grid-row: span 2; width: 20px; height: 20px; color: var(--s2); }
.vh9 .vh9-tab small { font-size: 0.8125rem; color: var(--s); white-space: nowrap; }
/* a tab name never ends in "…": on a narrow computer it breaks (Order-bevestiging) instead of being cut */
.vh9 .vh9-tab b { font-size: 0.9688rem; font-weight: 500; color: var(--t); overflow-wrap: break-word; hyphens: auto; }
.vh9 .vh9-tab::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); }
.vh9 .vh9-tab.nu::before { opacity: 1; }
.vh9 .vh9-tab.nu b { color: var(--ink); }
.vh9 .vh9-tab.nu svg { color: var(--b-ink); }
.vh9 .vh9-tab.nu.loopt::after { animation: vh9-vul var(--duur, 8s) linear forwards; }
.vh9 .vh9-tab.af svg { color: var(--b); }
.vh9 .vh9-tab:focus-visible { outline: 2px solid var(--b); outline-offset: 2px; border-radius: var(--r2); }
.vh9[data-rust] .vh9-tab::after, .vh9[data-rust] .lees::before { animation-play-state: paused; }
@keyframes vh9-vul { to { transform: scaleX(1); } }
@media (hover: hover) and (pointer: fine) {
  .vh9 .vh9-tab:not(.nu):hover::before { opacity: 0.6; box-shadow: none; }
  .vh9 .vh9-tab:not(.nu):hover b { color: var(--ink); }
}

/* ------------------------------------------------------------------ the stage: the scene left, the purchase right */
.vh9-podium { position: relative; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 16px; }
.vh9-scene { position: relative; height: var(--h); border-radius: var(--r4); background: #E9EDF3; box-shadow: inset 0 0 0 1px var(--lijn); overflow: hidden; }
.vh9-scene::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(15, 27, 51, 0.07) 1px, transparent 1.3px); background-size: 18px 18px; }
.vh9-modus { position: absolute; z-index: 6; left: 14px; top: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border-radius: 99px; background: #FFFFFF; box-shadow: var(--e1); color: var(--ink); font-size: 0.875rem; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.vh9-modus svg { width: 18px; height: 18px; color: var(--b-ink); }
/* the desk: a fixed drawing of 625 x 480, scaled to the scene and centred (js/v9-verhaal.js sets --sk) */
.vh9-tafel { position: absolute; left: 50%; top: 50%; width: 625px; height: 480px; transform: translate(-50%, -50%) scale(var(--sk, 1)); }

/* ------------------------------------------------------------------ the A4 sheet: native 420 x 594, scaled with --a */
.vh9 .a4-plek { position: absolute; width: calc(420px * var(--a)); height: calc(594px * var(--a)); }
.vh9 .a4 { position: absolute; left: 0; top: 0; width: 420px; height: 594px; padding: 30px 30px 26px; transform: scale(var(--a)); transform-origin: 0 0; background: var(--papier); color: #1A1F29; box-shadow: 0 1px 1px rgba(15, 27, 51, 0.08), 0 20px 40px -18px rgba(15, 27, 51, 0.45); font-family: var(--font); font-size: 11px; line-height: 1.4; text-align: left; letter-spacing: 0; }
.vh9 .a4-kop { display: flex; justify-content: space-between; align-items: start; }
.vh9 .a4-merk { font-size: 24px; font-weight: 700; letter-spacing: 0.34em; line-height: 1; }
.vh9 .a4-adres { margin-top: 8px; font-size: 9.5px; line-height: 1.45; color: #4E5563; }
.vh9 .a4-soort { text-align: right; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.2; text-transform: uppercase; }
.vh9 .a4-soort small { display: block; margin-top: 4px; font-size: 9.5px; font-weight: 400; letter-spacing: 0; text-transform: none; color: #4E5563; }
.vh9 .a4-lijn { height: 2px; margin: 16px 0 14px; background: #1A1F29; }
.vh9 .a4-meta { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 5px 12px; font-size: 11px; color: #4E5563; }
.vh9 .a4-meta > span:nth-child(even) { color: #1A1F29; font-family: var(--mono); font-size: 11px; }
.vh9 .a4-tabel { margin-top: 18px; font-size: 11px; }
.vh9 .a4-tk, .vh9 .a4-tr { display: grid; grid-template-columns: 30px 1fr 40px 76px; gap: 8px; padding: 6px 8px; }
.vh9 .a4-tk { background: #1A1F29; color: #FFFFFF; font-weight: 700; font-size: 10px; letter-spacing: 0.02em; }
.vh9 .a4-tr { border-bottom: 1px solid #E4DFD4; padding-block: 9px; }
.vh9 .a4-tk > span:nth-child(3), .vh9 .a4-tr > span:nth-child(3), .vh9 .a4-tk > span:last-child, .vh9 .a4-tr > span:last-child { text-align: right; }
.vh9 .a4-tr > span:last-child { font-family: var(--mono); }
.vh9 .a4-tr small { display: block; color: #4E5563; font-size: 10px; margin-top: 2px; }
.vh9 .a4-extra { margin: 14px 8px 0; font-size: 11px; color: #4E5563; }
.vh9 .a4-extra b { color: #1A1F29; font-family: var(--mono); font-weight: 500; }
/* handwriting of the representative: the cell rules above set the mono face, this rule outranks them (§9 row 1) */
.vh9 .a4 .a4-hand, .vh9 .a4 .a4-tr span.a4-hand, .vh9 .a4 .a4-meta span.a4-hand, .vh9 .a4 .a4-som span.a4-hand, .vh9 .a4 .a4-regel span.a4-hand { font-family: var(--hand); font-size: 22px; font-weight: 500; letter-spacing: 0; line-height: 0.9; color: #1F3A8A; }
/* the pre-printed order form: number in red, dotted lines to fill in, small print, page number */
.vh9 .a4-nr { display: block; margin-top: 6px; font-family: var(--mono); font-size: 13px; font-weight: 500; letter-spacing: 0.06em; color: #B3261E; }
.vh9 .a4-regels { display: grid; gap: 9px; margin: 14px 8px 0; font-size: 11px; color: #4E5563; }
.vh9 .a4-regel { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 10px; }
.vh9 .a4-regel i { display: block; height: 15px; border-bottom: 1px dotted #A9A397; font-style: normal; }
.vh9 .a4-regel i .a4-hand { position: relative; top: -2px; }
.vh9 .a4-tr.leeg { height: 31px; }
.vh9 .a4-klein { margin: 14px 8px 0; font-size: 7.6px; line-height: 1.5; color: #7A808B; }
.vh9 .a4-klein b { color: #4E5563; font-weight: 700; }
.vh9 .a4-som { display: grid; grid-template-columns: 1fr auto; gap: 5px 18px; width: 52%; margin: 14px 8px 0 auto; font-size: 11px; color: #4E5563; }
.vh9 .a4-som > span:nth-child(even) { text-align: right; color: #1A1F29; font-family: var(--mono); }
.vh9 .a4-som .tot { font-weight: 700; color: #1A1F29; }
.vh9 .a4-voet { position: absolute; left: 30px; right: 30px; bottom: 24px; display: flex; justify-content: space-between; align-items: end; gap: 16px; padding-top: 10px; border-top: 1px solid #D9D3C7; font-size: 9px; line-height: 1.5; color: #6B717C; }
.vh9 .a4-voet svg { width: 92px; height: 30px; color: #1F3A8A; }
/* the box the AI draws around a field it reads: blue, orange for handwriting (opacity only) */
.vh9 .a4 [data-v] { position: relative; }
.vh9 .a4 [data-v]::after { content: ""; position: absolute; inset: -1px -2px; border-radius: 3px; background: rgba(62, 111, 216, 0.14); box-shadow: 0 0 0 2px rgba(62, 111, 216, 0.85); opacity: 0; transition: opacity 0.3s var(--uit); pointer-events: none; }
.vh9 .a4 [data-v].twijfel::after { background: rgba(242, 166, 90, 0.22); box-shadow: 0 0 0 2px #D9822B; }
.vh9 .a4 [data-v].a4-lees::after, .vh9 .a4 [data-v].twijfel::after { opacity: 1; }
.vh9 .a4 .a4-merk[data-v]::after { inset: -4px -6px; }
.vh9 .a4 span[data-v] { white-space: nowrap; }
.vh9 .a4-tr small [data-v], .vh9 .a4-extra [data-v], .vh9 .a4-tr .a4-hand[data-v="stof"] { margin-left: 3px; }

/* ------------------------------------------------------------------ way in 1: the gsm over the paper on the desk */
.vh9-gsmscene, .vh9-pcscene { position: absolute; inset: 0; transition: opacity 0.45s var(--uit), transform 0.6s var(--zacht-uit); }
.vh9-gsmscene.weg, .vh9-pcscene.weg { opacity: 0; transform: translateY(14px) scale(0.985); pointer-events: none; }
.vh9-gsmscene .a4-plek { --a: 0.68; left: 40px; top: 62px; transform: rotate(-2.2deg); }
.vh9-hand { position: absolute; z-index: 3; right: 44px; top: 34px; width: 206px; --gsm-rand: 7px; transform: rotate(3deg); transition: transform 0.6s var(--zacht-uit); }
.vh9-gsmscene.knip .vh9-hand { transform: rotate(3deg) translateY(-6px); }
.vh9 .gz { position: absolute; inset: 0; background: #000; }
.vh9 .gz-boven { padding: 54px 20px 0; color: #FFF; font-size: 18px; line-height: 1.2; }
.vh9 .gz-beeld { position: absolute; left: 0; right: 0; top: 100px; height: 600px; background: #3A322B; overflow: hidden; display: grid; place-items: center; }
.vh9 .gz-beeld .a4-plek { --a: 0.66; position: relative; transform: rotate(-1deg); }
.vh9 .gz-beeld .a4-plek::after { content: ""; position: absolute; inset: -5px; border: 2.5px solid #5B9BF0; border-radius: 3px; }
.vh9 .gz-label { position: absolute; z-index: 3; top: 16px; left: 50%; transform: translateX(-50%); padding: 8px 16px; border-radius: 99px; background: rgba(15, 22, 35, 0.9); color: #FFF; font-size: 17px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.vh9 .gz-onder { position: absolute; left: 16px; right: 16px; bottom: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vh9 .gz-onder span { display: grid; place-items: center; height: 58px; border-radius: 18px; background: #232A36; color: #FFF; font-size: 19px; font-weight: 600; }
.vh9 .gz-onder span.blauw { background: var(--b); }
.vh9 .gz-flits { position: absolute; inset: 0; z-index: 9; background: #FFF; opacity: 0; pointer-events: none; }
.vh9-gsmscene.knip .gz-flits { animation: ga-knip 0.5s ease-out; }

/* ------------------------------------------------------------------ way in 2: the pdf on the computer */
/* the laptop as large as the desk allows (the label of the way in stays free at the top left) */
.vh9-pcscene .pc9 { position: absolute; left: 12px; top: 60px; width: 600px; }
.vh9-pcscene .pc9-voet { margin: 0 -3%; }
.vh9 .pv { display: grid; grid-template-rows: 40px 1fr; height: 640px; background: #525A68; }
.vh9 .pv-balk { display: flex; align-items: center; gap: 12px; padding: 0 16px; background: #2E3440; color: #E6EAF2; font-size: 15px; }
.vh9 .pv-balk i { font-style: normal; padding: 3px 6px; border-radius: 4px; background: #D1453B; color: #FFF; font-size: 12px; font-weight: 700; }
.vh9 .pv-balk span { font-family: var(--mono); font-size: 14px; }
.vh9 .pv-balk em { font-style: normal; color: #AEB6C4; font-size: 13px; white-space: nowrap; }
.vh9 .pv-balk .pv-zoom { margin-left: auto; padding: 3px 8px; border-radius: 5px; background: #3B4252; color: #E6EAF2; }
/* the page zoomed in on its top, as one reads a pdf: letterhead, number, table and totals at a size that reads, scrolled a
   little past the top margin; the rest of the page is below the edge of the viewer */
.vh9 .pv-blad { position: relative; display: grid; justify-items: center; overflow: hidden; }
.vh9 .pv-blad .a4-plek { --a: 1.85; position: relative; margin-top: calc(-14px * var(--a)); }
/* the page runs on under the edge of the viewer: it fades into the grey there, so no line ends cut in half */
.vh9 .pv-blad::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: linear-gradient(rgba(82, 90, 104, 0), #525A68 85%); pointer-events: none; }
/* the upload card sits bottom right, in the grey beside the page, so the title and the date stay visible (§9 row 8) */
.vh9 .pv-op { position: absolute; z-index: 4; right: 16px; bottom: 34px; width: 280px; padding: 14px 16px; border-radius: 14px; background: #FFF; box-shadow: 0 0 0 1px #E3E8F0, 0 24px 48px -20px rgba(15, 27, 51, 0.5); font-size: 15px; line-height: 1.4; color: var(--ink); opacity: 0; transform: translateY(-8px) scale(1.35); transform-origin: 100% 100%; transition: opacity 0.4s var(--uit), transform 0.5s var(--zacht-uit); }
/* larger than the app draws it, so its title reads at about 10 px next to the zoomed page; it leaves before the AI reads */
.vh9 .pv-op.aan { opacity: 1; transform: scale(1.35); }
.vh9 .pv-op b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; }
.vh9 .pv-op b span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--b); color: #FFF; font-size: 13px; }
.vh9 .pv-op p { margin: 8px 0 12px; color: var(--s); font-size: 14px; line-height: 1.45; }
.vh9 .pv-op .pa-voortgang { margin-top: 0; height: 5px; }
.vh9 .pv-op.vol .pa-voortgang i { transform: scaleX(1); }
.vh9 .pv-op small { display: grid; margin-top: 8px; font-size: 14px; color: var(--s); }
.vh9 .pv-op small span { grid-area: 1 / 1; transition: opacity 0.3s var(--uit); }
.vh9 .pv-op small span + span { opacity: 0; color: var(--g); font-weight: 600; }
.vh9 .pv-op.klaar small span:first-child { opacity: 0; }
.vh9 .pv-op.klaar small span + span { opacity: 1; }

/* ------------------------------------------------------------------ step 5: Te versturen, drawn live on the laptop */
.vh9-versturen { position: absolute; inset: 0; }
.vh9-versturen[hidden] { display: none; }
/* the browser at 120 %, so the list fills the screen and reads like the step before it */
.vh9 .tv-pa { position: absolute; left: 0; top: 0; width: 854px; height: 534px; transform: scale(1.2); transform-origin: 0 0; }
.vh9 .tv-oud > .tv-dim { opacity: 0.5; }
.vh9 .tv-balk { display: flex; align-items: center; gap: 10px; }
.vh9 .tv-balk h4 { margin: 0 4px 0 0; font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--ink); }
.vh9 .tv-balk .pa-tabs span { white-space: nowrap; }
.vh9 .tv-auto { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 99px; background: #FFFFFF; box-shadow: 0 0 0 1px #E3E8F0; font-size: 13px; color: #3B4457; white-space: nowrap; }
.vh9 .tv-auto b { margin-left: 4px; font-weight: 700; color: var(--ink); }
.vh9 .tv-knop { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 99px; background: var(--b); color: #FFF; font-size: 13px; font-weight: 600; white-space: nowrap; transition: transform 0.16s var(--uit); }
.vh9 .tv-knop svg { width: 15px; height: 15px; }
.vh9 .tv-knop em { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: rgba(255, 255, 255, 0.24); font-style: normal; font-size: 11px; font-weight: 700; }
.vh9 .tv-knop em { opacity: 0; transition: opacity 0.2s var(--uit); }
.vh9 .tv-knop.tel em { opacity: 1; }
.vh9 .tv-knop.druk { transform: scale(0.95); }
.vh9 .pv[hidden] { display: none; }
.vh9 .tv-kol { display: grid; grid-template-columns: 20px minmax(0, 2.1fr) minmax(0, 1.25fr) minmax(0, 0.95fr) minmax(0, 1.15fr) minmax(0, 1.3fr); align-items: center; gap: 12px; padding: 0 16px; }
.vh9 .tv-rij { position: relative; height: 58px; border-bottom: 1px solid #EEF1F6; font-size: 13px; color: #3B4457; }
.vh9 .tv-rij:last-child { border-bottom: 0; }
.vh9 .tv-rij > span, .vh9 .tv-rij > div { position: relative; }
.vh9 .tv-lisa::before { content: ""; position: absolute; inset: 0; background: #EAF0FC; opacity: 0; transition: opacity 0.5s var(--uit); }
.vh9 .tv-lisa.vers::before { opacity: 1; }
/* a sent purchase stays in the list for two weeks, dimmed, with "Verstuurd" and its date (as the app shows it) */
.vh9 .tv-rij > .tv-dim { transition: opacity 0.4s var(--uit); }
.vh9 .tv-lisa.weg > .tv-dim { opacity: 0.5; }
.vh9 .tv-vak { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; box-shadow: inset 0 0 0 1.5px #C3CCDA; background: #FFF; }
.vh9 .tv-vak svg { width: 12px; height: 12px; color: #FFF; opacity: 0; transform: scale(0.6); transition: opacity 0.2s var(--uit), transform 0.25s var(--uit); }
.vh9 .tv-vak::before { content: ""; grid-area: 1 / 1; width: 18px; height: 18px; border-radius: 5px; background: var(--b); opacity: 0; transition: opacity 0.2s var(--uit); }
.vh9 .tv-vak svg { grid-area: 1 / 1; position: relative; }
.vh9 .tv-vak.aan::before, .vh9 .tv-vak.aan svg { opacity: 1; }
.vh9 .tv-vak.aan svg { transform: none; }
.vh9 .tv-kop .tv-vak { box-shadow: inset 0 0 0 1.5px #C3CCDA; }
.vh9 .tv-naar { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.vh9 .tv-naar svg { flex: none; width: 16px; height: 16px; color: #5B6474; }
.vh9 .tv-pil { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 99px; background: #EEF1F6; color: #3B4457; font-size: 12px; font-weight: 600; white-space: nowrap; }
.vh9 .tv-pil svg { flex: none; width: 13px; height: 13px; }
.vh9 .tv-pil--groen { background: var(--g-tint); color: var(--g); }
.vh9 .tv-stand { display: inline-grid; justify-items: start; }
.vh9 .tv-stand > * { grid-area: 1 / 1; transition: opacity 0.35s var(--uit), transform 0.45s var(--zacht-uit); }
.vh9 .tv-stand .tv-pil--groen { opacity: 0; transform: translateY(4px); }
.vh9 .tv-stand.af > :first-child { opacity: 0; transform: translateY(-4px); }
.vh9 .tv-stand.af .tv-pil--groen { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ the flying values: a field leaves the paper and
   lands in its row (only above 960 px, and never with reduced motion) */
.vh9 .vlieg { position: absolute; z-index: 20; left: 0; top: 0; padding: 4px 9px; border-radius: 8px; background: var(--b); color: #FFFFFF; font-size: 0.875rem; font-weight: 600; line-height: 1.4; white-space: nowrap; pointer-events: none; box-shadow: 0 10px 20px -8px rgba(62, 111, 216, 0.8); will-change: transform, opacity; }
.vh9 .vlieg.oranje { background: #B2600F; box-shadow: 0 10px 20px -8px rgba(217, 130, 43, 0.8); }

/* ------------------------------------------------------------------ the purchase in Furnipilot (the fiche, reading size) */
.vh9-app { position: relative; height: var(--h); border-radius: var(--r4); background: #FFFFFF; box-shadow: var(--e2); overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; container-type: inline-size; }
.vh9 .fa-kop { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 20px 14px; border-bottom: 1px solid var(--lijn); }
.vh9 .fa-kop .duim { --d: 56px; border-radius: 13px; }
.vh9 .fa-kop h3 { margin: 0; font-size: 1.25rem; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); }
.vh9 .fa-kop small { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 4px; font-size: 0.875rem; line-height: 1.3; color: var(--s); }
.vh9 .fa-kop small > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.vh9 .fa-kop .lev { width: 18px; height: 18px; }
.vh9 .fa-merk { display: grid; justify-items: end; gap: 6px; }
.vh9 .fa-merk .sig { opacity: 0; transform: translateY(-4px); transition: opacity 0.35s var(--uit), transform 0.4s var(--zacht-uit); }
.vh9 .fa-merk .sig.aan { opacity: 1; transform: none; }
/* before the first document is read there is no status yet (js/v9-verhaal.js): the chip keeps its place */
.vh9 .fa-merk .chip.wacht { visibility: hidden; }
.vh9 .pop { animation: vh9-pop 0.42s var(--zacht-uit); }
@keyframes vh9-pop { 0% { transform: scale(0.86); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.vh9 .fa-lijn { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 14px 16px 10px; border-bottom: 1px solid var(--lijn); }
.vh9 .fa-lijn::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 21px; border-top: 2px dashed var(--lijn-2); }
.vh9 .fa-lijn .vul { position: absolute; left: 12.5%; top: 20px; height: 3px; width: 75%; border-radius: 2px; background: var(--b); transform-origin: 0 50%; transform: scaleX(var(--v, 0)); transition: transform 0.8s var(--zacht-uit); }
.vh9 .fa-lijn div { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; font-size: 0.8125rem; line-height: 1.3; color: var(--s2); text-align: center; }
.vh9 .fa-lijn i { width: 16px; height: 16px; border-radius: 50%; background: #FFF; box-shadow: inset 0 0 0 2px var(--lijn-2); }
.vh9 .fa-lijn b { font-size: 0.8125rem; font-weight: 600; color: var(--s); }
.vh9 .fa-lijn span { white-space: nowrap; }
.vh9 .fa-lijn .af i { background: var(--b); box-shadow: 0 0 0 4px var(--b-zacht); }
.vh9 .fa-lijn .af b { color: var(--ink); }
.vh9 .fa-lijn .laat { color: var(--r); font-weight: 600; }
.vh9 .fa-lees { min-height: 0; padding: 12px 20px 0; overflow: hidden; }
.vh9 .fa-lees h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0.02em; color: var(--s); }
.vh9 .fa-lees h4 svg { flex: none; width: 16px; height: 16px; color: var(--b-ink); }
.vh9 .fa-lees h4 .lees { margin-left: auto; }
.vh9 .fa-velden { margin: 0; display: grid; }
/* a field of the purchase: the label stays, the value and its note appear when the AI has read it (a grey bar holds the
   place meanwhile, so the card is never empty while it reads). The fields only start hidden once js/v9-verhaal.js runs
   (.js-aan): without a script the HTML shows the end state of step 1. */
.vh9 .fa-veld { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0 12px; align-items: baseline; padding: 9px 0; border-bottom: 1px dashed var(--lijn); }
.vh9 .fa-veld:last-child { border-bottom: 0; }
.vh9 .fa-veld dt { grid-column: 1; grid-row: 1; font-size: 0.875rem; line-height: 1.4; color: var(--s); }
.vh9 .fa-veld dd { grid-column: 3; grid-row: 1; margin: 0; text-align: right; color: var(--ink); font-size: 0.9688rem; line-height: 1.4; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vh9 .fa-veld dd s { margin-right: 6px; color: var(--s2); font-weight: 400; }
/* the note never ends in "…": where the card is too narrow for label, note and value on one line, it goes under the label */
.vh9 .fa-veld .ond { grid-column: 2; grid-row: 1; text-align: right; font-size: 0.8125rem; line-height: 1.4; color: var(--s); }
@container (max-width: 300px) {
  .vh9 .fa-veld .ond { grid-column: 1 / -1; grid-row: 2; text-align: left; }
}
.vh9 .fa-veld dd, .vh9 .fa-veld .ond { transition: opacity 0.3s var(--uit), transform 0.4s var(--zacht-uit); }
.vh9.js-aan .fa-veld:not(.aan) dd, .vh9.js-aan .fa-veld:not(.aan) .ond { opacity: 0; transform: translateY(4px); }
.vh9.js-aan .fa-veld:not(.aan)::after { content: ""; grid-column: 3; grid-row: 1; align-self: center; justify-self: end; width: 72px; height: 10px; border-radius: 5px; background: var(--vlak); }
/* step 4: the visitor sets the purchase on Afgerond with the button, the chip follows */
/* the button keeps its place while it is not there (js/v9-verhaal.js toggles .uit), so the fields never move */
.vh9 .fa-actie { display: flex; justify-content: flex-end; padding: 10px 0 2px; }
.vh9 .fa-actie.uit { visibility: hidden; }
.vh9 .fa-knop { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 11px; border-radius: 99px; background: var(--ink); color: #FFFFFF; font-size: 0.875rem; font-weight: 600; line-height: 1; white-space: nowrap; transition: transform 0.16s var(--uit), background-color 0.2s; }
.vh9 .fa-knop svg { width: 16px; height: 16px; }
.vh9 .fa-knop.druk { transform: scale(0.94); }
.vh9 .fa-knop.af { background: var(--g-tint); color: var(--g); }
.vh9 .fa-veld.twijfel dd, .vh9 .fa-veld.twijfel .ond { color: var(--o); }
.vh9 .fa-veld.rood dd { color: var(--r); }
.vh9 .fa-veld.ok .ond { color: var(--g); }
.vh9 .fa-docs { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 20px 14px; border-top: 1px solid var(--lijn); }
.vh9 .fa-docs span { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--vlak); color: var(--s2); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.vh9 .fa-docs span::before { content: ""; width: 10px; height: 12px; border-radius: 2px; border: 1.5px dashed currentColor; }
.vh9 .fa-docs span.er { background: var(--g-tint); color: var(--g); }
.vh9 .fa-docs span.er::before { border: 0; background: currentColor; }
/* step 5: where it goes, with the plan of each way */
/* the fields and the three ways share one cell, so the card keeps one height in every step */
.vh9 .fa-lees, .vh9 .fa-stap5 { grid-row: 3; grid-column: 1; }
.vh9 .fa-docs { grid-row: 4; grid-column: 1; }
.vh9 .fa-stap5 { min-height: 0; visibility: hidden; }
.vh9 .vh9-app.vijf .fa-stap5 { visibility: visible; }
.vh9 .vh9-app.vijf .fa-lees { visibility: hidden; }
.vh9 .fa-naar { display: grid; gap: 8px; padding: 14px 20px; }
.vh9 .fa-naar > div { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--lijn); transition: opacity 0.35s var(--uit), transform 0.45s var(--zacht-uit); }
.vh9.js-aan .fa-naar > div:not(.aan) { opacity: 0; transform: translateY(6px); }
.vh9 .fa-naar .ico { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--tint-2); color: var(--b-ink); }
.vh9 .fa-naar .ico svg { width: 20px; height: 20px; }
.vh9 .fa-naar b { font-size: 0.9688rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.vh9 .fa-naar small { grid-column: 2; font-size: 0.8438rem; color: var(--s); line-height: 1.4; }
.vh9 .fa-plan { grid-column: 3; grid-row: 1 / span 2; align-self: center; padding: 3px 9px; border-radius: 99px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--vlak); color: var(--s); box-shadow: inset 0 0 0 1px var(--lijn); }
.vh9 .fa-plan--toonzaal { background: var(--tint-2); color: var(--b-ink); box-shadow: none; }

/* ------------------------------------------------------------------ the caption and the play button */
.vh9-onder { display: flex; gap: 14px; align-items: center; margin-top: 14px; }
.vh9-speel { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: var(--e1); color: var(--ink); cursor: pointer; }
.vh9-speel svg { width: 16px; height: 16px; }
.vh9-speel[hidden] { display: none; }
/* the five captions share one cell, so the band keeps the height of the longest and nothing below it moves. Without a
   script (no .js-aan) they stand one under the other, the play button and the tabs do nothing and are left out */
.vh9-uitleg { flex: 1 1 auto; min-width: 0; display: grid; gap: 10px; max-width: 104ch; }
/* on a computer the "Vragen" button sits bottom right: the caption stops before it */
@media (min-width: 961px) { .vh9-uitleg { margin-right: 150px; } }
.vh9-uitleg p { margin: 0; font-size: 1.0625rem; line-height: 1.55; color: var(--t); }
.vh9:not(.js-aan) .vh9-speel { display: none; }
.vh9:not(.js-aan) .vh9-tab { pointer-events: none; }
.vh9.js-aan .vh9-uitleg { gap: 0; }
.vh9.js-aan .vh9-uitleg p { grid-area: 1 / 1; visibility: hidden; opacity: 0; transition: opacity 0.3s var(--uit), visibility 0s 0.3s; }
.vh9.js-aan .vh9-uitleg p.nu { visibility: visible; opacity: 1; transition: opacity 0.3s var(--uit), visibility 0s; }
.vh9-uitleg b { color: var(--ink); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .vh9-speel:hover { box-shadow: inset 0 0 0 1px #B9C5D8, 0 1px 2px rgba(15, 27, 51, 0.05); } }

/* ------------------------------------------------------------------ a laptop screen of 768 to 860 px high: a little tighter */
@media (min-width: 961px) and (max-height: 860px) {
  .vh9 { padding-top: 40px; padding-bottom: 40px; }
  .vh9-tabs { margin: 18px 0 12px; }
  .vh9 .vh9-tab { padding: 9px 14px 12px; }
  .vh9 .fa-kop { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 10px 20px 9px; }
  .vh9 .fa-kop .duim { --d: 44px; border-radius: 11px; }
  .vh9 .fa-kop small { margin-top: 2px; }
  .vh9 .fa-lijn { padding: 9px 16px 7px; }
  .vh9 .fa-lijn::before { top: 16px; }
  .vh9 .fa-lijn .vul { top: 15px; }
  .vh9 .fa-lijn div { gap: 2px; }
  .vh9 .fa-lees { padding-top: 7px; }
  .vh9 .fa-lees h4 { margin-bottom: 2px; }
  .vh9 .fa-veld { padding: 5px 0; }
  .vh9 .fa-docs { padding: 9px 20px 10px; }
  .vh9 .fa-naar { gap: 6px; padding: 10px 20px; }
  .vh9 .fa-naar > div { padding: 8px 12px; }
  .vh9-onder { margin-top: 12px; }
}

/* ------------------------------------------------------------------ a narrow computer (961 to 1100 px): the title and the
   intro side by side, so the tabs come up; the tabs drop their icon, so "Orderbevestiging" fits */
@media (min-width: 961px) and (max-width: 1100px) {
  .vh9-kop { flex-wrap: nowrap; gap: 32px; }
  .vh9-kop h2 { flex: none; }
  .vh9-kop p { max-width: 52ch; font-size: 0.9375rem; line-height: 1.5; }
  .vh9 .vh9-tab { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; }
  .vh9 .vh9-tab svg { display: none; }
  .vh9 .vh9-tab::after { left: 12px; right: 12px; }
  /* the scene and the purchase share the width equally, so the four document chips fit on one row of the card */
  .vh9-podium { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .vh9 .fa-docs { gap: 4px; padding-inline: 16px; }
  .vh9 .fa-docs span { height: 24px; gap: 5px; padding: 0 8px; font-size: 0.75rem; }
  .vh9 .fa-lees, .vh9 .fa-naar { padding-inline: 16px; }
  /* below 1100 px the "Vragen" button stays away while the purchase is on screen (js/v9.js): the caption takes the width */
  .vh9-uitleg { margin-right: 0; max-width: none; }
  .vh9-uitleg p { font-size: 1rem; }
}

/* ------------------------------------------------------------------ tablet and phone: one column, the tabs scroll */
@media (max-width: 960px) {
  .vh9-tabs { display: flex; gap: 6px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: var(--goot); margin-inline: calc(var(--goot) * -1); padding: 2px var(--goot) 6px; scrollbar-width: none; }
  .vh9-tabs::-webkit-scrollbar { display: none; }
  .vh9-tabs li { flex: 0 0 auto; scroll-snap-align: start; }
  .vh9 .vh9-tab { width: auto; padding: 10px 14px 12px; }
  .vh9 .vh9-tab b { white-space: nowrap; }
  /* the caption and the play button come right under the tabs: a tapped step explains itself before its scene */
  .vh9 > .v9-wrap { display: flex; flex-direction: column; }
  .vh9-tabs { margin-bottom: 10px; }
  .vh9-onder { order: 1; align-items: start; margin: 0 0 10px; }
  .vh9-podium { order: 2; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .vh9-scene { height: auto; aspect-ratio: 625 / 480; }
  /* the card is as high as its tallest step in every step (js/v9-verhaal.js measures it into --app-min), so nothing under
     it moves while the story plays. The fields and the three ways of step 5 keep sharing one cell, the document chips
     follow them directly, and the spare height of a shorter step is the empty last row at the foot of the card */
  .vh9-app { height: auto; min-height: var(--app-min, 0px); grid-template-rows: auto auto auto auto minmax(0, 1fr); }
  .vh9 .fa-kop { min-height: var(--kop, 0px); }
  .vh9 .fa-lees { padding-bottom: 6px; }
  /* the button Afgerond (step 4), the fields and the three ways of step 5 take their place only when they are there */
  .vh9 .fa-actie.uit, .vh9 .fa-stap5, .vh9 .vh9-app.vijf .fa-lees { display: none; }
  .vh9 .vh9-app.vijf .fa-stap5 { display: block; }
}
/* a phone: a low desk of 358 x 300, so the tabs, the caption, the scene and the head of the purchase fit one screen; the
   whole sheet visible, the gsm beside it */
@media (max-width: 600px) {
  .vh9-scene { aspect-ratio: 358 / 300; border-radius: var(--r3); }
  .vh9-tafel { width: 358px; height: 300px; }
  .vh9-gsmscene .a4-plek { --a: 0.41; left: 18px; top: 46px; }
  .vh9-hand { right: 24px; top: 36px; width: 106px; --gsm-rand: 4px; }
  /* the laptop seen from close by: wider than the desk, the screen from x 207 to 817 of its 1024 in view, the page in
     the middle at a size that reads (zoomed less than on a computer, so the totals stay in the low desk) */
  .vh9-pcscene .pc9 { left: -131px; top: 26px; width: 620px; }
  .vh9 .pv-blad .a4-plek { --a: 1.3; }
  .vh9 .pv-balk { padding-inline: 218px; }
  /* the upload card larger (its title about 13 px on the phone), at the bottom right of the part of the screen in view */
  .vh9 .pv-op { right: 222px; bottom: 196px; transform-origin: 100% 100%; transform: translateY(-8px) scale(1.4); }
  .vh9 .pv-op.aan { transform: scale(1.4); }
  /* Te versturen at reading size: the part of the list that is on screen, larger (sidebar, filters and two columns left out) */
  .vh9 .tv-pa { left: 207px; display: block; width: 427px; height: 400px; transform: scale(1.43); }
  .vh9 .tv-pa .pa-zij, .vh9 .tv-pa .tv-balk h4, .vh9 .tv-pa .pa-tabs span:not(.aan), .vh9 .tv-pa .tv-auto, .vh9 .tv-pa .pa-filters { display: none; }
  .vh9 .tv-pa .pa-hoofd { padding: 16px 10px; }
  .vh9 .tv-pa .tv-balk { justify-content: space-between; margin-bottom: 12px; }
  .vh9 .tv-pa .tv-kol { grid-template-columns: 18px minmax(0, 1fr) auto; gap: 10px; padding: 0 12px; }
  .vh9 .tv-pa .tv-kol > :nth-child(3), .vh9 .tv-pa .tv-kol > :nth-child(4), .vh9 .tv-pa .tv-kol > :nth-child(5) { display: none; }
  .vh9 .tv-pa .tv-oud { display: none; }
  .vh9-app { border-radius: var(--r3); }
  .vh9-modus { left: 12px; top: 12px; font-size: 0.8438rem; padding: 6px 11px 6px 9px; }
  .vh9-uitleg p { font-size: 1rem; }
}
@media (max-width: 600px) {
  /* the purchase compact, so the document on the desk and what was read from it fit one screen together: the head on one
     row (the chips stacked on the right), the fields at 14 px with their note on the same line */
  .vh9 .fa-kop { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; padding: 10px 16px 9px; }
  .vh9 .fa-kop .duim { --d: 44px; border-radius: 11px; }
  .vh9 .fa-kop h3 { font-size: 1.0625rem; }
  .vh9 .fa-kop small { gap: 0 10px; margin-top: 2px; font-size: 0.8125rem; }
  .vh9 .fa-lijn { padding: 8px 8px 6px; }
  .vh9 .fa-lijn::before { top: 15px; }
  .vh9 .fa-lijn .vul { top: 14px; }
  .vh9 .fa-lijn div { gap: 2px; }
  .vh9 .fa-lees { padding: 9px 16px 4px; }
  .vh9 .fa-lees h4 { margin-bottom: 2px; }
  .vh9 .fa-veld { padding: 6px 0; }
  .vh9 .fa-veld dt, .vh9 .fa-veld dd { font-size: 0.875rem; }
  .vh9 .fa-veld .ond { font-size: 0.8125rem; line-height: 1.3; }
  .vh9 .fa-actie { padding-top: 4px; }
  /* the four documents in two even rows */
  .vh9 .fa-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 7px 16px 8px; }
  .vh9 .fa-docs span { height: 26px; gap: 6px; padding: 0 8px; font-size: 0.8125rem; }
  /* step 5: each way on one line (icon, name, plan), without its description */
  .vh9 .fa-naar { gap: 6px; padding: 10px 16px; }
  .vh9 .fa-naar > div { grid-template-columns: 32px minmax(0, 1fr) auto; gap: 0 10px; padding: 8px 10px; border-radius: 12px; }
  .vh9 .fa-naar .ico { grid-row: auto; width: 32px; height: 32px; border-radius: 9px; }
  .vh9 .fa-naar .ico svg { width: 18px; height: 18px; }
  .vh9 .fa-naar b { font-size: 0.875rem; }
  .vh9 .fa-naar small { display: none; }
  .vh9 .fa-plan { grid-row: auto; }
}

/* reduced motion: the end state of each step (no autoplay, no flying; js/v9-verhaal.js), no pops */
@media (prefers-reduced-motion: reduce) {
  .vh9 .pop { animation: none; }
  .vh9 .vh9-tab::after { display: none; }
}