/* The webinar pages: the invitation (webinar.html), the live gate (webinar-join.html) and the
   recording's gate (webinar-watch.html). The site's tokens, fonts, top bar and frame (style.css);
   an overlook at dusk behind them — the whole road ahead, seen from one place — and Zoom's blue
   wherever the page says where the session happens. */

/* these pages scroll like a page: the document scrolls, the body doesn't. style.css locks both for the home
   page's engine — overscroll-behavior:none included; left on a body that is itself a scroll box, it kept the
   wheel and touch from ever reaching the page (only script scrolling worked). */
html.wb-page{height:auto;min-height:100%;overflow-x:hidden;overflow-y:auto;overscroll-behavior:auto;touch-action:auto}
html.wb-page body{height:auto;min-height:100%;overflow:visible;overscroll-behavior:auto;user-select:auto;touch-action:auto}
body.wb-body{background:#000}
.wb-page .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wb-page{--zoom:#2d8cff;--zoom-soft:#7db8ff;--wa:#25d366;--bad:#ef9a8c}

/* the page opens like the shutter that closed on the previous one (as the login page) */
.reveal{min-height:100dvh;
  clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%,50% 50%);
  animation:wb-aperture 1.05s cubic-bezier(.76,0,.24,1) .1s forwards}
.reveal.done{clip-path:none;animation:none}
@keyframes wb-aperture{to{clip-path:polygon(96% -61%,161% 4%,161% 96%,96% 161%,4% 161%,-61% 96%,-61% 4%,4% -61%)}}

/* ---------- the background: the overlook, settling; the text side darker ---------- */
.wb-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#000}
.wb-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 72%;transform:scale(1.12);
  animation:wb-settle 18s var(--ease-out) forwards}
@keyframes wb-settle{to{transform:scale(1)}}
.wb-bg::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(270deg,rgba(7,7,9,.9) 0%,rgba(7,7,9,.62) 38%,rgba(7,7,9,.28) 66%,rgba(7,7,9,.5) 100%),
    linear-gradient(0deg,rgba(7,7,9,.92) 0%,rgba(7,7,9,0) 46%),
    radial-gradient(ellipse at 50% 50%,transparent 50%,rgba(0,0,0,.55) 100%)}
/* the lanterns' warmth, breathing */
.wb-glow{position:absolute;z-index:1;left:12%;bottom:6%;width:46vmax;height:46vmax;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(226,170,92,.22) 0%,rgba(226,170,92,.07) 38%,transparent 64%);
  animation:wb-breathe 7s ease-in-out infinite alternate}
@keyframes wb-breathe{from{opacity:.55;transform:scale(.92)}to{opacity:1;transform:scale(1.04)}}

/* the top bar floats over the page: the page fades out under it, as on the content pages */
.wb-body::before{content:"";position:fixed;inset-inline:0;top:0;z-index:7;height:calc(var(--pad) + 92px);pointer-events:none;
  background:linear-gradient(to bottom,rgba(7,7,9,.94) 0%,rgba(7,7,9,.78) 55%,rgba(7,7,9,0) 100%)}

/* ---------- layout ---------- */
.wb{position:relative;z-index:4;padding:calc(var(--pad) + 112px) calc(var(--frame) + clamp(16px,5vw,92px)) clamp(48px,7vw,110px)}
.wb-hero{display:grid;max-width:1280px;margin:0 auto;
  grid-template-columns:minmax(0,1.08fr) minmax(340px,452px);grid-template-areas:"copy card" "zoom card";
  gap:clamp(30px,4vw,64px) clamp(34px,5.5vw,96px);align-items:start}
.wb-copy{grid-area:copy;padding-top:clamp(0px,2vh,28px);container-type:inline-size}
.wb-card{grid-area:card}
/* the card stays at hand while the page scrolls — where the screen is tall enough to hold it */
@media (min-width:1024px) and (min-height:820px){ .wb-card{position:sticky;top:calc(var(--pad) + 92px)} }
.wb-zoom{grid-area:zoom;container-type:inline-size}
@media (max-width:1023px){
  .wb{padding-top:calc(var(--pad) + 96px)}
  .wb-hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "card" "zoom"}
  .wb-card{max-width:560px;width:100%}
}

/* entrance: one after the other, once the page is in */
.wb-kicker,.wb-lead,.wb-facts,.wb-zoom,.wb-card,.wb-rec{opacity:0;transform:translateY(18px);
  transition:opacity .9s ease calc(var(--i,0) * 90ms + 320ms),transform 1.1s var(--ease-out) calc(var(--i,0) * 90ms + 320ms)}
body:not(.pre) :is(.wb-kicker,.wb-lead,.wb-facts,.wb-zoom,.wb-card,.wb-rec){opacity:1;transform:none}

/* ---------- the copy ---------- */
.wb-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;font-size:14px;letter-spacing:.14em;color:var(--ink-soft)}
.zm{display:inline-flex;align-items:center;gap:7px;padding:5px 13px 6px 12px;border-radius:999px;background:var(--zoom);color:#fff;
  font-weight:700;font-size:15px;letter-spacing:.01em;box-shadow:0 8px 26px rgba(45,140,255,.35)}
.zm .ico{font-size:17px;stroke:#fff}
/* each line whole: the size follows the column, not the window */
.wb-h{margin-top:22px;font-family:var(--display);font-weight:700;font-size:clamp(40px,15.2cqi,118px);line-height:.96;letter-spacing:-.025em;white-space:nowrap;
  text-shadow:0 2px 40px rgba(0,0,0,.35)}
.wb-h .line{display:block;overflow:hidden;padding-bottom:.07em}
.wb-h .line > span{display:block;transform:translateY(108%);transition:transform 1.25s var(--ease-out) calc(var(--i) * 95ms + 260ms)}
body:not(.pre) .wb-h .line > span{transform:none}
.wb-h .line.sm{margin-top:.32em;font-size:.4em;font-weight:300;letter-spacing:.01em;line-height:1.15;color:var(--accent)}
.wb-lead{margin-top:22px;max-width:34ch;font-weight:300;font-size:clamp(18px,1.55vw,23px);line-height:1.5;color:var(--ink-soft)}
.wb-facts{list-style:none;display:grid;grid-template-columns:repeat(4,auto);justify-content:start;margin-top:34px;
  border-block:1px solid var(--line)}
.wb-facts li{padding:14px clamp(14px,1.8vw,26px);border-inline-start:1px solid var(--line)}
.wb-facts li:first-child{border-inline-start:0;padding-inline-start:0}
.wb-facts b{display:block;font-size:clamp(20px,1.75vw,27px);font-weight:600;line-height:1.15}
.wb-facts span{display:block;margin-top:3px;font-size:13px;color:var(--ink-dim)}
@container (max-width:520px){
  .wb-facts{grid-template-columns:1fr 1fr}
  .wb-facts li:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .wb-facts li:nth-child(n+3){border-top:1px solid var(--line)}
}

/* ---------- the card ---------- */
.wb-card-in{position:relative;border-radius:26px;padding:clamp(22px,2.6vw,34px);
  background:rgba(11,11,13,.74);border:1px solid rgba(244,241,234,.15);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 40px 110px rgba(0,0,0,.58),inset 0 1px 0 rgba(255,255,255,.06)}
.wb-card-in::before{content:"";position:absolute;inset-inline:26px;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.8}
.wb-loading{padding:40px 0;text-align:center;color:var(--ink-dim)}
.wbc-h{margin-bottom:4px}
.wbc-k{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.16em;color:var(--accent)}
.live-dot{position:relative;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.live-dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:1px solid var(--accent);animation:wb-ping 1.8s ease-out infinite}
@keyframes wb-ping{from{opacity:.9;transform:scale(.5)}to{opacity:0;transform:scale(1.6)}}
.wbc-h h2,.wb-done h2{margin-top:8px;font-size:clamp(26px,2.3vw,32px);font-weight:700;line-height:1.12;letter-spacing:-.01em;outline:none}
.wbc-sub{margin-top:8px;font-weight:300;color:var(--ink-soft);line-height:1.5}

/* ---------- a session, as a ticket: a date stub, a perforation, the details ---------- */
.tk-list{border:0;margin:18px 0 8px;padding:0;display:grid;gap:10px;min-width:0}
.tk{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) auto;align-items:center;gap:14px;
  padding:12px 16px 12px 14px;border-radius:16px;background:rgba(244,241,234,.035);border:1px solid rgba(244,241,234,.14);
  cursor:pointer;transition:border-color .3s,background .3s,box-shadow .3s,transform .4s var(--ease-out)}
.tk input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.tk:hover{border-color:rgba(244,241,234,.34)}
.tk:has(input:checked){border-color:var(--accent);background:linear-gradient(110deg,rgba(210,173,107,.16),rgba(210,173,107,.04) 60%);
  box-shadow:0 0 0 4px rgba(210,173,107,.1),0 16px 40px rgba(0,0,0,.3)}
.tk:has(input:focus-visible){outline:1px solid var(--accent);outline-offset:4px}
.tk:active{transform:scale(.99)}
.tk.off{opacity:.45;cursor:not-allowed}
/* the bites out of the perforation */
.tk::before,.tk::after{content:"";position:absolute;inset-inline-start:69px;width:12px;height:12px;border-radius:50%;background:#0f0f11}
.tk::before{top:-7px}.tk::after{bottom:-7px}
.tk-date{display:grid;justify-items:center;line-height:1;padding-inline-end:14px;border-inline-end:1px dashed rgba(244,241,234,.28)}
.tk-date b{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.02em}
.tk-date i{margin-top:5px;font-style:normal;font-size:12px;letter-spacing:.14em;color:var(--accent)}
.tk-body{min-width:0}
.tk-body b{display:block;font-size:16px;font-weight:600;line-height:1.3}
.tk-body span{display:block;margin-top:3px;font-size:13px;color:var(--ink-dim)}
.tk-seat{font-size:12px;color:var(--accent);white-space:nowrap}
.tk-seat.full{color:var(--bad)}
.tk-check{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;border:1px solid rgba(244,241,234,.32);color:transparent;transition:.3s}
.tk-check .ico{font-size:14px;stroke-width:2.6}
.tk:has(input:checked) .tk-check{background:var(--accent);border-color:var(--accent);color:#17130b}
.tk.one{cursor:default;margin:18px 0 8px;border-color:rgba(210,173,107,.55);
  background:linear-gradient(110deg,rgba(210,173,107,.14),rgba(210,173,107,.03) 60%)}
.tk.one:hover{border-color:rgba(210,173,107,.55)}

/* ---------- the form ---------- */
.wbf{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.wf-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:420px){ .wf-row{grid-template-columns:1fr} }
.wf{position:relative}
.wf input,.wf select{width:100%;height:56px;padding:21px 15px 7px;border-radius:14px;font:inherit;font-size:16px;color:var(--ink);
  background:rgba(244,241,234,.045);border:1px solid rgba(244,241,234,.2);outline:none;
  transition:border-color .3s,background .3s,box-shadow .3s}
.wf input[dir="ltr"]{text-align:right}
.wf select{appearance:none;-webkit-appearance:none;padding-inline-end:40px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d2ad6b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:16px;background-position:left 14px center}
.wf select option{color:#111;background:#f4f1ea}
.wf input:hover,.wf select:hover{border-color:rgba(244,241,234,.4)}
.wf input:focus,.wf select:focus{border-color:var(--accent);background:rgba(244,241,234,.07);box-shadow:0 0 0 4px rgba(210,173,107,.15)}
.wf label{position:absolute;inset-inline-start:15px;top:18px;font-size:16px;color:var(--ink-dim);pointer-events:none;
  transform-origin:right top;transition:transform .35s var(--ease-out),color .3s}
.wf input:focus + label,.wf input:not(:placeholder-shown) + label,.wf-sel label{transform:translateY(-11px) scale(.76);color:var(--accent)}
.wf.bad input,.wf.bad select{border-color:var(--bad)}
.wf-err{min-height:0;margin-top:5px;font-size:13px;color:var(--bad)}
.wf-err:empty{display:none}
/* the year of study: a closed list, as pills */
.wp{border:0;padding:0;margin:2px 0 0;min-width:0}
.wp legend{font-size:13px;letter-spacing:.06em;color:var(--ink-dim);margin-bottom:8px}
.wp-opts{display:flex;flex-wrap:wrap;gap:7px}
.wp-opts label{position:relative;cursor:pointer}
.wp-opts input{position:absolute;opacity:0;width:1px;height:1px}
.wp-opts span{display:inline-block;padding:8px 13px;border-radius:999px;font-size:14px;border:1px solid rgba(244,241,234,.22);
  background:rgba(244,241,234,.035);transition:.25s}
.wp-opts label:hover span{border-color:rgba(244,241,234,.45)}
.wp-opts input:checked + span{background:var(--accent);border-color:var(--accent);color:#17130b;font-weight:600}
.wp-opts input:focus-visible + span{outline:1px solid var(--accent);outline-offset:3px}
.wp.bad .wp-opts span{border-color:rgba(239,154,140,.6)}
/* the consent: unticked, plainly worded */
.wc{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.45;color:var(--ink-soft);cursor:pointer}
.wc input{position:absolute;opacity:0;width:1px;height:1px}
.wc .box{flex:none;display:grid;place-items:center;width:20px;height:20px;margin-top:1px;border-radius:6px;border:1px solid rgba(244,241,234,.35);
  color:transparent;transition:.25s}
.wc .box .ico{font-size:13px;stroke-width:2.8}
.wc input:checked + .box{background:var(--accent);border-color:var(--accent);color:#17130b}
.wc input:focus-visible + .box{outline:1px solid var(--accent);outline-offset:3px}
/* the honeypot: not rendered — browsers don't autofill what isn't there (wb-common.js) */
.wh{display:none}
/* the button: the one gold thing on the card */
.wb-go{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:58px;margin-top:4px;border:0;border-radius:16px;font:inherit;font-size:18px;font-weight:600;letter-spacing:.01em;color:#17130b;
  background:linear-gradient(180deg,#e6c78d,#c99c55);box-shadow:0 14px 34px rgba(210,173,107,.28),inset 0 1px 0 rgba(255,255,255,.4);
  cursor:pointer;transition:transform .3s var(--ease-out),box-shadow .3s}
.wb-go::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.45) 50%,transparent 70%);
  transform:translateX(120%);transition:transform .9s var(--ease-out)}
.wb-go:hover{transform:translateY(-1px);box-shadow:0 18px 42px rgba(210,173,107,.38),inset 0 1px 0 rgba(255,255,255,.4)}
.wb-go:hover::after{transform:translateX(-120%)}
.wb-go:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.wb-go .arrow{font-size:19px;transition:transform .4s var(--ease-out)}
.wb-go:hover .arrow{transform:translateX(-4px)}
.wb-go .spin{display:none;font-size:20px}
.wb-go.busy{pointer-events:none;opacity:.85}
.wb-go.busy .spin{display:block;animation:wb-spin .9s linear infinite}
.wb-go.busy .arrow{display:none}
@keyframes wb-spin{to{transform:rotate(360deg)}}
.wbf-msg{font-size:14px;color:var(--bad);line-height:1.45}
.wbf-msg:empty{display:none}
.wbf-note{font-size:12.5px;color:var(--ink-dim);text-align:center}
.wbf-note a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}
.wbf-note a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.wcr.bad .wc .box{border-color:var(--bad)}
.wb-back{align-self:center;background:none;border:0;padding:6px 10px;font:inherit;font-size:14px;color:var(--ink-dim);cursor:pointer;
  text-decoration:underline;text-underline-offset:4px}
.wb-back:hover{color:var(--ink)}

/* the recording, beside the registration */
.wb-recalt{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px;margin-top:16px;padding:14px 16px;
  border-radius:16px;border:1px solid rgba(244,241,234,.16);background:rgba(244,241,234,.03);transition:border-color .3s,background .3s}
.wb-recalt:hover{border-color:var(--accent);background:rgba(210,173,107,.06)}
.wb-recalt-play{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--accent)}
.wb-recalt-play .ico{font-size:16px;fill:var(--accent);stroke:none;margin-inline-end:-2px}
.wb-recalt b{display:block;font-size:15px;font-weight:600}
.wb-recalt small{display:block;margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink-dim)}
.wb-recalt .arrow{color:var(--accent);font-size:18px}
.wbc-h + .wb-recalt{margin:14px 0 4px}
/* no session open: the recording comes first, then "the next one?" with a line between them */
.wb-recalt.top{margin:12px 0 24px;border-color:rgba(210,173,107,.45);background:rgba(210,173,107,.07)}
.wb-recalt.top + .wbc-h{padding-top:20px;border-top:1px solid rgba(244,241,234,.12)}
.wb-recalt.top + .wbc-h h2{margin-top:0}

/* ---------- thanks ---------- */
.wb-done{text-align:center}
.wb-done .wbc-k{justify-content:center;margin-top:16px}
.wb-stamp{display:grid;place-items:center;width:74px;height:74px;margin:2px auto 0;border-radius:50%;color:#17130b;
  background:radial-gradient(circle at 35% 30%,#f0d39c,#c99c55);box-shadow:0 0 0 8px rgba(210,173,107,.14),0 18px 44px rgba(210,173,107,.35);
  animation:wb-stamp .9s var(--ease-out) both}
.wb-stamp .ico{font-size:36px;stroke-width:2.4}
@keyframes wb-stamp{from{opacity:0;transform:scale(1.8) rotate(-18deg)}60%{opacity:1;transform:scale(.94) rotate(3deg)}to{transform:none}}
.wb-done .tk{text-align:start}
.wb-cal{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;margin-top:4px;font-size:14px;color:var(--ink-dim)}
.wb-cal a{padding:7px 13px;border-radius:999px;border:1px solid rgba(244,241,234,.25);color:var(--ink);transition:.25s}
.wb-cal a:hover{border-color:var(--accent);color:var(--accent)}
.wb-wa{margin-top:20px;padding:18px;border-radius:18px;text-align:start;background:rgba(37,211,102,.07);border:1px solid rgba(37,211,102,.28)}
.wb-wa p{font-size:15px;line-height:1.55;color:var(--ink-soft)}
.wb-wa p b{color:var(--ink);font-weight:600}
.wb-wa-also{margin-top:8px;font-size:14px !important;color:var(--ink-dim) !important}
.wb-wa-go{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;margin-top:14px;border-radius:14px;
  font-size:17px;font-weight:600;color:#06240f;background:var(--wa);box-shadow:0 12px 30px rgba(37,211,102,.25);transition:transform .3s var(--ease-out)}
.wb-wa-go:hover{transform:translateY(-1px)}
.wb-wa-go .ico{font-size:22px}
.wb-wa-go .ring{position:relative;display:grid;place-items:center;width:30px;height:30px}
.wb-wa-go .ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.wb-wa-go .ring circle{fill:none;stroke:#06240f;stroke-width:2.4;stroke-dasharray:97.4;stroke-dashoffset:0;opacity:.75}
.wb-wa-go .ring.go circle{animation:wb-ring var(--t,8s) linear forwards}
@keyframes wb-ring{to{stroke-dashoffset:97.4}}
.wb-wa-go .ring b{font-size:13px}
.wb-wa-auto{margin-top:10px;text-align:center;font-size:13px !important;color:var(--ink-dim) !important}
.wb-wa-auto button{background:none;border:0;padding:0 2px;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* ---------- what you're opening: Zoom ---------- */
.wb-zoom h2{font-size:clamp(22px,2vw,28px);font-weight:600}
.wb-zoom h2 em{font-style:normal;color:var(--zoom-soft)}
.wb-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.wb-steps li{display:flex;gap:14px;padding:18px 18px 18px 16px;border-radius:20px;background:rgba(9,9,11,.56);border:1px solid var(--line);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.wb-steps .n{flex:none;font-family:var(--display);font-size:46px;font-weight:700;line-height:.82;color:transparent;-webkit-text-stroke:1px var(--accent)}
.wb-steps b{display:block;font-size:16px;font-weight:600}
.wb-steps span{display:block;margin-top:4px;font-size:14px;line-height:1.5;color:var(--ink-soft)}
.wb-steps a{color:var(--zoom-soft);text-decoration:underline;text-underline-offset:3px}
@container (max-width:620px){ .wb-steps{grid-template-columns:1fr} .wb-steps li{align-items:center} }

/* ---------- "רוצה לצפות בוובינר הקודם?" ---------- */
.wb-rec{max-width:1280px;margin:clamp(40px,6vw,80px) auto 0}
.wb-rec-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:20px;padding:clamp(18px,2.4vw,28px);
  border-radius:24px;background:rgba(9,9,11,.66);border:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.wb-rec-play{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;border:1px solid var(--accent);color:var(--accent)}
.wb-rec-play .ico{font-size:24px;fill:var(--accent);stroke:none;margin-inline-end:-3px}
.wb-rec h2{font-size:clamp(20px,1.8vw,26px);font-weight:600}
.wb-rec p{margin-top:4px;color:var(--ink-soft)}
.wb .cta{opacity:1;transform:none;margin-top:0}
@media (max-width:700px){ .wb-rec-in{grid-template-columns:auto minmax(0,1fr)} .wb-rec .cta{grid-column:1 / -1;justify-content:center} }

/* ---------- the footer, over the picture ---------- */
.wb-body .sitefoot{padding:clamp(40px,5vw,64px) calc(var(--frame) + clamp(16px,5vw,92px)) calc(var(--pad) + 40px);
  background:rgba(7,7,9,.9);border-top:1px solid var(--line)}

/* =====================================================================
   THE GATES — one card in the middle: the phone, then (for someone new) the rest,
   then the video (the recording) or Zoom (the live session)
   ===================================================================== */
.wg{position:relative;z-index:4;min-height:100dvh;display:grid;place-items:center;
  padding:calc(var(--pad) + 100px) calc(var(--frame) + 16px) calc(var(--pad) + 40px)}
.wg-card{width:min(480px,100%);opacity:0;transform:translateY(18px);transition:opacity .9s ease .35s,transform 1.1s var(--ease-out) .35s}
.wg-card.wide{width:min(1040px,100%)}
body:not(.pre) .wg-card{opacity:1;transform:none}
.wg-card .wb-card-in{text-align:start}
.wg-video{position:relative;aspect-ratio:16/9;margin-top:18px;border-radius:18px;overflow:hidden;background:#000;
  box-shadow:0 30px 90px rgba(0,0,0,.6),0 0 0 1px rgba(244,241,234,.12)}
.wg-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wg-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:13px;color:var(--ink-dim)}
.wg-zoom{display:flex;align-items:center;gap:14px;margin-top:18px;padding:16px;border-radius:16px;background:rgba(45,140,255,.1);border:1px solid rgba(45,140,255,.35)}
.wg-zoom .zm{flex:none}
.wg-zoom p{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
.wg-go-zoom{background:linear-gradient(180deg,#4aa0ff,#1f7ef0);color:#fff;box-shadow:0 14px 34px rgba(45,140,255,.32),inset 0 1px 0 rgba(255,255,255,.3)}
.wg-alt{margin-top:14px;text-align:center;font-size:14px;color:var(--ink-dim)}
.wg-alt a{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;clip-path:none}
  .wb-bg img,.wb-glow,.live-dot::after,.wb-stamp{animation:none;transform:none}
  .wb-h .line > span{transition:none;transform:none}
  :is(.wb-kicker,.wb-lead,.wb-facts,.wb-zoom,.wb-card,.wb-rec,.wg-card){transition:none}
  .wb-wa-go .ring.go circle{animation:none}
}

/* the gates' headline: the page's one heading, the card's size */
.wg-h{margin-top:8px;font-size:clamp(26px,2.4vw,34px);font-weight:700;line-height:1.12;letter-spacing:-.01em;outline:none}
.wg-card .wbc-k .live-dot{margin-inline-end:2px}
a.wb-go{text-decoration:none}
.wb-go .spin.on{display:block;animation:wb-spin .9s linear infinite}
.wg-zoom a{color:var(--zoom-soft);text-decoration:underline;text-underline-offset:3px}
.wg-meta a{color:var(--accent)}