/* Membership entrance, cards, and shared modal treatment. */
#plans.pricing {
  --plans-reveal: 1;
  scroll-margin-top: 160px;
  box-shadow: 0 -40px 110px #010a12dd, 0 -1px 34px #5fc5db31;
}
#plans.pricing::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(90px, 17vw, 260px);
  background: linear-gradient(180deg, #87dcf016, transparent);
  opacity: var(--plans-reveal);
  pointer-events: none;
}
#plans.pricing > .wrap { position: relative; z-index: 1; }
#plans.pricing .chapter-head {
  filter: blur(var(--plans-heading-blur, 0px));
}
.pricing .price-card { cursor: pointer; perspective: 1200px; }
.pricing .price-card.will-reveal {
  opacity: 0;
  transform: translate3d(0, 112px, 0) rotateX(7deg) scale(.955);
  clip-path: inset(14% -120px -120px -120px round 24px);
  filter: blur(10px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform 1.15s cubic-bezier(.16,1,.3,1), clip-path 1.1s cubic-bezier(.16,1,.3,1), filter .8s cubic-bezier(.16,1,.3,1);
  transform-origin: 50% 85%;
}
.pricing .price-card.featured.will-reveal { transition-delay: .16s; }
.pricing .price-card.will-reveal.is-visible {
  opacity: 1;
  transform: none;
  clip-path: inset(-120px -120px -120px -120px round 0);
  filter: none;
}
.pricing .price-card.will-reveal .member-pass {
  filter: brightness(.65) saturate(.7);
  transition: filter 1s .25s, transform .65s cubic-bezier(.2,.8,.2,1), box-shadow .65s;
}
.pricing .price-card.will-reveal.is-visible .member-pass { filter: none; }
.pricing .price-card.will-reveal .pass-dots { opacity: 0; transition: opacity 1.15s .45s; }
.pricing .price-card.will-reveal.is-visible .pass-dots { opacity: .6; }
.pricing .price-card.featured.will-reveal.is-visible .pass-dots { opacity: .8; }
.pricing .price-card.will-reveal .plan-details {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .75s .3s, transform .95s .3s cubic-bezier(.16,1,.3,1);
}
.pricing .price-card.will-reveal.is-visible .plan-details { opacity: 1; transform: none; }
.pricing .price-card:focus-within .member-pass { border-color: #bdebf3; box-shadow: inset 0 1px #fff6, 0 36px 90px #4fbad13a; }
.pricing .price-card .plan-join:focus-visible { outline: 2px solid #c3ecf6; outline-offset: 4px; }
.installment-note {
  width: fit-content;
  max-width: min(900px, 100%);
  padding: 13px 22px;
  border: 1px solid #7fd6e326;
  border-radius: 999px;
  background: #14313b4d;
}

/* The close control lives in the transparent dialog margin, above its plate. */
dialog.join-dialog, dialog.lightbox, dialog.review-dialog {
  width: min(690px, calc(100vw - 38px));
  max-width: none;
  max-height: calc(100svh - 20px);
  padding: 58px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
dialog .modal-surface {
  position: relative;
  max-height: calc(100svh - 82px);
  overflow: auto;
  border: 1px solid #8bcfe19b;
  border-radius: clamp(18px, 2vw, 28px);
  background: radial-gradient(ellipse at 87% 0%, #566c805c, transparent 52%), linear-gradient(145deg, #1b2d3a, #0c1925 75%);
  box-shadow: 0 32px 110px #000b, inset 0 1px #f6ffff24;
}
dialog .dialog-close, dialog .review-dialog-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #a4dce491;
  border-radius: 50%;
  background: #102532;
  color: #eaf8fa;
  box-shadow: 0 8px 26px #0007;
  cursor: pointer;
  transition: background .25s, border-color .25s, transform .3s;
}
dialog .dialog-close:hover, dialog .review-dialog-close:hover { background: #1c3b4a; border-color: #c7f3f8; transform: rotate(90deg); }
dialog .dialog-close svg { width: 20px; height: 20px; }
dialog .dialog-close:focus-visible, dialog .review-dialog-close:focus-visible { outline: 2px solid #bdeef8; outline-offset: 3px; }
.join-surface { padding: clamp(26px, 3.3vw, 38px); }
.join-surface .section-id { color: #a8dfec; }
.join-surface h2 { max-width: 570px; margin: 17px 0 9px; font-size: clamp(30px, 4.2vw, 49px); line-height: 1.05; letter-spacing: -.055em; }
.join-surface .join-intro { margin: 0; max-width: 530px; color: #c2d4dc; font-size: clamp(.9rem, 1.25vw, 1rem); line-height: 1.5; }
.join-selection { display: flex; align-items: baseline; justify-content: space-between; gap: 15px; margin: 18px 0; padding: 13px 18px; border: 1px solid #8ccada58; border-radius: 12px; background: #74bcd414; }
.join-selection span { font-size: .95rem; font-weight: 650; }
.join-selection strong { color: #a6e4f2; font-size: 1.2rem; white-space: nowrap; }
#join-form { display: grid; width: 100%; max-width: none; gap: 10px; }
.join-field { display: grid; gap: 7px; color: #cee2e8; font-size: .76rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.join-field input { width: 100%; min-height: 54px; padding: 13px 18px; border: 1px solid #b7d7e168; border-radius: 10px; outline: none; background: #f0f7fa; color: #12212a; font: inherit; font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; transition: border-color .2s, box-shadow .2s; }
.join-field input::placeholder { color: #667782; opacity: 1; }
.join-field input:focus { border-color: #64d0e7; box-shadow: 0 0 0 3px #79d9e747; }
.join-submit { width: 100%; min-height: 58px; margin-top: 7px; font-size: .9rem; }
.join-status { min-height: 0; margin: 0; color: #b8e9f3; font-size: .82rem; line-height: 1.4; }
.join-status:empty { display: none; }
.join-status.error { color: #ffccbd; }
.join-help { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #a4d5dd39; font-size: .82rem; }
.join-help a { color: #c0eff8; text-underline-offset: 3px; }
dialog.lightbox { width: min(1200px, calc(100vw - 38px)); }
.lightbox .lightbox-surface { padding: clamp(9px, 1.5vw, 18px); }
.lightbox .lightbox-surface img { width: 100%; max-height: calc(100svh - 170px); object-fit: contain; border-radius: 9px; }
.lightbox .lightbox-surface p { margin: 0; padding: 12px 4px 2px; }
dialog.review-dialog { width: min(760px, calc(100vw - 38px)); }
.review-dialog .review-dialog-surface { padding: clamp(22px, 4vw, 42px); }
.review-dialog .review-dialog-close { font-size: 1.8rem; line-height: 1; }

@media (max-width: 600px) {
  .installment-note { border-radius: 15px; padding: 12px 15px; }
  .join-selection { flex-direction: column; align-items: flex-start; gap: 3px; margin: 20px 0; }
  .join-surface { padding: 25px 22px; }
  .join-field input { min-height: 54px; }
  .pricing .price-card.will-reveal { transform: translate3d(0, 72px, 0) scale(.975); filter: blur(5px); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing .price-card.will-reveal, .pricing .price-card.will-reveal.is-visible { opacity: 1; transform: none; clip-path: none; filter: none; transition: none; }
  .pricing .price-card.will-reveal .member-pass, .pricing .price-card.will-reveal .plan-details, .pricing .price-card.will-reveal .pass-dots { opacity: 1; transform: none; filter: none; transition: none; }
  #plans.pricing, #plans.pricing .chapter-head { transform: none !important; filter: none; opacity: 1; }
}