/* landing-index.css — Landing v5 (s103 port). Content = design-handoff landing-v5.css verbatim. All colors/fonts resolve through brand.js GG_BRAND.injectCSS() custom props — never hardcode hex. Served at /goldengoose/css/landing-index.css (StaticFiles mount). */
/* ═══════════════════════════════════════════════════════════════
   REGIME TRADER — Landing v4 "Motion"
   Every color + font references tokens injected by landing/brand.js
   (GG_BRAND.injectCSS). No hardcoded brand values.
   ═══════════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* s103 deviation from prototype (parity bug fix): the marquee track, hero glows,
   and hero live strip extend past the viewport at narrow widths in the PROTOTYPE
   TOO (measured scrollWidth 492 @ 375px viewport, identical both sides). Clip
   horizontal overflow at the root — no intended horizontal scroll exists anywhere
   on this page. `clip` (not `hidden`): does not create a scroll container. */
html, body { overflow-x: clip; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-bright); }

::selection { background: var(--gold); color: var(--gold-ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--canvas); }
::-webkit-scrollbar-thumb { background: var(--hairline-2); border-radius: 10px; }

.wrap4 { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }

.eyebrow4 {
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: var(--w-medium);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ─── Scroll progress ─── */
#progress4 {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright));
  z-index: 200;
}

/* ─── Nav ─── */
.nav4 {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
  border-bottom: 1px solid transparent;
}
.nav4.scrolled {
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom-color: var(--hairline);
}
.nav4-inner {
  display: flex; align-items: center; gap: 32px;
  height: 72px;
}
.nav4-brand { display: flex; align-items: center; gap: 12px; }
.nav4-egg { width: 22px; height: 28px; display: block; }
.nav4-egg svg { width: 100%; height: 100%; display: block; }
.nav4-mark {
  font-family: var(--f-display);
  font-weight: var(--w-black);
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav4-mark span { color: var(--gold); }
.nav4-links { display: flex; gap: 8px; margin-left: auto; }
.nav4-link {
  font-size: 14px; font-weight: var(--w-medium); color: var(--ink-2);
  padding: 8px 14px; border-radius: 999px;
  transition: color 0.25s, background 0.25s;
}
.nav4-link:hover { color: var(--ink); background: var(--surface-2); }

/* ─── Buttons ─── */
.btn4 {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-sans); font-weight: var(--w-semi); font-size: 15px;
  padding: 14px 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s;
  will-change: transform;
}
.btn4 svg { width: 17px; height: 17px; stroke-width: 2.2; }
.btn4-primary {
  background: linear-gradient(180deg, var(--gold-bright), var(--gold) 55%, var(--gold-deep) 130%);
  color: var(--gold-ink);
  box-shadow: 0 0 0 1px var(--gold-line), 0 8px 32px var(--gold-wash), 0 0 48px var(--gold-wash);
}
.btn4-primary:hover { color: var(--gold-ink); box-shadow: 0 0 0 1px var(--gold-line), 0 12px 44px var(--gold-wash), 0 0 80px var(--gold-wash); }
.btn4-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.55) 50%, transparent 70%);
  transform: translateX(-120%);
}
.btn4-primary:hover::after { transition: transform 0.8s ease; transform: translateX(120%); }
.btn4-ghost {
  color: var(--ink); border-color: var(--hairline-strong);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  backdrop-filter: blur(8px);
}
.btn4-ghost:hover { color: var(--ink); border-color: var(--gold-line); background: var(--surface-2); }
.btn4-lg { padding: 18px 36px; font-size: 17px; }
.btn4 .goose-inline { width: 29px; height: 29px; display: inline-block; vertical-align: middle; }

/* ═══════════════════════════ HERO ═══════════════════════════ */
.hero4 {
  position: relative; min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  overflow: hidden;
}
#dust4 { position: absolute; inset: 0; width: 100%; height: 100%; }

.hero4-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 45%, black 0%, transparent 75%);
  opacity: 0.6;
}
.glow4 {
  position: absolute; border-radius: 50%; filter: blur(110px);
  pointer-events: none; opacity: 0.5;
}
.glow4-a {
  width: 640px; height: 640px; left: 50%; top: -20%;
  transform: translateX(-50%);
  background: radial-gradient(circle, var(--gold-wash), transparent 65%);
  background-color: var(--gold-wash);
  animation: drift4a 14s ease-in-out infinite alternate;
}
.glow4-b {
  width: 480px; height: 480px; right: -10%; bottom: -5%;
  background-color: var(--info-soft);
  animation: drift4b 18s ease-in-out infinite alternate;
}
@keyframes drift4a { from { transform: translateX(-56%) translateY(0); } to { transform: translateX(-44%) translateY(60px); } }
@keyframes drift4b { from { transform: translate(0, 0) scale(1); } to { transform: translate(-80px, -60px) scale(1.15); } }

.hero4-inner {
  position: relative; z-index: 2; text-align: center;
  padding: 140px 0 80px;
}
.hero4-pill {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--gold-line); border-radius: 999px;
  padding: 9px 20px 9px 14px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 32px var(--gold-wash);
}
.hero4-pill .pill-br { display: none; }
.hero4-pill .pill-goose { width: 20px; height: 20px; color: var(--gold); flex-shrink: 0; }
.hero4-pill em { font-style: normal; color: var(--gold); }
.hero4-pill-text { text-align: left; }

.hero4 h1 {
  font-family: var(--f-display);
  font-weight: var(--w-extra);
  font-size: clamp(54px, 8.6vw, 124px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 36px 0 28px;
}
.hero4 h1 .l { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero4 h1 .w {
  display: inline-block; transform: translateY(112%);
  transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--w-i, 0) * 90ms);
}
.hero4.in h1 .w { transform: translateY(0); }
.hero4 h1 .gold-grad {
  background: linear-gradient(180deg, var(--gold-bright) 10%, var(--gold) 55%, var(--gold-deep) 105%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

.hero4-sub {
  max-width: 620px; margin: 0 auto 44px;
  font-size: 19px; line-height: 1.65; color: var(--ink-2);
  text-wrap: pretty;
}
.hero4-sub b { color: var(--ink); font-weight: var(--w-semi); }
.hero4-cta { display: flex; gap: 16px; justify-content: center; align-items: center; }

.hero4-cue {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding-bottom: 28px;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em;
  color: var(--ink-4);
}
.hero4-cue .line {
  width: 1px; height: 44px; overflow: hidden; position: relative;
  background: var(--hairline-2);
}
.hero4-cue .line::after {
  content: ""; position: absolute; left: 0; top: -50%;
  width: 100%; height: 50%;
  background: var(--gold);
  animation: cue4 2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
@keyframes cue4 { 0% { top: -50%; } 100% { top: 110%; } }

/* ─── Hero marquee ─── */
.mq4 {
  position: relative; z-index: 2;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  background: color-mix(in srgb, var(--surface) 45%, transparent);
  backdrop-filter: blur(8px);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.mq4-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content; padding: 16px 28px;
  animation: mq4 46s linear infinite;
}
.mq4:hover .mq4-track { animation-play-state: paused; }
@keyframes mq4 { to { transform: translateX(-50%); } }
.mq4-item {
  display: inline-flex; align-items: center; gap: 10px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-3);
}
.mq4-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.mq4-item svg { width: 14px; height: 14px; stroke-width: 2.4; }

/* ─── Reveal system ─── */
.rv {
  opacity: 0; transform: translateY(30px); filter: blur(7px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--rv-i, 0) * 100ms);
}
.rv.in { opacity: 1; transform: none; filter: none; }

/* ═══════════════════════════ SECTIONS ═══════════════════════════ */
section { position: relative; }
.sec4 { padding: 48px 0; }
.sec4-head { max-width: 780px; margin-bottom: 52px; }
.sec4-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.sec4-h {
  font-family: var(--f-display);
  font-weight: var(--w-bold);
  font-size: clamp(38px, 4.6vw, 64px);
  line-height: 1.04; letter-spacing: -0.03em;
  margin: 18px 0 22px;
}
.sec4-h em { font-style: normal; color: var(--gold); }
/* Regimes heading: keep each sentence on one line, scale to fit */
#regimes .sec4-head { max-width: none; }
#regimes .sec4-h { white-space: nowrap; font-size: clamp(28px, 5vw, 52px); }
#agentic .sec4-h { white-space: nowrap; font-size: clamp(26px, 4.4vw, 56px); }
#pricing .sec4-head { max-width: none; }
#pricing .sec4-h { white-space: nowrap; font-size: clamp(26px, 4.4vw, 52px); }
/* "Trade accordingly." rises up from a clip mask when the heading enters view */
.rise-mask { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: 0.16em; margin-bottom: -0.16em; }
.rise-line { display: inline-block; transform: translateY(115%); transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1) 0.3s; }
.rv.in .rise-line { transform: translateY(0); }
.sec4-deck { font-size: 18px; color: var(--ink-2); line-height: 1.65; text-wrap: pretty; }
.sec4-deck em { font-style: normal; color: var(--gold); }

/* ─── Engine ─── */
.engine4-grid {
  display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 72px; align-items: center;
}
.engine4-copy p { font-size: 17px; color: var(--ink-2); margin-top: 20px; text-wrap: pretty; }
.engine4-copy p b { color: var(--ink); font-weight: var(--w-semi); }
.engine4-copy p em { font-style: normal; color: var(--gold); }

.report4 {
  position: relative;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 28px;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 90px var(--gold-wash);
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.report4::before {
  content: ""; position: absolute; inset: -1px; border-radius: var(--radius-lg);
  padding: 1px; pointer-events: none;
  background: linear-gradient(135deg, var(--gold-line), transparent 40%, transparent 60%, var(--gold-line));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.report4-hd {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-3);
  padding-bottom: 18px; border-bottom: 1px solid var(--hairline);
}
.report4-hd .sep { color: var(--ink-5); margin: 0 6px; }
.report4-hd .strat { color: var(--ink); }
.report4-wft { display: inline-flex; align-items: center; gap: 8px; color: var(--up); white-space: nowrap; }
.pulse4 {
  width: 8px; height: 8px; border-radius: 50%; background: var(--up);
  animation: pulse4 2s ease-out infinite;
}
@keyframes pulse4 {
  0% { box-shadow: 0 0 0 0 var(--up-soft), 0 0 0 0 var(--up-soft); }
  70% { box-shadow: 0 0 0 9px transparent, 0 0 0 4px var(--up-soft); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 0 transparent; }
}
.report4-hero { display: flex; justify-content: space-between; gap: 32px; padding: 26px 0; flex-wrap: wrap; }
.report4-ke { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 10px; }
.report4-v {
  font-family: var(--f-display); font-weight: var(--w-extra);
  font-size: clamp(48px, 4.6vw, 68px); line-height: 1; letter-spacing: -0.03em;
  color: var(--up);
  font-feature-settings: "tnum";
}
.report4-v .pct { font-size: 0.55em; font-weight: var(--w-bold); }
.report4-meta { font-size: 13px; color: var(--ink-3); margin-top: 12px; font-family: var(--f-mono); }
.report4-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 36px; align-content: center; }
.report4-stat .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.report4-stat .v { font-family: var(--f-mono); font-size: 21px; font-weight: var(--w-semi); font-feature-settings: "tnum"; }
.report4-stat .v.gold { color: var(--gold); }
.report4-stat .v.down { color: var(--down); }
.report4-foot {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding-top: 18px; border-top: 1px solid var(--hairline);
}
.report4-rg { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: var(--radius); font-size: 12px; }
.report4-rg .k { font-weight: var(--w-semi); }
.report4-rg .v { font-family: var(--f-mono); font-size: 11px; color: var(--ink-3); }

/* ─── Regimes ─── */
.regimes4 { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 55%, transparent) 18%, color-mix(in srgb, var(--surface) 55%, transparent) 82%, transparent); }
.regime4-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.regime4-card {
  --rc: var(--ink-3); --rc-soft: var(--surface-2); --rc-deep: var(--hairline-2);
  position: relative; text-align: center;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  transform-style: preserve-3d;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s, box-shadow 0.35s;
}
.regime4-card:hover { border-color: var(--rc-deep); box-shadow: 0 24px 64px rgba(0,0,0,0.4), 0 0 54px var(--rc-soft); }
.regime4-ic {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center;
  background: var(--rc-soft); color: var(--rc);
  margin: 0 auto 18px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.regime4-card:hover .regime4-ic { transform: translateZ(30px) scale(1.08); }
.regime4-ic svg { width: 22px; height: 22px; stroke-width: 2.2; }
.regime4-name { font-family: var(--f-display); font-size: 20px; font-weight: var(--w-semi); color: var(--rc); }
.regime4-id { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); margin: 4px 0 14px; }
.regime4-desc { font-size: 14px; color: var(--ink-2); line-height: 1.6; min-height: 88px; text-wrap: pretty; }
.regime4-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px 16px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--hairline);
}
.regime4-stats .k { font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
.regime4-stats .v { font-family: var(--f-mono); font-size: 16px; font-weight: var(--w-semi); color: var(--ink); font-feature-settings: "tnum"; }

/* ─── Regime time bar ─── */
.rbar4 { margin-top: 44px; }
.rbar4-label { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 12px; }
.rbar4-track { display: flex; height: 40px; border-radius: 999px; overflow: hidden; border: 1px solid var(--hairline-2); }
.rbar4-seg {
  --w: 0%;
  width: var(--w); min-width: 0;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 11px; font-weight: var(--w-semi);
  color: var(--canvas);
  transition: width 1.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap; overflow: hidden;
}

/* ─── Equity curve panel ─── */
.curve4 {
  margin-top: 48px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 28px 28px 20px;
  backdrop-filter: blur(10px);
}
.curve4-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.curve4-hd .t { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.curve4-hd .m { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4); }
#eq4 { width: 100%; height: auto; display: block; }
.curve4-legend { display: flex; gap: 26px; flex-wrap: wrap; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hairline); }
.curve4-li { display: inline-flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.curve4-li .sw { width: 18px; height: 3px; border-radius: 2px; }

/* ─── Modules (sticky stack) ─── */
.mods4 { display: flex; flex-direction: column; gap: 18px; }
.mod4 {
  --mc: var(--gold);
  position: sticky;
  top: calc(104px + var(--i) * 34px);
  display: grid; grid-template-columns: 200px 1fr 1fr; gap: 40px;
  background: var(--surface);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  overflow: hidden;
  box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35);
}
.mod4::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mc);
}
.mod4::after {
  content: ""; position: absolute; left: -140px; top: -140px; width: 320px; height: 320px;
  border-radius: 50%; background: var(--mc); opacity: 0.07; filter: blur(70px);
  pointer-events: none;
}
.mod4.m-build  { --mc: var(--m-build); }
.mod4.m-test   { --mc: var(--m-test); }
.mod4.m-deploy { --mc: var(--m-deploy); }
.mod4.m-trade  { --mc: var(--m-trade); }
.mod4.m-share  { --mc: var(--m-share); }
.mod4 > div:first-child { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.mod4-num { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--ink-4); }
.mod4-tile {
  width: 58px; height: 58px; border-radius: 14px;
  display: grid; place-items: center;
  color: var(--canvas); margin-top: 16px;
}
.mod4.m-build  .mod4-tile { background: var(--grad-cyan); }
.mod4.m-test   .mod4-tile { background: var(--grad-orange); }
.mod4.m-deploy .mod4-tile { background: var(--grad-amber); }
.mod4.m-trade  .mod4-tile { background: var(--grad-green); }
.mod4.m-share  .mod4-tile { background: var(--grad-lavender); }
.mod4-tile svg { width: 27px; height: 27px; stroke-width: 2; }
.mod4 h3 {
  font-family: var(--f-display); font-weight: var(--w-bold);
  font-size: clamp(30px, 3vw, 42px); letter-spacing: -0.02em; color: var(--mc);
  margin-bottom: 14px;
}
.mod4-body { display: flex; flex-direction: column; justify-content: center; text-align: center; }
.mod4-body p { font-size: 16px; color: var(--ink-2); text-wrap: pretty; }
.mod4-feats { display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.mod4-feat { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink-2); }
.mod4-feat svg { width: 16px; height: 16px; stroke-width: 2.6; color: var(--mc); flex-shrink: 0; }

/* ─── Pricing ─── */
.toggle4 { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 28px; position: relative; }
.toggle4 .seg {
  display: inline-flex; background: var(--surface-2);
  border: 1px solid var(--hairline-2); border-radius: 999px; padding: 4px;
}
.toggle4 button {
  font-family: var(--f-sans); font-size: 13.5px; font-weight: var(--w-medium);
  color: var(--ink-3); background: transparent; border: 0; cursor: pointer;
  padding: 8px 20px; border-radius: 999px; transition: all 0.3s;
}
.toggle4 button.active { background: var(--gold); color: var(--gold-ink); font-weight: var(--w-semi); }
.toggle4 .save {
  position: absolute; left: 100%; margin-left: 14px; top: 50%; transform: translateY(-50%); white-space: nowrap;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--up); border: 1px solid var(--up-soft); background: var(--up-soft);
  padding: 5px 12px; border-radius: 999px;
}
.tiers4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.tier4 {
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 30px 26px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s, box-shadow 0.4s;
}
.tier4:hover { transform: translateY(-8px); border-color: var(--hairline-strong); }
.tier4.featured {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, var(--gold-wash), color-mix(in srgb, var(--surface) 85%, transparent) 45%);
  box-shadow: 0 0 60px var(--gold-wash);
}
.tier4.featured:hover { box-shadow: 0 18px 80px var(--gold-wash); }
.tier4-name { font-family: var(--f-display); font-size: 21px; font-weight: var(--w-semi); }
.tier4-tag { font-size: 13.5px; color: var(--ink-3); margin: 6px 0 22px; min-height: 42px; }
.tier4-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 24px; }
.tier4-price .amount {
  font-family: var(--f-display); font-weight: var(--w-extra);
  font-size: 44px; letter-spacing: -0.02em; font-feature-settings: "tnum";
}
.tier4-price .per { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4); }
.tier4 ul { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; }
.tier4 li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.tier4 li b { color: var(--ink); }
.tier4 li svg { width: 15px; height: 15px; stroke-width: 2.6; color: var(--gold); flex-shrink: 0; margin-top: 3px; }
.tier4 .btn4 { margin-top: auto; justify-content: center; }

/* ─── CTA ─── */
.cta4 { text-align: center; padding: 118px 0 108px; overflow: hidden; }
.cta4-goose { display: inline-block; margin-bottom: 8px; }
.cta4 h2 {
  font-family: var(--f-display); font-weight: var(--w-extra);
  font-size: clamp(40px, 5.4vw, 76px); letter-spacing: -0.03em; line-height: 1.05;
  max-width: 880px; margin: 0 auto 22px;
}
.cta4 h2 em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.cta4-sub { font-size: 18px; color: var(--ink-2); margin-bottom: 44px; }
.cta4-glow {
  position: absolute; left: 50%; bottom: -30%; transform: translateX(-50%);
  width: 900px; height: 500px; border-radius: 50%;
  background: var(--gold-wash); filter: blur(130px); pointer-events: none;
}

/* ─── Footer ─── */
footer { border-top: 1px solid var(--hairline); padding: 64px 0 40px; }
.foot4-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.foot4-brand .mk { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.foot4-brand .mk .nav4-egg { width: 18px; height: 23px; }
.foot4-brand p { font-size: 14px; color: var(--ink-3); max-width: 320px; }
.foot4-col h5 {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-4); margin-bottom: 16px; font-weight: var(--w-medium);
}
.foot4-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.foot4-col a { font-size: 14px; color: var(--ink-2); }
.foot4-col a:hover { color: var(--gold); }
.foot4-bottom {
  display: flex; justify-content: space-between; gap: 16px;
  padding-top: 24px; border-top: 1px solid var(--hairline);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4);
}
.disclaimer4 { font-size: 11.5px; line-height: 1.7; color: var(--ink-4); margin-top: 24px; max-width: 980px; }

/* ─── Responsive ─── */
@media (max-width: 1080px) {
  .regime4-grid { grid-template-columns: 1fr 1fr; }
  .tiers4 { grid-template-columns: 1fr 1fr; }
  .engine4-grid { grid-template-columns: 1fr; gap: 48px; }
  .mod4 { grid-template-columns: 140px 1fr; }
  .mod4-feats { grid-column: 2; }
}
@media (max-width: 720px) {
  .wrap4 { padding: 0 22px; }
  .sec4 { padding: 44px 0; }
  .nav4-links { display: none; }
  .regime4-grid { grid-template-columns: 1fr; }
  .tiers4 { grid-template-columns: 1fr; }
  .mod4 { grid-template-columns: 1fr; padding: 28px; gap: 20px; }
  .mod4-feats { grid-column: 1; }
  .hero4-cta { flex-direction: column; }
  .report4-foot { grid-template-columns: 1fr 1fr; }
  .foot4-grid { grid-template-columns: 1fr; gap: 32px; }
  .foot4-bottom { flex-direction: column; }
  .rbar4-seg { font-size: 0; }

  /* s105 mobile fix (Eli phone report, issue 1): hero pill "Home of the Golden
     Goose · Regime Detection Engine" was one long inline-flex run that wrapped
     onto 3 ragged lines at 375px. Split into two explicit rows (top.html now
     wraps the copy in .hero4-pill-lines > two .hero4-pill-line spans, which are
     display:contents by default so desktop is untouched). Stack pill icon above
     the two centered text rows on mobile only. */
  .hero4-pill { gap: 8px; max-width: 100%; padding: 10px 16px; }
  .hero4-pill-text { letter-spacing: 0.1em; }
  .hero4-pill .pill-sep { display: none; }
  .hero4-pill .pill-br { display: inline; }

  /* s105 mobile fix (issue 2): "Build your own" (h1 line 1) needs to fit on one
     row at 375px. Desktop clamp() floor (54px) is too wide for a 331px content
     column with three words; shrink the minimum on mobile only. */
  .hero4 h1 { font-size: clamp(40px, 11vw, 124px); }

  /* s105 mobile fix (issue 3): "The market has two regimes." already wraps
     normally on mobile (s104 fix removed white-space:nowrap from the whole
     heading), but that let "two regimes" itself split across the wrap. Keep
     just that phrase together while the rest of the sentence still wraps. */
  #regimes .sec4-h em { white-space: nowrap; }

  /* s105 mobile fix (issue 4): nav4-links (which carried margin-left:auto) is
     display:none on mobile, so the Sign On button no longer gets pushed to the
     right edge and instead packs left next to the brand. Right-align directly. */
  .nav4-inner { justify-content: space-between; }

  /* s105 mobile fix (issue 5): the engine section's "Measure volatility.
     Mitigate risk." heading + its paragraph are left-aligned (engine4-copy has
     no text-align rule); center the whole copy column on mobile to match the
     centered treatment used elsewhere on the page. */
  .engine4-copy { text-align: center; }

  /* s104 mobile fix (Eli phone report — pill overlapping header): TRUE root
     cause. <div class="wrap4 hero4-inner"> carries BOTH classes. `.wrap4`
     and `.hero4-inner` each have specificity (0,1,0); at this exact
     breakpoint `.wrap4 { padding: 0 22px; }` (line above) sits LATER in
     source order than the base `.hero4-inner { padding: 140px 0 80px; }`
     rule, so the tie is broken by cascade order and the shorthand `0 22px`
     wins outright — it zeroes hero4-inner's padding-top (140px → 0) and
     padding-bottom (80px → 0) along with setting the sides. With no
     padding-top, the hero4-pill (first child) renders at y=0, directly
     under/behind the fixed .nav4 (72px, z-index:100). Re-assert the
     vertical padding after `.wrap4`'s mobile rule so it wins the same tie.
     Also stop `.hero4` from vertically centering its content (pill + h1 +
     sub + cta + live strip + marquee, taller than one screen on mobile) —
     centering alone would still have pushed the pill above the viewport
     even with padding-top restored. Both fixes are required together. */
  .hero4-inner { padding-top: 96px; padding-bottom: 64px; }
  .hero4 { justify-content: flex-start; }

  /* s104 mobile fix: these three headings force white-space:nowrap so the
     sentence stays on one line on desktop (scaled to fit via clamp()). At
     mobile widths the clamp() floor is still wider than the 331px content
     column, so the nowrap line overflows the box; text-align:center then
     centers an oversized line box, which bleeds off (mostly to the right)
     and reads as "not centered" / "cut off" (regimes heading, agentic
     heading, pricing heading). Allow normal wrapping at these widths instead
     — this is the ROOT of the "two regimes" heading centering bug and the
     general off-center/right-shift impression from overflowing headings. */
  #regimes .sec4-h, #agentic .sec4-h, #pricing .sec4-h { white-space: normal; font-size: clamp(32px, 8vw, 52px); }

  /* s104 mobile fix: "Golden&nbsp;Goose&nbsp;Eggs" is joined with non-breaking
     spaces so the brand name never splits mid-phrase. At mobile widths the
     joined run can be wider than the centered box and overflow (same root
     cause as above, via nbsp instead of white-space:nowrap). Allow a forced
     break only if it would otherwise overflow, so the heading stays centered
     instead of bleeding past the viewport edge. */
  #cta h2 { overflow-wrap: break-word; }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv, .hero4 h1 .w { opacity: 1; transform: none; filter: none; transition: none; }
  .rise-line { transform: none; transition: none; }
  .mq4-track { animation: none; }
  .glow4-a, .glow4-b, .pulse4, .hero4-cue .line::after { animation: none; }
  .btn4, .tier4, .regime4-card { transition: none; }
}

/* ═══════════ V5 — Calm/Rough vol-dial pivot (s98 model) ═══════════ */
/* All colors/fonts below resolve through brand.js-injected CSS custom props. */

/* Two-state regime accents */
.mq4-item.rg-calm { color: var(--regime-calm); }
.mq4-item.rg-rough { color: var(--regime-rough); }
.mq4-item.rg-calm .dot { background: var(--regime-calm); }
.mq4-item.rg-rough .dot { background: var(--regime-rough); }
.report4-rg.r-calm { background: var(--regime-calm-soft); color: var(--regime-calm); }
.report4-rg.r-rough { background: var(--regime-rough-soft); color: var(--regime-rough); }
.report4-rg.r-gold { background: var(--gold-wash); color: var(--gold); }
.report4-rg.r-muted { background: var(--surface-2); color: var(--ink-3); }
.regime4-card.r-calm { --rc: var(--regime-calm); --rc-soft: var(--regime-calm-soft); --rc-deep: var(--regime-calm-deep); }
.regime4-card.r-rough { --rc: var(--regime-rough); --rc-soft: var(--regime-rough-soft); --rc-deep: var(--regime-rough-deep); }
.regime4-grid.duo { grid-template-columns: 1fr 1fr; gap: 24px; }
.regime4-grid.duo .regime4-name { font-size: 27px; }
.regime4-grid.duo .regime4-desc { min-height: 0; font-size: 15px; }
.rbar4-seg.r-calm { background: var(--regime-calm); transition-delay: 0ms; }
.rbar4-seg.r-rough { background: var(--regime-rough); transition-delay: 140ms; }

/* Hero live regime strip */
.hero4-live {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 30px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-3);
  border: 1px solid var(--hairline-2); border-radius: 999px;
  padding: 10px 20px;
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(10px);
}
.hero4-live b { color: var(--ink); font-weight: var(--w-semi); font-feature-settings: "tnum"; }
.hero4-live .rg { color: var(--regime-calm); font-weight: var(--w-semi); }
.hero4-live .sep { color: var(--ink-5); }
.hero4-live .live-today { color: var(--gold); font-weight: var(--w-semi); }

/* Volatility dial — sticky scroll stage */
.dial5-wrap { position: relative; height: 260vh; }
.dial5-sticky {
  position: sticky; top: 0; min-height: 100vh;
  display: flex; align-items: center;
  overflow: hidden;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--surface) 50%, transparent) 18%, color-mix(in srgb, var(--surface) 50%, transparent) 82%, transparent);
}
.dial5-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; width: 100%; }
/* Horizontal tandem dials (turbulence + allocation) */
.hdial + .hdial { margin-top: 34px; }
.hdial-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 20px; }
.hdial-head .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.hdial-val { display: flex; align-items: center; gap: 12px; }
.hdial-val #dial5-val { font-family: var(--f-display); font-weight: var(--w-extra); font-size: 32px; line-height: 1; letter-spacing: -0.03em; font-feature-settings: "tnum"; color: var(--regime-calm); }
.hdial-val #dial5-mix-read { font-family: var(--f-mono); font-size: 16px; font-weight: var(--w-semi); color: var(--gold); font-feature-settings: "tnum"; }
.hdial-val .chip {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em;
  padding: 5px 14px; border-radius: 999px;
  background: var(--regime-calm-soft); color: var(--regime-calm);
  transition: background 0.4s, color 0.4s;
}
.hdial-val .chip.rough { background: var(--regime-rough-soft); color: var(--regime-rough); }
.hdial-track { position: relative; height: 12px; border-radius: 999px; border: 1px solid var(--hairline-2); }
.hdial-track.t-turb { background: linear-gradient(90deg, var(--regime-calm), var(--regime-rough)); }
.hdial-track.t-alloc { background: var(--gold); overflow: hidden; }
.hdial-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--regime-calm); transition: width 0.18s linear; }
.hdial-thumb {
  position: absolute; top: 50%; left: 0; width: 5px; height: 26px; border-radius: 999px;
  background: var(--ink); transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px var(--canvas), 0 3px 10px rgba(0, 0, 0, 0.55);
  transition: left 0.18s linear; z-index: 2;
}
.hdial-thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); transform: translate(-50%, -50%); }
.hdial-cut { position: absolute; top: -22px; left: 42%; transform: translateX(-50%); font-family: var(--f-mono); font-size: 10px; color: var(--gold); white-space: nowrap; }
.hdial-cut i { position: absolute; left: 50%; top: 16px; height: 24px; border-left: 1px dashed var(--gold); transform: translateX(-50%); }
.hdial-ends { display: flex; justify-content: space-between; margin-top: 14px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); }
.dial5-gauge {
  position: relative;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 40px 36px 30px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 90px var(--gold-wash);
}
.dial5-day { position: absolute; top: 18px; right: 22px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-feature-settings: "tnum"; }

/* Dynamic Strategy comparison */
.strat5 {
  margin-top: 28px;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 20px 20px 18px;
  backdrop-filter: blur(10px);
}
.strat5-hd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 14px; }
.strat5-hd .t { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.strat5-hd .m { font-family: var(--f-mono); font-size: 11.5px; color: var(--ink-4); }
.strat5-row { display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; align-items: center; gap: 12px; padding: 11px 16px; border-radius: 14px; border: 1px solid transparent; }
.strat5-row + .strat5-row { margin-top: 6px; }
.strat5-row.strat5-head { padding-top: 0; padding-bottom: 6px; font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-4); }
.strat5-row.strat5-head span { text-align: right; }
.strat5-row.strat5-head span:first-child { text-align: left; }
.strat5-row .n { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--ink-2); font-weight: var(--w-medium); }
.strat5-row .n .sw { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.sw.rg-calm-bg { background: var(--regime-calm); }
.sw.rg-rough-bg { background: var(--regime-rough); }
.sw.gold-bg { background: var(--gold); }
.sw.mix-bg { background: linear-gradient(135deg, var(--regime-calm), var(--regime-rough)); }
.strat5-row .v { font-family: var(--f-mono); font-size: 16px; font-weight: var(--w-semi); font-feature-settings: "tnum"; text-align: right; color: var(--ink); }
.strat5-row .v.up { color: var(--up); }
.strat5-row .v.gold { color: var(--gold); }
.strat5-row .v.down { color: var(--down); }
.strat5-row.featured { border-color: var(--gold-line); background: var(--gold-wash); box-shadow: 0 0 40px var(--gold-wash); }
.strat5-row.featured .n { color: var(--ink); font-weight: var(--w-semi); }

/* V5 responsive */
@media (max-width: 1080px) {
  .dial5-grid { grid-template-columns: 1fr; gap: 44px; }
  .regime4-grid.duo { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .regime4-grid.duo { grid-template-columns: 1fr; }
  .dial5-wrap { height: auto; }
  .dial5-sticky { position: static; min-height: 0; padding: 90px 0; }
  .strat5-row { grid-template-columns: 1.7fr 1fr 1fr 1fr; padding: 12px 10px; }
  .strat5-row .n { font-size: 12.5px; }
  .strat5-row .v { font-size: 13px; }
  .hero4-live { font-size: 9.5px; padding: 9px 14px; flex-wrap: wrap; justify-content: center; row-gap: 4px; }

  /* s104pm mobile: the "Dynamic Strategy" featured row KEEPS the 4-column grid
     at mobile widths so %/yr · Sharpe · Max DD stay column-aligned to the header
     (the old flex reflow dropped them onto their own wrapped line — misaligned).
     Instead: top-align the row, let .n wrap so the name breaks to two lines in
     col 1, and the overlay mult + alpha pill drop to their own line beneath it
     (the .strat5-dyn mobile block near the end of the file lays them out). The
     three metric values stay in cols 2-4, top-aligned with the first name line. */
  .strat5-row.featured { align-items: start; }
  .strat5-row.featured .n { flex-wrap: wrap; align-items: flex-start; row-gap: 5px; }
  .strat5-row.featured .strat5-name { flex: 1 1 auto; min-width: 0; }
  .strat5-row.featured .v { align-self: start; }
  /* alpha figure lives in a pill: label it with the α glyph (mobile only) */
  .strat5-row.featured .strat5-badge::after { content: " \03B1"; }

  /* s104 mobile fix: hdial-head puts the mono label ("Measured turbulence ·
     annualized" / "Passive mix it produces") and the value (dial5-val+chip,
     or the QQQ/GLD mix readout) side by side via justify-content:space-between
     in a ~331px row. Squeezed to roughly half that width each, the label
     wraps across up to 4 lines (orphaning the "·" separator on its own line)
     and the QQQ/GLD mix value wraps mid-pair ("62% QQQ ·" / "38% GLD") instead
     of staying together. Stack label above value so each gets the full row
     width — this alone removes the wrapping (and the orphaned dot) in both
     rows without needing to shrink type further. */
  .hdial-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  /* Belt-and-suspenders per bug report ("clean up that separator"): even with
     the full-width row above, guarantee the QQQ/GLD pair itself never breaks
     mid-pair on very narrow phones. */
  .hdial-val { flex-wrap: wrap; }
  #dial5-mix-read { white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .rbar4-seg { transition: none; width: var(--w); }
}

/* ═══════════ V5.1 — engine dial + alpha / risk-dial section ═══════════ */
.regime4-stats .v.down { color: var(--down); }

.alpha5-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-bottom: 28px; }
.alpha5-grid .report4 { margin: 0; }

.risk5 {
  display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 85%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 20px;
  backdrop-filter: blur(10px);
}
.risk5-hd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; margin-bottom: 10px; }
.risk5-hd .t { font-family: var(--f-mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); }
.risk5-hd .m { font-family: var(--f-mono); font-size: 11.5px; color: var(--gold); font-feature-settings: "tnum"; }
#frontier5 { width: 100%; height: auto; display: block; margin: 4px 0; }
.risk5-slider { display: flex; align-items: center; gap: 14px; margin-top: 14px; }
.risk5-slider .lab { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); }
.risk5-alloc-ends { display: none; }
.risk5-slider input[type="range"] {
  flex: 1; -webkit-appearance: none; appearance: none;
  height: 6px; border-radius: 999px; outline: none; cursor: pointer;
  background: linear-gradient(90deg, var(--regime-calm), var(--gold) 55%, var(--regime-rough));
}
.risk5-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--gold-ink);
  box-shadow: 0 0 0 1px var(--gold-line), 0 4px 14px var(--gold-wash);
}
.risk5-slider input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--gold); border: 3px solid var(--gold-ink);
}

.risk5-alloc-ends { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); margin-top: 8px; }

@media (max-width: 1080px) {
  .alpha5-grid { grid-template-columns: 1fr; }
}

/* ═══════════ V5.2 — quant-fund hero · verified numbers · agentic ═══════════ */
.dial5-formula { margin-top: 12px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ink-4); }
.dial5-formula sub { font-size: 8px; }

.alpha5-grid .strat5 { margin-top: 0; display: flex; flex-direction: column; }
.alpha5-grid .strat5 .strat5-note { margin-top: auto; }
.strat5-badge {
  display: inline-flex; margin-left: 10px;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--gold); color: var(--gold-ink); white-space: nowrap;
}
.strat5-dyn { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 auto; }
.strat5-dyn .strat5-mult { font-family: var(--f-mono); font-size: 14px; font-weight: var(--w-semi); font-feature-settings: "tnum"; color: var(--gold); }
.strat5-dyn .strat5-badge { margin-left: 0; }
.strat5-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.65; color: var(--ink-3); text-wrap: pretty; }
.strat5-note b { color: var(--up); }

.agentic5-body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; margin-top: 12px; }
.agentic5-goose { display: grid; place-items: center; }
.agentic5-chat { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; max-width: 560px; }
.chat5 { padding: 14px 18px; border-radius: 16px; font-size: 14.5px; line-height: 1.55; }
.chat5.user { align-self: flex-end; background: var(--surface-2); border: 1px solid var(--hairline-2); color: var(--ink-2); border-bottom-right-radius: 4px; }
.chat5.goose { align-self: flex-start; background: var(--gold-wash); border: 1px solid var(--gold-line); color: var(--ink); border-bottom-left-radius: 4px; }
.chat5 .who { display: block; font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.chat5.user .who { color: var(--ink-4); }
.chat5.chat5-typing { display: inline-flex; gap: 5px; padding: 13px 16px; }
.chat5-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: chat5b 1.2s infinite; }
.chat5-typing i:nth-child(2) { animation-delay: 0.15s; }
.chat5-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat5b {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

.cta4-egg { display: inline-block; width: 130px; height: 165px; margin-bottom: 20px; filter: drop-shadow(0 6px 30px var(--gold-wash)); }
.cta4-egg svg { width: 100%; height: 100%; display: block; }

@media (max-width: 1080px) {
  .agentic5-body { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 720px) {
  .sec4 { padding: 36px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat5-typing i { animation: none; }
}

/* s104pm mobile: the overlay pair (.strat5-dyn = "1.0×" multiplier + "+34% α"
   pill) is nested inside .n, which is grid col 1. Take it full-width of that
   column and drop it to its own line under the wrapped name: mult stays left
   (under the name text, indented past the 10px swatch + 11px gap = 21px) and
   the pill is pushed right via space-between so it sits under the %/yr column.
   Must be the LAST .strat5-dyn rule in the file to win the cascade tie against
   the base (flex-direction:column; margin:0 auto) rule higher up. Desktop is
   untouched — this only fires at ≤720px. */
@media (max-width: 720px) {
  .strat5-dyn {
    flex: 1 1 100%;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 0;
    padding-left: 21px;
    gap: 8px;
  }
}