/* =========================================================
   GENERAL HELPERS
   ========================================================= */
.justify-text{
    text-align:justify;
}

.heatmap-full-width{
    width:100%;
}

/* =========================================================
   GENERAL IMAGE STYLING FOR SPOTLIGHT SECTIONS
   Keeps spotlight images nicely rounded and cropped.
   ========================================================= */
.wrapper.spotlight .image{
    border-radius:12px !important;
    overflow:hidden;
}

.wrapper.spotlight .image img{
    border-radius:0 !important;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* =========================================================
   TOP BANNER BLUE OVERRIDE
   Keep the Solid State angled transition shape
   ========================================================= */
#banner.banner-blue{
    background-color:#45558d !important;
    background-image:linear-gradient(135deg, #4c5c96 0%, #45558d 100%) !important;
    background-size:cover !important;
    background-position:center center !important;
    padding:10em 0 10.25em 0 !important;
    margin-bottom:-6.5em !important;
    position:relative;
    z-index:1;
}

#banner.banner-blue .inner{
    width:55em;
    max-width:calc(100% - 4em);
    margin:0 auto;
    text-align:center;
}

#banner.banner-blue h2{
    color:#ffffff;
    border-bottom:solid 2px rgba(255,255,255,0.2);
    display:inline-block;
    padding-bottom:0.35em;
    margin-bottom:0.8em;
}

#banner.banner-blue p{
    color:rgba(255,255,255,0.92);
    font-family:Raleway, Helvetica, sans-serif;
    font-size:1em;
    font-weight:200;
    letter-spacing:0.1em;
    line-height:1.8;
    text-transform:uppercase;
    margin-bottom:0;
}

#banner.banner-blue:after{
    content:"";
    position:absolute;
    left:0;
    bottom:-6.5em;
    width:100%;
    height:6.5em;
    background-repeat:no-repeat;
    background-size:100% 100%;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpolygon points='0,0 0,100 100,100' style='fill:%2345558d%3B' /%3E%3C/svg%3E");
    z-index:2;
}

#banner.banner-blue + .wrapper{
    margin-top:3em !important;
    z-index:3;
    position:relative;
}

#banner.banner-blue + .wrapper > .inner{
    padding-top:4em !important;
}

/* =========================================================
   CRYPTO PODIUM / RICH WALLETS TOOL SECTION
   ========================================================= */
.podium-card{
    margin-top:1em;
    padding:1em;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:0.8em;
    background:rgba(255,255,255,0.03);
    box-shadow:0 8px 18px rgba(0,0,0,.22);
}

.podium-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:1em;
}

.podium-header p{
    margin:0;
    opacity:.85;
    font-size:.92em;
}

.podium-date{
    display:inline-block;
    padding:.28em .7em;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    font-weight:700;
    font-size:.85em;
    white-space:nowrap;
}

.podium-wrap{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    align-items:end;
}

.podium-col{
    min-width:0;
    display:flex;
    flex-direction:column;
}

.podium-block{
    border-radius:16px;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 10px 22px rgba(0,0,0,.22);
    overflow:hidden;
    color:#fff;
    display:flex;
    flex-direction:column;
}

.podium-info{
    height:260px;
    padding:14px 12px 16px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}

.podium-thumb{
    width:116px;
    height:116px;
    margin:0 auto 2px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 8px 16px rgba(0,0,0,.18);
    background:rgba(255,255,255,.06);
    flex:0 0 auto;
}

.podium-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.podium-rank{
    font-weight:900;
    font-size:1.02em;
    line-height:1;
    letter-spacing:.3px;
}

.podium-symbol{
    font-weight:950;
    font-size:1.24em;
    line-height:1.05;
    letter-spacing:.3px;
}

.podium-name{
    font-size:.84em;
    opacity:.9;
    line-height:1.2;
}

.podium-cap{
    font-weight:850;
    font-size:.97em;
    line-height:1.15;
    word-break:break-word;
}

.podium-lower{
    border-top:1px solid rgba(255,255,255,.18);
    display:flex;
    flex-direction:column;
}

.podium-bar{
    height:var(--bar-h, 120px);
    display:flex;
    align-items:center;
    justify-content:center;
    padding:8px;
}

.podium-step{
    font-weight:950;
    font-size:1.95em;
    letter-spacing:.4px;
    line-height:1;
    color:#fff;
}

.podium-desc-box{
    min-height:118px;
    padding:10px 12px 14px;
    border-top:1px solid rgba(255,255,255,.12);
    display:flex;
    align-items:flex-start;
    justify-content:center;
}

.podium-desc{
    font-size:.86em;
    line-height:1.38;
    opacity:.96;
    text-align:justify;
    text-justify:inter-word;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:5;
            line-clamp:5;
}

.podium-btc{
    background:linear-gradient(180deg, rgba(255,223,90,.24), rgba(220,180,60,.32));
    --bar-h:220px;
}

.podium-eth{
    background:linear-gradient(180deg, rgba(96,177,255,.26), rgba(150,160,175,.35));
    --bar-h:145px;
}

.podium-xrp{
    background:linear-gradient(180deg, rgba(112,180,255,.20), rgba(231,120,120,.22));
    --bar-h:92px;
}

.podium-akt{
    background:linear-gradient(180deg, rgba(88,132,205,.22), rgba(60,89,136,.28));
    --bar-h:54px;
}

.podium-links{
    margin-top:12px;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:10px;
}

.podium-link{
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-height:44px;
    padding:.5em .7em;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.05);
    color:#fff;
    text-decoration:none;
    font-weight:700;
    font-size:.84em;
    line-height:1.15;
}

.podium-link:hover{
    background:rgba(255,255,255,.10);
    text-decoration:none;
}

/* =========================================================
   ISA / STOCKS HEATMAP SECTION
   ========================================================= */
.hm-topbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin:0.75em 0 1em;
}

.badge{
    display:inline-block;
    padding:.25em .65em;
    border-radius:999px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.15);
    font-weight:750;
    font-size:.85em;
    white-space:nowrap;
}

.heatmap-wrap{
    margin:1em 0 1.25em;
    padding:0.85em;
    border:1px solid rgba(255,255,255,.12);
    border-radius:.6em;
    background:rgba(255,255,255,.02);
}

.heatmap-grid{
    display:grid;
    grid-template-columns:repeat(12, minmax(0,1fr));
    gap:10px;
}

.hm-tile{
    border:1px solid rgba(255,255,255,.14);
    border-radius:.85em;
    padding:.8em .85em;
    text-decoration:none;
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    box-shadow:0 10px 22px rgba(0,0,0,.25);
    overflow:hidden;
    min-height:120px;
    -webkit-tap-highlight-color:transparent;
    pointer-events:auto;
    cursor:pointer;
    transition:transform .16s ease, background .16s ease, border-color .16s ease;
}

.hm-tile:hover{
    color:#fff;
    text-decoration:none;
    transform:translateY(-2px);
}

.hm-tile:focus{
    outline:2px solid rgba(255,255,255,.35);
    outline-offset:2px;
    color:#fff;
    text-decoration:none;
}

.span-aapl { grid-column: span 6; grid-row: span 2; min-height:185px; }
.span-msft { grid-column: span 3; grid-row: span 2; min-height:185px; }
.span-nvda { grid-column: span 3; grid-row: span 2; min-height:185px; }
.span-amzn { grid-column: span 4; grid-row: span 1; }
.span-meta { grid-column: span 4; grid-row: span 1; }
.span-goog { grid-column: span 4; grid-row: span 1; }
.span-tsla { grid-column: span 3; grid-row: span 1; }
.span-amd  { grid-column: span 3; grid-row: span 1; }
.span-avgo { grid-column: span 3; grid-row: span 1; }
.span-pltr { grid-column: span 3; grid-row: span 1; }

.hm-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:.6em;
}

.hm-left{
    min-width:0;
}

.hm-sym{
    font-weight:950;
    letter-spacing:.3px;
    font-size:1.08em;
    line-height:1.05;
    margin:0;
}

.hm-name{
    opacity:.85;
    font-size:.82em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    margin-top:.15em;
}

.hm-right{
    text-align:right;
    font-variant-numeric:tabular-nums;
    opacity:.98;
    white-space:nowrap;
}

.hm-price{
    font-weight:950;
    font-size:1.02em;
}

.hm-sub{
    opacity:.85;
    font-size:.8em;
    margin-top:.2em;
}

.hm-mid{
    margin-top:.55em;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:.6em;
    font-variant-numeric:tabular-nums;
}

.hm-pct{
    font-weight:950;
    font-size:1.12em;
    white-space:nowrap;
}

.hm-trend{
    font-weight:850;
    font-size:.86em;
    opacity:.95;
    white-space:nowrap;
}

.hm-yield{
    margin-top:.45em;
    font-size:.82em;
    opacity:.92;
    font-weight:700;
    white-space:nowrap;
}

.hm-sector{
    margin-top:.35em;
    font-size:.8em;
    opacity:.82;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hm-foot{
    margin-top:.55em;
    display:flex;
    justify-content:space-between;
    gap:.6em;
    font-size:.78em;
    opacity:.88;
}

.hm-foot span{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.hm-missing{
    opacity:.82;
    font-style:italic;
}

.bg-green{
    background:rgba(0, 200, 83, 0.20);
    border-color:rgba(0, 200, 83, 0.55);
}

.bg-red{
    background:rgba(255, 82, 82, 0.20);
    border-color:rgba(255, 82, 82, 0.55);
}

.bg-grey{
    background:rgba(160, 160, 160, 0.14);
    border-color:rgba(200, 200, 200, 0.22);
}

/* =========================================================
   RESPONSIVE BREAKPOINTS
   ========================================================= */
@media screen and (max-width: 1280px){
    #banner.banner-blue{
        padding:7em 0 10em 0 !important;
        margin-bottom:-6.5em !important;
    }

    #banner.banner-blue:after{
        bottom:-6.5em;
        height:6.5em;
    }
}

@media screen and (max-width: 980px){
    #banner.banner-blue{
        padding:12em 3em 8.5em 3em !important;
        margin-bottom:-4.75em !important;
    }

    #banner.banner-blue .inner{
        width:100%;
        max-width:100%;
    }

    #banner.banner-blue:after{
        bottom:-4.75em;
        height:4.75em;
    }

    .heatmap-grid{
        grid-template-columns:repeat(6, minmax(0,1fr));
        gap:10px;
    }

    .span-aapl{
        grid-column: span 6;
        grid-row: span 1;
        min-height:145px;
    }

    .span-msft,
    .span-nvda{
        grid-column: span 3;
        grid-row: span 1;
        min-height:145px;
    }

    .span-amzn,
    .span-meta,
    .span-goog{
        grid-column: span 3;
        grid-row: span 1;
    }

    .span-tsla,
    .span-amd,
    .span-avgo,
    .span-pltr{
        grid-column: span 3;
        grid-row: span 1;
    }

    .podium-info{
        height:245px;
    }

    .podium-thumb{
        width:100px;
        height:100px;
    }

    .podium-btc{ --bar-h: 185px; }
    .podium-eth{ --bar-h: 124px; }
    .podium-xrp{ --bar-h: 80px; }
    .podium-akt{ --bar-h: 48px; }
}

@media screen and (max-width: 736px){
    #banner.banner-blue{
        padding:5em 2em 5.5em 2em !important;
        margin-bottom:-2.5em !important;
    }

    #banner.banner-blue h2{
        font-size:1.5em;
    }

    #banner.banner-blue p{
        font-size:.8em;
        line-height:1.7;
    }

    #banner.banner-blue:after{
        bottom:-2.5em;
        height:2.5em;
    }

    .wrapper .inner{
        padding-left:1em;
        padding-right:1em;
    }

    .podium-card{
        padding:.55em;
        margin-top:.75em;
    }

    .podium-wrap{
        gap:8px;
        grid-template-columns:repeat(2, minmax(0,1fr));
        align-items:stretch;
    }

    .podium-links{
        gap:8px;
        grid-template-columns:repeat(2, minmax(0,1fr));
    }

    .podium-info{
        height:225px;
        width:100%;
        padding:10px 8px 12px;
        gap:7px;
    }

    .podium-thumb{
        width:92px;
        height:92px;
    }

    .podium-btc{ --bar-h: 132px; }
    .podium-eth{ --bar-h: 106px; }
    .podium-xrp{ --bar-h: 82px; }
    .podium-akt{ --bar-h: 62px; }

    .podium-desc-box{
        min-height:92px;
        padding:8px 8px 10px;
    }

    .podium-desc{
        font-size:.84em;
        line-height:1.35;
        -webkit-line-clamp:5;
                line-clamp:5;
    }
}

@media screen and (max-width: 520px){
    .heatmap-wrap{
        padding:0.7em;
    }

    .heatmap-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }

    .span-aapl,
    .span-msft,
    .span-nvda,
    .span-amzn,
    .span-meta,
    .span-goog,
    .span-tsla,
    .span-amd,
    .span-avgo,
    .span-pltr{
        grid-column:span 1;
        grid-row:span 1;
        min-height:120px;
    }

    .wrapper .inner{
        padding-left:.6em;
        padding-right:.6em;
    }

    .podium-card{
        padding:.4em;
        border-radius:.6em;
    }

    .podium-header{
        align-items:flex-start;
        flex-direction:column;
    }

    .podium-wrap{
        gap:6px;
    }

    .podium-links{
        gap:6px;
    }

    .podium-info{
        height:210px;
        padding:9px 6px 11px;
        gap:7px;
    }

    .podium-thumb{
        width:84px;
        height:84px;
        border-radius:16px;
    }

    .podium-desc-box{
        min-height:88px;
        padding:8px 6px 10px;
    }

    .podium-step{
        font-size:1.55em;
    }

    .podium-desc{
        font-size:.83em;
        line-height:1.34;
        -webkit-line-clamp:5;
                line-clamp:5;
    }
}

@media screen and (max-width: 340px){
    .heatmap-grid{
        grid-template-columns:1fr;
    }

    .span-aapl,
    .span-msft,
    .span-nvda,
    .span-amzn,
    .span-meta,
    .span-goog,
    .span-tsla,
    .span-amd,
    .span-avgo,
    .span-pltr{
        grid-column:span 1;
    }

    .wrapper .inner{
        padding-left:.35em;
        padding-right:.35em;
    }

    .podium-wrap{
        grid-template-columns:1fr;
        gap:5px;
    }

    .podium-links{
        grid-template-columns:1fr;
        gap:5px;
    }

    .podium-card{
        padding:.3em;
    }

    .podium-info{
        height:auto;
        min-height:175px;
    }

    .podium-thumb{
        width:88px;
        height:88px;
        border-radius:16px;
    }

    .podium-btc{ --bar-h: 122px; }
    .podium-eth{ --bar-h: 100px; }
    .podium-xrp{ --bar-h: 80px; }
    .podium-akt{ --bar-h: 60px; }

    .podium-desc-box{
        min-height:90px;
    }

    .podium-symbol{
        font-size:1.12em;
    }

    .podium-cap{
        font-size:.88em;
    }

    .podium-link{
        min-height:40px;
        font-size:.82em;
    }

    .podium-desc{
        font-size:.82em;
        line-height:1.32;
        -webkit-line-clamp:4;
                line-clamp:4;
    }



/* =========================================================
   DIVIDEND HEATMAP PROPORTIONS
   Add at END of heatmap.css
   ========================================================= */

.heatmap-grid-dividend{
    display:grid;
    grid-template-columns:repeat(12, minmax(0,1fr));
    gap:10px;
    align-items:stretch;
}

/* stronger visual hierarchy */
.span-div-xl{
    grid-column:span 4;
    grid-row:span 2;
    min-height:220px;
}

.span-div-lg{
    grid-column:span 4;
    grid-row:span 1;
    min-height:145px;
}

.span-div-md{
    grid-column:span 3;
    grid-row:span 1;
    min-height:130px;
}

.span-div-sm{
    grid-column:span 2;
    grid-row:span 1;
    min-height:118px;
}

/* make sure dividend tiles stay aligned cleanly */
.heatmap-grid-dividend .hm-tile{
    min-height:118px;
}

/* optional helper if some dividend text gets too wide */
.heatmap-grid-dividend .hm-name,
.heatmap-grid-dividend .hm-sector,
.heatmap-grid-dividend .hm-foot span{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media screen and (max-width: 980px){
    .heatmap-grid-dividend{
        grid-template-columns:repeat(6, minmax(0,1fr));
        gap:10px;
    }

    .span-div-xl{
        grid-column:span 6;
        grid-row:span 1;
        min-height:155px;
    }

    .span-div-lg{
        grid-column:span 3;
        grid-row:span 1;
        min-height:138px;
    }

    .span-div-md{
        grid-column:span 3;
        grid-row:span 1;
        min-height:126px;
    }

    .span-div-sm{
        grid-column:span 3;
        grid-row:span 1;
        min-height:118px;
    }
}

@media screen and (max-width: 520px){
    .heatmap-grid-dividend{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:8px;
    }

    .span-div-xl,
    .span-div-lg,
    .span-div-md,
    .span-div-sm{
        grid-column:span 1;
        grid-row:span 1;
        min-height:120px;
    }
}

@media screen and (max-width: 340px){
    .heatmap-grid-dividend{
        grid-template-columns:1fr;
    }

    .span-div-xl,
    .span-div-lg,
    .span-div-md,
    .span-div-sm{
        grid-column:span 1;
    }
}


}