/* ai-campaign.css — components for the AI-Informed Precision Medicine campaign pages.
   Uses existing Pravida tokens from style.css. */

.lede { font-size: var(--text-lg); line-height: 1.55; color: var(--color-text); max-width: 46ch; }
.hero-content .lede { color: var(--color-text-inverse); margin-inline: auto; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-8); }
.hero-ctas .btn--secondary { background: rgba(236,229,224,0.12); color: var(--color-text-inverse); border-color: rgba(236,229,224,0.6); }
.hero-ctas .btn--secondary:hover { background: rgba(236,229,224,0.22); }

.question-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); margin-top: var(--space-8); }
@media (max-width: 768px) { .question-grid { grid-template-columns: 1fr; } }
.question-card { background: var(--color-surface-2); border: 1px solid var(--color-divider); border-left: 3px solid var(--color-accent); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); }
.question-card .q { font-family: var(--font-display); font-size: var(--text-lg); line-height: 1.35; color: var(--color-primary); }
.question-card .a { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-2); line-height: 1.6; }
.question-card .a a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; }

.price { font-family: var(--font-display); font-size: var(--text-2xl); color: var(--color-primary); line-height: 1; margin-bottom: var(--space-1); }
.price-note { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.04em; margin-bottom: var(--space-6); }
.membership-card--featured.featured-consult::before { content: 'Most Complete'; }
.membership-card--featured.featured-virtual::before { content: 'GA & FL'; }
.membership-card--featured::before { white-space: nowrap; }

.credit-callout { margin-top: var(--space-8); background: var(--color-deepsea); color: var(--color-text-inverse); border-radius: var(--radius-xl); padding: var(--space-8); display: grid; grid-template-columns: auto 1fr; gap: var(--space-6); align-items: center; }
.credit-callout h3 { color: var(--color-text-inverse); font-size: var(--text-xl); }
.credit-callout p { color: rgba(236,229,224,0.85); font-size: var(--text-sm); line-height: 1.65; margin-top: var(--space-2); }
.credit-callout .credit-badge { font-family: var(--font-display); font-size: var(--text-3xl); color: var(--color-suede); line-height: 1; }
@media (max-width: 640px) { .credit-callout { grid-template-columns: 1fr; } }

.check-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.check-list li { position: relative; padding-left: var(--space-8); line-height: 1.6; }
.check-list li::before { content: ''; position: absolute; left: 0; top: 0.35em; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--color-accent); background: radial-gradient(circle, var(--color-accent) 35%, transparent 38%); }
.x-list li::before { background: none; border-color: var(--color-text-faint); }
.x-list li::after { content: ''; position: absolute; left: 4px; top: calc(0.35em + 8px); width: 10px; height: 1.5px; background: var(--color-text-faint); }

.notice { border: 1px solid var(--color-divider); background: var(--color-surface-2); border-radius: var(--radius-lg); padding: var(--space-5) var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }
.notice strong { color: var(--color-text); }
.notice + .notice { margin-top: var(--space-4); }

.prompt-box { background: #1f2a29; color: #e9e4df; border-radius: var(--radius-lg); padding: var(--space-6); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.7; white-space: pre-wrap; overflow-x: auto; margin-top: var(--space-4); }
.copy-btn { margin-top: var(--space-3); }

.compare-table { width: 100%; border-collapse: collapse; margin-top: var(--space-6); font-size: var(--text-sm); }
.compare-table th, .compare-table td { text-align: left; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); vertical-align: top; line-height: 1.55; }
.compare-table thead th { font-family: var(--font-body); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-accent); font-weight: 700; }
.compare-table tbody th { font-weight: 700; color: var(--color-text); width: 30%; }
.table-wrap { overflow-x: auto; }

.tier-label { display: inline-block; font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 10px; border-radius: var(--radius-full); margin-bottom: var(--space-3); }
.tier-strong { background: rgba(3,53,51,0.1); color: var(--color-deepsea); }
.tier-emerging { background: rgba(168,143,114,0.18); color: #6d5a43; }
.tier-caution { background: rgba(107,104,103,0.14); color: var(--color-text-muted); }

.physician-block img { border-radius: var(--radius-xl); width: 100%; height: auto; box-shadow: var(--shadow-lg); }
.cred-list { list-style: none; margin-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.cred-list li { padding-left: var(--space-4); border-left: 2px solid var(--color-accent); line-height: 1.5; }

.cta-band { background: var(--color-deepsea); color: var(--color-text-inverse); text-align: center; }
.cta-band h2 { color: var(--color-text-inverse); }
.cta-band p { color: rgba(236,229,224,0.85); max-width: 60ch; margin: var(--space-4) auto 0; }
.cta-band .btn--secondary { color: var(--color-text-inverse); border-color: rgba(236,229,224,0.6); }
.cta-band .hero-ctas { margin-top: var(--space-6); }

.fine-print { font-size: var(--text-xs); color: var(--color-text-faint); line-height: 1.6; margin-top: var(--space-6); }
.related-links { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
.related-links a { font-size: var(--text-sm); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: var(--space-2) var(--space-4); color: var(--color-primary); }
.related-links a:hover { background: var(--color-surface-2); }
@media (max-width: 480px) { .hero-ctas .btn { width: 100%; white-space: normal; text-align: center; } }
/* Contact form: prevent long select options from widening the grid on mobile */
.contact-form, .contact-form .form-row, .contact-form .form-group { min-width: 0; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; }
.fade-in:has(> .contact-form) { min-width: 0; }