/* Opening composition: one continuous photograph and a cream silhouette that
   extends behind the transparent navigation. The app remains an actual UI. */
.home-marketing { overflow-x: clip; }
.home-marketing > header.header.header {
    position: sticky;
    height: var(--marketing-header-height);
    margin-bottom: -80px;
    background: transparent;
    box-shadow: none;
    padding-inline: var(--marketing-header-gutter);
}
.home-marketing > header.header.header.hero-scrolled { background: var(--cream); box-shadow: 0 1px 0 #183c2514; }
.home-marketing .hero {
    z-index: 2;
    overflow: visible;
    height: clamp(680px, 52.9vw, 900px);
    min-height: 0;
    padding: 0;
    display: block;
    background: var(--cream);
}
.hero .hero-photo {
    inset: 0 0 0 13%;
    width: 87%;
    height: 100%;
    object-position: center top;
    z-index: -3;
}
.hero .hero-mask {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: var(--cream);
    z-index: -2;
    pointer-events: none;
}
.hero .hero-wash {
    display: block;
    z-index: -1;
    background: linear-gradient(90deg, var(--cream) 0%, #faf9f3e6 25%, #faf9f380 33%, transparent 44%);
    pointer-events: none;
}
.hero::after { display: none; }
.hero .hero-inner {
    width: 91.4%;
    max-width: 1600px;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: block;
}
.hero .hero-copy {
    position: absolute;
    top: 18.5%;
    left: 0;
    width: 42%;
    max-width: 640px;
    transform: none;
}
.hero .eyebrow {
    font-size: clamp(10px, .87vw, 13px);
    letter-spacing: .25em;
    margin-bottom: 23px;
    color: #52676a;
}
.hero h1 {
    font-size: var(--marketing-hero-title);
    line-height: .96;
    letter-spacing: -.055em;
    font-weight: 740;
    font-variation-settings: 'wdth' 100;
    color: #041c1b;
}
.hero h1::before, .hero .hero-description::before { display: none; }
.hero .hero-tagline {
    position: relative;
    display: inline-block;
    margin-top: 15px;
    white-space: nowrap;
    font-size: var(--marketing-hero-tagline);
    font-weight: 650;
    line-height: 1.2;
    letter-spacing: -.035em;
    transform: rotate(-4deg);
    transform-origin: left center;
}
.hero-tagline svg { position: absolute; width: 23%; height: 18px; right: 7%; bottom: -15px; fill: none; stroke: currentColor; stroke-width: 2.3; }
.hero .hero-description {
    max-width: 500px;
    margin: 39px 0 22px;
    font-size: var(--marketing-hero-body);
    font-weight: 400;
    line-height: 1.4;
    color: #5b7076;
    text-shadow: none;
}
.hero .actions { gap: 14px; flex-wrap: nowrap; }
.hero .actions .button { min-height: 52px; padding-inline: 20px; gap: 18px; border-radius: 7px; font-size: clamp(12px, 1.16vw, 17px); }
.hero .actions .outline { background: #fffdf7d9; border-color: #698c86; }
.hero .hero-note { color: #7b8f94; text-shadow: none; margin-top: 26px; font-size: 10px; letter-spacing: .29em; }
.hero .hero-strip, .hero .hero-scribble, .hero .phone-scribble, .hero .hero-group-space { display: none; }
.hero .hero-inner .phone-stage {
    position: absolute;
    z-index: 5;
    top: 28%;
    right: 6%;
    margin: 0;
    padding: 0;
    width: 298px;
    transform: scale(var(--hero-phone-scale, .85)) perspective(1400px) rotateY(-9deg) rotate(8deg);
    transform-origin: top right;
}
.hero .phone { height: 640px; }
.hero .phone-camera { top: 8px; width: 90px; height: 23px; border-radius: 18px; }
.hero .phone-camera::before { display: none; }
.hero .phone-status { height: 39px; }
.hero .flight-sticker {
    position: absolute;
    z-index: 3;
    top: 225px;
    right: -105px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 17px 19px;
    background: #fffef8;
    border-radius: 13px;
    box-shadow: 0 9px 24px #182c2920;
    transform: rotate(-14deg);
}
.flight-sticker > .action-icon { width: 27px; height: 30px; color: var(--green); }
.flight-sticker strong { display: block; font-size: 13px; font-weight: 750; }
.flight-sticker span { display: block; margin-top: 2px; font-size: 10px; color: #657477; }
@media (min-width: 761px) and (max-width: 1100px) {
    .hero .hero-copy { top: 20%; width: 48%; }
    .hero h1 { font-size: clamp(56px, 6.7vw, 74px); }
    .hero .hero-description { max-width: 330px; font-size: 17px; }
    .hero .actions { flex-wrap: wrap; max-width: 350px; }
    .hero .hero-inner .phone-stage { right: 3%; top: 28%; }
    .hero .flight-sticker { right: -50px; }
}
@media (max-width: 760px) {
    .home-marketing > header.header.header { height: 77px; margin-bottom: -77px; padding-inline: 20px; }
    .home-marketing .hero { height: auto; min-height: 0; padding: 108px 0 40px; }
    .hero .hero-inner { width: calc(100% - 40px); height: auto; }
    .hero .hero-copy { position: relative; top: auto; width: 100%; max-width: 520px; }
    .hero .eyebrow { font-size: 9px; letter-spacing: .2em; margin-bottom: 19px; }
    .hero h1 { font-size: clamp(52px, 12.3vw, 84px); }
    .hero .hero-tagline { font-size: clamp(25px, 6.4vw, 39px); margin-top: 15px; }
    .hero .hero-description { max-width: 370px; font-size: 17px; margin-top: 30px; }
    .hero .actions { flex-wrap: wrap; gap: 10px; }
    .hero .actions .button { font-size: 12px; min-height: 48px; padding-inline: 14px; gap: 12px; }
    .hero .hero-note { font-size: 8px; letter-spacing: .2em; margin-top: 21px; }
    .hero .hero-photo { inset: auto 0 0; width: 100%; height: 760px; object-position: 42% center; mask-image: none; }
    .hero .hero-mask { display: none; }
    .hero .hero-wash { background: linear-gradient(180deg, var(--cream) 0%, var(--cream) 35%, #faf9f3b3 46%, transparent 65%); }
    .hero .hero-inner .phone-stage {
        position: relative;
        top: 45px;
        right: auto;
        margin: 70px 35px 0 auto;
        transform: perspective(1400px) rotateY(-9deg) rotate(8deg);
        transform-origin: center;
        width: 260px;
    }
    .hero .phone { width: 260px; height: 570px; }
    .hero #live-rows { min-height: 165px; }
    .hero .leader-row { height: 33px; }
    .hero .phone-body .demo-caption { display: none; }
    .hero .app-event { padding-block: 8px; }
    .hero .app-round { margin-bottom: 3px; }
    .hero .flight-sticker { top: 210px; right: -42px; padding: 12px; gap: 8px; }
    .hero .flight-sticker strong { font-size: 11px; }
}