/* ============================================================
 * 10-page-subscribe.css — Subscribe / Membership presentation page
 * ------------------------------------------------------------
 * Source: V14 subscribe.html inline <style>, with shared rules
 * (brand-mark, topbar, menu, vignette, canvases, site-footer,
 *  global keyframes) removed — they live in 00-base.css.
 *
 * NOTE: subscribe.html in V14 is NOT a form (no newsletter input).
 * It is a presentation of membership benefits with a CTA toward
 * waitlist. Reproduced here verbatim in layout.
 *
 * Scope:
 *   - main.subscribe               single viewport stage
 *   - .sub-head / .sub-eyebrow / .sub-title / .sub-tagline
 *   - .sub-grid   two columns (benefits | steps)
 *   - .sub-col-title
 *   - .benefits / .benefit / .benefit-num / .benefit-name / .benefit-desc
 *   - .steps    / .step-row / .step-num   / .step-name    / .step-desc
 *   - .sub-foot / .sub-fineprint
 * ============================================================ */

/* ─────────────────────────────────────────────────────────────
   STAGE
   ───────────────────────────────────────────────────────────── */
main.subscribe {
  position: relative;
  z-index: 3;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4vh;
  padding: 14vh 6vw 8vh;
}

/* ─────────────────────────────────────────────────────────────
   HEADER
   ───────────────────────────────────────────────────────────── */
.sub-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4vh;
  text-align: center;
  animation: fadeIn 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
.sub-eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 0.7vw, 12.5px);
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(210,168,135,0.85);
}
.sub-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(22px, 2.4vw, 42px);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.15;
  max-width: 22em;
  animation: neonBreathSoft 6s ease-in-out infinite;
}
.sub-tagline {
  font-family: 'DM Sans', sans-serif;
  font-style: italic;
  font-size: clamp(15px, 1.23vw, 20px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,248,235,0.82);
  max-width: 32em;
}

/* ─────────────────────────────────────────────────────────────
   TWO-COLUMN BODY
   ───────────────────────────────────────────────────────────── */
.sub-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  width: 100%;
  max-width: 1100px;
  align-items: start;
  animation: fadeIn 0.7s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.12s;
}

.sub-col-title {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(10px, 0.73vw, 13px);
  font-weight: 500;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: rgba(210,168,135,0.85);
  padding-bottom: 1.2vh;
  margin-bottom: 1.8vh;
  border-bottom: 1px solid rgba(255,240,220,0.18);
}

/* Benefits column */
.benefits {
  display: flex;
  flex-direction: column;
  gap: 1.6vh;
  list-style: none;
  padding: 0;
  margin: 0;
}
.benefit {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8em 1em;
  align-items: baseline;
}
.benefit-num {
  font-family: 'Outfit', sans-serif; /* Italiana bannie (Lucas 17/07) */
  font-weight: 300;
  font-size: clamp(16.5px, 1.46vw, 22px);
  color: rgba(210,168,135,0.85);
  line-height: 1;
  min-width: 1.4em;
}
.benefit-text {
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}
.benefit-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(13px, 1vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.benefit-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13.5px, 1.01vw, 16.5px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255,248,235,0.72);
}

/* Steps column */
.steps {
  display: flex;
  flex-direction: column;
  gap: 1.8vh;
  list-style: none;
  padding: 0;
  margin: 0;
}
.step-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8em 1em;
  align-items: baseline;
}
.step-num {
  font-family: 'Outfit', sans-serif; /* Italiana bannie (Lucas 17/07) */
  font-weight: 300;
  font-size: clamp(20px, 1.8vw, 28px);
  color: rgba(255,240,220,0.78);
  line-height: 1;
  min-width: 1.4em;
}
.step-body {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}
.step-name {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(13px, 1vw, 16.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.step-desc {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(13.5px, 1.01vw, 16.5px);
  font-weight: 300;
  line-height: 1.45;
  color: rgba(255,248,235,0.72);
}

/* ─────────────────────────────────────────────────────────────
   BOTTOM CTA
   ───────────────────────────────────────────────────────────── */
.sub-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  animation: fadeIn 0.8s cubic-bezier(0.22,1,0.36,1) both;
  animation-delay: 0.28s;
}

.sub-fineprint {
  font-family: 'DM Sans', sans-serif;
  font-size: clamp(12px, 0.84vw, 14px);
  font-weight: 300;
  font-style: italic;
  color: rgba(255,248,235,0.55);
  text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE
   ───────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  main.subscribe { min-height: 100vh; padding: 10vh 8vw 8vh; gap: 4vh; }
  .sub-grid { grid-template-columns: 1fr; gap: 4vh; }
  .sub-title { font-size: clamp(16px, 4.5vw, 22px); letter-spacing: 0.06em; }
}
@media (max-width: 640px) {
  main.subscribe { padding: 9vh 6vw 6vh; gap: 3vh; }
  .sub-title { font-size: clamp(14px, 4vw, 18px); }
}

/* Squat viewports — tighten gaps on desktop */
@media (max-height: 760px) and (min-width: 821px) {
  main.subscribe { gap: 2.6vh; padding-top: 12vh; padding-bottom: 6vh; }
  .benefits { gap: 1.1vh; }
  .steps { gap: 1.4vh; }
}

@media (max-height: 500px) and (orientation: landscape) {
  main.subscribe { padding: 10vh 6vw 4vh; gap: 2vh; }
  .sub-head { gap: 0.6vh; }
  .sub-title { font-size: clamp(16px, 2.2vw, 22px); }
  .benefits { gap: 0.6vh; }
  .steps { gap: 0.8vh; }
}