/* Final responsive guardrails for phones and narrow Android browsers. */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body { overflow-x: clip; }
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

main,
main > *,
.container,
.container--narrow {
  min-width: 0;
  max-width: 100%;
}

[data-content],
h1,
h2,
h3,
p,
li,
a,
button,
summary,
figcaption {
  overflow-wrap: anywhere;
}

@media (max-width: 899px) {
  .header-inner,
  .hero__grid,
  .tooth-lab__layout,
  .cta-layout,
  .documents-proof__layout,
  .patient-review-card,
  .services,
  .stats,
  .reviews,
  .facts,
  .photo-pair,
  .photo-grid,
  .doctor-grid,
  .document-grid,
  .results-grid,
  .included-grid {
    min-width: 0;
    max-width: 100%;
  }

  .header-phone { display: none; }

  .service-card,
  .stat,
  .review,
  .timeline__item,
  .galina,
  .contact-card,
  .doctor-card,
  .document-card,
  .result-card,
  .patient-review-card,
  .included-card {
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 719px) {
  body {
    padding-bottom: calc(82px + env(safe-area-inset-bottom, 0px));
  }

  .container,
  .container--narrow {
    width: 100%;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px));
  }

  .site-header {
    left: 0;
    right: 0;
    width: 100%;
  }

  .header-inner {
    width: 100%;
    gap: 8px;
    padding-left: max(10px, env(safe-area-inset-left, 0px));
    padding-right: max(10px, env(safe-area-inset-right, 0px));
  }

  .logo {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .logo__text {
    min-width: 0;
    max-width: 100%;
  }

  .logo__desc {
    display: none;
  }

  .logo__name {
    max-width: 100%;
    font-size: clamp(14px, 4.5vw, 17px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .header-actions {
    flex: 0 0 auto;
    min-width: 0;
  }

  .hero {
    width: auto;
    max-width: calc(100% - 12px);
  }

  .hero__copy,
  .hero__sub,
  .hero__trust {
    min-width: 0;
    max-width: 100%;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(35px, 10.8vw, 43px);
    line-height: .92;
    letter-spacing: -.05em;
  }

  .hero__eyebrow {
    max-width: 100%;
    font-size: 11px;
    line-height: 1.35;
  }

  .hero__sub {
    font-size: 15px;
    line-height: 1.55;
  }

  .hero__cta,
  .msg-buttons,
  .msg-buttons--cta {
    width: 100%;
    min-width: 0;
  }

  .hero__cta .btn,
  .msg-buttons .btn,
  .contact-card .btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
    text-align: center;
    white-space: normal;
  }

  .hero-visual {
    max-width: calc(100% - 28px);
    overflow: hidden;
  }

  .hero-visual__top,
  .route,
  .route__point,
  .hero-visual__footer {
    min-width: 0;
    max-width: 100%;
  }

  .hero-visual__badge {
    max-width: 48%;
    padding: 7px 9px;
    font-size: 9px;
    text-align: center;
    white-space: normal;
  }

  .route__point span,
  .hero-visual__footer span {
    overflow-wrap: anywhere;
  }

  .section,
  .tooth-lab,
  .price-proof,
  .care-proof,
  .doctors-proof,
  .documents-proof,
  .results-proof,
  .section--cta {
    width: auto;
    max-width: calc(100% - 12px);
    margin-left: 6px;
    margin-right: 6px;
  }

  .section h2,
  .proof-heading h2,
  .care-proof h2,
  .documents-proof h2,
  .tooth-lab h2,
  .section--cta h2 {
    min-width: 0;
    max-width: 100%;
    font-size: clamp(32px, 9.5vw, 39px);
    line-height: 1.02;
    letter-spacing: -.045em;
  }

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

  .section-lead,
  .proof-heading > p:last-child,
  .care-proof__copy > p:last-child,
  .documents-proof__copy > p:not(.proof-kicker):not(.documents-proof__note) {
    max-width: 100%;
    font-size: 15px;
    line-height: 1.6;
  }

  .service-card,
  .stat,
  .review,
  .timeline__item,
  .galina,
  .contact-card,
  .doctor-card,
  .document-card,
  .result-card,
  .patient-review-card,
  .included-card {
    width: 100%;
    overflow: hidden;
  }

  .service-card,
  .stat,
  .review,
  .contact-card {
    padding-left: 20px;
    padding-right: 20px;
  }

  .service-card h3,
  .doctor-card h3 {
    max-width: calc(100% - 40px);
    overflow-wrap: anywhere;
  }

  .service-card__price,
  .galina__phone,
  .cta-phone,
  .footer-links a {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

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

  .stat {
    padding: 18px 12px;
  }

  .stat__num {
    font-size: clamp(25px, 8vw, 32px);
  }

  .price-proof__table,
  .price-proof__table tbody,
  .price-proof__table tr,
  .price-proof__table th,
  .price-proof__table td {
    width: 100%;
    max-width: 100%;
  }

  .price-proof__table tbody tr {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .price-proof__table th,
  .price-proof__table td {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .price-proof__table td strong {
    white-space: normal;
  }

  .tooth-viewer__stage {
    min-height: clamp(320px, 105vw, 410px);
  }

  .tooth-viewer__controls {
    min-width: 0;
    padding-left: 16px;
    padding-right: 16px;
  }

  .tooth-viewer__hint,
  .tooth-viewer__source,
  .tooth-viewer__reset {
    width: 100%;
    max-width: 100%;
  }

  .tooth-viewer__source,
  .tooth-viewer__reset {
    overflow-wrap: anywhere;
    text-align: center;
  }

  .photo-grid,
  .doctor-grid,
  .document-grid,
  .included-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .result-card--pair .before-after {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .patient-review-card > a {
    height: clamp(300px, 108vw, 400px);
  }

  .patient-review-card figcaption,
  .doctor-card__body,
  .document-card > span {
    min-width: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .patient-review-card figcaption p {
    max-width: 100%;
    font-size: clamp(24px, 8vw, 28px);
    overflow-wrap: anywhere;
  }

  .faq details {
    max-width: 100%;
    overflow: hidden;
  }

  .faq summary {
    padding: 20px 48px 20px 18px;
    font-size: 16px;
    line-height: 1.4;
  }

  .faq__body {
    padding-left: 18px;
    padding-right: 18px;
  }

  .contact-card {
    border-radius: 24px;
  }

  .contact-card__title {
    font-size: 21px;
    line-height: 1.25;
  }

  .footer-links {
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .sticky-bar {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding:
      8px
      max(8px, env(safe-area-inset-right, 0px))
      calc(8px + env(safe-area-inset-bottom, 0px))
      max(8px, env(safe-area-inset-left, 0px));
  }

  .sticky-bar__btn {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding: 7px 3px;
    font-size: 10px;
    line-height: 1.05;
  }

  .sticky-bar__btn > span:last-child {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 374px) {
  .container,
  .container--narrow {
    padding-left: 13px;
    padding-right: 13px;
  }

  .hero h1 {
    font-size: 34px;
  }

  .hero-visual {
    left: 10px;
    right: 10px;
    max-width: calc(100% - 20px);
  }

  .hero-visual__code,
  .hero-visual__label {
    font-size: 9px;
  }

  .price-proof__table th,
  .price-proof__table td {
    padding-left: 12px;
    padding-right: 12px;
  }

  .price-proof__table td strong {
    font-size: 18px;
  }
}

@media (hover: none), (pointer: coarse) {
  .service-card:hover,
  .timeline__item:hover,
  .review:hover,
  .included-card:hover,
  .doctor-card:hover,
  .document-card:hover,
  .patient-review-card > a:hover img,
  .photos-pending [aria-labelledby="stay-h"] .photo:hover {
    transform: none;
  }
}