/* ░░░░░ Phasion Live — marketing site (club-flyer vibe) ░░░░░ */

:root {
  --bg:        #0a0a0d;
  --fg:        #f4f4f6;
  --muted:    #a9a9b3;
  --pink:     #ff2e88;
  --cyan:     #18e0ff;
  --yellow:   #ffd400;
  --green:    #3bff8f;
  --ink:      #101014;
  --border:   #2a2a32;
  --display:  'Bungee', 'Impact', sans-serif;
  --body:     'Space Grotesk', system-ui, sans-serif;
  --mono:     'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* Smooth-scroll anchor jumps. Browsers without support fall back to
   instant jump (no harm). scroll-margin-top on every id'd section so
   anchor targets land below the sticky nav instead of hiding under it. */
html { scroll-behavior: smooth; }
section[id], header[id] { scroll-margin-top: 72px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  line-height: 1.5;
  overflow-x: hidden;
  /* subtle grain texture */
  background-image:
    radial-gradient(rgba(255,46,136,.06) 1px, transparent 1px),
    radial-gradient(rgba(24,224,255,.05) 1px, transparent 1px);
  background-size: 3px 3px, 5px 5px;
  background-position: 0 0, 1px 2px;
}

a { color: var(--cyan); text-decoration: none; }
a:hover { color: var(--pink); }

h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; letter-spacing: .01em; margin: 0 0 .4em; }

.pink  { color: var(--pink); }
.cyan  { color: var(--cyan); }
.yellow{ color: var(--yellow); }

/* ── NAV ──────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; gap: 22px;
  padding: 14px 28px;
  background: rgba(10,10,13,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.logo { font-family: var(--display); font-size: 20px; letter-spacing: .02em; color: var(--fg); white-space: nowrap; }
.nav-links { display: flex; gap: 14px; margin-left: auto; align-items: center; }
.nav-links a { color: var(--muted); font-weight: 500; font-size: 14px; }
.nav-links a:hover { color: var(--fg); }
/* "Try in browser" full text on wide screens, "Try free" on narrow. */
.nav-try-short { display: inline; }
.nav-try-long  { display: none; }
@media (min-width: 900px) {
  .nav-try-short { display: none; }
  .nav-try-long  { display: inline; }
}

.nav-signin {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.14);
  transition: background 0.15s, color 0.15s;
}
.nav-signin:hover { background: rgba(255,255,255,0.06); color: var(--fg); }
@media (max-width: 720px) {
  .nav { gap: 10px; padding: 10px 14px; }
  .logo { font-size: 16px; }
  .nav-links { gap: 8px; }
  .nav-links a { font-size: 12px; }
  .nav-try { height: 28px; padding: 0 10px; font-size: 11px; border-width: 1.5px; }
  /* Sign-in hidden on phone — it crowds the logo and users on a phone
     are almost never logging in to manage their account here. They can
     sign in once they hit /try/ if they actually need to. */
  .nav-signin { display: none; }
}
/* "Try in browser" gets a subtle accent border so the no-install path
   is visually distinct from the rest of the nav links. */
.nav-try {
  display: inline-flex;
  align-items: center;
  /* All integer pixel values — sub-pixel border widths and
     non-integer heights are what cause uneven rendering at the
     curves on Safari/Chrome. 2px solid border at 34px height with
     999px radius gives a perfectly symmetric pill. */
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  border: 2px solid var(--pink, #e91e63);
  background: transparent;
  color: var(--pink, #e91e63) !important;
  font-weight: 600 !important;
  line-height: 1;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-try:hover {
  background: var(--pink, #e91e63);
  color: #fff !important;
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 12px 20px;
  background: var(--fg); color: var(--ink);
  font-family: var(--display); font-size: 14px; letter-spacing: .05em;
  border: 2px solid var(--fg); border-radius: 2px;
  transition: transform .08s ease, background .15s, color .15s;
  cursor: pointer;
}
.btn:hover { background: var(--pink); color: var(--fg); border-color: var(--pink); transform: translate(-1px,-1px); }
.btn-big   { padding: 16px 28px; font-size: 16px; }
.btn-small { padding: 8px 14px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--fg); border-color: var(--fg); }
.btn-ghost:hover { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }

/* ── HERO ─────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 80px 28px 120px;
  min-height: 90vh;
  display: flex; align-items: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,46,136,.25), transparent 40%),
    radial-gradient(circle at 15% 70%, rgba(24,224,255,.22), transparent 45%),
    radial-gradient(circle at 60% 90%, rgba(255,212,0,.12), transparent 50%);
}
.hero-wrap {
  position: relative;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
.hero-inner {
  position: relative; z-index: 2;
  max-width: 680px;
  padding-right: 20px;
}
.tagline {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 12px; letter-spacing: .15em;
  color: var(--muted); text-transform: uppercase;
  margin-bottom: 28px;
}
.stripe { display: inline-block; width: 32px; height: 3px; }
.stripe.yellow { background: var(--yellow); }
.stripe.cyan   { background: var(--cyan); }
.tag-text { padding: 0 4px; }

.headline {
  font-family: var(--display);
  font-size: clamp(48px, 9vw, 108px);
  line-height: .95;
  letter-spacing: -.01em;
  margin: 0 0 28px;
  text-shadow: 4px 4px 0 rgba(255,46,136,.18);
}

.sub {
  max-width: 640px;
  font-size: 18px; line-height: 1.6;
  color: var(--muted);
  margin: 0 0 32px;
  /* Prevents the last word in a wrapped sub-copy from landing alone
     on its own line (orphan). Browser redistributes words evenly so
     both lines have similar lengths. Chromium 114+ / Safari 17.4+;
     older browsers fall back to normal wrapping (no harm). */
  text-wrap: balance;
}

.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.platform-note { font-family: var(--mono); font-size: 12px; color: var(--muted); }

/* "What's new" hero pill — small inline link below the CTAs that
   announces the latest release. Visually quiet (no big banner) but
   discoverable. The LATEST tag uses the pink accent so the pill
   reads as "new thing here" without competing with the headline. */
.hero-changelog-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 6px 14px 6px 6px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(255,255,255,0.03);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.hero-changelog-pill:hover {
  background: rgba(233, 30, 99, 0.08);
  border-color: var(--pink);
  color: var(--fg);
}
.hero-changelog-pill .hcp-tag {
  background: var(--pink);
  color: var(--fg);
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
}
.hero-changelog-pill .hcp-text { letter-spacing: 0.04em; }

.hero-media {
  position: absolute;
  right: -2%;
  top: 50%;
  width: min(38vw, 540px);
  transform: translateY(-50%) rotate(3deg);
  border-radius: 6px;
  overflow: hidden;
  /* Drop shadow for depth; the outer 2px ring was removed because it
     read as a hard frame around the screenshot. */
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  background: var(--ink);
  z-index: 1;
  pointer-events: none;
  line-height: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.hero-media.is-visible {
  opacity: 1;
}
.hero-video,
.hero-screen,
.hero-media > video {
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 1200px) {
  .hero-media { display: none; }
  .hero { min-height: 70vh; padding-bottom: 60px; }
}

/* ── TWIST ────────────────────────────────────────────────────────────── */
.twist {
  padding: 120px 28px;
  background:
    radial-gradient(circle at 20% 30%, rgba(255,46,136,.18), transparent 45%),
    radial-gradient(circle at 80% 70%, rgba(24,224,255,.18), transparent 45%);
  border-top: 1px solid var(--border);
}
.twist-inner { max-width: 1100px; margin: 0 auto; }
.twist .section-title { max-width: 900px; }
.twist .section-title em { font-style: italic; color: var(--yellow); font-family: var(--display); }
.twist-sub {
  max-width: 720px;
  font-size: 19px; line-height: 1.6;
  color: var(--muted);
  margin: -20px 0 48px;
}
.demo-wrap {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
  border: 2px solid var(--fg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.7);
}
.demo-video { width: 100%; height: 100%; display: block; position: relative; z-index: 2; background: var(--ink); }
.demo-placeholder {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    repeating-linear-gradient(45deg, transparent 0 20px, rgba(255,46,136,.05) 20px 22px),
    linear-gradient(180deg, #111118, #06060a);
  z-index: 1;
}
.demo-placeholder-inner { text-align: center; }
.demo-placeholder-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 32px;
  color: var(--pink);
  padding: 14px 28px;
  border: 3px solid var(--pink);
  margin-bottom: 16px;
}
.demo-placeholder-text { font-family: var(--mono); color: var(--muted); font-size: 14px; }
.demo-missing .demo-video { display: none; }

/* ── HOW A NIGHT RUNS ────────────────────────────────────────────────── */
.runs { padding: 100px 28px; max-width: 1200px; margin: 0 auto; }
.runs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.run-step {
  padding: 32px 28px;
  background: var(--ink);
  border: 2px solid var(--border);
  position: relative;
  transition: border-color .15s, transform .1s;
}
.run-step:hover { border-color: var(--yellow); transform: translate(-2px,-2px); }
.run-num {
  font-family: var(--display);
  font-size: 48px; line-height: 1;
  color: var(--yellow);
  margin-bottom: 16px;
}
.run-step:nth-child(2) .run-num { color: var(--pink); }
.run-step:nth-child(2):hover { border-color: var(--pink); }
.run-step:nth-child(3) .run-num { color: var(--cyan); }
.run-step:nth-child(3):hover { border-color: var(--cyan); }
.run-step h3 { font-family: var(--body); font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.run-step p  { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* ── WHO IT'S FOR ─────────────────────────────────────────────────────── */
.who {
  padding: 120px 28px;
  max-width: 1200px; margin: 0 auto;
}
.who-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.who-card {
  background: var(--ink);
  border: 2px solid var(--border);
  overflow: hidden;
  transition: border-color .15s, transform .1s;
}
.who-card:hover { border-color: var(--pink); transform: translate(-2px,-2px); }
.who-card:nth-child(2):hover { border-color: var(--cyan); }
.who-card:nth-child(3):hover { border-color: var(--yellow); }
.who-card:nth-child(4):hover { border-color: var(--green); }
.who-image {
  aspect-ratio: 4 / 3;
  background: #15151b;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(255,46,136,.06) 14px 15px);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.who-image::before {
  content: attr(data-placeholder);
  font-family: var(--display);
  color: var(--muted);
  font-size: 18px;
  letter-spacing: .1em;
  text-align: center;
  padding: 0 12px;
}
.who-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.who-card h3 { font-family: var(--body); font-weight: 700; font-size: 22px; padding: 20px 22px 6px; margin: 0; }
.who-card p  { color: var(--muted); font-size: 15px; line-height: 1.6; padding: 0 22px 24px; margin: 0; }

/* ── ENGINE (under the hood) ──────────────────────────────────────────── */
.engine {
  padding: 120px 28px;
  max-width: 1200px; margin: 0 auto;
  background: linear-gradient(180deg, transparent 0, rgba(24,224,255,.04) 50%, transparent 100%);
}
.engine-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}
.engine-block {
  background: var(--ink);
  border: 2px solid var(--border);
  overflow: hidden;
  transition: border-color .15s, transform .1s;
}
.engine-block:hover { border-color: var(--pink); transform: translate(-2px,-2px); }
.engine-block:nth-child(2):hover { border-color: var(--cyan); }
.engine-block:nth-child(3):hover { border-color: var(--yellow); }
.engine-block:nth-child(4):hover { border-color: var(--green); }
.engine-block:nth-child(5):hover { border-color: var(--pink); }
.engine-block:nth-child(6):hover { border-color: var(--cyan); }
.engine-media {
  aspect-ratio: 16 / 9;
  background: #0d0d12;
  background-image:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(24,224,255,.06) 18px 19px);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.engine-media::before {
  content: attr(data-placeholder);
  font-family: var(--display);
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .1em;
  position: relative;
  z-index: 0;
}
.engine-media video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  z-index: 1;
}
.engine-media.media-missing video { display: none; }
.engine-block h3 { font-family: var(--body); font-weight: 700; font-size: 20px; padding: 22px 22px 6px; margin: 0; }
.engine-block p  { color: var(--muted); font-size: 15px; line-height: 1.6; padding: 0 22px 24px; margin: 0; }

.feature-dump {
  margin-top: 40px;
  padding: 24px;
  background: var(--ink);
  border: 1px solid var(--border);
}
.feature-dump summary {
  font-family: var(--display);
  font-size: 16px; letter-spacing: .05em;
  color: var(--cyan);
  cursor: pointer;
  padding: 4px 0;
}
.feature-dump[open] summary { margin-bottom: 20px; }
.feature-dump .features-grid { margin: 0; }

/* ── STACK (integrations) ─────────────────────────────────────────────── */
.stack {
  padding: 100px 28px;
  background:
    radial-gradient(circle at 80% 30%, rgba(255,212,0,.10), transparent 45%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.stack-inner { max-width: 1100px; margin: 0 auto; }
.stack-sub { color: var(--muted); font-size: 17px; margin: -30px 0 36px; max-width: 640px; }
.stack-row { display: flex; flex-wrap: wrap; gap: 12px; }
.stack-chip {
  font-family: var(--display);
  font-size: 18px;
  padding: 12px 22px;
  background: var(--ink);
  border: 2px solid var(--border);
  color: var(--fg);
  letter-spacing: .03em;
  transition: border-color .15s, color .15s;
}
.stack-chip:hover { border-color: var(--yellow); color: var(--yellow); }

/* ── PROOF ────────────────────────────────────────────────────────────── */
.proof { padding: 120px 28px; max-width: 1200px; margin: 0 auto; }
.proof-inner { }
.proof-note {
  max-width: 680px;
  font-size: 17px; line-height: 1.6;
  color: var(--muted);
  margin: -30px 0 40px;
}
.proof-placeholder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.proof-shot {
  aspect-ratio: 4 / 3;
  background: #15151b;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 16px, rgba(24,224,255,.06) 16px 17px);
  border: 2px solid var(--border);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  transition: transform .15s, border-color .15s;
}
.proof-shot:hover { transform: rotate(-1deg) translate(-2px,-2px); border-color: var(--cyan); }
.proof-shot:nth-child(2):hover { transform: rotate(1deg) translate(2px,-2px); border-color: var(--pink); }
.proof-shot:nth-child(3):hover { transform: rotate(-1deg) translate(-2px,-2px); border-color: var(--yellow); }
.proof-shot::before {
  content: attr(data-placeholder);
  font-family: var(--display);
  color: var(--muted);
  font-size: 16px;
  letter-spacing: .1em;
  text-align: center;
  padding: 0 12px;
}
.proof-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }

/* ── TRIAL PRICE CARD ─────────────────────────────────────────────────── */
.card-trial { border-color: var(--yellow); }
.card-trial:hover { border-color: var(--yellow); }
.card-trial .price-tag { background: var(--yellow); color: var(--ink); }

/* ── FINAL CTA ────────────────────────────────────────────────────────── */
.final {
  padding: 120px 28px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,46,136,.18), transparent 50%),
    radial-gradient(circle at 20% 80%, rgba(24,224,255,.12), transparent 45%);
  border-top: 1px solid var(--border);
}
.final-inner { max-width: 900px; margin: 0 auto; }
.final-title { text-align: center; }
.final-sub {
  font-family: var(--display);
  font-size: 24px;
  color: var(--yellow);
  margin: -30px 0 28px;
}

/* ── SECTION TITLES ──────────────────────────────────────────────────── */
.section-title {
  font-size: clamp(38px, 6vw, 72px);
  margin: 0 0 48px;
  line-height: 1;
}
.mark {
  display: inline-block;
  padding: 2px 18px 6px;
  color: var(--ink);
  margin-right: 10px;
  margin-bottom: 6px;
  transform: rotate(-2deg);
}
.mark.yellow { background: var(--yellow); }
.mark.cyan   { background: var(--cyan); }
.mark.pink   { background: var(--pink); color: var(--fg); }

/* ── WHAT ─────────────────────────────────────────────────────────────── */
.what { padding: 100px 28px; max-width: 1200px; margin: 0 auto; }
.what-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.what-card {
  padding: 28px 24px 32px;
  background: var(--ink);
  border: 2px solid var(--border);
  position: relative;
  transition: transform .1s, border-color .15s;
}
.what-card:hover { border-color: var(--pink); transform: translate(-2px,-2px); }
.what-card:nth-child(2n):hover { border-color: var(--cyan); }
.what-card:nth-child(3n):hover { border-color: var(--yellow); }
.what-num {
  font-family: var(--display);
  color: var(--pink);
  font-size: 13px; letter-spacing: .1em;
  margin-bottom: 14px;
}
.what-card:nth-child(2n) .what-num { color: var(--cyan); }
.what-card:nth-child(3n) .what-num { color: var(--yellow); }
.what-card:nth-child(4n) .what-num { color: var(--green); }
.what-card h3 { font-size: 22px; margin-bottom: 10px; color: var(--fg); }
.what-card p  { color: var(--muted); font-size: 15px; line-height: 1.6; margin: 0; }

/* ── TWO-UP (you / they) ──────────────────────────────────────────────── */
.twoup {
  padding: 100px 28px;
  background:
    radial-gradient(circle at 15% 40%, rgba(255,46,136,.12), transparent 45%),
    radial-gradient(circle at 85% 60%, rgba(24,224,255,.12), transparent 45%);
}
.twoup-inner { max-width: 1200px; margin: 0 auto; }
.twoup-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.twoup-col { display: flex; flex-direction: column; gap: 20px; }
.twoup-shot {
  background: var(--ink);
  border: 2px solid var(--fg);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.6);
  transition: transform .15s;
}
.twoup-shot img { display: block; width: 100%; height: auto; }
.shot-left  { transform: rotate(-2deg); }
.shot-right { transform: rotate(2deg);  max-width: 320px; margin: 0 auto; border-radius: 24px; }
.shot-left:hover  { transform: rotate(0) translate(-2px,-2px); }
.shot-right:hover { transform: rotate(0) translate(2px,-2px); }
.twoup-label {
  font-family: var(--mono);
  font-size: 14px; line-height: 1.6;
  color: var(--muted);
  padding: 0 8px;
}
.twoup-label .pink, .twoup-label .cyan { font-family: var(--display); letter-spacing: .05em; margin-right: 6px; }
@media (max-width: 800px) {
  .twoup-grid { grid-template-columns: 1fr; gap: 40px; }
  .shot-right { max-width: 260px; }
}

/* ── FEATURES ─────────────────────────────────────────────────────────── */
.features {
  padding: 100px 28px;
  background: linear-gradient(180deg, transparent 0, rgba(24,224,255,.04) 50%, transparent 100%);
  max-width: 1200px; margin: 0 auto;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 8px;
}
.feat {
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid var(--border);
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  transition: all .15s;
}
.feat:hover { color: var(--fg); border-color: var(--pink); background: #151519; transform: translate(-1px,-1px); }

/* ── DOWNLOAD ─────────────────────────────────────────────────────────── */
.download {
  padding: 100px 28px;
  background:
    radial-gradient(circle at 20% 50%, rgba(24,224,255,.12), transparent 50%),
    radial-gradient(circle at 85% 30%, rgba(255,212,0,.08), transparent 45%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.download-inner { max-width: 900px; margin: 0 auto; }
.download-sub { color: var(--muted); font-size: 17px; line-height: 1.6; margin: -30px 0 32px; max-width: 680px; }

/* ── PRICING ──────────────────────────────────────────────────────────── */
.pricing { padding: 100px 28px; max-width: 1100px; margin: 0 auto; }
.pricing-sub { color: var(--muted); font-size: 15px; margin: -30px 0 40px; }
.price-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
/* The new tier model groups cards by surface (Browser / Native / Venue),
   3 per group. This variant constrains the grid to 3 columns so each
   group reads as a row of equal-width cards instead of inheriting the
   4-col layout that left an empty column. */
.price-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) {
  .price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .price-grid { grid-template-columns: 1fr; }
  .price-grid-3 { grid-template-columns: 1fr; }
}
/* Section-group header above each tier group (Browser, Native macOS,
   Venue Install). Bungee display label + a muted JetBrains Mono sub-
   label so the buyer can scan vertically by surface and horizontally
   for output count + features within each surface. */
.tier-group-header {
  margin: 56px 0 22px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
}
.tier-group-header:first-of-type { margin-top: 0; }
.tier-group-label {
  font-family: var(--display, 'Bungee', sans-serif);
  font-size: 26px;
  letter-spacing: 0.04em;
  color: var(--fg);
  text-transform: uppercase;
}
.tier-group-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* Sub-lede under the main page lede — slightly smaller + muted so the
   guarantee + seat copy reads as a footnote. */
.page-lede-sub {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
}
/* Offset hash-link landings so the card isn't tucked under the sticky
   nav. `scroll-margin-top` makes the card sit ~80px down from the
   viewport top when the anchor fires. */
.price-card { scroll-margin-top: 88px; }

.price-card {
  background: var(--ink);
  border: 2px solid var(--border);
  padding: 36px 32px;
  position: relative;
  transition: transform .1s, border-color .15s;
}
.price-card:hover { border-color: var(--pink); transform: translate(-2px,-2px); }
.card-perp:hover  { border-color: var(--cyan); }
.price-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .15em;
  text-transform: uppercase;
  padding: 4px 10px;
  background: var(--pink); color: var(--fg);
  margin-bottom: 24px;
}
.card-perp .price-tag { background: var(--cyan); color: var(--ink); }

/* ── Pro card — featured tier, slight scale-up to draw the eye.
   The pink default border is fine for color since Pro is the "growth"
   tier; we just lift it visually so it feels like the hero choice. */
.card-pro {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.02), 0 18px 50px rgba(233,30,99,0.18);
}
.card-pro:hover {
  transform: translate(-2px, -2px) scale(1.01);
}

/* ── Monthly / Annual toggle on the Pro card ───────────────────────
   Pill-style segmented control. Active option has the pink fill;
   inactive shows muted text on the dark card background. The
   "save 17%" mini-badge sits inside the Annual option so the value
   prop is visible without clicking. */
.billing-toggle {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
  margin: -8px 0 18px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.billing-toggle .bt-opt {
  border: none;
  background: transparent;
  color: var(--muted);
  padding: 6px 10px;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  transition: background 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.billing-toggle .bt-opt:hover { color: var(--fg); }
.billing-toggle .bt-opt.active {
  background: var(--pink);
  color: var(--fg);
}
.billing-toggle { max-width: 100%; }
.billing-toggle .bt-save {
  display: none;
  background: var(--cyan);
  color: var(--ink);
  font-size: 9px;
  padding: 2px 5px;
  border-radius: 3px;
  margin-left: 6px;
  letter-spacing: 0.04em;
}
.billing-toggle .bt-opt.active .bt-save {
  background: rgba(0,0,0,0.25);
  color: var(--fg);
}

/* ── Venue banner — sits below the comparison grid so it doesn't
   compete with the main tier choice. Reads as "a different conversation"
   rather than "tier #5". */
.venue-banner {
  margin-top: 40px;
  padding: 26px 32px;
  background: linear-gradient(135deg, rgba(255,255,255,0.03), rgba(255,255,255,0));
  border: 1.5px solid var(--border);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.venue-banner-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  width: 100%;
}
.venue-banner-text { flex: 1; min-width: 280px; }
.venue-banner-title {
  font-family: var(--display);
  font-size: 18px; letter-spacing: .02em;
  margin: 0 0 6px;
  color: var(--fg);
}
.venue-banner-sub {
  font-size: 14px; color: var(--muted); line-height: 1.5; margin: 0;
}
.price-amount {
  font-family: var(--display);
  font-size: clamp(36px, 4.2vw, 52px); line-height: 1;
  margin-bottom: 6px;
}
.price-amount span { font-size: 18px; color: var(--muted); margin-left: 4px; }
.price-subprice {
  font-size: 13px; color: var(--muted);
  margin-bottom: 22px;
}
.price-subprice strong { color: #34d399; font-weight: 700; }

/* Expandable "what does $X get me?" block at the bottom of each
   pricing card. Native <details> for accessibility + zero JS. */
.price-details {
  margin-top: 16px;
  border-top: 1px solid var(--border);
  padding-top: 14px;
}
.price-details summary {
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--muted);
  list-style: none;
  outline: none;
  transition: color .15s;
}
.price-details summary::-webkit-details-marker { display: none; }
.price-details summary::after {
  content: '▸';
  display: inline-block;
  margin-left: 8px;
  transition: transform .15s;
  font-size: 9px;
  vertical-align: middle;
}
.price-details[open] summary::after { transform: rotate(90deg); }
.price-details summary:hover { color: var(--fg); }
.price-details-body {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* Sticky mobile pricing CTA bar — hidden on desktop, shows below
   880px where the pricing grid collapses to a vertical stack and
   the buy buttons get hard to reach. */
.mobile-pricing-cta { display: none; }
@media (max-width: 880px) {
  .mobile-pricing-cta {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 200;
    background: rgba(0,0,0,0.92);
    border-top: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    padding: 8px;
    gap: 6px;
  }
  .mobile-cta-btn {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 8px 4px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 700; font-size: 13px;
    letter-spacing: 0.02em;
  }
  .mobile-cta-btn span { font-weight: 500; font-size: 10px; color: var(--muted); }
  .mobile-cta-btn.cta-pro {
    background: var(--pink, #ff2975);
    border-color: var(--pink, #ff2975);
    color: #fff;
  }
  .mobile-cta-btn.cta-pro span { color: rgba(255,255,255,0.85); }
  /* Add bottom padding to body so the sticky bar doesn't cover footer. */
  body { padding-bottom: 68px; }
}
.price-list {
  list-style: none; padding: 0; margin: 0 0 28px;
  font-size: 15px;
}
.price-list li { padding: 6px 0; color: var(--muted); }
.price-list li:first-letter { font-weight: bold; }
.price-btn { width: 100%; text-align: center; }
.price-note {
  margin-top: 14px;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
  min-height: 32px;
}

/* ── Homepage compact FAQ (4 top objections) ───────────────────────── */
.home-faq { padding: 100px 28px; }
.home-faq-inner { max-width: 760px; margin: 0 auto; }
.home-faq-grid { display: flex; flex-direction: column; gap: 12px; margin-top: 36px; }
.home-faq-item {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 20px;
}
.home-faq-item[open] {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.18);
}
.home-faq-item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
  outline: none;
}
.home-faq-item summary::-webkit-details-marker { display: none; }
.home-faq-item summary::before {
  content: '+';
  display: inline-block;
  width: 18px;
  color: var(--pink);
  font-weight: 700;
  margin-right: 8px;
  transition: transform .15s;
}
.home-faq-item[open] summary::before { content: '−'; }
.home-faq-item p {
  margin: 14px 0 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ── FAQ ──────────────────────────────────────────────────────────────── */
.faq { padding: 100px 28px; max-width: 1000px; margin: 0 auto; }
.faq-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}
.faq-item { padding: 22px; border-left: 3px solid var(--cyan); background: var(--ink); }
.faq-item:nth-child(2n) { border-left-color: var(--pink); }
.faq-item:nth-child(3n) { border-left-color: var(--yellow); }
.faq-item h4 { font-family: var(--body); font-weight: 700; font-size: 16px; margin-bottom: 8px; color: var(--fg); }
.faq-item p  { color: var(--muted); font-size: 14px; margin: 0; line-height: 1.6; }

/* ── FOOTER ───────────────────────────────────────────────────────────── */
.footer { padding: 80px 28px 40px; border-top: 1px solid var(--border); background: #07070a; }
.footer-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.footer-logo { font-family: var(--display); font-size: 24px; margin-bottom: 16px; }
.footer-links { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; color: var(--muted); }
.footer-copy { color: var(--muted); font-family: var(--mono); font-size: 12px; }

/* ── PAGE HEADER (Features / Pricing / Learn) ─────────────────────────── */
.page-header {
  position: relative;
  padding: 72px 28px 40px;
  text-align: center;
  background:
    radial-gradient(circle at 80% 20%, rgba(255,46,136,.18), transparent 40%),
    radial-gradient(circle at 20% 60%, rgba(24,224,255,.15), transparent 45%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.page-header-inner { max-width: 900px; margin: 0 auto; }
.page-title {
  font-family: var(--display);
  font-size: clamp(38px, 5.5vw, 72px);
  line-height: .95;
  margin: 0 0 24px;
}
.page-lede {
  color: var(--muted);
  font-size: 18px;
  line-height: 1.6;
  max-width: 640px;
  margin: 0 auto;
}

/* ── FEATURE DUMP (Features page) ─────────────────────────────────────── */
.feature-dump-section { padding: 100px 28px; }
.feature-dump-inner   { max-width: 1100px; margin: 0 auto; }

/* ── LEARN PAGE ───────────────────────────────────────────────────────── */
.learn-soon { padding: 80px 28px; }
.learn-soon-inner { max-width: 760px; margin: 0 auto; }
.learn-card {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 48px 40px;
  text-align: center;
}
.learn-card-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--pink);
  margin-bottom: 16px;
  text-transform: uppercase;
}
.learn-card h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.05;
  margin: 0 0 18px;
}
.learn-card p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 auto 28px;
}
.learn-signup {
  display: flex; gap: 8px; flex-wrap: wrap;
  max-width: 520px; margin: 0 auto;
}
.learn-input {
  flex: 1; min-width: 220px;
  background: #0a0a0d;
  color: var(--fg);
  border: 2px solid var(--border);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--body);
  font-size: 15px;
  outline: none;
}
.learn-input:focus { border-color: var(--cyan); }
.learn-submit { flex-shrink: 0; }
.learn-note {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 12px;
  margin-top: 14px;
}

.learn-topics { padding: 80px 28px 100px; }
.learn-topics-inner { max-width: 1100px; margin: 0 auto; }
.learn-topics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}
.learn-topic {
  background: var(--ink);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 28px 26px;
}
.learn-topic-emoji {
  font-size: 32px;
  margin-bottom: 12px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.4));
}
.learn-topic h3 {
  font-family: var(--display);
  font-size: 20px;
  margin: 0 0 10px;
  color: var(--fg);
}
.learn-topic p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* ── MOBILE ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nav-links { gap: 12px; }
  .nav-links a { font-size: 13px; }
  .hero { padding: 60px 20px 40px; }
  .what, .features, .pricing, .faq { padding: 32px 20px; }
  .section-title { margin-bottom: 20px; }
  .page-header { padding: 40px 20px 24px; }
  .feature-dump-section, .learn-soon, .learn-topics { padding: 32px 20px; }
  .cockpit { padding: 24px 16px; }
  .engine { padding: 16px 20px 32px; }
  .who { padding: 32px 20px; }
  .runs { padding: 12px 20px 32px; }
  .download { padding: 32px 20px; }
  .final { padding: 32px 20px; }
  .final-sub { margin-top: 8px; font-size: 18px; }
  .learn-card { padding: 32px 24px; }
  .learn-signup { flex-direction: column; }
  .learn-submit { width: 100%; }
}

/* ── Two-audience split + pricing tiers ────────────────────────────────
   Adds variants on top of the existing .who-grid / .who-card system so
   the homepage can show 2 big audience cards and 3 pricing tier cards
   without redefining the whole card pattern. */

/* Subhead under the section title (split + gallery + pricing) */
.who-sub, .gallery-sub, .download-sub {
  text-align: center;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 640px;
  margin: -16px auto 36px;
}

/* Force exactly 2 columns (audience split) regardless of viewport above
   the breakpoint — the auto-fit grid would happily push to 3 cards if
   each only needs 260px. */
.who-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.who-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 880px) {
  .who-grid-2, .who-grid-3 { grid-template-columns: 1fr; }
}

/* Tall variant — used by the audience split where each card has
   image + body + bullets + CTA. Body uses flex so the price/CTA row
   lives at the bottom no matter how long the bullets are. */
.who-card-tall {
  display: flex;
  flex-direction: column;
}
.who-card-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px 26px;
  flex: 1;
}
.who-card-body h3 {
  font-family: var(--body);
  font-weight: 700;
  font-size: 24px;
  text-wrap: balance;
  margin: 0;
  padding: 0;
}
.who-card-body p {
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* The audience-tag pill above each card heading. */
.who-tag {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 4px 10px;
  border: 2px solid currentColor;
  align-self: flex-start;
  margin-bottom: 4px;
}
.who-tag.pink   { color: var(--pink); }
.who-tag.cyan   { color: var(--cyan); }
.who-tag.yellow { color: var(--yellow); }

/* Inline list inside the cards. */
.who-bullets {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.who-bullets li {
  position: relative;
  padding-left: 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text);
}
.who-bullets li::before {
  content: "▸";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--pink);
}
.who-card:nth-child(2) .who-bullets li::before { color: var(--cyan); }
.who-card:nth-child(3) .who-bullets li::before { color: var(--yellow); }

/* Bottom row of an audience card — price + small CTA, pushed to the
   bottom of the flex column. */
.who-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 8px;
}
.who-price {
  font-family: var(--mono, var(--body));
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text);
}

/* ── Demo gallery ─────────────────────────────────────────────────── */
.gallery {
  padding: 96px 24px;
  background: var(--bg-alt, #0d0d12);
}
.gallery-inner {
  max-width: 1200px;
  margin: 0 auto;
}
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 18px;
}
.gallery-clip {
  position: relative;
  aspect-ratio: 16 / 10;
  background: #15151b;
  background-image:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(35,213,213,.06) 14px 15px);
  border: 2px solid var(--border);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s, transform .1s;
  cursor: pointer;
}
.gallery-clip:hover {
  border-color: var(--cyan);
  transform: translate(-2px, -2px);
}
.gallery-clip::before {
  content: attr(data-placeholder);
  font-family: var(--display);
  color: var(--muted);
  font-size: 16px;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 0 12px;
}
.gallery-clip img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.gallery-cap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px;
  background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  z-index: 2;
}

/* ── Pricing cards (3-tier teaser on home page) ───────────────────── */
.pricing-grid {
  align-items: stretch;
  margin-top: 8px;
}
.pricing-card {
  display: flex;
  flex-direction: column;
  padding: 28px 26px 26px;
  gap: 14px;
}
.pricing-card .who-bullets {
  margin-top: 4px;
  flex: 1;
}
.pricing-card-feature {
  border-color: var(--cyan);
  position: relative;
}
.pricing-card-feature::after {
  content: "MOST POPULAR";
  position: absolute;
  top: -12px;
  right: 16px;
  background: var(--cyan);
  color: #0a0a0e;
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: 0.16em;
  padding: 4px 10px;
}
.pricing-header { display: flex; flex-direction: column; gap: 8px; }
.pricing-price {
  font-family: var(--display);
  font-size: 44px;
  line-height: 1;
  color: var(--text);
}
.pricing-suffix {
  font-family: var(--body);
  font-weight: 500;
  font-size: 16px;
  color: var(--muted);
  margin-left: 6px;
  letter-spacing: 0;
}
.pricing-pitch {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
}
.who-card-footer {
  margin-top: auto;
  padding-top: 12px;
}
.who-card-footer .btn { width: 100%; text-align: center; }

/* ── The Cockpit — operator-interface showcase ──────────────────────
   Sits between the demo gallery and the "Why this one" cards. Single
   wide screenshot of the controls window — exactly what someone
   evaluating buying needs to see ("here's what you'd actually use").
   No rotation, no hard frame; just a soft drop shadow and rounded
   corners so the screenshot reads as a real window floating on the
   page background. */
.cockpit {
  padding: 96px 24px;
  background: var(--bg, #0a0a0e);
}
.cockpit-inner {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}
.cockpit-sub {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.55;
  max-width: 560px;
  margin: -16px auto 36px;
}
.cockpit-frame {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.04);
  background: #0a0a0e;
  line-height: 0;
  max-width: 1100px;
  margin: 0 auto;
}
.cockpit-shot {
  display: block;
  width: 100%;
  height: auto;
}

/* ── Hero background video ──────────────────────────────────────────
   Lives at the back of the hero section as atmospheric movement.
   The radial gradients on .hero stay on top of the video (.hero is
   position:relative; the video is absolute behind everything). Dark
   gradient overlay protects text contrast — the BUNGEE headline still
   needs to read at full strength against animated visuals. */
.hero {
  /* Make sure absolutely-positioned children clip to the hero box. */
  overflow: hidden;
}
.hero-bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  /* Slight desaturation + dim so the visuals support the headline
     instead of fighting it. Tune to taste. */
  filter: saturate(0.9) brightness(0.55);
}
.hero-bg-overlay {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  /* Vignette + bottom fade — keeps headline readable, blends the
     hero into the next section without a hard line. */
  background:
    radial-gradient(circle at 50% 50%, transparent 0%, rgba(10,10,13,0.55) 100%),
    linear-gradient(180deg, rgba(10,10,13,0) 60%, var(--bg) 100%);
}
/* Ensure the foreground stays above the video + overlay. */
.hero-wrap { position: relative; z-index: 2; }
.hero-media { z-index: 2; }