/* $9.99 launch pages + /welcome/ (scripts/build_launch.py). Loud, simple, one action.
   Round 2 (Cyrus 2026-10-03): "make it look lively… more emoji, more excitement, more vibe", the 24-hour clock and the
   guarantee above the fold, the price line on the button, the 2-minute video instead of testimonials. Mobile first. */
.lx { background: #F8F4FF; overflow-x: clip; }

/* ticker over the nav */
.lx-tick { background: linear-gradient(90deg, #FFB627, #FFD15C, #FFB627); color: var(--purple-900); overflow: hidden; white-space: nowrap; border-bottom: 2px solid var(--purple-900); }
.lx-tick-run { display: inline-flex; gap: 14px; padding: 7px 0; font-family: var(--font-display); font-size: .74rem; letter-spacing: .08em; animation: lxTick 28s linear infinite; }
.lx-tick-run i { font-style: normal; color: #B5420A; }
@keyframes lxTick { to { transform: translateX(-50%); } }
.lx-top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; background: #fff; border-bottom: 2px solid var(--purple-900); }
.lx-logo img { height: 48px; display: block; }
.lx-call { font-family: var(--font-display); font-size: .8rem; color: var(--gold); background: var(--purple-900); border-radius: 999px; padding: 10px 14px; text-decoration: none; white-space: nowrap; }
.lx-wrap { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* hero: a party, not a brochure */
.lx-hero { position: relative; isolation: isolate; overflow: hidden; padding: 22px 0 34px; text-align: center; color: #fff;
  background: radial-gradient(90% 60% at 50% 0%, rgba(255,93,162,.35), transparent 60%), radial-gradient(120% 90% at 50% 10%, #6A34B0 0%, #2A1460 55%, #14072E 100%); }
.lx-sparks { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.lx-sparks i { position: absolute; left: var(--x); top: var(--y); font-style: normal; font-size: var(--s); color: #FFD15C; opacity: .55;
  animation: lxFloat 6s ease-in-out infinite; animation-delay: var(--d); text-shadow: 0 0 14px rgba(255,209,92,.6); }
@keyframes lxFloat { 0%, 100% { transform: translateY(0) rotate(0) scale(1); opacity: .55; } 50% { transform: translateY(-14px) rotate(14deg) scale(1.15); opacity: .95; } }
.lx-burst { position: relative; width: 150px; height: 150px; margin: 6px auto 10px; display: grid; place-items: center; }
.lx-rays { position: absolute; inset: -38px; border-radius: 50%; z-index: -1;
  background: repeating-conic-gradient(from 0deg, rgba(255,209,92,.32) 0deg 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 70%); mask: radial-gradient(circle, #000 28%, transparent 70%); animation: lxSpin 18s linear infinite; }
@keyframes lxSpin { to { transform: rotate(360deg); } }
.lx-emoji { font-size: 96px; line-height: 1; filter: drop-shadow(0 12px 20px rgba(0,0,0,.45)); animation: lxBob 3.2s ease-in-out infinite; }
@keyframes lxBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-8px) rotate(4deg); } }
.lx-price { position: absolute; right: -34px; top: -4px; background: var(--gold); color: var(--purple-900); font-family: var(--font-display); font-size: 1.35rem; width: 86px; height: 86px; display: grid; place-items: center;
  border-radius: 50%; transform: rotate(12deg); box-shadow: 0 0 0 5px #fff, 0 10px 22px rgba(0,0,0,.35); animation: lxPop 2.4s ease-in-out infinite; }
@keyframes lxPop { 0%, 100% { transform: rotate(12deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
.lx-hero h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 3.3rem); line-height: 1.02; text-transform: uppercase; margin: 0 0 12px; color: #fff; text-wrap: balance; text-shadow: 0 4px 0 rgba(0,0,0,.25); }
.lx-hero h1 em, .lx-end h2 em { font-style: normal; color: var(--gold); }
.lx-lead { font-size: 1.08rem; line-height: 1.5; color: rgba(255,255,255,.92); max-width: 560px; margin: 0 auto 18px; font-weight: 600; }

/* the 24-hour clock, small enough to keep the button above the fold */
.lx-mini { display: inline-grid; gap: 6px; justify-items: center; margin: 0 auto 18px; padding: 12px 16px 12px; border-radius: 20px; background: rgba(255,255,255,.08); border: 2px solid rgba(255,209,92,.55); box-shadow: 0 0 30px rgba(255,182,39,.25); }
.lx-mini-k { font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; color: var(--gold); }
.lx-mini-t { display: flex; align-items: center; gap: 4px; }
.lx-mini-t b { font-family: var(--font-display); font-size: 1.9rem; line-height: 1; color: var(--purple-900); padding: 7px 7px 6px; border-radius: 9px; min-width: 1.15em;
  background: linear-gradient(180deg, #FFE7A3 0%, #FFD15C 46%, #FFB627 54%, #F0A21C 100%); box-shadow: 0 4px 0 #B97A0C; }
.lx-mini-t i { font-style: normal; font-family: var(--font-display); font-size: 1.6rem; color: var(--gold); animation: lxBlink 1s steps(1) infinite; }
@keyframes lxBlink { 50% { opacity: .25; } }
.lx-mini-by { font-size: .95rem; color: #fff; } .lx-mini-by b { color: var(--gold-bright); white-space: nowrap; }

/* the button: the label, and the price line under it */
.lx-buy { display: inline-flex !important; flex-direction: column; align-items: center; gap: 3px; line-height: 1.1; }
.lx-buy small { font-family: var(--font-body); font-weight: 700; font-size: .8rem; letter-spacing: 0; text-transform: none; opacity: .85; }
.lx-hero .cta-tap, .lx-hero .cta-tap-in, .lx-end .cta-tap, .lx-end .cta-tap-in, .lx-offer .cta-tap, .lx-offer .cta-tap-in, .lx-video .cta-tap, .lx-video .cta-tap-in { width: 100%; max-width: 520px; }
.lx-hero .cta-tap, .lx-end .cta-tap, .lx-video .cta-tap { margin: 0 auto; }
.lx-hero .lx-buy, .lx-end .lx-buy, .lx-offer .lx-buy, .lx-video .lx-buy { width: 100%; }

/* the guarantee seal */
.lx-seal { display: grid; gap: 2px; max-width: 520px; margin: 16px auto 0; padding: 10px 14px; border-radius: 16px; background: rgba(20,181,165,.18); border: 2px dashed rgba(31,217,197,.85); color: #fff; font-size: .95rem; line-height: 1.4; }
.lx-seal b { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; color: var(--teal-bright); }
.lx-seal u { text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; font-weight: 800; }

/* what you get */
.lx-get { padding: 34px 0 10px; }
.lx-offer { background: #fff; color: var(--purple-900); border: 4px solid var(--gold); border-radius: 26px; padding: 22px 18px 18px; box-shadow: 8px 8px 0 var(--purple-900); text-align: left; max-width: 580px; margin: 0 auto; }
.lx-k { font-family: var(--font-display); font-size: .78rem; letter-spacing: .14em; color: var(--purple-700); margin-bottom: 12px; text-align: center; }
.lx-k.ok { color: var(--gold); font-size: .9rem; margin-bottom: 14px; }
.lx-offer ul { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 10px; font-size: 1.04rem; line-height: 1.4; }
.lx-wait { text-align: center; font-size: .9rem; color: var(--gray-dark); margin: 14px 0 0; } .lx-wait b { color: var(--purple-700); font-variant-numeric: tabular-nums; }
.lx-fine { font-size: .88rem; color: var(--gray-dark); text-align: center; margin: 4px 0 0; line-height: 1.5; }
.lx-hero .lx-fine { color: var(--gray-dark); }
.lx-ask { margin-top: 6px !important; }
.lx-alt { text-align: center; font-size: .98rem; line-height: 1.7; margin: 14px 0 4px; }
.lx-alt a { font-weight: 800; color: var(--purple-700); }

/* the 2-minute video */
.lx-video { padding: 44px 0 20px; text-align: center; }
.lx-video h2, .lx-how h2, .lx-faq h2, .lx-end h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.05; margin: 0 0 10px; color: var(--purple-900); text-wrap: balance; }
.lx-sub { margin: 0 0 18px; color: var(--gray-dark); font-size: 1.02rem; }
.lx-player { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 22px; overflow: hidden; border: 4px solid var(--purple-900); box-shadow: 8px 8px 0 var(--gold); background: #000; margin: 0 0 22px; }
.lx-player iframe, .lx-play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.lx-play { padding: 0; cursor: pointer; background: #000; }
.lx-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.lx-play-b { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: var(--purple-900); font-size: 2rem; box-shadow: 0 0 0 8px rgba(255,182,39,.35); animation: lxRing 1.8s ease-out infinite; }
@keyframes lxRing { 0% { box-shadow: 0 0 0 0 rgba(255,182,39,.6); } 100% { box-shadow: 0 0 0 26px rgba(255,182,39,0); } }
.lx-play-len { position: absolute; right: 12px; bottom: 12px; background: rgba(26,11,61,.85); color: #fff; font-family: var(--font-display); font-size: .74rem; letter-spacing: .1em; padding: 6px 10px; border-radius: 999px; }

/* steps */
.lx-how { padding: 40px 0 50px; text-align: center; }
.lx-how h2 { margin-bottom: 22px; }
.lx-how ol { list-style: none; counter-reset: lx; margin: 0 0 30px; padding: 0; display: grid; gap: 14px; text-align: left; }
.lx-how li { counter-increment: lx; position: relative; background: #fff; border: 3px solid var(--purple-900); border-radius: 20px; padding: 16px 16px 16px 70px; box-shadow: 5px 5px 0 var(--gold); }
.lx-how li::before { content: counter(lx); position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: var(--gold); display: grid; place-items: center; font-family: var(--font-display); color: var(--purple-900); }
.lx-how li b { display: block; font-size: 1.1rem; color: var(--purple-900); }
.lx-how li span { color: var(--gray-dark); line-height: 1.45; }

/* questions */
.lx-faq { padding: 10px 0 50px; }
.lx-faq h2 { margin-bottom: 18px; }
.lx-faq details { background: #fff; border: 2px solid var(--purple-900); border-radius: 16px; padding: 14px 18px; margin-bottom: 10px; }
.lx-faq summary { font-weight: 800; cursor: pointer; color: var(--purple-900); }
.lx-faq p { margin: 10px 0 0; line-height: 1.55; color: var(--gray-dark); }

/* the end: the party again */
.lx-end { position: relative; isolation: isolate; overflow: hidden; padding: 46px 0 54px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 50% 0%, #6A34B0 0%, #2A1460 55%, #14072E 100%); }
.lx-end h2 { color: #fff; margin-bottom: 20px; }
.lx-end-e { font-size: 64px; line-height: 1; margin-bottom: 8px; animation: lxBob 3.2s ease-in-out infinite; }
.lx-foot { text-align: center; color: rgba(255,255,255,.7); font-size: .85rem; margin: 0; padding: 18px 0; }
.lx-foot a { color: var(--gold); }

/* /welcome/ keeps its calm white card */
.lx-welcome .lx-hero { padding: 30px 0 44px; }
.lx-welcome .lx-offer { box-shadow: 8px 8px 0 var(--gold); }


/* sites we've built: a swipeable row of phones */
.lx-gal { padding: 34px 0 6px; text-align: center; overflow: hidden; }
.lx-gal h2, .lx-edits h2 { font-family: var(--font-display); text-transform: uppercase; font-size: clamp(1.6rem, 6vw, 2.4rem); line-height: 1.05; margin: 0 0 10px; color: var(--purple-900); text-wrap: balance; }
.lx-gal-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px max(16px, calc(50vw - 380px)) 22px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.lx-gal-row::-webkit-scrollbar { display: none; }
.lx-gal-row:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.lx-phone { flex: 0 0 auto; width: min(66vw, 240px); margin: 0; scroll-snap-align: center; }
.lx-phone-screen { position: relative; border: 6px solid var(--purple-900); border-radius: 30px; overflow: hidden; background: #000; box-shadow: 7px 7px 0 var(--gold); aspect-ratio: 260 / 563; }
.lx-phone-screen::before { content: ''; position: absolute; top: 7px; left: 50%; translate: -50% 0; width: 34%; height: 14px; border-radius: 999px; background: var(--purple-900); z-index: 1; }
.lx-phone-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.lx-phone figcaption { display: grid; margin-top: 14px; line-height: 1.3; } .lx-phone figcaption b { color: var(--purple-900); } .lx-phone figcaption span { color: var(--gray-dark); font-size: .88rem; }
.lx-gal-nav { display: flex; justify-content: center; gap: 12px; }
.lx-gal-nav button { width: 48px; height: 48px; border-radius: 50%; border: 3px solid var(--purple-900); background: #fff; font-size: 1.2rem; font-weight: 900; color: var(--purple-900); cursor: pointer; box-shadow: 3px 3px 0 var(--gold); }
.lx-gal-nav button:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--gold); }

/* don't love it? we change it */
.lx-edits { padding: 30px 0 46px; text-align: center; }
.lx-edits h2 em { font-style: normal; color: var(--purple-600); }
.lx-edits .lx-sub { max-width: 560px; margin: 0 auto 20px; }
.lx-edit-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; text-align: left; }
.lx-edit { display: grid; gap: 4px; background: #fff; border: 3px solid var(--purple-900); border-radius: 18px; padding: 14px 16px; box-shadow: 5px 5px 0 var(--gold); }
.lx-edit span { font-size: 1.6rem; } .lx-edit b { color: var(--purple-900); font-size: 1.05rem; } .lx-edit small { color: var(--gray-dark); font-size: .9rem; }

@media (min-width: 761px) {
  .lx-hero { padding: 34px 0 48px; }
  .lx-burst { width: 170px; height: 170px; } .lx-emoji { font-size: 110px; } .lx-price { width: 100px; height: 100px; font-size: 1.6rem; right: -46px; }
  .lx-mini { grid-auto-flow: column; align-items: center; gap: 14px; padding: 12px 20px; }
  .lx-offer { padding: 26px 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .lx-tick-run, .lx-sparks i, .lx-rays, .lx-emoji, .lx-price, .lx-mini-t i, .lx-play-b, .lx-end-e { animation: none; }
}

/* /claim/ */
.cl-offer ul li b { font-weight: 800; }
.cl-new { display: inline-block; background: var(--gold); color: var(--purple-900); font-family: var(--font-display); font-size: .62rem; letter-spacing: .08em; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.cl-ends { text-align: center; font-size: .95rem; margin: -6px 0 14px; color: var(--purple-700); } .cl-ends b { font-variant-numeric: tabular-nums; }