/* =============================================
   Lesson 16 — The $16 Trillion Opportunity
   Unique component styles + rose/pink theme
   ============================================= */

/* ---- Rose accent variables ---- */
:root {
  --rose:       #f43f5e;
  --rose-dim:   rgba(244,63,94,0.12);
  --rose-mid:   rgba(244,63,94,0.22);
  --rose-lite:  #fb7185;
}

/* Override shared blue-based styles with rose for this lesson */
[data-lesson="16"] .hero-grid { background-image:linear-gradient(rgba(244,63,94,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(244,63,94,.04) 1px,transparent 1px); }
[data-lesson="16"] .hero-glow { background:radial-gradient(ellipse 75% 55% at 50% 0%,rgba(244,63,94,.13) 0%,rgba(3,136,166,.08) 45%,transparent 70%); }
[data-lesson="16"] .ghost-num { color:rgba(244,63,94,.04); }
[data-lesson="16"] .series-badge { background:var(--rose-dim); border-color:rgba(244,63,94,.35); color:var(--rose-lite); }
[data-lesson="16"] .series-badge::before { background:var(--rose-lite); }
[data-lesson="16"] .hero h1 .accent { color:var(--rose-lite); }
[data-lesson="16"] .scroll-line { background:linear-gradient(to bottom,var(--rose),transparent); }
[data-lesson="16"] .section-label { color:var(--rose-lite); }
[data-lesson="16"] .highlight-box { background:var(--rose-dim); border-color:rgba(244,63,94,.25); border-left-color:var(--rose); }
[data-lesson="16"] .divider { background:linear-gradient(to right,transparent,rgba(244,63,94,.2),transparent); }
[data-lesson="16"] .stat-num { color:var(--rose-lite); }
[data-lesson="16"] .cta-section::before { background:radial-gradient(ellipse 70% 60% at 50% 50%,rgba(244,63,94,.08) 0%,transparent 70%); }
[data-lesson="16"] .cta-btn { background:linear-gradient(135deg,var(--rose),var(--rose-lite)); }
[data-lesson="16"] .cta-btn:hover { box-shadow:0 16px 40px rgba(244,63,94,.3); }
[data-lesson="16"] .cta-btn.secondary { background:transparent; border-color:rgba(244,63,94,.4); color:var(--rose-lite); }
[data-lesson="16"] .cta-btn.secondary:hover { background:var(--rose-dim); border-color:var(--rose); }
[data-lesson="16"] .series-pill.active { background:var(--rose-dim); border-color:rgba(244,63,94,.5); color:var(--rose-lite); }

/* ---- TIER BADGE ---- */
.tier-badge { display:inline-flex; align-items:center; gap:6px; background:rgba(3,136,166,.1); border:1px solid rgba(3,136,166,.25); border-radius:6px; padding:4px 12px; font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.15em; color:var(--blue-light); text-transform:uppercase; margin-bottom:16px; }

/* ---- GROWTH BAR VISUAL (hero) ---- */
.growth-visual { margin-top:52px; opacity:0; animation:fadeUp .8s ease .8s forwards; width:100%; max-width:640px; }
.growth-chart { background:var(--navy-light); border:1px solid rgba(244,63,94,.18); border-radius:14px; padding:28px 24px; }
.gc-label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--rose-lite); text-transform:uppercase; margin-bottom:20px; }
.bar-row { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.bar-row:last-child { margin-bottom:0; }
.bar-year { font-family:"DM Mono",monospace; font-size:.75rem; color:rgba(255,255,255,.5); width:36px; flex-shrink:0; text-align:right; }
.bar-track { flex:1; background:rgba(255,255,255,.05); border-radius:4px; height:22px; overflow:hidden; }
.bar-fill { height:100%; border-radius:4px; display:flex; align-items:center; padding-left:10px; font-family:"DM Mono",monospace; font-size:.72rem; font-weight:500; transition:width 1.5s ease; }
.bar-row.yr-now .bar-fill { background:linear-gradient(90deg,rgba(244,63,94,.7),rgba(251,113,133,.5)); }
.bar-row.yr-fut .bar-fill { background:linear-gradient(90deg,var(--rose),var(--rose-lite)); }
.bar-row.yr-base .bar-fill { background:rgba(255,255,255,.12); }

/* ---- FORECAST CARDS ---- */
.forecast-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:52px; }
.forecast-card { background:var(--navy-light); border-radius:16px; padding:28px; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; text-align:center; }
.forecast-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.forecast-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; }
.forecast-card.citi::before { background:linear-gradient(90deg,#0061a1,#2ab0d4); }
.forecast-card.bcg::before { background:linear-gradient(90deg,#00712d,#5edba0); }
.forecast-card.bain::before { background:linear-gradient(90deg,#cc0000,#fb7185); }
.forecast-card.blackrock::before { background:linear-gradient(90deg,#1a1a1a,#888); }
.forecast-card.mckinsey::before { background:linear-gradient(90deg,#003399,#6699ff); }
.forecast-card.rp::before { background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.forecast-card .fc-source { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.4); margin-bottom:10px; }
.forecast-card .fc-amount { font-family:"Lora",serif; font-size:2.2rem; font-weight:800; line-height:1; margin-bottom:4px; }
.forecast-card .fc-year { font-family:"DM Mono",monospace; font-size:.75rem; color:rgba(255,255,255,.45); margin-bottom:10px; }
.forecast-card p { font-size:.78rem; color:var(--white-dim); line-height:1.65; margin:0; }

/* ---- ASSET CLASS BREAKDOWN ---- */
.breakdown-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:52px; align-items:start; }
.breakdown-bars { background:var(--navy-light); border:1px solid rgba(244,63,94,.14); border-radius:16px; padding:32px; }
.breakdown-bars h3 { font-family:"Lora",serif; font-size:1rem; margin-bottom:24px; color:var(--white); }
.asset-bar-row { margin-bottom:18px; }
.asset-bar-row:last-child { margin-bottom:0; }
.abr-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.abr-name { font-size:.875rem; color:var(--white-dim); }
.abr-value { font-family:"Lora",serif; font-size:.95rem; font-weight:700; }
.abr-track { background:rgba(255,255,255,.06); border-radius:4px; height:10px; overflow:hidden; }
.abr-fill { height:100%; border-radius:4px; }

.catalyst-list { display:flex; flex-direction:column; gap:14px; }
.catalyst-item { background:var(--navy-light); border:1px solid rgba(244,63,94,.14); border-radius:12px; padding:20px 24px; display:flex; gap:16px; align-items:flex-start; transition:transform .3s; }
.catalyst-item:hover { transform:translateX(4px); }
.catalyst-num { font-family:"Lora",serif; font-size:1.4rem; font-weight:800; color:var(--rose-dim); line-height:1; flex-shrink:0; width:32px; }
.catalyst-body h4 { font-family:"Lora",serif; font-size:.95rem; margin-bottom:4px; }
.catalyst-body p { font-size:.84rem; color:var(--white-dim); margin:0; line-height:1.65; }

/* ---- MARKET TIMELINE ---- */
.market-timeline { display:flex; flex-direction:column; gap:0; margin-top:52px; }
.mt-row { display:grid; grid-template-columns:100px 1fr; gap:24px; align-items:stretch; }
.mt-left { display:flex; flex-direction:column; align-items:flex-end; padding-top:4px; }
.mt-year { font-family:"Lora",serif; font-size:1.05rem; font-weight:700; color:var(--rose-lite); }
.mt-size { font-family:"DM Mono",monospace; font-size:.75rem; color:rgba(244,63,94,.7); }
.mt-connector { width:2px; flex:1; background:linear-gradient(to bottom,rgba(244,63,94,.3),rgba(3,136,166,.1)); margin:6px 0 0 auto; }
.mt-row:last-child .mt-connector { display:none; }
.mt-content { padding-bottom:36px; }
.mt-content h4 { font-family:"Lora",serif; font-size:.95rem; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.mt-dot { width:8px; height:8px; border-radius:50%; background:var(--rose); flex-shrink:0; }
.mt-content p { font-size:.86rem; color:var(--white-dim); margin:0; max-width:580px; line-height:1.7; }
.mt-tag { display:inline-block; padding:2px 8px; border-radius:6px; font-family:"DM Mono",monospace; font-size:.72rem; margin-top:6px; }
.mt-tag.actual { background:rgba(94,219,160,.12); color:var(--green); }
.mt-tag.projected { background:var(--rose-dim); color:var(--rose-lite); }

/* ---- FORCE CARDS ---- */
.force-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:20px; margin-top:52px; }
.force-card { background:var(--navy-light); border:1px solid rgba(244,63,94,.14); border-radius:16px; padding:30px; position:relative; overflow:hidden; transition:transform .3s,box-shadow .3s; }
.force-card::before { content:""; position:absolute; top:0; left:0; width:100%; height:3px; background:linear-gradient(90deg,var(--rose),var(--rose-lite)); }
.force-card:hover { transform:translateY(-5px); box-shadow:0 20px 50px rgba(0,0,0,.4); }
.force-card .icon { width:46px; height:46px; border-radius:11px; background:var(--rose-dim); display:flex; align-items:center; justify-content:center; margin-bottom:18px; }
.force-card h3 { font-family:"Lora",serif; font-size:1.05rem; margin-bottom:8px; }
.force-card p { font-size:.86rem; color:var(--white-dim); line-height:1.75; margin:0; }

/* ---- RISK CARDS ---- */
.risk-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:20px; margin-top:52px; }
.risk-card { background:rgba(255,154,60,.05); border:1px solid rgba(255,154,60,.2); border-radius:14px; padding:28px; transition:transform .3s; }
.risk-card:hover { transform:translateY(-4px); }
.risk-card .r-label { font-family:"DM Mono",monospace; font-size:9px; letter-spacing:.2em; color:var(--orange); text-transform:uppercase; margin-bottom:8px; }
.risk-card h3 { font-family:"Lora",serif; font-size:1rem; margin-bottom:8px; color:var(--orange); }
.risk-card p { font-size:.875rem; color:var(--white-dim); margin:0; line-height:1.7; }

/* ---- RESPONSIVE ---- */
@media(max-width:768px){
  .forecast-grid, .force-grid, .risk-grid { grid-template-columns:1fr 1fr; }
  .breakdown-grid { grid-template-columns:1fr; }
  .stats-inner { grid-template-columns:1fr 1fr; }
}
@media(max-width:480px){
  .forecast-grid, .force-grid, .risk-grid { grid-template-columns:1fr; }
}