/* Mobile composition only. Desktop rules and screenshot assets stay intact. */
@media (max-width:899.98px) {
  html { scroll-padding-top:76px; }
  .container { padding-inline:20px; }
  .header-row { height:64px; gap:16px; }
  nav.primary { gap:8px; }
  nav.primary .link, nav.primary .btn-cta-desktop { display:none; }
  .theme-toggle { margin-left:0; transform:none; }
  .hamburger { display:inline-flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; color:var(--ink); }
  .hero { padding:32px 0 52px; }
  .hero-grid { gap:32px; }
  h1.display { font-size:clamp(36px,9vw,56px); line-height:1.05; margin-top:18px; max-width:15ch; }
  .lede { margin-top:18px; font-size:17px; line-height:1.55; }
  .hero-copy-desktop { display:none; }
  .hero-copy-mobile { display:inline; }
  .hero .lede { margin-top:14px; font-size:16px; max-width:32ch; }
  .hero .trust > span:nth-child(n+2) { display:none; }
  .eyebrow { font-size:11px; letter-spacing:0; }
  .waitlist-row { margin-top:24px; }
  .email-field { border-radius:20px; padding:6px; flex-direction:column; align-items:stretch; }
  .email-field input { width:100%; min-height:48px; padding:10px 12px; font-size:16px; }
  .email-field .btn { min-height:46px; width:100%; font-size:15px; }
  .trust { margin-top:20px; gap:8px 12px; font-size:12px; }
  .trust .sep { display:none; }
  .hero .phone-wrap { width:100%; padding:8px 48px 8px 0; margin-top:8px; }
  .hero .phone { width:clamp(200px,57vw,250px); flex-shrink:0; transform:none; }
  .site-mascot--hero { left:calc(50% + clamp(100px,28.5vw,125px) - 20px); width:72px; bottom:16px; }
  section { padding:52px 0; scroll-margin-top:0; }
  .section-head { gap:12px; margin-bottom:28px; }
  h2.section-title { font-size:clamp(29px,7.4vw,42px); line-height:1.1; }
  .section-desc { font-size:16px; line-height:1.6; }
  .section-kicker { font-size:11px; }
  .mobile-swipe-hint { display:flex; justify-content:space-between; align-items:center; color:var(--warm-2); font-size:12px; margin:0 0 12px; }
  /* The next card peeks into view. Native scrolling keeps vertical page gestures. */
  #mix .mix-gallery, #what .trio { display:flex; flex-wrap:nowrap!important; justify-content:flex-start!important; gap:24px!important; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding:20px; margin:0 -20px; padding:4px 20px 24px; scrollbar-width:thin; scrollbar-color:var(--terra-soft) transparent; }
  #mix .mix-gallery { margin-top:0!important; }
  #mix .trio-item, #what .trio-item { flex:0 0 min(76vw,300px); width:min(76vw,300px); max-width:300px; min-width:0; gap:20px; scroll-snap-align:start; }
  .trio-phone { width:100%; max-width:260px; }
  .shot-scene { width:100%; max-width:260px; padding-right:24px; }
  .shot-scene .trio-phone { width:100%; }
  .site-mascot--shot { left:auto; right:-10px; width:56px; bottom:24px; }
  .trio-caption { width:100%; max-width:none; gap:7px; }
  .trio-caption h3 { font-size:21px; line-height:1.15; }
  .trio-caption p { font-size:14px; }
  .trio-kicker { font-size:10px; }
  .program-collection { min-height:0; height:auto; width:100%; padding:28px 22px; border-radius:28px; }
  .program-collection h3 { font-size:27px; margin:14px 0 20px; }
  .program-collection li { padding:14px 0; }
  .program-collection p { margin-top:18px; }
  .companion-section .hero-grid { gap:24px; }
  .companion-scene { min-height:300px; }
  .companion-halo { width:260px; height:260px; }
  .site-mascot--companion { width:142px; height:247px; }
  .companion-note { left:0; top:4px; font-size:12px; }
  .companion-leaf { width:70px; height:150px; bottom:14px; }
  .dream-section { aspect-ratio:auto!important; min-height:0; }
  .dream-section .dream-inner { padding:64px 0; }
  .dream-section h2 { font-size:36px; }
  .dream-section .bg-overlay { background:linear-gradient(180deg,rgba(15,8,4,.48),rgba(15,8,4,.72)); }
  .dream-section p.body { font-size:16px; }
  .price-grid { grid-template-columns:1fr; margin-top:28px; gap:16px; }
  .price-card { padding:24px; gap:18px; }
  .price-head { flex-wrap:wrap; }
  .faq-grid { gap:28px; }
  .faq-q { min-height:64px; padding:18px 0; font-size:18px; line-height:1.35; }
  .faq-a p { font-size:15px; }
  .final { padding:28px 20px; border-radius:24px; }
  .final h2 { font-size:32px; }
  .final .sub { font-size:16px; }
  .site-mascot--final { width:68px; height:118px; margin-bottom:12px; }
  footer { padding:40px 0 24px; }
  .foot-grid { grid-template-columns:1fr 1fr; gap:24px 16px; }
  .foot-grid > :first-child { grid-column:1/-1; }
  .foot-col h5 { margin:0 0 12px; font-size:11px; }
  .foot-col a { display:inline-block; padding-block:5px; font-size:14px; }
  .foot-bar { margin-top:28px; gap:14px; }
  .drawer { height:100dvh; overflow-y:auto; padding:16px 20px max(20px,env(safe-area-inset-bottom)); }
  .drawer-links { margin-top:16px; }
  .drawer-links a { font-size:28px; padding:12px 0; }
  .drawer-cta { padding:24px 0 0; }
  html.menu-open, html.menu-open body { overflow:hidden; }
  a, button { touch-action:manipulation; }
  @media (hover:none) {
    .btn:hover,.price-card:hover,.wordmark:hover .mark svg { transform:none; }
  }
  @media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }
}