/* Phone layouts, using the same spacing and type scale as the home and therapist pages. */
.mobile-plan-picker { display: none; }

@media (max-width: 720px) {
  .mobile-refined .section-pad { padding-left: 20px; padding-right: 20px; }
  .mobile-refined .reveal { opacity: 1; transform: none; transition: none; }
  .mobile-refined .site-header { min-height: 76px; padding: 14px 20px; }
  .mobile-refined .site-header.scrolled { min-height: 60px; padding: 8px 16px; }
  .mobile-refined .site-header.mobile-open { max-height: calc(100svh - 24px); overflow-y: auto; }
  .mobile-refined .mobile-menu-toggle { width: 44px; height: 44px; }
  .mobile-refined h2 { font-size: clamp(33px, 9.3vw, 40px); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
  .mobile-refined .eyebrow { font-size: 10px; line-height: 1.5; letter-spacing: .09em; margin-bottom: 20px; }
  .mobile-refined .button { min-height: 54px; font-size: 15px; }
  .mobile-refined :is(a, button, input, select):focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
  .mobile-refined .section-head { padding-top: 72px; padding-bottom: 32px; text-align: left; }
  .mobile-refined .final-cta { padding-top: 76px; padding-bottom: 76px; text-align: left; }
  .mobile-refined .final-cta > p:not(.eyebrow) { font-size: 17px; line-height: 1.6; }
  .mobile-refined .final-cta .text-arrow { min-height: 44px; margin-top: 18px; }
  .mobile-refined .form-note { display: grid; justify-content: start; gap: 9px; margin-top: 22px; font-size: 12px; line-height: 1.5; }
  .mobile-refined .note-divider { display: none; }
  .mobile-refined .site-footer { padding-top: 48px; }
  .mobile-refined .footer-top { gap: 18px; padding-bottom: 32px; }
  .mobile-refined .footer-grid { gap: 30px 20px; padding-top: 32px; padding-bottom: 40px; }
  .mobile-refined .footer-grid > div { gap: 0; min-width: 0; }
  .mobile-refined .footer-grid h3 { margin-bottom: 12px; }
  .mobile-refined .footer-grid a { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 13px; overflow-wrap: anywhere; }
  .mobile-refined .footer-bottom span { display: flex; flex-wrap: wrap; gap: 0 18px; }
  .mobile-refined .footer-bottom a, .mobile-refined .footer-bottom button { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }

  .app-page .app-hero { min-height: 0; padding: 130px 20px 64px; }
  .app-page .app-icon { width: 84px; margin-bottom: 28px; }
  .app-page .app-hero h1 { max-width: 16ch; font-size: clamp(36px, 10.2vw, 44px); line-height: 1.06; margin-bottom: 24px; text-wrap: balance; }
  .app-page .app-hero .page-lede { font-size: 18px; line-height: 1.55; margin-bottom: 28px; }
  .app-page .hero-floats { display: none; }
  .app-page .store-buttons { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; max-width: 370px; margin: auto; }
  .app-page .store-button { justify-content: center; min-height: 60px; padding: 10px; gap: 8px; }
  .app-page .store-button small { font-size: 9px; letter-spacing: 0; }
  .app-page .store-button strong { font-size: 15px; }
  .app-page .store-glyph, .app-page .store-button img { flex: none; width: 21px; height: 23px; }
  .app-page .flow { padding: 0 20px; }
  .app-page .flow.is-pinned .flow-grid { padding: 92px 0 28px; gap: 28px; }
  .app-page .flow.is-pinned .phone { height: min(100%, 410px); aspect-ratio: 1 / 1.96; }
  .app-page .flow.is-pinned .flow-step { align-items: start; }
  .app-page .flow-card h2 { font-size: clamp(27px, 7.8vw, 32px); line-height: 1.1; margin-bottom: 12px; }
  .app-page .flow.is-pinned .flow-card p { font-size: 16px; line-height: 1.5; }
  .app-page .flow.is-pinned .flow-card .flow-num { font-size: 11px; margin-bottom: 10px; }
  /* Let the game scenes follow naturally after the pinned phone walkthrough. */
  .app-page .worlds { height: auto; }
  .app-page .worlds-stage { position: relative; height: auto; }
  .app-page .world { position: relative; inset: auto; height: max(600px, 85svh); opacity: 1; transition: none; }
  .app-page .world-trigger { display: none; }
  .app-page .world::after { background: linear-gradient(to top, rgba(18,14,10,.94), rgba(18,14,10,.5) 36%, transparent 65%); }
  .app-page .world-copy { left: 20px; right: auto; bottom: 36px; width: calc(100% - 40px); text-align: left; }
  .app-page .world-copy::before { display: none; }
  .app-page .world-copy p { color: var(--parchment); font-size: 17px; line-height: 1.55; }
  .app-page .world-copy .eyebrow { color: var(--lime); font-size: 10px; }
  .app-page .fun-grid { gap: 14px; padding-bottom: 72px; }
  .app-page .fun-card { padding: 26px 22px; }
  .app-page .fun-num { font-size: 13px; font-family: var(--mono); color: var(--accent-dark); margin-bottom: 22px; }
  .app-page .fun-card h3 { font-size: 27px; line-height: 1.15; }
  .app-page .fun-card p { font-size: 17px; }
  .app-page .toy-section { gap: 28px; padding-bottom: 72px; }
  .app-page .toy-copy > p:not(.eyebrow):not(.help-note) { font-size: 17px; line-height: 1.6; }
  .app-page .toy { padding: 26px 18px; min-width: 0; }
  .app-page .toy-word { font-size: clamp(42px, 13vw, 60px); }
  .app-page .toy-actions { display: grid; gap: 10px; }
  .app-page .toy-actions .button { width: 100%; }
  .app-page .fun-actions { display: grid; gap: 12px; margin-top: 28px; }

  .pricing-page .page-hero { padding-top: 130px; padding-bottom: 32px; text-align: left; }
  .pricing-page .page-hero h1 { font-size: clamp(36px, 9.8vw, 44px); line-height: 1.08; letter-spacing: -.05em; margin: 0 0 24px; text-wrap: balance; }
  .pricing-page .page-lede { font-size: 18px; line-height: 1.55; margin: 0; }
  .pricing-page .plan-grid { gap: 20px; padding-bottom: 64px; }
  .pricing-page .plan-grid.three .plan-card { padding: 26px 22px; border-radius: 22px; }
  .pricing-page .plan-head { gap: 12px; flex-wrap: wrap; }
  .pricing-page .plan-grid.three .plan-name { font-size: 29px; }
  .pricing-page .plan-grid.three .plan-price { font-size: 32px; }
  .pricing-page .plan-sub { margin-top: 10px; font-size: 10px; }
  .pricing-page .plan-desc { font-size: 16px; line-height: 1.55; margin-top: 18px; }
  .pricing-page .plan-features { font-size: 15px; line-height: 1.45; gap: 12px; }
  .pricing-page .plan-rule { margin: 22px 0; }
  .pricing-page .plan-models { margin-top: 24px; }
  .pricing-page .plan-cta { margin-top: 24px; }
  .pricing-page .compare { padding-bottom: 24px; }
  .pricing-page .compare[data-mobile-plan] .mobile-plan-picker { display: grid; gap: 12px; position: sticky; top: 76px; z-index: 4; padding: 16px 0; background: var(--paper); }
  .mobile-plan-picker label { font: 350 32px/1.1 var(--serif); letter-spacing: -.045em; }
  .plan-select-field { position: relative; }
  .plan-select-field::before { content: ""; position: absolute; right: 16px; top: 50%; width: 32px; height: 32px; transform: translateY(-50%); border-radius: 50%; background: var(--lime); pointer-events: none; }
  .plan-select-field::after { content: ""; position: absolute; right: 27px; top: calc(50% - 7px); width: 10px; height: 10px; border-right: 2px solid var(--nav-green); border-bottom: 2px solid var(--nav-green); transform: rotate(45deg); pointer-events: none; }
  .mobile-plan-picker select { appearance: none; -webkit-appearance: none; display: block; width: 100%; min-height: 68px; padding: 20px 62px 20px 22px; font: 500 18px/1.4 var(--sans); color: var(--parchment); border: 2px solid var(--nav-green); border-radius: 18px; background: var(--nav-green); box-shadow: 0 6px 16px rgba(43,60,45,.12); cursor: pointer; }
  .mobile-plan-picker option { background: var(--paper); color: var(--ink); }
  .pricing-page .compare[data-mobile-plan] .compare-scroll { overflow: visible; }
  .pricing-page .compare[data-mobile-plan] .compare-table { min-width: 0; table-layout: fixed; }
  .pricing-page .compare[data-mobile-plan] colgroup { display: none; }
  .pricing-page .compare[data-mobile-plan] tr > :first-child { width: 57%; }
  .pricing-page .compare[data-mobile-plan] tr > :not(:first-child) { display: none; }
  .pricing-page .compare[data-mobile-plan="essential"] tr > :nth-child(2),
  .pricing-page .compare[data-mobile-plan="clinical"] tr > :nth-child(3),
  .pricing-page .compare[data-mobile-plan="clinic"] tr > :nth-child(4) { display: table-cell; }
  .pricing-page .compare-table th, .pricing-page .compare-table td { padding: 16px 12px; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }
  .pricing-page .compare-head-plan { flex-direction: column; align-items: flex-start; gap: 10px; }
  .pricing-page .compare-head-plan .button { min-height: 44px; }
  .pricing-page .compare-table .group-row th { font-size: 25px; padding-top: 30px; }
  .pricing-page .compare-table td.cell-yes:last-child { color: var(--lime) !important; }
  .pricing-page .faq { padding-top: 64px; padding-bottom: 72px; gap: 28px; }
  .pricing-page .faq-q { padding: 22px 0; font-size: 17px; line-height: 1.4; gap: 16px; }
  .pricing-page .faq-a p { padding: 0 0 24px; font-size: 16px; line-height: 1.6; }
  .pricing-page .faq-item.open .faq-a { max-height: none !important; }
  .pricing-page .quote-band { padding-top: 72px; padding-bottom: 72px; gap: 30px; }
  .pricing-page .quote-stat { font-size: 52px; line-height: 1; }
  .pricing-page .feature-statement { font-size: clamp(33px, 9.3vw, 40px); line-height: 1.08; }
  .pricing-page .statement-description { font-size: 17px; line-height: 1.6; }
  .pricing-page .audit-form { display: grid; width: 100%; max-width: none; padding: 0; border: 0; border-radius: 0; background: transparent; gap: 12px; margin-top: 30px; }
  .pricing-page .audit-form input { min-height: 54px; padding: 14px 20px; border-radius: 999px; font-size: 16px; }
  .pricing-page .audit-form .button { width: 100%; }
}

@media (max-width: 360px) {
  .mobile-refined .section-pad, .app-page .flow { padding-left: 18px; padding-right: 18px; }
  .app-page .app-hero { padding-left: 18px; padding-right: 18px; }
  .app-page .store-button { gap: 6px; padding: 10px 8px; }
  .app-page .store-button strong { font-size: 14px; }
  .pricing-page .plan-grid.three .plan-card { padding: 24px 18px; }
}

@media (max-width: 720px) and (max-height: 560px) {
  .app-page .flow.is-pinned .flow-grid { padding-top: 86px; padding-bottom: 18px; gap: 18px; }
  .app-page .flow-card h2 { font-size: 24px; }
  .app-page .flow.is-pinned .flow-card p { font-size: 14px; }
}