/* =============================================
   Lesson 24 — Series Finale
   Unique component styles + blue theme w/ gold CTA
   ============================================= */

/* ---- Gold accent variables ---- */
:root {
  --star:      #e2c46a;
  --star-lite: #f0d98a;
}

/* Scoped overrides — blue theme is default, only override what differs */
[data-lesson="24"] .hero h1 .accent { color:var(--blue-light); display:block; }
[data-lesson="24"] .hero-glow { background:
  radial-gradient(ellipse 80% 60% at 50% 0%,rgba(3,136,166,.18) 0%,rgba(226,196,106,.06) 40%,transparent 70%),
  radial-gradient(ellipse 50% 40% at 20% 90%,rgba(94,219,160,.06) 0%,transparent 50%),
  radial-gradient(ellipse 50% 40% at 80% 90%,rgba(226,196,106,.05) 0%,transparent 50%);
  pointer-events:none; }

/* ---- Section lead ---- */
.section p.lead { font-size:1.15rem; font-weight:300; line-height:1.85; }

/* ---- SERIES RECAP VISUAL (bar chart) ---- */
.recap-visual { margin-top:52px; opacity:0; animation:fadeUp .8s ease .8s forwards; display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; justify-content:center; max-width:620px; }
.rv-tier { text-align:center; }
.rv-bar { border-radius:6px 6px 0 0; width:96px; display:flex; align-items:flex-end; justify-content:center; padding-bottom:6px; }
.rv-bar.t1 { height:48px; background:rgba(3,136,166,.25); border:1px solid rgba(3,136,166,.35); }
.rv-bar.t2 { height:72px; background:rgba(16,185,129,.2); border:1px solid rgba(16,185,129,.3); }
.rv-bar.t3 { height:96px; background:rgba(245,158,11,.18); border:1px solid rgba(245,158,11,.28); }
.rv-bar.t4 { height:120px; background:rgba(249,115,22,.2); border:1px solid rgba(249,115,22,.3); }
.rv-bar.t5 { height:140px; background:rgba(226,196,106,.18); border:1px solid rgba(226,196,106,.3); }
.rv-count { font-family:"Lora",serif; font-size:.82rem; font-weight:800; }
.rv-bar.t1 .rv-count { color:var(--blue-light); }
.rv-bar.t2 .rv-count { color:#34d399; }
.rv-bar.t3 .rv-count { color:#fcd34d; }
.rv-bar.t4 .rv-count { color:#fb923c; }
.rv-bar.t5 .rv-count { color:var(--star-lite); }
.rv-label { font-family:"DM Mono",monospace; font-size:8px; letter-spacing:.1em; color:rgba(255,255,255,.35); text-transform:uppercase; margin-top:6px; line-height:1.4; }

/* ---- SERIES MAP (tier breakdown) ---- */
.series-map { display:flex; flex-direction:column; gap:16px; margin-top:52px; }
.sm-tier { background:var(--navy-light); border-radius:14px; padding:24px 28px; }
.sm-tier.sm-t1 { border:1px solid rgba(3,136,166,.25); }
.sm-tier.sm-t2 { border:1px solid rgba(16,185,129,.22); }
.sm-tier.sm-t3 { border:1px solid rgba(245,158,11,.2); }
.sm-tier.sm-t4 { border:1px solid rgba(249,115,22,.2); }
.sm-tier.sm-t5 { border:1px solid rgba(226,196,106,.2); }
.sm-tier-header { display:flex; align-items:center; gap:16px; margin-bottom:14px; }
.sm-tier-label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; text-transform:uppercase; }
.sm-t1 .sm-tier-label { color:var(--blue-light); }
.sm-t2 .sm-tier-label { color:#34d399; }
.sm-t3 .sm-tier-label { color:#fcd34d; }
.sm-t4 .sm-tier-label { color:#fb923c; }
.sm-t5 .sm-tier-label { color:var(--star-lite); }
.sm-tier-title { font-family:"Lora",serif; font-size:1rem; font-weight:700; }
.sm-lessons { display:flex; flex-wrap:wrap; gap:8px; }
.sm-pill { padding:5px 12px; border-radius:20px; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.05em; }
.sm-t1 .sm-pill { background:rgba(3,136,166,.1); border:1px solid rgba(3,136,166,.22); color:rgba(42,176,212,.8); }
.sm-t2 .sm-pill { background:rgba(16,185,129,.08); border:1px solid rgba(16,185,129,.2); color:rgba(52,211,153,.8); }
.sm-t3 .sm-pill { background:rgba(245,158,11,.08); border:1px solid rgba(245,158,11,.18); color:rgba(252,211,77,.8); }
.sm-t4 .sm-pill { background:rgba(249,115,22,.08); border:1px solid rgba(249,115,22,.18); color:rgba(251,146,60,.8); }
.sm-t5 .sm-pill { background:rgba(226,196,106,.08); border:1px solid rgba(226,196,106,.18); color:rgba(240,217,138,.8); }

/* ---- TWO-PATH CARDS (issuer/investor) ---- */
.path-split { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:52px; }
.path-card { border-radius:18px; padding:40px; position:relative; overflow:hidden; }
.path-card.issuer { background:var(--navy-light); border:1px solid rgba(3,136,166,.25); }
.path-card.investor { background:var(--navy-light); border:1px solid rgba(226,196,106,.22); }
.path-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:4px; }
.path-card.issuer::before { background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.path-card.investor::before { background:linear-gradient(90deg,var(--star),var(--star-lite)); }
.pc-icon { width:56px; height:56px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.path-card.issuer .pc-icon { background:var(--blue-dim); }
.path-card.investor .pc-icon { background:rgba(226,196,106,.1); }
.pc-label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:8px; }
.path-card.issuer .pc-label { color:var(--blue-light); }
.path-card.investor .pc-label { color:var(--star-lite); }
.path-card h3 { font-family:"Lora",serif; font-size:1.3rem; margin-bottom:14px; }
.path-card p { font-size:.92rem; color:var(--white-dim); line-height:1.8; margin-bottom:20px; }
.path-tag { display:inline-block; padding:4px 12px; border-radius:20px; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.12em; text-transform:uppercase; }
.path-card.issuer .path-tag { background:var(--blue-dim); color:var(--blue-light); border:1px solid rgba(3,136,166,.25); }
.path-card.investor .path-tag { background:rgba(226,196,106,.1); color:var(--star-lite); border:1px solid rgba(226,196,106,.22); }

/* ---- STEP GUIDES (issuer & investor timelines) ---- */
.step-guide { display:flex; flex-direction:column; gap:0; margin-top:52px; }
.step-row { display:grid; grid-template-columns:68px 1fr; gap:20px; align-items:stretch; }
.step-left { display:flex; flex-direction:column; align-items:center; }
.step-circle { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1; }
.issuer-steps .step-circle { background:var(--blue-dim); border:2px solid rgba(3,136,166,.5); }
.investor-steps .step-circle { background:rgba(226,196,106,.1); border:2px solid rgba(226,196,106,.4); }
.step-circle span { font-family:"Lora",serif; font-size:1.1rem; font-weight:800; }
.issuer-steps .step-circle span { color:var(--blue-light); }
.investor-steps .step-circle span { color:var(--star-lite); }
.step-connector { width:2px; flex:1; margin:4px auto; }
.issuer-steps .step-connector { background:linear-gradient(to bottom,rgba(3,136,166,.4),rgba(3,136,166,.1)); }
.investor-steps .step-connector { background:linear-gradient(to bottom,rgba(226,196,106,.3),rgba(226,196,106,.1)); }
.step-row:last-child .step-connector { display:none; }
.step-content { padding-bottom:44px; }
.step-content h4 { font-family:"Lora",serif; font-size:1.05rem; margin-bottom:8px; }
.step-content p { font-size:.92rem; color:var(--white-dim); max-width:620px; line-height:1.8; margin:0; }
.step-content .step-detail { margin-top:12px; background:var(--navy-light); border-radius:10px; padding:14px 18px; font-size:.84rem; color:var(--white-dim); line-height:1.7; }
.issuer-steps .step-detail { border:1px solid rgba(3,136,166,.15); }
.investor-steps .step-detail { border:1px solid rgba(226,196,106,.12); }

/* ---- KNOW CARDS ---- */
.know-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:52px; }
.know-card { background:var(--navy-light); border:1px solid rgba(3,136,166,.14); border-radius:14px; padding:26px; transition:transform .3s; }
.know-card:hover { transform:translateY(-3px); }
.know-card .kc-tier { font-family:"DM Mono",monospace; font-size:8px; letter-spacing:.2em; text-transform:uppercase; margin-bottom:8px; }
.know-card h3 { font-family:"Lora",serif; font-size:.95rem; margin-bottom:8px; }
.know-card p { font-size:.82rem; color:var(--white-dim); margin:0; line-height:1.7; }

/* ---- COMMITMENT CARDS ---- */
.commitment-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:52px; }
.commit-card { border-radius:16px; padding:30px; position:relative; overflow:hidden; transition:transform .3s; background:var(--navy-light); border:1px solid rgba(3,136,166,.15); }
.commit-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--blue),var(--blue-light)); }
.commit-card:hover { transform:translateY(-4px); }
.commit-card .icon { width:44px; height:44px; border-radius:10px; background:var(--blue-dim); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.commit-card h3 { font-family:"Lora",serif; font-size:1rem; margin-bottom:8px; }
.commit-card p { font-size:.86rem; color:var(--white-dim); margin:0; line-height:1.75; }

/* ---- FINAL CTA (grand finale) ---- */
.final-cta { text-align:center; padding:140px 40px; position:relative; overflow:hidden; }
.final-cta::before { content:""; position:absolute; inset:0; background:
  radial-gradient(ellipse 80% 70% at 50% 50%,rgba(3,136,166,.1) 0%,rgba(226,196,106,.05) 40%,transparent 70%);
  pointer-events:none; }
.final-cta .fc-series-end { font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.3em; color:var(--blue-light); text-transform:uppercase; margin-bottom:24px; display:block; }
.final-cta h2 { font-family:"Lora",serif; font-size:clamp(2rem,5vw,4rem); font-weight:800; margin-bottom:24px; position:relative; letter-spacing:-.02em; line-height:1.1; }
.final-cta h2 .gold { color:var(--star-lite); }
.final-cta p { font-size:1.1rem; color:var(--white-dim); max-width:600px; margin:0 auto 48px; position:relative; line-height:1.85; }
.cta-btn.gold-btn { background:linear-gradient(135deg,var(--star),var(--star-lite)); color:var(--navy); }
.cta-btn.gold-btn:hover { box-shadow:0 18px 44px rgba(226,196,106,.25); }

/* ---- CONTACT STRIP ---- */
.contact-strip { max-width:580px; margin:0 auto; background:var(--navy-light); border:1px solid rgba(3,136,166,.2); border-radius:16px; padding:32px; text-align:center; }
.contact-strip p.cs-label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.22em; color:var(--blue-light); text-transform:uppercase; margin-bottom:12px; }
.contact-strip h3 { font-family:"Lora",serif; font-size:1.15rem; margin-bottom:8px; }
.contact-strip p { font-size:.9rem; color:var(--white-dim); margin:0; line-height:1.7; }
.contact-strip .contact-detail { margin-top:16px; font-family:"DM Mono",monospace; font-size:.85rem; color:var(--blue-light); letter-spacing:.05em; }

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .path-split, .commitment-grid { grid-template-columns:1fr; }
  .know-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:1fr 1fr; }
  .recap-visual { gap:4px; }
  .rv-bar { width:56px; }
}