/**
 * SNW Landing Pages — shared foundation.
 *
 * Extracted from the design spec snw-lp-onescoop-v3.html. Everything in here is
 * used by BOTH landing page variants (A "The Guide" / B "The Shelf"), so Variant B
 * can be built on top of this file without touching it. Variant-specific rules
 * live in their own stylesheet (e.g. onescoop.css).
 *
 * The landing page templates do not call get_header()/get_footer(), so none of the
 * theme's global CSS applies here. This file starts from its own reset.
 */

:root {
  --blue: #418FDE;
  --pink: #F67599;
  --lblue: #9BCBEB;
  --lpink: #F7CED7;
  --pale: #FDF0F3;
  --ink: #2B2B33;
  --w: #FFF;
  --head: 'Lilita One', 'Arial Rounded MT Bold', 'Arial Black', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, sans-serif;
  --hand: 'Caveat', cursive;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(246, 117, 153, .2);
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--w);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--head); font-weight: 400; line-height: 1.1; }

.hand { font-family: var(--hand); font-weight: 700; }

.wrap { max-width: 620px; margin: 0 auto; padding: 0 18px; }

/* Bare element selector on purpose: this stylesheet only ever loads on the landing page
   templates, and a class-scoped rule here would out-specify the section overrides below
   (.hero, .closer, .urg) that need zero or custom padding. */
section { padding: 46px 0; }

img { max-width: 100%; }

/* ===== BUTTONS ===== */
.btn {
  display: block;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  text-align: center;
  background: var(--pink);
  color: #fff;
  font-family: var(--head);
  font-size: 1.18rem;
  padding: 17px 30px;
  border-radius: 999px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(246, 117, 153, .45);
  transition: transform .15s;
}
.btn:active { transform: scale(.97); }
.btn.blue { background: var(--blue); box-shadow: 0 6px 20px rgba(65, 143, 222, .4); }

@media (min-width: 560px) {
  .btn { display: inline-block; width: auto; }
}

/* ===== ASSET FRAMES =====
   A frame renders real media once Poleen's asset is attached in ACF. Until then it
   falls back to the dashed placeholder carrying the shot spec, so the page ships and
   the outstanding shot list stays visible on the page itself. */
.frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(140deg, #EAF3FC 0%, #FDE9EF 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.frame::before {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px dashed rgba(65, 143, 222, .35);
  border-radius: 12px;
}
/* Placeholder glyph shown while the real asset is outstanding — the emoji the design
   file uses for each frame. line-height:1 keeps it optically centred in the frame. */
.frame .paw {
  font-size: 2rem;
  line-height: 1;
  flex: none;
  opacity: .5;
  font-style: normal;
}
.frame .slot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  background: rgba(43, 43, 51, .78);
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  line-height: 1.35;
}
.frame .play {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  color: var(--pink);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25);
  border: none;
  cursor: pointer;
  z-index: 3;
}
.frame .play svg { width: 22px; height: 22px; fill: currentColor; }
.frame .gift {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(43, 43, 51, .65);
  color: #fff;
  font-size: .62rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
  z-index: 3;
}

/* Real media attached: drop the dashed placeholder chrome. */
.frame.has-media { background: var(--ink); }
.frame.has-media::before { display: none; }
.frame.has-media > .slot { display: none; }
.frame > img,
.frame > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ===== STICKY BUY BAR ===== */
.sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  background: #fff;
  border-top: 2px solid var(--lpink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .3s ease;
  box-shadow: 0 -4px 18px rgba(43, 43, 51, .1);
}
.sticky.show { transform: none; }

/* The Alhena launcher and the buy bar both want the bottom edge, and the launcher wins
   on z-index (200000 vs 60), covering the bar's CTA at every width. The bar owns that
   edge on this page, so the launcher steps up over it by the bar's measured height —
   see initBarClearance() in lp-shared.js, which sets --lp-bar-clearance and tags the
   launcher. Matching the bar's own .3s transition keeps the two moving together. */
#helix-chat-container .lp-launcher {
  transition: transform .3s ease;
}
body.lp-bar-shown #helix-chat-container .lp-launcher {
  transform: translateY(calc(-1 * var(--lp-bar-clearance, 0px)));
}
@media (prefers-reduced-motion: reduce) {
  #helix-chat-container .lp-launcher { transition: none; }
}
.sticky .p { font-family: var(--head); color: var(--pink); font-size: 1rem; line-height: 1.1; }
.sticky .p small {
  display: block;
  font-family: var(--body);
  font-weight: 600;
  color: var(--ink);
  font-size: .68rem;
}
.sticky .btn {
  margin: 0;
  width: auto;
  max-width: none;
  display: inline-block;
  font-size: .95rem;
  padding: 12px 22px;
  white-space: nowrap;
}

/* ===== HERO ===== */
.hero { padding: 0; position: relative; }
.hero .frame { border-radius: 0; aspect-ratio: 4/5; max-height: 78svh; width: 100%; }
@media (min-width: 700px) {
  .hero .frame { aspect-ratio: 16/9; max-height: 60vh; }
}
.hero .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(43, 43, 51, .15) 40%, rgba(43, 43, 51, .72) 100%);
  pointer-events: none;
}
.hero .content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 18px 20px;
  text-align: center;
  color: #fff;
}
.hero h1 { font-size: clamp(1.8rem, 7.2vw, 2.6rem); text-shadow: 0 2px 14px rgba(0, 0, 0, .45); }
.hero .strap {
  font-family: var(--hand);
  font-size: 1.35rem;
  color: var(--lpink);
  display: block;
  margin: 2px 0 10px;
}
.hero .offerline { font-size: .92rem; font-weight: 600; margin: 6px 0 14px; }
.hero .scarcity { font-size: .78rem; font-weight: 700; margin-top: 8px; color: var(--lpink); }

/* The Waggle escape hatch is deliberately lighter than the primary CTA — the hero
   carries one job, and a second full-weight button would compete with it. */
.wagbtn {
  display: inline-block;
  margin-top: 12px;
  background: #fff;
  color: var(--pink);
  font-family: var(--head);
  font-size: .88rem;
  padding: 9px 18px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* ===== SHARED TRIM ===== */
/* Emoji icon. <i> purely as a short, semantically empty hook — it is decorative and
   aria-hidden, and font-style:normal undoes the italic the tag would otherwise carry. */
.ic {
  font-style: normal;
  line-height: 1;
  flex: none;
}

.trustrip { background: var(--ink); color: #fff; padding: 11px 12px; }
.microtrust {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: .72rem;
  font-weight: 600;
  opacity: .95;
}
.trustrip .microtrust { margin-top: 0; }
.microtrust span { display: flex; align-items: center; gap: 5px; }
.microtrust .ic { font-size: .95rem; }

.codechip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  background: rgba(255, 255, 255, .14);
  border: 1.5px dashed rgba(255, 255, 255, .65);
  color: #fff;
  border-radius: 12px;
  padding: 8px 14px;
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--body);
}
.codechip b { font-family: var(--head); letter-spacing: .04em; }
.codechip small { font-size: .66rem; opacity: .85; font-weight: 600; }

/* ===== SECTION HEADERS ===== */
.sh { text-align: center; margin-bottom: 20px; }
.sh h2 { font-size: 1.55rem; }
.sh .hand { color: var(--pink); font-size: 1.3rem; display: block; }

/* ===== FAQ ===== */
.faq { background: var(--pale); }
.faq details { background: #fff; border-radius: 13px; margin-bottom: 9px; overflow: hidden; }
.faq summary {
  cursor: pointer;
  font-weight: 600;
  padding: 15px 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  font-size: .93rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--head); color: var(--pink); font-size: 1.2rem; }
.faq details[open] summary::after { content: "\2013"; }
.faq .ans { padding: 0 17px 15px; font-size: .88rem; }
.faq .ans a { color: var(--blue); font-weight: 700; }

/* ===== SITE HEADER (logo-only launch spec) =====
   Nav is hidden by default and only revealed by ?nav=full, which adds .navfull to
   the body. Paid landing pages leak attention through every nav link, so logo-only
   is the launch default and the full-nav variant exists purely for the A/B test. */
.lp-head {
  background: #fff;
  box-shadow: 0 2px 10px rgba(43, 43, 51, .07);
  position: relative;
  z-index: 70;
}
.lp-head .inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  gap: 12px;
}
.lp-head .logo { height: 44px; width: auto; display: block; }
.lp-nav { display: none; }
.lp-nav .lp-nav-list {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  font-size: .86rem;
  font-weight: 600;
}
.lp-nav a { color: var(--ink); text-decoration: none; }
body.navfull .lp-nav { display: block; }
@media (max-width: 760px) {
  body.navfull .lp-nav { display: none; }
}

/* ===== SITE FOOTER ===== */
.lp-foot {
  background: var(--ink);
  color: #cfcfda;
  padding: 38px 18px 100px;
  font-size: .82rem;
  text-align: left;
}
.lp-foot a { color: #cfcfda; }
.lp-foot .inner { max-width: 1000px; margin: 0 auto; }
.lp-foot .cols { display: flex; flex-wrap: wrap; gap: 30px; justify-content: space-between; }
.lp-foot .brand { min-width: 180px; }
.lp-foot .brand img {
  height: 40px;
  width: auto;
  background: #fff;
  border-radius: 10px;
  padding: 5px 8px;
}
.lp-foot .menus { display: flex; gap: 36px; flex-wrap: wrap; }
.lp-foot .menus ul { list-style: none; display: grid; gap: 7px; }
.lp-foot .menus a { text-decoration: none; }
.lp-foot .contact { min-width: 200px; }
.lp-foot .contact h2 { font-family: var(--head); color: #fff; margin-bottom: 8px; font-size: 1rem; }
.lp-foot .base {
  border-top: 1px solid rgba(255, 255, 255, .15);
  margin-top: 26px;
  padding-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
.lp-foot .pay { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.lp-foot .pay img { height: 22px; width: auto; background: #fff; border-radius: 4px; padding: 2px 4px; }
.lp-foot .legal { margin-top: 14px; font-size: .72rem; opacity: .75; }

/* Suppress the site's global mobile cart bar (functions.php:1877 injects it inline on
   wp_head for every page with a non-empty cart). On a landing page it would sit on top of
   our own sticky bar and offer "Proceed to Checkout" before the pitch has landed — the
   same attention leak the logo-only header exists to avoid. The two-class selector wins
   over the theme's `.snw-mobile-footer{display:flex!important}` regardless of load order. */
body.lp .snw-mobile-footer {
  display: none !important;
}

/* Screen-reader-only helper (the theme's global CSS is not loaded here). */
.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}