/* ═══════════════════════════════════════════════════════════════════
   Results page — a preview study: executive summary, ticks, tiers.
   Order: hero band → executive summary → ticks → tiers → custom study
   → FAQ. No timers, nothing that fights the reader; the only figure is
   the executive summary margin.
   Every colour comes from variables.css so the page follows the theme.
   ═══════════════════════════════════════════════════════════════════ */

.results { max-width: 1000px; margin: 0 auto; padding-bottom: var(--space-8); }
.results-block-title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; color: var(--text-tertiary); font-weight: 700; margin: 0 0 var(--space-3); }

/* ── Hero band ─────────────────────────────────────────────────────── */
.results-hero {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
    padding: var(--space-6); margin-bottom: var(--space-5);
    border-radius: var(--radius-2xl);
    background: linear-gradient(135deg, var(--color-primary-700), var(--color-primary-500));
    color: #fff; box-shadow: var(--shadow-lg);
}
.results-hero-copy { flex: 1 1 420px; min-width: 0; }
.results-hero .badge { background: rgba(255,255,255,.16); color: #fff; margin-bottom: var(--space-2); }
.results-hero-title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); line-height: 1.2; color: #fff; }
.results-hero-meta { margin: 0; color: rgba(255,255,255,.82); font-size: var(--text-sm); }
.results-hero .btn { white-space: nowrap; }

/* ── Brief chips ───────────────────────────────────────────────────── */
.brief-chips { margin-bottom: var(--space-5); }
.brief-chip-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.brief-chip {
    display: inline-flex; align-items: baseline; gap: 6px; max-width: 100%;
    padding: 6px 12px; border-radius: 999px;
    border: 1px solid var(--border-primary); background: var(--surface-secondary);
    color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.3;
}
.brief-chip strong { color: var(--text-primary); font-weight: 600; overflow-wrap: anywhere; }
.brief-chips-foot { margin: var(--space-2) 0 0; color: var(--text-tertiary); font-size: var(--text-xs); }

/* ── Verdict card (locked) ─────────────────────────────────────────── */
.verdict-card {
    position: relative; padding: var(--space-6); margin-bottom: var(--space-6);
    border: 1px solid var(--border-primary); border-radius: var(--radius-2xl);
    background: var(--surface-primary); box-shadow: var(--shadow-md);
}
.verdict-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.verdict-card-head h2 { margin: 0; font-size: var(--text-xl); color: var(--text-primary); }
.verdict-lock { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--color-warning-100); color: var(--color-warning-700); font-size: var(--text-xs); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.verdict-headline { margin: 0 0 var(--space-4); font-size: var(--text-2xl); font-weight: 800; letter-spacing: .02em; color: var(--text-primary); overflow: hidden; }
.verdict-blur { display: inline-block; filter: blur(6px); -webkit-user-select: none; user-select: none; pointer-events: none; opacity: .75; }

.kpi-locked-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi-locked {
    display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center;
    padding: var(--space-4) var(--space-3); border-radius: var(--radius-xl);
    border: 1px dashed var(--border-secondary); background: var(--surface-secondary);
}
.kpi-locked-label { font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 700; }
.kpi-locked-value { font-size: 1.5rem; font-weight: 800; letter-spacing: .14em; color: var(--text-tertiary); font-variant-numeric: tabular-nums; -webkit-user-select: none; user-select: none; }
.kpi-locked-value .lock { font-size: .9rem; letter-spacing: 0; margin-right: 4px; }

.proof-strip {
    display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    border-radius: var(--radius-lg); border: 1px solid var(--color-success-200);
    background: var(--color-success-50); color: var(--text-secondary); font-size: var(--text-sm);
}
[data-theme="dark"] .proof-strip { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.35); }
.proof-strip strong { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.proof-item { display: inline-flex; gap: 6px; align-items: baseline; }

.verdict-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.verdict-note { margin: 0; color: var(--text-tertiary); font-size: var(--text-sm); }

/* ── Section cards ─────────────────────────────────────────────────── */
.results-sections { margin-bottom: var(--space-6); }
.section-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.section-card {
    position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0;
    padding: var(--space-4); border-radius: var(--radius-xl);
    border: 1px solid var(--border-primary); background: var(--surface-primary);
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.section-card-wide { grid-column: 1 / -1; }
.section-card-locked { cursor: pointer; }
.section-card-locked:hover, .section-card-locked:focus-visible { border-color: var(--border-focus); transform: translateY(-1px); box-shadow: var(--shadow-md); outline: none; }
.section-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-2); }
.section-card-title { margin: 0; font-size: var(--text-base); font-weight: 700; color: var(--text-primary); line-height: 1.3; }
.section-card-lock { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-primary); color: var(--text-tertiary); font-size: var(--text-xs); font-weight: 600; white-space: nowrap; }
.section-card-lock.tier-complete { background: var(--color-accent-50); border-color: var(--color-accent-200); color: var(--color-accent-700); }
.section-card-lock.tier-full { background: var(--color-gold-100); border-color: var(--color-gold-500); color: var(--color-gold-700); }
.section-card-lock.tier-open { background: var(--color-success-100); border-color: var(--color-success-300); color: var(--color-success-700); }
[data-theme="dark"] .section-card-lock.tier-complete { background: rgba(37,99,235,.14); }
[data-theme="dark"] .section-card-lock.tier-open { background: rgba(16,185,129,.14); }
.section-card-teaser { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.section-card-meta { margin: auto 0 0; color: var(--text-tertiary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.section-card-names { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.section-card-names li { padding: 3px 10px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-primary); color: var(--text-primary); font-size: var(--text-xs); font-weight: 600; }
.section-card-open .section-card-body { margin-top: var(--space-2); max-height: 520px; overflow: auto; padding-right: var(--space-2); }
.section-card-open .section-card-body h3 { font-size: var(--text-base); margin: var(--space-3) 0 var(--space-1); }
.section-card-open .section-card-body h4 { font-size: var(--text-sm); margin: var(--space-2) 0 var(--space-1); }
.section-card-open .section-card-body p, .section-card-open .section-card-body li { font-size: var(--text-sm); }
.results-sections-foot { margin: var(--space-4) 0 0; color: var(--text-tertiary); font-size: var(--text-sm); text-align: center; }

/* ── Deliverables / trust / FAQ ───────────────────────────────────── */
.results-trust {
    padding: var(--space-5); margin-bottom: var(--space-5);
    border-radius: var(--radius-2xl); border: 1px solid var(--border-primary); background: var(--surface-secondary);
}
.results-trust h2 { margin: 0 0 var(--space-3); font-size: var(--text-lg); color: var(--text-primary); }
.results-deliverables { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--space-2); }
.results-deliverables li { display: flex; gap: 8px; align-items: flex-start; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.4; }
.results-deliverables li::before { content: "✓"; color: var(--color-success-600); font-weight: 800; flex: none; }
.results-trust-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); padding: 0; list-style: none; color: var(--text-tertiary); font-size: var(--text-sm); }
.results-trust-row a { color: var(--text-link); font-weight: 600; text-decoration: underline; }
.results-trust .verdict-cta { padding-top: var(--space-2); }

.results-faq { margin-bottom: var(--space-6); }
.results-faq details { border: 1px solid var(--border-primary); border-radius: var(--radius-lg); background: var(--surface-primary); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-2); }
.results-faq summary { cursor: pointer; font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.results-faq details p { margin: var(--space-2) 0 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.5; }

@media (max-width: 768px) {
    .results-hero { padding: var(--space-5); }
    .results-hero .btn { width: 100%; justify-content: center; }
    .results-hero-title { font-size: var(--text-xl); }
    .verdict-card { padding: var(--space-4); }
    .verdict-headline { font-size: var(--text-xl); }
    .kpi-locked-row { grid-template-columns: 1fr; }
    .verdict-cta .btn { width: 100%; justify-content: center; }
    .section-card-grid { grid-template-columns: 1fr; }
}

/* ── Generation page: gated stage cards + completion banner ──────── */
.gen-gated-card { display: flex; flex-direction: column; gap: 6px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); border: 1px solid var(--color-success-200); background: var(--color-success-50); }
[data-theme="dark"] .gen-gated-card { background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.35); }
.gen-gated-head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-primary); font-size: var(--text-sm); }
.gen-gated-head .tick { color: var(--color-success-600); }
.gen-gated-meta { color: var(--text-tertiary); font-weight: 500; }
.gen-gated-teaser { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.45; }
.preview-complete-banner .gen-complete-btns { margin-top: var(--space-4); }
.preview-complete-banner .gen-complete-sub { color: var(--text-secondary); max-width: 52ch; margin: 0 auto; }

/* ── Executive summary (preview results) ──────────────────────────── */
.exec-summary {
    padding: var(--space-6); margin-bottom: var(--space-6);
    border: 1px solid var(--border-primary); border-radius: var(--radius-2xl);
    background: var(--surface-primary); box-shadow: var(--shadow-md);
    border-top: 4px solid var(--color-primary-400);
}
.exec-summary-strong { border-top-color: var(--color-success-500); }
.exec-summary-moderate { border-top-color: var(--color-warning-500); }
.exec-summary-risk { border-top-color: var(--color-error-500); }
.exec-summary-kicker { margin: 0 0 var(--space-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; color: var(--text-tertiary); }
.exec-summary-headline { margin: 0 0 var(--space-3); font-size: var(--text-2xl); line-height: 1.2; color: var(--text-primary); }
.exec-summary-figure { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-3); margin: 0 0 var(--space-3); }
.exec-summary-pct { font-size: 3rem; line-height: 1; font-weight: 800; color: var(--color-success-600); font-variant-numeric: tabular-nums; }
.exec-summary-moderate .exec-summary-pct { color: var(--color-warning-600); }
.exec-summary-pct-label { color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; }
.exec-summary-body { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6; max-width: 70ch; }
.exec-summary-body strong { color: var(--text-primary); }
.exec-summary-facts { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.exec-summary-facts li { padding: 6px 12px; border-radius: 999px; background: var(--surface-secondary); border: 1px solid var(--border-primary); color: var(--text-primary); font-size: var(--text-sm); }
.exec-summary-facts li::before { content: '✓ '; color: var(--color-success-600); font-weight: 700; }
.exec-summary-cta { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.exec-summary-note { color: var(--text-tertiary); font-size: var(--text-sm); }

/* ── What was built: ticks ────────────────────────────────────────── */
.plan-tick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-4); }
.plan-tick { display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: baseline; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-primary); min-width: 0; }
.plan-tick-mark { grid-row: span 2; color: var(--color-success-600); font-weight: 800; }
.plan-tick-pending .plan-tick-mark { color: var(--color-gold-700); }
.plan-tick-title { font-weight: 600; color: var(--text-primary); font-size: var(--text-sm); }
.plan-tick-meta { color: var(--text-tertiary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; }

/* ── Tier comparison ──────────────────────────────────────────────── */
.plan-tiers { margin-bottom: var(--space-6); scroll-margin-top: var(--space-6); }
.plan-tiers-lead { margin: 0 0 var(--space-4); color: var(--text-secondary); font-size: var(--text-sm); }
.plan-tier-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); align-items: stretch; }
.plan-tier { position: relative; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-xl); border: 1px solid var(--border-primary); background: var(--surface-primary); min-width: 0; }
.plan-tier-best { border: 2px solid var(--color-gold-500); box-shadow: var(--shadow-lg); }
.plan-tier-flag { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: var(--color-gold-100); color: var(--color-gold-700); font-size: var(--text-xs); font-weight: 700; }
.plan-tier-name { margin: 0; font-size: var(--text-lg); color: var(--text-primary); }
.plan-tier-blurb { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); }
.plan-tier-price { margin: var(--space-1) 0; font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary); }
.plan-tier-price span { font-size: var(--text-sm); font-weight: 500; color: var(--text-tertiary); }
.plan-tier-gets { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.plan-tier-gets li { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.4; padding-left: 1.2em; text-indent: -1.2em; }
.plan-tier-gets li::before { content: '✓ '; color: var(--color-success-600); font-weight: 700; }
.plan-tiers-foot { margin: var(--space-3) 0 0; color: var(--text-tertiary); font-size: var(--text-sm); text-align: center; }
.plan-custom { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; padding: var(--space-5); margin-bottom: var(--space-6); border-radius: var(--radius-xl); border: 1px dashed var(--border-secondary); background: var(--surface-secondary); }
.plan-custom h2 { margin: 0 0 var(--space-1); font-size: var(--text-lg); color: var(--text-primary); }
.plan-custom p { margin: 0; color: var(--text-secondary); font-size: var(--text-sm); max-width: 60ch; }

@media (max-width: 768px) {
    .exec-summary { padding: var(--space-4); }
    .exec-summary-headline { font-size: var(--text-xl); }
    .exec-summary-pct { font-size: 2.25rem; }
    .exec-summary-cta .btn { width: 100%; justify-content: center; }
    .plan-tick-list { grid-template-columns: 1fr; }
    .plan-tier-grid { grid-template-columns: 1fr; }
    .plan-tier-best { order: -1; }
    .plan-custom .btn { width: 100%; justify-content: center; }
}

/* "Open this study on any device" — a sign-in link the customer can keep. */
.study-link-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-4) 0 var(--space-6); padding: var(--space-3) var(--space-4); border: 1px dashed var(--border-primary); border-radius: var(--radius-lg); background: var(--surface-secondary); }
.study-link-row-compact { margin: var(--space-3) 0 var(--space-4); }
.study-link-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 320px; }
.study-link-copy strong { color: var(--text-primary); font-size: var(--text-sm); }
.study-link-copy span { color: var(--text-secondary); font-size: var(--text-xs); line-height: 1.4; }
.study-link-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.gen-complete-banner .study-link-row { text-align: left; margin: var(--space-4) auto 0; max-width: 640px; }
@media (max-width: 640px) { .study-link-actions { width: 100%; } .study-link-actions .btn { flex: 1 1 auto; justify-content: center; } }

.exec-summary-conditions { margin: 14px 0; padding: 12px 14px; border-radius: 10px; border: 1px dashed var(--border, #cbd5e1); }
.exec-summary-conditions-title { font-weight: 700; margin: 0 0 6px; }
.exec-summary-conditions p { margin: 4px 0; }
.exec-summary-conditions-locked { font-size: 0.85rem; color: var(--text-secondary, #64748b); }