/* ═══════════════════════════════════════════════════════════════
   SATellar — shared cosmic stylesheet for content pages
   (about, faq, support, terms, privacy, do-not-sell)
   Mirrors the app's constants/Design.ts Cosmic block + the launch
   page type system: Bricolage Grotesque display / Inter body.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --bg-top:#0A1130;
  --bg-mid:#131C46;
  --bg-bottom:#1E2A57;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.10);
  --border:rgba(255,255,255,.12);
  --accent:#FFC83D;
  --accent-deep:#F5A623;
  --accent-soft:#FFE08A;
  --ink-on-accent:#1A1430;
  --text:#FFFFFF;
  --text-2:#C2CBEC;
  --text-3:#8590C0;
  --green:#4ADE80;
  --blue:#7AA2FF;
  --font-display:'Bricolage Grotesque',system-ui,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-body);color:var(--text-2);background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg-mid) 50%,var(--bg-bottom) 100%);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
/* CSS starfield */
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:
  radial-gradient(1px 1px at 12% 18%,rgba(255,255,255,.7),transparent),
  radial-gradient(1px 1px at 32% 8%,rgba(255,255,255,.5),transparent),
  radial-gradient(1.5px 1.5px at 58% 14%,rgba(255,224,138,.7),transparent),
  radial-gradient(1px 1px at 78% 22%,rgba(255,255,255,.55),transparent),
  radial-gradient(1px 1px at 90% 9%,rgba(255,255,255,.4),transparent),
  radial-gradient(1px 1px at 8% 46%,rgba(255,255,255,.45),transparent),
  radial-gradient(1.5px 1.5px at 26% 62%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 48% 38%,rgba(255,255,255,.4),transparent),
  radial-gradient(1px 1px at 70% 54%,rgba(255,224,138,.55),transparent),
  radial-gradient(1px 1px at 88% 44%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 16% 84%,rgba(255,255,255,.5),transparent),
  radial-gradient(1.5px 1.5px at 42% 92%,rgba(255,255,255,.45),transparent),
  radial-gradient(1px 1px at 64% 78%,rgba(255,255,255,.5),transparent),
  radial-gradient(1px 1px at 84% 88%,rgba(255,224,138,.5),transparent),
  radial-gradient(1px 1px at 96% 68%,rgba(255,255,255,.4),transparent)}
/* film grain */
body::after{content:'';position:fixed;inset:0;z-index:2000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

a{text-decoration:none;color:inherit;cursor:pointer}
a.link{color:var(--accent-soft);text-decoration:underline;text-decoration-color:rgba(255,200,61,.45);text-underline-offset:2px}
a.link:hover{color:var(--accent)}
button{border:none;cursor:pointer;font-family:inherit;background:none;color:inherit}

.container{max-width:740px;margin:0 auto;padding:0 24px;position:relative;z-index:1}

/* ── glass top nav ── */
.page-nav{position:relative;z-index:10;padding:16px 0;border-bottom:1px solid var(--border);margin-bottom:48px;background:rgba(10,17,48,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.page-nav .inner{max-width:740px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:8px}
.page-nav .logo{display:flex;align-items:center;gap:10px;font-size:18px;font-weight:700;color:var(--text);letter-spacing:-.02em;font-family:var(--font-display)}
.page-nav .mark{width:26px;height:26px;border-radius:7px;object-fit:cover}
.page-nav .back{margin-left:auto;font-size:14px;color:var(--accent-soft);font-weight:500;transition:color .2s}
.page-nav .back:hover{color:var(--accent)}

/* ── type ── */
h1{font-family:var(--font-display);font-size:38px;font-weight:760;letter-spacing:-.025em;line-height:1.12;margin-bottom:24px;color:var(--text)}
h2{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.01em;margin:40px 0 12px;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:8px}
h3{font-family:var(--font-display);font-size:17px;font-weight:700;margin:24px 0 8px;color:var(--text)}
p,li{font-size:15.5px;color:var(--text-2);line-height:1.75;margin-bottom:12px}
ul,ol{padding-left:20px;margin-bottom:12px}
li{margin-bottom:6px}
strong{color:var(--text);font-weight:700}
code{background:rgba(255,255,255,.08);border:1px solid var(--border);padding:2px 6px;border-radius:4px;font-size:13px;color:var(--accent-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.updated{font-size:14px;color:var(--text-3);margin-bottom:36px}

/* ── glass surfaces ── */
.card,.info-box{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px;margin:16px 0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:15px;color:var(--text-2);line-height:1.7}
.card p{margin-bottom:0}
.important,.disclaimer{background:rgba(255,200,61,.08);border:1px solid rgba(255,200,61,.3);border-radius:14px;padding:18px 20px;margin:16px 0;font-size:15px;color:var(--text-2);line-height:1.7}
.contact{background:linear-gradient(180deg,rgba(255,200,61,.10),rgba(255,255,255,.04));border:1px solid rgba(255,200,61,.35);border-radius:16px;padding:24px;margin:24px 0 40px;text-align:center;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.contact h2{border:none;margin:0 0 12px;padding:0;font-size:20px}
.contact .email{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:-.01em;font-family:var(--font-display)}
.contact .meta{font-size:13px;color:var(--text-3);margin-top:8px}

/* ── FAQ accordion (faq.html) ── */
.faq-item{border-bottom:1px solid var(--border);cursor:pointer;transition:background .2s}
.faq-item:first-child,.faq-item:first-of-type{border-top:1px solid var(--border)}
.faq-item:hover{background:rgba(255,255,255,.03)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 0;font-size:17px;font-weight:600;color:var(--text);font-family:var(--font-display)}
.faq-chevron{font-size:14px;color:var(--text-3);transition:transform .3s;display:inline-block}
.faq-chevron.open{transform:rotate(180deg)}
.faq-a{padding:0 0 20px;font-size:15px;color:var(--text-2);line-height:1.7;display:none}
.faq-a.show{display:block}

/* ── footer ── */
.footer{margin-top:80px;padding:32px 0;border-top:1px solid var(--border);text-align:center;font-size:13px;color:var(--text-3)}

@media(max-width:600px){
  h1{font-size:28px}
  h2{font-size:19px}
  p,li{font-size:15px}
  .faq-q{font-size:15px}
  .contact .email{font-size:17px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}