/** Shopify CDN: Minification failed

Line 6892:39 Unexpected "("
Line 6904:35 Unexpected "("
Line 6909:42 Unexpected "("
Line 6961:41 Unexpected "("
Line 6966:33 Unexpected "("
Line 6967:40 Unexpected "("
Line 6968:38 Unexpected "("
Line 6973:33 Unexpected "("
Line 6974:35 Unexpected "("
Line 6975:37 Unexpected "("

**/
@keyframes ddOpen {
  from { opacity: 0; clip-path: inset(0 0 100% 0); }
  to   { opacity: 1; clip-path: inset(0 0 0% 0); }
}
.dropdown-top {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 24px;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #455E4F;
}
/* Dropdown-top: compare-link (left) and all-link (right). Inherits .link wipe
   canon. Adds Label-token typography (matches the column-titles below in the
   dropdown grid) + absolute positioning. */
.dropdown-compare-link, .dropdown-all-link {
  position: absolute;
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.dropdown-compare-link { left: -5px; }
.dropdown-all-link { right: -5px; }
.dropdown-col-sub {
  font-family: var(--mono);
  font-size: 16px;
  color: #99BEA7;
  line-height: 1.55;
  margin-bottom: 8px;
  max-width: 320px;
}
/* Wayfinding link canon — used in dropdowns, footer columns, body copy, header
   meta, tool cards. Sits on dark chrome by default; wipe-fill is Paper,
   hover-color is Pine. Every .link gets a ↗ glyph via ::after — no scope-based
   opt-outs, no class-level opt-outs (link-product is gone). The arrow signals
   "this navigates somewhere" everywhere consistently. */
.link { align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .link:hover { text-decoration: none; }
}
@keyframes themeSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.nav-mobile-cta { margin-top: 32px; align-self: flex-start; }
/* ───────── Responsive chrome ───────── */
/* BI v3 §15: "On tablet and phone the center nav-links hide and a hamburger appears." */
/* ---------- Page CSS (gededupliceerd over alle v3 concept-pages) ---------- */
/* ===== uit: 404 ===== */
/* De @font-face-regels staan één keer, verderop (uit: Homepage/style.css), mét font-display: swap.
   Hier stond een tweede set zonder font-display; die won, waardoor tekst onzichtbaar bleef tot de
   fonts binnen waren (op 4G ~2 s). Weggehaald 2026-09-28. */
:root { --border: #455E4F; }
html, body {
  min-height: 100vh;
  width: 100%;
  max-width: 100%;
  /* overflow-x: clip in plaats van hidden. `hidden` maakt van het element een
     scrollcontainer, en daardoor deed `.site-header { position: sticky }` niets:
     de header scrolde gewoon weg (gemeten 2026-08-08 op demo en thema, headerTop
     -821px bij 900px scroll). `clip` knipt wel af maar maakt GEEN scrollcontainer,
     dus sticky werkt en de paginabreedte blijft gelijk (480 blijft 480; met de
     overflow er helemaal af werd dat 506 doordat het off-canvas mobiele menu en de
     scroll-rail gingen meetellen). De `hidden` erboven blijft staan als terugval
     voor browsers zonder clip-ondersteuning (Safari < 16): die houden de huidige
     situatie, dus geen regressie. */
  overflow-x: hidden;
  overflow-x: clip;
}
html::-webkit-scrollbar { display: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; }
.container {
  width: 100%;
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 48px;
}
.scroll-mark.is-scrolling, .scroll-mark.is-hovering { right: 0; height: 44px; }
.scroll-rail.on-dark .scroll-mark { background: #F4F5F0; }
.band + .band {
  border-top: var(--rule-width) solid var(--rule);
}
.band--dark + .band--light, .band--light + .band--dark { border-top: none; }
/* Moss-overgangen: zelfde logica — de achtergrondwissel is de scheiding, geen lijn.
   (Moss-bands dragen ook .band--dark, maar dark+moss viel buiten de regel hierboven
   en kreeg een Sage-lijn: de About-us-inconsistentie van 2026-07-08.) */
.band + .band--moss, .band--moss + .band { border-top: none; }
.header-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-bottom: 16px;
}
.hero-lead { margin-top: 16px; }
.hero-cta { margin-top: 48px; }
.announcement-bar { padding-right: 24px; position: relative; }
/* GEEN transition op color hier: die hangt aan --pine/--pine-mute/--bg, en Chrome
   vuurt een transitie niet opnieuw af als een CSS-variabele verandert. Bij het
   omzetten naar dark mode bleef de tekst daardoor op de lichte waarde staan tot je
   herlaadde (Vince 2026-07-27). De wipe zelf animeert nog gewoon, dat is een
   transform; de tekstkleur klapt om, en dat zie je naast een wipe van 200ms niet.
   Zelfde afweging als bij de bestandstegel op Materiaal-data. */
.announcement-bar-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-right: 16px;
}
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-link:hover .announcement-bar-eyebrow { color: var(--bg); }
}
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-link:hover .badge-3d4m { color: var(--pine); background: var(--bg); }
}
.announcement-bar-link::after {
  content: '↗';
  margin-left: 4px;
  font-size: inherit;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-link:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-link:hover { color: var(--bg); }
}
/* GEEN transition op color hier: die hangt aan --pine/--pine-mute/--bg, en Chrome
   vuurt een transitie niet opnieuw af als een CSS-variabele verandert. Bij het
   omzetten naar dark mode bleef de tekst daardoor op de lichte waarde staan tot je
   herlaadde (Vince 2026-07-27). De wipe zelf animeert nog gewoon, dat is een
   transform; de tekstkleur klapt om, en dat zie je naast een wipe van 200ms niet.
   Zelfde afweging als bij de bestandstegel op Materiaal-data. */
.announcement-bar-close {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  color: var(--pine-mute);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
}
.announcement-bar-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.announcement-bar-close svg { width: 22px; height: 22px; stroke: currentColor; }
.announcement-bar-close:focus-visible::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-close:hover::before { transform: scaleY(1); }
}
.announcement-bar-close:focus-visible { color: var(--bg); outline: none; }
@media (hover: hover) and (pointer: fine) {
  .announcement-bar-close:hover { color: var(--bg); outline: none; }
}
html.announcement-dismissed .masthead-band { display: none; }
.jump-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.jump-list { display: flex; gap: 24px; flex-wrap: wrap; }
.jump-link { align-items: center; }
.jump-link::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .jump-link:hover::after { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .jump-link:hover { text-decoration: none; }
}
.section-eyebrow::before { content: attr(data-num); font-family: var(--mono); color: var(--pine-mute); }
.section-eyebrow:not([data-num])::before { display: none; }
.section-eyebrow.is-visible::after {
  animation: kf-eyebrow-line 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms forwards;
}
@keyframes kf-eyebrow-line {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
/* Suggestion card — single fuzzy-match for the typoed URL */
.suggestion-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 32px;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  text-decoration: none;
  color: var(--pine);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.suggestion-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .suggestion-card:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .suggestion-card:hover { color: var(--bg); }
}
.suggestion-content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.suggestion-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .suggestion-card:hover .suggestion-label { color: var(--bg); }
}
.suggestion-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.suggestion-arrow {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
}
/* Tried-URL inline label — plain mono inside reading copy */
.tried-url {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  word-break: break-all;
}
/* Buttons — ink-wipe */
.btn-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { color: var(--pine); }
}
/* Wipe = de band-kleur (var(--bg)), niet hardcoded Pine: op een Pine-band blijft 't
   Pine (ongewijzigd), op een Moss-band wordt 't Moss. Zo lost de fill overal op in de
   band en leest de hover als "vol -> Paper-outline". Was #1B2A1F, klopte alleen op Pine. */
.band--dark .btn-primary::before { background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .band--dark .btn-primary:hover { color: #F4F5F0; }
}
main .link::before,
main .metafield-rich_text_field a:not([class])::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
main .link::after {
  content: '↗';
  margin-left: 4px;
  font-size: inherit;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  main .link:hover::before,
  main .metafield-rich_text_field a:not([class]):hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  main .link:hover,
  main .metafield-rich_text_field a:not([class]):hover { color: var(--bg); }
}
/* Responsive */
.anim-fade-up.is-visible {
  animation: kf-fade-up 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--anim-delay, 0ms) forwards;
}
@keyframes kf-fade-up {
      from { opacity: 0; transform: translateY(32px); }
      to   { opacity: 1; transform: none; }
    }
.anim-clip-wipe { clip-path: inset(100% 0 0 0); will-change: clip-path; }
.anim-clip-wipe.is-visible {
  animation: kf-clip-wipe 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--anim-delay, 0ms) forwards;
}
@keyframes kf-clip-wipe {
      from { clip-path: inset(100% 0 0 0); }
      to   { clip-path: inset(0% 0 0 0); }
    }
.rv-inner { display: inline-block; transform: translateY(115%); }
.is-visible .rv-inner {
  animation: kf-rv-inner 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) var(--rv-d, 0ms) forwards;
}
@keyframes kf-rv-inner {
      from { transform: translateY(115%); }
      to   { transform: none; }
    }
/* Dark mode: every band background flips to Pine, so the color-contrast
       shortcut between adjacent dark/light bands disappears and they merge
       into one slab. Re-introduce the 1px Moss divider in that case. */
:root[data-theme="dark"] .band--dark + .band--light, :root[data-theme="dark"] .band--light + .band--dark {
  border-top: var(--rule-width) solid var(--rule);
}
/* Moss blijft óók in dark mode Moss (#455E4F op Pine = contrast intact), dus
   moss-overgangen houden geen lijn nodig; deze scope wint van de regel hierboven. */
:root[data-theme="dark"] .band + .band--moss, :root[data-theme="dark"] .band--moss + .band { border-top: none; }
/* Closing line (last reading paragraph, with link) */
.closing-line {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
}
/* Responsive */
/* Dark mode: rule rendert in Moss (--rule) i.p.v. de geïnverteerde --pine
       (Paper), zodat 'ie visueel matcht met de andere dividers op de pagina. */
.announcement-bar {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  padding: 12px 0;
  /* na de shorthand, anders reset die de §18 close-button-vrijruimte */
  padding-right: 24px;
}
/* State-switch band — preview-only toggle between signed-out / signed-in
       (Shopify Liquid replaces with {% if customer %}
; this strip is dev-preview). */
/* Bands (§19): band-base ZONDER padding, hélemaal bovenaan de band-familie —
   elke band-variant (.state-band, .usp-band, .legal-shell-band, .section,
   .hero-band, .jump-band, ...) staat erná en wint dus op bron-volgorde. */
.band { padding: 0; }
.state-band { padding: 32px 0; }
.state-bar {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.state-list {
  list-style: none;
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.state-link {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
  padding: 8px 16px;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .state-link:hover { color: var(--bg); background-color: var(--pine); border-color: var(--pine); }
}
.state-link.is-active { color: var(--bg); background-color: var(--pine); border-color: var(--pine); }
.section[hidden] { display: none; }
.reading p strong { color: var(--pine); font-weight: 600; }
.btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover::before { transform: scaleY(1); }
}
/* Standalone link with arrow (§11 Link pattern, wipe-on-hover) */
.link { font-weight: 400; }
/* ...maar niet als de link zélf een label is. Op de artikelpagina staat de bloglink in de
   hero-eyebrow, en die kwam op 400 uit terwijl de rest van de eyebrow 600 is: hetzelfde
   woord in twee gewichten naast elkaar (Vince 2026-08-10). De eyebrow geeft de link al zijn
   hoofdletters en spatiering mee; het gewicht hoorde daar gewoon bij. inherit i.p.v. een
   getal, zodat de link automatisch klopt als de labelmaat ooit verandert. */
.header-eyebrow .link,
.section-eyebrow .link { font-weight: inherit; }
.link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.link::after {
  content: '↗';
  margin-left: 4px;
  font-size: inherit;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .link:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .link:hover { color: var(--bg); }
}
/* Tile-grid — generic compartment grid (mimics bigstat-grid pattern) */
.tile-grid { margin-top: 48px; border: var(--rule-width) solid var(--rule); }
.tile-grid--2 { grid-template-columns: 1fr 1fr; }
.tile-grid--3 { grid-template-columns: 1fr 1fr 1fr; }
.tile-cell {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.tile-grid--2 .tile-cell + .tile-cell, .tile-grid--3 .tile-cell + .tile-cell {
  border-left: var(--rule-width) solid var(--rule);
}
.tile-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--pine);
}
.tile-lead {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
}
.tile-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* Benefits list — used in access tiles */
.benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.benefit {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.benefit-icon { margin-top: 2px; }
/* Quick-card — interactive cell with hover-wipe (compartment vocab) */
.quick-card {
  position: relative;
  isolation: isolate;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  color: var(--pine);
  cursor: pointer;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .quick-card:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .quick-card:hover, .quick-card:hover .quick-card-desc, .quick-card:hover .quick-card-arrow, .quick-card:hover .quick-card-icon { color: var(--bg); }
}
.quick-card-icon {
  color: var(--pine);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-card-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
.quick-card-desc {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.quick-card-arrow {
  margin-top: auto;
  color: var(--pine-mute);
  display: flex;
  align-items: center;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Welcome row */
.welcome-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.welcome-row .section-title { margin-bottom: 0; max-width: none; }
/* Info-list — key/value rows for account details */
.info-list { display: flex; flex-direction: column; gap: 0; }
.info-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-bottom: var(--rule-width) solid var(--rule);
}
.info-row:first-child { padding-top: 0; }
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-row-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.info-row-value {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
/* Address block */
.address-block {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.address-name { font-weight: 600; color: var(--pine); }
/* Data table */
.table-scroll { margin-top: 48px; }
.data-table th { vertical-align: bottom; }
.data-table tr:last-child td { border-bottom: none; }
.data-table--workspace tbody tr {
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.order-id { font-weight: 600; color: var(--pine); font-variant-numeric: tabular-nums; }
.order-total { font-variant-numeric: tabular-nums; color: var(--pine); }
.order-table-min { min-width: 880px; }
.col-order { min-width: 140px; }
.col-date { min-width: 120px; }
.col-items { min-width: 280px; }
.col-total { min-width: 120px; }
.col-status { min-width: 140px; }
.col-action { min-width: 80px; }
.tag.tag-pine { color: var(--pine); border-color: var(--pine); }
.group-actions { margin-top: 32px; }
@media (max-width: 1023px) {
  .tile-grid--3 { grid-template-columns: 1fr 1fr; }
  .tile-grid--3 .tile-cell + .tile-cell { border-left: none; }
  .tile-grid--3 .tile-cell:nth-child(2n) {
    border-left: var(--rule-width) solid var(--rule);
  }
  .tile-grid--3 .tile-cell:nth-child(n+3) {
    border-top: var(--rule-width) solid var(--rule);
  }
  .state-bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .state-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .info-row { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 767px) {
  .tile-grid--2, .tile-grid--3 { grid-template-columns: 1fr; }
  .tile-grid--2 .tile-cell + .tile-cell, .tile-grid--3 .tile-cell + .tile-cell {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .tile-grid--3 .tile-cell:nth-child(2n) { border-left: none; }
  .welcome-row { flex-direction: column; align-items: flex-start; gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-mark { transition: none !important; }
}
.section-eyebrow::after {
  content: '';
  flex: 0 0 32px;
  height: 1px;
  background: var(--pine-mute);
  opacity: 1;
  transform: scaleX(0);
  transform-origin: left;
}
.reading p strong, .reading p b { color: var(--pine); font-weight: 600; }
.data-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}
/* Volgt de datablok-kop direct op een split, dan moet 'ie daar los van komen. Sinds
   de eigenschappen-tabel onder de split staat in plaats van ernaast (2026-07-27)
   plakte "Physical properties" tegen de laatste regel van de lopende tekst, want de
   kop draagt zelf geen bovenmarge; die had 'ie ook niet nodig toen 'ie bovenaan een
   kolom stond. 48px is de maat die deze pagina al gebruikt voor een blok onder de
   leestekst (het downloads-blok in sectie 03).

   .spec-grid staat er sinds 2026-07-29 bij: toen de sectiekop verdween droeg de grid
   zelf die plek, en daarmee viel deze regel stil en plakte "Physical properties" weer
   tegen de lopende tekst. Dezelfde plek, dezelfde 48px. */
/* .no-visual is dezelfde rij zonder figuur (PDP-materiaalsectie): één kolom op de
   880px-leesmaat i.p.v. twee kolommen. Het sectie-ritme hangt hieraan, dus die
   variant hoort er 1-op-1 bij; stond 'ie er niet, dan schoof de kop van de
   eigenschappen-tabel strak tegen de copy (2026-08-04). */
.split + .data-block-head,
.split + .spec-grid,
.no-visual + .data-block-head,
.no-visual + .spec-grid { margin-top: 48px; }
.data-block-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.data-block-sub {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-top: 4px;
}
.data-block-note {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--pine-mute);
  text-transform: uppercase;
}
/* ───────── In-use lifestyle grid ───────── */
.in-use-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 64px;
  border: var(--rule-width) solid var(--rule);
}
.in-use-cell { aspect-ratio: 4 / 5; overflow: hidden; position: relative; }
.in-use-cell + .in-use-cell {
  border-left: var(--rule-width) solid var(--rule);
}
.in-use-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.in-use-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  background: var(--bg);
  border-top: var(--rule-width) solid var(--rule);
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
}
.data-table th {
  text-align: left;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--pine-mute);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 16px 16px 16px 0;
  border-bottom: 1px solid var(--border);
}
.data-table td { vertical-align: top; }
.data-table td:first-child { font-family: 'Mona Sans', sans-serif; font-size: 16px; }
/* Groepsrij in een eigenschappen-tabel (2026-07-27). Sinds de tabel de volledige
   datasheet toont in plaats van vier regels, deelt 'ie zich op in Physical,
   Mechanical, Thermal en Electrical; zonder die koppen wordt het bij veertien
   regels een muur. Neemt de behandeling van de tabelkop hierboven over, want dat
   ís wat het is: een kop een niveau lager. Geen nieuwe waarden, alleen de
   bovenrand die de groep van de vorige losmaakt, en de eerste groep zonder rand
   omdat de tabelkop daar al de scheiding is. */
.data-table tr.spec-group td {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--pine-mute);
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* Links dezelfde 16px als de datacellen eronder, niet de 0 van de tabelkop: de
     groepsnaam staat ín de tabel en moet met de eerste kolom meelopen, terwijl de
     tabelkop tegen de rand van het compartiment staat. Zonder dit sprong de
     groepsnaam 16px naar links weg onder z'n eigen kolom (Vince 2026-07-27). */
  padding: 32px 16px 8px 16px;
  border-bottom: 1px solid var(--border);
}
.data-table tbody tr.spec-group:first-child td { padding-top: 16px; }
.hex-copy {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--pine-mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .hex-copy:hover { text-decoration-color: var(--pine); }
}
.hex-copy.copied { color: var(--pine-mute); text-decoration-color: var(--pine-mute); }
.logo-sample-wrap { display: inline-block; padding: 8px 16px; border-radius: var(--radius); }
.logo-svg { display: block; width: 136px; height: 40px; }
.icon-svg { display: block; width: 40px; height: 40px; }
#logo .container { position: relative; }
.logo-download-all {
  position: absolute;
  top: 0;
  right: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  background: transparent;
  border: 1px solid var(--pine);
  border-radius: var(--radius);
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .logo-download-all:hover { background: var(--pine); color: var(--bg); }
}
.logo-download-all svg { width: 16px; height: 16px; flex-shrink: 0; }
/* Live dropdown demo (mirrors the dark nav-dropdown panel context) */
.dropdown-demo-dark {
  background: var(--pine);
  color: var(--bg);
  padding: 32px;
  border-radius: var(--radius);
  margin-top: 16px;
}
.folio-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  font-variant-numeric: tabular-nums;
}
/* §20 demo: with / without grain comparison */
.grain-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: var(--rule-width) solid var(--rule);
  margin-top: 32px;
}
.grain-demo-panel {
  background: var(--bg);
  padding: 80px 24px 24px;
  min-height: 160px;
  display: flex;
  align-items: flex-end;
}
.grain-demo-panel + .grain-demo-panel {
  border-left: var(--rule-width) solid var(--rule);
}
.grain-demo-panel--off { position: relative; z-index: 10000; }
.grain-demo-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.folio .container { padding-top: 12px; padding-bottom: 12px; }
.back-to-hub {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  text-decoration: none;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  position: relative;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.back-to-hub::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .back-to-hub:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .back-to-hub:hover { color: var(--bg); }
}
.back-to-hub-icon { width: 13px; height: 13px; flex-shrink: 0; }
/* ───────── Status badges — 5 product status labels ───────── */
.status-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 16px;
}
/* ───────── Product group list (comma · separated) ───────── */
.product-group-list {
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  margin-top: 16px;
}
/* ───────── USP bar — 3 trust signals on a dark band ───────── */
.usp-bar-demo {
  display: flex;
  align-items: stretch;
  background: var(--pine);
  color: var(--bg);
  border-radius: var(--radius);
  margin-top: 16px;
  padding: 16px 0;
}
.usp-cell {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 8px 16px;
  min-width: 0;
}
.usp-icon {
  width: 22px;
  height: 22px;
  stroke: #99BEA7;
  flex-shrink: 0;
}
.usp-sub {
  font-family: var(--mono);
  font-size: 16px;
  color: #99BEA7;
  line-height: 1.4;
}
.usp-divider {
  width: 1px;
  align-self: center;
  height: 32px;
  background: #455E4F;
  flex-shrink: 0;
}
/* ───────── Brand statement — 3 lengths with side labels ───────── */
.brand-statement-stack {
  display: flex;
  flex-direction: column;
  margin-top: 16px;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
}
.brand-statement-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: end;
  padding: 24px;
  border-bottom: var(--rule-width) solid var(--rule);
}
.brand-statement-row:last-child { border-bottom: none; }
.brand-statement-copy { min-width: 0; }
.brand-statement-h {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.brand-statement-p {
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
  max-width: 660px;
}
.brand-statement-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  white-space: nowrap;
}
.brand-statement-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.brand-statement-count { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
/* ───────── Social — profile avatars, favicons, bio cards ───────── */
.social-avatar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}
.social-avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-avatar svg { width: 40px; height: auto; display: block; }
.social-avatar--round { border-radius: 50%; }
.social-favicon-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: flex-end;
  margin-top: 16px;
  margin-bottom: 16px;
}
.social-favicon-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.social-favicon {
  background: var(--pine);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: var(--radius);
}
.social-favicon svg { display: block; }
.social-favicon--16 { width: 16px; height: 16px; }
.social-favicon--16 svg { width: 10px; }
.social-favicon--32 { width: 32px; height: 32px; }
.social-favicon--32 svg { width: 20px; }
.social-favicon--64 { width: 64px; height: 64px; }
.social-favicon--64 svg { width: 36px; }
.social-favicon-label { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.social-bio-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.social-bio {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
}
.social-bio-platform {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.social-bio-header { display: flex; align-items: center; gap: 8px; }
.social-bio-avatar {
  width: 40px;
  height: 40px;
  background: var(--pine);
  color: var(--bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.social-bio-avatar svg { width: 22px; height: auto; display: block; }
.social-bio-meta { display: flex; flex-direction: column; }
.social-bio-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  line-height: 1.4;
}
.social-bio-handle {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  line-height: 1.4;
}
.social-bio-text {
  font-size: 16px;
  font-weight: 400;
  color: var(--pine);
  line-height: 1.55;
}
/* Invisible hit-target extension — makes the mark easier to hover/grab
       without changing its visual size. Extends 24px above/below and 12px
       to the left of the mark; right edge flush with the mark's. */
.scroll-mark::before {
  content: '';
  position: absolute;
  top: -24px;
  right: -6px;
  bottom: -24px;
  left: -12px;
}
/* ───────── Components — Pill, Button, Link ───────── */
.pill { font-family: inherit; }
.pill::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .pill:hover { border-color: var(--pine); color: var(--bg); }
}
.pill.active { background: var(--pine); border-color: var(--pine); color: var(--bg); }
.tag-group { display: flex; flex-wrap: wrap; gap: 8px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover::before, .btn-secondary:hover::before { transform: scaleY(1); }
}
.btn-primary::before { background: var(--bg); }
.btn-secondary::before { background: var(--pine); }
/* Link — single canon. Wipe-on-hover + automatic ↗ affordance.
       Every .link krijgt een ↗ glyph via ::after. Geen uitzonderingen — pijl
       overal waar .link voorkomt (dropdowns, footer, body, header meta,
       tool-card actions, externals). De oude .link-product opt-out is
       vervallen; filament-namen in de dropdown krijgen ook gewoon de pijl. */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 16px;
  color: inherit;
  position: relative;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark-band override — wipe Paper, hover text Pine */
.band--dark .link::before { background: var(--pine); }
@media (hover: hover) and (pointer: fine) {
  .band--dark .link:hover { color: var(--bg); }
}
.component-demo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  padding: 16px 0;
}
/* ───────── Big-stat live demo ───────── */
.bigstat-demo-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 16px;
  border: var(--rule-width) solid var(--rule);
}
.bigstat + .bigstat {
  border-left: var(--rule-width) solid var(--rule);
}
.bigstat-label { display: inline-flex; align-items: center; gap: 8px; }
.bigstat-value { display: flex; align-items: baseline; gap: 8px; }
.bigstat-unit {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--pine-mute);
  letter-spacing: 0;
}
.bigstat-caption {
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
  max-width: 280px;
}
/* ───────── Price scramble live demo (mirrors PDP) ───────── */
.price-demo {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 16px;
}
.variant { display: flex; flex-direction: column; gap: 8px; }
.variant-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.variant-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.price-block { display: flex; align-items: baseline; gap: 16px; }
.price-value {
  font-family: var(--mono);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pine);
}
.price-meta { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
/* ───────── Marquee live demo (mirrors PDP) ───────── */
.marquee-outer { margin-top: 16px; }
.marquee-track {
  display: flex;
  align-items: center;
  gap: 80px;
  width: max-content;
  animation: marquee 44s linear infinite;
}
@media (hover: hover) and (pointer: fine) {
  .marquee-outer:hover .marquee-track { animation-play-state: paused; }
}
.partner-logo {
  color: var(--pine-mute);
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.partner-logo svg { height: 100%; width: auto; }
@media (hover: hover) and (pointer: fine) {
  .partner-logo:hover { color: var(--pine); }
}
@keyframes marquee {
      from { transform: translateX(0); }
      to   { transform: translateX(-50%); }
    }
/* ───────── Visual + caption live demo ───────── */
.visual-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}
.visual-frame { aspect-ratio: 4 / 5; }
.visual-frame--landscape { aspect-ratio: 16 / 10; }
.visual-caption { padding-left: 16px; border-left: 1.5px solid var(--pine-mute); }
/* ───────── Workspace / hub component previews (§44-49) ───────── */
.bi3-demo-canvas { margin-top: 32px; padding: 48px; border: 1px solid var(--rule); }
.bi3-demo-canvas--dark {
  background: #1B2A1F;
  color: #F4F5F0;
  --bg: #1B2A1F;
  --pine: #F4F5F0;
  --pine-mute: #99BEA7;
  --rule: #455E4F;
  border: none;
}
.bi3-demo-canvas--grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: start;
}
.bi3-demo-canvas--grid > .demo-main { min-width: 0; }
.bi3-demo-canvas--grid > .demo-logbook-col { min-width: 0; position: relative; align-self: stretch; }
.bi3-demo-canvas--grid .logbook { position: absolute; inset: 0; }
/* Page header pattern (§44) */
.header { margin-bottom: 0; }
.header-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.018em;
  color: var(--pine);
  line-height: 1.08;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.header-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.header-meta .user-email {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  white-space: nowrap;
}
/* .link inherits the global canon (§11). Header-meta only adds nowrap. */
.header-meta .link { white-space: nowrap; }
/* Group container (§45) — logical wrapper with Label-bar, no border (compartment lives on inner .tool-grid) */
.group { margin-bottom: 64px; }
.group:last-child { margin-bottom: 0; }
.group-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
}
.group-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.group-brand-tag {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.group-actions {
  margin-left: auto;
  display: flex;
  gap: 16px;
  align-items: center;
}
.group--collapsible > summary { list-style: none; cursor: pointer; outline: none; }
.group--collapsible > summary::-webkit-details-marker { display: none; }
.group--collapsible:not([open]) > summary { margin-bottom: 0; }
.group-chevron {
  color: var(--pine-mute);
  display: flex;
  margin-left: auto;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.group--collapsible[open] .group-chevron { transform: rotate(180deg); }
/* Tool card (§46) — v3 compartment vocabulary: 1px Moss border per cell, overlapped via negative margins so the outer rule only touches real cards (incomplete last row stays clean) */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.tool-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  cursor: pointer;
  color: var(--pine);
  border: var(--rule-width) solid var(--rule);
  margin-right: calc(var(--rule-width) * -1);
  margin-bottom: calc(var(--rule-width) * -1);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover { color: var(--bg); }
}
.tool-card-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: inherit;
  overflow-wrap: anywhere;
}
.tool-card-desc {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
  overflow-wrap: anywhere;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-card-desc { color: var(--bg); }
}
.tool-card-mtime {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  pointer-events: none;
  margin-top: auto;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-card-mtime { color: var(--bg); }
}
.tool-card-title-lock { color: inherit; margin-left: 8px; vertical-align: middle; }
/* Locked variant — same compartment, no fill-wipe, no hover color-cascade */
.tool-card--locked { cursor: not-allowed; }
.tool-card--locked::before { display: none; }
.tool-card--locked .tool-card-title { color: var(--pine-mute); }
.tool-card--locked .tool-card-desc { color: var(--pine-mute); }
@media (hover: hover) and (pointer: fine) {
  .tool-card--locked:hover { color: var(--pine-mute); }
}
@media (hover: hover) and (pointer: fine) {
  .tool-card--locked:hover .tool-card-desc { color: var(--pine-mute); }
}
@media (hover: hover) and (pointer: fine) {
  .tool-card--locked:hover .tool-card-brand-icon { color: var(--pine); }
}
.tool-card-lock {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--pine-mute);
  display: flex;
}
/* Brand-identity variant — palette icon marker top-left */
.tool-card-brand-icon {
  position: absolute;
  top: 24px;
  left: 24px;
  color: var(--pine);
  display: flex;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card:hover .tool-card-brand-icon { color: var(--bg); }
}
.tool-card--brand-identity .tool-card-title, .tool-card--brand-identity .tool-card-desc { padding-left: 32px; }
/* Expandable variant — no fill-wipe (would conflict with [open] state) */
.tool-card--expandable { padding: 0; }
.tool-card--expandable::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  .tool-card--expandable:hover { color: var(--pine); }
}
@media (hover: hover) and (pointer: fine) {
  .tool-card--expandable:hover .tool-card-desc, .tool-card--expandable:hover .tool-card-mtime, .tool-card--expandable:hover .tool-card-brand-icon { color: var(--pine-mute); }
}
.tool-card--expandable > summary {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px;
  cursor: pointer;
  outline: none;
  position: relative;
}
.tool-card--expandable > summary::-webkit-details-marker { display: none; }
.tool-card-chevron {
  position: absolute;
  top: 24px;
  right: 24px;
  color: var(--pine-mute);
  display: flex;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tool-card--expandable[open] .tool-card-chevron { transform: rotate(180deg); }
.tool-card-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px 24px;
  margin: 0;
}
/* .tool-card-links .link inherits §11 .link canon. Only Moss-mute default colour kept. */
.tool-card-links .link { color: var(--pine-mute); }
/* Archive variant — compact pill-row, inherits compartment but smaller padding + Meta title */
.tool-grid--archive {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border: var(--rule-width) solid var(--rule);
}
.tool-grid--archive > .tool-card--archive + .tool-card--archive {
  border-left: var(--rule-width) solid var(--rule);
}
.tool-card--archive {
  padding: 16px 24px;
  min-height: 0;
  flex: 0 0 auto;
  gap: 0;
}
.tool-card--archive .tool-card-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tool-card--archive:hover .tool-card-title { color: var(--bg); }
}
/* Logbook (§47) — v3 compartment vocabulary, no fill, 1px Moss dividers */
.logbook {
  border: var(--rule-width) solid var(--rule);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.logbook-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  padding: 16px 32px;
  border-bottom: var(--rule-width) solid var(--rule);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.logbook-progress { flex-shrink: 0; display: block; transform: rotate(-90deg); }
.logbook-progress-bg { fill: none; stroke: var(--pine-mute); stroke-width: 1.5; }
.logbook-progress-arc {
  fill: none;
  stroke: var(--pine);
  stroke-width: 1.5;
  stroke-dasharray: 31.4159;
  stroke-dashoffset: 31.4159;
  animation: logbook-poll 30s linear infinite;
}
@keyframes logbook-poll {
      from { stroke-dashoffset: 31.4159; }
      to   { stroke-dashoffset: 0; }
    }
.logbook-list {
  list-style: none;
  margin: 0;
  overflow-y: auto;
  padding: 0;
  flex: 1;
  min-height: 0;
}
.logbook-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-bottom: var(--rule-width) solid var(--rule);
}
.logbook-item:last-child { border-bottom: none; }
.logbook-ts {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  white-space: nowrap;
  flex-shrink: 0;
}
.logbook-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: transparent;
  border: var(--rule-width) solid var(--pine-mute);
  color: var(--pine-mute);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Tag state-mapping matches §06 Status badges outline/fill philosophy */
.logbook-item--login .logbook-tag { border-color: var(--pine-mute); color: var(--pine-mute); }
.logbook-item--commit .logbook-tag { border-color: var(--pine); color: var(--pine); }
.logbook-item--outage .logbook-tag { border-color: var(--pine); color: var(--bg); background: var(--pine); }
.logbook-body {
  color: var(--pine);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.logbook-device {
  color: var(--pine-mute);
  font-family: var(--mono);
  font-size: 16px;
  margin-left: 8px;
}
/* Live checkers + Status indicator (§48 + §49) — v3 compartment vocabulary */
.check-list { border: var(--rule-width) solid var(--rule); display: flex; flex-direction: column; }
.check-featured {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 32px;
}
.check-featured-top { display: flex; align-items: center; gap: 16px; }
.check-divider { height: var(--rule-width); background: var(--rule); }
.check-row { display: grid; grid-template-columns: 1fr 1fr; }
.check-item {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
  min-width: 0;
}
.check-row > .check-item + .check-item {
  border-left: var(--rule-width) solid var(--rule);
}
/* Status badge — hub workspace states (loading/live/issue/down), distinct from §06 product badges, matches §06 outline/fill vocabulary */
.check-list .status-badge, .bi3-status-row .status-badge {
  border: var(--rule-width) solid var(--pine-mute);
  color: var(--pine-mute);
  background: transparent;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.check-featured[data-state="live"] .status-badge, .check-item[data-state="live"] .status-badge, .bi3-status-row [data-state="live"] .status-badge { color: var(--pine-mute); border-color: var(--pine-mute); }
.check-featured[data-state="issue"] .status-badge, .check-item[data-state="issue"] .status-badge, .bi3-status-row [data-state="issue"] .status-badge { color: var(--pine); border-color: var(--pine); }
.check-featured[data-state="down"] .status-badge, .check-item[data-state="down"] .status-badge, .bi3-status-row [data-state="down"] .status-badge { color: var(--bg); border-color: var(--pine); background: var(--pine); }
.status-text-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.check-item .status-text-wrap + .status-latency { margin-left: auto; }
.status-note {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--pine-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.status-text {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
}
.status-latency {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-left: auto;
}
.check-featured .status-latency { margin-left: 0; }
.uptime-ribbon { display: flex; align-items: center; gap: 16px; }
.uptime-period {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  min-width: 32px;
  text-align: right;
}
.uptime-percent {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  min-width: 48px;
  text-align: right;
}
.uptime-bars {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(24, minmax(0, 1fr));
  border: var(--rule-width) solid var(--rule);
}
.uptime-bar { height: 16px; background: transparent; position: relative; }
.uptime-bar + .uptime-bar {
  border-left: var(--rule-width) solid var(--rule);
}
.uptime-bar[data-state="live"] { background: var(--pine-mute); }
.uptime-bar[data-state="partial"] {
  background: radial-gradient(circle at center, var(--bg) 0 2.5px, transparent 3px),
        var(--pine-mute);
}
.uptime-bar[data-state="down"] { background: var(--pine); }
@media (hover: hover) and (pointer: fine) {
  .uptime-bar[data-tip]:hover::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--pine);
    color: var(--bg);
    padding: 4px 10px;
    border: var(--rule-width) solid var(--rule);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: 16px;
    white-space: nowrap;
    z-index: 10;
    pointer-events: none;
  }
}
/* Status indicator demo row (§49) — 4 states inside the compartment, Paper bg */
.bi3-status-row {
  border: var(--rule-width) solid var(--rule);
  padding: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.bi3-status-row > [data-state] { display: inline-flex; align-items: center; gap: 16px; }
.field-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.input, .select, .textarea {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  padding: 16px;
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input:focus, .select:focus, .textarea:focus { border-color: var(--pine); }
.input::placeholder, .textarea::placeholder { color: var(--pine-mute); }
.input:disabled, .select:disabled, .textarea:disabled { color: var(--pine-mute); cursor: not-allowed; }
.search:focus-within { border-color: var(--pine); }
.search-icon { color: var(--pine-mute); display: flex; }
.search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  min-width: 0;
  padding: 0;
}
.search-input::placeholder { color: var(--pine-mute); }
/* Checkbox + radio — appearance:none, custom 16px box */
.checkbox, .radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: var(--rule-width) solid var(--rule);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.radio { border-radius: 50%; }
.checkbox:focus, .radio:focus { border-color: var(--pine); }
.checkbox:checked, .radio:checked { background: var(--pine); border-color: var(--pine); }
.checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 2px;
  width: 5px;
  height: 8px;
  border-right: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  transform: rotate(45deg);
}
.radio:checked::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--bg);
  border-radius: 50%;
}
.checkbox:disabled, .radio:disabled { opacity: 0; pointer-events: none; }
.check-label[data-disabled="true"] { color: var(--pine-mute); cursor: not-allowed; }
.field-helper--error::before { content: '! '; font-weight: 600; color: var(--pine); }
.form-row > * { min-width: 0; }
.data-table--workspace th.is-sortable .th-inner { display: inline-flex; align-items: center; gap: 8px; }
.data-table--workspace th.is-sorted .th-sort { color: var(--pine); }
@media (hover: hover) and (pointer: fine) {
  .data-table--workspace th.is-sortable:hover .th-sort { color: var(--pine); }
}
.data-table--workspace thead th {
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 1;
}
.data-table--workspace tbody tr.is-clickable { cursor: pointer; }
@media (hover: hover) and (pointer: fine) {
  .data-table--workspace tbody tr.is-clickable:hover { background-color: var(--pine); color: var(--bg); }
}
.data-table--workspace tbody tr.is-selected { background-color: var(--pine); color: var(--bg); }
.data-table-state-hint {
  display: block;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
}
.pagination-controls { display: flex; gap: 8px; }
.pagination-btn {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  padding: 8px 16px;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pagination-btn:hover:not(:disabled) { color: var(--bg); background-color: var(--pine); border-color: var(--pine); }
}
.pagination-btn:disabled { color: var(--pine-mute); cursor: not-allowed; }
.filter-row .field { min-width: 0; }
.filter-row .filter-reset { align-self: end; }
/* ───────── Modal / dialog (§53) — Pine backdrop + Paper compartment box ───────── */
/* Een dialoog zweeft over de hele pagina en hoort dus NIET de tokens te erven van de
   band waarin hij toevallig gedeclareerd staat. Op de productpagina staat de
   engineer-modal binnen de About-sectie (band--dark band--moss); die zet --bg op Moss
   en --pine op Paper, waardoor de modal precies omgekeerd rendeerde aan de canon:
   Paper achtergrond met een Moss doos in plaats van Pine achtergrond met een Paper
   doos (§53, en de demo-comment zei het ook al). Tokens hier terug op de :root-waarden,
   zodat een modal er overal hetzelfde uitziet. Waarden verbatim uit :root. */
.modal-backdrop {
  --bg: #F4F5F0;
  --pine: #1B2A1F;
  --pine-mute: #455E4F;
  --border: #455E4F;
  --rule: #455E4F;
  color: #1B2A1F;
  position: fixed;
  inset: 0;
  background: var(--pine);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.modal-backdrop[data-open="true"] { display: flex; }
.modal {
  background: var(--bg);
  border: var(--rule-width) solid var(--rule);
  max-width: 600px;
  width: 100%;
  max-height: calc(100vh - 64px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  color: var(--pine);
}
.modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 32px 32px 16px;
  border-bottom: var(--rule-width) solid var(--rule);
}
.modal-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  margin: 0;
}
/* Sluitknop met de §11-wipe, niet een kale kleurwissel. De master zette hier alleen
   color op hover; Brand identity §53 schrijft dezelfde vallende Pine-vulling voor als
   elke andere knop, met het kruisje dat naar Paper omslaat (Vince 2026-08-07: "er mist
   het BI3 hover effect op het kruisje"). Verbatim uit §53. */
.modal-close {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  color: var(--pine-mute);
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-close::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: 0;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.modal-close svg { width: 22px; height: 22px; stroke: currentColor; }
.modal-close:focus-visible::before { transform: scaleY(1); }
.modal-close:focus-visible { color: var(--bg); outline: none; }
@media (hover: hover) and (pointer: fine) {
  .modal-close:hover::before { transform: scaleY(1); }
  .modal-close:hover { color: var(--bg); outline: none; }
}
@media (hover: hover) and (pointer: fine) {
  
}
.modal-body {
  padding: 32px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.modal-footer {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
  padding: 16px 32px 32px;
  border-top: var(--rule-width) solid var(--rule);
}
/* Op een telefoon passen meerdere knoppen niet naast elkaar (Vince 2026-08-10): in de
   cookie-dialoog vragen Customize, Reject all en Accept all samen 415px terwijl er 260
   beschikbaar is, waardoor Accept all 155px buiten het venster viel. Gestapeld en vol-breed;
   dat houdt bovendien alle keuzes even makkelijk aan te tikken, wat bij toestemming ook
   juridisch het uitgangspunt is. display:flex i.p.v. block zodat de canon-centrering van
   .btn-primary intact blijft (zelfde patroon als de vol-brede knop op de kaartpagina). */
@media (max-width: 767px) {
  .modal-footer { flex-direction: column; align-items: stretch; }
  .modal-footer .btn-primary,
  .modal-footer .btn-secondary { display: flex; width: 100%; }
}
/* Reduced motion overrides ───────── */
@media (max-width: 1023px) {
  .bigstat-demo-grid { grid-template-columns: 1fr; }
  .logo-download-all { right: 24px; }
  .in-use-grid { grid-template-columns: repeat(2, 1fr); }
  .in-use-cell + .in-use-cell { border-left: none; }
  .in-use-cell:nth-child(n+2) {
    border-left: var(--rule-width) solid var(--rule);
  }
  .in-use-cell:nth-child(2n+1) { border-left: none; }
  .in-use-cell:nth-child(n+3) {
    border-top: var(--rule-width) solid var(--rule);
  }
  .tool-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .social-bio-row { grid-template-columns: 1fr; }
  .brand-statement-row { grid-template-columns: 1fr; align-items: start; }
  .brand-statement-meta { flex-direction: row; align-items: center; gap: 16px; }
  .usp-bar-demo { flex-direction: column; }
  .logo-download-all { position: static; align-self: flex-start; margin-bottom: 24px; }
  .in-use-grid { grid-template-columns: 1fr; }
  .in-use-cell:nth-child(n+2) {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .tool-grid { grid-template-columns: 1fr; }
}
/* ===== uit: Careers ===== */
:root { --rule-width: 1px; }
/* GEEN transition op color hier: die hangt aan --pine/--pine-mute/--bg, en Chrome
   vuurt een transitie niet opnieuw af als een CSS-variabele verandert. Bij het
   omzetten naar dark mode bleef de tekst daardoor op de lichte waarde staan tot je
   herlaadde (Vince 2026-07-27). De wipe zelf animeert nog gewoon, dat is een
   transform; de tekstkleur klapt om, en dat zie je naast een wipe van 200ms niet.
   Zelfde afweging als bij de bestandstegel op Materiaal-data. */
.announcement-bar-link {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  position: relative;
  isolation: isolate;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
}
.announcement-bar-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.field-label-optional {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pine-mute);
  margin-left: 8px;
}
.textarea { min-height: 112px; resize: vertical; }
.select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455E4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.field-helper { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.form-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-top: 8px;
}
.form-status:empty { display: none; }
.form-status {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
}
.form-status.is-error::before { content: '! '; font-weight: 600; color: var(--pine); }
/* Bevestiging en foutmelding na het versturen van een formulier (Shopify's contactformulier).
   Het canon-vlak van de gids, zoals .discount-callout en .summary-block: lichte sage, 1px Moss
   rondom en 4px bovenaan, met de wash-pins zodat de tekst in dark mode leesbaar blijft. Stond tot
   2026-10-12 per formulierpagina; nu hier, zodat ook het formulier op de productpagina hem heeft. */
.form-sent, .form-errors {
  --bg: var(--wash-bg);
  --pine: var(--wash-pine);
  --pine-mute: var(--wash-mute);
  --rule: var(--wash-rule);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  padding: 16px;
  background: var(--sage-wash);
  border: var(--rule-width) solid var(--rule);
  border-top: 4px solid var(--rule);
  margin: 0 0 24px;
}
.form-errors ul { margin: 0; padding-left: 20px; }
[hidden] { display: none !important; }
.checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: var(--rule-width) solid var(--rule);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.checkbox:focus { border-color: var(--pine); }
.checkbox:checked { background: var(--pine); border-color: var(--pine); }
/* §11 vallend-blokje-hover op de checkbox (BI3-canon: alles klikbaar wipet). Trigger op de
   .check-label-wrapper. Leeg vakje -> Pine-blokje valt van boven in + sage preview-vink
   (leest als "klik om aan te vinken"); aangevinkt -> Paper-blokje valt over de Pine-vulling
   + het vinkje wordt Pine (leest als "klik om uit te vinken"). Mirror van de backend
   §11-checkbox-canon (Reseller-database). Sage-vink hardcoded #99BEA7: op band--light is
   --pine-mute Moss, niet sage, dus token werkt daar niet. */
.checkbox { isolation: isolate; overflow: hidden; }
.checkbox::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .check-label:hover .checkbox { border-color: var(--pine); }
  .check-label:hover .checkbox::before { transform: scaleY(1); }
  .check-label:hover .checkbox:not(:checked)::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 2px;
    width: 5px;
    height: 8px;
    border-right: 1.5px solid #99BEA7;
    border-bottom: 1.5px solid #99BEA7;
    transform: rotate(45deg);
  }
  .check-label:hover .checkbox:checked::before { background: var(--bg); }
  .check-label:hover .checkbox:checked::after { border-right-color: var(--pine); border-bottom-color: var(--pine); }
}
.check-label {
  display: inline-flex;
  align-items: flex-start;
  gap: 16px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  cursor: pointer;
  user-select: none;
}
/* Vakje op het midden van de eerste tekstregel (Vince 2026-10-12): die regel is 1.55 x 16px hoog
   en het vakje 16px, dus het halve verschil omlaag. Stond 4,4px te hoog. Alleen in formulieren
   (.field, .checkbox-group): losse schakelaars zoals de prijs-per-kg op de collectie zetten
   align-items: center en staan al goed. */
.field .check-label > .checkbox,
.checkbox-group .check-label > .checkbox { margin-top: calc((1.55 * 16px - 16px) / 2); }
.check-required {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-left: 8px;
}
/* Checkbox group (interest selector) — vertical stack of .check-label */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
}
/* Email prompt under the submit button */
.form-alt-prompt {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
  margin-top: 24px;
}
/* Get-in-touch split: details + map */
.contact-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  align-items: stretch;
}
.contact-details {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.contact-detail { display: flex; flex-direction: column; gap: 8px; }
.contact-detail-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.contact-detail-value {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
}
.contact-map {
  border-left: var(--rule-width) solid var(--rule);
  position: relative;
}
.contact-map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(1);
}
/* Responsive */
@media (hover: hover) and (pointer: fine) {
  .band--dark .btn-primary:hover { background: #F4F5F0; }
}
@media (hover: hover) and (pointer: fine) {
  .band--dark .btn-secondary:hover { background: #1B2A1F; }
}
.band--dark .qty { border-color: #99BEA7; background: transparent; }
.band--dark .qty-input, .band--dark .qty-btn { color: #F4F5F0; background: transparent; }
.band--dark .qty-input { border-color: #99BEA7; }
.scroll-mark.is-scrolling, .scroll-mark.is-dragging, .scroll-mark.is-hovering { opacity: 1.0; }
@media (hover: hover) and (pointer: fine) {
  .scroll-mark:hover { opacity: 1.0; }
}
.rule {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--pine);
}
.rule--soft { background: var(--border); }
/* ───────── Cart layout — 2-col split ───────── */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr);
  gap: 48px;
  align-items: start;
}
.cart-layout > * { min-width: 0; }
.cart-summary-col {
  position: sticky;
  top: 80px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
/* ───────── Cart items table (§31 data-table canon) ───────── */
.cart-form { display: flex; flex-direction: column; gap: 24px; }
.cart-items {
  border-top: var(--rule-width) solid var(--rule);
  border-bottom: var(--rule-width) solid var(--rule);
  display: flex;
  flex-direction: column;
}
/* Cartregel = twee regels, op ELKE schermbreedte (Vince 2026-08-11).
   Stond op vijf kolommen naast elkaar (96 beeld / 1.6fr naam / 104 aantal / 100 prijs /
   28 verwijderen, gaps 24). Die vaste kolommen plus gaps eisen 424px, terwijl de
   itemskolom naast de bestelsamenvatting bij 1024px maar 467px breed is en er 32px
   padding vanaf gaat: dan houdt de naamkolom 11px over. Gemeten: 11px bij 1024, 55 bij
   1100, 113 bij 1200, 160 bij 1280, 253 bij 1440 — terwijl de langste kleurnaam
   ("Apple Green (RAL 6018)") 203px vraagt om op één regel te passen. Alleen vanaf 1366
   ging het goed; daaronder werd elke KSP over twee of drie regels gebroken en werd de rij
   282px hoog in plaats van 183.
   Kleiner maken van beeld, gaps of prijskolom haalt het niet: zelfs maximaal uitgeknepen
   blijft de vaste bagage 340px, en er is er maar 264 beschikbaar. Een extra breekpunt rond
   1280 mag niet, de canon kent er drie (<768 / 768-1023 / >=1024). Dus gaat de rij naar de
   indeling die op mobiel al stond en die daar goedgekeurd is: naam boven, aantal en prijs
   eronder. De mobiele variant verandert daardoor NIET; die regels blijven staan voor het
   kleinere beeld en de krappere padding.

   COMPACT (Vince 2026-09-28: "de regels hebben erg veel leegruimte, mag compleet nieuwe
   layout krijgen"). Een regel met resellerlabel was 272px hoog op een breed scherm: de
   variant onder elkaar, het label op een eigen rij, aantal en prijs daaronder, 32px padding.
   Nu: beeld 80px (de maat die op mobiel al stond), ernaast boven de naam met de variant als
   rij (zie .line-item-variant), rechts de prullenbak; onder de voet (.line-item-foot) met het
   aantal links en rechts .line-item-total: de prijs, bij een reseller met het label ervoor.
   Padding 24px, de data-block-subpadding. Past de voet niet op één regel (bij 1024px met
   resellerlabel), dan breekt hij zelf af: eerst de prijs naar een eigen regel, dan het label
   boven de prijs. Dat gaat met flex-wrap en niet met een extra breekpunt, want de canon kent
   er drie. De naam houdt zo de volle breedte, het punt van 2026-08-11 blijft staan. */
.line-item {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) auto;
  grid-template-areas:
    "image body remove"
    "image foot foot";
  gap: 16px 24px;
  align-items: start;
  padding: 24px 16px;
  border-bottom: var(--rule-width) solid var(--rule);
}
.line-item-image { grid-area: image; }
.line-item-body { grid-area: body; }
.line-item-remove { grid-area: remove; justify-self: end; }
.line-item-foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
}
.line-item-total {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px 16px;
  margin-left: auto;
}
.line-item .qty { width: fit-content; }
.line-item:last-child { border-bottom: none; }
.line-item-image {
  width: 80px;
  height: 80px;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}
.line-item-image img, .line-item-image svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.line-item-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.line-item-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--pine);
  text-decoration: none;
  position: relative;
  isolation: isolate;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
  align-self: flex-start;
}
.line-item-title::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .line-item-title:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .line-item-title:hover { color: var(--bg); }
}
/* Variant onder de producttitel: onder elkaar met bullets, niet op één regel.
   Stond als rij met een punt ertussen, maar die punt droeg naast de flex-gap van
   16px ook nog een eigen margin van 16px, dus er zat ruim dertig pixels lucht om
   elk scheidingsteken. Bij "Natural · 1.75mm · 500 gram" las dat als drie losse
   dingen die niets met elkaar te maken hadden (Vince 2026-08-07).
   Als opsommingsteken de Icon mark, niet een rond bolletje: hetzelfde merkteken dat
   in de browsertab staat en dat de e-mailhandtekeningen als bullet gebruiken (Vince
   2026-08-07). Vorm 1-op-1 uit die handtekening: 12px vierkant Pine, 1px kader, en
   onderin een Paper venster van 10 bij 5. Opgebouwd uit tokens en niet als plaatje,
   zodat 'ie in dark mode vanzelf omkeert: --pine en --bg wisselen daar van plaats,
   precies zoals de inverted Icon mark in de spec.
   Alleen de typografie blijft van deze component (mono 16px), want dit is data en
   geen lopende tekst.
   Sinds 2026-09-28 weer naast elkaar, voor de compacte regel, maar niet zoals toen: geen
   scheidingsteken tussen de waarden. Elk Icon mark hangt met 8px aan zijn eigen waarde,
   16px tot de volgende, zodat het leest als een rij kenmerken. Afbreken mag, 4px tussen
   de regels (Meta-stack micro-gap). */
.line-item-variant {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px 16px;
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.line-item-variant li {
  display: flex;
  align-items: center;
  gap: 8px;
}
.line-item-variant li::before {
  content: '';
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  background-color: var(--pine);
  background-image: linear-gradient(var(--bg), var(--bg));
  background-size: 10px 5px;
  background-position: 1px 6px;
  background-repeat: no-repeat;
}
.line-item-meta { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.line-item-meta strong { color: var(--pine); font-weight: 600; }
.line-item-price {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  text-align: right;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.line-item-price-original {
  display: block;
  font-weight: 400;
  color: var(--pine-mute);
  text-decoration: line-through;
  font-size: 16px;
}
.line-item-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  color: var(--pine-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.line-item-remove::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .line-item-remove:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .line-item-remove:hover { color: var(--bg); }
}
.line-item-remove svg { width: 16px; height: 16px; }
.qty-btn { flex-shrink: 0; }
.qty-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .qty-btn:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .qty-btn:hover { color: var(--bg); }
}
.qty-input {
  width: 40px;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  border: none;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  background: var(--bg);
  height: 100%;
  -moz-appearance: textfield;
  outline: none;
}
.qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* ───────── Cart utility row — continue shop + update ───────── */
.cart-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.cart-toolbar-left, .cart-toolbar-right {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.link-back {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius);
  isolation: isolate;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.link-back::before { content: '←'; color: inherit; }
.link-back::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .link-back:hover::after { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .link-back:hover { color: var(--bg); text-decoration: none; }
}
/* ───────── Summary block (data-block canon) ───────── */
.summary-block {
  border: var(--rule-width) solid var(--rule);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.summary-head {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.summary-rows { display: flex; flex-direction: column; gap: 16px; }
.summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
}
.summary-row-label { color: var(--pine); }
.summary-row-meta {
  display: block;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
}
.summary-row-value {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.summary-row--shipping .summary-row-value { color: var(--pine-mute); }
.summary-divider { height: 1px; background: var(--border); }
.summary-total-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.summary-total-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.summary-total-value {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
.summary-total-meta {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-top: 8px;
  text-align: right;
}
.summary-actions { display: flex; flex-direction: column; gap: 16px; }
.summary-checkout-btn { width: 100%; height: 56px; font-size: 16px; }
.summary-tax-note {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  text-align: center;
  line-height: 1.55;
}
.band--dark .btn-secondary { color: #F4F5F0; background: transparent; border-color: #99BEA7; }
.band--dark .btn-secondary::before { background: #F4F5F0; }
@media (hover: hover) and (pointer: fine) {
  .band--dark .btn-secondary:hover { color: #1B2A1F; border-color: #F4F5F0; }
}
main .band--dark .link::before { background: var(--pine); }
@media (hover: hover) and (pointer: fine) {
  main .band--dark .link:hover { color: var(--bg); }
}
/* ───────── Cart-note + attributes (form blocks with data-block frame) ───────── */
.cart-aux-block {
  border: var(--rule-width) solid var(--rule);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cart-aux-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.cart-aux-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.cart-aux-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.cart-aux-sub {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-top: -8px;
}
/* Form fields — §50 canon (1px Moss border, no radius, no fill, padding 16) */
.cart-textarea {
  width: 100%;
  min-height: 96px;
  padding: 16px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  outline: none;
  resize: vertical;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cart-textarea:focus { border-color: var(--pine); }
.cart-textarea::placeholder { color: var(--pine-mute); }
/* ───────── Carrier strip (compartment-row, §11 / bigstat-grid pattern) ───────── */
.carrier-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
.carrier-cell {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.carrier-cell + .carrier-cell {
  border-left: var(--rule-width) solid var(--rule);
}
.carrier-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
}
.carrier-services {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  line-height: 1.55;
}
.carrier-cta {
  margin-top: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
/* ───────── USP bar (§17) ───────── */
.usp-bar { display: flex; align-items: stretch; }
.usp-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #F4F5F0;
  line-height: 1.4;
}
/* USP-strip: eigen identiteit los van de footer. Onder-rule (Moss via --rule) breekt
   de tonale Pine-continuïteit met de footer eronder; cellen links uitgelijnd en de
   verticale dividers weg = rustiger, minder lijnwerk (Vince 2026-07-08). */
.usp-band { padding: 64px 0 48px; border-bottom: var(--rule-width) solid var(--rule); }
.usp-band .usp-cell { justify-content: flex-start; }
.usp-band .usp-divider { display: none; }
/* ───────── Empty state specimen ───────── */
.empty-state {
  border: var(--rule-width) solid var(--rule);
  padding: 112px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
}
.empty-state-title {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--pine);
  max-width: 720px;
}
.empty-state-lead {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--pine-mute);
  max-width: 520px;
}
.empty-state-actions {
  display: flex;
  gap: 16px;
  margin-top: 32px;
  flex-wrap: wrap;
  justify-content: center;
}
/* ───────── Responsive ───────── */
@media (max-width: 1023px) {
  .cart-layout { grid-template-columns: 1fr; gap: 64px; }
  .cart-summary-col { position: static; }
}
@media (max-width: 767px) {
  /* Compact (2026-09-28): de voet loopt hier over de volle breedte, ook onder het beeld,
     want het beeld staat op de telefoon alleen in de eerste rij. */
  .line-item {
    grid-template-columns: 80px minmax(0, 1fr) auto;
    grid-template-areas: "image body remove"
          "foot  foot foot";
    gap: 16px;
    padding: 24px 16px;
    align-items: start;
  }
  /* Beeld even hoog als het tekstblok ernaast (Vince 2026-08-10): het stond op 80x80 met
     64px leegte eronder, terwijl titel plus bullets 144px hoog zijn. Alleen rij 1, want
     het benoemde gebied loopt over beide rijen en dan zou het beeld tot onder de
     aantalkiezer doorlopen. Breedte blijft 80, dus object-fit:cover snijdt bij; hier kan
     dat, omdat de spoel gecentreerd op wit staat. */
  .line-item-image { width: 80px; height: auto; grid-area: image; grid-row: 1; align-self: stretch; }
  .line-item-body { grid-area: body; }
  /* Prullenbak groter op mobiel (Vince 2026-08-11): 16px icoon in een 28px knop was op
     een touchscreen nauwelijks te raken. Icoon naar 22px = de tweede canon-icoonmaat
     (BI v3 §14, "leads compact list-rows"), knop naar 32px = dezelfde breedte als de
     .qty-btn ernaast, dus geen nieuwe waarden. Beide regels moeten hier staan en niet
     hoger: de basis .line-item-remove svg-regel staat op r2456 en zou anders winnen. */
  .line-item-remove { grid-area: remove; width: 32px; height: 32px; }
  .line-item-remove svg { width: 22px; height: 22px; }
  .usp-bar { flex-direction: column; gap: 8px; }
  .usp-divider { width: auto; height: 1px; align-self: stretch; }
  .carrier-strip { grid-template-columns: 1fr 1fr; }
  .carrier-cell:nth-child(2) {
    border-left: var(--rule-width) solid var(--rule);
  }
  .carrier-cell:nth-child(n+3) {
    border-top: var(--rule-width) solid var(--rule);
  }
  .carrier-cell:nth-child(3) { border-left: none; }
}
@media (hover: hover) and (pointer: fine) {
  .band--dark .nav-btn:hover { background: #F4F5F0; }
}
.reading { display: flex; flex-direction: column; gap: 16px; }
.search {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 16px;
  align-items: center;
  border: var(--rule-width) solid var(--rule);
  padding: 16px;
  width: 100%;
  min-width: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.filter-row .btn-secondary.filter-reset { align-self: end; }
@media (hover: hover) and (pointer: fine) {
  .btn-secondary:hover { color: var(--bg); border-color: var(--pine); }
}
/* ───────── Status badges (§06) ───────── */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius);
  white-space: nowrap;
  border: 1.5px solid transparent;
}
.status-badge--in-stock { border: 1.5px solid var(--pine-mute); color: var(--pine-mute); background: transparent; }
.status-badge--new { border: 1.5px solid var(--pine); color: var(--pine); background: transparent; }
.status-badge--on-request { border: 1.5px solid #99BEA7; color: #99BEA7; background: transparent; }
.status-badge--out-of-stock { border-color: var(--pine); background: var(--pine); color: var(--bg); }
.status-badge--sale { border-color: var(--pine-mute); background: var(--pine-mute); color: var(--bg); }
/* ───────── Result-count bar above grid ─────────
       Pattern mirrors §20 .reading width and §10 spacing tokens. No new tokens. */
.results-bar {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 32px;
  padding-top: 0;
}
.results-count {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.results-count strong { color: var(--pine); font-weight: 600; }
/* ───────── Product grid ─────────
       Compartment pattern from §21 grid-layouts: no gap, borders between cells,
       4-col desktop → 2-col tablet → 1-col phone. 1px Moss borders, no radius. */
.product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.product-card {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--bg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--pine);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card.is-hidden { display: none; }
.product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card-image img { width: 100%; height: 100%; object-fit: contain; }
.product-card-image-label {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--pine-mute);
  text-align: center;
  padding: 0 24px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.product-card-status {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--bg);
  padding: 0;
}
.product-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  position: relative;
}
.product-card-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.product-card-eyebrow .sep { margin: 0 8px; }
.product-card-title {
  font-family: 'Mona Sans', sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  line-height: 1.3;
}
.product-card-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--pine-mute);
  margin-top: auto;
  padding-top: 16px;
}
.product-card-arrow {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pine-mute);
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-arrow { opacity: 1; transform: translateX(0); color: var(--pine); }
}
@media (hover: hover) and (pointer: fine) {
  .product-card:hover .product-card-image-label { color: var(--pine); }
}
/* Empty state */
.product-empty {
  grid-column: 1 / -1;
  padding: 80px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  color: var(--pine-mute);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.product-empty-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--pine);
}
.product-empty-body {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  max-width: 480px;
}
.cta-col-label { margin-bottom: 0; }
.cta-col-title { margin-bottom: 0; }
.cta-col-body { font-family: 'Mona Sans', sans-serif; }
/* ───────── Responsive ───────── */
@media (max-width: 1023px) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-row .btn-secondary.filter-reset { grid-column: span 2; justify-self: end; }
}
@media (max-width: 767px) {
  .product-grid { grid-template-columns: 1fr; }
  .filter-row .btn-secondary.filter-reset { grid-column: auto; justify-self: stretch; }
  .cta-pair { margin-top: 80px; }
  /* Telling en prijs-per-kg-schakelaar naast elkaar i.p.v. onder elkaar (Vince 2026-08-10).
     Wrap blijft aan als vangnet: samen vragen ze 315px en op een scherm van 360 is er 312,
     dus daaronder valt de schakelaar netjes naar de volgende regel i.p.v. buiten beeld. */
  .results-bar { flex-wrap: wrap; align-items: center; gap: 16px; }
}
/* ───────── Data table (BI v3 §31) ───────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 16px;
}
.data-table td:first-child { color: var(--pine); font-weight: 600; }
/* ───────── Compare table — extends .data-table ───────── */
.compare-shell { position: relative; }
.compare-table { table-layout: fixed; }
.compare-table col.compare-col-label { width: 28%; }
.compare-table col.compare-col-product { width: 24%; }
.compare-table thead th { border-bottom: 1px solid var(--border); }
.compare-table th.compare-slot-cell {
  padding: 0 16px 16px 0;
  vertical-align: bottom;
  text-transform: none;
  letter-spacing: 0;
}
.compare-table th.compare-slot-cell:last-child { padding-right: 0; }
.compare-table td:not(:first-child) { font-family: var(--mono); font-weight: 400; color: var(--pine); }
.compare-table td.is-empty { color: var(--pine-mute); }
.compare-table tr.compare-group-row td {
  padding: 32px 0 16px 0;
  border-bottom: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.compare-table tr.compare-group-row:first-child td { padding-top: 32px; }
.compare-table tr.compare-group-row + tr td { padding-top: 16px; }
/* ───────── Compare slot — empty state ───────── */
.compare-slot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 224px;
}
.compare-slot-trigger {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 100%;
  min-height: 224px;
  padding: 24px;
  background: transparent;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--pine-mute);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-slot-trigger::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .compare-slot-trigger:hover { color: var(--bg); border-color: var(--pine); border-style: solid; }
}
@media (hover: hover) and (pointer: fine) {
  .compare-slot-trigger:hover::before { transform: scaleY(1); }
}
.compare-slot-plus { width: 22px; height: 22px; stroke: currentColor; }
.compare-slot-trigger-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.compare-slot-trigger-cta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
/* ───────── Compare slot — filled state ───────── */
.compare-product {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  min-height: 224px;
}
.compare-product-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}
.compare-product-tier {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.compare-product-remove {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--pine-mute);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  border-radius: var(--radius);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .compare-product-remove:hover { color: var(--bg); background: var(--pine); }
}
.compare-product-remove svg { width: 16px; height: 16px; }
.compare-product-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
  color: var(--pine);
}
.compare-product-meta { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.compare-product-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.compare-product-swap {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  position: relative;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.compare-product-swap::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .compare-product-swap:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .compare-product-swap:hover { color: var(--bg); }
}
/* ───────── Compare meta (note below table) ───────── */
.compare-meta {
  margin-top: 32px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  max-width: 880px;
}
/* ───────── Picker popover (dropdown) ───────── */
.picker-backdrop {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: transparent;
  display: none;
}
.picker-backdrop.is-open { display: block; }
.picker {
  position: absolute;
  z-index: 201;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  width: 360px;
  max-width: calc(100vw - 48px);
  max-height: 464px;
  display: none;
  flex-direction: column;
  box-shadow: 0 1px 0 var(--bg), 0 22px 44px -22px #99BEA7;
}
.picker.is-open { display: flex; }
.picker-search-wrap { padding: 16px; border-bottom: 1px solid var(--border); }
.picker-search {
  width: 100%;
  padding: 8px 16px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.picker-search::placeholder { color: var(--pine-mute); }
.picker-search:focus { border-color: var(--pine); }
.picker-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.picker-group { padding: 8px 0; }
.picker-group + .picker-group { border-top: 1px solid var(--border); margin-top: 8px; padding-top: 16px; }
.picker-group-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  padding: 0 16px 8px 16px;
}
.picker-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 8px 16px;
  background: transparent;
  border: none;
  color: var(--pine);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.picker-item::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .picker-item:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .picker-item:hover { color: var(--bg); }
}
.picker-item-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .picker-item:hover .picker-item-meta { color: var(--bg); }
}
.picker-item[aria-disabled="true"] { color: #99BEA7; cursor: not-allowed; }
.picker-item[aria-disabled="true"] .picker-item-meta { color: #99BEA7; }
@media (hover: hover) and (pointer: fine) {
  .picker-item[aria-disabled="true"]:hover::before { transform: scaleY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .picker-item[aria-disabled="true"]:hover { color: #99BEA7; }
}
@media (hover: hover) and (pointer: fine) {
  .picker-item[aria-disabled="true"]:hover .picker-item-meta { color: #99BEA7; }
}
.picker-empty {
  padding: 24px 16px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
}
.cta-col {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cta-col + .cta-col {
  border-left: var(--rule-width) solid var(--rule);
}
.cta-col-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.cta-col-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.cta-col-body {
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
  margin-bottom: 16px;
}
.cta-col .btn-primary, .cta-col .btn-secondary { align-self: flex-start; }
/* ───────── Responsive ───────── */
@media (max-width: 1023px) {
  .compare-table col.compare-col-label { width: 32%; }
  .compare-table col.compare-col-product { width: auto; }
}
@media (max-width: 767px) {
  .data-block { padding: 24px; }
  .cta-col { padding: 32px; }
  /* Horizontal scroll for the compare table, sticky label column */
  .compare-shell { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .compare-shell .data-block { padding: 16px; min-width: 720px; }
  .compare-table col.compare-col-label { width: 200px; }
  .compare-table col.compare-col-product { width: 200px; }
  .compare-table th.compare-slot-cell { padding-right: 16px; }
  .compare-table td:first-child {
    position: sticky;
    left: 0;
    background: var(--bg);
    z-index: 2;
  }
  .compare-table tr.compare-group-row td { position: sticky; left: 0; background: var(--bg); }
  .compare-slot, .compare-slot-trigger, .compare-product { min-height: 180px; }
}
/* Back-to-options — same wipe-link mechanic, points left */
.back-to-options {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  padding: 2px 5px;
  margin-left: -5px;
  margin-bottom: 32px;
  border-radius: var(--radius);
  isolation: isolate;
  position: relative;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.back-to-options::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .back-to-options:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .back-to-options:hover { color: var(--bg); }
}
.back-to-options svg { width: 13px; height: 13px; }
/* ────────────────────────────────────────────────────────────
       PAGE-LOCAL COMPONENTS
       Custom components unique to this page, not in BI v3 §-anatomy:
       .intent-grid / .intent-card, .benefit-grid / .benefit-item,
       .step-list / .step-list-item, .hours-block,
       .contact-split / .contact-details / .contact-detail / .contact-map.
       All follow BI v3 design-language (1px Moss border, canon
       spacing, Mono/Serif tokens, ink-wipe hover) but are not yet
       formalized as §-sections in Brand identity v3. Formalize later
       as §55-§60 once the design vocabulary is finalized.
       ──────────────────────────────────────────────────────────── */
/* Intent grid — 5 cards in a bordered grid (Card 5 spans 2 columns on row 2) */
.intent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr 1fr;
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
.intent-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 32px;
  background: transparent;
  border: none;
  text-align: left;
  font-family: var(--mono);
  color: var(--pine);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  min-width: 0;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.intent-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .intent-card:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .intent-card:hover { color: var(--bg); }
}
@media (hover: hover) and (pointer: fine) {
  .intent-card:hover .intent-card-arrow { transform: translateX(4px); }
}
/* De flush-compartment nth-child-randen die hier stonden zijn verwijderd:
   oudere Contact-generatie; de huidige Contact-demo gebruikt discrete kaarten
   (eigen border per kaart, page-blok). De (0,2,0)-specificity versloeg elk
   page-blok. Alleen Contact gebruikt .intent-card. */
.intent-card--wide { grid-column: span 2; }
.intent-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.intent-card-icon {
  width: 22px;
  height: 22px;
  color: currentColor;
  flex-shrink: 0;
}
.intent-card-icon svg { stroke: currentColor; }
.intent-card-arrow {
  width: 22px;
  height: 22px;
  color: currentColor;
  flex-shrink: 0;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.intent-card-arrow svg { stroke: currentColor; }
.intent-card-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: currentColor;
}
.intent-card-desc {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .intent-card:hover .intent-card-desc { color: var(--bg); }
}
/* Reseller benefits + order tracking tips — bordered list */
.step-list { margin-top: 48px; border: var(--rule-width) solid var(--rule); list-style: none; }
.step-list-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 32px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.step-list-item + .step-list-item {
  border-top: var(--rule-width) solid var(--rule);
}
.step-list-icon {
  width: 22px;
  height: 22px;
  color: var(--pine);
  flex-shrink: 0;
}
.step-list-icon svg { stroke: currentColor; }
/* Bordered split for benefits (reseller) — 2-col bordered grid */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
.benefit-item {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 16px;
  align-items: start;
  padding: 24px 32px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.benefit-item:nth-child(2n) {
  border-left: var(--rule-width) solid var(--rule);
}
.benefit-item:nth-child(n+3) {
  border-top: var(--rule-width) solid var(--rule);
}
.benefit-icon {
  width: 22px;
  height: 22px;
  color: var(--pine);
  flex-shrink: 0;
}
.benefit-icon svg { stroke: currentColor; }
/* Form */
.form-stack { margin-top: 48px; }
/* In een modal staat het formulier direct onder de kop: de body-padding (32px) is daar de
   ruimte. Met de 48px hierboven kwam het eerste veld 80px onder de kop te staan (formulier op de
   productpagina, Vince 2026-10-12). */
.modal-body .form-stack { margin-top: 0; }
/* Na verzenden staat de bevestiging alleen in de modal (de velden zijn weg), dus geen 24px eronder:
   anders zat er onder de melding meer ruimte dan erboven (Vince 2026-10-12). */
.modal-body .form-sent { margin-bottom: 0; }
/* Shopify's spamcontrole-pagina (/challenge, Vince 2026-10-12). De markup komt van Shopify zelf
   (.shopify-challenge__*); een script onderaan theme.liquid hangt er de bestaande klassen aan
   (.container, .section-title, .btn-primary). Hier alleen de sectie-afstand, gelijk aan .section
   (112px, en 80px op mobiel en in de compact-laag), en 24px tussen het hCaptcha-vak en de knop. */
.shopify-challenge__container.container { padding-top: 112px; padding-bottom: 112px; }
.shopify-challenge__container form > * + * { margin-top: 24px; }
/* Shopify centreert het hCaptcha-vak en de knop zelf; links, gelijk met de titel (Vince 2026-10-12). */
.shopify-challenge__container form,
.shopify-challenge__container form * { text-align: left !important; }
.shopify-challenge__container form > div { margin-left: 0 !important; margin-right: auto !important; }
@media (max-width: 767px) {
  .shopify-challenge__container.container { padding-top: 80px; padding-bottom: 80px; }
}
@media (min-width: 768px) {
  body:not(.classic-type) .shopify-challenge__container.container { padding-top: 80px; padding-bottom: 80px; }
}
/* §11 exception — .link binnen data-display containers erft font-size van parent.
       Wipe + ↗ + Mono + color inherit blijven canon. */
.contact-detail-value .link { font-size: inherit; }
/* Hours line — single data-block */
.hours-block {
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hours-headline {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.hours-meta {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  line-height: 1.55;
}
/* Funnel state — body class drives intra-section visibility */
body[data-funnel="default"] .intent-selected { display: none; }
body[data-funnel="info-reseller"] .intent-default { display: none; }
body[data-funnel="info-reseller"] .next-step-view { display: none; }
body[data-funnel="info-reseller"] .next-step-view--reseller { display: block; }
body[data-funnel="info-order"] .intent-default { display: none; }
body[data-funnel="info-order"] .next-step-view { display: none; }
body[data-funnel="info-order"] .next-step-view--order { display: block; }
body[data-funnel="form"] .intent-default { display: none; }
body[data-funnel="form"] .next-step-view { display: none; }
body[data-funnel="form"] .next-step-view--form { display: block; }
/* Responsive */
@media (max-width: 1023px) {
  .container { padding: 0 24px; }
  .intent-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: auto; }
  /* mobiele flush-compartment !important-randen verwijderd (zie desktop-note) */
  .intent-card--wide { grid-column: span 2; }
  .contact-split { grid-template-columns: 1fr; }
  .contact-map {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
    aspect-ratio: 16 / 9;
  }
  .contact-map iframe { position: static; }
}
@media (max-width: 767px) {
  /* Twee kolommen op de contactpagina (Vince 2026-08-10, proef). Sectie 1 ging daarmee van
     1051 naar 686px. Kosten: elke kop breekt over twee regels ("Talk to an / engineer") en de
     kaarten worden individueel hoger, 197 -> 240px; de winst zit puur in het naast elkaar
     zetten. Vijf kaarten laten rechtsonder een gat. Terugdraaien is deze regel terug op 1fr. */
  .intent-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .intent-card { padding: 16px; }
  /* Kaart vierkant op een telefoon (Vince 2026-08-10): 16/9 gaf 340x191 en dat is te laag om
     de omgeving te lezen; 1/1 maakt er 340x340 van. Bewust alleen onder 768 en niet in het
     tabletblok waar de 16/9 staat, want op een scherm van 900 breed zou 1:1 een kaart van
     900px hoog opleveren. */
  .contact-map { aspect-ratio: 1 / 1; }
  /* (stale flush-compartment regels verwijderd 2026-07-07: Contact's
     intent-kaarten zijn losse §46-kaarten met gap — elke kaart houdt op
     mobiel z'n eigen 1px box + 4px Moss hood) */
  .intent-card--wide { grid-column: auto; }
  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-item:nth-child(2n) { border-left: none; }
  .benefit-item + .benefit-item {
    border-top: var(--rule-width) solid var(--rule);
  }
  .contact-details { padding: 32px 24px; }
}
/* ===== uit: Education-discount ===== */
/* Masthead-rule + folio back-to-hub strip (§18 / R11) */
/* Dark mode: rule rendert in Moss (--rule) i.p.v. de geïnverteerde --pine
       (Paper), zodat 'ie visueel matcht met de andere dividers op de pagina. */
.folio { background: var(--bg); }
.folio-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.bigstat {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.bigstat-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  line-height: 1.4;
}
/* Eligibility list */
.eligibility-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
.eligibility-item {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 16px;
  align-items: start;
  padding: 32px;
}
.eligibility-item:nth-child(2n) {
  border-left: var(--rule-width) solid var(--rule);
}
.eligibility-item:nth-child(n+3) {
  border-top: var(--rule-width) solid var(--rule);
}
.eligibility-icon {
  width: 24px;
  height: 24px;
  color: var(--pine);
  display: flex;
  align-items: center;
  justify-content: center;
}
.eligibility-icon svg { stroke: currentColor; }
.eligibility-text-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  margin-bottom: 8px;
}
.eligibility-text-body {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  line-height: 1.55;
}
/* Step grid */
.step-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
.step-item {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-item + .step-item {
  border-left: var(--rule-width) solid var(--rule);
}
.step-num {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.step-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.step-text {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
}
.terms-item + .terms-item {
  border-top: var(--rule-width) solid var(--rule);
}
.terms-bullet {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--pine);
  line-height: 1.55;
}
/* Form layout — page-level grid: form + sidebar */
.apply-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  align-items: stretch;
}
.apply-form-cell { padding: 48px; }
.apply-sidebar-cell {
  padding: 48px;
  border-left: var(--rule-width) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-stack { max-width: 100%; }
.sidebar-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.sidebar-value {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
}
/* Responsive */
@media (max-width: 1023px) {
  .apply-grid { grid-template-columns: 1fr; }
  .apply-sidebar-cell {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
}
@media (max-width: 767px) {
  .eligibility-grid { grid-template-columns: 1fr; }
  .eligibility-item:nth-child(2n) { border-left: none; }
  .eligibility-item + .eligibility-item {
    border-top: var(--rule-width) solid var(--rule);
  }
  .apply-form-cell, .apply-sidebar-cell { padding: 32px 24px; }
}
.hero-lead { max-width: 720px; }
.split > * { min-width: 0; }
.tile-stack { display: flex; flex-direction: column; gap: 16px; }
.tile {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 24px;
  background: transparent;
  color: var(--pine);
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tile::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover { color: var(--bg); }
}
/* Post archive: dense headline rows (Tile-stack canon §11). Thumb left, title + meta right. */
.post-stack { margin-top: 16px; }
.post-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  align-items: center;
}
.post-row-image {
  width: 120px;
  height: 80px;
  overflow: hidden;
  background: var(--pine-mute);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.post-row-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) and (pointer: fine) {
  .post-row:hover .post-row-image img { transform: scale(1.04); }
}
.post-row-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.post-row-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .post-row-meta { color: inherit; }
}
.post-row-title {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.25;
  color: inherit;
}
/* Featured row (top of archive) — larger thumb, Display-M title, 2-line excerpt */
.post-row--featured {
  grid-template-columns: 240px 1fr;
  gap: 32px;
  padding: 32px;
  align-items: center;
}
.post-row--featured .post-row-image { width: 240px; height: 160px; }
.post-row--featured .post-row-title { font-size: clamp(20px, 2.5vw, 28px); line-height: 1.2; }
.post-row-excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* ───────── Responsive ───────── */
@media (max-width: 767px) {
  .post-row { grid-template-columns: 80px 1fr; gap: 16px; }
  .post-row-image { width: 80px; height: 56px; }
  .post-row-title { font-size: 20px; }
  .post-row--featured { grid-template-columns: 120px 1fr; gap: 16px; padding: 24px; }
  .post-row--featured .post-row-image { width: 120px; height: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-row-image img { transition: none !important; }
}
/* Hero meta date-stamp (Label-token canon — uses .eyebrow class with block layout + bottom margin) */
.hero-band .eyebrow { display: block; margin-bottom: 32px; }
/* Drop-cap on main body reading only — skip on .reading--intro (short framer above article-visual) */
.reading--dropcap p:first-of-type::first-letter {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(44px, 5vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.0;
  float: left;
  margin: 8px 16px -2px 0;
  color: var(--pine);
}
/* Article h3 sub-headings inside reading (Display M canon) */
.reading-h3 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  margin-top: 16px;
}
.reading-ul {
  list-style: disc outside;
  padding-left: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reading-ul li { color: var(--pine); }
.reading-ul li::marker { color: var(--pine-mute); }
.reading-ul li strong { color: var(--pine); font-weight: 600; }
/* Reading-scope: alleen font-size erft (dekt ook non-<p> prose in .reading-ul) */
.reading .link, .reading-ul li .link { font-size: inherit; }
/* Article layout — visual sits above reading, both full-width inside container */
.article-visual { margin-bottom: 80px; }
.article-visual .visual-frame { aspect-ratio: 21 / 9; }
/* All-news outbound link below related-grid */
.more-link-row { margin-top: 48px; display: flex; justify-content: flex-start; }
/* Tile pattern (BI v3 §11) — post archive grid */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.post-grid { margin-top: 16px; }
.post-tile { display: flex; flex-direction: column; gap: 16px; }
.post-tile-image {
  margin: -24px -24px 16px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--pine-mute);
  border-bottom: 1px solid var(--rule);
}
.post-tile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
@media (hover: hover) and (pointer: fine) {
  .post-tile:hover .post-tile-image img { transform: scale(1.04); }
}
.post-tile-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tile:hover .post-tile-meta { color: inherit; }
}
.post-tile-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.post-tile-excerpt {
  font-size: 16px;
  line-height: 1.55;
  color: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Responsive */
@media (max-width: 1023px) {
  .tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .tile-grid { grid-template-columns: 1fr; }
  .article-visual { margin-bottom: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .post-tile-image img { transition: none !important; }
}
.terms-item {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  padding: 24px 32px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
}
.terms-item-title {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  margin-bottom: 8px;
}
.address-text-cell {
  padding: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.address-sidebar-cell {
  padding: 48px;
  border-left: var(--rule-width) solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.sidebar-item { display: flex; flex-direction: column; gap: 8px; }
/* Responsive */
/* ===== uit: Privacy-policy ===== */
strong { font-weight: 600; }
/* Eyebrow label (canon §32 — gebruikt door .jump-bar) */
.eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
/* Jump nav — shared atoms (§33 + §55 — base styles + shared hover wipe) */
.jump-list { list-style: none; }
.jump-link {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: var(--pine);
  padding: 4px 6px;
  margin-left: -6px;
  border-radius: var(--radius);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  gap: 8px;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.jump-link::before {
  content: attr(data-num);
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .jump-link:hover { color: var(--bg); }
}
@media (hover: hover) and (pointer: fine) {
  .jump-link:hover::before { color: var(--bg); }
}
/* Long-form legal shell (BI v3 §55)
   ENKELKOLOM sinds 2026-08-11 (besluit Vince): de sticky .jump-sidebar is vervallen, navigatie
   loopt via de §33 .jump-band onder de hero, gelijk aan elke andere pagina. Wat §55 nog is: één
   .legal-shell-band met een stack genummerde .legal-item-secties, i.p.v. een eigen band per
   sectie. De 660px meet blijft (legal-tekst wordt gescand, niet doorgelezen). */
.legal-shell-band { padding: 112px 0; }
.legal-shell { max-width: 660px; margin: 0 auto; }
.legal-stack { display: flex; flex-direction: column; gap: 80px; }
.legal-item { scroll-margin-top: 112px; }
.legal-item .reading { max-width: 660px; }
/* Address-grid override binnen de 660px legal-shell context (default 2fr/1fr is te smal voor email) */
.legal-item .address-grid { grid-template-columns: 1fr 1fr; }
.legal-item .address-text-cell, .legal-item .address-sidebar-cell { padding: 32px; }
/* Cookie / terms list */
.terms-list { margin-top: 48px; border: var(--rule-width) solid var(--rule); list-style: none; }
.terms-item-meta {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-bottom: 8px;
}
.terms-item-body {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  line-height: 1.55;
}
/* Address layout — text + sidebar */
.address-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  align-items: stretch;
}
.sidebar-value .link { font-size: inherit; }
/* Responsive */
@media (max-width: 767px) {
  .legal-shell-band { padding: 80px 0; }
  .legal-stack { gap: 64px; }
  .address-text-cell, .address-sidebar-cell { padding: 32px 24px; }
  .terms-item { grid-template-columns: 1fr; gap: 8px; }
}
.filter-reset { align-self: end; }
.input, .select {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  padding: 16px;
  outline: none;
  width: 100%;
  min-width: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.input:focus, .select:focus { border-color: var(--pine); }
.input::placeholder { color: var(--pine-mute); }
.data-table--workspace th.is-sortable .th-sort {
  color: var(--pine-mute);
  display: inline-flex;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 24px;
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
}
.pagination-info { flex: 1; min-width: 0; font-variant-numeric: tabular-nums; }
.doc-product { display: flex; align-items: flex-start; gap: 16px; }
.doc-product-image {
  width: 64px;
  height: 64px;
  border: var(--rule-width) solid var(--rule);
  object-fit: cover;
  background: transparent;
  flex-shrink: 0;
  border-radius: 0;
}
/* Niet elke regel is een product: de losse verklaringen (REACH) hebben geen productfoto en
   lieten een leeg vierkant achter (Vince 2026-08-10). Daar staat nu de blok-mark in, klein en
   in Moss, zodat het vak als bewuste plaatsvervanger leest en niet als ontbrekend beeld. */
.doc-product-image-placeholder {
  width: 64px;
  height: 64px;
  /* Omgedraaid (Vince 2026-08-10): Pine vlak met een Paper mark erin, i.p.v. een Moss mark
     op een leeg kader. Zo leest het vak als een bewust blokje en niet als een missende foto,
     en staat de mark er net als in de header: licht op Pine. */
  background: var(--pine);
  border: var(--rule-width) solid var(--pine);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.doc-product-mark {
  width: 24px;
  height: 24px;
  color: var(--bg);
}
.doc-product-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.doc-product-link {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .doc-product-link:hover { color: var(--pine-mute); }
}
.doc-product-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
}
.doc-product-handle { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.doc-lang-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.doc-lang-link {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.doc-lang-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .doc-lang-link:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .doc-lang-link:hover { color: var(--bg); }
}
.doc-lang-link .arrow { font-size: inherit; line-height: 1; }
.doc-lang-unavailable { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
.doc-lang-toggle {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  background: transparent;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
  padding: 2px 8px;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .doc-lang-toggle:hover { color: var(--pine); border-color: var(--pine); }
}
.doc-lang-extras {
  display: none;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.doc-lang-extras.is-open { display: inline-flex; }
.doc-empty { color: var(--pine-mute); }
.data-table--workspace .col-product { min-width: 320px; }
.data-table--workspace .col-type { min-width: 220px; }
.data-table--workspace .col-category { min-width: 200px; }
.data-table--workspace .col-lang { min-width: 280px; }
.doc-table-min { min-width: 1100px; }
/* Sections (§20) */
.section { padding: 112px 0; scroll-margin-top: 80px; }
.bigstat-value {
  font-family: var(--serif);
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.0;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
/* Data table base (§51). GEEN edge-mask meer: de oude `.table-scroll`
   mask-image (+ is-at-start/is-at-end-varianten) werd gestuurd door JS-klassen
   die nergens getoggled worden, dus faadde de mask PERMANENT beide randen (ook
   links, ook links-gescrolld — verkeerd én niet-BI3). De canonieke scroll-
   affordance is de `.table-compartment` border-fade via `has-overflow-right`
   (rechter-rand verdwijnt zolang er nog content rechts staat), aangedreven door
   de §51-IIFE in elke tabel-sectie. Mask + dode is-at-*-varianten verwijderd. */
.table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--pine) transparent;
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb { background: var(--pine); border-radius: var(--radius); }
/* Data table — workspace modifier (§51) */
.data-table--workspace th.is-sortable { cursor: pointer; user-select: none; }
/* Table state regions */
.data-table-state {
  padding: 48px 32px;
  text-align: center;
  border: var(--rule-width) solid var(--rule);
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.45;
  color: var(--pine-mute);
}
/* Tag (§54) */
.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  border: var(--rule-width) solid var(--pine-mute);
  border-radius: var(--radius);
  background: transparent;
  white-space: nowrap;
}

/* Klikbare variant van .tag, voor een "+N more" die de rest van de lijst uitklapt.
   Een chip die zegt dat er meer is en dan niets doet is een doodlopende weg
   (Vince 2026-08-04). Uiterlijk blijft .tag; de interactie spiegelt de §11-wipe
   van .pill hierboven, met dezelfde ::before scaleY, Pine-vulling en Standard
   200ms. Geen nieuwe waarden, alleen bestaande canon op een bestaand blokje. */
.tag-more {
  font: inherit;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.tag-more::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .tag-more:hover { color: var(--bg); border-color: var(--pine); }
  .tag-more:hover::before { transform: scaleY(1); }
}
.tag-more:focus-visible::before { transform: scaleY(1); }
.tag-more:focus-visible { color: var(--bg); border-color: var(--pine); outline: none; }
.tag.is-extra { display: none; }
.tag-group.is-open .tag.is-extra { display: inline-flex; }
.tag-group.is-open .tag-more { display: none; }

/* ═════════ Resellerprijs: label + uitleg (Vince 2026-09-25) ═════════
   Een ingelogde reseller (tag "Reseller NN") ziet zijn eigen prijs. Boven de prijs staat
   één labelregel: het 3D4M-blokje met "−33%", dan RESELLER PRICE en een (i). Hover,
   toetsenbordfocus of een tik opent de uitleg met de normale prijzen, doorgestreept en
   elk met een eigen woord ervoor. Gebruikt op de productpagina en boven de collectie.
   Geen nieuwe waarden:
   - het label is .variant-label (BI §08 Label-token), met de wipe en het omkerende
     blokje van a.dropdown-col-title (header-footer-v3.css): padding 2px 5px,
     margin-left -5px, §11 scaleY, Standard 200ms;
   - de uitleg is de tooltip uit BI #live-checkers en .dropdown-info: Pine, Paper-tekst,
     hoekig, z-index 10, 8px onder de trigger, padding 8px 12px, max 280px; hier
     Body-token (16/400/1.55) omdat het meerdere regels zijn. De rand is var(--pine-mute)
     in plaats van Moss: Moss op de donkere koopbox is nauwelijks te zien (1,9:1), Sage wel;
   - cursor pointer, zoals elk klikbaar element (BI §40);
   - hover-regels onder html:not(.is-touch) (BI §13). Op touch klapt de uitleg open in
     de tekst in plaats van te zweven.
   assets/reseller-label.js doet het vastzetten (klik/tik), Esc, en houdt de uitleg open
   zolang de muis in het blok of op de uitleg is (WCAG 1.4.13). */
.reseller-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 2px 5px;
  margin-left: -5px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reseller-label::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reseller-label svg { width: 16px; height: 16px; flex-shrink: 0; }
.reseller-label .badge-3d4m { margin-right: 0; }
.reseller-label.is-open,
.reseller-label:focus-visible { color: var(--bg); outline: none; }
.reseller-label.is-open::before,
.reseller-label:focus-visible::before { transform: scaleY(1); }
.reseller-label.is-open .badge-3d4m,
.reseller-label:focus-visible .badge-3d4m { color: var(--pine); background: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch) .reseller-label:hover { color: var(--bg); }
  html:not(.is-touch) .reseller-label:hover::before { transform: scaleY(1); }
  html:not(.is-touch) .reseller-label:hover .badge-3d4m { color: var(--pine); background: var(--bg); }
}
.reseller-tip {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  width: max-content;
  max-width: min(280px, 100%);
  padding: 8px 12px;
  background: #1B2A1F;
  color: #F4F5F0;
  border: 1px solid var(--pine-mute);
  border-radius: 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}
/* Onzichtbare brug over de 8px tussen blok en uitleg, zodat de muis er zonder dichtklappen
   naartoe kan: een ::before hoort bij de uitleg zelf. */
.reseller-tip::before { content: ''; position: absolute; left: -1px; right: -1px; bottom: 100%; height: 9px; }
.reseller-tip > * { margin: 0; }
.reseller-tip > * + * { margin-top: 8px; }
.reseller-tip-title { font-weight: 600; }
.reseller-tip-list { display: grid; grid-template-columns: auto auto; justify-content: start; column-gap: 16px; }
.reseller-tip-list dt,
.reseller-tip-note { color: #99BEA7; }
.reseller-tip-list dd { margin: 0; white-space: nowrap; }
.reseller-label:not(.is-dismissed):focus-visible ~ .reseller-tip,
.reseller-label.is-open ~ .reseller-tip,
.is-peek > .reseller-tip { display: block; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) {
  html:not(.is-touch) .reseller-label:not(.is-dismissed):hover ~ .reseller-tip { display: block; }
}
/* Na Esc of loslaten blijft de uitleg dicht, ook als de muis nog op het label staat
   (WCAG 1.4.13: wegklikbaar). De hover- en focusregels hierboven slaan .is-dismissed over. */
html .reseller-label.is-dismissed ~ .reseller-tip { display: none; }
html.is-touch .reseller-tip { position: static; width: auto; max-width: none; }
html.is-touch .reseller-tip::before { display: none; }
/* Tagblokje in Sage (BI §54), voor de kortingsregel "Reseller 33%" in de winkelwagen.
   Stond tot nu toe alleen in account.css; zelfde waarden. */
.tag.tag-sage { color: #1B2A1F; background: #99BEA7; border-color: #99BEA7; }
/* Publication-row cell helpers (compositions of v3 components, no new tokens) */
.pub-title-link {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pub-title-link:hover { color: var(--pine-mute); }
}
.pub-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.pub-researcher {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.pub-researcher-name { color: var(--pine); font-weight: 600; }
.pub-researcher-inst { color: var(--pine-mute); font-size: 16px; }
.pub-researcher-country { color: var(--pine-mute); font-size: 16px; }
.pub-year {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--pine);
  font-variant-numeric: tabular-nums;
}
.pub-read {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pub-read::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .pub-read:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .pub-read:hover { color: var(--bg); }
}
.pub-empty { color: var(--pine-mute); }
/* Column widths */
.data-table--workspace .col-pub { min-width: 320px; }
.data-table--workspace .col-researcher { min-width: 240px; }
.data-table--workspace .col-year { width: 80px; white-space: nowrap; }
.data-table--workspace .col-topic { min-width: 180px; }
.data-table--workspace .col-materials { min-width: 240px; }
.data-table--workspace .col-read { width: 120px; white-space: nowrap; }
.pub-table-min { min-width: 1180px; }
/* CTA cell */
.contact-cta { margin-top: 32px; }
/* Responsive */
@media (max-width: 1023px) {
  .bigstat:nth-child(2n) {
    border-left: var(--rule-width) solid var(--rule);
  }
  .bigstat:nth-child(n+3) {
    border-top: var(--rule-width) solid var(--rule);
  }
  .filter-reset { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 767px) {
  .bigstat-grid { grid-template-columns: 1fr; }
  .bigstat:nth-child(2n) { border-left: none; }
  .bigstat + .bigstat {
    border-top: var(--rule-width) solid var(--rule);
  }
}
/* Word-reveal (PEEK canon §37) */
.rv-outer {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.15em;
  margin-bottom: -0.15em;
}
/* Sub-block (subdivision inside one section — used for Returns sub-headings) */
.sub-block { margin-top: 80px; }
.sub-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  margin-bottom: 16px;
}
.sub-block .reading { margin-bottom: 0; }
/* Responsive */
@media (max-width: 1023px) {
  .bigstat-grid { grid-template-columns: 1fr; }
  .bigstat + .bigstat {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .step-grid { grid-template-columns: 1fr; }
  .step-item + .step-item {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .address-grid { grid-template-columns: 1fr; }
  .address-sidebar-cell {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
}
/* ───────── Form fields (§50 canon) ───────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.form-stack { display: flex; flex-direction: column; gap: 24px; }
/* ───────── Shipping estimator ───────── */
.estimate-block { margin-top: 48px; }
.estimate-result {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.estimate-loading {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  padding: 32px;
  border: var(--rule-width) solid var(--rule);
  text-align: center;
}
.rates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  border: var(--rule-width) solid var(--rule);
}
.rate-row {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 24px 32px;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-row + .rate-row {
  border-top: var(--rule-width) solid var(--rule);
}
.rate-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-row.is-selected::before { transform: scaleY(1); }
@media (hover: hover) and (pointer: fine) {
  .rate-row:hover::before { transform: scaleY(1); }
}
.rate-row.is-selected { color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .rate-row:hover { color: var(--bg); }
}
.rate-row.is-selected .rate-service, .rate-row.is-selected .rate-transit { color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .rate-row:hover .rate-service, .rate-row:hover .rate-transit { color: var(--bg); }
}
.rate-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: var(--rule-width) solid var(--rule);
  background: transparent;
  cursor: pointer;
  margin: 0;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-row.is-selected .rate-radio { border-color: var(--bg); }
@media (hover: hover) and (pointer: fine) {
  .rate-row:hover .rate-radio { border-color: var(--bg); }
}
.rate-row.is-selected .rate-radio { background: var(--bg); }
.rate-row.is-selected .rate-radio::after {
  content: '';
  position: absolute;
  inset: 4px;
  background: var(--pine);
  border-radius: 50%;
}
.rate-carrier {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
.rate-service {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-transit {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.rate-price {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: inherit;
  text-align: right;
  white-space: nowrap;
}
.estimate-disclaimer {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  line-height: 1.55;
}
@media (max-width: 767px) {
  .form-row { grid-template-columns: 1fr; gap: 16px; }
  .rate-row {
    grid-template-columns: 16px 1fr auto;
    grid-template-areas: "radio carrier price"
          "radio service service"
          "radio transit transit";
    gap: 8px 16px;
    padding: 24px;
  }
  .rate-radio { grid-area: radio; align-self: start; margin-top: 8px; }
  .rate-carrier { grid-area: carrier; }
  .rate-service { grid-area: service; }
  .rate-transit { grid-area: transit; }
  .rate-price { grid-area: price; align-self: start; }
}
.scroll-mark.is-dragging {
  cursor: grabbing;
  transition: right 400ms cubic-bezier(0.4, 0, 0.2, 1),
                  height 400ms cubic-bezier(0.4, 0, 0.2, 1),
                  opacity 400ms cubic-bezier(0.4, 0, 0.2, 1),
                  top 0ms linear;
}
@media (hover: hover) and (pointer: fine) {
  a.announcement-bar-link:hover .announcement-bar-eyebrow { color: var(--bg); }
}
@media (hover: hover) and (pointer: fine) {
  a.announcement-bar-link:hover .badge-3d4m { color: var(--pine); background: var(--bg); }
}
a.announcement-bar-link {
  display: inline-block;
  position: relative;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  color: inherit;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.announcement-bar-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.announcement-bar-link::after {
  content: '↗';
  margin-left: 4px;
  font-size: inherit;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  a.announcement-bar-link:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  a.announcement-bar-link:hover { color: var(--bg); }
}
.btn-primary svg, .btn-secondary svg { stroke: currentColor; }
/* Filter row (§52) */
.filter-row {
  display: grid;
  grid-template-columns: minmax(240px, 2fr) minmax(160px, 1fr);
  gap: 16px;
  align-items: end;
  margin-top: 48px;
  margin-bottom: 32px;
}
/* Locator stats row — stats left, geo-action right */
.locator-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.select option { color: var(--pine); background: var(--bg); }
/* Search clear button */
.input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455E4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 16px 16px;
  background-position: center;
  cursor: pointer;
}
.input[type="search"]::-webkit-search-decoration, .input[type="search"]::-webkit-search-results-button { -webkit-appearance: none; appearance: none; }
/* Locator widget — sidebar + map */
.locator-stats {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  min-height: 22px;
}
.locator-stats:empty::before { content: '\00a0'; }
.locator-grid {
  display: grid;
  grid-template-columns: 380px 1fr;
  border: var(--rule-width) solid var(--rule);
  /* 540 i.p.v. 600 (Vince 2026-08-10): 10% lager. Raakt alleen desktop; onder 1024 zet het
     responsieve blok de rijen zelf (400px sidebar + vierkante kaart) en height op auto. */
  height: 540px;
}
.locator-sidebar {
  border-right: var(--rule-width) solid var(--rule);
  overflow-y: auto;
  min-height: 0;
  scrollbar-color: var(--pine) transparent;
}
.locator-sidebar::-webkit-scrollbar { width: 8px; }
.locator-sidebar::-webkit-scrollbar-track { background: transparent; }
.locator-sidebar::-webkit-scrollbar-thumb { background: var(--pine); border-radius: var(--radius); }
.locator-country-group + .locator-country-group {
  border-top: var(--rule-width) solid var(--rule);
}
.locator-country-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 16px 24px;
  /* kleur-canon 2026-07-07: zelfde sage-20 fill als de gevulde .locator-grid
     eromheen (gradient over Paper = opaque, dus sticky-veilig) — geen
     Paper-stroken meer op de sage sidebar */
  background: var(--sage-wash);
  position: sticky;
  top: 0;
  z-index: 2;
  cursor: pointer;
  user-select: none;
  border-bottom: var(--rule-width) solid var(--rule);
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  /* Zie de pin-uitleg bij de grote Sage-Wash-groep: het vlak blijft licht, dus de
     tokens erbinnen ook, anders flipt de inhoud in dark mode naar licht-op-licht. */
  --bg: var(--wash-bg);
  --pine: var(--wash-pine);
  --pine-mute: var(--wash-mute);
  --rule: var(--wash-rule);
}
@media (hover: hover) and (pointer: fine) {
  .locator-country-header:hover { background: var(--pine); color: var(--bg); }
}
.locator-country-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
.locator-country-count {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: inherit;
}
.locator-store-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: var(--rule-width) solid var(--rule);
  cursor: pointer;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.locator-store-item:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .locator-store-item:hover { background: var(--pine); color: var(--bg); }
}
.locator-store-item.active { background: var(--pine); color: var(--bg); }
.locator-store-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.locator-store-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: inherit;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.locator-store-region, .locator-store-url {
  font-family: var(--mono);
  font-size: 16px;
  color: inherit;
  opacity: 1;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.locator-store-distance {
  flex-shrink: 0;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  color: inherit;
}
.locator-no-results {
  padding: 32px 24px;
  text-align: center;
  font-family: var(--serif);
  font-size: 20px;
  color: var(--pine-mute);
  line-height: 1.45;
}
.locator-loading {
  padding: 32px 24px;
  text-align: center;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
/* z-index:0 maakt van de kaart een eigen stapellaag, zodat Leaflet's panes (400) en zijn
   bedieningsknoppen (1000) binnen die laag blijven i.p.v. in de hoofdlaag te concurreren.
   Zonder dit wint de kaart van elk element dat eroverheen valt: de Country-dropdown zit door
   de reveal-transform op .filter-row in een eigen laag met niveau 0, dus 400 van Leaflet gaat
   daar hoe dan ook overheen, welk getal de dropdown zelf ook krijgt (Vince 2026-08-10).
   Nul en niet een hoog getal: zo hoeven we nergens een wedloop met Leaflet aan te gaan. */
.locator-map { position: relative; z-index: 0; background: var(--bg); }
/* De filterbalk moet boven de zijbalk uitkomen. Hij zit door de reveal-transform al in een
   eigen stapellaag, maar die staat op niveau 0, en de landkoppen in de resellerlijst zijn
   sticky met z-index 2. Daardoor liep de opengeklapte Country-dropdown ónder die koppen door
   (Vince 2026-08-10, screenshot met "AUSTRIA 2" dwars door het paneel). Met een eigen niveau
   komt de hele balk inclusief dropdown boven de lijst. Zelfde oplossing als op de
   contactpagina, die deze regel page-side al had. */
.locator-grid ~ .filter-row,
.section .filter-row { position: relative; z-index: 10; }
.locator-map .leaflet-container {
  background: var(--bg);
  font-family: var(--mono);
  width: 100%;
  height: 100%;
}
.locator-map .leaflet-tile-pane { filter: grayscale(1); }
.locator-map-loading {
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  pointer-events: none;
}
.locator-map-spinner {
  width: 32px;
  height: 32px;
  border: var(--rule-width) solid var(--rule);
  border-top-color: var(--pine);
  border-radius: 50%;
  animation: kf-spin 900ms linear infinite;
}
@keyframes kf-spin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }
.locator-map-loading-text {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
/* Leaflet controls — v3 brand override */
.locator-map .leaflet-control-zoom {
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  overflow: hidden;
  background: var(--bg);
  box-shadow: none;
  margin: 16px;
}
.locator-map .leaflet-control-zoom a {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--pine);
  border: none;
  border-bottom: var(--rule-width) solid var(--rule);
  width: 32px;
  height: 32px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.locator-map .leaflet-control-zoom a:last-child { border-bottom: none; }
@media (hover: hover) and (pointer: fine) {
  .locator-map .leaflet-control-zoom a:hover { background: var(--pine); color: var(--bg); }
}
.locator-map .leaflet-control-attribution {
  background: var(--bg);
  color: var(--pine-mute);
  font-family: var(--mono);
  font-size: 16px;
  border: var(--rule-width) solid var(--rule);
  border-right: none;
  border-bottom: none;
  padding: 8px;
}
.locator-map .leaflet-control-attribution a { color: var(--pine); }
@media (hover: hover) and (pointer: fine) {
  .locator-map .leaflet-control-attribution a:hover { color: var(--pine-mute); }
}
/* Marker */
.locator-marker {
  width: 16px;
  height: 16px;
  background: var(--pine);
  border: 1px solid var(--bg);
  border-radius: 50%;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
  animation: kf-marker-in 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  cursor: pointer;
}
.locator-marker.active { transform: scale(1.3); }
@media (hover: hover) and (pointer: fine) {
  .locator-marker:hover { transform: scale(1.3); }
}
@keyframes kf-marker-in {
      0%   { opacity: 0; transform: scale(0); }
      60%  { opacity: 1; transform: scale(1.3); }
      100% { opacity: 1; transform: scale(1); }
    }
/* Popup */
.leaflet-popup-content-wrapper.locator-popup-wrapper {
  background: var(--bg);
  border: var(--rule-width) solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}
.leaflet-popup-content { margin: 0; min-width: 240px; }
.leaflet-popup-tip { background: var(--bg); border: var(--rule-width) solid var(--rule); box-shadow: none; }
.leaflet-popup-close-button {
  color: var(--pine-mute) !important;
  font-size: 16px;
  padding: 8px 8px 0 0 !important;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .leaflet-popup-close-button:hover { color: var(--pine) !important; }
}
.locator-popup-inner { padding: 24px; }
.locator-popup-name {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--pine);
  line-height: 1.45;
  margin-bottom: 8px;
}
.locator-popup-country {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-bottom: 16px;
}
.locator-popup-distance {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-bottom: 16px;
}
a.locator-popup-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--pine);
  position: relative;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  text-decoration: none;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
a.locator-popup-link::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  a.locator-popup-link:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  a.locator-popup-link:hover { color: var(--bg); }
}
/* Reseller-program block (bordered group) */
.program-block {
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
  padding: 48px;
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}
.program-text {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.program-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.program-body {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine-mute);
  max-width: 560px;
}
/* Responsive */
@media (max-width: 1023px) {
  .filter-row { grid-template-columns: 1fr 1fr; }
  .locator-grid { grid-template-columns: 1fr; grid-template-rows: 400px 400px; height: auto; }
  .locator-sidebar {
    border-right: none;
    border-bottom: var(--rule-width) solid var(--rule);
  }
}
@media (max-width: 767px) {
  .filter-row { grid-template-columns: 1fr; }
  .locator-stats-row .btn-secondary { width: 100%; }
  .program-block { padding: 32px; }
}
@media (prefers-reduced-motion: reduce) {
  .locator-marker { animation: none !important; opacity: 1 !important; transform: none !important; }
  .locator-map-spinner { animation: none !important; }
}
/* ===== uit: Homepage/style.css ===== */
@font-face {
  font-family: 'Mona Sans';
  src: url('MonaSansVF.ttf');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Mona Sans';
  src: url('MonaSansVF-Italic.ttf');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Newsreader';
  src: url('Newsreader.ttf');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
/* Universal anchor reset — voorkomt browser-default underlines op alle a's,
   inclusief de geïnjecteerde header-buttons (Contact us .nav-btn). Specifieke
   links die wél een underline willen (.reading a, .hero-lead a) overschrijven
   dit verderop. */
a { color: inherit; text-decoration: none; }
:root {
  --bg: #F4F5F0;
  --pine: #1B2A1F;
  --pine-mute: #455E4F;
  --rule: #455E4F;
  --radius: 0;
  /* Sage Wash (§09) — de enige opacity-afgeleide surface-tint (Sage op 18%),
     gebruikt als fill voor kaarten/data-panelen/inputs + de storefront-masthead.
     Eén bron; alle plekken wijzen hierheen i.p.v. de gradient hard te coderen.
     In light mode ligt de tint over Paper; in dark mode over Pine (zie het
     dark-blok verderop), zodat een tabel of paneel met het thema meedraait.

     De vier --wash-*-tokens horen erbij: elk vlak dat de wash draagt pint ze
     door op --bg/--pine/--pine-mute/--rule, zodat de INHOUD van dat vlak
     dezelfde kant op klapt als het vlak zelf. Vlak en pins moeten altijd samen
     omgaan — draai je alleen het vlak, dan krijg je Pine-op-Pine. */
  --sage-wash: linear-gradient(rgba(153, 190, 167, 0.18), rgba(153, 190, 167, 0.18)), #F4F5F0;
  --wash-bg: #F4F5F0;
  --wash-pine: #1B2A1F;
  --wash-mute: #455E4F;
  --wash-rule: #455E4F;
  --mono: 'Mona Sans', system-ui, sans-serif;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
}
html {
  scrollbar-width: none;
  -ms-overflow-style: none;
  /* overscroll-behavior-y + scroll-snap-type (y proximity) die hier stonden
     waren homepage-scoped (#scene-canvas + step-snap; homepage draait op eigen
     style.css) — verwijderd, ze lekten naar elke master-pagina. scroll-behavior
     smooth blijft: jump-links scrollen overal soepel (canon-gedrag). */
  scroll-behavior: smooth;
}
.step { scroll-snap-align: start; }
/* Hero (step 0) krijgt geen snap-align — anders trekt proximity je bij page
   load van scrollY=0 (chrome + Hero in view) meteen omlaag naar offsetTop=133
   (Hero alleen, chrome uit beeld). Snap blijft actief op steps 1-3. */
.step[data-step="0"] { scroll-snap-align: none; }
html, body {
  background: var(--bg);
  color: var(--pine);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
#grain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  opacity: 0.015;
  mix-blend-mode: overlay;
  image-rendering: pixelated;
}
/* ───────── Scroll-hint (bottom, Label token) ───────── */
.scroll-hint {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: var(--pine-mute);
  pointer-events: none;
  transition: opacity 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-hint.hidden { opacity: 0; }
.scroll-hint-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.55;
}
.scroll-hint-arrow {
  width: 14px;
  height: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.4; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}
/* ───────── Scroll container + steps ───────── */
.scroll-container { position: relative; z-index: 1; }
.step {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 80px max(48px, calc((100vw - 1360px) / 2 + 48px));
}
.content {
  max-width: 560px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 800ms cubic-bezier(0.4, 0, 0.2, 1), transform 800ms cubic-bezier(0.4, 0, 0.2, 1);
}
.content.visible { opacity: 1; transform: translateY(0); }
/* Hero-step (sect 0) krijgt een cascade-reveal i.p.v. block-fade — eyebrow,
   title, lead en CTA's komen staggered op bij page-load. Past bij een
   editorial entrance: anchor-punt eerst, focal moment daarna, dan body. */
.step[data-step="0"] .content { opacity: 1; transform: none; transition: none; }
.step[data-step="0"] .content > .section-eyebrow, .step[data-step="0"] .content > .hero-title, .step[data-step="0"] .content > .hero-lead, .step[data-step="0"] .content > .cta-row { opacity: 0; transform: translateY(20px); }
.step[data-step="0"] .content.visible > .section-eyebrow {
  animation: kf-hero-rise 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms forwards;
}
.step[data-step="0"] .content.visible > .hero-title {
  animation: kf-hero-rise 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 250ms forwards;
}
.step[data-step="0"] .content.visible > .hero-lead {
  animation: kf-hero-rise 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 450ms forwards;
}
.step[data-step="0"] .content.visible > .cta-row {
  animation: kf-hero-rise 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 600ms forwards;
}
@keyframes kf-hero-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.step[data-step="0"] .content { max-width: 1080px; }
.step[data-step="0"] .hero-lead { max-width: 560px; }
/* ───────── Eyebrows (Label token + editorial num) ───────── */
.section-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  line-height: 1.55;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.section-eyebrow:not([data-num])::after { display: none; }
.content.visible .section-eyebrow::after {
  animation: kf-eyebrow-line 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 100ms forwards;
}
/* Hero eyebrow uses the same class — geen data-num, geen line. Tighter mb. */
.hero-eyebrow { margin-bottom: 24px; }
/* ───────── Brand badge (§34) ───────── */
.badge-3d4m {
  display: inline-block;
  background: var(--pine);
  color: var(--bg);
  padding: 4px 6px;
  border-radius: 0;
  vertical-align: baseline;
  margin-right: 2px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
}
/* Serif-titel-uitzondering (BI3 §34): in een Newsreader-titel niet de 28px
   serif erven maar vaste Mona 16px; de rest zit in de basisregel hierboven. */
.tier-card-title .badge-3d4m, .data-block-title .badge-3d4m { font-family: var(--mono); font-size: 16px; }
/* ───────── Display typography (Newsreader serif) ───────── */
.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(44px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--pine);
  max-width: 920px;
  margin-bottom: 8px;
}
.section-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--pine);
  max-width: 880px;
  margin-bottom: 32px;
}
/* ───────── Body (Mona Sans, Body token) ───────── */
.reading {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  color: var(--pine);
  max-width: 720px;
}
/* ───────── Trace-style bullets (compact serif lead + Body) ───────── */
.bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bullets li { padding: 0; }
.bullets li + li { margin-top: 20px; }
.bullet-title {
  display: block;
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  margin-bottom: 4px;
}
.bullet-body {
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.5;
  color: var(--pine);
}
/* ───────── CTA row + buttons (§11 canon) ───────── */
.cta-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}
.btn-primary, .btn-secondary { font-family: var(--mono); text-decoration: none; }
.btn-with-arrow svg { width: 18px; height: 18px; }
/* ───────── Inline link (Meta token style) ───────── */
/* Inline link-styling — sluit buttons uit, anders winnen ze van .btn-primary
   door hogere specificity (.reading a = 0,1,1 vs .btn-primary = 0,1,0) en
   krijgen Pine-text + Moss-underline op een Pine button. */
.reading a:not(.btn-primary):not(.btn-secondary), .hero-lead a:not(.btn-primary):not(.btn-secondary) {
  color: var(--pine);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--pine-mute);
}
@media (hover: hover) and (pointer: fine) {
  .reading a:not(.btn-primary):not(.btn-secondary):hover, .hero-lead a:not(.btn-primary):not(.btn-secondary):hover { text-decoration-color: var(--pine); }
  /* De regel hierboven zet color OOK tijdens hover, en heeft dezelfde
     specificiteit als de §11-wipe (0,3,1) maar staat later, dus hij won. Omdat
     --pine op een donkere band omklapt naar Paper leverde dat Paper tekst op een
     Paper wipe-blok: een leeg lichtvlak zonder leesbare tekst. Gevonden op de
     PDP-heroband 2026-07-23.
     var(--bg) klapt de goede kant op in beide contexten: op een lichte band
     Paper-op-Pine, op een donkere band Pine-op-Paper.
     Bewust gescoped op .link: alleen die draagt het wipe-blok. Een kale
     prose-link heeft niets om op af te steken en zou juist onzichtbaar worden. */
  .reading a.link:not(.btn-primary):not(.btn-secondary):hover,
  .hero-lead a.link:not(.btn-primary):not(.btn-secondary):hover { color: var(--bg); }
}
.stats { display: none; }
/* ───────── Custom scroll indicator — edge-peeking pill (BI v3 §-canon) ─────────
   Hardcoded Pine/Paper i.p.v. var() — kleur switcht via .on-dark class die de JS
   per scroll-positie zet (dark journey → Paper mark; Paper parking → Pine mark). */
.scroll-rail {
  position: fixed;
  right: 0;
  top: 80px;
  bottom: 80px;
  width: 12px;
  z-index: 80;
  pointer-events: none;
}
.scroll-mark {
  position: absolute;
  right: -6px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 0;
  background: var(--pine);
  opacity: 1;
  pointer-events: auto;
  cursor: grab;
  transition: top 80ms linear,
    right 400ms cubic-bezier(0.4, 0, 0.2, 1),
    height 400ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.scroll-mark.is-scrolling, .scroll-mark.is-dragging, .scroll-mark.is-hovering { right: 0; height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .scroll-mark:hover { right: 0; height: 44px; }
}
/* ───────── Parking band (Paper, snap-band conform v3-canon) ─────────
   Editorial v3 doet band-transities via snap, niet via gradient. Parking-band
   is dus gewoon een full-Paper sectie die hard begint waar Products eindigt.
   Tijdens de 900ms snap-glide naar deze band fade't het 3D-model uit (STOPS
   p=0.75 → 1.0), dus de visuele overgang loopt mee met de animation-fade —
   geen kleurmenging op de bandgrens zelf. */
.parking-band {
  position: relative;
  z-index: 1;
  background: #F4F5F0;
  --bg: #F4F5F0;
  --pine: #1B2A1F;
  --pine-mute: #455E4F;
  color: var(--pine);
  display: flex;
  flex-direction: column;
  padding: 96px 0;
}
/* Night-mode: de vaste Paper-override hierboven negeert main.js's scroll-lerp
   volledig, dus die reageerde ook niet op de data-theme-toggle. Zelfde
   dark-token-set als overal elders (Pine/Paper/Sage), scoped op deze band. */
:root[data-theme="dark"] .parking-band {
  background: #1B2A1F;
  --bg: #1B2A1F;
  --pine: #F4F5F0;
  --pine-mute: #99BEA7;
}
.tier-section { display: flex; flex-direction: column; gap: 32px; }
.tier-section-header {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
}
.tier-section-header .section-eyebrow { margin-bottom: 32px; }
/* Header zit niet in een .content reveal-wrapper — line statisch tonen */
.tier-section-header .section-eyebrow::after { transform: scaleX(1); }
.tier-section-header .section-title { max-width: 880px; margin-bottom: 16px; }
.tier-section-header .reading { max-width: 660px; }
.tier-row-toolbar {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.tier-row-controls { display: flex; gap: 8px; flex-shrink: 0; }
.tier-arrow {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  border: 1px solid var(--pine-mute);
  background: transparent;
  color: var(--pine);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
}
.tier-arrow svg { width: 20px; height: 20px; }
@media (hover: hover) and (pointer: fine) {
  .tier-arrow:hover:not(:disabled) { background: var(--pine); color: var(--bg); border-color: var(--pine); }
}
.tier-arrow:disabled { opacity: 0.4; cursor: not-allowed; }
/* ───────── Tier-row scroller ───────── */
.tier-row-scroll {
  display: flex;
  gap: 24px;
  padding-left: max(48px, calc((100vw - 1360px) / 2 + 48px));
  padding-right: 48px;
  padding-bottom: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  align-items: stretch;
  scroll-snap-type: x proximity;
  scroll-padding-left: max(48px, calc((100vw - 1360px) / 2 + 48px));
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--pine-mute) transparent;
  cursor: grab;
  user-select: none;
}
.tier-row-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.tier-row-scroll::-webkit-scrollbar { height: 6px; }
.tier-row-scroll::-webkit-scrollbar-track { background: transparent; }
.tier-row-scroll::-webkit-scrollbar-thumb { background: var(--pine-mute); border-radius: var(--radius); }
/* ───────── Tier card ───────── */
.tier-card {
  flex: 0 0 480px;
  scroll-snap-align: start;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  color: var(--pine);
}
.tier-card-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  margin: 0;
}
.tier-card-body {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pine);
  margin: 0;
}
.tier-card-materials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-content: start;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.tier-material { display: flex; flex-direction: column; gap: 4px; }
a.tier-material-name {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine);
  text-decoration: none;
  align-self: flex-start;
}
@media (hover: hover) and (pointer: fine) {
  a.tier-material-name:hover { color: var(--pine-mute); }
}
.tier-material-desc {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pine-mute);
}
.tier-card-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: auto;
  padding-top: 24px;
}
.tier-card-actions .btn-primary, .tier-card-actions .btn-secondary { justify-content: center; }
/* ───────── Parking footer CTA ───────── */
.parking-footer-cta {
  max-width: 1360px;
  margin: 0 auto;
  padding: 0 48px;
  width: 100%;
  display: flex;
  justify-content: center;
}
/* ───────── About 3D4M section (BI v3 §20 band--light + §44 split) ─────────
   Tweede Paper-band onder de parking. Tokens lokaal Paper-overruled net als
   .parking-band; canon split-layout (2-col tekst + image-frame). */
.about-band {
  position: relative;
  z-index: 1;
  background: #F4F5F0;
  --bg: #F4F5F0;
  --pine: #1B2A1F;
  --pine-mute: #455E4F;
  color: var(--pine);
  padding: 112px 0;
  border-top: 1px solid var(--rule);
}
/* Night-mode: zelfde reden/token-set als .parking-band hierboven. */
:root[data-theme="dark"] .about-band {
  background: #1B2A1F;
  --bg: #1B2A1F;
  --pine: #F4F5F0;
  --pine-mute: #99BEA7;
}
.about-band .section-eyebrow { margin-bottom: 32px; }
.about-band .section-eyebrow::after { transform: scaleX(1); }
/* About-band section-title over de volle container-breedte (Vince 2026-08-01,
   bewuste afwijking van de 880px section-title-cap; alleen deze homepage-closer). */
.about-band .section-title { max-width: none; margin-bottom: 32px; }
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.split .reading {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.split .reading p strong, .split .reading p b { font-weight: 600; color: var(--pine); }
.visual-frame {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  margin: 0;
}
.visual-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.visual-caption {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pine-mute);
  margin: 0;
}
@media (max-width: 1023px) {
  .split { grid-template-columns: 1fr; gap: 48px; }
}
@media (max-width: 768px) {
  .tier-section { padding: 0 0 64px; gap: 24px; }
  .tier-section-header { padding: 0 24px; }
  .tier-row-toolbar { padding: 0 24px; }
  .tier-row-scroll { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
  .tier-card { flex: 0 0 88vw; padding: 24px; }
  .tier-card-materials { grid-template-columns: 1fr; }
  .parking-footer-cta { padding: 0 24px; }
  .about-band { padding: 64px 0; }
}
/* ───────── Loader (Label token + Display M serif percent) ───────── */
#loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: #1B2A1F;
  color: #F4F5F0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#loader.hidden { opacity: 0; pointer-events: none; }
.loader-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #99BEA7;
  line-height: 1.55;
}
.loader-percent {
  font-family: var(--serif);
  font-size: clamp(32px, 4vw, 52px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.0;
  font-variant-numeric: tabular-nums;
  color: #F4F5F0;
}
.loader-bar {
  width: 240px;
  height: 1px;
  background: #455E4F;
  overflow: hidden;
}
.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: #F4F5F0;
  transition: width 250ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Dark section override via CSS variables — all children resolve to the inverted palette */
.band--dark {
  background: #1B2A1F;
  --bg: #1B2A1F;
  --pine: #F4F5F0;
  --pine-mute: #99BEA7;
  --border: #455E4F;
  --rule: #455E4F;
  color: #F4F5F0;
}
/* Moss band (§19 R15): mid-tone dark-family closer, altijd SAMEN met .band--dark.
   Overschrijft alleen de achtergrond naar Moss en tilt border/rule/mute naar Sage
   zodat lijnwerk zichtbaar blijft op de mid-green; ink (Paper) erft van .band--dark.
   Staat NA .band--dark zodat de background-override wint. Bron van waarheid voor de
   R15-afsluiter; page-side .band--moss / .about-band-varianten zijn hiermee redundant. */
.band--moss {
  background: #455E4F;
  --bg: #455E4F;
  --pine-mute: #99BEA7;
  --border: #99BEA7;
  --rule: #99BEA7;
}
/* Dark mode — toggled via #theme-toggle in the site-header.
       Every section uses Pine background, Paper text, Sage as muted.
       .band--dark already carries these values, so it stays consistent. */
:root[data-theme="dark"] { --bg: #1B2A1F; --pine: #F4F5F0; --pine-mute: #99BEA7; }
/* Sage Wash in dark mode (Vince 2026-07-27): dezelfde 18%-tint, maar over Pine in
   plaats van over Paper. Daarmee draait elk vlak dat de wash draagt (tabellen,
   data-panelen, kaarten, inputs, de masthead) mee met het thema in plaats van als
   lichte plaat op een donkere pagina te blijven liggen. De --wash-*-pins gaan in
   dezelfde beweging om, zodat de inhoud licht wordt waar het vlak donker wordt.
   Zonder die tweede helft krijg je Pine-op-Pine, wat een eerdere poging de das om deed. */
:root[data-theme="dark"] {
  --sage-wash: linear-gradient(rgba(153, 190, 167, 0.18), rgba(153, 190, 167, 0.18)), #1B2A1F;
  --wash-bg: #1B2A1F;
  --wash-pine: #F4F5F0;
  --wash-mute: #99BEA7;
  --wash-rule: #99BEA7;
}
.band--dark .nav-btn { background: #F4F5F0; color: #1B2A1F; }
.band--dark .pill { border-color: #99BEA7; color: #F4F5F0; background: transparent; }
@media (hover: hover) and (pointer: fine) {
  .band--dark .pill:hover { border-color: #F4F5F0; color: #1B2A1F; }
}
.band--dark .pill.active { background: #F4F5F0; border-color: #F4F5F0; color: #1B2A1F; }
/* qty-btn uses var(--pine)/var(--bg) which auto-flip on dark band */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--pine);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ───────── EXPERIMENT — Paper-grain global overlay (not in spec yet) ─────────
       Fixed-position SVG noise over de hele viewport, mix-blend-mode
       multiply voor subtiele papier-textuur op Paper-bg areas. Opacity 0.12. */
.paper-grain-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: multiply;
  opacity: 0.03;
}
/* ───────── EXPERIMENT — Masthead + folio (iteration 3) ─────────
       PDP variant: zit BOVEN het site-header injection point. Folio-
       content = de 3D4Makers-announcement-tekst. Bestaande
       announcement-bar onder de nav-bar wordt verborgen om dubbele
       tekst te voorkomen. */
.masthead-band {
  background: var(--sage-wash);
  border-bottom: 1px solid var(--rule);
}
/* Dark mode heeft hier geen eigen regel nodig: --sage-wash flipt zelf naar de
   Pine-variant, dus de band draait automatisch mee. Er stond eerst een aparte
   :root[data-theme="dark"] .masthead-band met exact diezelfde gradient; die is
   weggehaald toen de wash thema-bewust werd, zodat er niet twee generaties van
   dezelfde waarde naast elkaar leven.

   Bewust GEEN token-pins op deze band, i.t.t. de gevulde panelen verderop: het
   oppervlak flipt, dus de inhoud moet meeflippen. Het 3D4M-blokje wordt in dark
   mode een Paper-vlak met Pine-letters, en dat klopt op een donkere band. */

/* De masthead wisselt bij een thema-omschakeling van licht naar donker, dus alles
   erin moet direct meeverven. Een color-transition zou dat blokkeren: Chrome vuurt
   die niet opnieuw af bij een token-wissel, waardoor de tekst op de oude kleur bleef
   staan tot je herlaadde. De losse regels hierboven zijn al ontdaan van hun
   transitie; deze regel vangt af dat er via een andere weg alsnog eentje op landt.
   De hover-wipe zelf blijft animeren, dat is een transform op ::before. */
.masthead-band .announcement-bar-link,
.masthead-band .announcement-bar-eyebrow,
.masthead-band .announcement-bar-close,
.masthead-band .badge-3d4m { transition: none; }
/* §18: elke v3-pagina draagt z'n EIGEN masthead; de door header-footer-inject
   meegeleverde chrome-announcement (.announcement-wrap) gaat daarom uit. Dit is
   een pagina-beslissing (hoort bij §18-anatomy), geen chrome-regel — vandaar in
   de master en niet in header-footer-v3.css (die 'm juist positioneert). */
.announcement-wrap { display: none !important; }
/* ───────── Hero band (page-header + spec) ───────── */
/* Meer lucht tussen de sticky header en de hero-tekst (Vince 2026-07-07):
   top 64→112, bottom blijft 64. */
.hero-band { padding: 112px 0 64px; }
.hero-lead {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  color: var(--pine);
}
/* ───────── Spec row (3-col: image / buy / cta) editorial ───────── */
.spec-row {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(0, 1.15fr) minmax(260px, 1fr);
  gap: 0;
  margin-top: 64px;
  /* geen row-brede border-top: het nieuwe model is losse §46-kaarten met
     gap, elke cel draagt z'n eigen 4px Moss hood. De oude row-border liep
     als 1px lijn over de gaps door (fix 2026-07-07). */
}
.spec-row > * { padding: 32px; }
.spec-row > * + * {
  border-left: var(--rule-width) solid var(--rule);
}
.spec-image-cell { padding: 0; background: transparent; overflow: hidden; }
.spec-image-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.spec-cell { display: flex; flex-direction: column; gap: 24px; }
.config-block { display: flex; flex-direction: column; gap: 16px; }
/* EEN KWART LAGER (Vince, 2026-08-26). Stond op 8px/16px met 16px tekst en werd
   daarmee 43px hoog, even hoog als een primaire knop, terwijl het een keuze uit een
   rij is en geen actie. Op een productpagina staan er tien tot eenentwintig onder
   elkaar en dan weegt die stapel zwaarder dan alles eromheen.
   4px 10px bestond al in deze canon (vier keer), dus geen nieuwe waarde; met 14px
   tekst komt de hoogte op 32 uit, precies driekwart van 43. De 14 stond tot nu toe
   los in de compact-laag; die regel is daar weggehaald nu 'ie hier de basis is. */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pine);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1), background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.cell-divider { height: 1px; background: var(--border); margin: 4px 0; }
.trust-list { display: flex; flex-direction: column; gap: 16px; }
.trust-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  gap: 16px;
  font-size: 16px;
  color: var(--pine);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding: 6px 8px;
  margin-left: -8px;
  border-radius: var(--radius);
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.trust-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover { color: var(--bg); }
}
.trust-row svg {
  stroke: var(--pine-mute);
  transition: stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .trust-row:hover svg { stroke: currentColor; }
}
.trust-row strong { color: inherit; font-weight: 600; }
.trust-row::after { content: '↗'; font-size: inherit; line-height: 1; }
/* CTA column — right cell of spec-row, two stacked blocks with an OR divider */
.cta-stack {
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  height: 100%;
  gap: 16px;
}
.cta-block {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  min-height: 0;
}
.cta-block-label {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
  text-transform: none;
}
.cta-block-body {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--pine);
}
.cart-block { display: flex; flex-wrap: wrap; gap: 8px; }
/* flex-basis:auto on the button resolves to its natural (nowrap) content
   width — fits beside .qty when there's room, else wraps to its own full-
   width row instead of clipping "Add to cart" onto two lines. */
.cart-block .qty { flex: 0 0 auto; }
.cart-block .btn-primary { flex: 1 1 auto; white-space: nowrap; }
.qty {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
  height: 40px;
}
.qty-btn {
  width: 32px;
  height: 100%;
  background: transparent;
  border: none;
  color: var(--pine);
  font-size: 16px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* ───────── Buttons — ink-wipe ───────── */
.btn-primary, .btn-secondary {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 24px;
  height: 44px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--radius);
  overflow: hidden;
  isolation: isolate;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Pine-fill wipe — grows in from the top on hover (scaleY canon) */
.btn-primary::before, .btn-secondary::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
/* Primary — ink filled, wipes to paper on hover.
       color uses var(--bg) (not hardcoded #F4F5F0) so it inverts with
       :root[data-theme="dark"] — bg becomes Pine in dark mode, text becomes
       Pine-on-Paper button (inverted). */
.btn-primary { color: var(--bg); background: var(--pine); border: 1px solid var(--pine); }
/* Secondary — ink-bordered paper, wipes to ink on hover */
.btn-secondary { color: var(--pine); background: transparent; border: 1px solid var(--pine); }
/* Dark-band overrides */
.band--dark .btn-primary { color: #1B2A1F; background: #F4F5F0; border-color: #F4F5F0; }
.cta-or-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.cta-or-divider::before, .cta-or-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}
/* Link — single canon, see BI v3 §11. Wipe + automatic ↗ via ::after.
       Scoped to `main` so it doesn't bleed into the header/footer chrome
       (which lives outside main and is governed by shared/header-footer-v3.css). */
main .link,
main .metafield-rich_text_field a:not([class]) {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--mono);
  font-size: 16px;
  color: inherit;
  position: relative;
  padding: 2px 5px;
  margin-left: -5px;
  border-radius: var(--radius);
  isolation: isolate;
  text-decoration: none;
  cursor: pointer;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Inline-in-body context (BI §11 r1080-1101) — main-scoped conform de 404-pilot
   zodat chrome-copy er niet door geraakt wordt. Font-size erft van de paragraaf. */
/* Shopify rendert een rich-text-metafield als kale <a>-tags zonder onze
   .link-klasse, dus die vielen buiten de §11-canon: werkende links zonder wipe.
   De selector hierboven pakt ze mee, want een anker zonder klasse binnen een
   gerenderd rich-text-veld is per definitie een link in lopende tekst. Geen
   ::after: body-links dragen geen pijl (2026-08-18). */
main p .link,
main .metafield-rich_text_field a:not([class]) {
  font-size: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  main p .link:hover,
  main .metafield-rich_text_field a:not([class]):hover { text-decoration: none; }
}
main p .link::after { content: none; }
main p .link[href^="#"]:not([href="#"])::after { content: none; }
main p .link[download]::after { content: none; }
main .link[href^="#"]:not([href="#"])::after { content: '\2198'; }
main .link[download]::after { content: '\2193'; }
/* ───────── Section jump bar (own band, sits below hero) ───────── */
.jump-band { padding: 16px 0; }
/* ───────── Data block (boxed, with table inside) ───────── */
.data-block { margin-top: 64px; border: var(--rule-width) solid var(--rule); padding: 32px; }
.data-table td { padding: 16px 16px 16px 0; color: var(--pine); border-bottom: 1px solid var(--border); }
/* ───────── Visual column ───────── */
.visual { display: flex; flex-direction: column; gap: 16px; }
/* ───────── Downloads (§27 — §11 Tile stack pattern) ───────── */
.downloads { display: flex; flex-direction: column; gap: 16px; }
.download-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  padding: 24px;
  border: var(--rule-width) solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.download-row::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--pine);
  border-radius: var(--radius);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.download-row::after {
  content: '↗';
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 20px;
  line-height: 1;
  color: inherit;
}
@media (hover: hover) and (pointer: fine) {
  .download-row:hover::before { transform: scaleY(1); }
}
@media (hover: hover) and (pointer: fine) {
  .download-row:hover { color: var(--bg); }
}
.download-row-icon {
  width: 22px;
  height: 22px;
  stroke: var(--pine-mute);
  transition: stroke 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .download-row:hover .download-row-icon { stroke: currentColor; }
}
.download-row-name { font-size: 16px; font-weight: 600; color: inherit; }
.download-row-meta {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  margin-top: 4px;
  transition: color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (hover: hover) and (pointer: fine) {
  .download-row:hover .download-row-meta { color: inherit; }
}
/* ───────── Big-stat display (no cards, dark band) ───────── */
.bigstat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 48px;
  border: var(--rule-width) solid var(--rule);
}
/* Stacked variant — vertical column, lives in split right cell */
.bigstat-grid--stack { grid-template-columns: 1fr; margin-top: 0; }
.bigstat-grid--stack .bigstat { padding: 24px 32px; }
.bigstat-grid--stack .bigstat + .bigstat {
  border-left: none;
  border-top: var(--rule-width) solid var(--rule);
}
/* ───────── Numbered trace items (no cards) ───────── */
.trace-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin-top: 80px;
  border: var(--rule-width) solid var(--rule);
}
.trace-item {
  padding: 48px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.trace-item + .trace-item {
  border-left: var(--rule-width) solid var(--rule);
}
/* Stacked variant — vertical column, lives in split right cell */
.trace-grid--stack { grid-template-columns: 1fr; margin-top: 0; }
.trace-grid--stack .trace-item + .trace-item {
  border-left: none;
  border-top: var(--rule-width) solid var(--rule);
}
/* Visual that spans the full container width below a split */
.visual--full { margin-top: 80px; }
.visual--full .visual-frame { aspect-ratio: 21 / 9; }
.trace-num { font-family: var(--mono); font-size: 16px; color: var(--pine-mute); }
/* ───────── Document figure (Sectie 5 — portrait CoA) ───────── */
.doc-figure {
  position: relative;
  background: #F4F5F0;
  --bg: #F4F5F0;
  --pine: #1B2A1F;
  --pine-mute: #455E4F;
  --rule: #455E4F;
  color: var(--pine);
  border: var(--rule-width) solid var(--rule);
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 0 #F4F5F0,
        0 22px 44px -22px #99BEA7;
}
.doc-figure::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid #455E4F;
  pointer-events: none;
}
.doc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.doc-header-id { color: var(--pine); font-weight: 600; }
.doc-title { padding: 16px 0; border-bottom: 1px solid var(--rule); }
.doc-title-eyebrow {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-bottom: 8px;
}
.doc-title-name {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--pine);
}
.doc-points {
  list-style: none;
  margin: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 16px 0;
}
.doc-point {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 16px;
  align-items: start;
}
.doc-point-num {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--pine-mute);
  padding-top: 2px;
}
.doc-point-text { display: flex; flex-direction: column; gap: 2px; }
.doc-point-title { font-size: 16px; font-weight: 600; color: var(--pine); }
.doc-point-body { font-size: 16px; color: var(--pine); line-height: 1.55; }
.doc-stamp {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
}
.doc-stamp-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border: 1.5px solid var(--pine);
  border-radius: var(--radius);
  color: var(--pine);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}
.doc-stamp-mark-dot {
  width: 6px;
  height: 6px;
  background: var(--pine);
  border-radius: 50%;
}
.trace-title {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 600;
  color: var(--pine);
  line-height: 1.2;
}
.trace-body { font-size: 16px; color: var(--pine); line-height: 1.55; }
/* ───────── CTA pair (inline, no card frame) ───────── */
.cta-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 112px;
  border: var(--rule-width) solid var(--rule);
}
/* ───────── Trusted ───────── */
.trusted-wrap {
  margin-top: 80px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
}
.trusted-wrap .link { align-self: flex-end; margin-top: 16px; }
.trusted-label {
  font-family: var(--mono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pine-mute);
  margin-bottom: 32px;
}
/* ───────── Partner logos marquee ───────── */
.marquee-outer {
  overflow: hidden;
  margin-bottom: 32px;
  mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.partner-logo {
  height: 32px;
  background: var(--pine-mute);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
.marquee-track .partner-logo { width: 110px; flex-shrink: 0; }
@media (hover: hover) and (pointer: fine) {
  .partner-logo:hover { background: var(--pine); }
}
/* ───────── Responsive ───────── */
@media (max-width: 1023px) {
  .spec-row { grid-template-columns: 1fr 1fr; }
  .spec-row > *:nth-child(3) {
    grid-column: span 2;
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .bigstat-grid, .trace-grid { grid-template-columns: 1fr; }
  .bigstat + .bigstat, .trace-item + .trace-item {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .partner-logo { mask-position: center; -webkit-mask-position: center; }
}
@media (max-width: 767px) {
  .container { padding: 0 24px; }
  .spec-row { grid-template-columns: 1fr; }
  /* Kerncijfers kleiner op een telefoon (Vince 2026-08-10). De waarde stond op de onderkant van
     clamp(44px, 5vw, 64px), en 44px serif is buiten proportie voor woorden als "Worldwide" of
     "Netherlands" in een kolom van 340px: het blok schreeuwde harder dan de sectiekop erboven.
     Naar 28, met het label mee van 16 naar 14, anders gaat het onderschrift het cijfer
     overstemmen. Beide maten staan al in de canon; de compact-laag geeft dit label op desktop
     ook 14. Per blok 174 -> 151px.
     Staat bewust in DIT mobiele blok en niet in het eerdere op r3613: de basisregel voor
     .bigstat-value staat op r4314 en die wint van elke gelijk-specifieke regel daarvóór.
     Raakt ook de PDP, publicaties en education discount, die dit component delen. */
  .bigstat-value { font-size: 28px; }
  .bigstat-label { font-size: 14px; }
  /* Kaart vierkant op een telefoon (Vince 2026-08-10), net als op contact. Het locator-raster
     zet op tablet en mobiel twee vaste rijen van 400px; die tweede rij gaat hier naar auto,
     zodat de verhouding op de kaart zelf de hoogte bepaalt: 340x400 wordt 340x340. Leaflet
     heeft een definitieve hoogte nodig en die krijgt het via de aspect-ratio.
     Bewust in DIT blok en niet bij de andere locator-regels: die staan eerder in het bestand
     en zouden van een latere generatie verliezen. */
  .locator-grid { grid-template-rows: 400px auto; }
  .locator-map { aspect-ratio: 1 / 1; }
  /* 2026-07-22: hier stonden twee mobiele rand-correcties die de linkerrand van
     elke cel weghaalden en er een dunne bovenrand voor in de plaats zetten. Die
     hoorden bij het OUDE model, waarin de cellen tegen elkaar aan lagen en één
     gedeelde verticale scheidingslijn droegen; op mobiel verviel die lijn en werd
     hij horizontaal. Sinds 2026-07-07 zijn het losse kaarten met een gap, elk met
     een eigen volledige rand en 4px Moss-hood. Daardoor sloopten ze alleen nog de
     linkerkant van elke kaart, en met !important kon de pagina er niet omheen.
     Niet opnieuw toevoegen zonder eerst te kijken welk model de kaarten dragen. */
  .spec-row > *:nth-child(3) { grid-column: auto; }
  /* Vierkant op mobiel (Vince 2026-08-11). Stond op een vaste hoogte van 260px, wat bij
     een kolombreedte van 327 een liggende bak van 1,26:1 gaf terwijl 32 van de 35
     productfoto's zelf 1:1 zijn — die werden dus onnodig boven en onder afgesneden. Met
     1/1 vult de foto de cel exact.
     De object-position stond op 'center top', wat hoorde bij die lage bak: bij een
     vierkante bron hield dat de spoel bovenaan. In een vierkante cel snijdt die bron
     helemaal niet meer, dus de regel deed alleen nog kwaad bij de drie staande
     Magigoo-foto's (2:3): daar werd het flesje doormidden gesneden terwijl de lege
     witruimte erboven wel in beeld bleef. Weggehaald, zodat de basisregel centreert en
     het hele flesje past. Niet terugzetten zonder eerst een Magigoo-PDP te bekijken. */
  .spec-image-cell { aspect-ratio: 1 / 1; height: auto; min-height: unset; }
  .spec-image-cell img { height: 100%; min-height: unset; }
  .split { grid-template-columns: 1fr; gap: 48px; }
  .cta-pair { grid-template-columns: 1fr; }
  .cta-col + .cta-col {
    border-left: none;
    border-top: var(--rule-width) solid var(--rule);
  }
  .section { padding: 80px 0; }
  .hero-band { padding: 80px 0 64px; }
  .jump-bar { flex-direction: column; align-items: stretch; gap: 16px; }
  .jump-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px; }
  .data-block-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}
/* ───────── Scroll-reveal animations (keyframes-based, race-condition-proof) ───────── */
.anim-fade-up { opacity: 0; transform: translateY(32px); }

/* Een open keuzelijst moet boven de velden eronder blijven, óók terwijl die nog
   in-animeren. .anim-fade-up draait 900ms een transform en dat maakt een eigen
   stapelcontext; een veld dat later in de DOM staat verft daardoor over het paneel
   heen, dat er met z-index 20 al ligt. Zichtbaar op Contact: kaart aanklikken en
   meteen de Industry-lijst openen gaf een half doorzichtig paneel met de labels van
   de velden eronder er dwars doorheen (Vince 2026-08-07). Na afloop van de animatie
   verdwijnt het vanzelf, want de laatste keyframe zet transform terug op none; deze
   regel dekt het venster ertussen. Raakt elke .bi-select op de site. */
.field:has(.bi-select.is-open) { position: relative; z-index: 30; }
@media (prefers-reduced-motion: reduce) {
  .anim-fade-up { opacity: 1 !important; transform: none !important; animation: none !important; }
  .anim-clip-wipe { clip-path: none !important; animation: none !important; }
  .section-eyebrow::after { transform: scaleX(1) !important; animation: none !important; }
  .rv-inner { transform: none !important; animation: none !important; }
  .marquee-track { animation: none !important; flex-wrap: wrap; gap: 48px; }
  .marquee-track .partner-logo[aria-hidden="true"] { display: none; }
}
/* ───────── Dev tools (hidden) ───────── */
#__v4_admin { display: none !important; }

/* ═════════ Kaart & data-panel kleur-canon (Vince 2026-07-07) ═════════
   Elk standalone omkaderd content-paneel (kaart, tabel-compartment,
   stat-grid, bordered lijst-shell, form-paneel) draagt de kaart-
   behandeling: Sage-20 fill + 4px Moss cutoff-top (BI v3 §09/§39/§46).
   Dit blok staat bewust ONDERAAN de master en wint dus binnen de master.
   Page-blokken laden later en mogen alleen neutraliseren bij nesting
   (geen fill-in-fill) of gedocumenteerde uitzonderingen.
   Bewust UITGEZONDERD: .doc-figure (wit certificaat-document),
   .cta-block + .spec-row-cellen (Pine buy-box op dark hero),
   .modal / .picker / .bi-select-panel (§53 floating dialogs),
   .masthead-band (eigen §18 sage-regel), .visual-frame (beeld-frame),
   .legal-shell / .form-stack (puur layout, geen box), en dense rijen
   bínnen een gevulde shell (.ct-row, .rate-row, .terms-item,
   .locator-store-item, .featured-item, tabel-rijen). */
.table-compartment, .data-block, .cart-items, .catalog-table,
.bigstat-grid, .trace-grid,
.terms-list, .address-grid, .eligibility-grid, .step-grid, .step-list,
.benefit-grid, .carrier-strip, .rates-list, .locator-grid, .category-list,
.apply-grid, .hours-block, .contact-split, .summary-block,
.cart-aux-block, .empty-state, .estimate-loading, .program-block,
.demo-canvas, .downloads-state, .product-empty, .consent-toggles,
.product-grid,
.suggestion-card, .quick-card, .tile, .download-row, .cta-col,
.intent-card, .panel-card, .pay-card, .media-card,
.discount-callout, .reseller-cta {
  background: var(--sage-wash);
  border-top: 4px solid var(--rule);
  /* Sage-Wash is Paper-based en blijft licht op ELKE band, ook in dark mode (zie
     de token-comment bij §09). Zonder deze pins flipt de INHOUD wel mee en krijg je
     lichte tekst op een licht vlak: Vince meldde 2026-07-27 een step-list die in
     dark mode onleesbaar was, en hetzelfde gold voor het 3D4M-blokje in de masthead.
     De waarden zijn identiek aan :root, dus in light mode verandert er niets; dit
     repareert alleen de dark-stand. De .band--dark-uitzondering hieronder zet ze
     weer op inherit, want daar wordt het vlak juist transparant. */
  --bg: var(--wash-bg);
  --pine: var(--wash-pine);
  --pine-mute: var(--wash-mute);
  --rule: var(--wash-rule);
}
/* Flush-catalogus (§30): de shell is het paneel — cellen dragen de fill,
   de shell draagt de hood; geen hood per cel. */
.product-card {
  background: var(--sage-wash);
  /* Sage-Wash is Paper-based en blijft licht op ELKE band, ook in dark mode (zie
     de token-comment bij §09). Zonder deze pins flipt de INHOUD wel mee en krijg je
     lichte tekst op een licht vlak: Vince meldde 2026-07-27 een step-list die in
     dark mode onleesbaar was, en hetzelfde gold voor het 3D4M-blokje in de masthead.
     De waarden zijn identiek aan :root, dus in light mode verandert er niets; dit
     repareert alleen de dark-stand. De .band--dark-uitzondering hieronder zet ze
     weer op inherit, want daar wordt het vlak juist transparant. */
  --bg: var(--wash-bg);
  --pine: var(--wash-pine);
  --pine-mute: var(--wash-mute);
  --rule: var(--wash-rule);
}

/* ═════════ Kaart-groep op donkere banden (§39 dark-exceptie, 2026-07-08) ═════════
   De Sage-Wash fill + 4px hood + box/pair-borders zijn een licht-band-device (een lichte
   fill vraagt donkere tekst). Op een .band--dark/.band--moss ís de band het oppervlak: de
   kaart-groep wordt transparant + band-aware (Paper-tekst, Sage-labels), geen fill/hood/
   box/pair-rand. Structuur alleen via een Sage-divider tussen cta-kolommen. Spiegelt de
   buy-box-Pine-uitzondering (§46). Wint van de page-side light-forcing via de .band--dark-
   prefix; de knoppen vallen terug op de standaard .band--dark .btn-* (on-dark). */
.band--dark :is(.table-compartment, .data-block, .cart-items, .catalog-table,
.bigstat-grid, .trace-grid, .terms-list, .address-grid, .eligibility-grid, .step-grid,
.step-list, .benefit-grid, .carrier-strip, .rates-list, .locator-grid, .category-list,
.apply-grid, .hours-block, .contact-split, .summary-block, .cart-aux-block, .empty-state,
.estimate-loading, .program-block, .demo-canvas, .downloads-state, .product-empty,
.consent-toggles, .product-grid, .suggestion-card, .quick-card, .tile, .download-row,
.cta-col, .intent-card, .panel-card, .pay-card, .media-card, .discount-callout,
.reseller-cta, .product-card) {
  background: transparent;
  border-top: none;
  /* Pins van de light-fill terugdraaien: op een donkere band ís de band het
     oppervlak, dus de inhoud moet de band-tokens volgen (Paper-tekst). Zelfde
     truc als .band--dark .cta-col hieronder al deed. */
  --bg: inherit;
  --pine: inherit;
  --pine-mute: inherit;
  --rule: inherit;
}
.band--dark .cta-pair { border: none; }
.band--dark .cta-col {
  --bg: inherit; --pine: inherit; --pine-mute: inherit; --border: inherit; --rule: inherit;
  border: none; color: #F4F5F0;
}
.band--dark .cta-col + .cta-col { border-left: var(--rule-width) solid #99BEA7; }
.band--dark .cta-col .cta-col-title, .band--dark .cta-col .cta-col-body { color: #F4F5F0; }
.band--dark .cta-col .cta-col-label { color: #99BEA7; }
/* Reseller-program CTA (§46 kaart-schil): op de moss-closer hoort de standaard
   kaart-hood terug — dik boven, dun rondom, in de band-lijnkleur (Sage). De §39
   dark-exceptie hierboven maakt het blok terecht transparant (geen lichte plaat op
   donker) maar strippet ook de hood; dit zet alleen de hood terug (1px zijden komen
   van de basis-.program-block). .program-block is exclusief deze ene reseller-CTA
   (store-locator), dus dit raakt geen andere kaart-groep. Vince 2026-08-01. */
.band--dark .program-block { border-top: 4px solid var(--rule); }

/* CTA-pair = Pine content-panel cards op dark/moss banden (§46 Pine-uitzondering, net als de
   buy-box .cta-block; Vince 2026-07-14). Overschrijft de §39 dark-strip specifiek voor .cta-col:
   hele kaarten met 4px Moss-top + 1px box + Pine-fill i.p.v. het transparant-divider-model.
   Tekst blijft licht + labels Sage (zoals hierboven), knoppen op-dark — klopt op Pine. */
.band--dark .cta-pair, .band--moss .cta-pair { gap: 16px; }
.band--dark .cta-col, .band--moss .cta-col {
  padding: 48px;
  border: var(--rule-width) solid var(--rule);
  border-top: 4px solid var(--rule);
  border-radius: 0;
  background: #1B2A1F;
  color: #F4F5F0;
}
.band--dark .cta-col + .cta-col, .band--moss .cta-col + .cta-col {
  border-left: var(--rule-width) solid var(--rule);
}

/* ═════════ Form-veld kleur-canon (Vince 2026-07-07) ═════════
   Invoervelden krijgen dezelfde Sage-20 fill als de tabellen/kaarten, zodat
   een veld naast een sage-tabel niet als wit gat opvalt. BEWUST GEEN 4px hood:
   die is het paneel/kaart-signaal — een input houdt z'n platte 1px box, en de
   focus-state (border → Pine) blijft de affordance. Alleen op lichte banden;
   dark/moss-band + Pine-cel velden uitgezonderd (sage-over-Paper is licht).
   Buiten scope (blijven band-aware / eigen styling): .qty-stepper (number-
   control), .picker-search (dark compare-popover), chrome .dropdown-search +
   .currency-dialog-input. Dit blok staat onderaan de master en wint. */
.input, .textarea, .cart-textarea, .search, .bi-select-trigger {
  background: var(--sage-wash);
  /* Zie de pin-uitleg bij de grote Sage-Wash-groep: het vlak blijft licht, dus de
     tokens erbinnen ook, anders flipt de inhoud in dark mode naar licht-op-licht. */
  --bg: var(--wash-bg);
  --pine: var(--wash-pine);
  --pine-mute: var(--wash-mute);
  --rule: var(--wash-rule);
}
/* .select apart: de chevron is een background-IMAGE, dus de sage-fill als
   tweede laag stapelen i.p.v. de shorthand (die de chevron zou wissen). */
.select {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23455E4F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"),
    linear-gradient(rgba(153, 190, 167, 0.18), rgba(153, 190, 167, 0.18));
  background-repeat: no-repeat, no-repeat;
  background-position: right 16px center, center;
  background-size: 16px 16px, cover;
  background-color: #F4F5F0;
}
/* Dark/moss-band velden terug naar transparant (band-aware) — sage-fill is licht */
.band--dark .input, .band--dark .textarea, .band--dark .cart-textarea,
.band--dark .search, .band--dark .bi-select-trigger,
.band--moss .input, .band--moss .textarea, .band--moss .cart-textarea,
.band--moss .search, .band--moss .bi-select-trigger {
  background: transparent;
}

/* ═════════ 3D4M-badge op donkere banden → Sage (Vince 2026-07-07) ═════════
   Het merk-blokje popt sterker als Sage-op-Pine dan als de Paper-chip. Alleen
   op dark/moss-banden (storefront hero-eyebrows, moss-secties, dark demo's).
   Op lichte banden + de sage-20 announcement + de sage-20 catalogus-kaarten
   blijft het de standaard chip (background var(--pine), color var(--bg)). De
   homepage-hero draagt z'n eigen .hero-eyebrow-scope (eigen style.css). */
.band--dark .badge-3d4m,
.band--moss .badge-3d4m {
  background: #99BEA7;
  color: #1B2A1F;
}

/* Container-lijn-uitlijning (2026-07-08): scroll-journey steps en tier-blokken volgen
   de .container-kolom (1360px / 48px gutter; tablet 24px), zodat hero, producten-rail
   en chrome dezelfde linkerlijn delen. */
@media (min-width: 768px) and (max-width: 1023px) {
  .step { padding-left: 24px; padding-right: 24px; }
  .tier-section-header, .tier-row-toolbar, .parking-footer-cta { padding: 0 24px; }
  .tier-row-scroll { padding-left: 24px; padding-right: 24px; scroll-padding-left: 24px; }
}

/* ═══════ COMPACT DEFAULT (2026-07-08) ═══════
   Site-brede verkleining (~x0.8-0.85, Vince-besluit): compact is de DEFAULT.
   De admin-toggle (header-footer-inject.js) zet body.classic-type voor de oude
   maten. Bij definitieve promotie: waarden in de basisregels bakken en deze laag
   + toggle strippen.

   VANAF 768 EN NIET MEER VANAF 1024 (Vince, 2026-08-26). Hier stond "alleen
   desktop; mobiel/tablet houden hun bestaande schaal", en dat gaf precies het
   omgekeerde van wat je wil: tussen 768 en 1023 viel alles terug op de oude,
   GROTERE maten. Op een productpagina gemeten: H1 42,2px op 1207 tegen 49,9px op
   997, hero-lead 18 tegen 20, eyebrow en knoptekst 14 tegen 16. Hoe smaller het
   scherm, hoe groter de letter.

   Mobiel (<768) blijft ongemoeid: die band heeft zijn eigen maten per pagina en
   valt buiten deze query. Alle 84 regels hieronder zijn verkleiningen, dus op
   tablet werken ze dezelfde kant op als op desktop. */
@media (min-width: 768px) {
  body:not(.classic-type) .hero-title { font-size: clamp(36px, 3.5vw, 52px); }
  body:not(.classic-type) .section-title { font-size: clamp(28px, 3vw, 42px); }
  body:not(.classic-type) .hero-lead { font-size: 18px; }
  body:not(.classic-type) .tier-card-title { font-size: 24px; }
  body:not(.classic-type) .bullet-title { font-size: 24px; }
  body:not(.classic-type) .price-value { font-size: 24px; }
  body:not(.classic-type) .section-eyebrow { font-size: 14px; }
  body:not(.classic-type) .eyebrow { font-size: 14px; }
  body:not(.classic-type) .header-eyebrow { font-size: 14px; }
  body:not(.classic-type) .trusted-label { font-size: 14px; }
  body:not(.classic-type) .scroll-hint-label { font-size: 14px; }
  body:not(.classic-type) .announcement-bar-eyebrow { font-size: 14px; }
  body:not(.classic-type) .btn-primary { height: 36px; padding: 0 16px; font-size: 14px; }
  body:not(.classic-type) .btn-secondary { height: 36px; padding: 0 16px; font-size: 14px; }
  body:not(.classic-type) .btn-with-arrow svg { width: 16px; height: 16px; }
  body:not(.classic-type) .tier-arrow { width: 36px; height: 36px; }
  body:not(.classic-type) .section { padding: 80px 0; }
  body:not(.classic-type) .hero-band { padding: 80px 0 48px; }
  body:not(.classic-type) .cta-row { margin-top: 24px; }
  body:not(.classic-type) .tier-card { flex: 0 0 400px; padding: 24px; }
  body:not(.classic-type) .announcement-bar { padding-top: 8px; padding-bottom: 8px; }
  body:not(.classic-type) .loader-percent { font-size: clamp(28px, 3vw, 42px); }
  body:not(.classic-type) .tier-arrow svg { width: 18px; height: 18px; }
  body:not(.classic-type) .state-link { font-size: 14px; }
  body:not(.classic-type) .pagination-btn { font-size: 14px; }
  body:not(.classic-type) .field-label { font-size: 14px; }
  body:not(.classic-type) .check-required { font-size: 14px; }
  body:not(.classic-type) .doc-lang-link { font-size: 14px; }
  body:not(.classic-type) .doc-lang-toggle { font-size: 14px; }
  body:not(.classic-type) .pub-read { font-size: 14px; }
  body:not(.classic-type) .back-to-options { font-size: 14px; }
  body:not(.classic-type) .intent-card { padding: 24px; }
  body:not(.classic-type) .suggestion-card { gap: 24px; padding: 24px; }
  body:not(.classic-type) .suggestion-label { font-size: 14px; }
  body:not(.classic-type) .suggestion-title { font-size: 24px; }
  body:not(.classic-type) .suggestion-arrow { font-size: 24px; }
  body:not(.classic-type) .data-block-title { font-size: 24px; }
  body:not(.classic-type) .data-block-note { font-size: 14px; }
  body:not(.classic-type) .data-table th { font-size: 14px; }
  body:not(.classic-type) .cart-layout { gap: 32px; }
  body:not(.classic-type) .summary-block { padding: 24px; }
  body:not(.classic-type) .summary-head { font-size: 24px; }
  body:not(.classic-type) .summary-total-label { font-size: 14px; }
  body:not(.classic-type) .summary-total-value { font-size: 24px; }
  body:not(.classic-type) .cart-aux-block { padding: 24px; }
  body:not(.classic-type) .cart-aux-title { font-size: 24px; }
  body:not(.classic-type) .cart-aux-meta { font-size: 14px; }
  body:not(.classic-type) .cart-layout (max-width: 1023px) { gap: 48px; }
  body:not(.classic-type) .status-badge { font-size: 14px; }
  body:not(.classic-type) .product-card-image-label { font-size: clamp(28px, 3vw, 42px); }
  body:not(.classic-type) .product-card-eyebrow { font-size: 14px; }
  body:not(.classic-type) .product-empty { padding: 64px 24px; }
  body:not(.classic-type) .product-empty-title { font-size: 24px; }
  body:not(.classic-type) .compare-table tr.compare-group-row td { padding: 24px 0 16px 0; font-size: 14px; }
  body:not(.classic-type) .compare-product-tier { font-size: 14px; }
  body:not(.classic-type) .compare-product-name { font-size: 24px; }
  body:not(.classic-type) .cta-col { padding: 32px; }
  body:not(.classic-type) .cta-col-label { font-size: 14px; }
  body:not(.classic-type) .cta-col-title { font-size: 24px; }
  body:not(.classic-type) .cta-col (max-width: 767px) { padding: 24px; }
  body:not(.classic-type) .post-row-meta { font-size: 14px; }
  body:not(.classic-type) .post-row-title { font-size: 18px; }
  body:not(.classic-type) .post-row--featured { gap: 24px; padding: 24px; }
  body:not(.classic-type) .post-row--featured .post-row-title { font-size: clamp(18px, 2vw, 24px); }
  body:not(.classic-type) .post-row-title (max-width: 767px) { font-size: 18px; }
  body:not(.classic-type) .post-tile-meta { font-size: 14px; }
  body:not(.classic-type) .post-tile-title { font-size: 24px; }
  body:not(.classic-type) .data-table-state { padding: 32px 24px; font-size: 18px; }
  body:not(.classic-type) .tag { font-size: 14px; }
  body:not(.classic-type) .cta-block-label { font-size: 24px; }
  body:not(.classic-type) .data-block { padding: 24px; }
  body:not(.classic-type) .download-row::after { font-size: 18px; }
  body:not(.classic-type) .download-row-icon { width: 18px; height: 18px; }
  body:not(.classic-type) .doc-header { font-size: 14px; }
  body:not(.classic-type) .doc-title-eyebrow { font-size: 14px; }
  body:not(.classic-type) .doc-title-name { font-size: 24px; }
  body:not(.classic-type) .doc-stamp { font-size: 14px; }
  body:not(.classic-type) .doc-stamp-mark { font-size: 14px; }
  body:not(.classic-type) .announcement-bar-close { width: 18px; height: 18px; }
  body:not(.classic-type) .announcement-bar-close svg { width: 18px; height: 18px; }
  body:not(.classic-type) .jump-bar { gap: 24px; }
  body:not(.classic-type) .state-band { padding: 24px 0; }
  body:not(.classic-type) .welcome-row { gap: 24px; }
  body:not(.classic-type) .usp-icon { width: 18px; height: 18px; }
  body:not(.classic-type) .brand-statement-h { font-size: 24px; }
  body:not(.classic-type) .brand-statement-label { font-size: 14px; }
  body:not(.classic-type) .marquee-track { gap: 64px; }
  body:not(.classic-type) .header-title { font-size: clamp(28px, 3vw, 42px); }
  body:not(.classic-type) .usp-title { font-size: 14px; }
  body:not(.classic-type) .usp-band { padding: 48px 0 32px; }
  body:not(.classic-type) .empty-state { padding: 80px 24px; }
  body:not(.classic-type) .empty-state-title { font-size: clamp(28px, 3vw, 42px); }
  body:not(.classic-type) .empty-state-lead { font-size: 18px; }
  body:not(.classic-type) .intent-card-icon { width: 18px; height: 18px; }
  body:not(.classic-type) .intent-card-arrow { width: 18px; height: 18px; }
  body:not(.classic-type) .step-list-item { padding: 24px; }
  body:not(.classic-type) .step-list-icon { width: 18px; height: 18px; }
  body:not(.classic-type) .hours-block { padding: 24px; }
  body:not(.classic-type) .hours-headline { font-size: 24px; }
  body:not(.classic-type) .reading--dropcap p:first-of-type::first-letter { font-size: clamp(36px, 3.5vw, 52px); }
  body:not(.classic-type) .reading-h3 { font-size: 24px; }
  body:not(.classic-type) .legal-stack { gap: 64px; }
  body:not(.classic-type) .legal-item .address-text-cell, body:not(.classic-type) .legal-item .address-sidebar-cell { padding: 24px; }
  body:not(.classic-type) .bigstat-value { font-size: clamp(36px, 3.5vw, 52px); }
  body:not(.classic-type) .bigstat { padding: 24px; }
  body:not(.classic-type) .bigstat-label { font-size: 14px; }
  body:not(.classic-type) .sub-title { font-size: 24px; }
  body:not(.classic-type) .locator-country-name { font-size: 14px; }
  body:not(.classic-type) .locator-country-count { font-size: 14px; }
  body:not(.classic-type) .locator-no-results { padding: 24px; font-size: 18px; }
  body:not(.classic-type) .locator-loading { padding: 24px; font-size: 14px; }
  body:not(.classic-type) .locator-map-loading-text { font-size: 14px; }
  body:not(.classic-type) .locator-popup-name { font-size: 18px; }
  body:not(.classic-type) .locator-popup-country { font-size: 14px; }
  body:not(.classic-type) .program-block { padding: 32px; gap: 24px; }
  body:not(.classic-type) .program-heading { font-size: 24px; }
  body:not(.classic-type) .program-block (max-width:767px) { padding: 24px; }
  body:not(.classic-type) .parking-band { padding: 72px 0; }
  body:not(.classic-type) .tier-section { gap: 24px; }
  body:not(.classic-type) .about-band { padding: 80px 0; }
  body:not(.classic-type) .split { gap: 48px; }
  body:not(.classic-type) .split (max-width:1023px) { gap: 32px; }
  body:not(.classic-type) .tier-section (max-width:768px) { padding: 0 0 48px; }
  body:not(.classic-type) .about-band (max-width:768px) { padding: 48px 0; }
  body:not(.classic-type) .loader-label { font-size: 14px; }
  body:not(.classic-type) .bigstat-grid--stack .bigstat { padding: 24px; }
  body:not(.classic-type) .trace-item { padding: 32px 24px; }
  body:not(.classic-type) .trace-title { font-size: 24px; }
  body:not(.classic-type) .split (max-width:767px) { gap: 32px; }
  body:not(.classic-type) .section (max-width:767px) { padding: 64px 0; }
  body:not(.classic-type) .hero-band (max-width:767px) { padding: 64px 0 48px; }
  body:not(.classic-type) .benefit-icon { width: 18px; height: 18px; }
  body:not(.classic-type) .eligibility-icon { width: 20px; height: 20px; }
  body:not(.classic-type) .summary-checkout-btn { height: 48px; }
  body:not(.classic-type) .dropdown-compare-link, body:not(.classic-type) .dropdown-all-link { font-size: 14px; }
  body:not(.classic-type) .qty { height: 36px; }
}
/* ───────── Spec grid — eigenschappen per groep (BI v3 §31, dichte variant) ─────────
   Aanleiding (Vince 2026-07-29): §31 is ontworpen op een tabel van vier regels. De
   productpagina toont sinds 2026-07-27 het volledige datasheet, en dan wordt diezelfde
   canon een muur: ABS heeft zestien regels over vier groepen en dat is 1231px, ruim
   anderhalf scherm voor één tabel.

   Twee ingrepen, allebei opgebouwd uit waarden die de canon al kent:
   1. Dichter (8px i.p.v. 16px celpadding, 14px i.p.v. 16px tekst — die 14px is precies
      wat de compact-laag al aan .data-table th geeft). Scheelt een derde.
   2. Een tegel per groep in twee kolommen i.p.v. groepsrijen in één lange tabel.
      Scheelt de helft. Wat je hiervoor opgeeft is dat de kolommen niet meer over de
      hele lijst uitlijnen; dat woog niet op tegen de lengte, en per groep zijn de
      kolommen juist beter passend (de conditie-kolom is bij 30% van de regels leeg,
      maar dat zit geconcentreerd in Physical en Other).

   Staat bewust ACHTERAAN het bestand: .data-table td krijgt z'n padding op r5890 uit
   een latere generatie, en met gelijke specificiteit wint bronvolgorde. */
/* minmax(0,…) en niet 1fr: een grid-track weigert onder de min-content van z'n inhoud
   te krimpen, en de min-content van een vierkolomstabel is ~404px. Op een scherm van
   375px stak de tegel daardoor buiten de container uit i.p.v. dat .table-scroll het
   overnam (§51). Dit blijft de basis: zonder JavaScript ziet het blok eruit zoals het
   altijd deed. */
.spec-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px 32px; align-items: start; }

/* UITGEBALANCEERDE KOLOMMEN (Vince 2026-08-04). Als rijen-grid begint elke rij op de
   onderkant van de langste tegel ernaast, en omdat deze tabellen sterk verschillen
   (2 regels naast 8) gaf dat een gat onder de korte. Gemeten over 21 pagina's:
   gemiddeld 103px, op PEEK 280px.

   Waarom niet gewoon CSS-kolommen (columns: 2): die moeten de volgorde aanhouden en
   mogen alleen op één plek knippen. Dat pakt meestal goed uit maar niet altijd; op
   PETG werd het blok er 155px LANGER van (726 -> 881). Een tegel-voor-tegel verdeling
   naar de op dat moment kortste kolom is nergens slechter dan het grid en over die
   21 pagina's samen 1144px korter. Die verdeling kan CSS niet, dus zet het script
   .is-balanced en bouwt het twee kolommen; blijft dat uit, dan staat het grid er nog.

   Bijvangst: omdat de kolommen om beurten de kortste zijn, valt de verdeling in de
   praktijk terug op links-rechts-links-rechts. De leesrichting blijft dus die van het
   grid, wat bij CSS-kolommen juist niet zo is. */
.spec-grid.is-balanced { display: flex; gap: 32px; align-items: flex-start; }
.spec-grid.is-balanced > .spec-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 48px; }
.data-table--dense th,
.data-table--dense td { padding: 8px 16px 8px 0; font-size: 14px; }
/* :first-child heeft een klasse-punt extra (§31 zet daar zowel de inspringing als de
   16px van de rij-labels), dus die moet apart genoemd worden of de cel blijft 16px. */
.data-table--dense th:first-child,
.data-table--dense td:first-child { padding-left: 16px; font-size: 14px; }
.data-table--dense tr.spec-group td { padding: 16px 16px 8px 16px; font-size: 14px; }
/* Een §11-link draagt z'n eigen 16px mee. In een dichte cel van 14px steekt die er
   dan zichtbaar bovenuit: op de printinstellingen-tabel stond "Magigoo HT" groter dan
   de rest van diezelfde zin (Vince 2026-07-29). Geen nieuwe maat, alleen: volg de cel
   waar je in staat. */
.data-table--dense .link { font-size: inherit; }
@media (max-width: 1023px) {
  .spec-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  /* Onder 1024px is er maar één kolom, dus balanceren heeft geen betekenis: terug
     naar de gewone stapel, en .table-scroll neemt de breedte over (§51). */
  .spec-grid.is-balanced { display: flex; flex-direction: column; gap: 48px; align-items: stretch; }
  .spec-grid.is-balanced > .spec-col { display: contents; }
  /* De min-width: 0 zat op .spec-col, en die doet met display:contents niets meer.
     Zonder deze regel duwt een vierkolomstabel (min-content ~404px) de tegel op een
     scherm van 375px buiten de container, in plaats van dat .table-scroll het
     overneemt (§51). Zelfde reden als de minmax(0,…) op het grid hierboven. */
  .spec-grid.is-balanced > .spec-col > * { min-width: 0; }
}