/* furnipilot.com v9, the rest of the start page (design/ONTWERP-V9.md §3.2 to §3.4 and §3.7 to §3.10, prototype
   design/v9-proto/home.css): the ledger, the accounting mail, the line next to your system, the function rows, the index
   of all functions, for whom, the plans, the data and the questions. The close (.slot9), the tokens, the devices and the
   chips live in css/v9.css. Every rule is scoped to a class of this page. Only the line next to your system moves, once
   (js/v9-home.js), and only its blue line and dots: the words are always there. */

/* more room above a heading than below the content (§1.3); two white sections in a row share one gap */
main > .s9 { padding-bottom: calc(var(--sectie) * 0.64); }
.s9:not(.s9--vlak) + .s9:not(.s9--vlak) { padding-top: calc(var(--sectie) * 0.36); }
.gp9 + .s9:not(.s9--vlak) { padding-top: 0; }
/* a heading on the left and its intro on the right, sharing the bottom line */
.s9-kop--split { max-width: none; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); column-gap: clamp(40px, 6vw, 96px); align-items: end; }
.s9-kop--split > p:not(.v9-kicker) { max-width: 52ch; }

/* ------------------------------------------------ §3.2 the ledger: six pairs, today and with Furnipilot */
.lg9 { border-top: 1px solid var(--lijn-2); }
.lg9-kop, .lg9-rij { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(32px, 5vw, 72px); }
.lg9-kop { padding: 14px 0; border-bottom: 1px solid var(--lijn); font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s); }
.lg9-kop span { padding-left: 30px; }
.lg9-kop span:last-child { color: var(--b-ink); }
.lg9-rij { padding: 17px 0; border-bottom: 1px solid var(--lijn); }
.lg9-voor, .lg9-na { margin: 0; display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; align-items: start; }
.lg9-voor svg, .lg9-na svg { width: 18px; height: 18px; margin-top: 5px; }
.lg9-voor { color: var(--s); }
.lg9-voor svg { color: var(--s2); }
.lg9-na { color: var(--ink); }
.lg9-na svg { color: var(--b); }
.lg9-slot { white-space: nowrap; }
.lg9-slot .chip { margin-left: 4px; vertical-align: 1px; }

/* ------------------------------------------------ a row: text and a stage */
.rij9 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 6vw, 96px); align-items: center; }
.rij9--om { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.rij9--om .rij9-tekst { order: 2; }
.rij9--boek { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.rij9-tekst { display: grid; gap: 18px; justify-items: start; align-content: center; }
.rij9-tekst > p { max-width: 54ch; }
.rij9-tekst > .v9-link { margin-top: 2px; }
/* a long link to a function page wraps like text, with its arrow after the last word */
main a.v9-link:has(> .nw) { display: inline; line-height: 1.5; }
main a.v9-link > .nw svg { display: inline-block; margin-left: 6px; vertical-align: -3px; }
/* the rows follow each other at the rhythm of intro to content (§1.3, 40 to 64px), not at a section gap */
.rijen9 .v9-wrap { display: grid; gap: clamp(48px, 4.5vw, 64px); }
.rijen9 h3 { font-size: var(--t-rij); line-height: 1.15; letter-spacing: -0.025em; font-weight: 400; }
.rij9-klein { font-size: 0.9375rem; color: var(--s); }
.vink9 { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
/* a list item stays one block, so a word the page keeps whole (span.nw) never becomes a grid cell of its own */
.vink9 li { position: relative; padding-left: 30px; color: var(--t); }
.vink9 li::before { content: ""; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 50%; background: var(--g-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23177A45' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 12px no-repeat; }
.noot9 { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; max-width: 54ch; padding: 14px 16px; border-radius: var(--r2); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 0.9375rem; color: var(--t); }
.noot9 img { width: 22px; height: 22px; margin-top: 1px; }

/* the stage of a row: the surface of the stages (§1.2), a hairline, radius 28; what stands on it keeps its own frame */
/* the stage is as high as what stands on it, with a floor so a short card does not float in a thin strip */
.podium9 { position: relative; display: grid; place-items: center; min-height: clamp(340px, 26vw, 400px); padding: clamp(24px, 3.2vw, 48px); border-radius: var(--r4); background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); }
.podium9 > * { width: 100%; }
/* the gsm stands on the stage and runs past its bottom edge, as if it lies on the table */
.podium9--gsm { place-items: start center; height: clamp(400px, 30vw, 460px); min-height: 0; padding-bottom: 0; overflow: hidden; }
.rij9-gsm { --gsm-rand: 9px; width: min(76%, 290px); }
/* the same fiche of Lisa hoeksalon as in the hero, drawn live (parts in css/v9.css), standing still at Bevestigd */
.rij9-gsm .gf-lijn .vul--vol { transform: scaleX(1); transition: none; }
.podium9--mail .mail9 { max-width: 480px; }

/* §3.3 the mail to the accounting */
.mail9 { border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e3); overflow: hidden; }
.mail9-kop { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 18px 20px; border-bottom: 1px solid var(--lijn); line-height: 1.35; }
.mail9-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 11px; background: var(--tint-2); color: var(--b-ink); }
.mail9-ico svg { width: 20px; height: 20px; }
.mail9-kop b { display: block; color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.mail9-kop small { color: var(--s); font-size: 0.8125rem; }
.mail9 dl { margin: 0; padding: 6px 20px; display: grid; }
.mail9 dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--lijn); font-size: 0.875rem; line-height: 1.4; }
.mail9 dl div:last-child { border-bottom: 0; }
.mail9 dt { color: var(--s); }
.mail9 dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }
.mail9 dd.ok { color: var(--g); }
.mail9 ul { margin: 0; padding: 14px 20px 18px; list-style: none; display: grid; gap: 9px; border-top: 1px solid var(--lijn); background: var(--vlak); }
.mail9 li { display: flex; align-items: center; gap: 10px; min-width: 0; font-family: var(--mono); font-size: 0.8125rem; line-height: 1.4; color: var(--ink); }
.mail9 li i { flex: none; padding: 2px 5px; border-radius: 4px; background: #D1453B; color: #FFFFFF; font-family: var(--font); font-size: 0.6875rem; font-style: normal; font-weight: 700; }
.mail9 li.peppol { font-family: var(--font); color: var(--t); }
.mail9 li.peppol img { flex: none; width: 18px; height: 18px; }

/* the order confirmation next to the purchase */
.vg9 { max-width: 480px; border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e3); overflow: hidden; }
.vg9-kop { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--lijn); line-height: 1.35; }
.vg9-kop b { display: block; color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.vg9-kop small { color: var(--s); font-size: 0.8125rem; }
.vg9 table { width: 100%; border-collapse: collapse; font-size: 0.875rem; line-height: 1.4; }
.vg9 thead th { padding: 12px 20px 8px; text-align: left; font-weight: 500; font-size: 0.8125rem; color: var(--s); }
.vg9 tbody th, .vg9 td { padding: 12px 20px; border-top: 1px solid var(--lijn); text-align: left; color: var(--ink); font-variant-numeric: tabular-nums; }
.vg9 tbody th { font-weight: 400; color: var(--s); }
.vg9 tr.afw th, .vg9 tr.afw td { background: var(--r-tint); }
.vg9 tr.afw td:last-child { color: var(--r); font-weight: 600; }
.vg9-ok { margin-left: 6px; color: var(--g); font-weight: 700; }

/* the purchases with a signal */
.sig9 { max-width: 480px; margin: 0; padding: 4px 0; list-style: none; border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e3); }
.sig9 li { --d: 36px; display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 18px; border-bottom: 1px solid var(--lijn); line-height: 1.35; }
.sig9 li:last-child { border-bottom: 0; }
.sig9 b { display: block; color: var(--ink); font-weight: 600; font-size: 0.9375rem; }
.sig9 small { display: block; font-size: 0.8125rem; color: var(--s); }

/* the wide row: the analysis on a laptop */
.breed9 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 72px); align-items: center; }
.breed9-tekst { display: grid; gap: 18px; justify-items: start; }
.breed9-tekst > div { display: grid; gap: 18px; justify-items: start; }
.breed9-tekst p { max-width: 58ch; }
.podium9--breed { padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(36px, 4.5vw, 60px); }
.rij9-pc { max-width: 760px; }
.rij9-pc img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top left; }

/* ------------------------------------------------ §3.4 next to your system: one line of a purchase */
.lijn9 { position: relative; margin: 8px 0 0; padding-top: 90px; }
/* six equal columns; the stations sit in their centres, the brackets stand on the column borders */
.lijn9-haltes { position: relative; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.lijn9-haltes::before, .lijn9-haltes::after { content: ""; position: absolute; top: 10px; height: 2px; margin-top: -1px; border-radius: 2px; }
.lijn9-haltes::before { left: calc(100% / 12); right: calc(100% / 12); background: var(--lijn-2); }
/* the blue part is Furnipilot: from the fair to the invoice */
.lijn9-haltes::after { left: calc(100% / 12); width: calc(100% * 8 / 12); background: var(--b); transform-origin: 0 50%; transition: transform 1.4s var(--zacht-uit); }
/* one track as wide as the column, so a long word (vertegenwoordiger, Orderbevestiging) never pushes the dot off centre */
.lijn9-haltes li { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; gap: 14px; padding-inline: 6px; text-align: center; font-size: 0.9375rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.lijn9-haltes li i { position: relative; width: 20px; height: 20px; border-radius: 50%; background: var(--wit); box-shadow: inset 0 0 0 2px var(--b); }
.lijn9-haltes li i::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: var(--b); transition: transform 0.36s var(--uit); transition-delay: calc(0.12s + var(--i) * 0.26s); }
.lijn9-haltes li.eind i { background: var(--ink); box-shadow: none; }
.lijn9-haltes li.eind i::after { background: var(--wit); inset: 7px; }
.lijn9-m { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lijn9-haak { position: absolute; border: 1.5px solid; border-bottom: 0; border-radius: 12px 12px 0 0; transition: opacity 0.5s var(--uit); }
.lijn9-haak span { position: absolute; left: 50%; top: 0; transform: translate(-50%, -50%); padding: 0 12px; background: var(--vlak); font-size: 0.875rem; font-weight: 500; line-height: 1.4; white-space: nowrap; }
/* Both brackets use the column grid of the stations: each leg stands on the centre of a station (column k has its centre
   at (2k - 1) / 12 of the width; the 0.75px puts the middle of the 1.5px border on it). Both legs stop 8px above the dots
   (line at 100px: padding 90 + 10; dots from 90; legs end at 82). */
/* Furnipilot: from the first to the fifth station, drawn over the grey one where their left legs meet */
.lijn9-haak--fp { z-index: 1; top: 10px; left: calc(100% / 12 - 0.75px); width: calc(100% * 8 / 12 + 1.5px); height: 72px; border-color: var(--b); color: var(--b-ink); }
.lijn9-haak--fp span { font-weight: 600; }
/* nothing in any system yet: the first two stations, inside the blue one; its words stand above its line, from the left
   leg on, so they never hide the line nor cross the blue leg */
.lijn9-haak--leeg { top: 50px; left: calc(100% / 12 - 0.75px); width: calc(100% * 2 / 12 + 1.5px); height: 32px; border-style: dashed; border-color: var(--s2); color: var(--s); }
.lijn9-haak--leeg span { left: 14px; top: auto; bottom: 100%; transform: translateY(-4px); padding: 0; background: none; }
.lijn9-zin { max-width: 62ch; margin: 48px auto 0; text-align: center; font-size: var(--t-lead); color: var(--t); }
/* the line draws itself once when it comes into view (js/v9-home.js adds .wacht below the first screen) */
.lijn9.wacht .lijn9-haltes::after { transform: scaleX(0); }
.lijn9.wacht .lijn9-haltes li i::after { transform: scale(0); transition: none; }

/* §3.7 all functions, as an index: .index9 lives in css/v9.css (also on /functies and every function page) */

/* ------------------------------------------------ §3.8 for whom: one large photo, two smaller */
.wie9 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 28px 24px; }
.wie9 figure { margin: 0; display: grid; grid-template-rows: auto auto; gap: 12px; align-content: start; }
.wie9-groot { grid-row: 1 / span 2; grid-template-rows: minmax(0, 1fr) auto !important; align-content: stretch !important; }
.wie9-foto { position: relative; overflow: hidden; border-radius: var(--r3); background: var(--vlak); aspect-ratio: 2 / 1; }
.wie9-groot .wie9-foto { aspect-ratio: auto; min-height: 360px; }
.wie9-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wie9-groot img { object-position: 64% 50%; }
.wie9 figcaption { font-size: 0.9375rem; line-height: 1.5; color: var(--s); }
.wie9 figcaption b { display: block; margin-bottom: 2px; color: var(--ink); font-size: 1.0625rem; font-weight: 500; }
.niet9 { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--lijn); font-size: 0.9375rem; color: var(--s); }
.niet9 a { color: var(--b-ink); font-weight: 500; text-decoration: none; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .niet9 a:hover { text-decoration: underline; } }

/* ------------------------------------------------ §3.9 the plans */
.plannen9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan9 { display: grid; gap: 20px; align-content: start; padding: 28px 26px 30px; border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e2); }
/* side by side the three cards share their rows: name, price, size, button and list start at the same height in each card,
   and the cards end together (a browser without subgrid still gets equal cards from the stretch above) */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .plannen9 { grid-template-rows: repeat(5, auto); row-gap: 0; }
    .plan9 { grid-row: span 5; grid-template-rows: subgrid; row-gap: 20px; }
  }
}
.plan9--toonzaal { box-shadow: inset 0 0 0 1.5px var(--b), var(--e2); }
.plan9-kop { display: grid; gap: 4px; }
.plan9 h3 { font-size: 1.5rem; font-weight: 500; letter-spacing: -0.02em; }
.plan9-wie { font-size: 0.9375rem; color: var(--s); }
.plan9-prijs { display: grid; gap: 6px; padding-top: 18px; border-top: 1px solid var(--lijn); }
.plan9-prijs > p:first-child { display: flex; align-items: baseline; gap: 8px; color: var(--s); font-size: 0.9375rem; }
.plan9-prijs > p:first-child .bedrag { font-size: 2.75rem; line-height: 1; letter-spacing: -0.035em; color: var(--ink); }
.plan9-maand { font-size: 0.875rem; color: var(--s); }
/* the shared subgrid row is as tall as the tallest card's row: the chips and the list keep their own height at the top of it */
.plan9-groot { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; align-self: start; align-items: flex-start; align-content: flex-start; }
.plan9-groot li { padding: 4px 10px; border-radius: 99px; background: var(--vlak); box-shadow: inset 0 0 0 1px var(--lijn); font-size: 0.8125rem; font-weight: 500; line-height: 1.4; color: var(--ink); }
/* side by side on a narrow computer the two Keten chips no longer fit on one line: every card stacks its chips, so the
   shared row is the same height in all three and no card gets an empty band */
@media (min-width: 961px) and (max-width: 1240px) { .plan9-groot { flex-direction: column; } }
.plan9 .v9-knop { width: 100%; justify-content: center; }
.plan9-lijst { margin: 0; padding: 18px 0 0; border-top: 1px solid var(--lijn); list-style: none; display: grid; gap: 9px; align-content: start; font-size: 0.9375rem; line-height: 1.5; }
.plan9-lijst li { position: relative; padding-left: 26px; }
.plan9-lijst li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--tint-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232856BE' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 11px no-repeat; }
.plannen9-regel { max-width: 70ch; margin: 28px auto 0; text-align: center; font-size: 0.9375rem; color: var(--s); }
.plannen9-regel .v9-link { margin-left: 4px; }

/* ------------------------------------------------ §3.9 where the data is */
.data9 { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px clamp(40px, 6vw, 96px); align-items: start; }
.data9-tekst { display: grid; gap: 18px; }
.data9-tekst p { max-width: 54ch; }
.data9-lead { font-size: var(--t-lead); }
.data9-op { display: grid; gap: 14px; padding-top: 8px; }
/* the same label as the hub groups (.hb9 .hb9-groep); two classes, so the h3 weight of v9.css (.v8 main h3, 500) does not win */
.data9 .data9-op h3 { margin: 0; font-size: 0.8125rem; font-weight: 600; line-height: 1.4; letter-spacing: 0.04em; text-transform: uppercase; color: var(--s); }
.op9 { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--lijn-2); }
.op9 li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 14px; align-items: start; padding: 16px 2px; border-bottom: 1px solid var(--lijn); line-height: 1.4; }
.op9 img { width: 24px; height: 24px; }
.op9 b { display: block; color: var(--ink); font-weight: 500; font-size: 0.9375rem; }
.op9 small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--s); }
.data9-links { margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 0.9375rem; }

/* ------------------------------------------------ §3.9 the questions: one column, hairlines, a plus that turns into a minus */
.vr9 { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 32px clamp(40px, 6vw, 96px); align-items: start; }
.vr9-kop { display: grid; gap: 18px; }
.vr9-kop p { font-size: 0.9375rem; color: var(--s); max-width: 36ch; }
/* the mail link, and the chat button (the shared .tekstknop of site.css) while the chat is on (CHAT_AAN), look the same */
.vr9-kop p :is(a, button) { color: var(--b-ink); font-weight: 500; text-underline-offset: 3px; }
/* the list of questions itself (.faq9) lives in css/v9.css, it is on the function pages too */

/* ------------------------------------------------ tablet and phone */
@media (max-width: 1100px) {
  .vr9 { grid-template-columns: minmax(0, 1fr); }
  .vr9-kop p { max-width: 60ch; }
}
@media (max-width: 960px) {
  .rij9, .rij9--om, .rij9--boek, .breed9, .data9, .s9-kop--split { grid-template-columns: minmax(0, 1fr); }
  .rij9 { gap: 32px; }
  .rij9--om .rij9-tekst { order: 0; }
  .plannen9 { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-inline: auto; }
  .lijn9-haak span { font-size: 0.8125rem; }
}
/* a tablet still shows the line across: smaller station names, so the longest words stay inside their column */
@media (min-width: 761px) and (max-width: 960px) {
  .lijn9-haltes li { padding-inline: 2px; font-size: 0.875rem; }
}
@media (max-width: 760px) {
  /* the ledger has no intro: on a phone the two column heads stay as one line, grey for today, blue for Furnipilot */
  .lg9-kop { display: flex; flex-wrap: wrap; gap: 4px 24px; padding: 12px 0; }
  .lg9-kop span { padding-left: 0; }
  .lg9-rij { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 18px 0; }
  .lg9-voor { font-size: 0.9375rem; }
  .lg9-voor svg { margin-top: 3px; }

  .podium9 { min-height: 0; padding: 24px 12px; }
  .podium9--gsm { height: 400px; padding: 28px 20px 0; }
  .rij9-gsm { --gsm-rand: 8px; width: 240px; }
  /* the laptop foot is wider than the screen (css/v9.css): enough side room so it stays inside the rounded stage */
  .podium9--breed { padding: 22px 20px 24px; }
  .rij9-pc .pc9-voet { margin-inline: -5%; }
  /* on a phone the laptop shows the top left of the analysis at reading size: the totals and the month chart */
  .rij9-pc .pc9-beeld { aspect-ratio: 4 / 3; }
  .rij9-pc img { width: 180%; height: auto; max-width: none; }
  .sig9 li { --d: 32px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 12px 14px; }
  .vg9 table { font-size: 0.8125rem; }
  .vg9 thead th, .vg9 tbody th, .vg9 td { padding-inline: 10px; white-space: nowrap; }
  .vg9 thead th { white-space: normal; }
  .vg9 thead th { font-size: 0.75rem; }
  .mail9-kop { padding: 16px; gap: 10px; }
  .mail9 dl { padding: 4px 16px; }
  .mail9 ul { padding: 12px 16px 16px; }

  /* the line next to your system stands upright: Furnipilot is the blue bracket left of the first five stations */
  .lijn9 { padding: 34px 0 0; }
  .lijn9-haltes { margin-left: 30px; }
  #naast .s9-kop--midden { margin-inline: 0; text-align: left; justify-items: start; }
  .lijn9-haltes { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 58px; }
  .lijn9-haltes::before, .lijn9-haltes::after { top: 29px; left: 9px; right: auto; width: 2px; height: auto; margin: 0 0 0 0; }
  .lijn9-haltes::before { bottom: 29px; }
  .lijn9-haltes::after { height: calc(58px * 4); transform-origin: 50% 0; }
  .lijn9.wacht .lijn9-haltes::after { transform: scaleY(0); }
  .lijn9-haltes li { grid-template-columns: 20px minmax(0, 1fr); grid-template-rows: auto auto; justify-items: start; align-content: center; column-gap: 16px; row-gap: 0; padding: 0; text-align: left; }
  .lijn9-haltes li i { grid-row: 1 / span 2; align-self: center; }
  .lijn9-haltes li > span { align-self: end; }
  .lijn9-m { position: static; width: auto; height: auto; overflow: visible; clip: auto; grid-column: 2; align-self: start; font-size: 0.8125rem; font-weight: 400; color: var(--s); white-space: normal; }
  .lijn9-haltes li:not(.leeg) > span { grid-row: 1 / span 2; align-self: center; }
  .lijn9-haak--leeg { display: none; }
  .lijn9-haak--fp { top: 34px; left: 0; width: 14px; height: calc(58px * 5); border: 1.5px solid var(--b); border-right: 0; border-radius: 12px 0 0 12px; }
  .lijn9-haak--fp span { left: -1px; top: -12px; transform: translateY(-50%); padding: 0; background: none; }
  .lijn9-zin { margin-top: 28px; text-align: left; }

  .wie9 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 20px; }
  .wie9-groot { grid-row: auto; grid-template-rows: auto auto !important; }
  .wie9-groot .wie9-foto { aspect-ratio: 4 / 3; min-height: 0; }
  .wie9 figure:not(.wie9-groot) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto; gap: 16px; align-items: center; }
  .wie9 figure:not(.wie9-groot) .wie9-foto { aspect-ratio: 4 / 3; border-radius: var(--r2); }
  .niet9 { margin-top: 28px; }

  .plan9 { padding: 24px 22px 26px; }
  .op9 { grid-template-columns: minmax(0, 1fr); }
}
/* a small phone: the chips go under the names, so names and lines keep their width */
@media (max-width: 420px) {
  .sig9 li { grid-template-columns: 32px minmax(0, 1fr); row-gap: 6px; }
  .sig9 li .chip { grid-column: 2; justify-self: start; }
  .sig9 li .duim { grid-row: 1 / span 2; align-self: start; }
  .mail9-kop { grid-template-columns: 40px minmax(0, 1fr); row-gap: 8px; }
  .mail9-kop .chip { grid-column: 2; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .lijn9-haltes::after, .lijn9-haltes li i::after, .lijn9-haak { transition: none; }
}

/* ---- doc9: document screenshot + "Gelezen uit de orderbevestiging" card (row 2 of the function rows) */
.podium9--doc { place-items: start; height: clamp(340px, 26vw, 420px); padding: clamp(20px, 2.5vw, 36px); overflow: hidden; }
.doc9 { display: flex; gap: clamp(14px, 2vw, 22px); align-items: flex-start; }
.doc9 img { flex: none; width: clamp(100px, 11vw, 160px); border-radius: var(--r2); box-shadow: var(--e2); height: auto; }
.doc9-kaart { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.doc9-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.9375rem; font-weight: 600; color: var(--ink); }
.doc9-velden { margin: 0; border-radius: var(--r3); background: #FFFFFF; box-shadow: var(--e2); overflow: hidden; }
.doc9-velden > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 14px; border-bottom: 1px dashed var(--lijn); font-size: 0.875rem; }
.doc9-velden > div:last-child { border-bottom: 0; }
.doc9-velden dt { color: var(--s); }
.doc9-velden dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.doc9-veld--laat dd { color: var(--r); }
.doc9-veld--laat dd s { color: var(--s); font-weight: 400; font-size: 0.8125rem; margin-left: 4px; text-decoration: line-through; }
@media (max-width: 760px) {
  .podium9--doc { height: auto; padding: 24px 16px; }
  .doc9 img { width: clamp(80px, 22vw, 120px); }
}