/* Marketing site. Audience is a venue booker on a phone between soundcheck and
   doors. Loud, short, lit like the room it will live in. */

.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 22px;
  padding: 13px 22px;
  background: rgba(8,7,12,.72); backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.nav-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--display); font-size: 1.05rem; }
.nav-brand img { width: 32px; height: 32px; object-fit: contain; }
.nav nav { display: none; gap: 24px; margin-left: auto; }
.nav nav a { text-decoration: none; color: var(--dim); font-weight: 500; font-size: .94rem; transition: color .15s, text-shadow .2s; }
.nav nav a:hover { color: var(--fg); text-shadow: 0 0 16px var(--c-cyan); }
.btn-nav { margin-left: auto; min-height: 44px; padding: 10px 20px; font-size: .92rem; }
@media (min-width: 880px) { .nav nav { display: flex; } .btn-nav { margin-left: 0; } }

/* ---------- hero ---------- */
.hero { display: grid; gap: 44px; align-items: center; padding: 58px 22px 70px; max-width: 1180px; margin: 0 auto; }
@media (min-width: 900px) { .hero { grid-template-columns: 1.12fr .88fr; padding-block: 92px 104px; } }
.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font: 800 .78rem var(--body); letter-spacing: .16em; text-transform: uppercase;
  color: var(--c-cyan); margin: 0 0 18px;
}
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-cyan);
       box-shadow: 0 0 12px 2px var(--c-cyan); animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }

.hero h1 { font-size: clamp(2.7rem, 9vw, 5.2rem); margin: 0 0 22px; }
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--c-pink), var(--c-amber) 45%, var(--c-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 26px rgba(255,45,120,.35));
}
.lede { font-size: clamp(1.05rem, 2.3vw, 1.28rem); color: var(--dim); line-height: 1.6; max-width: 48ch; margin: 0 0 32px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 42px; }
.hero-facts { list-style: none; display: flex; gap: 34px; padding: 0; margin: 0; flex-wrap: wrap; }
.hero-facts strong {
  display: block; font-family: var(--display); font-size: 2rem;
  background: linear-gradient(140deg, var(--fg), var(--c-cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-facts span { color: var(--muted); font-size: .84rem; }

/* The strip, lit. A CSS mock so it cannot go stale when the product changes. */
.hero-art { position: relative; display: flex; justify-content: center; }
.strip-mock {
  position: relative; z-index: 2;
  /* Black paper, matching the real print (LAYOUT.BG in apps/guest/strip.js). */
  width: min(212px, 56vw); aspect-ratio: 2/6; background: #000;
  border-radius: 10px; padding: 12px 12px 0; display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(244,241,234,.16),
              0 40px 90px rgba(0,0,0,.8), 0 0 60px -10px var(--c-pink);
  transform: rotate(-3.5deg);
}
.sm-cell { flex: 1; border-radius: 6px; }
.sm-1 { background: linear-gradient(140deg, var(--c-pink), #ff7a3d); }
.sm-2 { background: linear-gradient(140deg, #2b6ef5, var(--c-cyan)); }
.sm-3 { background: linear-gradient(140deg, var(--c-violet), var(--c-amber)); }
.sm-foot { height: 62px; display: grid; place-items: center; font-family: var(--display); color: var(--fg); font-size: .92rem; }
/* The flash behind it */
.flash {
  position: absolute; z-index: 1; width: 320px; max-width: 100%; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,176,32,.5), transparent 68%);
  filter: blur(26px); animation: flicker 5s ease-in-out infinite;
}
@keyframes flicker { 0%,100%{opacity:.75; transform:scale(1)} 45%{opacity:1; transform:scale(1.08)} }

/* ---------- bands ---------- */
.band { padding: 70px 22px; max-width: 1180px; margin: 0 auto; }
.band-alt { background: rgba(13,12,19,.62); max-width: none; border-block: 1px solid var(--line); backdrop-filter: blur(6px); }
.band-alt > * { max-width: 1180px; margin-inline: auto; }
.band-title { font-size: clamp(1.95rem, 5.4vw, 3.1rem); margin: 0 0 14px; }
.band-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--c-cyan), var(--c-pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.band-sub { color: var(--dim); font-size: 1.05rem; line-height: 1.65; max-width: 58ch; margin: 0 0 44px; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; }
@media (min-width: 760px)  { .steps { grid-template-columns: repeat(2, 1fr); gap: 32px 40px; } }
@media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { position: relative; padding: 56px 20px 22px; border-radius: var(--r-md);
  background: rgba(20,18,28,.6);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  box-shadow: 0 0 24px -12px var(--c), inset 0 0 22px -16px var(--c);
  transition: box-shadow .25s ease, transform .2s ease; }
.steps li:hover { transform: translateY(-3px);
  box-shadow: 0 0 30px -6px var(--c), inset 0 0 20px -10px var(--c); }
.step-n {
  position: absolute; top: 18px; left: 20px;
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--c); color: #0b0a10;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 1.02rem;
  box-shadow: 0 0 18px -2px var(--c);
}
.steps h3 { font-size: 1.12rem; margin: 0 0 8px; }
.steps p { color: var(--dim); margin: 0; line-height: 1.6; font-size: .95rem; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 16px; margin-bottom: 46px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, 1fr); } }
.card {
  border-radius: var(--r-md); padding: 26px;
  background: rgba(20,18,28,.55);
  border: 1px solid color-mix(in srgb, var(--c) 34%, transparent);
  box-shadow: 0 0 26px -12px var(--c), inset 0 0 22px -15px var(--c);
  transition: box-shadow .25s ease, transform .2s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 0 32px -6px var(--c), inset 0 0 20px -10px var(--c); }
.card h3 { font-size: 1.18rem; margin: 0 0 10px; color: var(--c); }
.card p { color: var(--dim); margin: 0; line-height: 1.62; font-size: .97rem; }
.c-pink   { --c: var(--c-pink); }
.c-cyan   { --c: var(--c-cyan); }
.c-amber  { --c: var(--c-amber); }
.c-violet { --c: var(--c-violet); }
.c-green  { --c: var(--c-green); }

.quote { border-left: 3px solid var(--c-pink); padding: 6px 0 6px 24px;
         box-shadow: -14px 0 40px -28px var(--c-pink); }
.quote p { font-family: var(--display); font-size: clamp(1.3rem, 3.6vw, 2rem); margin: 0; line-height: 1.24; }
.quote em { font-style: normal;
  background: linear-gradient(100deg, var(--c-pink), var(--c-amber));
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- metrics ---------- */
.metrics { display: grid; gap: 14px; }
@media (min-width: 700px) { .metrics { grid-template-columns: repeat(3, 1fr); } }
.metric {
  border-radius: var(--r-md); padding: 22px;
  background: rgba(20,18,28,.55);
  border: 1px solid color-mix(in srgb, var(--c, var(--line)) 30%, transparent);
  box-shadow: 0 0 22px -14px var(--c, transparent), inset 0 0 18px -15px var(--c, transparent);
}
.metric strong { display: block; font-family: var(--display); font-size: 1.04rem; margin-bottom: 7px; color: var(--c, var(--fg)); }
.metric span { color: var(--dim); font-size: .92rem; line-height: 1.55; }
.m-pink{--c:var(--c-pink)} .m-cyan{--c:var(--c-cyan)} .m-amber{--c:var(--c-amber)}
.m-violet{--c:var(--c-violet)} .m-green{--c:var(--c-green)}
.metric-note { border-style: dashed; border-color: var(--line); background: transparent; box-shadow: none; }
.metric-note strong { color: var(--muted); }

/* ---------- talk ---------- */
.talk { text-align: center; }
.talk .band-sub { margin-inline: auto; }
.talk-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 18px; }
.talk-note { color: var(--muted); font-size: .88rem; margin: 0; }

/* ---------- footer ---------- */
.foot {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 32px 22px; max-width: 1180px; margin: 0 auto;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem;
}
.foot-mark { width: 30px; height: 30px; object-fit: contain; opacity: .85; }
.foot div { display: flex; flex-direction: column; }
.foot strong { color: var(--fg); font-family: var(--display); font-size: .96rem; }
.foot-c { margin-left: auto; }

/* Footer links. Terms and Privacy have to be reachable from every page of a
   site that belongs to a business holding customers' photographs — a legal
   page linked only from inside the app is a legal page nobody can find before
   they have already signed up. */
.foot-links {
  display: flex; gap: 18px; flex-wrap: wrap;
  margin-left: auto;
}
.foot-links a {
  color: var(--dim); font-size: .88rem; font-weight: 600;
  text-decoration: none;
}
.foot-links a:hover { color: var(--fg); }
@media (max-width: 640px) {
  .foot-links { margin-left: 0; width: 100%; justify-content: center; }
}

/* ── THE BRAND MARK ────────────────────────────────────────────────────────
   Removed from every header and footer on 30 Sept 2026 at Christopher's call:
   "It's too small to recognize... totally unreadable." He was right. The mark
   is a peace-sign hand with LOOK HERE lettered inside the palm — detail that
   needs real size. At 32px it was a grey smudge next to a wordmark that was
   already doing the job.

   It now appears ONCE per page at a size where both the hand and the words
   inside it read, at the point where we ask for the business. Using the white
   artwork directly rather than filter:invert on the dark one — inverting a
   colour-mapped PNG muddies the thin strokes that are the whole mark. */
.brand-mark {
  display: block;
  width: clamp(150px, 26vw, 240px);
  height: auto;
  margin: 0 auto 26px;
  /* A dark page swallows white line art. The glow lifts it off the background
     the way the vinyl wrap does on the booth itself. */
  filter: drop-shadow(0 0 28px rgba(255, 45, 120, .40))
          drop-shadow(0 0 60px rgba(34, 224, 224, .18));
}

/* ── the reach band ────────────────────────────────────────────────────────
   The strongest argument we make to a venue, so it gets its own shape rather
   than another row of equal cards. The chain reads as a sequence because it IS
   one: make it, share it, your name travels. */
.chain {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  counter-reset: none;
}
.chain li {
  position: relative; min-width: 0;
  padding: 24px 22px 22px;
  border-radius: 14px;
  /* The same dark panel as the cards above it (it was a 3% white wash with the
     dimmest grey on it, which a gradient behind it made hard to read). */
  background: rgba(14,12,20,.82);
  border: 1px solid color-mix(in srgb, var(--c-cyan, #00e0ff) 30%, transparent);
  box-shadow: 0 0 26px -14px var(--c-cyan, #00e0ff), inset 0 0 22px -16px var(--c-cyan, #00e0ff);
}
.chain li b {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  margin-bottom: 14px;
  font-family: var(--display, inherit); font-size: .95rem;
  background: var(--c-cyan, #00e0ff); color: #06131a;
}
.chain li h3 { margin: 0 0 8px; font-size: 1.08rem; }
.chain li p { margin: 0; color: #c9c4d8; line-height: 1.6; }

.reach-two {
  display: grid; gap: 16px; margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.reach-pt { min-width: 0; padding: 22px; border-radius: 14px;
  background: rgba(14,12,20,.82); border: 1px solid rgba(0,224,255,.30);
  box-shadow: 0 0 26px -14px var(--c-cyan, #00e0ff), inset 0 0 22px -16px var(--c-cyan, #00e0ff); }
.reach-pt h3 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.35; }
.reach-pt p { margin: 0; color: #c9c4d8; line-height: 1.65; }

/* ── card icons ────────────────────────────────────────────────────────────
   Feather-weight outline icons, the same visual language as the Stinger app:
   24px box, 2px stroke, round caps, one accent colour per card.

   STROKE IS currentColor, NOT a var(). Stinger's own icons.js documents the
   reason and it was measured rather than assumed: a CSS variable inside a
   `stroke=""` presentation attribute resolves to `none` in WebKit and the icon
   silently does not draw. currentColor works there, and it also means each
   icon simply inherits whatever colour its card already uses. */
.ci {
  width: 34px; height: 34px; display: block;
  margin-bottom: 14px;
  opacity: .95;
}
/* The headings already carry the per-card accent; the icon follows it rather
   than repeating the colour in two places that could drift. */
.card.c-pink   .ci { color: var(--c-pink); }
.card.c-cyan   .ci { color: var(--c-cyan); }
.card.c-amber  .ci { color: var(--c-amber); }
.card.c-violet .ci { color: var(--c-violet); }
.card.c-green  .ci { color: var(--c-green); }

/* Metrics are tighter and read as a list, so the icon sits beside the label
   rather than above it. */
.metric { display: grid; grid-template-columns: 22px 1fr; gap: 4px 10px; align-items: start; }
.metric .ci { width: 22px; height: 22px; margin: 1px 0 0; grid-row: 1 / span 2; }
.metric strong { grid-column: 2; }
.metric span { grid-column: 2; }
.metric.m-pink   .ci { color: var(--c-pink); }
.metric.m-cyan   .ci { color: var(--c-cyan); }
.metric.m-amber  .ci { color: var(--c-amber); }
.metric.m-violet .ci { color: var(--c-violet); }
.metric.m-green  .ci { color: var(--c-green); }
.metric-note .ci { color: var(--muted, #b9b4cb); }

@media (prefers-reduced-motion: no-preference) {
  .card .ci { transition: transform .18s ease; }
  .card:hover .ci { transform: translateY(-2px) rotate(-3deg); }
}


/* ---------- the real print, in the hero and scattered down the page ---------- */
.sheet-art {
  position: relative; z-index: 2; display: block;
  width: min(330px, 70vw); height: auto; border-radius: 6px;
  box-shadow: 0 40px 90px rgba(0,0,0,.8), 0 0 60px -10px var(--c-pink);
  transform: rotate(-3deg);
}
.wall-prints {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 26px 22px;
  margin-top: 34px; padding: 10px 0 18px;
}
.wp { margin: 0; width: min(150px, 42vw); }
.wp img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.65), 0 0 0 1px rgba(244,241,234,.12);
}
.wp figcaption { margin-top: 8px; text-align: center; color: var(--muted); font-size: .78rem; }
.wp-1 { transform: rotate(-5deg); }
.wp-2 { transform: rotate(3deg) translateY(14px); }
.wp-3 { transform: rotate(-2deg) translateY(-6px); }
.wp-4 { transform: rotate(5deg) translateY(10px); }
.wp-5 { transform: rotate(-4deg); }
@media (min-width: 900px) { .wp { width: 170px; } .wall-prints { gap: 34px 40px; } }