/* B2B landing (page-b2b.php). Loads AFTER assets/mpt-landing.css; uses only theme tokens (--card/--ink/--muted/--border/--mpt-*),
   so dark mode (assets/dark.css flips those tokens) needs nothing extra. No literal hex colours here (no tokenize step needed). */

/* ---- hero: text + optional picture ---- */
.b2b-hero__grid { position: relative; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.b2b-hero .mpt-hero__inner, .b2b-hero__text { max-width: 860px; }
.b2b-hero:has(.b2b-fig--hero) .b2b-hero__grid { grid-template-columns: 1.1fr .9fr; }
.b2b-hero:has(.b2b-fig--hero) .b2b-hero__text { text-align: start; max-width: none; }
.b2b-hero:has(.b2b-fig--hero) .mpt-hero__lead { margin-inline: 0; }
.b2b-hero:has(.b2b-fig--hero) .mpt-hero__actions { justify-content: flex-start; }
.b2b-hero:has(.b2b-fig--hero) .mpt-stats { grid-template-columns: repeat(2, 1fr); }
.b2b-hero__text { text-align: center; }
.b2b-hero .mpt-hero__title span { display: block; }

.b2b-fig { margin: 0; }
.b2b-fig img { display: block; width: 100%; height: auto; border-radius: 24px; }
.b2b-fig--hero img { box-shadow: 0 30px 60px -30px rgba(36, 74, 57, .5); }
.b2b-fig--card { margin-top: 18px; }
.b2b-fig--card img { border-radius: 16px; border: 1px solid var(--mpt-line); }
.b2b-fig--report { aspect-ratio: auto; background: none; }
.b2b-fig--report img { height: auto; object-fit: contain; }

/* ---- table of contents ---- */
.b2b-toc { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding-block: 18px; font-size: 14.5px; }
.b2b-toc strong { color: var(--ink); margin-inline-end: 4px; }
.b2b-toc a { padding: .3em .9em; border: 1px solid var(--border); border-radius: 999px; background: var(--card); color: var(--ink); text-decoration: none; transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.b2b-toc a:hover, .b2b-toc a:focus-visible { background: var(--mpt-mint); border-color: transparent; color: var(--mpt-green-deep); }

/* ---- four tests: two per row on desktop, one on a phone ---- */
.b2b-tests { grid-template-columns: repeat(2, 1fr); }

/* ---- audience cards ---- */
.b2b-audience { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.b2b-list { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.b2b-list li { position: relative; padding-inline-start: 22px; color: var(--ink); font-size: 14.8px; line-height: 1.8; }
.b2b-list li::before { content: ''; position: absolute; inset-inline-start: 2px; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--mpt-green); }

/* ---- notes ---- */
.b2b-note { max-width: 820px; margin: var(--space-lg) auto 0; font-size: 14.5px; line-height: 1.95; color: var(--muted); text-align: center; }
.b2b-note a, .b2b-trust a, .mpt-final small a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.b2b-note-inline { margin-top: 18px; padding: 12px 16px; border-radius: var(--r-sm); background: var(--accent); color: var(--accent-ink); font-size: 14px; line-height: 1.9; }

/* ---- pricing (live from the engine) ---- */
.b2b-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.b2b-plan { display: flex; flex-direction: column; gap: 6px; padding: 22px; border: 1px solid var(--mpt-line); border-radius: 24px; background: var(--card); text-align: center; }
.b2b-plan h3 { margin: 0; font-size: 18px; color: var(--ink); }
.b2b-plan p { margin: 0; }
.b2b-plan__credits { font-size: 15px; color: var(--muted); }
.b2b-plan__credits strong { font-family: var(--font-display); font-size: 30px; color: var(--mpt-green-deep); }
.b2b-plan__price { padding-top: 8px; border-top: 1px dashed var(--border); }
.b2b-plan__price strong { font-family: var(--font-display); font-size: clamp(24px, 4vw, 30px); color: var(--ink); }
.b2b-plan__price span { font-size: 14px; color: var(--muted); }
.b2b-plan__per { font-size: 13.5px; color: var(--muted); }
.b2b-plan__eq { margin-top: auto !important; padding-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--ink); }
.b2b-plan__ref { font-size: 13px; line-height: 1.8; color: var(--muted); }
.b2b-plan__term { font-size: 13px; line-height: 1.8; color: var(--muted); }
.b2b-plan__save { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: 12.5px; font-weight: 700; }
.b2b-plan--sub { position: relative; border-color: var(--mpt-green); }
.b2b-plan__flag { position: absolute; inset-block-start: -12px; inset-inline-start: 20px; padding: 3px 14px; border-radius: 999px; background: var(--mpt-green-deep); color: #fff; font-size: 12.5px; font-weight: 700; }
.b2b-plan--contact { border-style: dashed; justify-content: space-between; }
.b2b-plan--contact a { color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }
.b2b-subhead { margin: var(--space-lg) 0 14px; font-size: 20px; color: var(--ink); }
.b2b-pricing--sub { margin-top: 22px; }
html[data-theme="dark"] .b2b-plan__credits strong { color: var(--mpt-green); }

/* ---- trust text ---- */
.b2b-trust { display: grid; gap: 4px; padding: clamp(20px, 3vw, 30px); border: 1px solid var(--mpt-line); border-radius: 24px; background: var(--card); }
.b2b-trust p { margin: 0 0 8px; line-height: 2; color: var(--ink); }

.b2b-final__links { display: block; margin-top: 6px; }

@media (max-width: 860px) {
  .b2b-tests { grid-template-columns: 1fr; }
  .b2b-hero:has(.b2b-fig--hero) .b2b-hero__grid, .b2b-audience { grid-template-columns: 1fr; }
  .b2b-hero:has(.b2b-fig--hero) .b2b-hero__text { text-align: center; }
  .b2b-hero:has(.b2b-fig--hero) .mpt-hero__lead { margin-inline: auto; }
  .b2b-hero:has(.b2b-fig--hero) .mpt-hero__actions { justify-content: center; }
  .b2b-hero:has(.b2b-fig--hero) .mpt-stats { grid-template-columns: repeat(2, 1fr); }
}