/* ==========================================================================
   SleepHealth360.com — supplemental components (loaded after style.css)
   Only contains components/utilities that assets/css/style.css (the
   SleepHealth360an theme) has no equivalent for. Everything else reuses style.css
   classes/tokens directly. Grows as more sleepscan-v2 pages are added.
   ========================================================================== */

.hidden {
  display: none !important;
}

/* ---------- Auto-cycling "hover" highlight (health-risks cards) ----------
   Mirrors style.css's own .value-card:hover treatment exactly, so a card
   highlighted by JS (adding this class) looks identical to a real hover. */
.value-card.auto-hover-active {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

/* ---------- Optional thumbnail image at the top of a .value-card ---------- */
.value-card-img {
  width: calc(100% + 52px);
  max-width: none;
  margin: -32px -26px 20px;
  display: block;
  aspect-ratio: 16/10;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ---------- Homepage hero: mobile-only duplicate eyebrow, shown above the
   slider (desktop keeps the original eyebrow inside .hero-copy, untouched) ---------- */
.eyebrow-mobile-dup {
  display: none;
}

@media (max-width:960px) {
  .eyebrow-mobile-dup {
    display: inline-flex;
    order: -2;
    margin-bottom: 0;
  }

  .hero-copy>.eyebrow {
    display: none;
  }

  /* Tighten the header→label and label→slider gaps only; slider→copy gap
     is restored via margin-top on .hero-copy so it stays roughly as before. */
  .hero {
    padding-top: calc(var(--header-h) + 13px);
  }

  .hero .container {
    gap: 12px;
  }

  .hero-copy {
    margin-top: 36px;
  }

  /* Pull the ghost-style quiz link flush with the text/heading edges below it
     once it wraps to its own row (its .btn padding otherwise indents it). */
  .hero-ctas .link-dotted {
    padding-left: 0;
    margin-left: -2px;
  }
}

/* ==========================================================================
   Hero image slider (homepage) — same box treatment as v1's .hero-art
   (rounded navy-gradient card, shadow, 4:5 aspect) but with 3 auto-rotating
   slides instead of one static illustration.
   ========================================================================== */
.hero-slider {
  position: relative;
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: linear-gradient(155deg, var(--navy-900), var(--navy-700));
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4/5;
}

.hero-slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .7s var(--ease);
}

.hero-slide.is-active {
  opacity: 1;
  visibility: visible;
}

.hero-slide svg {
  width: 100%;
  height: 100%;
}

.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-slide-caption {
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255, 255, 255, .1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  padding: 12px 20px;
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
}

.hero-slide-caption .cap-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--emerald-400);
  box-shadow: 0 0 0 4px rgba(61, 220, 155, .25);
  flex-shrink: 0;
}

.hero-slider-dots {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
  display: flex;
  gap: 6px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .35);
  transition: background .25s var(--ease), width .25s var(--ease);
}

.slider-dot:hover {
  background: rgba(255, 255, 255, .6);
}

.slider-dot.is-active {
  width: 20px;
  border-radius: 4px;
  background: var(--emerald-400);
}

@media (max-width:520px) {
  .hero-slide-caption {
    padding: 10px 16px;
    font-size: .88rem;
    left: 14px;
    right: 14px;
    bottom: 14px;
  }

  .hero-slider-dots {
    top: 14px;
    right: 14px;
  }
}

/* ---------- Accessibility: skip link ---------- */
.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
  z-index: 2000;
  background: var(--navy-950);
  color: #fff;
  padding: 12px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
}

.skip-link:focus {
  left: 16px;
  top: 16px;
}

/* ---------- Navy pulse ring (for the header/mobile "Rent CPAP/BiPAP" CTA) ---------- */
.btn-pulse-navy {
  position: relative;
}

.btn-pulse-navy::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  box-shadow: 0 0 0 0 rgba(15, 39, 67, .55);
  animation: pulseNavy 2.4s infinite;
  pointer-events: none;
}

@keyframes pulseNavy {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 39, 67, .5);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(15, 39, 67, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(15, 39, 67, 0);
  }
}

/* Desktop-only header CTA — hidden below the hamburger breakpoint per spec
   ("no button on top header, less space on mobile"); mobile instead gets
   this same CTA inside the sticky .mobile-cta-bar. */
@media (max-width:960px) {
  .header-cpap-cta {
    display: none;
  }
}

/* Header "Request a Sleep Test" CTA swaps for an "All Tests" pricing-tag CTA
   below the hamburger breakpoint, instead of showing the same calendar-icon
   booking button at every width. */
.header-request-mobile {
  display: none;
}
@media (max-width:960px) {
  .header-request-desktop {
    display: none;
  }
  .header-request-mobile {
    display: inline-flex;
  }
}
/* Every other header button's label disappears entirely under 520px (see
   .header-actions .btn span.full-label above) so just the icon remains —
   this one instead keeps its "All Tests" label at a smaller size, so it's
   never an unlabelled icon on its own. */
@media (max-width:520px) {
  /* Matches (and slightly exceeds) the specificity of the global
     ".header-actions .btn span.full-label{display:none}" rule above, since
     an equal-or-lower-specificity override here would silently lose to it. */
  .header-actions .btn.header-request-mobile span.full-label {
    display: inline;
    font-size: .72rem;
  }
}

/* Desktop top nav: no "Home" link, and "All Tests & Pricing" moves to the
   very end of the row instead of sitting between the two dropdowns — the
   mobile hamburger menu keeps both exactly where they are in the markup. */
@media (min-width:961px) {
  .nav-home-link {
    display: none;
  }
  .nav-pricing-link {
    order: 1;
  }
}

/* ---------- Header logo: plain wordmark with a thick underline under "Health" ---------- */
.logo-plain {
  gap: 0;
}

.logo-underline {
  position: relative;
  display: inline-block;
  font-weight: 300;
}

.logo-underline::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 4px;
  border-radius: 2px;
  background: var(--emerald-500);
}

/* ---------- Header: phone icon link ---------- */
.icon-link {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-700);
  transition: background .2s var(--ease), color .2s var(--ease);
}

.icon-link:hover {
  background: var(--emerald-50);
  color: var(--emerald-700);
}

@media (max-width:640px) {
  .icon-link {
    display: none;
  }
}

/* ---------- Utility: text link with arrow ---------- */
.link-arrow {
  display: inline-block;
  color: var(--emerald-600);
  font-weight: 600;
  font-size: .92rem;
  transition: color .2s var(--ease);
}

.link-arrow:hover {
  color: var(--emerald-700);
  text-decoration: underline;
}

/* ---------- Utility: dotted-underline link (offset from text) ---------- */
.link-dotted {
  text-decoration: underline dotted;
  text-decoration-color: var(--slate-400);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 6px;
}

.link-dotted:hover {
  text-decoration-color: var(--emerald-600);
}

/* ---------- "What is sleep apnea?" — two-column layout (desktop) ---------- */
.whatisit-copy .section-head {
  max-width: none;
  /* Base .section-head's 56px margin-bottom (style.css) reads as a big gap
     before the apnea-types card right below it. Tighten just this instance;
     other .section-head uses elsewhere are untouched. */
  margin-bottom: 24px;
}

/* Sidebar variant of the CPAP/BiPAP CTA — replaces the diagram image in
   .whatisit-art on desktop. Narrower column (380px), so tighter padding
   and always-stacked buttons regardless of viewport. */
.whatisit-cta-sidebar {
  padding: 32px 26px;
}

.whatisit-cta-sidebar .cta-band-actions {
  flex-direction: column;
  align-items: stretch;
}

.whatisit-link {
  margin-top: 28px;
  text-align: center;
}

/* ---------- CPAP/BiPAP rental CTA (bottom of "What is sleep apnea?") ---------- */
.whatisit-cta {
  margin-top: 56px;
}

.whatisit-cta-eyebrow {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--emerald-400);
  background: rgba(61, 220, 155, .12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}

.cta-band-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width:560px) {
  .cta-band-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (min-width:861px) {
  .whatisit-grid {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 56px;
    align-items: start;
  }

  .whatisit-art {
    margin-top: 60px;
    position: sticky;
    top: calc(var(--header-h) + 24px);
  }

  .whatisit-copy .section-head {
    text-align: left;
    margin-inline: 0;
  }

  .whatisit-cta {
    margin-top: 88px;
  }

  /* The sidebar CTA inside .whatisit-art (visible at this breakpoint)
     replaces this one, so don't show both. */
  .whatisit-cta-below {
    display: none;
  }
}

@media (max-width:860px) {
  .whatisit-art {
    display: none;
  }
}

/* ---------- Apnea types block ("What is sleep apnea?" section) ---------- */
.apnea-types-block {
  background: var(--slate-50);
  border-radius: var(--radius-xl);
  padding: 36px;
  margin: 20px 0 0;
}

.apnea-types-block h3 {
  text-align: center;
  margin-bottom: 24px;
}

.types-heading-badge {
  display: inline-block;
  background: var(--emerald-100);
  color: var(--emerald-700);
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 1.1rem;
}

.apnea-types-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.apnea-type-card+.apnea-type-card {
  border-top: 1px solid var(--slate-300);
  padding-top: 20px;
}

.apnea-type-card h4 {
  font-size: 1.02rem;
  margin-bottom: 8px;
  color: var(--navy-950);
}

.apnea-type-card p {
  color: var(--slate-500);
  font-size: .92rem;
}

@media (min-width:861px) {
  .apnea-types-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  .apnea-type-card+.apnea-type-card {
    border-top: none;
    padding-top: 0;
    border-left: 1px solid var(--slate-300);
    padding-left: 32px;
  }
}

@media (max-width:560px) {
  .apnea-types-block {
    padding: 28px 22px;
  }
}

/* ---------- Health risks row (inside .apnea-types-block on the homepage) ----------
   Mobile: single centered column, horizontal divider between items.
   Tablet (>=561px): 2-col grid, divider grid (right between cols, top between rows).
   Desktop (>=1024px): single 6-col row, matching the reference layout, with a
   vertical divider between each column and no row dividers (there's only one row). */
.health-risks-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}

.health-risk-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.health-risk-col .ico svg {
  width: 34px;
  height: 34px;
  color: var(--emerald-600);
  margin-bottom: 2px;
}

.health-risk-col h4 {
  font-size: 1rem;
  color: var(--navy-950);
}

.health-risk-col p {
  color: var(--slate-500);
  font-size: .88rem;
}

@media (min-width:561px) {
  .health-risks-row {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 32px;
  }

  .health-risk-col {
    padding: 0 16px;
  }

  .health-risk-col:nth-child(odd) {
    border-right: 1px solid var(--slate-300);
  }

  .health-risk-col:nth-child(n+3) {
    padding-top: 28px;
    border-top: 1px solid var(--slate-300);
  }
}

@media (min-width:1024px) {
  .health-risks-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

  .health-risk-col {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 18px 16px;
  }

  .health-risk-col:nth-child(odd) {
    border-right: none;
  }

  .health-risk-col:nth-child(n+3) {
    border-top: none;
  }
}


/* ==========================================================================
   Nav dropdown ("Sleep Tests" → all test types)
   Desktop: floating panel below the link, opens on hover/focus or click.
   Mobile (≤960px, inside the full-screen .main-nav): inline accordion.
   ========================================================================== */
.nav-item.has-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-dropdown-toggle {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--slate-500);
  flex-shrink: 0;
}

.nav-dropdown-toggle svg {
  width: 16px;
  height: 16px;
  transition: transform .25s var(--ease);
}

.nav-item.has-dropdown.open .nav-dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 8px;
  min-width: 240px;
}

.nav-dropdown a {
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: .9rem;
  color: var(--slate-700);
  transition: background .2s var(--ease), color .2s var(--ease);
}

.nav-dropdown a:hover {
  background: var(--emerald-50);
  color: var(--emerald-700);
}

.nav-dropdown-viewalltopline {
  margin-top: 4px;
  border-top: 1px solid var(--slate-100);
  padding-top: 12px !important;
  color: var(--emerald-600) !important;
}

.nav-dropdown-viewall_btmline {
  margin-top: 4px;
  border-bottom: 1px solid var(--slate-100);
  padding-top: 12px !important;
  color: var(--emerald-600) !important;
}

.nav-dropdown-viewallnoline {
  margin-top: 4px;
  padding-top: 12px !important;
  color: var(--emerald-600) !important;
}

@media (min-width:961px) {
  .nav-dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s var(--ease);
  }

  .nav-item.has-dropdown:hover .nav-dropdown,
  .nav-item.has-dropdown:focus-within .nav-dropdown,
  .nav-item.has-dropdown.open .nav-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

@media (max-width:960px) {
  .nav-item.has-dropdown {
    flex-wrap: wrap;
    position: relative;
    border-bottom: 1px solid var(--slate-100);
  }

  .nav-item.has-dropdown>a {
    flex: 1;
    padding: 16px;
    border-bottom: none;
  }

  .nav-dropdown-toggle {
    position: absolute;
    right: 16px;
    top: 8px;
  }

  .nav-dropdown {
    flex-basis: 100%;
    order: 3;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    border: none;
    box-shadow: none;
    transition: max-height .3s var(--ease);
  }

  .nav-item.has-dropdown.open .nav-dropdown {
    max-height: 600px;
    padding: 4px 0 12px;
  }

  .nav-dropdown a {
    padding: 12px 16px;
    color: var(--slate-500);
  }
}

/* ---------- Value grid: column-count variants ---------- */
.value-grid.grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width:960px) {
  .value-grid.grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .value-grid.grid-3 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Breadcrumbs (all inner pages)
   ========================================================================== */
.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  font-size: .85rem;
  font-weight: 600;
}

.breadcrumbs a {
  color: var(--slate-500);
  transition: color .2s var(--ease);
}

.breadcrumbs a:hover {
  color: var(--emerald-600);
}

.breadcrumbs .sep {
  color: var(--slate-300);
}

.breadcrumbs .current {
  color: var(--navy-800);
}

/* ==========================================================================
   Secondary-page hero — same text-left/image-right shell as the homepage
   .hero, used verbatim on every inner page for a consistent top section.
   ========================================================================== */
.page-hero {
  padding-bottom: 64px;
}

@media (min-width:961px) {
  /* Pulls the breadcrumbs (and everything below them) up slightly from the
     base .hero top padding, and gives them a bit more breathing room above
     the eyebrow that follows — desktop only, so mobile\'s stacked layout
     (image above the copy) is untouched. */
  .page-hero {
    padding-top: calc(var(--header-h) + 44px);
  }
  .page-hero .breadcrumbs {
    margin-bottom: 32px;
  }
}

.page-hero h1 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.page-hero .hero-art {
  aspect-ratio: 16/12;
}

.page-icon-art {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-icon-art svg {
  width: 42%;
  height: 42%;
  color: var(--emerald-400);
}

@media (max-width:960px) {
  .page-hero .hero-art {
    aspect-ratio: 16/12;
  }
}

/* ==========================================================================
   Numbered process timeline (e.g. "what happens on test night")
   ========================================================================== */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 24px;
}

.timeline-step {
  position: relative;
  padding-top: 54px;
}

.timeline-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--emerald-500), var(--emerald-700));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline {
  counter-reset: step;
}

.timeline-step h3 {
  font-size: 1.05rem;
  margin-bottom: 8px;
}

.timeline-step p {
  color: var(--slate-500);
  font-size: .9rem;
}

@media (max-width:860px) {
  .timeline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width:560px) {
  .timeline {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Stats strip
   ========================================================================== */
.stats-strip {
  background: linear-gradient(135deg, var(--navy-950), var(--navy-800));
  padding: 48px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.stat {
  text-align: center;
}

.stat strong {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  font-weight: 700;
  color: var(--emerald-400);
  margin-bottom: 8px;
}

.stat span {
  display: block;
  color: var(--slate-300);
  font-size: .86rem;
  line-height: 1.5;
}

@media (max-width:860px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
  }
}

@media (max-width:560px) {
  .stats-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ==========================================================================
   Risk quiz
   ========================================================================== */
/* Desktop: swap the dark .specs-panel background for a slow crossfade
   between 3 "1-minute test" photos, with the quiz card docked to the right
   (each photo's right half is deliberately empty for this). Mobile keeps
   the original navy specs-panel untouched, just with tighter left/right
   padding so the form reads wider. */
@media (min-width:861px) {
  .quiz-panel {
    position: relative;
    overflow: hidden;
    background: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 56px;
  }

  .quiz-panel-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
  }

  .quiz-panel-bg-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: left center;
    opacity: 0;
    transition: opacity 1s var(--ease);
  }

  .quiz-panel-bg-slide.is-active {
    opacity: 1;
  }

  .quiz-panel .quiz-card {
    position: relative;
    z-index: 1;
    max-width: 460px;
    width: 100%;
    margin-inline: 0;
  }
}

@media (max-width:860px) {
  .quiz-panel {
    padding-left: 2px;
    padding-right: 2px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .quiz-panel-bg {
    display: none;
  }
}

.quiz-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 44px;
  max-width: 640px;
  margin-inline: auto;
}

.quiz-head {
  text-align: center;
  margin-bottom: 32px;
}

.quiz-head h2 {
  margin-bottom: 10px;
}

.quiz-head p {
  color: var(--slate-500);
}

.quiz-progress {
  height: 6px;
  background: var(--slate-100);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 24px;
}

.quiz-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--emerald-500), var(--emerald-700));
  transition: width .3s var(--ease);
}

.quiz-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.quiz-step-label {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--slate-500);
}

.quiz-back {
  font-size: .85rem;
  font-weight: 600;
  color: var(--emerald-600);
}

.quiz-back:hover {
  color: var(--emerald-700);
}

.quiz-question h3 {
  font-size: 1.25rem;
  margin-bottom: 20px;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.quiz-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  border: 1.5px solid var(--slate-100);
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: .95rem;
  color: var(--navy-800);
  background: var(--white);
  transition: border-color .2s var(--ease), background .2s var(--ease);
}

.quiz-option:hover {
  border-color: var(--emerald-500);
  background: var(--emerald-50);
}

.quiz-option:active {
  background: var(--emerald-100);
}

.quiz-result {
  text-align: center;
}

.quiz-result h3 {
  font-size: 1.3rem;
  margin-bottom: 14px;
  color: var(--emerald-700);
}

.quiz-result p {
  color: var(--slate-500);
  margin-bottom: 26px;
}

.quiz-result .btn {
  margin: 0 6px;
}

@media (max-width:640px) {
  .quiz-card {
    padding: 30px 22px;
  }
}

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testimonial-slider {
  position: relative;
}

.testimonial-viewport {
  overflow: hidden;
}

.testimonial-track {
  display: flex;
  gap: 24px;
  transition: transform .6s var(--ease);
  will-change: transform;
}

.testimonial-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--white);
  border: 1px solid var(--slate-100);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--navy-800);
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.testimonial-arrow:hover {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: transparent;
}

.testimonial-arrow svg {
  width: 20px;
  height: 20px;
}

.testimonial-arrow-prev {
  left: -8px;
}

.testimonial-arrow-next {
  right: -8px;
}

@media (max-width:768px) {
  .testimonial-arrow {
    width: 34px;
    height: 34px;
  }

  .testimonial-arrow svg {
    width: 16px;
    height: 16px;
  }

  .testimonial-arrow-prev {
    left: -2px;
  }

  .testimonial-arrow-next {
    right: -2px;
  }
}

.testimonial-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 0 0 calc((100% - 48px) / 3);
  min-width: 0;
}

.testimonial-card .avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--emerald-400), var(--emerald-700));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
}

.testimonial-card .stars {
  color: #c2410c;
  letter-spacing: 2px;
  font-size: 15px;
}

.testimonial-card blockquote {
  color: var(--navy-800);
  font-size: .92rem;
  line-height: 1.6;
}

.testimonial-card figcaption {
  color: var(--slate-500);
  font-size: .82rem;
  font-weight: 600;
}

@media (max-width:960px) {
  .testimonial-card {
    flex-basis: calc((100% - 24px) / 2);
  }
}

@media (max-width:560px) {
  .testimonial-card {
    flex-basis: 100%;
  }
}

/* ==========================================================================
   Sticky mobile CTA bar
   ========================================================================== */
.mobile-cta-bar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  background: var(--white);
  border-top: 1px solid var(--slate-100);
  box-shadow: var(--shadow-lg);
  padding: 14px 20px;
}

.mobile-cta-bar-row {
  display: flex;
  gap: 10px;
}

.mobile-cta-bar-row .btn {
  flex: 1;
  padding: 12px 10px;
  font-size: .85rem;
  white-space: normal;
}

.mobile-cta-bar-call {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--red-500);
  color: #fff;
  position: relative;
}

.mobile-cta-bar-call::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(226, 85, 75, .5);
  animation: pulseRed 2.4s infinite;
  pointer-events: none;
}

@keyframes pulseRed {
  0% {
    box-shadow: 0 0 0 0 rgba(226, 85, 75, .5);
  }

  70% {
    box-shadow: 0 0 0 14px rgba(226, 85, 75, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(226, 85, 75, 0);
  }
}

.mobile-cta-bar-call svg {
  width: 20px;
  height: 20px;
}

@media (max-width:640px) {
  .mobile-cta-bar {
    display: block;
  }

  body {
    padding-bottom: 84px;
  }
}

/* ==========================================================================
   Lead-capture form (dedicated request-form.php page)
   ========================================================================== */
.form-page-card {
  background: var(--white);
  border: 1px solid var(--slate-100);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  padding: 40px;
  max-width: 520px;
  margin: 0 auto;
}

@media (max-width:640px) {
  .form-page-card {
    padding: 28px 20px;
  }
}

#lead-form label,
.modal-form label {
  display: block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--navy-800);
  margin-bottom: 10px;
}

#lead-form input,
#lead-form select,
.modal-form input,
.modal-form select {
  width: 100%;
  margin-top: 8px;
  padding: 13px 16px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--radius-sm);
  font-size: .95rem;
  background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}

#lead-form input:focus,
#lead-form select:focus,
.modal-form input:focus,
.modal-form select:focus {
  border-color: var(--emerald-500);
  box-shadow: 0 0 0 3px var(--emerald-100);
  outline: none;
}

#lead-form input.invalid,
.modal-form input.invalid,
.modal-form select.invalid {
  border-color: var(--red-500);
}

.field-error {
  display: block;
  min-height: 16px;
  color: var(--red-500);
  font-size: .78rem;
  font-weight: 500;
  margin-top: 6px;
}

.modal-submit {
  margin-top: 16px;
}

@media (max-width:640px) {
  /* .modal-content itself (padding, heading/paragraph margins, submit-button
     gap) only ever got a desktop-tier compaction pass — mobile still carried
     the full-size values, so the internal scrollbar came back on phone-height
     viewports. Mirror the same tightening here. */
  .modal {
    padding: 12px;
  }

  .modal-content {
    padding: 20px 18px;
  }

  .modal-content h3 {
    font-size: 1.3rem;
    margin-bottom: 6px;
  }

  .modal-content p {
    margin-bottom: 16px;
  }

  #lead-form label,
  .modal-form label {
    margin-bottom: 6px;
  }

  #lead-form input,
  #lead-form select,
  .modal-form input,
  .modal-form select {
    margin-top: 4px;
    padding: 10px 14px;
    font-size: .9rem;
  }

  /* The "Which test?" dropdown's own <option>s render larger than the
     select's own closed-state text in most mobile browsers (they don't
     inherit the select's font-size), so set it explicitly here. */
  #lead-form select[name="tier"] option,
  #lead-form select[name="tier"] optgroup,
  .modal-form select[name="tier"] option,
  .modal-form select[name="tier"] optgroup {
    font-size: .74rem;
  }

  .field-error {
    min-height: 13px;
    margin-top: 4px;
    font-size: .74rem;
  }

  .modal-submit {
    margin-top: 10px;
  }
}

/* Desktop: the lead/rental modals were tall enough (4 fields, each with
   full-size padding + a reserved error-message row) to force the internal
   scrollbar on common laptop viewport heights. Tighten field spacing/height
   so the whole form fits in one view without scrolling. Mobile keeps its
   own already-compact sizing above, untouched. */
@media (min-width:641px) {
  .modal-content {
    padding: 28px 32px;
  }

  .modal-content h3 {
    margin-bottom: 6px;
  }

  .modal-content p {
    margin-bottom: 16px;
  }

  #lead-form label,
  .modal-form label {
    margin-bottom: 6px;
    line-height: 1.3;
  }

  #lead-form input,
  #lead-form select,
  .modal-form input,
  .modal-form select {
    margin-top: 4px;
    padding: 10px 14px;
    font-size: .9rem;
  }

  .modal-form .field-error {
    min-height: 12px;
    margin-top: 3px;
    font-size: .74rem;
  }

  .modal-submit {
    margin-top: 10px;
  }
}

.form-success {
  text-align: center;
}

.success-icon {
  margin: 0 auto 20px;
  width: 48px;
  height: 48px;
}

.form-success h2 {
  margin-bottom: 10px;
}

.form-success p {
  color: var(--slate-500);
  margin-bottom: 26px;
}

.lead-error-banner {
  background: #fef2f2;
  color: var(--red-500);
  font-weight: 600;
  text-align: center;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  margin-bottom: 24px;
}

/* ==========================================================================
   Modals (Lead Forms)
   ========================================================================== */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 39, 67, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal.is-open {
  display: flex;
}

.modal-content {
  background: var(--white);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: var(--shadow-xl);
  max-height: 90vh;
  /* 90vh alone is computed against the browser's full layout viewport, not
     the shorter area actually visible once the mobile address bar is showing
     — so the modal can think it has more room than it really does and end
     up needing an internal scroll anyway. dvh tracks the real visible height
     and overrides the line above in browsers that support it. */
  max-height: 90dvh;
  overflow-y: auto;
  /* The OS's default scrollbar is a full-width, square-cornered widget that
     doesn't clip to this box's border-radius, so it visibly cuts across the
     rounded top-right corner. Swap it for a slim, transparent-track bar that
     sits inset from the edge instead. */
  scrollbar-width: thin;
  scrollbar-color: var(--slate-300) transparent;
}

.modal-content::-webkit-scrollbar {
  width: 8px;
}

.modal-content::-webkit-scrollbar-track {
  background: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: var(--slate-300);
  border-radius: 999px;
}

.modal-content::-webkit-scrollbar-thumb:hover {
  background-color: var(--slate-400);
}

.modal-close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
}

.modal-close:hover {
  color: var(--navy-800);
}

.modal-content h3 {
  font-size: 1.5rem;
  margin-bottom: 8px;
}

.modal-content p {
  color: var(--slate-500);
  font-size: 0.92rem;
  margin-bottom: 24px;
}

/* ==========================================================================
   Centered standalone CTA buttons (e.g. "Don't Delay – Book Your Sleep Test")
   Narrower and wrapping on small screens so long labels don't force the
   pill wider than the content block above it.
   ========================================================================== */
@media (max-width:560px) {
  .btn-cta {
    max-width: 88%;
    padding: 14px 20px;
    font-size: .92rem;
    white-space: normal;
    text-align: center;
    line-height: 1.3;
  }
}

/* ---------- Extra-small phones (~360px, e.g. Galaxy S/iPhone SE) ---------- */
@media (max-width:380px) {
  .btn-cta {
    max-width: 94%;
    padding: 12px 16px;
    font-size: .85rem;
  }

  .mobile-cta-bar-row .btn {
    padding: 10px 8px;
    font-size: .8rem;
  }

  .form-page-card {
    padding: 20px 14px;
  }

  /* "1 Minute Sleep Quiz" card: padding/type were tuned for >=640px and
     read oversized once the container itself is this narrow, making the
     whole card feel zoomed-in. Scale padding + type down without touching
     width/max-width so the card still spans the same box as larger phones. */
  .quiz-card {
    padding: 20px 14px;
  }

  .quiz-head {
    margin-bottom: 20px;
  }

  .quiz-head h2 {
    font-size: 1.3rem;
  }

  .quiz-head p {
    font-size: .85rem;
  }

  .quiz-progress {
    margin-bottom: 18px;
  }

  .quiz-meta {
    margin-bottom: 14px;
  }

  .quiz-step-label {
    font-size: .72rem;
  }

  .quiz-back {
    font-size: .8rem;
  }

  .quiz-question h3 {
    font-size: 1.05rem;
    margin-bottom: 16px;
  }

  .quiz-options {
    gap: 10px;
  }

  .quiz-option {
    padding: 13px 14px;
    font-size: .88rem;
  }

  .quiz-result h3 {
    font-size: 1.1rem;
  }

  .quiz-result p {
    font-size: .88rem;
    margin-bottom: 20px;
  }

  .quiz-result .btn {
    margin: 4px;
  }
}

/* ==========================================================================
   Sticky "Need help?" bar — desktop only. Floats over the bottom of the
   viewport on every page (see includes/footer.php), offering the site's
   real support number plus a quick phone-number-first shortcut into the
   existing "Request a Sleep Test" modal (see the sticky-help-* handlers in
   site-extra.js) rather than a separate lead-capture endpoint.
   ========================================================================== */
.sticky-help-bar {
  display: none;
}

@media (min-width:961px) {
  .sticky-help-bar {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    background: #eef7fb;
    border-top: 1px solid var(--slate-100);
    box-shadow: 0 -8px 24px -12px rgba(15, 23, 42, .15);
  }

  .sticky-help-bar.is-dismissed {
    display: none;
  }

  .sticky-help-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
  }

  .sticky-help-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
  }

  .sticky-help-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--white);
    color: var(--emerald-600);
    box-shadow: var(--shadow-sm);
  }

  .sticky-help-ico svg {
    width: 19px;
    height: 19px;
  }

  .sticky-help-info p {
    margin: 0;
    font-size: .98rem;
    color: var(--navy-800);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sticky-help-number {
    color: var(--emerald-600);
    font-weight: 700;
    text-decoration: none;
  }

  .sticky-help-number:hover {
    text-decoration: underline;
  }

  .sticky-help-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }

  .sticky-help-phone-group {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--slate-300);
    border-radius: 10px;
    padding: 10px 14px;
    min-width: 230px;
  }

  .sticky-help-phone-group.is-invalid {
    border-color: var(--red-500);
  }

  .sticky-help-flag {
    font-size: 1.05rem;
    line-height: 1;
  }

  .sticky-help-code {
    font-size: .92rem;
    font-weight: 600;
    color: var(--navy-800);
    padding-right: 8px;
    border-right: 1px solid var(--slate-300);
  }

  .sticky-help-phone-input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 0;
    font-size: .92rem;
    color: var(--navy-950);
    background: transparent;
  }

  .sticky-help-phone-input::placeholder {
    color: var(--slate-400);
  }

  .sticky-help-cta {
    background: var(--red-500);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 13px 22px;
    font-weight: 700;
    font-size: .92rem;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .2s var(--ease), box-shadow .2s var(--ease);
  }

  .sticky-help-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }

  .sticky-help-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    margin-left: 8px;
    border: none;
    background: transparent;
    color: var(--navy-800);
    cursor: pointer;
    transition: color .2s var(--ease);
  }

  .sticky-help-close:hover {
    color: var(--red-500);
  }
}

/* ==========================================================================
   "Need help?" bottom sheet — opened by the mobile-cta-bar\'s call icon
   (see includes/footer.php) instead of dialing directly; actual dialing
   only happens from the "or Call us at" link inside the sheet itself.
   ========================================================================== */
.bottom-sheet {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.bottom-sheet.is-open {
  display: block;
}

.bottom-sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 39, 67, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bottom-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  border-radius: 20px 20px 0 0;
  padding: 28px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg);
  max-height: 80vh;
  max-height: 80dvh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.bottom-sheet.is-open .bottom-sheet-panel {
  transform: translateY(0);
}

.bottom-sheet-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  color: var(--slate-400);
  cursor: pointer;
}

.bottom-sheet-close:hover {
  color: var(--navy-800);
}

.bottom-sheet-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 20px;
  padding-right: 28px;
}

.bottom-sheet-head-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--emerald-50);
  color: var(--emerald-600);
}

.bottom-sheet-head-ico svg {
  width: 22px;
  height: 22px;
}

.bottom-sheet-heading {
  font-size: 1.1rem;
  line-height: 1.3;
  margin-bottom: 4px;
}

.bottom-sheet-sub {
  color: var(--slate-500);
  font-size: .86rem;
  margin: 0;
}

.bottom-sheet-callback-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

.bottom-sheet-callback-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  color: var(--emerald-600);
  margin-top: 1px;
}

.bottom-sheet-callback-ico svg {
  width: 18px;
  height: 18px;
}

.bottom-sheet-callback-title {
  font-weight: 700;
  color: var(--navy-950);
  margin: 0 0 2px;
  font-size: .98rem;
}

.bottom-sheet-callback-sub {
  color: var(--slate-500);
  font-size: .84rem;
  margin: 0;
}

.bottom-sheet-phone-group {
  display: flex;
  align-items: center;
  gap: 0;
  border: 1.5px solid var(--slate-300);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
}

.bottom-sheet-phone-group.is-invalid {
  border-color: var(--red-500);
}

.bottom-sheet-code {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy-800);
  padding: 13px 12px;
  border-right: 1px solid var(--slate-300);
}

.bottom-sheet-code svg {
  width: 13px;
  height: 13px;
  color: var(--slate-400);
}

.bottom-sheet-phone-group input {
  border: none;
  outline: none;
  flex: 1;
  min-width: 0;
  font-size: .92rem;
  color: var(--navy-950);
  background: transparent;
  padding: 13px 14px 13px 12px;
}

.bottom-sheet-phone-group input::placeholder {
  color: var(--slate-400);
}

.bottom-sheet-submit {
  width: 100%;
  justify-content: center;
  margin-bottom: 16px;
}

.bottom-sheet-or {
  text-align: center;
  color: var(--slate-400);
  font-size: .82rem;
  margin: 0 0 12px;
}

.bottom-sheet-call-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: .9rem;
  font-weight: 500;
  color: var(--navy-800);
  text-decoration: none;
}

.bottom-sheet-call-link strong {
  color: var(--navy-950);
}

.bottom-sheet-call-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--emerald-600);
}

.bottom-sheet-call-ico svg {
  width: 16px;
  height: 16px;
}

/* ==========================================================================
   "Sending callback request..." overlay — shown between tapping "Get a
   free call back" / "Request a call back" and the pre-filled Request-a-
   Sleep-Test modal opening (see submitCallbackRequest() in site-extra.js).
   ========================================================================== */
.callback-loading {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(15, 39, 67, .6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.callback-loading.is-open {
  display: flex;
}

.callback-loading-box {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 280px;
  text-align: center;
}

.callback-loading-spinner {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--emerald-100);
  border-top-color: var(--emerald-500);
  animation: callbackSpin .8s linear infinite;
}

.callback-loading-box p {
  margin: 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--navy-800);
}

@keyframes callbackSpin {
  to {
    transform: rotate(360deg);
  }
}