/* ============================================================
   innatePOWER — Shared Funnel Design System  (v2, "dossier")
   Editorial quiet-authority: ink navy + brass gold + warm paper.
   Fraunces (display serif) / Libre Franklin (humanist body).
   Mobile-first. Tokens sourced from brand.json.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Libre+Franklin:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

:root {
  /* Brand palette (brand.json) */
  --primary: #B5872A;          /* CTA gold */
  --secondary: #14263F;        /* deep navy */
  --tertiary: #E7D2A0;         /* champagne accent */
  --ink: #1C2536;              /* neutral_dark — body text */
  --cream: #F4EEE1;            /* neutral_light */
  --bg: #FCFAF5;               /* background — warm bone */

  /* Derived tones */
  --navy-2: #1D3251;
  --navy-3: #0E1B2E;
  --navy-4: #091320;
  --paper-2: #F6EFE0;
  --gold-deep: #97691B;
  --gold-soft: #C79A3E;
  --gold-grad: linear-gradient(165deg, #CBA046 0%, #B5872A 52%, #93691C 100%);
  --ink-70: rgba(28, 37, 54, 0.74);
  --ink-60: rgba(28, 37, 54, 0.60);
  --ink-45: rgba(28, 37, 54, 0.45);
  --cream-75: rgba(244, 238, 225, 0.78);
  --cream-55: rgba(244, 238, 225, 0.55);
  --cream-40: rgba(244, 238, 225, 0.42);
  --hairline: rgba(28, 37, 54, 0.12);
  --hairline-soft: rgba(28, 37, 54, 0.07);
  --hairline-light: rgba(231, 210, 160, 0.22);

  --cta: var(--primary);
  --cta-hover: color-mix(in oklab, var(--primary) 88%, #000);
  --cta-text: #1A1206;

  /* Type scale */
  --fs-hero: clamp(2.5rem, 6vw, 4.7rem);
  --fs-h2: clamp(1.95rem, 4vw, 3.05rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 1.8rem);
  --fs-lead: clamp(1.1rem, 1.7vw, 1.32rem);
  --fs-body: clamp(1rem, 1.15vw, 1.12rem);
  --fs-sm: 0.9rem;
  --fs-xs: 0.78rem;
  --fs-eyebrow: 0.8rem;

  /* Spacing */
  --pad-section: clamp(3.75rem, 8.5vw, 7.5rem);
  --pad-section-sm: clamp(2.5rem, 6vw, 4rem);
  --container: 1180px;
  --container-narrow: 800px;

  /* Radii + shadow */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 30px;
  --r-pill: 999px;
  --shadow-card: 0 20px 44px -26px rgba(14, 27, 46, 0.42), 0 3px 10px -5px rgba(14, 27, 46, 0.14);
  --shadow-lift: 0 40px 80px -34px rgba(14, 27, 46, 0.5), 0 10px 24px -12px rgba(14, 27, 46, 0.24);
  --shadow-cta: 0 16px 32px -14px rgba(151, 105, 27, 0.6);

  --overlap: 96px;
}
@media (max-width: 640px) { :root { --overlap: 58px; } }

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Libre Franklin', system-ui, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.64;
  color: var(--ink);
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 600px at 100% -5%, rgba(181, 135, 42, 0.05), transparent 60%),
    radial-gradient(900px 500px at -5% 20%, rgba(20, 38, 63, 0.035), transparent 55%);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; cursor: pointer; }
::selection { background: rgba(181, 135, 42, 0.24); }

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  font-optical-sizing: auto;
}
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.15rem, 4vw, 2.5rem); }
.narrow { max-width: var(--container-narrow); margin-inline: auto; }
.section { padding-block: var(--pad-section); position: relative; overflow: hidden; }
.section-sm { padding-block: var(--pad-section-sm); }
.center { text-align: center; }
.stack > * + * { margin-top: 1.1rem; }

/* Background treatments */
.bg-base { background: var(--bg); }
.bg-soft { background: linear-gradient(180deg, var(--cream) 0%, #ede2cd 100%); }
.bg-dark { background: var(--secondary); color: var(--cream); }
.bg-dark h1, .bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-gradient {
  background:
    radial-gradient(1300px 560px at 80% -12%, rgba(199, 154, 62, 0.20), transparent 58%),
    radial-gradient(1000px 520px at 4% 112%, rgba(231, 210, 160, 0.10), transparent 54%),
    linear-gradient(158deg, var(--navy-4) 0%, var(--secondary) 44%, var(--navy-2) 100%);
  color: var(--cream);
}
.bg-gradient h1, .bg-gradient h2, .bg-gradient h3 { color: #fff; }
/* hairline seam at the top of a light section for editorial punctuation */
.seam::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: min(1180px, 90%); height: 1px;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
/* fine grain on dark backdrops */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}

/* Oversized faint watermark (numeral / glyph) behind a section */
.watermark { position: absolute; pointer-events: none; user-select: none; font-family: 'Fraunces', serif; font-weight: 600; line-height: 0.8; z-index: 0; }
.section > .container { position: relative; z-index: 1; }

/* Hero aura — slow drifting warm glow for depth */
.aura {
  position: absolute; inset: -28% -12% auto -12%; height: 82%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(48% 60% at 28% 38%, rgba(199, 154, 62, 0.22), transparent 70%),
    radial-gradient(42% 52% at 82% 22%, rgba(231, 210, 160, 0.13), transparent 72%);
  filter: blur(8px); animation: drift 20s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(4%, 3%, 0) scale(1.09); } }

/* Hero crest mark */
.crest { display: inline-flex; margin: 0 0 1.1rem; color: var(--tertiary); }
.center .crest { margin-inline: auto; }
.crest svg { width: 36px; height: 36px; }

/* Editorial divider ornament */
.divider { display: flex; align-items: center; justify-content: center; gap: 0.9rem; max-width: 300px; margin: 0 auto 1.6rem; }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; }
.divider::before { background: linear-gradient(90deg, transparent, var(--hairline)); }
.divider::after { background: linear-gradient(90deg, var(--hairline), transparent); }
.divider .dot { width: 8px; height: 8px; transform: rotate(45deg); background: var(--gold-grad); flex: none; }
.bg-dark .divider::before, .bg-gradient .divider::before { background: linear-gradient(90deg, transparent, var(--hairline-light)); }
.bg-dark .divider::after, .bg-gradient .divider::after { background: linear-gradient(90deg, var(--hairline-light), transparent); }

/* Drop cap — magazine detail */
.dropcap::first-letter {
  font-family: 'Fraunces', serif; font-weight: 600; font-size: 3.4em; line-height: 0.76;
  float: left; margin: 0.06em 0.14em 0 0; color: var(--secondary);
}
.bg-dark .dropcap::first-letter, .bg-gradient .dropcap::first-letter { color: var(--tertiary); }

/* Portrait plate — gold corner ticks around a founder photo */
.portrait { position: relative; }
.portrait::before, .portrait::after {
  content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid var(--primary); pointer-events: none; z-index: 2;
}
.portrait::before { top: -9px; left: -9px; border-right: 0; border-bottom: 0; }
.portrait::after { bottom: -9px; right: -9px; border-left: 0; border-top: 0; }
.portrait-cap { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); text-align: center; margin-top: 1rem; }

/* ---------- Typographic roles ---------- */
.eyebrow {
  font-family: 'Libre Franklin', sans-serif;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.24em;
  text-transform: uppercase; color: var(--gold-deep);
}
.bg-dark .eyebrow, .bg-gradient .eyebrow { color: var(--tertiary); }

/* Numbered / flanked section index — the "dossier" marker */
.overline {
  display: inline-flex; align-items: center; gap: 0.85rem;
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--gold-deep); margin-bottom: 1.15rem;
}
.overline::before { content: ""; width: 30px; height: 1px; background: var(--primary); }
.overline.flanked::after { content: ""; width: 30px; height: 1px; background: var(--primary); }
.overline .idx { font-family: 'Fraunces', serif; font-style: italic; font-size: 1rem; letter-spacing: 0; color: var(--primary); text-transform: none; }
.center .overline { justify-content: center; }
.bg-dark .overline, .bg-gradient .overline { color: var(--tertiary); }
.bg-dark .overline::before, .bg-dark .overline.flanked::after,
.bg-gradient .overline::before, .bg-gradient .overline.flanked::after { background: var(--tertiary); opacity: 0.55; }
.bg-dark .overline .idx, .bg-gradient .overline .idx { color: var(--tertiary); }

.hero-headline { font-size: var(--fs-hero); font-weight: 600; line-height: 1.04; letter-spacing: -0.025em; }
.hero-headline em { font-style: italic; font-weight: 500; }
.section-headline { font-size: var(--fs-h2); letter-spacing: -0.02em; }
.card-headline { font-size: var(--fs-h3); font-weight: 600; }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-70); font-weight: 400; }
.bg-dark .lead, .bg-gradient .lead { color: var(--cream-75); }
.kicker-rule { width: 58px; height: 3px; border: 0; border-radius: 2px; background: var(--gold-grad); margin: 0 0 1.4rem; }
.center .kicker-rule { margin-inline: auto; }

/* Editorial pull-quote */
.pullquote {
  font-family: 'Fraunces', serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.05rem); line-height: 1.28; color: var(--secondary);
  text-wrap: balance; position: relative;
}
.bg-dark .pullquote, .bg-gradient .pullquote { color: #fff; }
.pullquote .mark { font-size: 1.4em; color: var(--primary); line-height: 0; vertical-align: -0.35em; margin-right: 0.1em; }

/* ---------- CTA button ---------- */
.cta {
  position: relative; overflow: hidden;
  display: inline-flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 62px; padding: 1rem 2.6rem;
  background: var(--gold-grad); color: var(--cta-text);
  border: 0; border-radius: var(--r-pill);
  text-decoration: none; text-align: center;
  box-shadow: var(--shadow-cta);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.cta::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.45) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform 0.7s ease;
}
.cta:hover { transform: translateY(-3px); box-shadow: 0 22px 42px -16px rgba(151, 105, 27, 0.66); filter: brightness(1.04); }
.cta:hover::after { transform: translateX(130%); }
.cta:focus-visible { outline: 3px solid var(--tertiary); outline-offset: 3px; }
.cta-primary { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.08rem; letter-spacing: 0.015em; }
.cta-primary svg { width: 18px; height: 18px; transition: transform 0.2s ease; }
.cta:hover .cta-primary svg { transform: translateX(3px); }
.cta-sub { position: relative; font-size: 0.82rem; font-weight: 500; opacity: 0.82; letter-spacing: 0.01em; }
.cta-block { width: 100%; }
@media (max-width: 560px) { .cta { width: 100%; } }

.link-quiet { color: var(--gold-deep); text-decoration: underline; text-underline-offset: 3px; font-weight: 500; }
.bg-dark .link-quiet, .bg-gradient .link-quiet { color: var(--tertiary); }

/* ---------- Callout bar ---------- */
.callout-bar {
  background: linear-gradient(90deg, var(--navy-3), var(--secondary), var(--navy-3));
  color: var(--cream); text-align: center; padding: 0.72rem 1.15rem;
  font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0.015em;
  display: flex; align-items: center; justify-content: center; gap: 0.8rem;
  border-bottom: 1px solid rgba(231, 210, 160, 0.14);
}
.callout-bar .orn { color: var(--tertiary); flex: none; font-size: 0.7em; opacity: 0.9; }
.callout-bar strong { color: var(--tertiary); font-weight: 600; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: #fff; border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.3rem);
  box-shadow: var(--shadow-card); border: 1px solid var(--hairline-soft);
}
.card-lift { transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease; }
.card-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: rgba(181, 135, 42, 0.3); }
/* gold top accent that grows on hover */
.card-accent::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--gold-grad);
  transition: width 0.28s ease; opacity: 0.9;
}
.card-accent:hover::before { width: 72px; }

/* ---------- Glanceable proof (stats) ---------- */
.stat-row { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 620px) { .stat-row { grid-template-columns: repeat(3, 1fr); } }
.stat {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--hairline-soft);
  border-radius: var(--r-md); padding: 1.5rem 1.15rem; text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform 0.22s ease, border-color 0.22s ease;
}
.bg-dark .stat, .bg-gradient .stat { background: rgba(255,255,255,0.05); border-color: var(--hairline-light); box-shadow: none; }
.stat::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold-grad); transition: width 0.28s ease; }
.stat:hover { transform: translateY(-5px); border-color: rgba(181, 135, 42, 0.4); }
.stat:hover::after { width: 46px; }
.stat .num { font-family: 'Fraunces', serif; font-size: clamp(2rem, 4vw, 2.85rem); font-weight: 600; line-height: 1; color: var(--secondary); letter-spacing: -0.02em; }
.bg-dark .stat .num, .bg-gradient .stat .num { color: #fff; }
.stat .lbl { font-size: var(--fs-xs); letter-spacing: 0.03em; margin-top: 0.6rem; color: var(--ink-60); line-height: 1.5; }
.bg-dark .stat .lbl, .bg-gradient .stat .lbl { color: var(--cream-55); }
.stat .ic { width: 28px; height: 28px; margin: 0 auto 0.7rem; color: var(--primary); }

/* Press / authority band */
.authority-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.3rem 2.6rem; }
.authority-band .press { font-family: 'Fraunces', serif; font-weight: 500; font-style: italic; font-size: clamp(1rem, 1.6vw, 1.25rem); opacity: 0.82; white-space: nowrap; }
.authority-band .press-logo { height: clamp(22px, 3.2vw, 29px); width: auto; opacity: 0.82; transition: opacity 0.22s ease, transform 0.22s ease; }
.authority-band .press-logo:hover { opacity: 1; transform: translateY(-2px); }
.authority-note { font-size: var(--fs-xs); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.6; }

/* ---------- VSL / video embed ---------- */
.vsl { max-width: 760px; margin-inline: auto; position: relative; }
.vsl-cap {
  background: var(--tertiary); color: var(--secondary);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: 0.01em; text-align: center;
  padding: 0.62rem 1rem;
}
.vsl-cap.top { border-radius: var(--r-md) var(--r-md) 0 0; }
.vsl-cap.bottom { border-radius: 0 0 var(--r-md) var(--r-md); }
.bg-base .vsl-cap, .bg-soft .vsl-cap { background: var(--secondary); color: var(--cream); }
.vsl-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  background: radial-gradient(120% 120% at 50% 30%, var(--navy-2), var(--navy-4));
  display: flex; align-items: center; justify-content: center;
}
/* gold corner ticks */
.vsl-frame::before, .vsl-frame::after {
  content: ""; position: absolute; width: 26px; height: 26px; pointer-events: none;
  border: 2px solid var(--tertiary); opacity: 0.55;
}
.vsl-frame::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; }
.vsl-frame::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; }
.vsl-frame .play {
  width: 86px; height: 86px; border-radius: 50%; background: rgba(255,255,255,0.10);
  border: 2px solid var(--tertiary); display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); animation: pulse 2.6s ease-out infinite;
}
.vsl-frame .play svg { width: 30px; height: 30px; color: #fff; margin-left: 4px; }
.vsl-placeholder-note { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--cream-40); font-size: var(--fs-xs); letter-spacing: 0.1em; text-transform: uppercase; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 210, 160, 0.35); } 50% { box-shadow: 0 0 0 18px rgba(231, 210, 160, 0); } }

/* Framed media / photo plate with corner ticks + caption */
.plate { position: relative; }
.plate .plate-cap { font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); margin-top: 0.9rem; text-align: center; }

/* ---------- Webinar details block ---------- */
.details { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem 1.1rem; font-size: var(--fs-sm); }
.details .chip { display: inline-flex; align-items: center; gap: 0.4rem; }
.details .chip svg { width: 16px; height: 16px; color: var(--primary); }
.bg-dark .details .chip svg, .bg-gradient .details .chip svg { color: var(--tertiary); }
.details .sep { opacity: 0.32; }
.details .when { font-weight: 600; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; text-align: left; }
.field label { font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.bg-dark .field label, .bg-gradient .field label { color: var(--cream); }
.field input, .field select, .field textarea {
  font: inherit; font-size: 16px;
  padding: 0.85rem 1rem; border-radius: var(--r-sm); border: 1.5px solid var(--hairline);
  background: #fff; color: var(--ink); min-height: 48px; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(181,135,42,0.16); }
.consent { display: flex; gap: 0.6rem; align-items: flex-start; font-size: var(--fs-xs); color: var(--ink-60); line-height: 1.5; }
.consent input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--primary); }
.form-note { font-size: var(--fs-xs); color: var(--ink-45); margin-top: 0.75rem; }

/* Embed placeholder */
.embed-ph {
  border: 1.5px dashed rgba(181,135,42,0.5); border-radius: var(--r-md);
  background: repeating-linear-gradient(135deg, rgba(181,135,42,0.05) 0 12px, transparent 12px 24px);
  padding: clamp(1.5rem, 4vw, 2.5rem); text-align: center; color: var(--ink-60);
}
.embed-ph .tag { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.embed-ph .big { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--secondary); margin: 0.5rem 0; }
.embed-ph code { font-size: var(--fs-xs); background: rgba(20,38,63,0.06); padding: 2px 6px; border-radius: 4px; }

/* ---------- Progress indicator ---------- */
.progress { display: flex; gap: 0.5rem; max-width: 660px; margin: 0 auto 1.8rem; }
.progress .pill {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 46px; padding: 0.5rem 0.6rem; border-radius: var(--r-pill);
  font-size: 0.8rem; font-weight: 600; text-align: center;
  background: rgba(244,238,225,0.08); color: var(--cream-75); border: 1px solid var(--hairline-light);
}
.progress .pill.done { color: var(--cream); }
.progress .pill.done .dot { color: var(--primary); }
.progress .pill.active { background: var(--gold-grad); color: var(--cta-text); border-color: transparent; box-shadow: var(--shadow-cta); }
.progress .pill .dot { display: inline-flex; }
.progress .pill svg { width: 15px; height: 15px; }

/* ---------- Alert bar ---------- */
.alert-bar {
  background: linear-gradient(90deg, var(--navy-4), var(--secondary));
  color: var(--cream); text-align: center; padding: 0.85rem 1.15rem;
  font-weight: 600; font-size: var(--fs-sm); display: flex; align-items: center; justify-content: center; gap: 0.6rem;
  border-bottom: 2px solid var(--primary);
}
.alert-bar svg { width: 18px; height: 18px; color: var(--tertiary); flex: none; }

/* ---------- FTC / compliance / placeholders ---------- */
.ftc { font-size: var(--fs-xs); color: var(--ink-45); line-height: 1.55; max-width: 720px; margin: 1.6rem auto 0; text-align: center; }
.bg-dark .ftc, .bg-gradient .ftc { color: var(--cream-40); }
.proof-ph {
  border: 1px solid var(--hairline); border-left: 3px solid var(--primary);
  border-radius: var(--r-md); background: rgba(255,255,255,0.55);
  padding: 1.5rem 1.6rem; max-width: 760px; margin-inline: auto; text-align: left;
}
.bg-dark .proof-ph, .bg-gradient .proof-ph { background: rgba(255,255,255,0.05); border-color: var(--hairline-light); }
.proof-ph .tag { font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.bg-dark .proof-ph .tag, .bg-gradient .proof-ph .tag { color: var(--tertiary); }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-4); color: var(--cream-75); padding: clamp(2.75rem, 5vw, 3.75rem) 0 2.5rem; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--primary), transparent); opacity: 0.5; }
.site-footer .logo { height: 42px; width: auto; margin-bottom: 1.3rem; }
.site-footer .f-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-bottom: 1.1rem; font-size: var(--fs-sm); }
.site-footer .f-links a { color: var(--cream); text-decoration: none; opacity: 0.85; transition: opacity 0.2s; }
.site-footer .f-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.site-footer .copy { font-size: var(--fs-sm); color: var(--cream-75); margin-bottom: 1.1rem; }
.site-footer .disclosure { font-size: var(--fs-xs); color: var(--cream-40); line-height: 1.6; max-width: 900px; }

/* ---------- Motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.reveal { opacity: 0; animation: rise 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.16s; } .d3 { animation-delay: 0.28s; }
.d4 { animation-delay: 0.4s; } .d5 { animation-delay: 0.52s; } .d6 { animation-delay: 0.64s; }

@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(9px); } }
.arrow-down { display: block; margin: 1.6rem auto 0; width: 34px; color: var(--tertiary); animation: bob 1.8s ease-in-out infinite; }

/* Scroll-reveal (pure CSS, progressive enhancement — content stays visible if unsupported) */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .section:not(.hero) :is(.overline, .section-headline, .lead, .card, .stat, .cta, .proof-ph, .vsl, .details-card, .authority-band, .authority-note, .pullquote, .ba-closer, .ns, .shift, .step, .embed-ph, .insight, .rel-photo, .rel-body, .signoff, .showup-body) {
      animation: revealUp both linear;
      animation-timeline: view();
      animation-range: entry 2% entry 42%;
    }
  }
}
@keyframes revealUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}