/* Use the shared product-page shell; keep hero styles local. */
.layout-composer-page {
    --immersive-studio-accent: #0071e3;
    --immersive-studio-accent-soft: #0084ed;
    --immersive-studio-accent-deep: #0066cc;
    --immersive-studio-ink: var(--ink);
}

.layout-hero {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 100vh;
    min-height: 100svh;
    isolation: isolate;
    color: #fff;
    background: #171716;
}

.layout-hero-image {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.layout-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, transparent 42%, rgb(0 0 0 / 12%) 60%, rgb(0 0 0 / 82%) 100%);
}

.layout-hero-content {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
    padding: 72px clamp(24px, 6vw, 120px) max(56px, env(safe-area-inset-bottom));
}

.layout-hero h1 {
    margin: 0;
    font-size: clamp(44px, 5.2vw, 88px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.045em;
}

.layout-hero-copy p {
    margin: 18px 0 0;
    font-size: clamp(21px, 2vw, 32px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.layout-hero-cta {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 14px 28px;
    border-radius: 999px;
    background: #fff;
    color: #171716;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
}

.layout-hero-cta:hover { background: #e9e9e9; }
.layout-hero-cta:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }

@media (max-width: 700px) {
    .layout-hero-image { object-position: 72% center; }
    .layout-hero-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        padding-bottom: max(32px, env(safe-area-inset-bottom));
    }
    .layout-hero-copy p { max-width: 290px; }
}