/* V9: the V8 flow, cleaned. Loads after show-v2/v3/v7/v8 and overrides them.
   Rules: no 1px borders for structure, tonal bands instead; bigger radii; edge-to-edge media on phones;
   dots instead of "swipe"; one headline per block; one load motion. */

:root { --v9-r: 18px; --v9-r-sm: 12px; }

/* ---------- hero: one load moment (copy rises, photo settles) ---------- */
@keyframes v9-settle { from { transform: scale(1.06); } to { transform: scale(1); } }
html.v2-ready .wb-v9 .v2-hero-still { animation: v9-settle 1.6s cubic-bezier(.2,.7,.2,1) both; transform-origin: 50% 30%; }
@media (prefers-reduced-motion: reduce) { html.v2-ready .wb-v9 .v2-hero-still { animation: none; } }
.wb-v9 .v2-pill { border-color: rgba(255,255,255,.28); }

/* ---------- 2 · cards: no border, bigger radius, dots ---------- */
.wb-v9 .v8-points { padding: 48px 0 0; }
.wb-v9 .v8-point { border: 0; border-radius: var(--v9-r); background: var(--ink-2); }
.wb-v9 .v8-point > img, .wb-v9 .v8-point > video { aspect-ratio: 1 / 1; }
.wb-v9 .v8-point figcaption { padding: 16px 18px 20px; gap: 6px; }
.wb-v9 .v8-point figcaption h3 { font-size: clamp(22px, 5.8vw, 28px); }
.wb-v9 .v8-point figcaption span:not(.v2-hand) { color: var(--warm); }
.wb-v9 .v8-point figcaption .v2-hand { margin-top: 2px; }
.v9-dots { display: flex; justify-content: center; gap: 6px; margin: 4px 0 0; }
.v9-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.22); transition: background .2s, width .2s; }
.v9-dots i.is-on { background: var(--gold); width: 18px; border-radius: 3px; }

/* ---------- 3 · tickets: a charcoal band, full-bleed photo, facts in plain words ---------- */
.wb-v9 .v8-tix { background: var(--ink-2); padding: 0 0 40px; margin-top: 40px; }
.wb-v9 .v8-tix-grid { gap: 0; }
.wb-v9 .v8-tix-photo { margin: 0 -16px 24px; border-radius: 0; aspect-ratio: 4 / 3; }
.wb-v9 .v8-tix .v2-h2 { font-size: clamp(34px, 9vw, 56px); }
.wb-v9 .v8-card { margin-top: 18px; padding: 22px 20px 20px; border: 0; border-radius: var(--v9-r); background: var(--ink); display: grid; gap: 10px; }
.v9-fact { margin: 0; font: 400 16px/1.5 var(--body); color: var(--warm); }
.v9-fact strong { color: #fff; font-weight: 700; font-size: 17px; }
.v9-fact--venue { padding-bottom: 4px; }
.wb-v9 .v8-card .v2-btn--big { margin-top: 8px; width: 100%; }
.wb-v9 .v8-card .v7-sb-fine { margin-top: -2px; }
.wb-v9 .v8-timer { margin: 0 0 2px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wb-v9 .v8-tix-links { gap: 8px; margin-top: 14px; }
.wb-v9 .v8-tix-links .v7-link, .wb-v9 .v8-tix-links .v8-linkbtn { border-color: rgba(255,255,255,.16); color: #fff; }
.wb-v9 .v8-tix-links .v7-link:hover { background: rgba(255,255,255,.06); }
/* runs: rows inside the same card */
.wb-v9 .v8-card .v2-times { gap: 0; }
.wb-v9 .v8-card .v2-time { border-bottom: 1px solid rgba(255,255,255,.08); padding: 14px 0; }
.wb-v9 .v8-card .v2-time:last-child { border-bottom: 0; }

/* ---------- 4 · timeline: time is a marker, the title is the headline ---------- */
.wb-v9 .v8-night { padding: 56px 0 8px; }
.wb-v9 .v8-stops { margin-top: 28px; }
.wb-v9 .v8-stops::before { left: 7px; background: rgba(255,255,255,.1); }
.wb-v9 .v8-stop { grid-template-columns: 1fr 112px; gap: 4px 16px; padding: 0 0 36px 30px; }
.wb-v9 .v8-stop::before { top: 4px; width: 16px; height: 16px; }
.wb-v9 .v8-stop::after { left: 7px; top: 4px; }
.wb-v9 .v8-when { font: 900 15px/1.1 var(--display); letter-spacing: -.01em; color: var(--gold); padding-top: 3px; }
.wb-v9 .v8-stop--show .v8-when { color: var(--gold); }
.wb-v9 .v8-text h3 { font-size: clamp(22px, 5.8vw, 28px); margin: 4px 0 6px; }
.wb-v9 .v8-text p { font-size: 15px; color: var(--warm); }
.wb-v9 .v8-text .v2-hand { font-size: 18px; margin-top: 6px; }
.wb-v9 .v8-thumb { width: 112px; aspect-ratio: 4 / 5; border-radius: var(--v9-r-sm); }

/* ---------- 5 · host: full-bleed portrait, proof cards without borders ---------- */
.wb-v9 .v8-host { padding: 40px 0 0; }
.wb-v9 .v8-host-grid { gap: 18px; }
.wb-v9 .v2-wes-photo { width: calc(100% + 32px); max-width: none; height: auto; aspect-ratio: 4 / 5; margin: 0 -16px; border-radius: 0; transform: none; object-position: 50% 20%; }
.wb-v9 .v2-wes-p { margin-top: 10px; }
.wb-v9 .v2-wes-sign { margin-top: 12px; }
.wb-v9 .v8-proof-row { margin-top: 26px; gap: 12px; }
.wb-v9 .v8-proof { border: 0; border-radius: var(--v9-r); min-height: 250px; }
.wb-v9 .v8-proof--photo::after { background: linear-gradient(180deg, rgba(11,11,13,0) 40%, rgba(11,11,13,.9) 100%); }
.wb-v9 .v8-proof figcaption strong { font-size: 22px; }
.wb-v9 .v8-proof--stat strong { font-size: clamp(52px, 16vw, 72px); }
.wb-v9 .v8-proof--quote blockquote { font-size: clamp(17px, 4.8vw, 20px); }
.wb-v9 .v8-host .v9-dots { margin-bottom: 8px; }

/* ---------- 6 · faq: no rules, just rhythm ---------- */
.wb-v9 .v8-faq { padding-top: 24px; }
.wb-v9 .v8-faq .v2-faq-grid { border-top: 0; padding-top: 16px; }
.wb-v9 .v2-faq details { border: 0; background: var(--ink-2); border-radius: var(--v9-r-sm); padding: 14px 16px; margin-top: 8px; }
.wb-v9 .v2-faq summary { font-size: 16px; }
.wb-v9 .v2-faq details p { margin: 10px 0 0; }
.wb-v9 .v2-faq.v8-faq { padding-bottom: 56px; }

/* ---------- 7 · group chat: a charcoal band, a real-looking message ---------- */
.wb-v9 .v8-group { border-top: 0; background: var(--ink-2); padding: 52px 0 48px; }
.wb-v9 .v8-bubble { border: 0; background: var(--ink); border-radius: 22px 22px 22px 8px; padding: 16px 18px 14px; }
.wb-v9 .v8-bubble p { font-size: 18px; line-height: 1.4; }
.wb-v9 .v8-chip { border-color: rgba(255,255,255,.22); background: var(--ink); }
.wb-v9 .v8-chip.is-on { background: #fff; color: var(--ink); border-color: #fff; }
.wb-v9 .v8-group .v8-aside { margin-top: 12px; }

/* ---------- 8 · sign-off ---------- */
.wb-v9 .v8-sign { background: var(--ink); padding: 56px 0 72px; }
.wb-v9 .v8-sign-photo { border-radius: var(--v9-r-sm); transform: none; }

/* ---------- desktop ---------- */
@media (min-width: 960px) {
  .wb-v9 .v8-points { padding: 96px 0 0; }
  .wb-v9 .v8-point > img, .wb-v9 .v8-point > video { aspect-ratio: 4 / 5; }
  .wb-v9 .v9-dots { display: none; }
  .wb-v9 .v8-tix { margin-top: 96px; padding: 96px 0; }
  .wb-v9 .v8-tix-grid { gap: 72px; }
  .wb-v9 .v8-tix-photo { margin: 0; border-radius: var(--v9-r); aspect-ratio: 4 / 5; }
  .wb-v9 .v8-tix .v2-h2 { font-size: clamp(40px, 4.4vw, 64px); }
  .wb-v9 .v8-card { padding: 28px 28px 24px; }
  .wb-v9 .v8-card .v2-btn--big { width: 100%; }
  .wb-v9 .v8-night { padding: 96px 0 40px; }
  .wb-v9 .v8-stop { grid-template-columns: 1fr 300px; gap: 6px 48px; padding: 0 0 56px 36px; }
  .wb-v9 .v8-when { font-size: 17px; }
  .wb-v9 .v8-text h3 { font-size: 30px; }
  .wb-v9 .v8-text p { font-size: 17px; }
  .wb-v9 .v8-thumb { width: 300px; aspect-ratio: 4 / 3; border-radius: var(--v9-r); }
  .wb-v9 .v8-host { padding: 96px 0 0; }
  .wb-v9 .v8-host-grid { grid-template-columns: 280px 1fr; gap: 56px; }
  .wb-v9 .v2-wes-photo { width: 280px; height: 350px; margin: 0; border-radius: var(--v9-r); }
  .wb-v9 .v8-proof-row { margin-top: 48px; }
  .wb-v9 .v8-faq { padding-top: 56px; }
  .wb-v9 .v2-faq.v8-faq { padding-bottom: 96px; }
  .wb-v9 .v8-group { padding: 104px 0 96px; }
  .wb-v9 .v8-sign { padding: 104px 0 128px; }
}

/* pass 2: breathing room between bands, dots under the host row */
@media (max-width: 959px) {
  .wb-v9 .v8-tix { margin-top: 48px; padding-bottom: 48px; }
  .wb-v9 .v8-night { padding-top: 64px; }
  .wb-v9 .v8-host { padding-top: 56px; }
  .wb-v9 .v8-host .v9-dots { margin: 10px 0 16px; }
  .wb-v9 .v8-faq { padding-top: 40px; }
  .wb-v9 .v2-faq.v8-faq { padding-bottom: 64px; }
  .wb-v9 .v8-group { padding: 56px 0 56px; }
  .wb-v9 .v8-sign { padding: 64px 0 80px; }
}
@media (min-width: 960px) {
  .wb-v9 .v8-proof-row { grid-template-columns: repeat(4, 1fr); }
  .wb-v9 .v8-proof { min-height: 300px; }
}

/* pass 3 */
.wb-v9 .v8-next { margin-top: 12px; }
.wb-v9 .v9-dots i { width: 8px; height: 8px; }
.wb-v9 .v9-dots i.is-on { width: 22px; border-radius: 4px; }
.v9-when { margin: 8px 0 0; font: 400 17px/1.4 var(--body); color: var(--warm); }
.v9-when em { font-style: normal; color: var(--gold); font-weight: 700; }
.wb-v9 .v8-tix .v2-h2 { font-size: clamp(30px, 8vw, 50px); }
@media (min-width: 960px) { .wb-v9 .v9-when { font-size: 20px; } .wb-v9 .v8-tix .v2-h2 { font-size: clamp(36px, 3.8vw, 56px); } }

/* pass 4: fewer words, same rhythm */
.wb-v9 .v8-group-head .v2-h2 { margin-bottom: 18px; }
.wb-v9 .v2-wes-p { font-size: 18px; }