/* Matthew Payne Consulting — VSL landing page
   Dark/noir variant: editorial serif + tracked sans, gold accent, full-bleed
   city-skyline background. Matches the main site's Capital section treatment
   per Matt's direction 2026-08-13 — supersedes the 2026-08-07 light-palette
   override for these specific pages. */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400&family=Jost:wght@300;400;500&display=swap');

:root {
  --bg: #0B0B0D;
  --bg-soft: #1A1714;
  --bg-deep: #100E0B;
  --ink: #F2EDE1;
  --ink-soft: rgba(242,237,225,0.72);
  --gold: #C6A667;
  --hairline: rgba(255,255,255,0.14);

  /* Layered elevation system — near+far shadows stacked read as real
     lift, a single soft shadow reads flat no matter how large it is. */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --shadow-md: 0 2px 4px rgba(0,0,0,0.22), 0 10px 20px rgba(0,0,0,0.24);
  --shadow-lg: 0 2px 4px rgba(0,0,0,0.22), 0 10px 20px rgba(0,0,0,0.26), 0 28px 56px rgba(0,0,0,0.34);
  --shadow-xl: 0 2px 6px rgba(0,0,0,0.26), 0 16px 32px rgba(0,0,0,0.32), 0 48px 90px rgba(0,0,0,0.44);
  --shadow-gold-md: 0 2px 6px rgba(198,166,103,0.26), 0 8px 16px rgba(198,166,103,0.2);
  --shadow-gold-lg: 0 4px 10px rgba(198,166,103,0.3), 0 20px 40px rgba(198,166,103,0.34);
}

/* Video pages (vc/advisor/attorney): same dark/gold theme as the opt-in
   page — no separate light palette. Real premium VSL-template research
   (a Framer template built specifically "for consultants, coaches &
   agencies") confirms a flat dark canvas is a legitimate, common choice
   for exactly this page type, and it keeps all 4 pages one consistent
   brand rather than the video pages being the odd light-themed one out.
   The only video-page-specific override is suppressing the ambient
   background photo below — that's what was actually competing with the
   video, not the dark canvas itself. */

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

html {
  overflow-x: hidden;
}

body {
  position: relative;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Jost', 'Futura', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 300;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Full-bleed background photograph, same technique as the main site's
   Capital section: real color image, ZERO filter/grayscale/brightness on
   the photo itself (that's what made an earlier pass read soft/muddy no
   matter how it was tuned — compositing overhead + crushed contrast) —
   all the toning happens on a separate flat-color scrim layered on top.
   Fixed so it stays put as a backdrop for the whole page, not just the
   hero, matching Matt's "just like my Capital section" direction. */
body::before {
  content: '';
  position: fixed;
  inset: -3%;
  z-index: -2;
  background-image: url('a45-f9e2c4e4ef.jpg');
  background-size: cover;
  background-position: center 30%;
  opacity: 0;
  pointer-events: none;
  animation: bg-photo-in 1.6s ease-out 0.1s forwards, bg-photo-drift 46s ease-in-out 1.6s infinite;
}
/* Flat scrim over the photo — a moderate dark single-tone darken so the
   gold/cream letterhead stands out without flattening the skyline into
   an unreadable silhouette. Opt-in page only; video pages hide the
   whole photo+scrim layer entirely below. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(11,11,13,0.58);
  pointer-events: none;
}
/* Video pages: no ambient background photo at all. Research (real VSL-page
   teardowns) + a live critique both converged on the same finding — a
   full-bleed photo behind body content competes with the video for the
   eye's first fixation and measurably hurts conversion on exactly this
   page type, and every tuning pass (opacity, scrim, vignette) still left
   it "too weak to read as atmosphere, too present to leave a clean
   canvas" (the actual bug: it was diluting into body's own opaque white,
   not into anything). Flat canvas instead — the video and headline are
   the only things competing for attention now. */
body.video-page::before,
body.video-page::after {
  display: none;
}
@keyframes bg-photo-in {
  from { opacity: 0; transform: scale(1.04); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes bg-photo-drift {
  0%, 100% { transform: scale(1) translate(0, 0); }
  50% { transform: scale(1.035) translate(-1%, 1%); }
}
@media (prefers-reduced-motion: reduce) {
  body::before { animation: none; opacity: 1; transform: none; }
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Word-stagger headline reveal — same technique as the main site's
   hero/chapter headlines. Each word is its own inline-block span with
   an inline transition-delay; the parent's .is-visible class (added by
   the same IntersectionObserver as .reveal) fires all of them at once. */
.stagger .aw {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.stagger.is-visible .aw { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .stagger .aw { opacity: 1; transform: none; transition: none; }
}

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Header */
header.site {
  padding: 44px 0 0;
  text-align: center;
}
header.site .mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 32px;
  letter-spacing: 0.01em;
  color: var(--ink);
}
header.site .mark span {
  color: var(--gold);
}
header.site::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  margin: 18px auto 0;
}

/* Hero */
.hero {
  text-align: center;
  padding: 56px 0 32px;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-size: 12px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 24px;
}
.eyebrow::before,
.eyebrow::after {
  content: '';
  width: 22px;
  height: 1px;
  background: var(--gold);
  opacity: 0.5;
}
h1 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.18;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 22px;
  text-wrap: balance;
}
.sub {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 540px;
  margin: 0 auto;
  font-weight: 300;
}

/* Video — this is the page's one job, so it gets real weight and no
   competing frame device. Breaks out wider than the 760px text column
   (research: best-in-class VSL pages run the video near-fullscreen,
   never boxed in a skeuomorphic device frame) and sits in a solid dark
   panel regardless of page theme, so it reads as the unmistakable
   anchor against the flat white canvas around it — not another pale
   card blending into the page. */
.video-frame {
  position: relative;
  width: 100vw;
  margin: 48px calc(50% - 50vw) 56px;
  border-radius: 8px;
  background: linear-gradient(165deg, #262019 0%, #100D09 100%);
  border: 1px solid rgba(198,166,103,0.22);
  box-shadow: 0 40px 100px rgba(0,0,0,0.5), 0 10px 30px rgba(0,0,0,0.4);
}
/* Soft gold spotlight so the frame lifts off an equally-dark page
   background instead of blending into it — same technique as the
   opt-in card, bled out past the frame's own edges. */
.video-frame::before {
  content: '';
  position: absolute;
  inset: -70px 0;
  z-index: -1;
  border-radius: 24px;
  background: radial-gradient(ellipse at 50% 45%, rgba(198,166,103,0.24), transparent 68%);
  filter: blur(12px);
}
.video-frame .ratio {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: 8px;
  overflow: hidden;
}
.video-frame .ratio iframe,
.video-frame .ratio .placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-frame .placeholder {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  color: rgba(242,237,225,0.68);
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  overflow: hidden;
}
/* Focal play mark — a bare caption in an otherwise-empty dark panel
   reads as an unfinished build, not a considered pause. Gives the eye
   an actual thing to land on until the real embed replaces this. */
.play-mark {
  position: relative;
  z-index: 1;
  width: 84px;
  height: 84px;
}
.play-mark svg { width: 100%; height: 100%; overflow: visible; }
.play-mark circle {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.4;
  opacity: 0.75;
}
.play-mark path { fill: var(--gold); opacity: 0.9; }
/* Ambient drift so the pending-video box reads as a considered moment
   rather than a dead placeholder while the real embed isn't live yet —
   same slow radial-glow-drift technique used on the main site's video
   sections, tuned down for a light background. */
.video-frame .placeholder::before,
.video-frame .placeholder::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.video-frame .placeholder::before {
  top: -30%; left: 60%; width: 70%; height: 70%;
  background: radial-gradient(circle, rgba(198,166,103,0.18), transparent 70%);
  filter: blur(30px);
  animation: frame-drift-a 22s ease-in-out infinite;
}
.video-frame .placeholder::after {
  bottom: -35%; left: -10%; width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(198,166,103,0.12), transparent 70%);
  filter: blur(30px);
  animation: frame-drift-b 28s ease-in-out infinite;
}
.video-frame .placeholder span {
  position: relative;
  z-index: 1;
}
@keyframes frame-drift-a {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-8%, 6%) scale(1.08); }
}
@keyframes frame-drift-b {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(6%, -5%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .video-frame .placeholder::before, .video-frame .placeholder::after { animation: none; }
}

/* CTA */
.cta-row {
  text-align: center;
  margin: 32px 0 8px;
}
.btn-gold {
  display: inline-block;
  background: linear-gradient(180deg, #B49B66 0%, var(--gold) 55%, #8F7A48 100%);
  color: #FFFFFF;
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 22px 56px;
  border-radius: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 4px rgba(0,0,0,0.08),
    var(--shadow-gold-md);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}
.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -2px 4px rgba(0,0,0,0.06),
    var(--shadow-gold-lg);
}
.btn-gold:active {
  transform: translateY(0);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
.cta-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Benefit bullets */
.benefits {
  list-style: none;
  max-width: 712px;
  margin: 0 auto;
  padding: 0;
}
.benefits li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 18px;
  border-radius: 8px;
  background: linear-gradient(165deg, var(--bg-soft) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-md);
  font-size: 15px;
  color: var(--ink);
  font-weight: 300;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.benefits li:last-child { margin-bottom: 0; }
.benefits li:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.benefits svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  padding: 6px;
  margin-top: 1px;
  box-sizing: content-box;
  border-radius: 50%;
  background: linear-gradient(160deg, var(--bg-soft) 0%, var(--bg-deep) 100%);
  box-shadow: var(--shadow-sm), inset 0 1px 1px rgba(255,255,255,0.08);
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Opt-in form */
.optin-frame {
  position: relative;
  max-width: 500px;
  margin: 56px auto;
  padding: 48px 32px 42px;
  border-radius: 8px;
  border-top: 2px solid var(--gold);
  /* Slightly warmer/richer than the plain bg-soft->bg-deep recipe used
     for the benefit and proof cards — this is the one conversion
     moment on the page, it should read as a distinct object, not the
     same card component reused a third time. */
  background: linear-gradient(180deg, #211C15 0%, var(--bg-deep) 100%);
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  box-shadow: var(--shadow-xl);
  text-align: center;
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out, box-shadow 0.3s ease;
  will-change: transform;
}
/* Soft spotlight behind the card — separates it from a same-tone page
   background far more than a shadow alone can. Sits behind (z-index -1)
   and bleeds past the card edges. */
.optin-frame::before {
  content: '';
  position: absolute;
  inset: -14% -8%;
  z-index: -1;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(198,166,103,0.18), transparent 70%);
  filter: blur(6px);
}
.optin-frame:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.24), 0 20px 40px rgba(0,0,0,0.3), 0 56px 100px rgba(0,0,0,0.4);
}
.optin-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 360px;
  margin: 0 auto;
}
.optin-form input {
  width: 100%;
  padding: 16px 18px;
  border: 1px solid var(--hairline);
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 15px;
  color: var(--ink);
}
.optin-form input::placeholder { color: var(--ink-soft); }
.optin-form input {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.optin-form input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(198,166,103,0.16);
}
.optin-form button.btn-gold {
  border: 0;
  cursor: pointer;
  width: 100%;
  margin-top: 6px;
  font-size: 14px;
}
.optin-note {
  margin-top: 20px;
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

/* Proof */
.proof {
  margin: 72px 0;
  padding: 8px 0;
}
.proof h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  font-size: 24px;
  text-align: center;
  margin-bottom: 8px;
  color: var(--ink);
}
.proof h2::after {
  content: '';
  display: block;
  width: 36px;
  height: 1px;
  background: var(--gold);
  opacity: 0.55;
  margin: 18px auto 32px;
}
.proof-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 26px 28px;
  margin-bottom: 32px;
  background: linear-gradient(165deg, var(--bg-soft) 0%, var(--bg-deep) 100%);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: var(--shadow-xl);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
/* Same spotlight treatment as the opt-in card. Fixed pixel sizing, not
   percentage — a percentage inset scales with each element's own
   height, so short stacked cards got a proportionally tiny glow next
   to the tall opt-in card even with "identical" CSS. Fixed px keeps
   the glow the same absolute size everywhere. */
.proof-item::before {
  content: '';
  position: absolute;
  inset: -34px -26px;
  z-index: -1;
  border-radius: 16px;
  background: radial-gradient(ellipse at 50% 40%, rgba(198,166,103,0.16), transparent 70%);
  filter: blur(6px);
}
.proof-item:last-child { margin-bottom: 0; }
.proof-item:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.24), 0 20px 40px rgba(0,0,0,0.3), 0 56px 100px rgba(0,0,0,0.4);
  transform: translateY(-4px);
}
.proof-mark {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
  flex-shrink: 0;
  width: 24px;
}
.proof-text {
  font-size: 16px;
  color: var(--ink-soft);
  font-weight: 300;
  padding-top: 4px;
}
.proof-text strong {
  color: var(--ink);
  font-weight: 500;
}

/* Secondary CTA */
.cta-final {
  text-align: center;
  padding: 8px 0 72px;
}
.cta-final p {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 24px;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer */
footer.site {
  text-align: center;
  padding: 28px 0 48px;
  font-size: 12px;
  letter-spacing: 0.28em;
  color: var(--ink-soft);
  text-transform: uppercase;
}

@media (max-width: 600px) {
  h1 { font-size: 32px; }
  .sub { font-size: 16px; }
  .proof { margin: 48px 0; padding: 36px 0; }
  /* "Unlock The Training" wraps to 2 lines at the desktop button's
     tracking/padding — tighten both so it stays on one line. */
  .btn-gold { padding: 20px 28px; letter-spacing: 0.08em; font-size: 13px; }
}