/* The home page is dark from the hero down in both colour schemes: the photo sections paint
   their own colours and everything else sits on the slate of the hero's shadows. The tokens
   are flipped on <main> and the footer rather than <body> so the nav pill keeps its own. */
body {
    background: var(--color-bg-dark);
}

main,
.site-footer {
    --color-bg: var(--color-bg-dark);
    --color-surface: #2c3548;
    --color-border: rgba(255, 255, 255, 0.12);
    --color-text: #f3f5fb;
    --color-text-secondary: rgba(243, 245, 251, 0.66);
    --color-text-tertiary: rgba(243, 245, 251, 0.44);
    --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
    --icon-filter: invert(1);
    color: var(--color-text);
}

/* Hero: full-bleed photo, copy laid over the bottom */
.hero {
    position: relative;
    /* Fills the viewport, but stops at a size where the photo's subject still reads at a
       glance: taller than this and the copy drifts a long way from the phone. */
    min-height: min(100svh, 920px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #2d3b5c;
}

.hero-media {
    position: absolute;
    inset: 0;
}

.hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

.hero-scrim {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 55%),
        linear-gradient(
            180deg,
            rgba(0, 0, 0, 0.25) 0%,
            rgba(0, 0, 0, 0) 25%,
            rgba(0, 0, 0, 0) 45%,
            rgba(0, 0, 0, 0.85) 78%,
            var(--color-bg-dark) 100%
        );
}

.hero-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: calc(var(--nav-height) + var(--space-4xl));
    /* Keeps the copy on the dark part of the scrim, above where it dissolves into the page. */
    padding-bottom: 9rem;
}

.hero h1 {
    color: #ffffff;
    font-size: clamp(2.5rem, 4vw, 3.75rem);
    max-width: 14ch;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.hero-pitch {
    color: rgba(255, 255, 255, 0.84);
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    max-width: 36rem;
    margin-top: var(--space-md);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.hero-badges img {
    height: 54px;
    width: auto;
    border-radius: 10px;
}

.hero-featured {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.hero-featured span {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
    font-size: 0.9375rem;
}

/* The listing logos are black artwork, so they get a white chip to sit on. */
.hero-featured a {
    display: flex;
    padding: 0.625rem 0.875rem;
    border-radius: var(--radius-md);
    background: #ffffff;
    transition: transform var(--transition-fast);
}

.hero-featured a:hover {
    transform: translateY(-2px);
}

.hero-featured img {
    height: 26px;
    width: auto;
}

/* On wider screens the hero is a copy column beside the photo. The photo is pushed right
   so the phone in it lands clear of the copy, and its left edge dissolves into the hero's
   own colour, which the copy then sits on. */
@media (min-width: 701px) {
    .hero-media {
        left: 22%;
    }

    /* When the photo is taller than wide, the crop favours its right side so the phone
       stays beside the copy rather than under it. */
    .hero-media img {
        object-position: 30% 40%;
    }

    .hero-scrim {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, 0.25) 0%,
                rgba(0, 0, 0, 0) 25%,
                rgba(0, 0, 0, 0) 45%,
                rgba(0, 0, 0, 0.85) 78%,
                var(--color-bg-dark) 100%
            ),
            linear-gradient(90deg, #2d3b5c 20%, rgba(45, 59, 92, 0) 48%);
    }

    .hero-content {
        align-items: flex-start;
        text-align: left;
    }

    .hero-pitch {
        max-width: 30rem;
    }

    .hero-badges,
    .hero-featured {
        justify-content: flex-start;
    }
}

/* Meet Bud */
.bud {
    padding: var(--space-3xl) 0 var(--space-4xl);
}

.bud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
}

.bud-text h2 {
    margin: var(--space-sm) 0 var(--space-lg);
}

.bud-text p:not(.eyebrow) {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    max-width: 34rem;
}

.bud-image {
    width: 100%;
    max-width: 520px;
    justify-self: center;
}

.bud .overline {
    text-align: center;
    margin: var(--space-3xl) 0 var(--space-lg);
}

.question-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.question-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.question-card p {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Feature sections: a photo with the copy over it, then screenshots that overlap the
   photo's faded bottom edge. The height is fixed by the viewport rather than the photo so the
   layout holds together whatever the aspect ratio. */
.feature {
    /* Behind the screenshots the colour runs from this photo's bottom edge to the next photo's
       top edge. The ramp is measured from the section's bottom and stops short of the photo
       box, where the photo's own fade takes over in the same colour. */
    background: linear-gradient(0deg, var(--feature-next) 0, var(--feature-fade) var(--feature-ramp, 560px));
    overflow: hidden;
    /* The scrim for the copy sits on the copy's side only, so the phone in the photo, which
       is always on the other side, keeps its full contrast. */
    --feature-scrim: linear-gradient(90deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 58%);
}

.feature-right {
    --feature-scrim: linear-gradient(270deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 58%);
}

/* `--section-prev` is the colour of whatever came before, so each photo can fade in from it
   and no section starts on a hard line. `--feature-fade` matches this photo's bottom edge and
   `--feature-next` the next one's top edge. */
.feature-health {
    --section-prev: var(--color-bg-dark);
    --feature-fade: var(--photo-health-bottom);
    --feature-next: var(--photo-food-top);
    --feature-bg: url("/images/bloom/feature-health.webp");
    --feature-bg-mobile: url("/images/bloom/feature-health-mobile.webp");
}

.feature-food {
    --section-prev: var(--photo-food-top);
    --feature-fade: var(--photo-food-bottom);
    --feature-next: var(--photo-sleep-top);
    --feature-bg: url("/images/bloom/feature-food.webp");
    --feature-bg-mobile: url("/images/bloom/feature-food-mobile.webp");
}

.feature-sleep {
    --section-prev: var(--photo-sleep-top);
    --feature-fade: var(--photo-sleep-bottom);
    --feature-next: var(--photo-workout-top);
    --feature-bg: url("/images/bloom/feature-sleep.webp");
    --feature-bg-mobile: url("/images/bloom/feature-sleep-mobile.webp");
}

.feature-workout {
    --section-prev: var(--photo-workout-top);
    --feature-fade: var(--photo-workout-bottom);
    /* Nothing dark follows, so the band stays flat and the reviews dissolve it into the page. */
    --feature-next: var(--photo-workout-bottom);
    --feature-bg: url("/images/bloom/feature-workout.webp");
    --feature-bg-mobile: url("/images/bloom/feature-workout-mobile.webp");
}

.feature-photo {
    position: relative;
    height: clamp(560px, 62vw, 860px);
}

/* The photo under three gradients: the previous section's colour dissolving in at the top,
   the fade into this section's colour at the bottom for the screenshots to sit on, and under
   both the scrim for the copy, so the fades cover the scrim rather than the scrim darkening
   them into a grey block that ends on a hard line. The phone in every photo spans roughly the top two thirds of this
   box, so the bottom fade only starts below it and the top dissolve stays short. Both fades
   ease in and out through intermediate stops; a straight ramp leaves a visible edge where it
   reaches full colour. */
.feature-photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            var(--section-prev) 0,
            color-mix(in srgb, var(--section-prev) 94%, transparent) 24px,
            color-mix(in srgb, var(--section-prev) 72%, transparent) 60px,
            color-mix(in srgb, var(--section-prev) 38%, transparent) 104px,
            color-mix(in srgb, var(--section-prev) 10%, transparent) 148px,
            transparent 190px
        ),
        linear-gradient(
            180deg,
            transparent 60%,
            color-mix(in srgb, var(--feature-fade) 18%, transparent) 69%,
            color-mix(in srgb, var(--feature-fade) 52%, transparent) 77%,
            color-mix(in srgb, var(--feature-fade) 84%, transparent) 85%,
            color-mix(in srgb, var(--feature-fade) 97%, transparent) 92%,
            var(--feature-fade) 100%
        ),
        var(--feature-scrim),
        var(--feature-bg) center 15% / cover no-repeat;
}

.feature-photo .container {
    position: relative;
    z-index: 1;
}

.feature-text {
    max-width: 30rem;
    /* Below the dissolve from the previous section, where the scrim is solid. */
    padding-top: 10rem;
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.feature-text p {
    margin-top: var(--space-md);
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.86);
}

.feature-right .feature-text {
    margin-left: auto;
}

.feature-screens {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-top: -240px;
    padding-bottom: var(--space-3xl);
}

.feature-screens img {
    width: 100%;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.25));
}

.feature-screens figcaption {
    margin-top: var(--space-md);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 800;
    color: var(--color-text);
}

/* Reviews */
.reviews {
    position: relative;
    padding: var(--space-4xl) 0;
}

/* Dissolves the last feature's colour into the page, eased through intermediate stops. */
.reviews::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 320px;
    background: linear-gradient(
        180deg,
        var(--photo-workout-bottom) 0,
        color-mix(in srgb, var(--photo-workout-bottom) 88%, transparent) 12%,
        color-mix(in srgb, var(--photo-workout-bottom) 60%, transparent) 32%,
        color-mix(in srgb, var(--photo-workout-bottom) 30%, transparent) 55%,
        color-mix(in srgb, var(--photo-workout-bottom) 10%, transparent) 78%,
        transparent 100%
    );
    pointer-events: none;
}

.reviews .container {
    position: relative;
}

.review-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

.review-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-xl);
    padding: var(--space-xl);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.review-card blockquote {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.review-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.review-meta img {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-pill);
    object-fit: cover;
}

.review-author {
    display: flex;
    flex-direction: column;
    flex: 1;
    line-height: 1.3;
}

.review-author span {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
}

.stars {
    width: 100px;
    height: 20px;
    background: url("/images/bloom/icons/star.svg") left center / 20px 20px repeat-x;
}

/* Survey: a soft glow behind Bud gives the section a centre without a hard-edged band. */
.survey {
    padding: var(--space-4xl) 0;
    background: radial-gradient(55% 70% at 78% 50%, var(--color-glow), transparent 70%);
}

.survey-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: var(--space-2xl);
}

.survey-text p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin: var(--space-lg) 0 var(--space-xl);
    max-width: 34rem;
}

.survey-image {
    width: 100%;
    max-width: 440px;
    justify-self: center;
}

/* FAQ */
.faq {
    padding: var(--space-4xl) 0;
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.faq-item {
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-lg);
    font-size: 1.125rem;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1;
    transition: transform var(--transition-normal);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item p {
    padding: 0 var(--space-lg) var(--space-lg);
    color: var(--color-text-secondary);
    line-height: 1.7;
}

/* Closing */
.closing {
    padding: var(--space-4xl) 0;
    background: radial-gradient(40% 60% at 50% 40%, var(--color-glow), transparent 70%);
}

.closing-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.closing-icon {
    border-radius: 22px;
    margin-bottom: var(--space-lg);
    box-shadow: var(--shadow-float);
}

.closing p {
    color: var(--color-text-secondary);
    font-size: 1.125rem;
    margin-top: var(--space-sm);
}

.closing .hero-badges {
    margin-top: var(--space-lg);
}

/* Tablet and below */
@media (max-width: 900px) {
    .question-grid {
        grid-template-columns: 1fr;
    }

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

    .bud-grid,
    .survey-grid {
        grid-template-columns: 1fr;
    }

    .bud-image,
    .survey-image {
        max-width: 380px;
    }
}

/* Mobile */
@media (max-width: 700px) {
    /* The copy and a taller scroller sit between photo and section bottom, so the ramp is longer. */
    .feature {
        --feature-ramp: 900px;
    }

    /* On a phone the copy is taller than the viewport, which would stretch the hero and zoom
       the cover-fitted photo until the phone in it sat behind the headline. So, like the
       feature sections, the photo becomes a block of its own that fades into the slate, and
       the copy follows it, overlapping only the faded legs at its bottom. */
    .hero {
        display: block;
        min-height: 0;
        padding-top: calc(var(--nav-height) + var(--nav-offset) + var(--space-md));
        background: var(--color-bg-dark);
    }

    .hero-media {
        /* A <picture> is inline by default; it needs to be a block for the height to apply. */
        display: block;
        position: relative;
        height: 104vw;
    }

    .hero-media img {
        object-position: center top;
    }

    .hero-media::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            180deg,
            transparent 50%,
            color-mix(in srgb, var(--color-bg-dark) 35%, transparent) 68%,
            color-mix(in srgb, var(--color-bg-dark) 80%, transparent) 86%,
            var(--color-bg-dark) 100%
        );
    }

    .hero-scrim {
        display: none;
    }

    .hero-content {
        margin-top: -22vw;
        padding-top: 0;
        padding-bottom: var(--space-2xl);
    }

    /* The portrait photos put the phone where the copy would go, so the photo becomes a
       block of its own and the copy follows it on the solid colour. */
    .feature-photo {
        height: auto;
    }

    .feature-photo::before {
        position: static;
        display: block;
        height: 110vw;
        background:
            linear-gradient(
                180deg,
                var(--section-prev) 0,
                color-mix(in srgb, var(--section-prev) 70%, transparent) 36px,
                color-mix(in srgb, var(--section-prev) 25%, transparent) 84px,
                transparent 120px
            ),
            linear-gradient(
                180deg,
                transparent 66%,
                color-mix(in srgb, var(--feature-fade) 18%, transparent) 74%,
                color-mix(in srgb, var(--feature-fade) 52%, transparent) 81%,
                color-mix(in srgb, var(--feature-fade) 84%, transparent) 88%,
                color-mix(in srgb, var(--feature-fade) 97%, transparent) 94%,
                var(--feature-fade) 100%
            ),
            var(--feature-bg-mobile) center top / cover no-repeat;
    }

    .feature-text,
    .feature-right .feature-text {
        padding-top: var(--space-md);
        margin-left: 0;
        color: var(--color-text);
        text-shadow: none;
    }

    .feature-text p {
        color: var(--color-text-secondary);
    }

    /* Screenshots become a swipeable row instead of three cramped columns. */
    .feature-screens {
        display: flex;
        gap: var(--space-md);
        margin: var(--space-xl) calc(-1 * var(--space-lg)) 0;
        padding: 0 var(--space-lg) var(--space-2xl);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .feature-screens::-webkit-scrollbar {
        display: none;
    }

    .feature-screens li {
        flex: 0 0 72%;
        scroll-snap-align: center;
    }

    .review-card {
        padding: var(--space-lg);
    }

    .review-card blockquote {
        font-size: 1.1875rem;
    }

    .review-meta {
        flex-wrap: wrap;
    }
}