/* Shared chrome for the S4G legal pages. Same tokens as payment-complete.html,
   pulled into one file because three standalone pages should not carry three
   copies of the same stylesheet. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1c1c1c; --bg2:#222; --bg3:#282828; --bg4:#2e2e2e;
  --fg:#f0f0f0; --mid:#a3a3a3; --muted:#737373; --dim:#525252;
  --border:#363636; --accent:#a8c8a0; --r:0.25rem;
  font-family:'Geist Mono',ui-monospace,monospace; letter-spacing:-0.01em;
  color-scheme:dark
}
body{background:var(--bg);color:var(--fg);overflow-x:hidden;min-height:100vh}
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity:.025
}
a{color:inherit}

nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:48px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 48px;border-bottom:1px solid var(--border);
  background:rgba(28,28,28,.94);backdrop-filter:blur(20px)
}
@media(max-width:760px){nav{padding:0 24px}}
.n-brand{font-size:11px;font-weight:700;color:var(--fg);letter-spacing:.02em;text-decoration:none}
.n-brand span{color:var(--dim);font-weight:400}
.n-cta{
  font-family:inherit;font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--bg);background:var(--fg);padding:7px 14px;border-radius:var(--r);
  text-decoration:none;transition:opacity .15s,transform .15s
}
.n-cta:hover{opacity:.85;transform:translateY(-1px)}

.head{
  padding:120px 48px 48px;border-bottom:1px solid var(--border);
  position:relative;overflow:hidden
}
@media(max-width:760px){.head{padding:96px 24px 40px}}
.head-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;opacity:.35;
  mask-image:radial-gradient(ellipse 60% 70% at 5% 60%,black 0%,transparent 70%)
}
.head-inner{position:relative;z-index:1;max-width:760px}
.tag{
  display:inline-block;font-size:8px;letter-spacing:.18em;text-transform:uppercase;
  padding:5px 10px;border:1px solid var(--border);border-radius:var(--r);
  color:var(--muted);margin-bottom:28px
}
/* Matches .hero-title on the main site: Geist Mono 600, tight tracking.
   The site has no serif anywhere, so the legal pages must not introduce one. */
h1{
  font-size:clamp(40px,6vw,64px);font-weight:600;
  line-height:1.1;letter-spacing:-.03em;margin-bottom:20px
}
h1 em{font-style:normal;color:var(--mid);font-weight:400}
/* Matches .hero-sub */
.deck{
  font-size:16px;font-weight:400;
  color:var(--muted);line-height:1.6;max-width:620px
}

/* Left-aligned to the same 48px gutter as the header, not centred. The header
   is left-aligned, so centring the body made the two disagree. */
main{max-width:820px;padding:56px 48px 96px}
@media(max-width:760px){main{padding:40px 24px 72px}}
/* Same family and tracking as .section-heading, scaled for a document */
main h2{
  font-weight:600;font-size:clamp(20px,2.6vw,26px);
  line-height:1.2;letter-spacing:-.03em;margin:52px 0 16px;padding-top:24px;
  border-top:1px solid var(--border);color:var(--fg)
}
main h2:first-of-type{margin-top:0;border-top:none;padding-top:0}
main h3{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:32px 0 12px
}
main p,main li{font-size:13.5px;line-height:1.75;color:var(--mid)}
main p{margin-bottom:14px}
main ul,main ol{margin:0 0 18px 20px}
main li{margin-bottom:7px}
main strong{color:var(--fg);font-weight:600}
main a{color:var(--accent)}
.note{
  background:var(--bg3);border:1px solid var(--border);border-left:2px solid var(--accent);
  border-radius:var(--r);padding:18px 20px;margin:22px 0
}
.note p:last-child{margin-bottom:0}
.card{
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--r);
  padding:22px;margin:22px 0
}
.card p{margin-bottom:6px;font-size:13px}
.card p:last-child{margin-bottom:0}
.meta{font-size:11px;color:var(--dim);letter-spacing:.04em;margin-top:40px}

footer{
  border-top:1px solid var(--border);padding:32px 48px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)
}
@media(max-width:760px){footer{padding:28px 24px}}
footer nav{position:static;height:auto;border:none;background:none;padding:0;backdrop-filter:none;gap:20px;display:flex;flex-wrap:wrap}
footer a{text-decoration:none;transition:color .15s}
footer a:hover{color:var(--fg)}