/* Small phones */
@media (max-width: 359px) {
  :root {
    --fs-display: 28px;
    --fs-h1: 24px;
    --fs-h2: 20px;
  }
  .screen-pad { padding-left: var(--space-4); padding-right: var(--space-4); }
}

/* Tablet and up: a bit more breathing room inside the shell, shell itself stays capped */
@media (min-width: 600px) {
  .welcome-title { font-size: 36px; }
  .scale-row.scale-11 .scale-pill { flex: 0 0 calc((100% - 4 * var(--space-2)) / 5.5); }
}

/* Desktop: shell floats centered on a navy canvas (see components.css #app-shell-outer) */
@media (min-width: 720px) {
  .topbar, .home-header, .progress-header { padding-left: var(--space-6); padding-right: var(--space-6); }
  .screen-pad { padding-left: var(--space-6); padding-right: var(--space-6); }
  .answer-area, .question-block { padding-left: var(--space-6); padding-right: var(--space-6); }
}

/* Ensure sticky CTA never hides content behind it on short viewports */
@media (max-height: 640px) {
  .welcome-hero { padding: var(--space-4) 0; }
  .result-check { width: 64px; height: 64px; margin-bottom: var(--space-4); }
  .result-check svg { width: 32px; height: 32px; }
}