/* ============================================================
   FEATURE-CARDS.CSS
   The homepage "Explore the Platform" grid - direct, whole-card-
   clickable entry points into the major tools, so a user never
   has to scroll through the full homepage to reach them. New
   section, doesn't touch any existing homepage content.
   ============================================================ */
.feature-grid-section {
  padding: 36px 0 8px;
}
.feature-grid-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 16px;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.feature-card {
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 4px;
  padding: 22px 22px 20px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.feature-card:hover {
  border-color: var(--gold);
  background: var(--surface-raised);
}
.feature-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--ink);
  margin-bottom: 8px;
}
.feature-card-desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-dim);
  margin-bottom: 18px;
}
.feature-card-arrow {
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.feature-card-arrow-glyph {
  display: inline-block;
  transition: transform 0.15s ease;
}
.feature-card:hover .feature-card-arrow-glyph {
  transform: translateX(4px);
}

@media (max-width: 640px) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 420px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}