/* ==========================================================================
   Student Profiler module — isolated styles.

   A clean WHITE centred form on a cream ground, matching the ODA site theme:
   brand BLUE #1a0088 primary, ORANGE #ff5e32 CTA, flat icon-card options that
   fill blue when selected, a top section stepper, Roboto/Poppins type. Drives
   the degree-adaptive Student Profiler questions, with degree-picker cards
   (.sp-card*) and a visible degree chip.

   Scoped under .sp-root / prefixed `sp-`, so it can't affect (or be affected
   by) the global styles.css or the evaluator.
   ========================================================================== */

.sp-root {
    /* ---- mim-essay palette ---- */
    --indigo: #1a0088;          /* primary brand */
    --indigo-deep: #100258;     /* darker indigo (active rings) */
    --indigo-soft: #ebe8f5;     /* selected option wash */
    --indigo-line: #cdc6ee;     /* selected option border */

    --red1: #ff5e32;            /* CTA gradient start */
    --red2: #d8431d;            /* CTA gradient end */

    --ink: #222222;
    --ink2: #4c4c4c;
    --muted: #6e6e6e;
    --muted2: #999999;

    --page: #f4f1ec;            /* light ground */
    --paper: #ffffff;
    --field: #ffffff;
    --field-rest: #f7f7f7;      /* unselected indicator fill */
    --line: #e2e3ee;
    --line2: #d6d8e6;
    --border-ind: #adadad;

    --ok: #2e9557;

    --radius: 6px;
    --radius-lg: 12px;
    --radius-pill: 36px;

    --cta-grad: linear-gradient(91deg, #ff5e32 0%, #d8431d 100%);
    --cta-shadow: 4px 4px 16px 0 rgba(255,255,255,.32) inset, -6px -6px 16px 0 rgba(0,0,0,.22) inset, 4px 4px 10px 0 rgba(216,67,29,.32);

    --shadow-card: 0 14px 40px rgba(40, 33, 22, .1);
    --shadow-soft: 0 6px 20px rgba(40, 33, 22, .08);

    font-family: "Roboto", Arial, system-ui, sans-serif;
    color: var(--ink);
    background: var(--page);
    min-height: 100vh;
    position: relative;
    overflow-x: clip;
}
.sp-root *, .sp-root *::before, .sp-root *::after { box-sizing: border-box; }

.sp-noscript { max-width: 640px; margin: 80px auto; padding: 0 24px; text-align: center; }
.sp-noscript a { color: var(--indigo); font-weight: 700; }

/* ===================== ENTRY ("Evaluate Me" hero) ===================== */
.sp-entry {
    position: relative; overflow: hidden;
    min-height: calc(100vh - 76px); display: grid; place-items: center;
    padding: clamp(40px, 7vh, 96px) 20px; text-align: center;
    background:
        radial-gradient(900px 520px at 15% 0%, rgba(26, 0, 136, .10), transparent 60%),
        radial-gradient(820px 560px at 88% 100%, rgba(26, 0, 136, .12), transparent 58%),
        linear-gradient(180deg, #ffffff 0%, #f4f1ec 100%);
}
.sp-entry::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background-image: radial-gradient(rgba(26, 0, 136, .10) 1px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
    mask-image: radial-gradient(circle at 50% 40%, #000 0%, transparent 72%);
}
/* wider than the evaluator's hero (840px) so the degree cards sit on one row */
.sp-entry__inner { width: 100%; max-width: 1080px; min-width: 0; position: relative; z-index: 1; }

.sp-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--indigo-line);
    padding: 8px 16px; border-radius: var(--radius-pill); margin-bottom: 22px;
    animation: sp-rise .5s both;
}
.sp-entry h1 {
    font-family: "Poppins", "Roboto", sans-serif;
    font-size: clamp(2rem, 5vw, 3.3rem); line-height: 1.12; font-weight: 700;
    margin: 0 auto 16px; max-width: 18ch; letter-spacing: -.01em; color: #181134;
    animation: sp-rise .5s .04s both;
}
.sp-entry__sub { font-size: clamp(1rem, 1.8vw, 1.16rem); line-height: 1.6; color: var(--ink2); max-width: none; margin: 0 auto clamp(26px, 4vw, 38px); text-align: center; text-wrap: balance; animation: sp-rise .5s .08s both; }

/* ---- degree picker cards (the profiler's first step, in the evaluator look) ----
   All degrees (High School · Bachelor's · Master's · Doctorate) share ONE row:
   the cards flex to equal widths so they never wrap. On small screens the row
   turns into a swipe carousel (see the media query below). */
.sp-cards { display: flex; flex-wrap: nowrap; gap: 18px; justify-content: center; margin-bottom: clamp(22px, 3vw, 30px); }
.sp-card {
    flex: 1 1 0; min-width: 0; width: auto; max-width: 320px; text-align: left; cursor: pointer; position: relative;
    background: var(--paper); border: 1.5px solid var(--line2); border-radius: var(--radius-lg);
    padding: 28px 26px 26px; box-shadow: var(--shadow-soft); color: var(--ink); overflow: hidden;
    transition: transform .45s cubic-bezier(.22, .61, .36, 1), box-shadow .4s ease, border-color .25s, background .25s;
    /* `backwards` (not `both`): the intro rise plays, but its `transform: none`
       end-state is NOT pinned afterwards — otherwise it would override the
       :hover lift below (a filled animation value wins over a normal rule). */
    animation: sp-rise .6s backwards; animation-delay: calc(var(--i, 0) * .1s + .14s); will-change: transform;
}
.sp-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--indigo), var(--red1)); opacity: 0; transition: opacity .3s; }
/* Soft radial glow that fades in on hover for a little depth. */
.sp-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 80% at 50% -10%, rgba(26, 0, 136, .06), transparent 60%); opacity: 0; transition: opacity .35s; }
.sp-card:hover { transform: translateY(-18px); border-color: var(--indigo); background: #fdfcfa; box-shadow: var(--shadow-card); }
.sp-card:hover::before, .sp-card:hover::after { opacity: 1; }
.sp-card:focus-visible { outline: 3px solid var(--indigo); outline-offset: 3px; }
.sp-card[data-featured="1"] { border-color: var(--indigo); box-shadow: 0 0 0 1px var(--indigo) inset, var(--shadow-card); }
.sp-card[data-featured="1"]::before { opacity: 1; }
.sp-card__badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--indigo); padding: 6px 13px; border-radius: var(--radius-pill); margin-bottom: 16px; box-shadow: 0 6px 16px rgba(26, 0, 136, .3); }
.sp-card__chip { position: relative; z-index: 1; width: 58px; height: 58px; border-radius: 17px; display: grid; place-items: center; font-family: "Poppins", sans-serif; font-size: 26px; font-weight: 700; color: #fff; background: linear-gradient(140deg, #2a12b0 0%, var(--indigo) 45%, var(--indigo-deep) 100%); box-shadow: 0 12px 26px rgba(26, 0, 136, .34); margin-bottom: 18px; transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease; }
.sp-card:hover .sp-card__chip { transform: scale(1.14); box-shadow: 0 16px 30px rgba(26, 0, 136, .4); }
.sp-card__title { display: block; font-family: "Poppins", "Roboto", sans-serif; font-size: 25px; font-weight: 600; color: #181134; margin: 0 0 4px; position: relative; z-index: 1; }
.sp-card__tag { font-size: 14.5px; font-weight: 500; color: var(--muted); margin: 0 0 18px; position: relative; z-index: 1; }
.sp-card__rule { height: 1px; background: var(--line); margin: 0 0 14px; }
.sp-card__ex { font-size: 13px; font-weight: 500; color: var(--muted2); margin: 0 0 18px; position: relative; z-index: 1; }
.sp-card__cta { position: relative; z-index: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14.5px; font-weight: 700; color: #fff; padding: 13px; border-radius: var(--radius); background: var(--cta-grad); box-shadow: 0 8px 22px rgba(216, 67, 29, .32); transition: gap .25s, box-shadow .25s, transform .2s; }
.sp-card:hover .sp-card__cta { gap: 12px; box-shadow: 0 12px 26px rgba(216, 67, 29, .42); }
/* A light "shine" that sweeps across the CTA when the card is hovered. */
.sp-card__cta::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.55) 50%, transparent 100%);
    transform: skewX(-20deg); pointer-events: none; }
.sp-card:hover .sp-card__cta::after { animation: sp-shine .7s ease-out .05s; }

/* The card springs UP on hover (bouncy translate via the transition easing on
   .sp-card); the CTA catches a one-off shine sweep. The initials chip stays
   upright — no rotation. */
@keyframes sp-shine { 0% { left: -60%; } 100% { left: 130%; } }

@media (prefers-reduced-motion: reduce) {
    .sp-card, .sp-card:hover, .sp-card:hover .sp-card__chip { transform: none; }
    .sp-card:hover .sp-card__cta::after { animation: none; }
}

.sp-entry__note { margin: 4px auto 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--muted); animation: sp-rise .5s .2s both; }

/* Small screens: the single row becomes a horizontal swipe carousel. Cards keep
   their real width and snap into place; the next one peeks in to signal "swipe".
   Vertical padding leaves room for the hover-lift + shadow so overflow-x doesn't
   clip them, and the scrollbar is hidden for a clean carousel look. */
@media (max-width: 820px) {
    .sp-cards {
        flex-wrap: nowrap; justify-content: flex-start;
        overflow-x: auto; overflow-y: hidden;
        /* `proximity` (not `mandatory`): mandatory snapping traps on the
           second-to-last card because the last card's centre snap point sits
           beyond the max scroll — so Doctorate was unreachable. proximity still
           snaps but never blocks a full scroll to the end. */
        scroll-snap-type: x proximity; scroll-padding-inline: 16px;
        gap: 14px; padding: 8px 16px 16px; margin-bottom: clamp(18px, 3vw, 26px);
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .sp-cards::-webkit-scrollbar { display: none; }
    /* Trailing spacer: gives the last card room to scroll into / near the centre
       instead of being pinned against the right edge. */
    .sp-cards::after { content: ""; flex: 0 0 clamp(24px, 12%, 64px); }
    .sp-card {
        flex: 0 0 auto; width: min(78%, 300px); max-width: 300px;
        scroll-snap-align: center;
    }
}

@media (max-width: 820px) {
    .sp-entry { justify-items: stretch; }
    .sp-entry h1, .sp-entry__sub { max-width: 100%; }
    .sp-cards {
        --sp-card-w: min(78vw, 300px);
        width: 100%; max-width: 100%; min-width: 0;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: max(16px, calc((100% - var(--sp-card-w)) / 2));
        padding: 8px max(16px, calc((100% - var(--sp-card-w)) / 2)) 18px;
        margin: 0 auto clamp(18px, 3vw, 26px);
    }
    .sp-cards::after { flex: 0 0 max(16px, calc((100% - var(--sp-card-w)) / 2)); }
    .sp-card {
        flex: 0 0 var(--sp-card-w); width: var(--sp-card-w); max-width: none;
        scroll-snap-align: center; scroll-snap-stop: always;
    }
}

/* ===================== EXPAND REVEAL ===================== */
.sp-reveal {
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    background: linear-gradient(140deg, var(--indigo) 0%, var(--indigo-deep) 100%);
    clip-path: circle(0px at var(--ox, 50%) var(--oy, 50%));
    transition: clip-path .6s cubic-bezier(.65,0,.35,1);
    display: grid; place-items: center; color: #fff; text-align: center;
}
.sp-reveal.is-on { clip-path: circle(150% at var(--ox, 50%) var(--oy, 50%)); }
.sp-reveal.is-out { opacity: 0; transition: opacity .35s ease .05s; }
.sp-reveal__mark { width: 88px; height: 88px; border-radius: 22px; display: grid; place-items: center; font-family: "Poppins", sans-serif; font-size: 34px; font-weight: 700; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.5); margin: 0 auto 18px; animation: sp-pop .5s .15s both; }
.sp-reveal__t { font-family: "Poppins", sans-serif; font-size: clamp(1.9rem, 4.5vw, 3rem); font-weight: 700; margin: 0; animation: sp-rise .5s .25s both; }
.sp-reveal__s { font-size: 1.02rem; opacity: .9; margin-top: 10px; animation: sp-rise .5s .33s both; }

/* ===================== WIZARD ===================== */
.sp-wizard { min-height: 100vh; }
.sp-topbar { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(16px, 4vw, 36px); background: var(--paper); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.sp-brand { display: flex; align-items: center; gap: 12px; }
.sp-brand__mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-family: "Poppins", sans-serif; font-weight: 700; font-size: 15px; background: var(--indigo); }
.sp-brand__name { font-family: "Poppins", sans-serif; font-weight: 600; font-size: 16px; color: #181134; }
/* the chosen-degree chip (shown in v2 — the evaluator hid it) */
.sp-degchip { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: var(--indigo); background: var(--indigo-soft); border: 1px solid var(--indigo-line); padding: 6px 12px; border-radius: var(--radius-pill); }
@media (max-width: 560px) { .sp-degchip { display: none; } }
.sp-topbar__right { display: flex; align-items: center; gap: 16px; }
.sp-step-count { font-size: 13.5px; font-weight: 700; color: var(--indigo); }
.sp-exit { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink2); background: var(--paper); border: 1.5px solid var(--line2); border-radius: var(--radius-pill); padding: 8px 15px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.sp-exit:hover { color: var(--indigo); border-color: var(--indigo); background: var(--indigo-soft); }

.sp-body { max-width: 1440px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) clamp(16px, 4vw, 40px) 56px; }

/* ---- top section stepper ---- */
.sp-rail { margin: 0 0 26px; }
.sp-rail__eyebrow { display: none; }
.sp-rail__note { margin: 16px 2px 0; font-size: 12.5px; font-weight: 400; color: var(--muted2); line-height: 1.5; text-align: center; }
.sp-steps {
    --sp-rail-edge: clamp(34px, 7.5%, 78px);
    --sp-rail-ratio: 0;
    display: grid; grid-template-columns: repeat(var(--sp-step-count, 6), minmax(0, 1fr));
    align-items: start; gap: 0; position: relative; isolation: isolate;
    padding: 18px clamp(10px, 1.8vw, 20px) 16px;
    background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.78) 100%);
    border: 1px solid rgba(214, 216, 230, .9); border-radius: var(--radius-lg);
    box-shadow: 0 12px 28px rgba(40, 33, 22, .07);
}
.sp-steps::before,
.sp-steps::after {
    content: ""; position: absolute; left: var(--sp-rail-edge); right: var(--sp-rail-edge); top: 37px;
    height: 4px; border-radius: 999px; z-index: 0; pointer-events: none;
}
.sp-steps::before { background: #eceef6; }
.sp-steps::after {
    background: linear-gradient(90deg, var(--indigo) 0%, #5a45c8 62%, var(--red1) 100%);
    transform: scaleX(var(--sp-rail-ratio)); transform-origin: left center;
    transition: transform .35s cubic-bezier(.22,.61,.36,1);
}
.sp-stepli { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; min-width: 0; padding: 0 6px; }
.sp-stepli.is-done { cursor: pointer; }
.sp-stepli.is-locked { cursor: not-allowed; }
.sp-stepdot {
    position: relative; width: 38px; height: 38px; border-radius: 50%; flex: none;
    display: grid; place-items: center; font-size: 16px; line-height: 1; font-weight: 800;
    color: #8e92a7; background: #fff; border: 1.5px solid #dfe2ee;
    box-shadow: 0 0 0 7px rgba(255,255,255,.96);
    transition: transform .24s ease, color .24s ease, border-color .24s ease, background .24s ease, box-shadow .24s ease;
}
.sp-stepli.is-active .sp-stepdot {
    color: var(--indigo); border-color: var(--indigo); background: #fff;
    box-shadow: 0 0 0 4px #fff, 0 0 0 7px rgba(26, 0, 136, .14), 0 9px 20px rgba(26, 0, 136, .18), 0 0 0 10px rgba(255, 94, 50, .05);
    transform: translateY(-2px) scale(1.05);
}
.sp-stepli.is-done .sp-stepdot {
    background: linear-gradient(145deg, var(--indigo) 0%, var(--indigo-deep) 100%);
    border-color: var(--indigo); color: #fff; font-size: 15px;
    box-shadow: 0 0 0 6px #fff, 0 9px 18px rgba(26, 0, 136, .2);
}
.sp-stepli.is-locked .sp-stepdot { color: #b0b4c3; background: #fbfbfd; border-color: #e4e6f0; box-shadow: 0 0 0 7px rgba(255,255,255,.9); }
.sp-steptxt { min-width: 0; max-width: 100%; }
.sp-steptxt b { display: block; max-width: 18ch; margin: 0 auto; font-size: 12.5px; font-weight: 700; color: #777b8d; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
.sp-stepli.is-active .sp-steptxt b { color: var(--indigo); font-weight: 800; }
.sp-stepli.is-done .sp-steptxt b { color: #34364a; }
.sp-stepli.is-locked .sp-steptxt b { color: #9fa3b4; }
.sp-steptxt span { display: none; }

/* mobile: collapse the labelled stepper into a compact progress bar */
.sp-progress { display: none; }

@media (max-width: 980px) {
    .sp-steps { --sp-rail-edge: clamp(28px, 7%, 56px); padding-inline: 8px; }
    .sp-steps::before,
    .sp-steps::after { top: 35px; }
    .sp-stepdot { width: 34px; height: 34px; font-size: 14px; }
    .sp-steptxt b { max-width: 13ch; font-size: 11.5px; line-height: 1.2; }
}

/* ---- main question card ---- */
.sp-main { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: clamp(24px, 4vw, 42px); position: relative; }
.sp-main.is-leaving { animation: sp-leave .18s ease forwards; }
.sp-sec-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--indigo); text-transform: uppercase; margin: 0 0 8px; animation: sp-rise .4s both; }
.sp-sec-title { font-family: "Poppins", "Roboto", sans-serif; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; letter-spacing: -.01em; color: #181134; margin: 0 0 8px; animation: sp-rise .45s .04s both; }
.sp-sec-sub { font-size: 15px; color: var(--muted); line-height: 1.5; margin: 0 0 28px; max-width: 64ch; animation: sp-rise .45s .08s both; }

.sp-fields { display: flex; flex-direction: column; gap: 30px; }

.sp-field { animation: sp-fadein .4s ease backwards; animation-delay: calc(var(--i, 0) * .09s + .04s); }
.sp-field__label { display: block; font-family: "Roboto", Arial, sans-serif; font-size: 17px; font-weight: 700; color: var(--ink2); line-height: 1.4; margin-bottom: 14px; }
.sp-field__help { font-size: 13px; font-weight: 400; color: var(--muted2); margin-top: 12px; }
.sp-field.is-error { animation: sp-fadein .4s ease backwards, sp-shake .3s; animation-delay: calc(var(--i, 0) * .09s + .04s), 0s; }
.sp-field.is-error .sp-field__label { color: var(--red2); }
.sp-field.is-error .sp-control { border-color: #dc3545; box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
.sp-field.is-error .sp-opts::after { content: "Please answer this question"; display: block; width: 100%; font-size: 13px; font-weight: 500; color: var(--red2); margin-top: 4px; }
.sp-field.is-error .sp-eng__cell--overall { border-color: #dc3545; background: #fff; box-shadow: 0 0 0 3px rgba(220, 53, 69, .14); }
.sp-field.is-error .sp-eng::after { content: "Please enter your overall score"; display: block; font-size: 13px; font-weight: 500; color: var(--red2); margin-top: -2px; }
@keyframes sp-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ---- option icon-cards (mim-essay style: colourful icon on top, label below) ---- */
.sp-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 190px)); gap: 12px; justify-content: center; }
.sp-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
    width: 100%; min-height: 94px; text-align: center; cursor: pointer;
    background: var(--field); border: 1.5px solid var(--line2); border-radius: var(--radius);
    padding: 13px 9px 12px; font: inherit; color: var(--ink);
    transition: border-color .2s, background .2s, box-shadow .2s, transform .22s cubic-bezier(.2,.9,.25,1);
    animation: sp-card .46s cubic-bezier(.2,.9,.25,1) backwards; animation-delay: calc(var(--c, 0) * .05s + .08s);
    will-change: transform;
}
.sp-opt:hover { border-color: var(--indigo); background: #faf8f3; transform: translateY(-4px); box-shadow: var(--shadow-soft); }
.sp-opt:active { transform: translateY(-1px) scale(.99); }
.sp-opt.is-sel { border-color: var(--indigo); background: var(--indigo-soft); box-shadow: 0 0 0 1px var(--indigo) inset, 0 8px 22px rgba(26, 0, 136, .18); }
.sp-opt__icon { font-size: 28px; line-height: 1; transition: transform .25s cubic-bezier(.2,.9,.25,1); }
.sp-opt:hover .sp-opt__icon { transform: scale(1.16) rotate(-4deg); }
.sp-opt.is-sel .sp-opt__icon { animation: sp-bounce .5s; }
.sp-opt__txt { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink2); }
.sp-opt.is-sel .sp-opt__txt { color: #181134; font-weight: 600; }
/* corner check badge — shown when the card is selected (single & multi alike) */
.sp-opt__badge { position: absolute; top: 7px; right: 7px; width: 21px; height: 21px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 11px; font-weight: 700; display: none; place-items: center; box-shadow: 0 3px 9px rgba(26, 0, 136, .42); }
.sp-opt.is-sel .sp-opt__badge { display: grid; animation: sp-badge .35s cubic-bezier(.2,1.35,.5,1) both; }

/* ---- text input (test score) ---- */
.sp-control { width: 100%; display: flex; align-items: center; gap: 10px; background: var(--field); border: 1.5px solid var(--line2); border-radius: var(--radius); padding: 14px 16px; font: inherit; font-size: 15.5px; color: var(--ink); transition: border-color .18s, box-shadow .18s; }
.sp-control:focus-within, .sp-control.is-focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-soft); }
.sp-control input { border: 0; outline: none; font: inherit; font-size: 15.5px; color: var(--ink); background: none; width: 100%; }
.sp-control input::placeholder { color: var(--muted2); }
.sp-unit { font-size: 12.5px; font-weight: 700; color: var(--indigo); background: var(--indigo-soft); padding: 5px 11px; border-radius: 6px; white-space: nowrap; }

/* ---- English sub-scores (v2): compact test-type picker + L/R/W/S inputs ---- */
.sp-eng { display: flex; flex-direction: column; gap: 14px; }
.sp-eng__tests { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-eng__test {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: var(--field); border: 1.5px solid var(--line2); border-radius: var(--radius-pill);
    padding: 8px 16px 8px 13px; font: inherit; font-size: 14px; font-weight: 700; color: var(--ink2);
    transition: border-color .2s, background .2s, color .2s, box-shadow .25s, transform .22s cubic-bezier(.2,.9,.25,1);
    animation: sp-card .46s cubic-bezier(.2,.9,.25,1) backwards; animation-delay: calc(var(--c,0) * .05s + .06s);
}
.sp-eng__test:hover { border-color: var(--indigo); transform: translateY(-2px); box-shadow: var(--shadow-soft); }
.sp-eng__test:active { transform: translateY(0) scale(.98); }
.sp-eng__test.is-sel { background: var(--indigo); border-color: var(--indigo); color: #fff; box-shadow: 0 8px 20px rgba(26,0,136,.28); }
/* tabs that already hold scores get a ✓ so it's clear you can fill more than one */
.sp-eng__test.is-filled::after { content: "✓"; font-size: 12px; font-weight: 800; color: var(--ok); margin-left: 1px; }
.sp-eng__test.is-filled.is-sel::after { color: #fff; }
.sp-eng__testicon { font-size: 18px; line-height: 1; transition: transform .25s cubic-bezier(.2,.9,.25,1); }
.sp-eng__test:hover .sp-eng__testicon { transform: scale(1.15) rotate(-5deg); }
.sp-eng__test.is-sel .sp-eng__testicon { animation: sp-bounce .5s; }

/* Every score field is a card: small header on top, big number + scale below. */
.sp-eng__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sp-eng__cell {
    display: flex; flex-direction: column; gap: 6px; cursor: text; min-width: 0;
    background: var(--field-rest); border: 1.5px solid var(--line); border-radius: var(--radius);
    padding: 10px 13px; transition: border-color .2s, background .2s, box-shadow .2s, transform .22s cubic-bezier(.2,.9,.25,1);
}
.sp-eng__grid.is-live .sp-eng__cell { background: var(--field); animation: sp-card .42s cubic-bezier(.2,.9,.25,1) backwards; }
.sp-eng__grid.is-live .sp-eng__cell:nth-child(1) { animation-delay: .02s; }
.sp-eng__grid.is-live .sp-eng__cell:nth-child(2) { animation-delay: .09s; }
.sp-eng__grid.is-live .sp-eng__cell:nth-child(3) { animation-delay: .16s; }
.sp-eng__grid.is-live .sp-eng__cell:nth-child(4) { animation-delay: .23s; }
.sp-eng__cell:hover { border-color: var(--line2); }
.sp-eng__cell:focus-within { border-color: var(--indigo); background: #fff; box-shadow: 0 0 0 3px var(--indigo-soft); transform: translateY(-2px); }

/* Overall — same card, but full-width above the grid and accented. */
.sp-eng__cell--overall { background: var(--indigo-soft); border-color: var(--indigo-line); padding: 11px 16px; }
.sp-eng__cell--overall.is-live { animation: sp-card .42s cubic-bezier(.2,.9,.25,1) backwards; }
.sp-eng__cell--overall .sp-eng__cellhead { font-size: 12.5px; color: var(--indigo); }
.sp-eng__cell--overall .sp-eng__cellicon { font-size: 16px; }
.sp-eng__cell--overall .sp-eng__in { font-size: 26px; }
.sp-eng__cell--overall .sp-eng__scale { font-size: 14px; }
.sp-eng__cell--overall:focus-within { background: #fff; }

.sp-eng__cellhead { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.sp-eng__cellicon { font-size: 15px; line-height: 1; font-style: normal; transition: transform .25s cubic-bezier(.2,.9,.25,1); }
.sp-eng__cell:focus-within .sp-eng__cellicon { transform: scale(1.2) rotate(-6deg); }

/* number + "/ scale" grouped tightly on the left — input fully reset (!important
   so the global `input` box style from styles.css can never leak back in). */
.sp-eng__inwrap { display: inline-flex; align-items: baseline; gap: 5px; }
.sp-eng__in {
    border: 0 !important; outline: none !important; background: transparent !important;
    box-shadow: none !important; -webkit-appearance: none; appearance: none;
    margin: 0; padding: 0 !important; width: auto !important;
    min-width: 1ch; max-width: 5ch; field-sizing: content;
    font-family: inherit; font-size: 22px; font-weight: 800; line-height: 1.1;
    color: var(--ink); caret-color: var(--indigo); text-align: left;
}
.sp-eng__in::placeholder { color: var(--line2); font-weight: 700; }
.sp-eng__scale { font-size: 12.5px; font-weight: 700; color: var(--indigo); white-space: nowrap; }
.sp-eng__scale.is-pop { animation: sp-pop .32s cubic-bezier(.2,1.35,.5,1); }
@media (max-width: 560px) {
    .sp-eng__grid { grid-template-columns: repeat(2, 1fr); }
}

/* footer nav */
.sp-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.sp-save { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--muted2); }
.sp-save i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); display: inline-block; animation: sp-pulse 2s ease-in-out infinite; }
.sp-nav { display: flex; gap: 12px; align-items: center; }
.sp-btn { font-family: "Roboto", Arial, sans-serif; font-size: 15px; font-weight: 700; border-radius: var(--radius-pill); padding: 13px 28px; cursor: pointer; border: 1.5px solid transparent; line-height: 1; transition: transform .15s, box-shadow .25s, opacity .2s, filter .2s, background .2s, border-color .2s, color .2s; }
.sp-btn:active { transform: translateY(1px); }
.sp-btn--ghost { background: var(--paper); border-color: var(--line2); color: var(--ink2); }
.sp-btn--ghost:hover { border-color: var(--indigo); color: var(--indigo); }
.sp-btn--ghost[disabled] { opacity: .45; cursor: default; }
.sp-btn--primary { background: var(--indigo); color: #fff; display: inline-flex; align-items: center; gap: 8px; padding: 13px 32px; box-shadow: 0 8px 22px rgba(26, 0, 136, .28); }
.sp-btn--primary:hover { transform: translateY(-2px); background: var(--indigo-deep); box-shadow: 0 14px 30px rgba(26, 0, 136, .36); }
.sp-btn--white, .sp-btn--cta { background: var(--cta-grad); color: #fff; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid rgba(255,255,255,.5); box-shadow: 0 10px 26px rgba(216, 67, 29, .34); }
.sp-btn--white:hover, .sp-btn--cta:hover { transform: translateY(-3px); filter: brightness(1.06); }
.sp-submit { position: relative; isolation: isolate; overflow: hidden; min-height: 50px; background: linear-gradient(135deg, #ff8a5c 0%, #ff5e32 100%); font-size: 16px; letter-spacing: .01em; animation: sp-submit-glow 2.8s ease-in-out infinite; }
.sp-submit::before { content: ""; position: absolute; z-index: 0; inset: 0; background: linear-gradient(110deg, transparent 24%, rgba(255,255,255,.08) 42%, rgba(255,255,255,.48) 52%, rgba(255,255,255,.08) 62%, transparent 76%); transform: translateX(-125%); animation: sp-submit-shine 3.4s ease-in-out infinite; }
.sp-submit > span { position: relative; z-index: 1; }
.sp-submit__arrow { display: inline-block; font-size: 20px; line-height: 1; transition: transform .22s ease; }
.sp-submit:hover .sp-submit__arrow { transform: translateX(5px); }
.sp-submit:focus-visible { outline: 3px solid #ffd24d; outline-offset: 3px; }
.sp-submit:disabled { cursor: wait; animation: none; opacity: .82; }

/* ===================== REVIEW ===================== */
.sp-review { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: stretch; }
.sp-summary { background: var(--page); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 6px 24px; }
.sp-sumrow { padding: 18px 0; }
.sp-sumrow + .sp-sumrow { border-top: 1px solid var(--line); }
.sp-sumrow__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sp-sumrow__head .sp-num { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; color: #181134; }
.sp-num span { width: 24px; height: 24px; border-radius: 50%; background: var(--indigo); color: #fff; font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.sp-edit { font-size: 13px; font-weight: 700; color: var(--indigo); background: none; border: 0; cursor: pointer; }
.sp-edit:hover { color: var(--indigo-deep); }
.sp-sumchips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-sumchip { font-size: 13px; font-weight: 500; color: var(--ink2); background: var(--paper); border: 1px solid var(--line2); padding: 7px 12px; border-radius: 6px; }
.sp-result { background: linear-gradient(160deg, #2a16a0 0%, var(--indigo) 100%); border-radius: var(--radius-lg); color: #fff; padding: 28px 24px 24px; box-shadow: var(--shadow-card); display: flex; flex-direction: column; gap: 15px; position: relative; overflow: hidden; }
.sp-result::after { content: ""; position: absolute; width: 220px; height: 220px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); }
.sp-result > * { position: relative; z-index: 1; }
.sp-result__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #ffd24d; }
.sp-result__p { font-size: 13.5px; line-height: 1.5; opacity: .9; margin: 0; }
.sp-result__rule { height: 1px; background: rgba(255,255,255,.2); }
.sp-result__li { display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 500; }
.sp-result__spacer { flex: 1; }
.sp-result__note { font-size: 12px; opacity: .82; text-align: center; margin: 0; }

/* ===================== SUCCESS MODAL ===================== */
.sp-modal { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 24px; background: rgba(16, 2, 88, .55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: sp-fade .3s ease both; }
.sp-modal__card { position: relative; width: min(520px, 100%); background: var(--paper); border-radius: 18px; padding: 46px 36px 34px; text-align: center; box-shadow: 0 40px 90px rgba(16, 2, 88, .42); overflow: hidden; animation: sp-modal-in .45s cubic-bezier(.2,.9,.25,1) both; }
.sp-modal__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--cta-grad); }
.sp-check { width: 84px; height: 84px; margin: 4px auto 22px; border-radius: 50%; background: var(--indigo); display: grid; place-items: center; position: relative; box-shadow: 0 12px 30px rgba(26, 0, 136, .4); animation: sp-pop .5s .1s both; }
.sp-check::before { content: ""; width: 24px; height: 44px; border: solid #fff; border-width: 0 6px 6px 0; transform: rotate(45deg) translateY(-4px); transform-origin: center; animation: sp-tick .4s .45s both; }
.sp-check::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 2px solid rgba(26, 0, 136, .4); animation: sp-ring 1.4s .3s ease-out infinite; }
.sp-modal h2 { font-family: "Poppins", sans-serif; font-size: clamp(1.6rem, 3.6vw, 2.1rem); font-weight: 600; color: #181134; margin: 0 0 12px; }
.sp-modal p { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0 auto 26px; max-width: 42ch; }
.sp-modal__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.sp-modal__close { position: absolute; top: 14px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--page); color: var(--ink2); font-size: 18px; cursor: pointer; z-index: 2; }
.sp-modal__close:hover { background: var(--indigo-soft); }
/* confetti */
.sp-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.sp-confetti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: sp-confetti 1.5s ease-in forwards; }

/* ===================== RESPONSIVE ===================== */
@media (max-width: 760px) {
    .sp-review { grid-template-columns: 1fr; }
    /* the auto-fit option grid already collapses to 2-up / 1-up on its own */
    /* swap the labelled stepper for a compact step count + progress bar */
    .sp-steps { display: none; }
    .sp-progress {
        display: block; padding: 14px 15px; background: rgba(255,255,255,.9);
        border: 1px solid rgba(214,216,230,.9); border-radius: var(--radius-lg);
        box-shadow: 0 10px 24px rgba(40, 33, 22, .06);
    }
    .sp-progress__head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
    .sp-progress__back {
        flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
        display: grid; place-items: center; border: 1px solid rgba(205,198,238,.9);
        background: #fff; color: var(--indigo); font: inherit; font-size: 18px; font-weight: 800;
        line-height: 1; cursor: pointer; box-shadow: 0 7px 16px rgba(26,0,136,.12);
        transition: color .18s, background .18s, border-color .18s, box-shadow .18s, transform .18s;
    }
    .sp-progress__back:hover:not(:disabled) { background: var(--indigo-soft); border-color: var(--indigo); transform: translateX(-1px); }
    .sp-progress__back:disabled { color: #a7abbb; background: #f6f7fb; border-color: #e5e7f0; box-shadow: none; cursor: not-allowed; opacity: .72; }
    .sp-progress__bar { height: 8px; border-radius: 999px; background: #eceef6; overflow: hidden; }
    .sp-progress__fill { height: 100%; background: linear-gradient(90deg, var(--indigo) 0%, #5a45c8 62%, var(--red1) 100%); border-radius: 999px; transition: width .35s cubic-bezier(.22,.61,.36,1); }
    .sp-progress__txt { flex: 1 1 auto; min-width: 0; display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px; font-weight: 700; color: #777b8d; }
    .sp-progress__txt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .sp-progress__txt b { color: var(--indigo); }
}

/* ===================== KEYFRAMES ===================== */
@keyframes sp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes sp-fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-card { from { opacity: 0; transform: translateY(16px) scale(.95); } to { opacity: 1; transform: none; } }
@keyframes sp-bounce { 0% { transform: scale(1); } 30% { transform: scale(1.22) rotate(-6deg); } 55% { transform: scale(.93); } 100% { transform: scale(1); } }
@keyframes sp-badge { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-leave { to { opacity: 0; transform: translateY(8px) scale(.99); } }
@keyframes sp-pop { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }
@keyframes sp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sp-modal-in { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes sp-pulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .5; } }
@keyframes sp-tick { from { height: 0; opacity: 0; } to { height: 44px; opacity: 1; } }
@keyframes sp-ring { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes sp-confetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 100% { opacity: 0; transform: translateY(440px) rotate(640deg); } }
@keyframes sp-submit-glow { 0%,100% { box-shadow: 0 12px 28px rgba(255,94,50,.34); } 50% { box-shadow: 0 17px 40px rgba(255,138,92,.58); } }
@keyframes sp-submit-shine { 0%,58% { transform: translateX(-125%); } 82%,100% { transform: translateX(125%); } }

/* Lead contact capture — white inputs on the indigo submit card (high contrast). */
.sp-contact { display: flex; flex-direction: column; gap: 10px; margin-bottom: 2px; }
.sp-contact__h { font-size: 13.5px; font-weight: 700; margin: 0 0 2px; color: #fff; }
.sp-cfield { display: flex; flex-direction: column; gap: 5px; }
.sp-root .sp-cfield__lab { display: block; margin-bottom: 0; font-size: 13px; font-weight: 700; color: #fff; opacity: 1; letter-spacing: .01em; }
.sp-cinput { width: 100%; padding: 11px 13px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, .4);
    background: #fff; color: #1f2238; font-family: inherit; font-size: 14px;
    transition: border-color .15s, box-shadow .15s; }
.sp-cinput::placeholder { color: #9aa0b8; }
.sp-cinput:focus { outline: none; border-color: #ffd24d; box-shadow: 0 0 0 3px rgba(255, 210, 77, .35); }
.sp-root .sp-cfield.is-error .sp-cfield__lab { color: #ffccd3; text-shadow: none; }
.sp-root .sp-cfield.is-error .sp-cinput { border: 2px solid #ff6576; background: #fff8f9; box-shadow: 0 0 0 3px rgba(255,101,118,.2); animation: sp-contact-shake .28s ease; }
.sp-root .sp-cfield__err { display: none; margin: 2px 2px 0; font-size: 11.5px; line-height: 1.35; color: #ffdce1; font-weight: 700; }
.sp-root .sp-cfield.is-error .sp-cfield__err { display: flex; align-items: center; gap: 7px; padding: 0; border: 0; background: transparent; color: #ffdce1; text-shadow: none; box-shadow: none; }
.sp-root .sp-cfield.is-error .sp-cfield__err::before { content: ""; flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: #ff7586; }
@keyframes sp-contact-shake { 0%,100% { transform: translateX(0); } 35% { transform: translateX(-4px); } 70% { transform: translateX(4px); } }

@media (prefers-reduced-motion: reduce) {
    .sp-root *, .sp-root *::before, .sp-root *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
    .sp-reveal { transition: none; }
}