/*
Theme Name: MBS
Theme URI: https://miglioribonusscommesse.com
Author: Nexern
Author URI: https://nexern.com
Description: Custom theme for MBS — Italian betting-bonus comparison. ADM-licensed operators only.
Version: 1.9.23
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: Private
Text Domain: mbs
*/

/* ============================================================
   Self-hosted fonts (no Google-CDN footprint, survives static export)
   Schibsted Grotesk (heading, 600/700) · Work Sans (body, 400/600)
   woff2 bundled under assets/fonts/.
   ============================================================ */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/work-sans-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/work-sans-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/schibsted-grotesk-700.woff2') format('woff2');
}

/* ============================================================
   Design Tokens — Task 0.1 locked values
   ============================================================ */
:root {
  --mbs-ink:         #141b2e;
  --mbs-accent:      #2f6f5e;
  --mbs-grey-light:  #f5f6f8;
  --mbs-grey-mid:    #c9cfd8;
  --mbs-grey-dark:   #5b6472;
  --mbs-positive:    #1f7a4d;
  --mbs-warning:     #9c5418;
  /* Hero hot-accent — electric lime. SIGNAL only (editorial chrome:
     hero glow, freshness pulse, calc tool). NOT a CTA/claim color and
     NOT the positive/rollover-good green (--mbs-positive keeps that job). */
  --mbs-lime:        #00e58a;
  --mbs-lime-soft:   #16e086;

  --mbs-font-heading: 'Schibsted Grotesk', system-ui, sans-serif;
  --mbs-font-body:    'Work Sans', system-ui, sans-serif;

  --mbs-radius:  4px;
  --mbs-max-w:   1440px;
  --mbs-gap:     1.5rem;
}

/* ============================================================
   Base reset / typography
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
::selection { background: #2f6f5e; color: #ffffff; }

html { font-size: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--mbs-font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mbs-ink);
  background: var(--mbs-grey-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  line-height: 1.2;
  color: var(--mbs-ink);
}

a { color: var(--mbs-accent); text-decoration: underline; }
a:hover { opacity: .85; }

img, svg { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Layout helpers
   ============================================================ */
.mbs-container {
  width: 100%;
  max-width: var(--mbs-max-w);
  margin-inline: auto;
  padding-inline: var(--mbs-gap);
}

/* ============================================================
   Skip link
   ============================================================ */
.mbs-skip-link {
  position: absolute;
  top: -9999px;
  left: 0;
  padding: .5rem 1rem;
  background: var(--mbs-ink);
  color: #fff;
  font-size: .875rem;
  z-index: 9999;
}
.mbs-skip-link:focus { top: 0; }

/* ============================================================
   Header / Nav
   ============================================================ */
.mbs-site-header {
  background: var(--mbs-ink);
  color: #fff;
}

.mbs-nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: .875rem;
}

.mbs-site-logo {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.01em;
}
.mbs-site-logo:hover { opacity: .9; }
.mbs-logo-mark { display: inline-flex; flex: 0 0 auto; }
.mbs-logo-mark svg { display: block; }
.mbs-logo-word { font-weight: 600; }
.mbs-logo-word strong { font-weight: 800; color: #5fae97; }

.mbs-primary-nav ul {
  list-style: none;
  display: flex;
  gap: 1.5rem;
}

.mbs-primary-nav a {
  color: #fff;
  text-decoration: none;
  font-size: .9375rem;
  font-weight: 600;
}
.mbs-primary-nav a:hover { color: var(--mbs-grey-mid); opacity: 1; }

/* ============================================================
   Main content
   ============================================================ */
.mbs-site-main { padding-block: 2.5rem; }

/* ============================================================
   Disclaimer banner
   ============================================================ */
.mbs-disclaimer {
  background: var(--mbs-ink);
  color: var(--mbs-grey-mid);
  font-size: .8125rem;
  text-align: center;
  padding-block: .625rem;
}

/* ============================================================
   Footer
   ============================================================ */
.mbs-site-footer {
  background: #0d1120;
  color: var(--mbs-grey-mid);
  padding-block: 2rem;
  font-size: .875rem;
}

/* ADM compliance block (badges + mandatory disclaimers) */
.mbs-footer-compliance {
  border-bottom: 1px solid #1e2740;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}
.mbs-footer-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}
.mbs-footer-badge {
  display: block;
  height: 36px;
  width: auto;
}
.mbs-footer-badge--age { height: 40px; }
.mbs-footer-badge-link { display: inline-flex; }
.mbs-footer-rg,
.mbs-footer-adv-disclaimer,
.mbs-footer-legal {
  max-width: 70ch;
  margin: 0 auto .625rem;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.5;
  color: #8b93a3; /* WCAG AA on #0d1120 footer (6.08:1); grey-dark #5b6472 = 3.14:1 fail here */
}
.mbs-footer-rg { color: var(--mbs-grey-mid); }
.mbs-footer-rg a,
.mbs-footer-adv-disclaimer a {
  color: var(--mbs-grey-mid);
  text-decoration: underline;
}

.mbs-footer-inner {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: center;
  text-align: center;
}

.mbs-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1.5rem;
  list-style: none;
}
.mbs-footer-links a {
  color: var(--mbs-grey-mid);
  text-decoration: underline;
}
.mbs-footer-links a:hover { color: #fff; opacity: 1; }

.mbs-copyright { color: #8b93a3; /* WCAG AA on #0d1120 footer (6.08:1) */ font-size: .8125rem; }

/* ============================================================
   HOMEPAGE (front-page.php)
   Ported from design/mockup-home.html (console archetype) onto the
   real theme selectors. Tokens stay --mbs-*. No AI-slop callout boxes.
   ============================================================ */

/* --- shared local tokens for the homepage surface --- */
.mbs-home {
  --mbs-shadow: 0 1px 0 #141b2e0d, 0 8px 28px -18px #141b2e40;
  --mbs-severe: #9a3326;
  padding-block: 0 1rem;
}

/* ---------- Hero / intro band ----------
   Full-bleed brand band: breaks out of .mbs-container via negative
   margin + matching padding, with a deep-ink gradient and a subtle
   diagonal accent. Title + lede sit on the dark band in light type. */
.mbs-home-hero {
  position: relative;
  margin-inline: calc(50% - 50vw);
  padding: clamp(2.5rem, 6vw, 4rem) calc(50vw - 50% + var(--mbs-gap)) clamp(2.25rem, 5vw, 3.25rem);
  background:
    radial-gradient(120% 150% at 92% -20%, rgba(0,229,138,.16) 0%, transparent 46%),
    radial-gradient(90% 120% at 6% 115%, rgba(0,229,138,.07) 0%, transparent 50%),
    linear-gradient(158deg, #0a0e1a 0%, #101827 55%, #16223a 100%);
  color: #eef1f6;
  overflow: hidden;
}
/* faint diagonal "pitch-line" texture — sporty energy, almost subliminal */
.mbs-home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px);
  pointer-events: none;
}
/* glowing lime baseline — the hot version of the old brand-green rule */
.mbs-home-hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mbs-lime) 0%, var(--mbs-lime) 30%, var(--mbs-lime-soft) 46%, transparent 82%);
  box-shadow: 0 0 18px rgba(0,229,138,.45);
}

.mbs-home-title {
  position: relative;
  font-family: var(--mbs-font-heading);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 22ch;
  margin-bottom: 1rem;
  color: #fff;
}
/* lime underline that swipes in under the headline (numeral/keyword signature) */
.mbs-home-title::after {
  content: "";
  display: block;
  height: .16em;
  width: min(11rem, 44%);
  margin-top: .5rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--mbs-lime), var(--mbs-lime-soft));
  box-shadow: 0 0 14px rgba(0,229,138,.5);
  transform: scaleX(0);
  transform-origin: left;
  animation: mbsSwipe .7s .5s cubic-bezier(.22,.61,.36,1) forwards;
}

.mbs-home-freshness {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #a7d9c4;
  margin: -.4rem 0 1rem;
  text-transform: uppercase;
}
/* pulsing lime freshness dot — CSS-only, no markup change */
.mbs-home-freshness::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  border-radius: 50%;
  margin-right: .5rem;
  vertical-align: baseline;
  background: var(--mbs-lime);
  box-shadow: 0 0 0 0 rgba(0,229,138,.5);
  animation: mbsPulse 2.2s infinite;
}
.mbs-home-lede {
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  color: #c4cdda;
  max-width: 64ch;
  line-height: 1.62;
  margin-bottom: 1rem;
}

.mbs-home-hero > p:not(.mbs-home-lede) {
  max-width: 70ch;
  color: #aab4c4;
  font-size: .9375rem;
  margin-bottom: 0;
}

/* eyebrow kicker above the H1 — lime signal, short glowing rule */
.mbs-home-kicker {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: 1.1rem;
  font-family: var(--mbs-font-heading);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mbs-lime);
}
.mbs-home-kicker::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--mbs-lime);
  box-shadow: 0 0 10px rgba(0,229,138,.7);
}

/* numeral-signature stat strip — figures come from mbs_hero_stats() (CPT) */
.mbs-home-stats {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
}
.mbs-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: .8rem 1.1rem;
  min-width: 116px;
}
.mbs-stat__n {
  display: block;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.9rem;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--mbs-lime);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(0,229,138,.35);
}
.mbs-stat__n small { font-size: 1rem; color: #7fe7bd; }
.mbs-stat__t {
  display: block;
  margin-top: .4rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 600;
  color: #9aa6b8;
}
/* ---------- Doc / info-page header (light) ----------
   Used by metodologia + legal pages. Quiet, document-appropriate:
   white background, ink title, short brand-green accent rule, no
   gradient. Deliberately NOT the homepage .mbs-home-hero marketing
   band (wrong altitude on a trust/legal page). */
.mbs-doc-hero {
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.25rem, 2.5vw, 1.75rem);
  border-bottom: 1px solid #eceef2;
  margin-bottom: 1rem;
}
.mbs-doc-hero .mbs-home-title,
.mbs-doc-title {
  font-family: var(--mbs-font-heading);
  font-size: clamp(1.7rem, 3.6vw, 2.35rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.025em;
  max-width: 24ch;
  color: var(--mbs-ink);
  margin-bottom: .85rem;
}
/* short brand-green accent rule under the title */
.mbs-doc-title::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin-top: .9rem;
  background: var(--mbs-accent);
  border-radius: 2px;
}
.mbs-doc-hero .mbs-home-lede,
.mbs-doc-lede {
  font-size: clamp(1rem, 1.5vw, 1.125rem);
  color: var(--mbs-grey-dark);
  max-width: 64ch;
  line-height: 1.62;
  margin-bottom: 0;
}

/* ---------- Comparison console ---------- */
.mbs-home-console {
  margin: 2.25rem 0 0.5rem;
  border: 1px solid var(--mbs-grey-mid);
  border-radius: 12px;
  background: #fff;
  box-shadow: var(--mbs-shadow);
  overflow: hidden;
}

.mbs-home-console > h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 1.15rem 1.4rem 1rem;
  border-bottom: 1px solid var(--mbs-grey-mid);
  background: linear-gradient(180deg, #fbfcfd, var(--mbs-grey-light));
}

.mbs-home-console > p {
  margin: 0;
  padding: 1.05rem 1.4rem;
  color: var(--mbs-grey-dark);
  line-height: 1.6;
  border-bottom: 1px solid var(--mbs-grey-mid);
}

.mbs-compare-wrap { padding: 0; }

/* filter chip rail (injected by compare-filter.js) */
.mbs-chip-bar {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  padding: .9rem 1.4rem;
  border-bottom: 1px solid var(--mbs-grey-mid);
  background: var(--mbs-grey-light);
}

.mbs-chip {
  font-family: var(--mbs-font-body);
  font-size: .8125rem;
  font-weight: 500;
  border: 1px solid var(--mbs-grey-mid);
  background: #fff;
  color: var(--mbs-grey-dark);
  border-radius: 6px;
  padding: .375rem .75rem;
  cursor: pointer;
  line-height: 1;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.mbs-chip:hover { border-color: #9aa4b3; color: var(--mbs-ink); }
.mbs-chip--active,
.mbs-chip[aria-pressed="true"] {
  background: var(--mbs-accent);
  border-color: var(--mbs-accent);
  color: #fff;
}

/* ---------- the table: ranked editorial ledger ---------- */
.mbs-compare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mbs-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 880px;
}

.mbs-compare-table thead th {
  font-family: var(--mbs-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mbs-grey-dark);
  text-align: right;
  padding: .85rem .9rem;
  border-bottom: 2px solid var(--mbs-ink);
  background: #fff;
  white-space: nowrap;
}
.mbs-compare-table thead th.mbs-th-rank { width: 56px; padding-left: 1.4rem; }
.mbs-compare-table thead th:nth-child(2) { text-align: left; }

.mbs-compare-table thead th[data-sort] { cursor: pointer; transition: color .12s ease; }
.mbs-compare-table thead th[data-sort]:hover { color: var(--mbs-ink); }
.mbs-compare-table thead th[aria-sort="ascending"],
.mbs-compare-table thead th[aria-sort="descending"] { color: var(--mbs-accent); }
.mbs-sort-icon { display: inline-block; vertical-align: -2px; margin-left: 3px; color: #9aa4b3; transition: color .12s ease; }
.mbs-compare-table thead th[data-sort]:hover .mbs-sort-icon { color: var(--mbs-accent); }

.mbs-compare-table tbody td {
  padding: .95rem .9rem;
  border-bottom: 1px solid #eceef2;
  text-align: right;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  background: #fff;
  transition: background .12s ease;
}
.mbs-compare-table tbody tr:nth-child(even) td { background: #fafbfd; }
.mbs-compare-table tbody tr:hover td { background: #eef3f1; }
.mbs-compare-table tbody tr:last-child td { border-bottom: none; }

/* ---- rank rail: podium medallions for the top three ---- */
.mbs-col-rank { padding-left: 1.4rem !important; text-align: center !important; }
.mbs-rank-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: .9rem;
  color: var(--mbs-grey-dark);
  background: #eef0f4;
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
}
.mbs-compare-table tbody tr[data-rank="1"] .mbs-rank-num { background: var(--mbs-ink); color: #fff; }
.mbs-compare-table tbody tr[data-rank="2"] .mbs-rank-num { background: var(--mbs-accent); color: #fff; }
.mbs-compare-table tbody tr[data-rank="3"] .mbs-rank-num { background: #cfe2da; color: var(--mbs-ink); }

/* ---- best-value row: teal accent rail + tint + flag ---- */
.mbs-compare-table tbody tr.mbs-row-best td { background: #eaf4ef; box-shadow: inset 3px 0 0 0 var(--mbs-accent); }
.mbs-compare-table tbody tr.mbs-row-best:hover td { background: #e0efe7; }
.mbs-best-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 6px;
  font-family: var(--mbs-font-body);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1a624f;
}
.mbs-best-flag svg { color: var(--mbs-accent); }

/* operator identity column — logo or styled wordmark fallback. */
.mbs-col-op { text-align: left !important; width: 210px; }
.mbs-op-logo,
.mbs-op-wordmark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 32px;
  max-width: 150px;
}
.mbs-op-logo {
  height: 32px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  object-position: left center;
}
.mbs-op-wordmark {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -.01em;
  color: var(--mbs-ink);
}
.mbs-op-wordmark[data-brand="snai"]    { color: #0a3b8c; }
.mbs-op-wordmark[data-brand="eurobet"] { color: #1a7a34; }
.mbs-op-wordmark[data-brand="bet365"]  { color: #027b5b; }
.mbs-op-wordmark[data-brand="goldbet"] { color: #FFCB03; }
.mbs-op-wordmark[data-brand="planetwin365"] { color: #FAB615; }
.mbs-op-wordmark[data-brand="admiralbet"]   { color: #1f5fa6; }

/* bonus amount */
.mbs-bonus-amount {
  display: block;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.015em;
  color: var(--mbs-ink);
}

/* rollover value + severity gauge */
.mbs-col-rollover { white-space: nowrap; }
.mbs-rollover-value {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  margin-right: .5rem;
  color: var(--mbs-ink);
}
.mbs-severity {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .01em;
  padding: .2rem .55rem .2rem .45rem;
  border-radius: 999px;
  white-space: nowrap;
}
.mbs-severity::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mbs-severity--ottimale   { color: var(--mbs-positive); background: #1f7a4d14; }
.mbs-severity--impegnativo{ color: var(--mbs-warning);  background: #9c541814; }
.mbs-severity--severo     { color: var(--mbs-severe);   background: #9a332614; }

/* neutral outbound action — never a glowing claim button */
.mbs-col-cta { white-space: nowrap; }
.mbs-cta-link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--mbs-font-body);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--mbs-accent);
  border: 1px solid var(--mbs-accent);
  border-radius: 8px;
  padding: .55rem .85rem;
  text-decoration: none;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.mbs-cta-arrow { transition: transform .14s ease; }
.mbs-cta-link:hover { background: var(--mbs-accent); color: #fff; opacity: 1; box-shadow: 0 6px 16px -8px #2f6f5e80; }
.mbs-cta-link:hover .mbs-cta-arrow { transform: translateX(3px); }
.mbs-row-best .mbs-cta-link { background: var(--mbs-accent); color: #fff; }
.mbs-row-best .mbs-cta-link:hover { background: #285f50; border-color: #285f50; }
.mbs-no-url { color: var(--mbs-grey-dark); font-size: .8125rem; }

/* ---- mobile card-stack: ≤760px each row becomes a self-labelled card.
   Drops the table min-width so the page never overflows horizontally
   (shared-table-class footprint guard: scrollWidth === clientWidth). ---- */
@media (max-width: 760px) {
  .mbs-compare-scroll { overflow-x: visible; }
  .mbs-compare-table { min-width: 0; width: 100%; display: block; }
  .mbs-compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mbs-compare-table tbody { display: block; }
  .mbs-compare-table tbody tr { display: block; margin-bottom: 14px; border: 1px solid var(--mbs-grey-mid); border-radius: 10px; overflow: hidden; background: #fff; }
  .mbs-compare-table tbody tr:nth-child(even) td { background: #fff; }
  .mbs-compare-table tbody tr:hover td { background: #fff; }
  .mbs-compare-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: right; padding: .65rem .95rem; border-bottom: 1px solid #eceef2; background: #fff !important; }
  .mbs-compare-table tbody td::before { content: attr(data-label); font-family: var(--mbs-font-body); font-size: .6875rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mbs-grey-dark); text-align: left; }
  .mbs-col-rank { justify-content: flex-start !important; padding-left: .95rem !important; }
  .mbs-col-rank::before { content: none; }
  .mbs-col-op { width: auto; }
  .mbs-col-op::before { align-self: center; }
  .mbs-compare-table tbody tr.mbs-row-best { border-color: var(--mbs-accent); box-shadow: 0 0 0 1px var(--mbs-accent); }
  .mbs-compare-table tbody tr.mbs-row-best td { box-shadow: none; }
  .mbs-cta-link { width: 100%; justify-content: center; }
  .mbs-col-cta { padding-top: .85rem; padding-bottom: .85rem; }
}

/* update note + no-results notice */
.mbs-update-note {
  padding: .85rem 1.4rem;
  border-top: 1px solid var(--mbs-grey-mid);
  background: var(--mbs-grey-light);
  font-size: .8125rem;
  color: var(--mbs-grey-dark);
  margin: 0;
}
.mbs-no-results {
  padding: 1.25rem 1.4rem;
  font-size: .9375rem;
  color: var(--mbs-grey-dark);
}

/* ---------- body prose ---------- */
.mbs-home-body {
  max-width: none;
  margin: 3rem 0 0;
}
.mbs-home-body h2 {
  font-family: var(--mbs-font-heading);
  font-size: 1.5rem;
  letter-spacing: -.02em;
  margin: 2.5rem 0 .9rem;
  padding-top: 1.5rem;
  border-top: 1px solid #eceef2;
}
.mbs-home-body > h2:first-of-type { border-top: none; padding-top: 0; }
.mbs-home-body h3 {
  font-family: var(--mbs-font-heading);
  font-size: 1.15rem;
  color: var(--mbs-accent);
  margin: 1.7rem 0 .6rem;
}
.mbs-home-body p { margin-bottom: 1rem; }
.mbs-home-body ul {
  margin: 0 0 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.mbs-home-body li { line-height: 1.6; }

/* ---------- Calculator strip (signature: bonus -> turnover transform) ----------
   Replaces the old left-accent-bar tool teaser. The teaser now *is* a worked
   mini-equation: the product the calculator computes, shown as type. No accent
   bar, no uppercase eyebrow, no muted-body-over-tint (Gate 14). */
.mbs-calc-strip {
  position: relative;
  overflow: hidden;
  margin: 2rem 0;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "lead eq"
    "link eq";
  gap: .35rem 2rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #0a0e1a, #16223a);
  border: 1px solid rgba(0,229,138,.22);
  border-radius: 10px;
  color: #fff;
}
/* bottom glow line — echoes the hero baseline (brand signal), NOT a callout accent bar */
.mbs-calc-strip::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--mbs-lime) 0%, var(--mbs-lime-soft) 40%, transparent 82%);
  box-shadow: 0 0 14px rgba(0,229,138,.4);
}
.mbs-calc-strip__lead { grid-area: lead; }
.mbs-calc-strip__title {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -.01em;
  margin: 0 0 .3rem;
  color: #fff;
}
.mbs-calc-strip__sub {
  margin: 0;
  font-size: .9rem;
  line-height: 1.5;
  color: #c4cad6;
  max-width: 42ch;
}
.mbs-calc-strip__link {
  grid-area: link;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .65rem;
  padding: .55rem 1.05rem;
  font-weight: 600;
  font-size: .92rem;
  color: var(--mbs-ink);
  background: #fff;
  border-radius: 6px;
  transition: transform .15s ease, background .15s ease;
}
.mbs-calc-strip__link:hover { background: #eef0f4; transform: translateX(2px); }
/* internal calculator link — a TOOL CTA (not an operator claim), so lime is
   compliant here; the operator "vai al sito" button stays neutral by design. */
.mbs-calc-strip__link {
  color: #04140c;
  background: var(--mbs-lime);
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px -8px rgba(0,229,138,.6);
}
.mbs-calc-strip__link:hover { background: var(--mbs-lime-soft); transform: translateY(-2px); }
.mbs-calc-strip__eq {
  grid-area: eq;
  display: flex;
  align-items: center;
  gap: .7rem;
  white-space: nowrap;
}
.mbs-eq-term { display: flex; flex-direction: column; align-items: center; line-height: 1.05; }
.mbs-eq-num {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.65rem;
  color: #fff;
}
.mbs-eq-term--out .mbs-eq-num { color: var(--mbs-lime); text-shadow: 0 0 18px rgba(0,229,138,.4); }
.mbs-eq-tag {
  font-size: .62rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9aa2b2;
  margin-top: .2rem;
}
.mbs-eq-op { font-size: 1.15rem; font-weight: 700; color: var(--mbs-lime); }
.mbs-eq-arrow { font-size: 1.5rem; color: var(--mbs-lime); line-height: 1; }

@media (max-width: 640px) {
  .mbs-calc-strip {
    grid-template-columns: 1fr;
    grid-template-areas: "eq" "lead" "link";
    gap: 1rem;
    text-align: left;
  }
  .mbs-calc-strip__eq { justify-content: center; }
}

/* ---------- Turnover band (breaks the long body column; reuses severity colors) ----------
   The four worked numbers pulled out of prose into one scannable row. Same
   ok/mid/hi severity language as the comparison console, so it reads as the
   same system, not a new one. */
.mbs-turnover-band {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .75rem;
  margin: 1.5rem 0 .75rem;
}
.mbs-turnover-card {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  padding: 1rem .9rem 1.1rem;
  background: #fff;
  border: 1px solid var(--mbs-grey-mid);
  border-top: 3px solid var(--mbs-grey-mid);
  border-radius: 6px;
}
.mbs-turnover-card[data-sev="ok"]  { border-top-color: var(--mbs-positive); }
.mbs-turnover-card[data-sev="mid"] { border-top-color: var(--mbs-warning); }
.mbs-turnover-card[data-sev="hi"]  { border-top-color: #b23b3b; }
.mbs-tc-op {
  font-family: var(--mbs-font-heading);
  font-weight: 600;
  font-size: .9rem;
  color: var(--mbs-ink);
}
.mbs-tc-eq { display: flex; align-items: baseline; flex-wrap: wrap; gap: .3rem; }
.mbs-tc-in { font-size: 1rem; color: var(--mbs-grey-dark); }
.mbs-tc-x  { font-size: .8rem; color: var(--mbs-grey-dark); }
.mbs-tc-arr { color: var(--mbs-accent); font-size: 1rem; }
.mbs-tc-out {
  flex-basis: 100%;
  margin-top: .15rem;
  line-height: 1.05;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--mbs-ink);
}
.mbs-tc-sev {
  align-self: flex-start;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  border-radius: 100px;
}
.mbs-turnover-card[data-sev="ok"]  .mbs-tc-sev { color: var(--mbs-positive); background: rgba(31,122,77,.1); }
.mbs-turnover-card[data-sev="mid"] .mbs-tc-sev { color: var(--mbs-warning);  background: rgba(180,100,42,.1); }
.mbs-turnover-card[data-sev="hi"]  .mbs-tc-sev { color: #b23b3b; background: rgba(178,59,59,.1); }
.mbs-turnover-note {
  font-size: .85rem;
  color: var(--mbs-grey-dark);
  margin: 0 0 1.25rem;
}
@media (max-width: 720px) {
  .mbs-turnover-band { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
  .mbs-turnover-band { grid-template-columns: 1fr; }
}

/* ---------- FAQ accordion ---------- */
.mbs-home-faq {
  max-width: none;
  margin: 3rem 0 0;
}
.mbs-home-faq > h2 {
  font-size: 1.45rem;
  letter-spacing: -.02em;
  margin-bottom: 1.25rem;
}
.mbs-faq-item {
  border: 1px solid var(--mbs-grey-mid);
  border-radius: 8px;
  background: #fff;
  margin-bottom: .6rem;
  overflow: hidden;
}
.mbs-faq-q {
  list-style: none;
  cursor: pointer;
  padding: .95rem 2.5rem .95rem 1.1rem;
  font-family: var(--mbs-font-heading);
  font-weight: 600;
  font-size: 1rem;
  position: relative;
}
.mbs-faq-q::-webkit-details-marker { display: none; }
.mbs-faq-q::after {
  content: "+";
  position: absolute;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.25rem;
  font-weight: 400;
  color: var(--mbs-accent);
  line-height: 1;
}
.mbs-faq-item[open] .mbs-faq-q::after { content: "\2212"; } /* minus */
.mbs-faq-item[open] .mbs-faq-q { border-bottom: 1px solid #eceef2; }
.mbs-faq-a {
  padding: .95rem 1.1rem 1.1rem;
  color: var(--mbs-grey-dark);
}
.mbs-faq-a p { margin: 0; }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .mbs-home-title { font-size: clamp(2.1rem, 8.5vw, 2.8rem); }
  .mbs-home-body, .mbs-home-faq { max-width: none; }
}

/* --- nav hardening (2026-06-26): concise labels, no mid-word wrap --- */
.mbs-primary-nav ul {
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  justify-content: flex-end;
}
.mbs-primary-nav li { margin: 0; }
.mbs-primary-nav a {
  white-space: nowrap;
  display: inline-block;
}
.mbs-primary-nav .current-menu-item > a { color: #5fae97; }
@media (max-width: 980px) {
  .mbs-primary-nav ul { gap: .9rem; }
  .mbs-primary-nav a { font-size: .875rem; }
}

/* --- guide thumb cards (2026-06-26): replace thin inline guide-links --- */
.mbs-guide-thumb {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  padding: .95rem 1.1rem;
  background: #fff;
  border: 1px solid var(--mbs-grey-mid);
  border-left: 4px solid var(--mbs-accent);
  border-radius: 4px 10px 10px 4px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mbs-guide-thumb:hover {
  border-color: var(--mbs-accent);
  box-shadow: 0 6px 18px rgba(20,27,46,.08);
  transform: translateY(-1px);
}
.mbs-guide-thumb__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 9px;
  background: var(--mbs-ink, #141b2e);
  color: #fff;
}
.mbs-guide-thumb__body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mbs-guide-thumb__kicker {
  font-size: .68rem; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: var(--mbs-accent);
}
.mbs-guide-thumb__title {
  font-family: var(--mbs-font-heading, inherit);
  font-weight: 700; font-size: 1.02rem; color: var(--mbs-ink, #141b2e);
  line-height: 1.25;
}
.mbs-guide-thumb__desc { font-size: .875rem; color: var(--mbs-grey-mid, #5a6373); line-height: 1.35; }
.mbs-guide-thumb__arrow {
  flex: 0 0 auto; margin-left: auto; font-size: 1.3rem; color: var(--mbs-accent);
  transition: transform .15s ease;
}
.mbs-guide-thumb:hover .mbs-guide-thumb__arrow { transform: translateX(3px); }
@media (max-width: 560px) { .mbs-guide-thumb__desc { display: none; } }

/* --- nav fit fix (2026-06-26 v2): keep 7 items on one row, no mid-word wrap --- */
.mbs-nav-wrap { gap: 1.5rem; flex-wrap: nowrap; }
.mbs-site-logo { flex: 0 0 auto; font-size: 1.15rem; }
.mbs-primary-nav { flex: 1 1 auto; min-width: 0; }
.mbs-primary-nav ul {
  flex-wrap: nowrap;
  gap: 1.15rem;
  justify-content: flex-end;
}
.mbs-primary-nav a { white-space: nowrap; font-size: .9rem; }
@media (max-width: 1100px) { .mbs-primary-nav a { font-size: .82rem; } .mbs-primary-nav ul { gap: .85rem; } }
@media (max-width: 860px) {
  .mbs-nav-wrap { flex-wrap: wrap; }
  .mbs-primary-nav { flex-basis: 100%; }
  .mbs-primary-nav ul { flex-wrap: wrap; justify-content: flex-start; gap: .6rem 1rem; }
}

/* ============================================================
   Calcolatore requisiti di puntata — flagship tool styling
   (2026-06-26: classes existed in markup but had ZERO CSS → web1 look)
   ============================================================ */
.mbs-calc-wrap { margin: 1.75rem 0; }
.mbs-calc-card {
  background: #fff;
  border: 1px solid var(--mbs-grey-mid);
  border-radius: var(--mbs-radius);
  padding: 1.5rem;
  max-width: 560px;
}
.mbs-calc-head { margin-bottom: 1.25rem; }
.mbs-calc-head__title {
  margin: 0; font-family: var(--mbs-font-heading); font-size: 1.2rem;
  font-weight: 700; color: var(--mbs-ink);
}
.mbs-calc-fields { display: flex; flex-direction: column; gap: 1.1rem; }
.mbs-calc-field { display: flex; flex-direction: column; gap: .3rem; }
.mbs-calc-field__label { font-weight: 600; font-size: .9rem; color: var(--mbs-ink); }
.mbs-calc-input {
  width: 100%; box-sizing: border-box;
  padding: .7rem .85rem; font-size: 1rem;
  border: 1.5px solid var(--mbs-grey-mid); border-radius: 9px;
  background: var(--mbs-grey-light); color: var(--mbs-ink);
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mbs-calc-input:focus {
  outline: none; border-color: var(--mbs-accent); background: #fff;
  box-shadow: 0 0 0 3px rgba(47,111,94,.15);
}
.mbs-calc-field__hint { font-size: .8rem; color: var(--mbs-grey-dark); }
.mbs-calc-result {
  margin-top: 1.35rem; padding: 1.2rem; border-radius: 11px;
  background: var(--mbs-grey-light); border: 1px solid var(--mbs-grey-mid);
  display: flex; flex-direction: column; gap: 1rem;
}
.mbs-calc-stake, .mbs-calc-cost { display: flex; flex-direction: column; gap: .15rem; }
.mbs-calc-label { font-size: .82rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--mbs-grey-dark); }
.mbs-calc-amount { font-family: var(--mbs-font-heading); font-size: 1.7rem; font-weight: 800; color: var(--mbs-ink); line-height: 1.1; }
.mbs-calc-cost-val { font-size: 1.25rem; color: var(--mbs-accent); }
.mbs-calc-odds-note { margin: .15rem 0 0; font-size: .85rem; color: var(--mbs-grey-dark); }
.mbs-calc-disclaimer-inline { margin: .25rem 0 0; font-size: .76rem; color: var(--mbs-grey-dark); line-height: 1.4; }
.mbs-calc-verdict { display: flex; }
.mbs-calc-verdict .sev { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .95rem; }
.mbs-calc-verdict .sev.ok { color: var(--mbs-positive); }
.mbs-calc-verdict .sev.mid { color: var(--mbs-warning); }
.mbs-calc-verdict .sev.hi { color: var(--mbs-severe); }
.mbs-calc-verdict .bars { display: inline-flex; gap: 3px; }
.mbs-calc-verdict .bars i, .mbs-calc-severity-legend .bars i {
  width: 7px; height: 16px; border-radius: 2px;
  border: 1.5px solid currentColor; display: inline-block;
}
.mbs-calc-severity-legend { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; }
.mbs-calc-legend__title { font-weight: 700; font-size: .85rem; color: var(--mbs-ink); }
.mbs-calc-severity-legend .sev { display: inline-flex; align-items: center; gap: .45rem; font-size: .85rem; }
.mbs-calc-severity-legend .sev.ok { color: var(--mbs-positive); }
.mbs-calc-severity-legend .sev.mid { color: var(--mbs-warning); }
.mbs-calc-severity-legend .sev.hi { color: var(--mbs-severe); }
.mbs-calc-legal { margin-top: 1.1rem; font-size: .78rem; color: var(--mbs-grey-dark); line-height: 1.45; }
.mbs-embed-snippet {
  display: block; padding: .8rem; margin: .5rem 0; border-radius: 8px;
  background: var(--mbs-ink); color: #d7e4df; font-size: .78rem;
  overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

/* --- nav two-row layout (2026-06-26 v3): logo over full-width menu, no collision --- */
.mbs-nav-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: .6rem;
  padding-block: .9rem;
}
.mbs-site-logo { flex: 0 0 auto; align-self: flex-start; font-size: 1.3rem; }
.mbs-primary-nav { flex: 0 0 auto; width: 100%; border-top: 1px solid rgba(255,255,255,.12); padding-top: .55rem; }
.mbs-primary-nav ul {
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  justify-content: flex-start;
  gap: .5rem 1.4rem;
  list-style: none;
}
.mbs-primary-nav li { margin: 0; }
.mbs-primary-nav a { white-space: nowrap; font-size: .92rem; font-weight: 600; }
.mbs-primary-nav .current-menu-item > a { color: #5fae97; }
@media (max-width: 560px) { .mbs-primary-nav ul { gap: .45rem 1rem; } .mbs-primary-nav a { font-size: .86rem; } }

/* --- embed box (2026-06-26): discreet collapsible, addressed to site owners --- */
.mbs-embed-box {
  margin: 1.75rem 0;
  max-width: 560px;
  border: 1px dashed var(--mbs-grey-mid);
  border-radius: 11px;
  background: var(--mbs-grey-light);
  padding: 0;
}
.mbs-embed-box__summary {
  list-style: none; cursor: pointer;
  display: flex; flex-direction: column; gap: .1rem;
  padding: .9rem 1.1rem;
  border-radius: 11px;
}
.mbs-embed-box__summary::-webkit-details-marker { display: none; }
.mbs-embed-box__summary::after {
  content: +; position: absolute; right: 1.1rem;
  font-size: 1.3rem; color: var(--mbs-grey-dark); line-height: 1;
}
.mbs-embed-box[open] .mbs-embed-box__summary::after { content: 2013; }
.mbs-embed-box__summary { position: relative; }
.mbs-embed-box__summary-title { font-weight: 700; font-size: .95rem; color: var(--mbs-ink); }
.mbs-embed-box__summary-hint { font-size: .8rem; color: var(--mbs-grey-dark); }
.mbs-embed-box__desc { margin: 0 1.1rem .6rem; font-size: .85rem; color: var(--mbs-grey-dark); }
.mbs-embed-box .mbs-embed-snippet { margin: 0 1.1rem; }
.mbs-btn-copy {
  margin: .7rem 1.1rem 0; padding: .5rem .9rem;
  font-size: .85rem; font-weight: 600; cursor: pointer;
  background: var(--mbs-ink); color: #fff; border: 0; border-radius: 8px;
  transition: background .15s ease;
}
.mbs-btn-copy:hover { background: var(--mbs-accent); }
.mbs-embed-attribution { margin: .7rem 1.1rem 1rem; font-size: .8rem; color: var(--mbs-grey-dark); }
.mbs-embed-attribution a { color: var(--mbs-accent); }

/* Tool teaser — inline calculator prompt (editorial-crisp, not a slop callout) */
.mbs-tool-teaser {
  margin: 2rem 0;
  max-width: 560px;
  padding: 1.1rem 0 0;
  background: none;
  border: 0;
  border-top: 2px solid var(--mbs-ink);
}
.mbs-tool-teaser__title {
  margin: 0 0 .5rem;
  font-family: var(--mbs-font-heading);
  font-size: 1.05rem; font-weight: 700; color: var(--mbs-ink);
}
.mbs-tool-teaser p:not([class]) {
  margin: 0 0 .75rem;
  font-size: .9rem; color: var(--mbs-ink);
}
.mbs-tool-teaser__link {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .9rem; font-weight: 600; text-decoration: none;
  color: var(--mbs-accent);
}
.mbs-tool-teaser__link::after { content: "\2192"; transition: transform .15s ease; }
.mbs-tool-teaser__link:hover { text-decoration: underline; }
.mbs-tool-teaser__link:hover::after { transform: translateX(2px); }


/* ============================================================
   Shared page-hero + Confronto quote tool (2026-06-26)
   page-* and mbs-oc-* classes existed in markup with ZERO CSS.
   ============================================================ */
.mbs-page-main { padding-block: clamp(2rem, 4.5vw, 3rem) 1rem; }
.mbs-page-hero { padding-top: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1.5rem; }
.mbs-page-title { font-family: var(--mbs-font-heading); font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 800; color: var(--mbs-ink); line-height: 1.15; margin: 0 0 .6rem; }
.mbs-page-lede { font-size: 1.05rem; color: var(--mbs-grey-dark); line-height: 1.6; max-width: 70ch; }

.mbs-oc-notice {
  margin: 1rem 0; padding: .65rem .9rem;
  background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px;
  font-size: .85rem; color: #6b5320;
}
.mbs-oc-wrap { margin: 1.25rem 0; }
.mbs-oc-select-wrap { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.mbs-oc-select-wrap label { font-weight: 600; font-size: .9rem; color: var(--mbs-ink); }
.mbs-oc-select { padding: .5rem .7rem; font-size: .95rem; border: 1.5px solid var(--mbs-grey-mid); border-radius: 8px; background: #fff; color: var(--mbs-ink); }
.mbs-oc-table-wrap { overflow-x: auto; }
.mbs-oc-table {
  width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--mbs-grey-mid); border-radius: 12px; overflow: hidden;
  font-size: .95rem;
}
.mbs-oc-table thead th {
  background: var(--mbs-ink); color: #fff; font-weight: 600;
  text-align: center; padding: .7rem .8rem; font-size: .85rem;
}
.mbs-oc-table thead th:first-child { text-align: left; }
.mbs-oc-table tbody tr + tr { border-top: 1px solid var(--mbs-grey-light); }
.mbs-oc-op { text-align: left; padding: .7rem .8rem; font-weight: 700; color: var(--mbs-ink); }
.mbs-oc-cell { text-align: center; padding: .7rem .8rem; vertical-align: middle; }
.mbs-oc-cell .mbs-oc-odds { display: block; font-weight: 700; font-size: 1.05rem; color: var(--mbs-ink); line-height: 1.2; }
.mbs-oc-cell .mbs-oc-prob { display: block; font-size: .78rem; color: var(--mbs-grey-dark); margin-top: .1rem; }
.mbs-oc-cell .mbs-oc-flag { color: #d9a300; font-size: .9rem; }
.mbs-oc-best { background: rgba(31,122,77,.06); }
.mbs-oc-best .mbs-oc-odds { color: var(--mbs-positive); }
.mbs-oc-noscript { padding: 1rem; background: var(--mbs-grey-light); border-radius: 8px; color: var(--mbs-grey-dark); }

.mbs-oc-legend { margin: 1.5rem 0; padding: 1rem 1.2rem; background: var(--mbs-grey-light); border-radius: 10px; }
.mbs-oc-legend__list { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1rem; }
.mbs-oc-legend__list dt { font-weight: 700; color: var(--mbs-ink); font-size: .9rem; }
.mbs-oc-legend__list dd { margin: 0; font-size: .88rem; color: var(--mbs-grey-dark); }

.mbs-oc-operators { margin: 1.75rem 0; }
.mbs-oc-operators__title { font-family: var(--mbs-font-heading); font-size: 1.3rem; font-weight: 700; color: var(--mbs-ink); margin: 0 0 .5rem; }
.mbs-oc-operators__note { font-size: .9rem; color: var(--mbs-grey-dark); line-height: 1.55; margin: 0 0 .8rem; }
.mbs-oc-operators__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.mbs-oc-operators__list li { display: flex; align-items: baseline; gap: .6rem; }
.mbs-oc-op-name { font-weight: 700; color: var(--mbs-ink); min-width: 5rem; }
.mbs-oc-op-link { color: var(--mbs-accent); font-size: .9rem; }
.mbs-oc-legal { margin-top: 1.25rem; font-size: .78rem; color: var(--mbs-grey-dark); line-height: 1.45; }
@media (max-width: 560px) { .mbs-oc-legend__list { grid-template-columns: 1fr; gap: .1rem .5rem; } .mbs-oc-legend__list dd { margin-bottom: .5rem; } }

/* ============================================================
   Quiz 'Che bonus fa per te' (2026-06-26) — 28 classes had ZERO CSS
   ============================================================ */
/* Quiz <main> used the undefined .mbs-main class -> zero top padding,
   so the H1 sat flush against the nav. Match the canonical interior
   wrapper so the nav->H1 gap is identical to every other page. */
.mbs-main { padding-block: clamp(2rem, 4.5vw, 3rem) 1rem; }
.mbs-quiz-header { padding-top: clamp(2.5rem, 6vw, 4rem); margin-bottom: 1.25rem; }
.mbs-quiz-title { font-family: var(--mbs-font-heading); font-size: clamp(1.7rem,4vw,2.3rem); font-weight: 800; color: var(--mbs-ink); margin: 0 0 .5rem; }
.mbs-quiz-intro { font-size: 1.05rem; color: var(--mbs-grey-dark); line-height: 1.6; max-width: 68ch; }
.mbs-quiz-note { font-size: .82rem; color: var(--mbs-grey-dark); }
.mbs-quiz {
  margin: 1.5rem 0; max-width: 560px;
  background: #fff; border: 1px solid var(--mbs-grey-mid);
  border-radius: var(--mbs-radius); padding: 1.75rem;
}
.mbs-quiz-noscript { padding: 1rem; background: var(--mbs-grey-light); border-radius: var(--mbs-radius); color: var(--mbs-grey-dark); }
.mbs-quiz-progress { height: 7px; background: var(--mbs-grey-light); border-radius: 99px; overflow: hidden; margin-bottom: .5rem; }
.mbs-quiz-progress-bar { height: 100%; background: var(--mbs-accent); border-radius: 99px; transition: width .25s ease; }
.mbs-quiz-step-label { font-size: .8rem; font-weight: 600; color: var(--mbs-grey-dark); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 1rem; }
.mbs-quiz-question { font-family: var(--mbs-font-heading); font-size: 1.25rem; font-weight: 700; color: var(--mbs-ink); margin: 0 0 1rem; }
.mbs-quiz-options { display: flex; flex-direction: column; gap: .6rem; }
.mbs-quiz-option {
  text-align: left; padding: .85rem 1rem; font-size: .98rem; font-weight: 600;
  color: var(--mbs-ink); background: var(--mbs-grey-light);
  border: 1.5px solid var(--mbs-grey-light); border-radius: var(--mbs-radius); cursor: pointer;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.mbs-quiz-option:hover { border-color: var(--mbs-accent); background: #fff; box-shadow: inset 3px 0 0 var(--mbs-accent); }
.mbs-quiz-result { display: flex; flex-direction: column; gap: .65rem; }
.mbs-quiz-result-label { font-size: .85rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--mbs-grey-dark); margin: 0; }
.mbs-quiz-result-tipo { font-family: var(--mbs-font-heading); font-size: 1.55rem; font-weight: 800; color: var(--mbs-accent); margin: 0; line-height: 1.15; }
.mbs-quiz-result-intro { font-size: .95rem; color: var(--mbs-grey-dark); margin: .35rem 0 0; }
.mbs-quiz-checklist { margin: .25rem 0 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .35rem; }
.mbs-quiz-checklist li { font-size: .92rem; color: var(--mbs-ink); line-height: 1.45; }
.mbs-quiz-result-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .9rem; }
.mbs-quiz-link {
  display: inline-block; padding: .65rem 1.1rem; font-size: .92rem; font-weight: 700;
  text-decoration: none; border-radius: var(--mbs-radius); background: var(--mbs-ink); color: #fff;
  transition: background .15s ease;
}
.mbs-quiz-link:hover { background: var(--mbs-accent); }
.mbs-quiz-link--secondary { background: transparent; color: var(--mbs-accent); border: 1.5px solid var(--mbs-accent); }
.mbs-quiz-link--secondary:hover { background: var(--mbs-accent); color: #fff; }
.mbs-quiz-restart {
  align-self: flex-start; margin-top: .4rem; padding: .4rem .8rem; font-size: .85rem; font-weight: 600;
  background: transparent; border: 0; color: var(--mbs-grey-dark); cursor: pointer; text-decoration: underline;
}
.mbs-quiz-guides { margin: 2rem 0; }
.mbs-quiz-guides-title { font-family: var(--mbs-font-heading); font-size: 1.3rem; font-weight: 700; color: var(--mbs-ink); margin: 0 0 .8rem; }
.mbs-quiz-guides-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.mbs-quiz-guide-link {
  display: flex; flex-direction: column; gap: .15rem; padding: .85rem 1.1rem;
  background: #fff; border: 1px solid var(--mbs-grey-mid);
  border-radius: var(--mbs-radius); text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, padding-left .15s ease;
}
.mbs-quiz-guide-link:hover { border-color: var(--mbs-accent); box-shadow: inset 3px 0 0 var(--mbs-accent); padding-left: 1.35rem; }
.mbs-quiz-guide-label { font-weight: 700; color: var(--mbs-ink); font-size: 1rem; }
.mbs-quiz-guide-desc { font-size: .85rem; color: var(--mbs-grey-dark); line-height: 1.35; }

/* ============================================================
   Data-story infographic + embed (metodologia) — 2026-06-29
   Site-specific figure treatment: brand-accent top rule (echoes
   .mbs-doc-title::after + the SVG's own 8px band), NOT the generic
   border-l-4 tinted callout (AI-slop Gate 14). The <details> embed
   ships a readonly <textarea> so the snippet is one-tap copyable.
   ============================================================ */
.mbs-infographic {
  margin: 2.25rem 0;
  padding: 1.25rem 1.25rem 1rem;
  background: #fff;
  border: 1px solid var(--mbs-grey-mid);
  border-top: 3px solid var(--mbs-accent);
  border-radius: var(--mbs-radius);
  box-shadow: 0 1px 0 #141b2e0d, 0 8px 28px -20px #141b2e40;
}
.mbs-infographic img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.mbs-infographic figcaption {
  margin-top: .85rem;
  font-size: .85rem;
  color: var(--mbs-grey-dark);
  line-height: 1.5;
}
.mbs-ig-embed {
  margin-top: .85rem;
  border-top: 1px solid #eceef2;
  padding-top: .75rem;
}
.mbs-ig-embed > summary {
  cursor: pointer;
  font-size: .85rem;
  font-weight: 600;
  color: var(--mbs-accent);
  list-style: none;
}
.mbs-ig-embed > summary::-webkit-details-marker { display: none; }
.mbs-ig-embed > summary::before {
  content: "\002B";
  display: inline-block;
  width: 1.1em;
  font-weight: 700;
}
.mbs-ig-embed[open] > summary::before { content: "\2212"; }
.mbs-ig-embed textarea {
  width: 100%;
  margin-top: .65rem;
  min-height: 5.5rem;
  padding: .65rem .8rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--mbs-ink);
  background: var(--mbs-grey-light);
  border: 1px solid var(--mbs-grey-mid);
  border-radius: 2px;
  resize: vertical;
}
.mbs-ig-embed p {
  margin: .5rem 0 0;
  font-size: .78rem;
  color: var(--mbs-grey-dark);
}

/* ============================================================
   Homepage load — staggered reveal (motion enhancement)
   Title → freshness → lede → console arrive in sequence.
   Gated by prefers-reduced-motion: users who opt out get the
   final layout instantly (no movement, full opacity).
   ============================================================ */
@keyframes mbsRise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
/* sporty-elevation motion: headline underline swipe + pulsing freshness dot */
@keyframes mbsSwipe { to { transform: scaleX(1); } }
@keyframes mbsPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0,229,138,.5); }
  70%  { box-shadow: 0 0 0 7px rgba(0,229,138,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,229,138,0); }
}
.mbs-home-hero .mbs-home-title,
.mbs-home-hero .mbs-home-freshness,
.mbs-home-hero .mbs-home-lede,
.mbs-home-console { opacity: 0; animation: mbsRise .6s cubic-bezier(.22,.61,.36,1) forwards; }
.mbs-home-hero .mbs-home-title { animation-delay: .05s; }
.mbs-home-hero .mbs-home-freshness { animation-delay: .14s; }
.mbs-home-hero .mbs-home-lede { animation-delay: .22s; }
.mbs-home-console { animation-delay: .34s; }

@media (prefers-reduced-motion: reduce) {
  .mbs-home-hero .mbs-home-title,
  .mbs-home-hero .mbs-home-freshness,
  .mbs-home-hero .mbs-home-lede,
  .mbs-home-console { opacity: 1; animation: none; transform: none; }
  /* sporty-elevation motion opts out too: underline shown, dot static */
  .mbs-home-title::after { animation: none; transform: scaleX(1); }
  .mbs-home-freshness::before { animation: none; }
}

/* Bonus sub-line: tiered/structured-offer note under the headline amount.
   Small muted caption, NOT a tinted callout box (Gate 14 safe). */
.mbs-col-bonus .mbs-bonus-note { display: block; margin-top: 2px; font-size: .72rem; line-height: 1.3; font-weight: 500; color: #5b6472; max-width: 18ch; }

/* ============================================================
   Bespoke bonus-type table (.mbs-btable) — used by cashback /
   fedeltà / multipla pages. Reuses the compare-table aesthetic
   (uppercase ink header, zebra rows) but left-aligned, no rank
   rail, arbitrary columns. Scrolls horizontally on mobile.
   ============================================================ */
.mbs-btable-wrap { overflow-x: auto; margin: 0; -webkit-overflow-scrolling: touch; }
.mbs-btable {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 720px;
  font-size: .9375rem;
}
.mbs-btable thead th {
  font-family: var(--mbs-font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mbs-grey-dark);
  text-align: left;
  padding: .85rem .9rem;
  border-bottom: 2px solid var(--mbs-ink);
  background: #fff;
  white-space: nowrap;
}
.mbs-btable thead th:first-child { padding-left: 1.4rem; }
.mbs-btable thead th:last-child { padding-right: 1.4rem; }
.mbs-btable tbody td {
  padding: .95rem .9rem;
  border-bottom: 1px solid #eceef2;
  text-align: left;
  vertical-align: top;
  background: #fff;
  line-height: 1.5;
  color: var(--mbs-ink);
  transition: background .12s ease;
}
.mbs-btable tbody td:first-child {
  padding-left: 1.4rem;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  white-space: nowrap;
}
.mbs-btable tbody td:last-child { padding-right: 1.4rem; }
.mbs-btable tbody tr:nth-child(even) td { background: #fafbfd; }
.mbs-btable tbody tr:hover td { background: #eef3f1; }
.mbs-btable tbody tr:last-child td { border-bottom: none; }
.mbs-home-console > p.mbs-btable-note { font-size: .85rem; border-bottom: none; }

@media (max-width: 640px) {
  .mbs-btable { min-width: 0; }
  .mbs-btable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .mbs-btable tbody tr { display: block; border-bottom: 2px solid var(--mbs-ink); padding: .3rem 0; }
  .mbs-btable tbody tr:last-child { border-bottom: none; }
  .mbs-btable tbody td { display: flex; justify-content: space-between; gap: 1rem; text-align: right; border-bottom: 1px solid #eceef2; padding: .5rem 1.4rem; white-space: normal; }
  .mbs-btable tbody td:first-child { white-space: normal; }
  .mbs-btable tbody td::before { content: attr(data-label); font-weight: 700; color: var(--mbs-grey-dark); text-align: left; }
}

.mbs-btable tbody td:first-child { vertical-align: middle; }
.mbs-btable .mbs-op-logo { max-height: 30px; width: auto; }

/* bonus-type table → full parity with homepage console: rank medallion + CTA column */
.mbs-btable .mbs-btable-rank { padding-left: 1.4rem; text-align: center; width: 44px; vertical-align: middle; }
.mbs-btable tbody tr[data-rank="1"] .mbs-rank-num { background: var(--mbs-ink); color: #fff; }
.mbs-btable tbody tr[data-rank="2"] .mbs-rank-num { background: var(--mbs-accent); color: #fff; }
.mbs-btable tbody tr[data-rank="3"] .mbs-rank-num { background: #cfe2da; color: var(--mbs-ink); }
.mbs-btable .mbs-btable-op { width: 170px; vertical-align: middle; }
.mbs-btable .mbs-btable-cta { text-align: right; padding-right: 1.4rem; white-space: nowrap; vertical-align: middle; }
.mbs-btable .mbs-no-url { color: var(--mbs-grey-dark); font-size: .85rem; }

/* ============================================================
   Mondiali 2026 — themed hero (gold "champions" accent + lime,
   faint football-pitch motif). Scoped to .mbs-mondiali so only
   the World-Cup page differs. No new motion (reuses gated ones).
   ============================================================ */
.mbs-mondiali .mbs-home-hero {
  background:
    radial-gradient(120% 150% at 92% -20%, rgba(245,196,81,.15) 0%, transparent 46%),
    radial-gradient(90% 120% at 6% 115%, rgba(0,229,138,.07) 0%, transparent 50%),
    linear-gradient(158deg, #0a0e1a 0%, #101827 55%, #16223a 100%);
}
.mbs-mondiali .mbs-home-hero::before {
  background-image:
    repeating-linear-gradient(115deg, rgba(255,255,255,.022) 0 1px, transparent 1px 46px),
    radial-gradient(circle at 99% 46%, transparent 150px, rgba(245,196,81,.11) 151px 153px, transparent 154px);
  background-repeat: no-repeat;
}
.mbs-mondiali .mbs-home-hero::after {
  background: linear-gradient(90deg, #f5c451 0%, #f5c451 24%, #16e086 48%, transparent 82%);
  box-shadow: 0 0 18px rgba(245,196,81,.4);
}
.mbs-mondiali .mbs-home-title::after {
  background: linear-gradient(90deg, #f5c451, #16e086);
  box-shadow: 0 0 14px rgba(245,196,81,.5);
}
.mbs-mondiali-kicker {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: 1.1rem;
  font-family: var(--mbs-font-heading);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #f5c451;
}
.mbs-mondiali-kicker svg { flex-shrink: 0; color: #f5c451; }
.mbs-mondiali-flag {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 1.35rem 0 0;
  padding: .5rem .9rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #f6dc95;
  background: rgba(245,196,81,.09);
  border: 1px solid rgba(245,196,81,.30);
  border-radius: 8px;
}
.mbs-mondiali-flag svg { flex-shrink: 0; color: #f5c451; }
/* gold top-accent on the section card, tying the table into the theme */
.mbs-mondiali .mbs-home-console { border-top: 3px solid #f5c451; }

/* ---- design-review batch: FAQ open-state + mobile stat grid ---- */
.mbs-faq-item[open] { box-shadow: inset 3px 0 0 0 var(--mbs-lime); }
@media (max-width: 560px) {
  .mbs-home-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; }
  .mbs-home-stats .mbs-stat { min-width: 0; }
}

/* ---- inline rollover calculator (live calc-strip) ---- */
.mbs-calc-strip.mbs-calc-live { display: block; }
.mbs-calc-live .mbs-calc-strip__lead { margin-bottom: 1rem; }
.mbs-calc-strip__form { display: flex; align-items: flex-end; gap: .9rem 1.1rem; flex-wrap: wrap; margin: 0 0 1.1rem; }
.mbs-calc-field { display: flex; flex-direction: column; gap: .35rem; }
.mbs-calc-field > label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa6b8; }
.mbs-calc-input { display: inline-flex; align-items: center; gap: .1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: .5rem .7rem; transition: border-color .15s ease, box-shadow .15s ease; }
.mbs-calc-input:focus-within { border-color: #00e58a; box-shadow: 0 0 0 3px rgba(0,229,138,.18); }
.mbs-calc-input span { color: #9aa6b8; font-weight: 600; }
.mbs-calc-input input { width: 4.2rem; border: 0; background: transparent; color: #fff; font-family: var(--mbs-font-heading); font-weight: 700; font-size: 1.15rem; -moz-appearance: textfield; }
.mbs-calc-input input:focus { outline: none; }
.mbs-calc-input input::-webkit-outer-spin-button, .mbs-calc-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mbs-calc-field--toggle { align-self: center; }
.mbs-calc-toggle { display: inline-flex; align-items: center; gap: .45rem; font-size: .82rem; font-weight: 500; color: #cdd6e3; cursor: pointer; }
.mbs-calc-toggle input { accent-color: #00e58a; width: 16px; height: 16px; }
.mbs-calc-out { display: flex; flex-direction: column; gap: .2rem; margin-left: auto; text-align: right; }
.mbs-calc-out__label { font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #9aa6b8; }
.mbs-calc-out__val { font-family: var(--mbs-font-heading); font-weight: 700; font-size: 2rem; line-height: 1; color: #00e58a; text-shadow: 0 0 18px rgba(0,229,138,.4); font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .mbs-calc-out { margin-left: 0; text-align: left; width: 100%; } .mbs-calc-input input { width: 100%; } }

/* ---- bonus-type table footer: update stamp ---- */
.mbs-home-console > p.mbs-btable-note { border-bottom: none; }
.mbs-home-console > p.mbs-btable-updated { font-size: .78rem; color: var(--mbs-grey-dark); border-bottom: none; padding-top: .55rem; }

/* ---- in-page TOC ("In questa pagina") + scroll-spy ---- */
.mbs-home-body .mbs-toc { margin: 0 0 2rem; padding: 1rem 1.25rem; background: var(--mbs-grey-light); border: 1px solid #eceef2; border-radius: 10px; }
.mbs-home-body .mbs-toc__title { margin: 0 0 .55rem; font-family: var(--mbs-font-heading); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mbs-grey-dark); }
.mbs-home-body .mbs-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: .45rem 1.25rem; }
.mbs-home-body .mbs-toc__list li { margin: 0; line-height: 1.3; }
.mbs-home-body .mbs-toc__list a { color: var(--mbs-ink); text-decoration: none; font-size: .92rem; border-bottom: 2px solid transparent; padding-bottom: 1px; transition: border-color .15s ease; }
.mbs-home-body .mbs-toc__list a:hover { border-bottom-color: var(--mbs-grey-mid); }
.mbs-home-body .mbs-toc__list a.is-active { border-bottom-color: var(--mbs-lime); font-weight: 600; }

/* ---- mobile hamburger nav (≤760px); desktop unchanged ---- */
.mbs-nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; }
.mbs-nav-toggle { display: none; }
@media (max-width: 760px) {
  .mbs-nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 8px; cursor: pointer; color: #fff; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); flex: 0 0 auto; }
  .mbs-nav-toggle:hover { background: rgba(255,255,255,.1); }
  .mbs-nav-wrap .mbs-primary-nav { display: none; width: 100%; border-top: none; padding-top: 0; }
  .mbs-nav-wrap.is-open .mbs-primary-nav { display: block; border-top: 1px solid rgba(255,255,255,.12); margin-top: .5rem; padding-top: .35rem; }
  .mbs-nav-wrap.is-open .mbs-primary-nav ul { flex-direction: column; flex-wrap: nowrap; gap: 0; }
  .mbs-nav-wrap.is-open .mbs-primary-nav li { width: 100%; }
  .mbs-nav-wrap.is-open .mbs-primary-nav a { display: block; padding: .75rem .15rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* ============================================================
   Interactive tools — unified dark "preferred" skin (2026-07-02)
   The homepage calc-strip (dark card + lime volume readout) is the
   canonical look. The full requisito-di-puntata calculator AND the
   "che bonus fa per te" quiz are brought onto the SAME skin so the
   requisito-di-puntata tool reads identically on every page.

   All rules are scoped under .mbs-calc-wrap/.mbs-calc-card and
   .mbs-quiz so they win on specificity over BOTH the legacy light
   rules and the bare-class calc-strip rules — this also resolves the
   .mbs-calc-input collision (calc-strip styled it as an inline-flex
   wrapper; on this page it IS the <input>, so it was rendering broken).
   ============================================================ */

/* ---- Full calculator page: dark card ---- */
.mbs-calc-wrap { margin: 2rem 0; }
.mbs-calc-wrap .mbs-calc-card {
  position: relative; overflow: hidden;
  max-width: 640px;
  padding: 1.65rem 1.75rem 1.75rem;
  background: linear-gradient(135deg, #0a0e1a, #16223a);
  border: 1px solid rgba(0,229,138,.22);
  border-radius: 10px;
  color: #fff;
}
.mbs-calc-wrap .mbs-calc-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #00e58a 0%, #16e086 40%, transparent 82%);
  box-shadow: 0 0 14px rgba(0,229,138,.4);
}
.mbs-calc-card .mbs-calc-head__title { color: #fff; }
.mbs-calc-card .mbs-calc-fields { gap: 1.1rem; }
.mbs-calc-card .mbs-calc-field { gap: .4rem; }
.mbs-calc-card .mbs-calc-field__label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #9aa6b8;
}
.mbs-calc-card .mbs-calc-input {
  display: block; width: 100%; box-sizing: border-box;
  align-items: initial; gap: 0;
  padding: .7rem .85rem; font-size: 1.05rem;
  font-family: var(--mbs-font-heading); font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16); border-radius: 8px;
  -moz-appearance: textfield;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.mbs-calc-card .mbs-calc-input::-webkit-outer-spin-button,
.mbs-calc-card .mbs-calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mbs-calc-card .mbs-calc-input::placeholder { color: #6b7688; font-weight: 500; }
.mbs-calc-card .mbs-calc-input:focus {
  outline: none; border-color: #00e58a; background: rgba(255,255,255,.09);
  box-shadow: 0 0 0 3px rgba(0,229,138,.18);
}
.mbs-calc-card .mbs-calc-field__hint { font-size: .8rem; color: #8a94a6; }
.mbs-calc-card .mbs-calc-result {
  background: rgba(0,229,138,.06);
  border: 1px solid rgba(0,229,138,.22);
}
.mbs-calc-card .mbs-calc-label { color: #9aa6b8; }
.mbs-calc-card .mbs-calc-amount {
  color: #00e58a; text-shadow: 0 0 18px rgba(0,229,138,.4);
  font-variant-numeric: tabular-nums;
}
.mbs-calc-card .mbs-calc-cost-val { color: #16e086; }
.mbs-calc-card .mbs-calc-odds-note,
.mbs-calc-card .mbs-calc-disclaimer-inline { color: #8a94a6; }
.mbs-calc-card .mbs-calc-verdict .sev.ok,
.mbs-calc-card .mbs-calc-severity-legend .sev.ok  { color: #00e58a; }
.mbs-calc-card .mbs-calc-verdict .sev.mid,
.mbs-calc-card .mbs-calc-severity-legend .sev.mid { color: #f5c451; }
.mbs-calc-card .mbs-calc-verdict .sev.hi,
.mbs-calc-card .mbs-calc-severity-legend .sev.hi  { color: #ff6b5a; }
.mbs-calc-card .mbs-calc-legend__title { color: #c4cad6; }

/* ---- Quiz "che bonus fa per te": same dark skin ---- */
.mbs-quiz-wrap .mbs-quiz {
  position: relative; overflow: hidden;
  max-width: 640px;
  padding: 1.65rem 1.75rem 1.75rem;
  background: linear-gradient(135deg, #0a0e1a, #16223a);
  border: 1px solid rgba(0,229,138,.22);
  border-radius: 10px;
  color: #fff;
}
.mbs-quiz-wrap .mbs-quiz::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, #00e58a 0%, #16e086 40%, transparent 82%);
  box-shadow: 0 0 14px rgba(0,229,138,.4);
}
.mbs-quiz .mbs-quiz-progress { height: 8px; background: rgba(255,255,255,.10); }
.mbs-quiz .mbs-quiz-progress-bar {
  background: linear-gradient(90deg, #00e58a, #16e086);
  box-shadow: 0 0 12px rgba(0,229,138,.5);
}
.mbs-quiz .mbs-quiz-step-label { color: #00e58a; }
.mbs-quiz .mbs-quiz-question { color: #fff; }
.mbs-quiz .mbs-quiz-option {
  width: 100%; font-family: inherit; font-weight: 500; color: #e7ecf3;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mbs-quiz .mbs-quiz-option:hover,
.mbs-quiz .mbs-quiz-option:focus-visible {
  outline: none; border-color: #00e58a;
  background: rgba(0,229,138,.10);
  box-shadow: inset 3px 0 0 #00e58a;
  transform: translateX(2px);
}
.mbs-quiz .mbs-quiz-result-label { color: #9aa6b8; }
.mbs-quiz .mbs-quiz-result-tipo { color: #00e58a; text-shadow: 0 0 18px rgba(0,229,138,.35); }
.mbs-quiz .mbs-quiz-result-intro { color: #c4cad6; }
.mbs-quiz .mbs-quiz-checklist li { color: #e7ecf3; }
.mbs-quiz .mbs-quiz-checklist li::marker { color: #00e58a; }
.mbs-quiz .mbs-quiz-link { background: #00e58a; color: #0a0e1a; }
.mbs-quiz .mbs-quiz-link:hover { background: #16e086; color: #0a0e1a; }
.mbs-quiz .mbs-quiz-link--secondary { background: transparent; color: #00e58a; border: 1.5px solid rgba(0,229,138,.6); }
.mbs-quiz .mbs-quiz-link--secondary:hover { background: rgba(0,229,138,.12); color: #00e58a; }
.mbs-quiz .mbs-quiz-restart { color: #9aa6b8; }
.mbs-quiz .mbs-quiz-restart:hover { color: #fff; }

/* ---- reduced motion: no translate nudge ---- */
@media (prefers-reduced-motion: reduce) {
  .mbs-quiz .mbs-quiz-option:hover,
  .mbs-quiz .mbs-quiz-option:focus-visible { transform: none; }
}

/* ============================================================
   /operatori/ hub (archive-operatore.php) — v1.9.23
   Reuses the site card idiom (see .mbs-turnover-card): white card,
   hairline grey-mid border, 3px severity top-rule, 6px radius. The
   severity pill inside each card is the shared .mbs-severity--* badge.
   No tinted callout / left-bar / eyebrow (Gate 14).
   ============================================================ */
.mbs-hub-head {
  max-width: 62ch;
  margin-bottom: clamp(2rem, 5vw, 3rem);
}
.mbs-hub-title {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: clamp(1.9rem, 4.5vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--mbs-ink);
  margin: 0 0 1rem;
}
.mbs-hub-lede {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--mbs-grey-dark);
  margin: 0;
}

/* editorial band above the grid */
.mbs-hub-intro {
  max-width: 68ch;
  margin: 0 0 clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--mbs-grey-mid);
  padding-top: 1.75rem;
}
.mbs-hub-intro h2 {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -.01em;
  color: var(--mbs-ink);
  margin: 0 0 .85rem;
}
.mbs-hub-intro p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--mbs-grey-dark);
  margin: 0 0 1rem;
}
.mbs-hub-intro p:last-child { margin-bottom: 0; }
.mbs-hub-intro a {
  color: var(--mbs-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* operator card grid */
.mbs-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--mbs-gap);
  margin: 0 0 clamp(2.5rem, 6vw, 3.5rem);
}
.mbs-hub-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--mbs-grey-mid);
  border-top: 3px solid var(--mbs-accent);
  border-radius: 6px;
  padding: 1.25rem 1.15rem 1.15rem;
  box-shadow: var(--mbs-shadow);
}
.mbs-hub-card__logo {
  display: flex;
  align-items: center;
  min-height: 34px;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--mbs-grey-light);
}
.mbs-hub-card__logo .mbs-op-logo { height: 30px; max-width: 150px; }

/* fact list — each dt/dd pair is wrapped in a div (see template) so we
   can lay label + value on one baseline-aligned row. */
.mbs-hub-card__facts {
  margin: 0 0 1.15rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1 1 auto;
}
.mbs-hub-card__facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.mbs-hub-card__facts dt {
  font-family: var(--mbs-font-body);
  font-size: .8rem;
  color: var(--mbs-grey-dark);
  flex: 0 0 auto;
}
.mbs-hub-card__facts dd {
  margin: 0;
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1rem;
  color: var(--mbs-ink);
  text-align: right;
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mbs-hub-card__facts .mbs-severity { font-size: .625rem; }

.mbs-hub-card__more {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-family: var(--mbs-font-heading);
  font-weight: 600;
  font-size: .9rem;
  color: var(--mbs-accent);
  text-decoration: none;
  padding-top: .9rem;
  border-top: 1px solid var(--mbs-grey-light);
  width: 100%;
  transition: gap .15s ease;
}
.mbs-hub-card__more:hover,
.mbs-hub-card__more:focus-visible { gap: .7rem; text-decoration: underline; text-underline-offset: 3px; }

/* closing data-provenance note */
.mbs-hub-note {
  max-width: 68ch;
  border-top: 1px solid var(--mbs-grey-mid);
  padding-top: 1.75rem;
}
.mbs-hub-note h2 {
  font-family: var(--mbs-font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -.01em;
  color: var(--mbs-ink);
  margin: 0 0 .85rem;
}
.mbs-hub-note p {
  font-size: .95rem;
  line-height: 1.65;
  color: var(--mbs-grey-dark);
  margin: 0;
}

@media (max-width: 560px) {
  .mbs-hub-grid { grid-template-columns: 1fr; }
}