/* redesign-shell.css — the shared PREMIUM shell for the generated content pages
   (/gex/* tickers, /* concept + comparison guides) and any page that opts in.
   Brings them to the homepage tier: a sticky animated header, a real multi-column
   footer, and reveal-on-scroll motion — one system, consistent everywhere.

   SELF-CONTAINED palette (--rs-* tokens below) so the shell can drop onto ANY page
   — the generated /gex + /guides pages, the redesign-* marketing pages, AND the
   landing-2026 family — without depending on or clashing with that page's own
   tokens. CSP-safe: motion is the external redesign-reveal.js promoting
   [data-reveal] -> .is-in, gated by `html.js` (set by the allow-listed inline boot
   script). No inline styles. Respects prefers-reduced-motion. 2026-08-21 uplift. */

:root {
  --rs-bg: #0b0805; --rs-bg-top: #120d08; --rs-panel: #18130c; --rs-panel-2: #1e1811;
  --rs-line: #26221b; --rs-ink: #ecedef; --rs-muted: #9c9fa8;
  --rs-accent: #c8a878; --rs-accent-2: #e0c79a; --rs-gold-ink: #1a1408;
}

/* ---- Reveal-on-scroll (pre-hidden behind html.js, revealed by JS) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }
html.js .grid > [data-reveal]:nth-child(2).is-in { transition-delay: .06s; }
html.js .grid > [data-reveal]:nth-child(3).is-in { transition-delay: .12s; }
html.js .grid > [data-reveal]:nth-child(4).is-in { transition-delay: .18s; }
html.js .grid > [data-reveal]:nth-child(5).is-in { transition-delay: .24s; }
html.js .grid > [data-reveal]:nth-child(6).is-in { transition-delay: .30s; }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ---- Top strip ------------------------------------------------------------- */
.rs-topstrip {
  background: linear-gradient(90deg, rgba(200,168,120,.10), rgba(200,168,120,.03));
  border-bottom: 1px solid var(--rs-line);
  font-size: 12.5px;
  color: var(--rs-muted);
}
.rs-topstrip__inner {
  max-width: 1120px; margin: 0 auto; padding: 7px 22px;
  display: flex; gap: 10px; align-items: center; justify-content: center;
  flex-wrap: wrap; text-align: center;
}
.rs-dot { color: var(--rs-accent); }
.rs-sep { color: var(--rs-line); }
@media (max-width: 620px) { .rs-topstrip { display: none; } }

/* ---- Sticky header --------------------------------------------------------- */
.rs-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(11,8,5,.82);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--rs-line);
}
.rs-nav__inner {
  max-width: 1120px; margin: 0 auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 18px;
}
.rs-nav__brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 16px; color: #fff; text-decoration: none;
  letter-spacing: -0.01em; flex: none;
}
.rs-nav__brand img { border-radius: 7px; }
.rs-nav__links {
  display: flex; align-items: center; gap: 4px;
  margin-left: 6px; flex: 1 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.rs-nav__links::-webkit-scrollbar { display: none; }
.rs-nav__links a {
  color: var(--rs-muted); text-decoration: none; font-size: 14px; font-weight: 600;
  padding: 7px 11px; border-radius: 9px; white-space: nowrap;
  transition: color .15s ease, background .15s ease;
}
.rs-nav__links a:hover { color: var(--rs-ink); background: rgba(255,255,255,.05); }
.rs-nav__cta { display: flex; align-items: center; gap: 10px; flex: none; margin-left: auto; }
.rs-nav__signin { color: var(--rs-accent-2); text-decoration: none; font-size: 14px; font-weight: 650; white-space: nowrap; }
.rs-nav__signin:hover { color: #fff; }
.rs-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 750; font-size: 14px; text-decoration: none; white-space: nowrap;
  padding: 9px 16px; border-radius: 11px; border: 1px solid transparent;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.rs-btn--primary {
  background: linear-gradient(180deg, var(--rs-accent-2), var(--rs-accent));
  color: var(--rs-gold-ink); box-shadow: 0 6px 18px rgba(200,168,120,.22);
}
.rs-btn--primary:hover { transform: translateY(-1px); box-shadow: 0 9px 24px rgba(200,168,120,.30); }
@media (max-width: 760px) {
  .rs-nav__inner { gap: 12px; padding: 11px 16px; }
  .rs-nav__links { order: 3; flex-basis: 100%; margin: 4px -16px -4px; padding: 2px 16px 4px; }
  .rs-nav__cta { margin-left: auto; }
  .rs-nav__signin { display: none; }
}

/* ---- Footer ---------------------------------------------------------------- */
.rs-footer { border-top: 1px solid var(--rs-line); background: var(--rs-bg-top); margin-top: 64px; }
.rs-footer__inner {
  max-width: 1120px; margin: 0 auto; padding: 44px 22px 26px;
  display: grid; gap: 28px 40px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
@media (max-width: 780px) { .rs-footer__inner { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .rs-footer__inner { grid-template-columns: 1fr; } }
.rs-footer__brand { display: flex; flex-direction: column; gap: 10px; }
.rs-footer__brand-row { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; color: #fff; font-size: 16px; }
.rs-footer__brand-row img { border-radius: 7px; }
.rs-footer__blurb { margin: 0; font-size: 13px; line-height: 1.6; color: var(--rs-muted); max-width: 34ch; }
.rs-footer__col h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rs-accent); }
.rs-footer__col a { display: block; color: var(--rs-muted); text-decoration: none; font-size: 14px; padding: 4px 0; transition: color .15s ease; }
.rs-footer__col a:hover { color: var(--rs-ink); }
.rs-footer__base {
  border-top: 1px solid var(--rs-line); max-width: 1120px; margin: 0 auto;
  padding: 18px 22px; font-size: 12px; line-height: 1.6; color: #8e9199; text-align: center;
}

/* ---- Section polish for the content shell --------------------------------- */
.shell > section { scroll-margin-top: 84px; }
.hero { position: relative; }
.hero::after {
  content: ""; position: absolute; inset: -40% 30% auto; height: 340px; z-index: -1;
  background: radial-gradient(60% 60% at 50% 0%, rgba(200,168,120,.12), transparent 70%);
  pointer-events: none;
}

/* ===== GEX THEMES (GENERATED - do not edit, run scripts/gen-themes.py) ===== */
/* -- theme dark -- */
html[data-theme="dark"] { --rs-bg: #000000; --rs-bg-top: #050506; --rs-panel: #0a0b0d; --rs-panel-2: #101114; --rs-line: #1b1d22; --rs-ink: #e8edf2; --rs-muted: #8f97a3; --rs-gold-ink: #050506; }
html[data-theme="dark"] .rs-nav { background: rgba(0, 0, 0, .82); }
/* -- theme white -- */
html[data-theme="white"] { --rs-bg: #faf8f4; --rs-bg-top: #f4f0e8; --rs-panel: #ffffff; --rs-panel-2: #f7f3ec; --rs-line: #e3dccd; --rs-ink: #211d16; --rs-muted: #6c675d; --rs-accent: #9a7434; --rs-accent-2: #b08a45; --rs-gold-ink: #fdfbf7; }
html[data-theme="white"] .rs-topstrip { background: linear-gradient(90deg, rgba(154, 116, 52, .10), rgba(154, 116, 52, .03)); }
html[data-theme="white"] .rs-nav { background: rgba(250, 248, 244, .82); }
html[data-theme="white"] .rs-nav__brand { color: #211d16; }
html[data-theme="white"] .rs-nav__signin:hover { color: #211d16; }
html[data-theme="white"] .rs-footer__brand-row { color: #211d16; }
html[data-theme="white"] .rs-footer__base { color: #63666d; }
html[data-theme="white"] .hero::after { background: radial-gradient(60% 60% at 50% 0%, rgba(154, 116, 52, .12), transparent 70%); }
/* ===== END GEX THEMES ===== */