/* Local spec preview: About Us capability layout and 440px mobile baseline.
   Keep membership.html unchanged for comparison. */
.membership-page .membership-all-plans ul { gap:40px; padding:0; margin:0; }
.membership-page .membership-all-plans { margin-top:var(--spec-module-gap); }
.membership-page .membership-all-plans > h2 { font-size:22px; line-height:30px; margin-bottom:24px; }
.membership-page .membership-all-plans li { display:flex; flex-direction:column; align-items:center; gap:0; text-align:center; max-width:300px; width:100%; margin:0 auto; }
.membership-page .membership-all-plans li svg { width:32px; height:32px; margin:0 0 16px; stroke-width:1.5; }
.membership-page .membership-all-plans li h3 { margin:0 0 8px; font-size:22px; line-height:33px; font-weight:600; color:var(--color-text-main); }
.membership-page .membership-all-plans li p { margin:0; font-size:14px; line-height:21px; font-weight:600; color:var(--color-text-muted); }
.membership-page .membership-ai-prompt { display:none; }
/* Match the current Black Friday FAQ's collapsed and expanded states. */
.membership-page #faq .section-heading h2 { color:#191c1d; }
.membership-page #faq .faq-item button,
.membership-page #faq .faq-item button svg,
.membership-page #faq .faq-answer p,
.membership-page #faq .membership-support { color:#667085; }
.membership-page #faq .faq-item button:hover,
.membership-page #faq .faq-item.open button,
.membership-page #faq .faq-item.open button svg { color:#281808; }
.membership-card-controls { display:none; }
.membership-card-controls[hidden] { display:none !important; }
.membership-plan-group { box-sizing:border-box; padding:24px; background:#f3f4f6; border-radius:24px; }
.membership-plan-group .membership-card { border:0; box-shadow:none; }
.membership-plan-group .membership-all-plans { margin-top:24px; }
.membership-plan-group .membership-all-plans > h2 { text-align:center; }
.membership-plan-group .membership-feature-note { text-align:left; }
.membership-plan-group .membership-all-plans ul { gap:18px 20px; }
.membership-plan-group .membership-all-plans li { flex-direction:row; align-items:flex-start; text-align:left; gap:8px; }
.membership-plan-group .membership-all-plans li svg { width:20px; height:20px; margin:0; }
@media(min-width:769px) {
 .membership-plan-group .membership-grid { gap:12px; }
 .membership-page .site-footer .footer-content-wrap { width:calc(100% - 60px); max-width:1120px !important; padding:0 !important; }
 /* PC update 2026-11-03: section title tier and FAQ content-title tier. */
 .membership-page main .section-heading :is(h1,h2) { line-height:54px; }
 .membership-page .membership-all-plans ul { grid-template-columns:repeat(4,minmax(0,1fr)); }
 .membership-page #faq .faq-item button { font-size:22px; line-height:33px; }
 .membership-page .site-footer hr.footer-divider { width:100% !important; max-width:1120px; margin-left:0 !important; margin-right:0 !important; transform:none; }
}
@media(max-width:768px) {
 .membership-plan-group { padding:16px 0 24px; overflow:hidden; }
 .membership-plan-group .membership-all-plans { margin:16px 16px 0; }
 .membership-page main { --spec-section-gap:64px; --spec-module-gap:24px; }
 .membership-page main .container, .membership-page #plans .container { width:calc(100% - 60px); max-width:380px; }
 .membership-page main .section-heading { gap:8px; }
 .membership-page main .section-heading :is(h1,h2,p), .membership-page .membership-all-plans > h2 { text-box-trim:none; }
 .membership-page .membership-overview { padding-top:48px; }
 .membership-page .membership-period { margin-bottom:24px; }
 .membership-page .membership-period-option { min-width:0; padding:8px 20px; min-height:37px; box-shadow:none; border-width:1px; }
 .membership-page .membership-grid {
  --membership-card-width:min(320px, calc(100vw - 120px));
  display:flex; gap:12px; width:100%; max-width:none;
  padding-inline:calc((100% - var(--membership-card-width)) / 2);
  box-sizing:border-box; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory; scroll-padding-inline:calc((100% - var(--membership-card-width)) / 2);
  overscroll-behavior-inline:contain; scrollbar-width:none;
 }
 .membership-page .membership-grid::-webkit-scrollbar { display:none; }
 .membership-page .membership-grid .membership-card { flex:0 0 var(--membership-card-width); scroll-snap-align:center; scroll-snap-stop:always; }
 .membership-page .membership-card-controls { display:flex; justify-content:center; gap:16px; margin-top:12px; }
 .membership-page .membership-card-control { display:grid; place-items:center; width:48px; height:48px; padding:0; border:0; border-radius:50%; background:#fff; color:#191c1d; cursor:pointer; }
 .membership-page .membership-card-control:disabled { opacity:.4; cursor:default; }
 .membership-page .membership-card { padding:32px 20px 20px; border-radius:24px; }
 .membership-page .membership-plan-heading { min-height:0; }
 .membership-page .membership-plan-icon { width:40px; height:40px; }
 .membership-page .membership-badge { right:20px; width:58px; height:62px; background:#b7741a; font-size:12px; line-height:18px; }
 .membership-page .membership-price { margin-top:16px; }
 .membership-page .membership-billing { margin-top:4px; }
 .membership-page .membership-benefits { margin:24px 0; gap:12px; }
 .membership-page main .membership-actions .btn { height:44px; min-height:44px; padding:10px 20px; }
 .membership-page .membership-included { min-height:50px; justify-content:center; }
 .membership-page .membership-compare-link { margin-top:24px; gap:6px; }
 .membership-page .membership-all-plans > h2 { font-size:18px; line-height:26px; margin-bottom:16px; }
 .membership-page .membership-all-plans ul { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 16px; }
 .membership-plan-group .membership-all-plans li { flex-direction:column; align-items:center; text-align:center; gap:12px; }
 .membership-plan-group .membership-all-plans li svg { width:24px; height:24px; margin:0; }
 .membership-page .membership-all-plans li h3 { font-size:14px; line-height:21px; margin-bottom:8px; }
 .membership-page .membership-all-plans li p { font-size:14px; line-height:21px; }
 .membership-page .membership-feature-note { margin-top:24px; }
 .membership-page #plans .section-heading { margin-left:0; margin-right:0; }
 .membership-page #plans .membership-plan-table th:first-child { width:28%; }
 .membership-page #plans .membership-plan-table th:not(:first-child) { width:24%; }
 .membership-page #plans .membership-plan-table :is(th,td) { padding:12px 2px; min-height:40px; word-break:normal; overflow-wrap:anywhere; }
 .membership-page #plans .membership-plan-table :is(th,td):first-child { padding-left:0; padding-right:8px; }
 .membership-page #plans .membership-plan-table small { margin-top:6px; padding:0; }
 .membership-page #plans .membership-plan-table .membership-billing-period,
 .membership-page #plans .membership-plan-table .membership-billing-total { display:block; }
 .membership-page #plans .membership-plan-table .membership-billing-dot { display:none; }
 .membership-page #plans .membership-plan-table .membership-group-row td { height:36px; padding-top:7px; padding-bottom:7px; }
 .membership-page #plans .membership-plan-footnote { margin:16px 0 0; }
 .membership-page #faq .section-heading { margin-bottom:32px; }
 .membership-page .faq-item button { padding-top:16px; padding-bottom:16px; gap:12px; line-height:21px; }
 .membership-page .faq-item:first-child button { padding-top:0; }
 .membership-page .faq-item button svg { width:16px; height:16px; }
 .membership-page .membership-support { margin-top:32px; }
 .membership-page .membership-ai-prompt { display:block; margin-top:40px; text-align:center; }
 .membership-page .membership-ai-prompt p { margin:0 0 12px; font-size:14px; line-height:21px; font-weight:600; }
 .membership-page .membership-ai-prompt a { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 16px; border:1px solid var(--color-border); border-radius:12px; color:inherit; font-size:12px; line-height:18px; text-align:left; }
}

/* 2026-11-06: approved imagegen colour study, soft top gradients fading to white. */
.membership-page .membership-plan-group .membership-card {
  --card-mist-left: #edf2f8;
  --card-mist-right: #d3ddeb;
  background:
    radial-gradient(ellipse 100% 36% at 0% 0%, var(--card-mist-left) 0%, transparent 78%),
    radial-gradient(ellipse 110% 38% at 100% 0%, var(--card-mist-right) 0%, transparent 80%),
    #fff;
  border: 1px solid #dce5ee;
}
.membership-page .membership-plan-group .membership-card--premium {
  --card-mist-left: #f0eafa;
  --card-mist-right: #ddcdef;
  border-color: #e0dcf0;
}
.membership-page .membership-plan-group .membership-card--elite {
  --card-mist-left: #fdf5e8;
  --card-mist-right: #f2dfbd;
  border-color: #eadfd7;
}
/* Shared neutral glass finish over each card's own gradient. */
.membership-page .membership-plan-icon {
  box-sizing: border-box;
  color: #303642;
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .24));
  border: 1px solid rgb(255 255 255 / .88);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3), 0 4px 12px rgb(36 46 68 / .055);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.membership-page .membership-badge {
  color: #fff;
  background: linear-gradient(155deg, #75539c, #63428e);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  filter: drop-shadow(0 2px 3px rgb(48 55 78 / .06));
}

/* Tier hues remain distinct inside the shared glass frames. */
.membership-page .membership-plan-icon--starter { color: #244f79; }
.membership-page .membership-plan-icon--premium { color: #4f2582; }
.membership-page .membership-plan-icon--elite { color: #986b1d; }

/* Billing tabs: shared site palette, filled pill states. */
.membership-page .membership-period-option.effects-tab {
  background: var(--color-bg-alt);
  color: var(--color-text-main);
  border: 1px solid transparent;
  border-radius: var(--rounded-pill);
  box-shadow: none;
}
.membership-page .membership-period-option.effects-tab:hover {
  background: var(--color-border);
  color: var(--color-text-main);
  border-color: transparent;
}
.membership-page .membership-period-option.effects-tab.active,
.membership-page .membership-period-option.effects-tab[aria-selected="true"] {
  background: var(--color-text-main);
  color: var(--color-bg-base);
  border-color: transparent;
  box-shadow: none;
}
.membership-page .membership-period-option.effects-tab:focus-visible {
  outline: 2px solid var(--color-text-main);
  outline-offset: 3px;
}

/* Keep the comparison and cart aligned with the card palette. */
.membership-page { --tier-blue: #244f79; --tier-purple: #4f2582; --tier-gold: #986b1d; }
.membership-page .membership-plan-group { background: var(--color-bg-alt); }
.membership-page .membership-plan-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.membership-page #plans .membership-plan-header-icon {
  box-sizing: border-box;
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .24));
  border: 1px solid rgb(255 255 255 / .88);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), 0 4px 12px rgb(36 46 68 / .055);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.membership-page #plans .membership-plan-header-icon svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.membership-page #plans th:nth-child(2) { --tier-ink: var(--tier-blue); }
.membership-page #plans th:nth-child(3) { --tier-ink: var(--tier-purple); }
.membership-page #plans th:nth-child(4) { --tier-ink: var(--tier-gold); }
.membership-page #plans th .membership-plan-header-icon,
.membership-page #plans th .membership-plan-header-text strong { color: var(--tier-ink); }
.membership-page #plans td:nth-child(2) .membership-price-val { color: var(--tier-blue); }
.membership-page #plans td:nth-child(3) .membership-price-val { color: var(--tier-purple); }
.membership-page #plans td:nth-child(4) .membership-price-val { color: var(--tier-gold); }
.membership-page #plans .membership-plan-table td .membership-check-icon {
  color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.membership-page #plans td:nth-child(2) .membership-check-icon { background-color: var(--tier-blue); }
.membership-page #plans td:nth-child(3) .membership-check-icon { background-color: var(--tier-purple); }
.membership-page #plans td:nth-child(4) .membership-check-icon { background-color: var(--tier-gold); }
.membership-page #plans .membership-plan-table :is(.membership-unified-highlight-row,.membership-progressive-highlight-row) td:nth-child(2) { background: #edf2f8; }
.membership-page #plans .membership-plan-table :is(.membership-unified-highlight-row,.membership-progressive-highlight-row) td:nth-child(3) { background: #f0eafa; }
.membership-page #plans .membership-plan-table :is(.membership-unified-highlight-row,.membership-progressive-highlight-row) td:nth-child(4) { background: #fdf5e8; }

/* Override legacy table icon selectors as a complete matched heading system. */
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  color: var(--tier-ink);
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .24));
  border: 1px solid rgb(255 255 255 / .88);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3), 0 4px 12px rgb(36 46 68 / .055);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-text strong { color: var(--color-text-main); }

/* Comparison tier accents: matching filled tiles, white outline symbols. */
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  color: #fff;
  background: var(--tier-ink);
  border-color: rgb(255 255 255 / .7);
}
.membership-page #plans .membership-plan-table td:nth-child(2) { --tier-ink: var(--tier-blue); --tier-tint: #edf2f8; }
.membership-page #plans .membership-plan-table td:nth-child(3) { --tier-ink: var(--tier-purple); --tier-tint: #f0eafa; }
.membership-page #plans .membership-plan-table td:nth-child(4) { --tier-ink: var(--tier-gold); --tier-tint: #fdf5e8; }
.membership-page #plans .membership-plan-table tbody td:nth-child(n+2) .membership-price-val { color: var(--tier-ink); }
.membership-page #plans .membership-plan-table tbody td:nth-child(n+2) .membership-check-icon {
  color: #fff;
  background-color: var(--tier-ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.membership-page #plans .membership-plan-table tbody :is(.membership-unified-highlight-row,.membership-progressive-highlight-row) td:not(:first-child) { background: var(--tier-tint); }

/* Soft metallic champagne replaces the former ochre accent. */
.membership-page { --tier-gold: #b09a6b; }
.membership-page .membership-plan-icon--elite { color: #ad9462; }
.membership-page #plans .membership-plan-table tbody td:nth-child(4) .membership-price-val { color: #8c754b; }
.membership-page #plans .membership-plan-table thead th:nth-child(2) { --tile-top: #527ca1; --tile-bottom: #30597f; }
.membership-page #plans .membership-plan-table thead th:nth-child(3) { --tile-top: #8867aa; --tile-bottom: #65418b; }
.membership-page #plans .membership-plan-table thead th:nth-child(4) { --tile-top: #c8b58b; --tile-bottom: #ac9462; }
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  flex-basis: 44px;
  width: 44px;
  height: 44px;
  background: linear-gradient(145deg, var(--tile-top), var(--tile-bottom));
  border-radius: 13px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .65), 0 3px 10px rgb(36 46 68 / .06);
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg { width: 27px; height: 27px; }
@media(max-width:768px) {
  .membership-page #plans .membership-plan-table thead th .membership-plan-header-icon { flex-basis: 34px; width: 34px; height: 34px; border-radius: 10px; }
  .membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg { width: 23px; height: 23px; }
}

/* Coloured glass: keep the original tier hues, with translucent white rims. */
.membership-page { --tier-gold: #986b1d; }
.membership-page .membership-plan-icon--elite { color: var(--tier-gold); }
.membership-page #plans .membership-plan-table tbody td:nth-child(4) .membership-price-val { color: var(--tier-gold); }
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  border: 2px solid transparent;
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--tier-ink) 86%, white) 0%, color-mix(in srgb, var(--tier-ink) 62%, white) 42%, color-mix(in srgb, var(--tier-ink) 20%, white) 83%, rgb(255 255 255 / .88) 100%) padding-box,
    linear-gradient(145deg, color-mix(in srgb, var(--tier-ink) 62%, white) 0%, #fff 24%, rgb(255 255 255 / .95) 57%, color-mix(in srgb, var(--tier-ink) 70%, white) 100%) border-box;
  box-shadow: inset 0 1px 7px rgb(255 255 255 / .55), inset 0 -1px 5px rgb(255 255 255 / .25), 0 3px 9px rgb(36 46 68 / .06);
  color: #fff;
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg {
  filter: drop-shadow(0 1px 2px rgb(0 0 0 / .08));
}

/* Warm red-gold accent, retaining the coloured-glass material. */
.membership-page { --tier-gold: #b58d4d; }
.membership-page .membership-plan-icon--elite { color: var(--tier-gold); }
.membership-page .membership-plan-group .membership-card--elite {
  --card-mist-left: #fdf4e9;
  --card-mist-right: #f1dfc4;
  border-color: #eadfd7;
}
.membership-page #plans .membership-plan-table td:nth-child(4) { --tier-tint: #fbf2e7; }

/* Reuse the coloured glass tiles in overview, cart and comparison headings. */
.membership-page .membership-plan-icon.membership-plan-icon--starter { --tier-ink: var(--tier-blue); color: #fff; }
.membership-page .membership-plan-icon.membership-plan-icon--premium { --tier-ink: var(--tier-purple); color: #fff; }
.membership-page .membership-plan-icon.membership-plan-icon--elite { --tier-ink: var(--tier-gold); color: #fff; }
.membership-page .membership-plan-icon,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  border: 2px solid transparent;
  background:
    radial-gradient(ellipse at 50% 42%, color-mix(in srgb, var(--tier-ink) 86%, white) 0%, color-mix(in srgb, var(--tier-ink) 62%, white) 42%, color-mix(in srgb, var(--tier-ink) 20%, white) 83%, rgb(255 255 255 / .88) 100%) padding-box,
    linear-gradient(145deg, color-mix(in srgb, var(--tier-ink) 62%, white) 0%, #fff 24%, rgb(255 255 255 / .95) 57%, color-mix(in srgb, var(--tier-ink) 70%, white) 100%) border-box;
  box-shadow: inset 0 1px 7px rgb(255 255 255 / .6), inset 0 -1px 5px rgb(255 255 255 / .3), 0 5px 10px rgb(36 46 68 / .12), 0 10px 20px rgb(36 46 68 / .07);
}
.membership-page .membership-plan-icon svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .08)); }
@media(max-width:768px) {
  .membership-page .membership-plan-icon svg { width: 25px; height: 25px; }
}

/* Matching transparent glass tiles with coloured outline symbols. */
.membership-page .membership-plan-icon.membership-plan-icon--starter { color: var(--tier-blue); }
.membership-page .membership-plan-icon.membership-plan-icon--premium { color: var(--tier-purple); }
.membership-page .membership-plan-icon.membership-plan-icon--elite { color: var(--tier-gold); }
.membership-page .membership-plan-icon,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  background: linear-gradient(145deg, rgb(255 255 255 / .84), rgb(255 255 255 / .32));
  border: 1px solid rgb(255 255 255 / .92);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .98), inset 0 -1px 0 rgb(255 255 255 / .4), 0 4px 10px rgb(36 46 68 / .09), 0 8px 18px rgb(36 46 68 / .045);
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon { color: var(--tier-ink); }
.membership-page .membership-plan-icon svg,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg { fill: none; stroke: currentColor; stroke-width: 2; filter: none; }

/* Clear glass material: bright rim, a faint tier tint and soft elevation. */
.membership-page .membership-plan-icon,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  border: 1.5px solid transparent;
  background:
    linear-gradient(145deg, rgb(255 255 255 / .95) 0%, rgb(255 255 255 / .3) 48%, color-mix(in srgb, var(--tier-ink) 14%, transparent) 100%) padding-box,
    linear-gradient(135deg, #fff 0%, rgb(255 255 255 / .95) 30%, color-mix(in srgb, var(--tier-ink) 18%, white) 75%, #fff 100%) border-box;
  box-shadow: inset 1px 1px 3px rgb(255 255 255 / .95), inset -1px -1px 3px rgb(255 255 255 / .65), 0 5px 12px rgb(36 46 68 / .12), 0 10px 20px rgb(36 46 68 / .06);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
}

/* No cast shadows on membership icon tiles. */
.membership-page .membership-plan-icon,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  box-shadow: none;
}
.membership-page .membership-plan-icon svg,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg {
  filter: none;
}

/* Restore the original overview icon artwork and translucent frames. */
.membership-page .membership-plan-heading .membership-plan-icon {
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .24));
  border: 1px solid rgb(255 255 255 / .88);
  box-shadow: none;
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}
.membership-page .membership-plan-heading .membership-plan-icon svg { width: 25px; height: 25px; fill: currentColor; stroke: none; filter: none; }
.membership-page .membership-plan-heading .membership-plan-icon--elite svg { fill: none; stroke: currentColor; stroke-width: 1.8; }

/* Restored neutral glass tile from the approved translucent-frame version.
   Tier colour belongs to the symbol, while the white rim reveals the card beneath. */
.membership-page .membership-plan-icon,
.membership-page .membership-plan-heading .membership-plan-icon,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  border: 1px solid rgb(255 255 255 / .88);
  background: linear-gradient(145deg, rgb(255 255 255 / .78), rgb(255 255 255 / .24));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3);
  -webkit-backdrop-filter: blur(12px) saturate(115%);
  backdrop-filter: blur(12px) saturate(115%);
}

/* A faint tier-coloured glow reveals the glass against the white table. */
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon {
  width: 44px; height: 44px; flex-basis: 44px; border-radius: 12px;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .95), inset 0 -1px 0 rgb(255 255 255 / .3), 0 8px 20px -5px color-mix(in srgb, var(--tier-ink) 16%, transparent), 0 3px 8px -4px rgb(36 46 68 / .05);
}
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg {
  width: 25px; height: 25px; fill: currentColor; stroke: none; filter: none;
}
.membership-page #plans .membership-plan-table thead th:nth-child(4) .membership-plan-header-icon svg {
  fill: none; stroke: currentColor; stroke-width: 1.8;
}
@media(max-width:768px) {
  .membership-page #plans .membership-plan-table thead th .membership-plan-header-icon { width: 40px; height: 40px; flex-basis: 40px; }
}

@media(max-width:768px) {
  .membership-page #plans .membership-plan-table thead th .membership-plan-header-text strong {
    color: var(--tier-ink);
  }
}

/* Confirmed outline artwork; the reference applies to the glass tile material. */
.membership-page .membership-plan-heading .membership-plan-icon svg,
.membership-page #plans .membership-plan-table thead th .membership-plan-header-icon svg { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }