/* ---- page-specific ---- */
.hero {
    padding: 168px 0 80px;
    /* Decorative fanned cards may poke past narrow tablet widths; clip them
       horizontally so they never widen the layout viewport. */
    overflow-x: clip;
}

.hero .wrap {
    display: grid;
    grid-template-columns:1fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.hero h1 {
    font-size: clamp(36px, 5vw, 54px);
    margin-bottom: 20px;
}

.hero h1 em {
    font-style: normal;
    color: var(--coral);
}

.hero p.lead {
    font-size: 18px;
    color: var(--ink-muted);
    max-width: 440px;
    margin-bottom: 32px;
}

.cta-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.store-note {
    font-size: 13px;
    color: var(--ink-muted);
}

/* Hero promo video, framed like the showcase shots and set on the same
   fanned photo-cards the hero has always used, so it reads as part of the
   collage rather than a dropped-in player. Width + aspect-ratio reserve the
   exact box before the poster or video arrive (no layout shift). */
.hero-media {
    position: relative;
    display: flex;
    justify-content: center;
    padding: 12px 0;
}

.hero-media::before {
    content: "";
    position: absolute;
    inset: 6% 0;
    background:
        radial-gradient(45% 40% at 30% 30%, rgba(242, 84, 45, 0.16), transparent 70%),
        radial-gradient(45% 40% at 72% 72%, rgba(47, 158, 136, 0.16), transparent 70%);
    pointer-events: none;
}

.hero-media .photo-card {
    position: absolute;
    width: 150px;
    height: 190px;
}

.hero-media .f1 {
    top: 14%;
    left: calc(50% - 240px);
    transform: rotate(-11deg);
}

.hero-media .f3 {
    top: 4%;
    left: calc(50% + 96px);
    transform: rotate(8deg);
}

.hero-media .f2 {
    bottom: 9%;
    left: calc(50% + 104px);
    width: 140px;
    height: 170px;
    transform: rotate(-5deg);
}

.hero-media .tag {
    position: absolute;
    bottom: 15%;
    left: calc(50% - 222px);
    z-index: 3;
}

.promo {
    position: relative;
    z-index: 2;
    width: 300px;
    margin: 0;
    padding: 7px;
    border-radius: 34px;
    background: #fff;
    box-shadow: 0 0 0 1px rgba(24, 24, 23, 0.06), 0 44px 80px -34px rgba(24, 24, 23, 0.42);
}

.promo-video,
.promo-video img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    border-radius: 27px;
    background: var(--surface);
}

.promo-controls {
    position: absolute;
    right: 19px;
    bottom: 19px;
    display: flex;
    gap: 8px;
}

.promo-controls[hidden] {
    display: none;
}

.promo-btn {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: var(--ink);
    box-shadow: 0 6px 16px -6px rgba(24, 24, 23, 0.35);
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.promo-btn:hover {
    background: #fff;
    transform: scale(1.06);
}

.promo-btn:focus-visible {
    outline: 2px solid var(--coral-accessible);
    outline-offset: 2px;
}

.promo .icon-pause,
.promo .icon-sound,
.promo.is-playing .icon-play,
.promo.has-sound .icon-muted {
    display: none;
}

.promo.is-playing .icon-pause,
.promo.has-sound .icon-sound {
    display: block;
}

.privacy-band {
    padding: 100px 0;
    text-align: center;
}

.privacy-band h2 {
    font-size: clamp(28px, 4vw, 44px);
    max-width: 680px;
    margin: 0 auto 18px;
}

.privacy-band p {
    color: var(--ink-muted);
    max-width: 480px;
    margin: 0 auto 30px;
    font-size: 16.5px;
}

.privacy-row {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.privacy-pill {
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 9px 18px;
    font-size: 13.5px;
    color: var(--ink-muted);
}

.how {
    padding: 100px 0;
}

.steps {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 36px;
}

.step-num {
    font-family: 'Fraunces', serif;
    font-size: 34px;
    color: var(--coral);
    display: block;
    margin-bottom: 14px;
}

.step h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.step p {
    color: var(--ink-muted);
    font-size: 14.5px;
}

@media (max-width: 760px) {
    .steps {
        grid-template-columns:1fr;
        gap: 44px;
    }
}

.how-more {
    margin-top: 44px;
    color: var(--ink-muted);
    font-size: 14.5px;
}

.how-more a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.features {
    padding: 100px 0;
}

.feature-grid {
    display: grid;
    grid-template-columns:repeat(2, 1fr);
    gap: 22px;
}

.feature-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
}

.feature-card .dot {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    margin-bottom: 18px;
}

.feature-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
}

.feature-card p a {
    display: inline-block;
    margin-top: 6px;
    color: var(--ink);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.feature-card p {
    color: var(--ink-muted);
    font-size: 14.5px;
}

@media (max-width: 700px) {
    .feature-grid {
        grid-template-columns:1fr;
    }
}

.collage {
    padding: 100px 0;
}

.collage .wrap {
    display: grid;
    grid-template-columns:0.9fr 1.1fr;
    gap: 56px;
    align-items: center;
}

.collage h2 {
    font-size: clamp(26px, 3.4vw, 36px);
    margin-bottom: 16px;
}

.collage p {
    color: var(--ink-muted);
    font-size: 16px;
    margin-bottom: 16px;
}

.collage ul {
    list-style: none;
    margin-top: 22px;
}

.collage li {
    font-size: 14.5px;
    color: var(--ink-muted);
    padding: 10px 0;
    border-top: 1px solid var(--line);
}

.collage li:first-child {
    border-top: none;
}

.collage li b {
    color: var(--ink);
}

.collage li a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.stack-block {
    display: flex;
    flex-direction: column;
}

.stack-mini {
    position: relative;
    height: 280px;
}

.stack-mini .photo-card {
    position: absolute;
    width: 150px;
    height: 190px;
}

.stack-mini .s1 {
    top: 0;
    left: 40px;
    transform: rotate(-6deg);
}

.stack-mini .s2 {
    top: 40px;
    left: 130px;
    transform: rotate(7deg);
    z-index: 2;
}

.stack-caption {
    margin-top: 18px;
    font-size: 20px;
    color: var(--ink-muted);
}

.showcase {
    padding: 100px 0;
}

.showcase-scroll {
    margin-top: 60px;
}

.showcase-steps {
    list-style: none;
}

.showcase-step {
    padding: 32px 0;
    border-top: 1px solid var(--line);
}

.showcase-step:first-child {
    border-top: none;
    padding-top: 0;
}

.showcase-step-num {
    font-family: 'Fraunces', serif;
    font-size: 14px;
    letter-spacing: .06em;
    color: var(--coral-accessible);
    display: block;
    margin-bottom: 12px;
}

.showcase-step h3 {
    font-size: clamp(24px, 3vw, 32px);
    margin-bottom: 10px;
}

.showcase-step-copy p {
    color: var(--ink-muted);
    font-size: 16px;
    max-width: 420px;
}

.showcase-step-shot {
    margin: 28px 0 0;
    display: flex;
    justify-content: center;
}

.showcase-phone {
    position: relative;
    width: 300px;
    aspect-ratio: 1284 / 2778;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    box-shadow: 0 30px 60px -24px rgba(24, 24, 23, 0.3);
}

/* <picture> only wraps the <img> to offer WebP sizes; keep it out of layout so
   the img still fills .showcase-phone. */
.showcase-phone picture {
    display: contents;
}

.showcase-shot-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.showcase-stage {
    display: none;
}

@media (min-width: 861px) {
    .showcase-scroll.showcase-js-desktop {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 64px;
        align-items: start;
    }

    .showcase-js-desktop .showcase-step {
        min-height: 47vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0;
        border-top: none;
    }

    .showcase-js-desktop .showcase-step-copy {
        max-width: 400px;
    }

    .showcase-js-desktop .showcase-step-num {
        font-size: 15px;
    }

    .showcase-js-desktop .showcase-step h3 {
        font-size: clamp(26px, 2.6vw, 34px);
    }

    .showcase-js-desktop .showcase-step-shot {
        display: none;
    }

    .showcase-js-desktop .showcase-stage {
        display: flex;
        position: sticky;
        top: 130px;
        height: min(720px, 72vh);
        align-items: center;
        justify-content: center;
    }

    .showcase-stage-backdrop {
        position: absolute;
        inset: -28px;
        border-radius: 48px;
        background:
            radial-gradient(120% 120% at 22% 12%, rgba(242, 84, 45, 0.12), transparent 55%),
            radial-gradient(120% 120% at 82% 88%, rgba(47, 158, 136, 0.12), transparent 55%),
            var(--surface);
        border: 1px solid var(--line);
        box-shadow: 0 40px 90px -40px rgba(24, 24, 23, 0.28);
    }

    .showcase-stage-inner {
        position: relative;
        height: 100%;
        max-width: calc(100% - 140px);
        aspect-ratio: 1284 / 2778;
    }

    .showcase-stage-shot {
        position: absolute;
        inset: 0;
        opacity: 0;
        transform: translateY(16px) scale(.97);
    }

    .showcase-stage-shot.is-active {
        opacity: 1;
        transform: none;
        z-index: 1;
    }

    .showcase-stage-shot .showcase-phone {
        width: 100%;
        height: 100%;
    }

    .showcase-stage-progress {
        position: absolute;
        top: 12px;
        right: 12px;
        max-width: calc(50% - 12px);
        font-family: 'Inter', sans-serif;
        font-size: 11px;
        font-weight: 500;
        letter-spacing: .06em;
        color: var(--ink-muted);
        opacity: .75;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }
}

@media (min-width: 861px) and (prefers-reduced-motion: no-preference) {
    .showcase-js-desktop .showcase-stage-shot {
        transition: opacity .35s ease, transform .4s ease;
    }

    .showcase-js-desktop .showcase-stage-shot.is-active {
        transition: opacity .55s ease, transform .65s ease;
    }

    .showcase-js-desktop .showcase-step-copy {
        opacity: .4;
        transition: opacity .4s ease;
    }

    .showcase-js-desktop .showcase-step.is-active .showcase-step-copy {
        opacity: 1;
    }
}

@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
    .showcase-enhanced .showcase-step {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .5s ease, transform .5s ease;
    }

    .showcase-enhanced .showcase-step.is-active {
        opacity: 1;
        transform: none;
    }
}

.pricing {
    padding: 100px 0;
}

.price-grid {
    display: grid;
    grid-template-columns:repeat(3, 1fr);
    gap: 22px;
}

.price-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 30px;
    background: #fff;
}

.price-card.pro {
    border-color: var(--coral);
    position: relative;
}

.price-card.pro::before {
    content: "Best value";
    position: absolute;
    top: -13px;
    left: 24px;
    background: var(--coral-deep);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 100px;
}

.price-card h3 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 16px;
}

.price-card .price {
    font-size: 32px;
    font-family: 'Fraunces', serif;
    margin-bottom: 18px;
}

.price-card .price span {
    font-size: 14px;
    color: var(--ink-muted);
    font-family: 'Inter', sans-serif;
}

.price-card ul {
    list-style: none;
    margin-bottom: 24px;
}

.price-card li {
    font-size: 14px;
    color: var(--ink-muted);
    padding: 8px 0;
    border-top: 1px solid var(--line);
}

.price-card li:first-child {
    border-top: none;
}

@media (max-width: 760px) {
    .price-grid {
        grid-template-columns:1fr;
    }
}

.faq {
    padding: 100px 0;
}

.faq-list {
    max-width: 720px;
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-item button {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--ink);
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
    padding: 22px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.faq-item .plus {
    color: var(--coral-accessible);
    font-size: 20px;
    transition: transform .2s ease;
}

.faq-item.open .plus {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s ease;
}

.faq-answer p {
    color: var(--ink-muted);
    font-size: 14.5px;
    padding-bottom: 22px;
    max-width: 600px;
}

.faq-answer a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.final-cta {
    padding: 120px 0 60px;
    text-align: center;
}

.final-cta h2 {
    font-size: clamp(30px, 4.6vw, 48px);
    max-width: 600px;
    margin: 0 auto 26px;
}

/* ---- try-it teaser (links to the /try demo) ---- */
.try-teaser {
    padding: 0 0 100px;
}

.try-teaser-card {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 48px;
    border-radius: 28px;
    background: #0B0B0C;
    color: #F5F3EF;
}

.try-teaser-card .eyebrow {
    color: #D8A67C;
}

.try-teaser-card h2 {
    font-size: clamp(26px, 3.2vw, 36px);
    margin-bottom: 14px;
}

.try-teaser-card p {
    color: #A1A1A6;
    font-size: 16px;
    margin-bottom: 28px;
    max-width: 460px;
}

.try-teaser-card .btn-primary {
    background: #B07A4F;
    color: #1A120C;
}

.try-teaser-card .btn-primary:hover {
    background: #BD875B;
}

.try-teaser-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    list-style: none;
}

.try-teaser-links a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 56px;
    padding: 0 20px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 16px;
    background: #1C1C1E;
    font-family: 'Fraunces', serif;
    font-size: 19px;
    transition: background .16s ease;
}

.try-teaser-links a:hover {
    background: #2A2A2D;
}

.try-teaser-links a:focus-visible,
.try-teaser-card .btn:focus-visible {
    outline: 2px solid #D8A67C;
    outline-offset: 3px;
}

.try-teaser-num {
    font: 700 12px 'Inter', sans-serif;
    letter-spacing: .08em;
    color: #D8A67C;
}

@media (max-width: 860px) {
    .try-teaser {
        padding-bottom: 72px;
    }

    .try-teaser-card {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 22px;
        border-radius: 24px;
    }
}

/* ---- mobile ---- */
@media (max-width: 860px) {
    .hero {
        padding: 120px 0 60px;
    }

    .hero .wrap {
        grid-template-columns:1fr;
        gap: 44px;
    }

    .hero p.lead {
        max-width: none;
    }

    .promo {
        width: 280px;
    }

    .collage .wrap {
        grid-template-columns:1fr;
        gap: 36px;
    }

    .collage {
        padding: 70px 0;
    }

    .stack-block {
        order: -1;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .promo {
        width: 236px;
        padding: 6px;
        border-radius: 28px;
    }

    .promo-video,
    .promo-video img {
        border-radius: 22px;
    }

    .promo-controls {
        right: 14px;
        bottom: 14px;
    }

    .hero-media .photo-card {
        width: 104px;
        height: 132px;
    }

    .hero-media .f1 {
        left: calc(50% - 170px);
    }

    .hero-media .f3 {
        left: calc(50% + 72px);
    }

    .hero-media .f2 {
        left: calc(50% + 74px);
        width: 96px;
        height: 120px;
    }

    .hero-media .tag {
        left: calc(50% - 172px);
        font-size: 15px;
    }

    .stack-mini {
        width: 100%;
        height: 190px;
        max-width: 230px;
        margin: 0 auto;
    }

    .stack-mini .photo-card {
        width: 112px;
        height: 142px;
    }

    .stack-mini .s1 {
        left: 0;
        top: 0;
    }

    .stack-mini .s2 {
        left: 96px;
        top: 30px;
    }

    .stack-caption {
        text-align: center;
        font-size: 17px;
        margin-top: 14px;
    }

    .privacy-band, .how, .features, .showcase, .pricing, .faq {
        padding: 64px 0;
    }

    .final-cta {
        padding: 80px 0 50px;
    }
}

/* ---- animation: hero entrance ----
   Runs on page load, not scroll — pure CSS, so it never delays or depends on
   JS. `both` holds the "from" state before the (staggered) delay starts and
   the "to" state after it finishes, so nothing flashes unstyled. Only
   opacity/transform are animated (no layout properties), so this can't
   contribute to layout shift. */
@media (prefers-reduced-motion: no-preference) {
    @keyframes fadeUp {
        from {
            opacity: 0;
            transform: translateY(22px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    /* The h1 and lead are the LCP candidates: Chrome doesn't count text as
       painted while it's at opacity 0, so fading them in delays LCP. They
       only rise into place (transform, no fade) and are visible from the
       first frame. */
    @keyframes riseUp {
        from {
            transform: translateY(22px);
        }

        to {
            transform: none;
        }
    }

    .hero .eyebrow,
    .hero .cta-row,
    .hero .store-note {
        animation: fadeUp .7s cubic-bezier(.2, .7, .3, 1) both;
    }

    .hero h1,
    .hero p.lead {
        animation: riseUp .7s cubic-bezier(.2, .7, .3, 1) both;
    }

    .hero .eyebrow {
        animation-delay: 0s;
    }

    .hero h1 {
        animation-delay: .08s;
    }

    .hero p.lead {
        animation-delay: .16s;
    }

    .hero .cta-row {
        animation-delay: .24s;
    }

    .hero .store-note {
        animation-delay: .3s;
    }

    /* Each photo card keeps its own resting rotation (set in .f1–.f3 above)
       as the animation's end state, so the entrance settles into the fanned
       layout instead of flattening it. */
    @keyframes fanCardIn1 {
        from { opacity: 0; transform: translateY(20px) rotate(-11deg) scale(.94); }
        to { opacity: 1; transform: rotate(-11deg); }
    }

    @keyframes fanCardIn2 {
        from { opacity: 0; transform: translateY(20px) rotate(-5deg) scale(.94); }
        to { opacity: 1; transform: rotate(-5deg); }
    }

    @keyframes fanCardIn3 {
        from { opacity: 0; transform: translateY(20px) rotate(8deg) scale(.94); }
        to { opacity: 1; transform: rotate(8deg); }
    }

    .promo { animation: fadeUp .7s cubic-bezier(.2, .7, .3, 1) .1s both; }
    .hero-media .f1 { animation: fanCardIn1 .6s cubic-bezier(.2, .7, .3, 1) .25s both; }
    .hero-media .f3 { animation: fanCardIn3 .6s cubic-bezier(.2, .7, .3, 1) .33s both; }
    .hero-media .f2 { animation: fanCardIn2 .6s cubic-bezier(.2, .7, .3, 1) .41s both; }
    .hero-media .tag { animation: fadeUp .5s ease .55s both; }
}

/* ---- animation: scroll reveal ----
   `.reveal` elements fade/rise into place the first time they cross into the
   viewport (see home-animations.js). Reduced-motion users and no-JS visitors
   never see the opacity:0 starting state, since it only exists inside this
   guarded media query — the layout is identical either way, just static. */
@media (prefers-reduced-motion: no-preference) {
    /* Feature/price/quote cards also get a hover lift (below), which needs
       its own transform/box-shadow transition. Declaring the full property
       list once here — rather than splitting it across two rules — avoids
       one `transition` shorthand silently replacing the other; the second
       rule below only adds the hover *values*, not another `transition`. */
    .reveal {
        opacity: 0;
        transform: translateY(28px);
        transition: opacity .6s cubic-bezier(.2, .7, .3, 1),
            transform .4s cubic-bezier(.2, .7, .3, 1),
            box-shadow .3s ease;
    }

    .reveal.is-revealed {
        opacity: 1;
        transform: none;
    }

    .steps .step.reveal:nth-child(2) { transition-delay: .1s; }
    .steps .step.reveal:nth-child(3) { transition-delay: .2s; }

    .feature-grid .feature-card.reveal:nth-child(2) { transition-delay: .08s; }
    .feature-grid .feature-card.reveal:nth-child(3) { transition-delay: .16s; }
    .feature-grid .feature-card.reveal:nth-child(4) { transition-delay: .24s; }
    .feature-grid .feature-card.reveal:nth-child(5) { transition-delay: .32s; }
    .feature-grid .feature-card.reveal:nth-child(6) { transition-delay: .40s; }

    .price-grid .price-card.reveal:nth-child(2) { transition-delay: .1s; }
    .price-grid .price-card.reveal:nth-child(3) { transition-delay: .2s; }

    .quote-grid .quote-card.reveal:nth-child(2) { transition-delay: .1s; }
    .quote-grid .quote-card.reveal:nth-child(3) { transition-delay: .2s; }

    .privacy-row .privacy-pill.reveal:nth-child(2) { transition-delay: .06s; }
    .privacy-row .privacy-pill.reveal:nth-child(3) { transition-delay: .12s; }
    .privacy-row .privacy-pill.reveal:nth-child(4) { transition-delay: .18s; }

    .collage .stack-block.reveal { transition-delay: 0s; }
    .collage .wrap > div:last-child.reveal { transition-delay: .1s; }
}

/* ---- animation: card hover lift ----
   These cards all carry `.reveal` in the markup, which already supplies the
   transform/box-shadow transition above — this rule only sets the :hover
   *values*, so it can't collide with (or accidentally replace) that one. */
@media (prefers-reduced-motion: no-preference) {
    .feature-card:hover,
    .price-card:hover,
    .quote-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px -24px rgba(24, 24, 23, 0.22);
    }
}