/* ==========================================================================
   Course module — public pages (academy, 7 Oct 2026, docs/course-module-plan.md)
   Course detail (hero, facts bar, blocks, sticky card, mobile bar), course cards, category page, thank-you.
   Plain file (linked by front/course/partials/assets) — uses the theme tokens from resources/css/front/tokens.css.
   ========================================================================== */

/* ---- Gold button (also defined in site-overrides.css for the header) ---- */
.btn--gold { background: var(--gold-500); color: var(--n-0); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-600); color: var(--n-0); box-shadow: var(--shadow-md); }
.btn--block { display: flex; width: 100%; justify-content: center; }
.btn.is-disabled { background: var(--n-100); color: var(--color-text-muted); border-color: var(--color-border); pointer-events: none; }
.course-hero .btn.is-disabled { background: rgba(255, 255, 255, 0.12); color: var(--n-0); border-color: rgba(255, 255, 255, 0.4); }

/* ---- Draft preview bar -------------------------------------------------- */
.course-preview-bar { background: var(--gold-100); color: var(--gold-900); border-bottom: 1px solid var(--gold-200); font-size: var(--text-sm); padding-block: var(--space-2); }

/* ---- Hero ----------------------------------------------------------------- */
.course-hero {
  position: relative;
  overflow: hidden;
  color: var(--n-0);
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(201, 161, 69, 0.22), transparent 60%),
    linear-gradient(120deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-500) 100%);
}
.course-hero::after { /* soft dark wash so text stays readable over any photo */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4, 31, 21, 0.92) 0%, rgba(4, 31, 21, 0.72) 45%, rgba(4, 31, 21, 0.25) 100%);
}
.course-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-hero__inner { position: relative; z-index: 1; padding-block: var(--space-8) calc(var(--space-16) + var(--space-8)); }
.course-hero__content { max-width: 44rem; margin-top: var(--space-6); }
.course-hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0.3rem 0.8rem; border-radius: var(--radius-full);
  background: rgba(201, 161, 69, 0.18); border: 1px solid rgba(220, 187, 102, 0.45);
  color: var(--gold-300); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase;
}
.course-hero__title { color: var(--n-0); margin-top: var(--space-4); font-size: var(--text-5xl); line-height: var(--leading-tight); }
.course-hero__programme { margin-top: var(--space-3); font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--gold-300); }
.course-hero__lead { margin-top: var(--space-4); font-size: var(--text-lg); color: rgba(255, 255, 255, 0.88); max-width: 38rem; }
.course-hero__highlights { margin-top: var(--space-6); display: grid; gap: var(--space-3); }
.course-hero__highlights li { display: flex; align-items: flex-start; gap: var(--space-3); color: rgba(255, 255, 255, 0.92); }
.course-hero__highlights .icon {
  flex: none; width: 1.4rem; height: 1.4rem; padding: 3px; margin-top: 1px; border-radius: 50%;
  background: var(--gold-400); color: var(--green-900);
}
.course-hero__actions { margin-top: var(--space-8); display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (min-width: 900px) { .course-hero__highlights { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Facts bar (overlaps the hero) ---------------------------------------- */
.course-facts {
  position: relative; z-index: 2;
  margin-top: calc(-1 * var(--space-16));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr));
  background: var(--n-0);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--gold-400);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.course-facts__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-5) var(--space-5); }
.course-facts__item + .course-facts__item { border-left: 1px solid var(--color-border); }
.course-facts__icon { flex: none; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: var(--radius-md); background: var(--green-50); color: var(--green-500); }
.course-facts__icon .icon { width: 1.3rem; height: 1.3rem; }
.course-facts dt { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-faint); font-weight: var(--weight-semibold); }
.course-facts dd { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); }
@media (max-width: 639px) {
  .course-facts { grid-template-columns: 1fr 1fr; }
  .course-facts__item { padding: var(--space-4); }
  .course-facts__item + .course-facts__item { border-left: 0; }
  .course-facts__item:nth-child(even) { border-left: 1px solid var(--color-border); }
  .course-facts__item:nth-child(n+3) { border-top: 1px solid var(--color-border); }
}

/* ---- Full-width sections (7 Oct 2026, client reference: stacked sections, some left / right) ------------ */
.course-sec { padding-block: clamp(3rem, 6vw, 5rem); }
.course-sec--first { padding-top: clamp(3.5rem, 6vw, 5rem); }
.course-sec--tint { background: var(--cream-50); border-block: 1px solid var(--cream-200); }
.course-eyebrow {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3);
  font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-600);
}
.course-eyebrow::before { content: ""; width: 1.75rem; height: 2px; background: var(--gold-400); }
.course-head-center { text-align: center; display: grid; justify-items: center; margin-bottom: var(--space-8); }
.course-head-center .course-block__title { justify-content: center; }

/* left / right split: text beside a photo or the "At a glance" card */
.course-split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.course-split--spaced { margin-top: clamp(3rem, 6vw, 5rem); }
@media (min-width: 900px) {
  .course-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .course-split--aside { grid-template-columns: minmax(0, 1fr) 22rem; align-items: start; }
  .course-split--apply { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  /* the sticky site header is the top bar (2.5rem) + the menu bar (--header-height): 112px at desktop */
  .course-split--aside .course-split__aside { position: sticky; top: calc(var(--header-height) + 2.5rem + var(--space-6)); }
}
.course-split__main { min-width: 0; }
.course-split__media { position: relative; isolation: isolate; } /* keeps the gold frame (::before, z-index -1) above the section background */
.course-split__media img {
  display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
}
.course-split__media::before { /* gold offset frame behind the photo */
  content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; z-index: -1;
  border: 2px solid var(--gold-300); border-radius: var(--radius-xl);
}
.course-split__media--framed img { aspect-ratio: 4 / 5; }
.course-split__badge {
  position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5);
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4);
  background: rgba(4, 31, 21, 0.86); color: var(--n-0); border-radius: var(--radius-lg); backdrop-filter: blur(4px);
}
.course-split__badge .icon { flex: none; width: 2.2rem; height: 2.2rem; padding: 0.45rem; border-radius: 50%; background: var(--gold-400); color: var(--green-900); }
.course-split__badge span { display: grid; font-size: var(--text-sm); color: rgba(255, 255, 255, 0.85); }
.course-split__badge strong { color: var(--n-0); font-size: var(--text-base); }
@media (max-width: 899px) {
  .course-split__media::before { inset: 0.75rem -0.75rem -0.75rem 0.75rem; }
  .course-split__media--framed { order: -1; }
  .course-split__media--framed img { aspect-ratio: 16 / 10; }
}

/* "At a glance" card (beside the overview) */
.course-sticky {
  background: var(--n-0);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--gold-400);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.course-sticky__body { padding: var(--space-6); display: grid; gap: var(--space-3); }
.course-sticky__label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-faint); font-weight: var(--weight-semibold); }
.course-sticky__price { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--green-600); line-height: 1.1; }
.course-sticky__price del { margin-left: var(--space-2); font-size: var(--text-lg); font-weight: var(--weight-regular); color: var(--color-text-faint); }
.course-sticky__on-request { font-size: var(--text-xl); }
.course-sticky__link { font-size: var(--text-sm); color: var(--green-500); }
.course-sticky__status { justify-self: start; padding: 0.25rem 0.75rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); background: var(--green-50); color: var(--green-600); }
.course-sticky__status--closed { background: #fdecee; color: #8b1c1c; }
.course-sticky__status--coming_soon { background: var(--gold-50); color: var(--gold-700); }
.course-sticky__facts { display: grid; margin-block: var(--space-2); border-top: 1px solid var(--color-border); }
.course-sticky__facts li { display: grid; grid-template-columns: 1.25rem 1fr auto; align-items: center; gap: var(--space-3); padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.course-sticky__facts .icon { width: 1.1rem; height: 1.1rem; color: var(--gold-500); }
.course-sticky__facts span { color: var(--color-text-muted); }
.course-sticky__facts strong { color: var(--color-heading); text-align: right; }

/* ---- Blocks --------------------------------------------------------------- */
.course-block { scroll-margin-top: calc(var(--header-height) + 2.5rem + var(--space-6)); }
.course-block__title { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-3xl); margin-bottom: var(--space-6); }
.course-block__icon { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md); background: var(--green-500); color: var(--n-0); }
.course-block__icon .icon { width: 1.2rem; height: 1.2rem; }
.course-block__count { margin-left: auto; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-faint); }

/* outcomes */
.course-outcomes { display: grid; gap: var(--space-3) var(--space-6); }
@media (min-width: 640px) { .course-outcomes { grid-template-columns: 1fr 1fr; } }
.course-outcomes li { display: flex; gap: var(--space-3); align-items: flex-start; }
.course-outcomes .icon { flex: none; width: 1.4rem; height: 1.4rem; padding: 3px; margin-top: 2px; border-radius: 50%; background: var(--green-50); color: var(--green-500); }
.course-benefits { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.course-benefits li { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-lg); background: var(--cream-100); border: 1px solid var(--cream-300); }
.course-benefits__num { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--gold-500); }

/* audience */
.course-audience { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .course-audience--two { grid-template-columns: 1fr 1fr; } }
.course-audience__panel { padding: var(--space-6); border-radius: var(--radius-lg); background: var(--n-0); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); }
.course-audience__panel h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); color: var(--green-600); }

/* curriculum */
.course-modules { display: grid; gap: var(--space-3); }
.course-module { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--n-0); overflow: hidden; }
.course-module[open] { border-color: var(--green-200); box-shadow: var(--shadow-sm); }
.course-module summary { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: var(--weight-semibold); color: var(--color-heading); }
.course-module summary::-webkit-details-marker { display: none; }
.course-module__num { flex: none; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gold-50); color: var(--gold-600); font-size: var(--text-sm); border: 1px solid var(--gold-200); }
.course-module__title { flex: 1; }
.course-module__time { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-faint); white-space: nowrap; }
.course-module__chev { flex: none; width: 1.1rem; height: 1.1rem; color: var(--green-500); transition: transform var(--duration-fast) var(--ease-out); }
.course-module[open] .course-module__chev { transform: rotate(180deg); }
.course-module__body { padding: 0 var(--space-5) var(--space-5) calc(var(--space-5) + 2.2rem + var(--space-4)); color: var(--color-text-muted); }
.course-timeline { display: grid; gap: var(--space-5); position: relative; padding-left: var(--space-2); }
.course-timeline li { display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--space-4); }
.course-timeline__dot { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--green-500); color: var(--n-0); font-weight: var(--weight-bold); }
.course-timeline h3 { font-size: var(--text-lg); }
.course-timeline small { font-size: var(--text-sm); color: var(--color-text-faint); font-weight: var(--weight-regular); }
.course-timeline p { color: var(--color-text-muted); margin-top: var(--space-1); }

/* fees */
.course-fees__wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.course-fees { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.course-fees th, .course-fees td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.course-fees thead th { background: var(--green-50); color: var(--green-700); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em; }
.course-fees .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.course-fees tbody tr:last-child td { border-bottom: 0; }
.course-fees tfoot th, .course-fees tfoot td { background: var(--cream-100); font-weight: var(--weight-bold); color: var(--color-heading); border-top: 2px solid var(--cream-300); border-bottom: 0; }
.course-fees__plus { display: block; font-weight: var(--weight-semibold); }
.course-fees__tag { margin-left: var(--space-2); padding: 0.1rem 0.5rem; border-radius: var(--radius-full); background: var(--gold-50); color: var(--gold-700); font-size: var(--text-xs); }
.course-fees__note { display: block; color: var(--color-text-faint); font-size: var(--text-xs); margin-top: 0.15rem; }
.course-fees__footnote { display: flex; gap: var(--space-2); align-items: flex-start; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); }
.course-fees__footnote .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 2px; color: var(--gold-500); }
.course-fees-empty { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--cream-100); border: 1px dashed var(--cream-300); }

/* FAQ grid (style 2) */
.course-faq-grid { display: grid; gap: var(--space-5); }
@media (min-width: 768px) { .course-faq-grid { grid-template-columns: 1fr 1fr; } }
.course-faq-grid dt { font-weight: var(--weight-semibold); color: var(--color-heading); }
.course-faq-grid dd { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

/* explore (accordion of categories) */
.course-explore { display: grid; gap: var(--space-3); }
.course-explore__group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.course-explore__group summary {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none;
  font-weight: var(--weight-semibold); color: var(--color-heading); background: var(--cream-50);
}
.course-explore__group[open] summary { background: var(--green-500); color: var(--n-0); }
.course-explore__group summary::-webkit-details-marker { display: none; }
.course-explore__group summary span { margin-left: auto; font-size: var(--text-xs); padding: 0.1rem 0.55rem; border-radius: var(--radius-full); background: rgba(13, 92, 61, 0.1); }
.course-explore__group[open] summary span { background: rgba(255, 255, 255, 0.18); }
.course-explore__group summary .icon { width: 1rem; height: 1rem; transition: transform var(--duration-fast) var(--ease-out); }
.course-explore__group[open] summary .icon { transform: rotate(180deg); }
.course-explore__group ul { display: grid; padding: var(--space-2) var(--space-5) var(--space-4); }
.course-explore__group li a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; color: var(--color-text); text-decoration: none; border-bottom: 1px dashed var(--color-border); }
.course-explore__group li:last-child a { border-bottom: 0; }
.course-explore__group li a:hover { color: var(--green-500); }
.course-explore__group li .icon { width: 1rem; height: 1rem; color: var(--gold-500); }

/* apply form */
.course-apply { border-top: 4px solid var(--gold-400); }
.course-apply__grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .course-apply__grid { grid-template-columns: 1fr 1fr; } .course-apply__grid .field--full { grid-column: 1 / -1; } }
.course-apply .form__consent a { color: var(--green-500); }
.course-closed { padding: var(--space-6); border-radius: var(--radius-xl); background: var(--cream-100); border: 1px solid var(--cream-300); }
.course-closed h2 { font-size: var(--text-xl); margin-bottom: var(--space-2); }


/* ---- Course cards (catalogue, category page, related, Course Group) ------- */
.course-grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 640px) { .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.course-grid--compact { gap: var(--space-4); }
@media (min-width: 1024px) { .course-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.course-card {
  display: flex; flex-direction: column;
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.course-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.course-card__media { position: relative; display: block; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--green-700), var(--green-500)); overflow: hidden; }
.course-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease-out); }
.course-card:hover .course-card__media img { transform: scale(1.05); }
.course-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--gold-300); }
.course-card__placeholder .icon { width: 3.5rem; height: 3.5rem; opacity: 0.85; }
.course-card__badge { position: absolute; top: var(--space-3); left: var(--space-3); padding: 0.25rem 0.7rem; border-radius: var(--radius-full); background: var(--n-0); color: var(--green-700); font-size: var(--text-xs); font-weight: var(--weight-bold); }
.course-card__badge--free { background: var(--gold-400); color: var(--green-900); }
.course-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); flex: 1; }
.course-card__category { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-600); }
.course-card__title { font-size: var(--text-xl); line-height: var(--leading-snug); }
.course-card__title a { color: var(--color-heading); text-decoration: none; }
.course-card__title a:hover { color: var(--green-500); }
.course-card__text { font-size: var(--text-sm); color: var(--color-text-muted); }
.course-card__facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.course-card__facts li { display: inline-flex; align-items: center; gap: 0.35rem; }
.course-card__facts .icon { width: 0.95rem; height: 0.95rem; color: var(--green-500); }
.course-card__foot { margin-top: auto; padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); border-top: 1px solid var(--color-border); }
.course-card__price { font-weight: var(--weight-bold); color: var(--green-600); }
.course-card__price del { margin-left: 0.35rem; font-weight: var(--weight-regular); font-size: var(--text-sm); color: var(--color-text-faint); }
.course-card__price-note { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-muted); }

/* ---- Course list section (Course Group / category page) ------------------- */
.course-list__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-8); }
.course-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.course-filter button {
  padding: 0.45rem 1rem; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--n-0);
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); cursor: pointer;
}
.course-filter button[aria-pressed="true"] { background: var(--green-500); border-color: var(--green-500); color: var(--n-0); }
.course-empty { padding: var(--space-8); text-align: center; border-radius: var(--radius-xl); background: var(--cream-100); color: var(--color-text-muted); }

/* ---- Thank-you ------------------------------------------------------------ */
.course-thanks { max-width: 40rem; margin-inline: auto; text-align: center; display: grid; gap: var(--space-4); justify-items: center; }
.course-thanks__icon { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--green-500); color: var(--n-0); box-shadow: 0 0 0 10px var(--green-50); }
.course-thanks__icon .icon { width: 2rem; height: 2rem; }
.course-thanks__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-2); }

/* course dates above the apply form (7 Oct 2026) */
.course-apply__dates { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--green-50); color: var(--green-700); font-size: var(--text-sm); }
.course-apply__dates .icon { width: 1.1rem; height: 1.1rem; color: var(--gold-500); }

/* ---- Fee structure popup (At a glance card, 7 Oct 2026) ------------------- */
.course-sticky .btn .icon { width: 1.1rem; height: 1.1rem; }
.fee-modal {
  position: fixed; inset: 0; margin: auto; height: fit-content; /* centred (the theme resets dialog margins) */
  width: min(44rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); padding: 0;
  border: 0; border-top: 4px solid var(--gold-400); border-radius: var(--radius-xl);
  background: var(--n-0); color: var(--color-text); box-shadow: var(--shadow-lg);
}
.fee-modal::backdrop { background: rgba(4, 31, 21, 0.6); backdrop-filter: blur(2px); }
.fee-modal__inner { position: relative; padding: clamp(1.25rem, 4vw, 2rem); overflow-y: auto; max-height: calc(100vh - 2rem); }
.fee-modal__title { font-size: var(--text-2xl); margin-bottom: var(--space-5); }
.fee-modal__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--n-0); color: var(--color-heading); cursor: pointer;
}
.fee-modal__close:hover { background: var(--green-50); }
.fee-modal__close .icon { width: 1.1rem; height: 1.1rem; }
.fee-modal__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

/* ---- Highlights hover cards (after the overview, 7 Oct 2026) -------------- */
.course-hl { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 600px) { .course-hl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .course-hl { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.course-hl__card {
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; align-content: start; gap: var(--space-4);
  padding: var(--space-8) var(--space-6);
  background: var(--n-0); border: 1px solid var(--color-border); border-bottom: 3px solid var(--gold-400);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.course-hl__card::before { /* green fill that rises on hover */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(150deg, var(--green-600), var(--green-800));
  transform: translateY(101%); transition: transform 0.45s var(--ease-out);
}
.course-hl__num { position: absolute; top: var(--space-4); right: var(--space-5); font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--cream-200); line-height: 1; transition: color 0.35s var(--ease-out); }
.course-hl__icon {
  display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: var(--radius-lg);
  background: var(--green-50); color: var(--green-500);
  transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.course-hl__icon .icon { width: 1.6rem; height: 1.6rem; }
.course-hl__text { font-weight: var(--weight-semibold); color: var(--color-heading); line-height: var(--leading-snug); transition: color 0.35s var(--ease-out); }
.course-hl__card:hover, .course-hl__card:focus-within { transform: translateY(-8px); box-shadow: var(--shadow-lg); border-color: transparent; border-bottom-color: var(--gold-400); }
.course-hl__card:hover::before, .course-hl__card:focus-within::before { transform: translateY(0); }
.course-hl__card:hover .course-hl__icon { background: var(--gold-400); color: var(--green-900); transform: rotate(-6deg) scale(1.06); }
.course-hl__card:hover .course-hl__text { color: var(--n-0); }
.course-hl__card:hover .course-hl__num { color: rgba(255, 255, 255, 0.18); }
@media (prefers-reduced-motion: reduce) {
  .course-hl__card, .course-hl__card::before, .course-hl__icon { transition: none; }
  .course-hl__card:hover { transform: none; }
}

/* ---- Overview hover card (7 Oct 2026) -------------------------------------- */
.course-ov-card {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), border-color 0.35s var(--ease-out);
}
.course-ov-card::before { /* gold bar on the left that thickens on hover */
  content: ""; position: absolute; left: -1px; top: var(--space-8); bottom: var(--space-8); width: 4px;
  border-radius: 0 4px 4px 0; background: var(--gold-400);
  transition: width 0.35s var(--ease-out), top 0.35s var(--ease-out), bottom 0.35s var(--ease-out);
}
.course-ov-card .course-block__icon { transition: background-color 0.35s var(--ease-out), color 0.35s var(--ease-out), transform 0.35s var(--ease-out); }
.course-ov-card:hover, .course-ov-card:focus-within { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--green-200); }
.course-ov-card:hover::before { width: 7px; top: var(--space-4); bottom: var(--space-4); }
.course-ov-card:hover .course-block__icon { background: var(--gold-400); color: var(--green-900); transform: rotate(-6deg) scale(1.06); }
@media (prefers-reduced-motion: reduce) {
  .course-ov-card, .course-ov-card::before, .course-ov-card .course-block__icon { transition: none; }
  .course-ov-card:hover { transform: none; }
}

/* ---- Multi-step application form (7 Oct 2026) ------------------------------ */
.apply-steps { display: grid; gap: var(--space-5); }
.apply-steps .form-panel__text { margin-bottom: 0; }
.apply-steps__progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); counter-reset: step; }
.apply-steps__progress li { position: relative; display: grid; justify-items: center; gap: var(--space-2); text-align: center; font-size: var(--text-xs); font-weight: var(--weight-semibold); color: var(--color-text-faint); }
.apply-steps__progress li::before { /* connector line */
  content: ""; position: absolute; top: 1.05rem; left: calc(-50% + 1.4rem); right: calc(50% + 1.4rem); height: 2px; background: var(--color-border);
}
.apply-steps__progress li:first-child::before { display: none; }
.apply-steps__num {
  position: relative; z-index: 1; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%;
  border: 2px solid var(--color-border); background: var(--n-0); color: var(--color-text-muted); font-size: var(--text-sm);
  transition: background-color 0.25s, border-color 0.25s, color 0.25s;
}
.apply-steps__progress li.is-current { color: var(--green-600); }
.apply-steps__progress li.is-current .apply-steps__num { border-color: var(--green-500); background: var(--green-500); color: var(--n-0); box-shadow: 0 0 0 4px var(--green-50); }
.apply-steps__progress li.is-done { color: var(--green-600); }
.apply-steps__progress li.is-done .apply-steps__num { border-color: var(--gold-400); background: var(--gold-400); color: var(--green-900); }
.apply-steps__progress li.is-done::before, .apply-steps__progress li.is-current::before { background: var(--gold-400); }
.apply-steps__progress li.is-reachable:not(.is-current) { cursor: pointer; }
@media (max-width: 479px) { .apply-steps__label { display: none; } }

.apply-step { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--space-4); }
.apply-steps.is-enhanced .apply-step:not(.is-active) { display: none; }
.apply-steps:not(.is-enhanced) .apply-steps__progress { display: none; } /* no JS: all steps stacked */
.apply-steps:not(.is-enhanced) .apply-step + .apply-step { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.apply-step__title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2); width: 100%; padding: 0; font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--color-heading); outline: none; }
.apply-step__title span { font-size: var(--text-xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: 0.08em; color: var(--gold-600); }
.apply-step__note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--green-50); color: var(--green-700); font-size: var(--text-sm); }
.apply-step__note .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: 2px; color: var(--gold-500); }
.apply-grid { display: grid; gap: var(--space-3) var(--space-4); }
@media (min-width: 640px) { .apply-grid { grid-template-columns: 1fr 1fr; } .apply-grid .field--full { grid-column: 1 / -1; } }
.apply-steps__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.apply-steps__nav [data-step-next], .apply-steps__nav [data-step-submit] { margin-left: auto; }
.apply-steps__nav .btn[hidden] { display: none; }

.apply-review { display: grid; gap: var(--space-3); }
.apply-review[hidden] { display: none; }
.apply-review__group { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--cream-50); padding: var(--space-4) var(--space-5); }
.apply-review__group header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-2); }
.apply-review__group h3 { font-size: var(--text-base); color: var(--green-600); }
.apply-review__edit { border: 0; background: none; padding: 0; font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--gold-600); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.apply-review dl { display: grid; gap: var(--space-1) var(--space-4); margin: 0; }
@media (min-width: 640px) { .apply-review dl { grid-template-columns: 1fr 1fr; } }
.apply-review dl div { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2); font-size: var(--text-sm); }
.apply-review dt { color: var(--color-text-muted); }
.apply-review dd { margin: 0; font-weight: var(--weight-semibold); color: var(--color-heading); overflow-wrap: anywhere; }

/* ---- Global section "Apply form" (7 Oct 2026) ------------------------------ */
.apply-section__lead { max-width: 42rem; margin-inline: auto; }
.apply-section__narrow { max-width: 52rem; margin-inline: auto; }
.apply-band { padding-bottom: clamp(3rem, 6vw, 5rem); background: var(--cream-50); }
.apply-band__top {
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(7rem, 12vw, 9rem);
  background:
    radial-gradient(50rem 26rem at 88% 0%, rgba(201, 161, 69, 0.22), transparent 60%),
    linear-gradient(120deg, var(--green-900) 0%, var(--green-700) 55%, var(--green-500) 100%);
  color: var(--n-0);
}
.apply-band__top .course-block__title { color: var(--n-0); }
.apply-band__top .course-eyebrow { color: var(--gold-300); }
.apply-band__top .lead { color: rgba(255, 255, 255, 0.86); max-width: 42rem; }
.apply-band__card { margin-top: calc(-1 * clamp(5rem, 9vw, 6.5rem)); position: relative; z-index: 1; }
.apply-band__card .form-panel { box-shadow: var(--shadow-lg); }

/* ---- Course coverflow slider — Course Group style 2 (Home, 7 Oct 2026) ------ */
.course-flow { overflow: hidden; background: linear-gradient(180deg, var(--n-0) 0%, var(--cream-50) 100%); }
.course-flow__head { text-align: center; display: grid; justify-items: center; }
.course-flow__title { font-size: var(--text-4xl); color: var(--green-600); }
.course-flow__rule { display: block; width: 4.5rem; height: 3px; margin-top: var(--space-4); border-radius: 3px; background: linear-gradient(90deg, var(--gold-400), var(--gold-600)); }
.course-flow__lead { margin-top: var(--space-4); max-width: 40rem; }
.course-flow__stage { margin-top: clamp(2rem, 5vw, 3.5rem); }
.course-flow__swiper { padding-block: var(--space-6) var(--space-10); overflow: visible; }
.course-flow__slide { width: clamp(16.5rem, 28vw, 23rem); height: auto; }
/* without Swiper: a plain horizontal scroll row */
.course-flow__stage:not(.is-ready) .swiper-wrapper { display: flex; gap: var(--space-5); overflow-x: auto; padding-inline: var(--gutter, 1rem); scroll-snap-type: x mandatory; }
.course-flow__stage:not(.is-ready) .course-flow__slide { flex: none; scroll-snap-align: center; }
.course-flow__stage:not(.is-ready) .course-flow__controls { display: none; }

.course-poster {
  position: relative; isolation: isolate; /* no overflow clip: the 3:4.2 shape is a minimum, long text makes the card taller */
  display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 3 / 4.2; border-radius: var(--radius-xl);
  /* shade layers over the course photo (--poster, set inline) over the brand green — one background, no stacking */
  background:
    linear-gradient(180deg, rgba(4, 31, 21, 0.55) 0%, rgba(4, 31, 21, 0) 26%),
    linear-gradient(0deg, rgba(4, 31, 21, 0.97) 0%, rgba(4, 31, 21, 0.86) 38%, rgba(4, 31, 21, 0.15) 70%, rgba(4, 31, 21, 0) 100%),
    var(--poster, none) center / cover no-repeat,
    linear-gradient(160deg, var(--green-500), var(--green-900));
  color: var(--n-0); box-shadow: 0 18px 40px -18px rgba(4, 31, 21, 0.55);
  transition: box-shadow 0.4s var(--ease-out), outline-color 0.4s var(--ease-out);
  outline: 3px solid transparent; outline-offset: -3px;
}
.course-poster__top { position: relative; z-index: 2; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); padding: var(--space-4); }
.course-poster__cat {
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: 0.04em; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px);
}
.course-poster__ribbon {
  padding: 0.3rem 0.75rem; border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-bold);
  background: var(--gold-400); color: var(--green-900); white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.5);
}
.course-poster__ribbon--muted { background: rgba(255, 255, 255, 0.85); color: var(--green-800); }
.course-poster__body { position: relative; z-index: 2; padding: var(--space-5) var(--space-5) var(--space-6); display: grid; gap: var(--space-2); }
.course-poster__kicker { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-300); }
.course-poster__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; color: var(--n-0); }
.course-poster__title a { color: inherit; text-decoration: none; }
.course-poster__title a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the text area of the card links to the course */
.course-poster__text { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.82); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.course-poster__facts { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); font-size: var(--text-xs); color: rgba(255, 255, 255, 0.9); }
.course-poster__facts li { display: inline-flex; align-items: center; gap: 0.3rem; }
.course-poster__facts .icon { width: 0.95rem; height: 0.95rem; color: var(--gold-300); }
.course-poster__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.18); }
.course-poster__price { font-weight: var(--weight-bold); color: var(--gold-300); }
.course-poster__actions { position: relative; z-index: 3; display: flex; gap: var(--space-2); } /* above the card-wide link */
.course-poster__view { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.45); color: var(--n-0); }
.course-poster__view:hover { background: var(--n-0); color: var(--green-800); }

/* active (front) card: gold frame, deeper shadow, slow zoom on the photo */
.swiper-slide-active .course-poster { outline-color: var(--gold-400); box-shadow: 0 30px 60px -22px rgba(4, 31, 21, 0.7); }
.course-flow__stage.is-ready .swiper-slide:not(.swiper-slide-active) .course-poster__actions { opacity: 0.85; }

.course-flow__controls { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-top: var(--space-2); }
.course-flow__btn {
  display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%;
  border: 1px solid var(--color-border); background: var(--n-0); color: var(--green-600); cursor: pointer;
  box-shadow: var(--shadow-sm); transition: background-color 0.2s, color 0.2s, transform 0.2s;
}
.course-flow__btn:hover { background: var(--green-500); color: var(--n-0); transform: scale(1.06); }
.course-flow__btn .icon { width: 1.2rem; height: 1.2rem; }
.course-flow__btn.swiper-button-disabled { opacity: 0.45; pointer-events: none; }
.course-flow__dots.swiper-pagination { position: static; width: auto; display: flex; gap: var(--space-2); }
.course-flow__dots .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; margin: 0 !important; background: var(--green-200); opacity: 1; transition: width 0.3s, background-color 0.3s; }
.course-flow__dots .swiper-pagination-bullet-active { width: 1.8rem; border-radius: 1rem; background: var(--gold-400); }
.course-flow__more { display: flex; justify-content: center; margin-top: var(--space-8); }
@media (prefers-reduced-motion: reduce) {
  .course-poster { transition: none; }
}

/* =============================================================================================================
   Course content sections (7 Oct 2026) — front/course/sections/{CourseSection, CourseContentBlock, CourseElement,
   CourseCta, CourseTextSection, CourseFeature, CourseFaqGroup}/style_1..5. Prefix cx-. Shared bits first.
   ============================================================================================================= */
.cx .course-block__title { font-size: clamp(1.6rem, 3vw, var(--text-3xl)); }
.cx-head .course-block__title { margin-bottom: var(--space-4); }
.cx-head--light .course-block__title { color: var(--n-0); }
.cx-head--light .course-eyebrow { color: var(--gold-300); }
.cx-gap-top { margin-top: var(--space-6); }
.cx-gap-bottom { margin-bottom: var(--space-6); }
.cx-left { text-align: left; margin-inline: 0; }
.cx-center { text-align: center; margin-inline: auto; }
.cx .cx-prose-light, .cx .cx-prose-light :is(p, li, h2, h3, h4, strong) { color: rgba(255, 255, 255, 0.9); }
.cx-prose-light a { color: var(--gold-300); }
.cx img { max-width: 100%; }
.cx-icon-img, .cx .cms-icon-img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
@media (min-width: 900px) {
  .cx-split--flip > :first-child { order: 2; }
  .cx-split--top { align-items: start; }
  .cx-aside-left { grid-template-columns: 22rem minmax(0, 1fr); }
}
.cx-sticky > * + * { margin-top: var(--space-4); }
@media (min-width: 900px) { .cx-sticky { position: sticky; top: calc(var(--header-height) + var(--space-8)); } }
.cx-sticky__img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }

/* photo pair: second photo as an inset on the corner of the first */
.cx-pair { padding-bottom: var(--space-10); }
.cx-pair__inset {
  position: absolute; right: -0.5rem; bottom: 0; width: 45% !important; aspect-ratio: 1 / 1 !important;
  border: 6px solid var(--n-0); border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-lg);
}

/* Sections · style 2 — floating card over a wide photo */
.cx-overlay { position: relative; display: grid; min-height: 26rem; align-items: center; border-radius: var(--radius-xl); overflow: hidden; padding: clamp(1rem, 4vw, 3rem); }
.cx-overlay__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-overlay__card {
  position: relative; max-width: 34rem; justify-self: end; padding: clamp(1.5rem, 3vw, 2.5rem);
  background: rgba(255, 255, 255, 0.96); border-top: 4px solid var(--gold-400); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
}
.cx-overlay--left .cx-overlay__card { justify-self: start; }
.cx-overlay--plain { min-height: 0; background: var(--green-50); }
.cx-overlay--plain .cx-overlay__card { justify-self: center; max-width: 48rem; }

/* Sections · style 3, Blocks · style 4 — centred text with a photo strip */
.cx-stack__text { max-width: 46rem; margin-inline: auto; text-align: center; }
.cx-stack__media { margin-top: var(--space-8); display: grid; gap: var(--space-5); }
.cx-stack__media img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-md); }
@media (min-width: 768px) {
  .cx-stack__media--two { grid-template-columns: 3fr 2fr; }
  .cx-stack__media--two img { aspect-ratio: 4 / 3; }
}

/* Sections · style 4, Blocks · style 3 — deep-green panel beside a photo */
.cx-panel { display: grid; border-radius: var(--radius-xl); overflow: hidden; background: linear-gradient(135deg, var(--green-800), var(--green-600)); box-shadow: var(--shadow-lg); }
.cx-panel__body { padding: clamp(1.75rem, 4vw, 3.5rem); color: rgba(255, 255, 255, 0.88); align-self: center; }
.cx-panel__media img { display: block; width: 100%; height: 100%; min-height: 16rem; object-fit: cover; }
@media (min-width: 900px) {
  .cx-panel { grid-template-columns: 1.1fr 0.9fr; }
  .cx-panel--flip .cx-panel__media { order: -1; }
  .cx-panel--flip { grid-template-columns: 0.9fr 1.1fr; }
  .cx-panel--solo { grid-template-columns: 1fr; }
}
.cx-numlist { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.cx-numlist li { display: flex; gap: var(--space-4); align-items: center; padding-bottom: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.14); color: var(--n-0); font-weight: var(--weight-semibold); }
.cx-numlist span { flex: none; font-size: var(--text-xl); color: var(--gold-300); font-weight: var(--weight-bold); }

/* Sections · style 5 — cream note + tilted collage */
.cx-note { padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--cream-50); border: 1px solid var(--cream-200); border-left: 4px solid var(--gold-400); border-radius: var(--radius-lg); }
.cx-collage { position: relative; display: grid; padding: var(--space-6) var(--space-4); }
.cx-collage img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); border: 6px solid var(--n-0); box-shadow: var(--shadow-lg); transform: rotate(-2.5deg); transition: transform 0.4s var(--ease-out); }
.cx-collage img + img { width: 62%; margin: -22% 0 0 auto; transform: rotate(3deg); }
.cx-collage:hover img { transform: rotate(0); }

/* Blocks · style 2 — chips + round photo */
.cx-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.cx-chips li { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45rem 0.95rem; border-radius: var(--radius-full); background: var(--green-50); border: 1px solid var(--green-100); color: var(--green-700); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.cx-chips .icon { width: 0.95rem; height: 0.95rem; color: var(--gold-500); }
.cx-round { position: relative; max-width: 28rem; justify-self: center; }
.cx-round > img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 50%; border: 8px solid var(--n-0); box-shadow: 0 0 0 2px var(--gold-300), var(--shadow-lg); }
.cx-round__badge { position: absolute; left: 4%; bottom: 8%; display: grid; place-items: center; width: 6rem; height: 6rem; border-radius: 50%; background: var(--n-0); box-shadow: var(--shadow-lg); overflow: hidden; }
.cx-round__badge img { width: 100%; height: 100%; object-fit: cover; }

/* Blocks · style 4 — check cards */
.cx-checkgrid { display: grid; gap: var(--space-4); margin-top: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cx-checkgrid li { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-weight: var(--weight-semibold); color: var(--color-heading); transition: border-color 0.25s, transform 0.25s; }
.cx-checkgrid li:hover { border-color: var(--gold-300); transform: translateY(-3px); }
.cx-checkgrid__icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--green-500); color: var(--n-0); }
.cx-checkgrid__icon .icon { width: 1rem; height: 1rem; }

/* Blocks · style 5, CTA · style 4 — one card with a photo side */
.cx-card { display: grid; background: var(--n-0); border: 1px solid var(--color-border); border-top: 4px solid var(--gold-400); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
.cx-card__media img { display: block; width: 100%; height: 100%; min-height: 15rem; object-fit: cover; }
.cx-card__body { padding: clamp(1.5rem, 3vw, 2.75rem); align-self: center; }
.cx-card__icon { width: 3.5rem; height: 3.5rem; object-fit: cover; border-radius: var(--radius-md); margin-bottom: var(--space-4); }
@media (min-width: 900px) {
  .cx-card { grid-template-columns: 0.85fr 1.15fr; }
  .cx-card--flip .cx-card__media { order: 2; }
  .cx-card--flip { grid-template-columns: 1.15fr 0.85fr; }
  .cx-card--solo { grid-template-columns: 1fr; }
}
.cx-ruled { margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.cx-ruled li { display: flex; gap: var(--space-3); align-items: flex-start; padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); color: var(--color-heading); }
.cx-ruled .icon { flex: none; width: 1rem; height: 1rem; margin-top: 0.3rem; color: var(--gold-500); }
.cx-ruled--num li { gap: var(--space-4); }
.cx-ruled--num p { color: var(--color-text-muted); margin-top: var(--space-1); }

/* Elements · style 2, Features · style 1 — description under the hover-card text */
.cx-hl-desc { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-muted); position: relative; transition: color 0.35s var(--ease-out); }
.course-hl__card:hover .cx-hl-desc, .course-hl__card:focus-within .cx-hl-desc { color: rgba(255, 255, 255, 0.82); }

/* Elements · style 3 — horizontal steps */
.cx-steps { display: grid; gap: var(--space-6); margin-top: var(--space-8); counter-reset: step; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); position: relative; }
.cx-steps li { position: relative; text-align: center; padding: 0 var(--space-2); }
.cx-steps__num { position: relative; z-index: 1; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--n-0); border: 2px solid var(--gold-400); color: var(--green-600); font-size: var(--text-xl); font-weight: var(--weight-bold); box-shadow: 0 0 0 6px var(--gold-50); transition: background-color 0.25s, color 0.25s; }
.cx-steps li:hover .cx-steps__num { background: var(--green-500); color: var(--n-0); }
.cx-steps h3 { font-size: var(--text-lg); }
.cx-steps p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
@media (min-width: 900px) {
  .cx-steps li:not(:last-child)::after { content: ""; position: absolute; top: 1.75rem; left: calc(50% + 2.25rem); right: calc(-50% + 2.25rem - var(--space-6)); border-top: 2px dashed var(--gold-300); }
}

/* Elements · style 4 — stacked cards */
.cx-stackcards { display: grid; gap: var(--space-4); }
.cx-stackcards li { display: flex; gap: var(--space-5); padding: var(--space-5) var(--space-6); background: var(--n-0); border: 1px solid var(--color-border); border-left: 4px solid var(--green-500); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: border-color 0.25s, transform 0.25s; }
.cx-stackcards li:hover { border-left-color: var(--gold-400); transform: translateX(4px); }
.cx-stackcards__num { flex: none; font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--gold-400); line-height: 1.1; }
.cx-stackcards h3 { font-size: var(--text-lg); }
.cx-stackcards p { margin-top: var(--space-1); color: var(--color-text-muted); }

/* Elements · style 5 — zig-zag timeline */
.cx-zigzag { position: relative; display: grid; gap: var(--space-5); margin-top: var(--space-8); padding-left: 1.75rem; }
.cx-zigzag::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0.5rem; width: 2px; background: linear-gradient(var(--gold-300), var(--green-300)); }
.cx-zigzag li { position: relative; }
.cx-zigzag li::before { content: ""; position: absolute; left: -1.6rem; top: 1.4rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--gold-400); box-shadow: 0 0 0 4px var(--gold-50); }
.cx-zigzag__card { padding: var(--space-5) var(--space-6); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.cx-zigzag__card small { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-600); }
.cx-zigzag__card h3 { font-size: var(--text-lg); margin-top: var(--space-1); }
.cx-zigzag__card p { margin-top: var(--space-2); color: var(--color-text-muted); }
@media (min-width: 900px) {
  .cx-zigzag { padding-left: 0; grid-template-columns: 1fr 1fr; column-gap: 4rem; }
  .cx-zigzag::before { left: 50%; transform: translateX(-1px); }
  .cx-zigzag li:nth-child(odd) { grid-column: 1; text-align: right; }
  .cx-zigzag li:nth-child(even) { grid-column: 2; margin-top: 3rem; }
  .cx-zigzag li:nth-child(odd)::before { left: auto; right: -2.5rem; }
  .cx-zigzag li:nth-child(even)::before { left: -2.5rem; }
}

/* CTA — buttons, style 1 band, style 2 card, style 3 photo, style 5 bar */
.cx-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.cx-cta-actions .icon { width: 1rem; height: 1rem; margin-left: var(--space-2); }
.cx-band { position: relative; display: grid; overflow: hidden; border-radius: var(--radius-xl); background: linear-gradient(120deg, var(--green-900), var(--green-600)); box-shadow: var(--shadow-lg); }
.cx-band::after { content: ""; position: absolute; width: 22rem; height: 22rem; right: -6rem; top: -8rem; border-radius: 50%; border: 40px solid rgba(201, 161, 69, 0.12); pointer-events: none; }
.cx-band__body { position: relative; z-index: 1; padding: clamp(1.75rem, 4vw, 3.5rem); }
.cx-band__lead { color: rgba(255, 255, 255, 0.85); font-size: var(--text-lg); max-width: 40rem; }
.cx-band__media img { display: block; width: 100%; height: 100%; min-height: 14rem; object-fit: cover; }
@media (min-width: 900px) {
  .cx-band--photo { grid-template-columns: 1.3fr 0.7fr; }
  .cx-band__media { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
}
.cx-ctacard { position: relative; max-width: 52rem; margin-inline: auto; padding: clamp(2rem, 5vw, 3.5rem); text-align: center; background: var(--cream-50); border: 2px solid var(--gold-300); border-radius: var(--radius-xl); box-shadow: 0 0 0 8px var(--cream-100); }
.cx-ctacard .cx-cta-actions { justify-content: center; }
.cx-ctacard__badge { width: 5.5rem; height: 5.5rem; margin: 0 auto var(--space-4); object-fit: cover; border-radius: 50%; border: 4px solid var(--n-0); box-shadow: var(--shadow-md); }
.cx-ctacard__lead { max-width: 42rem; margin-inline: auto; text-align: center; color: var(--color-text-muted); font-size: var(--text-lg); }
.cx-hero-cta { position: relative; overflow: hidden; display: grid; place-items: center; min-height: 22rem; padding: clamp(2rem, 6vw, 4.5rem) var(--space-5); border-radius: var(--radius-xl); background: var(--green-800); text-align: center; }
.cx-hero-cta__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cx-hero-cta::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 31, 21, 0.72), rgba(4, 31, 21, 0.88)); }
.cx-hero-cta__body { position: relative; z-index: 2; max-width: 44rem; }
.cx-hero-cta .cx-band__lead { margin-inline: auto; }
.cx-hero-cta .cx-cta-actions { justify-content: center; }
.cx-ctabar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5) var(--space-8); padding: var(--space-6) clamp(1.25rem, 3vw, 2.5rem); background: var(--n-0); border: 1px solid var(--color-border); border-left: 6px solid var(--gold-400); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.cx-ctabar__img { flex: none; width: 4.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--radius-md); }
.cx-ctabar__text { flex: 1 1 20rem; }
.cx-ctabar__text .course-eyebrow { margin-bottom: var(--space-1); }
.cx-ctabar h2 { font-size: var(--text-2xl); }
.cx-ctabar p:not(.course-eyebrow) { margin-top: var(--space-1); color: var(--color-text-muted); }
.cx-ctabar .cx-cta-actions { margin-top: 0; }

/* Text sections */
.cx-text--center { text-align: center; }
.cx-text--center .prose { max-width: 46rem; margin-inline: auto; }
.cx-text--right { text-align: right; }
.cx-text--right .course-block__title { justify-content: flex-end; }
.cx-text--right .course-eyebrow { flex-direction: row-reverse; }
.cx-twocol { display: grid; gap: var(--space-4) clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) { .cx-twocol { grid-template-columns: 0.8fr 1.2fr; } }
.cx-tiles { display: grid; gap: var(--space-4); margin-top: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.cx-tiles li { padding: var(--space-5); background: var(--n-0); border: 1px solid var(--color-border); border-top: 3px solid var(--green-500); border-radius: var(--radius-lg); }
.cx-tiles h3 { font-size: var(--text-lg); }
.cx-tiles p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.cx-quote { padding-left: var(--space-6); border-left: 4px solid var(--gold-400); font-size: var(--text-lg); }
.cx-facts { padding: var(--space-2) var(--space-6); background: var(--cream-50); border: 1px solid var(--cream-200); border-radius: var(--radius-lg); }
.cx-facts > div { display: grid; gap: var(--space-1); padding-block: var(--space-4); border-bottom: 1px dashed var(--cream-300); }
.cx-facts > div:last-child { border-bottom: 0; }
.cx-facts dt { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-600); }
.cx-facts dd { margin: 0; color: var(--color-heading); font-weight: var(--weight-medium); }

/* Features */
.cx-iconlist { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.cx-iconlist li { display: flex; gap: var(--space-4); align-items: flex-start; }
.cx-iconlist h3 { font-size: var(--text-lg); }
.cx-iconlist p { margin-top: var(--space-1); color: var(--color-text-muted); }
.cx-numcards { display: grid; gap: var(--space-5); margin-top: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.cx-numcards li { position: relative; padding: var(--space-6); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.cx-numcards li::after { content: ""; position: absolute; left: var(--space-6); right: var(--space-6); bottom: -1px; height: 3px; background: var(--gold-400); transform: scaleX(0); transform-origin: left; transition: transform 0.3s var(--ease-out); }
.cx-numcards li:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cx-numcards li:hover::after { transform: scaleX(1); }
.cx-numcards__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.cx-numcards__top b { font-size: var(--text-3xl); color: var(--cream-300); line-height: 1; }
.cx-numcards h3 { font-size: var(--text-lg); }
.cx-numcards p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.cx-darkgrid { position: relative; overflow: hidden; border-radius: var(--radius-xl); background: var(--green-800); }
.cx-darkgrid__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.16; }
.cx-darkgrid__inner { position: relative; padding: clamp(2rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.5rem); }
.cx-darkgrid__list { display: grid; gap: var(--space-4); margin-top: var(--space-8); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.cx-darkgrid__list li { padding: var(--space-5); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.05); transition: background-color 0.25s, border-color 0.25s; }
.cx-darkgrid__list li:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold-300); }
.cx-darkgrid__list h3 { color: var(--n-0); font-size: var(--text-lg); margin-top: var(--space-4); }
.cx-darkgrid__list p { color: rgba(255, 255, 255, 0.78); font-size: var(--text-sm); margin-top: var(--space-2); }
.cx-darkgrid__icon { display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--radius-md); background: var(--gold-400); color: var(--green-900); }
.cx-darkgrid__icon .icon { width: 1.4rem; height: 1.4rem; }
.cx-iconrow { display: grid; margin-top: var(--space-8); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); text-align: center; }
.cx-iconrow li { padding: var(--space-4) var(--space-5); }
.cx-iconrow li + li { border-left: 1px solid var(--color-border); }
@media (max-width: 639px) { .cx-iconrow li + li { border-left: 0; border-top: 1px solid var(--color-border); } }
.cx-iconrow__icon { display: grid; place-items: center; width: 4rem; height: 4rem; margin: 0 auto var(--space-4); border-radius: 50%; background: var(--green-50); color: var(--green-500); border: 1px solid var(--green-100); transition: background-color 0.25s, color 0.25s; }
.cx-iconrow li:hover .cx-iconrow__icon { background: var(--green-500); color: var(--n-0); }
.cx-iconrow__icon .icon { width: 1.6rem; height: 1.6rem; }
.cx-iconrow h3 { font-size: var(--text-lg); }
.cx-iconrow p { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }

/* FAQ groups */
.cx-faq-cols { display: grid; gap: var(--space-3) var(--space-5); align-items: start; }
@media (min-width: 900px) { .cx-faq-cols { grid-template-columns: 1fr 1fr; } }
.cx-qa { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }
.cx-qa li { padding: var(--space-6); background: var(--n-0); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.cx-qa h3 { display: flex; gap: var(--space-3); font-size: var(--text-lg); }
.cx-qa h3 span { flex: none; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: var(--radius-sm); background: var(--gold-400); color: var(--green-900); font-size: var(--text-sm); }
.cx-qa p { margin-top: var(--space-3); color: var(--color-text-muted); }
.cx-faqpanel { padding: clamp(1.75rem, 4vw, 3.5rem); border-radius: var(--radius-xl); background: linear-gradient(135deg, var(--green-800), var(--green-600)); }
.cx-faqpanel .faq { max-width: 52rem; margin-inline: auto; }
.cx-faq-num { flex: none; margin-right: var(--space-3); color: var(--gold-500); font-weight: var(--weight-bold); }

@media (prefers-reduced-motion: reduce) {
  .cx-collage img, .cx-checkgrid li, .cx-stackcards li, .cx-numcards li, .cx-numcards li::after { transition: none; }
}