/* ==========================================================================
   PineX — Stripe-inspired redesign (SANDBOX, not live yet)
   Imports the live color palette from styles.css; everything below adds
   layout + component styles tuned for a bigger, marketing-feeling hero +
   section rhythm. Designed at 1440px, comfortable down to 360px.
   ========================================================================== */

/* ---- Base resets, reusing the palette from styles.css ---- */
:root {
  /* Re-declare so this file can be used standalone, but match styles.css */
  --bg: #0f1115;
  --bg-elev: #161922;
  --bg-elev-2: #1c2030;
  --border: #262b3a;
  --text: #e6e8ef;
  --text-dim: #9aa1b2;
  --text-faint: #6b7184;
  --accent: #5865F2;
  --accent-2: #a8b4ff;
  --green: #2ecc71;
  --gold: #f1c40f;
  --gold-warm: #d4af6a;
  --gold-deep: #6b4f25;
  --red: #e74c3c;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --shell-width: 1320px;
  --pad: clamp(20px, 4vw, 48px);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; min-height: 100vh; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; }

img, svg { display: block; max-width: 100%; }

/* Brand mark used in nav/footer — gold X gradient */
.brand-accent {
  background: linear-gradient(180deg, #f8e2b3 0%, var(--gold-warm) 40%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- Section shell + spacing rhythm ---- */
.shell {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

section {
  /* Tightened from clamp(72px, 10vw, 140px) — sections were leaving way too
     much air between them and the borders read as hard "card stack" lines. */
  padding-top: clamp(48px, 6vw, 88px);
  padding-bottom: clamp(48px, 6vw, 88px);
}

/* ==========================================================================
   Navigation — translucent on hero, solid on scroll (sticky)
   ========================================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(15, 17, 21, 0.72);
  border-bottom: 1px solid rgba(38, 43, 58, 0.6);
}
.nav-inner {
  max-width: var(--shell-width);
  margin: 0 auto;
  padding: 16px var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-brand {
  /* Inline-block (not flex) so "Pine" and the gold-gradient X span sit as
     one continuous word with no gap between them. Flex was treating them
     as two items and adding a 10px gap. */
  display: inline-block;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -0.5px;
  color: var(--text);
  line-height: 1;
}
.nav-brand:hover { text-decoration: none; }
.nav-brand-mark {
  width: 28px; height: 28px;
  border-radius: 7px;
}
.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-links a {
  color: var(--text-dim);
  font-size: 14.5px;
  font-weight: 500;
}
.nav-links a:hover { color: var(--text); text-decoration: none; }
.nav-cta {
  background: var(--accent);
  color: white !important;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  transition: filter .15s, transform .04s;
}
.nav-cta:hover { filter: brightness(1.1); text-decoration: none; }
.nav-cta:active { transform: translateY(1px); }

@media (max-width: 720px) {
  .nav-links { gap: 16px; }
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ==========================================================================
   HERO — Stripe-style animated mesh gradient + huge headline + side visual
   ========================================================================== */
.hero {
  position: relative;
  padding-top: clamp(48px, 6vw, 96px);
  padding-bottom: clamp(64px, 10vw, 140px);
  overflow: hidden;
}

/* Animated multi-layer mesh — moves slowly behind the hero.
   `position: fixed` so the mesh is LOCKED to the viewport: when the user
   scrolls, the page text moves up over the mesh while the mesh stays put.
   Opacity is bound to `--hero-fade` (driven by a scroll listener at the
   bottom of redesign.html) so the mesh fades out as the hero scrolls away
   — preventing it from showing under later sections. */
.hero-bg {
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(40% 50% at 15% 20%, rgba(241, 196, 15, 0.18), transparent 60%),
    radial-gradient(35% 45% at 85% 30%, rgba(88, 101, 242, 0.20), transparent 60%),
    radial-gradient(50% 60% at 50% 90%, rgba(212, 175, 106, 0.14), transparent 60%),
    radial-gradient(30% 40% at 80% 80%, rgba(168, 180, 255, 0.12), transparent 60%);
  filter: blur(40px);
  animation: hero-mesh 22s ease-in-out infinite alternate;
  opacity: var(--hero-fade, 1);
  will-change: opacity, transform;
}
@keyframes hero-mesh {
  0%   { transform: translate(0, 0)     scale(1);    }
  50%  { transform: translate(2%, -1%)  scale(1.04); }
  100% { transform: translate(-2%, 1%)  scale(1.02); }
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.2fr;     /* text wider than before + chart wider than before; only works because shell is wider */
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* Blended chart hero — no frame, no card, no border. The chart image's own
   dark background matches the page background; mask-image fades the candles
   into transparent on all four edges so they appear to emerge from the
   ambient hero gradient instead of sitting in a pasted-on rectangle. A faint
   gold radial glow sits behind the chart to anchor it.

   The image extends ~10% past the right edge of its column for a "bleed off
   the page" feel (Stripe trick — makes the visual feel larger than the box
   that contains it without resizing the column). */
/* Chart is FIXED to the viewport so it stays locked while the user scrolls.
   Its opacity is bound to `--hero-fade` (set by the scroll listener at the
   bottom of redesign.html), so as the headline copy scrolls up and past it,
   the candles fade to transparent. Sits BEHIND the headline copy via
   z-index 0 (text is z-index 2). By the time the user reaches the next
   section, opacity is 0 — so even though a positive-z fixed element would
   normally paint over later sections, this one is invisible by then. */
.hero-chart-blend {
  position: fixed;
  top: 50%;
  right: 6%;                      /* pulled in from the edge so chart isn't pinned far right */
  transform: translateY(-50%);
  width: 56vw;
  max-width: 1317px;              /* never upscale past native pixel width — keeps candles crisp */
  pointer-events: none;
  z-index: 0;
  opacity: var(--hero-fade, 1);
  will-change: opacity;
}
/* NO halo behind the chart. The previous gold ::before pseudo-element was
   what made the chart's empty regions look gold: it lit up the page bg
   directly underneath, which then "won" the lighten blend against the
   chart's flat dark bg — the rectangular frame became visible as a result.
   Without the halo, page bg ≈ chart bg exactly, lighten blend works as
   intended, and only the candles render. */
.hero-chart-blend .hero-chart {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  display: block;
  /* The PNG itself has alpha=0 wherever the chart bg was (processed by
     assets/_process_hero.py via luminance threshold). Only candle pixels
     remain opaque. No mask or blend mode needed — the image just sits on
     the page and the page bg shows cleanly through every empty area. */
  background: transparent;
}

/* Headline copy in front of the chart */
.hero-grid > div:first-child { position: relative; z-index: 2; }

/* On narrower viewports, put the chart back into normal flow under the
   headline so it doesn't overlap with copy. Also disable the scroll-driven
   fade — on mobile the chart simply scrolls with the page like any image. */
@media (max-width: 1100px) {
  .hero-chart-blend {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    right: auto;
    margin-top: 28px;
    opacity: 1;
  }
  .hero-bg {
    /* Keep mesh fixed on mobile too — but lock its opacity at 1 so it stays
       visible behind the entire hero column instead of fading prematurely. */
    opacity: 1;
  }
}

/* Honor user preference: if they've asked for reduced motion, skip the
   scroll-fade entirely. Mesh and chart stay at full opacity. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .hero-chart-blend { opacity: 1 !important; }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(241, 196, 15, 0.35);
  background: rgba(241, 196, 15, 0.08);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 22px;
}
.hero-eyebrow .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(241, 196, 15, 0.7);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

.hero-title {
  /* Capped lower (68px instead of 76px) so individual words don't get forced
     onto their own lines in the text column. With a wider column from the
     bigger shell, the title now reads in 2–3 natural lines. */
  font-size: clamp(38px, 5.5vw, 68px);
  line-height: 1.05;
  font-weight: 800;
  letter-spacing: -1.5px;
  margin: 0 0 22px;
  color: var(--text);
  /* Slightly tighter max-width than the column so the title has room around it */
  max-width: 18ch;
}
.hero-title .grad {
  background: linear-gradient(120deg, #f8e2b3 0%, var(--gold-warm) 35%, #c69949 70%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  /* Brighter than --text-dim so the copy stays legible where it overlaps
     the chart candles on the right. Light shadow gives extra separation
     from any gold candle that happens to land directly behind a word. */
  color: var(--text);
  text-shadow: 0 1px 3px rgba(15, 17, 21, 0.85);
  margin: 0 0 32px;
  max-width: 540px;
}

.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: filter .15s, transform .04s, background .15s, border-color .15s;
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: white;
}
.btn-primary:hover {
  filter: brightness(1.1);
  text-decoration: none;
  border-color: var(--accent-2);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.18);
}
.btn-primary:active { transform: translateY(1px); }
.btn-ghost {
  background: transparent;
  color: var(--text);
  border-color: var(--border);
}
.btn-ghost:hover {
  background: var(--bg-elev);
  text-decoration: none;
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.12);
}
.btn-gold {
  /* Smoother gradient — was producing a visible "line" at the top from the
     too-bright 0% stop. Now warm-gold to deep-gold without the highlight band. */
  background: linear-gradient(180deg, var(--gold-warm) 0%, #b08945 100%);
  color: #1a1410;
  font-weight: 700;
  border: 1px solid transparent;
}
.btn-gold:hover {
  filter: brightness(1.06);
  text-decoration: none;
  border-color: rgba(248, 226, 179, 0.6);
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.15);
}
.btn-mini { padding: 8px 16px; font-size: 13.5px; }

.hero-foot {
  margin-top: 22px;
  font-size: 13px;
  color: var(--text-faint);
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.hero-foot .sep { color: var(--border); }

/* Hero right column. Default aspect 4:5 for portrait visuals; landscape image
   override below for the chart screenshot. */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(241,196,15,0.06), transparent 70%),
    var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 14px;
}
/* .hero-visual-image, .hero-chart-fallback removed — chart now lives in a
   full-width .hero-stage below the headline (see .hero-v2 block above). */
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-lg) - 1px);
  background:
    linear-gradient(135deg, rgba(241,196,15,0.04), transparent 50%),
    linear-gradient(225deg, rgba(88,101,242,0.04), transparent 50%);
  pointer-events: none;
}
.arch-diagram {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
}
.arch-diagram .arch-grp {
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
}
.arch-diagram .arch-grp-featured {
  filter: drop-shadow(0 8px 24px rgba(241, 196, 15, 0.14));
}

/* ==========================================================================
   Generic "infographic placeholder" — bordered, labeled empty box you can
   replace with real product screenshots / animations later.
   ========================================================================== */
.infographic-placeholder {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 220px;
  border: 1.5px dashed rgba(241, 196, 15, 0.32);
  border-radius: calc(var(--radius-lg) - 8px);
  margin: 14px;
  background: rgba(241,196,15,0.025);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  color: var(--text-dim);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}
.infographic-placeholder .ig-label {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.infographic-placeholder .ig-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.infographic-placeholder .ig-spec {
  font-size: 12px;
  color: var(--text-faint);
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}

/* ==========================================================================
   Stats strip — Stripe-style horizontal KPI band, just under the hero
   ========================================================================== */
.stats {
  padding-top: 0;
  padding-bottom: clamp(48px, 6vw, 80px);
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  padding: 8px 0;
  /* No card, no border — let the stats float directly on the page so they
     read as headline KPIs instead of a fenced-off "info panel". The thin
     vertical dividers between columns provide just enough separation. */
}
.stat {
  text-align: center;
  position: relative;
  padding: 16px 24px;
}
.stat + .stat::before {
  /* Hairline divider between adjacent stats — fades at top and bottom so it
     doesn't read as a hard column rule. */
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: linear-gradient(180deg, transparent 0, rgba(255,255,255,0.10) 50%, transparent 100%);
}
@media (max-width: 800px) {
  .stat + .stat::before { display: none; }
}
@media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } }
.stat-value {
  font-size: clamp(30px, 4.5vw, 46px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1;
  margin-bottom: 10px;
  color: var(--text);
}
.stat-value .grad {
  background: linear-gradient(180deg, #f8e2b3 0%, var(--gold-warm) 50%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat-label {
  font-size: 12.5px;
  color: var(--text-dim);
  font-weight: 500;
  line-height: 1.4;
  max-width: 22ch;
  margin: 0 auto;
}

/* ==========================================================================
   Section heading pattern
   ========================================================================== */
.sec-head {
  max-width: 720px;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}
.sec-eyebrow {
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 12px;
}
.sec-title {
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1.1;
  margin: 0 0 16px;
}
.sec-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--text-dim);
  margin: 0;
  line-height: 1.6;
}

/* ==========================================================================
   "How it works" — two-up: copy + infographic placeholder
   ========================================================================== */
.how { position: relative; }

/* ==========================================================================
   Architecture diagram — HTML boxes connected by vertical lines.
   Center row uses CSS Grid with :has() so hovering one box expands it and
   shrinks the others. Single-row stages just lift on hover.
   ========================================================================== */
.arch {
  max-width: 920px;
  margin: 0 auto;
  position: relative;
}

.arch-stage {
  display: grid;
  gap: 16px;
}
.arch-stage-single {
  grid-template-columns: minmax(0, 1fr);
  max-width: 520px;
  margin: 0 auto;
}
.arch-stage-triple {
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 18px;
  transition: grid-template-columns .35s cubic-bezier(.4, 0, .2, 1);
}
/* Hover-resize: when the user hovers any side OUTPUT box, expand it and shrink
   the others. When they hover the CORE, expand it further. Uses :has() —
   widely supported in modern Chromium/Safari/Firefox/Opera. */
.arch-stage-triple:has(.arch-box-output:nth-child(1):hover) {
  grid-template-columns: 1.8fr 1.1fr 0.6fr;
}
.arch-stage-triple:has(.arch-box-output:nth-child(3):hover) {
  grid-template-columns: 0.6fr 1.1fr 1.8fr;
}
.arch-stage-triple:has(.arch-box-core:hover) {
  grid-template-columns: 0.7fr 2.4fr 0.7fr;
}
@media (max-width: 720px) {
  .arch-stage-triple { grid-template-columns: 1fr; }
  .arch-stage-triple:hover { grid-template-columns: 1fr; }
}

.arch-box {
  position: relative;
  padding: 22px 22px 20px;
  border-radius: 14px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transition:
    transform .25s cubic-bezier(.4, 0, .2, 1),
    border-color .25s,
    box-shadow .25s,
    background .25s;
  cursor: default;
  overflow: hidden;
}
.arch-box::before {
  /* Subtle gold corner gradient that fades in on hover */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(241,196,15,0.07) 0%, transparent 50%);
  opacity: 0;
  transition: opacity .25s;
  pointer-events: none;
}
.arch-box:hover {
  /* Subtle — no scale, tiny lift, lean on the border + shadow + corner-glow for emphasis */
  transform: translateY(-1px);
  border-color: rgba(241, 196, 15, 0.5);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(241,196,15,0.15);
}
.arch-box:hover::before { opacity: 1; }

.arch-eyebrow {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 10px;
}
.arch-eyebrow-gold { color: var(--gold); }

.arch-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  letter-spacing: -0.3px;
}
.arch-title-brand {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 8px;
}
.arch-sub {
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.55;
  margin: 0;
}
.arch-sub code {
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  font-size: 12px;
  color: var(--text);
}
.arch-meta {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--gold);
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  letter-spacing: 0.04em;
}
.arch-iconbox {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

/* Expand-on-hover detail copy: hidden by default, fades in with extra height */
.arch-detail {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  font-size: 13px;
  color: var(--text-dim);
  line-height: 1.6;
  transition: max-height .35s cubic-bezier(.4, 0, .2, 1), opacity .25s, margin-top .35s;
  margin-top: 0;
}
.arch-box:hover .arch-detail {
  max-height: 200px;
  opacity: 1;
  margin-top: 14px;
}

/* Combined execution box: TradingView Desktop → Your broker on one row */
.arch-exec-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 18px;
  align-items: center;
}
.arch-exec-half {
  min-width: 0;
}
.arch-exec-arrow {
  color: var(--gold-warm, #d4af6a);
  font-size: 22px;
  font-weight: 700;
  opacity: 0.7;
  line-height: 1;
  user-select: none;
}
@media (max-width: 560px) {
  .arch-exec-grid { grid-template-columns: 1fr; }
  .arch-exec-arrow { transform: rotate(90deg); justify-self: start; padding-left: 4px; }
}

/* PineX core gets the gold border treatment always */
.arch-box-core {
  border-color: rgba(241, 196, 15, 0.40);
  background:
    linear-gradient(180deg, rgba(241,196,15,0.05) 0%, transparent 60%),
    var(--bg-elev);
  box-shadow: 0 10px 30px rgba(241, 196, 15, 0.06);
}
.arch-box-core:hover {
  border-color: rgba(241, 196, 15, 0.7);
  box-shadow: 0 18px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(241,196,15,0.25);
}

/* Connector between stages — vertical dashed line + arrowhead + label */
.arch-conn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  margin: 4px 0;
  position: relative;
}
.arch-conn-line {
  width: 0;
  height: 36px;
  border-left: 2px dashed rgba(212, 175, 106, 0.55);
}
.arch-conn-arrow {
  color: var(--gold-warm, #d4af6a);
  font-size: 12px;
  line-height: 0;
  margin-top: -4px;
}
.arch-conn-label {
  position: absolute;
  left: calc(50% + 14px);
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  font-style: italic;
  color: var(--text-dim);
  white-space: nowrap;
}

/* ==========================================================================
   Broker conveyor — seamless marquee of supported broker names. Track is
   duplicated in markup so a 50%-translate loop has no visible seam. Edges
   fade out via a mask so chips appear to emerge / vanish.
   ========================================================================== */
.brokers {
  max-width: 1100px;
  margin: 48px auto 0;
  text-align: center;
}
.brokers-head {
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 18px;
}
.brokers-track-wrap {
  overflow: hidden;
  position: relative;
  /* Fade out the edges so chips materialize / dissolve instead of pop in/out. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  padding: 6px 0;
}
.brokers-track {
  display: flex;
  gap: 14px;
  width: max-content;
  /* The track holds the chip list twice. Translating to -50% means we land on
     the start of the second copy, which is identical to the first — so the
     loop has no perceptible seam. */
  animation: brokers-scroll 55s linear infinite;
}
.brokers-track-wrap:hover .brokers-track {
  /* Pause on hover so visitors can read a specific broker name */
  animation-play-state: paused;
}
@keyframes brokers-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.brokers-chip {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color .15s, background .15s, transform .12s, box-shadow .15s;
}
.brokers-chip:hover {
  border-color: rgba(241, 196, 15, 0.5);
  background: rgba(241, 196, 15, 0.05);
  color: var(--text);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.brokers-chip:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Logo slot — 32x32 rounded square. Two modes:

   1) IMAGE MODE (.brokers-logo-img-mode on the container): the real PNG
      shows on a transparent backing. Letter-mark fallback is hidden via
      `display: none` so no brand-colored ring leaks around the logo.

   2) LETTER MODE (no class, or class removed by img.onerror): the colored
      letter-mark shows. Its inline `style="background:#color"` fills the
      container because the letter is absolutely positioned with inset: 0.

   The onerror handler on each <img> handles the transition: hides the img
   and strips the img-mode class from the container, revealing the letter. */
.brokers-logo {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent;
}
.brokers-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 4px;
  z-index: 2;
}
.brokers-letter {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: -0.4px;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  line-height: 1;
  border-radius: inherit;
}
/* When the chip is in image mode, hide the letter-mark entirely so the
   image's transparent areas don't reveal the brand-color backing. */
.brokers-logo-img-mode .brokers-letter { display: none; }
.brokers-name { line-height: 1; }
.brokers-foot {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-faint);
}

/* Respect reduced-motion users: stop the conveyor */
@media (prefers-reduced-motion: reduce) {
  .brokers-track { animation: none; }
}

/* ==========================================================================
   About sub-page — /about.html. Compact hero up top, body copy below in
   the same two-column "rail + copy" layout as before.

   Background: a single soft gold radial centered behind the hero. No
   animated mesh (the moving multi-color gradient from .hero-bg was the
   "scheme looks off" issue — too much going on for a one-page note). */
.about-hero {
  position: relative;
  padding-top: clamp(64px, 8vw, 120px);
  padding-bottom: clamp(40px, 5vw, 64px);
  text-align: center;
  /* Travel room so the sticky headline (below) stays PINNED to the viewport
     while it fades, instead of immediately unsticking. Kept modest so the body
     copy follows close behind instead of leaving a big empty gap; the headline
     fade (hero-scroll.js, 0.85 of this height) finishes right as the body
     arrives. (No `overflow: hidden` here — it would break position: sticky on
     the child, and the fixed background no longer needs clipping anyway.) */
  min-height: 44vh;
}
/* Override the animated mesh inherited from .hero-bg — solid soft gradient instead */
.about-hero .hero-bg {
  animation: none;
  background: radial-gradient(60% 80% at 50% 0%, rgba(241,196,15,0.08), transparent 65%);
  filter: none;
}
.about-hero .shell {
  /* Sticky so the headline block ("Why PineX exists") stays LOCKED to the
     viewport while you scroll — the analog of the home hero's fixed candles.
     `top` pins it just below the sticky nav. It holds in place across the
     section's min-height, fading out via --hero-fade (driven by
     hero-scroll.js, in step with the background gradient), then releases. */
  position: sticky;
  /* Matches the section's padding-top so the headline pins exactly where it
     starts — locked from the first pixel of scroll, no upward drift first. */
  top: clamp(64px, 8vw, 120px);
  z-index: 1;
  opacity: var(--hero-fade, 1);
  will-change: opacity;
}
.about-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(168,180,255,0.30);
  background: rgba(88,101,242,0.08);
}
.about-hero-title {
  font-size: clamp(40px, 6.5vw, 78px);
  font-weight: 800;
  letter-spacing: -1.5px;
  line-height: 1.03;
  margin: 0 0 18px;
}
.about-hero-title .grad {
  /* Full 4-stop brand gradient — same as the X mark in the navs */
  background: linear-gradient(120deg, #f8e2b3 0%, var(--gold-warm) 35%, #c69949 70%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-hero-sub {
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--text-dim);
  max-width: 520px;
  margin: 0 auto;
}
.about-side-tag {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-faint);
  font-weight: 700;
  margin-bottom: 10px;
}

/* ==========================================================================
   About body — personal note section. Two-column with the side rail on the
   left, the main copy on the right.
   ========================================================================== */
.about {
  position: relative;
  /* No additional radial — keeping the body section on the flat page bg so
     it doesn't compete with the hero's single soft gradient above. */
  background: var(--bg);
}
.about-grid {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(32px, 5vw, 80px);
  max-width: 980px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 820px) {
  .about-grid { grid-template-columns: 1fr; }
}
.about-side {
  position: sticky;
  top: 100px;
}
.about-eyebrow {
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 700;
  margin-bottom: 14px;
}
.about-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  letter-spacing: -1.2px;
  line-height: 1.05;
  margin: 0 0 22px;
}
.about-title .grad {
  background: linear-gradient(120deg, #f8e2b3 0%, var(--gold-warm) 35%, #c69949 70%, var(--gold-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-sig {
  font-size: 13.5px;
  color: var(--text-dim);
  font-style: italic;
  letter-spacing: 0.02em;
}
.about-copy {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.75;
  color: var(--text);
}
.about-copy p { margin: 0 0 18px; }
.about-copy p:last-child { margin-bottom: 0; }
.about-copy i { color: var(--text-dim); font-style: italic; }
.about-copy b { color: var(--text); font-weight: 700; }
.about-hl {
  color: var(--gold);
  font-weight: 700;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
.about-note {
  color: var(--text-faint);
  font-size: 0.85em;
  font-style: italic;
}

/* Story callout — the "breaking point" anecdote. Quoted-aside style with a
   red accent rail on the left so it reads as a "this happened" moment
   distinct from the surrounding manifesto-style copy. */
.about-story {
  margin: 26px 0;
  padding: 22px 26px 18px;
  border-left: 3px solid rgba(231, 76, 60, 0.55);
  background:
    linear-gradient(90deg, rgba(231, 76, 60, 0.06) 0%, transparent 60%),
    rgba(22, 25, 34, 0.4);
  border-radius: 0 10px 10px 0;
}
.about-story-tag {
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 800;
  margin-bottom: 12px;
}
.about-story p {
  font-size: 15px;
  line-height: 1.7;
  margin: 0 0 12px;
  color: var(--text);
}
.about-story p:last-child { margin-bottom: 0; }
.about-story i { color: var(--text-dim); }

/* ==========================================================================
   Support page — contact form on the left, direct-email fallback on the right
   ========================================================================== */
.support { padding-bottom: clamp(72px, 10vw, 120px); }
.support-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  max-width: 1020px;
  margin: 0 auto;
  align-items: start;
}
@media (max-width: 800px) {
  .support-grid { grid-template-columns: 1fr; }
}
.support-form {
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 28px 22px;
}
.support-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin: 0 0 8px;
}
.support-label + .support-label { margin-top: 18px; }
.support-input,
.support-textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 14.5px;
  padding: 11px 14px;
  resize: vertical;
  transition: border-color .15s, box-shadow .15s;
}
.support-input { line-height: 1.4; }
.support-textarea { line-height: 1.55; min-height: 160px; }
.support-input:focus,
.support-textarea:focus {
  outline: none;
  border-color: rgba(241, 196, 15, 0.55);
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.12);
}
.support-charcount {
  font-size: 11.5px;
  color: var(--text-faint);
  text-align: right;
  margin-top: 6px;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
.support-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 18px;
}
.support-status { font-size: 13px; color: var(--text-dim); flex: 1; }
.support-status.ok  { color: var(--green); }
.support-status.err { color: var(--red); }
.support-note {
  font-size: 12px;
  color: var(--text-faint);
  margin: 18px 0 0;
  line-height: 1.55;
}
.support-note a { color: var(--text-dim); }

/* Required-field asterisk + optional tag for labels */
.support-required {
  color: var(--red);
  font-weight: 800;
  margin-left: 2px;
}
.support-optional {
  color: var(--text-faint);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

/* Drop zone — click-to-browse + drag-and-drop. The actual <input type="file">
   is visually hidden inside the label so the whole zone is a single click target. */
.support-drop {
  display: block;
  position: relative;
  cursor: pointer;
  padding: 22px 18px;
  border: 1.5px dashed rgba(241, 196, 15, 0.32);
  border-radius: 10px;
  background: rgba(241, 196, 15, 0.025);
  transition: background .15s, border-color .15s, transform .08s;
}
.support-drop:hover,
.support-drop:focus-within {
  background: rgba(241, 196, 15, 0.06);
  border-color: rgba(241, 196, 15, 0.55);
}
.support-drop.is-dragover {
  background: rgba(241, 196, 15, 0.10);
  border-color: var(--gold);
  transform: scale(1.005);
}
.support-file-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.support-drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  color: var(--text-dim);
  pointer-events: none;
}
.support-drop svg { color: var(--gold); margin-bottom: 4px; }
.support-drop-prim {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}
.support-drop-sec {
  font-size: 12px;
  color: var(--text-faint);
}

/* Selected file list */
.support-file-list {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.support-file-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.support-file-name {
  font-size: 13px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.support-file-size {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
.support-file-remove {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  font-size: 18px;
  line-height: 1;
  width: 24px; height: 24px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.support-file-remove:hover {
  background: rgba(231, 76, 60, 0.15);
  color: var(--red);
}

.support-side {
  padding: 24px 24px 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background:
    linear-gradient(180deg, rgba(241,196,15,0.04) 0%, transparent 60%),
    var(--bg-elev);
}
.support-side-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}
.support-side-body {
  font-size: 14px;
  color: var(--text);
  line-height: 1.6;
  margin: 0 0 16px;
}
.support-mailto {
  display: block;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  font-size: 13px;
  color: var(--gold);
  text-align: center;
  text-decoration: none;
  word-break: break-all;
  transition: border-color .15s, background .15s;
}
.support-mailto:hover {
  border-color: rgba(241, 196, 15, 0.55);
  background: rgba(241, 196, 15, 0.04);
  text-decoration: none;
}
.support-side-foot {
  margin-top: 14px;
  font-size: 12px;
  color: var(--text-faint);
  line-height: 1.55;
}

/* ==========================================================================
   Comparison — PineX vs webhooks (kept from current copy, restyled)
   ========================================================================== */
.compare {
  background:
    radial-gradient(700px 400px at 50% 0%, rgba(88,101,242,0.06), transparent 70%),
    var(--bg);
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 760px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col {
  padding: 28px 28px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  position: relative;
}
.compare-col.good {
  border-color: rgba(46, 204, 113, 0.35);
  background:
    linear-gradient(180deg, rgba(46,204,113,0.05) 0%, transparent 60%),
    var(--bg-elev);
}
.compare-col.bad {
  border-color: rgba(231, 76, 60, 0.28);
  background:
    linear-gradient(180deg, rgba(231,76,60,0.04) 0%, transparent 60%),
    var(--bg-elev);
}
.compare-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.compare-col.good .compare-eyebrow { color: var(--green); }
.compare-col.bad .compare-eyebrow  { color: var(--red); }
.compare-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.compare-steps li {
  counter-increment: step-counter;
  padding: 10px 0 10px 38px;
  position: relative;
  font-size: 14.5px;
  color: var(--text);
  border-bottom: 1px solid rgba(38,43,58,0.6);
}
.compare-steps li:last-child { border-bottom: none; }
.compare-steps li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-elev-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}
.compare-steps { counter-reset: step-counter; }
.compare-foot {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

/* ==========================================================================
   Feature grid — 6 cards, 3 wide on desktop
   ========================================================================== */
.features {
  background: var(--bg);
}
.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
@media (max-width: 880px) { .feat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }
.feat {
  position: relative;
  padding: 28px;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  transition: border-color .15s, transform .12s, background .15s;
}
.feat:hover {
  border-color: rgba(241, 196, 15, 0.45);
  background:
    linear-gradient(180deg, rgba(241,196,15,0.03) 0%, transparent 60%),
    var(--bg-elev);
  transform: translateY(-2px);
}
.feat-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(241, 196, 15, 0.10);
  border: 1px solid rgba(241, 196, 15, 0.25);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
  font-size: 20px;
}
/* Discord feature card — use Discord's brand blurple for the icon container
   so it pattern-matches the actual Discord brand. */
.feat-icon-discord {
  background: rgba(88, 101, 242, 0.12);
  border-color: rgba(88, 101, 242, 0.32);
  color: #5865F2;
}
.feat-title {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--text);
}
.feat-body {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.6;
  margin: 0;
}

/* ==========================================================================
   See it in action — side-by-side video cards
   ========================================================================== */
.demos { background: var(--bg); }
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* side-by-side at every viewport */
  gap: 22px;
}
/* Only collapse to single column on phones where 16:9 cards become too small */
@media (max-width: 560px) { .demo-grid { grid-template-columns: 1fr; } }


.demo-card {
  margin: 0;
  padding: 0;
}
.demo-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: #000;
  overflow: hidden;
  margin-bottom: 14px;
  /* Subtle gold-tinted glow on hover so the card feels interactive */
  transition: border-color .15s, transform .12s;
}
.demo-card:hover .demo-video {
  border-color: rgba(241, 196, 15, 0.45);
  transform: translateY(-2px);
}
.demo-video video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* When the <source> file is missing, the browser still shows the controls,
     and we layer the placeholder behind it. The video element fails silently
     to a transparent state, so the placeholder shows through. */
}
.demo-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  text-align: center;
  background:
    radial-gradient(80% 100% at 50% 40%, rgba(241,196,15,0.07), transparent 70%),
    var(--bg-elev-2);
  color: var(--text-dim);
  z-index: 0;
}
.demo-placeholder .ig-label {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 700;
}
.demo-placeholder .ig-title {
  font-size: 15px;
  color: var(--text);
  font-weight: 600;
}
.demo-placeholder .ig-spec {
  font-size: 11.5px;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
  color: var(--text-faint);
}
.demo-placeholder .ig-spec code {
  background: rgba(255,255,255,0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
/* Once the real video loads, video element paints over the placeholder. */
.demo-video video { position: relative; z-index: 1; background: #000; }

.demo-caption-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}
.demo-caption-sub {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.55;
}

/* Click-to-expand affordance — cards become buttons */
.demo-card { cursor: pointer; }
.demo-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 6px;
}
.demo-expand-badge {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(15, 17, 21, 0.75);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .18s, transform .18s;
  z-index: 3;
}
.demo-card:hover .demo-expand-badge,
.demo-card:focus-visible .demo-expand-badge {
  opacity: 1;
  transform: translateY(0);
}

/* Lightbox modal — full-viewport overlay with the expanded video centered */
.demo-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 4vw, 64px);
  background: rgba(5, 7, 12, 0.88);
  backdrop-filter: blur(14px);
  animation: demo-lb-in .2s ease-out;
}
.demo-lightbox[hidden] { display: none; }
@keyframes demo-lb-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.demo-lightbox-close {
  position: absolute;
  top: 20px; right: 24px;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(38, 43, 58, 0.7);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .04s;
}
.demo-lightbox-close:hover {
  background: rgba(38, 43, 58, 0.95);
  border-color: rgba(241, 196, 15, 0.5);
}
.demo-lightbox-close:active { transform: translateY(1px); }
.demo-lightbox-stage {
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.demo-lightbox-video {
  width: 100%;
  max-height: 80vh;
  border-radius: var(--radius-md);
  background: #000;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(241, 196, 15, 0.12);
}
.demo-lightbox-caption {
  font-size: 14px;
  color: var(--text-dim);
  text-align: center;
  letter-spacing: 0.02em;
  max-width: 720px;
}

/* ==========================================================================
   Pricing teaser — 4 tier cards
   ========================================================================== */
.pricing {
  background:
    radial-gradient(900px 500px at 50% 0%, rgba(241,196,15,0.05), transparent 70%),
    var(--bg);
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .price-grid { grid-template-columns: 1fr; } }
.price-card {
  padding: 28px 24px 26px;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  transition: border-color .18s, transform .15s, box-shadow .18s, background .18s;
}
.price-card:hover {
  transform: translateY(-3px);
  border-color: rgba(241, 196, 15, 0.55);
  background:
    linear-gradient(180deg, rgba(241,196,15,0.04) 0%, transparent 50%),
    var(--bg-elev);
  box-shadow:
    0 14px 30px rgba(0,0,0,0.45),
    0 0 0 3px rgba(241, 196, 15, 0.12);
}
.price-card.featured:hover {
  border-color: rgba(248, 226, 179, 0.85);
  box-shadow:
    0 18px 40px rgba(0,0,0,0.5),
    0 0 0 3px rgba(241, 196, 15, 0.18),
    0 8px 32px rgba(241, 196, 15, 0.10);
}
.price-card.featured {
  border-color: var(--gold-warm);
  background:
    linear-gradient(180deg, rgba(241,196,15,0.06) 0%, transparent 60%),
    var(--bg-elev);
  box-shadow: 0 8px 32px rgba(241, 196, 15, 0.08);
  position: relative;
}
.price-card.featured::before {
  content: 'MOST POPULAR';
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #f0d68a 0%, var(--gold-warm) 60%, #9b7c3d 100%);
  color: #1a1410;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.price-tier {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 700;
  margin-bottom: 8px;
}
.price-amount {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 4px;
  color: var(--text);
}
.price-amount span { font-size: 14px; color: var(--text-dim); font-weight: 500; }

/* Public-beta promo banner below the pricing grid */
.price-promo {
  text-align: center;
  max-width: 620px;
  margin: 30px auto 0;
  padding: 11px 20px;
  border-radius: 999px;
  background: rgba(241, 196, 15, 0.10);
  border: 1px solid rgba(241, 196, 15, 0.35);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}
.price-promo code {
  background: rgba(241, 196, 15, 0.18);
  color: var(--gold, #f1c40f);
  padding: 2px 9px;
  border-radius: 6px;
  font-weight: 700;
  letter-spacing: 0.05em;
  font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace;
}
.price-tag {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0 0 18px;
  min-height: 38px;
}
.price-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text);
  flex: 1;
}
.price-feats li::before {
  content: '✓';
  color: var(--green);
  margin-right: 8px;
  font-weight: 700;
}

/* ==========================================================================
   Caveats — kept from current site but lifted into the new spacing rhythm
   ========================================================================== */
.caveats { background: var(--bg); }
.caveat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .caveat-list { grid-template-columns: 1fr; } }
.caveat-item {
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--bg-elev);
  border: 1px solid var(--border);
}
.caveat-title {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--text);
}
.caveat-body {
  font-size: 13.5px;
  color: var(--text-dim);
  line-height: 1.6;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { background: var(--bg); }
.faq-list {
  max-width: 760px;
  margin: 0 auto;
}
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  font-size: 22px;
  color: var(--gold);
  font-weight: 400;
  transition: transform .2s;
  flex-shrink: 0;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-body {
  padding-top: 14px;
  color: var(--text-dim);
  font-size: 14.5px;
  line-height: 1.65;
}

/* ==========================================================================
   Final CTA block — full-width gradient panel
   ========================================================================== */
.final-cta {
  padding-top: 0;
}
.final-cta-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: clamp(48px, 8vw, 96px) clamp(28px, 6vw, 72px);
  background:
    radial-gradient(80% 120% at 20% 0%, rgba(241,196,15,0.18) 0%, transparent 60%),
    radial-gradient(60% 100% at 100% 100%, rgba(88,101,242,0.20) 0%, transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--border);
  text-align: center;
}
.final-cta-card h2 {
  font-size: clamp(28px, 4.5vw, 44px);
  margin: 0 0 14px;
  font-weight: 800;
  letter-spacing: -1px;
}
.final-cta-card p {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--text-dim);
  margin: 0 auto 28px;
  max-width: 580px;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot {
  padding: 56px 0 32px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.foot-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.foot-brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.5px;
}
.foot-tag {
  font-size: 11px;
  color: var(--text-faint);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 2px;
}
.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-links a {
  color: var(--text-dim);
  font-size: 13.5px;
}
.foot-legal {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(38,43,58,0.6);
  font-size: 12px;
  color: var(--text-faint);
  text-align: center;
}

/* ==========================================================================
   Small utility
   ========================================================================== */
.muted { color: var(--text-dim); }
.center { text-align: center; }
.hidden-md { display: initial; }
@media (max-width: 720px) { .hidden-md { display: none; } }

/* Sandbox badge — fixed top-right so it's clear this is a preview */
.sandbox-badge {
  position: fixed;
  top: 12px; right: 14px;
  z-index: 100;
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: 999px;
  background: rgba(231, 76, 60, 0.15);
  border: 1px solid rgba(231, 76, 60, 0.45);
  color: #ff8a7a;
  backdrop-filter: blur(8px);
}