/* GetFocus · Webinars (hub + template) · page stylesheet v1.0.2
   Part 1 = the podcast head block verbatim (the gf-pod-* layer is shared; its head CSS is page-scoped on /podcast).
   Part 2 = webinar-only rules: fonts, states, hovers, pills, dark speaker rows, breakpoints for gf-web-*. */
<style>
/* ── GetFocus · Podcast (hub + episode template) · page head ──
   The class layer is in Webflow Styles (gf-pod-*). This block holds only what a
   Webflow class cannot: font families, hovers, descendants, pseudo-element icons,
   fluid type and the player's runtime states. Same block on /podcast and on the
   Podcast episodes template. Source: handoff/podcast/webflow/head.css */
[class*="gf-pod-"] { font-family: var(--_getfocus---display); box-sizing: border-box; }
.gf-pod-chip-dark, .gf-pod-chip-lav, .gf-pod-back, .gf-pod-ehero-date, .gf-pod-ehero-guest,
.gf-pod-video-time, .gf-pod-audio-label, .gf-pod-platform-sm, .gf-pod-share, .gf-pod-tldr-label,
.gf-pod-quote-role, .gf-pod-row-num, .gf-pod-platform, .gf-pod-featured-guest, .gf-pod-times,
.gf-pod-chapter-time, .gf-pod-tab-count { font-family: var(--_getfocus---mono); }
.gf-pod-ehero-h1 { font-size: clamp(36px, 4.4vw, 56px); text-wrap: balance; }
.gf-pod-row-title, .gf-pod-featured-h2, .gf-pod-cta-h2 { text-wrap: balance; }

/* hovers */
.gf-pod-back:hover { color: #FFFFFF; }
.gf-pod-platform:hover, .gf-pod-platform-sm:hover { border-color: #4756FF; color: #4756FF; }
.gf-pod-share:hover { background-color: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.gf-pod-bigplay:hover, .gf-pod-pause:hover, .gf-pod-featured:hover .gf-pod-play { background-color: #4756FF; }
.gf-pod-row:hover { transform: translateY(-4px); }
.gf-pod-row:hover .gf-pod-row-title { color: #4756FF; }
.gf-pod-row:hover .gf-pod-row-play { background-color: #4756FF; }
.gf-pod-cta-btn:hover { background-color: #101920; color: #FFFFFF; }
.gf-pod-news-btn:hover { background-color: #3542E6; }
.gf-pod-input-dark::placeholder { color: #64696D; }
.gf-pod-input-dark:focus { border-color: #4756FF; outline: none; }
.gf-pod-bigplay:focus-visible, .gf-pod-pause:focus-visible, .gf-pod-share:focus-visible,
.gf-pod-chapter:focus-visible { outline: 2px solid #4756FF; outline-offset: 3px; }

/* play / pause glyphs — drawn in CSS so no SVG has to survive the builder */
.gf-pod-bigplay::before, .gf-pod-play::before, .gf-pod-row-play::before {
  content: ""; width: 0; height: 0; border-style: solid; border-color: transparent transparent transparent #101920;
  border-width: 14px 0 14px 23px; margin-left: 6px; transition: border-color 180ms; }
.gf-pod-play::before { border-width: 9px 0 9px 14px; margin-left: 4px; }
.gf-pod-row-play::before { border-width: 6px 0 6px 10px; margin-left: 3px; }
.gf-pod-bigplay:hover::before, .gf-pod-featured:hover .gf-pod-play::before,
.gf-pod-row:hover .gf-pod-row-play::before { border-left-color: #FFFFFF; }
.gf-pod-pause::before, .gf-pod-pause::after { content: ""; width: 5px; height: 16px; margin: 0 2.5px; background-color: #101920; transition: background-color 180ms; }
.gf-pod-pause:hover::before, .gf-pod-pause:hover::after { background-color: #FFFFFF; }
@media screen and (max-width: 767px) { .gf-pod-bigplay::before { border-width: 11px 0 11px 18px; margin-left: 5px; } }

/* player states (set by the page script) */
.gf-pod-video.is-playing .gf-pod-video-poster, .gf-pod-video.is-playing .gf-pod-bigplay { display: none; }
.gf-pod-video.is-playing .gf-pod-video-frame { display: flex; }
/* while playing, YouTube's own controls take over: no custom bar/pause on top of them */
.gf-pod-video.is-playing .gf-pod-video-bar, .gf-pod-video.is-playing .gf-pod-pause { display: none !important; }
.gf-pod-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* chapters (rendered by the page script from the CMS Chapters field) */
.gf-pod-chapter { display: flex; gap: 14px; align-items: baseline; width: 100%; padding: 16px 20px; background: none; border: 0; border-bottom: 1px solid #ECECEC; cursor: pointer; text-align: left; font-family: var(--_getfocus---display); transition: background-color 180ms; }
.gf-pod-chapter:last-child { border-bottom: 0; }
.gf-pod-chapter:hover { background-color: #F5F5F5; }
.gf-pod-chapter-time { flex: none; font-size: 13px; color: #4756FF; }
.gf-pod-chapter-title { font-size: 15px; line-height: 1.45; color: #363D43; }

/* rich text: In short + Episode notes */
.gf-pod-tldr-body .w-richtext > *:last-child, .gf-pod-notes .w-richtext > *:last-child { margin-bottom: 0; }
.gf-pod-tldr-body .w-richtext ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.gf-pod-tldr-body .w-richtext li { position: relative; padding-left: 16px; margin: 0; font-size: 16px; line-height: 1.5; color: #64696D; }
.gf-pod-tldr-body .w-richtext li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 999px; background-color: #4756FF; }
.gf-pod-notes .w-richtext p { margin: 0 0 24px; font-size: 18px; line-height: 1.5; color: #64696D; }
.gf-pod-notes .w-richtext h2, .gf-pod-notes .w-richtext h3 { font-family: var(--_getfocus---display); color: #101920; font-weight: 500; margin: 40px 0 16px; }
.gf-pod-notes .w-richtext a { color: #4756FF; text-decoration: underline; text-underline-offset: 2px; }
.gf-pod-notes .w-richtext strong { color: #101920; font-weight: 600; }

/* newsletter card */
.gf-pod-news-msg.is-shown { display: block; }
.gf-pod-news-msg.is-ok { color: #5DECFF; }
.gf-pod-news-msg.is-err { color: #FFB4B4; }
.gf-pod-news-btn[disabled] { opacity: .55; cursor: default; }
.gf-pod-news .w-form-done, .gf-pod-news .w-form-fail { display: none !important; }
.gf-pod-news .w-form { width: 100%; margin: 0; }
.gf-pod-news-form form { width: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }

/* hub: category rail (built by script) */
.gf-pod-tab { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 0; background: none; border: 0; cursor: pointer; font-family: var(--_getfocus---display); font-size: 16px; text-align: left; color: #ADAEB0; transition: color 180ms; }
.gf-pod-tab:hover, .gf-pod-tab.is-active { color: #101920; }
.gf-pod-tab::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background-color: #4756FF; flex: none; opacity: 0; }
.gf-pod-tab.is-active::before { opacity: 1; }
@media screen and (max-width: 767px) { .gf-pod-tab { width: auto; } }

/* Collection List wrappers must not break the flex layouts */
.gf-pod-list .w-dyn-list, .gf-pod-list .w-dyn-items { display: contents; }
.gf-pod-featlist .w-dyn-item + .w-dyn-item { display: none; }
.gf-pod-list .w-dyn-empty, .gf-pod-featlist .w-dyn-empty { display: none; }

/* share panel */
.gfsh-ov { position: fixed; inset: 0; background: rgba(16,25,32,.55); display: flex; align-items: center; justify-content: center; z-index: 9999; padding: 24px; }
.gfsh-md { background: #FFFFFF; border-radius: 16px; padding: 26px; max-width: 340px; width: 100%; box-shadow: 0 24px 60px rgba(16,25,32,.28); }
.gfsh-md h3 { font-family: var(--_getfocus---display); color: #101920; font-size: 19px; font-weight: 500; margin: 0 0 16px; }
.gfsh-md a, .gfsh-md button { display: block; width: 100%; box-sizing: border-box; padding: 12px 14px; margin: 0 0 8px; border: 1px solid #E5E7EB; border-radius: 8px; background: #FFFFFF; color: #101920; font-family: var(--_getfocus---display); font-size: 15px; text-align: left; text-decoration: none; cursor: pointer; }
.gfsh-md a:hover, .gfsh-md button:hover { border-color: #4756FF; color: #4756FF; }
.gfsh-md .gfsh-close { margin: 8px 0 0; border-color: transparent; color: #6b7280; text-align: center; }
</style>

/* ── Part 2 · webinars ── */
[class*="gf-web-"] { font-family: var(--_getfocus---display); box-sizing: border-box; }
.gf-web-chip-live, .gf-web-chip-flag, .gf-web-label, .gf-web-fact-k, .gf-web-spk-role, .gf-web-date-m, .gf-web-date-d,
.gf-web-count, .gf-web-countdown { font-family: var(--_getfocus---mono); }
.gf-web-chip-live::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background-color: #101920; flex: none; }
.gf-web-chip-flag { padding: 3px 9px; border-radius: 4px; background-color: rgba(94,233,240,.14); border: 1px solid rgba(94,233,240,.4); font-size: 10px; line-height: 1.4; letter-spacing: .06em; text-transform: uppercase; color: #101920; }
.gf-web-row-reg { flex: none; padding: 9px 16px; border-radius: 3px; background-color: #101920; color: #FFFFFF; font-size: 13px; font-weight: 500; line-height: 1.4; transition: background-color 180ms; }
.gf-pod-row:hover .gf-web-row-reg { background-color: #4756FF; }
.gf-web-pill { padding: 8px 14px; border-radius: 999px; border: 1px solid #D2D2D2; font-size: 14px; line-height: 1.4; color: #363D43; }
.gf-web-spk-link { color: inherit; text-decoration: none; }
.gf-web-spk-link:hover { color: #4756FF; }
.gf-web-spk.is-dark .gf-web-spk-name { color: #FFFFFF; }
.gf-web-spk.is-dark .gf-web-spk-role { color: #ADAEB0; }
.gf-web-ehero-center, .gf-pod-ehero .gf-web-lede { text-wrap: pretty; }

/* state switch (body class set by gf-webinar.js from the Status field) */
.gf-web-is-up .gf-web-state-up { display: block; }
.gf-web-is-up .gf-web-state-od { display: none; }
.gf-pod-chapter.is-static { cursor: default; }
.gf-pod-chapter.is-static:hover { background-color: transparent; }

/* hovers + focus */
.gf-web-reg-btn:hover, .gf-web-cal-btn:hover { background-color: #4756FF; color: #FFFFFF; border-color: #4756FF; }
.gf-web-input:focus { border-color: #4756FF; outline: none; }
.gf-web-input::placeholder { color: #ADAEB0; }
.gf-pod-featured:hover .gf-web-feat-btn { background-color: #FFFFFF; }
.gf-web-feat-cal:hover { border-color: #FFFFFF; }
.gf-web-invite-btn:hover { background-color: #283036; }
.gf-web-invite-input:focus { outline: 2px solid #101920; outline-offset: 1px; }
.gf-web-reg-btn[disabled], .gf-web-invite-btn[disabled] { opacity: .55; cursor: default; }
.gf-web-check::before { content: ""; width: 14px; height: 8px; margin-top: -4px; border-left: 2px solid #101920; border-bottom: 2px solid #101920; transform: rotate(-45deg); }
.gf-web-reg .w-form, .gf-web-invite .w-form, .gf-pod-news .w-form { width: 100%; margin: 0; }
.gf-web-reg .w-form-done, .gf-web-reg .w-form-fail, .gf-web-invite .w-form-done, .gf-web-invite .w-form-fail { display: none !important; }
.gf-web-reg-form form, .gf-web-reg form { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.gf-web-invite form { display: flex; gap: 8px; width: 100%; margin: 0; }

/* Collection List wrappers */
.gf-web-spk-grid .w-dyn-list, .gf-web-spk-grid .w-dyn-items { display: contents; }
.gf-web-spk-grid .w-dyn-empty { display: none; }

/* breakpoints */
@media screen and (max-width: 991px) {
  .gf-web-hero-grid { grid-template-columns: 1fr; }
}
@media screen and (max-width: 767px) {
  .gf-web-spk-card, .gf-web-reg { padding: 28px 24px; }
  .gf-web-facts { grid-template-columns: 1fr 1fr; }
  .gf-web-spk-grid { grid-template-columns: 1fr; }
  .gf-web-list-head { flex-direction: column; gap: 4px; }
  .gf-web-date { width: 56px; }
  .gf-web-date-d { font-size: 20px; }
}
@media screen and (max-width: 479px) {
  .gf-web-reg-row { grid-template-columns: 1fr; }
  .gf-web-invite form { flex-direction: column; }
  .gf-web-facts { grid-template-columns: 1fr; }
  .gf-web-feat-actions { align-items: flex-start; }
}

/* v1.0.1 · featured card shows the whole 16:9 artwork; mobile row actions sit right */
[data-web-feat] .gf-pod-featured-media { align-self: center; min-height: 0; aspect-ratio: 16 / 9; }
[data-web-feat] .gf-pod-featured-img { min-height: 0; height: 100%; }
@media screen and (max-width: 991px) { [data-web-feat] .gf-pod-featured-media { width: 100%; flex-basis: auto; } }
@media screen and (max-width: 767px) { [data-web-row] .gf-pod-row-play, [data-web-row] .gf-web-row-reg { margin-left: auto; } }
