/* Membership landing page (/membership/{slug}) and the creator's Preview as a Member, which render the same markup. */
.mp{--mp-navy:#0b2559;--mp-blue:#001ec8;--mp-pink:#ff007a;--mp-pink-dark:#d80068;--mp-aqua:#04cfe1;--mp-line:#d4edff;--mp-soft:#f4faff;--mp-muted:#4d6283;
  color:var(--mp-navy);font-family:"DM Sans",Arial,sans-serif;display:grid;gap:0;min-width:0}
.mp *{box-sizing:border-box}
.mp h1,.mp h2,.mp h3{font-family:"DM Sans",Arial,sans-serif;color:var(--mp-navy);letter-spacing:-.2px}
.mp a{color:var(--mp-blue)}
.mp :focus-visible{outline:3px solid var(--mp-pink);outline-offset:2px}

.mp-status{margin:0 0 14px;padding:11px 14px;border-radius:10px;border:1px solid #f5c26b;background:#fff7e6;color:#6b4300;font-size:14px}
.mp-status-inactive{border-color:#f3a3c2;background:#fff0f6;color:#7a0f3d}

/* Banner and profile */
.mp-hero{border:1px solid var(--mp-line);border-radius:14px;background:#fff;overflow:hidden}
.mp-banner{position:relative;aspect-ratio:4/1;max-height:260px;width:100%;background:var(--mp-soft);overflow:hidden}
/* An uploaded banner (the membership's own or the storefront banner) is shown whole at its own ratio, like the storefront banner:
   full width, natural height, never cropped, zoomed or stretched (Nov 13 2026). The default banner keeps its fixed shape. */
.mp-banner.mp-banner-image{aspect-ratio:auto;max-height:none;height:auto}
.mp-banner img{display:block;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center}
.mp-banner-default{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:6px;padding:16px;text-align:center;
  background:radial-gradient(circle at 12% 30%,#ffd6ea 0 18%,transparent 19%),radial-gradient(circle at 88% 70%,#c8f5f9 0 20%,transparent 21%),linear-gradient(120deg,#fff 0,#f2f8ff 55%,#fff4fa 100%)}
.mp-banner-default span{font:800 clamp(22px,4vw,44px)/1.05 "DM Sans",Arial,sans-serif;color:var(--mp-navy);max-width:22ch;overflow-wrap:anywhere}
.mp-banner-default small{font-weight:800;font-size:clamp(11px,1.4vw,15px);letter-spacing:.45em;color:var(--mp-pink)}
.mp-profile{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:center;padding:0 22px 16px}
.mp-logo{width:112px;height:112px;margin-top:-34px;border-radius:50%;border:4px solid #fff;background:#fff;box-shadow:0 2px 10px #0b25591f;overflow:hidden;display:grid;place-items:center;position:relative}
.mp-logo img{width:100%;height:100%;object-fit:cover}
.mp-logo span{font:800 34px "DM Sans",Arial,sans-serif;color:var(--mp-pink)}
.mp-identity{min-width:0;padding-top:12px}
.mp-identity h1{margin:0;font-size:clamp(20px,2.2vw,26px);line-height:1.2;font-weight:800}
.mp-tagline{margin:4px 0 0;color:var(--mp-navy);font-size:14px}
.mp-byline{display:flex;align-items:center;gap:10px;margin:4px 0 0;font-size:13px;color:var(--mp-muted)}
.mp-byline .bl-share{display:inline-flex}
.mp-rating{margin:6px 0 0;font-size:14px;color:var(--mp-navy)}
.mp-rating span:last-child{color:var(--mp-muted)}
.mp-stars{color:#f5a400;letter-spacing:1px}
.mp-unrated,.mp-unrated .mp-stars{color:var(--mp-muted)}
.mp-cta{display:grid;justify-items:end;gap:6px;padding-top:12px}
.mp-price{margin:0;font-weight:700;font-size:14px;color:var(--mp-navy);text-align:right}

/* Buttons (the site styles bare buttons navy; membership actions are pink) */
.mp .mp-button{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 26px;border-radius:8px;border:1px solid var(--mp-pink);
  background:var(--mp-pink);color:#fff;font:700 15px "DM Sans",Arial,sans-serif;text-decoration:none;cursor:pointer;box-shadow:none}
.mp .mp-button:hover{background:var(--mp-pink-dark);border-color:var(--mp-pink-dark);filter:none}
.mp .mp-button-outline{background:#fff;color:var(--mp-pink)}
.mp .mp-button-outline:hover{background:#f7f8fb;color:var(--mp-pink-dark)}
.mp .mp-button-off,.mp .mp-button:disabled{background:#e9eef5;border-color:#d5dde8;color:#5b6b80;cursor:not-allowed;opacity:1}
.mp .mp-button-wide{width:100%}

/* Tabs */
.mp-tabs{display:flex;gap:4px;margin:4px 0 16px;padding:0 8px;border-bottom:1px solid var(--mp-line);overflow-x:auto;scrollbar-width:thin}
.mp-tabs a{flex:none;padding:12px 18px;font-size:14px;font-weight:600;color:var(--mp-navy);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-1px;white-space:nowrap}
.mp-tabs a:hover{color:var(--mp-pink)}
.mp-tabs a[aria-selected=true]{color:var(--mp-pink);border-bottom-color:var(--mp-pink)}

/* Panels */
.mp-panel{padding:6px 2px 8px}
.mp-panel>h2{margin:8px 0 14px;font-size:22px;font-weight:800}
.mp-panel h3{font-size:17px;margin:22px 0 10px}
.mp-overview{display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,320px);gap:24px;align-items:start}
.mp-intro h2{margin:6px 0 10px;font-size:clamp(20px,2.2vw,25px);line-height:1.2;font-weight:800;max-width:24ch}
.mp-copy{margin:0 0 12px;white-space:pre-line;font-size:14.5px;line-height:1.6;color:#1d3359}
.mp-empty-note{color:var(--mp-muted);font-size:14px;font-style:italic}
.mp-highlights{list-style:none;margin:18px 0 6px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;text-align:center}
.mp-highlights li{display:grid;justify-items:center;align-content:start;gap:8px;font-size:13px;line-height:1.3;color:var(--mp-navy)}
.mp-tile{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;color:#fff}
.mp-tile .ico{width:24px;height:24px}
.mp-tile-pink{background:var(--mp-pink)}.mp-tile-teal{background:#0a9a8c}.mp-tile-violet{background:#a58bf0}.mp-tile-amber{background:#f6a313}

.mp-details{border:1px solid #fbd1e5;background:#fff6fa;border-radius:12px;padding:16px 18px;display:grid;gap:10px;scroll-margin-top:90px}
.mp-details:focus{outline:none}.mp-details:focus-visible{outline:3px solid var(--mp-pink)}
.mp-details h2{display:flex;align-items:center;gap:10px;margin:0;font-size:17px;font-weight:800}
.mp-details-icon{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--mp-pink);color:#fff;flex:none}
.mp-details-icon .ico{width:18px;height:18px}
.mp-detail-price{margin:0;font-size:14px}.mp-detail-price strong{font-size:20px}
.mp-checks{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:13.5px;line-height:1.4}
.mp-checks li{position:relative;padding-left:22px}
.mp-checks li::before{content:"";position:absolute;left:2px;top:3px;width:11px;height:6px;border-left:2.5px solid var(--mp-pink);border-bottom:2.5px solid var(--mp-pink);transform:rotate(-45deg)}
.mp-checks-large{font-size:15px;gap:10px;max-width:760px}
.mp-terms,.mp-owner-note{margin:0;font-size:12.5px;color:var(--mp-muted);text-align:center;line-height:1.45}
.mp-owner-note{font-size:13.5px}
.mp .form-message:empty{display:none}
.mp .form-message{margin:0;font-size:13px;color:var(--mp-navy)}

.mp-featured{margin-top:22px}
.mp-section-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.mp-section-head h2{margin:0;font-size:18px;font-weight:800}
.mp-section-head a{font-size:13.5px;font-weight:700;text-decoration:none}
.mp-section-head a:hover{text-decoration:underline}
.mp-featured-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.mp-featured-list a{display:grid;gap:6px;text-decoration:none;color:var(--mp-navy)}
.mp-cover{position:relative;display:block;aspect-ratio:1/1;border:1px solid var(--mp-line);border-radius:10px;overflow:hidden;background:var(--mp-soft)}
.mp-cover img{width:100%;height:100%;object-fit:cover;display:block}
.mp-cover-empty{display:grid;place-items:center;width:100%;height:100%;color:#9db3cf}
.mp-cover-empty .ico{width:36px;height:36px}
.mp-member-badge{position:absolute;left:6px;bottom:6px;padding:2px 8px;border-radius:99px;background:var(--mp-pink);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.mp-cover-title{font-size:13px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mp-featured-list a:hover .mp-cover-title{color:var(--mp-pink)}

/* Member category cards (Overview → Resource Categories and the Categories tab, Nov 13 2026): one card design, equal widths and heights,
   one icon box (the icon never grows with the name), two reserved name lines, the count always at the bottom. At most four columns;
   fewer when narrow. The Overview shows the first four (a full row; 3 columns hide the fourth). Anchored on .mp to outrank site.css. */
.mp .mp-category-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-auto-rows:1fr;
  grid-template-columns:repeat(auto-fill,minmax(max(160px,calc((100% - 42px) / 4)),1fr))}
.mp .mp-category-list>li{min-width:0;display:flex}
.mp .mp-cat-card{flex:1;display:grid;grid-template-rows:64px auto auto;justify-items:center;align-content:start;row-gap:10px;min-width:0;
  padding:18px 14px 16px;border:1px solid var(--mp-line);border-radius:14px;background:#fff;text-align:center;text-decoration:none;color:var(--mp-navy);
  transition:border-color .15s,box-shadow .15s}
.mp .mp-cat-card:hover,.mp .mp-cat-card:focus-visible{border-color:var(--sf-accent,var(--mp-pink));box-shadow:0 4px 14px #0b25591a}
.mp .mp-cat-icon{width:64px;height:64px;border-radius:16px;background:var(--mp-soft);display:grid;place-items:center;flex:none}
.mp .mp-cat-icon svg,.mp .mp-category-list .cat-icon{width:32px;height:32px;flex:none}
.mp .mp-cat-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;width:100%;
  font-size:15px;line-height:1.3;min-height:calc(2 * 1.3em);font-weight:800;color:var(--sf-primary,var(--mp-navy))}
.mp .mp-cat-count{font-size:13px;color:var(--mp-muted);font-weight:600}
.mp .mp-category-list-preview{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1000px){
  .mp .mp-category-list-preview{grid-template-columns:repeat(3,minmax(0,1fr))}
  .mp .mp-category-list-preview>li:nth-child(n+4){display:none}
}
@media (max-width:640px){
  .mp .mp-category-list-preview{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp .mp-category-list-preview>li:nth-child(n+4){display:flex}
  .mp .mp-category-list{gap:10px}
  .mp .mp-cat-card{grid-template-rows:52px auto auto;padding:14px 10px}
  .mp .mp-cat-icon{width:52px;height:52px;border-radius:14px}
  .mp .mp-cat-icon svg{width:26px;height:26px}
}
@media (max-width:360px){.mp .mp-category-list{grid-template-columns:1fr}}

.mp-empty{padding:18px;border:1px dashed #b9cde4;border-radius:10px;background:#fff;color:var(--mp-muted);font-size:14px;margin:0}
.mp-muted{color:var(--mp-muted);font-size:13.5px}
.mp-facts{margin:0;padding-left:20px;display:grid;gap:8px;font-size:14.5px;max-width:760px}
.mp-reviews{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:12px;max-width:820px}
.mp-reviews li{border:1px solid var(--mp-line);border-radius:12px;padding:14px 16px;background:#fff}
.mp-reviews h3{margin:6px 0;font-size:15.5px}
.mp-reply{margin:8px 0 0;padding:10px 12px;border-radius:8px;background:var(--mp-soft);font-size:13.5px}
.mp-faqs{display:grid;gap:10px;max-width:820px}
.mp-faqs details{border:1px solid var(--mp-line);border-radius:10px;background:#fff;padding:0 16px}
.mp-faqs summary{cursor:pointer;padding:14px 0;font-weight:700;font-size:15px;color:var(--mp-navy)}
.mp-faqs details[open] summary{border-bottom:1px solid var(--mp-line);margin-bottom:10px}

/* Preview-only chrome */
.mp-preview-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:0 0 16px;padding:10px 14px;border-radius:10px;background:#0b2559;color:#fff;font-size:14px}
.mp-preview-bar p{margin:0}.mp-preview-bar a{color:#fff;font-weight:700}
.mp-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:200;max-width:min(560px,calc(100vw - 32px));padding:12px 18px;border-radius:10px;background:#0b2559;color:#fff;font-size:14px;box-shadow:0 10px 30px #0b255955}

@media (max-width:1000px){
  .mp-overview{grid-template-columns:minmax(0,1fr) minmax(230px,280px);gap:18px}
}
@media (max-width:760px){
  .mp-overview{grid-template-columns:1fr}
  .mp-featured-list{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .mp-banner:not(.mp-banner-image){aspect-ratio:5/2}
  .mp-profile{grid-template-columns:auto minmax(0,1fr);padding:0 14px 14px;gap:12px}
  .mp-logo{width:80px;height:80px;margin-top:-26px}
  .mp-logo span{font-size:26px}
  .mp-cta{grid-column:1/-1;justify-items:stretch;padding-top:4px}
  .mp-price{text-align:left}
  .mp-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-featured-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mp-tabs{padding-left:6px;padding-right:6px}
  .mp-tabs a{padding:12px 12px}
}

/* Membership colours (Edit Membership → Membership Details & Design) */
.mp.sf-theme{background:var(--sf-bg,#fff);color:var(--sf-text,inherit)}
.mp.sf-theme h1,.mp.sf-theme h2,.mp.sf-theme h3{color:var(--sf-primary,inherit)}
.mp.sf-theme .mp-button:not(.mp-button-outline):not(.mp-button-off){background:var(--sf-accent,#e6066f);border-color:var(--sf-accent,#e6066f);color:var(--sf-accent-text,#fff)}
.mp.sf-theme .mp-button-outline{color:var(--sf-accent,#e6066f);border-color:var(--sf-accent,#e6066f)}
.mp.sf-theme .mp-tabs [aria-selected=true]{color:var(--sf-accent,#e6066f);border-color:var(--sf-accent,#e6066f)}
.mp-members{margin:2px 0;color:var(--muted,#56708b);font-size:14px}

/* Save to wishlist (never subscribes or follows) */
.mp-save{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:8px 16px;border-radius:999px;background:#fff!important;color:#c40f6c!important;border:2px solid #f4a6cf!important;font-weight:700;cursor:pointer}
.mp-save[aria-pressed=true]{background:#f7f8fb!important}
.mp-save span{font-size:20px;line-height:1}