body {
  margin: 0;
  background: #FFFFFF;
}
* {
  box-sizing: border-box;
}
button, input, select {
  font-family: inherit;
}
a {
  color: #0D0D0D;
}
a:hover {
  color: #BD4531;
}
.desktop-nav {
  display: flex;
}
.mobile-nav {
  display: none;
}
.header-container {
  padding: 0 80px;
  height: 72px;
}
@media (max-width: 800px) {
  .desktop-nav {
    display: none !important;
  }
  .mobile-nav {
    display: flex !important;
  }
  .header-container {
    padding: 0 20px !important;
    height: 64px !important;
  }
  .hero-section {
    padding: 56px 20px 0 !important;
  }
  .hero-title {
    font-size: 40px !important;
    line-height: 1.12 !important;
    letter-spacing: -1px !important;
  }
  .hero-subtitle {
    font-size: 17px !important;
  }
  .hero-buttons {
    flex-direction: column;
    width: 100%;
  }
  .hero-buttons a {
    width: 100%;
  }
  .hero-image {
    height: auto !important;
    margin-top: 32px !important;
  }
  .logo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .logo-section {
    padding: 48px 20px !important;
  }
  .formats-section {
    padding: 64px 0 0 !important;
  }
  .formats-section h2 {
    font-size: 32px !important;
  }
  .formats-section p {
    padding: 0 20px;
  }
  .ad-types-nav {
    width: 100% !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    padding: 0 20px;
    scrollbar-width: none;
  }
  .ad-types-nav::-webkit-scrollbar {
    display: none;
  }
  .ad-types-nav button {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }
  .ad-showcase-grid {
    grid-template-columns: 1fr !important;
    padding: 32px 20px !important;
    gap: 32px !important;
  }
  .how-section {
    padding: 64px 20px !important;
  }
  .how-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .feature-section {
    padding: 64px 20px 0 !important;
    gap: 48px !important;
    display: flex !important;
    flex-direction: column-reverse !important;
  }
  .feature-section.img-first {
    flex-direction: column !important;
  }
  .feature-section > div {
    width: 100%;
  }
  .feature-section .feature-img {
    height: 300px !important;
  }
  .metrics-section {
    grid-template-columns: 1fr !important;
    padding: 64px 20px !important;
    gap: 32px !important;
  }
  .metrics-section > div {
    padding: 0 !important;
    border-left: none !important;
    border-bottom: 1px solid #ECECEC;
    padding-bottom: 24px !important;
  }
  .metrics-section > div:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .publisher-section {
    margin: 64px 20px !important;
    padding: 48px 20px !important;
    display: flex !important;
    flex-direction: column-reverse !important;
    gap: 40px !important;
  }
  .publisher-section .feature-img {
    height: 240px !important;
  }
  .contact-section {
    padding: 64px 20px !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }
  .footer-section {
    padding: 48px 20px 24px !important;
  }
}
.hero-buttons {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}
.hero-image {
  width: 100%;
  max-width: 55.5rem;
  height: auto;
  margin-top: 56px;
  border-radius: 24px;
}
.logo-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 24px;
}
.ad-type-btn {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}
.ad-type-btn[aria-selected="true"] {
  background: #0D0D0D;
  color: #FFFFFF;
  border: 1px solid #0D0D0D;
}
.ad-type-btn[aria-selected="false"] {
  background: #FFFFFF;
  color: #3C3C3C;
  border: 1px solid #D6D6D6;
}