/* ============================================================
   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}
.kick::before{content:"";width:34px;height:1px;background:var(--g-love);display:inline-block}
.kick.center{justify-content:center}
.kick.center::after{content:"";width:34px;height:1px;background:var(--g-love);display:inline-block}

/* 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(24px,3vw,44px) 0}
.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}
/* 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}

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

@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}
}