/* Aureous content pages (About, How it works, Terms, Privacy, 404). Colours come from theme.js. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-display:swap;src:url(fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:500;font-display:swap;src:url(fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600 700;font-display:swap;src:url(fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Cinzel";font-weight:600;font-display:swap;src:url(fonts/cinzel-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#0E131B; --panel:#121924; --raise:#19222F; --line:#232E3D; --line-soft:#1B2431;
  --text:#D5DCE5; --muted:#7F8B9B; --faint:#58647A; --accent:#5B8DEF; --accent-wash:rgba(91,141,239,.12);
  --long:#2FA57D; --short:#DB5A55;
  --font:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --brand:"Cinzel","Trajan Pro",Georgia,serif;
  --measure:68ch;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 var(--font);font-variant-numeric:tabular-nums;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--accent);text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* header */
.site-head{display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,40px);border-bottom:1px solid var(--line);background:var(--panel)}
.wordmark{font-family:var(--brand);font-weight:600;font-size:20px;letter-spacing:.09em;color:var(--text);text-decoration:none}
.site-head nav{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.site-head nav a{color:var(--muted);text-decoration:none;font-size:14px;padding:6px 10px;border-radius:5px}
.site-head nav a:hover{color:var(--text);background:var(--raise)}
.site-head nav a[aria-current=page]{color:var(--text)}
.btn{display:inline-block;border-radius:6px;padding:9px 16px;font-weight:600;font-size:14px;text-decoration:none;border:1px solid var(--line);color:var(--text);background:var(--raise)}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{filter:brightness(1.08)}

/* content */
main{flex:1;width:100%;max-width:calc(var(--measure) + 2 * clamp(16px,4vw,40px));margin:0 auto;padding:clamp(32px,6vw,72px) clamp(16px,4vw,40px) 64px}
h1{font-size:clamp(30px,4.6vw,46px);line-height:1.12;font-weight:600;letter-spacing:-.02em;margin:0 0 18px;max-width:22ch}
.lede{font-size:clamp(17px,1.6vw,19px);color:var(--muted);margin:0 0 28px;max-width:58ch}
h2{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:52px 0 10px;line-height:1.3}
h3{font-size:17px;font-weight:600;margin:28px 0 6px}
p,li{max-width:var(--measure)}
p{margin:0 0 16px}
ul,ol{padding-left:22px;margin:0 0 16px}
li{margin:0 0 8px}
strong{font-weight:600}
.muted{color:var(--muted)}
.updated{color:var(--faint);font-size:14px;margin:-6px 0 32px}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px}

/* About: facts strip */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:44px 0 8px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.facts div{padding:18px 18px 18px 0}
.facts b{display:block;font-size:26px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.facts span{color:var(--muted);font-size:14px}

/* How it works: steps are a real sequence */
.steps{list-style:none;padding:0;counter-reset:step;margin:20px 0 8px}
.steps li{counter-increment:step;position:relative;padding:0 0 22px 48px;margin:0}
.steps li::before{content:counter(step);position:absolute;left:0;top:-2px;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:14px;font-weight:600;color:var(--muted)}
.steps li:not(:last-child)::after{content:"";position:absolute;left:15px;top:32px;bottom:4px;width:1px;background:var(--line)}
.steps b{display:block;font-weight:600}

/* FAQ */
details{border-bottom:1px solid var(--line);max-width:var(--measure)}
details:first-of-type{border-top:1px solid var(--line)}
summary{cursor:pointer;padding:15px 30px 15px 0;font-weight:500;list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:20px;color:var(--muted);transition:transform .15s}
details[open] summary::after{transform:rotate(45deg)}
details > div{padding:0 0 12px;color:var(--muted)}
details > div p{color:var(--muted)}

/* footer */
.site-foot{border-top:1px solid var(--line);background:var(--panel);padding:22px clamp(16px,4vw,40px);font-size:14px;color:var(--faint);display:flex;gap:10px 28px;flex-wrap:wrap;align-items:baseline}
.site-foot nav{display:flex;gap:6px 18px;flex-wrap:wrap}
.site-foot a{color:var(--muted);text-decoration:none}
.site-foot a:hover{color:var(--text);text-decoration:underline}
.site-foot .note{margin-left:auto}

/* 404 */
.lost{display:flex;flex-direction:column;justify-content:center;min-height:50vh}
.lost .code{font-family:var(--brand);font-size:clamp(64px,12vw,120px);line-height:1;color:var(--line);margin:0 0 10px;letter-spacing:.06em}

@media (max-width:640px){
  .site-head{flex-wrap:wrap;gap:10px 16px}
  .site-head nav{order:3;width:100%;margin-left:-10px}
  .site-head .btn{margin-left:auto}
  .site-foot .note{margin-left:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}