/* Homepage mobile experience · 2026-10-15
   The carousel wrapper is layout-transparent above the mobile breakpoint so
   the established tablet and desktop grids remain pixel-identical. */
.mobileCarouselTrack { display: contents; }
.mobileCarouselDots { display: none; }

@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  img { max-width: 100%; }

  .siteHeader {
    background: rgba(244, 240, 232, .94);
    backdrop-filter: blur(20px) saturate(1.08);
  }

  .navShell {
    width: 100%;
    height: 64px;
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    gap: 10px;
  }

  .brand {
    min-width: 0;
    gap: 7px;
    font-size: clamp(.88rem, 4.15vw, 1rem);
    white-space: nowrap;
  }

  .brandMark {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    font-size: 1.42rem;
  }

  .mobileMenu { flex: 0 0 auto; }

  .mobileMenu summary {
    min-width: 70px;
    min-height: 44px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-color: rgba(23, 49, 40, .18);
    border-radius: 999px;
    background: rgba(255, 255, 255, .55);
    font-size: .75rem;
  }

  .mobileMenu summary::before {
    content: "";
    width: 16px;
    height: 10px;
    border-top: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background: linear-gradient(currentColor, currentColor) center / 16px 1.5px no-repeat;
  }

  .mobileMenu[open] summary {
    border-color: var(--forest);
    background: var(--forest);
    color: white;
  }

  .mobileMenu nav {
    top: 50px;
    right: 0;
    width: min(292px, calc(100vw - 24px));
    padding: 10px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 24px 70px rgba(17, 43, 34, .2);
  }

  .mobileMenu nav span,
  .mobileMenu nav a {
    min-height: 44px;
    padding: 0 13px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(23, 49, 40, .08);
  }

  .mobileSignup {
    min-height: 48px;
    margin-top: 10px;
    border-radius: 999px;
  }

  .simplifiedHero {
    width: 100%;
    min-height: 0;
    padding: 34px 16px 28px;
    grid-template-columns: minmax(0, 1fr);
    gap: 34px;
  }

  .heroGlow {
    width: 260px;
    height: 260px;
    left: -165px;
    top: 118px;
    opacity: .78;
  }

  .heroCopy { padding: 0; }

  .eyebrow {
    margin-bottom: 14px;
    font-size: clamp(.66rem, 3vw, .73rem);
    letter-spacing: .13em;
  }

  .hero h1 {
    max-width: 12ch;
    font-size: clamp(3.05rem, 14.4vw, 4.2rem);
    letter-spacing: -.067em;
    line-height: .91;
  }

  .heroLead {
    margin-top: 22px;
    font-size: clamp(.96rem, 4.2vw, 1.06rem);
    line-height: 1.62;
  }

  .heroActions {
    margin-top: 26px;
    gap: 13px;
  }

  .heroActions .pillButton {
    width: 100%;
    min-height: 52px;
    padding-inline: 22px;
  }

  .softStatement {
    width: 100%;
    text-align: center;
    font-size: .75rem;
  }

  .trustList {
    margin-top: 22px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    font-size: .8rem;
  }

  .heroVisual {
    width: 100%;
    max-width: none;
    padding: 0;
  }

  .imageFrame {
    width: 100%;
    aspect-ratio: 1.18;
    border-radius: 94px 94px 24px 24px;
    box-shadow: 0 18px 50px rgba(35, 54, 45, .15);
  }

  .floatingCard {
    max-width: calc(100% - 20px);
    padding: 10px 12px;
    gap: 9px;
    border-radius: 14px;
  }

  .floatingCard strong { font-size: .76rem; }
  .floatingCard small { font-size: .64rem; }
  .floatingTop { top: 8%; left: -4px; }
  .floatingBottom { right: -4px; bottom: 5%; }
  .miniIcon { width: 30px; height: 30px; }
  .matchFaces { min-width: 58px; }
  .matchFaces i { width: 27px; height: 27px; }

  .section {
    width: calc(100% - 32px);
    margin: 56px auto;
  }

  .primaryTopic,
  .dedicatedIntro,
  .locationGateway {
    gap: 28px;
  }

  .primaryTopic { margin-top: 42px; }

  .primaryTopic h2,
  .locationGateway h2,
  .dedicatedIntro h2,
  .productCopy h2,
  .membershipIntro h2 {
    font-size: clamp(2.45rem, 12.4vw, 3.4rem);
    line-height: .98;
  }

  .primaryTopicCopy p,
  .locationGatewayCopy p,
  .richCopy p {
    font-size: .94rem;
    line-height: 1.68;
  }

  .networkProof {
    padding: 66px 16px 36px;
  }

  .proofShell { gap: 34px; }

  .proofHeading h2 {
    max-width: 9ch;
    font-size: clamp(3rem, 14vw, 4.05rem);
  }

  .proofHeading > p:not(.eyebrow) {
    margin-top: 22px;
    font-size: .92rem;
  }

  .proofStamp { margin-top: 22px; }

  .statsGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .statsGrid article {
    min-height: 148px;
    padding: 19px 15px;
    border-radius: 20px;
  }

  .statIndex { left: 15px; top: 15px; }
  .statIcon { width: 34px; height: 34px; right: 12px; top: 12px; font-size: .9rem; }
  .statsGrid strong { font-size: clamp(1.78rem, 9.4vw, 2.55rem); }
  .statsGrid p { margin-top: 6px; font-size: .68rem; line-height: 1.35; }
  .dataNote { margin-top: 18px; padding-top: 16px; text-align: left; line-height: 1.45; }

  .dedicatedIntro { margin-bottom: 62px; }
  .dedicatedIntro::after { bottom: -31px; }

  .memberShowcase {
    width: 100%;
    margin: 64px auto 28px;
    overflow: hidden;
  }

  .memberHeading,
  .memberShowcase > .illustrationNote {
    width: calc(100% - 32px);
    margin-left: auto;
    margin-right: auto;
  }

  .memberHeading {
    margin-bottom: 32px;
    gap: 24px;
  }

  .memberHeading h2 {
    font-size: clamp(3.15rem, 15vw, 4.35rem);
    line-height: .9;
  }

  .memberHeading > p {
    font-size: .91rem;
    line-height: 1.6;
  }

  .mobileCarousel { min-width: 0; }

  .mobileCarouselTrack {
    display: flex;
    width: 100%;
    min-width: 0;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .mobileCarouselTrack::-webkit-scrollbar { display: none; }

  .memberGrid {
    display: block;
    max-width: none;
  }

  .memberGrid .mobileCarouselTrack {
    padding: 4px 16px 18px;
    scroll-padding-inline: 16px;
  }

  .memberGrid .mobileCarouselTrack > .memberCard {
    flex: 0 0 calc(100% - 48px);
    max-width: 360px;
    margin: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 112px 112px 24px 24px;
    box-shadow: 0 16px 40px rgba(31, 54, 44, .09);
  }

  .memberPhoto { aspect-ratio: .88; }
  .memberNumber { left: 17px; top: 17px; }
  .memberContent { padding: 21px 19px 22px; }
  .memberNameRow h3 { font-size: 1.55rem; }
  .memberNote { min-height: 0; font-size: .82rem; }
  .memberTags { margin-top: 16px; }

  .mobileCarouselDots {
    min-height: 48px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
  }

  .memberGrid .mobileCarouselDots,
  .memberShowcase > .illustrationNote,
  .memberShowcase > .modelGroupDisclosure--member-row {
    display: none;
  }

  .mobileCarouselDots button {
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    cursor: pointer;
  }

  .mobileCarouselDots button span {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: rgba(23, 59, 47, .28);
    transition: width 180ms ease, background 180ms ease;
  }

  .mobileCarouselDots button[aria-current="true"] span {
    width: 24px;
    background: var(--terracotta);
  }

  .illustrationNote {
    margin-top: 6px;
    line-height: 1.5;
  }

  .productStory {
    width: calc(100% - 24px);
    margin: 28px auto 56px;
    padding: 12px;
    gap: 12px;
    border-radius: 28px;
  }

  .productImage { border-radius: 20px; }
  .productImage img { min-height: 0; aspect-ratio: 1 / .82; object-position: center; }
  .productCopy { padding: 22px 10px 24px; }
  .productCopy p:not(.eyebrow) { margin-top: 20px; font-size: .91rem; line-height: 1.65; }
  .productTags { margin-top: 24px; gap: 7px; }
  .productTags span { padding: 8px 10px; font-size: .7rem; }

  .toolsSection { padding-top: 0; }
  .sectionHeading.centered { margin-bottom: 34px; text-align: left; }
  .sectionHeading h2 { font-size: clamp(2.5rem, 12.5vw, 3.45rem); }
  .sectionHeading > p:not(.eyebrow) { font-size: .91rem; }

  .toolsGrid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .toolsGrid article {
    min-height: 0;
    padding: 23px 21px;
    border-radius: 20px;
  }

  .toolsGrid h3 { margin: 28px 0 8px; font-size: 1.45rem; }
  .toolsGrid p { font-size: .83rem; line-height: 1.55; }

  .membershipPanel {
    width: calc(100% - 24px);
    margin: 56px auto;
    padding: 30px 18px;
    gap: 34px;
    border-radius: 28px;
  }

  .membershipIntro > p:last-child { font-size: .91rem; }
  .membershipColumns { grid-template-columns: 1fr; gap: 12px; }
  .membershipColumns article { padding: 23px 20px; border-radius: 20px; }
  .membershipColumns ul { margin-top: 20px; }
  .membershipColumns li { margin: 10px 0; font-size: .82rem; line-height: 1.55; }

  .successStories {
    margin-top: 56px;
    padding: 56px 16px 24px;
    overflow: hidden;
  }

  .storiesIntro {
    margin-bottom: 34px;
    gap: 24px;
  }

  .storiesIntro h2 {
    font-size: clamp(3rem, 14vw, 4.05rem);
    line-height: .92;
  }

  .storiesIntro > p:last-child { font-size: .91rem; line-height: 1.6; }

  .successStoryGrid {
    display: block;
    width: 100%;
    max-width: none;
  }

  .successStoryGrid .mobileCarouselTrack {
    gap: 12px;
    padding: 4px 0 18px;
    scroll-padding-inline: 0;
  }

  .successStoryGrid .mobileCarouselTrack > .successStoryCard {
    flex: 0 0 calc(100% - 24px);
    margin: 0;
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    border-radius: 24px;
  }

  .successStoryImage { min-height: 0; aspect-ratio: 1.28; }
  .successStoryCopy { padding: 24px 21px; }
  .successStoryCopy h3 { font-size: 1.65rem; }
  .successStoryCopy > p:not(.storyPlace) { font-size: .82rem; line-height: 1.58; }
  .successStoryGrid .mobileCarouselDots button span { background: rgba(255, 255, 255, .42); }
  .successStoryGrid .mobileCarouselDots button[aria-current="true"] span { background: white; }
  .storyDisclaimer { margin-top: 22px; padding-top: 18px; line-height: 1.5; text-align: left; }

  .successStoryGrid .mobileCarouselDots,
  .successStories > .modelGroupDisclosure--story-row,
  .successStories > .storyDisclaimer {
    display: none;
  }

  .locationGateway {
    padding: 30px 22px;
    border-radius: 26px;
  }

  .locationGatewayLink {
    min-height: 54px;
    margin-top: 24px;
    padding: 14px 18px;
    gap: 18px;
    font-size: .84rem;
    line-height: 1.35;
  }

  .homepageFaq { margin-bottom: 60px; }
  .homepageFaq .sectionHeading { margin-bottom: 30px; }

  .faqList summary {
    min-height: 64px;
    padding: 17px 0;
    gap: 14px;
    font-size: .94rem;
    line-height: 1.4;
  }

  .faqList summary span {
    min-width: 32px;
    min-height: 44px;
    display: grid;
    place-items: center;
  }

  .faqList details p {
    margin: 0 0 22px;
    padding-right: 12px;
    font-size: .86rem;
    line-height: 1.64;
  }

  .editorialFooter {
    padding: 60px 16px max(26px, env(safe-area-inset-bottom));
  }

  .editorialFooter .footerTop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 22px;
  }

  .editorialFooter .footerTop > div:first-child { grid-column: 1 / -1; }
  .editorialFooter .footerTop > div:not(:first-child) { padding-top: 0; }
  .editorialFooter .footerTop strong { margin-bottom: 17px; font-size: .66rem; }
  .editorialFooter .footerTop > div:not(:first-child) a,
  .editorialFooter .footerTop > div:not(:first-child) span {
    min-height: 38px;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: .79rem;
    line-height: 1.3;
  }

  .editorialFooter .footerBrandColumn p {
    margin: 21px 0;
    font-size: .87rem;
    line-height: 1.65;
  }

  .footerBottom {
    margin-top: 38px;
    padding-top: 20px;
    flex-direction: column;
    gap: 9px;
    line-height: 1.5;
  }
}

@media (min-width: 360px) and (max-width: 767px) {
  .toolsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .toolsGrid article { padding: 21px 17px; }
  .toolsGrid h3 { margin-top: 25px; font-size: clamp(1.22rem, 6vw, 1.48rem); }
}

@media (max-width: 359px) {
  .brand { font-size: .82rem; }
  .brandMark { width: 36px; height: 36px; flex-basis: 36px; }
  .mobileMenu summary { min-width: 66px; padding-inline: 10px; }
  .hero h1 { font-size: 2.9rem; }
  .floatingBottom { display: none; }
  .statsGrid strong { font-size: 1.72rem; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .mobileCarouselTrack { scroll-behavior: auto; }
}