:root {
    --navy: #0b2e67;
    --blue: #0878de;
    --teal: #11b8c7;
    --muted: #596a80;
    --line: rgba(11,46,103,.055);
    --font-h: 'Manrope',system-ui,sans-serif;
    --font: 'Inter',system-ui,sans-serif
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    font-family: var(--font);
    color: var(--muted);
    background: #fff
}

a {
    text-decoration: none;
    color: inherit
}

img {
    max-width: 100%;
    display: block
}

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 82px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 34px;
    padding: 0 72px;
    background: rgba(255,255,255,.82);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid rgba(11,46,103,.04)
}

    .site-header img {
        height: 42px
    }

    .site-header nav {
        margin-left: auto;
        display: flex;
        gap: 30px;
        color: var(--navy);
        font-weight: 800;
        font-size: 14px
    }

.nav-cta {
    height: 42px;
    padding: 0 18px;
    display: flex;
    align-items: center;
    border-radius: 999px;
    background: var(--blue);
    color: #fff;
    font-weight: 900
}

.site-footer {
    padding: 48px 72px;
    background: #f7fbff;
    color: var(--navy);
    display: flex;
    justify-content: space-between;
    align-items: center
}

    .site-footer img {
        height: 36px
    }

.hero {
    min-height: 760px;
    padding-top: 82px;
    overflow: hidden
}

.hero-inner {
    width: min(1320px,calc(100% - 112px));
    margin: 0 auto;
    min-height: 678px;
    display: grid;
    grid-template-columns: 46% 54%;
    align-items: center
}

.eyebrow {
    margin: 0 0 18px;
    font-family: var(--font-h);
    font-weight: 900;
    font-size: 14px;
    line-height: 1;
    color: var(--blue);
    letter-spacing: .02em
}

.hero h1, .section-intro h2, .ingredient h2 {
    margin: 0;
    font-family: var(--font-h);
    color: var(--navy);
    font-weight: 850;
    letter-spacing: -.045em
}

.hero h1 {
    font-size: clamp(54px,4.6vw,72px);
    line-height: 1.08
}

.hero-copy > p:not(.eyebrow) {
    font-size: 18px;
    line-height: 1.55;
    color: #344966;
    font-weight: 550;
    margin: 28px 0 0
}

.hero-actions {
    display: flex;
    gap: 24px;
    margin-top: 34px
}

.btn {
    height: 58px;
    min-width: 230px;
    padding: 0 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 13px
}

.primary {
    background: var(--blue);
    color: #fff;
    box-shadow: 0 18px 32px rgba(0,110,230,.22)
}

.secondary {
    border: 2px solid rgba(8,120,222,.34);
    color: var(--blue);
    background: #fff
}

.trust {
    display: flex;
    gap: 28px;
    margin-top: 60px;
    color: var(--navy);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase
}

.hero-media {
    height: 630px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.hero-bg {
    position: absolute;
    right: 50px;
    width: 128%;
    max-width: none
}

.hero-product {
    position: relative;
    z-index: 2;
    height: 590px;
    object-fit: contain;
    filter: drop-shadow(0 34px 58px rgba(11,46,103,.20))
}

.section-band {
    position: relative;
    overflow: hidden;
    padding: 52px 0;
    background: linear-gradient(90deg,#f7fbff 0%,#fff 48%,#f8fcff 100%);
    border-top: 1px solid rgba(11,46,103,.035)
}

.section-path {
    position: absolute;
    left: 54px;
    top: -82px;
    bottom: -58px;
    width: 82px;
    pointer-events: none;
    z-index: 1;
    opacity: .84
}

    .section-path svg {
        width: 100%;
        height: 100%;
        overflow: visible
    }

    .section-path path {
        fill: none;
        stroke: #8ecbff;
        stroke-width: 1.7;
        opacity: .72
    }

    .section-path span {
        position: absolute;
        left: 12px;
        top: 92px;
        width: 58px;
        height: 86px;
        transform: rotate(-8deg);
        filter: drop-shadow(0 10px 16px rgba(8,120,222,.13))
    }

    .section-path img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.section-grid {
    width: min(1510px,calc(100% - 150px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px 1fr;
    gap: 62px;
    align-items: center;
    position: relative;
    z-index: 2
}

.section-intro {
    padding-left: 48px
}

    .section-intro h2 {
        font-size: 32px;
        line-height: 1.18
    }

    .section-intro p:not(.eyebrow) {
        font-size: 16px;
        line-height: 1.55;
        font-weight: 600;
        margin: 22px 0 0
    }

.outline-btn, .small-btn {
    margin-top: 28px;
    height: 50px;
    min-width: 220px;
    border-radius: 5px;
    border: 2px solid rgba(8,120,222,.28);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900
}

.small-btn {
    background: var(--blue);
    color: #fff;
    border: 0;
    min-width: 230px;
    height: 42px
}

.clinical-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px
}

    .clinical-cards button {
        height: 238px;
        border: 1px solid var(--line);
        background: rgba(255,255,255,.96);
        border-radius: 13px;
        box-shadow: 0 14px 32px rgba(11,46,103,.07);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 30px 22px 25px
    }

    .clinical-cards i {
        font-style: normal;
        font-size: 58px;
        color: var(--blue);
        margin-bottom: 18px
    }

    .clinical-cards strong {
        font-family: var(--font-h);
        font-size: 22px;
        line-height: 1.15;
        color: var(--navy);
        font-weight: 850
    }

    .clinical-cards b {
        margin-top: auto;
        color: var(--blue);
        font-size: 12px
    }

.tech-cards {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 25px
}

    .tech-cards article {
        position: relative;
        overflow: hidden;
        border-radius: 13px;
        min-height: 255px;
        padding: 30px 28px 24px;
        color: #fff;
        box-shadow: 0 14px 32px rgba(11,46,103,.12)
    }

        .tech-cards article:before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .48;
            background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.22) 0 1px,transparent 2px) 0 0/18px 18px,linear-gradient(135deg,transparent 0 46%,rgba(255,255,255,.12) 47% 61%,transparent 62%),radial-gradient(circle at 85% 18%,rgba(255,255,255,.22),transparent 34%)
        }

    .tech-cards h3, .tech-cards i, .tech-cards p, .tech-cards a {
        position: relative
    }

    .tech-cards h3 {
        font-family: var(--font-h);
        font-size: 24px;
        line-height: 1.08;
        margin: 0 0 28px
    }

    .tech-cards i {
        font-style: normal;
        font-size: 62px
    }

    .tech-cards p {
        color: rgba(255,255,255,.78);
        font-size: 14px;
        font-weight: 600
    }

    .tech-cards a {
        font-size: 12px;
        font-weight: 900
    }

.bio {
    background: linear-gradient(145deg,#0853b9,#0b74d5)
}

.dry {
    background: linear-gradient(145deg,#02a5aa,#13c8c0)
}

.odor {
    background: linear-gradient(145deg,#078ad6,#11b9e3)
}

.skin {
    background: linear-gradient(145deg,#4aa867,#78bf86)
}

.products-inner {
    width: min(1530px,calc(100% - 130px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px 48px 1fr 48px;
    gap: 18px;
    align-items: center;
    position: relative;
    z-index: 2
}

.product-viewport {
    overflow: hidden;
    min-width: 0
}

.product-track {
    display: flex;
    gap: 18px;
    transition: transform .35s cubic-bezier(.22,.61,.36,1)
}

.product-card {
    flex: 0 0 210px;
    min-height: 224px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255,255,255,.91);
    box-shadow: 0 13px 32px rgba(11,46,103,.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 16px 15px;
    text-align: center
}

    .product-card div {
        height: 143px;
        display: flex;
        align-items: flex-end
    }

    .product-card img {
        height: 138px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 14px 18px rgba(11,46,103,.08))
    }

    .product-card h3 {
        margin: 0;
        font-family: var(--font-h);
        font-size: 14px;
        line-height: 1.15;
        color: var(--navy);
        font-weight: 900
    }

    .product-card p {
        margin: 7px 0 0;
        font-size: 13px;
        color: #8591a1
    }

.carousel-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(11,46,103,.12);
    background: #fff;
    box-shadow: 0 12px 26px rgba(11,46,103,.07);
    font-size: 32px;
    color: var(--navy)
}

.dots {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 10px
}

    .dots span {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d6e1ec
    }

    .dots .is-active {
        background: var(--blue)
    }

.ingredient {
    position: relative;
    padding: 36px 0 38px
}

.ingredient-panel {
    width: min(1620px,calc(100% - 84px));
    margin: 0 auto;
    min-height: 206px;
    display: grid;
    grid-template-columns: 430px 1fr 460px;
    align-items: center;
    border-radius: 14px;
    border: 1px solid rgba(11,46,103,.045);
    background: radial-gradient(circle at 13% 43%,rgba(183,224,255,.55),transparent 30%),linear-gradient(90deg,rgba(239,248,255,.97),rgba(255,255,255,.84) 44%,rgba(248,252,255,.95));
    box-shadow: 0 16px 42px rgba(11,46,103,.05);
    overflow: hidden
}

.molecules {
    height: 206px
}

    .molecules img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.ingredient-copy h2 {
    font-size: 32px
}

.ingredient-copy p {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.55
}

.ingredient-copy a {
    color: var(--blue);
    font-size: 12px;
    font-weight: 900
}

.ingredient-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 58px
}

    .ingredient-pager button {
        border: 0;
        background: transparent;
        font-family: var(--font-h);
        font-size: 18px;
        color: #8a95a5;
        font-weight: 800
    }

    .ingredient-pager .is-active {
        color: var(--blue);
        font-size: 22px
    }

    .ingredient-pager .circle {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 12px 28px rgba(11,46,103,.075);
        font-size: 34px;
        color: var(--navy)
    }

.academy-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 34px
}

    .academy-cards article {
        border-radius: 10px;
        overflow: hidden;
        background: #fff;
        border: 1px solid var(--line);
        box-shadow: 0 14px 34px rgba(11,46,103,.06)
    }

    .academy-cards img {
        height: 118px;
        width: 100%;
        object-fit: cover
    }

    .academy-cards div {
        padding: 18px 24px 20px;
        position: relative
    }

    .academy-cards span {
        position: absolute;
        top: -22px;
        left: 21px;
        background: #fff;
        border-radius: 999px;
        padding: 7px 13px;
        color: var(--blue);
        font-size: 10px;
        font-weight: 900
    }

    .academy-cards h3 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 17px;
        line-height: 1.25
    }

    .academy-cards p {
        font-size: 13px;
        color: #7f8b9b
    }

.bottom-panel {
    position: relative;
    padding: 0 0 42px;
    background: #fff
}

.bottom-grid {
    width: min(1510px,calc(100% - 150px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px 1fr;
    gap: 24px 62px;
    position: relative;
    z-index: 2
}

.side-block {
    padding-left: 48px
}

    .side-block h2 {
        font-family: var(--font-h);
        color: var(--navy);
        font-size: 26px;
        line-height: 1.15;
        margin: 0
    }

.review-intro h2 {
    font-size: 36px
}

.review-intro span {
    color: #ffb900;
    font-size: 20px
}

.review-card, .map-card, .newsletter {
    background: rgba(255,255,255,.92);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    min-height: 108px
}

.review-card {
    display: grid;
    grid-template-columns: 80px 1fr 180px;
    align-items: center;
    padding: 24px 34px
}

.quote {
    font-size: 88px;
    color: #d4e4f2
}

.review-card blockquote {
    margin: 0;
    font-size: 22px;
    color: #687386;
    font-weight: 600
}

.review-card b {
    color: var(--navy)
}

.review-card div {
    display: flex;
    gap: 24px;
    align-items: center;
    color: #9aa6b5
}

.review-card strong {
    color: var(--blue)
}

.map-card {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    overflow: hidden
}

    .map-card .search {
        margin: 26px 24px 12px;
        height: 48px;
        border-radius: 10px;
        background: #fff;
        box-shadow: 0 10px 24px rgba(11,46,103,.08);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22px;
        color: #a0a9b5
    }

    .map-card a {
        padding-left: 30px;
        color: var(--blue);
        font-size: 12px;
        font-weight: 900
    }

    .map-card img {
        height: 150px;
        width: 100%;
        object-fit: cover;
        grid-row: 1/3;
        grid-column: 2
    }

.newsletter {
    padding: 28px 34px
}

    .newsletter div {
        display: flex;
        max-width: 620px
    }

    .newsletter input[type=email] {
        height: 52px;
        flex: 1;
        border: 1px solid var(--line);
        border-radius: 6px 0 0 6px;
        padding: 0 24px
    }

    .newsletter button {
        height: 52px;
        width: 128px;
        border: 0;
        border-radius: 0 6px 6px 0;
        background: var(--blue);
        color: #fff;
        font-weight: 900
    }

    .newsletter label {
        display: block;
        margin-top: 14px;
        color: #9aa6b5;
        font-size: 12px
    }

.daily-steps {
    padding: 84px 0;
    background: radial-gradient(circle at 24% 50%,rgba(34,199,216,.15),transparent 28%),linear-gradient(120deg,#092f3b,#073846 52%,#0b4d5b);
    color: #fff
}

.daily-inner {
    width: min(1200px,calc(100% - 72px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 88px;
    align-items: center
}

    .daily-inner strong {
        display: block;
        color: #d7f7ff;
        font-family: var(--font-h);
        font-size: clamp(84px,9vw,142px);
        line-height: .85
    }

    .daily-inner span {
        display: block;
        margin-top: 22px;
        font-family: var(--font-h);
        font-size: clamp(23px,2.6vw,42px);
        letter-spacing: .22em
    }

    .daily-inner p {
        font-size: 22px;
        line-height: 1.45;
        color: rgba(255,255,255,.86)
    }

@media(max-width:991px) {
    .site-header {
        padding: 0 24px
    }

        .site-header nav {
            display: none
        }

    .hero-inner, .section-grid, .products-inner, .ingredient-panel, .bottom-grid, .daily-inner {
        grid-template-columns: 1fr;
        width: calc(100% - 42px)
    }

    .hero-media {
        height: 420px
    }

    .hero-product {
        height: 360px
    }

    .section-path {
        display: none
    }

    .section-intro {
        padding-left: 0
    }

    .clinical-cards, .tech-cards, .academy-cards {
        grid-template-columns: 1fr 1fr
    }

    .products-inner {
        gap: 20px
    }

    .carousel-btn {
        display: none
    }

    .product-viewport {
        overflow-x: auto
    }

    .product-track {
        transform: none !important
    }

    .ingredient-panel {
        display: block
    }

    .ingredient-pager {
        padding: 28px;
        justify-content: flex-start
    }

    .bottom-grid {
        gap: 24px
    }

    .side-block {
        padding-left: 0
    }

    .map-card {
        grid-template-columns: 1fr
    }

        .map-card img {
            grid-row: auto;
            grid-column: auto
        }

    .daily-inner {
        gap: 36px
    }
}

@media(max-width:560px) {
    .clinical-cards, .tech-cards, .academy-cards {
        grid-template-columns: 1fr
    }

    .hero-actions, .newsletter div {
        display: block
    }

    .btn, .newsletter input[type=email], .newsletter button {
        width: 100%;
        margin-bottom: 10px
    }

    .product-card {
        flex-basis: 200px
    }

    .daily-inner p {
        font-size: 18px
    }
}
/* ========================================================= v0.3.9 — Remove reviews, working pharmacy, footer ========================================================= */
.academy-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    height: 100%
}

    .academy-card-link article {
        height: 100%;
        transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease
    }

    .academy-card-link:hover article {
        transform: translateY(-3px);
        box-shadow: 0 18px 42px rgba(11,46,103,.095);
        border-color: rgba(8,120,222,.16)
    }

    .academy-card-link:focus-visible {
        outline: 3px solid rgba(8,120,222,.35);
        outline-offset: 4px;
        border-radius: 12px
    }

.pharmacy-news-panel {
    position: relative;
    padding: 52px 0 54px;
    background: #fff;
    overflow: hidden
}

.pharmacy-news-grid {
    width: min(1510px,calc(100% - 150px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px 1fr;
    gap: 28px 62px;
    position: relative;
    z-index: 2
}

.pharmacy-news-panel .section-path {
    top: -82px;
    bottom: -58px
}

.pharmacy-news-panel .side-block {
    padding-left: 48px
}

.map-card--live {
    display: grid;
    grid-template-columns: minmax(0,.72fr) minmax(360px,1.28fr);
    grid-template-rows: 72px 1fr;
    min-height: 178px;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: 0 14px 34px rgba(11,46,103,.045)
}

.pharmacy-search-row {
    margin: 24px 24px 0;
    height: 48px;
    display: flex;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11,46,103,.08);
    overflow: hidden
}

    .pharmacy-search-row input {
        flex: 1;
        border: 0;
        outline: 0;
        padding: 0 22px;
        color: var(--navy);
        font-weight: 650
    }

        .pharmacy-search-row input::placeholder {
            color: #a0a9b5
        }

    .pharmacy-search-row button {
        width: 58px;
        border: 0;
        background: #fff;
        color: #8aa2bd;
        font-size: 24px;
        cursor: pointer
    }

.use-location {
    align-self: start;
    margin: 8px 24px 0;
    border: 0;
    background: transparent;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900;
    text-align: left;
    cursor: pointer
}

.map-card--live iframe {
    grid-column: 2;
    grid-row: 1/3;
    width: 100%;
    height: 100%;
    min-height: 178px;
    border: 0;
    filter: saturate(.9) brightness(1.03)
}

.newsletter-message {
    margin: 10px 0 0 !important;
    font-size: 12px;
    color: var(--blue) !important;
    font-weight: 800 !important
}

.site-footer--dark {
    display: block;
    padding: 34px 72px 24px;
    background: linear-gradient(135deg,#062f68 0%,#073d78 52%,#062c61 100%);
    color: #fff
}

.footer-inner {
    width: min(1320px,calc(100% - 0px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.75fr repeat(4,.9fr) 1fr;
    gap: 44px;
    align-items: start
}

.footer-brand img {
    height: 38px;
    width: auto;
    filter: brightness(0) invert(1)
}

.footer-brand p {
    margin: 6px 0 0;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em
}

.footer-col h4 {
    margin: 0 0 8px;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em
}

.footer-col a {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 12px;
    line-height: 1.55;
    text-decoration: none
}

    .footer-col a:hover {
        color: #fff
    }

.footer-social {
    display: flex;
    gap: 14px;
    justify-content: flex-end
}

    .footer-social a {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: #08356e;
        font-weight: 900;
        text-decoration: none;
        font-family: var(--font-h)
    }

.footer-bottom {
    width: min(1320px,calc(100% - 0px));
    margin: 28px auto 0;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.16);
    display: flex;
    justify-content: space-between;
    gap: 24px;
    color: rgba(255,255,255,.72);
    font-size: 12px
}

    .footer-bottom p {
        margin: 0
    }

    .footer-bottom div {
        display: flex;
        gap: 34px
    }

    .footer-bottom a {
        color: rgba(255,255,255,.78);
        text-decoration: none
    }

@media(max-width:991px) {
    .pharmacy-news-grid {
        width: calc(100% - 42px);
        grid-template-columns: 1fr;
        gap: 24px
    }

    .pharmacy-news-panel .side-block {
        padding-left: 0
    }

    .map-card--live {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto
    }

        .map-card--live iframe {
            grid-column: auto;
            grid-row: auto;
            height: 230px
        }

    .footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px
    }

    .footer-social {
        justify-content: flex-start
    }

    .footer-bottom {
        display: block
    }

        .footer-bottom div {
            margin-top: 12px
        }

    .site-footer--dark {
        padding: 34px 28px 24px
    }
}

@media(max-width:560px) {
    .footer-inner {
        grid-template-columns: 1fr
    }

    .newsletter div {
        display: block
    }

    .newsletter input[type=email], .newsletter button {
        width: 100%;
        border-radius: 6px;
        margin: 0 0 10px
    }

    .map-card--live iframe {
        height: 210px
    }
}
/* ========================================================= v0.3.10 — Clickable elements, final logo, improved path system ========================================================= */
.site-header .brand img {
    height: 38px;
    width: auto;
    max-width: 245px;
    object-fit: contain
}

.site-footer--dark .footer-brand img {
    height: 38px;
    width: auto;
    max-width: 245px;
    object-fit: contain;
    filter: none
}

.footer-brand p {
    margin-top: 8px
}

.section-path {
    left: 48px;
    top: -96px;
    bottom: -72px;
    width: 78px;
    opacity: .76
}

    .section-path path {
        stroke: #9bd4ff;
        stroke-width: 1.35;
        opacity: .62
    }

    .section-path__foot, .section-path span {
        left: 18px;
        top: 116px;
        width: 43px;
        height: 65px;
        transform: rotate(-7deg);
        filter: drop-shadow(0 10px 14px rgba(8,120,222,.10));
        opacity: .88
    }

        .section-path__foot::before {
            content: "";
            position: absolute;
            inset: 12px;
            border-radius: 999px;
            background: rgba(8,120,222,.08);
            filter: blur(8px);
            z-index: -1
        }

    .section-path img {
        width: 100%;
        height: 100%;
        object-fit: contain
    }

.section-band:nth-of-type(even) .section-path__foot, .section-band:nth-of-type(even) .section-path span {
    top: 104px;
    transform: rotate(-4deg)
}

.ingredient .section-path__foot, .ingredient .section-path span {
    top: 96px
}

.products .section-path__foot, .products .section-path span {
    top: 108px
}

.pharmacy-news-panel .section-path__foot, .pharmacy-news-panel .section-path span {
    top: 102px
}

.clinical-cards a {
    height: 238px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.96);
    border-radius: 13px;
    box-shadow: 0 14px 32px rgba(11,46,103,.07);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 30px 22px 25px;
    text-align: center;
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

    .clinical-cards a:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 38px rgba(11,46,103,.09);
        border-color: rgba(8,120,222,.16)
    }

    .clinical-cards a:focus-visible, .product-card:focus-visible, .tech-cards a:focus-visible, .ingredient-copy a:focus-visible {
        outline: 3px solid rgba(8,120,222,.28);
        outline-offset: 4px
    }

    .clinical-cards a i {
        font-style: normal;
        font-size: 58px;
        color: var(--blue);
        margin-bottom: 18px
    }

    .clinical-cards a strong {
        font-family: var(--font-h);
        font-size: 22px;
        line-height: 1.15;
        color: var(--navy);
        font-weight: 850
    }

    .clinical-cards a b {
        margin-top: auto;
        color: var(--blue);
        font-size: 12px
    }

.tech-cards article a, .ingredient-copy a {
    cursor: pointer;
    text-decoration: none
}

    .tech-cards article a:hover, .ingredient-copy a:hover {
        text-decoration: underline;
        text-underline-offset: 4px
    }

.small-btn:hover {
    filter: brightness(.98);
    transform: translateY(-1px)
}

.product-card {
    color: inherit;
    text-decoration: none;
    transition: transform .18s ease,box-shadow .18s ease,border-color .18s ease
}

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px rgba(11,46,103,.08);
        border-color: rgba(8,120,222,.15)
    }

        .product-card:hover h3 {
            color: var(--blue)
        }

@media(max-width:991px) {
    .site-header .brand img {
        height: 32px;
        max-width: 210px
    }

    .section-path {
        display: none
    }

    .clinical-cards a {
        height: 220px
    }

    .footer-brand img {
        height: 34px !important
    }
}

.section-pulse {
    animation: sectionPulse .9s ease
}

@keyframes sectionPulse {
    0% {
        box-shadow: inset 0 0 0 0 rgba(8,120,222,0)
    }

    35% {
        box-shadow: inset 0 0 0 9999px rgba(8,120,222,.025)
    }

    100% {
        box-shadow: inset 0 0 0 0 rgba(8,120,222,0)
    }
}
/* v0.4.0 homepage freeze: remove visible section paths and lock hero background position */
.section-path {
    display: none !important
}

.hero-bg {
    right: 50px !important
}
/* v0.4.0 page templates */
.page-hero {
    padding: 150px 72px 76px;
    background: linear-gradient(90deg,#f7fbff 0%,#fff 58%,#f8fcff 100%);
    border-bottom: 1px solid rgba(11,46,103,.04)
}

    .page-hero > div {
        width: min(1200px,100%);
        margin: 0 auto
    }

    .page-hero h1 {
        margin: 0;
        font-family: var(--font-h);
        font-size: clamp(48px,5vw,76px);
        line-height: 1.05;
        letter-spacing: -.055em;
        color: var(--navy);
        font-weight: 850
    }

    .page-hero p:not(.eyebrow) {
        max-width: 620px;
        margin: 24px 0 0;
        font-size: 19px;
        line-height: 1.55;
        color: #506178;
        font-weight: 600
    }

.product-list-page {
    padding: 70px 72px;
    background: #fff
}

.product-list-grid {
    width: min(1250px,100%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px
}

.product-list-card {
    min-height: 310px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 14px 34px rgba(11,46,103,.055);
    padding: 18px 22px 24px;
    text-align: center;
    transition: .18s ease
}

    .product-list-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 45px rgba(11,46,103,.09)
    }

    .product-list-card div {
        height: 180px;
        display: grid;
        place-items: center
    }

    .product-list-card img {
        height: 170px;
        width: auto;
        object-fit: contain
    }

    .product-list-card span {
        font-size: 12px;
        color: var(--blue);
        font-weight: 900;
        text-transform: uppercase
    }

    .product-list-card h2 {
        font-family: var(--font-h);
        font-size: 20px;
        line-height: 1.15;
        margin: 12px 0 0;
        color: var(--navy)
    }

    .product-list-card p {
        margin: 8px 0 0;
        color: #8791a1;
        font-weight: 700
    }

.product-detail-hero {
    min-height: 720px;
    padding: 130px 72px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: min(1320px,calc(100% - 0px));
    margin: 0 auto
}

.product-detail-copy h1 {
    margin: 0;
    font-family: var(--font-h);
    font-size: clamp(52px,5vw,82px);
    line-height: 1.02;
    color: var(--navy);
    letter-spacing: -.06em
}

.product-detail-copy > p:not(.eyebrow) {
    max-width: 560px;
    margin: 24px 0 0;
    color: #506178;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600
}

.product-detail-actions {
    display: flex;
    gap: 18px;
    margin-top: 34px
}

.product-detail-visual {
    height: 580px;
    display: grid;
    place-items: center;
    background: radial-gradient(circle,rgba(8,120,222,.08),transparent 62%)
}

    .product-detail-visual img {
        height: 540px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 34px 58px rgba(11,46,103,.18))
    }

.product-detail-content {
    padding: 50px 72px 90px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 24px;
    width: min(1320px,100%);
    margin: 0 auto
}

.detail-card {
    min-height: 260px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(11,46,103,.055);
    padding: 34px
}

    .detail-card h2 {
        font-family: var(--font-h);
        color: var(--navy);
        font-size: 28px;
        line-height: 1.15;
        margin: 0 0 18px
    }

    .detail-card p, .detail-card li {
        font-size: 16px;
        line-height: 1.55;
        font-weight: 600;
        color: #596a80
    }

    .detail-card ul {
        padding-left: 20px
    }

.blue-card {
    background: linear-gradient(145deg,#0853b9,#0b74d5);
    color: #fff
}

    .blue-card h2, .blue-card p, .blue-card .eyebrow, .blue-card a {
        color: #fff
    }

    .blue-card .eyebrow {
        opacity: .78
    }

    .blue-card a {
        font-weight: 900;
        font-size: 12px
    }

.technology-page-grid {
    padding: 70px 72px 40px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    width: min(1320px,100%);
    margin: 0 auto
}

    .technology-page-grid article {
        min-height: 300px;
        border-radius: 16px;
        color: #fff;
        padding: 34px;
        box-shadow: 0 14px 34px rgba(11,46,103,.12);
        position: relative;
        overflow: hidden
    }

        .technology-page-grid article:before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .45;
            background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.22) 0 1px,transparent 2px) 0 0/18px 18px,linear-gradient(135deg,transparent 0 46%,rgba(255,255,255,.12) 47% 61%,transparent 62%)
        }

    .technology-page-grid h2, .technology-page-grid p {
        position: relative
    }

    .technology-page-grid h2 {
        font-family: var(--font-h);
        font-size: 28px;
        line-height: 1.1;
        margin: 0 0 28px
    }

    .technology-page-grid p {
        font-size: 16px;
        line-height: 1.55;
        color: rgba(255,255,255,.82);
        font-weight: 600
    }

.ingredients-page {
    width: min(1320px,calc(100% - 144px));
    margin: 40px auto 90px;
    padding: 54px;
    border-radius: 18px;
    background: linear-gradient(90deg,#f2faff,#fff);
    border: 1px solid rgba(11,46,103,.045);
    box-shadow: 0 16px 42px rgba(11,46,103,.05)
}

    .ingredients-page h2 {
        font-family: var(--font-h);
        font-size: 40px;
        color: var(--navy);
        margin: 0 0 28px
    }

.ingredients-list {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

    .ingredients-list article {
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 14px;
        padding: 26px
    }

    .ingredients-list h3 {
        margin: 0 0 12px;
        color: var(--navy);
        font-family: var(--font-h)
    }

    .ingredients-list p {
        color: #596a80;
        font-weight: 600;
        line-height: 1.5
    }

@media(max-width:991px) {
    .page-hero, .product-list-page, .product-detail-hero, .product-detail-content, .technology-page-grid {
        padding-left: 24px;
        padding-right: 24px
    }

    .product-list-grid, .product-detail-hero, .product-detail-content, .technology-page-grid, .ingredients-list {
        grid-template-columns: 1fr
    }

    .product-detail-visual {
        height: 440px
    }

        .product-detail-visual img {
            height: 390px
        }

    .ingredients-page {
        width: calc(100% - 48px);
        padding: 30px
    }
}
/* v0.4.1 hero overlap fix */
.hero-inner {
    position: relative;
    gap: 28px;
    grid-template-columns: minmax(0,46%) minmax(0,54%)
}

.hero-copy {
    position: relative;
    z-index: 5;
    min-width: 0
}

.hero-media {
    position: relative;
    z-index: 1;
    overflow: hidden;
    min-width: 0
}

.hero-bg {
    right: 50px !important;
    width: 112% !important
}

.hero-product {
    max-width: 74%;
    height: min(590px,62vh)
}

@media(max-width:991px) {
    .hero-inner {
        grid-template-columns: 1fr
    }

    .hero-media {
        height: 460px
    }

    .hero-bg {
        right: -18% !important;
        width: 124% !important
    }

    .hero-product {
        height: 390px;
        max-width: 72%
    }
}
/* v0.4.1 Product Page Template */
.product-page-hero {
    width: min(1320px,calc(100% - 112px));
    margin: 110px auto 34px;
    min-height: 680px;
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 56px;
    align-items: center;
    padding: 34px;
    border-radius: 24px;
    background: radial-gradient(circle at 28% 35%,rgba(8,120,222,.16),transparent 36%),linear-gradient(135deg,#eaf7ff 0%,#fff 58%,#edf9ff 100%);
    box-shadow: 0 18px 52px rgba(11,46,103,.07);
    overflow: hidden
}

.product-page-hero__visual {
    position: relative;
    min-height: 600px;
    display: grid;
    place-items: center
}

.product-page-hero__glass {
    position: absolute;
    inset: 20px;
    border-radius: 24px;
    background: rgba(255,255,255,.28);
    border: 1px solid rgba(255,255,255,.56);
    backdrop-filter: blur(8px)
}

.product-page-hero__product {
    position: relative;
    z-index: 3;
    height: 570px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 38px 62px rgba(11,46,103,.2))
}

.product-page-hero__foot {
    position: absolute;
    right: 20px;
    top: 28px;
    width: 210px;
    opacity: .55;
    z-index: 1
}

.product-page-hero__copy {
    position: relative;
    z-index: 4
}

    .product-page-hero__copy h1 {
        margin: 0;
        font-family: var(--font-h);
        font-size: clamp(50px,5vw,78px);
        line-height: 1.02;
        letter-spacing: -.06em;
        color: var(--navy);
        font-weight: 850
    }

    .product-page-hero__copy h2 {
        margin: 12px 0 0;
        font-family: var(--font-h);
        font-size: 28px;
        line-height: 1;
        color: #087d96;
        font-weight: 650;
        text-transform: uppercase;
        letter-spacing: .02em
    }

.product-page-hero__lead {
    max-width: 560px;
    margin: 28px 0 0;
    color: #213a57;
    font-size: 19px;
    line-height: 1.55;
    font-weight: 600
}

.product-page-benefit-icons {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    margin-top: 40px;
    max-width: 650px
}

    .product-page-benefit-icons div {
        text-align: center;
        color: var(--navy);
        font-size: 12px;
        font-weight: 900;
        text-transform: uppercase
    }

    .product-page-benefit-icons span {
        width: 54px;
        height: 54px;
        margin: 0 auto 10px;
        border: 1px solid rgba(8,120,222,.25);
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: var(--blue);
        font-size: 24px;
        background: rgba(255,255,255,.55)
    }

.product-page-badges {
    display: flex;
    gap: 34px;
    flex-wrap: wrap;
    margin-top: 34px;
    color: var(--navy);
    font-size: 13px;
    font-weight: 850;
    text-transform: uppercase
}

.product-page-actions {
    display: flex;
    gap: 16px;
    margin-top: 36px;
    flex-wrap: wrap
}

.product-benefits-band {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 48px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border: 1px solid rgba(11,46,103,.055);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(11,46,103,.06);
    overflow: hidden
}

    .product-benefits-band article {
        text-align: center;
        padding: 34px 30px
    }

        .product-benefits-band article + article {
            border-left: 1px solid rgba(11,46,103,.08)
        }

    .product-benefits-band span {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin: 0 auto 18px;
        background: #eaf6ff;
        display: grid;
        place-items: center;
        color: var(--blue);
        font-size: 28px
    }

    .product-benefits-band h3 {
        margin: 0 0 12px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 19px
    }

    .product-benefits-band p {
        margin: 0;
        color: #506178;
        font-size: 15px;
        line-height: 1.45;
        font-weight: 600
    }

.product-technology-block {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 46px;
    display: grid;
    grid-template-columns: 1fr .8fr 260px;
    gap: 38px;
    align-items: center
}

.product-technology-copy h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 34px;
    line-height: 1.15
}

.product-technology-copy p:not(.eyebrow) {
    max-width: 560px;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 600
}

.product-technology-list {
    display: grid;
    gap: 18px
}

    .product-technology-list article {
        display: grid;
        grid-template-columns: 58px 1fr;
        gap: 18px;
        align-items: start
    }

    .product-technology-list span {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        background: #eaf6ff;
        display: grid;
        place-items: center;
        color: var(--blue);
        font-size: 22px
    }

    .product-technology-list h3 {
        margin: 0 0 6px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 15px;
        text-transform: uppercase
    }

    .product-technology-list p {
        margin: 0;
        color: #506178;
        font-size: 14px;
        line-height: 1.4;
        font-weight: 600
    }

.product-technology-foot {
    width: 250px;
    opacity: .58
}

.product-ingredients-block {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 54px
}

.product-ingredients-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 22px
}

    .product-ingredients-grid article {
        border: 1px solid var(--line);
        border-radius: 12px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 13px 30px rgba(11,46,103,.045)
    }

.ingredient-card-art {
    height: 116px;
    background: #f0f8ff;
    position: relative
}

.ingredient-card-art--powder {
    background: radial-gradient(circle,#fff 0 18%,#edf7ff 19% 100%)
}

    .ingredient-card-art--powder:after {
        content: "";
        position: absolute;
        width: 80px;
        height: 48px;
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 10px 20px rgba(11,46,103,.12);
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }

.ingredient-card-art--coconut {
    background: linear-gradient(135deg,#fff,#e9f8ef)
}

    .ingredient-card-art--coconut:after {
        content: "🌿";
        position: absolute;
        font-size: 58px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }

.ingredient-card-art--zinc {
    background: linear-gradient(135deg,#fff,#f4f7fb)
}

    .ingredient-card-art--zinc:after {
        content: "△";
        position: absolute;
        color: #dbe5ef;
        font-size: 78px;
        left: 50%;
        top: 43%;
        transform: translate(-50%,-50%)
    }

.ingredient-card-art--molecule img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.ingredient-card-art--leaf {
    background: linear-gradient(135deg,#fff,#effbf0)
}

    .ingredient-card-art--leaf:after {
        content: "🌱";
        position: absolute;
        font-size: 58px;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%)
    }

.product-ingredients-grid h3 {
    margin: 16px 18px 6px;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 15px
}

.product-ingredients-grid p {
    margin: 0 18px 18px;
    color: #506178;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600
}

.product-ingredients-link {
    margin: 26px auto 0;
    display: flex;
    width: max-content;
    color: var(--blue);
    font-size: 12px;
    font-weight: 900
}

.product-howto-block {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 46px;
    border: 1px solid rgba(11,46,103,.075);
    border-radius: 14px;
    background: linear-gradient(90deg,#fff,#f8fcff);
    display: grid;
    grid-template-columns: 160px 1.2fr repeat(3,1fr);
    gap: 24px;
    align-items: center;
    padding: 26px 34px
}

.product-howto-visual {
    font-size: 76px;
    color: var(--blue);
    text-align: center
}

.product-howto-block p {
    margin: 0;
    color: #506178;
    font-size: 14px;
    line-height: 1.45;
    font-weight: 600
}

.product-howto-block strong {
    display: block;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 13px;
    margin: 6px 0;
    text-transform: uppercase
}

.product-howto-block span {
    font-size: 26px
}

.product-final-cta {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 80px;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    padding: 32px 54px;
    border-radius: 16px;
    background: linear-gradient(90deg,#eaf6ff,#fff 52%,#eaf6ff);
    box-shadow: 0 13px 30px rgba(11,46,103,.045)
}

    .product-final-cta h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 34px
    }

    .product-final-cta p {
        margin: 8px 0 0;
        color: #087d96;
        font-weight: 700
    }

@media(max-width:991px) {
    .product-page-hero, .product-technology-block, .product-howto-block {
        grid-template-columns: 1fr
    }

    .product-page-hero, .product-benefits-band, .product-technology-block, .product-ingredients-block, .product-howto-block, .product-final-cta {
        width: calc(100% - 48px)
    }

    .product-page-hero {
        margin-top: 110px;
        padding: 24px
    }

    .product-page-hero__visual {
        min-height: 460px
    }

    .product-page-hero__product {
        height: 430px
    }

    .product-benefits-band, .product-ingredients-grid {
        grid-template-columns: 1fr 1fr
    }

    .product-ingredients-grid {
        gap: 16px
    }

    .product-howto-block {
        padding: 24px
    }

    .product-final-cta {
        flex-direction: column;
        align-items: flex-start
    }

    .product-technology-foot {
        display: none
    }
}

@media(max-width:560px) {
    .product-benefits-band, .product-ingredients-grid {
        grid-template-columns: 1fr
    }

    .product-page-benefit-icons {
        grid-template-columns: repeat(2,1fr)
    }
}
/* ========================================================= v0.4.2 — Product detail: Ingredients / How To / CTA rebuild ========================================================= */
.product-ingredients-v2 {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 54px
}

.product-ingredients-grid-v2 {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 24px
}

.ingredient-v2-card {
    overflow: hidden;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(11,46,103,.048);
    transition: transform .18s ease,box-shadow .18s ease
}

    .ingredient-v2-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 20px 42px rgba(11,46,103,.08)
    }

.ingredient-v2-art {
    height: 126px;
    background: linear-gradient(135deg,#f8fcff,#eef8ff);
    display: grid;
    place-items: center;
    overflow: hidden
}

    .ingredient-v2-art svg {
        width: 100%;
        height: 100%
    }

    .ingredient-v2-art img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .9
    }

.ingredient-v2-art--powder {
    background: linear-gradient(135deg,#fff,#f2f8fd)
}

.ingredient-v2-art--coconut {
    background: linear-gradient(135deg,#fff,#eefaf3)
}

.ingredient-v2-art--zinc {
    background: linear-gradient(135deg,#fff,#f4f7fb)
}

.ingredient-v2-art--molecule {
    background: #edf8ff
}

.ingredient-v2-art--menthol {
    background: linear-gradient(135deg,#fff,#eefbf1)
}

.ingredient-v2-card h3 {
    margin: 17px 20px 7px;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 15px;
    line-height: 1.15;
    font-weight: 850
}

.ingredient-v2-card p {
    margin: 0 20px 20px;
    color: #506178;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650
}

.product-all-ingredients {
    margin: 18px auto 28px;
    width: min(760px,100%);
    text-align: center
}

    .product-all-ingredients summary {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        color: var(--blue);
        font-size: 12px;
        font-weight: 950;
        letter-spacing: .015em;
        cursor: pointer;
        list-style: none
    }

        .product-all-ingredients summary::-webkit-details-marker {
            display: none
        }

        .product-all-ingredients summary span {
            font-size: 27px;
            line-height: .8;
            font-weight: 500;
            transition: transform .18s ease
        }

    .product-all-ingredients[open] summary span {
        transform: rotate(90deg)
    }

.product-all-ingredients__panel {
    margin-top: 20px;
    text-align: left;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 14px;
    background: linear-gradient(135deg,#f7fbff,#fff);
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    padding: 24px 28px
}

    .product-all-ingredients__panel h3 {
        margin: 0 0 12px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 20px
    }

    .product-all-ingredients__panel p {
        margin: 0;
        color: #506178;
        font-size: 15px;
        line-height: 1.6;
        font-weight: 650
    }

    .product-all-ingredients__panel small {
        display: block;
        margin-top: 13px;
        color: #8a96a5;
        font-size: 12px;
        line-height: 1.4
    }

.product-howto-v2 {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 46px;
    border: 1px solid rgba(11,46,103,.08);
    border-radius: 14px;
    background: linear-gradient(90deg,#fff 0%,#f8fcff 100%);
    display: grid;
    grid-template-columns: 210px 1.2fr repeat(3,1fr);
    gap: 24px;
    align-items: center;
    padding: 26px 34px;
    box-shadow: 0 14px 34px rgba(11,46,103,.035)
}

.product-howto-v2__title {
    display: grid;
    grid-template-rows: auto 1fr;
    gap: 8px
}

    .product-howto-v2__title .eyebrow {
        margin: 0;
        color: #087d96
    }

    .product-howto-v2__title svg {
        width: 180px;
        height: 115px
    }
    .product-howto-v2__title img {
        width: 100px;
        height: 100px
    }
.product-howto-v2__instructions {
    padding-right: 28px;
    border-right: 1px solid rgba(11,46,103,.09)
}

    .product-howto-v2__instructions p {
        margin: 0;
        color: #243b58;
        font-size: 15px;
        line-height: 1.58;
        font-weight: 700
    }

.product-howto-v2__item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 16px;
    align-items: center
}

    .product-howto-v2__item span {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eaf6ff;
        color: var(--blue);
        font-size: 24px
    }

    .product-howto-v2__item strong {
        display: block;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 13px;
        line-height: 1.15;
        margin: 0 0 6px;
        text-transform: uppercase
    }

    .product-howto-v2__item p {
        margin: 0;
        color: #506178;
        font-size: 13px;
        line-height: 1.4;
        font-weight: 650
    }

.product-final-cta-v2 {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 80px;
    min-height: 150px;
    display: grid;
    grid-template-columns: 300px minmax(0,1fr) auto;
    align-items: center;
    gap: 46px;
    padding: 0 54px 0 0;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(90deg,#edf8ff,#fff 55%,#eaf6ff);
    box-shadow: 0 13px 30px rgba(11,46,103,.045)
}

.product-final-cta-v2__image {
    height: 150px;
    overflow: hidden
}

    .product-final-cta-v2__image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.product-final-cta-v2__copy h2 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 34px;
    letter-spacing: -.035em
}

.product-final-cta-v2__copy p {
    margin: 10px 0 0;
    color: #087d96;
    font-size: 15px;
    line-height: 1.5;
    font-weight: 750
}

.product-final-cta-v2 .btn {
    min-width: 240px
}

@media(max-width:991px) {
    .product-ingredients-v2, .product-howto-v2, .product-final-cta-v2 {
        width: calc(100% - 48px)
    }

    .product-ingredients-grid-v2 {
        grid-template-columns: repeat(2,1fr)
    }

    .product-howto-v2 {
        grid-template-columns: 1fr;
        gap: 18px
    }

    .product-howto-v2__instructions {
        border-right: 0;
        border-bottom: 1px solid rgba(11,46,103,.09);
        padding: 0 0 20px
    }

    .product-final-cta-v2 {
        grid-template-columns: 1fr;
        padding: 0 0 28px;
        gap: 24px
    }

    .product-final-cta-v2__copy {
        padding: 0 28px
    }

    .product-final-cta-v2 .btn {
        margin: 0 28px
    }
}

@media(max-width:560px) {
    .product-ingredients-grid-v2 {
        grid-template-columns: 1fr
    }

    .product-final-cta-v2__image {
        height: 130px
    }
}
/* ========================================================= v0.4.3 — Our Science / Clinical Technologies Page ========================================================= */
.science-page {
    background: linear-gradient(180deg,#fff 0%,#f8fcff 100%);
    padding-top: 82px
}

.science-hero {
    width: min(1320px,calc(100% - 112px));
    margin: 34px auto 44px;
    min-height: 520px;
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 58px;
    align-items: center;
    border-radius: 24px;
    overflow: hidden;
    background: radial-gradient(circle at 78% 35%,rgba(8,120,222,.16),transparent 30%),linear-gradient(120deg,#f1f9ff 0%,#fff 52%,#eef9ff 100%);
    box-shadow: 0 22px 60px rgba(11,46,103,.07);
    border: 1px solid rgba(11,46,103,.045);
    padding: 72px
}

.science-hero__copy h1 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: clamp(62px,5.4vw,92px);
    line-height: .98;
    letter-spacing: -.06em;
    font-weight: 900
}

.science-hero__copy p:not(.eyebrow) {
    max-width: 560px;
    margin: 28px 0 0;
    color: #344966;
    font-size: 20px;
    line-height: 1.55;
    font-weight: 600
}

.science-hero__actions {
    display: flex;
    gap: 18px;
    margin-top: 36px;
    flex-wrap: wrap
}

.science-hero__visual {
    position: relative;
    min-height: 430px;
    display: grid;
    place-items: center
}

.science-footprint {
    position: relative;
    z-index: 3;
    width: min(380px,48vw);
    opacity: .88;
    filter: drop-shadow(0 22px 42px rgba(8,120,222,.18))
}

.science-orbit {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(8,120,222,.13)
}

.science-orbit--one {
    width: 420px;
    height: 420px
}

.science-orbit--two {
    width: 300px;
    height: 300px
}

.science-molecule {
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(8,120,222,.32);
    box-shadow: 0 10px 28px rgba(8,120,222,.14)
}

.science-molecule--a {
    left: 14%;
    top: 18%
}

.science-molecule--b {
    right: 16%;
    top: 25%
}

.science-molecule--c {
    left: 24%;
    bottom: 16%
}

.science-intro-band {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 64px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

    .science-intro-band article {
        border: 1px solid rgba(11,46,103,.055);
        border-radius: 16px;
        background: rgba(255,255,255,.88);
        padding: 30px;
        box-shadow: 0 14px 34px rgba(11,46,103,.045)
    }

    .science-intro-band span {
        display: block;
        color: var(--blue);
        font-weight: 900;
        margin-bottom: 18px
    }

    .science-intro-band h2 {
        margin: 0 0 12px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 22px
    }

    .science-intro-band p {
        margin: 0;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 600
    }

.science-technologies, .ingredient-library {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 72px
}

.science-section-head {
    max-width: 760px;
    margin-bottom: 34px
}

    .science-section-head h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 42px;
        line-height: 1.12;
        letter-spacing: -.04em
    }

    .science-section-head p:not(.eyebrow) {
        font-size: 17px;
        line-height: 1.55;
        font-weight: 600
    }

.science-section-head--split {
    max-width: none;
    display: grid;
    grid-template-columns: .9fr .8fr;
    gap: 60px;
    align-items: end
}

.science-tech-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px
}

.science-tech-card {
    position: relative;
    overflow: hidden;
    min-height: 390px;
    border-radius: 18px;
    padding: 34px 30px;
    color: #fff;
    box-shadow: 0 20px 48px rgba(11,46,103,.13);
    isolation: isolate
}

.science-tech-card--bio {
    background: linear-gradient(145deg,#084cad 0%,#0878de 100%)
}

.science-tech-card--dry {
    background: linear-gradient(145deg,#029fa4 0%,#16c8bd 100%)
}

.science-tech-card--odor {
    background: linear-gradient(145deg,#0786d1 0%,#12bce6 100%)
}

.science-tech-card--skin {
    background: linear-gradient(145deg,#48a563 0%,#78be86 100%)
}

.science-tech-card__texture {
    position: absolute;
    inset: 0;
    z-index: -1;
    opacity: .48;
    background: radial-gradient(circle at 14% 18%,rgba(255,255,255,.22) 0 1px,transparent 2px) 0 0/18px 18px,linear-gradient(135deg,transparent 0 45%,rgba(255,255,255,.12) 46% 60%,transparent 61%),radial-gradient(circle at 90% 12%,rgba(255,255,255,.22),transparent 34%)
}

.science-tech-card i {
    display: block;
    width: 72px;
    height: 72px;
    margin-bottom: 40px;
    color: rgba(255,255,255,.92)
}

.science-tech-card svg {
    width: 72px;
    height: 72px;
    stroke: currentColor;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round
}

.science-tech-card h3 {
    margin: 0 0 24px;
    font-family: var(--font-h);
    font-size: 25px;
    line-height: 1.08
}

.science-tech-card p {
    margin: 0;
    color: rgba(255,255,255,.82);
    font-size: 15px;
    line-height: 1.45;
    font-weight: 650
}

.science-tech-card ul {
    margin: 24px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 10px
}

.science-tech-card li {
    font-size: 13px;
    font-weight: 850;
    color: rgba(255,255,255,.92)
}

    .science-tech-card li:before {
        content: '✓';
        margin-right: 8px
    }

.library-toolbar {
    display: flex;
    gap: 12px;
    margin: 0 0 28px;
    flex-wrap: wrap
}

    .library-toolbar button {
        height: 42px;
        border-radius: 999px;
        border: 1px solid rgba(8,120,222,.18);
        background: #fff;
        color: var(--navy);
        padding: 0 18px;
        font-weight: 900;
        font-size: 13px;
        cursor: pointer
    }

        .library-toolbar button.is-active {
            background: var(--blue);
            color: #fff;
            box-shadow: 0 12px 26px rgba(8,120,222,.18)
        }

.library-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

.library-card {
    border: 1px solid rgba(11,46,103,.06);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    padding: 26px;
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    transition: transform .18s ease,opacity .18s ease
}

    .library-card:hover {
        transform: translateY(-3px)
    }

    .library-card.is-hidden {
        display: none
    }

.library-card__tag {
    display: inline-flex;
    height: 26px;
    align-items: center;
    padding: 0 12px;
    border-radius: 999px;
    background: #eaf6ff;
    color: var(--blue);
    font-size: 11px;
    font-weight: 950;
    margin-bottom: 18px
}

.library-card h3 {
    margin: 0 0 12px;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 22px;
    line-height: 1.12
}

.library-card p {
    margin: 0;
    color: #506178;
    font-size: 15px;
    line-height: 1.55;
    font-weight: 620
}

.library-card details {
    margin-top: 18px;
    border-top: 1px solid rgba(11,46,103,.07);
    padding-top: 16px
}

.library-card summary {
    cursor: pointer;
    color: var(--blue);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase
}

.library-card details p {
    margin-top: 10px;
    font-size: 14px
}

.library-card--technology {
    background: linear-gradient(135deg,#f4fbff,#fff);
    border-color: rgba(8,120,222,.15)
}

.science-cta {
    width: min(1240px,calc(100% - 112px));
    margin: 0 auto 86px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    padding: 44px 52px;
    border-radius: 20px;
    background: linear-gradient(90deg,#eaf6ff,#fff 52%,#eaf6ff);
    box-shadow: 0 16px 42px rgba(11,46,103,.055)
}

    .science-cta h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 34px;
        letter-spacing: -.035em
    }

    .science-cta p:not(.eyebrow) {
        margin: 12px 0 0;
        font-size: 16px;
        font-weight: 650
    }

@media(max-width:1100px) {
    .science-hero {
        grid-template-columns: 1fr;
        padding: 48px
    }

    .science-intro-band, .science-tech-grid, .library-grid {
        grid-template-columns: 1fr 1fr
    }

    .science-section-head--split {
        grid-template-columns: 1fr
    }

    .science-cta {
        flex-direction: column;
        align-items: flex-start
    }
}

@media(max-width:700px) {
    .science-page {
        padding-top: 82px
    }

    .science-hero, .science-intro-band, .science-technologies, .ingredient-library, .science-cta {
        width: calc(100% - 36px)
    }

    .science-hero {
        padding: 34px
    }

    .science-hero__copy h1 {
        font-size: 52px
    }

    .science-intro-band, .science-tech-grid, .library-grid {
        grid-template-columns: 1fr
    }

    .science-section-head h2 {
        font-size: 34px
    }

    .science-footprint {
        width: 260px
    }

    .science-hero__visual {
        min-height: 300px
    }
}
/* ========================================================= v0.4.4 — Header/footer language selector + refined ingredient library ========================================================= */
.site-header--clean {
    height: 76px;
    padding: 0 56px;
    gap: 34px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    box-shadow: 0 1px 0 rgba(11,46,103,.06);
}

    .site-header--clean .brand--full img {
        height: 45px;
        width: auto;
        object-fit: contain;
        object-position: left center
    }

.main-nav {
    margin-left: auto;
    display: flex;
    gap: 34px;
    align-items: center
}

    .main-nav a {
        color: var(--navy);
        font-family: var(--font-h);
        font-weight: 900;
        font-size: 13px;
        letter-spacing: .01em;
        text-transform: uppercase
    }

        .main-nav a:hover {
            color: var(--blue)
        }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 22px
}

.site-header--clean .nav-cta {
    height: 44px;
    min-width: 154px;
    border-radius: 5px;
    justify-content: center;
    background: var(--blue);
    color: #fff;
    font-family: var(--font-h);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .01em;
    box-shadow: 0 12px 24px rgba(8,120,222,.20)
}

.language-switcher {
    position: relative;
    display: inline-flex;
    align-items: center
}

    .language-switcher select {
        appearance: none;
        border: 0;
        background: transparent;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 900;
        text-transform: uppercase;
        padding: 8px 19px 8px 4px;
        cursor: pointer
    }

    .language-switcher:after {
        content: '⌄';
        position: absolute;
        right: 3px;
        top: 50%;
        transform: translateY(-54%);
        color: var(--navy);
        font-size: 14px;
        pointer-events: none
    }

.site-footer--premium {
    display: block;
    background: linear-gradient(135deg,#062d62 0%,#063b7c 58%,#002a5f 100%);
    color: #fff;
    padding: 34px 72px 22px
}

    .site-footer--premium .footer-inner {
        display: grid;
        grid-template-columns: 1.8fr repeat(4,1fr) 1.2fr;
        gap: 46px;
        align-items: start;
        max-width: 1280px;
        margin: 0 auto
    }

    .site-footer--premium .footer-brand img {
        height: 48px;
        width: auto;
        filter: brightness(0) invert(1)
    }

    .site-footer--premium .footer-brand p {
        display: none
    }

    .site-footer--premium .footer-col h4 {
        margin: 0 0 10px;
        color: #fff;
        font-family: var(--font-h);
        font-size: 13px;
        font-weight: 900
    }

    .site-footer--premium .footer-col a {
        display: block;
        color: rgba(255,255,255,.78);
        font-size: 13px;
        line-height: 1.65
    }

    .site-footer--premium .footer-social {
        display: flex;
        gap: 18px;
        justify-content: flex-end
    }

        .site-footer--premium .footer-social a {
            width: 34px;
            height: 34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #fff;
            color: #063b7c;
            font-weight: 900
        }

    .site-footer--premium .footer-bottom {
        max-width: 1280px;
        margin: 28px auto 0;
        padding-top: 17px;
        border-top: 1px solid rgba(255,255,255,.12);
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: rgba(255,255,255,.72);
        font-size: 12px
    }

        .site-footer--premium .footer-bottom p {
            margin: 0
        }

        .site-footer--premium .footer-bottom div {
            display: flex;
            gap: 34px
        }

        .site-footer--premium .footer-bottom a {
            color: rgba(255,255,255,.82)
        }

.ingredient-library--compact {
    width: min(1360px,calc(100% - 80px));
    margin: 0 auto 38px
}

.ingredient-library__shell {
    display: grid;
    grid-template-columns: 255px minmax(0,1fr);
    gap: 14px;
    align-items: stretch;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 12px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    padding: 10px
}

.ingredient-library__intro {
    border-radius: 10px;
    padding: 22px 20px;
    background: linear-gradient(180deg,#fff,#f7fbff)
}

    .ingredient-library__intro .eyebrow {
        font-size: 14px;
        margin-bottom: 28px
    }

.library-tabs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

    .library-tabs button {
        height: 36px;
        min-width: 76px;
        border-radius: 7px;
        border: 1px solid rgba(11,46,103,.12);
        background: #fff;
        color: #506178;
        font-weight: 850;
        font-size: 12px;
        cursor: pointer
    }

        .library-tabs button.is-active {
            background: #063b7c;
            color: #fff;
            border-color: #063b7c
        }

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

.ingredient-strip-card {
    position: relative;
    min-height: 154px;
    border-radius: 10px;
    border: 1px solid rgba(11,46,103,.075);
    background: #fff;
    overflow: hidden;
    padding: 88px 13px 12px;
    box-shadow: 0 8px 20px rgba(11,46,103,.035)
}

    .ingredient-strip-card.is-hidden {
        display: none
    }

.ingredient-strip-card__media {
    position: absolute;
    left: 8px;
    right: 8px;
    top: 8px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    background: #edf7ff
}

    .ingredient-strip-card__media:before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 35% 55%,#fff 0 18%,#e9f4ff 19% 42%,transparent 43%),radial-gradient(circle at 67% 40%,rgba(8,120,222,.18),transparent 18%),linear-gradient(135deg,#f9fcff,#e8f5ff)
    }

.ingredient-strip-card__media--white:before {
    background: radial-gradient(circle at 44% 55%,#fff 0 18%,#eff4f8 19% 42%,transparent 43%),linear-gradient(135deg,#fbfdff,#e9f2f8)
}

.ingredient-strip-card__media--powder:before {
    background: radial-gradient(ellipse at 50% 60%,#fff 0 22%,#e9eef3 23% 43%,transparent 44%),linear-gradient(135deg,#f9fbff,#edf4fb)
}

.ingredient-strip-card__media--green:before {
    background: radial-gradient(ellipse at 45% 55%,#9ad48d 0 18%,transparent 19%),radial-gradient(ellipse at 64% 42%,#4eb86a 0 16%,transparent 17%),linear-gradient(135deg,#f9fff7,#edf9ed)
}

.ingredient-strip-card__media--mint:before {
    background: radial-gradient(ellipse at 43% 55%,#58b55c 0 20%,transparent 21%),radial-gradient(circle at 64% 36%,#dff7ff 0 18%,transparent 19%),linear-gradient(135deg,#f8fff7,#edf9ff)
}

.ingredient-strip-card__media--clear:before {
    background: radial-gradient(circle at 35% 50%,#fff 0 14%,#e6f4ff 15% 28%,transparent 29%),radial-gradient(circle at 69% 42%,rgba(8,120,222,.14),transparent 18%),linear-gradient(135deg,#fbfdff,#eef7ff)
}

.ingredient-strip-card__plus {
    position: absolute;
    right: 9px;
    top: 9px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(11,46,103,.2);
    background: #fff;
    color: var(--blue);
    font-weight: 900;
    line-height: 1;
    cursor: pointer
}

.ingredient-strip-card h3 {
    margin: 0 0 6px;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 14px;
    line-height: 1.1;
    font-weight: 900
}

.ingredient-strip-card p {
    margin: 0;
    color: #506178;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 650
}

.technology-flow {
    width: min(1360px,calc(100% - 80px));
    margin: 22px auto 0;
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 36px;
    align-items: center
}

.technology-flow__copy h3 {
    margin: 0;
    color: #087d96;
    font-family: var(--font-h);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 900
}

.technology-flow__copy p {
    margin: 13px 0 0;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 650;
    color: #506178
}

.technology-flow__steps {
    display: grid;
    grid-template-columns: 80px 1fr 80px 1fr 80px 1fr 80px 36px 74px 150px;
    gap: 14px;
    align-items: center
}

    .technology-flow__steps i {
        height: 2px;
        border-top: 2px dotted #0878de
    }

    .technology-flow__steps em {
        font-style: normal;
        color: #0878de;
        font-size: 30px
    }

.flow-step {
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--navy)
}

    .flow-step:before {
        content: '';
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: #eaf6ff;
        box-shadow: 0 10px 24px rgba(11,46,103,.08);
        grid-row: 1
    }

.flow-step {
    font-size: 26px
}

    .flow-step b {
        margin-top: 8px;
        font-size: 10px;
        color: #0878de;
        line-height: 1.1
    }

    .flow-step small {
        font-size: 10px;
        line-height: 1.25;
        color: #506178
    }

.flow-foot {
    width: 66px;
    height: 66px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 10px 30px rgba(8,120,222,.18)
}

    .flow-foot img {
        height: 48px;
        width: 34px;
        object-fit: contain
    }

.technology-flow__steps > strong {
    font-family: var(--font-h);
    font-size: 14px;
    line-height: 1.15;
    color: var(--navy)
}

@media(max-width:1100px) {
    .site-header--clean {
        padding: 0 24px
    }

    .main-nav {
        gap: 16px
    }

    .site-footer--premium .footer-inner {
        grid-template-columns: 1fr 1fr 1fr
    }

    .ingredient-library__shell, .technology-flow {
        grid-template-columns: 1fr
    }

    .ingredient-strip {
        grid-template-columns: repeat(3,1fr)
    }

    .technology-flow__steps {
        grid-template-columns: repeat(2,1fr)
    }

        .technology-flow__steps i, .technology-flow__steps em {
            display: none
        }
}

@media(max-width:700px) {
    .main-nav {
        display: none
    }

    .nav-actions {
        margin-left: auto
    }

    .site-header--clean .nav-cta {
        display: none
    }

    .site-footer--premium {
        padding: 34px 24px
    }

        .site-footer--premium .footer-inner {
            grid-template-columns: 1fr 1fr
        }

        .site-footer--premium .footer-social {
            justify-content: flex-start
        }

        .site-footer--premium .footer-bottom {
            display: grid;
            gap: 16px
        }

    .ingredient-library--compact, .technology-flow {
        width: calc(100% - 36px)
    }

    .ingredient-strip {
        grid-template-columns: 1fr
    }

    .ingredient-strip-card {
        min-height: 150px
    }
}
/* ========================================================= v0.4.5 — Header nav centered + reference Ingredient Library ========================================================= */
.site-header--clean {
    display: grid !important;
    grid-template-columns: 260px minmax(0,1fr) 260px;
    align-items: center;
    gap: 24px;
}

    .site-header--clean .brand--full {
        justify-self: start;
        display: flex;
        align-items: center;
        min-width: 0
    }

    .site-header--clean .main-nav {
        margin-left: 0 !important;
        justify-self: center;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 38px;
        width: 100%;
    }

    .site-header--clean .nav-actions {
        justify-self: end;
        margin-left: 0
    }

.science-reference-block {
    width: min(1540px,calc(100% - 64px));
    margin: 0 auto 0;
    padding: 0 0 0;
}

.reference-ingredient-library {
    display: grid;
    grid-template-columns: 300px minmax(0,1fr);
    gap: 0;
    border: 1px solid rgba(11,46,103,.075);
    border-radius: 14px;
    background: rgba(255,255,255,.96);
    overflow: hidden;
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
}

.reference-library-intro {
    padding: 22px 22px;
    border-right: 1px solid rgba(11,46,103,.06);
    background: linear-gradient(180deg,#fff,#f9fcff);
}

    .reference-library-intro h2 {
        margin: 0 0 26px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 20px;
        line-height: 1;
        font-weight: 950;
        letter-spacing: -.02em;
    }

.reference-library-tabs {
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap
}

    .reference-library-tabs button {
        height: 34px;
        min-width: 74px;
        padding: 0 18px;
        border-radius: 6px;
        border: 1px solid rgba(11,46,103,.14);
        background: #fff;
        color: #53657c;
        font-size: 12px;
        font-weight: 850;
        cursor: pointer;
    }

        .reference-library-tabs button.is-active {
            background: #063b7c;
            color: #fff;
            border-color: #063b7c;
            box-shadow: 0 10px 20px rgba(6,59,124,.15)
        }

.reference-ingredient-strip {
    display: grid;
    grid-template-columns: repeat(6,minmax(0,1fr));
    gap: 12px;
    padding: 10px;
    min-width: 0;
}

.reference-ingredient-card {
    position: relative;
    min-height: 158px;
    border: 1px solid rgba(11,46,103,.075);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgba(11,46,103,.035);
    padding: 86px 14px 13px;
}

    .reference-ingredient-card.is-hidden {
        display: none
    }

    .reference-ingredient-card img {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 8px;
        width: calc(100% - 16px);
        height: 64px;
        border-radius: 8px;
        object-fit: cover;
        background: #edf7ff;
    }

    .reference-ingredient-card button {
        position: absolute;
        top: 10px;
        right: 10px;
        z-index: 3;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid rgba(11,46,103,.22);
        background: rgba(255,255,255,.92);
        color: #063b7c;
        font-size: 17px;
        line-height: 18px;
        font-weight: 800;
        cursor: pointer;
    }

    .reference-ingredient-card h3 {
        margin: 0 0 7px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 14px;
        line-height: 1.1;
        font-weight: 950;
    }

    .reference-ingredient-card p {
        margin: 0;
        color: #344966;
        font-size: 11.5px;
        line-height: 1.32;
        font-weight: 650;
    }

.reference-technology-flow {
    display: grid;
    grid-template-columns: 305px minmax(0,1fr);
    gap: 34px;
    align-items: center;
    padding: 24px 20px 18px;
}

.reference-flow-copy h3 {
    margin: 0;
    color: #087d96;
    font-family: var(--font-h);
    font-size: 20px;
    line-height: 1.1;
    font-weight: 950;
    letter-spacing: -.02em;
}

.reference-flow-copy p {
    margin: 13px 0 0;
    color: #344966;
    font-size: 12.5px;
    line-height: 1.45;
    font-weight: 650;
}

.reference-flow-steps {
    display: grid;
    grid-template-columns: 82px minmax(44px,1fr) 82px minmax(44px,1fr) 82px minmax(44px,1fr) 82px 36px 74px 148px;
    gap: 12px;
    align-items: start;
}

.reference-flow-step {
    display: grid;
    justify-items: center;
    text-align: center;
    min-width: 0;
}

    .reference-flow-step span {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        color: #fff;
        box-shadow: 0 10px 26px rgba(11,46,103,.12);
    }

    .reference-flow-step svg {
        width: 34px;
        height: 34px;
        stroke: currentColor;
        stroke-width: 2.3;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.reference-flow-step--blue span {
    background: linear-gradient(145deg,#2d76c9,#69a7e1)
}

.reference-flow-step--teal span {
    background: linear-gradient(145deg,#05a9b2,#35c9d0)
}

.reference-flow-step--green span {
    background: linear-gradient(145deg,#4aa867,#7ac385)
}

.reference-flow-step--purple span {
    background: linear-gradient(145deg,#7055ac,#9b88cf)
}

.reference-flow-step b {
    margin-top: 8px;
    color: #0878de;
    font-size: 10px;
    line-height: 1.05;
    font-weight: 950;
}

.reference-flow-step small {
    margin-top: 4px;
    color: #344966;
    font-size: 9.8px;
    line-height: 1.22;
    font-weight: 650;
}

.reference-flow-steps i {
    margin-top: 28px;
    height: 1px;
    border-top: 2px dotted #0878de;
    opacity: .95;
}

.reference-flow-steps em {
    margin-top: 20px;
    color: #0878de;
    font-style: normal;
    font-size: 32px;
    line-height: 1;
    font-weight: 400;
}

.reference-flow-foot {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    box-shadow: 0 12px 34px rgba(8,120,222,.18);
}

    .reference-flow-foot img {
        width: 36px;
        height: 52px;
        object-fit: contain
    }

.reference-flow-steps > strong {
    align-self: center;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: 14px;
    line-height: 1.12;
    font-weight: 950;
}

.reference-products-cta {
    min-height: 76px;
    display: grid;
    grid-template-columns: 74px minmax(240px,1fr) minmax(320px,1.2fr) 250px;
    gap: 24px;
    align-items: center;
    padding: 0 92px 0 82px;
    background: linear-gradient(90deg,rgba(5,59,125,.96),rgba(8,120,222,.95) 54%,rgba(17,184,199,.94)),url('/assets/science/science-cta-texture.jpg') center/cover;
    color: #fff;
    overflow: hidden;
}

    .reference-products-cta img {
        width: 38px;
        height: 56px;
        object-fit: contain;
        filter: brightness(1.2)
    }

    .reference-products-cta h3 {
        margin: 0;
        font-family: var(--font-h);
        font-size: 26px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -.035em;
    }

    .reference-products-cta p {
        margin: 0;
        color: rgba(255,255,255,.86);
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600;
    }

    .reference-products-cta a {
        height: 42px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        color: var(--navy);
        background: #fff;
        font-size: 12px;
        font-weight: 950;
        box-shadow: 0 12px 26px rgba(0,0,0,.12);
    }

    .reference-products-cta b {
        font-size: 24px;
        line-height: 1;
        font-weight: 400
    }

@media(max-width:1200px) {
    .site-header--clean {
        grid-template-columns: 220px 1fr 220px;
        padding: 0 34px
    }

        .site-header--clean .main-nav {
            gap: 20px
        }

    .reference-ingredient-library, .reference-technology-flow {
        grid-template-columns: 1fr
    }

    .reference-ingredient-strip {
        grid-template-columns: repeat(3,1fr)
    }

    .reference-flow-steps {
        grid-template-columns: repeat(4,1fr)
    }

        .reference-flow-steps i, .reference-flow-steps em {
            display: none
        }

    .reference-products-cta {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        padding: 20px 32px
    }

        .reference-products-cta p, .reference-products-cta a {
            grid-column: 2
        }
}

@media(max-width:720px) {
    .site-header--clean {
        grid-template-columns: 1fr auto
    }

        .site-header--clean .main-nav {
            display: none
        }

    .reference-ingredient-strip {
        grid-template-columns: 1fr
    }

    .science-reference-block {
        width: calc(100% - 32px)
    }

    .reference-products-cta {
        grid-template-columns: 1fr
    }

        .reference-products-cta img {
            display: none
        }

        .reference-products-cta p, .reference-products-cta a {
            grid-column: auto
        }

    .reference-flow-steps {
        grid-template-columns: 1fr 1fr
    }

    .reference-library-intro {
        border-right: 0;
        border-bottom: 1px solid rgba(11,46,103,.06)
    }
}
/* ========================================================= v0.4.6 — Technology content refinement + full-width product CTA ========================================================= */
.science-tech-grid--detailed {
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 22px
}

    .science-tech-grid--detailed .science-tech-card {
        min-height: 430px;
        padding-bottom: 28px
    }

        .science-tech-grid--detailed .science-tech-card p {
            font-size: 15px;
            line-height: 1.45;
            color: rgba(255,255,255,.86)
        }

.science-tech-card dl {
    margin: 22px 0 0;
    display: grid;
    gap: 11px;
    color: rgba(255,255,255,.88)
}

.science-tech-card dt {
    font-size: 11px;
    line-height: 1;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: rgba(255,255,255,.72)
}

.science-tech-card dd {
    margin: 0;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
    color: rgba(255,255,255,.92)
}

.science-tech-grid--detailed .science-tech-card ul {
    display: none
}

.science-reference-block {
    margin-bottom: 0
}

.science-reference-block--flow {
    margin-top: 0;
    padding-top: 18px;
    padding-bottom: 26px
}

.reference-products-cta--full {
    width: 100%;
    margin: 30px 0 0;
    min-height: 84px;
    padding: 0;
    background: linear-gradient(90deg,rgba(5,59,125,.98),rgba(8,120,222,.97) 54%,rgba(17,184,199,.95)),url('/assets/science/science-cta-texture.jpg') center/cover;
    color: #fff;
    overflow: hidden;
    display: block
}

    .reference-products-cta--full .reference-products-cta__inner {
        width: min(1540px,calc(100% - 64px));
        margin: 0 auto;
        min-height: 84px;
        display: grid;
        grid-template-columns: 74px minmax(240px,1fr) minmax(320px,1.2fr) 250px;
        gap: 24px;
        align-items: center
    }

    .reference-products-cta--full img {
        width: 38px;
        height: 56px;
        object-fit: contain;
        filter: brightness(1.22)
    }

    .reference-products-cta--full h3 {
        margin: 0;
        font-family: var(--font-h);
        font-size: 26px;
        line-height: 1;
        font-weight: 850;
        letter-spacing: -.035em
    }

    .reference-products-cta--full p {
        margin: 0;
        color: rgba(255,255,255,.86);
        font-size: 14px;
        line-height: 1.35;
        font-weight: 600
    }

    .reference-products-cta--full a {
        height: 42px;
        border-radius: 7px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 18px;
        color: var(--navy);
        background: #fff;
        font-size: 12px;
        font-weight: 950;
        box-shadow: 0 12px 26px rgba(0,0,0,.12)
    }

    .reference-products-cta--full b {
        font-size: 24px;
        line-height: 1;
        font-weight: 400
    }

.reference-technology-flow--improved {
    padding-top: 28px
}

    .reference-technology-flow--improved .reference-flow-copy h3 {
        color: #087d96
    }

    .reference-technology-flow--improved .reference-flow-step span {
        width: 64px;
        height: 64px;
        position: relative
    }

        .reference-technology-flow--improved .reference-flow-step span:after {
            content: '';
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            background: inherit;
            opacity: .18;
            z-index: -1;
            filter: blur(1px)
        }

    .reference-technology-flow--improved .reference-flow-step svg {
        width: 36px;
        height: 36px
    }

    .reference-technology-flow--improved .reference-flow-step b {
        font-size: 11px;
        color: #0878de
    }

    .reference-technology-flow--improved .reference-flow-step small {
        font-size: 10.5px;
        max-width: 96px
    }

.science-safe-claims {
    width: min(1240px,calc(100% - 112px));
    margin: 18px auto 86px;
    padding: 34px 42px;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 18px;
    background: linear-gradient(135deg,#fff,#f3fbff);
    box-shadow: 0 14px 38px rgba(11,46,103,.045)
}

    .science-safe-claims h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -.035em
    }

    .science-safe-claims p:not(.eyebrow) {
        margin: 12px 0 0;
        font-size: 15px;
        line-height: 1.55;
        font-weight: 650;
        color: #506178;
        max-width: 760px
    }

@media(max-width:1200px) {
    .science-tech-grid--detailed {
        grid-template-columns: repeat(2,1fr)
    }

    .reference-products-cta--full .reference-products-cta__inner {
        grid-template-columns: 50px 1fr;
        gap: 18px;
        padding: 20px 0
    }

    .reference-products-cta--full p, .reference-products-cta--full a {
        grid-column: 2
    }
}

@media(max-width:720px) {
    .science-tech-grid--detailed {
        grid-template-columns: 1fr
    }

    .reference-products-cta--full .reference-products-cta__inner {
        width: calc(100% - 32px);
        grid-template-columns: 1fr
    }

    .reference-products-cta--full img {
        display: none
    }

    .reference-products-cta--full p, .reference-products-cta--full a {
        grid-column: auto
    }

    .science-safe-claims {
        width: calc(100% - 32px);
        padding: 28px
    }
}
/* ========================================================= v0.4.7 — Science page width cleanup + final bottom CTA ========================================================= */
.science-safe-claims {
    display: none !important
}

.science-reference-block {
    width: min(1320px,calc(100% - 112px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

.reference-ingredient-library {
    border-radius: 14px;
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
}

.reference-technology-flow {
    width: 100%;
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

.reference-technology-flow--improved {
    padding-top: 28px !important;
    padding-bottom: 24px !important;
}

.reference-products-cta--full {
    margin: 30px 0 0 !important
}

.science-healthy-cta {
    width: min(1320px,calc(100% - 112px));
    min-height: 150px;
    margin: 32px auto 86px;
    display: grid;
    grid-template-columns: 420px minmax(0,1fr) 290px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(11,46,103,.055);
    border-radius: 14px;
    background: linear-gradient(90deg,#eef8ff 0%,#fff 48%,#eaf6ff 100%);
    box-shadow: 0 16px 42px rgba(11,46,103,.055);
}

.science-healthy-cta__image {
    height: 150px;
    overflow: hidden;
    position: relative;
}

    .science-healthy-cta__image:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 42%;
        background: linear-gradient(90deg,rgba(238,248,255,0),#eef8ff 78%);
    }

    .science-healthy-cta__image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center 54%;
    }

.science-healthy-cta__copy {
    padding: 0 38px
}

    .science-healthy-cta__copy h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 34px;
        line-height: 1.08;
        font-weight: 900;
        letter-spacing: -.045em;
    }

    .science-healthy-cta__copy p {
        margin: 14px 0 0;
        color: #087d96;
        font-size: 16px;
        line-height: 1.55;
        font-weight: 750;
        max-width: 560px;
    }

.science-healthy-cta__button {
    justify-self: center;
    height: 56px;
    min-width: 238px;
    padding: 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg,#063bba,#0878de);
    box-shadow: 0 16px 30px rgba(8,120,222,.22);
    font-family: var(--font-h);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .01em;
}

    .science-healthy-cta__button span {
        font-size: 20px;
        line-height: 1
    }

@media(max-width:1200px) {
    .science-reference-block, .science-healthy-cta {
        width: min(1120px,calc(100% - 72px)) !important
    }

    .science-healthy-cta {
        grid-template-columns: 320px 1fr;
        gap: 0;
        padding-right: 28px
    }

    .science-healthy-cta__button {
        grid-column: 2;
        margin: 20px 0 26px;
        justify-self: start
    }
}

@media(max-width:720px) {
    .science-reference-block, .science-healthy-cta {
        width: calc(100% - 32px) !important
    }

    .science-healthy-cta {
        grid-template-columns: 1fr;
        padding-right: 0
    }

    .science-healthy-cta__copy {
        padding: 26px 24px 0
    }

    .science-healthy-cta__button {
        grid-column: auto;
        margin: 24px;
        justify-self: stretch
    }
}
/* ========================================================= v0.4.8 — Our Science hero image background ========================================================= */
.science-hero--image-bg {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    display: flex;
    align-items: center;
    padding: 74px 72px;
    border-radius: 0;
    background: #f5fbff;
    isolation: isolate;
}

    .science-hero--image-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(90deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.92) 28%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.08) 74%,rgba(255,255,255,.0) 100%);
    }

    .science-hero--image-bg .science-hero__bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        display: block;
    }

    .science-hero--image-bg .science-hero__copy {
        position: relative;
        z-index: 2;
        max-width: 620px;
    }

    .science-hero--image-bg .science-hero__visual {
        display: none !important;
    }

    .science-hero--image-bg h1 {
        margin: 0;
        color: #0b2e67;
        font-size: clamp(3.3rem,5vw,5.8rem);
        line-height: .98;
        letter-spacing: -.065em;
    }

    .science-hero--image-bg .eyebrow {
        color: #0878de;
        letter-spacing: .18em;
    }

    .science-hero--image-bg .science-hero__copy > p:not(.eyebrow) {
        max-width: 520px;
        color: #26354b;
        font-size: 1.35rem;
        line-height: 1.45;
    }

@media(max-width:900px) {
    .science-hero--image-bg {
        padding: 56px 28px;
        min-height: 420px;
    }

        .science-hero--image-bg::before {
            background: linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,255,255,.72));
        }
}
/* ========================================================= v0.4.9 — Academy Page Template ========================================================= */
.academy-page {
    background: #fff;
    color: #0b2e67;
    overflow: hidden
}

.academy-hero-page {
    width: min(1540px,calc(100% - 64px));
    margin: 108px auto 36px;
    min-height: 520px;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 44% 56%;
    position: relative;
    background: linear-gradient(100deg,#fff 0%,#f6fbff 47%,#e9f6ff 100%);
    box-shadow: 0 18px 48px rgba(11,46,103,.07);
    border: 1px solid rgba(11,46,103,.045)
}

.academy-hero-page__copy {
    position: relative;
    z-index: 3;
    padding: 64px 60px
}

.academy-hero-page h1 {
    margin: 0;
    color: var(--navy);
    font-family: var(--font-h);
    font-size: clamp(52px,4.8vw,82px);
    line-height: 1.02;
    font-weight: 900;
    letter-spacing: -.055em
}

    .academy-hero-page h1 span {
        color: #118fd1
    }

.academy-hero-page__copy > p:not(.eyebrow) {
    margin: 26px 0 0;
    max-width: 540px;
    color: #263f61;
    font-size: 18px;
    line-height: 1.58;
    font-weight: 600
}

.academy-hero-page__actions {
    display: flex;
    gap: 18px;
    margin-top: 34px;
    flex-wrap: wrap
}

.academy-hero-page__features {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-top: 76px;
    max-width: 650px
}

    .academy-hero-page__features span {
        display: grid;
        justify-items: center;
        text-align: center;
        gap: 12px;
        color: var(--navy);
        font-size: 12px;
        font-weight: 900;
        line-height: 1.25
    }

    .academy-hero-page__features i {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eaf6ff;
        color: #0878de;
        font-style: normal;
        font-size: 24px;
        box-shadow: 0 10px 24px rgba(11,46,103,.06)
    }

.academy-hero-page__visual {
    position: relative;
    min-height: 520px
}

.academy-hero-page__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .78
}

.academy-hero-page__foot {
    position: absolute;
    left: 92px;
    top: 72px;
    width: 140px;
    height: 210px;
    object-fit: contain;
    filter: drop-shadow(0 14px 28px rgba(8,120,222,.16))
}

.academy-laptop {
    position: absolute;
    right: 210px;
    bottom: 86px;
    width: 430px;
    height: 245px;
    border-radius: 16px 16px 10px 10px;
    background: linear-gradient(180deg,#1c2637,#0d1524);
    box-shadow: 0 30px 55px rgba(11,46,103,.28);
    padding: 14px
}

    .academy-laptop:after {
        content: "";
        position: absolute;
        left: -40px;
        right: -40px;
        bottom: -24px;
        height: 34px;
        border-radius: 0 0 22px 22px;
        background: linear-gradient(180deg,#cfd8e4,#8c99aa);
        box-shadow: 0 20px 34px rgba(11,46,103,.18)
    }

.academy-laptop__screen {
    height: 100%;
    border-radius: 9px;
    background: linear-gradient(135deg,#e8f7ff,#fff);
    display: grid;
    place-items: center;
    text-align: center;
    color: var(--navy);
    position: relative;
    z-index: 2
}

    .academy-laptop__screen strong {
        font-family: var(--font-h);
        font-size: 25px;
        line-height: 1.05
    }

.academy-laptop__icons {
    display: flex;
    gap: 20px;
    font-size: 10px;
    color: #3c5876;
    font-weight: 700
}

.academy-laptop__screen em {
    font-style: normal;
    border-radius: 5px;
    background: #0753ba;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    padding: 9px 16px
}

.academy-hero-page__product {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 26px 35px rgba(11,46,103,.18))
}

.academy-hero-page__product--powder {
    right: 60px;
    bottom: 76px;
    height: 260px
}

.academy-hero-page__product--spray {
    right: 12px;
    bottom: 70px;
    height: 155px
}

.academy-flask {
    position: absolute;
    right: 0;
    bottom: 76px;
    width: 64px;
    height: 200px;
    border: 2px solid rgba(11,46,103,.18);
    border-top: 0;
    border-radius: 0 0 26px 26px;
    background: rgba(255,255,255,.35)
}

    .academy-flask:before {
        content: "";
        position: absolute;
        left: 18px;
        right: 18px;
        top: -58px;
        height: 60px;
        border: 2px solid rgba(11,46,103,.18);
        border-bottom: 0;
        border-radius: 10px 10px 0 0
    }

.academy-section-head {
    width: min(1540px,calc(100% - 108px));
    margin: 0 auto 24px
}

    .academy-section-head h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 32px;
        line-height: 1.18;
        letter-spacing: -.035em
    }

.academy-topics, .academy-articles {
    padding: 34px 0 20px
}

.academy-topic-grid, .academy-article-grid {
    width: min(1540px,calc(100% - 108px));
    margin: 0 auto;
    display: grid;
    gap: 24px
}

.academy-topic-grid {
    grid-template-columns: repeat(5,1fr)
}

    .academy-topic-grid article {
        min-height: 300px;
        border-radius: 14px;
        border: 1px solid rgba(11,46,103,.07);
        background: #fff;
        box-shadow: 0 14px 34px rgba(11,46,103,.045);
        padding: 34px 24px 26px;
        position: relative
    }

        .academy-topic-grid article span {
            position: absolute;
            top: 24px;
            left: 24px;
            width: 42px;
            height: 42px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: #064fb5;
            color: #fff;
            font-weight: 900
        }

    .academy-topic-grid i {
        display: block;
        margin-top: 64px;
        color: #0878de;
        font-style: normal;
        font-size: 54px;
        line-height: 1
    }

    .academy-topic-grid h3 {
        margin: 24px 0 12px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 18px;
        line-height: 1.25
    }

    .academy-topic-grid p {
        margin: 0;
        color: #344966;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 600
    }

    .academy-topic-grid a {
        position: absolute;
        left: 24px;
        bottom: 22px;
        color: #0878de;
        font-size: 26px
    }

.academy-article-grid {
    grid-template-columns: repeat(4,1fr)
}

.academy-article-card {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(11,46,103,.055);
    transition: transform .18s ease,box-shadow .18s ease
}

    .academy-article-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 44px rgba(11,46,103,.09)
    }

    .academy-article-card img {
        height: 168px;
        width: 100%;
        object-fit: cover
    }

    .academy-article-card span {
        display: inline-flex;
        margin: 16px 18px 8px;
        border: 1px solid rgba(8,120,222,.22);
        border-radius: 5px;
        color: #0878de;
        background: #fff;
        padding: 4px 9px;
        font-size: 11px;
        font-weight: 900
    }

    .academy-article-card h3 {
        margin: 0 18px 10px;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 20px;
        line-height: 1.22
    }

    .academy-article-card p {
        margin: 0 18px 18px;
        color: #344966;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 600
    }

    .academy-article-card small {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0 18px 20px;
        color: #77869a;
        font-size: 13px;
        font-weight: 650
    }

    .academy-article-card b {
        color: #0878de;
        font-size: 22px
    }

.academy-center-action {
    display: flex;
    justify-content: center;
    margin: 34px 0 24px
}

.academy-scan-cta, .academy-pharmacy-block, .academy-newsletter {
    width: min(1540px,calc(100% - 108px));
    margin: 38px auto;
    border-radius: 14px;
    overflow: hidden
}

.academy-scan-cta {
    min-height: 140px;
    display: grid;
    grid-template-columns: 260px 1fr 330px 78px;
    align-items: center;
    background: linear-gradient(90deg,#eef8ff,#fff,#eaf6ff);
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    position: relative
}

    .academy-scan-cta > img:not(.academy-scan-cta__foot) {
        height: 140px;
        width: 100%;
        object-fit: cover
    }

    .academy-scan-cta h2, .academy-pharmacy-block h2, .academy-newsletter h2 {
        margin: 0;
        color: var(--navy);
        font-family: var(--font-h);
        font-size: 30px;
        line-height: 1.18
    }

    .academy-scan-cta p, .academy-pharmacy-block p:not(.eyebrow), .academy-newsletter p {
        margin: 10px 0 0;
        color: #087d96;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 650
    }

    .academy-scan-cta .btn {
        justify-self: center
    }

.academy-scan-cta__foot {
    height: 92px;
    width: 58px;
    object-fit: contain
}

.academy-pharmacy-block {
    display: grid;
    grid-template-columns: 150px 1fr 330px;
    align-items: center;
    gap: 34px;
    padding: 34px 42px;
    background: linear-gradient(100deg,#f1fffd,#f7fffb,#f5fbff);
    border: 1px solid rgba(0,126,148,.09);
    box-shadow: 0 14px 34px rgba(11,46,103,.04)
}

.academy-pharmacy-block__icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8fbff;
    color: #0878de;
    font-size: 54px;
    box-shadow: inset 0 0 0 1px rgba(8,120,222,.08)
}

.academy-newsletter {
    display: grid;
    grid-template-columns: 130px 1fr 520px;
    align-items: center;
    gap: 30px;
    padding: 38px 42px;
    background: linear-gradient(135deg,#053b9d,#0494c8);
    color: #fff;
    box-shadow: 0 18px 45px rgba(8,120,222,.18)
}

    .academy-newsletter span {
        width: 84px;
        height: 84px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid rgba(255,255,255,.25);
        font-size: 42px
    }

    .academy-newsletter h2 {
        color: #fff
    }

    .academy-newsletter p {
        color: rgba(255,255,255,.86)
    }

.academy-newsletter__form {
    display: grid;
    grid-template-columns: 1fr 170px;
    gap: 14px
}

    .academy-newsletter__form input {
        height: 54px;
        border: 0;
        border-radius: 8px;
        padding: 0 20px;
        font-size: 15px
    }

    .academy-newsletter__form button {
        border: 0;
        border-radius: 8px;
        background: #fff;
        color: #063b7c;
        font-weight: 900;
        font-size: 14px
    }

.academy-newsletter.is-sent {
    outline: 3px solid rgba(34,199,216,.35)
}

@media(max-width:1200px) {
    .academy-hero-page {
        grid-template-columns: 1fr
    }

    .academy-hero-page__visual {
        min-height: 480px
    }

    .academy-topic-grid {
        grid-template-columns: repeat(3,1fr)
    }

    .academy-article-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .academy-scan-cta {
        grid-template-columns: 1fr;
        padding: 24px
    }

        .academy-scan-cta > img:not(.academy-scan-cta__foot) {
            display: none
        }

    .academy-scan-cta__foot {
        position: absolute;
        right: 20px;
        bottom: 20px
    }

    .academy-pharmacy-block, .academy-newsletter {
        grid-template-columns: 1fr
    }

    .academy-newsletter__form {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .academy-hero-page, .academy-topic-grid, .academy-article-grid, .academy-scan-cta, .academy-pharmacy-block, .academy-newsletter, .academy-section-head {
        width: calc(100% - 36px)
    }

    .academy-hero-page__copy {
        padding: 44px 28px
    }

    .academy-hero-page__features {
        grid-template-columns: repeat(2,1fr)
    }

    .academy-laptop {
        display: none
    }

    .academy-hero-page__foot {
        left: 42px
    }

    .academy-topic-grid, .academy-article-grid {
        grid-template-columns: 1fr
    }

    .academy-pharmacy-block, .academy-newsletter {
        padding: 28px 24px
    }
}
/* ========================================================= v0.5.0 — About DermoFoot page ========================================================= */
.about-page {
    padding: 104px 0 0;
    background: #fff;
    color: #344966
}

    .about-page h1, .about-page h2, .about-page h3 {
        font-family: var(--font-h);
        color: var(--navy);
        letter-spacing: -.04em
    }

.about-panel, .about-card-wide, .about-why, .about-pillars, .about-glass-block, .about-promise, .about-stats, .about-final-cta {
    width: min(1360px,calc(100% - 104px));
    margin-left: auto;
    margin-right: auto
}

.about-eyebrow {
    margin: 0 0 18px;
    color: var(--blue);
    font-family: var(--font-h);
    font-size: 13px;
    line-height: 1;
    font-weight: 950;
    letter-spacing: .035em
}

.about-eyebrow--green {
    color: #087d69
}

.about-hero {
    min-height: 430px;
    border-radius: 0;
    display: grid;
    grid-template-columns: minmax(0,42%) minmax(0,58%);
    align-items: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(90deg,#fff 0%,#f8fcff 40%,#eaf6ff 100%)
    
}

    .about-hero:after {
        content: "";
        position: absolute;
        inset: 0;
        background: url('/assets/about/about-hero-bg.png') right center/auto 100% no-repeat;
        opacity: .96
    }

.about-hero__content {
    position: relative;
    z-index: 2;
    padding: 48px 0 58px 30px;
    max-width: 520px
}

.about-hero h1 {
    margin: 0;
    font-size: clamp(44px,4.6vw,66px);
    line-height: 1.03;
    font-weight: 900
}

.about-hero p {
    font-size: 15px;
    line-height: 1.62;
    font-weight: 650;
    margin: 18px 0 0;
    max-width: 470px
}

.about-hero .about-lead {
    margin-top: 26px
}

.about-hero__visual {
    min-height: 420px
}

.about-actions {
    display: flex;
    gap: 22px;
    flex-wrap: wrap;
    margin-top: 30px
}

.about-btn {
    height: 48px;
    padding: 0 24px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: .015em;
    text-decoration: none
}

.about-btn--primary {
    background: #034fb4;
    color: #fff;
    box-shadow: 0 14px 26px rgba(3,79,180,.16)
}

.about-btn--outline {
    border: 2px solid rgba(3,79,180,.26);
    color: #034fb4;
    background: rgba(255,255,255,.72)
}

.about-btn--green {
    border: 1px solid rgba(0,110,90,.28);
    color: #087d69;
    background: rgba(255,255,255,.64);
    min-width: 180px
}

.about-btn--white {
    background: #fff;
    color: #034fb4;
    min-width: 180px
}

.about-btn--outline-white {
    border: 1px solid rgba(255,255,255,.65);
    color: #fff;
    background: rgba(255,255,255,.08);
    min-width: 180px
}

.about-card-wide {
    margin-top: 38px;
    border-radius: 15px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 190px minmax(0,1fr) 380px;
    gap: 30px;
    align-items: center;
    padding: 30px;
    border: 1px solid rgba(11,46,103,.055);
    background: linear-gradient(120deg,#f7fbff,#fff 55%,#eef8ff);
    box-shadow: 0 16px 38px rgba(11,46,103,.055)
}

.about-mission__icon, .about-pharmacy__icon {
    width: 148px;
    height: 148px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,.8);
    box-shadow: 0 14px 32px rgba(11,46,103,.08)
}
    .about-mission__icon img {
        height: 120px;
    }
    .about-mission__icon svg, .about-pharmacy__icon svg {
        width: 118px;
        height: 118px;
        stroke: #0b55bd;
        stroke-width: 3.2;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.about-card-wide h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.16;
    font-weight: 900
}

.about-card-wide p {
    margin: 16px 0 0;
    font-size: 14px;
    line-height: 1.62;
    font-weight: 650
}

.about-card-wide strong {
    display: block;
    margin-top: 20px;
    color: #0352b6;
    font-family: var(--font-h);
    font-size: 14px;
    line-height: 1.5
}

.about-mission__image {
    height: 210px;
    border-radius: 13px;
    overflow: hidden
}

    .about-mission__image img {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

.about-why {
    margin-top: 42px;
    display: grid;
    grid-template-columns: 360px minmax(0,1fr);
    gap: 62px;
    align-items: start;
    padding: 0 0 34px;
    border-bottom: 1px solid rgba(11,46,103,.08)
}

    .about-why h2 {
        margin: 0;
        font-size: 31px;
        line-height: 1.16;
        font-weight: 900
    }

.about-why__text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 42px
}

    .about-why__text p {
        margin: 0;
        font-size: 15px;
        line-height: 1.65;
        font-weight: 650
    }

.about-vertical-rule p + p {
    border-left: 1px solid rgba(11,46,103,.12);
    padding-left: 42px
}

.about-pillars {
    margin-top: 34px
}

.about-pillars__grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 38px;
    margin-top: 24px
}

.about-pillars article {
    text-align: center
}

.about-pillars span {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    background: #eef7ff;
    box-shadow: 0 14px 30px rgba(11,46,103,.08)
}
    .about-pillars span img {
        width: 58px;
        height: 58px;
    }

    .about-pillars svg {
    width: 58px;
    height: 58px;
    stroke: #0b55bd;
    stroke-width: 2.8;
    stroke-linecap: round;
    stroke-linejoin: round
}

.about-pillars h3 {
    margin: 0;
    font-size: 16px;
    line-height: 1.18;
    font-weight: 900
}

.about-pillars p {
    margin: 12px auto 0;
    max-width: 245px;
    color: #506178;
    font-size: 12.5px;
    line-height: 1.55;
    font-weight: 650
}

.about-glass-block {
    margin-top: 44px;
    border-radius: 15px;
    padding: 34px 42px;
    display: grid;
    grid-template-columns: minmax(0,1fr) minmax(0,1.18fr);
    gap: 32px;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(11,46,103,.06);
    background: linear-gradient(100deg,rgba(242,249,255,.98),rgba(255,255,255,.74)),url('/assets/about/about-hero-bg.png') right center/auto 135% no-repeat;
    box-shadow: 0 16px 38px rgba(11,46,103,.055)
}

    .about-glass-block h2 {
        margin: 0;
        font-size: 28px;
        line-height: 1.17;
        font-weight: 900
    }

    .about-glass-block p {
        font-size: 14px;
        line-height: 1.62;
        font-weight: 650
    }

.about-science__icons {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 22px
}

    .about-science__icons article {
        text-align: center
    }

    .about-science__icons span {
        width: 100px;
        height: 100px;
        margin: 0 auto 12px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: rgba(255,255,255,.75);
        border: 1px solid rgba(11,46,103,.08);
        box-shadow: 0 14px 32px rgba(11,46,103,.08);
        font-size: 48px;
        color: #0b55bd
    }

    .about-science__icons strong {
        font-family: var(--font-h);
        color: var(--navy);
        font-size: 14px;
        line-height: 1.2
    }

.about-quality {
    grid-template-columns: 370px minmax(0,1fr);
    padding: 0;
    gap: 36px
}

.about-lab-visual svg {
    width: 100%;
    height: 100%;
    display: block
}

.about-quality__copy {
    padding: 34px 36px 34px 0
}

.about-checklist {
    margin: 22px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    list-style: none
}

    .about-checklist li {
        position: relative;
        padding-left: 27px;
        color: #344966;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 700
    }

        .about-checklist li:before {
            content: '✓';
            position: absolute;
            left: 0;
            top: 0;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            border: 1px solid rgba(8,120,222,.36);
            color: #0878de;
            font-size: 12px
        }

.about-card-wide--softgreen {
    grid-template-columns: 150px minmax(0,1fr) 210px;
    background: linear-gradient(115deg,#f5fffb,#fff 58%,#f1fbf5)
}

.about-pharmacy__icon svg {
    stroke: #087d69
}

.about-card-wide--softgreen h2 {
    color: #087d69
}

.about-promise {
    margin-top: 36px;
    min-height: 205px;
    border-radius: 15px;
    padding: 34px 48px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 330px;
    gap: 30px;
    align-items: center;
    background: linear-gradient(90deg,#fff,#f6fbff),radial-gradient(circle at 82% 35%,rgba(8,120,222,.15),transparent 35%);
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    overflow: hidden
}

    .about-promise h2 {
        font-size: 27px;
        margin: 0
    }

    .about-promise p {
        font-size: 14px;
        line-height: 1.62;
        font-weight: 650;
        max-width: 720px
    }

    .about-promise img {
        height: 165px;
        width: auto;
        justify-self: center;
        filter: drop-shadow(0 16px 22px rgba(8,120,222,.12))
    }

.about-stats {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 18px;
    border-radius: 15px;
    padding: 24px;
    background: linear-gradient(90deg,#f5fbff,#edf7ff);
    border: 1px solid rgba(11,46,103,.055)
}

    .about-stats article {
        display: flex;
        align-items: center;
        gap: 18px
    }

    .about-stats strong {
        font-family: var(--font-h);
        font-size: 36px;
        line-height: 1;
        color: #0b55bd;
        font-weight: 950
    }

    .about-stats span {
        font-size: 13px;
        line-height: 1.35;
        font-weight: 750;
        color: #0b2e67
    }

.about-final-cta {
    margin-top: 28px;
    margin-bottom: 54px;
    border-radius: 15px;
    padding: 26px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    background: linear-gradient(105deg,#033d98,#007ec6);
    color: #fff;
    box-shadow: 0 18px 36px rgba(3,79,180,.18);
    overflow: hidden
}

    .about-final-cta > div {
        display: flex;
        align-items: center;
        gap: 26px
    }

    .about-final-cta img {
        width: 60px;
        height: 96px;
        object-fit: contain
    }

    .about-final-cta h2 {
        color: #fff;
        margin: 0;
        font-size: 25px
    }

    .about-final-cta p {
        margin: 8px 0 0;
        color: rgba(255,255,255,.85);
        font-size: 14px;
        font-weight: 650
    }

    .about-final-cta nav {
        display: flex;
        gap: 16px;
        flex-wrap: wrap
    }

@media(max-width:1100px) {
    .about-page {
        padding-top: 90px
    }

    .about-panel, .about-card-wide, .about-why, .about-pillars, .about-glass-block, .about-promise, .about-stats, .about-final-cta {
        width: calc(100% - 48px)
    }

    .about-hero {
        grid-template-columns: 1fr
    }

        .about-hero:after {
            opacity: .36
        }

    .about-hero__content {
        padding: 44px 8px
    }

    .about-card-wide, .about-quality, .about-card-wide--softgreen {
        grid-template-columns: 1fr
    }

    .about-mission__image {
        height: 230px
    }

    .about-why, .about-why__text, .about-glass-block {
        grid-template-columns: 1fr
    }

    .about-vertical-rule p + p {
        border-left: 0;
        padding-left: 0
    }

    .about-pillars__grid, .about-science__icons, .about-stats {
        grid-template-columns: repeat(2,1fr)
    }

    .about-final-cta {
        display: grid
    }

    .about-checklist {
        grid-template-columns: 1fr
    }
}

@media(max-width:640px) {
    .about-panel, .about-card-wide, .about-why, .about-pillars, .about-glass-block, .about-promise, .about-stats, .about-final-cta {
        width: calc(100% - 28px)
    }

    .about-hero h1 {
        font-size: 38px
    }

    .about-actions, .about-final-cta nav {
        display: grid
    }

    .about-btn {
        width: 100%
    }

    .about-pillars__grid, .about-science__icons, .about-stats {
        grid-template-columns: 1fr
    }

    .about-promise {
        grid-template-columns: 1fr
    }

        .about-promise img {
            display: none
        }

    .about-final-cta > div {
        align-items: flex-start
    }

    .about-final-cta img {
        display: none
    }
}
/* ========================================================= v0.5.3 — Find a Pharmacy page ========================================================= */
.find-page {
    padding: 104px 0 54px;
    background: #fff;
    color: #0b2e67;
    overflow: hidden
}

    .find-page h1, .find-page h2, .find-page h3 {
        font-family: var(--font-h);
        color: var(--navy);
        letter-spacing: -.04em
    }

.find-eyebrow {
    margin: 0 0 14px;
    color: #0878de;
    font-family: var(--font-h);
    font-size: 13px;
    font-weight: 950;
    letter-spacing: .035em
}

.find-eyebrow--green {
    color: #087d69
}

.find-hero, .find-filters, .find-results-map, .find-products, .find-help-grid, .find-faq, .find-final-cta {
    width: min(1540px,calc(100% - 96px));
    margin-left: auto;
    margin-right: auto
}

.find-hero {
    min-height: 410px;
    display: grid;
    grid-template-columns: 44% 56%;
    align-items: center;
    overflow: hidden;
    background: linear-gradient(90deg,#fff 0%,#f8fcff 44%,#eaf6ff 100%);
    border: 1px solid rgba(11,46,103,.045);
    box-shadow: 0 16px 42px rgba(11,46,103,.045)
}

.find-hero__copy {
    position: relative;
    z-index: 3;
    padding: 58px 0 58px 42px;
    max-width: 620px
}

.find-hero h1 {
    margin: 0;
    font-size: clamp(44px,4.2vw,68px);
    line-height: 1.04;
    font-weight: 900
}

.find-hero__copy > p:not(.find-eyebrow) {
    max-width: 535px;
    margin: 22px 0 0;
    color: #263f61;
    font-size: 16px;
    line-height: 1.62;
    font-weight: 650
}

.find-hero__visual {
    height: 410px;
    position: relative
}

    .find-hero__visual img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center right;
        opacity: .94
    }

.find-search {
    margin-top: 32px;
    width: min(620px,100%);
    height: 58px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 160px;
    border: 1px solid rgba(8,120,222,.26);
    border-radius: 7px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 14px 30px rgba(11,46,103,.08)
}

    .find-search label {
        display: flex;
        align-items: center;
        gap: 14px;
        min-width: 0;
        padding: 0 20px
    }

    .find-search span {
        color: #0878de;
        font-size: 22px
    }

    .find-search input {
        width: 100%;
        border: 0;
        outline: 0;
        color: #0b2e67;
        font-size: 15px;
        font-weight: 700
    }

        .find-search input::placeholder {
            color: #8494a8
        }

    .find-search button {
        border: 0;
        background: #044fb5;
        color: #fff;
        font-weight: 950;
        letter-spacing: .02em;
        cursor: pointer
    }

.find-use-location {
    height: 48px;
    margin-top: 16px;
    padding: 0 22px;
    border: 1px solid rgba(8,120,222,.38);
    border-radius: 6px;
    background: #fff;
    color: #044fb5;
    font-size: 13px;
    font-weight: 950;
    cursor: pointer
}

    .find-use-location span {
        font-size: 18px;
        margin-right: 8px
    }

.find-filters {
    margin-top: 34px;
    padding: 0 0 28px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(11,46,103,.08)
}

.find-filter-label {
    font-size: 12px;
    color: #0b55bd;
    font-weight: 950;
    margin-right: 4px
}

.find-filter-tabs {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

    .find-filter-tabs button, .find-sort {
        height: 38px;
        border: 1px solid rgba(11,46,103,.13);
        background: #fff;
        border-radius: 999px;
        padding: 0 20px;
        color: #0b2e67;
        font-size: 12px;
        font-weight: 850;
        cursor: pointer
    }

        .find-filter-tabs button.is-active {
            background: #064fb5;
            color: #fff;
            border-color: #064fb5;
            box-shadow: 0 12px 24px rgba(6,79,181,.16)
        }

.find-check {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #344966;
    font-size: 12px;
    font-weight: 750;
    margin-left: auto
}

    .find-check + .find-check {
        margin-left: 0
    }

    .find-check input {
        width: 16px;
        height: 16px;
        accent-color: #064fb5
    }

.find-sort {
    margin-left: 0;
    border-radius: 7px;
    padding-right: 30px
}

.find-results-map {
    margin-top: 30px;
    display: grid;
    grid-template-columns: minmax(390px,.82fr) minmax(0,1.18fr);
    gap: 30px;
    align-items: start
}

.find-section-title--small p {
    margin: 0 0 16px;
    color: #0b55bd;
    font-family: var(--font-h);
    font-size: 13px;
    font-weight: 950
}

.find-results {
    min-width: 0
}

.find-pharmacy-card {
    display: grid;
    grid-template-columns: 112px minmax(0,1fr);
    grid-template-rows: auto auto;
    margin-bottom: 14px;
    border: 1px solid rgba(11,46,103,.075);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(11,46,103,.055);
    transition: opacity .18s ease,transform .18s ease,box-shadow .18s ease
}

    .find-pharmacy-card.is-hidden {
        display: none
    }

    .find-pharmacy-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 36px rgba(11,46,103,.085)
    }

.find-card-icon {
    grid-row: 1/3;
    display: grid;
    place-items: center;
    color: #00a36a;
    font-size: 48px;
    border-right: 1px solid rgba(11,46,103,.06);
    background: linear-gradient(180deg,#fff,#f8fcff)
}
    .find-card-icon img {
        width: 50px;
        height: 50px;
    }
    .find-card-icon:before {
        content: '';
        position: absolute
    }

.find-card-copy {
    padding: 20px 22px 14px
}

    .find-card-copy h2 {
        margin: 0 0 8px;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 900
    }

    .find-card-copy p {
        margin: 5px 0;
        color: #344966;
        font-size: 13px;
        line-height: 1.35;
        font-weight: 700
    }

    .find-card-copy .find-card-area {
        color: #0b55bd
    }

    .find-card-copy .find-card-status {
        color: #008a62
    }

    .find-card-copy .find-card-hours {
        color: #0a4e96
    }
.academy-scan-cta {
    gap: 36px;
}
.find-card-actions {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(11,46,103,.06)
}

    .find-card-actions a, .find-card-actions button {
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        border-right: 1px solid rgba(11,46,103,.06);
        background: #fff;
        color: #044fb5;
        font-size: 11px;
        font-weight: 950;
        cursor: pointer
    }

    .find-card-actions button {
        font-family: var(--font)
    }

.find-load-more {
    width: 100%;
    height: 48px;
    border-radius: 7px;
    border: 1px solid rgba(8,120,222,.35);
    background: #fff;
    color: #044fb5;
    font-weight: 950;
    cursor: pointer
}

.find-empty {
    display: none;
    margin: 20px 0;
    padding: 24px;
    border-radius: 12px;
    border: 1px solid rgba(8,120,222,.13);
    background: #f7fbff;
    color: #0b2e67
}

    .find-empty.is-visible {
        display: grid;
        gap: 8px
    }

    .find-empty strong {
        font-family: var(--font-h);
        font-size: 18px
    }

    .find-empty span {
        color: #506178;
        font-weight: 650
    }

.find-map-panel {
    min-height: 680px;
    border-radius: 15px;
    padding: 28px 28px 24px;
    background: #f5f9ff;
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 16px 38px rgba(11,46,103,.055)
}

    .find-map-panel h2 {
        margin: 0;
        font-size: 25px;
        line-height: 1.2
    }

    .find-map-panel > p {
        margin: 14px 0 20px;
        color: #263f61;
        font-size: 14px;
        line-height: 1.55;
        font-weight: 650;
        max-width: 720px
    }

.find-map-shell {
    height: 470px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    background: #e6f2fb;
    box-shadow: inset 0 0 0 1px rgba(11,46,103,.04)
}

    .find-map-shell iframe {
        width: 100%;
        height: 100%;
        border: 0;
        filter: saturate(.85) brightness(1.04)
    }

    .find-map-shell .pin {
        position: absolute;
        width: 42px;
        height: 42px;
        border-radius: 50% 50% 50% 0;
        transform: rotate(-45deg);
        display: grid;
        place-items: center;
        background: #0753ba;
        color: #fff;
        font-size: 18px;
        box-shadow: 0 12px 20px rgba(7,83,186,.22)
    }

        .find-map-shell .pin::first-letter {
            transform: rotate(45deg)
        }

.pin--one {
    left: 22%;
    top: 25%
}

.pin--two {
    left: 44%;
    top: 52%;
    background: #003f9c !important
}

.pin--three {
    right: 22%;
    top: 30%
}

.pin--four {
    right: 36%;
    bottom: 16%;
    background: #11a36f !important
}

.find-map-note {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-top: 20px !important;
    color: #344966 !important
}

    .find-map-note span {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: #0878de;
        font-weight: 950;
        box-shadow: 0 8px 18px rgba(11,46,103,.06)
    }

.find-products {
    margin-top: 34px
}

    .find-products h2 {
        margin: 0 0 18px;
        font-size: 30px;
        line-height: 1.12
    }

.find-product-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 16px
}

    .find-product-grid article, .find-products-cta {
        min-height: 172px;
        border-radius: 13px;
        border: 1px solid rgba(11,46,103,.06);
        background: linear-gradient(135deg,#f8fcff,#fff);
        box-shadow: 0 12px 30px rgba(11,46,103,.045);
        display: grid;
        grid-template-columns: 110px 1fr;
        gap: 14px;
        align-items: center;
        padding: 18px
    }

        .find-product-grid article img {
            height: 135px;
            width: 96px;
            object-fit: contain;
            filter: drop-shadow(0 12px 16px rgba(11,46,103,.10))
        }

    .find-product-grid h3 {
        margin: 0 0 8px;
        font-size: 19px;
        line-height: 1.15;
        font-weight: 900
    }

    .find-product-grid p {
        margin: 0;
        color: #344966;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 650
    }

.find-products-cta {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
    color: #044fb5;
    font-size: 13px;
    font-weight: 950
}

    .find-products-cta img {
        height: 86px;
        width: auto;
        opacity: .95
    }

    .find-products-cta span {
        height: 44px;
        padding: 0 18px;
        border-radius: 6px;
        border: 1px solid rgba(8,120,222,.32);
        display: inline-flex;
        align-items: center
    }

.find-help-grid {
    margin-top: 28px;
    display: grid;
    grid-template-columns: 1fr 1.18fr;
    gap: 18px
}

.find-help-card {
    min-height: 225px;
    border-radius: 15px;
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 14px 34px rgba(11,46,103,.045);
    padding: 30px;
    display: grid;
    grid-template-columns: 120px minmax(0,1fr);
    gap: 24px;
    align-items: center
}

.find-help-card--blue {
    background: linear-gradient(120deg,#f6fbff,#fff)
}

.find-help-card--green {
    background: linear-gradient(120deg,#f4fffb,#fff 58%,#f2fbf6)
}

.find-help-icon {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: #0b55bd;
    font-size: 50px;
    box-shadow: 0 14px 32px rgba(11,46,103,.08)
}

.find-help-card--green .find-help-icon {
    color: #087d69
}

.find-help-card h2 {
    margin: 0;
    font-size: 25px;
    line-height: 1.16;
    font-weight: 900
}

.find-help-card p:not(.find-eyebrow) {
    margin: 12px 0 0;
    color: #344966;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 650
}

.find-help-card nav {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px
}

.find-outline, .find-green-btn {
    height: 42px;
    padding: 0 18px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 950;
    margin-top: 18px
}

.find-outline {
    border: 1px solid rgba(8,120,222,.34);
    color: #044fb5;
    background: #fff
}

.find-outline--green {
    border-color: rgba(0,110,90,.28);
    color: #087d69;
    margin-top: 0
}

.find-green-btn {
    background: #087d69;
    color: #fff;
    margin-top: 0
}

.find-faq {
    margin-top: 34px
}

    .find-faq h2 {
        margin: 0 0 18px;
        font-size: 28px
    }

.find-faq-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

.find-faq details {
    border: 1px solid rgba(11,46,103,.08);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(11,46,103,.035);
    overflow: hidden
}

.find-faq summary {
    min-height: 62px;
    padding: 18px 42px 18px 18px;
    color: #0b2e67;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 900;
    cursor: pointer;
    position: relative
}

    .find-faq summary:after {
        content: '⌄';
        position: absolute;
        right: 18px;
        top: 18px;
        color: #044fb5
    }

.find-faq details[open] summary:after {
    content: '⌃'
}

.find-faq p {
    margin: 0;
    padding: 0 18px 18px;
    color: #506178;
    font-size: 13px;
    line-height: 1.5;
    font-weight: 650
}

.find-final-cta {
    margin-top: 30px;
    border-radius: 15px;
    padding: 30px 42px;
    display: grid;
    grid-template-columns: 96px minmax(0,1fr) 300px 80px;
    gap: 28px;
    align-items: center;
    background: linear-gradient(105deg,#033d98,#0089cd);
    color: #fff;
    box-shadow: 0 18px 36px rgba(3,79,180,.18);
    overflow: hidden
}

.find-final-icon {
    width: 82px;
    height: 82px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,.32);
    font-size: 44px
}

.find-final-cta h2 {
    margin: 0;
    color: #fff;
    font-size: 26px
}

.find-final-cta p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.86);
    font-size: 14px;
    font-weight: 650
}

.find-final-cta a {
    height: 48px;
    border-radius: 7px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #044fb5;
    font-size: 13px;
    font-weight: 950
}

.find-final-cta img {
    height: 92px;
    width: auto;
    justify-self: end;
    filter: brightness(0) invert(1);
    opacity: .9
}

@media(max-width:1200px) {
    .find-hero {
        grid-template-columns: 1fr
    }

    .find-hero__visual {
        display: none
    }

    .find-results-map {
        grid-template-columns: 1fr
    }

    .find-map-panel {
        min-height: auto
    }

    .find-map-shell {
        height: 360px
    }

    .find-product-grid, .find-faq-grid {
        grid-template-columns: repeat(2,1fr)
    }

    .find-help-grid {
        grid-template-columns: 1fr
    }

    .find-check {
        margin-left: 0
    }

    .find-final-cta {
        grid-template-columns: 80px 1fr
    }

        .find-final-cta a {
            grid-column: 2
        }

        .find-final-cta img {
            display: none
        }
}

@media(max-width:700px) {
    .find-hero, .find-filters, .find-results-map, .find-products, .find-help-grid, .find-faq, .find-final-cta {
        width: calc(100% - 36px)
    }

    .find-hero__copy {
        padding: 42px 26px
    }

    .find-search {
        grid-template-columns: 1fr;
        height: auto
    }

        .find-search label {
            height: 54px
        }

        .find-search button {
            height: 50px
        }

    .find-product-grid, .find-faq-grid {
        grid-template-columns: 1fr
    }

    .find-pharmacy-card {
        grid-template-columns: 82px minmax(0,1fr)
    }

    .find-card-actions {
        grid-column: 1/3
    }

    .find-help-card {
        grid-template-columns: 1fr
    }

    .find-final-cta {
        grid-template-columns: 1fr;
        padding: 28px 24px
    }

        .find-final-cta a {
            grid-column: auto
        }

    .find-filter-tabs button {
        padding: 0 14px
    }
}
/* Sprint 6: UX conversion optimization + Contact + Academy articles */
.mobile-conversion-bar {
    display: none
}

.trust-mini-strip {
    width: min(1540px,calc(100% - 108px));
    margin: 24px auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px
}

    .trust-mini-strip span {
        border: 1px solid rgba(11,46,103,.07);
        border-radius: 14px;
        background: #fff;
        box-shadow: 0 12px 30px rgba(11,46,103,.04);
        padding: 16px 18px;
        color: #0b2e67;
        font-weight: 900;
        font-size: 13px
    }

.academy-all-list {
    width: min(1540px,calc(100% - 108px));
    margin: 6px auto 18px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px
}

    .academy-all-list a {
        display: grid;
        grid-template-columns: 140px 1fr 150px;
        align-items: center;
        gap: 16px;
        padding: 18px 22px;
        border-radius: 13px;
        border: 1px solid rgba(11,46,103,.07);
        background: #fff;
        box-shadow: 0 12px 30px rgba(11,46,103,.04);
        color: #0b2e67
    }

    .academy-all-list span {
        color: #0878de;
        font-size: 12px;
        font-weight: 900
    }

    .academy-all-list strong {
        font-family: var(--font-h);
        font-size: 18px;
        line-height: 1.2
    }

    .academy-all-list small {
        text-align: right;
        color: #6b7d91;
        font-weight: 800
    }

.academy-detail-page {
    background: #fff;
    color: #0b2e67
}

.academy-detail-hero {
    width: min(1540px,calc(100% - 64px));
    margin: 108px auto 46px;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 34px;
    align-items: stretch;
    border-radius: 18px;
    overflow: hidden;
    background: linear-gradient(100deg,#fff 0%,#f7fbff 52%,#eaf6ff 100%);
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 18px 48px rgba(11,46,103,.07)
}

.academy-detail-hero__copy {
    padding: 66px 60px
}

.academy-back {
    display: inline-flex;
    margin-bottom: 24px;
    color: #0878de;
    font-weight: 900
}

.academy-detail-hero h1 {
    margin: 0;
    color: #0b2e67;
    font-family: var(--font-h);
    font-size: clamp(44px,4.2vw,72px);
    line-height: 1.02;
    letter-spacing: -.05em
}

.academy-detail-hero p:not(.eyebrow) {
    max-width: 720px;
    color: #334966;
    font-size: 18px;
    line-height: 1.62;
    font-weight: 650
}

.academy-detail-hero img {
    width: 100%;
    height: 100%;
    min-height: 430px;
    object-fit: cover
}

.academy-detail-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px
}

    .academy-detail-meta span {
        border-radius: 999px;
        background: #eaf6ff;
        color: #0753ba;
        font-weight: 900;
        font-size: 13px;
        padding: 10px 14px
    }

.academy-detail-layout {
    width: min(1320px,calc(100% - 108px));
    margin: 0 auto 70px;
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 42px
}

.academy-detail-content > p {
    font-size: 19px;
    line-height: 1.85;
    color: #263f61;
    font-weight: 600;
    margin: 0 0 24px
}

.article-tips-box, .article-recommendation, .article-faq-box, .sticky-card {
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 16px 40px rgba(11,46,103,.055);
    padding: 34px;
    margin: 36px 0
}

.article-tips-box {
    background: linear-gradient(135deg,#f7fbff,#fff)
}

    .article-tips-box h2, .article-recommendation h2, .article-faq-box h2, .sticky-card h2 {
        font-family: var(--font-h);
        color: #0b2e67;
        font-size: 30px;
        line-height: 1.12;
        margin: 0 0 18px
    }

    .article-tips-box li {
        margin: 12px 0;
        color: #263f61;
        font-weight: 700;
        line-height: 1.55
    }

.article-recommendation {
    display: grid;
    grid-template-columns: 1fr 170px 190px 190px;
    align-items: center;
    gap: 22px;
    background: linear-gradient(110deg,#eef8ff,#fff,#f3fbff)
}

    .article-recommendation img {
        height: 150px;
        width: 150px;
        object-fit: contain;
        filter: drop-shadow(0 16px 24px rgba(11,46,103,.16))
    }

    .article-recommendation p {
        color: #344966;
        font-weight: 650;
        line-height: 1.55
    }

.article-faq-box details {
    border-top: 1px solid rgba(11,46,103,.08);
    padding: 18px 0
}

.article-faq-box summary {
    cursor: pointer;
    font-weight: 900;
    color: #0b2e67
}

.article-faq-box p {
    color: #344966;
    line-height: 1.55;
    font-weight: 650
}

.sticky-card {
    position: sticky;
    top: 110px;
    margin: 0;
    background: linear-gradient(180deg,#fff,#f4fbff)
}

    .sticky-card p {
        color: #344966;
        font-weight: 650;
        line-height: 1.55
    }

    .sticky-card .btn, .sticky-card .outline-btn {
        width: 100%;
        margin-top: 12px;
        justify-content: center
    }

.product-choice-guide {
    width: min(1540px,calc(100% - 108px));
    margin: 40px auto;
    border-radius: 18px;
    padding: 36px;
    background: linear-gradient(110deg,#f4fbff,#fff);
    border: 1px solid rgba(11,46,103,.065);
    box-shadow: 0 16px 38px rgba(11,46,103,.045)
}

.product-choice-guide__head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 28px;
    align-items: end;
    margin-bottom: 24px
}

.product-choice-guide h2 {
    margin: 0;
    color: #0b2e67;
    font-family: var(--font-h);
    font-size: 36px;
    line-height: 1.12;
    letter-spacing: -.035em
}

.product-choice-guide__head p:not(.eyebrow) {
    margin: 0;
    color: #344966;
    line-height: 1.55;
    font-weight: 650
}

.product-choice-guide__grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px
}

    .product-choice-guide__grid a {
        display: block;
        border: 1px solid rgba(11,46,103,.07);
        border-radius: 16px;
        background: #fff;
        padding: 26px;
        color: #0b2e67;
        box-shadow: 0 12px 30px rgba(11,46,103,.045);
        transition: transform .18s ease,box-shadow .18s ease
    }

        .product-choice-guide__grid a:hover {
            transform: translateY(-4px);
            box-shadow: 0 22px 44px rgba(11,46,103,.09)
        }

    .product-choice-guide__grid span {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eaf6ff;
        color: #0878de;
        font-size: 30px;
        font-weight: 900
    }

    .product-choice-guide__grid h3 {
        font-family: var(--font-h);
        font-size: 24px;
        margin: 20px 0 10px
    }

    .product-choice-guide__grid p {
        color: #344966;
        font-weight: 650;
        line-height: 1.55
    }

    .product-choice-guide__grid b {
        color: #0878de;
        font-size: 13px
    }

.contact-page {
    background: #fff;
    color: #0b2e67
}

.contact-hero {
    width: min(1540px,calc(100% - 64px));
    margin: 108px auto 44px;
    min-height: 500px;
    border-radius: 18px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 48% 52%;
    background: linear-gradient(100deg,#fff 0%,#f7fbff 48%,#e9f6ff 100%);
    border: 1px solid rgba(11,46,103,.055);
    box-shadow: 0 18px 48px rgba(11,46,103,.07)
}

.contact-hero__copy {
    padding: 70px 64px;
    position: relative;
    z-index: 2
}

.contact-hero h1 {
    margin: 0;
    color: #0b2e67;
    font-family: var(--font-h);
    font-size: clamp(48px,4.4vw,76px);
    line-height: 1.02;
    letter-spacing: -.055em
}

.contact-hero p:not(.eyebrow) {
    max-width: 640px;
    color: #263f61;
    font-size: 18px;
    line-height: 1.62;
    font-weight: 650
}

.contact-hero__actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 32px
}

.contact-hero__visual {
    position: relative
}

    .contact-hero__visual > img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: .9
    }

.contact-floating-card {
    position: absolute;
    right: 70px;
    bottom: 70px;
    width: 310px;
    border-radius: 18px;
    background: rgba(255,255,255,.86);
    backdrop-filter: blur(12px);
    box-shadow: 0 24px 48px rgba(11,46,103,.16);
    border: 1px solid rgba(255,255,255,.9);
    padding: 26px;
    display: grid;
    gap: 10px
}

    .contact-floating-card span {
        width: 62px;
        height: 62px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eaf6ff;
        color: #0878de;
        font-size: 34px
    }

    .contact-floating-card strong {
        font-family: var(--font-h);
        font-size: 24px
    }

    .contact-floating-card small {
        color: #5f7188;
        font-weight: 800
    }

.contact-options, .contact-main-grid, .contact-faq, .contact-final-cta {
    width: min(1540px,calc(100% - 108px));
    margin: 40px auto
}

.contact-options {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 22px
}

    .contact-options article, .contact-form, .contact-side-card, .contact-faq details {
        border: 1px solid rgba(11,46,103,.07);
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 14px 34px rgba(11,46,103,.045);
        padding: 30px
    }

    .contact-options span {
        width: 68px;
        height: 68px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #eaf6ff;
        color: #0878de;
        font-size: 34px
    }

    .contact-options h2, .contact-form h2, .contact-side-card h2, .contact-faq h2 {
        margin: 18px 0 10px;
        font-family: var(--font-h);
        font-size: 30px;
        line-height: 1.12;
        color: #0b2e67
    }

    .contact-options p, .contact-side-card p, .contact-side-card li, .contact-faq p {
        color: #344966;
        font-weight: 650;
        line-height: 1.55
    }

    .contact-options a {
        color: #0878de;
        font-weight: 900
    }

.contact-main-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 28px;
    align-items: start
}

.contact-form__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px
}

.contact-form label {
    display: grid;
    gap: 8px;
    color: #0b2e67;
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 16px
}

.contact-form input, .contact-form select, .contact-form textarea {
    border: 1px solid rgba(11,46,103,.12);
    border-radius: 10px;
    background: #f8fbff;
    color: #0b2e67;
    font: inherit;
    font-weight: 650;
    padding: 14px 16px
}

.contact-form textarea {
    resize: vertical
}

.contact-form__note {
    color: #6b7d91;
    font-weight: 700
}

.contact-form.is-sent {
    outline: 3px solid rgba(8,120,222,.22)
}

.contact-side-card {
    position: sticky;
    top: 110px;
    background: linear-gradient(180deg,#f5fbff,#fff)
}

    .contact-side-card ul {
        padding-left: 20px
    }

    .contact-side-card .outline-btn {
        width: 100%;
        justify-content: center;
        margin-top: 12px
    }

.contact-faq__grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 16px
}

.contact-faq summary {
    cursor: pointer;
    color: #0b2e67;
    font-weight: 900
}

.contact-final-cta {
    display: grid;
    grid-template-columns: 90px 1fr 320px;
    align-items: center;
    gap: 26px;
    border-radius: 18px;
    background: linear-gradient(135deg,#053b9d,#0494c8);
    padding: 34px 42px;
    color: #fff
}

    .contact-final-cta img {
        height: 110px;
        object-fit: contain;
        filter: brightness(0) invert(1);
        opacity: .92
    }

    .contact-final-cta h2 {
        margin: 0;
        font-family: var(--font-h);
        font-size: 34px;
        line-height: 1.12
    }

    .contact-final-cta p {
        margin: 8px 0 0;
        color: rgba(255,255,255,.86);
        font-weight: 650
    }

    .contact-final-cta .btn {
        justify-content: center
    }

.section-pulse {
    animation: sectionPulse .9s ease
}

@keyframes sectionPulse {
    0%,100% {
        box-shadow: none
    }

    50% {
        box-shadow: 0 0 0 8px rgba(8,120,222,.14)
    }
}

@media(max-width:1200px) {
    .academy-detail-hero, .contact-hero {
        grid-template-columns: 1fr
    }

    .academy-detail-layout, .contact-main-grid {
        grid-template-columns: 1fr
    }

    .article-recommendation {
        grid-template-columns: 1fr
    }

    .product-choice-guide__head, .product-choice-guide__grid, .contact-options, .contact-faq__grid, .contact-final-cta {
        grid-template-columns: 1fr
    }

    .sticky-card, .contact-side-card {
        position: static
    }

    .academy-all-list {
        grid-template-columns: 1fr
    }
}

@media(max-width:760px) {
    body {
        padding-bottom: 74px
    }

    .mobile-conversion-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1000;
        display: grid;
        grid-template-columns: 1fr 1fr;
        background: #fff;
        box-shadow: 0 -10px 28px rgba(11,46,103,.16);
        border-top: 1px solid rgba(11,46,103,.08)
    }

        .mobile-conversion-bar a {
            display: grid;
            place-items: center;
            min-height: 64px;
            text-align: center;
            padding: 10px;
            color: #fff;
            background: #0753ba;
            font-size: 12px;
            font-weight: 900
        }

            .mobile-conversion-bar a:first-child {
                background: #fff;
                color: #0753ba
            }

    .academy-detail-hero, .academy-detail-layout, .contact-hero, .contact-options, .contact-main-grid, .contact-faq, .contact-final-cta, .product-choice-guide, .academy-all-list {
        width: calc(100% - 36px)
    }

    .academy-detail-hero__copy, .contact-hero__copy {
        padding: 44px 28px
    }

    .academy-detail-hero img {
        min-height: 260px
    }

    .academy-detail-content > p {
        font-size: 17px
    }

    .academy-all-list a {
        grid-template-columns: 1fr
    }

    .academy-all-list small {
        text-align: left
    }

    .contact-form__grid {
        grid-template-columns: 1fr
    }

    .contact-floating-card {
        left: 24px;
        right: 24px;
        bottom: 24px;
        width: auto
    }

    .contact-hero__visual {
        min-height: 360px
    }

    .contact-final-cta {
        padding: 28px 24px
    }

        .contact-final-cta img {
            display: none
        }
}
/* v0.5.8 production readiness */
.cookie-consent {
    position: fixed;
    z-index: 90;
    left: 24px;
    right: 24px;
    bottom: 24px;
    max-width: 960px;
    margin: auto;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    gap: 22px;
    align-items: center;
    padding: 18px 20px;
    border: 1px solid rgba(11,46,103,.12);
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 24px 58px rgba(11,46,103,.18);
    backdrop-filter: blur(14px)
}

    .cookie-consent[hidden] {
        display: none
    }

    .cookie-consent strong {
        display: block;
        margin: 0 0 4px;
        color: #0b2e67;
        font-family: var(--font-h);
        font-size: 15px;
        font-weight: 900
    }

    .cookie-consent p {
        margin: 0;
        color: #40536e;
        font-size: 13px;
        line-height: 1.45;
        font-weight: 650
    }

    .cookie-consent nav {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap
    }

    .cookie-consent a, .cookie-consent button {
        height: 38px;
        border-radius: 999px;
        padding: 0 16px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 900;
        text-decoration: none;
        cursor: pointer
    }

    .cookie-consent a {
        color: #044fb5;
        background: #f1f7ff
    }

    .cookie-consent button {
        border: 1px solid rgba(8,120,222,.22);
        background: #fff;
        color: #044fb5
    }

    .cookie-consent [data-cookie-accept] {
        background: #044fb5;
        color: #fff;
        border-color: #044fb5
    }

.legal-page {
    padding: 128px 0 78px;
    background: linear-gradient(180deg,#fff,#f7fbff);
    color: #0b2e67
}

.legal-hero, .legal-content {
    width: min(980px,calc(100% - 54px));
    margin: auto
}

.legal-hero {
    padding: 46px 0 36px;
    border-bottom: 1px solid rgba(11,46,103,.08)
}

    .legal-hero h1 {
        margin: 0;
        color: #0b2e67;
        font-family: var(--font-h);
        font-size: clamp(42px,5vw,72px);
        line-height: 1.02;
        letter-spacing: -.05em
    }

    .legal-hero p {
        margin: 18px 0 0;
        color: #40536e;
        font-size: 17px;
        line-height: 1.6;
        font-weight: 650
    }

.legal-content {
    padding: 38px 0 0
}

    .legal-content h2 {
        margin: 30px 0 10px;
        color: #0b2e67;
        font-family: var(--font-h);
        font-size: 24px
    }

    .legal-content p {
        margin: 0;
        color: #344966;
        font-size: 16px;
        line-height: 1.75;
        font-weight: 600
    }

    .legal-content a {
        color: #0878de;
        font-weight: 850
    }

.find-pharmacy-card--notice {
    border-color: rgba(8,120,222,.16);
    background: linear-gradient(135deg,#fff,#f4fbff)
}

    .find-pharmacy-card--notice .find-card-icon {
        color: #0878de
    }

.find-load-more {
    cursor: pointer
}

@media(max-width:760px) {
    .cookie-consent {
        grid-template-columns: 1fr;
        left: 14px;
        right: 14px;
        bottom: 82px
    }

        .cookie-consent nav {
            justify-content: flex-start
        }

    .legal-page {
        padding-top: 100px
    }
}
/* v0.5.9 completion updates */
.hero .trust {
    display: none !important
}

.tech-cards--three {
    grid-template-columns: repeat(3,1fr)
}

.ingredient--full {
    width: 100%;
    padding: 0;
    margin: 0;
    background: #fff
}

.ingredient-panel--wide {
    width: 100%;
    max-width: none;
    margin: 0;
    min-height: 300px;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    grid-template-columns: minmax(420px,42vw) 1fr 420px;
    background: linear-gradient(90deg,#f6fbff 0%,#fff 48%,#f2faff 100%)
}

.ingredient-media {
    height: 300px;
    overflow: hidden;
    position: relative;
    background: #f4fbff
}

    .ingredient-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: scale(1.01)
    }

.ingredient-copy {
    padding: 34px 42px
}

    .ingredient-copy h2 {
        font-size: 40px;
        letter-spacing: -.04em
    }

    .ingredient-copy p:not(.eyebrow) {
        font-size: 17px;
        line-height: 1.55;
        color: #344966
    }

.ingredient-pager {
    padding: 0 34px;
    gap: 42px
}

@media(max-width:1100px) {
    .tech-cards--three {
        grid-template-columns: 1fr 1fr
    }

    .ingredient-panel--wide {
        grid-template-columns: 1fr
    }

    .ingredient-media {
        height: 240px
    }

    .ingredient-pager {
        padding: 24px
    }
}

@media(max-width:700px) {
    .tech-cards--three {
        grid-template-columns: 1fr
    }

    .ingredient-copy {
        padding: 28px 24px
    }

        .ingredient-copy h2 {
            font-size: 32px
        }

    .ingredient-panel--wide {
        min-height: auto
    }

    .ingredient-pager {
        gap: 22px;
        justify-content: flex-start;
        overflow: auto
    }
}
/* v0.6.0 homepage alignment: Why DermoFoot + corrected Ingredient Spotlight */
.why-dermofoot {
    padding: 56px 0 46px;
    background: #fff;
    border-top: 1px solid rgba(11,46,103,.035)
}

.why-dermofoot__inner {
    width: min(1510px,calc(100% - 150px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 315px minmax(0,1fr);
    gap: 62px;
    align-items: start
}

.why-dermofoot__intro {
    padding-left: 48px
}

    .why-dermofoot__intro h2 {
        margin: 0;
        font-family: var(--font-h);
        font-size: 36px;
        line-height: 1.1;
        font-weight: 900;
        letter-spacing: -.035em;
        color: var(--navy)
    }

.why-dermofoot__cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 28px
}

.why-card {
    min-height: 176px;
    padding: 30px 32px 24px;
    border-radius: 18px;
    border: 1px solid rgba(11,46,103,.055);
    background: #fff;
    box-shadow: 0 15px 40px rgba(11,46,103,.055);
    display: grid;
    grid-template-columns: 58px minmax(0,1fr);
    grid-template-areas: "icon title" "icon text" "icon link";
    gap: 0 22px;
    text-decoration: none;
    transition: transform .22s ease,box-shadow .22s ease,border-color .22s ease
}

    .why-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 48px rgba(11,46,103,.095);
        border-color: rgba(8,120,222,.18)
    }

.why-card__icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    color: #2f7de1
}

    .why-card__icon svg {
        width: 48px;
        height: 48px;
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.why-card__icon--teal {
    color: #19b9ba
}

.why-card__icon--aqua {
    color: #17c4d3
}

.why-card h3 {
    grid-area: title;
    margin: 0 0 10px;
    font-family: var(--font-h);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 900;
    color: var(--navy)
}

.why-card p {
    grid-area: text;
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 650;
    color: #5c6b82
}

.why-card strong {
    grid-area: link;
    color: var(--blue);
    font-size: 12px;
    letter-spacing: .02em;
    font-weight: 950
}

.ingredient-spotlight-v2 {
    padding: 0 !important;
    margin: 0 !important;
    width: 100%;
    background: linear-gradient(90deg,#eff7ff 0%,#fff 44%,#f6fbff 100%)
}

.ingredient-spotlight-v2__panel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    min-height: 238px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    grid-template-columns: minmax(360px,31vw) minmax(0,1fr) 420px !important;
    background: linear-gradient(90deg,#eef7ff 0%,#fff 52%,#f5fbff 100%) !important;
    box-shadow: none !important
}

.ingredient-spotlight-v2__media {
    height: 238px !important;
    background: #eef7ff !important;
    overflow: hidden !important
}

    .ingredient-spotlight-v2__media img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        object-position: left center !important;
        transform: none !important
    }

.ingredient-spotlight-v2__copy {
    padding: 34px 38px !important
}

    .ingredient-spotlight-v2__copy h2 {
        font-size: 40px !important;
        line-height: 1.05 !important;
        margin: 4px 0 12px !important
    }

    .ingredient-spotlight-v2__copy p:not(.eyebrow) {
        font-size: 17px !important;
        line-height: 1.55 !important;
        font-weight: 650 !important;
        color: #4f6178 !important;
        margin: 0 0 18px !important
    }

    .ingredient-spotlight-v2__copy a {
        font-size: 12px !important;
        font-weight: 950 !important;
        color: var(--blue) !important
    }

.ingredient-spotlight-v2__pager {
    justify-content: flex-start !important;
    gap: 48px !important;
    padding: 0 34px !important
}

    .ingredient-spotlight-v2__pager button {
        font-size: 18px !important;
        color: #a6afbf !important
    }

    .ingredient-spotlight-v2__pager .is-active {
        color: var(--blue) !important;
        font-size: 22px !important
    }

    .ingredient-spotlight-v2__pager .circle {
        width: 44px !important;
        height: 44px !important;
        background: #fff !important;
        color: var(--navy) !important;
        box-shadow: 0 12px 28px rgba(11,46,103,.075) !important;
        font-size: 34px !important
    }

@media(max-width:1100px) {
    .why-dermofoot__inner {
        width: calc(100% - 48px);
        grid-template-columns: 1fr;
        gap: 28px
    }

    .why-dermofoot__intro {
        padding-left: 0
    }

    .why-dermofoot__cards {
        grid-template-columns: 1fr
    }

    .ingredient-spotlight-v2__panel {
        grid-template-columns: 1fr !important
    }

    .ingredient-spotlight-v2__media {
        height: 230px !important
    }

    .ingredient-spotlight-v2__pager {
        padding: 0 28px 28px !important
    }
}

@media(max-width:700px) {
    .why-dermofoot {
        padding: 42px 0
    }

    .why-dermofoot__inner {
        width: calc(100% - 30px)
    }

    .why-dermofoot__intro h2 {
        font-size: 32px
    }

    .why-card {
        grid-template-columns: 1fr;
        grid-template-areas: "icon" "title" "text" "link";
        gap: 12px;
        padding: 24px
    }

    .ingredient-spotlight-v2__copy {
        padding: 28px 24px !important
    }

        .ingredient-spotlight-v2__copy h2 {
            font-size: 32px !important
        }

    .ingredient-spotlight-v2__pager {
        gap: 22px !important;
        overflow: auto;
        justify-content: flex-start !important
    }
}
/* v0.6.2 — homepage Our Science restored under Why DermoFoot */
.home-science {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 74px 0;
    background: linear-gradient(100deg,#f4faff 0%,#fff 42%,#eaf6ff 100%);
    border-top: 1px solid rgba(11,46,103,.04);
    border-bottom: 1px solid rgba(11,46,103,.05)
}

.home-science__bg {
    position: absolute;
    inset: 0;
    background: url('/assets/science/clinical-technologies-hero-bg.webp') right center/auto 118% no-repeat;
    opacity: .34;
    pointer-events: none
}

.home-science:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,rgba(255,255,255,.96) 0%,rgba(255,255,255,.86) 47%,rgba(255,255,255,.26) 100%);
    pointer-events: none
}

.home-science__inner {
    position: relative;
    z-index: 1;
    width: min(1510px,calc(100% - 150px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(360px,430px) minmax(0,1fr);
    gap: 56px;
    align-items: center
}

.home-science__copy h2 {
    margin: 0;
    font-family: var(--font-h);
    font-size: clamp(46px,5vw,82px);
    line-height: .96;
    font-weight: 950;
    letter-spacing: -.055em;
    color: var(--navy)
}

.home-science__lead {
    margin: 24px 0 0;
    max-width: 460px;
    color: #40536e;
    font-size: 17px;
    line-height: 1.65;
    font-weight: 650
}

.home-science__cta {
    margin-top: 30px;
    height: 48px;
    padding: 0 24px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #044fb5;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    font-weight: 950;
    box-shadow: 0 14px 28px rgba(4,79,181,.18)
}

    .home-science__cta span {
        font-size: 18px;
        line-height: 1
    }

.home-science__cards {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 22px
}

.home-science-card {
    min-height: 270px;
    padding: 34px 28px 30px;
    border: 1px solid rgba(11,46,103,.07);
    border-radius: 22px;
    background: rgba(255,255,255,.84);
    box-shadow: 0 18px 48px rgba(11,46,103,.075);
    backdrop-filter: blur(10px);
    text-align: center
}

.home-science-card__icon {
    width: 96px;
    height: 96px;
    margin: 0 auto 20px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid rgba(8,120,222,.14);
    box-shadow: 0 15px 32px rgba(11,46,103,.08);
    color: #0b55bd
}

    .home-science-card__icon svg {
        width: 58px;
        height: 58px;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
        stroke-linejoin: round
    }

.home-science-card h3 {
    margin: 0;
    font-family: var(--font-h);
    color: var(--navy);
    font-size: 22px;
    line-height: 1.12;
    font-weight: 950;
    letter-spacing: -.025em
}

.home-science-card p {
    margin: 14px auto 0;
    max-width: 230px;
    color: #53657c;
    font-size: 14px;
    line-height: 1.55;
    font-weight: 650
}

@media(max-width:1100px) {
    .home-science__inner {
        width: calc(100% - 48px);
        grid-template-columns: 1fr;
        gap: 34px
    }

    .home-science__cards {
        grid-template-columns: 1fr 1fr
    }

    .home-science__bg {
        opacity: .2
    }

    .home-science:before {
        background: rgba(255,255,255,.82)
    }
}

@media(max-width:700px) {
    .home-science {
        padding: 48px 0
    }

    .home-science__inner {
        width: calc(100% - 30px)
    }

    .home-science__cards {
        grid-template-columns: 1fr
    }

    .home-science-card {
        min-height: auto
    }

    .home-science__lead {
        font-size: 15px
    }

    .home-science__cta {
        width: 100%;
        justify-content: center
    }
}

/* v0.6.6 — mobile navigation, academy recommendation product layout, contact form status */
.mobile-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(11,46,103,.10);
    border-radius: 12px;
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(11,46,103,.06);
}

.mobile-nav-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: #0b2e67;
    transition: transform .18s ease, opacity .18s ease;
}

.site-header.is-mobile-menu-open .mobile-nav-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.site-header.is-mobile-menu-open .mobile-nav-toggle span:nth-child(2) {
    opacity: 0;
}

.site-header.is-mobile-menu-open .mobile-nav-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.article-recommendation {
    grid-template-columns: minmax(0,1fr) 330px !important;
    align-items: center;
    gap: 30px;
}

.article-recommendation__product {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
}

.article-recommendation__product img {
    width: 235px !important;
    height: 235px !important;
    object-fit: contain;
    filter: drop-shadow(0 20px 30px rgba(11,46,103,.18));
}

.article-recommendation__actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.article-recommendation__actions .btn {
    width: 100%;
    justify-content: center;
    min-height: 48px;
}

.contact-form__note.is-success {
    color: #087d45;
    background: rgba(8,125,69,.08);
    border: 1px solid rgba(8,125,69,.16);
    border-radius: 12px;
    padding: 12px 14px;
}

.contact-form__note.is-error {
    color: #a21b1b;
    background: rgba(162,27,27,.07);
    border: 1px solid rgba(162,27,27,.14);
    border-radius: 12px;
    padding: 12px 14px;
}

.contact-form.is-sending button[type="submit"] {
    opacity: .72;
    pointer-events: none;
}

@media (max-width: 900px) {
    .site-header--clean {
        display: grid !important;
        grid-template-columns: minmax(0,1fr) auto auto;
        height: 72px;
        padding: 0 18px !important;
        gap: 12px;
        position: sticky;
        top: 0;
        z-index: 1200;
    }

    .site-header--clean .brand--full img {
        height: 38px;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        justify-self: end;
        order: 2;
    }

    .site-header--clean .main-nav {
        position: absolute;
        left: 16px;
        right: 16px;
        top: calc(100% + 10px);
        width: auto !important;
        margin: 0 !important;
        padding: 16px;
        border-radius: 18px;
        background: rgba(255,255,255,.98);
        border: 1px solid rgba(11,46,103,.08);
        box-shadow: 0 18px 44px rgba(11,46,103,.16);
        backdrop-filter: blur(18px);
        display: none !important;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        justify-self: auto;
        z-index: 1300;
    }

    .site-header.is-mobile-menu-open .main-nav {
        display: flex !important;
    }

    .site-header--clean .main-nav a {
        display: block;
        width: 100%;
        padding: 14px 16px;
        border-radius: 12px;
        background: #f6fbff;
        font-size: 13px;
        text-align: left;
    }

    .site-header--clean .nav-actions {
        order: 3;
        justify-self: end;
        gap: 8px;
    }

    .site-header--clean .nav-cta {
        display: none !important;
    }

    .language-switcher select {
        padding-right: 16px;
    }
}

@media (max-width: 760px) {
    .article-recommendation {
        grid-template-columns: 1fr !important;
        padding: 28px 22px;
    }

    .article-recommendation__product img {
        width: min(260px, 76vw) !important;
        height: min(260px, 76vw) !important;
    }
}