/* ==========================================================
   WEALTH CREATION ROADMAP
   Based on the supplied Kunal Finance dark roadmap theme
   ========================================================== */
html, body { margin:0; padding:0; overflow-x:hidden; }

.scroll-area { padding:56px 0 96px; }
.roadmap-page { max-width:1400px; margin:auto; padding:0 64px; }

.page-title-bar h1 { font-size:38px; color:#f8fafc; margin:0 0 14px; }
.page-title-bar p {
    padding:18px 24px;
    background:linear-gradient(90deg,rgba(56,189,248,.14),rgba(56,189,248,.04));
    border-left:4px solid #38bdf8;
    border-radius:16px;
    color:#cbd5f5;
    margin-bottom:36px;
    line-height:1.7;
}

.section-heading { margin:42px 0 18px; }
.section-heading h2 { color:#f8fafc; font-size:26px; margin:0 0 8px; }
.section-heading p { color:#94a3b8; margin:0; line-height:1.6; }

.assumptions-card,.target-card,.note-card,.milestone-card,.table-card {
    background:linear-gradient(180deg,rgba(2,6,23,.96),rgba(2,6,23,.90));
    border:1px solid #1e293b;
    border-radius:22px;
    box-shadow:0 25px 55px rgba(0,0,0,.35);
}

.assumptions-card { padding:28px; }
.section-title { color:#38bdf8; font-size:18px; font-weight:700; margin-bottom:20px; }
.assumption-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.assumption-grid div { padding:18px; background:rgba(15,23,42,.75); border:1px solid #1e293b; border-radius:14px; }
.assumption-grid span,.target-stat span { display:block; color:#94a3b8; font-size:13px; margin-bottom:7px; }
.assumption-grid strong { color:#f8fafc; font-size:17px; }

.milestone-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.milestone-card { padding:22px; }
.milestone-year { color:#38bdf8; font-size:14px; font-weight:700; }
.milestone-value { color:#f8fafc; font-size:25px; font-weight:800; margin:10px 0 5px; }
.milestone-label { color:#94a3b8; font-size:13px; }

.target-card {
    margin-top:34px; padding:28px; display:grid;
    grid-template-columns:1.6fr 1fr 1fr; gap:24px; align-items:center;
    border-color:rgba(56,189,248,.35);
    background:linear-gradient(90deg,rgba(56,189,248,.11),rgba(2,6,23,.94));
}
.target-kicker { color:#38bdf8; font-size:13px; font-weight:800; letter-spacing:1px; }
.target-value { color:#f8fafc; font-size:42px; font-weight:900; margin:6px 0; }
.target-subtitle { color:#94a3b8; }
.target-stat { padding:18px; border-left:1px solid #334155; }
.target-stat strong { color:#f8fafc; font-size:20px; }

.table-card { overflow:hidden; }
.table-scroll { overflow-x:auto; }
table { width:100%; min-width:760px; border-collapse:collapse; }
thead { background:#0f172a; }
th {
    padding:18px; color:#38bdf8; font-size:15px; font-weight:600;
    text-align:left; border-bottom:1px solid #334155; white-space:nowrap;
}
td {
    padding:16px 18px; color:#e5e7eb; font-size:14px; line-height:1.6;
    border-bottom:1px solid rgba(148,163,184,.16); white-space:nowrap;
}
tbody tr:hover { background:rgba(56,189,248,.05); }
tbody tr:last-child { background:rgba(56,189,248,.08); }
tbody tr:last-child td { border-bottom:0; }
td strong { color:#f8fafc; }

.roadmap-notes { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:30px; }
.note-card { padding:22px; }
.note-card h3 { color:#f8fafc; margin:0 0 10px; font-size:17px; }
.note-card p { color:#94a3b8; margin:0; line-height:1.7; }

@media (max-width:1000px) {
    .roadmap-page { padding:0 28px; }
    .milestone-grid { grid-template-columns:repeat(2,1fr); }
    .target-card { grid-template-columns:1fr; }
    .target-stat { border-left:0; border-top:1px solid #334155; padding-left:0; padding-top:16px; }
}
@media (max-width:700px) {
    .scroll-area { padding-top:32px; }
    .roadmap-page { padding:0 16px; }
    .page-title-bar h1 { font-size:28px; }
    .assumption-grid,.milestone-grid,.roadmap-notes { grid-template-columns:1fr; }
    .target-value { font-size:34px; }
    .table-card { border-radius:16px; }
    .table-scroll { -webkit-overflow-scrolling:touch; }
}

/* ==========================================================
   FUTURE WEALTH RECEIPTS
   Added section for post-2040 maturity / retirement receipts
   ========================================================== */
.future-receipts-section { margin-top:42px; }

.future-receipts-card { margin-top:0; }

.future-receipts-table th {
    padding:18px;
}

.future-receipts-table td {
    padding:18px;
}

.future-receipts-table tbody tr:last-child {
    background:rgba(56,189,248,.08);
}

.future-receipts-note {
    margin-top:12px;
    padding:0 4px;
    color:#64748b;
    font-size:12px;
    line-height:1.6;
}

@media (max-width:700px) {
    .future-receipts-card { border-radius:16px; }
}