/* ===== STATS DIVIDERS — explicit borders, more reliable than 1px grid gap ===== */
.stats .wrap {
  background: transparent;
  gap:        0;
}

.stats__item {
  border-right: 1px solid var(--line);
}

.stats__item:last-child {
  border-right: none;
}

@media (max-width: 640px) {
  .stats__item {
    border-right:  none;
    border-bottom: 1px solid var(--line);
  }
  .stats__item:nth-child(odd) {
    border-right: 1px solid var(--line);
  }
  .stats__item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}


/* ===== LOCAL VIDEOS ===== */
.video-local {
  position:      relative;
  border-radius: 16px;
  overflow:      hidden;
  border:        1px solid var(--line-strong);
  background:    #000;
  box-shadow:    0 24px 60px -28px rgba(139,92,246,.5);
}

.video-local video {
  display:      block;
  width:        100%;
  height:       auto;
  aspect-ratio: 16/9;
  background:   #000;
}

/* ===== BUTTON SIZE VARIANT ===== */
.btn.btn--large {
  padding:       17px 36px;
  font-size:     1.02rem;
  border-radius: 999px;
}


/* ===== HERO TAGLINE (legacy, kept in case other pages still reference it) ===== */
.hero__tagline {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(1.25rem, 2.6vw, 1.95rem);
  letter-spacing: -.02em;
  margin-top:     20px;
  line-height:    1.12;
}

.hero__tagline em {
  font-style: normal;
  color:      var(--gold);
}

/* Membership hero h1 lives inside .section__header, whose larger h1 rule would
   otherwise override .hero__title — pin it to the same size as home/network. */
.section__header .hero__title {
  font-size: clamp(1.6rem, 3vw, 2.35rem);
}

/* ===== HERO LEDE — short line between the big headline and the body copy ===== */
.hero__lede {
  font-family:    var(--font-display);
  font-weight:    700;
  font-size:      clamp(1.3rem, 2.6vw, 1.75rem);
  letter-spacing: -.015em;
  line-height:    1.3;
  margin:         16px auto 0;
  color:          var(--text);
  max-width:      42ch;
}

.section--light .hero__lede {
  color:   #4a4458;
  opacity: 1;
}

/* ===== HERO STATS BAR — compact bullet-separated line under the body copy ===== */
.hero__stats {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-items:     center;
  gap:             8px 14px;
  margin-top:      28px;
  font-family:     var(--font-mono);
  font-size:       11px;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  color:           var(--muted);
}

.hero__stats-dot {
  opacity: .45;
}

.section--light .hero__stats {
  color: #8a8694;
}

/* ===== HOME PANELS: perspective + 3D hover ===== */
.panels {
  perspective: 1100px;
}

.panel {
  transition:       transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s;
  transform-style:  preserve-3d;
  will-change:      transform;
}

.panel:hover {
  box-shadow:   0 34px 80px -34px rgba(139,92,246,.6);
  border-color: rgba(139,92,246,.5);
}

.panel__icon,
.panel h3,
.panel__link {
  transition:          transform .22s ease;
  transform:           translateZ(0);
  backface-visibility: hidden;
}

.panel:hover .panel__icon {
  transform: translateZ(36px);
}

.panel:hover h3 {
  transform: translateZ(22px);
}

.panel:hover .panel__link {
  transform: translateZ(14px);
}

@media (prefers-reduced-motion: reduce) {
  .panel,
  .panel .panel__icon,
  .panel h3,
  .panel .panel__link {
    transition: none !important;
    transform:  none !important;
  }
}

/* ===== PLATFORM CHIP: BRAND COLOURS ===== */
.platforms__row .platform-chip[aria-label="YouTube"] .platform-chip__icon {
  fill: #FF0000;
}

.platforms__row .platform-chip[aria-label="Spotify"] .platform-chip__icon {
  fill: #1DB954;
}

.platforms__row .platform-chip[aria-label="Apple Podcasts"] .platform-chip__icon {
  fill: #A24BD6;
}

.platforms__row .platform-chip[aria-label="Amazon Music"] .platform-chip__icon {
  fill: #25D1DA;
}

.platforms__row .platform-chip {
  transition:
    border-color .2s,
    transform    .2s;
}

.platforms__row .platform-chip:hover {
  transform: translateY(-2px);
}

/* ===== BRAND: TEXT WORDMARK ===== */
.brand__mark {
  width:         30px;
  height:        30px;
  border-radius: 8px;
  background:    var(--gold);
  color:         #fff;
  display:       grid;
  place-items:   center;
  font-family:   var(--font-display);
  font-weight:   800;
  font-size:     17px;
  flex:          none;
  box-shadow:    0 6px 18px -6px rgba(139,92,246,.6);
}

.brand__name {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      18px;
  letter-spacing: -.01em;
  white-space:    nowrap;
  color:          var(--text, #fff);
}

.footer__brand .brand__mark {
  width:     34px;
  height:    34px;
  font-size: 19px;
}

.footer__brand .brand__name {
  font-size: 17px;
}

/* ===== NETWORK HERO STYLING ===== */
.hero__network-title {
  font-weight: 800;
}

.hero__network-subheading {
  font-family:    var(--font-display);
  font-weight:    800;
  font-size:      clamp(1.2rem, 2.4vw, 1.7rem);
  letter-spacing: -.02em;
  margin-top:     8px;
  color:          var(--text, #fff);
}

.hero--network {
  position: relative;
  overflow: hidden;
}

.hero--network::before {
  content:         "";
  position:        absolute;
  inset:           0;
  pointer-events:  none;
  z-index:         0;
  background:
    radial-gradient(620px 320px at 18% -10%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(560px 300px at 85%   8%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(520px 300px at 55% 120%, rgba(255,255,255,.05), transparent 70%);
}

.hero--network .wrap {
  position: relative;
  z-index:  1;
}

/* ===== PLATFORM BADGE: STYLE OVERRIDES ===== */
.platform-badge {
  font-family:  var(--font-display);
  font-weight:  700;
}

.platform-badge__logo {
  width:          22px;
  height:         22px;
  vertical-align: middle;
  margin-right:   7px;
}

.platform-badge--youtube .platform-badge__logo {
  fill: #FF0000;
}

.platform-badge--spotify .platform-badge__logo {
  fill: #1DB954;
}

.btn.btn--spotify {
  font-family:  var(--font-display);
  font-weight:  700;
  border-color: #1DB954;
  color:        #1DB954;
}

.btn.btn--spotify:hover {
  background:   #1DB954;
  border-color: #1DB954;
  color:        #fff;
}

/* ===== EPISODE CARD: FLIP VARIANT ===== */
.episode-card--flip {
  height:      282px;
  background:  transparent;
  border:      none;
  overflow:    visible;
  perspective: 1100px;
}

.episode-card--flip:hover {
  transform: none;
}

.episode-card__flip-inner {
  position:         relative;
  width:            100%;
  height:           100%;
  transition:       transform .6s cubic-bezier(.2,.7,.2,1);
  transform-style:  preserve-3d;
}

.episode-card--flip:hover .episode-card__flip-inner {
  transform: rotateY(180deg);
}

.episode-card__flip-front,
.episode-card__flip-back {
  position:              absolute;
  inset:                 0;
  -webkit-backface-visibility: hidden;
  backface-visibility:   hidden;
  border:                1px solid var(--line);
  border-radius:         var(--radius);
  overflow:              hidden;
  background:            var(--surface);
}

.episode-card__flip-back {
  transform:       rotateY(180deg);
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  gap:             11px;
  padding:         22px;
  background:      linear-gradient(160deg, #15121e, #0f0a1f);
}

.episode-card--guest .episode-card__flip-front {
  border-color: rgba(139,92,246,.5);
  box-shadow:   inset 0 0 0 1px rgba(139,92,246,.22);
}

.episode-card__flip-front {
  z-index: 2;
}

.episode-card--flip:hover .episode-card__flip-front {
  z-index: 1;
}

.episode-card--flip:hover .episode-card__flip-back {
  z-index: 3;
}

/* ===== EPISODE CARD: ROLE BADGE ===== */
.episode-card__role {
  position:       absolute;
  top:            12px;
  left:           12px;
  z-index:        5;
  font-family:    var(--font-mono);
  font-size:      9px;
  font-weight:    700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding:        5px 9px;
  border-radius:  6px;
}

.episode-card__role--host {
  background: #C4B5FD;
  color:      #1e1340;
}

.episode-card__role--cohost {
  background: #fff;
  color:      #13111c;
}

.episode-card__role--guest {
  background: #8B5CF6;
  color:      #fff;
}

/* ===== EPISODE CARD: FLIP BACK CONTENT ===== */
.episode-card__back-name {
  font-family:  var(--font-display);
  font-weight:  800;
  font-size:    1.15rem;
  color:        var(--text, #fff);
  line-height:  1.15;
}

.episode-card__back-role {
  font-family:    var(--font-mono);
  font-size:      11px;
  color:          var(--gold);
  letter-spacing: .04em;
  margin-bottom:  6px;
}

.episode-card__back-link {
  display:      flex;
  align-items:  center;
  gap:          10px;
  padding:      11px 14px;
  border-radius: 10px;
  border:        1px solid var(--line-strong);
  font-family:   var(--font-mono);
  font-size:     11.5px;
  font-weight:   700;
  letter-spacing: .03em;
  color:         var(--text, #fff);
  transition:
    border-color .2s,
    transform    .2s;
}

.episode-card__back-link svg {
  width:  18px;
  height: 18px;
  flex:   none;
}

.episode-card__back-link--youtube svg {
  fill: #FF0000;
}

.episode-card__back-link--spotify svg {
  fill: #1DB954;
}

.episode-card__back-link:hover {
  border-color: var(--gold);
  transform:    translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  .episode-card__flip-inner {
    transition: none;
  }
}

/* ===== CAROUSEL ROLE RIBBONS ===== */
.episode-card__ribbon {
  position:   absolute;
  top:        0;
  left:       18px;
  z-index:    8;
  width:      50px;
  padding:    12px 5px 17px;
  display:    flex;
  flex-direction: column;
  align-items: center;
  gap:         8px;
  clip-path:   polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
  box-shadow:  0 10px 22px -8px rgba(0,0,0,.55);
  text-align:  center;
}

.episode-card__ribbon::before {
  content:        "";
  position:       absolute;
  inset:          3px;
  border:         1px solid rgba(255,255,255,.45);
  clip-path:      polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  pointer-events: none;
}

.episode-card__ribbon--guest {
  background: linear-gradient(180deg, #7c3aed, #4c1d95);
  color:      #fff;
}

.episode-card__ribbon--cohost {
  background: linear-gradient(180deg, #e3b24a, #b07d1c);
  color:      #3a2706;
}

.episode-card__ribbon--cohost::before {
  border-color: rgba(255,255,255,.6);
}

.episode-card__ribbon-label {
  font-family:    var(--font-mono);
  font-weight:    800;
  font-size:      8px;
  letter-spacing: .03em;
  text-transform: uppercase;
  line-height:    1.1;
  white-space:    nowrap;
}

.episode-card__ribbon-dash {
  width:    24px;
  height:   1px;
  background: currentColor;
  opacity:  .75;
  position: relative;
}

.episode-card__ribbon-dash::before {
  content:    "";
  position:   absolute;
  left:       50%;
  top:        50%;
  width:      4px;
  height:     4px;
  background: currentColor;
  transform:  translate(-50%, -50%) rotate(45deg);
}

.episode-card--cohost .episode-card__flip-front {
  border-color: rgba(227,178,74,.5);
  box-shadow:   inset 0 0 0 1px rgba(227,178,74,.22);
}

/* ===== SECTION--LIGHT: light background cut ===== */
.section--light {
  position:       relative;
  z-index:        1;
  background:     #f4f3f8;
  color:          #1a1626;
  padding-top:    clamp(64px, 8vw, 96px);
  padding-bottom: clamp(64px, 8vw, 96px);
}

.section--light .kicker {
  color: #bcb7c6;
}

.section--light .kicker.is-active {
  color: #6D28D9;
}

.kicker--passive,
.kicker--passive.is-active {
  color: var(--muted);
}

.section--light .kicker--passive,
.section--light .kicker--passive.is-active {
  color: #8a8694;
}

.section--light .section__header h2,
.section--light .levels__header h2,
.section--light .members__header h2 {
  color: #1a1626;
}

.section--light .section__header p,
.section--light .levels__header p,
.section--light .members__header p,
.section--light .members__note {
  color: #4a4458;
}

.section--light .ladder__axis span,
.section--light .ladder__caption {
  color: #6b6580;
}

.section--light .members__billing-note {
  color: #4a4458;
}

.section--light .btn--ghost {
  border-color: rgba(26,22,38,.28);
  color:        #1a1626;
}

.section--light .tier .btn--ghost,
.section--light .level-card .btn--ghost {
  color:        var(--text);
  border-color: var(--line-strong);
}

.section--light .btn.btn--ghost:hover {
  border-color: #6D28D9;
  color:        #6D28D9;
  background:   rgba(109,40,217,.08);
}

.section--light .link-quiet {
  color: #4a4458;
}

.section--light .link-quiet span {
  color: #6D28D9;
}

.section--light .link-quiet:hover {
  color: #1a1626;
}

.section--light .post-video {
  color: #4a4458;
}

@media (max-width: 560px) {
  .section--light {
    --cut: 26px;
  }
}

/* ===== PARTNER BANNER =====
   Named "partner-banner" / "partnerships" (not "brand-banner" / "advertise")
   because ad-blocker filter lists commonly hide elements whose id/class
   contains "advertise" or "banner", which was hiding this section on the
   live site for anyone running an ad blocker. */
.partner-banner {
  background:    #000;
  border-top:    1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* Original layout: text on the left, media column on the right. The image
   pair stacks vertically within that column (not side-by-side) so each
   photo keeps the full column width instead of being halved again. */
.partner-banner__grid {
  display:               grid;
  grid-template-columns: 1.1fr .9fr;
  gap:                   44px;
  align-items:           center;
}

.partner-banner__title {
  font-size:   clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  margin-top:  12px;
}

/* Flip card: shows the generic "your brand here" mock by default, and
   flips on hover to reveal the same set branded for an actual partner
   (Tala) — one media slot instead of two competing for space. */
.partner-banner__flip-card {
  aspect-ratio:  16/10;
  border-radius: 18px;
  perspective:   1400px;
}

.partner-banner__flip-inner {
  position:         relative;
  width:            100%;
  height:           100%;
  transition:       transform .7s cubic-bezier(.2,.7,.2,1);
  transform-style:  preserve-3d;
}

.partner-banner__flip-card:hover .partner-banner__flip-inner {
  transform: rotateY(180deg);
}

.partner-banner__flip-face {
  position:            absolute;
  inset:               0;
  border-radius:       18px;
  border:              1px solid var(--line-strong);
  overflow:            hidden;
  backface-visibility: hidden;
  background:
    radial-gradient(circle at 72% 28%, rgba(139,92,246,.45), transparent 60%),
    linear-gradient(135deg, #1c1233, #000 75%);
}

.partner-banner__flip-face--back {
  transform: rotateY(180deg);
}

.partner-banner__flip-face img {
  position:      absolute;
  inset:         0;
  width:         100%;
  height:        100%;
  object-fit:    cover;
  border-radius: inherit;
}

/* ===== MEMBER LOGIN SECTION ===== */
.login-section {
  position:  relative;
  overflow:  hidden;
  background: linear-gradient(180deg, #0a0712, #000);
}

.login-section::before {
  content:         "";
  position:        absolute;
  inset:           0;
  z-index:         0;
  pointer-events:  none;
  background:
    radial-gradient(720px 360px at 50% -10%, rgba(139,92,246,.22), transparent 70%),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:       auto, 46px 46px, 46px 46px;
  -webkit-mask-image:    radial-gradient(circle at 50% 30%, #000, transparent 75%);
  mask-image:            radial-gradient(circle at 50% 30%, #000, transparent 75%);
}

/* drop real image: .login-section { background: url('members.jpg') center/cover } */

.login-section .wrap {
  position: relative;
  z-index:  1;
}

@media (max-width: 760px) {
  .partner-banner__grid {
    grid-template-columns: 1fr;
  }
}

/* ===== TIER CARD: VISUAL POLISH ===== */
.tiers {
  gap: 18px;
}

/* Sponsor rate card reuses .placement (the "put your brand in the room"
   example cards) instead of the pricing-tier component — .placements
   already grids 3-up and collapses to 1 column on mobile, so no layout
   override is needed here, just the price line the plain examples lack. */
.placement__price {
  font-family: var(--font-display);
  font-weight: 800;
  font-size:   1.6rem;
  margin:      0 20px 16px;
}

.placement .btn {
  margin: 0 20px 20px;
}

/* .section__header's own 62ch max-width is narrower than this one-line
   heading needs, so the nowrap text overflows that box unevenly instead
   of centering cleanly — widen the header box itself to fit it. */
#sponsor-products .section__header {
  max-width: 900px;
}

#sponsor-products .section__header h2 {
  font-size:   clamp(1.7rem, 4vw, 2.6rem);
  white-space: nowrap;
}

@media (max-width: 640px) {
  #sponsor-products .section__header h2 {
    white-space: normal;
    font-size:   clamp(1.6rem, 7vw, 2.1rem);
  }
}

.sponsor-products__group-title {
  font-size:   1.1rem;
  font-weight: 700;
  margin:      36px 0 18px;
}

.sponsor-products__group-title:first-of-type {
  margin-top: 46px;
}

.sponsor-products__note {
  font-size:  .85rem;
  color:      var(--muted);
  font-style: italic;
  margin-top: 18px;
  max-width:  70ch;
}

.sponsor-products__subhead {
  font-family:  var(--font-display);
  font-weight:  700;
  font-size:    clamp(1.15rem, 2.2vw, 1.4rem);
  color:        var(--text);
  margin-top:   14px;
  max-width:    none;
}

.tier {
  border-radius: 22px;
  padding:       30px 26px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    var(--surface);
  transition:
    transform    .28s cubic-bezier(.2,.7,.2,1),
    box-shadow   .28s,
    border-color .28s;
}

.tier:hover {
  transform:  translateY(-8px);
  box-shadow: 0 40px 90px -42px rgba(0,0,0,.75);
}

.tier__name {
  font-size:      1.42rem;
  letter-spacing: -.01em;
}

.tier__price {
  font-size:  2.35rem;
  margin-top: 16px;
}

.tier__revenue-band {
  border-radius: 999px;
  padding:       6px 13px;
}

.tier__features li {
  font-size: .9rem;
}

.tier__features li svg {
  width:            14px;
  height:           14px;
  flex:             none;
  margin-top:       1px;
  padding:          4px;
  border-radius:    50%;
  background:       rgba(139,92,246,.16);
  box-sizing:       content-box;
}

.tier .btn {
  border-radius:  13px;
  padding:        15px;
  letter-spacing: .04em;
}

.tier__badge {
  padding:        6px 14px;
  letter-spacing: .14em;
}

.tier--popular {
  border-color: rgba(139,92,246,.6);
  background:
    linear-gradient(180deg, rgba(139,92,246,.16), transparent 40%),
    var(--surface);
  box-shadow: 0 34px 90px -40px rgba(139,92,246,.55);
}

.tier--popular:hover {
  box-shadow: 0 46px 110px -44px rgba(139,92,246,.7);
}

.tier--popular .tier__badge {
  box-shadow: 0 10px 26px -8px rgba(139,92,246,.7);
}

.tier--popular .btn {
  box-shadow: 0 14px 36px -12px rgba(139,92,246,.6);
}

/* ===== CROSSLINK BUTTON HOVER STATES ===== */
.crosslink .btn {
  position:    relative;
  z-index:     1;
  min-width:   190px;
  justify-content: center;
  overflow:    hidden;
  isolation:   isolate;
  transform:   translateY(0) scale(1);
  will-change: transform;
  transition:
    transform    .2s  cubic-bezier(.2,.7,.2,1),
    box-shadow   .25s ease,
    background   .25s ease,
    border-color .25s ease,
    color        .25s ease,
    filter       .25s ease;
}

.crosslink .btn::before {
  content:         "";
  position:        absolute;
  inset:           -2px;
  z-index:         -1;
  pointer-events:  none;
  background:      linear-gradient(110deg, transparent 22%, rgba(255,255,255,.22) 48%, transparent 74%);
  transform:       translateX(-135%);
  transition:      transform .55s ease;
}

.crosslink .btn:focus-visible {
  transform:      translateY(-3px) scale(1.02);
  outline:        2px solid var(--gold);
  outline-offset: 4px;
}

.crosslink .btn.btn--gold:focus-visible {
  filter:     brightness(1.12);
  box-shadow:
    0 22px 54px -12px var(--glow),
    0 0 0 1px rgba(255,255,255,.12) inset;
}

.crosslink .btn.btn--ghost:focus-visible {
  color:        #fff;
  border-color: var(--gold);
  background:   rgba(139,92,246,.22);
  box-shadow:   0 18px 42px -16px var(--glow);
}

.crosslink .btn:active {
  transform: translateY(-1px) scale(.99);
}

@media (hover: hover) and (pointer: fine) {
  .crosslink .btn:hover {
    transform: translateY(-4px) scale(1.025);
  }

  .crosslink .btn:hover::before {
    transform: translateX(135%);
  }

  .crosslink .btn.btn--gold:hover {
    color:      #fff;
    filter:     brightness(1.14) saturate(1.08);
    box-shadow:
      0 24px 58px -12px var(--glow),
      0 0 0 1px rgba(255,255,255,.12) inset;
  }

  .crosslink .btn.btn--ghost:hover {
    color:        #fff;
    border-color: var(--gold);
    background:   linear-gradient(135deg, rgba(139,92,246,.30), rgba(109,40,217,.20));
    box-shadow:
      0 20px 46px -14px var(--glow),
      0 0 0 1px rgba(139,92,246,.12) inset;
  }
}

/* Avoid sticky hover states on touch devices */
@media (hover: none) {
  .crosslink .btn.btn--gold:hover {
    transform:  translateY(0) scale(1);
    filter:     none;
    background: linear-gradient(135deg, var(--gold), var(--gold-deep));
    box-shadow: 0 8px 24px -12px var(--glow);
  }

  .crosslink .btn.btn--ghost:hover {
    transform:    translateY(0) scale(1);
    color:        var(--text);
    border-color: var(--line-strong);
    background:   transparent;
    box-shadow:   none;
  }
}

/* ===== POST-VIDEO TEXT ===== */
.post-video {
  text-align:  center;
  max-width:   760px;
  margin:      4px auto 30px;
  color:       var(--muted);
  font-size:   1.02rem;
  line-height: 1.6;
}

/* ===== CLUB CLOSE ===== */
.club-close {
  text-align:  center;
  max-width:   800px;
  margin:      32px auto 0;
  color:       var(--text);
  font-family: var(--font-display);
  font-weight: 700;
  font-size:   clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.42;
  opacity:     .94;
}

/* ===== NETWORK HERO: LOGO MARK + LEVEL-UP BADGE ===== */
.hero__network-mark {
  display:       inline-grid;
  place-items:   center;
  width:         .92em;
  height:        .92em;
  border-radius: .2em;
  background:    var(--gold);
  color:         #fff;
  font-size:     .8em;
  font-weight:   800;
  margin-right:  .34em;
  vertical-align: .06em;
  box-shadow:    0 6px 16px -6px rgba(139,92,246,.7);
}

.hero__level-badge {
  display:     inline-flex;
  align-items: center;
  gap:         7px;
  margin:      4px auto 0;
  color:       var(--gold);
  font-family: var(--font-display);
  font-size:   clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
}

.hero__level-badge-arrow {
  font-size:   1.05em;
  line-height: 1;
  font-weight: 800;
}

#page-network .hero--network .platforms__label {
  font-size: clamp(1rem, 1.5vw, 1.15rem);
}


/* ===== BRAND LOGO IMAGES ===== */

/* nav + footer mark — dark background, invert black text to white */
.brand__logo {
  display:   block;
  height:    56px;
  width:     auto;
  max-width: 280px;
  filter:    invert(1) hue-rotate(180deg);
}

.brand__logo--footer {
  height:    68px;
  max-width: 320px;
}

/* page-hero logos */
.hero__logo {
  display:   block;
  width:     auto;
  max-width: 100%;
}

/* home hero — dark background, invert black text to white */
.hero__logo--home {
  height: 140px;
  margin: 0 auto .25rem;
  filter: invert(1) hue-rotate(180deg);
}

/* network hero — dark background, invert black text to white */
.hero__logo--network {
  height: 160px;
  margin: 0 auto 0;
  filter: invert(1) hue-rotate(180deg);
}

/* members club hero — light background, no filter needed */
.hero__logo--members {
  height:    220px;
  max-width: 640px;
  margin:    0 auto;
}

@media (max-width: 640px) {
  .brand__logo            { height: 40px; }
  .brand__logo--footer    { height: 38px; }
  .hero__logo--home       { height: 90px; }
  .hero__logo--network,
  .hero__logo--members    { height: 100px; }
}


/* =====================================================
   INTER FONT — replaces Bricolage Grotesque
   ===================================================== */
:root {
  --font-display: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', 'Helvetica Neue', Arial, sans-serif;
}

/* Inter at body weight looks better slightly lighter */
body { font-weight: 400; letter-spacing: -.01em; }
h1, h2, h3, h4 { letter-spacing: -.03em; }

/* =====================================================
   NAV — guest button smaller than primary CTA
   ===================================================== */
.nav__guest-btn {
  font-size:   .9rem;
  padding:     12px 22px;
  opacity:     .85;
}
.nav__guest-btn:hover { opacity: 1; }

/* =====================================================
   PLATFORM CHIPS — bigger & brighter
   ===================================================== */
.platform-chip {
  font-family: var(--font-body);
  font-size:   .95rem !important;
  font-weight: 600;
  padding:     13px 26px !important;
  color:       rgba(255,255,255,.95) !important;
  letter-spacing: 0;
  gap:         11px !important;
}
.platform-chip:hover { color: #fff !important; }
.platform-chip__icon { width: 21px; height: 21px; }

/* =====================================================
   CREDIBILITY STRIP
   ===================================================== */
.credibility {
  margin-top:  64px;
  border-top:  1px solid var(--line);
  padding-top: 44px;
}

/* ===== "Companies we've worked with" band — auto-scrolling carousel ===== */
.credibility-band {
  padding:    clamp(52px, 6vw, 84px) 0;
  border-top: 1px solid var(--line);
}
.credibility-band .credibility__label {
  display:        block;
  text-align:     center;
  font-size:      .82rem;
  font-weight:    700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color:          var(--muted);
  margin-bottom:  34px;
}

/* full-bleed track with soft edge fades, like the network marquee */
.credibility__marquee {
  position:           relative;
  overflow-x:         clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:         linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.credibility__track {
  display:             flex;
  width:               max-content;
  animation:           credMarquee 60s linear infinite;
  will-change:         transform;
  backface-visibility: hidden;
  transform:           translateZ(0);
}
.credibility__marquee:hover .credibility__track {
  animation-play-state: paused;
}
@keyframes credMarquee {
  to { transform: translateX(-50%); }
}

.credibility__brand {
  flex:            none;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  height:          92px;
  width:           196px;
  margin-right:    22px;
  padding:         16px 24px;
  background:      #fff;
  border-radius:   16px;
  box-shadow:      0 12px 30px -20px rgba(0,0,0,.7);
}
.credibility__brand img {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  object-fit: contain;
}

/* reduced motion: stop scrolling, show a centered wrapped set */
@media (prefers-reduced-motion: reduce) {
  .credibility__track {
    animation:       none;
    width:           auto;
    flex-wrap:       wrap;
    justify-content: center;
    gap:             16px;
  }
  .credibility__brand { margin-right: 0; }
  .credibility__track .credibility__brand[aria-hidden="true"] { display: none; }
}
@media (max-width: 560px) {
  .credibility__brand { height: 76px; width: 158px; padding: 12px 18px; }
}
/* Soft fade blending the hero (grid + glow) into the section below */
.hero--landing::after {
  content:        "";
  position:       absolute;
  left:           0;
  right:          0;
  bottom:         0;
  height:         220px;
  pointer-events: none;
  z-index:        -1;
  background:     linear-gradient(to bottom, transparent, var(--ink));
}
.credibility__label {
  display:        block;
  font-size:      clamp(1.5rem, 3vw, 2.2rem);
  font-weight:    800;
  letter-spacing: -.03em;
  color:          rgba(255,255,255,.15);
  margin-bottom:  32px;
  text-align:     center;
}
.credibility__logos {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             clamp(40px, 6vw, 72px);
  flex-wrap:       wrap;
}
.credibility__logo {
  display:     flex;
  align-items: center;
  color:       rgba(255,255,255,.4);
  fill:        rgba(255,255,255,.4);
  transition:  color .25s ease, fill .25s ease;
}
.credibility__logo:hover {
  color: rgba(255,255,255,.7);
  fill:  rgba(255,255,255,.7);
}
.credibility__logo svg {
  width:  48px;
  height: 48px;
}
.credibility__logo svg text { fill: inherit; }

/* ===== NAV LOGIN LINK ===== */
.nav__login-link {
  font-size:     .875rem;
  font-weight:   600;
  color:         rgba(255,255,255,.55);
  white-space:   nowrap;
  transition:    color .2s;
  padding:       0 4px;
}
.nav__login-link:hover { color: rgba(255,255,255,.9); }

/* =====================================================
   HOME PANELS — 2-column layout
   ===================================================== */
.panels--two {
  grid-template-columns: 1fr 1fr !important;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
/* Flex columns so the links pin to the bottom and align across both cards */
.panels--two .panel {
  display:        flex;
  flex-direction: column;
}
.panels--two .panel__link {
  margin-top: auto;
}
/* keep breathing room above the link WITHOUT enlarging the outline button */
.panels--two .panel p {
  margin-bottom: 18px;
}
.panel--outline {
  border-color: rgba(255,255,255,.22) !important;
}
.panel--outline:hover {
  border-color: rgba(255,255,255,.55) !important;
}
.panel__link--outline {
  display:      inline-block;
  margin-top:   auto;
  padding:      8px 18px;
  border:       1px solid rgba(255,255,255,.3);
  border-radius: 8px;
  font-size:    .8125rem;
  font-weight:  600;
  transition:   border-color .2s;
}
.panel--outline:hover .panel__link--outline {
  border-color: rgba(255,255,255,.65);
}
.panels__levels {
  text-align:   center;
  margin-top:   20px;
  font-size:    .875rem;
}

/* ===== "Explore the 10 Levels" link — sweeping underline + arrow slide ===== */
.levels-link {
  display:         inline-flex;
  align-items:     center;
  gap:             9px;
  font-family:     var(--font-display);
  font-weight:     600;
  font-size:       .95rem;
  color:           var(--text);
  padding:         4px 2px;
}
.levels-link__text {
  padding-bottom:      3px;
  background-image:    linear-gradient(90deg, var(--gold), #b98bff);
  background-repeat:   no-repeat;
  background-position: 0 100%;
  background-size:     0% 2px;
  transition:          background-size .4s cubic-bezier(.2,.7,.2,1), color .25s ease;
}
.levels-link__arrow {
  color:      var(--gold);
  transition: transform .3s cubic-bezier(.2,.7,.2,1), text-shadow .25s ease;
}
.levels-link:hover .levels-link__text,
.levels-link:focus-visible .levels-link__text {
  background-size: 100% 2px;
  color:           #fff;
}
.levels-link:hover .levels-link__arrow,
.levels-link:focus-visible .levels-link__arrow {
  transform:   translateX(6px);
  text-shadow: 0 0 14px var(--glow);
}
@media (prefers-reduced-motion: reduce) {
  .levels-link__text,
  .levels-link__arrow { transition: none; }
}

/* =====================================================
   WHERE-NEXT BRIDGE SECTION
   ===================================================== */
.where-next {
  padding:          64px 0;
  border-top:       1px solid var(--line);
}
.where-next__heading {
  font-size:        clamp(1.5rem, 3vw, 2rem);
  font-weight:      700;
  margin-bottom:    40px;
  text-align:       center;
}
.where-next__grid {
  display:          grid;
  grid-template-columns: repeat(3, 1fr);
  gap:              24px;
}
.where-next__item {
  background:       var(--surface);
  border:           1px solid var(--line);
  border-radius:    var(--radius);
  padding:          26px;
  display:          flex;
  flex-direction:   column;
  gap:              10px;
}
.where-next__tag {
  display:          inline-block;
  font-size:        10px;
  font-weight:      700;
  letter-spacing:   .14em;
  text-transform:   uppercase;
  color:            var(--gold);
  border:           1px solid rgba(139,92,246,.4);
  border-radius:    999px;
  padding:          2px 10px;
  align-self:       flex-start;
}
.where-next__title {
  font-size:        1.05rem;
  font-weight:      700;
  color:            #fff;
}
.where-next__item p {
  font-size:        .875rem;
  color:            var(--muted);
  flex:             1;
  margin:           0;
}
.where-next__item .btn { align-self: flex-start; }
.btn--sm {
  font-size:    .8rem !important;
  padding:      8px 16px !important;
}

/* =====================================================
   DOUBLE-OPTION CROSSLINK (split, contrasting halves)
   ===================================================== */
.crosslink--options .wrap {
  max-width: 880px;
}
.crosslink__intro {
  text-align:    center;
  margin-bottom: 44px;
}
.crosslink__title {
  margin-top:     14px;
  font-size:      clamp(1.6rem, 4vw, 2.4rem);
  font-weight:    800;
  letter-spacing: -.02em;
  line-height:    1.14;
}
.crosslink__split {
  position:              relative;
  display:               grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap:            32px;
  align-items:           stretch;
  width:                 100%;
}
.crosslink__option {
  position:        relative;
  z-index:         1;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  padding:         40px 32px;
  border-radius:   var(--radius);
  text-align:      center;
  transition:      transform .25s ease, border-color .25s ease, background .25s ease;
}
.crosslink__option--gold {
  background: linear-gradient(160deg, rgba(139,92,246,.24), rgba(139,92,246,.04));
  border:     1px solid rgba(139,92,246,.4);
}
.crosslink__option--ghost {
  background: rgba(255,255,255,.03);
  border:     1px solid var(--line-strong);
}
.crosslink__option:hover {
  transform: translateY(-6px);
}
.crosslink__option--gold:hover {
  border-color: var(--gold);
  box-shadow:   0 22px 54px -24px var(--glow);
}
.crosslink__option--ghost:hover {
  border-color: rgba(255,255,255,.4);
  background:   rgba(255,255,255,.05);
}
.crosslink__sub {
  font-size:      1.1rem;
  line-height:    24px;
  color:          #fff;
  margin:         0 0 24px;
  font-weight:    700;
  letter-spacing: -.01em;
}
.crosslink__option-line {
  display:       block;
  width:         100%;
  height:        1px;
  margin-bottom: 24px;
  background:    var(--line-strong);
}
.crosslink__option .btn {
  margin: 0;
}
.crosslink__divider {
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           52px;
  height:          52px;
  margin:          0;
  align-self:      start;
  margin-top:      62px;
  border-radius:   50%;
  background:      var(--ink-2);
  border:          1px solid var(--line-strong);
  font-family:     var(--font-mono);
  font-size:       12px;
  font-weight:     700;
  letter-spacing:  .1em;
  text-transform:  uppercase;
  color:           var(--muted);
}

/* =====================================================
   WHERE-NEXT panels: remove default margin-top
   ===================================================== */
.where-next .panels {
  margin-top: 0;
}

/* =====================================================
   HOSTS INTRO — network page
   ===================================================== */
.hosts-intro {
  padding:          80px 0;
  background:       var(--ink);
  border-bottom:    1px solid var(--line);
}
.hosts-intro__grid {
  display:          grid;
  grid-template-columns: 1.1fr .9fr;
  gap:              64px;
  align-items:      center;
}
.hosts-intro__text h2 {
  font-size:        clamp(1.6rem, 3.2vw, 2.4rem);
  font-weight:      800;
  margin:           12px 0 18px;
}
.hosts-intro__text p {
  color:            rgba(255,255,255,.7);
  margin-bottom:    28px;
  font-size:        1rem;
  line-height:      1.65;
}
.hosts-intro__photos {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              16px;
}
.host-card {
  text-align:       center;
}
.host-card__img {
  aspect-ratio:     1/1;
  border-radius:    14px;
  overflow:         hidden;
  margin-bottom:    12px;
  border:           1px solid var(--line-strong);
}
.host-card__img img {
  width:  100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}
.host-card__name {
  font-size:   .9375rem;
  font-weight: 700;
  color:       #fff;
}
.host-card__role {
  font-size:   .8rem;
  color:       var(--muted);
  margin-top:  3px;
}

/* =====================================================
   GUEST REACH HEADLINE
   ===================================================== */
.guest__reach {
  text-align:  center;
  margin-bottom: 48px;
}
.guest__reach h2 {
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight: 800;
  margin: 10px 0 14px;
}
.guest__reach-sub {
  font-size: 1rem;
  color:     rgba(255,255,255,.6);
}

/* =====================================================
   LEVEL STAGE TEXT — brighter
   ===================================================== */
.level-card__stage {
  color: rgba(255,255,255,.75) !important;
}
.ladder__axis span {
  color: rgba(255,255,255,.7) !important;
}

/* =====================================================
   MUTED TEXT — slightly lighter globally
   ===================================================== */
.stats__label {
  color: rgba(255,255,255,.55) !important;
}
#page-network .muted, #page-network .stats__label {
  color: rgba(255,255,255,.6) !important;
}

/* =====================================================
   RESPONSIVE — new sections
   ===================================================== */
@media (max-width: 860px) {
  .hosts-intro__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .where-next__grid {
    grid-template-columns: 1fr;
  }
  .crosslink--options .wrap {
    max-width: 100%;
  }
  .crosslink__split {
    grid-template-columns: 1fr;
    gap:                   14px;
  }
  .crosslink__divider {
    justify-self: center;
    align-self:   center;
    margin:       -12px 0;
  }
  .crosslink__option {
    padding: 32px 24px;
  }
  .where-next .panels {
    grid-template-columns: 1fr;
  }
}

/* =====================================================
   BUTTON BORDERS — more visible on dark backgrounds
   ===================================================== */
.btn--ghost {
  border-color: rgba(255,255,255,.48) !important;
}
.btn--ghost:hover {
  border-color: var(--gold) !important;
}
.btn--gold {
  box-shadow: 0 8px 24px -12px var(--glow) !important;
}
/* Keep light-section ghost button dark */
.section--light .btn--ghost {
  border-color: rgba(26,22,38,.35) !important;
}
.section--light .btn--ghost:hover {
  border-color: #6D28D9 !important;
}

/* =====================================================
   CLEAN / "APPLE" POLISH LAYER  (kept last)
   Crisp type, calm motion, consistent focus + selection.
   ===================================================== */

/* Crisper text rendering everywhere */
html {
  -webkit-font-smoothing:  antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering:          optimizeLegibility;
}

/* More confident, tighter display headings */
h1, .hero__title       { letter-spacing: -.035em; }
h2, .crosslink__title  { letter-spacing: -.03em; }

/* Slightly more generous, readable body copy */
p { text-wrap: pretty; }

/* Branded, subtle text selection */
::selection      { background: rgba(139,92,246,.32); color: #fff; }
::-moz-selection { background: rgba(139,92,246,.32); color: #fff; }

/* Unified, accessible focus ring — visible only for keyboard users */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[tabindex]:focus-visible {
  outline:        2px solid var(--gold);
  outline-offset: 3px;
  border-radius:  10px;
}
:focus:not(:focus-visible) { outline: none; }

/* Calmer, more premium easing on interactive elements */
.btn {
  transition:
    transform    .32s cubic-bezier(.2,.7,.2,1),
    box-shadow   .3s  ease,
    background   .25s ease,
    color        .25s ease,
    border-color .25s ease !important;
}

/* Honor reduced-motion for the site-wide polish too */
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}