@media (max-width: 62rem) {
  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-copy {
    max-width: 46rem;
  }

  .product-preview {
    width: min(100%, 45rem);
  }

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

  .card-grid--editorial .card:first-child {
    grid-column: 1 / -1;
  }

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

  .loop-step:nth-child(2)::after {
    display: none;
  }

  .feature-split {
    grid-template-columns: 1fr;
  }

  .feature-copy {
    max-width: 46rem;
  }
}

@media (max-width: 50rem) {
  :root {
    --header-height: 4.5rem;
    --space-8: 3.5rem;
    --space-9: 4.5rem;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .site-header {
    background: var(--color-surface);
    backdrop-filter: none;
  }

  html.nav-open .site-header {
    position: fixed;
    right: 0;
    left: 0;
    width: 100%;
  }

  .site-nav {
    position: fixed;
    top: var(--mobile-header-height, var(--header-height));
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 101;
    width: 100%;
    height: calc(100vh - var(--mobile-header-height, var(--header-height)));
    max-height: calc(100vh - var(--mobile-header-height, var(--header-height)));
    display: block;
    padding: var(--space-4) 1rem var(--space-6);
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    visibility: hidden;
    opacity: 0;
    transform: translateY(-0.6rem);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease;
  }

  @supports (height: 100dvh) {
    .site-nav {
      height: calc(100dvh - var(--mobile-header-height, var(--header-height)));
      max-height: calc(100dvh - var(--mobile-header-height, var(--header-height)));
    }
  }

  .site-nav[data-open="true"] {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
  }

  .nav-list {
    display: grid;
    gap: var(--space-2);
  }

  .nav-link {
    min-height: 3.25rem;
    padding-inline: var(--space-4);
    font-size: var(--text-base);
  }

  .site-nav .button {
    width: 100%;
    margin-top: var(--space-4);
  }

  .trust-list {
    grid-template-columns: 1fr;
  }

  .trust-list li {
    justify-content: flex-start;
    text-align: left;
  }

  .trust-list li + li {
    border-top: 1px solid var(--color-border);
    border-left: 0;
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .card-grid--editorial .card:first-child {
    grid-column: auto;
  }

  .cta-panel {
    grid-template-columns: 1fr;
  }

  .cta-panel .button {
    justify-self: start;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 37.5rem) {
  :root {
    --space-7: 2.25rem;
    --space-8: 3rem;
    --space-9: 3.75rem;
  }

  .container {
    width: min(100% - 1.5rem, var(--container));
  }

  .brand-name {
    max-width: 9.25rem;
    font-size: 0.92rem;
  }

  .hero {
    padding-block: 3.75rem;
  }

  .hero-actions {
    display: grid;
  }

  .hero-actions .button {
    width: 100%;
  }

  .preview-content {
    grid-template-columns: 3rem 1fr;
    min-height: 21rem;
  }

  .preview-sidebar {
    padding-inline: 0.5rem;
  }

  .preview-main {
    padding: 0.8rem;
  }

  .insight-panel,
  .card,
  .loop-step {
    padding: var(--space-5);
  }

  .value-loop {
    grid-template-columns: 1fr;
  }

  .loop-step:not(:last-child)::after {
    display: none;
  }

  .insight-item {
    grid-template-columns: auto 1fr;
  }

  .insight-item .tag {
    grid-column: 2;
    justify-self: start;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .footer-brand {
    grid-column: auto;
  }

  .footer-bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 22.5rem) {
  .brand-name {
    max-width: 7.8rem;
    font-size: 0.82rem;
  }

  .product-preview {
    padding: var(--space-2);
  }

  .preview-sidebar {
    display: none;
  }

  .preview-content {
    grid-template-columns: 1fr;
  }
}