@media (max-width: 980px) {
  .intro-screen, .journey-screen {
    grid-template-columns: 1fr;
  }

  .intro-media, .chapter-media {
    min-height: 42vh;
  }

  .intro-copy, .chapter-panel {
    min-height: auto;
  }

  .intro-copy {
    padding: 28px 22px 42px;
  }

  .chapter-panel {
    padding: 22px;
  }

  .chapter-narrative {
    left: 22px;
    right: 22px;
    bottom: 24px;
  }

  .chapter-narrative blockquote {
    font-size: clamp(24px, 7vw, 40px);
  }

  .impact-grid, .score-section, .projection-section {
    grid-template-columns: 1fr;
  }

  .score-meter {
    height: 180px;
  }

  .pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .projection-live {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 620px) {
  .screen {
    min-height: auto;
  }

  .intro-media, .chapter-media {
    height: 26vh;
    min-height: 210px;
    max-height: 260px;
  }

  .intro-copy {
    padding: 20px 18px 28px;
  }

  h1 {
    font-size: clamp(34px, 10.5vw, 46px);
    margin-bottom: 14px;
  }

  .intro-copy > p:not(.eyebrow) {
    margin-bottom: 18px;
    font-size: 15px;
    line-height: 1.5;
  }

  .intro-actions, .panel-actions {
    display: grid;
  }

  .button {
    width: 100%;
  }

  .panel-header {
    align-items: flex-start;
  }

  .brand-mark {
    width: 50px;
    height: 50px;
  }

  .progress-copy {
    width: 62%;
  }

  .question-area h2 {
    font-size: clamp(27px, 9vw, 40px);
  }

  .option-grid, .money-grid, .pillars-grid, .deliverables, .projection-bars, .projection-live {
    grid-template-columns: 1fr;
  }

  .option {
    min-height: 62px;
  }

  .field input {
    font-size: 19px;
  }

  .processing-screen, .results-screen {
    width: min(100% - 20px, 1180px);
    padding: 20px 0 44px;
  }

  .results-hero {
    min-height: 64vh;
    padding: 22px;
  }

  .results-hero h2 {
    font-size: clamp(38px, 12vw, 58px);
  }

  .impact-grid article, .story-section, .score-section, .pillars-section, .projection-section, .silence-section, .human-section {
    padding: 20px;
  }

  .impact-grid strong {
    font-size: 32px;
  }

  .score-section h3 {
    font-size: 64px;
  }

  .projection-bars {
    min-height: auto;
  }

  .projection-bars div {
    min-height: 120px;
  }

  .projection-bars i {
    width: 100%;
  }

  .silence-section {
    min-height: 48vh;
  }
}