/* ============================================================
   MentoraMedic EU — reuses the mentoramedic.nl landing design
   system (static/css/landing.css + fonts.css + _header.html).
   Tokens, typography, buttons, cards and FAQ are kept identical;
   only EU-specific blocks (quiz, specialties, pricing) are new,
   and they are built from the same primitives.
   ============================================================ */

/* ── FONTS (mirrors static/css/fonts.css) ─────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/dm-sans-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'DM Serif Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/dm-serif-display-regular.woff2') format('woff2');
}

/* ── 1. VARIABLES ─────────────────────────────────────────── */
:root {
  --teal: #5f8c79;
  --teal-hover: #54796b;
  --teal-text: #3f6f5f;
  --teal-dim: rgba(95, 140, 121, 0.12);
  --teal-border: rgba(95, 140, 121, 0.25);
  --dark: #2c2a27;

  --mentora-text: #2c2a27;
  --mentora-text-primary: #2c2a27;
  --mentora-text-secondary: #55524c;
  --mentora-text-tertiary: #7b7771;
  --mentora-bg: #ffffff;
  --mentora-bg-secondary: #FAF7F2;
  --mentora-bg-warm: #FAF6F0;
  --mentora-bg-cream: #F5EFEB;
  --mentora-bg-amber-dim: rgba(220, 150, 70, 0.09);
  --mentora-bg-sage-dim: rgba(95, 140, 121, 0.09);
  --mentora-border: rgba(72, 65, 58, 0.12);
  --mentora-border-mid: rgba(72, 65, 58, 0.18);
  --mentora-border-warm: rgba(190, 160, 130, 0.22);

  --card-shadow: 0 4px 20px -2px rgba(44, 42, 39, 0.05), 0 2px 6px -1px rgba(44, 42, 39, 0.03);
  --card-shadow-hover: 0 16px 36px -6px rgba(44, 42, 39, 0.1), 0 4px 12px -2px rgba(44, 42, 39, 0.04);
  --warm-glow: radial-gradient(circle at 50% 0%, rgba(224, 168, 109, 0.15), transparent 70%);

  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --font-body: 'DM Sans', 'Inter', sans-serif;
  --font-display: 'DM Serif Display', serif;
  --font-mono: 'Courier New', monospace;
}

/* ── 2. BASE ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: hidden; scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  color: var(--mentora-text);
  background-color: var(--mentora-bg);
  line-height: 1.6;
  margin: 0;
  padding-top: 58px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { text-decoration: none; color: var(--teal-text); }
p { margin-bottom: 0; }
img { max-width: 100%; height: auto; }

/* ── 3. ANIMATIONS ────────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up.d1 { transition-delay: .1s; }
.fade-up.d2 { transition-delay: .2s; }
.fade-up.d3 { transition-delay: .3s; }

/* ── 4. TYPOGRAPHY HELPERS ────────────────────────────────── */
.section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: #64748b;
  margin-bottom: 12px;
  display: block;
}
.section-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 36px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--dark);
  margin: 0 0 24px;
  letter-spacing: -0.4px;
}
.section-title em { color: var(--teal); font-style: italic; }
.section-intro {
  max-width: 640px;
  font-size: 15px;
  color: var(--mentora-text-secondary);
  line-height: 1.85;
  font-weight: 300;
}
.section-intro strong { color: var(--mentora-text); font-weight: 500; }
.note { font-size: 13px; color: var(--mentora-text-tertiary); line-height: 1.7; }

/* ── 5. BUTTONS ───────────────────────────────────────────── */
.btn-primary {
  background: var(--teal);
  color: #fff;
  border: 1px solid var(--teal);
  padding: 14px 30px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
  transition: opacity .2s, transform .2s, box-shadow .2s;
  text-align: center;
}
.btn-primary:hover {
  color: #fff;
  opacity: .92;
}
.btn-primary:active { transform: scale(.98); }

.btn-outline {
  background: transparent;
  color: var(--mentora-text-secondary);
  border: 0.5px solid var(--mentora-border-mid);
  padding: 14px 30px;
  border-radius: var(--radius-md);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--font-body);
  text-decoration: none;
  display: inline-block;
  text-align: center;
  transition: background .2s, color .2s, transform .16s ease-out;
}
.btn-outline:hover { color: var(--mentora-text); background: rgba(0,0,0,.03); }
.btn-outline:active { transform: scale(.97); }

.btn-white {
  background: #fff; color: var(--dark);
  padding: 14px 30px; border-radius: var(--radius-md);
  font-size: 14px; font-weight: 500; text-decoration: none;
  display: inline-block; border: none; cursor: pointer;
  font-family: var(--font-body); text-align: center;
  transition: transform .2s, box-shadow .2s, opacity .2s;
}
.btn-white:hover { opacity: .92; color: var(--dark); }
.btn-white:active { transform: scale(.98); }

.btn-ghost-dark {
  background: transparent; color: #8fa8b4;
  border: 0.5px solid rgba(255,255,255,.18);
  padding: 14px 30px; border-radius: var(--radius-md);
  font-size: 13px; cursor: pointer; font-family: var(--font-body);
  text-decoration: none; display: inline-block; text-align: center;
  transition: color .2s, background .2s, transform .16s ease-out;
}
.btn-ghost-dark:hover { color: #fff; background: rgba(255,255,255,.05); }

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-white:focus-visible,
.btn-ghost-dark:focus-visible,
.faq-trigger:focus-visible,
.opt:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: var(--radius-md);
}
.btn-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }

/* ── 6. HEADER (mirrors _header.html .mh) ─────────────────── */
.mh {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,.07);
  height: 58px;
}
.mh-inner {
  max-width: 1100px; margin: 0 auto; height: 100%; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between; min-width: 0;
}
.mh-logo { display: flex; align-items: center; flex-shrink: 0; }
.mh-logo-img { height: 32px; width: auto; }
.mh-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.mh-ghost-btn {
  padding: 6px 10px; border-radius: 10px; background: transparent;
  color: #1e293b; font-size: 13px; font-weight: 500; border: none;
  transition: background .15s; min-height: 36px; display: flex; align-items: center;
}
.mh-ghost-btn:hover { background: rgba(0,0,0,.05); color: #1e293b; }
.mh-outline-btn {
  padding: 6px 14px; border-radius: 10px; background: transparent;
  color: #1e293b; font-size: 13px; font-weight: 600;
  border: 1px solid var(--mentora-border-mid);
  transition: background .15s; min-height: 36px; display: flex; align-items: center;
}
.mh-outline-btn:hover { background: rgba(0,0,0,.05); color: #1e293b; }
.mh-primary-btn {
  background: var(--teal); color: #fff; padding: 8px 16px;
  border-radius: 10px; font-size: 13px; font-weight: 600;
  min-height: 36px; display: flex; align-items: center;
  transition: opacity .2s;
}
.mh-primary-btn:hover { opacity: .88; color: #fff; }
@media (max-width: 768px) {
  .mh-desktop-only { display: none !important; }
  .mh-logo-img { height: 26px; }
  .mh-inner { padding: 0 15px; }
}

/* ── 6b. MOBILE DISCLOSURE ────────────────────────────────── */
/* Two long supporting sections collapse on a phone. The markup ships with
   `open` and a script closes it below 768px, so a failed script leaves the
   sections expanded — the same content every wider screen gets. The summary
   is a plain block; only the toggle affordance is mobile-only. */
.m-collapse > summary {
  display: block;
  list-style: none;
}
.m-collapse > summary::-webkit-details-marker { display: none; }
/* The heading and the intro are two blocks now, so only the intro carries the
   48px gap to the content — desktop spacing is unchanged. */
.m-collapse > summary .section-head { margin-bottom: 0; }

@media (max-width: 768px) {
  .m-collapse > summary { cursor: pointer; }
  .m-collapse > summary::after {
    content: 'Show ' '\25be';
    display: block;
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    color: var(--teal-text);
  }
  .m-collapse[open] > summary::after { content: 'Hide ' '\25b4'; margin-bottom: 28px; }
}

/* ── 7. SECTION SHELL ─────────────────────────────────────── */
.landing-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 88px 40px;
  border-top: 0.5px solid var(--mentora-border);
}
.landing-section.no-rule { border-top: none; }
.section-band {
  background: linear-gradient(180deg, #FBF8F4 0%, #F5EFEB 100%);
  border-top: 0.5px solid var(--mentora-border);
}
.section-band .landing-section { border-top: none; }
.section-head { max-width: 700px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ── 8. HERO ──────────────────────────────────────────────── */
.hero {
  background: radial-gradient(circle at 82% 18%, rgba(224, 168, 109, 0.16) 0%, transparent 45%),
              radial-gradient(circle at 12% 82%, rgba(95, 140, 121, 0.12) 0%, transparent 50%),
              linear-gradient(180deg, #FCFAF7 0%, #F5EFEB 100%);
  border-bottom: 0.5px solid var(--mentora-border);
  padding: 48px 40px 68px;
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -120px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(220, 150, 70, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.hero-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 72px; align-items: center;
  position: relative;
  z-index: 1;
}
.hero-inner { max-width: 560px; }
.hero-inner--solo { max-width: 640px; margin: 0 auto; }
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--teal-text);
  background: var(--teal-dim);
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 22px;
}
.hero-headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(34px, 4.4vw, 48px); line-height: 1.12;
  letter-spacing: -0.02em; color: var(--dark); margin: 0 0 20px;
  text-wrap: balance;
}
.hero-headline em { color: var(--teal-text); font-style: italic; }
.hero-sub {
  font-size: 16px; color: var(--mentora-text-secondary);
  line-height: 1.75; font-weight: 300; max-width: 490px; margin: 0 0 28px;
}
.btn-text {
  font-size: 14px; font-weight: 500; color: var(--mentora-text-secondary);
  transition: color .15s ease;
}
.btn-text:hover { color: var(--teal-text); }
.btn-text:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 2px;
}

/* One quiet line under the CTA — facts as type, not badges. */
.hero-proof {
  margin: 24px 0 0; padding-top: 18px;
  border-top: 0.5px solid var(--mentora-border-mid);
  font-size: 13px; line-height: 1.6;
  color: var(--mentora-text-tertiary); max-width: 480px;
}
/* ── 8b. HERO SAMPLE ASSESSMENT (document excerpt) ────────── */
.hero-visual { position: relative; container-type: inline-size; }

/* Hand gripping the sheet. The photo's page area is fully transparent, so the
   live card below shows through it as the paper. The image sits ABOVE the card
   so the thumb overlaps it the way it overlaps real paper; the fingers fall
   outside the card's left edge. Decorative only — hidden from assistive tech. */
.hero-hand {
  position: absolute;
  z-index: 2;
  left: -24.2%;
  bottom: -7.9cqw;
  width: 70%;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* The cutout ends in two hard edges — the wrist at the frame bottom and the
     paper's edge shadow on the right. Dissolve both so nothing reads as a crop. */
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 20%),
                      linear-gradient(to left, transparent 38%, #000 54%);
  mask-image: linear-gradient(to top, transparent 0, #000 20%),
              linear-gradient(to left, transparent 38%, #000 54%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.assessment-doc {
  position: relative; z-index: 1;
  margin: 0; background: #fff;
  border: 0.5px solid var(--mentora-border-mid);
  border-radius: var(--radius-lg);
  box-shadow: 0 1px 2px rgba(26, 26, 46, .04);
  overflow: hidden;
}
.assessment-doc__header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 0.5px solid var(--mentora-border);
}
.assessment-doc__type {
  margin: 0 0 6px;
  font-size: 10px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase;
  color: var(--mentora-text-tertiary);
}
.assessment-doc__ref {
  margin: 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .02em;
  color: var(--mentora-text-secondary);
}
.assessment-doc__sample {
  flex-shrink: 0;
  font-size: 10px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mentora-text-tertiary);
}
.assessment-doc__input {
  margin: 0; padding: 14px 24px;
  font-size: 12px; line-height: 1.5; color: var(--mentora-text-secondary);
  border-bottom: 0.5px solid var(--mentora-border);
  background: var(--mentora-bg-secondary);
}
.assessment-doc__input-label {
  display: block;
  font-size: 9px; font-weight: 600; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mentora-text-tertiary); margin-bottom: 4px;
}
.assessment-doc__body {
  position: relative;
  max-height: 420px;
  overflow: hidden;
  padding: 22px 24px 32px;
}
.assessment-doc__body::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events: none;
}
.assessment-doc__section + .assessment-doc__section { margin-top: 22px; }
.assessment-doc__label {
  margin: 0 0 10px;
  font-size: 9px; font-weight: 600; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--teal-text);
}
.assessment-doc__verdict {
  font-family: var(--font-display); font-weight: 400; font-size: 20px;
  line-height: 1.25; color: var(--dark); margin: 0 0 10px;
}
.assessment-doc__text {
  margin: 0;
  font-size: 13px; line-height: 1.75; font-weight: 300;
  color: var(--mentora-text-secondary);
}
.assessment-doc__text strong { color: var(--mentora-text); font-weight: 500; }
.assessment-doc__facts {
  display: grid; gap: 0; margin: 0;
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-md); overflow: hidden;
}
.assessment-doc__facts > div {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 10px 14px;
  border-bottom: 0.5px solid var(--mentora-border);
  background: var(--mentora-bg-secondary);
}
.assessment-doc__facts > div:last-child { border-bottom: none; }
.assessment-doc__facts dt {
  font-size: 11px; color: var(--mentora-text-tertiary);
}
.assessment-doc__facts dd {
  margin: 0; font-size: 11px; font-weight: 500; color: var(--mentora-text);
  text-align: right;
}
/* Одна ссылка внутри образца аудита — на курс. Подчёркивание пунктиром,
   а не цветом: образец должен читаться как документ, а не как страница
   с призывами, но кликабельность обязана быть видна. */
.assessment-doc__facts a.assessment-doc__link {
  color: inherit; text-decoration: underline;
  text-decoration-style: dotted;
  text-underline-offset: 3px;
  text-decoration-color: var(--mentora-border-mid, var(--mentora-border));
}
.assessment-doc__facts a.assessment-doc__link:hover {
  color: var(--teal-text); text-decoration-color: currentColor;
}

.assessment-doc__list {
  margin: 0; padding-left: 18px;
  font-size: 12px; line-height: 1.75; font-weight: 300;
  color: var(--mentora-text-secondary);
}
.assessment-doc__list li { margin-bottom: 4px; }
.assessment-doc__list li:last-child { margin-bottom: 0; }
.assessment-doc__callout {
  margin: 22px 0 0; padding: 14px 16px;
  border-left: 2px solid var(--teal);
  background: var(--mentora-bg-secondary);
  font-size: 12px; line-height: 1.7; font-weight: 300;
  color: var(--mentora-text-secondary);
}
.assessment-doc__callout p { margin: 0; }
.assessment-doc__callout strong { color: var(--mentora-text); font-weight: 500; }
.assessment-doc__steps {
  list-style: none; display: flex; gap: 8px; margin: 0; padding: 0;
}
.assessment-doc__steps li {
  flex: 1; font-size: 10px; letter-spacing: .04em;
  color: var(--mentora-text-tertiary); padding-top: 10px;
  border-top: 1.5px solid var(--mentora-border);
}
.assessment-doc__steps li.done { border-top-color: var(--teal); color: var(--mentora-text-secondary); }
.assessment-doc__steps li.now { border-top-color: var(--teal); color: var(--teal-text); font-weight: 600; }
.assessment-doc__footer {
  /* Tall band with a left inset: the thumb grips this corner, so the footer
     is sized to be the one place it can land without covering a line. */
  padding: 38px 24px 38px 74px;
  border-top: 0.5px solid var(--mentora-border);
  font-size: 11px; letter-spacing: .02em;
  color: var(--mentora-text-tertiary);
  background: var(--mentora-bg-secondary);
}

.assessment-note { margin-top: 16px; max-width: 520px; }

/* ── 8c. ENTRANCE ─────────────────────────────────────────── */
/* Single soft fade for the whole hero — once per visit. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.rise {
  opacity: 0;
  animation: rise-in 280ms cubic-bezier(.23, 1, .32, 1) forwards;
}

/* ── 9. PATHWAY CARDS (.pcard / .pnum from landing.css) ───── */
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.pcard {
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-xl);
  padding: 26px 24px;
  background: #ffffff;
  box-shadow: var(--card-shadow);
  transition: border-color .25s ease, background .25s ease, transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.pcard:hover { background: #fff; border-color: var(--teal-border); box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }
.pcard h3 { font-size: 16px; font-weight: 600; margin: 0 0 8px; color: var(--dark); }
.pcard p { font-size: 13.5px; color: var(--mentora-text-secondary); line-height: 1.65; font-weight: 300; }
.pcard ul { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--mentora-text-secondary); line-height: 1.7; }
.pcard ul li { margin-bottom: 6px; }
.pcard.teal-edge { border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal), var(--card-shadow); }

/* Process Roadmap & Icons */
.process-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.process-card {
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-xl);
  padding: 28px 22px;
  background: #ffffff;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: var(--card-shadow);
  transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  overflow: hidden;
}
.process-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: 0;
  transition: opacity .25s ease;
}
.process-card:hover {
  border-color: var(--teal);
  box-shadow: var(--card-shadow-hover);
  transform: translateY(-4px);
}
.process-card:hover::before {
  opacity: 1;
}
.process-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.process-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--teal-dim);
  color: var(--teal-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s ease, transform .2s ease, color .2s ease;
}
.process-card:hover .process-icon-wrap {
  background: var(--teal);
  color: #fff;
  transform: scale(1.08);
}
.process-num {
  font-family: var(--font-display);
  font-size: 26px;
  line-height: 1;
  color: var(--mentora-text-tertiary);
  font-weight: 400;
}
.process-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px;
  color: var(--dark);
}
.process-card p {
  font-size: 13px;
  color: var(--mentora-text-secondary);
  line-height: 1.65;
  font-weight: 300;
  margin: 0;
  flex-grow: 1;
}
.process-timeline-banner {
  margin-top: 24px;
  padding: 14px 20px;
  background: var(--mentora-bg-secondary);
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--mentora-text-secondary);
}
.process-timeline-badge {
  background: var(--teal);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.pnum {
  font-family: var(--font-display); font-size: 40px; line-height: 1;
  font-weight: 400; color: var(--teal); letter-spacing: -.01em; margin-bottom: 14px;
}
.pcard-tag {
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  color: var(--teal-text); text-transform: uppercase; display: block; margin-bottom: 12px;
}
.pcard-tag.muted { color: var(--mentora-text-tertiary); }

/* ── 9b. THE EUROPEAN RECOGNITION CORRIDOR (Interactive Map) ── */
.corridor-wrapper {
  background: #fbf9f6;
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.02);
}
.corridor-grid {
  display: grid;
  grid-template-columns: 1.85fr 1fr;
  gap: 24px;
  align-items: stretch;
}
.corridor-map-col {
  position: relative;
  background: #f4efe8;
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-lg);
  padding: 0;
  overflow: hidden;
  display: flex;
}
.corridor-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Место под карту, пока она едет. Без этого колонка схлопывается в ноль и
   страница дёргается на всю её высоту в момент появления. */
.corridor-svg-slot {
  /* Колонка — flex-контейнер, и элемент по умолчанию сжимается по содержимому,
     а содержимого до приезда карты нет. flex: 1 отдаёт ему всю ширину, как
     раньше делал width: 100% у самой svg. */
  flex: 1;
  aspect-ratio: 760 / 650;
  display: block;
}
.map-land {
  fill: #e5dfd5;
  stroke: #ffffff;
  stroke-width: 0.65;
  stroke-linejoin: round;
  stroke-linecap: round;
  transition: fill .2s ease, stroke .2s ease, filter .2s ease;
}
.map-context {
  fill: #ede8df;
  stroke: #ffffff;
  stroke-width: 0.5;
  opacity: 0.5;
  pointer-events: none;
}
.map-sea {
  fill: #f4efe8;
}
.map-country {
  cursor: pointer;
}
.map-country:hover, .map-country.active {
  fill: #bedcd0;
  stroke: #5f8c79;
  stroke-width: 1;
}
.map-country-nl {
  fill: #5f8c79 !important;
  stroke: #2c2a27;
  stroke-width: 1.2;
}
.corridor-ray {
  fill: none;
  stroke: rgba(95, 140, 121, 0.3);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  pointer-events: none;
  transition: stroke .25s ease, stroke-width .25s ease, opacity .25s ease;
}
.corridor-ray.active {
  stroke: #2e594b;
  stroke-width: 2.5;
  stroke-dasharray: 6 3;
  animation: corridorFlow 1.2s linear infinite;
  opacity: 1;
}
@keyframes corridorFlow {
  from { stroke-dashoffset: 18; }
  to   { stroke-dashoffset: 0; }
}

/* Pulsing markers */
.hub-beacon {
  transform-origin: center;
  animation: hubPulse 2.4s cubic-bezier(0.25, 1, 0.5, 1) infinite;
  pointer-events: none;
}
@keyframes hubPulse {
  0% { r: 6; opacity: 0.8; stroke-width: 2; }
  50% { r: 18; opacity: 0.2; stroke-width: 1; }
  100% { r: 24; opacity: 0; stroke-width: 0.5; }
}
.node-pin {
  cursor: pointer;
}
.pin-dot {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.node-pin:hover .pin-dot,
.node-pin.active .pin-dot {
  transform: scale(1.4);
}
.pin-label {
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s cubic-bezier(0.25, 1, 0.5, 1), transform .18s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translateY(2px);
}
.node-pin:hover .pin-label,
.node-pin.active .pin-label {
  opacity: 1;
  transform: translateY(0);
}

/* Hub marker styling */
.hub-marker {
  cursor: default;
}
.hub-marker rect,
.hub-marker text {
  pointer-events: none;
}

/* Snapshot Info Card */
.corridor-card {
  background: #fff;
  border: 0.5px solid var(--mentora-border-mid);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03);
}
.corridor-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 0.5px solid var(--mentora-border);
  padding-bottom: 14px;
  margin-bottom: 16px;
}
.corridor-country-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.corridor-flag {
  font-size: 26px;
  line-height: 1;
}
.corridor-name {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--dark);
  margin: 0;
  font-weight: 400;
}
.corridor-directive-badge {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  background: var(--teal-dim);
  color: var(--teal-text);
  padding: 4px 8px;
  border-radius: 4px;
}
.corridor-fact-list {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
}
.corridor-fact-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 12px;
  background: var(--mentora-bg-secondary);
  border-radius: var(--radius-md);
  font-size: 12px;
}
.corridor-fact-row dt {
  color: var(--mentora-text-tertiary);
  font-weight: 500;
}
.corridor-fact-row dd {
  margin: 0;
  font-weight: 600;
  color: var(--dark);
  text-align: right;
}
.corridor-note {
  font-size: 13px;
  line-height: 1.65;
  color: var(--mentora-text-secondary);
  font-weight: 300;
  margin-bottom: 20px;
  background: #fbf9f6;
  padding: 12px 14px;
  border-left: 2px solid var(--teal);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.corridor-cta-btn {
  width: 100%;
  text-align: center;
}

/* Quick country pills */
.corridor-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 0.5px solid var(--mentora-border);
}
.corridor-pill {
  background: #fff;
  border: 0.5px solid var(--mentora-border-mid);
  border-radius: 100px;
  padding: 6px 14px;
  font-size: 12px;
  color: var(--mentora-text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all .18s ease;
  font-family: var(--font-body);
}
.corridor-pill:hover, .corridor-pill.active {
  background: var(--dark);
  color: #fff;
  border-color: var(--dark);
  transform: translateY(-1px);
}

/* ── 9c. EDITORIAL PHOTO GRID (Why Doctors Choose NL) ──────── */
.editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.editorial-card {
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-xl);
  background: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.editorial-card:hover {
  border-color: var(--teal-border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}
.editorial-media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  background: var(--mentora-bg-secondary);
}
.editorial-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.16, 1, 0.3, 1);
}
.editorial-card:hover .editorial-img {
  transform: scale(1.03);
}
.editorial-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--dark);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 5px 10px;
  border-radius: 100px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.editorial-stat-pill {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(44, 42, 39, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
}
.editorial-content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.editorial-content h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--dark);
  margin: 0 0 10px;
  line-height: 1.2;
}
.editorial-content p {
  font-size: 13.5px;
  color: var(--mentora-text-secondary);
  line-height: 1.7;
  font-weight: 300;
  margin: 0;
}

/* ── 10. STATS ────────────────────────────────────────────── */
.stat-value {
  font-family: var(--font-display); font-size: 34px; line-height: 1.1;
  font-weight: 400; color: var(--dark); letter-spacing: -.02em; margin-bottom: 8px;
}
.stat-key { font-size: 13px; color: var(--mentora-text-secondary); line-height: 1.65; font-weight: 300; }

/* ── 11. PRICING ──────────────────────────────────────────── */
.tier-price {
  font-family: var(--font-display); font-size: 30px; line-height: 1;
  color: var(--dark); margin: 4px 0 4px;
}
.tier-price small { font-family: var(--font-body); font-size: 13px; color: var(--mentora-text-tertiary); }
.tier ul { list-style: none; padding: 0; margin: 16px 0 0; }
.tier ul li {
  position: relative; padding-left: 18px; margin-bottom: 8px;
  font-size: 12px; color: var(--mentora-text-secondary); line-height: 1.65;
}
.tier ul li::before { content: "—"; position: absolute; left: 0; color: var(--teal); }

.tier-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.tier-actions .btn-primary, .tier-actions .btn-outline { padding: 12px 20px; font-size: 13px; }
/* The two packages are not on sale on their own: the note replaces the button
   rather than sitting under a disabled one, which reads as a fault. */
.tier-locked {
  margin-top: 18px; padding: 12px 14px; border-radius: var(--radius-md);
  background: rgba(0,0,0,.03); font-size: 12px; line-height: 1.6;
  color: var(--mentora-text-secondary);
}

/* Collapsible package scope */
.tier-expandable { margin-top: 10px; }
.tier-expand-trigger {
  font-size: 12px; font-weight: 500; color: var(--teal-text);
  cursor: pointer; padding: 6px 0; display: inline-flex;
  align-items: center; gap: 4px; user-select: none;
  list-style: none; transition: color .15s ease;
}
.tier-expand-trigger:hover { color: var(--teal); text-decoration: underline; }
.tier-expand-trigger::-webkit-details-marker { display: none; }
.tier-expandable .tier-expanded-list { margin-top: 8px; }

/* ── 12. SPECIALTIES ──────────────────────────────────────── */
.spec-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.spec-name { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--dark); margin: 0; line-height: 1.2; }
.spec-en { display: block; font-family: var(--font-body); font-size: 12px; color: var(--mentora-text-tertiary); margin-top: 3px; }
.demand {
  font-size: 10px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px; white-space: nowrap; flex-shrink: 0;
}
.demand.critical { background: rgba(200,120,40,.12); color: #9a5f18; }
.demand.high { background: var(--teal-dim); color: var(--teal-text); }
.demand.steady { background: rgba(0,0,0,.06); color: var(--mentora-text-secondary); }
.spec dl { margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 12px; }
.spec dt { color: var(--mentora-text-tertiary); letter-spacing: .04em; }
.spec dd { margin: 0; color: var(--mentora-text-secondary); line-height: 1.65; }

#more-specs[hidden] { display: none; }
.center { text-align: center; }

/* ── 13. QUIZ ─────────────────────────────────────────────── */
.quiz {
  border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-xl);
  background: #fff;
  padding: 36px;
  max-width: 780px;
  box-shadow: 0 12px 30px rgba(0,0,0,.03);
}
.quiz-progress {
  font-size: 10px; letter-spacing: 2px; font-weight: 600;
  color: var(--teal-text); text-transform: uppercase; margin-bottom: 12px;
}
/* Wat uit het MentoraMedic-dossier is overgenomen. Zichtbaar, want de prijs
   hangt aan deze antwoorden: niemand hoort een bedrag te krijgen op iets wat
   hij nooit heeft gezien. */
.quiz-prefill {
  font-size: 13px; line-height: 1.5; color: var(--muted, #5b6478);
  margin: -4px 0 18px;
}
.quiz-prefill-reset {
  background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  color: var(--teal-text); text-decoration: underline;
}
.quiz h3 {
  font-family: var(--font-display); font-size: 26px; font-weight: 400;
  line-height: 1.2; color: var(--dark); margin: 0 0 24px;
}
.opts { display: grid; gap: 10px; }
.opt {
  text-align: left; width: 100%; padding: 16px 18px;
  border: 0.5px solid var(--mentora-border); border-radius: var(--radius-lg);
  background: #fff; color: var(--mentora-text);
  font-family: var(--font-body); font-size: 14px; cursor: pointer;
  transition: border-color .2s, background .2s, transform .16s ease-out;
}
.opt:hover { border-color: var(--teal-border); background: rgba(74,158,181,.04); }
.opt:active { transform: scale(.99); }
.opt small { display: block; color: var(--mentora-text-tertiary); font-size: 12px; margin-top: 4px; }
select.opt { appearance: none; background-image: none; }
.quiz-field { display: grid; gap: 12px; }
.quiz-field input {
  padding: 14px 16px; border: 0.5px solid var(--mentora-border);
  border-radius: var(--radius-lg); font-family: var(--font-body);
  font-size: 14px; max-width: 220px; color: var(--mentora-text);
}
.quiz-back {
  margin-top: 22px; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--mentora-text-tertiary); font-family: var(--font-body);
  font-size: 13px; text-decoration: underline;
}
.quiz-back:hover { color: var(--mentora-text); }

/* quiz result */
.result h3 { font-family: var(--font-display); font-size: 28px; margin: 8px 0 18px; }
.result p { font-size: 15px; color: var(--mentora-text-secondary); line-height: 1.85; font-weight: 300; margin-bottom: 16px; }
.result p strong { color: var(--mentora-text); font-weight: 500; }
.result ul { padding-left: 18px; font-size: 14px; color: var(--mentora-text-secondary); line-height: 1.8; font-weight: 300; }
.result ul li { margin-bottom: 6px; }
.result h4 {
  font-size: 10px; letter-spacing: 2px; font-weight: 600; text-transform: uppercase;
  color: var(--teal-text); margin: 26px 0 12px;
}
.facts { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }
.fact {
  background: var(--mentora-bg-secondary); border-radius: var(--radius-lg);
  padding: 12px 16px; font-size: 13px; color: var(--mentora-text);
}
.fact b {
  display: block; font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase;
  color: var(--mentora-text-tertiary); font-weight: 600; margin-bottom: 4px;
}
.callout {
  margin: 22px 0; padding: 18px 20px; border-radius: var(--radius-lg);
  background: var(--teal-dim); border-left: 3px solid var(--teal);
  font-size: 14px; color: var(--mentora-text-secondary); line-height: 1.8; font-weight: 300;
}
.callout p { margin-bottom: 10px; }
.callout p:last-child { margin-bottom: 0; }
.callout b { color: var(--mentora-text); font-weight: 500; }
.result .btn-row { margin-top: 26px; }

/* ── 14. FAQ (mirrors blocks/faq.html) ────────────────────── */
.faq-accordion { display: flex; flex-direction: column; gap: 16px; max-width: 900px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--mentora-border); border-radius: 12px;
  background: var(--mentora-bg); overflow: hidden; transition: border-color .3s ease;
}
.faq-item.active { border-color: var(--teal); }
.faq-trigger {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  padding: 24px; background: transparent; border: none; outline: none;
  text-align: left; cursor: pointer; transition: background .2s;
}
.faq-trigger h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 500;
  color: var(--mentora-text-primary); padding-right: 20px; margin: 0; line-height: 1.35;
}
.faq-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--teal); transition: transform .3s ease; }
.faq-item.active .faq-icon { transform: rotate(180deg); }
.faq-content { max-height: 0; overflow: hidden; transition: max-height .3s cubic-bezier(.4,0,.2,1); }
.faq-content > div { padding: 0 24px 24px; font-size: 15px; color: var(--mentora-text-secondary); line-height: 1.75; font-weight: 300; }

/* ── 15. CTA BLOCK (dark, warm ambient) ──────────────────── */
.cta-block {
  margin: 0 auto 72px;
  background: radial-gradient(circle at 90% 10%, rgba(220, 150, 70, 0.15) 0%, transparent 50%),
              linear-gradient(135deg, #24201c 0%, #1c2622 100%);
  border: 1px solid rgba(220, 180, 130, 0.18);
  border-radius: var(--radius-xl);
  padding: 56px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  box-shadow: 0 20px 48px -12px rgba(28, 24, 20, 0.35);
  position: relative;
  overflow: hidden;
}
.cta-block::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(224, 168, 109, 0.5), transparent);
}
.cta-block h2 {
  font-family: var(--font-display); font-size: 32px; font-weight: 400;
  color: #f4eee7; line-height: 1.25; max-width: 460px; margin: 0;
}
.cta-block h2 em { color: var(--teal); font-style: italic; }
.cta-block p { font-size: 13.5px; color: #d8ccc1; margin-top: 10px; line-height: 1.65; }
.cta-block ul { margin: 14px 0 0; padding-left: 18px; font-size: 13px; color: #d8ccc1; line-height: 1.8; }
.cta-side { flex-shrink: 0; }
.cta-price { font-family: var(--font-display); font-size: 44px; color: #fff; line-height: 1; margin-bottom: 6px; }
.cta-btns { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-top: 20px; }
.cta-fine { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 16px; line-height: 1.6; }

/* ── 16. FORM & CONTACT ───────────────────────────────────── */
.lead-form { display: grid; gap: 16px; width: 100%; max-width: 580px; }
.lead-form label { font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mentora-text); display: grid; gap: 6px; }
.lead-form input, .lead-form textarea {
  padding: 13px 15px; border: 0.5px solid var(--mentora-border-mid);
  border-radius: var(--radius-md); font-family: var(--font-body);
  font-size: 14px; font-weight: 400; color: var(--mentora-text); background: #fff;
  transition: border-color .2s, box-shadow .2s;
}
.lead-form input:focus, .lead-form textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-dim);
}
.lead-form textarea { min-height: 100px; resize: vertical; }
.lead-form button { justify-self: start; }

/* ── 17. FOOTER ───────────────────────────────────────────── */
.site-footer {
  border-top: 0.5px solid var(--mentora-border);
  padding: 48px 40px; max-width: 1200px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 24px;
  font-size: 13px; color: var(--mentora-text-tertiary);
}
.footer-links {
  display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center;
}
.footer-links a {
  color: var(--mentora-text-secondary); text-decoration: none; transition: color .15s ease;
}
.footer-links a:hover { color: var(--teal-text); text-decoration: underline; }
.footer-meta {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  padding-top: 20px; border-top: 0.5px solid rgba(0,0,0,0.06);
  font-size: 12px; color: var(--mentora-text-tertiary);
}
.footer-meta a { color: var(--mentora-text-secondary); text-decoration: none; }
.footer-meta a:hover { color: var(--teal-text); }

.pcard-head { font-family: var(--font-display); font-size: 20px; font-weight: 400; color: var(--dark); margin: 0 0 10px; }
.pcard-text { margin-top: 10px; }
.pcard-note { margin-top: 14px; }
.section-callout { margin-top: 32px; max-width: 820px; }
.fine-print { margin-top: 10px; font-size: 12px; color: var(--mentora-text-tertiary); }
.pricing-notes { margin-top: 28px; max-width: 820px; display: grid; gap: 14px; }
.pricing-notes p { margin: 0; font-size: 14px; color: var(--mentora-text-secondary); }
.pricing-notes strong { color: var(--dark); }
.pricing-notes .fine-print { margin-top: 4px; }
.more-specs-grid { margin-top: 20px; }
.section-actions { margin-top: 32px; text-align: center; }
.section-label--accent { color: var(--teal-text); }
.section-compact-top { padding-top: 72px; }
.cta-disclaimer { font-size: 12px; color: rgba(248,245,241,0.85); margin: 0; }

/* ── 18. RESPONSIVE ───────────────────────────────────────── */
@media (max-width: 1024px) {
  .corridor-grid { grid-template-columns: 1fr; gap: 24px; }
  .corridor-wrapper { padding: 24px; }
  .mentorship-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 900px) {
  .grid-4, .process-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .editorial-grid { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-hand { display: none; }
  /* Hand is gone, so the footer no longer needs a thumb landing zone. */
  .assessment-doc__footer { padding: 14px 24px; }
  .hero-inner { max-width: 640px; }
}
@media (max-width: 768px) {
  /* Illustrative blocks: a phone visitor loses nothing by not scrolling them.
     The corridor and specialty sections carry real content and are collapsed
     rather than dropped — see .m-collapse. */
  .hero-visual,
  #practice { display: none; }

  .landing-section { padding: 52px 20px; }
  .hero { padding: 36px 20px 48px; }
  .assessment-doc__header,
  .assessment-doc__input,
  .assessment-doc__body,
  .assessment-doc__footer { padding-left: 18px; padding-right: 18px; }
  .assessment-doc__body { max-height: none; padding-bottom: 22px; }
  .assessment-doc__body::after { display: none; }
  .assessment-doc__verdict { font-size: 18px; }
  .assessment-doc__steps { flex-wrap: wrap; }
  .assessment-doc__steps li { flex: 1 1 44%; }
  .grid-4, .process-grid, .grid-2 { grid-template-columns: 1fr; }
  .editorial-content { padding: 18px; }
  .editorial-content h3 { font-size: 20px; }
  .mentorship-card-floating { position: static; margin-top: 16px; }
  .contact-grid { grid-template-columns: 1fr; }
  .quiz { padding: 24px 18px; }
  .quiz h3 { font-size: 22px; }
  .result h3 { font-size: 24px; }
  .cta-block { flex-direction: column; align-items: flex-start; padding: 36px 20px; }
  .site-footer { padding: 32px 20px; }
}
@media (max-width: 480px) {
  .btn-primary, .btn-outline { padding: 12px 24px; }
  .corridor-wrapper { padding: 18px; }
  .corridor-card { padding: 18px; }
}

/* ── 19. ACCESSIBILITY ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .rise { opacity: 1; animation: none; }
  .btn-primary:hover, .btn-white:hover, .btn-outline:hover,
  .btn-primary:active, .btn-outline:active, .opt:active,
  .pcard:hover { transform: none; }
}

/* ── 20. SERVICES & TARIFF SPECIFICATION (MM-WEB-SPEC-2026-V4) ─── */
.tariff-header {
  padding: 64px 20px 36px;
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
}
.tariff-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-border);
  color: var(--teal-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tariff-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 400;
  line-height: 1.15;
  color: var(--dark);
  margin: 0 0 16px;
  letter-spacing: -0.5px;
}
.tariff-subtitle {
  font-size: 16px;
  color: var(--mentora-text-secondary);
  line-height: 1.7;
  max-width: 720px;
  margin: 0 auto 32px;
  font-weight: 300;
}

/* VAT Switcher Bar */
.vat-control-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin: 0 auto 40px;
  padding: 8px 14px;
  background: var(--mentora-bg-secondary);
  border: 1px solid var(--mentora-border);
  border-radius: 999px;
  width: fit-content;
  max-width: 100%;
}
.vat-label {
  font-size: 13px;
  font-family: inherit;
  background: none;
  border: 0;
  padding: 0;
  font-weight: 500;
  color: var(--mentora-text-secondary);
  cursor: pointer;
  user-select: none;
}
.vat-label.active {
  color: var(--dark);
  font-weight: 700;
}
.vat-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
}
.vat-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.vat-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: var(--teal);
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 34px;
}
.vat-slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.vat-switch input:checked + .vat-slider {
  background-color: #4a5568;
}
.vat-switch input:checked + .vat-slider:before {
  transform: translateX(22px);
}

/* Category Quick Navigation */
.tariff-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 48px;
  position: sticky;
  top: 66px;
  z-index: 20;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(10px);
  padding: 10px 16px;
  border-radius: 12px;
  border: 1px solid var(--mentora-border);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}
.tariff-nav-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--mentora-text-secondary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: all .2s ease;
  text-decoration: none;
}
.tariff-nav-btn:hover {
  background: var(--mentora-bg-secondary);
  color: var(--dark);
}
.tariff-nav-btn.active {
  background: var(--teal-dim);
  color: var(--teal-text);
  border-color: var(--teal-border);
  font-weight: 600;
}

/* Tier Section Containers */
.tier-block {
  margin-bottom: 64px;
  scroll-margin-top: 130px;
}
.tier-block-header {
  border-bottom: 1px solid var(--mentora-border);
  padding-bottom: 18px;
  margin-bottom: 28px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
}
.tier-tagline {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--dark);
  margin: 4px 0 0;
}
.tier-scope-note {
  font-size: 13px;
  color: var(--teal-text);
  font-style: italic;
  margin: 0;
}

/* Table Style for Tiers */
.tariff-table-wrapper {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--mentora-border);
  background: #ffffff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.02);
  margin-bottom: 24px;
}
.tariff-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
  font-size: 14px;
}
.tariff-table th {
  background: var(--mentora-bg-secondary);
  color: var(--dark);
  font-weight: 600;
  padding: 14px 18px;
  border-bottom: 1px solid var(--mentora-border);
  white-space: nowrap;
}
.tariff-table td {
  padding: 16px 18px;
  border-bottom: 1px solid rgba(72, 65, 58, 0.08);
  vertical-align: top;
  color: var(--mentora-text-secondary);
  line-height: 1.6;
}
.tariff-table tr:last-child td {
  border-bottom: none;
}
.tariff-table tr:hover td {
  background: rgba(247, 243, 238, 0.4);
}
.service-name {
  font-weight: 600;
  color: var(--dark);
  font-size: 15px;
  margin-bottom: 4px;
}
.turnaround-pill {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.04);
  font-size: 12px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
}
.price-cell {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.price-primary {
  font-size: 16px;
  font-weight: 700;
  color: var(--dark);
}
.price-secondary {
  font-size: 12px;
  color: var(--mentora-text-tertiary);
  margin-top: 2px;
}

/* Grid Cards for Procedural and Trajectory Packages */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 24px;
}
.package-card {
  background: #ffffff;
  border: 1px solid var(--mentora-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .25s ease;
  position: relative;
}
.package-card:hover {
  border-color: var(--teal-border);
  box-shadow: 0 8px 24px rgba(95, 140, 121, 0.08);
  transform: translateY(-2px);
}
.package-card.highlight {
  border: 1.5px solid var(--teal);
  box-shadow: 0 4px 20px rgba(95, 140, 121, 0.12);
}
.package-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--teal);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.package-header h3 {
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--dark);
  margin: 0 0 8px;
}
.package-header p {
  font-size: 13px;
  color: var(--mentora-text-tertiary);
  margin: 0 0 18px;
}
.package-price-box {
  background: var(--mentora-bg-secondary);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  margin-bottom: 20px;
}
.package-price-box .price-main {
  font-size: 24px;
  font-weight: 700;
  color: var(--dark);
}
.package-price-box .price-sub {
  font-size: 12px;
  color: var(--mentora-text-tertiary);
}
.package-features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-grow: 1;
}
.package-features li {
  font-size: 13.5px;
  color: var(--mentora-text-secondary);
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
  line-height: 1.5;
}
.package-features li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--teal);
  font-weight: 700;
}

/* Legal Callout & WAADI Boxes */
.legal-box {
  background: #fdfbf7;
  border: 1px solid #ebd9c8;
  border-left: 4px solid #c97d3e;
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: #5c4431;
}
.legal-box strong {
  color: #3b281b;
}
.waadi-banner {
  background: #f0f7f4;
  border: 1px solid var(--teal-border);
  border-left: 4px solid var(--teal);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 24px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--teal-text);
}
.waadi-banner strong {
  color: #1e4537;
}

/* Credit & Disbursement Cards */
.disbursement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 16px;
}
.disbursement-card {
  background: var(--mentora-bg-secondary);
  border: 1px solid var(--mentora-border);
  border-radius: var(--radius-md);
  padding: 18px;
}
.disbursement-card h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--dark);
  margin: 0 0 6px;
}
.disbursement-card .disb-fee {
  font-size: 18px;
  font-weight: 700;
  color: var(--teal-text);
  margin-bottom: 8px;
}
.disbursement-card p {
  font-size: 12.5px;
  color: var(--mentora-text-tertiary);
  margin: 0;
  line-height: 1.5;
}

/* Interactive Consent Checkbox Box (Bedenktijd) */
.consent-box {
  background: #ffffff;
  border: 1.5px solid var(--teal-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  margin: 32px 0;
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
}
.consent-box-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.consent-box-header h4 {
  margin: 0;
  font-size: 16px;
  color: var(--dark);
  font-weight: 600;
}
.consent-checkbox-wrapper {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--mentora-bg-secondary);
  border-radius: 8px;
  cursor: pointer;
}
.consent-checkbox-wrapper input[type="checkbox"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--teal);
  cursor: pointer;
}
.consent-text {
  font-size: 13px;
  color: var(--mentora-text-secondary);
  line-height: 1.55;
  user-select: none;
}
.consent-text i {
  font-size: 12px;
  color: var(--mentora-text-tertiary);
  display: block;
  margin-top: 4px;
}

/* Status Indicator */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
}
.status-pill.gemachtigde {
  background: rgba(95, 140, 121, 0.15);
  color: #2b5645;
}
.status-pill.statutory {
  background: rgba(59, 130, 246, 0.1);
  color: #1d4ed8;
}