/* ── Public enrolment funnel (signup host root, /e, /e/:token, /pay/*) ──
   One focused column that carries a visitor from choosing a course to a
   confirmed payment. Premium and calm: soft brand-tinted glow behind glass
   cards, exactly one brand-gradient hairline in the header, the live price as
   the single dominant number on each card.

   Prefix is `enr-` throughout (the admin enrolment-pages view owns `ep-`).
   RTL Hebrew, logical properties, breakpoints 1024 / 1024-767 / 767.
   CSS lives here per Chrome Workspaces - no inline styles, no <style> blocks. */

.enr-page {
    min-block-size: 100vh;
    padding: 0 var(--space-md) var(--space-2xl);
    background:
        radial-gradient(1100px 520px at 85% -80px, rgba(8, 148, 255, 0.08), transparent 65%),
        radial-gradient(900px 480px at 8% 200px, rgba(189, 50, 214, 0.05), transparent 60%),
        linear-gradient(180deg, #FFFFFF 0%, #F5F9FF 100%);
    color: var(--text-color);
}

/* Shared measure. The selection screen widens to hold three cards; every other
   screen stays at reading width. */
.enr-header,
.enr-form,
.enr-card-plain,
.enr-footer,
.enr-foot-note,
.enr-deadline,
.enr-step-head {
    max-inline-size: 760px;
    margin-inline: auto;
}

/* Accessibility: announce "full price" / "registration price" so the discount
   is never carried by a strike-through and a colour alone. */
.enr-vh {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* ── Buttons ──────────────────────────────────────────────────
   Violet CTA family. Shadows come from the violet set (lp.css), not the
   orange-era ones still sitting under .btn-primary in global.css. */

.enr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.enr-btn--primary {
    background: var(--accent-warm);
    color: #fff;
    box-shadow: 0 1px 2px rgba(30, 12, 60, 0.12), 0 6px 18px rgba(105, 53, 216, 0.22);
}

.enr-btn--primary:hover {
    background: var(--accent-warm-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(30, 12, 60, 0.16), 0 10px 26px rgba(105, 53, 216, 0.3);
}

.enr-btn--ghost {
    background: transparent;
    color: var(--primary-color);
    border-color: var(--border-default);
}

.enr-btn--ghost:hover {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.enr-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.enr-btn svg {
    flex: none;
}

/* ── Sticky order summary ─────────────────────────────────────
   Present from the moment a course is chosen: what is being bought and what
   the card is charged today, never out of sight while the form is filled. */

/* One sticky stack for both strips. The rehearsal notice has to stay on screen
   while the payment frame is scrolled, and two independently sticky elements
   would need a hard-coded offset between them that breaks the moment either
   one wraps to a second line. */
.enr-sticky {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    margin-inline: calc(-1 * var(--space-md));
}

.enr-bar {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-block-end: 1px solid var(--border-light);
}

.enr-bar__inner {
    max-inline-size: 760px;
    margin-inline: auto;
    padding: 10px var(--space-md);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
}

.enr-bar__course {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 600;
    white-space: nowrap;
}

.enr-bar__sep {
    inline-size: 1px;
    block-size: 14px;
    background: var(--border-default);
    flex: none;
}

.enr-bar__amount {
    color: var(--text-secondary);
}

.enr-bar__note {
    margin-inline-start: auto;
    padding: 3px 12px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ── Test-mode banner ─────────────────────────────────────────
   A rehearsal page runs the real funnel against a real card, so this has to be
   unmistakable without ever reading as a fault. It borrows the site's dark
   terminal surface (claude-code-deep-dive) with its gold accent: a register
   used nowhere else on this page, so it cannot be confused with the red server
   errors, the amber retry notice, the green confirmation or the blue
   instructions. Dark also earns its prominence without shouting - the colour
   says "system", not "something broke". */

.enr-testbar {
    background: linear-gradient(180deg, #161722 0%, #0B0C12 100%);
    border-block-end: 1px solid rgba(212, 165, 116, 0.35);
    color: rgba(255, 255, 255, 0.82);
}

.enr-testbar__inner {
    max-inline-size: 760px;
    margin-inline: auto;
    padding: 9px var(--space-md);
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.enr-testbar__tag {
    flex: none;
    padding: 2px 10px;
    border: 1px solid rgba(212, 165, 116, 0.4);
    border-radius: var(--radius-full);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #D4A574;
    white-space: nowrap;
}

/* The colour is restated here rather than inherited: global.css styles bare
   <p> with the site's near-black ink, which beats inheritance from the dark
   bar and rendered this sentence #191A23 on #0B0C12 - present in the DOM,
   invisible on screen. */
.enr-testbar__text {
    margin: 0;
    font-size: 13px;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.82);
}

/* The amount is the fact people scan for, so it gets the full-strength ink.
   Solid, never the brand gradient - this is 600 weight. */
.enr-testbar__charge {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.96);
}

/* ── Header ───────────────────────────────────────────────── */

.enr-header {
    padding-block: var(--space-xl) 0;
    text-align: center;
}

.enr-header__mark {
    block-size: 28px;
    display: inline-block;
}

/* The single brand-gradient accent on the page. */
.enr-header__rule {
    inline-size: 56px;
    block-size: 2px;
    margin: 18px auto 0;
    border-radius: 1px;
    background: linear-gradient(90deg, #0894FF 0%, #BD32D6 50%, #FFA304 100%);
}

.enr-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-block-end: 10px;
}

/* ── Mascot wrappers ──────────────────────────────────────────
   Fixed square boxes so the artwork never shifts layout while it decodes.
   Size always comes from the call-site class, never from the component. */

.enr-mascot {
    aspect-ratio: 1 / 1;
    flex: none;
    pointer-events: none;
    user-select: none;
}

.enr-mascot svg {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

/* ── State screens (loading / closed / error / pending / done) ── */

.enr-state {
    max-inline-size: 560px;
    margin: var(--space-xl) auto 0;
    padding: var(--space-xl) var(--space-lg) var(--space-2xl);
    text-align: center;
    background:
        radial-gradient(ellipse at 25% 0%, rgba(8, 148, 255, 0.06), transparent 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(239, 246, 255, 0.5));
    border: 1px solid rgba(98, 98, 234, 0.1);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.enr-state--wide {
    max-inline-size: 640px;
}

.enr-state__mascot {
    inline-size: 150px;
    margin-inline: auto;
    margin-block-end: var(--space-sm);
}

.enr-state__spinner {
    inline-size: 34px;
    block-size: 34px;
    margin: 0 auto 16px;
    border: 3px solid var(--border-light);
    border-block-start-color: var(--primary-color);
    border-radius: 50%;
    animation: enr-spin 0.9s linear infinite;
}

@keyframes enr-spin {
    to { transform: rotate(360deg); }
}

.enr-state__icon {
    font-size: 40px;
    color: var(--text-secondary);
    margin-block-end: 12px;
}

.enr-state__icon--ok {
    color: #1F9D55;
}

.enr-state__title {
    margin: 0 0 12px;
    font-family: var(--font-display);
    font-size: clamp(24px, 3.4vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--text-color);
    line-height: 1.25;
}

.enr-state__text {
    margin: 0 auto var(--space-lg);
    max-inline-size: 46ch;
    font-size: 15.5px;
    font-weight: 300;
    line-height: 1.8;
    color: var(--text-secondary);
}

.enr-state__text--quiet {
    margin-block-end: 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

.enr-state__text--quiet a {
    color: var(--primary-color);
    text-decoration: none;
}

.enr-state__text--quiet a:hover {
    text-decoration: underline;
}

/* ── Selection hero ───────────────────────────────────────── */

.enr-hero {
    max-inline-size: 1080px;
    margin: var(--space-lg) auto var(--space-xl);
    padding-block: var(--space-lg);
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    gap: var(--space-lg);
}

.enr-hero__mascot {
    inline-size: 140px;
}

.enr-hero__title {
    margin: 0 0 var(--space-md);
    font-family: var(--font-display);
    font-size: clamp(26px, 4.2vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.2;
    color: var(--text-color);
    text-wrap: balance;
}

.enr-hero__lead {
    margin: 0;
    max-inline-size: 62ch;
    font-size: clamp(15px, 1.7vw, 17px);
    font-weight: 300;
    line-height: 1.75;
    color: var(--text-secondary);
}

.enr-hero__meta {
    margin: var(--space-md) 0 0;
    font-size: 14px;
    color: var(--text-tertiary);
}

/* ── Discount deadline ────────────────────────────────────── */

.enr-deadline {
    margin-block-end: var(--space-xl);
    padding-block: var(--space-md);
    border-block: 1px solid var(--border-light);
}

.enr-countdown {
    text-align: center;
}

.enr-countdown__label {
    margin: 0 0 var(--space-sm);
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
}

.enr-countdown__clock {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-lg);
    /* Digital-clock convention: units run LTR (days leftmost) even on RTL. */
    direction: ltr;
    /* Reserved height so the skeleton -> live swap never shifts layout. */
    min-block-size: 52px;
}

.enr-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-inline-size: 44px;
}

.enr-countdown__num {
    font-family: var(--font-mono);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--text-color);
    font-variant-numeric: tabular-nums;
}

.enr-countdown__lbl {
    font-size: 11px;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

/* Far deadline: one static dated line in the same footprint as label + clock
   (21 + 16 + 52 = 89px), so the swap between the two stays CLS-free. */
.enr-countdown__static {
    display: grid;
    align-content: center;
    min-block-size: 89px;
    margin: 0;
    font-family: var(--font-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-secondary);
}

.enr-countdown__static-date {
    font-weight: 600;
    color: var(--text-color);
}

/* ── Course cards ─────────────────────────────────────────── */

.enr-cards {
    max-inline-size: 1080px;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-lg);
    align-items: stretch;
}

.enr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.enr-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

/* The full program is the card the section builds towards: a 2px brand border,
   a brand-tinted glow and a faint top-centred wash lift it off the row. */
.enr-card--featured {
    border: 2px solid rgba(8, 148, 255, 0.45);
    box-shadow: 0 20px 52px rgba(0, 60, 130, 0.16);
    margin-block: -16px;
    background:
        radial-gradient(ellipse at 50% -8%, rgba(8, 148, 255, 0.07), transparent 52%),
        var(--bg-surface);
}

.enr-card--featured:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 60px rgba(0, 60, 130, 0.2);
}

.enr-card-badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: var(--space-lg);
    transform: translateY(-50%);
    padding: 6px 16px;
    border-radius: var(--radius-full);
    background: var(--primary-color);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.32);
}

.enr-card-head {
    min-block-size: 104px;
}

.enr-card-logo {
    block-size: 26px;
    inline-size: auto;
    margin-block-end: var(--space-md);
}

.enr-card-logo-course {
    inline-size: 100%;
    max-inline-size: 230px;
    margin-block-end: var(--space-md);
}

.enr-card-logo-course svg {
    inline-size: 100%;
    block-size: auto;
}

.enr-card-who {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Price ladder: muted struck list price (the anchor) -> live price (the one
   number that matters). The program's live price is tinted brand-blue. */

.enr-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding-block: var(--space-md) 6px;
    margin-block-start: var(--space-md);
    border-block-start: 1px solid var(--border-light);
}

.enr-price-was-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-block-end: 4px;
}

.enr-price-was-label {
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.enr-price-was {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: #9a9cab;
    letter-spacing: -0.02em;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(154, 156, 171, 0.9);
}

.enr-price-tag {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: var(--radius-full);
    background: var(--primary-light);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--primary-color);
    margin-block-end: 4px;
}

.enr-price-now {
    font-size: clamp(32px, 4.2vw, 44px);
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: -0.03em;
    line-height: 1.05;
    /* <ins> carries a UA underline that would read as a second strike-through. */
    text-decoration: none;
}

.enr-price--best .enr-price-now {
    color: var(--primary-color);
    font-size: clamp(34px, 4.6vw, 48px);
}

.enr-price-vat {
    font-size: 12.5px;
    color: var(--text-tertiary);
    letter-spacing: 0.01em;
    margin-block-start: 4px;
}

/* Saving as a quiet pill. Violet ink on violet tint - the CTA family. */
.enr-saving {
    display: inline-flex;
    align-items: baseline;
    align-self: flex-start;
    /* Flex items, so the word gap has to be declared - the space between the
       two spans in the markup is collapsed away by flex layout. */
    gap: 5px;
    padding: 4px 12px;
    border-radius: var(--radius-full);
    background: rgba(105, 53, 216, 0.1);
    color: var(--accent-warm);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin: var(--space-sm) 0 0;
}

/* ── Cohort + payment choices inside a card ───────────────── */

.enr-cohort-single {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-block-start: var(--space-lg);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

.enr-cohort-single i {
    color: var(--primary-color);
    font-size: 14px;
    margin-block-start: 2px;
    flex: none;
}

.enr-choice {
    margin: var(--space-lg) 0 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* A fieldset defaults to min-inline-size: min-content, which lets a long
       cohort label push the card wider than its grid track. */
    min-inline-size: 0;
}

.enr-choice__legend {
    padding: 0;
    margin-block-end: 8px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-tertiary);
}

.enr-choice__option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.enr-choice__option:hover {
    border-color: var(--primary-border);
}

.enr-choice__option--on {
    border-color: var(--primary-color);
    background: var(--primary-light);
}

.enr-choice__radio {
    flex: 0 0 17px;
    inline-size: 17px;
    block-size: 17px;
    margin-block-start: 2px;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.enr-choice__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.enr-choice__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.4;
}

.enr-choice__note {
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-secondary);
}

/* ── Card footer ─────────────────────────────────────────── */

.enr-card-foot {
    margin-block-start: auto;
    padding-block-start: var(--space-lg);
}

.enr-card-charge {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    margin: 0 0 var(--space-md);
    font-size: 13px;
    color: var(--text-secondary);
}

.enr-card-charge__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
    letter-spacing: -0.01em;
}

.enr-card-charge__note {
    flex-basis: 100%;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.enr-card-cta {
    inline-size: 100%;
}

.enr-foot-note {
    margin: var(--space-2xl) auto 0;
    max-inline-size: 62ch;
    text-align: center;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text-tertiary);
}

/* ── Step header (details / payment) ──────────────────────── */

.enr-step-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-block: var(--space-lg) var(--space-lg);
}

.enr-step-head__mascot {
    inline-size: 104px;
}

.enr-step-head__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: var(--text-color);
}

/* ── Plain glass card (form sections) ─────────────────────── */

.enr-card-plain {
    margin-block-end: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

.enr-card-plain__title {
    margin: 0 0 18px;
    font-size: 19px;
    font-weight: 600;
    color: var(--text-color);
}

/* ── Order recap (locked, server-derived) ─────────────────── */

.enr-order {
    text-align: center;
}

.enr-order__logo-wrap {
    display: flex;
    justify-content: center;
}

.enr-order__logo {
    block-size: 38px;
    inline-size: auto;
}

.enr-order__logo-course {
    block-size: 44px;
}

.enr-order__label {
    margin: 10px 0 0;
    font-size: 15px;
    color: var(--text-secondary);
}

.enr-locked {
    margin: var(--space-lg) 0 0;
    text-align: start;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.enr-locked--success {
    max-inline-size: 460px;
    margin-inline: auto;
    margin-block-end: var(--space-lg);
    background: rgba(255, 255, 255, 0.6);
}

.enr-locked__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F9FBFF;
    border-block-end: 1px solid var(--border-light);
}

.enr-locked__row:last-child {
    border-block-end: 0;
}

.enr-locked__row--strong {
    background: #F2F7FF;
}

.enr-locked__label {
    flex: none;
    min-inline-size: 168px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.enr-locked__value {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    font-size: 15.5px;
    font-weight: 300;
    color: var(--text-color);
}

.enr-locked__row--strong .enr-locked__value {
    font-weight: 500;
}

.enr-locked__value--list {
    font-size: 14px;
    color: var(--text-secondary);
    text-decoration: line-through;
    text-decoration-color: rgba(154, 156, 171, 0.9);
}

.enr-locked__icon {
    margin-inline-start: auto;
    font-size: 13px;
    color: var(--text-tertiary);
}

.enr-link-back {
    margin-block-start: var(--space-lg);
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: none;
    border: 0;
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--primary-color);
    cursor: pointer;
}

.enr-link-back:hover {
    text-decoration: underline;
}

/* ── Form ─────────────────────────────────────────────────── */

.enr-form .field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-block-end: var(--space-md);
}

/* Only fields standing on their own get the rhythm margin - a field inside a
   .field-row is spaced by the grid gap, and stacking both doubles it. */
.enr-card-plain > .field {
    margin-block-end: var(--space-md);
}

.enr-card-plain > .field:last-child,
.enr-form .field-row:last-child {
    margin-block-end: 0;
}

/* Needs the .enr-form prefix to outrank the two-column .field-row rule above -
   without it the zip drops to a row of its own. */
.enr-form .field-row.enr-address-row {
    grid-template-columns: 2fr 1.2fr 0.8fr;
}

/* ── Terms ────────────────────────────────────────────────── */

.enr-terms {
    margin: 0 0 var(--space-md);
    padding: var(--space-md) var(--space-lg);
    /* RTL list indent (global.css ul rule uses padding-right by design). */
    padding-right: 34px;
    max-block-size: 340px;
    overflow-y: auto;
    background: #F9FBFF;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    list-style: disc;
}

.enr-terms__item {
    margin-block-end: 12px;
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--text-secondary);
}

.enr-terms__sub {
    margin: 6px 0 0;
    padding-right: 22px;
    list-style: circle;
}

.enr-terms__sub li {
    margin-block-end: 4px;
}

.enr-consent {
    margin-block-start: 4px;
}

.enr-consent--error .consent__text {
    color: #D64545;
}

.enr-consent--error .consent__checkbox {
    accent-color: #D64545;
    /* box-shadow, not outline - outline would suppress the UA focus ring. */
    box-shadow: 0 0 0 1.5px #D64545;
    border-radius: 3px;
}

/* ── Signature + submit ───────────────────────────────────── */

.enr-signature-hint {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}

.enr-submit {
    inline-size: 100%;
    margin-block-start: var(--space-lg);
    padding-block: 16px;
    font-size: 17px;
}

.enr-submit-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* ── Payment ──────────────────────────────────────────────── */

.enr-pay__notice {
    margin: 0 0 var(--space-md);
    padding: 12px 14px;
    border-radius: var(--radius-md);
    font-size: 14px;
    line-height: 1.6;
}

.enr-pay__notice--retry {
    background: #FFF8EE;
    border: 1px solid #F2DCB8;
    color: #8A5A12;
}

/* ── Open-amount instruction (degraded iframe mode) ───────────
   In this mode the hosted form arrives with its amount field on zero and the
   visitor has to type the sum. This block is the only thing that tells them,
   so it is sized as a statement rather than a hint - the amount itself carries
   the weight, and the arrow ties it to the frame directly below. Brand blue,
   not a warning colour: nothing has gone wrong, there is simply a number to
   enter. Solid ink on the numeral, never the gradient (it is 600 weight). */

.enr-amount {
    position: relative;
    margin: 0 0 var(--space-lg);
    padding: var(--space-lg) var(--space-lg) var(--space-xl);
    text-align: center;
    border: 2px solid rgba(8, 148, 255, 0.4);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse at 50% 0%, rgba(8, 148, 255, 0.08), transparent 62%),
        var(--bg-surface);
    box-shadow: 0 6px 22px rgba(0, 60, 130, 0.08);
}

.enr-amount__lead {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.5;
    color: var(--text-color);
}

.enr-amount__value {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(32px, 4.4vw, 42px);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--primary-color);
}

.enr-amount__note {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Points at the payment frame immediately below. */
.enr-amount__arrow {
    position: absolute;
    inset-block-end: 10px;
    inset-inline-start: 50%;
    transform: translateX(50%);
    font-size: 16px;
    color: var(--primary-color);
    opacity: 0.75;
}

.enr-pay__hint {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 var(--space-md);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.enr-pay__hint i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.enr-pay__box {
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
}

.enr-pay__iframe {
    display: block;
    inline-size: 100%;
    block-size: 1150px;
    border: 0;
}

.enr-pay__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-block-start: var(--space-lg);
}

.enr-pay__foot {
    margin: var(--space-md) 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-tertiary);
}

/* ── Payment status line on the confirmation ──────────────────
   Its own quiet panel rather than body copy: the registration above it is
   settled, and this is the one thing that may still be moving. Neutral by
   default (blue, "in hand"), green only once the charge is actually confirmed.
   Never red - an unconfirmed payment is not an error the visitor can fix. */

.enr-paynote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    padding: 12px 14px;
    text-align: start;
    border: 1px solid var(--primary-border);
    border-radius: var(--radius-md);
    background: var(--primary-light);
    font-size: 14px;
    line-height: 1.65;
    color: var(--text-secondary);
}

.enr-paynote i {
    flex: none;
    margin-block-start: 3px;
    font-size: 16px;
    color: var(--primary-color);
}

.enr-paynote--ok {
    border-color: rgba(31, 157, 85, 0.28);
    background: rgba(31, 157, 85, 0.07);
}

.enr-paynote--ok i {
    color: #1F9D55;
}

/* The way out of a confirmation reached without a payment. */
.enr-complete-pay {
    margin-block-end: var(--space-lg);
}

/* ── What happens next (success) ──────────────────────────── */

.enr-next {
    max-inline-size: 460px;
    margin: 0 auto var(--space-lg);
    text-align: start;
}

.enr-next__title {
    margin: 0 0 var(--space-md);
    font-size: 16px;
    font-weight: 600;
    color: var(--text-color);
}

.enr-next__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.enr-next__list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-secondary);
}

.enr-next__list i {
    flex: none;
    margin-block-start: 3px;
    font-size: 15px;
    color: var(--primary-color);
}

/* ── Footer ───────────────────────────────────────────────── */

.enr-footer {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-md);
    border-block-start: 1px solid var(--border-light);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-tertiary);
}

.enr-footer a {
    color: var(--text-tertiary);
    text-decoration: none;
}

.enr-footer a:hover {
    color: var(--text-secondary);
}

/* ── Return-from-checkout page ────────────────────────────── */

/* Framed inside the funnel: one line, no chrome - the funnel is the page. */
.enr-return__framed {
    display: grid;
    place-content: center;
    gap: 12px;
    justify-items: center;
    min-block-size: 60vh;
    text-align: center;
}

.enr-return__line {
    margin: 0;
    font-size: 15px;
    color: var(--text-secondary);
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 1024px) {
    .enr-hero {
        grid-template-columns: 120px 1fr;
    }

    .enr-hero__mascot {
        inline-size: 120px;
    }

    /* The featured card stops floating above the row once cards stack. */
    .enr-card--featured {
        margin-block: 0;
    }

    .enr-cards {
        grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    }
}

/* Tablet band. Three 270px tracks plus gaps stop fitting below about 890px, so
   auto-fit drops to TWO columns here and the third card - the bundle, the one
   the page most wants to sell - lands alone on row two beside an empty cell.
   One centred column instead: it never orphans a card, and it holds for a page
   selling one or two courses as well, which a "make the third span both"
   rule would not. */
@media (min-width: 768px) and (max-width: 889px) {
    .enr-cards {
        grid-template-columns: min(560px, 100%);
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .enr-page {
        padding-inline: var(--space-sm);
    }

    .enr-sticky {
        margin-inline: calc(-1 * var(--space-sm));
    }

    .enr-bar__inner {
        flex-wrap: wrap;
        gap: 6px 10px;
        font-size: 13px;
    }

    /* The banner is sticky for the whole flow, so on a phone every line it
       takes is a line the form below never gets back - and stacked with the
       order bar it was eating a fifth of the viewport. The tag stays on the
       first line rather than claiming one of its own. */
    .enr-testbar__inner {
        gap: 8px;
        padding: 7px var(--space-sm);
    }

    .enr-testbar__tag {
        padding: 1px 8px;
        font-size: 10px;
        letter-spacing: 0.08em;
    }

    .enr-testbar__text {
        font-size: 12px;
        line-height: 1.45;
    }

    .enr-bar__note {
        margin-inline-start: 0;
    }

    /* Mascot above the words: at phone width a side-by-side hero squeezes the
       headline into a column too narrow to read as a headline. */
    .enr-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: var(--space-sm);
        margin-block-end: var(--space-lg);
    }

    .enr-hero__mascot {
        inline-size: 112px;
    }

    /* The headline carries the combined program logo, an SVG sized off the
       font-size and roughly 12.6x as wide as it is tall. That is what sets the
       floor here: at 26px it needs 329px of line, which a 320px phone does not
       have. Scaling with the viewport keeps the mark whole instead of pushing
       the page into horizontal scroll. */
    .enr-hero__title {
        font-size: clamp(22px, 6.8vw, 32px);
    }

    .enr-hero__lead {
        margin-inline: auto;
    }

    .enr-cards {
        grid-template-columns: 1fr;
    }

    .enr-card {
        padding: var(--space-lg) var(--space-md);
    }

    .enr-step-head {
        gap: var(--space-sm);
    }

    .enr-step-head__mascot {
        inline-size: 96px;
    }

    .enr-card-plain {
        padding: var(--space-md);
    }

    .enr-state {
        padding: var(--space-lg) var(--space-md) var(--space-xl);
    }

    .enr-state__mascot {
        inline-size: 128px;
    }

    .enr-form .field-row,
    .enr-form .field-row.enr-address-row {
        grid-template-columns: 1fr;
    }

    .enr-order__logo {
        block-size: 32px;
    }

    .enr-order__logo-course {
        block-size: 36px;
    }

    .enr-locked__row {
        flex-wrap: wrap;
        gap: 4px 10px;
    }

    .enr-locked__label {
        flex-basis: 100%;
        min-inline-size: 0;
    }

    .enr-pay__iframe {
        block-size: 1320px;
    }

    .enr-pay__actions .enr-btn {
        inline-size: 100%;
    }

    .enr-countdown__clock {
        gap: var(--space-md);
    }
}

@media (prefers-reduced-motion: reduce) {
    .enr-card,
    .enr-card:hover,
    .enr-card--featured:hover,
    .enr-btn {
        transition: none;
        transform: none;
    }
}

@media print {
    .enr-mascot,
    .enr-bar,
    .enr-pay__box {
        display: none;
    }

    /* The rehearsal notice stays on a printed copy - a printout of a test
       enrolment must not be able to pass as a real one. */
    .enr-testbar {
        background: none;
        border-block-end: 1px solid #191A23;
        color: #191A23;
    }

    .enr-testbar__tag,
    .enr-testbar__charge {
        color: #191A23;
    }
}