/* Page-specific components for Views/Content/Service.cshtml — the shared template
   rendered for every /services/{slug} detail page. Shared chrome/tokens live in
   site-theme.css. */

.symptom-pill{display:inline-flex;align-items:center;background:var(--color-surface);border:1px solid rgba(var(--color-ink-rgb),0.09);border-radius:999px;padding:9px 18px;font-size:14.5px;color:#3a4234;font-weight:600}

.checklist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.checklist li{font-size:16px;line-height:1.5;display:flex;gap:12px;align-items:flex-start;color:var(--color-text-secondary)}
.checklist li i{color:var(--color-brand);font-size:14px;margin-top:4px;flex-shrink:0}

.related-link{display:inline-flex;align-items:center;gap:8px;background:var(--color-surface);border:1px solid rgba(var(--color-ink-rgb),0.09);border-radius:999px;padding:10px 20px;font-size:14.5px;font-weight:600;color:var(--color-ink);text-decoration:none}
.related-link:hover{border-color:rgba(77,124,42,0.4);color:var(--color-brand-dark)}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}

.testimonial-placeholder{background:transparent;border:1.5px dashed rgba(var(--color-ink-rgb),0.22)}
.testimonial-placeholder blockquote{font-style:italic;color:var(--color-text-quiet)}

/* "How it works" — each service's approach steps (ServiceContent.Approach), on a light background. */
.service-steps{display:flex;flex-direction:column;gap:24px;margin-top:28px}
.service-steps h3{font-size:21px;line-height:1.2;letter-spacing:-0.01em;margin:12px 0 6px}
.service-steps p{margin:0;font-size:16px;line-height:1.6;color:var(--color-text-secondary);max-width:62ch}

/* Optional explainer card under the hero (ServiceContent.NameNote) — e.g. PCOS → PMOS on the PMOS page. */
.service-note{max-width:62em;background:var(--color-surface);border:1px solid rgba(var(--color-ink-rgb),0.09);border-left:5px solid var(--color-brand);border-radius:20px;padding:clamp(18px,3vw,26px) clamp(18px,3vw,30px)}
.service-note-heading{display:flex;align-items:baseline;gap:10px;margin:0 0 10px;font-size:clamp(20px,2.4vw,24px);line-height:1.2;letter-spacing:-0.01em}
.service-note-heading i{color:var(--color-brand);font-size:0.8em}
.service-note p{margin:10px 0 0;font-size:16px;line-height:1.62;color:var(--color-text-secondary);max-width:70ch}
.service-note p.service-note-source{font-size:14px;color:var(--color-text-muted)}
.service-note-source a{color:var(--color-brand-dark)}