/* join · owner P1 · the banner as a page: the V mark returns (the hero's WebGL canvas moves into .end__stage),
   the lockup assembles (mark + lowercase "veyl"), shards sweep in from the corners */
#join { --F: clamp(112px, 21vw, 330px); position: relative; overflow: clip; display: grid; place-items: center; min-height: clamp(660px, 66vw, 940px); padding: clamp(120px, 12vw, 180px) var(--m); background: linear-gradient(180deg, #e6e6e6 0%, #c9c9c9 70%, #adadad 100%); text-align: center; }
#join .end__stage { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
#join .end__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
#join .end__shard { position: absolute; z-index: 2; width: auto; max-width: none; pointer-events: none; }
#join .end__shard--tr { top: 0; right: 0; height: clamp(150px, 26vw, 400px); }
#join .end__shard--bl { bottom: 0; left: 0; height: clamp(150px, 26vw, 400px); }
#join .end__in { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; }
#join .end__lockup { display: flex; align-items: center; justify-content: center; gap: calc(var(--F) * 0.1); }
#join .end__slot { position: relative; flex: none; width: calc(var(--F) * 0.8); height: calc(var(--F) * 0.8); }
#join .end__still { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(calc(var(--F) * 0.035) calc(var(--F) * 0.035) 0 #6600ff); }
#join[data-gl] .end__still { visibility: hidden; }
#join .end__word { display: block; font-stretch: 125%; font-weight: 600; font-size: var(--F); letter-spacing: -0.035em; line-height: .78; padding-bottom: .06em; transform: translateX(-0.02em); }
#join .end__word .vw { padding: .14em .04em .26em; margin: -.14em -.04em -.26em; }
#join .end__ph { display: inline-block; }
#join .end__title { margin-top: clamp(40px, 4.4vw, 64px); max-width: 16em; font-size: clamp(26px, 2.8vw, 44px); letter-spacing: -0.025em; line-height: 1.05; }
#join .end__cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 30px; margin-top: 34px; }
#join .end__ca { margin-top: 24px; font-size: 14px; color: #262626; }
#join .end__ca-v { font-family: var(--mono); font-size: 13px; letter-spacing: 0.01em; }
@media (max-width: 599px) {
  #join { --F: clamp(92px, 27vw, 150px); min-height: 0; padding-block: 132px 150px; }
  #join .end__lockup { flex-direction: column; gap: 18px; }
  #join .end__slot { width: calc(var(--F) * 1.25); height: calc(var(--F) * 1.25); }
  #join .end__cta { gap: 6px 20px; }
  #join .end__cta .btn { flex-basis: 100%; max-width: 280px; }
}