/*
 * Homepage redesign, 2026-10-17. The look follows hiibiza.com (the owner's
 * reference): big rounded photo cards, dark cards with small label pills,
 * huge heavy caps words and light glass buttons and cards.
 * Only real material is used: venue photos (images/venues) and real app
 * screenshots (images/product). Flat backgrounds; the colour lights and the
 * sheen of the atmosphere stage stay hidden. The island header is unchanged.
 * Loaded last on landing.html.
 */

:root {
  --hi-paper: #f2f1ed;
  --hi-ink: #141414;
  --hi-soft: #5c5c58;
  --hi-card: #1d1d1d;
  --hi-card-2: #2a2a2a;
  --hi-radius: 40px;
  --hi-radius-inner: 30px;
  --hi-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html,
body {
  background: var(--hi-paper);
}
body .ambient {
  display: none;
}

/* ---------- Pills ---------- */
.pill-white,
.pill-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms var(--hi-ease), background-color 200ms;
}
.pill-white {
  background: #fff;
  color: var(--hi-ink);
}
.pill-dark {
  background: var(--hi-ink);
  color: #fff;
}
.pill-white:active,
.pill-dark:active {
  transform: scale(0.97);
}

/* ---------- Hero: one real photo, rounded, full width ---------- */
body .hero.hero--photo {
  display: block;
  height: auto;
  min-height: 0;
  padding: 12px;
}
.hero__frame {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(92svh, 900px);
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
  isolation: isolate;
}
.hero__photo {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 26%, rgba(0, 0, 0, 0.4) 52%, rgba(0, 0, 0, 0.9) 100%);
}
.hero__inner {
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 0 20px clamp(36px, 6vw, 72px);
  color: #fff;
  text-align: center;
}
.hero__kicker {
  margin: 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body .hero.hero--photo h1.hero__title {
  display: block;
  width: auto;
  min-height: 0;
  margin: 0;
  color: #fff;
  font-size: clamp(3.4rem, 11vw, 10.5rem);
  letter-spacing: -0.06em;
  line-height: 0.84;
  text-wrap: balance;
}
.hero__lede {
  max-width: 36rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-size: clamp(1.02rem, 1.6vw, 1.22rem);
  line-height: 1.45;
}
body .hero.hero--photo .hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* ---------- Huge centred words ---------- */
.hi-title {
  position: relative;
  z-index: 2;
  margin: 0;
  padding: clamp(56px, 8vw, 112px) 16px clamp(24px, 3vw, 40px);
  color: var(--hi-ink);
  font-family: var(--display-font);
  font-size: clamp(3.4rem, 12vw, 9.5rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.88;
  text-align: center;
  text-transform: uppercase;
}
.hi-lede {
  max-width: 34rem;
  margin: -8px auto clamp(28px, 4vw, 48px);
  padding: 0 16px;
  color: var(--hi-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  text-align: center;
}
/* ---------- LIVE: real venue photo cards ---------- */
.live {
  position: relative;
  z-index: 2;
  padding-bottom: clamp(64px, 9vw, 120px);
}
.live__lede {
  max-width: 34rem;
  margin: -12px auto clamp(28px, 4vw, 48px);
  padding: 0 16px;
  color: var(--hi-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  text-align: center;
}
.live__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(16px, calc((100vw - 1180px) / 2));
  scrollbar-width: none;
  outline: none;
}
.live__track::-webkit-scrollbar {
  display: none;
}
.live__list {
  display: flex;
  gap: 12px;
  width: max-content;
  margin: 0;
  padding: 0 max(16px, calc((100vw - 1180px) / 2));
  list-style: none;
}
.live-card {
  position: relative;
  flex: none;
  width: clamp(270px, 30vw, 420px);
  aspect-ratio: 9 / 14;
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
  scroll-snap-align: start;
  isolation: isolate;
}
.live-card img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 900ms var(--hi-ease);
}
.live-card:hover img {
  transform: scale(1.07);
}
.live-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0.78) 88%);
}
.live-card__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0 22px 28px;
  color: #fff;
  text-align: center;
}
.live-card__tag {
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.live-card__title {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
.live-card__more {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  background: #fff;
  color: var(--hi-ink);
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 500;
  text-decoration: none;
  transition: transform 200ms var(--hi-ease);
}
.live-card__more:active {
  transform: scale(0.97);
}
.live__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.live__dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.2);
  cursor: pointer;
  transition:
    background-color 200ms,
    transform 300ms var(--hi-ease);
}
.live__dots button[aria-current="true"] {
  background: var(--hi-ink);
  transform: scale(1.15);
}

.live {
  position: relative;
  z-index: 2;
}
.live-card img {
  object-position: center 35%;
}

/* ---------- For you / the DJ / the club: real photo + dark card ---------- */
.part {
  position: relative;
  z-index: 2;
}
.part__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
}
.part--flip .part__photo {
  order: 2;
}
.part__photo {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
}
.part__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.part__photo--pair {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 12px;
  overflow: visible;
  background: none;
}
.part__cell {
  position: relative;
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
}
.part__card {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--hi-radius);
  background: var(--hi-card);
  color: #fff;
}
.part__kicker {
  justify-self: start;
  margin: 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.part__title {
  margin: 0;
  font-family: var(--display-font);
  font-size: clamp(2rem, 3.4vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.98;
  text-wrap: balance;
}
.part__steps,
.part__points {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
.part__steps li,
.part__points li {
  display: grid;
  gap: 4px;
  padding: 16px 18px;
  border-radius: 22px;
  background: var(--hi-card-2);
}
.part__steps li {
  grid-template-columns: auto 1fr;
  column-gap: 14px;
  counter-increment: step;
}
.part__steps li::before {
  content: counter(step);
  grid-row: span 2;
  font-family: var(--display-font);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  color: var(--playit-purple-2, #9b82ff);
}
.part__steps b,
.part__points b {
  font-size: 1.05rem;
  font-weight: 600;
}
.part__steps span,
.part__points span {
  color: rgba(255, 255, 255, 0.66);
  font-size: 0.95rem;
  line-height: 1.45;
}
.part__shots {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 8px;
  padding: 26px 18px 0;
  overflow: hidden;
  border-radius: var(--hi-radius-inner);
  background: #000;
}
.part__shots .shot {
  width: min(44%, 210px);
  height: auto;
  margin-bottom: -60px;
  border-radius: 26px 26px 0 0;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.part__shots--one .shot {
  width: min(62%, 250px);
}

/* ---------- FAQ teaser ---------- */
.faq-teaser {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 24px;
  padding-bottom: clamp(40px, 6vw, 80px);
}
.faq-teaser__list {
  display: grid;
  gap: 8px;
  width: min(820px, calc(100% - 24px));
}
.faq-teaser details {
  border-radius: 26px;
  background: #fff;
}
.faq-teaser summary {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 26px;
  color: var(--hi-ink);
  font-size: 1.08rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}
.faq-teaser summary::-webkit-details-marker {
  display: none;
}
.faq-teaser summary::after {
  content: "+";
  font-size: 1.5rem;
  line-height: 1;
  transition: transform 250ms var(--hi-ease);
}
.faq-teaser details[open] summary::after {
  transform: rotate(45deg);
}
.faq-teaser details p {
  margin: 0;
  padding: 0 26px 22px;
  color: var(--hi-soft);
  line-height: 1.5;
}

/* ---------- Pricing: Hï Ibiza cards ---------- */
.hi-title--pricing {
  padding-top: clamp(40px, 8vw, 100px);
}
body .pricing-stage {
  background: transparent;
  box-shadow: none;
  border: 0;
}
body .pricing-card {
  align-items: center;
  gap: 6px;
  padding: 12px 12px 22px;
  border: 0;
  border-radius: var(--hi-radius);
  background: var(--hi-card);
  color: #fff;
  text-align: center;
  box-shadow: 0 30px 60px -36px rgba(0, 0, 0, 0.6);
}
body .pricing-card .pricing-card__top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: 16px 18px 0;
  color: rgba(255, 255, 255, 0.55);
}
body .pricing-card .pricing-card__eyebrow {
  color: rgba(255, 255, 255, 0.55);
}
body .pricing-card .pricing-card__badge {
  padding: 5px 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--hi-ink);
  font-weight: 600;
  letter-spacing: 0.12em;
}
body .pricing-card h3 {
  justify-content: center;
  color: #fff;
}
body .pricing-card .pricing-card__logo {
  filter: brightness(0) invert(1);
}
body .pricing-card .pricing-card__position,
body .pricing-card .pricing-card__audience,
body .pricing-card [data-plan-fee-label],
body .pricing-card .pricing-card__price span,
body .pricing-card [data-plan-features] li {
  color: rgba(255, 255, 255, 0.72);
}
body .pricing-card .pricing-card__fee strong,
body .pricing-card .pricing-card__price strong {
  color: #fff;
  font-family: var(--display-font);
  letter-spacing: -0.05em;
}
body .pricing-card .pricing-card__fee strong {
  font-size: clamp(4.2rem, 8vw, 6.4rem);
  line-height: 0.85;
}
body .pricing-card .pricing-card__rule {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.12);
}
body .pricing-card .pricing-card__cta {
  display: flex;
  width: 100%;
  margin-top: auto;
}
body .pricing-card .pricing-card__cta > span:not(.cta-glass__arrow):not(.cta-glass__label):not(.cta-glass__source) {
  color: inherit;
}
body .pricing-currency-switcher {
  padding: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 10px 30px -20px rgba(0, 0, 0, 0.4);
}
body .pricing-currency-switcher button {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  color: var(--hi-ink);
  font-weight: 500;
}
body .pricing-currency-switcher button[aria-pressed="true"] {
  background: var(--hi-ink);
  color: #fff;
}

/* ---------- Free month: photo with huge lettering ---------- */
.trial .trial__copy {
  padding: 12px 12px 26px;
  border-radius: var(--hi-radius);
  background: #000;
  color: #fff;
}
.trial .trial__copy > :not(.trial__photo) {
  margin-inline: 14px;
}
.trial__photo {
  position: relative;
  aspect-ratio: 4 / 3;
  margin-bottom: 22px;
  overflow: hidden;
  border-radius: var(--hi-radius-inner);
}
.trial__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.trial__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.62));
}
.trial__big {
  position: absolute;
  z-index: 1;
  left: 22px;
  bottom: 18px;
  display: grid;
  margin: 0;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.86;
}
.trial .trial__title {
  color: #fff;
}
.trial .trial__lede,
.trial .trial__facts span {
  color: rgba(255, 255, 255, 0.7);
}
.trial .product-kicker {
  color: var(--playit-purple-2, #9b82ff);
}
.trial .trial__facts li {
  border: 0;
  border-radius: 22px;
  background: var(--hi-card);
}
.trial .trial__facts b {
  color: #fff;
}

.trial__big {
  word-spacing: 0.12em;
}

/* ---------- Final call ---------- */
body .final-cta {
  background: transparent;
}

/* ---------- Menu photo cards ---------- */
body .menu-gallery a {
  border-radius: 18px;
}
body .menu-gallery span {
  top: auto;
  bottom: 0.4rem;
  font-size: 0.6rem;
}

@media (max-width: 860px) {
  .part__grid {
    grid-template-columns: 1fr;
  }
  .part--flip .part__photo {
    order: 0;
  }
  .part__photo {
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .part__photo--pair {
    aspect-ratio: auto;
    grid-template-rows: none;
    grid-template-columns: 1fr 1fr;
  }
  .part__cell {
    aspect-ratio: 3 / 4;
  }
}
@media (max-width: 640px) {
  :root {
    --hi-radius: 30px;
    --hi-radius-inner: 24px;
  }
  body .hero.hero--photo {
    padding: 8px;
  }
  .hero__frame {
    min-height: 88svh;
  }
  .hero__kicker {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
  }
  .live-card {
    width: 78vw;
  }
  .part__grid {
    width: calc(100% - 16px);
    gap: 8px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .live-card img,
  .live-card:hover img {
    transition: none;
    transform: none;
  }
}

/* Long labels (German) must not widen the hero on phones. */
.hero__frame {
  grid-template-columns: minmax(0, 1fr);
}
.hero__inner {
  min-width: 0;
}
@media (max-width: 640px) {
  .hero__inner {
    padding-inline: 12px;
  }
  body .cta-glass.cta-glass.cta-glass {
    padding-inline: 1.15rem;
    font-size: 0.9rem;
  }
  body .final-cta__actions {
    max-width: 100%;
  }
}

/* ---------- Tighter rhythm (owner review, 2026-10-17) ---------- */
.live {
  padding-bottom: clamp(24px, 4vw, 48px);
}
body .final-cta {
  min-height: 0;
  padding: clamp(64px, 9vw, 128px) 20px;
}

/* ---------- Price cards: one label, centred logo, no green ---------- */
body .pricing-card .pricing-card__top {
  justify-content: flex-end;
}
body .pricing-card .pricing-card__eyebrow {
  display: none;
}
body .pricing-card h3 {
  margin-top: 0.6rem;
}
body .pricing-card h3 .pricing-card__logo {
  margin-inline: auto;
}
body .pricing-card .pricing-card__position,
body .pricing-card .pricing-card__audience {
  min-height: 0;
}
body .pricing-card .pricing-card__audience {
  margin-top: 0.35rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
}
body .pricing-card .pricing-card__fee {
  margin-top: 1.1rem;
  border-top: 0;
  padding-top: 0;
}
body .pricing-card .pricing-card__fee-note,
body .pricing-card .pricing-card__fee-note span,
body .pricing-card .pricing-card__hardware {
  color: var(--playit-purple-2, #9b82ff);
}
body .pricing-card [data-plan-features] {
  display: grid;
  justify-content: center;
  gap: 0.45rem;
  margin: 0.4rem 0 1.4rem;
  padding: 0;
  text-align: left;
}
body .pricing-card [data-plan-features] li {
  justify-content: flex-start;
}
.hi-lede--after {
  margin: 22px auto 0;
}

/* =====================================================================
 * Round 3 (owner review, 2026-10-17): sideways card carousels for FOR YOU
 * and FOR THE DJ (the "Live at Altfel" card style), purple instead of
 * black panels, short Hï-style text, pricing on one screen, and the
 * original colour background back (not behind the hero).
 * ===================================================================== */

/* ---------- Original colour background, after the hero only ---------- */
body .ambient {
  display: block;
  opacity: 0;
  transition: opacity 1200ms ease;
}
body.past-hero .ambient {
  opacity: 0.72;
}
body .ambient__sheen {
  display: none;
}

/* ---------- Carousels ---------- */
.live--steps {
  padding-bottom: clamp(24px, 4vw, 48px);
}
.live-card--app {
  background: linear-gradient(160deg, var(--playit-purple-2, #9b82ff), var(--playit-purple, #7a5af8) 45%, var(--playit-purple-deep, #5b3fd6));
}
.live-card--app::after {
  background: linear-gradient(180deg, rgba(91, 63, 214, 0) 45%, rgba(56, 36, 150, 0.92) 82%);
}
.live-card .live-card__shot {
  position: absolute;
  top: 9%;
  right: auto;
  bottom: auto;
  left: 50%;
  z-index: -2;
  width: 64%;
  height: auto;
  border-radius: 24px;
  box-shadow: 0 30px 60px -24px rgba(20, 8, 70, 0.7);
  object-fit: contain;
  transform: translateX(-50%);
  transition: transform 900ms var(--hi-ease);
}
.live-card--app:hover .live-card__shot {
  transform: translateX(-50%) translateY(-10px);
}

/* ---------- For the club: photos, then purple tiles ---------- */
/* landing-product.css has an older ".club" grid; reset it. */
body section.club {
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  gap: 0;
  grid-template-columns: none;
}
.club__photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
}
.club__photos figure {
  position: relative;
  height: clamp(320px, 42vw, 560px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
  isolation: isolate;
}
.club__photos img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.club__photos figure::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.75) 92%);
}
.club__photos figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 0 20px 28px;
  color: #fff;
  text-align: center;
}
.club__photos figcaption b {
  font-family: var(--display-font);
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.club__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  width: min(1180px, calc(100% - 24px));
  margin: 12px auto 0;
  padding: 0;
  list-style: none;
}
.club__tiles li {
  display: grid;
  align-content: end;
  gap: 8px;
  min-height: 200px;
  padding: 26px 24px;
  border-radius: 32px;
  background: linear-gradient(160deg, var(--playit-purple-2, #9b82ff), var(--playit-purple, #7a5af8) 55%, var(--playit-purple-deep, #5b3fd6));
  color: #fff;
}
.club__tiles b {
  font-family: var(--display-font);
  font-size: clamp(1.4rem, 2.1vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
.club__tiles span {
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.95rem;
}
.club__more {
  display: flex;
  justify-content: center;
  margin-top: 28px;
}

/* ---------- Pricing: one screen ---------- */
body .pricing-stage {
  padding-block: 0;
}
body .pricing-stage .pricing-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
  margin: 0 auto 20px;
}
.pricing-free {
  margin: 0;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--hi-ink);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
body .pricing-stage .pricing-grid {
  width: min(1060px, calc(100% - 24px));
  margin-inline: auto;
  gap: 12px;
}
body .pricing-card {
  min-height: 0;
  gap: 4px;
  padding: 10px 10px 16px;
  background: #fff;
  color: var(--hi-ink);
  box-shadow: 0 24px 50px -36px rgba(20, 20, 40, 0.35);
}
body .pricing-card.pricing-card--pro {
  background: linear-gradient(160deg, var(--playit-purple-2, #9b82ff), var(--playit-purple, #7a5af8) 55%, var(--playit-purple-deep, #5b3fd6));
  color: #fff;
}
body .pricing-card .pricing-card__position,
body .pricing-card .pricing-card__audience,
body .pricing-card .pricing-card__fee-note,
body .pricing-card .pricing-card__hardware,
body .pricing-card .pricing-card__rule {
  display: none;
}
body .pricing-card h3,
body .pricing-card .pricing-card__fee strong,
body .pricing-card .pricing-card__price strong {
  color: inherit;
}
body .pricing-card .pricing-card__logo {
  filter: none;
}
body .pricing-card--pro .pricing-card__logo {
  filter: brightness(0) invert(1);
}
body .pricing-card .pricing-card__badge {
  background: var(--hi-ink);
  color: #fff;
}
body .pricing-card--pro .pricing-card__badge {
  background: #fff;
  color: #0b0b0c;
}
body .pricing-card .pricing-card__fee strong {
  font-size: clamp(3.4rem, 5.6vw, 4.6rem);
}
body .pricing-card .pricing-card__fee span,
body .pricing-card .pricing-card__price span,
body .pricing-card [data-plan-fee-label],
body .pricing-card [data-plan-features] li {
  color: var(--hi-soft);
}
body .pricing-card--pro .pricing-card__fee span,
body .pricing-card--pro .pricing-card__price span,
body .pricing-card--pro [data-plan-fee-label],
body .pricing-card--pro [data-plan-features] li {
  color: rgba(255, 255, 255, 0.82);
}
body .pricing-card [data-plan-features] {
  margin: 0.2rem 0 0.9rem;
}
body .pricing-card--pro .pricing-card__cta.cta-glass.cta-glass.cta-glass {
  background: #fff;
  color: #0b0b0c;
  animation: none;
}
body .pricing-currency-switcher {
  box-shadow: none;
}

@media (max-width: 860px) {
  .club__tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .club__photos {
    gap: 8px;
    width: calc(100% - 16px);
  }
  .club__photos figure {
    height: 300px;
  }
  .club__photos figcaption b {
    font-size: 1.15rem;
  }
  .club__tiles {
    gap: 8px;
    width: calc(100% - 16px);
    margin-top: 8px;
  }
  .club__tiles li {
    min-height: 160px;
    padding: 20px 18px;
    border-radius: 26px;
  }
  .club__tiles b {
    font-size: 1.2rem;
  }
  .club__tiles span {
    font-size: 0.86rem;
  }
}

/* ---------- Hero: text beside the photo, never on top of it ----------
 * The photo is portrait; the PLAY IT screen and QR in it must stay visible. */
.hero__frame {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: stretch;
  gap: 12px;
  min-height: min(86svh, 820px);
  padding: 12px;
  background: #170b36;
}
.hero__frame::after {
  content: none;
}
body .hero.hero--photo .hero__photo {
  position: relative;
  inset: auto;
  z-index: 0;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: calc(var(--hi-radius) - 12px);
  object-fit: cover;
  object-position: center 62%;
}
body .hero.hero--photo .hero__inner {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-items: start;
  padding: clamp(28px, 4vw, 64px);
  text-align: left;
}
body .hero.hero--photo h1.hero__title {
  font-size: clamp(3rem, 7.2vw, 7.6rem);
}
body .hero.hero--photo .hero__actions {
  justify-content: flex-start;
}
@media (max-width: 860px) {
  .hero__frame {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }
  body .hero.hero--photo .hero__photo {
    grid-column: 1;
    grid-row: 1;
    height: auto;
    aspect-ratio: 4 / 5;
    object-position: center 55%;
  }
  body .hero.hero--photo .hero__inner {
    grid-column: 1;
    grid-row: 2;
    justify-items: center;
    padding: 18px 8px 26px;
    text-align: center;
  }
  body .hero.hero--photo .hero__actions {
    justify-content: center;
  }
}

/* ---------- Round 4 (owner review) ---------- */
/* Hero panel in the card purple, so it never reads as black. */
.hero__frame {
  background: linear-gradient(160deg, #9b82ff, #7a5af8 55%, #5b3fd6);
}
.hero__kicker {
  background: rgba(0, 0, 0, 0.28);
}

/* App cards: the screenshot gets its own window; label and title sit
   below it on plain purple, never on top of the app. */
.live-card--app::after {
  content: none;
}
.live-card .live-card__shot {
  top: 6%;
  width: 62%;
  height: 60%;
  border-radius: 22px;
  object-fit: cover;
  object-position: top center;
}
.live-card--app .live-card__body {
  padding-bottom: 26px;
}

/* Club tiles: compact. */
.club__tiles li {
  min-height: 0;
  align-content: start;
  padding: 22px 22px 24px;
  border-radius: 28px;
}
@media (max-width: 640px) {
  .club__tiles li {
    min-height: 0;
    padding: 18px 16px 20px;
  }
}

/* ---------- Pricing, round 4: no purple ----------
 * Basic white, Pro white with a black ring, Signature warm gold (premium). */
body .pricing-card,
body .pricing-card.pricing-card--pro {
  padding: 14px 14px 18px;
  border: 0;
  background: #fff;
  color: var(--hi-ink);
  box-shadow: 0 30px 60px -40px rgba(20, 20, 40, 0.35);
}
body .pricing-card.pricing-card--pro {
  box-shadow:
    0 0 0 2px var(--hi-ink),
    0 30px 60px -36px rgba(20, 20, 40, 0.45);
}
body .pricing-card.pricing-card--signature {
  background: linear-gradient(165deg, #fffaf0, #f6e6c4 60%, #ecd29c);
}
body .pricing-card .pricing-card__position {
  display: block;
  min-height: 0;
  margin: 2px 0 6px;
  color: var(--hi-soft);
  font-size: 0.92rem;
}
body .pricing-card--pro .pricing-card__logo {
  filter: none;
}
body .pricing-card .pricing-card__badge,
body .pricing-card--pro .pricing-card__badge {
  background: var(--hi-ink);
  color: #fff;
}
body .pricing-card--signature .pricing-card__badge {
  background: #a87a2a;
  color: #fff;
}
body .pricing-card--pro .pricing-card__fee span,
body .pricing-card--pro .pricing-card__price span,
body .pricing-card--pro [data-plan-fee-label],
body .pricing-card--pro [data-plan-features] li {
  color: var(--hi-soft);
}
body .pricing-card [data-plan-features] li::before,
body .pricing-card [data-plan-features] li::marker {
  color: var(--hi-ink);
}
body .pricing-card--pro .pricing-card__cta.cta-glass.cta-glass.cta-glass {
  background: linear-gradient(110deg, #0b0b0c, #2b2b2e 45%, #0b0b0c 70%, #000) 0 50% / 260% 100%;
  color: #fff;
  animation: cta-glass-wave 16s ease-in-out infinite alternate;
}
body .pricing-card .pricing-card__fee strong {
  color: var(--hi-ink);
}

/* ---------- "No more flashing your phone at the DJ" (owner asked it back) ----------
 * Big rounded photo, huge words beside it (never on top of it); a line
 * strikes through "flashing your phone" as it scrolls in. */
.flash {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  width: min(1180px, calc(100% - 24px));
  margin: clamp(56px, 8vw, 120px) auto 0;
}
.flash__photo {
  margin: 0;
  overflow: hidden;
  border-radius: var(--hi-radius);
  aspect-ratio: 1;
  background: #111;
  box-shadow: 0 40px 80px -50px rgba(20, 10, 40, 0.6);
}
.flash__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--hi-ease);
}
.flash:hover .flash__photo img {
  transform: scale(1.03);
}
.flash__copy {
  display: grid;
  gap: 22px;
}
.flash__title {
  display: grid;
  gap: 0.06em;
  margin: 0;
  color: var(--hi-ink);
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 5.6vw, 5.4rem);
  font-weight: 700;
  letter-spacing: -0.05em;
  line-height: 0.9;
  text-transform: uppercase;
}
.flash__strike {
  position: relative;
  justify-self: start;
  color: var(--hi-soft);
}
.flash__strike::after {
  content: "";
  position: absolute;
  left: -0.04em;
  right: -0.04em;
  top: 52%;
  height: 0.09em;
  border-radius: 999px;
  background: var(--hi-ink);
  transform-origin: left center;
}
.hi-motion .flash__strike::after {
  transform: scaleX(0);
  transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1) 500ms;
}
.hi-motion .flash__copy.is-in .flash__strike::after {
  transform: scaleX(1);
}
.flash__line {
  margin: 0;
  color: var(--hi-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
}
@media (max-width: 760px) {
  .flash {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 16px);
    text-align: center;
  }
  .flash__title,
  .flash__strike {
    justify-self: center;
  }
  .flash__title {
    justify-items: center;
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .flash__photo img,
  .flash:hover .flash__photo img {
    transition: none;
    transform: none;
  }
}

/* =====================================================================
 * Round 5 (owner, 2026-10-17: "no more purple"): the gold of the logo and
 * warm cream replace every purple surface. Hero text sits on the page
 * itself, beside the photo.
 * ===================================================================== */
:root {
  --warm-card: linear-gradient(165deg, #fffaf0, #f6e6c4 60%, #ecd29c);
  --gold-ink: #9c6c1f;
}
.hero__frame {
  background: none;
  padding: 0;
}
body .hero.hero--photo .hero__photo {
  border-radius: var(--hi-radius);
}
body .hero.hero--photo .hero__inner {
  color: var(--hi-ink);
  padding-left: clamp(8px, 2vw, 32px);
}
body .hero.hero--photo h1.hero__title {
  color: var(--hi-ink);
}
.hero__kicker {
  background: var(--hi-ink);
  color: #fff;
}
.hero__lede {
  color: var(--hi-soft);
}

/* App cards: warm cream with dark text. */
.live-card--app {
  background: var(--warm-card);
}
.live-card--app .live-card__body {
  color: var(--hi-ink);
}
.live-card--app .live-card__tag {
  background: var(--hi-ink);
  color: #fff;
}
.live-card .live-card__shot {
  box-shadow: 0 30px 60px -28px rgba(110, 70, 10, 0.55);
}

/* Club tiles: white with a gold line. */
.club__tiles li {
  background: #fff;
  color: var(--hi-ink);
  box-shadow: inset 0 3px 0 var(--gold, #e6b65e), 0 20px 40px -32px rgba(20, 20, 40, 0.35);
}
.club__tiles span {
  color: var(--hi-soft);
}

/* Leftover purple accents. */
.part__steps li::before,
.trial .product-kicker {
  color: var(--gold-ink);
}

/* Pricing: gold buttons on white; Signature (already gold) gets black. */
body .pricing-card--pro .pricing-card__cta.cta-glass.cta-glass.cta-glass {
  background: linear-gradient(110deg, var(--gold), var(--gold-light) 45%, var(--gold) 70%, var(--gold-deep)) 0 50% / 260% 100%;
  color: var(--cta-ink);
}
body .pricing-card--signature .pricing-card__cta.cta-glass.cta-glass.cta-glass {
  background: var(--cta-ink);
  color: #fff;
  animation: none;
}
body .pricing-card--signature .pricing-card__cta .cta-glass__logo {
  filter: brightness(0) invert(1);
}

/* The original background's lilac light becomes peach (no purple). */
body .ambient__light:nth-child(2) {
  --colour-core: rgba(255, 185, 138, 0.8);
  --colour-soft: rgba(255, 221, 196, 0.45);
}

/* =====================================================================
 * Round 6 (owner's choice, 2026-10-17: "light glass"): buttons and cards are
 * frosted white glass like the top bar, black text. No gold, no purple.
 * ===================================================================== */
:root {
  --glass-card: rgba(255, 255, 255, 0.52);
  --glass-card-line: rgba(255, 255, 255, 0.8);
  --glass-card-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 24px 50px -34px rgba(20, 20, 40, 0.4);
}
.live-card--app,
.club__tiles li,
body .pricing-card,
body .pricing-card.pricing-card--pro,
body .pricing-card.pricing-card--signature,
.faq-teaser details {
  border: 1px solid var(--glass-card-line);
  background: var(--glass-card);
  box-shadow: var(--glass-card-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(1.35);
  backdrop-filter: blur(22px) saturate(1.35);
}
body .pricing-card.pricing-card--pro {
  box-shadow:
    0 0 0 2px var(--hi-ink),
    var(--glass-card-shadow);
}
.club__tiles li {
  box-shadow: var(--glass-card-shadow);
}
.live-card .live-card__shot {
  box-shadow: 0 30px 60px -28px rgba(20, 20, 40, 0.45);
}
.live-card--app .live-card__tag,
.hero__kicker,
.pricing-free,
body .pricing-card .pricing-card__badge,
body .pricing-card--pro .pricing-card__badge,
body .pricing-card--signature .pricing-card__badge {
  border: 1px solid var(--glass-card-line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--hi-ink);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.part__steps li::before,
.trial .product-kicker {
  color: var(--hi-ink);
}
/* Every pricing button is the same glass button. */
body .pricing-card--pro .pricing-card__cta.cta-glass.cta-glass.cta-glass,
body .pricing-card--signature .pricing-card__cta.cta-glass.cta-glass.cta-glass {
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.5) 70%, rgba(255, 255, 255, 0.38))
    0 50% / 260% 100%;
  color: var(--hi-ink);
  animation: cta-glass-wave 16s ease-in-out infinite alternate;
}
body .pricing-card--signature .pricing-card__cta .cta-glass__logo {
  filter: brightness(0);
}

/* ---------- Full PC screens: keep the hero in proportion ---------- */
.hero__frame {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(46%, 600px));
  max-width: 1360px;
  min-height: min(84svh, 780px);
  margin-inline: auto;
}
body .hero.hero--photo .hero__inner {
  padding-left: clamp(8px, 3vw, 56px);
}
body .hero.hero--photo h1.hero__title {
  font-size: clamp(3rem, 6.4vw, 6.8rem);
}
.hero__lede {
  max-width: 30rem;
}
@media (max-width: 860px) {
  .hero__frame {
    grid-template-columns: minmax(0, 1fr);
    max-width: none;
    min-height: 0;
  }
}

/* ---------- Strike line through each line of "flashing your phone" ---------- */
.flash__title {
  display: block;
}
.flash__title > span {
  display: block;
}
.flash__strike,
.hi-motion .flash__strike {
  display: inline;
  padding: 0 0.04em;
  background: linear-gradient(var(--hi-ink), var(--hi-ink)) no-repeat 0 56% / 100% 0.09em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.flash__strike::after,
.hi-motion .flash__strike::after {
  content: none;
}
.hi-motion .flash__strike {
  background-size: 0% 0.09em;
  transition: background-size 1000ms cubic-bezier(0.65, 0, 0.35, 1) 500ms;
}
.hi-motion .flash__copy.is-in .flash__strike {
  background-size: 100% 0.09em;
}
.site-header .header-actions .header-signup.cta-glass.cta-glass.cta-glass {
  background: rgba(255, 255, 255, 0.9);
}

/* =====================================================================
 * Round 7 (owner, 2026-10-17): the original typewriter headline is back,
 * the bar sits in the white strip above the hero photo (never on it), and
 * the moving colour background shows in the hero's white area too.
 * ===================================================================== */
body .ambient,
body.past-hero .ambient {
  opacity: 0.72;
}
body .hero.hero--photo {
  padding-top: calc(1.5rem + 3.6rem + 14px);
}
body .hero.hero--photo h1.hero__type {
  display: block;
  min-height: 0.9em;
  margin: 0;
  font-size: clamp(3.6rem, 9vw, 9.4rem);
  line-height: 0.86;
  white-space: nowrap;
}
.hero__type [data-typewriter]::after {
  content: "";
  display: inline-block;
  width: 0.07em;
  height: 0.78em;
  margin-left: 0.06em;
  background: currentColor;
  vertical-align: baseline;
  animation: hero-caret 900ms steps(1) infinite;
}
@keyframes hero-caret {
  50% {
    opacity: 0;
  }
}
.hero__what {
  margin: 0;
  color: var(--hi-ink);
  font-family: var(--display-font);
  font-size: clamp(1.6rem, 2.8vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
}
@media (max-width: 860px) {
  body .hero.hero--photo {
    padding-top: calc(1.15rem + 3.3rem + 12px);
  }
  body .hero.hero--photo h1.hero__type {
    font-size: clamp(3.4rem, 17vw, 6rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__type [data-typewriter]::after {
    animation: none;
  }
}
.pill-dark {
  border: 1px solid var(--glass-card-line);
  background: rgba(255, 255, 255, 0.6);
  color: var(--hi-ink);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: var(--glass-card-shadow);
}

/* =====================================================================
 * Round 8 (owner review, 2026-10-17)
 * ===================================================================== */

/* ---------- Hero: one huge word typing, like hiibiza.com ----------
 * The stage stays at the top while the page slides up over it and fades. */
body .hero.hero--type {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  height: 72svh;
  min-height: 460px;
  padding: 0;
}
.hi-motion main > section.hero.hero--type {
  z-index: 1;
}
.hero__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 2vw, 22px);
  height: 100%;
  padding: 88px 16px 24px;
  text-align: center;
  will-change: opacity, transform;
}
body .hero.hero--type h1.hero__type {
  display: block;
  width: auto;
  min-height: 1em;
  margin: 0;
  color: var(--hi-ink);
  font-family: var(--display-font);
  font-size: clamp(4.6rem, 14vw, 11rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero__type [data-typewriter]::after {
  content: none;
}
body .hero.hero--type .hero__what {
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  letter-spacing: -0.02em;
}
body .hero.hero--type .hero__actions {
  display: flex;
  justify-content: center;
  margin-top: 6px;
}

/* ---------- "No more flashing your phone at the DJ": balanced ---------- */
.flash {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  margin-top: 0;
}
.flash__photo img {
  object-position: 42% 45%;
  transform: scale(1.06);
}
.flash:hover .flash__photo img {
  transform: scale(1.1);
}
.flash__title {
  font-size: clamp(1.7rem, 3.9vw, 3.9rem);
  line-height: 0.95;
}
.flash__title > span {
  white-space: nowrap;
}
@media (max-width: 760px) {
  .flash__title {
    font-size: clamp(1.45rem, 8vw, 2.4rem);
  }
}

/* ---------- Steps: 2 for guests, 3 for DJs, side by side ---------- */
/* (".steps" is taken by an older style in landing-product.css.) */
.step-cards {
  position: relative;
  z-index: 2;
}
.steps__grid {
  display: grid;
  gap: 12px;
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.steps__grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(900px, calc(100% - 24px));
}
.steps__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.steps__grid .live-card {
  width: auto;
  aspect-ratio: 4 / 5;
}
.steps__grid--three .live-card {
  aspect-ratio: 9 / 13;
}
@media (max-width: 760px) {
  .steps__grid,
  .steps__grid--two {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 16px);
    gap: 8px;
  }
  .steps__grid .live-card,
  .steps__grid--three .live-card {
    aspect-ratio: 4 / 5;
  }
}

/* ---------- Club tiles: icon, title, one line ---------- */
.club__tiles li {
  position: relative;
  overflow: hidden;
  gap: 10px;
  padding: 24px 22px 26px;
  transition:
    transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}
.club__tiles li::before {
  content: "";
  position: absolute;
  inset: -40% -40% auto auto;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 211, 137, 0.55), transparent);
  opacity: 0.7;
  transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.club__tiles li:nth-child(2)::before { background: radial-gradient(closest-side, rgba(255, 161, 211, 0.5), transparent); }
.club__tiles li:nth-child(3)::before { background: radial-gradient(closest-side, rgba(139, 191, 255, 0.5), transparent); }
.club__tiles li:nth-child(4)::before { background: radial-gradient(closest-side, rgba(119, 222, 241, 0.5), transparent); }
.club__tiles li:hover {
  transform: translateY(-4px);
  box-shadow: inset 0 1px 0 #fff, 0 30px 60px -34px rgba(20, 20, 40, 0.5);
}
.club__tiles li:hover::before {
  transform: translate(-30px, 30px) scale(1.25);
}
.club__icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 6px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
  color: var(--hi-ink);
  box-shadow: 0 8px 18px -10px rgba(20, 20, 40, 0.35);
  transition: transform 520ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.club__icon svg {
  width: 22px;
  height: 22px;
}
.club__tiles li:hover .club__icon {
  transform: translateY(-3px) rotate(-8deg) scale(1.06);
}
.club__tiles b {
  position: relative;
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
}
.club__tiles span:not(.club__icon) {
  position: relative;
}

/* ---------- No flicker: plain translucent white instead of blur ---------- */
.live-card--app,
.club__tiles li,
body .pricing-card,
body .pricing-card.pricing-card--pro,
body .pricing-card.pricing-card--signature,
.faq-teaser details,
.pill-dark,
.live-card--app .live-card__tag,
.hero__kicker,
.pricing-free,
body .pricing-card .pricing-card__badge {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.live-card--app,
.club__tiles li,
body .pricing-card,
body .pricing-card.pricing-card--pro,
body .pricing-card.pricing-card--signature,
.faq-teaser details {
  background: rgba(255, 255, 255, 0.74);
}

/* ---------- Pricing: never cut off, with moving light ---------- */
body .pricing-card {
  position: relative;
  overflow: visible;
  height: auto;
  min-height: 0;
  max-height: none;
  isolation: isolate;
}
body .pricing-card .pricing-card__cta {
  margin-top: 8px;
  flex: none;
}
@property --pro-glow-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
body .pricing-card.pricing-card--pro::before {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: calc(var(--hi-radius) + 14px);
  background: conic-gradient(from var(--pro-glow-angle), #ffd389, #ffa1d3, #8bbfff, #77def1, #ffd389);
  filter: blur(26px);
  opacity: 0.55;
  animation: pro-glow 9s linear infinite;
  pointer-events: none;
}
@keyframes pro-glow {
  to {
    --pro-glow-angle: 360deg;
  }
}
/* A soft light sweeps across a card on hover. */
body .pricing-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.75) 50%, transparent 65%) -150% 0 / 250% 100% no-repeat;
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
body .pricing-card:hover::after {
  opacity: 1;
  animation: card-sweep 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes card-sweep {
  to {
    background-position: 150% 0;
  }
}
body .pricing-card {
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
}
body .pricing-card:hover {
  transform: translateY(-6px);
}

@media (prefers-reduced-motion: reduce) {
  body .pricing-card.pricing-card--pro::before,
  body .pricing-card:hover::after {
    animation: none;
  }
  body .pricing-card:hover,
  .club__tiles li:hover,
  .club__tiles li:hover .club__icon {
    transform: none;
  }
}

@media (max-width: 760px) {
  .flash {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 16px);
    gap: 18px;
  }
}
@media (min-width: 761px) {
  .flash__title {
    font-size: clamp(1.9rem, 4.4vw, 4.6rem);
  }
}

/* =====================================================================
 * Round 9 (owner + developer review, 2026-10-17)
 * ===================================================================== */

/* ---------- First view: typewriter beside the real big-screen photo ---------- */
body .hero.hero--split {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: clamp(20px, 4vw, 64px);
  width: min(1280px, calc(100% - 24px));
  height: auto;
  min-height: min(100svh, 920px);
  margin: 0 auto;
  padding: calc(1.5rem + 3.6rem + 24px) 0 clamp(24px, 4vw, 48px);
}
.hero__copy-col {
  display: grid;
  justify-items: start;
  gap: clamp(14px, 2vw, 22px);
  padding-left: clamp(4px, 2vw, 24px);
}
body .hero.hero--split h1.hero__type {
  display: block;
  min-height: 1em;
  margin: 0;
  color: var(--hi-ink);
  font-family: var(--display-font);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
body .hero.hero--split .hero__what {
  font-size: clamp(1.2rem, 2.1vw, 1.8rem);
  letter-spacing: -0.02em;
}
body .hero.hero--split .hero__actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 4px;
}
.hero__shot {
  position: relative;
  height: min(62svh, 608px);
  margin: 0;
  overflow: hidden;
  border-radius: var(--hi-radius);
  background: #111;
  isolation: isolate;
  box-shadow: 0 40px 80px -50px rgba(20, 20, 30, 0.55);
}
.hero__shot img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}
.hero__shot::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, 0.7) 100%);
}
.hero__shot figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding: 0 20px 26px;
  color: #fff;
  text-align: center;
}
.hero__shot figcaption .live-card__tag {
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
}
.hero__shot figcaption b {
  font-family: var(--display-font);
  font-size: clamp(1.5rem, 2.4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}
@media (max-width: 860px) {
  body .hero.hero--split {
    grid-template-columns: minmax(0, 1fr);
    width: calc(100% - 16px);
    min-height: 0;
    gap: 22px;
    padding-top: calc(1.15rem + 3.3rem + 22px);
  }
  .hero__copy-col {
    justify-items: center;
    padding-left: 0;
    text-align: center;
  }
  body .hero.hero--split h1.hero__type {
    font-size: clamp(3.6rem, 19vw, 6.5rem);
    text-align: center;
  }
  body .hero.hero--split .hero__actions {
    justify-content: center;
  }
  .hero__shot {
    height: 64svh;
    margin-top: 24px;
  }
}

/* ---------- "Flashing your phone" fades away word by word (no line) ---------- */
.flash__fade {
  display: block;
  white-space: nowrap;
  color: var(--hi-ink);
}
.flash__fade > span {
  display: inline-block;
}
.hi-motion .flash__fade > span {
  transition:
    opacity 1100ms ease,
    filter 1100ms ease,
    transform 1100ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hi-motion .flash__fade > span:nth-child(1) { transition-delay: 700ms; }
.hi-motion .flash__fade > span:nth-child(2) { transition-delay: 950ms; }
.hi-motion .flash__fade > span:nth-child(3) { transition-delay: 1200ms; }
.hi-motion .flash__copy.is-in .flash__fade > span,
html:not(.hi-motion) .flash__fade > span {
  opacity: 0.16;
  filter: blur(2.5px);
  transform: translateY(0.06em);
}

/* ---------- Pricing: nothing cut off at the bottom ---------- */
body .pricing-stage {
  overflow: visible;
  padding-top: 24px;
  padding-bottom: clamp(56px, 7vw, 88px);
}

/* ---------- Calmer, grown-up colour: muted background and light ---------- */
body .ambient,
body.past-hero .ambient {
  opacity: 0.5;
  filter: saturate(0.38);
}
.club__tiles li::before,
.club__tiles li:nth-child(2)::before,
.club__tiles li:nth-child(3)::before,
.club__tiles li:nth-child(4)::before {
  background: radial-gradient(closest-side, rgba(196, 189, 176, 0.38), transparent);
}
body .pricing-card.pricing-card--pro::before {
  background: conic-gradient(from var(--pro-glow-angle), #ece6db, #ffffff, #d9dee5, #f4efe6, #ece6db);
  filter: blur(28px);
  opacity: 0.9;
}

/* The line fades away from left to right as a soft wipe (works in every language). */
@property --fade-edge {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 115%;
}
.flash__fade {
  --fade-edge: 115%;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.16) calc(var(--fade-edge) - 15%), #000 var(--fade-edge));
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.16) calc(var(--fade-edge) - 15%), #000 var(--fade-edge));
}
.hi-motion .flash__fade {
  transition: --fade-edge 1800ms cubic-bezier(0.65, 0, 0.35, 1) 600ms;
}
.hi-motion .flash__copy.is-in .flash__fade,
html:not(.hi-motion) .flash__fade {
  --fade-edge: -15%;
}
/* The original ".hero" centres its items, which shrank the photo to zero width. */
body .hero.hero--split {
  place-items: stretch;
  align-items: center;
}
.hero__shot {
  width: 100%;
}
/* Caption as a small pill in the corner, so the big screen stays fully visible. */
.hero__shot::after {
  content: none;
}
.hero__shot figcaption {
  top: 16px;
  right: auto;
  bottom: auto;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
}
.hero__shot figcaption .live-card__tag {
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.16);
}
.hero__shot figcaption b {
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  letter-spacing: -0.02em;
}
/* Clip sideways only (an old wide decoration lives in this section), keep the
   bottom open so card shadows and the light are never cut. */
body .pricing-stage {
  overflow: visible;
  overflow-x: clip;
}
body .hero.hero--split {
  width: min(1180px, calc(100% - 32px));
}

/* Split hero: the photo sits further to the right (owner, 2026-10-17). */
@media (min-width: 861px) {
  body .hero.hero--split {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
    width: min(1340px, calc(100% - 24px));
  }
  .hero__shot {
    width: 80%;
    justify-self: end;
  }
}

/* Photo a little back toward the centre (owner, 2026-10-17). */
@media (min-width: 861px) {
  body .hero.hero--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    width: min(1260px, calc(100% - 32px));
  }
}

/* =====================================================================
 * SoundCloud-style touches (owner, 2026-10-17): bold copy everywhere and
 * deeper shade under photo captions so the bold white titles stand out.
 * ===================================================================== */
body .hero__what,
body .flash__title,
.live-card__title,
.club__tiles b,
.faq-teaser summary,
body .pricing-card h3 {
  font-weight: 800;
}
.club__tiles span:not(.club__icon),
.faq-teaser details p,
body .pricing-card .pricing-card__position,
body .pricing-card [data-plan-features] li,
.hero__lede,
.hi-lede {
  font-weight: 600;
}
.live-card::after,
.club__photos figure::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.82) 92%);
}
.live-card__tag,
.hero__shot figcaption .live-card__tag {
  font-weight: 800;
}

/* ---------- "Calling all": a black SoundCloud-style band ----------
 * Sharp photo on one side, huge bold white capitals and bold white text on
 * the other, white "Find out more" pill (owner, 2026-10-17). */
.calling {
  position: relative;
  z-index: 2;
  display: grid;
  gap: clamp(56px, 8vw, 120px);
  margin-top: clamp(48px, 7vw, 96px);
  padding: clamp(64px, 9vw, 140px) max(16px, calc((100% - 1180px) / 2));
  background: #121212;
  color: #fff;
}
.calling__row {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 96px);
}
.calling__row--flip .calling__photo {
  order: 2;
}
.calling__photo {
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: #000;
}
.calling__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.calling__copy {
  display: grid;
  justify-items: start;
  gap: 22px;
}
.calling__title {
  margin: 0;
  color: #fff;
  font-family: var(--display-font);
  font-size: clamp(2.6rem, 5.6vw, 5.2rem);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 0.92;
  text-wrap: balance;
}
.calling__text {
  max-width: 30rem;
  margin: 0;
  color: #fff;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.calling__button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 6px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: #121212;
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform 180ms ease, background-color 180ms ease;
}
.calling__button:hover {
  background: #e8e8e8;
}
.calling__button:active {
  transform: scale(0.97);
}
@media (max-width: 760px) {
  .calling__row {
    grid-template-columns: minmax(0, 1fr);
  }
  .calling__row--flip .calling__photo {
    order: 0;
  }
}
.calling__row--flip .calling__photo img {
  object-position: center 20%;
}