.membership-hero {
  background: #12667e;
  color: #fff;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  min-height: 540px;
}

.membership-hero-copy { align-self: center; padding: clamp(54px, 8vw, 112px) clamp(24px, 7vw, 108px); }
.membership-hero .eyebrow { color: #f3ba2f; }
.membership-hero h1 { font-size: clamp(48px, 5.5vw, 78px); max-width: 700px; }
.membership-hero-copy > p:not(.eyebrow) { font-size: clamp(18px, 1.8vw, 23px); line-height: 1.4; margin: 28px 0 31px; max-width: 620px; }
.membership-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 24px; }
.membership-actions .text-link { color: #fff; }
.membership-actions .text-link:hover { color: #f3ba2f; }

.membership-hero-art { background: #f8e6dc; min-height: 540px; overflow: hidden; position: relative; }
.membership-hero-art img { height: 100%; object-fit: cover; object-position: 63% center; width: 100%; }
.hero-photo-caption { background: #f3ba2f; bottom: 28px; color: var(--ink); font-size: 13px; font-weight: 850; left: 28px; letter-spacing: .1em; padding: 10px 14px; position: absolute; text-transform: uppercase; }

.membership-section { padding: clamp(60px, 8vw, 112px) clamp(24px, 7vw, 108px); }
.membership-section-intro { max-width: 780px; }
.membership-section-intro > p:last-child { color: var(--muted); font-size: 18px; margin: 22px 0 0; max-width: 720px; }
.member-steps { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 55px; }
.member-step { min-height: 290px; padding: 28px clamp(24px, 4vw, 48px) 40px; }
.step-free { background: #e8f3f2; color: #175b60; }
.step-library { background: #176b76; color: #fff; }
.step-studio { background: #f4c13d; color: var(--ink); }
.step-number { display: block; font-family: 'Source Serif 4', Georgia, serif; font-size: 44px; font-weight: 700; line-height: 1; }
.member-step h3 { font-size: clamp(28px, 2.6vw, 40px); margin: 35px 0 13px; }
.member-step p { font-size: 16px; margin: 0; max-width: 310px; }
.member-step strong { display: block; font-size: 13px; letter-spacing: .05em; margin-top: 28px; text-transform: uppercase; }

.pack-section { background: #eef4fb; }
.pack-heading { align-items: end; display: flex; gap: 30px; justify-content: space-between; }
.pack-heading > p { color: var(--muted); font-size: 18px; margin: 0; max-width: 420px; }
.pack-list { margin-top: 45px; }
.pack-list article { align-items: center; background: #fff; display: grid; gap: 20px; grid-template-columns: 54px minmax(0, 1fr) auto; padding: 20px 24px; }
.pack-list article + article { margin-top: 2px; }
.pack-index { color: var(--red); font-family: 'Source Serif 4', Georgia, serif; font-size: 25px; font-weight: 700; }
.pack-list h3 { font-family: 'Source Serif 4', Georgia, serif; font-size: 26px; letter-spacing: -.03em; margin: 0; }
.pack-list p { color: var(--muted); font-size: 15px; margin: 4px 0 0; }
.pack-use { color: var(--teal); font-size: 12px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.pack-complete { background: #fff5d9 !important; }
.pack-complete .pack-index, .pack-complete .pack-use { color: #9b6a00; }

.next-section { align-items: start; display: grid; gap: clamp(34px, 8vw, 140px); grid-template-columns: 1fr 1fr; }
.next-copy { color: var(--muted); font-size: 18px; max-width: 560px; }
.next-copy p { margin: 0 0 23px; }

.checkout-section { align-items: center; background: #176b76; color: #fff; display: grid; gap: clamp(32px, 7vw, 110px); grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.checkout-section .eyebrow { color: #f3ba2f; }
.checkout-copy h2 { max-width: 560px; }
.checkout-copy > p:last-child { font-size: 18px; line-height: 1.55; margin: 24px 0 0; max-width: 560px; }
.checkout-form { background: #fff; color: var(--ink); padding: clamp(24px, 4vw, 42px); }
.checkout-form label { display: block; font-size: 14px; font-weight: 800; margin-bottom: 10px; }
.checkout-row { align-items: stretch; display: flex; gap: 10px; }
.checkout-row input { border: 1px solid #cdd8df; border-radius: 0; color: var(--ink); flex: 1; font: inherit; min-width: 0; padding: 15px 16px; }
.checkout-row .button { border: 0; white-space: nowrap; }
.checkout-status { color: #5c6874; font-size: 14px; line-height: 1.45; margin: 14px 0 0; }
.checkout-status.success { color: #176b76; font-weight: 800; }
.checkout-status.error { color: #b80000; font-weight: 700; }

.path-link { color: inherit; text-decoration: none; }
.path-link:hover { text-decoration: underline; }

@media (max-width: 800px) {
  .membership-hero { grid-template-columns: 1fr; }
  .membership-hero-copy { order: 2; padding: 48px 24px 58px; }
  .membership-hero-art { min-height: 390px; order: 1; }
  .membership-hero-art img { object-position: 65% center; }
  .hero-photo-caption { bottom: 18px; left: 18px; }
  .member-steps { grid-template-columns: 1fr; margin-top: 34px; }
  .member-step { min-height: 0; padding: 24px; }
  .member-step h3 { margin-top: 22px; }
  .pack-heading, .next-section, .checkout-section { display: block; }
  .pack-heading > p { margin-top: 22px; }
  .checkout-form { margin-top: 30px; }
  .checkout-row { display: block; }
  .checkout-row input, .checkout-row .button { width: 100%; }
  .checkout-row .button { margin-top: 10px; }
  .pack-list article { grid-template-columns: 38px minmax(0, 1fr); padding: 17px 14px; }
  .pack-use { grid-column: 2; justify-self: start; }
}