:root {
    --navy-950: #06101f;
    --navy-900: #0a1729;
    --navy-800: #10233d;
    --navy-700: #183250;
    --slate-500: #66758b;
    --slate-300: #b8c2cf;
    --slate-100: #edf1f5;
    --cream: #f8f5ee;
    --white: #fff;
    --gold: #d3aa5c;
    --gold-dark: #ad8135;
    --green: #2f8f70;
    --red: #c45252;
    --shadow: 0 24px 60px rgba(5, 16, 31, .13);
    --radius: 22px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--navy-900);
    background:
        radial-gradient(circle at 0 0, rgba(211, 170, 92, .12), transparent 28rem),
        var(--cream);
    font-family: Inter, system-ui, sans-serif;
    line-height: 1.6;
    overflow-x: hidden;
    overflow-wrap: break-word;
}
button, input, select, textarea { font: inherit; }
a { color: inherit; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .75rem 1rem; background: var(--gold); }
.skip-link:focus { top: 1rem; }
.site-header {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1240px, calc(100% - 2rem));
    margin: 0 auto;
    padding: 1.25rem 0;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand-mark { display: grid; place-items: center; width: 50px; height: 50px; border: 1px solid rgba(211,170,92,.45); border-radius: 50%; background: #fff; }
.brand-mark img { object-fit: contain; max-width: 38px; max-height: 38px; }
.brand strong, .brand small { display: block; }
.brand strong { font-family: "Cormorant Garamond", serif; font-size: 1.15rem; }
.brand small { color: var(--slate-500); font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; }
.header-actions { display: flex; align-items: center; gap: 1.25rem; }
.header-actions a { font-size: .85rem; font-weight: 700; text-decoration: none; }
main { min-height: calc(100vh - 190px); }
.site-footer {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    width: min(1240px, calc(100% - 2rem));
    margin: 5rem auto 0;
    padding: 2rem 0;
    border-top: 1px solid rgba(10,23,41,.12);
    color: var(--slate-500);
    font-size: .78rem;
}
.site-footer div { display: grid; }
.site-footer strong { color: var(--navy-900); }
h1, h2 { margin: 0; font-family: "Cormorant Garamond", serif; line-height: 1.02; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
p { margin: 0; }
.eyebrow { margin-bottom: .8rem; color: var(--gold-dark); font-size: .72rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.lead { max-width: 680px; color: var(--slate-500); font-size: 1.05rem; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .8rem 1.4rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    color: var(--navy-950);
    background: var(--gold);
    box-shadow: 0 10px 25px rgba(173,129,53,.18);
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: .2s ease;
}
.button:hover { transform: translateY(-2px); background: #dfb96f; }
.button:disabled { cursor: wait; opacity: .65; transform: none; }
.button-small { min-height: 38px; padding: .45rem 1rem; }
.button-outline { color: var(--navy-900); background: transparent; box-shadow: none; }
.button-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.button-block { width: 100%; }
.button-row { display: flex; justify-content: center; gap: .75rem; margin-top: 2rem; }
.flash {
    display: flex;
    gap: .75rem;
    width: min(920px, calc(100% - 2rem));
    margin: 1rem auto;
    padding: 1rem 1.2rem;
    border: 1px solid;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(5,16,31,.08);
}
.flash-success { border-color: rgba(47,143,112,.35); color: #226b55; }
.flash-error { border-color: rgba(196,82,82,.35); color: #913b3b; }
.flash-gold { border-color: rgba(211,170,92,.55); }
.flash ul { margin: .35rem 0 0; padding-left: 1rem; }
.centered-page { width: min(820px, calc(100% - 2rem)); margin: 8vh auto; text-align: center; }
.centered-page h1 { margin-bottom: 1.25rem; }
.centered-page .lead { margin: 0 auto; }
.closed-icon {
    display: grid;
    place-items: center;
    width: 92px;
    height: 92px;
    margin: 0 auto 2rem;
    border: 1px solid var(--gold);
    border-radius: 50%;
    color: var(--gold-dark);
    font-family: "Cormorant Garamond", serif;
    font-size: 1.7rem;
    font-weight: 700;
}
.notice-card { margin: 1.5rem auto; padding: 1rem; border-left: 3px solid var(--gold); background: #fff; text-align: left; }
.trust-row { display: flex; justify-content: center; gap: 2rem; margin-top: 3rem; color: var(--slate-500); font-size: .8rem; }
.trust-row span::before { content: "✓"; margin-right: .4rem; color: var(--green); }
.hero, .status-hero, .result-hero {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 3rem;
    width: min(1240px, calc(100% - 2rem));
    margin: 4rem auto 3rem;
}
.hero > div, .status-hero > div, .result-hero > div { min-width: 0; }
.hero h1 { max-width: 850px; }
.hero h1 em { display: block; color: var(--gold-dark); font-weight: 600; }
.hero p { max-width: 720px; margin-top: 1.2rem; color: var(--slate-500); }
.hero-note { min-width: 230px; padding: 1.5rem; border: 1px solid rgba(211,170,92,.4); border-radius: var(--radius); background: rgba(255,255,255,.65); }
.hero-note span, .hero-note strong, .hero-note small { display: block; }
.hero-note span { color: var(--slate-500); font-size: .72rem; text-transform: uppercase; }
.hero-note strong { margin: .2rem 0; font-family: "Cormorant Garamond", serif; font-size: 2rem; }
.hero-note small { color: var(--slate-500); }
.form-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; width: min(1240px, calc(100% - 2rem)); margin: 0 auto; }
.form-progress { position: sticky; top: 1rem; align-self: start; padding: 1.5rem; border-radius: var(--radius); color: #fff; background: var(--navy-900); }
.progress-ring {
    display: grid;
    place-items: center;
    width: 88px;
    height: 88px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: conic-gradient(var(--gold) calc(var(--progress) * 1%), rgba(255,255,255,.12) 0);
}
.progress-ring::before { content: ""; grid-area: 1/1; width: 70px; height: 70px; border-radius: 50%; background: var(--navy-900); }
.progress-ring span { z-index: 1; grid-area: 1/1; font-weight: 800; }
.form-progress > strong { font-size: .85rem; }
.form-progress ol { display: grid; gap: .8rem; margin: 1.5rem 0 0; padding: 1.2rem 0 0 1.2rem; border-top: 1px solid rgba(255,255,255,.12); }
.form-progress a { color: var(--slate-300); font-size: .78rem; text-decoration: none; }
.application-form { display: grid; gap: 1.2rem; }
.form-section, .status-card, .result-card, .next-step-card {
    padding: clamp(1.25rem, 4vw, 2.5rem);
    border: 1px solid rgba(10,23,41,.08);
    border-radius: var(--radius);
    background: rgba(255,255,255,.88);
    box-shadow: var(--shadow);
}
.section-heading { display: flex; align-items: start; gap: 1rem; margin-bottom: 2rem; }
.section-heading > span { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold-dark); font-size: .75rem; font-weight: 800; }
.section-heading h2 { font-size: 2.1rem; }
.section-heading p { color: var(--slate-500); font-size: .85rem; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.field > span { color: #33445a; font-size: .78rem; font-weight: 700; }
.field b { color: var(--gold-dark); }
.field input, .field select, .field textarea, .code-form input {
    width: 100%;
    min-height: 48px;
    padding: .7rem .85rem;
    border: 1px solid #d9dee5;
    border-radius: 11px;
    color: var(--navy-900);
    background: #fbfcfd;
    outline: none;
    transition: border .2s, box-shadow .2s;
}
.application-form input:not([type="email"]):not([type="url"]):not([type="file"]),
.application-form textarea,
.application-form select { text-transform: uppercase; }
.application-form input[type="email"],
.application-form input[type="url"] { text-transform: none; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .code-form input:focus { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(211,170,92,.14); }
.field small { color: var(--slate-500); font-size: .7rem; }
.field-wide { grid-column: 1 / -1; }
.file-field input { padding: .55rem; }
.address-group { gap: .65rem; }
.address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.address-detail { grid-column: 1 / -1; }
.choice-grid { display: grid; gap: .6rem; }
.choice-grid-inline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-card {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 48px;
    padding: .65rem .8rem;
    border: 1px solid #d9dee5;
    border-radius: 11px;
    background: #fbfcfd;
    cursor: pointer;
    transition: border .2s, box-shadow .2s, background .2s;
}
.choice-card input { width: 18px; height: 18px; accent-color: var(--gold-dark); }
.choice-card span { font-size: .78rem; font-weight: 800; }
.choice-card:has(input:checked) { border-color: var(--gold); background: rgba(211,170,92,.1); box-shadow: 0 0 0 4px rgba(211,170,92,.1); }
.conditional-question { align-content: stretch; padding: .9rem; border: 1px dashed rgba(211,170,92,.55); border-radius: 14px; background: rgba(211,170,92,.06); }
.checkbox-field { justify-content: end; }
.mini-check {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: .65rem .75rem;
    border: 1px dashed rgba(211,170,92,.7);
    border-radius: 11px;
    background: rgba(211,170,92,.06);
    cursor: pointer;
}
.mini-check input { width: 18px; height: 18px; accent-color: var(--gold-dark); }
.mini-check span { color: var(--navy-900); font-size: .72rem; font-weight: 800; }
.repeater-row[data-family-required-row] .remove-row { cursor: not-allowed; opacity: .35; }
.subsection-title { margin: 2rem 0 1rem; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; }
.repeater { display: grid; gap: .8rem; }
.repeater-list { display: grid; gap: .75rem; }
.repeater-row {
    position: relative;
    display: flex;
    align-items: end;
    gap: .65rem;
    padding: 1rem;
    border: 1px solid #e3e7ec;
    border-radius: 15px;
    background: #fafbfc;
}
.repeater-row .field { flex: 0 1 170px; }
.repeater-row .field-grow { flex-grow: 1; }
.repeater-row .field-year { flex-basis: 100px; }
.row-number { display: grid; place-items: center; align-self: center; flex: 0 0 30px; height: 30px; border-radius: 50%; color: var(--gold-dark); background: rgba(211,170,92,.12); font-size: .72rem; font-weight: 800; }
.remove-row { flex: 0 0 34px; height: 34px; margin-bottom: .45rem; border: 0; border-radius: 50%; color: var(--red); background: rgba(196,82,82,.08); font-size: 1.3rem; cursor: pointer; }
.add-row { justify-self: start; padding: .55rem .9rem; border: 1px dashed var(--gold-dark); border-radius: 10px; color: var(--gold-dark); background: transparent; font-weight: 700; cursor: pointer; }
.consent-section { background: linear-gradient(135deg, #fff, #fbf7ed); }
.consent-box { display: flex; gap: .9rem; padding: 1.2rem; border: 1px solid rgba(211,170,92,.4); border-radius: 14px; background: #fff; cursor: pointer; }
.consent-box input { flex: 0 0 20px; width: 20px; height: 20px; accent-color: var(--gold-dark); }
.consent-box span { font-size: .85rem; }
.security-note { margin: 1rem 0; color: var(--slate-500); font-size: .75rem; }
.security-note::before { content: "◈"; margin-right: .4rem; color: var(--gold-dark); }
.button-submit { display: grid; width: 100%; border-radius: 14px; }
.button-submit small { font-size: .67rem; font-weight: 500; opacity: .75; }
.test-gate { max-width: 720px; }
.gate-number { margin: .5rem 0; color: rgba(173,129,53,.18); font-family: "Cormorant Garamond", serif; font-size: clamp(5rem, 14vw, 9rem); font-weight: 700; line-height: .8; }
.code-form { display: grid; gap: .7rem; max-width: 440px; margin: 2rem auto; }
.code-form label { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.code-form input { height: 68px; text-align: center; font-size: 1.8rem; font-weight: 800; letter-spacing: .35em; text-transform: uppercase; }
.resume-card { display: grid; max-width: 440px; margin: 1rem auto; padding: 1rem; border: 1px solid rgba(47,143,112,.3); border-radius: 14px; background: #fff; text-align: left; text-decoration: none; }
.resume-card span { color: var(--slate-500); font-size: .72rem; }
.resume-card strong { color: var(--green); }
.instruction-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin-top: 3rem; text-align: left; }
.instruction-grid div { display: grid; padding: 1rem; border-top: 2px solid var(--gold); background: rgba(255,255,255,.6); }
.instruction-grid strong { font-size: .8rem; }
.instruction-grid span { color: var(--slate-500); font-size: .72rem; }
.status-hero { align-items: center; }
.status-hero h1 { font-size: clamp(3rem, 6vw, 5.5rem); }
.status-hero p { color: var(--slate-500); }
.status-badge { min-width: 260px; padding: 1.2rem 1.4rem; border-left: 3px solid var(--gold); background: #fff; box-shadow: var(--shadow); }
.status-badge span, .status-badge strong { display: block; }
.status-badge span { color: var(--slate-500); font-size: .68rem; text-transform: uppercase; }
.status-badge strong { margin-top: .2rem; }
.status-ditolak { border-color: var(--red); }
.status-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.3rem; width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.card-heading span { color: var(--gold-dark); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.card-heading h2 { font-size: 2.2rem; }
.card-heading > small { color: var(--slate-500); }
.timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.timeline li { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1rem; min-height: 90px; color: #9aa5b3; }
.timeline li::before { content: ""; position: absolute; top: 38px; bottom: 0; left: 17px; width: 1px; background: #dce1e7; }
.timeline li:last-child::before { display: none; }
.timeline-marker { display: grid; place-items: center; align-self: start; width: 36px; height: 36px; border: 1px solid #dce1e7; border-radius: 50%; background: #fff; font-size: .67rem; font-weight: 800; }
.timeline li > div:last-child { padding: .35rem 0 1.5rem; }
.timeline strong, .timeline span { display: block; }
.timeline span { font-size: .72rem; }
.timeline p { max-width: 600px; margin-top: .4rem; color: var(--slate-500); font-size: .8rem; }
.timeline .done, .timeline .current { color: var(--navy-900); }
.timeline .done .timeline-marker { border-color: var(--green); color: #fff; background: var(--green); }
.timeline .current .timeline-marker { border-color: var(--gold); color: var(--navy-900); background: var(--gold); box-shadow: 0 0 0 7px rgba(211,170,92,.14); }
.timeline .rejected .timeline-marker { border-color: var(--red); color: #fff; background: var(--red); }
.status-sidebar { display: grid; align-content: start; gap: 1rem; }
.mini-card { padding: 1.3rem; border: 1px solid rgba(10,23,41,.08); border-radius: 17px; background: #fff; box-shadow: 0 14px 35px rgba(5,16,31,.07); }
.mini-card > span { display: block; margin-bottom: .35rem; color: var(--slate-500); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.mini-card > strong { display: block; font-family: "Cormorant Garamond", serif; font-size: 1.55rem; line-height: 1.1; }
.mini-card > small, .mini-card p { color: var(--slate-500); font-size: .72rem; }
.token-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(8,20,38,.68);
    backdrop-filter: blur(8px);
}
.token-modal-backdrop[hidden] { display: none; }
.token-modal {
    display: grid;
    gap: 1rem;
    width: min(560px, 100%);
    padding: clamp(1.2rem, 4vw, 2rem);
    border: 1px solid rgba(211,170,92,.35);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(5,16,31,.35);
}
.token-modal-icon {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--navy-900);
    background: var(--gold);
    font-size: 1.4rem;
    font-weight: 900;
}
.token-modal h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: .95; }
.token-modal p { margin-top: .5rem; color: var(--slate-500); }
.token-url-box {
    display: grid;
    gap: .4rem;
    padding: .85rem;
    border: 1px dashed rgba(211,170,92,.65);
    border-radius: 14px;
    background: rgba(211,170,92,.08);
}
.token-url-box span { color: var(--gold-dark); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.token-url-box input {
    width: 100%;
    min-height: 46px;
    padding: .7rem .85rem;
    border: 1px solid rgba(10,23,41,.12);
    border-radius: 10px;
    color: var(--navy-900);
    background: #fff;
    font-size: .82rem;
}
.token-modal-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.interview-item { display: grid; gap: .15rem; padding: .8rem 0; border-bottom: 1px solid #edf0f3; }
.interview-item:last-child { border: 0; }
.interview-item b { color: var(--gold-dark); font-size: .76rem; }
.salary-card form { margin-top: 1rem; }
.salary-card details { margin-top: .8rem; }
.salary-card summary { color: var(--gold-dark); font-size: .75rem; font-weight: 800; cursor: pointer; }
.onboarding-card { color: #fff; background: var(--navy-900); }
.onboarding-card > span, .onboarding-card > small { color: var(--slate-300); }
.onboarding-card dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-top: 1px solid rgba(255,255,255,.1); font-size: .75rem; }
.onboarding-card dd { margin: 0; color: var(--gold); font-weight: 700; }
.copy-link { width: 100%; margin-top: .8rem; padding: .6rem; border: 1px solid #dfe3e8; border-radius: 9px; background: #f8f9fa; cursor: pointer; }
.test-body { background: #eef1f5; }
.test-body .site-footer { margin-top: 2rem; }
.test-shell { width: min(1280px, calc(100% - 2rem)); margin: 2rem auto; }
.test-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem 1.6rem; border-radius: 18px 18px 0 0; color: #fff; background: var(--navy-900); }
.test-header span { color: var(--slate-300); font-size: .72rem; text-transform: uppercase; }
.test-header h1 { font-size: 2.5rem; }
.test-meta { display: flex; align-items: center; gap: 1.5rem; }
.save-status { transition: color .2s; }
.save-status.saving { color: var(--gold); }
.save-status.failed { color: #ff9a9a; }
.timer { min-width: 110px; padding: .5rem .8rem; border: 1px solid rgba(255,255,255,.15); border-radius: 10px; text-align: center; }
.timer small, .timer strong { display: block; }
.timer strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.timer.urgent { border-color: var(--red); color: #ffaaaa; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { opacity: .7; } }
.test-progress { height: 5px; background: #cdd3db; }
.test-progress span { display: block; height: 100%; background: var(--gold); transition: width .25s; }
.test-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1rem; margin-top: 1rem; }
.question-nav { position: sticky; top: 1rem; align-self: start; padding: 1rem; border-radius: 14px; background: #fff; }
.question-nav > strong { font-size: .75rem; }
.question-nav > div { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; margin: .8rem 0; }
.question-nav a { display: grid; place-items: center; aspect-ratio: 1; border: 1px solid #dfe3e8; border-radius: 7px; font-size: .7rem; text-decoration: none; }
.question-nav a.answered { border-color: var(--green); color: #fff; background: var(--green); }
.question-nav p { color: var(--slate-500); font-size: .65rem; }
.question-nav p span { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); }
.question-form { display: grid; gap: 1rem; }
.question-card { scroll-margin-top: 1rem; padding: clamp(1rem, 3vw, 2rem); border: 1px solid #e1e5ea; border-radius: 16px; background: #fff; display: none; }
.question-card.active { display: block; border-color: var(--gold); box-shadow: 0 8px 30px rgba(8, 20, 38, 0.06); }
.question-actions-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e1e5ea; }
.question-actions-nav .button { min-width: 120px; }
.last-question-notice { font-size: 0.8rem; color: var(--slate-500); font-weight: 500; }
.question-number { margin-bottom: .7rem; color: var(--gold-dark); font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.question-number span { color: var(--slate-500); font-weight: 500; }
.question-card h2 { margin-bottom: 1.4rem; font-family: Inter, sans-serif; font-size: 1.08rem; line-height: 1.5; }
.question-image { max-width: 100%; margin-bottom: 1rem; border-radius: 10px; }
.answer-options { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .65rem; }
.answer-options label { display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid #e0e4e9; border-radius: 11px; cursor: pointer; transition: .2s; }
.answer-options label:has(input:checked) { border-color: var(--gold); background: rgba(211,170,92,.1); }
.answer-options input { position: absolute; opacity: 0; }
.option-key { display: grid; place-items: center; flex: 0 0 32px; height: 32px; border-radius: 50%; background: #edf0f3; font-weight: 800; }
.answer-options label:has(input:checked) .option-key { color: #fff; background: var(--gold-dark); }
.disc-heading, .disc-option { display: grid; grid-template-columns: minmax(0, 1fr) 70px 70px; align-items: center; }
.disc-heading { padding: .5rem .75rem; color: var(--slate-500); font-size: .68rem; text-align: center; text-transform: uppercase; }
.disc-heading span { text-align: left; }
.disc-option { min-height: 56px; padding: .5rem .75rem; border-top: 1px solid #e8ebee; }
.disc-option > span { font-size: .83rem; }
.disc-option label { display: grid; place-items: center; cursor: pointer; }
.disc-option input { position: absolute; opacity: 0; }
.disc-option i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid #ccd3db; border-radius: 50%; font-style: normal; font-size: .7rem; font-weight: 800; }
.disc-option label:has(input:checked) i { border-color: var(--gold); color: var(--navy-900); background: var(--gold); }
.test-submit-panel { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem; border-radius: 14px; color: #fff; background: var(--navy-900); }
.test-submit-panel div { display: grid; }
.test-submit-panel span { color: var(--slate-300); font-size: .7rem; }
.result-hero { align-items: center; padding: 2rem; border-radius: var(--radius); color: #fff; background: var(--navy-900); }
.result-hero h1 { font-size: clamp(2.6rem, 5vw, 4.5rem); }
.result-hero p { max-width: 640px; color: var(--slate-300); }
.result-hero .button-outline { color: #fff; }
.result-seal { display: grid; place-items: center; flex: 0 0 70px; height: 70px; border: 1px solid var(--gold); border-radius: 50%; color: var(--gold); font-size: 2rem; }
.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.2rem; width: min(1100px, calc(100% - 2rem)); margin: 0 auto; }
.card-heading > strong { font-family: "Cormorant Garamond", serif; font-size: 2.8rem; }
.card-heading > strong small { color: var(--slate-500); font-size: 1rem; }
.score-list { display: grid; gap: 1rem; }
.score-list > div { display: grid; grid-template-columns: 110px 1fr 50px; align-items: center; gap: 1rem; }
.score-list span { font-size: .78rem; }
.score-track { height: 7px; overflow: hidden; border-radius: 999px; background: #edf0f3; }
.score-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--gold-dark), var(--gold)); }
.score-list strong { text-align: right; }
.score-list small { color: var(--slate-500); font-size: .65rem; }
.disc-chart { display: grid; gap: .8rem; }
.disc-chart > div { display: grid; grid-template-columns: 22px 90px 1fr 40px; align-items: center; gap: .7rem; }
.disc-chart > div > b { color: var(--gold-dark); font-size: 1.1rem; }
.disc-chart > div > span { font-size: .7rem; }
.disc-axis { position: relative; height: 7px; border-radius: 999px; background: linear-gradient(90deg, #bad3dd, #e8ebef 50%, #e8d0a6); }
.disc-axis .midline { position: absolute; top: -4px; bottom: -4px; left: 50%; width: 1px; background: var(--navy-900); }
.disc-axis em { position: absolute; top: 50%; width: 15px; height: 15px; border: 3px solid #fff; border-radius: 50%; background: var(--gold-dark); box-shadow: 0 2px 6px rgba(0,0,0,.2); transform: translate(-50%, -50%); }
.disc-chart > div > strong { font-size: .75rem; text-align: right; }
.disc-note { margin-top: 1.2rem; color: var(--slate-500); font-size: .7rem; }
.next-step-card { width: min(1100px, calc(100% - 2rem)); margin: 1.2rem auto; text-align: center; }
.next-step-card > span { color: var(--gold-dark); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.next-step-card h2 { margin: .5rem 0; }
.next-step-card p { max-width: 700px; margin: 0 auto 1rem; color: var(--slate-500); }
.next-step-card a { color: var(--gold-dark); font-weight: 800; }

@media (max-width: 900px) {
    .form-shell, .status-layout, .test-layout, .result-grid { grid-template-columns: 1fr; }
    .form-progress { position: relative; display: flex; align-items: center; gap: 1rem; }
    .form-progress ol { display: none; }
    .progress-ring { flex: 0 0 70px; width: 70px; height: 70px; margin: 0; }
    .progress-ring::before { width: 56px; height: 56px; }
    .question-nav { position: relative; }
    .question-nav > div { grid-template-columns: repeat(10, 1fr); }
    .status-sidebar { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .result-hero { flex-wrap: wrap; }
}

@media (max-width: 680px) {
    .site-header { padding: .8rem 0; }
    .site-header, .hero, .status-hero, .result-hero, .form-shell, .status-layout, .test-shell, .result-grid, .next-step-card { max-width: 100%; }
    .brand strong { font-size: .95rem; }
    .brand small, .header-actions > a:first-child { display: none; }
    .site-footer, .hero, .status-hero { flex-direction: column; align-items: stretch; }
    .site-footer { gap: .75rem; }
    .hero, .status-hero, .result-hero { margin-top: 2rem; }
    .hero-note, .status-badge { min-width: 0; }
    .form-grid, .instruction-grid, .status-sidebar { grid-template-columns: 1fr; }
    .address-grid { grid-template-columns: 1fr; }
    .address-detail { grid-column: auto; }
    .choice-grid-inline { grid-template-columns: 1fr; }
    .token-modal-actions { grid-template-columns: 1fr; }
    .repeater-row { display: grid; grid-template-columns: 30px 1fr 34px; align-items: end; }
    .repeater-row .field { grid-column: 2; }
    .repeater-row .row-number { grid-column: 1; grid-row: 1; }
    .repeater-row .remove-row { grid-column: 3; grid-row: 1; }
    .button-row, .test-header, .test-submit-panel { flex-direction: column; align-items: stretch; }
    .button-row .button { width: 100%; }
    .trust-row { flex-direction: column; gap: .5rem; }
    .question-nav > div { grid-template-columns: repeat(5, 1fr); }
    .test-meta { justify-content: space-between; }
    .save-status { max-width: 130px; font-size: .62rem !important; }
    .answer-options { grid-template-columns: 1fr; }
    .disc-heading, .disc-option { grid-template-columns: minmax(0, 1fr) 52px 52px; }
    .result-seal { display: none; }
    .score-list > div { grid-template-columns: 90px 1fr 45px; gap: .5rem; }
}

@media (max-width: 440px) {
    .site-header { width: calc(100% - 1rem); }
    .header-actions { display: none; }
    .brand { min-width: 0; }
    .brand-mark { flex: 0 0 42px; width: 42px; height: 42px; }
    .brand strong { overflow: hidden; max-width: 250px; text-overflow: ellipsis; white-space: nowrap; }
    .hero h1 { font-size: 2.75rem; overflow-wrap: anywhere; }
    .hero, .form-shell, .status-layout, .test-shell, .result-grid, .next-step-card { width: calc(100% - 1rem); }
    .form-section, .status-card, .result-card, .next-step-card { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}