/* ============================================================
   Membership — three ways to be hers.
   Middle tier glows; urgency is whispered, not shouted.
   ============================================================ */

.sub-hero {
  padding: 10rem var(--gutter) 0;
  max-width: 90rem;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

.sub-hero .display {
  font-size: clamp(2.8rem, 2rem + 5vw, 6.5rem);
  color: var(--cream);
  max-width: 56rem;
}

.sub-hero .lede { text-align: center; }

/* scarcity whisper */
.sub-scarcity {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.6rem;
  padding: 0.6rem 1.4rem;
  border-radius: 999px;
  border: 1px solid rgba(233, 210, 174, 0.35);
  color: var(--champagne);
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.sub-scarcity::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--champagne);
  animation: pulse 2.2s ease-out infinite;
}

/* ---------- tiers ---------- */

.tiers {
  margin-top: clamp(3rem, 6vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  align-items: stretch;
  width: 100%;
  max-width: 74rem;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 2.6rem 2.2rem 2.4rem;
  border-radius: 6px;
  border: 1px solid rgba(221, 139, 168, 0.18);
  background: linear-gradient(170deg, rgba(47, 15, 34, 0.75), rgba(21, 6, 16, 0.9));
  transition: transform var(--dur-mid) var(--ease-velvet),
              border-color var(--dur-mid) var(--ease-velvet),
              box-shadow var(--dur-mid) var(--ease-velvet);
}

.tier:hover {
  transform: translateY(-6px);
  border-color: rgba(221, 139, 168, 0.45);
  box-shadow: 0 40px 80px -40px rgba(221, 139, 168, 0.3);
}

.tier-featured {
  border-color: rgba(240, 168, 192, 0.55);
  background: linear-gradient(170deg, rgba(64, 20, 46, 0.9), rgba(35, 9, 26, 0.95));
  box-shadow: 0 0 70px -20px rgba(221, 139, 168, 0.35);
  transform: translateY(-1.2rem);
}

.tier-featured:hover { transform: translateY(calc(-1.2rem - 6px)); }

.tier-flag {
  position: absolute;
  top: -0.9rem;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 0.62rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  padding: 0.45rem 1.2rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--rose), var(--rose-deep));
  color: var(--wine);
}

.tier-name {
  font-family: var(--font-script);
  font-size: 2.1rem;
  color: var(--rose-glow);
}

.tier-desc {
  margin-top: 0.5rem;
  color: var(--text-dim);
  font-size: 0.92rem;
  min-height: 3em;
}

.tier-price {
  margin-top: 1.6rem;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
}

.tier-price strong {
  font-family: var(--font-display);
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1;
}

.tier-price span {
  color: var(--text-dim);
  font-size: 0.85rem;
}

.tier-price .was {
  text-decoration: line-through;
  color: rgba(179, 145, 161, 0.5);
}

.tier-perks {
  margin-top: 1.8rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(221, 139, 168, 0.14);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  flex: 1;
}

.tier-perks li {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  font-size: 0.94rem;
  color: var(--text);
}

.tier-perks li::before {
  content: "\2740";
  color: var(--rose);
  flex-shrink: 0;
}

.tier-perks li.muted { color: rgba(179, 145, 161, 0.55); }
.tier-perks li.muted::before { content: "\2014"; color: rgba(179, 145, 161, 0.4); }

.tier .btn { margin-top: 2.2rem; justify-content: center; }

@media (max-width: 960px) {
  .tiers { grid-template-columns: 1fr; max-width: 30rem; }
  .tier-featured { transform: none; }
  .tier-featured:hover { transform: translateY(-6px); }
}

/* ---------- telegram hints & steps ---------- */

.tg-hint {
  display: block;
  margin-top: 0.8rem;
  text-align: center;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(179, 145, 161, 0.75);
}

.how-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2rem);
  counter-reset: step;
  max-width: 74rem;
  margin: 0 auto;
}

.how-step {
  position: relative;
  padding: 2.4rem 2rem;
  border: 1px solid rgba(221, 139, 168, 0.18);
  border-radius: 6px;
  background: linear-gradient(170deg, rgba(47, 15, 34, 0.55), rgba(21, 6, 16, 0.8));
}

.how-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 2.6rem;
  color: rgba(221, 139, 168, 0.35);
  line-height: 1;
}

.how-step h3 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--cream);
}

.how-step p {
  margin-top: 0.6rem;
  color: var(--text-dim);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .how-steps { grid-template-columns: 1fr; max-width: 30rem; }
}

/* ---------- what you get strip ---------- */

.sub-includes {
  margin-top: var(--space-section);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(221, 139, 168, 0.15);
  border: 1px solid rgba(221, 139, 168, 0.15);
}

.sub-include {
  /* translucent so the fixed page backdrop reads through */
  background: rgba(21, 6, 16, 0.72);
  padding: 2.4rem 1.8rem;
}

.sub-include .script { font-size: 1.9rem; display: block; }

.sub-include p {
  margin-top: 0.7rem;
  color: var(--text-dim);
  font-size: 0.9rem;
}

@media (max-width: 900px) {
  .sub-includes { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 540px) {
  .sub-includes { grid-template-columns: 1fr; }
}

/* ---------- vows / faq ---------- */

.vows {
  max-width: 46rem;
  margin: 0 auto;
}

.vow {
  border-bottom: 1px solid rgba(221, 139, 168, 0.14);
}

.vow summary {
  list-style: none;
  cursor: pointer;
  padding: 1.5rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--cream);
  transition: color var(--dur-mid) ease;
}

.vow summary::-webkit-details-marker { display: none; }

.vow summary::after {
  content: "+";
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 1.3rem;
  color: var(--rose);
  transition: transform var(--dur-mid) var(--ease-velvet);
}

.vow[open] summary::after { transform: rotate(45deg); }

.vow summary:hover { color: var(--rose-glow); }

.vow p {
  padding: 0 0 1.6rem;
  color: var(--text-dim);
  max-width: 38rem;
}

/* ============================================================
   PAGE BACKDROP — fixed, so it stays put while the page
   scrolls over it. Same tint recipe as the hero backdrops
   (6px defocus, wine scrim, rose glow at 0.14) — but laid out
   for centred content, so the density is even across the width
   instead of weighted to one side. The page is long, so the
   scrim keeps the tier cards and FAQ readable end to end.
   ============================================================ */

.page-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.page-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  filter: blur(6px) saturate(1.1);
}

.page-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(21, 6, 16, 0.9) 0%,
      rgba(21, 6, 16, 0.82) 32%,
      rgba(21, 6, 16, 0.86) 68%,
      rgba(21, 6, 16, 0.93) 100%),
    radial-gradient(62% 55% at 50% 26%, rgba(221, 139, 168, 0.14), transparent 72%);
}

@media (max-width: 900px) {
  .page-bg img { object-position: center; filter: blur(5px) saturate(1.1); }
  .page-bg::after {
    background:
      linear-gradient(180deg, rgba(21,6,16,.9) 0%, rgba(21,6,16,.86) 40%, rgba(21,6,16,.94) 100%),
      radial-gradient(70% 40% at 50% 18%, rgba(221,139,168,.12), transparent 70%);
  }
}