/* ============================================================
   GUARANTEED PROSPERITY — WEBINAR REPLAY PAGE
   PAGE LAYER · loads AFTER v4.css + v4-pages.css
   ------------------------------------------------------------
   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 self-hosted video 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, the line and the button all fit one
   laptop screen: the width is driven by the height that is actually left
   over, and only then capped. min() keeps it honest on a phone.
   The 400px is the rest of the fold measured, not guessed: 54 bar +
   32 stage padding + ~90 kicker and headline + ~150 for the two-line
   sentence and the button under the player. Trim it and the button
   drops off a 1440x900 laptop screen, which is where it started. */
.playerwrap{
  width:min(100%, calc((100svh - 400px) * 16 / 9));
  min-width:min(100%,560px);
  max-width:1020px;margin:0 auto;
}
.player{
  position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  background:#08040B;border:1px solid rgba(224,42,102,.26);
  box-shadow:0 40px 110px rgba(12,7,16,.34), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.player video{width:100%;height:100%;display:block;object-fit:contain;background:#08040B}

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

/* ============================================================
   3 · THE CLOSED STATE — what the page becomes after the deadline
   The video is genuinely gone. The offer is not, so the page is
   still a route to it rather than a dead end.
   ============================================================ */
/* ⚠ NOT `.closed`. The countdown clock also takes a closed state class, and a
   bare `.closed` rule landed this whole full-size panel on the top bar. */
.closedpanel{display:none;position:absolute;inset:0;z-index:4;
  background:linear-gradient(180deg,rgba(18,10,24,.55),rgba(12,7,16,.9));
  align-items:center;justify-content:center;text-align:center;padding:clamp(20px,4vw,44px)}
.expired .closedpanel{display:flex;position:relative;inset:auto;
  padding:clamp(40px,6vw,74px) clamp(20px,4vw,44px)}
/* once it is closed there is no 16:9 frame to hold: a letterbox-shaped black
   slab with one small lock in the middle of it is a lot of nothing */
.expired .player{aspect-ratio:auto}
.expired .player video{display:none}
.closedpanel .in-closed{max-width:520px}
.closedpanel .lock{width:42px;height:42px;margin:0 auto 16px;display:block;opacity:.9}
.closedpanel h2{font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  letter-spacing:.05em;color:#FBF5F9;font-size:clamp(17px,2.1vw,25px);line-height:1.2}
.closedpanel p{color:rgba(248,241,246,.74);font-size:clamp(14px,1.3vw,16.5px);margin-top:12px}
@media(max-width:520px){ .closedpanel h2{font-size:16px} .closedpanel p{font-size:13.5px} .closedpanel .lock{width:32px;height:32px} }

/* Three states, not two. A visitor whose deadline passes WHILE they are
   watching does not get the video yanked out from under them: the bar flips
   to closed, the copy tells them the truth, and the offer takes over. The
   next load is the proper closed page. */
[data-when="expired"],[data-when="midclosed"]{display:none}
.expired [data-when="live"]{display:none}
.expired [data-when="expired"]{display:block}
.midclosed [data-when="live"]{display:none}
.midclosed [data-when="midclosed"]{display:block}

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