.epic-membership { --membership-border:var(--border,#d2d8e2); --membership-surface:var(--surface,#fff); --membership-ink:var(--text,var(--ink,#202636)); color:var(--membership-ink); line-height:1.55; min-width:0; overflow-wrap:anywhere; }
.epic-membership *, .epic-membership *::before, .epic-membership *::after { box-sizing:border-box; }
.epic-membership h2 { font-size:1.7rem; margin:.15rem 0; }
.epic-membership h3 { font-size:1.2rem; margin:0 0 .5rem; }
.epic-membership h4 { font-size:1rem; margin:0 0 .4rem; }
.epic-membership p { margin:.45rem 0; }
.epic-membership__header { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; flex-wrap:wrap; }
.epic-membership__eyebrow { text-transform:uppercase; letter-spacing:.1em; font-size:.75rem; font-weight:700; }
.epic-membership__account, .epic-membership__fine { font-size:.85rem; }
.epic-membership__intro { max-width:78ch; padding-block:.6rem; }
.epic-membership__actions, .epic-membership__feature-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.epic-membership__link, .epic-membership__button { display:inline-flex; align-items:center; justify-content:center; min-height:44px; border:1px solid var(--membership-border); border-radius:.6rem; padding:.55rem .8rem; font:inherit; color:inherit; background:transparent; text-decoration:none; cursor:pointer; text-align:center; white-space:normal; max-width:100%; }
.epic-membership__button:disabled { cursor:not-allowed; opacity:.7; }
.epic-membership a:focus-visible, .epic-membership button:focus-visible, .epic-membership__plan:focus { outline:3px solid currentColor; outline-offset:3px; }
.epic-membership__current, .epic-membership__billing, .epic-membership__usage { padding:1rem; border:1px solid var(--membership-border); border-radius:.8rem; margin-block:1rem; }
.epic-membership__current { border-inline-start:4px solid currentColor; }
.epic-membership__plans { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-block:1rem; }
.epic-membership__plan { min-width:0; padding:1rem; border:1px solid var(--membership-border); border-radius:.85rem; display:flex; flex-direction:column; gap:.4rem; }
.epic-membership__plan[data-current=true] { border:2px solid currentColor; }
.epic-membership__plan h4 { font-size:1.3rem; }
.epic-membership__plan > button { margin-top:auto; width:100%; }
.epic-membership__badge, .epic-membership__state { display:inline-block; padding:.25rem .55rem; border:1px solid var(--membership-border); border-radius:.5rem; font-size:.78rem; align-self:flex-start; }
.epic-membership__price { font-weight:700; }
.epic-membership__benefits { padding-left:1.15rem; margin:.5rem 0; font-size:.9rem; }
.epic-membership__benefits li { margin-bottom:.45rem; }
.epic-membership__planned { font-size:.8rem; }
.epic-membership__facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem 1.5rem; margin:.7rem 0; }
.epic-membership__facts div { min-width:0; }
.epic-membership__facts dt { font-size:.8rem; }
.epic-membership__facts dd { margin:0; font-weight:600; }
.epic-membership progress { width:100%; height:.7rem; }
.epic-membership__feature { display:grid; grid-template-columns:minmax(0,1fr) minmax(9rem,.6fr); gap:1.5rem; padding:1rem 0; border-bottom:1px solid var(--membership-border); }
.epic-membership__feature-actions { align-content:center; }
.epic-membership__warning { font-weight:600; }
.epic-mobile-membership { box-sizing:border-box; width:100vw; max-width:100vw; height:100dvh; max-height:100dvh; margin:0; padding:calc(16px + env(safe-area-inset-top)) 18px calc(24px + env(safe-area-inset-bottom)); border:0; overflow:auto; background:var(--surface,#fff); color:var(--ink,#202636); font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif; }
.epic-mobile-membership > button { min-height:44px; margin-bottom:1rem; }
.epic-mobile-membership .epic-membership__plans { grid-template-columns:1fr; }
@media(max-width:1000px) { .epic-membership__plans { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:540px) { .epic-membership__plans, .epic-membership__facts, .epic-membership__feature { grid-template-columns:1fr; } .epic-membership__actions { width:100%; } .epic-membership__actions > * { flex:1 1 100%; } .epic-membership__feature { gap:.75rem; } }