@media (max-width: 1199px) {
  .intro-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (max-width: 1023px) {
  .bento-card--lg,
  .bento-card--sm {
    grid-column: span 6;
  }

  .workflow-steps {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .workflow-steps::before,
  .workflow-steps::after {
    display: none;
  }

  .workflow-step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 20px;
    text-align: left;
    padding-block: 14px;
    border-bottom: 1px solid var(--color-background-soft);
  }

  .workflow-step:last-child {
    border-bottom: 0;
  }

  .workflow-step__num {
    margin-inline: 0;
    width: 46px;
    height: 46px;
    font-size: 14px;
  }

  .workflow-step h3 {
    grid-column: 2;
    margin: 0 0 4px;
  }

  .workflow-step p {
    grid-column: 2;
    max-width: none;
    margin-inline: 0;
  }

  .showcase-row + .showcase-row {
    margin-top: clamp(56px, 8vw, 88px);
  }
}

@media (max-width: 767px) {
  body.nav-open {
    overflow: hidden;
  }

  .container {
    padding-inline: 20px;
  }

  [id] {
    scroll-margin-top: 78px;
  }

  .nav-bar {
    height: 64px;
    gap: 12px;
  }

  .nav-desktop,
  .nav-login {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }

  .hero {
    padding-block-start: calc(64px + 48px);
    text-align: center;
  }

  .hero__title {
    max-width: none;
  }

  .hero__actions {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .float-card--revenue {
    top: -20px;
    right: 4px;
  }

  .float-card--orders {
    left: 2px;
    bottom: -18px;
  }

  .float-card--products {
    display: none;
  }

  .mock-sidebar {
    display: none;
  }

  .mock-window__body {
    min-height: 0;
  }

  .mock-main {
    padding: 16px;
  }

  .mock-stats {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .mock-stat__value {
    font-size: 15px;
  }

  .mock-bars {
    height: 84px;
  }

  .problem-row {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: 10px;
  }

  .problem-arrow {
    transform: rotate(90deg);
    justify-self: start;
    margin-left: 24px;
  }

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

  .feature-card--wide {
    grid-column: auto;
  }

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

  .cta-band--inline {
    padding-inline: 18px;
  }

  .showcase-row {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .showcase-row--reverse .showcase-copy {
    order: 0;
  }

  .mock-body--pos {
    grid-template-columns: 1fr;
  }

  .mock-products {
    grid-template-columns: repeat(3, 1fr);
  }

  .bento-card--lg,
  .bento-card--sm {
    grid-column: 1 / -1;
  }

  .bento-card--full {
    flex-direction: column;
    gap: 8px;
  }

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

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

  .final-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .final-cta__actions .btn {
    width: 100%;
    max-width: 360px;
    margin-inline: auto;
  }

  .faq-item__q button {
    padding: 17px 16px;
    font-size: 15.5px;
  }

  .faq-item__panel {
    padding: 0 16px 18px;
  }

  .floating-tools {
    top: auto;
    right: auto;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
  }

  .social-links {
    flex-direction: row;
    gap: 6px;
    padding: 5px;
    border-radius: 15px;
  }

  .social-link,
  .scroll-top {
    width: 40px;
    height: 40px;
    border-radius: 11px;
  }

  .social-link svg,
  .scroll-top svg {
    width: 20px;
    height: 20px;
  }

  .scroll-top {
    right: 15px;
    bottom: 72px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .footer__cols {
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 560px) {
  .intro-grid {
    grid-template-columns: 1fr;
  }

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

  .mock-mini-stats {
    grid-template-columns: 1fr;
  }
}

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