/* Keep the public landing inside the viewport on phones and tablets. */
body .hero-art {
  overflow: clip;
}

body .phrase-relationships,
body .phrase-health,
body .phrase-boundaries {
  right: 8px;
}

body .phrase-children,
body .phrase-anxiety {
  left: 8px;
}

@media (max-width: 720px) {
  .site-header .nav-shell {
    flex-wrap: wrap;
    gap: 4px 8px;
    padding-inline: 10px;
  }

  .site-header .header-account-actions {
    flex: 1 1 100%;
    justify-content: flex-end;
    gap: 4px;
  }

  .site-header .header-cta {
    padding-inline: 8px;
    font-size: 12px;
  }

  body .phrase-money,
  body .phrase-children,
  body .phrase-anxiety,
  body .phrase-guilt {
    left: 8px;
  }

  body .phrase-relationships,
  body .phrase-health,
  body .phrase-boundaries,
  body .phrase-confidence {
    right: 8px;
  }

  body .phrase-confidence {
    bottom: 8px;
  }
}

@media (max-width: 380px) {
  body .fit-section {
    grid-template-columns: minmax(0, 1fr);
  }

  body .fit-section > * {
    min-width: 0;
  }

  body .fit-yes,
  body .fit-no {
    padding: 26px 22px;
  }

  body .fit-yes h2 {
    font-size: clamp(34px, 10.5vw, 40px);
  }

  body .fit-no h3 {
    font-size: clamp(28px, 9vw, 32px);
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .site-header .nav-shell {
    gap: 14px;
    padding-inline: 14px;
  }

  .site-header .nav-shell nav {
    gap: clamp(8px, 1vw, 12px);
  }

  .site-header .nav-shell nav a {
    font-size: 12px;
  }

  .site-header .header-account-actions {
    gap: 6px;
  }

  .site-header .header-login,
  .site-header .header-logout {
    padding-inline: 10px;
  }

  .site-header .header-cta {
    padding-inline: 8px;
  }
}