/* ==========================================================
   LOGOS
   ========================================================== */

.hv-brand-logo-wrap{
    display:flex !important;
    align-items:center !important;
}

.hv-brand-logo{
    display:block;
    width:auto;
    object-fit:contain;
}

.hv-brand-logo-header{
    max-width:185px;
    max-height:60px;
}

.hv-brand-logo-footer{
    max-width:230px;
    max-height:150px;
}


/* ==========================================================
   BADGES
   ========================================================== */

.status-badge{

    border-radius:
        999px !important;

}


/* ==========================================================
   HOME
   ========================================================== */

.topline{
background:var(--hv-dark) !important;
    color:#f4f6f1 !important;
}

.hero-shade{
background:
        linear-gradient(
            90deg,
            rgba(21,25,20,.94) 0%,
            rgba(32,37,29,.72) 45%,
            rgba(21,25,20,.16) 100%
        ) !important;
}

.eyebrow{
color:#dfe8d5 !important;
}

.eyebrow.dark{
color:var(--hv-green) !important;
}

.promise{
background:var(--hv-bg) !important;
}

.promise strong{
color:var(--hv-green) !important;
}

.category-section{
background:var(--hv-bg) !important;
}

.category-card{
border:
        1px solid rgba(68,92,50,.18);
}

.category-overlay{
background:
        linear-gradient(
            0deg,
            rgba(21,25,20,.94),
            rgba(32,37,29,.08) 72%
        ) !important;
}

.ingredients{
background:var(--hv-surface-2) !important;
}

.ingredient-card{
border:
        1px solid rgba(68,92,50,.16);

    box-shadow:
        0 12px 35px rgba(20,25,18,.06);
}

.ingredient-text small{
color:var(--hv-green) !important;
}

.feature-copy{
background:var(--hv-dark-2) !important;
}

.protein-section{
background:var(--hv-dark) !important;
    position:relative;
}

.protein-section::before{
content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at 22% 35%,
            rgba(88,114,63,.16),
            transparent 32%
        );

    pointer-events:none;
}

.chips span{
border-color:
        rgba(223,232,213,.34) !important;
}

.steps span{
color:var(--hv-green) !important;
}

.final-overlay{
background:
        linear-gradient(
            90deg,
            rgba(21,25,20,.94),
            rgba(68,92,50,.45)
        ) !important;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media(max-width:700px){

    .hv-brand-logo-header{
        max-width:145px;
        max-height:48px;
    }

    .hv-brand-logo-footer{
        max-width:190px;
    }

}