/* The landing-page theme. One file, thirty pages (WP-9).
   =============================================================================
   WHY THIS FILE EXISTS
   Until this package the thirty acquisition pages under lp/ carried thirty hand-built <style>
   blocks: 2,900 rules, zero of them byte-identical to a rule on any other page, nine display
   typefaces standing in for "the Light Lounge look". A stranger who clicked a gym ad, a corporate
   ad and a snowbird ad saw three unrelated wellness businesses, and none of the three looked like
   the site they landed on next.

   Every value below resolves from assets/tokens.css - the one token file WP-3 shipped. This file
   declares no colour of its own; a hex here would be the first step back to thirty palettes. The
   ground is Nocturne (the guest dark ground), because that is what the marketing site's editorial
   treatment already is and the funnel has to be continuous with it.

   PER-PAGE EXPRESSION
   A page picks a mood - bronze, blush or gold - and that is the whole of its own visual voice.
   Each mood only re-points --lp-accent/--lp-accent-soft at tokens that already exist, so a med spa
   page and a CrossFit page read as different rooms in the same building rather than as different
   companies.

   Everything here is generated into pages by functions/_lib/landing-page-template.js. Editing a
   rule changes all thirty pages at once, which is the point.
   ========================================================================== */

:root{
  --lp-accent:var(--ll-nocturne-bronze);
  --lp-accent-soft:var(--ll-nocturne-bronze-bright);
  --lp-ground:var(--ll-nocturne-ground);
  --lp-ground-deep:var(--ll-nocturne-ground-deep);
  --lp-raised:var(--ll-nocturne-raised);
  --lp-ink:var(--ll-nocturne-ink);
  --lp-ink-soft:var(--ll-nocturne-ink-soft);
  --lp-line:var(--ll-nocturne-line);
  --lp-maxw:1080px;
}
body.mood-blush{--lp-accent:var(--ll-blush);--lp-accent-soft:var(--ll-gold-soft)}
body.mood-gold{--lp-accent:var(--ll-gold);--lp-accent-soft:var(--ll-nocturne-bronze-bright)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--lp-ground);
  color:var(--lp-ink);
  font-family:var(--ll-font-sans);
  font-size:16px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
h1,h2,h3,.serif{font-family:var(--ll-font-display);font-weight:500;line-height:1.08;letter-spacing:-.01em}
em{font-style:italic;color:var(--lp-accent-soft)}
.wrap{max-width:var(--lp-maxw);margin:0 auto;padding:0 24px}
@media(max-width:680px){.wrap{padding:0 20px}}

.snrg-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--ll-accent);color:var(--ll-on-accent);
  padding:10px 16px;border-radius:0 0 var(--ll-radius-sm) 0;font:600 14px var(--ll-font-sans);text-decoration:none}
.snrg-skip:focus{left:0}

/* --- buttons: one grammar, three weights ---------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:var(--ll-tap-min);padding:14px 26px;border:1px solid var(--ll-accent-border);
  border-radius:var(--ll-radius-pill);cursor:pointer;
  background:linear-gradient(135deg,var(--ll-accent),var(--ll-accent-deep));
  color:var(--ll-on-accent);
  font:700 var(--ll-text-btn)/1.2 var(--ll-font-sans);letter-spacing:.02em;text-align:center;
  transition:transform var(--ll-motion-fast) var(--ll-ease),filter var(--ll-motion-fast) var(--ll-ease);
}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;border-color:var(--lp-line);color:var(--lp-ink)}
.btn.ghost:hover{border-color:var(--lp-accent);color:var(--lp-accent-soft)}
.btn.sm{min-height:40px;padding:10px 18px;font-size:var(--ll-text-sm)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5;cursor:default;transform:none}

.eyebrow{display:inline-block;font:700 var(--ll-text-eyebrow)/1.4 var(--ll-font-sans);
  letter-spacing:var(--ll-tracking-eyebrow);text-transform:uppercase;color:var(--lp-accent)}

/* --- top bar --------------------------------------------------------------- */
.bar{position:relative;z-index:5;border-bottom:1px solid var(--lp-line);background:var(--lp-ground)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--ll-font-display);font-size:19px;font-weight:600}
.brand svg{width:17px;height:23px;flex:none}
.bar .partner{font:600 var(--ll-text-xs)/1.3 var(--ll-font-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--lp-ink-soft)}

/* --- hero ------------------------------------------------------------------ */
.hero{position:relative;overflow:hidden;padding:72px 0 56px;border-bottom:1px solid var(--lp-line)}
.hero:before{content:"";position:absolute;inset:-40% 40% 40% -20%;pointer-events:none;
  background:radial-gradient(circle,var(--ll-rich-glow),transparent 66%);filter:blur(30px);opacity:.9}
.hero .wrap{position:relative;z-index:2}
.hero h1{font-size:clamp(38px,6vw,68px);max-width:16ch;margin:18px 0 0}
.hero .sub{color:var(--lp-ink-soft);font-size:var(--ll-text-lg);max-width:56ch;margin:20px 0 0}
.hero .ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hero .stats{display:flex;flex-wrap:wrap;gap:30px;margin-top:34px}
.hero .stats b{display:block;font-family:var(--ll-font-display);font-size:26px;color:var(--lp-accent-soft)}
.hero .stats span{font:600 var(--ll-text-xs)/1.4 var(--ll-font-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--lp-ink-soft)}
.hero .note{margin-top:20px;color:var(--lp-ink-soft);font-size:var(--ll-text-sm)}

/* --- sections -------------------------------------------------------------- */
section{position:relative;padding:58px 0;border-top:1px solid var(--lp-line)}
section:first-of-type{border-top:none}
.shead{max-width:64ch}
.shead h2{font-size:clamp(26px,3.6vw,38px);margin-top:10px}
.shead .lead{color:var(--lp-ink-soft);margin-top:14px}
.grid{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--lp-raised);border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);padding:24px}
.card h3{font-size:19px}
.card p{color:var(--lp-ink-soft);font-size:15px;margin-top:8px}
.card .meta{display:block;margin-top:12px;font:700 var(--ll-text-sm)/1.3 var(--ll-font-sans);color:var(--lp-accent-soft)}

.steps{counter-reset:step;display:grid;gap:16px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.step{position:relative;padding:22px 22px 22px 60px;border:1px solid var(--lp-line);
  border-radius:var(--ll-radius-lg);background:var(--lp-ground-deep)}
.step:before{counter-increment:step;content:counter(step);position:absolute;left:20px;top:20px;
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--lp-accent);color:var(--ll-nocturne-ground);font:700 13px var(--ll-font-sans)}
.step h3{font-size:17px}
.step p{color:var(--lp-ink-soft);font-size:14.5px;margin-top:6px}

.quotes{display:grid;gap:18px;margin-top:34px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{background:var(--lp-raised);border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);padding:24px}
.quote p{font-family:var(--ll-font-display);font-style:italic;font-size:17px;line-height:1.45}
.quote .who{display:block;margin-top:12px;font:600 var(--ll-text-sm)/1.4 var(--ll-font-sans);color:var(--lp-ink-soft)}

.prose{margin-top:20px;max-width:68ch}
.prose p{color:var(--lp-ink-soft);margin-top:14px}
.bullets{margin-top:20px;list-style:none;max-width:68ch}
.bullets li{position:relative;padding-left:26px;margin-top:12px;color:var(--lp-ink-soft)}
.bullets li:before{content:"";position:absolute;left:4px;top:10px;width:8px;height:8px;border-radius:50%;
  background:var(--lp-accent)}

.statband{display:grid;gap:18px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.statband div{border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);padding:20px;background:var(--lp-ground-deep)}
.statband b{display:block;font-family:var(--ll-font-display);font-size:30px;color:var(--lp-accent-soft)}
.statband span{font:600 var(--ll-text-xs)/1.4 var(--ll-font-sans);letter-spacing:.1em;
  text-transform:uppercase;color:var(--lp-ink-soft)}

/* --- the protocol block (WP-9's whole point) ------------------------------- */
.protoblock{background:var(--lp-ground-deep)}
.protoblock-head{max-width:64ch}
.protoblock-head h2{font-size:clamp(24px,3.2vw,34px);margin-top:10px}
.protoblock-head .lead{color:var(--lp-ink-soft);margin-top:12px}
.protoblock-chips{display:grid;gap:14px;margin-top:28px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.protoblock-chip{display:block;padding:18px 20px;border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);
  background:var(--lp-raised);transition:border-color var(--ll-motion-fast) var(--ll-ease),
  transform var(--ll-motion-fast) var(--ll-ease)}
.protoblock-chip:hover{border-color:var(--lp-accent);transform:translateY(-2px)}
.protoblock-chip b{display:block;font-family:var(--ll-font-display);font-size:19px;color:var(--lp-ink)}
.protoblock-chip span{display:block;margin-top:6px;color:var(--lp-ink-soft);font-size:14.5px}
.protoblock-all{display:inline-block;margin-top:22px;font:700 var(--ll-text-btn)/1.4 var(--ll-font-sans);
  color:var(--lp-accent-soft);border-bottom:1px solid var(--lp-accent)}

/* --- offer + claim form ---------------------------------------------------- */
.offer{max-width:62ch}
.offer h2{font-size:clamp(28px,4vw,44px);margin-top:10px}
.offer p{color:var(--lp-ink-soft);margin-top:14px}
.claimform{max-width:420px;margin-top:26px}
.claimform .field{margin-bottom:13px}
.claimform label{display:block;font:600 var(--ll-text-sm)/1.4 var(--ll-font-sans);color:var(--lp-ink-soft);margin-bottom:6px}
.claimform input{width:100%;font:inherit;font-size:16px;padding:14px 17px;border-radius:var(--ll-radius-pill);
  color:var(--lp-ink);background:var(--lp-raised);border:1px solid var(--lp-line);outline:none;
  transition:border-color var(--ll-motion-fast) var(--ll-ease)}
.claimform input::placeholder{color:var(--lp-ink-soft)}
.claimform input:focus{border-color:var(--lp-accent)}
.claimform .btn{width:100%;margin-top:8px}
.claimform .fine{font-size:13px;color:var(--lp-ink-soft);margin-top:12px;line-height:1.5}
/* Written consent (D-3411 and D-3438, 2026-09-26): optional, unticked, below the offer and its fine
   print, in its own block, never smaller than the fine print (13px) and in the same colour. Hidden
   until lp/written-consent.js hears a yes can be kept. The rules above style every .claimform input
   as a full-width pill; a checkbox is put back to a checkbox. */
.claimform .written-consent{display:flex;gap:10px;align-items:flex-start;margin-top:14px}
.claimform .written-consent[hidden]{display:none}
.claimform .written-consent input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;margin:2px 0 0;padding:0;
  border-radius:4px;accent-color:var(--lp-accent);cursor:pointer}
.claimform .written-consent input[type=checkbox]:focus-visible{outline:2px solid var(--lp-accent);outline-offset:2px}
.claimform .written-consent label{display:block;margin:0;font:400 13px/1.5 var(--ll-font-sans);color:var(--lp-ink-soft);cursor:pointer}

/* --- faq ------------------------------------------------------------------- */
.faq{max-width:74ch;margin-top:26px}
.q{border-bottom:1px solid var(--lp-line)}
.qh{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;
  padding:18px 0;background:none;border:none;color:inherit;text-align:left;cursor:pointer;
  font:600 16px/1.4 var(--ll-font-sans)}
.qh .pl{color:var(--lp-accent);font-size:20px;line-height:1}
.qb{max-height:0;overflow:hidden;opacity:0;color:var(--lp-ink-soft);font-size:15px;
  transition:max-height var(--ll-motion-slow) var(--ll-ease),opacity var(--ll-motion-slow) var(--ll-ease)}
.q.open .qb{max-height:420px;opacity:1;margin:0 0 18px}

/* --- the join hand-off ----------------------------------------------------- */
.join{background:linear-gradient(135deg,var(--ll-rich-top),var(--ll-rich-bottom));border-top:1px solid var(--lp-line)}
.join .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px}
.join h2{font-size:clamp(22px,3vw,30px);color:var(--ll-rich-ink)}
.join p{color:var(--lp-ink-soft);margin-top:8px;max-width:52ch}

/* --- footer ---------------------------------------------------------------- */
.foot{padding:34px 0 40px;border-top:1px solid var(--lp-line);color:var(--lp-ink-soft);font-size:13px;line-height:1.7}
.foot a{color:var(--lp-accent-soft);font-weight:600}
.foot .links{margin-top:12px;display:flex;flex-wrap:wrap;gap:16px}

/* --- sticky bar + toast ---------------------------------------------------- */
.sticky{position:fixed;left:0;right:0;bottom:0;z-index:var(--ll-stack-z-bar);
  background:var(--ll-nocturne-surface);backdrop-filter:blur(12px);border-top:1px solid var(--lp-line);
  padding:11px 0 calc(11px + env(safe-area-inset-bottom));transform:translateY(120%);
  transition:transform var(--ll-motion-standard) var(--ll-ease)}
.sticky.show{transform:none}
.sticky .wrap{display:flex;gap:12px;align-items:center;justify-content:space-between}
.sticky .lbl{font:600 14px/1.35 var(--ll-font-sans)}
.sticky .lbl span{display:block;font-weight:400;font-size:12px;color:var(--lp-ink-soft)}
.toast{position:fixed;left:50%;bottom:88px;transform:translateX(-50%) translateY(12px);
  background:var(--ll-accent);color:var(--ll-on-accent);font:600 14px var(--ll-font-sans);
  padding:12px 22px;border-radius:var(--ll-radius-pill);opacity:0;z-index:var(--ll-stack-z-toast);
  transition:opacity var(--ll-motion-standard) var(--ll-ease),transform var(--ll-motion-standard) var(--ll-ease)}
.toast.show{opacity:1;transform:translateX(-50%)}

/* --- the tap-through wizard (the seven in-venue tablet and QR pages) -------- */
.scenes{padding:0}
.scene{display:none;padding:44px 0 60px}
.scene.active{display:block}
.scene h1{font-size:clamp(32px,5.4vw,54px);margin-top:16px}
.scene h2{font-size:clamp(24px,4vw,36px);margin-top:10px}
.scene .lede{color:var(--lp-ink-soft);font-size:var(--ll-text-lg);max-width:52ch;margin-top:18px}
.scene .bridge{margin-top:14px;color:var(--lp-accent-soft);font-weight:600}
.scene .qsub{color:var(--lp-ink-soft);margin-top:8px}
.tiles{display:grid;gap:14px;margin:26px 0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.tile{text-align:left;padding:20px;border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);
  background:var(--lp-raised);color:inherit;cursor:pointer;font:inherit;
  transition:border-color var(--ll-motion-fast) var(--ll-ease)}
.tile[aria-pressed="true"]{border-color:var(--lp-accent);background:var(--lp-ground-deep)}
.tile .tt{display:block;font-family:var(--ll-font-display);font-size:19px}
.tile .ben{display:block;margin-top:6px;color:var(--lp-ink-soft);font-size:14.5px}
.guide{margin:22px 0;border:1px solid var(--lp-line);border-radius:var(--ll-radius-lg);padding:20px;background:var(--lp-ground-deep)}
.guide b{display:block;font:700 var(--ll-text-sm)/1.4 var(--ll-font-sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--lp-accent-soft)}
.guide ul{margin:12px 0 0 18px;color:var(--lp-ink-soft);font-size:14.5px}
.guide p{margin-top:12px;color:var(--lp-ink-soft);font-size:13.5px}
.dots{display:flex;gap:8px;justify-content:center;padding:0 0 34px}
.dots i{width:8px;height:8px;border-radius:50%;background:var(--lp-line);display:block}
.dots i.on{background:var(--lp-accent)}
.scene-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}

@media(max-width:680px){
  .hero{padding:52px 0 44px}
  section{padding:44px 0}
  .join .wrap{flex-direction:column;align-items:flex-start}
  /* The lockup stays on one line at 390px - a wrapped brand name in the top bar reads as a
     broken page, and the header CTA gives up the width instead. */
  .brand{white-space:nowrap;font-size:17px}
  .bar .btn.sm{padding:9px 14px;font-size:var(--ll-text-xs)}
  .hero .stats{gap:20px}
}