/* membership_cards.css - the membership plan cards, the comparison table and the join/upgrade
 * dialogs. Loaded by the customer portal (cp_base.html) AND the public website (webfront/page.html)
 * so both surfaces render the identical component (option B of
 * Doc/public_static_pages/.../14-membership-card-unification-options.md).
 */
.mc-head { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; margin:4px 0 var(--cp-gap); }
.mc-head h1, .mc-head h2 { margin:0; font-family:var(--cp-display); }
.mc-head__title { line-height:1.15; }
.mc-head p { margin:6px 0 0; color:var(--cp-ink-soft); }
.mc-toggle { display:inline-flex; padding:4px; border-radius:999px; background:var(--cp-panel-2); border:1px solid var(--cp-border); }
.mc-toggle button { border:0; background:transparent; color:var(--cp-ink-soft); font-weight:700; padding:8px 18px; border-radius:999px; cursor:pointer; font-size:.88rem; }
.mc-toggle button.is-on { background:var(--cp-red); color:#fff; }
.mc-toggle small { font-weight:600; opacity:.85; }
.mc-cards { display:grid; gap:var(--cp-gap); grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-items:stretch; }
.mc-card { position:relative; display:flex; flex-direction:column; gap:12px; padding:clamp(18px,2vw,26px); border-radius:var(--cp-radius); background:var(--cp-panel); border:1px solid var(--cp-border); box-shadow:var(--cp-shadow); }
.mc-card.is-current { border-color:var(--cp-red); }
.mc-card__ribbon { position:absolute; top:14px; right:14px; }
.mc-card h2 { margin:0; font-family:var(--cp-display); font-size:1.35rem; }
/* Description slot: exactly three lines tall (copy is clamped to 96 chars server-side), so the
 * price row of every card in the grid starts on the same horizontal line. */
.mc-card__desc { margin:0; color:var(--cp-ink-soft); font-size:.92rem; line-height:1.45;
  min-height:calc(3 * 1.45em); display:-webkit-box; -webkit-box-orient:vertical;
  -webkit-line-clamp:3; line-clamp:3; overflow:hidden; }
.mc-price { display:flex; align-items:baseline; gap:6px; }
.mc-price b { font-family:var(--cp-display); font-size:2.3rem; line-height:1; }
.mc-price span { color:var(--cp-ink-soft); }
.mc-sub { color:var(--cp-ink-soft); font-size:.86rem; min-height:1.3em; }
.mc-save { color:var(--cp-badge-green-ink); font-weight:700; }
.mc-list { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; flex:1; }
.mc-list li { display:flex; gap:9px; align-items:flex-start; font-size:.92rem; }
.mc-list li svg { width:18px; height:18px; flex:0 0 18px; color:var(--cp-badge-green-ink); margin-top:1px; }
.mc-list__lead { font-weight:700; }
.mc-list__lead svg { color:var(--cp-red); }
.mc-card .cp-btn { justify-content:center; width:100%; }
.mc-card.is-selected { border-color:var(--cp-badge-green-ink); box-shadow:0 0 0 2px var(--cp-badge-green-bg), var(--cp-shadow); }
.mc-alert { padding:10px 14px; border-radius:var(--cp-radius-sm); background:var(--cp-badge-red-bg); color:var(--cp-badge-red-ink); margin:0 0 14px; }

/* Comparison table — dissolves in on scroll; scrolls sideways on narrow screens. */
.cmp { margin:calc(var(--cp-gap) * 2.6) 0 var(--cp-gap); opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.cmp.is-in { opacity:1; transform:none; }
.cmp tbody tr { opacity:0; transition:opacity .55s ease; }
.cmp.is-in tbody tr { opacity:1; }
.cmp.is-in tbody tr:nth-child(1){transition-delay:.12s}
.cmp.is-in tbody tr:nth-child(2){transition-delay:.18s}
.cmp.is-in tbody tr:nth-child(3){transition-delay:.24s}
.cmp.is-in tbody tr:nth-child(4){transition-delay:.30s}
.cmp.is-in tbody tr:nth-child(5){transition-delay:.36s}
.cmp.is-in tbody tr:nth-child(6){transition-delay:.42s}
.cmp.is-in tbody tr:nth-child(7){transition-delay:.48s}
.cmp.is-in tbody tr:nth-child(8){transition-delay:.54s}
.cmp.is-in tbody tr:nth-child(9){transition-delay:.60s}
.cmp.is-in tbody tr:nth-child(10){transition-delay:.66s}
.cmp.is-in tbody tr:nth-child(11){transition-delay:.72s}
.cmp.is-in tbody tr:nth-child(12){transition-delay:.78s}
.cmp.is-in tbody tr:nth-child(n+13){transition-delay:.84s}
.cmp-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.cmp-head h2 { margin:0; font-family:var(--cp-display); font-size:1.4rem; }
/* #compare: anchor target for "compare plans" buttons - clear the sticky site header. */
#compare { scroll-margin-top:calc(var(--ss-header-h, 76px) + 16px); }
.cmp-hint { margin:0; color:var(--cp-ink-soft); font-size:.82rem; display:none; }
/* position:relative keeps the absolute .cp-sr-only labels inside the scroller (else they widen the page). */
.cmp-wrap { position:relative; overflow-x:auto; border:1px solid var(--cp-border); border-radius:var(--cp-radius); background:var(--cp-panel); box-shadow:var(--cp-shadow); -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; }
.cmp-table { width:100%; border-collapse:collapse; min-width:520px; }
.cmp-table th, .cmp-table td { padding:12px 14px; text-align:center; border-bottom:1px solid var(--cp-border); }
.cmp-table thead th { position:sticky; top:0; z-index:3; vertical-align:bottom; background-color:var(--cp-base); background-image:linear-gradient(var(--cp-panel-strong), var(--cp-panel-strong)); }
.cmp-feat { position:sticky; left:0; z-index:2; text-align:left !important; font-weight:600; color:var(--cp-ink); box-shadow:1px 0 0 var(--cp-border); min-width:150px; background-color:var(--cp-base); background-image:linear-gradient(var(--cp-panel-strong), var(--cp-panel-strong)); }
.cmp-table thead .cmp-feat { z-index:4; }
.cmp-col { scroll-snap-align:end; min-width:116px; }
.cmp-col__name { display:block; font-family:var(--cp-display); font-size:1.02rem; }
.cmp-col__price { display:block; color:var(--cp-ink-soft); font-size:.82rem; font-weight:600; margin-top:2px; }
.cmp-col.is-current { background:color-mix(in srgb, var(--cp-red) 10%, transparent); box-shadow:inset 0 2px 0 var(--cp-red); }
.cmp-group th { text-align:left !important; font-size:.76rem; letter-spacing:.06em; text-transform:uppercase; color:var(--cp-ink-soft); font-weight:700; background-color:var(--cp-base); background-image:linear-gradient(var(--cp-panel-2), var(--cp-panel-2)); }
.cmp-cell svg { width:19px; height:19px; color:var(--cp-badge-green-ink); }
.cmp-val { font-weight:600; font-size:.9rem; }
.cmp-dash { color:var(--cp-ink-soft); }
.cp-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
@media (max-width: 640px) {
    .cmp-hint { display:block; }
    .cmp-table th, .cmp-table td { padding:10px 11px; }
    .cmp-col { min-width:108px; }
}
@media (prefers-reduced-motion: reduce) {
    .cmp { transition:none; opacity:1; transform:none; }
    .cmp tbody tr { transition:none; opacity:1; }
}
.mc-dialog { border:1px solid var(--cp-border); border-radius:var(--cp-radius); background:var(--cp-panel-strong); color:var(--cp-ink); padding:0; width:min(520px, 94vw); box-shadow:var(--cp-shadow); }
.mc-dialog::backdrop { background:rgba(0,0,0,.6); }
.mc-dialog__body { padding:22px 24px; display:flex; flex-direction:column; gap:12px; }
.mc-dialog h3 { margin:0; font-family:var(--cp-display); }
.mc-dialog h3:focus { outline:none; }
.mc-terms { width:100%; border-collapse:collapse; }
.mc-terms td { padding:7px 0; border-bottom:1px solid var(--cp-border); }
.mc-terms td:last-child { text-align:right; font-weight:600; }
.mc-terms tr.is-total td { border-bottom:0; font-size:1.05rem; }
.mc-terms tr.is-discount td { color:var(--cp-badge-green-ink); }
/* Optional coupon: quiet row, input at most ~30% of the dialog, extra air above and below. */
.mc-coupon { display:flex; flex-direction:column; gap:6px; margin:8px 0 10px; }
.mc-coupon[hidden] { display:none; }
.mc-coupon__row { display:flex; align-items:center; gap:8px; }
.mc-coupon__label { flex:1 1 auto; min-width:0; font-size:.86rem; color:var(--cp-ink-soft); }
.mc-coupon__label span { display:block; font-size:.78rem; opacity:.8; }
.mc-coupon__row input { flex:0 0 30%; width:30%; min-width:6.5rem; padding:6px 10px; border-radius:var(--cp-radius-sm); border:1px solid var(--cp-border); background:transparent; color:var(--cp-ink); font:inherit; font-size:.86rem; text-transform:uppercase; letter-spacing:.04em; box-shadow:none; }
.mc-coupon__row input::placeholder { color:var(--cp-ink-soft); opacity:.7; text-transform:none; letter-spacing:normal; }
.mc-coupon__row input:focus { outline:none; border-color:var(--cp-border-strong); }
.mc-coupon__row input:focus-visible { box-shadow:0 0 0 2px var(--cp-border); }
.mc-coupon__apply { padding:6px 12px; font-size:.82rem; font-weight:600; border-radius:var(--cp-radius-sm); }
.mc-points { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.mc-points li { position:relative; padding-left:16px; color:var(--cp-ink-soft); font-size:.86rem; line-height:1.4; }
.mc-points li::before { content:''; position:absolute; left:3px; top:.55em; width:5px; height:5px; border-radius:50%; background:currentColor; opacity:.7; }
.mc-note { color:var(--cp-ink-soft); font-size:.86rem; margin:0; }
.mc-note--ok { color:var(--cp-badge-green-ink); }
.mc-note--err { color:var(--cp-badge-red-ink); }
.mc-consent { display:flex; gap:9px; align-items:flex-start; font-size:.9rem; }
.mc-radio { display:flex; gap:16px; flex-wrap:wrap; font-size:.92rem; }
.mc-actions { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; }
.mc-card .cp-btn { white-space:nowrap; }
.mc-pending { display:flex; gap:10px; flex-wrap:wrap; margin:-6px 0 14px; }
.mc-ok { padding:10px 14px; border-radius:var(--cp-radius-sm); background:var(--cp-badge-green-bg); color:var(--cp-badge-green-ink); margin:0 0 14px; }