/* ============================================================
   LM Brand Pricing — Phase 11.2
   ONLY the brand-specific styles not already in lm-membership.css:
   the commission hero block, the full comparison table, and the FAQ.
   Ported from designs/pricing/brand-pricing.html (values copied verbatim);
   every selector is scoped under .lm-mem-page so the design's generic class
   names (.compare, .col-*, .cell-*, .faq-*) never collide with Bootstrap or
   style.css. Pairs with _lm_brand_pricing.tpl (included by packages.tpl).
   The shared .lm-mem-page / .tier / .free-tier / .bill-toggle visual system
   lives in lm-membership.css and is reused as-is.
   ============================================================ */

/* ── Navy accent remap ──
   The brand page is NAVY (not the talent page's green). Remapping the shared
   --lm-primary* custom properties on the page root cascades navy into every
   rule in BOTH css files that consumes them (badges, toggle, buttons, checks,
   underline, comparison highlights). Premium stays gold (its own --lm-gold*). */
.lm-brand-pricing{--lm-primary:#00363f;--lm-primary-text:#00363f;--lm-primary-strong:#002429;--lm-primary-soft:rgba(0,54,63,.10);--lm-primary-soft-2:rgba(0,54,63,.30)}

/* ── Paid-card grid: two prominent brand cards (Business + Premium) ── */
.lm-brand-pricing .tiers--brand{grid-template-columns:1fr 1fr}
/* More breathing room between the "Upgrade with Business or Premium" title +
   billing-toggle row and the brand tier cards. padding-top (not margin-top) so it
   doesn't collapse with the section-title's bottom margin — matches the talent
   /tier-progress spacing. */
.lm-brand-pricing .tiers--brand{padding-top:18px}
.lm-mem-page .tier.is-rec{border:1.5px solid var(--lm-primary);box-shadow:0 12px 32px -10px rgba(0,54,63,0.2)}
.lm-mem-page .tier.is-rec .tier-name{color:var(--lm-primary)}

/* ── Commission block — the hero feature on each paid card ──
   (design class names; net-new — the talent page uses .comm instead). */
.lm-mem-page .commission-block{margin:4px 0 2px;padding:12px 14px;border-radius:10px;background:linear-gradient(135deg,var(--lm-primary-soft),#e8eef0);border:1px solid var(--lm-primary-soft-2);display:flex;align-items:center;gap:10px}
.lm-mem-page .tier.is-rec .commission-block{background:linear-gradient(135deg,var(--lm-primary-soft),#e8eef0);border-color:var(--lm-primary-soft-2)}
.lm-mem-page .tier.pro-c .commission-block{background:linear-gradient(135deg,#e8eef0,#dfe8eb);border-color:#cad7db}
.lm-mem-page .tier.elite-c .commission-block{background:rgba(198,161,91,.14);border:1px solid rgba(198,161,91,.35)}
.lm-mem-page .commission-rate{font-family:var(--lm-font-mono,monospace);font-size:24px;font-weight:700;color:var(--lm-text);letter-spacing:-0.02em;line-height:1}
.lm-mem-page .tier.is-rec .commission-rate{color:var(--lm-primary-text,var(--lm-primary))}
.lm-mem-page .tier.pro-c .commission-rate{color:var(--lm-primary-text)}
.lm-mem-page .tier.elite-c .commission-rate{color:var(--lm-gold)}
.lm-mem-page .commission-meta{font-size:11px;font-family:var(--lm-font-mono,monospace);letter-spacing:.04em;color:var(--lm-muted);text-transform:uppercase;line-height:1.3;font-weight:500}
.lm-mem-page .commission-meta strong{color:var(--lm-text);font-weight:600;display:block;margin-top:2px;font-family:var(--lm-font,"Inter",system-ui,sans-serif);text-transform:none;letter-spacing:0;font-size:11.5px}
.lm-mem-page .commission-meta .comm-delta{color:var(--lm-primary-text,var(--lm-primary));font-weight:700}
.lm-mem-page .tier.pro-c .commission-meta .comm-delta{color:var(--lm-primary-text,var(--lm-primary))}
.lm-mem-page .tier.elite-c .commission-meta{color:rgba(232,223,198,.55)}
.lm-mem-page .tier.elite-c .commission-meta strong{color:#fef7d6}
.lm-mem-page .tier.elite-c .commission-meta .comm-delta{color:var(--lm-gold)}

/* Free/Verified flat-card price shows the commission %, not €. */
.lm-mem-page .free-tier .ft-feat.ft-feat-off{color:var(--lm-muted)}

/* ============== Comparison table ============== */
.lm-mem-page .compare-section{margin-top:60px}
.lm-mem-page .compare{background:var(--lm-bg);border:1px solid var(--lm-border);border-radius:14px;overflow:hidden}
.lm-mem-page .compare-head{background:var(--lm-bg);z-index:2}
.lm-mem-page .compare-grid{display:grid;grid-template-columns:minmax(280px, 1.3fr) 1fr 1fr 1fr 1fr}
.lm-mem-page .compare-grid > div{padding:16px 22px;display:flex;align-items:center;border-bottom:1px solid var(--lm-border-2,var(--lm-border));font-size:13.5px;justify-content:center;text-align:center}
.lm-mem-page .compare-grid > div + div{border-left:1px solid var(--lm-border-2,var(--lm-border))}
.lm-mem-page .compare-grid.header > div{padding:18px 22px;background:var(--lm-surface);border-bottom:1px solid var(--lm-border);font-family:var(--lm-font-mono,monospace);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--lm-muted-2);display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;justify-content:center}
.lm-mem-page .compare-grid.header > div.col-name{color:var(--lm-text)}
.lm-mem-page .compare-grid.header > div .price{font-family:var(--lm-font,"Inter",system-ui,sans-serif);font-size:18px;font-weight:700;letter-spacing:-0.01em;color:var(--lm-text);text-transform:none}
.lm-mem-page .compare-grid.header > div .price small{font-size:11px;color:var(--lm-muted);font-weight:500;font-family:var(--lm-font-mono,monospace);text-transform:none;letter-spacing:.03em;margin-left:4px}
.lm-mem-page .compare-grid.header .col-business{background:linear-gradient(180deg,#e8eef0 0%, var(--lm-surface));color:var(--lm-primary-text,var(--lm-primary))}
.lm-mem-page .compare-grid.header .col-business .price{color:var(--lm-primary-text,var(--lm-primary))}
.lm-mem-page .compare-grid.header .col-premium{background:linear-gradient(180deg,#fef7d6 0%, #fbf2c7);color:var(--lm-gold-deep)}
.lm-mem-page .compare-grid.header .col-premium .price{color:var(--lm-gold-deep)}
/* Header tier badges (above the €/mo price). Business badge follows the page's
   brand teal (#00363f) — overrides the generic blue .lm-tier-business — and its
   briefcase icon inherits via currentColor. Premium keeps the black/gold badge,
   nudged so the gold diamond doesn't touch the "P". */
.lm-mem-page .compare-grid.header .col-business .lm-tier-business{
  background:var(--lm-primary-soft,rgba(0,54,63,.10));
  border-color:var(--lm-primary-soft-2,rgba(0,54,63,.30));
  color:var(--lm-primary-text,#00363f);
}
/* Premium badge = canonical change-plan look (near-black bg, GOLD text +
   inline gold diamond). Must override .lm-mem-page .lm-tier (which forces a
   gold bg that would hide a gold-on-gold badge). Diamond is the inline SVG
   in the span now — no ::before, no extra padding. */
.lm-mem-page .compare-grid.header .col-premium .lm-tier-premium{
  background:#14161C;color:#D4A93F;border-color:#EAD9A8;
}
/* Comparison caption — full-width line directly above the table */
.lm-mem-page .compare-note{margin:0 0 14px;color:var(--lm-muted);font-size:13.5px;font-weight:400;line-height:1.5}
.lm-mem-page .compare-note .cell-soon{margin:0 2px}

.lm-mem-page .compare-row-group{background:var(--lm-surface-2);border-bottom:1px solid var(--lm-border);font-family:var(--lm-font-mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--lm-text-secondary);font-weight:600;padding:10px 22px;display:flex;align-items:center;gap:8px}
.lm-mem-page .compare-row-group .glyph{width:18px;height:18px;display:grid;place-items:center;color:var(--lm-primary-text,var(--lm-primary))}
.lm-mem-page .compare-row-group.coming{color:var(--lm-gold-deep);background:#fcf7e8}
.lm-mem-page .compare-row-group.coming .glyph{color:var(--lm-gold)}

.lm-mem-page .compare-grid > .col-feat{justify-content:flex-start;text-align:left;font-weight:500;color:var(--lm-text);flex-wrap:wrap;align-content:center}
/* Sub-label sits on its OWN line under the feature name: flex-basis:100% forces
   it to wrap below within the flex-wrap cell. (Plain display:block doesn't wrap
   it because the cell is a flex row — the small would stay beside the label.)
   Inline-code rows like "Brand page on /pages directory" have no <small>, so
   they keep flowing on one line. */
.lm-mem-page .compare-grid > .col-feat small{display:block;flex-basis:100%;color:var(--lm-muted);font-weight:500;font-size:12px;margin-top:2px}
.lm-mem-page .compare-grid > .col-business{background:linear-gradient(180deg,rgba(0,54,63,.02), transparent)}
.lm-mem-page .compare-grid > .col-premium{background:linear-gradient(180deg,rgba(198,161,91,.06), rgba(198,161,91,.02))}
.lm-mem-page .compare-grid .col-feat code{font-family:var(--lm-font-mono,monospace);font-size:12px;background:var(--lm-surface-2);padding:1px 5px;border-radius:4px;border:1px solid var(--lm-border);color:var(--lm-primary-text,var(--lm-primary))}

.lm-mem-page .cell-check{width:22px;height:22px;border-radius:50%;background:var(--lm-primary-soft);color:var(--lm-primary);display:grid;place-items:center}
.lm-mem-page .cell-check.cell-check-gold{background:rgba(198,161,91,.18);color:var(--lm-gold-deep)}
.lm-mem-page .cell-x{width:22px;height:22px;border-radius:50%;background:var(--lm-surface-2);color:var(--lm-muted-2);display:grid;place-items:center}
.lm-mem-page .cell-val{font-weight:600;color:var(--lm-text);font-family:var(--lm-font-mono,monospace);letter-spacing:-0.01em}
.lm-mem-page .cell-val.cell-muted{color:var(--lm-muted)}
.lm-mem-page .cell-soon{font-family:var(--lm-font-mono,monospace);font-size:10px;background:var(--lm-gold-soft);color:var(--lm-gold-deep);padding:3px 8px;border-radius:999px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.lm-mem-page .cell-soon.cell-soon-inline{margin-left:4px;padding:2px 6px;font-size:8.5px}
.lm-mem-page .cell-best{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:var(--lm-primary);color:#fff;border-radius:999px;font-weight:700;font-size:12px;font-family:var(--lm-font-mono,monospace)}
.lm-mem-page .cell-best.gold{background:linear-gradient(135deg,#d4b46a,#C6A15B);color:#1f1408}
/* ELITE highlight cells: black "luxury" pill (gold border + cream text), not the default emerald. */
.lm-mem-page .cell-best.elite{background:linear-gradient(135deg,#1f2937,#0f172a);color:#f5deb3;border:1px solid #d4a93f}
/* Premium column (brand compare): same black luxury pill as ELITE, not gold. */
.lm-mem-page .col-premium .cell-best{background:linear-gradient(135deg,#1f2937,#0f172a);color:#f5deb3;border:1px solid #d4a93f}
.lm-mem-page .cell-best.brand{background:#00363f}

.lm-mem-page .compare-foot{padding:18px 22px;background:var(--lm-surface);display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--lm-border);font-size:13px;color:var(--lm-muted)}
.lm-mem-page .compare-foot strong{color:var(--lm-text);font-weight:600}
.lm-mem-page .compare-foot-actions{display:flex;gap:10px}
.lm-mem-page .compare-foot-actions .btn{width:auto}

/* ============== FAQ ============== */
.lm-mem-page .faq-section{margin-top:60px;display:grid;grid-template-columns:1fr 1.4fr;gap:40px;align-items:flex-start}
.lm-mem-page .faq-section .faq-left .kicker{font-family:var(--lm-font-mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--lm-muted);margin-bottom:10px}
.lm-mem-page .faq-section h2{margin:0 0 14px;font-size:28px;font-weight:700;letter-spacing:-0.01em}
.lm-mem-page .faq-section .faq-left p{margin:0 0 20px;color:var(--lm-text-secondary);font-size:14px;line-height:1.6}
.lm-mem-page .faq-list{display:flex;flex-direction:column;gap:10px}
.lm-mem-page .faq-item{background:var(--lm-bg);border:1px solid var(--lm-border);border-radius:10px;padding:16px 20px}
.lm-mem-page .faq-item.open{border-color:var(--lm-primary-soft-2,#dcebe2);background:var(--lm-primary-soft);box-shadow:var(--lm-shadow-sm,0 1px 2px rgba(15,23,42,.06))}
.lm-mem-page .faq-q{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:14.5px;font-weight:600;color:var(--lm-text);cursor:pointer;line-height:1.4}
.lm-mem-page .faq-q .toggle{width:22px;height:22px;border-radius:50%;background:var(--lm-surface-2);color:var(--lm-muted);display:grid;place-items:center;flex:none;font-size:14px;font-weight:600;transition:transform .15s,background .15s,color .15s}
.lm-mem-page .faq-item.open .faq-q .toggle{background:var(--lm-primary);color:#fff;transform:rotate(45deg)}
.lm-mem-page .faq-a{margin-top:10px;font-size:13.5px;color:var(--lm-text-secondary);line-height:1.6;display:none}
.lm-mem-page .faq-item.open .faq-a{display:block}
.lm-mem-page .faq-a strong{color:var(--lm-text);font-weight:600}
.lm-mem-page .faq-a em{font-style:normal;font-weight:600;color:var(--lm-text)}

.lm-mem-page .contact-card{margin-top:20px;background:var(--lm-bg);border:1px solid var(--lm-border);border-radius:12px;padding:18px 20px}
.lm-mem-page .contact-card h4{margin:0 0 6px;font-size:14px;font-weight:600}
.lm-mem-page .contact-card p{margin:0 0 12px;font-size:12.5px;color:var(--lm-muted)}
.lm-mem-page .contact-card .btn{font-size:13px;padding:9px 14px;width:auto;display:inline-flex}

/* ── Responsive (tablet + 375px) — the design ships desktop-only ── */
@media (max-width: 1024px){
  .lm-brand-pricing .tiers--brand{grid-template-columns:1fr}
}
@media (max-width: 760px){
  /* Stacked single-column paid cards. */
  .lm-brand-pricing .tiers--brand{grid-template-columns:1fr}
  /* The 5-col desktop grid can't shrink to 375px — swap it for the per-tier
     accordion (.m-compare) below; hide the desktop table + its foot entirely. */
  .lm-mem-page .compare{display:none}
  .lm-mem-page .compare-foot{display:none}
  .lm-mem-page .m-compare{display:block}
  /* Stack the FAQ intro above the list. */
  .lm-mem-page .faq-section{grid-template-columns:1fr;gap:24px}
  .lm-mem-page .faq-section h2{font-size:22px}
  .lm-mem-page .commission-rate{font-size:21px}
}

/* ── Dark theme — adapt the design's hardcoded-light surfaces (var()-based
      fills flip on their own via the app's dark palette). ── */
html[data-lm-theme="dark"] .lm-mem-page .commission-block{background:linear-gradient(135deg,rgba(0,54,63,.16),rgba(0,54,63,.06));border-color:rgba(0,54,63,.3)}
html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .commission-block{background:rgba(255,255,255,.05);border-color:rgba(120,160,170,.28)}
html[data-lm-theme="dark"] .lm-mem-page .tier.pro-c .commission-rate{color:#7fb3bd}
html[data-lm-theme="dark"] .lm-mem-page .tier.is-rec .commission-rate{color:#7fb3bd}
html[data-lm-theme="dark"] .lm-mem-page .compare-grid.header .col-business{background:linear-gradient(180deg,rgba(0,54,63,.18) 0%, var(--lm-surface));color:#7fb3bd}
html[data-lm-theme="dark"] .lm-mem-page .compare-grid.header .col-business .price{color:#7fb3bd}
html[data-lm-theme="dark"] .lm-mem-page .compare-grid.header .col-premium{background:linear-gradient(180deg,rgba(198,161,91,.22) 0%, rgba(198,161,91,.08));color:var(--lm-gold)}
html[data-lm-theme="dark"] .lm-mem-page .compare-grid.header .col-premium .price{color:var(--lm-gold)}
html[data-lm-theme="dark"] .lm-mem-page .compare-row-group.coming{background:rgba(198,161,91,.1);color:var(--lm-gold)}
html[data-lm-theme="dark"] .lm-mem-page .compare-grid .col-feat code{background:var(--lm-surface-2)}
html[data-lm-theme="dark"] .lm-mem-page .cell-best.gold{color:#1f1408}
/* Premium column pills are black luxury — keep their text light in dark mode
   (the gold rule above would otherwise force dark, unreadable text). */
html[data-lm-theme="dark"] .lm-mem-page .col-premium .cell-best{color:#f5deb3}
html[data-lm-theme="dark"] .lm-mem-page .faq-item.open{background:rgba(0,54,63,.12);border-color:rgba(0,54,63,.4)}

/* ============================================================
   NAVY OVERRIDES — green that lives in the SHARED lm-membership.css
   (the Business card reuses .pro-c, which hardcodes a green icon, and the
   .underline accents are hardcoded green). Scoped to .lm-brand-pricing so the
   talent page is untouched. Premium (.elite-c / gold) is intentionally left.
   ============================================================ */
.lm-brand-pricing .tier.pro-c .tier-icon{background:linear-gradient(135deg,#0a4a54,#00363f)}
.lm-brand-pricing .underline{background:linear-gradient(180deg,transparent 60%, rgba(0,54,63,.18) 60%, rgba(0,54,63,.18) 90%, transparent 90%)}
.lm-brand-pricing .free-row-title .underline{background:linear-gradient(180deg,transparent 56%, rgba(0,54,63,.22) 56%, rgba(0,54,63,.22) 92%, transparent 92%)}
html[data-lm-theme="dark"] .lm-brand-pricing .tier.pro-c .tier-name{color:#7fb3bd}
/* Dark-theme commission accents in shared CSS resolve to green (#7fb3bd);
   pull them to navy-light on the brand page so "Business commission = navy"
   holds in dark mode too. (Judgment call — see handoff note.) */
html[data-lm-theme="dark"] .lm-brand-pricing .tier.pro-c .commission-rate,
html[data-lm-theme="dark"] .lm-brand-pricing .tier.is-rec .commission-rate{color:#7fb3bd}
html[data-lm-theme="dark"] .lm-brand-pricing .compare-grid.header .col-business,
html[data-lm-theme="dark"] .lm-brand-pricing .compare-grid.header .col-business .price{color:#7fb3bd}

/* ── Premium card (.elite-c is a DARK card) — its €0 price + meta render in
      near-black text on the dark surface → invisible. Force light text. ── */
.lm-brand-pricing .tier.elite-c .price,.lm-brand-pricing .tier.elite-c .price-num{color:#fff}
.lm-brand-pricing .tier.elite-c .per{color:#e8dfc6}
.lm-brand-pricing .tier.elite-c .price-bill,.lm-brand-pricing .tier.elite-c .price-bill-txt{color:#cdbf9a}

/* ── Comparison-table footer button: shared .btn is width:100%; here it sits
      inline in .compare-foot, so let it size to its label. ── */
.lm-brand-pricing .compare-foot .btn{width:auto}

/* ── Button height: a global button/.btn rule inflates these; the card CTAs are
      capped in lm-membership.css via .cta .btn, but the compare-foot + contact-card
      buttons sit outside .cta, so cap every brand-page button here. ── */
.lm-brand-pricing .btn{min-height:0;height:auto;line-height:1.2}

/* ── Dark theme: the brand navy (#00363f) is invisible on dark surfaces, so use
      a deep teal (#053f48, user-picked) for the page accent / buttons, with a
      lighter text teal for readable small text + icons. ── */
/* Dark theme accent for the whole pricing page = deep teal #053f48 (user-picked).
   Drives the page accent, buttons, borders, pills. Text accent stays a lighter
   teal so small text/icons remain readable on dark surfaces. */
html[data-lm-theme="dark"] .lm-brand-pricing{--lm-primary:#053f48;--lm-primary-text:#7fc3cf;--lm-primary-strong:#0a5560;--lm-primary-soft:rgba(5,63,72,.30);--lm-primary-soft-2:rgba(5,63,72,.50)}
/* Check icons use --lm-primary (now a deep teal) — keep them on the lighter
   text teal so they stay visible inside their soft chips. */
html[data-lm-theme="dark"] .lm-brand-pricing .cell-check{color:var(--lm-primary-text)}
/* Feature-list checkmarks (Business card) — brighten to the light text teal so
   they don't look dim against the deep-teal accent. Premium (elite-c) stays gold. */
html[data-lm-theme="dark"] .lm-brand-pricing .tier.pro-c .feat .check{color:var(--lm-primary-text)}
/* CTA hover: lighten from #053f48 → #0a5560 for clear feedback. */
html[data-lm-theme="dark"] .lm-brand-pricing .btn-primary:hover{background:#0a5560;border-color:#0a5560}

/* ============================================================
   Commission-savings banner (.calc-strip) — ported from
   designs/pricing/brand-pricing.html (CSS copied verbatim, each selector
   prefixed with .lm-mem-page for scoping). Recoloured from the design's
   dark-green/teal to the brand NAVY palette; Business bar navy-tinted,
   Premium bar gold-tinted, highlight spans gold. Data-driven markup in
   _lm_brand_pricing.tpl. Bar heights are inline (computed = rate×10%).
   ============================================================ */
.lm-mem-page .calc-strip{margin-top:40px;padding:24px 28px;background:linear-gradient(135deg,#00363f 0%,#0a2a30 100%);color:#fff;border-radius:14px;display:flex;align-items:center;gap:28px;position:relative;overflow:hidden}
.lm-mem-page .calc-strip::before{content:"";position:absolute;right:-40px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle at 30% 30%, rgba(198,161,91,.22), transparent 70%)}
.lm-mem-page .calc-strip .kicker{font-family:var(--lm-font-mono,monospace);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.55);margin-bottom:6px;position:relative}
.lm-mem-page .calc-strip h3{margin:0;font-size:22px;font-weight:700;letter-spacing:-0.01em;position:relative;max-width:32ch;line-height:1.25;color:#fff}
.lm-mem-page .calc-strip h3 .hl{color:#fef7d6}
.lm-mem-page .calc-strip .calc-strip-lead{position:relative}
.lm-mem-page .calc-bars{display:flex;align-items:flex-end;gap:14px;margin-left:auto;position:relative}
.lm-mem-page .calc-bar{display:flex;flex-direction:column;align-items:center;gap:6px}
.lm-mem-page .calc-bar .num{font-family:var(--lm-font-mono,monospace);font-size:18px;font-weight:600;letter-spacing:-0.01em}
.lm-mem-page .calc-bar .bar{width:62px;background:rgba(255,255,255,.16);border-radius:6px 6px 0 0;position:relative;display:flex;align-items:flex-end;justify-content:center}
.lm-mem-page .calc-bar .bar .pct{position:absolute;top:8px;left:0;right:0;text-align:center;font-family:var(--lm-font-mono,monospace);font-size:11px;color:#fff;font-weight:600}
.lm-mem-page .calc-bar .num.hl{color:#fef7d6}
.lm-mem-page .calc-bar .bar .pct.pct-gold{color:#1f1408}
.lm-mem-page .calc-bar.b1 .bar{background:rgba(255,255,255,.18)}
.lm-mem-page .calc-bar.b2 .bar{background:rgba(255,255,255,.18)}
.lm-mem-page .calc-bar.b3 .bar{background:rgba(15,111,79,.9)}
.lm-mem-page .calc-bar.b4 .bar{background:linear-gradient(180deg,#d4b46a,#C6A15B)}
.lm-mem-page .calc-bar .lbl{font-family:var(--lm-font-mono,monospace);font-size:10.5px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em}
.lm-mem-page .calc-cta{position:relative;display:flex;flex-direction:column;gap:8px;align-items:flex-end}
.lm-mem-page .calc-cta .save{font-family:var(--lm-font-mono,monospace);font-size:11px;color:rgba(255,255,255,.65);text-transform:uppercase;letter-spacing:.06em}
.lm-mem-page .calc-cta .save strong{color:#fef7d6;font-size:14px;font-weight:600}
@media (max-width: 760px){
  /* Stack the banner: heading, bars, CTA vertically on narrow screens. */
  .lm-mem-page .calc-strip{flex-direction:column;align-items:stretch;gap:20px}
  .lm-mem-page .calc-bars{margin-left:0;justify-content:space-between;gap:8px}
  .lm-mem-page .calc-bar .bar{width:100%}
  .lm-mem-page .calc-cta{align-items:stretch}
  .lm-mem-page .calc-cta .btn{width:100%}
}

/* ============================================================
   Mobile comparison accordion (.m-compare) — ported from
   designs/pricing/brand-pricing.html (lines 322–339, copied verbatim then
   scoped under .lm-mem-page). Desktop: hidden (the .compare grid shows).
   Mobile (≤760px, see block above): shown; the desktop table is hidden.
   Badges recoloured from the design's green (--lm-brand*) to the brand NAVY
   palette (--lm-primary*); Premium stays gold. Card bg uses var(--lm-bg) /
   var(--lm-border) so it flips automatically in dark mode.
   ============================================================ */
.lm-mem-page .m-compare{display:none;margin-top:32px}
.lm-mem-page .m-compare h2{margin:0 0 12px;font-size:18px;font-weight:700;letter-spacing:-0.01em}
.lm-mem-page .acc-tier{background:var(--lm-bg);border:1px solid var(--lm-border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.lm-mem-page .acc-head{padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:pointer}
.lm-mem-page .acc-head .badge{font-family:var(--lm-font-mono,monospace);font-size:9.5px;font-weight:700;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.04em;flex:none}
.lm-mem-page .acc-head .badge.free{background:var(--lm-surface-2);color:var(--lm-muted)}
.lm-mem-page .acc-head .badge.verified{background:var(--lm-primary-soft);color:var(--lm-primary-text)}
.lm-mem-page .acc-head .badge.business{background:var(--lm-primary);color:#fff}
.lm-mem-page .acc-head .badge.premium{background:linear-gradient(135deg,#d4b46a,#C6A15B);color:#1f1408}
.lm-mem-page .acc-head .name{font-weight:600;font-size:13.5px}
.lm-mem-page .acc-head .price{margin-left:auto;font-family:var(--lm-font-mono,monospace);font-size:13px;font-weight:600;color:var(--lm-text)}
.lm-mem-page .acc-head .price small{color:var(--lm-muted);font-weight:500}
.lm-mem-page .acc-head .chev{color:var(--lm-muted-2);flex:none;transition:transform .18s ease}
.lm-mem-page .acc-tier.is-open .acc-head .chev{transform:rotate(180deg)}
.lm-mem-page .acc-body{padding:0 16px 14px;display:none;flex-direction:column;gap:5px;border-top:1px solid var(--lm-border-2,var(--lm-border))}
.lm-mem-page .acc-tier.is-open .acc-body{display:flex}
.lm-mem-page .acc-row{display:flex;align-items:center;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--lm-border-2,var(--lm-border));font-size:12.5px}
.lm-mem-page .acc-row:last-child{border:none}
.lm-mem-page .acc-row .l{color:var(--lm-text-secondary)}
.lm-mem-page .acc-row .r{font-weight:600;color:var(--lm-text);font-family:var(--lm-font-mono,monospace)}
.lm-mem-page .acc-row .r.r-gold{color:var(--lm-gold-deep)}
html[data-lm-theme="dark"] .lm-mem-page .acc-head .badge.premium{color:#1f1408}
html[data-lm-theme="dark"] .lm-mem-page .acc-row .r.r-gold{color:var(--lm-gold)}

/* Mobile show/hide — re-asserted AFTER the default `.m-compare{display:none}`
   above so source order makes these win on mobile (the earlier @media block
   was being overridden by the later default rule). */
@media (max-width: 760px){
  .lm-mem-page .compare,
  .lm-mem-page .compare-foot{display:none}
  .lm-mem-page .m-compare{display:block}
}

/* Subscription checkout modal (brand Business/Premium). Self-contained so it does
   not depend on tokens that may be absent on /packages; dark-theme aware. */
body.lm-sub-open { overflow: hidden; }
.lm-sub-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; }
.lm-sub-modal[hidden] { display: none; }
.lm-sub-modal__scrim { position: absolute; inset: 0; background: rgba(10, 15, 13, 0.55); }
.lm-sub-modal__card { position: relative; width: 92%; max-width: 460px; max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); padding: 22px 22px 18px; }
.lm-sub-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lm-sub-modal__title { font-size: 17px; font-weight: 700; margin: 0; color: #0f172a; }
.lm-sub-modal__x { border: 0; background: transparent; font-size: 24px; line-height: 1; cursor: pointer; color: #64748b; }
.lm-sub-modal__summary { font-size: 14px; color: #475569; margin-bottom: 14px; }
.lm-sub-modal__pe { min-height: 40px; margin-bottom: 12px; }
.lm-sub-modal__err { background: #fef2f2; color: #b91c1c; border-radius: 10px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.lm-sub-modal__err[hidden] { display: none; }
.lm-sub-modal__actions { display: flex; gap: 10px; justify-content: flex-end; }
.lm-sub-modal__actions .btn-ghost { background: transparent; border: 1px solid #cbd5e1; color: #475569; }
.lm-sub-modal__note { text-align: center; font-size: 12px; color: #94a3b8; margin: 12px 0 0; }
html[data-lm-theme="dark"] .lm-sub-modal__card { background: #1c232c; }
html[data-lm-theme="dark"] .lm-sub-modal__title { color: #e7edf3; }
html[data-lm-theme="dark"] .lm-sub-modal__summary { color: #9fb0c0; }
html[data-lm-theme="dark"] .lm-sub-modal__actions .btn-ghost { border-color: #2a3038; color: #9fb0c0; }
html[data-lm-theme="dark"] .lm-sub-modal__err { background: rgba(185, 28, 28, 0.15); color: #fca5a5; }

/* "Manage or cancel" link under the current-plan button (brand pricing cards). */
.lm-brand-manage-link { display: inline-block; margin-top: 9px; font-size: 13px; font-weight: 600; color: #0f6f4f; text-decoration: underline; }
.lm-brand-manage-link:hover { color: #0c5a40; }
html[data-lm-theme="dark"] .lm-brand-manage-link { color: rgb(46, 161, 111); }

/* Subscription checkout overlay. Mirrors the Add Funds wallet modal; the inner
   two-column layout reuses the .lm-wf-modal classes from lm-wallet.css (now loaded
   on /packages). Only the custom overlay + card box are styled here. */
body.lm-sub-open { overflow: hidden; }
.lm-subco { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; padding: 20px; }
.lm-subco[hidden] { display: none; }
.lm-subco__scrim { position: absolute; inset: 0; background: rgba(10, 15, 13, 0.55); }
.lm-subco__card { position: relative; width: 100%; max-width: 860px; max-height: 92vh; overflow: hidden; border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28); background: var(--lm-bg, #fff); }
.lm-subco__x { position: absolute; top: 14px; right: 14px; z-index: 5; }
.lm-subco-summary { font-weight: 600; color: var(--lm-text); }
.lm-subco-card { margin-top: 4px; min-height: 46px; }
.lm-subco-actions { margin-top: 16px; }

/* Post-payment status panel (activating... / SEPA pending). Replaces the modal body. */
.lm-subco-status {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding: 48px 32px;
  min-height: 240px;
}
.lm-subco-status.x-hidden { display: none; }
.lm-subco-status__spin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px solid var(--lm-border, #e2e8f0);
  border-top-color: var(--lm-primary, #0f6f4f);
  animation: lm-subco-spin 700ms linear infinite;
}
.lm-subco-status__spin.x-hidden { display: none; }
@keyframes lm-subco-spin { to { transform: rotate(360deg); } }
.lm-subco-status__title {
  margin: 4px 0 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--lm-text, #0f172a);
  letter-spacing: -0.01em;
}
.lm-subco-status__msg {
  margin: 0;
  max-width: 420px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--lm-text-secondary, #475569);
}
.lm-subco-status .lm-btn { margin-top: 8px; }
.lm-subco-status .lm-btn.x-hidden { display: none; }
html[data-lm-theme="dark"] .lm-subco-status__title { color: var(--lm-text, #e7edf3); }
html[data-lm-theme="dark"] .lm-subco-status__spin { border-color: var(--lm-border, #2a3038); border-top-color: var(--lm-primary, #16a34a); }

/* =============================================================
   CHECKOUT MODAL REDESIGN (designs/checkout) — scoped to .lm-subco
   Visual only; all JS hooks (data-sub-*, data-lm-sub-close, .lm-modal-addfunds)
   preserved in _lm_brand_pricing.tpl. Tier accent: Business = teal #00363f
   (owner), Premium = gold #d4a93f on dark. Dark theme = html[data-lm-theme].
   ============================================================= */
.lm-subco, .lm-subco * { box-sizing: border-box; }

/* ---- Tokens (light default) ---- */
.lm-subco {
  --co-biz:        #00363f;
  --co-biz-2:      #0a4e59;
  --co-biz-soft:   #e7f0f1;
  --co-biz-soft-2: #cfe0e2;
  --co-biz-on:     #ffffff;

  --co-prem-bg:      #14161c;
  --co-prem-gold:    #d4a93f;
  --co-prem-gold-soft: #fbf3de;
  --co-prem-gold-bd: #ead9a8;
  --co-prem-on:      #2a1e04;

  --co-bg:        #ffffff;
  --co-surface:   #f8fafc;
  --co-surface-2: #f1f5f9;
  --co-text:      #0f172a;
  --co-text-2:    #475569;
  --co-muted:     #64748b;
  --co-muted-2:   #94a3b8;
  --co-border:    #e2e8f0;
  --co-border-2:  #eef2f6;
  --co-shadow:    0 32px 80px -16px rgba(8,12,22,.40), 0 4px 14px rgba(8,12,22,.10);

  /* active accent — switched per tier */
  --co-accent:        var(--co-biz);
  --co-accent-soft:   var(--co-biz-soft);
  --co-accent-soft-2: var(--co-biz-soft-2);
  --co-accent-on:     #ffffff;
}
.lm-subco[data-tier="business"] { --co-accent: var(--co-biz); --co-accent-soft: var(--co-biz-soft); --co-accent-soft-2: var(--co-biz-soft-2); --co-accent-on: var(--co-biz-on); }
.lm-subco[data-tier="premium"]  { --co-accent: var(--co-prem-gold); --co-accent-soft: var(--co-prem-gold-soft); --co-accent-soft-2: var(--co-prem-gold-bd); --co-accent-on: var(--co-prem-on); }

/* ---- Dark theme (tracks the site toggle) ---- */
html[data-lm-theme="dark"] .lm-subco {
  --co-biz:        #2a8c9e;
  --co-biz-soft:   rgba(42,140,158,.16);
  --co-biz-soft-2: rgba(42,140,158,.36);
  --co-biz-on:     #04222a;
  --co-prem-bg:    #0b0d12;
  --co-prem-gold:  #e2bb55;
  --co-prem-gold-soft: rgba(212,169,63,.14);
  --co-prem-gold-bd: rgba(212,169,63,.42);

  --co-bg:        #111a2b;
  --co-surface:   #16223a;
  --co-surface-2: #1b2942;
  --co-text:      #f1f5f9;
  --co-text-2:    #c2cedd;
  --co-muted:     #94a3b8;
  --co-muted-2:   #6b7a92;
  --co-border:    #243149;
  --co-border-2:  #1c2740;
  --co-shadow:    0 32px 80px -16px rgba(0,0,0,.66), 0 4px 14px rgba(0,0,0,.40);
}

/* ---- Scrim + modal shell ---- */
.lm-co-scrim { background: rgba(8,12,22,.55); backdrop-filter: blur(3px); }
html[data-lm-theme="dark"] .lm-co-scrim { background: rgba(2,5,12,.66); }
.lm-co-modal {
  position: relative;
  width: 100%;
  max-width: 940px;
  max-height: 92vh;
  background: var(--co-bg);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--co-shadow);
  border: 1px solid var(--co-accent-soft-2);
  color: var(--co-text);
  font-size: 14px;
  line-height: 1.5;
}
.lm-subco[data-tier="premium"] .lm-co-modal { box-shadow: var(--co-shadow), 0 0 0 1px var(--co-prem-gold-bd); }
.lm-co-grid { display: grid; grid-template-columns: 372px 1fr; }

.lm-co-close {
  position: absolute; top: 16px; right: 16px; z-index: 5;
  width: 38px; height: 38px; border-radius: 10px;
  border: 1px solid var(--co-border); background: var(--co-bg);
  color: var(--co-muted); cursor: pointer; display: grid; place-items: center;
  transition: background .12s, color .12s;
}
.lm-co-close svg { width: 17px; height: 17px; }
.lm-co-close:hover { background: var(--co-surface-2); color: var(--co-text); }

/* ---- Step labels ---- */
.lm-co-step {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--co-muted); display: flex; align-items: center; gap: 8px; white-space: nowrap;
}
.lm-co-step b { color: var(--co-text-2); font-weight: 600; }

/* ---- LEFT column (left-aligned, owner request) ---- */
.lm-co-left {
  background: var(--co-surface);
  border-right: 1px solid var(--co-border);
  padding: 26px 24px;
  display: flex; flex-direction: column; align-items: stretch; text-align: left;
  gap: 14px; overflow-y: auto;
}
.lm-co-left__header { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lm-co-tierline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-co-tier {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; letter-spacing: .10em; text-transform: uppercase;
  padding: 7px 13px; border-radius: 9px; line-height: 1;
}
.lm-co-tier-ic { display: none; }
.lm-co-tier-ic svg { width: 13px; height: 13px; }
.lm-subco[data-tier="business"] .lm-co-tier { background: var(--co-biz); color: var(--co-biz-on); border: 1px solid var(--co-biz); }
.lm-subco[data-tier="premium"]  .lm-co-tier { background: var(--co-prem-bg); color: var(--co-prem-gold); border: 1px solid var(--co-prem-gold-bd); }
.lm-co-priceline { display: flex; align-items: baseline; gap: 7px; }
.lm-co-priceline__amount { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--co-text); }

/* Method tiles — title + descriptor on SEPARATE lines */
.lm-co-methods { display: flex; flex-direction: column; gap: 10px; }
.lm-co-method {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; background: var(--co-bg);
  border: 1.5px solid var(--co-border); border-radius: 13px;
  cursor: pointer; text-align: left;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.lm-co-method:hover { border-color: var(--co-muted-2); }
.lm-co-method__icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--co-surface-2); color: var(--co-text-2);
  display: grid; place-items: center; flex: none;
}
.lm-co-method__icon svg { width: 20px; height: 20px; }
.lm-co-method__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.lm-co-method__name { font-size: 14.5px; font-weight: 700; color: var(--co-text); line-height: 1.3; }
.lm-co-method__desc { font-size: 12px; color: var(--co-muted); margin-top: 2px; line-height: 1.3; }
.lm-co-method__radio {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--co-border);
  flex: none; display: grid; place-items: center; transition: border-color .12s;
}
.lm-co-method__radio::after {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--co-accent); transform: scale(0);
  transition: transform .14s cubic-bezier(.34,1.56,.64,1);
}
.lm-co-method.is-selected { border-color: var(--co-accent); background: var(--co-accent-soft); box-shadow: 0 0 0 3px var(--co-accent-soft); }
.lm-co-method.is-selected .lm-co-method__radio { border-color: var(--co-accent); }
.lm-co-method.is-selected .lm-co-method__radio::after { transform: scale(1); }
.lm-co-method.is-selected .lm-co-method__icon { background: var(--co-accent); color: var(--co-accent-on); }

.lm-co-securenote {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--co-bg); border: 1px solid var(--co-border-2); border-radius: 12px;
  padding: 13px 14px; font-size: 12.5px; color: var(--co-muted); line-height: 1.5; margin-top: auto;
}
.lm-co-securenote svg { width: 16px; height: 16px; color: var(--co-accent); flex: none; margin-top: 1px; }

/* ---- RIGHT column ---- */
.lm-co-right { padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; }
.lm-co-right__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: 48px; }

/* Stripe Card Element host (data-sub-element) — style the box only */
.lm-co-card { display: flex; flex-direction: column; gap: 8px; }
.lm-co-card__label {
  font-size: 12.5px; font-weight: 600; color: var(--co-text-2);
  display: flex; align-items: center; gap: 8px;
}
.lm-co-card__label .lm-co-card-brands { margin-left: auto; display: inline-flex; gap: 5px; align-items: center; }
/* "Card details" + brand icons only for the card-form methods (card / link).
   Apple/Google Pay and SEPA have no card field, so hide that label row. */
.lm-subco[data-method="wallet"] .lm-co-card__label,
.lm-subco[data-method="sepa"]   .lm-co-card__label { display: none; }
.lm-co-card-host {
  background: var(--co-surface); border: 1.5px solid var(--co-border); border-radius: 13px;
  padding: 15px 18px; min-height: 54px; display: flex; align-items: center;
  transition: border-color .12s, box-shadow .12s;
}
.lm-co-card-host.StripeElement--focus, .lm-co-card-host:focus-within { border-color: var(--co-accent); box-shadow: 0 0 0 3px var(--co-accent-soft); }
.lm-co-card-host > * { width: 100%; }
.lm-co-card-hint { font-size: 12px; color: var(--co-muted); }
.lm-co-card-hint.x-hidden { display: none; }

/* Order summary */
.lm-co-summary { background: var(--co-surface); border: 1px solid var(--co-border); border-radius: 14px; overflow: hidden; }
.lm-co-summary__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; }
.lm-co-summary__row + .lm-co-summary__row { border-top: 1px solid var(--co-border-2); }
.lm-co-summary__label { font-size: 13.5px; color: var(--co-text-2); display: flex; align-items: center; gap: 9px; }
.lm-co-pill { font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; line-height: 1.5; }
.lm-subco[data-tier="business"] .lm-co-pill { color: var(--co-biz); background: var(--co-biz-soft); border: 1px solid var(--co-biz-soft-2); }
.lm-subco[data-tier="premium"]  .lm-co-pill { color: #7c5817; background: var(--co-prem-gold-soft); border: 1px solid var(--co-prem-gold-bd); }
html[data-lm-theme="dark"] .lm-subco[data-tier="premium"] .lm-co-pill { color: var(--co-prem-gold); }
.lm-co-summary__value { font-size: 14px; font-weight: 600; color: var(--co-text); font-variant-numeric: tabular-nums; }
.lm-co-summary__total { background: var(--co-accent-soft); }
.lm-subco[data-tier="premium"] .lm-co-summary__total { background: var(--co-prem-gold-soft); }
.lm-co-summary__total .lm-co-summary__label { color: var(--co-text); font-weight: 600; }
.lm-co-summary__total .lm-co-summary__value { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.lm-co-summary__renew { font-size: 12px; color: var(--co-muted); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.lm-co-summary__renew svg { width: 13px; height: 13px; }

/* Tier benefits */
.lm-co-benefits { display: flex; flex-direction: column; gap: 12px; }
.lm-co-benefits__title {
  font-family: var(--lm-font-mono, ui-monospace, monospace);
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--co-muted); display: flex; align-items: center; gap: 8px;
}
.lm-co-benefits__title .rule { flex: 1; height: 1px; background: var(--co-border); }
.lm-co-benefits__list { list-style: none; margin: 0; padding: 0; gap: 10px; }
.lm-co-benefit { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--co-text); line-height: 1.45; }
.lm-co-benefit__check { width: 20px; height: 20px; border-radius: 6px; background: var(--co-accent-soft); color: var(--co-accent); flex: none; display: grid; place-items: center; margin-top: 1px; }
.lm-subco[data-tier="premium"] .lm-co-benefit__check { background: var(--co-prem-gold-soft); color: #b5882c; }
html[data-lm-theme="dark"] .lm-subco[data-tier="premium"] .lm-co-benefit__check { color: var(--co-prem-gold); }
.lm-co-benefit__check svg { width: 12px; height: 12px; }
.lm-co-benefit .hl { color: var(--co-accent); font-weight: 700; }
.lm-subco[data-tier="premium"] .lm-co-benefit .hl { color: #b5882c; }
html[data-lm-theme="dark"] .lm-subco[data-tier="premium"] .lm-co-benefit .hl { color: var(--co-prem-gold); }

/* Actions */
.lm-co-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 2px; }
.lm-co-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 50px; padding: 0 26px; border-radius: 13px; font-family: inherit;
  font-size: 15px; font-weight: 700; cursor: pointer; border: 1px solid transparent;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s, transform .12s; line-height: 1.2;
}
.lm-co-btn svg { width: 18px; height: 18px; flex: none; }
.lm-co-btn--cancel { background: transparent; color: var(--co-muted); padding: 0 8px; height: auto; font-size: 14.5px; font-weight: 600; }
.lm-co-btn--cancel:hover { color: var(--co-text); }
/* Business subscribe = TEAL (owner), Premium = gold */
.lm-co-btn--subscribe { background: var(--co-accent); color: var(--co-accent-on); border-color: var(--co-accent); box-shadow: 0 8px 20px -8px rgba(0,54,63,.5); }
.lm-co-btn--subscribe:hover { filter: brightness(1.06); transform: translateY(-1px); }
.lm-co-btn--subscribe:active { transform: translateY(0); }
.lm-co-btn--subscribe:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; filter: none; }
.lm-co-btn--subscribe.is-loading { opacity: .7; pointer-events: none; }
.lm-subco[data-tier="business"] .lm-co-btn--subscribe { background: var(--co-biz); border-color: var(--co-biz); color: #fff; }
.lm-subco[data-tier="premium"] .lm-co-btn--subscribe {
  background: linear-gradient(135deg, #c79a2e 0%, #d4a93f 60%, #e2bb55 100%);
  color: #2a1e04; border-color: #c79a2e; box-shadow: 0 8px 20px -8px rgba(176,134,44,.6);
}

/* Trust row */
.lm-co-trust { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--co-border-2); }
.lm-co-trust__item { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 500; color: var(--co-muted); }
.lm-co-trust__item svg { width: 15px; height: 15px; flex: none; color: var(--co-accent); }
.lm-co-trust__sep { width: 1px; height: 14px; background: var(--co-border); }
.lm-co-trust__cards { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; }
/* Each brand is a self-contained colored badge SVG (Visa/Mastercard/Amex/
   Discover) — the container just sizes/clips it, no own border/bg. */
.lm-co-cardbrand { height: 22px; width: 36px; border-radius: 4px; display: grid; place-items: center; overflow: hidden; }
.lm-co-cardbrand svg { width: 100%; height: 100%; display: block; }
/* Tier icon inside the order-summary pill (building = Business, diamond = Premium) */
.lm-co-pill-ic { width: 9px; height: 9px; }
.lm-subco[data-tier="business"] .lm-co-pill span.lm-co-when-biz,
.lm-subco[data-tier="premium"]  .lm-co-pill span.lm-co-when-prem { display: inline-flex; align-items: center; gap: 4px; }
.lm-co-stripe { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--co-text-2); }
.lm-co-stripe svg.lock { width: 14px; height: 14px; color: var(--co-accent); }
.lm-co-stripe .word { color: #635bff; font-weight: 800; letter-spacing: -.02em; }
html[data-lm-theme="dark"] .lm-co-stripe .word { color: #9d97ff; }

/* ---- Per-tier / per-period content gating ---- */
.lm-co-when-biz, .lm-co-when-prem,
.lm-co-when-monthly, .lm-co-when-quarterly, .lm-co-when-yearly { display: none; }
.lm-subco[data-tier="business"] span.lm-co-when-biz,
.lm-subco[data-tier="premium"]  span.lm-co-when-prem,
.lm-subco[data-period="monthly"]   span.lm-co-when-monthly,
.lm-subco[data-period="quarterly"] span.lm-co-when-quarterly,
.lm-subco[data-period="yearly"]    span.lm-co-when-yearly { display: inline; }
.lm-subco[data-tier="business"] .lm-co-tier-ic.lm-co-when-biz,
.lm-subco[data-tier="premium"]  .lm-co-tier-ic.lm-co-when-prem { display: inline-flex; }
.lm-subco[data-tier="business"] ul.lm-co-when-biz,
.lm-subco[data-tier="premium"]  ul.lm-co-when-prem { display: grid; }

/* ── Talent tiers reuse the SAME checkout modal: PRO (brand green) + VIP (gold).
   All selectors below are NEW (data-tier pro/vip) so the brand modal is untouched.
   PRO green matches the canonical PRO badge (#0F6F4F); VIP gold matches Premium. ── */
.lm-subco[data-tier="pro"] { --co-accent: #0f6f4f; --co-accent-soft: rgba(15,111,79,.12); --co-accent-soft-2: rgba(15,111,79,.34); --co-accent-on: #ffffff; }
.lm-subco[data-tier="vip"] { --co-accent: #d4a93f; --co-accent-soft: #fbf3de; --co-accent-soft-2: #ead9a8; --co-accent-on: #2a1e04; }
html[data-lm-theme="dark"] .lm-subco[data-tier="pro"] { --co-accent: #18935f; --co-accent-soft: rgba(24,147,95,.16); --co-accent-soft-2: rgba(24,147,95,.40); --co-accent-on: #04231a; }
html[data-lm-theme="dark"] .lm-subco[data-tier="vip"] { --co-accent: #e2bb55; --co-accent-soft: rgba(212,169,63,.14); --co-accent-soft-2: rgba(212,169,63,.42); --co-accent-on: #2a1e04; }
/* tier chip (left header) */
.lm-subco[data-tier="pro"] .lm-co-tier { background: var(--co-accent); color: var(--co-accent-on); border: 1px solid var(--co-accent); }
.lm-subco[data-tier="vip"] .lm-co-tier { background: #14161c; color: var(--co-accent); border: 1px solid var(--co-accent-soft-2); }
/* order-summary pill */
.lm-subco[data-tier="pro"] .lm-co-pill { color: var(--co-accent); background: var(--co-accent-soft); border: 1px solid var(--co-accent-soft-2); }
.lm-subco[data-tier="vip"] .lm-co-pill { color: #7c5817; background: var(--co-accent-soft); border: 1px solid var(--co-accent-soft-2); }
html[data-lm-theme="dark"] .lm-subco[data-tier="vip"] .lm-co-pill { color: var(--co-accent); }
/* VIP subscribe button gradient (PRO uses the flat green accent via the base rule) */
.lm-subco[data-tier="vip"] .lm-co-btn--subscribe {
  background: linear-gradient(135deg, #c79a2e 0%, #d4a93f 60%, #e2bb55 100%);
  color: #2a1e04; border-color: #c79a2e; box-shadow: 0 8px 20px -8px rgba(176,134,44,.6);
}
/* per-tier content gating (mirrors the biz/prem rules above) */
.lm-co-when-pro, .lm-co-when-vip { display: none; }
.lm-subco[data-tier="pro"] span.lm-co-when-pro,
.lm-subco[data-tier="vip"] span.lm-co-when-vip { display: inline; }
.lm-subco[data-tier="pro"] .lm-co-pill span.lm-co-when-pro,
.lm-subco[data-tier="vip"] .lm-co-pill span.lm-co-when-vip { display: inline-flex; align-items: center; gap: 4px; }
.lm-subco[data-tier="pro"] .lm-co-tier-ic.lm-co-when-pro,
.lm-subco[data-tier="vip"] .lm-co-tier-ic.lm-co-when-vip { display: inline-flex; }
.lm-subco[data-tier="pro"] ul.lm-co-when-pro,
.lm-subco[data-tier="vip"] ul.lm-co-when-vip { display: grid; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .lm-co-grid { grid-template-columns: 1fr; }
  .lm-co-modal { max-width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; }
  .lm-co-left { border-right: 0; border-bottom: 1px solid var(--co-border); }
  .lm-co-actions { flex-direction: column-reverse; align-items: stretch; gap: 12px; }
  .lm-co-btn--subscribe { width: 100%; }
  .lm-co-trust { justify-content: center; }
  .lm-co-trust__cards { margin-left: 0; width: 100%; justify-content: center; }
}