/* ==========================
   HOME: hero only
========================== */

.home-main {
    position: relative;
    width: 100%;
    padding: 18px clamp(28px, 4vw, 64px) 28px;
    overflow-x: clip;
}

.page-home { overflow-x: hidden; }

/* Opaque pearl ceramic with a broad satin highlight and cool edge shading. */
.page-home .home-main .surface-card {
    background:
        radial-gradient(ellipse at 20% 0%, rgba(255, 255, 255, .95), transparent 62%),
        linear-gradient(145deg, #f9fbfd 20%, #f2f6fa 65%, #e5eef5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: #e2ebf1;
    box-shadow:
        0 12px 24px rgba(24, 70, 105, .13),
        0 2px 4px rgba(24, 70, 105, .1),
        inset 0 2px 3px #fff,
        inset 0 -2px 4px rgba(133, 164, 187, .14);
}

.page-home .home-main .surface-card::before {
    background: linear-gradient(165deg,
        rgba(255, 255, 255, .45),
        rgba(255, 255, 255, 0) 50%);
}

.home-wrap {
    width: 100%;
    max-width: 1480px;
    margin: 0 auto;
}

.home-hero {
    display: grid;
    grid-template-columns: minmax(390px, .92fr) minmax(500px, 1.08fr);
    gap: clamp(40px, 4.5vw, 76px);
    align-items: center;
    min-height: 0;
    padding: clamp(24px, 2.5vw, 48px) 0 clamp(24px, 2vw, 36px);
}

.home-hero-kicker {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 850;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: rgba(31, 95, 154, .72);
}

.home-hero-copy {
    width: 100%;
    max-width: 37rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.home-hero-copy h1 {
    max-width: 12ch;
    margin: 0;
    font-family: "Mozilla Text", sans-serif;
    font-size: clamp(3rem, 4vw, 4.35rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: #152033;
}

.home-hero-text {
    max-width: 31rem;
    margin: 18px 0 0;
    font-size: clamp(1.08rem, 1.45vw, 1.35rem);
    line-height: 1.48;
    font-weight: 500;
    color: rgba(21, 32, 51, .7);
}

.home-hero-ctas {
    width: min(100%, 360px);
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.home-btn {
    --home-button-edge: rgba(50, 104, 137, .52);
    --home-button-rim: rgba(235, 249, 255, .9);
    --home-button-side: rgba(148, 197, 224, .9);
    --home-button-shadow: rgba(24, 70, 105, .16);
    position: relative;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    min-height: 62px;
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 20px;
    font-weight: 800;
    color: #152033;
    border: 1px solid rgba(255, 255, 255, .8);
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .62) 0%,
            rgba(255, 255, 255, .26) 45%,
            rgba(213, 238, 251, .22) 100%
        ),
        rgba(255, 255, 255, .12);
    box-shadow:
        0 1px 0 var(--home-button-rim),
        0 2px 0 var(--home-button-side),
        0 3px 0 var(--home-button-edge),
        0 5px 3px rgba(24, 70, 105, .09),
        0 8px 12px var(--home-button-shadow),
        inset 0 2px 2px rgba(255, 255, 255, .95),
        inset 2px 0 2px rgba(255, 255, 255, .4),
        inset -2px 0 2px rgba(50, 104, 137, .14),
        inset 0 -2px 2px rgba(50, 104, 137, .16);
    /* Only shadows interpolate. The integer-pixel press keeps text crisp. */
    transition: box-shadow .08s ease;
}

.home-btn:hover {
    box-shadow:
        0 1px 0 var(--home-button-rim),
        0 2px 0 var(--home-button-side),
        0 3px 0 var(--home-button-edge),
        0 5px 3px rgba(24, 70, 105, .09),
        0 10px 14px var(--home-button-shadow),
        inset 0 2px 2px #fff,
        inset 2px 0 2px rgba(255, 255, 255, .4),
        inset -2px 0 2px rgba(50, 104, 137, .14),
        inset 0 -2px 2px rgba(50, 104, 137, .16);
}

.home-btn:active,
.home-btn.is-pressed {
    top: 2px;
    box-shadow:
        0 1px 0 var(--home-button-rim),
        0 1px 0 var(--home-button-edge),
        0 3px 4px var(--home-button-shadow),
        inset 0 1px 0 rgba(255, 255, 255, .9),
        inset 0 -1px 1px rgba(24, 70, 105, .12);
}

.home-cta-arrow { flex: 0 0 18px; width: 18px; height: 18px; margin-left: 10px; }
.home-cta-copy { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.home-cta-label { display: inline-flex; align-items: center; }

.home-btn:focus-visible {
    outline: 3px solid rgba(39, 143, 199, .55);
    outline-offset: 3px;
}

.home-btn-primary {
    min-height: 66px;
    font-size: 21px;
    border-color: #e0eaf2;
    background: linear-gradient(165deg,
        #fff 12%, #f6f9fc 52%, #e2edf5);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow:
        0 3px 3px -1px rgba(72, 107, 132, .28),
        0 7px 16px rgba(24, 70, 105, .15),
        inset 0 2px 3px #fff,
        inset 0 -3px 5px rgba(133, 164, 187, .18);
}

.home-btn-primary:hover {
    box-shadow:
        0 3px 3px -1px rgba(72, 107, 132, .28),
        0 9px 20px rgba(24, 70, 105, .18),
        inset 0 2px 4px #fff,
        inset 0 -3px 5px rgba(133, 164, 187, .16);
}

.home-btn-primary:active,
.home-btn-primary.is-pressed {
    box-shadow:
        0 2px 6px rgba(24, 85, 117, .12),
        inset 0 1px 3px rgba(24, 85, 117, .1),
        inset 0 -1px 1px rgba(255, 255, 255, .65);
}

.home-btn-secondary {
    font-size: 20px;
    font-weight: 750;
    color: #181818;
}

.home-hero-proof {
    margin: 18px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: rgba(21, 32, 51, .52);
}

/* One shared site surface for the three supporting features. */
.home-features {
    --surface-radius: 28px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 auto;
    padding: clamp(16px, 2.5vw, 28px) 0;
}
.home-feature { min-width: 0; padding: 0 clamp(12px, 2.5vw, 32px); text-align: center; }
.home-feature + .home-feature { border-left: 1px solid rgba(21, 32, 51, .12); }
.home-feature h2 { margin: 0 0 7px; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.25; color: #152033; }
.home-feature p { margin: 0; font-size: 15px; line-height: 1.45; color: #435c70; }

.home-live {
    width: 100%;
    max-width: 820px;
    margin-left: auto;
    padding: 18px 12px 26px;
    text-align: center;
}

/* The public comparison preview is stationary at every breakpoint. */
.home-float-stage { position: relative; width: 100%; isolation: isolate; }
.home-float-stage .home-live-demo { position: relative; z-index: 2; }
.home-float-depth { height: 24px; pointer-events: none; }

.home-live-demo.surface-card {
    --surface-radius: 30px;
    width: 100%;
    padding: clamp(24px, 3vw, 38px);
}

.home-live-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    color: #435c70;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .11em;
    text-transform: uppercase;
}

.home-live-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.home-live-label > span {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #38bdf8;
    box-shadow: none;
    animation: home-live-dot-pulse 1.8s ease-in-out infinite;
}

.home-live-label > span::after {
    content: "";
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border: 1.5px solid rgba(56, 189, 248, .65);
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    animation: home-live-ring-pulse 1.8s ease-out infinite;
}

/* A 1.3s smooth pulse occupies 72.2222% of the cycle, then rests for 0.5s. */
@keyframes home-live-dot-pulse {
    0%, 72.2222%, 100% {
        transform: scale(1);
        box-shadow: none;
    }
    32.5% {
        transform: scale(1.27);
        box-shadow: 0 0 0 3px rgba(56, 189, 248, .08),
            0 0 10px rgba(56, 189, 248, .4);
    }
}

@keyframes home-live-ring-pulse {
    0% { transform: scale(.85); opacity: 0; }
    10.8333% { opacity: .65; }
    61.3889%, 72.2222%, 100% { transform: scale(2.5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .home-live-label > span,
    .home-live-label > span::after { animation: none; }
}

.home-live-question {
    margin: 0 0 clamp(18px, 2vw, 26px);
    font-family: "Space Grotesk", "Mozilla Text", sans-serif;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #263e54;
}

.home-faces {
    position: relative;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: clamp(10px, 1.4vw, 20px);
    align-items: center;
    isolation: isolate;
    overflow: visible;
}

.page-home.ad-layout-editing .ad-layout-layer { z-index: 40; }

.home-face-card {
    appearance: none;
    -webkit-appearance: none;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    border: 2px solid rgba(21, 32, 51, .14);
    border-radius: 14px;
    background: rgba(255, 255, 255, .35);
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.home-face-card:hover {
    border-color: rgba(31, 95, 154, .55);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(21, 32, 51, .1);
}

.home-float-stage .home-face-card:hover { transform: none; }
.home-face-card.selected { border-color: transparent; box-shadow: none; }

.home-face-card img {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    background: rgba(21, 32, 51, .08);
}

.home-vs {
    font-family: "Space Grotesk", "Mozilla Text", sans-serif;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: rgba(21, 32, 51, .55);
}

.home-live-hint {
    margin: 20px 0 0;
    font-size: 18px;
    font-weight: 600;
    color: #435c70;
}

.home-live-status {
    min-height: 1.2em;
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    color: #435c70;
}

.home-live-status.is-error { color: #8a1f1f; }
.home-live.is-blocked .home-faces { opacity: .45; pointer-events: none; }

@media (max-width: 1100px) {
    .home-main { padding-inline: 28px; }

    .home-hero {
        grid-template-columns: minmax(340px, .9fr) minmax(0, 1.1fr);
        gap: 30px;
        padding-top: 56px;
    }

    .home-hero-copy h1 { font-size: clamp(2.65rem, 5vw, 3.65rem); }
    .home-live-demo { padding: 24px; }
}

@media (max-width: 1100px) {
    .home-main { padding: 16px 20px 28px; }

    .home-hero {
        grid-template-columns: 1fr;
        gap: 30px;
        min-height: auto;
        padding: 40px 0 56px;
    }

    .home-hero-copy {
        max-width: 42rem;
        margin: 0 auto;
        text-align: center;
        align-items: center;
    }

    .home-hero-copy h1 { max-width: 12ch; }
    .home-hero-text { margin-left: auto; margin-right: auto; }
    .home-hero-ctas { align-items: center; }

    .home-live {
        margin: 0 auto;
        max-width: 660px;
        padding: 12px 10px 24px;
    }
}

@media (max-width: 700px) {
    .home-float-depth { height: 18px; }
    .home-live-demo { border-radius: 20px; }
    .home-faces { gap: 10px; }
}

@media (max-width: 480px) {
    .home-main { padding: 12px 16px 24px; }
    .home-hero-ctas { width: 100%; align-items: stretch; }

    .home-btn,
    .home-btn-primary,
    .home-btn-secondary {
        width: 100%;
        min-width: 0;
    }

    .home-faces { gap: 7px; }
    .home-live-demo { padding: 20px 14px 18px; }
    .home-live-meta { margin-bottom: 15px; font-size: 10px; }
    .home-live-question { font-size: 1.05rem; letter-spacing: .09em; }
    .home-vs { font-size: .85rem; }
    .home-live-hint { margin-top: 14px; font-size: 16px; }
}

/* Compact phone flow; keep the shared navbar, surface-card and button materials.
   Small viewport units keep toolbar movement from re-spacing the content.
   Short browser windows still scroll naturally, without stretching the photos. */
@media (max-width: 600px) {
    .page-home {
        --home-mobile-gap: clamp(12px, 1.8svh, 18px);
        --home-mobile-padding: clamp(9px, 2.5vw, 12px);
    }
    .page-home .home-main { padding: var(--home-mobile-gap) var(--mobile-page-gutter) max(18px, env(safe-area-inset-bottom, 0px)); overflow: visible; }
    .page-home .home-hero { gap: var(--home-mobile-gap); padding: 0 0 var(--home-mobile-gap); min-height: 0; }
    .page-home .home-hero-copy { max-width: 100%; }
    .page-home .home-hero-kicker { margin-bottom: clamp(7px, 1svh, 10px); font-size: clamp(9px, 2.5vw, 11px); letter-spacing: .13em; line-height: 1.3; }
    .page-home .home-hero-copy h1 { max-width: 16ch; font-size: clamp(34px, 9.5vw, 44px); line-height: 1.04; }
    .page-home .home-hero-text { margin-top: clamp(8px, 1.2svh, 12px); font-size: clamp(16px, 4vw, 18px); line-height: 1.3; }
    .page-home .home-hero-ctas { width: 100%; gap: clamp(8px, 1.2svh, 12px); margin-top: var(--home-mobile-gap); align-items: center; }
    .page-home .home-btn { -webkit-tap-highlight-color: transparent; }
    .page-home .home-btn-primary { width: 90%; min-height: clamp(56px, 7svh, 64px); padding: 12px 20px; font-size: clamp(20px, 5.4vw, 23px); }
    .page-home .home-btn-secondary { --home-button-edge: rgba(50, 104, 137, .42); --home-button-rim: rgba(255, 255, 255, .7); --home-button-side: rgba(159, 202, 225, .8); --home-button-shadow: rgba(24, 70, 105, .10); width: min(100%, 240px); min-height: 44px; padding: 10px 20px; font-size: 16px; border-color: rgba(255, 255, 255, .65); }
    .page-home .home-hero-proof { margin-top: clamp(9px, 1.3svh, 13px); font-size: clamp(13px, 3.5vw, 16px); line-height: 1.3; }
    .page-home .home-live { max-width: 100%; padding: 0; }
    .page-home .home-live-demo { --surface-radius: clamp(22px, 6vw, 30px); padding: var(--home-mobile-padding); border-radius: var(--surface-radius); }
    .page-home .home-live-meta { margin-bottom: clamp(7px, 1svh, 10px); font-size: 10px; line-height: 1.3; }
    .page-home .home-live-question { margin-bottom: clamp(9px, 1.3svh, 13px); font-size: clamp(13px, 3.6vw, 17px); line-height: 1.25; letter-spacing: .08em; }
    .page-home .home-faces { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(10px, 3vw, 14px); }
    /* The frame reserves space independently of the image's load/error state. */
    .page-home .home-face-card { position: relative; min-width: 0; aspect-ratio: 3 / 4; }
    .page-home .home-face-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
    .page-home .home-live-hint { margin-top: clamp(9px, 1.3svh, 13px); font-size: clamp(13px, 3.5vw, 16px); line-height: 1.3; }
    .page-home .home-live-status { min-height: 0; overflow-wrap: anywhere; }
    .page-home .home-live-status:empty { display: none; }
    .page-home .home-float-depth { height: 0; }
    .page-home .home-features { --surface-radius: clamp(22px, 6vw, 30px); padding: clamp(14px, 2svh, 18px) 0; }
    /* Share heading and description rows so wrapped titles stay centered and
       every description starts at the same height. */
    .page-home .home-feature { display: grid; grid-row: 1 / span 2; grid-template-rows: subgrid; padding-inline: clamp(7px, 2vw, 11px); }
    .page-home .home-feature h2 { align-self: center; min-width: 0; margin-bottom: 5px; font-size: clamp(13px, 3.5vw, 16px); line-height: 1.25; overflow-wrap: anywhere; }
    .page-home .home-feature p { font-size: clamp(12px, 3.1vw, 14px); line-height: 1.4; overflow-wrap: break-word; }
}

/* Keep the portrait geometry stable while the shared navbar controls the
   available page height. */
@media (min-width: 801px) {
    .home-face-card { position: relative; min-width: 0; aspect-ratio: 3 / 4; }
    .home-face-card img { position: absolute; inset: 0; width: 100%; height: 100%; }
}

/* Reuse the stacked tablet composition before either desktop column gets
   squeezed. The existing clean phone/tablet background rules remain intact. */
@media (min-width: 801px) and (max-width: 1100px) {
    .page-home .home-background { display: none; }
}

/* Fluid within the laptop/desktop range, with a fixed upper composition bound.
   Short windows keep these same dimensions and simply scroll vertically. */
@media (min-width: 1101px) {
    .home-main {
        display: flex;
        align-items: center;
        min-height: var(--page-available-height);
        padding: clamp(14px, .95vw, 24px) 0;
    }

    .home-wrap {
        --home-column-gap: clamp(36px, 5.8vw, 104px);
        container-type: inline-size;
        width: min(92%, 86.2vw);
        max-width: 1540px;
        min-width: 0;
    }

    .home-hero {
        grid-template-columns: minmax(360px, .42fr) minmax(460px, .58fr);
        column-gap: var(--home-column-gap);
        padding: 0 0 clamp(32px, 3.1cqw, 52px);
    }

    .home-hero-copy { max-width: none; min-width: 360px; }
    .home-hero-kicker { margin-bottom: clamp(12px, 1.125vw, 20px); font-size: clamp(11px, .8vw, 13px); }
    .home-hero-copy h1 {
        max-width: none;
        font-size: clamp(44px, 4.1vw, 76px);
        line-height: 1.06;
    }
    .home-hero-text {
        max-width: none;
        margin-top: clamp(1em, calc(18px + .8cqw), 2em);
        font-size: clamp(18px, 1.5vw, 24px);
        line-height: 1.35;
    }
    .home-hero-ctas {
        width: min(100%, clamp(330px, 24vw, 440px));
        margin-top: clamp(1.6rem, calc(24px + 1.2cqw), 3rem);
        gap: clamp(.75rem, calc(8px + .75cqw), 1.75rem);
    }
    .home-btn, .home-btn-primary, .home-btn-secondary {
        min-height: clamp(56px, 4.4vw, 78px);
        padding: clamp(13px, 1.125vw, 20px) 24px;
        font-size: clamp(19px, 1.4vw, 25px);
    }
    .home-hero-proof {
        margin-top: clamp(1.05em, calc(13.5px + .9cqw), 1.75em);
        font-size: clamp(16px, 1.2vw, 21px);
        line-height: 1.35;
    }

    .home-live { max-width: none; min-width: 460px; padding: 0; }
    .home-float-depth { display: none; }
    .home-live-demo.surface-card { padding: clamp(22px, 2vw, 36px); }
    .home-live-meta { margin-bottom: clamp(14px, 1.125vw, 20px); font-size: clamp(11px, .75vw, 13px); }
    .home-live-question {
        margin-bottom: clamp(18px, 1.625vw, 28px);
        font-size: clamp(18px, 1.5vw, 27px);
        line-height: 1.2;
        letter-spacing: .06em;
    }
    .home-faces { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: clamp(12px, 1.3vw, 24px); }
    .home-vs { font-size: clamp(15px, 1vw, 19px); }
    .home-live-hint { margin-top: clamp(16px, 1.375vw, 24px); font-size: clamp(16px, 1.2vw, 21px); line-height: 1.3; }
    .home-live-status { min-height: 0; overflow-wrap: anywhere; }
    .home-live-status:empty { display: none; }

    .home-features {
        width: min(100%, calc(100% - var(--home-column-gap) + clamp(1.75rem, 3.6vw, 4rem)));
        max-width: 1500px;
        padding: clamp(14px, 1.5vw, 28px) 0;
    }
    .home-feature { padding-inline: clamp(18px, 2vw, 36px); text-align: left; }
    .home-feature h2 { font-size: clamp(17px, 1.2vw, 21px); }
    .home-feature p { font-size: clamp(14px, 1vw, 17px); line-height: 1.35; }
}