/* The membership action stays visible while the program details scroll. */
.design-lab-page .purchase-dialog { height:100dvh; min-height:0; max-height:100dvh; overflow:hidden; }
.design-lab-page .purchase-dialog[open] { display:flex; flex-direction:column; }
.design-lab-page .membership-scroll { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable; }
.design-lab-page .drawer-image { height:clamp(150px,25dvh,230px); }
.design-lab-page .drawer-content { padding:28px 32px; }
.design-lab-page .drawer-content h2 { margin:10px 0 20px; }
.design-lab-page .drawer-content > p { font-size:1rem; line-height:1.6; }
.design-lab-page .membership-list { display:grid; gap:16px; margin:24px 0; font-size:1rem; }
.design-lab-page .membership-list li { display:flex; gap:12px; align-items:flex-start; }
.design-lab-page .membership-list i { color:var(--lime); margin-top:4px; }
.design-lab-page .membership-checkout { flex:0 0 auto; padding:16px 24px max(16px,env(safe-area-inset-bottom)); background:#090909; border-top:1px solid var(--line); }
.design-lab-page .membership-checkout p { margin-top:10px; font-size:.875rem; line-height:1.4; text-align:center; }
.design-lab-page .membership-checkout .button { min-height:56px; justify-content:center; flex-direction:column; gap:4px; }
.design-lab-page .checkout-button-price { font-size:.875rem; font-weight:500; }
.design-lab-page .hero-price strong,.design-lab-page .offer-price strong { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 14px; }
.design-lab-page .hero-price strong .membership-name,.design-lab-page .offer-price strong .membership-name { font-size:.875rem; font-weight:500; letter-spacing:0; }
.design-lab-page .hero-price strong .membership-amount,.design-lab-page .offer-price strong .membership-amount { font-size:1.8rem; font-weight:700; letter-spacing:-.05em; }
.design-lab-page .drawer-price { margin:0 0 20px; padding:0 0 20px; align-items:baseline; }
.design-lab-page .drawer-price strong { font-size:1.5rem; }
.design-lab-page .purchase-dialog::backdrop { background:#000b; }
.design-lab-page .purchase-dialog .dialog-close { background:#090909; color:#f2f2f2; border:1px solid #444; }
.design-lab-page .drawer-content .drawer-back { margin:8px 0 0; }
.design-lab-page .hero-price > span { max-width:290px; }
.design-lab-page .preview-bottom { flex-wrap:wrap; }
.design-lab-page .text-button { max-width:100%; white-space:normal; }
@media(max-width:767px) {
  .design-lab-page .drawer-content { padding:24px 20px; }
  .design-lab-page .membership-checkout { padding-inline:20px; }
  .design-lab-page .sticky-buy > div { min-width:0; }
  .design-lab-page .sticky-buy > div > span { max-width:170px; }
}