/* Retiola subpage styles — shared by all subpage shells. */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:#221E22;color:#F4F2FF;font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:#ECA72C;text-decoration:none;-webkit-tap-highlight-color:rgba(236,167,44,.22);transition:color .16s ease-out,background-color .16s ease-out,border-color .16s ease-out,filter .16s ease-out}
a:hover{text-decoration:underline}
a:focus-visible,summary:focus-visible{outline:2px solid #ECA72C;outline-offset:4px;border-radius:8px}
@media (hover:hover){.nav-links a:hover,.back:hover,.btn:hover{filter:brightness(1.08)}.nav-links a:hover{color:#F4F2FF;text-decoration:none}}

.nav{position:sticky;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;padding:16px 36px;border-bottom:1px solid rgba(255,255,255,.08);background:rgba(34,30,34,.72);backdrop-filter:blur(18px);z-index:50}
.brand{font-family:'Cinzel',serif;font-size:22px;letter-spacing:1px;font-weight:700;color:#F4F2FF;display:flex;align-items:center;gap:10px}
.nav-links{display:flex;gap:24px;align-items:center;justify-content:center;grid-column:2;font-size:14px;color:#A6A2C2}

.wrap{max-width:820px;margin:0 auto;padding:80px 36px 120px}
.page-pricing .wrap{max-width:1180px}

h1{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(48px,7vw,88px);line-height:.95;letter-spacing:-1.5;margin:0 0 12px;text-wrap:balance}
h1 em{color:#ECA72C;font-style:italic}
.kicker{color:#ECA72C;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:600;margin-bottom:18px}
h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:32px;line-height:1.1;letter-spacing:-.6;margin:48px 0 12px;color:#F4F2FF}
h2 em{color:#ECA72C;font-style:italic}
h3{font-size:17px;font-weight:600;color:#F4F2FF;margin:24px 0 8px;letter-spacing:-.2}
p,li{color:#A6A2C2;font-size:16px;line-height:1.65;text-wrap:pretty}
ul{padding-left:20px}
.lead{font-size:19px;color:#A6A2C2;margin:24px 0 0;max-width:620px}

.card{background:#31263E;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:32px;margin-top:20px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.pricing-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}

.price{font-family:'Instrument Serif',serif;font-size:64px;line-height:1;color:#F4F2FF;margin-top:8px}
.price small{font-size:14px;color:#6E6A8A}

.tag{display:inline-block;font-size:11px;letter-spacing:2px;font-weight:700;padding:4px 10px;border:1px solid rgba(255,255,255,.08);border-radius:999px;color:#A6A2C2}
.tag.gold{color:#E4D5A6;border-color:#E4D5A655}

.lounge{background:linear-gradient(160deg,#2E2440,#221E22);border-color:#E4D5A630;box-shadow:0 30px 80px -30px #E4D5A630}
.supporter{background:linear-gradient(160deg,rgba(92,48,73,.5),#31263E);border-color:rgba(251,207,232,.18)}
.supporter-tag{color:#FBCFE8;border-color:rgba(251,207,232,.28)}
.supporter-check{color:#FBCFE8}
.plan-intro{font-size:14.5px;margin:18px 0 0}
.plan-fineprint{font-size:12.5px;color:#6E6A8A;margin:18px 0 0}

.check{color:#ECA72C;margin-right:8px}
.check.gold{color:#E4D5A6}
.x{color:#6E6A8A;margin-right:8px}
.feat{padding:8px 0;color:#F4F2FF;font-size:14.5px}

.btn{display:block;text-align:center;padding:14px;border-radius:12px;font-weight:600;font-size:14.5px;margin-top:24px;text-decoration:none}
button.btn{width:100%;border:0;font-family:inherit;cursor:pointer}
button.btn:disabled{cursor:wait;opacity:.72}
.btn-ghost{background:#3A2D48;color:#F4F2FF;border:1px solid rgba(255,255,255,.08)}
.btn-gold{background:#E4D5A6;color:#2E2440;font-weight:700}
.btn-supporter{background:rgba(251,207,232,.12);border:1px solid rgba(251,207,232,.25)!important;color:#FBCFE8;font-weight:700}
.checkout-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px}
.checkout-actions .btn{margin-top:0}
.checkout-note{font-size:13px;color:#6E6A8A;margin:14px 0 0}
.checkout-overlay{position:fixed;inset:0;display:grid;place-items:center;background:rgba(34,30,34,.86);backdrop-filter:blur(14px);z-index:100;padding:20px}
.checkout-modal{width:min(420px,100%);background:#31263E;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:28px;box-shadow:0 30px 90px -35px rgba(236,167,44,.5)}
.checkout-modal h2{margin:0 0 8px;font-size:32px}
.checkout-modal p{margin:0 0 20px;font-size:14px}
.checkout-modal label{display:block;margin-top:14px;color:#F4F2FF;font-size:13px;font-weight:600}
.checkout-modal label span{display:block;margin-bottom:7px}
.checkout-modal input{width:100%;height:44px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:#221E22;color:#F4F2FF;padding:0 12px;font:inherit}
.checkout-modal input:focus{outline:2px solid #ECA72C;outline-offset:2px}
.checkout-error{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.26);color:#FCA5A5;border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:14px}

details{border-bottom:1px solid rgba(255,255,255,.08);padding:18px 0}
details summary{cursor:pointer;color:#F4F2FF;font-size:17px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";color:#ECA72C;font-size:20px;font-weight:300;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p{margin-top:14px}

.back{color:#A6A2C2;font-size:13px;margin-bottom:24px;display:inline-flex;gap:6px}
.pill{display:inline-block;background:#3A2D48;color:#F4F2FF;border-radius:999px;padding:4px 10px;font-size:12px;font-family:ui-monospace,monospace;border:1px solid rgba(255,255,255,.08)}

hr{border:0;border-top:1px solid rgba(255,255,255,.08);margin:48px 0}

.footer{text-align:center;padding:40px 36px;color:#6E6A8A;font-size:13px;border-top:1px solid rgba(255,255,255,.08)}

@media (max-width: 760px){
  .nav{grid-template-columns:1fr;padding:14px 20px;gap:10px;justify-items:center}
  .brand{font-size:19px}
  .nav-links{display:flex;grid-column:1;gap:18px;justify-content:center;flex-wrap:wrap;width:100%;font-size:13px}
  .nav-links a{display:inline-flex;align-items:center;min-height:32px}
  .wrap{padding:56px 20px 90px}
  h1{font-size:clamp(40px,12vw,58px);letter-spacing:-1px}
  h2{font-size:28px}
  .lead{font-size:17px}
  .grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .card{padding:24px}
  .price{font-size:48px}
  .checkout-actions{grid-template-columns:1fr}
  .footer{padding:32px 20px;line-height:1.8}
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}
}
