/* ============================================================
   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.22);
  --dark: #2c2a27;

  --mentora-text: #2c2a27;
  --mentora-text-primary: #2c2a27;
  --mentora-text-secondary: #55524c;
  --mentora-text-tertiary: #7b7771;
  --mentora-bg: #ffffff;
  --mentora-bg-secondary: #f7f3ee;
  --mentora-border: rgba(72, 65, 58, 0.12);
  --mentora-border-mid: rgba(72, 65, 58, 0.18);

  --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-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: 80px 40px;
  border-top: 0.5px solid var(--mentora-border);
}
.landing-section.no-rule { border-top: none; }
.section-band { background: var(--mentora-bg-secondary); 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: #F7F5F2;
  border-bottom: 0.5px solid var(--mentora-border);
  padding: 40px 40px 60px;
}
.hero-grid {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: 72px; align-items: center;
}
.hero-inner { max-width: 560px; }
.hero-inner--solo { max-width: 640px; margin: 0 auto; }
.hero-eyebrow {
  display: block;
  font-size: 11px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase;
  color: var(--mentora-text-tertiary); margin-bottom: 20px;
}
.hero-headline {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.2vw, 46px); 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: 480px; 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: 28px 0 0; padding-top: 20px;
  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: 24px;
  background: var(--mentora-bg);
  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); }
.pcard h3 { font-size: 15px; font-weight: 500; margin: 0 0 8px; color: var(--dark); }
.pcard p { font-size: 13px; color: var(--mentora-text-secondary); line-height: 1.65; font-weight: 300; }
.pcard ul { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: var(--mentora-text-secondary); line-height: 1.7; }
.pcard ul li { margin-bottom: 6px; }
.pcard.teal-edge { border-color: var(--teal-border); box-shadow: 0 0 0 4px rgba(74,158,181,.05); }

/* 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: 24px 20px;
  background: var(--mentora-bg);
  position: relative;
  display: flex;
  flex-direction: column;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.process-card:hover {
  border-color: var(--teal);
  box-shadow: 0 8px 24px rgba(95, 140, 121, 0.08);
  transform: translateY(-2px);
}
.process-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.process-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  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;
}
.process-card:hover .process-icon-wrap {
  background: var(--teal);
  color: #fff;
  transform: scale(1.05);
}
.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: 500;
  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;
}
.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); }

/* ── 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,.1); color: #9a5f18; }
.demand.high { background: var(--teal-dim); color: var(--teal-text); }
.demand.steady { background: rgba(0,0,0,.05); 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;
}
.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, from landing.css) ───────────────── */
.cta-block {
  margin: 0 auto 72px; background: #2b2621; border-radius: var(--radius-xl);
  padding: 56px 48px; display: flex; align-items: center;
  justify-content: space-between; gap: 32px; max-width: 1200px;
}
.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: 13px; 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,.4); margin-top: 16px; line-height: 1.6; }

/* ── 16. FORM ─────────────────────────────────────────────── */
.lead-form { display: grid; gap: 16px; max-width: 480px; }
.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;
}
.lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--teal); }
.lead-form textarea { min-height: 96px; 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); }
.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; }
}
@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: 48px 20px; }
  .hero { padding: 32px 20px 40px; }
  .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; }
  .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; }
}