body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 1.5rem;
}

.landing {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 32rem;
}

.landing-intro {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-dim);
}

.landing-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
}

.landing-card:hover {
  border-color: var(--axis);
  background: var(--panel-2);
}

.landing-icon {
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 6px;
}

.landing-card h2 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
}

.landing-card p {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-dim);
}

/* The one page where whose site this is belongs in the page rather than
   behind the menu: it is the front door, and the tools are not. Same margin
   the intro carries, on top of the same flex gap, so the cards are bookended
   by equal space rather than sinking towards the bottom one. */
.landing-by {
  margin: 0.5rem 0 0;
  font-size: 0.8rem;
  text-align: right;
  color: var(--text-dim);
}