/* Sign-in pages: /index.php (students) and /admin/index.php (faculty). */
:root {
    --primary: #004BB5;
    --primary-hover: #00368A;
    --navy: #0B2E93;
    --cobalt: #2864F0;
    --sky: #3389FF;
    --cyan: #19CFFC;
    --teal: #0E7490;
    --ink: #1F1F1F;
    --muted: #444444;
    --subdued: #545454;
    --border: #D6DBDF;
    --canvas: #FFFFFF;
    --canvas-2: #F5F7F9;
    --pass: #0A5E33;
    --fail: #A4231F;
    --hero: linear-gradient(135deg, #0B2E93 0%, #163FC0 46%, #2864F0 100%);
    --accent: linear-gradient(135deg, #19CFFC 0%, #2864F0 100%);
    --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    background: var(--canvas);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--primary); }
a:hover { color: var(--primary-hover); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }

.skip-link {
    position: absolute; left: 16px; top: -60px; z-index: 50;
    background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px;
    text-decoration: none; font-weight: 600;
}
.skip-link:focus { top: 16px; }


/* ---------- Layout ---------- */
.shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(420px, 1fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "stage panel" "stage foot";
}
.stage { grid-area: stage; }
.panel { grid-area: panel; }
.foot  { grid-area: foot; }

/* ---------- Stage (brand side) ---------- */
.stage {
    position: relative;
    overflow: hidden;
    background: var(--hero);
    color: #fff;
    padding: 48px clamp(32px, 5vw, 80px);
    display: flex;
    flex-direction: column;
}
.stage::before {                      /* running-track lanes */
    content: "";
    position: absolute; inset: -20% -30% auto auto;
    width: 900px; height: 900px; border-radius: 50%;
    background:
        radial-gradient(circle, transparent 54%, rgba(255,255,255,.07) 54.3%, transparent 54.8%),
        radial-gradient(circle, transparent 62%, rgba(255,255,255,.06) 62.3%, transparent 62.8%),
        radial-gradient(circle, transparent 70%, rgba(255,255,255,.05) 70.3%, transparent 70.8%),
        radial-gradient(circle, transparent 78%, rgba(255,255,255,.04) 78.3%, transparent 78.8%);
    pointer-events: none;
}
.stage::after {                       /* cyan glow */
    content: "";
    position: absolute; left: -200px; bottom: -260px;
    width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(25,207,252,.28), transparent 65%);
    pointer-events: none;
}
.stage > * { position: relative; z-index: 1; }

.brand {
    display: inline-flex; align-items: center; gap: 12px;
    text-decoration: none; color: #fff;
    font-weight: 800; font-size: 22px; letter-spacing: -.01em;
}
.brand img { width: 44px; height: auto; filter: drop-shadow(0 4px 10px rgba(0,0,0,.25)); }

.stage-copy { margin-top: clamp(40px, 8vh, 96px); max-width: 560px; }
.eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: #fff; background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    padding: 6px 12px; border-radius: 999px;
}
.eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(25,207,252,.25); }
.stage h2 {
    font-size: clamp(38px, 4.4vw, 60px);
    line-height: 1.02; letter-spacing: -.025em; font-weight: 800;
    margin: 20px 0 16px;
}
.stage h2 .hl {
    background: linear-gradient(90deg, #fff 0%, #BFF3FF 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stage p.lede { font-size: 20px; line-height: 1.5; margin: 0; color: #fff; opacity: .95; max-width: 500px; }

/* ---------- Product preview ---------- */
.preview {
    margin-top: auto;
    padding-top: 40px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 16px;
    max-width: 620px;
}
.glass {
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 20px;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 24px 60px rgba(4,16,64,.35);
}
.ring-card { padding: 20px; text-align: center; }
.ring-wrap { position: relative; width: 150px; height: 150px; margin: 4px auto 10px; }
.ring-wrap svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: rgba(255,255,255,.16); stroke-width: 12; }
.ring-bar {
    fill: none; stroke: url(#ringGrad); stroke-width: 12; stroke-linecap: round;
    stroke-dasharray: 402; stroke-dashoffset: 402;
    animation: ring 1.6s cubic-bezier(.2,.8,.2,1) .3s forwards;
}
@keyframes ring { to { stroke-dashoffset: 64; } }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; }
.ring-center strong { font-size: 30px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.ring-center span { font-size: 13px; opacity: .9; margin-top: 4px; }
.ring-card .label { font-size: 15px; font-weight: 600; }

.week-card { padding: 20px 22px; display: flex; flex-direction: column; }
.week-head { display: flex; justify-content: space-between; align-items: baseline; }
.week-head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.grade-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: #fff; color: var(--pass);
    font-weight: 800; font-size: 14px;
    padding: 4px 10px; border-radius: 999px;
}
.bars {
    flex: 1; min-height: 110px;
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px;
    align-items: end; margin-top: 16px;
}
.bar { display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.bar i {
    display: block; width: 100%; max-width: 26px; border-radius: 8px 8px 4px 4px;
    background: rgba(255,255,255,.28);
    height: var(--h); transform-origin: bottom; transform: scaleY(0);
    animation: grow .9s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay: calc(.4s + var(--d) * 70ms);
}
.bar.goal i { background: var(--accent); }
.bar.today i { background: #fff; }
.bar small { font-size: 12px; font-weight: 600; opacity: .9; }
@keyframes grow { to { transform: scaleY(1); } }

.fact-card {
    grid-column: 1 / -1;
    margin: 0;
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px;
    animation: floaty 6s ease-in-out infinite;
}
.fact-card .ico {
    width: 38px; height: 38px; border-radius: 10px; flex: none;
    display: grid; place-items: center;
    background: var(--cyan); color: #06243A; font-size: 18px;
}
.fact-card figcaption { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .9; margin-bottom: 4px; }
.fact-card blockquote { margin: 0; font-size: 17px; line-height: 1.45; font-weight: 500; }
@keyframes floaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.works-with {
    margin-top: 28px;
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px;
    font-size: 15px; font-weight: 600;
}
.works-with .lbl { opacity: .85; font-weight: 500; }
.works-with span.dev { display: inline-flex; align-items: center; gap: 6px; }
.works-with i { color: var(--cyan); }

/* ---------- Form side ---------- */
.panel {
    display: flex; flex-direction: column;
    padding: 40px clamp(24px, 5vw, 72px) 28px;
    background:
        radial-gradient(900px 400px at 100% 0%, rgba(51,137,255,.07), transparent 60%),
        var(--canvas);
}
/* Brand row inside the panel; shown only on small screens, where the stage
   moves below the form. */
.panel-brand {
    display: none; align-items: center; gap: 10px;
    margin-top: 16px; text-decoration: none; color: var(--navy);
    font-weight: 800; font-size: 20px; letter-spacing: -.01em;
}
.panel-brand img { width: 34px; height: auto; }
.panel-brand .sub-brand { font-weight: 500; color: var(--muted); }
.panel-top { display: flex; justify-content: flex-end; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); }
.panel-top a { font-weight: 700; text-decoration: none; }
.panel-top a:hover { text-decoration: underline; }

.form-wrap { width: 100%; max-width: 440px; margin: auto; padding: 32px 0; }
.form-wrap h1 { font-size: 40px; line-height: 1.1; letter-spacing: -.02em; font-weight: 800; margin: 0 0 8px; }
.form-wrap .sub { font-size: 18px; color: var(--muted); margin: 0 0 32px; }

.alert-error {
    display: flex; gap: 10px; align-items: flex-start;
    background: #FDEDEC; color: var(--fail); border: 1px solid #F1C3C0;
    border-radius: 12px; padding: 12px 14px; margin-bottom: 20px; font-weight: 600;
}

.field { position: relative; margin-bottom: 18px; }
.field input {
    width: 100%; height: 60px;
    padding: 22px 52px 6px 48px;
    font: inherit; font-size: 17px; color: var(--ink);
    background: var(--canvas-2);
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:hover { border-color: var(--border); }
.field input:focus {
    outline: none; background: #fff;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(0,75,181,.14);
}
.field input[aria-invalid="true"] { border-color: var(--fail); background: #fff; }
.field label {
    position: absolute; left: 48px; top: 19px;
    font-size: 17px; color: var(--subdued);
    pointer-events: none; transform-origin: left top;
    transition: transform .15s, color .15s;
}
.field input:focus + label,
.field input:not(:placeholder-shown) + label {
    transform: translateY(-11px) scale(.76);
    color: var(--primary); font-weight: 700;
}
.field .lead-ico {
    position: absolute; left: 16px; top: 18px;
    font-size: 20px; color: var(--subdued); pointer-events: none;
}
.field input:focus ~ .lead-ico { color: var(--primary); }
.pw-toggle {
    position: absolute; right: 8px; top: 8px;
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: var(--subdued); font-size: 20px; cursor: pointer;
}
.pw-toggle:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.field-error { display: flex; gap: 6px; align-items: center; color: var(--fail); font-size: 15px; font-weight: 600; margin: 6px 4px 0; }

.row-links { display: flex; justify-content: space-between; gap: 12px; margin: 4px 0 24px; font-size: 16px; }
.row-links a { font-weight: 600; text-decoration: none; }
.row-links a:hover { text-decoration: underline; }

.btn-primary {
    width: 100%; height: 58px; border: 0; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    font: inherit; font-size: 18px; font-weight: 700; color: #fff;
    background: var(--primary);
    box-shadow: 0 10px 24px rgba(0,75,181,.28), inset 0 1px 0 rgba(255,255,255,.15);
    cursor: pointer; transition: background .15s, transform .1s, box-shadow .15s;
}
.btn-primary:hover { background: var(--primary-hover); box-shadow: 0 14px 30px rgba(0,54,138,.32); }
.btn-primary:active { transform: translateY(1px); }
.btn-primary .arrow { transition: transform .2s; }
.btn-primary:hover .arrow { transform: translateX(4px); }
.spinner {
    width: 20px; height: 20px; border-radius: 50%;
    border: 3px solid rgba(255,255,255,.35); border-top-color: #fff;
    animation: spin .7s linear infinite;
}
.d-none { display: none !important; }
@keyframes spin { to { transform: rotate(360deg); } }

.secure-note {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin-top: 14px; font-size: 14px; color: var(--subdued);
}
.secure-note i { color: var(--pass); }

.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 32px; }
.help-tile {
    display: flex; flex-direction: column; gap: 6px;
    padding: 16px; border-radius: var(--radius);
    border: 1px solid var(--border); background: #fff;
    text-decoration: none; color: var(--ink);
    transition: border-color .15s, box-shadow .15s, transform .15s;
}
a.help-tile:hover { border-color: var(--primary); box-shadow: 0 8px 20px rgba(0,75,181,.1); transform: translateY(-2px); color: var(--ink); }
.help-tile .ti {
    width: 36px; height: 36px; border-radius: 10px;
    display: grid; place-items: center;
    background: #E6EEFA; color: var(--primary); font-size: 18px;
}
.help-tile b { font-size: 16px; }
.help-tile span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.help-tile .go { color: var(--primary); font-weight: 700; }

.legal { font-size: 13px; line-height: 1.55; color: var(--subdued); text-align: center; margin: 28px 0 0; }
.legal a { color: var(--primary); }

.foot {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px;
    font-size: 14px; color: var(--subdued);
    margin: 0 clamp(24px, 5vw, 72px); padding: 16px 0 28px;
    border-top: 1px solid #EEF1F4;
}
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--primary); text-decoration: underline; }

/* ---------- How it works (student stage) ---------- */
.how-card {
    grid-column: 1 / -1;
    list-style: none; margin: 0; padding: 20px 22px;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
    counter-reset: how;
}
.how-card li { display: flex; flex-direction: column; gap: 6px; counter-increment: how; }
.how-card .how-ico {
    position: relative;
    width: 44px; height: 44px; border-radius: 12px; margin-bottom: 4px;
    display: grid; place-items: center;
    background: rgba(255,255,255,.16); color: #fff; font-size: 22px;
}
.how-card .how-ico::after {
    content: counter(how);
    position: absolute; right: -6px; top: -6px;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--cyan); color: #06243A; font-size: 12px; font-weight: 800;
}
.how-card b { font-size: 16px; line-height: 1.25; }
.how-card li > span:last-child { font-size: 14px; line-height: 1.4; opacity: .9; }

/* Sample tag on the faculty class overview */
.preview.sample .sample-tag {
    grid-column: 1 / -1; justify-self: start;
    font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
    color: #06243A; background: #FFD66B;
    padding: 4px 10px; border-radius: 999px;
}

/* ---------- Routing notice and cross-link ---------- */
.route-note {
    display: flex; gap: 10px; align-items: flex-start;
    background: #E6EEFA; color: #0B2E6B; border: 1px solid #BFD2F2;
    border-radius: 12px; padding: 12px 14px; margin-bottom: 24px;
    font-size: 15px; line-height: 1.45;
}
.route-note i { color: var(--primary); margin-top: 2px; }
.route-note a { font-weight: 700; }
.other-signin { text-align: center; font-size: 15px; color: var(--muted); margin: 20px 0 0; }
.other-signin a { font-weight: 700; }

/* ---------- Shared account pages (includes/auth-shell.php) ---------- */
/* Faculty variant: a deeper navy stage so staff can tell the pages apart at a glance. */
.stage.faculty { background: linear-gradient(140deg, #071F66 0%, #0B2E93 50%, #163FC0 100%); }
.brand .sub-brand-light { font-weight: 500; opacity: .85; }
.form-wrap.wide { max-width: 560px; }

/* Secondary action, same size as .btn-primary */
.btn-secondary {
    width: 100%; min-height: 54px; border-radius: var(--radius);
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    font: inherit; font-size: 17px; font-weight: 700; text-decoration: none;
    color: var(--primary); background: #fff; border: 1.5px solid var(--border);
    cursor: pointer; transition: border-color .15s, background .15s;
}
.btn-secondary:hover { border-color: var(--primary); background: #F3F7FD; color: var(--primary-hover); }
/* A link styled as a button: keep the text white. The global a:hover rule
   would otherwise turn it the same blue as the hovered background. */
a.btn-primary, a.btn-primary:hover, a.btn-primary:focus { color: #fff; text-decoration: none; }
.btn-stack { display: grid; gap: 12px; margin-top: 8px; }
.btn-row { display: flex; gap: 12px; }
.btn-row > * { flex: 1; }

/* Result card: account recovery outcomes, faculty sign-up outcomes */
.result-icon {
    width: 64px; height: 64px; border-radius: 18px; margin-bottom: 20px;
    display: grid; place-items: center; font-size: 30px;
}
.result-icon.success { background: #E8F5EE; color: var(--pass); }
.result-icon.warning { background: #FFF4CE; color: #6B4A00; }
.result-icon.danger  { background: #FDEDEC; color: var(--fail); }
.result-body { font-size: 17px; line-height: 1.55; color: var(--muted); margin-bottom: 28px; }
.result-body p { margin: 0 0 14px; }
.result-body strong { color: var(--ink); }
.result-body ol, .result-body ul { padding-left: 22px; margin: 0 0 14px; }
.result-body li { margin-bottom: 8px; }
.result-more { margin-top: 6px; border-top: 1px solid #EEF1F4; padding-top: 10px; }
.result-more > summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 6px 0; }
.result-more > summary:hover { color: var(--primary); }
.result-more > ul { margin-top: 8px; }
.panel-note {
    display: flex; gap: 12px; align-items: flex-start;
    background: var(--canvas-2); border: 1px solid var(--border); border-radius: 12px;
    padding: 14px 16px; margin: 20px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted);
}
.panel-note i { color: var(--primary); font-size: 18px; margin-top: 1px; }

/* Long forms: selects, hints, sections */
.field select {
    width: 100%; height: 60px; padding: 22px 40px 6px 48px;
    font: inherit; font-size: 17px; color: var(--ink);
    background-color: var(--canvas-2); border: 1.5px solid transparent; border-radius: var(--radius);
    appearance: none; -webkit-appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23545454' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 18px center;
}
.field select:hover { border-color: var(--border); }
.field select:focus { outline: none; background-color: #fff; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(0,75,181,.14); }
.field select[aria-invalid="true"] { border-color: var(--fail); background-color: #fff; }
.field select + label { transform: translateY(-11px) scale(.76); color: var(--primary); font-weight: 700; }
.field select:focus ~ .lead-ico { color: var(--primary); }
.field.plain input { padding-left: 18px; }
.field.plain label { left: 18px; }
.field-hint { font-size: 14px; color: var(--subdued); margin: -10px 4px 18px; line-height: 1.4; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.form-section { border: 0; padding: 0; margin: 0 0 8px; min-width: 0; }
.form-section > legend {
    font-size: 14px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--subdued); margin: 0 0 16px; padding: 0;
}
.conditional-field { display: none; }
.conditional-field.visible { display: block; }

/* Step progress for multi-step forms */
.steps { display: flex; align-items: center; gap: 10px; padding: 0; margin: 0 0 28px; }
.steps .step-item { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--subdued); }
.steps .step-number {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    font-size: 14px; background: var(--canvas-2); border: 1.5px solid var(--border); color: var(--subdued);
}
.steps .step-item.active { color: var(--primary); }
.steps .step-item.active .step-number { background: var(--primary); border-color: var(--primary); color: #fff; }
.steps .step-item.completed { color: var(--pass); cursor: pointer; }
.steps .step-item.completed .step-number { background: #E8F5EE; border-color: #B9DEC9; color: var(--pass); }
.steps .step-connector { flex: 1; height: 2px; background: var(--border); border-radius: 2px; min-width: 16px; }
.steps .step-connector.completed { background: #B9DEC9; }
.step-panel { display: none; }
.step-panel.active { display: block; }
.step-nav { display: flex; gap: 12px; margin-top: 8px; }
.step-nav .btn-primary { flex: 1.4; width: auto; }
.step-nav .btn-secondary { flex: 1; width: auto; }

/* Password strength meter */
.strength { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: -8px 4px 8px; }
.strength i { height: 5px; border-radius: 3px; background: var(--border); }
.strength i.weak { background: var(--fail); }
.strength i.fair { background: #B7791F; }
.strength i.strong { background: var(--pass); }
.field-hint.weak { color: var(--fail); font-weight: 700; }
.field-hint.fair { color: #7A4F00; font-weight: 700; }
.field-hint.strong { color: var(--pass); font-weight: 700; }

/* Chips row on the stage (feature list) */
.chip-row { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 10px; max-width: 620px; }
.chip-row span {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600;
    background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
}
.chip-row i { color: var(--cyan); }

/* Injected by js/recaptcha-guard.js when Google's script fails to load. */
.recaptcha-guard-alert {
    margin-top: 16px; padding: 12px 14px; border-radius: 12px;
    background: #FFF7E0; color: #6B4A00; border: 1px solid #EBD393;
    font-size: 15px; font-weight: 600; line-height: 1.45;
}

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
    /* Phones and tablets: the form comes first, then the brand story, then the footer. */
    .shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        grid-template-areas: "panel" "stage" "foot";
    }
    .panel-brand { display: inline-flex; }
    .stage .brand { display: none; }
    .stage-copy { margin-top: 0; }
    .foot { margin: 0 16px; padding-bottom: 24px; }
    .stage { padding: 28px 24px 32px; }
    .stage h2 { font-size: 36px; }
    .stage p.lede { font-size: 18px; }
    .preview { padding-top: 24px; grid-template-columns: 1fr; }
    .ring-card, .week-card, .how-card, .sample-tag { display: none !important; }
    .fact-card { animation: none; }
    .fact-card blockquote { font-size: 16px; }
    .works-with { margin-top: 20px; font-size: 14px; }
    .panel { padding: 8px 16px 24px; }
    .panel-top { display: none; }
    .form-wrap { padding: 28px 0 8px; }
    .form-wrap h1 { font-size: 32px; }
}
@media (max-width: 520px) {
    .field-row { grid-template-columns: 1fr; }
    .steps .step-label { display: none; }
    .btn-row, .step-nav { flex-direction: column-reverse; }
    .btn-row > *, .step-nav .btn-primary, .step-nav .btn-secondary { flex: none; width: 100%; }
}
@media (max-width: 420px) {
    .help-grid { grid-template-columns: 1fr; }
    .row-links { flex-direction: column; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0s !important; transition: none !important; }
}