/* ============================================================
   GUARANTEED PROSPERITY: THE MARKETING LOVE LANGUAGES, WATCH NOW (/watch)
   PAGE LAYER · loads AFTER v4.css + v4-pages.css
   Copied from the marketingreplay page's replay.css on 22 Oct 2026; the
   next-live-session states came out, the tap-for-sound button and the
   Strategy button's timing went in (section 3).
   ------------------------------------------------------------
   v4.css already owns the palette, the type scale, .card, .pill,
   .quote, .count, the .dark band system, the footer and the
   reduced-motion block. This file only adds what the replay page
   has that no other page in the funnel has:

     · .rbar        the pinned expiry bar (logo + the stated deadline)
     · .stagevid    the "almost nothing above the player" hero
     · .player      the YouTube replay frame + its closed state
     · .proofband   what members are saying, directly under the player
     · .painlist / .teaselist  the offer bridge (no price on it)
     · .reviewwall  the written reviews, beside the close
     · #stickyoffer the slim CTA bar that slides in
   ADDS ONLY, never overrides v4.css, so the branding is identical
   to funnel/registration/ by construction.
   ============================================================ */

:root{
  --rbar-h:54px;         /* the pinned bar, measured back into JS */
  --sticky-h:0px;        /* set by JS while the sticky CTA is shown */
}

/* the sticky CTA must never sit on top of the last section's content */
body{padding-bottom:var(--sticky-h);transition:padding-bottom .28s ease}

/* If JS never runs, every [data-reveal] block would stay at opacity 0 and the
   page would look empty. Undo the reveal for those visitors up front. */
.no-js [data-reveal]{opacity:1;transform:none}

/* ============================================================
   1 · THE PINNED EXPIRY BAR
   The first thing on the page and the first thing they read:
   this replay has a deadline, so watching later is not an option.
   ============================================================ */
.rbar{
  position:sticky;top:0;z-index:900;
  background:rgba(12,7,16,.94);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(224,42,102,.28);
  box-shadow:0 10px 34px rgba(12,7,16,.18);
}
.rbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-top:10px;padding-bottom:10px;min-height:var(--rbar-h)}
.rbar img{height:26px;display:block;flex:0 0 auto}

.rclock{display:flex;align-items:center;gap:10px;min-width:0}
.rclock .dotp{width:8px;height:8px;border-radius:50%;background:var(--love-2);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(255,127,176,.55);animation:rpulse 2.4s ease-out infinite}
@keyframes rpulse{
  0%{box-shadow:0 0 0 0 rgba(255,127,176,.5)}
  70%{box-shadow:0 0 0 9px rgba(255,127,176,0)}
  100%{box-shadow:0 0 0 0 rgba(255,127,176,0)}
}
.rclock .lab{font-family:"Montserrat",sans-serif;text-transform:uppercase;
  font-size:10.5px;letter-spacing:.2em;font-weight:600;color:rgba(248,241,246,.6);
  white-space:nowrap}
.rclock .num{font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;
  letter-spacing:.06em;color:#FBF5F9;white-space:nowrap}
.rclock .num.short{display:none}
.rclock.urgent .num{color:var(--love-2)}
.rclock.closed .num{color:var(--gold-2)}
.rclock.closed .dotp{background:var(--gold);animation:none}
/* closed is a single sentence, so the long/short pair collapses to one */
.rclock.closed .num.short{display:none}
.rclock.closed .num.long{display:inline}

@media(max-width:600px){
  .rbar .wrap{gap:10px}
  .rbar img{height:21px}
  .rclock .num{font-size:13px}
  /* the label stays: "Sat 22 Aug" on its own says nothing */
  .rclock .lab{font-size:9.5px;letter-spacing:.14em}
  .rclock .num.long{display:none}
  .rclock .num.short{display:inline}
}

/* ============================================================
   2 · THE STAGE — the video, almost immediately
   Everything above the player is deliberately one kicker and one
   line, so the player itself clears the fold on a laptop and the
   line + button under it are readable without scrolling.
   ============================================================ */
.stagevid{padding:clamp(20px,2.6vw,32px) 0 clamp(30px,4vw,48px)}
.stagevid .top{text-align:center;max-width:760px;margin:0 auto clamp(16px,2vw,22px)}
.stagevid h1{font-size:clamp(22px,2.7vw,34px);margin:12px 0 0}

/* The frame is sized so the player and the line under it fit one laptop
   screen: the width is driven by the height that is actually left over, and
   only then capped by the column. min() keeps it honest on a phone.
   22 Oct 2026 (Zman: "the video bigger so it stands out more"): the reserve
   went from 400px to 260px. Above the player: 54 bar + ~32 stage padding +
   ~72 kicker and headline + 22 gap = 180; under it for the first quarter only
   the one-line "Watch it now" (~50) + air. At 1440x900 the player is now the
   full column (~1090px, was 889); the Strategy button arrives at 25% and may
   sit just under the fold, where the sticky bar carries it too. */
.playerwrap{
  width:min(100%, calc((100svh - 260px) * 16 / 9));
  min-width:min(100%,560px);
  max-width:1100px;margin:0 auto;
}
.player{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#08040B;border:1px solid rgba(224,42,102,.4);
  /* a soft rose glow under the frame, so it reads as THE thing on the page */
  box-shadow:0 34px 100px rgba(224,42,102,.2), 0 40px 110px rgba(12,7,16,.34), 0 0 0 1px rgba(255,255,255,.03) inset;
}
/* phones: the player takes nearly the full width (8px either side) */
@media(max-width:600px){
  .playerwrap{margin:0 -12px;width:auto;min-width:0}
  .player{border-radius:12px}
}
/* ------------------------------------------------------------
   THE PLAYER'S FACE — the poster, then the real YouTube upload
   The stage is the same lite-embed idea as the proof tiles
   (.yt in v4.css), sized as the hero: one big centred button on
   the poster, and the iframe mounts UNDER it so the poster never
   flashes to black while YouTube boots.
   ------------------------------------------------------------ */
.ytstage{position:absolute;inset:0;cursor:pointer;
  background:#08040B center/cover no-repeat}
.ytstage::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 50% 50%,rgba(8,4,11,.06),rgba(8,4,11,.26));
  transition:background .25s}
.ytstage:hover::after{background:radial-gradient(120% 90% at 50% 50%,rgba(8,4,11,0),rgba(8,4,11,.18))}
.ytstage:focus-visible{outline:2px solid #FFA8CB;outline-offset:-3px}
/* the button sits on Gal's chest (84.6% / 50%), not dead centre: the cover's headline runs
   through the middle and the button hid it (Zman 16 Sep). The cover art is drawn around this spot. */
.ytstage .bigplay{position:absolute;left:84.6%;top:50%;z-index:2;
  width:clamp(52px,7.4vw,92px);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--g-btn);display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 50px rgba(224,42,102,.5), inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform .18s ease}
.ytstage:hover .bigplay{transform:translate(-50%,-50%) scale(1.08)}
.ytstage .bigplay svg{width:32%;height:32%;margin-left:8%}
.ytstage .ytdur{position:absolute;right:12px;bottom:12px;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:5px 10px;border-radius:7px}
/* phones: the running time stays small, so it does not sit on Gal's hands */
@media(max-width:600px){
  .ytstage .ytdur{font-size:9px;padding:3px 6px;right:7px;bottom:7px;border-radius:5px}
}
/* Two stages, on purpose. `loading` = pressed, YouTube is booting: the button
   and the length go, the POSTER STAYS, so the frame never flashes to black in
   the second between the press and the first video frame. `playing` = the
   iframe is really there, and the still underneath it is no longer needed. */
.ytstage.loading{cursor:default}
.ytstage.loading .bigplay,
.ytstage.loading .ytdur{opacity:0;transition:opacity .18s ease;pointer-events:none}
.ytstage.playing{cursor:default;background-image:none!important}
.ytstage.playing::after,
.ytstage.playing .bigplay,
.ytstage.playing .ytdur{display:none}
/* NOT `#ytmount:empty{display:none}` — an <iframe> has no child nodes, so
   :empty matches it too and that rule would hide the player itself. The div
   is transparent while it is empty; clicks bubble to .ytstage either way. */
#ytmount{position:absolute;inset:0;z-index:3}
.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
  background:#08040B}
@media(prefers-reduced-motion:reduce){
  .ytstage::after,.ytstage .bigplay{transition:none}
  .ytstage:hover .bigplay{transform:translate(-50%,-50%)}
}

/* (the "REPLAY · GAL EZRA" chip that used to sit on the frame came off in v3b:
   the poster art carries the identity now, and the chip landed on its logo) */

/* the line + the one button, directly under the player */
.underplayer{max-width:820px;margin:clamp(18px,2.4vw,26px) auto 0;text-align:center}
.underplayer p{font-size:clamp(15.5px,1.4vw,18px);color:var(--muted);margin-bottom:16px}
.underplayer p strong{color:var(--ink);font-weight:600}
/* phones: the offer button on ONE line at half the height (Zman 16 Sep: "massive" on mobile,
   it wrapped to two lines at 80px). Same size as the sticky bar's button. Desktop untouched. */
@media(max-width:600px){
  .underplayer .pill.big{font-size:11px;letter-spacing:.1em;padding:11px 18px;white-space:nowrap}
}

/* ============================================================
   3 · TAP FOR SOUND + THE STRATEGY BUTTON'S TIMING
   The video starts on its own. Where the browser will not start it with
   sound it plays quietly under ONE big button; a tap starts it again from
   the top with the sound on (watch.js). The Strategy button under the
   player shows from the start, or once Gal makes the offer: watch.js puts
   .offer-open on <html> (OFFER_BUTTON in its socket).
   ============================================================ */
.soundon{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;width:100%;border:0;cursor:pointer;
  background:radial-gradient(120% 90% at 50% 50%,rgba(8,4,11,.18),rgba(8,4,11,.52));
  color:#fff;font:inherit;-webkit-tap-highlight-color:transparent}
.soundon[hidden]{display:none}
.soundon .ico{width:clamp(64px,9vw,104px);aspect-ratio:1;border-radius:50%;
  background:var(--g-btn);display:flex;align-items:center;justify-content:center;
  box-shadow:0 18px 50px rgba(224,42,102,.5), inset 0 1px 0 rgba(255,255,255,.4);
  animation:soundpulse 2.2s ease-in-out infinite}
.soundon .ico svg{width:46%;height:46%}
.soundon .lbl{font-family:"Montserrat",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(13px,1.3vw,16px);
  background:rgba(8,4,11,.66);padding:9px 16px;border-radius:999px}
.soundon:focus-visible{outline:2px solid #FFA8CB;outline-offset:-3px}
@keyframes soundpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@media(prefers-reduced-motion:reduce){ .soundon .ico{animation:none} }
/* phones: a smaller button, so the small player still shows Gal around it */
@media(max-width:600px){
  .soundon{gap:8px}
  .soundon .ico{width:54px}
  .soundon .lbl{font-size:11px;padding:6px 12px;letter-spacing:.12em}
  /* the title breaks after MARKETING, never inside LOVE LANGUAGES */
  .stagevid h1 .love{display:block}
}

/* the top-bar chip: calm gold, no pulsing dot (there is no date to count to) */
.rclock.calm .num{color:var(--gold-2)}
.rclock.calm .dotp{background:var(--gold);animation:none}

/* the button under the player, and the line that stands in for it */
[data-offerdoor]{display:none}
.offer-open [data-offerdoor],
.no-js [data-offerdoor]{display:block}
.offer-open [data-offerwait],
.no-js [data-offerwait]{display:none}
.underplayer .offerwait{margin-bottom:0}
/* the door arrives, it does not just appear */
.offer-open .offerdoor{animation:dooron .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes dooron{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .offer-open .offerdoor{animation:none} }

/* ============================================================
   4 · WHAT MEMBERS ARE SAYING — directly under the player
   ------------------------------------------------------------
   The video tiles are v4.css's .yt.vert (the registration page's
   own component). This adds the three-figure row and the
   objection-maths line that follow them. Chapter markers used to
   live in this slot (v1-v2); Hormozi's own pages put proof here,
   and now so does this one.
   ============================================================ */
.proofband{scroll-margin-top:calc(var(--rbar-h) + 12px)}
.proofvids{margin-top:clamp(30px,3.6vw,44px)}
.proofvids .yt.vert{border-color:rgba(224,42,102,.18)}
.proofvids .vertcell .quote p{font-size:16px;font-weight:600;color:var(--ink)}
.proofvids .vertcell .quote .who{margin-top:8px}
/* On a phone three stacked 9:16 tiles are two screens of scrolling before
   anything else arrives. So there the row becomes a snap rail: all three in
   one beat, the next one peeking, the way this audience already flicks
   through clips. The document never scrolls sideways; only this rail does. */
@media(max-width:760px){
  .proofvids{
    display:flex;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    padding:6px 4px 12px;margin-left:-4px;margin-right:-4px;
    scrollbar-width:none;
  }
  .proofvids::-webkit-scrollbar{display:none}
  .proofvids .vertcell{flex:0 0 74%;max-width:300px;scroll-snap-align:center}
  .proofvids .vertcell:first-child{scroll-snap-align:start}
  .proofvids .yt.vert{max-width:100%}
  .proofvids .vertcell .quote{max-width:100%}
}

/* three figures, not four: v4.css's .statgrid is a 4-up grid that drops to
   2-up on phones, which strands the third number on its own row. So this
   variant is a centred wrapping row: three across on anything wide enough,
   and it wraps on its own terms below that (the numbers shrink first). */
.statgrid.three{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;
  gap:clamp(22px,4vw,64px);text-align:center;
  margin:clamp(34px,4.2vw,54px) auto 0;max-width:1040px;
  padding-top:clamp(28px,3.4vw,40px);border-top:1px solid var(--line-soft);
}
.statgrid.three .stat{min-width:0}
.statgrid.three .stat .n{font-size:clamp(28px,4vw,50px)}
@media(max-width:520px){
  .statgrid.three{gap:18px 22px}
  .statgrid.three .stat .n{font-size:clamp(24px,7.4vw,30px)}
  .statgrid.three .stat .u{font-size:9.5px;letter-spacing:.14em;margin-top:7px}
}

/* the objection-maths line: one sentence, centred, the number in rose */
.mathline{margin:clamp(24px,3vw,34px) auto 0;max-width:720px;text-align:center}
.mathline p{font-size:clamp(16.5px,1.6vw,19.5px);line-height:1.6;color:var(--ink)}
.mathline p strong{color:var(--love-deep);font-weight:700}

/* ============================================================
   5 · THE BRIDGE — pain, then the tease, then one door
   ------------------------------------------------------------
   No price lives on this page, so there is no stack table and no
   three-number block here any more. What replaced them: the
   obstacles they are still carrying, then the same obstacles
   reversed into teased solutions, then the button.
   ============================================================ */
.bridge{scroll-margin-top:calc(var(--rbar-h) + 12px)}

.painlist{list-style:none;margin:clamp(28px,3.4vw,42px) auto 0;max-width:640px;
  display:grid;gap:2px}
.painlist li{position:relative;padding:13px 0 13px 30px;font-size:clamp(15.5px,1.5vw,17.5px);
  line-height:1.55;color:rgba(248,241,246,.82);border-bottom:1px solid rgba(255,255,255,.07)}
.painlist li:last-child{border-bottom:0;color:#FBF5F9;font-weight:600}
/* a soft rose tick-mark, not a bullet: these are things that are still TRUE */
.painlist li::before{content:"";position:absolute;left:4px;top:22px;width:11px;height:1px;
  background:linear-gradient(90deg,var(--love-2),var(--violet-2))}

.turn{max-width:640px;margin:clamp(30px,3.6vw,44px) auto 0;text-align:center}
.turnname{margin:14px 0 22px;letter-spacing:.06em}
.teaselist{list-style:none;display:grid;gap:12px;text-align:left;
  max-width:560px;margin:0 auto}
.teaselist li{position:relative;padding:14px 18px 14px 46px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  font-size:15.5px;line-height:1.5;color:rgba(248,241,246,.9)}
.teaselist li::before{content:"";position:absolute;left:19px;top:21px;width:9px;height:9px;
  border-radius:50%;background:var(--g-love-lit);box-shadow:0 0 12px rgba(255,124,176,.55)}
.turnnote{margin-top:20px;font-size:14.5px;color:rgba(248,241,246,.66)}
@media(max-width:520px){
  .teaselist li{padding:13px 15px 13px 40px;font-size:14.8px}
  .teaselist li::before{left:16px}
}

/* the offer cue: the bridge lights up once Gal has said it on screen */
.bridge .lightbox{border-radius:20px;transition:box-shadow .5s ease}
.bridge.lit .lightbox{box-shadow:0 0 0 1px rgba(255,168,203,.34), 0 0 90px rgba(224,42,102,.22)}
.cuetag{display:none;margin-bottom:14px}
.bridge.lit .cuetag{display:inline-flex}


/* ============================================================
   5b · MORE FROM MEMBERS — the written reviews, beside the close
   Review cards, not pull quotes: a name, what they do, their words.
   No star ratings we cannot show the source of. They sit between
   the bridge and the close so the last door has proof above it.
   ============================================================ */
.reviewwall{padding-top:clamp(44px,5.4vw,70px);padding-bottom:clamp(44px,5.4vw,70px)}
.reviewgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:1040px;margin:clamp(26px,3.2vw,38px) auto 0}
@media(max-width:760px){ .reviewgrid{grid-template-columns:1fr;gap:12px} }
.review{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:16px;
  padding:20px 22px 22px;box-shadow:0 12px 34px rgba(23,18,25,.06);
  display:flex;flex-direction:column;gap:14px;
}
.review .rhead{display:flex;align-items:center;gap:12px}
.review .ava{
  width:40px;height:40px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;
  background:var(--g-love);color:#fff;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:15px;
  box-shadow:0 8px 20px rgba(224,42,102,.28), inset 0 1px 0 rgba(255,255,255,.35);
}
.review .rwho{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.review .rwho strong{font-family:"Montserrat",sans-serif;font-weight:700;font-size:13.5px;
  letter-spacing:.04em;color:var(--ink)}
.review .rwho span{font-size:12.5px;color:var(--muted);margin-top:3px}
.review blockquote{margin:0;font-size:16.5px;line-height:1.55;color:var(--ink)}
@media(max-width:520px){
  .review{padding:16px 16px 18px;border-radius:14px}
  .review blockquote{font-size:15.5px}
}

.disclose{font-size:12.5px;color:var(--muted);text-align:center;
  max-width:560px;margin:clamp(22px,2.6vw,30px) auto 0}

/* the close band's stated-deadline line: one sentence, not a headline */
.closeline{max-width:640px;margin:clamp(20px,2.4vw,26px) auto 0}
.closeline p{font-size:15px;line-height:1.6;color:rgba(248,241,246,.66)}
.closeline p strong{color:#FBF5F9;font-weight:600}
/* the three-state switch uses display:block; the paragraphs are block already */

/* ============================================================
   6 · THE SLIM STICKY CTA
   It slides in only once they are into the video AND only once the
   player is fully clear of it, so it can never sit on the controls.
   ============================================================ */
#stickyoffer{
  position:fixed;left:0;right:0;bottom:0;z-index:940;
  background:rgba(12,7,16,.95);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(224,42,102,.34);
  padding:10px 0 calc(10px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .34s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
#stickyoffer.show{transform:none}
#stickyoffer .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px}
#stickyoffer .txt{min-width:0}
#stickyoffer .txt .a{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:11px;letter-spacing:.18em;color:var(--love-3);display:block}
#stickyoffer .txt .b{color:#FBF5F9;font-size:15px;font-weight:500;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
#stickyoffer .pill{flex:0 0 auto}
@media(max-width:640px){
  #stickyoffer .txt .b{font-size:13.5px}
  #stickyoffer .txt .a{font-size:10px;letter-spacing:.14em}
  #stickyoffer .pill{font-size:11px;padding:11px 15px;letter-spacing:.1em}
}
@media(max-width:400px){ #stickyoffer .txt .b{display:none} }

/* ============================================================
   7 · SMALL PIECES
   ============================================================ */
.fineline{font-size:12.5px;color:var(--muted);text-align:center;margin-top:14px}
.dark .fineline{color:rgba(248,241,246,.55)}

/* ============================================================
   8 · REDUCED MOTION
   v4.css already calms its own animations. These are this page's:
   the bar pulse and the sticky slide stop moving, but nothing is
   left invisible or off-screen. The sticky bar still arrives, it
   just arrives without travelling.
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .rclock .dotp{animation:none}
  #stickyoffer{transition:none;transform:translateY(110%)}
  #stickyoffer.show{transform:none}
  .bridge .lightbox{transition:none}
  body{transition:none}
}