/* =========================================================================
 * site.css - landing, login, signup, 404.
 *
 * Dark-first design that pulls tokens from theme.css. Floating pill nav,
 * gradient CTAs, glow accents, tilted dashboard mockup.
 * ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* Anchor jumps (e.g. /#pricing, /learn#glossary) land clear of the sticky
   pill header instead of underneath it. */
.section, .learn-hero, .glossary-entry, .wt-step { scroll-margin-top: 96px; }
@media (max-width: 900px) {
  /* The header is two rows tall on small screens. */
  .section, .learn-hero, .glossary-entry, .wt-step { scroll-margin-top: 124px; }
}

body {
  font-family: "Inter", "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--text, #e7eaf2);
  background: var(--bg, #070b14);
  background-image: var(--bg-grad);
  background-attachment: fixed;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent-2, #3b82f6); text-decoration: none; }
a:hover { color: var(--accent, #2563eb); }

/* ── Floating pill nav ─────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 18px;
  z-index: 50;
  max-width: 1140px;
  margin: 18px auto 0;
  padding: 10px 14px 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 999px;
  background: rgba(14, 14, 16, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4),
              0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -0.3px;
  color: var(--text-strong, #fff);
}
.site-brand:hover { color: var(--text-strong, #fff); }
.site-brand img {
  width: 30px !important;
  height: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 8px;
  object-fit: contain;
  flex: 0 0 auto;
}
/* Defensive: ensure no stale/cached CSS sneaks in a pseudo-element logo */
.site-brand::before,
.site-brand::after,
.sidebar-brand::before,
.sidebar-brand::after,
.auth-card .site-brand::before,
.auth-card .site-brand::after { content: none !important; background: none !important; display: none !important; }
.site-nav-center {
  display: flex;
  gap: 8px;
  align-items: center;
}
.site-nav-center a {
  padding: 8px 14px;
  border-radius: 999px;
  color: var(--text-muted, #8a93ab);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.15s ease, background 0.15s ease;
}
.site-nav-center a:hover { color: var(--text-strong, #fff); background: rgba(255, 255, 255, 0.04); }
.site-nav-center a.active { color: var(--accent-2, #3b82f6); }
.site-nav-right { display: flex; gap: 10px; align-items: center; }
.site-nav-right a { color: var(--text-muted, #8a93ab); font-weight: 500; font-size: 14px; padding: 8px 12px; white-space: nowrap; }
.site-nav-right a:hover { color: var(--text-strong, #fff); }

/* ── Buttons ──────────────────────────────────────────────────────────── */
.btn-primary, .btn-secondary, .btn-primary-sm, .btn-secondary-sm, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  border: 0;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%);
  color: #ffffff;
  box-shadow: 0 8px 30px rgba(96, 165, 250, 0.45),
              0 0 0 1px rgba(255, 255, 255, 0.15) inset;
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 40px rgba(96, 165, 250, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset;
  color: #ffffff;
}
.btn-secondary {
  background: #fff;
  color: #0b1024;
}
.btn-secondary:hover { background: #f1f5f9; color: #0b1024; transform: translateY(-1px); }

.btn-ghost {
  background: transparent;
  color: var(--text, #e7eaf2);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-strong, #fff); }

.btn-primary-sm, .btn-secondary-sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: 999px;
}
.btn-primary-sm {
  background: transparent;
  color: var(--accent-2, #3b82f6);
  border: 1px solid var(--accent-2, #3b82f6);
  box-shadow: 0 0 16px rgba(59, 130, 246, 0.35);
}
.btn-primary-sm:hover {
  background: rgba(59, 130, 246, 0.1);
  box-shadow: 0 0 24px rgba(59, 130, 246, 0.55);
  color: var(--accent-2, #3b82f6);
}
.btn-secondary-sm {
  background: transparent;
  color: var(--text, #e7eaf2);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.btn-secondary-sm:hover { background: rgba(255, 255, 255, 0.05); color: var(--text-strong, #fff); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  max-width: 1100px;
  margin: 100px auto 40px;
  padding: 0 24px;
  text-align: center;
}
.hero::before {
  content: "";
  position: absolute;
  inset: -120px -10% auto -10%;
  height: 520px;
  background:
    radial-gradient(circle at 50% 30%, rgba(96, 165, 250, 0.22), transparent 55%),
    radial-gradient(circle at 30% 60%, rgba(37, 99, 235, 0.16), transparent 55%);
  filter: blur(10px);
  z-index: -1;
  pointer-events: none;
}
.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 18px 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 13px;
  color: var(--text-muted, #8a93ab);
  margin-bottom: 28px;
  white-space: nowrap;
  line-height: 1;
}
.trust-pill .avatars { display: inline-flex; flex-shrink: 0; align-items: center; }
.trust-pill .avatars span {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(10, 10, 12, 1);
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  margin-left: -8px;
}
.trust-pill .avatars span:first-child { margin-left: 0; background: linear-gradient(135deg, #93c5fd, #3b82f6); }
.trust-pill .avatars span:nth-child(3) { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }

.hero h1 {
  font-family: "Inter", "Raleway", sans-serif;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -1.5px;
  font-weight: 800;
  color: var(--text-strong, #fff);
  margin: 0 0 22px;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}
.hero h1 .grad {
  background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 45%, #3b82f6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  white-space: nowrap;
  display: inline-block;
}
.hero .lede {
  font-size: 17px;
  color: var(--text-muted, #8a93ab);
  max-width: 640px;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 70px; }

/* ── Dashboard mockup (tilted screenshot stand-in) ────────────────────── */
.hero-mock {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  perspective: 2000px;
}
.hero-mock-frame {
  position: relative;
  transform: rotateX(18deg) rotateZ(-2deg);
  transform-origin: 50% 0;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
  background: linear-gradient(180deg, #141518 0%, #0a0a0c 100%);
  border: 1px solid rgba(96, 165, 250, 0.3);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04) inset,
    0 0 60px rgba(96, 165, 250, 0.35),
    0 0 120px rgba(96, 165, 250, 0.18),
    0 40px 80px rgba(0, 0, 0, 0.6);
}
.mock-shell { display: grid; grid-template-columns: 56px 1fr; min-height: 460px; }
.mock-sidebar {
  background: #0c0c0e;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 0; gap: 16px;
}
.mock-sidebar .mock-icon {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-muted, #8a93ab);
  font-size: 16px;
}
.mock-sidebar .mock-icon.active { background: var(--accent-soft, rgba(37, 99, 235, 0.14)); color: var(--accent-2, #3b82f6); }
.mock-sidebar .mock-icon i { font-size: 16px; line-height: 1; }
.mock-main { padding: 20px 24px; }
.mock-topbar {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 18px;
}
.mock-topbar .t {
  color: var(--text-strong, #fff); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 8px;
}
.mock-topbar .t::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok, #22c55e); box-shadow: 0 0 10px var(--ok, #22c55e);
}
.mock-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.mock-stat {
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}
.mock-stat .v { font-size: 20px; font-weight: 700; color: var(--text-strong, #fff); }
.mock-stat .v.ok { color: var(--ok, #22c55e); }
.mock-stat .v.warn { color: var(--warn, #f59e0b); }
.mock-stat .l { font-size: 11px; color: var(--text-muted, #8a93ab); text-transform: uppercase; letter-spacing: 0.5px; }
.mock-chart {
  height: 180px;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.18), transparent 70%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden;
}
.mock-chart::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(90deg, transparent, rgba(96, 165, 250, 0.3), transparent);
  clip-path: polygon(0 80%, 8% 60%, 16% 70%, 24% 45%, 32% 55%, 40% 30%, 48% 40%, 56% 20%, 64% 35%, 72% 18%, 80% 28%, 88% 10%, 100% 22%, 100% 100%, 0 100%);
}
/* Required disclosure: the hero mock is illustrative, not a performance record. */
.mock-caption {
  margin: 14px auto 0;
  max-width: 640px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim, #5b5e68);
}

/* ── Section scaffolding ──────────────────────────────────────────────── */
.section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 100px 24px;
}
.section-eyebrow {
  text-align: center;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--accent-2, #3b82f6);
  font-weight: 600;
  margin: 0 0 12px;
}
.section h2 {
  font-family: "Inter", "Raleway", sans-serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.15;
  color: var(--text-strong, #fff);
  text-align: center;
  margin: 0 0 16px;
}
.section .sub {
  text-align: center;
  color: var(--text-muted, #8a93ab);
  font-size: 16px;
  max-width: 620px;
  margin: 0 auto 50px;
}

/* ── Features grid ────────────────────────────────────────────────────── */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.feature {
  padding: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 12px 40px rgba(96, 165, 250, 0.12);
}
.feature .icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(96, 165, 250, 0.2));
  border: 1px solid rgba(96, 165, 250, 0.3);
  color: #60a5fa;
  font-size: 22px;
  margin-bottom: 16px;
}
.feature .icon i { line-height: 1; }
.feature h3 {
  margin: 0 0 8px;
  font-family: "Inter", "Raleway", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-strong, #fff);
  letter-spacing: -0.2px;
}
.feature p { margin: 0; color: var(--text-muted, #8a93ab); font-size: 14px; line-height: 1.6; }

/* ── About ───────────────────────────────────────────────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
}
.about-grid .copy h2 { text-align: left; }
.about-grid .copy p { color: var(--text-muted, #8a93ab); font-size: 16px; margin: 0 0 14px; }
.about-grid .panel {
  padding: 30px;
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), transparent);
  border: 1px solid rgba(96, 165, 250, 0.2);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(96, 165, 250, 0.1);
}
.about-grid .panel ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.about-grid .panel li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 14.5px; color: var(--text, #e7eaf2);
}
.about-grid .panel li::before {
  content: "✓"; flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.15);
  color: var(--ok, #22c55e);
  font-size: 12px; font-weight: 700;
  margin-top: 1px;
}

/* ── Pricing ──────────────────────────────────────────────────────────── */
.billing-toggle {
  display: flex; justify-content: center; gap: 4px;
  width: max-content; margin: 0 auto 28px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
}
.billing-toggle button {
  appearance: none; border: 0; cursor: pointer;
  padding: 8px 18px;
  border-radius: 999px;
  background: transparent;
  color: var(--text-muted, #8a93ab);
  font: inherit; font-size: 14px; font-weight: 600;
}
.billing-toggle button.active {
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #ffffff;
}
.billing-toggle .save-tag {
  font-size: 11px; font-weight: 700;
  color: var(--ok, #22c55e);
  margin-left: 4px;
}
.billing-toggle button.active .save-tag { color: #d2fadf; }
.pricing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 980px;
  margin: 0 auto;
}
.price-card {
  padding: 32px 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  display: flex; flex-direction: column; gap: 18px;
  position: relative;
}
.price-card.featured {
  border-color: rgba(96, 165, 250, 0.5);
  background:
    linear-gradient(180deg, rgba(96, 165, 250, 0.12), rgba(37, 99, 235, 0.04)),
    rgba(255, 255, 255, 0.02);
  box-shadow: 0 0 40px rgba(96, 165, 250, 0.2);
}
.price-card .badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, #60a5fa, #2563eb);
  color: #ffffff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase;
}
.price-card h3 { margin: 0; font-size: 18px; font-weight: 700; color: var(--text-strong, #fff); }
.price-card .price { font-size: 40px; font-weight: 800; color: var(--text-strong, #fff); letter-spacing: -1px; }
.price-card .price small { font-size: 14px; font-weight: 500; color: var(--text-muted, #8a93ab); }
.price-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.price-card li { font-size: 14px; color: var(--text, #e7eaf2); display: flex; gap: 8px; align-items: flex-start; }
.price-card li::before { content: "✓"; color: var(--ok, #22c55e); font-weight: 700; }
.price-card .btn-primary, .price-card .btn-secondary, .price-card .btn-ghost { width: 100%; }

/* ── Intelligence: the flagship tier ──────────────────────────────────────
   The pricing grid is 3-up; this card opts out of the grid flow and stretches
   edge to edge below the trio. It is deliberately styled to OUTRANK the three
   standard plans (richer gradient, a gradient border, a violet glow, a crown
   badge and a "flagship" kicker) so it never reads as a lesser fourth card.
   A generous top margin sets it apart as its own, higher tier. It lays its
   rail (name, price, CTA) beside a two-column feature list, and collapses to a
   normal stacked card on mobile. */
.price-card-wide { grid-column: 1 / -1; }
.price-card.ai-premium {
  flex-direction: row;
  align-items: stretch;
  gap: 44px;
  margin-top: 40px;
  padding: 40px;
  border: 1px solid rgba(167, 139, 250, 0.35);
  border-radius: 22px;
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(167, 139, 250, 0.22), transparent 55%),
    radial-gradient(120% 160% at 100% 120%, rgba(96, 165, 250, 0.14), transparent 55%),
    linear-gradient(180deg, rgba(167, 139, 250, 0.10), rgba(99, 102, 241, 0.03)),
    rgba(255, 255, 255, 0.015);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 28px 80px rgba(124, 58, 237, 0.26),
    0 0 90px rgba(167, 139, 250, 0.15);
  overflow: visible;
}
/* Gradient border ring, always on, that gives the flagship its premium edge. */
.price-card.ai-premium::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(196, 181, 253, 0.85), rgba(96, 165, 250, 0.45) 48%, transparent 82%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
/* Premium badge: a crowned violet pill, a step above the blue "Most popular". */
.ai-premium .badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  top: -13px;
  padding: 5px 16px;
  background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 55%, #6d28d9 100%);
  box-shadow: 0 8px 22px rgba(124, 58, 237, 0.45);
}
.ai-premium .badge i { font-size: 13px; }

.ai-premium .pcw-rail {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-right: 44px;
  border-right: 1px solid rgba(167, 139, 250, 0.18);
}
.ai-premium .pcw-kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #c4b5fd;
}
.ai-premium .pcw-kicker i { font-size: 15px; }
.ai-premium .pcw-rail h3 { margin: 0 0 8px; font-size: 22px; }
.ai-premium .price { margin: 0; font-size: 52px; }
.ai-premium .price-term { margin: 4px 0 0; }
.ai-premium .pcw-tag {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted, #8a93ab);
}
.ai-premium .pcw-cta {
  margin-top: 24px;
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%) !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.14) inset !important;
}
.ai-premium .pcw-cta:hover {
  background: linear-gradient(135deg, #c4b5fd 0%, #8b5cf6 100%) !important;
  box-shadow: 0 14px 38px rgba(124, 58, 237, 0.6),
              0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
}
.ai-premium .pcw-trial {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim, #5b5e68);
}
.ai-premium .pcw-features {
  flex: 1 1 auto;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
  align-content: center;
}
.ai-premium .pcw-features li { font-size: 13.5px; line-height: 1.5; }
.ai-premium .pcw-features li::before { color: #a78bfa; }
/* Card-level legal fineprint: spans both feature columns, no checkmark, set
   off by a hairline so it reads as a disclaimer rather than a benefit. */
.ai-premium .pcw-features li.pcw-disclaimer {
  /* Override the check-list item's flex layout: the fineprint is a plain
     paragraph, so its text, the "Risk Disclosure" link, and the trailing period
     must flow inline as one sentence (flex was scattering the link + period to
     the right). */
  display: block;
  grid-column: 1 / -1;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid rgba(167, 139, 250, 0.18);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim, #5b5e68);
}
.ai-premium .pcw-features li.pcw-disclaimer::before { content: none; }
.ai-premium .pcw-features li.pcw-disclaimer a {
  display: inline;
  color: var(--accent, #a78bfa);
  text-decoration: underline;
  text-underline-offset: 2px;
}
:root[data-theme="light"] .ai-premium .pcw-features li.pcw-disclaimer { border-top-color: rgba(139, 92, 246, 0.22); }
@media (max-width: 980px) {
  .price-card.ai-premium { flex-direction: column; gap: 24px; padding: 32px 26px; }
  .ai-premium .pcw-rail {
    flex-basis: auto;
    padding-right: 0;
    padding-bottom: 24px;
    border-right: none;
    border-bottom: 1px solid rgba(167, 139, 250, 0.18);
  }
  .ai-premium .price { font-size: 46px; }
  .ai-premium .pcw-features { grid-template-columns: 1fr; }
}

/* ── Blog ─────────────────────────────────────────────────────────────── */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.blog-card {
  padding: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 16px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.blog-card:hover { transform: translateY(-3px); border-color: rgba(96, 165, 250, 0.3); }
.blog-card .thumb {
  height: 140px;
  background:
    radial-gradient(circle at 30% 50%, rgba(96, 165, 250, 0.3), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.3), transparent 60%),
    #0c0c0e;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.blog-card .body { padding: 20px 22px; }
.blog-card .tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent-soft, rgba(37, 99, 235, 0.14));
  color: var(--accent-2, #3b82f6);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.blog-card h3 {
  margin: 0 0 8px;
  font-size: 16px; font-weight: 700;
  color: var(--text-strong, #fff);
  letter-spacing: -0.2px;
}
.blog-card p { margin: 0; color: var(--text-muted, #8a93ab); font-size: 13.5px; }

/* ── CTA block ────────────────────────────────────────────────────────── */
.cta-block {
  max-width: 980px;
  margin: 0 auto;
  padding: 60px 40px;
  background:
    radial-gradient(circle at 30% 50%, rgba(96, 165, 250, 0.25), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.2), transparent 60%),
    rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(96, 165, 250, 0.3);
  border-radius: 24px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(96, 165, 250, 0.15);
}
.cta-block h2 { margin: 0 0 14px; }
.cta-block p { color: var(--text-muted, #8a93ab); margin: 0 0 28px; }

/* ── Footer ───────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 50px 24px 40px;
  color: var(--text-dim, #5b6480);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 60px;
}
.site-footer small {
  font-size: 13px;
  /* Lay the copyright + links out as flex pills so a middot separator and
     consistent spacing render between EVERY pair, regardless of how many
     links the page chooses to include. */
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 6px 14px;
  line-height: 1.6;
}
.site-footer small > a {
  color: var(--text-muted, #8a93ab);
  text-decoration: none;
  position: relative;
  /* Reset the legacy margin that used to space links from inline middots. */
  margin: 0;
}
.site-footer small > a:hover { color: var(--text-strong, #fff); }
/* Middot separator drawn before each link via a pseudo-element. */
.site-footer small > a::before {
  content: "·";
  display: inline-block;
  margin-right: 14px;
  color: var(--text-dim, #5b6480);
  pointer-events: none;
}
/* Hidden Discord slot must not paint a leading middot until the link is
   revealed by site-discord.js. */
.site-footer small > a[hidden]::before { content: none; }

/* Non-affiliation / trademark line: a separate full-width block under the
   footer links (overrides the inline-flex link row above). */
.site-footer .footer-disclaimer {
  display: block;
  max-width: 760px;
  margin: 16px auto 0;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim, #5b6480);
}
.site-footer .footer-disclaimer > a { color: var(--text-muted, #8a93ab); text-decoration: underline; }

/* ── Signup consent (clickwrap) + checkout disclosure ─────────────────────
   The consent label opts out of the uppercase .auth-card label styling, and
   its checkbox opts out of the full-width text-input styling. */
.auth-card label.signup-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 6px 0;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-muted, #8a93ab);
  line-height: 1.5;
  cursor: pointer;
}
.auth-card label.signup-consent input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  flex: 0 0 auto;
  width: 16px !important;
  height: 16px !important;
  min-height: 0 !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  accent-color: var(--accent, #2563eb);
  cursor: pointer;
}
.auth-card label.signup-consent a { color: var(--accent-2, #3b82f6); text-decoration: underline; }
.checkout-disclosure {
  margin: 4px 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 10px;
  background: rgba(96, 165, 250, 0.08);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text, #e7eaf2);
}

/* ── Theme toggle (kept compatible) ───────────────────────────────────── */
.theme-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted, #8a93ab);
  cursor: pointer;
  font-style: normal;
}
.theme-toggle:hover { color: var(--text-strong, #fff); background: rgba(255, 255, 255, 0.04); }
[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* ── Auth pages (login / signup / 404) ────────────────────────────────── */
body.auth-page,
body.marketing.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
}
.auth-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 34px 36px;
  backdrop-filter: blur(10px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5),
              0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.auth-card .site-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: 18px;
  color: var(--text-strong, #fff);
}
.auth-card h1 {
  font-family: "Inter", "Raleway", sans-serif;
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 22px;
  color: var(--text-strong, #fff);
  letter-spacing: -0.4px;
}
.auth-card form { display: flex; flex-direction: column; gap: 14px; }
.auth-card label {
  display: flex; flex-direction: column;
  font-size: 11px;
  color: var(--text-muted, #8a93ab);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 6px;
}
.auth-card input {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text, #e7eaf2);
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(17, 17, 20, 0.6);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.auth-card input:focus {
  outline: none;
  border-color: var(--accent-2, #3b82f6);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.auth-card .hint {
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted, #8a93ab);
}
.auth-card button[type="submit"] { margin-top: 6px; }
.auth-alt { text-align: center; font-size: 13.5px; color: var(--text-muted, #8a93ab); margin: 16px 0 0; }
.form-error {
  margin: 4px 0 0;
  padding: 10px 12px;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #fca5a5;
  font-size: 13px;
}

/* ── Light theme overrides for marketing components ───────────────────── */
:root[data-theme="light"] body.marketing { color: var(--text); }

:root[data-theme="light"] .site-header {
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.10),
              0 0 0 1px rgba(15, 23, 42, 0.02) inset;
}
:root[data-theme="light"] .site-nav-center a:hover { background: rgba(15, 23, 42, 0.05); color: var(--text-strong); }

:root[data-theme="light"] .btn-ghost {
  color: var(--text-strong);
  border-color: rgba(15, 23, 42, 0.15);
}
:root[data-theme="light"] .btn-ghost:hover { background: rgba(15, 23, 42, 0.04); }

:root[data-theme="light"] .btn-secondary {
  background: #0b1024;
  color: #fff;
}
:root[data-theme="light"] .btn-secondary:hover { background: #1a2342; color: #fff; }

:root[data-theme="light"] .trust-pill {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
  color: var(--text-muted);
}
:root[data-theme="light"] .trust-pill .avatars span { border-color: #f4f6fb; }

:root[data-theme="light"] .hero::before {
  background:
    radial-gradient(circle at 50% 30%, rgba(96, 165, 250, 0.18), transparent 55%),
    radial-gradient(circle at 30% 60%, rgba(37, 99, 235, 0.12), transparent 55%);
}

:root[data-theme="light"] .hero-mock-frame {
  background: linear-gradient(180deg, #141518 0%, #0a0a0c 100%);
  border-color: rgba(96, 165, 250, 0.4);
  box-shadow:
    0 0 60px rgba(96, 165, 250, 0.25),
    0 40px 80px rgba(15, 23, 42, 0.25);
}

:root[data-theme="light"] .feature,
:root[data-theme="light"] .blog-card,
:root[data-theme="light"] .price-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
:root[data-theme="light"] .feature:hover,
:root[data-theme="light"] .blog-card:hover {
  border-color: rgba(37, 99, 235, 0.3);
  box-shadow: 0 12px 40px rgba(37, 99, 235, 0.1);
}
:root[data-theme="light"] .feature p,
:root[data-theme="light"] .blog-card p {
  color: var(--text-muted);
}
:root[data-theme="light"] .blog-card .thumb { background: linear-gradient(135deg, #dbeafe 0%, #eff6ff 100%); border-bottom-color: rgba(15, 23, 42, 0.08); }

:root[data-theme="light"] .price-card.featured {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.08), #ffffff);
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 20px 50px rgba(96, 165, 250, 0.15);
}
:root[data-theme="light"] .price-card li { color: var(--text); }

/* Keep the flagship premium in light mode (the generic light .price-card rule
   above would otherwise flatten it to plain white). */
:root[data-theme="light"] .price-card.ai-premium {
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(139, 92, 246, 0.12), transparent 55%),
    radial-gradient(120% 160% at 100% 120%, rgba(37, 99, 235, 0.07), transparent 55%),
    linear-gradient(180deg, rgba(139, 92, 246, 0.07), #ffffff);
  border-color: rgba(139, 92, 246, 0.4);
  box-shadow: 0 28px 70px rgba(124, 58, 237, 0.16);
}
:root[data-theme="light"] .ai-premium .pcw-rail { border-right-color: rgba(139, 92, 246, 0.22); }
:root[data-theme="light"] .ai-premium .pcw-kicker { color: #7c3aed; }
:root[data-theme="light"] .ai-premium .pcw-features li::before { color: #7c3aed; }
@media (max-width: 980px) {
  :root[data-theme="light"] .ai-premium .pcw-rail { border-bottom-color: rgba(139, 92, 246, 0.22); }
}

:root[data-theme="light"] .about-grid .panel {
  background: linear-gradient(180deg, rgba(96, 165, 250, 0.06), #ffffff);
  border-color: rgba(96, 165, 250, 0.25);
}
:root[data-theme="light"] .about-grid .panel li { color: var(--text); }

:root[data-theme="light"] .cta-block {
  background:
    radial-gradient(circle at 30% 50%, rgba(96, 165, 250, 0.18), transparent 60%),
    radial-gradient(circle at 70% 50%, rgba(37, 99, 235, 0.14), transparent 60%),
    #ffffff;
  border-color: rgba(96, 165, 250, 0.35);
  box-shadow: 0 30px 80px rgba(96, 165, 250, 0.12);
}

:root[data-theme="light"] .site-footer {
  border-top-color: rgba(15, 23, 42, 0.08);
  color: var(--text-dim);
}

:root[data-theme="light"] .auth-card {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.08);
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.12);
}
:root[data-theme="light"] .auth-card input {
  background: #ffffff;
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text);
}
:root[data-theme="light"] .auth-card input:focus {
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
:root[data-theme="light"] .form-error {
  background: #fef2f2;
  border-color: #fecaca;
  color: #991b1b;
}

:root[data-theme="light"] .theme-toggle {
  border-color: rgba(15, 23, 42, 0.12);
  color: var(--text-muted);
}
:root[data-theme="light"] .theme-toggle:hover { background: rgba(15, 23, 42, 0.04); color: var(--text-strong); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* Keep the page nav on phones: wrap it onto a second row of the pill
     instead of hiding it (it scrolls sideways if it still doesn't fit). */
  .site-header { flex-wrap: wrap; border-radius: 24px; row-gap: 2px; }
  .site-nav-center {
    order: 3;
    flex: 1 1 100%;
    justify-content: center;
    gap: 2px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .site-nav-center::-webkit-scrollbar { display: none; }
  .site-nav-center a { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
  .hero-mock-frame { transform: none; }
  .about-grid { grid-template-columns: 1fr; gap: 30px; }
  .pricing { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .site-header { top: 10px; margin: 10px 14px 0; padding: 8px 10px 8px 16px; }
  .site-brand span { display: none; }
  .hero { margin-top: 60px; padding: 0 18px; }
  .section { padding: 60px 18px; }
  .mock-stats { grid-template-columns: repeat(2, 1fr); }
  .cta-block { padding: 40px 22px; }
}

/* ── Legal pages (Terms, Privacy, Risk) ────────────────────────────────── */
.legal-page {
  max-width: 780px;
  margin: 60px auto 80px;
  padding: 0 24px;
  color: var(--text, #e7eaf2);
}
.legal-page h1 {
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--text-strong, #fff);
  margin: 0 0 8px;
}
.legal-page h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-strong, #fff);
  margin: 32px 0 10px;
  letter-spacing: -0.2px;
}
.legal-page p, .legal-page li {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text, #e7eaf2);
}
.legal-page ul { padding-left: 22px; margin: 8px 0 14px; }
.legal-page li { margin-bottom: 6px; }
.legal-page p .hint, .legal-page .hint { color: var(--text-muted, #8a93ab); font-size: 13.5px; }
.legal-page a { color: var(--accent-2, #3b82f6); text-decoration: underline; text-underline-offset: 2px; }

/* ── Account settings page ─────────────────────────────────────────────── */
.settings-page {
  max-width: 960px;
  margin: 60px auto 80px;
  padding: 0 24px;
}
.settings-page > h1 {
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-strong, #fff);
  margin: 0 0 4px;
}
/* Glass panel (Showroom skin): matches the dashboard's .card treatment,
   with the accent light-streak across the top edge. */
.settings-card {
  position: relative;
  overflow: hidden;
  background: var(--glass-bg, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--glass-line, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 24px 26px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-card, none);
}
.settings-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent-glow, rgba(37, 99, 235, 0.4)), transparent);
  opacity: 0.55;
  pointer-events: none;
}
.settings-card h2 {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-strong, #fff);
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Icon chip: rounded accent-tinted square, same vocabulary as the dashboard. */
.settings-card h2 .bx {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
  color: var(--accent-2, #3b82f6);
  font-size: 17px;
}
.settings-card p, .settings-card label, .settings-card dt, .settings-card dd { font-size: 14px; }
.settings-card form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.settings-card label {
  display: flex; flex-direction: column;
  font-size: 11px;
  color: var(--text-muted, #8a93ab);
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  gap: 6px;
}
.settings-card input {
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text, #e7eaf2);
  padding: 10px 12px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: var(--bg-input, rgba(17, 17, 20, 0.6));
}
.settings-card input:focus {
  outline: none;
  border-color: var(--accent-2, #3b82f6);
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15);
}
.settings-card .hint {
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-muted, #8a93ab);
}
.settings-kv {
  display: grid;
  /* minmax(0,1fr): a plain 1fr track refuses to shrink below the value's
     min-content, so long unbreakable emails pushed the card wider than the
     viewport on phones. */
  grid-template-columns: 130px minmax(0, 1fr);
  gap: 6px 14px;
  margin: 4px 0 12px;
}
.settings-kv dt { color: var(--text-muted, #8a93ab); font-weight: 600; }
.settings-kv dd { color: var(--text, #e7eaf2); margin: 0; overflow-wrap: anywhere; }
.settings-card.danger-card { border-color: rgba(239, 68, 68, 0.3); }
.settings-card.danger-card h2 .bx {
  color: var(--danger, #ef4444);
  background: var(--danger-soft, rgba(239, 68, 68, 0.14));
}

/* ── Account settings: sidebar-rail layout ─────────────────────────────────
 * The settings content is split into panels (Profile / Security / Notifications
 * / Billing / Danger). A sticky left rail switches panels via settingsNav() so
 * only one group shows at a time, no more long vertical scroll. On narrow
 * screens the rail collapses to a horizontal, scrollable pill bar above the
 * content (mirrors .sd-tabs in trader.css).
 * ========================================================================== */
.settings-layout {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 24px;
}
.settings-rail {
  position: sticky;
  top: 90px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
  background: var(--bg-elev-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 14px;
  box-shadow: var(--shadow-card, none);
}
.settings-rail-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-muted, #8a93ab);
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.settings-rail-item .bx { font-size: 18px; flex: 0 0 auto; }
.settings-rail-item:hover { color: var(--text-strong, #fff); background: rgba(255, 255, 255, 0.04); }
.settings-rail-item.active {
  color: var(--accent-2, #3b82f6);
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
}
.settings-rail-item.danger:hover { color: var(--danger, #ef4444); }
.settings-rail-item.danger.active { color: var(--danger, #ef4444); background: rgba(239, 68, 68, 0.12); }

/* padding must be zeroed: the panels are <section> elements, and the app
   chrome's core/style.css gives every bare section 60px vertical padding,
   which opened a dead band between the rail and the first card. */
.settings-panel { display: none; padding: 0; }
.settings-panel.active { display: block; }
/* Last card in a panel shouldn't add trailing space. */
.settings-panel > .settings-card:last-child { margin-bottom: 0; }

/* Two-up cards within a panel on wide screens (e.g. username + email). */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}
.settings-grid .settings-card { margin-bottom: 0; }

:root[data-theme="light"] .settings-rail { background: var(--bg-elev-1, #fff); border-color: var(--line, rgba(15, 23, 42, 0.10)); }
:root[data-theme="light"] .settings-rail-item:hover { background: rgba(15, 23, 42, 0.05); }

/* ── Settings profile hero ────────────────────────────────────────────────
 * Who is signed in + plan + jump back to the app. Mirrors the dashboard's
 * card vocabulary (elevated surface, accent chips) so the two feel like one
 * product. Filled by init() from /api/me. */
.settings-hero {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--bg-elev-1, rgba(255, 255, 255, 0.03));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  box-shadow: var(--shadow-card, none);
}
.settings-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--accent-grad, linear-gradient(135deg, #60a5fa, #2563eb));
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0;
  box-shadow: 0 4px 14px var(--accent-glow, rgba(37, 99, 235, 0.35));
}
.settings-hero-id { flex: 1 1 220px; min-width: 0; }
.settings-hero-id h1 {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-strong, #fff);
  margin: 0;
  overflow-wrap: anywhere;
}
.settings-hero-id p {
  margin: 2px 0 0;
  font-size: 13.5px;
  color: var(--text-muted, #8a93ab);
  overflow-wrap: anywhere;
}
.settings-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.settings-plan-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: var(--bg-elev-2, rgba(255, 255, 255, 0.06));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  color: var(--text-muted, #8a93ab);
}
.settings-plan-pill.is-paid {
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
  border-color: var(--accent, #2563eb);
  color: var(--accent-2, #3b82f6);
}

/* ── Appearance panel controls (theme buttons + accent swatches) ────────── */
.ap-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ap-choice {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 10px;
  background: var(--bg-elev-2, rgba(255, 255, 255, 0.05));
  color: var(--text, #e7eaf2);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ap-choice:hover { border-color: var(--line-strong, rgba(255, 255, 255, 0.2)); }
.ap-choice.active {
  border-color: var(--accent, #2563eb);
  background: var(--accent-soft, rgba(59, 130, 246, 0.12));
  color: var(--accent-2, #3b82f6);
}
.ap-swatches { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.ap-swatch {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--sw, #2563eb);
  cursor: pointer;
  position: relative;
  padding: 0;
}
.ap-swatch:hover { border-color: var(--line-strong, rgba(255, 255, 255, 0.3)); }
.ap-swatch.active { border-color: var(--text-strong, #fff); }
.ap-swatch.active::after {
  content: "\2713";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 780px) {
  /* minmax(0,1fr), not 1fr: the rail/panel min-content otherwise blows the
     single track out past the viewport and the right edge gets clipped. */
  .settings-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* Tab bar: wrap into as many rows as needed so every section (Billing,
     Danger zone) stays visible and tappable. The old single-row horizontal
     scroll hid the last tabs behind an invisible scroll edge. */
  .settings-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px;
  }
  .settings-rail-item {
    width: auto;
    white-space: nowrap;
    padding: 9px 12px;
    flex: 1 1 auto;
    justify-content: center;
  }
}

/* ── Mobile hardening (image + text overflow) ─────────────────────────────
 * Content images were squishing / overflowing and the hero headline's
 * hyphenated phrase ("prop-firm-safe") could push past the viewport on
 * narrow phones, cutting text off. These rules keep everything within the
 * viewport. The brand logo opts out via its own !important sizing.
 * ========================================================================= */
img { max-width: 100%; height: auto; }
.hero h1 { overflow-wrap: break-word; word-break: break-word; }

@media (max-width: 640px) {
  /* Let the gradient phrase wrap with the rest of the headline instead of
     forcing a single unbreakable line. */
  .hero h1 .grad { white-space: normal; }
}

@media (max-width: 480px) {
  .hero { margin-top: 48px; padding: 0 16px; }
  .hero h1 { letter-spacing: -0.8px; }
  .hero .lede { font-size: 15.5px; }
  .hero-actions { gap: 10px; margin-bottom: 48px; }
  .hero-actions .btn-primary,
  .hero-actions .btn-secondary { flex: 1 1 auto; text-align: center; }
  .hero-mock { padding: 0 12px; }
  .mock-shell { min-height: 340px; grid-template-columns: 44px 1fr; }
  .mock-stats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .section { padding: 48px 16px; }
}

/* =========================================================================
 * Jargon glossary tooltips. Mirrors the dashboard's .gloss styling (see
 * assets/css/trader/trader.css) so a data-gloss term hovers identically on
 * the marketing site and the /learn hub. Definitions come from
 * assets/js/glossary.js via initGlossary().
 * ========================================================================= */
.gloss { position: relative; cursor: help; outline: none; }
i.bx.gloss { color: var(--text-dim, #5b5e68); font-size: 14px; vertical-align: -1px; transition: color .12s; }
i.bx.gloss:hover, i.bx.gloss:focus { color: var(--accent-2, #3b82f6); }
.gloss::after {
  content: attr(data-tip);
  position: absolute; left: 0; top: calc(100% + 7px); z-index: 50;
  width: max-content; max-width: 260px; padding: 9px 11px;
  background: var(--bg-elev-2, #1c1d21); color: var(--text, #e7eaf2);
  border: 1px solid var(--line, #26272d); border-radius: 8px;
  font-size: 12px; line-height: 1.5; font-weight: 400; text-transform: none; letter-spacing: normal;
  white-space: normal; text-align: left;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  opacity: 0; visibility: hidden; transform: translateY(-3px);
  transition: opacity .12s ease, transform .12s ease; pointer-events: none;
}
.gloss:hover::after, .gloss:focus::after { opacity: 1; visibility: visible; transform: translateY(0); }
.gloss.gloss-right::after { left: auto; right: 0; }
/* A term written out as text (not an icon) gets a subtle dotted underline so
 * readers know it's hoverable. Used on /learn and inside the beginner band. */
.gloss-term { border-bottom: 1px dashed var(--line-strong, #343640); cursor: help; }
.gloss-term:hover, .gloss-term:focus { border-bottom-color: var(--accent-2, #3b82f6); }

/* =========================================================================
 * "New to trading?" beginner band on the landing page.
 * ========================================================================= */
.beginner .beginner-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.beginner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.beginner-card {
  background: var(--bg-elev-1, #141518);
  border: 1px solid var(--line, #26272d);
  border-radius: 14px;
  padding: 22px 22px 20px;
  text-align: left;
}
.beginner-card .bc-icon {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 14px;
  background: var(--accent-soft, rgba(37, 99, 235, 0.14));
  color: var(--accent-2, #3b82f6); font-size: 22px;
}
.beginner-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--text-strong, #fff); }
.beginner-card p { margin: 0; color: var(--text-muted, #8b8e97); font-size: 14px; line-height: 1.6; }
.beginner-card p strong { color: var(--text, #e7eaf2); font-weight: 600; }
.beginner-cta { text-align: center; }
.beginner-cta .muted { color: var(--text-muted, #8b8e97); font-size: 13px; margin-top: 12px; }

/* =========================================================================
 * /learn hub: Trading 101 cards + searchable glossary.
 * ========================================================================= */
.learn-hero { max-width: 760px; margin: 110px auto 10px; text-align: center; padding: 0 20px; }
.learn-hero h1 { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -1px; }
.learn-hero p { color: var(--text-muted, #8b8e97); font-size: 17px; margin: 0; }

.l101-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}
.l101-card {
  background: var(--bg-elev-1, #141518);
  border: 1px solid var(--line, #26272d);
  border-radius: 14px;
  padding: 24px;
}
.l101-card .step {
  font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--accent-2, #3b82f6); margin-bottom: 10px; display: block;
}
.l101-card h3 { margin: 0 0 10px; font-size: 18px; color: var(--text-strong, #fff); }
.l101-card p { margin: 0 0 10px; color: var(--text-muted, #8b8e97); font-size: 14.5px; line-height: 1.65; }
.l101-card p:last-child { margin-bottom: 0; }

/* "How to use TradeByBar" step-by-step walkthrough (numbered vertical list). */
.learn-jump { text-align: center; margin: 0 0 6px; font-size: 14px; color: var(--text-muted, #8b8e97); }
.learn-jump a { color: var(--accent-2, #3b82f6); text-decoration: none; font-weight: 600; }
.learn-jump a:hover { text-decoration: underline; }
.walkthrough { max-width: 820px; margin: 0 auto; list-style: none; padding: 0; counter-reset: wt; display: flex; flex-direction: column; gap: 14px; }
.wt-step {
  position: relative;
  background: var(--bg-elev-1, #141518);
  border: 1px solid var(--line, #26272d);
  border-radius: 14px;
  padding: 20px 22px 20px 66px;
}
.wt-step::before {
  counter-increment: wt; content: counter(wt);
  position: absolute; left: 20px; top: 20px;
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-2, #3b82f6); color: #fff; font-weight: 700; font-size: 15px;
}
.wt-step h3 { margin: 0 0 6px; font-size: 17px; color: var(--text-strong, #fff); }
.wt-step p { margin: 0; color: var(--text-muted, #8b8e97); font-size: 14.5px; line-height: 1.65; }
.wt-step p + p { margin-top: 8px; }
.wt-where {
  display: inline-block; margin-top: 12px;
  font-size: 12px; font-weight: 600; color: var(--accent-2, #3b82f6);
  background: var(--bg-elev-2, #1a1b1f); border: 1px solid var(--line, #26272d);
  border-radius: 999px; padding: 4px 11px;
}
.wt-cta { text-align: center; margin: 26px auto 0; }

.glossary-tools { max-width: 720px; margin: 0 auto 26px; }
.glossary-search {
  width: 100%; padding: 13px 16px; font-size: 15px;
  background: var(--bg-input, #111114); color: var(--text, #e7eaf2);
  border: 1px solid var(--line, #26272d); border-radius: 11px; outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.glossary-search:focus { border-color: var(--accent-2, #3b82f6); box-shadow: var(--ring, 0 0 0 3px rgba(37,99,235,.14)); }
.glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.glossary-entry {
  background: var(--bg-elev-1, #141518);
  border: 1px solid var(--line, #26272d);
  border-radius: 12px; padding: 16px 18px;
}
.glossary-entry dt { font-weight: 700; color: var(--text-strong, #fff); margin: 0 0 6px; font-size: 15px; }
.glossary-entry dd { margin: 0; color: var(--text-muted, #8b8e97); font-size: 13.5px; line-height: 1.6; }
.glossary-empty { text-align: center; color: var(--text-muted, #8b8e97); padding: 30px; grid-column: 1 / -1; }

@media (max-width: 480px) {
  .beginner-grid { grid-template-columns: 1fr; }
  .glossary-list { grid-template-columns: 1fr; }
}

/* AI intelligence strip in the hero mockup (matches the dashboard read-out). */
.mock-ai {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px; font-size: 12px;
}
.mock-ai-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent, #60a5fa); box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.18);
}
.mock-ai-label { font-weight: 700; color: var(--text-strong, #fff); display: inline-flex; align-items: center; gap: 5px; }
.mock-ai-chip {
  padding: 2px 8px; border-radius: 999px; font-weight: 600;
  background: rgba(34, 197, 94, 0.12); color: var(--ok, #22c55e); border: 1px solid rgba(34, 197, 94, 0.25);
}
.mock-ai-chip.alt { background: rgba(96, 165, 250, 0.12); color: var(--accent, #60a5fa); border-color: rgba(96, 165, 250, 0.25); }

/* ════════════════════════════════════════════════════════════════════════
   Mobile polish (marketing / auth / legal / settings). Appended at EOF so it
   wins on source order. Notably the auth-card zoom fix must beat the 14px
   !important rule above. Desktop is unaffected.
   ════════════════════════════════════════════════════════════════════════ */
/* Long inline code (e.g. SameSite=Lax, tbb_tut_seen_*) must wrap, not overflow. */
code { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  /* Stop iOS auto-zoom on focus: bump auth / glossary / settings fields to 16px. */
  .auth-card input, .auth-card select, .auth-card textarea,
  .glossary-search,
  .settings-card input, .settings-card select, .settings-card textarea {
    font-size: 16px !important;
  }
}

@media (max-width: 640px) {
  /* Settings page hero: avatar + identity share the first row, the actions
     take a full-width row beneath. The identity block's flex-basis must
     reset to auto here: the desktop 220px basis turns into HEIGHT when the
     hero wraps/stacks, which opened a huge blank gap inside the card. */
  .settings-hero { align-items: center; gap: 12px 14px; padding: 18px; }
  .settings-hero-id { flex: 1 1 auto; }
  .settings-hero-actions { width: 100%; }
  .settings-hero-actions .btn-secondary-sm,
  .settings-hero-actions .btn-secondary {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .settings-kv { grid-template-columns: 96px minmax(0, 1fr); gap: 4px 10px; }
  .settings-grid { grid-template-columns: 1fr; gap: 14px; }
  .settings-card { padding: 18px; }
  .settings-page { padding: 0 18px; }
  /* Legal pages: a touch more breathing room and shorter top margin on phones. */
  .legal-page { padding: 0 18px; margin: 40px auto 60px; }
}

@media (max-width: 500px) {
  /* Auth + pricing cards: trim the generous desktop padding on small phones. */
  body.auth-page { padding: 18px; }
  .auth-card { padding: 24px 20px; }
  .auth-card h1 { font-size: 22px; }
  .price-card { padding: 22px 18px; }
}