:root{
  --bg:#0e141b; --surface:#151d26; --surface-2:#1c2632; --border:#2e3b4a; --border-strong:#41525f;
  --text:#f2f4ef; --text-2:#c6ced7; --text-3:#a2aeba;
  --accent:#e8a93b; --accent-hi:#f5c163; --on-accent:#17120a;
  --r-sm:8px; --r:12px; --r-lg:18px;
  --head:"Barlow Condensed",system-ui,sans-serif; --body:"IBM Plex Sans",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:17px/1.72 var(--body);-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--accent-hi)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:var(--on-accent);padding:12px 18px;border-radius:0 0 var(--r) 0;z-index:50}
.skip:focus{left:0}
header.site{position:sticky;top:0;z-index:20;background:rgba(14,20,27,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.bar{max-width:1060px;margin:0 auto;display:flex;align-items:center;gap:18px;padding:12px 20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:700 25px/1 var(--head)}
.brand svg{width:26px;height:26px;fill:var(--accent)}
nav.site{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
nav.site a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  color:var(--text-2);text-decoration:none;font:600 15px/1.2 var(--body)}
nav.site a:hover{background:var(--surface-2);color:var(--text)}
nav.site a[aria-current=page]{color:var(--text);box-shadow:inset 0 -2px 0 var(--accent)}
nav.site a.cta{background:var(--accent);color:var(--on-accent)}
nav.site a.cta:hover{background:var(--accent-hi)}
main{max-width:760px;margin:0 auto;padding:40px 20px 80px}
h1{font:700 46px/1.05 var(--head);margin:0 0 12px}
h2{font:600 30px/1.2 var(--head);margin:42px 0 10px}
h3{font:600 22px/1.3 var(--head);margin:26px 0 6px}
p,li{color:var(--text-2)}
li{margin:7px 0}
strong{color:var(--text)}
.lede{font-size:19px;color:var(--text-2)}
.updated{color:var(--text-3);font-size:15px;margin-top:4px}
.hero{padding:10px 0 6px}
.btn-primary{display:inline-flex;align-items:center;justify-content:center;min-height:54px;padding:0 26px;
  background:var(--accent);color:var(--on-accent);border-radius:var(--r);text-decoration:none;
  font:600 19px/1 var(--body);box-shadow:0 10px 26px rgba(232,169,59,.18)}
.btn-primary:hover{background:var(--accent-hi);color:var(--on-accent)}
.microcopy{color:var(--text-3);font-size:14.5px;margin-top:10px}
.features,.steps{padding-left:22px}
.steps li{margin:12px 0}
.qalist p{margin:10px 0}
.cta-end{margin-top:44px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 22px;margin:22px 0}
.card h2,.card h3{margin-top:0}
details.qa{border-bottom:1px solid var(--border)}
details.qa>summary{cursor:pointer;list-style:none;min-height:58px;display:flex;align-items:center;gap:12px;
  font:600 17.5px/1.4 var(--body);color:var(--text);padding:12px 0}
details.qa>summary::-webkit-details-marker{display:none}
details.qa>summary::after{content:"";margin-left:auto;width:10px;height:10px;flex:none;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);transform:rotate(45deg) translate(-2px,-2px)}
details.qa[open]>summary::after{transform:rotate(-135deg) translate(-3px,-3px)}
details.qa .body{padding:0 0 16px}
.note{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:18px 0;color:var(--text-2)}
table{width:100%;border-collapse:collapse;margin:16px 0;font-size:16px}
th,td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:top}
th{color:var(--text);font-weight:600}
code{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:1px 6px;font-size:15px}
footer.site{border-top:1px solid var(--border);padding:28px 20px 44px}
.finner{max-width:1060px;margin:0 auto;display:flex;gap:18px;flex-wrap:wrap;align-items:center;color:var(--text-2);font-size:14.5px}
.finner nav{display:flex;gap:14px;flex-wrap:wrap;margin-left:auto}
.finner a{color:var(--text-2);text-decoration:none}
.finner a:hover{color:var(--text)}
@media (max-width:640px){
  h1{font-size:35px}h2{font-size:25px}
  .bar{gap:10px;padding:10px 14px}
  nav.site a{padding:0 10px;font-size:14.5px}
  main{padding:28px 16px 60px}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}