/* ============================================================
   Results Over Resumes — /training (below-the-fold + modal)
   Critical above-the-fold CSS is inlined in training.html.
   Design tokens (--yellow, --card, --muted…) are declared there.
   ============================================================ */

/* ---------- verticals ---------- */
.verticals{margin-top:2rem;width:100%;display:flex;flex-direction:column;align-items:center;gap:.85rem}
.verticals .lbl{font-size:.68rem;font-weight:900;letter-spacing:.19em;text-transform:uppercase;color:var(--muted)}
.vlist{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.5rem}
/* 1.55rem Teko at weight 600 counts as WCAG large text, so #6f6f6f on black
   clears the 3:1 large-text threshold. Do not reuse this grey at body size. */
.vlist span{font-family:'Teko','Lato',sans-serif;font-size:1.55rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#6f6f6f}

/* ---------- footer ---------- */
.divider{width:100%;height:1px;background:rgba(255,255,255,.09);margin-top:1.5rem}
footer{max-width:var(--maxw);margin:0 auto;padding:2.25rem 1rem 3.5rem;text-align:center}
footer .logo{margin:0 auto 1.75rem;max-width:11rem;opacity:.75}
.legal{font-size:.76rem;line-height:1.65;color:#7d7d7d;text-align:left;max-width:44rem;margin:0 auto;display:flex;flex-direction:column;gap:.85rem}
.legal b{color:#b0b0b0;font-weight:900}
.copy{margin-top:1.75rem;font-size:.78rem;color:#7d7d7d;line-height:1.6}
.flinks{margin-top:.7rem;display:flex;gap:1.4rem;justify-content:center;font-size:.78rem;color:var(--muted)}
.flinks a{text-decoration:none}
.flinks a:hover{color:var(--yellow)}

/* ---------- modal ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:1rem;z-index:50}
.overlay.open{display:flex}
.modal-shell{position:relative;width:100%;max-width:29rem}
.modal{width:100%;background:#121212;border:1px solid rgba(255,255,255,.09);border-radius:1rem;padding:2rem 1.6rem;animation:modalIn .26s ease-out}
@keyframes modalIn{0%{opacity:0;transform:translateY(16px) scale(.97)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.modal{animation:none}}
.modal h2{font-family:'Teko','Lato',sans-serif;font-weight:700;font-size:2.1rem;line-height:1;text-transform:uppercase;text-align:center;margin-bottom:1.15rem}
.modal input{width:100%;padding:.95rem 1.05rem;margin-bottom:.75rem;border-radius:.5rem;border:1px solid rgba(255,255,255,.1);background:#262626;color:#fff;font-size:1rem;font-family:inherit;font-weight:700}
.modal input::placeholder{color:#8c8c8c;font-weight:400}
.modal input:focus{outline:2px solid var(--yellow);outline-offset:1px;border-color:transparent}
.modal .btn{max-width:none;margin-top:.4rem}
.consent{margin-top:.95rem;font-size:.7rem;line-height:1.55;color:#8c8c8c;text-align:center}
.err{color:#ff7676;font-size:.82rem;font-weight:900;margin-bottom:.6rem;display:none;text-align:center}
.err.show{display:block}
.modal-close{position:absolute;top:-.65rem;right:-.65rem;z-index:2;background:#262626;border:1px solid rgba(255,255,255,.16);color:#fff;width:2.1rem;height:2.1rem;border-radius:999px;font-size:1.2rem;line-height:1}
.modal-close:hover{background:var(--yellow);color:#000}

/* Honeypot wrapper — off-canvas rather than display:none, so bots that skip
   hidden fields still fill it. Same technique as career-discovery.css. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}