/* Homepage v2 sections (SEO prototype 2026-10-26). Mobile first; loaded only on the homepage. */

.hp2 {
    padding: 48px 0;
    color: #4f5157;
}

.hp2__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
}

.hp2__title {
    max-width: 860px;
    margin: 0 auto 24px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #2d3336;
    text-align: center;
    text-wrap: balance;
}

.hp2__title span {
    color: #065967;
}

.hp2__text {
    margin: 0 0 16px;
    font-size: 16px;
    line-height: 1.6;
}

/* Cards in the colours of the Weight Loss and Longevity bands */
.hp2-card {
    position: relative;
    overflow: hidden;
    padding: 40px 24px;
    border-radius: 24px;
    color: #fff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hp2-card__text {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

.btn-rounded-blur.hp2__pill {
    display: inline-block;
    padding: 14px 28px;
    font-size: 16px;
}

/* Intro band: H1 + What is + How it works as one connected block, on the same
   1440px container as the other homepage bands (.mp-block-border-container) */
.hp2-intro {
    padding: 16px 0 40px;
}

.hp2-intro__band {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 40px 24px;
    border-radius: 24px;
    color: #fff;
    background-color: #395886;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.hp2-intro__block {
    position: relative;
    z-index: 1;
}

.hp2-intro__block + .hp2-intro__block {
    margin-top: 64px;
}

.hp2-intro .hp2__title {
    color: #fff;
}

.hp2-intro .hp2__title span {
    color: #2ebfd8;
}

.hp2-intro .hp2__text,
.hp2-intro .hp2-whatis__lead {
    color: #fff;
}

.hp2-intro .hp2-whatis__lead {
    color: #fff;
}

@media (min-width: 768px) {
    .hp2__inner {
        padding: 0 24px;
    }

    .hp2-intro__band {
        padding: 56px;
    }

    /* Decorative line-art, masked out of the centre so it only sits in empty space beside the copy */
    .hp2-intro__band::before {
        content: "";
        position: absolute;
        inset: 0;
        background: url(../img/pics/new-mp/background-lines2-intro.svg) center / cover no-repeat;
        -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 22%, transparent 78%, #000 86%, #000 100%);
        mask-image: linear-gradient(90deg, #000 0%, #000 14%, transparent 22%, transparent 78%, #000 86%, #000 100%);
        pointer-events: none;
    }

    .hp2-whatis__cutout {
        max-width: 440px;
    }


    .hp2-intro__block + .hp2-intro__block {
        margin-top: 80px;
    }

    .hp2__text,
    .hp2-card__text {
        font-size: 18px;
    }

    .hp2-card {
        padding: 56px;
    }
}

@media (min-width: 1024px) {
    .hp2 {
        padding: 72px 0;
    }

    .hp2-intro {
        padding-top: 0;
    }

    .hp2-intro__band {
        padding: 72px;
    }

    .hp2-intro .hp2__title {
        font-size: 40px;
    }

    .hp2-intro__block + .hp2-intro__block {
        margin-top: 96px;
    }

    .hp2__title {
        margin-bottom: 32px;
        font-size: 48px;
    }
}

/* Brand block with the page H1 (first block of the intro band) */
.hp2-brand__copy {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.hp2-brand--photo .hp2-brand__copy {
    max-width: 640px;
    margin: 0;
    text-align: left;
}

.hp2-brand__title {
    margin: 0 0 20px;
    font-size: 32px;
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    text-wrap: balance;
}

.hp2-brand__title span {
    color: #2ebfd8;
}

.hp2-brand--photo {
    padding-bottom: 0;
}

.hp2-brand__photo {
    display: block;
    width: 100%;
    max-width: 360px;
    height: auto;
    margin: 32px auto 0;
}

@media (min-width: 1024px) {
    .hp2-brand__title {
        font-size: 52px;
    }

    .hp2-brand--photo {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 24px;
        align-items: end;
        padding-right: 0;
    }

    .hp2-brand--photo .hp2-brand__copy {
        padding-bottom: 56px;
    }

    .hp2-brand__photo {
        width: auto;
        max-width: 100%;
        max-height: 440px;
        margin: 0 auto;
    }
}

/* What is Heally */
.hp2-whatis {
    text-align: center;
}

.hp2-whatis .hp2__title {
    margin: 0 auto 20px;
}

.hp2-whatis__lead {
    max-width: 860px;
    margin: 0 auto 16px;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 600;
    color: #2d3336;
}

.hp2-whatis .hp2__text {
    max-width: 860px;
    margin: 0 auto;
}

.hp2-whatis .hp2__text + .hp2__text {
    margin-top: 16px;
}

/* With a cut-out: an opaque panel (same tint as the step cards) with the copy on the left and the
   person on the right, cropped at the panel's bottom edge like the brand band. Stacks on mobile. */
/* The photo block sits in a box like the step cards */
.hp2-whatis--photo .hp2-whatis__panel {
    padding: 32px 24px 0;
    border-radius: 20px;
    background: #49658f;
}

/* Zoomed-in crop of the standing figure: a fixed window, the image scaled up and anchored to her head,
   the bottom of the window fading into the band */
.hp2-whatis__cutout {
    display: block;
    width: 300px;
    height: 440px;
    max-width: 100%;
    margin: 0 auto 24px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 74%, transparent 100%);
}

.hp2-whatis__cutout img {
    display: block;
    width: 100%;
    height: auto;
}

.hp2-whatis__cutout img {
    display: block;
    width: 100%;
    height: auto;
}

@media (min-width: 1024px) {
    .hp2-whatis__lead {
        font-size: 20px;
    }

    /* photo + copy sit together as one centred group: no dead space on either side */
    .hp2-whatis--photo .hp2-whatis__panel {
        display: grid;
        grid-template-columns: auto minmax(0, 480px);
        justify-content: center;
        align-items: center;
        column-gap: 64px;
        padding: 48px 56px;
        text-align: left;
    }

    .hp2-whatis--photo .hp2-whatis__cutout {
        width: 460px;
        height: 620px;
        margin: 0;
    }

    .hp2-whatis--photo .hp2-whatis__copy {
        max-width: none;
    }

    .hp2-whatis--photo .hp2__title {
        margin: 0 auto 20px;
        text-align: center; /* centred over the body copy column */
    }

    .hp2-whatis--photo .hp2-whatis__lead {
        font-size: 21px;
        line-height: 1.55;
    }

    .hp2-whatis--photo .hp2__text {
        font-size: 19px;
        line-height: 1.7;
    }

    .hp2-whatis--photo .hp2-whatis__cutout {
        max-width: 520px;
        margin: 0 auto;
    }

    .hp2-whatis--photo .hp2__title,
    .hp2-whatis--photo .hp2-whatis__lead,
    .hp2-whatis--photo .hp2__text {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    .hp2-whatis--photo .hp2__title {
        margin-bottom: 20px;
    }
}

/* How Heally works (last block of the intro band) */
.hp2-how {
    text-align: center;
}

.hp2-how .hp2__title {
    color: #fff;
}

.hp2-how .hp2__title span {
    color: #2ebfd8;
}

.hp2-how__lede {
    max-width: 860px;
    margin: 0 auto 32px;
}

.hp2-steps {
    display: grid;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.hp2-step {
    position: relative; /* sits above the band's line-art so it never crosses the text */
    padding: 24px;
    border-radius: 20px;
    background: #49658f; /* opaque: band blue + 8% white */
}

.hp2-step__ico {
    display: block;
    box-sizing: border-box;
    width: 56px;
    height: 56px;
    margin-bottom: 20px;
    padding: 12px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.hp2-step__photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin-bottom: 20px;
    border-radius: 14px;
    object-fit: cover;
}

.hp2-steps--photos .hp2-step {
    padding: 14px 14px 24px;
}

.hp2-steps--photos .hp2-step__title,
.hp2-steps--photos .hp2-step__text {
    padding: 0 10px;
}

.hp2-step__title {
    margin: 0 0 8px;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 700;
    color: #fff;
}

.hp2-step__text {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
}

@media (min-width: 1024px) {
    .hp2-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Common questions */
.hp2-faq__list {
    max-width: 860px;
    margin: 0 auto;
}

.hp2-faq__item {
    border-bottom: 1px solid #dfe7e7;
}

.hp2-faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 0;
    cursor: pointer;
    list-style: none;
}

.hp2-faq__item summary::-webkit-details-marker {
    display: none;
}

.hp2-faq__item summary::after {
    content: "+";
    flex: 0 0 auto;
    font-size: 24px;
    line-height: 1;
    color: #065967;
}

.hp2-faq__item[open] summary::after {
    content: "\2212";
}

.hp2-faq__q {
    margin: 0;
    font-size: 18px;
    line-height: 1.35;
    font-weight: 600;
    color: #2d3336;
}

.hp2-faq__item .hp2__text {
    margin: 0 0 18px;
}