/* Phone layouts keep glass on small surfaces and give touch controls room. */
.social-controls { display: none; }
.menu-scrim { touch-action: none; position: fixed; inset: 0; z-index: 48; background: #08051185; }
.reading-progress > span { width: 100%; transform: scaleX(0); transform-origin: left; }
.scene-idle .liquid-ring, .scene-idle .float-card,
.page-idle *, .page-idle *::before, .page-idle *::after { animation-play-state: paused !important; }

@media (max-width: 900px) {
  html { scroll-padding-top: calc(92px + env(safe-area-inset-top)); -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; }
  a, button, summary { touch-action: manipulation; }
  button, a, summary { -webkit-tap-highlight-color: #c9afff20; }
  .ambient { background: radial-gradient(ellipse at 95% 12%, #35205d 0, transparent 52%), radial-gradient(ellipse at 0 75%, #11213a 0, transparent 50%), #09070f; }
  .ambient .aurora, .noise { display: none; }
  .glass { -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #21182a80; box-shadow: inset 0 1px 0 #ffffff18, 0 10px 30px #0002; }
  .glass::before { background: linear-gradient(145deg, #decfff0b, transparent 55%); }
  .header, .mobile-nav, .float-card, .mobile-sticky {
    -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  }
  .header { top: calc(10px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); width: auto; transform: none; height: 64px; padding: 0 8px 0 17px; gap: 8px; background-color: #1d162cce; }
  .header > .brand { font-size: 9px; gap: 8px; min-height: 44px; }
  .header .brand-icon { font-size: 34px; width: 30px; }
  .nav-cta { font-size: 12px; min-height: 44px; padding: 10px 14px; gap: 9px; }
  .menu-toggle { width: 44px; height: 44px; min-width: 44px; align-items: center; padding: 0; border-radius: 50%; }
  .menu-toggle:active { background: #ffffff15; }
  .mobile-nav { top: calc(84px + env(safe-area-inset-top)); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); padding: 12px; gap: 2px; max-height: calc(100svh - 104px - env(safe-area-inset-top)); overflow-y: auto; overscroll-behavior: contain; background-color: #241a36f5; }
  .mobile-nav a { display: flex; align-items: center; min-height: 54px; padding: 12px 18px; border-radius: 15px; font-size: 17px; }
  .mobile-nav a:active { background: #c6a6ff1f; }
  .mobile-nav a:last-child { background: #c7a8ff14; color: #e8d9ff; }
  .hero { padding: calc(107px + env(safe-area-inset-top)) 6% 38px; }
  .hero, .section, footer { padding-left: max(6%, env(safe-area-inset-left)); padding-right: max(6%, env(safe-area-inset-right)); }
  .hero-copy { padding: 0; }
  .glass-chip { font-size: 9px; letter-spacing: .8px; padding: 8px 12px; margin-bottom: 0; }
  .hero h1 { font-size: clamp(44px, 14.2vw, 84px); line-height: 1.02; letter-spacing: -.055em; margin: 20px 0 18px; }
  .hero-description { font-size: 16px; line-height: 1.5; margin-bottom: 20px; }
  .hero-actions { display: grid; grid-template-columns: 1.1fr 1fr; gap: 12px; }
  .hero .button { min-height: 52px; font-size: 14px; padding: 13px 17px; gap: 12px; }
  .hero-secondary { min-height: 48px; font-size: 13px; justify-content: center; gap: 7px; }
  .hero-secondary .play { width: 30px; height: 30px; flex-shrink: 0; }
  .hero-footnote { font-size: 11px; gap: 7px; margin-top: 15px; line-height: 1.5; flex-wrap: wrap; }
  .hero-scene { width: 100%; max-width: 410px; height: 390px; margin: 20px auto 12px; }
  .portrait-shell { height: 330px; width: 74%; left: 16%; top: 16px; border-radius: 115px 115px 25px 25px; will-change: auto; }
  .liquid-ring { width: 395px; height: 395px; left: calc(50% - 197px); top: -10px; filter: none; }
  .scene-orbit { width: 390px; height: 390px; left: calc(50% - 195px); top: -5px; }
  .portrait-top { font-size: 8px; letter-spacing: .9px; top: 20px; }
  .portrait-caption { left: 22px; right: 22px; bottom: 24px; }
  .portrait-caption > span { font-size: 9px; letter-spacing: 1.2px; }
  .portrait-caption p { font-size: 51px; }
  .portrait-caption p > span { display: none; }
  .float-card { animation: none; }
  .coach-chip { left: 0; bottom: 0; width: 226px; padding: 13px 14px; gap: 10px; }
  .coach-chip b { font-size: 13px; }
  .coach-chip small { font-size: 11px; }
  .strength-chip { top: 68px; right: -1%; padding: 12px; gap: 7px; }
  .strength-chip > span { font-size: 10px; }
  .strength-chip b { font-size: 14px; }
  .scene-caption, .scroll-note, .hero-halo { display: none; }
  .principles { padding: 18px 6%; gap: 10px; }
  .principles > span { font-size: 9px; letter-spacing: .65px; gap: 10px; }
  .principles > span:nth-child(3) b { display: none; }
  .section { padding: 56px 6%; }
  .section-label { font-size: 10px; letter-spacing: .8px; margin-bottom: 25px; flex-wrap: wrap; gap: 8px 15px; }
  .section-label > span:last-child { max-width: none; }
  .section-label > span + span { display: none; }
  .section-label a { display: inline-flex; align-items: center; min-height: 44px; font-size: 10px; }
  .eyebrow, .tag, .service-no { font-size: 10px; letter-spacing: 1px; }
  .approach-grid { gap: 24px; }
  .approach-grid h2, .section-intro h2, .about-copy h2, .finder-intro h2, .faq h2 { font-size: clamp(36px, 10.6vw, 58px); letter-spacing: -.045em; }
  .lead { font-size: 20px; }
  .approach-statement > p:not(.lead), .about-copy > p:not(.lead), .finder-intro > p, .section-intro p { font-size: 16px; line-height: 1.65; }
  .text-link { font-size: 14px; min-height: 48px; }
  .pillar-grid { gap: 12px; margin-top: 28px; }
  .pillar-grid article { display: grid; grid-template-columns: 38px 1fr; gap: 9px 14px; padding: 20px; border-radius: 23px; }
  .pillar-icon { grid-row: 1 / 3; width: 38px; height: 38px; font-size: 22px; border-radius: 13px; }
  .pillar-grid h3 { margin: 2px 0 0; font-size: 20px; letter-spacing: -.6px; }
  .pillar-grid p { grid-column: 2; font-size: 14px; line-height: 1.55; margin: 0; }
  .pillar-number, .pillar-bottom { display: none; }
  .section-intro { margin-bottom: 25px; }
  .section-intro p { margin-top: 20px; }
  .service-list { gap: 14px; }
  .service { min-height: 335px; padding: 23px; border-radius: 27px; }
  .service-photo { min-height: 410px; }
  .service-photo > img { object-position: center 35%; }
  .service h3 { font-size: 31px; margin-top: 11px; }
  .service p { font-size: 15px; line-height: 1.6; margin-bottom: 16px; max-width: 100%; }
  .service-no { margin-bottom: 24px; }
  .service-habits .service-content, .service-bootcamp .service-content { padding-top: 25px; }
  .service-cta { font-size: 14px; min-height: 60px; padding-top: 13px; gap: 10px; }
  .service-cta > span { width: 44px; height: 44px; flex-shrink: 0; }
  .glass-pearl { width: 76px; height: 76px; left: auto; right: 23px; top: 22px; transform: none; opacity: .7; }
  .glass-pearl > i { width: 25px; height: 6px; top: 12px; left: 12px; }
  .bootcamp-rings { width: 130px; height: 90px; top: 8px; left: auto; right: 13px; transform: rotate(-15deg) scale(.6); transform-origin: top right; opacity: .7; }
  .about { gap: 63px; }
  .about-visual { width: 88%; max-width: 370px; }
  .about-photo { aspect-ratio: 1 / 1.02; }
  .about-note { right: -28px; min-width: 205px; padding: 18px 23px; font-size: 22px; -webkit-backdrop-filter: none; backdrop-filter: none; background-color: #36243df5; }
  .photo-index { font-size: 9px; line-height: 1.5; right: 20px; }
  .about-copy > .eyebrow, .faq .eyebrow { font-size: 10px; }
  .about-copy .lead { font-size: 19px; }
  .signature { gap: 20px; }
  .signature span { font-size: 9px; line-height: 1.5; }
  .finder-intro > p { max-width: 100%; }
  .finder-grid { gap: 24px; }
  .quiz { padding: 24px 20px; min-height: 470px; scroll-margin-top: 0; background-color: #251c34d9; }
  .quiz-top { font-size: 9px; letter-spacing: .6px; }
  .quiz-top > span:first-child { font-size: 11px; flex-shrink: 0; }
  .quiz-top > span:last-child { font-size: 9px; max-width: 155px; text-align: right; }
  .progress { margin: 18px 0 24px; }
  .quiz h3 { font-size: 25px; line-height: 1.25; }
  .quiz-helper { font-size: 14px; margin-bottom: 20px; }
  .quiz-option { font-size: 15px; min-height: 58px; padding: 14px; gap: 12px; }
  .quiz-option > i { width: 22px; height: 22px; flex-shrink: 0; }
  .quiz .button { min-height: 52px; font-size: 14px; padding: 14px 18px; gap: 12px; }
  .quiz-actions { gap: 12px; padding-top: 22px; }
  .text-button, .restart { min-width: 60px; min-height: 48px; font-size: 14px; }
  .quiz-result-label { font-size: 10px; letter-spacing: .7px; line-height: 1.7; }
  .quiz-result > p { font-size: 15px; }
  .result-summary > span { font-size: 12px; padding: 9px 12px; line-height: 1.4; }
  .quiz-result > .fineprint { font-size: 12px; }
  .social-grid { display: flex; overflow-x: auto; gap: 14px; margin-inline: -6.82%; padding: 0 6% 16px; scroll-padding-inline: 6%; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .social-grid::-webkit-scrollbar { display: none; }
  .social-card { flex: 0 0 86%; max-width: 370px; min-height: 380px; aspect-ratio: 4 / 4.5; scroll-snap-align: start; scroll-snap-stop: always; }
  .social-controls { display: flex; align-items: center; gap: 9px; margin: 3px 0 24px; color: #c7b9dc; }
  .social-controls > span:first-child { font-size: 12px; margin-right: auto; }
  .rail-count { font-size: 12px; font-variant-numeric: tabular-nums; margin-right: 6px; }
  .social-controls button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #ffffff35; background: #ffffff0b; font-size: 20px; }
  .social-controls button:disabled { opacity: .3; }
  .card-top, .card-bottom, .social-overlay > span { font-size: 10px; letter-spacing: .8px; }
  .social-overlay > .small-arrow { font-size: 13px; }
  .type-card > p { font-size: clamp(48px, 14vw, 65px); }
  .workout-card h3 { font-size: 32px; margin-bottom: 18px; }
  .workout-card .workout-graphic { flex: 1; min-height: 50px; height: auto; margin: 18px 0 12px; transform: rotate(-25deg) scale(.8); }
  .community { padding: 24px; gap: 15px; margin-top: 12px; }
  .community-icon { display: none; }
  .community > div:nth-child(2) { width: 100%; }
  .community .eyebrow { font-size: 10px; }
  .community h3 { font-size: 25px; margin-top: 10px; }
  .community p { font-size: 15px; }
  .community > .button { width: 100%; margin: 4px 0 0; font-size: 14px; min-height: 52px; padding: 14px 18px; white-space: normal; }
  .faq summary { font-size: 16px; min-height: 70px; padding: 20px 0; }
  .faq details p { font-size: 15px; padding-right: 5px; }
  .final-cta { min-height: 440px; }
  .final-cta > .eyebrow { font-size: 10px; }
  .final-cta h2 { font-size: clamp(44px, 12vw, 70px); }
  .final-cta p { font-size: 15px; }
  .final-cta .button { font-size: 15px; min-height: 54px; }
  footer { padding-bottom: calc(110px + env(safe-area-inset-bottom)); gap: 18px 14px; }
  footer > .brand { min-height: 44px; }
  footer > p { font-size: 9px; line-height: 1.6; letter-spacing: .5px; }
  footer > div { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
  footer > div a, .privacy-open, .motion-toggle { display: flex; align-items: center; min-height: 46px; font-size: 14px; text-align: left; }
  .copyright { font-size: 11px; line-height: 1.5; }
  .back-top { font-size: 10px; min-height: 44px; display: flex; align-items: center; }
  .mobile-sticky { left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(10px + env(safe-area-inset-bottom)); padding: 7px; gap: 7px; border-radius: 100px; background-color: #241a36e6; transition: opacity .2s, transform .2s, visibility .2s; visibility: hidden; opacity: 0; transform: translateY(15px); pointer-events: none; }
  .mobile-sticky.is-visible { visibility: visible; opacity: 1; transform: none; pointer-events: auto; }
  .mobile-sticky > a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 50%; min-height: 48px; padding: 11px 12px; font-size: 14px; }
  .mobile-sticky > .dock-chat { background: #ffffff08; color: #eee2ff; border: 1px solid #ffffff25; box-shadow: none; }
  .menu-open .mobile-sticky, .dialog-open .mobile-sticky { visibility: hidden; opacity: 0; pointer-events: none; }
  dialog.glass { max-height: calc(100svh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; padding: 36px 24px 24px; background: #21172ef5; }
  dialog p { font-size: 15px; }
  .dialog-close { min-width: 48px; min-height: 48px; right: 8px; top: 4px; }
}

@media (max-width: 359px) {
  .header > .brand { font-size: 8px; }
  .header .brand-icon { font-size: 30px; width: 26px; }
  .nav-cta { font-size: 11px; padding-inline: 11px; }
  .glass-chip { font-size: 8px; letter-spacing: .5px; }
  .hero .button { font-size: 12px; padding-inline: 13px; }
  .hero-secondary { font-size: 12px; }
  .hero-secondary .play { display: none; }
  .hero-footnote { font-size: 10px; }
  .hero-scene { height: 350px; }
  .portrait-shell { height: 295px; }
  .liquid-ring, .scene-orbit { width: 350px; height: 350px; left: calc(50% - 175px); }
  .portrait-top { font-size: 7px; }
  .strength-chip .pulse-icon { display: none; }
  .coach-chip { width: 216px; }
  .principles > span { font-size: 8px; letter-spacing: .3px; }
  .quiz { padding: 22px 17px; }
  .quiz .button { font-size: 13px; }
  .quiz-result > .button { font-size: 12px; }
  .mobile-sticky > a { font-size: 12px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .hero { padding-top: calc(100px + env(safe-area-inset-top)); }
  .hero h1 { font-size: 58px; }
  .hero-scene { max-width: 350px; }
  .mobile-sticky { left: 20%; right: 20%; }
}

@media (hover: none), (pointer: coarse) {
  .button:hover, .pillar-grid > article:hover, .service:hover, .social-card:hover { transform: none; }
  .button:hover::after { left: -60%; }
  .service:hover > img { transform: none; }
  .button:active, .quiz-option:active { transform: scale(.98); }
  .aurora { animation: none; will-change: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-sticky { transition: none; }
}