:root { color-scheme: light; --ink: #173b57; --accent: #17677c; }
* { box-sizing: border-box; }
body { margin: 0; background: #f3f6f8; color: #183448; font: 1rem/1.65 system-ui, sans-serif; }
header, footer { width: 100%; max-width: none; margin: 0; padding: 1.25rem clamp(1rem, 2vw, 2rem); }
header { display: flex; gap: 1rem; justify-content: space-between; border-bottom: 1px solid #bcccd4; background: #fff; }
header a { font-weight: 750; }
main { width: 100%; max-width: none; margin: 0; padding: 0; background: #fff; }
.guide-layout { min-height: calc(100vh - 150px); }
.guide-index { min-width: 0; padding: 2rem clamp(1rem, 2vw, 2rem); border-right: 1px solid #ccd8df; background: #f3f6f8; }
.guide-index nav { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow-y: auto; }
.guide-index ol { padding-left: 1.4rem; }
.guide-index li { padding: .3rem 0; }
.guide-content { min-width: 0; padding: 2rem clamp(1rem, 3vw, 3rem); }
.guide-content section { padding: 1.25rem 0; border-top: 1px solid #ccd8df; scroll-margin-top: 1rem; }
h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.2; }
h2 { font-size: 1.4rem; line-height: 1.3; }
li { overflow-wrap: anywhere; }
a { color: #12586c; text-underline-offset: .2em; }
a:focus-visible, main:focus-visible { outline: 3px solid #b25b00; outline-offset: 4px; }
.button { display: inline-block; padding: .7rem 1rem; background: var(--ink); color: white; border-radius: .35rem; }
.button:hover, .button:focus { color: white; }
.meta, .verification { font-size: .92rem; color: #405768; }
.verification { border-left: 4px solid var(--accent); padding: .6rem 1rem; background: #edf5f7; }
.eyebrow { text-transform: uppercase; letter-spacing: .1em; color: var(--accent); font-size: .85rem; }
.skip { position: absolute; left: -10000px; }
.skip:focus { left: 1rem; top: .5rem; background: white; padding: 1rem; z-index: 10; }
footer { font-size: .9rem; }
@media (max-width: 991.98px) { .guide-index { border-right: 0; border-bottom: 1px solid #ccd8df; } .guide-index nav { position: static; max-height: none; } }
@media (max-width: 480px) { header { display: block; } header span { display: block; } .guide-index, .guide-content { padding: 1rem; } }
@media print { body { background: white; } header, .guide-index, .button, .skip { display: none; } .guide-content { width: 100%; padding: 0; } .guide-content section { break-inside: avoid; } a { color: inherit; } }