/* ============================================================
ListingClips · Homepage · Premium light SaaS, navy + gold
Brand-matched to the Product Deck (Inter · gold #C9A84C)
============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');
.lc-landing{
--white:#FFFFFF;
--bg:#F9FAFB;
--bg-warm:#FAFAF8;
--bg-soft:#F4F5F7;
--dark:#0F1117;
--dark-2:#161A23;
--ink:#111827;
--ink-2:#1F2937;
--ink-3:#374151;
--slate:#4B5563;
--slate-2:#6B7280;
--muted:#9CA3AF;
--muted-2:#C2C7D0;
--gold:#C9A84C;
--gold-dk:#A8892E;
--gold-lt:#E4CE86;
--gold-deep:#8A6E24;
--gold-soft:rgba(201,168,76,.12);
--gold-soft-2:rgba(201,168,76,.18);
--gold-border:rgba(201,168,76,.38);
--border:#E7E9EE;
--border-2:#EDEEF2;
--border-warm:#EAE6DB;
--shadow-xs:0 1px 2px rgba(16,24,40,.05);
--shadow:0 1px 3px rgba(16,24,40,.08),0 6px 16px rgba(16,24,40,.05);
--shadow-md:0 4px 16px rgba(16,24,40,.09),0 18px 44px rgba(16,24,40,.07);
--shadow-lg:0 12px 36px rgba(16,24,40,.12),0 40px 80px rgba(16,24,40,.10);
--shadow-gold:0 10px 30px -10px rgba(168,137,46,.45);
--sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
--r-xs:8px; --r:12px; --r-lg:16px; --r-xl:22px; --r-2xl:30px;
--container:1200px;
--accent:var(--gold);
--accent-dk:var(--gold-dk);
--accent-deep:var(--gold-deep);
}
.lc-landing, .lc-landing *{margin:0;padding:0;box-sizing:border-box;}
.lc-landing{scroll-behavior:smooth;scroll-padding-top:88px;}
.lc-landing{
font-family:var(--sans);background:var(--white);color:var(--ink);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
line-height:1.5;
/* NOT overflow-x:hidden here: the original rule targeted , but setting
overflow-x without overflow-y makes browsers compute overflow-y:auto too
(CSS Overflow spec), turning this wrapper into its own nested scroll
container and desyncing scrollIntoView()/IntersectionObserver from the
real page scroll. Horizontal clipping is handled by the app's own
top-level "overflow-x-hidden" wrapper instead. */
}
.lc-landing img, .lc-landing video{display:block;max-width:100%;}
.lc-landing a{color:inherit;text-decoration:none;}
.lc-landing button{font-family:inherit;cursor:pointer;border:none;background:none;}
.lc-landing ::selection{background:var(--gold-soft-2);}
/* ---------- layout ---------- */
.lc-landing .container{width:100%;max-width:var(--container);margin:0 auto;padding:0 32px;}
.lc-landing .section{padding:104px 0;}
.lc-landing .section-sm{padding:72px 0;}
.lc-landing .center{text-align:center;}
/* ---------- type ---------- */
.lc-landing .eyebrow{
display:inline-flex;align-items:center;gap:8px;
background:var(--gold-soft);border:1px solid var(--gold-border);
border-radius:7px;padding:7px 14px;
font-size:12.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
color:var(--gold-deep);
}
.lc-landing .eyebrow svg{width:14px;height:14px;}
.lc-landing .h1{font-size:clamp(40px,5.6vw,72px);font-weight:800;line-height:1.04;letter-spacing:-.025em;}
.lc-landing .h2{font-size:clamp(32px,4vw,52px);font-weight:800;line-height:1.08;letter-spacing:-.02em;}
.lc-landing .h3{font-size:clamp(22px,2.4vw,30px);font-weight:800;line-height:1.18;letter-spacing:-.01em;}
.lc-landing .lede{font-size:clamp(17px,1.5vw,21px);color:var(--slate);line-height:1.6;font-weight:400;}
.lc-landing .em{color:var(--accent-dk);}
.lc-landing .section-head{max-width:680px;margin:0 auto 56px;text-align:center;}
.lc-landing .section-head .h2{margin:18px 0 16px;}
.lc-landing .section-head .lede{margin:0 auto;max-width:560px;}
/* Phone type scale. The clamp() minimums above are desktop-tuned: below
~800px every heading pins to its min (h1 40px / h2 32px / lede 17px) and
just stops scaling, so on a 375px screen a headline eats a third of the
viewport. Re-scale the same ramp down to phone widths — each clamp below
interpolates from the phone size at 375px up to the base minimum at 640px,
where the rules above take back over with no visible step. Line-heights
loosen slightly too, since the desktop values (1.04/1.08) are set for
one- or two-line headlines, not the 3-4 lines these wrap to on a phone. */
@media(max-width:640px){
.lc-landing .h1{font-size:clamp(31px,18.25px + 3.4vw,40px);line-height:1.1;letter-spacing:-.02em;}
.lc-landing .h2{font-size:clamp(26px,17.5px + 2.26vw,32px);line-height:1.14;}
.lc-landing .h3{font-size:clamp(19px,14.75px + 1.13vw,22px);line-height:1.22;}
.lc-landing .lede{font-size:clamp(15.5px,13.4px + 0.57vw,17px);line-height:1.55;}
.lc-landing .section-head{margin-bottom:34px;}
.lc-landing .section-head .h2{margin:14px 0 12px;}
/* .hero-sub and .dz-title are defined further down this file, so these
need the extra ancestor to win — a bare ".lc-landing .hero-sub" here
would be overridden by the later rule at equal specificity. */
.lc-landing .hero .hero-sub{font-size:clamp(15.5px,13.4px + 0.57vw,17px);line-height:1.55;margin-top:16px;}
.lc-landing .hero .dropzone .dz-title{font-size:17.5px;line-height:1.35;}
.lc-landing .hero .dropzone .dz-sub{font-size:13.5px;}
/* .16em tracking on a 12.5px label pushed this eyebrow onto two lines. */
.lc-landing .eyebrow{font-size:11px;letter-spacing:.12em;padding:6px 11px;}
.lc-landing .hero .hero-trust{font-size:13px;gap:14px;margin-top:18px;}
}
/* ---------- buttons ---------- */
.lc-landing .btn{
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-weight:700;font-size:15px;letter-spacing:.01em;
padding:14px 26px;border-radius:11px;transition:transform .16s ease,box-shadow .2s ease,background .2s ease;
white-space:nowrap;
}
.lc-landing .btn svg{width:18px;height:18px;}
.lc-landing .btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-gold);}
.lc-landing .btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(168,137,46,.55);background:var(--accent-dk);}
.lc-landing .btn-dark{background:var(--dark);color:#fff;}
.lc-landing .btn-dark:hover{transform:translateY(-2px);background:var(--dark-2);}
.lc-landing .btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--border);}
.lc-landing .btn-ghost:hover{border-color:var(--muted-2);background:var(--bg);}
.lc-landing .btn-lg{padding:17px 32px;font-size:16px;border-radius:13px;}
.lc-landing .btn-block{width:100%;}
/* ---------- nav ---------- */
.lc-landing .nav{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.82);
backdrop-filter:saturate(180%) blur(18px);border-bottom:1px solid transparent;transition:border-color .25s,box-shadow .25s;}
.lc-landing .nav.scrolled{border-color:var(--border);box-shadow:0 4px 20px rgba(16,24,40,.05);}
.lc-landing .nav-inner{display:flex;align-items:center;justify-content:space-between;height:72px;}
.lc-landing .nav-inner>a:first-child{flex:none;}
.lc-landing .nav-logo{height:26px;width:auto;}
.lc-landing .nav-links{display:flex;align-items:center;gap:6px;}
.lc-landing .nav-links a{white-space:nowrap;padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink-3);transition:background .15s,color .15s;}
.lc-landing .nav-links a:hover{background:var(--bg-soft);color:var(--ink);}
.lc-landing .nav-links a.gold-link, .lc-landing .nav-drop>button.gold{color:var(--gold-deep);}
.lc-landing .nav-drop>button.gold::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 1px rgba(201,168,76,.8);}
.lc-landing .nav-cta{display:flex;align-items:center;gap:10px;}
.lc-landing .nav-login{padding:11px 20px;border-radius:10px;font-size:14.5px;font-weight:700;border:1px solid var(--border);color:var(--ink);transition:border-color .15s,background .15s;}
.lc-landing .nav-login:hover{border-color:var(--muted-2);background:var(--bg);}
.lc-landing .nav-burger{display:none;}
.lc-landing .nav-drop{position:relative;}
.lc-landing .nav-drop>button{white-space:nowrap;display:inline-flex;align-items:center;gap:6px;padding:9px 13px;border-radius:9px;font-size:14.5px;font-weight:600;color:var(--ink-3);transition:background .15s,color .15s;}
.lc-landing .nav-drop>button:hover{background:var(--bg-soft);color:var(--ink);}
.lc-landing .nav-drop>button svg{width:14px;height:14px;transition:transform .2s;}
.lc-landing .nav-drop:hover>button svg, .lc-landing .nav-drop.open>button svg{transform:rotate(180deg);}
.lc-landing .nav-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(6px);
background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 18px 44px -18px rgba(15,23,42,.25);padding:8px;min-width:280px;
opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;}
/* .open (not just :hover) is set by Header.tsx with a delayed close, so
moving the mouse from the button down into the menu doesn't close it. */
.lc-landing .nav-drop:hover .nav-menu, .lc-landing .nav-drop.open .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.lc-landing .nav-menu a{display:flex;gap:12px;align-items:flex-start;padding:12px;border-radius:10px;transition:background .15s;}
.lc-landing .nav-menu a:hover{background:var(--bg-soft);}
.lc-landing .nav-menu .ic{width:38px;height:38px;border-radius:10px;background:var(--gold-soft);border:1px solid var(--gold-border);
color:var(--gold-deep);display:flex;align-items:center;justify-content:center;flex:none;}
.lc-landing .nav-menu .ic svg{width:19px;height:19px;}
.lc-landing .nav-menu b{display:block;font-size:14px;font-weight:700;color:var(--ink);}
.lc-landing .nav-menu span span{font-size:12.5px;color:var(--slate-2);font-weight:500;}
.lc-landing .mobile-menu{display:none;}
/* ---------- hero ---------- */
.lc-landing .hero{position:relative;overflow:hidden;background:var(--dark);}
.lc-landing .hero-bg{position:absolute;inset:0;z-index:0;}
.lc-landing .hero-bg video, .lc-landing .hero-bg img{width:100%;height:100%;object-fit:cover;}
.lc-landing .hero-bg-poster{position:absolute;inset:0;transition:opacity .35s ease;}
.lc-landing .hero-bg::after{content:"";position:absolute;inset:0;
background:linear-gradient(180deg,rgba(15,17,23,.72) 0%,rgba(15,17,23,.66) 42%,rgba(15,17,23,.82) 100%);}
/* Specificity note: this element carries both "container" and "hero-inner"
classes. .container has its own padding (including a max-width:560px
override further down that zeroes vertical padding entirely) at the same
specificity as a bare ".hero-inner" rule, so whichever was later in the
file won on mobile — the ".hero" ancestor here isn't just documentation,
it's what makes this rule reliably win regardless of source order.
Only padding-top/bottom are set (not the shorthand) so .container's own
horizontal padding keeps controlling the left/right side margins. */
.lc-landing .hero .hero-inner{position:relative;z-index:2;padding-top:64px;padding-bottom:96px;text-align:center;color:#fff;}
@media(min-width:1024px){
/* .hero-scroll ("See it in action") is pinned bottom:24px absolute against
.hero itself, independent of .hero-inner's content flow — on shorter
desktop viewports the base padding left it sitting right on top of
.hero-trust. More top/bottom padding here gives both ends real
breathing room instead of content locking onto the section edges. */
.lc-landing .hero .hero-inner{padding-top:140px;padding-bottom:160px;}
}
.lc-landing .hero .eyebrow{background:rgba(228,206,134,.14);border-color:rgba(228,206,134,.34);color:var(--gold-lt);}
.lc-landing .hero h1{margin:26px auto 0;max-width:15ch;color:#fff;}
.lc-landing .hero h1 .em{color:var(--gold-lt);}
.lc-landing .hero-sub{margin:22px auto 0;max-width:46ch;font-size:clamp(17px,1.6vw,21px);color:rgba(255,255,255,.82);font-weight:400;}
.lc-landing .hero-trust{margin-top:22px;display:flex;gap:22px;justify-content:center;flex-wrap:wrap;color:rgba(255,255,255,.7);font-size:14px;font-weight:500;}
.lc-landing .hero-trust span{display:inline-flex;align-items:center;gap:7px;}
.lc-landing .hero-trust svg{width:16px;height:16px;color:var(--gold-lt);}
/* upload dropzone */
.lc-landing .dropzone{position:relative;z-index:2;margin:38px auto 0;max-width:760px;
background:rgba(255,255,255,.07);border:1.6px dashed rgba(255,255,255,.42);border-radius:var(--r-xl);
padding:46px 40px;backdrop-filter:blur(10px);transition:border-color .2s,background .2s,transform .2s;}
.lc-landing .dropzone.drag{border-color:var(--gold-lt);background:rgba(228,206,134,.12);transform:scale(1.01);}
.lc-landing .dz-icon{width:64px;height:64px;margin:0 auto 18px;border-radius:16px;background:rgba(255,255,255,.12);
display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.18);}
.lc-landing .dz-icon svg{width:28px;height:28px;color:#fff;}
.lc-landing .dz-title{font-size:20px;font-weight:700;color:#fff;}
.lc-landing .dz-sub{margin-top:6px;font-size:14.5px;color:rgba(255,255,255,.62);}
.lc-landing .dz-row{margin-top:22px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.lc-landing .dz-thumbs{margin-top:24px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
.lc-landing .dz-thumb-item{position:relative;border-radius:9px;overflow:hidden;}
.lc-landing .dz-thumbs img{width:74px;height:54px;object-fit:cover;border-radius:9px;border:2px solid rgba(255,255,255,.25);
box-shadow:0 6px 16px rgba(0,0,0,.3);display:block;}
.lc-landing .dz-thumb-caption{position:absolute;left:5px;bottom:5px;max-width:calc(100% - 10px);font-size:8.5px;
font-weight:600;line-height:1.5;color:#fff;background:rgba(0,0,0,.5);padding:1px 6px;border-radius:99px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;}
.lc-landing .dz-or{margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.55);}
.lc-landing .dz-or b{color:var(--gold-lt);font-weight:600;cursor:pointer;}
/* upload dropzone - filled state (photos already added) */
.lc-landing .dz-filled{cursor:default;text-align:left;}
.lc-landing .dz-filled-head{display:flex;align-items:center;justify-content:space-between;font-size:14.5px;font-weight:600;color:#fff;}
.lc-landing .dz-add-more{display:inline-flex;align-items:center;gap:6px;color:var(--gold-lt);font-size:13.5px;font-weight:600;cursor:pointer;}
.lc-landing .dz-add-more:hover{color:#fff;}
.lc-landing .dz-filled-grid{margin-top:18px;display:grid;grid-template-columns:repeat(5,1fr);gap:10px;}
.lc-landing .dz-filled-item{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid rgba(255,255,255,.18);}
.lc-landing .dz-filled-item img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .dz-filled-item .dz-thumb-caption{font-size:12px;padding:3px 9px;}
.lc-landing .dz-remove{position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:99px;background:rgba(10,10,14,.65);color:#fff;display:flex;align-items:center;justify-content:center;transition:background .15s;}
.lc-landing .dz-remove:hover{background:rgba(10,10,14,.9);}
.lc-landing .dz-filled .btn-block{margin-top:22px;width:100%;}
@media(max-width:760px){
.lc-landing .dz-filled-grid{grid-template-columns:repeat(3,1fr);}
}
/* ---------- trusted strip ---------- */
.lc-landing .trusted{padding:34px 0;border-bottom:1px solid var(--border);background:var(--white);}
.lc-landing .trusted p{text-align:center;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:20px;}
.lc-landing .logos{display:flex;align-items:center;justify-content:center;gap:48px;flex-wrap:wrap;}
.lc-landing .logo-mark{display:flex;align-items:center;gap:9px;color:#AEB4BE;font-weight:800;font-size:17px;letter-spacing:-.01em;
filter:grayscale(1);opacity:.85;transition:opacity .2s,color .2s;}
.lc-landing .logo-mark:hover{opacity:1;color:var(--slate-2);}
.lc-landing .logo-mark svg{width:22px;height:22px;}
/* ---------- generic cards ---------- */
.lc-landing .card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);}
.lc-landing .tag{display:inline-flex;align-items:center;gap:7px;background:var(--gold-soft);border:1px solid var(--gold-border);
border-radius:99px;padding:6px 13px;font-size:12.5px;font-weight:700;color:var(--gold-deep);letter-spacing:.02em;}
.lc-landing .tag svg{width:14px;height:14px;}
/* feature icon */
.lc-landing .ficon{width:50px;height:50px;border-radius:13px;background:var(--gold-soft);border:1px solid var(--gold-border);
display:flex;align-items:center;justify-content:center;color:var(--gold-deep);}
.lc-landing .ficon svg{width:24px;height:24px;}
/* ---------- before / after ---------- */
.lc-landing .ba-wrap{max-width:1000px;margin:48px auto 0;}
.lc-landing .ba{position:relative;border-radius:var(--r-2xl);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/9;
background:#0b0d12;user-select:none;cursor:ew-resize;border:1px solid rgba(0,0,0,.06);}
.lc-landing .ba img, .lc-landing .ba video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lc-landing .ba-after{position:absolute;inset:0;z-index:1;}
.lc-landing .ba-before{position:absolute;inset:0;z-index:2;clip-path:inset(0 50% 0 0);}
.lc-landing .ba-label{position:absolute;z-index:4;top:18px;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:700;
letter-spacing:.04em;color:#fff;backdrop-filter:blur(6px);background:rgba(15,17,23,.55);border:1px solid rgba(255,255,255,.16);}
.lc-landing .ba-label.l{left:18px;}
.lc-landing .ba-label.r{right:18px;background:rgba(168,137,46,.82);border-color:rgba(228,206,134,.5);}
/* Below 760px .ba-grid collapses to one column, so the full-size .ba and the
.ba-sm tiles render at identical widths — but only .ba-sm/.ba-vert had a
shrunken label (10.5px, further down this file), leaving these pills
oversized next to identical neighbours. Match that treatment. Must live
after the base rule above, not in the phone block near the top: equal
specificity means source order decides. .ba-sm/.ba-vert carry an extra
class so their own rule still wins over this one. */
@media(max-width:640px){
.lc-landing .ba-label{font-size:10.5px;padding:4px 9px;top:12px;letter-spacing:.03em;}
.lc-landing .ba-label.l{left:12px;}
.lc-landing .ba-label.r{right:12px;}
}
.lc-landing .ba-handle{position:absolute;z-index:5;top:0;bottom:0;left:50%;width:3px;background:#fff;transform:translateX(-50%);
box-shadow:0 0 0 1px rgba(0,0,0,.06);}
.lc-landing .ba-knob{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:99px;
background:#fff;box-shadow:var(--shadow-md);display:flex;align-items:center;justify-content:center;color:var(--ink);}
.lc-landing .ba-knob svg{width:22px;height:22px;}
.lc-landing .ba-cap{margin-top:18px;text-align:center;font-size:14.5px;color:var(--slate-2);}
/* ---------- stats band ---------- */
.lc-landing .stats{background:var(--dark);color:#fff;}
.lc-landing .stats-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(40px,6vw,96px);align-items:center;}
.lc-landing .stats-kicker{display:block;font-size:12px;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:14px;}
.lc-landing .stats-hero-n{font-size:clamp(96px,10vw,150px);font-weight:800;letter-spacing:-.04em;line-height:.95;color:#fff;}
.lc-landing .stats-hero-n .em{color:var(--gold-lt);}
.lc-landing .stats-hero p{margin-top:14px;font-size:18px;color:rgba(255,255,255,.62);line-height:1.55;max-width:34ch;}
.lc-landing .stats-ledger{display:flex;flex-direction:column;}
.lc-landing .stats-ledger .stat{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:22px 0;}
.lc-landing .stats-ledger .stat + .stat{border-top:1px solid rgba(228,206,134,.18);}
.lc-landing .stat-n{font-size:clamp(34px,3vw,44px);font-weight:800;letter-spacing:-.02em;color:#fff;line-height:1;flex:none;}
.lc-landing .stat-n .em{color:var(--gold-lt);}
.lc-landing .stat-l{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55);text-align:right;line-height:1.45;}
/* ---------- why ---------- */
.lc-landing .why-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center;}
.lc-landing .why-list{margin-top:34px;}
.lc-landing .why-item{display:flex;gap:18px;align-items:baseline;padding:16px 0;border-top:1px solid var(--border);}
.lc-landing .why-item:last-child{border-bottom:1px solid var(--border);}
.lc-landing .why-item i{font-style:normal;font-size:12px;font-weight:800;color:var(--gold-dk);font-variant-numeric:tabular-nums;flex:none;width:26px;}
.lc-landing .why-item h4{font-size:16.5px;font-weight:700;color:var(--ink);}
.lc-landing .why-item p{font-size:14px;color:var(--slate);line-height:1.55;margin-top:3px;}
.lc-landing .why-media{position:relative;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow-lg);}
.lc-landing .why-media video{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}
.lc-landing .why-cap{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;gap:12px;padding:16px 20px;background:linear-gradient(180deg,rgba(10,11,15,0),rgba(10,11,15,.78));}
.lc-landing .why-cap .ck{flex:none;width:34px;height:34px;border-radius:99px;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;}
.lc-landing .why-cap .ck svg{width:15px;height:15px;}
.lc-landing .why-cap b{display:block;font-size:17px;font-weight:800;color:#fff;line-height:1.1;}
.lc-landing .why-cap span{font-size:12px;color:rgba(255,255,255,.72);}
.lc-landing .why-cap u{margin-left:auto;text-decoration:none;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.65);}
/* ---------- how it works ---------- */
.lc-landing .how-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;background:#fff;border:1px solid var(--border);
border-radius:16px;padding:8px;box-shadow:var(--shadow);max-width:max-content;margin:0 auto 44px;}
.lc-landing .how-tab{display:flex;align-items:center;gap:10px;padding:13px 22px;border-radius:11px;font-size:15px;font-weight:700;
color:var(--slate-2);transition:all .18s;}
.lc-landing .how-tab svg{width:18px;height:18px;}
.lc-landing .how-tab .step-n{width:22px;height:22px;border-radius:99px;background:var(--bg-soft);color:var(--slate-2);font-size:12px;
display:flex;align-items:center;justify-content:center;font-weight:800;}
.lc-landing .how-tab:hover{color:var(--ink);background:var(--bg);}
.lc-landing .how-tab.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-gold);}
.lc-landing .how-tab.active .step-n{background:rgba(255,255,255,.25);color:#fff;}
.lc-landing .how-panel{display:grid;grid-template-columns:1.35fr 1fr;gap:48px;align-items:center;
background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:18px;box-shadow:var(--shadow-md);}
.lc-landing .how-stage{border-radius:var(--r-xl);overflow:hidden;aspect-ratio:4/3;background:var(--bg-soft);position:relative;}
.lc-landing .how-stage img, .lc-landing .how-stage video{width:100%;height:100%;object-fit:cover;}
/* in-stage product UI recreations */
.lc-landing .hiw-ui{position:absolute;inset:0;background:#F7F8FA;padding:26px 30px;display:flex;flex-direction:column;gap:0;font-size:15px;color:#1F2937;overflow:hidden;}
.lc-landing .hiw-ui img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .hiw-stepper{display:flex;align-items:center;gap:12px;background:#fff;border:1px solid var(--border-2);border-radius:14px;padding:13px 18px;margin-bottom:20px;}
.lc-landing .hiw-step{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;color:#99A1AF;white-space:nowrap;}
.lc-landing .hiw-step i{font-style:normal;width:26px;height:26px;border-radius:50%;background:#F3F4F6;color:#6A7282;display:inline-flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;}
.lc-landing .hiw-step.on{color:#1F2937;}
.lc-landing .hiw-step.on i{background:var(--gold);color:#fff;}
.lc-landing .hiw-line{flex:1;height:2px;background:#EDEEF2;}
.lc-landing .hiw-title{font-size:19px;font-weight:700;color:#1F2937;}
.lc-landing .hiw-sub{font-size:13.5px;color:var(--slate-2);margin-top:4px;}
.lc-landing .hiw-drop{margin-top:18px;border:2px dashed #D9DCE3;border-radius:14px;background:#fff;padding:16px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1 1 auto;min-height:0;}
.lc-landing .hiw-drop .ic{width:46px;height:46px;border-radius:12px;background:var(--gold-soft);color:var(--gold-deep);display:flex;align-items:center;justify-content:center;margin-bottom:5px;}
.lc-landing .hiw-drop .ic svg{width:23px;height:23px;}
.lc-landing .hiw-drop b{font-size:14.5px;color:#1F2937;}
.lc-landing .hiw-drop span{font-size:12.5px;color:#99A1AF;}
.lc-landing .hiw-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;flex:none;}
.lc-landing .hiw-count{font-size:13.5px;font-weight:600;color:var(--slate-2);}
.lc-landing .hiw-btn{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:700;background:#fff;border:1px solid var(--border);color:#374151;white-space:nowrap;}
.lc-landing .hiw-btn.gold{background:var(--gold);border-color:var(--gold);color:#fff;}
.lc-landing .hiw-thumbs{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-top:12px;flex:none;}
.lc-landing .hiw-thumbs span{aspect-ratio:4/3;border-radius:9px;overflow:hidden;display:block;}
.lc-landing .hiw-animrow{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid var(--border-2);border-radius:13px;padding:14px 16px;margin-top:12px;}
.lc-landing .hiw-animrow>img{width:84px;height:60px;border-radius:9px;flex:none;object-fit:cover;}
.lc-landing .hiw-animrow .m{flex:1;min-width:0;}
.lc-landing .hiw-animrow .m b{display:block;font-size:13.5px;color:#1F2937;}
.lc-landing .hiw-select{display:inline-flex;align-items:center;margin-top:6px;padding:6px 13px;border-radius:8px;font-size:12.5px;font-weight:600;border:1px solid var(--border);color:#99A1AF;white-space:nowrap;}
.lc-landing .hiw-select.set{border-color:var(--gold);color:var(--gold-deep);background:var(--gold-soft);}
.lc-landing .hiw-toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:#fff;border:1px solid var(--border-2);border-radius:13px;padding:12px 15px;margin-bottom:14px;}
.lc-landing .hiw-toolbar .hiw-btn{padding:8px 13px;font-size:12.5px;}
.lc-landing .hiw-toolbar b{margin-right:auto;}
.lc-landing .hiw-toolbar b{font-size:13px;color:#1F2937;white-space:nowrap;}
.lc-landing .hiw-toolbar .hiw-select{margin-top:0;}
.lc-landing .hiw-res{display:inline-flex;border-radius:9px;overflow:hidden;border:1px solid var(--border);}
.lc-landing .hiw-res i{font-style:normal;font-size:12.5px;font-weight:700;padding:6px 11px;color:#99A1AF;}
.lc-landing .hiw-res i.on{background:var(--gold);color:#fff;}
.lc-landing .hiw-preview{position:relative;border-radius:12px;overflow:hidden;flex:1;min-height:0;}
.lc-landing .hiw-preview .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;background:rgba(8,8,12,.5);border:2px solid rgba(255,255,255,.85);}
.lc-landing .hiw-preview .pl::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:14px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;}
.lc-landing .hiw-preview .tc{position:absolute;left:10px;bottom:8px;font-style:normal;font-size:10px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:6px;padding:3px 8px;}
.lc-landing .hiw-strip{display:flex;gap:9px;margin-top:12px;height:66px;}
.lc-landing .hiw-strip span{flex:1;border-radius:9px;overflow:hidden;border:2px solid transparent;}
.lc-landing .hiw-strip span.on{border-color:var(--gold);}
/* --- mini editor (step 3) --- */
.lc-landing .hiw-edwrap{padding:16px 18px;gap:10px;}
.lc-landing .hiw-edtool{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--border-2);border-radius:11px;padding:9px 12px;font-size:11.5px;}
.lc-landing .hiw-edtool .bk{color:#99A1AF;font-size:15px;}
.lc-landing .hiw-edtool b{font-weight:700;color:#1F2937;}
.lc-landing .hiw-edtool .sel{border:1px solid var(--border);border-radius:7px;padding:4px 9px;font-weight:600;color:#4B5563;}
.lc-landing .hiw-edtool .rz{background:var(--gold);color:#fff;border-radius:7px;padding:4px 9px;font-weight:800;}
.lc-landing .hiw-edtool .sp{margin-left:auto;background:var(--gold);color:#fff;border-radius:7px;padding:5px 11px;font-weight:800;}
.lc-landing .hiw-edtool .sp.light{margin-left:auto;background:#fff;border:1px solid var(--border);color:#4B5563;font-weight:700;}
.lc-landing .hiw-edtool .sp.light+.sp{margin-left:0;}
.lc-landing .hiw-edmain{display:flex;gap:10px;flex:1;min-height:0;}
.lc-landing .hiw-edmedia{width:33%;flex:none;background:#fff;border:1px solid var(--border-2);border-radius:11px;padding:10px;display:flex;flex-direction:column;min-height:0;}
.lc-landing .hiw-edmedia .mh{font-size:11px;font-weight:800;color:#1F2937;margin-bottom:8px;}
.lc-landing .hiw-edmedia .mg{display:grid;grid-template-columns:1fr 1fr;gap:6px;overflow:hidden;}
.lc-landing .hiw-edmedia .mc{position:relative;border-radius:6px;overflow:hidden;display:block;}
.lc-landing .hiw-edmedia .mc img{width:100%;height:38px;object-fit:cover;display:block;}
.lc-landing .hiw-edmedia .mc .r{position:absolute;top:3px;left:3px;background:rgba(17,24,39,.75);color:#fff;font-style:normal;font-size:6px;font-weight:800;border-radius:3px;padding:0 4px;}
.lc-landing .hiw-edmedia .mc .m{position:absolute;bottom:3px;left:3px;background:var(--gold);color:#fff;font-style:normal;font-size:6px;font-weight:800;border-radius:3px;padding:0 4px;}
.lc-landing .hiw-edright{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;}
.lc-landing .hiw-edprev{position:relative;border-radius:9px;overflow:hidden;background:#000;flex:1;min-height:0;}
.lc-landing .hiw-edprev img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .hiw-edprev .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(8,8,12,.5);border:2px solid rgba(255,255,255,.85);}
.lc-landing .hiw-edprev .pl::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.lc-landing .hiw-edprev .tc{position:absolute;left:8px;top:7px;font-style:normal;font-size:9px;font-weight:700;color:#fff;background:rgba(0,0,0,.55);border-radius:5px;padding:2px 7px;}
.lc-landing .hiw-edprev .cap{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);font-size:10px;font-weight:700;color:#fff;background:rgba(8,8,12,.6);border-radius:6px;padding:3px 10px;white-space:nowrap;}
.lc-landing .hiw-edtl{position:relative;background:#fff;border:1px solid var(--border-2);border-radius:9px;padding:7px 9px;}
.lc-landing .hiw-edtl .rl{display:flex;justify-content:space-between;font-size:7px;color:#99A1AF;border-bottom:1px solid var(--border-2);padding-bottom:3px;margin-bottom:5px;}
.lc-landing .hiw-edtl .tr{display:flex;gap:4px;margin-top:4px;}
.lc-landing .hiw-edtl .tr.text span{flex:1;display:flex;align-items:center;justify-content:center;background:rgba(201,168,76,.13);border:1px solid var(--gold-border);border-radius:5px;font-size:7px;font-weight:800;color:var(--gold-deep);height:15px;}
.lc-landing .hiw-edtl .tr.clips span{flex:1;position:relative;border-radius:5px;overflow:hidden;height:26px;border:1.5px solid transparent;}
.lc-landing .hiw-edtl .tr.clips span.on{border-color:var(--gold);}
.lc-landing .hiw-edtl .tr.clips img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .hiw-edtl .tr.clips i{position:absolute;bottom:2px;left:2px;background:var(--gold);color:#fff;font-style:normal;font-size:5px;font-weight:800;border-radius:2px;padding:0 3px;}
.lc-landing .hiw-edtl .tr.au{align-items:center;height:20px;border-radius:5px;background:rgba(201,168,76,.12);border:1px solid var(--gold-border);padding:0 8px;gap:8px;}
.lc-landing .hiw-edtl .tr.au .nm{font-size:6.5px;font-weight:700;color:#7A5E14;white-space:nowrap;flex:none;}
.lc-landing .hiw-edtl .tr.au .wv{flex:1;display:flex;align-items:center;gap:.8px;height:12px;}
.lc-landing .hiw-edtl .tr.au .wv i{flex:1;background:var(--gold-dk);border-radius:.5px;min-height:2px;}
.lc-landing .hiw-edtl .tr.au.blu{background:rgba(89,167,222,.12);border-color:rgba(89,167,222,.4);}
.lc-landing .hiw-edtl .tr.au.blu .nm{color:#3E6C8C;}
.lc-landing .hiw-edtl .tr.au.blu .wv i{background:#59A7DE;}
.lc-landing .hiw-edtl .ph{position:absolute;top:6px;bottom:6px;left:34%;width:1.5px;background:#1F2937;border-radius:99px;}
.lc-landing .hiw-edtl .ph::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);border-top:5px solid #1F2937;border-left:3.5px solid transparent;border-right:3.5px solid transparent;}
.lc-landing .hiw-exports{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:start;}
.lc-landing .hiw-exports .card{background:#fff;border:1px solid var(--border-2);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;}
.lc-landing .hiw-exports .im{position:relative;height:150px;flex:none;}
.lc-landing .hiw-exports .im img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .hiw-exports .pl{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(8,8,12,.5);border:2px solid rgba(255,255,255,.85);}
.lc-landing .hiw-exports .pl::after{content:"";position:absolute;top:50%;left:55%;transform:translate(-50%,-50%);border-left:10px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent;}
.lc-landing .hiw-exports .bd{padding:13px 15px;}
.lc-landing .hiw-exports .bd b{display:block;font-size:13.5px;color:#1F2937;}
.lc-landing .hiw-exports .bd span{font-size:12.5px;color:#99A1AF;}
.lc-landing .hiw-exports .chips{display:flex;gap:7px;margin-top:9px;}
.lc-landing .hiw-exports .chips i{font-style:normal;font-size:11px;font-weight:700;padding:4px 11px;border-radius:99px;background:#F3F4F6;color:#6A7282;}
.lc-landing .hiw-exports .chips i.g{background:var(--gold-soft);color:var(--gold-deep);}
.lc-landing .how-text{padding:18px 40px 18px 18px;}
.lc-landing .how-text .tag{margin-bottom:18px;}
.lc-landing .how-text h3{margin-bottom:14px;}
.lc-landing .how-text p{font-size:16.5px;color:var(--slate);line-height:1.6;}
.lc-landing .how-list{margin-top:22px;display:flex;flex-direction:column;gap:12px;}
.lc-landing .how-list li{display:flex;gap:11px;align-items:flex-start;font-size:15px;color:var(--ink-3);font-weight:500;list-style:none;}
.lc-landing .how-list svg{width:20px;height:20px;color:var(--accent-dk);flex:none;margin-top:1px;}
.lc-landing .how-panel.fade{animation:fadeUp .4s ease;}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
/* ---------- gallery ---------- */
.lc-landing .gal-filter{display:flex;gap:8px;justify-content:center;margin:0 auto 38px;flex-wrap:wrap;}
.lc-landing .gal-chip{padding:10px 20px;border-radius:99px;font-size:14px;font-weight:700;color:var(--slate-2);
border:1px solid var(--border);background:#fff;transition:all .16s;}
.lc-landing .gal-chip:hover{border-color:var(--muted-2);color:var(--ink);}
.lc-landing .gal-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);}
.lc-landing .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.lc-landing .gal-card{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:16/10;background:#0b0d12;
box-shadow:var(--shadow);cursor:pointer;transition:transform .2s,box-shadow .2s;}
.lc-landing .gal-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.lc-landing .gal-card img, .lc-landing .gal-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lc-landing .gal-card video{opacity:0;transition:opacity .4s;}
.lc-landing .gal-card.playing video{opacity:1;}
.lc-landing .gal-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 45%,rgba(0,0,0,.6) 100%);z-index:2;}
.lc-landing .gal-meta{position:absolute;z-index:3;left:16px;bottom:14px;color:#fff;}
.lc-landing .gal-meta b{display:block;font-size:16px;font-weight:700;}
.lc-landing .gal-meta span{font-size:12.5px;color:rgba(255,255,255,.72);}
.lc-landing .gal-play{position:absolute;z-index:3;top:14px;right:14px;width:38px;height:38px;border-radius:99px;
background:rgba(15,17,23,.5);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;color:#fff;transition:background .2s;}
.lc-landing .gal-card:hover .gal-play{background:var(--accent);}
.lc-landing .gal-play svg{width:16px;height:16px;}
.lc-landing .gal-badge{position:absolute;z-index:3;top:14px;left:14px;padding:5px 11px;border-radius:99px;font-size:11.5px;font-weight:700;
background:rgba(255,255,255,.92);color:var(--ink);letter-spacing:.02em;}
/* ---------- comparison ---------- */
.lc-landing .cmp{max-width:920px;margin:0 auto;border:1px solid var(--border);border-radius:var(--r-2xl);overflow:hidden;
box-shadow:var(--shadow-md);background:#fff;}
.lc-landing .cmp-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;}
.lc-landing .cmp-row+.cmp-row{border-top:1px solid var(--border-2);}
.lc-landing .cmp-row.head{background:var(--bg);}
.lc-landing .cmp-cell{padding:18px 20px;font-size:14.5px;display:flex;align-items:center;gap:9px;}
.lc-landing .cmp-cell.feature{font-weight:600;color:var(--ink-2);}
.lc-landing .cmp-cell.center{justify-content:center;text-align:center;}
.lc-landing .cmp-head-lc{flex-direction:column;gap:4px;align-items:center;justify-content:center;background:var(--gold-soft);}
.lc-landing .cmp-head-lc b{font-size:16px;font-weight:800;color:var(--gold-deep);}
.lc-landing .cmp-head-lc span{font-size:11px;color:var(--gold-deep);text-transform:uppercase;letter-spacing:.1em;font-weight:700;}
.lc-landing .cmp-head h4{font-size:15px;font-weight:800;color:var(--ink);}
.lc-landing .cmp-yes{color:#1F8A5B;}.lc-landing .cmp-no{color:#C2C7D0;}
.lc-landing .cmp-yes svg, .lc-landing .cmp-no svg{width:20px;height:20px;}
.lc-landing .cmp-txt{font-size:13.5px;font-weight:600;}
.lc-landing .cmp-txt.good{color:#1F8A5B;}.lc-landing .cmp-txt.bad{color:var(--slate-2);}
.lc-landing .cmp-col-lc{background:rgba(201,168,76,.05);}
/* ---------- persona switcher ---------- */
.lc-landing .ps-toggle{display:flex;gap:6px;justify-content:center;background:#fff;border:1px solid var(--border);border-radius:99px;padding:6px;box-shadow:var(--shadow);max-width:max-content;margin:0 auto;}
.lc-landing .ps-toggle button{border:0;background:none;font:inherit;font-size:15px;font-weight:700;color:var(--slate);padding:11px 26px;border-radius:99px;cursor:pointer;transition:background .2s,color .2s;}
.lc-landing .ps-toggle button.on{background:var(--gold);color:#fff;box-shadow:var(--shadow-gold);}
.lc-landing .ps-toggle button:hover:not(.on){color:var(--ink);}
@media(max-width:560px){
/* max-width:max-content let the pill size to its three full-padding
buttons regardless of viewport, so on a phone it was wider than the
screen and got clipped/pushed off both edges. Stretch it to the
container instead and let each button share the width equally, with
tighter padding/type so "Photographers" still fits on one line. */
.lc-landing .ps-toggle{max-width:100%;width:100%;padding:4px;gap:4px;}
.lc-landing .ps-toggle button{flex:1;padding:10px 6px;font-size:12.5px;white-space:nowrap;}
}
.lc-landing .ps-calc{max-width:920px;margin:22px auto 0;border:1px solid var(--border);border-radius:var(--r-2xl);background:#fff;box-shadow:var(--shadow-md);padding:24px 26px;}
.lc-landing .ps-calc-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep);}
.lc-landing .ps-calc-head svg{width:18px;height:18px;}
.lc-landing .ps-calc-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;margin-top:20px;align-items:center;}
.lc-landing .ps-controls{display:flex;flex-direction:column;gap:22px;}
.lc-landing .ps-slider .l{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--ink-2);margin-bottom:10px;}
.lc-landing .ps-slider .l b{color:var(--gold-deep);font-weight:800;}
.lc-landing .ps-slider input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:6px;border-radius:99px;background:var(--gold-soft);outline:none;}
.lc-landing .ps-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:var(--gold);cursor:pointer;box-shadow:0 2px 6px rgba(201,168,76,.55);}
.lc-landing .ps-slider input[type=range]::-moz-range-thumb{width:20px;height:20px;border:0;border-radius:50%;background:var(--gold);cursor:pointer;}
.lc-landing .ps-results{background:var(--gold-soft);border:1px solid var(--gold-border);border-radius:16px;padding:22px;}
.lc-landing .ps-big{text-align:center;}
.lc-landing .ps-big+.ps-big{margin-top:14px;}
.lc-landing .ps-big b{display:block;font-size:40px;font-weight:800;color:var(--gold-deep);line-height:1;letter-spacing:-.02em;}
.lc-landing .ps-big span{display:block;font-size:13px;font-weight:600;color:var(--ink-3);margin-top:5px;}
.lc-landing .ps-smalls{display:flex;gap:10px;margin-top:18px;padding-top:16px;border-top:1px solid var(--gold-border);}
.lc-landing .ps-small{flex:1;text-align:center;}
.lc-landing .ps-small span{display:block;font-size:11.5px;color:var(--slate-2);}
.lc-landing .ps-small b{display:block;font-size:16px;font-weight:800;color:var(--ink);margin-top:3px;}
.lc-landing .ps-disclaimer{margin-top:16px;font-size:12px;color:var(--slate-2);text-align:center;}
@media(max-width:760px){.lc-landing .ps-calc-grid{grid-template-columns:1fr;gap:22px;}}
/* ---------- testimonials ---------- */
.lc-landing .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.lc-landing .tst{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:30px;box-shadow:var(--shadow);
display:flex;flex-direction:column;}
.lc-landing .tst-stars{display:flex;gap:3px;color:var(--gold);margin-bottom:16px;}
.lc-landing .tst-stars svg{width:18px;height:18px;}
.lc-landing .tst-quote{font-size:16px;line-height:1.6;color:var(--ink-2);font-weight:500;flex:1;}
.lc-landing .tst-by{margin-top:22px;display:flex;align-items:center;gap:13px;}
.lc-landing .tst-by image-slot, .lc-landing .tst-by .tst-av{width:46px;height:46px;border-radius:99px;flex:none;}
.lc-landing .tst-by b{display:block;font-size:14.5px;font-weight:700;color:var(--ink);}
.lc-landing .tst-by span{font-size:13px;color:var(--slate-2);}
.lc-landing .tst-feat{grid-column:span 3;display:grid;grid-template-columns:1.1fr 1fr;gap:0;border-radius:var(--r-2xl);overflow:hidden;
border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff;}
.lc-landing .tst-feat-media{position:relative;min-height:340px;background:#0b0d12;}
.lc-landing .tst-feat-media img, .lc-landing .tst-feat-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lc-landing .tst-feat-body{padding:48px;display:flex;flex-direction:column;justify-content:center;}
.lc-landing .tst-feat-body .tst-quote{font-size:23px;font-weight:600;line-height:1.45;color:var(--ink);}
/* ---------- pricing ---------- */
.lc-landing .pr-toggle{display:flex;align-items:center;gap:0;background:#fff;border:1px solid var(--border);border-radius:99px;
padding:5px;box-shadow:var(--shadow);max-width:max-content;margin:0 auto 14px;}
.lc-landing .pr-toggle button{padding:10px 22px;border-radius:99px;font-size:14px;font-weight:700;color:var(--slate-2);transition:all .16s;}
.lc-landing .pr-toggle button.active{background:var(--accent);color:#fff;box-shadow:var(--shadow-gold);}
.lc-landing .pr-save{display:block;text-align:center;font-size:13px;color:var(--gold-deep);font-weight:700;margin-bottom:44px;}
.lc-landing .pr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:start;}
.lc-landing .pr-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);padding:30px 26px;box-shadow:var(--shadow);
display:flex;flex-direction:column;position:relative;transition:transform .2s,box-shadow .2s;}
.lc-landing .pr-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.lc-landing .pr-card.popular{border:2px solid var(--gold);box-shadow:var(--shadow-md);}
.lc-landing .pr-pop{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--dark);color:#fff;
font-size:12px;font-weight:700;padding:6px 16px;border-radius:99px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.lc-landing .pr-pop svg{width:13px;height:13px;color:var(--gold-lt);}
.lc-landing .pr-best{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--gold);color:#fff;
font-size:12px;font-weight:700;padding:6px 16px;border-radius:99px;display:flex;align-items:center;gap:6px;white-space:nowrap;}
.lc-landing .pr-best svg{width:13px;height:13px;}
.lc-landing .pr-name{display:flex;align-items:center;gap:10px;font-size:19px;font-weight:800;color:var(--ink);}
.lc-landing .pr-name .ficon{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--gold-lt) 0%,var(--gold) 55%,var(--gold-dk) 100%);
border:none;color:#fff;box-shadow:0 6px 14px -4px rgba(168,137,46,.55),inset 0 1px 0 rgba(255,255,255,.35);}
.lc-landing .pr-name .ficon svg{width:22px;height:22px;}
.lc-landing .pr-card.popular .pr-name .ficon{background:linear-gradient(135deg,#2a2f3a 0%,var(--dark) 100%);box-shadow:0 6px 14px -4px rgba(15,17,23,.45),inset 0 1px 0 rgba(255,255,255,.15);}
.lc-landing .pr-for{margin-top:6px;font-size:13.5px;color:var(--slate-2);min-height:38px;}
.lc-landing .pr-price{margin:20px 0 4px;display:flex;align-items:baseline;gap:6px;}
.lc-landing .pr-amt{font-size:42px;font-weight:800;color:var(--ink);letter-spacing:-.02em;}
.lc-landing .pr-per{font-size:14px;color:var(--slate-2);font-weight:500;}
.lc-landing .pr-credits{font-size:13.5px;color:var(--slate-2);padding-bottom:20px;border-bottom:1px solid var(--border-2);margin-bottom:20px;}
.lc-landing .pr-credits b{color:var(--ink-2);font-weight:700;}
.lc-landing .pr-list{list-style:none;display:flex;flex-direction:column;gap:12px;flex:1;margin-bottom:24px;}
.lc-landing .pr-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--ink-3);}
.lc-landing .pr-list svg{width:18px;height:18px;color:var(--accent-dk);flex:none;margin-top:1px;}
.lc-landing .pr-note{font-size:12.5px;color:var(--muted);text-align:center;margin-top:30px;}
/* ---------- faq ---------- */
.lc-landing .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:980px;margin:0 auto;}
.lc-landing .faq{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xs);
transition:box-shadow .2s,border-color .2s;height:max-content;}
.lc-landing .faq.open{box-shadow:var(--shadow);border-color:var(--gold-border);}
.lc-landing .faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 24px;text-align:left;
font-size:16px;font-weight:700;color:var(--ink);}
.lc-landing .faq-ic{width:30px;height:30px;border-radius:8px;background:var(--gold-soft);color:var(--gold-deep);flex:none;
display:flex;align-items:center;justify-content:center;transition:transform .25s,background .2s;}
.lc-landing .faq-ic svg{width:17px;height:17px;}
.lc-landing .faq.open .faq-ic{transform:rotate(45deg);background:var(--accent);color:#fff;}
.lc-landing .faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.lc-landing .faq-a-in{padding:0 24px 22px;font-size:15px;color:var(--slate);line-height:1.6;}
/* ---------- cta band (v2: split copy + live clip) ---------- */
.lc-landing .cta2{position:relative;overflow:hidden;border-radius:var(--r-2xl);background:var(--dark);color:#fff;
display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:24px;
padding:64px 64px;box-shadow:var(--shadow-lg);}
.lc-landing .cta2::before{content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(90% 130% at 100% 50%,rgba(201,168,76,.18),transparent 55%);}
.lc-landing .cta2-copy{position:relative;}
.lc-landing .cta2-eyebrow{background:rgba(228,206,134,.16);border-color:rgba(228,206,134,.4);color:var(--gold-lt);}
.lc-landing .cta2-copy h2{color:#fff;margin:20px 0 16px;max-width:16ch;}
.lc-landing .cta2-em{color:var(--gold-lt);}
.lc-landing .cta2-copy>p{color:rgba(255,255,255,.78);max-width:44ch;margin-bottom:30px;font-size:18px;line-height:1.6;}
.lc-landing .cta2-row{display:flex;gap:14px;flex-wrap:wrap;}
.lc-landing .cta2-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.25);}
.lc-landing .cta2-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);}
.lc-landing .cta2-trust{list-style:none;display:flex;gap:22px;flex-wrap:wrap;margin-top:26px;padding:0;}
.lc-landing .cta2-trust li{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.65);}
.lc-landing .cta2-trust svg{width:15px;height:15px;color:var(--gold-lt);}
.lc-landing .cta2-media{position:relative;border-radius:18px;overflow:hidden;
border:1px solid rgba(228,206,134,.35);box-shadow:0 0 44px rgba(201,168,76,.22),0 30px 60px -24px rgba(0,0,0,.7);}
.lc-landing .cta2-media video{width:100%;display:block;aspect-ratio:16/10;object-fit:cover;}
.lc-landing .cta2-flag{position:absolute;left:14px;bottom:12px;padding:7px 14px;border-radius:8px;font-size:12.5px;font-weight:700;
letter-spacing:.04em;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);color:#fff;border:1px solid rgba(255,255,255,.16);}
@media(max-width:960px){
.lc-landing .cta2{grid-template-columns:1fr;padding:48px 32px;gap:36px;}
.lc-landing .cta2-copy h2, .lc-landing .cta2-copy>p{max-width:none;}
}
/* ---------- contact ---------- */
.lc-landing .contact-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start;}
.lc-landing .contact-info h3{margin-bottom:14px;}
.lc-landing .contact-info>p{font-size:16px;color:var(--slate);line-height:1.6;max-width:42ch;}
.lc-landing .contact-cards{margin-top:28px;display:flex;flex-direction:column;gap:14px;}
.lc-landing .contact-c{display:flex;align-items:center;gap:15px;padding:18px;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-warm);}
.lc-landing .contact-c .ficon{width:46px;height:46px;flex:none;}
.lc-landing .contact-c b{display:block;font-size:15px;font-weight:700;color:var(--ink);}
.lc-landing .contact-c span{font-size:14px;color:var(--slate-2);}
.lc-landing .form{background:#fff;border:1px solid var(--border);border-radius:var(--r-2xl);padding:36px;box-shadow:var(--shadow-md);}
.lc-landing .field{margin-bottom:20px;}
.lc-landing .field label{display:block;font-size:14px;font-weight:700;color:var(--ink-2);margin-bottom:8px;}
.lc-landing .field input, .lc-landing .field textarea{width:100%;border:1px solid var(--border);border-radius:11px;padding:14px 16px;font-size:15px;
font-family:inherit;color:var(--ink);background:var(--white);transition:border-color .15s,box-shadow .15s;}
.lc-landing .field input:focus, .lc-landing .field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.lc-landing .field textarea{resize:vertical;min-height:120px;}
.lc-landing .form-note{text-align:center;font-size:13px;color:var(--muted);margin-top:16px;}
/* ---------- footer ---------- */
.lc-landing .footer{background:var(--white);border-top:1px solid var(--border);padding:64px 0 36px;}
.lc-landing .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:32px;}
.lc-landing .footer-brand img{height:30px;margin-bottom:18px;}
.lc-landing .footer-brand p{font-size:14.5px;color:var(--slate-2);max-width:34ch;line-height:1.6;}
.lc-landing .footer-soc{margin-top:20px;display:flex;gap:10px;}
.lc-landing .footer-soc a{width:38px;height:38px;border-radius:10px;background:var(--bg-soft);display:flex;align-items:center;justify-content:center;color:var(--slate-2);transition:background .15s,color .15s;}
.lc-landing .footer-soc a:hover{background:var(--gold-soft);color:var(--gold-deep);}
.lc-landing .footer-soc svg{width:18px;height:18px;}
.lc-landing .footer-col h5{font-size:13px;font-weight:800;color:var(--ink);text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px;}
.lc-landing .footer-col a{display:block;font-size:14.5px;color:var(--slate-2);padding:6px 0;transition:color .15s;}
.lc-landing .footer-col a:hover{color:var(--gold-deep);}
.lc-landing .footer-bot{margin-top:48px;padding-top:24px;border-top:1px solid var(--border);display:flex;justify-content:space-between;
align-items:center;font-size:13.5px;color:var(--muted);flex-wrap:wrap;gap:10px;}
.lc-landing .footer-bot a{color:var(--slate-2);}
/* ---------- reveal animation ---------- */
.lc-landing .reveal{opacity:0;transform:translateY(22px);transition:opacity .3s ease,transform .3s ease;}
.lc-landing .reveal.in{opacity:1;transform:none;}
/* ============================================================
PRODUCT UI, "Two ways to create"
============================================================ */
.lc-landing .prod{background:var(--dark);color:#fff;position:relative;overflow:hidden;}
.lc-landing .prod::before{content:"";position:absolute;inset:0;
background:radial-gradient(90% 70% at 80% 0%,rgba(201,168,76,.16),transparent 55%);}
.lc-landing .prod>*{position:relative;z-index:1;}
.lc-landing .prod .eyebrow{background:rgba(228,206,134,.14);border-color:rgba(228,206,134,.34);color:var(--gold-lt);}
.lc-landing .prod .h2{color:#fff;}
.lc-landing .prod .lede{color:rgba(255,255,255,.74);}
/* alternating rows */
.lc-landing .prod-row{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;max-width:1120px;margin:0 auto;}
.lc-landing .prod-row+.prod-row{margin-top:40px;}
.lc-landing .prod-row.flip .prod-copy{order:2;}
.lc-landing .prod-row.flip .prod-visual{order:1;}
.lc-landing .prod-badge{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:99px;font-size:12.5px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;}
.lc-landing .prod-badge svg{width:14px;height:14px;}
.lc-landing .prod-badge.fast{background:rgba(228,206,134,.16);border:1px solid rgba(228,206,134,.4);color:var(--gold-lt);}
.lc-landing .prod-badge.ctrl{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;}
.lc-landing .prod-copy h3{font-size:clamp(26px,2.6vw,34px);font-weight:800;color:#fff;letter-spacing:-.02em;margin:18px 0 14px;line-height:1.12;}
.lc-landing .prod-copy .step-link{color:var(--gold-lt);font-weight:700;}
.lc-landing .prod-copy>p{font-size:16.5px;color:rgba(255,255,255,.74);line-height:1.6;}
.lc-landing .prod-list{list-style:none;margin-top:22px;display:flex;flex-direction:column;gap:13px;}
.lc-landing .prod-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:rgba(255,255,255,.88);font-weight:500;}
.lc-landing .prod-list svg{width:20px;height:20px;color:var(--gold-lt);flex:none;margin-top:1px;}
.lc-landing .prod-meta{margin-top:24px;display:flex;gap:26px;flex-wrap:wrap;}
.lc-landing .prod-meta .m b{display:block;font-size:22px;font-weight:800;color:#fff;line-height:1;}
.lc-landing .prod-meta .m span{font-size:12.5px;color:rgba(255,255,255,.55);margin-top:5px;display:block;}
/* browser frame, screenshot shown WHOLE, no crop */
.lc-landing .prod-frame{border-radius:13px;overflow:hidden;background:#0E1118;
box-shadow:0 36px 90px -28px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.09);}
.lc-landing .prod-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:#1B1F2A;border-bottom:1px solid rgba(255,255,255,.07);}
.lc-landing .prod-dot{width:11px;height:11px;border-radius:99px;}
.lc-landing .prod-bar .u{margin-left:12px;font-size:12px;color:rgba(255,255,255,.5);font-weight:500;
background:rgba(255,255,255,.06);padding:5px 13px;border-radius:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lc-landing .prod-bar .tab{margin-left:auto;font-size:11.5px;font-weight:700;color:var(--gold-lt);background:rgba(228,206,134,.14);
border:1px solid rgba(228,206,134,.3);padding:5px 11px;border-radius:6px;white-space:nowrap;}
.lc-landing .prod-screen{background:#0E1118;display:flex;}
.lc-landing .prod-screen img{width:100%;height:auto;display:block;}
/* populated mini-editor in the prod frame */
.lc-landing .ped{background:#fff;font-size:10px;color:var(--ink);flex:1;}
.lc-landing .ped-tools{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--border);font-size:9.5px;}
.lc-landing .ped-tools b{font-weight:700;}
.lc-landing .ped-tools .pill{border:1px solid var(--border);border-radius:6px;padding:4px 8px;font-weight:600;color:var(--ink-3);}
.lc-landing .ped-tools .gold{background:var(--gold);color:#fff;border:0;font-weight:800;}
.lc-landing .ped-tools .right{margin-left:auto;}
.lc-landing .ped-body{display:flex;gap:9px;padding:9px;}
.lc-landing .ped-mediacol{width:96px;flex:none;}
.lc-landing .ped-mediacol h6{font-size:9.5px;font-weight:800;margin:0 0 6px;}
.lc-landing .ped-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:5px;}
.lc-landing .ped-thumbs span{position:relative;overflow:hidden;display:block;border-radius:4px;}
.lc-landing .ped-thumbs img{width:100%;height:30px;object-fit:cover;display:block;}
.lc-landing .ped-thumbs i{position:absolute;bottom:2px;left:2px;background:var(--gold);color:#fff;font-style:normal;font-size:5px;font-weight:800;border-radius:2px;padding:0 3px;}
.lc-landing .ped-main{flex:1;min-width:0;}
.lc-landing .ped-preview{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;border-radius:6px;}
.lc-landing .ped-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .ped-preview .cap{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);background:rgba(8,8,12,.62);color:#fff;font-size:7.5px;font-weight:700;padding:3px 9px;border-radius:4px;white-space:nowrap;}
.lc-landing .ped-tl{position:relative;margin-top:7px;}
.lc-landing .ped-ruler{display:flex;justify-content:space-between;font-size:6px;color:var(--slate-2);border-bottom:1px solid var(--border);padding-bottom:2px;}
.lc-landing .ped-row{display:flex;gap:3px;margin-top:4px;}
.lc-landing .ped-txt{flex:1;display:inline-flex;align-items:center;justify-content:center;background:rgba(201,168,76,.13);border:1px solid var(--gold-border);border-radius:4px;font-size:6.5px;font-weight:700;color:var(--gold-deep);height:15px;}
.lc-landing .ped-clip{flex:1;position:relative;overflow:hidden;height:26px;border-radius:4px;}
.lc-landing .ped-clip img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .ped-clip i{position:absolute;bottom:2px;left:2px;background:var(--gold);color:#fff;font-style:normal;font-size:5px;font-weight:800;border-radius:2px;padding:0 3px;}
.lc-landing .ped-audio{margin-top:4px;height:24px;border-radius:4px;padding:2px 7px;box-sizing:border-box;}
.lc-landing .ped-audio.vo{background:rgba(201,168,76,.15);border:1px solid var(--gold-border);}
.lc-landing .ped-audio.mu{background:rgba(89,167,222,.13);border:1px solid rgba(89,167,222,.5);}
.lc-landing .ped-audio .nm{font-size:5.5px;font-weight:700;color:#3F4753;}
.lc-landing .ped-audio .wv{display:flex;align-items:center;gap:1px;height:10px;margin-top:1px;}
.lc-landing .ped-audio .wv i{flex:1;border-radius:1px;min-height:2px;height:calc(var(--h) * 1%);}
.lc-landing .ped-audio.vo .wv i{background:var(--gold-dk);}
.lc-landing .ped-audio.mu .wv i{background:#59A7DE;}
.lc-landing .ped-ph{position:absolute;top:8px;bottom:0;left:34%;width:1.5px;background:var(--ink);border-radius:99px;}
.lc-landing .ped-ph::before{content:"";position:absolute;top:-4px;left:50%;transform:translateX(-50%);border-top:5px solid var(--ink);border-left:3.5px solid transparent;border-right:3.5px solid transparent;}
/* ---------- Create Video modal recreation ---------- */
.lc-landing .cv-demo{flex-direction:column;background:#fff;padding:18px 20px 20px;gap:10px;font-size:12px;color:#1F2937;display:flex;}
.lc-landing .cv-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:12px;border-bottom:1px solid var(--border-2);}
.lc-landing .cv-head b{display:block;font-size:15px;font-weight:700;color:#1F2937;}
.lc-landing .cv-head span{display:block;font-size:11px;color:#99A1AF;margin-top:2px;}
.lc-landing .cv-head i{font-style:normal;font-size:16px;color:#99A1AF;line-height:1;}
.lc-landing .cv-label{font-size:9.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#99A1AF;display:flex;align-items:baseline;gap:6px;margin-top:2px;}
.lc-landing .cv-label em{font-style:normal;font-weight:600;letter-spacing:.02em;text-transform:none;color:#B9BFC9;}
.lc-landing .cv-label u{margin-left:auto;text-decoration:none;font-weight:700;letter-spacing:.02em;text-transform:none;color:#6A7282;}
.lc-landing .cv-types{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lc-landing .cv-type{position:relative;aspect-ratio:16/8.4;border-radius:12px;overflow:hidden;border:2px solid transparent;}
/* img alongside video: ProductPage swaps these clips for their still
frames on mobile, and either stylesheet can be the last one loaded
depending on the order the visitor browses the site. */
.lc-landing .cv-type video, .lc-landing .cv-type>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.lc-landing .cv-type .vcrop{position:absolute;inset:0;background:#0B0D12;display:flex;align-items:center;justify-content:center;}
.lc-landing .cv-type .vcrop video, .lc-landing .cv-type .vcrop img{position:static;height:100%;width:auto;aspect-ratio:9/16;object-fit:cover;border-radius:8px;box-shadow:0 0 0 1.5px rgba(255,255,255,.28),0 0 24px rgba(0,0,0,.55);}
.lc-landing .cv-type .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,12,15,.06) 30%,rgba(10,12,15,.78));}
.lc-landing .cv-type .shade.pink{background:linear-gradient(180deg,rgba(247,212,228,.5),rgba(120,85,99,.72));}
.lc-landing .cv-type.on{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 6px 18px -6px rgba(201,168,76,.5);}
.lc-landing .cv-type .check{position:absolute;top:9px;right:9px;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#fff;display:flex;align-items:center;justify-content:center;}
.lc-landing .cv-type .check svg{width:11px;height:11px;}
.lc-landing .cv-type .soon{position:absolute;top:9px;right:9px;background:var(--gold);color:#fff;font-size:8.5px;font-weight:800;padding:3px 9px;border-radius:99px;}
.lc-landing .cv-type .tt{position:absolute;left:12px;bottom:10px;}
.lc-landing .cv-type .tt b{display:block;font-size:12.5px;font-weight:800;color:#fff;}
.lc-landing .cv-type .tt span{display:block;font-size:9.5px;color:rgba(255,255,255,.75);margin-top:1px;}
/* The .cv-demo mockup goes full-width once .prod-row stacks, so on a phone
each .cv-type card is only ~78px tall while these labels kept their
desktop size AND the inherited 1.5 body line-height — the caption block
covered over half the video preview behind it. Tighten the leading (the
bigger win of the two) and ramp the sizes down toward the 10.5/8px the
product page already uses for this same mockup, reaching the desktop
values again at 640px. Must sit after the base rules above: equal
specificity, so source order decides. */
@media(max-width:640px){
.lc-landing .cv-type .tt{left:9px;bottom:7px;}
.lc-landing .cv-type .tt b{font-size:clamp(10.5px,7.65px + 0.76vw,12.5px);line-height:1.25;}
.lc-landing .cv-type .tt span{font-size:clamp(8px,5.9px + 0.57vw,9.5px);line-height:1.25;margin-top:0;}
}
.lc-landing .cv-clips{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;}
.lc-landing .cv-clip{position:relative;display:block;}
.lc-landing .cv-clip img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px;border:1px solid var(--border);display:block;}
.lc-landing .cv-clip i{position:absolute;top:4px;left:4px;font-style:normal;width:14px;height:14px;border-radius:4px;background:rgba(17,24,39,.75);color:#fff;font-size:8px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.lc-landing .cv-clip u{display:block;text-decoration:none;text-align:center;font-size:8px;font-weight:700;color:#6A7282;margin-top:4px;}
.lc-landing .cv-set{display:flex;flex-direction:column;gap:5px;flex:1;}
.lc-landing .cv-set .k{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#4B5563;}
.lc-landing .cv-set .k svg{width:11px;height:11px;color:#6A7282;}
.lc-landing .cv-set .v{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--border);border-radius:8px;padding:8px 11px;font-size:11px;font-weight:600;color:#1F2937;background:#fff;}
.lc-landing .cv-set .v b{color:#99A1AF;font-weight:600;}
.lc-landing .cv-set-row{display:flex;gap:12px;}
.lc-landing .cv-note{font-size:9.5px;color:#99A1AF;line-height:1.45;border-top:1px solid var(--border-2);padding-top:10px;}
.lc-landing .cv-note b{color:#6A7282;}
.lc-landing .cv-btn{background:var(--gold);color:#fff;text-align:center;font-size:13px;font-weight:800;border-radius:10px;padding:12px;box-shadow:0 6px 16px -6px rgba(201,168,76,.6);}
/* animation: modal contents assemble on scroll
Scoped to #cvDemo (the landing instance) rather than any .cv-demo. Only
that instance carries the id home.js looks for, the per-child --i stagger
index, and the data-cvvideo hooks. ProductPage renders a second, STATIC
.cv-demo with none of those — so while these rules hid its children at
opacity:0, nothing was ever going to add .play and reveal them again.
Loading order made it intermittent: reaching /product directly never
loads home.css so the panel looked fine, but arriving from the home page
left home.css in the document (loadLandingCss never unloads) and the
panel rendered as a tall blank white card, permanently. */
@media (prefers-reduced-motion: no-preference){
.lc-landing #cvDemo .cv-label, .lc-landing #cvDemo .cv-type, .lc-landing #cvDemo .cv-clip, .lc-landing #cvDemo .cv-set, .lc-landing #cvDemo .cv-set-row, .lc-landing #cvDemo .cv-note, .lc-landing #cvDemo .cv-btn{
opacity:0;transform:translateY(14px);}
.lc-landing #cvDemo.play .cv-label, .lc-landing #cvDemo.play .cv-type, .lc-landing #cvDemo.play .cv-clip, .lc-landing #cvDemo.play .cv-set, .lc-landing #cvDemo.play .cv-set-row, .lc-landing #cvDemo.play .cv-note, .lc-landing #cvDemo.play .cv-btn{
animation:cvUp .45s cubic-bezier(.2,.8,.3,1) forwards;animation-delay:calc(.1s + var(--i) * .09s);}
.lc-landing #cvDemo.play .cv-type.on{animation:cvUp .45s cubic-bezier(.2,.8,.3,1) forwards,cvPulse 1.6s ease .9s;}
.lc-landing #cvDemo.play .cv-btn{animation:cvUp .45s cubic-bezier(.2,.8,.3,1) forwards,cvGlow 2.4s ease 1.6s;}
@keyframes cvUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
@keyframes cvPulse{0%,100%{box-shadow:0 0 0 1px var(--gold),0 6px 18px -6px rgba(201,168,76,.5);}45%{box-shadow:0 0 0 3px var(--gold),0 0 26px rgba(201,168,76,.65);}}
@keyframes cvGlow{0%,100%{box-shadow:0 6px 16px -6px rgba(201,168,76,.6);}50%{box-shadow:0 0 28px rgba(201,168,76,.8);}}
}
@media(max-width:560px){
.lc-landing .cv-set-row{flex-direction:column;}
.lc-landing .cv-clips{grid-template-columns:repeat(3,1fr);}
}
/* centered movement-picker showcase */
.lc-landing .prod-center{max-width:780px;margin:48px auto 0;text-align:center;}
.lc-landing .prod-center .prod-frame{margin-bottom:18px;}
.lc-landing .prod-center .cap{font-size:14.5px;color:rgba(255,255,255,.6);}
.lc-landing .prod-center .cap b{color:#fff;font-weight:700;}
/* ============================================================
ANIMATIONS & EFFECTS, choose the motion (light, comes first)
============================================================ */
.lc-landing .anim-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:52px;align-items:center;max-width:1320px;margin:48px auto 0;}
.lc-landing .anim-frame{border-radius:13px;overflow:hidden;background:#fff;border:1px solid var(--border);
box-shadow:var(--shadow-lg);}
.lc-landing .anim-bar{display:flex;align-items:center;gap:8px;padding:12px 15px;background:var(--bg-soft);border-bottom:1px solid var(--border);}
.lc-landing .anim-bar .d{width:11px;height:11px;border-radius:99px;background:#D4D7DE;}
.lc-landing .anim-bar .u{margin-left:12px;font-size:12px;color:var(--slate-2);font-weight:600;}
.lc-landing .anim-frame>img{width:100%;height:auto;display:block;}
.lc-landing .anim-modal{padding:22px 24px 26px;}
.lc-landing .anim-modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;}
.lc-landing .anim-modal-head h4{font-size:17px;font-weight:700;color:var(--ink);}
.lc-landing .anim-modal-head p{font-size:12.5px;color:var(--slate-2);margin-top:3px;}
.lc-landing .anim-tabs{display:flex;gap:8px;}
.lc-landing .anim-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:99px;font-size:12.5px;font-weight:600;color:var(--slate-2);border:1px solid var(--border);}
.lc-landing .anim-tab b{background:var(--bg-soft);border-radius:99px;padding:1px 8px;font-size:11px;}
.lc-landing .anim-tab.on{background:var(--gold-soft);border-color:var(--gold-border);color:var(--gold-deep);}
.lc-landing .anim-tab.on b{background:rgba(201,168,76,.22);color:var(--gold-deep);}
.lc-landing .anim-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:20px;}
.lc-landing .anim-card{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#fff;transition:border-color .15s,box-shadow .2s,transform .15s;}
.lc-landing .anim-card:hover{border-color:var(--gold);box-shadow:0 8px 20px -8px rgba(16,24,40,.18);transform:translateY(-2px);}
.lc-landing .anim-card .th{aspect-ratio:16/11;overflow:hidden;position:relative;}
.lc-landing .anim-card .th::after{content:"";position:absolute;top:7px;left:7px;width:20px;height:20px;border-radius:6px;background:rgba(255,255,255,.85) url('data:image/svg+xml;utf8,') center/10px no-repeat;}
.lc-landing .anim-card .th video{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .anim-cards[data-pane="fx"]{grid-template-columns:repeat(5,1fr);margin-top:12px;}
.lc-landing .anim-cards[data-pane="fx"] .anim-card{border:2px solid var(--gold-border);box-shadow:0 0 0 1px rgba(201,168,76,.08),0 6px 16px -8px rgba(201,168,76,.35);}
.lc-landing .anim-cards[data-pane="fx"] .anim-card:hover{border-color:var(--gold);box-shadow:0 0 22px rgba(201,168,76,.35);}
.lc-landing .anim-cards[data-pane="fx"] .anim-card b{color:var(--gold-deep);}
.lc-landing .anim-card .th img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .anim-card b{display:block;font-size:12px;font-weight:700;color:var(--ink);padding:8px 10px 2px;line-height:1.25;}
.lc-landing .anim-card span{display:block;font-size:10.5px;color:var(--slate-2);padding:0 10px 10px;line-height:1.35;}
.lc-landing .anim-copy .h3{margin-bottom:14px;}
.lc-landing .anim-copy>p{font-size:16.5px;color:var(--slate);line-height:1.6;}
.lc-landing .anim-group{margin-top:26px;}
.lc-landing .anim-group h5{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
color:var(--gold-deep);margin-bottom:14px;}
.lc-landing .anim-group h5 svg{width:16px;height:16px;}
.lc-landing .anim-group .ct{background:var(--gold-soft);border:1px solid var(--gold-border);border-radius:99px;padding:2px 9px;font-size:11px;}
.lc-landing .anim-chips{display:flex;flex-wrap:wrap;gap:8px;}
.lc-landing .anim-chip{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--border);border-radius:99px;
padding:8px 14px;font-size:13.5px;font-weight:600;color:var(--ink-3);transition:border-color .15s,color .15s,transform .15s;}
.lc-landing .anim-chip:hover{border-color:var(--gold-border);color:var(--gold-deep);transform:translateY(-1px);}
.lc-landing .anim-chip svg{width:13px;height:13px;color:var(--gold);}
/* --- movements call sheet · director's slate --- */
.lc-landing .anim-sheet{margin-top:26px;background:#12141B;border-radius:14px;padding:20px 22px 14px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:18px;container-type:inline-size;box-shadow:0 20px 44px -18px rgba(16,24,40,.35);}
.lc-landing .anim-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:repeating-linear-gradient(-55deg,var(--gold) 0 14px,#12141B 14px 28px);opacity:.9;}
.lc-landing .as-head{display:flex;align-items:center;gap:9px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lt,#E4CE86);margin-bottom:8px;}
.lc-landing .as-head svg{width:15px;height:15px;color:var(--gold);}
.lc-landing .as-head .ct{background:rgba(201,168,76,.16);border:1px solid rgba(201,168,76,.35);border-radius:99px;padding:2px 9px;font-size:10.5px;color:var(--gold-lt,#E4CE86);}
.lc-landing .as-rows{display:grid;grid-template-columns:1fr 1fr;gap:1px 18px;}
.lc-landing .as-row{display:flex;align-items:center;gap:11px;padding:7px 10px;margin:0 -10px;border:0;border-radius:7px;background:none;font:inherit;font-size:13.5px;font-weight:600;color:rgba(255,255,255,.82);text-align:left;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.07);transition:background .15s,color .15s;}
.lc-landing .as-row i{font-style:normal;font-size:10px;font-weight:800;color:var(--gold);font-variant-numeric:tabular-nums;width:18px;flex:none;}
.lc-landing .as-row:hover, .lc-landing .as-row.on{background:rgba(201,168,76,.13);color:#fff;border-bottom-color:transparent;}
.lc-landing .as-row:hover i{color:var(--gold-lt,#E4CE86);}
.lc-landing .as-col.fx .as-row i{font-size:11.5px;}
.lc-landing .anim-stats{display:flex;gap:14px;margin-top:26px;}
.lc-landing .anim-stat{flex:1;border:1px solid var(--border);border-radius:14px;padding:16px 18px;background:var(--gold-soft);}
.lc-landing .anim-stat b{display:block;font-size:34px;font-weight:800;color:var(--gold-deep);line-height:1;letter-spacing:-.02em;}
.lc-landing .anim-stat span{display:block;margin-top:5px;font-size:13px;font-weight:600;color:var(--ink-3);}
.lc-landing .anim-feats{margin-top:22px;display:flex;flex-direction:column;}
.lc-landing .anim-feats .af{display:flex;gap:14px;align-items:flex-start;padding:15px 0;border-top:1px solid var(--border);}
.lc-landing .anim-feats .af:last-child{border-bottom:1px solid var(--border);}
.lc-landing .anim-feats .ic{flex:none;width:38px;height:38px;border-radius:10px;background:var(--gold-soft);border:1px solid var(--gold-border);display:flex;align-items:center;justify-content:center;}
.lc-landing .anim-feats .ic svg{width:18px;height:18px;color:var(--gold-dk);}
.lc-landing .anim-feats h5{font-size:15.5px;font-weight:700;color:var(--ink);}
.lc-landing .anim-feats p{font-size:13.5px;color:var(--slate);line-height:1.5;margin-top:2px;}
.lc-landing .anim-note{display:flex;align-items:flex-start;gap:8px;margin-top:16px;font-size:12.5px;font-weight:600;color:var(--slate-2);line-height:1.5;}
.lc-landing .anim-note svg{width:14px;height:14px;color:var(--gold);flex:none;margin-top:2px;}
/* spotlight state on the left panel */
.lc-landing .anim-frame.spotting .anim-card{opacity:.32;transform:none;}
.lc-landing .anim-frame.spotting .anim-card.spot{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold),0 0 26px rgba(201,168,76,.45);transform:translateY(-2px);}
.lc-landing .anim-card{transition:border-color .15s,box-shadow .2s,transform .15s,opacity .25s;}
/* ============================================================
INTEGRATIONS, "Works with your stack"
============================================================ */
.lc-landing .intg-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;max-width:920px;margin:48px auto 0;}
.lc-landing .intg{display:flex;flex-direction:column;align-items:center;gap:12px;padding:26px 14px;background:#fff;
border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-xs);transition:transform .18s,box-shadow .2s,border-color .2s;}
.lc-landing .intg:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold-border);}
.lc-landing .intg-ic{width:50px;height:50px;border-radius:13px;display:flex;align-items:center;justify-content:center;background:var(--bg-soft);}
.lc-landing .intg-ic svg{width:26px;height:26px;}
.lc-landing .intg b{font-size:13.5px;font-weight:700;color:var(--ink-2);}
.lc-landing .intg span{font-size:11.5px;color:var(--muted);text-align:center;line-height:1.3;}
.lc-landing .intg-note{text-align:center;margin-top:34px;font-size:15px;color:var(--slate-2);}
.lc-landing .intg-note b{color:var(--ink-2);}
/* ============================================================
EDITOR TIMELINE DEMO (matches the real editor UI)
============================================================ */
.lc-landing .ed-demo{max-width:1100px;margin:48px auto 0;background:#fff;border:1px solid var(--border);border-radius:16px;
overflow:hidden;box-shadow:var(--shadow-lg);font-size:12px;color:#1F2937;}
.lc-landing .ed-bar{display:flex;align-items:center;gap:12px;padding:11px 16px;background:#fff;border-bottom:1px solid var(--border-2);}
.lc-landing .ed-back{font-size:18px;color:#6A7282;line-height:1;}
.lc-landing .ed-proj{font-size:12px;font-weight:600;color:#1F2937;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:1 1 auto;}
.lc-landing .ed-chips{margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:nowrap;flex:none;}
.lc-landing .ed-chips i{display:inline-flex;align-items:center;gap:5px;font-style:normal;font-size:11px;font-weight:600;padding:7px 12px;border-radius:9px;
color:#374151;border:1px solid var(--border);background:#fff;white-space:nowrap;}
.lc-landing .ed-chips i svg{width:11px;height:11px;}
.lc-landing .ed-chips i.sel{color:#374151;}
.lc-landing .ed-chips i.on{background:var(--gold);border-color:var(--gold);color:#fff;}
.lc-landing .ed-chips i.lock{color:#B9BFC9;}
.lc-landing .ed-chips i.gold{background:var(--gold);border-color:var(--gold);color:#fff;font-weight:700;}
.lc-landing .ed-body{display:grid;grid-template-columns:250px 1fr;background:#F7F8FA;}
.lc-landing .ed-side{background:#fff;border-right:1px solid var(--border-2);padding:12px;display:flex;flex-direction:column;gap:12px;}
.lc-landing .ed-rail{display:flex;gap:4px;}
.lc-landing .ed-rail span{width:34px;height:30px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#6A7282;}
.lc-landing .ed-rail span svg{width:15px;height:15px;}
.lc-landing .ed-rail span.on{background:var(--gold);color:#fff;}
.lc-landing .ed-media b{display:block;font-size:14px;font-weight:700;color:#1F2937;}
.lc-landing .ed-media p{font-size:10.5px;color:#99A1AF;margin:3px 0 10px;}
.lc-landing .ed-cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.lc-landing .ed-mcard{position:relative;aspect-ratio:16/10;border-radius:8px;overflow:hidden;display:block;}
.lc-landing .ed-mcard img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .ed-mcard i{position:absolute;font-style:normal;font-size:7.5px;font-weight:700;border-radius:5px;padding:2px 6px;color:#fff;}
.lc-landing .ed-mcard .r{top:5px;left:5px;background:rgba(17,24,39,.75);}
.lc-landing .ed-mcard .q{top:5px;right:5px;background:rgba(17,24,39,.75);}
.lc-landing .ed-mcard .m{bottom:5px;left:5px;background:var(--gold);color:#fff;}
.lc-landing .ed-main{display:flex;flex-direction:column;min-width:0;}
.lc-landing .ed-preview{position:relative;margin:14px 14px 0;border-radius:8px;overflow:hidden;background:#000;aspect-ratio:16/9;}
.lc-landing .ed-preview video, .lc-landing .ed-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .ed-preview .ed-pv{position:absolute;inset:0;opacity:0;transition:opacity .65s ease;}
.lc-landing .ed-preview .ed-pv.on{opacity:1;}
.lc-landing .ed-caption{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:7px 16px;border-radius:8px;
background:rgba(8,8,12,.62);backdrop-filter:blur(6px);color:#fff;font-size:13px;font-weight:700;white-space:nowrap;}
.lc-landing .ed-tools{display:flex;align-items:center;justify-content:space-between;padding:10px 18px;margin-top:8px;background:#fff;border-top:1px solid var(--border-2);border-bottom:1px solid var(--border-2);}
.lc-landing .ed-tools .grp{display:inline-flex;align-items:center;gap:14px;color:#6A7282;}
.lc-landing .ed-tools svg{width:14px;height:14px;}
.lc-landing .ed-tools b{font-size:11px;font-weight:600;color:#1F2937;font-variant-numeric:tabular-nums;}
.lc-landing .ed-tl{position:relative;padding:0 14px 16px;background:#fff;}
.lc-landing .ed-ruler{display:flex;justify-content:space-between;padding:8px 2px 6px;border-bottom:1px solid var(--border-2);}
.lc-landing .ed-ruler span{font-size:8.5px;color:#99A1AF;font-variant-numeric:tabular-nums;}
.lc-landing .ed-tracks{display:flex;flex-direction:column;gap:6px;padding-top:10px;}
.lc-landing .ed-lane{display:flex;gap:4px;height:36px;border-radius:7px;overflow:hidden;}
.lc-landing .ed-lane.clips{height:44px;}
.lc-landing .ed-clip{position:relative;flex:1;border-radius:6px;overflow:hidden;border:1.5px solid var(--gold-border);transition:box-shadow .2s,border-color .2s;}
.lc-landing .ed-clip.active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 0 14px rgba(201,168,76,.5);}
.lc-landing .ed-clip video, .lc-landing .ed-clip img{width:100%;height:100%;object-fit:cover;display:block;}
.lc-landing .ed-clip i{position:absolute;bottom:3px;left:3px;font-style:normal;font-size:7.5px;font-weight:700;color:#fff;background:var(--gold);border-radius:4px;padding:1.5px 6px;}
.lc-landing .ed-text{display:inline-flex;align-items:center;gap:6px;padding:0 12px;border-radius:6px;font-size:10.5px;font-weight:700;color:#7A5E14;
background:var(--gold-soft);border:1.5px solid var(--gold-border);white-space:nowrap;flex:1;justify-content:center;overflow:hidden;}
.lc-landing .ed-text svg{width:11px;height:11px;flex:none;}
/* On a phone the clip pill is far narrower than "Welcome to 12 Listing Lane",
and justify-content:center splits the overflow across both ends — which ate
the leading "T" type icon. Anchor the content to the start so only the tail
of the label is clipped and the icon stays fully visible. */
@media(max-width:760px){
.lc-landing .ed-text{justify-content:flex-start;padding-left:8px;}
}
.lc-landing .ed-lane.audio{height:58px;}
.lc-landing .ed-audio{position:relative;flex:1;border-radius:6px;display:flex;flex-direction:column;justify-content:center;gap:3px;padding:5px 16px 6px;overflow:hidden;}
.lc-landing .ed-audio::before, .lc-landing .ed-audio::after{content:"";position:absolute;top:6px;bottom:6px;width:4px;border-radius:99px;background:rgba(17,24,39,.28);z-index:2;}
.lc-landing .ed-audio::before{left:5px;}
.lc-landing .ed-audio::after{right:5px;}
.lc-landing .ed-audio .meta{display:flex;align-items:center;gap:6px;font-size:8.5px;font-weight:700;color:#3F4753;white-space:nowrap;overflow:hidden;}
.lc-landing .ed-audio .meta svg{width:10px;height:10px;flex:none;color:var(--gold-deep);}
.lc-landing .ed-audio.mu .meta svg{color:#3577A8;}
.lc-landing .ed-audio .meta u{text-decoration:none;background:rgba(17,24,39,.08);border-radius:4px;padding:1px 6px;color:#4B5563;font-weight:700;font-size:7.5px;flex:none;display:inline-flex;align-items:center;gap:3px;}
.lc-landing .ed-audio .meta u svg{width:8px;height:8px;}
.lc-landing .ed-audio .meta .eq{display:inline-flex;align-items:flex-end;gap:1.5px;height:9px;flex:none;}
.lc-landing .ed-audio .meta .eq i{width:2px;border-radius:99px;background:var(--gold-deep);animation:edEq 1s ease-in-out infinite alternate;}
.lc-landing .ed-audio.mu .meta .eq i{background:#3577A8;}
.lc-landing .ed-audio .meta .eq i:nth-child(1){height:45%;animation-delay:0s;}
.lc-landing .ed-audio .meta .eq i:nth-child(2){height:90%;animation-delay:.18s;}
.lc-landing .ed-audio .meta .eq i:nth-child(3){height:60%;animation-delay:.36s;}
.lc-landing .ed-audio .meta .eq i:nth-child(4){height:100%;animation-delay:.1s;}
.lc-landing .ed-audio .meta .eq i:nth-child(5){height:50%;animation-delay:.28s;}
@keyframes edEq{from{transform:scaleY(.4);}to{transform:scaleY(1);}}
@media (prefers-reduced-motion: reduce){.lc-landing .ed-audio .meta .eq i{animation:none;}}
.lc-landing .ed-audio .wave{flex:1;display:flex;align-items:center;gap:1px;position:relative;min-height:16px;}
.lc-landing .ed-audio .wave::before{content:none;}
.lc-landing .ed-audio .fade{position:absolute;top:0;bottom:0;width:30px;pointer-events:none;z-index:1;}
.lc-landing .ed-audio .fade.l{left:0;background:linear-gradient(105deg,rgba(255,255,255,.75),transparent 80%);}
.lc-landing .ed-audio .fade.r{right:0;background:linear-gradient(-105deg,rgba(255,255,255,.75),transparent 80%);}
.lc-landing .ed-audio.vo{background:rgba(201,168,76,.16);border:1.5px solid var(--gold-border);}
.lc-landing .ed-audio.mu{background:rgba(89,167,222,.14);border:1.5px solid rgba(89,167,222,.4);}
.lc-landing .ed-audio .wave i{flex:1;border-radius:1px;background:var(--gold-dk);opacity:.85;height:calc(var(--h) * 1%);min-height:18%;}
.lc-landing .ed-audio.mu .wave i{background:#59A7DE;}
.lc-landing .ed-text.active{border-color:var(--gold);box-shadow:0 0 0 1.5px var(--gold),0 0 14px rgba(201,168,76,.45);}
.lc-landing .ed-playhead{position:absolute;top:6px;bottom:12px;left:16px;width:2px;background:#1F2937;border-radius:99px;pointer-events:none;}
.lc-landing .ed-playhead::before{content:"";position:absolute;top:-6px;left:50%;transform:translateX(-50%);
border-top:7px solid #1F2937;border-left:5px solid transparent;border-right:5px solid transparent;}
/* animation: media flies from the panel onto the timeline, then playback */
@media (prefers-reduced-motion: no-preference){
.lc-landing .ed-demo .ed-clip, .lc-landing .ed-demo .ed-text, .lc-landing .ed-demo .ed-audio{opacity:0;transform:translate(-46px,-22px) scale(.9);}
.lc-landing .ed-demo .ed-mcard{opacity:0;transform:translateY(10px);}
.lc-landing .ed-demo .ed-caption{opacity:0;transform:translateX(-50%) translateY(12px);}
.lc-landing .ed-demo .ed-playhead{opacity:0;}
.lc-landing .ed-demo.play .ed-mcard{animation:edFadeUp .4s ease forwards;animation-delay:calc(var(--i) * .08s);}
.lc-landing .ed-demo.play .ed-clip, .lc-landing .ed-demo.play .ed-text, .lc-landing .ed-demo.play .ed-audio{
animation:edLand .5s cubic-bezier(.2,.9,.3,1.15) forwards;animation-delay:calc(.55s + var(--i) * .12s);}
.lc-landing .ed-demo.play .ed-audio .wave i{transform:scaleY(0);transform-origin:center;
animation:edWave .35s ease forwards;animation-delay:calc(.85s + var(--i) * .12s);}
.lc-landing .ed-demo.play .ed-caption{animation:edCap .5s ease forwards;animation-delay:1.9s;}
.lc-landing .ed-demo.play .ed-playhead{animation:edScan 7s linear 2.2s infinite;}
@keyframes edFadeUp{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
@keyframes edLand{from{opacity:0;transform:translate(-46px,-22px) scale(.9);}to{opacity:1;transform:translate(0,0) scale(1);}}
@keyframes edWave{to{transform:scaleY(1);}}
@keyframes edCap{from{opacity:0;transform:translateX(-50%) translateY(12px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
@keyframes edScan{0%{left:16px;opacity:1;}96%{left:calc(100% - 18px);opacity:1;}100%{left:calc(100% - 18px);opacity:0;}}
}
@media(max-width:900px){
.lc-landing .ed-body{grid-template-columns:1fr;}
.lc-landing .ed-side{border-right:none;border-bottom:1px solid var(--border-2);}
.lc-landing .ed-cards{grid-template-columns:repeat(5,1fr);}
.lc-landing .ed-chips i:not(.gold):not(.on){display:none;}
.lc-landing .ed-proj{font-size:11px;}
}
@media(max-width:560px){
/* At phone widths, 5 fixed-ish columns squeezed each media card down to
~50px, too small for the 16:10 thumbnail + 3 label pills to read. 3
columns keeps cards legible. The address in .ed-proj also stayed at
full intrinsic width (nowrap, no shrink) here, pushing the "Create
Video" chip past the demo's clipped edge; the ellipsis rule above
needs a capped width to actually kick in at this size. */
.lc-landing .ed-cards{grid-template-columns:repeat(3,1fr);}
.lc-landing .ed-proj{max-width:34vw;}
}
/* ============================================================
RISK REVERSAL, near pricing CTA
============================================================ */
.lc-landing .risk{max-width:1080px;margin:44px auto 0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;
background:#fff;border:1px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--shadow);}
.lc-landing .risk-item{padding:26px 24px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;}
.lc-landing .risk-item+.risk-item{border-left:1px solid var(--border-2);}
.lc-landing .risk-ic{width:46px;height:46px;border-radius:12px;background:var(--gold-soft);border:1px solid var(--gold-border);
color:var(--gold-deep);display:flex;align-items:center;justify-content:center;}
.lc-landing .risk-ic svg{width:23px;height:23px;}
.lc-landing .risk-item b{font-size:15px;font-weight:700;color:var(--ink);}
.lc-landing .risk-item span{font-size:13px;color:var(--slate-2);line-height:1.45;}
/* ============================================================
STICKY CTA bar
============================================================ */
.lc-landing .sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:90;transform:translateY(110%);
transition:transform .35s cubic-bezier(.4,0,.2,1);
background:rgba(15,17,23,.94);backdrop-filter:saturate(180%) blur(14px);border-top:1px solid rgba(255,255,255,.1);}
.lc-landing .sticky-cta.show{transform:translateY(0);}
.lc-landing .sticky-cta-in{display:flex;align-items:center;justify-content:space-between;gap:20px;height:68px;}
.lc-landing .sticky-cta-txt{display:flex;align-items:center;gap:14px;color:#fff;}
.lc-landing .sticky-cta-txt b{font-size:16px;font-weight:700;}
.lc-landing .sticky-cta-txt span{font-size:13.5px;color:rgba(255,255,255,.6);}
.lc-landing .sticky-cta-dot{width:8px;height:8px;border-radius:99px;background:#1F8A5B;box-shadow:0 0 0 4px rgba(31,138,91,.25);flex:none;}
.lc-landing .sticky-cta-actions{display:flex;align-items:center;gap:12px;}
.lc-landing .sticky-cta-close{width:34px;height:34px;border-radius:9px;color:rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
.lc-landing .sticky-cta-close:hover{background:rgba(255,255,255,.08);color:#fff;}
.lc-landing .sticky-cta-close svg{width:18px;height:18px;}
@media(max-width:560px){
/* The bar kept its desktop button (14px/26px padding, 15px font) and a
fixed 62px row height. Once the subtitle wraps off, that's still a
16px-bold two-line headline squeezed against a full-size button in a
height that can't grow — everything reads oversized/cramped on a
phone. Let the row size to its content and shrink the button + type
to match. */
.lc-landing .sticky-cta-txt span{display:none;}
/* env() so the bar clears the iPhone home indicator, which otherwise
sits directly on top of the button. Falls back to 0 everywhere else. */
.lc-landing .sticky-cta{padding-bottom:env(safe-area-inset-bottom,0px);}
/* Specificity note (same trap as .hero-inner): this element carries both
"container" and "sticky-cta-in". ".lc-landing .container{padding:0 20px}"
in the max-width:560px block near the end of this file has equal
specificity and comes later, so a bare ".sticky-cta-in" padding here
lost outright — the bar rendered with ZERO vertical padding and the
button sat flush against its top and bottom edges. The ".sticky-cta"
ancestor makes this win regardless of source order, and only
padding-top/bottom are set so .container keeps owning the side padding. */
.lc-landing .sticky-cta .sticky-cta-in{height:auto;min-height:0;gap:10px;padding-top:8px;padding-bottom:8px;}
.lc-landing .sticky-cta-txt{gap:8px;min-width:0;}
/* line-height must be set on the wrapping div, not just the : the div
inherits the 1.5/16px body strut, so each line box stayed 24px tall no
matter how small the got — that strut, not the font size, was what
kept this two-line headline (and the bar) looking oversized. */
.lc-landing .sticky-cta-txt>div{line-height:1.28;}
.lc-landing .sticky-cta-txt b{font-size:12.5px;font-weight:600;}
/* NB: .sticky-cta-dot is itself a , so the rule above hides the
status dot too — it has never rendered at this width. Left as-is
(that's the shipped look); don't add dot sizing here, it's dead. */
.lc-landing .sticky-cta-actions{gap:4px;flex:none;}
/* This bar is a persistent overlay, not a section — it should read as a
thin strip, so the CTA is deliberately kept near (not above) the 44px
touch-target guideline to stop it dominating the viewport. */
.lc-landing .sticky-cta-actions .btn{padding:10px 16px;font-size:12.5px;min-height:38px;border-radius:9px;}
.lc-landing .sticky-cta-close{width:26px;height:26px;border-radius:7px;flex:none;}
.lc-landing .sticky-cta-close svg{width:14px;height:14px;}
}
/* ============================================================
TWEAK VARIANTS · toggled via the Tweaks panel
============================================================ */
/* hero style */
.lc-landing .hero[data-hero="solid"] .hero-bg video, .lc-landing .hero[data-hero="solid"] .hero-bg img{display:none;}
.lc-landing .hero[data-hero="solid"]{background:linear-gradient(165deg,#161A23,#0F1117 60%);}
.lc-landing .hero[data-hero="solid"] .hero-bg::after{background:radial-gradient(120% 90% at 50% 0%,rgba(201,168,76,.16),transparent 60%);}
.lc-landing .hero[data-hero="photo"] .hero-bg video{display:none;}
/* dropzone hidden -> show CTA buttons instead */
.lc-landing .hero[data-dz="off"] .dropzone{display:none;}
.lc-landing .hero-cta-alt{display:none;margin:38px auto 0;gap:14px;justify-content:center;flex-wrap:wrap;}
.lc-landing .hero[data-dz="off"] .hero-cta-alt{display:flex;}
/* corners: sharp */
.lc-landing[data-corners="sharp"]{--r-xs:3px;--r:5px;--r-lg:6px;--r-xl:8px;--r-2xl:10px;}
/* warm section tint off -> all white */
.lc-landing[data-tint="off"] #why, .lc-landing[data-tint="off"] #faq, .lc-landing[data-tint="off"] section[style*="bg-warm"]{background:var(--white)!important;}
/* HOW IT WORKS · timeline variant */
.lc-landing #howTimeline{display:none;}
.lc-landing #how[data-how="timeline"] #howTabs, .lc-landing #how[data-how="timeline"] #howPanel{display:none;}
.lc-landing #how[data-how="timeline"] #howTimeline{display:flex;flex-direction:column;gap:20px;max-width:920px;margin:0 auto;}
.lc-landing .tl-step{display:grid;grid-template-columns:120px 1fr;gap:28px;align-items:center;background:#fff;border:1px solid var(--border);
border-radius:var(--r-xl);padding:22px 28px;box-shadow:var(--shadow);}
.lc-landing .tl-num{width:120px;height:120px;border-radius:var(--r-lg);background:var(--gold-soft);color:var(--gold-deep);
display:flex;align-items:center;justify-content:center;font-size:46px;font-weight:800;border:1px solid var(--gold-border);}
.lc-landing .tl-body .tag{margin-bottom:12px;}
.lc-landing .tl-body h4{font-size:21px;font-weight:800;color:var(--ink);margin-bottom:8px;letter-spacing:-.01em;}
.lc-landing .tl-body p{font-size:15.5px;color:var(--slate);line-height:1.55;}
@media(max-width:680px){.lc-landing .tl-step{grid-template-columns:1fr;}.lc-landing .tl-num{width:64px;height:64px;font-size:28px;}}
/* TESTIMONIALS · grid-only variant */
.lc-landing #testimonials[data-tst="grid"] .tst-feat{display:none;}
/* ============================================================
WOW LAYER, hero polish, transformation grid, social reels,
cinematic video wall, animated counters
============================================================ */
/* hero gradient headline + entrance + scroll cue */
.lc-landing .hero h1 .em{background:linear-gradient(100deg,#F0DCA0,#E4CE86 40%,#C9A84C 80%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.lc-landing .hero-inner>*{animation:heroUp .7s cubic-bezier(.2,.7,.2,1) both;}
.lc-landing .hero-inner>.eyebrow{animation-delay:.02s;}
.lc-landing .hero-inner>h1{animation-delay:.10s;}
.lc-landing .hero-inner>.hero-sub{animation-delay:.18s;}
.lc-landing .hero-inner>.dropzone, .lc-landing .hero-inner>.hero-cta-alt{animation-delay:.26s;}
.lc-landing .hero-inner>.hero-trust{animation-delay:.34s;}
@keyframes heroUp{from{opacity:0;transform:translateY(20px);}to{opacity:1;transform:none;}}
@media(prefers-reduced-motion:reduce){.lc-landing .hero-inner>*{animation:none;}}
.lc-landing .hero-scroll{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);z-index:3;
display:flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,255,255,.66);
font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;}
.lc-landing .hero-scroll svg{width:20px;height:20px;animation:bob 1.8s ease-in-out infinite;}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(7px);}}
/* before/after: small + grid + move label */
.lc-landing .ba-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1000px;margin:22px auto 0;}
.lc-landing .ba-sm{aspect-ratio:16/10;border-radius:var(--r-lg);}
.lc-landing .ba-before{background:#0b0d12;}
.lc-landing .ba-move{position:absolute;z-index:4;left:14px;bottom:14px;padding:6px 13px;border-radius:99px;
background:rgba(15,17,23,.6);backdrop-filter:blur(6px);color:#fff;font-size:12.5px;font-weight:700;
letter-spacing:.02em;border:1px solid rgba(255,255,255,.16);}
.lc-landing .ba-sm .ba-move{font-size:11px;padding:5px 10px;left:10px;bottom:10px;}
.lc-landing .ba-knob.sm{width:34px;height:34px;}.lc-landing .ba-knob.sm svg{width:16px;height:16px;}
.lc-landing .ba-sm .ba-label, .lc-landing .ba-vert .ba-label{font-size:10.5px;padding:4px 9px;top:12px;}
.lc-landing .ba-sm .ba-label.l, .lc-landing .ba-vert .ba-label.l{left:12px;}.lc-landing .ba-sm .ba-label.r, .lc-landing .ba-vert .ba-label.r{right:12px;}
/* social reel band */
.lc-landing .reel-band{margin:60px auto 0;max-width:1120px;display:grid;grid-template-columns:1.05fr 1fr;gap:44px;align-items:center;
background:linear-gradient(165deg,#1A1F2A,#0F1117 70%);border-radius:var(--r-2xl);padding:52px 52px;
box-shadow:var(--shadow-lg);position:relative;overflow:hidden;}
.lc-landing .reel-band::before{content:"";position:absolute;inset:0;
background:radial-gradient(80% 80% at 100% 0,rgba(201,168,76,.20),transparent 55%);}
.lc-landing .reel-text{position:relative;z-index:1;}
.lc-landing .reel-text .eyebrow{background:rgba(228,206,134,.14);border-color:rgba(228,206,134,.34);color:var(--gold-lt);}
.lc-landing .reel-text h3{color:#fff;margin:16px 0 12px;}
.lc-landing .reel-text p{color:rgba(255,255,255,.74);font-size:16px;line-height:1.6;}
.lc-landing .reel-text .how-list li{color:rgba(255,255,255,.88);}
.lc-landing .reel-phones{position:relative;z-index:1;display:flex;gap:14px;justify-content:center;align-items:center;}
.lc-landing .reel-phone{position:relative;width:188px;flex:none;border-radius:30px;background:#05070b;padding:7px;
box-shadow:0 26px 60px -18px rgba(0,0,0,.75);border:1px solid rgba(255,255,255,.09);}
.lc-landing .reel-phone.tilt-l{transform:rotate(-5deg) translateY(8px);}
.lc-landing .reel-phone.tilt-r{transform:rotate(5deg) translateY(-8px);}
.lc-landing .reel-notch{position:absolute;z-index:6;top:13px;left:50%;transform:translateX(-50%);width:42px;height:5px;
border-radius:99px;background:rgba(255,255,255,.28);}
.lc-landing .ba-vert{aspect-ratio:9/16;border-radius:24px;cursor:ew-resize;}
/* cinematic video wall */
.lc-landing .mq-section{padding:100px 0;background:var(--white);color:var(--ink);overflow:hidden;}
.lc-landing .mq-section .section-head .h2{color:var(--ink);}
.lc-landing .mq-section .section-head .lede{color:var(--slate);}
.lc-landing .mq-section .eyebrow{background:var(--gold-soft);border-color:var(--gold-border);color:var(--gold-deep);}
.lc-landing .mq{width:100%;overflow:hidden;margin-top:18px;
-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.lc-landing .mq-track{display:flex;gap:18px;width:max-content;will-change:transform;}
.lc-landing .mq-track.run{animation:mqScroll var(--mqdur,60s) linear infinite;}
.lc-landing .mq-track.run[data-dir="right"]{animation-direction:reverse;}
.lc-landing .mq:hover .mq-track.run{animation-play-state:paused;}
@keyframes mqScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media(prefers-reduced-motion:reduce){.lc-landing .mq-track.run{animation:none;}}
.lc-landing .mq-tile{position:relative;width:300px;aspect-ratio:16/9;flex:none;border-radius:14px;overflow:hidden;
background:#0b0d12;box-shadow:0 12px 30px -14px rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.06);transition:transform .25s;}
.lc-landing .mq-tile:hover{transform:translateY(-5px);}
.lc-landing .mq-tile video{width:100%;height:100%;object-fit:cover;}
.lc-landing .mq-tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(0,0,0,.55));}
.lc-landing .mq-label{position:absolute;z-index:2;left:14px;bottom:11px;font-size:13px;font-weight:700;color:#fff;}
.lc-landing .mq-label.gold{color:var(--gold-lt);}
.lc-landing .mq-foot{margin-top:42px;display:flex;gap:14px;justify-content:center;align-items:center;flex-wrap:wrap;}
.lc-landing .mq-pill{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:99px;
background:var(--bg-soft,#F5F6F8);border:1px solid var(--border);color:var(--ink-3);font-size:14px;font-weight:600;}
.lc-landing .mq-pill svg{width:16px;height:16px;color:var(--gold-dk);}
@media(max-width:1024px){
.lc-landing .reel-band{grid-template-columns:1fr;gap:36px;}
.lc-landing .reel-phones{order:-1;}
}
@media(max-width:760px){
.lc-landing .ba-grid{grid-template-columns:1fr;}
.lc-landing .mq-section{padding:72px 0;}
.lc-landing .mq-tile{width:230px;}
.lc-landing .reel-band{padding:40px 32px;}
.lc-landing .reel-phone{width:136px;}
}
@media(max-width:480px){
/* At phone widths the untransformed flex row (two 150px-wide tilted
phones + gap) was wider than the space left inside .reel-band's
52px padding, so it overflowed the band's overflow:hidden edge —
the rotate()/translateY() on each phone shifts its rendered pixels
without changing the layout box used for centering, so the visible
group read as off-center/clipped rather than symmetric. Shrinking
the phones and the band's own padding keeps the rotated bounding
box comfortably inside the available width so centering holds. */
.lc-landing .reel-band{padding:32px 24px;}
.lc-landing .reel-phones{gap:10px;}
.lc-landing .reel-phone{width:120px;border-radius:22px;padding:5px;}
.lc-landing .reel-phone.tilt-l{transform:rotate(-3deg) translateY(5px);}
.lc-landing .reel-phone.tilt-r{transform:rotate(3deg) translateY(-5px);}
.lc-landing .reel-phone .ba-vert{border-radius:17px;}
.lc-landing .reel-notch{width:32px;}
/* Photo/Reel pill labels (sized for the 150px desktop phone) collide
at this width — shrink + tuck them in so they stop overlapping. */
.lc-landing .reel-phone .ba-label{font-size:9.5px;padding:3px 7px;}
.lc-landing .reel-phone .ba-label.l{left:8px;}
.lc-landing .reel-phone .ba-label.r{right:8px;}
}
@media(max-width:640px){
.lc-landing .why-cap u{display:none;}
}
@container(max-width:620px){
.lc-landing .as-rows{grid-template-columns:1fr;}
}
/* ---------- responsive ---------- */
@media(max-width:760px){
/* At this width each of the 4 tabs is too wide to share a row, so
flex-wrap drops every tab onto its own line — but justify-content:center
centers each single-item row independently, and since the labels are
different lengths ("Upload Photos" vs "Select Camera Movements") every
row starts at a different x position instead of lining up. Stack as a
column with a shared left edge instead. */
.lc-landing .how-tabs{flex-direction:column;align-items:stretch;max-width:none;}
.lc-landing .how-tab{justify-content:flex-start;}
}
@media(max-width:1024px){
.lc-landing .why-grid, .lc-landing .how-panel, .lc-landing .contact-grid, .lc-landing .tst-feat{grid-template-columns:1fr;}
.lc-landing .how-text{padding:0 18px 18px;}
/* The how-it-works mockup (.hiw-ui) is absolutely positioned to fill
.how-stage's fixed aspect-ratio box on desktop. That box is far too
short once stacked full-width on mobile, so its richer steps (e.g. the
"Edit Everything" timeline) were getting silently clipped by
.how-stage's overflow:hidden. Let the box grow to fit its content
instead of clipping it. */
.lc-landing .how-stage{aspect-ratio:auto;}
.lc-landing .hiw-ui{position:relative;inset:auto;padding:22px 20px;min-height:380px;}
/* Full step labels ("Upload Photos", "Animate Photos") wrapped to 2
cramped lines next to the numbered circles + connector lines at this
width. Drop to numbers + lines only, matching the same compact
treatment used for .pup-stepper on the product page. */
.lc-landing .hiw-step b{display:none;}
.lc-landing .hiw-step{gap:0;}
.lc-landing .hiw-edtool{flex-wrap:wrap;row-gap:8px;}
.lc-landing .hiw-edmain{flex-direction:column;}
.lc-landing .hiw-edmedia{width:100%;}
.lc-landing .hiw-edprev{min-height:220px;}
.lc-landing .hiw-select{white-space:normal;}
.lc-landing .hiw-animrow{flex-wrap:wrap;row-gap:10px;}
.lc-landing .hiw-animrow>img{width:64px;height:46px;}
/* Step 4 "Exports" mock: two cards at ~150px each left only ~120px
inside .bd's padding for the two chip pills ("1080p" + "horizontal"),
which don't fit on one line — and .hiw-exports .card has
overflow:hidden, so the second chip's text was getting silently
clipped ("horizonta") instead of wrapping. Stack to one column so
each card is full-width, and let chips wrap as a safety net. The
closing row (format list + Download button) has the same nowrap
issue, so let it wrap too and give the button its own full-width row. */
.lc-landing .hiw-exports{grid-template-columns:1fr;gap:12px;}
.lc-landing .hiw-exports .im{height:170px;}
.lc-landing .hiw-exports .chips{flex-wrap:wrap;}
.lc-landing .hiw-row{flex-wrap:wrap;row-gap:10px;}
.lc-landing .hiw-row .hiw-btn{width:100%;justify-content:center;}
.lc-landing .tst-feat-media{min-height:260px;}
.lc-landing .footer-top{grid-template-columns:1fr 1fr;gap:28px;}
.lc-landing .footer-brand{grid-column:span 2;}
.lc-landing .prod-row, .lc-landing .prod-row.flip .prod-copy, .lc-landing .prod-row.flip .prod-visual{grid-template-columns:1fr;order:0;}
.lc-landing .prod-row{gap:32px;}
.lc-landing .prod-row .prod-visual{order:2;}
.lc-landing .prod-row .prod-copy{order:1;}
.lc-landing .intg-grid{grid-template-columns:repeat(3,1fr);}
.lc-landing .anim-grid{grid-template-columns:1fr;gap:32px;}
.lc-landing .anim-cards, .lc-landing .anim-cards[data-pane="fx"]{grid-template-columns:repeat(5,1fr);}
}
@media(max-width:620px){
/* .hiw-animrow's ".m" column (title + movement select) has min-width:0
so it can shrink below its own content's natural width — with no
wrap/overflow control on the select pill, the pill's box rendered
wider than that shrunk column and visually overlapped the "Generate"
button beside it, worst on the long "Select movement..." placeholder.
Below this width there isn't room for image + title + select + button
on one line at all, so stack each row into a vertical card instead of
fighting for horizontal space. */
.lc-landing .hiw-animrow{flex-direction:column;align-items:stretch;gap:10px;}
.lc-landing .hiw-animrow>img{width:100%;height:130px;}
.lc-landing .hiw-animrow .m{width:100%;}
.lc-landing .hiw-select{display:flex;width:100%;justify-content:space-between;}
.lc-landing .hiw-animrow .hiw-btn{width:100%;justify-content:center;}
}
@media(max-width:700px){
/* .anim-cards[data-pane="fx"] (line ~759) sets its own 5-column layout at
higher specificity (attribute selector) than a plain ".anim-cards"
mobile override, so it always won here regardless of viewport — the
effects pane stayed stuck at 5 cramped columns while the movements
pane (plain .anim-cards, no competing rule) correctly dropped to 2. */
.lc-landing .anim-cards, .lc-landing .anim-cards[data-pane="fx"]{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:1240px){
.lc-landing .nav-links{display:none;}
.lc-landing .nav-burger{display:flex;}
.lc-landing .mobile-menu.open{display:block;position:fixed;inset:72px 0 0;z-index:99;background:#fff;padding:24px 32px;overflow-y:auto;}
.lc-landing .mobile-menu a{display:block;padding:15px 0;font-size:18px;font-weight:700;color:var(--ink);border-bottom:1px solid var(--border-2);}
.lc-landing .mobile-menu .mm-cta{margin-bottom:22px;padding-bottom:22px;border-bottom:1px solid var(--border-2);display:flex;flex-direction:column;gap:12px;}
.lc-landing .mobile-menu .mm-cta a{border-bottom:none;text-align:center;}
}
@media(max-width:860px){
.lc-landing .section{padding:72px 0;}
.lc-landing .stats-grid{grid-template-columns:1fr;gap:34px;}
.lc-landing .gal-grid, .lc-landing .tst-grid, .lc-landing .pr-grid{grid-template-columns:1fr 1fr;}
.lc-landing .faq-grid{grid-template-columns:1fr;}
.lc-landing .cmp{overflow-x:auto;}.lc-landing .cmp-row{min-width:640px;}
.lc-landing .prod-sub{grid-template-columns:1fr;}
.lc-landing .risk{grid-template-columns:1fr 1fr;}
.lc-landing .risk-item:nth-child(odd){border-left:none;}
.lc-landing .risk-item:nth-child(3), .lc-landing .risk-item:nth-child(4){border-top:1px solid var(--border-2);}
}
@media(max-width:560px){
.lc-landing .container{padding:0 20px;}
.lc-landing .gal-grid, .lc-landing .tst-grid, .lc-landing .pr-grid{grid-template-columns:1fr;}
.lc-landing .dropzone{padding:32px 22px;}
.lc-landing .cta2{padding:44px 24px;}
.lc-landing .footer-top{grid-template-columns:1fr;}.lc-landing .footer-brand{grid-column:auto;}
.lc-landing .intg-grid{grid-template-columns:repeat(2,1fr);}
.lc-landing .risk{grid-template-columns:1fr;}
.lc-landing .risk-item+.risk-item{border-left:none;border-top:1px solid var(--border-2);}
/* Login + Get Started sat in .nav-cta alongside the burger with no
shrinking, so their combined width badly overflowed narrow phones
(colliding with the logo). Both are already duplicated in the
slide-out mobile menu (.mm-cta), so hide them here and leave just
the burger — nothing is lost, the nav just fits. */
.lc-landing .nav-cta .nav-login,
.lc-landing .nav-cta > .btn-primary{display:none;}
/* 5 fixed-width (74px) flex thumbnails wrap to 4 + 1 orphaned on its own
row at narrow widths. A 4-column grid (with the 5th hidden) fills one
clean row instead. */
.lc-landing .dz-thumbs{display:grid;grid-template-columns:repeat(4,1fr);}
.lc-landing .dz-thumbs img{width:100%;height:auto;aspect-ratio:4/3;}
.lc-landing .dz-thumb-item:nth-child(5){display:none;}
}
.lc-landing .footer-contact{display:flex;gap:22px;}
.lc-landing .footer-contact a{color:var(--slate-2);}