/* Enrolment page (public layout, ivory body) */
.enrol { padding-block: calc(var(--header-h) + var(--space-8)) var(--section-pad); }
.enrol:focus { outline: none; }
.enrol__head { display: grid; gap: var(--space-4); margin-bottom: var(--space-8); }
.enrol__title { max-width: 16ch; }
.enrol__head .lead { max-width: 52ch; }

.enrol__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); align-items: start; }
.enrol__panels { grid-column: 1 / span 8; min-width: 0; }
.enrol__summary { grid-column: 9 / -1; position: sticky; top: calc(var(--header-h) + var(--space-5)); }

/* Step indicator: a gold rule fills across each step */
.steps-wrap { grid-column: 1 / -1; display: grid; gap: var(--space-3); }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
html:not(.js) .steps-wrap { display: none; }
.steps__item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-1) var(--space-3); padding-top: var(--space-4); color: var(--text-muted); }
.steps__item::before, .steps__item::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; border-radius: var(--radius-pill); }
.steps__item::before { background: var(--line); }
.steps__item::after { background: var(--gold-500); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-slow) var(--ease-out-expo); }
.steps__item[aria-current='step']::after, .steps__item.is-done::after { transform: scaleX(1); }
.steps__item[aria-current='step'] { color: var(--text); font-weight: 500; }
.steps__num { color: var(--text-muted); }
.steps__item[aria-current='step'] .steps__num, .steps__item.is-done .steps__num { color: var(--gold-700); }
.steps__label { font-size: var(--fs-small); }
.steps__check { display: none; width: 16px; height: 16px; color: var(--gold-600); }
.steps__item.is-done .steps__check { display: block; }
.steps__done { display: none; }
.steps__item.is-done .steps__done { display: inline; }

/* Steps */
.enrol-step { display: grid; gap: var(--space-6); }
html:not(.js) .enrol-step + .enrol-step { margin-top: var(--space-9); }
.enrol-step__title { font-size: var(--fs-h2); }
.enrol-step__intro { max-width: 60ch; color: var(--text-muted); }
.enrol-step__nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* Plan card: echoes the landing pricing card */
.plan-card {
  --focus-ring: 2px solid var(--gold-500);
  position: relative; display: grid; gap: var(--space-5);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  background: var(--teal-950); color: var(--on-dark);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  outline: 1px solid color-mix(in srgb, var(--gold-500) 45%, transparent); outline-offset: -12px;
}
.plan-card .eyebrow { color: var(--gold-500); }
.plan-card__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.plan-card__amount { font: 400 clamp(3rem, 2.5rem + 2.5vw, 4.5rem) / 1 var(--font-display); }
.plan-card__price .mono { color: var(--on-dark-muted); }
.plan-card__list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.plan-card__list li { display: flex; align-items: baseline; gap: var(--space-3); }
.plan-card__list .icon { width: 18px; height: 18px; flex: none; color: var(--gold-500); transform: translateY(3px); }

/* Bank details */
.bank { display: grid; gap: var(--space-5); padding: clamp(var(--space-5), 3vw, var(--space-6)); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.bank__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.bank__reference .facts__code { font-size: 1.125rem; color: var(--gold-700); }

/* Order summary */
.summary-card { display: grid; gap: var(--space-5); padding: var(--space-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); }
.summary-card__note { font-size: var(--fs-small); color: var(--text-muted); }

/* Upload form */
.enrol-form__pair { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 600px) { .enrol-form__pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

@media (max-width: 1023px) {
  .enrol__panels, .enrol__summary { grid-column: 1 / -1; }
  .enrol__summary { position: static; }
}
@media (max-width: 479px) {
  .steps__label { font-size: var(--fs-mono); }
}

/* Enrolment status */
.status { display: grid; gap: var(--space-7); }
.status__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-7) var(--gutter); align-items: start; }
.status__copy { grid-column: 1 / span 7; display: grid; gap: var(--space-5); justify-items: start; }
.status__copy h1 { max-width: 14ch; }
.status__copy .lead { max-width: 48ch; }
.status__grid > .timeline-wrap { grid-column: 9 / -1; display: grid; gap: var(--space-3); }
.status__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
.status__facts { max-width: 640px; }
.status__view[hidden] { display: none; }
.status__view { display: grid; gap: var(--space-7); }

/* Approved: star with two rings that burst once */
.status__mark { position: relative; display: grid; place-items: center; width: 88px; aspect-ratio: 1; }
.status__star { width: 56px; height: 56px; color: var(--gold-500); }
.status__ring { position: absolute; inset: 0; border: 1px solid var(--gold-500); border-radius: 50%; opacity: 0; }

/* Timeline: stars joined by a gold rule where done, dashed where still to come */
.timeline, ol.timeline[role='list'] { display: grid; gap: var(--space-6); margin: 0; padding: var(--space-6); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-card); list-style: none; }
.timeline__item { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-4); }
.timeline__item:not(:last-child)::after { content: ''; position: absolute; left: 11.5px; top: 30px; bottom: calc(-1 * var(--space-6) + 6px); border-left: 1px dashed var(--teal-500); }
.timeline__item[data-status='done']:not(:last-child)::after { border-left: 1.5px solid var(--gold-500); }
.timeline__star { width: 24px; height: 24px; color: var(--teal-500); }
.timeline__item[data-status='done'] .timeline__star { color: var(--teal-700); }
.timeline__item[data-status='current'] .timeline__star { color: var(--gold-600); }
.timeline__item[data-status='problem'] .timeline__star { color: var(--danger); }
.timeline__title { font-weight: 600; }
.timeline__meta { margin-top: 2px; color: var(--text-muted); }
.timeline__text { margin-top: 2px; font-size: var(--fs-small); color: var(--text-muted); }

@media (max-width: 1023px) {
  .status__copy, .status__grid > .timeline-wrap { grid-column: 1 / -1; }
}

/* One foil button per view: the page's own primary action leads, so the header's "Enrol now" foil is hidden here */
.page--enrol .site-header .btn--primary { display: none; }

/* ?step=2 or ?step=3 (the server decides in Phase 2): an inline head script sets data-step-init so the right panel and
   indicators are there from first paint; enroll.js takes over (hidden attributes, aria-current) and removes the attribute. */
/* The static markup marks indicator 1 as current; until enroll.js moves aria-current, style it as done, not current. */
html.js[data-step-init] .steps__item[data-step-indicator="1"][aria-current='step'] { color: var(--text-muted); font-weight: 400; }
html.js[data-step-init="2"] .enrol-step:not([data-step="2"]) { display: none; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="1"]::after { transform: scaleX(1); transition: none; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="2"]::after { transform: scaleX(1); transition: none; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="1"] .steps__check { display: block; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="1"] .steps__done { display: inline; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="1"] .steps__num { color: var(--gold-700); }
html.js[data-step-init="2"] .steps__item[data-step-indicator="2"] { color: var(--text); font-weight: 500; }
html.js[data-step-init="2"] .steps__item[data-step-indicator="2"] .steps__num { color: var(--gold-700); }
html.js[data-step-init="3"] .enrol-step:not([data-step="3"]) { display: none; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="1"]::after { transform: scaleX(1); transition: none; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="2"]::after { transform: scaleX(1); transition: none; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="3"]::after { transform: scaleX(1); transition: none; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="1"] .steps__check { display: block; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="1"] .steps__done { display: inline; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="1"] .steps__num { color: var(--gold-700); }
html.js[data-step-init="3"] .steps__item[data-step-indicator="2"] .steps__check { display: block; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="2"] .steps__done { display: inline; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="2"] .steps__num { color: var(--gold-700); }
html.js[data-step-init="3"] .steps__item[data-step-indicator="3"] { color: var(--text); font-weight: 500; }
html.js[data-step-init="3"] .steps__item[data-step-indicator="3"] .steps__num { color: var(--gold-700); }