.membership-page { min-height: 100vh; color: #dbe3de; background: radial-gradient(circle at 20% 5%, rgba(70, 139, 132, .18), transparent 30%), radial-gradient(circle at 85% 8%, rgba(193, 151, 64, .11), transparent 25%), #071017; }
.membership-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 86px; padding: 16px clamp(22px, 4vw, 58px); border-bottom: 1px solid var(--line-cool); background: rgba(6, 15, 20, .9); }
.membership-header nav { display: flex; gap: 20px; }
.membership-header nav a { color: var(--muted); font-size: 9px; font-weight: 800; letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.membership-main { width: min(1240px, calc(100% - 64px)); margin: 0 auto; padding: 54px 0 90px; }
.membership-hero { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 50px; align-items: end; }
.membership-hero h1 { max-width: 780px; margin: 0; font: 500 clamp(38px, 5vw, 66px)/1.02 var(--serif); }
.membership-hero > div:first-child > p:last-child { max-width: 700px; color: var(--muted); font: 14px/1.7 var(--serif); }
.membership-price { padding: 25px; border: 1px solid rgba(217, 185, 110, .32); background: rgba(45, 34, 20, .25); }
.membership-price small { color: var(--gold-dim); font-size: 8px; font-weight: 850; letter-spacing: .14em; }
.membership-price strong { display: block; color: var(--gold-bright); font: 500 50px var(--serif); }
.membership-price p { margin: 3px 0 0; color: var(--muted-dark); font-size: 8px; line-height: 1.6; }
.membership-benefits { display: grid; grid-template-columns: repeat(4, 1fr); margin: 34px 0 18px; border: 1px solid var(--line-cool); }
.membership-benefits article { min-height: 160px; padding: 20px; border-right: 1px solid var(--line-cool); background: rgba(8, 19, 23, .58); }
.membership-benefits article:last-child { border-right: 0; }
.membership-benefits span { color: var(--gold-dim); font-size: 8px; }
.membership-benefits strong { display: block; margin-top: 20px; font: 500 18px var(--serif); }
.membership-benefits p { color: var(--muted-dark); font-size: 9px; line-height: 1.65; }
.membership-layout { display: grid; grid-template-columns: 1.15fr .85fr; gap: 18px; }
.membership-access, .checkout-safety { padding: 29px; }
.membership-access h2, .checkout-safety h2, .companions-heading h2 { margin: 4px 0 10px; font: 500 28px var(--serif); }
.membership-access > div > p:not(.card-kicker, .form-error), .checkout-safety > p:not(.card-kicker) { color: var(--muted); font: 12px/1.65 var(--serif); }
.account-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.provider-stack { margin-top: 20px; }
.provider-stack button { margin-top: 9px; }
#paypal-buttons { margin-top: 13px; }
.provider-pending { color: var(--muted-dark); font-size: 8px; line-height: 1.55; }
.checkout-safety ul { display: grid; gap: 10px; padding: 15px 0 0; list-style: none; }
.checkout-safety li { padding: 11px 0; border-top: 1px solid var(--line-cool); color: #aebbb8; font-size: 9px; }
.checkout-safety li::before { margin-right: 9px; color: var(--green); content: "✓"; }
.companions-section { margin-top: 55px; }
.companions-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 18px; }
.companions-heading > div > p:last-child { max-width: 750px; color: var(--muted); font: 12px/1.65 var(--serif); }
.restart-badge { padding: 10px 13px; border: 1px solid rgba(217, 185, 110, .3); color: var(--gold); font-size: 8px; font-weight: 850; letter-spacing: .12em; }
.companion-slots { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.companion-slot { padding: 27px; }
.slot-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.slot-heading h3 { margin: 4px 0 0; font: 500 24px var(--serif); }
.slot-status { padding: 6px 8px; border: 1px solid var(--line-cool); color: var(--muted); font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.slot-status.active { color: var(--green); }
.slot-status.pending_create, .slot-status.pending_delete { color: var(--gold); }
.slot-status.failed { color: #d18b7d; }
.companion-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 13px; }
.companion-form.hidden { display: none; }
.companion-slot-copy { margin: 14px 0; color: var(--muted); font: 11px/1.6 var(--serif); }
.companion-form-toggle { width: 100%; margin: 0; }
.companion-form-toggle[aria-expanded="true"] { margin-bottom: 16px; border-color: rgba(217, 185, 110, .32); color: var(--gold-bright); }
.companion-form .wide { grid-column: 1 / -1; }
.name-availability { min-height: 14px; margin: 0; color: var(--muted-dark); font-size: 8px; }
.name-availability.available { color: var(--green); }
.name-availability.unavailable { color: #d18b7d; }
.companion-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 15px 0 22px; }
.companion-summary div { padding: 13px; border: 1px solid var(--line-cool); }
.companion-summary small { display: block; color: var(--muted-dark); font-size: 7px; letter-spacing: .1em; }
.companion-summary strong { display: block; margin-top: 5px; font: 500 17px var(--serif); }
.companion-role-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 12px; align-items: end; margin: 0 0 14px; padding: 14px; border: 1px solid rgba(115, 201, 154, .18); background: rgba(39, 91, 75, .06); }
.companion-role-form .secondary-button { min-height: 43px; margin: 0; }
.companion-role-form .form-error { grid-column: 1 / -1; margin: 0; }
.companion-restart-note, .companion-error { color: var(--muted-dark); font-size: 8px; line-height: 1.55; }
.companion-error { color: #d18b7d; }

@media (max-width: 900px) {
  .membership-benefits { grid-template-columns: 1fr 1fr; }
  .membership-benefits article:nth-child(2) { border-right: 0; }
  .membership-benefits article:nth-child(-n+2) { border-bottom: 1px solid var(--line-cool); }
  .membership-layout, .companion-slots { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .membership-header { align-items: flex-start; }
  .membership-header nav { flex-direction: column; gap: 8px; }
  .membership-main { width: calc(100% - 24px); padding-top: 34px; }
  .membership-hero { grid-template-columns: 1fr; gap: 20px; }
  .membership-benefits { grid-template-columns: 1fr; }
  .membership-benefits article { border-right: 0; border-bottom: 1px solid var(--line-cool); }
  .companions-heading { align-items: flex-start; flex-direction: column; }
  .companion-form { grid-template-columns: 1fr; }
  .companion-form .wide { grid-column: auto; }
  .companion-role-form { grid-template-columns: 1fr; }
  .companion-role-form .form-error { grid-column: auto; }
}