/* ============================================================
   Affiliate Onboarding — page-specific styles
   Consumes tokens from main.css (:root). No new palette.
   Reuses: .container .section .section-purple .section-header .btn*
           .section-cta .support__channel* .dashboard-window (dark mockup)
           .reveal
   ============================================================ */

/* Fail-safe scroll-reveal: content is visible by default and only starts
   hidden when JS is active (html.onb-js). Same pattern as brand-assets.css —
   if JS or the observer never runs, nothing stays invisible. Uses `translate`
   (not `transform`) so the reveal composes with card hover lifts. */
.reveal { opacity: 1; transform: none; }
.onb-js .reveal {
    opacity: 0;
    translate: 0 24px;
    transition: opacity 0.6s ease, translate 0.6s ease,
                transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.onb-js .reveal.visible { opacity: 1; translate: none; }
@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .onb-js .reveal { opacity: 1; translate: none; transition: none; }
}

/* main.css hides .support__channel until main.js reveals it. Here the cards
   are driven by .reveal instead, so opt them out of that global rule. */
.onb .support__channel { opacity: 1; transform: none; }

/* Local, page-scoped helpers (not part of the global system) */
.onb {
    --onb-card-border: 1px solid rgba(119, 82, 254, 0.12);
    --onb-card-shadow: 0 10px 30px rgba(16, 24, 40, 0.05);
    --onb-card-shadow-hover: 0 20px 48px rgba(119, 82, 254, 0.15);
    --onb-surface: linear-gradient(135deg, #F7F6FF 0%, #FFFFFF 60%);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.onb-hero {
    background: linear-gradient(180deg, var(--bg-light-purple) 0%, var(--bg-lavender) 100%);
    padding: 120px 0 var(--space-xl);
    overflow: hidden;
}

.onb-hero__container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
}

.onb-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: var(--space-md);
    transition: color 0.2s ease;
}

.onb-hero__eyebrow:hover { color: var(--color-primary-dark); }

.onb-hero__title {
    font-size: clamp(2.125rem, 4.6vw, 3rem);
    line-height: 1.1;
    margin-bottom: var(--space-md);
}

.onb-hero__title .text-gradient { display: inline-block; }

.onb-hero__desc {
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 48ch;
    margin-bottom: var(--space-lg);
}

.onb-hero__cta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.onb-hero__visual { min-width: 0; }

/* Reader (assets/css/reader.css) framing the dashboard captures. They are UI
   screenshots of differing heights, so the frame keeps one ratio and fits the
   image inside it instead of cropping. */
.onb-hero__visual .reader {
    --reader-aspect: 1000 / 500;
    --reader-fit: contain;
    --reader-bg: #fff;
}

/* Captures differ in height; anchoring them to the top keeps the page header
   in the same spot on every slide, so the leftover space falls below the
   content instead of splitting above and under it. */
.onb-hero__visual .reader-frame img { object-position: top center; }

.onb-hero__caption {
    margin-top: var(--space-sm);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-muted);
    text-align: center;
}

/* Panel inside the window ------------------------------------- */
.onb-panel + .onb-panel__stats { margin-top: var(--space-md); }

.onb-panel__label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.onb-panel__label--plain { color: var(--text-muted); }

.onb-panel__hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-xs);
}

/* Referral-link row */
.onb-linkrow {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 10px 10px var(--space-sm);
    background: var(--bg-white);
    border: 1px solid rgba(119, 82, 254, 0.18);
    border-radius: var(--radius-sm);
}

.onb-linkrow__url {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    color: var(--text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onb-linkrow__url b { color: var(--color-primary); font-weight: 700; }

.onb-linkrow__btn {
    flex: none;
    padding: 6px 14px;
    border-radius: 100px;
    background: var(--bg-soft-purple);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 700;
}

.onb-linkrow__btn--solid {
    background: var(--color-primary);
    color: var(--text-on-dark);
}

.onb-linkrow__btn--ghost {
    background: transparent;
    color: var(--text-muted);
    text-decoration: underline;
    padding: 6px 4px;
}

/* "Create a new link" field — prefilled prefix + the token you choose */
.onb-field {
    display: flex;
    align-items: stretch;
    background: var(--bg-white);
    border: 1px solid rgba(119, 82, 254, 0.18);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.onb-field__prefix {
    flex: none;
    padding: 10px var(--space-sm);
    background: var(--bg-light-purple);
    border-right: 1px solid rgba(119, 82, 254, 0.18);
    font-size: 0.8125rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.onb-field__text {
    flex: 1;
    min-width: 0;
    padding: 10px var(--space-sm);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.onb-field__submit {
    display: inline-block;
    margin-top: var(--space-sm);
    border-radius: var(--radius-sm);
    padding: 8px 18px;
}

/* List of already created links */
.onb-linklist {
    list-style: none;
    margin-top: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.onb-linklist li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 10px var(--space-sm);
    background: var(--bg-white);
    border: 1px solid rgba(119, 82, 254, 0.10);
    border-radius: var(--radius-sm);
}

.onb-linklist__name {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
}

.onb-linklist__url {
    font-size: 0.75rem;
    color: var(--text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mini stat strip (hero) */
.onb-panel__stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-xs);
}

.onb-ministat {
    padding: 10px var(--space-sm);
    background: var(--bg-white);
    border: 1px solid rgba(119, 82, 254, 0.10);
    border-radius: var(--radius-sm);
}

.onb-ministat__label {
    display: block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
}

.onb-ministat__value {
    display: block;
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Commission ledger (step 5) */
.onb-ledger {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.onb-ledger li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-sm);
    padding: 12px var(--space-sm);
    background: var(--bg-white);
    border: 1px solid rgba(119, 82, 254, 0.10);
    border-radius: var(--radius-sm);
}

.onb-ledger__date {
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.onb-ledger__sum {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

.onb-status {
    padding: 4px 12px;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.onb-status--pending {
    background: rgba(255, 185, 1, 0.18);
    color: #8A6300;
}

.onb-status--due {
    background: var(--bg-soft-purple);
    color: var(--color-primary-dark);
}

.onb-status--paid {
    background: rgba(66, 189, 136, 0.16);
    color: var(--color-success-dark);
}

/* ------------------------------------------------------------
   STEP SHORTCUTS (under the hero)
   ------------------------------------------------------------ */
.onb-toc {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-xl);
}

.onb-toc__item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding: 10px var(--space-md) 10px var(--space-sm);
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(119, 82, 254, 0.14);
    color: var(--text-secondary);
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.onb-toc__item:hover {
    background: var(--bg-white);
    border-color: rgba(119, 82, 254, 0.35);
    color: var(--text-primary);
}

.onb-toc__num {
    flex: none;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--bg-soft-purple);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 700;
}

/* ------------------------------------------------------------
   STEPS
   ------------------------------------------------------------ */
.onb-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
    align-items: center;
    padding: var(--space-xl) 0;
    border-top: 1px solid rgba(119, 82, 254, 0.10);
    scroll-margin-top: 96px;
}

.onb-step:first-of-type { border-top: none; padding-top: 0; }

/* Zig-zag: even steps put the visual on the left (desktop only) */
@media (min-width: 901px) {
    .onb-step:nth-of-type(even) .onb-step__visual { order: -1; }
}

.onb-step__body { min-width: 0; }
.onb-step__visual { min-width: 0; }

.onb-step__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

.onb-step__num {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--text-on-dark);
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
}

.onb-step__title {
    font-size: 1.625rem;
    line-height: 1.2;
    margin-bottom: var(--space-sm);
}

.onb-step__text {
    color: var(--text-secondary);
    margin-bottom: var(--space-sm);
}

.onb-step__link { margin-top: var(--space-xs); }

/* Dashboard labels quoted in the copy */
.onb-step__text strong,
.onb-step__note strong,
.onb-notes strong { color: var(--text-primary); font-weight: 700; }

.onb-step__text em,
.onb-feature__text em { font-style: normal; font-weight: 600; color: var(--text-primary); }

.onb-code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--bg-light-purple);
    color: var(--color-primary-dark);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8em;
    /* A URL offers break opportunities after "?" and "=", which split the token
       across lines and read as two separate strings. Keep it in one piece —
       0.8em keeps the longest example inside a 320px column. */
    white-space: nowrap;
}

.onb-step__note {
    grid-column: 1 / -1;
    margin-top: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light-purple);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

/* Notes list under the step copy */
.onb-notes {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.onb-notes li {
    position: relative;
    padding-left: 26px;
    font-size: 0.9375rem;
    color: var(--text-secondary);
}

.onb-notes li::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 0.62em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
    opacity: 0.55;
}

.onb-notes a {
    color: var(--color-primary);
    font-weight: 600;
}

/* Step 4 — full-width step: copy on top, mockup + metric legend below */
.onb-step--stack {
    grid-template-columns: minmax(0, 1fr);
}

.onb-step--stack .onb-step__body { max-width: 640px; }

.onb-step__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: var(--space-xl);
    align-items: center;
}

.onb-dash { min-width: 0; }

.onb-metrics {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.onb-metric {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-white);
    border: var(--onb-card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--onb-card-shadow);
}

.onb-metric__term {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 2px;
}

.onb-metric__desc {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Step 3 — where to share */
.onb-channels {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
}

.onb-channel {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--bg-white);
    border: var(--onb-card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--onb-card-shadow);
    font-weight: 600;
    font-size: 0.9375rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.onb-channel svg {
    flex: none;
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .onb-channel:hover {
        transform: translateY(-4px);
        box-shadow: var(--onb-card-shadow-hover);
        border-color: rgba(119, 82, 254, 0.28);
    }
}

/* ------------------------------------------------------------
   DASHBOARD FEATURES
   ------------------------------------------------------------ */
.onb-features {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
}

.onb-feature {
    background: var(--bg-white);
    border: var(--onb-card-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--onb-card-shadow);
    padding: var(--space-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 1024px) {
    .onb-feature:hover {
        transform: translateY(-6px);
        box-shadow: var(--onb-card-shadow-hover);
        border-color: rgba(119, 82, 254, 0.28);
    }
}

/* Seven cards never fill a 3- or 2-column grid evenly — the last one spans
   the full row and switches to a horizontal layout so the trailing gap reads
   as intentional. */
.onb-feature:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-md);
    align-items: center;
}

.onb-feature:last-child .onb-feature__icon {
    grid-row: 1 / span 2;
    margin-bottom: 0;
}

.onb-feature__icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-md);
    background: var(--bg-soft-purple);
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.onb-feature__icon svg { width: 24px; height: 24px; }

.onb-feature__title {
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.onb-feature__text {
    font-size: 0.9375rem;
    color: var(--text-secondary);
    line-height: 1.55;
}

.onb-feature__text a {
    color: var(--color-primary);
    font-weight: 600;
}

/* ------------------------------------------------------------
   NEED HELP (reuses .support__channel from main.css)
   ------------------------------------------------------------ */
.onb-help__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
    align-items: stretch;
}

.onb-help__grid .support__channel {
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.onb-help__grid .support__channel-body { min-width: 0; }

.onb-help__grid .support__channel-title,
.onb-help__grid .support__channel-text {
    display: block;
}

.onb-help__grid .support__channel-text strong {
    color: var(--color-primary);
    font-weight: 700;
    white-space: nowrap;
}

@media (min-width: 1024px) {
    .onb-help__grid .support__channel:hover {
        transform: translateY(-6px);
        box-shadow: var(--onb-card-shadow-hover);
        border-color: rgba(119, 82, 254, 0.28);
    }
}

/* ------------------------------------------------------------
   FINAL CTA
   ------------------------------------------------------------ */
.onb-cta-note {
    margin-top: var(--space-md);
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.75);
}

.onb-cta-note a {
    color: var(--text-on-dark);
    font-weight: 600;
}

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
    .onb-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .onb-help__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .onb-hero { padding-top: 104px; }

    .onb-hero__container,
    .onb-step,
    .onb-step__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-lg);
    }

    .onb-toc {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        margin-top: var(--space-lg);
    }

    .onb-step { padding: var(--space-lg) 0; }
    .onb-step__title { font-size: 1.375rem; }
    .onb-step--stack .onb-step__body { max-width: none; }

}

@media (max-width: 600px) {
    .onb-features,
    .onb-help__grid,
    .onb-channels {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Equal-width stacked buttons read better than a wide one over a short one */
    .onb-hero__cta .btn {
        width: 100%;
        justify-content: center;
    }

    .app-window__body { padding: var(--space-sm); }

    .onb-panel__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .onb-ministat { padding: 8px 10px; }
    .onb-ministat__value { font-size: 0.9375rem; }

    /* Keep date · amount · status on one line — it reads as a ledger row */
    .onb-ledger li { gap: var(--space-xs); padding: 10px 12px; }
    .onb-ledger__date { font-size: 0.75rem; }
    .onb-ledger__sum { font-size: 0.875rem; }
    .onb-status { padding: 4px 10px; font-size: 0.625rem; }

    .onb-feature { padding: var(--space-md); }
}