/* ==========================================================================
   Business Radar – Design Tokens & Base Styles
   Extracted from Figma: BR design 14-5-2026 (7DS6GuSpVw1MG9mFuhNISL)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. COLOR PALETTE
   -------------------------------------------------------------------------- */
:root {
  /* Core */
  --Wit:                  #FFFFFF;    /* Figma: overal (backgrounds, btn text) */
  --Zwart:                #000000;    /* Figma: alle tekst, icons, logo */

  /* Neutral */
  --Warm-Off-White:       #F7F5F6;    /* Figma: VariableID:271:164694 — sectie-achtergronden */
  --Blauw-Grijs:          #F0F2F8;    /* Figma: icon tile backgrounds (Tegels 2 koloms) */
  --Groen-Grijs:          #ECF3F3;    /* Figma: risk-types tile body (Tegels desk, witte-bg variant) */
  --Teal-Panel:           #D9E4E4;    /* Figma: px-faq open antwoord-paneel (FAQ accordion) */
  --Groen-Check:          #00C663;    /* Figma: groene check/badge/eyebrow accent (px-how-it-works nummers, checklists, slider-badges) */
  --Groen-Glow:           #5CFB22;    /* Figma 442:24555: decoratieve groene glow linksonder in de footer */
  --Teal-Soft:            #65DAD2;    /* Figma 442:24857: zachte teal in de framework-card illustratie-gradient */
  --Geel-Lime:            #DDED30;    /* Figma 442:24869: lime-geel start van de framework-card illustratie-gradient */
  --Grijs-Mid:            #828282;    /* Figma: hover state tekst (card body) */
  --Grijs-Licht:          #D9D9D9;    /* Figma: placeholders, footer divider */
  --Grijs-Donker:         #272727;    /* Figma: ronde "Push arrow" knop (px-links rijen) */

  /* Dark Teal spectrum (primary brand) */
  --Teal-100:             #2A3C3C;    /* Figma: "Verloop 3" gradient start — buttons, dark BG */
  --Teal-130:             #020E0E;    /* Figma: "Verloop 3" gradient end — near-black */
  --Teal-110:             #051E1E;    /* Figma: CTA gradient end */
  --Teal-Base:            #083939;    /* Figma: CTA section solid base/mask */
  --Teal-CTA:             #134646;    /* Figma: CTA 1.1 gradient start */
  --Teal-CTA-Alt:         #216E6E;    /* Figma: CTA 1.2 tab gradient start */
  --Teal-Card-Light:      #466060;    /* Figma: testimonial/USP card gradient start */
  --Teal-Card-Dark:       #203030;    /* Figma: testimonial/USP card gradient end */
  --Teal-Orb-1:           #011111;    /* Figma: video orb buitenste ring */
  --Teal-Orb-2:           #0C2E2E;    /* Figma: video orb middelste ring */
  --Teal-Orb-3:           #244D4D;    /* Figma: video orb binnenste ring */
  --Teal-Tile-Top:        #185656;    /* Figma: risk-types tile header gradient start (ook px-links bg) */
  --Teal-Tile-Bottom:     #0A3737;    /* Figma: risk-types tile header gradient end (ook px-links bg) */

  /* Product accent: Adverse Media (mint/cyan) — Figma: card 1 illustratie */
  --Accent-Media-100:     #0ADCB5;
  --Accent-Media-75:      #39E5CB;
  --Accent-Media-50:      #36EAB8;
  --Accent-Media-25:      #51F2D4;

  /* Product accent: Sanctions (teal/lime) — Figma: card 2 illustratie */
  --Accent-Sanc-100:      #89D6CE;
  --Accent-Sanc-75:       #68D4CB;
  --Accent-Sanc-Lime:     #E8FF01;

  /* Product accent: Company Data (green) — Figma: card 3 illustratie */
  --Accent-Company-100:   #00BA5D;
  --Accent-Company-75:    #24CD54;
  --Accent-Company-50:    #40E148;

  /* Functioneel: validatie/foutmelding (geen Figma-waarde — form errors) */
  --Rood-Error:           #D32F2F;

  /* Product accent: UBO Data (dark teal) — Figma: card 4 illustratie */
  --Accent-UBO-100:       #066458;
  --Accent-UBO-75:        #25796D;
  --Accent-UBO-50:        #084F46;
}

/* --------------------------------------------------------------------------
   2. GRADIENTS
   -------------------------------------------------------------------------- */
:root {
  --Gradient-Primary:     linear-gradient(to left, #2A3C3C, #020E0E);   /* Figma: "Verloop 3" — buttons, nav CTA, dark sections */
  --Gradient-Card:        linear-gradient(to bottom, #466060, #203030); /* Figma: testimonial cards, USP stats card */
  --Gradient-CTA:         linear-gradient(to left, #134646, #051E1E);   /* Figma: CTA 1.1 dark panel */
  --Gradient-CTA-Alt:     linear-gradient(to right, #BAF15F, #8ED5DB);  /* Figma: CTA 1.2 bottom tab (lime → cyan) */
  --Gradient-Tile:        linear-gradient(135deg, #185656, #0A3737);    /* Figma: risk-types tile header + px-links sectie-bg (diagonaal) */
  --Gradient-Btn-Dark:    linear-gradient(180deg, #2A3C3C 0%, #020E0E 100%); /* Figma 442:13129 Btn 2 — donkere "Show more" knop (verticaal teal → bijna-zwart) */
  --Gradient-Hero-Fade:   linear-gradient(to bottom, rgba(247,245,246,0) 0%, rgba(247,245,246,0) 67%, #F7F5F6 100%); /* Figma 284:2345 Rectangle 526 — alleen onderste 258/793px fade naar Warm-Off-White */
  --Gradient-Hero-Fade-Early: linear-gradient(to bottom, rgba(247,245,246,0) 0%, rgba(247,245,246,0) 55%, #F7F5F6 90%); /* Korte hero (blog/cases): gradient volledig naar Warm-Off-White ruim vóór de onderrand, zodat de kleur niet tegen de volgende sectie aanloopt */
}

/* --------------------------------------------------------------------------
   3. FONT FAMILY
   -------------------------------------------------------------------------- */
:root {
  --Font-Family-Primary:  'Inter', sans-serif;
}

/* --------------------------------------------------------------------------
   4. FONT WEIGHTS
   -------------------------------------------------------------------------- */
:root {
  --px-weight-regular:    400;  /* Figma: niet gebruikt op homepage */
  --px-weight-medium:     500;  /* Figma: body tekst, beschrijvingen, nav links footer */
  --px-weight-semibold:   600;  /* Figma: alle headings, nav items, stat numbers */
  --px-weight-bold:       700;  /* Figma: alle button labels */
  --px-weight-extrabold:  800;  /* Figma: branding deck "highlighted words" (niet op homepage) */
}

/* --------------------------------------------------------------------------
   5. FONT SIZES — clamp(mobile, preferred, desktop)
   Mobile: 360px (Figma "Homepage mob") — Desktop: 1440px
   -------------------------------------------------------------------------- */
:root {
  /* H1: 30mob → 70desk — Figma: "H1 desk" (269:161955), hero headline */
  --Font-Size-H1:         clamp(1.875rem, 1.042rem + 3.704vw, 4.375rem);
  /* H2: 25mob → 50desk — Figma: section titles ("Company Risk Data", "Testimonials") */
  --Font-Size-H2:         clamp(1.563rem, 1.042rem + 2.315vw, 3.125rem);
  /* H3: 20mob → 35desk — Figma: sub-section headings ("From Global Signals..."), CTA headings */
  --Font-Size-H3:         clamp(1.25rem, 0.938rem + 1.389vw, 2.188rem);
  /* H4: 16mob → 24desk — Figma: card titles, tile titles, testimonial quotes */
  --Font-Size-H4:         clamp(1rem, 0.833rem + 0.741vw, 1.5rem);
  /* H5: 20px fixed — Figma: footer column headings (mob=desk, tap targets) */
  --Font-Size-H5:         1.25rem;
  /* H6: 17px desk only — Figma: "H6 desk" (280:1481), nav items */
  --Font-Size-H6:         1.063rem;
  /* Body: 12mob → 14desk — Figma: beschrijvingen, bullet lijsten, footer links */
  --Font-Size-Body:       clamp(0.75rem, 0.708rem + 0.185vw, 0.875rem);
  /* Body Alt: 15px fixed — Figma: Tegels twee koloms body (alleen desktop) */
  --Font-Size-Body-Alt:   0.938rem;
  /* Body Small: 10mob → 12desk — Figma: card body tekst op mobiel */
  --Font-Size-Body-Sm:    clamp(0.625rem, 0.583rem + 0.185vw, 0.75rem);
  /* Button Large: 15mob → 18desk — Figma: CTA section buttons (Btn 2) */
  --Font-Size-Btn-Lg:     clamp(0.938rem, 0.875rem + 0.278vw, 1.125rem);
  /* Button: 13mob → 15desk — Figma: standaard buttons (Btn 1), "More info" */
  --Font-Size-Btn:        clamp(0.813rem, 0.771rem + 0.185vw, 0.938rem);
  /* Button XS: 13px fixed — Figma: Btn 3, compact buttons */
  --Font-Size-Btn-Xs:     0.813rem;
}

/* --------------------------------------------------------------------------
   6. LINE HEIGHTS
   -------------------------------------------------------------------------- */
:root {
  --Line-Height-H1:       1;      /* Figma: 70px/70px = 100% */
  --Line-Height-H2:       1;      /* Figma: 50px/50px = 100% */
  --Line-Height-H3:       1.14;   /* Figma: 40px/35px = 114% */
  --Line-Height-H4:       1.25;   /* Figma: 30px/24px = 125% */
  --Line-Height-H5:       1.3;    /* Figma: 26px/20px = 130% */
  --Line-Height-Body:     1.57;   /* Figma: 22px/14px = 157% */
  --Line-Height-Btn:      1.07;   /* Figma: 16px/15px = 107% */
}

/* --------------------------------------------------------------------------
   7. SPACING SCALE — clamp(mobile, preferred, desktop)
   Mobile: 360px (Figma mob) — Desktop: 1440px
   Base unit: 10px (360) → 20px (1440). Each token = multiplier x base.
   -------------------------------------------------------------------------- */
:root {
  /* D10:  100mob → 200desk — Figma: tile icon containers (200x200) */
  --D10:               clamp(6.25rem, 4.167rem + 9.259vw, 12.5rem);
  /* D7.5: 75mob → 150desk — Figma: cards small section padding (top+bottom 150px) */
  --D75:               clamp(4.688rem, 3.125rem + 6.944vw, 9.375rem);
  /* D5:   50mob → 100desk — Figma: icon containers (100x100) */
  --D5:                clamp(3.125rem, 2.083rem + 4.630vw, 6.25rem);
  /* D3:   30mob → 60desk — Figma: section vertical padding */
  --D3:                clamp(1.875rem, 1.25rem + 2.778vw, 3.75rem);
  /* D2.5: 25mob → 50desk — Figma: card column gap (~50px), logo gap (~54px) */
  --D25:               clamp(1.563rem, 1.042rem + 2.315vw, 3.125rem);
  /* D2:   20mob → 40desk — Figma: layout gaps, nav item gap (~39px) */
  --D2:                clamp(1.25rem, 0.833rem + 1.852vw, 2.5rem);
  /* D1.5: 15mob → 30desk — Figma: content gaps, card internal spacing */
  --D15:               clamp(0.938rem, 0.625rem + 1.389vw, 1.875rem);
  /* D1.25: 12.5mob → 25desk — Figma: button lg padding (25px horizontal) */
  --D125:              clamp(0.781rem, 0.521rem + 1.157vw, 1.563rem);
  /* D1:   10mob → 20desk — Figma: card internal padding (~20px) */
  --D1:                clamp(0.625rem, 0.417rem + 0.926vw, 1.25rem);
  /* D0.75: 7.5mob → 15desk — Figma: button sm padding (15px horizontal) */
  --D075:              clamp(0.469rem, 0.313rem + 0.694vw, 0.938rem);
  /* D0.5: 5mob → 10desk — Figma: kleine gaps, menu corner radius */
  --D05:               clamp(0.313rem, 0.208rem + 0.463vw, 0.625rem);
  /* D0.25: 2.5mob → 5desk — Figma: minimale spacing */
  --D025:              clamp(0.156rem, 0.104rem + 0.231vw, 0.313rem);
  /* D0.01: 2px fixed — Figma: divider lines (1.5-2px) */
  --D001:              0.125rem;

  /* Mobiele floating header (px-mobile-menu__bar): vaste hoogte + inset.
     Single-source zodat een sectie die als eerste op de pagina staat ruimte
     kan vrijmaken (anders valt de kop onder de vaste header — Contact/Demo). */
  --Mobile-Header-H:     50px;
  --Mobile-Header-Inset: 15px;
  /* Onderkant van de floating pill vanaf de viewport-top (inset + hoogte = 65px). */
  --Mobile-Header-Space: calc(var(--Mobile-Header-Inset) + var(--Mobile-Header-H));

  /* Desktop vaste pill (px-desktop-menu, Figma 284:2212): 70px hoog, ~25px (--D125)
     onder de viewport-top. Single-source zodat een eerste sectie op de pagina
     ruimte kan vrijmaken (anders valt breadcrumb/H1 onder de overlay-header — /blog/). */
  --Header-H:            70px;
  --Header-Space:        calc(var(--D125) + var(--Header-H));
}

/* --------------------------------------------------------------------------
   8. BORDER RADIUS
   -------------------------------------------------------------------------- */
:root {
  --R3:                   3px;   /* Figma: kleine label/counter pills (px-risk-signals teller) */
  --R5:                   5px;   /* Figma: alle buttons, case study card images */
  --R10:                  10px;  /* Figma: menu bar, cards, tiles, icon containers, testimonial cards */
  --R16:                  16px;  /* Figma 442:13656: blog-detail featured image + single image-blok */
  --R20:                  20px;  /* Figma: px-risk-signals paneel, grotere kaart-blokken */
  --R24:                  24px;  /* Figma: CTA sectie blokken (top/bottom halves) */
  --RFull:                360px; /* Figma: play button (90px cirkel), ronde elementen */
}

/* Mobile border-radius: Figma gebruikt kleinere radii op mobile (CTA panel/tab 15px ipv 24px) */
@media (max-width: 768px) {
  :root {
    --R24: 15px;
  }
}

/* --------------------------------------------------------------------------
   9. LAYOUT
   -------------------------------------------------------------------------- */
:root {
  --px-row-width:         1350px;  /* Figma: content breedte binnen 1710px canvas */
  /* Container padding: 15mob → 45desk — Figma: (1710-1350)/2 = 180px op canvas, 45px bij 1440vw */
  --px-gutter:            clamp(0.938rem, 0.313rem + 2.778vw, 2.813rem);
  --Tile-Head-H:          70px;   /* Figma: risk-types tile header band hoogte (vast) */
}

/* --------------------------------------------------------------------------
   10. SHADOWS
   -------------------------------------------------------------------------- */
:root {
  --px-shadow-subtle:     0 1px 3px rgba(0, 0, 0, 0.08);   /* geen Figma equivalent, utility */
  --px-shadow-card:       0 4px 20px rgba(0, 0, 0, 0.10);   /* Figma: CTA witte tab (10% opacity, y=4, blur=20) */
  --px-shadow-heavy:      0 5px 20px rgba(0, 0, 0, 0.60);   /* Figma: testimonial cards, USP card (60% opacity, y=5, blur=20) */
  --px-shadow-hover:      0 4px 12px rgba(0, 0, 0, 0.12);   /* geen Figma equivalent, hover utility */
}

/* --------------------------------------------------------------------------
   11. TRANSITIONS — geen Figma equivalenten (UI interactie)
   -------------------------------------------------------------------------- */
:root {
  --px-duration-fast:     0.15s;
  --px-duration-normal:   0.3s;
  --px-duration-slow:     0.5s;
  --px-ease-out:          cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --px-ease-in-out:       cubic-bezier(0.42, 0, 0.58, 1);
}


/* ==========================================================================
   BASE STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. RESET & DOCUMENT
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-medium);
  line-height: var(--Line-Height-Body);
  color: var(--Zwart);
  background-color: var(--Wit);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   13. ACCESSIBILITY – DOM-focused (WCAG AA)
   -------------------------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 9999;
}
.skip-link:focus {
  position: fixed;
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  padding: var(--D075) var(--D1);
  background: var(--Zwart);
  color: var(--Wit);
  font-size: var(--Font-Size-Body);
  font-weight: var(--px-weight-semibold);
  text-decoration: none;
  z-index: 100000;
}

:focus-visible {
  outline: 2px solid var(--Teal-CTA-Alt);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   14. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, .h1 { font-size: var(--Font-Size-H1); line-height: var(--Line-Height-H1); }
h2, .h2 { font-size: var(--Font-Size-H2); line-height: var(--Line-Height-H2); }
h3, .h3 { font-size: var(--Font-Size-H3); line-height: var(--Line-Height-H3); }
h4, .h4 { font-size: var(--Font-Size-H4); line-height: var(--Line-Height-H4); }
h5, .h5 { font-size: var(--Font-Size-H5); line-height: var(--Line-Height-H5); }
h6, .h6 { font-size: var(--Font-Size-H6); line-height: var(--Line-Height-H5); }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--Font-Family-Primary);
  font-weight: var(--px-weight-semibold);
  color: var(--Zwart);
  letter-spacing: 0;
}

/* ── Heading component — visual size override classes ── */
.px-heading {
  font-family: var(--Font-Family-Primary);
  font-weight: var(--px-weight-semibold);
  letter-spacing: 0;
  color: var(--Zwart);
}

.heading--h1 { font-size: var(--Font-Size-H1); line-height: var(--Line-Height-H1); }
.heading--h2 { font-size: var(--Font-Size-H2); line-height: var(--Line-Height-H2); }
.heading--h3 { font-size: var(--Font-Size-H3); line-height: var(--Line-Height-H3); }
.heading--h4 { font-size: var(--Font-Size-H4); line-height: var(--Line-Height-H4); }

.px-heading--mobile { display: none; }

@media (max-width: 768px) {
  .px-heading--desktop { display: none; }
  .px-heading--mobile  { display: block; }
}

p {
  margin: 0 0 var(--D1);
}

/* Text opacity variants (used for secondary/muted text) */
.px-text-muted {
  opacity: 0.5;
}
.px-text-muted-40 {
  opacity: 0.4;
}

/* Prose link styling — opt-in for WYSIWYG / rich-text areas */
.px-prose a {
  color: var(--Teal-CTA-Alt);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  transition: color var(--px-duration-fast) var(--px-ease-out);
}
.px-prose a:hover {
  color: var(--Teal-100);
}
.px-prose a.px-btn {
  text-decoration: none;
  color: inherit;
}

/* --------------------------------------------------------------------------
   15. LAYOUT UTILITIES
   -------------------------------------------------------------------------- */
.px-container {
  width: 100%;
  max-width: calc(var(--px-row-width) + var(--px-gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--px-gutter);
}

.px-section {
  padding-block: var(--D3);
}

/* Section background variants */
.px-section--warm {
  background-color: var(--Warm-Off-White);
}

.px-section--grey-green {
  background-color: var(--Groen-Grijs);
}

.px-section--dark {
  background: var(--Gradient-Primary);
  color: var(--Wit);
}

.px-section--dark h1,
.px-section--dark h2,
.px-section--dark h3,
.px-section--dark h4,
.px-section--dark h5,
.px-section--dark h6,
.px-section--dark .px-heading {
  color: var(--Wit);
}

/* --------------------------------------------------------------------------
   Per-sectie achtergrond — reusable veld `px-section-bg`
   Wordt op het sectie-root gezet via px_section_bg_classes(). De [class]-hack
   bumpt de specificity naar (0,2,0) zodat deze keuze de module-eigen
   achtergrond (0,1,0) overschrijft, ongeacht de CSS-laadvolgorde (module-CSS
   laadt ná base.css). De `background` shorthand reset meteen een eventuele
   gradient/patroon-afbeelding, zodat "wit" ook echt vlak wit is.
   "auto" krijgt geen class en laat de module ongemoeid (geen regressie).
   -------------------------------------------------------------------------- */
[class].px-bg--white      { background: var(--Wit); }
[class].px-bg--warm       { background: var(--Warm-Off-White); }
[class].px-bg--grey-green { background: var(--Groen-Grijs); }
[class].px-bg--dark       { background: var(--Gradient-Primary); color: var(--Wit); }
[class].px-bg--dark :is(h1, h2, h3, h4, h5, h6, .px-heading) { color: var(--Wit); }

/* --------------------------------------------------------------------------
   Section spacing modifiers
   Modules drive padding via --section-padding-top/-bottom custom properties.
   These classes override the property without touching padding rules.
   Wired by px_spacing_classes() — reusable field group `px-spacing`.
   -------------------------------------------------------------------------- */
[class].px-spacing-top-none    { --section-padding-top: 0px; }
[class].px-spacing-top-half    { --section-padding-top: var(--D15); }
[class].px-spacing-bottom-none { --section-padding-bottom: 0px; }
[class].px-spacing-bottom-half { --section-padding-bottom: var(--D15); }
[class].px-spacing-top-groot    { --section-padding-top: var(--D75); }
[class].px-spacing-bottom-groot { --section-padding-bottom: var(--D75); }

/* --------------------------------------------------------------------------
   Mobiele sectie-padding (≤768px) — feedback #56 / #57 + ronde 2026-06
   Desktop zet de meeste secties op --D75 (150px) verticale ruimte; op een
   telefoon is dat te veel, maar de eerdere --D3 (30px) bleek te krap. De
   mobiele BASIS staat daarom nu op --D5 (50px). Dit raakt de Beaver Builder-
   instellingen niet: een per-instance desktop-keuze (.px-spacing-*,
   specificiteit [class].class = 0,0,2,0) blijft hoger en wint van deze rule.
   Wil je per sectie op mobiel afwijken (groter OF kleiner), gebruik dan de
   aparte velden "Ruimte boven/onder (mobiel)" → .px-spacing-*-mobile-* in het
   blok hieronder (0,0,3,0, wint óók van de desktop-keuze op mobiel). Secties
   met een eigen mobiele topruimte (px-header-slider header-clearance, px-intro
   breadcrumb, px-hero) en px-footer (geen sectie-padding-model) staan bewust
   niet in de basislijst. Tune-punt: pas hier --D5 aan om alle mobiele secties
   mee te schalen; een losse sectie kan in z'n eigen frontend.css afwijken.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .px-cards-small, .px-global-risk, .px-table, .px-text-image, .px-facts,
  .px-cta, .px-feature-tiles, .px-how-it-works, .px-faq, .px-stats,
  .px-case-studies, .px-logo-bar, .px-value-tiles, .px-testimonials,
  .px-photo-banner, .px-feature-columns, .px-risk-signals, .px-risk-types,
  .px-links, .px-related-slider, .px-big-cards, .px-product-cards,
  .px-photo-slider {
    --section-padding-top: var(--D5);
    --section-padding-bottom: var(--D5);
  }
}

/* Per-sectie mobiele override — veld "Ruimte boven/onder (mobiel)" (auto =
   geen class = mobiele basis hierboven). Specificiteit [class][class].class =
   0,0,3,0 wint van de basislijst (0,0,1,0) én van de desktop .px-spacing-*
   keuze (0,0,2,0) die anders ook op mobiel zou blijven gelden.
   Schaal: none 0 · klein D3 (30px) · [basis D5 50px] · groot D75 (75px) · xl D10 (100px). */
@media (max-width: 768px) {
  [class][class].px-spacing-top-mobile-none     { --section-padding-top: 0px; }
  [class][class].px-spacing-top-mobile-klein    { --section-padding-top: var(--D3); }
  [class][class].px-spacing-top-mobile-groot    { --section-padding-top: var(--D75); }
  [class][class].px-spacing-top-mobile-xl       { --section-padding-top: var(--D10); }
  [class][class].px-spacing-bottom-mobile-none  { --section-padding-bottom: 0px; }
  [class][class].px-spacing-bottom-mobile-klein { --section-padding-bottom: var(--D3); }
  [class][class].px-spacing-bottom-mobile-groot { --section-padding-bottom: var(--D75); }
  [class][class].px-spacing-bottom-mobile-xl    { --section-padding-bottom: var(--D10); }
}