:root {
    --bg: #dcf4fc;
    --bg-soft: #e7f8fc;
    --teal: #00748e;
    --teal-dark: #00353b;
    --magenta: #b22373;
    --pink: #f080c1;
    --white-glass: rgba(255, 255, 255, 0.78);
    --layout-width: min(100vw, 90rem);
    --layout-edge: calc((100vw - var(--layout-width)) / 2);
    --figma-edge: calc(var(--layout-edge) + min(9.167vw, 8.25rem));
}

* {
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
    scroll-padding-top: calc(5.375rem + 1rem); 
}

html.is-scroll-restoring {
    scroll-behavior: auto;
}

html.is-scroll-restoring body {
    visibility: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    color: var(--teal-dark);
    background: var(--bg);
    font-family: "Inter", Arial, sans-serif;
    font-display: swap;
}

body>main {
    flex: 1 0 auto;
}

.home-page {
    --hero-scene-width: min(100vw, 90rem, 160svh);
    overflow-x: hidden;
    background:
        linear-gradient(160deg, rgba(216, 243, 254, 0.92) 0%, rgba(226, 245, 248, 0.92) 52%, rgba(255, 255, 255, 0.92) 100%),
        var(--bg);
    background-attachment: fixed;
}

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

a {
    color: inherit;
}

.container {
    width: auto;
    margin: 0 max(1.5rem, var(--figma-edge));
}

.site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 5.375rem;
    padding: 0 max(1.5rem, var(--figma-edge));
    display: grid;
    grid-template-columns: 13.75rem 1fr auto;
    align-items: center;
    background: rgba(220, 244, 252, 0.68);
    backdrop-filter: blur(0.875rem);
    transition: background-color 220ms ease, backdrop-filter 220ms ease;
}

.home-page .site-header {
    backdrop-filter: none;
}

.home-page .site-header {
    background: rgba(220, 244, 252, 0.68);
    backdrop-filter: blur(0.875rem);
}
@media screen and (max-width: 960px) {
    .home-page .site-header,
    .site-header {
        background: rgba(220, 244, 252, 0.88);
        backdrop-filter: none;
    }
}

.logo img {
    width: 13.125rem;
    height: auto;
}

.logo,
.menu-toggle {
    position: relative;
    z-index: 1001;
}

.main-nav {
    display: flex;
    justify-content: center;
    gap: 3rem;
    color: var(--teal);
    font-weight: 800;
    font-size: 1rem;
}

.main-nav a,
.buy-button {
    text-decoration: none;
}

.main-nav a {
    position: relative;
    display: inline-flex;
    justify-content: center;
    width: auto;
    line-height: 1.2;
    white-space: nowrap;
    padding: 1rem;
    transition: color 0.3s ease;
}
.main-nav a:not(.main-nav__buy):before {
    position: absolute;
    display: block;
    content: '';
    width: calc(100% - 2rem);
    height: 1px;
    left: 1rem;
    bottom: 0.7rem;
    background-color: var(--magenta);
    opacity: 0;
    transition: opacity 0.3s ease;
}

@media screen and (max-width: 960px) {
    .main-nav a {
        padding: 0.5rem;
    }
    .main-nav a:not(.main-nav__buy):before {
        width: calc(100% - 1rem);
        left: 0.5rem;
        bottom: 0.2rem;
    }
}

.main-nav a.main-nav__buy {
    display: none;
}

@media screen and (max-width: 960px) {
    .main-nav a[href="/allergy/"],
    .main-nav a[href="/instruction/"],
    .main-nav a[href="/faq/"] {
        width: auto;
    }
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a.active {
    color: var(--magenta);
}

.main-nav a:hover:before,
.main-nav a:focus-visible:before,
.main-nav a.active:before {
    opacity: 1;
}

.buy-button {
    min-width: 10.8125rem;
    padding: 0.9375rem 1.75rem;
    border-radius: 7.5rem;
    color: #fff;
    background: linear-gradient(90deg, var(--magenta), var(--pink));
    text-align: center;
    font-weight: 800;
    box-shadow: 0 0.75rem 1.875rem rgba(178, 35, 115, 0.2);
}

.buy-button,
.faq-link-button,
.pdf-button {
    transition: box-shadow 220ms ease, filter 220ms ease;
}

.buy-button:hover,
.buy-button:focus-visible,
.faq-link-button:hover,
.faq-link-button:focus-visible,
.pdf-button:hover,
.pdf-button:focus-visible {
    box-shadow: 0 0.875rem 2rem rgba(5, 123, 143, 0.2);
    filter: brightness(1.04);
}

.menu-toggle {
    display: none;
}

.section-screen {
    position: relative;
    min-height: 56.25rem;
    overflow: hidden;
    background: linear-gradient(160deg, #d8f3fe 0%, #e2f5f8 54%, #fff 100%);
}

.section-screen>.container {
    position: relative;
    z-index: 1;
}

.home-page .section-screen {
    z-index: 1;
    min-height: auto;
    height: auto;
    display: grid;
    align-items: center;
    background: transparent;
}

.home-page .reveal-section {
    opacity: 0;
    transform: translateY(3rem);
    transition: opacity 1.05s ease, transform 1.05s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.home-page .reveal-section.is-visible {
    opacity: 1 !important;
    transform: translateY(0);
}

.home-page .fullpage-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.home-page .fullpage-main::before,
.home-page .fullpage-main::after {
    content: "";
    position: fixed;
    z-index: 0;
    top: 8svh;
    width: min(114rem, 111vw);
    height: min(75rem, 114svh);
    pointer-events: none;
    opacity: 0.78;
    background: url("../img/clouds.png?v=transparent-bg") center / contain no-repeat;
    will-change: transform;
}

.home-page .fullpage-main::before {
    left: max(-67.5rem, -63vw);
}

.home-page .fullpage-main::after {
    right: max(-70.5rem, -64.5vw);
    top: 22svh;
    transform: scaleX(-1);
}

@media screen and (min-width: 961px) {
    .home-page .fullpage-main::before {
        animation: home-cloud-left 18s ease-in-out infinite;
    }
    
    .home-page .fullpage-main::after {
        animation: home-cloud-right 22s ease-in-out infinite reverse;
    }
}

@keyframes home-cloud-left {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    35% {
        transform: translate3d(9rem, 2.25rem, 0) rotate(0.8deg);
    }

    70% {
        transform: translate3d(4rem, -1.5rem, 0) rotate(-0.5deg);
    }
}

@keyframes home-cloud-right {
    0%,
    100% {
        transform: scaleX(-1) translate3d(0, 0, 0) rotate(0deg);
    }

    40% {
        transform: scaleX(-1) translate3d(8rem, -2rem, 0) rotate(-0.7deg);
    }

    75% {
        transform: scaleX(-1) translate3d(3.5rem, 2rem, 0) rotate(0.5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ignore-reduced-motion) .home-page .reveal-section,
    body:not(.ignore-reduced-motion) .home-page .fullpage-main::before,
    body:not(.ignore-reduced-motion) .home-page .fullpage-main::after {
        opacity: 1;
        transform: none;
        transition: none;
        animation: none;
    }
}

.hero {
    padding-top: 6.5rem;
}

.home-page .hero,
.home-page .benefits,
.home-page .packs,
.home-page .action,
.home-page .buy {
    padding: 5.375rem 0;
}

.home-page .hero {
    min-height: 100svh;
    padding: 0;
}

.home-page .hero::before {
    content: "";
    position: fixed;
    z-index: 0;
    top: 1svh;
    right: calc(var(--layout-edge) + 1vw);
    width: min(100rem, 90vw);
    height: min(36rem, 56svh);
    opacity: 0.22;
    pointer-events: none;
    background: url("../img/allergen-bg.png") center / cover no-repeat;
    mix-blend-mode: multiply;
    animation: hero-allergens-float 28s ease-in-out infinite;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 78%);
    mask-image: radial-gradient(ellipse at center, #000 0%, rgba(0, 0, 0, 0.72) 48%, transparent 78%);
}

.home-page .action {
    align-items: center;
    padding: 5.375rem 0;
}

.home-page .buy {
    padding-bottom: 11rem;
}

.hero-cloud,
.cloud-layer,
.allergen-bg {
    position: absolute;
    pointer-events: none;
}

.hero-cloud {
    z-index: 0;
    left: calc(50% - min(65vw, 104svh, 58.5rem));
    top: calc(50% - min(47vw, 75svh, 42.25rem) - min(2vw, 2svh, 1.25rem));
    width: min(214vw, 342svh, 192.5rem);
    height: min(95vw, 152svh, 85.5rem);
    background-image: url("../img/hero-bg.png?v=transparent-bg");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 100% 100%;
    -webkit-mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 4%, #000 12%),
        linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.86) 88%, transparent 100%);
    mask-image:
        linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.62) 4%, #000 12%),
        linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.86) 88%, transparent 100%);
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@media (min-width: 1700px) {
    .hero-cloud {
        -webkit-mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.38) 6%, rgba(0, 0, 0, 0.82) 14%, #000 22%),
            linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.86) 88%, transparent 100%);
        mask-image:
            linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.38) 6%, rgba(0, 0, 0, 0.82) 14%, #000 22%),
            linear-gradient(to bottom, #000 0%, #000 74%, rgba(0, 0, 0, 0.86) 88%, transparent 100%);
    }
}

@keyframes hero-allergens-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    35% {
        transform: translate3d(-2.75rem, 1.25rem, 0) rotate(-1.2deg);
    }

    70% {
        transform: translate3d(1.75rem, -1rem, 0) rotate(0.8deg);
    }
}

.cloud-layer {
    inset: 0;
    opacity: 0.75;
    background: url("../img/clouds.png?v=transparent-bg") center / 93.75rem auto no-repeat;
}

.home-page .cloud-layer {
    display: none;
}

.home-page .benefits .cloud-layer {
    display: block;
}

.home-page .packs .cloud-layer {
    display: block;
}

.benefits h2 {
    max-width: 80rem;
    margin-right: auto;
    margin-bottom: 4rem;
    margin-left: auto;
    text-align: center;
}

.buy h2 {
    text-align: center;
}

.benefits .cloud-layer {
    inset: auto auto auto calc(var(--layout-edge) - 11.25rem);
    top: 50%;
    width: min(61.25rem, 68vw);
    height: min(45rem, 80svh);
    opacity: 0.82;
    transform: translateY(-50%);
    background-position: center;
    background-size: contain;
}

.action .cloud-layer {
    inset: 1.5rem auto auto calc(var(--layout-edge) - 41.1875rem);
    width: 100rem;
    height: 56.25rem;
    opacity: 0.72;
    background-position: left bottom;
    background-size: contain;
}

.buy .cloud-layer {
    inset: auto calc(var(--layout-edge) - 15rem) 5svh auto;
    width: min(73.75rem, 84vw);
    height: min(43.75rem, 76svh);
    opacity: 0.72;
    background-position: right bottom;
    background-size: contain;
}

.allergen-bg {
    inset: 0;
}

.hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 43% 1fr;
    align-items: center;
    min-height: 43.125rem;
    gap: 4.375rem;
}

.home-page .hero-grid {
    min-height: 0;
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--hero-scene-width);
    margin: 0;
    aspect-ratio: 1440 / 900;
    display: block;
    transform: translate(-50%, -50%);
}

.hero-product img {
    width: min(29.5rem, 100%);
    margin-top: 1.75rem;
}

.home-page .hero-product {
    position: absolute;
    left: 9.17%;
    top: 18.67%;
    width: 32.78%;
    height: 58.44%;
    transform: none;
    animation: hero-slide-in-left 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page .hero-product img {
    width: 100%;
    height: 100%;
    margin-top: 0;
    object-fit: contain;
}

.home-page .hero-copy {
    position: absolute;
    left: 50.83%;
    top: 34.9%;
    width: 42.5%;
}
@media screen and (min-width: 961px) {
    .home-page .hero-copy {
        animation: hero-slide-in-right 1.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
}

@keyframes hero-slide-in-right {
    from {
        transform: translateX(5rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes hero-slide-in-left {
    from {
        transform: translateX(-5rem);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ignore-reduced-motion) .home-page .hero-product,
    body:not(.ignore-reduced-motion) .home-page .hero::before,
    body:not(.ignore-reduced-motion) .home-page .benefits.reveal-section.is-visible .benefit-grid article,
    body:not(.ignore-reduced-motion) .home-page .packs.reveal-section.is-visible .pack-card img,
    body:not(.ignore-reduced-motion) .home-page .packs.reveal-section.is-visible .pack-card>div,
    body:not(.ignore-reduced-motion) .home-page .packs.reveal-section.is-visible .check,
    body:not(.ignore-reduced-motion) .home-page .action.reveal-section.is-visible .steps article,
    body:not(.ignore-reduced-motion) .home-page .action.reveal-section.is-visible .steps span,
    body:not(.ignore-reduced-motion) .home-page .hero-copy {
        animation: none;
    }

    body:not(.ignore-reduced-motion) .home-page .benefits.reveal-section .benefit-grid article,
    body:not(.ignore-reduced-motion) .home-page .packs.reveal-section .pack-card img,
    body:not(.ignore-reduced-motion) .home-page .packs.reveal-section .pack-card>div,
    body:not(.ignore-reduced-motion) .home-page .action.reveal-section .steps article,
    body:not(.ignore-reduced-motion) .home-page .action.reveal-section .steps span {
        opacity: 1;
        transform: none;
    }
}

.hero-copy h1,
h2 {
    margin: 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1.25;
}

.hero-copy h1 {
    color: var(--teal);
    font-size: clamp(2.125rem, min(3.611vw, 5.778svh), 3.25rem);
    max-width: none;
}

.title-line {
    width: 95%;
    height: 0.125rem;
    margin: clamp(1.25rem, 1.806vw, 1.625rem) 0;
    background: var(--teal);
}

.hero-copy p {
    margin: 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(1.125rem, min(1.806vw, 2.889svh), 1.625rem);
    line-height: 1.3;
}

.benefits,
.packs,
.action,
.buy {
    padding: 8rem 0 7.5rem;
}

h2 {
    font-size: clamp(1.75rem, 3vw, 2.375rem);
}

sup {
    font-size: 55%;
}

.benefit-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3.625rem 5.375rem;
    margin-top: 2.625rem;
}

.benefit-grid article {
    display: grid;
    justify-items: center;
    align-content: start;
    min-height: 11.25rem;
    text-align: center;
}

.home-page .benefits.reveal-section .benefit-grid article {
    opacity: 0;
    transform: translateY(2rem) scale(0.96);
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article {
    animation: benefit-card-in 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article:nth-child(2) {
    animation-delay: 0.08s;
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article:nth-child(3) {
    animation-delay: 0.16s;
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article:nth-child(4) {
    animation-delay: 0.24s;
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article:nth-child(5) {
    animation-delay: 0.32s;
}

.home-page .benefits.reveal-section.is-visible .benefit-grid article:nth-child(6) {
    animation-delay: 0.4s;
}

.benefit-grid img {
    width: 10rem;
    height: 10rem;
    object-fit: contain;
    margin-bottom: 1.25rem;
}

@keyframes benefit-card-in {
    0% {
        opacity: 0;
        transform: translateY(2rem) scale(0.96);
    }

    58% {
        opacity: 1;
        transform: translateY(-0.35rem) scale(1.018);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.benefit-grid p,
.note {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

.note {
    position: relative;
    margin-top: 3rem;
}

.note a {
    color: var(--magenta);
}

.small-note {
    position: relative;
    margin: 0.875rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.3;
}

.home-page .benefit-grid {
    gap: 2.0625rem 5.375rem;
    margin-top: 1.5rem;
}

.home-page .small-note {
    margin-top: 0.625rem;
}

@media (min-width: 961px) and (max-height: 760px) {
    .home-page .benefits {
        padding: 4.75rem 0;
    }

    .home-page .benefits h2 {
        font-size: clamp(1.875rem, 2.5vw, 2.25rem);
        line-height: 1.18;
    }

    .home-page .benefit-grid {
        gap: 1.5rem 4.75rem;
        margin-top: 1.375rem;
    }

    .home-page .benefit-grid article {
        min-height: 9.875rem;
    }

    .home-page .benefit-grid img {
        width: 5.5rem;
        height: 5.5rem;
        margin-bottom: 0.75rem;
    }

    .home-page .benefit-grid p,
    .home-page .note {
        font-size: 1rem;
        line-height: 1.25;
    }

    .home-page .note {
        margin-top: 1.625rem;
    }

    .home-page .small-note {
        margin-top: 0.5rem;
        font-size: 0.75rem;
    }
}

.pack-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4.75rem;
    align-items: end;
    padding-top: 2.375rem;
}

.pack-card {
    display: grid;
    justify-items: center;
}

.home-page .packs.reveal-section .pack-card img,
.home-page .packs.reveal-section .pack-card>div {
    opacity: 0;
}

.home-page .packs.reveal-section.is-visible .pack-card img {
    animation: pack-product-in-left 1.05s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page .packs.reveal-section.is-visible .pack-card:nth-child(2) img {
    animation-name: pack-product-in-right;
    animation-delay: 0.12s;
}

.home-page .packs.reveal-section.is-visible .pack-card>div {
    animation: pack-panel-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.home-page .packs.reveal-section.is-visible .pack-card:nth-child(2)>div {
    animation-delay: 0.46s;
}

.home-page .packs.reveal-section.is-visible .check {
    animation: pack-check-pop 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.72s both;
}

.home-page .packs.reveal-section.is-visible .pack-card:nth-child(2) .check {
    animation-delay: 0.84s;
}

.home-page .packs.reveal-section.is-visible .pack-card p:nth-child(2) .check {
    animation-delay: 0.94s;
}

.home-page .packs.reveal-section.is-visible .pack-card:nth-child(2) p:nth-child(2) .check {
    animation-delay: 1.06s;
}

.pack-card img {
    width: min(34.9375rem, 100%);
    min-height: 34.9375rem;
    object-fit: contain;
}

.pack-card>div {
    width: min(26.25rem, 100%);
    min-height: 12.0625rem;
    display: grid;
    gap: 1.125rem;
    align-content: center;
    margin-top: -3.25rem;
    padding: 2.125rem;
    border-radius: 2.5rem;
    background: #fff;
}

.pack-card p {
    display: grid;
    grid-template-columns: 2.375rem 1fr;
    gap: 1.25rem;
    align-items: start;
    margin: 0;
    color: var(--teal);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.35;
}

.check {
    width: 2.375rem;
    height: 2.375rem;
    box-sizing: border-box;
    display: block;
    align-self: start;
    margin-top: 0.1em;
    border: 0.1875rem solid var(--teal);
    border-radius: 50%;
    position: relative;
    flex: 0 0 auto;
}

.check::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 45%;
    width: 0.6875rem;
    height: 1.0625rem;
    border: solid var(--teal);
    border-width: 0 0.1875rem 0.1875rem 0;
    transform: translate(-50%, -50%) rotate(45deg);
}

@keyframes pack-product-in-left {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    62% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pack-product-in-right {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    62% {
        opacity: 1;
        transform: scale(1.03);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pack-panel-in {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pack-check-pop {
    0% {
        opacity: 0;
        transform: scale(0.35);
    }

    64% {
        opacity: 1;
        transform: scale(1.12);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.action h2 {
    max-width: 62rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.action .steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin-top: 2.75rem;
}

.steps article {
    position: relative;
}

.home-page .action.reveal-section .steps article {
    opacity: 0;
    transform: translateY(2rem) scale(0.97);
}

.home-page .action.reveal-section.is-visible .steps article {
    animation: action-step-in 0.95s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(2) {
    animation-delay: 0.12s;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(3) {
    animation-delay: 0.24s;
}

.step-image {
    height: 15.975rem;
    overflow: hidden;
    border-radius: 2.5rem;
    background: rgba(255, 255, 255, 0.45);
}

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

.home-page .action.reveal-section.is-visible .step-image img {
    animation: action-image-bloom 1.2s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(2) .step-image img {
    animation-delay: 0.12s;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(3) .step-image img {
    animation-delay: 0.24s;
}

.steps span {
    position: absolute;
    top: 1.125rem;
    left: 1.125rem;
    display: grid;
    place-items: center;
    width: 2.125rem;
    height: 2.125rem;
    border-radius: 50%;
    color: #fff;
    background: var(--teal);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1.25rem;
}

.home-page .action.reveal-section .steps span {
    opacity: 0;
    transform: scale(0.45);
}

.home-page .action.reveal-section.is-visible .steps span {
    animation: action-number-pop 0.58s cubic-bezier(0.16, 1, 0.3, 1) 0.34s both;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(2) span {
    animation-delay: 0.46s;
}

.home-page .action.reveal-section.is-visible .steps article:nth-child(3) span {
    animation-delay: 0.58s;
}

.steps h3 {
    margin: 2.5rem 0 0.5rem;
    color: var(--teal);
    font-size: 1.125rem;
    line-height: 1.4;
}

.steps p {
    margin: 2.5rem 0 0;
    font-size: 1.125rem;
    line-height: 1.4;
}

.steps h3+p {
    margin-top: 0.5rem;
}

@keyframes action-step-in {
    0% {
        opacity: 0;
        transform: translateY(2rem) scale(0.97);
    }

    64% {
        opacity: 1;
        transform: translateY(-0.25rem) scale(1.01);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes action-image-bloom {
    0% {
        transform: scale(1.08);
        filter: saturate(0.92) blur(0.25rem);
    }

    100% {
        transform: scale(1);
        filter: saturate(1) blur(0);
    }
}

@keyframes action-number-pop {
    0% {
        opacity: 0;
        transform: scale(0.45);
    }

    66% {
        opacity: 1;
        transform: scale(1.14);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.allergy,
.faq {
    position: relative;
    overflow: hidden;
    padding: 7.375rem 0 5.625rem;
    background: var(--bg);
}

.allergen-bg {
    opacity: 0.48;
    background: url("../img/allergen-bg.png") center 14.375rem / 87.5rem auto no-repeat;
    mix-blend-mode: darken;
}

.breadcrumbs {
    margin: 0 0 4.125rem;
    color: var(--teal);
    font-size: 1rem;
}

.breadcrumbs span::before {
    content: "›";
    display: inline-block;
    margin: 0 0.875rem;
    color: var(--magenta);
    font-weight: 800;
}

.white-panel {
    position: relative;
    border-radius: 2.5rem;
    background: var(--white-glass);
}

.lead-panel {
    margin-top: 2.125rem;
    padding: 2.8125rem 4.6875rem;
}

.lead-panel p {
    margin: 0;
    font-size: 1.375rem;
    line-height: 1.4;
}

.lead-panel strong,
.symptom-grid strong,
.type-grid strong,
.steps strong {
    color: var(--teal);
}

.subhead {
    margin: 4.5rem 0 1.375rem;
    color: var(--teal);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1.625rem;
    line-height: 1.4;
}

.symptom-grid,
.type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.125rem 1.25rem;
}

.symptom-grid {
    padding: 2.1875rem 2.1875rem;
    border-radius: 2.5rem;
    background: var(--white-glass);
}

.symptom-grid article,
.type-grid article {
    display: grid;
    grid-template-columns: 5.625rem 1fr;
    gap: 1.625rem;
    align-items: center;
}

.symptom-grid img,
.type-grid img {
    width: 5.625rem;
    height: 5.625rem;
    object-fit: contain;
}

.symptom-grid p,
.type-grid p {
    margin: 0;
    color: var(--teal);
    font-size: 1.125rem;
    line-height: 1.4;
}

.type-grid article {
    min-height: 11.25rem;
    padding: 2rem;
    border-radius: 1.875rem;
    background: var(--white-glass);
}

.faq {
    padding-top: 7.5rem;
}

.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2.625rem;
}

.faq-card {
    min-height: 11.875rem;
    display: grid;
    grid-template-columns: 5.625rem 1fr 1.375rem;
    gap: 1.75rem;
    align-items: center;
    padding: 2rem 2.6875rem;
    border: 0;
    border-radius: 2.5rem;
    color: var(--teal);
    background: var(--white-glass);
    text-align: left;
    font: inherit;
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    transition: transform 180ms ease, background 180ms ease;
}

.faq-card::after {
    content: "↗";
    align-self: start;
    color: var(--magenta);
    font-size: 1.75rem;
    line-height: 1;
}

.faq-card:hover,
.faq-card:focus-visible {
    background: #fff;
    transform: translateY(-0.25rem);
}

.stores {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 3.375rem;
}

.stores a {
    min-height: 12.5rem;
    display: grid;
    place-items: center;
    padding: 1.125rem;
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.72);
    transition: transform 180ms ease, background 180ms ease;
}

.visually-hidden {
    border: 0;
    clip-path: inset(100%);
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
    clip: rect(0 0 0 0);
    overflow: hidden;
}

.stores a:hover,
.stores a:focus-visible {
    background: #fff;
    transform: translateY(-0.25rem);
}

.stores img {
    max-height: 5.5rem;
    object-fit: contain;
}



.site-footer {
    flex-shrink: 0;
    background: rgba(0, 116, 142, 0.7);
    z-index: 0;
}

.footer-top {
    padding: 0;
    color: #fff;
    font-family: Arial, sans-serif;
    font-size: 0.875rem;
    line-height: 1.2;
}

.footer-grid {
    width: min(73.75rem, calc(100% - 3rem));
    min-height: 5.6875rem;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 10.625rem 1fr 10.625rem;
    grid-template-rows: 1fr auto 1fr;
    gap: 0 2rem;
    align-items: center;
}

.site-footer .footer-grid {
    width: min(73.75rem, calc(100% - 3rem));
    margin: 0 auto;
}

.footer-grid img {
    grid-column: 1;
    grid-row: 1 / -1;
    width: 8.0625rem;
}

.footer-links {
    padding-left: 14.125rem;
    grid-column: 1 / -1;
    grid-row: 1;
    justify-items: center;
    gap: 1rem;
    margin: 0.8125rem 0 0 0;
    text-align: center;
}

.footer-grid a {
    margin-right: 1rem;
    color: #fff;
    text-decoration: underline;
}

.footer-links a:first-of-type {
    position: relative;
    margin-right: 2rem;
}

.footer-links a:first-of-type:after {
    position: absolute;
    display: block;
    content: '|';
    right: -2rem;
    top: 0;
    width: 1px;
}

.footer-links a:nth-of-type(2) {
    margin-left: 2rem;
}

@media screen and (max-width: 960px) {
    .footer-links a:first-of-type,
    .footer-links a:nth-of-type(2) {
        margin-left: 0;
        margin-right: 0;
    }
    .footer-links a:first-of-type:after {
        display: none;
    }
}

.footer-grid a:last-of-type {
    margin-right: 0;
}

.footer-grid p {
    grid-column: 1 / -1;
    grid-row: 2 / 4;
    align-self: center;
    margin: 0;
    padding-left: 14.125rem;
    text-align: center;
}

.page-allergy {
    background: var(--bg);
}

.page-faq {
    background: var(--bg);
}

.page-instruction {
    background: var(--bg);
}

.page-buy {
    background: var(--bg);
}

.allergy-page {
    position: relative;
    min-height: 143rem;
    overflow: hidden;
    padding: 7.375rem 0 0;
    background: var(--bg);
}

.allergy-page__cloud,
.allergy-page__particles {
    position: absolute;
    pointer-events: none;
}

.allergy-page__cloud {
    width: 100rem;
    height: 56.25rem;
    opacity: 0.72;
    background: url("../img/clouds.png") center / contain no-repeat;
}

.allergy-page__cloud--one {
    right: 32%;
    top: 53.125rem;
    animation: allergy-cloud-drift 16s ease-in-out infinite;
}

.allergy-page__cloud--two {
    left: 24%;
    top: 103.75rem;
    animation: allergy-cloud-drift 19s ease-in-out infinite reverse;
    animation-delay: -6s;
}

@keyframes allergy-cloud-drift {
    0%, 100% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(2rem, -1.5rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ignore-reduced-motion) .allergy-page__cloud--one,
    body:not(.ignore-reduced-motion) .allergy-page__cloud--two {
        animation: none;
    }
}

.allergy-page__particles {
    left: 50%;
    top: 20rem;
    width: 119.25rem;
    height: 36rem;
    transform: translateX(-60%);
    opacity: 0.42;
    mix-blend-mode: darken;
    background: url("../img/allergen-bg.png") center / contain no-repeat;
    animation: allergy-molecules-float 9s ease-in-out infinite;
    transform-origin: center;
}

@keyframes allergy-molecules-float {
    0%, 100% {
        transform: translateX(-60%) translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateX(-60%) translateY(-1.25rem) rotate(1deg) scale(1.02);
    }
    50% {
        transform: translateX(-60%) translateY(0.75rem) rotate(-0.75deg) scale(0.98);
    }
    75% {
        transform: translateX(-60%) translateY(-0.5rem) rotate(0.5deg) scale(1.01);
    }
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ignore-reduced-motion) .allergy-page__particles {
        animation: none;
    }
}

.allergy-page__content {
    position: relative;
    z-index: 1;
}

.allergy-page h1 {
    margin: 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.allergy-intro {
    margin-top: 2.9375rem;
    padding: 3.25rem 3.875rem;
}

.allergy-intro p {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.4;
}

.allergy-intro strong,
.allergy-symptoms strong,
.allergy-types strong,
.allergy-product strong {
    color: var(--teal);
}

.allergy-subtitle {
    margin: 4.5rem 0 1.5rem;
    color: var(--teal);
    font-size: 1.625rem;
    text-transform: none;
}

.allergy-symptoms {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.allergy-symptoms__group {
    display: grid;
    gap: 1.125rem;
    align-content: center;
    min-height: 21.25rem;
    padding: 2.125rem 2rem;
}

.allergy-symptoms article,
.allergy-types article {
    display: grid;
    grid-template-columns: 5.625rem 1fr;
    gap: 1.75rem;
    align-items: center;
}

.allergy-symptoms img,
.allergy-types img {
    width: 5.625rem;
    height: 5.625rem;
    object-fit: contain;
}

.allergy-symptoms p,
.allergy-types p {
    margin: 0;
    color: var(--teal);
    font-size: 1.125rem;
    line-height: 1.35;
}

.allergy-types {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
}

.allergy-types article {
    min-height: 13.1875rem;
    padding: 2.1875rem;
}

.allergy-footnote {
    width: min(36.25rem, 100%);
    margin: 1.5rem 0 0;
    font-size: 0.875rem;
    font-style: italic;
    font-weight: 300;
    line-height: 1.3;
}

.faq-link-button {
    display: block;
    width: max-content;
    margin: 3rem auto 0;
    padding: 0.9375rem 2.5rem;
    border-radius: 7.5rem;
    color: #fff;
    background: linear-gradient(90deg, var(--teal), #9ddfee);
    font-weight: 800;
    text-decoration: none;
}

.allergy-product {
    display: grid;
    grid-template-columns: 36.25rem 1fr;
    gap: 5.625rem;
    align-items: center;
    margin-top: 12.75rem;
    padding-bottom: 6.875rem;
}

.allergy-product__text {
    padding: 2.625rem 3.25rem;
}

.allergy-product__text ul {
    margin: 0;
    padding-left: 1.125rem;
}

.allergy-product__text li {
    margin: 0 0 1.125rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.allergy-product__text li:last-child {
    margin-bottom: 0;
}

.allergy-product>img {
    width: min(26.4375rem, 100%);
    height: auto;
}

.faq-page {
    position: relative;
    min-height: 56.25rem;
    overflow: hidden;
    padding: 7.375rem 0 0;
    background: var(--bg);
}

.faq-page__cloud {
    position: absolute;
    right: calc(var(--layout-edge) - 61rem);
    top: -1.6875rem;
    width: 125.5rem;
    height: 70.625rem;
    opacity: 0.82;
    transform: rotate(180deg) scaleY(-1);
    background: url("../img/clouds.png") center / contain no-repeat;
    pointer-events: none;
}

.faq-page__content {
    position: relative;
    z-index: 1;
}

.faq-page h1 {
    margin: 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.faq-page__grid {
    margin-top: 4.125rem;
}

.buy-page {
    position: relative;
    min-height: 56.25rem;
    overflow: hidden;
    padding: 7.375rem 0 5.625rem;
    background: var(--bg);
}

.buy-page__cloud {
    position: absolute;
    right: calc(var(--layout-edge) - 61rem);
    top: -1.6875rem;
    width: 125.5rem;
    height: 70.625rem;
    opacity: 0.82;
    transform: rotate(180deg) scaleY(-1);
    background: url("../img/clouds.png") center / contain no-repeat;
    pointer-events: none;
}

.buy-page__content {
    position: relative;
    z-index: 1;
}

.buy-page h1 {
    margin: 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 2.375rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
}

.buy-page__stores {
    margin-top: 4.125rem;
}

.faq-detail-page {
    position: relative;
    overflow: hidden;
    padding: 7.375rem 0 3.5rem;
    background: var(--bg);
}

.faq-detail-page__cloud {
    position: absolute;
    right: calc(var(--layout-edge) - 61rem);
    top: -1.6875rem;
    width: 125.5rem;
    height: 70.625rem;
    opacity: 0.82;
    transform: rotate(180deg) scaleY(-1);
    background: url("../img/clouds.png") center / contain no-repeat;
    pointer-events: none;
}

.faq-detail-page__content {
    position: relative;
    z-index: 1;
}

.faq-article {
    width: min(73.75rem, 100%);
    margin: 0 auto;
    padding: 1.875rem 3.125rem 2.1875rem 3.375rem;
}

.faq-article__content {
    display: grid;
    gap: 1.25rem;
    color: var(--teal-dark);
}

.faq-article h1 {
    margin: 0 0 0.625rem;
    color: var(--teal-dark);
    font-family: "Inter", Arial, sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.3;
}

.faq-article h2 {
    margin: 0;
    color: var(--teal);
    font-family: "Inter", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    text-transform: none;
}

.faq-article p,
.faq-article li {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

.faq-article ul,
.faq-article ol {
    margin: -0.875rem 0 0;
    padding-left: 1.625rem;
}

.privacy-policy ul,
.privacy-policy ol {
    margin: 0;
}

.faq-article ol ul,
.faq-article ol ol,
.faq-article ul ul,
.faq-article il ul 
 {
    margin: 0.5rem 0;
 }

.faq-article ol ul,
.faq-article ol ol,
.faq-article ul ul,
.faq-article il ul 
 {
    margin: 0.5rem 0;
 }

.faq-article strong {
    font-weight: 700;
}

.faq-article em {
    font-weight: 300;
}

.faq-article sup {
    font-size: 65%;
    line-height: 0;
}

.faq-product-callout {
    display: grid;
    grid-template-columns: 13.875rem minmax(0, 1fr);
    gap: 1.625rem;
    align-items: center;
    margin-top: 0.375rem;
    padding: 2.5rem 1.875rem 2.5rem 0;
    border: 0.125rem solid var(--pink);
    border-radius: 2.5rem;
}

.faq-product-callout img {
    width: 13.875rem;
    height: 11.25rem;
    object-fit: contain;
}

.faq-article__image {
    width: min(22rem, 100%);
    margin: 0 auto 2rem;
    object-fit: contain;
}

.faq-product-callout ul {
    margin-top: 0;
}

.faq-article__buy {
    justify-self: center;
    min-width: 12rem;
    margin: 0.75rem 0 1.125rem;
}

.comparison-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0.75rem 0.625rem;
    margin: -0.25rem -0.75rem 0;
}

.comparison-table th,
.comparison-table td {
    padding: 0.625rem 1.5rem;
    border: 0.0625rem solid #569db7;
    border-radius: 3.125rem;
    background: rgba(255, 255, 255, 0.36);
    color: var(--teal-dark);
    font-size: 1.125rem;
    line-height: 1.3;
    text-align: center;
    vertical-align: middle;
}

.comparison-table th {
    color: var(--teal);
    font-weight: 700;
}

.comparison-table td:first-child {
    font-weight: 700;
}

.instruction-page {
    position: relative;
    padding: 7.375rem 0 0;
    background: linear-gradient(100deg, #d8f3fe 0%, #e2f5f8 55%, var(--bg) 100%);
}

.instruction-page__cloud-container {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow-x: hidden;
}

.instruction-page__cloud {
    position: absolute;
    left: 50%;
    top: 0;
    width: 125.5rem;
    height: 70.625rem;
    opacity: 0.72;
    transform: translateX(-28%) rotate(180deg) scaleY(-1);
    background: url("../img/clouds.png") center / contain no-repeat;
    pointer-events: none;
}

.instruction-hero,
.instruction-layout {
    position: relative;
    z-index: 1;
}

.instruction-hero {
    display: grid;
    grid-template-columns: minmax(22.5rem, 33rem) minmax(22.5rem, 36.625rem);
    justify-content: space-between;
    gap: clamp(2.25rem, 4vw, 5rem);
    align-items: start;
    min-height: 26.875rem;
}

.instruction-title h1 {
    margin: 0 0 1.75rem;
    color: var(--teal-dark);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 1.625rem;
    font-weight: 500;
    line-height: 1.4;
    text-transform: uppercase;
}

.instruction-summary {
    width: min(33rem, 100%);
    padding: 1.875rem 2.25rem;
}

.instruction-summary p {
    margin: 0 0 0.625rem;
    font-size: 1.25rem;
    line-height: 1.4;
}

.instruction-summary p:last-child {
    margin-bottom: 0;
}

.pdf-button {
    display: inline-block;
    margin-top: 2.75rem;
    padding: 0.9375rem 2.125rem;
    border: 0.0625rem solid var(--teal);
    border-radius: 7.5rem;
    color: var(--teal);
    font-size: 1.125rem;
    font-weight: 600;
    text-decoration: none;
}

.instruction-product {
    width: 100%;
    max-width: 36.625rem;
    height: 27.1875rem;
    object-fit: contain;
    justify-self: end;
}

.instruction-layout {
    display: grid;
    grid-template-columns: 23.75rem minmax(0, 1fr);
    gap: 4.0625rem;
    align-items: start;
    padding: 1.125rem 0 5.625rem;
}

@media (max-width: 1180px) {
    .instruction-hero {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 44vw);
        gap: 2rem;
    }

    .instruction-product {
        height: auto;
    }
}

.instruction-toc {
    position: relative;
    width: 100%;
    height: 100%;
    top: 0;
}

.instruction-toc > div {
    position: sticky;
    top: 5.375rem;
}

@media (max-width: 960px) {
    .instruction-toc > div {
        position: relative;
        top: 0;
    }
}

.instruction-toc h2 {
    margin: 0;
    padding: 0 0 1.25rem;
    border-bottom: 0.0625rem solid var(--teal);
    color: var(--teal-dark);
    font-family: "Inter", Arial, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.instruction-toc a {
    display: block;
    padding: 1rem 0 1.25rem;
    border-bottom: 0.0625rem solid var(--teal);
    color: var(--teal-dark);
    font-size: 1.125rem;
    line-height: 1.3;
    text-decoration: none;
    transition: color 0.3s ease;
}

.instruction-toc a.corresponding_block_visible {
    color: var(--teal);
}

@media screen and (max-width: 960px) {
    .instruction-toc a:last-of-type {
        border-bottom: none;
        padding-bottom: 0;
    }
}

.instruction-toc a.corresponding_block_visible {
    color: var(--teal);
}

.instruction-toc a:hover,
.instruction-toc a:focus-visible {
    color: var(--magenta);
}

.instruction-cards {
    display: grid;
    gap: 1.875rem;
}

.instruction-card {
    padding: 1.875rem 3rem 2.1875rem 3.4375rem;
}

.instruction-card h2 {
    margin: 0 0 1.25rem;
    color: var(--teal-dark);
    font-family: "Inter", Arial, sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
}

.instruction-card h3 {
    margin: 1.75rem 0 0.75rem;
    color: var(--teal-dark);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.4;
}

.instruction-card p,
.instruction-card li {
    font-size: 1.125rem;
    line-height: 1.3;
}

.instruction-card p {
    margin: 0 0 0.75rem;
}

.instruction-card p:last-child,
.instruction-card li:last-child {
    margin-bottom: 0;
}

.instruction-card ul {
    margin: 0 0 1rem;
    padding-left: 1.6875rem;
}

.instruction-card li {
    margin-bottom: 0.625rem;
}

.instruction-lead {
    font-weight: 700;
}

@media (max-width: 960px) {
    .container,
    .home-page .container {
        width: auto;
        margin: 0 1.5rem;
    }

    html {
        scroll-padding-top: calc(4.5rem + 1rem);
    }

    .site-header {
        height: 3.5rem;
        grid-template-columns: 7.4375rem 1fr auto;
        padding: 0 1.5rem;
    }

    .footer-top {
        padding: 0 1.5rem;
    }

    .logo img {
        width: 7.4375rem;
    }

    .menu-toggle {
        display: grid;
        place-content: center;
        gap: 0.25rem;
        justify-self: end;
        width: 2.5rem;
        height: 2.5rem;
        padding: 0.5rem;
        border: 0;
        border-radius: 50%;
        background: var(--teal);
        cursor: pointer;
        transition: box-shadow 220ms ease, filter 220ms ease;
    }

    .menu-toggle:hover,
    .menu-toggle:focus-visible {
        box-shadow: 0 0.75rem 1.5rem rgba(5, 123, 143, 0.24);
        filter: brightness(1.08);
    }

    .menu-toggle span {
        display: block;
        width: 1.1875rem;
        height: 0.125rem;
        background: #fff;
        transform-origin: center;
        transition: opacity 180ms ease, transform 180ms ease;
    }

    .menu-toggle.is-open span:nth-child(1) {
        transform: translateY(0.375rem) rotate(45deg);
    }

    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-0.375rem) rotate(-45deg);
    }

    @keyframes slideDown {
        from {
          transform: translateY(-20%); 
          opacity: 0;   
          display: none;                
        }
        to {
          transform: translateY(0);    
          opacity: 1;
          display: flex;
        }
    }

    @keyframes slideUp {
        from {
          transform: translateY(0%); 
          opacity: 1;  
          display: flex;                 
        }
        to {
          transform: translateY(-20%);    
          opacity: 0;
          display: none;
        }
    }

    .main-nav {
        position: fixed;
        z-index: 999;
        display: none;
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        min-width: 0;
        padding: 0;
        border-radius: 0 0 1.875rem 1.875rem;
        background: var(--bg);
        box-shadow: 0 1.5rem 3rem rgba(178, 35, 115, 0.14);
    }

    .main-nav.is-open {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.375rem;
        padding-top: 5.0rem;
        padding-bottom: 3.2rem;
        animation: slideDown 0.3s ease-out forwards;
    }

    .main-nav.is-closed {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1.375rem;
        padding-top: 5.0rem;
        padding-bottom: 3.2rem;
        animation: slideUp 0.2s ease-out forwards;
    }

    .main-nav a {
        width: auto;
        color: var(--teal);
        font-size: 1.25rem;
        line-height: 1.1;
        text-align: center;
    }

    .main-nav a.main-nav__buy {
        display: grid;
        place-items: center;
        width: auto;
        min-width: 11.25rem;
        min-height: 2.75rem;
        margin-top: 0.0625rem;
        padding: 0.75rem 1.75rem;
        border-radius: 7.5rem;
        color: #fff !important;
        font-size: 1.125rem;
        line-height: 1.1;
        white-space: nowrap;
        background: linear-gradient(90deg, var(--magenta), var(--pink));
        box-shadow: 0 0.75rem 1.875rem rgba(178, 35, 115, 0.18);
        text-decoration: none !important;
    }

    body.nav-open {
        overflow: hidden;
    }

    .buy-button {
        display: none;
    }

    .hero-grid,
    .pack-grid,
    .action .steps,
    .benefit-grid,
    .symptom-grid,
    .type-grid,
    .faq-grid,
    .footer-grid,
    .allergy-symptoms,
    .allergy-types,
    .allergy-product {
        grid-template-columns: 1fr;
    }
	
    .stores {
        grid-template-columns: repeat(2, 1fr)
    }

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

    .section-screen {
        min-height: auto;
    }

    .home-page .section-screen {
        min-height: auto;
        height: auto;
        overflow: visible;
        align-items: center;
    }

    .hero {
        padding: 7rem 0 4.375rem;
    }

    .home-page .hero {
        min-height: auto;
        padding: 6.5rem 0 3.5rem;
    }

    .home-page .benefits,
    .home-page .packs,
    .home-page .action,
    .home-page .buy {
        padding: 2.5rem 0;
    }

    .home-page .action {
        align-items: center;
        padding: 2.5rem 0;
    }

    .home-page .buy {
        padding: 2.5rem 0;
    }

    .benefits .cloud-layer {
        right: auto;
        left: -13.125rem;
        width: min(53.75rem, 86vw);
    }

    .action .cloud-layer {
        top: 1.5rem;
        left: -41.1875rem;
        bottom: auto;
        width: 100rem;
        height: 56.25rem;
    }

    .buy .cloud-layer {
        right: -16.25rem;
        bottom: 4svh;
        width: min(61.25rem, 94vw);
    }

    .home-page .benefit-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.25rem 1.5rem;
        margin-top: 1.5rem;
    }

    .home-page .benefit-grid article {
        min-height: 7.375rem;
    }

    .home-page .benefit-grid img {
        width: 8.75rem;
        height: 8.75rem;
        margin-bottom: 0.625rem;
    }

    .home-page .benefit-grid p,
    .home-page .note {
        font-size: 0.9375rem;
    }

    .home-page .note {
        margin-top: 1.625rem;
    }

    .home-page .small-note {
        font-size: 0.75rem;
    }

    .home-page .pack-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem;
        padding-top: 1.5rem;
    }

    .home-page .pack-card img {
        width: min(22.75rem, 100%);
        min-height: 0;
        height: clamp(18.6875rem, 44vh, 26.8125rem);
    }

    .home-page .pack-card>div {
        min-height: 0;
        margin-top: -2rem;
        padding: 1.375rem;
        border-radius: 1.5rem;
    }

    .home-page .pack-card p {
        grid-template-columns: 1.875rem 1fr;
        gap: 0.75rem;
        font-size: 1rem;
    }

    .home-page .check {
        width: 1.875rem;
        height: 1.875rem;
    }

    .home-page .check::after {
        width: 0.5625rem;
        height: 0.875rem;
    }

    .home-page .action .steps {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
        margin-top: 1.5rem;
    }

    .home-page .step-image {
        height: clamp(9.375rem, 24vh, 13.125rem);
        border-radius: 1.5rem;
    }

    .home-page .steps h3,
    .home-page .steps p {
        margin-top: 1rem;
        font-size: 0.9375rem;
    }

    .home-page .stores {
        grid-template-columns: repeat(4, 1fr);
        gap: 0.875rem;
        margin-top: 1.875rem;
    }

    .home-page .stores a {
        min-height: 8.125rem;
        padding: 0.375rem;
    }

    .home-page .stores img {
        max-height: 4.75rem;
    }

    .hero-grid {
        gap: 1.25rem;
        min-height: auto;
    }

    .home-page .hero-grid {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        min-height: 0;
        height: auto;
        aspect-ratio: auto;
        display: grid;
        grid-template-columns: 1fr;
        align-content: center;
        gap: 1.25rem;
        transform: none;
    }

    .home-page .hero-copy {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        transform: none;
    }

    .home-page .hero-copy h1 {
        font-size: clamp(1.9375rem, 7vw, 2.75rem);
    }

    .home-page .hero-product img {
        position: relative;
        z-index: 1;
        width: min(32rem, calc(100vw - 3rem));
        max-height: none;
        object-fit: contain;
        margin-top: 0;
    }

    .home-page .hero-cloud,
    .home-page .hero::before {
        display: none;
    }

    .home-page .hero-product {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        height: auto;
        transform: none;
        animation: none;
    }

    .home-page .hero-product::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 100%;
        width: 100vw;
        aspect-ratio: 320 / 428;
        transform: translate(-50%, -68.2%);
        background: url("../img/hero-podium-bg.png") center / 100% 100% no-repeat;
        pointer-events: none;
        z-index: 0;
    }

    .hero-product img {
        width: min(26.25rem, 100%);
        margin: 1.25rem auto 0;
    }

    .benefits,
    .packs,
    .action,
    .buy,
    .allergy,
    .faq {
        padding: 5.5rem 0 4.375rem;
    }

    .benefit-grid {
        gap: 1.75rem;
    }

    .pack-grid {
        gap: 2.125rem;
    }

    .pack-card img {
        min-height: 19.375rem;
    }

    .lead-panel {
        padding: 1.875rem;
    }

    .lead-panel p {
        font-size: 1.125rem;
    }

    .symptom-grid,
    .type-grid article,
    .faq-card {
        border-radius: 1.75rem;
    }

    .stores a {
        min-height: 9.375rem;
    }

    .footer-grid {
        justify-items: center;
        min-height: 0;
        padding: 1.375rem 0;
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 0.75rem;
        text-align: center;
    }

    .footer-grid img,
    .footer-links,
    .footer-grid p {
        grid-column: auto;
        grid-row: auto;
        align-self: auto;
        margin: 0;
        padding-left: 0;
        text-align: center;
    }
    .footer-links {
        display: grid;
        margin: 1rem 0;
    }

    .allergy-page {
        min-height: auto;
        padding-top: 6.125rem;
    }

    .faq-page,
    .buy-page,
    .instruction-page {
        min-height: auto;
        padding: 6.125rem 0 4.375rem;
    }

    .allergy-page h1,
    .faq-page h1,
    .buy-page h1 {
        font-size: 1.875rem;
    }

    .instruction-hero,
    .instruction-layout {
        grid-template-columns: 1fr;
        gap: 2.125rem;
    }

    .instruction-product {
        justify-self: center;
        height: auto;
    }

    .instruction-layout {
        padding-top: 1.375rem;
    }

    .instruction-toc {
        position: static;
        padding: 1.5rem;
        border-radius: 1.75rem;
        background: var(--white-glass);
    }

    .instruction-card {
        padding: 1.875rem;
    }

    .faq-detail-page {
        padding: 6.125rem 0 4.375rem;
    }

    .faq-page__cloud,
    .faq-detail-page__cloud,
    .buy-page__cloud {
        right: -48rem;
        opacity: 0.88;
    }

    .faq-article {
        padding: 1.875rem;
        border-radius: 1.75rem;
    }

    .faq-product-callout {
        grid-template-columns: 10rem minmax(0, 1fr);
        padding: 1.875rem 1.5rem 1.875rem 0;
        border-radius: 1.75rem;
    }

    .comparison-table {
        display: block;
        overflow-x: auto;
        padding-bottom: 0.25rem;
        border-spacing: 0.5rem;
        margin-right: -0.5rem;
        margin-left: -0.5rem;
    }

    .comparison-table th,
    .comparison-table td {
        min-width: 12rem;
        padding: 0.625rem 1rem;
        font-size: 1rem;
    }

    .faq-product-callout img {
        width: 10rem;
        height: 8.75rem;
    }

    .faq-article__buy {
        display: inline-block;
    }

    .allergy-intro {
        margin-top: 1.875rem;
        padding: 2rem;
    }

    .allergy-product {
        gap: 1.75rem;
        margin-top: 4.5rem;
    }

    .allergy-product>img {
        justify-self: center;
    }

    .notfound-page {
        padding: 6.125rem 0 4.375rem;
    }

    .notfound-page__cloud--one,
    .notfound-page__cloud--two {
        width: 56.25rem;
        height: 32.5rem;
    }
}

@media (max-width: 560px) {
    .container,
    .home-page .container {
        width: auto;
        margin: 0 1rem;
    }

    .site-header {
        height: 3.5rem;
        padding: 0 1rem;
    }

    .stores {
        grid-template-columns: 1fr;
    }

    .footer-top {
        padding: 0 0.875rem;
    }

    .logo img {
        width: 7.4375rem;
    }

    .home-page .hero-product {
        width: min(19rem, 92%);
        margin: 0.25rem auto 0;
    }

    .home-page .hero-product::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 100vw;
        height: 130%;
        transform: translateX(-50%);
        background: url("../img/hero-podium-bg.png") center 42% / cover no-repeat;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 68%, transparent 97%);
        mask-image: linear-gradient(to bottom, transparent 0%, #000 10%, #000 68%, transparent 97%);
        pointer-events: none;
        z-index: 0;
    }

    .home-page .hero-product::after {
        display: none;
    }

    .home-page .hero-product img {
        position: relative;
        z-index: 1;
        width: 88%;
        max-height: 42vh;
        margin: 0 auto;
        display: block;
    }

    .hero-copy h1 {
        font-size: 1.9375rem;
    }

    .title-line {
        display: none;
    }

    .hero-copy p {
        font-size: 1.5625rem;
    }

    h2 {
        font-size: 1.5625rem;
    }

    .home-page .hero {
        min-height: 35.5rem;
        height: auto;
        padding: 5.5rem 0 2.5rem;
    }

    .home-page .hero-grid {
        min-height: 0;
        gap: 0;
    }

    .home-page .hero-copy {
        margin-top: 3.4375rem;
    }

    .home-page .hero-copy h1 {
        font-size: 1.875rem;
        line-height: 1.22;
        text-transform: uppercase;
    }

    .home-page .hero-copy p {
        margin-top: 0.8125rem;
        color: var(--teal);
        font-size: 1.375rem;
        line-height: 1.18;
        text-transform: none;
    }

    .home-page .benefit-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .benefit-grid article {
        grid-template-columns: 1fr;
        gap: 0.875rem;
        justify-items: center;
        align-items: center;
        text-align: center;
        min-height: 0;
    }

    .benefit-grid img {
        width: 9rem;
        height: 9rem;
        margin-bottom: 0;
    }

    .home-page .pack-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .home-page .action .steps {
        grid-template-columns: 1fr;
    }

    .home-page .stores {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .home-page .stores a {
        min-height: 5.5rem;
    }

    .pack-card>div {
        padding: 1.625rem;
        border-radius: 1.75rem;
    }

    .pack-card p,
    .steps p,
    .note,
    .benefit-grid p {
        font-size: 1rem;
    }

    .step-image {
        height: 13.4375rem;
        border-radius: 1.75rem;
    }

    .breadcrumbs {
        margin-bottom: 2.375rem;
    }

    .symptom-grid {
        padding: 1.5rem;
    }

    .symptom-grid article,
    .type-grid article,
    .faq-card,
    .allergy-symptoms article,
    .allergy-types article {
        grid-template-columns: 4rem 1fr;
        gap: 1.125rem;
    }

    .faq-card {
        min-height: 9.375rem;
        padding: 1.5rem;
    }

    .faq-card::after {
        display: none;
    }

    .symptom-grid img,
    .type-grid img,
    .faq-card img,
    .allergy-symptoms img,
    .allergy-types img {
        width: 4rem;
        height: 4rem;
    }

    .allergy-page h1,
    .faq-page h1,
    .buy-page h1 {
        font-size: 1.5625rem;
    }

    .allergy-intro,
    .allergy-symptoms__group,
    .allergy-types article,
    .allergy-product__text,
    .instruction-card,
    .instruction-summary {
        padding: 1.5rem;
        border-radius: 1.75rem;
    }

    .allergy-intro p,
    .allergy-symptoms p,
    .allergy-types p,
    .allergy-product__text li,
    .instruction-card p,
    .instruction-card li,
    .instruction-summary p,
    .instruction-toc a,
    .faq-article p,
    .faq-article li {
        font-size: 1rem;
    }

    .faq-article h1 {
        font-size: 1.25rem;
    }

    .faq-article h2 {
        font-size: 1.125rem;
    }

    .faq-product-callout {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }

    .faq-page__cloud,
    .faq-detail-page__cloud,
    .buy-page__cloud {
        right: -64rem;
    }

    .faq-product-callout img {
        width: min(13.875rem, 100%);
        justify-self: center;
    }

    .notfound-page h1 {
        font-size: 1.375rem;
    }

    .notfound-page p.notfound-text {
        font-size: 1rem;
    }

    .notfound-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.875rem;
    }

    .notfound-actions .buy-button,
    .notfound-actions .pdf-button {
        width: 100%;
        text-align: center;
    }
}

.notfound-page {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    display: grid;
    align-items: center;
    padding: 7.375rem 0 5.625rem;
    background: linear-gradient(160deg, #d8f3fe 0%, #e2f5f8 54%, #fff 100%);
}

.notfound-page__cloud {
    position: absolute;
    pointer-events: none;
    opacity: 0.72;
    background: url("../img/clouds.png") center / contain no-repeat;
}

.notfound-page__cloud--one {
    left: -13.75rem;
    top: -3.75rem;
    width: 87.5rem;
    height: 50rem;
}

.notfound-page__cloud--two {
    right: -17.5rem;
    bottom: -8.75rem;
    width: 100rem;
    height: 56.25rem;
    transform: rotate(180deg);
}

.notfound-page__content {
    position: relative;
    z-index: 1;
    display: grid;
    justify-items: center;
    gap: 0.5rem;
    text-align: center;
}

.notfound-product {
    position: relative;
    width: min(13.75rem, 46vw);
    margin-bottom: 0.5rem;
    animation: notfound-float 4.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body:not(.ignore-reduced-motion) .notfound-product {
        animation: none;
    }
}

.notfound-code {
    margin: 0;
    color: var(--teal);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(5.625rem, 14vw, 11.25rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.25rem;
}

.notfound-code span {
    color: var(--magenta);
}

.notfound-page h1 {
    margin: 1.125rem 0 0;
    color: var(--magenta);
    font-family: "Montserrat", Arial, sans-serif;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.3;
    text-transform: uppercase;
}

.notfound-page p.notfound-text {
    max-width: 35rem;
    margin: 1.125rem 0 0;
    font-size: 1.1875rem;
    line-height: 1.5;
}

.notfound-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.125rem;
    margin-top: 2.5rem;
}

.notfound-actions .buy-button {
    display: inline-block;
}

.notfound-actions .pdf-button {
    margin-top: 0;
}

@keyframes notfound-float {
    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-1rem) rotate(4deg);
    }
}