/* ============================================================================ legal.css — shared stylesheet for /terms, /privacy and /refunds. The landing page (public/index.html) is one self-contained document with its two brand fonts base64-inlined into its . That is the right trade for a single page, but wrong for four: the same ~105KB of font data would ship three more times and never be cached across them. So the fonts are extracted to real files here and the three policy pages share this one stylesheet. The landing page is deliberately NOT switched over — it already works, ships in one request, and has nothing to gain from the change. Every colour, font stack and radius below is copied from index.html so the two halves of the site sit in the same world. Change them here AND there. ========================================================================== */ @font-face{ font-family:"General Sans"; src:url("/fonts/general-sans.woff2") format("woff2"); font-weight:200 700; font-display:swap; font-style:normal; } @font-face{ font-family:"JetBrains Mono"; src:url("/fonts/jetbrains-mono.woff2") format("woff2"); font-weight:400 700; font-display:swap; font-style:normal; } :root{ --bg:#0E0F13; --panel:#16181F; --panel-2:#1B1E27; --line:#282C37; --line-2:#3A404E; --ink:#ECEDF1; --ink-2:#9CA2B0; --ink-3:#79808F; --accent:#CBF14C; --accent-ink:#12140A; --accent-dim:rgba(203,241,76,.13); --accent-line:rgba(203,241,76,.42); --sans:"General Sans",ui-sans-serif,system-ui,-apple-system,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --maxw:1160px; --pad:clamp(20px,5vw,40px); /* Legal prose wants a narrower measure than the marketing grid. ~68ch keeps dense paragraphs readable instead of running the full 1160px. */ --measure:68ch; } *{box-sizing:border-box;} *::selection{background:var(--accent); color:var(--accent-ink);} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:16px; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-feature-settings:"ss01","cv01"; text-wrap:pretty; overflow-x:hidden; } a{color:inherit; text-decoration:none;} h1,h2,h3{margin:0; font-weight:600; letter-spacing:-.025em; text-wrap:balance; line-height:1.1;} p{margin:0;} img,svg{display:block; max-width:100%;} .wrap{max-width:var(--maxw); margin:0 auto; padding-inline:var(--pad); width:100%;} /* Skip link — these are long documents and keyboard users should be able to jump the nav. Visible only on focus. */ .skip{ position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 10px 0; font-size:14px; font-weight:600; } .skip:focus{left:0;} :where(a,button):focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:3px; } /* The nav is sticky and 64px tall, so anything jumped to by an anchor lands underneath it. Without this the skip link scrolls the first heading out of sight, which defeats the point of having one. */ [id]{scroll-margin-top:84px;} /* ---------- kicker (mono overline) ---------- */ .kick{ display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); } .kick::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 3px var(--accent-dim); flex:none; } /* ---------- wordmark ---------- */ .mark{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:18px; letter-spacing:-.03em; color:var(--ink);} .mark .dot{width:9px; height:9px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px var(--accent-dim); flex:none;} /* ---------- nav ---------- Same sticky glass bar as the landing page, minus the mobile drawer: these pages ship zero JavaScript, so on narrow screens the section links simply drop away and the wordmark stays as the way home. */ .nav{ position:sticky; top:0; z-index:50; background:rgba(14,15,19,.72); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4); border-bottom:1px solid var(--line); } .nav-in{display:flex; align-items:center; justify-content:space-between; height:64px; gap:20px;} .nav-links{display:flex; align-items:center; gap:28px; font-size:14.5px; color:var(--ink-2);} .nav-links a{transition:color .14s ease;} .nav-links a:hover{color:var(--ink);} @media (max-width:820px){ .nav-links{display:none;} } /* ---------- document ---------- */ .doc-wrap{padding-block:clamp(40px,7vw,72px) clamp(56px,9vw,96px);} /* The nav and footer keep the landing page's 1160px frame so the chrome matches across the site, but prose at that width is unreadable. So the document is capped at --measure and centred inside the frame: full-width chrome, one centred column. Left-aligning it instead leaves the right half of a desktop window visibly empty and reads as unfinished. */ .doc-head,.policy-nav,.doc{max-width:var(--measure); margin-inline:auto;} .doc-head{margin-bottom:clamp(32px,5vw,48px);} .doc-head h1{ font-size:clamp(30px,5.2vw,44px); margin-top:14px; } .doc-lede{ margin-top:18px; font-size:17.5px; line-height:1.6; color:var(--ink-2); max-width:62ch; } .doc-meta{ margin-top:22px; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:8px 26px; font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em; } .doc-meta b{color:var(--ink-2); font-weight:500;} /* Cross-links between the three policies. Every policy is reachable from every other one, which is also what a payment-provider review looks for. */ .policy-nav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:clamp(30px,5vw,44px); } .policy-nav a,.policy-nav span{ font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; padding:8px 14px; border-radius:8px; border:1px solid var(--line); color:var(--ink-3); transition:color .14s ease, border-color .14s ease; } .policy-nav a:hover{color:var(--ink); border-color:var(--line-2);} .policy-nav [aria-current="page"]{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); } /* ---------- prose ---------- h2s are auto-numbered with a CSS counter so section numbers can never drift out of step with the markup, and "section 7" stays a citable reference. */ .doc{counter-reset:sec;} .doc section{margin-top:clamp(38px,5.5vw,52px);} .doc section:first-of-type{margin-top:0;} .doc h2{ counter-increment:sec; font-size:clamp(20px,2.6vw,24px); padding-top:26px; border-top:1px solid var(--line); display:flex; gap:14px; align-items:baseline; } .doc h2::before{ content:counter(sec); font-family:var(--mono); font-size:12px; font-weight:500; color:var(--accent); letter-spacing:.06em; flex:none; padding-top:4px; } .doc h3{ font-size:16.5px; margin-top:26px; color:var(--ink); letter-spacing:-.01em; } .doc p,.doc li{font-size:16px; line-height:1.72; color:var(--ink-2);} .doc p{margin-top:16px;} .doc h2+p,.doc h3+p{margin-top:14px;} .doc strong{color:var(--ink); font-weight:600;} .doc a:not(.btn){ color:var(--ink); text-decoration:underline; text-decoration-color:var(--accent-line); text-underline-offset:3px; text-decoration-thickness:1px; transition:color .14s ease; } .doc a:not(.btn):hover{color:var(--accent);} .doc ul,.doc ol{margin:16px 0 0; padding-left:0; list-style:none;} .doc ol{counter-reset:item;} .doc li{position:relative; padding-left:22px; margin-top:10px;} .doc ul>li::before{ content:""; position:absolute; left:4px; top:.62em; width:5px; height:5px; border-radius:50%; background:var(--line-2); } .doc ol>li{counter-increment:item;} .doc ol>li::before{ content:counter(item) "."; position:absolute; left:0; top:0; font-family:var(--mono); font-size:12.5px; color:var(--ink-3); } .doc code{ font-family:var(--mono); font-size:.88em; color:var(--ink); background:var(--panel-2); border:1px solid var(--line); padding:1px 5px; border-radius:5px; } /* Callout — for the disclosures that must not be skimmed past. */ .note{ margin-top:20px; padding:18px 20px; background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--accent); border-radius:0 10px 10px 0; } .note p{margin-top:0; color:var(--ink-2);} .note p+p{margin-top:12px;} .note-t{ display:block; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:10px; } /* Subprocessor / data tables. Wide content scrolls in its own box rather than pushing the page sideways. */ .tbl-scroll{overflow-x:auto; margin-top:20px; border:1px solid var(--line); border-radius:12px;} .tbl{width:100%; border-collapse:collapse; min-width:560px; background:var(--panel);} .tbl th,.tbl td{ text-align:left; padding:13px 16px; font-size:14.5px; line-height:1.55; border-bottom:1px solid var(--line); vertical-align:top; color:var(--ink-2); } .tbl thead th{ font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); background:var(--panel-2); } .tbl tbody tr:last-child td{border-bottom:none;} .tbl td:first-child{color:var(--ink); font-weight:500;} /* ---------- footer ---------- */ .foot{border-top:1px solid var(--line); background:var(--panel);} .foot-in{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding-block:34px;} .foot-left{display:flex; align-items:center; gap:16px; flex-wrap:wrap;} .foot-copy{font-family:var(--mono); font-size:12px; color:var(--ink-3); letter-spacing:.02em;} .foot-links{display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; font-size:14px; color:var(--ink-2);} .foot-links a{display:inline-flex; align-items:center; gap:6px; transition:color .14s ease;} .foot-links a:hover{color:var(--accent);} .foot-links a .ext{width:13px; height:13px; color:var(--ink-3);} .foot-links a:hover .ext{color:var(--accent);}