/* CoverMe tickets — matches the app's dark design tokens */
:root {
  --bg: #000000;
  --surface: #141416;
  --control: #1C1C1E;
  --gray-btn: #2C2C2E;
  --chip: #3A3A3C;
  --secondary: #8E8E93;
  --body: #D1D1D6;
  --pink: #EE3BDD;
  --green: #30D158;
  --red: #FF453A;
  --glow: 238, 59, 221;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: #fff;
  font-family: 'Montserrat', system-ui, sans-serif; font-weight: 500;
  -webkit-font-smoothing: antialiased; position: relative; overflow-x: hidden;
}
a { color: #fff; }
button, input, select { font-family: inherit; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 768px) { .wrap { padding: 0 24px; } }

/* Color glow behind the flyer, like the app's event page */
.glow {
  position: absolute; inset: 0 0 auto 0; height: 1100px; pointer-events: none; z-index: 0;
  /* soft glow behind the flyer (like the app), fading in below the header instead of a hard edge */
  background: radial-gradient(70% 520px at 50% 320px, rgba(var(--glow), .5) 0%, rgba(var(--glow), .18) 55%, rgba(var(--glow), 0) 100%);
  opacity: 0; transition: opacity .4s ease;
}
.glow.is-on { opacity: 1; }
main { position: relative; z-index: 1; }
.cm-top { z-index: 10; }

/* Header */
.top-row { height: 60px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 768px) { .top-row { height: 72px; } }
.brand { font-size: 20px; font-weight: 900; letter-spacing: -0.02em; text-decoration: none; }
@media (min-width: 768px) { .brand { font-size: 22px; } }
.top-nav { display: flex; align-items: center; gap: 24px; font-size: 15px; font-weight: 700; }
.nav-link { text-decoration: none; color: var(--secondary); min-height: 44px; display: inline-flex; align-items: center; }
.nav-link.is-active, .nav-link:hover { color: #fff; }
@media (max-width: 480px) { .top-nav .nav-link.is-active { display: none; } }

main.wrap { flex: 1; padding-top: 24px; padding-bottom: 32px; }
@media (min-width: 768px) { main.wrap { padding-top: 40px; padding-bottom: 64px; } }
@media (min-width: 900px) { .glow { background: radial-gradient(45% 560px at 25% 380px, rgba(var(--glow), .5) 0%, rgba(var(--glow), .18) 55%, rgba(var(--glow), 0) 100%); } }

.status { color: var(--secondary); font-size: 15px; font-weight: 600; padding: 48px 0; }
.status.error { color: var(--body); }

/* Buttons */
.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 56px; min-width: 240px; padding: 0 28px; border: 0; border-radius: 999px;
  background: var(--pink); color: #fff; font-size: 17px; font-weight: 800; text-decoration: none; cursor: pointer;
}
.pill:hover { filter: brightness(1.06); color: #fff; }
.pill:disabled { background: var(--gray-btn); color: var(--secondary); cursor: default; filter: none; }
.pill.gray { background: var(--gray-btn); }
.btn-sm {
  display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; background: var(--gray-btn); color: #fff; font-size: 15px; font-weight: 700; text-decoration: none; cursor: pointer;
}
.icon-btn {
  width: 44px; height: 44px; flex: none; border: 0; border-radius: 999px; background: var(--gray-btn); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.back {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin-left: -6px;
  color: var(--secondary); font-size: 15px; font-weight: 700; text-decoration: none;
}
.back:hover { color: #fff; }
.floating {
  position: fixed; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); z-index: 5;
  display: flex; justify-content: center; pointer-events: none;
}
.floating .pill { pointer-events: auto; box-shadow: 0 10px 30px rgba(0,0,0,.6); }
@media (min-width: 900px) { .floating { display: none; } }

/* Tickets home */
.list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
/* One page-title style everywhere: 34px phone, 48px desktop */
.list-head h1, .checkout h1, .who h1, .done h1 { font-size: 34px; line-height: 1.05; font-weight: 900; letter-spacing: -0.02em; }
@media (min-width: 900px) { .list-head h1, .checkout h1, .who h1, .done h1 { font-size: 48px; } }
.list-head h1 { margin: 0; }
.sub { font-size: 13px; font-weight: 600; color: var(--secondary); }
.city-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px;
  background: var(--control); color: #fff; font-size: 13px; font-weight: 700;
}
.city-chip select { appearance: none; background: transparent; border: 0; color: #fff; font: inherit; padding-right: 4px; cursor: pointer; }
.city-chip select option { background: #1C1C1E; }

.feature { margin-top: 24px; display: grid; gap: 20px; align-items: center; }
@media (min-width: 900px) { .feature { margin-top: 40px; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: 56px; } }
.flyer {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.14); box-shadow: 0 16px 40px rgba(0,0,0,.6); background: var(--surface);
}
.flyer img { width: 100%; height: 100%; object-fit: cover; }
.date-badge {
  position: absolute; top: 14px; left: 14px; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 10px; border-radius: 10px; background: rgba(0,0,0,.45); font-weight: 800;
}
.date-badge span:first-child { font-size: 11px; letter-spacing: .8px; }
.date-badge span:last-child { font-size: 17px; }
.event-title { margin: 0; font-size: 32px; line-height: .98; font-weight: 900; letter-spacing: -0.8px; text-transform: uppercase; }
@media (min-width: 900px) { .event-title { font-size: 56px; line-height: .95; letter-spacing: -1.5px; } }
.when { margin: 12px 0 0; font-size: 16px; font-weight: 700; }
@media (min-width: 900px) { .when { font-size: 18px; } }
.venue-link {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px; color: var(--pink); font-size: 16px; font-weight: 600; text-decoration: none;
}
@media (min-width: 900px) { .venue-link { font-size: 18px; } }
.venue-name { display: block; margin-top: 4px; color: var(--body); font-size: 16px; font-weight: 600; }
.meta { font-size: 15px; font-weight: 600; color: var(--secondary); }
.feature .pill { margin-top: 28px; }
@media (max-width: 899px) {
  .feature { gap: 16px; }
  .feature .flyer { max-width: 300px; margin: 0 auto; }
  .feature .pill { margin-top: 20px; width: 100%; }
}

.grid { margin-top: 24px; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.nw { white-space: nowrap; }
.card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: var(--surface); border: 1px solid rgba(255,255,255,.06); text-decoration: none; }
.card .flyer { border-radius: 0; border: 0; box-shadow: none; }
.card-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.card-body strong { font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
@media (max-width: 599px) {
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card { flex-direction: row; align-items: center; }
  .card .flyer { width: 88px; flex: none; margin: 10px 0 10px 10px; border-radius: 12px; }
  .card .date-badge { display: none; }
  .card-body { padding: 12px 14px; gap: 4px; min-width: 0; }
  .card-body strong { font-size: 17px; line-height: 1.2; }
}

.info-card { margin-top: 40px; padding: 20px; border-radius: 20px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 768px) { .info-card { padding: 28px; margin-top: 56px; } }
.info-card h2 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.3px; }
.info-card p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); }
.info-card .btn-sm { margin-top: 8px; align-self: flex-start; }

.empty { margin-top: 24px; padding: 28px 20px; border-radius: 20px; background: var(--surface); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.empty-icon { width: 54px; height: 54px; border-radius: 999px; background: var(--control); color: var(--secondary); display: flex; align-items: center; justify-content: center; }
.empty h2 { margin: 6px 0 0; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.empty p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); max-width: 420px; }
.empty .pill { margin-top: 12px; }

/* Event page */
.event { display: grid; gap: 24px; margin-top: 8px; }
@media (min-width: 900px) { .event { grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 56px; align-items: start; } }
.event .flyer { max-width: 280px; margin: 0 auto; }
@media (min-width: 900px) { .event .flyer { max-width: none; } }
.desc { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--control); font-size: 15px; line-height: 1.6; color: var(--body); white-space: pre-line; max-width: 560px; }
.thumbs { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.thumb { width: 56px; height: 70px; padding: 0; border-radius: 10px; overflow: hidden; border: 2px solid transparent; background: var(--surface); cursor: pointer; }
.thumb.is-on { border-color: #fff; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }

.panel { margin-top: 28px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 900px) { .panel { padding: 20px; border-radius: 20px; background: var(--surface); border: 1px solid rgba(255,255,255,.06); } }
.panel h2 { margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.tier { display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 14px; background: var(--surface); border: 1.5px solid transparent; }
@media (min-width: 900px) { .tier { background: var(--control); } }
.tier.is-on { border-color: #fff; }
.tier.is-out { background: transparent; border: 1px solid var(--gray-btn); }
.tier-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.tier-name { font-size: 16px; font-weight: 700; }
.tier.is-out .tier-name { color: var(--secondary); }
.tier-price { font-size: 13px; font-weight: 600; color: var(--secondary); }
.stepper { display: flex; align-items: center; gap: 6px; }
.step { width: 44px; height: 44px; border: 0; border-radius: 999px; background: var(--gray-btn); color: #fff; font-size: 20px; font-weight: 700; line-height: 1; cursor: pointer; }
.step:disabled { opacity: .35; cursor: default; }
.qty { min-width: 22px; text-align: center; font-size: 18px; font-weight: 900; }
.total-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; flex-wrap: wrap; }
.total-row strong { display: block; font-size: 20px; font-weight: 800; }
.fine { margin: 0; font-size: 13px; font-weight: 600; color: var(--secondary); line-height: 1.5; }
.fine button.link { padding: 0; border: 0; background: none; color: var(--body); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
@media (max-width: 899px) { .total-row .pill { width: 100%; } }




/* Checkout */
.narrow { max-width: 560px; margin: 0 auto; }
.checkout h1 { margin: 4px 0 16px; }
.summary { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--surface); }
.summary img { width: 48px; height: 60px; flex: none; border-radius: 10px; object-fit: cover; }
.summary div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.summary b { font-size: 16px; font-weight: 700; }
.section-title { margin: 32px 0 2px; font-size: 22px; font-weight: 800; letter-spacing: -0.4px; }
.field { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--secondary); }
.field input, .field select {
  height: 52px; padding: 0 16px; border: 0; border-radius: 14px; background: var(--control); color: #fff; font-size: 16px; font-weight: 600; outline: none;
}
.field input::placeholder { color: var(--secondary); }
.field input:focus, .field select:focus { box-shadow: 0 0 0 2px var(--pink); }
.lines { margin: 28px 0 0; padding: 16px; border-radius: 14px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; }
.lines div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; font-weight: 600; color: var(--body); }
.lines dt, .lines dd { margin: 0; }
.lines .sum { padding-top: 10px; border-top: 1px solid var(--gray-btn); color: #fff; font-size: 17px; font-weight: 800; }
.lines .sum:first-child { padding-top: 0; border-top: 0; }
.info-note { margin: 4px 0 6px; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--body); }
.error-msg { margin: 16px 0 0; padding: 12px 16px; border-radius: 14px; background: rgba(255,69,58,.14); color: #fff; font-size: 15px; font-weight: 600; }
.test-note { margin: 16px 0 0; font-size: 13px; font-weight: 600; color: var(--secondary); }
.checkout .pill.wide { width: 100%; margin-top: 24px; }

/* Confirmation */
.done { padding-top: 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.check { width: 88px; height: 88px; border-radius: 999px; background: rgba(48,209,88,.16); color: var(--green); display: flex; align-items: center; justify-content: center; }
.done h1 { margin: 12px 0 0; }
.done > p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--body); max-width: 420px; }
.done .lines { width: 100%; max-width: 420px; text-align: left; }
.done .pill { margin-top: 16px; }

/* Footer */
.foot { border-top: 1px solid var(--control); }
.foot-row { padding-top: 24px; padding-bottom: 24px; display: flex; gap: 8px 24px; flex-wrap: wrap; font-size: 13px; font-weight: 600; color: var(--secondary); }
.foot-row a { color: var(--secondary); text-decoration: none; }
.foot-row a:hover { color: #fff; }
@media (max-width: 899px) { body.has-floating footer.cm-foot { padding-bottom: 96px !important; } }

/* Refund policy sheet */
.sheet-backdrop { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.7); display: flex; align-items: flex-end; justify-content: center; }
@media (min-width: 768px) { .sheet-backdrop { align-items: center; } }
.sheet { width: 100%; max-width: 560px; max-height: 85vh; display: flex; flex-direction: column; background: var(--surface); border-radius: 20px 20px 0 0; }
@media (min-width: 768px) { .sheet { border-radius: 20px; } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 8px 20px; }
.sheet-head h2 { margin: 0; font-size: 22px; font-weight: 800; }
.sheet-body { overflow-y: auto; padding: 0 20px 28px; }
.sheet-body h3 { margin: 18px 0 8px; font-size: 16px; font-weight: 700; }
.sheet-body p { margin: 0; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.78); }

:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* readable gray over the glow */
.back, .list-head .sub { color: var(--body); }

/* Optional Sign in with Apple at checkout */
.account { margin-top: 24px; display: flex; flex-direction: column; gap: 8px; }
.apple-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 20px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; background: var(--control); color: #fff; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; }
.apple-btn:hover { background: var(--gray-btn); }
.apple-btn:disabled { color: var(--secondary); cursor: default; }
.apple-btn svg { margin-top: -2px; }
.account-on { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.account-on > span { display: flex; width: 36px; height: 36px; flex: none; align-items: center; justify-content: center; border-radius: 999px; background: var(--control); color: #fff; }
.account-on p { margin: 0; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.account-on b { font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.account-on .link { flex: none; position: relative; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--gray-btn); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.account-on .link::after { content: ""; position: absolute; inset: -4px 0; }
.account-on .link:hover { background: #3A3A3C; }
.account .error-msg { margin: 0; }

/* "Email me about future events" opt-in at checkout (unchecked by default) */
.optin { display: flex; align-items: center; gap: 12px; margin-top: 16px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--body); cursor: pointer; }
.optin input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.optin .box { flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--control); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); display: flex; align-items: center; justify-content: center; }
.optin input:checked + .box { background: var(--pink); box-shadow: none; }
.optin input:checked + .box::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.optin input:focus-visible + .box { outline: 2px solid var(--pink); outline-offset: 2px; }

/* Sign in or guest, before checkout */
.who h1 { margin: 4px 0 16px; }
.who-options { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.who-btn { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 76px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.08); border-radius: 18px; background: var(--surface); color: #fff; font: inherit; text-align: left; cursor: pointer; }
.who-btn > svg:first-child { flex: none; width: 24px; height: 24px; }
.who-btn > span { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.who-btn b { font-size: 17px; font-weight: 800; }
.who-btn small { font-size: 13px; font-weight: 600; color: var(--secondary); }
.who-btn > svg:last-child { color: var(--secondary); }
.who-btn:hover { border-color: rgba(255,255,255,.22); background: var(--control); }
.who-btn:disabled { opacity: .6; cursor: default; }
#who-err .error-msg { margin-top: 16px; }
.guest-line { margin: 0; font-size: 14px; font-weight: 600; color: var(--secondary); }
.guest-line .link { padding: 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* App promo on the event page: clearly an ad for the app */
.app-promo { margin-top: 32px; display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, rgba(238,59,221,.22), rgba(238,59,221,.06)), var(--surface); border: 1px solid rgba(238,59,221,.35); text-decoration: none; color: #fff; }
.app-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; background: var(--pink); display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(238,59,221,.35); }
.app-icon img { width: 38px; height: 38px; object-fit: contain; }
.app-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.app-text b { font-size: 16px; font-weight: 800; }
.app-text small { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--body); }
.app-get { flex: none; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 15px; font-weight: 800; display: flex; align-items: center; }

/* ---------- Motion ---------- */
.pill, .btn-sm, .step, .who-btn, .app-promo, .card { transition: transform .18s ease, filter .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .25s ease; }
.pill:hover { transform: translateY(-2px); }
.pill:active, .btn-sm:active, .step:active, .who-btn:active { transform: scale(.97); }
@media (hover: hover) {
  .card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
  .app-promo:hover, .who-btn:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: no-preference) {
  #view > * { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) both; }
  .grid > * { animation: tk-in .55s cubic-bezier(.2,.7,.2,1) both; }
  .grid > :nth-child(2) { animation-delay: .06s; } .grid > :nth-child(3) { animation-delay: .12s; }
  .grid > :nth-child(4) { animation-delay: .18s; } .grid > :nth-child(n+5) { animation-delay: .24s; }
  .who-options > * { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) both; }
  .who-options > :nth-child(2) { animation-delay: .08s; }
  .tier.is-on { animation: tk-pop .25s ease; }
  .floating .pill { animation: tk-up .35s cubic-bezier(.2,.7,.2,1) both; }
  .done .check { animation: tk-check .6s cubic-bezier(.2,1.4,.4,1) both; }
  .done > :not(.check) { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) .15s both; }
}
@keyframes tk-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes tk-up { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes tk-pop { 50% { transform: scale(1.015); } }
@keyframes tk-check { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

/* Footer stays below the fold: the page area is at least one screen tall */
main.wrap { min-height: calc(100svh - 60px); }
@media (min-width: 900px) { main.wrap { min-height: calc(100svh - 72px); } }

/* Loading: a centered spinner that fades in, so quick loads never flash */
.loader { min-height: 46svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; color: var(--secondary); font-size: 15px; font-weight: 600; opacity: 0; animation: tk-fade .3s ease .25s forwards; }
.spin { width: 36px; height: 36px; border-radius: 50%; border: 3px solid rgba(255,255,255,.12); border-top-color: var(--pink); animation: tk-spin .8s linear infinite; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.check.is-wait { background: rgba(238,59,221,.14); color: var(--pink); }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@keyframes tk-fade { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .spin { animation-duration: 2s; } .loader { opacity: 1; animation: none; } }

/* ---------- Nov 10 pass ---------- */
/* The app's film grain (HomeRedesignGrain) on the black background, like the app */
body { background: #000 url("data:image/webp;base64,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") repeat; background-size: 160px 160px; }

/* Event page: the Get tickets button sits in the page, not stuck to the screen */
.total-row { flex-direction: column; align-items: stretch; }
.total-row > div { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (min-width: 900px) { .total-row { flex-direction: row; align-items: center; } .total-row > div { display: block; } }

/* Sign in or guest: centered event card, then two stacked choices (no page title) */
.who { display: flex; flex-direction: column; }
.who .back { align-self: flex-start; }
.who-card { margin-top: 16px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.who-flyer { width: 132px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 44px rgba(238,59,221,.22), 0 10px 30px rgba(0,0,0,.6); margin-bottom: 14px; }
.who-title { font-size: 22px; font-weight: 800; letter-spacing: -0.4px; line-height: 1.2; }
.who-meta { font-size: 15px; font-weight: 600; color: var(--body); }
.who-qty { margin-top: 8px; display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--control); font-size: 13px; font-weight: 700; color: #fff; }
.who-options { margin-top: 32px; display: flex; flex-direction: column; }
.who-apple, .who-guest { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 56px; border-radius: 999px; font: inherit; font-size: 17px; cursor: pointer; transition: transform .18s ease, background-color .18s ease, filter .18s ease; }
.who-apple b, .who-guest b { font-weight: 800; }
.who-apple { border: 1.5px solid rgba(255,255,255,.85); background: #000; color: #fff; }
.who-apple svg { width: 20px; height: 20px; margin-top: -3px; }
.who-apple:hover { background: #111; }
.who-guest { border: 0; background: var(--pink); color: #fff; }
.who-guest:hover { filter: brightness(1.06); }
.who-apple:active, .who-guest:active { transform: scale(.97); }
.who-apple:disabled { opacity: .6; cursor: default; }
.who-note { margin: 8px 0 0; text-align: center; font-size: 13px; font-weight: 600; color: var(--secondary); }
.who-or { display: flex; align-items: center; gap: 12px; margin: 20px 0; color: var(--secondary); font-size: 13px; font-weight: 700; }
.who-or::before, .who-or::after { content: ""; flex: 1; height: 1px; background: var(--gray-btn); }
@media (prefers-reduced-motion: no-preference) {
  .who-card { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) both; }
  .who-options { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) .1s both; }
}

/* Checkout: quantity stepper instead of a dropdown */
.qty-row { margin-top: 16px; display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: var(--surface); }
.qty-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.qty-text b { font-size: 16px; font-weight: 700; }
.qty-row .qty { min-width: 28px; }

/* Required fields */
.field > span:first-child { color: var(--body); }
.req { color: var(--pink); font-weight: 800; }

/* ---------- Nov 11 pass: clean black, no color tints (DICE / Live Nation style) ---------- */
.glow { display: none !important; }
.flyer { border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.back, .list-head .sub { color: var(--secondary); }

/* Bigger flyers everywhere */
.event .flyer { max-width: 420px; }
@media (max-width: 899px) { .feature .flyer { max-width: 420px; } }
.thumb { width: 72px; height: 90px; border-radius: 12px; }
.summary img { width: 72px; height: 90px; border-radius: 12px; }
.who-flyer { width: 176px; box-shadow: 0 20px 50px rgba(0,0,0,.6); border-color: rgba(255,255,255,.1); }
@media (max-width: 899px) {
  .card { align-items: stretch; }
  .card .flyer { width: 128px; margin: 10px 0 10px 10px; border-radius: 14px; }
  .card-body { justify-content: center; padding: 14px 16px; gap: 5px; }
  .card-body strong { font-size: 18px; }
}

/* Event facts: icon rows (date, place) with hairline dividers */
.facts { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
.fact { display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.08); color: #fff; text-decoration: none; }
.fact > svg { flex: none; width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--control); color: #fff; }
.fact > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fact b { font-size: 16px; font-weight: 700; line-height: 1.3; }
.fact .sub { font-size: 14px; }
.fact-go { flex: none; color: var(--secondary); display: flex; }
a.fact:hover .fact-go { color: #fff; }
.facts + .desc { border-top: 0; margin-top: 16px; padding-top: 0; }

/* App promo: a plain row, no pink wash */
.app-promo { background: var(--surface); border: 1px solid rgba(255,255,255,.08); }
.app-icon { box-shadow: none; }
.app-promo:hover { border-color: rgba(255,255,255,.18); }

/* ---------- Your ticket (matches the app's pass) ---------- */
.ticket-page { max-width: 420px; margin: 0 auto; display: flex; flex-direction: column; align-items: stretch; }
.pass { position: relative; border-radius: 24px; background: #161618; border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 40px rgba(0,0,0,.6); overflow: hidden; }
.pass-banner { width: 100%; height: 140px; object-fit: cover; object-position: center 30%; }
.pass-head { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 7px; }
.pass-kind { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--secondary); }
.pass-title { margin: 0; font-size: 22px; line-height: 1.1; font-weight: 900; letter-spacing: -0.45px; }
.pass-date { font-size: 15px; font-weight: 600; color: var(--secondary); }
.pass-perf { position: relative; height: 24px; margin: 0 -1px; }
.pass-perf::before { content: ""; position: absolute; left: 22px; right: 22px; top: 11px; border-top: 2px dashed rgba(255,255,255,.14); }
.pass-perf::after { content: ""; position: absolute; inset: 0; background:
  radial-gradient(circle at 0 50%, #000 11.5px, rgba(255,255,255,.08) 12px, transparent 12.5px),
  radial-gradient(circle at 100% 50%, #000 11.5px, rgba(255,255,255,.08) 12px, transparent 12.5px); }
.pass-live { padding: 16px 22px 20px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.pass-status { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: 1.4px; color: var(--secondary); }
.pass-status i { width: 7px; height: 7px; border-radius: 999px; background: var(--secondary); }
.pass-status i.is-live { background: var(--green); box-shadow: 0 0 0 0 rgba(48,209,88,.6); animation: tk-live 1.6s ease-out infinite; }
@keyframes tk-live { to { box-shadow: 0 0 0 8px rgba(48,209,88,0); } }
.pass-clock { font-size: 44px; line-height: 1; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; }
.pass-fields { width: 100%; margin-top: 14px; display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.pass-fields div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pass-fields .mid { align-items: center; }
.pass-fields .end { align-items: flex-end; text-align: right; }
.pass-fields span { font-size: 12px; font-weight: 600; color: var(--secondary); }
.pass-fields b { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pass-note { margin: 20px 0 0; text-align: center; font-size: 15px; font-weight: 600; color: var(--body); }
.pass-instr { margin: 8px 0 0; text-align: center; font-size: 14px; line-height: 1.5; color: var(--secondary); white-space: pre-line; }
.pass-rows { margin: 24px 0 0; border-top: 1px solid rgba(255,255,255,.1); }
.pass-rows div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; border-bottom: 1px solid rgba(255,255,255,.1); }
.pass-rows dt { margin: 0; font-size: 15px; font-weight: 600; color: var(--secondary); }
.pass-rows dd { margin: 0; font-size: 15px; font-weight: 700; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.pass-rows dd a { color: #fff; text-decoration: none; }
.pass-rows .mono { font-size: 13px; color: var(--body); }
.pass-mail { margin: 16px 0 0; text-align: center; }
.in-app { margin-top: 24px; display: flex; align-items: center; gap: 10px; justify-content: center; font-size: 14px; font-weight: 700; color: var(--body); }
.in-app svg { color: var(--green); }
.ticket-page .app-promo { margin-top: 24px; }
.pass-more { margin-top: 20px; align-self: center; }

/* "You're in" banner: drops in under the header, then goes away */
.toast { position: fixed; z-index: 30; left: 50%; top: 76px; transform: translate(-50%, -16px); opacity: 0;
  display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 20px 0 8px; border-radius: 999px;
  background: #fff; color: #000; font-size: 16px; box-shadow: 0 14px 40px rgba(0,0,0,.5);
  transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s ease; pointer-events: none; }
.toast b { font-weight: 800; color: #000; }
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }
.toast-ok { width: 32px; height: 32px; border-radius: 999px; background: var(--green); color: #fff; display: flex; align-items: center; justify-content: center; }
@media (min-width: 900px) { .toast { top: 88px; } }
@media (prefers-reduced-motion: no-preference) {
  .ticket-page .pass { animation: tk-pass .7s cubic-bezier(.2,.8,.2,1) both; }
  .ticket-page > :not(.pass) { animation: tk-in .5s cubic-bezier(.2,.7,.2,1) .2s both; }
}
@keyframes tk-pass { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
body { overflow-x: clip; }

/* ---------- Nov 11 (2): app row looks like an App Store listing, ticket details fold away ---------- */
.list-head { align-items: center; }
.app-promo { margin-top: 32px; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 14px; border-radius: 20px;
  background: #0A0A0B; border: 1px solid rgba(255,255,255,.12); text-decoration: none; color: #fff; }
.app-promo .app-icon { flex: none; width: 60px; height: 60px; padding: 0; border-radius: 14px; background: none; box-shadow: 0 0 0 1px rgba(255,255,255,.12); object-fit: cover; }
.app-text { gap: 2px; }
.app-text b { font-size: 16px; font-weight: 800; line-height: 1.25; }
.app-text small { font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--body); }
.app-store { margin-top: 3px; display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--secondary); }
.app-store svg { margin-top: -2px; }
.app-get { flex: none; height: 32px; min-width: 72px; padding: 0 16px; justify-content: center; border-radius: 999px; background: #fff; color: var(--pink); font-size: 15px; font-weight: 900; letter-spacing: .02em; text-transform: uppercase; }
.app-promo:hover { border-color: rgba(255,255,255,.24); }
.app-promo:hover .app-get { transform: scale(1.04); }
.app-get { transition: transform .2s ease; }

.pass-more-info { margin-top: 20px; border-top: 1px solid rgba(255,255,255,.1); border-bottom: 1px solid rgba(255,255,255,.1); }
.pass-more-info summary { list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 56px; cursor: pointer; font-size: 16px; font-weight: 700; color: #fff; }
.pass-more-info summary::-webkit-details-marker { display: none; }
.pass-more-info summary svg { color: var(--secondary); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.pass-more-info[open] summary svg { transform: rotate(180deg); }
.pass-more-info .pass-rows { margin: 0; border-top: 1px solid rgba(255,255,255,.1); }
.pass-more-info .pass-rows div:last-child { border-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .pass-more-info[open] .pass-rows { animation: tk-in .35s cubic-bezier(.2,.7,.2,1) both; } }
.ticket-page .app-promo { margin-top: 24px; }