/* ════════════════════════════════════════════════════════════════════════
   pbf-tiers.css — shared PBF tier-card design language (the "strip" look)
   Single source of truth for product/tier cards across the site.
   Used by: /cornerstone, /pricing (and any future tier surface).
   Self-contained tokens (scoped to .pbf-tiers) so it renders identically
   regardless of each page's own :root palette.
   Bebas Neue + DM Sans + PBF gold #c9a84c — matches pbf-shell.
   v1 — 2026-06-30 (Cornerstone WS4 restandard, Ryan-approved Option B).
   ════════════════════════════════════════════════════════════════════════ */

.pbf-tiers{
  --t-gold:#c9a84c; --t-gold2:#e8c84a; --t-navy:#0d1526; --t-navy2:#131c33;
  --t-black:#070a0f; --t-line:#1e2a48; --t-text:#e2e8f0; --t-muted:#6b7587;
  --t-dim:#4f5a6e; --t-win:#2dd4bf; --t-violet:#7c8deb;
  font-family:'DM Sans',sans-serif;
}

/* strip container — auto-collapsing, no media queries needed */
.pbf-tier-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:18px;
  align-items:start;
}

/* ── card ── */
.pbf-tier{
  border:1px solid var(--t-line);
  border-radius:14px;
  overflow:hidden;
  background:var(--t-navy);
  display:flex;
  flex-direction:column;
}
.pbf-tier--featured{
  border-color:rgba(201,168,76,.55);
  box-shadow:0 20px 50px rgba(201,168,76,.10);
}

.pbf-tier__top{
  padding:24px 24px 20px;
  border-bottom:1px solid var(--t-line);
  position:relative;
}
.pbf-tier--featured .pbf-tier__top{
  background:linear-gradient(180deg,rgba(201,168,76,.10),transparent);
}

.pbf-tier__badge{
  position:absolute; top:18px; right:18px;
  font-size:.62rem; font-weight:700; letter-spacing:1px; text-transform:uppercase;
  padding:4px 9px; border-radius:999px;
}
.pbf-tier__badge--free{   background:rgba(45,212,191,.14);  color:var(--t-win);   border:1px solid rgba(45,212,191,.4); }
.pbf-tier__badge--most{   background:rgba(201,168,76,.18);  color:var(--t-gold2); border:1px solid rgba(201,168,76,.5); }
.pbf-tier__badge--bundle{ background:rgba(124,141,235,.16); color:#aebbf2;        border:1px solid rgba(124,141,235,.45); }
.pbf-tier__badge--save{   background:rgba(45,212,191,.14);  color:var(--t-win);   border:1px solid rgba(45,212,191,.4); }
.pbf-tier__badge--soon{   background:rgba(107,117,135,.18); color:#9aa5b1;       border:1px solid rgba(107,117,135,.45); }
.pbf-tier__badge--now{    background:rgba(0,230,118,.14);   color:#00e676;        border:1px solid rgba(0,230,118,.4); }

.pbf-tier__name{ font-family:'Bebas Neue',sans-serif; font-size:1.7rem; letter-spacing:1px; color:var(--t-text); }
.pbf-tier__name .lite{ color:var(--t-win); }
.pbf-tier__name .pro{ color:var(--t-gold); }
.pbf-tier__name .bnd{ color:#aebbf2; }
.pbf-tier__name .accent{ color:var(--t-gold); }

.pbf-tier__role{ color:var(--t-muted); font-size:.85rem; margin:4px 0 16px; min-height:38px; }

.pbf-tier__price{ font-family:'Bebas Neue',sans-serif; font-size:2.6rem; letter-spacing:1px; line-height:1; color:var(--t-text); }
.pbf-tier__price small{ font-family:'DM Sans',sans-serif; font-size:.8rem; color:var(--t-muted); font-weight:600; letter-spacing:0; }
.pbf-tier__was{ color:var(--t-dim); text-decoration:line-through; font-family:'Bebas Neue',sans-serif; font-size:1.3rem; letter-spacing:1px; margin-right:8px; }
.pbf-tier__note{ color:var(--t-dim); font-size:.74rem; margin-top:6px; min-height:30px; }

.pbf-tier__cta{
  display:block; text-align:center; margin-top:16px;
  padding:12px; border-radius:8px; font-weight:700; font-size:.86rem;
  text-decoration:none; cursor:pointer; width:100%; border:0;
  font-family:'DM Sans',sans-serif;
}
.pbf-tier__cta--ghost{  background:transparent; border:1px solid rgba(255,255,255,.16); color:var(--t-text); }
.pbf-tier__cta--solid{  background:linear-gradient(180deg,var(--t-gold2),var(--t-gold)); color:#1a1404; }
.pbf-tier__cta--violet{ background:transparent; border:1px solid rgba(124,141,235,.45); color:#aebbf2; }
.pbf-tier__cta:hover{ filter:brightness(1.08); }
/* disabled "Coming Soon" CTA — checkout wiring is preserved on the element
   (data-key + data-checkout), just not live. Re-enable = move data-checkout
   back to onclick and drop --soon/disabled. */
.pbf-tier__cta--soon{
  background:rgba(255,255,255,.04); border:1px dashed rgba(255,255,255,.18);
  color:var(--t-muted); cursor:not-allowed;
}
.pbf-tier__cta--soon:hover{ filter:none; }
.pbf-tier--soon{ opacity:.86; }

.pbf-tier__body{ padding:18px 24px 24px; flex:1; }
.pbf-tier__head{ font-size:.68rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase; color:var(--t-dim); margin-bottom:12px; }

.pbf-tier__features{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.pbf-tier__features li{ display:grid; grid-template-columns:16px 1fr; gap:9px; font-size:.86rem; color:var(--t-text); }
.pbf-tier__features li .mk{ font-weight:800; }
.pbf-tier__features li.ok  .mk{ color:var(--t-win); }
.pbf-tier__features li.pro .mk{ color:var(--t-gold); }
.pbf-tier__features li.add .mk{ color:#aebbf2; }
.pbf-tier__features li.dim{ color:var(--t-dim); }
.pbf-tier__features li.dim .mk{ color:var(--t-dim); }

.pbf-tiers__foot{ text-align:center; color:var(--t-muted); font-size:.78rem; margin-top:24px; }

/* ── wide variant (e.g. Full Suite): horizontal body | price+cta ── */
.pbf-tier--wide{ grid-column:1 / -1; }
@media(min-width:760px){
  .pbf-tier--wide{ flex-direction:row; align-items:stretch; }
  .pbf-tier--wide .pbf-tier__top{ border-bottom:0; border-right:1px solid var(--t-line); flex:1; }
  .pbf-tier--wide .pbf-tier__body{ display:flex; flex-direction:column; justify-content:center; min-width:280px; }
}