/* Responsive adjustments only. Existing content and desktop layout are preserved. */
html {
  -webkit-text-size-adjust: 100%;
}

.site-shell {
  width: 900px;
  max-width: 100%;
}

.main-content {
  width: 580px;
  max-width: 100%;
}

.site-header,
.site-nav,
.price-table,
iframe {
  max-width: 100%;
}

@media screen and (max-width: 700px) {
  table {
    max-width: 100%;
  }

  .site-shell,
  .main-content {
    width: 100% !important;
  }

  .site-header h2 {
    margin: 8px 6px;
    font-size: 18px;
    line-height: 1.45;
  }

  .site-nav {
    height: auto !important;
  }

  .site-nav tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .site-nav td {
    display: block;
    width: auto !important;
    min-width: 0;
    height: 40px;
    padding: 0 4px;
    line-height: 40px;
    background-size: auto 100%;
  }

  .site-nav a {
    display: block;
    white-space: nowrap;
  }

  .hero {
    background-size: 100% auto !important;
    background-position: left top !important;
  }

  .price-table {
    width: 100% !important;
    table-layout: fixed;
  }

  .price-table td {
    width: auto !important;
    word-break: break-word;
  }

  .main-content td[style*="padding:10px"] {
    padding: 8px !important;
  }

  iframe {
    width: 100% !important;
  }

  button {
    max-width: 100%;
  }
}

@media screen and (max-width: 380px) {
  .site-header h2 {
    font-size: 16px;
  }
}