/* Source design: https://theartofyt.com/fb-reg-wednesday, captured 2026-10-20. Public AOY stylesheet reused for visual parity. */

#aoy-webinar{
  --bg:#0a0f1e;
  --bg-soft:#121a30;
  --ink:#eef2f9;
  --ink-2:#aab4c6;
  --ink-3:#7b8698;
  --navy:#f4f7fc;
  --line:#2a3450;
  --line-soft:#1d2740;
  --accent:#5b8dd6;
  --accent-dark:#6f9ce0;
  --accent-soft:#16223d;
  --orange:#f98125;
  --orange-deep:#ffb066;
  --radius:20px;
  --radius-sm:14px;
  --maxw:1040px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  font-family:var(--font); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
#aoy-webinar *{box-sizing:border-box}
#aoy-webinar img{max-width:100%;display:block}
/* ---------- nav ---------- */
#aoy-webinar .nav{
  position:sticky; top:0; z-index:20;
  background:rgba(10,15,30,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line-soft);
}
#aoy-webinar .nav-inner{
  max-width:var(--maxw); margin:0 auto; padding:11px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#aoy-webinar .wordmark{font-size:16px; font-weight:700; letter-spacing:-.01em; color:var(--navy)}
#aoy-webinar .nav-cta{
  font-family:var(--font); font-size:13px; font-weight:700; color:#fff;
  background:var(--orange); border:none; padding:9px 18px; border-radius:980px;
  cursor:pointer; box-shadow:0 8px 22px rgba(249,129,37,.28);
  transition:background .18s ease, box-shadow .18s ease;
}
#aoy-webinar .nav-cta:hover{background:var(--orange-deep); box-shadow:0 10px 26px rgba(249,129,37,.4)}
/* ---------- hero ---------- */
#aoy-webinar .reg-hero{
  max-width:1000px; margin:0 auto; padding:16px 24px 26px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:9px;
}
#aoy-webinar .reg-eyebrow{
  display:inline-block; font-size:11.5px; font-weight:700;
  color:var(--orange-deep); background:rgba(249,129,37,.14);
  padding:5px 13px; border-radius:980px;
  letter-spacing:.06em; text-transform:uppercase;
}
#aoy-webinar .reg-h1{
  font-size:clamp(26px,3.4vw,43px); font-weight:700; line-height:1.06;
  letter-spacing:-.03em; color:var(--navy); max-width:900px;
  text-wrap:balance; margin:0;
}
#aoy-webinar .reg-h1 .hl{color:var(--accent)}
#aoy-webinar .countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(10px,2.4vw,22px); margin-top:4px;
}
#aoy-webinar .cd-block{display:flex; flex-direction:column; align-items:center; gap:4px; min-width:48px}
/* Smaller than it was: the countdown is atmosphere, the three rows above
   it are the argument. When the fold gets tight, this gives up space
   before any body copy does. */
#aoy-webinar .cd-num{
  font-size:clamp(22px,2.9vw,29px); font-weight:600; line-height:1;
  letter-spacing:-.03em; font-variant-numeric:tabular-nums; color:var(--navy);
}
#aoy-webinar .cd-label{font-size:11px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.07em}
#aoy-webinar .cd-caption{
  font-size:10.5px; color:var(--ink-3); text-transform:uppercase;
  letter-spacing:.09em; font-weight:600; margin:0;
}
/* The hero price is the biggest the number gets anywhere on the page —
   it is the last thing read before the button. */
#aoy-webinar .hero-price{margin-top:0; gap:10px}
#aoy-webinar .hero-price .price-was{font-size:18px}
#aoy-webinar .hero-price .price-now{font-size:clamp(24px,3.2vw,30px)}
@keyframes aoyPulse{
  0%{box-shadow:0 0 0 0 rgba(249,129,37,.5)}
  70%{box-shadow:0 0 0 12px rgba(249,129,37,0)}
  100%{box-shadow:0 0 0 0 rgba(249,129,37,0)}
}
#aoy-webinar .btn-primary{
  font-family:var(--font); font-size:17px; font-weight:700; color:#fff;
  background:var(--orange); border:none; padding:16px 38px; border-radius:980px;
  cursor:pointer; text-decoration:none; display:inline-block;
  box-shadow:0 14px 32px rgba(249,129,37,.3);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}
#aoy-webinar .btn-primary:hover{
  background:var(--orange-deep); box-shadow:0 16px 40px rgba(217,106,21,.42);
  transform:translateY(-1px);
}
#aoy-webinar .reg-note{font-size:12.5px; color:var(--ink-3); margin:0}
/* ---------- trust strip ---------- */
#aoy-webinar .reg-trust-sec{padding:0 24px 8px}
#aoy-webinar .trust{display:flex; align-items:center; justify-content:center; gap:12px}
#aoy-webinar .trust-stars{color:#ffb400; font-size:18px; letter-spacing:2px; line-height:1}
#aoy-webinar .trust-text{font-size:14px; color:var(--ink-2); margin:0}
#aoy-webinar .trust-text b{color:var(--navy); font-weight:700}
/* ---------- sections ---------- */
#aoy-webinar .section{max-width:var(--maxw); margin:0 auto; padding:56px 24px}
#aoy-webinar .section-head{text-align:center; margin-bottom:40px}
#aoy-webinar .pill{
  display:inline-block; font-size:12px; font-weight:700; color:var(--accent);
  background:var(--accent-soft); padding:6px 13px; border-radius:980px;
  letter-spacing:.05em; text-transform:uppercase; margin-bottom:16px;
}
#aoy-webinar .section-head h2{
  font-size:clamp(30px,4.6vw,48px); font-weight:700; letter-spacing:-.03em;
  line-height:1.08; color:var(--navy); margin:0;
}
#aoy-webinar .section-sub{
  font-size:15px; color:var(--ink-2); max-width:560px; margin:14px auto 0; line-height:1.5;
}
/* ---------- host + YouTube-Studio stats ---------- */
#aoy-webinar .host{
  max-width:900px; margin:0 auto; display:grid;
  grid-template-columns:300px minmax(0,1fr); gap:40px; align-items:center;
}
#aoy-webinar .host-photo{
  border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-soft);
  aspect-ratio:4/5;
}
#aoy-webinar .host-photo img{width:100%; height:100%; object-fit:cover; object-position:center 22%}
#aoy-webinar .host-eyebrow{
  display:block; font-size:12px; font-weight:700; color:var(--orange-deep);
  text-transform:uppercase; letter-spacing:.07em;
}
#aoy-webinar .host h3{
  font-size:clamp(26px,3.4vw,36px); font-weight:700; color:var(--navy);
  letter-spacing:-.03em; margin:8px 0 0;
}
#aoy-webinar .host-role{font-size:14px; color:var(--ink-3); margin:6px 0 20px}
#aoy-webinar .yt-stats{
  background:#1f1f1f; border:1px solid #303030;
  border-radius:var(--radius-sm); overflow:hidden; text-align:left;
}
#aoy-webinar .yt-bar{
  display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-bottom:1px solid #303030;
}
#aoy-webinar .yt-barlabel{
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.06em; color:rgba(255,255,255,.45);
}
#aoy-webinar .yt-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
#aoy-webinar .yt-cell{padding:16px 12px 18px; text-align:center}
#aoy-webinar .yt-cell + .yt-cell{border-left:1px solid #303030}
#aoy-webinar .yt-clabel{font-size:13px; color:rgba(255,255,255,.6); font-weight:500; margin:0}
#aoy-webinar .yt-cval{display:flex; align-items:center; justify-content:center; gap:7px; margin-top:6px}
#aoy-webinar .yt-cval span:first-child{
  font-size:clamp(20px,2.6vw,30px); font-weight:700; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; white-space:nowrap;
}
#aoy-webinar .yt-arrow{
  flex-shrink:0; width:20px; height:20px; border-radius:50%;
  background:#2ba640; color:#fff; font-size:12px; font-weight:700;
  display:flex; align-items:center; justify-content:center; line-height:1;
}
#aoy-webinar .yt-ctx{
  margin:8px 0 0; font-size:12px; color:rgba(255,255,255,.45);
  font-style:italic; line-height:1.3;
}
#aoy-webinar .host-bio{font-size:15px; color:var(--ink-2); line-height:1.55; margin:20px 0 0}
#aoy-webinar .host-bio b{color:var(--navy); font-weight:600}
/* ---------- proof grid ---------- */
#aoy-webinar .tvid-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(290px,1fr)); gap:18px;
}
#aoy-webinar .tvid{
  display:flex; flex-direction:column; background:var(--bg-soft);
  border:1px solid var(--line-soft); border-radius:var(--radius-sm); overflow:hidden;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
#aoy-webinar .tvid:hover{
  transform:translateY(-3px); border-color:var(--line);
  box-shadow:0 18px 40px rgba(0,0,0,.34);
}
#aoy-webinar .tvid-thumb{
  background:#0d1424; border-bottom:1px solid var(--line-soft);
  aspect-ratio:16/9; overflow:hidden;
}
#aoy-webinar .tvid-thumb img{width:100%; height:100%; object-fit:cover; object-position:center top}
#aoy-webinar .tvid-info{padding:14px 16px 17px; flex:1}
#aoy-webinar .tvid-title{
  font-size:15.5px; font-weight:700; color:var(--navy);
  letter-spacing:-.02em; line-height:1.25;
}
#aoy-webinar .tvid-info p{margin:7px 0 0; font-size:13px; color:var(--ink-2); line-height:1.45}
/* ---------- final CTA ---------- */
#aoy-webinar .final{
  max-width:var(--maxw); margin:0 auto; padding:20px 24px 72px; text-align:center;
}
#aoy-webinar .final-box{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:48px 32px;
}
#aoy-webinar .final-box h2{
  font-size:clamp(27px,4vw,42px); font-weight:700; letter-spacing:-.03em;
  line-height:1.1; color:var(--navy); margin:0 auto; max-width:620px;
}
#aoy-webinar .final-when{margin:18px 0 0; font-size:14px; color:var(--ink-3)}
#aoy-webinar .final-when b{color:var(--navy); font-weight:600}
/* ---------- footer ---------- */
#aoy-webinar .foot{
  border-top:1px solid var(--line-soft); padding:34px 24px 108px;
  max-width:var(--maxw); margin:0 auto;
  font-size:12px; color:var(--ink-3); line-height:1.6;
}
#aoy-webinar .foot p{margin:0 0 11px}
#aoy-webinar .foot b{color:var(--ink-2); font-weight:600}
#aoy-webinar .foot .copy{margin-top:18px; color:var(--line)}
/* ---------- sticky bar ---------- */
#aoy-webinar .sticky-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:rgba(10,15,30,.96);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-top:1px solid var(--line-soft);
  transform:translateY(110%); transition:transform .3s ease;
}
#aoy-webinar .sticky-bar.on{transform:translateY(0)}
#aoy-webinar .sticky-inner{
  max-width:var(--maxw); margin:0 auto; padding:11px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
#aoy-webinar .sticky-msg{margin:0; font-size:13.5px; color:var(--ink-2)}
/* The bottom bar carries the PRICE, never a timer — see the markup note. */
#aoy-webinar .sticky-msg b{color:var(--orange); font-weight:800}
#aoy-webinar .sticky-msg .price-was{font-size:13px; color:var(--ink-3)}
#aoy-webinar .sticky-bar .btn-primary{font-size:14px; padding:11px 26px; white-space:nowrap; box-shadow:none}
/* ---------- modal ---------- */
#aoy-webinar .modal{
  position:fixed; inset:0; z-index:9999; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(4,7,15,.86); backdrop-filter:blur(5px);
}
#aoy-webinar .modal.aoy-open{display:flex}
#aoy-webinar .modal-box{
  position:relative; width:100%; max-width:560px;
  background:var(--bg-soft); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 28px 26px;
  max-height:92vh; overflow-y:auto; text-align:center;
}
#aoy-webinar .modal-x{
  position:absolute; top:12px; right:15px; width:30px; height:30px;
  background:none; border:none; color:var(--ink-3); font-size:27px;
  line-height:1; cursor:pointer; padding:0;
}
#aoy-webinar .modal-x:hover{color:var(--navy)}
#aoy-webinar .modal-box h3{
  font-size:27px; font-weight:700; color:var(--navy);
  letter-spacing:-.03em; margin:14px 0 0;
}
#aoy-webinar .modal-sub{font-size:14.5px; color:var(--ink-2); margin:10px 0 22px}
/* ---------- responsive ---------- */
@media (max-width:900px){
  #aoy-webinar .host{grid-template-columns:1fr; gap:26px; text-align:center}
  #aoy-webinar .host-photo{max-width:260px; margin:0 auto}
  #aoy-webinar .yt-stats{text-align:center}
}
@media (max-width:640px){
  #aoy-webinar .reg-hero{padding:14px 20px 24px; gap:9px}
  #aoy-webinar .countdown{gap:9px}
  #aoy-webinar .cd-block{min-width:44px}
  #aoy-webinar .btn-primary{width:100%; max-width:360px; padding:16px 24px}
  #aoy-webinar .nav-cta,#aoy-webinar .sticky-bar .btn-primary{width:auto}
  #aoy-webinar .section{padding:44px 20px}
  /* Three across on phones too. Stacked, the three numbers read as a list
     you scroll past; side by side they read as one panel — which is the
     point, it is a YouTube Studio screenshot. */
  #aoy-webinar .yt-cell{padding:12px 6px 14px}
  #aoy-webinar .sticky-msg{font-size:12.5px}
  #aoy-webinar .sticky-inner{justify-content:space-between; gap:12px}
  #aoy-webinar .final-box{padding:36px 22px}
}

/* ============================================================
   NEW BLOCKS — 2026-09-13
   (hero value-rows, struck price + offer timer, gift cards, avatars)
   ============================================================ */

/* Kept deliberately tight. Every pixel this block spends pushes the CTA
   further down, and the CTA has to clear the fold on a 720px-tall laptop.
   Each description is written to fit ONE line at 560px — if you lengthen
   one, re-measure where the button lands before shipping it. */
#aoy-webinar .vrows{
  display:flex; flex-direction:column; gap:7px;
  max-width:560px; margin:14px auto 0; text-align:left;
}
#aoy-webinar .vrow{
  display:flex; align-items:center; gap:12px;
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:12px; padding:10px 15px;
}
#aoy-webinar .vrow-ic{
  flex:0 0 auto; width:29px; height:29px; border-radius:8px;
  background:rgba(255,255,255,.055); border:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; font-size:15px;
}
#aoy-webinar .vrow-t{display:block; font-size:15px; font-weight:700; color:var(--navy); line-height:1.25}
#aoy-webinar .vrow-d{display:block; font-size:13px; color:var(--ink-2); line-height:1.4; margin-top:3px}

/* OUR TIMER IS REAL: it counts to the actual next training, driven by the
   same nextTarget() as the big countdown. A per-visitor timer that resets
   on reload would be a lie the page tells every single visitor. */
#aoy-webinar .price-was{
  font-size:19px; font-weight:600; color:var(--ink-3);
  text-decoration:line-through; text-decoration-thickness:2px;
}
#aoy-webinar .price-now{
  font-size:clamp(26px,4vw,34px); font-weight:800; letter-spacing:-.03em;
  color:var(--orange);
}
#aoy-webinar .price-line{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; justify-content:center}
#aoy-webinar .offer-timer{display:flex; align-items:center; gap:9px; flex-wrap:wrap; justify-content:center}
#aoy-webinar .offer-label{font-size:12.5px; color:var(--ink-3)}
#aoy-webinar .ot-box{
  display:flex; align-items:center; gap:6px;
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:11px; padding:7px 12px;
}
#aoy-webinar .ot-num{
  font-size:16px; font-weight:800; color:var(--navy);
  font-variant-numeric:tabular-nums; letter-spacing:.01em;
}
#aoy-webinar .ot-sep{font-size:15px; font-weight:700; color:var(--ink-3)}
#aoy-webinar .ot-cell{display:flex; flex-direction:column; align-items:center; line-height:1}
#aoy-webinar .ot-unit{font-size:8.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-top:3px}

/* ---------- the offer riding in the sticky header (desktop only) ---------- */
#aoy-webinar .nav-offer{display:flex; align-items:center; gap:14px}
#aoy-webinar .nav-div{width:1px; height:22px; background:var(--line-soft)}
#aoy-webinar .nav-offer .price-was{font-size:15px}
#aoy-webinar .nav-offer .price-now{font-size:20px}
#aoy-webinar .nav-offer .offer-timer{gap:8px}
#aoy-webinar .nav-offer .offer-label{font-size:11.5px}
#aoy-webinar .nav-offer .ot-box{padding:5px 10px; gap:5px}
#aoy-webinar .nav-offer .ot-num{font-size:14px}
#aoy-webinar .nav-offer .ot-unit{font-size:7.5px}

/* ---------- desktop keeps the top bar, phones keep the bottom one ---------- */
@media (max-width:860px){
  #aoy-webinar .nav-offer{display:none}
}
@media (min-width:861px){
  #aoy-webinar .sticky-bar{display:none}
}

/* ---------- gift cards ---------- */
#aoy-webinar .gifts{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px;
  max-width:820px; margin:0 auto;
}
#aoy-webinar .gift-card{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#aoy-webinar .gift-card:hover{transform:translateY(-3px); border-color:rgba(249,129,37,.4); box-shadow:0 20px 46px rgba(0,0,0,.36)}
#aoy-webinar .gift-art{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  border-bottom:1px solid var(--line-soft);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:18px;
}
/* GIFT ARTWORK. The <img> sits ON TOP of the CSS artwork rather than
   replacing it, so an image that 404s leaves a finished-looking card
   instead of a hole: onerror hides the img and the CSS art shows through.
   Both files are in the GHL Media Library (uploaded 2026-09-13). */
#aoy-webinar .gift-art img,
#aoy-webinar .fg-art img{
  position:absolute; inset:0; z-index:2;
  width:100%; height:100%; object-fit:cover; display:block;
}
#aoy-webinar .ga-niches{
  background:
    radial-gradient(320px 160px at 50% 6%, rgba(249,129,37,.24), transparent 72%),
    linear-gradient(160deg,#141017,#0b0a08);
}
#aoy-webinar .ga-wa{
  background:
    radial-gradient(320px 160px at 50% 6%, rgba(37,211,102,.22), transparent 72%),
    linear-gradient(160deg,#0f1a16,#0b141a);
}
#aoy-webinar .ga-t{
  font-size:clamp(15px,2.4vw,20px); font-weight:800; line-height:1.2;
  letter-spacing:-.02em; color:#fff; max-width:22ch;
}
#aoy-webinar .ga-t em{display:block; font-style:normal; color:var(--orange); margin-top:2px}
#aoy-webinar .ga-t em.green{color:#25d366}
#aoy-webinar .ga-kicker{
  display:block; margin-bottom:9px;
  font-size:9px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3);
}
#aoy-webinar .gift-body{padding:20px 22px 24px; display:flex; flex-direction:column; gap:9px; flex:1}
#aoy-webinar .gift-num{font-size:11px; font-weight:800; letter-spacing:.1em; color:var(--orange-deep)}
#aoy-webinar .gift-body h3{margin:0; font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--navy); line-height:1.25}
#aoy-webinar .gift-body p{margin:0; font-size:14px; color:var(--ink-2); line-height:1.5}

/* ---------- avatars: who this is for ---------- */
#aoy-webinar .avatars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px}
#aoy-webinar .avatar{
  background:var(--bg-soft); border:1px solid var(--line-soft);
  border-radius:var(--radius); padding:26px 24px 28px;
  display:flex; flex-direction:column; gap:12px;
}
#aoy-webinar .av-ic{font-size:26px; line-height:1}
#aoy-webinar .avatar h3{margin:0; font-size:18.5px; font-weight:700; letter-spacing:-.02em; color:var(--navy); line-height:1.25}
#aoy-webinar .avatar ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px}
#aoy-webinar .avatar li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:14px; color:var(--ink-2); line-height:1.45;
}
#aoy-webinar .avatar li::before{content:"✓"; color:#2ba640; font-weight:700; flex-shrink:0}

/* ---------- final CTA: numbered gift cards, then the value panel, then
   the timer, then the button. In that order on purpose — the reader sees
   what they get, what it is worth, how long they have, then the ask. */
#aoy-webinar .final-gift-grid{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px;
  max-width:620px; margin:28px auto 0; text-align:left;
}
#aoy-webinar .fg-card{
  background:rgba(255,255,255,.03); border:1px solid var(--line-soft);
  border-radius:16px; overflow:hidden;
}
#aoy-webinar .fg-art{
  aspect-ratio:16/10; position:relative; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  text-align:center; padding:14px;
  border-bottom:1px solid var(--line-soft);
}
#aoy-webinar .fg-body{display:flex; align-items:baseline; gap:11px; padding:14px 16px 16px}
#aoy-webinar .fg-num{
  flex:0 0 auto; font-size:19px; font-weight:800; letter-spacing:-.02em;
  color:var(--orange); line-height:1; font-variant-numeric:tabular-nums;
}
#aoy-webinar .fg-name{font-size:14px; font-weight:700; color:var(--navy); line-height:1.3; letter-spacing:-.01em}
/* The struck price was getting lost in the middle of the box. Framing it
   turns it into a line item with a number attached to it. */
#aoy-webinar .value-panel{
  display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:wrap;
  max-width:620px; margin:22px auto 0;
  background:rgba(249,129,37,.07); border:1px solid rgba(249,129,37,.3);
  border-radius:16px; padding:16px 22px;
}
#aoy-webinar .vp-label{font-size:14px; font-weight:600; color:var(--ink-2)}
#aoy-webinar .vp-price{display:flex; align-items:baseline; gap:12px}
#aoy-webinar .vp-price .price-was{font-size:22px; color:var(--ink-2); text-decoration-thickness:2.5px}
#aoy-webinar .vp-price .price-now{font-size:30px}
#aoy-webinar .final-timer{margin-top:18px; justify-content:center}
#aoy-webinar .final-box .btn-primary{margin-top:18px}
@media (max-width:640px){
  #aoy-webinar .final-gift-grid{grid-template-columns:1fr}
  #aoy-webinar .value-panel{flex-direction:column; gap:8px}
}
@media (max-width:820px){
  #aoy-webinar .avatars{grid-template-columns:1fr}
  #aoy-webinar .gifts{grid-template-columns:1fr}
}
/* The +10% headline gains a whole extra line at 360px and costs the fold.
   Narrow phones only: back to the previous size. */
@media (max-width:380px){
  #aoy-webinar .reg-h1{font-size:24.5px}
}
/* On a phone every description wraps to two lines and the three rows grow
   from ~180px to ~240px, which is what pushes the CTA under the fold on a
   640-700px screen. Below 640px the rows keep their titles and drop the
   sub-copy. Measured: button bottom 716px -> ~590px. */
@media (max-width:640px){
  #aoy-webinar .vrow-d{display:none}
  #aoy-webinar .vrow{padding:8px 13px}
  #aoy-webinar .vrows{gap:6px}
}
/* SHORT SCREENS — the CTA has to be visible without scrolling, and the
   body copy is not what gives way to make that happen. On a short
   viewport the atmosphere shrinks instead: the countdown, the eyebrow and
   the gaps. Text sizes are untouched here on purpose. */
@media (max-height:760px){
  #aoy-webinar .reg-hero{gap:7px; padding-top:12px}
  #aoy-webinar .cd-num{font-size:clamp(20px,2.4vw,24px)}
  #aoy-webinar .cd-label{font-size:9px}
  #aoy-webinar .cd-block{gap:2px}
  #aoy-webinar .cd-caption{margin-bottom:-2px}
  #aoy-webinar .reg-eyebrow{padding:4px 12px; font-size:11px}
}

/* ---------- mobile stat panel ----------
   ⚠ THIS BLOCK MUST STAY LAST IN THE STYLESHEET.
   It overrides #aoy-webinar .yt-cval span:first-child, which is declared
   further up with identical specificity — put these rules any earlier and
   the base rule wins on source order and none of this applies. */
@media (max-width:560px){
  /* Three columns on a phone means each cell is ~116px, and "$700,000" is
     the widest value in the panel — it sets the floor for every size here. */
  #aoy-webinar .yt-cval span:first-child{font-size:15px}
  #aoy-webinar .yt-cval{gap:5px; margin-top:4px}
  #aoy-webinar .yt-clabel{font-size:11px}
  #aoy-webinar .yt-ctx{font-size:10px; line-height:1.3; margin-top:6px}
  #aoy-webinar .yt-arrow{width:15px; height:15px; font-size:9px}
  #aoy-webinar .yt-bar{padding:8px 12px}
  #aoy-webinar .yt-barlabel{font-size:9.5px; letter-spacing:.04em}
}