/* furnipilot.com, version 9: the hero of the home page (design/ONTWERP-V9.md §3.0, prototype design/v9-proto/hero.html).
   "Aankopen" stays, the italic part is typed (js/v9-held.js). Left the text, right the stage: one --vlak panel with a dot
   grid, a laptop and a gsm that draw the same purchase (Lisa hoeksalon, Zitwerk), one card at a time, and the programs it
   works with. Loaded after css/v9.css (the devices and the app parts live there).
   The card parts (.veld, .vgl, .staaf, ...) are scoped to .h9, so the other parts of the page keep their own. Motion:
   transform and opacity only; the entrance runs once; loops pause while the hero is off screen ([data-rust]); reduced
   motion shows the end state of the HTML ("opvolgen" with the status card). */

/* ------------------------------------------------------------------ layout */
.h9 { position: relative; overflow: clip; display: grid; align-items: center; min-height: min(760px, calc(100svh - var(--kop))); padding-block: clamp(24px, 3vw, 40px); }
.h9-raster { position: relative; display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.h9-tekst { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: 22px; }
.h9-tekst > p, .h9-tekst > h1 { margin: 0; }
main .h9 h1 { font-size: var(--t-held); line-height: 1.02; letter-spacing: -0.04em; font-weight: 400; color: var(--ink); text-wrap: initial; }
.h9-vast { display: block; }
/* the typed line keeps its height when it is empty, so nothing under it moves */
.h9-wissel { display: flex; align-items: baseline; min-height: 1.08em; white-space: nowrap; position: relative; }
.h9-wissel em { font-style: italic; font-weight: 400; color: var(--b); letter-spacing: -0.03em; padding-right: 0.04em; }
/* cursor: absolutely positioned (no flex space, no layout shift); js/v9-held.js moves it via element.animate()
   (Web Animations API, transform-only → excluded from the CLS algorithm) */
.h9-cursor { display: block; position: absolute; left: 0; top: 0.1em; width: 3px; height: 0.82em; border-radius: 2px; background: var(--b); animation: h9-knipper 1.05s steps(1) infinite; pointer-events: none; }
.h9-wissel.typt .h9-cursor { animation: none; }
@media (prefers-reduced-motion: reduce) { .h9-cursor { display: none; } }
@keyframes h9-knipper { 50% { opacity: 0; } }
.h9-lead { max-width: 44ch; font-size: var(--t-lead); line-height: 1.6; color: var(--t); }
.h9-knoppen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
/* balanced, so a narrow column never leaves "het vanzelf." alone on the second line */
.h9-noot { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9375rem; line-height: 1.5; color: var(--s); text-wrap: balance; }
.h9-noot svg { flex: none; width: 18px; height: 18px; margin-top: 0.15em; color: var(--g); }
/* "Werkt met": the tools in the first screen, on the computer and on the gsm */
.h9-werkt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: 100%; margin-top: 2px; padding-top: 18px; border-top: 1px solid var(--lijn); font-size: 0.9375rem; color: var(--s); }
.h9-logos { display: inline-flex; align-items: center; gap: 12px; }
.h9-logos img { display: block; width: 20px; height: 20px; }
.h9-werkt a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--b-ink); font-weight: 500; text-decoration: none; white-space: nowrap; }
.h9-werkt a svg { width: 16px; height: 16px; transition: transform 0.18s var(--uit); }
@media (hover: hover) and (pointer: fine) { .h9-werkt a:hover { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .h9-werkt a:hover svg { transform: translateX(3px); } }

/* ------------------------------------------------------------------ the stage: laptop at the back, the gsm in front on the
   left, one card or the tools at the bottom right */
.h9-podium { position: relative; width: 100%; max-width: 700px; aspect-ratio: 700 / 640; justify-self: end; margin-right: clamp(-40px, -2vw, 0px); --z: 1; container-type: inline-size; }
/* the surface: one cool panel with a hairline and a fine dot grid, 40px past the wrap on the right. No gradient, no glow */
.h9-vlak { position: absolute; z-index: 0; inset: 9% -48px -3% 7%; border-radius: var(--r4); background-color: var(--vlak); background-image: radial-gradient(circle at 1px 1px, #D3DCEC 1px, transparent 1.3px); background-size: 22px 22px; box-shadow: inset 0 0 0 1px var(--lijn); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .h9-vlak { animation: h9-in-vlak 0.6s var(--uit) backwards; }
  .h9-pc { animation: h9-in-pc 0.6s var(--zacht-uit) 0.12s backwards; }
  .h9-gsm { animation: h9-in-gsm 0.6s var(--zacht-uit) 0.42s backwards; }
  /* the first card comes last, so it never floats over an empty panel */
  .h9-plek { animation: h9-in-plek 0.6s var(--zacht-uit) 0.68s backwards; }
}
@keyframes h9-in-vlak { from { opacity: 0; } }
@keyframes h9-in-pc { from { opacity: 0; transform: translate(28px, 10px); } }
@keyframes h9-in-gsm { from { opacity: 0; transform: translate(-18px, 26px); } }
@keyframes h9-in-plek { from { opacity: 0; translate: 0 16px; } }
.h9-pc { position: absolute; left: 16%; top: 0; width: 84%; transition: opacity 0.5s var(--uit), transform 0.7s var(--zacht-uit), filter 0.5s; }
/* the base of the laptop a little wider than its screen (v9.css draws it 6.5% wider on each side), so it ends inside the
   panel at every width */
.h9 .h9-pc .pc9-voet { margin-inline: -3%; }
.h9-gsm { position: absolute; left: 0; top: 30%; width: 27%; z-index: 3; --gsm-rand: 0.9cqw; transition: opacity 0.5s var(--uit), transform 0.7s var(--zacht-uit), filter 0.5s; }
.h9-podium[data-focus="gsm"] .h9-pc { opacity: 0.55; filter: saturate(0.7); }
.h9-podium[data-focus="gsm"] .h9-gsm { transform: translateY(-14px) scale(1.04); }
.h9-podium[data-focus="pc"] .h9-gsm { transform: translate(-6px, 18px) scale(0.96); }
.h9-podium[data-focus="pc"] .h9-pc { transform: translateY(-6px); }
.h9-podium[data-focus="kaart"] .h9-pc, .h9-podium[data-focus="tools"] .h9-pc { opacity: 0.9; }
/* the app in the devices is scaled with --k (js/v9.js). Before that script runs, or without it, the screen computes the same
   scale itself (its width over the native width), so the gsm never shows a cut "Lisa ho" */
.h9 .gsm9-scherm, .h9 .pc9-beeld { container-type: inline-size; }
.h9 .gsm9-in { transform: scale(var(--k, tan(atan2(100cqw, 390px)))); }
.h9 .pc9-in { transform: scale(var(--k, tan(atan2(100cqw, 1024px)))); transform-origin: 0 0; transition: transform 0.7s var(--zacht-uit); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .h9-gsm { animation: h9-in-gsm 0.6s var(--zacht-uit) 0.42s backwards, h9-drijf 7s ease-in-out 1.2s infinite; }
}
@keyframes h9-drijf { 50% { translate: 0 -5px; } }
/* off screen or in a hidden tab the loops stand still (js/v9-held.js sets data-rust) */
.h9[data-rust] .h9-cursor, .h9[data-rust] .h9-gsm, .h9[data-rust] .lees::before { animation-play-state: paused; }

/* the thread between the gsm and the laptop: the same purchase travels */
.h9-draad { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; overflow: visible; }
.h9-draad path { fill: none; stroke: var(--b); stroke-width: 1.6; stroke-dasharray: 3 6; opacity: 0; transition: opacity 0.4s; }
.h9-draad circle { fill: var(--b); opacity: 0; }
.h9-draad .ring { fill: none; stroke: var(--b); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.h9-draad.aan path { opacity: 0.7; }

/* ------------------------------------------------------------------ the cards: one at a time, bottom right, over the foot
   of the laptop */
.h9-plek { position: absolute; right: -2%; bottom: 0; z-index: 5; width: 330px; transform: scale(var(--z)); transform-origin: 100% 100%; }
.h9-kaart { position: absolute; right: 0; bottom: 0; width: 100%; opacity: 0; transform: translateY(14px) scale(0.97); transition: opacity 0.45s var(--uit), transform 0.6s var(--zacht-uit); pointer-events: none; }
.h9-kaart.aan { opacity: 1; transform: none; }
.h9 .k-kop { display: flex; align-items: center; gap: 10px; padding: 14px 16px 12px; border-bottom: 1px solid var(--lijn); }
.h9 .k-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tint-2); color: var(--b-ink); }
.h9 .k-ico svg { width: 18px; height: 18px; }
.h9 .k-kop b { display: block; color: var(--ink); font-size: 0.9688rem; font-weight: 600; line-height: 1.2; }
.h9 .k-kop small { display: block; color: var(--s); font-size: 0.8125rem; line-height: 1.3; }
.h9 .k-kop .chip, .h9 .k-kop .lees { margin-left: auto; }

/* automatiseren: the AI fills the four fields of the order confirmation */
.h9 .velden { margin: 0; padding: 4px 16px 10px; display: grid; }
.h9 .veld { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px dashed var(--lijn); font-size: 0.875rem; opacity: 0.18; transform: translateX(-6px); transition: opacity 0.35s, transform 0.45s var(--zacht-uit); }
.h9 .veld:last-child { border-bottom: 0; }
.h9 .veld.aan, .h9 .velden--vol .veld { opacity: 1; transform: none; }
.h9 .veld dt { color: var(--s); }
.h9 .veld dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.h9 .veld dd s { color: var(--s2); font-weight: 400; }

/* tracken: the four steps of the purchase, and the signal */
.h9 .lijn4 { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); padding: 16px 12px 6px; }
.h9 .lijn4::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 25px; height: 2px; background: repeating-linear-gradient(90deg, var(--lijn-2) 0 5px, transparent 5px 9px); }
.h9 .lijn4 .vul { position: absolute; left: 12.5%; top: 25px; height: 2px; width: 25%; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.1s var(--zacht-uit) 0.2s; }
.h9 .h9-kaart.aan .lijn4 .vul { transform: scaleX(1); }
.h9 .lijn4 div { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; text-align: center; font-size: 0.75rem; line-height: 1.3; color: var(--s); }
.h9 .lijn4 i { width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--lijn-2); }
.h9 .lijn4 .af i { background: var(--b); box-shadow: none; }
.h9 .lijn4 b { font-weight: 600; font-size: 0.75rem; color: var(--s); }
.h9 .lijn4 .af b { color: var(--ink); }
.h9 .lijn4 .laat { color: var(--r); font-weight: 600; }
.h9 .k-voet { display: flex; align-items: center; gap: 8px; margin: 8px 16px 14px; padding: 10px 12px; border-radius: 10px; background: var(--r-tint); color: var(--r); font-size: 0.8125rem; font-weight: 500; transition: opacity 0.4s var(--uit), transform 0.5s var(--zacht-uit); }
.h9 .k-voet svg { width: 16px; height: 16px; flex: none; }
/* tracken (js/v9-held.js sets data-spoor 0, 1, 2): week 6 under Ontvangen turns into a red week 9, then the signal comes
   in. Without the attribute (the opening, reduced motion, no script) the card shows its end state */
.h9 .h9-wk { display: inline-grid; justify-items: center; }
.h9 .h9-wk > span { grid-area: 1 / 1; transition: opacity 0.35s var(--uit), transform 0.45s var(--zacht-uit); }
.h9 .h9-wk .oud { opacity: 0; transform: translateY(-4px); }
.h9 [data-spoor="0"] .h9-wk .oud { opacity: 1; transform: none; }
.h9 [data-spoor="0"] .h9-wk .laat { opacity: 0; transform: translateY(4px); }
.h9 [data-spoor="0"] .k-voet, .h9 [data-spoor="1"] .k-voet { opacity: 0; transform: translateY(8px); }

/* analyseren: purchases per supplier, the bars grow */
.h9 .k-tabs { display: flex; gap: 6px; padding: 12px 16px 0; }
.h9 .k-tabs span { padding: 4px 10px; border-radius: 99px; background: var(--vlak); font-size: 0.75rem; font-weight: 500; color: var(--s); }
.h9 .k-tabs span.aan { background: var(--ink); color: #FFFFFF; }
.h9 .staaf { display: grid; gap: 10px; padding: 14px 16px 16px; }
.h9 .staaf div { display: grid; grid-template-columns: 92px 1fr 22px; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--s); }
.h9 .staaf span { height: 10px; border-radius: 4px; background: var(--b); transform-origin: 0 50%; transform: scaleX(0.04); transition: transform 0.9s var(--zacht-uit); }
.h9 .staaf span.zacht { background: #A9C0F4; }
.h9 .staaf em { font-style: normal; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.h9 .h9-kaart.aan .staaf span { transform: scaleX(var(--w)); }
.h9 .staaf div:nth-child(2) span { transition-delay: 0.08s; }
.h9 .staaf div:nth-child(3) span { transition-delay: 0.16s; }
.h9 .staaf div:nth-child(4) span { transition-delay: 0.24s; }

/* managen: the board, the purchase moves from Gekocht to Bevestigd and the counts follow */
.h9 .mb { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 12px 12px 14px; }
/* the columns hold three cards plus the line "Vertraagd" (step 1), so the card keeps one height when Lisa moves */
.h9 .mb-kol { border-radius: 10px; background: var(--vlak); padding: 7px 6px 6px; min-height: 10.75rem; }
.h9 .mb-kol h6 { display: flex; align-items: center; gap: 5px; margin: 0 2px 7px; font-size: 0.75rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.h9 .mb-kol h6::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.h9 .mb-kol h6 span { margin-left: auto; font-weight: 500; color: var(--s); font-variant-numeric: tabular-nums; }
.h9 .mb-k { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; align-items: center; margin-bottom: 5px; padding: 5px; border-radius: 7px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(15, 27, 51, 0.07); font-size: 0.6875rem; font-weight: 600; line-height: 1.15; color: var(--ink); }
.h9 .mb-k .duim { --d: 22px; border-radius: 5px; }
.h9 .mb-k em { grid-column: 2; font-style: normal; font-weight: 600; font-size: 0.6875rem; color: var(--r); }
.h9 .mb-lisa { box-shadow: 0 0 0 1.5px var(--b), 0 6px 14px -8px rgba(62, 111, 216, 0.7); }
.h9 .mb[data-stap="0"] [data-mb-b], .h9 .mb[data-stap="1"] [data-mb-a] { display: none; }
.h9 .mb[data-stap="1"] [data-mb-b] { animation: h9-mb-komt 0.55s var(--zacht-uit) backwards; }
@keyframes h9-mb-komt { from { opacity: 0; transform: translateY(-8px) scale(0.94); } }

/* koppelen on a phone: one card with the same six programs, no thin lines at that size */
.h9 .kp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; padding: 14px 12px 6px; }
.h9 .kp span { display: grid; justify-items: center; gap: 5px; }
.h9 .kp i { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: #FFFFFF; box-shadow: var(--e2); color: var(--b-ink); }
.h9 .kp img, .h9 .kp svg { width: 24px; height: 24px; }
.h9 .kp small { font-size: 0.9375rem; font-weight: 500; line-height: 1.3; color: var(--ink); }
.h9 .kp-noot { margin: 8px 14px 14px; padding: 8px 10px; border-radius: 10px; background: var(--vlak); font-size: 0.875rem; line-height: 1.45; color: var(--t); text-align: center; }
.h9 .kp-noot b { font-weight: 500; color: var(--b-ink); }

/* ------------------------------------------------------------------ koppelen on a computer: one calm row of tiles under the
   laptop; js/v9-held.js places the tiles and computes every line from the real position of its icon */
.h9-tools { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.h9-tools > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.h9-tools path { fill: none; stroke: #9DB6EC; stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: var(--L, 400); stroke-dashoffset: var(--L, 400); transition: stroke-dashoffset 0.9s var(--zacht-uit); }
/* the travelling dots: each starts with opacity 0 and a <set> shows it when its motion begins (js/v9-held.js), so no dot
   waits at the corner of the stage; while the programs are hidden they are hidden too */
.h9-tools circle { fill: var(--b); }
.h9-tools:not(.aan) circle { visibility: hidden; }
.h9-tools.aan path { stroke-dashoffset: 0; }
.h9-tool { position: absolute; display: grid; justify-items: center; gap: 6px; width: 84px; margin-left: -42px; opacity: 0; transform: translateY(10px) scale(0.95); transition: opacity 0.4s var(--uit), transform 0.55s var(--zacht-uit); }
.h9-tool span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #FFFFFF; box-shadow: var(--e2); }
.h9-tool span img, .h9-tool span svg { width: 28px; height: 28px; }
.h9-tool span svg { color: var(--b-ink); }
.h9-tool small { font-size: 0.75rem; font-weight: 500; color: var(--ink); line-height: 1.2; text-align: center; white-space: nowrap; }
.h9-tools.aan .h9-tool { opacity: 1; transform: none; }
.h9-tools.aan .h9-tool:nth-of-type(2) { transition-delay: 0.06s; }
.h9-tools.aan .h9-tool:nth-of-type(3) { transition-delay: 0.12s; }
.h9-tools.aan .h9-tool:nth-of-type(4) { transition-delay: 0.18s; }
.h9-tools.aan .h9-tool:nth-of-type(5) { transition-delay: 0.24s; }
.h9-tools.aan .h9-tool:nth-of-type(6) { transition-delay: 0.3s; }
.h9-tools-noot { position: absolute; left: 24%; right: 0; bottom: 0.5%; margin: 0; text-align: center; font-size: 0.8125rem; line-height: 1.4; color: var(--s); opacity: 0; transition: opacity 0.4s var(--uit) 0.4s; }
.h9-tools-noot b { font-weight: 500; color: var(--b-ink); }
.h9-tools.aan .h9-tools-noot { opacity: 1; }
/* a narrow stage (a laptop of about 1024 px): the gsm steps aside while the programs are shown, the row and its note take
   the whole width (js/v9-held.js places the tiles on the same 600 px edge) */
@container (max-width: 599px) {
  .h9-podium[data-focus="tools"] .h9-gsm { opacity: 0; transform: translate(-16px, 10px) scale(0.96); }
  .h9-tools-noot { left: 0; }
}

/* small values of the drawing that the prototype set inline */
.h9 .ga-hoek--lb { left: -11px; top: -11px; } .h9 .ga-hoek--rb { right: -11px; top: -11px; }
.h9 .ga-hoek--lo { left: -11px; bottom: -11px; } .h9 .ga-hoek--ro { right: -11px; bottom: -11px; }
.h9 .blad-grijs .b80 { width: 80%; } .h9 .blad-grijs .b64 { width: 64%; } .h9 .blad-grijs .b72 { width: 72%; }
.h9 .pa-laat { color: var(--r); font-weight: 600; }
.h9 .gf-lijn .vul--vol { transform: scaleX(1); }
.h9 .h9-duim34 { --d: 34px; }
.h9 .mb-kol--gekocht { --c: var(--b); } .h9 .mb-kol--bevestigd { --c: var(--p); } .h9 .mb-kol--ontvangen { --c: #0E6A8C; }
.h9 .staaf .w92 { --w: 0.92; } .h9 .staaf .w64 { --w: 0.64; } .h9 .staaf .w45 { --w: 0.45; } .h9 .staaf .w30 { --w: 0.3; }

/* the two cards of the gsm and the computer scene on a phone (js/v9-held.js uses them below 760 px, where the screens of
   the devices are too small to read) */
.h9 .k-op { padding: 12px 16px 14px; }
.h9 .k-bestand { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--ink); }
.h9 .k-bestand i { font-style: normal; padding: 2px 6px; border-radius: 5px; background: #D1453B; color: #FFFFFF; font-size: 0.6875rem; font-weight: 700; }
.h9 .k-bestand span { min-width: 0; overflow-wrap: anywhere; font-family: var(--mono); font-size: 0.8125rem; }
.h9 .k-balk { margin-top: 10px; height: 5px; border-radius: 3px; background: var(--vlak); overflow: hidden; }
.h9 .k-balk i { display: block; height: 100%; background: var(--b); transform-origin: 0 50%; transform: scaleX(0); transition: transform 1.2s var(--zacht-uit); }
.h9 [data-kaart="op"].vol .k-balk i { transform: scaleX(1); }
.h9 .k-op small { display: block; margin-top: 8px; font-size: 0.875rem; line-height: 1.4; color: var(--s); }
.h9 [data-kaart="op"].klaar .k-op small { color: var(--g); font-weight: 600; }

/* ------------------------------------------------------------------ smaller screens */
/* up to 1400 px the stage stays inside the wrap: the card ends on the wrap edge, the panel 32 px past it, inside the screen */
@media (max-width: 1400px) {
  .h9-podium { margin-right: 0; }
  .h9-plek { right: 0; }
  .h9-vlak { right: -32px; }
}
/* a narrow computer or a tablet on its side: text and stage stay side by side, the text column narrower */
@media (min-width: 901px) and (max-width: 1100px) {
  .h9-raster { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 32px; }
  main .h9 h1 { font-size: 3.5rem; }
  .h9-plek { --z: 0.84; }
}
/* one column: the stage centred under the text, the panel as wide past the gsm as past the laptop. The stage starts low in
   the first screen (a tablet: about 560 of 1024 px), so the cards sit at the top of the stage, over the upper part of the
   laptop: the typed word and what it does are in the first screen together (the programs are a card here too,
   js/v9-held.js) */
@media (max-width: 900px) {
  .h9-raster { grid-template-columns: minmax(0, 1fr); }
  .h9-podium { justify-self: center; margin-right: 0; }
  .h9-vlak { left: -3%; right: -3%; }
  .h9-plek { top: 5%; bottom: auto; right: 0; transform-origin: 100% 0; }
  .h9-kaart { top: 0; bottom: auto; }
  /* the programs are a card here, not a row: the gsm stays on the stage */
  .h9-podium[data-focus="tools"] .h9-gsm { opacity: 1; transform: none; }
}
/* a phone: the note about the trial goes under the stage (the text block opens up into the grid for that) */
@media (max-width: 760px) {
  .h9-raster { row-gap: 18px; }
  .h9-tekst { display: contents; }
  .h9-podium { order: 1; }
  .h9-noot { order: 2; }
  /* "op de computer": the laptop comes forward and its screen zooms in on the top of the list, where the row of Lisa
     hoeksalon turns Bevestigd and Vertraagd; the gsm steps back, smaller, to the lower left edge (see-through it would mix
     with the rows behind it), and the upload card sits at the foot
     of the stage, under the list instead of over it */
  .h9-podium[data-scene="pc"] .h9-pc { transform: scale(1.167); transform-origin: 100% 0; }
  .h9-podium[data-scene="pc"] .h9-pc .pc9-in { transform: scale(calc(var(--k, 0.3) * 1.75)) translate(-90px, -100px); }
  .h9-podium[data-scene="pc"] .h9-gsm { transform: translateX(-11%) scale(0.72); transform-origin: 0 100%; }
  .h9-podium[data-scene="pc"] .h9-plek { top: auto; bottom: 1.5%; transform-origin: 100% 100%; }
  .h9-podium[data-scene="pc"] .h9-kaart { top: auto; bottom: 0; }
}
@media (max-width: 600px) {
  .h9 { padding-top: 28px; }
  main .h9 h1 { font-size: clamp(2.5rem, 11.2vw, 2.875rem); }
  .h9-knoppen { width: 100%; }
  .h9-knoppen .v9-knop { flex: 1 1 auto; }
  .h9-noot { font-size: 0.875rem; }
  /* the same row without the words "Werkt met": the logos and the link on one line */
  .h9-werkt { gap: 10px 12px; padding-top: 14px; }
  .h9-werkt-tekst { display: none; }
  /* the stage is as high as the gsm needs: no empty panel under the devices */
  .h9-podium { aspect-ratio: 700 / 660; margin-top: 4px; }
  /* the panel bleeds to the edges of the screen (the text keeps its gutter), with a hairline above and below only */
  .h9-vlak { inset: 3% calc(var(--goot) * -1) -1% calc(var(--goot) * -1); border-radius: 0; box-shadow: inset 0 1px 0 var(--lijn), inset 0 -1px 0 var(--lijn); }
  .h9-gsm { top: 22%; width: 31%; }
  .h9-pc { top: 9%; width: 88%; left: 12%; }
  .h9-podium[data-scene="pc"] .h9-pc { transform: scale(1.114); }
  /* both devices at the top of the stage, side by side */
  .h9-gsm { top: 8%; }
  /* the cards at reading size (nothing under 11 px): as wide as the stage instead of scaled down, low on the stage, so the
     top of the laptop (the list with Lisa hoeksalon on top) and of the gsm stay in view in every scene. With the gsm and
     with the computer the card stands beside the gsm, which is part of that scene */
  /* card always beside the gsm (left: 36 %) so no geometry change when the rotation starts → CLS = 0 */
  .h9-plek { --z: 1; top: auto; bottom: 2%; left: 36%; right: 0; width: auto; transform: none; }
  /* beside the gsm the card is narrow: the photo of the purchase is on the gsm already */
  .h9 [data-kaart="gsm"] .h9-duim34 { display: none; }
  .h9-kaart, .h9-podium[data-scene="pc"] .h9-kaart { top: auto; bottom: 0; }
  .h9 .k-kop { gap: 10px; padding: 9px 12px 8px; }
  .h9 .k-ico, .h9 .h9-duim34 { --d: 30px; width: 30px; height: 30px; }
  .h9 .k-kop b { font-size: 0.9375rem; }
  .h9 .velden { padding: 0 12px 4px; }
  .h9 .veld { padding: 6px 0; font-size: 0.8125rem; }
  .h9 .lijn4 { padding: 12px 8px 4px; }
  .h9 .lijn4::before, .h9 .lijn4 .vul { top: 19px; }
  .h9 .k-voet { margin: 6px 12px 10px; padding: 7px 10px; }
  .h9 .k-op { padding: 10px 12px 12px; }
  /* analyseren: the three largest suppliers */
  .h9 .k-tabs { padding: 9px 12px 0; }
  .h9 .staaf { gap: 6px; padding: 10px 12px 11px; }
  .h9 .staaf div { grid-template-columns: 88px 1fr 22px; }
  .h9 .staaf div:nth-child(4) { display: none; }
  /* the board: two columns (Gekocht and Bevestigd) of two purchases, the move of Lisa hoeksalon stays the story */
  .h9 .mb { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px 10px 10px; }
  .h9 .mb-kol { min-height: 0; padding: 6px 6px 1px; }
  .h9 .mb-kol h6 { margin-bottom: 5px; }
  .h9 .mb-kol--ontvangen, .h9 .mb[data-stap="0"] .mb-kol--gekocht > .mb-k:nth-child(4), .h9 .mb[data-stap="1"] .mb-kol--bevestigd > .mb-k:nth-child(4) { display: none; }
  .h9 .mb-k { grid-template-columns: 26px minmax(0, 1fr); min-height: 38px; font-size: 0.75rem; }
  .h9 .mb-k .duim { --d: 26px; }
  /* the programs: three by two, the note under them */
  .h9 .kp { gap: 4px; padding: 7px 10px 2px; }
  .h9 .kp span { gap: 3px; }
  .h9 .kp i { width: 28px; height: 28px; border-radius: 8px; }
  .h9 .kp img, .h9 .kp svg { width: 17px; height: 17px; }
  .h9 .kp small { font-size: 0.75rem; }
  .h9 .kp-noot { margin: 4px 10px 8px; padding: 4px 8px; font-size: 0.75rem; line-height: 1.35; }
}
/* a small phone (360): the two buttons stay on one row, so the stage and its card come up into the first screen */
@media (max-width: 380px) {
  .h9-knoppen { flex-wrap: nowrap; gap: 8px; }
  .h9-knoppen .v9-knop { padding-inline: 14px; gap: 6px; font-size: 0.9375rem; }
}
/* a large screen: the stage grows into the margin on the right (the text stays on the line of the logo), the hero takes
   more of the height */
@media (min-width: 1600px) {
  .h9 { min-height: min(860px, calc(100svh - var(--kop))); }
  .h9-podium { width: min(820px, 100% + (100vw - 1280px) / 2 - 40px); max-width: none; justify-self: start; margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .h9-cursor { display: none; }
}