.customer-card { position:relative; padding-right:38px; }
.customer-card .customer-arrow { position:absolute; right:14px; bottom:13px; }
.customer-card.is-solved { border-color:#477c60; background:#1c322b; }
.customer-card.is-solved:hover { border-color:#88c7a3; background:#254234; }
.customer-card.is-solved[aria-current] { border-color:#77b594; background:#223d30; box-shadow:inset 3px 0 var(--amber); }
.customer-complete { position:absolute; right:11px; top:11px; display:grid; place-items:center; width:21px; height:21px; border-radius:50%; color:#143325; background:#9bd4ae; }
.customer-complete svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.case-pack-preview { margin-top:28px; padding-top:23px; border-top:1px solid var(--line); }
#dialog-content .case-pack-preview > .eyebrow { color:var(--amber); font-size:.75rem; margin:0 0 7px; }
.case-pack-preview h3 { font-size:1.8rem; }
#dialog-content .case-pack-preview > p:not(.eyebrow) { font-size:.875rem; line-height:1.6; margin:10px 0 16px; }
.case-pack-teasers { display:grid; gap:11px; position:relative; }
.case-pack-teasers::after { content:""; position:absolute; inset:14% -1px -1px; background:linear-gradient(to bottom,#1b242b00 0%,#1b242b45 35%,#1b242bdc 88%,#1b242b 100%); pointer-events:none; }
.case-pack-card { position:relative; width:100%; min-width:0; border:1px solid #54636b; border-radius:7px; padding:16px 14px; background:#27323a; text-align:left; }
.case-pack-card:focus-visible { z-index:1; outline-offset:2px; }
.case-pack-card:hover { border-color:var(--amber); }
.case-pack-blur { display:flex; gap:14px; padding-right:13px; filter:blur(3px); opacity:.72; pointer-events:none; user-select:none; }
.case-pack-blur > img { flex:0 0 82px; width:82px; height:76px; object-fit:cover; border-radius:4px; }
.case-pack-blur > span { min-width:0; display:grid; gap:6px; }
.case-pack-blur strong { font:600 1.5rem/1.15 var(--heading); }
.case-pack-blur small { font:500 .75rem var(--mono); }
.case-pack-blur span span { font-size:.875rem; line-height:1.4; color:var(--muted); }
.case-pack-lock { position:absolute; right:11px; top:11px; width:27px; height:27px; border-radius:50%; display:grid; place-items:center; background:#151e24; color:var(--amber); }
.case-pack-lock svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.preview-badge { display:inline-block; padding:5px 9px; margin:0 0 15px; border:1px solid #816a36; color:#f4ce75; background:#342f23; border-radius:4px; font:500 .75rem var(--mono); }
.membership-offer { margin:21px 0; padding:21px; border:1px solid #ad8a3c; border-radius:9px; background:#302c20; display:grid; gap:5px; text-align:center; }
.membership-offer > strong { font:600 2.5rem/1.15 var(--heading); }
.membership-offer > span { font-size:1rem; color:#e2d9c2; }
#dialog-content .membership-preview ul { padding-left:20px; }
#dialog-content .membership-preview li { font-size:.9375rem; }
#dialog-content .membership-renewal { font-size:.875rem; line-height:1.65; }
#dialog-content .membership-demo { padding:13px 15px; margin-top:18px; border:1px solid #52636e; border-radius:6px; background:#142129; font-size:.875rem; line-height:1.6; }
.membership-receipt { margin:20px 0; }
.membership-receipt > div { display:flex; gap:18px; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); }
.membership-receipt dt { font-size:.875rem; }
.membership-receipt dd { margin:0; font:500 .9375rem var(--mono); text-align:right; flex:0 0 auto; }