/* Meta Ads landing pages (/landing/<page>). Same "Museum of Us" look as the home page (hero.css): plum DynaPuff
   headlines, Great Vibes script, handwritten copy, pink stitched buttons — in one small stylesheet so the page
   paints fast on mobile data. The phone story reuses the home hero's scenes (/site/home/reveal.css) plus the
   per-product scenes in stories.css. */
:root{
  --lp-plum:#4a1d2e;--lp-ink:#7a4a5a;--lp-pink:#e11d74;--lp-pink-2:#f472b6;--lp-wine:#9d174d;--lp-gold:#fbbf24;
  --lp-cream:#fffaf0;--lp-bg:#fff8f3;--lp-card:#ffffff;--lp-line:rgba(225,29,116,.18);
  --lp-disp:"DynaPuff","Baloo 2",system-ui,sans-serif;--lp-script:"Great Vibes","Dancing Script",Georgia,cursive;
  --lp-hand:"Shantell Sans","Comic Sans MS","Segoe Print",cursive;--lp-ui:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--lp-bg);color:var(--lp-plum);font:16px/1.6 var(--lp-hand);overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--lp-pink)}
.lp-wrap{width:100%;max-width:1120px;margin:0 auto;padding:0 16px}
.lp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.grad{font-family:var(--lp-script);font-weight:400;font-size:1.35em;line-height:1;background:linear-gradient(135deg,#f472b6 0%,#e11d74 45%,#9d174d 75%,#f472b6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 .12em .08em 0}

/* A. Minimal header */
.lp-header{position:sticky;top:0;z-index:50;background:rgba(255,248,243,.92);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--lp-line)}
.lp-header .lp-wrap{display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px}
.lp-logo{display:flex;align-items:center;gap:8px;text-decoration:none;color:var(--lp-plum);font:700 1.15rem/1 var(--lp-disp)}
.lp-logo img{width:34px;height:34px}
.lp-logo-t span{color:var(--lp-pink)}
.lp-explore{font:600 .85rem/1.2 var(--lp-hand);color:var(--lp-wine);text-decoration:none;border-bottom:1.5px dashed rgba(157,23,77,.4);white-space:nowrap}

/* Buttons */
.lp-cta{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;min-height:54px;padding:14px 26px;border-radius:999px;border:0;cursor:pointer;text-decoration:none;color:#fff;
  font:600 1.05rem/1.2 var(--lp-disp);letter-spacing:.01em;background:linear-gradient(135deg,#f472b6 0%,#e11d74 60%,#be185d 100%);
  box-shadow:0 12px 26px -10px rgba(225,29,116,.6);outline:2px dashed rgba(255,255,255,.55);outline-offset:-6px;transition:transform .2s ease,box-shadow .2s ease}
.lp-cta:focus-visible{outline:3px solid var(--lp-gold);outline-offset:3px}
.lp-cta .arr{transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.lp-cta:hover{transform:translateY(-2px);box-shadow:0 16px 34px -10px rgba(225,29,116,.7),0 0 0 8px rgba(244,114,182,.15)}.lp-cta:hover .arr{transform:translateX(3px)}}

/* B. Hero */
.lp-hero{position:relative;overflow:hidden;padding:28px 0 40px;background:linear-gradient(160deg,#fff8f3 0%,#fff1f4 55%,#fde8ee 100%)}
.lp-hero::before{content:'';position:absolute;inset:0;background-image:repeating-linear-gradient(135deg,rgba(244,114,182,.07) 0 12px,transparent 12px 26px);pointer-events:none}
.lp-hero .lp-wrap{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center}
.lp-pill{display:inline-flex;align-items:center;gap:.4rem;padding:6px 14px;border-radius:999px;background:#fde68a;color:#7c2d12;font:700 .85rem/1.3 var(--lp-hand);box-shadow:0 6px 14px -8px rgba(124,45,18,.45)}
.lp-h1{margin:14px 0 12px;font:700 clamp(1.85rem,4.2vw,3rem)/1.14 var(--lp-disp);color:var(--lp-plum);letter-spacing:-.01em}
.lp-h1 mark{background:linear-gradient(transparent 58%,rgba(251,191,36,.65) 58%,rgba(251,191,36,.65) 92%,transparent 92%);color:var(--lp-pink);padding:0 .06em}
.lp-lead{margin:0 0 20px;font-size:1.08rem;color:var(--lp-ink);max-width:520px}
.lp-price-note{margin:14px 0 0;font:600 .95rem/1.5 var(--lp-hand);color:var(--lp-plum)}
.lp-price-note b{font-family:var(--lp-disp);color:var(--lp-pink);font-size:1.15rem}
.lp-price-note s{color:#a07a88;font-weight:500}
.lp-assure{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.lp-assure li{padding:5px 12px;border-radius:999px;background:var(--lp-cream);border:1.5px dashed rgba(225,29,116,.35);font:600 .82rem/1.3 var(--lp-hand);color:var(--lp-plum)}

/* The phone (same frame as the home hero) */
.lp-visual{position:relative;display:flex;flex-direction:column;align-items:center}
.lp-glow{position:absolute;top:30px;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(225,29,116,.28),transparent 65%);filter:blur(30px)}
.lp-phone-box{position:relative;width:280px;height:560px}
.lp-phone{position:absolute;left:0;top:0;width:280px;height:560px;background:#4a1d2e;border-radius:44px;padding:8px;transform-origin:top left;
  box-shadow:0 30px 70px rgba(225,29,116,.25),0 12px 30px rgba(0,0,0,.15),inset 0 0 0 2px rgba(255,255,255,.06)}
.lp-notch{position:absolute;top:8px;left:50%;transform:translateX(-50%);width:100px;height:22px;background:#4a1d2e;border-radius:0 0 14px 14px;z-index:10}
.lp-screen{position:relative;width:100%;height:100%;border-radius:36px;overflow:hidden;background:#fff5fa;font-family:var(--lp-ui)}
.lp-chapters{margin-top:16px;display:flex;flex-direction:column;align-items:center;gap:9px;min-height:44px}
.lp-caption{font:600 .85rem/1.3 var(--lp-hand);color:var(--lp-ink);text-align:center;min-height:1.3em;transition:opacity .3s ease}
.lp-caption.is-swap{opacity:0}
.lp-caption b{color:var(--lp-pink)}
.lp-dots{display:flex;gap:8px}
.lp-dots span{width:7px;height:7px;border-radius:50%;background:rgba(74,29,46,.2);transition:all .4s ease}
.lp-dots span.active{width:24px;border-radius:4px;background:linear-gradient(90deg,#e11d74,#9d174d)}
.lp-phone-note{margin:6px 0 0;font-size:.75rem;color:#a07a88;text-align:center}

/* Sections */
.lp-sec{padding:56px 0}
.lp-sec.alt{background:#fff1f4}
.lp-kicker{display:inline-block;font:700 .82rem/1.2 var(--lp-hand);color:var(--lp-wine);background:var(--lp-cream);border:1.5px dashed rgba(225,29,116,.35);border-radius:999px;padding:5px 12px}
.lp-h2{margin:12px 0 10px;font:700 clamp(1.5rem,3.2vw,2.2rem)/1.2 var(--lp-disp);color:var(--lp-plum)}
.lp-sub{margin:0 0 26px;color:var(--lp-ink);max-width:640px}
.lp-center{text-align:center}
.lp-center .lp-sub{margin-left:auto;margin-right:auto}

/* C. See what you're creating */
.lp-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.lp-card{background:var(--lp-card);border:1.5px solid var(--lp-line);border-radius:22px;padding:22px;box-shadow:0 14px 30px -24px rgba(157,23,77,.45)}
.lp-card h3{margin:0 0 12px;font:700 1.15rem/1.3 var(--lp-disp);color:var(--lp-plum)}
.lp-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.lp-list li{position:relative;padding-left:30px;color:var(--lp-plum)}
.lp-list li::before{content:'💗';position:absolute;left:0;top:0;font-size:.95rem}
.lp-steps-r{margin:0;padding:0;list-style:none;counter-reset:r;display:grid;gap:12px}
.lp-steps-r li{counter-increment:r;position:relative;padding-left:40px;color:var(--lp-plum)}
.lp-steps-r li::before{content:counter(r);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#f472b6,#e11d74);color:#fff;font:700 .85rem/1 var(--lp-disp)}
.lp-steps-r b{font-family:var(--lp-disp);font-weight:600}

/* D. Benefits */
.lp-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lp-benefit{background:var(--lp-card);border-radius:22px;padding:22px;border:1.5px dashed rgba(225,29,116,.3)}
.lp-benefit .ic{font-size:1.8rem;line-height:1}
.lp-benefit h3{margin:10px 0 6px;font:700 1.08rem/1.3 var(--lp-disp)}
.lp-benefit p{margin:0;color:var(--lp-ink);font-size:.95rem}

/* E. How it works */
.lp-how{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:h}
.lp-how li{counter-increment:h;background:var(--lp-card);border-radius:20px;padding:20px 18px;border:1.5px solid var(--lp-line);position:relative}
.lp-how li::before{content:counter(h);display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:#fde68a;color:#7c2d12;font:700 1rem/1 var(--lp-disp);margin-bottom:10px}
.lp-how h3{margin:0 0 4px;font:700 1rem/1.3 var(--lp-disp)}
.lp-how p{margin:0;font-size:.92rem;color:var(--lp-ink)}

/* F. Pricing */
.lp-price{max-width:620px;margin:0 auto;background:var(--lp-card);border-radius:28px;padding:28px 22px;border:2px dashed rgba(225,29,116,.35);text-align:center;box-shadow:0 24px 50px -34px rgba(157,23,77,.55)}
.lp-price-amt{font:700 3rem/1 var(--lp-disp);color:var(--lp-pink)}
.lp-price-amt small{display:block;margin-top:6px;font:600 .9rem/1.3 var(--lp-hand);color:var(--lp-ink)}
.lp-price-amt s{font-size:1.2rem;color:#a07a88;font-weight:600;margin-left:6px}
.lp-price-off{display:inline-block;margin-top:8px;padding:3px 10px;border-radius:999px;background:#fde68a;color:#7c2d12;font:700 .78rem/1.3 var(--lp-hand)}
.lp-facts{margin:22px 0;padding:0;list-style:none;text-align:left;display:grid;gap:12px}
.lp-facts li{display:grid;grid-template-columns:28px 1fr;gap:8px;color:var(--lp-plum);font-size:.96rem}
.lp-facts li b{font-family:var(--lp-disp);font-weight:600}

/* G. FAQ */
.lp-faq{max-width:760px;margin:0 auto;display:grid;gap:10px}
.lp-faq details{background:var(--lp-card);border-radius:18px;border:1.5px solid var(--lp-line);overflow:hidden}
.lp-faq summary{list-style:none;cursor:pointer;padding:16px 48px 16px 18px;position:relative;font:600 1rem/1.4 var(--lp-disp);color:var(--lp-plum)}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:'+';position:absolute;right:18px;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fde2ea;color:var(--lp-pink);font:700 1.1rem/1 var(--lp-ui);transition:transform .2s ease}
.lp-faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.lp-faq details p{margin:0;padding:0 18px 16px;color:var(--lp-ink)}
.lp-help{max-width:760px;margin:20px auto 0;text-align:center;color:var(--lp-ink);font-size:.95rem}

/* H. Final CTA */
.lp-final{padding:56px 0 64px;text-align:center;background:linear-gradient(160deg,#fde8ee 0%,#fff1f4 60%,#fff8f3 100%)}
.lp-final .lp-h2{max-width:640px;margin-left:auto;margin-right:auto}
.lp-final .lp-price-note{margin-top:14px}

/* Footer: keeps the policy and support links */
.lp-footer{background:var(--lp-plum);color:#f9d7e3;padding:30px 0 34px;font-size:.88rem}
.lp-footer nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin-bottom:14px}
.lp-footer a{color:#fff;text-decoration:none;border-bottom:1px dashed rgba(255,255,255,.35)}
.lp-footer p{margin:4px 0;text-align:center}

/* Sticky mobile CTA: hidden while the hero or final button is on screen, never over the cookie banner */
.lp-sticky{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;transform:translateY(130%);transition:transform .35s ease}
.lp-sticky.is-on{transform:none}
.lp-sticky .lp-cta{width:100%;min-height:52px;font-size:1rem}
body.lp-has-banner .lp-sticky{display:none!important}

/* Responsive */
@media (max-width:900px){
  .lp-hero .lp-wrap{grid-template-columns:1fr;gap:18px}
  .lp-hero{padding:18px 0 34px}
  .lp-copy{text-align:center}
  .lp-copy .lp-lead,.lp-copy .lp-sub{margin-left:auto;margin-right:auto}
  .lp-assure{justify-content:center}
  .lp-benefits{grid-template-columns:1fr}
  .lp-how{grid-template-columns:1fr 1fr}
  .lp-two{grid-template-columns:1fr}
  .lp-sticky{display:block}
  body{padding-bottom:84px}
}
@media (max-width:900px){
  /* Phone scaled down on small screens; reveal scripts measure the scaled stage, so taps still line up. */
  .lp-phone-box{width:238px;height:476px}
  .lp-phone{transform:scale(.85)}
}
@media (max-width:520px){
  .lp-how{grid-template-columns:1fr}
  .lp-sec{padding:44px 0}
  .lp-cta{width:100%}
  .lp-price-amt{font-size:2.6rem}
}
@media (max-width:360px){
  .lp-phone-box{width:210px;height:420px}
  .lp-phone{transform:scale(.75)}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.lp-sticky,.lp-cta{transition:none}}