/**
 * =====================================================
 * SMART CONTENT CREATOR — صانع المحتوى الذكي
 * =====================================================
 *
 * Concept: Kinetic — flow as the material.
 * Nothing on this page depicts technology. The register comes from
 * behaviour: sections hand off to each other as you scroll, and
 * exactly one thing on the page is in a card.
 *
 * Full rationale: docs/plans/2026-08-13-smart-creator-design.md
 *
 * Built on the theme's own tokens (base/_variables.css); the few
 * page-scoped values below are declared on .sc-page so nothing leaks
 * site-wide. Numerals use the site's normal face, as on every other
 * page — no separate numeric voice.
 *
 * NOTE: base/_dark-mode.css is not imported by main.css and is not
 * enqueued anywhere, so the theme currently has no active dark mode.
 * This file is tokens-only and adapts if that import is restored.
 *
 * Mobile-first; RTL is the base direction, so logical properties
 * (inset-inline-*, border-inline-*) are used throughout.
 * =====================================================
 */

/* =========================================
   PAGE SHELL
   ========================================= */

.sc-page {
    --sc-rule: rgba(29, 29, 31, 0.09);
    --sc-tint: rgba(0, 123, 141, 0.10);
    --sc-edge: rgba(0, 123, 141, 0.30);
    --sc-measure: 620px;

    position: relative;
    background: var(--bg-body);
    color: var(--text-main);
    overflow-x: clip;
}

.sc-page__main {
    position: relative;
    z-index: 1;
    padding-bottom: var(--space-32);
}

/* Ambient glow — the brand's existing signature, given slow scroll
   parallax so the page reads as one continuous field. */
.sc-page__glow {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    width: 640px;
    height: 640px;
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(1, 165, 177, 0.13), transparent 66%);
    top: -260px;
    inset-inline-start: -160px;
    will-change: transform;
}

.sc-section {
    padding: var(--space-16) var(--space-6);
}

.sc-section__inner {
    max-width: var(--sc-measure);
    margin: 0 auto;
}


/* Settle primitive — used by the hero load sequence and by every
   section on scroll entry. Delay is set per element via --d.
 *
 * Gated behind `scripting: enabled`. Twenty of these elements only
 * receive .is-in from JS, so hiding them unconditionally would leave
 * most of the page blank whenever JS fails or is blocked.
 *
 * A class toggled by an inline script would be the usual fix, but
 * LiteSpeed sweeps inline scripts into its deferred bundle, which would
 * paint the content, then hide it, then fade it back in. This media
 * query cannot be deferred. Where it is unsupported the block simply
 * does not apply, so the content renders plainly — the safe direction
 * to fail in.
 */
@media (scripting: enabled) {
    .sc-settle {
        opacity: 0;
        transform: translateY(16px);
        transition:
            opacity 0.78s var(--ease-out-expo),
            transform 0.78s var(--ease-out-expo);
        transition-delay: var(--d, 0ms);
    }

    .sc-settle.is-in {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 768px) {
    .sc-section {
        padding: var(--space-20) var(--space-8);
    }
}

/* =========================================
   09. COUNTS
   =========================================
   One element, two behaviours. In the hero the four numbers are
   independent facts. In التكليفات they are not — 12 and 18 make 30 —
   so the total leads in teal and the split bar shows the proportion.
   The bar stays 2px so it reads as a fact, not as a dashboard. */

.sc-counts {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid var(--sc-rule);
    border-bottom: 1px solid var(--sc-rule);
}

.sc-counts__item {
    flex: 1 1 auto;
    min-width: 92px;
    padding: var(--space-4) 0;
}

.sc-counts__value {
    display: block;
    font-size: var(--text-2xl);
    font-weight: 500;
    line-height: 1;
}

.sc-counts__label {
    display: block;
    font-size: var(--text-sm);
    color: var(--text-main);
    margin-top: var(--space-2);
    margin-inline-start: 0;
}

.sc-counts__item--lead .sc-counts__value {
    color: var(--brand-dark);
}

.sc-counts__split {
    display: flex;
    height: 2px;
    margin-top: var(--space-4);
    border-radius: 2px;
    overflow: hidden;
}

.sc-counts__split i:first-child {
    background: var(--brand-dark);
}

.sc-counts__split i:last-child {
    background: rgba(29, 29, 31, 0.14);
}

/* =========================================
   HERO  (centred, with the halo)
   =========================================
   Content is centred and the halo radiates from that centre, so the
   effect earns the composition rather than merely tolerating it.

   overflow:hidden crops the outer rings to the hero box — they read as
   arcs rather than bleeding into the first section below. */

.sc-hero {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-6) var(--space-12);
}

.sc-hero__halo {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    transform: translate(50%, -50%);
    z-index: 0;
    pointer-events: none;
}

.sc-hero__halo::before {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    width: 620px;
    height: 620px;
    transform: translate(50%, -50%);
    border-radius: var(--radius-full);
    background: radial-gradient(circle, rgba(1, 165, 177, 0.13), transparent 66%);
}

.sc-hero__ring {
    position: absolute;
    top: 50%;
    inset-inline-start: 50%;
    border: 1px solid rgba(0, 123, 141, 0.13);
    border-radius: var(--radius-full);
    transform: translate(50%, -50%);
    animation: scHaloBreathe 9s ease-in-out infinite;
}

.sc-hero__ring:nth-child(1) {
    width: 420px;
    height: 420px;
}

.sc-hero__ring:nth-child(2) {
    width: 640px;
    height: 640px;
    border-color: rgba(0, 123, 141, 0.09);
    animation-delay: 0.9s;
}

.sc-hero__ring:nth-child(3) {
    width: 880px;
    height: 880px;
    border-color: rgba(0, 123, 141, 0.06);
    animation-delay: 1.8s;
}

@keyframes scHaloBreathe {
    0%, 100% { transform: translate(50%, -50%) scale(1); opacity: 0.85; }
    50%      { transform: translate(50%, -50%) scale(1.045); opacity: 1; }
}

.sc-hero__inner {
    position: relative;
    z-index: 1;
    max-width: var(--sc-measure);
    margin: 0 auto;
    text-align: center;
}

/* Counts are shared with التكليفات, so centre them only in the hero. */
.sc-hero .sc-counts {
    justify-content: center;
    max-width: 520px;
    margin-inline: auto;
}

.sc-hero .sc-counts__label {
    text-align: center;
}

.sc-hero__eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--brand-darker);
    background: var(--sc-tint);
    border: 1px solid rgba(0, 123, 141, 0.2);
    border-radius: var(--radius-full);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-6);
}

/* The training's name, stated plainly above the claim. The H1 argues;
   this says what the page is selling. */
.sc-hero__name {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: var(--space-3);
}

.sc-hero__title {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: 1.24;
    color: var(--text-main);
    margin-bottom: var(--space-5);
    text-wrap: balance;
}

.sc-hero__subhead {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    max-width: 48ch;
    margin-inline: auto;
    margin-bottom: var(--space-8);
}

.sc-hero__contents {
    font-size: var(--text-sm);
    color: var(--brand-darker);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-5);
}

/* Note sits under the button, not beside it. */
.sc-hero__cta-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

.sc-hero__cta-note {
    font-size: var(--text-sm);
    color: var(--brand-darker);
}

.sc-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    background: var(--brand-dark);
    color: #fff;
    font-family: var(--font-main);
    font-weight: 700;
    font-size: var(--text-base);
    padding: var(--space-4) var(--space-8);
    border: none;
    border-radius: var(--radius-full);
    box-shadow: var(--shadow-brand);
    cursor: pointer;
    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.sc-cta:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 38px rgba(0, 123, 141, 0.34);
}

@media (min-width: 768px) {
    .sc-hero {
        padding: var(--space-24) var(--space-8) var(--space-16);
    }

    .sc-hero__title {
        font-size: var(--text-6xl);
    }
}

/* =========================================
   02. STORY SECTION  (لماذا / الفلسفة)
   =========================================
   The sticky-question layout from كيف نفكر, adapted. The question holds
   its position while its answer scrolls past, so a reader seven
   paragraphs deep still sees what they are reading the answer to.

   These two sections break out to a wider measure than the rest of the
   page — deliberately, so the manifesto reads differently from the
   schedule and the price card.

   Below 1024px the grid collapses and the question un-sticks. */

.sc-story__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    gap: var(--space-8);
}

.sc-story__title {
    font-size: var(--text-4xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--text-main);
    text-wrap: balance;
}

.sc-story__answer .sc-prose {
    max-width: 54ch;
}

/* The fit pair lives inside a story answer column (~510px on desktop),
   which is too narrow for two columns of this much copy — keep it
   stacked at every width, unlike the free-standing .sc-pair. */
.sc-story .sc-fit {
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .sc-story__inner {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-20);
        align-items: start;
    }

    .sc-story__question {
        position: sticky;
        top: calc(var(--nav-height) + var(--space-16));
        opacity: 0.45;
        transform: scale(0.985);
        transition:
            opacity 0.5s var(--ease-out-expo),
            transform 0.5s var(--ease-out-expo);
    }

    /* Lifts while the reader is inside this section. Toggled both ways
       by smart-creator.js, so a question dims again once passed. */
    .sc-story.is-active .sc-story__question {
        opacity: 1;
        transform: none;
    }

    .sc-story__title {
        font-size: var(--text-5xl);
    }
}

/* Inline emphasis inside prose, via the theme's [highlight] shortcode.
   Matches the .highlight treatment on كيف نفكر. */
.sc-prose .highlight {
    background: var(--sc-tint);
    color: var(--brand-darker);
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

/* =========================================
   01. SECTION HEAD
   =========================================
   Eyebrow, then the heading carrying at most one teal phrase
   which underlines itself as the section arrives. The underline is
   driven by the theme's existing .reveal-up/.active pair, so it needs
   no observer of its own. */

.sc-head {
    margin-bottom: var(--space-8);
}

.sc-head__eyebrow {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: var(--space-3);
}

.sc-head__title {
    font-size: var(--text-3xl);
    font-weight: 700;
    line-height: var(--leading-normal);
    color: var(--text-main);
    text-wrap: balance;
}

/* Underline via text-decoration rather than a positioned ::after.
 *
 * The previous version drew itself on .reveal-up.active, which broke
 * twice: the hero lost its .reveal-up class when the settle system
 * landed, so its underline could never fire; and an absolutely
 * positioned rule collapses when the inline phrase wraps across lines
 * (the philosophy accent measured 19px for an 18-character phrase).
 *
 * text-decoration follows wrapped text natively and depends on no
 * class at all, so it cannot silently disappear again. The trade is
 * the draw animation, which is not worth a rule that is sometimes
 * invisible. */
.sc-head__accent {
    font-style: normal;
    color: var(--brand-dark);
    text-decoration: underline;
    text-decoration-color: var(--brand-dark);
    text-decoration-thickness: 2px;
    text-underline-offset: 0.25em;
    text-decoration-skip-ink: none;
}

@media (min-width: 768px) {
    .sc-head__title {
        font-size: var(--text-4xl);
    }
}

/* =========================================
   LAYER HEADER  (الطبقة الأولى / الثانية / الثالثة)
   =========================================
   No letter-spacing: spacing Arabic breaks the visual joining of the
   script. Rank comes from weight and colour instead. */

.sc-head--layer {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding-bottom: var(--space-5);
    border-bottom: 2px solid var(--brand-dark);
    margin-bottom: var(--space-6);
}

.sc-head__label {
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--brand-dark);
}

.sc-head__tag {
    font-size: var(--text-base);
    color: var(--brand-darker);
}

.sc-layer__intro,
.sc-layer__intro-prose {
    max-width: 54ch;
    margin-bottom: var(--space-8);
}

.sc-layer__intro {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

/* Umbrella heading above the three layers. Sits at section-title rank,
   with the layer labels below it as h3 — so the hierarchy reads
   contents → layer → lecture. */
.sc-layers-head {
    margin-bottom: var(--space-10);
}

.sc-layers-head__intro {
    max-width: 54ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    margin-top: var(--space-4);
}

/* =========================================
   03/04. LECTURE ROW
   =========================================
   Name leads, question second, description third. Unboxed — hairline
   rules only, so a layer reads as one continuous run rather than a
   grid of tiles. The --alt modifier mutes the numeral and adds the
   footing tag: the row declares it is experience, not method, before
   the copy says so. */

/* The layer spine.
 *
 * A rule down the numeral gutter binding a layer's rows into one run —
 * six adjacent rows previously read as six separate items, with only
 * the word الطبقة to say otherwise. The fill is scroll-linked using the
 * same --p mechanic as the transition hand-off, so this is the page's
 * existing signature applied in a second place rather than a new
 * behaviour. Café has no numeral gutter and no spine — it stays the
 * odd one out on purpose. */

.sc-layer__list {
    position: relative;
}

.sc-layer__list[data-sc-spine]::before,
.sc-layer__list[data-sc-spine]::after {
    content: "";
    position: absolute;
    inset-block: var(--space-5);
    inset-inline-start: 52px;
    width: 1px;
}

.sc-layer__list[data-sc-spine]::before {
    background: var(--sc-rule);
}

.sc-layer__list[data-sc-spine]::after {
    background: var(--brand-dark);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
    will-change: transform;
}

.sc-row {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--sc-rule);
    transition: background var(--transition-base);
}

/* Desktop hover: the numeral solidifies and the row warms very faintly. */
@media (hover: hover) {
    .sc-row:hover {
        background: rgba(0, 123, 141, 0.03);
    }

    .sc-row:hover .sc-row__num {
        color: var(--brand-dark);
        font-weight: 700;
    }
}

.sc-row:last-of-type {
    border-bottom: 0;
}

.sc-row__num {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--brand-dark);
    padding-top: var(--space-1);
}

.sc-row--alt .sc-row__num {
    color: var(--text-main);
}

.sc-row__title {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--space-1);
}

.sc-row__tag {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--brand-darker);
    border: 1px solid var(--sc-rule);
    border-radius: 4px;
    padding: 2px var(--space-2);
    margin-inline-start: var(--space-2);
    vertical-align: 2px;
}

.sc-row__question {
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--brand-darker);
    margin-bottom: var(--space-2);
}

.sc-row__desc {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

/* =========================================
   14. FIT PAIR  (لمن هذا التدريب؟)
   =========================================
   Unboxed and matched: same shape, opposite verdict. The weight of the
   top rule carries the difference — 2px brand for the yes, hairline for
   the no — rather than colour-coding two cards. */

.sc-fit {
    display: grid;
    gap: var(--space-6);
    margin-top: var(--space-8);
}

.sc-fit__item {
    padding-top: var(--space-4);
}

.sc-fit__item--yes {
    border-top: 2px solid var(--brand-dark);
}

.sc-fit__item--no {
    border-top: 1px solid var(--sc-rule);
}

.sc-fit__label {
    font-size: var(--text-lg);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.sc-fit__item--yes .sc-fit__label {
    color: var(--brand-darker);
}

.sc-fit__item--no .sc-fit__label {
    color: var(--text-main);
}

.sc-fit__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

/* =========================================
   06. OBJECTION  (اعتراض متوقّع)
   =========================================
   The page interrupting itself. Narrower measure, half-strength rule,
   no box — a box would read as a marketing callout; staying quieter
   than the text it interrupts is what makes it read as honest. */

.sc-objection {
    max-width: 52ch;
    margin-top: var(--space-8);
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid var(--sc-edge);
}

.sc-objection__label {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: var(--space-2);
}

.sc-objection__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

/* =========================================
   07. PAIRED ITEMS  (مشروعا التخرج / بين اللقاءات)
   =========================================
   One element, two uses that differ on purpose. مشروعا التخرج carries
   an index because the copy says الأول / الثاني and the closing line
   depends on that order. بين اللقاءات carries none: two parallel
   tracks, no sequence. Numbering both would look tidier and be wrong. */

.sc-pair {
    display: grid;
    gap: var(--space-6);
}

.sc-pair__item {
    border-top: 1px solid var(--sc-rule);
    padding-top: var(--space-4);
}

/* The graduation projects are deliberately unequal. The first measures
   what you learned and ends; the second stays with you. Rule weight
   shows that before the closing line asks the reader to notice it. */
.sc-pair__item--passing {
    border-top: 1px solid var(--sc-rule);
}

.sc-pair__item--lasting {
    border-top: 3px solid var(--brand-dark);
}

.sc-pair__item--passing .sc-pair__index {
    color: var(--text-main);
}

.sc-pair__item--lasting .sc-pair__title {
    color: var(--brand-darker);
}

/* Cadence marker on the between-sessions tracks — the one real
   difference between them, and already stated in the copy. */
.sc-cadence {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--brand-darker);
    background: var(--sc-tint);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-3);
}

.sc-pair__index {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--brand-dark);
    margin-bottom: var(--space-2);
}

.sc-pair__title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: var(--space-2);
}

.sc-pair__body {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

@media (min-width: 768px) {
    .sc-fit,
    .sc-pair {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

/* =========================================
   02b / 10. PULL versus SPECIMEN
   =========================================
   Deliberate opposites. .sc-pull is the page's own voice amplified —
   larger, teal, stepping out of the column. .sc-specimen is a different
   voice reproduced as evidence — smaller and quieter than the body,
   with a quiet attribution line. If both read as emphasis, neither
   signifies anything. */

.sc-pull {
    margin: var(--space-6) 0;
    padding-inline-start: var(--space-5);
    border-inline-start: 2px solid var(--brand-dark);
}

.sc-pull__text {
    font-size: var(--text-xl);
    line-height: 1.65;
    font-weight: 700;
    color: var(--brand-darker);
    text-wrap: balance;
}

/* A reproduced artifact, so it gets its own ground — the same tinted
   panel the transition sentences use. Deliberately NOT a white bordered
   card: the panel and the card are different objects on this page, and
   only the price is a card. */
.sc-specimen {
    margin: var(--space-8) 0;
    padding: var(--space-6) var(--space-8);
    background: var(--sc-tint);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid var(--brand-dark);
}

.sc-specimen__source {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-dark);
    margin-bottom: var(--space-3);
}

.sc-specimen__text {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

/* Counts + split + formula as one closing block, so the bar sits
   against the numbers it describes instead of floating below them. */
.sc-summary {
    margin-top: var(--space-10);
    padding-top: var(--space-6);
    border-top: 1px solid var(--sc-rule);
}

.sc-summary .sc-counts {
    border-top: 0;
    border-bottom: 0;
}

.sc-summary .sc-counts__split {
    margin-top: var(--space-2);
}

.sc-summary__formula {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--brand-darker);
}

/* =========================================
   SHARED SECTION INTROS
   ========================================= */

.sc-projects__intro,
.sc-between__intro,
.sc-layer__intro {
    max-width: 54ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    margin-bottom: var(--space-8);
}

.sc-projects__closing {
    max-width: 54ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--brand-darker);
    font-weight: 600;
    margin-top: var(--space-8);
}

.sc-enroll {
    position: relative;
    overflow: hidden;
}

.sc-enroll .sc-section__inner {
    position: relative;
    z-index: 1;
}

/* Softer than the hero's: this one sits behind a white card, so the
   rings read at lower contrast without competing with the price. */
.sc-enroll__halo .sc-hero__ring {
    border-color: rgba(0, 123, 141, 0.09);
}

.sc-enroll__halo::before {
    opacity: 0.7;
}

/* =========================================
   11. ENROLMENT BOX  (التسجيل)
   =========================================
   Deliberately in the same family as the kit page's offer card:
   white ground, brand-dark keyline, generous shadow. Not identical —
   larger radius and a lighter type scale — so the two pages read as
   siblings rather than duplicates. */

.sc-enroll__card {
    position: relative;
    max-width: 520px;
    margin: 0 auto;
    background: var(--bg-white);
    border: 1.5px solid var(--brand-dark);
    border-radius: var(--radius-lg);
    padding: var(--space-10) var(--space-8);
    box-shadow: var(--shadow-lg);
    text-align: right;
}

/* Cohort label as a stamp on the card's left edge, in the same family
   as the kit page's .kit-offer__stamp — white ground, brand keyline,
   slight rotation. Softer angle here so the two read as siblings
   rather than copies. inset-inline-end is the LEFT side in RTL. */
.sc-enroll__eyebrow {
    position: absolute;
    top: -13px;
    inset-inline-end: var(--space-6);
    transform: rotate(-4deg);
    background: var(--bg-white);
    border: 2px solid var(--brand-dark);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
    color: var(--brand-dark);
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-1) var(--space-3);
    white-space: nowrap;
}

.sc-enroll__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    line-height: var(--leading-tight);
    color: var(--text-main);
    text-align: center;
    margin-bottom: var(--space-6);
}

.sc-enroll__price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}

/* A note directly beneath the price, so the figure above never reads
   as a single mandatory payment. Centred to sit with the price rather
   than with the list below it. */
.sc-enroll__inst {
    max-width: 42ch;
    margin: calc(var(--space-4) * -1) auto var(--space-6);
    text-align: center;
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.sc-enroll__inst-label {
    font-weight: 700;
    color: var(--brand-dark);
}

.sc-enroll__inst-label::after {
    content: " · ";
    color: var(--brand-darker);
}

.sc-enroll__inst-body {
    color: var(--text-main);
}

.sc-enroll__cta-wrap {
    display: flex;
    justify-content: center;
    margin-top: var(--space-8);
}

.sc-enroll__price-amount {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1;
    color: var(--text-main);
    white-space: nowrap;
}

.sc-enroll__price-currency {
    font-size: var(--text-lg);
    color: var(--brand-dark);
}

.sc-enroll__list {
    border-top: 1px solid var(--border-light);
    margin-bottom: var(--space-6);
}

.sc-enroll__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-light);
}

.sc-enroll__item-label {
    font-size: var(--text-base);
    color: var(--text-main);
}

.sc-enroll__item-values {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    white-space: nowrap;
}

.sc-enroll__item-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-main);
}

.sc-enroll__item-extra {
    font-size: var(--text-sm);
    color: var(--brand-darker);
}

.sc-enroll__dates {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-8);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
    margin-bottom: var(--space-8);
}

.sc-enroll__date-label {
    font-size: var(--text-sm);
    color: var(--text-main);
    margin-bottom: var(--space-1);
}

.sc-enroll__date-value {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--brand-dark);
    margin-inline-start: 0;
}

/* =========================================
   12. FAQ
   =========================================
   Same family as the kit page's FAQ: each question is its own white
   card that reacts on hover and takes a brand keyline when open.
   Native <details>, so it needs no JS and is keyboard accessible. */

.sc-faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: var(--container-md);
}

.sc-faq__item {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-5) var(--space-6);
    transition: border-color var(--transition-base);
}

.sc-faq__item:hover {
    border-color: rgba(0, 123, 141, 0.35);
}

.sc-faq__item[open] {
    border-color: var(--brand-light);
}

.sc-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-main);
    cursor: pointer;
    list-style: none;
}

.sc-faq__question::-webkit-details-marker {
    display: none;
}

.sc-faq__question::after {
    content: "+";
    font-size: var(--text-xl);
    font-weight: 400;
    color: var(--brand-dark);
    flex: none;
    transition: transform 0.35s var(--ease-out-expo);
}

.sc-faq__item[open] .sc-faq__question {
    color: var(--brand-dark);
}

.sc-faq__item[open] .sc-faq__question::after {
    transform: rotate(45deg);
}

.sc-faq__question:focus-visible {
    outline: 2px solid var(--brand-light);
    outline-offset: 4px;
    border-radius: var(--radius-sm);
}

.sc-faq__answer {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    border-top: 1px solid var(--border-light);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
}

/* =========================================
   13. REGISTRATION — pop-up
   =========================================
   Opened by the enrolment CTA, mirroring the kit page's checkout.
   Rendered outside <main> so it overlays the whole page. */

.sc-modal {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
}

.sc-modal[hidden] {
    display: none;
}

.sc-modal__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.sc-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 32rem;
    max-height: calc(100vh - var(--space-12));
    overflow-y: auto;
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-8) var(--space-6);
    direction: rtl;
    text-align: right;
    animation: scSheetIn 0.35s var(--ease-out-expo);
}

@keyframes scSheetIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.sc-modal__close {
    position: absolute;
    top: var(--space-4);
    inset-inline-end: var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--bg-body);
    border: none;
    border-radius: var(--radius-full);
    color: var(--text-main);
    cursor: pointer;
    transition: background var(--transition-base);
}

.sc-modal__close:hover {
    background: var(--sc-tint);
}

.sc-modal__title {
    font-size: var(--text-2xl);
    font-weight: 800;
    margin-bottom: var(--space-3);
}

.sc-modal__intro {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    margin-bottom: var(--space-6);
}

body.sc-modal-open {
    overflow: hidden;
}

.sc-register__placeholder {
    font-size: var(--text-base);
    color: var(--brand-darker);
    padding: var(--space-5);
    border: 1px dashed var(--sc-edge);
    border-radius: var(--radius-md);
}

.sc-register__form input[type="text"],
.sc-register__form input[type="email"],
.sc-register__form input[type="tel"],
.sc-register__form textarea {
    width: 100%;
    font-size: var(--text-base);
    color: var(--text-main);
    background: var(--bg-body);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    transition: border-color var(--transition-base);
}

.sc-register__form input[type="email"],
.sc-register__form input[type="tel"] {
    direction: ltr;
    text-align: left;
}

.sc-register__form input:focus {
    outline: none;
    border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px var(--sc-tint);
}

.sc-register__form input[type="submit"] {
    width: 100%;
    font-weight: 700;
    font-size: var(--text-base);
    color: #fff;
    background: var(--brand-dark);
    border: none;
    border-radius: var(--radius-full);
    padding: var(--space-4) var(--space-8);
    cursor: pointer;
    box-shadow: var(--shadow-brand);
    transition: background var(--transition-base);
}

.sc-register__form input[type="submit"]:hover {
    background: var(--brand-darker);
}

.sc-register__success-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-lg);
    font-weight: 800;
    color: var(--brand-dark);
    margin-bottom: var(--space-5);
}

.sc-register__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    background: var(--bg-gray);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
}

.sc-register__step-num {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-full);
    background: var(--sc-tint);
    color: var(--brand-darker);
    font-size: var(--text-sm);
    font-weight: 700;
}

.sc-register__step-text,
.sc-register__note {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
}

.sc-register__note {
    margin-top: var(--space-5);
}

/* =========================================
   08. SCHEDULE  (timeline)
   =========================================
   Still a <table> — a schedule is genuinely tabular data and screen
   readers should keep the row/column relationships — but presented as a
   two-month timeline rather than a grid.

   The numeral column becomes the time axis: a spine with a node per
   session, scroll-linked with the same --p contract as the layers. The
   node encodes the type (filled أساسية, hollow مقهى, half إضافية), so
   the repeated type text stops being the thing doing that work and
   drops back to quiet metadata. Café rows carry no numeral and no tick:
   the hollow node says it, which is what finally removes the mark that
   was impersonating a dash. */

.sc-schedule__intro {
    max-width: 54ch;
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-main);
    margin-bottom: var(--space-8);
}

.sc-schedule__scroll {
    overflow-x: auto;
}

.sc-schedule__table {
    position: relative;
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

/* The time axis. Sits under the node centres; nodes punch through it. */
.sc-schedule__table[data-sc-spine]::before,
.sc-schedule__table[data-sc-spine]::after {
    content: "";
    position: absolute;
    inset-block: 2.5rem var(--space-6);
    inset-inline-start: 11px;
    width: 1px;
}

.sc-schedule__table[data-sc-spine]::before {
    background: var(--sc-rule);
}

.sc-schedule__table[data-sc-spine]::after {
    background: var(--brand-dark);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
    will-change: transform;
}

.sc-schedule__th {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-darker);
    padding: 0 0 var(--space-3);
    border-bottom: 1px solid var(--sc-rule);
    white-space: nowrap;
    text-align: right;
}

/* Month divider: the cohort runs across two months, and the boundary
   was previously invisible. */
.sc-schedule__month-cell {
    padding: var(--space-6) 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--brand-dark);
    text-align: right;
    padding-inline-start: 34px;
}

.sc-schedule__cell {
    font-size: var(--text-base);
    color: var(--text-main);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--sc-rule);
    vertical-align: middle;
}

.sc-schedule__cell--num {
    position: relative;
    width: 34px;
    padding-inline-end: var(--space-3);
}

/* The node: type is shape, not repeated words. */
.sc-schedule__node {
    position: absolute;
    inset-inline-start: 6px;
    top: 50%;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    border-radius: var(--radius-full);
    border: 1.5px solid var(--brand-dark);
    background: var(--bg-body);
}

.sc-schedule__row--core .sc-schedule__node {
    background: var(--brand-dark);
}

.sc-schedule__row--extra .sc-schedule__node {
    background: linear-gradient(to bottom, var(--brand-dark) 50%, var(--bg-body) 50%);
}

.sc-schedule__num-text {
    display: inline-block;
    padding-inline-start: 26px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--brand-dark);
}

.sc-schedule__cell--name {
    font-weight: 600;
    padding-inline-end: var(--space-4);
}

.sc-schedule__cell--type {
    width: 116px;
    font-size: var(--text-sm);
    color: var(--text-main);
    white-space: nowrap;
}

.sc-schedule__cell--date {
    font-size: var(--text-sm);
    color: var(--brand-darker);
    white-space: nowrap;
}

.sc-schedule__row--cafe .sc-schedule__cell--name {
    font-weight: 400;
}

.sc-schedule__row--cafe .sc-schedule__cell--type {
    color: var(--brand-darker);
}

.sc-schedule__note {
    font-size: var(--text-base);
    color: var(--text-main);
    line-height: var(--leading-relaxed);
    margin-top: var(--space-6);
}

/* Below 640px the four columns stop fitting. Rows become stacked
   blocks on the same timeline, with the column headers reinstated per
   cell from data-label — the timeline reads better narrow than the
   table ever did. */
@media (max-width: 640px) {
    .sc-schedule__table,
    .sc-schedule__table tbody,
    .sc-schedule__row {
        display: block;
        width: 100%;
    }

    .sc-schedule__table thead {
        display: none;
    }

    .sc-schedule__month-cell {
        display: block;
    }

    .sc-schedule__row {
        position: relative;
        padding: var(--space-4) 0 var(--space-4) 0;
        padding-inline-start: 34px;
        border-bottom: 1px solid var(--sc-rule);
    }

    .sc-schedule__cell {
        display: block;
        width: auto;
        border-bottom: 0;
        padding: 0;
    }

    .sc-schedule__cell--num {
        position: static;
        width: auto;
    }

    .sc-schedule__node {
        inset-inline-start: 6px;
        top: var(--space-5);
        margin-top: 0;
    }

    .sc-schedule__num-text {
        padding-inline-start: 0;
    }

    .sc-schedule__cell--name {
        font-size: var(--text-lg);
        padding: var(--space-1) 0;
    }

    .sc-schedule__cell--type::before,
    .sc-schedule__cell--date::before {
        content: attr(data-label) ": ";
        color: var(--text-main);
        font-weight: 600;
    }
}

/* =========================================
   00. HAND-OFF TRANSITION  (the signature)
   =========================================
   One section passes the reader to the next. The rail's fill is
   scroll-linked, not triggered: --p is written every frame by
   smart-creator.js from the element's real viewport position, and
   the sentence surfaces with it.

   Deliberately does NOT carry .reveal-up — that helper sets
   opacity:0 and would fight the --p-driven opacity below. */

.sc-transition {
    position: relative;
    width: calc(100% - var(--space-12));
    max-width: var(--sc-measure);
    margin: var(--space-10) auto;
    padding: var(--space-6) var(--space-8);
    min-height: 104px;
    display: flex;
    align-items: center;
    background: var(--sc-tint);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.sc-transition__rail {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 3px;
    background: rgba(0, 123, 141, 0.18);
}

.sc-transition__rail::after {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 3px;
    height: 100%;
    background: var(--brand-dark);
    transform: scaleY(var(--p, 0));
    transform-origin: top;
    will-change: transform;
}

/* The sentence never fades: it is standalone copy the reader must be
   able to read at any scroll position. Only the rail is scroll-linked. */
.sc-transition__text {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-relaxed);
    color: var(--brand-darker);
    text-wrap: balance;
}

/* =========================================
   REDUCED MOTION
   =========================================
   Every state renders settled. The JS also writes --p:1 under this
   preference, so the rail is guarded in both layers — belt and braces,
   because a stuck rail would leave the seam looking half-drawn. */

@media (prefers-reduced-motion: reduce) {
    .sc-settle {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }


    .sc-transition__rail::after,
    .sc-layer__list[data-sc-spine]::after,
    .sc-schedule__table[data-sc-spine]::after {
        transform: scaleY(1) !important;
    }

    .sc-page__glow {
        transform: none !important;
    }

    .sc-hero__ring {
        animation: none !important;
    }

    .sc-cta,
    .sc-faq__question::after {
        transition: none !important;
    }

    .sc-cta:hover {
        transform: none !important;
    }
}

/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 600px) {
    .sc-transition {
        padding: var(--space-5) var(--space-6);
        min-height: 88px;
    }

    .sc-row {
        grid-template-columns: 40px 1fr;
        gap: var(--space-4);
    }

    .sc-counts__item {
        min-width: 50%;
    }

    .sc-enroll__card {
        padding: var(--space-8) var(--space-6);
    }

    /* Rows stay side-by-side at every width. Stacking them made each
       value sit under its own label, so the numbers landed wherever the
       label text happened to end instead of forming a column. Labels
       wrap instead; the values keep their alignment. */
    .sc-enroll__item {
        gap: var(--space-3);
    }

    .sc-enroll__item-label {
        min-width: 0;
    }

    .sc-enroll__item-values {
        flex-shrink: 0;
    }

    /* Anchor the two dates to the card edges rather than letting them
       drift together in the middle. */
    .sc-enroll__dates {
        justify-content: space-between;
        gap: var(--space-4);
    }
}