/* Graphite on the pre-launch site (Aman, 29 Oct 2026): the same colour system as the post-launch site and the app.
   Taken from the post-launch branch's assets/theme.css (Graphite, 27 to 28 Oct 2026). Loaded last on every page,
   so it changes colours only; the layout and the words stay as they are.
   Neutral near-black grounds, so the logo's colours are the only colour. Every text colour passes 4.5:1. */
:root {
  --sn-bg: #0B0D12;        /* base background */
  --sn-raised: #11141B;    /* raised sections */
  --sn-card: #161A23;      /* cards */
  --sn-line: #262C38;      /* card borders */
  --sn-text: #FFFFFF;      /* main text */
  --sn-text-2: #A9B1C0;    /* secondary text */
  --sn-pink: #FF3D8B;
  --sn-orange: #FF8A1F;
  --sn-cyan: #22D3EE;
  --sn-lime: #A3E635;
  --sn-gold: #FFC400;
  /* buttons: the logo's blue to deep teal starts things (white text 5.8:1 and 5.4:1); red is only for errors */
  --sn-cta: linear-gradient(135deg, #005FD6 0%, #0E7490 100%);
  --sn-ring: linear-gradient(90deg, #FF6B00, #DF0068, #8E27E0, #005FD6, #03F2DD);
  --sn-band: linear-gradient(90deg, #7C3AED 0%, #DB2777 55%, #C2410C 100%);
}

/* ---------- every page ---------- */
html, body { background: var(--sn-bg); color: var(--sn-text-2); }
a { color: var(--sn-cyan); }
h2 { color: var(--sn-text); }
strong { color: inherit; }
.intro { color: var(--sn-text-2); }

/* top: the news bar is the violet, pink and orange band; the menu bar is near-black */
.bar, .stripe { display: none; }
.buildbar { background: var(--sn-band); color: #FFFFFF; border-bottom: 0; }
.buildbar:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 3px; }
.buildbar-tag { background: #FFFFFF; color: var(--sn-bg); }
.buildbar-tag .live-dot { background: #DB2777; }
.topnav { background: rgba(11, 13, 18, 0.92); border-bottom: 1px solid var(--sn-line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); }
.nav a.small { color: var(--sn-text-2); }
.nav a.small:hover, .site-top .nav a.small[aria-current="page"] { color: var(--sn-text); }

/* buttons: blue to teal, with the orbit colours as a ring on hover */
button, .nav-cta, .cta-band a.btn { --fill: var(--sn-cta); background: var(--fill) border-box; border: 2px solid transparent; color: #FFFFFF; }
button:hover, .nav-cta:hover, .cta-band a.btn:hover, button:focus-visible, .nav-cta:focus-visible { background: var(--fill) padding-box, var(--sn-ring) border-box; }
.ask button { --fill: var(--sn-card); background: var(--sn-card); border: 1px solid var(--sn-line); color: var(--sn-text); }
.ask button:hover { background: #1F2430; }
input[type=email] { background: var(--sn-raised); border-color: var(--sn-line); color: var(--sn-text); }
input[type=email]::placeholder { color: #8A93A6; }
input[type=email]:focus, button:focus-visible, .nav a:focus-visible, .faq summary:focus-visible, .made:focus-visible, .ico:focus-visible { outline-color: var(--sn-cyan); }

/* footer: near-black with a soft glow rising behind it, and the tagline on the band */
footer { position: relative; overflow: hidden; background: var(--sn-bg); color: var(--sn-text-2); border-top: 1px solid var(--sn-line); }
footer::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 70%; z-index: 0; pointer-events: none;
  background: radial-gradient(48% 78% at 20% 100%, rgba(0, 115, 255, 0.45), transparent 72%), radial-gradient(42% 66% at 50% 100%, rgba(3, 242, 221, 0.18), transparent 72%), radial-gradient(44% 74% at 82% 100%, rgba(142, 39, 224, 0.42), transparent 72%); }
footer > * { position: relative; z-index: 1; }
.foot-tag { color: var(--sn-text); }
.foot-head { color: var(--sn-cyan); }
.foot-col a, .foot-col span, .foot-legal a, .foot-base strong, .foot nav a { color: var(--sn-text); }
.foot-base { border-top-color: var(--sn-line); }
.ico { border-color: var(--sn-line); color: var(--sn-text); }
.ico:hover { background: var(--sn-raised); border-color: var(--sn-line); color: var(--sn-text); }
@font-face { font-family: "Fredoka"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/fredoka-latin-700-normal.woff2") format("woff2"); }
.foot-band { background: var(--sn-band); color: #FFFFFF; font-family: "Fredoka", var(--display), sans-serif; letter-spacing: 0.01em; }

/* ---------- home page ---------- */
.hero, .showcase { background: var(--sn-bg); color: var(--sn-text); }
h1 { color: var(--sn-text); }
.lede { color: var(--sn-text); }
.eyebrow { color: var(--sn-text-2); border-color: var(--sn-line); }
.kicker { color: var(--sn-cyan); }
.fine, .shot figcaption { color: var(--sn-text-2); }
.shot figcaption strong { color: var(--sn-cyan); }
.shot img { border-color: var(--sn-line); }
.live-dot { background: var(--sn-bg); }

/* sections take turns between the base and the raised near-black */
.who, #real-channel, .faq { background: var(--sn-raised); }
.catch, .why, .log { background: var(--sn-bg); }
.log { border-top: 1px solid var(--sn-line); border-bottom: 1px solid var(--sn-line); }

/* cards */
.step, .faq details, .who-card, .catch-card, .tp-cell, .card, .made, .why-card { background: var(--sn-card); border-color: var(--sn-line); }
.tp-cell.now, .made:hover { border-color: #3A4252; }
.step h3, .who-card h3, .catch-card h3, .why-card h3, .card h3, .faq summary, .tp-cell strong, .who-dl dd, .log-list time, .principle-line { color: var(--sn-text); }
.step p, .who-card p, .catch-card p, .faq details p, .card .role, .made, .made-text, .tp-label, .tp-sub, .origin p.tp-note, .catch-note, .log-list span, .who-dl dt { color: var(--sn-text-2); }
.why-card { border-top: 4px solid var(--sn-cyan); }
.why-card p { color: var(--sn-text); }
.who-card:nth-child(1) .who-dl dt { color: var(--sn-pink); }
.who-card:nth-child(2) .who-dl dt { color: var(--sn-cyan); }
.who-card:nth-child(3) .who-dl dt { color: var(--sn-orange); }
.who-card:nth-child(4) .who-dl dt { color: var(--sn-lime); }
.faq summary::after, .principle-line span, .tp-arrow, .made-text strong { color: var(--sn-pink); }
.see-all a { color: var(--sn-cyan); }

/* the "catch it" stops: the gold dot stays, on a dark pill */
.catch-card p.stop { background: rgba(255, 196, 0, 0.14); color: var(--sn-gold); }
.catch-card p.stop.soon { background: rgba(169, 177, 192, 0.14); color: var(--sn-text-2); }

/* build log: a cyan line */
.log-list { border-left-color: var(--sn-cyan); }
.log-list li::before { background: var(--sn-card); border-color: var(--sn-cyan); }

/* closing panel: deep blue with light that drifts slowly (the post-launch "aurora") */
.cta2, .cta-band { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(135deg, #06142E 0%, #0A2A66 50%, #0B3E94 100%); color: #FFFFFF; }
.cta2::before, .cta-band::before { content: ""; position: absolute; inset: -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(30% 38% at 22% 32%, rgba(3, 242, 221, 0.22), transparent 70%), radial-gradient(28% 36% at 78% 70%, rgba(142, 39, 224, 0.28), transparent 70%), radial-gradient(26% 32% at 62% 22%, rgba(0, 115, 255, 0.34), transparent 70%);
  animation: g-aurora 24s ease-in-out infinite alternate; }
@keyframes g-aurora { 0% { transform: translate(-5%, -3%) rotate(0deg); } 100% { transform: translate(5%, 4%) rotate(10deg); } }
.cta2 h2, .cta2 p.lead2, .cta-band h2, .cta-band p { color: #FFFFFF; }
.cta2 .fine { color: #D5DEF0; }
.cta2 input[type=email] { background: rgba(11, 13, 18, 0.55); border-color: rgba(255, 255, 255, 0.25); }
.cta2 button, .cta-band a.btn { --fill: linear-gradient(#FFFFFF, #FFFFFF); color: var(--sn-bg); }
/* the answer chips after joining stay dark with white text, on the blue panel too */
.cta2 .ask button, .hero .ask button { --fill: var(--sn-card); background: var(--sn-card); border: 1px solid var(--sn-line); color: var(--sn-text); }
.cta2 .ask button:hover, .hero .ask button:hover { background: #1F2430; }
@media (prefers-reduced-motion: reduce) { .cta2::before, .cta-band::before { animation: none; } }

/* ---------- How it works, guides, legal pages ---------- */
header.top, .shot-band { background: var(--sn-bg); color: var(--sn-text); }
header.top .lead, .byline, .updated, .shot-band figcaption { color: var(--sn-text-2); }
.shot-band figcaption strong { color: var(--sn-cyan); }
main, .article { color: var(--sn-text-2); }
.short, .steps-list > li, .need div, .guide-list a, .toc, .article .related, .article .tip { background: var(--sn-card); border-color: var(--sn-line); }
.short { border-left-color: var(--sn-gold); }
.article .tip { border-left-color: var(--sn-cyan); }
.guide-list a:hover { border-color: var(--sn-cyan); }
.steps-list h3, .need h3, .guide-list h2, .article h2, .article h3, main h2, main h3, main strong { color: var(--sn-text); }
.steps-list .cost, .small-print, .guide-list p, .toc p, .article .related li span { color: var(--sn-text-2); }
.steps-list > li::before { color: var(--sn-bg); background: var(--sn-pink); }
.steps-list > li:nth-child(3n+2)::before { background: var(--sn-orange); }
.steps-list > li:nth-child(3n)::before { background: var(--sn-cyan); }
.badge.now { background: var(--sn-lime); color: var(--sn-bg); }
.badge.soon { background: var(--sn-orange); color: var(--sn-bg); }
.article .vbe-note { background: linear-gradient(135deg, #06142E 0%, #0A2A66 60%, #0B3E94 100%); color: #FFFFFF; }
.article .vbe-note p { color: #E8EEFA; }
.article .vbe-note a { color: #FFFFFF; }