/* ========== AuditX candidate portal ========== */
:root{
  --ink:#0d2233; --ink-2:#33475b; --muted:#697c8f;
  --line:#e1e8ee; --line-2:#eef2f6;
  --canvas:#f3f6f8; --surface:#fff;
  --accent:#0f7d75; --accent-2:#0b625c; --accent-soft:#e6f4f2;
  --danger:#b42318; --danger-soft:#fdf1f0;
  --ok:#067647; --ok-soft:#e8f5ee;
  --warn:#a15c07; --warn-soft:#fdf5e7;
  --radius:12px; --radius-sm:8px;
  --shadow:0 1px 2px rgba(13,34,51,.05), 0 8px 24px -16px rgba(13,34,51,.28);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:var(--canvas); color:var(--ink);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:var(--accent-2)}
.wrap{width:100%; max-width:940px; margin:0 auto; padding:0 20px}
.page{padding-top:28px; padding-bottom:56px; min-height:60vh}
.muted{color:var(--muted)}
.small{font-size:13px}
h1{font-size:28px; line-height:1.25; letter-spacing:-.02em; font-weight:650; margin:0 0 10px}
h2{font-size:19px; letter-spacing:-.01em; font-weight:650; margin:28px 0 10px}
h3{font-size:15px; font-weight:650; margin:22px 0 6px; letter-spacing:-.005em}
.lede{font-size:16px; color:var(--ink-2); margin:0 0 18px; max-width:66ch}
.eyebrow{font-size:11px; letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
  font-weight:650; margin:0 0 8px}

/* ---------- header / footer ---------- */
.site-head{background:var(--surface); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20}
.head-inner{display:flex; align-items:center; justify-content:space-between; height:62px; gap:16px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink)}
.brand-mark{display:flex; color:var(--ink)}
.brand-text{font-weight:680; letter-spacing:-.02em; font-size:17px}
.head-meta{display:flex; align-items:center; gap:16px; font-size:13px; color:var(--muted)}
.head-meta a{color:var(--muted); text-decoration:none}
.head-meta a:hover{color:var(--ink)}
.head-secure{display:inline-flex; align-items:center; gap:6px; color:var(--accent);
  background:var(--accent-soft); padding:4px 10px; border-radius:999px; font-weight:550}
.site-foot{background:var(--ink); color:#b9c8d4; margin-top:auto; padding:34px 0 22px}
.foot-inner{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap}
.foot-brand{color:#fff; font-weight:650; letter-spacing:-.02em; font-size:16px}
.foot-tagline{margin:6px 0 0; max-width:44ch; font-size:13px}
.foot-h{display:block; color:#fff; font-size:12px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:6px}
.foot-links a{color:#b9c8d4; font-size:13px}
.foot-legal{border-top:1px solid rgba(255,255,255,.1); margin-top:24px; padding-top:16px; font-size:12px; color:#7f94a5}

/* ---------- cards ---------- */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:30px 32px; box-shadow:var(--shadow)}
.card.narrow{max-width:620px; margin:0 auto}
.center-card{text-align:center}
.center-card .lede{margin-left:auto; margin-right:auto}

/* ---------- stepper ---------- */
.stepper{display:flex; list-style:none; margin:0 0 22px; padding:0; gap:0; counter-reset:s}
.step{flex:1; display:flex; flex-direction:column; align-items:center; gap:7px; position:relative;
  font-size:12px; color:var(--muted); text-align:center}
.step::before{content:""; position:absolute; top:13px; left:calc(-50% + 16px); right:calc(50% + 16px);
  height:2px; background:var(--line)}
.step:first-child::before{display:none}
.step-dot{width:26px; height:26px; border-radius:50%; display:grid; place-items:center;
  background:var(--surface); border:2px solid var(--line); color:var(--muted);
  font-size:12px; font-weight:650; position:relative; z-index:1}
.step.current .step-dot{border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.step.current .step-label{color:var(--ink); font-weight:600}
.step.done .step-dot{background:var(--accent); border-color:var(--accent); color:#fff}
.step.done::before, .step.current::before{background:var(--accent)}

/* ---------- home ---------- */
.hero{padding:14px 0 24px}
.hero h1{font-size:34px}
.card + .card{margin-top:16px}
.card-h{margin:0 0 4px; font-size:20px; letter-spacing:-.015em}
.card-h + .bullets{margin-top:14px}

/* ---------- prose / bullets ---------- */
.prose p{margin:0 0 12px; color:var(--ink-2)}
.prose h3{color:var(--ink)}
.scroll-terms{max-height:52vh; overflow-y:auto; padding:18px 20px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:#fbfcfd}
.bullets{list-style:none; margin:18px 0 4px; padding:0}
.bullets li{position:relative; padding:0 0 0 30px; margin-bottom:13px; color:var(--ink-2)}
.bullets li::before{content:""; position:absolute; left:6px; top:9px; width:7px; height:7px;
  border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  font:inherit; font-weight:600; border-radius:var(--radius-sm); padding:11px 20px;
  border:1px solid transparent; text-decoration:none; transition:background .15s, border-color .15s}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-2)}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--ink-2)}
.btn-ghost:hover{border-color:var(--ink-2)}
.btn-lg{padding:13px 30px; font-size:15px}
.btn[disabled]{opacity:.6; cursor:not-allowed}
.actions{margin-top:26px}
.actions-split{display:flex; justify-content:space-between; align-items:center; gap:12px}

/* ---------- forms ---------- */
.field-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 18px; margin-top:20px}
.col-full{grid-column:1 / -1}
.field label{display:block; font-size:13px; font-weight:600; color:var(--ink); margin-bottom:6px}
.req{color:var(--danger)}
.field input[type=text],.field input[type=email],.field input[type=tel],.field input[type=number],
.field input[type=date],.field select,.field textarea{
  width:100%; padding:11px 13px; font:inherit; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-sm); transition:border-color .15s, box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical}
.license-input{font-variant-numeric:tabular-nums; letter-spacing:.03em}
.field-help{margin:6px 0 0; font-size:12.5px; color:var(--muted)}
.field-error{margin:6px 0 0; font-size:12.5px; color:var(--danger); font-weight:600}
/* Scoped to .field so these beat the base ".field input[type=text]" rule and
   the whole control actually turns red, not just the message under it. */
.field.has-error input,.field.has-error select,.field.has-error textarea,.field.has-error .upload{
  border-color:var(--danger); background:var(--danger-soft)}
.field.has-error input:focus,.field.has-error select:focus,.field.has-error textarea:focus{
  border-color:var(--danger); box-shadow:0 0 0 3px rgba(180,35,24,.12)}
.hp-field{position:absolute; left:-9999px; width:1px; height:1px; opacity:0}
.section-h{border-top:1px solid var(--line-2); padding-top:24px; margin-top:30px}

/* upload */
.upload{display:flex; align-items:center; gap:12px; padding:13px 14px; border:1px dashed var(--line);
  border-radius:var(--radius-sm); background:#fbfcfd; cursor:pointer; transition:border-color .15s, background .15s}
.upload:hover,.upload.dragover{border-color:var(--accent); background:var(--accent-soft)}
.upload input[type=file]{position:absolute; width:1px; height:1px; opacity:0}
.upload-icon{display:grid; place-items:center; width:36px; height:36px; flex:0 0 36px;
  border-radius:9px; background:var(--accent-soft); color:var(--accent-2)}
.upload-text{min-width:0}
.upload-label{display:block; font-size:13px; font-weight:600; color:var(--ink)}
.upload-hint{display:block; font-size:12.5px; color:var(--muted); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.upload.filled{border-style:solid; border-color:var(--accent); background:var(--accent-soft)}
.upload.filled .upload-hint{color:var(--accent-2); font-weight:600}

.submit-row{display:flex; align-items:center; justify-content:space-between; gap:20px;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2); flex-wrap:wrap}
.submit-row p{margin:0; max-width:46ch}

/* ---------- alerts / results ---------- */
.alert{display:flex; flex-direction:column; gap:2px; padding:13px 16px; border-radius:var(--radius-sm);
  font-size:14px; margin:18px 0 4px; border:1px solid transparent}
.alert-error{background:var(--danger-soft); border-color:#f2c7c2; color:var(--danger)}
.alert-error span{color:var(--ink-2)}
.icon-circle{width:60px; height:60px; border-radius:50%; display:grid; place-items:center;
  margin:0 auto 18px; font-size:26px; font-weight:700}
.icon-circle.ok{background:var(--ok-soft); color:var(--ok)}
.icon-circle.warn{background:var(--warn-soft); color:var(--warn)}
.ref-box{display:inline-flex; flex-direction:column; gap:2px; padding:12px 26px; margin:6px 0 22px;
  border:1px dashed var(--accent); border-radius:var(--radius-sm); background:var(--accent-soft)}
.ref-label{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-2)}
.ref-value{font-size:19px; letter-spacing:.06em; color:var(--ink)}
.receipt{list-style:none; margin:0 0 20px; padding:0; text-align:left; border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden}
.receipt li{display:flex; justify-content:space-between; gap:16px; padding:11px 16px; font-size:14px}
.receipt li+li{border-top:1px solid var(--line-2)}
.receipt span{color:var(--muted)}

@media (max-width:640px){
  .field-grid{grid-template-columns:1fr}
  .card{padding:22px 18px}
  h1{font-size:24px}
  .hero h1{font-size:27px}
  .step-label{display:none}
  .head-meta a{display:none}
  .submit-row .btn{width:100%}
}