/* ==========================================================================
   SCALE INFO VSL FUNNEL - design system v2
   Nebula navy ground, white body copy, gold accents,
   dark-gold gradient titles, zero rounded corners.
   ========================================================================== */

/* Self-hosted, latin subset, woff2. Removes two third-party origins from the
   critical path. Manrope is the variable file, so 400-800 costs one request. */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/manrope-var.woff2') format('woff2');
}
@font-face{
  font-family:'Marcellus';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('../fonts/marcellus-400.woff2') format('woff2');
}

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* nebula ground */
  --void:        #040E1E;   /* deepest, footer */
  --navy:        #071B34;   /* base page ground - dark navy */
  --navy-mid:    #0C2346;   /* banded sections */
  --navy-raised: #122C52;   /* cards and panels */
  --navy-line:   #1E3D6E;   /* hairlines */

  /* text */
  --white:       #FFFFFF;
  --text:        #DCE5F2;   /* body copy */
  --text-soft:   #A9B8D0;   /* secondary */
  --text-muted:  #7C8CA8;   /* captions, legal */

  /* gold */
  --gold:        #C9A227;   /* CTA fill */
  --gold-light:  #E3C463;   /* gold text on navy */
  --gold-pale:   #F0D98B;   /* gradient highlight */
  --gold-deep:   #8A6A12;   /* gradient shadow */
  --gold-hover:  #D8B23C;

  --danger:      #CE1B1B;   /* dark red */

  /* geometry - nothing is rounded */
  --radius:    0;
  --radius-lg: 0;
  --maxw:      1080px;
  --narrow:    760px;
  --gutter:    24px;

  --shadow:      0 0 0 1px rgba(30,58,102,.6), 0 18px 46px rgba(0,0,0,.42);
  --shadow-gold: 0 0 0 1px rgba(201,162,39,.35), 0 14px 34px rgba(201,162,39,.20);

  --font-mark: 'Marcellus', 'Cormorant Garamond', Georgia, serif;
  --font-sf:   'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: var(--font-sf);
  --font-body:    var(--font-sf);
}

/* --------------------------------------------------------------------------
   2. Base + the nebula
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--navy)}

body{
  margin:0;
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  position:relative;
  background:
    /* restrained navy-blue bloom, top left */
    radial-gradient(1200px 820px at 10% -10%, rgba(30,74,150,.26), transparent 62%),
    /* cool wisp, top right */
    radial-gradient(880px  640px at 92%  4%, rgba(28,92,140,.15), transparent 60%),
    /* faint indigo drift through the middle */
    radial-gradient(1000px 760px at 76% 30%, rgba(62,58,132,.16), transparent 62%),
    /* navy core lift */
    radial-gradient(1150px 900px at 42% 46%, rgba(18,54,116,.28), transparent 66%),
    /* low-left cool glow */
    radial-gradient(820px  680px at  6% 66%, rgba(22,78,124,.14), transparent 62%),
    /* bottom swell */
    radial-gradient(1000px 780px at 34% 96%, rgba(24,64,132,.20), transparent 64%),
    /* single warm note, kept low */
    radial-gradient(760px  600px at 88% 86%, rgba(201,162,39,.07), transparent 62%),
    /* deep falloff so corners stay navy rather than black */
    radial-gradient(1400px 1100px at 50% 50%, rgba(9,30,64,.50), transparent 78%),
    var(--navy);
  background-attachment:fixed;
}

/* faint star field, above the nebula and below the content */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,0.43), transparent),
    radial-gradient(1px   1px   at 78% 12%, rgba(198,225,255,0.34), transparent),
    radial-gradient(1px   1px   at 34% 62%, rgba(255,255,255,0.28), transparent),
    radial-gradient(1.4px 1.4px at 88% 48%, rgba(170,210,255,0.37), transparent),
    radial-gradient(1px   1px   at 58% 82%, rgba(255,255,255,0.25), transparent),
    radial-gradient(1.2px 1.2px at 22% 88%, rgba(198,225,255,0.27), transparent),
    radial-gradient(1px   1px   at 66% 30%, rgba(227,196,99,0.31), transparent),
    radial-gradient(1px   1px   at 44%  8%, rgba(227,196,99,0.21), transparent),
    radial-gradient(1px   1px   at  6% 42%, rgba(255,255,255,0.24), transparent),
    radial-gradient(1.3px 1.3px at 94% 70%, rgba(170,210,255,0.29), transparent),
    radial-gradient(1px   1px   at 50% 96%, rgba(255,255,255,0.21), transparent),
    radial-gradient(1px   1px   at 28% 34%, rgba(198,225,255,0.22), transparent);
}
body > *{position:relative;z-index:1}

h1,h2,h3,.display{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.028em;
  line-height:1.14;              /* 1.08 clipped descenders under background-clip:text */
  text-wrap:balance;
  margin:0;
  /* the gradient only paints inside the box, so descenders (p, g, y, %) need
     room below the last line. The negative margin keeps layout spacing identical. */
  padding-bottom:.14em;
  margin-bottom:-.14em;
  /* dark-gold gradient on every title */
  background:linear-gradient(145deg,
    var(--gold-pale)  0%,
    var(--gold-light) 26%,
    var(--gold)       58%,
    var(--gold-deep)  100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  h1,h2,h3,.display{color:var(--gold-light);-webkit-text-fill-color:var(--gold-light)}
}

p{margin:0 0 1em}
p:last-child{margin-bottom:0}
[hidden]{display:none !important}   /* class display rules (.btn, .step-item) must not beat it */
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}

::selection{background:rgba(201,162,39,.30);color:var(--white)}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */
.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.narrow{max-width:var(--narrow);margin:0 auto;padding:0 var(--gutter)}
section{position:relative}
.section{padding:88px 0}
.section--tight{padding:64px 0}

/* banded sections sit as translucent panels over the nebula */
.section--tint{
  background:rgba(12,35,70,.52);
  border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}
.section-dark{
  background:rgba(4,14,30,.58);
  border-top:1px solid var(--navy-line);
  border-bottom:1px solid var(--navy-line);
}

.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(32px,4.2vw,48px);margin:14px 0}
.section-head p{font-size:17px;color:var(--text-soft);margin:0}

.eyebrow{
  font-family:var(--font-body);
  font-size:12px;font-weight:700;
  line-height:1.75;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-light);
  margin:0;
}
.center{text-align:center}
.mt-32{margin-top:32px}
.muted{color:var(--text-muted)}

/* --------------------------------------------------------------------------
   4. Buttons - square, gold fill, navy label
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:17px 30px;
  border-radius:0;
  border:1px solid transparent;
  font-family:var(--font-body);
  font-weight:700;font-size:15px;line-height:1;
  letter-spacing:.01em;
  cursor:pointer;text-align:center;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;
}
.btn-accent{
  background:linear-gradient(145deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  color:#0B1B33;                       /* navy label - white on gold fails contrast */
  box-shadow:var(--shadow-gold);
}
.btn-accent:hover{
  background:linear-gradient(145deg,var(--gold-pale),var(--gold-hover) 55%,var(--gold));
  transform:translateY(-1px);
}
.btn-large{padding:21px 38px;font-size:17px}
.btn-block{width:100%}

/* --------------------------------------------------------------------------
   5. Brandmark
   -------------------------------------------------------------------------- */
.brand{display:flex;align-items:center;justify-content:center;padding:48px 24px 14px}
.brandmark{
  display:inline-flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--font-mark);line-height:1;
}
.bm-the{
  display:flex;align-items:center;gap:10px;
  font-family:var(--font-body);
  font-size:11px;font-weight:700;
  letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold-light);
  padding-left:.42em;
}
.bm-the::before,.bm-the::after{
  content:"";display:block;width:26px;height:1px;background:var(--gold-light);opacity:.55;
}
.bm-name{
  font-size:clamp(22px,5.2vw,46px);
  letter-spacing:.09em;text-transform:uppercase;
  padding-left:.09em;white-space:nowrap;text-align:center;
  color:var(--white);
}
.bm-name em{
  font-style:normal;display:inline-block;padding-bottom:.08em;margin-bottom:-.08em;
  background:linear-gradient(145deg,var(--gold-pale),var(--gold) 60%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}

/* --------------------------------------------------------------------------
   6. Single-purpose pages (landing + booking)
   -------------------------------------------------------------------------- */
.vsl-page{padding:56px 0 88px}
.vsl-stack{
  max-width:860px;
  display:flex;flex-direction:column;align-items:center;
  gap:22px;text-align:center;
}
.vsl-stack h1{font-size:clamp(30px,4.05vw,46px);margin:0;max-width:none;text-wrap:initial}
/* optional highlight: wrap the number or the risk reversal in <em> to lift it out of the gradient */
.vsl-stack h1 em{font-style:normal;color:var(--white);-webkit-text-fill-color:var(--white)}
.booking-h1{font-size:clamp(30px,4vw,46px) !important}
.vsl-stack .lede{font-size:19px;font-weight:700;color:var(--white);max-width:60ch;margin:0;text-wrap:pretty}
.lede{color:var(--text-soft)}
.vsl-stack .player{width:100%;margin:10px 0 0}
.form-wrap{width:100%;margin-top:14px}

/* --------------------------------------------------------------------------
   7. Media + placeholders
   -------------------------------------------------------------------------- */
.player{
  max-width:860px;margin:0 auto;
  border-radius:0;overflow:hidden;
  background:#000;
  box-shadow:var(--shadow);
}
.player iframe,.player video{width:100%;aspect-ratio:16/9;border:0;display:block}

.ph{
  position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:28px;
  border:1px dashed var(--gold);
  border-radius:0;
  background:linear-gradient(rgba(18,44,82,.66),rgba(7,27,52,.66));
  color:var(--text-muted);
}
.ph-video{aspect-ratio:16/9}
.ph-play{
  width:72px;height:72px;border-radius:50%;
  background:rgba(201,162,39,.14);
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
}
.ph-play::after{
  content:"";margin-left:6px;
  border-left:22px solid var(--gold-light);
  border-top:13px solid transparent;border-bottom:13px solid transparent;
}
.ph-label{font-size:15px;font-weight:700;color:var(--white);margin:0}
.ph-hint{font-size:13px;color:var(--text-muted);max-width:46ch;margin:0}
.ph-tag{
  position:absolute;top:0;left:0;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:var(--gold);color:#0B1B33;
  padding:5px 11px;
}
.ph-embed{min-height:560px}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */
/* Screenshot cards only. Two columns on desktop so the screenshot text renders
   at 11px or more (a 3-column card left it at 6 to 8px). align-items:start means
   a card is never stretched taller than its own content into an empty box. */
.proof-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.proof-card{
  background:rgba(18,44,82,.58);
  border:1px solid var(--navy-line);
  border-radius:0;padding:28px;text-align:center;
  box-shadow:var(--shadow);
}
.proof-figure{
  font-family:var(--font-display);font-size:30px;font-weight:800;line-height:1.2;
  letter-spacing:-.025em;margin:10px 0 6px;
  padding-bottom:.12em;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(145deg,var(--gold-pale),var(--gold-light) 30%,var(--gold) 65%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.proof-figure .arrow{-webkit-text-fill-color:var(--gold);color:var(--gold);margin:0 6px}
.proof-name{font-size:15px;font-weight:700;color:var(--white);margin:0}
.proof-meta{font-size:13px;color:var(--text-muted);margin:2px 0 0}
.proof-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gold-light);margin:0;
}
/* a plain rule, not a tick: these are self-reported, not verified */
.proof-badge::before,.proof-badge::after{content:"";width:14px;height:1px;background:var(--gold);opacity:.7}
.proof-shot{
  margin-top:18px;border:1px solid var(--navy-line);
  background:rgba(5,13,26,.5);
}
.proof-shot img{width:100%;height:auto;display:block}

/* ---- click-to-enlarge on screenshots (motion.js wraps each img in this button) ---- */
.zoom{
  display:block;position:relative;width:100%;
  margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;
  cursor:zoom-in;
}
.zoom img{width:100%;height:auto;display:block}
.zoom::after{
  content:"";position:absolute;right:8px;bottom:8px;
  width:30px;height:30px;
  background:rgba(7,27,52,.82) no-repeat center/16px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E3C463' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  border:1px solid rgba(227,196,99,.55);
  opacity:.8;transition:opacity .18s ease,transform .18s ease;
}
.zoom:hover::after,.zoom:focus-visible::after{opacity:1;transform:scale(1.06)}
.zoom:focus-visible{outline:2px solid var(--gold-light);outline-offset:2px}

/* ---- the lightbox itself (native <dialog>: Esc closes, focus stays inside) ---- */
.lightbox{
  /* fixed, not the body > * relative rule: an absolute top-layer dialog scrolls the page to the top */
  position:fixed;inset:0;z-index:100;
  width:min(960px,calc(100vw - 24px));max-width:none;height:fit-content;
  max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);
  margin:auto;padding:0;
  border:1px solid var(--navy-line);background:var(--void);color:var(--text);
  box-shadow:0 30px 90px rgba(0,0,0,.65);
  overflow:hidden;
}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox::backdrop{background:rgba(2,8,18,.88)}
.lb-bar{
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex:none;
  padding:10px 12px;border-bottom:1px solid var(--navy-line);
}
.lb-btn{
  display:inline-flex;align-items:center;gap:8px;min-height:40px;
  padding:9px 16px;border:1px solid var(--navy-line);border-radius:0;
  background:rgba(18,44,82,.7);color:var(--white);
  font:700 13px/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:background .18s ease,border-color .18s ease;
}
.lb-btn:hover{background:rgba(26,58,104,.9);border-color:var(--gold)}
.lb-btn[hidden]{display:none}
.lb-scroll{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;background:#fff}
.lb-img{display:block;margin:0 auto;width:auto;max-width:100%;height:auto;cursor:zoom-in}
.lightbox.is-zoomed .lb-img{max-width:none;cursor:zoom-out}
.lb-cap{flex:none;margin:0;padding:12px 16px;font-size:13.5px;line-height:1.5;color:var(--text-soft);border-top:1px solid var(--navy-line)}
html.lb-open{overflow:hidden}


/* --------------------------------------------------------------------------
   9. Confirmation page: rhythm, email mock, steps, alert
   -------------------------------------------------------------------------- */
.confirm-stack{
  display:flex;flex-direction:column;align-items:center;
  gap:72px;                      /* the single source of vertical rhythm */
}
.block{width:100%;display:flex;flex-direction:column;align-items:center;gap:0}
.block .eyebrow{margin-bottom:10px}
.block-h{font-size:clamp(24px,3vw,34px);margin:0 0 28px;text-align:center}
.block-note{
  font-size:14px;color:var(--text-muted);margin:22px auto 0;
  max-width:52ch;text-align:center;
}
.block-note strong{color:var(--gold-light);font-weight:700}

/* ---- the email mock ---- */
.mail{
  width:100%;max-width:640px;
  background:#fff;color:#202124;
  text-align:left;
  font-size:14px;line-height:1.55;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.mail-chrome{
  display:flex;align-items:center;gap:7px;
  background:#f1f3f4;border-bottom:1px solid #e0e2e5;
  padding:10px 14px;
}
.mail-dot{width:10px;height:10px;border-radius:50%;background:#dadce0;flex:none}
.mail-dot:nth-child(1){background:#ee6a5f}
.mail-dot:nth-child(2){background:#f5bd4f}
.mail-dot:nth-child(3){background:#61c454}
.mail-search{
  flex:1;margin-left:10px;background:#e8eaed;color:#80868b;
  padding:6px 12px;font-size:12.5px;
}
.mail-head{padding:20px 22px 0}
.mail-subject{
  font-size:19px;font-weight:400;color:#202124;line-height:1.35;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.mail-chip{
  font-size:11px;font-weight:500;color:#5f6368;
  background:#e8eaed;padding:2px 8px;
}
.mail-from{
  display:flex;align-items:center;gap:12px;
  padding:16px 22px 0;
}
.mail-avatar{
  width:38px;height:38px;border-radius:50%;flex:none;
  background:#0E2547;color:#E3C463;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mark);font-size:17px;
}
.mail-who{flex:1;min-width:0}
.mail-name{margin:0;font-size:13.5px;font-weight:700;color:#202124}
.mail-name span{font-weight:400;color:#5f6368}
.mail-to{margin:1px 0 0;font-size:12.5px;color:#5f6368}
.mail-time{font-size:12.5px;color:#5f6368;flex:none}
.mail-body{padding:18px 22px 24px}
.mail-body p{margin:0 0 13px;color:#3c4043;font-size:14px}
.mail-body strong{color:#202124}
.mail-cta-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0}
/* E1 is plain text: the confirm step is a text line plus a link, not a button */
.mail-body .mail-cta{margin:0}
.mail-link{color:#1a73e8;text-decoration:underline;text-underline-offset:2px}
.mail-point{
  font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:#8A6A12;
}
.mail-sign{margin:0 !important;color:#5f6368 !important;font-size:13.5px !important}

/* ---- the calendar invite mock (step 2), same card language as the email ---- */
.invite{
  width:100%;max-width:640px;margin-top:22px;
  background:#fff;color:#202124;text-align:left;
  font-size:14px;line-height:1.5;
  border-left:4px solid #1a73e8;
  box-shadow:0 24px 60px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.08);
}
.invite-head{display:flex;align-items:flex-start;gap:14px;padding:18px 22px 0}
.invite-icon{width:34px;height:34px;flex:none;fill:#1a73e8;margin-top:2px}
.invite-who{min-width:0}
.invite-title{margin:0 0 4px;font-size:16px;font-weight:700;color:#202124;line-height:1.35}
.invite-meta{margin:0;font-size:13px;color:#5f6368}
.invite-actions{
  display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;
  padding:16px 22px 20px;
}
.invite-label{font-size:13px;color:#5f6368;margin-right:2px}
.invite-btn{
  display:inline-block;padding:7px 16px;
  border:1px solid #dadce0;color:#3c4043;font-size:13px;font-weight:600;
}
.invite-btn--yes{
  background:linear-gradient(145deg,var(--gold-light),var(--gold) 55%,var(--gold-deep));
  border-color:transparent;color:#0B1B33;font-weight:700;
}
.invite .mail-point{margin-left:4px}

/* ---- steps ---- */
.steps{
  width:100%;max-width:var(--narrow);
  margin:0;padding:0;list-style:none;
  display:flex;flex-direction:column;gap:14px;
}
/* "To confirm" / "Before the call" group labels above each list */
.steps-label{
  width:100%;max-width:var(--narrow);
  margin:0 0 12px;text-align:left;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-soft);
}
.steps + .steps-label{margin-top:34px}
.step-item{display:block}

/* each step is a link to the section that helps you do it */
.step{
  display:grid;
  grid-template-columns:44px 1fr auto;
  align-items:center;gap:18px;
  text-align:left;
  background:rgba(18,44,82,.52);
  border:1px solid var(--navy-line);
  border-left:2px solid var(--gold);
  padding:20px 24px;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.step:hover,.step:focus-visible{
  background:rgba(26,58,104,.72);
  border-color:var(--gold);
  border-left-width:4px;
  transform:translateX(3px);
}
.step:hover .step-go,.step:focus-visible .step-go{opacity:1;transform:translateX(0)}
.step:hover .step-n{transform:scale(1.06)}
/* information-only steps: same card, no link behaviour */
.step--static{cursor:default;grid-template-columns:44px 1fr}
.step--static:hover{background:rgba(18,44,82,.52);border-color:var(--navy-line);border-left-width:2px;border-left-color:var(--gold);transform:none}
.step--static:hover .step-n{transform:none}

.step-n{
  width:32px;height:32px;
  background:linear-gradient(145deg,var(--gold-light),var(--gold) 60%,var(--gold-deep));
  color:#0B1B33;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;
  transition:transform .18s ease;
}
.step p{margin:0;font-size:15.5px;line-height:1.6;color:var(--text-soft);max-width:none}
.step strong{color:var(--white);font-weight:700}
.step-go{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-light);white-space:nowrap;
  opacity:0;transform:translateX(-6px);
  transition:opacity .18s ease,transform .18s ease;
}

/* stop the jumped-to section sitting flush against the top of the viewport */
#the-email,#the-invite,#steps,#presell,#qa,#breakdowns,#results,.v-item[id]{scroll-margin-top:32px}

/* ---- alert ---- */
.alert{
  max-width:var(--narrow);margin:0 auto;text-align:center;
  border:0;background:none;padding:0;
}
.alert h1,.alert h2{
  font-size:clamp(28px,4.4vw,44px);
  line-height:1.1;margin:0 0 12px;
  background:none;
  color:var(--danger);-webkit-text-fill-color:var(--danger);
}
/* ?confirmed=1: the same headline in the gold title treatment instead of red */
.alert--ok h1{
  background:linear-gradient(145deg,var(--gold-pale) 0%,var(--gold-light) 26%,var(--gold) 58%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.alert p{font-size:17px;line-height:1.6;margin:0 auto;max-width:76ch;color:var(--text)}
.alert strong{color:var(--white);font-weight:800}

/* --------------------------------------------------------------------------
   10. Video grid (Q&A + breakdowns)
   -------------------------------------------------------------------------- */
.v-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:40px 32px;max-width:940px;margin:0 auto}
.v-item{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.v-item .ph-video{width:100%}
.v-embed{
  width:100%;aspect-ratio:16/9;
  background:#000;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.v-embed iframe{width:100%;height:100%;border:0;display:block}

/* click-to-load YouTube facade: nothing from YouTube loads until it is clicked */
.yt{position:relative;cursor:pointer;
  /* if the thumbnail is blocked or 404s, this reads as intentional */
  background:linear-gradient(160deg,var(--navy-raised),var(--void));}
.yt-thumb{
  width:100%;height:100%;object-fit:cover;display:block;
  /* hqdefault is 4:3 with pillarboxing, cover crops it back to 16:9 */
}
.yt-play{
  position:absolute;inset:0;margin:auto;
  width:68px;height:68px;border-radius:50%;
  background:rgba(201,162,39,.92);
  border:1px solid var(--gold-light);
  cursor:pointer;padding:0;
  transition:transform .2s ease,background .2s ease;
}
.yt-play::after{
  content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);
  border-left:20px solid #0B1B33;
  border-top:12px solid transparent;border-bottom:12px solid transparent;
}
.yt:hover .yt-play{transform:scale(1.08);background:var(--gold-light)}
.yt-play:focus-visible{outline:3px solid #fff;outline-offset:3px}
.v-q{
  font-size:17px;font-weight:800;margin:0 auto;max-width:44ch;
  line-height:1.4;padding-bottom:.1em;
  background:linear-gradient(145deg,var(--gold-pale),var(--gold) 65%,var(--gold-deep));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.v-a{font-size:14.5px;line-height:1.65;color:var(--text-soft);margin:0 auto;max-width:46ch}
.v-who{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--text-muted);margin:-4px auto 0;max-width:44ch;
}

/* --------------------------------------------------------------------------
   12. Final CTA + footer
   -------------------------------------------------------------------------- */
.final{padding:96px 0 110px;text-align:center}
.final h2{font-size:clamp(34px,5vw,60px);max-width:20ch;margin:0 auto 18px}
.final p{font-size:17px;max-width:54ch;margin:0 auto 32px;color:var(--text-soft)}

.site-footer{
  background:rgba(4,14,30,.84);
  border-top:1px solid var(--navy-line);
  color:var(--text-muted);
  padding:52px 0 32px;font-size:14px;text-align:center;
}
.site-footer .brandmark{margin:0 auto}
.site-footer .bm-name{font-size:24px}
.tagline{margin:14px auto 0;max-width:46ch}
.disclaimer{font-size:12px;line-height:1.7;max-width:70ch;margin:18px auto 0;opacity:.85}
.foot-bottom{
  display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:center;align-items:center;
  border-top:1px solid var(--navy-line);margin-top:32px;padding-top:24px;
}
.foot-links{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.site-footer a{color:var(--text-muted);transition:color .2s ease}
.site-footer a:hover{color:var(--gold-light)}

/* --------------------------------------------------------------------------
   13. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:880px){
  /* one readable column rather than two 290px ones */
  .proof-grid{grid-template-columns:minmax(0,1fr);max-width:640px;margin:0 auto}
}
@media (pointer:coarse){
  .btn{min-height:48px}
  .foot-links a,.site-footer a{display:inline-block;padding:11px 4px}
  .brandmark{padding:4px 0}
  .yt-play{width:64px;height:64px}
  .step{padding:22px 20px}
}
@media (max-width:720px){
  .section,.vsl-page{padding:56px 0}
  .final{padding:64px 0 76px}
  .proof-grid,.v-grid{grid-template-columns:minmax(0,1fr)}
  .proof-card{padding:22px 20px}
  .proof-figure{font-size:26px}
  .v-grid{gap:32px}
  .section-head{margin-bottom:36px}
  .btn{width:100%}
  .brand{padding:34px 24px 8px}
  .bm-the{font-size:10px;letter-spacing:.34em;padding-left:.34em}
  .bm-the::before,.bm-the::after{width:18px}
  body{background-attachment:scroll}   /* fixed attachment is janky on mobile */
}
@media (max-width:720px){
  .lb{display:none}              /* drop the forced line breaks on phones */
  .alert p{max-width:46ch}
  .confirm-stack{gap:52px}
  .step{grid-template-columns:36px 1fr;gap:12px 14px;padding:18px}
  .step-go{grid-column:2;opacity:1;transform:none;font-size:11px}
  .invite-head{padding:16px 16px 0}
  .invite-actions{padding:14px 16px 18px}
  .invite .mail-point{display:none}
  .mail-cta-row{gap:10px}
  .mail-point{display:none}
  .vsl-stack h1{max-width:18ch}
  .vsl-stack .lede{max-width:44ch}
}
@media (max-width:400px){
  .bm-name{white-space:normal;line-height:1.16}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
}


/* --------------------------------------------------------------------------
   20. Motion
       Only applies when motion.js has confirmed the visitor has not asked
       for reduced motion (it removes .js-motion from <html> if they have).
   -------------------------------------------------------------------------- */
.js-motion .reveal{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.js-motion .reveal.in{opacity:1;transform:none}
.js-motion .reveal.in{will-change:auto}

/* cards lift in with a touch more travel */
.js-motion .proof-card.reveal,
.js-motion .v-item.reveal{transform:translate3d(0,30px,0) scale(.985)}
.js-motion .proof-card.reveal.in,
.js-motion .v-item.reveal.in{transform:none}

/* steps slide in from the left, matching their gold edge */
.js-motion .step-item.reveal{transform:translate3d(-16px,0,0)}
.js-motion .step-item.reveal.in{transform:none}

/* the email mock arrives like a notification */
.js-motion .mail.reveal{transform:translate3d(0,26px,0) scale(.97)}
.js-motion .mail.reveal.in{transform:none}

/* gold sweep across a title once it lands */
@keyframes sheen{
  0%   {background-position:180% 0}
  100% {background-position:0 0}
}
.js-motion h1.sheen,
.js-motion h2.sheen,
.js-motion .block-h.sheen{
  background-size:220% 100%;
  background-repeat:repeat;   /* must tile, or mid-animation the text goes transparent */
  animation:sheen 1.25s cubic-bezier(.32,.72,.32,1) forwards;
}

/* play button breathes so the placeholder reads as clickable */
@keyframes pulse{
  0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.30)}
  50%    {box-shadow:0 0 0 14px rgba(201,162,39,0)}
}
.js-motion .ph-play{animation:pulse 2.8s ease-out infinite}

/* CTA keeps a slow gold glow */
@keyframes glow{
  0%,100%{box-shadow:0 0 0 1px rgba(201,162,39,.35), 0 14px 34px rgba(201,162,39,.18)}
  50%    {box-shadow:0 0 0 1px rgba(201,162,39,.55), 0 18px 44px rgba(201,162,39,.34)}
}
.js-motion .btn-accent.btn-large{animation:glow 3.4s ease-in-out infinite}
.js-motion .btn-accent.btn-large:hover{animation:none}

/* everything above is opt-in; this is the hard stop */
@media (prefers-reduced-motion:reduce){
  .js-motion .reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .js-motion .ph-play,
  .js-motion .btn-accent.btn-large,
  .js-motion h1.sheen,.js-motion h2.sheen,.js-motion .block-h.sheen{animation:none !important}
}

/* --------------------------------------------------------------------------
   21. Performance
   -------------------------------------------------------------------------- */
/* content-visibility:auto was tried here and removed on purpose. On this page
   the sections vary wildly in height (video grids, 9-card proof stack), so the
   estimated intrinsic size made the document height jump around while scrolling
   and broke anchor targets. The lazy iframes and lazy images already give us
   the load win without destabilising scroll. */

/* iframes and images get their own paint layer so scrolling doesn't repaint them */
.v-embed,.player{contain:paint}
.v-embed iframe{contain:strict}

/* --------------------------------------------------------------------------
   22. Proof band (landing page, below the form)
       No boxes, no dividers. Four columns of type separated by space,
       locked to a shared baseline with subgrid.
   -------------------------------------------------------------------------- */
.proof-band{padding-top:104px}
.proof-band .section-head{margin-bottom:64px}
.proof-band .section-head h2{font-size:clamp(30px,3.6vw,44px);line-height:1.18}
.proof-band .section-head h2 em{
  font-family:var(--font-mark);
  font-style:italic;font-weight:400;letter-spacing:.01em;
  background:none;color:var(--gold-light);-webkit-text-fill-color:var(--gold-light);
}

/* ---- four columns of type ---- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:auto auto auto auto auto;
  column-gap:52px;
}
.stat{
  display:grid;
  grid-row:span 5;
  grid-template-rows:subgrid;
  row-gap:0;
  padding:0;
  border:0;                       /* the space between columns is the separation */
}
@supports not (grid-template-rows:subgrid){
  .stat{display:block}
  .stat-what{min-height:1.5em}
}

.stat-fig{
  font-family:var(--font-mark);
  white-space:nowrap;
  font-size:clamp(50px,5.2vw,72px);
  line-height:.95;letter-spacing:.005em;
  color:var(--gold-light);
  margin:0;padding-bottom:.06em;
  font-variant-numeric:lining-nums tabular-nums;
  align-self:start;
}
.stat-what{
  font-size:15.5px;line-height:1.45;color:var(--white);font-weight:600;
  margin:16px 0 0;align-self:start;
}
.stat-when{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-muted);margin:6px 0 0;align-self:start;
}
/* short gold rule instead of a full-width divider */
.stat-who{
  position:relative;
  font-size:14.5px;font-weight:700;color:var(--white);
  margin:26px 0 0;padding-top:18px;
  align-self:end;
}
.stat-who::before{
  content:"";position:absolute;top:0;left:0;
  width:34px;height:2px;background:var(--gold);
  transform-origin:left;
}
.js-motion .stat.reveal .stat-who::before{transform:scaleX(0)}
.js-motion .stat.reveal.in .stat-who::before{
  transform:scaleX(1);
  transition:transform .7s cubic-bezier(.22,.61,.36,1) calc(var(--d,0ms) + 320ms);
}
.stat-biz{
  font-size:11.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--text-muted);margin:5px 0 0;align-self:start;
}

/* ---- featured quote ---- */
.pull-quote{
  max-width:700px;margin:88px auto 0;padding:0;text-align:center;border:0;background:none;
}
.pull-quote blockquote{
  margin:0;
  font-family:var(--font-mark);font-style:italic;
  font-size:clamp(22px,2.7vw,30px);line-height:1.45;
  color:var(--white);
}
.pull-quote .qm{
  color:var(--gold);
  font-style:normal;
  /* pulled in slightly so the marks hang rather than push the text off-centre */
  margin:0 -.06em;
}
.pull-quote figcaption{
  margin-top:26px;
  font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-light);
}
.pull-quote figcaption .sep{color:var(--gold-deep);margin:0 4px}
.pull-quote figcaption i{font-style:normal;color:var(--text-muted)}

/* ---- trust strip ---- */
.trust-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  column-gap:52px;
  margin-top:88px;padding-top:40px;
  border-top:1px solid var(--navy-line);
}
.trust-item{text-align:center}
.trust-item b{
  display:block;font-family:var(--font-mark);font-size:36px;line-height:1;
  white-space:nowrap;
  color:var(--gold-light);margin-bottom:10px;font-variant-numeric:lining-nums;
}
.trust-item span{
  font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-muted);
}

.proof-disclaimer{
  margin:52px auto 0;max-width:62ch;text-align:center;
  font-size:11.5px;line-height:1.7;color:var(--text-muted);opacity:.75;
}

@media (max-width:980px){
  .stat-row{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(10,auto);row-gap:52px}
  .trust-row{column-gap:32px}
}
@media (max-width:720px){
  .proof-band{padding-top:64px}
  .stat-row{grid-template-columns:1fr;grid-template-rows:none;row-gap:44px}
  .stat{grid-row:auto;display:block}
  .stat-what{min-height:0}
  .trust-row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:34px;column-gap:24px}
  .pull-quote{margin-top:56px}
}

/* ---- interview results strip (confirm page) ----
   The .stat-row above with a sixth subgrid row for the "Watch the interview" link.
   Sits after the .stat-row rules on purpose so these overrides win. */
.stat-row--links{
  grid-template-rows:repeat(6,auto);
  column-gap:40px;
  margin:0 auto 64px;
}
.stat-row--links .stat{grid-row:span 6}
.stat-row--links .stat-fig{font-size:clamp(44px,4.6vw,62px)}
.stat-link{margin:14px 0 0;align-self:start}
.stat-link a{
  font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--gold-light);border-bottom:1px solid rgba(227,196,99,.4);padding-bottom:2px;
  transition:border-color .18s ease,color .18s ease;
}
.stat-link a:hover,.stat-link a:focus-visible{color:var(--gold-pale);border-color:var(--gold-light)}
@media (max-width:980px){
  .stat-row--links{grid-template-rows:repeat(12,auto)}
}
@media (max-width:720px){
  /* stays compact on phones: two short columns instead of four tall rows */
  .stat-row--links{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:none;column-gap:20px;row-gap:36px;margin-bottom:48px}
  .stat-row--links .stat{grid-row:auto}
  .stat-row--links .stat-fig{font-size:38px}
  .stat-row--links .stat-what{font-size:14px;margin-top:10px}
  .stat-row--links .stat-who{margin-top:16px;padding-top:12px;font-size:14px}
  .stat-row--links .stat-link a{font-size:11px}
}

/* --------------------------------------------------------------------------
   14. Self-hosted video: VSL sound button, Q&A players, testimonial wall
   -------------------------------------------------------------------------- */
.player video{background:#000}
.vsl{position:relative}
/* VSL sound button: sits over the muted autoplay until someone taps it */
.unmute{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 26px;border:1px solid var(--gold-light);border-radius:0;
  background:rgba(201,162,39,.94);color:#0B1B33;
  font:800 14px/1.2 var(--font-body,inherit);letter-spacing:.08em;text-transform:uppercase;
  cursor:pointer;box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition:background .2s ease,transform .2s ease;
}
.unmute:hover{background:var(--gold-light);transform:translate(-50%,-50%) scale(1.03)}
.unmute:focus-visible{outline:3px solid #fff;outline-offset:3px}
.unmute-icon{
  width:18px;height:18px;flex:none;background:#0B1B33;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 0 0-2.5-4v8a4.5 4.5 0 0 0 2.5-4zM14 3.2v2.1a7 7 0 0 1 0 13.4v2.1a9 9 0 0 0 0-17.6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vsl.is-sound .unmute{display:none}
.unmute{white-space:nowrap}
@media (max-width:720px){.unmute{padding:12px 16px;font-size:11px;gap:9px;letter-spacing:.06em}}

.v-embed video{width:100%;height:100%;display:block;object-fit:cover;background:#000}
.v-grid .v-item:last-child:nth-child(odd){grid-column:1 / -1;max-width:454px;justify-self:center}

.wall-head{margin-top:88px}
.wall{columns:3 260px;column-gap:18px}
.wall-item{
  break-inside:avoid;margin:0 0 18px;
  border:1px solid var(--navy-line);background:rgba(5,13,26,.5);
  box-shadow:var(--shadow);
}
.wall-item img{width:100%;height:auto;display:block}
@media (max-width:720px){.wall-head{margin-top:64px}.v-grid .v-item:last-child:nth-child(odd){max-width:none}}