/* Keep supporting text readable at every screen size, including phones. */
@media screen{
 body{font-size:17px;line-height:1.65}
 .hero .intro,.section-heading p,.challenge-desc,.support-copy>p,
 .pathway-card p,.question-help,.insight,.insight p,.readiness-note,
 .plan-steps p,.age-tip,.progress-note,.next-step p,.faq details p,
 .events-heading p,.event-tagline,.event-date,.event-place,.event-audience,
 .events-empty p,.workshop-note p,.event-description,
 .event-modal-details .event-tagline,.event-modal-details dl>div,
 .event-modal-details ul,.event-upgrade,.ticket-pending,
 .hero-community p,.strategy-community p{
  font-size:17px;line-height:1.7
 }
 .button,.hero-copy>.button,.hero-community .button,.support-copy .button,
 .pathway-card .button,.next-step .button,.event-card .button,
 .event-modal-details>.button,.question-actions .button{
  font-size:17px;line-height:1.4;min-height:52px;gap:12px;
  white-space:normal;max-width:100%
 }
 .text-button,.flow-top .text-button,.question-actions>.text-button,
 .pathway-link,.workshop-note .text-button,.strategy-community .text-button,
 .event-modal-invitation>a{
  font-size:16px;line-height:1.5;min-height:44px;white-space:normal
 }
 .site-header nav,.mobile-hub-nav,.mobile-hub-nav a{font-size:16px;line-height:1.5}
 .site-header nav{min-width:0}
 .site-header .brand{flex-shrink:0}
 .mobile-hub-nav a{min-height:44px}
 .challenge-button .challenge-button-label,.answer strong,.plan-steps h4{font-size:18px;line-height:1.45}
 .answer small{font-size:16px;line-height:1.6;margin-top:5px}
 .answer{padding-block:18px}
 .eyebrow,.question-label,.pathway-label,.note-tag,.insight strong,
 .time-label,.event-category,.paper-label{
  font-size:14px;line-height:1.5;letter-spacing:.06em
 }
 .private-badge,.hero-caption,.hero-benefits,.paper-caption,
 .brand-hero .art-sticker,.reassurance small,.steps-badge,
 .privacy-note,.support-copy .link-caption,.coach-signoff small,
 .flow-progress span,.question-micro,.result-meta,.say-card p,
 .education-note,.pathway-card small,.event-ticket-note,
 .calendar-meta,.calendar-meta button,.month-table th,.calendar-legend,
 .agenda-heading>span,.calendar-save-note,
 .hero-community .community-tab-note,.strategy-community small,
 footer,footer>span:nth-child(2){
  font-size:14px;line-height:1.6
 }
 .faq summary,.coach-signoff,.meet-host-caption,.event-filters button,
 .calendar-day,.agenda-heading h3,#toast{font-size:16px;line-height:1.5}
 .event-filters button{min-height:44px}
 .calendar-day{height:46px}
 .calendar-meta{flex-wrap:wrap;gap:10px}
 .calendar-legend{gap:10px 18px}
 .event-modal-details h3{font-size:18px;line-height:1.4}
 .event-modal-details dl>div{grid-template-columns:65px minmax(0,1fr)}
 .copy-fallback textarea{font-size:17px;line-height:1.65}
 .hero-community .button,.strategy-community .text-button{overflow-wrap:anywhere}
 .plan-actions,.question-actions,.result-back{flex-wrap:wrap}
 .result-back .text-button{max-width:100%}
 .challenge-desc{background-size:auto;line-height:1.75}
 .hero-benefits{row-gap:10px}
 .brand-hero .art-note em{font-size:16px}
 .hero-community .community-tab-note{margin-top:12px}
 .strategy-community small{margin-top:4px}
}
@media screen and (max-width:680px){
 .site-header{height:auto;min-height:103px;padding-block:15px}
 .private-badge{white-space:normal;text-align:center;max-width:140px}
 .question-actions .button{min-width:0}
 .question-actions{align-items:flex-start;gap:12px}
 .flow-top{grid-template-columns:78px minmax(0,1fr)}
 .flow-top .text-button{font-size:14px;line-height:1.5}
 .plan-actions{gap:12px}
 .event-card{grid-template-columns:minmax(0,1fr)}
 .event-poster-thumb{width:100%;max-width:150px;margin:0}
 .workshop-note>div{min-width:0}
 .calendar-toolbar h3{font-size:24px}
 .hero-community .button{padding:16px 18px}
 .brand-hero .art-sticker{font-size:14px}
 footer>span:nth-child(2){max-width:190px}
}
@media screen and (max-width:360px){
 .question-actions{flex-wrap:wrap}
 .question-actions .button{width:100%}
 .hero-copy>.button,.hero-community .button{font-size:16px;padding:15px}
 .calendar-toolbar h3{font-size:22px}
 .calendar-toolbar{flex-wrap:wrap}
 .calendar-toolbar>div{margin-left:auto}
}