
/* v7.6.0 — About page redesign (cards + responsive grid) */
:root{ --muted:#64748b; --border: #e5e7eb; }
.about-page .lead{ color:#1f2937; font-size:1.05rem; }
.about-page .sub{ color:var(--muted); }

/* Cards */
.about-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px;
  box-shadow:0 6px 24px rgba(16,24,40,.04);
}
.about-card.accent{
  background:linear-gradient(180deg, color-mix(in srgb, var(--brand) 6%, white), white);
  border:1px solid color-mix(in srgb, var(--brand) 22%, white);
}
.about-card h2{ margin:0 0 10px; }
.about-card h3{ margin:0 0 8px; }

/* Chips */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid color-mix(in srgb, var(--brand) 18%, white);
  background:#fff;
  color:#0f172a;
  padding:4px 10px;
  border-radius:999px;
  font-size:.85rem;
}

/* Grid */
.grid{ display:grid; gap:16px; }
.grid.cols-3{ grid-template-columns:1fr; }
@media(min-width:740px){ .grid.cols-3{ grid-template-columns:repeat(2,1fr);} }
@media(min-width:1024px){ .grid.cols-3{ grid-template-columns:repeat(3,1fr);} }

/* Feature row */
.feature{ display:flex; gap:12px; align-items:flex-start; }
.feature .ico{
  width:40px; height:40px; border-radius:10px;
  display:grid; place-items:center;
  background: color-mix(in srgb, var(--brand) 12%, white);
  border:1px solid color-mix(in srgb, var(--brand) 24%, white);
  font-size:20px;
}

/* Doctor spotlight */
.doctor{
  display:grid; gap:14px; grid-template-columns:64px 1fr;
  align-items:center;
}
.doctor img{
  width:64px; height:64px; border-radius:12px; object-fit:cover; border:1px solid var(--border); background:#fff;
}
.doctor .role{ color:var(--muted); font-weight:600; }

/* CTA row */
.cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.cta{ 
  padding:12px 16px; border-radius:14px; font-weight:700; text-decoration:none;
  display:inline-flex; align-items:center; justify-content:center; min-height:48px;
  border:1.5px solid var(--brand); color:var(--brand); background:#fff;
}
.cta.primary{ background:var(--brand); color:#fff; }

/* Spacing */
.section{ margin:18px 0; }
.about-page h1{ margin:8px 0 12px; }
