/* spotstr — Graphite colours for every page except the home page (which carries its own copy).
   Loaded after site.css; it only changes colours and backgrounds, never layout. */
:root {
  --night: #0F1114;
  --ink: #FFFFFF;
  --text: #C9CED8;
  --muted: #A3A9B5;
  --line: rgba(255, 255, 255, .08);
  --soft: #191C21;
  --soft-blue: rgba(74, 147, 255, .12);
  --blue: #4A93FF;
  --danger: #FF7A85;
  --danger-soft: rgba(217, 45, 58, .12);
  --shadow: 0 1px 2px rgba(0, 0, 0, .2), 0 10px 30px rgba(0, 0, 0, .25);
  --graphite: #131519;
  --card: #20242B;
}
html { color-scheme: dark; }
body { background: var(--graphite); color: var(--text); }
a { color: #6AA8FF; }
::selection { background: rgba(74, 147, 255, .35); }

/* header and footer */
.site-header.solid { background: rgba(19, 21, 25, .92); border-bottom: 1px solid var(--line); }
.site-footer { background: var(--night); color: var(--muted); }
.site-footer::before { opacity: .35; }
.foot-links a { color: var(--muted); }
.foot-bottom { color: #8A909C; border-top-color: var(--line); }

/* hero: soft blue glow on charcoal instead of the night-city skyline */
.hero { background: var(--graphite); }
.hero::before { background: radial-gradient(45% 55% at 12% 15%, rgba(31, 107, 255, .22), transparent 70%), radial-gradient(40% 50% at 92% 40%, rgba(58, 66, 82, .55), transparent 70%), linear-gradient(180deg, #121418, #131519); }
.hero .city, .hero .shade { display: none; }
.hero .lede { color: var(--muted); }
.eyebrow { color: var(--blue); }
.ring { border-color: rgba(74, 147, 255, .45); color: var(--blue); background: rgba(74, 147, 255, .06); box-shadow: none; }
.pin { background: rgba(32, 36, 43, .9); }
.soon { color: var(--muted); }

/* sections and cards */
.section.soft { background: #191C21; }
.card, .steps > li, .faq details, .cats li, .price-box, .extras div, .tcard, .pro-feat { background: var(--card); border-color: var(--line); }
.card p, .steps p, .feat p, .price-box p, .extras div, .price-note, .section-head p, .contact small { color: var(--muted); }
.tile { background: rgba(74, 147, 255, .12); color: var(--blue); }
.feat .tile, .callout .tile, .contact .row .tile { background: #2A2F38; box-shadow: none; }
.features, .contact, .price-card { background: linear-gradient(160deg, #1E2A44, #20262E); border-color: var(--line); }
.feat { background: rgba(255, 255, 255, .04); }
.callout { background: var(--card); border-color: var(--line); }
.callout.danger { background: rgba(217, 45, 58, .12); border-color: rgba(255, 122, 133, .3); }
.callout.danger .tile { background: rgba(217, 45, 58, .2); color: #FF7A85; }
.chips li, .link-demo { background: #191C21; border-color: var(--line); color: #fff; }
.contact hr { border-top-color: var(--line); }
.num { box-shadow: 0 6px 16px rgba(31, 107, 255, .25); }
.ticks.blue li::before { background-color: #4A93FF; }
.tcard li, .ticks li { color: var(--text); }
.trust li { border-left-color: var(--line); color: #fff; }
.trust small { color: var(--muted); }
.cats li { color: #fff; }
.cats svg { color: var(--blue); }
.cats li:hover { border-color: rgba(74, 147, 255, .4); }
.step .shot, .pro-feat .peek { background: #191C21; }
.pro-feat .peek::after { background: linear-gradient(transparent, var(--card)); }
.btn-outline { background: transparent; color: #6AA8FF; border-color: #4A93FF; }
.btn-outline:hover { background: rgba(74, 147, 255, .12); }
.faq summary { color: #fff; }
.faq details[open] { box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }

/* legal and document pages */
.doc-hero { background: linear-gradient(180deg, #191C21, var(--graphite)); }
.doc-hero::after { background: radial-gradient(closest-side, rgba(31, 107, 255, .18), rgba(58, 66, 82, .2) 55%, transparent); }
.doc-hero .eyebrow { color: var(--blue); }
.doc-body p, .doc-body li { color: #D3D7DF; }
.doc-body h2 { border-top-color: var(--line); }
.toc { background: #191C21; border-color: var(--line); }
.toc a { color: var(--text); }
.toc a:hover { background: var(--card); color: #fff; }
.toc a.on { background: rgba(74, 147, 255, .14); color: #8DBBFF; }
.toc .help { border-top-color: var(--line); }

/* delete-account mock screens and pro profile page */
.mock { background: #0D0F12; border: 1px solid var(--line); }
.pro-hero { background: var(--graphite); }
.pro-hero::before { background: radial-gradient(45% 60% at 10% 20%, rgba(31, 107, 255, .2), transparent 70%), linear-gradient(180deg, #121418, #131519) !important; }
.pro-hero .city { display: none; }
.book-card { background: rgba(32, 36, 43, .92); }
.svc { color: #fff; }
.links a { background: rgba(74, 147, 255, .12); }
.mock .field { color: #0B1530; }