/* AI Visibility Checklist page: interactive 5C assessment, scoring, results and
   lead-gate UI. Layered on top of styles.css/modern.css; reuses their tokens
   (--accent, --navy, card/btn/form classes) rather than redefining them. */

.avc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 32px; }
@media (max-width: 760px) { .avc-stats { grid-template-columns: 1fr; } }
.avc-stat-card { background: #fff; border: 1px solid #ececec; border-radius: 14px; padding: 24px 22px; color: var(--ink); }
.avc-stat-num { font-size: 2.4rem; font-weight: 700; color: var(--accent); line-height: 1.1; }
.avc-stat-card p { margin: 8px 0 0; color: #555; font-size: 0.95rem; line-height: 1.5; }

.avc-category { border: 1px solid #ececec; border-radius: 14px; padding: 24px 26px; margin-bottom: 18px; background: #fff; color: var(--ink); }
.avc-category-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.avc-category-code { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem; flex: none; }
.avc-category h3 { margin: 0; color: var(--ink); }
.avc-category-sub { margin: 2px 0 16px; color: #5c5c5c; font-size: 0.92rem; }
.avc-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.avc-item { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.avc-item label { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); margin-bottom: 0; font-weight: 400; cursor: pointer; }
.avc-item input[type="checkbox"] { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: var(--accent); }
.avc-item span { line-height: 1.4; }

.avc-progress-wrap { position: sticky; top: 0; z-index: 5; background: #fff; padding: 14px 0; margin-bottom: 20px; border-bottom: 1px solid #ececec; color: var(--ink); }
.avc-progress-label { display: flex; justify-content: space-between; font-size: 0.85rem; color: #555; margin-bottom: 6px; }
.avc-progress-bar { height: 8px; border-radius: 999px; background: #eee; overflow: hidden; }
.avc-progress-fill { height: 100%; background: var(--accent); width: 0%; transition: width 0.25s ease; }

.avc-results { display: none; border: 1px solid #ececec; border-radius: 16px; padding: 32px; background: #fff; margin-top: 8px; color: var(--ink); }
.avc-results.is-visible { display: block; }
.avc-score { font-size: 2.6rem; font-weight: 700; color: var(--navy); }
.avc-score span { color: var(--accent); }
.avc-gap-group { margin-top: 18px; }
.avc-gap-group h4 { margin: 0 0 8px; font-size: 0.95rem; color: var(--ink); }
.avc-gap-group ul { margin: 0; padding-left: 20px; color: #555; font-size: 0.92rem; }
.avc-gap-group ul li { margin-bottom: 4px; }
.avc-all-clear { color: #1a7a3a; font-weight: 600; }

.avc-option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; margin-top: 24px; }
@media (max-width: 860px) { .avc-option-grid { grid-template-columns: 1fr; } }
.avc-option { border: 1px solid #ececec; border-radius: 16px; padding: 28px; background: #fff; display: flex; flex-direction: column; color: var(--ink); }
.avc-option h3 { margin-top: 0; color: var(--ink); }
.avc-option-fill { flex: 1; }
.avc-scope-grid { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 0.92rem; color: #444; }
.avc-scope-grid li strong { color: var(--navy); }

.avc-form-note { font-size: 0.85rem; color: #5c5c5c; margin-top: 10px; }
.avc-implement-check { display: flex; align-items: flex-start; gap: 10px; background: #fbeced; border: 1px solid #f3c9cc; border-radius: 10px; padding: 14px 16px; margin: 16px 0; }
.avc-implement-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); }
.avc-implement-check label { flex: 1; min-width: 0; color: var(--ink); font-weight: 400; margin-bottom: 0; }

.avc-lead-gate { display: none; }
.avc-lead-gate.is-visible { display: block; }

.avc-success { display: none; text-align: center; padding: 40px 20px; }
.avc-success.is-visible { display: block; }