/* Shared style for the secondary pages (legal pages, 404). Same tokens as the home page. */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/bigshoulders-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:700 900;font-display:swap;src:url(/fonts/bigshoulders-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/archivo-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Archivo";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/archivo-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#EDEEEE; --surface:#F7F7F6; --ink:#17181A; --muted:#5A5E62; --rule:#CDD0D2;
  --accent:#E85A12; --on-accent:#16171A; --logo-o:#E85A12; --accent-ink:#A8420F;
  --f-display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --f-body:"Archivo","Helvetica Neue",Arial,sans-serif;
  --wrap:1240px; --gut:clamp(16px,4vw,40px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#121314; --surface:#1A1B1D; --ink:#E8E8E6; --muted:#9DA1A5; --rule:#2D2F32; --accent-ink:#F08448; color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121314; --surface:#1A1B1D; --ink:#E8E8E6; --muted:#9DA1A5; --rule:#2D2F32; --accent-ink:#F08448; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:3px}
[hidden]{display:none!important}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:3px;z-index:99}
.skip:focus{left:8px}

/* header */
.hdr{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.hdr .wrap{display:flex;align-items:center;gap:18px;height:68px}
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo .lg{height:46px;width:auto;display:block}
.logo .o{fill:var(--logo-o)}
.logo .t{fill:var(--ink)}
.back{margin-left:auto;font-size:14px;color:var(--muted);text-decoration:none;white-space:nowrap}
.back:hover{color:var(--ink)}
.lang{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;flex-shrink:0}
.lang button{font:500 12px/1 var(--f-body);letter-spacing:.08em;padding:8px 10px;background:transparent;border:0;color:var(--muted);cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.btn{display:inline-flex;align-items:center;gap:10px;font:600 14px/1 var(--f-body);text-decoration:none;padding:11px 16px;border-radius:3px;border:1.5px solid var(--ink);color:var(--ink);background:transparent;white-space:nowrap}
.btn-solid{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-solid:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
@media (max-width:760px){.hdr .btn{display:none}.logo .lg{height:38px}}
@media (max-width:420px){.back{display:none}.lang{margin-left:auto}}

/* page */
.page{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,104px)}
.eyebrow{font:500 12px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
h1,h2{font-family:var(--f-display);text-transform:uppercase;text-wrap:balance;letter-spacing:.005em;margin:0}
h1{font-size:clamp(2.6rem,6vw,4.4rem);line-height:1.08;font-weight:800}
.updated{margin:14px 0 0;color:var(--muted);font-size:14px}
.prose{max-width:74ch}
.prose .intro{font-size:clamp(1.05rem,1.4vw,1.18rem);margin:28px 0 8px}
.prose h2{font-size:clamp(1.45rem,2.4vw,1.85rem);line-height:1.15;font-weight:800;margin:44px 0 12px;padding-top:18px;border-top:1px solid var(--rule)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:1.2em}
.prose li{margin:0 0 8px}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--accent-ink);text-underline-offset:3px;overflow-wrap:anywhere}
.prose .card{background:var(--surface);border:1px solid var(--rule);border-left:3px solid var(--accent);border-radius:3px;padding:14px 18px}
.toc{margin:26px 0 0;padding:16px 18px;border:1px solid var(--rule);border-radius:3px;max-width:74ch;font-size:15px}
.toc strong{display:block;font:500 11px/1.3 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:32px}
.toc li{margin:0 0 4px;break-inside:avoid}
.toc a{text-decoration:none}.toc a:hover{text-decoration:underline;text-underline-offset:3px}
@media (max-width:640px){.toc ol{columns:1}}

/* 404 */
.nf{min-height:calc(100vh - 69px - 220px);display:flex;flex-direction:column;justify-content:center;gap:18px}
.nf .code{font:800 clamp(5rem,16vw,10rem)/.85 var(--f-display);color:var(--accent);margin:0}
.nf p{max-width:52ch;color:var(--muted);font-size:1.1rem;margin:0}
.nf .row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.nf .row .btn{padding:15px 20px;font-size:15px}

/* footer */
footer{padding-block:40px 36px;border-top:1px solid var(--rule)}
.foot{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--muted)}
.foot a{text-decoration:none}.foot a:hover{color:var(--ink)}
.foot a[aria-current="page"]{color:var(--ink);font-weight:600}
