/* ════════════════════════════════════════════════════════════════════
 * CASE STUDY TEMPLATE - single-creator narrative
 * Reuses tokens.css + homepage.css + guide.css. Dark hero + light body.
 * ════════════════════════════════════════════════════════════════════ */

/* ── Dark hero ── */
.cs-hero{ position:relative; background:var(--bg-dark); color:var(--text-on-dark); padding-block:var(--space-12) var(--space-16); overflow:hidden; }
.cs-hero::before{ content:''; position:absolute; top:-30%; right:-12%; width:680px; height:560px; background:radial-gradient(circle, rgba(167,139,250,.20) 0%, transparent 62%); pointer-events:none; }
.cs-hero-inner{ position:relative; z-index:1; display:grid; grid-template-columns:1fr; gap:var(--space-10); align-items:center; }
@media (min-width:920px){ .cs-hero-inner{ grid-template-columns:1.5fr 1fr; gap:var(--space-16); } }
.cs-breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-low-dark); margin-bottom:var(--space-5); }
.cs-breadcrumb a{ color:var(--text-low-dark); text-decoration:none; }
.cs-breadcrumb a:hover{ color:var(--text-mid-dark); }
.cs-breadcrumb .sep{ color:var(--border-dark-strong); }
.cs-breadcrumb [aria-current]{ color:var(--text-mid-dark); }
.cs-hero .eyebrow{ color:var(--brand-glow); }
.cs-hero h1{ color:var(--text-on-dark); font-size:clamp(32px,4.6vw,48px); letter-spacing:var(--tracking-tight); line-height:1.1; margin-bottom:var(--space-4); text-wrap:balance; }
.cs-hero-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-2); font-size:var(--text-body-sm); color:var(--text-mid-dark); }
.cs-hero-meta .sep{ color:var(--border-dark-strong); }
.cs-aibadge{ display:inline-flex; align-items:center; font-family:var(--font-body); font-size:11px; font-weight:var(--weight-semibold); letter-spacing:.04em; color:#fff; background:linear-gradient(135deg, rgba(124,58,237,.92), rgba(167,139,250,.92)); border:1px solid rgba(124,58,237,.5); padding:4px 8px; border-radius:var(--radius-full); }

.cs-hero-stat{ background:var(--surface-dark-1); border:1px solid var(--border-dark); border-radius:var(--radius-xl); padding:var(--space-8); text-align:center; box-shadow:var(--shadow-xl); }
.cs-hero-stat .ba{ font-family:var(--font-mono); font-size:34px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); }
.cs-hero-stat .ba .from{ color:var(--text-low-dark); } .cs-hero-stat .ba .arrow{ color:var(--text-mid-dark); }
.cs-hero-stat .ba .to{ background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.cs-hero-stat .big{ font-family:var(--font-mono); font-size:48px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tighter); background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; margin-top:var(--space-3); line-height:1; }
.cs-hero-stat .big-k{ font-size:var(--text-body-sm); color:var(--text-mid-dark); margin-top:var(--space-2); }

/* ── At-a-glance strip ── */
.glance{ background:var(--bg-subtle); border-bottom:1px solid var(--border-subtle); padding-block:var(--space-10); }
.glance-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-6); max-width:920px; margin-inline:auto; text-align:center; }
@media (min-width:768px){ .glance-grid{ grid-template-columns:repeat(4,1fr); } }
.glance .v{ font-family:var(--font-mono); font-size:40px; font-weight:var(--weight-black); letter-spacing:var(--tracking-tighter); line-height:1; background:var(--brand-gradient); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; display:block; margin-bottom:var(--space-2); }
.glance .k{ font-size:var(--text-body-sm); color:var(--text-secondary); font-weight:var(--weight-medium); }

/* ── Prose body (reading width) ── */
.cs-body{ max-width:760px; margin-inline:auto; }
.cs-body h2{ font-size:clamp(26px,3.4vw,32px); letter-spacing:-0.015em; line-height:var(--leading-snug); margin:0 0 var(--space-5); }
.cs-body p{ font-size:18px; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--space-5); }
.cs-body p strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }
@media (max-width:560px){ .cs-body p{ font-size:16px; } }
.cs-pullquote{ border-left:3px solid var(--brand-purple); padding:var(--space-2) 0 var(--space-2) var(--space-6); margin:var(--space-8) 0; }
.cs-pullquote p{ font-family:var(--font-display); font-size:clamp(20px,2.6vw,26px); font-style:italic; font-weight:var(--weight-medium); line-height:var(--leading-snug); color:var(--text-primary); margin:0; }
.cs-pullquote cite{ display:block; font-family:var(--font-body); font-style:normal; font-size:var(--text-body-sm); color:var(--text-tertiary); margin-top:var(--space-3); }

/* ── Findings cards ── */
.find-grid{ display:grid; grid-template-columns:1fr; gap:var(--space-5); margin-top:var(--space-8); }
@media (min-width:760px){ .find-grid{ grid-template-columns:repeat(3,1fr); } }
.find-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); border-top:3px solid var(--color-warning); padding:var(--space-6); }
.find-card h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.find-card p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin-bottom:var(--space-3); }
.find-impact{ font-size:var(--text-caption); font-weight:var(--weight-semibold); color:var(--color-warning-text); background:var(--color-warning-bg); border-radius:var(--radius-sm); padding:var(--space-1) var(--space-2); display:inline-block; }

/* ── Playbook (numbered) ── */
.playbook{ max-width:760px; margin-inline:auto; counter-reset:pb; display:flex; flex-direction:column; gap:var(--space-5); margin-top:var(--space-8); }
.pb-item{ display:flex; gap:var(--space-5); padding:var(--space-6); background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); counter-increment:pb; }
.pb-item::before{ content:counter(pb); flex:none; width:40px; height:40px; border-radius:var(--radius-full); background:var(--brand-purple-light); color:var(--brand-purple-hover); font-family:var(--font-mono); font-weight:var(--weight-black); font-size:var(--text-h4); display:flex; align-items:center; justify-content:center; }
.pb-item h3{ font-size:var(--text-h4); margin-bottom:var(--space-2); }
.pb-item p{ font-size:var(--text-body-sm); color:var(--text-secondary); line-height:var(--leading-relaxed); margin:0; }

/* ── Results chart ── */
.results-chart{ max-width:860px; margin:var(--space-8) auto 0; }
.rc-card{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-6); }
.rc-card .linechart{ width:100%; height:240px; display:block; }
.rc-annot{ display:flex; flex-wrap:wrap; gap:var(--space-4); margin-top:var(--space-4); font-size:var(--text-caption); color:var(--text-secondary); }
.rc-annot .a{ display:inline-flex; align-items:center; gap:var(--space-2); }
.rc-annot .d{ width:8px; height:8px; border-radius:var(--radius-full); background:var(--brand-purple); flex:none; }
.result-stats{ display:grid; grid-template-columns:1fr; gap:var(--space-4); max-width:860px; margin:var(--space-6) auto 0; }
@media (min-width:680px){ .result-stats{ grid-template-columns:repeat(3,1fr); } }
.result-stat{ background:var(--bg-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg); padding:var(--space-5); text-align:center; }
.result-stat .k{ font-size:var(--text-caption); color:var(--text-tertiary); text-transform:uppercase; letter-spacing:var(--tracking-wide); margin-bottom:var(--space-2); }
.result-stat .v{ font-family:var(--font-mono); font-size:var(--text-body); font-weight:var(--weight-bold); color:var(--text-primary); }
.result-stat .v .up{ color:var(--color-success-text); }

/* ── Testimonial ── */
.cs-testimonial{ max-width:720px; margin-inline:auto; text-align:center; }
.cs-testimonial .av{ width:64px; height:64px; border-radius:var(--radius-full); background:linear-gradient(135deg,#8B5CF6,#3B82F6); color:#fff; display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-weight:var(--weight-black); font-size:22px; margin:0 auto var(--space-5); }
.cs-testimonial blockquote{ font-family:var(--font-display); font-size:clamp(22px,3vw,30px); font-weight:var(--weight-medium); line-height:var(--leading-snug); letter-spacing:var(--tracking-tight); color:var(--text-primary); margin:0 0 var(--space-5); text-wrap:balance; }
.cs-testimonial .by{ font-size:var(--text-body); color:var(--text-secondary); }
.cs-testimonial .by strong{ color:var(--text-primary); }

/* ── Takeaways ── */
.takeaways{ max-width:720px; margin-inline:auto; list-style:none; padding:0; display:flex; flex-direction:column; gap:var(--space-4); }
.takeaways li{ display:flex; gap:var(--space-3); font-size:var(--text-body-lg); color:var(--text-secondary); line-height:var(--leading-snug); }
.takeaways li::before{ content:'✓'; color:var(--color-success); font-weight:var(--weight-bold); flex:none; }
.takeaways li strong{ color:var(--text-primary); font-weight:var(--weight-semibold); }

/* ── Final CTA (dark) ── */
.cs-cta{ position:relative; background:var(--bg-dark); color:var(--text-on-dark); padding-block:var(--space-24); text-align:center; overflow:hidden; }
.cs-cta::before{ content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:1000px; height:520px; background:radial-gradient(ellipse, rgba(124,58,237,.28) 0%, transparent 70%); pointer-events:none; }
.cs-cta-inner{ position:relative; z-index:1; max-width:var(--container-prose); margin-inline:auto; }
.cs-cta h2{ color:var(--text-on-dark); font-size:var(--text-h1); font-weight:var(--weight-black); letter-spacing:var(--tracking-tight); margin-bottom:var(--space-4); }
.cs-cta p{ color:var(--text-mid-dark); font-size:var(--text-body-lg); line-height:var(--leading-relaxed); margin-bottom:var(--space-8); }