/* =============================================================================
   redesign-what-is-gex.css — page-scoped refinements for /what-is-gex
   Loads AFTER landing.css. Every rule is scoped under body.page-what-is-gex so
   it can only ever affect this one SEO page — never the other landing pages
   that share landing.css. Uses the existing --ld-* design tokens.
   No inline styles anywhere (strict CSP: style-src 'self').
   ========================================================================== */

/* ----- HERO: balanced two-column layout (copy + dealer-hedging schematic) -- */
/* Drop the single-column centring so the base .pdp-hero__inner 2-col grid
   (copy | visual) takes over. It already collapses to one column <=1080px. */
body.page-what-is-gex .pdp-hero__inner {
  align-items: center;
}
body.page-what-is-gex .pdp-hero__copy {
  max-width: 620px;
}
body.page-what-is-gex .pdp-hero__pills {
  list-style: none; padding: 0; margin: var(--ld-sp-2) 0 0;
  display: flex; gap: 8px; flex-wrap: wrap;
}
body.page-what-is-gex .pdp-hero__pills li {
  font-size: 12.5px; color: var(--ld-ink-dim);
  border: 1px solid var(--ld-line-2); padding: 5px 12px; border-radius: 999px;
  background: rgba(200, 168, 120, 0.04);
}

/* Visual column */
body.page-what-is-gex .wig-hero__visual {
  display: flex; justify-content: center; align-self: center;
  min-width: 0;
}

/* Premium chart panel wrapping the SVG */
body.page-what-is-gex .wig-panel {
  margin: 0; width: 100%; max-width: 620px;
  background: linear-gradient(180deg, var(--ld-surface), var(--ld-surface-2));
  border: 1px solid var(--ld-line-2);
  border-radius: var(--ld-r-4);
  box-shadow: 0 50px 100px -60px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  overflow: hidden;
}
body.page-what-is-gex .wig-panel__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px;
  background: var(--ld-bg-2);
  border-bottom: 1px solid var(--ld-line);
  font-family: var(--ld-font-mono); font-size: 11px; letter-spacing: 0.06em;
  color: var(--ld-ink-dim);
}
body.page-what-is-gex .wig-panel__dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ld-line-2); display: inline-block;
}
body.page-what-is-gex .wig-panel__label { margin-left: var(--ld-sp-2); }
body.page-what-is-gex .wig-panel__plot {
  padding: 14px 14px 4px;
  background:
    radial-gradient(760px 220px at 60% 42%, rgba(200, 168, 120, 0.07), transparent 62%),
    linear-gradient(180deg, var(--ld-bg-2), var(--ld-surface));
}
body.page-what-is-gex .wig-svg { display: block; width: 100%; height: auto; }
body.page-what-is-gex .wig-panel__foot {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 15px 12px;
  font-family: var(--ld-font-mono); font-size: 10.5px; letter-spacing: 0.05em;
  color: var(--ld-ink-fade);
  border-top: 1px solid var(--ld-line);
}

/* Gentle life on the schematic (respects reduced-motion) */
body.page-what-is-gex .wig-spot { transform-box: fill-box; transform-origin: center; animation: wigSpotPulse 3.6s ease-in-out infinite; }
body.page-what-is-gex .wig-flip { animation: wigFlipPulse 4.2s ease-in-out infinite; }
@keyframes wigSpotPulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }
@keyframes wigFlipPulse { 0%, 100% { stroke-opacity: 0.6; } 50% { stroke-opacity: 0.95; } }
@media (prefers-reduced-motion: reduce) {
  body.page-what-is-gex .wig-spot,
  body.page-what-is-gex .wig-flip { animation: none; }
}

/* ----- Section intro paragraph that sits above a card block ---------------- */
body.page-what-is-gex .wig-lead {
  max-width: 62ch; margin: 0 0 var(--ld-sp-7);
  color: var(--ld-ink-dim); font-size: 17px; line-height: 1.6;
}
body.page-what-is-gex .wig-lead strong { color: var(--ld-ink); font-weight: 600; }

/* ----- Positive vs negative gamma: calm / chaos comparison ----------------- */
body.page-what-is-gex .wig-duo {
  display: grid; gap: var(--ld-sp-5);
  grid-template-columns: 1fr 1fr;
  margin-top: var(--ld-sp-6);
}
@media (max-width: 760px) { body.page-what-is-gex .wig-duo { grid-template-columns: 1fr; } }
body.page-what-is-gex .wig-duo__card {
  padding: var(--ld-sp-6);
  border: 1px solid var(--ld-line);
  border-left-width: 3px;
  border-radius: var(--ld-r-3);
  background: var(--ld-surface);
  display: grid; gap: var(--ld-sp-2); align-content: start;
}
body.page-what-is-gex .wig-duo__card--calm  { border-left-color: var(--ld-call); }
body.page-what-is-gex .wig-duo__card--chaos { border-left-color: var(--ld-put); }
body.page-what-is-gex .wig-duo__tag {
  font-family: var(--ld-font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
}
body.page-what-is-gex .wig-duo__card--calm  .wig-duo__tag { color: var(--ld-call); }
body.page-what-is-gex .wig-duo__card--chaos .wig-duo__tag { color: var(--ld-put); }
body.page-what-is-gex .wig-duo__card h3 {
  margin: 2px 0 0; font-size: 17px; color: var(--ld-ink); font-weight: 600;
}
body.page-what-is-gex .wig-duo__card p { margin: 0; color: var(--ld-ink-dim); font-size: 14.5px; line-height: 1.55; }
body.page-what-is-gex .wig-duo__foot {
  margin: var(--ld-sp-5) 0 0; color: var(--ld-ink-fade); font-size: 13.5px;
}
body.page-what-is-gex .wig-duo__foot strong { color: var(--ld-gold); font-weight: 600; }

/* ----- Risk disclosure rendered as a calm callout, not raw text ------------ */
body.page-what-is-gex .wig-note {
  border: 1px solid var(--ld-line-2);
  border-radius: var(--ld-r-3);
  background: linear-gradient(180deg, var(--ld-surface), var(--ld-bg-2));
  padding: var(--ld-sp-6) var(--ld-sp-6);
  max-width: none;
}
body.page-what-is-gex .wig-note__label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ld-font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ld-warn);
  margin: 0 0 var(--ld-sp-3);
}
body.page-what-is-gex .wig-note__label::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ld-warn); box-shadow: 0 0 10px var(--ld-warn);
}
body.page-what-is-gex .wig-note p { margin: 0; color: var(--ld-ink-dim); font-size: 15px; line-height: 1.62; }

/* ----- Mobile polish ------------------------------------------------------- */
@media (max-width: 1080px) {
  body.page-what-is-gex .wig-hero__visual { justify-content: stretch; }
  body.page-what-is-gex .wig-panel { max-width: 560px; margin: 0 auto; }
}
@media (max-width: 520px) {
  body.page-what-is-gex .wig-panel__foot { font-size: 10px; }
}

/* ===== GEX THEMES (GENERATED - do not edit, run scripts/gen-themes.py) ===== */
/* -- theme white -- */
html[data-theme="white"] body.page-what-is-gex .pdp-hero__pills li { background: rgba(154, 116, 52, 0.04); }
html[data-theme="white"] body.page-what-is-gex .wig-panel__plot { background: radial-gradient(760px 220px at 60% 42%, rgba(154, 116, 52, 0.07), transparent 62%),
    linear-gradient(180deg, var(--ld-bg-2), var(--ld-surface)); }
/* ===== END GEX THEMES ===== */