/* =============================================================================
 * Package pages — consolidated stylesheet
 * -----------------------------------------------------------------------------
 * Replaces the three near-identical page stylesheets that previously duplicated
 * the same components with different prefixes:
 *     pakket-studiecoaching.css (.pkg2 / .pkg2-* / .price-card)
 *     brugklas.css              (.pkg4 / .bru-* / .bru-price-card)
 *     examen.css                (.pkg3 / .exm-* / .exm-price-card)
 *
 * Shared rules are now written once with grouped selectors. Genuine per-page
 * differences (hero gradient origin, blob positions, the exam dot-timeline, a
 * couple of column ratios) are the only rules that stay page-specific — scoped
 * by the body class (.pkg2 pakket · .pkg3 examen · .pkg4 brugklas) or by the
 * page's unique element prefix.
 *
 * These class names map 1:1 onto the React design system:
 *   price card → <PriceCard>   trust pills → <Chip>/<ChipGroup>
 *   section head → <SectionHeader>   steps/timeline → <Steps>   CTA → <CTABand>
 *   hero → <Hero variant="split">
 * ========================================================================== */

.pkg2,
.pkg3,
.pkg4 {
  overflow-x: hidden;
}

/* Eyebrow — identical on all three pages. */
.pkg2 .eyebrow,
.pkg3 .eyebrow,
.pkg4 .eyebrow {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 0 0 18px;
}

/* =========================================================================
 * HERO
 * ====================================================================== */
.pkg2-hero,
.bru-hero,
.exm-hero {
  position: relative;
  overflow: hidden;
  padding: 72px 0 84px;
}
.pkg2-hero .container,
.bru-hero .container,
.exm-hero .container {
  position: relative;
  z-index: 1;
}
.pkg2-hero .blob,
.bru-hero .blob,
.exm-hero .blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Per-page background wash (different gradient origin per page). */
.pkg2-hero {
  background: radial-gradient(120% 90% at 15% 0%, var(--sand) 0%, var(--cream) 62%);
}
.bru-hero {
  background: radial-gradient(130% 100% at 15% 0%, var(--sand) 0%, var(--cream) 60%);
}
.exm-hero {
  background: radial-gradient(130% 100% at 85% 0%, var(--sand) 0%, var(--cream) 60%);
}

/* Per-page blob positions. */
.pkg2-hero .blob-1 {
  top: -180px;
  right: -160px;
  width: 520px;
  height: 520px;
  filter: blur(20px);
  background: radial-gradient(circle, rgba(127, 166, 149, 0.2) 0%, rgba(127, 166, 149, 0) 70%);
}
.pkg2-hero .blob-2 {
  bottom: 20px;
  left: -200px;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, rgba(97, 133, 116, 0.14) 0%, rgba(97, 133, 116, 0) 55%);
}
.bru-hero .blob-1 {
  top: -190px;
  right: -170px;
  width: 540px;
  height: 540px;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(127, 166, 149, 0.2) 0%, rgba(127, 166, 149, 0) 70%);
}
.bru-hero .blob-2 {
  bottom: -60px;
  left: -220px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(97, 133, 116, 0.13) 0%, rgba(97, 133, 116, 0) 55%);
}
.exm-hero .blob-1 {
  top: -200px;
  left: -180px;
  width: 540px;
  height: 540px;
  filter: blur(22px);
  background: radial-gradient(circle, rgba(127, 166, 149, 0.2) 0%, rgba(127, 166, 149, 0) 70%);
}
.exm-hero .blob-2 {
  bottom: -60px;
  right: -220px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(97, 133, 116, 0.13) 0%, rgba(97, 133, 116, 0) 55%);
}

.pkg2-hero-grid,
.bru-hero-grid,
.exm-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.pkg2-hero h1,
.bru-hero h1,
.exm-hero h1 {
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--dark);
  margin: 0 0 22px;
}
.pkg2-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  max-width: 12ch;
}
.bru-hero h1 {
  font-size: clamp(32px, 4.2vw, 54px);
  max-width: 14ch;
}
.exm-hero h1 {
  font-size: clamp(34px, 4.4vw, 56px);
  max-width: 13ch;
}
.pkg2-hero h1 .accent,
.bru-hero h1 .accent,
.exm-hero h1 .accent {
  color: var(--green-dark);
}

.pkg2-lead,
.bru-lead,
.exm-lead {
  font-size: clamp(17px, 1.5vw, 20px);
  color: var(--dark);
  line-height: 1.65;
  margin: 0 0 28px;
}
.pkg2-lead {
  max-width: 46ch;
}
.bru-lead,
.exm-lead {
  max-width: 48ch;
}

.pkg2-trust,
.bru-trust,
.exm-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}
.pkg2-trust li,
.bru-trust li,
.exm-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dark);
}
.pkg2-trust li::before,
.bru-trust li::before,
.exm-trust li::before {
  content: '✓';
  color: var(--green-dark);
  font-weight: 800;
}

.pkg2-hero .btn-row,
.bru-hero .btn-row,
.exm-hero .btn-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

/* =========================================================================
 * FREQUENCY PRICE CARD  (hero, all three package pages)
 * -----------------------------------------------------------------------------
 * Replaces the old single-amount reassurance card. Shows three per-week tiers
 * with the middle one highlighted as "meest gekozen". Translated from the
 * imported OptionC design onto the site's own --rds-* design tokens (defined in
 * css/tokens.css), so colours, spacing and type stay in sync with the rest of
 * the site. Shared once across .pkg2 (pakket) · .pkg3 (examen) · .pkg4 (brugklas).
 * ====================================================================== */
.freq-card {
  position: relative;
  max-width: 400px;
  margin: 18px auto 0;
  background: var(--rds-color-surface);
  border-top: 4px solid var(--rds-color-sage);
  border-radius: var(--rds-radius-2xl);
  box-shadow: var(--rds-shadow-lg);
  padding: var(--rds-space-6) var(--rds-space-7);
  font-family: var(--rds-font-body);
}
.freq-card .freq-badge {
  position: absolute;
  top: -18px;
  left: var(--rds-space-7);
  display: inline-block;
  white-space: nowrap;
  font-family: var(--rds-font-body);
  font-weight: var(--rds-font-weight-medium);
  font-size: var(--rds-font-size-2xs);
  letter-spacing: var(--rds-letter-spacing-wide);
  padding: 8px 18px;
  border-radius: var(--rds-radius-pill);
  background: var(--rds-color-primary);
  color: var(--rds-color-primary-text);
  box-shadow: var(--rds-shadow-primary);
}
.freq-card .freq-eyebrow {
  margin: var(--rds-space-2) 0 var(--rds-space-1);
  font-family: var(--rds-font-body);
  font-weight: var(--rds-font-weight-medium);
  font-size: var(--rds-font-size-xs);
  letter-spacing: var(--rds-letter-spacing-eyebrow);
  text-transform: uppercase;
  color: var(--rds-color-accent);
}
.freq-card .freq-title {
  margin: 0 0 var(--rds-space-4);
  font-family: var(--rds-font-heading);
  font-weight: var(--rds-font-weight-regular);
  font-size: var(--rds-font-size-lg);
  color: var(--rds-color-heading);
}
.freq-tiers {
  display: flex;
  flex-direction: column;
  gap: var(--rds-space-2);
  margin-bottom: var(--rds-space-5);
}
.freq-tier {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rds-space-4);
  padding: var(--rds-space-3) var(--rds-space-5);
  border: 2px solid var(--rds-color-border);
  border-radius: var(--rds-radius-lg);
  background: transparent;
}
.freq-tier.is-featured {
  border-color: var(--rds-color-primary);
  background: var(--rds-color-bg-alt);
}
.freq-tier .freq-tier-badge {
  position: absolute;
  top: -11px;
  right: var(--rds-space-4);
  white-space: nowrap;
  font-family: var(--rds-font-body);
  font-weight: var(--rds-font-weight-bold);
  font-size: 10px;
  letter-spacing: var(--rds-letter-spacing-wide);
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: var(--rds-radius-pill);
  background: var(--rds-color-primary);
  color: var(--rds-color-primary-text);
}
.freq-tier .freq-freq {
  font-family: var(--rds-font-body);
  font-weight: var(--rds-font-weight-medium);
  font-size: var(--rds-font-size-md);
  color: var(--rds-color-text-strong);
  white-space: nowrap;
}
.freq-tier .freq-sub {
  font-family: var(--rds-font-body);
  font-size: var(--rds-font-size-xs);
  color: var(--rds-color-text);
}
.freq-tier .freq-amount {
  font-family: var(--rds-font-heading);
  font-weight: var(--rds-font-weight-bold);
  font-size: var(--rds-font-size-2xl);
  color: var(--rds-color-heading);
  white-space: nowrap;
}
.freq-tier .freq-amount span {
  font-family: var(--rds-font-body);
  font-weight: var(--rds-font-weight-regular);
  font-size: var(--rds-font-size-xs);
  color: var(--rds-color-text);
}
.freq-features {
  list-style: none;
  margin: 0 0 var(--rds-space-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--rds-space-2);
}
.freq-features li {
  display: flex;
  gap: var(--rds-space-2);
  font-family: var(--rds-font-body);
  font-size: var(--rds-font-size-sm);
  color: var(--rds-color-text);
  line-height: var(--rds-line-height-snug);
}
.freq-features li::before {
  content: '✓';
  color: var(--rds-color-primary);
  font-weight: var(--rds-font-weight-extrabold);
  flex-shrink: 0;
}
.freq-card .btn {
  display: block;
  width: 100%;
  text-align: center;
}
.freq-card .freq-fineprint {
  margin: var(--rds-space-2) 0 0;
  font-family: var(--rds-font-body);
  font-size: var(--rds-font-size-2xs);
  color: var(--rds-color-text);
  text-align: center;
}

/* =========================================================================
 * SECTION HEAD
 * ====================================================================== */
.pkg2-head,
.bru-head,
.exm-head {
  text-align: center;
  margin: 0 auto 52px;
}
.pkg2-head {
  max-width: 720px;
}
.bru-head,
.exm-head {
  max-width: 760px;
}
.pkg2-head h2,
.bru-head h2,
.exm-head h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  color: var(--dark);
  margin: 0 0 14px;
}
.pkg2-head p,
.bru-head p,
.exm-head p {
  font-size: 17px;
  color: var(--muted);
  margin: 0;
}

/* =========================================================================
 * "VOOR WIE?" GRID  — pakket uses .recognise-*, brugklas/examen use .who-*
 * ====================================================================== */
.pkg2-recognise {
  padding: 90px 0;
}
.bru-who,
.exm-who {
  padding: 90px 0;
}

.recognise-lead,
.who-lead {
  max-width: 780px;
  margin: 0 auto;
  font-size: 18px;
  color: var(--dark);
  line-height: 1.75;
  text-align: left;
}
.recognise-lead {
  max-width: 760px;
}
.recognise-sub,
.who-sub {
  text-align: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin: 56px 0 30px;
}
.recognise-grid,
.who-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.recognise-item,
.who-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px 24px;
  box-shadow: var(--shadow);
}
/* who-item carries a sage accent border; recognise-item does not. */
.who-item {
  border-top: 3px solid var(--sage);
}
.recognise-item .ico,
.who-item .ico {
  font-size: 24px;
  margin-bottom: 12px;
  display: block;
}
.recognise-item p,
.who-item p {
  margin: 0;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.55;
}
.recognise-foot,
.who-foot {
  text-align: center;
  margin-top: 40px;
  font-size: 17px;
  color: var(--muted);
}
.recognise-foot strong,
.who-foot strong {
  color: var(--dark);
}

/* =========================================================================
 * INCLUDES  (prose + at-a-glance box)
 * ====================================================================== */
.pkg2-includes,
.bru-includes,
.exm-includes {
  background: var(--sand);
  padding: 90px 0;
}
.includes-layout {
  display: grid;
  gap: 44px;
  align-items: start;
  max-width: 1040px;
  margin: 0 auto;
}
/* Column ratio differs on the pakket page. */
.pkg2 .includes-layout {
  grid-template-columns: 1.1fr 0.9fr;
}
.pkg3 .includes-layout,
.pkg4 .includes-layout {
  grid-template-columns: 1.05fr 0.95fr;
}
.includes-prose {
  margin: 0;
}
/* On the pakket page the prose is ordered first within the grid. */
.pkg2 .includes-prose {
  order: -1;
}
.includes-prose p {
  font-size: 16.5px;
  color: var(--dark);
  line-height: 1.8;
  margin: 0 0 20px;
}
.includes-prose p:last-child {
  margin: 0;
}
.includes-box {
  align-self: start;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 22px;
  box-shadow: var(--shadow);
}
/* Slightly roomier padding on the pakket page. */
.pkg2 .includes-box {
  padding: 36px 40px;
}
.pkg3 .includes-box,
.pkg4 .includes-box {
  padding: 34px 36px;
}
.includes-box h3 {
  font-family: 'Quicksand', sans-serif;
  font-size: 20px;
  color: var(--dark);
}
.pkg2 .includes-box h3 {
  text-align: center;
  margin: 0 0 26px;
}
.pkg3 .includes-box h3,
.pkg4 .includes-box h3 {
  margin: 0 0 22px;
}

/* pakket: at-a-glance list is .includes-grid */
.includes-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  list-style: none;
  padding: 0;
}
.includes-grid li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  font-size: 16.5px;
  color: var(--dark);
  line-height: 1.5;
}
.includes-grid li::before {
  content: '✓';
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* brugklas/examen: at-a-glance list is .includes-list */
.includes-list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 13px;
}
.includes-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 15.5px;
  color: var(--dark);
  line-height: 1.5;
}
.includes-list li::before {
  content: '✓';
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-dark);
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.includes-box .btn {
  display: block;
  text-align: center;
}

/* =========================================================================
 * STEPS / TIMELINE
 *   pakket    → .pkg2-steps + .pkg2-step (numbered)
 *   brugklas  → .bru-timeline + .tl-* (numbered circles, dashed line)
 *   examen    → .exm-timeline + .tl-* (hollow dots, gradient line, tags)
 * ====================================================================== */
.pkg2-steps,
.bru-timeline,
.exm-timeline {
  padding: 90px 0;
}
.pkg2-steps-grid,
.tl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  position: relative;
}
.pkg2-steps-line {
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
.pkg2-step,
.tl-step {
  position: relative;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pkg2-step .num,
.tl-num {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
  font-size: 22px;
  box-shadow: 0 6px 16px rgba(97, 133, 116, 0.35);
}
.pkg2-step h3,
.tl-step h3 {
  font-size: 18px;
  color: var(--dark);
  margin-bottom: 8px;
}
.pkg2-step p,
.tl-step p {
  font-size: 14.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* brugklas timeline connector: dashed. */
.pkg4 .tl-line {
  position: absolute;
  top: 27px;
  left: 12%;
  right: 12%;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 16px);
}
/* examen timeline connector: gradient, plus dot markers and period tags. */
.pkg3 .tl-line {
  position: absolute;
  top: 46px;
  left: 12%;
  right: 12%;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--sage) 0%, var(--green) 55%, var(--green-dark) 100%);
}
.tl-tag {
  font-family: 'Quicksand', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 12px;
}
.tl-dot {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--green);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tl-dot::after {
  content: '';
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green-dark);
}

/* =========================================================================
 * SEE ALSO
 * ====================================================================== */
.pkg2-seealso,
.bru-seealso,
.exm-seealso {
  padding: 0 0 90px;
}

/* =========================================================================
 * CTA BAND  (was identical across all three pages)
 * ====================================================================== */
.pkg2-cta-wrap,
.bru-cta-wrap,
.exm-cta-wrap {
  padding: 0 0 84px;
}
.pkg2-cta,
.bru-cta,
.exm-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: linear-gradient(135deg, var(--green), var(--green-dark));
  border-radius: 28px;
  padding: 72px 44px;
}
.pkg2-cta .orb,
.bru-cta .orb,
.exm-cta .orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.pkg2-cta .orb-1,
.bru-cta .orb-1,
.exm-cta .orb-1 {
  top: -70px;
  right: -50px;
  width: 240px;
  height: 240px;
  background: rgba(255, 255, 255, 0.08);
}
.pkg2-cta .orb-2,
.bru-cta .orb-2,
.exm-cta .orb-2 {
  bottom: -80px;
  left: -40px;
  width: 200px;
  height: 200px;
  background: rgba(255, 255, 255, 0.06);
}
.pkg2-cta h2,
.bru-cta h2,
.exm-cta h2 {
  position: relative;
  font-size: clamp(26px, 3.2vw, 36px);
  color: #fff;
  margin: 0 0 14px;
}
.pkg2-cta p,
.bru-cta p,
.exm-cta p {
  position: relative;
  font-size: 18px;
  color: rgba(255, 255, 255, 0.92);
  margin: 0 auto 32px;
  max-width: 52ch;
}
.pkg2-cta .btn-row,
.bru-cta .btn-row,
.exm-cta .btn-row {
  position: relative;
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}
.pkg2-cta .cta-btn,
.bru-cta .cta-btn,
.exm-cta .cta-btn {
  background: #fff;
  color: var(--green-dark);
}
.pkg2-cta .cta-btn:hover,
.bru-cta .cta-btn:hover,
.exm-cta .cta-btn:hover {
  background: var(--cream);
  transform: translateY(-3px);
}
.pkg2-cta .cta-btn-outline,
.bru-cta .cta-btn-outline,
.exm-cta .cta-btn-outline {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.pkg2-cta .cta-btn-outline:hover,
.bru-cta .cta-btn-outline:hover,
.exm-cta .cta-btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.85);
  transform: translateY(-3px);
}

/* =========================================================================
 * DESKTOP: hero fills the first screen (min-width 901px)
 * ====================================================================== */
@media (min-width: 901px) {
  .pkg2-hero,
  .bru-hero,
  .exm-hero {
    min-height: calc(100vh - 55px);
    display: flex;
    align-items: center;
    padding-top: 40px;
    /* Bottom padding must clear the price card's drop shadow (~70px reach):
       the hero clips overflow (for the blobs), so too little room here cut the
       shadow off against the next section. */
    padding-bottom: 80px;
  }
  .pkg2-hero .container,
  .bru-hero .container,
  .exm-hero .container {
    width: 100%;
  }
}

/* =========================================================================
 * RESPONSIVE  (≤ 900px and ≤ 560px)
 * ====================================================================== */
@media (max-width: 900px) {
  .pkg2-hero-grid,
  .bru-hero-grid,
  .exm-hero-grid {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .pkg2-hero h1,
  .bru-hero h1,
  .exm-hero h1 {
    max-width: none;
  }
  .recognise-grid,
  .who-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* Scoped to match the per-page base specificity so the collapse wins. */
  .pkg2 .includes-layout,
  .pkg3 .includes-layout,
  .pkg4 .includes-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  /* brugklas/examen promote the at-a-glance box above the prose on mobile. */
  .pkg3 .includes-box,
  .pkg4 .includes-box {
    order: -1;
  }
  /* pakket steps use a 44px row-gap; the brugklas/examen timelines use 48px. */
  .pkg2-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 44px 24px;
  }
  .tl-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 48px 24px;
  }
  .pkg2-steps-line,
  .pkg3 .tl-line,
  .pkg4 .tl-line {
    display: none;
  }
}

@media (max-width: 560px) {
  .pkg2-hero,
  .bru-hero,
  .exm-hero {
    padding: 52px 0 60px;
  }
  .pkg2-recognise,
  .pkg2-includes,
  .pkg2-steps,
  .bru-who,
  .bru-includes,
  .bru-timeline,
  .exm-who,
  .exm-includes,
  .exm-timeline {
    padding: 60px 0;
  }
  .pkg2-seealso,
  .pkg2-cta-wrap,
  .bru-seealso,
  .bru-cta-wrap,
  .exm-seealso,
  .exm-cta-wrap {
    padding-bottom: 60px;
  }
  .recognise-grid,
  .who-grid {
    grid-template-columns: 1fr;
  }
  /* Both at-a-glance lists are already single-column with their own gaps
     (includes-grid 14px on pakket, includes-list 13px on brugklas/examen), so
     no override is needed here — doing so previously bumped the list gap. */
  .pkg2-steps-grid,
  .tl-grid {
    grid-template-columns: 1fr;
  }
  .freq-card,
  .pkg2 .includes-box,
  .pkg3 .includes-box,
  .pkg4 .includes-box {
    padding: 28px 24px;
  }
  .pkg2-cta,
  .bru-cta,
  .exm-cta {
    padding: 56px 26px;
  }
}