/* Page: features (layout & tiny page-specific styles only) */

.features-main {
  max-width: var(--container);
  margin: 0 auto;
  padding: 32px 20px 80px;
}

/* Headings: base.css already sets h1/h2 sizes; keep small tweaks if you like */
.features-main h1 { margin: 10px 0 6px; }
.features-main h2 { margin: 24px 0 12px; }

/* Body text tone for this page */
.features-main p,
.features-main li { color: var(--muted); line-height: 1.65; }

/* Grid: components.css already provides .grid-3; the media query is here only if you want a different breakpoint */
@media (max-width: 1000px) {
  .grid-3 { grid-template-columns: 1fr; }
}

/* Cards: base card lives in components.css; only keep minimal overrides if needed */
.features-main .card { border-color: #eef2f7; border-radius: 16px; padding: 18px; }
.features-main .card h3 { margin: 0 0 6px; }

/* Badge: shared badge exists in components.css; keeping font-size if you like it smaller */
.features-main .badge { font-size: 12px; }

/* Notes / callouts */
.note {
  background: #f5fdfa;
  border: 1px solid #d5f0e2;
  color: #134e3a;
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0 18px;
}
.soon {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  padding: 10px 12px;
  border-radius: 8px;
}

/* Inline icons */
.ico {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #ecfdf5; margin-bottom: 10px;
  color: var(--green); /* drive stroke via currentColor */
}
.ico svg { width: 24px; height: 24px; stroke: currentColor; fill: none; }

/* Tiny utilities for spacing between actions */
.actions .nav-link { display: inline-block; }
.ml-1 { margin-left: .5rem; }
.mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; }