:root{
  --navy:#1e2a5a; --navy-2:#2b3a72; --ink:#171c2c; --ink-soft:#4d5570; --ink-faint:#79819a;
  --ground:#f4f6fa; --surface:#ffffff; --rule:#dce1ec; --rule-2:#c3cbdd;
  --ok:#2a6050; --ok-bg:#e4f0ea; --warn:#8a5a12; --warn-bg:#fbf0dc; --bad:#8f2727; --bad-bg:#f8e6e6;
  --focus:#3a58b8;
  --page:1000px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font:16px/1.6 "Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--navy)}
.band{background:#fff;border-bottom:3px solid var(--navy)}
.band .inner{max-width:var(--page);margin:0 auto;padding:0 20px}
.band img{display:block;width:100%;height:auto}
.band .strip{max-width:var(--page);margin:0 auto;padding:9px 20px;background:var(--navy);color:#fff;
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;align-items:baseline}
.band .mark{font-weight:700;font-size:.95rem}
.band .sub{font-size:.78rem;color:#c4cdf0}
@media(max-width:640px){.band .strip{font-size:.85rem}}
.wrap{max-width:var(--page);margin:0 auto;padding:24px 20px 72px}
.narrow{max-width:var(--page)}
h1{font-size:1.9rem;line-height:1.2;margin:0 0 6px}
h2{font-size:1.22rem;color:var(--navy);margin:0 0 10px}
h3{font-size:1rem;margin:0 0 6px}
.card{background:var(--surface);border:1px solid var(--rule);border-radius:6px;padding:20px 22px;margin-bottom:16px}
.muted{color:var(--ink-soft)}
.small{font-size:.86rem}
.tiny{font-size:.78rem}
table{width:100%;border-collapse:collapse;font-size:.92rem}
th{text-align:left;font-size:.7rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-faint);
  padding:10px 12px;border-bottom:1px solid var(--rule-2);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
.scroll{overflow-x:auto}
.btn{display:inline-block;background:var(--navy);color:#fff;border:1px solid var(--navy);border-radius:4px;
  padding:11px 20px;font-size:.95rem;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--navy-2)}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-ghost{background:transparent;color:var(--navy)}
.note{border-left:3px solid var(--navy);background:#eef1f9;padding:10px 14px;font-size:.9rem;border-radius:0 4px 4px 0}
.note-warn{border-left-color:var(--warn);background:var(--warn-bg)}
.note-bad{border-left-color:var(--bad);background:var(--bad-bg)}
.note-ok{border-left-color:var(--ok);background:var(--ok-bg)}
label{display:block;font-size:.85rem;font-weight:600;margin-bottom:4px}
label .opt{font-weight:400;color:var(--ink-faint)}
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid var(--rule-2);border-radius:4px;font:inherit;font-size:.95rem;
  background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus,[contenteditable]:focus{outline:2px solid var(--focus);outline-offset:1px;border-color:var(--focus)}
.grid{display:grid;gap:14px;min-width:0}
.grid > *{min-width:0}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:700px){.g2,.g3{grid-template-columns:1fr}}
.err{color:var(--bad);font-size:.82rem;margin-top:4px}
.footer{border-top:1px solid var(--rule);margin-top:32px;padding-top:16px;font-size:.82rem;color:var(--ink-faint)}

/* ── Small screens ────────────────────────────────────────────
   Many applicants fill this on a phone. Inputs go to 16px so iOS
   does not zoom the page on focus, and the chrome gets out of the way. */
@media (max-width: 760px){
  body{font-size:15px}
  .wrap{padding:16px 14px 56px}
  .band .inner{padding:0 10px}
  .band .strip{padding:8px 14px;gap:2px}
  .band .strip .sub{font-size:.72rem}
  h1{font-size:1.45rem}
  h2{font-size:1.08rem}
  .card{padding:16px 14px;border-radius:6px}
  input[type=text],input[type=email],input[type=tel],input[type=date],
  input[type=number],input[type=password],select,textarea{
    font-size:16px;padding:11px 12px}
  label{font-size:.88rem}
  .btn{padding:13px 20px;font-size:1rem;width:100%;text-align:center}
  .btn-inline{width:auto}
  table{font-size:.86rem}
  th,td{padding:9px 10px}
}
/* a table is the wrong shape on a phone: stack each row as a small block */
@media (max-width: 640px){
  table.stack thead{display:none}
  table.stack, table.stack tbody, table.stack tr, table.stack td{display:block;width:100%}
  table.stack tr{border:1px solid var(--rule);border-radius:6px;padding:10px 12px;margin-bottom:10px}
  table.stack tr:last-child{margin-bottom:0}
  table.stack td{border:none;padding:3px 0;display:flex;gap:14px;justify-content:space-between;align-items:baseline}
  table.stack td::before{content:attr(data-label);color:var(--ink-faint);font-size:.74rem;
    font-weight:600;text-transform:uppercase;letter-spacing:.05em;flex:0 0 auto}
  table.stack td:first-child{display:block;margin-bottom:4px}
  table.stack td:first-child::before{display:none}
  .scroll:has(table.stack){overflow-x:visible}
}
@media (max-width: 420px){
  .wrap{padding:12px 10px 48px}
  .band .strip{display:block}
  .band .strip .sub{display:block;margin-top:2px}
}