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

  .hero-points {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --container-pad: 2rem;
    --header-height: 72px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .section-head p {
    font-size: var(--text-lg);
  }

  .builder-inner,
  .ats-inner {
    grid-template-columns: 1fr 1fr;
  }

  .builder-inner .builder-visual {
    order: 2;
  }

  .builder-inner .builder-content {
    order: 1;
  }

  .ats-inner .ats-content {
    order: 1;
  }

  .ats-inner .ats-visual {
    order: 2;
  }
}

@media (min-width: 1024px) {
  :root {
    --header-height: 76px;
  }

  .nav-list {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav {
    display: none !important;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: var(--space-12);
  }

  .hero h1 {
    font-size: clamp(2.25rem, 3.5vw + 1rem, 3.5rem);
  }

  .hero-lead {
    font-size: var(--text-xl);
  }

  .category-grid {
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  }
}

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

  .hero {
    padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 6vw, 5rem);
  }
}

@media (max-width: 1023px) {
  .nav-list {
    display: none;
  }
}

@media (max-width: 767px) {
  .builder-inner,
  .ats-inner {
    grid-template-columns: 1fr;
  }

  .builder-inner .builder-visual,
  .builder-inner .builder-content,
  .ats-inner .ats-content,
  .ats-inner .ats-visual {
    order: initial;
  }

  .hero-actions .btn,
  .cta-actions .btn {
    flex: 1 1 auto;
  }
}

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

  .hero-points {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

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

  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cta-actions .btn {
    width: 100%;
  }

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

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

  h1 {
    font-size: 1.875rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  .section {
    padding-block: 2.5rem;
  }
}

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

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

  .brand-name {
    display: none;
  }
}

@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-block: 2rem;
  }

  .hero-visual {
    display: none;
  }
}

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

@media (min-width: 1920px) {
  :root {
    --container-max: 1360px;
    --text-base: 1.0625rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .category-card:hover,
  .example-card:hover,
  .resource-card:hover {
    transform: none;
  }

  .btn {
    min-height: 44px;
  }

  .nav-list a,
  .mobile-nav-list a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@supports (padding: env(safe-area-inset-top)) {
  .site-header {
    padding-top: env(safe-area-inset-top);
  }

  .site-footer {
    padding-bottom: calc(var(--space-6) + env(safe-area-inset-bottom));
  }

  .mobile-nav {
    padding-bottom: env(safe-area-inset-bottom);
  }
}