/* ==========================================================================
   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(166, 138, 92, 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(166, 138, 92, 0.18); border: 1px solid rgba(210, 188, 146, 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(4, 101, 48, 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); }
/* 19 Oct 2026 — payment summary on the thank-you page and the "Complete your payment" page */
.course-pay-page__icon { background: var(--gold-500); box-shadow: 0 0 0 10px var(--gold-50); }
.course-pay-page__due { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: 100%; max-width: 26rem; padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg); background: linear-gradient(150deg, var(--green-800), var(--green-600)); color: var(--n-0); text-align: left; }
.course-pay-page__due span { font-weight: var(--weight-semibold); color: var(--gold-300); }
.course-pay-page__due small { display: block; font-weight: 400; color: rgba(255, 255, 255, .8); }
.course-pay-page__due strong { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1; }
.course-thanks .course-pay-page__plan { width: 100%; max-width: 26rem; margin: 0; padding: var(--space-3) var(--space-4); list-style: none; border-radius: var(--radius-md);
  background: var(--cream-50); border: 1px solid var(--cream-200); text-align: left; font-size: var(--text-sm); display: grid; gap: var(--space-1); }
.course-pay-page__plan .is-now { font-weight: var(--weight-semibold); color: var(--green-700); }
.course-pay-page__plan em { font-style: normal; color: var(--gold-600); }
.course-pay-page__note { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); }

/* 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(166, 138, 92, 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(166, 138, 92, 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; }
}

/* ---- Apply form, UKAIS flow (16 Oct 2026): study mode / payment method choice cards, total fee, instalment plan ---- */
.apply-choices { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); margin-top: var(--space-2); }
.apply-choice { position: relative; display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--n-0); cursor: pointer; font-weight: var(--weight-medium); color: var(--color-heading); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; }
.apply-choice input { width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--green-500); flex: none; }
.apply-choice:hover { border-color: var(--green-300); }
.apply-choice:has(input:checked) { border-color: var(--green-500); background: var(--green-50); box-shadow: 0 0 0 3px rgba(4, 101, 48, 0.12); }
.apply-choice:has(input:focus-visible) { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.apply-choice.is-disabled { opacity: 0.45; cursor: not-allowed; }
.field.is-invalid .apply-choice { border-color: var(--color-error); }
.apply-fee { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--green-50); border: 1px solid var(--green-100); }
.apply-fee__row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); color: var(--green-700); font-weight: var(--weight-semibold); }
.apply-fee__row strong { font-size: var(--text-2xl); color: var(--green-500); }
.apply-fee__meta { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.apply-plan { padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: var(--gold-50); border: 1px solid var(--gold-100); }
.apply-plan__title { margin: 0 0 var(--space-2); font-weight: var(--weight-semibold); color: var(--gold-700); }
.apply-plan__list { margin: 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text); }
.apply-plan [hidden], .apply-fee[hidden], .apply-plan[hidden] { display: none !important; }
/* 19 Oct 2026 — online payment: instalments need a plan · what is paid now + the Stripe card line */
.apply-plan-only { margin: calc(var(--space-2) * -1) 0 0; color: var(--gold-700); }
.apply-plan-only[hidden], .apply-pay[hidden] { display: none !important; }
.apply-plan .field__hint { margin-top: var(--space-2); }
.apply-pay { padding: var(--space-5); border-radius: var(--radius-lg); background: var(--n-0); border: 1.5px solid var(--green-200); box-shadow: 0 12px 28px -18px rgba(1, 36, 17, .35); }
.apply-pay.is-invalid { border-color: var(--color-error); }
.apply-pay__due { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) var(--space-4);
  padding: var(--space-4) var(--space-5); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: linear-gradient(150deg, var(--green-800), var(--green-600)); color: var(--n-0); }
.apply-pay__due b { display: block; font-size: var(--text-sm); letter-spacing: .04em; color: var(--gold-300); }
.apply-pay__due small { display: block; font-size: var(--text-sm); color: rgba(255, 255, 255, .8); }
.apply-pay__due strong { font-family: var(--font-heading); font-size: var(--text-3xl); line-height: 1; color: var(--n-0); white-space: nowrap; }
.apply-pay__card { min-height: 3rem; padding: .85rem 1rem; border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--n-0); }
.apply-pay__card.StripeElement--focus { border-color: var(--green-500); box-shadow: 0 0 0 3px rgba(4, 101, 48, 0.12); }
.apply-pay.is-invalid .apply-pay__card, .apply-pay__card.StripeElement--invalid { border-color: var(--color-error); }
.apply-pay__wait { font-size: var(--text-sm); color: var(--color-text-muted); }
.apply-pay .field__error:empty { display: none; }
.apply-pay .field__error { display: block; }
.apply-pay__secure { display: flex; gap: var(--space-2); margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.apply-pay__secure .icon { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--green-500); }

/* ---- Course page "Available intakes" (16 Oct 2026, theukais.com "Available Schedules") ---- */
.intake-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.intake-card { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-left: 4px solid var(--gold-400); border-radius: var(--radius-lg); background: var(--n-0); box-shadow: var(--shadow-sm); }
@media (min-width: 640px) { .intake-card { grid-template-columns: auto 1fr auto; padding: var(--space-4) var(--space-5); } }
.intake-card__date { display: grid; place-items: center; width: 4.25rem; height: 4.25rem; border-radius: var(--radius-md); background: var(--green-500); color: var(--n-0); line-height: 1; text-align: center; }
.intake-card__day { font-size: var(--text-2xl); font-weight: var(--weight-bold); }
.intake-card__month { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.intake-card__title { margin: 0; font-size: var(--text-lg); color: var(--color-heading); }
.intake-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.intake-card__meta span { display: inline-flex; align-items: center; gap: var(--space-1); }
.intake-card__meta .icon { width: 1rem; height: 1rem; color: var(--gold-500); }
.intake-card__plan { margin-top: var(--space-2); font-size: var(--text-sm); }
.intake-card__plan summary { cursor: pointer; color: var(--green-500); font-weight: var(--weight-semibold); }
.intake-card__plan ul { margin: var(--space-2) 0 0; padding-left: 1.1rem; display: grid; gap: var(--space-1); }
.intake-card__action { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
@media (min-width: 640px) { .intake-card__action { grid-column: auto; flex-direction: column; align-items: flex-end; } }
.intake-card__price { font-size: var(--text-xl); font-weight: var(--weight-bold); color: var(--green-500); }
.course-block#intakes { margin-bottom: var(--space-12); }

/* the steps bar sizes to its number of steps (it was a fixed five-column grid for the old 5-step form) */
.apply-steps__progress { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }

/* "Why join this course" cards (Course element style 2, 16 Oct 2026): three points → three equal columns, text left-aligned
   and comfortable to read (the points are paragraphs, not one-liners). Other card counts keep the 2 / 4 grid. */
@media (min-width: 900px) { .cx .course-hl:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cx .course-hl .cx-hl-desc { text-align: left; font-size: var(--text-base); line-height: var(--leading-body); }
/* centred in the form (client 16 Oct 2026): a compact bar in the middle instead of starting at the left edge */
.apply-steps__progress { width: 100%; max-width: 30rem; margin-inline: auto; justify-content: center; }

/* =====================================================================================================================
   Section rhythm (19 Oct 2026, client: "from Course Assessment to FAQ all sections are plain, no image, half empty -
   use different designs so the viewer keeps scrolling"). New styles: content blocks 6 (photo), 7 (green band),
   8 (certificate), Curriculum 3, Fees 2, FAQ 3. Each sets its band's background, so neighbours never share a colour:
   white photo, deep-green band, cream certificate, white curriculum, cream fees, pale-green FAQ.
   ===================================================================================================================== */
.course-sec:has(> .container > .cxr-photo), .course-sec:has(> .container > .cxr-curr) { background: var(--n-0); border-block-color: transparent; }
/* photo on the right (R-2-L) = cream band, so a second photo block never sits white-on-white beside the curriculum */
.course-sec:has(> .container > .cxr-photo .cxr-photo__grid--flip) { background: var(--cream-50); border-block: 1px solid var(--cream-200); }
.course-sec:has(> .container > .cxr-band) {
  position: relative; overflow: hidden; border: 0;
  background: radial-gradient(48rem 26rem at 100% 0%, rgba(166, 138, 92, 0.22), transparent 60%),
              linear-gradient(135deg, var(--green-900) 0%, var(--green-700) 60%, var(--green-600) 100%);
}
.course-sec:has(> .container > .cxr-cert) {
  background: var(--cream-100) radial-gradient(circle at 1px 1px, rgba(111, 87, 51, 0.12) 1px, transparent 0) 0 0 / 22px 22px;
  border-block: 1px solid var(--cream-300);
}
.course-sec:has(> .container > .cxr-fees) { background: var(--cream-50); border-block: 1px solid var(--cream-200); }
.course-sec:has(> .container > .cxr-faq) { background: var(--green-50); border-block: 1px solid var(--green-100); }
.cxr .course-block__title { font-size: clamp(1.6rem, 3vw, var(--text-3xl)); }

/* ---- content block style 6: framed photo + badge + check cards ---- */
.cxr-photo__grid { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.cxr-photo__media { position: relative; margin: 0 1.25rem 1.25rem 0; }
.cxr-photo__media::before { content: ""; position: absolute; inset: 1.25rem -1.25rem -1.25rem 1.25rem; border: 2px solid var(--gold-300); border-radius: var(--radius-xl); z-index: 0; }
.cxr-photo__media img, .cxr-photo__pattern { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.cxr-photo__pattern { display: flex; align-items: flex-end; padding: 1.5rem; color: var(--n-0); font-family: var(--font-heading); font-weight: 700; font-size: 1.5rem;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .15) 1px, transparent 0) 0 0 / 18px 18px, linear-gradient(135deg, var(--green-700), var(--green-500)); }
.cxr-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.cxr-checks li { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border: 1px solid var(--cream-300); border-radius: var(--radius-md);
  background: var(--n-0); font-weight: 600; color: var(--green-800); transition: border-color .2s, box-shadow .2s, transform .2s; }
.cxr-checks li:hover { border-color: var(--green-200); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cxr-checks__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--green-50); color: var(--green-600); }
.cxr-checks__ic .icon { width: .95rem; height: .95rem; }
@media (min-width: 900px) {
  .cxr-photo__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .cxr-photo__grid--flip .cxr-photo__media { order: 2; margin: 0 0 1.25rem 1.25rem; }
  .cxr-photo__grid--flip .cxr-photo__media::before { inset: 1.25rem 1.25rem -1.25rem -1.25rem; }
}

/* ---- content block style 7 (redone 19 Oct): green band over a photo, centred head, icon "pillars" ---- */
.cxr-band__head, .cxr-pillars { position: relative; z-index: 1; } /* above the star lattice, which fills the whole band */
.course-sec:has(> .container > .cxr-band)::after { /* eight-point star lattice, very faint */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .07;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23e9d9b5' stroke-width='1'%3E%3Crect x='20' y='20' width='24' height='24'/%3E%3Crect x='20' y='20' width='24' height='24' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 64px 64px;
}
.cxr-band { position: static; }

.cxr-band__head { max-width: 46rem; margin: 0 auto; text-align: center; }
.cxr-band__head .cx-head { justify-items: center; }
.cxr-band__head .course-eyebrow { justify-content: center; }
.cxr-band .course-eyebrow { color: var(--gold-300); }
.cxr-band .course-eyebrow::before { background: var(--gold-300); }
.cxr-band .course-block__title { color: var(--n-0); }
.cxr-band .cx-prose-light, .cxr-band .cx-prose-light :is(p, li, strong) { color: rgba(255, 255, 255, .86); font-size: 1.05rem; }
.cxr-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; list-style: none; }
.cxr-pillar { display: flex; flex-direction: column; align-items: center; gap: .55rem; padding: .5rem 1.5rem; text-align: center; }
.cxr-pillar + .cxr-pillar { border-left: 1px solid rgba(233, 217, 181, .22); }
.cxr-pillar__ic { position: relative; display: grid; place-items: center; width: 4.6rem; height: 4.6rem; margin-bottom: .6rem; color: var(--gold-300); }
.cxr-pillar__ic::before, .cxr-pillar__ic::after { content: ""; position: absolute; inset: .55rem; border: 1px solid rgba(233, 217, 181, .55); border-radius: 4px;
  background: rgba(255, 255, 255, .04); transition: transform .6s var(--ease-out, ease); }
.cxr-pillar__ic::after { transform: rotate(45deg); }
.cxr-pillar:hover .cxr-pillar__ic::before { transform: rotate(45deg); }
.cxr-pillar:hover .cxr-pillar__ic::after { transform: rotate(90deg); }
.cxr-pillar__ic .icon { position: relative; z-index: 1; width: 1.6rem; height: 1.6rem; }
.cxr-pillar__n { font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: var(--gold-300); }
.cxr-pillar__t { margin: 0; max-width: 15rem; font-family: var(--font-body, inherit); font-size: 1.05rem; font-weight: 600; line-height: 1.4; color: var(--n-0); }
@media (max-width: 899.98px) {
  .cxr-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2rem; }
  .cxr-pillar:nth-child(odd) { border-left: 0; }
}

/* ---- content block style 8: certificate ---- */
.cxr-cert__grid { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.cxr-awards { display: grid; gap: .6rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.cxr-awards li { display: flex; align-items: center; gap: .8rem; font-weight: 600; color: var(--green-800); }
.cxr-awards__ic { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--gold-500); color: var(--n-0); box-shadow: 0 0 0 4px var(--gold-100); }
.cxr-awards__ic .icon { width: 1rem; height: 1rem; }
.cxr-certificate { margin: 0; padding: .9rem; background: var(--n-0); border-radius: var(--radius-md); box-shadow: 0 30px 60px -20px rgba(42, 32, 19, .35), var(--shadow-md); transform: rotate(-1.5deg); transition: transform .4s ease; }
.cxr-certificate:hover { transform: rotate(0deg) scale(1.01); }
.cxr-certificate__frame { position: relative; padding: clamp(1.5rem, 4vw, 2.6rem) clamp(1.25rem, 4vw, 2.5rem) 1.6rem; text-align: center;
  border: 3px double var(--gold-400); outline: 1px solid var(--gold-200); outline-offset: -10px;
  background: radial-gradient(60% 50% at 50% 40%, var(--gold-50), var(--n-0)); }
.cxr-certificate__kicker { margin: 0; font-size: .78rem; letter-spacing: .28em; text-transform: uppercase; color: var(--gold-600); font-weight: 700; }
.cxr-certificate__lead { margin: 1rem 0 .4rem; font-size: .88rem; color: var(--color-text-muted); font-style: italic; }
.cxr-certificate__course { margin: 0; font-family: var(--font-heading); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 800; color: var(--green-700); line-height: 1.15; }
.cxr-certificate__by { margin: .6rem 0 0; font-size: .85rem; font-weight: 600; color: var(--gold-600); }
.cxr-certificate__foot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 1rem; margin-top: 1.8rem; }
.cxr-certificate__sign { padding-top: .4rem; border-top: 1px solid var(--cream-300); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-text-muted); }
.cxr-certificate__seal { display: inline-flex; align-items: center; justify-content: center; width: 3.6rem; height: 3.6rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-300), var(--gold-500)); color: var(--n-0); box-shadow: 0 0 0 4px var(--n-0), 0 0 0 6px var(--gold-300); }
.cxr-certificate__seal .icon { width: 1.6rem; height: 1.6rem; }
@media (min-width: 900px) {
  .cxr-cert__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cxr-cert__grid--flip .cxr-cert__main { order: 2; }
}

/* ---- curriculum style 3: sticky summary card + numbered timeline ---- */
.cxr-curr { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.cxr-curr__card { overflow: hidden; border-radius: var(--radius-xl); background: var(--green-800); color: var(--n-0); box-shadow: var(--shadow-lg); }
.cxr-curr__photo { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } /* short, so a 2-module timeline is not dwarfed */
.cxr-curr__body { padding: 1.25rem 1.5rem 1.5rem; }
.cxr-curr .cxr-curr__body .course-eyebrow { color: var(--gold-300); }
.cxr-curr .cxr-curr__body .course-eyebrow::before { background: var(--gold-300); }
.cxr-curr__card .course-block__title { color: var(--n-0); margin-bottom: 1rem; }
.cxr-curr__facts { display: grid; gap: .55rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.cxr-curr__facts li { display: flex; align-items: center; gap: .6rem; font-weight: 600; color: rgba(255, 255, 255, .9); }
.cxr-curr__facts .icon { width: 1.05rem; height: 1.05rem; color: var(--gold-300); }
.cxr-curr__cta { width: 100%; justify-content: center; background: var(--gold-500); border-color: var(--gold-500); }
.cxr-curr__cta:hover { background: var(--gold-600); border-color: var(--gold-600); }
.cxr-curr__cta .icon { margin-left: .4rem; }
.cxr-steps { position: relative; display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.cxr-steps::before { content: ""; position: absolute; left: 1.45rem; top: 1rem; bottom: 1rem; width: 2px; background: linear-gradient(var(--gold-300), var(--green-200)); }
.cxr-step { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: start; }
.cxr-step__n { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%;
  background: var(--n-0); border: 2px solid var(--gold-400); font-family: var(--font-heading); font-weight: 800; color: var(--green-700); }
.cxr-step__card { border: 1px solid var(--cream-300); border-radius: var(--radius-lg); background: var(--n-0); transition: box-shadow .2s, border-color .2s; }
.cxr-step__card[open] { border-color: var(--green-200); box-shadow: var(--shadow-md); }
.cxr-step__card summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem 1rem; padding: 1rem 1.2rem; cursor: pointer; list-style: none; }
.cxr-step__card summary::-webkit-details-marker { display: none; }
.cxr-step__kicker { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-600); }
.cxr-step__title { grid-column: 1; font-weight: 700; font-size: 1.1rem; color: var(--green-800); }
.cxr-step__chev { grid-column: 2; grid-row: 1 / span 2; align-self: center; width: 1.1rem; height: 1.1rem; color: var(--green-600); transition: transform .2s; }
.cxr-step__card[open] .cxr-step__chev { transform: rotate(180deg); }
.cxr-step__body { padding: 0 1.2rem 1.2rem; color: var(--color-text-muted); }
@media (min-width: 900px) {
  .cxr-curr { grid-template-columns: 22rem minmax(0, 1fr); }
  .cxr-curr__card { position: sticky; top: calc(var(--header-height, 5rem) + 1.5rem); }
}

/* ---- fees style 2 (redone 19 Oct): one ticket — green stub (price, payment, Apply) + white body ---- */
.cxr-fees__head { margin-bottom: clamp(1.75rem, 4vw, 2.5rem); text-align: center; }
.cxr-ticket { --notch: 1.1rem; position: relative; display: grid; max-width: 64rem; margin-inline: auto; border-radius: var(--radius-xl);
  background: var(--n-0); box-shadow: 0 30px 60px -28px rgba(1, 36, 17, .35), var(--shadow-md); }
.cxr-ticket__stub { position: relative; display: flex; flex-direction: column; padding: clamp(1.75rem, 4vw, 2.5rem); color: var(--n-0);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: radial-gradient(20rem 14rem at 0% 0%, rgba(210, 188, 146, .25), transparent 60%),
              url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.06'%3E%3Crect x='15' y='15' width='18' height='18'/%3E%3Crect x='15' y='15' width='18' height='18' transform='rotate(45 24 24)'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 48px 48px,
              linear-gradient(160deg, var(--green-800), var(--green-600)); }
.cxr-ticket__label { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-300); }
.cxr-ticket__amount { margin: .5rem 0 0; font-family: var(--font-heading); font-size: clamp(3rem, 6vw, 4rem); font-weight: 800; line-height: 1; color: var(--n-0); }
.cxr-ticket__was { margin: .4rem 0 0; color: rgba(255, 255, 255, .7); }
.cxr-ticket__sub { margin: .6rem 0 0; color: rgba(255, 255, 255, .85); font-weight: 500; }
.cxr-ticket__pay { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.cxr-ticket__pay li { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border-radius: var(--radius-full);
  border: 1px solid rgba(233, 217, 181, .35); background: rgba(255, 255, 255, .08); font-size: .85rem; font-weight: 600; }
.cxr-ticket__pay .icon { width: .85rem; height: .85rem; color: var(--gold-300); }
.cxr-ticket__cta { width: 100%; justify-content: center; margin-top: auto; }
.cxr-ticket__pay + .cxr-ticket__cta, .cxr-ticket__sub + .cxr-ticket__cta { margin-top: 2rem; }
.cxr-ticket__cta .icon { margin-left: .4rem; }
.cxr-ticket__body { display: grid; align-content: start; gap: .9rem; padding: clamp(1.5rem, 4vw, 2.5rem); }
.cxr-ticket__h { display: flex; align-items: center; gap: .75rem; margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600); }
.cxr-ticket__h::after { content: ""; flex: 1; height: 1px; background: var(--cream-300); }
.cxr-ticket__h:not(:first-child) { margin-top: .9rem; }
.cxr-incl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.cxr-incl li { display: flex; align-items: center; gap: .8rem; padding: .8rem .9rem; border-radius: var(--radius-md); background: var(--cream-50); border: 1px solid var(--cream-200); }
.cxr-incl__ic { flex: none; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--radius-md); background: var(--green-700); color: var(--gold-300); }
.cxr-incl__ic .icon { width: 1.1rem; height: 1.1rem; }
.cxr-incl small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.cxr-incl b { display: block; color: var(--green-800); font-weight: 700; line-height: 1.3; }
.cxr-feelist__row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .7rem 0; border-bottom: 1px dashed var(--cream-300); }
.cxr-feelist__row:last-child { border-bottom: 0; }
.cxr-feelist__row b { color: var(--green-800); }
.cxr-feelist__row small { display: block; color: var(--color-text-muted); }
.cxr-feelist__row strong { font-size: 1.1rem; color: var(--green-700); white-space: nowrap; }
.cxr-feelist__tag { margin-left: .5rem; padding: .1rem .5rem; border-radius: var(--radius-full); background: var(--gold-50); color: var(--gold-600); font-size: .72rem; font-style: normal; font-weight: 700; }
.cxr-intake { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 1rem; align-items: center; }
.cxr-intake + .cxr-intake { padding-top: .9rem; border-top: 1px dashed var(--cream-300); }
.cxr-intake__date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 3.8rem; height: 3.8rem; border-radius: var(--radius-md);
  background: var(--gold-50); border: 1px solid var(--gold-200); color: var(--green-700); text-align: center; }
.cxr-intake__date b { font-family: var(--font-heading); font-size: 1.35rem; line-height: 1; }
.cxr-intake__date span { font-size: .66rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--gold-700); }
.cxr-intake__title { margin: 0; font-weight: 700; color: var(--green-800); }
.cxr-intake__meta { margin: .15rem 0 0; font-size: .86rem; color: var(--color-text-muted); }
/* the intake's instalment plan, written out (19 Oct) — also the fee popup's plan (.course-fees__plan) */
.cxr-intake__plan { grid-column: 1 / -1; } /* full width under the intake row */
.cxr-intake__plan, .course-fees__plan { margin-top: .1rem; padding: .7rem .9rem; border-radius: var(--radius-md); background: var(--cream-50); border: 1px solid var(--cream-200); }
.cxr-intake__plan-title, .course-fees__plan-title { margin: 0 0 .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-600); }
.cxr-intake__plan ol, .course-fees__plan ol { display: grid; gap: .25rem; margin: 0; padding-left: 1.2rem; font-size: .88rem; color: var(--color-text); }
.cxr-intake__plan li::marker, .course-fees__plan li::marker { color: var(--gold-600); font-weight: 700; }
.course-fees__plan { margin-top: var(--space-4, 1rem); }
.cxr-fees__none { display: flex; gap: .7rem; margin: 0; padding: .9rem 1rem; border-radius: var(--radius-md); background: var(--gold-50); border: 1px solid var(--gold-200); color: var(--color-text); font-size: .95rem; }
.cxr-fees__none .icon { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .2rem; color: var(--gold-600); }
.cxr-ticket__note { display: flex; gap: .55rem; margin: .4rem 0 0; font-size: .86rem; color: var(--color-text-muted); }
.cxr-ticket__note .icon { flex: none; width: 1rem; height: 1rem; margin-top: .15rem; color: var(--gold-500); }
@media (min-width: 900px) {
  .cxr-ticket { grid-template-columns: 21rem minmax(0, 1fr); }
  .cxr-ticket__stub { border-radius: var(--radius-xl) 0 0 var(--radius-xl); }
  /* perforation between stub and body: a dashed line with a half-circle notch top and bottom */
  .cxr-ticket__body { position: relative; }
  .cxr-ticket__body::before { content: ""; position: absolute; left: 0; top: var(--notch); bottom: var(--notch); border-left: 2px dashed var(--cream-300); }
  .cxr-ticket::before, .cxr-ticket::after { content: ""; position: absolute; left: calc(21rem - var(--notch)); width: calc(var(--notch) * 2); height: calc(var(--notch) * 2);
    border-radius: 50%; background: var(--cream-50); z-index: 1; }
  .cxr-ticket::before { top: calc(var(--notch) * -1); }
  .cxr-ticket::after { bottom: calc(var(--notch) * -1); }
}
@media (max-width: 599.98px) {
  .cxr-incl { grid-template-columns: minmax(0, 1fr); }
  .cxr-intake { grid-template-columns: auto minmax(0, 1fr); }
  .cxr-intake__btn { grid-column: 1 / -1; justify-self: start; }
}

/* ---- FAQ style 3 (redone 19 Oct): questions panel + full-height photo with the contact panel on it ---- */
.cxr-faq { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); }
.cxr-faq__lead { margin: -0.4rem 0 1.5rem; color: var(--color-text-muted); }
.cxr-acc { border-radius: var(--radius-xl); background: var(--n-0); border: 1px solid var(--green-100); box-shadow: 0 24px 48px -30px rgba(1, 36, 17, .3); overflow: hidden; }
.cxr-q + .cxr-q { border-top: 1px solid var(--cream-200); }
.cxr-q { position: relative; transition: background .2s; }
.cxr-q[open] { background: linear-gradient(90deg, var(--green-50), var(--n-0) 60%); }
.cxr-q[open]::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--gold-400); }
.cxr-q summary { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .9rem; align-items: center; padding: 1.15rem 1.4rem; cursor: pointer; list-style: none; }
.cxr-q summary::-webkit-details-marker { display: none; }
.cxr-q summary:hover .cxr-q__t { color: var(--green-600); }
.cxr-q__n { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--gold-500); }
.cxr-q__t { font-weight: 700; font-size: 1.02rem; color: var(--green-800); transition: color .2s; }
.cxr-q__ic { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--green-200); color: var(--green-600); transition: transform .25s, background .2s, color .2s, border-color .2s; }
.cxr-q__ic .icon { width: .9rem; height: .9rem; }
.cxr-q[open] .cxr-q__ic { transform: rotate(45deg); background: var(--green-600); border-color: var(--green-600); color: var(--n-0); }
.cxr-q__a { padding: 0 1.4rem 1.25rem calc(1.4rem + 2.2rem + .9rem); color: var(--color-text-muted); line-height: var(--leading-body, 1.65); }
.cxr-faq__side { display: flex; flex-direction: column; gap: 1rem; }
.cxr-faq__photo { flex: 1 1 0; display: block; width: 100%; min-height: 15rem; object-fit: cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); }
.cxr-faq__contact { flex: none; padding: clamp(1.4rem, 3vw, 1.75rem); border-radius: var(--radius-xl); color: var(--n-0); box-shadow: var(--shadow-md);
  background: radial-gradient(18rem 10rem at 100% 0%, rgba(210, 188, 146, .25), transparent 60%), linear-gradient(150deg, var(--green-800), var(--green-600)); }
.cxr-faq__contact-title { margin: 0 0 .35rem; font-family: var(--font-heading); font-size: 1.35rem; font-weight: 800; color: var(--n-0); }
.cxr-faq__contact-text { margin: 0 0 1rem; color: rgba(255, 255, 255, .85); }
.cxr-faq__contact-list { display: grid; gap: .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; }
.cxr-faq__contact-list li { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.cxr-faq__contact-list .icon { flex: none; width: 2rem; height: 2rem; padding: .5rem; border-radius: 50%; background: rgba(255, 255, 255, .12); color: var(--gold-300); }
.cxr-faq__contact-list a { color: var(--n-0); overflow-wrap: anywhere; text-decoration: none; }
.cxr-faq__contact-list a:hover { color: var(--gold-300); }
.cxr-faq__contact .btn .icon { margin-left: .4rem; }
@media (min-width: 900px) {
  .cxr-faq { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); align-items: stretch; }
}
@media (max-width: 599.98px) {
  .cxr-q summary { grid-template-columns: 1.8rem minmax(0, 1fr) auto; padding: 1rem 1.1rem; gap: .7rem; }
  .cxr-q__a { padding: 0 1.1rem 1.1rem 1.1rem; }
  .cxr-faq__photo { flex: none; min-height: 0; aspect-ratio: 16 / 10; }
}

@media (max-width: 599.98px) {
  .cxr-checks { grid-template-columns: minmax(0, 1fr); }
  .cxr-photo__media { margin: 0 .9rem .9rem 0; }
  .cxr-photo__media::before { inset: .9rem -.9rem -.9rem .9rem; }
  .cxr-pillars { grid-template-columns: minmax(0, 1fr); row-gap: 1.25rem; }
  .cxr-pillar, .cxr-pillar + .cxr-pillar { flex-direction: row; gap: 1rem; padding: 0; border-left: 0; text-align: left; }
  .cxr-pillar__ic { flex: none; width: 3.6rem; height: 3.6rem; margin: 0; }
  .cxr-pillar__n { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cxr-checks li, .cxr-pillar__ic::before, .cxr-pillar__ic::after, .cxr-certificate, .cxr-step__chev, .cxr-q__ic { transition: none; }
  .cxr-certificate { transform: none; }
}

/* 19 Oct 2026 — course content filled to even counts: 6 highlights → 3 × 2 (not 4 + 2); "What you will learn"
   tiles in 3 columns (auto-fill made 5 + 1 out of 6). */
@media (min-width: 1024px) {
  .course-hl:has(> li:nth-child(6):last-child), .course-hl:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 600px) { .course-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .course-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }