/* ============================================================
   LONE WOLF TRADER — Design tokens
   Direction: dark fintech aesthetic. Emerald green (oklch(0.72 0.2 150))
   is the primary — buttons, borders, glows, badges, the chart line, the
   brand mark. Gold is reserved as a narrow accent for a small number of
   special highlights (one headline word, the money-back-style badge, the
   Gold plan) rather than used pervasively.
   ============================================================ */

/* Fonts are now loaded via <link rel="preconnect"> + <link rel="stylesheet">
   in each page's <head> instead of @import — @import is render-blocking
   and delays first paint since the browser can't discover it until it's
   already parsed most of this file. */

:root {
  /* Colors sampled directly from the reference screenshots */
  --bg: #0a0d12;
  --panel: #13171e;        /* card background — a real, distinct panel shade */
  --panel-2: #1b202a;      /* form fields / icon boxes: one step lighter */
  --hairline: #262b34;
  --text: #eaeff4;
  --text-dim: #80868d;

  /* Primary — emerald green, oklch(0.72 0.2 150) as specified */
  --amber: oklch(0.72 0.2 150);
  --amber-bright: oklch(0.80 0.18 150);
  --amber-ink: oklch(0.18 0.04 150);
  --amber-tint: oklch(0.72 0.2 150 / 0.14);
  /* Hex fallbacks of the same oklch values, for contexts that can't take
     oklch() directly (inline SVG fills, generated images, older parsers). */
  --amber-hex: #00c55b;
  --amber-bright-hex: #54dd7d;
  --amber-ink-hex: #041608;

  /* Secondary — the SAME emerald, kept as its own token since a lot of
     existing rules reference --green specifically for chart lines/success
     states; unified to one true green rather than two slightly different
     shades. */
  --green: oklch(0.72 0.2 150);
  --green-tint: oklch(0.72 0.2 150 / 0.14);

  /* Accent — gold, used narrowly (a headline word, a couple of special
     badges) rather than as the dominant color. This is the site's OLD
     primary amber value, repurposed. */
  --gold: #efaa10;
  --gold-bright: #ffc247;
  --gold-ink: #1a1305;
  --gold-tint: rgba(239, 170, 16, 0.14);

  --info-blue: #4ba3d9;
  --red: #c25b4d;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'IBM Plex Mono', 'SF Mono', monospace;

  --radius: 12px;
  --radius-sm: 8px;
  --container: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  /* Background colour lives on <html> (below) so <body> can stay transparent
     and let the fixed z-index:-1 background canvas show through. */
  background: transparent;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
html { background: var(--bg); }
/* Safety net against accidental horizontal scroll on phones. IMPORTANT:
   this is on <html> only, NOT <body> — setting overflow-x on body (or any
   ancestor of .site-header) breaks position:sticky, because the browser
   is then forced to treat that ancestor as a scroll container and the
   sticky header sticks to IT instead of the viewport, which makes the
   header scroll away with the page instead of staying put. Keeping this
   on <html> avoids that while still clipping stray horizontal overflow. */
html { overflow-x: hidden; }

img { max-width: 100%; display: block; }
a { color: inherit; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 0.5em;
  letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.4rem); }
h3, h4 { font-family: var(--font-body); letter-spacing: -0.015em; }
h3 { font-size: 1.05rem; font-weight: 600; }
p { margin: 0 0 1em; color: var(--text-dim); }
.amber { color: var(--gold); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 14px;
}

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--amber-bright);
  outline-offset: 2px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; font-family: var(--font-body); font-weight: 700; font-size: 0.95rem;
  text-decoration: none; border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
  position: relative; overflow: hidden;
}
.btn-primary { background: linear-gradient(180deg, var(--amber-bright), var(--amber)); color: var(--amber-ink); }
.btn-primary::after {
  content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,197,91,0.35); }
.btn-primary:hover::after { animation: btn-shimmer 0.9s ease forwards; }
@keyframes btn-shimmer {
  from { left: -60%; }
  to { left: 130%; }
}
.btn-ghost { background: transparent; border-color: var(--hairline); color: var(--text); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber-bright); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,197,91,0.16); }
.btn-block { width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn-primary:hover::after { animation: none; }
  .btn-primary:hover, .btn-ghost:hover { transform: none; }
}

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 11, 13, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hairline);
}
/* Where backdrop-filter isn't supported (older Safari/iOS, many in-app
   browsers like Instagram/Facebook/TikTok's webview), the header falls
   back to a solid, fully-opaque background instead of a translucent one.
   Without this, the header blends into the equally-dark page behind it
   as soon as you scroll past the hero — it's still stuck to the top and
   still there, but visually indistinguishable from the content behind
   it, which reads as "the nav bar disappeared". */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header { background: var(--bg); }
}
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 74px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.05rem; font-weight: 800; text-decoration: none; letter-spacing: 0.02em; text-transform: uppercase; }
.brand .mark { width: 24px; height: 24px; flex-shrink: 0; color: var(--amber); transition: color 0.25s ease, transform 0.35s ease, filter 0.35s ease; }
.brand:hover .mark { color: var(--amber-bright); transform: rotate(-6deg) scale(1.08); filter: drop-shadow(0 0 8px rgba(0,197,91,0.6)); }
.nav-links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.nav-links a { text-decoration: none; color: var(--text-dim); transition: color 0.2s ease; position: relative; padding-bottom: 2px; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
  background: var(--amber); transform: scaleX(0); transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover { color: var(--amber-bright); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--amber); }
.nav-links a[aria-current="page"]::after { transform: scaleX(1); background: var(--amber); }
.nav-cta { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-toggle { display: none; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-links.nav-open {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 74px;
    left: 0;
    right: 0;
    background: var(--bg);
    padding: 18px 24px;
    border-bottom: 1px solid var(--hairline);
    gap: 18px;
    z-index: 60;
  }
  .nav-toggle { display: inline-flex; background: none; border: 1px solid var(--hairline); color: var(--text); padding: 8px 12px; border-radius: var(--radius-sm); font-size: 1.1rem; line-height: 1; transition: border-color 0.2s ease, color 0.2s ease, transform 0.15s ease; }
  .nav-toggle:hover { border-color: var(--amber); color: var(--amber-bright); }
  .nav-toggle:active { transform: scale(0.94); }
  /* On mobile the header only has the brand mark + hamburger + CTA button
     in one row — let the brand's text shrink/ellipsize first so the
     button and toggle never get squeezed into wrapping their own text. */
  .site-header .container { gap: 10px; }
  .brand { min-width: 0; flex-shrink: 1; }
  .brand-label { min-width: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .nav-cta .btn { white-space: nowrap; padding: 10px 16px; font-size: 0.85rem; }
}
/* Small phones: the header can't fit the full brand name, the menu toggle
   AND the CTA, so the CTA goes (the menu and the homepage's sticky buy bar
   both cover it) rather than truncating the brand to "LONE WOLF T". */
@media (max-width: 480px) {
  .nav-cta .btn { display: none; }
}

/* ---------- Hero ---------- */
.hero { position: relative; padding: 90px 0 70px; overflow: hidden; border-bottom: 1px solid var(--hairline); }
.hero::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(650px 400px at 85% -10%, rgba(0,197,91,0.16), transparent 60%),
    linear-gradient(rgba(0,197,91,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,197,91,0.05) 1px, transparent 1px);
  background-size: auto, 42px 42px, 42px 42px;
  -webkit-mask-image: radial-gradient(900px 500px at 70% 20%, #000 40%, transparent 85%);
  mask-image: radial-gradient(900px 500px at 70% 20%, #000 40%, transparent 85%);
  animation: grid-drift 22s linear infinite;
  pointer-events: none;
}
@keyframes grid-drift {
  from { background-position: 0 0, 0 0, 0 0; }
  to { background-position: 0 0, 42px 42px, 42px 42px; }
}
@media (prefers-reduced-motion: reduce) { .hero::before { animation: none; } }

/* ---------- Site-wide animated background ----------
   A single fixed canvas behind the entire page (not just the hero), so the
   particle network stays visible all the way down as you scroll. Fixed
   positioning means it costs one canvas for the whole site rather than one
   per section, and it never scrolls/repaints on scroll.
   Sits at z-index 0; page sections sit above it via .site-bg-canvas ~ *.
   main.js skips it entirely under prefers-reduced-motion. */
.site-bg-canvas {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  /* z-index:-1 keeps this behind all page content without needing to force
     a stacking context onto every direct child of <body>. An earlier version
     did that with `body > *`, which clobbered position:fixed on the
     back-to-top button and dropped it into the page flow. */
  z-index: -1; pointer-events: none;
}
/* Sections are translucent so the canvas shows through; without this the
   opaque panel backgrounds would hide the particles below the hero. */
.glow-section, .hero { background-color: transparent; }

.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
@media (max-width: 920px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede { font-size: 1.1rem; max-width: 480px; }
.hero-actions { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; }
.hero-checks { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 26px; font-size: 0.85rem; color: var(--text-dim); }
.hero-checks span::before { content: '✓ '; color: var(--green); }

.chart-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 20px; position: relative; overflow: hidden; }
.chart-card::after, .perf-card::after {
  content: ''; position: absolute; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(18,161,108,0.7), transparent);
  pointer-events: none;
  display: none; /* retired: constant sweeping read as noise next to the real animations */
}
@keyframes scan-line {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .chart-card::after, .perf-card::after { animation: none; display: none; } }
.chart-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.chart-card-head strong { font-size: 0.9rem; }
.pill { font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; background: rgba(18,161,108,0.16); color: var(--green); padding: 4px 10px; border-radius: 999px; position: relative; }
/* Pulsing "live" dot inside the Auto Trading pill. */
.pill-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; animation: pill-pulse 1.8s ease-in-out infinite; }
@keyframes pill-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.75); } }

/* ---------- Multi-pair scanner strip (hero card) ----------
   Mimics the engine working through symbols: the symbol, its three
   timeframes and the current structure phase all swap on a timer, with a
   progress track running underneath. Phases are the EA's own state names.
   All movement is driven by main.js and skipped under reduced-motion. */
.scanner {
  background: rgba(0,197,91,0.05);
  border: 1px solid rgba(0,197,91,0.16);
  border-radius: 10px;
  padding: 10px 12px 8px;
  margin-bottom: 10px;
}
.scanner-row { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 0.72rem; }
.scanner-sym { color: var(--text); font-weight: 600; letter-spacing: 0.04em; min-width: 68px; }
.scanner-tf { color: var(--text-dim); font-size: 0.66rem; letter-spacing: 0.02em; }
.scanner-phase { margin-left: auto; color: var(--amber-bright); text-align: right; white-space: nowrap; }
/* Phase colours mirror the on-chart panel: waiting states amber, a
   confirmed signal green. */
.scanner-phase.is-confirmed { color: var(--amber-bright); }
/* Symbol/phase text fades on each swap so values don't visibly "pop". */
.scanner-sym, .scanner-phase { transition: opacity 0.25s ease; }
.scanner.is-swapping .scanner-sym, .scanner.is-swapping .scanner-phase { opacity: 0.15; }
.scanner-track { height: 2px; background: rgba(255,255,255,0.06); border-radius: 2px; margin-top: 8px; overflow: hidden; position: relative; }
.scanner-track i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--green), var(--amber-bright)); border-radius: 2px; transition: width 0.6s linear; }
/* Continuous shimmer sweeping across the track, independent of the width
   change above — so the bar always reads as "live" even while it's holding
   at one phase between state changes, not just during a width transition. */
.scanner-track::after {
  content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
  animation: scanner-shimmer 1.8s linear infinite;
}
@keyframes scanner-shimmer { from { left: -40%; } to { left: 100%; } }
.scanner-note { font-size: 0.66rem; color: var(--text-dim); margin: 0 0 12px; line-height: 1.45; }
.chart-card-sub { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) {
  .pill-dot { animation: none; }
  .scanner-sym, .scanner-phase { transition: none; }
  .scanner-track i { transition: none; }
  .scanner-track::after { animation: none; display: none; }
}
.pill::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: 5px; box-shadow: 0 0 0 0 rgba(18,161,108,0.6);
  animation: pulse-dot 1.8s ease-out infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(18,161,108,0.55); }
  70% { box-shadow: 0 0 0 7px rgba(18,161,108,0); }
  100% { box-shadow: 0 0 0 0 rgba(18,161,108,0); }
}
@media (prefers-reduced-motion: reduce) { .pill::before { animation: none; } }
.chart-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.chart-stat { border-top: 1px solid var(--hairline); padding-top: 12px; }
.chart-stat .num { font-family: var(--font-mono); font-size: 1.3rem; color: var(--amber-bright); display: block; }
.chart-stat .cap { font-size: 0.78rem; color: var(--text-dim); }

/* ---------- Sections ---------- */
section { padding: 80px 0; }
.section-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
/* Matches .cta-band: a green gradient fading down into transparency, so the
   animated particle background stays visible through these sections instead
   of being hidden behind an opaque panel colour. Applies to What It Does,
   Why Traders Choose Lone Wolf, The Technology, Early Access, and
   Install in under five minutes. */
.alt-bg {
  background: linear-gradient(180deg, rgba(0,197,91,0.13), transparent);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

.card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px; }
.card .icon { width: 38px; height: 38px; border-radius: var(--radius-sm); background: rgba(0,197,91,0.14); color: var(--amber); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); margin-bottom: 14px; }

.tech-list { list-style: none; margin: 0; padding: 0; }
.tech-list li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 0.88rem; color: var(--text-dim); }
.tech-list li:first-child { border-top: none; }

/* ---------- Live market-coverage rows ----------
   Each row gets a pulsing status dot, offset per row so they breathe out of
   sync and read as three independent feeds rather than one blinking block.
   A faint highlight sweeps down the rows on the same cycle, suggesting the
   engine working through each market in turn. */
.tech-status { display: inline-flex; align-items: center; gap: 8px; color: var(--amber-bright); }
.status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--amber-bright);
  box-shadow: 0 0 0 0 rgba(0,197,91,0.5);
  animation: status-pulse 2.4s ease-out infinite;
}
.tech-list-live li:nth-child(2) .status-dot { animation-delay: 0.8s; }
.tech-list-live li:nth-child(3) .status-dot { animation-delay: 1.6s; }
@keyframes status-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,197,91,0.5); opacity: 1; }
  70%  { box-shadow: 0 0 0 7px rgba(0,197,91,0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0,197,91,0); opacity: 1; }
}
.tech-list-live li { position: relative; overflow: hidden; }
.tech-list-live li::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0,197,91,0.07), transparent);
  transform: translateX(-100%);
  display: none;
}
.tech-list-live li:nth-child(2)::after { animation-delay: 0.8s; }
.tech-list-live li:nth-child(3)::after { animation-delay: 1.6s; }
@keyframes row-scan {
  0%, 55%, 100% { transform: translateX(-100%); }
  30%           { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .status-dot { animation: none; box-shadow: none; }
  .tech-list-live li::after { animation: none; display: none; }
}
.tech-badge { font-family: var(--font-mono); font-size: 0.7rem; background: rgba(0,197,91,0.14); color: var(--amber); padding: 3px 9px; border-radius: 999px; }

/* ---------- Process ---------- */
/* How It Works: four steps on a "circuit" line that lights up in sequence
   (main.js adds .is-lit). Horizontal on desktop, vertical on phones. */
.process-timeline { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; position: relative; }
.process-timeline::before, .process-timeline::after {
  /* runs from the first node to the last one (one column + gap short of the edge) */
  content: ''; position: absolute; top: 9px; left: 9px; right: calc((100% - 66px) / 4 - 10px); height: 2px; border-radius: 2px;
}
.process-timeline::before { background: var(--hairline); }
.process-timeline::after {
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
  box-shadow: 0 0 12px rgba(0,197,91,0.6);
  transform: scaleX(0); transform-origin: left; transition: transform 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}
.process-timeline.is-lit::after { transform: scaleX(1); }
.process-step { position: relative; padding-top: 34px; }
.process-step .card { height: 100%; }
.process-step .card a { color: var(--amber-bright); }
.process-node {
  position: absolute; top: 0; left: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--hairline); z-index: 1;
  transition: border-color 0.4s ease, box-shadow 0.4s ease, background 0.4s ease;
}
.process-step.is-lit .process-node {
  border-color: var(--amber-bright); background: var(--amber);
  box-shadow: 0 0 0 4px var(--amber-tint), 0 0 16px rgba(0,197,91,0.7);
}
.process-step .process-num { transition: color 0.4s ease, text-shadow 0.4s ease; }
.process-step.is-lit .process-num { color: var(--amber-bright); text-shadow: 0 0 10px rgba(0,197,91,0.6); }
@media (max-width: 860px) {
  .process-timeline { grid-template-columns: 1fr; gap: 16px; }
  .process-timeline::before, .process-timeline::after { top: 9px; bottom: 9px; left: 9px; right: auto; width: 2px; height: auto; }
  .process-timeline::after { transform: scaleY(0); transform-origin: top; }
  .process-timeline.is-lit::after { transform: scaleY(1); }
  .process-step { padding: 0 0 0 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .process-timeline::after { transform: none !important; transition: none; }
}
.process-num { font-family: var(--font-mono); color: var(--amber); font-size: 0.85rem; }
.checklist { list-style: none; margin: 0; padding: 22px 26px; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); display: grid; gap: 10px; }
.checklist li { font-size: 0.92rem; color: var(--text-dim); }
.checklist li::before { content: '✓ '; color: var(--green); font-weight: 700; }

/* ---------- Stats strip ---------- */
.stats-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; margin-bottom: 26px; }
.stat-cell { padding: 26px 22px; border-left: 1px solid var(--hairline); text-align: center; }
.stat-cell:first-child { border-left: none; }
.stat-cell .num { font-family: var(--font-mono); font-size: 1.8rem; color: var(--amber-bright); display: block; }
.stat-cell .cap { font-size: 0.8rem; color: var(--text-dim); }
@media (max-width: 700px) { .stats-strip { grid-template-columns: 1fr 1fr; } .stat-cell:nth-child(3) { border-left: none; } }

/* ---------- Chart line "draw-in" (hero + performance chart) ----------
   main.js measures each polyline's real length and sets stroke-dasharray/
   -dashoffset, then this transition animates dashoffset back to 0 once the
   card scrolls into view. The polygon (area fill under the line) just
   fades in behind it. Matches the .reveal convention: default state needs
   JS to become visible, and reduced-motion always shows the final state. */
.chart-card svg polygon, .perf-card svg polygon { opacity: 0; transition: opacity 1.4s ease 0.5s; }
.chart-card svg polygon.is-drawn, .perf-card svg polygon.is-drawn { opacity: 1; }
.chart-card svg polyline, .perf-card svg polyline { transition: stroke-dashoffset 1.6s cubic-bezier(0.22, 1, 0.36, 1); }
@media (prefers-reduced-motion: reduce) {
  .chart-card svg polygon, .perf-card svg polygon { opacity: 1; transition: none; }
  .chart-card svg polyline, .perf-card svg polyline { transition: none; }
  .chart-card svg polyline.is-flowing, .perf-card svg polyline.is-flowing { animation: none; stroke-dasharray: none !important; }
}

/* ---------- Equity-curve end marker ----------
   A pulsing dot parked on the final point of each backtested curve. Added by
   main.js once the line has finished drawing, so it appears at the end of the
   animation rather than sitting there during it. Decorative only — the charts
   stay labelled as backtested, and this marker implies no live data. */
/* The final data point sits exactly on the SVG's right edge, so the marker's
   halo was being clipped in half. The cards have padding around the chart, so
   letting the SVG overflow gives the marker room to render fully. */
.chart-card svg, .perf-card svg { overflow: visible; }
.curve-marker { opacity: 0; transition: opacity 0.4s ease; }
.curve-marker.is-live { opacity: 1; }
.curve-marker .curve-marker-core { fill: var(--amber-bright); }
.curve-marker .curve-marker-halo {
  fill: none; stroke: var(--amber-bright); stroke-width: 1.5;
  transform-origin: center; transform-box: fill-box;
  animation: curve-ping 2.2s ease-out infinite;
}
/* Once the one-time draw-in finishes, main.js adds .is-flowing so the line
   keeps a subtle continuous "marching ants" motion — reads as live/active
   rather than a picture that stops moving the moment it's drawn. */
@keyframes curve-flow { to { stroke-dashoffset: -24; } }
@keyframes curve-ping {
  0%   { transform: scale(0.5); opacity: 0.8; }
  80%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .curve-marker { opacity: 1; transition: none; }
  .curve-marker .curve-marker-halo { animation: none; opacity: 0.35; }
}

.perf-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; margin-top: 20px; position: relative; overflow: hidden; }
.video-showcase { margin-top: 40px; text-align: center; }
.video-showcase-head { max-width: 1000px; margin: 0 auto 24px; }
.video-showcase-head .eyebrow { display: block; margin-bottom: 8px; }
.video-showcase-head h3 { font-size: 1.4rem; margin-bottom: 8px; }
.video-showcase-head p { color: var(--text-dim); }
.video-showcase-player {
  width: 100%; max-width: 860px; aspect-ratio: 1920 / 948; display: block; margin: 0 auto;
  border-radius: var(--radius); border: 1px solid var(--hairline); background: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.perf-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; gap: 8px; }
.perf-card-head .range { font-family: var(--font-mono); font-size: 0.78rem; color: var(--text-dim); }

/* ---------- Testimonials ---------- */
.stars { color: var(--amber); letter-spacing: 2px; margin-bottom: 12px; font-size: 0.9rem; }
.testimonial-name { font-weight: 700; margin-top: 14px; }
.testimonial-loc { font-size: 0.8rem; color: var(--text-dim); }

/* ---------- Pricing ---------- */
.plans-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1080px; margin: 0 auto; }
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; } }
.plan { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; }
.plan.featured {
  border-color: var(--amber);
  background: linear-gradient(180deg, var(--amber-tint), var(--panel) 60%);
  box-shadow: 0 0 40px rgba(0,197,91,0.18), 0 20px 50px rgba(0,0,0,0.4);
  position: relative;
}
.plan.featured::before {
  content: '';
  position: absolute; inset: -1px; border-radius: inherit; z-index: -1;
  background: linear-gradient(180deg, var(--amber), transparent 60%);
  opacity: 0.35; filter: blur(18px);
  pointer-events: none;
}
.plan-name { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.plan.featured .plan-name { color: var(--amber-bright); }
.save-badge { font-family: var(--font-body); font-size: 0.68rem; text-transform: none; letter-spacing: 0; background: var(--amber-tint); color: var(--amber-bright); padding: 3px 10px; border-radius: 999px; }
.plan:not(.featured) .plan-name { color: var(--text-dim); }
.plan-price { font-family: var(--font-display); font-size: 2.3rem; margin: 8px 0 4px; }
.plan-price small { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-dim); font-weight: 500; }
.plan-feats { list-style: none; margin: 20px 0 24px; padding: 0; flex: 1; }
.plan-feats li { padding: 8px 0; border-top: 1px solid var(--hairline); font-size: 0.9rem; color: var(--text-dim); }
.plan-feats li:first-child { border-top: none; }
.plan-feats li::before { content: '✓ '; color: var(--green); }
.pay-note { text-align: center; font-size: 0.85rem; color: var(--text-dim); margin-top: 24px; }
.crypto-banner {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 18px; padding: 10px 20px;
  border: 1px solid var(--amber); border-radius: 999px;
  background: var(--amber-tint); color: var(--amber-bright);
  font-size: 0.85rem; font-weight: 600;
}

/* ---------- FAQ ---------- */
.faq-item { border-top: 1px solid var(--hairline); }
.faq-item:last-child { border-bottom: 1px solid var(--hairline); }
.faq-q { width: 100%; text-align: left; background: none; border: none; color: var(--text); font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 20px 4px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 20px; transition: color 0.2s ease, padding-left 0.2s ease; }
.faq-q:hover { color: var(--amber-bright); padding-left: 8px; }
.faq-q .plus { font-family: var(--font-mono); color: var(--amber); font-size: 1.1rem; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.faq-q:hover .plus { transform: scale(1.2); }
.faq-item[data-open="true"] .plus { transform: rotate(45deg); }
.faq-item[data-open="true"] .faq-q:hover .plus { transform: rotate(45deg) scale(1.2); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.faq-a-inner { padding-bottom: 20px; color: var(--text-dim); }
.faq-item[data-open="true"] .faq-a { max-height: 2600px; }

/* ---------- CTA band ---------- */
.cta-band { text-align: center; background: linear-gradient(180deg, rgba(0,197,91,0.13), transparent); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
.channel-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 12px; }
.channel { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); transition: border-color 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease; }
.channel:hover { border-color: var(--amber); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,0.35), 0 0 0 1px rgba(0,197,91,0.12); }
.channel .glyph { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--panel-2); color: var(--amber); font-family: var(--font-mono); font-size: 0.85rem; flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s ease; }
.channel:hover .glyph { transform: scale(1.12); background: var(--amber-tint); }
.channel small { color: var(--text-dim); display: block; font-size: 0.8rem; }
.support-hours { font-size: 0.85rem; color: var(--text-dim); margin-bottom: 18px; }
.crypto-note { font-size: 0.85rem; color: var(--text-dim); }
.crypto-note strong { color: var(--amber); font-family: var(--font-mono); font-weight: 500; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.85rem; margin-bottom: 6px; color: var(--text-dim); }
.field input, .field select, .field textarea { width: 100%; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm); font-family: var(--font-body); font-size: 0.95rem; }
.field textarea { resize: vertical; min-height: 120px; }
.form-note { font-size: 0.8rem; color: var(--text-dim); margin-top: 12px; }
.form-status { font-size: 0.88rem; margin-top: 12px; display: none; }
.form-status.show { display: block; }
.form-status.ok { color: var(--green); }
.form-status.err { color: var(--red); }
.form-status.err a { color: inherit; font-weight: 600; text-decoration: underline; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--hairline); padding: 50px 0 28px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 36px; }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-grid h4 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--amber); font-family: var(--font-mono); font-weight: 500; margin-bottom: 14px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer-grid a { text-decoration: none; color: var(--text-dim); font-size: 0.88rem; display: inline-block; transition: color 0.2s ease, transform 0.2s cubic-bezier(0.22, 1, 0.36, 1); }
.footer-grid a:hover { color: var(--amber-bright); transform: translateX(3px); }
.footer-legal { border-top: 1px solid var(--hairline); padding-top: 22px; font-size: 0.78rem; color: var(--text-dim); }
.footer-legal .risk { max-width: 900px; margin-top: 12px; line-height: 1.6; }
.hercules-note { text-align: right; font-size: 0.72rem; color: var(--text-dim); margin-top: 10px; }

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.page-hero { padding: 60px 0 36px; border-bottom: 1px solid var(--hairline); }
.legal-content h2 { font-size: 1.3rem; margin-top: 2em; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content ul, .legal-content ol { color: var(--text-dim); padding-left: 1.2em; }
.legal-content li { margin-bottom: 0.5em; }
.legal-content .callout {
  background: var(--panel); border: 1px solid var(--hairline); border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm); padding: 16px 20px; margin: 1.5em 0; font-size: 0.92rem;
}
.legal-content .callout strong { color: var(--amber-bright); }
.placeholder-field { color: var(--amber-bright); font-style: italic; }

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
/* staggered children inside a revealed group */
.reveal-group.is-visible .reveal-child:nth-child(1) { transition-delay: 0.02s; }
.reveal-group.is-visible .reveal-child:nth-child(2) { transition-delay: 0.09s; }
.reveal-group.is-visible .reveal-child:nth-child(3) { transition-delay: 0.16s; }
.reveal-group.is-visible .reveal-child:nth-child(4) { transition-delay: 0.23s; }
.reveal-group.is-visible .reveal-child:nth-child(5) { transition-delay: 0.30s; }
.reveal-group.is-visible .reveal-child:nth-child(6) { transition-delay: 0.37s; }
.reveal-child { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal-group.is-visible .reveal-child { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-child { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* header shrinks slightly + gains a stronger shadow once you've scrolled */
.site-header.scrolled { box-shadow: 0 8px 24px rgba(0,0,0,0.35); }

/* number count-up target — no visual change, just a hook for main.js */
.count-up { font-variant-numeric: tabular-nums; }

/* ============================================================
   Small-phone refinements (< 480px) — the breakpoints above
   handle tablet/large-phone; this tightens spacing and type so
   nothing feels cramped or oversized on a small handset.
   ============================================================ */
@media (max-width: 480px) {
  .container { padding: 0 16px; }
  section { padding: 56px 0; }
  .hero { padding: 64px 0 48px; }
  .hero-actions .btn, .hero-actions { width: 100%; }
  .hero-actions { flex-direction: column; }
  .hero-checks { gap: 10px 18px; }
  .site-header .container { height: 64px; }
  .brand { font-size: 0.92rem; }
  .stats-strip { grid-template-columns: 1fr 1fr; }
  .stat-cell { padding: 20px 14px; }
  .stat-cell .num { font-size: 1.5rem; }
  .chart-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
  .plan { padding: 24px 20px; }
  .card { padding: 22px; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .contact-grid { gap: 32px; }
  .broker-name { font-size: 0.95rem; }
  .broker-track { gap: 12px; }
  .plan-name { font-size: 0.68rem; }
}

/* Landscape phones / small tablets: keep the hero from forcing an
   awkward amount of vertical scroll before any content shows */
@media (max-width: 900px) and (max-height: 500px) and (orientation: landscape) {
  .hero { padding: 56px 0 40px; }
}

/* Respect safe-area insets on notched phones for the sticky header */
@supports (padding: max(0px)) {
  .site-header .container { padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); }
}

/* ---------- Prop firm rules ---------- */
.prop-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 32px 40px; align-items: stretch; }
/* heading spans the width; the notes column and the rule cards share one row, top and bottom aligned */
.prop-intro { grid-column: 1 / -1; max-width: 820px; }
.prop-intro p:last-child { margin-bottom: 0; }
.prop-notes { display: flex; flex-direction: column; gap: 14px; }
.prop-notes > .prop-note, .prop-notes > .prop-disclaimer, .prop-notes > .prop-ea-rule { margin-top: 0; flex: 1; align-items: center; }
.prop-notes > .prop-calc-link { margin-top: 0; align-self: flex-start; }
@media (max-width: 900px) { .prop-grid { grid-template-columns: 1fr; } }
.prop-note {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--green-tint); border: 1px solid var(--green);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 24px;
  font-size: 0.9rem; color: var(--text-dim);
}
.prop-note-icon { color: var(--green); flex-shrink: 0; font-weight: 700; }
.dd-context {
  display: flex; gap: 12px; align-items: center;
  background: var(--green-tint); border: 1px solid var(--green);
  border-radius: var(--radius-sm); padding: 16px 22px; margin: 18px 0 0;
  font-size: 0.85rem; line-height: 1.5; color: var(--text-dim); text-align: left;
}
.dd-context-icon { color: var(--green); flex-shrink: 0; font-weight: 700; margin-top: 1px; }
.dd-context strong { color: var(--text); }
.prop-disclaimer {
  display: flex; gap: 12px; align-items: flex-start;
  background: rgba(194, 91, 77, 0.12); border: 1px solid var(--red);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 14px;
  font-size: 0.85rem; color: var(--text-dim);
}
.prop-disclaimer-icon {
  color: var(--red); flex-shrink: 0; font-weight: 800;
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--red);
  display: flex; align-items: center; justify-content: center; font-size: 0.75rem; margin-top: 1px;
}
.prop-rules { display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 14px; }
@media (max-width: 560px) { .prop-rules { grid-template-columns: 1fr; } }
.prop-rule { display: flex; gap: 12px; background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 18px; }
.prop-check {
  width: 22px; height: 22px; border-radius: 50%; background: var(--green-tint); color: var(--green);
  display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; flex-shrink: 0; margin-top: 2px;
}
.prop-rule h3 { font-size: 0.95rem; margin-bottom: 4px; }
.prop-rule p { font-size: 0.85rem; margin: 0; }


/* ---------- Download ---------- */
.download-card {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
  padding: 30px; max-width: 760px; margin: 0 auto;
}
.download-row { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-bottom: 22px; border-bottom: 1px solid var(--hairline); margin-bottom: 22px; }
.download-row:last-of-type { border-bottom: none; }
.download-file { display: flex; gap: 14px; align-items: center; }
.download-file .icon { margin-bottom: 0; width: 44px; height: 44px; font-size: 1.1rem; }
.download-file .release-label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); display: block; margin-bottom: 2px; }
.download-file .filename { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.download-file .meta { font-size: 0.8rem; color: var(--text-dim); margin-top: 2px; }
.download-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 560px) { .download-meta-grid { grid-template-columns: 1fr; } }
.appearance-showcase { margin-top: 40px; text-align: center; }
.appearance-showcase-head { max-width: 560px; margin: 0 auto 28px; }
.appearance-showcase-head .eyebrow { display: block; margin-bottom: 8px; }
.appearance-showcase-head h3 { font-size: 1.4rem; margin-bottom: 8px; }
.appearance-showcase-head p { color: var(--text-dim); }
.appearance-shots { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; max-width: 820px; margin: 0 auto; align-items: end; }
.appearance-shots figure { margin: 0; text-align: left; display: flex; flex-direction: column; height: 100%; }
.appearance-shots img {
  width: 100%; height: 560px; object-fit: contain; object-position: bottom;
  display: block; border-radius: var(--radius);
  border: 1px solid var(--hairline); background: var(--panel-2);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.appearance-shots figure:hover img { transform: translateY(-4px); box-shadow: 0 28px 60px rgba(0,0,0,0.45); }
.appearance-shots figcaption { font-size: 0.85rem; color: var(--text-dim); margin-top: 10px; text-align: center; }
@media (max-width: 640px) { .appearance-shots { grid-template-columns: 1fr; max-width: 380px; } .appearance-shots img { height: auto; object-fit: initial; } }
.faq-backtest-shots { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.faq-backtest-shots figure { margin: 0; }
.faq-backtest-shots img {
  width: 100%; height: auto; display: block; border-radius: var(--radius-sm);
  border: 1px solid var(--hairline); background: var(--panel-2);
}
.faq-backtest-shots figcaption { font-size: 0.78rem; color: var(--text-dim); margin-top: 6px; }
.download-meta-cell { background: var(--panel-2); border-radius: var(--radius-sm); padding: 14px 16px; }
.download-meta-cell .label { font-family: var(--font-mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); display: block; margin-bottom: 4px; }
.download-meta-cell .value { font-size: 0.92rem; font-weight: 600; }

/* ---------- Scroll progress bar ---------- */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--amber), var(--amber-bright));
  z-index: 100; transition: width 0.1s ease-out;
}

/* ---------- Card hover lift + glow (professional micro-interaction) ---------- */
.card, .plan, .prop-rule, .download-card, .perf-card, .chart-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}
.card:hover, .plan:hover {
  transform: translateY(-4px);
  border-color: var(--amber);
  box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 0 1px rgba(0,197,91,0.14), 0 0 24px rgba(0,197,91,0.08);
}
/* .prop-rule already had a transition declared above but no matching hover
   state, so the prop-firm rule cards were the only cards on the page that
   stayed inert. Same lift as the others, slightly softer. */
.prop-rule:hover {
  transform: translateY(-3px);
  border-color: var(--amber);
  box-shadow: 0 12px 28px rgba(0,0,0,0.38), 0 0 0 1px rgba(0,197,91,0.12);
}
.prop-rule:hover .prop-check {
  background: var(--amber-tint);
  transform: scale(1.12);
}
.prop-check { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s ease; }

/* Featured plan: a slow, low-amplitude glow pulse so it reads as the
   recommended option without needing a different accent colour. */
.plan.featured { box-shadow: 0 0 40px rgba(0,197,91,0.18), 0 20px 50px rgba(0,0,0,0.4); }
@keyframes featured-pulse {
  0%, 100% { box-shadow: 0 0 30px rgba(0,197,91,0.14), 0 20px 50px rgba(0,0,0,0.4); }
  50%      { box-shadow: 0 0 52px rgba(0,197,91,0.26), 0 20px 50px rgba(0,0,0,0.4); }
}
/* Hover still wins over the pulse. */
.plan.featured:hover { animation-play-state: paused; }

/* Stat cells: quiet lift so the metric row doesn't feel dead next to the
   cards around it. */
.stat-cell { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), background 0.3s ease; }
.stat-cell:hover { transform: translateY(-3px); background: rgba(0,197,91,0.04); }

@media (prefers-reduced-motion: reduce) {
  .card, .plan, .prop-rule, .download-card, .perf-card, .chart-card { transition: none; }
  .card:hover, .plan:hover, .prop-rule:hover, .stat-cell:hover { transform: none; }
  .plan.featured { animation: none; }
  .prop-rule:hover .prop-check { transform: none; }
}

/* ---------- Broker / prop-firm marquee ---------- */
.broker-strip { padding: 44px 0; overflow: hidden; }
.broker-strip-label {
  text-align: center; font-family: var(--font-mono); font-size: 0.75rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 22px;
}
.broker-marquee {
  overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.broker-track {
  display: inline-flex; align-items: center; gap: 18px; white-space: nowrap;
  animation: broker-scroll 32s linear infinite;
  will-change: transform;
}
.broker-marquee:hover .broker-track { animation-play-state: paused; }
.broker-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--text-dim); opacity: 0.75; transition: color 0.2s ease, opacity 0.2s ease;
}
.broker-name:hover { color: var(--amber-bright); opacity: 1; }
.broker-dot { color: var(--amber); opacity: 0.5; font-size: 0.8rem; }
.broker-strip-note { text-align: center; font-size: 0.78rem; color: var(--text-dim); margin-top: 24px; max-width: 640px; margin-left: auto; margin-right: auto; }

@keyframes broker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .broker-track { animation: none; }
  .broker-marquee { overflow-x: auto; }
}

/* ---------- Animated wordmark: letters jump on hover ---------- */
.brand-text { display: inline-flex; }
.brand-letter {
  display: inline-block;
  transition: color 0.2s ease;
}
.brand:hover .brand-letter {
  animation: letter-jump 0.6s ease;
  animation-delay: calc(var(--i) * 0.035s);
}
@keyframes letter-jump {
  0% { transform: translateY(0); }
  30% { transform: translateY(-7px); color: var(--amber-bright); }
  55% { transform: translateY(0); }
  75% { transform: translateY(-3px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .brand:hover .brand-letter { animation: none; }
}

/* ---------- Star rating widget (reviews page) ---------- */
.star-rating { display: flex; gap: 6px; }
.star {
  background: none; border: none; cursor: pointer; font-size: 1.8rem; line-height: 1;
  color: var(--hairline); padding: 2px; transition: color 0.15s ease, transform 0.15s ease;
}
.star:hover { transform: scale(1.15); }
.star.filled { color: var(--amber); }

/* ---------- Reusable atmospheric grid + glow background ----------
   Same signature look as the hero, extracted so it can be reused on
   other sections with a different accent color (e.g. green for the
   Performance/proof section, tying into its chart color). */
.glow-section { position: relative; overflow: hidden; }
.glow-section > .container { position: relative; z-index: 1; }
.glow-section::before {
  content: ''; position: absolute; inset: 0;
  background-size: auto, 42px 42px, 42px 42px;
  /* Percentage-based mask so it scales with the section. The old fixed
     900px x 500px ellipse stopped short on wide screens, cutting the tint
     off with a hard straight edge that read as a rectangular smear in the
     corner. Percentages keep the fade soft at any viewport width. */
  -webkit-mask-image: radial-gradient(75% 100% at 70% 20%, #000 35%, transparent 80%);
  mask-image: radial-gradient(75% 100% at 70% 20%, #000 35%, transparent 80%);
  animation: grid-drift 22s linear infinite;
  pointer-events: none;
}
.glow-section.glow-amber::before {
  background:
    radial-gradient(55% 90% at 85% -10%, rgba(0,197,91,0.16), transparent 60%),
    linear-gradient(rgba(0,197,91,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,197,91,0.05) 1px, transparent 1px);
}
.glow-section.glow-green::before {
  background:
    radial-gradient(55% 90% at 15% -10%, rgba(18,161,108,0.16), transparent 60%),
    linear-gradient(rgba(18,161,108,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,161,108,0.05) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) { .glow-section::before { animation: none; } }

/* ---------- Skip link (accessibility) ----------
   Hidden off-screen until it receives keyboard focus, then jumps into
   view as the very first thing a keyboard/screen-reader user encounters,
   letting them bypass the nav straight to the main content. */
.skip-link {
  position: absolute; top: -100px; left: 12px; z-index: 200;
  background: var(--amber); color: var(--amber-ink);
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-weight: 700; text-decoration: none;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 12px; }

/* ---------- Back-to-top button ---------- */
.back-to-top {
  position: fixed; bottom: 24px; right: 24px; z-index: 90;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--panel); border: 1px solid var(--hairline); color: var(--text);
  font-size: 1.2rem; line-height: 1; cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.25s ease, visibility 0.25s;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { border-color: var(--amber); color: var(--amber-bright); transform: translateY(-3px); }
/* ---- Animated wolf mark inside the back-to-top button ---- */
.back-to-top { display: flex; align-items: center; justify-content: center; padding: 0; }
.wolf-icon { width: 22px; height: 22px; display: block; overflow: visible; }
/* Idle: a slow, subtle "breathing" bob so the wolf feels alive but never
   distracts while you're reading. */
.wolf-head { transform-origin: 16px 18px;  }
@keyframes wolf-breathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-0.6px) scale(1.04); }
}
/* Ears flick independently, slightly out of sync, which is what sells it
   as an animal rather than a bobbing logo. */
.wolf-ear-l { transform-origin: 8px 11px;  }
.wolf-ear-r { transform-origin: 24px 11px;  }
@keyframes wolf-ear-flick {
  0%, 82%, 100% { transform: rotate(0deg); }
  88%           { transform: rotate(-9deg); }
  94%           { transform: rotate(4deg); }
}
/* Eyes blink on the same loop as the breathing. */
.wolf-eye {  transform-origin: center; }
@keyframes wolf-blink {
  0%, 92%, 100% { opacity: 1; }
  95%           { opacity: 0.15; }
}
/* On hover the wolf "perks up" and looks toward the top of the page. */
.back-to-top:hover .wolf-head { animation: none; transform: translateY(-1.5px) scale(1.1); transition: transform 0.25s cubic-bezier(0.22,1,0.36,1); }
.back-to-top:hover .wolf-ear-l { animation: none; transform: rotate(-12deg); transition: transform 0.25s ease; }
.back-to-top:hover .wolf-ear-r { animation: none; transform: rotate(12deg); transition: transform 0.25s ease; }
@media (max-width: 480px) { .back-to-top { bottom: 16px; right: 16px; width: 40px; height: 40px; } }
@media (prefers-reduced-motion: reduce) {
  .back-to-top { transition: opacity 0.2s ease, visibility 0.2s; }
  .back-to-top:hover { transform: none; }
  .wolf-head, .wolf-ear-l, .wolf-ear-r, .wolf-eye { animation: none; }
  .back-to-top:hover .wolf-head, .back-to-top:hover .wolf-ear-l, .back-to-top:hover .wolf-ear-r { transform: none; }
}

/* ---------- Purchase steps (sets expectations before the "ask") ---------- */
.purchase-steps {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 14px; max-width: 900px; margin: 28px auto 0; padding: 18px 22px;
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius);
}
.purchase-step { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-dim); }
.purchase-step-num {
  width: 24px; height: 24px; border-radius: 50%; background: var(--amber-tint); color: var(--amber);
  display: flex; align-items: center; justify-content: center; font-family: var(--font-mono);
  font-size: 0.78rem; font-weight: 700; flex-shrink: 0;
}
.purchase-step-arrow { color: var(--hairline); font-size: 1.1rem; }
@media (max-width: 700px) {
  .purchase-steps { flex-direction: column; align-items: flex-start; }
  .purchase-step-arrow { display: none; }
}


/* ============================================================
   Hero trade demo — candle-by-candle structure entry (drawn by main.js)
   ============================================================ */
.trade-demo { display: block; height: auto; margin-bottom: 6px; overflow: visible; }
.trade-demo .td-wick { stroke-width: 1; }
.trade-demo .td-up { fill: var(--amber-hex); stroke: var(--amber-hex); }
.trade-demo .td-down { fill: var(--red); stroke: var(--red); }
.trade-demo .td-candle { opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease; }
.trade-demo .td-candle.is-in { opacity: 1; transform: none; }
.trade-demo .td-level { stroke-width: 1; stroke-dasharray: 4 3; opacity: 0; transition: opacity 0.35s ease; }
.trade-demo .td-level.is-in { opacity: 1; }
.trade-demo .td-swing { stroke: var(--text-dim); }
.trade-demo .td-swing.is-broken { stroke: var(--amber-bright-hex); stroke-dasharray: none; }
.trade-demo .td-entry { stroke: var(--text); stroke-dasharray: none; }
.trade-demo .td-sl { stroke: var(--red); }
.trade-demo .td-tp { stroke: var(--amber-bright-hex); }
.trade-demo .td-zone { opacity: 0; transition: opacity 0.4s ease; }
.trade-demo .td-zone.is-in { opacity: 1; }
.trade-demo .td-zone-risk { fill: rgba(194, 91, 77, 0.14); }
.trade-demo .td-zone-reward { fill: rgba(0, 197, 91, 0.12); }
.trade-demo .td-label {
  font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; fill: var(--text-dim);
  opacity: 0; transition: opacity 0.35s ease;
}
.trade-demo .td-label.is-in { opacity: 1; }
.trade-demo .td-label-bos { fill: var(--amber-bright-hex); }
.trade-demo .td-label-sl { fill: var(--red); }
.trade-demo .td-label-tp { fill: var(--amber-bright-hex); }
.trade-demo .td-hit { animation: td-hit-flash 0.9s ease-out; }
@keyframes td-hit-flash {
  0% { filter: drop-shadow(0 0 0 rgba(0,197,91,0)); }
  30% { filter: drop-shadow(0 0 8px rgba(0,197,91,0.9)); }
  100% { filter: drop-shadow(0 0 0 rgba(0,197,91,0)); }
}
[data-trade-phase] { color: var(--amber-bright); }
@media (prefers-reduced-motion: reduce) {
  .trade-demo .td-candle, .trade-demo .td-level, .trade-demo .td-zone, .trade-demo .td-label { transition: none; }
}

/* ============================================================
   Stop-loss shield — draws itself in when the box scrolls into view
   ============================================================ */
.sl-shield { width: 34px; height: 34px; position: relative; display: inline-flex; margin-top: 0; }
.sl-shield svg { width: 100%; height: 100%; overflow: visible; }
.sl-shield-body {
  fill: rgba(0,197,91,0); stroke: var(--amber-bright-hex); stroke-width: 2; stroke-linejoin: round;
  stroke-dasharray: 110; stroke-dashoffset: 110;
  transition: stroke-dashoffset 1s cubic-bezier(0.65,0,0.35,1), fill 0.5s ease 0.9s;
}
.sl-shield-check {
  fill: none; stroke: var(--amber-bright-hex); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset 0.45s ease 1s;
}
.sl-shield.is-armed .sl-shield-body { stroke-dashoffset: 0; fill: rgba(0,197,91,0.18); }
.sl-shield.is-armed .sl-shield-check { stroke-dashoffset: 0; }
.sl-shield::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1px solid var(--amber-bright-hex); opacity: 0; pointer-events: none;
}
.sl-shield.is-armed::after { animation: sl-ping 2.6s ease-out 1.4s infinite; }
@keyframes sl-ping {
  0% { opacity: 0.7; transform: scale(0.7); }
  70%, 100% { opacity: 0; transform: scale(1.6); }
}
@media (prefers-reduced-motion: reduce) {
  .sl-shield-body, .sl-shield-check { stroke-dashoffset: 0; transition: none; }
  .sl-shield-body { fill: rgba(0,197,91,0.18); }
  .sl-shield.is-armed::after { animation: none; }
}

/* ============================================================
   Cursor spotlight on cards + 3D tilt on the Lifetime plan
   (desktop mouse only — main.js sets --mx / --my / --rx / --ry)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {
  .card, .plan, .prop-rule { position: relative; }
  .card::after, .plan::after, .prop-rule::after {
    content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(84, 221, 125, 0.13), transparent 65%);
    opacity: 0; transition: opacity 0.3s ease;
  }
  .card:hover::after, .plan:hover::after, .prop-rule:hover::after { opacity: 1; }
  .plan.featured.is-tilting {
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
    transition: transform 0.12s ease-out, box-shadow 0.3s ease, border-color 0.3s ease;
  }
}

/* ============================================================
   Sticky buy bar — phones only, after the hero, hidden over Pricing
   ============================================================ */
.buy-bar { display: none; }
@media (max-width: 760px) {
  .buy-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 90;
    padding: 10px 10px 10px 16px; border-radius: var(--radius);
    background: rgba(19, 23, 30, 0.92); border: 1px solid var(--amber);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 24px rgba(0,197,91,0.18);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(140%); transition: transform 0.35s cubic-bezier(0.22,1,0.36,1);
  }
  .buy-bar.visible { transform: none; }
  .buy-bar-text { font-size: 0.82rem; color: var(--text-dim); line-height: 1.3; }
  .buy-bar-text strong { display: block; color: var(--text); font-size: 0.92rem; }
  .buy-bar .btn { padding: 10px 16px; font-size: 0.85rem; white-space: nowrap; }
  /* keep the back-to-top wolf clear of the bar */
  body.has-buy-bar .back-to-top { bottom: 84px; }
}


/* ============================================================
   Performance dashboard — stat tiles, equity chart, Prop Firm Guard
   ============================================================ */
.stat-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.stat-tile {
  position: relative; overflow: hidden; text-align: center;
  padding: 24px 18px 22px; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(0,197,91,0.07), rgba(19,23,30,0.9) 55%);
  border: 1px solid var(--hairline);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, box-shadow 0.3s ease;
}
/* glowing accent along the top edge */
.stat-tile::before {
  content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--amber-bright), transparent);
  box-shadow: 0 0 14px rgba(0,197,91,0.8);
}
/* a light sweep passes across each tile, staggered */
.stat-tile::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(84,221,125,0.10), transparent);
  pointer-events: none;
  display: none;
}
.stat-tile:nth-child(2)::after { animation-delay: 0.6s; }
.stat-tile:nth-child(3)::after { animation-delay: 1.2s; }
.stat-tile:nth-child(4)::after { animation-delay: 1.8s; }
@keyframes tile-sweep { 0%, 55% { left: -60%; } 85%, 100% { left: 120%; } }
.stat-tile:hover { transform: translateY(-4px); border-color: var(--amber); box-shadow: 0 14px 34px rgba(0,0,0,0.4), 0 0 24px rgba(0,197,91,0.12); }
.stat-icon {
  width: 40px; height: 40px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; background: var(--amber-tint); border: 1px solid rgba(0,197,91,0.35);
  color: var(--amber-bright);
}
.stat-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.stat-tile .num { font-family: var(--font-mono); font-size: 1.9rem; color: var(--amber-bright); display: block; text-shadow: 0 0 18px rgba(0,197,91,0.35); }
.stat-tile .cap { font-size: 0.8rem; color: var(--text-dim); display: block; margin-top: 4px; line-height: 1.45; }

@keyframes shield-glow { 0%, 100% { box-shadow: 0 0 0 rgba(0,197,91,0); } 50% { box-shadow: 0 0 18px rgba(0,197,91,0.55); } }
@media (max-width: 860px) { .stat-tiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .stat-tiles { gap: 10px; } .stat-tile { padding: 20px 12px 18px; } .stat-tile .num { font-size: 1.5rem; } }

.perf-dash { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; align-items: stretch; }
.perf-dash .perf-card { margin-top: 0; }
@media (max-width: 960px) { .perf-dash { grid-template-columns: 1fr; } }
.perf-card-head .range { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--hairline); background: var(--panel-2); }
.range-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 8px var(--amber-bright); animation: pill-pulse 2s ease-in-out infinite; }

.perf-chart { position: relative; margin: 14px 0 6px; }
.perf-chart svg { position: relative; z-index: 1; display: block; }
.perf-grid { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.perf-grid i { display: block; height: 1px; background: linear-gradient(90deg, transparent, var(--hairline) 10%, var(--hairline) 90%, transparent); }
.perf-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.06em; margin-bottom: 14px; }
.perf-cursor {
  position: absolute; top: 0; bottom: 0; width: 0; z-index: 2; pointer-events: none;
  border-left: 1px dashed rgba(84,221,125,0.45); opacity: 0; transition: opacity 0.4s ease;
}
.perf-cursor.is-live { opacity: 1; }
.perf-cursor-dot {
  position: absolute; left: 0; top: var(--dot-y, 10%); width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%; background: var(--amber-bright); box-shadow: 0 0 0 4px rgba(0,197,91,0.2), 0 0 16px rgba(84,221,125,0.9);
}
.perf-cursor-tip {
  position: absolute; top: -6px; left: 8px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--amber-bright);
  background: rgba(10,13,18,0.85); border: 1px solid rgba(0,197,91,0.35); border-radius: 6px; padding: 2px 7px;
}

.guard-card {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, rgba(0,197,91,0.08), var(--panel) 45%);
  border: 1px solid var(--hairline); border-radius: var(--radius); padding: 22px;
  transition: border-color 0.6s ease, box-shadow 0.6s ease;
}
.guard-card.is-complete { border-color: rgba(0,197,91,0.6); box-shadow: 0 0 30px rgba(0,197,91,0.15); }
/* scan line that runs down the panel while rules arm */
.guard-card::before {
  content: ''; position: absolute; left: 0; right: 0; height: 40px; top: -40px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(84,221,125,0.12), transparent);
  display: none;
}
@keyframes guard-scan { to { top: 100%; } }
.guard-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.guard-eyebrow { display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-bright); margin-bottom: 4px; }
.guard-head strong { font-size: 1rem; }
.guard-ring { position: relative; width: 56px; height: 56px; flex-shrink: 0; }
.guard-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.guard-ring circle { fill: none; stroke-width: 3.5; }
.guard-ring-track { stroke: var(--hairline); }
.guard-ring-fill {
  stroke: var(--amber-bright-hex); stroke-linecap: round;
  stroke-dasharray: 119.4; stroke-dashoffset: calc(119.4 * (1 - var(--armed, 0)));
  filter: drop-shadow(0 0 4px rgba(0,197,91,0.8)); transition: stroke-dashoffset 0.35s ease;
}
.guard-count { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); }
.guard-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; }
.guard-row {
  display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: var(--radius-sm); border: 1px solid var(--hairline); background: rgba(10,13,18,0.55);
  font-size: 0.85rem; opacity: 0.45; transition: opacity 0.35s ease, border-color 0.35s ease, background 0.35s ease;
}
.guard-row.is-armed { opacity: 1; border-color: rgba(0,197,91,0.35); background: rgba(0,197,91,0.06); }
.guard-check {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 0.72rem; font-weight: 700; color: var(--text-dim); border: 1px solid var(--hairline);
  transition: background 0.35s ease, color 0.35s ease, transform 0.35s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.35s ease;
}
.guard-row.is-armed .guard-check { background: var(--amber); color: var(--amber-ink); border-color: var(--amber); transform: scale(1.08); box-shadow: 0 0 12px rgba(0,197,91,0.6); }
.guard-name { color: var(--text); }
.guard-state { font-family: var(--font-mono); font-size: 0.7rem; color: var(--amber-bright); text-align: right; }
.guard-note { font-size: 0.72rem; color: var(--text-dim); margin: 14px 0 0; line-height: 1.5; }
@media (max-width: 380px) { .guard-row { grid-template-columns: 22px 1fr; } .guard-state { grid-column: 2; text-align: left; } }

@media (prefers-reduced-motion: reduce) {
  .stat-tile::after, .guard-card::before, .stat-tile-shield .stat-icon, .range-dot { animation: none; }
  .stat-tile::after, .guard-card::before { display: none; }
  .stat-tile:hover { transform: none; }
  .guard-row { opacity: 1; }
}

/* "Best Value" tab sitting on the featured plan's top border */
.plan-ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--amber-ink); background: linear-gradient(180deg, var(--amber-bright), var(--amber));
  padding: 4px 12px; border-radius: 999px; box-shadow: 0 0 16px rgba(0,197,91,0.5); white-space: nowrap;
}
.perf-cursor.is-flipped .perf-cursor-tip { left: auto; right: 8px; }
@media (max-width: 480px) { .perf-card-head .range { font-size: 0.66rem; } }


/* ============================================================
   Polish pass — line icons, 4-up feature grid, motion tokens
   ============================================================ */
.ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.card .icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: var(--amber-tint); border: 1px solid rgba(0,197,91,0.28); color: var(--amber-bright);
  transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1);
}
.card:hover .icon { background: rgba(0,197,91,0.22); box-shadow: 0 0 18px rgba(0,197,91,0.35); transform: translateY(-1px); }
.card h3 { margin-bottom: 8px; }
.download-file .icon { color: var(--amber-bright); background: var(--amber-tint); border: 1px solid rgba(0,197,91,0.28); border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.download-file .icon .ico { width: 22px; height: 22px; }
.btn .ico { width: 18px; height: 18px; margin-right: 2px; vertical-align: -3px; }
.crypto-banner .ico { width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px; }
.channel .glyph .ico { width: 18px; height: 18px; }
.channel .glyph { color: var(--amber-bright); background: var(--amber-tint); }

.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-4 { grid-template-columns: 1fr; } }

/* download rows: file name in the UI font, left-aligned beside its icon */
.download-file { text-align: left; }
.download-file .filename { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; letter-spacing: -0.01em; }
/* plan names reserve the badge's height so all three prices line up */
.plan-name { min-height: 24px; }

/* ==========================================================================
   Motion layer — entrance sequences and pointer effects only. Nothing here
   changes how the page looks at rest: every effect either ends on the
   element's normal styling or only appears while the mouse is over it.
   Gated on html.js-motion (set in <head>, skipped for reduced motion).
   ========================================================================== */
:root { --ease-out: cubic-bezier(0.16, 1, 0.3, 1); }

/* Scroll reveals come in from a soft blur, then settle on no filter at all */
.js-motion .reveal, .js-motion .reveal-child { filter: blur(6px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out), filter 0.7s var(--ease-out); }
.js-motion .reveal.is-visible, .js-motion .reveal-group.is-visible .reveal-child { filter: none; }

/* Hero entrance: header, copy and engine card arrive in sequence */
@keyframes intro-up { from { opacity: 0; transform: translateY(18px); filter: blur(6px); } }
@keyframes intro-down { from { opacity: 0; transform: translateY(-100%); } }
@keyframes intro-card { from { opacity: 0; transform: translateY(28px) scale(0.97); filter: blur(8px); } }
.js-motion .site-header { animation: intro-down 0.8s var(--ease-out) both; }
.js-motion .hero .eyebrow { animation: intro-up 0.8s var(--ease-out) 0.1s both; }
.js-motion .hero .lede { animation: intro-up 0.8s var(--ease-out) 0.75s both; }
.js-motion .hero-actions { animation: intro-up 0.8s var(--ease-out) 0.88s both; }
.js-motion .hero-checks { animation: intro-up 0.8s var(--ease-out) 1s both; }
.js-motion .hero .chart-card { animation: intro-card 1.1s var(--ease-out) 0.45s both; }

/* Headline: each word rises out of its own mask (main.js wraps the words) */
.split-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; }
.split-i { display: inline-block; }
.js-motion .split-i { transform: translateY(110%); transition: transform 0.95s var(--ease-out); transition-delay: calc(var(--i) * 55ms + 180ms); }
.js-motion .is-split .split-i { transform: none; }

/* Cursor-tracked light running along card borders (mouse only) */
.edge-glow {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit; padding: 1px;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(84, 221, 125, 0.95), rgba(84, 221, 125, 0.25) 35%, transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.35s ease;
}
:is(.card, .plan, .prop-rule, .stat-tile, .guard-card):hover > .edge-glow { opacity: 1; }

/* Engine card: slight 3D tilt toward the cursor with a moving glare */
.hero .chart-card.is-tilting { transition: transform 0.15s ease-out; }
.hero .chart-card.tilt-reset { transition: transform 0.7s var(--ease-out); }
.card-glare {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, 0.07), transparent 60%);
  opacity: 0; transition: opacity 0.4s ease;
}
.hero .chart-card.is-tilting .card-glare { opacity: 1; }

/* Magnetic primary buttons */
.btn.is-magnetic { transition: transform 0.2s ease-out, background 0.25s ease, box-shadow 0.25s ease; }

/* Sample video opens from a cropped frame, then drops the clip entirely */
.js-motion .video-showcase-player { clip-path: inset(6% 9% round 18px); transition: clip-path 1.3s var(--ease-out); }
.js-motion .video-showcase-player.is-shown { clip-path: inset(0 round 12px); }
.js-motion .video-showcase-player.is-done { clip-path: none; }

@media (prefers-reduced-motion: reduce) {
  .split-i { transform: none !important; }
  .edge-glow, .card-glare { display: none; }
}

/* ---------- Live results: social cards, TikTok feed, footer icons ---------- */
.ico-fill { fill: currentColor; stroke: none; }
.social-grid { margin-bottom: 22px; }
.social-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.social-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.social-card-head .icon { margin-bottom: 0; flex-shrink: 0; }
.social-card-head h3 { margin: 0; }
.social-handle { font-family: var(--font-mono); font-size: 0.78rem; color: var(--amber-bright); }
.social-card p { flex: 1; }
.social-btn { align-self: flex-start; margin-top: 8px; pointer-events: none; }
.social-card:hover .social-btn { border-color: var(--amber); color: var(--amber-bright); }
.social-row { display: flex; gap: 10px; margin-top: 18px; }
.social-row a {
  width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--hairline); color: var(--text-dim); transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.social-row a:hover { color: var(--amber-bright); border-color: var(--amber); transform: translateY(-2px); }
.social-row .ico { width: 17px; height: 17px; }

/* "How It Works" in the menu lands on the sample video, clear of the sticky header */
#watch { scroll-margin-top: 24px; }
#watch .video-showcase { margin-top: 0; }

/* ---------- Section entrances (motion only — every effect ends on the existing look) ---------- */
@keyframes track-in { from { letter-spacing: 0.6em; opacity: 0; } }
@keyframes slide-in-left { from { opacity: 0; transform: translateX(-24px); filter: blur(4px); } }
@keyframes check-pop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes row-in { from { opacity: 0; transform: translateX(-16px); } }
@keyframes status-on { from { opacity: 0; transform: scale(0.6); filter: brightness(2.2); } }
@keyframes sheen-pass { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }

/* Section labels tighten into place as their heading arrives */
.js-motion .section-head.is-visible .eyebrow,
.js-motion .prop-grid.is-visible .eyebrow { animation: track-in 1s var(--ease-out) backwards; }

/* Prop Firm: notes slide in, then each rule's check pops on in turn */
.js-motion .prop-grid.is-visible .prop-note { animation: slide-in-left 0.8s var(--ease-out) 0.35s backwards; }
.js-motion .prop-grid.is-visible .prop-disclaimer { animation: slide-in-left 0.8s var(--ease-out) 0.5s backwards; }
.js-motion .prop-rules.is-visible .prop-check { animation: check-pop 0.55s var(--ease-out) backwards; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(1) .prop-check { animation-delay: 0.35s; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(2) .prop-check { animation-delay: 0.5s; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(3) .prop-check { animation-delay: 0.65s; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(4) .prop-check { animation-delay: 0.8s; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(5) .prop-check { animation-delay: 0.95s; }
.js-motion .prop-rules.is-visible .prop-rule:nth-child(6) .prop-check { animation-delay: 1.1s; }

/* Card icons draw their own strokes in (main.js normalises each shape's length to 1) */
.js-motion .card .icon .ico [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s var(--ease-out); }
.js-motion .reveal-group.is-visible .card .icon .ico [pathLength] { stroke-dashoffset: 0; }
.js-motion .reveal-group.is-visible .card:nth-child(1) .ico [pathLength] { transition-delay: 0.25s; }
.js-motion .reveal-group.is-visible .card:nth-child(2) .ico [pathLength] { transition-delay: 0.35s; }
.js-motion .reveal-group.is-visible .card:nth-child(3) .ico [pathLength] { transition-delay: 0.45s; }
.js-motion .reveal-group.is-visible .card:nth-child(4) .ico [pathLength] { transition-delay: 0.55s; }
.js-motion .reveal-group.is-visible .card:nth-child(5) .ico [pathLength] { transition-delay: 0.65s; }
.js-motion .reveal-group.is-visible .card:nth-child(6) .ico [pathLength] { transition-delay: 0.75s; }
.js-motion .reveal-group.is-visible .card:nth-child(7) .ico [pathLength] { transition-delay: 0.85s; }
.js-motion .reveal-group.is-visible .card:nth-child(8) .ico [pathLength] { transition-delay: 0.95s; }

/* One light sheen sweeps across each card as it arrives, then is gone */
.card, .prop-rule { position: relative; }
.card-sheen { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 1; }
.card-sheen::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
  background: linear-gradient(90deg, transparent, rgba(84, 221, 125, 0.10), rgba(255, 255, 255, 0.06), transparent);
  transform: translateX(-120%) skewX(-18deg);
}
.js-motion .reveal-group.is-visible .card-sheen::before { animation: sheen-pass 1.4s var(--ease-out) forwards; }
.js-motion .reveal-group.is-visible > :nth-child(2) .card-sheen::before, .js-motion .reveal-group.is-visible > :nth-child(2) > .card-sheen::before { animation-delay: 0.12s; }
.js-motion .reveal-group.is-visible > :nth-child(3) > .card-sheen::before { animation-delay: 0.24s; }
.js-motion .reveal-group.is-visible > :nth-child(4) > .card-sheen::before { animation-delay: 0.36s; }
.js-motion .reveal-group.is-visible > :nth-child(5) > .card-sheen::before { animation-delay: 0.48s; }
.js-motion .reveal-group.is-visible > :nth-child(6) > .card-sheen::before { animation-delay: 0.6s; }
.js-motion .reveal-group.is-visible > :nth-child(7) > .card-sheen::before { animation-delay: 0.72s; }
.js-motion .reveal-group.is-visible > :nth-child(8) > .card-sheen::before { animation-delay: 0.84s; }

/* Technology: market rows slide in and their status switches on, one by one */
.js-motion .grid-2.is-visible .tech-list-live li { animation: row-in 0.7s var(--ease-out) backwards; }
.js-motion .grid-2.is-visible .tech-list-live li .tech-status { animation: status-on 0.6s var(--ease-out) backwards; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(1) { animation-delay: 0.4s; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(2) { animation-delay: 0.55s; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(3) { animation-delay: 0.7s; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(1) .tech-status { animation-delay: 0.75s; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(2) .tech-status { animation-delay: 0.95s; }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(3) .tech-status { animation-delay: 1.15s; }
.js-motion .grid-2.is-visible .tech-badge { animation: status-on 0.6s var(--ease-out) 0.3s backwards; }

@media (prefers-reduced-motion: reduce) { .card-sheen { display: none; } }

/* TikTok feed loads by itself; this link shows until it does (or if it can't) */

/* ---------- FAQ: alternate left/right slide-in, livelier hover and open ---------- */
.js-motion .faq-slide { opacity: 0; filter: blur(4px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out), filter 0.7s var(--ease-out); }
.js-motion .faq-slide.from-left { transform: translateX(-70px); }
.js-motion .faq-slide.from-right { transform: translateX(70px); }
.js-motion .faq-slide.is-in { opacity: 1; transform: none; filter: none; }
@media (max-width: 600px) {
  .js-motion .faq-slide.from-left { transform: translateX(-36px); }
  .js-motion .faq-slide.from-right { transform: translateX(36px); }
  .js-motion .faq-slide.is-in { transform: none; }
}
.faq-q:hover .plus { transform: rotate(90deg) scale(1.2); }
@keyframes faq-open { from { opacity: 0; transform: translateY(-8px); } }
.js-motion .faq-item[data-open="true"] .faq-a-inner { animation: faq-open 0.45s var(--ease-out); }

/* ============================================================
   Prop firm risk calculator
   ============================================================ */
.calc-shell {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 24px; align-items: stretch;
}
@media (max-width: 960px) { .calc-shell { grid-template-columns: 1fr; } }
.calc-inputs, .calc-results {
  background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 26px;
}
@media (max-width: 600px) { .calc-inputs, .calc-results { padding: 20px; } }
/* both panels share one height; the input groups spread to fill it */
.calc-inputs { display: flex; flex-direction: column; justify-content: space-between; }
.calc-group { border: 0; padding: 0; margin: 0 0 22px; min-width: 0; }
.calc-group:last-child { margin-bottom: 0; }
.calc-group legend {
  display: flex; justify-content: space-between; align-items: baseline; width: 100%; padding: 0; margin-bottom: 10px;
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim);
}
.calc-risk-out { font-size: 1rem; letter-spacing: 0; color: var(--amber-bright); font-weight: 600; }
.calc-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.calc-chips button {
  flex: 1 1 auto; min-width: 64px; padding: 9px 12px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text);
  font: 600 0.88rem var(--font-body); cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.calc-chips button:hover { border-color: var(--amber); color: var(--amber-bright); transform: translateY(-1px); }
.calc-chips button.is-on { background: var(--amber-tint); border-color: var(--amber); color: var(--amber-bright); }
.calc-chips-sm { margin-bottom: 0; flex-wrap: nowrap; }
.calc-chips-sm button { min-width: 44px; flex: 0 0 auto; padding: 7px 12px; }
.calc-field { display: grid; gap: 6px; min-width: 0; }
.calc-field span { font-size: 0.8rem; color: var(--text-dim); }
.calc-field input, .calc-field select {
  width: 100%; background: var(--panel-2); border: 1px solid var(--hairline); color: var(--text);
  padding: 10px 12px; border-radius: var(--radius-sm); font: 500 0.95rem var(--font-mono);
  transition: border-color 0.2s ease;
}
.calc-field input:focus, .calc-field select:focus { outline: none; border-color: var(--amber); }
.calc-row-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 460px) { .calc-row-3 { grid-template-columns: 1fr 1fr; } .calc-row-3 > :last-child { grid-column: 1 / -1; } }
.calc-hint { font-size: 0.8rem; color: var(--text-dim); margin: 10px 0 0; }
.calc-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; font-size: 0.88rem; color: var(--text-dim); flex-wrap: wrap; }
.calc-range { width: 100%; accent-color: var(--amber-hex); cursor: pointer; }
.calc-range-scale { display: flex; justify-content: space-between; font: 0.7rem var(--font-mono); color: var(--text-dim); margin-top: 4px; }

.calc-headline { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 22px; }
.calc-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-dim); }
.calc-stat-main > strong {
  display: block; font: 600 clamp(2.4rem, 6vw, 3.2rem)/1.05 var(--font-mono); color: var(--amber-bright);
  margin: 6px 0 4px; font-variant-numeric: tabular-nums;
}
.calc-stat-main > strong::after { content: ' lots'; font-size: 0.4em; color: var(--text-dim); font-weight: 500; }
.calc-stat-main small { color: var(--text-dim); font-size: 0.85rem; }
.calc-badge {
  flex-shrink: 0; padding: 6px 12px; border-radius: 999px; font: 600 0.75rem var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid currentColor; color: var(--amber-bright); background: var(--amber-tint); transition: color 0.3s ease, background 0.3s ease;
}
.calc-badge[data-level="ok"] { color: var(--gold-bright); background: var(--gold-tint); }
.calc-badge[data-level="warn"] { color: var(--gold); background: var(--gold-tint); }
.calc-badge[data-level="danger"] { color: #e5776a; background: rgba(194, 91, 77, 0.16); }

.calc-meter { margin-bottom: 22px; }
.calc-meter-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; font: 600 0.9rem var(--font-mono); }
.calc-bar {
  position: relative; height: 22px; border-radius: 6px; overflow: visible;
  background: rgba(194, 91, 77, 0.22); border: 1px solid var(--hairline);
}
.calc-bar-safe {
  position: absolute; inset: 0 auto 0 0; border-radius: 5px 0 0 5px;
  background: linear-gradient(90deg, var(--amber-tint), oklch(0.72 0.2 150 / 0.32));
  transition: width 0.45s var(--ease-out);
}
.calc-bar-ticks {
  position: absolute; inset: 0; border-radius: 5px; pointer-events: none;
  background-image: linear-gradient(90deg, transparent calc(100% - 2px), var(--bg) calc(100% - 2px));
  background-repeat: repeat-x; transition: background-size 0.45s var(--ease-out);
}
.calc-bar-stop {
  position: absolute; top: -6px; bottom: -6px; width: 2px; margin-left: -1px; background: var(--amber-bright);
  box-shadow: 0 0 10px var(--amber); transition: left 0.45s var(--ease-out);
}
.calc-bar-stop em {
  position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  font: normal 0.68rem var(--font-mono); color: var(--amber-bright);
}
.calc-bar-legend { display: flex; justify-content: space-between; margin-top: 24px; font: 0.7rem var(--font-mono); color: var(--text-dim); }

.calc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 22px; }
@media (max-width: 460px) { .calc-stats { grid-template-columns: 1fr; } }
.calc-stats .calc-stat { background: var(--panel-2); border: 1px solid var(--hairline); border-radius: var(--radius-sm); padding: 14px; }
.calc-stats strong { display: block; font: 600 1.6rem/1.1 var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 4px; }
.calc-stats span { font-size: 0.8rem; color: var(--text-dim); line-height: 1.35; display: block; }

.calc-settings { border-top: 1px solid var(--hairline); padding-top: 18px; }
.calc-settings h3 { font-size: 1rem; margin: 0 0 10px; }
.calc-settings ul { list-style: none; margin: 0; padding: 0; }
.calc-settings li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px dashed var(--hairline); font-size: 0.88rem; }
.calc-settings li:last-child { border-bottom: 0; }
.calc-settings li span { color: var(--text-dim); }
.calc-settings li strong { font: 600 0.85rem var(--font-mono); color: var(--amber-bright); text-align: right; }
.calc-disclaimer { margin-top: 18px; }

/* entrance: the two panels rise in turn, the stat tiles follow */
.js-motion .calc-shell.reveal .calc-inputs,
.js-motion .calc-shell.reveal .calc-results { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.js-motion .calc-shell.reveal .calc-results { transition-delay: 0.15s; }
.js-motion .calc-shell.reveal.is-visible .calc-inputs,
.js-motion .calc-shell.reveal.is-visible .calc-results { opacity: 1; transform: none; }
[data-chips="balance"] { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
[data-chips="balance"] button { min-width: 0; padding-inline: 4px; }
.stat-tile .stat-note { display: block; margin-top: 8px; font-size: 0.7rem; line-height: 1.4; color: var(--text-dim); opacity: 0.8; font-style: italic; }
/* keep slide-in animations from ever causing a sideways scroll on phones */
html, body { overflow-x: clip; }
.prop-ea-rule {
  display: flex; gap: 12px; align-items: flex-start;
  background: var(--gold-tint); border: 1px solid var(--gold);
  border-radius: var(--radius-sm); padding: 16px 18px; margin-top: 14px;
  font-size: 0.85rem; color: var(--text-dim);
}
.prop-ea-rule strong { color: var(--text); }
.prop-ea-rule-icon {
  color: var(--gold); flex-shrink: 0; font: italic 800 0.75rem Georgia, serif;
  width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--gold);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.js-motion .prop-grid.is-visible .prop-ea-rule { animation: slide-in-left 0.8s var(--ease-out) 0.65s backwards; }
@media (max-width: 900px) { .prop-rules { grid-auto-rows: auto; } }

/* ---------- Risk calculator: the per-trade risk, called out ---------- */
.calc-risk-chip {
  display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-top: 8px;
  padding: 8px 14px; border-radius: 10px; font-size: 0.85rem;
  color: var(--gold-bright); background: var(--gold-tint); border: 1px solid rgba(239, 170, 16, 0.45);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}
.calc-risk-chip-icon svg { width: 16px; height: 16px; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.calc-risk-chip-label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; }
.calc-risk-chip strong { font: 700 1.1rem var(--font-mono); color: var(--text); font-variant-numeric: tabular-nums; }
.calc-risk-chip-pct { font-family: var(--font-mono); font-size: 0.8rem; opacity: 0.85; }
.calc-risk-chip[data-level="safe"] { color: var(--amber-bright); background: var(--amber-tint); border-color: rgba(0, 197, 91, 0.45); }
.calc-risk-chip[data-level="danger"] { color: #e5776a; background: rgba(194, 91, 77, 0.16); border-color: rgba(194, 91, 77, 0.6); }
.calc-risk-chip.is-flash { animation: risk-flash 0.6s var(--ease-out); }
@keyframes risk-flash { 0% { box-shadow: 0 0 0 0 currentColor; } 100% { box-shadow: 0 0 0 8px transparent; } }

/* ---------- Download: setup steps + entrance ---------- */
.dl-steps {
  list-style: none; margin: 0 0 22px; padding: 0; position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.dl-steps::before, .dl-steps::after {
  content: ''; position: absolute; top: 15px; left: 16.66%; right: 16.66%; height: 2px; background: var(--hairline);
}
.dl-steps::after { background: linear-gradient(90deg, var(--amber), var(--amber-bright)); transform-origin: left; }
.dl-steps li { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--text-dim); text-align: center; }
.dl-step-num {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font: 600 0.85rem var(--font-mono); color: var(--amber-bright); background: var(--panel); border: 1.5px solid var(--amber);
  box-shadow: 0 0 0 4px var(--panel);
}
@media (max-width: 480px) { .dl-steps li { font-size: 0.78rem; } }

.download-file .icon { position: relative; }
.download-file .icon::after {
  content: ''; position: absolute; inset: -1px; border-radius: 10px; border: 1px solid var(--amber); opacity: 0; pointer-events: none;
}
.download-row:hover .download-file .icon::after { animation: icon-ping 1.1s var(--ease-out); }
.download-row .btn-primary:hover .ico { animation: dl-bob 0.8s ease-in-out infinite; }
@keyframes icon-ping { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.55); } }
@keyframes dl-bob { 50% { transform: translateY(3px); } }

.js-motion .download-card.reveal .download-row { opacity: 0; transform: translateX(-28px); transition: opacity 0.7s var(--ease-out), transform 0.8s var(--ease-out); }
.js-motion .download-card.reveal.is-visible .download-row { opacity: 1; transform: none; }
.js-motion .download-card.reveal.is-visible .download-row:nth-of-type(2) { transition-delay: 0.15s; }
.js-motion .download-card.is-visible .download-file .icon::after { animation: icon-ping 1.4s var(--ease-out) 0.6s; }
.js-motion .download-card.is-visible .download-row .btn-primary::after { animation: btn-shimmer 1s ease 0.9s backwards; }
.js-motion .download-card.reveal .dl-steps::after { transform: scaleX(0); transition: transform 1.2s var(--ease-out) 0.5s; }
.js-motion .download-card.reveal.is-visible .dl-steps::after { transform: scaleX(1); }
.js-motion .download-card.reveal .dl-steps li { opacity: 0; transform: translateY(10px); transition: opacity 0.5s var(--ease-out), transform 0.6s var(--ease-out); }
.js-motion .download-card.reveal.is-visible .dl-steps li { opacity: 1; transform: none; }
.js-motion .download-card.reveal.is-visible .dl-steps li:nth-child(1) { transition-delay: 0.5s; }
.js-motion .download-card.reveal.is-visible .dl-steps li:nth-child(2) { transition-delay: 0.9s; }
.js-motion .download-card.reveal.is-visible .dl-steps li:nth-child(3) { transition-delay: 1.3s; }
.calc-field select optgroup, .calc-field select option { background: var(--panel-2); color: var(--text); }

/* ── v1.0 results tables (performance section) ── */
.perf-caption { font-size: 0.78rem; color: var(--text-dim); margin: -4px 0 0; }
.tech-status-off { color: var(--text-dim); }
.js-motion .grid-2.is-visible .tech-list-live li:nth-child(4) .tech-status { animation-delay: 1.35s; }
.results-block { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.results-card { min-width: 0; }
.results-card { background: var(--panel); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 24px; }
.results-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 14px; }
.results-head strong { color: var(--text); font-size: 1.02rem; }
.results-head span { font-family: var(--font-mono); font-size: 0.74rem; color: var(--text-dim); }
.results-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.results-table { width: 100%; min-width: 640px; border-collapse: collapse; font-family: var(--font-mono); font-size: 0.86rem; }
.results-table th, .results-table td { padding: 10px 12px; text-align: right; border-top: 1px solid var(--hairline); white-space: nowrap; }
.results-table thead th { border-top: 0; color: var(--text-dim); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; }
.results-table th:first-child { text-align: left; }
.results-table tbody th { color: var(--text); font-weight: 600; }
.results-table tbody td { color: var(--text); }
.results-table tbody tr:hover td, .results-table tbody tr:hover th { background: var(--panel-2); }
.results-table .results-sub th { text-align: left; color: var(--amber-bright); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500; padding-top: 16px; background: none !important; }
.results-note { font-size: 0.82rem; color: var(--text-dim); margin: 14px 0 0; line-height: 1.55; }
.results-note strong { color: var(--text); }
@media (max-width: 640px) { .results-card { padding: 18px 16px; } }

.hero-risk-note { margin: 14px 0 0; }
.risk-disclosure { background: rgba(194, 91, 77, 0.08); border: 1px solid rgba(194, 91, 77, 0.45); border-left: 3px solid var(--red); border-radius: var(--radius); padding: 18px 20px; font-size: 0.84rem; line-height: 1.6; color: var(--text-dim); }
.risk-disclosure strong { color: var(--text); }

.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 900px) { .report-grid { grid-template-columns: 1fr; } }
.report-shot { display: block; text-decoration: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm); overflow: hidden; background: #fff; transition: transform 0.2s ease, border-color 0.2s ease; }
.report-shot:hover { transform: translateY(-3px); border-color: var(--amber); }
.report-shot img { display: block; width: 100%; height: auto; }
.report-label { display: block; padding: 10px 12px; background: var(--panel-2); color: var(--text); font-size: 0.85rem; font-weight: 600; }

/* Vertical (9:16) walkthrough video */
.video-showcase-player.video-showcase-vertical { max-width: 380px; aspect-ratio: 9 / 16; }

.video-showcase-player.video-showcase-wide { aspect-ratio: 16 / 9; }