:root { --ink:#222; --cream:#fff9ef; --peach:#f1d5c4; --lilac:#b1b2ff; --orange:#f47b36; --wine:#8b080b; --olive:#928f22; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:32px; background:var(--cream); color:var(--ink); font-family:Arial,sans-serif; }
main { width:min(900px,100%); padding:clamp(28px,6vw,72px); border:1px solid rgba(34,34,34,.14); border-radius:28px; background:white; box-shadow:0 24px 70px rgba(34,34,34,.12); }
.eyebrow { color:var(--olive); font-size:11px; font-weight:700; letter-spacing:.18em; }
h1 { margin:20px 0; font:600 clamp(50px,8vw,86px)/.95 Georgia,serif; letter-spacing:-.035em; }
h1 em { color:var(--orange); }
.lead { max-width:680px; color:#6f6863; font-size:18px; line-height:1.7; }
section { margin:34px 0; padding:18px 20px; border-left:4px solid var(--wine); border-radius:14px; background:rgba(241,213,196,.45); }
section strong { color:var(--wine); }
section p { margin:8px 0 0; color:#6f6863; line-height:1.55; }
.flow { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.flow span { padding:10px 14px; border-radius:999px; background:var(--lilac); font-size:11px; font-weight:700; }
.flow span:nth-of-type(2) { background:var(--peach); }
.flow span:nth-of-type(3) { background:#ffe1cf; }
.flow span:nth-of-type(4) { background:#f0efcf; }
.candidate-body { display:block; padding:24px; }
.candidate-shell { margin:0 auto; min-height:calc(100vh - 48px); }
.candidate-header { display:flex; justify-content:space-between; gap:24px; align-items:center; border-bottom:1px solid rgba(34,34,34,.12); padding-bottom:18px; }
.step-note { margin:0; color:#6f6863; font-size:13px; }
.status-message { min-height:24px; margin:18px 0 0; color:#6f6863; font-size:14px; }
.status-message[data-tone="success"] { color:#4f701d; }
.status-message[data-tone="error"] { color:var(--wine); }
.candidate-panel { margin-top:20px; }
.candidate-panel[hidden] { display:none; }
.notice-card { margin:34px 0; padding:18px 20px; border-left:4px solid var(--wine); border-radius:14px; background:rgba(241,213,196,.45); }
.notice-card strong { color:var(--wine); }
.notice-card p { margin:8px 0 0; color:#6f6863; line-height:1.55; }
.interview-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:32px 0; padding:0; list-style:none; }
.interview-facts li { display:flex; flex-direction:column; gap:5px; padding:18px; border-radius:18px; background:var(--cream); }
.interview-facts strong { font:600 26px/1 Georgia,serif; color:var(--wine); }
.interview-facts span { color:#6f6863; font-size:12px; }
.candidate-form { display:grid; gap:18px; max-width:720px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.candidate-form label { display:grid; gap:8px; font-size:13px; font-weight:700; }
.candidate-form input:not([type="checkbox"]), .candidate-form select { width:100%; min-height:48px; border:1px solid rgba(34,34,34,.22); border-radius:12px; padding:10px 12px; background:white; color:var(--ink); font:inherit; }
.candidate-form input:focus, .candidate-form select:focus { outline:3px solid rgba(177,178,255,.45); border-color:#6c6ee5; }
.candidate-form .consent-row { grid-template-columns:20px 1fr; align-items:start; font-weight:400; line-height:1.55; }
.consent-row input { margin-top:4px; }
.consent-row a, .legal-shell a { color:var(--wine); text-underline-offset:3px; }
.help-copy { margin:0; color:#6f6863; font-size:13px; line-height:1.5; }
button { font:inherit; }
.primary-button, .secondary-button { min-height:44px; border:0; border-radius:999px; padding:11px 18px; cursor:pointer; font-weight:700; }
.primary-button { justify-self:start; background:var(--wine); color:white; }
.secondary-button { background:var(--peach); color:var(--ink); }
.primary-button:disabled, .secondary-button:disabled { cursor:not-allowed; opacity:.45; }
.questions-heading { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(220px,.6fr); gap:30px; align-items:end; }
.questions-heading > p { color:#6f6863; line-height:1.6; }
.question-list { display:grid; gap:12px; margin:34px 0; }
.question-card { display:grid; grid-template-columns:54px 1fr auto; gap:16px; align-items:center; padding:18px; border:1px solid rgba(34,34,34,.12); border-radius:18px; transition:border-color .2s,background .2s; }
.question-card.is-complete { border-color:rgba(79,112,29,.35); background:#f6f7e8; }
.question-number { font:600 28px/1 Georgia,serif; color:var(--orange); }
.question-card p { margin:6px 0 0; color:#6f6863; line-height:1.45; }
.finish-button { margin-left:auto; display:block; }
.recording-dialog { width:min(760px,calc(100% - 24px)); max-height:calc(100vh - 24px); border:0; border-radius:24px; padding:24px; background:white; box-shadow:0 30px 100px rgba(34,34,34,.3); }
.recording-dialog::backdrop { background:rgba(34,34,34,.72); }
.dialog-heading { display:flex; justify-content:space-between; gap:20px; align-items:start; }
.dialog-heading h2 { margin:8px 0 0; font:600 30px/1.1 Georgia,serif; }
.icon-button { width:42px; height:42px; border:0; border-radius:50%; background:var(--cream); cursor:pointer; font-size:26px; }
.recording-prompt { color:#6f6863; line-height:1.55; }
#camera-preview { display:block; width:100%; max-height:52vh; border-radius:18px; background:#1f1f1f; object-fit:cover; transform:scaleX(-1); }
.recording-state { min-height:22px; color:#6f6863; font-size:13px; }
.recording-actions { display:flex; flex-wrap:wrap; gap:10px; }
.legal-shell { max-width:980px; }
.legal-shell h1 { font-size:clamp(44px,7vw,78px); }
.legal-shell section { margin:20px 0; }
.legal-shell h2 { margin:0; font:600 24px/1.15 Georgia,serif; }
.legal-shell section p + p { margin-top:12px; }
.legal-footer { margin:28px 0 0; color:#6f6863; line-height:1.6; }
@media (max-width:600px) { .flow b { display:none; } }
@media (max-width:700px) {
  .candidate-body { padding:10px; }
  .candidate-shell { min-height:calc(100vh - 20px); padding:24px; border-radius:20px; }
  .candidate-header { align-items:start; }
  .interview-facts, .form-grid, .questions-heading { grid-template-columns:1fr; }
  .question-card { grid-template-columns:42px 1fr; }
  .question-card button { grid-column:2; justify-self:start; }
}