/* 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;
  transform: translateZ(0);
  will-change: backdrop-filter;
  isolation: isolate;
}
.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: 29px;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.nav4-mark span { color: var(--gold); }
.hero4-egg { display: block; height: clamp(120px, 19vw, 275px); aspect-ratio: 60 / 76; margin: 10px auto 0; }
.hero4-egg svg { width: 100%; height: 100%; display: block; }
.hero4-mark { display: block; font-family: var(--f-display); font-weight: var(--w-black); font-size: 36px; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 26px; }
.hero4-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: 110px 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 .pill-sep { display: inline-block; width: 13px; height: 13px; color: var(--gold); vertical-align: -2px; margin: 0 8px; }
.hero4-pill em { font-style: normal; color: var(--gold); }
.hero4-pill-text { text-align: center; }  /* wraps to two lines under the
   mobile rule below (.pill-br becomes inline); left-aligning left the
   second line hanging off-centre inside a centred pill. */

.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: 780px; margin: 37px auto 37px; /* no-JS fallback; JS in landing-v5-fx.js sets the real value to match headline line 1 */
  /* 37/37 centres it between the pill above and the live strip below --
     .hero4-live drops its own 30px top margin to keep the split even. */
  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-sub em { font-style: normal; font-weight: var(--w-semi); color: var(--gold); }
.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 34.5s linear infinite;
}
/* Hover-capable pointers only: on a touch screen :hover latches after a
   tap, so this pause froze the marquee permanently the first time anyone
   swiped it. */
@media (hover: hover) and (pointer: fine) {
  .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); }
#alpha .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; }
.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: center; 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; justify-content: center; 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; }
/* Scroll room for the LAST module card to stick in -- see .tiers4::after. */
.mods4::after { content: ''; display: block; flex: 0 0 auto; height: 150px; }
.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; flex-direction: column; align-items: center; justify-content: center; gap: 0; 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: static; 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;
  max-height: 0; opacity: 0; margin-top: 0; overflow: hidden; border-width: 0; padding-top: 0; padding-bottom: 0;
  transition: max-height 0.3s cubic-bezier(.16,1,.3,1), opacity 0.25s ease, margin-top 0.3s cubic-bezier(.16,1,.3,1), padding 0.3s ease, border-width 0.3s ease;
}
.toggle4 .save.is-visible {
  max-height: 40px; opacity: 1; margin-top: 12px; border-width: 1px; padding-top: 5px; padding-bottom: 5px;
}
.tiers4 { display: flex; flex-direction: column; gap: 18px; }
/* Scroll room for the LAST card to stick in. A sticky flex item is bounded
   by its flex container's CONTENT box -- padding on the container does
   nothing for it, which is why padding-bottom changed nothing. This spacer
   is itself a flex item, so it extends the content box and the fourth card
   holds at its step instead of riding up over the three beneath it. */
.tiers4::after { content: ''; display: block; flex: 0 0 auto; height: 140px; }
.tier4 {
  display: flex; flex-direction: column;
  background: var(--surface);
  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;
}
/* Stacking-card effect, mirroring .mod4: each card sticks a little lower
   than the one before so they pile up as you scroll. Hover lift removed --
   it fights the sticky offset. */
.tier4 { position: sticky; top: calc(104px + var(--rv-i, 0) * 34px); box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.35); }
.tier4:hover { border-color: var(--hairline-strong); }
.tier4.featured {
  border-color: var(--gold-line);
  background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, var(--surface)), var(--surface) 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; }
/* Two columns, Product then Legal -- the brand column and its strapline
   are gone, so the 2fr lead column would leave a hole. */
.foot4-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-bottom: 48px; }
.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 1fr; gap: 32px; }
  .foot4-bottom { flex-direction: column; }
  .rbar4-seg { font-size: 0; }


  /* 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. */
  /* 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; }

  .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: 76px; padding-bottom: 64px; }
  /* One gap value for egg->headline, headline->pill and pill->copy. */
  .hero4 h1 { margin: 28px 0; }
  .hero4-sub { margin-top: 28px; }
  /* Ride the SCROLL cue up, less the height of the word itself. A
     negative MARGIN, not a transform: a transform left the 100px it
     vacated as dead air between the cue and the marquee. */
  .hero4-cue { margin-top: -84px; }
  .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, #alpha .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, .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 */

/* 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; flex-direction: column; align-items: center; text-align: center; gap: 12px; margin-bottom: 26px; }
.hdial-head .k { font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.hdial-val { display: flex; align-items: center; justify-content: center; gap: 16px; }
.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(--regime-rough); overflow: hidden; }
.hdial-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--regime-calm); transition: width 0.18s linear; }
/* No thumb on the allocation dial -- it only ever mirrored the turbulence
   thumb directly above it. The boundary between the two solids is the
   reading. */
.hdial-track.t-alloc .hdial-thumb { display: none; }
.hdial-val #dial5-mix-read .q { color: var(--regime-calm); font-weight: inherit; }
.hdial-val #dial5-mix-read .g { color: var(--regime-rough); font-weight: inherit; }
.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); }
/* The allocation dial's two ends are the two holdings, so they wear the
   holdings' own regime colours. */
.hdial-ends .e-qqq { color: var(--regime-calm); }
.hdial-ends .e-gld { color: var(--regime-rough); }
.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: 30px 36px 34px;
  backdrop-filter: blur(12px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 90px var(--gold-wash);
}
.dial5-day { text-align: center; margin-bottom: 26px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); 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: 8px 16px; border-radius: 14px; border: 1px solid transparent; }
.strat5-row + .strat5-row { margin-top: 4px; }
/* Compress the plain (non-featured) rows a little -- four of them now share the card, not three. */
.strat5-row:not(.featured) { padding: 5px 16px; }
.strat5-row:not(.featured) + .strat5-row:not(.featured) { margin-top: 3px; }
.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; }
.strat5-row .n sup { font-size: .62em; line-height: 0; vertical-align: super; margin-left: 1px; }
.sw.rg-calm-bg { background: var(--regime-calm); }
.sw.rg-rough-bg { background: var(--regime-rough); }
.sw.gold-bg { background: var(--gold); }
/* A hard diagonal cut, not a blend: the book holds QQQ and GLD, it does
   not hold something in between them. */
.sw.mix-bg { background: linear-gradient(135deg, var(--regime-calm) 0 50%, var(--regime-rough) 50% 100%); }
.sw.breakout-bg { background: var(--up); }
/* Footnote marks in the book column: keep them tight to the word and
   small, rather than full-size glyphs sitting on the baseline. */
.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; }
  .strat5-note { font-size: 11.5px; }

  /* The featured row is an ordinary 4-column row again. Everything that used to
     stand here existed to reflow around the alpha pill nested inside .n; with
     the pill gone the row needs no special case, and the gold swatch, the name
     and the three metrics all sit on one baseline. */
  .strat5-row.featured .strat5-name { min-width: 0; }

  /* 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 { gap: 10px; }
  /* The whole dial panel was sized for a desktop column; on a phone the
     mono labels and the axis ends were down at the edge of legibility. */
  .hdial-head .k { font-size: 12px; letter-spacing: 0.12em; }
  /* Height-matched to the CALM/ROUGH chip beside it (12px type in
     6px+6px padding, ~28px tall). At 38px the number dwarfed it. */
  .hdial-val #dial5-val { font-size: 28px; }
  .hdial-val #dial5-mix-read { font-size: 18px; }
  .hdial-val .chip { font-size: 12px; padding: 6px 15px; }
  .hdial-ends { font-size: 11.5px; }
  .hdial-cut { font-size: 11.5px; }
  .dial5-day { font-size: 12px; }
  /* 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; justify-content: center; }
  #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 ═══════════ */

.alpha5-grid .strat5 { margin-top: 0; display: flex; flex-direction: column; }
.alpha5-grid .strat5 .strat5-note { margin-top: auto; }
.strat5-note { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); font-size: 12.5px; line-height: 1.55; color: var(--ink-3); text-wrap: normal; }
/* Each footnote is its own block, so they break where the sentence ends
   rather than running together and wrapping mid-clause. */
.strat5-note span { display: block; }
.strat5-note span + span { margin-top: 7px; }
.strat5-note b { color: var(--up); }

.agentic5-body { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: stretch; margin-top: 12px; }
.agentic5-left { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 28px; }
#goose-now-btn { margin-top: 0; transition: box-shadow 0.3s; will-change: auto; }
.agentic5-goose { display: grid; place-items: center; align-items: start; }
.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: 28px; }
  .agentic5-goose { order: -1; }
  #goose-now-btn { display: flex; width: fit-content; margin: 24px auto 0; }
  .agentic5-left { gap: 22px; }
}
@media (max-width: 720px) {
  .sec4 { padding: 36px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat5-typing i { animation: none; }
}

/* ─── Floating Ask-Goose launcher ─── */
/* A gold speech bubble: square-ish corner bottom-right is the tail, so the
   shape needs no pseudo-element and cannot drift out of alignment. */
.ask4 {
  position: fixed; right: 26px; bottom: 26px; z-index: 120;
  display: inline-flex; align-items: center; gap: 11px;
  border: none; cursor: pointer;
  color: var(--gold-ink); background: var(--gold);
  box-shadow: 0 12px 38px var(--gold-wash), 0 2px 10px rgba(0, 0, 0, 0.38);
  opacity: 0; transform: translateY(16px) scale(0.92); pointer-events: none;
  transition: opacity 0.36s ease,
              transform 0.42s cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow 0.3s ease;
}
.ask4.is-on { opacity: 1; transform: none; pointer-events: auto; }
.ask4:hover { box-shadow: 0 16px 46px var(--gold-wash), 0 3px 13px rgba(0, 0, 0, 0.45); }
/* head-flat is a single-colour SVG drawn in currentColor, so the head goes
   black by colouring the container. */
.ask4-i { display: inline-flex; color: #000; }
.ask4-i svg { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) { .ask4 { transition: opacity 0.2s linear; transform: none; } }
.ask4 {
  right: 16px; bottom: 16px;
  width: 58px; height: 58px; padding: 0; justify-content: center;
  border-radius: 50% 50% 10px 50%;
}
.ask4-t { display: none; }
.ask4-i { width: 31px; height: 31px; }

/* ─── Today's-regime ticker ─── */
/* The hero's regime pill, re-homed under the chart where regimes have actually
   been introduced. Full-bleed like the hero marquee: it lives inside .wrap4, so
   it breaks out with the 50%/50vw margin trick rather than being moved in the
   markup. The set is doubled at runtime by landing-v5-fx.js -- the ids
   (#live-turb / #live-regime) are load-bearing and cannot be duplicated in the
   source, and a single copy leaves the track empty for most of the loop. */
.mqr {
  position: relative; z-index: 2; overflow: hidden;
  margin: 26px calc(50% - 50vw) 0;
  width: 100vw;
  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);
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.mqr-track {
  display: flex; align-items: center; gap: 56px;
  width: max-content; padding: 14px 28px;
  animation: mqr 22s linear infinite;
}
@keyframes mqr { to { transform: translateX(-50%); } }
@media (hover: hover) and (pointer: fine) {
  .mqr:hover .mqr-track { animation-play-state: paused; }
}
.mqr .mq4-item { font-size: 10.5px; letter-spacing: 0.12em; color: var(--ink-3); }
.mqr b { color: var(--ink); font-weight: var(--w-semi); font-feature-settings: "tnum"; }
.mqr b.live-today { color: var(--gold); }
.mqr .rg { font-weight: var(--w-semi); }
/* Purple/blue belong to the regimes, so the other two dots take gold and
   orange. .d-regime is repainted from the live regime's own token. */
.mqr .dot.d-today  { background: var(--gold); }
.mqr .dot.d-turb   { background: var(--orange-light); }
.mqr .dot.d-regime { background: var(--regime-calm); }
@media (prefers-reduced-motion: reduce) { .mqr-track { animation: none; } }

/* ─── Eggs fall and bounce ─── */
/* The hero egg drops in on page load; the closing egg drops in when its section
   is revealed. Both use the same keyframes, so they read as the same object.
   transform-origin is the base so the impact squash reads as weight landing.
   Per-keyframe timing: the fall accelerates, everything after it decays. */
@keyframes eggdrop4 {
  0%   { transform: translateY(-56vh) scaleY(1.05); opacity: 0;
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  10%  { opacity: 1; }
  55%  { transform: translateY(0) scaleY(0.88); opacity: 1;
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  70%  { transform: translateY(-30px) scaleY(1.05);
         animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  83%  { transform: translateY(0) scaleY(0.95);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  91%  { transform: translateY(-9px) scaleY(1.02);
         animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}
.hero4-egg {
  transform-origin: 50% 100%;
  animation: eggdrop4 1.45s both;
}
/* The closing egg DROPS, once, when its section is properly on screen -- not
   scrubbed by the scroll, which read as sliding further down every time you
   went back up. It shares the hero egg's keyframes so the two read as the same
   object. .cta4 is overflow:hidden (its glow sits at bottom:-30% and depends on
   that) so the fall is bounded by the section's 118px top padding -- any higher
   and it would begin clipped, which looked like it was emerging from behind the
   pricing card above. */
.cta4-egg { transform-origin: 50% 100%; will-change: transform; }
.cta4-egg.rv,
.cta4-egg.rv.in { opacity: 0; transform: none; filter: none; transition: none; }
.cta4-egg.egg-drop { opacity: 1; animation: eggdrop4cta 1.25s both; }
@media (prefers-reduced-motion: reduce) {
  .hero4-egg { animation: none; }
  .cta4-egg.rv, .cta4-egg.rv.in, .cta4-egg.egg-drop { opacity: 1; animation: none; }
}

/* One colour per marquee item -- brand module tokens, so the six read as six
   distinct things instead of a row of identical gold pips. */
.mq4-item .dot.d-build   { background: var(--m-build); }
.mq4-item .dot.d-wft     { background: var(--m-test); }
.mq4-item .dot.d-regime  { background: var(--regime-rough); }
.mq4-item .dot.d-risk    { background: var(--down); }
.mq4-item .dot.d-alpha   { background: var(--m-trade); }
.mq4-item .dot.d-agentic { background: var(--m-share); }

/* The closing egg's fall is the hero's, shortened to fit inside .cta4's top
   padding so it never starts outside the section and get clipped. */
@keyframes eggdrop4cta {
  0%   { transform: translateY(-108px) scaleY(1.04); opacity: 0;
         animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  12%  { opacity: 1; }
  55%  { transform: translateY(0) scaleY(0.88); opacity: 1;
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  70%  { transform: translateY(-26px) scaleY(1.05);
         animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  83%  { transform: translateY(0) scaleY(0.95);
         animation-timing-function: cubic-bezier(0.2, 0.7, 0.4, 1); }
  91%  { transform: translateY(-8px) scaleY(1.02);
         animation-timing-function: cubic-bezier(0.6, 0, 0.85, 0.4); }
  100% { transform: translateY(0) scaleY(1); opacity: 1; }
}

/* ─── Efficient frontier, mobile (Claude Design "Frontier Mobile A v2") ─── */
/* Scroll-driven: the sweep runs as the card settles into view. No slider, no
   pointer handling -- dragging a chart on a phone fights the page scroll. */
.fr {
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  border: 1px solid var(--hairline-2);
  border-radius: var(--radius-lg);
  padding: 16px 15px 15px;
  position: relative; overflow: hidden;
}
.fr::after {
  content: ""; position: absolute; right: -90px; top: -90px;
  width: 230px; height: 230px; border-radius: 50%;
  background: var(--gold); opacity: .05; filter: blur(60px); pointer-events: none;
}
.fr > * { position: relative; }
.fr-hd {
  display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline;
  gap: 10px; font-family: var(--f-mono); font-size: 13px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-3);
  padding-bottom: 13px; border-bottom: 1px solid var(--hairline);
}
.fr-hd .r { color: var(--ink-4); letter-spacing: .05em; white-space: nowrap; }
.fr-hd .r b { color: var(--gold); font-weight: 600; font-feature-settings: "tnum"; }
.fr .plot { position: relative; margin-top: 8px; }
.fr .chart { width: 100%; display: block; height: 214px; }
.fr .g line { stroke: var(--hairline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fr .spine { stroke: var(--hairline-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fr .tick { stroke: var(--hairline-2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fr .area { fill: var(--up); opacity: .09; }
.fr .line { fill: none; stroke: var(--up); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fr .peak { fill: var(--canvas); stroke: var(--gold-bright); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fr .cross { stroke: var(--gold-line); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.fr .dot { fill: var(--gold); stroke: var(--canvas); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.fr .halo { fill: rgba(241, 176, 40, .14); }
.fr .ax { font-family: var(--f-mono); font-size: var(--ax-fs, 12px); letter-spacing: .13em; fill: var(--ink-3); }
.fr .axn { font-family: var(--f-mono); font-size: var(--axn-fs, 11.5px); fill: var(--ink-4); font-feature-settings: "tnum"; }
.fr .pair {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1px; margin-top: 16px;
  background: var(--hairline); border-radius: 7px; overflow: hidden;
}
.fr .pair > div { background: var(--surface); padding: 13px 7px 14px; text-align: center; }
.fr .pair .k { font-family: var(--f-mono); font-size: 12.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 7px; }
.fr .pair .v { font-family: var(--f-mono); font-size: 24px; font-weight: 600; letter-spacing: -.025em; font-feature-settings: "tnum"; line-height: 1.05; }
.fr .pair .v.up { color: var(--up); }
.fr .pair .v.dn { color: var(--down); }
.fr .pair .v.gold { color: var(--gold); }

/* ─── Hero pill arrives from the back of the frame ─── */
/* It was the one element in the hero with no entrance: the headline words
   stagger in, the copy reveals, and the pill was simply already there, which
   read as a rendering glitch rather than a choice. It comes up from small with
   a slight overshoot, timed to land between the headline and the copy beneath
   it -- the same slot it occupies in the layout. */
@keyframes pill4in {
  0%   { opacity: 0; transform: scale(0.32); filter: blur(7px); }
  55%  { opacity: 1; }
  76%  { transform: scale(1.055); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}
.hero4-pill {
  transform-origin: 50% 50%;
  animation: pill4in 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.42s both;
}
@media (prefers-reduced-motion: reduce) {
  .hero4-pill { animation: none; }
}