/* ============================================================
   Sorna — کمپین «از ایده تا بازار»
   Styles for /campaign/ and /campaign/profile.html.

   Loaded AFTER styles.css and inherits every design token from it:
   the ground, the text ramp, the type scale, the gutter and the
   section rhythm all come from there. Nothing is redefined here.

   Every class is prefixed `cx-` so this file can never collide with
   the main page's cascade — the two stylesheets are served together
   and styles.css owns names like .card-navy and .program.
   ============================================================ */

:root {
    /* The campaign has two tracks, and the source document already
       colour-codes them: 🟣 for ایده, 🟠 for کسب‌وکار. The orange is
       the brand accent as-is. The violet is the logo's own arm colour
       (#443CB0, see <defs id="markNavy">) lifted until it clears 4.5:1
       on the #030509 ground — 5.5:1 as set. It is brand geometry, not
       a second accent invented for this page. */
    --track-idea: #7C74FF;
    --track-idea-dim: rgba(124, 116, 255, 0.12);
    --track-idea-line: rgba(124, 116, 255, 0.28);
    --track-idea-soft: rgba(124, 116, 255, 0.45);

    --track-biz: #fc690d;
    --track-biz-dim: rgba(252, 105, 13, 0.1);
    --track-biz-line: rgba(252, 105, 13, 0.28);
    --track-biz-soft: rgba(252, 105, 13, 0.45);

    /* Default for anything not scoped to a track. Components read
       --track / --track-dim / --track-line and never the pair above,
       so one class serves both columns. */
    --track: var(--color-primary);
    --track-dim: rgba(252, 105, 13, 0.1);
    --track-line: rgba(252, 105, 13, 0.28);
    --track-soft: rgba(252, 105, 13, 0.45);
}

/* Tailwind's preflight is off (styles.css owns the reset), so nothing in
   the cascade says `[hidden] { display: none }` — and the UA rule that does
   is outranked by any class selector. That is why styles.css carries
   `.mobile-nav[hidden]` and `.nav-scrim[hidden]` by hand. These pages build
   their DOM in JS and toggle `hidden` on containers that also carry a
   display rule, so state the reset once instead. */
[hidden] { display: none !important; }

.cx-t-idea {
    --track: var(--track-idea);
    --track-dim: var(--track-idea-dim);
    --track-line: var(--track-idea-line);
    --track-soft: var(--track-idea-soft);
}

.cx-t-biz {
    --track: var(--track-biz);
    --track-dim: var(--track-biz-dim);
    --track-line: var(--track-biz-line);
    --track-soft: var(--track-biz-soft);
}

/* ── Reveal ──────────────────────────────────────────────────
   Deliberately NOT the site's .reveal / js-motion pair. That one is
   driven by GSAP inside main.js, and these pages do not load either.
   The arming class is set by an inline head script and dropped by
   campaign.js — or by that script's own 3s failsafe if campaign.js
   never arrives, so a blocked script can never leave the page blank.
   ============================================================ */
.cx-armed .cx-in {
    opacity: 0;
    transform: translateY(1.75rem);
}

.cx-in {
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.cx-in.is-shown {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .cx-armed .cx-in { opacity: 1; transform: none; }
    .cx-in { transition: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.cx-hero {
    position: relative;
    padding-block: calc(var(--header-h) + clamp(3rem, 8vw, 7rem)) var(--section-y);
    overflow: hidden;
}

.cx-hero-glow {
    position: absolute;
    inset-block-start: -12rem;
    inset-inline-end: -8rem;
    width: min(46rem, 90vw);
    aspect-ratio: 1;
    pointer-events: none;
}

.cx-hero-title {
    max-width: 18ch;
    text-wrap: balance;
}

.cx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    margin-top: 2.25rem;
}

/* ── The funnel: ۲۰۰ → ۴۰ → ۲۰ ───────────────────────────────
   The campaign's defining fact is that it narrows. Three figures in
   a row, each smaller in weight than the last, with the arrow drawn
   as a real element so it survives a wrap onto two lines. */
.cx-funnel {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
    margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.cx-funnel-step {
    flex: 1 1 9rem;
    min-width: 8.5rem;
    padding: clamp(1rem, 2.2vw, 1.5rem);
    border-radius: 1.25rem;
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
}

.cx-funnel-step:first-child { border-color: var(--border-accent); }

.cx-funnel-n {
    display: block;
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.5rem);
    font-weight: 900;
    line-height: 1;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}

.cx-funnel-step:first-child .cx-funnel-n { color: var(--color-primary); }

.cx-funnel-label {
    display: block;
    margin-top: 0.5rem;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    color: var(--text-4);
    line-height: 1.6;
}

.cx-funnel-arrow {
    display: flex;
    align-items: center;
    color: var(--text-4);
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
}

/* ============================================================
   STAGE SPINE
   The five stages are a real sequence, so they are drawn as one:
   a continuous rule down the inline-start edge with a node per
   stage. The numbering is the document's own مرحله ۱..۵.
   ============================================================ */
.cx-spine {
    position: relative;
    display: grid;
    gap: 1rem;
    list-style: none;
    padding-inline-start: 2.75rem;
}

.cx-spine::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.9375rem;
    inset-block: 1.5rem;
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(to bottom,
        var(--border-accent),
        var(--border-navy) 55%,
        transparent);
}

.cx-stage {
    position: relative;
    padding: clamp(1.25rem, 2.6vw, 1.75rem);
    border-radius: 1.25rem;
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    transition: border-color 0.4s var(--ease-soft);
}

.cx-stage::before {
    content: "";
    position: absolute;
    inset-inline-start: -2.35rem;
    top: clamp(1.5rem, 2.8vw, 2rem);
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-bg), 0 0 14px rgba(252, 105, 13, 0.55);
}

@media (hover: hover) {
    .cx-stage:hover { border-color: var(--border-accent); }
}

.cx-stage-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 0.875rem;
    margin-bottom: 0.625rem;
}

.cx-stage-n {
    font-size: 0.8125rem;
    font-weight: 900;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.cx-list {
    display: grid;
    gap: 0.4rem;
    margin-top: 0.875rem;
    padding-inline-start: 1.1rem;
    color: var(--text-3);
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.75;
}

.cx-list li::marker { color: var(--track); }

/* ============================================================
   TRACK CARDS
   ============================================================ */
.cx-tracks {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .cx-tracks { grid-template-columns: repeat(2, 1fr); }
}

.cx-track {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.25rem);
    border-radius: 1.5rem;
    background: linear-gradient(160deg, var(--track-dim), rgba(10, 15, 26, 0.6) 60%);
    border: 1px solid var(--track-line);
}

.cx-track-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.875rem;
    background: var(--track-dim);
    border: 1px solid var(--track-line);
    color: var(--track);
    font-size: 1.25rem;
    margin-bottom: 1.125rem;
}

.cx-track-title {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 900;
    color: var(--text-1);
    line-height: 1.35;
}

.cx-track-kicker {
    display: block;
    margin-bottom: 0.375rem;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 700;
    color: var(--track);
}

.cx-track-body { flex: 1; }

.cx-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem;
    list-style: none;
}

.cx-chip {
    padding: 0.3125rem 0.8125rem;
    border-radius: 100px;
    background: var(--track-dim);
    border: 1px solid var(--track-line);
    color: var(--track);
    font-weight: 700;
    font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
    white-space: nowrap;
}

/* ============================================================
   HOMEWORK + WORKSHOP CARDS
   ============================================================ */

/* Group header inside a track block. It has to outrank the goal line
   directly above it, which .t-meta was not doing — both rendered at
   the same weight and the label stopped reading as a header. */
.cx-sub {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 1rem;
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    font-weight: 700;
    color: var(--text-2);
}

.cx-sub::before {
    content: "";
    inline-size: 1.25rem;
    block-size: 2px;
    border-radius: 2px;
    flex-shrink: 0;
    background: var(--track);
}

.cx-grid {
    display: grid;
    gap: clamp(0.875rem, 2vw, 1.25rem);
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cx-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1200px) {
    .cx-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.cx-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: clamp(1.125rem, 2.4vw, 1.5rem);
    border-radius: 1.25rem;
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
    border-top: 2px solid var(--track);
    transition: border-color 0.4s var(--ease-soft), translate 0.4s var(--ease-soft);
}

@media (hover: hover) {
    .cx-card:hover { translate: 0 -3px; }
}

.cx-card-n {
    font-size: 0.75rem;
    font-weight: 900;
    color: var(--track);
    font-variant-numeric: tabular-nums;
}

.cx-card-title {
    font-size: clamp(1rem, 0.95rem + 0.35vw, 1.1875rem);
    font-weight: 700;
    color: var(--text-1);
    line-height: 1.5;
}

.cx-out {
    margin-top: auto;
    padding-top: 0.875rem;
    border-top: 1px dashed var(--border-subtle);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    color: var(--text-4);
    line-height: 1.75;
}

.cx-out strong {
    color: var(--text-2);
    font-weight: 700;
}

/* Mentor and instructor are unassigned in the source document. Rather
   than invent names, the slot is drawn as an open placeholder — it
   reads as a decision still to be made, not as a rendering bug. */
.cx-tbd {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.625rem;
    border-radius: 100px;
    border: 1px dashed var(--border-subtle);
    color: var(--text-4);
    font-size: 0.75rem;
    font-weight: 700;
}

/* ============================================================
   BADGES + JUDGING CRITERIA
   ============================================================ */
.cx-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.9375rem;
    border-radius: 100px;
    background: rgba(252, 105, 13, 0.1);
    border: 1px solid var(--border-accent);
    color: var(--color-primary);
    font-weight: 700;
    font-size: clamp(0.75rem, 1vw, 0.8125rem);
}

.cx-criteria {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    list-style: none;
}

.cx-criterion {
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
    text-align: center;
}

.cx-criterion span {
    display: block;
    font-weight: 700;
    color: var(--text-1);
    font-size: clamp(0.875rem, 1vw, 1rem);
}

.cx-criterion small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-4);
    font-size: 0.75rem;
}

/* ============================================================
   PARTNERS
   ============================================================ */
.cx-partner-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    list-style: none;
}

.cx-partner {
    padding: 0.5rem 1rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    color: var(--text-3);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
}

/* ============================================================
   THE PROGRESS MAP
   The source document specifies this literally — ●○○○○○○○ 12% —
   as the thing that should replace a long single-page form. It is
   built as a real component, not typographic dots, so the state is
   available to assistive technology as a progressbar.
   ============================================================ */
.cx-map {
    position: sticky;
    top: calc(var(--header-h) + 0.75rem);
    z-index: 20;
    padding: clamp(0.875rem, 2vw, 1.25rem);
    border-radius: 1.25rem;
    background: rgba(6, 11, 22, 0.92);
    backdrop-filter: blur(12px);
    border: 1px solid var(--border-subtle);
}

.cx-map-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.cx-map-step {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 700;
    color: var(--text-1);
}

.cx-map-pct {
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 900;
    color: var(--track);
    font-variant-numeric: tabular-nums;
}

.cx-dots {
    display: flex;
    gap: 0.4375rem;
    list-style: none;
}

/* The <li> is the flex item, not the button inside it. Putting the
   `flex: 1` on the button instead left every list item sized to its
   content — and an empty button is 0px wide, so the whole map
   rendered as nothing at all. */
.cx-dots > li {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
}

.cx-dot {
    position: relative;
    flex: 1 1 auto;
    height: 0.5rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.08);
    border: 0;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.35s var(--ease-soft);
}

.cx-dot[disabled] { cursor: not-allowed; }

/* Three states have to be told apart at a glance, because knowing where
   you are is the whole job of the map: done is the track colour muted,
   now is the track colour at full strength with a glow, and everything
   ahead stays grey. Done and now sharing one colour made the map say
   only "some progress", not "you are here". */
.cx-dot.is-done { background: var(--track-soft); }
.cx-dot.is-now { background: var(--track); box-shadow: 0 0 12px var(--track-line); }

/* The tap target is the 8px bar plus transparent padding above and
   below, so it clears 44px without the bar itself getting fat.
   1rem of padding gave 40px — close enough to look right and still
   short of the threshold, which is exactly how it gets missed. */
.cx-dot::before {
    content: "";
    position: absolute;
    inset-block: -1.125rem;
    inset-inline: 0;
}

/* ============================================================
   WIZARD
   ============================================================ */
.cx-wizard {
    display: grid;
    gap: 1.25rem;
    max-width: 46rem;
    margin-inline: auto;
}

.cx-panel {
    padding: clamp(1.25rem, 3vw, 2.25rem);
    border-radius: 1.5rem;
    background: var(--color-bg-card);
    border: 1px solid var(--border-subtle);
}

.cx-panel-kicker {
    display: block;
    font-size: clamp(0.75rem, 1vw, 0.875rem);
    font-weight: 700;
    color: var(--track);
    margin-bottom: 0.5rem;
}

.cx-panel-title {
    font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    font-weight: 900;
    color: var(--text-1);
    line-height: 1.35;
    margin-bottom: 0.5rem;
    text-wrap: balance;
}

.cx-fields {
    display: grid;
    gap: 0;
    margin-top: 1.5rem;
}

/* Two short fields sit side by side from tablet up; anything longer
   keeps the full measure. */
.cx-field-pair {
    display: grid;
    gap: 0 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cx-field-pair { grid-template-columns: repeat(2, 1fr); }
}

.cx-hint {
    display: block;
    margin-top: 0.375rem;
    font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
    color: var(--text-4);
    line-height: 1.7;
}

/* Multi-choice sets — «از سرنا چه می‌خواهید؟», «چالش‌ها» — are
   checkboxes drawn as chips. A column of native boxes reads as a
   tax form; this reads as picking things. */
.cx-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.cx-opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    min-height: 44px;
    padding: 0.5rem 1rem;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    color: var(--text-2);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.cx-opt input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.cx-opt:has(input:checked) {
    background: var(--track-dim);
    border-color: var(--track-line);
    color: var(--track);
    font-weight: 700;
}

.cx-opt:has(input:focus-visible) {
    outline: 2px solid var(--track);
    outline-offset: 3px;
}

.cx-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

.cx-ghost-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.625rem 1.25rem;
    border-radius: 100px;
    background: transparent;
    border: 1px solid var(--border-subtle);
    color: var(--text-3);
    font-family: inherit;
    font-size: clamp(0.875rem, 1.1vw, 1rem);
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.cx-ghost-btn:hover { border-color: var(--track-line); color: var(--text-1); }
.cx-ghost-btn[hidden] { display: none; }

/* Autosave receipt. Quiet by default, so it never competes with the
   field the person is actually filling in. */
.cx-saved {
    font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
    color: var(--text-4);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.cx-saved.is-on { opacity: 1; }

/* ── Review step ─────────────────────────────────────────── */
.cx-review {
    display: grid;
    gap: 0.875rem;
    margin-top: 1.5rem;
}

.cx-review-group {
    padding: 1rem 1.125rem;
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border-subtle);
}

.cx-review-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 0.625rem;
    margin-bottom: 0.75rem;
    border-bottom: 1px solid var(--border-subtle);
}

.cx-review-title {
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    font-weight: 700;
    color: var(--text-1);
}

/* Label and answer on one row from tablet up, stacked on a phone where
   a two-column split would leave both halves too narrow to read. */
.cx-review-rows {
    display: grid;
    gap: 0.5rem 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .cx-review-rows { grid-template-columns: minmax(7rem, 11rem) 1fr; }
    .cx-review-k { padding-top: 0.1rem; }
}

.cx-review-k {
    font-size: clamp(0.75rem, 0.95vw, 0.8125rem);
    color: var(--text-4);
    line-height: 1.7;
}

.cx-review-v {
    margin: 0;
    color: var(--text-1);
    font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.cx-review-v.is-empty { color: var(--text-4); }

.cx-review-edit {
    flex-shrink: 0;
    background: none;
    border: 0;
    padding: 0;
    color: var(--track);
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ── Track picker on the wizard's front door ─────────────── */
.cx-pick {
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .cx-pick { grid-template-columns: repeat(2, 1fr); }
}

.cx-pick-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: clamp(1.25rem, 3vw, 1.75rem);
    border-radius: 1.25rem;
    background: linear-gradient(160deg, var(--track-dim), rgba(10, 15, 26, 0.6) 60%);
    border: 1px solid var(--track-line);
    color: inherit;
    font-family: inherit;
    text-align: start;
    cursor: pointer;
    transition: translate 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out);
}

@media (hover: hover) {
    .cx-pick-btn:hover {
        translate: 0 -4px;
        box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
    }
}

/* ============================================================
   NOTICE — the honest banner about what is and is not wired up
   ============================================================ */
.cx-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1.125rem;
    border-radius: 1rem;
    background: rgba(252, 105, 13, 0.06);
    border: 1px solid var(--border-accent);
    color: var(--text-3);
    font-size: clamp(0.8125rem, 1vw, 0.9375rem);
    line-height: 1.75;
}

.cx-notice-icon {
    color: var(--color-primary);
    flex-shrink: 0;
    line-height: 1.75;
}

/* ============================================================
   FOOT NAV — previous/next page pair
   ============================================================ */
.cx-footnav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: center;
}