html { scroll-behavior: smooth; }
body { overflow-x: clip; }
.site-section { scroll-margin-top: 88px; }
.built-with { color: inherit; text-decoration: none; }
.built-with:hover { color: var(--color-bg); text-decoration: underline; }
.seg-opt { position: relative; }
.seg-opt input { width: 1px; height: 1px; }

@media (max-width: 780px) {
  .site-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px 14px !important;
    padding: 12px 18px !important;
  }

  .site-nav > :first-child {
    min-width: 0;
    margin-right: 0 !important;
    font-size: 17px !important;
    line-height: 1.05;
  }

  .site-nav > :nth-child(2) {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    gap: 13px !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }

  .site-nav > :nth-child(2)::-webkit-scrollbar { display: none; }

  .site-nav > :last-child {
    grid-column: 2;
    grid-row: 1;
    padding: 8px 11px !important;
    white-space: nowrap;
  }

  .site-host [style*="max-width: 1180px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .site-section { padding-top: 44px !important; padding-bottom: 44px !important; }

  .site-section[style*="display: grid"],
  .site-section > [style*="display: grid"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 28px !important;
  }

  #audience { gap: 1px !important; }
  #audience > div { padding: 24px 0 !important; }
  #audience > div + div { border-top: 1px solid var(--color-divider); }

  #hero .blueprint,
  #v1-hero .blueprint { margin: 6px; }

  .table {
    display: block;
    width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  .site-nav > :first-child { font-size: 15px !important; }
  .site-nav > :nth-child(2) { gap: 10px !important; font-size: 10px !important; }
  .site-nav > :last-child { font-size: 12px !important; }

  #hero > div:first-child > [style*="grid-template-columns"],
  #v1-hero > div:first-child > [style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 20px !important;
  }

  #hero h1,
  #v1-hero h1 { font-size: clamp(56px, 22vw, 92px) !important; }

  #protocol > div:last-child,
  #rules > div:last-child,
  #v1-rules > div:last-child { grid-template-columns: minmax(0, 1fr) !important; }

  #measure > div:nth-child(2) > div:nth-child(2) > div {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  #measure > div:nth-child(2) > div:nth-child(2) > div > :last-child {
    text-align: left !important;
  }
}