/* =========================================================
   mth-review.css — MeetingToolsHub Review System (Light+)
   CLEAN + STABLE (BTG/QB-inspired)
   - Compatible with your Zoom HTML (mp-review, money-card, btn, etc.)
   - Indigo/Violet accent system
   - NO patch stacking, NO all:unset
   - Adds missing primitives: mp-grid2, mp-h3, Quick Verdict parity
========================================================= */

/* =========================
   0) ANCHOR JUMP FIX
========================= */
:root{
  --mth-anchor-offset: 0px; /* set to sticky header height if any */
}
:root{ --mth-year: "2026"; }
html{
  scroll-padding-top: var(--mth-anchor-offset);
}

body.admin-bar{
  --mth-anchor-offset: 104px;
}
@media (max-width: 782px){
  body.admin-bar{
    --mth-anchor-offset: 118px;
  }
}

.mp-review [id]{
  scroll-margin-top: var(--mth-anchor-offset);
}
.mth-year::before{ content: var(--mth-year); }
/* =========================
   1) TOKENS (MTH)
========================= */
.mp-review{
  --mth-bg: #ffffff;
  --mth-bg2:#f6f7ff;

  --mth-card:#ffffff;
  --mth-text:#0f172a;
  --mth-muted: rgba(15,23,42,.72);
  --mth-line: rgba(15,23,42,.12);

  /* Indigo/Violet system */
  --mth-accent: var(--accent-main, #4f46e5);
  --mth-accent-hover: var(--accent-hover, #4338ca);

  /* CTA softs */
  --mth-accent-soft: rgba(79,70,229,.10);
  --mth-accent-soft-2: rgba(79,70,229,.16);
  --mth-accent-border: rgba(79,70,229,.22);

  /* Signals */
  --mth-pro:#16a34a;
  --mth-warn:#f59e0b;
  --mth-con:#dc2626;

  --mth-radius: 16px;
  --mth-max: 1080px;

  color: var(--mth-text);
  line-height: 1.55;
  background: linear-gradient(180deg, var(--mth-bg), var(--mth-bg2));
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* Full-width page breathing (like BTG) */
  padding: 22px 0 28px;
}

/* =========================
   1.1) SINGLE SOURCE LAYOUT (wrap emulation)
   - Your HTML has no .mp-wrap, so we safely emulate it:
   - Every top-level block becomes centered with consistent “gutter”.
========================= */
.mp-review > header,
.mp-review > section.money-card,
.mp-review > p.back-to-top,
.mp-review > p.money-disclaimer{
  width: calc(100% - 36px);
  max-width: var(--mth-max);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

/* =========================
   2) LINKS + TEXT
========================= */
.mp-review a{
  color: var(--mth-accent);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.mp-review a:hover{
  color: var(--mth-accent-hover);
  text-decoration-thickness: 2px;
}

.mp-review p{
  max-width: 72ch;
  font-size: 15.5px;
  line-height: 1.75;
  margin: 12px 0;
}

.mp-review .mp-muted{ color: var(--mth-muted); }
.mp-review .mp-meta{ color: var(--mth-muted); font-size: 13px; margin-top: 10px; }
.mp-review .money-disclaimer{ color: var(--mth-muted); font-size: 13px; }

/* =========================
   3) CARDS (money-card)
========================= */
.mp-review .money-card{
  background: var(--mth-card);
  border: 1px solid var(--mth-line);
  border-radius: var(--mth-radius);
  padding: 20px;
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 10px 26px rgba(15,23,42,.06);
}

.mp-review .money-card + .money-card{ margin-top: 20px; }

/* Divider */
.mp-review .mp-hr{
  height: 1px;
  background: var(--mth-line);
  margin: 16px 0;
}

/* =========================
   4) HERO GRID (split)
========================= */
.mp-review .mp-hero--split{
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 18px;
  align-items: stretch;
  margin-bottom: 18px;
}
@media (max-width: 900px){
  .mp-review .mp-hero--split{ grid-template-columns: 1fr; }
}

/* Hero subtle indigo glow on the LEFT card (BTG feel) */
.mp-review .mp-hero--split > .mp-hero-main{
  border-color: rgba(79,70,229,.18);
  background:
    radial-gradient(900px 240px at 15% 0%, rgba(79,70,229,.12), transparent 55%),
    linear-gradient(180deg, rgba(79,70,229,.07), #ffffff 70%);
  box-shadow:
    0 1px 2px rgba(15,23,42,.05),
    0 18px 40px rgba(0,0,0,.06);
}

/* =========================
   5) TYPOGRAPHY (mp-*)
========================= */
.mp-review .mp-kicker{
  color: var(--mth-muted);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .2px;
  margin: 0 0 6px;
}

.mp-review .mp-title{
  margin: .35rem 0 .6rem;
  font-size: clamp(28px, 3.2vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.mp-review .mp-subtitle{ margin: .5rem 0; }

/* H2 inside sections (left bar like BTG) */
.mp-review h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  position: relative;
  padding-left: 12px;
}
.mp-review h2::before{
  content:"";
  position:absolute;
  left:0;
  top:.28em;
  width:5px;
  height:1.1em;
  border-radius: 999px;
  background: var(--mth-accent);
  opacity:.9;
}

/* H3 utility (you use .mp-h3 in Quick Verdict) */
.mp-review .mp-h3{
  margin: 6px 0 .4rem;
  font-size: 18px;
  line-height: 1.2;
}

/* =========================
   6) PILLS (hero snapshot)
========================= */
.mp-review .mp-badge-row{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.mp-review .mp-pill{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--mth-line);
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--mth-muted);
  font-weight: 800;
  font-size: 13px;
  background: rgba(15,23,42,.02);
}
.mp-review .mp-pill strong{ color: var(--mth-text); }

/* =========================
   7) BUTTONS (.btn)
========================= */
.mp-review .mp-hero__cta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.mp-review .btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px; /* BTG parity */
  border-radius: 12px;
  border: 1px solid rgba(79,70,229,.20);
  font-weight: 800; /* BTG parity */
  text-decoration: none !important;
  transition: transform .08s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  outline: none;
  box-sizing: border-box;
  max-width: 100%;
}

.mp-review .btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15,23,42,.08);
}
.mp-review .btn:active{
  transform: translateY(0);
  box-shadow: none;
}
.mp-review .btn:focus-visible{
  box-shadow: 0 0 0 4px rgba(79,70,229,.18), 0 10px 18px rgba(15,23,42,.08);
  border-color: rgba(79,70,229,.35);
}

/* Primary */
.mp-review .btn-primary{
  background: var(--mth-accent);
  color: #fff !important;
  border-color: transparent !important;
  box-shadow: 0 8px 18px rgba(79,70,229,.18);
}
.mp-review .btn-primary:hover{
  background: var(--mth-accent-hover);
  box-shadow: 0 10px 22px rgba(79,70,229,.22);
}

/* Ghost (default) — already tinted (not white) */
.mp-review .btn-ghost{
  background: rgba(79,70,229,.06);
  border-color: rgba(79,70,229,.22);
  color: var(--mth-accent-hover) !important; /* darker like QB */
}
.mp-review .btn-ghost:hover{
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.34);
}

/* Full width helper (you use mp-btn-full) */
.mp-review .mp-btn-full{
  width: 100%;
}

/* =========================
   8) MINI TOC (pills)
========================= */
.mp-review .mp-toc{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.mp-review .mp-toc a{
  border: 1px solid rgba(79,70,229,.18);
  padding: 9px 12px;
  border-radius: 999px;
  color: #0F172A;
  font-weight: 800;
  font-size: 13px;
  background: rgba(79,70,229,.06);
  text-decoration: none !important;
}
.mp-review .mp-toc a:hover{
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.32);
}
@media (max-width: 720px){
  .mp-review .mp-toc{ gap: 8px; }
  .mp-review .mp-toc a{ font-size: 13px; padding: 10px 12px; }
}

/* =========================
   9) SCORE CARD
========================= */
.mp-review .mp-score{
  display: grid;
  gap: 10px; /* BTG parity */
}
.mp-review .mp-score__top{
  display: grid;
  gap: 6px;
}
.mp-review .mp-score__sub{
  color: var(--mth-muted);
  font-weight: 800;
}
.mp-review .mp-score__value{
  font-size: 32px;
  font-weight: 900;
  line-height: 1;
  margin-top: 2px;
}

/* Decision rule callout */
.mp-review .mp-callout{
  border-left: 3px solid var(--mth-warn);
  padding: 10px 12px;
  background: rgba(245,158,11,.08);
  border-radius: 12px;
}

/* Keep the scorecard CTA contained */
.mp-review .mp-score .btn.mp-btn-full{
  width: 100%;
}

/* =========================
   10) GRIDS (missing in your file but used by HTML)
========================= */
.mp-review .mp-grid2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 800px){
  .mp-review .mp-grid2{ grid-template-columns: 1fr; }
}

/* Spacing utilities */
.mp-review .mp-mt10{ margin-top: 10px; }
.mp-review .mp-mt12{ margin-top: 12px; }
.mp-review .mp-mt14{ margin-top: 14px; }

/* =========================
   11) LISTS (clean)
========================= */
.mp-review ul{
  margin: .4rem 0 0;
  padding-left: 18px;
}
.mp-review ul li{
  margin: 8px 0;
  line-height: 1.6;
}

/* =========================
   12) QUICK VERDICT (QB-like sub-cards)
   Your HTML uses: #quick-verdict .mp-inner
========================= */
.mp-review #quick-verdict .mp-inner{
  background: rgba(15,23,42,.018);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 16px 18px;
}

/* Keep QB-like: slightly tighter list inside verdict */
.mp-review #quick-verdict ul{
  margin: 0;
}
.mp-review #quick-verdict li{
  font-size: 14.5px;
  line-height: 1.6;
  margin: 6px 0;
}

/* Quick verdict CTA row — match QB rhythm */
.mp-review #quick-verdict .mp-hero__cta{
  margin-top: 14px;
}

/* IMPORTANT: Quick verdict buttons should look like QB
   - Bold matches QB (800)
   - Ghost looks slightly “filled” (gradient tint), not white
*/
.mp-review #quick-verdict .btn{
  font-weight: 800;
}

/* Ghost “Compare all tools” — QB-ish richer fill */
.mp-review #quick-verdict .btn-ghost{
  background: linear-gradient(
    180deg,
    rgba(79,70,229,.12),
    rgba(79,70,229,.07)
  );
  border-color: rgba(79,70,229,.30);
  color: var(--mth-accent-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.mp-review #quick-verdict .btn-ghost:hover{
  background: linear-gradient(
    180deg,
    rgba(79,70,229,.18),
    rgba(79,70,229,.10)
  );
  border-color: rgba(79,70,229,.36);
}

/* =========================
   13) PROS & CONS
========================= */
.mp-review .pros-cons{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 900px){
  .mp-review .pros-cons{ grid-template-columns: 1fr; }
}

.mp-review .pros-cons .pros,
.mp-review .pros-cons .cons{
  position: relative;
  padding-left: 22px;
}

.mp-review .pros-cons .pros{
  border-left: 5px solid var(--mth-pro);
  background: rgba(22,163,74,.06);
}

.mp-review .pros-cons .cons{
  border-left: 5px solid var(--mth-con);
  background: rgba(220,38,38,.06);
}

.mp-review .pros-cons .pros::before,
.mp-review .pros-cons .cons::before{
  position: absolute;
  top: 18px;
  left: -14px;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 14px;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
}
.mp-review .pros-cons .pros::before{
  content: "✓";
  color: var(--mth-pro);
  border: 2px solid rgba(22,163,74,.35);
}
.mp-review .pros-cons .cons::before{
  content: "!";
  color: var(--mth-con);
  border: 2px solid rgba(220,38,38,.35);
}

/* =========================
   14) BACK TO TOP + FINAL DISCLAIMER
========================= */
.mp-review .back-to-top{
  text-align: center;
  margin: 22px 0 8px;
}
.mp-review .back-to-top a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(79,70,229,.18);
  background: rgba(79,70,229,.06);
  font-weight: 900;
  text-decoration: none !important;
  color: #0F172A;
}
.mp-review .back-to-top a:hover{
  background: rgba(79,70,229,.12);
  border-color: rgba(79,70,229,.32);
}

.mp-review .mp-review-disclaimer{
  text-align: center;
  margin: 10px auto 0;
  max-width: 90ch;
}

/* =========================
   15) EZ-TOC ANCHOR FIX (if plugin is used)
========================= */
.ez-toc-container a[href^="#"]{
  scroll-margin-top: var(--mth-anchor-offset);
}
.ez-toc-container + * [id],
.mp-review h2[id],
.mp-review .mp-h3[id]{
  scroll-margin-top: var(--mth-anchor-offset);
}

/* Avoid smooth jump offset weirdness in WP */
html{ scroll-behavior: auto !important; }

/* =========================================================
   QUICK VERDICT — Zoom -> Match QuickBooks (BTG/QB)
   Put at VERY END of your CSS
========================================================= */

.money-page.mp-review#top #quick-verdict{
  /* Use QB blue system only inside Quick Verdict */
  --qv-accent: #2563EB;
  --qv-accent-hover: #1D4ED8;
}

/* 1) Stop equal-height stretch (this creates the “QB offset”) */
.money-page.mp-review#top #quick-verdict .mp-grid2{
  align-items: start !important;  /* <- key */
}

/* 2) Sub-cards: same background/border as QB soft cards */
.money-page.mp-review#top #quick-verdict .mp-inner{
  background: rgba(15,23,42,.018) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;
  height: auto !important;
}

/* 3) Typography inside quick verdict: match QB sizing */
.money-page.mp-review#top #quick-verdict h3,
.money-page.mp-review#top #quick-verdict .mp-h3{
  font-size: 18px !important;       /* QB h3 */
  font-weight: 700 !important;
  line-height: 1.2 !important;
  margin: 6px 0 .4rem !important;
  color: #0f172a !important;
}

.money-page.mp-review#top #quick-verdict ul{
  margin: .4rem 0 0 !important;
  padding-left: 18px !important;
}

.money-page.mp-review#top #quick-verdict li{
  font-size: 15.5px !important;     /* QB body size */
  line-height: 1.6 !important;
  margin: 8px 0 !important;
  color: #0f172a !important;
}

/* 4) Buttons row: same density */
.money-page.mp-review#top #quick-verdict .mp-hero__cta{
  margin-top: 14px !important;
  gap: 10px !important;
}

/* Button base (QB-like weight + padding) */
.money-page.mp-review#top #quick-verdict a.btn{
  font-weight: 800 !important;
  padding: 11px 14px !important; /* QB buttons */
  border-radius: 12px !important;
  text-decoration: none !important;
}

/* Primary in this section: QB blue */
.money-page.mp-review#top #quick-verdict a.btn.btn-primary{
  background: var(--qv-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.money-page.mp-review#top #quick-verdict a.btn.btn-primary:hover{
  background: var(--qv-accent-hover) !important;
}

/* Ghost “Compare all tools” = QB look (NOT white) */
.money-page.mp-review#top #quick-verdict a.btn.btn-ghost{
  background: rgba(37,99,235,.06) !important; /* QB ghost fill */
  border: 1px solid rgba(37,99,235,.20) !important;
  color: var(--qv-accent-hover) !important;  /* QB darker text */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
.money-page.mp-review#top #quick-verdict a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}

/* =========================================================
   QUICK VERDICT — colored soft veils (green / orange)
   Put at VERY END
========================================================= */

/* Make sure the sub-cards can hold a background veil cleanly */
.money-page.mp-review#top #quick-verdict .mp-inner{
  position: relative !important;
  overflow: hidden !important;
}

/* LEFT card = “good choice” (green veil) */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:first-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(22,163,74,.08), transparent 55%),
    rgba(15,23,42,.018) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* RIGHT card = “not best choice” (orange veil) */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:last-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(249,115,22,.08), transparent 55%),
    rgba(15,23,42,.018) !important;
  border-color: rgba(15,23,42,.10) !important;
}

/* =========================================================
   HARD OVERRIDE — Quick Verdict bottom alignment (works even if WP overrides grid)
   Put THIS at the absolute end of the CSS file
========================================================= */

.money-page.mp-review#top #quick-verdict .mp-grid2{
  /* Force layout model */
  display: flex !important;
  flex-direction: row !important;
  gap: 14px !important;

  /* The key: align bottoms */
  align-items: flex-end !important;
}

@media (max-width: 800px){
  .money-page.mp-review#top #quick-verdict .mp-grid2{
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Make both cards take equal width like QB */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner{
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  align-self: auto !important;
}

/* Right card: keep it visually “shorter” with extra bottom breathing (QB trick) */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:last-child{
  padding-bottom: 42px !important;
}

/* Optional: keep your veils (green/orange) */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:first-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(22,163,74,.08), transparent 55%),
    rgba(15,23,42,.018) !important;
}

.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:last-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(245,158,11,.10), transparent 55%),
    rgba(15,23,42,.018) !important;
}

/* =========================================================
   QB OFFSET TUNING — subtle + responsive
========================================================= */

/* Base: keep the QB “short card” illusion */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner:last-child{
  padding-bottom: clamp(22px, 3.2vw, 46px) !important;
}

/* Make sure both cards look equally “tall” in spacing rhythm */
.money-page.mp-review#top #quick-verdict .mp-grid2 > .mp-inner{
  padding-top: 16px !important;
  padding-left: 18px !important;
  padding-right: 18px !important;
}

/* =========================================================
   QB TYPO — quick verdict card typography parity
========================================================= */

.money-page.mp-review#top #quick-verdict .mp-inner h3{
  font-size: 18px !important;     /* QB feel */
  font-weight: 400 !important;    /* titre pas “trop bold” */
  margin: 2px 0 10px !important;
  line-height: 1.25 !important;
}

.money-page.mp-review#top #quick-verdict .mp-inner ul{
  margin: 0 !important;
  padding-left: 18px !important;
}

.money-page.mp-review#top #quick-verdict .mp-inner li{
  font-size: 15.5px !important;   /* même body */
  line-height: 1.7 !important;
  margin: 10px 0 !important;
}

/* Keep only the first phrase bold (your <strong> already does it) */
.money-page.mp-review#top #quick-verdict .mp-inner li strong{
  font-weight: 800 !important;
}

/* =========================================================
   QB BUTTON — Compare all tools parity
========================================================= */

.money-page.mp-review#top #quick-verdict a.btn.btn-ghost{
  font-weight: 800 !important;
  font-size: 15px !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  background: rgba(37,99,235,.06) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  color: #1D4ED8 !important;
}
.money-page.mp-review#top #quick-verdict a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}

/* =========================================================
   BEST FOR / AVOID — split into 2 sub-cards + green/orange veils
   HTML: section#best-for > .mp-grid2 > .mp-inner (x2)
========================================================= */

/* 1) Bottom-align like QB (subtle offset) */
.mp-review #best-for .mp-grid2{
  display: flex !important;              /* hard override (WP-safe) */
  gap: 14px !important;
  align-items: flex-end !important;      /* key */
}

/* Mobile: stack */
@media (max-width: 800px){
  .mp-review #best-for .mp-grid2{
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* 2) Each column becomes its own “mini-card” */
.mp-review #best-for .mp-grid2 > .mp-inner{
  flex: 1 1 0 !important;
  width: 100% !important;

  background: rgba(15,23,42,.018) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: none !important;

  position: relative !important;
  overflow: hidden !important;
  height: auto !important;
}

/* 3) Green veil for Best for (left) */
.mp-review #best-for .mp-grid2 > .mp-inner:first-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(22,163,74,.08), transparent 55%),
    rgba(15,23,42,.018) !important;
}

/* 4) Orange veil for Avoid (right) + QB “shorter card” illusion */
.mp-review #best-for .mp-grid2 > .mp-inner:last-child{
  background:
    radial-gradient(600px 160px at 10% 0%, rgba(245,158,11,.10), transparent 55%),
    rgba(15,23,42,.018) !important;

  /* QB trick: creates the nice bottom offset without looking “short” */
  padding-bottom: clamp(22px, 3vw, 40px) !important;
}

/* 5) Typography parity (match your Quick Verdict sizing) */
.mp-review #best-for .mp-h3{
  font-size: 18px !important;
  font-weight: 400 !important;      /* QB-like calm title */
  margin: 2px 0 10px !important;
  line-height: 1.25 !important;
}

.mp-review #best-for ul{
  margin: 0 !important;
  padding-left: 18px !important;
}

.mp-review #best-for li{
  font-size: 15.5px !important;
  line-height: 1.7 !important;
  margin: 10px 0 !important;
}

/* 6) Anchor #avoid inside the card should not create visible spacing */
.mp-review #best-for #avoid{
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* =========================================================
   CONS — Zoom → align orange with QuickBooks
   (override red -> orange, QB parity)
========================================================= */

/* Base Cons card (orange instead of red) */
.mp-review .pros-cons .cons{
  border-left-color: #f97316 !important; /* QB orange */
  background: rgba(249,115,22,.08) !important;
}

/* Icon bubble ( ! ) — orange */
.mp-review .pros-cons .cons::before{
  color: #f97316 !important;
  border-color: rgba(249,115,22,.45) !important;
}

/* Optional: slightly soften text contrast (QB feel) */
.mp-review .pros-cons .cons li{
  color: rgba(15,23,42,.88);
}

/* =========================================================
   PROS & CONS — neutralize <strong> titles (QB-style)
   Put at ABSOLUTE END
========================================================= */

.money-page.mp-review#top #pros-cons .pros > strong,
.money-page.mp-review#top #pros-cons .cons > strong{
  font-weight: 400 !important;        /* remove bold */
  font-size: 18px !important;         /* match QB cards */
  letter-spacing: -0.01em;
  display: block;
  margin-bottom: 10px;
  color: #0f172a;
}

.money-page.mp-review#top #pros-cons .pros > strong,
.money-page.mp-review#top #pros-cons .cons > strong{
  font-weight: 500 !important; /* semi-regular */
}

/* =========================================================
   PRICING CTA — match Wave (QB blue + bold + ghost look)
   Put at ABSOLUTE END
========================================================= */

.mp-review #pricing{
  --pr-accent: #2563EB;
  --pr-accent-hover: #1D4ED8;
}

/* CTA row (if you use mp-hero__cta) */
.mp-review #pricing .mp-hero__cta{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}

/* Base buttons in pricing */
.mp-review #pricing a.btn{
  font-weight: 800 !important;     /* force bold */
  font-size: 15px !important;
  padding: 11px 16px !important;
  border-radius: 12px !important;
  text-decoration: none !important;
}

/* Primary (Wave blue) */
.mp-review #pricing a.btn.btn-primary{
  background: var(--pr-accent) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.mp-review #pricing a.btn.btn-primary:hover{
  background: var(--pr-accent-hover) !important;
}

/* Ghost (Wave “See alternatives”) */
.mp-review #pricing a.btn.btn-ghost{
  background: rgba(37,99,235,.06) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  color: var(--pr-accent-hover) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
.mp-review #pricing a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}

/* =========================================================
   ALTERNATIVES — QuickBooks-style inline links
========================================================= */

.mp-review .alt-list{
  margin: 0;
  padding-left: 18px;
}

.mp-review .alt-list li{
  margin: 12px 0;
  line-height: 1.65;
}

/* Inline review links (QB style) */
.mp-review .alt-link{
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none !important;
  color: var(--mth-accent);
}

.mp-review .alt-link:hover{
  text-decoration: underline !important;
}

/* Footer line under alternatives */
.mp-review .alt-footer{
  margin-top: 12px;
  font-size: 14.5px;
  color: var(--mth-muted);
}

.mp-review .alt-footer a{
  font-weight: 800;
  text-decoration: none !important;
}

.mp-review .alt-footer a:hover{
  text-decoration: underline !important;
}

/* =========================================================
   FINAL VERDICT CTA (outside .mp-review) — match Wave buttons
   Fix: your CTA is outside .mp-review, so .mp-review .btn won't apply
========================================================= */

/* Base button sizing + bold (both buttons) */
.mp-hero__cta a.btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;

  font-weight: 800 !important;      /* bold like Wave */
  font-size: 15px !important;
  padding: 11px 16px !important;    /* same size */
  border-radius: 12px !important;

  text-decoration: none !important;
  box-sizing: border-box !important;
}

/* Primary (Check Zoom pricing) */
.mp-hero__cta a.btn.btn-primary{
  background: #2563EB !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}
.mp-hero__cta a.btn.btn-primary:hover{
  background: #1D4ED8 !important;
}

/* Ghost (Compare all tools) — Wave look: filled, not white */
.mp-hero__cta a.btn.btn-ghost{
  background: rgba(37,99,235,.06) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  color: #1D4ED8 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
.mp-hero__cta a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}

/* Keep spacing like Wave */
.mp-hero__cta{
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  margin-top: 14px !important;
}

/* =========================================================
   HERO CTA — force Wave parity (size + colors)
   Target: header hero buttons only
========================================================= */

/* Base sizing (both buttons) */
.mp-review .mp-hero--split .mp-hero__cta a.btn{
  font-weight: 800 !important;      /* bold like Wave */
  font-size: 15px !important;
  padding: 11px 16px !important;    /* same height as Wave */
  border-radius: 12px !important;
  line-height: 1 !important;
}

/* PRIMARY (Check Zoom pricing) — Wave blue */
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-primary{
  background: #2563EB !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-primary:hover{
  background: #1D4ED8 !important;
}

/* GHOST (Jump to verdict) — Wave ghost: NOT white */
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-ghost{
  background: rgba(37,99,235,.06) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  color: #1D4ED8 !important;         /* correct blue text */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}
/* =========================================================
   HERO CTA — force Wave parity (size + colors)
   Target: header hero buttons only
========================================================= */

/* Base sizing (both buttons) */
.mp-review .mp-hero--split .mp-hero__cta a.btn{
  font-weight: 800 !important;      /* bold like Wave */
  font-size: 15px !important;
  padding: 11px 16px !important;    /* same height as Wave */
  border-radius: 12px !important;
  line-height: 1 !important;
}

/* PRIMARY (Check Zoom pricing) — Wave blue */
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-primary{
  background: #2563EB !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(37,99,235,.18) !important;
}
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-primary:hover{
  background: #1D4ED8 !important;
}

/* GHOST (Jump to verdict) — Wave ghost: NOT white */
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-ghost{
  background: rgba(37,99,235,.06) !important;
  border: 1px solid rgba(37,99,235,.20) !important;
  color: #1D4ED8 !important;         /* correct blue text */
  box-shadow: inset 0 1px 0 rgba(255,255,255,.60) !important;
}
.mp-review .mp-hero--split .mp-hero__cta a.btn.btn-ghost:hover{
  background: rgba(37,99,235,.12) !important;
  border-color: rgba(37,99,235,.32) !important;
}

/* =========================================================
   MTH REVIEW — BACK TO TOP (FORCE, Diggity-style)
   Put at absolute end of mth-review.css
========================================================= */

/* 1) Place it LEFT (and stop any centering) */
.mp-review p.back-to-top{
  width: calc(100% - 36px) !important;
  max-width: var(--mth-max) !important;
  margin: 18px auto 0 !important;
  text-align: left !important;
}

/* 2) Make it look like BTG: simple link, accent color, underline */
.mp-review p.back-to-top a{
  display: inline-block !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;

  font-weight: 700 !important;
  color: var(--mth-accent) !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1.5px !important;
  text-underline-offset: 3px !important;
}

/* 3) Hover state */
.mp-review p.back-to-top a:hover{
  color: var(--mth-accent-hover) !important;
  text-decoration-thickness: 2px !important;
}

/* 4) If GP adds pseudo icons/decoration */
.mp-review p.back-to-top a::before,
.mp-review p.back-to-top a::after{
  content: none !important;
}

/* =========================================================
   ZOOM REVIEW — Disclaimer after Back to top (guaranteed)
   Put at ABSOLUTE END
========================================================= */

/* Case 1: disclaimer is the NEXT <p> after <p class="back-to-top"> */
.mp-review p.back-to-top + p{
  font-family: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(15,23,42,.72) !important;
  margin: 10px 0 0 !important;
  max-width: 90ch !important;
}

/* Case 2 (WP/GP wrappers): same logic but without relying on .mp-review */
.entry-content p.back-to-top + p,
.inside-article p.back-to-top + p{
  font-family: -apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,sans-serif !important;
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(15,23,42,.72) !important;
  margin: 10px 0 0 !important;
  max-width: 90ch !important;
}

/* =========================================================
   ZOOM REVIEW — Align Back-to-top + Disclaimer to card width
   Put at ABSOLUTE END
========================================================= */

/* 1) Back to top row aligned like the cards */
.entry-content p.back-to-top,
.inside-article p.back-to-top,
.mp-review p.back-to-top{
  width: calc(100% - 36px) !important;
  max-width: var(--mth-max, 1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  box-sizing: border-box !important;
}

/* 2) The disclaimer paragraph right after it: same alignment */
.entry-content p.back-to-top + p,
.inside-article p.back-to-top + p,
.mp-review p.back-to-top + p{
  width: calc(100% - 36px) !important;
  max-width: var(--mth-max, 1080px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: left !important;
  box-sizing: border-box !important;

  /* typography (BTG-like) */
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(15,23,42,.72) !important;
  margin-top: 10px !important;
}


/* =========================================================
   BEST FOR / AVOID — bottom aligned + shorter Avoid (FINAL)
========================================================= */

.mp-review #best-for .mp-grid2{
  display: flex !important;
  gap: 14px !important;
  align-items: flex-end !important; /* 🔑 alignement en bas */
}

/* Mobile : empilement normal */
@media (max-width: 800px){
  .mp-review #best-for .mp-grid2{
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* Base commune */
.mp-review #best-for .mp-grid2 > .mp-inner{
  flex: 1 1 0 !important;
  width: 100% !important;
  height: auto !important;
  box-sizing: border-box !important;
}

/* LEFT — Best for (référence pleine hauteur) */
.mp-review #best-for .mp-grid2 > .mp-inner:first-child{
  padding-bottom: 16px !important;
}

/* RIGHT — Avoid if (plus courte visuellement) */
.mp-review #best-for .mp-grid2 > .mp-inner:last-child{
  padding-bottom: clamp(34px, 3vw, 46px) !important;
}

/* LEFT — Best for (doit être plus "haute") */
.mp-review #best-for .mp-grid2 > .mp-inner:first-child{
  padding-bottom: clamp(34px, 3vw, 46px) !important; /* ✅ c'est ici qu'on met le "truc" */
}

/* RIGHT — Avoid if (reste plus courte) */
.mp-review #best-for .mp-grid2 > .mp-inner:last-child{
  padding-bottom: 16px !important;
}