/*! VitalView Cams iPhone portrait stability and fit repair — 2026-08-13 */
html,
body,
#root,
.site-shell {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body,
  #root,
  .site-shell {
    overflow-x: clip;
  }
}

img,
svg,
video,
canvas,
iframe,
main,
.site-header,
.site-footer,
.header-inner,
.hero,
.page-wrap,
.camera-card,
.decision-panel {
  max-width: 100%;
}

.hero > *,
.section-heading > *,
.header-inner > *,
.camera-grid > *,
.category-list > *,
.location-list > *,
.official-context-grid > *,
.footer-grid > *,
.personal-grid > *,
.personal-form > * {
  min-width: 0;
}

@media (max-width: 640px) {
  .header-inner,
  main {
    padding-left: 14px;
    padding-right: 14px;
  }

  .header-inner {
    gap: 8px;
  }

  .brand {
    min-width: 0;
    flex: 0 1 auto;
    gap: 8px;
    font-size: 15.5px;
    letter-spacing: -.035em;
  }

  .brand-mark {
    width: 32px;
    height: 27px;
    flex: 0 0 32px;
  }

  .header-tools {
    min-width: 0;
    flex: 0 0 auto;
    gap: 5px;
  }

  .icon-button {
    min-width: 36px;
    height: 36px;
    padding: 0 8px;
  }

  .mobile-nav {
    max-width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  .hero {
    gap: 32px;
    padding-top: 36px;
  }

  .hero h1,
  .intro-page h1,
  .finder h1,
  .section-heading h1 {
    max-width: 100%;
    font-size: clamp(32px, 10.5vw, 40px);
    line-height: 1.07;
    letter-spacing: -.035em;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .section-heading h2 {
    max-width: 100%;
    font-size: clamp(27px, 8.5vw, 34px);
    line-height: 1.1;
    text-wrap: balance;
    overflow-wrap: break-word;
  }

  .eyebrow {
    max-width: 100%;
    font-size: 10.5px;
    letter-spacing: .09em;
    overflow-wrap: break-word;
  }

  .hero-intro,
  .section-heading p,
  .intro-page > p,
  .finder > div > p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .hero-actions,
  .hero-actions > * {
    max-width: 100%;
  }

  .primary-action {
    white-space: normal;
    text-align: center;
  }

  .decision-panel button {
    grid-template-columns: 32px minmax(0, 1fr) 16px;
    gap: 10px;
    padding: 15px 14px;
  }

  .decision-panel small {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
    line-height: 1.4;
  }

  .section-heading {
    width: 100%;
    gap: 13px;
  }

  .camera-card {
    padding: 18px 16px;
  }

  .card-title h2,
  .card-shows,
  .card-question p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .card-meta,
  .card-actions {
    flex-wrap: wrap;
  }

  .finder {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 21px 15px;
  }

  .search-row,
  .typed-search,
  .search-box,
  .search-box input {
    min-width: 0;
    max-width: 100%;
  }

  .typed-search {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .search-box {
    padding: 0 11px;
  }

  .search-submit {
    padding-left: 12px;
    padding-right: 12px;
  }

  .location-help summary,
  .personal-form .primary-action,
  .official-context-grid a,
  .footer-grid a,
  .footer-grid button {
    width: fit-content;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
  }

  .category-list button,
  .location-list button {
    max-width: 100%;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 11px;
    padding: 17px 14px;
  }

  .category-list strong,
  .location-list strong {
    max-width: 100%;
    font-size: 16px;
    line-height: 1.25;
    overflow-wrap: break-word;
  }

  .category-list small,
  .location-list small,
  .personal-grid h3,
  .personal-grid p {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  .official-context-grid article {
    grid-template-columns: auto minmax(0, 1fr);
    padding: 17px 15px;
  }

  .official-context-grid a {
    grid-column: 2;
  }

  .personal-grid article {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 10px;
  }

  .closing-standard,
  .safety-panel,
  .personal-views,
  .sister-sites,
  .site-footer {
    max-width: 100%;
  }

  .truncate,
  #root .whitespace-nowrap {
    white-space: normal;
    text-overflow: clip;
    overflow: visible;
  }
}

@media (max-width: 390px) {
  .header-inner,
  main {
    padding-left: 12px;
    padding-right: 12px;
  }

  .brand {
    font-size: 14.5px;
  }

  .hero h1,
  .intro-page h1,
  .finder h1,
  .section-heading h1 {
    font-size: clamp(30px, 10vw, 38px);
  }

  .typed-search {
    grid-template-columns: 1fr;
  }

  .search-submit {
    width: 100%;
  }
}