/* Heed — Loyalty-led landing additions.
   New components only (wallet pass, pinned loop, gallery, bento, trust band).
   Reuses the tokens in styles.css (--accent, --border, --font-*, etc).
   All classes are lp- prefixed to avoid clashing with existing CSS. */

/* offset anchor jumps so the sticky 64px nav doesn't cover section headings */
section[id]{scroll-margin-top:88px}

/* ---------- wallet stamp card ---------- */
.lp-pass{
  width:320px;border-radius:20px;background:var(--accent-dark);color:#fff;
  padding:22px 22px 20px;text-align:left;flex:none;
  box-shadow:0 30px 70px -24px rgba(12,56,48,.55), 0 8px 22px -10px rgba(0,0,0,.22);
}
.lp-pass-top{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.lp-pass-logo{width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.16);
  display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.lp-pass-top b{font-size:14.5px;font-weight:600;letter-spacing:-0.01em}
.lp-pass-top small{display:block;font-size:11px;color:rgba(255,255,255,.6);font-weight:500;margin-top:1px}
.lp-pass-count{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:rgba(255,255,255,.75)}
.lp-stamps{display:grid;grid-template-columns:repeat(6,1fr);gap:11px;margin:6px 0 18px}
.lp-stamp{aspect-ratio:1;border-radius:50%;border:1.5px solid rgba(255,255,255,.28);
  display:flex;align-items:center;justify-content:center;
  transition:background .35s ease, border-color .35s ease, transform .35s ease}
.lp-stamp svg{width:14px;height:14px;opacity:0;transform:scale(.4);
  transition:opacity .3s ease, transform .3s ease}
.lp-stamp.on{background:#fff;border-color:#fff;transform:scale(1.04)}
.lp-stamp.on svg{opacity:1;transform:scale(1);color:var(--accent)}
.lp-pass-reward{font-size:12.5px;color:rgba(255,255,255,.82);
  border-top:1px solid rgba(255,255,255,.14);padding-top:14px;line-height:1.4}
.lp-pass-reward b{color:#fff;font-weight:600}

/* ---------- google review card ---------- */
.lp-review{width:300px;border-radius:16px;background:#fff;border:1px solid var(--border);
  padding:20px;flex:none;box-shadow:0 24px 60px -26px rgba(0,0,0,.25)}
.lp-review-head{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;
  color:var(--text-secondary);margin-bottom:12px}
.lp-gdot{width:18px;height:18px;border-radius:50%;flex:none;
  background:conic-gradient(#EA4335,#FBBC05,#34A853,#4285F4,#EA4335)}
.lp-review-stars{display:flex;gap:3px;margin-bottom:10px}
.lp-review-stars svg{width:18px;height:18px;color:var(--warning)}
.lp-review p{font-size:14px;color:var(--text-primary);line-height:1.45;margin:0}
.lp-review .by{font-size:12.5px;color:var(--text-muted);margin-top:8px}

/* ---------- hero ---------- */
.lp-hero{text-align:center;
  min-height:calc(100vh - 64px);min-height:calc(100svh - 64px);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  padding:clamp(40px,7vh,88px) 0;
  background:linear-gradient(176deg,#FBE9DE 0%,#FBF1E9 32%,var(--bg) 74%)}
.lp-hero>.container{width:100%}
.lp-hero .eyebrow{justify-content:center;margin-bottom:20px}
.lp-hero h1.display{font-size:clamp(40px,7vw,68px);max-width:15ch;margin:0 auto}
.lp-hero-sub{margin:22px auto 0;max-width:48ch}
.lp-hero-cta{margin:34px 0 0;display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap}
.lp-hero-fine{font-size:13px;color:var(--text-muted);margin-top:18px}
.lp-hero-stage{margin-top:52px;display:flex;justify-content:center;padding-bottom:clamp(64px,9vw,96px)}

/* ---------- pinned scroll loop ---------- */
.lp-loop{padding:0}
.lp-loop-track{height:320vh;position:relative}
.lp-loop-stage{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:36px;text-align:center}
.lp-loop-caption{height:44px;position:relative;width:100%;max-width:700px;padding:0 24px}
.lp-loop-caption p{position:absolute;left:0;right:0;margin:0 auto;padding:0 24px;
  font-family:var(--font-serif);
  font-size:clamp(22px,2.8vw,32px);font-weight:500;letter-spacing:-0.01em;line-height:1.2;
  color:var(--text-primary);opacity:0;transition:opacity .4s ease}
.lp-loop-caption p.show{opacity:1}
.lp-loop-devices{position:relative;width:760px;max-width:92vw;height:440px;
  display:flex;align-items:center;justify-content:center}
.lp-loop-devices .lp-pass{position:absolute;transition:transform .6s cubic-bezier(.32,.72,.35,1)}
.lp-loop-devices .lp-review{position:absolute;opacity:0;transform:scale(.92);
  transition:transform .6s cubic-bezier(.32,.72,.35,1), opacity .5s}
.lp-loop.reveal .lp-pass{transform:translateX(-198px) rotate(-4deg)}
.lp-loop.reveal .lp-review{opacity:1;transform:translateX(198px) rotate(3deg)}
@media(max-width:760px){
  .lp-loop-stage{gap:28px}
  /* taller caption slot for 2-line captions, vertically centered so it never
     collides with the loyalty card when the reveal lifts it up */
  .lp-loop-caption{height:84px}
  .lp-loop-caption p{top:50%;transform:translateY(-50%)}
  .lp-loop-devices{width:340px;height:400px}
  .lp-loop.reveal .lp-pass{transform:translateY(-120px) rotate(-3deg)}
  .lp-loop.reveal .lp-review{transform:translateY(120px) rotate(2deg)}
}
/* scroll cue — invites the user to drive the pinned animation, fades on first scroll */
.lp-loop-cue{position:absolute;bottom:clamp(28px,5vh,48px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--text-muted);
  opacity:1;transition:opacity .55s ease;pointer-events:none;animation:lp-cue-bob 2.6s ease-in-out infinite}
.lp-loop-cue.gone{opacity:0}
.lp-loop-cue-mouse{width:23px;height:36px;border:1.5px solid currentColor;border-radius:12px;
  position:relative;opacity:.55}
.lp-loop-cue-mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;
  border-radius:2px;background:currentColor;transform:translateX(-50%);
  animation:lp-cue-wheel 1.7s cubic-bezier(.4,0,.2,1) infinite}
.lp-loop-cue-label{font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
@keyframes lp-cue-wheel{
  0%{opacity:0;transform:translate(-50%,0)}
  25%{opacity:1}
  60%{opacity:1;transform:translate(-50%,11px)}
  100%{opacity:0;transform:translate(-50%,11px)}}
@keyframes lp-cue-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,5px)}}

/* ---------- quick how it works (3 steps) ---------- */
.lp-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,40px)}
.lp-step-n{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;
  border-radius:50%;background:var(--accent-tint);color:var(--accent);font-weight:600;font-size:15px;
  font-variant-numeric:tabular-nums;margin-bottom:16px}
.lp-step h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0 0 7px}
.lp-step p{font-size:14.5px;color:var(--text-secondary);line-height:1.55;margin:0}
@media(max-width:760px){.lp-steps{grid-template-columns:1fr;gap:28px}}

/* ---------- alternating feature rows (loyalty / messages) ---------- */
.lp-feature{padding-top:clamp(72px,12vw,128px)}
.lp-feature-grid{display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,80px);align-items:center}
.lp-feature-rev .lp-feature-copy{order:2}
.lp-feature-rev .lp-feature-visual{order:1}
.lp-feature-copy .eyebrow{margin-bottom:16px}
.lp-feature-copy .h1{margin-bottom:18px}
.lp-feature-copy .body-lg{color:var(--text-secondary);max-width:46ch}
.lp-feature-list{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:16px}
.lp-feature-list li{font-size:14.5px;color:var(--text-secondary);line-height:1.5;
  padding-left:26px;position:relative}
.lp-feature-list li::before{content:"";position:absolute;left:0;top:6px;width:15px;height:15px;
  border-radius:50%;background:var(--accent-tint)}
.lp-feature-list li::after{content:"";position:absolute;left:4.5px;top:10.5px;width:6px;height:6px;
  border-radius:50%;background:var(--accent)}
.lp-feature-list b{color:var(--text-primary);font-weight:600}
.lp-feature-visual{display:flex;justify-content:center}
.lp-feature-photo{display:block;width:100%;max-width:540px;height:auto;
  mix-blend-mode:multiply;border-radius:18px}

/* ---------- pricing feature columns ---------- */
.pricing-features{display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.pricing-features ul{list-style:none;padding:0;margin:0;display:grid;gap:18px;align-content:start}
.pricing-features b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-0.01em;color:var(--text-primary)}
.pricing-feature-detail{display:block;font-size:12.5px;color:var(--text-muted);margin-top:3px;line-height:1.45}
@media(max-width:600px){.pricing-features{grid-template-columns:1fr;gap:18px}}

/* ---------- pricing page: tiered plans ---------- */
.pricing-section{padding-top:clamp(56px,8vw,96px)}
.pricing-tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;max-width:920px;margin:0 auto}
.tier{position:relative;display:flex;flex-direction:column;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px 24px 28px}
.tier.featured{border-color:var(--accent)}
.tier-badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  background:var(--accent);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:5px 12px;border-radius:999px;white-space:nowrap}
.tier-head{min-height:58px}
.tier-name{font-family:var(--font-serif);font-size:22px;font-weight:600;letter-spacing:-0.01em;margin:0}
.tier-tagline{font-size:13px;color:var(--text-muted);margin:4px 0 0}
.tier-price-row{display:flex;align-items:baseline;gap:6px;margin:16px 0 8px}
.tier-price{font-size:40px;font-weight:600;letter-spacing:-0.03em;line-height:1;color:var(--text-primary)}
.tier-period{font-size:13px;color:var(--text-muted)}
.tier-note{font-size:12.5px;color:var(--text-secondary);line-height:1.4;margin:0 0 18px}
.tier-cta{width:100%}
.tier-divider{height:1px;background:var(--border);margin:22px 0 16px}
.tier-base{font-size:11px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--text-muted);margin:0 0 14px}
.tier-features{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tier-features li{display:flex;align-items:flex-start;gap:9px;font-size:14px;line-height:1.45;color:var(--text-secondary)}
.tier-check{flex-shrink:0;margin-top:3px;color:var(--accent)}
.pricing-fine{text-align:center;font-size:13px;color:var(--text-muted);margin:40px auto 0;max-width:600px}
@media(max-width:860px){.pricing-tiers{grid-template-columns:1fr;max-width:420px;gap:16px}}
@media(max-width:760px){
  .lp-feature-grid{grid-template-columns:1fr;gap:36px}
  .lp-feature-rev .lp-feature-copy{order:1}
  .lp-feature-rev .lp-feature-visual{order:2}
}

/* ---------- wallet message notifications (animated feed) ---------- */
.lp-notes{width:100%;max-width:360px;min-height:372px;
  display:flex;flex-direction:column;gap:12px;justify-content:flex-start;
  transition:opacity .4s ease}
.lp-notes.fading{opacity:0}
.lp-note{display:flex;gap:12px;align-items:flex-start;
  border-radius:20px;background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border:1px solid var(--border);padding:13px 15px;
  box-shadow:0 24px 50px -26px rgba(12,56,48,.4),0 6px 18px -12px rgba(0,0,0,.16);
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .5s cubic-bezier(.2,.75,.3,1),transform .5s cubic-bezier(.2,.75,.3,1)}
.lp-note.is-shown{opacity:1;transform:none}
.lp-note-icon{flex:none;width:38px;height:38px;border-radius:10px;background:var(--accent);
  color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px}
.lp-note-main{flex:1;min-width:0}
.lp-note-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:2px}
.lp-note-app{font-size:13px;font-weight:600;letter-spacing:-0.01em;color:var(--text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lp-note-time{flex:none;font-size:12px;color:var(--text-muted)}
.lp-note-text{font-size:13.5px;line-height:1.42;color:var(--text-primary);margin:0}
@media(prefers-reduced-motion:reduce){.lp-note{transition:none}.lp-notes{transition:none}}

/* ---------- centered section head (gallery/bento) ---------- */
.lp-head{text-align:center;max-width:640px;margin:0 auto 48px}
.lp-head .eyebrow{justify-content:center;margin-bottom:16px}
.lp-head p{margin-top:16px}

/* ---------- vertical gallery ---------- */
.lp-gallery{display:flex;gap:22px;overflow-x:auto;padding:6px 24px 24px;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.lp-gallery::-webkit-scrollbar{height:0}
.lp-gallery .lp-pass{scroll-snap-align:center;width:280px}
.lp-pass.v-rose{background:#6e2f44}
.lp-pass.v-sand{background:#5f4e30}
.lp-pass.v-slate{background:#2c3a47}
.lp-pass.v-plum{background:#3f2f52}

/* ---------- bento features ---------- */
.lp-bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.lp-tile{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:30px 30px 34px}
.lp-tile.lg{grid-column:span 4}
.lp-tile.sm{grid-column:span 2}
.lp-tile.half{grid-column:span 3}
.lp-tile .ic{width:40px;height:40px;border-radius:11px;background:var(--accent-tint);
  color:var(--accent);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.lp-tile h3{font-size:18px;font-weight:600;letter-spacing:-0.01em;margin:0 0 8px}
.lp-tile p{font-size:14.5px;color:var(--text-secondary);line-height:1.5;margin:0}
@media(max-width:760px){
  .lp-bento{grid-template-columns:repeat(2,1fr)}
  .lp-tile.lg,.lp-tile.sm,.lp-tile.half{grid-column:span 2}
}

/* ---------- trust band (the one accent) ---------- */
.lp-trust{background:var(--accent-dark);color:#fff;text-align:center;
  padding:clamp(72px,12vw,128px) 0}
.lp-trust .lp-quote{font-family:var(--font-serif);font-size:clamp(26px,3.4vw,38px);font-weight:500;
  letter-spacing:-0.01em;line-height:1.25;max-width:20ch;margin:0 auto}
.lp-trust .lp-who{margin-top:24px;font-size:14px;color:rgba(255,255,255,.7)}
.lp-trust .lp-stats{display:flex;gap:56px;justify-content:center;margin-top:56px;flex-wrap:wrap}
.lp-trust .lp-stat b{display:block;font-size:40px;font-weight:600;letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums}
.lp-trust .lp-stat small{font-size:13.5px;color:rgba(255,255,255,.65)}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .lp-stamp,.lp-stamp svg,.lp-loop-devices .lp-pass,.lp-loop-devices .lp-review,.lp-loop-caption p{transition:none}
  .lp-loop-cue,.lp-loop-cue-mouse::after{animation:none}
}