:root{--indigo:#1B1464;--orange:#FF6B1A;--lagoon:#0C7F7A;--cream:#FFF4E8;--graphite:#0E0D1A}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6;color:var(--graphite);background:var(--cream)}
a{color:var(--indigo)}
a:focus-visible,button:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
header,main,footer{width:100%;max-width:44rem;margin:0 auto;padding:1.25rem 1rem}
header{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--indigo);font-size:1.25rem}
header .mark{display:inline-block;width:1.6rem;height:1.6rem;border-radius:.45rem;background:var(--orange)}
h1{font-size:clamp(2rem,6vw,3rem);line-height:1.1;color:var(--indigo);margin:2rem 0 1rem}
h2{color:var(--indigo);margin-top:2rem}
.pill{display:inline-block;padding:.25rem .75rem;border-radius:999px;background:var(--indigo);color:#fff;font-size:.875rem;font-weight:600}
.card{background:#fff;border-radius:1rem;padding:1.25rem;margin:1.5rem 0;border:1px solid rgba(14,13,26,.1)}
footer{font-size:.9rem;color:#3b3a4d;border-top:1px solid rgba(14,13,26,.12);margin-top:3rem}
footer nav a{margin-right:1rem}
.note{border-left:4px solid var(--lagoon);padding:.25rem 1rem;background:#fff}