/* Arcad pages (/arcad/, /arcad/privacy/, /support/) — same look as the other standalone Arcolos pages. */
:root{
  --bg:#000000; --bg2:#080809; --panel:#0d0e10; --line:#1c1d20;
  --white:#ffffff; --muted:#d3d7dd; --dim:#a7adb5; --blue:#5b8dff; --gold:#e2b84a;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--bg); color:var(--white);
  font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--blue); }
img{ max-width:100%; height:auto; }
.wrap{ max-width:1080px; margin:0 auto; padding:0 22px; }
.narrow{ max-width:840px; }

/* Topbar */
header{ border-bottom:1px solid var(--line); background:rgba(0,0,0,.7); backdrop-filter:blur(8px); position:sticky; top:0; z-index:10; }
.bar{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 0; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--white); font-weight:800; letter-spacing:.14em; font-size:15px; }
.brand img{ width:32px; height:32px; }
.nav{ display:flex; gap:20px; }
.nav a{ text-decoration:none; color:var(--dim); font-size:13.5px; font-weight:600; }
.nav a:hover, .nav a[aria-current]{ color:var(--white); }

/* Content */
main{ padding:52px 0 80px; }
.eyebrow{ color:var(--gold); font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; margin:0 0 10px; }
h1{ font-size:clamp(32px,5.4vw,52px); line-height:1.08; margin:0 0 16px; font-weight:800; }
h1 em{ font-style:normal; color:var(--gold); }
.updated{ color:var(--dim); font-size:13.5px; margin:0 0 30px; }
.intro{ color:var(--muted); font-size:18px; }
h2{ font-size:clamp(22px,3vw,28px); line-height:1.2; margin:64px 0 14px; font-weight:800; scroll-margin-top:84px; }
h3{ font-size:17px; margin:0 0 6px; font-weight:700; }
h2 .num{ color:var(--gold); margin-right:10px; font-variant-numeric:tabular-nums; }
.narrow h2{ font-size:21px; margin:44px 0 12px; }
p{ color:var(--muted); margin:0 0 14px; }
ul{ color:var(--muted); margin:0 0 14px; padding-left:22px; }
li{ margin:6px 0; }
strong{ color:var(--white); }
.note{ font-size:14px; color:var(--dim); }

/* Hero */
.hero{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center; }
.hero .coin{ width:76px; height:76px; margin-bottom:18px; filter:drop-shadow(0 6px 18px rgba(226,184,74,.35)); }
.hero figure{ margin:0; }
.cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 10px; }
.btn{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:10px; font-weight:700; font-size:15px; text-decoration:none; border:1px solid var(--line); color:var(--white); background:var(--panel); }
.btn:hover{ border-color:#34363b; }
.btn.gold{ background:var(--gold); color:#111; border-color:var(--gold); }
.btn[aria-disabled="true"]{ opacity:.75; cursor:default; }
.shot{ border-radius:14px; overflow:hidden; border:1px solid rgba(226,184,74,.35); box-shadow:0 24px 60px rgba(0,0,0,.6); display:block; }
.shot img{ display:block; width:100%; }

/* Cards */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px; margin-top:22px; }
.card{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 20px 8px; }
.card .ico{ font-size:22px; line-height:1; margin-bottom:12px; display:block; }
.card p{ font-size:15px; }
.gallery{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; margin-top:22px; }
.gallery figure{ margin:0; }
.gallery figcaption{ color:var(--dim); font-size:14px; margin-top:10px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:22px 24px 10px; margin-top:22px; }

/* Permissions table */
table{ width:100%; border-collapse:collapse; margin:14px 0 18px; font-size:15px; }
th, td{ text-align:left; vertical-align:top; padding:10px 12px; border-bottom:1px solid var(--line); }
th{ color:var(--white); font-weight:700; white-space:nowrap; }
td{ color:var(--muted); }
code{ font-size:13.5px; background:#16171a; border:1px solid var(--line); border-radius:6px; padding:1px 6px; color:var(--white); }

/* FAQ */
details{ border-bottom:1px solid var(--line); padding:14px 0; }
summary{ cursor:pointer; font-weight:700; color:var(--white); list-style:none; padding-right:28px; position:relative; }
summary::-webkit-details-marker{ display:none; }
summary::after{ content:"+"; position:absolute; right:4px; top:-2px; color:var(--gold); font-size:22px; font-weight:400; }
details[open] summary::after{ content:"–"; }
details > div{ padding-top:10px; }

/* Footer */
footer{ border-top:1px solid var(--line); padding:34px 0; color:var(--dim); font-size:13px; }
.foot{ display:flex; align-items:center; justify-content:space-between; gap:14px 20px; flex-wrap:wrap; }
footer a{ color:var(--dim); text-decoration:none; }
footer a:hover{ color:var(--white); }
.foot-links a{ margin-left:18px; }

@media(max-width:860px){
  .hero{ grid-template-columns:1fr; gap:32px; }
}
@media(max-width:560px){
  .nav{ gap:14px; }
  .nav .hide-sm{ display:none; }
  .brand span{ display:none; }
  .foot-links a{ margin:0 18px 0 0; }
  th, td{ padding:8px 6px; }
  th{ white-space:normal; }
}