/* Mobile readability layer. Keep the approved typography and page composition. */
.commerce-pack { --commerce-ink: #986018; --commerce-bg: #fff0d4; }
.commerce-subscription { --commerce-ink: #7750a5; --commerce-bg: #f0e6fb; }
.commerce-trial { --commerce-ink: #31795c; --commerce-bg: #e0f3e8; }
.commerce-single { --commerce-ink: #326ca6; --commerce-bg: #e2effc; }
.commerce-icon {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 14px;
  color: var(--commerce-ink);
  background: var(--commerce-bg);
  font-style: normal;
}
.commerce-icon svg { display: block; }
.studio-kpi-icon:is(.commerce-pack,.commerce-subscription) {
  color: var(--commerce-ink);
  background: var(--commerce-bg);
}
@media (max-width: 600px) {
  body { font-size: 16px; line-height: 1.55; }
  #main :is(p, .explain, .empty, .notice) { overflow-wrap: anywhere; }
  #main :is(small, .small, .caption, .page-title p, .period-note) {
    font-size: 14px;
    line-height: 1.55;
  }
  #main :is(.stat-grid span, .stat-grid em, .student-kpis span,
    .studio-kpis small, .studio-kpis > button > span:last-child) {
    font-size: 13px;
    line-height: 1.45;
  }
  #main .studio-kpis .comparison-label { font-size: 13px !important; line-height: 1.45; }
  #main :is(.conversion-rate-card > p, .conversion-funnel small,
    .course-coach, .student-row small, .history-row small) { font-size: 14px; line-height: 1.5; }
  #main :is(.course-top .grow > strong, .student-row strong, .history-row strong,
    .offer-item strong, .priority-list strong, .momentum-intro strong) { font-size: 16px; line-height: 1.4; }
  #main :is(.btn, .textbtn, .field) { font-size: 15px; }
  #main :is(.btn, .textbtn, .segments button, .chips button, .filter-pill) { min-height: 44px; }
  #main :is(.segments button, .chips button, .filter-pill) { font-size: 13px; line-height: 1.4; }
  #main :is(input, select, textarea), .sheet :is(input, select, textarea) {
    font-size: 16px; /* Prevent automatic form zoom on iPhone. */
    min-width: 0;
  }
  #main :is(.grow, .field, .stat-grid > div, .studio-kpis > button) { min-width: 0; }
  #main :is(.occupancy-day strong, .occupancy-day small, .habit-chart small,
    .chart-key, .occupancy-legend) { font-size: 12px; line-height: 1.5; }
  #main .occupancy-score small { font-size: 13px; }
  #main .studio-kpis strong { font-size: clamp(23px, 6.4vw, 29px); line-height: 1.2; }
  #main .amount { font-size: clamp(30px, 8.2vw, 36px); line-height: 1.2; }
  #main .home-date small { font-size: 11px; }
  .nav button { font-size: 12px; line-height: 1.25; min-width: 0; }
  .nav { height: 82px; }
  .screen { padding-bottom: 150px; }
  .sheet :is(.caption, .explain, .notice, .field) { font-size: 14px; line-height: 1.55; }
  .activity-dropdown .activity-row { font-size: 14px; line-height: 1.5; }
  .activity-dropdown :is(small, .textbtn) { font-size: 13px; }
}