/* ===================== /webinar — layout on top of lp-fold/lp-hero (forecast.css) ===================== */

/* .nav-funnel's own "scrolled" background rule targets a class main.js never
   adds (main.js adds "scrolled", the shared CSS checks "is-scrolled"), so the
   nav stays transparent over scrolled content on every page using bare
   .nav-funnel. Scoping the fix here rather than touching main.js/forecast.css
   sitewide, since other pages weren't part of this change. */
#site-nav.nav-funnel.scrolled {
  background: var(--charcoal-dark);
  border-bottom-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.3);
}

.wb-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-mid); background: rgba(74,158,79,0.14); border: 1px solid rgba(125,216,127,0.35);
  border-radius: 999px; padding: 6px 14px;
}

/* ---- Top bar: badge (left) / countdown (centre) / logo (right) ----
   Replaces the plain centred-logo nav on desktop and landscape tablet. A
   1fr/auto/1fr grid keeps the countdown genuinely centred regardless of the
   badge and logo being different widths (space-between can't do that).
   Below that breakpoint there's no room for three things in one bar, so the
   nav reverts to just the logo and .wb-mobile-banner (inside .lp-fold)
   carries the badge + countdown instead. */
.wb-top-bar-inner {
  max-width: 1600px; margin: 0 auto; padding: 14px 24px;
  display: flex; align-items: center; justify-content: center;
}
.wb-top-bar-badge, .wb-nav-countdown { display: none; }
.wb-top-bar-logo { margin: 0 auto; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wb-top-bar-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
  .wb-top-bar-badge { display: inline-flex; justify-self: start; }
  .wb-nav-countdown { display: flex; justify-self: center; }
  .wb-top-bar-logo { justify-self: end; margin: 0; }
}
/* Mobile/portrait-tablet: the countdown moves to .wb-mobile-topbar below, but
   the badge stays up here next to the logo instead of also dropping down,
   so the fixed block under the nav is just timer+CTA, one row. */
@media (max-width: 1023px) {
  .wb-top-bar-inner { justify-content: space-between; }
  .wb-top-bar-badge { display: inline-flex; }
  .wb-top-bar-logo { margin: 0; }
}

.wb-nav-countdown {
  align-items: center; gap: 10px; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap;
}
.wb-nav-countdown[hidden] { display: none; }
.wb-nav-countdown svg { width: 15px; height: 15px; color: var(--green-mid); flex: none; }
.wb-nav-countdown .wb-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-mid); flex: none; animation: wbPulse 1.4s ease-in-out infinite; }
.wb-nav-cd-label { color: rgba(255,255,255,0.55); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.wb-nav-cd-units { display: flex; gap: 6px; }
.wb-nav-cd-unit {
  display: inline-flex; align-items: baseline; gap: 4px;
  background: rgba(74,158,79,0.16); border: 1px solid rgba(125,216,127,0.3);
  border-radius: 6px; padding: 3px 8px;
}
.wb-nav-cd-unit b { color: var(--green-mid); font-weight: 900; font-size: 14px; font-variant-numeric: tabular-nums; }
.wb-nav-cd-unit i { color: rgba(255,255,255,0.65); font-style: normal; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

/* Mobile/portrait-tablet fallback: countdown (left) + badge (right) in one
   row, "Save My Seat" underneath, fixed right below the plain-logo nav.
   Merges what used to be two separate pieces (a countdown banner in the
   flow, and a separate fixed CTA bar) into one block, since stacking a pill,
   a countdown line AND a date line before the headline read as clutter.
   Hidden once the top bar (badge/countdown/logo in one row) takes over. */
.wb-mobile-topbar { display: none; }
@media (max-width: 1023px) {
  .wb-mobile-topbar {
    display: block; position: fixed; left: 0; right: 0; top: 79px; z-index: 150;
    padding: 8px 16px;
    background: rgba(15, 22, 33, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255,255,255,0.1); box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wb-mobile-topbar { display: none; }
}
.wb-mobile-topbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wb-mobile-topbar-row .wb-cd-countdown,
.wb-mobile-topbar-row .wb-cd-live {
  display: inline-flex; align-items: center; gap: 6px;
  color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap;
}
.wb-mobile-topbar-row .wb-cd-countdown[hidden],
.wb-mobile-topbar-row .wb-cd-live[hidden] { display: none; }
.wb-mobile-topbar-row svg { width: 13px; height: 13px; color: var(--green-mid); flex: none; }
.wb-mobile-topbar-row b { color: var(--green-mid); font-weight: 900; font-variant-numeric: tabular-nums; }
.wb-mobile-topbar-row .wb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green-mid); flex: none; animation: wbPulse 1.4s ease-in-out infinite; }

/* Shared responsive alignment: centered on mobile and portrait tablet, left
   aligned on desktop and landscape tablet. Applied to section intro/prose
   wrappers throughout the page (not to icon+text list rows, which stay left
   always). margin toggles alongside text-align so a wrapper narrower than
   its container centers as a block on mobile, but sits flush against the
   page's left edge on desktop rather than independently self-centering
   inside whatever width that one section happens to use. */
.wb-prose { margin: 0 auto; text-align: center; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wb-prose { margin: 0; text-align: left; }
}

/* Tighter than forecast.css's default fold padding, paired with the smaller
   VSL and reduced margins below, so the whole hero column (headline, sub,
   VSL, countdown, CTA) actually fits inside one screen on common laptop
   heights instead of just being vertically centered inside an oversized
   100vh block that lets the bottom spill past the fold anyway. */
.lp-fold { padding: 64px 0 32px; }

/* Page-wide container: wider than the sitewide .container (1400px) so this
   page can leave a permanent right-hand lane for the fixed registration form
   below .wb-form-rail-bp. Used by every section, hero included, so the lane
   lines up all the way down the page. */
.wb-container { max-width: 1600px; margin: 0 auto; padding: 0 24px; }
/* Same box as .wb-container, minus the sidebar-form reservation above: the
   thank-you page has no fixed form to leave room for, so reusing plain
   .wb-container there left everything sitting inside a box with 476px of
   dead padding on the right, which reads as "centered content pushed left"
   even though text-align: center was correct all along. */
.wb-wide-container { max-width: 1600px; margin: 0 auto; padding: 0 24px; }

.wb-hero-grid {
  position: relative; max-width: 1600px; margin: 0 auto;
  display: grid; gap: 40px;
}
@media (min-width: 960px) {
  .wb-hero-grid { grid-template-columns: 1fr 440px; align-items: start; gap: 48px; }
}
/* Above this width the form detaches from the grid and becomes fixed to the
   viewport (see .wb-form-card below); every other section reserves the same
   right-hand lane via .wb-container's padding-right so nothing collides.
   560px form + 56px gap keeps the split around 58-62% content / 38-42% form
   at typical desktop widths, rather than the form reading as a narrow
   afterthought next to an overly wide content column. */
@media (min-width: 1280px) {
  .wb-container { padding-right: 616px; }
}

.wb-hero-left { min-width: 0; margin: 0 auto; text-align: center; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wb-hero-left { margin: 0; text-align: left; }
}

/* Vertical rhythm, one system instead of a different margin per element:
   a single default gap between every direct child, with exceptions only
   where the relationship between two elements genuinely calls for tighter
   or looser spacing (headline->subhead is a continuation of one thought;
   the VSL is a new visual block and earns more air before it). */
.wb-hero-left > * { margin-top: 20px; }
.wb-hero-left > *:first-child { margin-top: 0; }
.wb-hero-left > .lp-h1 { margin-top: 16px; }
.wb-hero-left > .wb-subhead { margin-top: 12px; }
.wb-hero-left > .wb-vsl { margin-top: 28px; }
.wb-hero-left > .wb-trust-row { margin-top: 12px; }
.wb-hero-left > .wb-hero-logos { margin-top: 16px; }

/* Flex + order rather than moving the paragraph in the HTML: on phones the
   "Join InstallrHub..." paragraph reads better after the VSL than before
   it, but tablet/desktop keep the paragraph-then-VSL order, so the content
   needs two different sequences rather than one fixed DOM order. */
.wb-hero-left { display: flex; flex-direction: column; }
.wb-hero-left > .wb-datetime { order: 1; }
.wb-hero-left > .lp-h1 { order: 2; }
.wb-hero-left > .wb-subhead { order: 3; }
.wb-hero-left > .lp-sub { order: 4; }
.wb-hero-left > .wb-vsl { order: 5; }
.wb-hero-left > .wb-trust-row { order: 6; }
.wb-hero-left > .wb-hero-logos { order: 7; }
@media (max-width: 767px) {
  .wb-hero-left > .wb-vsl { order: 4; margin-top: 20px; }
  .wb-hero-left > .lp-sub { order: 5; margin-top: 16px; }
}

/* The headline is deliberately NOT capped to the 800px column below: at its
   largest size the explicit 3-line break (£1.7bn.../the Renewables.../Will
   Your...) needs more room than that to avoid wrapping again inside each
   line, so it's allowed to run wider than the rest of the hero. Everything
   under it (subhead, paragraph, VSL) shares one 800px column so THEY line
   up with each other, rather than each wrapping at a different width. */
.wb-hero-left .lp-h1 { margin-left: 0; margin-right: 0; font-size: clamp(32px, 5.4vw, 66px); line-height: 1.08; letter-spacing: -0.015em; }
/* On phones the 5.4vw slope never leaves the 32px floor (5.4vw tops out at
   ~23px even at 430px wide), so the headline reads flat and small across
   every phone size instead of actually scaling. Steeper slope + higher floor
   for mobile/portrait-tablet only; landscape tablet and up keep the original
   scale since they're already left-aligned, desktop-sized layout. */
@media (max-width: 1023px) {
  .wb-hero-left .lp-h1 { font-size: clamp(38px, 10vw, 50px); }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wb-hero-left .lp-h1 { font-size: clamp(32px, 5.4vw, 66px); }
}
/* forecast.css forces .lp-sub to a single nowrap line for its short tagline;
   this page's sub is a full sentence, so it must be allowed to wrap. */
.wb-hero-left .lp-sub { margin-left: 0; margin-right: 0; white-space: normal; max-width: 800px; font-size: 16px; line-height: 1.55; color: #fff; }
/* First line of copy reads as a subheading under the H1: bigger and bolder
   than the following paragraph, sitting between the headline and the date. */
.wb-subhead { max-width: 800px; font-size: clamp(18px, 2.2vw, 22px); font-weight: 700; color: #fff; line-height: 1.4; }
/* forecast.css's .lp-accent is styled for a short nowrap phrase ("10+ installs
   a month") at 1.42x size; this page's headline is set with explicit line
   breaks instead, so the accent just needs to match the rest of the type. */
.wb-hero-left .lp-h1 .lp-accent { display: inline; font-size: 1em; white-space: normal; margin: 0; letter-spacing: inherit; }

.wb-hero-left .wb-vsl { margin-left: auto; margin-right: auto; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) {
  .wb-hero-left .wb-vsl { margin-left: 0; margin-right: 0; }
}

.wb-datetime {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font-size: 14px; font-weight: 700; color: #fff;
}
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) { .wb-datetime { justify-content: flex-start; } }
.wb-datetime svg { width: 17px; height: 17px; color: var(--green-mid); flex: none; }

/* VSL placeholder: now the visual centrepiece of the hero rather than a
   small preview, now that the countdown has moved up and the sub-copy has
   room to breathe. width:100% still caps it at whatever the column actually
   is on narrower layouts; max-width is just the ceiling on wide screens. */
.wb-vsl {
  position: relative; width: 100%; max-width: 800px; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden;
  margin: 20px 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: linear-gradient(135deg, #1a2433 0%, #0f1621 100%);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}
.wb-vsl-play {
  width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--green); box-shadow: 0 12px 28px rgba(74,158,79,0.45);
}
.wb-vsl-play svg { width: 30px; height: 30px; color: #fff; margin-left: 3px; }
.wb-vsl-label { font-size: 13.5px; font-weight: 700; color: #fff; letter-spacing: 0.02em; }

/* Urgency banner: full-bleed ticker above the hero content (badge onward),
   replacing the old boxed countdown grid so nothing sits between the badge
   and the headline. Sits directly inside .lp-fold (not .wb-container), so
   its background naturally spans edge to edge; text stays centered, a
   deliberate exception to the page's left-align rule since this reads as a
   site announcement bar rather than hero content. */
.wb-urgency-banner {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  background: var(--green); color: #fff; text-align: center;
  font-size: 13.5px; font-weight: 800; letter-spacing: 0.01em;
  padding: 12px 24px;
}
.wb-urgency-banner[hidden] { display: none; }
.wb-urgency-banner svg { width: 17px; height: 17px; flex: none; }
.wb-urgency-banner b { font-weight: 900; font-variant-numeric: tabular-nums; }
.wb-urgency-banner .wb-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; flex: none; animation: wbPulse 1.4s ease-in-out infinite; }
/* .wb-cd-countdown/.wb-cd-live: bare (non -nav-) versions, used inside
   .wb-mobile-banner. display is set here (not just inherited inline
   default) so the [hidden] rule immediately below can reliably win when JS
   toggles it, the same fix needed once already for the old countdown/live
   pair when a competing unconditional `display` declaration blocked it. */
.wb-mobile-banner .wb-cd-countdown,
.wb-mobile-banner .wb-cd-live { display: inline-flex; align-items: center; gap: 6px; }
.wb-mobile-banner .wb-cd-countdown[hidden],
.wb-mobile-banner .wb-cd-live[hidden] { display: none; }
@keyframes wbPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.wb-trust-row { font-size: 13px; font-weight: 700; color: #fff; }

.wb-hero-logos { display: flex; align-items: center; flex-wrap: wrap; gap: 28px; justify-content: center; opacity: 0.9; }
@media (min-width: 1024px), (min-width: 768px) and (orientation: landscape) { .wb-hero-logos { justify-content: flex-start; } }
.wb-hero-logos img { height: 22px; width: auto; display: block; }
/* Forced 2x2 on mobile/portrait-tablet rather than relying on flex-wrap to
   land that way by luck — the 4 logos happen to wrap 2+2 at today's sizes,
   but any future per-logo resize (these get resized often) could reflow
   them to 3+1. Grid with 2 fixed columns keeps InstallrHub/FinMatch on row
   one and EasyPV/Midsummer on row two regardless of logo width. */
@media (max-width: 1023px) {
  .wb-hero-logos { display: grid; grid-template-columns: repeat(2, auto); justify-content: center; gap: 18px 28px; }
}
@media (min-width: 768px) and (orientation: landscape) {
  .wb-hero-logos { display: flex; justify-content: flex-start; }
}
.wb-hero-logos img.wb-hero-logo-sm { height: 15px; }
.wb-hero-logos img.wb-hero-logo-lg { height: 34px; }

/* Registration form card (white, floats over the dark fold) */
.wb-form-card {
  background: var(--white); border-radius: 20px; padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
@media (min-width: 960px) and (max-width: 1279px) { .wb-form-card { position: sticky; top: 100px; } }
/* Genuinely fixed to the viewport from here up, so it stays visible for the
   whole page scroll, not just while its own grid row is on screen. The right
   offset mirrors .wb-container/.wb-hero-grid's own centering math (24px base
   padding, 1600px max-width) so the card's right edge lines up with every
   section's right edge above and below it. */
@media (min-width: 1280px) {
  .wb-form-card {
    position: fixed; top: 100px;
    right: max(24px, calc((100vw - 1600px) / 2 + 24px));
    width: 560px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    z-index: 40;
  }
}
.wb-form-card h3 { font-size: clamp(19px, 2.2vw, 22px); font-weight: 800; color: var(--charcoal); line-height: 1.25; }
.wb-form-card h3 span { color: var(--green); }
.wb-form-sub { font-size: 13.5px; color: var(--grey-text); margin: 8px 0 20px; line-height: 1.5; }
.wb-form-sub em { color: var(--charcoal); font-style: normal; font-weight: 600; }
.wb-form-note { font-size: 12px; line-height: 1.5; color: var(--grey-text); margin: 4px 0 12px; text-align: center; }
.wb-form-note a { color: var(--charcoal); }

/* ---- "This is bigger than another finance option" story section ---- */
.wb-story { padding: 72px 0; background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%); color: #fff; }
.wb-story-inner { max-width: 760px; }
.wb-story h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; line-height: 1.25; }
.wb-story p { font-size: 16px; line-height: 1.65; color: #fff; margin-top: 16px; }
.wb-story p.wb-accent-line { color: var(--green-mid); font-weight: 700; }

/* ---- "What we'll reveal live" — 2x2 grid of compact cards ---- */
.wb-reveal { padding: 72px 0; background: var(--white); }
.wb-reveal-inner { max-width: 860px; }
.wb-reveal-head { margin-bottom: 32px; }
.wb-reveal h2 { font-size: clamp(26px, 3.6vw, 36px); font-weight: 800; color: var(--charcoal); margin-top: 8px; line-height: 1.25; }
.wb-reveal-sub { font-size: 16px; color: var(--grey-text); margin-top: 10px; }
.wb-reveal-list { display: grid; grid-template-columns: 1fr; gap: 16px; text-align: left; }
@media (min-width: 640px) { .wb-reveal-list { grid-template-columns: 1fr 1fr; gap: 20px; } }
.wb-reveal-item {
  display: block; text-align: left;
  background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 16px; padding: 24px;
}
.wb-reveal-n { font-size: 15px; font-weight: 900; color: var(--green); font-variant-numeric: tabular-nums; line-height: 1; margin-bottom: 10px; }
.wb-reveal-title { font-size: 17px; font-weight: 800; color: var(--charcoal); margin-bottom: 8px; line-height: 1.3; }
.wb-reveal-item p { font-size: 14.5px; line-height: 1.6; color: var(--grey-text); margin-top: 8px; }
.wb-reveal-item p:first-of-type { margin-top: 0; }
.wb-reveal-item .wb-flow { margin: 10px 0; }
.wb-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 16px 0; }
.wb-flow-step { font-size: 12.5px; font-weight: 800; color: var(--green-dark); background: var(--green-light); border: 1px solid var(--green-border); border-radius: 999px; padding: 6px 12px; }
.wb-flow-arrow { color: var(--grey-text); font-size: 13px; }

/* ---- "Most installers will learn about the scheme" ---- */
.wb-needs { padding: 72px 0; background: var(--grey-bg); }
.wb-needs-inner { max-width: 760px; }
.wb-needs h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: var(--charcoal); line-height: 1.3; }
.wb-needs h2 + h2 { margin-top: 4px; color: var(--green-dark); }
.wb-needs p { font-size: 16px; line-height: 1.65; color: var(--grey-text); margin-top: 16px; }
.wb-needs-leadin { font-weight: 700; color: var(--charcoal); margin-top: 24px; }
.wb-needs-leadin-inverse { color: #fff; }
.wb-needs .wb-check-list { margin-top: 16px; text-align: left; }
.wb-needs-close { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--grey-mid); }
.wb-needs-close p:first-child { margin-top: 0; }
.wb-needs-close .wb-accent-line { color: var(--green-dark); font-weight: 700; }

/* Shared checklist (reused by "what you'll need" and "who should attend").
   Always left-aligned regardless of the section's responsive text-align, so
   the icon+text rows never break when their ancestor centers on mobile. */
.wb-check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; text-align: left; }
.wb-check-list li { display: flex; align-items: flex-start; gap: 14px; font-size: 16px; line-height: 1.5; color: var(--charcoal); }
.wb-check-icon {
  flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; margin-top: 1px;
}
.wb-check-icon svg { width: 15px; height: 15px; color: #fff; }

/* ---- Partners: "learn from three sides of the sale" ---- */
.wb-partners { padding: 72px 0; background: var(--white); }
.wb-partners-inner { max-width: 1160px; margin: 0 auto; }
.wb-partners-head { margin-bottom: 40px; }
.wb-partners-t { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--green-dark); margin-bottom: 10px; }
.wb-partners h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: var(--charcoal); }
.wb-partners-lede { font-size: 15.5px; line-height: 1.6; color: var(--grey-text); margin-top: 12px; max-width: 640px; }
.wb-partners-row { display: grid; gap: 20px; grid-template-columns: 1fr; text-align: left; }
@media (min-width: 760px) { .wb-partners-row { grid-template-columns: repeat(3, 1fr); align-items: start; } }
.wb-partner-card {
  background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 14px; padding: 22px; text-align: left;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); transition: all 0.2s ease;
}
.wb-partner-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,0.08); transform: translateY(-2px); }
.wb-partner-logo { margin-bottom: 14px; height: 26px; display: flex; align-items: center; }
.wb-partner-logo img { height: 100%; width: auto; max-width: 130px; object-fit: contain; object-position: left center; }
.wb-partner-logo img.wb-partner-logo-installrhub { height: 57%; }
.wb-partner-logo-side { gap: 14px; height: 30px; }
.wb-partner-logo-side img { height: 100%; max-width: 96px; }
.wb-partner-name { font-size: 16.5px; font-weight: 800; color: var(--charcoal); }
.wb-partner-role { font-size: 11.5px; font-weight: 700; color: var(--green-dark); text-transform: uppercase; letter-spacing: 0.03em; margin-top: 3px; }
/* Bio is a content placeholder, not finished copy — dashed border + italic
   marks it clearly as "fill this in" rather than reading as a real bio. */
.wb-partner-bio {
  font-size: 13px; line-height: 1.55; font-style: italic; color: var(--grey-text);
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--grey-mid);
}

/* ---- Growth Report bonus ---- */
.wb-report { padding: 72px 0; background: var(--green-light); }
.wb-report-inner { max-width: 1120px; }
/* align-items: stretch (the grid default) makes both columns match the
   tallest one's height; the cover wraps the image in a flex box so the
   image itself can then be told to fill that stretched height (object-fit:
   contain keeps the book's proportions rather than cropping it). */
.wb-report-layout { display: grid; grid-template-columns: 190px 1fr; gap: 36px; margin-top: 24px; }
.wb-report-cover { display: flex; align-items: stretch; justify-content: center; }
.wb-report-cover img { width: auto; max-width: 100%; height: 100%; object-fit: contain; display: block; }
/* The tall cover image sets the row height via grid's default stretch, but
   the compact checklist next to it is much shorter — center it in that
   height rather than leaving the extra space as a trailing gap below it. */
.wb-report-copy { display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 767px) {
  .wb-report-layout { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .wb-report-cover { display: block; }
  .wb-report-cover img { width: 100%; max-width: 190px; height: auto; margin: 0 auto; }
  .wb-report-copy { text-align: center; }
  .wb-report-copy .wb-report-grid { text-align: left; }
}
.wb-report h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; color: var(--charcoal); line-height: 1.3; }
.wb-report-lede { font-size: 16px; color: var(--charcoal); opacity: 0.78; margin-top: 16px; }
.wb-report-leadin { font-weight: 700; color: var(--charcoal); margin-bottom: 16px; }
/* Compact 2x2 checklist (icon + bold lead-in + one short clause) rather
   than four boxed title+paragraph cards — scans in a glance. */
.wb-report-checklist { grid-template-columns: 1fr; }
@media (min-width: 560px) { .wb-report-checklist { grid-template-columns: 1fr 1fr; } }
/* Title and its description are forced onto their own lines (rather than
   flowing as one wrapped sentence) so a wrapped title never leaves its
   description looking like a disconnected second column. */
.wb-report-checklist li > span { display: flex; flex-direction: column; gap: 3px; }
.wb-report-checklist b { font-size: 14.5px; color: var(--charcoal); }
.wb-report-checklist small { font-size: 13px; font-weight: 400; color: var(--grey-text); }

.wb-report-who { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--green-border); text-align: left; }
.wb-report-who-lede { font-weight: 700; color: var(--charcoal); margin-bottom: 16px; }
.wb-report-who-list { grid-template-columns: 1fr; }
@media (min-width: 560px) { .wb-report-who-list { grid-template-columns: 1fr 1fr; } }
.wb-report-who-list li { font-size: 14.5px; }
.wb-report-close { margin-top: 24px; font-size: 16px; }

/* ---- Who should attend ---- */
.wb-who { padding: 72px 0; background: linear-gradient(135deg, var(--charcoal) 0%, var(--charcoal-dark) 100%); color: #fff; }
.wb-who-inner { max-width: 960px; }
.wb-who h2 { font-size: clamp(24px, 3.4vw, 32px); font-weight: 800; }
.wb-who p { font-size: 16px; line-height: 1.65; color: #fff; margin-top: 16px; }
.wb-who-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; text-align: left; }
.wb-who-list li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.5; color: #fff; }
.wb-who-list svg { flex: none; width: 20px; height: 20px; color: var(--green-mid); margin-top: 2px; }

/* ---- "Your competitors get access to the same scheme" closer ---- */
.wb-close { padding: 72px 0; background: var(--white); }
.wb-close-inner { max-width: 1040px; }
.wb-close h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 800; color: var(--charcoal); line-height: 1.3; white-space: nowrap; }
.wb-close-sub { font-size: clamp(18px, 2.1vw, 24px); font-weight: 800; color: var(--green-dark); line-height: 1.3; margin-top: 6px; white-space: nowrap; }
@media (max-width: 900px) {
  .wb-close h2, .wb-close-sub { white-space: normal; }
}
.wb-close p { font-size: 16px; line-height: 1.6; color: var(--grey-text); margin-top: 16px; }
.wb-close-questions { list-style: none; margin: 32px 0; padding: 0; display: grid; gap: 12px; }
.wb-close-questions li { font-size: 17px; font-weight: 700; color: var(--charcoal); }
.wb-close-answer { font-size: 17px; font-weight: 800; color: var(--green-dark); margin-top: 16px; }

.wb-legal-note { font-size: 12px; line-height: 1.6; color: rgba(255,255,255,0.42); max-width: 640px; margin: 28px 0 0; }

@media (max-width: 767px) {
  .wb-story, .wb-reveal, .wb-needs, .wb-partners, .wb-report, .wb-who, .wb-close { padding: 48px 0; }
  .wb-reveal-item { grid-template-columns: 40px 1fr; gap: 12px; }
}

/* .wb-mobile-topbar's "Save My Seat" button. .lp-fold's top padding is
   bumped on mobile/portrait-tablet to clear the fixed nav (79px) plus this
   whole fixed topbar (countdown/badge row + button), so hero content never
   starts underneath either of them. */
@media (max-width: 1023px) {
  .lp-fold { padding-top: 142px; }
}
/* Landscape tablet (768-1023px + landscape) and plain desktop both get the
   merged badge/countdown/logo nav bar (.wb-top-bar), which is fixed and
   ~93px tall, taller than the 64px base padding accounts for, so the
   datetime line was sitting under the nav rather than below it. */
@media (min-width: 768px) and (orientation: landscape) {
  .lp-fold { padding-top: 130px; }
}
@media (min-width: 1024px) {
  .lp-fold { padding-top: 130px; }
}
.wb-mobile-cta-btn {
  display: flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  background: var(--green); color: #fff; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap;
  border-radius: 8px; padding: 8px 12px; box-shadow: 0 8px 20px rgba(74,158,79,0.4);
}
.wb-mobile-cta-btn svg { width: 14px; height: 14px; flex: none; }

/* ===================== /webinar/thank-you ===================== */
.wb-thanks-partner-logos {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 28px;
  padding: 4px 24px 0; background: var(--white); opacity: 0.85;
}
.wb-thanks-partner-logos img { height: 20px; width: auto; display: block; }
.wb-thanks-partner-logos img.wb-thanks-logo-lg { height: 34px; }
.wb-thanks-partner-logos img.wb-thanks-logo-sm { height: 14px; }

.wb-thanks-hero { padding: 40px 0 48px; background: var(--white); text-align: center; }
.wb-thanks-hero-inner { max-width: 640px; margin: 0 auto; }
.wb-thanks-check {
  width: 64px; height: 64px; border-radius: 50%; background: var(--green);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 20px;
  box-shadow: 0 10px 26px rgba(74,158,79,0.35);
}
.wb-thanks-check svg { width: 30px; height: 30px; color: #fff; }
.wb-thanks-hero h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--charcoal); line-height: 1.2; margin-top: 4px; }
.wb-thanks-hero p { font-size: 16px; line-height: 1.6; color: var(--grey-text); margin-top: 14px; }

.wb-thanks-details { padding: 0 0 64px; background: var(--white); }
.wb-thanks-card { max-width: 640px; margin: 0 auto; background: var(--grey-bg); border: 1px solid var(--grey-mid); border-radius: 18px; padding: 32px; text-align: center; }
.wb-thanks-detail { display: flex; flex-direction: column; align-items: center; }
.wb-thanks-detail + .wb-thanks-detail { margin-top: 24px; }
.wb-thanks-detail svg { width: 22px; height: 22px; color: var(--green); flex: none; margin-bottom: 8px; }
.wb-thanks-detail b { display: block; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--grey-text); margin-bottom: 4px; }
.wb-thanks-detail span { font-size: 15.5px; font-weight: 600; color: var(--charcoal); line-height: 1.5; max-width: 40ch; }
.wb-thanks-cal {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 24px;
  background: var(--green); color: #fff; font-weight: 800; font-size: 15px; text-decoration: none;
  border-radius: 10px; padding: 13px; transition: all 0.2s ease;
}
.wb-thanks-cal:hover { background: var(--green-dark); transform: translateY(-2px); }
.wb-thanks-cal svg { width: 16px; height: 16px; }
/* Secondary action (Add to Calendar) sits under the primary Join button,
   outlined rather than filled so Join stays the obvious first click. */
.wb-thanks-cal-outline { background: transparent; color: var(--charcoal); border: 2px solid var(--grey-mid); margin-top: 12px; }
.wb-thanks-cal-outline:hover { background: var(--white); border-color: var(--charcoal); transform: translateY(-2px); }

.wb-thanks-testi { padding: 0 0 72px; background: var(--white); }
.wb-thanks-testi-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.wb-thanks-testi-head { max-width: 840px; margin: 0 auto 32px; text-align: center; }
.wb-thanks-testi-head h2 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; color: var(--charcoal); margin-top: 8px; }

/* Portrait click-to-play row, same component as .book-testimonials on
   /book-a-demo — sits above .rv-proof-videos */
.wb-thanks-testi .rv-portrait-row {
  display: flex; gap: 16px; overflow-x: auto; padding: 4px 4px 12px; margin-bottom: 32px; scroll-snap-type: x proximity;
}
@media (min-width: 1024px) {
  .wb-thanks-testi .rv-portrait-row { overflow: visible; justify-content: center; padding: 0 0 4px; }
}
.wb-thanks-testi .rv-portrait-card {
  position: relative; flex: 0 0 auto; width: 200px; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden;
  background: #0f141d; border: 1px solid var(--grey-mid); box-shadow: 0 10px 26px rgba(0,0,0,0.12);
  scroll-snap-align: start; cursor: pointer;
}
@media (min-width: 640px) { .wb-thanks-testi .rv-portrait-card { width: 220px; } }
@media (min-width: 1024px) { .wb-thanks-testi .rv-portrait-card { width: calc((100% - 48px) / 4); } }
.wb-thanks-testi .rv-portrait-card img,
.wb-thanks-testi .rv-portrait-card video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border: 0;
}
.wb-thanks-testi .rv-portrait-play {
  position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 12px;
  background: #ff0000; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45); transition: transform 0.2s ease, background 0.2s ease;
}
.wb-thanks-testi .rv-portrait-play svg { margin-left: 3px; }
.wb-thanks-testi .rv-portrait-card:hover .rv-portrait-play { background: #e60000; transform: scale(1.08); }
.wb-thanks-testi .rv-portrait-card.is-playing .rv-portrait-play,
.wb-thanks-testi .rv-portrait-card.is-playing img { display: none; }

@media (max-width: 640px) {
  .wb-thanks-hero { padding: 28px 0 32px; }
  .wb-thanks-details, .wb-thanks-testi { padding-bottom: 48px; }
  .wb-thanks-card { padding: 24px; }
}