/*
 * Portable Alshival.Ai presentation primitives.
 * These classes are intentionally page-agnostic so future static pages can
 * share spacing, typography, action, grid, card, and chrome behavior.
 */
.content-frame {
  width: min(100%, var(--max));
  margin-inline: auto;
}

.eyebrow {
  font-family: var(--mono);
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.display-heading {
  margin: 0;
  text-wrap: balance;
}

.action-group {
  display: flex;
  align-items: center;
  gap: var(--action-gap, .8rem);
}

.feature-grid {
  display: grid;
  gap: var(--grid-gap, 1rem);
}

.feature-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--card-radius, 1.3rem);
}

.site-chrome {
  padding-inline: var(--gutter);
}

@media (max-width: 760px) {
  .action-group {
    align-items: stretch;
    flex-direction: column;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }
}