/* Layout ownership: shared sizing and reflow live here; component appearance
   stays in styles.css. Reader geometry is isolated in reader.css. */
:root {
  --content-width: 73.75rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --section-space: clamp(3rem, 7vw, 6.5rem);
}

html { scroll-padding-top: calc(var(--nav-h) + 1rem); }
body { overflow-wrap: break-word; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }
button { white-space: normal; }
.page :where(section, article, header, div, p, h1, h2, h3, input, select) { min-width: 0; }
.container, .nav-inner {
  width: min(100%, var(--content-width));
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.nav-inner { gap: 1rem; }
.nav-logo, .nav-right { flex-shrink: 0; }
.nav-logo, .nav-link, .nav-cta, .menu-toggle-burger, .nav-drawer-close { min-height: 2.75rem; min-width: 2.75rem; }
.mega-menu {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - var(--nav-h) - 2rem);
  max-height: calc(100dvh - var(--nav-h) - 2rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.section { padding-block: var(--section-space); }
.section-title, .pt-title, .cta-band-title {
  font-size: clamp(2rem, 1.4rem + 3.5vw, 4.5rem);
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.section-sub, .hero-sub, .pt-lead { font-size: 1rem; line-height: 1.65; }

/* The hero remains content-led when browser zoom reduces available width. */
.hero-shell { min-height: 0; overflow: clip; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(16rem, 0.75fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  min-height: 46rem;
  padding-top: calc(var(--nav-h) + clamp(2rem, 4vw, 4rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.hero-content { max-width: 43rem; text-align: left; }
.hero-title-intro { font-size: clamp(2rem, 1.25rem + 3.5vw, 4rem); line-height: 1.1; }
.hero-title { max-width: 12ch; font-size: clamp(2.75rem, 1.75rem + 4.5vw, 5.5rem); line-height: 1.02; }
.hero-sub { max-width: 52ch; margin-top: 1.5rem; font-size: 1.125rem; }
.hero-cta-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; margin-top: 1.5rem; }
.hero-cta-row > * { flex: 0 1 auto; }
.hero-cta-row > button, .hero-cta-row > .app-store-button { width: auto; }
.hero-eyebrow, .hero-sub, .hero-cta-row, .trust-badges, .hero-platform-note { margin-left: 0; margin-right: 0; justify-content: flex-start; }
.hero-eyebrow, .section-label { max-width: 100%; }
.trust-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.trust-badge { width: auto; font-size: 0.8125rem; }
.hero-mockup-wrap { min-width: 0; order: 0; }
.phone-mockup { flex-shrink: 0; }

/* Auto-fit grids respond to available content width rather than device names. */
.features-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pt-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr)); }
.preview-times-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5rem), 1fr)); overflow: visible; }
.pt-card { height: auto; }
.pt-card-name { white-space: normal; overflow: visible; }
.pt-card-time { white-space: nowrap; }
.pt-location-label { white-space: normal; overflow: visible; overflow-wrap: anywhere; }
.pt-actions-group { flex-wrap: wrap; }
.pt-toggle-row { min-width: 0; }
.pt-toggle { flex-shrink: 0; }
.pt-tabs, .pt-days-nav { height: auto; min-height: 3rem; align-items: stretch; }
.pt-tab, .pt-days-tab { height: auto; min-height: 2.75rem; white-space: normal; line-height: 1.4; padding-block: 0.625rem; }
.pt-tabs-pill, .pt-days-nav-pill { height: auto; top: 4px; bottom: 4px; }
.pt-select { min-width: 0; }
.cal-nav-bar { max-width: 100%; flex-wrap: wrap; }
.cal-current-month { min-width: 0; }
.cal-weekdays, .cal-days-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day-header { flex-wrap: wrap; gap: 0.25rem; }
.cal-legend-text { white-space: normal; overflow: visible; }
.cal-modal-content { max-width: calc(100% - 2rem); max-height: 90vh; max-height: 90dvh; overflow-y: auto; overscroll-behavior: contain; }
.faq-item.open .faq-answer { max-height: none; }
.legal-section { overflow-wrap: anywhere; }
.footer-bottom { flex-wrap: wrap; gap: 1rem; }

@media (max-width: 940px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: 3rem; }
  .hero-content { max-width: 43rem; }
  .hero-title { max-width: 15ch; }
  .hero-mockup-wrap { padding-block: 1rem; }
  .hero-mockup-wrap::before { width: min(100%, 26rem); height: auto; aspect-ratio: 1; }
}

@media (min-width: 941px) {
  .nav-links { margin-left: clamp(0.5rem, 3vw, 3rem); gap: clamp(0.75rem, 2vw, 2rem); }
}

@media (max-width: 680px) {
  .hero-inner { gap: 2rem; }
  .hero-cta-row > * { flex: 1 1 10rem; }
  .hero-sub { font-size: 1rem; }
  .hero-eyebrow { font-size: 0.75rem; line-height: 1.5; }
  .hero-eyebrow-dot { flex-shrink: 0; }
  .trust-badge { padding: 0.625rem; }
  .pt-grid { grid-template-columns: minmax(0, 1fr); }
  .pt-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem; min-height: 4rem; padding: 0.75rem; text-align: left; }
  .pt-card-icon { margin: 0; }
  .pt-card-name { margin: 0; font-size: 0.875rem; }
  .pt-card-time { margin: 0; font-size: 1rem; }
  .pt-card-status { grid-column: 2 / -1; justify-self: end; margin: 0; }
  .cal-grid-wrapper { padding: 0.5rem; }
  .cal-weekdays, .cal-days-grid { gap: 0.25rem; }
  .cal-day-cell { padding: 0.375rem 0.125rem; border-radius: var(--radius-sm); }
  .cal-day-header { flex-direction: column; align-items: center; }
  .cal-weekdays span { font-size: 0.6875rem; letter-spacing: 0; }
  .cal-badge { white-space: normal; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  .hero-title { max-width: 100%; }
  .phone-mockup { width: min(248px, calc(100vw - 3rem)); }
  .pt-actions-group { justify-content: stretch; }
  .book-selection-stats { flex-wrap: wrap; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
}