/* ==================================================================
   CareAccess — shared stylesheet
   One file, no build step, no runtime dependencies.
   Loaded by: index.html, zorginstellingen.html, werkgevers.html,
              partners.html, foundingpartner.html
   ------------------------------------------------------------------
   Contrast convention: wherever a value is chosen to satisfy WCAG AA
   the comment records the ratio. Accessibility wins every conflict.
================================================================== */

/* ==============================
   TYPEFACES  (self-hosted, OFL — see fonts/LICENSE.txt)
   Newsreader: editorial display voice, optical-size axis.
   Archivo:    grotesque for body, UI and tabular figures.
   Paths are relative to assets/, hence ../fonts/.
============================== */
@font-face {
  font-family: 'Newsreader';
  src: url('../fonts/newsreader-latin.woff2') format('woff2-variations');
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==============================
   RESET & BASE
============================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --marine:       #0B1E3A;
  --marine-mid:   #0E2549;

  /* Brand teal is a mid-tone: it works as a FILL behind dark text and
     as TEXT on dark grounds, but fails as text on light grounds and
     behind white text (both 2.31:1). Two tokens, two jobs. */
  --teal:         #00BFB3;   /* fills, and accent text on marine */
  --teal-hover:   #00A89E;
  /* Teal as text/icon on light surfaces. #007B73 cleared 4.5:1 on white
     but fell to 4.22:1 on --teal-light over --gray-100 (the eHealth chip
     and the price-save pill on a tinted band). Darkened until the worst
     of the six light grounds reads 5.02:1. */
  --teal-text:    #006E67;
  --teal-light:   rgba(0,191,179,0.12);

  /* Text placed on a teal fill — never white (2.31:1), always marine. */
  --on-teal:      #0B1E3A;

  --white:        #FFFFFF;
  /* Section neutrals tinted toward the marine hue rather than flat gray,
     so the greys read as part of the brand instead of default slate. */
  --gray-50:      #F7FBFF;
  --gray-100:     #F0F4F8;
  --gray-200:     #E4EAF1;
  --gray-300:     #CCD5E0;
  --text-dark:    #0F172A;
  --text-mid:     #475569;
  /* was #94A3B8 = 2.56:1; #607183 then sat at 4.54:1 on --gray-100 with no
     headroom, so tinted bands and metric labels kept landing on the line.
     Worst light ground is now 5.01:1. */
  --text-light:   #5A6A7B;
  --border:       #E1E8F0;

  /* Semantic states, all >=4.5:1 on white and on --gray-50 */
  --success:      #1D7D3E;   /* was #16A34A = 3.13:1 on gray */
  --warning:      #A15C07;
  --min-alpha-on-marine: 0.55; /* documented floor for white-on-navy */
  /* Deep navy scale — the gradient stops used across hero and mockups */
  --marine-900:   #08172E;
  --marine-700:   #0C2344;
  --marine-600:   #0E2D5C;

  /* Danger / validation, tuned for the navy form surface */
  --danger:        #FF8A75;
  --danger-text:   #FFB4A8;
  --danger-strong: #FFD6CE;

  --shadow-xs:    0 1px 3px rgba(0,0,0,0.06);
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.08);
  --shadow-md:    0 6px 24px rgba(0,0,0,0.11);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.15);
  --shadow-xl:    0 28px 70px rgba(11,30,58,0.3);
  --shadow-teal:    0 4px 16px rgba(0,191,179,0.30);
  --shadow-teal-lg: 0 7px 26px rgba(0,191,179,0.42);
  --shadow-marine:  0 3px 12px rgba(11,30,58,0.28);

  /* Radius scale */
  --radius-2xs:   4px;
  --radius-xs:    6px;
  --radius-sm:    8px;
  --radius-md:    12px;
  --radius:       14px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --radius-pill:  100px;
  --radius-circle: 50%;

  /* Motion: one easing (exponential ease-out) and four durations, so
     every transition on the page decelerates the same way. */
  --ease:         cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast:     0.18s;
  --dur:          0.24s;
  --dur-slow:     0.36s;
  --dur-reveal:   0.6s;

  /* Vertical rhythm for section bands. ONE token, deliberately: every
     colour plane gets the same top and bottom padding, so the bands read
     as an even stack rather than a set of differently-weighted screens.
     Fluid, so the spacing breathes with the viewport and no mobile
     override rules are needed. */
  --space-section: clamp(4rem, 6vw, 6rem);

  /* Hero bands (#hero, .silo-hero) sit on their own, shorter rhythm -
     they're a marine plane the reader passes through, not a content band,
     so they don't need the full --space-section clearance top and bottom. */
  --space-hero: clamp(2.5rem, 4vw, 4rem);

  --font-sans:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  /* Hairline rule colour — the primary structural device */
  --rule:      rgba(11,30,58,0.14);
  --rule-soft: rgba(11,30,58,0.08);
  --rule-dark: rgba(255,255,255,0.16);
  /* Focus rings: must reach 3:1 against their backdrop (WCAG 1.4.11) */
  --focus-ring:         #0B1E3A;
  --focus-ring-on-dark: #FFFFFF;

  /* Height of the fixed header. JS measures the real value and writes it
     back onto :root; this fallback covers the no-JS and pre-paint case. */
  --header-h: 72px;
}

/* Silo pages carry the context strip under the header, so their fallback
   is taller. JS refines both to the measured pixel value. */
html.has-silobar { --header-h: 110px; }

/* Scrolling is the browser's, not ours. No smooth override, no snapping,
   no scroll-linked pinning anywhere on the document: the page moves
   exactly as far as the wheel, trackpad, spacebar or scrollbar says, the
   moment it says it. scroll-padding-top stays — it is not a behaviour,
   it only stops the fixed header covering an anchor target. */
html {
  scroll-behavior: auto;
  scroll-snap-type: none;
  scroll-padding-top: var(--header-h);
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-sans);
  color: var(--text-dark);
  line-height: 1.6;
  overflow-x: hidden;
  scroll-snap-type: none;
  background: var(--white);
}

/* ==============================
   TYPOGRAPHY
============================== */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: 'opsz' 48;
  letter-spacing: -0.012em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.04;
  font-variation-settings: 'opsz' 72;
}
h2 {
  font-size: clamp(1.9rem, 4vw, 3.1rem);
  line-height: 1.08;
}
h3 {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
}
h4 {
  font-family: var(--font-sans);
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
}
p { line-height: 1.7; }

/* Prices and times must align in columns like a contract */
.tnum, .price-main, .price-row .val, .staffel-table td, .coverage-pill,
.price-now, .price-was, .gate__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ==============================
   EDITORIAL PRIMITIVES
   A numbered marker + hairline rule replaces the icon-tile/card
   vocabulary. This is the page's structural signature.
============================== */
.marker {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 2.5rem;
}
.marker__label {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  white-space: nowrap;
}
.marker__rule {
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.marker__num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
}
/* At the narrowest widths the nowrap label is wider than the row and
   pushed the ordinal off-screen (330px document on a 320px viewport).
   The label wraps instead; the rule keeps a minimum so the device
   still reads as a rule rather than a stray dash. */
@media (max-width: 460px) {
  .marker { flex-wrap: wrap; gap: 0.45rem 0.75rem; }
  .marker__label { white-space: normal; }
  .marker__rule { min-width: 1.5rem; }
}

.marker--dark .marker__rule { background: var(--rule-dark); }
.marker--dark .marker__label { color: var(--teal); }
.marker--dark .marker__num { color: rgba(255,255,255,0.5); }

.pull-quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--marine);
  max-width: 34ch;
  margin: 0;
  text-wrap: balance;
}
.mission-text .pull-quote {
  margin: 0 0 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
}
.pull-quote__attr {
  display: block;
  margin-top: 1.25rem;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-light);
}

.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Section 5 (contact) reads better in a tighter measure */
.container--narrow {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Section 1 (uitleg/stappen) runs the full width of the screen */
.container--wide {
  width: 100%;
  max-width: 1560px;
  margin: 0 auto;
  padding: 0 clamp(1.5rem, 5vw, 4.5rem);
}

/* Mobile keeps exactly 20px of side padding, never a horizontal scrollbar */
@media (max-width: 640px) {
  .container,
  .container--narrow,
  .container--wide { padding-left: 20px; padding-right: 20px; }
}

/* ==============================
   HEADER
============================== */
#site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9000;
  /* Solid, not blurred: a backdrop-filter on a fixed element forces the
     browser to resample everything scrolling underneath it on every
     frame, which is exactly the scroll jank/delay this was cut for. At
     0.97 opacity the blur added negligible visual difference anyway. */
  background: rgba(11, 30, 58, 0.97);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  transition: box-shadow var(--dur) var(--ease);
}
#site-header.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.35);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
}

/* Logo — icon mark (.logo-mark) + live text (.logo-text). To swap the mark,
   replace the <img> markup in each page's .logo-block; nothing else changes. */
.logo-block {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  line-height: 1;
  text-decoration: none;
}
.logo-mark {
  flex: none;
  height: 32px;
  width: auto;
  display: block;
}
.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
  min-width: 0;
}
.logo-name {
  font-size: 1.45rem;
  font-weight: 900;
  color: var(--white);
  letter-spacing: -0.025em;
}
.logo-name em {
  color: var(--teal);
  font-style: normal;
}
.logo-payoff {
  font-size: 0.62rem;
  color: rgba(255,255,255,0.48);
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Desktop nav */
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  list-style: none;
}
.desktop-nav li a {
  color: rgba(255,255,255,0.78);
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  padding: 0.45rem 0.4rem;
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  display: block;
  white-space: nowrap;
}
.desktop-nav li a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.06);
}
.desktop-nav li a[aria-current="page"] {
  color: var(--white);
  background: rgba(255,255,255,0.08);
}
.desktop-nav li.nav-cta {
  margin-left: 1.75rem;
}
.desktop-nav li.nav-cta a {
  background: var(--teal);
  color: var(--on-teal);
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  min-width: 165px;
  text-align: center;
}
.desktop-nav li.nav-cta a:hover {
  background: var(--teal-hover);
}

/* Routes dropdown (home.html only) — groups the three silo links under one
   trigger so the desktop nav has room to breathe. CSS-only (:hover /
   :focus-within), no JS: the trigger is a real link to #gateway, so touch
   and no-hover contexts land on the full three-route picker section instead
   of a dead end. */
.nav-dropdown { position: relative; }
.nav-dropdown__trigger {
  display: flex !important;
  align-items: center;
  gap: 4px;
}
.nav-dropdown__chevron {
  flex: none;
  transition: transform var(--dur-fast) var(--ease);
}
.nav-dropdown:hover .nav-dropdown__chevron,
.nav-dropdown:focus-within .nav-dropdown__chevron {
  transform: rotate(180deg);
}
.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 0.4rem;
  min-width: 190px;
  list-style: none;
  padding: 0.4rem;
  background: var(--marine-mid);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), visibility var(--dur-fast) var(--ease);
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown__menu li a {
  font-size: 0.8rem;
  padding: 0.55rem 0.7rem;
}

/* Hamburger */
.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  width: 44px;   /* 44x44 minimum touch target */
  height: 44px;
  align-items: center;
  margin-right: -10px;
}
.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--white);
  border-radius: var(--radius-pill);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile nav — grid-rows collapse: no magic max-height, so it cannot clip
   when the user scales text. visibility keeps closed links out of tab order. */
.mobile-nav {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  background: var(--marine-mid);
  transition: grid-template-rows var(--dur-slow) var(--ease),
              visibility var(--dur-slow) var(--ease);
  border-top: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav.open {
  grid-template-rows: 1fr;
  visibility: visible;
}
.mobile-nav-inner {
  overflow: hidden;
  min-height: 0;
}
.mobile-nav a {
  display: block;
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.mobile-nav a:last-child { border-bottom: none; }
.mobile-nav a:hover {
  color: var(--teal);
  background: rgba(255,255,255,0.03);
}

@media (max-width: 900px) {
  .desktop-nav { display: none; }
  .hamburger-btn { display: flex; }
}
@media (min-width: 901px) {
  .mobile-nav { display: none; }
}
html:not(.js) .hamburger-btn { display: none; }
@media (max-width: 900px) {
  html:not(.js) .mobile-nav {
    grid-template-rows: 1fr;
    visibility: visible;
  }
}

/* ==============================
   SILO BAR
   The context strip that makes the silo principle legible: it names the
   environment you are in and is the only place the other silos appear.
============================== */
.silo-bar {
  border-top: 1px solid rgba(255,255,255,0.07);
  background: rgba(8, 23, 46, 0.6);
}
.silo-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.55rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.silo-here {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 0.72 alpha white on #0B1E3A ≈ 8.4:1 — comfortably above AA */
  color: rgba(255,255,255,0.72);
}
.silo-here strong {
  color: var(--teal);
  font-weight: 600;
}
.silo-switch {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: wrap;
  list-style: none;
  font-size: 0.78rem;
}
.silo-switch a {
  color: rgba(255,255,255,0.62);
  text-decoration: none;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-xs);
  transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.silo-switch a:hover {
  color: var(--white);
  background: rgba(255,255,255,0.07);
}
@media (max-width: 640px) {
  .silo-bar-inner { padding: 0.5rem 20px; }
  .silo-switch { margin-left: 0; width: 100%; }
  .silo-switch a { padding-left: 0; }
}

/* ==============================
   BUTTONS
   One reset + shared variants. Filled and outlined share identical
   font-size, line-height, padding and height, so a filled button and an
   outlined button in adjacent cards land on exactly the same baseline.
============================== */
.btn,
.card-btn,
.form-submit-btn {
  border-radius: var(--radius-sm);
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;   /* filled carries it too, so widths match */
  box-sizing: border-box;
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1rem 2rem;
  font-size: 0.975rem;
  font-weight: 600;
  line-height: 1.2;
  min-height: 52px;
}
.btn:hover { transform: translateY(-2px); }

/* Standardised hero CTA size - applied on top of .btn-teal/.btn-outline-white
   on every dark hero band (homepage + all four silo pages), so every hero
   button shares exactly the same padding, font-size, radius and height
   regardless of page or variant. */
.btn--hero {
  padding: 12px 24px;
  font-size: 0.975rem;
  border-radius: var(--radius-sm);
  min-height: 48px;
}

/* Teal variant — text is always --on-teal, never white (2.31:1) */
.btn-teal,
.card-btn-teal,
.form-submit-btn {
  background: var(--teal);
  color: var(--on-teal);
  border-color: transparent;
}
.btn-teal:hover,
.card-btn-teal:hover,
.form-submit-btn:hover {
  background: var(--teal-hover);
  border-color: transparent;
}

.card-btn-outline {
  background: transparent;
  color: var(--marine);
  border-color: var(--marine);
}
.card-btn-outline:hover {
  background: var(--marine);
  color: var(--white);
  border-color: var(--marine);
}

.btn-outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
}
.btn-outline-white:hover {
  border-color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.07);
}

.arrow-icon {
  width: 17px; height: 17px;
  flex-shrink: 0;
}

/* --- CTA alignment contract for every pricing card ---------------
   Fixed height + flex centring means a one-line and a two-line label
   still occupy the same box, and .card-cta's margin-top:auto pins the
   whole wrapper to the bottom of the card. Filled and outlined are
   byte-identical in metrics. */
.card-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* 48px is the contract that puts every CTA on one baseline. min- rather
     than a hard height so a longer label or a 200% text zoom grows the
     button instead of clipping it; at every label on the site today the
     computed height is exactly 48px. */
  min-height: 48px;
  padding: 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 700;
  box-sizing: border-box;
}
.card-btn:hover { transform: translateY(-1px); }

.card-cta {
  margin-top: auto;
  padding-top: 1.25rem;
  width: 100%;
}
.card-cta .card-btn + .card-btn { margin-top: 0.5rem; }

/* ==============================
   SECTION BANDS
   Every top-level band on every page carries `.section`. Its height is
   the height of what is inside it and nothing else — no viewport units,
   no forced screen-filling, no vertical centring of a box that was never
   a fixed size. The only thing `.section` contributes is the uniform
   vertical rhythm; the colour comes from a modifier or the band's own id
   rule, and the measure comes from the .container inside it.
============================== */
.section {
  padding: var(--space-section) 0;
}
.section--light  { background: var(--white); }
.section--tinted { background: var(--gray-100); }

/* Bands butt directly against each other: the colour change alone marks
   the seam, so no band may add a margin that would open a strip of body
   background between two planes. */
.section + .section { margin-top: 0; }

/* ==============================
   GATEWAY — homepage hero
============================== */
/* The hero is as tall as the headline, the sub and the buttons make it.
   The only thing added to the standard band rhythm on top is clearance
   for the fixed header, which would otherwise sit over the eyebrow. */
#hero {
  background: var(--marine);
  padding-top: calc(var(--header-h) + var(--space-hero));
  padding-bottom: calc(var(--space-hero) * 0.7);
  position: relative;
  overflow: hidden;
}

.hero-content {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}

/* Eyebrow + h1 grouped in their own block so the headline's height is
   never inflated by .hero-aside's (taller) content in the other column -
   the grid only has to place two items, one per column, side by side. */
.hero-headline {
  grid-column: 1;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  /* Tight against the h1 directly below it. */
  margin-bottom: clamp(0.4rem, 0.8vw, 0.6rem);
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal);
}

/* Standardised hero H1: one font-size/line-height for every dark hero
   band (homepage + all four silo pages), so the visual hierarchy reads
   identically no matter which page a visitor lands on. */
.hero-content h1,
.silo-hero h1 {
  color: var(--white);
  margin: 0;
  font-size: clamp(1.75rem, 4.5vw, 2.25rem);
  line-height: 1.15;
}

.hero-aside {
  grid-column: 2;
  padding-bottom: 0.4rem;
  border-left: 1px solid var(--rule-dark);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}

.hero-sub {
  color: rgba(255,255,255,0.72);
  font-size: 1rem;
  margin: 0 0 2rem;
  line-height: 1.75;
}

.hero-btns {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1rem;
}

@media (max-width: 900px) {
  .hero-content {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .hero-headline, .hero-aside { grid-column: 1; }
  .hero-aside {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rule-dark);
    padding-top: 1.75rem;
  }
}
@media (max-width: 640px) {
  .hero-content { padding-left: 20px; padding-right: 20px; }
}

/* ==============================
   GATEWAY — the three routes
   A departure board, not three identical feature cards: each route is a
   full-width row on the marine ground, ordered, ruled and statused. The
   whole row is the link.
============================== */
/* The departure board sits on the light plane, so the homepage follows the
   same band rhythm as the silos: marine hero → light → tinted → marine
   trust → marine contact. The hero's own hairline marks the seam.
   Vertical padding comes from .section like every other band. */
.gateway-head {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0 0 0.5rem;
}
.gateway-head h2 {
  color: var(--text-dark);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  margin: 0;
}
.gateway-head .gateway-hint {
  margin-left: auto;
  font-size: 0.78rem;
  color: var(--text-light);
}

.gate-list {
  list-style: none;
  border-top: 1px solid var(--rule);
  margin-top: 1.5rem;
}
.gate {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: clamp(1.75rem, 3.5vw, 2.6rem) 0;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
  position: relative;
  transition: padding-left var(--dur-slow) var(--ease);
}
/* The teal wash that sweeps in on hover — scaleX on a pseudo-element, so
   it is compositor-only and never touches layout. */
.gate::before {
  content: '';
  position: absolute;
  inset: 0 -1.5rem;
  background: linear-gradient(90deg, rgba(0,191,179,0.10), rgba(0,191,179,0));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
  pointer-events: none;
}
.gate:hover::before,
.gate:focus-visible::before { transform: scaleX(1); }
.gate:hover, .gate:focus-visible { padding-left: 1rem; }

.gate__num {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--text-light);
  transition: color var(--dur) var(--ease);
}
.gate:hover .gate__num, .gate:focus-visible .gate__num { color: var(--teal-text); }

.gate__body { min-width: 0; }
.gate__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 3.4vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--text-dark);
  margin: 0 0 0.35rem;
}
.gate__desc {
  display: block;
  font-size: 0.92rem;
  line-height: 1.65;
  /* #475569 on --white = 8.6:1 */
  color: var(--text-mid);
  max-width: 56ch;
  margin: 0;
}

.gate__arrow {
  width: 26px; height: 26px;
  color: var(--text-light);
  justify-self: end;
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gate:hover .gate__arrow,
.gate:focus-visible .gate__arrow {
  transform: translateX(6px);
  color: var(--teal-text);
}

@media (max-width: 760px) {
  .gate {
    grid-template-columns: 3rem minmax(0, 1fr);
    grid-template-areas: 'num body';
    row-gap: 0.9rem;
  }
  .gate__num    { grid-area: num; align-self: start; }
  .gate__body   { grid-area: body; }
  .gate__arrow  { display: none; }
  .gate:hover, .gate:focus-visible { padding-left: 0; }
}

/* Status chips — one vocabulary for "live" vs "wachtlijst", used on the
   gateway rows, the silo bar and the pricing cards. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 0.34rem 0.8rem;
  border-radius: var(--radius-pill);
  line-height: 1.2;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-chip .chip-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
  background: currentColor;
}
.status-chip--live {
  color: var(--teal);
  background: rgba(0,191,179,0.12);
  border-color: rgba(0,191,179,0.30);
}
/* On the marine ground this pale amber sits at ~9.1:1 */
.status-chip--soon {
  color: #F0C27B;
  background: rgba(240,194,123,0.10);
  border-color: rgba(240,194,123,0.28);
}
/* Light-ground variant of --live, for the gateway rows on the white band.
   Brand teal is 2.31:1 as text, so the chip takes --teal-text (#006E67)
   over the 12% teal wash: 5.49:1 on --white, 5.04:1 on --gray-100. */
.status-chip--live-light {
  color: var(--teal-text);
  background: var(--teal-light);
  border-color: rgba(0,191,179,0.30);
}
/* Light-ground variant, for pricing cards and add-on tiles on white */
.status-chip--soon-light {
  color: var(--warning);              /* #A15C07 on --gray-100 ≈ 5.1:1 */
  background: var(--gray-100);
  border-color: var(--gray-300);
}

/* ==============================
   SILO PAGE HERO
   Shorter than the gateway hero: the reader already chose, so this states
   the proposition and gets out of the way.
============================== */
.silo-hero {
  background: var(--marine);
  padding-top: calc(var(--header-h) + var(--space-hero));
  padding-bottom: var(--space-hero);
  border-bottom: 1px solid var(--rule-dark);
}
.silo-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: end;
}
.silo-hero__eyebrow {
  color: var(--teal);
  font-weight: 700;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  margin: 0 0 0.75rem;
}
.silo-hero__aside {
  border-left: 1px solid var(--rule-dark);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  padding-bottom: 0.3rem;
}
.silo-hero__desc {
  color: rgba(255,255,255,0.72);
  font-size: 0.98rem;
  line-height: 1.75;
  margin: 0;
}
.silo-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}
/* Secondary route under the single hero CTA (index.html: Wmo-aanbieders).
   Teal on marine is the accent-text pairing per the --teal token note. */
.silo-hero__note {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.72);
}
.silo-hero__note a {
  color: var(--teal);
  font-weight: 600;
  text-underline-offset: 3px;
}
@media (min-width: 901px) {
  /* At this width .silo-hero__inner is still two columns, so the aside is
     the narrow one - keep both CTAs on one row instead of letting the
     second one drop below. */
  .silo-hero__meta { flex-wrap: nowrap; }
}
@media (max-width: 640px) {
  .silo-hero__meta { flex-wrap: wrap; }
  .silo-hero__meta .btn { width: 100%; }
}
@media (max-width: 900px) {
  .silo-hero__inner { grid-template-columns: 1fr; align-items: start; }
  .silo-hero__aside {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rule-dark);
    padding-top: 1.5rem;
  }
}

/* ==============================
   SECTION 1 — UITLEG / STAPPEN  (full-bleed)
============================== */
.steps-head {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
.steps-head h2 { margin: 0; }
.steps-head--flush { margin-bottom: 0; }
.steps-head p {
  color: var(--text-mid);
  font-size: 0.97rem;
  margin: 0;
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
  border-left: 1px solid var(--rule);
}
@media (max-width: 820px) {
  .steps-head { grid-template-columns: 1fr; align-items: start; }
  .steps-head p { padding-left: 0; border-left: none; }
}

/* Three steps as an editorial sequence: a large figure, a rule and the
   text. No cards, no icon tiles — the numbering carries it. */
.funnel-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule);
}
/* werkgevers.html only, four steps instead of three. */
.funnel-grid--4 { grid-template-columns: repeat(4, 1fr); }
.funnel-card {
  position: relative;
  padding: 2rem clamp(1.25rem, 2.5vw, 2.25rem) 0 0;
}
.funnel-card + .funnel-card {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
}
.step-badge {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  font-weight: 400;
  line-height: 1;
  color: var(--teal-text);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 1.25rem;
}
.funnel-card h3 { margin-bottom: 0.5rem; }
.funnel-card p {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 38ch;
}
@media (max-width: 780px) {
  .funnel-grid { grid-template-columns: 1fr; }
  .funnel-card { padding: 1.75rem 0; border-top: 1px solid var(--rule-soft); }
  .funnel-card:first-child { border-top: none; }
  .funnel-card + .funnel-card { border-left: none; padding-left: 0; }
  .step-badge { margin-bottom: 0.75rem; }
}

/* ==============================
   MISSION / DASHBOARD VISUAL
============================== */
.mission-grid {
  display: grid;
  grid-template-columns: minmax(0, 6.5fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}
.mission-text h2 { margin-bottom: 1.5rem; color: var(--text-dark); }
.mission-text p { color: var(--text-mid); font-size: 1.025rem; margin-bottom: 1rem; }
.mission-text p:last-of-type { margin-bottom: 1.5rem; }

/* ==============================
   MISSION — PROSE SPLIT
   What the mission band becomes once the dashboard mockup leaves the
   right-hand column: the marker and the headline hold the narrow left
   column, the prose runs down the right behind the same hairline the
   steps-head uses. No card, no substitute visual — the rule, the measure
   and one stepped-up lede carry the band.
============================== */
.mission-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}
.mission-split__head .marker { margin-bottom: 0.25rem; }
.mission-split__head h2 {
  margin: 0;
  color: var(--text-dark);
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
}
/* The one place the full client-supplied logo (mark + wordmark) appears on the
   site - see CLAUDE.md "Logo mark" - deliberately singular, on a light band. */
.mission-split__logo {
  display: block;
  width: 370px;
  height: auto;
  margin-top: 0.5rem;
}

.mission-split__body {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.5rem, 3vw, 2.75rem);
}
.mission-split__body p {
  color: var(--text-mid);
  font-size: 1rem;
  line-height: 1.8;
  margin: 0 0 1.15rem;
  max-width: 62ch;
}
/* The opening claim carries the band, so it takes a step up in size and
   the darker text tone — the three supporting paragraphs read as its
   evidence rather than as four equal blocks. */
.mission-split__body .mission-lead {
  font-size: 1.15rem;
  line-height: 1.65;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
}
/* The payoff line. Display face and marine, set off by the same hairline
   that separates the columns, so the band closes on a statement instead
   of trailing off into the last supporting paragraph. */
.mission-split__body .mission-close {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 2.1vw, 1.55rem);
  line-height: 1.35;
  color: var(--marine);
  max-width: 30ch;
  margin: 1.75rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  text-wrap: balance;
}
.mission-split__body .mission-close + .ehealth-chip { margin-top: 1.75rem; }

@media (max-width: 900px) {
  .mission-split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .mission-split__body {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--rule);
    padding-top: 1.75rem;
  }
}

.ehealth-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--teal-light);
  color: var(--teal-text);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.38rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(0,191,179,0.2);
  text-decoration: none;
}

.mockup-outer { position: relative; }
.mockup-card {
  background: linear-gradient(140deg, var(--marine) 0%, var(--marine-600) 100%);
  border-radius: var(--radius-xl);
  padding: 2rem 1.75rem 2.25rem;
  box-shadow: none;
  border: 1px solid var(--rule);
  position: relative;
  z-index: 1;
}
.mockup-header {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.6);
  margin-bottom: 1rem;
}
.mockup-screen {
  background: var(--white);
  border-radius: var(--radius-2xs);
  padding: 1.25rem;
}

.app-topbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--gray-200);
}
.app-avatar {
  width: 38px; height: 38px;
  border-radius: var(--radius-circle);
  /* Both stops must keep white legible: the bright brand teal only
     reaches 2.31:1, so the light stop is the darker teal-text tone. */
  background: linear-gradient(135deg, var(--teal-text), var(--marine));
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: var(--white);
  flex-shrink: 0;
}
.app-name { font-size: 0.82rem; font-weight: 700; color: var(--text-dark); }
.app-sub  { font-size: 0.68rem; color: var(--text-light); }

.app-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-bottom: 1rem;
}
/* A single remaining metric would otherwise sit in a third of the width with
   two empty columns beside it. */
.app-metrics--single { grid-template-columns: 1fr; }
.metric-box {
  background: var(--gray-50);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.5rem;
  text-align: center;
}
.metric-val {
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 3px;
}
.metric-val.green { color: var(--success); }
.metric-val.teal  { color: var(--teal-text); }
.metric-val.dark  { color: var(--text-dark); }
.metric-lbl {
  font-size: 0.6rem;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prog-label {
  font-size: 0.65rem;
  color: var(--text-light);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
}
.prog-bar {
  height: 5px;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: 5px;
}
.prog-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--marine));
}

/* Recovery over time reads as a direction, not as three unrelated fills, so
   the stacked bars gave way to one trend line. The SVG scales with its box
   (width 100% / height auto) rather than being stretched, which keeps the
   stroke weight and the end marker circular at every width. */
.trend-block { margin-bottom: 1rem; }
.trend-chart { margin-top: 2px; }
.trend-chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.trend-grid {
  stroke: var(--gray-200);
  stroke-width: 1;
  stroke-dasharray: 2 5;
}
.trend-line {
  stroke: var(--teal-text);
  stroke-width: 2.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.trend-dot {
  fill: var(--teal-text);
  stroke: var(--white);
  stroke-width: 2;
}

/* Scored sectors (Slaap / Mentale rust / Emotionele balans) — a labelled
   row with its figure and a hairline meter. */
.score-list { margin-top: 0.35rem; }
.score-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2.6rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.42rem 0 0.5rem;
  border-bottom: 1px solid var(--gray-100);
}
.score-row:last-child { border-bottom: none; }
.score-name {
  font-size: 0.75rem;
  color: var(--text-mid);
  margin-bottom: 5px;
}
.score-val {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--marine);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.score-meter {
  height: 4px;
  background: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.score-meter > i {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--teal), var(--marine));
}

.app-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--gray-100);
  font-size: 0.75rem;
}
.app-status-row:last-child { border-bottom: none; }
.status-row-label { color: var(--text-mid); }
.status-row-right { display: flex; align-items: center; gap: 5px; }
.dot-indicator {
  width: 7px; height: 7px;
  border-radius: var(--radius-circle);
  flex-shrink: 0;
}
.dot-green  { background: var(--success); }
.dot-teal   { background: var(--teal-text); }
.dot-orange { background: var(--warning); }
.status-text { font-size: 0.7rem; font-weight: 600; }
.status-text.green { color: var(--success); }
.status-text.gray  { color: var(--text-light); }

.float-badge {
  position: absolute;
  background: var(--white);
  border-radius: var(--radius-2xs);
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
}
.float-badge-bl { bottom: -18px; right: -18px; }
/* The badge is ~68px tall; at top:-16px its lower edge landed on the card's
   own header line and hid "eHealth App – …". Raised so it hangs off the
   corner and clears the label entirely. */
.float-badge-tl { top: -42px; left: -22px; }
.float-badge-icon { color: var(--teal-text); flex-shrink: 0; }
.float-badge strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--text-dark); }
.float-badge span { color: var(--text-light); }
/* Amber, matching .status-chip--soon-light, for "not live yet" indicators. */
.soon-dot {
  width: 9px; height: 9px;
  border-radius: var(--radius-circle);
  background: var(--warning);
  flex-shrink: 0;
}

@media (max-width: 960px) {
  .mission-grid { grid-template-columns: 1fr; gap: 3rem; }
  .float-badge-bl { bottom: 12px; right: 12px; }
  .float-badge-tl { display: none; }
}
/* On narrow screens the overlay badge covered the dashboard rows, so it
   flows underneath the card instead of on top of it. */
@media (max-width: 620px) {
  .float-badge-bl {
    position: static;
    margin-top: 1rem;
    width: fit-content;
  }
}

/* ==============================
   SECTION 2 — PRICING
============================== */
.pricing-header {
  display: flex;
  align-items: baseline;
  gap: 1.25rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}
.pricing-header h2,
.pricing-header h3 {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin: 0;
}
.pricing-header p {
  color: var(--text-light);
  font-size: 0.82rem;
  margin: 0;
}

.card-desc {
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin-bottom: 1.25rem;
}

/* --- Two-column editorial pricing (werkgevers, partners) ----------- */
.cards-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--marine);
  align-items: stretch;
}
.cards-2 .p-card {
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem)
           clamp(1.75rem, 3vw, 2.5rem) 0;
  transform: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.cards-2 .p-card:hover { transform: none; box-shadow: none; }
/* Neutralise the card-era featured treatment: in a two-column editorial
   layout the copy ("Aanbevolen voor Corporates") carries it. */
.cards-2 .p-card.featured {
  border: none;
  transform: none;
  box-shadow: none;
  background: none;
}
.cards-2 .p-card + .p-card {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2.25rem);
}
@media (max-width: 780px) {
  .cards-2 { grid-template-columns: 1fr; }
  .cards-2 .p-card { padding: 1.75rem 0; border-top: 1px solid var(--rule-soft); }
  .cards-2 .p-card:first-child { border-top: none; }
  .cards-2 .p-card + .p-card { border-left: none; padding-left: 0; }
}

/* --- Four-column tariff cards (zorginstellingen) ------------------------- */
.cards-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}
.cards-4 .p-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 2.2rem 1.35rem 1.6rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.cards-4 .p-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.cards-4 .p-card.featured {
  border: 2px solid var(--teal);
  box-shadow: var(--shadow-teal);
  background: var(--white);
}
.cards-4 .p-card.featured .popular-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--on-teal);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.28rem 0.9rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 191, 179, 0.35);
}
/* A package that is not yet purchasable gets its status as a corner badge,
   positioned exactly like .popular-badge. Putting it in the header row
   instead added a line and pushed that card's name, price and coverage off
   the baselines its neighbours sit on — alignment is non-negotiable. */
.cards-4 .p-card .soon-badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--gray-100);
  color: var(--warning);            /* #A15C07 on --gray-100 = 4.69:1 */
  border: 1px solid var(--gray-300);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.28rem 0.9rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  line-height: 1.2;
  z-index: 2;
}
.soon-badge .chip-dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-circle);
  background: currentColor;
  flex-shrink: 0;
}
/* .is-teaser > * raises every child to z-index 1 with position:relative,
   which would knock these two badges out of their absolute placement. */
.is-teaser > .soon-badge,
.is-teaser > .popular-badge { position: absolute; z-index: 2; }

.cards-4 .card-pkg-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 4px;
}
.cards-4 .card-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.5rem;
}
.cards-4 .price-main {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--marine);
  line-height: 1.1;
  margin-bottom: 2px;
  white-space: nowrap;
}
.cards-4 .price-main .per-month {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
}
.cards-4 .price-note {
  font-size: 0.76rem;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}
.cards-4 .coverage-pill {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--marine);
  background: var(--gray-100);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-xs);
  margin-bottom: 1rem;
  line-height: 1.35;
  display: inline-block;
}
.cards-4 .card-divider {
  display: block;
  height: 1px;
  background: var(--border);
  margin: 0 0 1rem;
}
.cards-4 .feature-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.75rem;
  padding-top: 0;
  border-top: none;
}
.cards-4 .feature-list {
  list-style: none;
  columns: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.cards-4 .feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--text-mid);
  line-height: 1.45;
  break-inside: avoid;
}
.cards-4 .feature-list li .chk {
  color: var(--teal-text);
  flex-shrink: 0;
  margin-top: 2px;
}
/* The upper half of the card is one block so that space-between can pin
   the CTA wrapper to the floor of every card in the row. */
.card-body { display: block; }

.p-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  border: 1.5px solid var(--border);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.p-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}
.p-card.featured { border-color: var(--teal); }

.popular-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--teal);
  color: var(--on-teal);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 0.28rem 1rem;
  border-radius: var(--radius-pill);
  max-width: calc(100% - 1.5rem);
  text-align: center;
}

.card-pkg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.card-pkg-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 4px;
}
.card-name {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 3px;
  color: var(--text-dark);
}
.card-target {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
}
.coverage-pill {
  display: block;
  background: none;
  color: var(--text-mid);
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0;
  border-radius: 0;
  margin: 0.25rem 0 1.25rem;
  line-height: 1.6;
}
.price-main {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--marine);
  line-height: 1;
  margin-bottom: 3px;
}
.price-main .per-month {
  font-size: 0.95rem;
  font-weight: 600;
}
.price-note {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-bottom: 1.25rem;
}

.card-divider {
  height: 1px;
  background: var(--border);
  margin: 1.25rem 0;
}

.feature-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.75rem;
}

.feature-list { list-style: none; }
.feature-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-mid);
  padding: 0.3rem 0;
}
.feature-list li .chk {
  color: var(--teal-text);
  flex-shrink: 0;
  margin-top: 2px;
}

.price-rows { margin-bottom: 0; }
.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.45rem 0;
  font-size: 0.84rem;
  border-bottom: 1px solid var(--gray-100);
}
.price-row:last-child { border-bottom: none; }
.price-row .lbl { color: var(--text-mid); }
.price-row .val { font-weight: 700; color: var(--text-dark); white-space: nowrap; }

@media (max-width: 1100px) {
  .cards-4 { grid-template-columns: repeat(2, 1fr); }
  .p-card.featured { transform: none; }
  .p-card.featured:hover { transform: translateY(-4px); }
}
@media (max-width: 600px) {
  .cards-4 { grid-template-columns: 1fr; }
  .cards-2 { grid-template-columns: 1fr; }
}

/* --- Teaser / waitlist state -------------------------------------
   The brief asks for a ~60% dimmed overlay. Opacity is the wrong tool
   here: every text token on this page is tuned to clear 4.5:1 with about
   half a point of headroom, and even a 0.95 veil drags the small meta
   labels (--text-light on --gray-100) down to 4.13:1. Accessibility wins
   the conflict, so the recession is built entirely from layers that
   carry no text:
     · a muted surface and a softened border, so the card sits back from
       the white, shadowed, purchasable ones;
     · desaturated accents — grayscale on a colour preserves luminance,
       so the contrast ratio is untouched;
     · a hairline diagonal hatch behind the content;
     · the explicit "Binnenkort beschikbaar" chip.
   Hover and focus lift the card back to full colour. */
.is-teaser {
  position: relative;
  background: var(--gray-50);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
/* Decorative hatch. Sits under the content (z-index:0 vs the raised
   children below) and never overlaps a glyph. */
.is-teaser::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(
    -45deg,
    rgba(11,30,58,0.035) 0 1px,
    transparent 1px 9px
  );
  pointer-events: none;
  z-index: 0;
  transition: opacity var(--dur) var(--ease);
}
.is-teaser > * { position: relative; z-index: 1; }
.is-teaser:hover::before,
.is-teaser:focus-within::before { opacity: 0; }

.cards-4 .p-card.is-teaser { border-color: var(--gray-300); box-shadow: none; }
/* grayscale() is luminance-preserving, so these stay at their measured
   ratios while losing the brand colour that signals "available now". */
.is-teaser .card-pkg-label,
.is-teaser .addon-price,
.is-teaser .price-save,
.is-teaser .feature-list li .chk,
.is-teaser .step-badge { filter: grayscale(1); }
.is-teaser .price-main,
.is-teaser .price-now { color: var(--text-mid); }
.is-teaser:hover,
.is-teaser:focus-within { background: var(--white); }
.is-teaser:hover .card-pkg-label,
.is-teaser:focus-within .card-pkg-label,
.is-teaser:hover .price-save,
.is-teaser:focus-within .price-save,
.is-teaser:hover .addon-price,
.is-teaser:focus-within .addon-price,
.is-teaser:hover .feature-list li .chk,
.is-teaser:focus-within .feature-list li .chk { filter: none; }
.is-teaser:hover .price-main,
.is-teaser:focus-within .price-main,
.is-teaser:hover .price-now,
.is-teaser:focus-within .price-now { color: var(--marine); }

/* The two-column editorial cards and the add-on tiles sit on the page
   ground, not on a card surface: a lighter fill would read as raised
   rather than recessed, so they keep the hatch and the grayscale only. */
.cards-2 .p-card.is-teaser,
.addon-tile.is-teaser,
.addon-feature.is-teaser { background: none; }
.cards-2 .p-card.is-teaser:hover,
.cards-2 .p-card.is-teaser:focus-within,
.addon-tile.is-teaser:hover,
.addon-tile.is-teaser:focus-within,
.addon-feature.is-teaser:hover,
.addon-feature.is-teaser:focus-within { background: none; }

/* The eHealth mockup is the one is-teaser visual with real content to show,
   not just labels and prices — grayscale() (luminance-preserving, same
   convention as every other teaser accent above) keeps it legibly "not live
   yet" without touching contrast. */
.addon-feature.is-teaser .addon-feature__visual {
  filter: grayscale(1);
  transition: filter var(--dur) var(--ease);
}
.addon-feature.is-teaser:hover .addon-feature__visual,
.addon-feature.is-teaser:focus-within .addon-feature__visual { filter: none; }

.teaser-note {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin: 0 0 clamp(2rem, 4vw, 2.75rem);
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--rule);
  font-size: 0.86rem;
  color: var(--text-mid);
  line-height: 1.7;
  max-width: 62ch;
}
.teaser-note svg { color: var(--warning); flex-shrink: 0; margin-top: 3px; }

/* --- Founding Partner price treatment ----------------------------- */
.price-stack { margin-bottom: 0.75rem; }
.price-was {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.3;
}
.price-was s { text-decoration-thickness: 1.5px; }
.price-now {
  font-size: 1.75rem;
  font-weight: 900;
  color: var(--marine);
  line-height: 1.1;
  display: block;
}
.price-now .per-month {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
}
.price-save {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);      /* #007B73 on --teal-light ≈ 4.8:1 */
  background: var(--teal-light);
  border: 1px solid rgba(0,191,179,0.24);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

/* The onboarding-fee statement that sits under the tariff grid */
.fee-note {
  border-top: 1px solid var(--marine);
  padding-top: 1.25rem;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.7;
}
.fee-note__label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  white-space: nowrap;
}
.fee-note strong { color: var(--marine); font-weight: 700; }
.fee-note .price-was { display: inline; margin-right: 0.4rem; }

/* ==============================
   FOUNDING PARTNER — benefits & asks
============================== */
.fp-intro {
  max-width: 68ch;
  color: var(--text-mid);
  font-size: 1.02rem;
  line-height: 1.8;
}
.benefit-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(2rem, 5vw, 4rem);
  border-top: 1px solid var(--rule);
}
.benefit {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.benefit__num {
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
}
.benefit__title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.25rem;
  line-height: 1.4;
}
.benefit__desc {
  font-size: 0.87rem;
  color: var(--text-mid);
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 820px) {
  .benefit-list { grid-template-columns: 1fr; }
}

.ask-block {
  border-top: 1px solid var(--marine);
  padding-top: 1.75rem;
}
.ask-list {
  list-style: none;
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.ask-list li {
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) 0 0;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.7;
}
.ask-list li + li {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.ask-list .ask-num {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--teal-text);
  margin-bottom: 0.6rem;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 760px) {
  .ask-list { grid-template-columns: 1fr; }
  .ask-list li { padding: 1.25rem 0; border-top: 1px solid var(--rule-soft); }
  .ask-list li:first-child { border-top: none; padding-top: 0.5rem; }
  .ask-list li + li { border-left: none; padding-left: 0; }
}

/* ==============================
   TABLES — staffel & case fees
============================== */
.staffel-box {
  background: none;
  border-radius: 0;
  padding: 1.75rem 0 0;
  border: none;
  border-top: 1px solid var(--marine);
  margin: 0 0 clamp(2.5rem, 6vw, 4rem);
}
.staffel-box h3,
.staffel-box h4 {
  margin-bottom: 1.25rem;
  font-size: 0.975rem;
}
.staffel-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  min-width: 32rem;
}
.staffel-table th {
  background: var(--gray-50);
  padding: 0.7rem 1rem;
  text-align: left;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
}
.staffel-table th:first-child { border-radius: var(--radius-xs) 0 0 var(--radius-xs); }
.staffel-table th:last-child  { border-radius: 0 var(--radius-xs) var(--radius-xs) 0; }
.staffel-table td {
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--gray-100);
  color: var(--text-dark);
}
.staffel-table tr:last-child td { border-bottom: none; }
.staffel-table .basis   { color: var(--text-mid); }
.staffel-table .premium { font-weight: 700; color: var(--marine); }
.staffel-table .enterprise-row td {
  font-weight: 700;
  border-top: 1px solid var(--rule);
}
.staffel-table .teal-text { color: var(--teal-text); }

.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

.fine-print {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.7;
  max-width: none;
  margin-top: 1.25rem;
}

/* Case fees inside a pricing card */
.casefee-block {
  margin-top: 0.5rem;
  border-top: 1px solid var(--rule-soft);
  padding-top: 0.9rem;
}
.casefee-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.83rem;
  border-bottom: 1px solid var(--gray-100);
}
.casefee-row:last-child { border-bottom: none; }
.casefee-row .lbl { color: var(--text-mid); }
.casefee-row .val {
  font-weight: 700;
  color: var(--text-dark);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ==============================
   FOUNDING STRIP (zorginstellingen.html, prominent CTA under hero
   linking to foundingpartner.html)
============================== */
.founding-strip { padding-top: clamp(1.5rem, 4vw, 2.5rem); padding-bottom: clamp(2rem, 5vw, 3.5rem); }
.founding-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  flex-wrap: wrap;
  background: rgba(0, 191, 179, 0.08);
  border: 1px solid rgba(0, 191, 179, 0.28);
  border-radius: 1rem;
  padding: 1.5rem 2rem;
}
.founding-strip__eyebrow {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 0.35rem;
}
.founding-strip__headline {
  margin: 0;
  font-size: 1.05rem;
  color: var(--marine);
  max-width: 52ch;
}
.founding-strip__cta { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
  .founding-strip__inner { flex-direction: column; align-items: flex-start; }
}

/* ==============================
   PILOT BANNER
============================== */
.pilot-banner {
  background: none;
  border: none;
  border-left: 2px solid var(--teal);
  border-radius: 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  max-width: 52ch;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.7;
}
.pilot-banner strong { color: var(--marine); }
.pilot-banner a { color: var(--teal-text); font-weight: 600; text-decoration: none; }
.pilot-banner a:hover { text-decoration: underline; }

/* Two banners shown side by side instead of stacked - each keeps its own
   left rule, just laid out as columns instead of rows. */
.pilot-banner-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
}
.pilot-banner-row .pilot-banner { max-width: none; margin: 0; }
@media (max-width: 760px) {
  .pilot-banner-row { grid-template-columns: 1fr; }
}
.pilot-banner--narrow { max-width: 42ch; }
.pilot-banner--wide { max-width: none; }

/* Corner badge — a compact promo tag pinned over a table's top corner,
   e.g. partners.html's pricing table. Sits half on/half off the top edge. */
.pricing-table { position: relative; }
.corner-badge {
  position: absolute;
  top: 0;
  right: clamp(0px, 4vw, 1.5rem);
  transform: translateY(-50%);
  background: var(--marine-900);
  color: var(--teal);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  white-space: nowrap;
  z-index: 1;
}

/* ==============================
   DEPT GRID  (werken-bij.html, "Waarom CareAccess")
============================== */
.dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-top: 2.5rem;
  text-align: left;
}
.dept-block h3 {
  font-size: 1.05rem;
  margin: 0 0 0.5rem;
  color: var(--marine);
}
.dept-block p {
  margin: 0;
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.6;
}
@media (max-width: 760px) {
  .dept-grid { grid-template-columns: 1fr; }
}

/* ==============================
   CROSS-SILO ROUTING MODULE
   Small "wrong page?" redirect block. Sits right after the hero on every
   silo page - before any audience-specific prose - so a mis-routed visitor
   finds the door before investing time reading content meant for someone
   else. Deliberately lighter than the .gate rows on home.html: this is a
   utility aside, not a second gateway.
============================== */
.cross-silo__title {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  margin-bottom: 1.5rem;
}
.cross-silo__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.cross-silo__item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.cross-silo__item:hover, .cross-silo__item:focus-visible {
  border-color: var(--teal);
  background: rgba(0,191,179,0.06);
}
.cross-silo__q {
  font-size: 0.92rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.cross-silo__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
  color: var(--teal-text);
  font-size: 0.92rem;
}

/* Compact chip treatment (3 Sep 2026 CRO follow-up): the module's own
   heading stays in the accessible tree via .sr-only (a duplicate of the
   .silo-bar wayfinding above it) - the question text is back on the chips
   themselves, just smaller than the .cross-silo__cta line beneath it. */
#niet-op-de-juiste-pagina {
  padding: 0.75rem 0 !important;
}
#niet-op-de-juiste-pagina .cross-silo__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(4.5rem, 12vw, 9rem);
}
#niet-op-de-juiste-pagina .cross-silo__item {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-lg);
}
#niet-op-de-juiste-pagina .cross-silo__q {
  font-size: 0.85rem;
}
#niet-op-de-juiste-pagina .cross-silo__cta {
  font-size: 0.95rem;
}
#niet-op-de-juiste-pagina .arrow-icon {
  width: 15px;
  height: 15px;
}
@media (max-width: 640px) {
  /* The desktop gap (clamp 4.5rem-9rem) is what a wide row needs to read as
     two distinct, generously-spaced chips - on a narrow phone it's wider
     than the two items combined, so flex-wrap dropped the second chip onto
     its own line below the first instead of beside it. Below 640px the two
     chips share the row as two equal, flexible columns instead. */
  #niet-op-de-juiste-pagina .cross-silo__grid {
    flex-wrap: nowrap;
    gap: 0.75rem;
  }
  #niet-op-de-juiste-pagina .cross-silo__item {
    flex: 1 1 0;
    min-width: 0;
    padding: 0.85rem 0.75rem;
  }
  /* "Aansluiten als zorgpartner" is the longer of the two CTAs and the one
     that sets the floor here - measured against real phone widths (not
     just what this repo's tooling can resize a desktop window down to):
     at 0.625rem plus the tightened icon/gap/padding above, it lands right
     at one line on a 375px-wide screen (iPhone SE and up). Only genuinely
     small/older ~360px Android widths may still wrap by a couple of
     pixels - going smaller than this starts to hurt legibility for what's
     real navigation, not decoration. */
  #niet-op-de-juiste-pagina .cross-silo__cta {
    font-size: 0.625rem;
    gap: 0.3rem;
    white-space: nowrap;
  }
  #niet-op-de-juiste-pagina .cross-silo__q {
    font-size: 0.8rem;
  }
  #niet-op-de-juiste-pagina .arrow-icon {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
  }
}

/* ==============================
   SECTION 3 — ADD-ONS
   Flattened: no card inside a card. Rule-separated columns.
============================== */
.addons-wrapper {
  background: none;
  border: none;
  border-top: 1px solid var(--marine);
  border-radius: 0;
  padding: 1.75rem 0 0;
}
.addons-wrapper > h2,
.addons-wrapper > h3 {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-text);
  margin-bottom: 1.75rem;
}
.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
/* Two priced modules only. The third add-on is not a third column —
   see .addon-feature below. */
.addons-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.addon-tile {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0 clamp(1.25rem, 2.5vw, 2rem) 0 0;
}
.addon-tile + .addon-tile {
  border-left: 1px solid var(--rule);
  padding-left: clamp(1.25rem, 2.5vw, 2rem);
}
.addon-num {
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-light);
  font-variant-numeric: tabular-nums;
  padding-bottom: 0.6rem;
  margin-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 0.75rem;
  /* The status chip is nowrap and wider than a three-up column at tablet
     width; it drops to its own line rather than pushing the page sideways. */
  flex-wrap: wrap;
}
.addon-tile h3,
.addon-tile h4 { font-size: 0.95rem; margin-bottom: 0.35rem; }
.addon-tile p { font-size: 0.8rem; color: var(--text-mid); line-height: 1.65; }
.addon-price { font-size: 0.875rem; font-weight: 800; color: var(--teal-text); margin-top: 0.75rem; }
.addon-incl  { font-size: 0.7rem; color: var(--text-light); margin-top: 3px; }

/* foundingpartner.html only: an add-on module carries the same was/now pair
   as a retainer card, so the discount reads identically on a module and on a
   package. The wrapper takes the spacing the bare .addon-price would have
   contributed, keeping the struck figure tight against the payable one. */
.addon-pricing { margin-top: 0.75rem; }
.addon-pricing .addon-price { margin-top: 2px; }

/* Maatwerk has no tariff, so it is not a third priced column. Same full
   measure and hairline the eHealth row takes on zorginstellingen.html. */
.addon-custom {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule);
  max-width: 46ch;
}
.addon-custom .addon-num { margin-bottom: 1.1rem; }
.addon-custom h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: 0.6rem;
}
.addon-custom p {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.75;
  margin: 0;
}

/* The eHealth app is not purchasable yet and it is the only add-on with
   something to show, so it takes the full measure under the two priced
   modules and puts the dashboard next to its copy instead of competing
   for a third of a row. Same recession vocabulary as every other teaser:
   hatch and chip, never opacity. */
.addon-feature {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  /* Top-aligned, not centred: the ordinal and the top edge of the mockup
     land on one line, the same alignment contract the gate rows and the
     pricing cards keep. */
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: clamp(2rem, 4vw, 2.75rem);
  border-top: 1px solid var(--rule);
}
.addon-feature__text h3 {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  margin-bottom: 0.6rem;
}
.addon-feature__text p {
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 46ch;
  margin: 0;
}
.addon-feature__text .addon-num { margin-bottom: 1.1rem; }
.addon-feature__visual .mockup-card { margin-left: auto; }

@media (max-width: 860px) {
  .addon-feature {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
  }
  .addon-feature__visual .mockup-card { margin-left: 0; }
}

@media (max-width: 760px) {
  .addons-grid { grid-template-columns: 1fr; }
  .addon-tile { padding: 1.5rem 0; border-top: 1px solid var(--rule-soft); }
  .addon-tile:first-child { border-top: none; padding-top: 0; }
  .addon-tile + .addon-tile { border-left: none; padding-left: 0; }
}

/* ==============================
   SECTION 4 — CENTRALISED FAQ
============================== */
.faq-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.faq-head h2 { margin: 0; }

.tab-container {
  display: flex;
  justify-content: flex-start;
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}
.tab-pill {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2rem);
  box-shadow: none;
  max-width: 100%;
}
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.1rem;
  border-radius: 0;
  font-family: inherit;
  letter-spacing: 0.01em;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
  min-height: 44px;
}
.tab-btn.active {
  background: none;
  color: var(--text-dark);
  border-bottom-color: var(--teal);
  font-weight: 700;
  box-shadow: none;
}
.tab-btn:not(.active):hover {
  background: none;
  color: var(--text-dark);
}

.js .tab-panel { display: none; }
.js .tab-panel.active { display: block; }
/* No JS: show every panel stacked and drop the non-functional toggle */
html:not(.js) .tab-container { display: none; }
html:not(.js) .tab-panel { display: block; }
html:not(.js) .tab-panel-title { display: block; }
.tab-panel-title {
  display: none;
  font-size: 1.15rem;
  margin-bottom: 1rem;
}

.faq-list { border-top: 1px solid var(--rule); }
.faq-item {
  background: none;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 1.15rem 1.5rem 1.15rem 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  line-height: 1.5;
  font-weight: 600;
  font-size: 0.935rem;
  color: var(--text-dark);
  user-select: none;
  transition: color var(--dur-fast) var(--ease);
}
.faq-q:hover { color: var(--teal-text); }
.faq-toggle-icon {
  width: 24px; height: 24px;
  border-radius: var(--radius-circle);
  background: var(--gray-100);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.faq-item.open .faq-toggle-icon {
  transform: rotate(45deg);
  background: var(--teal);
}
.faq-toggle-icon svg { display: block; }
.faq-item.open .faq-toggle-icon svg line { stroke: var(--on-teal); }

/* grid-rows animation: content is never clipped, at any text size.
   Replaces max-height, which truncated answers at 200% zoom. */
.faq-a {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows var(--dur-slow) var(--ease);
}
.js .faq-a { grid-template-rows: 0fr; }
html:not(.js) .faq-toggle-icon { display: none; }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
/* The clip wrapper must carry no padding: a 0fr track does not collapse
   the item's own padding box, which left a 20px sliver. */
.faq-a > .faq-a-inner {
  overflow: hidden;
  min-height: 0;
  padding: 0;
}
.faq-a-text {
  padding: 0 1.5rem 1.35rem 0;
  font-size: 0.9rem;
  color: var(--text-mid);
  line-height: 1.8;
  max-width: 78ch;
}

/* ==============================
   TRUST / SECURITY & COMPLIANCE
============================== */
#trust {
  background: var(--marine);
}
.trust-eyebrow {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.62);
  margin-bottom: 1rem;
}
.trust-text {
  color: rgba(255,255,255,0.8);
  font-size: 1.025rem;
  max-width: 62ch;
  margin: 0 0 2.5rem;
  line-height: 1.75;
}
.trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.75rem;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-2xs);
  padding: 0.6rem 1.1rem;
  color: rgba(255,255,255,0.88);
  font-size: 0.83rem;
  font-weight: 600;
}
.trust-badge-icon { color: var(--teal); flex-shrink: 0; }

.epd-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.58);
  margin-bottom: 1rem;
}
.epd-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.epd-pill {
  background: none;
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-2xs);
  padding: 0.5rem 1.1rem;
  color: rgba(255,255,255,0.65);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.epd-pill.accent {
  background: rgba(0,191,179,0.12);
  border: 1px solid rgba(0,191,179,0.25);
  color: var(--teal);
}

/* index.html only. The gateway page addresses zorginstellingen, werkgevers and
   partners in one breath, so its security band states the standard that
   covers all three and points at the silo pages for the detail. It also
   drops off the marine plane: with #contact and the footer already dark,
   a fourth dark band gave the page three dark grounds in a row and no
   seam between the claim and the ask. Every white text token is swapped
   for its marine counterpart one for one — nothing else moves. */
#trust.trust--gateway { background: var(--white); }
.trust--gateway .trust-eyebrow { color: var(--text-light); }   /* #5A6A7B on white = 5.63:1 */
.trust--gateway .trust-text {
  color: var(--text-mid);                                      /* #475569 on white = 8.04:1 */
  margin-bottom: 1rem;
}
.trust--gateway .trust-badge {
  border-color: var(--rule);
  color: var(--text-dark);                                     /* #0F172A on white = 17.6:1 */
}
/* --teal is 2.31:1 on white and fails even as a 3:1 non-text mark at this
   stroke width, so the icons take the text token on this ground. */
.trust--gateway .trust-badge-icon { color: var(--teal-text); }
.trust--gateway .epd-label { color: var(--text-light); }
.trust--gateway .epd-pill {
  border-color: var(--rule);
  color: var(--text-mid);
}
.trust--gateway .epd-pill.accent {
  background: var(--teal-light);
  border-color: rgba(0,191,179,0.24);
  color: var(--teal-text);                                     /* 5.02:1 worst light ground */
}

/* Where each audience reads the detail. Same measure as the statement it
   follows, so the two read as one paragraph and a footnote. */
.trust-more {
  font-size: 0.9rem;
  color: var(--text-mid);
  max-width: 62ch;
  margin: 0 0 2.5rem;
  line-height: 1.75;
}
.trust-more a {
  color: var(--teal-text);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(0,110,103,0.35);
  transition: text-decoration-color var(--dur-fast) var(--ease);
}
.trust-more a:hover { text-decoration-color: var(--teal-text); }

/* What the employer sees, and what the employer never sees — one rule down
   the middle so the boundary is the visual, not a list of qualifiers. The
   line lives on the right column so it disappears with the split on mobile,
   where the columns stack and the rule turns horizontal. */
.visibility-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 2.5rem;
  max-width: 46rem;
}
.visibility-col--no {
  border-left: 1px solid var(--rule-dark);
  padding-left: 2.5rem;
  margin-left: -1.25rem;
}
.visibility-col__head {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  /* Teal at 0.88 alpha on --marine sits at ~7.5:1; the muted white below
     it at 0.65 stays above 4.5:1 on the same ground. */
  color: var(--teal);
  margin-bottom: 0.85rem;
}
.visibility-col--no .visibility-col__head { color: rgba(255,255,255,0.62); }
.visibility-item {
  border: 1px solid var(--rule-dark);
  border-radius: var(--radius-2xs);
  padding: 0.65rem 1.1rem;
  color: rgba(255,255,255,0.72);
  font-size: 0.9rem;
  font-weight: 600;
}
.visibility-item + .visibility-item { margin-top: 0.6rem; }

@media (max-width: 620px) {
  .visibility-split { grid-template-columns: 1fr; gap: 2rem; }
  .visibility-col--no {
    border-left: none;
    border-top: 1px solid var(--rule-dark);
    padding-left: 0;
    margin-left: 0;
    padding-top: 2rem;
  }
}

/* ==============================
   SECTION 5 — CONTACT
============================== */
#contact {
  background: var(--marine-mid);
  border-top: 1px solid rgba(255,255,255,0.05);
}
.contact-head {
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.contact-head h2 {
  color: var(--white);
  margin: 0 0 1rem;
  max-width: 22ch;
}
.contact-head p {
  color: rgba(255,255,255,0.66);
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.75;
  max-width: 62ch;
}

.form-shell {
  margin: 0;
  background: none;
  border: none;
  border-top: 1px solid var(--rule-dark);
  border-radius: 0;
  padding: 2.5rem 0 0;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 1rem;
}
.form-field label {
  font-size: 0.775rem;
  font-weight: 700;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.04em;
}
.form-field input,
.form-field select,
.form-field textarea {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  color: var(--white);
  font-family: inherit;
  font-size: 0.88rem;
  width: 100%;
  min-width: 0;
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
  -webkit-appearance: none;
}
.form-field input::placeholder,
.form-field textarea::placeholder {
  color: rgba(255,255,255,0.58);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--teal);
  background: rgba(255,255,255,0.09);
}
.form-field select option {
  background: var(--marine-mid);
  color: var(--white);
}
.form-field textarea {
  min-height: 120px;
  resize: vertical;
}

.form-submit-btn {
  width: 100%;
  margin-top: 0.5rem;
  padding: 1.05rem;
  font-size: 0.975rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  min-height: 52px;
  line-height: 1.2;
}
.form-submit-btn:hover { transform: translateY(-2px); }

.form-response-note {
  margin-top: 0.75rem;
  text-align: center;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.55);
}
.modal-body .form-response-note { color: rgba(255,255,255,0.6); }

.form-success-msg {
  display: none;
  text-align: center;
  color: var(--teal);
  font-weight: 600;
  font-size: 1rem;
  padding: 2rem 0;
}

.contact-email-line {
  margin-top: 1.75rem;
  color: rgba(255,255,255,0.62);
  font-size: 0.85rem;
}
.contact-email-line a {
  color: var(--teal);
  text-decoration: none;
}
.contact-email-line a:hover { text-decoration: underline; }

/* Direct routes that bypass the form. WhatsApp keeps its own glyph colour
   so it is recognisable at a glance, but the button itself stays in the
   site's outline vocabulary — the brand green never becomes a surface, so
   teal remains the single accent. */
.contact-direct {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  margin-top: 1.25rem;
}
.contact-direct .btn {
  padding: 0.85rem 1.5rem;
  font-size: 0.925rem;
  min-height: 48px;
}
.btn-whatsapp {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.45);
}
.btn-whatsapp:hover {
  border-color: #25D366;
  background: rgba(37,211,102,0.10);
}
/* #25D366 on the marine form ground reads 8.4:1 — well clear of the 3:1
   floor for a non-text graphic (WCAG 1.4.11). */
.btn-whatsapp .wa-icon { color: #25D366; flex-shrink: 0; }

@media (max-width: 520px) {
  .contact-direct { flex-direction: column; }
  .contact-direct .btn { width: 100%; }
}

.req-note {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.55);
  margin-bottom: 1.25rem;
}
.field-error {
  display: none;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--danger-text);
  margin-top: 2px;
}
.form-field.invalid .field-error { display: block; }
.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
  border-color: var(--danger);
  background: rgba(255,138,117,0.08);
}

.form-banner {
  display: none;
  background: rgba(255,138,117,0.12);
  border: 1px solid rgba(255,138,117,0.4);
  border-radius: var(--radius-sm);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
  color: var(--danger-strong);
  font-size: 0.85rem;
  line-height: 1.7;
}
.form-banner.show { display: block; }
.form-banner a { color: var(--white); font-weight: 700; }
.form-banner .retry-btn {
  margin-top: 0.75rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.3);
  color: var(--white);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-xs);
  cursor: pointer;
  min-height: 44px;
}
.form-banner .retry-btn:hover { background: rgba(255,255,255,0.2); }

.form-submit-btn[aria-busy="true"],
.form-submit-btn:disabled {
  opacity: 0.65;
  cursor: progress;
  transform: none;
}

@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr; }
}

/* ==============================
   FINAL SCROLL — bedrijfsinformatie & juridisch
   Deliberately quiet: no CTA, no colour accent beyond the labels. It is
   the colophon of the page, not another pitch.
============================== */
#bedrijfsinformatie {
  background: var(--marine-900);
  border-top: 1px solid rgba(255,255,255,0.07);
}
.colophon-head {
  font-family: var(--font-sans);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  padding-bottom: 1.25rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.company-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem 1.5rem;
}
.company-name {
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--white);
  letter-spacing: -0.01em;
}
.company-desc {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 0.25rem;
  line-height: 1.5;
}
.col-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--teal);
  margin-bottom: 0.4rem;
}
.col-val {
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
}
.col-val a {
  color: rgba(255, 255, 255, 0.88);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
.col-val a:hover { color: var(--teal); }

.footer-legal-nav {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.legal-links-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.75rem;
  list-style: none;
}
.legal-links-list li a,
.legal-links-list li button {
  font-size: 0.8rem;
  /* 0.66 alpha white on #08172E ≈ 7.1:1 */
  color: rgba(255, 255, 255, 0.66);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
  background: none;
  border: none;
  font-family: inherit;
  cursor: pointer;
  padding: 0.25rem 0;
}
.legal-links-list li a:hover,
.legal-links-list li button:hover {
  color: var(--teal);
  text-decoration: underline;
}

.footer-strip {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.07);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.footer-strip p {
  color: rgba(255,255,255,0.58);
  font-size: 0.78rem;
}
.footer-strip .payoff {
  color: rgba(255,255,255,0.62);
  font-size: 0.78rem;
  font-style: italic;
}

@media (max-width: 960px) {
  .company-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px) {
  .company-grid { grid-template-columns: 1fr; }
  .footer-strip { flex-direction: column; align-items: flex-start; }
}

/* ==============================
   COOKIE BANNER
============================== */
.cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%) translateY(140%);
  z-index: 9999;
  width: calc(100% - 2rem);
  max-width: 680px;
  /* Solid, not blurred, same reasoning as #site-header above - this banner
     is fixed and on-screen for every new visitor's first scroll. */
  background: rgba(11, 30, 58, 0.97);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38), 0 0 0 1px rgba(0, 191, 179, 0.15);
  padding: 1rem 1.25rem;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.45s var(--ease), opacity 0.45s var(--ease);
}
.cookie-banner.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.cookie-text-block {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}
.cookie-icon { color: var(--teal); flex-shrink: 0; }
.cookie-text {
  font-size: 0.84rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.45;
  margin: 0;
}
.cookie-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}
.cookie-btn {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
  min-height: 44px;
  border-radius: var(--radius-xs);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.cookie-btn-accept {
  background: var(--teal);
  color: var(--on-teal);
}
.cookie-btn-accept:hover {
  background: var(--teal-hover);
  transform: translateY(-1px);
}
.cookie-btn-prefs {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
  border-color: rgba(255, 255, 255, 0.15);
}
.cookie-btn-prefs:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}
@media (max-width: 640px) {
  .cookie-banner-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
  }
  .cookie-actions { width: 100%; justify-content: flex-end; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ==============================
   COOKIE PREFERENCES
   The categories mirror the cookieverklaring in legal.html one-for-one —
   if a category changes there, it changes here.
============================== */
.cookie-cat {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.cookie-cat:last-of-type { border-bottom: none; }
.cookie-cat__text { min-width: 0; }
.cookie-cat__name {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--white);
  margin-bottom: 0.3rem;
  cursor: pointer;
}
.cookie-cat__tag {
  display: inline-block;
  margin-left: 0.5rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* 0.66 alpha white on the modal's --marine-mid ground ≈ 6.4:1 */
  color: rgba(255,255,255,0.66);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-pill);
  padding: 0.12rem 0.55rem;
  vertical-align: 2px;
}
.cookie-cat__desc {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.65;
  margin: 0;
}

/* A real checkbox, painted. The input keeps the semantics, the focus and
   the keyboard behaviour; only its appearance is borrowed. */
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 27px;
  flex-shrink: 0;
  margin-top: 2px;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.switch__track {
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.26);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
  pointer-events: none;
}
.switch__track::after {
  content: '';
  position: absolute;
  top: 3px; left: 3px;
  width: 19px; height: 19px;
  border-radius: var(--radius-circle);
  background: var(--white);
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease);
}
.switch input:checked + .switch__track {
  background: var(--teal);
  border-color: var(--teal);
}
.switch input:checked + .switch__track::after {
  transform: translateX(19px);
  background: var(--on-teal);
}
.switch input:disabled { cursor: not-allowed; }
.switch input:disabled + .switch__track { opacity: 0.5; }
.switch input:focus-visible + .switch__track {
  outline: 3px solid var(--focus-ring-on-dark);
  outline-offset: 3px;
}

.modal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
  padding: 1.15rem 1.75rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.modal-actions .cookie-btn { flex: 1 1 auto; }
.modal-actions .cookie-btn-accept { flex-grow: 2; }
@media (max-width: 520px) {
  .modal-actions { flex-direction: column; }
}

/* ==============================
   MODALS — legal + waitlist + cookies
============================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(9, 12, 21, 0.82);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  /* visibility flips instantly on open (0s, no delay) so the dialog is
     focusable in the same tick, and only on close is it deferred until the
     fade has finished. Transitioning visibility itself left the overlay
     invisible for the first frame, which silently swallowed the focus(). */
  transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.modal-overlay.active {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur) var(--ease), visibility 0s linear 0s;
}
.modal-card {
  background: var(--marine-mid);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 191, 179, 0.15);
  max-width: 680px;
  width: 100%;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: scale(0.96) translateY(12px);
  transition: transform var(--dur) var(--ease);
}
.modal-overlay.active .modal-card { transform: scale(1) translateY(0); }
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.modal-header h2,
.modal-header h3 {
  color: var(--white);
  font-size: 1.15rem;
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 700;
}
.modal-close {
  background: rgba(255, 255, 255, 0.07);
  border: none;
  border-radius: var(--radius-circle);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.modal-close:hover { background: rgba(255, 255, 255, 0.15); color: var(--white); }
.modal-body {
  padding: 1.75rem;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.9rem;
  line-height: 1.7;
}
.modal-body h4 {
  color: var(--white);
  font-size: 0.98rem;
  margin: 1.35rem 0 0.4rem;
}
.modal-body h4:first-child { margin-top: 0; }
.modal-body p { margin-bottom: 0.85rem; color: rgba(255, 255, 255, 0.75); }
.modal-body ul, .modal-body ol {
  margin: 0.5rem 0 1rem 1.25rem;
  color: rgba(255, 255, 255, 0.75);
}
.modal-body li { margin-bottom: 0.35rem; }
.modal-body a { color: var(--teal); }
.modal-body strong { color: var(--white); }

/* The two-track complaints diagram and the four-step path */
.track-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}
.track {
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-sm);
  padding: 1rem 1.1rem;
  background: rgba(255,255,255,0.03);
}
.track__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 0.4rem;
}
.modal-body .track h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--white);
  margin: 0 0 0.4rem;
}
.track p { font-size: 0.84rem; margin: 0; }
.step-path {
  list-style: none;
  counter-reset: sp;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  padding: 0;
}
.step-path li {
  counter-increment: sp;
  border-top: 2px solid rgba(0,191,179,0.4);
  padding-top: 0.6rem;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.8);
  margin: 0;
  line-height: 1.45;
}
.step-path li::before {
  content: counter(sp);
  display: block;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--teal);
  margin-bottom: 0.15rem;
}
@media (max-width: 620px) {
  .track-grid { grid-template-columns: 1fr; }
  .step-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Waitlist modal form re-uses the contact field styles */
.modal-body .form-field label { color: rgba(255,255,255,0.72); }
.modal-body .req-note { color: rgba(255,255,255,0.6); }
.modal-intro {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.25rem;
  line-height: 1.7;
}

/* ==============================
   SCROLL REVEAL
============================== */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease);
}
.js .reveal.visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
}

/* ==============================
   FOCUS VISIBILITY  (WCAG 2.4.7 / 1.4.11)
   Ring colour must hit 3:1 against its backdrop, so dark sections get a
   white ring and light sections a marine one.
============================== */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: var(--radius-2xs);
}
#hero :focus-visible,
#site-header :focus-visible,
#trust:not(.trust--gateway) :focus-visible,
#contact :focus-visible,
#bedrijfsinformatie :focus-visible,
.silo-hero :focus-visible,
.modal-overlay :focus-visible,
.cookie-banner :focus-visible {
  outline-color: var(--focus-ring-on-dark);
}
/* Never leave a control with no indicator: only suppress the ring for
   pointer interaction, where :focus-visible does not apply. */
:focus:not(:focus-visible) { outline: none; }

.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: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 100000;
  background: var(--teal);
  color: var(--marine);
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  /* Off-screen via transform (compositor-only) rather than top */
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* ==============================
   TEXT RESILIENCE
   Long words, pasted URLs, CJK, emoji and 30-40% longer translations
   must not break the layout.
============================== */
h1, h2, h3, h4, h5, p, li, td, th, label,
.card-name, .price-main, .price-now, .coverage-pill, .addon-price,
.float-badge, .trust-badge, .epd-pill, .metric-lbl, .gate__name {
  overflow-wrap: break-word;
}
/* Flex/grid children must be allowed to shrink below content size */
.mission-grid > *, .mission-split > *, .funnel-grid > *, .cards-2 > *,
.cards-4 > *, .addon-feature > *,
.addons-grid > *, .form-row-2 > *, .feature-list li > *,
.price-row > *, .app-status-row > *, .header-inner > *,
.gate > *, .benefit > *, .company-grid > *, .silo-hero__inner > * {
  min-width: 0;
}
.logo-block { min-width: 0; }

/* ==============================
   LEGAL PAGE  (legal.html)
   The canonical source for the four legal texts. The modals on the other
   pages read their content from here, so this page stays fully readable
   and linkable with JavaScript switched off.
============================== */
.legal-page {
  padding-top: calc(var(--header-h) + var(--space-section));
  padding-bottom: var(--space-section);
  background: var(--white);
}
.legal-intro {
  max-width: 70ch;
  margin-bottom: clamp(2.5rem, 6vw, 3.5rem);
}
.legal-intro h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}
.legal-intro p {
  color: var(--text-mid);
  font-size: 1rem;
}
.legal-toc {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.legal-toc a {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--teal-text);
  text-decoration: none;
}
.legal-toc a:hover { text-decoration: underline; }

.legal-section {
  border-top: 1px solid var(--marine);
  padding: 2rem 0 clamp(2.5rem, 5vw, 3.5rem);
  max-width: 78ch;
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.legal-section > h2 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  margin-bottom: 1.5rem;
}
.legal-section h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 1.75rem 0 0.5rem;
}
.legal-section h3:first-of-type { margin-top: 0; }
.legal-section p {
  color: var(--text-mid);
  font-size: 0.94rem;
  line-height: 1.8;
  margin-bottom: 0.9rem;
}
.legal-section ul, .legal-section ol {
  margin: 0.5rem 0 1.1rem 1.25rem;
  color: var(--text-mid);
  font-size: 0.94rem;
  line-height: 1.8;
}
.legal-section li { margin-bottom: 0.4rem; }
.legal-section a { color: var(--teal-text); }
.legal-section strong { color: var(--text-dark); }

/* The two-track and four-step blocks read on the light page too */
.legal-section .track {
  border-color: var(--border);
  background: var(--gray-50);
}
.legal-section .track__label { color: var(--teal-text); }
.legal-section .track h4 {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-dark);
  margin: 0 0 0.4rem;
}
.legal-section .track p { font-size: 0.86rem; margin: 0; }
.legal-section .step-path li {
  border-top-color: rgba(0,191,179,0.5);
  color: var(--text-mid);
}
.legal-section .step-path li::before { color: var(--teal-text); }

/* Inside the modal the same blocks flip to their dark-ground colours */
.modal-body h3 {
  color: var(--white);
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 700;
  margin: 1.35rem 0 0.4rem;
}
.modal-body h3:first-child { margin-top: 0; }