/* The mobile-app announcement is intentionally self-contained. */
body:has(.app-page) #header {
    background: rgba(255, 250, 248, .97);
    box-shadow: 0 1px 0 rgba(65, 32, 46, .08);
}

.app-page {
    overflow-x: clip;
    background: #fffaf8;
}

.app-hero {
    position: relative;
    isolation: isolate;
    color: #fff;
    background:
        radial-gradient(circle at 82% 41%, rgba(255, 82, 143, .30), transparent 31%),
        radial-gradient(circle at 8% 100%, rgba(203, 66, 110, .22), transparent 37%),
        linear-gradient(128deg, #21141d 0%, #331a29 53%, #180f18 100%);
}

.app-hero::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    opacity: .42;
    background-image: radial-gradient(rgba(255, 255, 255, .35) .7px, transparent .7px);
    background-size: 28px 28px;
    mask-image: linear-gradient(90deg, transparent 35%, #000 100%);
    pointer-events: none;
}

.app-hero__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(0, .97fr);
    align-items: center;
    gap: clamp(30px, 5vw, 90px);
    min-height: 760px;
    padding-top: 76px;
    padding-bottom: 116px;
}

.app-hero__copy {
    position: relative;
    z-index: 3;
    max-width: 690px;
}

.app-eyebrow,
.app-section-kicker,
.app-teaser__kicker {
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: #ffc1d6;
}

.app-eyebrow__icon {
    display: block;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 13px;
    box-shadow: 0 10px 28px rgba(255, 83, 145, .25);
}

.app-hero h1 {
    margin: 26px 0 25px;
    font-size: clamp(2.7rem, 4.65vw, 5.7rem);
    font-weight: 700;
    letter-spacing: -.075em;
    line-height: .99;
}

.app-hero h1 em {
    color: #ff5c9b;
    font-style: normal;
}

.app-hero__tagline {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 600;
    line-height: 1.3;
}

.app-hero__lead {
    max-width: 565px;
    color: #e4cfd8;
    font-size: clamp(1.09rem, 1.5vw, 1.33rem);
    line-height: 1.65;
}

.app-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 34px;
}

.app-button {
    display: inline-flex;
    min-height: 58px;
    align-items: center;
    justify-content: center;
    gap: 24px;
    padding: 13px 26px;
    border-radius: 999px;
    font-size: .98rem;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.app-button:hover,
.app-button:focus-visible {
    transform: translateY(-3px);
}

.app-button:focus-visible,
.app-teaser__panel:focus-visible,
.app-hero__scroll:focus-visible {
    outline: 3px solid #ffb4d0;
    outline-offset: 4px;
}

.app-button--pink {
    color: #fff;
    background: #ff2c7f;
    box-shadow: 0 16px 35px rgba(255, 44, 127, .28);
}

.app-button--pink:hover,
.app-button--pink:focus-visible { background: #ff4b94; }

.app-button--outline {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .54);
    background: rgba(255, 255, 255, .06);
}

.app-button--outline:hover,
.app-button--outline:focus-visible { background: rgba(255, 255, 255, .16); }

.app-button--dark {
    color: #fff;
    background: #21141d;
}

.app-hero__note {
    max-width: 560px;
    margin-top: 22px;
    color: #c8adb9;
    font-size: .86rem;
}

.app-hero__visual {
    position: relative;
    z-index: 2;
    min-width: 0;
    height: 690px;
    margin: 0;
}

.app-hero__halo {
    position: absolute;
    inset: 7% -18% 1%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 106, 153, .40), rgba(201, 52, 112, .13) 45%, transparent 70%);
    filter: blur(10px);
}

.app-hero__ring {
    position: absolute;
    inset: 5% -16%;
    border: 1px solid rgba(255, 147, 186, .27);
    border-radius: 50%;
    transform: rotate(-28deg) scaleY(.64);
    pointer-events: none;
}

.app-hero__ring--two {
    inset: 14% -8%;
    border-color: rgba(255, 255, 255, .13);
    transform: rotate(24deg) scaleY(.75);
}

.app-hero__spark {
    position: absolute;
    z-index: 2;
    width: 17px;
    height: 17px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 50%;
    background: #ff7aa9;
    box-shadow: 0 0 0 10px rgba(255, 111, 167, .12), 0 0 30px #fa5696;
    animation: app-twinkle 4.8s ease-in-out infinite;
}

.app-hero__spark--one { top: 10%; right: 14%; }
.app-hero__spark--two { bottom: 17%; left: 5%; width: 9px; height: 9px; animation-delay: -2s; }

.app-phone-float {
    position: absolute;
    z-index: 2;
    top: 1%;
    left: 50%;
    animation: app-phone-bob 7s ease-in-out infinite;
}

.app-phone {
    position: relative;
    width: clamp(260px, 27vw, 332px);
    aspect-ratio: 853 / 1844;
    padding: 8px;
    overflow: hidden;
    border: 2px solid #ad8799;
    border-radius: 51px;
    background: #120b12;
    box-shadow: 0 38px 75px rgba(9, 3, 10, .6), 13px 10px 0 rgba(255, 209, 228, .12), inset 0 0 0 2px #47303b;
    transform: rotate(-7deg);
}

.app-phone::before {
    position: absolute;
    z-index: 2;
    top: 13%;
    right: -5px;
    width: 4px;
    height: 10%;
    border-radius: 2px;
    background: #ad8799;
    content: "";
}

.app-phone__screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 43px;
    background: #26131d;
}

.app-phone__screen img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.app-phone__glint {
    position: absolute;
    inset: 8px;
    border-radius: 43px;
    background: linear-gradient(106deg, rgba(255, 255, 255, .11), transparent 30%, transparent 73%, rgba(255, 255, 255, .08));
    pointer-events: none;
}

.app-hero__visual figcaption {
    position: absolute;
    z-index: 3;
    bottom: -30px;
    right: 1%;
    color: #d7bdc7;
    font-size: .72rem;
    text-align: right;
}

.app-hero__scroll {
    position: absolute;
    bottom: 26px;
    left: max(var(--container-gutter), calc((100% - var(--container)) / 2 + var(--container-gutter)));
    display: inline-flex;
    gap: 14px;
    align-items: center;
    color: #e3cbd5;
    font-size: .8rem;
    letter-spacing: .06em;
}

.app-steps {
    padding: 148px 0 115px;
    background: #fffaf8;
}

.app-steps__heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, .65fr);
    gap: 24px 70px;
    align-items: end;
    max-width: 1100px;
    margin-bottom: 48px;
}

.app-section-kicker {
    grid-column: 1 / -1;
    color: #fb2878;
}

.app-steps__heading h2,
.app-now h2 {
    font-size: clamp(2.6rem, 5vw, 5.4rem);
    line-height: 1.02;
    letter-spacing: -.06em;
}

.app-steps__heading > p:last-child {
    max-width: 420px;
    color: #6a5b62;
    font-size: 1.04rem;
    line-height: 1.7;
}

.app-steps__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    list-style: none;
}

.app-steps__grid li {
    min-height: 255px;
    padding: 28px;
    border: 1px solid #eadde1;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 38px rgba(82, 35, 56, .05);
}

.app-steps__number {
    display: block;
    margin-bottom: 36px;
    color: #ff3484;
    font-size: 3rem;
    font-weight: 500;
    letter-spacing: -.07em;
    line-height: 1;
}

.app-steps__grid h3 { margin-bottom: 11px; font-size: 1.27rem; line-height: 1.2; }
.app-steps__grid p { color: #70636a; font-size: .96rem; line-height: 1.55; }

.app-now {
    padding: 96px 0 115px;
    background: linear-gradient(145deg, #ffd9e6, #fff0f3 56%, #fff8f4);
}

.app-now__inner { max-width: 1100px; }
.app-now h2 { max-width: 850px; margin: 22px 0; }
.app-now__inner > p:not(.app-section-kicker) { max-width: 700px; margin-bottom: 30px; color: #68545f; font-size: 1.1rem; line-height: 1.7; }

/* A compact invitation between the homepage's articles and FAQ. */
.app-teaser { padding: 0 0 55px; background: #fff; }

.app-teaser__panel {
    position: relative;
    display: grid;
    min-height: 320px;
    grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr);
    align-items: center;
    overflow: hidden;
    border-radius: 27px;
    color: #fff;
    background: radial-gradient(circle at 80% 45%, #8a3157 0, #4b2035 32%, #20151f 75%);
    box-shadow: 0 16px 38px rgba(75, 30, 50, .12);
}

.app-teaser__copy { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; padding: 28px 0 28px 42px; }
.app-teaser__kicker { color: #ffb5d0; }
.app-teaser__copy strong { margin: 10px 0 8px; font-size: clamp(1.75rem, 2.65vw, 2.8rem); font-weight: 700; line-height: 1.07; letter-spacing: -.045em; }
.app-teaser__description { max-width: 565px; color: #e2cbd5; font-size: .9rem; line-height: 1.48; }
.app-teaser__link { display: inline-flex; align-items: center; gap: 15px; margin-top: 13px; border-bottom: 1px solid #ff72aa; padding-bottom: 5px; color: #fff; font-size: .9rem; font-weight: 700; }
.app-teaser__visual { position: relative; display: block; width: 100%; height: 100%; min-height: 320px; }
.app-teaser__orbit { position: absolute; inset: 13% -12%; border: 1px solid rgba(255, 190, 214, .4); border-radius: 50%; transform: rotate(-19deg) scaleY(.65); }
.app-teaser__phone { position: absolute; z-index: 1; top: 15px; left: 38%; width: 135px; padding: 4px; overflow: hidden; border: 2px solid #bfa0ad; border-radius: 27px; background: #170e17; box-shadow: 0 18px 35px rgba(8, 2, 7, .42); transform: rotate(-10deg); transition: transform .55s cubic-bezier(.2, .7, .2, 1); }
.app-teaser__phone img { display: block; width: 100%; height: auto; border-radius: 22px; }
.app-teaser__panel:hover .app-teaser__phone { transform: rotate(-5deg) translateY(-8px); }

@keyframes app-phone-bob { 0%, 100% { transform: translate(-50%, -5px); } 50% { transform: translate(-50%, 12px); } }
@keyframes app-twinkle { 0%, 100% { opacity: .55; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.2); } }

@media (max-width: 1050px) {
    .app-hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 20px; }
    .app-hero h1 { font-size: clamp(2.8rem, 5.5vw, 4.8rem); }
}

@media (max-width: 760px) {
    .app-hero__grid { display: block; padding-top: 148px; padding-bottom: 42px; }
    .app-hero__copy { max-width: 640px; }
    .app-hero h1 { font-size: clamp(2.6rem, 9vw, 4.5rem); }
    .app-hero__lead { font-size: 1.06rem; }
    .app-hero__visual { height: 650px; max-width: 540px; margin: 50px auto 0; }
    .app-phone { width: min(290px, 58vw); }
    .app-hero__visual figcaption { right: 6%; bottom: 10px; }
    .app-hero__scroll { display: none; }
    .app-steps { padding-top: 80px; }
    .app-steps__heading { grid-template-columns: 1fr; }
    .app-section-kicker { grid-column: auto; }
    .app-steps__grid { grid-template-columns: 1fr; }
    .app-steps__grid li { min-height: 0; }
    .app-steps__number { margin-bottom: 25px; }
    .app-teaser__copy { padding-left: 30px; }
    .app-teaser__phone { left: 20%; }
}

@media (max-width: 520px) {
    .app-hero__grid { padding-top: 132px; }
    .app-eyebrow { font-size: .66rem; letter-spacing: .1em; }
    .app-hero h1 { margin-top: 22px; font-size: clamp(2.2rem, 9vw, 3.1rem); letter-spacing: -.055em; }
    .app-hero__actions { align-items: stretch; flex-direction: column; gap: 10px; }
    .app-button { width: 100%; min-height: 56px; font-size: .91rem; }
    .app-hero__visual { height: 555px; margin-top: 40px; }
    .app-phone { width: min(238px, 59vw); border-radius: 40px; }
    .app-phone__screen, .app-phone__glint { border-radius: 33px; }
    .app-eyebrow__icon { width: 42px; height: 42px; flex-basis: 42px; border-radius: 11px; }
    .app-hero__visual figcaption { right: 0; bottom: 4px; max-width: 250px; font-size: .63rem; }
    .app-steps { padding: 78px 0 84px; }
    .app-steps__heading h2, .app-now h2 { font-size: clamp(2.45rem, 10vw, 3.3rem); }
    .app-steps__grid li { padding: 25px; }
    .app-now { padding: 76px 0 88px; }
    .app-teaser { padding-bottom: 36px; }
    .app-teaser__panel { grid-template-columns: minmax(0, 1fr) 92px; min-height: 260px; border-radius: 24px; }
    .app-teaser__copy { padding: 23px 0 23px 22px; }
    .app-teaser__kicker { font-size: .6rem; letter-spacing: .1em; }
    .app-teaser__copy strong { font-size: clamp(1.35rem, 6vw, 1.8rem); }
    .app-teaser__description { font-size: .75rem; line-height: 1.35; }
    .app-teaser__link { margin-top: 11px; font-size: .8rem; }
    .app-teaser__visual { min-height: 260px; }
    .app-teaser__phone { top: 27px; left: 0; width: 105px; }
}

@media (prefers-reduced-motion: reduce) {
    .app-hero__spark,
    .app-phone-float { animation: none; }
    .app-button,
    .app-teaser__phone { transition: none; }
}