/* ════════════════════════════════════════════════════════════════
   BusinessExpert Editorial Design System v4.1
   Site-wide CSS — pushed to theme via push_editorial.py
   Source of truth: be-comparison-v4-2.html
   ════════════════════════════════════════════════════════════════ */

/* ── Builder page overrides: hide BeTheme elements ── */
.be-builder-page .page_breadcrumbs,
.be-builder-page .top_bar_left,
.be-builder-page .section_wrapper .breadcrumbs { display: none; }
/* BeTheme sets #primary { overflow:hidden } which breaks sticky positioning */
.be-builder-page #primary { overflow: visible; }

/* ── Design tokens ── */
:root {
  --be-purple: #7B2D8E;
  --be-purple-hover: #6A2679;
  --be-purple-light: #F3E8F7;
  --be-purple-surface: #F9F3FB;
  --be-purple-deep: #4A1A5E;
  --be-bg: #FFFFFF;
  --be-bg-alt: #F7F7F9;
  --be-surface: #FFFFFF;
  --be-surface-alt: #F4F4F7;
  --be-border: #E5E5EA;
  --be-border-light: #EDEDF0;
  --be-text-dark: #1A1A2E;
  --be-text-mid: #4A4A5A;
  --be-text-light: #7A7A8A;
  --be-text-faint: #A0A0AE;
  --be-green: #1AA35E;
  --be-green-light: #E6F7EE;
  --be-caution: #D97706;
  --be-ribbon-gold: #F5A623;
  --be-ribbon-pink: #E8368F;
  --be-ribbon-teal: #0EA5E9;
  --be-r-sm: 6px;
  --be-r-md: 10px;
  --be-r-lg: 16px;
  --be-sh-sm: 0 1px 4px rgba(0,0,0,0.05);
  --be-sh-md: 0 4px 20px rgba(0,0,0,0.07);
  --be-width-container: 1220px;
  --be-width-padding: 32px;
}

/* ── Progress bar (reading indicator) ── */
.progress-track { height: 3px; background: var(--be-border-light); }
.progress-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--be-purple), var(--be-ribbon-pink)); transition: width 0.08s linear; }

/* ── Breadcrumb ── */
.crumb { max-width: var(--be-width-container); margin: 0 auto; padding: 16px var(--be-width-padding) 0; font-size: 13px; color: var(--be-text-light); }
.crumb a { color: var(--be-purple); text-decoration: none; font-weight: 500; }
.crumb a:hover { text-decoration: underline; }
.crumb .sep { margin: 0 6px; color: var(--be-text-faint); }

/* ════════════════════════════════════
   V4 HERO — theme-level, data from WP/ACF
   ════════════════════════════════════ */
.be-hero { max-width: var(--be-width-container); margin: 0 auto; padding: 12px var(--be-width-padding) 32px; }
.be-breadcrumb { font-size: 13px; color: var(--be-text-light); margin-bottom: 20px; }
.be-breadcrumb a { color: var(--be-text-light); text-decoration: none; font-weight: 400; }
.be-breadcrumb a:hover { color: var(--be-text-dark); }
.be-breadcrumb__sep { margin: 0 6px; color: var(--be-text-faint); }
.be-hero__meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.be-hero__readtime { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--be-text-light); font-weight: 500; }
.be-hero__readtime svg { color: var(--be-text-faint); }
.be-hero__disclosure { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--be-text-light); font-weight: 500; }
.be-hero__disclosure svg { color: var(--be-text-faint); }
.be-hero__title { font-family: 'Plus Jakarta Sans', -apple-system, sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; color: var(--be-text-dark); margin: 0 0 12px; }
.be-hero__standfirst { font-size: 17px; line-height: 1.65; color: var(--be-text-mid); margin: 0 0 20px; max-width: 680px; }
.be-hero__authors { display: flex; gap: 24px; align-items: center; margin-bottom: 8px; }
.be-hero__author { display: flex; align-items: center; gap: 10px; }
.be-hero__avatar { width: 44px; height: 44px; border-radius: 50%; }
.be-hero__author-label { font-size: 12px; color: var(--be-text-light); font-weight: 400; display: block; }
.be-hero__author-name { font-size: 14px; font-weight: 600; color: var(--be-text-dark); text-decoration: none; }
a.be-hero__author-name:hover { text-decoration: underline; }
.be-hero__date { font-size: 13px; color: var(--be-text-light); }

/* Hide old BeTheme hero elements site-wide — v4 hero replaces them */
.page-intro-section.hero-section,
.section-hero-inner-page,
.page_breadcrumbs,
.top_bar_left,
.section_wrapper .breadcrumbs { display: none !important; }
#primary { overflow: visible !important; }

/* ════════════════════════════════════
   HERO ZONE — full bleed, lavender bg (page_builder pages)
   ════════════════════════════════════ */
/* ── SINGLE TYPOGRAPHY SYSTEM ──
   be-v4.css is the only typography source for the entire site.
   The WP Customizer CSS has been removed via PHP (remove_action in functions.php).
   No !important declarations anywhere — normal CSS specificity only. */

/* Non-builder pages: article typography (replaces global-typography.css) */
body:not(.home) .entry-content:not([data-builder-page]) p {
  font-size: 17.5px; line-height: 1.85; letter-spacing: 0.006em; color: #28282C; margin-bottom: 1.85em;
}
body:not(.home) .entry-content:not([data-builder-page]) ul,
body:not(.home) .entry-content:not([data-builder-page]) ol {
  color: #28282C; font-size: 17.5px; letter-spacing: 0.006em; line-height: 1.85; margin-bottom: 1.85em;
}
body:not(.home) .entry-content:not([data-builder-page]) li { margin-bottom: 0.55em; }
body:not(.home) .entry-content:not([data-builder-page]) h2 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.01em; color: #1a1a1e; margin-top: 2.4em; margin-bottom: 0.85em;
}
body:not(.home) .entry-content:not([data-builder-page]) h3 {
  font-size: 22px; font-weight: 700; color: #1a1a1e; letter-spacing: -0.005em; margin-top: 2em; margin-bottom: 0.7em;
}

/* Builder pages: v4 design system base */
.builder-content {
  font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
  font-size: 15.5px;
  color: var(--be-text-dark);
  line-height: 1.7;
}

/* ════════════════════════════════════
   HERO ZONE
   Spacing scale: 8 · 12 · 16 · 24 · 32 · 48 · 64
   16 = text/micro, 24 = component, 32 = block, 48 = section, 64 = major
   ════════════════════════════════════ */
.hero-zone {
  background: #F9F5FB;
  border-bottom: 1px solid var(--be-border-light);
  padding-bottom: 48px; /* section spacing before also-consider */
}
.hero-wrap { max-width: var(--be-width-container); margin: 0 auto; padding: 0 var(--be-width-padding); }
.hero { padding: 32px 0 0; } /* block spacing from breadcrumb */

/* Hero meta row: read time + ad disclosure */
.hero-meta { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.read-time { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--be-purple); }
.ad-pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--be-text-mid); border: 1px solid var(--be-border); padding: 8px 16px; border-radius: 20px; cursor: pointer; transition: 0.15s; position: relative; }
.ad-pill:hover { background: var(--be-bg-alt); }
.ad-body { display: none; position: absolute; right: 0; top: 40px; width: 380px; background: var(--be-bg); border: 1px solid var(--be-border); border-radius: var(--be-r-md); padding: 16px 24px; font-size: 12.5px; color: var(--be-text-light); line-height: 1.5; box-shadow: var(--be-sh-md); z-index: 10; }
.ad-pill:hover .ad-body { display: block; }

/* Hero grid */
.hero-grid { display: grid; grid-template-columns: 1fr 340px; gap: 32px; align-items: stretch; }
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-left { display: flex; flex-direction: column; }

/* Tier 1: Headline */
.hero h1 { font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(28px, 4vw, 42px); font-weight: 800; line-height: 1.12; letter-spacing: -0.5px; margin-bottom: 12px; }

/* Tier 2: Standfirst */
.hero-sub { font-size: 17px; color: var(--be-text-mid); line-height: 1.65; margin-bottom: 16px; }

/* Tier 3: Metadata — one system, one size tier */
.byline-block { margin-bottom: 0; }
.byline-row { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.by-person { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--be-text-mid); }
.by-av { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--be-purple-light), var(--be-purple)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; }
.by-role { font-size: 11px; color: var(--be-text-light); line-height: 1; margin-bottom: 2px; }
.by-name { font-weight: 600; color: var(--be-text); line-height: 1; }
.by-name a { color: inherit; text-decoration: none; }
.by-name a:hover { color: var(--be-purple); }
.by-date { font-size: 13px; color: var(--be-text-mid); margin-top: 16px; }

/* Hero topic pills */
.hero-covers { margin-top: 24px; }
.hero-covers-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--be-text-faint); margin-bottom: 8px; }
.hero-covers-list { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-covers-list a { display: inline-block; padding: 8px 16px; background: var(--be-bg-alt); border: 1px solid var(--be-border); border-radius: 20px; font-size: 12.5px; font-weight: 500; color: var(--be-text-mid); text-decoration: none; transition: 0.15s; }
.hero-covers-list a:hover { border-color: var(--be-purple); color: var(--be-purple); background: var(--be-purple-surface); }

/* ── Top Pick card ── */
.tp-card { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); padding: 32px; box-shadow: var(--be-sh-md); }
.tp-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--be-purple); margin-bottom: 8px; text-align: center; }
.tp-name { font-size: 15.5px; font-weight: 700; text-align: center; margin-bottom: 4px; color: var(--be-text-dark); }
.tp-type { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--be-text-light); text-align: center; margin-bottom: 8px; }
.tp-tagline { font-size: 13.5px; color: var(--be-text-mid); text-align: center; margin-bottom: 0; line-height: 1.45; }
.tp-logo { width: 160px; height: 100px; margin: 24px auto; background: var(--be-surface-alt); border: 1px solid var(--be-border-light); border-radius: var(--be-r-md); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--be-text-light); }
.tp-logo img { max-width: 140px; max-height: 80px; object-fit: contain; }
.tp-list { list-style: none; margin-bottom: 24px; }
.tp-list li { font-size: 14px; color: var(--be-text-mid); padding: 8px 0 8px 24px; position: relative; line-height: 1.5; }
.tp-list li::before { content: '\2713'; position: absolute; left: 0; top: 8px; color: var(--be-green); font-weight: 700; font-size: 12px; }
.tp-cta { display: block; width: 100%; padding: 16px; background: var(--be-purple); color: #fff; border: none; border-radius: var(--be-r-sm); font-size: 14.5px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; transition: 0.15s; }
.tp-cta:hover { background: var(--be-purple-hover); }
.tp-sub { display: block; text-align: center; margin-top: 8px; font-size: 11px; color: var(--be-text-light); text-decoration: none; }
.tp-sub:hover { text-decoration: underline; }

/* Trust strip */
.trust { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; padding: 16px 24px; background: var(--be-bg-alt); border: 1px solid var(--be-border); border-radius: var(--be-r-md); margin-top: auto; }
.trust-i { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 500; color: var(--be-text); }
.trust-dot { width: 6px; height: 6px; background: var(--be-purple); border-radius: 50%; }

/* ════════════════════════════════════
   ALSO CONSIDER — compact strip (builder pages only)
   Scoped to .be-builder-page so theme.css grid layout still works on old pages
   ════════════════════════════════════ */
.be-builder-page .also-section { max-width: 1220px; margin: 0 auto; padding: 48px 0; }
.be-builder-page .also-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--be-text-light); margin-bottom: 16px; display: flex; align-items: center; gap: 12px; justify-content: center; }
.be-builder-page .also-label::before, .be-builder-page .also-label::after { content: ''; flex: 1; height: 1px; background: var(--be-border); }
.be-builder-page .also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 780px) { .be-builder-page .also-grid { grid-template-columns: 1fr; } }
.be-builder-page .also-card { display: flex; align-items: center; gap: 16px; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); padding: 16px 20px; transition: 0.2s; }
.be-builder-page .also-card:hover { box-shadow: var(--be-sh-md); border-color: #ccc; }
.be-builder-page .also-logo { flex-shrink: 0; width: 48px; height: 48px; border-radius: var(--be-r-md); background: var(--be-surface-alt); border: 1px solid var(--be-border-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; color: var(--be-text-light); overflow: hidden; }
.be-builder-page .also-logo img { max-width: 40px; max-height: 40px; object-fit: contain; }
.be-builder-page .also-info { flex: 1; min-width: 0; }
.be-builder-page .also-info .also-best-for { font-size: 11.5px; color: var(--be-text-mid); line-height: 1.3; margin: 0; padding: 0; }
.be-builder-page .also-info h3 { font-size: 14.5px; font-weight: 700; line-height: 1.25; margin: 2px 0 0; padding: 0; }
.be-builder-page a.also-cta, .be-builder-page .also-card a.also-cta { flex-shrink: 0; padding: 8px 16px; background: var(--be-purple); color: #fff; border: none; border-radius: var(--be-r-sm); font-size: 12.5px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: 0.15s; cursor: pointer; line-height: 1; display: inline-block; }
.be-builder-page a.also-cta:hover, .be-builder-page .also-card a.also-cta:hover { background: var(--be-purple-hover); color: #fff; }

/* ════════════════════════════════════
   FULL-WIDTH CONTENT (comparison table zone, no sidebar)
   ════════════════════════════════════ */
/* Zone 2 container — no padding here, children (.sec-table) manage their own */
.full-width-content { max-width: var(--be-width-container); margin: 0 auto; padding: 0; }

/* ── Safety net: constrain bare content in comparison-template articles ──
   Pages whose content has hero-zone but lacks .full-width-content wrappers
   around editorial blocks leave bare <p>, <h2>, <section> etc. as direct
   children of the <article>.  This rule catches those orphaned elements
   so they never run full-viewport width. */
.page-template-template-comparison article > p,
.page-template-template-comparison article > h2,
.page-template-template-comparison article > h3,
.page-template-template-comparison article > ul,
.page-template-template-comparison article > ol,
.page-template-template-comparison article > section { max-width: var(--be-width-container); margin-left: auto; margin-right: auto; padding-left: var(--be-width-padding); padding-right: var(--be-width-padding); box-sizing: border-box; }

/* ════════════════════════════════════
   SIDEBAR LAYOUT — main + right sidebar
   ════════════════════════════════════ */
.be-layout { max-width: var(--be-width-container); margin: 0 auto; display: grid; grid-template-columns: 1fr 200px; gap: 48px; padding: 0 var(--be-width-padding); align-items: start; }
.be-layout .be-main { min-width: 0; }
/* Uniform 64px spacing between all major sections in editorial zone */
.be-main h2 { margin-top: 64px; margin-bottom: 48px; }
.be-main h2:first-child { margin-top: 0; }
.be-main h3 { margin-top: 48px; margin-bottom: 32px; }
.be-main .sec-cards { margin-top: 64px; }
.be-main .sec-cards + h2 { margin-top: 16px; }
.be-main .cc-faq__list { margin-top: 24px; margin-bottom: 64px; }
@media (max-width: 1060px) { .be-layout { grid-template-columns: 1fr; gap: 0; } .be-layout .be-sidebar { display: none; } }

/* Hide old cc_builder left-side TOC when inside v4 layout grid.
   !important required: legacy TOC uses position:fixed + z-index:50. */
.be-layout .be-main .be-toc { display: none !important; }

/* Sidebar */
.be-sidebar { position: sticky; top: 84px; padding-top: 8px; }
.sb-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--be-text-faint); margin-bottom: 14px; padding-left: 14px; }
.be-sidebar ul { list-style: none; }
.be-sidebar a { display: block; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--be-text-light); text-decoration: none; border-left: 2px solid transparent; transition: 0.15s; line-height: 1.3; }
.be-sidebar a:hover { color: var(--be-text-dark); background: var(--be-bg-alt); }
.be-sidebar a.on { color: var(--be-purple); font-weight: 700; border-left-color: var(--be-purple); background: var(--be-purple-surface); }

/* Sidebar — auto-generated TOC (non-builder pages) */
.be-sidebar__label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--be-text-faint); margin-bottom: 14px; padding-left: 14px; }
.be-sidebar__link { display: block; padding: 8px 14px; font-size: 13px; font-weight: 500; color: var(--be-text-light); text-decoration: none; border-left: 2px solid transparent; transition: 0.15s; line-height: 1.3; }
.be-sidebar__link:hover { color: var(--be-text-dark); background: var(--be-bg-alt); }
.be-sidebar__link.on { color: var(--be-purple); font-weight: 700; border-left-color: var(--be-purple); background: var(--be-purple-surface); }

/* Sidebar CTA card */
.sb-cta { margin-top: 24px; padding: 20px; background: var(--be-purple-surface); border: 1px solid var(--be-purple-light); border-radius: var(--be-r-lg); }
.sb-cta p { font-size: 13px; color: var(--be-text-mid); line-height: 1.5; margin-bottom: 12px; }
.sb-cta-btn { display: block; width: 100%; padding: 11px; background: var(--be-purple); color: #fff; border: none; border-radius: var(--be-r-sm); font-size: 13px; font-weight: 700; cursor: pointer; text-align: center; text-decoration: none; transition: 0.15s; }
.sb-cta-btn:hover { background: var(--be-purple-hover); }

/* ── Shared section header ── */
.sh { margin-bottom: 28px; }
.sh-lab { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--be-purple); margin-bottom: 8px; }
.sh-lab::before { content: ''; width: 14px; height: 2px; background: var(--be-purple); }
.sh h2 { font-family: 'Newsreader', Georgia, serif; font-size: clamp(24px, 3vw, 32px); font-weight: 700; letter-spacing: -0.3px; line-height: 1.25; }
.sh p { font-size: 16px; color: var(--be-text-mid); margin-top: 6px; line-height: 1.6; }

/* ════════════════════════════════════
   COMPARISON TABLE
   ════════════════════════════════════ */
/* BeTheme strips horizontal padding from section elements via an unidentified !important rule.
   Workaround: vertical padding on .sec-table, horizontal padding on children (.sh, .tw). */
.sec-table { padding: 56px 0; background: var(--be-bg-alt); border-radius: var(--be-r-lg); margin-top: 32px; margin-bottom: 64px; }
.sec-table .sh { padding: 0 32px; }
.tw { overflow-x: auto; border-radius: var(--be-r-lg); border: 1px solid var(--be-border); box-shadow: var(--be-sh-sm); margin: 0 32px; }
.ct { width: 100%; border-collapse: collapse; background: var(--be-surface); min-width: 820px; }
.ct thead th { background: var(--be-purple-deep); color: rgba(255,255,255,0.85); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px; padding: 16px 20px; text-align: left; white-space: nowrap; }
.ct thead th:first-child { padding-left: 24px; }
.ct thead th:last-child { padding-right: 24px; text-align: center; }
.ct tbody td { padding: 20px 20px; font-size: 14.5px; border-bottom: 1px solid var(--be-border-light); vertical-align: middle; }
.ct tbody td:first-child { padding-left: 24px; }
.ct tbody td:last-child { padding-right: 24px; text-align: center; }
.ct tbody tr:last-child td { border-bottom: none; }
.ct tbody tr { transition: background 0.1s; }
.ct tbody tr:hover { background: var(--be-purple-surface); }
.ct .tp { display: flex; align-items: center; gap: 12px; font-weight: 600; white-space: nowrap; }
.ct .tl { width: 48px; height: 32px; border-radius: var(--be-r-sm); background: var(--be-surface-alt); border: 1px solid var(--be-border-light); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: var(--be-text-faint); flex-shrink: 0; overflow: hidden; }
.ct .tl img { max-width: 44px; max-height: 28px; object-fit: contain; }
.tt { display: inline-block; background: var(--be-purple-light); color: var(--be-purple); font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 20px; white-space: nowrap; }
.tc { display: inline-flex; align-items: center; justify-content: center; min-width: 90px; padding: 10px 18px; background: var(--be-purple); color: #fff; font-size: 13px; font-weight: 700; border-radius: var(--be-r-sm); text-decoration: none; transition: 0.15s; white-space: nowrap; }
.tc:hover { background: var(--be-purple-hover); }
.ct-foot { font-size: 12.5px; color: var(--be-text-faint); padding: 24px 32px 0; margin: 0; }

/* ════════════════════════════════════
   DECISION TABLE (.dt)
   Situation → recommendation router.
   Desktop: 4-col table. Mobile (<720px): stacked cards.
   ════════════════════════════════════ */
.dt { width: 100%; max-width: 820px; border-collapse: separate; border-spacing: 0; background: var(--be-surface); border-radius: var(--be-r-lg); overflow: hidden; border: 1px solid var(--be-border); box-shadow: var(--be-sh-sm); }
.dt thead th { background: var(--be-purple-deep); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; padding: 14px 20px; text-align: left; }
.dt thead th:last-child { text-align: center; }
.dt tbody td { padding: 20px; font-size: 14.5px; color: var(--be-text-dark); border-bottom: 1px solid var(--be-border-light); vertical-align: middle; }
.dt tbody tr:last-child td { border-bottom: none; }
.dt tbody tr { transition: background 0.12s ease; }
.dt tbody tr:hover { background: var(--be-purple-surface); }
.dt tbody tr:focus-within { outline: 2px solid var(--be-purple); outline-offset: -2px; border-radius: 2px; }
/* Col 1: situation — primary scan anchor */
.dt-sit { font-weight: 700; color: var(--be-text-dark); white-space: nowrap; }
/* Col 2: provider recommendation */
.dt-rec { font-weight: 600; color: var(--be-text-dark); white-space: nowrap; }
/* Col 3: why — quieter supporting text */
.dt-why { color: var(--be-text-mid); font-size: 14px; line-height: 1.55; }
/* Col 4: CTA */
.dt-cta { text-align: center; white-space: nowrap; }
/* Specificity bump: .be-main .dt-cta a overrides theme.css .be-main a:not([class*="cta"]) */
.be-main .dt-cta a, .dt-cta a { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; background: var(--be-purple); color: #fff; font-size: 13px; font-weight: 700; border-radius: var(--be-r-sm); text-decoration: none; transition: background 0.15s, box-shadow 0.15s; }
.be-main .dt-cta a:hover, .dt-cta a:hover { background: var(--be-purple-hover); color: #fff; box-shadow: 0 2px 8px rgba(123,45,142,0.18); }
.be-main .dt-cta a:focus-visible, .dt-cta a:focus-visible { outline: 2px solid var(--be-purple); outline-offset: 2px; color: #fff; }
.dt-foot { font-size: 12.5px; color: var(--be-text-faint); margin-top: 14px; line-height: 1.5; }

/* Decision table: mobile card layout */
@media (max-width: 720px) {
  .dt, .dt thead, .dt tbody, .dt tr, .dt th, .dt td { display: block; }
  .dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .dt tbody tr { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-md); padding: 20px; margin-bottom: 12px; box-shadow: var(--be-sh-sm); }
  .dt tbody tr:last-child { margin-bottom: 0; }
  .dt tbody tr:hover { background: var(--be-purple-surface); }
  .dt tbody td { padding: 0; border-bottom: none; }
  .dt-sit { font-size: 16px; font-weight: 700; color: var(--be-text-dark); margin-bottom: 6px; white-space: normal; }
  .dt-rec { font-size: 15px; font-weight: 600; color: var(--be-purple-deep); margin-bottom: 8px; white-space: normal; }
  .dt-rec::before { content: 'Start here: '; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--be-text-light); }
  .dt-why { font-size: 14px; color: var(--be-text-mid); margin-bottom: 14px; }
  .dt-cta { text-align: left; }
  .dt-cta a { width: 100%; justify-content: center; padding: 11px 18px; font-size: 14px; }
}

/* ════════════════════════════════════
   EDITORIAL INLINE TABLES
   WP block tables inside prose cards.
   ════════════════════════════════════ */
.be-main .wp-block-table table { width: 100%; border-collapse: collapse; }
/* Header: compact, authoritative, clearly above body text */
.be-main .wp-block-table thead th { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: #1A1A2E; padding: 14px 20px 12px; text-align: left; border-bottom: 2px solid #1A1A2E; }
/* Body: readable, calm, no heavy weights */
.be-main .wp-block-table tbody td { padding: 18px 20px; font-size: 14.5px; font-weight: 400; color: #2D2D3A; line-height: 1.55; border-bottom: 1px solid var(--be-border-light); vertical-align: middle; }
.be-main .wp-block-table tbody tr:first-child td { padding-top: 22px; }
.be-main .wp-block-table tbody tr:last-child td { border-bottom: none; }
/* First column: marginally stronger via colour only */
.be-main .wp-block-table tbody td:first-child { font-weight: 500; color: #1A1A2E; }
/* Second column: same weight as body, full contrast */
.be-main .wp-block-table tbody td:nth-child(2) { color: #2D2D3A; }
/* Third+ columns: slightly softer supporting text */
.be-main .wp-block-table tbody td:nth-child(n+3) { color: #55556A; font-size: 14px; }
/* Subtle hover — not a strong fill */
.be-main .wp-block-table tbody tr { transition: background 0.15s ease; }
.be-main .wp-block-table tbody tr:hover { background: #FAFAFC; }
/* Footer note: clearly secondary */
.be-main .wp-block-table figcaption { font-size: 12.5px; color: var(--be-text-faint); text-align: center; padding: 16px 20px; margin: 0; }
/* Strip WP striped-table alternating backgrounds */
.be-main .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background: transparent; }

/* ════════════════════════════════════
   EDITORIAL PROSE SECTIONS
   ════════════════════════════════════ */
.sec-prose { padding: 56px 0; }
.prose-card { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); padding: 40px 44px; }
@media (max-width: 720px) { .prose-card { padding: 28px 24px; } }
.prose-card h2 { font-family: 'Newsreader', Georgia, serif; font-size: 26px; font-weight: 700; line-height: 1.3; letter-spacing: -0.2px; margin-bottom: 20px; }
.prose-card h3 { font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 32px; margin-bottom: 12px; }
.prose-card p { font-size: 15.5px; color: var(--be-text-mid); line-height: 1.8; margin-bottom: 16px; max-width: 680px; }
.prose-card a { color: var(--be-purple); font-weight: 600; text-decoration: underline; text-decoration-color: var(--be-purple-light); text-underline-offset: 2px; transition: 0.15s; }
.prose-card a:hover { text-decoration-color: var(--be-purple); }
.prose-card ul, .prose-card ol { padding-left: 20px; margin-bottom: 16px; max-width: 680px; }
.prose-card li { font-size: 15px; color: var(--be-text-mid); line-height: 1.75; padding: 3px 0; }

/* Callout block */
.prose-callout { background: var(--be-purple-surface); border-left: 3px solid var(--be-purple); padding: 18px 24px; margin: 24px 0; border-radius: 0 var(--be-r-sm) var(--be-r-sm) 0; max-width: 680px; }
.prose-callout p { color: var(--be-text-dark); margin-bottom: 0; font-size: 15px; line-height: 1.7; }
.prose-callout strong { color: var(--be-purple); }

/* Verification block — "What we verified" data annotations */
.verification-block { background: var(--be-surface); border-left: 3px solid var(--be-border); padding: 18px 24px; margin: 8px 0 24px; border-radius: 0 var(--be-r-sm) var(--be-r-sm) 0; max-width: 680px; }
.verification-block .verification-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--be-text-light); margin-bottom: 8px; }
.verification-block p:not(.verification-label) { font-size: 14px; color: var(--be-text-mid); line-height: 1.7; margin-bottom: 0; }

/* Top pick callout blocks */
.top-pick-callout { background: var(--be-purple-surface); border-radius: var(--be-r-lg); padding: 24px 28px; margin: 16px 0; max-width: 680px; }
.top-pick-callout__label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--be-purple); margin-bottom: 6px; }
.top-pick-callout__card { font-size: 20px; font-weight: 700; color: var(--be-text-dark); margin-bottom: 8px; line-height: 1.3; }
.top-pick-callout__reason { font-size: 15px; line-height: 1.65; color: var(--be-text-mid); margin-bottom: 16px; }
.top-pick-callout__cta { display: inline-block; padding: 12px 24px; background: var(--be-purple); color: #fff; border-radius: var(--be-r-sm); font-size: 14px; font-weight: 700; text-decoration: none; transition: 0.15s; }
.top-pick-callout__cta:hover { background: var(--be-purple-hover); color: #fff; }

/* Key takeaway box */
.prose-takeaway { background: var(--be-green-light); border: 1px solid #C6EDDA; border-radius: var(--be-r-md); padding: 20px 24px; margin: 28px 0; max-width: 680px; }
.prose-takeaway-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--be-green); margin-bottom: 6px; }
.prose-takeaway p { color: var(--be-text-dark); margin-bottom: 0; font-size: 14.5px; line-height: 1.65; }

/* ════════════════════════════════════
   PRODUCT CARDS (.pc)
   ════════════════════════════════════ */
.sec-cards { padding: 56px 0; }
.pc { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); margin-bottom: 28px; overflow: hidden; transition: 0.2s; }
.pc:hover { box-shadow: var(--be-sh-md); }
.pc-banner { background: var(--be-purple-surface); border-bottom: 1px solid var(--be-border-light); padding: 10px 32px; font-size: 13px; font-weight: 700; color: var(--be-purple); }
.pc-header { display: grid; grid-template-columns: 64px 1fr auto; gap: 20px; align-items: start; padding: 28px 32px; }
@media (max-width: 720px) { .pc-header { grid-template-columns: 56px 1fr; } .pc-header-cta { grid-column: 1 / -1; } }
.pc-logo { width: 64px; height: 64px; border-radius: var(--be-r-md); background: var(--be-surface-alt); border: 1px solid var(--be-border-light); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; color: var(--be-text-light); }
.pc-logo img { max-width: 48px; max-height: 48px; object-fit: contain; }
.pc-title { font-size: 20px; font-weight: 800; line-height: 1.25; margin-bottom: 4px; }
.pc-subtitle { font-size: 14.5px; color: var(--be-text-mid); line-height: 1.5; }
.pc-header-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 170px; }
.pc-btn { display: block; width: 100%; padding: 13px 20px; background: var(--be-purple); color: #fff; border: none; border-radius: var(--be-r-sm); font-size: 14.5px; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: 0.15s; }
.pc-btn:hover { background: var(--be-purple-hover); }
.pc-btn-sub { font-size: 11.5px; color: var(--be-text-light); }

/* Fee grid */
.pc-feegrid { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--be-border-light); border-bottom: 1px solid var(--be-border-light); }
.pc-feeblock { padding: 16px 32px; border-right: 1px solid var(--be-border-light); }
.pc-feeblock:nth-child(2n) { border-right: none; }
.pc-feeblock:nth-child(n+3) { border-top: 1px solid var(--be-border-light); }
.pc-fee-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--be-text-faint); margin-bottom: 3px; }
.pc-fee-value { font-size: 17px; font-weight: 700; color: var(--be-text-dark); line-height: 1.3; }
.pc-fee-note { font-size: 12.5px; color: var(--be-text-light); margin-top: 1px; }

/* Semantic callouts */
.pc-callouts { padding: 24px 32px; }
.pc-callout { display: flex; gap: 12px; align-items: baseline; padding: 10px 16px; margin-bottom: 8px; background: var(--be-bg-alt); border-radius: var(--be-r-sm); border-left: 3px solid transparent; font-size: 14px; line-height: 1.5; color: var(--be-text-mid); }
.pc-callout:last-child { margin-bottom: 0; }
.pc-callout strong { font-size: 12.5px; font-weight: 700; white-space: nowrap; min-width: 80px; flex-shrink: 0; }
.pc-callout.best { border-left-color: var(--be-purple); }
.pc-callout.best strong { color: var(--be-purple); }
.pc-callout.warn { border-left-color: var(--be-caution); }
.pc-callout.warn strong { color: var(--be-caution); }
.pc-callout.no { border-left-color: #DC2626; }
.pc-callout.no strong { color: #DC2626; }
.pc-callout.elig { border-left-color: var(--be-text-light); }
.pc-callout.elig strong { color: var(--be-text-mid); }

/* Expandable body */
.pc-body { padding: 0 32px; max-height: 0; overflow: hidden; transition: max-height 0.35s ease, padding 0.35s ease; }
.pc.expanded .pc-body { max-height: 600px; padding: 24px 32px; border-top: 1px solid var(--be-border-light); }
.pc-body p { font-size: 14.5px; color: var(--be-text-mid); line-height: 1.75; margin-bottom: 12px; max-width: 680px; }
.pc-body p:last-child { margin-bottom: 0; }
.pc-expand { display: block; width: 100%; padding: 12px 32px; background: none; border: none; border-top: 1px solid var(--be-border-light); font-size: 13px; font-weight: 600; color: var(--be-purple); cursor: pointer; text-align: left; transition: 0.15s; }
.pc-expand:hover { background: var(--be-purple-surface); }
.pc.expanded .pc-expand span { display: inline-block; transform: rotate(180deg); }

/* Key-value bullets */
.pc-kv { padding: 0 32px 24px; }
.pc-kv-item { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--be-border-light); font-size: 14.5px; line-height: 1.6; color: var(--be-text-mid); }
.pc-kv-item:last-child { border-bottom: none; }
.pc-kv-tick { color: var(--be-green); font-weight: 700; font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.pc-kv-item strong { color: var(--be-text-dark); font-weight: 700; min-width: 90px; flex-shrink: 0; }

/* "What's new" freshness block */
.pc-new { margin: 0 32px 20px; padding: 16px 20px; background: var(--be-green-light); border: 1px solid #C6EDDA; border-radius: var(--be-r-md); }
.pc-new-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--be-green); margin-bottom: 6px; }
.pc-new ul { list-style: none; }
.pc-new li { font-size: 13.5px; color: var(--be-text-mid); line-height: 1.55; padding: 3px 0 3px 16px; position: relative; }
.pc-new li::before { content: '\2192'; position: absolute; left: 0; top: 3px; color: var(--be-green); font-weight: 700; font-size: 12px; }

/* Editorial headline */
.pc-editorial-hl { font-family: 'Newsreader', Georgia, serif; font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--be-text-dark); padding: 0 32px; margin-bottom: 20px; }

/* Verified footer */
.pc-verified { padding: 10px 32px; font-size: 11.5px; color: var(--be-text-faint); border-top: 1px solid var(--be-border-light); }

/* ════════════════════════════════════
   SEGMENTS (buyer-fit cards)
   ════════════════════════════════════ */
.sec-seg { padding: 56px 32px; background: var(--be-bg-alt); border-radius: var(--be-r-lg); margin-bottom: 8px; }
.sg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 860px) { .sg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .sg { grid-template-columns: 1fr; } }
.s { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); padding: 24px; transition: 0.2s; cursor: pointer; position: relative; overflow: hidden; }
.s::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--be-purple); transform: scaleX(0); transition: 0.2s; }
.s:hover { box-shadow: var(--be-sh-md); border-color: var(--be-purple); }
.s:hover::after { transform: scaleX(1); }
.s-ic { width: 40px; height: 40px; border-radius: 10px; background: var(--be-purple-light); display: flex; align-items: center; justify-content: center; font-size: 18px; margin-bottom: 14px; }
.s h3 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.s p { font-size: 13.5px; color: var(--be-text-mid); line-height: 1.5; margin-bottom: 10px; }
.s-pk { font-size: 13px; font-weight: 700; color: var(--be-purple); }

/* ════════════════════════════════════
   FAQs
   ════════════════════════════════════ */
.sec-faq { padding: 56px 0; }
.fl { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); overflow: hidden; }
.fq { border-bottom: 1px solid var(--be-border-light); }
.fq:last-child { border-bottom: none; }
.fq-q { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; font-size: 15px; font-weight: 600; transition: 0.1s; user-select: none; gap: 12px; }
.fq-q:hover { background: var(--be-bg-alt); }
.fq-ch { font-size: 16px; color: var(--be-text-faint); transition: transform 0.2s; flex-shrink: 0; }
.fq.open .fq-ch { transform: rotate(180deg); color: var(--be-purple); }
.fq-a { display: none; padding: 0 24px 20px; font-size: 14.5px; color: var(--be-text-mid); line-height: 1.65; }
.fq.open .fq-a { display: block; }

/* ════════════════════════════════════
   INTERNAL LINKS
   ════════════════════════════════════ */
.sec-lnk { padding: 56px 32px; background: var(--be-bg-alt); border-radius: var(--be-r-lg); margin-bottom: 8px; }
.lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 720px) { .lg { grid-template-columns: 1fr; } }
.il { display: flex; align-items: center; gap: 10px; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-md); padding: 16px 18px; text-decoration: none; color: var(--be-text-dark); font-size: 14px; font-weight: 600; transition: 0.15s; }
.il:hover { border-color: var(--be-purple); color: var(--be-purple); box-shadow: var(--be-sh-sm); }

/* ════════════════════════════════════
   TRUST SECTION
   ════════════════════════════════════ */
.sec-trust { padding: 56px 0; }
.tg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 720px) { .tg { grid-template-columns: 1fr; } }
.trst { background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-lg); padding: 28px; }
.trst h4 { font-size: 15px; font-weight: 700; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.trst p { font-size: 14px; color: var(--be-text-mid); line-height: 1.6; }

/* ════════════════════════════════════
   FAQ ACCORDION
   ════════════════════════════════════ */
.cc-faq__list { list-style: none; padding: 0; margin: 0; }
.cc-faq__item { border-bottom: 1px solid var(--be-border-light); }
.cc-faq__item:last-child { border-bottom: none; }
.cc-faq__details { }
.cc-faq__question { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; cursor: pointer; font-size: 15px; font-weight: 600; gap: 12px; list-style: none; user-select: none; transition: 0.1s; }
.cc-faq__question:hover { background: var(--be-bg-alt); }
.cc-faq__question::-webkit-details-marker { display: none; }
.cc-faq__question::marker { display: none; content: ''; }
.cc-faq__icon { width: 18px; height: 18px; flex-shrink: 0; color: var(--be-text-faint); transition: transform 0.2s; }
.cc-faq__details[open] .cc-faq__icon { transform: rotate(90deg); color: var(--be-purple); }
.cc-faq__answer { padding: 0 24px 20px; font-size: 14.5px; color: var(--be-text-mid); line-height: 1.65; }
.cc-faq__answer p { margin-bottom: 12px; }
.cc-faq__answer p:last-child { margin-bottom: 0; }

/* ════════════════════════════════════
   TABBED PRODUCT CARDS
   From assets/cards/be-tabbed-card.css
   ════════════════════════════════════ */
.cc-tab-card { border: 1px solid #E8E2EF; border-radius: 14px; background: #fff; margin-top: 48px; margin-bottom: 48px; overflow: hidden; box-shadow: 0 2px 12px rgba(0,0,0,0.10); }
.cc-tab-card__strip { background: #FDFCFE; border-bottom: 1px solid #F0ECF4; padding: 7px 32px; font-size: 11px; font-weight: 600; color: #6E6E78; }
.cc-tab-card__header { display: grid; grid-template-columns: 120px 1fr auto; gap: 0 28px; align-items: center; padding: 26px 32px 18px; }
.cc-tab-card__image { width: 120px; height: 86px; background: #FCFBFD; border-radius: 8px; border: 1px solid #EEEAF2; display: flex; align-items: center; justify-content: center; padding: 6px; }
.cc-tab-card__image img { max-width: 100%; max-height: 72px; object-fit: contain; }
.cc-tab-card__identity h3 { font-size: 19px; font-weight: 700; line-height: 1.25; color: #2A2A2E; margin: 0 0 6px 0; }
.cc-tab-card__summary { font-size: 15px; line-height: 1.55; color: #4A4A52; max-width: 480px; }
.cc-tab-card__header-cta { display: flex; align-items: center; flex-shrink: 0; }
.cc-tab-card__cta { display: inline-block; padding: 9px 22px; background: var(--be-purple); color: #fff; font-size: 13px; font-weight: 600; border-radius: 7px; text-decoration: none; transition: background 0.15s; white-space: nowrap; }
.cc-tab-card__cta:hover { background: var(--be-purple-hover); color: #fff; text-decoration: none; }
.cc-tab-card__stats { display: flex; gap: 0; margin: 0 32px; padding: 10px 0 14px 0; border-top: 1px solid #F0ECF4; border-bottom: 1px solid #F0ECF4; }
.cc-tab-card__stat { flex: 1; padding: 0 14px 0 0; }
.cc-tab-card__stat + .cc-tab-card__stat { border-left: 1px solid #F0ECF4; padding-left: 14px; }
.cc-tab-card__stat-label { display: block; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #8A8A94; margin-bottom: 2px; }
.cc-tab-card__stat-value { display: block; font-size: 13.5px; font-weight: 700; color: #2A2A2E; line-height: 1.35; }
.cc-tab-card__tabs { display: flex; gap: 0; margin: 0 32px; padding-top: 6px; border-bottom: 1px solid #F0ECF4; }
.cc-tab-card__tab { padding: 10px 20px; font-size: 13px; font-weight: 600; color: #8A8A94; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: color 0.15s, border-color 0.15s; white-space: nowrap; }
.cc-tab-card__tab:hover { color: #4A4A52; }
.cc-tab-card__tab:first-child { padding-left: 0; }
.cc-tab-card__tab--active { color: var(--be-purple); border-bottom-color: var(--be-purple); }
.cc-tab-card__tab:focus-visible { outline: 2px solid var(--be-purple); outline-offset: -2px; border-radius: 4px; }
.cc-tab-card__panel { display: none; padding: 20px 32px 24px; }
.cc-tab-card__panel--active { display: block; }
.cc-tab-card__item { font-size: 14px; line-height: 1.55; color: #4A4A52; padding: 7px 0; }
.cc-tab-card__item strong { color: #2A2A2E; font-weight: 700; }
.cc-tab-card__detail-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; border-bottom: 1px solid #F8F6FA; }
.cc-tab-card__detail-row:last-child { border-bottom: none; }
.cc-tab-card__detail-label { font-size: 13px; font-weight: 600; color: #6E6E78; flex-shrink: 0; width: 160px; }
.cc-tab-card__detail-value { font-size: 14px; font-weight: 600; color: #2A2A2E; text-align: right; line-height: 1.45; }
.cc-tab-card__qual { font-size: 11px; font-weight: 400; color: #8A8A94; display: block; }
.cc-tab-card__footer { margin: 0 32px; padding: 10px 0 18px; border-top: 1px solid #F0ECF4; }
.cc-tab-card__trust { font-size: 11px; color: #8A8A94; line-height: 1.4; }
.cc-tab-card__review-link { display: inline-block; margin-right: 16px; font-size: 13px; font-weight: 600; color: var(--be-purple); text-decoration: none; }
.cc-tab-card__review-link:hover { text-decoration: underline; }
.cc-tab-card__list { margin: 0 0 16px; padding: 0; }
.cc-tab-card__list-item { position: relative; padding: 6px 0 6px 28px; font-size: 14px; line-height: 1.5; color: #2A2A2E; }
.cc-tab-card__list-item::before { position: absolute; left: 0; top: 7px; font-size: 15px; }
.cc-tab-card__list-item--pro::before { content: "\2713"; color: #1B8A3E; }
.cc-tab-card__list-item--con::before { content: "\2717"; color: #C0392B; }
.cc-tab-card__list--pros { border-bottom: 1px solid #f0ecf4; padding-bottom: 12px; margin-bottom: 12px; }
.cc-tab-card__list--cons { margin-bottom: 0; }
@media (max-width: 640px) {
  .cc-tab-card__header { grid-template-columns: 72px 1fr; grid-template-rows: auto auto; gap: 0 14px; padding: 18px 20px 14px; }
  .cc-tab-card__image { width: 72px; height: 52px; padding: 5px; }
  .cc-tab-card__header-cta { grid-column: 1 / -1; padding-top: 10px; }
  .cc-tab-card__cta { display: block; width: 100%; text-align: center; }
  .cc-tab-card__stats { flex-direction: column; margin: 0 20px; }
  .cc-tab-card__stat + .cc-tab-card__stat { border-left: none; border-top: 1px solid #F0ECF4; padding-left: 0; padding-top: 10px; margin-top: 10px; }
  .cc-tab-card__tabs { margin: 0 20px; overflow-x: auto; }
  .cc-tab-card__tab { padding: 10px 16px; font-size: 12px; }
  .cc-tab-card__panel { padding: 16px 20px 20px; }
  .cc-tab-card__detail-row { flex-direction: column; gap: 2px; }
  .cc-tab-card__detail-label { width: auto; }
  .cc-tab-card__detail-value { text-align: left; }
  .cc-tab-card__footer { margin: 0 20px; }
  .cc-tab-card__strip { padding: 6px 20px; }
}

/* ════════════════════════════════════
   HUB / CATEGORY PAGES — card grid for parent pages (business-banking, etc.)
   Human-editable via Gutenberg; CSS provides the card styling.
   ════════════════════════════════════ */
/* Container and hero */
.hub-page { max-width: var(--be-width-container); margin: 0 auto; padding: 0 var(--be-width-padding); }
.hub-hero { padding: 48px 0 32px; }
.hub-hero h1, .hub-hero .wp-block-heading { font-size: 2.2rem; font-weight: 800; line-height: 1.15; margin: 0 0 12px; color: var(--be-text); }
.hub-hero p { font-size: 1.05rem; line-height: 1.6; color: var(--be-text-mid); margin: 0; max-width: 640px; }
/* Section headings */
.hub-section-heading { font-size: 1.45rem; font-weight: 700; margin: 40px 0 16px; color: var(--be-text); }
/* Card rows — Gutenberg columns blocks */
.hub-row { margin-bottom: 0; gap: 12px; }
.hub-row .wp-block-column { flex-basis: 33.33%; }
.hub-card-col { padding: 16px 20px; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-md); transition: border-color 0.15s, box-shadow 0.15s; }
.hub-card-col:hover { border-color: #bbb; box-shadow: var(--be-sh-sm); }
.hub-card-col.hub-card-empty { background: transparent; border: none; }
.hub-card-col.hub-card-empty:hover { box-shadow: none; }
/* Card title and subtitle */
.hub-card-title { font-size: 0.92rem; font-weight: 600; line-height: 1.35; margin: 0; padding: 0; }
.hub-card-title a { color: var(--be-text); text-decoration: none; }
.hub-card-title a:hover { color: var(--be-purple); }
.hub-card-sub { font-size: 0.8rem; font-weight: 400; color: var(--be-text-mid); margin: 4px 0 0; padding: 0; }
/* Legacy raw-HTML card support */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.hub-card { display: block; padding: 16px 20px; background: var(--be-surface); border: 1px solid var(--be-border); border-radius: var(--be-r-md); text-decoration: none; color: var(--be-text); font-size: 0.92rem; font-weight: 600; line-height: 1.35; transition: border-color 0.15s, box-shadow 0.15s; }
.hub-card:hover { border-color: #bbb; box-shadow: var(--be-sh-sm); color: var(--be-text); }
.hub-card span { display: block; font-size: 0.8rem; font-weight: 400; color: var(--be-text-mid); margin-top: 4px; }
@media (max-width: 780px) { .hub-grid { grid-template-columns: 1fr 1fr; } .hub-row { flex-wrap: wrap; } .hub-row .wp-block-column { flex-basis: 48%; } }
@media (max-width: 480px) { .hub-grid { grid-template-columns: 1fr; } .hub-row .wp-block-column { flex-basis: 100%; } }

/* ════════════════════════════════════
   MOBILE LAYOUT — reduce container padding and inner margins
   so content fills the viewport instead of rendering in a thin strip.
   ════════════════════════════════════ */
@media (max-width: 768px) {
  :root { --be-width-padding: 24px; }

  /* ── Bug 1 fix: prevent comparison table from expanding the document ──
     .ct has min-width:820px at desktop for column stability. On mobile that
     pushes the page wider than the viewport, making the browser render at
     ~820px+ and show a zoomed-out/cropped view. Removing min-width here
     lets the table reflow within .tw's overflow-x:auto scrollable area.
     .full-width-content gets overflow-x:hidden so any remaining wide
     children cannot expand the document width. */
  .ct { min-width: 0; }
  .full-width-content { overflow-x: hidden; }

  /* ── Bug 2 fix: containers fill the viewport width ──
     At desktop these containers use max-width:1220px which is fine.
     On mobile, ensure they expand to 100% of the viewport minus padding,
     not some inherited or computed narrower width. */
  .full-width-content,
  .be-layout,
  .be-hero,
  .hero-wrap,
  .crumb { width: 100%; max-width: 100%; box-sizing: border-box; }

  /* Comparison table zone: reduce child margins to match container padding */
  .sec-table .sh { padding: 0 24px; }
  .tw { margin: 0 24px; }
  .sec-table { border-radius: 0; margin-top: 24px; margin-bottom: 48px; }

  /* Product review cards: reduce inner horizontal padding */
  .pc-banner { padding-left: 24px; padding-right: 24px; }
  .pc-header { padding: 20px 24px; }
  .pc-body { padding: 0 24px; }

  /* Section spacing tightening */
  .sec-prose { padding: 40px 0; }
  .sec-cards { padding: 40px 0; }
  .sec-faq { padding: 40px 0; }
  .sec-seg { padding: 40px 24px; }
  .sec-lnk { padding: 40px 24px; }
  .sec-trust { padding: 40px 0; }

  /* Decision table: full-width within its container */
  .dt { max-width: 100%; }

  /* Bare block elements directly inside .full-width-content (e.g. intro prose
     above comparison table) have no padding container. Pad them individually
     so .sec-table can still go edge-to-edge with its grey background. */
  .full-width-content > h2,
  .full-width-content > h3,
  .full-width-content > p,
  .full-width-content > ul,
  .full-width-content > ol { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }

  /* Top pick card in hero zone */
  .tp-card { padding: 24px 24px; }

  /* Ad disclosure tooltip: prevent overflow */
  .ad-body { width: calc(100vw - 48px); right: -24px; }

  /* Hero zone top padding */
  .hero { padding: 20px 0 0; }
  .hero-zone { padding-bottom: 32px; }
}

/* ════════════════════════════════════
   MOBILE HERO ZONE — 8px grid refinements, ≤640px
   Removes vertical bloat, creates clear reading rhythm,
   brings top pick closer without moving it.
   ════════════════════════════════════ */
@media (max-width: 640px) {

  /* Breadcrumb — hide current-page segment, keep parent category link */
  .crumb__current { display: none; }

  /* Meta row (read time + disclosure) */
  .hero-meta { gap: 12px; margin-bottom: 16px; }
  .read-time { font-size: 12px; }
  .ad-pill { font-size: 12px; padding: 6px 10px; border-radius: 16px; }

  /* H1 */
  .hero h1 { font-size: 27px; line-height: 34px; letter-spacing: -0.2px; margin-bottom: 12px; }

  /* Intro paragraph (standfirst) */
  .hero-sub { font-size: 15px; line-height: 23px; max-width: 90%; margin-bottom: 20px; }

  /* Author / editor block */
  .byline-row { gap: 16px; }
  .by-person { gap: 8px; font-size: 13px; }
  .by-av { width: 28px; height: 28px; font-size: 10px; }
  .by-role { font-size: 11px; line-height: 18px; }
  .by-name { font-size: 13px; line-height: 18px; }
  .byline-block { margin-bottom: 12px; }

  /* Published date */
  .by-date { font-size: 12px; line-height: 16px; margin-top: 12px; margin-bottom: 16px; }

  /* Trust signals box — no left padding so dots align with "Published" text above */
  .trust {
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 12px 12px 0;
    gap: 8px;
    border-radius: 12px;
    margin-bottom: 0;
  }
  .trust-i { font-size: 13px; line-height: 18px; gap: 6px; }

  /* Hero grid: collapse gap on mobile so top pick sits closer */
  .hero-grid { gap: 0; }

  /* Top pick card */
  .tp-card { padding: 16px; margin-top: 16px; }
  .tp-label { font-size: 11px; letter-spacing: 0.08em; margin-bottom: 8px; }
  .tp-name { font-size: 21px; margin-bottom: 4px; }
  .tp-type { font-size: 13px; margin-bottom: 8px; }
  .tp-tagline { font-size: 13px; line-height: 1.45; }
  .tp-logo { width: 128px; height: 80px; margin: 16px auto; }
  .tp-list { margin-bottom: 16px; }
  .tp-list li { font-size: 13px; padding: 6px 0 6px 22px; }
  .tp-cta { padding: 13px; font-size: 14px; }

  /* Prevent consecutive full-width grey blocks stacking without separation */
  .hero-zone + .also-section { margin-top: 0; padding-top: 16px; }
  .sec-table { margin-top: 16px; }
}