/* === members-tiers === */
/* v3.52.06 — restyled to the approved membership mock
   (_prototypes/tspkey/mock-membership-checkout.html). TOKEN-DRIVEN: every color,
   face and radius consumes a shell/preset/commerce token so the section adopts
   ANY preset. The literal fallbacks are the mock's values, used only for
   standalone/preview when no suite tokens exist — they never leak into a themed
   render. Token map (Glenn-approved, same as SSM v0.41.0 level-card):
     heading/price face  --shell-hf      body face      --shell-bf
     price navy          --preset-primary→--shell-h      eyebrow/accent gold --shell-accent
     CTA fill/text       --ssla-button-fill/-text        card/hairline/muted --shell-card/-hairline/-m
     positive (save/tick)--ssc-good       radius         --ssc-radius / --ssc-radius-sm */
/* v3.52.11 — SQUARED per the suite-wide no-radius rule (Glenn: "we don't do
   radius corners"). Every radius fallback is now 0 (was 6px/3px) and the two
   pill radii (.smt-flag, .smt-trialbar + the featured ::before pill) drop from
   100px to 0. --ssc-radius is unset site-wide, so these fallbacks are what
   actually render — the section was showing rounded cards/pills. Also BACKS OUT
   the v3.52.09 `tone` variant (see below) and fixes the navy includes-panel
   heading contrast. */

/* v3.52.07 — full-bleed container + standard inner cap, matching EVERY
   g-section (g-cards/g-hero-stats/g-cta all render root@100% width with a
   `.*-inner` child capped at --shell-content-max-width). Prior fixes only
   tokenized the inner cap (--smt-content-max-width) and gated full-width on the
   block being align:full — but live instances aren't align:full, so the section
   kept capping ITSELF (Glenn, recurring: "does not go full width"). Now the
   section ROOT is full-bleed by construction (no max-width, no align dependency)
   and the inner caps at the standard Launch token. Zero content migration: the
   block is dynamic, so this template/CSS change reflows every existing instance.
   Glenn 2026-07-29: "full width for the container, then ascribe to the standard
   UI max-width for Launch." */
[data-ssla-type="members-tiers"]{padding:0}
.smt-inner{padding:96px 40px;max-width:var(--shell-content-max-width,1200px);margin:0 auto}

/* ── head ─────────────────────────────────────────────────────────────── */
.smt-head{text-align:center;max-width:640px;margin:0 auto 8px}
.smt-eyebrow{display:inline-flex;align-items:center;gap:12px;justify-content:center;font-family:var(--shell-bf);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--shell-accent,#B8922F)}
.smt-eyebrow::before{content:"";width:28px;height:1px;background:var(--shell-accent,#B8922F)}
.smt-inner h2{font-family:var(--shell-hf);font-size:clamp(2rem,4.4vw,3.2rem);font-weight:var(--shell-hw,700);color:var(--shell-h);line-height:1.1;margin:16px 0 14px}
.smt-inner h2 em{font-style:italic;color:var(--shell-accent,#B8922F)}
.smt-lead,.smt-sub{font-family:var(--shell-bf);font-size:1.05rem;color:var(--shell-b,var(--shell-m));max-width:600px;margin:0 auto}
.smt-trialbar{display:inline-flex;align-items:center;gap:10px;margin:20px auto 40px;padding:9px 18px;font-family:var(--shell-bf);font-weight:600;font-size:.85rem;color:var(--shell-h);background:var(--shell-card,#fff);border:1px solid var(--shell-accent,#B8922F);border-radius:0}
.smt-trialbar .smt-dot{width:8px;height:8px;border-radius:50%;background:var(--ssc-good,#5B8C5A)}
.smt-trialbar-wrap{text-align:center}

/* v3.24.05 — dynamic tier cards (ssm_get_levels). Responsive auto-fit grid. */
.smt-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;align-items:stretch;max-width:940px;margin:0 auto}
.smt-tier{position:relative;display:flex;flex-direction:column;padding:30px 26px;background:var(--shell-card,#fff);border:1px solid var(--shell-hairline,rgba(0,0,0,.12));border-radius:var(--ssc-radius,0)}
.smt-tier.smt-featured{border-color:var(--shell-accent,#B8922F);box-shadow:0 16px 40px rgba(0,0,0,.10)}
.smt-flag{position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:var(--shell-bf);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:5px 14px;border-radius:0;background:var(--shell-accent,#B8922F);color:var(--ssla-button-text,#fff)}
.smt-cat,.smt-tier-name{font-family:var(--shell-bf);font-weight:600;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase;color:var(--shell-accent,#B8922F)}
.smt-tier-price{display:flex;align-items:baseline;gap:4px;font-family:var(--shell-hf);font-weight:var(--shell-hw,400);font-size:2.8rem;color:var(--preset-primary,var(--shell-h));line-height:1;margin:12px 0 2px}
.smt-per{font-family:var(--shell-bf);font-size:.95rem;font-weight:400;color:var(--shell-m)}
.smt-bill{font-family:var(--shell-bf);font-size:.85rem;color:var(--shell-m);margin-bottom:18px}
.smt-save{display:inline-block;margin-left:8px;padding:3px 9px;font-family:var(--shell-bf);font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--ssc-good,#5B8C5A);background:color-mix(in srgb,var(--ssc-good,#5B8C5A) 14%,transparent);border-radius:var(--ssc-radius-sm,0)}
.smt-cta{margin-top:auto;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center;padding:14px 22px;font-family:var(--shell-bf);font-size:.9rem;font-weight:600;text-decoration:none;border-radius:var(--ssc-radius-sm,0);background:var(--shell-card,#fff);color:var(--preset-primary,var(--shell-h));border:1px solid var(--shell-accent,#B8922F)}
.smt-tier.smt-featured .smt-cta{background:var(--ssla-button-fill,var(--shell-accent,#B8922F));color:var(--ssla-button-text,#fff);border-color:var(--ssla-button-fill,var(--shell-accent,#B8922F))}
.smt-after{margin-top:10px;text-align:center;font-family:var(--shell-bf);font-size:.75rem;color:var(--shell-m)}

/* ── "Your membership includes" navy panel ───────────────────────────── */
.smt-includes{max-width:720px;margin:44px auto 0;padding:30px 36px;background:var(--preset-primary,var(--shell-h));color:var(--ssla-button-text,#fff);border-radius:var(--ssc-radius,0)}
/* v3.52.14 — includes-panel heading contrast fix (REAL cascade). The navy panel
   needs a LIGHT heading. The heading goes navy-on-navy because this file's OWN
   rule `.smt-inner h2 {color:var(--shell-h)}` (specificity 0,1,1; --shell-h is
   the navy #0F2B4C) out-ranks the `.smt-includes` panel's `color:var(--ssla-
   button-text,#fff)` (0,1,0 on the panel, and inheritance loses to a direct
   match). There is NO `body.simple-heading-anchor` paint rule involved — that
   class is NOT on the live <body>, which is why the v3.52.11/v3.52.13 fixes
   (both anchored under `body.simple-heading-anchor …`) never matched live.
   The rule below is anchored on real classes only: (0,2,1) — `.ssla-members-
   tiers` + `.smt-includes` + one type from `:is()` — beating `.smt-inner h2`
   (0,1,1). Tag-agnostic; scoped to `.smt-includes` so the section's MAIN
   heading (`.smt-inner h2`, navy on light) stays navy. No !important. */
.ssla-members-tiers .smt-includes :is(h1,h2,h3,h4){font-family:var(--shell-hf);font-size:1.25rem;font-weight:var(--shell-hw,400);color:var(--ssla-button-text,#fff);margin:0 0 16px}
/* target the rich-editable <ul> directly (no class dependency — an operator can
   re-edit the checklist and the styling still holds). */
.smt-includes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.smt-includes li{display:grid;grid-template-columns:20px 1fr;gap:10px;font-family:var(--shell-bf);font-size:.92rem;line-height:1.4;color:var(--ssla-button-text,#fff);opacity:.92}
.smt-includes li::before{content:"";width:16px;height:16px;margin-top:2px;background:var(--shell-accent,#B8922F);-webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E");mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2.6'%3E%3Cpath d='M4 10.5l4 4 8-9'/%3E%3C/svg%3E")}
.smt-foot{text-align:center;font-family:var(--shell-bf);font-size:.8rem;color:var(--shell-m);margin-top:24px}

@media(max-width:820px){
  .smt-tiers{grid-template-columns:1fr;max-width:400px}
  .smt-includes ul{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════════════
   v3.52.09 — SECTION VARIANTS (SSLA variant contract).
   The bridge projects each declared variant dim as a wrapper class
   `.ssla-members-tiers--{dim}-{value}` (+ a data-ssla-variant-{dim} attr).
   Every DEFAULT value below is a no-op, so an instance that sets no variant
   renders exactly as the pre-variant section (the default classes are inert).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── (A) layout: cards-only hides the "Your membership includes" panel.
   details (default) shows it — no rule needed. ─────────────────────────── */
.ssla-members-tiers--layout-cards-only .smt-includes{display:none}

/* ── (A) eyebrow toggle. on (default) shows it — no rule needed. ────────── */
.ssla-members-tiers--eyebrow-off .smt-eyebrow{display:none}

/* ── (B) featured tier — section-level OVERRIDE of which card is featured.
   Resolution: featured=auto (default) honors the PHP-baked `.smt-featured`
   decision (per-level is_featured → derived greatest-saving → none) untouched.
   Any explicit value (none / one..five) OVERRIDES: it neutralizes the baked
   featured card (border, shadow, gold CTA, baked "Best Value" pill) so the
   override alone decides, then paints the chosen nth card with the SAME
   featured tokens. The chosen card gets a synthesized "Best Value" pill via
   ::before because the tier cards are built once at section registration (no
   per-instance PHP seam), so a per-instance override must be CSS-only — it
   reuses the identical .smt-flag tokens (accent bg + button-text ink).
   Dim `featured` → class `.ssla-members-tiers--featured-{value}`. ──────── */
.ssla-members-tiers[class*="--featured-"]:not([class*="--featured-auto"]) .smt-tier.smt-featured{
  border-color:var(--shell-hairline,rgba(0,0,0,.12));box-shadow:none
}
.ssla-members-tiers[class*="--featured-"]:not([class*="--featured-auto"]) .smt-tier.smt-featured .smt-flag{display:none}
.ssla-members-tiers[class*="--featured-"]:not([class*="--featured-auto"]) .smt-tier.smt-featured .smt-cta{
  background:var(--shell-card,#fff);color:var(--preset-primary,var(--shell-h));border-color:var(--shell-accent,#B8922F)
}
.ssla-members-tiers--featured-one   .smt-tier:nth-child(1),
.ssla-members-tiers--featured-two   .smt-tier:nth-child(2),
.ssla-members-tiers--featured-three .smt-tier:nth-child(3),
.ssla-members-tiers--featured-four  .smt-tier:nth-child(4),
.ssla-members-tiers--featured-five  .smt-tier:nth-child(5){
  border-color:var(--shell-accent,#B8922F);box-shadow:0 16px 40px rgba(0,0,0,.10)
}
.ssla-members-tiers--featured-one   .smt-tier:nth-child(1) .smt-cta,
.ssla-members-tiers--featured-two   .smt-tier:nth-child(2) .smt-cta,
.ssla-members-tiers--featured-three .smt-tier:nth-child(3) .smt-cta,
.ssla-members-tiers--featured-four  .smt-tier:nth-child(4) .smt-cta,
.ssla-members-tiers--featured-five  .smt-tier:nth-child(5) .smt-cta{
  background:var(--ssla-button-fill,var(--shell-accent,#B8922F));color:var(--ssla-button-text,#fff);border-color:var(--ssla-button-fill,var(--shell-accent,#B8922F))
}
.ssla-members-tiers--featured-one   .smt-tier:nth-child(1)::before,
.ssla-members-tiers--featured-two   .smt-tier:nth-child(2)::before,
.ssla-members-tiers--featured-three .smt-tier:nth-child(3)::before,
.ssla-members-tiers--featured-four  .smt-tier:nth-child(4)::before,
.ssla-members-tiers--featured-five  .smt-tier:nth-child(5)::before{
  content:"Best Value";position:absolute;top:-12px;left:50%;transform:translateX(-50%);white-space:nowrap;
  font-family:var(--shell-bf);font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:5px 14px;border-radius:0;background:var(--shell-accent,#B8922F);color:var(--ssla-button-text,#fff)
}