@layer responsive {

  @media (min-width: 480px) {
    .pfg-hero__title {
      line-height: 1.0;
    }
  }

  @media (min-width: 768px) {
    .pfg-cookie-top {
      align-items: center;
    }

    .pfg-cookie-category {
      align-items: center;
    }
  }

  @media (min-width: 1024px) {
    .pfg-hero {
      grid-template-columns: 5fr 4fr;
    }

    .pfg-hero__eval-card {
      position: absolute;
    }
  }

  @media (min-width: 1280px) {
    .pfg-status-strip {
      justify-content: flex-start;
    }
  }

  @media (min-width: 1600px) {
    :root {
      --container-pad: 4rem;
    }

    .pfg-section {
      padding-block: 5rem;
    }

    .pfg-section--lg {
      padding-block: 7rem;
    }
  }

  @media (min-width: 1920px) {
    :root {
      --container-max: 1440px;
    }

    .pfg-wrap--wide {
      max-inline-size: 1680px;
    }
  }

  @media (max-width: 480px) {
    .pfg-cookie-actions {
      flex-direction: column;
      inline-size: 100%;
    }

    .pfg-cookie-actions .pfg-btn {
      justify-content: center;
      inline-size: 100%;
    }

    .pfg-hero__actions {
      flex-direction: column;
      align-items: flex-start;
    }

    .pfg-hero__actions .pfg-btn {
      inline-size: 100%;
      justify-content: center;
    }

    /* Status strip: shrink on tiny screens so it doesn't crowd header */
    .pfg-status-strip {
      font-size: 0.65rem;
      block-size: auto;
      min-block-size: var(--strip-h);
      padding-block: var(--space-2);
      padding-inline: var(--space-4);
      white-space: normal;
      text-align: center;
    }

    /* Prevent hero panel from overlapping on very small screens */
    .pfg-hero__eval-card {
      position: static !important;
      margin-block-start: var(--space-4);
      inline-size: 100%;
    }

    /* Weight chart: single column label+pct on tiny screens */
    .pfg-weight-row {
      grid-template-columns: 1fr auto;
    }
    .pfg-weight-row__track {
      display: none;
    }

    /* Platform card meta: single column */
    .pfg-platform-card__meta {
      grid-template-columns: 1fr;
    }
  }

  /* Extra small – pfg-flex--between sections stack vertically, but NEVER in the header */
  @media (max-width: 400px) {
    .pfg-section .pfg-flex--between {
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-3);
    }

    /* The header inner is NOT a pfg-section child, so it stays as a row naturally */
    .pfg-header-inner {
      flex-direction: row;
      align-items: center;
    }
  }

  @media (max-width: 320px) {
    :root {
      --container-pad: 0.75rem;
    }

    .pfg-logo__text {
      font-size: var(--fs-md);
    }
  }

  @supports (padding: env(safe-area-inset-bottom)) {
    .pfg-site-footer {
      padding-block-end: calc(var(--space-8) + env(safe-area-inset-bottom));
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .pfg-mobile-nav {
      transition: none;
    }

    .pfg-reading-progress {
      transition: none;
    }

    .pfg-accordion__body {
      transition: none;
    }

    .pfg-accordion__indicator {
      transition: none;
    }
  }

  @media (forced-colors: active) {
    .pfg-btn {
      forced-color-adjust: none;
    }

    .pfg-score-bar__fill,
    .pfg-weight-row__fill {
      forced-color-adjust: none;
    }
  }

  @container (max-width: 400px) {
    .pfg-platform-card {
      padding: var(--space-4);
    }

    .pfg-platform-card__meta {
      grid-template-columns: 1fr;
    }
  }

  @container (max-width: 360px) {
    .pfg-weight-row {
      grid-template-columns: 1fr;
    }

    .pfg-weight-row__track {
      display: none;
    }
  }
}