/* Keep the landing page readable on narrow tablet and phone viewports. */
.shell,
.hero,
.choice-grid,
.role-card,
.topline > div,
.card-head > * {
  min-width: 0;
}

.shell {
  overflow-x: clip;
}

.hero h1,
.hero .lead,
header p,
.role-card strong,
.role-card small {
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .shell {
    padding: 20px 16px 40px;
  }

  header {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
  }

  header p {
    margin: 0;
  }

  .hero {
    margin: 6vh auto;
  }

  .hero h1 {
    font-size: clamp(34px, 12vw, 52px);
    letter-spacing: -0.07em;
    line-height: 1.2;
  }

  .lead {
    font-size: 16px;
  }

  .choice-grid {
    grid-template-columns: 1fr;
    margin-top: 28px;
  }

  .role-card {
    padding: 24px 20px;
  }
}