.membership-main{box-sizing:border-box;width:100%;max-width:none;padding-right:clamp(24px,4vw,64px);padding-bottom:64px}.membership-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:20px;padding:28px 0 22px;border-bottom:1px solid var(--line)}.membership-hero h1{margin:5px 0 9px;font-size:34px;letter-spacing:0}.membership-hero p{max-width:720px;margin:0;color:var(--muted);font-size:13px;line-height:1.75}.membership-billing-toggle{display:flex;flex:0 0 auto;padding:3px;border:1px solid var(--line);border-radius:8px;background:var(--surface-muted)}.membership-billing-toggle button{min-height:35px;padding:0 13px;border:0;border-radius:6px;background:transparent;color:var(--muted);font-weight:750;cursor:pointer}.membership-billing-toggle button.active{background:var(--surface);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08)}.membership-billing-toggle small{color:var(--accent)}.membership-current{margin-bottom:30px}.membership-current-card{display:grid;grid-template-columns:minmax(210px,.8fr) repeat(3,minmax(150px,.6fr)) auto;align-items:center;gap:18px;padding:20px 22px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.membership-current-card>div{min-width:0}.membership-current-card span,.membership-current-card small{display:block;color:var(--muted);font-size:10px}.membership-current-card strong{display:block;margin-top:5px;font-size:18px}.membership-current-card .current-plan strong{font-size:23px}.membership-plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:17px 0 30px}.membership-plan{position:relative;display:flex;min-width:0;min-height:430px;flex-direction:column;padding:21px;border:1px solid var(--line);border-radius:8px;background:var(--surface);box-shadow:0 3px 14px rgba(20,32,49,.035)}.membership-plan.is-featured{border-color:color-mix(in srgb,var(--accent) 65%,var(--line));box-shadow:0 10px 28px color-mix(in srgb,var(--accent) 12%,transparent)}.membership-plan-badge{position:absolute;top:14px;right:14px;padding:5px 7px;border-radius:5px;background:color-mix(in srgb,var(--accent) 12%,var(--surface));color:var(--accent);font-size:9px;font-weight:850}.membership-plan h3{margin:0 0 7px;font-size:20px}.membership-plan>p{min-height:42px;margin:0;color:var(--muted);font-size:11px;line-height:1.65}.membership-price{display:flex;align-items:baseline;gap:5px;margin:19px 0 5px}.membership-price strong{font-size:30px}.membership-price span{color:var(--muted);font-size:11px}.membership-points{margin-bottom:16px;color:var(--accent);font-size:11px;font-weight:800}.membership-benefits{display:grid;gap:0;margin:0 0 20px;padding:0;list-style:none}.membership-benefits li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:10px}.membership-benefits b{color:var(--ink);font-weight:750;text-align:right}.membership-plan .button{width:100%;margin-top:auto}.membership-plan .button[disabled]{opacity:.5}.membership-ledger-panel{padding:22px}.membership-ledger-head,.membership-ledger-row{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;align-items:center;gap:14px}.membership-ledger-head{padding:9px 12px;color:var(--muted);font-size:9px;font-weight:800}.membership-ledger-row{padding:14px 12px;border-top:1px solid var(--line);font-size:11px}.membership-ledger-row small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.membership-loading,.membership-empty{padding:28px;color:var(--muted);text-align:center}.membership-dialog{width:min(520px,calc(100vw - 28px));padding:0;border:0;border-radius:8px;background:var(--surface);color:var(--ink);box-shadow:0 24px 70px rgba(6,13,25,.3)}.membership-dialog::backdrop{background:rgba(8,16,29,.6);backdrop-filter:blur(3px)}.membership-dialog form{display:grid;gap:18px;padding:23px}.membership-dialog header,.membership-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.membership-dialog h2{margin:4px 0 0}.membership-dialog header button{width:32px;height:32px;border:1px solid var(--line);border-radius:6px;background:var(--surface-muted);color:var(--muted);font-size:20px;cursor:pointer}.membership-confirm-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.membership-confirm-summary span{padding:13px;border:1px solid var(--line);border-radius:7px;background:var(--surface-muted);color:var(--muted);font-size:9px}.membership-confirm-summary b{display:block;margin-top:5px;color:var(--ink);font-size:13px}.membership-dialog output{min-height:15px;color:var(--danger);font-size:10px}@media(max-width:1180px){.membership-plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.membership-current-card{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.membership-main{padding-right:18px}.membership-hero{align-items:flex-start;flex-direction:column}.membership-billing-toggle{width:100%}.membership-billing-toggle button{flex:1}.membership-plan-grid{grid-template-columns:1fr}.membership-plan{min-height:0}.membership-current-card{grid-template-columns:1fr}.membership-ledger-head{display:none}.membership-ledger-row{grid-template-columns:1fr 1fr}.membership-confirm-summary{grid-template-columns:1fr}}
.membership-subscription-panel{margin-top:12px;padding:22px;border:1px solid var(--line);border-radius:8px;background:var(--surface)}.membership-subscription-panel>header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:18px;border-bottom:1px solid var(--line)}.membership-subscription-panel h2{margin:4px 0 6px;font-size:20px;letter-spacing:0}.membership-subscription-panel header p:not(.eyebrow),.membership-subscription-panel>footer p{margin:0;color:var(--muted);font-size:11px;line-height:1.65}.membership-subscription-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;padding:18px 0}.membership-subscription-grid>div{min-width:0;padding:0 18px;border-right:1px solid var(--line)}.membership-subscription-grid>div:first-child{padding-left:0}.membership-subscription-grid>div:last-child{padding-right:0;border-right:0}.membership-subscription-grid span,.membership-subscription-grid strong{display:block}.membership-subscription-grid span{color:var(--muted);font-size:10px}.membership-subscription-grid strong{margin-top:6px;overflow-wrap:anywhere;font-size:15px}.membership-subscription-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:17px;border-top:1px solid var(--line)}.membership-subscription-panel>footer p{max-width:720px}.membership-subscription-panel>footer .button{flex:0 0 auto}.membership-renewal-status.is-warning{color:#9a641a;background:color-mix(in srgb,#c78324 12%,var(--surface))}.membership-renewal-status.is-neutral{color:var(--muted);background:var(--surface-muted)}@media(max-width:850px){.membership-subscription-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 0}.membership-subscription-grid>div:nth-child(2){border-right:0}.membership-subscription-grid>div:nth-child(3){padding-left:0}}@media(max-width:600px){.membership-subscription-panel>header,.membership-subscription-panel>footer{align-items:flex-start;flex-direction:column}.membership-subscription-grid{grid-template-columns:1fr}.membership-subscription-grid>div{padding:12px 0;border-right:0;border-bottom:1px solid var(--line)}.membership-subscription-grid>div:last-child{border-bottom:0}.membership-subscription-panel>footer .button{width:100%}}
.membership-redeem-panel{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px}.membership-redeem-panel h2{margin:4px 0 7px;font-size:18px}.membership-redeem-panel p{max-width:660px;margin:0;color:#6f7d8e;font-size:11px;line-height:1.65}.membership-redeem-panel form{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:8px;min-width:min(420px,100%)}.membership-redeem-panel output{grid-column:1/-1;min-height:17px;color:#677587;font-size:10px}.membership-redeem-panel output[data-state="success"]{color:#23704f}.membership-redeem-panel output[data-state="error"]{color:#ae4138}@media(max-width:820px){.membership-redeem-panel{align-items:stretch;flex-direction:column}.membership-redeem-panel form{min-width:0}}@media(max-width:520px){.membership-redeem-panel form{grid-template-columns:1fr}}

.membership-source-block{display:grid;justify-items:start;gap:4px;margin-top:8px}.membership-source-badge{display:inline-flex;align-items:center;padding:4px 9px;border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));border-radius:5px;background:color-mix(in srgb,var(--accent) 13%,var(--surface));color:var(--accent);font-size:10px;font-weight:850;line-height:1.1}.membership-source-name{margin-top:0!important;color:var(--ink);font-size:14px!important;line-height:1.3}.membership-source-meta{display:flex!important;align-items:center;gap:9px;margin-top:0!important;font-size:10px!important;line-height:1.35}.membership-source-meta i{color:#23704f;font-style:normal;font-weight:800}.membership-source-meta b{color:var(--muted);font-weight:650}.membership-source-meta.is-subscription{margin-top:5px!important}@media(max-width:700px){.membership-source-name{font-size:13px!important}}
.membership-billing-control{display:flex;align-items:center;gap:9px;flex:0 0 auto}.membership-billing-label{color:var(--muted);font-size:10px;font-weight:800;white-space:nowrap}.membership-promotion-note{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--line));border-radius:5px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--accent);font-size:11px;font-weight:800;white-space:nowrap}.membership-promotion-note::before{content:'✦';margin-right:5px;font-size:12px}@media(max-width:700px){.membership-billing-control{width:100%;flex-wrap:wrap;gap:7px}.membership-billing-label{width:100%}.membership-billing-toggle{flex:1}.membership-billing-toggle button{flex:1}.membership-promotion-note{font-size:10px}}
/* Give the redemption panel and plan chooser a clear vertical rhythm. */
#membership-plans { margin-top: 55px; }
#membership-plans .section-toolbar { margin-bottom: 20px; }

/* Match the employee studio scroll contract exactly: the viewport owns the
   shell, while the sidebar and content each own their own scroll position. */
@media (min-width: 961px) {
  body.center-shell.ui-member-page {
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  body.center-shell.ui-member-page > header.nav {
    box-sizing: border-box;
    height: 76px;
    min-height: 76px;
  }
  body.center-shell.ui-member-page .center-layout {
    display: grid !important;
    grid-template-columns: 238px minmax(0, 1fr) !important;
    height: calc(100dvh - 76px) !important;
    min-height: 0 !important;
    align-items: stretch !important;
    overflow: hidden !important;
  }
  body.center-shell.ui-member-page .center-layout > .side-nav {
    position: relative !important;
    top: auto !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
  body.center-shell.ui-member-page .center-layout > .center-main {
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
  }
}