/* =============================================================================
   Course landing page — checkout-instagram.html

   Loaded after style.css. style.css keeps the shared checkout pieces (form,
   order summary, region step, Iran panel); this file lays the landing page out
   around them and re-tones those pieces to this page's palette by overriding
   the design tokens they already read.

   Layout: one continuous column of content on the left with the checkout
   pinned beside it on the right for the whole length of the page (the same
   shape the previous production page had). On phones the checkout sits
   between the intro blocks and the detail blocks.
   ============================================================================= */

:root {
    --cream:        #F0EBE0;
    --cream-light:  #F6F2EA;
    --cream-dark:   #EDE3D2;
    --white:        #FFFDF9;
    --green-900:    #1C4033;
    --green-800:    #22503E;
    --green-700:    #2F6B4F;
    --gold:         #A98F5E;
    /* Gold dark enough for small text on cream (≈4.5:1); --gold stays for
       lines and icons, where contrast rules are looser. */
    --gold-strong:  #856A3B;
    --gold-line:    #D8C6A3;
    --gold-soft:    rgba(169, 143, 94, 0.14);
    --text-body:    #4C5A52;
    /* Clears 4.5:1 on every cream surface it sits on */
    --text-muted:   #6E685A;
    --border:       #E5DECF;
    --border-light: #EFE8DA;

    /* Surfaces: raised tiles inside cards, sunken panels inside the checkout */
    --surface-raised: #FAF7F1;
    --surface-sunken: #F4F0E6;
    --input-bg:       #FBF9F4;

    --font-fa:      'Vazirmatn', Tahoma, sans-serif;
    /* Persian Nastaliq. Aref Ruqaa was used before, but it is an Arabic Ruqaa
       style: ش and س lose their teeth and Persian words read as misspelled. */
    --font-hand:    'Gulzar', 'Vazirmatn', serif;
    /* English checkout card. Persian that ends up inside it falls through to
       Vazirmatn, since Inter has no Arabic-script glyphs. */
    --font-body:    'Inter', 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-display: 'Vazirmatn', Tahoma, sans-serif;

    /* One heading scale, same slope everywhere so the sizes never reorder
       between breakpoints: statement > card title > small card title. */
    --h2-lg: clamp(1.375rem, 2.2vw, 2rem);
    --h2-md: clamp(1.3rem, 2.05vw, 1.875rem);
    --h2-sm: clamp(1.2rem, 1.8vw, 1.625rem);

    --card-pad:     clamp(22px, 3vw, 40px);
    --card-radius:  18px;
    --stack-gap:    24px;
    --sticky-gap:   24px;

    --page-max:     1280px;
    --gutter:       clamp(16px, 4vw, 40px);
}

html {
    /* Equal to the sticky gap, so a #checkout jump lands the column exactly
       where it pins. */
    scroll-padding-top: var(--sticky-gap);
}

body {
    font-family: var(--font-fa);
    background-color: var(--cream-light);
    background-image: none;
    color: var(--green-900);
    line-height: 1.8;
}

.container {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Shared headings ─────────────────────────────────────────────────────── */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--gold-strong);
}

.eyebrow::before,
.eyebrow::after {
    content: '';
    width: 40px;
    height: 1px;
    background: var(--gold-line);
}

.section-mark {
    display: block;
    width: 40px;
    height: 2px;
    margin: 0 auto 1.1rem;
    border-radius: 2px;
    background: var(--gold-line);
}

.section-title {
    margin: 0 0 1.5rem;
    font-size: var(--h2-md);
    font-weight: 800;
    line-height: 1.6;
    text-align: center;
    color: var(--green-900);
    text-wrap: balance;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
/* width: 100% is required: body is a flex column (style.css), and auto inline
   margins on a flex item would otherwise shrink the header to its content. */
.site-header {
    width: 100%;
    max-width: var(--page-max);
    margin-inline: auto;
    padding: 14px var(--gutter) 8px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header__brand {
    display: block;
    line-height: 0;
}

.site-header__brand img {
    height: 48px;
    width: auto;
}

.site-header__login {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 24px;
    border-radius: 999px;
    background: var(--green-900);
    color: var(--cream-light);
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s var(--ease);
}

.site-header__login:hover {
    background: var(--green-700);
}

.site-header__login .icon {
    width: 18px;
    height: 18px;
}

/* ── Hero ────────────────────────────────────────────────────────────────── */
/* Kept compact on purpose: the checkout card should clip into the first
   viewport on a laptop screen. */
.hero {
    position: relative;
    overflow: hidden;
    padding: 8px 0 16px;
    text-align: center;
}

.hero__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.hero__wave {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    width: 100%;
    height: 44%;
}

.hero__leaf {
    position: absolute;
    right: -14px;
    bottom: 70px;
    width: clamp(90px, 11vw, 168px);
    opacity: 0.55;
}

.hero__inner {
    position: relative;
    max-width: 940px;
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.hero__title {
    margin: 0;
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 800;
    line-height: 1.5;
    color: var(--green-900);
    text-wrap: balance;
}

.hero__lead {
    max-width: 640px;
    margin: 1rem auto 0;
    font-size: clamp(1rem, 1.2vw, 1.0625rem);
    line-height: 1.95;
    color: var(--text-body);
    text-wrap: pretty;
}

/* ── Intro video ─────────────────────────────────────────────────────────── */
.hero__media {
    position: relative;
    max-width: 540px;
    margin: 1.25rem auto 0;
}

.intro-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    background: #D9D3C6;
    box-shadow: 0 24px 60px rgba(28, 64, 51, 0.16), 0 2px 6px rgba(28, 64, 51, 0.06);
}

.intro-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: #D9D3C6;
}

.intro-video__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(to top, rgba(18, 36, 29, 0.5), rgba(18, 36, 29, 0.06) 55%, rgba(18, 36, 29, 0));
}

.intro-video__play:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: -3px;
}

.intro-video__icon {
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--green-900);
    color: var(--cream-light);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 0 0 8px rgba(255, 253, 249, 0.24);
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}

/* A triangle's visual centre sits left of its box centre — nudge it back. */
.intro-video__icon .icon {
    width: 25px;
    height: 25px;
    transform: translateX(2px);
}

.intro-video__play:hover .intro-video__icon {
    transform: scale(1.06);
    background: var(--green-700);
}

.intro-video__label {
    position: absolute;
    inset-inline-start: 14px;
    bottom: 14px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(18, 36, 29, 0.62);
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.8;
}

.intro-video.is-playing .intro-video__play {
    display: none;
}

/* ── Handwritten notes beside the video ─────────────────────────────────── */
.note {
    position: absolute;
    z-index: 1;
    width: 168px;
    text-align: center;
    font-family: var(--font-hand);
    font-size: 1.2rem;
    /* Nastaliq needs taller lines, and a little extra room between words */
    line-height: 2.2;
    word-spacing: 0.12em;
    color: var(--gold-strong);
    pointer-events: none;
}

.note svg {
    display: block;
    width: 126px;
    height: auto;
    margin: 4px auto 0;
    fill: none;
    stroke: #C8A15E;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Left of the video, arrow pointing in at it */
.note--video {
    right: calc(100% + 18px);
    top: 44%;
    transform: rotate(-6deg);
}

/* Right of the video, level with its top edge */
.note--future {
    left: calc(100% + 18px);
    top: -8px;
    transform: rotate(5deg);
}

/* ── Primary call to action ──────────────────────────────────────────────── */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 1.25rem;
    padding: 16px 38px;
    border-radius: 999px;
    background: var(--green-900);
    color: var(--cream-light);
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 12px 28px rgba(28, 64, 51, 0.22);
    transition: background 0.2s var(--ease), transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.btn-primary:hover {
    background: var(--green-700);
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(28, 64, 51, 0.26);
}

.btn-primary .icon {
    width: 18px;
    height: 18px;
}

/* One focus ring for everything clickable on the page */
.btn-primary:focus-visible,
.site-header__login:focus-visible,
.checkout-help a:focus-visible,
.enroll__checkout .submit-btn:focus-visible,
.enroll__checkout .iran-pay__btn:focus-visible,
.enroll__checkout .region-switch__btn:focus-visible,
.enroll__checkout .region-step__option:focus-visible {
    outline: 3px solid var(--gold);
    outline-offset: 3px;
    box-shadow: none;
}

/* ── Trust row ───────────────────────────────────────────────────────────── */
.hero__trust {
    list-style: none;
    margin: 1.125rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    row-gap: 10px;
    font-size: 0.95rem;
    color: var(--text-body);
}

.hero__trust li {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-inline: clamp(14px, 3vw, 32px);
}

.hero__trust li + li {
    border-inline-start: 1px solid var(--border);
}

.hero__trust .icon {
    width: 20px;
    height: 20px;
    color: var(--gold);
}

/* ── Details + checkout ──────────────────────────────────────────────────── */
/* Space below the hero so the first cards don't sit on its bottom edge */
.enroll {
    padding: 48px 0 88px;
}

/* Two columns. In RTL the first grid track is the right-hand one, so the
   checkout is placed there explicitly and spans both content rows; the
   content blocks come first in the markup, which is the order phones use. */
.enroll__grid {
    display: grid;
    grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.55fr);
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--stack-gap) clamp(24px, 3vw, 44px);
}

.enroll__checkout:focus {
    outline: none;
}

.enroll__checkout {
    grid-column: 1;
    grid-row: 1 / -1;
    position: sticky;
    /* Set by course-landing.js; negative when the column is taller than the
       viewport, so it pins by its bottom edge instead of its top. */
    top: var(--sticky-top, var(--sticky-gap));
    min-width: 0;
    font-family: var(--font-body);
}

.enroll__content {
    grid-column: 2;
    container-type: inline-size;
    container-name: content;
    display: flex;
    flex-direction: column;
    gap: var(--stack-gap);
    min-width: 0;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.detail-card,
.product__card,
.message-card {
    padding: var(--card-pad);
    border-radius: var(--card-radius);
}

.detail-card,
.product__card {
    background: var(--white);
    border: 1px solid var(--border-light);
}

.detail-card__title {
    margin: 0 0 0.4rem;
    font-size: var(--h2-sm);
    font-weight: 800;
    line-height: 1.6;
    color: var(--green-900);
    text-wrap: balance;
}

/* ── Pain points ─────────────────────────────────────────────────────────── */
.pains__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pain {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: var(--surface-raised);
    border: 1px solid var(--border-light);
    border-radius: 14px;
}

.pain__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--gold-strong);
}

.pain__icon .icon {
    width: 24px;
    height: 24px;
}

.pain p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-body);
    text-wrap: pretty;
}

/* ── Reframe ─────────────────────────────────────────────────────────────── */
.reframe {
    padding: 10px 0;
    text-align: center;
}

.reframe__title {
    margin: 0;
    font-size: var(--h2-lg);
    font-weight: 800;
    line-height: 1.75;
    color: var(--green-900);
    text-wrap: balance;
}

/* ── The course ──────────────────────────────────────────────────────────── */
.product__card {
    display: grid;
    gap: clamp(20px, 3vw, 36px);
    box-shadow: 0 18px 50px rgba(28, 64, 51, 0.07);
}

.product__media {
    display: block;
}

.product__media img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 18px 26px rgba(28, 64, 51, 0.16));
}

.product__body .eyebrow {
    margin-bottom: 0.7rem;
}

.product__title {
    margin: 0;
    font-size: var(--h2-md);
    font-weight: 800;
    line-height: 1.5;
    color: var(--green-900);
    text-wrap: balance;
}

.product__desc {
    margin: 0.8rem 0 0;
    font-size: 1.05rem;
    line-height: 2;
    color: var(--text-body);
    text-wrap: pretty;
}

.product__includes {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 1.1rem 0 0;
    border-top: 1px solid var(--border-light);
    display: grid;
    gap: 10px;
}

.product__includes li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
    line-height: 1.85;
    color: var(--green-900);
}

.product__includes .icon {
    width: 22px;
    height: 22px;
    color: var(--gold);
}

.product__includes strong {
    font-weight: 700;
    color: var(--gold-strong);
}

/* Container rules sit after the base rules they override — same specificity,
   so source order decides.
   Two pain cards side by side only while the column is wide enough for them. */
@container content (max-width: 640px) {
    .pains__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Product card: image beside the text once the column has room for both. */
@container content (min-width: 640px) {
    .product__card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: center;
    }

    /* Text first in reading order (right), image on the left */
    .product__media {
        order: 1;
    }
}

/* ── Check lists ─────────────────────────────────────────────────────────── */
.check-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
    font-size: 1rem;
    line-height: 1.85;
    color: var(--text-body);
    text-wrap: pretty;
}

.check-list li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.check-list__icon {
    flex: none;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    margin-top: 3px;
    border-radius: 50%;
    background: var(--cream-dark);
    color: var(--gold-strong);
}

.check-list__icon .icon {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

.detail-card__note {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--border-light);
    font-size: 1rem;
    font-weight: 500;
    line-height: 2;
    color: var(--green-900);
    text-wrap: pretty;
}

/* ── Outcomes ────────────────────────────────────────────────────────────── */
.outcomes {
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: outcome;
}

.outcomes li {
    counter-increment: outcome;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    column-gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid var(--border-light);
}

.outcomes li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.outcomes li::before {
    content: counter(outcome, persian);
    grid-column: 1;
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--green-900);
    color: var(--cream-light);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1;
}

.outcomes strong {
    grid-column: 2;
    display: block;
    padding-top: 2px;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.8;
    color: var(--green-900);
    text-wrap: balance;
}

.outcomes p {
    grid-column: 2;
    margin: 4px 0 0;
    font-size: 0.95rem;
    line-height: 1.95;
    color: var(--text-muted);
    text-wrap: pretty;
}

/* ── Message from Bahareh ────────────────────────────────────────────────── */
.message-card {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 100%);
    color: rgba(246, 242, 234, 0.9);
}

.message-card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(216, 198, 163, 0.7), transparent);
}

.message-card__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 1.1rem;
}

.message-card__head img {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(216, 198, 163, 0.7);
}

.message-card__title {
    margin: 0;
    font-size: var(--h2-sm);
    font-weight: 800;
    line-height: 1.6;
    color: #E9D9B6;
}

.message-card p {
    margin: 0 0 0.85rem;
    font-size: 1rem;
    line-height: 2.05;
    text-wrap: pretty;
}

.message-card__body > p:last-child {
    margin-bottom: 0;
}

.message-card .message-card__role {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
    color: rgba(246, 242, 234, 0.7);
}

.message-card .message-card__sign {
    margin: 1.2rem 0 0;
    font-family: var(--font-hand);
    font-size: 1.35rem;
    line-height: 2.1;
    color: #E9D9B6;
}

/* ── Closing call to action ─────────────────────────────────────────────── */
.final-cta {
    padding: 16px 0 0;
    text-align: center;
}

.final-cta__title {
    margin: 0;
    font-size: var(--h2-lg);
    font-weight: 800;
    line-height: 1.7;
    color: var(--green-900);
    text-wrap: balance;
}

.final-cta .btn-primary {
    margin-top: 1.25rem;
}

/* ── Checkout, re-toned to the page ─────────────────────────────────────── */
/* Persian that region-gate.js injects into the English card */
.enroll__checkout .secure-checkout-label,
.enroll__checkout .checkout-banner,
.enroll__checkout .checkout-step,
.enroll__checkout .region-step,
.enroll__checkout .iran-pay,
.enroll__checkout .region-switch,
.enroll__checkout .price-toman,
.checkout-help {
    font-family: var(--font-fa);
}

.enroll__checkout .secure-checkout-label {
    margin-bottom: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--green-900);
}

.enroll__checkout .secure-checkout-label .icon {
    width: 15px;
    height: 15px;
    color: var(--gold);
}

.enroll__checkout .checkout-card {
    --checkout-pad: clamp(20px, 2.2vw, 32px);
    padding: var(--checkout-pad);
    border-color: var(--gold-line);
    border-radius: var(--card-radius);
    box-shadow: 0 22px 60px rgba(28, 64, 51, 0.14);
}

/* Green banner across the top of the card: the one dark block in the column,
   so it reads as "this is where you sign up", not as another info card. */
/* Played when a "start" button brings the visitor to the checkout — mainly so
   the bottom button, clicked while the pinned checkout is already beside it,
   still visibly does something. */
@keyframes checkoutPulse {
    0%   { transform: none;          box-shadow: 0 22px 60px rgba(28, 64, 51, 0.14), 0 0 0 0 rgba(169, 143, 94, 0.6); }
    35%  { transform: scale(1.02);   box-shadow: 0 26px 70px rgba(28, 64, 51, 0.18), 0 0 0 10px rgba(169, 143, 94, 0.25); }
    100% { transform: none;          box-shadow: 0 22px 60px rgba(28, 64, 51, 0.14), 0 0 0 18px rgba(169, 143, 94, 0); }
}

.enroll__checkout .checkout-card.is-highlighted {
    animation: checkoutPulse 0.8s var(--ease) 2;
}

.enroll__checkout .checkout-banner {
    position: relative;
    margin: calc(-1 * var(--checkout-pad)) calc(-1 * var(--checkout-pad)) var(--checkout-pad);
    padding: 22px var(--checkout-pad) 20px;
    border-radius: calc(var(--card-radius) - 1px) calc(var(--card-radius) - 1px) 0 0;
    background: linear-gradient(150deg, var(--green-900) 0%, var(--green-800) 100%);
    color: var(--cream-light);
    text-align: center;
}

.enroll__checkout .checkout-banner::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 1px;
    border-radius: inherit;
    background: linear-gradient(90deg, transparent, rgba(216, 198, 163, 0.7), transparent);
}

.enroll__checkout .checkout-banner__eyebrow {
    margin: 0 0 4px;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.8;
    color: #E9D9B6;
}

.enroll__checkout .checkout-banner__title {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.6;
    color: var(--white);
    text-wrap: balance;
}

.enroll__checkout .checkout-banner__meta {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.enroll__checkout .checkout-banner__meta li {
    padding: 1px 10px;
    border-radius: 999px;
    background: rgba(246, 242, 234, 0.12);
    font-size: 0.78rem;
    line-height: 1.9;
    color: rgba(246, 242, 234, 0.9);
}

/* The form is hidden in the markup until region-gate.js has an answer, and
   fades in the same way the question step did. */
.enroll__checkout #checkout-form:not([hidden]) {
    animation: fadeSlide 0.25s var(--ease) both;
}

/* One 24px step between every block in the card */
.enroll__checkout .form-block,
.enroll__checkout .order-summary-block {
    margin-bottom: 24px;
}

.enroll__checkout .form-block h3 {
    margin-bottom: 14px;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
}

.enroll__checkout .field {
    margin-bottom: 14px;
}

.enroll__checkout .field-row {
    gap: 14px;
}

.enroll__checkout .field label {
    margin-bottom: 7px;
    font-size: 0.875rem;
    color: var(--text-body);
}

.enroll__checkout .field input[type="text"],
.enroll__checkout .field input[type="email"],
.enroll__checkout .field input[type="tel"] {
    padding: 0.8rem 1rem;
    border-radius: 10px;
    border-color: var(--border);
    background: var(--input-bg);
    font-size: 0.95rem;
    color: var(--green-900);
}

.enroll__checkout .method-option {
    padding: 12px 10px;
    border-radius: 10px;
    font-weight: 600;
}

.enroll__checkout .method-option.selected {
    border-color: var(--gold);
    background: var(--gold-soft);
    box-shadow: none;
}

.enroll__checkout .order-summary-block,
.enroll__checkout .iran-pay {
    padding: 20px 22px;
    background: var(--surface-sunken);
    border-color: transparent;
    border-radius: 14px;
}

.enroll__checkout .order-summary-block h3 {
    margin-bottom: 16px;
}

.enroll__checkout .total-row {
    margin-top: 4px;
    padding-top: 16px;
    font-weight: 700;
}

/* The total is the same size whichever currency it is quoted in */
.enroll__checkout .total-row .price,
.enroll__checkout .total-row .price-toman {
    font-size: 1.35rem;
}

/* Persian digits sit optically smaller than Inter's — compensate on the
   line-item row (the total row has its own size above). */
/* The full course name and the Toman figure share one line at the card's
   fixed desktop width; below that the name wraps. */
.enroll__checkout .order-summary {
    font-size: 0.95rem;
}

.enroll__checkout .summary-row {
    gap: 8px;
}

.enroll__checkout .summary-row:not(.total-row) .price-toman {
    font-size: 1.02em;
    font-weight: 500;
}

.enroll__checkout .payment-message {
    margin: -8px 0 16px;
    font-size: 0.85rem;
    line-height: 1.6;
    color: #B42318;
}

/* Card buttons match the page's flat green pill rather than the old gradient */
.enroll__checkout .submit-btn,
.enroll__checkout .iran-pay__btn {
    min-height: 54px;
    border-radius: 12px;
    background: var(--green-900);
    color: var(--cream-light);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: 0 12px 28px rgba(28, 64, 51, 0.18);
}

.enroll__checkout .submit-btn:hover,
.enroll__checkout .iran-pay__btn:hover {
    background: var(--green-700);
    transform: translateY(-1px);
    box-shadow: 0 16px 34px rgba(28, 64, 51, 0.22);
}

.enroll__checkout .submit-btn:disabled {
    background: var(--green-900);
    opacity: 0.7;
    transform: none;
    cursor: default;
}

.enroll__checkout .trust-row {
    margin-top: 20px;
    padding-top: 16px;
    gap: 8px 14px;
}

.enroll__checkout .trust-item {
    font-size: 0.7rem;
}

.enroll__checkout .trust-item svg {
    width: 13px;
    height: 13px;
}

.enroll__checkout .region-step {
    padding: 2px 0 4px;
}

.enroll__checkout .region-step__title {
    font-size: 1.2rem;
    line-height: 1.6;
}

.enroll__checkout .region-step__lead {
    margin-bottom: 18px;
}

.enroll__checkout .region-step__option {
    padding: 16px 18px;
    border-radius: 12px;
    border-color: var(--border);
    background: var(--surface-raised);
    box-shadow: 0 2px 6px rgba(28, 64, 51, 0.05);
}

.enroll__checkout .region-step__option:hover {
    border-color: var(--green-900);
    background: var(--white);
}

.enroll__checkout .iran-pay__title {
    font-size: 1.15rem;
    font-weight: 700;
}

.enroll__checkout .iran-pay__text {
    font-size: 0.9rem;
    line-height: 1.9;
}

.enroll__checkout .iran-pay__note {
    font-size: 0.82rem;
    line-height: 1.8;
    text-wrap: pretty;
}

/* The trust row (or the Iran panel) already closes the card; no second rule */
.enroll__checkout .region-switch {
    margin-top: 22px;
    padding-top: 0;
    border-top: 0;
    font-size: 0.85rem;
}

.enroll__checkout .region-switch__btn {
    font: inherit;
    font-weight: 600;
    color: var(--green-700);
}

.checkout-help {
    margin: 18px 0 0;
    text-align: center;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.checkout-help a {
    font-weight: 600;
    color: var(--green-700);
    text-decoration: none;
}

.checkout-help a:hover {
    text-decoration: underline;
}

/* ── Scroll reveals ─────────────────────────────────────────────────────── */
/* The hidden state is only applied once course-landing.js has confirmed it can
   bring things back. Without JS, everything stays visible. */
.reveal-ready [data-reveal] {
    opacity: 0;
    transform: translateY(14px);
}

/* The transition sits on the revealed state only. On the hidden state it would
   also animate the initial hide, so anything on screen at load would fade out
   and back in. */
.reveal-ready [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}

/* A short stagger where several cards come into view together */
.reveal-ready .pains__grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.reveal-ready .pains__grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }
.reveal-ready .pains__grid [data-reveal]:nth-child(4) { transition-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .reveal-ready [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .btn-primary,
    .btn-primary:hover,
    .intro-video__icon,
    .enroll__checkout .submit-btn:hover,
    .enroll__checkout .iran-pay__btn:hover {
        transition: none;
        transform: none;
    }

    .enroll__checkout #checkout-form:not([hidden]) {
        animation: none;
    }

    .enroll__checkout .checkout-card.is-highlighted {
        animation: none;
        outline: 3px solid var(--gold);
        outline-offset: 4px;
    }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
    background: transparent;
    border-top-color: var(--border-light);
}

.site-footer .footer-inner {
    max-width: var(--page-max);
    padding: 24px var(--gutter);
    font-size: 0.8rem;
    color: var(--text-muted);
}

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

/* Below this the notes no longer have room beside the video. */
@media (max-width: 1120px) {
    .note {
        display: none;
    }
}

/* One column: intro blocks, then the checkout, then the rest. */
@media (max-width: 1024px) {
    .enroll__grid {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        gap: var(--stack-gap);
    }

    .enroll__checkout,
    .enroll__content {
        grid-column: auto;
        grid-row: auto;
    }

    .enroll__checkout {
        position: static;
        width: 100%;
        max-width: 520px;
        margin-inline: auto;
    }
}

/* Narrow two-column band: the card is ~360px wide, so the email/phone pair
   stacks instead of squeezing both inputs. */
@media (min-width: 1025px) and (max-width: 1200px) {
    .enroll__checkout .field-row {
        flex-direction: column;
        gap: 0;
    }
}

/* Fallback for browsers without container queries only. */
@supports not (container-type: inline-size) {
    @media (max-width: 1080px) {
        .pains__grid {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

@media (max-width: 760px) {
    .hero__leaf {
        display: none;
    }
}

@media (max-width: 600px) {
    .site-header__brand img {
        height: 46px;
    }

    .site-header__login {
        gap: 8px;
        padding: 9px 16px;
        font-size: 0.85rem;
    }

    .hero {
        padding-bottom: 40px;
    }

    .hero__title br {
        display: none;
    }

    .btn-primary {
        width: 100%;
        padding: 15px 20px;
        font-size: 1rem;
    }

    /* Stacked: icons on one vertical line, the group centred */
    .hero__trust {
        flex-direction: column;
        align-items: center;
        row-gap: 8px;
    }

    .hero__trust li {
        width: 100%;
        max-width: 230px;
        justify-content: flex-start;
        padding-inline: 0;
    }

    .hero__trust li + li {
        border-inline-start: 0;
    }

    .intro-video {
        border-radius: 12px;
    }

    .intro-video__icon {
        width: 54px;
        height: 54px;
    }

    .intro-video__icon .icon {
        width: 22px;
        height: 22px;
    }

    .intro-video__label {
        inset-inline-start: 10px;
        bottom: 10px;
        font-size: 0.78rem;
    }

    .pain {
        gap: 14px;
        padding: 16px;
    }

    .pain__icon {
        width: 50px;
        height: 50px;
    }

    .enroll {
        padding-top: 32px;
        padding-bottom: 64px;
    }

    .enroll__checkout .order-summary-block,
    .enroll__checkout .iran-pay {
        padding: 20px;
    }
}

/* Small phones: keep the hero button on one line */
@media (max-width: 400px) {
    .btn-primary {
        gap: 10px;
        padding: 14px 16px;
        font-size: 0.92rem;
    }
}

@media (hover: none) and (pointer: coarse) {
    .btn-primary:hover,
    .enroll__checkout .submit-btn:hover,
    .enroll__checkout .iran-pay__btn:hover {
        transform: none;
    }

    .site-header__login {
        min-height: 44px;
    }

    .enroll__checkout .region-switch__btn {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 0 6px;
    }
}