/* PiP promo 8 · POV caption style (9:16): blurred fill, sharp square photo,
   sticky hook box and word-by-word captions. */
:root { --page: #0b131c; --accent: #f2c66d; --navy: #14202e; --sage: #9dc395; --gold: #f2c66d; --green: #2f9e6b; }
.stage { background: #0b131c; font-family: "Montserrat", "Inter", sans-serif; color: #fff; }
.bgs { position: absolute; inset: 0; overflow: hidden; }
.bgimg { position: absolute; inset: -80px; background-size: cover; background-position: center; filter: blur(40px) brightness(.5) saturate(1.2); opacity: 0; }
.photo { position: absolute; left: 40px; top: 400px; width: 1000px; height: 1000px; border-radius: 44px; overflow: hidden; box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .8); }
.imgs { position: absolute; inset: 0; }
.imgs img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; }
.photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, .55)); pointer-events: none; }

.hook { position: absolute; left: 0; right: 0; top: 150px; height: 140px; text-align: center; font-family: "Inter", sans-serif; }
.hook span { position: absolute; left: 50%; top: 0; transform: translateX(-50%); white-space: nowrap; display: inline-block; padding: 20px 34px; border-radius: 20px; background: #fff; color: #111; font-size: 50px; font-weight: 800; letter-spacing: -.01em; opacity: 0; }
.hook span b { color: #2f9e6b; }
.hook-wrap { position: absolute; left: 50%; top: 0; }

.caps { position: absolute; left: 60px; right: 60px; top: 1450px; height: 360px; }
.cap { position: absolute; left: 0; right: 0; top: 0; text-align: center; font-size: 80px; font-weight: 900; line-height: 1.16; letter-spacing: -.01em; opacity: 0; }
.cap .w {
  padding: 0 10px; margin: 2px 0; border-radius: 14px;
  text-shadow: 5px 5px 0 #0b131c, -5px 5px 0 #0b131c, 5px -5px 0 #0b131c, -5px -5px 0 #0b131c, 0 7px 0 #0b131c, 0 -7px 0 #0b131c, 7px 0 0 #0b131c, -7px 0 0 #0b131c;
}
.cap .w.on { background: var(--gold); color: #111; text-shadow: none; }

.ov { position: absolute; opacity: 0; }
.tablet { left: 50px; top: 270px; width: 900px; padding: 18px; border-radius: 36px; background: #111a24; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.tablet img { width: 100%; border-radius: 20px; }
.tap { position: absolute; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; border: 6px solid #fff; background: rgba(255, 255, 255, .35); opacity: 0; }
.famcard { left: 120px; top: 360px; width: 760px; padding: 40px 46px; border-radius: 36px; background: #fff; color: var(--navy); font-family: "Inter", sans-serif; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .6); }
.famcard small { display: block; font-size: 24px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #4f8a6a; }
.famcard b { display: block; margin-top: 8px; font-size: 52px; font-weight: 800; letter-spacing: -.02em; }
.famcard ul { margin-top: 22px; list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 34px; font-weight: 600; }
.famcard li::before { content: "● "; color: var(--sage); }
.tv { left: 80px; top: 300px; width: 840px; padding: 40px 46px; border-radius: 20px; background: var(--navy); border: 14px solid #0a0e13; font-family: "Inter", sans-serif; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); }
.tv small { display: block; font-size: 24px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #afe0ed; margin-bottom: 18px; }
.tv-row { display: flex; gap: 26px; align-items: baseline; padding: 14px 0; font-size: 40px; font-weight: 700; border-bottom: 2px solid rgba(255, 255, 255, .12); }
.tv-row time { min-width: 190px; color: var(--gold); font-weight: 800; font-size: 34px; }
.tv p { margin-top: 22px; padding: 18px; border-radius: 16px; background: var(--gold); color: var(--navy); text-align: center; font-size: 38px; font-weight: 800; }

#drop { background: radial-gradient(70% 60% at 50% 45%, #1f3a2c, #0b131c 75%); display: block; }
#drop img { position: absolute; left: 390px; top: 600px; width: 300px; height: 300px; }
#drop h2 { position: absolute; left: 60px; right: 60px; top: 980px; text-align: center; font-size: 126px; font-weight: 900; line-height: 1.02; letter-spacing: -.03em; }
#end { background: radial-gradient(80% 60% at 50% 40%, #24402f, #0b131c 80%); }
.end-logo { position: absolute; left: 390px; top: 470px; width: 300px; height: 300px; }
.end-h { position: absolute; left: 60px; right: 60px; top: 840px; text-align: center; font-size: 120px; font-weight: 900; line-height: 1.02; letter-spacing: -.03em; }
.end-sub { position: absolute; left: 0; right: 0; top: 1110px; text-align: center; font-size: 42px; font-weight: 700; color: var(--sage); }
.cta { position: absolute; left: 140px; right: 140px; top: 1290px; height: 132px; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--gold); color: #111; text-decoration: none; font-size: 46px; font-weight: 900; }
.end-url { position: absolute; left: 0; right: 0; top: 1470px; text-align: center; font-size: 44px; font-weight: 800; }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }