/* ============================================================
   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 + countdown)
     · .stagevid    the "almost nothing above the player" hero
     · .player      the self-hosted video frame + its closed state
     · .chaprail    chapter markers
     · .painlist / .teaselist  the offer bridge (no price on it)
     · #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 "watch now, it closes" chip that sits on the frame */
.player .vchip{
  position:absolute;top:14px;left:14px;z-index:3;pointer-events:none;
  font-family:"Montserrat",sans-serif;text-transform:uppercase;font-weight:700;
  font-size:10px;letter-spacing:.2em;color:#fff;
  background:rgba(12,7,16,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,168,203,.4);border-radius:999px;padding:6px 13px;
  transition:opacity .3s ease;
}
.player.playing .vchip{opacity:0}
@media(max-width:600px){ .player .vchip{top:10px;left:10px;font-size:9px;padding:5px 10px} }

/* 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}
.expired .player .vchip{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}
.expired .chapsection{display:none}

/* ============================================================
   4 · CHAPTER MARKERS — for the no-show who wants one answer
   ============================================================ */
.chaprail{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:clamp(26px,3vw,38px)}
@media(max-width:760px){ .chaprail{grid-template-columns:1fr} }
.chap{
  display:flex;align-items:flex-start;gap:16px;text-align:left;width:100%;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  padding:15px 18px;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.chap:hover{border-color:rgba(224,42,102,.4);box-shadow:0 16px 40px rgba(23,18,25,.09);transform:translateY(-2px)}
.chap:focus-visible{outline:2px solid var(--love);outline-offset:2px}
.chap .t{font-family:"Montserrat",sans-serif;font-weight:700;font-size:13px;letter-spacing:.04em;
  color:var(--love-deep);font-variant-numeric:tabular-nums;flex:0 0 auto;padding-top:2px;min-width:52px}
.chap .n{font-size:15.5px;line-height:1.45;font-weight:500}
.chap.on{border-color:var(--love);box-shadow:0 0 0 1px var(--love) inset, 0 18px 44px rgba(224,42,102,.14)}
.chap.offercue .t{color:var(--gold-deep)}
.chap.offercue{border-color:rgba(201,164,92,.5);background:linear-gradient(180deg,#fff,#FFFCF5)}

/* ============================================================
   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 · THE PROOF WALL — real videos, real reviews
   The video tiles are v4.css's .yt.vert (the registration page's
   own component). This adds only the written-review cards, which
   sit UNDER the videos and read as reviews rather than as pull
   quotes: a name, what they do, their words. No star ratings we
   cannot show the source of.
   ============================================================ */
.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
   the reviews arrive. 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%}
}

.reviewgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;
  max-width:1040px;margin:clamp(30px,3.6vw,44px) 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}
  .chap{transition:none}
  .chap:hover{transform:none}
  body{transition:none}
  .player .vchip{transition:none}
}