@media (max-width: 1080px) {
  .site-header {
    height: 68px;
    padding-inline: clamp(18px, 4vw, 40px);
  }

  .brand {
    width: clamp(156px, 28vw, 218px);
    height: 40px;
  }

  .hero-content {
    width: min(720px, calc(100% - 36px));
    bottom: clamp(34px, 7svh, 72px);
  }

  .product-name {
    font-size: clamp(38px, 7vw, 58px);
  }

  h1 {
    font-size: clamp(34px, 6vw, 54px);
  }

  .hero-copy {
    max-width: 680px;
    font-size: clamp(15px, 2vw, 19px);
  }

  .sequence-stage {
    padding: calc(clamp(16px, 3vw, 42px) * (1 - var(--sequence-expand, 0)));
  }

  .sequence-frame-shell {
    width: calc(100vw - (clamp(32px, 6vw, 84px) * (1 - var(--sequence-expand, 0))));
    height: calc(100svh - (clamp(32px, 6vw, 84px) * (1 - var(--sequence-expand, 0))));
  }

  .third-dev-section {
    padding-inline: clamp(20px, 5vw, 48px);
  }
}

@media (max-width: 760px) {
  .site-header {
    height: 62px;
    padding-inline: 18px;
  }

  .brand {
    width: clamp(142px, 44vw, 190px);
    height: 36px;
  }

  .hero-content {
    bottom: max(28px, env(safe-area-inset-bottom));
  }

  .product-name {
    max-width: 100%;
    margin-bottom: 12px;
    font-size: clamp(32px, 10vw, 44px);
    line-height: 1.04;
  }

  h1 {
    margin-bottom: 18px;
    font-size: clamp(30px, 8.6vw, 40px);
    line-height: 1.12;
  }

  .hero-copy {
    max-width: 92vw;
    font-size: 15px;
    line-height: 1.62;
  }

  .hero-action {
    min-width: 154px;
    min-height: 46px;
    margin-top: 26px;
    font-size: 17px;
  }

  .homepage-sub-banner {
    height: clamp(22px, 4svh, 38px);
  }

  .sequence-stage {
    padding: calc(clamp(12px, 3.8vw, 24px) * (1 - var(--sequence-expand, 0)));
  }

  .sequence-frame-shell {
    width: calc(100vw - (clamp(24px, 7.6vw, 48px) * (1 - var(--sequence-expand, 0))));
    height: calc(100svh - (clamp(24px, 7.6vw, 48px) * (1 - var(--sequence-expand, 0))));
    border-radius: calc(18px * (1 - var(--sequence-expand, 0)));
    backdrop-filter: blur(calc(14px * (1 - var(--sequence-expand, 0))));
  }

  .third-sub-banner {
    height: clamp(30px, 6svh, 58px);
  }

  .third-dev-section {
    min-height: 100svh;
    padding: 64px 20px;
    place-items: center start;
  }

  .third-dev-section h2 {
    font-size: clamp(38px, 12vw, 62px);
  }

  .third-dev-section p:last-child {
    margin-top: 22px;
    font-size: 16px;
  }
}

@media (max-width: 420px) {
  .site-header {
    height: 56px;
    padding-inline: 14px;
  }

  .brand {
    width: clamp(132px, 48vw, 168px);
    height: 32px;
  }

  .hero-content {
    width: calc(100% - 28px);
  }

  .hero-copy {
    font-size: 14px;
  }

  .hero-action {
    min-width: 142px;
    min-height: 44px;
    font-size: 16px;
  }

  .third-dev-section {
    padding-inline: 16px;
  }
}