/* ============================================================
   APPLE-STYLE LANDING PAGE — WedPlanner
   Scoped under .lp-body to avoid leaking into other pages.
   ============================================================ */

.lp-body{
    background:var(--bg);
}

.lp-body .phone{
    overflow-x:clip;
    background:
        radial-gradient(900px 700px at 90% -100px, rgba(248,232,210,.55) 0%, transparent 60%),
        radial-gradient(720px 600px at -10% 320px, rgba(173,169,255,.20) 0%, transparent 65%),
        var(--bg);
}

/* ------------------------------------------------------------
   SHARED TYPOGRAPHY
   ------------------------------------------------------------ */

.lp-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--lavender-strong);
    margin-bottom:18px;
}

.lp-line{
    display:block;
}

.lp-text-accent{
    color:var(--lavender);
}

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */

.lp-hero{
    position:relative;
    padding:20px 24px;
    max-width:1400px;
    margin:0 auto;
    text-align:center;
    overflow:visible;
}

.lp-hero-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(44px, 9vw, 96px);
    font-weight:600;
    line-height:1.02;
    letter-spacing:-1.5px;
    color:var(--deep);
    margin:0 auto 28px;
    max-width:880px;
    position:relative;
}

.lp-hero-title .lp-line:nth-child(2){
    color:var(--lavender);
}

.lp-hero-sub{
    font-size:clamp(17px, 2vw, 22px);
    line-height:1.55;
    color:var(--text);
    max-width:600px;
    margin:0 auto 36px;
    font-weight:400;
}

.lp-cta-row{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:14px;
    margin-bottom:60px;
}

/* Landing CTAs reuse the global .onb-cta (sharp corners + spinning conic
   gradient border + blurred inner). Wrapper constrains width since .onb-cta
   defaults to 100%. */
.lp-cta-wrap{
    display:inline-block;
    width:240px;
    max-width:100%;
}
.lp-cta-wrap-lg{
    width:280px;
}

/* Match the wedplanner add-btn style: drop the opaque inner bg so the
   spinning conic gradient shows through as both a blurred swirl behind the
   label AND a crisp animated border. .onb-cta-inner defaults to 94% opaque
   lavender which hides the glow entirely. */
.lp-body .onb-cta-inner{
    background:transparent;
}

/* Navy CTA (2026-07 navy swap): landing-only override — the wedplanner app
   onboarding keeps the lavender .onb-cta. Conic sweep uses navy + a muted
   light stop so the spinning border/glow reads as a sheen on navy. */
.lp-body .onb-cta{
    background:#343249;
    box-shadow:0 6px 18px rgba(52,50,73,.32);
}
.lp-body .onb-cta:hover{
    box-shadow:0 8px 22px rgba(52,50,73,.38);
}
.lp-body .onb-cta-glow{
    background:conic-gradient(from 90deg at 50% 50%, #343249 0%, #8a86a8 50%, #343249 100%);
}

/* Large variant for the final CTA — taller, slightly larger label */
.lp-body .onb-cta.is-lg{
    height:64px;
}
.lp-body .onb-cta.is-lg .onb-cta-inner{
    font-size:17px;
    gap:12px;
    border-radius:calc(var(--radius-md) - 1.5px);
}
.lp-body .onb-cta.is-lg .onb-cta-inner svg{
    width:18px;
    height:18px;
}

.lp-cta-link{
    color:var(--muted);
    text-decoration:none;
    font-size:14px;
    transition:color .2s ease;
}

.lp-cta-link:hover{color:var(--lavender-strong);}

/* HERO STAGE — phone centered with glow */

.lp-hero-stage{
    position:relative;
    margin-top:8px;
    padding:30px 0 0;
    display:flex;
    justify-content:center;
    isolation:isolate;
}

/* Haze removed per design — no glow under hero phone. */

/* ------------------------------------------------------------
   INTRO STATEMENT
   ------------------------------------------------------------ */

.lp-intro{
    padding:20px 24px;
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}

.lp-intro-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(36px, 7vw, 84px);
    font-weight:600;
    line-height:1.08;
    letter-spacing:-1px;
    color:var(--deep);
    position:relative;
}

.lp-intro-line{
    display:block;
}

.lp-intro-accent{
    color:var(--lavender);
}

/* ------------------------------------------------------------
   FEATURE SECTIONS
   ------------------------------------------------------------ */

.lp-feature{
    position:relative;
    padding:20px 24px;
    overflow:hidden;
}

.lp-feature-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
}

/* Default: text right (start in RTL), phone left (end in RTL) */
.lp-feature-text{
    text-align:start;
}

.lp-feature-stage{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:260px;
    position:relative;
}

/* Alternate: even-indexed features flip — phone first, text second */
.lp-feature.is-flipped .lp-feature-inner{
    direction:ltr;
}
.lp-feature.is-flipped .lp-feature-text{
    text-align:end;
    direction:rtl;
}

.lp-feature-eyebrow{
    font-size:13px;
    font-weight:600;
    letter-spacing:2.5px;
    text-transform:uppercase;
    color:var(--lavender-strong);
    margin-bottom:20px;
}

.lp-feature-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(36px, 5.5vw, 64px);
    font-weight:600;
    line-height:1.06;
    letter-spacing:-1px;
    color:var(--deep);
    margin:0 0 24px;
    position:relative;
}

.lp-feature-sub{
    font-size:clamp(16px, 1.6vw, 19px);
    line-height:1.6;
    color:var(--text);
    max-width:480px;
    margin:0;
}

.lp-feature.is-flipped .lp-feature-sub{
    margin-inline-start:auto;
}

/* Soft backdrop colors per section for that Apple-rhythm feel */
.lp-feature-tone-warm{
    background:linear-gradient(180deg, transparent 0%, rgba(248,232,210,.32) 50%, transparent 100%);
}
.lp-feature-tone-cool{
    background:linear-gradient(180deg, transparent 0%, rgba(173,169,255,.10) 50%, transparent 100%);
}
.lp-feature-tone-mint{
    background:linear-gradient(180deg, transparent 0%, rgba(195,220,210,.20) 50%, transparent 100%);
}

/* Stage glow removed per design — no haze under feature phones. */

/* ------------------------------------------------------------
   FINAL CTA SECTION
   ------------------------------------------------------------ */

.lp-cta-section{
    position:relative;
    padding:20px 24px;
    max-width:1100px;
    margin:0 auto;
    text-align:center;
}

.lp-cta-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(40px, 7vw, 84px);
    font-weight:600;
    line-height:1.08;
    letter-spacing:-1px;
    color:var(--deep);
    margin:0 0 40px;
    position:relative;
}

.lp-cta-title .lp-line:last-child{
    color:var(--lavender);
}

.lp-cta-foot{
    margin-top:18px;
    color:var(--muted);
    font-size:13px;
}

.lp-cta-foot a{
    color:var(--lavender-strong);
    text-decoration:none;
}

/* ============================================================
   IPHONE MOCKUP — pure CSS frame
   ============================================================ */

.lp-phone{
    --phone-w:300px;
    --phone-h:614px;
    --phone-radius:46px;
    --bezel:11px;
    --phone-scale:.4;
    width:var(--phone-w);
    height:var(--phone-h);
    position:relative;
    border-radius:var(--phone-radius);
    background:linear-gradient(160deg, #2a2838 0%, #14131c 100%);
    box-shadow:
        0 0 0 1.5px rgba(255,255,255,.06) inset,
        0 0 0 2px #0a0912,
        0 36px 80px rgba(38,36,60,.28),
        0 14px 36px rgba(38,36,60,.18);
    padding:var(--bezel);
    /* Shrink visual to 2/5 of intrinsic size; preserves inner mockup readability.
       Negative margins collapse layout space so it doesn't leave a huge hole. */
    transform:scale(var(--phone-scale));
    transform-origin:center center;
    margin-block:calc((var(--phone-scale) - 1) * var(--phone-h) * .5);
    margin-inline:calc((var(--phone-scale) - 1) * var(--phone-w) * .5);
    transition:transform .6s cubic-bezier(.22,1,.36,1);
    will-change:transform;
}

.lp-phone-hero{
    --phone-w:320px;
    --phone-h:656px;
}

/* Subtle parallax tilt on hover (desktop only) — preserve scale */
@media (hover:hover) and (pointer:fine){
    .lp-phone:hover{
        transform:scale(var(--phone-scale)) translateY(-15px) rotate(-1deg);
    }
}

/* Volume / power buttons */
.lp-phone::before,
.lp-phone::after{
    content:'';
    position:absolute;
    background:#1a1825;
    border-radius:2px;
}

.lp-phone::before{
    /* power button right side (RTL aware: this is visual right) */
    right:-2px;
    top:160px;
    width:3px;
    height:78px;
    box-shadow:0 -100px 0 #1a1825, 0 -148px 0 #1a1825;
}

.lp-phone::after{
    /* volume + mute left side */
    left:-2px;
    top:110px;
    width:3px;
    height:32px;
    box-shadow:0 56px 0 0 #1a1825, 0 110px 0 0 #1a1825;
}

/* Dynamic island */
.lp-phone-island{
    position:absolute;
    top:14px;
    left:50%;
    transform:translateX(-50%);
    width:96px;
    height:30px;
    background:#000;
    border-radius:20px;
    z-index:3;
    box-shadow:0 0 0 1px rgba(255,255,255,.04);
}

.lp-phone-island::after{
    content:'';
    position:absolute;
    top:8px;
    right:14px;
    width:8px;
    height:8px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, #2a3a4a 0%, #0a0a14 70%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

/* Screen */
.lp-phone-screen{
    width:100%;
    height:100%;
    border-radius:calc(var(--phone-radius) - var(--bezel));
    background:#fbfaff;
    overflow:hidden;
    position:relative;
    isolation:isolate;
}

/* ============================================================
   MOCK SCREEN BASE
   ============================================================ */

.mock{
    width:100%;
    height:100%;
    padding:54px 14px 18px;
    display:flex;
    flex-direction:column;
    gap:10px;
    background:
        radial-gradient(280px 200px at 100% 0%, rgba(248,232,210,.45) 0%, transparent 60%),
        radial-gradient(220px 200px at 0% 220px, rgba(173,169,255,.18) 0%, transparent 65%),
        #fbfaff;
    font-family:var(--font-body);
    color:var(--deep);
    overflow:hidden;
    position:relative;
}

.mock-statusbar{
    position:absolute;
    top:18px;
    left:0;
    right:0;
    padding:0 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:10px;
    color:var(--deep);
    font-weight:600;
    z-index:2;
}

.mock-statusbar-time{
    margin-inline-start:6px;
}

.mock-statusbar-icons{
    display:flex;
    gap:4px;
    align-items:center;
    margin-inline-end:6px;
}

.mock-statusbar-icons span{
    display:inline-block;
}

.mock-statusbar .icon-signal{
    width:14px;
    height:9px;
    background:
        linear-gradient(to top, var(--deep) 30%, transparent 30%) 0 0/3px 100% no-repeat,
        linear-gradient(to top, var(--deep) 55%, transparent 55%) 4px 0/3px 100% no-repeat,
        linear-gradient(to top, var(--deep) 80%, transparent 80%) 8px 0/3px 100% no-repeat,
        linear-gradient(to top, var(--deep) 100%, transparent 100%) 12px 0/3px 100% no-repeat;
}

.mock-statusbar .icon-battery{
    width:18px;
    height:9px;
    border:1px solid var(--deep);
    border-radius:2px;
    position:relative;
    padding:1px;
}
.mock-statusbar .icon-battery::after{
    content:'';
    display:block;
    width:80%;
    height:100%;
    background:var(--deep);
    border-radius:1px;
}
.mock-statusbar .icon-battery::before{
    content:'';
    position:absolute;
    right:-2px;
    top:2px;
    bottom:2px;
    width:1.5px;
    background:var(--deep);
    border-radius:0 1px 1px 0;
}

/* Header */
.mock-head{
    display:flex;
    flex-direction:column;
    gap:2px;
    padding:0 6px 4px;
}

.mock-eyebrow{
    font-size:8px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--lavender-strong);
    font-weight:600;
}

.mock-title{
    font-size:18px;
    font-weight:600;
    color:var(--deep);
    letter-spacing:-.3px;
}

.mock-sub{
    font-size:10px;
    color:var(--muted);
}

/* Hero card */
.mock-hero-card{
    background:linear-gradient(135deg, #8e87f5 0%, #ada9ff 100%);
    color:#fff;
    border-radius:16px;
    padding:14px 16px;
    box-shadow:0 6px 16px rgba(142,135,245,.32);
    position:relative;
    overflow:hidden;
}
.mock-hero-card::before{
    content:'';
    position:absolute;
    inset:auto -20% -50% auto;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.18), transparent 60%);
    pointer-events:none;
}
.mock-hero-card-eyebrow{
    font-size:8px;
    letter-spacing:1.2px;
    text-transform:uppercase;
    opacity:.85;
    font-weight:600;
}
.mock-hero-card-num{
    font-family:var(--font-num);
    font-style:italic;
    font-size:32px;
    font-weight:400;
    line-height:1.05;
    margin-top:2px;
}
.mock-hero-card-label{
    font-size:11px;
    opacity:.9;
    margin-top:1px;
}

/* Stat grid (dashboard) */
.mock-stat-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:7px;
}

.mock-stat{
    background:#fff;
    border-radius:12px;
    padding:9px 10px;
    box-shadow:0 1px 2px rgba(38,36,60,.04), 0 4px 12px rgba(38,36,60,.04);
    display:flex;
    flex-direction:column;
    gap:2px;
}

.mock-stat-row{
    display:flex;
    align-items:center;
    gap:6px;
}

.mock-stat-icon{
    width:22px;
    height:22px;
    border-radius:8px;
    background:var(--lavender-tint);
    color:var(--lavender-strong);
    display:flex;
    align-items:center;
    justify-content:center;
}
.mock-stat-icon svg{
    width:13px;
    height:13px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.mock-stat-title{
    font-size:10px;
    color:var(--text);
    font-weight:600;
}

.mock-stat-num{
    font-family:var(--font-num);
    font-style:italic;
    font-size:18px;
    color:var(--deep);
    line-height:1;
    margin-top:2px;
}

.mock-stat-sub{
    font-size:8.5px;
    color:var(--muted);
}

/* List rows (guests / tasks / expenses) */
.mock-list{
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(38,36,60,.04), 0 4px 12px rgba(38,36,60,.04);
    overflow:hidden;
    flex:1;
    display:flex;
    flex-direction:column;
}

.mock-row{
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 11px;
    border-bottom:1px solid var(--hairline-soft);
}
.mock-row:last-child{border-bottom:none;}

.mock-avatar{
    width:26px;
    height:26px;
    border-radius:50%;
    flex-shrink:0;
    background:linear-gradient(135deg, #ddd6ff 0%, #f5e6cf 100%);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    color:var(--deep);
    font-weight:600;
}

.mock-row-body{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.mock-row-name{
    font-size:11px;
    color:var(--deep);
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.mock-row-sub{
    font-size:9px;
    color:var(--muted);
    margin-top:1px;
}

.mock-pill{
    font-size:8.5px;
    font-weight:600;
    padding:3px 7px;
    border-radius:999px;
    flex-shrink:0;
    letter-spacing:.2px;
}
.mock-pill-yes{
    background:#e8f4ec;
    color:#2f7a4c;
}
.mock-pill-no{
    background:#fcecec;
    color:#a64041;
}
.mock-pill-pending{
    background:#fff3df;
    color:#8a5a1a;
}

/* Search input */
.mock-search{
    background:#fff;
    border-radius:10px;
    padding:7px 10px;
    font-size:10px;
    color:var(--muted);
    box-shadow:0 1px 2px rgba(38,36,60,.04);
    display:flex;
    align-items:center;
    gap:6px;
}
.mock-search::before{
    content:'';
    width:11px;
    height:11px;
    border-radius:50%;
    border:1.2px solid var(--muted);
    flex-shrink:0;
    position:relative;
}

/* Task row */
.mock-check{
    width:18px;
    height:18px;
    border-radius:6px;
    border:1.5px solid var(--soft);
    flex-shrink:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.mock-check.is-done{
    background:var(--lavender-strong);
    border-color:var(--lavender-strong);
}
.mock-check.is-done::after{
    content:'';
    width:9px;
    height:5px;
    border-left:1.6px solid #fff;
    border-bottom:1.6px solid #fff;
    transform:rotate(-45deg) translate(1px,-1px);
}

/* Donut chart (budget) */
.mock-donut-wrap{
    background:#fff;
    border-radius:14px;
    padding:14px;
    box-shadow:0 1px 2px rgba(38,36,60,.04), 0 4px 12px rgba(38,36,60,.04);
    display:flex;
    align-items:center;
    gap:14px;
}

.mock-donut{
    width:80px;
    height:80px;
    border-radius:50%;
    background:conic-gradient(
        var(--lavender-strong) 0% 38%,
        #d4a574 38% 60%,
        #97c4a8 60% 78%,
        var(--lavender-tint) 78% 100%
    );
    position:relative;
    flex-shrink:0;
}
.mock-donut::after{
    content:'';
    position:absolute;
    inset:14px;
    border-radius:50%;
    background:#fff;
}
.mock-donut-center{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    z-index:1;
}
.mock-donut-num{
    font-family:var(--font-num);
    font-style:italic;
    font-size:16px;
    color:var(--deep);
    line-height:1;
}
.mock-donut-label{
    font-size:7.5px;
    color:var(--muted);
    margin-top:1px;
    letter-spacing:.4px;
}

.mock-legend{
    display:flex;
    flex-direction:column;
    gap:6px;
    flex:1;
    min-width:0;
}
.mock-legend-row{
    display:flex;
    align-items:center;
    gap:7px;
}
.mock-legend-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    flex-shrink:0;
}
.mock-legend-name{
    font-size:9.5px;
    color:var(--text);
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.mock-legend-num{
    font-family:var(--font-num);
    font-style:italic;
    font-size:10px;
    color:var(--deep);
}

/* Tables floor plan */
.mock-floor{
    flex:1;
    background:#fff;
    border-radius:14px;
    box-shadow:0 1px 2px rgba(38,36,60,.04), 0 4px 12px rgba(38,36,60,.04);
    padding:14px;
    position:relative;
    overflow:hidden;
    min-height:240px;
}

.mock-floor-bg{
    position:absolute;
    inset:14px;
    border-radius:10px;
    background:
        repeating-linear-gradient(45deg, rgba(173,169,255,.06) 0 1px, transparent 1px 12px),
        var(--lavender-soft);
}

.mock-table{
    position:absolute;
    width:38px;
    height:38px;
    border-radius:50%;
    background:#fff;
    border:1.5px solid var(--lavender-tint);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-num);
    font-style:italic;
    font-size:11px;
    color:var(--deep);
    box-shadow:0 2px 6px rgba(38,36,60,.06);
}
.mock-table.is-rect{
    border-radius:6px;
    width:62px;
    height:24px;
    font-size:9px;
}
.mock-table.is-full{
    background:var(--lavender-strong);
    border-color:var(--lavender-strong);
    color:#fff;
}
.mock-table.is-active{
    border-color:var(--lavender-strong);
    border-width:2px;
    box-shadow:0 0 0 4px rgba(142,135,245,.22), 0 4px 12px rgba(38,36,60,.10);
}

/* Wishes grid */
.mock-wishes{
    flex:1;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    align-content:start;
}

.mock-wish{
    background:#fff;
    border-radius:12px;
    padding:9px 10px;
    box-shadow:0 1px 2px rgba(38,36,60,.04), 0 4px 12px rgba(38,36,60,.04);
    display:flex;
    flex-direction:column;
    gap:4px;
}

.mock-wish-author{
    font-size:9px;
    color:var(--lavender-strong);
    font-weight:600;
    letter-spacing:.3px;
}

.mock-wish-text{
    font-size:9.5px;
    color:var(--text);
    line-height:1.35;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.mock-wish.is-tall .mock-wish-text{
    -webkit-line-clamp:5;
}

/* Invitation preview */
.mock-invite{
    flex:1;
    background:linear-gradient(155deg, #faf6ee 0%, #f5e6cf 60%, #e6d4ad 100%);
    border-radius:14px;
    padding:24px 16px;
    text-align:center;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:8px;
    position:relative;
    overflow:hidden;
    box-shadow:0 2px 8px rgba(38,36,60,.06);
}
.mock-invite::before{
    content:'';
    position:absolute;
    inset:8px;
    border:1px solid rgba(38,36,60,.14);
    border-radius:9px;
    pointer-events:none;
}
.mock-invite-eyebrow{
    font-size:8px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--deep);
    opacity:.55;
    font-weight:600;
}
.mock-invite-names{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:24px;
    font-weight:600;
    color:var(--deep);
    line-height:1.1;
    letter-spacing:-.4px;
}
.mock-invite-amp{
    font-family:var(--font-num);
    font-style:italic;
    color:var(--lavender-deeper);
    font-size:18px;
    font-weight:400;
    margin:2px 0;
}
.mock-invite-date{
    margin-top:6px;
    font-family:var(--font-num);
    font-style:italic;
    font-size:13px;
    color:var(--deep);
}
.mock-invite-venue{
    font-size:9.5px;
    color:var(--text);
    margin-top:1px;
}
.mock-invite-divider{
    width:30px;
    height:1px;
    background:rgba(38,36,60,.25);
    margin:6px 0 2px;
}

.mock-share-row{
    display:flex;
    gap:8px;
    justify-content:center;
    margin-top:2px;
}
.mock-share-btn{
    width:32px;
    height:32px;
    border-radius:10px;
    background:#fff;
    box-shadow:0 1px 2px rgba(38,36,60,.06), 0 3px 8px rgba(38,36,60,.06);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--lavender-strong);
}
.mock-share-btn svg{
    width:14px;
    height:14px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* ============================================================
   ENHANCED REVEAL ANIMATIONS for landing
   ============================================================ */

.lp-line.reveal{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay,0s);
}
.lp-line.reveal.in{
    opacity:1;
    transform:translate3d(0,0,0);
}

/* Phone has a stronger rise + slight scale */
.lp-feature-stage.reveal,
.lp-hero-stage.reveal{
    opacity:0;
    transform:translate3d(0,60px,0) scale(.96);
    transition:opacity 1.1s cubic-bezier(.22,1,.36,1), transform 1.1s cubic-bezier(.22,1,.36,1);
    transition-delay:var(--reveal-delay,0s);
}

.lp-feature-stage.reveal.in,
.lp-hero-stage.reveal.in{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

@media (prefers-reduced-motion:reduce){
    .lp-line.reveal,
    .lp-feature-stage.reveal,
    .lp-hero-stage.reveal{
        opacity:1;
        transform:none;
        transition:none;
    }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width:880px){
    .lp-hero{padding:24px 20px 40px;}
    .lp-intro{padding:80px 20px 40px;}

    .lp-feature{
        padding:20px 20px;
    }

    .lp-feature-inner{
        grid-template-columns:1fr;
        gap:40px;
    }

    .lp-feature.is-flipped .lp-feature-inner{
        direction:rtl;
    }
    .lp-feature.is-flipped .lp-feature-text{
        text-align:start;
    }

    /* On mobile, always put phone after text */
    .lp-feature-text{order:1;}
    .lp-feature-stage{order:2;min-height:240px;}

    .lp-feature-sub{
        max-width:none;
    }

    .lp-cta-section{
        padding:100px 20px 60px;
    }
}

@media (max-width:480px){
    .lp-phone{
        --phone-w:264px;
        --phone-h:540px;
        --phone-radius:40px;
        --bezel:10px;
    }
    .lp-phone-hero{
        --phone-w:280px;
        --phone-h:572px;
    }
    .lp-phone-island{
        width:84px;
        height:26px;
    }
    .mock{
        padding:46px 12px 14px;
    }
}

/* Hide bottom system bar artifacts that mobile-first layout adds */
.lp-body .status{display:none;}

/* ============================================================
   PREMIUM SCROLL MOMENTS
   Scroll-progress driven sections inspired by Apple product pages.
   Each section sets --p (0..1) on itself as it's scrolled through
   its pinned range (see reveal.php scroll tracker). CSS uses --p
   to drive opacity, transform, color etc. without per-frame layout
   thrash.

   --p falls back to 0 if JS hasn't run yet. Reduced-motion users
   get the final state of each scene immediately.
   ============================================================ */

/* ------------------------------------------------------------
   1) PINNED SHOWCASE — phone-led story with crossfading scenes
   ------------------------------------------------------------ */

.lp-showcase{
    position:relative;
    /* Track height controls scroll duration. 340vh = ~3 viewports of
       scroll while the inner pin stays at 100vh. */
    height:340vh;
    --p:0;
}

.lp-showcase-pin{
    position:sticky;
    top:0;
    height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
}

/* Backdrop — shifting radial mesh whose stops respond to --p.
   Three "moods" interpolate across the showcase: warm peach → cool
   lavender → soft mint. The opacity calculations crossfade the
   layered radials based on --p ranges. */
.lp-showcase-bg{
    position:absolute;
    inset:0;
    z-index:0;
    background:
        radial-gradient(900px 700px at calc(20% + var(--p) * 60%) 30%, rgba(248,232,210,.55) 0%, transparent 60%),
        radial-gradient(800px 600px at calc(80% - var(--p) * 60%) 70%, rgba(173,169,255,.32) 0%, transparent 65%),
        radial-gradient(700px 500px at 50% calc(120% - var(--p) * 80%), rgba(195,220,210,.28) 0%, transparent 70%);
    transition:none;
    pointer-events:none;
}

.lp-showcase-bg::after{
    /* Subtle film grain via a layered noise gradient — adds the
       expensive-looking texture without an image. */
    content:'';
    position:absolute;
    inset:0;
    background:
        repeating-linear-gradient(115deg, rgba(255,255,255,.025) 0 2px, transparent 2px 6px);
    mix-blend-mode:overlay;
    opacity:.6;
    pointer-events:none;
}

/* The 3 scenes are stacked on top of each other in a centered grid
   cell. Only one is visible at a time, controlled by --p. */
.lp-showcase-scenes{
    position:relative;
    z-index:1;
    width:100%;
    max-width:1200px;
    height:100%;
    margin:0 auto;
    padding:0 24px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.lp-showcase-scene{
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:48px;
    align-items:center;
    padding:0 24px;
    will-change:opacity,transform;
}

/* Scene 0 (intro): visible from p=0 → 0.30, fades out by 0.40. */
.lp-showcase-scene[data-idx="0"]{
    opacity:clamp(0, calc((0.40 - var(--p)) / 0.10), 1);
    transform:scale(calc(1 - var(--p) * 0.04)) translate3d(0, calc(var(--p) * -24px), 0);
}

/* Scene 1 (middle): visible 0.35 → 0.65, peaks at 0.50. */
.lp-showcase-scene[data-idx="1"]{
    opacity:min(
        clamp(0, calc((var(--p) - 0.30) / 0.10), 1),
        clamp(0, calc((0.70 - var(--p)) / 0.10), 1)
    );
    transform:scale(calc(0.96 + (min(var(--p), 1) - 0.30) * 0.08)) translate3d(0, calc((0.50 - var(--p)) * 30px), 0);
}

/* Scene 2 (close): fades in from 0.60 onward, holds at 1. */
.lp-showcase-scene[data-idx="2"]{
    opacity:clamp(0, calc((var(--p) - 0.60) / 0.10), 1);
    transform:scale(calc(0.96 + min(var(--p) - 0.60, 0.40) * 0.10)) translate3d(0, calc((1 - var(--p)) * 26px), 0);
}

/* Scene text — sits in the start (RTL right) cell on desktop. */
.lp-showcase-text{
    align-self:center;
}

.lp-showcase-eyebrow{
    font-size:12px;
    font-weight:600;
    letter-spacing:3px;
    text-transform:uppercase;
    color:var(--lavender-deeper);
    margin-bottom:18px;
    opacity:.85;
}

.lp-showcase-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(36px, 5.6vw, 68px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-1.2px;
    color:var(--deep);
    margin:0 0 18px;
}

.lp-showcase-title span{
    color:var(--lavender);
    display:block;
}

.lp-showcase-sub{
    font-size:clamp(16px, 1.6vw, 19px);
    line-height:1.55;
    color:var(--text);
    max-width:460px;
    margin:0;
}

/* Phone stage — gets a subtle continuous 3D tilt across the
   whole pinned scroll, distinct from the per-scene opacity. */
.lp-showcase-stage{
    display:flex;
    justify-content:center;
    align-items:center;
    perspective:1400px;
}

.lp-showcase-stage .lp-phone{
    /* Override the default scale-down — these phones should read
       large since they are the focal point of the section. */
    --phone-scale:.62;
    transform:
        scale(var(--phone-scale))
        rotateY(calc((var(--p) - 0.5) * 10deg))
        rotateX(calc((0.5 - var(--p)) * 3deg))
        translate3d(0, calc((0.5 - var(--p)) * 14px), 0);
    transform-origin:center center;
    transition:none;
}

/* Progress dots — subtle indicator that 3 scenes exist. */
.lp-showcase-dots{
    position:absolute;
    bottom:36px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
    z-index:2;
}

.lp-showcase-dot{
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--lavender-tint);
    transition:background .4s ease, transform .4s ease;
}

.lp-showcase-dot[data-idx="0"]{
    background:linear-gradient(var(--lavender-strong),var(--lavender-strong)) no-repeat;
    background-size:calc((1 - max(0, min(1, calc((var(--p) - 0.0) / 0.35)))) * 100%) 100%;
    background-color:var(--lavender-tint);
}
.lp-showcase-dot[data-idx="1"]{
    background:linear-gradient(var(--lavender-strong),var(--lavender-strong)) no-repeat;
    background-size:calc(max(0, min(1, calc((var(--p) - 0.30) / 0.10))) * (1 - max(0, min(1, calc((var(--p) - 0.65) / 0.10)))) * 100%) 100%;
    background-color:var(--lavender-tint);
}
.lp-showcase-dot[data-idx="2"]{
    background:linear-gradient(var(--lavender-strong),var(--lavender-strong)) no-repeat;
    background-size:calc(max(0, min(1, calc((var(--p) - 0.65) / 0.10))) * 100%) 100%;
    background-color:var(--lavender-tint);
}

/* ------------------------------------------------------------
   2) ZOOM REVEAL — mega text that grows + crossfades on scroll
   ------------------------------------------------------------ */

.lp-zoom{
    position:relative;
    height:220vh;
    --p:0;
}

.lp-zoom-pin{
    position:sticky;
    top:0;
    height:100vh;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    isolation:isolate;
}

.lp-zoom-pin::before{
    /* Vignette-ish backdrop bloom that intensifies mid-scroll. */
    content:'';
    position:absolute;
    inset:-10%;
    background:
        radial-gradient(closest-side at 50% 50%, rgba(173,169,255,.20) 0%, transparent 70%),
        radial-gradient(closest-side at 30% 70%, rgba(248,232,210,.30) 0%, transparent 65%);
    opacity:clamp(0, calc(1 - abs((var(--p) - 0.5) * 2.4)), 1);
    transform:scale(calc(0.9 + var(--p) * 0.3));
    pointer-events:none;
    z-index:0;
}

.lp-zoom-text{
    position:relative;
    z-index:1;
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(48px, 11vw, 132px);
    font-weight:600;
    line-height:1.0;
    letter-spacing:-2px;
    color:var(--deep);
    text-align:center;
    margin:0;
    padding:0 24px;
    /* Scale rises from ~0.55 at the start, peaks ~1.05 at 0.55,
       then continues past 1.15 as it scrolls out (the "zoom past
       the camera" feel). Opacity blooms in 0→0.15 and out 0.85→1. */
    transform:scale(calc(0.55 + var(--p) * 0.6)) translate3d(0, calc((0.5 - var(--p)) * 20px), 0);
    opacity:min(
        clamp(0, calc(var(--p) / 0.15), 1),
        clamp(0, calc((1 - var(--p)) / 0.15), 1)
    );
    will-change:transform,opacity;
}

.lp-zoom-line{
    display:block;
}

/* Each line reveals at its own scroll point */
.lp-zoom-line-1{
    opacity:clamp(0, calc((var(--p) - 0.05) / 0.10), 1);
    transform:translate3d(0, calc((1 - clamp(0, calc((var(--p) - 0.05) / 0.10), 1)) * 24px), 0);
}
.lp-zoom-line-2{
    opacity:clamp(0, calc((var(--p) - 0.30) / 0.10), 1);
    transform:translate3d(0, calc((1 - clamp(0, calc((var(--p) - 0.30) / 0.10), 1)) * 24px), 0);
}
.lp-zoom-line-3{
    opacity:clamp(0, calc((var(--p) - 0.55) / 0.10), 1);
    transform:translate3d(0, calc((1 - clamp(0, calc((var(--p) - 0.55) / 0.10), 1)) * 24px), 0);
    color:var(--lavender);
    font-style:italic;
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    letter-spacing:-1px;
}

/* ------------------------------------------------------------
   3) FINALE — atmospheric pre-CTA scene with parallax layers
   ------------------------------------------------------------ */

.lp-finale{
    position:relative;
    min-height:100vh;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    isolation:isolate;
    /* --v is set by the scroll-progress tracker for view-based
       progress (0 when the section enters viewport bottom, 1 when
       it leaves viewport top). Drives parallax layers. */
    --v:0.5;
}

.lp-finale-layer{
    position:absolute;
    inset:-20%;
    pointer-events:none;
    will-change:transform,opacity;
}

.lp-finale-layer-1{
    /* Deep background — slow parallax, large soft mesh */
    background:
        radial-gradient(50% 50% at 30% 30%, rgba(248,232,210,.42) 0%, transparent 70%),
        radial-gradient(60% 60% at 70% 70%, rgba(173,169,255,.32) 0%, transparent 70%);
    transform:translate3d(0, calc((var(--v) - 0.5) * -120px), 0) scale(1.05);
    z-index:0;
}

.lp-finale-layer-2{
    /* Mid layer — sweeping ribbon of color */
    background:conic-gradient(from calc(var(--v) * 200deg) at 50% 50%, transparent 0deg, rgba(173,169,255,.18) 90deg, transparent 180deg, rgba(248,232,210,.22) 270deg, transparent 360deg);
    transform:translate3d(0, calc((var(--v) - 0.5) * -60px), 0) scale(1.1);
    z-index:1;
    mix-blend-mode:soft-light;
}

/* Floating sparkles — pure CSS, drifting */
.lp-finale-sparks{
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    opacity:.7;
}

.lp-finale-spark{
    position:absolute;
    width:6px;
    height:6px;
    border-radius:50%;
    background:radial-gradient(circle, #fff 0%, var(--lavender-strong) 40%, transparent 70%);
    box-shadow:0 0 8px rgba(173,169,255,.5);
    animation:lp-spark-drift 14s ease-in-out infinite;
    transform:translate3d(0, calc((var(--v) - 0.5) * -180px), 0);
}

.lp-finale-spark:nth-child(1){ top:18%; left:12%; animation-delay:-0s;  width:5px; height:5px; }
.lp-finale-spark:nth-child(2){ top:32%; left:78%; animation-delay:-3s;  width:8px; height:8px; }
.lp-finale-spark:nth-child(3){ top:58%; left:22%; animation-delay:-6s;  width:4px; height:4px; }
.lp-finale-spark:nth-child(4){ top:72%; left:64%; animation-delay:-2s;  width:6px; height:6px; }
.lp-finale-spark:nth-child(5){ top:24%; left:48%; animation-delay:-9s;  width:3px; height:3px; }
.lp-finale-spark:nth-child(6){ top:80%; left:88%; animation-delay:-5s;  width:7px; height:7px; }
.lp-finale-spark:nth-child(7){ top:46%; left:6%;  animation-delay:-8s;  width:5px; height:5px; }
.lp-finale-spark:nth-child(8){ top:12%; left:90%; animation-delay:-11s; width:4px; height:4px; }

@keyframes lp-spark-drift{
    0%, 100%{
        transform:translate3d(0, calc((var(--v) - 0.5) * -180px), 0) scale(1);
        opacity:.45;
    }
    50%{
        transform:translate3d(8px, calc((var(--v) - 0.5) * -180px - 14px), 0) scale(1.25);
        opacity:.95;
    }
}

/* Foreground content */
.lp-finale-content{
    position:relative;
    z-index:3;
    max-width:900px;
    margin:0 auto;
    padding:80px 24px;
    text-align:center;
    /* Content rises gently against the parallax */
    transform:translate3d(0, calc((0.5 - var(--v)) * 40px), 0);
}

.lp-finale-eyebrow{
    font-size:12px;
    font-weight:600;
    letter-spacing:3.5px;
    text-transform:uppercase;
    color:var(--lavender-deeper);
    margin-bottom:22px;
    opacity:.9;
}

.lp-finale-title{
    font-family:'TelAviv Modernist',var(--font-title);
    font-size:clamp(40px, 7.5vw, 96px);
    font-weight:600;
    line-height:1.04;
    letter-spacing:-1.5px;
    color:var(--deep);
    margin:0;
}

.lp-finale-title em{
    display:block;
    color:var(--lavender);
    font-style:italic;
    font-family:'Libre Baskerville',serif;
    font-weight:400;
    letter-spacing:-1px;
    margin-top:6px;
}

.lp-finale-rule{
    width:1px;
    height:64px;
    margin:36px auto 0;
    background:linear-gradient(to bottom, transparent, var(--lavender-strong), transparent);
    opacity:calc(var(--v) * 1.6);
}

/* ------------------------------------------------------------
   Reduced motion: skip the heavy scroll-driven effects, show
   each section in its "final" state immediately.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion:reduce){
    .lp-showcase{height:auto;}
    .lp-showcase-pin{position:relative;height:auto;}
    .lp-showcase-scenes{flex-direction:column;height:auto;gap:80px;padding:60px 24px;}
    .lp-showcase-scene{position:relative;inset:auto;opacity:1;transform:none;}
    .lp-showcase-dots{display:none;}
    .lp-showcase-stage .lp-phone{transform:scale(.62);}

    .lp-zoom{height:auto;}
    .lp-zoom-pin{position:relative;height:auto;padding:80px 24px;}
    .lp-zoom-text{transform:none;opacity:1;}
    .lp-zoom-line-1,.lp-zoom-line-2,.lp-zoom-line-3{opacity:1;transform:none;}

    .lp-finale-layer{transform:none;}
    .lp-finale-spark{animation:none;}
    .lp-finale-content{transform:none;}
    .lp-finale-rule{opacity:.7;}
}

/* ------------------------------------------------------------
   Responsive: stack columns on mobile, shrink heights.
   ------------------------------------------------------------ */
@media (max-width:880px){
    .lp-showcase{height:300vh;}
    .lp-showcase-scene{
        grid-template-columns:1fr;
        grid-template-rows:auto 1fr;
        gap:24px;
        padding:40px 20px 60px;
        align-content:center;
    }
    .lp-showcase-text{text-align:start;}
    .lp-showcase-title{font-size:clamp(32px, 8vw, 48px);}
    .lp-showcase-stage .lp-phone{--phone-scale:.5;}

    .lp-zoom{height:180vh;}
    .lp-zoom-text{font-size:clamp(40px, 13vw, 80px);}

    .lp-finale-content{padding:60px 20px;}
}

@media (max-width:480px){
    .lp-showcase{height:280vh;}
    .lp-showcase-stage .lp-phone{--phone-scale:.42;}
    .lp-zoom-text{font-size:clamp(36px, 14vw, 64px);}
}