/*
  Trade Ideas — Shared Marketing Theme (SITE-1421)
  ---------------------------------------------------
  Design tokens + reusable components extracted from the CEO's Grok-generated
  redesign prototypes (ai-signals, oddsmaker, data-difference, how-it-helps,
  brokers, trading-desk, ti-pro-download, billing-policies, index).

  Namespaced with --ti- / .ti- so this never collides with Bootstrap's --bs-*
  vars or the legacy .btn-primary overrides in core/css/main.css.

  Rollout model: everything here is scoped under .ti-theme. Nothing changes
  on a page until .ti-theme is added to that page's <body> (or a wrapping
  element). This lets us opt pages in one at a time (see SITE-1421 plan,
  Phase 2/3) instead of flipping the look of all marketing pages at once.

  Load via $pageManager->addCustomStyle('/marketing/assets/css/theme.css')
  per page during rollout. Once every marketing page has opted in, this can
  be loaded unconditionally from marketing/layout.php instead.
*/

:root {
  /* Surfaces */
  --ti-bg: #0B0E14;
  --ti-card: #121826;
  --ti-card-elev: #161E2E;
  --ti-border: #1E2636;
  --ti-border-soft: rgba(30, 38, 54, 0.85);

  /* Text */
  --ti-text: #F5F7FA;
  --ti-muted: #9AA3B2;
  --ti-muted-dim: #6B7385;

  /* Brand accent (amber/orange — keeps the family's amber hue, pushed
     brighter/warmer per the approved redesign direction) */
  --ti-orange: #FF8A00;
  --ti-orange-hot: #FF9F2E;
  --ti-orange-dim: rgba(255, 138, 0, 0.12);
  --ti-orange-line: rgba(255, 138, 0, 0.35);

  /* Status */
  --ti-green: #22C55E;
  --ti-green-dim: rgba(34, 197, 94, 0.12);
  --ti-red: #FF5667;
  --ti-red-dim: rgba(255, 86, 103, 0.12);

  /* Shape */
  --ti-radius-sm: 10px;
  --ti-radius: 14px;
  --ti-radius-lg: 20px;
  --ti-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
  --ti-max: 1440px;

  /* Type */
  --ti-font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ==========================================================================
   Base surface — everything below is scoped so it only applies to pages
   that have opted in to the new theme.
   ========================================================================== */

.ti-theme {
  background: var(--ti-bg);
  color: var(--ti-text);
  font-family: var(--ti-font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Typeface: Inter is applied to every marketing page (themed or not) by
   marketing/assets/css/marketing-font.css, loaded from both marketing
   layouts — it overrides MainSite/css/styles.css's `* { font-family:
   'Poppins' }`, which had made all body text on themed pages Poppins despite
   .ti-theme's font-family above. See BRAND_GUIDELINES.md §3. */

/* core/css/main.css sets body { background: var(--bodyBg) !important; } with
   --bodyBg: #FBFBFD (near-white), and body also has min-height:100vh. On any
   opted-in page shorter than the viewport, that near-white background shows
   through below our content. .ti-theme is on a wrapper div, not <body>
   itself, so this can't be fixed by raising specificity on a normal
   descendant selector — :has() lets us reach the ancestor instead, scoped
   to only pages that actually opted in. Needs !important to beat the
   sitewide rule (which is also !important); the :has() already wins on
   specificity too, so this is double-safe against source order. */
body:has(.ti-theme) {
  background: var(--ti-bg) !important;
}
/* Learning Center puts .ti-theme directly on <body> (layout-start.php
   controls the body tag directly, unlike marketing/layout.php) rather than
   on a child wrapper. :has() only matches descendants, not the element
   itself carrying the class, so that case needs its own rule. */
body.ti-theme {
  background: var(--ti-bg) !important;
}

/* ==========================================================================
   brand-tokens.css compatibility layer — for pages built on the OTHER,
   older token system (MainSite/css/brand-tokens.css, the live CSS
   implementation of BRAND_GUIDELINES.md v1.x: light surfaces, blue/amber).
   Learning Center (296 pages), the 14 tradeideas-vs-* compare pages, and
   ai-trading-plans.html are all built entirely on --color-* custom
   properties from that file — brand-tokens.css sets base styles directly on
   bare body/h1-h6/p/a, so layering .ti-theme's own component classes on top
   the way marketing/pages/*.html does would mean two systems fighting over
   the same base elements. Instead: redefine brand-tokens.css's OWN
   --color-* variables to dark equivalents, scoped under .ti-theme. Every
   rule in those pages that already reads var(--color-bg-page) etc. picks up
   the dark values for free — no need to touch that CSS rule-by-rule.
   Confirmed on learning-center.css: 1059 lines, exactly one hardcoded hex
   color outside this token system (the nav light-override, removed
   separately in learning-center.css itself).
   ========================================================================== */

.ti-theme {
  /* Text */
  --color-text-heading: var(--ti-text);
  --color-text-body: var(--ti-text);
  --color-text-secondary: var(--ti-muted);
  --color-text-eyebrow: var(--ti-orange);
  --color-text-on-dark: #ffffff;

  /* Surfaces */
  --color-bg-page: var(--ti-bg);
  --color-bg-card: var(--ti-card);
  --color-bg-nav: var(--ti-bg);

  /* Borders */
  --color-border: var(--ti-border);
  --color-border-strong: #3A465C;

  /* Actions — one accent (orange) now, not a blue/amber split */
  --color-action-primary: var(--ti-orange);
  --color-action-hover: var(--ti-orange-hot);
  --color-action-cta: var(--ti-orange);
  --color-action-cta-hover: var(--ti-orange-hot);

  /* Raw palette — in case anything references these directly instead of
     through the semantic layer above */
  --color-blue-100: var(--ti-orange-dim);
  --color-blue-300: var(--ti-orange-line);
  --color-blue-500: var(--ti-orange);
  --color-blue-700: var(--ti-orange-hot);
  --color-blue-900: var(--ti-bg);

  --color-amber-100: var(--ti-orange-dim);
  --color-amber-300: var(--ti-orange-line);
  --color-amber-500: var(--ti-orange);
  --color-amber-700: var(--ti-orange-hot);
  --color-amber-900: var(--ti-orange-hot);

  --color-gray-50: var(--ti-bg);
  --color-gray-100: var(--ti-card);
  --color-gray-300: var(--ti-border);
  --color-gray-500: var(--ti-muted);
  --color-gray-800: var(--ti-text);
  --color-gray-950: var(--ti-text);

  /* Status — approximated against this system's green/red, not carried
     over from brand-tokens.css's own (unrelated) values */
  --color-success-light: var(--ti-green-dim);
  --color-success: var(--ti-green);
  --color-success-dark: var(--ti-green);
  --color-danger-light: var(--ti-red-dim);
  --color-danger: var(--ti-red);
  --color-danger-dark: var(--ti-red);
  --color-warning-light: var(--ti-orange-dim);
  --color-warning: var(--ti-orange);
  --color-info-light: var(--ti-orange-dim);
  --color-info: var(--ti-orange);

  /* Shadows — brand-tokens.css's are blue-tinted (rgba(2,52,79,...)) for a
     light surface; dark surfaces read better with black-based shadows */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.45);
}

/* brand-tokens.css sets `body { font-family: var(--font-base) !important; }`
   itself. --font-base is Inter there now (all marketing pages moved to Inter
   2026-09-28), so this color layer doesn't need to redefine it. */

.ti-theme a { color: inherit; text-decoration: none; }

/* .landing-page-drk (MainSite/css/styles.css) sets an explicit near-black
   color on bare h2 — meant to be paired with a .text-white utility class on
   every heading. Under .ti-theme, headings should default to light text
   without needing that pairing on every single element. */
.ti-theme h1, .ti-theme h2, .ti-theme h3, .ti-theme h4 {
  font-family: var(--ti-font);
  letter-spacing: -0.03em;
  margin: 0;
  color: var(--ti-text);
}
/* Every section H2 on the page (story blocks, FAQ, final CTA) uses this
   same size — set once here instead of repeating it per section class, so a
   section that doesn't have its own h2 rule (like .ai-signals-final-cta)
   doesn't silently fall back to a browser/Bootstrap default. Page-specific
   h2 rules should only add margin, not repeat this. */
.ti-theme h2 {
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.15;
}
/* One hero H1 size for every themed page (2026-09-24, explicit direction) —
   prototypes vary it page to page; we don't follow them on this. Page CSS
   may set the h1's margin/line-height/max-width but must NOT set font-size.
   The homepage is the one exception: index.css's `.ti-home-hero-copy h1`
   (same specificity, loads later) keeps its larger size on purpose. */
.ti-theme h1 {
  font-size: clamp(42px, 5.5vw, 58px);
}
/* No margin reset here on purpose: a class-only selector like
   .ai-signals-hero-sub (specificity 0,1,0) is LESS specific than a class+
   element selector like this one would be (0,1,1), so a blanket margin
   reset on bare p would silently beat page-level paragraph components that
   don't happen to pair themselves with a "p" qualifier — as it did here. */
.ti-theme p { color: var(--ti-text); }

/* .ti-wrap and .ti-section are combined on the same element everywhere
   (<section class="ti-wrap ti-section ...">). padding is a shorthand, so if
   both rules touched `padding`, whichever won by specificity/order would
   silently zero out the axis the OTHER rule was supposed to own — which is
   exactly what happened here before this was split into longhand
   properties. Each of these two classes must only ever touch its own axis. */
.ti-wrap {
  max-width: var(--ti-max);
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width: 768px) {
  .ti-wrap { padding-left: 20px; padding-right: 20px; }
}

.ti-section {
  padding-top: 56px;
  padding-bottom: 56px;
}

/* ==========================================================================
   Buttons — new class names (.ti-btn*) rather than redefining Bootstrap's
   .btn-primary, so this never leaks into non-opted-in pages that still use
   plain Bootstrap buttons.
   ========================================================================== */

.ti-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  font-family: var(--ti-font);
  border-radius: 12px;
  border: 1px solid transparent;
  padding: 10px 18px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease,
              transform 0.12s ease, box-shadow 0.2s ease;
  white-space: nowrap;
}
.ti-btn:active { transform: translateY(1px); }

.ti-btn-primary {
  background: var(--ti-orange);
  color: #0B0E14;
  border-color: var(--ti-orange);
}
.ti-btn-primary:hover {
  background: var(--ti-orange-hot);
  border-color: var(--ti-orange-hot);
  box-shadow: 0 0 28px rgba(255, 138, 0, 0.35);
}

.ti-btn-secondary {
  background: transparent;
  color: var(--ti-text);
  border-color: var(--ti-border);
}
.ti-btn-secondary:hover {
  border-color: #3A465C;
  background: rgba(255, 255, 255, 0.03);
}

.ti-btn-ghost {
  background: transparent;
  color: var(--ti-text);
  padding: 10px 14px;
}
.ti-btn-ghost:hover { color: var(--ti-orange); }

.ti-btn-lg { padding: 14px 28px; font-size: 15px; }
.ti-btn-xl { padding: 16px 34px; font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }

/* Row of buttons — same shape used for ai-signals.html's hero/final-cta
   button rows (currently still named .ai-signals-hero-cta there) and now
   data-difference.html's. New pages should use this directly. */
.ti-btn-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ==========================================================================
   Pills / badges (eyebrow labels used above every hero H1)
   ========================================================================== */

.ti-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ti-orange-hot);
  border: 1px solid var(--ti-orange-line);
  background: var(--ti-orange-dim);
  border-radius: 999px;
  padding: 6px 12px;
  margin-bottom: 18px;
}

.ti-pill-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ti-orange);
  box-shadow: 0 0 10px var(--ti-orange);
  animation: ti-pulse-dot 1.6s ease-in-out infinite;
}
@keyframes ti-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .ti-pill-dot { animation: none; }
}

/* ==========================================================================
   Eyebrow / glow text — small kicker labels above H2s, and the orange
   "glow" span used inside hero H1s. Distinct from .ti-pill (a pill-shaped
   hero badge, above).
   ========================================================================== */

.ti-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ti-orange);
  font-weight: 800;
  margin-bottom: 10px;
}

.ti-glow {
  color: var(--ti-orange-hot);
  text-shadow: 0 0 40px rgba(255, 138, 0, 0.45), 0 0 80px rgba(255, 138, 0, 0.2);
}
@media (prefers-reduced-motion: reduce) {
  .ti-theme .ti-glow { text-shadow: none; }
}

/* Lead paragraph — the muted body copy directly under a section H2.
   Promoted from ai-signals.css (.ai-signals-lead) when data-difference.html
   needed the identical pattern; ai-signals.html itself still uses its own
   page-local class for now (untouched, already tested — not worth the
   churn to migrate it just for this). New pages should use .ti-lead. */
.ti-lead {
  color: var(--ti-muted);
  font-size: 16px;
  line-height: 1.6;
  max-width: 720px;
  margin: 0 0 14px;
}

/* ==========================================================================
   Quant-machine pipeline diagram (Super Feed -> Holly -> OddsMaker -> ...)
   Reused across ai-signals, oddsmaker, and data-difference.
   ========================================================================== */

.ti-pipe {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 20px 0 8px;
}
.ti-pipe-step {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13px;
}
.ti-pipe-step--hot {
  border-color: var(--ti-orange-line);
  color: var(--ti-orange-hot);
  background: var(--ti-orange-dim);
}
.ti-pipe-arrow { color: var(--ti-muted-dim); font-weight: 700; }

/* ==========================================================================
   Cards
   ========================================================================== */

.ti-card {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  padding: 18px 18px 16px;
}

.ti-card-elevated {
  background: var(--ti-card-elev);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  padding: 18px;
}

.ti-card--accent {
  border-color: var(--ti-orange-line);
  background: rgba(255, 138, 0, 0.06);
}

/* ==========================================================================
   3-column card grid — promoted from ai-signals.css (.ai-signals-3col /
   .ai-signals-proof-grid, which used this exact shape twice on one page)
   when data-difference.html needed the same pattern a third time. Combine
   with .ti-card / .ti-card-elevated / .ti-card--accent on the children.
   ========================================================================== */

.ti-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}
@media (max-width: 900px) {
  .ti-grid-3 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Card icon badge — for Iconoir icons (<i class="iconoir-*">) inside a
   .ti-card. Same technical pattern already used on ai-trading-plans.html
   (.ti-feature-icon there — font-style:normal reset is required since
   browsers italicize <i> by default, and Iconoir is a webfont), just in
   this system's dark/orange palette instead of light/blue.

   The Iconoir stylesheet itself is NOT loaded here — it's a per-page opt-in
   via addCustomHeadTagRaw, same as every other page that uses it:
     https://cdnjs.cloudflare.com/ajax/libs/iconoir/7.11.0/css/iconoir.min.css
   ========================================================================== */

.ti-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--ti-orange-dim);
  border: 1px solid var(--ti-orange-line);
  color: var(--ti-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.ti-card-icon i[class*="iconoir-"] {
  font-style: normal;
  font-size: 20px;
  line-height: 1;
  color: inherit;
}

/* ==========================================================================
   Two-column hero grid — copy left, a media/visual right. Promoted from the
   homepage's .ti-home-hero-grid (index.css, SITE-1421) since the nav IA
   rebuild's pages need the identical shape (matches the prototype's own
   hero grid on those pages too, nearly the same values already); the
   homepage's own copy stays untouched — same "not worth the churn" call
   made elsewhere in this file. Collapses to one column under 1150px.
   Not every hero needs this — a page whose prototype hero is itself
   centered/single-column (e.g. Trading Desk) shouldn't force one on.

   Usage:
     <header class="ti-wrap ti-hero-grid">
       <div>...pill, h1, lead, proof, cta row...</div>
       <div class="ti-media-placeholder">...</div>
     </header>
   ========================================================================== */
.ti-hero-grid {
  display: grid;
  grid-template-columns: minmax(380px, 0.85fr) minmax(520px, 1.35fr);
  gap: 48px;
  align-items: center;
}
@media (max-width: 1150px) {
  .ti-hero-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Media placeholder — a plain dark card standing in for a real screenshot
   or video that hasn't landed yet, so a page reads as "content coming"
   rather than a blank hole while assets are still in progress. Promoted
   from the homepage's carousel placeholder (.ti-home-media, index.css,
   SITE-1421) since new pages need the same shape now — not touching that
   page-local original (already shipped and approved; same "not worth the
   churn" call this file already made for .ai-signals-lead vs .ti-lead).

   Aspect ratio is ALWAYS 3:2 (2026-09-24, explicit direction) — every
   placeholder stands in for a screenshot/video of our own software, and
   those assets are all produced at 3:2 so one export fits every slot. Do
   NOT override aspect-ratio per instance; size a slot with width/max-width
   only. The site's canvas-animation stages (.ti-mm-stage,
   .data-difference-stage, .ti-cp-stage) follow the same 3:2 rule.

   Usage:
     <div class="ti-media-placeholder" aria-hidden="true">
       <span class="ti-media-tag"><i></i> Some Feature</span>
       <div class="ti-media-caption">One-line caption for what will play here.</div>
     </div>
   Both the tag and caption are optional — use whichever fits, or neither.
   ========================================================================== */
.ti-media-placeholder {
  position: relative;
  aspect-ratio: 3 / 2;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--ti-border-soft);
  border-radius: 20px;
  background: linear-gradient(155deg, var(--ti-card), var(--ti-bg));
}
.ti-media-placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at 50% 50%, var(--ti-orange-dim), transparent 65%);
  opacity: 0.6;
}
.ti-media-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(10, 13, 18, 0.9);
  border: 1px solid var(--ti-orange-line);
  color: var(--ti-orange-hot);
  font-size: 10px;
  font-weight: 800;
  font-family: var(--ti-font);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: 999px;
}
.ti-media-tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ti-green);
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.85);
  animation: ti-pulse-dot 1.6s ease-in-out infinite;
}
.ti-media-caption {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  z-index: 2;
  font-size: 11px;
  color: var(--ti-muted-dim);
  text-align: center;
}

/* Inc. 5000 recognition badge — promoted from the homepage's .ti-home-proof
   (index.css, SITE-1421) since 3 of the next 4 pages want the same shape;
   the homepage's own copy stays untouched, same "not worth the churn" call
   made elsewhere in this file. Real asset: /MainSite/images/inc-5000-logo.svg. */
.ti-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  max-width: 560px;
}
.ti-proof-badge { flex-shrink: 0; width: 70px; height: auto; }
.ti-proof-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--ti-muted);
}
.ti-proof-text strong { color: var(--ti-text); }
@media (max-width: 560px) {
  .ti-proof { flex-wrap: wrap; gap: 12px; }
  .ti-proof-text { flex: 1 1 100%; }
}

/* ==========================================================================
   FAQ — two different presentation patterns, matching what the source
   prototypes actually use per page (not drift to reconcile — ai-signals's
   prototype FAQ really is a static list, data-difference's really is a
   native accordion):

   .ti-faq-item      — static card (h3 + p, always expanded). ai-signals.html.
   .ti-faq-accordion — native <details>/<summary>, collapsible, no JS
                       needed. data-difference.html.
   ========================================================================== */

.ti-faq-item {
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  background: var(--ti-card);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.ti-faq-item h3 { font-size: 16px; margin-bottom: 6px; letter-spacing: -0.01em; }
.ti-faq-item p { font-size: 14px; color: var(--ti-muted); line-height: 1.55; margin: 0; }
.ti-faq-item strong { color: var(--ti-text); }

.ti-faq-accordion {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: var(--ti-radius);
  padding: 16px 20px;
  margin-bottom: 10px;
}
.ti-faq-accordion summary {
  font-size: 14px;
  font-weight: 600;
  color: var(--ti-text);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
/* Hides the default disclosure triangle so our own +/− indicator (below) is
   the only marker — Safari/Chrome render a marker here by default that
   list-style:none on summary alone doesn't remove. */
.ti-faq-accordion summary::-webkit-details-marker { display: none; }
.ti-faq-accordion summary::after {
  content: "+";
  color: var(--ti-orange);
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}
.ti-faq-accordion[open] summary::after { content: "\2212"; }
.ti-faq-accordion p {
  font-size: 13px;
  color: var(--ti-muted);
  margin-top: 10px;
  line-height: 1.5;
}
.ti-faq-accordion strong { color: var(--ti-text); }

/* ==========================================================================
   Shared nav override — restyles the EXISTING top_nav_dark.html markup
   (navbar-template-dark / bg-dark / nav-link) rather than requiring HTML
   changes. Structural nav changes (new links, search, mega-menu) are a
   separate, reviewed step — see SITE-1421 plan.
   ========================================================================== */

.ti-theme .navbar-template-dark {
  background: rgba(11, 14, 20, 0.92) !important;
  border-bottom: 1px solid var(--ti-border);
  backdrop-filter: blur(16px) saturate(1.2);
}
.ti-theme .navbar-template-dark .navbar-brand img { filter: none; }
.ti-theme .navbar-template-dark .nav-link {
  color: var(--ti-muted);
  font-weight: 500;
  transition: color 0.15s ease;
}
.ti-theme .navbar-template-dark .nav-link:hover,
.ti-theme .navbar-template-dark .nav-link.current {
  color: var(--ti-text);
}

/* ==========================================================================
   Global two-row nav (SITE-1421) — marketing/templates/top_nav_ti_theme.html.
   Opt-in per page via $pageManager->addCustomVariable('nav_template', ...),
   NOT a restyle of top_nav_dark.html (that template is shared with logged-in
   app pages — see BRAND_GUIDELINES.md §6). Namespaced .ti-nav-* / .ti-logo,
   not bare .nav/.logo, to avoid colliding with the Bootstrap/legacy CSS
   marketing/layout.php already loads sitewide.
   ========================================================================== */

.ti-nav-outer {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 14, 20, 0.82);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-bottom: 1px solid var(--ti-border);
}
/* The 82% translucent background above assumes a dark page behind the nav
   (true on every .ti-theme page — body is --ti-bg there). A page that uses
   this nav without opting into .ti-theme (e.g. pricing.html) has the
   sitewide near-white body behind it, which bled through and turned the nav
   gray (measured rgb(55,57,62) vs rgb(10,13,19)). Solid there instead. */
body:not(:has(.ti-theme)) .ti-nav-outer {
  background: var(--ti-bg);
}
.ti-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  padding: 0;
  font-family: var(--ti-font);
}
.ti-nav-row {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
}
.ti-nav-row--utility {
  height: 60px;
  gap: 16px;
  flex-shrink: 0;
}
.ti-nav-row--ia {
  min-height: 44px;
  padding: 0 0 10px;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
/* Still scrolls (touch drag / trackpad / shift+wheel) — just no visible
   scrollbar track, since a themed thin scrollbar still reads as a stray UI
   chrome element under the nav at mid widths where the row starts clipping. */
.ti-nav-row--ia::-webkit-scrollbar { display: none; }

.ti-logo { display: inline-flex; align-items: center; flex-shrink: 0; line-height: 0; color: #fff; }
.ti-logo img { display: block; height: 40px; width: auto; }

.ti-nav-links { display: flex; align-items: center; gap: 22px; list-style: none; flex: 0 0 auto; flex-wrap: nowrap; margin: 0; padding: 0; }
.ti-nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ti-muted);
  transition: color 0.15s ease;
}
.ti-nav-links a:hover { color: var(--ti-text); }
.ti-nav-links a.active { color: var(--ti-text); font-weight: 600; }
.ti-nav-links li { position: relative; list-style: none; }
.ti-nav-links > li > a { display: inline-flex; align-items: center; gap: 6px; }

.ti-nav-spacer { flex: 1; min-width: 12px; }

/* ti-nav-search wraps the REAL "Trade Ideas GPT" chat widget (relocated from
   the homepage hero, MainSite/templates/chat.html + chat.css + chat.js — see
   BRAND_GUIDELINES.md §6), reskinning its collapsed trigger
   (.chat-input-wrapper) as a nav pill. chat.css's own colors (#D3D3D3 etc.)
   are a light-UI palette built for the hero; only the COLLAPSED trigger is
   reskinned dark here. The expanded panel (#main-chat / #main-chatbot-div)
   keeps its original internal styling — a full dark-mode reskin of that
   ~1000-line stylesheet is separate, larger scope than this nav pass. */
.ti-nav-search {
  position: relative;
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 340px;
}
.ti-nav-search .chat-input-wrapper {
  background: var(--ti-card);
  border: 1px solid var(--ti-border);
  border-radius: 999px;
  height: 42px;
  padding: 6px 8px 6px 14px;
}
.ti-nav-search .chat-input-wrapper svg { flex-shrink: 0; width: 18px; height: 18px; }
.ti-nav-search .chat-input-wrapper svg path,
.ti-nav-search .chat-input-wrapper svg g { fill: var(--ti-muted); }
/* chat.css sizes this with a fixed `width: calc(100% - 60px)` — a magic
   number tuned for the original hero layout's icon size/padding. Our pill
   has different padding and a smaller icon, so that offset leaves ~17px of
   dead space between the send button and the pill's edge instead of the
   button sitting flush against it. flex-sizing instead of a fixed offset
   makes the input consume exactly the leftover space regardless of the
   icon/button/padding dimensions on either side of it. */
.ti-nav-search .chat-input {
  flex: 1 1 auto;
  width: auto;
  color: var(--ti-text);
  font-family: var(--ti-font);
  font-size: 13px;
}
.ti-nav-search .chat-input::placeholder { color: var(--ti-muted-dim); }
.ti-nav-search .send-btn {
  background: var(--ti-border);
  width: 26px;
  height: 26px;
}
.ti-nav-search .send-btn svg path { fill: var(--ti-muted); }
/* sendRequest() (chat.js) adds class "main-chat" to #main-chat when a
   message is sent. chat.css's .main-chat rule makes THAT element
   position:absolute + height:100vh — turning it into the containing block
   for #main-chatbot-div instead of .chat-modules (our small pill wrapper).
   #main-chatbot-div's `top: calc(100% + 10px)` below then resolves against
   a ~100vh box instead of the ~50px pill, landing almost a full viewport
   height down (invisible/appears broken). Neutralize it so .chat-modules
   stays the containing block, same as the collapsed (unsent) state. */
.ti-nav-search #main-chat.main-chat {
  position: static;
  top: auto;
  width: auto;
  height: auto;
  z-index: auto;
}

/* chat.js's .expand class runs a keyframe animation (expandDiv, chat.css)
   from height:0 to height:100% — measured directly, that consistently
   resolves against a ~104px box even under position:fixed with no
   transform/filter/contain anywhere in the ancestor chain (confirmed via
   getComputedStyle at every animation frame, 0ms through 5000ms — it holds
   flat at 104px, not a timing artifact). Rather than chase why that
   specific keyframe's percentage resolves the way it does, cancel the
   animation for our nav-scoped element entirely and set an explicit pixel
   height instead — avoids fighting an active CSS animation for the
   property it animates, which normal declarations can't override anyway
   regardless of specificity or !important. */
.ti-nav-search #main-chatbot-div,
.ti-nav-search #main-chatbot-div.expand {
  position: fixed;
  top: 112px;
  left: auto;
  right: 40px;
  width: min(420px, calc(100vw - 32px));
  height: min(600px, calc(100vh - 128px));
  max-height: calc(100vh - 128px);
  animation: none;
  border-radius: var(--ti-radius);
  overflow: hidden;
  box-shadow: var(--ti-shadow);
}

/* .btn-close-main-chat ("Collapse") is a SIBLING of #main-chatbot-div, not
   a child (chat.html), positioned absolute at top:-26px/right:16px against
   #main-chat as its containing block — which the fix above turns static,
   so without this the button falls back to .chat-modules (the tiny pill)
   as its containing block instead, landing nowhere near the panel we just
   moved. Pin it with the same fixed reference frame and offsets as the
   panel itself (86px = 112px panel top − 26px, 56px = 40px panel right +
   16px), so it stays visually attached to the panel's top-right corner. */
.ti-nav-search .btn-close-main-chat {
  position: fixed;
  top: 86px;
  right: 56px;
}

.ti-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.ti-nav-actions .ti-btn { flex-shrink: 0; }

.ti-nav-menu-wrap { position: relative; flex: 0 0 auto; }
.ti-nav-burger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--ti-border); background: transparent; cursor: pointer;
  transition: border-color 0.15s ease, transform 0.12s ease;
  flex: 0 0 auto; padding: 0;
}
.ti-nav-burger:hover { border-color: #3A465C; transform: translateY(-1px); }
.ti-nav-burger[aria-expanded="true"] { border-color: rgba(255, 138, 0, 0.55); }
.ti-nav-burger span {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--ti-text);
  box-shadow: 0 -6px 0 var(--ti-text), 0 6px 0 var(--ti-text);
}
.ti-burger-panel {
  display: none; position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 280px; padding: 8px; z-index: 120;
  border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 17, 26, 0.98);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.5);
}
.ti-burger-panel.open { display: block; }
.ti-burger-panel a {
  display: block; padding: 11px 12px; border-radius: 10px;
  font-size: 14px; font-weight: 600; color: #e8eef7;
  text-decoration: none; line-height: 1.35;
}
.ti-burger-panel a:hover { background: rgba(255, 138, 0, 0.12); color: #fff; }
.ti-burger-panel a small { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; color: #8491a5; }

@media (max-width: 900px) {
  .ti-nav-links { gap: 16px; }
  .ti-nav-search { min-width: 160px; max-width: 220px; }
}
@media (max-width: 768px) {
  .ti-nav-row--ia,
  .ti-nav-links { display: none; }
  .ti-nav-row--utility { height: 56px; }
  .ti-nav-search { display: none; }
}

/* ==========================================================================
   Global footer (SITE-1421) — marketing/templates/footer_ti_theme.html.
   Opt-in per page via $pageManager->addCustomVariable('footer_template',
   'footer_ti_theme.html'), NOT a restyle of footer.html — that template is
   shared even more widely than the nav (TIPro/, core/Index.php,
   AccountManagement/, StockInfo/, etc.), and this is a different column
   layout (six columns mirroring ti-site-account-pack's .site-footer-pro),
   not just a recolor. Namespaced .ti-footer-*, not bare .footer-*, for the
   same collision reason as the nav's .ti-nav-*. See BRAND_GUIDELINES.md §6.
   ========================================================================== */

.ti-footer {
  border-top: 1px solid var(--ti-border-soft);
  background: var(--ti-bg);
  padding: 48px 0 28px;
  margin-top: 24px;
  color: var(--ti-muted);
  font-size: 13px;
  font-family: var(--ti-font);
}
.ti-footer-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 20px;
  margin-bottom: 36px;
}
@media (max-width: 1100px) { .ti-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .ti-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ti-footer-grid { grid-template-columns: 1fr; } }

.ti-footer-col-title {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ti-orange-hot);
}
.ti-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ti-footer a {
  color: #c5ced9;
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.15s ease;
}
.ti-footer a:hover { color: #fff; }
.ti-footer a em {
  display: block;
  font-style: normal;
  font-size: 11px;
  color: var(--ti-muted-dim);
  margin-top: 2px;
}

.ti-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ti-border-soft);
  font-size: 12px;
  color: var(--ti-muted-dim);
}
.ti-footer-bottom a { color: var(--ti-muted); }
.ti-footer-bottom a:hover { color: #fff; }

.ti-footer-awards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 16px 28px;
  margin: 8px 0 22px;
  padding: 8px 0 4px;
}
.ti-footer-awards img { height: clamp(44px, 10vw, 88px); width: auto; object-fit: contain; }
.ti-footer-awards a { line-height: 0; }

.ti-footer-social {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 18px;
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
}
.ti-footer-social a { color: var(--ti-muted); }
.ti-footer-social a:hover { color: #fff; }

.ti-footer-legal {
  max-width: 920px;
  margin: 0 auto 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.55;
  /* Matches the prototype's literal #6e7b8f exactly — close to but not
     the same as --ti-muted-dim (#6B7385), and the prototype itself uses a
     hardcoded hex here rather than a token. Also set directly on the p
     below: MainSite/css/styles.css has a bare `p { color: #333; }` rule,
     which sets color explicitly on every <p> rather than leaving it to
     inherit — an explicit rule on the element itself always wins over an
     inherited value from an ancestor, regardless of specificity, so
     setting color only here never reached the actual paragraph text. */
  color: #6e7b8f;
}
.ti-footer-legal p { margin: 0 0 12px; color: #6e7b8f; }
.ti-footer-legal a { color: #c5ced9; text-decoration: underline; font-weight: 600; }
.ti-footer-legal a:hover { color: #fff; }

.ti-footer-copy-right {
  text-align: center;
  font-size: 12px;
  color: var(--ti-muted-dim);
  padding-top: 4px;
}

/* data-tbd="true" (footer_ti_theme.html) still marks links to pages that
   don't exist yet — see the comment at the top of that file and
   BRAND_GUIDELINES.md §6 for the full list — just without a visual
   difference from real links anymore. */

/* ==========================================================================
   Full-bleed closing CTA band — promoted from ai-signals.css
   (.ai-signals-final-cta). Full-bleed border-top + gradient wash on the
   outer element, with an inner .ti-wrap.ti-section holding the actual
   content at the sitewide 1440px width. Usage:

     <section class="ti-cta-band text-center">
       <div class="ti-wrap ti-section"> ...content... </div>
     </section>

   The inner padding-top/bottom: 0 rule below is required, not optional —
   .ti-section already adds 56px vertical padding, and this band adds its
   own, so without this the section gets double vertical padding. Longhand
   on purpose, same reason as .ti-wrap/.ti-section above.
   ========================================================================== */

.ti-cta-band {
  margin: 48px 0 0;
  padding: 56px 0;
  border-top: 1px solid var(--ti-border);
  background: linear-gradient(180deg, rgba(255, 138, 0, 0.06), transparent 70%);
}
.ti-cta-band .ti-section { padding-top: 0; padding-bottom: 0; }
.ti-cta-band h2 { margin: 0 0 10px; }
.ti-cta-band p { max-width: 640px; margin: 0 auto 22px; }

/* The email-form variant of this band (.ti-cta-form/.ti-cta-thanks) was
   retired 2026-09-29 in favor of the sitewide email band
   (templates/email_signup_band.html + assets/css/email-signup-band.css),
   which the layout places above the footer on every marketing page. The
   base .ti-cta-band above is still used for non-email bands (download.html). */

/* ==========================================================================
   Stat strip — illustrative count-up metrics under a hero. Count-up
   behavior lives in marketing/assets/js/theme-stats.js (auto-inits on any
   .ti-stat-val[data-count] on the page). Always label these as illustrative
   if the numbers aren't verified — see .ti-stat-note and
   BRAND_GUIDELINES.md §7 (citation-accuracy rule).
   ========================================================================== */

.ti-stat-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-bottom: 8px;
}
.ti-stat { text-align: center; min-width: 120px; }
.ti-stat-val {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--ti-orange);
  line-height: 1;
  margin-bottom: 6px;
  text-shadow: 0 0 24px rgba(255, 138, 0, 0.25);
}
.ti-stat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ti-muted-dim);
}
.ti-stat-note {
  font-size: 11px;
  color: var(--ti-muted-dim);
  margin-top: 14px;
  opacity: 0.85;
}
@media (prefers-reduced-motion: reduce) {
  .ti-stat-val { text-shadow: none; }
}

/* ==========================================================================
   Hero background canvas — positioning only. Behavior lives in
   marketing/assets/js/theme-canvas.js. The canvas's own parent must be
   position:relative (or similar) for `inset:0` to fill it correctly, and
   should be position:relative itself on any content that needs to sit
   above the canvas (z-index:0 here, so content at z-index:1+ stacks over
   it without needing !important anywhere).
   ========================================================================== */

[data-ti-viz] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  /* Toned down from the prototype's full-strength version — the node/link
     network, radar sweep, filaments, and ticker tape all draw at their
     original per-layer alpha values in theme-canvas.js; this single opacity
     dims the whole rendered result uniformly rather than needing to retune
     every layer's alpha individually. Adjust this one number to taste. */
  opacity: 0.55;
}
@media (prefers-reduced-motion: reduce) {
  [data-ti-viz] { display: none; }
}

/* ==========================================================================
   Utilities
   ========================================================================== */

/* Visually hides content (e.g. a <label> for a placeholder-only input) while
   keeping it in the accessibility tree — the standard clip-based pattern,
   not display:none (which screen readers skip entirely). */
.ti-theme .visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==========================================================================
   Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .ti-theme *, .ti-theme *::before, .ti-theme *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}