/* ── Shared app chrome ────────────────────────────────────────────────────────
   The product's palette and typefaces for the pages behind the marketing site:
   the build flow, the account pages, and the thank-you pages.

   Those pages were each written with their own hard-coded dark palette on Inter,
   from before the product settled on this look — so a user moved from the wizard
   to the processing screen and appeared to change product mid-purchase, and the
   theme toggle in the header did nothing once they arrived.

   This keeps the variable names those pages already use (--bg, --panel, --text,
   --blue and the rest) and redefines them, so a page adopts the current look by
   dropping its own :root block rather than by having every rule rewritten.
   ────────────────────────────────────────────────────────────────────────────── */

:root {
  --bg: #F4F6FC;
  --panel: #FFFFFF;
  --panel2: #F6F8FF;
  --sunk: #F6F8FF;
  --line: #E3E8F6;
  --line-soft: #EDF1FB;
  --text: #0A1026;
  --text2: #141C3A;
  --muted: #5A6485;
  --muted2: #6B76A0;

  --gold: #F0A500;
  --gold-ink: #8A5600;
  --gold-wash: rgba(240,165,0,0.12);
  --blue: #1E4FD9;
  --blue-wash: rgba(46,107,255,0.08);
  --cyan: #0B6FA6;
  --green: #16845B;
  --green-wash: rgba(22,132,91,0.10);
  --amber: #A96508;
  --danger: #C0362F;

  --shadow: 0 18px 44px rgba(16,24,40,0.10);
  --lift: 0 1px 3px rgba(16,24,40,0.06);

  --font-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* The stamp wins in both directions; the un-stamped document follows the OS. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #080D1F; --panel: #0E1530; --panel2: #141C3A; --sunk: rgba(255,255,255,0.045);
    --line: rgba(255,255,255,0.12); --line-soft: rgba(255,255,255,0.07);
    --text: #F6F8FF; --text2: #C4CDEA; --muted: #8F9CC4; --muted2: #5C6890;
    --gold-ink: #FFD56A; --gold-wash: rgba(240,165,0,0.14);
    --blue: #6EA8FF; --blue-wash: rgba(46,107,255,0.16);
    --cyan: #38BDF8; --green: #22C55E; --green-wash: rgba(34,197,94,0.14);
    --amber: #F59E0B; --danger: #F4595B;
    --shadow: 0 26px 64px rgba(0,0,0,0.5); --lift: 0 1px 3px rgba(0,0,0,0.35);
  }
}
:root[data-theme="dark"] {
  --bg: #080D1F; --panel: #0E1530; --panel2: #141C3A; --sunk: rgba(255,255,255,0.045);
  --line: rgba(255,255,255,0.12); --line-soft: rgba(255,255,255,0.07);
  --text: #F6F8FF; --text2: #C4CDEA; --muted: #8F9CC4; --muted2: #5C6890;
  --gold-ink: #FFD56A; --gold-wash: rgba(240,165,0,0.14);
  --blue: #6EA8FF; --blue-wash: rgba(46,107,255,0.16);
  --cyan: #38BDF8; --green: #22C55E; --green-wash: rgba(34,197,94,0.14);
  --amber: #F59E0B; --danger: #F4595B;
  --shadow: 0 26px 64px rgba(0,0,0,0.5); --lift: 0 1px 3px rgba(0,0,0,0.35);
}

body { font-family: var(--font-body); }
h1, h2, h3, h4 { font-family: var(--font-display); letter-spacing: -0.02em; }

/* The brand mark is the gold orb the rest of the product uses, not a blue square. */
.brand { color: var(--text); text-decoration: none; }
.brand .mark,
.brand-mark {
  background: radial-gradient(circle at 32% 30%, #FFD56A, var(--gold) 62%, #B87C00) !important;
  color: #3A2600 !important;
  font-weight: 800;
}

/* Back links and secondary chrome, so each page stops inventing its own. */
.back-nav {
  color: var(--muted); border: 1px solid var(--line); background: var(--panel);
  border-radius: 9px; padding: 8px 14px; font-size: 0.85rem; font-weight: 650; text-decoration: none;
}
.back-nav:hover { color: var(--text); border-color: var(--muted2); }

:where(button, a, input, select, textarea):focus-visible {
  outline: 3px solid var(--blue); outline-offset: 2px;
}

/* ── Names the older pages used ───────────────────────────────────────────────
   Three of these pages named their tokens differently (--surface, --border,
   --accent rather than --panel, --line, --blue). Aliasing is what lets them adopt
   the current palette without every rule in them being rewritten.
   --container is deliberately absent: it is a width, not a colour, and it belongs
   to the one page that sets it. */
:root {
  --surface: var(--panel);
  --border: var(--line);
  --accent: var(--gold);
  --accent-dark: var(--gold-ink);
  --accent-soft: var(--gold-wash);
  --soft: var(--gold-wash);
  --success: var(--green);
  --success-green: var(--green);
  --warning: var(--amber);
  --error: var(--danger);
  /* thank-you.html names the ground --navy, which kept it dark in light mode. */
  --navy: var(--bg);
  --navy-mid: var(--panel2);
  --sky: var(--cyan);
  --text-muted: var(--muted);
  --border-hi: var(--muted2);
}

/* Those pages paint their primary action as white-on-accent. The product's primary
   action is gold, and white on gold does not carry, so the ink moves with it. */
.button { color: #26180A; }
.button.secondary,
.button[class*="ghost"] { color: var(--text); }

/* Anchor jumps land below the sticky header, not under it. */
html { scroll-padding-top: 84px; }

/* The page header sits on the site's column, so the logo is where it is on every
   other page; each page's content keeps its own narrower width. */
header.top > .container,
header.site-header > .container { width: min(calc(100% - 2 * clamp(16px, 4vw, 32px)), 1200px); }

/* ── Brand lockup ─────────────────────────────────────────────────────────────
   The governed mark is the orb inside the ink square beside the two-tone
   wordmark. The thank-you pages were drawing a letter "G" and a single-tone
   "GenioPrep" instead, which is the one brand rule no page gets to restate.
   Copied from shared-chrome.css with literal colours, because these pages do
   not load the marketing stylesheet that names the brand tokens. Scoped to the
   header and footer so a page-level decorative .orb is unaffected. */
.site-header .brand,
.site-footer .brand { display: inline-flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.site-header .orb,
.site-footer .orb {
  width: 21px; height: 21px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #FFF6E0 0%, #FFD56A 20%, #F0A500 48%, #C97E00 74%, #8A5400 100%);
  box-shadow:
    0 0 16px 1px rgba(240,165,0,.5), 0 0 40px 5px rgba(240,165,0,.24),
    inset 0 -4px 11px rgba(120,72,0,.45), inset 0 4px 9px rgba(255,246,224,.55);
}
.site-header .sq,
.site-footer .sq {
  width: 34px; height: 34px; background: #11162C;
  border-radius: 28%; display: grid; place-items: center;
  flex: none; position: relative; overflow: hidden;
}
.site-header .sq::after,
.site-footer .sq::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 42%, rgba(240,165,0,.22), transparent 62%);
}

.site-header .wordmark,
.site-footer .wordmark {
  font-family: var(--font-display); font-weight: 700; font-size: 1.18rem;
  letter-spacing: -0.03em; color: var(--text);
}
.site-header .wordmark b,
.site-footer .wordmark b { color: #8A5600; font-weight: 700; }

/* ── Theme toggle ─────────────────────────────────────────────────────────────
   Same control as the marketing header, for app pages that include the button.
   chrome.js wires it; every block in that file no-ops when its element is absent. */
.site-header .nav-right { display: inline-flex; align-items: center; gap: 14px; }

.theme-toggle {
  width: 44px; height: 44px; border-radius: 999px;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(16,24,56,0.04); border: 1px solid rgba(16,24,56,0.10);
  color: #34406A; transition: color .2s, border-color .2s, background-color .2s;
}
.theme-toggle:hover { color: var(--text); border-color: var(--muted2); }
.theme-toggle svg { width: 20px; height: 20px; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* Dark, by the same two prongs the rest of this file uses. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .site-header .sq,
  :root:not([data-theme="light"]) .site-footer .sq { background: #1A1A2E; }
  :root:not([data-theme="light"]) .site-header .wordmark b,
  :root:not([data-theme="light"]) .site-footer .wordmark b { color: #FFD56A; }
  :root:not([data-theme="light"]) .theme-toggle {
    background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: #C4CDEA;
  }
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}
:root[data-theme="dark"] .site-header .sq,
:root[data-theme="dark"] .site-footer .sq { background: #1A1A2E; }
:root[data-theme="dark"] .site-header .wordmark b,
:root[data-theme="dark"] .site-footer .wordmark b { color: #FFD56A; }
:root[data-theme="dark"] .theme-toggle {
  background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.08); color: #C4CDEA;
}
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }