/* TESTING preview — scrollable marketing home + pricing (does not alter live gate) */

body.home-preview{
    height:auto;
    min-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    background:
        radial-gradient(120% 80% at 50% -10%, rgba(253,251,247,0.96) 0%, rgba(247,247,248,0.55) 42%, transparent 70%),
        var(--home-bg);
}

body.home-preview.home-gate--login-open{
    overflow:hidden;
}

.home-preview__banner{
    position:relative;
    z-index:20;
    display:flex;
    flex-wrap:wrap;
    gap:0.35rem 0.65rem;
    align-items:center;
    justify-content:center;
    padding:0.45rem 1rem;
    background:#1e2128;
    color:#f4f1ea;
    font-size:0.72rem;
    font-weight:500;
    letter-spacing:0.04em;
}
.home-preview__banner a{
    color:#9fd9c6;
    text-decoration:underline;
    text-underline-offset:2px;
}
.home-preview__banner strong{
    color:#fff;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

body.home-preview .home-gate__map-stage{
    position:absolute;
    inset:0 0 auto 0;
    height:100dvh;
    max-height:100dvh;
    z-index:0;
}

body.home-preview .home-gate__lang{
    top:2.35rem;
}
body.home-preview.home-preview--live .home-gate__lang{
    top:max(0.75rem, env(safe-area-inset-top, 0px));
}

/* Live: full-bleed map from top; logo + auth centered in the middle */
body.home-preview.home-preview--live .home-gate__map-stage{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    max-height:none;
}
body.home-preview.home-preview--live .home-gate__map-blur{
    transform:scale(1.08);
}
body.home-preview.home-preview--live .home-gate__map-blur .leaflet-tile-pane,
body.home-preview.home-preview--live .home-gate__map-blur .maplibregl-map,
body.home-preview.home-preview--live .home-gate__map-blur .maplibregl-canvas{
    filter:grayscale(0.12) saturate(0.88) contrast(0.98) brightness(1.02) blur(1px);
}
body.home-preview.home-preview--live .home-gate__map-stage::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:42%;
    z-index:5;
    pointer-events:none;
    background:linear-gradient(
        180deg,
        rgba(248,246,242,0) 0%,
        rgba(248,246,242,0.28) 32%,
        rgba(248,246,242,0.7) 68%,
        #f8f6f2 100%
    );
}
body.home-preview.home-preview--live .home-gate__map-blur,
body.home-preview.home-preview--live .home-gate__map-pins{
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0.45) 72%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,0.45) 72%,transparent 100%);
}
body.home-preview.home-preview--live .home-gate__map-fade{
    background:
        radial-gradient(
            62% 48% at 50% 46%,
            rgba(248,246,242,0.88) 0%,
            rgba(248,246,242,0.52) 42%,
            rgba(248,246,242,0.12) 68%,
            transparent 100%
        );
}
body.home-preview.home-preview--live .home-preview__hero{
    min-height:100dvh;
    justify-content:center;
    padding-top:clamp(1.25rem, 4vh, 2.5rem);
    padding-bottom:clamp(1.25rem, 4vh, 2.5rem);
    background:transparent;
}
body.home-preview.home-preview--live .home-preview__see-plans{
    margin-top:1.35rem;
    margin-bottom:0;
    padding-top:0;
}
body.home-preview.home-preview--live .home-preview__main,
body.home-preview.home-preview--live .home-preview__footer{
    background:#f8f6f2;
}

.home-preview__hero{
    position:relative;
    z-index:2;
    flex:0 0 auto;
    min-height:calc(100dvh - 2.1rem);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding-top:clamp(2.5rem, 8vh, 4rem);
    padding-bottom:clamp(2rem, 6vh, 3.5rem);
    background:linear-gradient(
        180deg,
        rgba(247,247,248,0.55) 0%,
        rgba(247,247,248,0.28) 40%,
        rgba(247,247,248,0.08) 70%,
        transparent 100%
    );
}

.home-preview__see-plans{
    margin-top:1.35rem;
    font-size:0.78rem;
    font-weight:600;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--home-accent);
    text-decoration:none;
    position:relative;
}
.home-preview__see-plans::after{
    content:'';
    display:inline-block;
    margin-left:0.35rem;
    width:0.45rem;
    height:0.45rem;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform:translateY(-0.15rem) rotate(45deg);
    transition:transform 0.18s ease;
}
.home-preview__see-plans:hover::after{
    transform:translateY(0.05rem) rotate(45deg);
}

.home-preview__main{
    position:relative;
    z-index:2;
}

.home-pricing{
    position:relative;
    padding:clamp(2.5rem, 7vw, 4.5rem) clamp(1.1rem, 4vw, 2rem) clamp(3rem, 8vw, 5rem);
    background:
        linear-gradient(180deg, rgba(248,246,242,0.55) 0%, #f8f6f2 12%, #f8f6f2 100%);
}

.home-pricing__inner{
    width:min(52rem, 100%);
    margin:0 auto;
}

.home-pricing__title{
    margin:0 0 0.55rem;
    text-align:center;
    font-family:'Gabarito',system-ui,sans-serif;
    font-size:clamp(1.45rem, 3.4vw, 1.9rem);
    font-weight:800;
    letter-spacing:-0.02em;
    color:var(--home-ink);
}

.home-pricing__lead{
    margin:0 auto 1.6rem;
    max-width:28rem;
    text-align:center;
    font-size:0.95rem;
    line-height:1.45;
    color:var(--home-muted);
}

.home-pricing__toggle{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.35rem;
    margin:0 auto 1.75rem;
    width:fit-content;
    max-width:100%;
    padding:0.28rem;
    border-radius:12px;
    background:#f0ebe3;
    box-shadow:0 1px 2px rgba(30,33,40,0.06);
}

.home-pricing__toggle-btn{
    appearance:none;
    border:none;
    background:transparent;
    color:var(--home-muted);
    font-family:'Gabarito',system-ui,sans-serif;
    font-size:0.82rem;
    font-weight:600;
    letter-spacing:0.03em;
    padding:0.55rem 0.95rem;
    border-radius:10px;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    transition:background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.home-pricing__toggle-btn.is-active{
    background:#fdfbf7;
    color:var(--home-ink);
    box-shadow:0 2px 6px rgba(30,33,40,0.1);
}
.home-pricing__save{
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.04em;
    text-transform:uppercase;
    color:var(--home-accent);
    background:rgba(2,110,86,0.1);
    padding:0.18rem 0.4rem;
    border-radius:6px;
}

.home-pricing__plans{
    display:grid;
    grid-template-columns:1fr;
    gap:1rem;
}

@media (min-width:720px){
    .home-pricing__plans{
        grid-template-columns:1fr 1fr;
        gap:1.15rem;
        align-items:stretch;
    }
    .home-pricing__plans--three{
        grid-template-columns:1fr 1fr;
    }
}

@media (min-width:960px){
    .home-pricing__plans--three{
        grid-template-columns:1fr 1fr 1fr;
    }
}

.home-pricing__plan{
    display:flex;
    flex-direction:column;
    padding:1.35rem 1.25rem 1.25rem;
    border-radius:16px;
    background:#fdfbf7;
    box-shadow:0 8px 22px rgba(30,33,40,0.08);
}

.home-pricing__plan--premium{
    background:linear-gradient(180deg,#fdfbf7 0%,#edf5f1 100%);
    box-shadow:
        0 0 0 2px rgba(2,110,86,0.35),
        0 12px 28px rgba(2,110,86,0.12);
}

.home-pricing__plan--lifetime{
    background:linear-gradient(180deg,#fdfbf7 0%,#f4efe6 100%);
    box-shadow:
        0 0 0 1px rgba(30,33,40,0.08),
        0 10px 24px rgba(30,33,40,0.1);
}

.home-pricing__badge--lifetime{
    background:rgba(30,33,40,0.08);
    color:#3a4254;
}

.home-pricing__cta--lifetime{
    background:var(--home-btn-dark);
    box-shadow:0 8px 20px rgba(30,33,40,0.22);
}
.home-pricing__cta--lifetime:hover{
    background:#14171d;
}

.home-pricing__plan-head{
    margin-bottom:1.1rem;
}

.home-pricing__badge{
    display:inline-flex;
    align-items:center;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.1em;
    text-transform:uppercase;
    padding:0.28rem 0.55rem;
    border-radius:999px;
    margin-bottom:0.55rem;
}
.home-pricing__badge--free{
    background:#ece8e1;
    color:#5a6478;
}
.home-pricing__badge--premium{
    background:rgba(2,110,86,0.12);
    color:var(--home-accent);
}

.home-pricing__plan-name{
    margin:0 0 0.35rem;
    font-size:1.2rem;
    font-weight:750;
    color:var(--home-ink);
}

.home-pricing__price{
    margin:0;
    display:flex;
    align-items:baseline;
    gap:0.25rem;
    flex-wrap:wrap;
}
.home-pricing__amount{
    font-size:2rem;
    font-weight:800;
    letter-spacing:-0.03em;
    color:var(--home-ink);
}
.home-pricing__period{
    font-size:0.9rem;
    font-weight:600;
    color:var(--home-muted);
}
.home-pricing__price-note{
    margin:0.25rem 0 0;
    min-height:1.1em;
    font-size:0.78rem;
    color:var(--home-muted);
}
.home-pricing__price-note:empty{
    display:none;
}

.home-pricing__features{
    list-style:none;
    margin:0 0 1.25rem;
    padding:0;
    flex:1;
}
.home-pricing__features li{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:0.75rem;
    padding:0.55rem 0;
    border-top:1px solid rgba(30,33,40,0.06);
    font-size:0.88rem;
}
.home-pricing__features li:last-child{
    border-bottom:1px solid rgba(30,33,40,0.06);
}
.home-pricing__feat-label{
    color:var(--home-muted);
    text-align:left;
}
.home-pricing__feat-value{
    font-weight:650;
    color:var(--home-ink);
    text-align:right;
    white-space:nowrap;
}
.home-pricing__feat-value--premium{
    color:var(--home-accent);
}
.home-pricing__yes{
    color:var(--home-accent);
    font-weight:800;
}
.home-pricing__no{
    color:#9aa3b5;
    font-weight:600;
}

.home-pricing__cta{
    width:100%;
    min-width:0;
}

.home-pricing__footnote{
    margin:0.75rem 0 0;
    text-align:center;
    font-size:0.72rem;
    line-height:1.4;
    color:var(--home-muted);
}

.home-preview__footer{
    position:relative;
    z-index:2;
    padding:1.25rem 1rem 2rem;
    text-align:center;
    background:#f8f6f2;
    color:var(--home-muted);
    font-size:0.75rem;
}
.home-preview__footer p{
    margin:0;
}

@media (prefers-reduced-motion:reduce){
    .home-preview__see-plans::after{transition:none}
}

/* In-app premium plans modal */
.home-pricing--modal{
    --home-bg:#f7f7f8;
    --home-ink:#1f2430;
    --home-muted:#667086;
    --home-accent:#026e56;
    padding:0;
    background:transparent;
}
.home-pricing--modal .home-pricing__inner{width:100%}
.home-pricing--modal .home-pricing__lead{margin-bottom:1.1rem}
.home-pricing__current-plan{
    margin:auto 0 0;
    padding:0.72rem 1rem;
    text-align:center;
    font-size:0.82rem;
    font-weight:600;
    color:var(--home-muted);
}
.home-pricing--modal .home-gate__btn,
.home-pricing--modal .home-pricing__cta{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    min-width:0;
    padding:0.72rem 1.15rem;
    border:none;
    border-radius:10px;
    font-family:'Gabarito',system-ui,sans-serif;
    font-size:0.88rem;
    font-weight:600;
    letter-spacing:0.03em;
    cursor:pointer;
    text-decoration:none;
    -webkit-tap-highlight-color:transparent;
}
.home-pricing--modal .home-gate__btn--primary,
.home-pricing--modal .home-pricing__cta.home-gate__btn--primary{
    background:var(--home-accent);
    color:#fff;
    box-shadow:0 8px 20px rgba(2,110,86,0.28);
}
.home-pricing--modal .home-gate__btn--primary:hover{
    background:#015a47;
}

.overlay--premium-plans{
    position:fixed;
    inset:0;
    z-index:10070;
    background:rgba(22,26,34,0.45);
    opacity:0;
    visibility:hidden;
    transition:opacity 0.2s ease,visibility 0.2s ease;
}
.overlay--premium-plans.open{
    opacity:1;
    visibility:visible;
}
.overlay--premium-plans[hidden]{display:none!important}
.overlay--premium-plans.open[hidden]{display:block!important}

.modal.modal--premium-plans,
.modal.modal--premium-plans.open{
    display:flex!important;
    flex-direction:column;
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(0.98);
    z-index:10071;
    width:min(44rem,calc(100vw - 1.5rem));
    max-width:44rem;
    height:auto;
    max-height:min(92dvh,52rem);
    margin:0;
    padding:0;
    border-radius:18px;
    background:linear-gradient(180deg,#fdfbf7,#f7f2ea);
    box-shadow:0 22px 60px rgba(30,33,40,0.28);
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    transition:opacity 0.2s ease,visibility 0.2s ease,transform 0.2s ease;
}
.modal.modal--premium-plans.open{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,-50%) scale(1);
}
.modal.modal--premium-plans[hidden]{display:none!important}
.modal.modal--premium-plans.open[hidden]{display:flex!important}
.modal--premium-plans .modal__head--premium-plans{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.75rem;
    padding:1rem 1.1rem 0.65rem;
    flex:0 0 auto;
    border-bottom:none;
}
.modal__head--premium-plans h2{
    margin:0;
    font-family:'Gabarito',system-ui,sans-serif;
    font-size:1.15rem;
    font-weight:800;
    color:var(--home-ink,#1f2430);
}
.modal__head--premium-plans .modal__close{
    width:34px;
    height:34px;
    border:none;
    border-radius:9px;
    background:#f6f2ec;
    color:#526070;
    font-size:1.25rem;
    line-height:1;
    cursor:pointer;
}
.modal.modal--premium-plans .modal__body--premium-plans{
    flex:1 1 auto;
    min-height:0;
    overflow-x:hidden;
    overflow-y:auto;
    padding:0 1rem 1.15rem;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
    touch-action:pan-y;
}
#premium-plans-msg{min-height:1.1em;margin-top:0.35rem}
body.premium-plans-open{overflow:hidden}

@media (max-width:719px){
    .overlay--premium-plans{
        z-index:10070;
    }
    .modal.modal--premium-plans,
    .modal.modal--premium-plans.open{
        left:0;
        right:0;
        top:auto;
        bottom:0;
        width:100%;
        max-width:none;
        height:min(92dvh, 100%);
        max-height:92dvh;
        border-radius:16px 16px 0 0;
        transform:none;
        padding-bottom:env(safe-area-inset-bottom,0px);
    }
    .modal.modal--premium-plans.open{
        transform:none;
    }
    .modal--premium-plans .modal__head--premium-plans{
        padding:0.55rem 0.8rem 0.3rem;
    }
    .modal__head--premium-plans h2{
        font-size:0.95rem;
        line-height:1.2;
    }
    .modal__head--premium-plans .modal__close{
        width:28px;
        height:28px;
        font-size:1.05rem;
    }
    .modal.modal--premium-plans .modal__body--premium-plans{
        padding:0 0.7rem 0.7rem;
    }
    .home-pricing--modal .home-pricing__lead{
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
        margin:0 0 0.45rem;
        font-size:0.74rem;
        line-height:1.25;
    }
    .home-pricing--modal .home-pricing__toggle{
        margin:0 auto 0.55rem;
        padding:0.16rem;
        gap:0.15rem;
        width:100%;
        max-width:100%;
        justify-content:stretch;
    }
    .home-pricing--modal .home-pricing__toggle-btn{
        flex:1 1 0;
        justify-content:center;
        padding:0.32rem 0.28rem;
        font-size:0.68rem;
        line-height:1.15;
        min-width:0;
    }
    .home-pricing--modal .home-pricing__save{
        display:block;
        margin:0.12rem auto 0;
        font-size:0.58rem;
        padding:0.06rem 0.28rem;
        width:fit-content;
    }
    .home-pricing--modal .home-pricing__plans{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:0.45rem;
        align-items:stretch;
    }
    .home-pricing--modal .home-pricing__plan{
        padding:0.55rem 0.5rem 0.5rem;
        border-radius:10px;
        min-width:0;
    }
    .home-pricing--modal .home-pricing__plan-head{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:0.2rem 0.35rem;
        margin-bottom:0.28rem;
    }
    .home-pricing--modal .home-pricing__badge{
        order:2;
        margin:0;
        font-size:0.52rem;
        padding:0.1rem 0.32rem;
        letter-spacing:0.06em;
    }
    .home-pricing--modal .home-pricing__plan-name{
        order:1;
        font-size:0.86rem;
        margin:0;
        line-height:1.15;
    }
    .home-pricing--modal .home-pricing__price{
        order:3;
        flex:1 0 100%;
        margin:0.05rem 0 0;
    }
    .home-pricing--modal .home-pricing__amount{
        font-size:1.05rem;
        line-height:1.1;
    }
    .home-pricing--modal .home-pricing__period,
    .home-pricing--modal .home-pricing__price-note{
        font-size:0.64rem;
        line-height:1.2;
        margin:0;
    }
    .home-pricing--modal .home-pricing__price-note{
        order:4;
        flex:1 0 100%;
        margin-top:0.08rem;
    }
    .home-pricing--modal .home-pricing__features{
        margin:0.2rem 0 0.35rem;
        gap:0;
    }
    .home-pricing--modal .home-pricing__features li{
        flex-direction:column;
        align-items:flex-start;
        gap:0;
        padding:0.22rem 0;
        font-size:0.68rem;
        line-height:1.2;
    }
    .home-pricing--modal .home-pricing__feat-label{
        font-size:0.62rem;
        line-height:1.15;
    }
    .home-pricing--modal .home-pricing__feat-value{
        text-align:left;
        white-space:normal;
        font-size:0.68rem;
        line-height:1.15;
    }
    .home-pricing--modal .home-gate__btn,
    .home-pricing--modal .home-pricing__cta{
        padding:0.48rem 0.5rem;
        font-size:0.72rem;
        border-radius:8px;
        margin-top:auto;
    }
    .home-pricing--modal .home-pricing__footnote{
        font-size:0.62rem;
        line-height:1.25;
        margin:0.35rem 0 0;
        padding:0;
    }
    .home-pricing--modal .home-pricing__current-plan{
        font-size:0.62rem;
        line-height:1.2;
        margin:auto 0 0;
        padding:0.4rem 0 0;
    }
    #premium-plans-msg{min-height:0;margin-top:0.2rem;font-size:0.72rem}
}