/* Isolated layouts for the two local homepage experiments. */

:root[data-theme="premium"] .homepage-vertical .hero {
    min-height: calc(100svh - 56px);
    padding: 118px 0 96px;
}

:root[data-theme="premium"] .homepage-vertical .hero-container {
    width: min(calc(100% - 40px), 1380px);
}

:root[data-theme="premium"] .homepage-vertical .v2-container {
    width: min(calc(100% - 40px), 1380px);
}

:root[data-theme="premium"] .homepage-vertical .hero-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, 0.92fr);
    gap: clamp(42px, 6vw, 86px);
    align-items: center;
}

:root[data-theme="premium"] .homepage-vertical .hero__content {
    max-width: 650px;
    margin-inline: 0;
    text-align: left;
}

:root[data-theme="premium"] .homepage-vertical .hero__title,
:root[data-theme="premium"] .homepage-vertical .hero__subtitle {
    margin-inline: 0;
}

:root[data-theme="premium"] .homepage-vertical .hero__title {
    max-width: 650px;
    font-size: clamp(3.8rem, 5.15vw, 5.35rem);
}

:root[data-theme="premium"] .homepage-vertical .premium-header,
:root[data-theme="premium"] .homepage-vertical .tag-chips,
:root[data-theme="premium"] .homepage-vertical .success-message {
    justify-content: flex-start;
}

:root[data-theme="premium"] .homepage-vertical .premium-header .tag-chips {
    margin-bottom: 0;
    flex-wrap: nowrap;
}

:root[data-theme="premium"] .homepage-vertical .effortless-title em,
:root[data-theme="premium"] .homepage-vertical .section-heading h2 em {
    font-size: 1.12em;
    letter-spacing: 0.005em;
}

:root[data-theme="premium"] .homepage-vertical #how-it-works .section-heading {
    max-width: 920px;
}

:root[data-theme="premium"] .homepage-vertical #how-title {
    white-space: nowrap;
    font-size: clamp(1.45rem, 5.2vw, 4.2rem);
}

:root[data-theme="premium"] .homepage-vertical .form-wrapper {
    max-width: 650px;
    margin-inline: 0;
    text-align: left;
}

:root[data-theme="premium"] .homepage-vertical .waitlist-form {
    width: min(100%, 620px);
    margin-inline: 0;
}

:root[data-theme="premium"] .homepage-vertical .form-group { justify-content: flex-start; }
:root[data-theme="premium"] .homepage-vertical .social-proof-text { text-align: left; }

:root[data-theme="premium"] .homepage-vertical .safety-promise__icon { font-size: 12.5px; }
:root[data-theme="premium"] .homepage-vertical .safety-promise strong { font-size: 17.5px; }
:root[data-theme="premium"] .homepage-vertical .safety-promise div span { font-size: 15px; }

.hero-comparison-shell {
    width: min(100%, 1320px);
    margin: 0 auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    position: relative;
}

:root[data-theme="premium"] .hero-comparison-shell { display: block; }

.action-section {
    min-height: 100svh;
    padding: clamp(42px, 5svh, 56px) 0 32px;
    position: relative;
    overflow: hidden;
}

.action-container {
    width: min(calc(100% - 48px), 1050px);
}

.action-container .hero-comparison-shell {
    width: 90%;
    max-width: none;
    margin-inline: 0 auto;
}

.action-section .action-heading {
    max-width: 920px;
}

.action-section .action-heading h2 {
    font-size: clamp(1.45rem, 5.2vw, 4.2rem);
    line-height: 0.98;
}

.showcase-selector {
    width: min(100%, 260px);
    min-height: 18px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 18px auto 0;
}

.showcase-selector__tab {
    min-width: 0;
    min-height: 18px;
    padding: 0;
    position: relative;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.showcase-selector__tab::before,
.showcase-selector__tab::after {
    content: "";
    height: 4px;
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    border-radius: 999px;
    translate: 0 -50%;
}

.showcase-selector__tab::before {
    background: #d7d9dc;
    transition: background-color 180ms ease;
}

.showcase-selector__tab::after {
    background: var(--pop);
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
}

.showcase-selector__tab[aria-selected="true"]::before { background: #92d6b5; }
.showcase-selector__tab[aria-selected="true"]::after { opacity: 1; }
.showcase-selector__tab[aria-selected="true"].is-counting::after {
    animation: showcaseCountdown 5s linear forwards;
}

.showcase-selector__tab:focus-visible {
    outline: 3px solid rgba(0,168,98,0.3);
    outline-offset: 3px;
    border-radius: 999px;
}

[data-showcase-carousel].is-carousel-paused .showcase-selector__tab.is-counting::after,
[data-showcase-carousel].is-carousel-focused .showcase-selector__tab.is-counting::after,
[data-showcase-carousel].is-carousel-offscreen .showcase-selector__tab.is-counting::after,
[data-showcase-carousel].is-page-hidden .showcase-selector__tab.is-counting::after {
    animation-play-state: paused;
}

@keyframes showcaseCountdown {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.showcase-carousel__track {
    display: grid;
    position: relative;
}

.showcase-carousel__slide {
    min-width: 0;
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(42px) scale(0.985);
    transition: opacity 260ms ease,
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0s linear 520ms;
}

.showcase-carousel__slide.is-active {
    z-index: 2;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition-delay: 80ms, 0s, 0s;
}

[data-showcase-carousel][data-direction="backward"] .showcase-carousel__slide:not(.is-active) {
    transform: translateX(-42px) scale(0.985);
}

.hero-comparison-shell::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -80px 8% auto;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(0,168,98,0.17), rgba(0,168,98,0) 68%);
    filter: blur(14px);
}

.hero-comparison--wide .hero-comparison__stage {
    aspect-ratio: 1.78 / 1;
    border-radius: 20px;
    border: 1px solid var(--line);
    box-shadow: 0 36px 100px rgba(26,26,31,0.13);
}

.hero-comparison[data-slider-comparison] {
    --comparison-split: 0%;
}

.hero-comparison[data-slider-comparison] .hero-comparison__stage {
    cursor: ew-resize;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

.hero-comparison[data-slider-comparison] .hero-comparison__image {
    pointer-events: none;
}

.hero-comparison[data-slider-comparison] .hero-comparison__image--ecodreams-after {
    object-position: center 20%;
}

.hero-comparison[data-slider-comparison] .hero-comparison__image--after,
.hero-comparison[data-slider-comparison][data-state="after"] .hero-comparison__image--after {
    clip-path: inset(0 calc(100% - var(--comparison-split)) 0 0);
    transition: clip-path 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-comparison[data-slider-comparison].is-dragging .hero-comparison__image--after {
    transition: none;
}

.hero-comparison[data-slider-comparison] .hero-comparison__laser {
    left: clamp(12px, var(--comparison-split), calc(100% - 12px));
    width: 3px;
    opacity: 1;
    translate: -50% 0;
    pointer-events: auto;
    cursor: ew-resize;
    transition: left 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-comparison[data-slider-comparison].is-dragging .hero-comparison__laser {
    transition: none;
}

.hero-comparison[data-slider-comparison] .hero-comparison__laser::before {
    right: -42px;
    width: 84px;
    background: radial-gradient(ellipse at center, rgba(66,235,160,0.22), transparent 68%);
}

.hero-comparison[data-slider-comparison] .hero-comparison__laser::after {
    content: "↔";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    translate: -50% -50%;
    border: 1px solid rgba(0,168,98,0.36);
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    color: var(--pop-ink);
    box-shadow: 0 8px 24px rgba(0,0,0,0.16), 0 0 20px rgba(0,168,98,0.22);
    font: 600 13px/1 "Space Grotesk", system-ui, sans-serif;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.hero-comparison[data-slider-comparison] .hero-comparison__laser:focus-visible {
    outline: 3px solid rgba(0,168,98,0.34);
    outline-offset: 5px;
}

.action-heading {
    margin-bottom: 22px;
    text-align: left;
}

.action-heading h2 {
    margin: 0;
    color: var(--ink);
    font-size: clamp(2.6rem, 4.5vw, 4.8rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.comparison-toolbar {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 0 2px 12px;
}

.comparison-toolbar .hero-comparison__controls {
    position: static;
    translate: none;
    flex: 0 0 auto;
}

.template-library {
    min-height: 100svh;
    padding: 110px 0 120px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 45%, rgba(0,168,98,0.15), transparent 38%),
        var(--ink);
    color: #fff;
}

.template-library__header {
    margin-bottom: 48px;
}

.template-library .section-kicker { color: #6ad6a8; }

.template-library h2 {
    max-width: 760px;
    margin: 14px 0 0;
    font-size: clamp(4.2rem, 7vw, 7.4rem);
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.065em;
}

.template-library h2 em {
    font-family: "Instrument Serif", Georgia, serif;
    font-size: 1.12em;
    font-weight: 400;
    letter-spacing: 0.005em;
    color: #6ad6a8;
}

.library-example {
    padding: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 30px;
    background: rgba(255,255,255,0.055);
    box-shadow: 0 44px 120px rgba(0,0,0,0.42);
}

.library-example__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 4px 2px 16px;
    color: rgba(255,255,255,0.54);
    font: 500 10px/1.3 "JetBrains Mono", ui-monospace, monospace;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.library-example__meta strong {
    color: #fff;
    font: 500 15px/1 "Space Grotesk", system-ui, sans-serif;
    letter-spacing: -0.02em;
    text-transform: none;
}

.library-example .hero-comparison__stage {
    aspect-ratio: 1.765 / 1;
    border-radius: 19px;
}

@media (max-width: 980px) {
    :root[data-theme="premium"] .homepage-vertical .hero-layout { grid-template-columns: 1fr; }
    :root[data-theme="premium"] .homepage-vertical .hero__title { font-size: clamp(3.4rem, 10vw, 6rem); }
    .template-library__header { grid-template-columns: 1fr; }
    .template-library h2 { font-size: clamp(4rem, 13vw, 7rem); }
}

@media (max-width: 680px) {
    :root[data-theme="premium"] .homepage-vertical .hero { padding: 112px 0 82px; }
    :root[data-theme="premium"] .homepage-vertical .hero-container { width: min(100% - 20px, 1380px); }
    :root[data-theme="premium"] .homepage-vertical .v2-container { width: min(100% - 20px, 1380px); }
    :root[data-theme="premium"] .homepage-vertical .hero__title { font-size: clamp(2.9rem, 14vw, 4.5rem); }
    :root[data-theme="premium"] .homepage-vertical .premium-header .tag-chips { flex-wrap: wrap; }
    .action-section { min-height: auto; padding: 72px 0 64px; }
    .action-container { width: min(100% - 24px, 1050px); }
    .showcase-selector { width: min(76%, 250px); margin-top: 14px; }
    .action-section .hero-comparison--wide .hero-comparison__stage { height: auto; aspect-ratio: 1.78 / 1; border-radius: 15px; }
    .template-library { padding: 86px 0 92px; }
    .template-library h2 { font-size: clamp(3.4rem, 18vw, 5.4rem); }
    .template-library__header { margin-bottom: 38px; }
    .library-example { padding: 7px; border-radius: 22px; }
    .library-example__meta { align-items: flex-start; flex-direction: column; padding: 8px 2px 14px; }
    .comparison-toolbar { align-items: flex-start; flex-direction: column; }
    .library-example .hero-comparison__stage { border-radius: 15px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-comparison-shell::before { filter: none; }
    .showcase-carousel__slide { transition: none; }
    .showcase-selector__tab[aria-selected="true"]::after {
        animation: none;
        transform: scaleX(1);
    }
    .hero-comparison[data-slider-comparison] .hero-comparison__image--after,
    .hero-comparison[data-slider-comparison] .hero-comparison__laser { transition: none; }
    .hero-comparison[data-slider-comparison] .hero-comparison__laser { display: block; }
}