body.mock-fullscreen nav,
body.mock-fullscreen .bc,
body.mock-fullscreen .site-footer,
body.mock-fullscreen .mobile-sticky-cta {
    display: none !important;
}

body.mock-fullscreen {
    background: var(--bg);
    overflow-x: hidden;
}

    body.mock-fullscreen #sExam {
        position: fixed;
        inset: 0;
        z-index: 500;
        overflow-y: auto;
        background: var(--bg);
        padding-bottom: 96px; /* room for sticky action bar */
    }

    body.mock-fullscreen .page-wrap {
        max-width: 720px;
        margin: 0 auto;
        padding: 0 16px;
    }

    /* Topbar becomes a real fixed exam header, not a card sitting in a page */
    body.mock-fullscreen .me-topbar {
        position: sticky;
        top: 0;
        z-index: 10;
        margin: 0 -16px 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        backdrop-filter: blur(8px);
        background: rgba(10, 12, 18, .92);
    }

    /* Question fills the screen instead of sitting in a bordered card */
    body.mock-fullscreen .me-q-card {
        border: none;
        border-radius: 0;
        background: transparent;
        margin-bottom: 0;
    }

    body.mock-fullscreen .me-q-header {
        background: transparent;
        border-bottom: 1px solid var(--border);
        padding: 16px 0 12px;
    }

    body.mock-fullscreen .me-q-body {
        padding: 28px 0 8px;
    }

    body.mock-fullscreen .me-q-text {
        font-size: clamp(1rem, 2.4vw, 1.15rem);
    }

    /* ── STICKY ACTION BAR ────────────────────────────────────────────────
   Was the last child of a card, so it scrolled off-screen below the
   fold on any question with 4-5 options. Now anchored to viewport
   bottom, always reachable, with safe-area padding for iOS. ── */
    body.mock-fullscreen .me-q-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 20;
        background: linear-gradient(to top, var(--bg) 78%, transparent);
        border-top: 1px solid var(--border2);
        padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
        display: flex;
        justify-content: center;
    }

        body.mock-fullscreen .me-q-nav > .me-q-hint {
            display: none; /* redundant once the bar is always visible + answer-recorded strip exists */
        }

    body.mock-fullscreen .me-btn-next {
        display: none; /* shown via JS when answered */
        width: 100%;
        max-width: 480px;
        padding: 15px 20px;
        font-size: .95rem;
    }

    /* Full-width sticky bar needs the outer nav flex to allow the button to expand */
    body.mock-fullscreen .me-q-nav {
        align-items: stretch;
    }

        body.mock-fullscreen .me-q-nav .me-btn-next.show-flex {
            display: block;
        }

/* ── OPTION TEXT CONTRAST FIX ─────────────────────────────────────────
   Options were rendered in var(--text2), noticeably dimmer than the
   question text they answer. Bring them to full readable contrast at
   rest, not just on hover/select. ── */
.me-q-opt {
    color: var(--text);
    font-weight: 450;
}

    .me-q-opt:hover:not(:disabled) {
        color: var(--text);
    }

    .me-q-opt.selected {
        color: var(--text);
        font-weight: 600;
    }

/* ── PRE-TEST CTA — calmer, single primary action ────────────────────
   Original had a blinking red "exam mode" pill before the user had
   even started, plus two equal-weight competing CTAs right under the
   H1. Replace alarm-styling with reassurance; make the free start the
   obvious single next step, with pricing as a clearly secondary link. ── */
.exam-mode-pill {
    background: rgba(79, 141, 255, .06);
    border-color: rgba(79, 141, 255, .18);
    color: var(--accent);
}

    .exam-mode-pill .emp-dot {
        background: var(--accent);
        animation: none; /* no blinking pre-commitment — save urgency for the paywall, not the doorway */
    }

.cta-pair {
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

    .cta-pair .btn-solid {
        width: 100%;
        max-width: 420px;
        padding: 17px 32px;
        font-size: 1rem;
    }

    .cta-pair .btn-ghost {
        border: none;
        background: transparent;
        color: var(--text3);
        font-size: .82rem;
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
        padding: 6px 10px;
    }

        .cta-pair .btn-ghost:hover {
            color: var(--text2);
            background: transparent;
            border: none;
        }

/* ════════════════════════════════════════════════════════════════════════
   NEW SCREEN FLOW SHELL (mfS0..mfS5, mf-pip) — same behavior as the old
   sf-* classes, renamed into the new namespace.
   ════════════════════════════════════════════════════════════════════════ */
.mf-pip {
    height: 3px;
    border-radius: 100px;
    background: var(--border2);
    transition: background .35s, width .35s;
    width: 16px;
}

    .mf-pip.done {
        background: var(--accent3);
    }

    .mf-pip.active {
        background: var(--red);
        width: 26px;
    }

.mf-screen {
    display: none;
}

    .mf-screen.mf-active {
        display: block;
    }

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

    to {
        opacity: 1;
        transform: none;
    }
}

.mf-screen.mf-animate {
    animation: mfIn .38s cubic-bezier(.22, .68, 0, 1.2) both;
}

/* Domain rows / review cards reuse the same visual language as before,
   just under the mf- prefix so they don't collide with the old rp-/rv-
   classes if both scripts are ever loaded side by side during rollout. */
.mf-domain-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 9px;
}

.mf-domain-name {
    font-size: .8rem;
    color: var(--text2);
    width: 160px;
    flex-shrink: 0;
}

.mf-domain-track {
    flex: 1;
    height: 7px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
}

.mf-domain-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 1s cubic-bezier(.4,0,.2,1);
    width: 0%;
}

.mf-domain-pct {
    font-size: .8rem;
    font-weight: 700;
    width: 36px;
    text-align: right;
    flex-shrink: 0;
}

.mf-domain-badge {
    font-size: .62rem;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

.mf-badge-critical {
    background: rgba(255,71,87,.12);
    color: var(--red);
}

.mf-badge-needs {
    background: rgba(245,200,66,.12);
    color: var(--gold);
}

.mf-badge-ok {
    background: rgba(0,212,170,.1);
    color: var(--accent3);
}

.mf-rv-card {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    overflow: hidden;
    margin-bottom: 12px;
}

.mf-rv-header {
    padding: 10px 16px;
    background: var(--bg2);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

.mf-rv-num {
    font-size: .68rem;
    font-weight: 700;
    color: var(--text3);
}

.mf-rv-domain {
    font-size: .68rem;
    color: var(--text3);
}

.mf-rv-verdict {
    font-size: .7rem;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 100px;
}

    .mf-rv-verdict.correct {
        background: rgba(0,212,170,.1);
        color: var(--accent3);
    }

    .mf-rv-verdict.wrong {
        background: rgba(255,71,87,.1);
        color: var(--red);
    }

.mf-rv-body {
    padding: 16px 18px;
}

.mf-rv-qtext {
    font-size: .88rem;
    color: var(--text);
    line-height: 1.7;
    margin-bottom: 14px;
}

.mf-rv-answers {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.mf-rv-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.mf-rv-label {
    font-size: .66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    min-width: 80px;
    flex-shrink: 0;
    padding-top: 2px;
}

    .mf-rv-label.yours {
        color: var(--text3);
    }

    .mf-rv-label.correct {
        color: var(--accent3);
    }

.mf-rv-text {
    font-size: .82rem;
    color: var(--text2);
    line-height: 1.5;
}

    .mf-rv-text.wrong {
        color: var(--red);
    }

    .mf-rv-text.correct {
        color: var(--accent3);
    }

.mf-rv-explanation {
    padding: 10px 14px;
    background: rgba(0,212,170,.04);
    border: 1px solid rgba(0,212,170,.12);
    border-radius: var(--radius-sm);
    font-size: .8rem;
    color: var(--text2);
    line-height: 1.65;
}

.mf-rv-exp-label {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--accent3);
    margin-bottom: 5px;
}

.mf-rv-placeholder {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    padding: 18px;
    margin-bottom: 10px;
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
}

.mf-rv-ph-line {
    height: 10px;
    background: var(--border2);
    border-radius: 100px;
    margin-bottom: 10px;
}

    .mf-rv-ph-line.short {
        width: 45%;
    }

    .mf-rv-ph-line.med {
        width: 70%;
    }

/* ════════════════════════════════════════════════════════════════════════
   EXAM DATE STEP (mds-*) — new screen inserted before the paywall so
   RoadmapEngine has a real timeline to build against.
   ════════════════════════════════════════════════════════════════════════ */
.mds-wrap {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    padding: 26px 22px;
    text-align: center;
}

.mds-title {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 8px;
}

.mds-sub {
    font-size: .82rem;
    color: var(--text2);
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto 22px;
}

.mds-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.mds-opt {
    padding: 10px 16px;
    border: 1.5px solid var(--border2);
    border-radius: 100px;
    background: transparent;
    color: var(--text2);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}

    .mds-opt:hover {
        border-color: var(--accent);
        color: var(--text);
    }

    .mds-opt.mds-sel {
        background: var(--accent);
        border-color: var(--accent);
        color: #fff;
    }

.mds-confirm {
    display: inline-flex;
    padding: 13px 28px;
    border-radius: var(--radius-md);
    border: none;
    background: linear-gradient(135deg, var(--accent3), #00b890);
    color: #000;
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    font-family: inherit;
    margin-bottom: 10px;
}

.mds-skip {
    display: block;
    margin: 0 auto;
    background: transparent;
    border: none;
    color: var(--text3);
    font-size: .76rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-family: inherit;
}

/* ════════════════════════════════════════════════════════════════════════
   MOCK PAYWALL (mpw-*) — purpose-built, assurance-first design.
   Structure: eyebrow -> plan headline -> assurance line -> roadmap
   preview -> price cards -> guarantee (right at the decision point,
   not a buried footnote) -> trust row.
   ════════════════════════════════════════════════════════════════════════ */
.mpw-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mpw-eyebrow {
    font-size: .65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--accent3);
    text-align: center;
}

.mpw-headline {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text);
    text-align: center;
    line-height: 1.35;
    max-width: 480px;
    margin: 0 auto;
}

.mpw-assurance {
    text-align: center;
    font-size: .84rem;
    color: var(--text2);
    line-height: 1.6;
    max-width: 460px;
    margin: 0 auto;
}

    .mpw-assurance strong {
        color: var(--text);
    }

/* Roadmap preview — the concrete artifact that replaces a feature list */
.mpw-roadmap {
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    padding: 16px 18px;
}

.mpw-roadmap-label {
    font-size: .63rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text3);
    margin-bottom: 12px;
}

.mpw-days {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mpw-day {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}

    .mpw-day:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.mpw-daynum {
    font-size: .68rem;
    font-weight: 700;
    color: var(--accent3);
    white-space: nowrap;
    flex-shrink: 0;
    width: 68px;
    padding-top: 1px;
}

.mpw-domain {
    display: block;
    font-size: .82rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 2px;
}

.mpw-focus {
    display: block;
    font-size: .76rem;
    color: var(--text2);
    line-height: 1.5;
}

.mpw-day-locked .mpw-daynum {
    color: var(--text3);
}

.mpw-day-locked .mpw-domain {
    color: var(--text2);
}

/* Price cards */
.mpw-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.mpw-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border2);
    border-radius: var(--radius-xl);
    padding: 22px 20px;
}

    .mpw-card.mpw-anchor {
        border: 2px solid var(--accent3);
    }

.mpw-ribbon {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    padding: 3px 10px;
    background: var(--accent3);
    color: #0a1a14;
    border-radius: 100px;
    margin-bottom: 10px;
}

.mpw-plan-name {
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--text3);
    margin-bottom: 8px;
}

.mpw-price-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 6px;
}

.mpw-strike {
    font-size: .85rem;
    color: var(--text3);
    text-decoration: line-through;
}

.mpw-price {
    font-family: var(--font-display);
    font-size: 1.9rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}

.mpw-persub {
    font-size: .73rem;
    color: var(--text3);
}

.mpw-tag {
    display: inline-block;
    font-size: .72rem;
    color: var(--accent3);
    font-weight: 600;
    margin-bottom: 16px;
}

.mpw-feats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 18px;
    padding: 0;
}

    .mpw-feats li {
        font-size: .79rem;
        color: var(--text2);
        line-height: 1.5;
        padding-left: 18px;
        position: relative;
    }

        .mpw-feats li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: var(--accent3);
            font-weight: 700;
        }

.mpw-cta {
    width: 100%;
    padding: 13px;
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: .88rem;
    font-weight: 800;
    cursor: pointer;
    letter-spacing: -.01em;
    transition: opacity .15s;
    border: none;
}

    .mpw-cta.mpw-primary {
        background: linear-gradient(135deg, var(--accent3), #00b890);
        color: #000;
    }

    .mpw-cta.mpw-secondary {
        background: transparent;
        color: var(--text);
        border: 1.5px solid var(--border2);
    }

    .mpw-cta:hover:not(:disabled) {
        opacity: .88;
    }

    .mpw-cta:disabled {
        opacity: .6;
        cursor: default;
    }

/* Guarantee — moved from a footnote to right beside the price cards,
   at the exact point someone decides whether to click. */
.mpw-guarantee {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    font-size: .8rem;
    color: var(--text2);
    background: rgba(0, 212, 170, .05);
    border: 1px solid rgba(0, 212, 170, .18);
    border-radius: var(--radius-md);
    padding: 12px 16px;
}

.mpw-guarantee-icon {
    color: var(--accent3);
    font-weight: 700;
    flex-shrink: 0;
}

.mpw-error {
    color: var(--red);
    font-size: .78rem;
    text-align: center;
    min-height: 1em;
}

.mpw-trust-row {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    font-size: .68rem;
    color: var(--text3);
}

/* ════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 680px) {
    body.mock-fullscreen .page-wrap {
        padding: 0 14px;
    }

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

    .mds-opts {
        gap: 6px;
    }

    .mf-domain-name {
        width: 120px;
    }

    .mpw-daynum {
        width: 56px;
    }
}