/* =====================================================================
   SQARME — shared stylesheet for the legal pages (privacy / terms /
   refunds / cookies). Reuses the "command deck" design system and the
   exact tokens, header and footer from the homepage (index.html), plus
   a clean reading layout for long-form policy text. Light body with a
   compact light hero; full dark-mode support via the shared c2cx_theme.
   ===================================================================== */

:root, [data-theme="light"] {
    color-scheme: light;
    --bg:#FAFBFE; --bg-2:#EEF2FA;
    --panel:#FFFFFF; --panel-2:#F5F8FD; --panel-3:#EDF1FA;
    --ink:#10151F; --ink-2:#54607A; --ink-3:#8089A0; --label:#3A4255;
    --line:rgba(13,20,38,0.10); --line-2:rgba(13,20,38,0.20);
    --grid:rgba(13,20,38,0.05);
    --acc-1:#1E2BD8; --acc-2:#2E63F0; --acc-3:#22D3EE;
    --acc-soft:rgba(46,99,240,0.10); --acc-soft-2:rgba(34,211,238,0.08);
    --acc-ring:rgba(46,99,240,0.40); --acc-link:#1E3CCB;
    --acc-grad:linear-gradient(90deg,#2E63F0,#22D3EE);
    --acc-grad-btn:linear-gradient(135deg,#1E2BD8 0%,#2E63F0 46%,#22D3EE 100%);
    --buy:#0E9F6E; --sell:#D4375E;
    --soft-shadow:0 1px 0 rgba(255,255,255,0.80) inset, 0 1px 3px rgba(13,20,38,0.04), 0 8px 20px rgba(13,20,38,0.06);
    --panel-shadow:0 1px 0 rgba(255,255,255,0.80) inset, 0 2px 6px rgba(13,20,38,0.05), 0 16px 42px rgba(13,20,38,0.08);
    --btn-fg:#FFFFFF; --btn-bg:linear-gradient(180deg,#1B1F2A,#11151F); --btn-shadow:rgba(13,20,38,0.22);
    --header-bg:rgba(250,251,254,0.78);
    --chip-bg:rgba(13,20,38,0.05); --chip-line:rgba(13,20,38,0.11);
    --font-display:'Archivo','IBM Plex Sans',system-ui,sans-serif;
    --font-body:'IBM Plex Sans','Archivo',system-ui,sans-serif;
    --font-mono:'JetBrains Mono',ui-monospace,'IBM Plex Mono',monospace;
    --ease-spring:cubic-bezier(0.34,1.42,0.64,1);
    --ease-glide:cubic-bezier(0.22,0.61,0.36,1);
    --ease-snap:cubic-bezier(0.23,1,0.32,1);
}
[data-theme="dark"] {
    color-scheme: dark;
    --bg:#06080F; --bg-2:#0A0E1A;
    --panel:#0E1322; --panel-2:#131A2C; --panel-3:#18213A;
    --ink:#EAEDF7; --ink-2:#98A3BE; --ink-3:#616B88; --label:#C3CADD;
    --line:rgba(255,255,255,0.09); --line-2:rgba(255,255,255,0.17);
    --grid:rgba(255,255,255,0.035);
    --acc-soft:rgba(46,99,240,0.16); --acc-soft-2:rgba(34,211,238,0.12);
    --acc-ring:rgba(96,140,255,0.55); --acc-link:#88AAFF;
    --buy:#34D399; --sell:#F472A0;
    --soft-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 4px 14px rgba(0,0,0,0.34), 0 14px 34px rgba(0,0,0,0.40);
    --panel-shadow:0 1px 0 rgba(255,255,255,0.06) inset, 0 8px 24px rgba(0,0,0,0.42), 0 28px 64px rgba(0,0,0,0.46);
    --btn-fg:#06080F; --btn-bg:linear-gradient(180deg,#F4F6FC,#D4DCEC); --btn-shadow:rgba(0,0,0,0.5);
    --header-bg:rgba(6,8,15,0.72);
    --chip-bg:rgba(255,255,255,0.05); --chip-line:rgba(255,255,255,0.12);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
    font-family:var(--font-body); color:var(--ink); background:var(--bg);
    min-height:100vh; overflow-x:hidden; position:relative;
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-synthesis:none;
    transition:background-color .45s var(--ease-glide), color .45s var(--ease-glide);
}
a { color:inherit; }
::selection { background:var(--acc-soft); color:var(--ink); }
:focus-visible { outline:2px solid var(--acc-2); outline-offset:3px; border-radius:6px; }
img,svg { display:block; }
.skip-link { position:absolute; left:-9999px; top:0; z-index:300; background:var(--ink); color:var(--bg);
    padding:10px 16px; border-radius:0 0 10px 0; font-size:13px; font-weight:700; }
.skip-link:focus { left:0; }
.wrap { width:100%; max-width:1180px; margin:0 auto; padding:0 26px; }
.wrap.narrow { max-width:840px; }

.kicker { font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:2px; text-transform:uppercase;
    color:var(--ink-2); display:inline-flex; align-items:center; gap:10px; }
.kicker::before { content:''; width:24px; height:2px; border-radius:2px; background:var(--acc-grad); }

.btn { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    background:var(--btn-bg); color:var(--btn-fg); border:none; cursor:pointer; text-decoration:none; white-space:nowrap;
    font-family:var(--font-body); font-weight:700; font-size:13px; padding:10px 16px; border-radius:11px;
    box-shadow:0 8px 22px var(--btn-shadow); transition:transform .18s var(--ease-spring), box-shadow .25s, filter .2s; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.05); }
.btn.accent { background:var(--acc-grad-btn); color:#fff; box-shadow:0 12px 30px rgba(30,43,216,0.4); }

/* ---------- Header (identical to homepage) ---------- */
header.site { position:sticky; top:0; z-index:100; background:var(--header-bg);
    backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
    border-bottom:1px solid transparent; transition:border-color .35s, box-shadow .35s, background-color .45s; }
header.site.scrolled { border-bottom-color:var(--line); box-shadow:0 8px 30px rgba(13,20,38,0.06); }
[data-theme="dark"] header.site.scrolled { box-shadow:0 8px 30px rgba(0,0,0,0.28); }
.nav { display:flex; align-items:center; justify-content:space-between; height:70px; }
.lock { display:flex; align-items:center; gap:12px; text-decoration:none; }
.logo { width:38px; height:38px; display:grid; place-items:center; color:var(--ink); flex:none; }
.logo svg { width:100%; height:100%; }
.mark-name { line-height:1; }
.mark-name .brand { font-family:var(--font-display); font-weight:800; font-size:21px; letter-spacing:-.4px; color:var(--ink); }
.mark-name small { display:block; font-family:var(--font-mono); font-size:8.5px; letter-spacing:2.4px; text-transform:uppercase; color:var(--ink-2); margin-top:5px; }
.links { display:flex; align-items:center; gap:30px; }
.links a.nl { font-size:14px; font-weight:600; color:var(--ink-2); text-decoration:none; position:relative; transition:color .2s; }
.links a.nl::after { content:''; position:absolute; left:0; bottom:-6px; height:2px; width:0; border-radius:2px; background:var(--acc-grad); transition:width .26s var(--ease-snap); }
.links a.nl:hover { color:var(--ink); } .links a.nl:hover::after { width:100%; }
.actions { display:flex; align-items:center; gap:11px; }
.toggle { width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer; flex:none;
    background:var(--panel); color:var(--ink); border:1px solid var(--line); display:grid; place-items:center;
    box-shadow:var(--soft-shadow); transition:transform .25s var(--ease-spring), border-color .3s; }
.toggle:hover { transform:translateY(-2px) rotate(-12deg); border-color:var(--line-2); }
.toggle svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.toggle .ic-sun { display:none; } [data-theme="dark"] .toggle .ic-sun { display:block; } [data-theme="dark"] .toggle .ic-moon { display:none; }
.menu-btn { display:none; width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:var(--panel); color:var(--ink); cursor:pointer; align-items:center; justify-content:center; }
.menu-btn svg { width:20px; height:20px; stroke:currentColor; stroke-width:2; fill:none; stroke-linecap:round; }

/* ---------- Legal hero ---------- */
.legal-hero { position:relative; overflow:hidden; background:var(--bg-2); border-bottom:1px solid var(--line);
    padding:clamp(34px,5vw,58px) 0 clamp(24px,3.4vw,34px); }
.legal-hero::before { content:''; position:absolute; inset:0; z-index:0; opacity:.5;
    background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
    background-size:42px 42px; -webkit-mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 82%);
    mask-image:radial-gradient(120% 100% at 50% 0%,#000 40%,transparent 82%); }
.legal-hero .wrap { position:relative; z-index:1; }
.legal-hero .back { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:12px;
    color:var(--ink-2); text-decoration:none; margin-bottom:18px; transition:color .2s, transform .2s; }
.legal-hero .back:hover { color:var(--acc-link); transform:translateX(-3px); }
.legal-hero h1 { font-family:var(--font-display); font-weight:900; letter-spacing:-1.2px; line-height:1.05;
    font-size:clamp(30px,4.6vw,46px); color:var(--ink); margin:14px 0 0; }
.legal-hero .sub { font-size:16px; line-height:1.6; color:var(--ink-2); max-width:60ch; margin:14px 0 0; }
.legal-meta { display:flex; flex-wrap:wrap; gap:9px; margin-top:20px; }
.legal-meta span { font-family:var(--font-mono); font-size:11px; letter-spacing:.4px; color:var(--ink-2);
    background:var(--chip-bg); border:1px solid var(--chip-line); border-radius:999px; padding:5px 12px; }
.legal-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.legal-tabs a { font-family:var(--font-mono); font-size:12px; font-weight:600; letter-spacing:.3px; color:var(--ink-2);
    text-decoration:none; padding:7px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
    transition:border-color .2s, color .2s, transform .2s; }
.legal-tabs a:hover { color:var(--ink); border-color:var(--line-2); transform:translateY(-1px); }
.legal-tabs a.active { color:#fff; background:var(--acc-grad-btn); border-color:transparent; }

/* ---------- Legal body / prose ---------- */
.legal-body { padding:clamp(38px,5vw,64px) 0 clamp(48px,6vw,80px); }
.legal-body .intro { font-size:16px; line-height:1.75; color:var(--ink-2); padding:20px 22px; margin-bottom:30px;
    background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--acc-2); border-radius:12px; }
.legal-body h2 { font-family:var(--font-display); font-weight:800; letter-spacing:-.5px; line-height:1.2;
    font-size:clamp(19px,2.4vw,23px); color:var(--ink); margin:38px 0 0; scroll-margin-top:90px; display:flex; gap:12px; }
.legal-body h2 .n { font-family:var(--font-mono); font-weight:600; font-size:14px; color:var(--acc-link); flex:none; padding-top:4px; }
.legal-body h3 { font-family:var(--font-display); font-weight:700; font-size:16.5px; color:var(--ink); margin:24px 0 0; letter-spacing:-.2px; }
.legal-body p { font-size:15px; line-height:1.75; color:var(--ink-2); margin-top:13px; }
.legal-body p b, .legal-body li b { color:var(--ink); font-weight:600; }
.legal-body ul, .legal-body ol { margin:13px 0 0; padding-left:22px; }
.legal-body li { font-size:15px; line-height:1.72; color:var(--ink-2); margin-top:8px; }
.legal-body a.inl { color:var(--acc-link); text-decoration:none; border-bottom:1px solid var(--acc-ring); }
.legal-body a.inl:hover { border-bottom-color:var(--acc-link); }
.legal-body .callout { margin-top:16px; padding:16px 18px; background:var(--panel-2); border:1px solid var(--line);
    border-radius:12px; font-size:14px; line-height:1.7; color:var(--ink-2); }
.legal-body hr { border:none; border-top:1px solid var(--line); margin:38px 0 0; }
.legal-body .contact-card { margin-top:26px; padding:22px 24px; background:var(--panel); border:1px solid var(--line);
    border-radius:16px; box-shadow:var(--soft-shadow); }
.legal-body .contact-card h3 { margin-top:0; }
.legal-body .contact-card .row { display:grid; grid-template-columns:130px 1fr; gap:6px 16px; margin-top:14px; font-size:14px; }
.legal-body .contact-card .row dt { font-family:var(--font-mono); font-size:11.5px; letter-spacing:.4px; color:var(--ink-3); text-transform:uppercase; padding-top:2px; }
.legal-body .contact-card .row dd { color:var(--ink-2); }
.legal-body .contact-card .row dd b { color:var(--ink); }
.legal-body table.tbl { width:100%; border-collapse:collapse; margin-top:16px; font-size:14px; }
.legal-body table.tbl th, .legal-body table.tbl td { text-align:left; padding:11px 14px; border:1px solid var(--line); color:var(--ink-2); line-height:1.55; vertical-align:top; }
.legal-body table.tbl th { font-family:var(--font-mono); font-size:11px; letter-spacing:.5px; text-transform:uppercase; color:var(--ink); background:var(--panel-2); }
.legal-body .tbl-wrap { overflow-x:auto; }

/* ---------- Footer (identical to homepage) ---------- */
footer.site { border-top:1px solid var(--line); background:var(--panel-2); padding:clamp(56px,7vw,88px) 0 28px; }
.foot-top { display:grid; grid-template-columns:1.7fr 1fr 1fr 1.4fr; gap:36px; align-items:start; }
.foot-brand .lock { gap:12px; margin-bottom:16px; } .foot-brand .logo { width:42px; height:42px; }
.foot-brand .mark-name .brand { font-size:26px; letter-spacing:-.8px; }
.foot-brand .mark-name small { font-size:8.5px; letter-spacing:2.2px; margin-top:6px; }
.foot-brand p { font-size:13.5px; color:var(--ink-2); line-height:1.6; max-width:38ch; }
.foot-social { display:flex; flex-wrap:wrap; gap:9px; margin-top:18px; }
.foot-social a { width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--ink); display:grid; place-items:center;
    transition:transform .2s var(--ease-spring), border-color .2s, color .2s; }
.foot-social a:hover { transform:translateY(-2px); border-color:var(--acc-ring); color:var(--acc-link); }
.foot-social svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.foot-col h5 { font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-2); margin-bottom:14px; }
.foot-col a.fl { display:flex; align-items:center; gap:6px; width:fit-content; font-size:13.5px; color:var(--ink-2); text-decoration:none; padding:6px 0; transition:color .2s, transform .2s; }
.foot-col a.fl:hover { color:var(--ink); transform:translateX(3px); }
.foot-col a.fl svg { width:12px; height:12px; stroke:currentColor; fill:none; stroke-width:2; opacity:.7; }
.foot-contact { display:grid; gap:13px; }
.foot-contact .ci { display:grid; grid-template-columns:16px 1fr; gap:11px; align-items:start; font-size:13px; color:var(--ink-2); line-height:1.5; }
.foot-contact .ci svg { width:16px; height:16px; margin-top:1px; stroke:var(--ink); fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.foot-contact .ci a { color:var(--ink-2); text-decoration:none; } .foot-contact .ci a:hover { color:var(--ink); }
.foot-contact .ci b { font-family:var(--font-mono); font-weight:600; font-size:11px; letter-spacing:.3px; color:var(--ink); }
.foot-legal { margin-top:40px; padding-top:22px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; align-items:center; }
.made { font-family:var(--font-mono); font-size:12px; color:var(--ink-2); display:inline-flex; align-items:center; gap:6px; }
.heart { width:12px; height:12px; } .heart svg { width:100%; height:100%; fill:var(--sell); }
.foot-legal .cc { font-size:12px; color:var(--ink-2); }

/* ---------- Responsive ---------- */
@media (max-width:920px) { .foot-top { grid-template-columns:1fr 1fr; } }
@media (max-width:760px) {
    .links { display:none; }
    .links.open { display:flex; position:absolute; top:70px; left:0; right:0; flex-direction:column; gap:0; background:var(--header-bg); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line); padding:8px 0; }
    .links.open a.nl { padding:14px 26px; width:100%; } .links.open a.nl::after { display:none; }
    .menu-btn { display:inline-flex; } body.menu-open { overflow:hidden; }
    .actions .btn.desk { display:none; }
    .foot-top { grid-template-columns:1fr; gap:32px; }
    .legal-body .contact-card .row { grid-template-columns:1fr; gap:2px; }
    .legal-body .contact-card .row dt { margin-top:10px; }
}
@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { animation:none !important; transition:none !important; }
}