/* ===== THEME VARIABLES ===== */

        /* Light mode (default) */
        :root{
            --bg-page:#f1f5f9;
            --bg-card:#ffffff;
            --bg-hero:linear-gradient(180deg,#ffffff,#f8fafc);

            --text-main:#0f172a;
            --text-muted:#475569;

            --border-soft:#e2e8f0;

            --shadow-card:
                0 4px 12px rgba(0,0,0,.06),
                0 2px 4px rgba(0,0,0,.04);
        }

        :is([class$="-related-pill"], [class$="-related-pill"]:visited){
            background:linear-gradient(135deg, #fb7185, #be123c) !important;
            border:1px solid rgba(190,18,60,.28) !important;
            box-shadow:0 8px 18px rgba(190,18,60,.18) !important;
            color:#ffffff !important;
        }

        :is([class$="-related-pill"]:hover, [class$="-related-pill"]:focus-visible){
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            border-color:rgba(190,18,60,.38) !important;
            box-shadow:0 10px 22px rgba(190,18,60,.24) !important;
            color:#ffffff !important;
        }

        /* Oceanic blue (light) for comparison & guides tiles; hover shows red highlight */
        .blue-related-pill, .blue-related-pill:visited{
            background:linear-gradient(135deg, #ecfeff, #dbeefe) !important;
            border:1px solid rgba(59,130,246,.18) !important;
            box-shadow:0 8px 18px rgba(59,130,246,.08) !important;
            color:#075985 !important;
        }

        .blue-related-pill:hover, .blue-related-pill:focus-visible{
            /* Red highlight on hover to match related-pill hover */
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            border-color:rgba(190,18,60,.38) !important;
            box-shadow:0 10px 22px rgba(190,18,60,.24) !important;
            color:#ffffff !important;
            transform:translateY(-1px);
        }

        /* Stronger override when tile also has the .item class (used on guides/comparisons pages) */
        .item.blue-related-pill, a.item.blue-related-pill, .item.blue-related-pill:visited{
            background:linear-gradient(135deg, #ecfeff, #dbeefe) !important;
            border:1px solid rgba(59,130,246,.18) !important;
            box-shadow:0 8px 18px rgba(59,130,246,.08) !important;
            color:#075985 !important;
            position:relative;
            overflow:visible;
        }

        /* Move tile slightly and show underline on hover (match homepage behavior) */
        a.item.blue-related-pill:hover,
        a.item.blue-related-pill:focus-visible,
        .item.blue-related-pill:hover,
        .item.blue-related-pill:focus-visible{
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            border-color:rgba(190,18,60,.38) !important;
            box-shadow:0 10px 22px rgba(190,18,60,.24) !important;
            color:#ffffff !important;
            transform:translateY(-2px);
        }

        /* underline removed for Comparisons/Guides tiles */
        /* (previous ::after underline intentionally removed) */

        /* Dark mode */
        html.dark{
            --bg-page:#0b1220;
            --bg-card:#0f172a;
            --bg-hero:linear-gradient(180deg,#0f172a,#020617);

            --text-main:#e5e7eb;
            --text-muted:#94a3b8;

            --border-soft:#1e293b;

            --shadow-card:
                0 8px 22px rgba(0,0,0,.55);
        }

        html.dark body{
            background:var(--bg-page);
            color:var(--text-main);
        }

        html.dark body :is(h1,h2,h3,h4,h5,h6,strong,b,th,legend){
            color:var(--text-main);
        }

        html.dark body :is(p,li,label,td,small,.breadcrumb,.popular-calc-meta,.footer,.footer-trust-strip){
            color:var(--text-muted);
        }

        html.dark body :is(.article-card,.card,.contact-card,.support-card,.privacy-card,.terms-card,.home-about-seo,.calc-card,.calc-category,.calc-list,.dropdown-menu,
        [class$="-calculator"],[class$="-calculator-box"],[class$="-chart"],[class$="-summary"],[class$="-result-box"],[class$="-info-panel"],
        [class$="-insight-card"],[class$="-link-card"],[class$="-question-card"],[class$="-growth-chart-wrap"],[class$="-chart-side"],
        [class$="-chart-legend"],[class$="-search-panel"],[class$="-questions-panel"],[class$="-related-panel"],[class$="-growth-panel"],
        [class$="-quick-insights"],.calc-categories-grid.single-category-view .calc-list,
        .calc-categories-grid.single-category-view .calc-side-visual){
            background:var(--bg-card);
            border-color:var(--border-soft);
            box-shadow:var(--shadow-card);
            color:var(--text-main);
        }

        html.dark body :is(.article-card,.card,.contact-card,.support-card,.privacy-card,.terms-card,.home-about-seo,.calc-card,.calc-category,
        [class$="-calculator"],[class$="-calculator-box"],[class$="-chart"],[class$="-summary"],[class$="-result-box"],[class$="-info-panel"],
        [class$="-insight-card"],[class$="-link-card"],[class$="-question-card"],[class$="-growth-chart-wrap"],[class$="-chart-side"],
        [class$="-chart-legend"],[class$="-search-panel"],[class$="-questions-panel"],[class$="-related-panel"],[class$="-growth-panel"],
        [class$="-quick-insights"]) :is(p,li,span,small,label){
            color:var(--text-muted);
        }

        html.dark body :is(.article-card,.card,.contact-card,.support-card,.privacy-card,.terms-card,.home-about-seo,.calc-card,.calc-category,
        [class$="-calculator"],[class$="-calculator-box"],[class$="-chart"],[class$="-summary"],[class$="-result-box"],[class$="-info-panel"],
        [class$="-insight-card"],[class$="-link-card"],[class$="-question-card"],[class$="-growth-chart-wrap"],[class$="-chart-side"],
        [class$="-chart-legend"],[class$="-search-panel"],[class$="-questions-panel"],[class$="-related-panel"],[class$="-growth-panel"],
        [class$="-quick-insights"]) :is(h1,h2,h3,h4,strong,b){
            color:var(--text-main);
        }

        html.dark body a:not(.nav-btn):not(.primary):not(.secondary):not(.btn-primary){
            color:#93c5fd;
        }

        html.dark .calc-wrap .calc-link{
            background:linear-gradient(180deg,#111827 0%,#0f172a 100%) !important;
            border:1px solid #334155 !important;
            box-shadow:0 8px 18px rgba(0,0,0,.24) !important;
            color:#f8fafc !important;
        }

        html.dark .calc-wrap .calc-link span{
            color:#cbd5e1 !important;
        }

        html.dark .calc-wrap .calc-link:hover,
        html.dark .calc-wrap .calc-link:focus-visible{
            background:linear-gradient(180deg,#172033 0%,#111827 100%) !important;
            border-color:#fb7185 !important;
            box-shadow:0 12px 24px rgba(190,18,60,.18) !important;
            color:#ffffff !important;
        }

        html.dark .calc-wrap .calc-link:hover span,
        html.dark .calc-wrap .calc-link:focus-visible span{
            color:#e2e8f0 !important;
        }

        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-list,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-list,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-list,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-list,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-list,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-list{
            background:linear-gradient(180deg,#111827 0%,#0f172a 100%) !important;
            border:1px solid #334155 !important;
            box-shadow:0 12px 24px rgba(0,0,0,.28) !important;
        }

        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-side-visual,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-side-visual,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-side-visual,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-side-visual,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-side-visual,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-side-visual{
            background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%) !important;
            border:1px solid #334155 !important;
            box-shadow:0 12px 24px rgba(0,0,0,.28) !important;
        }

        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-list a,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-list a,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-list a,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-list a,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-list a,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-list a{
            color:#e2e8f0 !important;
            font-weight:700;
            text-decoration:none;
        }

        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-list a:hover,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-list a:focus-visible,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-list a:hover,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-list a:focus-visible,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-list a:hover,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-list a:focus-visible,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-list a:hover,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-list a:focus-visible,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-list a:hover,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-list a:focus-visible,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-list a:hover,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-list a:focus-visible{
            color:#ffffff !important;
        }

        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="savings"] .calc-list li::before,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="retirement"] .calc-list li::before,
        html.dark .calc-categories-grid.single-category-view .calc-category[data-cat="loans"] .calc-list li::before,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="savings"] .calc-list li::before,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="retirement"] .calc-list li::before,
        html.dark .calc-categories-grid.all-active-categories-view .calc-category[data-cat="loans"] .calc-list li::before{
            background:#e11d48 !important;
            box-shadow:0 0 0 4px rgba(225,29,72,.12) !important;
        }

        html.dark .calc-visual-placeholder-shell{
            background:linear-gradient(160deg,#fff1f2 0%,#ffe4e6 48%,#fff7ed 100%) !important;
            border-color:rgba(244,63,94,.12) !important;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.75) !important;
            color:#0f172a !important;
        }

        html.dark .calc-visual-eyebrow{
            color:#be123c !important;
        }

        html.dark .calc-visual-placeholder-shell strong{
            color:#0f172a !important;
        }

        html.dark .calc-visual-placeholder-shell p{
            color:#475569 !important;
        }

        html.dark body :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea){
            background:#0b1220;
            border-color:#334155;
            color:var(--text-main);
        }

        html.dark body :is(input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),select,textarea)::placeholder{
            color:#64748b;
        }

        html.dark .dropdown-menu a{
            color:var(--text-main);
        }

        html.dark .dropdown-menu a:hover{
            background:#111827;
        }

        html.dark .home-about-seo,
        html.dark .contact-card,
        html.dark .support-card,
        html.dark .privacy-card,
        html.dark .terms-card,
        html.dark .article-card,
        html.dark .card{
            border:1px solid var(--border-soft);
        }

        html.dark .calc-category.disabled,
        html.dark .calc-card.disabled,
        html.dark body [class*=" disabled"]{
            opacity:0.7;
        }

        html.dark .badge.popular{
            background:#312e81;
            border:1px solid #6366f1;
            color:#e0e7ff;
        }

        html.dark .badge.new{
            background:#14532d;
            border:1px solid #22c55e;
            color:#dcfce7;
        }

        html.dark .calc-card.disabled .badge,
        html.dark .calc-card.disabled .badge.popular,
        html.dark .calc-card.disabled .badge.new{
            background:#1e293b;
            border:1px solid #475569;
            color:#cbd5e1;
            opacity:1;
        }

        html.dark .calc-card.disabled h3::after,
        html.dark .calc-category.disabled h2::before,
        html.dark .calc-category.disabled .calc-list li::before,
        html.dark .calc-categories-grid-section.disabled .calc-categories-grid-section-subgrid-calc-card::before,
        html.dark .calc-categories-grid-section.disabled a::after,
        html.dark .calc-category.disabled a::after{
            background:#64748b;
            box-shadow:none;
            color:#64748b;
        }

        html.dark .calc-categories-tabs button:disabled,
        html.dark .calc-card.disabled a,
        html.dark .calc-category.disabled,
        html.dark .calc-categories-grid-section.disabled{
            background:#0f172a;
            border-color:#334155;
            box-shadow:none;
            color:#94a3b8;
        }

        html.dark .calc-categories-tabs button:not(:disabled){
            background:linear-gradient(180deg, #172033 0%, #111827 100%) !important;
            border:1px solid #334155 !important;
            box-shadow:0 6px 14px rgba(0,0,0,.22) !important;
            color:#cbd5e1 !important;
        }

        html.dark .calc-categories-tabs button:not(:disabled):hover{
            background:linear-gradient(180deg, #1e293b 0%, #172033 100%) !important;
            border-color:#475569 !important;
            box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
            color:#e2e8f0 !important;
        }

        html.dark .calc-categories-tabs button.active:not(:disabled){
            background:linear-gradient(135deg, #e11d48, #881337) !important;
            border-color:rgba(244,63,94,.58) !important;
            box-shadow:0 10px 24px rgba(136,19,55,.36) !important;
            color:#ffffff !important;
        }

        html.dark :is(.calc-category.disabled h2,.calc-categories-grid-section.disabled h3,.calc-category.disabled a,.calc-categories-grid-section.disabled a){
            color:#94a3b8;
        }

        html.dark :is([class$="-summary-title"],[class$="-chart-legend"],[class$="-chart-legend"] .legend-item,[class$="-chart-side"],
        [class$="-growth-legend"],[class$="-growth-legend"] span,[class$="-panel-head"] p,[class*="-result-box"] span){
            color:#cbd5e1 !important;
        }

        html.dark :is([class$="-summary"] span,[class*="-result-box"],[class*="-result-bottom"] > div){
            border-color:#334155 !important;
        }

        html.dark :is([class$="-summary"] .principal,[class$="-summary"] .interest,[class$="-summary"] .maturity){
            border:1px solid transparent;
            font-weight:600;
        }

        html.dark :is([class$="-summary"] .principal){
            background:#312e81 !important;
            border-color:#6366f1 !important;
            color:#e0e7ff !important;
        }

        html.dark :is([class$="-summary"] .interest){
            background:#14532d !important;
            border-color:#22c55e !important;
            color:#dcfce7 !important;
        }

        html.dark :is([class$="-summary"] .maturity,[class$="-summary"] .corpus){
            background:#78350f !important;
            border-color:#f59e0b !important;
            color:#fef3c7 !important;
        }

        html.dark :is([class*="-result-box"],[class$="-growth-chart-wrap"],[class$="-chart"]){
            background:#111827 !important;
            border-color:#334155 !important;
        }

        html.dark :is([class*="-result-bottom"] [class*="-result-box"],[class$="-chart"] [class*="-result-box"]){
            background:linear-gradient(180deg,#111827 0%,#0f172a 100%) !important;
            border:1px solid #334155 !important;
            box-shadow:0 8px 18px rgba(0,0,0,.28) !important;
        }

        html.dark :is([class*="-result-bottom"] [class*="-result-box"] span,[class$="-chart"] [class*="-result-box"] span){
            color:#cbd5e1 !important;
            opacity:1 !important;
        }

        html.dark :is([class*="-result-bottom"] [class*="-result-box"] strong,[class$="-chart"] [class*="-result-box"] strong,
        [class*="-result-bottom"] [class*="-result-box"] b,[class$="-chart"] [class*="-result-box"] b){
            color:#f8fafc !important;
            opacity:1 !important;
            text-shadow:none !important;
        }

        html.dark :is([class*="-result-box"] strong,[class*="-result-box"] b,[class$="-summary"] b,[class$="-summary"] strong){
            color:#f8fafc !important;
        }

        html.dark :is([class*="-result-box"].rose strong,[class*="-result-box"] .rose strong){
            color:#fda4af !important;
        }

        html.dark :is([class*="-result-box"].green strong,[class*="-result-box"].soft-green strong,[class*="-result-box"].blue strong,[class*="-result-box"].black strong,[class*="-result-box"] .green strong){
            color:#86efac !important;
        }

        html.dark :is([class*="-result-box"].amber strong,[class*="-result-box"] .amber strong){
            color:#fdba74 !important;
        }

        html.dark :is([class*="-result-box"].gold strong,[class*="-result-box"][class*="maturity"] strong,[class*="-result-box"][class*="corpus"] strong,[class*="-result-box"] .gold strong){
            color:#fcd34d !important;
        }

        html.dark :is([class*="-result-box"].pink strong,[class*="-result-box"] .pink strong){
            color:#f9a8d4 !important;
        }

        html.dark :is([class$="-related-pill"], [class$="-related-pill"]:visited){
            background:linear-gradient(135deg, #fb7185, #be123c) !important;
            border:1px solid rgba(251,113,133,.45) !important;
            box-shadow:0 8px 18px rgba(190,18,60,.28) !important;
            color:#ffffff !important;
        }

        html.dark :is([class$="-related-pill"]:hover,[class$="-related-pill"]:focus-visible){
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            box-shadow:0 10px 22px rgba(190,18,60,.34) !important;
            color:#ffffff !important;
            transform:translateY(-1px);
        }

        /* Dark-mode variant for oceanic blue tiles */
        html.dark .blue-related-pill, html.dark .blue-related-pill:visited{
            background:linear-gradient(135deg, #071438, #022a4d) !important;
            border:1px solid rgba(59,130,246,.28) !important;
            box-shadow:0 8px 18px rgba(2,52,120,.22) !important;
            color:#cfe8ff !important;
        }

        html.dark .blue-related-pill:hover, html.dark .blue-related-pill:focus-visible{
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            box-shadow:0 10px 22px rgba(190,18,60,.34) !important;
            color:#ffffff !important;
            transform:translateY(-1px);
        }

        /* Strongest dark-mode override for page tiles that use .item + .blue-related-pill */
        html.dark a.item.blue-related-pill,
        html.dark .item.blue-related-pill,
        html.dark a.item.blue-related-pill:visited{
            background:linear-gradient(135deg, #071438, #022a4d) !important;
            border:1px solid rgba(59,130,246,.28) !important;
            box-shadow:0 10px 24px rgba(2,52,120,.32) !important;
            color:#cfe8ff !important;
        }

        html.dark a.item.blue-related-pill:hover,
        html.dark a.item.blue-related-pill:focus-visible,
        html.dark .item.blue-related-pill:hover,
        html.dark .item.blue-related-pill:focus-visible{
            background:linear-gradient(135deg, #fb7185, #9f1239) !important;
            border-color:rgba(190,18,60,.38) !important;
            box-shadow:0 12px 26px rgba(190,18,60,.36) !important;
            color:#ffffff !important;
            transform:translateY(-2px);
        }

        html.dark :is([class$="-chart-legend"] .principal,[class$="-chart-legend"] .interest,[class$="-chart-legend"] .maturity,[class$="-growth-legend"] .invested,[class$="-growth-legend"] .value,[class$="-growth-legend"] .deposit,[class$="-growth-legend"] .contribution,[class$="-growth-legend"] .corpus){
            color:inherit !important;
        }

        @media print{
            html.dark{
                filter:none;
            }
        }
        html.dark{
            --bg-hero:linear-gradient(180deg,#111827,#020617);
        }