/* ============================================================
   GUARANTEED PROSPERITY — Marketing Love Languages
   VERSION 4 · "THE LOVE SPECTRUM"
   ------------------------------------------------------------
   Gal's brief: keep the GP look, the same fonts, the same gold —
   but bring the LOVE in. Pink · magenta · violet carry the
   emotion; champagne gold stays as the prosperity anchor.
   Structure follows Gal's order: REGISTER first, coach last.
   Display: Montserrat caps · Body: Figtree
   ============================================================ */
:root{
  /* paper + ink — warmed a half-degree toward rose */
  --paper:#FFFFFF;
  --paper-2:#FDF5F8;
  --paper-3:#FBF1F5;
  --ink:#171219;
  --muted:#6C6373;

  /* GP champagne gold — the prosperity anchor, still here */
  --gold:#C9A45C;
  --gold-2:#E8CF9A;
  --gold-deep:#8F7134;

  /* THE LOVE SPECTRUM — the new heart of the page */
  --love:#E02A66;        /* vivid rose — primary action */
  --love-2:#FF7FB0;      /* light pink — highlights on dark */
  --love-3:#FFA8CB;      /* blush */
  --love-deep:#A8134D;   /* deep rose — accent text on white (7.3:1) */
  --violet:#7B3FD4;      /* purple */
  --violet-2:#B98CFF;
  --ember:#FF5B4A;       /* light red / coral */

  /* gradients */
  --g-love:linear-gradient(96deg,#E02A66 0%,#C2185B 32%,#7B3FD4 100%);
  --g-love-lit:linear-gradient(96deg,#FFA8CB 0%,#FF5C9E 44%,#C08BFF 100%);
  --g-btn:linear-gradient(165deg,#FF6BA6 0%,#E02A66 46%,#C2145A 100%);
  --g-gold:linear-gradient(96deg,var(--gold-2),var(--gold) 52%,var(--gold-deep));

  --line:rgba(23,18,25,.10);
  --line-soft:rgba(23,18,25,.06);
  --maxw:1180px;
  --r:18px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Figtree",system-ui,sans-serif;
  font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;                       /* clip, never hidden — sticky survives */
}
::selection{background:var(--love);color:#fff}
/* custom accent scrollbar */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-3)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#FF9CC4,#E02A66);border-radius:6px;border:2px solid var(--paper-3)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#E02A66,#7B3FD4)}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:3px;width:0;z-index:1000;
  background:linear-gradient(90deg,#FF9CC4,#E02A66 45%,#7B3FD4);
  box-shadow:0 0 14px rgba(224,42,102,.55)}

/* ============================================================
   TYPE
   ============================================================ */
.d1,.d2,.d3,.kick{font-family:"Montserrat",sans-serif;text-transform:uppercase}
.d1{font-size:clamp(30px,3.7vw,52px);font-weight:700;line-height:1.09;letter-spacing:.045em}
.d2{font-size:clamp(23px,2.9vw,38px);font-weight:700;line-height:1.14;letter-spacing:.05em}
.d3{font-size:clamp(16px,1.7vw,21px);font-weight:600;letter-spacing:.08em}
.kick{font-size:12.5px;font-weight:600;letter-spacing:.34em;color:var(--love-deep);display:inline-flex;align-items:center;gap:14px}
/* no rule before or after a kicker (Zman 7 Oct 2026: "All the dashes need to go away"); removed 22 Oct 2026 */
.kick.center{justify-content:center}

/* the accent word — love gradient on light, lifted on dark */
.love{background:var(--g-love);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}
.gold{background:var(--g-gold);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent}

.lead{font-size:clamp(17px,1.5vw,20px);color:var(--muted)}
.lead strong{color:var(--ink);font-weight:600}

/* ============================================================
   SHELLS + GRIDS
   ============================================================ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,4vw,44px)}
section{padding:clamp(64px,8vw,112px) 0;position:relative}
.hairline{border-top:1px solid var(--line-soft)}
.wash{position:relative;background:var(--paper-2)}
.wash::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(900px 480px at 82% -8%, rgba(224,42,102,.09), transparent 62%),
    radial-gradient(700px 420px at 8% 108%, rgba(123,63,212,.07), transparent 60%);
}
.wash > .wrap{position:relative;z-index:1}

.g2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px)}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px)}
@media(max-width:760px){ .g2,.g3{grid-template-columns:1fr} }

/* ============================================================
   HEADER
   ============================================================ */
header.bar{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line-soft)}
header.bar .wrap{display:flex;align-items:center;justify-content:space-between;padding-top:12px;padding-bottom:12px}
header.bar img{height:34px;display:block}

/* ============================================================
   PILLS — the vibrant call to action
   ============================================================ */
.pill{
  font-family:"Montserrat",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:12.5px;
  color:#fff;background:var(--g-btn);
  padding:12px 22px;border-radius:999px;text-decoration:none;display:inline-block;
  box-shadow:0 8px 26px rgba(224,42,102,.42), inset 0 1px 0 rgba(255,255,255,.34);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.pill:hover{transform:translateY(-2px);filter:saturate(1.12) brightness(1.04);
  box-shadow:0 14px 34px rgba(224,42,102,.5), inset 0 1px 0 rgba(255,255,255,.34)}
.pill:active{transform:translateY(1px)}
.pill.big{font-size:14px;padding:17px 34px}
/* gold variant — the prosperity anchor, used sparingly */
.pill.au{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1c1608;
  box-shadow:0 8px 26px rgba(201,164,92,.4), inset 0 1px 0 rgba(255,255,255,.5)}
.pill.au:hover{box-shadow:0 14px 34px rgba(201,164,92,.5), inset 0 1px 0 rgba(255,255,255,.5)}
button.pill{border:0;cursor:pointer;width:100%;font-family:"Montserrat",sans-serif}

/* the ARMED button — ready, then push */
@keyframes armed{
  0%{box-shadow:0 8px 26px rgba(224,42,102,.42), 0 0 0 0 rgba(224,42,102,.55), inset 0 1px 0 rgba(255,255,255,.34)}
  70%{box-shadow:0 8px 26px rgba(224,42,102,.42), 0 0 0 18px rgba(224,42,102,0), inset 0 1px 0 rgba(255,255,255,.34)}
  100%{box-shadow:0 8px 26px rgba(224,42,102,.42), 0 0 0 0 rgba(224,42,102,0), inset 0 1px 0 rgba(255,255,255,.34)}
}
/* 3s = exactly half the seat card's 6s breath, so the button pulses WITH the
   card (every second beat) instead of drifting against it */
button.pill.big{animation:armed 3s ease-out infinite}
button.pill.big:hover{transform:translateY(-2px) scale(1.012)}

/* ============================================================
   THE STAGE — hero. Register is the FIRST thing (Gal's #1 note).
   Desktop: copy + form left, Gal right. Mobile: copy + form only.
   ============================================================ */
.stage{
  position:relative;overflow:clip;
  background-color:#0B0610;color:#F9F3F7;
  display:flex;align-items:center;
  min-height:clamp(540px,76vh,900px);
  padding:0;                  /* the stage owns its own rhythm, not section{} */
}
/* the stage runs wider than the body grid — less dead air beside the copy */
.stage > .wrap{max-width:1340px;padding-left:clamp(24px,4.5vw,64px);padding-right:clamp(24px,4.5vw,64px)}
/* Gal — desktop only, masked into the dark so no text ever sits on him */
.stage-img{position:absolute;top:0;right:0;bottom:0;width:min(47%,700px);z-index:1}
.stage-img img{width:100%;height:100%;object-fit:cover;object-position:center 16%;display:block;
  filter:saturate(1.06) contrast(1.05);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 32%);
          mask-image:linear-gradient(90deg,transparent 0,#000 32%);
  animation:kenburns 30s ease-in-out infinite alternate;transform-origin:58% 30%;
}
/* the light — rose, violet and a breath of gold, alive on black */
.stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(900px 640px at 4% 76%, rgba(224,42,102,.32), transparent 62%),
    radial-gradient(780px 580px at 42% 4%, rgba(123,63,212,.30), transparent 60%),
    radial-gradient(620px 460px at 94% 94%, rgba(201,164,92,.16), transparent 62%),
    linear-gradient(180deg, rgba(11,6,16,.60) 0%, rgba(11,6,16,.08) 28%, rgba(11,6,16,0) 60%, rgba(11,6,16,.74) 100%);
}
/* mouse-reactive bloom — the hero breathes toward the pointer */
.stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(460px 460px at var(--mx,26%) var(--my,42%), rgba(255,124,176,.16), transparent 68%);
  transition:background .5s ease-out;
}
.stage-grid{position:relative;z-index:3;width:100%}
/* 46vw keeps the copy column clear of Gal at EVERY width above the
   1020px breakpoint — the card must never sit on top of him */
/* 50vw keeps the copy column clear of Gal at EVERY width above the
   1020px breakpoint — the card must never sit on top of him. Widened from
   600/46vw so the seat card reads bigger; re-verified across 1024→1920. */
.stage-copy{max-width:min(664px,50vw);padding:clamp(18px,1.9vw,28px) 0 clamp(24px,3vw,44px)}
/* narrower desktops: the date + time chips must share ONE row, or the
   second row pushes the seat card below the fold */
@media(min-width:1021px) and (max-width:1340px){
  .whenrow{gap:8px}
  .whenrow span{font-size:11.5px;letter-spacing:.12em;padding:9px 14px}
  /* GHL stacks its fields (+93px) once its iframe is under 561px wide, so
     the column gets a touch wider and the card a touch slimmer here */
  .stage-copy{max-width:min(664px,54vw)}
  .regcard{padding-left:18px;padding-right:18px}
}
.stage-kick{color:var(--love-3)}
.stage-kick::before,.stage-kick::after{background:linear-gradient(90deg,var(--love-2),var(--violet-2))}
.stage-title{
  font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:.035em;
  margin:clamp(12px,1.5vw,18px) 0 10px;
}
/* the love words — lit gradient + a slow light sweep across them */
.stage-love{
  background:linear-gradient(96deg,#FFA8CB 0%,#FF5C9E 30%,#C08BFF 62%,#FFA8CB 100%);
  background-size:220% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:sweep 7s ease-in-out infinite;
}
@keyframes sweep{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.stage-sub{font-size:clamp(16.5px,1.6vw,21px);color:rgba(249,243,247,.84);margin-bottom:clamp(14px,1.7vw,20px)}
.stage-sub strong{color:#fff;font-weight:600}

/* WHEN — date + time, the second thing Gal wants seen */
.whenrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:clamp(15px,1.8vw,20px)}
.whenrow span{
  position:relative;overflow:hidden;
  font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(11px,1.1vw,13px);letter-spacing:.16em;color:#FFF0F6;
  border:1px solid rgba(255,124,176,.5);border-radius:999px;padding:10px 18px;
  background:rgba(224,42,102,.18);backdrop-filter:blur(8px);
}
.whenrow span.au{border-color:rgba(232,207,154,.55);background:rgba(201,164,92,.2);color:#FBECCF}
/* WIDE DESKTOPS (1341px+) — the times ride BESIDE the date, not under it.
   1021-1340 already packs both chips onto one row; above 1340 the clamp lets
   them back up to 13px and the pair measured 670px against a 664px column, so
   the time chip dropped to its own line and pushed the seat card down. Only the
   TIME chip steps down here: the date stays the headline at 13px, the times
   read as its detail. Measured after: 269 + 10 + 332 = 611px inside 664, so it
   still has room for a longer day name (Wednesday) before it would wrap again.
   flex-wrap stays ON deliberately — a wrap is a safe fallback, nowrap would
   push the chips over Gal's portrait. display:flex on the chips keeps both the
   same height with the text centred once their font sizes differ. Zman 2026-09-18. */
@media(min-width:1341px){
  .whenrow span{display:flex;align-items:center}
  /* flex:1 hands the time chip the rest of the 664px column, so the row's
     right edge lands on the seat card's right edge (measured: 3px, the card's
     own border) instead of stopping 53px short. gp.js's --off is a LEFT offset,
     so the glide is unaffected. */
  .whenrow span.au{font-size:11.5px;letter-spacing:.12em;flex:1;justify-content:center}
}
/* THE GLIDE — ONE band of light crossing the whole row.
   The band is laid out in ROW space, not chip space: each chip pulls its own
   left edge back to the row origin (--off, measured in gp.js) and every chip
   runs the IDENTICAL keyframes with no delay. So at any instant the light sits
   at one place along the row — it slides out of the date chip, is hidden by the
   gap, and re-enters the time chip exactly where it left. Two chips, one glide.
   (Per-chip % transforms can never do this: different widths = different speeds.) */
.whenrow span::after{content:"";position:absolute;top:-45%;bottom:-45%;
  left:calc(-1 * var(--off,0px));
  width:var(--wave-band,200px);
  pointer-events:none;filter:blur(9px);
  background:radial-gradient(50% 58% at 50% 50%, rgba(255,255,255,.40), rgba(255,255,255,.11) 54%, transparent 76%);
  transform:translateX(calc(-1 * var(--wave-band,200px)));opacity:0;
  animation:whenwave 6.6s linear infinite}
.whenrow span.au::after{
  background:radial-gradient(50% 58% at 50% 50%, rgba(255,241,212,.44), rgba(255,241,212,.12) 54%, transparent 76%)}
/* LINEAR travel, not eased — an eased sweep whips through the middle and reads
   cheap. Constant speed + an opacity envelope = light passing across glass.
   Crosses in the first ~62% of the cycle, then rests: the pause is what keeps
   it feeling expensive instead of blinking at you. */
@keyframes whenwave{
  0%      {transform:translateX(calc(-1 * var(--wave-band,200px)));opacity:0}
  7%      {opacity:1}
  55%     {opacity:1}
  62%     {transform:translateX(var(--wave-end,120%));opacity:0}
  100%    {transform:translateX(var(--wave-end,120%));opacity:0}
}

/* ============================================================
   THE SEAT CARD — glass over the stage, register right here
   ============================================================ */
.regcard{
  position:relative;border-radius:22px;padding:clamp(20px,2.1vw,26px);
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.18);
  /* NO backdrop-filter here, deliberately. The card sits over the stage's
     smooth dark gradient, so blurring that backdrop is visually a no-op
     (measured: 0.03% of pixels differ) — but because Gal's portrait behind
     it ken-burns forever, the blur was being recomputed EVERY frame and cost
     us nearly half the hero's frame rate (32fps → 60fps with it gone).
     If a future backdrop ever gets busy enough to need real glass, put the
     blur on a STATIC layer, never on one that scales. */
  box-shadow:0 44px 110px rgba(0,0,0,.6), 0 0 80px rgba(224,42,102,.22),
             inset 0 1px 0 rgba(255,255,255,.2);
  overflow:hidden;
  /* ONE BREATH — the whole card. Scale, outer glow and the inner bloom below
     all run the same 6s cycle in phase, so it reads as a single living object
     rather than three things pulsing at each other. Scale stays under 1% —
     enough to catch the eye, not enough to soften the type. */
  animation:seatbreath 6s ease-in-out infinite;
  will-change:transform;
}
@keyframes seatbreath{
  0%,100%{transform:scale(1);
    box-shadow:0 44px 110px rgba(0,0,0,.6), 0 0 56px rgba(224,42,102,.16), inset 0 1px 0 rgba(255,255,255,.2)}
  50%    {transform:scale(1.009);
    box-shadow:0 48px 118px rgba(0,0,0,.62), 0 0 112px rgba(224,42,102,.38), inset 0 1px 0 rgba(255,255,255,.22)}
}
.regcard::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:2;
  background:linear-gradient(90deg,#FF9CC4,#E02A66 40%,#7B3FD4 75%,var(--gold-2));}
/* THE SEAT CARD BREATHES — a slow rose bloom behind the form so the eye
   keeps coming back to it. Clipped by the card's own overflow, so it reads
   as light moving inside the glass rather than a halo around it. */
.regcard::after{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side, rgba(224,42,102,.34), rgba(123,63,212,.10) 55%, transparent 72%);
  animation:seatbloom 6s ease-in-out infinite}
@keyframes seatbloom{
  0%,100%{transform:scale(.86);opacity:.38}
  50%    {transform:scale(1.06);opacity:.80}
}
.regcard > *{position:relative;z-index:1}
.regcard h3{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:clamp(15px,1.5vw,18px);letter-spacing:.09em;color:#fff}
/* slim live countdown inside the card */
.tick-line{display:flex;align-items:center;gap:9px;margin-top:10px;
  font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:11.5px;letter-spacing:.15em;color:var(--love-3)}
.tick-line .dotp{width:7px;height:7px;border-radius:50%;background:var(--love-2);
  box-shadow:0 0 0 0 rgba(255,124,176,.7);animation:livedot 2s ease-out infinite}
@keyframes livedot{70%{box-shadow:0 0 0 9px rgba(255,124,176,0)}100%{box-shadow:0 0 0 0 rgba(255,124,176,0)}}
.regcard form{display:grid;gap:12px;margin-top:15px;position:relative;z-index:1}
.regcard .pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.regcard .field input{padding:13px 15px}
@media(max-width:520px){ .regcard .pair{grid-template-columns:1fr} }
/* bright fields — they light up against the glass */
.regcard .field label{color:rgba(249,243,247,.7)}
.regcard .field input{
  background:#FFFDFE;border-color:rgba(255,124,176,.5);color:#171219;
  box-shadow:0 0 0 1px rgba(255,156,196,.16), 0 6px 18px rgba(0,0,0,.34);
}
.regcard .field input:focus{border-color:var(--love-2);
  box-shadow:0 0 0 4px rgba(255,124,176,.32), 0 6px 18px rgba(0,0,0,.34)}
.regcard .consent{color:rgba(249,243,247,.72)}
.regcard .consent input{accent-color:var(--love)}
.regcard .fine{font-size:12.5px;color:rgba(249,243,247,.6);text-align:center}
/* DESKTOP (2026-09-14, Zman: the whole card must be visible on landing):
   the live countdown rides beside the heading instead of on its own line.
   Flex-wrap, so a narrow card or a hidden countdown just falls back to rows. */
@media(min-width:1021px){
  .regcard{display:flex;flex-wrap:wrap;align-items:center;column-gap:14px}
  .regcard > *{flex:1 1 100%}
  .regcard > h3{flex:0 0 auto}
  .regcard > .tick-line{flex:0 0 auto;margin:0 0 0 auto}
}

/* SHORT LAPTOPS (1366x768, 1280x800) — the register button must never fall
   below the fold. Drop the centring gap and tighten the whole stack. */
@media(min-width:1021px) and (max-height:830px){
  .stage{min-height:0}
  .stage-copy{padding:clamp(14px,2.4vh,26px) 0}
  .stage-title{font-size:clamp(28px,3.1vw,42px)}
  .stage-sub{font-size:17px;margin-bottom:12px}
  .whenrow{margin-bottom:12px}
  .whenrow span{padding:8px 15px;font-size:11.5px}
  .regcard{padding:18px}
  .regcard h3{font-size:16px}
  .tick-line{margin-top:8px}
  .regcard form{gap:10px;margin-top:12px}
  .regcard .pair{gap:10px}
  .regcard .field input{padding:11px 14px;font-size:15px}
  .regcard .pill.big{padding:14px 30px}
  /* the whole seat card, fine print and bonus included, stays above the fold
     (2026-09-14): the header slims, the small print tightens */
  header.bar .wrap{padding-top:8px;padding-bottom:8px}
  .regcard .ghlform{margin-top:10px}
  .regcard .bonus{font-size:12px;line-height:1.5;margin-top:4px}
}
/* very short laptops (1366x768) — one more notch */
@media(min-width:1021px) and (max-height:790px){
  .stage-copy{padding:clamp(12px,1.8vh,20px) 0}
  .stage-title{font-size:clamp(26px,2.9vw,38px)}
  .stage-sub{font-size:16px;margin-bottom:10px}
  .regcard{padding:16px}
  .regcard form{gap:9px;margin-top:10px}
  .regcard .field input{padding:10px 13px}
}
/* the shortest real browser windows (a 1366x768 or 1280x720 screen once the
   browser's own bars take their share, ~630-700px tall): the headline runs on
   ONE line and everything above the card takes its tightest setting */
@media(min-width:1021px) and (max-height:750px){
  .stage-copy{padding:10px 0 14px}
  .stage-kick{font-size:11px}
  .stage-title{font-size:clamp(24px,2.35vw,32px);margin:8px 0 6px;white-space:nowrap}
  .stage-title br{display:none}
  .stage-love{margin-left:.28em}
  .stage-sub{font-size:15px;margin-bottom:9px}
  .whenrow{margin-bottom:10px}
  .whenrow span{padding:7px 13px;font-size:11px}
  .regcard{padding:12px 18px}
  /* the fine print sits in the form's transparent bottom padding, below the
     button's glow; no hard clip, so the glow still fades out naturally */
  .regcard .ghlform + .fine{margin-top:-10px;font-size:11.5px}
}
@media(min-width:1021px) and (max-height:680px){
  header.bar .wrap{padding-top:5px;padding-bottom:5px}
  .stage-copy{padding:8px 0 10px}
  .stage-title{font-size:clamp(24px,2vw,27px);margin:6px 0 4px}
  .whenrow{margin-bottom:8px}
  .whenrow span{padding:6px 12px}
  .regcard{padding-bottom:9px}
  .regcard .bonus{margin-top:2px}
}
@media(min-width:1021px) and (max-height:620px){
  header.bar .wrap{padding-top:3px;padding-bottom:3px}
  .stage-copy{padding:6px 0 8px}
  .stage-kick{font-size:10px}
  .stage-title{margin:4px 0 2px}
  .stage-sub{font-size:14px;margin-bottom:6px}
  .whenrow{margin-bottom:6px}
  .whenrow span{padding:5px 12px}
  .regcard{padding-top:10px}
}

@media(max-width:1020px){
  .stage{min-height:0;display:block}
  .stage-img{display:none}                 /* Gal's photo is NOT the first thing on mobile */
  .stage::before{
    background:
      radial-gradient(760px 560px at 6% 12%, rgba(224,42,102,.34), transparent 62%),
      radial-gradient(680px 520px at 92% 78%, rgba(123,63,212,.32), transparent 60%),
      radial-gradient(520px 400px at 50% 104%, rgba(201,164,92,.14), transparent 62%),
      linear-gradient(180deg, rgba(11,6,16,.5) 0%, rgba(11,6,16,0) 34%, rgba(11,6,16,.6) 100%);
  }
  .stage-copy{max-width:none;padding:clamp(20px,4vw,32px) 0 clamp(32px,6vw,48px)}
}

/* PHONE — every pixel above the fold is the offer. Tighten hard. */
@media(max-width:760px){
  .kick{font-size:10.5px;letter-spacing:.16em;gap:9px}
  .kick::before,.kick::after{width:20px}
  .stage-title{font-size:clamp(30px,8.4vw,40px);margin-top:10px}
  .stage-sub{font-size:17px;margin-bottom:14px}
  .whenrow{gap:8px;margin-bottom:14px}
  .whenrow span{padding:9px 14px;font-size:11px;letter-spacing:.12em}
  .regcard{padding:18px}
  .regcard h3{font-size:16px}
  .regcard form{gap:11px;margin-top:12px}
  .regcard .field input{padding:12px 14px}
  .field label{font-size:10px;letter-spacing:.18em}
}

/* ============================================================
   FORMS (shared)
   ============================================================ */
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-size:10.5px;
  letter-spacing:.22em;color:var(--muted);font-weight:700}
.field input{
  width:100%;min-width:0;
  background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:15px 16px;color:var(--ink);font-family:"Figtree",sans-serif;font-size:16px;outline:none;
  box-shadow:inset 0 1px 4px rgba(23,18,25,.05);
  transition:border-color .18s, box-shadow .18s;
}
.field input:focus{border-color:var(--love);box-shadow:0 0 0 3px rgba(224,42,102,.2)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--muted)}
.consent input{accent-color:var(--love);margin-top:4px}

/* ============================================================
   CARDS
   ============================================================ */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  box-shadow:0 14px 44px rgba(23,18,25,.08)}
.card.pop{position:relative;border-color:rgba(224,42,102,.32);
  box-shadow:0 34px 90px rgba(23,18,25,.16), 0 0 60px rgba(224,42,102,.12);
  transition:transform .45s cubic-bezier(.2,.6,.2,1), box-shadow .45s ease}
.card.pop::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  border-radius:var(--r) var(--r) 0 0;background:var(--g-love)}
.card.pop:hover{transform:translateY(-6px);
  box-shadow:0 44px 110px rgba(23,18,25,.22), 0 0 74px rgba(224,42,102,.2)}
/* the "what you won't get" card stays gold — the sober one */
.card.pop.au{border-color:rgba(201,164,92,.42);box-shadow:0 34px 90px rgba(23,18,25,.14), 0 0 60px rgba(201,164,92,.14)}
.card.pop.au::before{background:var(--g-gold)}
.card.pop.au:hover{box-shadow:0 44px 110px rgba(23,18,25,.2), 0 0 74px rgba(201,164,92,.2)}

/* ============================================================
   REVEAL
   ============================================================ */
[data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.6,.2,1), transform .8s cubic-bezier(.2,.6,.2,1)}
[data-reveal].in{opacity:1;transform:none}

/* ============================================================
   COUNTDOWN
   ============================================================ */
.count{display:flex;gap:clamp(10px,2vw,18px)}
.count .unit{text-align:center;min-width:74px;padding:14px 10px;border:1px solid var(--line);
  border-radius:14px;background:#fff;box-shadow:0 8px 24px rgba(23,18,25,.06)}
.count .n{font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(24px,2.6vw,34px);
  line-height:1;background:var(--g-love);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;font-variant-numeric:tabular-nums}
.count .u{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-size:10px;
  letter-spacing:.22em;color:var(--muted);margin-top:7px}

/* ============================================================
   QUOTES
   ============================================================ */
.quote{border-left:2px solid var(--love);padding:6px 0 6px 22px}
.quote p{font-size:16.5px;color:var(--ink)}
.quote .who{margin-top:12px;font-family:"Montserrat",sans-serif;text-transform:uppercase;
  font-size:11px;letter-spacing:.2em;color:var(--love-deep)}

/* ============================================================
   AGENDA — editorial numerals
   ============================================================ */
.agenda{gap:36px 60px}
.agenda .tick{display:flex;gap:20px;align-items:flex-start;counter-increment:ag}
.agenda .tick::before{
  content:counter(ag,decimal-leading-zero);
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:clamp(20px,1.9vw,26px);line-height:1.1;letter-spacing:.05em;
  background:var(--g-love);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;flex:0 0 48px;
}
.agenda .tick h4{font-size:clamp(18px,1.6vw,21px);font-weight:700;margin-bottom:8px}
.agenda .tick p{font-size:16.5px;line-height:1.62;color:var(--muted)}
.agenda .tick:last-child{counter-increment:none}
.agenda .tick:last-child::before{content:"→"}
.agenda a{color:var(--love-deep);text-decoration:none;border-bottom:1px solid rgba(168,19,77,.3);
  transition:border-color .18s}
.agenda a:hover{border-color:var(--love)}

/* ============================================================
   VIDEO TILES (lite YouTube embeds)
   ============================================================ */
.yt{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;cursor:pointer;
  background:#0B0610 center/cover no-repeat;border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(23,18,25,.12)}
.yt::after{content:"";position:absolute;inset:0;pointer-events:none;   /* never swallow a click */
  background:linear-gradient(180deg,transparent 55%,rgba(0,0,0,.55));transition:background .2s}
.yt:hover::after{background:linear-gradient(180deg,rgba(0,0,0,.06) 55%,rgba(0,0,0,.6))}
.yt.playing::after{display:none}
.yt.playing{cursor:default}
.yt .play{position:absolute;left:14px;bottom:12px;width:46px;height:46px;border-radius:50%;
  background:var(--g-btn);display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(224,42,102,.5), inset 0 1px 0 rgba(255,255,255,.4);z-index:2;
  transition:transform .18s}
.yt:hover .play{transform:scale(1.12)}
.yt .play svg{width:15px;height:15px;margin-left:2px}
.yt .dur{position:absolute;right:10px;bottom:10px;z-index:2;font-family:"Montserrat",sans-serif;
  font-size:11px;font-weight:700;letter-spacing:.08em;color:#fff;background:rgba(0,0,0,.62);
  padding:4px 9px;border-radius:7px}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt.hero-yt{border-radius:var(--r);box-shadow:0 30px 80px rgba(23,18,25,.22), 0 0 60px rgba(224,42,102,.14)}
.vtitle{margin-top:12px;font-family:"Montserrat",sans-serif;text-transform:uppercase;font-size:12px;
  font-weight:700;letter-spacing:.08em;line-height:1.5;color:var(--ink)}
.bigvid{max-width:940px;margin:0 auto}
/* vertical proof panes — iPhone footage in iPhone frames */
.vertwall{max-width:1040px;margin:0 auto}
.yt.vert{aspect-ratio:9/16;max-width:300px;margin:0 auto;display:block}
.vertcell .quote{max-width:300px;margin:18px auto 0}

/* ============================================================
   STATS
   ============================================================ */
.statgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,34px);
  text-align:center;margin:clamp(38px,4.5vw,58px) auto;max-width:1040px}
.stat .n{font-family:"Montserrat",sans-serif;font-weight:700;font-size:clamp(30px,4.2vw,52px);
  line-height:1;font-variant-numeric:tabular-nums;
  background:var(--g-love);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat .u{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-size:11px;
  letter-spacing:.2em;color:var(--muted);margin-top:10px}
@media(max-width:860px){ .statgrid{grid-template-columns:1fr 1fr;gap:30px 14px} }

/* ============================================================
   THE ROOM — seminar strip, drifting past
   ============================================================ */
.roomstrip{margin-top:clamp(34px,4vw,50px)}
.roomstrip.marquee{display:block;overflow:hidden;padding:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.roomtrack{display:flex;width:max-content;animation:roomdrift 95s linear infinite}
.roomset{display:flex;gap:10px;padding-right:10px}
.roomstrip figure{position:relative;flex:0 0 auto;margin:0;overflow:clip;border-radius:14px;
  height:clamp(230px,24vw,340px);width:clamp(280px,26vw,420px);
  box-shadow:0 16px 42px rgba(23,18,25,.16)}
.roomstrip figure.wide{width:clamp(420px,40vw,640px)}
.roomstrip img{width:100%;height:100%;object-fit:cover;display:block;
  filter:contrast(1.06) saturate(1.14) brightness(1.02);transition:transform .6s ease}
.roomstrip figure:hover img{transform:scale(1.045)}
.roomstrip figure::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:14px;
  background:linear-gradient(180deg,rgba(11,6,16,.10) 0%,transparent 32%,transparent 55%,rgba(11,6,16,.46) 100%)}
.roomstrip figcaption{position:absolute;left:10px;bottom:10px;z-index:1;
  font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:10px;letter-spacing:.18em;color:#fff;
  background:rgba(11,6,16,.55);backdrop-filter:blur(6px);
  padding:6px 11px;border-radius:999px;white-space:nowrap}
.roomstrip.marquee:hover .roomtrack{animation-play-state:paused}
@keyframes roomdrift{to{transform:translateX(-50%)}}
@media(max-width:900px){ .roomstrip figure,.roomstrip figure.wide{height:240px} }

/* ============================================================
   YOUR COACH — bio band (bottom of the page, Gal's call)
   ============================================================ */
.bioband{display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:clamp(30px,5vw,68px);
  align-items:center;max-width:1060px;margin:0 auto}
.bioband .photo{position:relative;min-width:0;overflow:clip;border-radius:18px;aspect-ratio:4/5;
  box-shadow:0 26px 70px rgba(23,18,25,.22)}
.bioband .photo img{width:100%;height:100%;object-fit:cover;display:block;
  animation:kenburns 32s ease-in-out infinite alternate;transform-origin:50% 35%}
@keyframes kenburns{0%{transform:scale(1.05)}100%{transform:scale(1.13)}}
@media(max-width:860px){
  .bioband{grid-template-columns:1fr}
  .bioband .photo{max-width:430px;margin:0 auto}
}

/* ============================================================
   DARK BEATS — the stage-lit punctuation between white sections
   ============================================================ */
.dark{position:relative;overflow:clip;color:#F8F1F6;background-color:#0C0710;
  border-top:1px solid rgba(224,42,102,.16)}
/* real bokeh texture, hue-shifted out of gold and into the love spectrum */
.dark::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url('atm-bokeh.jpg') center/cover no-repeat;
  filter:hue-rotate(278deg) saturate(1.6) brightness(.9);opacity:.72}
/* scrim LAST in the stack = underneath the glows. Colour rides on top, so the
   rose/violet light actually reads; the centre still stays dark for the text. */
.dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(780px 470px at 8% 106%, rgba(224,42,102,.34), transparent 64%),
    radial-gradient(700px 450px at 92% -6%, rgba(123,63,212,.34), transparent 64%),
    radial-gradient(132% 112% at 50% 44%, rgba(12,7,16,.88) 0%, rgba(12,7,16,.83) 34%, rgba(12,7,16,.42) 100%)}
.dark > .wrap{position:relative;z-index:2}
.dark--marble::before{background-image:url('atm-marble.jpg');filter:hue-rotate(268deg) saturate(1.55) brightness(.95);opacity:.68}
.dark--flip::before{background-position:16% 90%}
.dark--flip::after{background:
    radial-gradient(780px 470px at 90% 104%, rgba(224,42,102,.34), transparent 64%),
    radial-gradient(700px 450px at 8% -6%, rgba(123,63,212,.32), transparent 64%),
    radial-gradient(132% 112% at 50% 46%, rgba(12,7,16,.88) 0%, rgba(12,7,16,.83) 34%, rgba(12,7,16,.42) 100%)}
/* type flips */
.dark .d1,.dark .d2,.dark .d3{color:#FBF5F9}
.dark .lead{color:rgba(248,241,246,.74)}
.dark .lead strong{color:#fff}
.dark .kick{color:var(--love-3)}
.dark .kick::before,.dark .kick::after{background:linear-gradient(90deg,var(--love-2),var(--violet-2))}
/* accent words lift bright — deep rose is invisible on black */
.dark .love{background:var(--g-love-lit);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.dark .gold{background:linear-gradient(96deg,var(--gold-2) 0%,var(--gold) 58%,#E8CF9A 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dark .stat .n{background:var(--g-love-lit);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.dark .stat .u{color:rgba(248,241,246,.58)}
.dark .vtitle{color:#F8F1F6}
.dark .yt{border-color:rgba(224,42,102,.24)}
.dark .card{background:rgba(255,255,255,.05);border-color:rgba(224,42,102,.24);
  box-shadow:0 24px 64px rgba(0,0,0,.52)}
.dark .field label{color:rgba(248,241,246,.64)}
/* bright fillings on black too — a field must LOOK fillable */
.dark .field input{background:#FFFDFE;border-color:rgba(255,124,176,.5);color:#171219;
  box-shadow:0 0 0 1px rgba(255,156,196,.16), 0 6px 18px rgba(0,0,0,.34)}
.dark .field input:focus{border-color:var(--love-2);
  box-shadow:0 0 0 4px rgba(255,124,176,.32), 0 6px 18px rgba(0,0,0,.34)}
.dark .consent{color:rgba(248,241,246,.64)}
.dark .quote{border-left-color:var(--love-2)}
.dark .quote p{color:#F8F1F6}
.dark .quote .who{color:var(--love-3)}
.dark .count .unit{background:rgba(255,255,255,.06);border-color:rgba(224,42,102,.24)}
.dark .count .n{background:var(--g-love-lit);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.dark .count .u{color:rgba(248,241,246,.55)}

/* ============================================================
   FAQ
   ============================================================ */
details.card{padding:20px 26px}
details.card summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
details.card summary::-webkit-details-marker{display:none}
details.card summary::after{content:"+";font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:20px;line-height:1;color:var(--love);transition:transform .25s ease}
details.card[open] summary::after{transform:rotate(45deg)}
details.card p{color:var(--muted);margin-top:12px;font-size:15.5px}

/* ============================================================
   FOOTER — grounded, no exits
   ============================================================ */
footer{border-top:1px solid rgba(224,42,102,.18);background:#0A0508;padding:56px 0 70px;
  color:rgba(248,241,246,.5);font-size:14px}
footer img{height:30px;display:block;margin-bottom:18px}
footer a{color:var(--love-3);text-decoration:none}
footer a:hover{text-decoration:underline}

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
#stickycta{position:fixed;left:0;right:0;bottom:0;z-index:950;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:none}
#stickycta .pill{width:100%;text-align:center}
@media(max-width:760px){ #stickycta.show{display:block} }

/* ============================================================
   REDUCED MOTION — calm it down, never freeze it dead
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-reveal]{transition:opacity .3s;transform:none}
  .stage-img img,.bioband .photo img{animation:none}
  .roomtrack{animation:roomdrift 300s linear infinite}
  .stage-love{animation:none;background-position:0 0}
  button.pill.big{animation:none}
  .tick-line .dotp{animation:none}
  .regcard{animation:none}
  .regcard::after{animation:none;opacity:.35;transform:none}
  .whenrow span::after{animation:none;opacity:0}
}

/* ============================================================
   THE EMBEDDED GHL REGISTRATION FORM
   ------------------------------------------------------------
   Both seat forms are GoHighLevel's own form in an iframe, dressed
   through the form's Custom CSS box to match this card. Two notes:

   · the height is set by GHL's form_embed.js once it loads, so we
     reserve the measured height up front — otherwise the card
     collapses and then snaps open, which is worst on a phone
     (345px = the two-column layout, 418px = stacked under 560px)
   · the iframe is a sealed cross-origin box: the card's glow,
     breathing and focus effects stop at its edge. That is the
     accepted cost of the free trigger.
   ============================================================ */
/* THE CLIP (2026-09-14, Zman: "the card cuts off"): GHL paints ~53px of
   blank padding above the first label inside its iframe. We can't style it
   cross-origin, so the wrapper hides it: the iframe slides up by --ghl-clip
   and overflow:hidden trims the strip. The wrapper's height shrinks by the
   same amount, so nothing at the bottom of the form is lost and
   form_embed.js auto-sizing still works. Proven first on Wavelength.
   If GHL ever changes the form's padding, RE-MEASURE, don't guess. */
.ghlform{ --ghl-clip:44px; margin-top:12px; overflow:hidden; min-height:calc(345px - var(--ghl-clip)); container-type:inline-size; }
.ghlform iframe{
  display:block;
  width:100%;
  min-height:345px;
  margin-top:calc(-1 * var(--ghl-clip));
  border:0;
  overflow:hidden;
  background:transparent;
  color-scheme:normal;   /* don't let a dark-mode phone re-tint the fields */
}
/* Under 561px wide GHL stacks the fields (its own max-width:560px query,
   read against the iframe) and its top padding grows to ~78px. The
   container query reads the SAME width, so the two always switch together. */
@container (max-width:560px){
  .ghlform iframe{ --ghl-clip:68px }
}
@media(max-width:560px){
  .ghlform{ min-height:370px }   /* stacked form 438px minus the 68px clip */
  .ghlform iframe{ min-height:418px }
}
/* the form's own ~30px bottom padding already spaces the fine print */
.regcard .ghlform + .fine{ margin-top:0 }

/* BONUS LINE — the email+WhatsApp lessons expectation-setter under both
   register forms (consent-at-signup, WhatsApp mirror plan 2026-07-22) */
.bonus{font-size:13px;line-height:1.6;text-align:center;color:rgba(249,243,247,.66)}
.bonus strong{color:var(--gold-2);font-weight:600}
.fine + .bonus{margin-top:8px}
.ghlform + .bonus{margin-top:14px}