/* ==========================================================================
   Design tokens
   ========================================================================== */
:root {
  --navy-950: #060b16;
  --navy-900: #0b1526;
  --navy-800: #121f38;
  --navy-700: #1b2c4c;
  --blue: #2e6ff2;
  --blue-dark: #1f57d1;
  --blue-light: #6ea1ff;
  --white: #ffffff;
  --off-white: #eef3fb;
  --text-dark: #0f172a;
  --text-gray: #5b6577;
  --text-gray-light: #94a1b8;
  --border-light: #e2e8f4;

  --container-width: 1120px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --shadow-card: 0 20px 45px -20px rgba(11, 21, 38, 0.35);
  --shadow-soft: 0 10px 30px -15px rgba(11, 21, 38, 0.2);
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-size: 125%; /* 20px base — bumps every rem-based text size on the page proportionally */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--text-dark);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--blue);
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn-primary {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  border: none;
  cursor: pointer;
  background: var(--blue);
  color: var(--white);
  padding: 16px 28px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
  box-shadow: var(--shadow-soft);
}

.btn-primary:hover {
  background: var(--blue-dark);
  transform: translateY(-1px);
}

/* A session whose date has passed — button stays visible (not hidden) but reads as inert. */
.btn-primary.btn-closed,
.btn-primary.btn-closed:hover {
  background: var(--text-gray-light);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* Sold out, but still clickable (opens the Priority List) — deliberately its own shade: not the
   grey "closed" look (this isn't inert), and not the normal active blue (it needs to visibly read
   as full, not as a regular CTA). Reuses existing blue tokens rather than a new color. */
.btn-primary.btn-soldout {
  background: var(--blue-dark);
}

.btn-primary.btn-soldout:hover {
  background: var(--navy-700);
}

.btn-primary .btn-sub {
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
  opacity: 0.9;
  text-transform: none;
}

.btn-max {
  display: flex;
  max-width: 420px;
  margin: 0 auto;
}

.link-plain {
  background: none;
  border: none;
  color: var(--blue);
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

/* ==========================================================================
   Top announcement bar
   ========================================================================== */
.announcement-bar {
  background: var(--blue);
  color: var(--white);
  text-align: center;
  padding: 10px 16px;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* A plain pulsing dot — the "this is happening live" convention from live-TV/recording
   indicators — rather than a play icon, which implies something to click and play. */
.announcement-bar .badge-dot {
  position: relative;
  display: inline-flex;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
  margin-right: 10px;
  vertical-align: middle;
}

.announcement-bar .badge-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #ff3b30;
  animation: badge-dot-pulse 2s ease-out infinite;
}

@keyframes badge-dot-pulse {
  0% {
    transform: scale(1);
    opacity: 0.6;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .announcement-bar .badge-dot::before {
    animation: none;
    opacity: 0;
  }
}

.announcement-bar strong {
  font-weight: 800;
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  background: var(--navy-900);
  color: var(--white);
  padding: 56px 0 90px;
}

.hero-heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 40px;
}

.hero-heading h1 {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  line-height: 1.15;
  margin: 0 0 16px;
  font-weight: 800;
}

.hero-heading .subhead {
  color: var(--blue-light);
  font-size: clamp(1rem, 2vw, 1.2rem);
  font-weight: 500;
  margin: 0;
}

/* A second, more prominent "free" mention for quick scanners — the top announcement bar is easy
   to skim past (banner blindness), so this repeats the claim right where the eye actually lands,
   and adds the seat count the bar doesn't have room for. Same blue palette, not a new accent. */
.hero-pill {
  display: inline-block;
  background: rgba(110, 161, 255, 0.15);
  color: var(--blue-light);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 6px 16px;
  border-radius: 999px;
  margin: 0 0 16px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 32px;
  align-items: stretch;
}

.hero-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 380px;
}

.hero-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.stage-photo {
  background: var(--white);
  padding: 40px 0 70px;
  border-top: 1px solid var(--border-light);
}

.stage-photo-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 480px;
}

.stage-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-card h2 {
  font-size: 1.3rem;
  margin: 0 0 18px;
  font-weight: 800;
  line-height: 1.3;
}

.checklist {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.98rem;
  line-height: 1.45;
}

.checklist svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  fill: var(--blue);
}

.hero-card .microcopy {
  font-style: italic;
  color: var(--text-gray);
  font-size: 0.85rem;
  margin: 0 0 20px;
  line-height: 1.5;
}

/* Tightens the gap between the two microcopy lines specifically, to about half the usual 20px —
   the second line's own bottom margin (spacing before "Choose your session:") stays untouched. */
.hero-card .microcopy:has(+ .microcopy) {
  margin-bottom: 10px;
}

/* One shared style for the hero and modal: pressed is the selected session,
   while the separate outline indicates keyboard focus, not a second selection. */
.session-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.session-selector-label {
  margin: 0 0 8px;
  color: var(--text-gray);
  font-size: 0.8rem;
  font-weight: 700;
}

/* Only one session scheduled (main.js sets this on <body>): nothing to choose between, so the
   picker goes away in the hero and the modal. The date itself still shows on the button and in
   the modal. */
.single-session .session-selector,
.single-session .session-selector-label {
  display: none;
}

.session-pill {
  flex: 1 1 125px;
  min-height: 46px;
  padding: 10px 8px;
  border: 2px solid #e1e7f2;
  border-radius: 10px;
  background: var(--white);
  color: var(--text-dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.session-pill[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}

.session-pill:focus-visible {
  outline: 3px solid #eea000;
  outline-offset: 3px;
}

/* Keep the short timezone label beside its time on phone screens. Flex wrapping
   still lets whole pills stack on especially narrow screens or with enlarged text. */
@media (max-width: 480px) {
  .session-pill {
    font-size: 0.82rem;
    padding-inline: 4px;
  }
}

#modalSessionChoice > p {
  font-size: 0.9rem;
  margin: 0 0 18px;
}

.hero-card .priority-link {
  text-align: center;
  font-style: italic;
  font-size: 0.85rem;
  color: var(--text-gray);
  margin: 14px 0 0;
}

/* ==========================================================================
   As seen on (inside hero)
   ========================================================================== */
.as-seen-on {
  margin-top: 48px;
  text-align: center;
}

.as-seen-on-label {
  display: block;
  text-align: center;
  color: var(--blue-light);
  font-weight: 800;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.logo-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.brand-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
  padding: 16px 30px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}

.brand-logo-lg {
  height: 44px;
  width: auto;
  flex-shrink: 0;
}

/* Explicit widths (matching each logo's own aspect ratio at height: 34px) — some browsers don't
   reliably derive a "width: auto" size from an SVG <img>'s own intrinsic ratio inside a flex
   container, so these are spelled out in pixels to guarantee correct, consistent sizing. */
.logo-comedy-central {
  width: 128px;
}

.logo-joyn {
  width: 105px;
}

/* ==========================================================================
   Hosted-by bar
   ========================================================================== */
.hosted-by {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin: -56px auto 0;
  max-width: var(--container-width);
  padding: 28px 32px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hosted-by h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.hosted-by ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hosted-by li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-dark);
}

.hosted-by svg {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--blue);
  margin-top: 2px;
}

.brand-text {
  font-weight: 700;
}

.headshot-frame {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  overflow: hidden;
  justify-self: end;
}

.headshot-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonials {
  background: var(--off-white);
  padding: 70px 0;
  border-top: 1px solid var(--border-light);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.testimonial-card {
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  text-align: center;
  box-shadow: var(--shadow-soft);
}

.testimonial-photo {
  display: block;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 18px;
}

.testimonial-quote {
  color: var(--text-gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0 0 16px;
}

.testimonial-name {
  font-weight: 800;
  font-size: 0.92rem;
  margin: 0;
}

/* ==========================================================================
   Welcome video
   ========================================================================== */
.welcome-video {
  background: var(--white);
  padding: 70px 0;
  text-align: center;
  border-top: 1px solid var(--border-light);
}

.welcome-video-frame {
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 16 / 9;
  background: var(--navy-800);
}

.welcome-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* ==========================================================================
   Personal note
   ========================================================================== */
.personal-note {
  background: var(--white);
  padding: 70px 0;
  border-top: 1px solid var(--border-light);
}

.personal-note .note-inner {
  max-width: 680px;
  margin: 0 auto;
  text-align: left;
}

.personal-note .note-inner p {
  margin: 0 0 2.7rem;
  line-height: 1.7;
  color: var(--text-dark);
  font-size: 1.05rem;
}

.personal-note .note-inner p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   Centered statement block
   ========================================================================== */
.statement {
  background: var(--off-white);
  padding: 64px 0;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.statement p {
  max-width: 620px;
  margin: 0 auto 2.6rem;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--text-dark);
}

.statement p:last-child {
  margin-bottom: 0;
  font-weight: 700;
}

/* ==========================================================================
   Section heading + eyebrow
   ========================================================================== */
.eyebrow {
  display: block;
  text-align: center;
  color: var(--blue);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.section-heading {
  text-align: center;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 44px;
  line-height: 1.3;
}

.section-heading.tight {
  margin-bottom: 16px;
}

/* ==========================================================================
   Exercises
   ========================================================================== */
.exercises {
  background: var(--white);
  padding: 70px 0;
  border-top: 1px solid var(--border-light);
}

.exercise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 44px;
}

.exercise-card {
  background: var(--navy-900);
  color: var(--white);
  border-radius: var(--radius-md);
  padding: 32px 26px;
  text-align: center;
}

.exercise-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(46, 111, 242, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
}

.exercise-icon svg {
  width: 24px;
  height: 24px;
  fill: var(--blue-light);
}

.exercise-card .label {
  color: var(--blue-light);
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.exercise-card h3 {
  margin: 0 0 12px;
  font-size: 1.2rem;
}

.exercise-card p {
  margin: 0;
  color: var(--text-gray-light);
  font-size: 0.92rem;
  line-height: 1.6;
}

/* ==========================================================================
   Who is this for
   ========================================================================== */
.who-for {
  background: var(--off-white);
  padding: 70px 0;
  border-top: 1px solid var(--border-light);
  text-align: center;
}

.who-for .subtext {
  max-width: 560px;
  margin: 0 auto 40px;
  color: var(--text-gray);
  font-size: 1.05rem;
}

.role-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 16px;
  max-width: 700px;
  margin: 0 auto;
}

.role-grid span {
  font-weight: 700;
  font-size: 1.02rem;
}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq {
  background: var(--white);
  padding: 70px 0;
  border-top: 1px solid var(--border-light);
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  border-top: 1px solid var(--border-light);
}

.faq-item {
  border-bottom: 1px solid var(--border-light);
}

.faq-question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 4px;
  text-align: left;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text-dark);
}

.faq-question .chevron {
  flex: none;
  width: 18px;
  height: 18px;
  fill: var(--text-dark);
  transition: transform 0.2s ease;
}

.faq-question[aria-expanded="true"] .chevron {
  transform: rotate(90deg);
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.25s ease;
}

.faq-answer p {
  margin: 0 0 20px;
  padding: 0 4px;
  color: var(--text-gray);
  line-height: 1.65;
  font-size: 0.96rem;
}

/* ==========================================================================
   Footer CTA + footer
   ========================================================================== */
.footer-cta {
  background: var(--navy-900);
  color: var(--white);
  padding: 70px 0;
  text-align: center;
}

.footer-cta h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 800;
  margin: 0 0 36px;
  line-height: 1.3;
}

.site-footer {
  background: var(--navy-950);
  color: var(--text-gray-light);
  padding: 28px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-brand {
  color: var(--white);
  font-weight: 800;
  font-size: 1rem;
  text-decoration: none;
}

.footer-link {
  color: var(--text-gray-light);
  font-size: 0.85rem;
  text-decoration: underline;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-copy {
  width: 100%;
  text-align: center;
  font-size: 0.78rem;
  margin-top: 18px;
  color: var(--text-gray-light);
}

/* ==========================================================================
   Modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 11, 22, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}

.modal-card {
  background: var(--white);
  border-radius: var(--radius-lg);
  /* width:100% inside .modal-overlay's padding already shrinks this to fit small screens on its
     own — raising the cap only takes effect once there's actually room to spare, so this doesn't
     need its own narrow-screen override. */
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 40px); /* matches .modal-overlay's 20px top+bottom padding */
  padding: 36px 32px;
  position: relative;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

/* The card itself stays a fixed height on short screens (so the close button, positioned relative
   to it, never scrolls away) — the form inside scrolls on its own if its content is taller than
   that, so the submit button and every field stay reachable regardless of device height. */
#registerForm {
  overflow-y: auto;
  min-height: 0;
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: var(--off-white);
  color: var(--text-dark);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-card h2 {
  font-size: 1.4rem;
  margin: 0 0 8px;
  font-weight: 800;
}

.modal-card .modal-sub {
  color: var(--text-gray);
  font-size: 0.92rem;
  margin: 0 0 24px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  margin-bottom: 6px;
}

.field input {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.98rem;
  background: var(--white);
  color: var(--text-dark);
}

.field input:focus {
  outline: none;
  border-color: var(--blue);
}

.form-error {
  color: #d92d20;
  font-size: 0.82rem;
  margin: -8px 0 16px;
  min-height: 1em;
}

/* Multi-step register flow (see main.js's renderModalStep). Visibility per step goes through this
   class rather than the `hidden` attribute, so the two never fight (e.g. .btn-primary sets its own
   display, which would beat `hidden`). */
.step-hidden {
  display: none !important;
}

.modal-step-indicator {
  margin: 0 0 6px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gray-light);
}

.modal-step-summary {
  margin: 0 0 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-dark);
}

.modal-questions {
  margin: 0 0 8px;
}

.choice-group {
  border: none;
  padding: 0;
  margin: 0 0 20px;
}

.choice-group legend {
  padding: 0;
  margin: 0 0 10px;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text-dark);
}

/* Tap-to-select chips: the radio itself is visually hidden but stays focusable, so keyboard and
   screen-reader use still works. */
.choice-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.choice-chip {
  display: block;
  position: relative;
  margin: 0;
  cursor: pointer;
}

.choice-chip input {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.choice-chip span {
  display: block;
  padding: 9px 15px;
  border: 1.5px solid var(--border-light);
  border-radius: 999px;
  background: var(--white);
  font-size: 0.9rem;
  color: var(--text-dark);
  transition: border-color 0.15s ease, background 0.15s ease;
}

.choice-chip:hover span {
  border-color: var(--blue-light);
}

.choice-chip input:checked + span {
  border-color: var(--blue);
  background: var(--off-white);
  font-weight: 700;
}

.choice-chip input:focus-visible + span {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.modal-back {
  display: block;
  margin: 14px auto 0;
  font-size: 0.9rem;
}

/* A Cialdini commitment-and-consistency step before the register submit button: same pale-blue
   box already used for the seats-left callouts, not a new alarm-style treatment. */
.commitment-consent {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin: 0 0 16px;
  font-size: 0.85rem;
  color: var(--text-gray);
  line-height: 1.5;
}

.commitment-consent p {
  margin: 0 0 8px;
}

.commitment-consent-heading {
  font-size: 1rem;
  font-weight: 800;
  color: var(--blue-dark);
  margin: 0 0 8px;
}

.commitment-consent-question {
  font-weight: 600;
  color: var(--text-dark);
}

.commitment-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  font-weight: 700;
  color: var(--text-dark);
  margin: 10px 0 0;
}

.commitment-consent-check input[type="checkbox"] {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--blue);
  cursor: pointer;
  flex: none;
}

.email-typo-hint {
  font-size: 0.82rem;
  color: var(--text-gray);
  margin: 6px 0 0;
}

.email-typo-hint button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

.modal-seats-left {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--text-gray);
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
  margin: 14px 0 16px;
}

/* Sold-out state renders as several short <p> lines rather than one dense paragraph — a little
   breathing room between them, not a full paragraph's worth. */
.modal-seats-left p {
  margin: 0 0 8px;
}

.modal-seats-left p:last-child {
  margin-bottom: 0;
}

.modal-seats-left.seats-left-full {
  color: #d92d20;
  font-weight: 600;
}

.seats-left-count {
  color: var(--blue-dark);
  font-weight: 800;
}

.modal-success {
  text-align: center;
  padding: 12px 0 4px;
}

.modal-success-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--off-white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.modal-success-icon svg {
  width: 26px;
  height: 26px;
  fill: var(--blue);
}

.modal-success h1 {
  font-size: 1.4rem;
  margin: 0 0 10px;
  font-weight: 800;
}

.modal-success p {
  color: var(--text-gray);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0 0 20px;
}

.check-email-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.check-email-page {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 60px 0;
}

.check-email-card {
  margin: 0 auto;
}

/* A calm, brand-colored callout rather than an alarm-style box — pale blue (the same tint used
   for the commitment-check pill elsewhere on the site), no red/yellow, no all-caps. */
.seats-left-callout {
  max-width: 420px;
  margin: 0 auto 24px;
  background: var(--off-white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 24px;
  text-align: center;
}

.seats-left-callout-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--blue-dark);
  margin: 0 0 4px;
}

.seats-left-callout-sub {
  font-size: 0.85rem;
  color: var(--text-gray);
  margin: 0;
}

.seats-left-banner {
  text-align: center;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--blue-dark);
  margin: 0 0 20px;
}

.modal-success .check-email-eyebrow {
  text-align: center;
  font-size: 0.85rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--blue-dark);
  margin: 0 0 6px;
}

/* The three "what to do now" steps on the register variant. A left-aligned list that is itself
   centered in the card (inline-block inside the centered .modal-success), so the numbers line up
   instead of ragging with each line's length. Numbers are brand-blue circles via CSS counters. */
.modal-success .check-email-steps {
  display: inline-block;
  text-align: left;
  list-style: none;
  counter-reset: check-email-step;
  margin: 8px 0 24px;
  padding: 0;
}

.modal-success .check-email-steps li {
  counter-increment: check-email-step;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-dark);
}

.modal-success .check-email-steps li + li {
  margin-top: 12px;
}

.modal-success .check-email-steps li::before {
  content: counter(check-email-step);
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 0.9rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-success #checkEmailMessage strong {
  color: var(--text-dark);
}

/* The button name stays on one line even on a phone, so it reads as the exact label to look for. */
.modal-success .check-email-steps strong {
  white-space: nowrap;
}

.modal-success .check-email-fineprint {
  color: var(--text-gray-light);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: -8px 0 0;
  text-wrap: balance;
}

.modal-success .check-email-tip {
  color: var(--text-gray-light);
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 24px 0 0;
}

/* ==========================================================================
   Thank-you page
   ========================================================================== */
.confirm-hero {
  background: var(--navy-900);
  color: var(--white);
  padding: 40px 0 90px;
}

.confirm-hero-top {
  text-align: center;
}

.confirm-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  margin: 0 0 8px;
  font-weight: 800;
}

.confirm-hero .subhead {
  color: var(--blue-light);
  font-size: 1.1rem;
  margin: 0;
  font-weight: 500;
}

/* A plain <br> carries no real spacing of its own — this gives the line break between the two
   sentences an actual visible gap, without changing the line-height of wrapped text elsewhere. */
.confirm-hero .subhead br {
  content: "";
  display: block;
  margin-top: 8px;
}

.confirmed-badge {
  color: var(--blue-light);
  font-weight: 800;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  margin: 14px 0;
  white-space: nowrap;
}

.confirmed-badge .badge-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #16a34a;
  margin-right: 8px;
  vertical-align: middle;
}

.confirmed-badge .badge-dot svg {
  width: 10px;
  height: 10px;
  fill: var(--white);
}

.countdown-card {
  background: var(--white);
  color: var(--text-dark);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  max-width: 640px;
  margin: -56px auto 0;
  padding: 40px 32px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.countdown-card h2 {
  margin: 0 0 20px;
  font-size: 1.2rem;
}

/* Sits right under the commitment pill: the benefit-framed camera expectation, plus an easy way
   to raise a concern. The last note carries the gap before the countdown. */
.countdown-card .commitment-note {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-gray);
  margin: 0 0 8px;
}

/* The second note (the "any concerns? just reply" line) is deliberately fine print: smaller, lighter
   and italic, same voice as the calendar caption below — so the card has some rhythm instead of
   reading as one block of equally weighted text. */
.countdown-card .commitment-note + .commitment-note {
  margin-bottom: 40px;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-gray-light);
}

/* .commitment-check sets its own display, which would otherwise beat the `hidden` attribute. */
.commitment-check[hidden] {
  display: none;
}

.countdown-grid {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-bottom: 20px;
}

.countdown-unit {
  min-width: 56px;
}

.countdown-unit .num {
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown-unit .label {
  display: block;
  margin-top: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-gray);
}

.countdown-card .session-date {
  font-weight: 700;
  margin: 0 0 28px;
}

.countdown-card .save-note {
  margin: 0 0 18px;
  color: var(--text-gray);
}

.zoom-block {
  background: var(--navy-900);
  color: var(--white);
  text-align: center;
  padding: 44px 24px;
}

.zoom-block h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
}

.zoom-block a {
  color: var(--blue-light);
  font-size: 1.05rem;
  font-weight: 600;
  word-break: break-all;
}

.commitment-check {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  background: var(--off-white);
  border: none;
  color: var(--text-gray);
  font-family: inherit;
  font-weight: 800;
  font-size: 1.4rem;
  padding: 16px 28px;
  border-radius: 999px;
  margin: 0 0 16px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.commitment-check:hover {
  background: #e4ecfb;
}

.commitment-check:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

.commitment-check-icon {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2.5px solid var(--text-gray-light);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.commitment-check-icon svg {
  width: 18px;
  height: 18px;
  fill: transparent;
  transition: fill 0.15s ease;
}

.commitment-check[aria-pressed="true"] {
  color: var(--text-dark);
}

.commitment-check[aria-pressed="true"] .commitment-check-icon {
  background: var(--blue);
  border-color: var(--blue);
}

.commitment-check[aria-pressed="true"] .commitment-check-icon svg {
  fill: var(--white);
}

.btn-secondary {
  display: inline-block;
  background: var(--blue);
  color: var(--white);
  border: 1.5px solid var(--blue);
  padding: 15px 34px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-weight: 700;
  font-size: 1.05rem;
  cursor: pointer;
  box-shadow: var(--shadow-soft);
}

.btn-secondary:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
}

.add-to-calendar {
  position: relative;
  display: inline-block;
  margin-top: 6px;
}

.add-to-calendar-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-card);
  padding: 8px;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  z-index: 5;
}

.add-to-calendar-menu a {
  padding: 10px 12px;
  border-radius: 6px;
  color: var(--text-dark);
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 600;
}

.add-to-calendar-menu a:hover {
  background: var(--off-white);
}

.calendar-caption {
  font-style: italic;
  font-size: 0.78rem;
  color: var(--text-gray-light);
  margin: 10px 0 0;
}

.feedback-section {
  background: var(--off-white);
  padding: 60px 0;
  text-align: center;
}

.feedback-form {
  max-width: 580px;
  margin: 0 auto;
}

.feedback-form label {
  display: block;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 20px;
  line-height: 1.4;
}

.feedback-row {
  display: flex;
  gap: 10px;
}

.feedback-row input {
  flex: 1;
  min-width: 0;
  padding: 16px 18px;
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 1.1rem;
  background: var(--white);
  color: var(--text-dark);
}

.feedback-row input:focus {
  outline: none;
  border-color: var(--blue);
}

.feedback-row .btn-primary {
  width: auto;
  padding: 16px 26px;
  font-size: 1.05rem;
}

.feedback-thanks {
  margin: 14px 0 0;
  font-weight: 700;
  color: var(--blue-dark);
}

.videos-section {
  background: var(--off-white);
  padding: 70px 0;
  text-align: center;
}

.videos-section .intro {
  max-width: 560px;
  margin: 0 auto 8px;
  color: var(--text-gray);
}

.video-grid-featured {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.video-card {
  display: block;
  text-decoration: none;
  color: var(--text-dark);
  background: var(--white);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-soft);
  text-align: left;
  transition: transform 0.15s ease;
}

.video-card:hover {
  transform: translateY(-2px);
}

.video-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--navy-800);
}

.video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb .play-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-thumb .play-badge svg {
  width: 44px;
  height: 44px;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

.video-grid .video-thumb .play-badge svg {
  width: 32px;
  height: 32px;
}

.video-meta {
  padding: 12px 14px;
}

.video-meta .video-title {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.video-grid .video-meta .video-title {
  font-size: 0.8rem;
}

.video-meta .watch-link {
  font-size: 0.74rem;
  color: var(--text-gray);
  display: flex;
  align-items: center;
  gap: 4px;
}

.video-meta .watch-link svg {
  width: 12px;
  height: 12px;
  fill: var(--text-gray);
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-photo-frame {
    width: 100%;
    max-width: 280px;
    min-height: 0;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    order: 1;
  }

  .hero-card {
    order: 2;
  }

  .hosted-by {
    grid-template-columns: 1fr;
    text-align: center;
    margin-top: -40px;
  }

  .hosted-by ul {
    align-items: center;
  }

  .hosted-by li {
    text-align: left;
  }

  .headshot-frame {
    justify-self: center;
  }

  .exercise-grid {
    grid-template-columns: 1fr;
  }

  .testimonial-grid {
    grid-template-columns: 1fr;
  }

  .role-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-grid-featured {
    grid-template-columns: 1fr;
  }

  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .feedback-row {
    flex-direction: column;
  }

  .feedback-row .btn-primary {
    width: 100%;
  }
}

@media (max-width: 520px) {
  .container {
    padding: 0 18px;
  }

  .hero {
    padding: 40px 0 70px;
  }

  .hero-card {
    padding: 26px 22px;
  }

  .countdown-grid {
    gap: 16px;
  }

  .countdown-unit {
    min-width: 44px;
  }

  .role-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .video-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-inner {
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   Cookie consent (vanilla-cookieconsent theme — matches this site's palette)
   ========================================================================== */
:root {
  --cc-bg: var(--navy-900);
  --cc-primary-color: var(--white);
  --cc-secondary-color: var(--text-gray-light);
  --cc-link-color: var(--blue-light);
  --cc-modal-border-radius: 16px;
  --cc-btn-border-radius: 8px;
  --cc-overlay-bg: rgba(6, 11, 22, 0.65);

  --cc-btn-primary-bg: var(--blue);
  --cc-btn-primary-color: var(--white);
  --cc-btn-primary-border-color: var(--blue);
  --cc-btn-primary-hover-bg: var(--blue-dark);
  --cc-btn-primary-hover-color: var(--white);
  --cc-btn-primary-hover-border-color: var(--blue-dark);

  --cc-btn-secondary-bg: transparent;
  --cc-btn-secondary-color: var(--white);
  --cc-btn-secondary-border-color: rgba(255, 255, 255, 0.2);
  --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.1);
  --cc-btn-secondary-hover-color: var(--white);
  --cc-btn-secondary-hover-border-color: rgba(255, 255, 255, 0.2);

  --cc-toggle-on-bg: var(--blue);
  --cc-toggle-off-bg: rgba(255, 255, 255, 0.25);
  --cc-toggle-on-knob-bg: var(--white);
  --cc-toggle-off-knob-bg: var(--white);
  --cc-toggle-readonly-bg: rgba(255, 255, 255, 0.15);
  --cc-toggle-readonly-knob-bg: rgba(255, 255, 255, 0.6);
  --cc-toggle-enabled-icon-color: var(--white);
  --cc-toggle-disabled-icon-color: var(--white);

  --cc-cookie-category-block-bg: rgba(255, 255, 255, 0.06);
  --cc-cookie-category-block-border: rgba(255, 255, 255, 0.15);
  --cc-cookie-category-block-hover-bg: rgba(255, 255, 255, 0.1);
  --cc-cookie-category-block-hover-border: rgba(255, 255, 255, 0.15);
  --cc-cookie-category-expanded-block-bg: rgba(255, 255, 255, 0.08);
  --cc-cookie-category-expanded-block-hover-bg: rgba(255, 255, 255, 0.08);
  --cc-section-category-border: rgba(255, 255, 255, 0.15);
  --cc-separator-border-color: rgba(255, 255, 255, 0.15);

  --cc-footer-bg: var(--navy-900);
  --cc-footer-border-color: rgba(255, 255, 255, 0.15);
  --cc-footer-color: var(--text-gray-light);
}
.footer-cookie-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text-gray-light);
  font-size: 0.85rem;
  text-decoration: underline;
}
.footer-cookie-btn:hover {
  color: var(--white);
}

/* Compact consent modal — the library's own font-size/padding/max-width
   aren't exposed as --cc- variables, so these target its real classes.
   Kept above WCAG 2.2's 24px minimum tap-target size (2.5.8) and away from
   font sizes that would make the notice hard to actually read — going much
   smaller than this risks the banner counting as a "dark pattern" under
   EDPB/CNIL guidance rather than just a smaller UI. */
#cc-main .cm {
  max-width: 300px;
}
#cc-main .cm__texts {
  padding: 0.65rem 0 0;
}
#cc-main .cm__title {
  font-size: 0.9em;
}
#cc-main .cm__desc {
  font-size: 0.74em;
  line-height: 1.35;
  padding-bottom: 0.5em;
}
#cc-main .cm__btn {
  min-height: 32px;
  font-size: 0.74em;
  padding: 0.35em 0.8em;
}
#cc-main .cm__footer {
  padding: 0.25em 0 0.3em;
}