/* Public Benefits family — web-only visual system. */
:root{
    --dp-benefit-bg:#050505;
    --dp-benefit-panel:#090909;
    --dp-benefit-line:rgba(255,255,255,.13);
    --dp-benefit-soft-line:rgba(255,255,255,.08);
    --dp-benefit-gold:#ffd700;
    --dp-benefit-copy:#f2efe9;
    --dp-benefit-muted:#97938c;
}

/* Benefits hub: preserve the editorial structure, use the supplied icon set. */
.dp-hub-body .dp-hub-hero-image{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:clamp(28px,4vw,64px)!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    background:#050505!important;
}
.dp-hub-body .dp-hub-hero-image img{
    width:82%!important;
    height:auto!important;
    max-width:720px!important;
    max-height:78%!important;
    object-fit:contain!important;
    object-position:center!important;
}
.dp-hub-body .dp-hub-row>img.dp-benefit-icon,
.dp-hub-body .dp-hub-row>.dp-benefit-icon-app{
    width:112px!important;
    height:112px!important;
    min-width:112px!important;
    min-height:112px!important;
    border:1px solid var(--dp-benefit-line)!important;
    background:#080808!important;
}
.dp-hub-body .dp-hub-row>img.dp-benefit-icon{
    padding:0!important;
    object-fit:cover!important;
    object-position:center!important;
    filter:none!important;
}
.dp-hub-body .dp-benefit-icon-app img{
    width:58px!important;
    height:58px!important;
    object-fit:contain!important;
}
.dp-hub-body .dp-hub-row{
    grid-template-columns:80px minmax(210px,.72fr) minmax(260px,1fr) 126px 190px!important;
    min-height:148px;
}
.dp-hub-body .dp-hub-row:hover .dp-benefit-icon{
    border-color:rgba(255,215,0,.38)!important;
}

/* Rewards and Refer a Friend share one bordered split hero. */
.dp-public-benefit-page .dp-benefit-detail-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    grid-template-rows:auto auto auto;
    column-gap:clamp(42px,6vw,96px);
    align-items:center;
    max-width:1392px;
    min-height:470px;
    margin:46px auto 52px;
    padding:clamp(42px,5.2vw,76px);
    border:1px solid var(--dp-benefit-line);
    background:radial-gradient(circle at 82% 16%,rgba(255,215,0,.045),transparent 31%),var(--dp-benefit-panel);
    box-sizing:border-box;
}
.dp-public-benefit-page .dp-benefit-detail-hero>span,
.dp-public-benefit-page .dp-benefit-detail-hero>h1,
.dp-public-benefit-page .dp-benefit-detail-hero>p{
    grid-column:1;
}
.dp-public-benefit-page .dp-benefit-detail-hero>span{
    align-self:end;
    margin:0 0 22px;
}
.dp-public-benefit-page .dp-benefit-detail-hero h1{
    max-width:780px;
    font-size:clamp(58px,6.1vw,94px);
}
.dp-public-benefit-page .dp-benefit-detail-hero p{
    max-width:670px;
    margin-top:32px;
    font-size:15px;
}
.dp-benefit-detail-icon{
    grid-column:2;
    grid-row:1/-1;
    width:100%;
    max-width:360px;
    aspect-ratio:1;
    margin:0;
    border:1px solid var(--dp-benefit-line);
    background:#080808;
    overflow:hidden;
}
.dp-benefit-detail-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Packages uses the same split composition while retaining live package data. */
.dp-packages-page .dp-packages{
    max-width:1392px;
    padding-top:46px;
}
.dp-packages-page .dp-benefit-card-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;
    gap:clamp(40px,6vw,92px);
    max-width:none;
    min-height:390px;
    margin:0 0 38px;
    padding:clamp(38px,5vw,68px);
    border:1px solid var(--dp-benefit-line);
    background:radial-gradient(circle at 82% 16%,rgba(255,215,0,.045),transparent 31%),var(--dp-benefit-panel);
}
.dp-packages-page .dp-benefit-card-hero-copy>p{
    max-width:600px;
    margin:0;
    color:var(--dp-benefit-muted);
    font-size:17px;
    line-height:1.65;
}
.dp-packages-page .dp-benefit-card-hero-icon{
    width:300px;
    aspect-ratio:1;
    margin:0;
    border:1px solid var(--dp-benefit-line);
    background:#080808;
    overflow:hidden;
}
.dp-packages-page .dp-benefit-card-hero-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}
.dp-packages-page .dp-packages-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
}

/* Gift Cards now follows the same hero instead of the generated voucher block. */
.gift-public-page .gift-hero{
    display:grid;
    grid-template-columns:minmax(0,1fr) 300px;
    align-items:center;
    gap:clamp(40px,6vw,92px);
    min-height:390px;
    padding:clamp(38px,5vw,68px);
    border:1px solid var(--dp-benefit-line);
    background:radial-gradient(circle at 82% 16%,rgba(255,215,0,.045),transparent 31%),var(--dp-benefit-panel);
    text-align:left;
}
.gift-public-page .gift-hero:after{content:none!important;display:none!important}
.gift-public-page .gift-benefit-hero-copy{min-width:0}
.gift-public-page .gift-hero h1{
    max-width:780px;
    margin:14px 0 24px;
    font-size:clamp(52px,5.5vw,86px);
    font-weight:300;
    letter-spacing:-.055em;
}
.gift-public-page .gift-hero p{
    max-width:680px;
    margin:0;
    color:var(--dp-benefit-muted);
    font-size:15px;
}
.gift-public-page .gift-benefit-hero-icon{
    width:300px;
    aspect-ratio:1;
    margin:0;
    border:1px solid var(--dp-benefit-line);
    background:#080808;
    overflow:hidden;
}
.gift-public-page .gift-benefit-hero-icon img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Client App: retain the real phone screen, align the hero with the family. */
.dp-client-app-page .dp-benefit-app-hero{
    max-width:1500px;
    min-height:540px;
    margin:46px auto 0;
    padding:clamp(42px,5vw,72px);
    border:1px solid var(--dp-benefit-line);
    background:radial-gradient(circle at 82% 16%,rgba(255,215,0,.045),transparent 31%),var(--dp-benefit-panel);
    box-sizing:border-box;
}
.dp-client-app-page .dp-benefit-app-hero .dp-app-hero-copy>span{
    color:var(--dp-benefit-gold);
}

@media(max-width:1150px){
    .dp-hub-body .dp-hub-row{
        grid-template-columns:55px minmax(180px,.75fr) 1fr 98px 155px!important;
    }
    .dp-hub-body .dp-hub-row>img.dp-benefit-icon,
    .dp-hub-body .dp-hub-row>.dp-benefit-icon-app{
        width:92px!important;
        height:92px!important;
        min-width:92px!important;
        min-height:92px!important;
    }
}

@media(max-width:900px){
    .dp-hub-body .dp-hub-row{
        grid-template-columns:45px minmax(0,1fr) 92px!important;
    }
    .dp-hub-body .dp-hub-row>img.dp-benefit-icon,
    .dp-hub-body .dp-hub-row>.dp-benefit-icon-app{
        width:86px!important;
        height:86px!important;
        min-width:86px!important;
        min-height:86px!important;
    }
    .dp-public-benefit-page .dp-benefit-detail-hero,
    .dp-packages-page .dp-benefit-card-hero,
    .gift-public-page .gift-hero{
        grid-template-columns:1fr 240px;
        gap:34px;
        min-height:0;
        padding:34px;
    }
    .dp-benefit-detail-icon,
    .dp-packages-page .dp-benefit-card-hero-icon,
    .gift-public-page .gift-benefit-hero-icon{
        width:240px;
    }
}

@media(max-width:700px){
    .dp-public-benefit-page .dp-benefit-detail-hero,
    .dp-packages-page .dp-benefit-card-hero,
    .gift-public-page .gift-hero{
        grid-template-columns:1fr;
        gap:28px;
        margin-top:22px;
        padding:26px 22px;
    }
    .dp-public-benefit-page .dp-benefit-detail-hero>span,
    .dp-public-benefit-page .dp-benefit-detail-hero>h1,
    .dp-public-benefit-page .dp-benefit-detail-hero>p{
        grid-column:1;
    }
    .dp-public-benefit-page .dp-benefit-detail-hero>span{margin-bottom:0}
    .dp-public-benefit-page .dp-benefit-detail-hero h1{font-size:clamp(46px,13vw,64px)}
    .dp-public-benefit-page .dp-benefit-detail-hero p{margin-top:0;font-size:14px}
    .dp-benefit-detail-icon{
        grid-column:1;
        grid-row:auto;
    }
    .dp-benefit-detail-icon,
    .dp-packages-page .dp-benefit-card-hero-icon,
    .gift-public-page .gift-benefit-hero-icon{
        width:min(100%,280px);
        justify-self:start;
    }
    .dp-packages-page .dp-packages{padding:22px 16px 58px}
    .dp-packages-page .dp-packages-grid{grid-template-columns:1fr}
    .gift-public-page .gift-hero h1{font-size:clamp(44px,13vw,60px)}
    .dp-client-app-page .dp-benefit-app-hero{
        margin-top:22px;
        padding:28px 20px;
    }
}

@media(max-width:480px){
    .dp-hub-body .dp-hub-row{
        grid-template-columns:32px minmax(0,1fr) 76px!important;
        gap:12px;
    }
    .dp-hub-body .dp-hub-row>img.dp-benefit-icon,
    .dp-hub-body .dp-hub-row>.dp-benefit-icon-app{
        width:72px!important;
        height:72px!important;
        min-width:72px!important;
        min-height:72px!important;
    }
    .dp-hub-body .dp-benefit-icon-app img{
        width:38px!important;
        height:38px!important;
    }
}