:root { color-scheme: light; font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --bg:#f4f6f8; --surface:#fff; --soft:#e8eef6; --text:#202124; --muted:#687078; --line:#dfe3e7; --orange:#f26c3a; --orange-soft:#fff1eb; --navy:#243448; --danger:#c93434; --shadow:0 1px 3px rgba(18,26,35,.12); }
:root.dark-mode { color-scheme:dark; --bg:#15191f; --surface:#1d2631; --soft:#273443; --text:#f4f5f7; --muted:#b6bcc5; --line:#3a424c; --orange-soft:#4a2d24; --navy:#edf2f7; --danger:#ff7b72; --shadow:0 1px 3px rgba(0,0,0,.35); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--bg); } body { margin:0; color:var(--text); background:var(--bg); } a { color:inherit; text-decoration:none; } button { font:inherit; } .shell { width:100%; min-height:100vh; margin:0; overflow:hidden; background:var(--surface); border:0; border-radius:0; box-shadow:none; }
.topbar { min-height:64px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:10px 20px; border-bottom:1px solid var(--line); } .brand,.topbar nav { display:flex; align-items:center; gap:12px; } .brand { font-weight:800; } .brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:var(--orange); border-radius:50%; } .topbar nav a { color:var(--muted); font-size:12px; } .icon-button { width:38px; height:38px; display:grid; place-items:center; color:var(--text); background:var(--soft); border:0; border-radius:6px; cursor:pointer; }
.safety-hero { display:grid; grid-template-columns:.9fr 1.1fr; min-height:420px; } .hero-copy { display:flex; flex-direction:column; justify-content:center; padding:42px; } .eyebrow { color:var(--orange); font-size:10px; font-weight:800; text-transform:uppercase; } h1 { max-width:520px; margin:7px 0 14px; font-size:42px; line-height:1.05; letter-spacing:0; } .hero-copy p { max-width:520px; margin:0 0 22px; color:var(--muted); font-size:14px; line-height:1.65; } .safety-hero > img { width:100%; height:100%; min-height:420px; object-fit:cover; } .hero-actions { display:flex; flex-wrap:wrap; gap:8px; } .button { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:9px 13px; background:var(--soft); border-radius:5px; font-size:12px; font-weight:700; } .button.primary { color:#fff; background:var(--orange); }
.priority-band { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .priority-band > div { display:flex; align-items:flex-start; gap:10px; padding:17px 22px; background:var(--bg); } .priority-band > div + div { border-left:1px solid var(--line); } .priority-band svg { flex:0 0 auto; color:var(--orange); } .priority-band strong,.priority-band span { display:block; } .priority-band strong { margin-bottom:2px; font-size:12px; } .priority-band span { color:var(--muted); font-size:10px; line-height:1.4; }
.content-band,.resources-band { padding:34px 38px; } .section-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; } h2 { margin:5px 0 0; font-size:25px; } .section-head p { margin:5px 0 0; color:var(--muted); font-size:12px; } .reset-button { display:inline-flex; align-items:center; gap:6px; padding:8px 10px; color:var(--muted); background:var(--soft); border:0; border-radius:5px; cursor:pointer; } .check-progress { display:flex; align-items:center; gap:14px; margin-bottom:12px; color:var(--muted); font-size:10px; } .progress-track { flex:1; height:5px; overflow:hidden; background:var(--soft); border-radius:4px; } .progress-track span { display:block; width:0; height:100%; background:var(--orange); transition:width .2s ease; }
.checklist { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:6px; overflow:hidden; } .checklist label { min-width:0; display:flex; align-items:flex-start; gap:11px; padding:15px; cursor:pointer; } .checklist label:nth-child(odd) { border-right:1px solid var(--line); } .checklist label:nth-child(n+3) { border-top:1px solid var(--line); } .checklist input { flex:0 0 auto; width:18px; height:18px; margin:1px 0 0; accent-color:var(--orange); } .checklist span,.checklist strong { display:block; } .checklist span { color:var(--muted); font-size:10px; line-height:1.45; } .checklist strong { margin-bottom:3px; color:var(--text); font-size:12px; }
.split-band { display:grid; grid-template-columns:1fr 1fr; background:var(--bg); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .split-band article { padding:34px 38px; } .split-band article + article { border-left:1px solid var(--line); } .split-band ol,.split-band ul { margin:18px 0 0; padding-left:20px; } .split-band li { padding:0 0 11px 4px; color:var(--muted); font-size:12px; line-height:1.55; } .split-band li strong { color:var(--text); } .source-note { padding:12px; color:var(--muted); background:var(--surface); border-left:3px solid var(--orange); font-size:10px; line-height:1.5; }
.emergency-band { display:grid; grid-template-columns:.8fr 1.2fr; border-bottom:1px solid var(--line); } .emergency-call { padding:34px 38px; color:#fff; background:#8f2727; } .emergency-call .eyebrow { color:#ffd3ca; } .emergency-call > strong { display:block; margin:8px 0; font-size:28px; } .emergency-call a { text-decoration:underline; text-underline-offset:3px; } .emergency-call p { margin:0; color:#ffe9e5; font-size:12px; line-height:1.6; } .emergency-steps { padding:34px 38px; } .emergency-steps ol { margin:16px 0 0; padding-left:21px; } .emergency-steps li { padding:0 0 9px 4px; color:var(--muted); font-size:11px; line-height:1.5; }
.resources-band { background:var(--bg); } .resource-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .resource-grid a { min-width:0; display:grid; grid-template-columns:auto 1fr auto; align-items:start; gap:10px; padding:14px; background:var(--surface); border:1px solid var(--line); border-radius:6px; } .resource-grid a:hover,.resource-grid a:focus-visible { border-color:var(--orange); outline:0; } .resource-grid svg { color:var(--orange); } .resource-grid span,.resource-grid strong { display:block; } .resource-grid span { color:var(--muted); font-size:10px; line-height:1.45; } .resource-grid strong { margin-bottom:3px; color:var(--text); font-size:12px; } .resource-grid a > svg:last-child { width:14px; color:var(--muted); } .disclaimer { margin:18px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
footer { display:flex; justify-content:space-between; gap:20px; padding:18px 38px; color:var(--muted); border-top:1px solid var(--line); font-size:10px; } footer a { color:var(--orange); font-weight:700; }
@media (max-width:760px) { .safety-hero { grid-template-columns:1fr; } .safety-hero > img { min-height:280px; max-height:360px; } .priority-band,.resource-grid { grid-template-columns:1fr; } .priority-band > div + div { border-top:1px solid var(--line); border-left:0; } .split-band,.emergency-band { grid-template-columns:1fr; } .split-band article + article { border-top:1px solid var(--line); border-left:0; } .resource-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px) { .shell { width:100%; margin:0; border-width:0; border-radius:0; } .topbar { flex-wrap:wrap; padding:10px 14px 0; } .topbar nav { width:calc(100% + 28px); margin:0 -14px; padding:0 14px 10px; overflow-x:auto; } .topbar nav a { flex:0 0 auto; } .hero-copy,.content-band,.split-band article,.emergency-call,.emergency-steps,.resources-band { padding-left:18px; padding-right:18px; } h1 { font-size:34px; } .checklist,.resource-grid { grid-template-columns:1fr; } .checklist label:nth-child(odd) { border-right:0; } .checklist label + label { border-top:1px solid var(--line); } footer { display:grid; padding-left:18px; padding-right:18px; } }