/* ═══════════════════════════════════════════════════════════════════════
   DARIJA BY HAJIBA — DESIGN UPGRADE LAYER (v2)
   Purely presentational: no copy, no SEO, no markup semantics change here.

   LOAD ORDER: the layout's `stylesheet_link_tag :app` includes every CSS
   file in app/assets, sorted by logical path, so "v2.css" is emitted after
   "application.css" and wins the cascade. Keep any new filename sorting
   after "application" (or link it explicitly) or these overrides stop
   applying.

   Goals
   1. Authority  — one consistent type scale, rhythm, border/shadow system,
                   higher text contrast, real interaction states.
   2. Conversion — one obvious primary action per screen, price clarity,
                   persistent CTA on long pages, low-friction forms.

   Rollback: delete this file, then
   `RAILS_ENV=production bin/rails assets:precompile` + restart darija.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────────────── */
:root {
  /* Text: darker, layered. Replaces the single washed-out grey. */
  --ink:        #1F1E1B;   /* headings */
  --body:       #4B463D;   /* paragraphs */
  --muted:      #6B6458;   /* meta, labels, hints */
  --faint:      #8C8477;   /* captions */

  --border:      #DBD2C3;
  --border-lite: #E9E4DA;
  --hair:        rgba(31,30,27,0.08);

  /* Brand stays. Added: accessible variants for text and buttons. */
  --terra-ink:  #9A4322;   /* terra used as TEXT on light grounds */
  --terra-cta:  #A84E29;   /* terra used as BUTTON ground (white text) */
  --terra-cta-h:#8C3D1D;
  --gold-cta:   #D3A144;   /* gold button ground */
  --gold-cta-h: #C69638;
  --gold-ink:   #1E3529;   /* text on gold: 5.6:1, vs 2.7:1 for white */
  --forest-deep: #1E3529;

  /* Type scale (fluid) */
  --fs-overline: 0.69rem;
  --fs-sm:       0.875rem;
  --fs-base:     1.0625rem;
  --fs-lg:       1.15rem;
  --fs-h3:       1.3rem;
  --fs-h2:       clamp(2rem, 3.4vw, 3rem);
  --fs-h1:       clamp(2.35rem, 4.6vw, 3.85rem);
  --fs-display:  clamp(2.6rem, 5.2vw, 4.4rem);

  /* Rhythm */
  --sec:      clamp(4.25rem, 8vw, 7.5rem);
  --sec-tight:clamp(3.25rem, 6vw, 5.5rem);
  --gutter:   clamp(1.25rem, 4vw, 2rem);

  /* Shape */
  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;

  /* Elevation — warm-tinted, layered */
  --sh-1: 0 1px 2px rgba(31,30,27,0.04), 0 2px 8px rgba(31,30,27,0.05);
  --sh-2: 0 2px 4px rgba(31,30,27,0.04), 0 12px 30px rgba(31,30,27,0.08);
  --sh-3: 0 4px 10px rgba(31,30,27,0.05), 0 28px 64px rgba(31,30,27,0.13);
  --sh-cta:  0 6px 20px rgba(168,78,41,0.26);
  --sh-gold: 0 6px 20px rgba(201,150,58,0.30);

  --ring: 0 0 0 3px rgba(45,74,62,0.22);
  --ring-gold: 0 0 0 3px rgba(232,185,101,0.45);
}

/* ── 2. BASE ────────────────────────────────────────────────────────── */
body:not(.admin-body) {
  font-size: var(--fs-base);
  line-height: 1.72;
  color: var(--body);
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
}

/* Headings: tighter, darker, no orphan-heavy wrapping. */
body:not(.admin-body) h1,
body:not(.admin-body) h2,
body:not(.admin-body) h3 {
  text-wrap: balance;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
body:not(.admin-body) p { text-wrap: pretty; }

/* Anchor targets clear the fixed navbar (e.g. the "Meer info" → #praktisch jump). */
body:not(.admin-body) [id] { scroll-margin-top: 92px; }

/* Visible, branded focus for keyboard users — an accessibility and
   craft signal, and it never shows on mouse clicks. */
body:not(.admin-body) a:focus-visible,
body:not(.admin-body) button:focus-visible,
body:not(.admin-body) input:focus-visible,
body:not(.admin-body) select:focus-visible,
body:not(.admin-body) textarea:focus-visible,
body:not(.admin-body) summary:focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
.section--forest a:focus-visible,
.cs-section--forest a:focus-visible,
.cs-hero a:focus-visible,
.cs-hero input:focus-visible,
.footer a:focus-visible,
.cs-cta-box a:focus-visible,
.cs-cta-box input:focus-visible {
  outline-color: var(--gold-light);
}

::selection { background: var(--gold-pale); color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ── 3. NAVBAR ──────────────────────────────────────────────────────── */
.navbar {
  height: 72px;
  background: rgba(250,247,242,0.88);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--t), border-color var(--t), background var(--t);
}
.navbar.scrolled {
  background: rgba(250,247,242,0.95);
  border-bottom-color: var(--hair);
  box-shadow: 0 1px 0 rgba(31,30,27,0.04), 0 8px 24px rgba(31,30,27,0.06);
}
body:not(.admin-body) main { padding-top: 72px; }
.flash { top: 72px; }

.navbar__container { padding: 0 var(--gutter); gap: 2rem; }
.navbar__logo-text {
  font-size: 1.42rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--forest);
}
.navbar__nav { gap: 1.9rem; }
.navbar__link {
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--ink);
}
.navbar__link:hover,
.navbar__link--active { color: var(--terra-ink); }
.navbar__link::after { bottom: -6px; height: 1.5px; background: var(--terra-ink); }

/* The existing "Cursussen" link becomes the one primary action in the bar.
   Same link, same label — it just stops hiding among the others. */
.navbar__link--cta {
  background: var(--terra-cta);
  color: #fff;
  padding: 0.6rem 1.25rem;
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}
.navbar__link--cta:hover {
  background: var(--terra-cta-h);
  color: #fff;
  box-shadow: var(--sh-cta);
  transform: translateY(-1px);
}
.navbar__link--cta::after { display: none; }
.navbar__link--cta.navbar__link--active { color: #fff; }

.navbar__hamburger span { height: 2px; background: var(--ink); }

/* ── 4. BUTTONS ─────────────────────────────────────────────────────── */
body:not(.admin-body) .btn {
  padding: 0.95rem 1.9rem;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.2;
  min-height: 48px;                /* comfortable tap target */
  border-width: 1.5px;
  transition: background var(--t), border-color var(--t), color var(--t),
              box-shadow var(--t), transform 140ms var(--ease);
}
body:not(.admin-body) .btn:active { transform: translateY(1px) scale(0.995); }

body:not(.admin-body) .btn--primary {
  background: var(--terra-cta);
  border-color: var(--terra-cta);
  box-shadow: var(--sh-1);
}
body:not(.admin-body) .btn--primary:hover {
  background: var(--terra-cta-h);
  border-color: var(--terra-cta-h);
  box-shadow: var(--sh-cta);
  transform: translateY(-2px);
}

/* Gold CTA: forest ink on gold reads far better than white on gold,
   and carries more weight on the dark sections. */
body:not(.admin-body) .btn--gold {
  background: var(--gold-cta);
  border-color: var(--gold-cta);
  color: var(--gold-ink);
  box-shadow: var(--sh-1);
}
body:not(.admin-body) .btn--gold:hover {
  background: var(--gold-cta-h);
  border-color: var(--gold-cta-h);
  color: var(--gold-ink);
  box-shadow: var(--sh-gold);
  transform: translateY(-2px);
}

body:not(.admin-body) .btn--ghost {
  background: rgba(255,255,255,0.6);
  border-color: var(--border);
  color: var(--ink);
  font-weight: 600;
  box-shadow: none;
}
body:not(.admin-body) .btn--ghost:hover {
  background: #fff;
  border-color: var(--forest);
  color: var(--forest);
  box-shadow: var(--sh-1);
}

body:not(.admin-body) .btn--outline-light,
.cs-hero .btn--outline-light {
  padding: 0.95rem 1.9rem;
  border-radius: var(--r-sm);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  min-height: 48px;
  background: rgba(250,247,242,0.04);
  border: 1.5px solid rgba(250,247,242,0.28);
  color: var(--cream);
}
body:not(.admin-body) .btn--outline-light:hover,
.cs-hero .btn--outline-light:hover {
  background: rgba(250,247,242,0.12);
  border-color: rgba(250,247,242,0.6);
}

/* ── 5. INPUTS ──────────────────────────────────────────────────────── */
body:not(.admin-body) .form-input,
body:not(.admin-body) select.form-input {
  padding: 0.95rem 1.05rem;
  font-size: 1rem;                 /* 16px: stops iOS zooming on focus */
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  background: #fff;
  box-shadow: inset 0 1px 2px rgba(31,30,27,0.03);
  min-height: 50px;
}
body:not(.admin-body) .form-input:hover { border-color: #C9BEAB; }
body:not(.admin-body) .form-input:focus {
  border-color: var(--forest);
  box-shadow: var(--ring), inset 0 1px 2px rgba(31,30,27,0.03);
}
body:not(.admin-body) .form-label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  text-transform: none;
}

/* ── 6. SECTION RHYTHM & HEADINGS ───────────────────────────────────── */
.section { padding: var(--sec) 0; }
.section__container { padding: 0 var(--gutter); }
.cs-section { padding: var(--sec) var(--gutter); }
.cs-cta-section { padding: var(--sec) var(--gutter); }

/* Overlines: consistent small-caps rule across every section of the site. */
.hero__overline,
.cs-label,
.reviews__overline,
.ci-hero__overline,
.over-mij__overline {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.hero__overline,
.cs-label { color: var(--terra-ink); }

.cs-heading,
.courses__title,
.voor-wie__title,
.about__title,
.expect__title,
.reviews__title,
.ci-hero__title {
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.12;
}
.cs-heading { font-size: var(--fs-h2); color: var(--ink); margin-bottom: 2.5rem; }
.cs-heading--light { color: var(--cream); }

/* Prose: measure, contrast and spacing that read like a published page. */
.cs-prose p,
.over-mij__body-inner p {
  font-size: var(--fs-lg);
  color: var(--body);
  line-height: 1.8;
  max-width: 64ch;
}
.cs-prose strong, .over-mij__body-inner strong { color: var(--ink); font-weight: 650; }

/* ── 7. HOME — HERO ─────────────────────────────────────────────────── */
.hero { position: relative; border-bottom: 1px solid var(--hair); }
.hero__left {
  padding-top: clamp(3.5rem, 7vw, 6rem);
  padding-bottom: clamp(3.5rem, 7vw, 6rem);
  /* Vertical only: the angled ::after edge below must match it pixel for pixel. */
  background: linear-gradient(180deg, #FDFBF7 0%, var(--cream) 52%, #F3EDE3 100%);
}
.hero__left::after {
  background: linear-gradient(180deg, #FDFBF7 0%, var(--cream) 52%, #F3EDE3 100%);
}

.hero__overline { margin-bottom: 1.1rem; color: var(--terra-ink); }
.hero__overline::before { width: 28px; background: var(--terra-ink); }

.hero__title {
  font-size: var(--fs-h1);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--forest);
  margin-bottom: 1.25rem;
  max-width: 17ch;
}
.hero__title em { color: var(--terra-ink); font-style: italic; }

.hero__intro {
  font-size: var(--fs-lg);
  color: var(--body);
  line-height: 1.75;
  max-width: 52ch;
  margin-bottom: 2rem;
}
.hero__ctas { gap: 0.75rem; margin-bottom: 2rem; }

/* The credential line is the single strongest authority signal above the
   fold — it gets treated as a credential, not as fine print. */
.hero__credential {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.02em;
  line-height: 1.6;
  max-width: 46ch;
  border-top: none;
  padding: 0.85rem 0 0.85rem 1.1rem;
  border-left: 2px solid var(--gold);
  background: linear-gradient(90deg, rgba(201,150,58,0.09), transparent 70%);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}

/* Right panel: deeper, calmer, less flat than the flat forest block. */
.hero__right {
  background:
    radial-gradient(120% 90% at 70% 15%, #3A5B4C 0%, var(--forest) 45%, #1E3529 100%);
  min-height: 380px;
}
.hero__pattern { opacity: 0.07; background-size: 34px 34px; }
.hero__ring { border-color: rgba(201,150,58,0.26); }
.hero__ring--1 { box-shadow: inset 0 0 60px rgba(201,150,58,0.07); }
.hero__arabic {
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  color: rgba(226,180,100,0.72);
  text-shadow: 0 2px 40px rgba(201,150,58,0.22);
}
.hero__arabic-caption { color: rgba(232,185,101,0.6); letter-spacing: 0.42em; }

/* ── 8. HOME — COURSES ──────────────────────────────────────────────── */
.section--forest {
  background:
    radial-gradient(100% 70% at 15% 0%, #335244 0%, var(--forest) 55%, #223D31 100%);
}
.courses__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.courses__title { font-size: var(--fs-h2); color: #fff; margin-bottom: 1.1rem; }
.courses__subtitle {
  font-size: var(--fs-base);
  color: rgba(250,247,242,0.72);
  max-width: 56ch;
  line-height: 1.75;
}

/* Card system: one radius, one border, one elevation — everywhere. */
.course-card {
  border-radius: var(--r-md);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms var(--ease);
}
.course-card--featured {
  box-shadow: var(--sh-3);
  border: 1px solid rgba(255,255,255,0.14);
  overflow: hidden;
}
.course-card--secondary {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: none;
}
.course-card--secondary:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(201,150,58,0.4);
  transform: translateY(-3px);
}
.course-card__ribbon {
  border-radius: var(--r-pill);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  box-shadow: var(--sh-1);
}
.course-card--featured .course-card__title {
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.course-card__bullets li { color: var(--body); }
.course-card__price { font-weight: 500; letter-spacing: -0.02em; }

/* Price box = the moment of decision. Give it a real card treatment. */
.course-card__price-box {
  border-radius: var(--r-md);
  border: 1px solid var(--border-lite);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--cream) 100%);
  box-shadow: var(--sh-1);
}
.course-card__price-label,
.ci-card__price-note {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.course-card__cta { width: 100%; justify-content: center; }
.course-card__more {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--terra-ink);
  text-decoration: underline;
  text-decoration-color: rgba(154,67,34,0.3);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--t);
}
.course-card__more:hover { text-decoration-color: var(--terra-ink); }
.course-card__spots-left {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--terra-ink);
  letter-spacing: 0.01em;
}
.course-card__wl-input, .ci-card__input {
  border-radius: var(--r-sm);
  min-height: 48px;
  font-size: 1rem;
}

/* ── 9. HOME — REVIEWS (social proof) ───────────────────────────────── */
.section--reviews {
  padding: var(--sec) var(--gutter);
  background:
    radial-gradient(90% 80% at 50% 0%, #335244 0%, var(--forest) 50%, #1F382C 100%);
}
.reviews__head { margin-bottom: clamp(2.25rem, 4vw, 3.25rem); }
.reviews__overline { color: var(--gold-light); margin-bottom: 0.8rem; }
.reviews__title { font-size: var(--fs-h2); color: #fff; }
.reviews__grid { gap: 1.1rem; }
.review-card {
  position: relative;
  background: rgba(255,255,255,0.065);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-md);
  padding: 1.75rem 1.85rem 1.6rem;
  backdrop-filter: blur(2px);
  transition: background 220ms var(--ease), transform 220ms var(--ease),
              border-color 220ms var(--ease);
}
.review-card::before {
  content: "\201C";
  position: absolute;
  top: 0.35rem; right: 1.1rem;
  font-family: var(--serif);
  font-size: 4.5rem;
  line-height: 1;
  color: rgba(201,150,58,0.18);
  pointer-events: none;
}
.review-card:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(201,150,58,0.32);
  transform: translateY(-3px);
}
.review-card__stars {
  color: var(--gold-light);
  font-size: 0.95rem;
  letter-spacing: 0.12em;
  margin-bottom: 1rem;
}
.review-card__body {
  font-size: 1rem;
  color: rgba(255,255,255,0.9);
  line-height: 1.78;
}
.review-card--wide .review-card__body {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  line-height: 1.58;
  color: #fff;
}

/* ── 10. HOME — VOOR WIE / ABOUT / AANPAK ───────────────────────────── */
.voor-wie__wrap, .about__wrap, .expect__wrap { padding: 0 var(--gutter); }
.voor-wie__title { font-size: var(--fs-h2); }
.voor-wie__body  { font-size: var(--fs-lg); color: var(--body); line-height: 1.8; max-width: 52ch; }
.voor-wie__list li {
  align-items: flex-start;
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 500;
  padding: 1.15rem 0;
  border-color: var(--border-lite);
  transition: padding-left 200ms var(--ease), color 200ms var(--ease);
}
.voor-wie__list li::before {
  content: "✓";
  color: var(--forest);
  font-size: 0.85rem;
  font-weight: 700;
  width: 1.4rem; height: 1.4rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--forest-lite);
  border-radius: 50%;
  margin-top: 0.15rem;
}
.voor-wie__list li:hover { padding-left: 0.35rem; color: var(--forest); }

.about__title { font-size: var(--fs-h2); }
.about__body  { font-size: var(--fs-lg); color: var(--body); line-height: 1.8; max-width: 60ch; }
.about__photo-placeholder {
  border-radius: var(--r-md) var(--r-md) 90px var(--r-md);
  box-shadow: var(--sh-3);
}
.about__photo-accent { background: var(--gold); opacity: 0.9; }
.about__pull {
  font-size: 1.5rem;
  background: linear-gradient(100deg, var(--gold-pale), rgba(245,230,200,0.35));
  border-left-width: 3px;
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: 1.5rem 1.75rem;
  color: var(--forest);
}

.expect__title { font-size: clamp(1.9rem, 2.8vw, 2.6rem); }
.expect__item { padding: 2.1rem 0; border-color: var(--border-lite); }
.expect__item:hover { background: linear-gradient(90deg, rgba(201,150,58,0.05), transparent 60%); }
.expect__num {
  font-size: 1.1rem;
  font-style: normal;
  letter-spacing: 0.08em;
  color: var(--gold);
  font-weight: 600;
}
.expect__item-body { font-size: 1.03rem; color: var(--body); }
.expect__item-body strong { font-size: 1.1rem; color: var(--ink); font-weight: 650; margin-bottom: 0.4rem; }

/* ── 11. COURSES INDEX (ci-*) ───────────────────────────────────────── */
.ci-hero { padding-bottom: clamp(3rem, 6vw, 4.5rem); }
.ci-hero__title { font-size: var(--fs-display); }
.ci-hero__sub { font-size: var(--fs-lg); line-height: 1.75; }
.ci-hero__trust { gap: 1.5rem 2rem; }
.ci-hero__trust-item {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.ci-card {
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border: 1px solid var(--border-lite);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms var(--ease);
}
.ci-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
  border-color: var(--border);
}
.ci-card__title { font-weight: 500; letter-spacing: -0.015em; line-height: 1.15; }
.ci-card__desc  { color: var(--body); }
.ci-card__price { font-weight: 500; letter-spacing: -0.02em; }
.ci-card__btn {
  border-radius: var(--r-sm);
  min-height: 48px;
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--sh-1);
  transition: background var(--t), box-shadow var(--t), transform 140ms var(--ease);
}
.ci-card__btn:hover { transform: translateY(-2px); box-shadow: var(--sh-cta); }
.ci-card__bullet { color: var(--body); }

/* ── 12. COURSE SHOW (cs-*) ─────────────────────────────────────────── */
.cs-hero {
  padding: clamp(3.5rem, 7vw, 5.75rem) var(--gutter) clamp(3rem, 6vw, 4.75rem);
  background:
    radial-gradient(110% 80% at 50% 0%, #345344 0%, var(--forest) 48%, #1E3529 100%);
  border-bottom: 1px solid rgba(201,150,58,0.18);
}
.cs-hero__tag { color: var(--gold-light); margin-bottom: 1.1rem; }
.cs-hero__title {
  font-size: var(--fs-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: #fff;
}
.cs-hero__sub {
  font-size: clamp(1.1rem, 1.6vw, 1.3rem);
  color: rgba(250,247,242,0.82);
  line-height: 1.6;
  max-width: 44ch;
  margin-bottom: 2.5rem;
}
.cs-hero__actions { gap: 0.85rem; margin-bottom: 1.5rem; }

/* Price line in the hero: the offer should be readable at a glance. */
.cs-hero__price {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(250,247,242,0.78);
  background: rgba(0,0,0,0.16);
  border: 1px solid rgba(250,247,242,0.14);
  padding: 0.6rem 1.15rem;
  border-radius: var(--r-pill);
}
.cs-hero__related {
  display: inline-flex;
  border: 1px solid rgba(201,150,58,0.35);
  background: rgba(201,150,58,0.1);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.15rem;
  transition: background var(--t), border-color var(--t);
}
.cs-hero__related:hover { background: rgba(201,150,58,0.18); border-color: rgba(201,150,58,0.6); }

.cs-section--cream { background: var(--cream); }
.cs-label { margin-bottom: 0.9rem; }

/* Content blocks: same card language as the rest of the site. */
.cs-checklist__item {
  border-radius: var(--r-sm);
  border: 1px solid var(--border-lite);
  border-left: 3px solid var(--terra);
  padding: 1.2rem 1.35rem;
  box-shadow: var(--sh-1);
  font-size: 1.03rem;
  color: var(--ink);
  transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.cs-checklist__item:hover { transform: translateX(3px); box-shadow: var(--sh-2); }
.cs-closing-note {
  font-size: 1.6rem;
  color: var(--forest);
  font-style: italic;
  padding-top: 1.75rem;
}

.cs-quote {
  font-size: clamp(1.3rem, 2.1vw, 1.75rem);
  color: #fff;
  opacity: 1;
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.85rem;
  margin-bottom: 3.25rem;
}
.cs-pillars { gap: 1.4rem; }
.cs-pillars__item {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--r-sm);
  padding: 1.4rem 1.5rem;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}
.cs-pillars__item:hover { background: rgba(255,255,255,0.08); border-color: rgba(201,150,58,0.3); }
.cs-pillars__num { font-size: 1.05rem; opacity: 1; color: var(--gold-light); font-weight: 600; }
.cs-pillars__item strong { font-size: 1.08rem; color: #fff; }
.cs-pillars__item p { font-size: 1rem; color: rgba(250,247,242,0.72); }

.cs-learns__item { padding: 1.65rem 0; border-color: var(--border-lite); }
.cs-learns__check {
  width: 2.2rem; height: 2.2rem;
  background: var(--forest);
  box-shadow: 0 2px 8px rgba(45,74,62,0.25);
  font-size: 0.9rem;
}
.cs-learns__item strong { font-size: 1.1rem; color: var(--ink); font-weight: 650; }
.cs-learns__item p { font-size: 1rem; color: var(--body); line-height: 1.7; }

.cs-forwho__list li { font-size: 1.03rem; color: var(--body); padding-left: 1.6rem; }
.cs-forwho__list li::before { color: var(--terra-ink); font-weight: 700; }
.cs-forwho__note { font-size: 1rem; color: var(--muted); }

.cs-practical__item { padding: 1.6rem 0; border-color: var(--border-lite); }
.cs-practical__dot { box-shadow: 0 0 0 4px rgba(201,150,58,0.18); }
.cs-practical__item strong { font-size: 1.08rem; color: var(--ink); font-weight: 650; }
.cs-practical__item span { font-size: 1rem; color: var(--body); }

.cs-outcomes { gap: 1.1rem; }
.cs-outcomes__item {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-md);
  padding: 1.75rem;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.cs-outcomes__item:hover { background: rgba(255,255,255,0.09); transform: translateY(-3px); }
.cs-outcomes__item p { color: rgba(250,247,242,0.88); font-size: 1.03rem; }

/* The offer card — the single most important block on the site. */
.cs-cta-box {
  border-radius: var(--r-lg);
  padding: clamp(2.25rem, 5vw, 3.5rem);
  background:
    radial-gradient(120% 100% at 50% 0%, #37584A 0%, var(--forest) 55%, #1E3529 100%);
  border: 1px solid rgba(201,150,58,0.3);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,0.06);
  max-width: 580px;
}
.cs-cta-box__label { color: var(--gold-light); opacity: 1; letter-spacing: 0.2em; }
.cs-cta-box__title {
  font-size: clamp(1.7rem, 3vw, 2.3rem);
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.015em;
  margin-bottom: 1.75rem;
}
.cs-cta-box__price {
  font-size: clamp(3rem, 6vw, 4rem);
  font-weight: 500;
  color: var(--gold-light);
  letter-spacing: -0.03em;
  margin-bottom: 0.65rem;
}
.cs-cta-box__note {
  font-size: 0.88rem;
  color: rgba(250,247,242,0.65);
  margin-bottom: 2rem;
}
.cs-cta-box__btn {
  width: 100%;
  justify-content: center;
  font-size: 0.95rem;
  padding: 1.15rem 2rem;
  min-height: 56px;
  box-shadow: var(--sh-gold);
}
.cs-cta-box__secure {
  font-size: 0.82rem;
  color: rgba(250,247,242,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.cs-faq__item { border-color: var(--border-lite); }
.cs-faq__q {
  font-size: 1.08rem;
  font-weight: 650;
  color: var(--ink);
  padding: 1.4rem 0;
}
.cs-faq__q::after {
  width: 1.65rem; height: 1.65rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cream-alt);
  border-radius: 50%;
  font-size: 1.05rem;
  color: var(--forest);
  transition: transform var(--t), background var(--t);
}
.cs-faq__q:hover::after { background: var(--gold-pale); }
.cs-faq__a { font-size: 1.02rem; color: var(--body); line-height: 1.8; padding-bottom: 1.5rem; max-width: 70ch; }

/* ── 13. STICKY OFFER BAR (course show) ─────────────────────────────── */
/* A long sales page should never leave a reader without the action in
   reach. Same course, same price, same label as the page itself. */
.cs-stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 190;
  background: rgba(31,30,27,0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid rgba(201,150,58,0.35);
  box-shadow: 0 -8px 32px rgba(0,0,0,0.22);
  animation: csbar-in 260ms var(--ease) both;
  padding-bottom: env(safe-area-inset-bottom);
}
@keyframes csbar-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.cs-stickybar__inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0.75rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}
.cs-stickybar__info { min-width: 0; display: flex; flex-direction: column; }
.cs-stickybar__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--cream);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-stickybar__meta {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--gold-light);
  line-height: 1.2;
}
.cs-stickybar__cta { flex-shrink: 0; min-height: 46px; padding: 0.8rem 1.6rem; }

/* The abandoned-cart bar owns the bottom of the screen when it is present. */
body:has(#cart-bar) .cs-stickybar,
body:has(#cart-float) .cs-stickybar { display: none; }

/* ── 14. CHECKOUT ───────────────────────────────────────────────────── */
.checkout-page { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) var(--sec-tight); gap: clamp(2.5rem, 5vw, 5rem); }
.checkout-title { font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 500; letter-spacing: -0.02em; }
.checkout-subtitle { font-size: var(--fs-base); color: var(--body); margin-bottom: 2.25rem; }
.checkout-form { gap: 1.35rem; }
.checkout-summary {
  border-radius: var(--r-lg);
  padding: 2.1rem;
  background:
    radial-gradient(120% 90% at 50% 0%, #37584A 0%, var(--forest) 60%, #223D31 100%);
  border: 1px solid rgba(201,150,58,0.22);
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,0.05);
}
.checkout-summary-col { top: calc(72px + 1.75rem); }
.checkout-submit {
  min-height: 58px;
  font-size: 0.95rem;
  padding: 1.15rem 2rem;
  box-shadow: var(--sh-gold);
  margin-top: 0.65rem;
}
.checkout-secure { font-size: 0.8rem; color: var(--muted); }
.checkout-error {
  border-radius: var(--r-sm);
  border-left: 3px solid var(--terra);
  font-weight: 500;
  box-shadow: var(--sh-1);
}
.checkout-step-num { font-weight: 700; }
.checkout-discount-btn { min-height: 50px; padding: 0.7rem 1.15rem; }
.form-hint { font-size: 0.82rem; color: var(--muted); }

/* ── 15. CART RECOVERY ──────────────────────────────────────────────── */
.cart-float__inner {
  border-radius: var(--r-md);
  box-shadow: var(--sh-3);
  border: 1px solid var(--border-lite);
}
.cart-float__cta, .cart-bar__cta {
  border-radius: var(--r-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  min-height: 44px;
}

/* ── 16. BREADCRUMBS / OVER MIJ / CONTENT PAGES ─────────────────────── */
.breadcrumbs { font-size: 0.8rem; }
.over-mij__hero {
  background:
    radial-gradient(110% 80% at 25% 0%, #335244 0%, var(--forest) 50%, #1E3529 100%);
}
.over-mij__name { font-weight: 500; letter-spacing: -0.03em; }
.over-mij__role { font-size: var(--fs-lg); color: rgba(250,247,242,0.78); max-width: 48ch; }
.over-mij__photo { border-radius: var(--r-md) var(--r-md) 70px var(--r-md); box-shadow: var(--sh-3); }
.over-mij__body { padding: var(--sec) 0; }
.over-mij__body-inner { padding: 0 var(--gutter); }
.over-mij__pull {
  font-size: 1.6rem !important;
  background: linear-gradient(100deg, var(--gold-pale), rgba(245,230,200,0.35));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

/* ── 17. FOOTER ─────────────────────────────────────────────────────── */
.footer {
  background: #14140F;
  padding: var(--sec-tight) 0 2.25rem;
  border-top: 3px solid var(--gold);
}
.footer__container { padding: 0 var(--gutter); }
.footer__top { gap: clamp(2rem, 5vw, 4rem); border-bottom-color: rgba(255,255,255,0.08); }
.footer__logo { font-weight: 600; letter-spacing: -0.01em; }
.footer__tagline { font-size: 0.9rem; color: rgba(250,247,242,0.58); line-height: 1.75; max-width: 34ch; }
.footer__col-title { color: rgba(201,150,58,0.85); letter-spacing: 0.18em; font-size: 0.68rem; }
.footer__links-list a { font-size: 0.9rem; color: rgba(250,247,242,0.66); }
.footer__links-list a:hover { color: var(--gold-light); }
.footer__copy { font-size: 0.78rem; color: rgba(250,247,242,0.38); }
.footer__trust-badge {
  font-size: 0.74rem;
  color: rgba(250,247,242,0.7);
  border-color: rgba(201,150,58,0.4);
  background: rgba(201,150,58,0.08);
  padding: 6px 14px;
}

/* ── 18. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .cs-stickybar__title { max-width: 40vw; }
}

@media (max-width: 860px) {
  .hero__right { min-height: 0; height: 220px; }
  .hero__title { max-width: none; }
  .hero__credential { max-width: none; }
}

@media (max-width: 640px) {
  :root { --fs-base: 1.03rem; }

  .navbar { height: 66px; }
  body:not(.admin-body) main { padding-top: 66px; }
  .flash { top: 66px; }
  .navbar__nav {
    top: 66px;
    background: var(--cream);
    padding: 1.25rem var(--gutter) 1.75rem;
    gap: 0.35rem;
    align-items: stretch;
    box-shadow: var(--sh-3);
  }
  .navbar__nav .navbar__link {
    font-size: 1.05rem;
    font-weight: 600;
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--border-lite);
  }
  .navbar__nav .navbar__link::after { display: none; }
  .navbar__link--cta {
    margin-top: 0.75rem;
    text-align: center;
    justify-content: center;
    border-bottom: none;
    padding: 1rem 1.25rem;
  }
  .navbar__nav .btn { width: 100%; justify-content: center; }

  .hero__right { height: 150px; }
  .hero__title { font-size: clamp(2rem, 9vw, 2.5rem); }
  .hero__intro { font-size: 1.03rem; }
  .hero__ctas .btn { width: 100%; }

  /* On mobile the primary action is always full width and thumb-reachable. */
  .cs-hero__actions { flex-direction: column; align-items: stretch; }
  .cs-hero__actions .btn { width: 100%; justify-content: center; }
  .cs-hero__price { width: 100%; justify-content: center; text-align: center; }
  .cs-hero__sub { max-width: none; }

  .cs-stickybar__inner { padding: 0.65rem 0.9rem; gap: 0.75rem; }
  .cs-stickybar__title { font-size: 0.82rem; max-width: 42vw; }
  .cs-stickybar__meta { font-size: 1.05rem; }
  .cs-stickybar__cta { padding: 0.75rem 1.1rem; font-size: 0.78rem; letter-spacing: 0.04em; }

  .review-card { padding: 1.4rem 1.4rem 1.3rem; }
  .review-card--wide .review-card__body { font-size: 1.15rem; }
  .cs-cta-box { padding: 2rem 1.35rem; }
  .cs-cta-box__btn { padding: 1.1rem 1.25rem; }
  .checkout-summary { padding: 1.5rem; }
  .footer__trust-badge { display: inline-block; }
}

/* Clearance so the bar never covers the last lines of the sales page. */
body.courses.show .footer { padding-bottom: 7rem; }

/* Keep the sticky bar from covering the final CTA on short screens. */
@media (max-height: 520px) {
  .cs-stickybar { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 2 — LANDING PAGES, BLOG, AUTH, POST-PURCHASE, LEGAL
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 20. FIX: undefined variable ────────────────────────────────────── */
/* .dls-section--light referenced var(--bg), which was never declared, so
   that band rendered with no background at all. */
:root { --bg: var(--cream-alt); }

/* ── 21. LANDERS — darija-leren-spreken / -boek ─────────────────────── */
.dls-inner { padding: 0 var(--gutter); }
.dls-section { padding: var(--sec) 0; }

.dls-label { font-size: var(--fs-overline); letter-spacing: 0.2em; color: var(--terra-ink); }
.dls-label--gold { color: var(--gold-light); }

.dls-section__title {
  font-size: var(--fs-h2);
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 1.12;
}
.dls-section__title em { color: var(--terra-ink); }
.dls-section__title--light { color: #fff; }
.dls-section__sub {
  font-size: var(--fs-lg);
  color: var(--body);
  line-height: 1.75;
  max-width: 58ch;
}
.dls-section__sub--light { color: rgba(250,247,242,0.78); }

.dls-hero {
  min-height: 0;
  padding: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    radial-gradient(110% 85% at 25% 0%, #345344 0%, var(--forest) 48%, #1E3529 100%);
}
.dls-hero__title { font-weight: 500; letter-spacing: -0.028em; line-height: 1.05; }
.dls-hero__sub { font-size: var(--fs-lg); color: rgba(250,247,242,0.82); line-height: 1.65; }
.dls-hero__photo { border-radius: var(--r-md) var(--r-md) 70px var(--r-md); box-shadow: var(--sh-3); }
.dls-hero__photo-badge {
  border-radius: var(--r-sm);
  box-shadow: var(--sh-2);
  backdrop-filter: blur(6px);
}

/* Trust row: this is the authority line on a cold-traffic page. */
.dls-trust { gap: 0.9rem 1.75rem; margin-top: 1.75rem; }
.dls-trust__item {
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(250,247,242,0.82);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.95rem;
}

/* Lead form: the whole point of these pages. */
.dls-input {
  min-height: 52px;
  font-size: 1rem;
  border-radius: var(--r-sm);
  border-width: 1.5px;
  box-shadow: inset 0 1px 2px rgba(31,30,27,0.03);
  transition: border-color var(--t), box-shadow var(--t);
}
.dls-input:focus {
  border-color: var(--gold);
  box-shadow: var(--ring-gold);
  outline: none;
}
.dls-btn {
  min-height: 52px;
  border-radius: var(--r-sm);
  font-weight: 700;
  letter-spacing: 0.05em;
  box-shadow: var(--sh-1);
  transition: background var(--t), box-shadow var(--t), transform 140ms var(--ease);
}
.dls-btn:hover { transform: translateY(-2px); }
.dls-btn--gold {
  background: var(--gold-cta);
  color: var(--gold-ink);
  box-shadow: var(--sh-gold);
}
.dls-btn--gold:hover { background: var(--gold-cta-h); color: var(--gold-ink); }
.dls-form__hint, .dls-cta-form__hint { font-size: 0.82rem; }
.dls-form__error { border-radius: var(--r-xs); font-weight: 500; }
.dls-success { border-radius: var(--r-md); box-shadow: var(--sh-1); }

/* Content cards across both landers: one shared card language. */
.dls-pain-card,
.dls-learn-card,
.dls-for-item,
.dlb-what-card {
  border-radius: var(--r-md);
  border: 1px solid var(--border-lite);
  box-shadow: var(--sh-1);
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease),
              border-color 240ms var(--ease);
}
.dls-pain-card:hover,
.dls-learn-card:hover,
.dls-for-item:hover,
.dlb-what-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sh-2);
  border-color: var(--border);
}
.dls-learn-card__title, .dlb-what-card__title {
  font-size: 1.1rem;
  font-weight: 650;
  color: var(--ink);
}
.dls-learn-card__body, .dlb-what-card__body, .dls-pain-card { color: var(--body); }
.dlb-what-card__num { color: var(--gold); font-weight: 600; }

.dls-about__title { font-size: var(--fs-h2); font-weight: 500; letter-spacing: -0.02em; }
.dls-about__body { font-size: var(--fs-lg); color: var(--body); line-height: 1.8; }
.dls-about__photo { border-radius: var(--r-md) var(--r-md) 70px var(--r-md); box-shadow: var(--sh-3); }
.dls-about__quote {
  font-size: 1.45rem;
  background: linear-gradient(100deg, var(--gold-pale), rgba(245,230,200,0.35));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}

.dls-faq__item { border-color: var(--border-lite); }
.dls-faq__q { font-size: 1.08rem; font-weight: 650; color: var(--ink); }
.dls-faq__a { font-size: 1.02rem; color: var(--body); line-height: 1.8; }

.dls-cta {
  background:
    radial-gradient(110% 90% at 50% 0%, #37584A 0%, var(--forest) 55%, #1E3529 100%);
}
.dls-cta__title { font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.dls-cta__sub { color: rgba(250,247,242,0.78); }

/* The yes/no comparison block — the strongest block on the book page. */
.dlb-honest__col {
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  border: 1px solid var(--border-lite);
}
.dlb-honest__col--yes { border-left: 3px solid var(--forest); }
.dlb-honest__col--no  { border-left: 3px solid var(--terra); }
.dlb-honest__head { font-weight: 700; letter-spacing: 0.01em; }
.dlb-mockup__cover { border-radius: var(--r-sm); box-shadow: var(--sh-3); }
.dlb-mockup-badge { border-radius: var(--r-pill); box-shadow: var(--sh-2); font-weight: 700; }

/* ── 22. BLOG ───────────────────────────────────────────────────────── */
.blog-hero {
  background:
    radial-gradient(110% 85% at 25% 0%, #345344 0%, var(--forest) 48%, #1E3529 100%);
}
.blog-hero__overline { font-size: var(--fs-overline); letter-spacing: 0.2em; color: var(--gold-light); }
.blog-hero__title { font-weight: 500; letter-spacing: -0.025em; line-height: 1.08; }
.blog-hero__sub { font-size: var(--fs-lg); color: rgba(250,247,242,0.8); }

.blog-page__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
.blog-filter { gap: 0.5rem; }
.blog-tag {
  border-radius: var(--r-pill);
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.blog-featured {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-2);
  border: 1px solid var(--border-lite);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease);
}
.blog-featured:hover { transform: translateY(-4px); box-shadow: var(--sh-3); }
.blog-featured__title { font-weight: 500; letter-spacing: -0.02em; line-height: 1.12; }
.blog-featured__excerpt { font-size: var(--fs-lg); color: var(--body); line-height: 1.75; }
.blog-card {
  border: 1px solid var(--border-lite);
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
  transition: transform 260ms var(--ease), box-shadow 260ms var(--ease),
              border-color 260ms var(--ease);
}
.blog-card:hover {
  border-color: var(--border);
  transform: translateY(-4px);
  box-shadow: var(--sh-2);
}
.blog-card__title { font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; color: var(--ink); }
.blog-card__excerpt { color: var(--body); }
.blog-card__arrow { color: var(--terra-ink); }
.blog-cta {
  background:
    radial-gradient(110% 90% at 50% 0%, #37584A 0%, var(--forest) 55%, #1E3529 100%);
}
.blog-cta__title { font-weight: 500; letter-spacing: -0.02em; color: #fff; }
.blog-cta__sub { color: rgba(250,247,242,0.78); }
.blog-empty { border-radius: var(--r-md); }

/* Article: a long read should feel like a publication. */
.article-header {
  background:
    radial-gradient(110% 85% at 30% 0%, #345344 0%, var(--forest) 50%, #1E3529 100%);
}
.article-header__title { font-weight: 500; letter-spacing: -0.028em; line-height: 1.08; }
.article-header__lead { font-size: var(--fs-lg); color: rgba(250,247,242,0.82); line-height: 1.7; }
.article-header__avatar, .blog-author-avatar { box-shadow: var(--sh-1); }
.article-body-inner { padding-left: var(--gutter); padding-right: var(--gutter); }
.article-body p, .article-body li {
  font-size: var(--fs-lg);
  color: var(--body);
  line-height: 1.82;
}
.article-body h2 {
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -0.02em;
  margin-top: 2.75rem;
}
.article-body h3 { font-weight: 650; color: var(--ink); }
.article-body a { text-underline-offset: 3px; }
.article-body blockquote {
  border-left: 3px solid var(--gold);
  background: linear-gradient(100deg, var(--gold-pale), rgba(245,230,200,0.3));
  border-radius: 0 var(--r-md) var(--r-md) 0;
}
.article-author-box {
  border-radius: var(--r-md);
  border: 1px solid var(--border-lite);
  box-shadow: var(--sh-1);
}
.article-author-box__name { font-weight: 650; color: var(--ink); }
.article-related__heading { font-weight: 500; letter-spacing: -0.015em; }
.article-back, .blog-card__date, .article-header__date { letter-spacing: 0.01em; }

/* ── 23. AUTH ───────────────────────────────────────────────────────── */
.auth-page { padding-left: var(--gutter); padding-right: var(--gutter); }
.auth-card {
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  border: 1px solid var(--border-lite);
  background: #fff;
}
.auth-card__brand { font-weight: 600; letter-spacing: -0.01em; }
.auth-card__title { font-weight: 500; letter-spacing: -0.02em; color: var(--ink); }
.auth-card__sub { color: var(--body); }

/* ── 24. POST-PURCHASE (success / cancel) ───────────────────────────── */
/* The receipt moment should feel as considered as the sales page. */
.confirm-page { padding-left: var(--gutter); padding-right: var(--gutter); }
.confirm-icon {
  box-shadow: 0 0 0 10px rgba(45,74,62,0.07), var(--sh-2);
}
.confirm-icon--cancel { box-shadow: 0 0 0 10px rgba(184,92,56,0.08), var(--sh-2); }
.confirm-title { font-weight: 500; letter-spacing: -0.025em; color: var(--ink); }
.confirm-body { font-size: var(--fs-lg); color: var(--body); line-height: 1.8; }
.confirm-course {
  border-radius: var(--r-md);
  border: 1px solid var(--border-lite);
  box-shadow: var(--sh-1);
  background: linear-gradient(180deg, #fff, var(--cream));
}
.confirm-course__label {
  font-size: var(--fs-overline);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.confirm-course__name { font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.confirm-actions { gap: 0.75rem; }

/* ── 25. LEGAL / LONG-FORM PAGES ────────────────────────────────────── */
.av-hero {
  background:
    radial-gradient(110% 85% at 25% 0%, #345344 0%, var(--forest) 50%, #1E3529 100%);
}
.av-hero__inner, .av-body__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
.av-hero__title { font-weight: 500; letter-spacing: -0.025em; }
.av-body { padding: var(--sec) 0; }
.av-heading { font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }
.av-body__inner p, .av-list li { font-size: 1.04rem; color: var(--body); line-height: 1.8; }

/* ── 26. LANDER + BLOG RESPONSIVE ───────────────────────────────────── */
@media (max-width: 640px) {
  .dls-hero { padding: 2.75rem 0 3rem; }
  .dls-btn, .dls-input { width: 100%; }
  .dls-form__row, .dls-cta-form__row { flex-direction: column; align-items: stretch; }
  .dls-trust { gap: 0.6rem; }
  .dls-trust__item { font-size: 0.78rem; padding: 0.4rem 0.8rem; }
  .article-body h2 { margin-top: 2.25rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 3 — HOME, REBUILT (hm-*)
   New markup, new classes. Every string on the page is unchanged; the
   architecture around it is not.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --paper:     #FBF8F3;
  --paper-alt: #F3EDE4;
  --ink-deep:  #1D3328;   /* display headings */
  --arch:      48% 48% 12px 12px / 34% 34% 12px 12px;
}

body.pages.home { background: var(--paper); }

.hm-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Shared type ────────────────────────────────────────────────────── */
.hm-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin-bottom: 1.4rem;
}
.hm-eyebrow::before {
  content: "";
  width: 32px; height: 1.5px;
  background: currentColor;
  opacity: 0.55;
}
.hm-eyebrow--gold { color: var(--gold-light); }

.hm-head { margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 42ch; }
.hm-head--center { max-width: none; text-align: center; }
.hm-head--center .hm-eyebrow { justify-content: center; }
.hm-head__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ink-deep);
  margin-bottom: 1rem;
}
.hm-head__sub {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--body);
  max-width: 54ch;
}
.hm-head--light .hm-head__title { color: #fff; }
.hm-head--light .hm-head__sub   { color: rgba(250,247,242,0.72); }

.hm-section { padding: clamp(4.5rem, 8vw, 8rem) 0; }
.hm-section--courses { background: var(--paper); }
.hm-section--alt     { background: var(--paper-alt); }
.hm-section--about   { background: #fff; }
.hm-section--proof {
  background:
    radial-gradient(90% 120% at 15% 0%, #2F4C3E 0%, #223C30 45%, #1A2E25 100%);
  position: relative;
  overflow: hidden;
}
.hm-section--proof::before {
  content: "";
  position: absolute; inset: 0;
  opacity: 0.05;
  background-image:
    repeating-linear-gradient(45deg,  var(--gold) 0 1px, transparent 1px 50%),
    repeating-linear-gradient(-45deg, var(--gold) 0 1px, transparent 1px 50%);
  background-size: 30px 30px;
  pointer-events: none;
}
.hm-section--proof > * { position: relative; }

/* ── HERO ───────────────────────────────────────────────────────────── */
.hm-hero {
  background:
    linear-gradient(176deg, #FFFDFA 0%, var(--paper) 48%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
  overflow: hidden;
}
.hm-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) clamp(3.5rem, 7vw, 6rem);
  display: grid;
  grid-template-columns: 1.05fr 0.82fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hm-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.6rem, 5.4vw, 4.5rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--ink-deep);
  margin-bottom: 1.5rem;
}
.hm-hero__title em { font-style: italic; color: var(--terra-ink); }
.hm-hero__intro {
  font-size: 1.14rem;
  line-height: 1.75;
  color: var(--body);
  max-width: 48ch;
  margin-bottom: 2.25rem;
}
.hm-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2.5rem;
}

/* The credential is the authority claim: it gets a mark, not fine print. */
.hm-hero__credential {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--ink-deep);
  letter-spacing: 0.005em;
  max-width: 44ch;
  padding: 0.85rem 1.2rem;
  background: rgba(201,150,58,0.09);
  border: 1px solid rgba(201,150,58,0.3);
  border-radius: var(--r-md);
}
.hm-hero__credential-mark {
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Portrait in a Moroccan arch — the signature shape of the new design. */
.hm-hero__visual { position: relative; justify-self: center; width: 100%; max-width: 385px; }
.hm-portrait {
  position: relative;
  margin: 0;
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(29,51,40,0.22);
  z-index: 1;
}
.hm-portrait img {
  width: 100%;
  height: auto;          /* the height attribute would otherwise beat aspect-ratio */
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 16%;
}
.hm-hero__visual::before {
  content: "";
  position: absolute;
  inset: -14px -14px 18px -14px;
  border: 1.5px solid rgba(201,150,58,0.5);
  border-radius: var(--arch);
  z-index: 0;
}
/* Watermark sits behind the arch, so it reads as depth, not as a smudge. */
.hm-portrait__script {
  position: absolute;
  left: -2.75rem;
  top: -2.25rem;
  font-family: var(--serif);
  font-size: 7rem;
  font-style: italic;
  line-height: 1;
  color: rgba(45,74,62,0.08);
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ── COURSES ────────────────────────────────────────────────────────── */
.hm-courses {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: stretch;
}
.hm-course {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border-lite);
  border-radius: var(--r-lg);
  padding: 2rem 1.9rem;
  box-shadow: var(--sh-1);
  transition: transform 280ms var(--ease), box-shadow 280ms var(--ease),
              border-color 280ms var(--ease);
}
.hm-course:hover {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: rgba(201,150,58,0.45);
}
.hm-course__main { flex: 1; }
.hm-course__tag {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin-bottom: 0.75rem;
}
.hm-course__title {
  font-family: var(--serif);
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  margin-bottom: 0.85rem;
}
.hm-course__desc {
  font-size: 0.97rem;
  line-height: 1.7;
  color: var(--body);
}
.hm-course__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 1.75rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--border-lite);
}
.hm-course__price {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--ink-deep);
  line-height: 1;
}
.hm-course__btn { padding: 0.8rem 1.4rem; min-height: 44px; font-size: 0.78rem; }
.hm-course__link {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--terra-ink);
  text-decoration: underline;
  text-decoration-color: rgba(154,67,34,0.3);
  text-underline-offset: 3px;
}
.hm-course__link:hover { text-decoration-color: var(--terra-ink); }

.hm-course--soon { background: var(--paper-alt); border-style: dashed; }
.hm-course--soon:hover { transform: none; box-shadow: var(--sh-1); }
.hm-course__tag--soon { color: var(--muted); }
.hm-course--full .hm-course__price { color: var(--muted); }

.hm-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(31,30,27,0.05);
  border: 1px solid var(--border-lite);
  border-radius: var(--r-pill);
  padding: 0.45rem 0.95rem;
}
.hm-badge--full { color: var(--terra-ink); background: rgba(184,92,56,0.08); border-color: rgba(184,92,56,0.25); }

/* Featured: two-up, with the offer panel carrying the decision. */
/* Full width: a banner card up top, a tidy grid underneath. Spanning only
   two columns left a half-empty neighbour stretched to its height. */
.hm-course--featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  padding: 2.75rem 3rem;
  border-color: rgba(201,150,58,0.4);
  box-shadow: var(--sh-2);
}
.hm-course--featured .hm-course__bullets {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.75rem;
}
.hm-course--featured:hover { transform: translateY(-5px); box-shadow: var(--sh-3); }
.hm-course--featured .hm-course__title { font-size: 2.1rem; }
.hm-course--featured .hm-course__desc  { font-size: 1.03rem; }
.hm-ribbon {
  position: absolute;
  top: -0.8rem; left: 2.5rem;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-cta);
  border-radius: var(--r-pill);
  padding: 0.4rem 1rem;
  box-shadow: var(--sh-1);
}
.hm-course__bullets {
  margin-top: 1.5rem;
  display: grid;
  gap: 0.6rem;
}
.hm-course__bullets li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--body);
}
.hm-course__bullets li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
}

.hm-offer {
  align-self: center;
  background: linear-gradient(180deg, #FFFDF9 0%, var(--paper-alt) 100%);
  border: 1px solid var(--border-lite);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-md);
  padding: 1.75rem 1.6rem;
  text-align: center;
}
.hm-offer__label {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.5rem;
}
.hm-offer__price {
  font-family: var(--serif);
  font-size: 3.1rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink-deep);
}
.hm-offer__note { font-size: 0.76rem; color: var(--muted); margin: 0.45rem 0 1.4rem; }
.hm-offer__btn { width: 100%; justify-content: center; }
.hm-offer__spots {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--terra-ink);
  margin-top: 0.7rem;
}
.hm-offer__more {
  display: block;
  margin-top: 1rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--terra-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.hm-offer__form { display: grid; gap: 0.6rem; }
.hm-input {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  outline: none;
  transition: border-color var(--t), box-shadow var(--t);
}
.hm-input:focus { border-color: var(--forest); box-shadow: var(--ring); }

/* ── PROOF BAND ─────────────────────────────────────────────────────── */
.hm-proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem 2.5rem;
}
.hm-quote {
  margin: 0;
  padding-left: 1.4rem;
  border-left: 2px solid rgba(201,150,58,0.45);
}
.hm-quote p {
  font-size: 0.99rem;
  line-height: 1.8;
  color: rgba(250,247,242,0.84);
  margin: 0;
}
.hm-stars {
  color: var(--gold-light);
  font-size: 0.85rem;
  letter-spacing: 0.22em;
  margin-bottom: 0.8rem;
}
.hm-quote--lead {
  grid-column: span 3;
  border-left: none;
  padding: 0 0 2.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: 0.5rem;
  text-align: center;
}
.hm-quote--lead .hm-stars { letter-spacing: 0.3em; font-size: 1rem; }
.hm-quote--lead p {
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 1.95rem);
  font-style: italic;
  line-height: 1.5;
  color: #fff;
  max-width: 52ch;
  margin: 0 auto;
}

/* ── VOOR WIE ───────────────────────────────────────────────────────── */
.hm-split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}
.hm-split__lead .hm-head__title { margin-bottom: 1.25rem; }
.hm-checks { display: grid; gap: 0; }
.hm-checks li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--ink-deep);
  line-height: 1.55;
  padding: 1.15rem 0;
  border-bottom: 1px solid rgba(31,30,27,0.1);
}
.hm-checks li:first-child { border-top: 1px solid rgba(31,30,27,0.1); }
.hm-checks li::before {
  content: "";
  flex-shrink: 0;
  width: 1.45rem; height: 1.45rem;
  margin-top: 0.1rem;
  border-radius: 50%;
  background: var(--forest) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23F5E6C8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/0.9rem no-repeat;
}

/* ── ABOUT ──────────────────────────────────────────────────────────── */
.hm-about {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.hm-about__photo {
  margin: 0;
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 26px 60px rgba(29,51,40,0.18);
}
.hm-about__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 22%;
  transform: scale(1.12);
  transform-origin: center 30%;
}
.hm-about__photo::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(201,150,58,0.55);
  border-radius: calc(var(--r-lg) - 8px);
  pointer-events: none;
}
.hm-about__body {
  font-size: 1.1rem;
  line-height: 1.82;
  color: var(--body);
  margin-bottom: 1.25rem;
  max-width: 58ch;
}
.hm-pull {
  font-family: var(--serif);
  font-size: 1.45rem;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink-deep);
  border-left: 3px solid var(--gold);
  padding: 0.35rem 0 0.35rem 1.5rem;
  margin: 2rem 0 2.25rem;
  max-width: 48ch;
}

/* ── STEPS ──────────────────────────────────────────────────────────── */
.hm-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
  counter-reset: step;
}
.hm-step {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-lite);
  border-radius: var(--r-md);
  padding: 1.75rem 1.75rem;
  transition: transform 240ms var(--ease), box-shadow 240ms var(--ease);
}
.hm-step:hover { transform: translateY(-3px); box-shadow: var(--sh-1); }
.hm-step__num {
  font-family: var(--serif);
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
}
.hm-step__body { font-size: 0.99rem; line-height: 1.7; color: var(--body); }
.hm-step__body strong {
  display: block;
  font-family: var(--sans);
  font-size: 1.06rem;
  font-weight: 650;
  color: var(--ink-deep);
  margin-bottom: 0.3rem;
}

/* ── HOME RESPONSIVE ────────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hm-courses { grid-template-columns: repeat(2, 1fr); }
  .hm-proof { grid-template-columns: repeat(2, 1fr); }
  .hm-quote--lead { grid-column: span 2; }
}

@media (max-width: 860px) {
  .hm-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .hm-hero__visual { max-width: 330px; justify-self: start; }
  .hm-hero__title { font-size: clamp(2.3rem, 8vw, 3.2rem); }
  .hm-course--featured { grid-template-columns: 1fr; gap: 1.75rem; padding: 2rem 1.6rem; }
  .hm-ribbon { left: 1.6rem; }
  .hm-split { grid-template-columns: 1fr; gap: 2rem; }
  .hm-about { grid-template-columns: 1fr; gap: 2.5rem; }
  .hm-about__photo { max-width: 340px; }
  .hm-steps { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hm-courses { grid-template-columns: 1fr; }
  .hm-course--featured .hm-course__bullets { grid-template-columns: 1fr; }
  .hm-proof { grid-template-columns: 1fr; }
  .hm-quote--lead { grid-column: span 1; text-align: left; }
  .hm-quote--lead p { margin: 0; }
  .hm-hero__ctas .btn { width: 100%; justify-content: center; }
  .hm-course__foot { flex-direction: column; align-items: stretch; gap: 0.9rem; }
  .hm-course__btn { width: 100%; justify-content: center; }
  .hm-portrait__script { font-size: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 4 — COURSE SALES PAGE, REBUILT
   New hero (cx-*) plus a re-laid-out body on the existing cs-* markup.
   ═══════════════════════════════════════════════════════════════════════ */

body.courses.show { background: var(--paper); }

/* ── Hero ───────────────────────────────────────────────────────────── */
.cx-hero {
  background: linear-gradient(176deg, #FFFDFA 0%, var(--paper) 45%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
}
.cx-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2.5rem, 5vw, 4.5rem) var(--gutter) clamp(3rem, 6vw, 5rem);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
}
.cx-hero__pitch { padding-top: 0.5rem; }
.cx-hero__tag {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin-bottom: 1.1rem;
}
.cx-hero__tag::before { content: ""; width: 30px; height: 1.5px; background: currentColor; opacity: 0.55; }
.cx-hero__title {
  font-family: var(--serif);
  font-size: clamp(2.3rem, 4.4vw, 3.7rem);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--ink-deep);
  margin-bottom: 1.1rem;
}
.cx-hero__sub {
  font-size: 1.18rem;
  line-height: 1.65;
  color: var(--body);
  max-width: 40ch;
  margin-bottom: 1.6rem;
}
.cx-hero__price {
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-lite);
  max-width: 46ch;
}
.cx-related {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-deep);
  background: rgba(201,150,58,0.1);
  border: 1px solid rgba(201,150,58,0.35);
  border-radius: var(--r-pill);
  padding: 0.55rem 1.1rem;
  margin-bottom: 1.5rem;
  transition: background var(--t), border-color var(--t);
}
.cx-related:hover { background: rgba(201,150,58,0.18); border-color: rgba(201,150,58,0.6); }
.cx-related__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--terra);
  flex-shrink: 0;
}
.cx-related strong { font-weight: 650; }

/* The offer card: price, action and proof in one object. */
.cx-offer {
  background: #fff;
  border: 1px solid var(--border-lite);
  border-top: 3px solid var(--gold);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow: hidden;
}
.cx-offer__video {
  display: flex;
  justify-content: center;
  background: #14140F;
  padding: 1.1rem;
}
.cx-offer__video iframe {
  width: auto;
  height: 340px;
  aspect-ratio: 9/16;
  border: 0;
  display: block;
  border-radius: var(--r-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.cx-offer__body { padding: 1.9rem 1.75rem; text-align: center; }
.cx-offer__label-plain {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}
.cx-offer__price {
  font-family: var(--serif);
  font-size: 3.4rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink-deep);
  margin-bottom: 1.5rem;
}
.cx-offer__btn { width: 100%; justify-content: center; min-height: 54px; font-size: 0.9rem; }
.cx-offer__spots {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--terra-ink);
  margin-top: 0.7rem;
}
.cx-offer__link {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--terra-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cx-offer__secure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border-lite);
}
.cx-offer__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  font-weight: 650;
  color: var(--ink-deep);
  line-height: 1.45;
  margin-bottom: 1.1rem;
}
.cx-offer__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 4px rgba(201,150,58,0.2);
}
.cx-offer__form { display: grid; gap: 0.6rem; }
.cx-offer__note { font-size: 0.78rem; color: var(--muted); line-height: 1.5; margin-top: 0.5rem; }

/* ── Body sections on the existing cs-* markup ──────────────────────── */
.cs-section { padding: clamp(3.5rem, 7vw, 6.5rem) var(--gutter); }
.cs-section--cream { background: var(--paper); }
.cs-section--white { background: #fff; }
.cs-section--sand  { background: var(--paper-alt); }
.cs-section--forest {
  background:
    radial-gradient(90% 120% at 15% 0%, #2F4C3E 0%, #223C30 45%, #1A2E25 100%);
}
.cs-container--narrow { max-width: 1000px; }

.cs-label { font-size: 0.7rem; letter-spacing: 0.22em; margin-bottom: 1rem; }
.cs-heading {
  font-size: clamp(2rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.028em;
  line-height: 1.08;
  color: var(--ink-deep);
  margin-bottom: 2.5rem;
}
/* Must follow .cs-heading: same specificity, so order decides the colour. */
.cs-heading--light { color: #fff; }
.cs-prose p { font-size: 1.12rem; line-height: 1.85; color: var(--body); max-width: 68ch; }

/* Lists become grids: the page stops reading like a document. */
.cs-checklist {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.cs-checklist__item {
  background: #fff;
  border: 1px solid var(--border-lite);
  border-left: 3px solid var(--terra);
  border-radius: var(--r-md);
  padding: 1.35rem 1.4rem;
  box-shadow: var(--sh-1);
  font-size: 1rem;
  line-height: 1.6;
}
.cs-checklist__item:hover { transform: none; box-shadow: var(--sh-2); }
.cs-closing-note {
  grid-column: 1 / -1;
  font-family: var(--serif);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-style: italic;
  color: var(--ink-deep);
  text-align: center;
  border-top: none;
  padding-top: 2rem;
}

.cs-learns, .cs-practical {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 2.5rem;
}
.cs-learns__item, .cs-practical__item {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border-lite);
  border-top: none !important;
}
.cs-learns__item strong, .cs-practical__item strong { color: var(--ink-deep); }

.cs-pillars {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.cs-quote { max-width: 46ch; }

.cs-forwho { grid-template-columns: repeat(2, 1fr); gap: 0 2.5rem; }
.cs-outcomes { grid-template-columns: repeat(2, 1fr); }

/* Final offer box */
.cs-cta-section { background: var(--paper-alt); }
.cs-cta-box {
  max-width: 620px;
  border-radius: var(--r-lg);
  border: 1px solid rgba(201,150,58,0.35);
  background:
    radial-gradient(120% 100% at 50% 0%, #2F4C3E 0%, #223C30 55%, #1A2E25 100%);
  box-shadow: 0 30px 70px rgba(26,46,37,0.26), inset 0 1px 0 rgba(255,255,255,0.07);
}
.cs-cta-box__price { font-size: clamp(3.2rem, 6vw, 4.4rem); }

.cs-faq__q { font-size: 1.1rem; }

/* ── Course page responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .cx-hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .cx-offer { max-width: 420px; }
  .cs-checklist, .cs-learns, .cs-practical, .cs-pillars,
  .cs-forwho, .cs-outcomes { grid-template-columns: 1fr; }
  .cs-learns, .cs-practical { gap: 0; }
}
@media (max-width: 620px) {
  .cx-hero__title { font-size: clamp(2rem, 8.5vw, 2.6rem); }
  .cx-offer { max-width: none; }
  .cx-offer__video iframe { height: 300px; }
  .cs-closing-note { padding-top: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 5 — COURSES INDEX, REBUILT (ci-* markup, new system)
   The dark-on-dark grid is gone: light ground, white product cards.
   ═══════════════════════════════════════════════════════════════════════ */

body.courses.index { background: var(--paper); }

.ci-hero {
  padding-top: 0;
  background: linear-gradient(176deg, #FFFDFA 0%, var(--paper) 50%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
}
.ci-hero__inner {
  max-width: 1180px;
  padding: clamp(2.75rem, 5vw, 4.5rem) var(--gutter) clamp(2.75rem, 5vw, 4rem);
}
.ci-hero__overline { color: var(--terra-ink); opacity: 1; font-size: 0.7rem; letter-spacing: 0.22em; }
.ci-hero__overline-line { width: 30px; height: 1.5px; background: var(--terra-ink); opacity: 0.55; }
.ci-hero__title {
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 500;
  letter-spacing: -0.032em;
  line-height: 1.04;
  color: var(--ink-deep);
}
.ci-hero__sub {
  font-size: 1.15rem;
  color: var(--body);
  max-width: 54ch;
  line-height: 1.7;
}
.ci-hero__sub a { color: var(--terra-ink); text-decoration-color: rgba(154,67,34,0.4); text-underline-offset: 3px; }
.ci-hero__trust { gap: 0.75rem 1rem; }
.ci-hero__trust-item {
  gap: 0.45rem;
  font-size: 0.82rem;
  font-weight: 650;
  color: var(--ink-deep);
  background: #fff;
  border: 1px solid var(--border-lite);
  border-radius: var(--r-pill);
  padding: 0.5rem 1rem;
  box-shadow: var(--sh-1);
}
.ci-hero__trust-item svg { color: var(--forest); }

.ci-section { background: var(--paper); padding: clamp(2.5rem, 5vw, 4rem) 0 clamp(4.5rem, 8vw, 7rem); }
.ci-grid {
  max-width: 1180px;
  padding: 0 var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 1.75rem;
}

.ci-card {
  background: #fff;
  border: 1px solid var(--border-lite);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
}
.ci-card:hover:not(.ci-card--soon) {
  transform: translateY(-5px);
  box-shadow: var(--sh-2);
  border-color: rgba(201,150,58,0.45);
}
.ci-card__accent { height: 3px; background: var(--gold); }
.ci-card__body { padding: 2rem 1.9rem 1.4rem; }
.ci-card__tag { color: var(--terra-ink); font-size: 0.68rem; letter-spacing: 0.2em; }
.ci-card__tag--soon { color: var(--muted); }
.ci-card__title {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--ink-deep);
  letter-spacing: -0.022em;
  line-height: 1.14;
}
.ci-card__title--soon { opacity: 1; color: var(--muted); }
.ci-card__desc { font-size: 0.97rem; color: var(--body); line-height: 1.7; }
.ci-card__desc--soon { color: var(--muted); }
.ci-card__bullet { color: var(--body); }

.ci-card__footer {
  padding: 1.5rem 1.9rem 1.9rem;
  border-top: 1px solid var(--border-lite);
  background: linear-gradient(180deg, #FFFDF9, var(--paper-alt));
  gap: 0.9rem;
}
.ci-card__footer--soon { background: transparent; }
.ci-card__price { font-size: 2rem; color: var(--ink-deep); letter-spacing: -0.025em; }
.ci-card__price-note {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.ci-card__btn {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold-cta);
  color: var(--gold-ink);
  border-radius: var(--r-sm);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--sh-1);
}
.ci-card__btn:hover { background: var(--gold-cta-h); color: var(--gold-ink); transform: translateY(-2px); box-shadow: var(--sh-gold); }
.ci-card__btn--waitlist { background: var(--forest); color: var(--cream); }
.ci-card__btn--waitlist:hover { background: var(--forest-mid); color: var(--cream); }
.ci-card__more {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--terra-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ci-card__spots { font-size: 0.8rem; font-weight: 700; color: var(--terra-ink); }
.ci-card__full-msg { font-size: 0.9rem; color: var(--muted); }
.ci-card__waitlist-label { font-size: 0.9rem; font-weight: 600; color: var(--ink-deep); line-height: 1.5; }
.ci-card__waitlist-note { font-size: 0.76rem; color: var(--muted); line-height: 1.5; }

/* Soft, legible states instead of near-invisible washed-out cards. */
.ci-card--soon { background: var(--paper-alt); border-style: dashed; box-shadow: none; }
.ci-card__soon-banner,
.ci-card__full-banner {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
}
.ci-card__soon-banner { background: rgba(31,30,27,0.06); color: var(--muted); }
.ci-card__full-banner { background: var(--terra-cta); color: #fff; }
.ci-card--full { opacity: 1; }
.ci-card--waitlist-open .ci-card__soon-banner { background: var(--gold-cta); color: var(--gold-ink); }

.cs-label--light { opacity: 1; }

/* ── 5b. States: the old card states were written for a dark page ───── */
/* Each of these needs .ci-card--x .ci-card__y specificity to win. */
.ci-card--full {
  background: #fff;
  border: 1px solid var(--border-lite);
  box-shadow: var(--sh-1);
  opacity: 1;
}
.ci-card--full .ci-card__accent        { background: var(--terra); opacity: 1; }
.ci-card--full .ci-card__tag           { color: var(--muted); }
.ci-card--full .ci-card__title         { color: var(--ink-deep); }
.ci-card--full .ci-card__desc          { color: var(--body); }
.ci-card--full .ci-card__bullet        { color: var(--body); }
.ci-card--full .ci-card__bullet::before{ background: var(--gold); }
.ci-card--full .ci-card__footer        { border-top-color: var(--border-lite); }
.ci-card--full .ci-card__price         { color: var(--muted); }
.ci-card--full .ci-card__price-note    { color: var(--muted); }
.ci-card--full .ci-card__full-msg      { color: var(--muted); }
.ci-card--full .ci-card__more          { color: var(--terra-ink); }
.ci-card--full .ci-card__more:hover    { color: var(--terra-cta-h); }
.ci-card--full .ci-card__waitlist-label{ color: var(--ink-deep); }

.ci-card--soon {
  background: var(--paper-alt);
  border: 1px dashed var(--border);
  box-shadow: none;
}
.ci-card--soon .ci-card__footer     { border-top-color: var(--border-lite); }
.ci-card--soon .ci-card__more       { color: var(--terra-ink); }
.ci-card--soon .ci-card__more:hover { color: var(--terra-cta-h); }
.ci-card__title--soon { color: var(--muted) !important; opacity: 1; }
.ci-card__desc--soon  { color: var(--body); }

/* Inputs were styled for a dark ground: invisible on white. */
.ci-card__input,
.ci-card__input--light {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border-radius: var(--r-sm);
  border: 1.5px solid var(--border);
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
}
.ci-card__input::placeholder,
.ci-card__input--light::placeholder { color: var(--faint); }
.ci-card__input:focus,
.ci-card__input--light:focus {
  border-color: var(--forest);
  background: #fff;
  box-shadow: var(--ring);
}
.ci-card__waitlist-note,
.ci-card__waitlist-note--dark { color: var(--muted); }

/* Bookable courses first, waitlist next, sold out last. Visual order only:
   the DOM order (and with it the content sequence) is untouched. */
.ci-card { order: 1; }
.ci-card--soon { order: 2; }
.ci-card--full { order: 3; }

/* ═══════════════════════════════════════════════════════════════════════
   PART 6 — OVER MIJ, REBUILT (om-*)
   ═══════════════════════════════════════════════════════════════════════ */

body.pages.over_mij { background: var(--paper); }

.om-hero {
  background: linear-gradient(176deg, #FFFDFA 0%, var(--paper) 48%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
}
.om-hero__inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3rem, 6vw, 5.5rem) var(--gutter) clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: 1.1fr 0.8fr;
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: center;
}
.om-hero__overline {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--terra-ink);
  margin-bottom: 1.3rem;
}
.om-hero__overline::before { content: ""; width: 32px; height: 1.5px; background: currentColor; opacity: 0.55; }
.om-hero__name {
  font-family: var(--serif);
  font-size: clamp(3rem, 6.5vw, 5.4rem);
  font-weight: 500;
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--ink-deep);
  margin-bottom: 1.25rem;
}
.om-hero__role {
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--body);
  max-width: 44ch;
}
.om-hero__photo {
  margin: 0;
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 380px;
  border-radius: var(--arch);
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(29,51,40,0.22);
}
.om-hero__photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center 16%;
}

.om-body { background: #fff; padding: clamp(4rem, 8vw, 7rem) 0; }
.om-body__inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.om-body__inner p {
  font-size: 1.18rem;
  line-height: 1.85;
  color: var(--body);
  margin-bottom: 1.75rem;
}
/* First paragraph leads, the way a feature opens. */
.om-body__inner p:first-of-type {
  font-size: 1.32rem;
  line-height: 1.7;
  color: var(--ink-deep);
}
.om-pull {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.6vw, 2rem) !important;
  font-style: italic;
  line-height: 1.45 !important;
  color: var(--ink-deep) !important;
  border-left: 3px solid var(--gold);
  padding: 0.5rem 0 0.5rem 1.75rem;
  margin: 2.5rem 0 0 !important;
}

.om-cta { background: var(--paper-alt); padding: clamp(4rem, 8vw, 7rem) 0; }
.om-cta__inner {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}
.om-cta__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink-deep);
  margin-bottom: 1.25rem;
}
.om-cta__body {
  font-size: 1.1rem;
  line-height: 1.75;
  color: var(--body);
  margin: 0 auto 2.25rem;
  max-width: 44ch;
}

@media (max-width: 860px) {
  .om-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .om-hero__photo { max-width: 300px; justify-self: start; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PART 7 — LANDERS, BLOG, AND TWO MORE UNDECLARED VARIABLES
   ═══════════════════════════════════════════════════════════════════════ */

/* --content was never declared, so every blog container lost its max-width
   and ran edge to edge. --text was never declared either. */
:root {
  --content: 1180px;
  --text: var(--body);
}

/* ── Landers: undo the blanket card treatment where it hurt ─────────── */
/* .dls-learn-card sits on the dark band and is a dot + text row, not a
   card: a bordered box with no background read as an empty outline. */
.dls-learn-card {
  border: none;
  box-shadow: none;
  background: rgba(255,255,255,0.05);
  border-radius: var(--r-md);
  padding: 1.25rem 1.35rem;
}
.dls-learn-card:hover { transform: none; box-shadow: none; background: rgba(255,255,255,0.08); }
.dls-learn-card__title { font-size: 1rem; color: #fff; }
.dls-learn-card__body  { font-size: 0.92rem; color: rgba(250,247,242,0.75); }

.dls-for-item {
  background: #fff;
  border-radius: var(--r-md);
  padding: 1.1rem 1.25rem;
  font-size: 0.98rem;
  color: var(--body);
}
.dls-pain-card { background: #fff; padding: 1.35rem 1.4rem; }
.dls-pain-card p { color: var(--body); }
.dlb-what-card { background: #fff; padding: 1.5rem; }

/* ── Blog: same light system as the rest of the site ────────────────── */
body.blog { background: var(--paper); }

.blog-hero {
  background: linear-gradient(176deg, #FFFDFA 0%, var(--paper) 50%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
}
.blog-hero__overline { color: var(--terra-ink); }
.blog-hero__title { color: var(--ink-deep); font-weight: 500; letter-spacing: -0.032em; }
.blog-hero__sub { color: var(--body); }

.blog-page { background: var(--paper); }
.blog-index__inner, .blog-page__inner, .blog-cats__inner, .article-related__inner {
  max-width: var(--content);
  margin-left: auto;
  margin-right: auto;
}
.blog-grid { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 1.75rem; }
.blog-featured { background: #fff; }
.blog-featured__title { color: var(--ink-deep); }
.blog-tag {
  background: rgba(201,150,58,0.14);
  color: var(--terra-ink);
  border: 1px solid rgba(201,150,58,0.3);
}

/* Article: light header, so the page reads as one continuous piece. */
.article-header {
  background: linear-gradient(176deg, #FFFDFA 0%, var(--paper) 55%, #F4EEE4 100%);
  border-bottom: 1px solid var(--hair);
}
.article-header__title { color: var(--ink-deep); font-weight: 500; letter-spacing: -0.032em; }
.article-header__lead { color: var(--body); }
.article-header__byline, .article-header__author, .article-header__date { color: var(--muted); }
.article-header__nav a, .article-back { color: var(--terra-ink); }
.article-body-wrap { background: #fff; }
.article-body-inner { max-width: 720px; margin: 0 auto; }
.article-related { background: var(--paper-alt); }

.blog-cta, .article-related__heading { color: inherit; }
.blog-cta__title { color: #fff; }

/* The old grid drew hairlines with a grey background behind 1.5px gaps.
   With real cards that background just shows through empty cells. */
.blog-grid, .blog-grid--related {
  background: transparent;
  border: none;
}
.blog-card { padding: 1.9rem; }
/* flex:1 stretched these past their line clamp, cutting text mid-line. */
.blog-card__title { flex: none; font-size: 1.25rem; color: var(--ink-deep); }
.blog-card__excerpt { flex: none; font-size: 0.95rem; color: var(--body); }

/* One paper ground across the public site. */
body:not(.admin-body) { background: var(--paper); }

/* ═══════════════════════════════════════════════════════════════════════
   PART 8 — NARROW UTILITY PAGES (contact, legal, auth, post-purchase)
   ═══════════════════════════════════════════════════════════════════════ */

.pg-narrow { padding: clamp(2.5rem, 5vw, 4rem) var(--gutter) clamp(4rem, 7vw, 6rem); }
.pg-narrow__inner { width: 100%; max-width: 620px; margin: 0 auto; }
.pg-narrow__head { margin-bottom: 2rem; }
.pg-narrow__title {
  font-family: var(--serif);
  font-size: clamp(2.1rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: var(--ink-deep);
  margin-bottom: 0.75rem;
}
.pg-narrow__sub { font-size: 1.08rem; line-height: 1.7; color: var(--body); }
.pg-narrow .auth-card { max-width: none; }
.pg-aside {
  margin-top: 2rem;
  padding: 1.35rem 1.5rem;
  background: var(--paper-alt);
  border: 1px solid var(--border-lite);
  border-radius: var(--r-md);
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--body);
}
.pg-aside strong { color: var(--ink-deep); font-weight: 650; }
.pg-aside a {
  color: var(--terra-ink);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Legal pages */
.av-hero__title { color: #fff; }
.av-body { background: #fff; }
.av-body__inner { max-width: 760px; margin: 0 auto; }

/* Auth card */
.auth-card { border-color: var(--border-lite); }
.auth-card__brand { color: var(--terra-ink); }

/* ═══════════════════════════════════════════════════════════════════════
   PART 9 — FOOTER (ft-*)
   Pure black, no colour at all, no gradients, no patterns, no glow.
   Everything is carried by typography, white space and hairlines: wide
   letter-spaced small caps for labels, a plain statement instead of a
   display headline, square buttons, and one designed moment — the round
   portrait set like a stamp over the top edge.
   ═══════════════════════════════════════════════════════════════════════ */

.ft {
  --hair: rgba(255,255,255,0.14);
  --dim:  rgba(255,255,255,0.46);
  background: #000;
  color: rgba(255,255,255,0.78);
  font-family: var(--sans);
}
.ft__inner {
  position: relative;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(3.5rem, 7vw, 6rem) var(--gutter) 2rem;
}

/* ── Seal ───────────────────────────────────────────────────────────── */
.ft-seal {
  position: absolute;
  top: 0;
  right: var(--gutter);
  transform: translateY(-46%);
  width: clamp(112px, 12vw, 148px);
  margin: 0;
  text-align: center;
}
.ft-seal img {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center 16%;
  border-radius: 50%;
  display: block;
  filter: grayscale(1) contrast(1.05);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 0 0 7px #000;
}
.ft-seal figcaption {
  display: grid;
  gap: 0.2rem;
  margin-top: 0.85rem;
}
.ft-seal__name {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #fff;
}
.ft-seal__role {
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Statement ──────────────────────────────────────────────────────── */
.ft-head {
  display: grid;
  grid-template-columns: 1.35fr auto;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--hair);
}
.ft-logo {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 1.5rem;
  transition: opacity var(--t);
}
.ft-logo:hover { opacity: 0.65; }
.ft-statement {
  font-size: clamp(1.1rem, 1.6vw, 1.38rem);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: #fff;
  max-width: 46ch;
  margin: 0;
}

.ft-head__actions { display: grid; justify-items: end; gap: 1.1rem; }
.ft-btns { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ft-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.9rem;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 0;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.ft-btn:hover { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
.ft-btn--solid { background: #fff; border-color: #fff; color: #000; }
.ft-btn--solid:hover { background: rgba(255,255,255,0.86); border-color: rgba(255,255,255,0.86); color: #000; }

.ft-proof {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--dim);
  margin: 0;
}
.ft-proof__stars { color: #fff; letter-spacing: 0.14em; font-size: 0.78rem; }
.ft-proof a { color: var(--dim); transition: color var(--t); }
.ft-proof a:hover { color: #fff; }

/* ── Sitemap ────────────────────────────────────────────────────────── */
.ft__top {
  display: grid;
  /* Uneven on purpose: course and article titles are long, the rest short. */
  grid-template-columns: 1.3fr 1fr 1.2fr 0.85fr 0.95fr;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(2.5rem, 5vw, 3.5rem) 0;
}
.ft__col-title {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.6rem;
}
.ft__links { display: grid; gap: 0.85rem; }
.ft__links a {
  font-size: 0.9rem;
  line-height: 1.4;
  color: rgba(255,255,255,0.8);
  transition: color var(--t);
}
.ft__links a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }

.ft-social { display: flex; gap: 0.5rem; margin-top: 1.6rem; }
.ft-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  color: rgba(255,255,255,0.8);
  border: 1px solid rgba(255,255,255,0.28);
  transition: background var(--t), color var(--t), border-color var(--t);
}
.ft-social a:hover { background: #fff; border-color: #fff; color: #000; }

/* ── Trust line ─────────────────────────────────────────────────────── */
.ft__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 2.5rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.ft__trust li {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--dim);
}

/* ── Legal ──────────────────────────────────────────────────────────── */
.ft__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  padding-top: 1.6rem;
}
.ft__copy { font-size: 0.78rem; color: rgba(255,255,255,0.34); margin: 0; }
.ft__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.75rem; }
.ft__legal a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.34);
  transition: color var(--t);
}
.ft__legal a:hover { color: #fff; }
.ft__meta-link { font-size: 0.74rem !important; color: rgba(255,255,255,0.26) !important; }
.ft__meta-link:hover { color: #fff !important; }

/* ── Footer responsive ──────────────────────────────────────────────── */
@media (max-width: 1040px) {
  .ft__top { grid-template-columns: repeat(3, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 760px) {
  .ft-head { grid-template-columns: 1fr; align-items: start; }
  .ft-head__actions { justify-items: start; }
  .ft-seal { position: static; transform: none; margin: 0 0 2.25rem; text-align: left; width: 104px; }
  .ft-seal figcaption { justify-items: start; }
  .ft__top { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .ft__top { grid-template-columns: 1fr; }
  .ft-btns { width: 100%; }
  .ft-btn { flex: 1; padding: 0 1.25rem; }
  .ft__bottom { flex-direction: column; align-items: flex-start; }
  .ft__legal { gap: 1rem 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PART 10 — PRESALE
   Een cursus die wel te koop is maar nog niet open. Overal hetzelfde
   signaal: een label, en een regel die zegt wanneer het platform opengaat.
   ═══════════════════════════════════════════════════════════════════════ */

.ps-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-cta);
  border-radius: var(--r-pill);
  padding: 0.4rem 0.9rem;
  white-space: nowrap;
}
.ps-badge::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
.ps-badge--card { margin: 0 auto 1rem; }
.ps-badge--inline { margin-bottom: 0.9rem; }

/* Strip onder de cursustitel in de hero */
.ps-strip {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem;
  margin-bottom: 1.6rem;
  background: rgba(201,150,58,0.1);
  border: 1px solid rgba(201,150,58,0.38);
  border-radius: var(--r-md);
  max-width: 54ch;
}
.ps-strip__text {
  flex: 1 1 18ch;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--ink-deep);
}

.ps-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--muted);
  margin-top: 0.8rem;
}
.ps-note--light { color: rgba(250,247,242,0.72); }
.ps-note--boxed {
  margin-top: 1.25rem;
  padding: 0.95rem 1.1rem;
  border-radius: var(--r-sm);
  border-left: 3px solid var(--gold);
  background: rgba(201,150,58,0.1);
  text-align: left;
}
.ps-note strong { color: inherit; font-weight: 700; }
.confirm-course .ps-note--boxed { color: var(--body); }

/* Home: ribbon van de uitgelichte kaart */
.hm-ribbon--presale { background: var(--forest); color: var(--cream); }

/* Cursusoverzicht: balk bovenaan de kaart */
.ci-card--presale { border-color: rgba(201,150,58,0.5); }
.ci-card__presale-banner {
  background: var(--gold-cta);
  color: var(--gold-ink);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* ── Leeromgeving: "komt eraan" in plaats van een klikbare kaart ────── */
.lms-course-card--awaiting {
  cursor: default;
  opacity: 1;
}
.lms-course-card--awaiting:hover { transform: none; box-shadow: var(--sh-1); }
.lms-course-card__awaiting-badge {
  flex-shrink: 0;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-ink);
  background: var(--gold-cta);
  border-radius: var(--r-pill);
  padding: 0.35rem 0.8rem;
}
.lms-course-card__awaiting-note {
  margin-top: 0.85rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--body);
}
.lms-course-card__cta--muted {
  color: var(--muted) !important;
  font-weight: 600;
}

/* Drie meta-regels naast een CTA passen niet op één rij in een kaart. */
.lms-course-card--awaiting .lms-course-card__footer {
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
  align-items: baseline;
}
.lms-course-card--awaiting .lms-course-card__cta--muted { margin-left: auto; }