/* Mobile-first: the base styles target ~360px phones. These layers add room. */

@media (max-width: 380px) {
  .brand { font-size: 1.1rem; gap: 8px; }
  .brand-seal { width: 22px; height: 22px; }
  .option-card { gap: 12px; padding: 14px; }
}

@media (max-width: 559px) {
  .hide-sm { display: none; }
  .btn-xl { font-size: 1.45rem; padding-inline: 18px; }
}

@media (min-width: 560px) {
  :root { --gutter: 24px; }
  .hero-cta { flex-direction: row; align-items: center; flex-wrap: wrap; }
  .hero-meta { text-align: left; }
  .folder-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .actions .btn-ghost { grid-column: 1 / -1; }
  .report { padding: 28px 30px 0; }
  .report-meta { display: flex; flex-wrap: wrap; gap: 4px 28px; }
  .report-strip { margin: 0 -30px; }
  .challenge { padding: 28px 30px; justify-items: start; }

  .verdict { padding-right: 190px; min-height: 220px; }
  .verdict-stamp {
    position: absolute;
    right: 0;
    top: 34px;
    margin: 0;
  }
}

@media (min-width: 960px) {
  :root { --gutter: 40px; }
  .screen { padding-top: 48px; padding-bottom: 80px; }
  .landing { padding-top: 56px; }
  .hero {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
    padding-bottom: 80px;
  }
  .dossier { justify-self: end; transform: rotate(1.5deg); }
  .folder-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .actions-single { grid-template-columns: auto; }
  .quiz { padding-top: 40px; }
  .quiz-nav { position: static; background: none; padding-top: 8px; }
  .report { padding: 36px 44px 0; }
  .report-strip { margin: 0 -44px; }
}

@media (hover: none) {
  .folder:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .processing-fill { transition-duration: 0.001ms !important; }
}
