:root{--ink:#1C1220;--muted:#5B4E5F;--line:#E8E2EA;--action:#A3195B;--bg:#FFFFFF;--soft:#FBF7F9}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--action)}a:focus-visible{outline:3px solid var(--action);outline-offset:2px}
header,main,footer{max-width:760px;margin:0 auto;padding:0 20px}
header{display:flex;justify-content:space-between;align-items:center;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.logo{font:700 26px/1 Georgia,"Times New Roman",serif;color:var(--ink);text-decoration:none;letter-spacing:-.5px}
.logo span{color:var(--action)}
nav a{color:var(--ink);text-decoration:none;margin-left:16px;font-size:15px}nav a:hover{text-decoration:underline}
h1{font:700 34px/1.2 Georgia,"Times New Roman",serif;margin:32px 0 8px}
h2{font-size:20px;margin:32px 0 8px}
.muted{color:var(--muted);font-size:15px}
.note{background:var(--soft);border-left:4px solid var(--action);padding:12px 16px;border-radius:6px}
.hero{padding:24px 0}.hero p{font-size:19px}
.card h2{margin-top:4px}
.card{border:1px solid var(--line);border-radius:12px;padding:16px 20px;margin:16px 0}
li{margin:4px 0}
footer{margin-top:48px;padding-top:20px;padding-bottom:40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px}
footer a{color:var(--muted);margin-right:16px}
@media (max-width:520px){nav a{margin-left:10px;font-size:14px}h1{font-size:28px}}