/* ==========================================================================
   Stampi — marketing page. Layers on assets/app.css (tokens, buttons, forms).
   Mobile-first: every rule is the phone rule; breakpoints only add.
   ========================================================================== */

.site { --gold: #d4af37; }

/* ── Sections ───────────────────────────────────────────────────────── */
.sec { padding-block: var(--s8); }
.sec-tight { padding-block: var(--s7); }
.sec-alt { background: var(--surface); }
.eyebrow {
  font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); margin-block-end: var(--s3);
}
.lede { font-size: 19px; color: var(--muted); max-width: 46ch; }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding-block: var(--s7) var(--s8); position: relative; overflow: hidden; }
.hero h1 {
  font-size: clamp(34px, 8.5vw, 68px); line-height: 1.03; letter-spacing: -.035em;
  font-weight: 600; max-width: 16ch;
}
.hero .lede { margin-block: var(--s4) var(--s6); font-size: clamp(17px, 4.2vw, 21px); }
.hero-grid { display: grid; gap: var(--s7); align-items: center; }
.hero-cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.hero-note { margin-block-start: var(--s4); font-size: 13px; color: var(--muted); }

/* A soft brand wash behind the hero — one gradient, no images. */
.hero::before {
  content: ""; position: absolute; inset-block-start: -40%; inset-inline-end: -25%;
  inline-size: 70vmax; block-size: 70vmax; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle,
      color-mix(in srgb, var(--accent) 14%, transparent), transparent 68%);
}
:root[data-theme="dark"] .hero::before,
:root:not([data-theme="light"]) .hero::before { opacity: .55; }

/* ── The pass mockup — a real card, not a phone frame ───────────────── */
.pass {
  --pc: #1F6F54;
  inline-size: min(340px, 100%); margin-inline: auto;
  border-radius: 20px; overflow: hidden; background: #fff; color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 30px 70px rgba(0,0,0,.22);
  font-size: 14px; position: relative;
}
:root[data-theme="dark"] .pass,
:root:not([data-theme="light"]) .pass {
  background: #17171a; color: #f5f5f7;
  box-shadow: 0 2px 8px rgba(0,0,0,.6), 0 30px 70px rgba(0,0,0,.7);
  outline: 1px solid rgba(255,255,255,.08);
}
.pass-top { display: flex; align-items: center; gap: 10px; padding: 15px 17px; }
.pass-logo { inline-size: 32px; block-size: 32px; border-radius: 10px; background: var(--pc);
             display: grid; place-items: center; flex: none; }
.pass-logo i { inline-size: 12px; block-size: 12px; border-radius: 50%;
               border: 3px solid #fff; display: block; }
.pass-name { font-weight: 600; }
.pass-n { margin-inline-start: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.pass-band {
  block-size: 104px; display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(158deg, var(--pc), color-mix(in srgb, var(--pc) 58%, #000));
}
.pass-band span { inline-size: 21px; block-size: 21px; border-radius: 50%;
                  border: 2px solid rgba(255,255,255,.8); }
.pass-band span.on { background: #fff; border-color: #fff; box-shadow: inset 0 0 0 4px var(--pc); }
.pass-info { padding: 15px 17px; display: grid; gap: 2px; }
.pass-k { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .55; }
.pass-v { font-weight: 600; }

/* Lock-screen proof: the same card as a notification */
.lock {
  inline-size: min(340px, 100%); margin-inline: auto; border-radius: 20px;
  padding: var(--s5); background: linear-gradient(160deg, #23252b, #0b0c0f);
  color: #fff; box-shadow: 0 30px 70px rgba(0,0,0,.35);
}
.lock-time { font-size: 44px; font-weight: 300; letter-spacing: -.02em; line-height: 1; }
.lock-date { opacity: .6; font-size: 13px; margin-block-end: var(--s5); }
.lock-card {
  background: rgba(255,255,255,.14); backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.18); border-radius: 15px; padding: 13px 15px;
  display: flex; align-items: center; gap: 11px;
}
.lock-card .m { inline-size: 30px; block-size: 30px; border-radius: 9px; flex: none;
                background: #1F6F54; display: grid; place-items: center; }
.lock-card .m i { inline-size: 11px; block-size: 11px; border-radius: 50%;
                  border: 3px solid #fff; display: block; }
.lock-t { font-size: 13px; font-weight: 600; }
.lock-s { font-size: 12px; opacity: .78; }

/* ── Steps ──────────────────────────────────────────────────────────── */
.steps { counter-reset: s; display: grid; gap: var(--s4); }
.step { position: relative; padding-inline-start: 56px; }
.step::before {
  counter-increment: s; content: counter(s);
  position: absolute; inset-inline-start: 0; inset-block-start: 0;
  inline-size: 38px; block-size: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 600; font-size: 15px;
  background: var(--accent); color: var(--on-accent);
}
.step h3 { margin-block-end: 4px; }
.step p { color: var(--muted); margin: 0; }

/* ── Benefits ───────────────────────────────────────────────────────── */
.feat { display: grid; gap: var(--s2); }
.feat .ico { inline-size: 34px; block-size: 34px; border-radius: 10px;
             background: color-mix(in srgb, var(--accent) 15%, transparent);
             display: grid; place-items: center; color: var(--accent); }
.feat .ico svg { inline-size: 19px; block-size: 19px; }
.feat h3 { margin: var(--s2) 0 0; }
.feat p { color: var(--muted); margin: 0; font-size: 15px; }

/* ── Problem strip ──────────────────────────────────────────────────── */
.gone { display: grid; gap: var(--s3); }
.gone li { list-style: none; display: flex; gap: 11px; align-items: flex-start;
           color: var(--muted); }
.gone li b { color: var(--text); font-weight: 600; }
.gone .x { color: var(--danger); flex: none; font-weight: 600; }

/* ── CTA ────────────────────────────────────────────────────────────── */
.cta-card { max-width: 560px; margin-inline: auto; }
.field-row { display: grid; gap: var(--s4); }
@media (min-width: 620px) { .field-row.two { grid-template-columns: 1fr 1fr; } }

.chips { display: flex; gap: var(--s2); flex-wrap: wrap; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inline-size: 100%; block-size: 100%;
              inset: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px;
  border-radius: 980px; border: 1px solid var(--control); font-size: 15px;
  color: var(--muted); transition: all .15s;
}
.chip input:checked + span { background: var(--accent); color: var(--on-accent);
                             border-color: var(--accent); font-weight: 500; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── Footer ─────────────────────────────────────────────────────────── */
.foot { border-block-start: 1px solid var(--hairline); padding-block: var(--s6);
        color: var(--muted); font-size: 14px; }
.foot a { color: var(--muted); }

/* ── Install prompt ─────────────────────────────────────────────────── */
.install {
  position: fixed; inset-inline: var(--s4); inset-block-end: var(--s4); z-index: 50;
  max-width: 460px; margin-inline: auto; display: none;
  background: var(--elevated); border: 1px solid var(--hairline);
  border-radius: var(--radius); padding: var(--s4); box-shadow: var(--shadow-lift);
}
.install.show { display: flex; align-items: center; gap: var(--s3); }
.install p { margin: 0; font-size: 14px; }

@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; gap: var(--s8); }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s6); }
  .sec { padding-block: 96px; }
}

/* ── Scroll choreography ────────────────────────────────────────────────
   Opt-in per element, driven by IntersectionObserver. Transform+opacity
   only, so it stays on the compositor; anything animating layout would
   jank on a mid-range Android at a counter. Fully disabled under
   prefers-reduced-motion, and .in is applied immediately if JS is off. */
@media (prefers-reduced-motion: no-preference) {
  .sr { opacity: 0; transform: translateY(18px);
        transition: opacity .55s cubic-bezier(.22,.61,.36,1),
                    transform .55s cubic-bezier(.22,.61,.36,1); will-change: opacity, transform; }
  .sr.in { opacity: 1; transform: none; }
  .sr-1 { transition-delay: .06s } .sr-2 { transition-delay: .12s }
  .sr-3 { transition-delay: .18s } .sr-4 { transition-delay: .24s }
  .sr-5 { transition-delay: .30s } .sr-6 { transition-delay: .36s }

  /* Hero pass drifts up and settles as the page loads. */
  .pass-float { animation: floatIn .9s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes floatIn { from { opacity: 0; transform: translateY(26px) rotate(-1.5deg) scale(.97); } }

  /* Lock-screen notification slides in when the proof section arrives. */
  .lock .lock-card { transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .5s; }
  .lock:not(.in) .lock-card { opacity: 0; transform: translateY(14px) scale(.97); }
}
@media (prefers-reduced-motion: reduce) { .sr { opacity: 1; transform: none; } }