:root {
  --ground: #F7F9FC;
  --surface: #FFFFFF;
  --ink: #1F2937;
  --ink-2: #4B5563;
  --muted: #6B7280;
  --line: #D8E0EA;
  --gold: #2563EB;
  --gold-deep: #1D4ED8;
  --gold-soft: #EFF6FF;
  --gold-glow: rgba(37, 99, 235, .18);
  --brand: #2563EB;
  --brand-deep: #1D4ED8;
  --brand-soft: #EFF6FF;
  --brand-ink: #FFFFFF;
  --action: #1D4ED8;
  --action-hover: #1E40AF;
  --blue: #2563EB;
  --blue-soft: #EFF6FF;
  --stone-soft: #F1F5F9;
  --side: #17233A;
  --side-2: #202E49;
  --side-ink: #CBD5E1;
  /* Theme hooks: identical to the literal values they replaced, so light mode
     is unchanged everywhere. A page that defines dark values for these (the
     console does, via html[data-theme]) flips its whole skin. */
  --heading: #17233A;
  --hover-soft: #F8FBFF;
  --brand-line: #BFDBFE;
  --topbar: rgba(255, 255, 255, .96);
  /* Status + page-wash tokens. Light values match the literals the public
     pages already use inline, so declaring them here changes nothing in
     light — it only gives the dark block below one place to flip them. */
  --good: #2F7D4F; --good-soft: #EAF3ED;
  --warn: #B45309; --warn-soft: #F9F1E7;
  --bad: #B3403A; --bad-soft: #F8ECEB;
  --plum: #6B4F8F; --plum-soft: #F1EDF6;
  --wash: #F4F3EF;
  --nav-wash: rgba(250, 250, 248, .94);
  --field: #FCFCFA;
  --shadow: 0 1px 2px rgba(23, 35, 58, .05), 0 8px 24px rgba(23, 35, 58, .06);
  --shadow-lg: 0 2px 4px rgba(23, 35, 58, .06), 0 24px 60px rgba(23, 35, 58, .14);
}

/* Dark appearance for every page that wears this brand. Guarded by
   :not([data-theme="light"]) so an explicit light choice (the console's
   toggle) always beats the device preference; pages without a toggle simply
   follow the device. Charcoal surfaces keep blue as an accent instead of
   turning the entire product into one undifferentiated navy field. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #111315;
    --surface: #1A1D20;
    --ink: #F4F1EA;
    --ink-2: #C9C4BA;
    --muted: #A49D91;
    --line: #3A3D40;
    --gold: #5B8DEF;
    --gold-deep: #8EB7FF;
    --gold-soft: #232A35;
    --gold-glow: rgba(91, 141, 239, .25);
    --brand: #5B8DEF;
    --brand-deep: #3B6FDD;
    --brand-soft: #232A35;
    --brand-ink: #FFFFFF;
    /* White text on the brighter accent misses AA. Primary actions use the
       deeper action blue while decorative accents can remain lighter. */
    --action: #2563EB;
    --action-hover: #1D4ED8;
    --blue: #8EB7FF;
    --blue-soft: #202938;
    --stone-soft: #24272A;
    --side: #17191B;
    --side-2: #202326;
    --side-ink: #C9C4BA;
    --heading: #F4F1EA;
    --hover-soft: #24272A;
    --brand-line: #3F5F96;
    --topbar: rgba(26, 29, 32, .94);
    --good: #73D3A3; --good-soft: #17271F;
    --warn: #F1BB6C; --warn-soft: #2B2318;
    --bad: #F09A92; --bad-soft: #2C1D1C;
    --plum: #C3A8E6; --plum-soft: #292332;
    --wash: #0D0F10;
    --nav-wash: rgba(17, 19, 21, .94);
    --field: #16181A;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .35);
    --shadow-lg: 0 2px 4px rgba(0, 0, 0, .45), 0 24px 60px rgba(0, 0, 0, .5);
  }
}

body { background: var(--ground); color: var(--ink); }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline-color: #2563EB;
}
.btn-gold, .bb-primary, #login-btn, #submit {
  background: var(--action) !important;
  border-color: var(--action) !important;
  color: #FFFFFF !important;
}
.btn-gold:hover, .bb-primary:hover, #login-btn:hover, #submit:hover {
  background: var(--action-hover) !important;
  border-color: var(--action-hover) !important;
}
.sidebar { background: var(--side) !important; }
.logo i, .lg i, .brand i { background: #2563EB !important; color: #FFFFFF !important; }
.nav-item.on { background: rgba(37, 99, 235, .22) !important; color: #93C5FD !important; }
.nav-item.on .badge { background: rgba(37, 99, 235, .30) !important; color: #DBEAFE !important; }
.phone { background: #17233A !important; }
.ph-scr { background: #FFFFFF !important; color: #1F2937 !important; }
.ph-card { background: #F7F9FC !important; border-color: #D8E0EA !important; }
.ph-card .lab, .ph-card p, .ph-tabs { color: #4B5563 !important; }
.ph-tabs { border-color: #D8E0EA !important; }
.ph-head span { background: #EEF4FF !important; color: #2563EB !important; }
.band, .cta-band, .login-story { background: #17233A !important; }
.login { background: #17233A !important; }
.login-shell { border-color: #2B3A57 !important; }
.check, .avatar, .rel, .fund.on, .answer, .queue-note {
  background: var(--brand-soft) !important;
  color: var(--gold-deep) !important;
  border-color: var(--brand-line) !important;
}
.queue-note b, .answer b, .cite, summary::after { color: var(--gold-deep) !important; }
.price.hot { border-color: #93C5FD !important; }
.paybar { background: #17233A !important; }

/* Desktop product finish: quiet navy navigation, crisp work surfaces. Values
   route through the theme tokens above so the console's dark mode can flip
   them; in light they resolve to the exact literals this section always used. */
.main { background: var(--ground) !important; }
.topbar { background: var(--topbar) !important; border-bottom-color: var(--line) !important; }
.search, .panel, .product-card, .workspace-stat, .assistant-shell, .assistant-card {
  border-color: var(--line) !important;
  box-shadow: 0 1px 2px rgba(23, 35, 58, .04), 0 8px 24px rgba(23, 35, 58, .05) !important;
}
.workspace-hero h1 { color: var(--heading) !important; }
.bb-btn { border-color: var(--line) !important; }
.bb-btn:hover { border-color: #93C5FD !important; background: var(--hover-soft) !important; }
.bb-btn.bb-primary:hover, .bb-primary:hover { background: var(--brand-deep) !important; color: var(--brand-ink) !important; }
.nav-label { color: #64748B !important; }
.side-user, .live { border-color: #2B3A57 !important; }

/* Real product media, shared by the landing page rather than redrawn mock UI. */
.product-shot {
  margin: 0;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #D8E0EA;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
}
.product-shot img { display: block; width: 100%; height: auto; }
.desktop-shot { aspect-ratio: 16 / 10; }
.desktop-shot img { height: 100%; object-fit: cover; object-position: top center; }
.mobile-hero-shot { max-width: 340px; }
.phone-shot { width: min(100%, 300px); aspect-ratio: 390 / 844; margin-inline: auto; }
.phone-shot img { height: 100%; object-fit: cover; object-position: top center; }
.mobile-product-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.band .product-shot { border-color: #334155; box-shadow: 0 20px 55px rgba(2, 6, 23, .34); }
.product-proof { padding-top: 72px; }
.product-proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 34px; align-items: start; }
.product-proof-grid figure { margin: 0; min-width: 0; }
.product-proof-grid .phone-shot { width: 100%; }
.product-proof-grid figcaption { margin-top: 10px; color: var(--ink-2); font-size: 13px; font-weight: 700; text-align: center; }
@media (max-width: 680px) {
  .mobile-product-pair { grid-template-columns: minmax(0, 1fr); }
  .mobile-product-pair .phone-shot:last-child { display: none; }
  .product-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}