@media (max-width: 1100px) {
  .hero {
    padding-inline: 32px;
  }

  .hero::after {
    background:
      url("../assets/frame-81.svg") center top / auto 100% no-repeat,
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.08),
        rgba(0, 0, 0, 0.2) 50%,
        #000 96%
      );
  }

  .hero h1 {
    --hero-headline-base-size: 56px;
    --hero-headline-base-line-height: 1.16;
    --hero-headline-emphasis-size: 56px;
    --hero-headline-emphasis-line-height: 1.16;
  }

  .statement-line {
    font-size: 40px;
    line-height: 1.45;
  }

  .statement-bg-layer {
    width: min(calc(100vw + 520px), 2071px);
  }

  .statement-code-flow {
    width: 100vw;
  }

  .product {
    padding-inline: 32px;
  }

  .product-sticky {
    flex-direction: column;
    padding-block: 72px;
  }

  .product.is-scroll-managed .product-sticky {
    left: 32px;
    right: 32px;
    width: auto;
    transform: none;
  }

  .product-art {
    width: 520px;
    min-width: 0;
  }

  .product-copy {
    width: min(100%, 838px);
  }

  .features,
  .cta-section,
  .footer {
    padding-inline: 32px;
  }

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

  .feature {
    min-height: 230px;
  }
}

@media (max-width: 720px) {
  .nav {
    --nav-action-gap: 12px;
    --nav-brand-height: 18px;
    --nav-brand-width: 118px;
    --nav-padding-left: 10px;
    --nav-padding-right: 10px;

    width: min(calc(100% - 24px), var(--max));
  }

  .nav-actions {
    font-size: 14px;
    line-height: 20px;
  }

  .hero {
    min-height: 720px;
    padding: 24px;
  }

  .hero::after {
    background:
      url("../assets/frame-81.svg") center top / auto 100% no-repeat,
      linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.04),
        rgba(0, 0, 0, 0.28) 52%,
        #000 96%
      );
  }

  .hero h1 {
    --hero-headline-base-size: clamp(38px, 11vw, 52px);
    --hero-headline-emphasis-size: clamp(38px, 11vw, 52px);
  }

  .hero p {
    margin-top: 34px;
    font-size: 18px;
    line-height: 26px;
  }

  .statement {
    min-height: 200vh;
    padding: 0 24px;
  }

  .statement-line {
    font-size: 30px;
    line-height: 1.45;
  }

  .statement-bg-layer {
    width: calc(100vw + 460px);
  }

  .statement-code-flow {
    width: 100vw;
  }

  .typing {
    width: min(var(--typing-width, 100%), 100%);
    max-width: 100%;
  }

  .product {
    --product-entry: 8vh;
    --product-pin: 82vh;
    min-height: calc(100vh + var(--product-entry) + var(--product-pin));
    padding: var(--product-entry) 20px 0;
  }

  .product-sticky {
    min-height: 100svh;
    gap: 20px;
    padding-block: 34px;
  }

  .product.is-scroll-managed .product-sticky {
    left: 20px;
    right: 20px;
    width: auto;
    transform: none;
  }

  .product-art {
    width: min(70vw, 272px);
    aspect-ratio: 1386 / 1758;
  }

  .product-copy {
    width: 100%;
    gap: 12px;
  }

  .accordion-card.active {
    padding: var(--accordion-active-padding-y) var(--accordion-active-padding-x);
  }

  .accordion-card {
    --accordion-collapsed-min-height: 78px;
    --accordion-active-padding-y: 24px;
    --accordion-active-padding-x: 22px;
    --accordion-collapsed-padding-x: 22px;
  }

  .accordion-card:not(.active) {
    padding: 0 var(--accordion-collapsed-padding-x);
  }

  .accordion-card h2,
  .accordion-card h3 {
    font-size: 24px;
    line-height: 33.6px;
  }

  .accordion-card p,
  .accordion-card li {
    font-size: 16px;
    line-height: 22.4px;
  }

  .logo-flow {
    --logo-flow-width: 128px;
    --logo-flow-height: 77px;
    --logo-flow-gap: 14px;
    --logo-flow-distance: 1704px;
    padding: 44px 20px;
  }

  .logo-flow-inner {
    gap: 18px;
  }

  .logo-flow h2 {
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0.48px;
  }

  .logo-flow-track {
    animation-duration: 76s;
  }

  .features {
    padding: 80px 20px 70px;
  }

  .feature {
    padding-inline: 8px;
  }

  .feature h2 {
    font-size: 24px;
    line-height: 33.6px;
  }

  .feature p {
    font-size: 16px;
    line-height: 22.4px;
  }

  .cta-section {
    min-height: 360px;
    padding: 20px;
  }

  .cta {
    min-height: 240px;
    padding: 30px 24px;
    align-items: flex-start;
    flex-direction: column;
  }

  .cta::before {
    background:
      url("../assets/frame-82.png") right bottom / auto 100% no-repeat,
      radial-gradient(circle at 4% 5%, rgba(0, 0, 0, 0.04), transparent 34%);
  }

  .cta h2 {
    font-size: 29px;
    line-height: 34px;
  }

  .cta p {
    font-size: 15px;
    line-height: 23px;
  }

  .footer {
    min-height: 350px;
    padding: 48px 20px 32px;
  }

  .footer-inner {
    padding-top: 44px;
  }

  .footer-row {
    font-size: 12px;
  }

  .footer-logo {
    margin-top: 44px;
  }
}

@media (max-width: 380px) {
  .nav {
    --nav-action-gap: 8px;
    --nav-brand-height: 14.4px;
    --nav-brand-width: 96px;
    --nav-contact-arrow-display: none;
    --nav-contact-padding-x: 9px;
    --nav-padding-left: 8px;
    --nav-padding-right: 8px;
    --nav-shell-gap: 8px;

    top: 8px;
    width: min(calc(100% - 16px), var(--max));
    height: 52px;
  }

  .nav-actions {
    font-size: 13px;
    line-height: 18px;
  }

  .contact-pill {
    height: 30px;
  }
}

@media (max-width: 300px) {
  .nav {
    --nav-action-gap: 6px;
    --nav-brand-height: 12.3px;
    --nav-brand-width: 82px;
    --nav-contact-padding-x: 8px;
    --nav-shell-gap: 6px;
  }

  .nav-actions {
    font-size: 12px;
    line-height: 17px;
  }

  .contact-pill {
    height: 28px;
    font-size: 11px;
    line-height: 15px;
  }
}