/* ====================================================================
   THE SMALL PAGES
   ====================================================================
   Shared by /pricing, /terms and /about — the two documents the landing page's
   footer opens. They are plain HTML like the landing page rather than
   React routes, for the same reason it is: a visitor reading the terms
   should not download a trading terminal to do it.

   Served from public/ rather than imported, so both documents load one
   cached copy and neither carries its own duplicate of these tokens.
   The values are lifted from index.html verbatim — a second, drifting
   palette on a page that says A1STOX at the top of it would be worse
   than the duplication.
   ==================================================================== */
:root{
  --bg:#FFFFFF;
  --violet:#6F3AD1;
  --violet-deep:#61399F;
  --violet-soft:#5A2CB4;
  --lilac:#F0E9FE;
  --lilac-soft:#F8F4FF;
  --ink:#180F2E;
  --muted:#635B7A;
  --border:#E8E2F5;
  --surface:#FFFFFF;
  --nav-bg:rgba(255,255,255,0.86);
  --logo:#00B074;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0C0818;
  --violet:#8B5CF6;
  --violet-deep:#7C4DD8;
  --violet-soft:#C4A6FF;
  --lilac:rgba(139,92,246,0.18);
  --lilac-soft:#130E26;
  --ink:#EFEAFB;
  --muted:#A79EC2;
  --border:rgba(255,255,255,0.13);
  --surface:#171130;
  --nav-bg:rgba(12,8,24,0.86);
  color-scheme:dark;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.6;}
a{color:inherit;text-decoration:none;}
.wrap{width:100%;max-width:1080px;margin:0 auto;padding:0 24px;}

/* ---------- header ----------
   The SAME header as the landing page (index.html → header.nav): same
   height, same logo size, same About / Pricing / Support / Terms links on
   desktop, same breakpoints. The only difference is the right-hand side:
   the landing page has the appearance switch, Log in and Download there;
   these pages have a single "Back to home" pill instead.
   It sits on its own container (.site-nav-inner) rather than .wrap, so the
   header lines up exactly with the landing page's no matter how wide each
   page's own content column is. */
.site-nav{position:sticky;top:0;z-index:50;background:var(--nav-bg);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid var(--border);}
.site-nav-inner{max-width:1180px;margin:0 auto;padding:0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;height:64px;}
.site-nav .nav-left{display:flex;align-items:center;gap:clamp(24px,3vw,44px);min-width:0;}
.site-nav .logo{display:flex;align-items:center;gap:8px;font-size:inherit;letter-spacing:normal;}
.site-nav .logo-mark{width:26px;height:26px;flex:none;display:block;fill:var(--logo);}
.site-nav .logo-text{font-weight:800;font-size:24px;letter-spacing:-0.03em;white-space:nowrap;color:var(--ink);line-height:1;}
.site-nav .logo-text .accent{color:var(--logo);}
.site-nav .nav-links{display:none;}
.site-nav .back{
  font-weight:600;font-size:14px;color:var(--ink);line-height:1.5;
  padding:9px 16px;border-radius:100px;white-space:nowrap;
  border:1px solid var(--border);
  transition:border-color .18s ease,background .18s ease,transform .18s ease;
}
.site-nav .back:hover{border-color:var(--violet);background:var(--lilac);}
.site-nav .back:active{transform:scale(0.96);}
@media (max-width:480px){
  .site-nav .logo-mark{width:24px;height:24px;}
  .site-nav .logo-text{font-size:21px;}
  .site-nav .back{padding:8px 13px;font-size:13px;}
}
@media (max-width:380px){
  .site-nav .logo-mark{width:21px;height:21px;}
  .site-nav .logo-text{font-size:19px;}
}
@media (min-width:700px) and (max-width:859px){
  .site-nav-inner{padding:0 32px;}
}
@media (min-width:860px){
  .site-nav-inner{max-width:1320px;padding:0 clamp(32px,4vw,64px);height:72px;}
  .site-nav .logo-mark{width:30px;height:30px;}
  .site-nav .logo-text{font-size:26px;}
  .site-nav .back{font-size:15px;padding:10px 22px;}
  .site-nav .nav-links a{
    font-size:15px;font-weight:500;color:var(--ink);opacity:0.72;white-space:nowrap;
    transition:opacity .18s ease,color .18s ease;
  }
  .site-nav .nav-links a:hover,
  .site-nav .nav-links a[aria-current="page"]{opacity:1;color:var(--violet-soft);}
}
/* Links appear from 1024px, exactly like the landing page's header. */
@media (min-width:1024px){
  .site-nav .nav-links{display:flex;align-items:center;gap:clamp(18px,2.2vw,32px);}
}

/* ---------- page head ---------- */
.head{padding:44px 0 8px;}
.head h1{font-size:32px;line-height:1.2;letter-spacing:-.8px;}
.head p{margin-top:10px;font-size:14.5px;color:var(--muted);max-width:62ch;}

/* ---------- shared bits ---------- */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:18px;}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.pill{border:1px solid var(--border);background:var(--surface);color:var(--muted);border-radius:999px;padding:8px 15px;font-size:13px;font-family:var(--sans);cursor:pointer;}
.pill:hover{color:var(--ink);}
.pill[aria-pressed="true"]{background:var(--violet);border-color:var(--violet);color:#fff;}
select{font-family:var(--sans);font-size:13.5px;color:var(--ink);background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:9px 12px;min-width:170px;}
.note{font-size:13px;color:var(--muted);padding:18px 0;}
.foot{border-top:1px solid var(--border);margin-top:56px;padding:22px 0 34px;font-size:12.5px;color:var(--muted);}
@media(max-width:640px){
  .head h1{font-size:25px;}
  .wrap{padding:0 16px;}
}