/* ==================================================
   Large laptops
================================================== */
@media (max-width: 1180px) {
  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 2.65rem;
  }

  .service-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .course-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .process-line {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .process-step::after {
    display: none;
  }

  .hero-float.three {
    display: none;
  }
}

/* ==================================================
   Tablets
================================================== */
@media (max-width: 980px) {
  :root {
    --header-height: 66px;
  }

  section {
    padding: 82px 0;
  }

  .container,
  .narrow {
    width: min(100% - 34px, var(--container));
  }

  .site-header {
    top: 10px;
  }

  .nav-wrap {
    min-height: 66px;
  }

  .brand img {
    width: 168px;
  }

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

  .nav-menu {
    position: fixed;
    top: 88px;
    right: 17px;
    left: 17px;
    display: grid;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    background: rgba(7, 17, 36, .96);
    box-shadow: var(--shadow);
    backdrop-filter: blur(18px);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }

  .nav-menu.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .nav-link {
    justify-content: space-between;
    width: 100%;
  }

  .nav-actions .btn {
    display: none;
  }

  .hero {
    padding-top: 130px;
  }

  .hero-float {
    position: static;
    width: 100%;
  }

  .hero-float.one,
  .hero-float.two {
    animation: none;
  }

  .hero-float-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    width: 100%;
    margin-top: 10px;
  }

  .floating-stats,
  .feature-grid,
  .value-grid,
  .pricing-grid,
  .faq-grid,
  .contact-grid,
  .split-grid,
  .newsletter-panel,
  .footer-grid,
  .blog-layout,
  .article-shell {
    grid-template-columns: 1fr;
  }

  .price-card.featured {
    transform: none;
  }

  .service-grid,
  .course-grid,
  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .featured-post {
    grid-template-columns: 1fr;
  }

  .featured-post img {
    min-height: 280px;
  }

  .newsletter-panel {
    min-width: 0;
  }
}

/* ==================================================
   Phones
================================================== */
@media (max-width: 720px) {
  body {
    font-size: 15px;
  }

  h1 {
    font-size: 3rem;
  }

  h2,
  .page-hero h1 {
    font-size: 2.35rem;
  }

  h3 {
    font-size: 1.16rem;
  }

  .lead {
    font-size: 1rem;
  }

  .hero {
    min-height: auto;
    padding: 128px 0 72px;
  }

  .hero-actions,
  .newsletter-form {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .btn {
    width: 100%;
    white-space: normal;
  }

  .hero-float-wrap,
  .floating-stats,
  .metric-row,
  .service-grid,
  .course-grid,
  .blog-grid,
  .process-line,
  .contact-form {
    grid-template-columns: 1fr;
  }

  .stat-tile,
  .feature-card,
  .service-card,
  .course-card,
  .story-card,
  .price-card,
  .value-card,
  .contact-panel,
  .newsletter-panel {
    padding: 20px;
  }

  .page-hero {
    min-height: 470px;
    padding: 142px 0 70px;
  }

  .pricing-top,
  .footer-bottom {
    align-items: stretch;
    flex-direction: column;
  }

  .switcher {
    width: 100%;
  }

  .switcher button {
    flex: 1;
  }

  .plan-name {
    padding-right: 0;
  }

  .popular-badge {
    position: static;
    width: fit-content;
  }

  .cursor,
  .cursor-follower {
    display: none;
  }
}

/* ==================================================
   Small phones
================================================== */
@media (max-width: 460px) {
  .container,
  .narrow {
    width: min(100% - 24px, var(--container));
  }

  .nav-wrap {
    padding: 10px;
  }

  .brand img {
    width: 146px;
  }

  h1 {
    font-size: 2.45rem;
  }

  h2,
  .page-hero h1 {
    font-size: 2rem;
  }

  .company-logo {
    min-width: 136px;
  }

  .media-frame img {
    min-height: 280px;
  }
}