/* The fixed navigation is outside the four viewport-sized panels. */
html:has(.ui-page-index) {
  --home-nav-height: 68px;
  scroll-padding-top: var(--home-nav-height);
  scroll-snap-type: y mandatory;
}
html.home-paging, html.home-is-switching { scroll-snap-type: none; scroll-behavior: auto; }
.ui-page-index { padding-top: var(--home-nav-height); }
.ui-page-index [data-home-snap] {
  height: calc(100svh - var(--home-nav-height));
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
  overscroll-behavior-y: contain;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  scrollbar-width: thin;
}
.ui-page-index .hero { padding: 0; background: #eaf5fe; }
.ui-page-index .hero-bg-image {
  inset: 0;
  height: 100%;
  /* Fill the full viewport width and height without stretching the artwork. */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.ui-page-index .hero-container { padding: 0; pointer-events: none; }
.ui-page-index .cms-hero-link {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}
.ui-page-index .cms-hero-link:focus-visible { outline: 3px solid #2563eb; outline-offset: -4px; }
.ui-page-index .hero-buttons {
  top: auto;
  bottom: 7%;
  left: 14%;
  right: auto;
}
.ui-page-index .cms-hero-controls {
  z-index: 2;
  pointer-events: auto;
  position: absolute;
  bottom: 2%;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  white-space: nowrap;
  margin: 0;
}
.ui-page-index .home-snap-module { display: flex; flex-direction: column; }
.ui-page-index .cms-hero-controls { gap: 10px; }
.ui-page-index .cms-hero-controls .cms-hero-indicator {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  align-items: center;
  cursor: pointer;
}
.ui-page-index .cms-hero-indicator::before {
  content: '';
  height: 4px;
  width: 100%;
  border-radius: 3px;
  background: rgba(71, 109, 157, .35);
  transition: background-color .25s ease, height .25s ease;
}
.ui-page-index .cms-hero-indicator.is-active::before {
  height: 5px;
  background: #2563eb;
}
.ui-page-index .cms-hero-indicator:hover::before { background: #3b82f6; }
.ui-page-index .cms-hero-indicator:focus-visible { outline: 2px solid #2563eb; outline-offset: 3px; }
.ui-page-index .home-snap-module > * { flex-shrink: 0; }
.ui-page-index .section-title { font-size: clamp(24px, 3.5vh, 38px); }
.ui-page-index .link-timeline-section { padding: 22px 0; }
.ui-page-index .link-timeline { margin: 18px 0; }
.ui-page-index .link-timeline-dot { width: 30px; height: 30px; margin-bottom: 8px; }
.ui-page-index .link-timeline-line { top: 15px; }
.ui-page-index .pain-section-dark { padding: 24px 0; flex-grow: 1; }
.ui-page-index .pain-section-dark .section-header { margin-bottom: 20px !important; }
.ui-page-index .pain-card { padding: 20px; }
.ui-page-index .pain-num { font-size: 28px; margin-bottom: 8px; }
.ui-page-index .pain-title { font-size: 18px; margin-bottom: 8px; }
.ui-page-index .pain-desc { margin-bottom: 12px; }
.ui-page-index .business-section { padding: 24px 0; }
.ui-page-index .business-card-image { height: clamp(90px, 16vh, 160px); }
.ui-page-index .business-card-body { padding: 18px; }
.ui-page-index .business-card-title { font-size: 20px; margin-bottom: 8px; }
.ui-page-index .business-card-desc { margin-bottom: 12px; }
.ui-page-index .business-card-list { padding-top: 10px; }
.ui-page-index .business-card-list li { padding: 3px 0; }
.ui-page-index .metrics-section { padding: 20px 0; }
.ui-page-index .metrics-header { margin-bottom: 16px; }
.ui-page-index .metric-item { padding: 18px; }
.ui-page-index .cta-section { padding: 20px 0; }
.ui-page-index .footer { margin-top: 0; padding: 24px 0 16px; flex-grow: 1; }
.ui-page-index .footer-top { padding-bottom: 16px; gap: 24px; }
.ui-page-index .footer-bottom { padding-top: 12px; }
.ui-page-index .footer-col li { margin-bottom: 8px; }

@media (min-width: 1024px) {
  .ui-page-index .business-cards { grid-template-columns: repeat(3, 1fr); }
  .ui-page-index .pain-grid { grid-template-columns: repeat(4, 1fr); }
  .ui-page-index .link-timeline { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) and (max-height: 800px) {
  .ui-page-index .link-timeline-section { padding: 12px 0; }
  .ui-page-index .link-timeline { margin: 10px 0; }
  .ui-page-index .pain-section-dark { padding: 16px 0; }
  .ui-page-index .pain-card { padding: 16px; }
  .ui-page-index .metrics-section { padding: 12px 0; }
  .ui-page-index .cta-content { padding: 8px 0; }
  .ui-page-index .footer { padding-top: 16px; }
}
@media (max-width: 768px) {
  /* Keep all text/artwork visible even when only a desktop banner is uploaded. */
  .ui-page-index .hero-bg-image {
    background-size: contain;
    background-position: center;
  }
  .ui-page-index .hero-buttons { left: 6%; right: 6%; bottom: 3%; gap: 8px; }
  .ui-page-index .hero-buttons a { padding: 10px 14px; font-size: 13px; }
  .ui-page-index .hero:has(.cms-hero-controls) .hero-buttons { bottom: 12%; }
  .ui-page-index .cms-hero-controls { bottom: 2%; }
  .ui-page-index .floating-cta { right: 12px; bottom: 12px; }
  .ui-page-index:has(.hero.home-panel-active) .floating-cta { visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.ui-page-index) { scroll-behavior: auto; }
}