/* ============================================================================
   GLL plan / pricing card — ONE component for every plan box on the site
   (member dashboard: change plan, add-listing plan step, upsells; super admin:
   pricing/products, order plan pickers; public pages may adopt it later).
   Owner: main session (2026-10-13). Consumers add classes; never restyle locally.

   Markup:
   <div class="gpc-grid">                       (2-4 equal columns, wraps)
     <article class="gpc [is-featured] [is-current] [is-selected]">
       <p class="gpc-tag">Most popular</p>      (optional, 11px caption)
       <h3 class="gpc-name">Global Prestige</h3>
       <p class="gpc-price"><span class="gpc-amt">$399</span><span class="gpc-per">/ year</span></p>
       <p class="gpc-note">Billed yearly. Cancel any time.</p>     (optional)
       <ul class="gpc-features"><li>…</li></ul>                  (optional)
       <div class="gpc-cta"><a class="gpc-btn" href="…">Choose plan</a></div>
     </article>
   </div>
   Feature rows use a real check icon (Lucide "check" path); add .is-no on an <li> for "not included" (x icon, grey).
   States: .is-featured = black card (the plan we recommend; matches the public
   membership page), .is-current = "Current plan" (ink 2px frame, button disabled
   look), .is-selected = chosen in a picker (ink 2px frame + check).
   ============================================================================ */
.gpc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch;margin:0;padding:0}
@media (min-width:1100px){.gpc-grid{gap:24px}}

.gpc{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;height:100%;margin:0;padding:24px;
  background:#fff;color:#0a0a0a;border:1px solid #d4d4d4;border-radius:0;box-shadow:none;
  font-family:"Inter Tight",Inter,Arial,sans-serif;text-align:left;box-sizing:border-box}
@media (max-width:575.98px){.gpc{padding:20px}}

.gpc .gpc-tag{margin:0;font:600 11px/1.2 "Inter Tight",Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#7a5b12}
.gpc .gpc-name{margin:0;font:600 18px/1.3 "Inter Tight",Inter,Arial,sans-serif;letter-spacing:-.01em;color:inherit;text-transform:none}
.gpc .gpc-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px;margin:0}
.gpc .gpc-amt{font:600 32px/1.1 "Inter Tight",Inter,Arial,sans-serif;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.gpc .gpc-per{font:400 14px/1.4 "Inter Tight",Inter,Arial,sans-serif;color:#5f6b70}
.gpc .gpc-note{margin:0;font:400 14px/1.5 "Inter Tight",Inter,Arial,sans-serif;color:#5f6b70}
.gpc .gpc-features{list-style:none;margin:4px 0 0;padding:12px 0 0;border-top:1px solid #e6e6e6;display:flex;flex-direction:column;gap:8px}
.gpc .gpc-features li{position:relative;margin:0;padding:0 0 0 24px;font:400 15px/1.5 "Inter Tight",Inter,Arial,sans-serif;color:inherit}
.gpc .gpc-features li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;background-color:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/16px no-repeat}
.gpc .gpc-features li.is-no{color:#5f6b70}
.gpc .gpc-features li.is-no::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E")}
.gpc .gpc-cta{margin-top:auto;padding-top:8px;display:flex;flex-direction:column;gap:8px}
.gpc .gpc-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:0 18px;
  background:#0a0a0a;color:#fff;border:1px solid #0a0a0a;border-radius:0;font:600 15px/1 "Inter Tight",Inter,Arial,sans-serif;
  text-transform:none;letter-spacing:.01em;text-decoration:none;cursor:pointer;box-shadow:none}
.gpc .gpc-btn:hover{background:#2b2b2b;border-color:#2b2b2b;color:#fff}
.gpc .gpc-btn.is-secondary{background:#fff;color:#0a0a0a}
.gpc .gpc-btn.is-secondary:hover{background:#f2f2f2;color:#0a0a0a}
.gpc .gpc-btn:focus-visible{outline:2px solid #0a0a0a;outline-offset:2px}

/* recommended plan: black card, white button */
.gpc.is-featured{background:#0a0a0a;color:#fff;border-color:#0a0a0a}
.gpc.is-featured .gpc-tag{color:#d4af5a}
.gpc.is-featured :is(.gpc-per,.gpc-note){color:rgba(255,255,255,.72)}
.gpc.is-featured .gpc-features{border-top-color:rgba(255,255,255,.18)}
.gpc.is-featured .gpc-btn{background:#fff;color:#0a0a0a;border-color:#fff}
.gpc.is-featured .gpc-btn:hover{background:#e6e6e6;border-color:#e6e6e6;color:#0a0a0a}
.gpc.is-featured .gpc-btn:focus-visible{outline-color:#fff}

/* current plan / selected in a picker: 2px ink frame without changing the box size */
.gpc:is(.is-current,.is-selected){border-color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a}
.gpc.is-featured:is(.is-current,.is-selected){box-shadow:inset 0 0 0 2px #fff}
.gpc.is-current .gpc-btn{pointer-events:none;background:transparent;color:inherit;border-color:currentColor;opacity:.7}
.gpc.is-selected::after{content:"";position:absolute;top:16px;right:16px;width:20px;height:20px;background:#0a0a0a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") center/20px no-repeat}
.gpc.is-featured.is-selected::after{background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5 8.5 14 15 6.5' fill='none' stroke='%230a0a0a' stroke-width='2'/%3E%3C/svg%3E")}

/* radio-style pickers: the whole card is the label; hide the native input accessibly */
.gpc > input[type=radio],.gpc > input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
label.gpc{cursor:pointer}
label.gpc:has(input:focus-visible){outline:2px solid #0a0a0a;outline-offset:2px}