/* for-clinics.css — page-specific styles for /productexplain/for-clinics.php only.
   Standalone file (loaded via $extra_css), never edited into /css/style.css or any
   shared stylesheet. Consumes design tokens (--f-display, --text-*, --bg-card,
   --glass-border, --r-*, --success) already defined globally by /css/style.css. */

/* ── hero spacing tightened for this page (overrides shared .hero's
   min-height:80vh + padding via load-order/equal-specificity — does not
   edit /css/style.css itself). This page's hero copy is shorter than the
   sitewide default, so the 80vh min-height was vertically centering it
   inside a much taller box, reading as a big gap above and below. ── */
.hero { min-height: auto; padding: var(--s-12) 0 var(--s-8); }
.pat-hero { padding: 1.5rem 0 1rem; }

/* ── section framing ─────────────────────────────────────────────────────── */
.fc-reality { max-width: 820px; margin: 0 auto; padding: 0.5rem 0 0.5rem; }
.fc-reality .section-head { margin-bottom: 1.75rem; }
.fc-reality-list { display: flex; flex-direction: column; gap: 1rem; }
.fc-reality-item {
  display: flex; gap: 1rem; align-items: flex-start; background: var(--bg-card);
  border: 1px solid var(--glass-border); border-radius: var(--r-lg); padding: 1.1rem 1.4rem;
}
.fc-reality-num {
  font-family: var(--f-display); font-weight: 700; font-size: 1.1rem; color: #2563eb;
  background: rgba(37,99,235,0.1); width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.fc-reality-pain { font-size: 0.92rem; color: var(--text-2); line-height: 1.6; margin: 0 0 0.4rem; }
.fc-reality-pain b { color: var(--text-1); font-weight: 700; }
.fc-reality-fix { font-size: 0.92rem; color: var(--text-2); line-height: 1.6; margin: 0; }
.fc-reality-fix b { color: var(--text-1); font-weight: 600; }
.fc-reality-fix .ps-arrow { color: #2563eb; margin-right: 4px; font-weight: 700; }
.fc-reality-close { text-align: center; max-width: 700px; margin: 1.5rem auto 0; font-size: 0.9rem; color: var(--text-4); line-height: 1.6; }

.fc-sec-intro { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.fc-sec-intro p { font-size: 0.95rem; color: var(--text-3); line-height: 1.6; }

/* ── pain -> solve cards ──────────────────────────────────────────────────── */
.ps-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.ps-grid.ps-grid-3 { grid-template-columns: repeat(3, 1fr); }
.ps-card {
  background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: 0.7rem;
}
.ps-icon {
  width: 38px; height: 38px; border-radius: var(--r-md); background: rgba(37,99,235,0.1);
  color: #2563eb; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ps-pain { font-size: 0.88rem; color: var(--text-4); line-height: 1.55; }
.ps-pain b { color: var(--text-3); font-weight: 600; }
.ps-solve { font-size: 0.93rem; color: var(--text-1); line-height: 1.6; font-weight: 500; }
.ps-solve .ps-arrow { color: #2563eb; margin-right: 4px; }
.ps-stat {
  font-family: var(--f-mono); font-size: 0.72rem; color: #2563eb; background: rgba(37,99,235,0.07);
  border-radius: var(--r-full); padding: 3px 10px; display: inline-block; margin-top: 2px;
}

/* ── flagged/guardrail note (points 15, 19, 27) ─────────────────────────── */
.fc-guardrail {
  font-size: 0.82rem; color: var(--text-4); border-left: 2px solid rgba(148,163,184,0.4);
  padding-left: 0.8rem; margin-top: 0.4rem; line-height: 1.55;
}

/* ── ICU/ED large callout (point 10) ─────────────────────────────────────── */
.fc-flagship {
  background: linear-gradient(135deg, rgba(37,99,235,0.08), rgba(37,99,235,0.02));
  border: 1px solid rgba(37,99,235,0.25); border-radius: var(--r-lg);
  padding: 2rem 2.2rem; margin: 1.75rem 0; display: flex; gap: 1.5rem; align-items: flex-start;
}
.fc-flagship .ps-icon { width: 48px; height: 48px; background: rgba(37,99,235,0.15); }
.fc-flagship h3 { font-family: var(--f-display); font-size: 1.2rem; font-weight: 700; color: var(--text-1); margin: 0 0 0.5rem; }
.fc-flagship p { font-size: 0.93rem; color: var(--text-2); line-height: 1.65; margin: 0 0 0.5rem; }
.fc-flagship .ps-stat { margin-top: 0.5rem; }

/* ── headline per-patient price callout ──────────────────────────────────── */
.fc-price-callout {
  display: flex; align-items: center; gap: 1.3rem; background: linear-gradient(135deg, rgba(37,99,235,0.1), rgba(37,99,235,0.02));
  border: 1px solid rgba(37,99,235,0.25); border-radius: var(--r-lg); padding: 1.4rem 1.7rem; margin: 0 0 1.75rem;
}
.fc-price-amount {
  font-family: var(--f-display); font-weight: 700; font-size: 2.4rem; color: #2563eb; line-height: 1; flex-shrink: 0; white-space: nowrap;
}
.fc-price-amount span { font-size: 0.85rem; font-weight: 600; color: var(--text-4); margin-left: 4px; }
.fc-price-detail { font-size: 0.92rem; color: var(--text-2); line-height: 1.55; }
.fc-price-detail strong { color: var(--text-1); font-weight: 700; }
@media (max-width: 600px) {
  .fc-price-callout { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
}

/* ── commercial model comparison table ───────────────────────────────────── */
.fc-compare-wrap { overflow-x: auto; margin: 1.5rem 0; }
.fc-compare { width: 100%; border-collapse: collapse; min-width: 480px; }
.fc-compare th, .fc-compare td { padding: 0.75rem 1rem; text-align: left; font-size: 0.88rem; border-bottom: 1px solid var(--glass-border); }
.fc-compare th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4); font-weight: 700; }
.fc-compare td:first-child { color: var(--text-3); }
.fc-compare .fc-col-them { color: var(--text-4); }
.fc-compare .fc-col-us { color: var(--text-1); font-weight: 600; }
.fc-compare .fc-col-us::before { content: '✓ '; color: #2563eb; }

/* ── closer line (point 26) ──────────────────────────────────────────────── */
.fc-closer { text-align: center; max-width: 640px; margin: 2rem auto 0; font-size: 0.95rem; color: var(--text-3); }
.fc-closer a { color: #2563eb; font-weight: 600; text-decoration: none; }

/* ── demoted "also included, free" workspace section (point 28) ─────────── */
.fc-workspace {
  background: var(--bg-elevated); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 1.75rem 2rem;
}
.fc-workspace-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem; }
.fc-workspace-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--text-2); margin: 0; }
.fc-workspace-tag {
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-4);
  background: rgba(148,163,184,0.12); border-radius: var(--r-full); padding: 3px 10px;
}
.fc-workspace-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.fc-workspace-item { display: flex; align-items: center; gap: 8px; font-size: 0.83rem; color: var(--text-3); }
.fc-workspace-item .ps-icon { width: 26px; height: 26px; background: rgba(148,163,184,0.12); color: var(--text-4); }

/* ── lead form (adapted from social/adgate pattern, single-step) ─────────── */
.fc-lead-card {
  background: var(--bg-card); border: 1px solid var(--glass-border); border-radius: var(--r-lg);
  padding: 2rem;
}
.fc-lead-card h3 { font-family: var(--f-display); font-size: 1.4rem; font-weight: 600; color: var(--text-1); margin-bottom: 0.4rem; }
.fc-lead-card > p.fc-lead-sub { font-size: 0.9rem; color: var(--text-3); margin-bottom: 1.4rem; }

.fc-wa-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  background: #22c55e; color: #fff; font-weight: 700; font-size: 0.95rem; padding: 0.9rem 1.2rem;
  border-radius: var(--r-md); text-decoration: none; margin-bottom: 0.6rem; transition: filter 0.15s;
}
.fc-wa-btn:hover { filter: brightness(1.08); }
.fc-or { text-align: center; font-size: 0.78rem; color: var(--text-4); text-transform: uppercase; letter-spacing: 0.05em; margin: 1rem 0; }

.fc-form label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--text-3); margin-bottom: 4px; }
.fc-form .fc-field { margin-bottom: 0.9rem; }
.fc-form input {
  width: 100%; background: var(--bg-elevated); border: 1px solid var(--glass-border); border-radius: var(--r-md);
  padding: 0.7rem 0.9rem; font-size: 0.95rem; color: var(--text-1); font-family: var(--f-body);
}
.fc-form input:focus { outline: none; border-color: #2563eb; }
.fc-form input[aria-invalid="true"] { border-color: #ef4444; }
.fc-form-msg { font-size: 0.82rem; color: #ef4444; min-height: 1.1em; margin: 0.4rem 0 0; }
.fc-form-consent { font-size: 0.76rem; color: var(--text-4); line-height: 1.5; margin-top: 0.6rem; }
.fc-form-consent a { color: #2563eb; }
.fc-lead-card .btn-primary { width: 100%; justify-content: center; margin-top: 0.4rem; }

.fc-done { text-align: center; padding: 1rem 0; }
.fc-done-tick {
  width: 48px; height: 48px; border-radius: 50%; background: rgba(34,197,94,0.15); color: #22c55e;
  display: flex; align-items: center; justify-content: center; font-size: 1.5rem; margin: 0 auto 0.8rem;
}
.fc-done h3 { font-size: 1.1rem; font-weight: 700; color: var(--text-1); margin-bottom: 0.4rem; }
.fc-done p { font-size: 0.9rem; color: var(--text-3); }

/* ── animated stat counter (borrowed effect, not present in main.js) ─────── */
.fc-counter { display: inline-block; }

/* ── sticky mobile CTA bar (borrowed effect, not present in main.js) ─────── */
.fc-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none;
  background: var(--bg-card); border-top: 1px solid var(--glass-border);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
  box-shadow: 0 -8px 24px rgba(0,0,0,0.15);
}
.fc-sticky-cta.fc-visible { display: flex; gap: 0.6rem; }
.fc-sticky-cta a { flex: 1; text-align: center; padding: 0.7rem 0.5rem; border-radius: var(--r-md); font-size: 0.85rem; font-weight: 700; text-decoration: none; }
.fc-sticky-cta .fc-sticky-wa { background: #22c55e; color: #fff; }
.fc-sticky-cta .fc-sticky-form { background: rgba(37,99,235,0.1); color: #2563eb; border: 1px solid rgba(37,99,235,0.3); }

@media (max-width: 768px) {
  .ps-grid, .ps-grid.ps-grid-3 { grid-template-columns: 1fr; }
  .fc-flagship { flex-direction: column; }
  .fc-workspace-grid { grid-template-columns: 1fr 1fr; }
  .fc-workspace-head { flex-direction: column; align-items: flex-start; }
}