/* The dark stage for the public pages (2026-11-13), matching the homepage (home.css). Loaded AFTER site.css on pricing,
   terms, privacy, refunds, cookies, sign-up, log-in, forgot and reset: it swaps the colours and leaves the layout alone.
   The workspace (/app) has its own charcoal look in app.css and doesn't load this. Layers, back to front: a faint grid, the
   cursor light (light.js), then the page; panels are slightly see-through so the light glows through them. */
:root {
  --paper: #0b0b0c;
  --grid: #17181a;
  --rule: #2a2c30;
  --ink: #ededed;
  --muted: #9a9ba0;
  --card: rgba(20, 21, 23, 0.6);
  --accent: #bee32c;
  --accent-ink: #1f2112;
  --mark: #bee32c;
  --mark-ink: #bee32c;
  --tone: #1f2023;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.5), 0 3px 10px rgba(0, 0, 0, 0.4);
  color-scheme: dark;
}
/* anything about paying keeps its greens, lifted so they read on black */
.money { --accent: #15803d; --accent-ink: #ffffff; --mark: transparent; --mark-ink: #5fd38a; --money-tint: #12261a; }
.money .amount, .periods button small, .plan .plan-note { color: #5fd38a; }
.money .btn.soft { background: #12261a; border: 1px solid #1e4a2c; color: #9fe0b4; }
@media (hover: hover) and (pointer: fine) { .money .btn.soft:hover { background: #173a25; } }

html { background: #0b0b0c; }
body { background-color: #0b0b0c; background-image: none; color: var(--ink); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: 0.5; background-image: linear-gradient(#17181a 1px, transparent 1px), linear-gradient(90deg, #17181a 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); }
.wrap, footer { position: relative; z-index: 1; }
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--accent); }
.money :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: #5fd38a; }

/* cursor light: behind the page */
#cursor-light { position: fixed; left: 0; top: 0; width: 560px; height: 560px; margin: -280px 0 0 -280px; border-radius: 50%; pointer-events: none; z-index: 0; opacity: 0; will-change: transform; transition: opacity 300ms var(--ease-out); background: radial-gradient(closest-side, rgba(190, 227, 44, 0.3), rgba(190, 227, 44, 0.11) 50%, transparent 100%); }
#cursor-light.on { opacity: 1; }
#cursor-light.press { opacity: 1; filter: brightness(1.4); }

/* headings: lime italic payoff words, no highlighter swipe */
.pay, .hero h1 em, .sec-head h1 em, .sec-head h2 em, .legal h1 em { background: none; color: var(--accent); }
.money .sec-head h1 em, .money .sec-head h2 em, .money .pay { color: #5fd38a; }
.band h2 em { color: var(--accent); }

/* nav: solid dark, the logo with white letters */
.nav { background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); }
.navlinks a { color: #b9bac0; }
@media (hover: hover) and (pointer: fine) { .navlinks a:not(.btn):hover { color: #fff; } }
.btn { background: var(--tone); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: #2a2c30; } .btn.primary:hover { background: var(--accent); } }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.dark { background: #2a2c30; color: #fff; }
.btn.primary:hover { box-shadow: 0 0 0 6px rgba(190, 227, 44, 0.16); }
.money .btn.primary:hover { box-shadow: 0 0 0 6px rgba(21, 128, 61, 0.28); }

/* body copy */
.kicker, .sec-sub, .lead { color: #b4b5ba; }
.card p, .steps p, .features p, .panel p, .plan-rows span { color: #b4b5ba; }
.card, .steps li, .panel, .periods, .faq details, .legal { border: 1px solid var(--rule); }
.card:hover, .steps li:hover { border-color: #3d4a14; }
.money .card:hover { border-color: #1e4a2c; }
.plan { box-shadow: none; border-color: var(--accent); background: linear-gradient(180deg, #112a1a, var(--card) 70%); }
.fine, .plan-note, .plan-card .billed, .range-ends, .approve-shot figcaption, footer { color: #8a8b90; }
.plan-note { color: #b4b5ba; }
footer a { color: #b9bac0; text-decoration-color: #3a3c41; }
@media (hover: hover) and (pointer: fine) { footer a:hover { color: var(--accent); text-decoration-color: currentColor; } }
.amount small { color: var(--muted); }
.periods { background: var(--card); }
.periods button { color: #c9cace; }
@media (hover: hover) and (pointer: fine) { .periods button:hover { background: #1f2023; } }
.periods button.on { background: var(--accent); color: var(--accent-ink); }
.periods button.on small { color: inherit; }
.save, .tag.on { background: #12261a; color: #9fe0b4; }

/* ticks: lime check on a dark chip (the money page's stay green) */
.facts li::before, .ticks li::before { background-color: #2a3313; }
.money .ticks li::before { background-color: #15803d; }

/* the plan picker's help text and the approval dialog sample keep their own dark card */
.approve-ui { border: 1px solid #34363b; }

/* faq: the plus turns lime */
.faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%23bee32c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%23bee32c' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.money .faq summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 1.5v11M1.5 7h11' stroke='%235fd38a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.money .faq details[open] summary::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M1.5 7h11' stroke='%235fd38a' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.faq p { color: #b4b5ba; }
.sec-sub a, .faq a { color: var(--accent); }
.legal a { color: #bee32c; }
.legal.money a { color: #5fd38a; }
.money .sec-sub a, .money .faq a { color: #5fd38a; }

/* legal pages and the sign-up / log-in forms */
.legal p, .legal li { color: #c3c4c9; }
.legal h1, .legal h2 { color: #fff; }
.legal td { border-top-color: var(--rule); }
.legal tr.total td { border-top-color: #6b6d73; }
.legal .formula { background: #0f1011; border-color: var(--rule); }
.legal .fill { background: #fff3c4; color: #111; }
.legal .field input { background: #101113; border-color: #34363b; color: var(--ink); }
.legal .field input::placeholder { color: #6f7075; }
.legal .field input:focus { outline-color: var(--accent); }
.legal .check { color: #c3c4c9; }
.legal .check input { accent-color: var(--accent); }
.legal .fine { color: var(--muted); }
.btn.sso { background: #1f2023; border: 1px solid #34363b; }
@media (hover: hover) and (pointer: fine) { .btn.sso:hover { background: #2a2c30; } }
.or::before, .or::after { border-top-color: var(--rule); }
.formerr { background: #2a1514; color: #ff9b8f; }
.msg-ok { background: #12261a; color: #9fe0b4; }
input[type="range"] { accent-color: var(--accent); }
.money input[type="range"] { accent-color: #22a455; }

/* closing band */
.band { background: var(--card); border: 1px solid var(--rule); color: #fff; }

@media (prefers-reduced-motion: reduce) { #cursor-light { display: none; } }