@charset "UTF-8";
/* ==========================================================================
   eComBuilderInsider editorial design system
   Child theme: freetrialchild (Kadence)
   English-only. No RTL, no multilingual, no page-builder dependency.
   Loaded after `kadence-global` so these rules win on equal specificity.
   --------------------------------------------------------------------------
   1.  Design tokens
   2.  Base + typography
   3.  Readable measure (long-form)
   4.  Focus + accessibility
   5.  Header + navigation
   6.  Buttons + CTAs
   7.  Cards + post grids
   8.  Comparison tables
   9.  Callouts, pros/cons, badges
   10. Article chrome (breadcrumbs, meta, TOC, author, related, FAQ)
   11. Footer
   12. Responsive breakpoints
   13. Print
   ========================================================================== */

/* 1. Design tokens ------------------------------------------------------- */
:root {
  /* Brand */
  --ebi-navy: #172b4d;
  --ebi-deep: #05053d;       /* footer + closing band navy */
  --ebi-blue: #0b84f3;
  --ebi-blue-dark: #0968c4;
  --ebi-blue-ink: #075aa8;
  --ebi-light-blue: #e8f3ff;
  --ebi-soft: #f7f9fc;
  --ebi-success: #1f7a4d;
  --ebi-success-bg: #e8f7ef;
  --ebi-warning: #8a5a00;
  --ebi-warning-bg: #fff6e5;
  --ebi-danger: #b42318;
  --ebi-danger-bg: #fdeceb;

  /* Ink */
  --ebi-ink: #0f1b2d;        /* headings            */
  --ebi-text: #33415c;       /* body copy           */
  --ebi-muted: #55637a;      /* secondary, AA on white */
  --ebi-white: #ffffff;

  /* Light-on-dark scale for the footer band. --ebi-ink and --ebi-muted are
     effectively unreadable on its navy (#05053d): the muted grey measures
     3.15:1, below the 4.5:1 minimum. */
  --ebi-on-deep: #ffffff;
  --ebi-on-deep-soft: rgba(255, 255, 255, 0.76);
  --ebi-on-deep-faint: rgba(255, 255, 255, 0.56);
  --ebi-on-deep-line: rgba(255, 255, 255, 0.14);

  /* Surfaces */
  --ebi-bg: #ffffff;
  --ebi-bg-soft: #f7f9fc;
  --ebi-border: #dce6f0;
  --ebi-border-strong: #c3d4e4;

  /* Editorial paper: warm stock with ledger rules. */
  --ebi-paper: #f7f7f2;
  --ebi-rule: rgba(15, 27, 45, 0.055);

  /* Action accent. Defaults to the site's established brand blue.
     See the "accent options" block at the end of this file to switch it. */
  --ebi-accent: #0b84f3;
  --ebi-accent-dark: #0968c4;
  --ebi-accent-ink: #075aa8;

  /* Verified-offer highlight. Used only for real, current offers. */
  --ebi-deal: #ffe07a;

  /* Type. Outfit carries display and headings, Poppins carries UI (kickers,
     buttons, labels, card titles), and the system stack carries long-form body
     copy — the cheapest readable text face there is. All three families arrive
     in a single Google Fonts request. */
  --ebi-font-display: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ebi-font-head: "Outfit", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ebi-font-ui: "Poppins", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ebi-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ebi-fs-body: 1.0625rem;   /* 17px */
  --ebi-fs-small: 0.9375rem;  /* 15px */
  --ebi-fs-tiny: 0.8125rem;   /* 13px */
  --ebi-lh-body: 1.7;
  --ebi-lh-head: 1.25;
  --ebi-measure: 46rem;       /* ~736px reading column */

  /* Space scale */
  --ebi-s1: 0.25rem;
  --ebi-s2: 0.5rem;
  --ebi-s3: 0.75rem;
  --ebi-s4: 1rem;
  --ebi-s5: 1.5rem;
  --ebi-s6: 2rem;
  --ebi-s7: 3rem;
  --ebi-s8: 4rem;

  /* Layout */
  --ebi-container: 1180px;
  --ebi-container-narrow: 800px;

  /* Radius + shadow */
  --ebi-radius: 6px;
  --ebi-radius-lg: 10px;
  --ebi-shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
  --ebi-shadow: 0 2px 8px rgba(15, 27, 45, 0.08);
  --ebi-shadow-lg: 0 10px 28px rgba(15, 27, 45, 0.10);
}

/* 2. Base + typography --------------------------------------------------- */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--ebi-font-body);
  font-size: var(--ebi-fs-body);
  line-height: var(--ebi-lh-body);
  color: var(--ebi-text);
  background-color: var(--ebi-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* `.elementor-kit-1399` is a class on <body>, and Elementor's Kit "Custom CSS"
   ships `font-size: 25.62px !important; line-height: 1.4 !important;
   font-family:"Helvetica Neue" !important;` against it. A bare `body` selector
   cannot win against that, so we match specificity (0,1,1) and load later.
   The durable fix is to correct that block in Elementor → Site Settings →
   Custom CSS; this override holds until then. */
body.elementor-kit-1399,
body[class*="elementor-kit-"] {
  font-family: var(--ebi-font-body) !important;
  font-size: var(--ebi-fs-body) !important;
  line-height: var(--ebi-lh-body) !important;
  color: var(--ebi-text) !important;
  background-color: var(--ebi-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Kadence's inline dynamic CSS targets `.wp-site-blocks .post-title h1`
   (specificity 0,2,1) with Outfit at weight 900 and `text-transform: capitalize`,
   which overrides a plain element selector. These selectors match or beat that
   specificity and load later, so the editorial type scale actually applies.
   `text-transform: none` restores sentence case for headlines — capitalising
   every word reads as machine-set copy. */
h1, h2, h3, h4, h5, h6,
.entry-title,
.wp-block-heading,
.wp-site-blocks h1, .wp-site-blocks h2, .wp-site-blocks h3,
.wp-site-blocks h4, .wp-site-blocks h5, .wp-site-blocks h6,
.wp-site-blocks .post-title h1,
.wp-site-blocks .post-title h2,
.wp-site-blocks .entry-header h1,
.wp-site-blocks .entry-hero h1,
.wp-site-blocks h1.entry-title {
  font-family: var(--ebi-font-head);
  color: var(--ebi-ink);
  font-weight: 700;
  line-height: var(--ebi-lh-head);
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}

h1,
.wp-site-blocks h1,
.wp-site-blocks .post-title h1,
.wp-site-blocks .entry-hero h1,
.wp-site-blocks h1.entry-title {
  font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem);
}

h2,
.wp-site-blocks h2,
.wp-site-blocks .post-title h2 {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
}

h3, .wp-site-blocks h3 { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem); font-weight: 600; }
h4, .wp-site-blocks h4 { font-size: 1.125rem; font-weight: 600; }
h5, .wp-site-blocks h5 { font-size: 1rem; font-weight: 600; }

h6, .wp-site-blocks h6 {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Kadence renders some archive H1s at weight 400 — too weak for editorial. */
.entry-hero h1,
.entry-header h1,
h1.entry-title,
.post-archive-title {
  font-weight: 700;
}

.entry-title a { text-decoration: none; color: inherit; }

p { margin: 0 0 1.15em; }

a {
  color: var(--ebi-blue-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 0.15s ease;
}
a:hover,
a:focus { color: var(--ebi-blue-dark); }

strong, b { color: var(--ebi-ink); font-weight: 600; }

/* Bold takes the heading ink, which is right on paper and fatal on a dark band.
   A rule on `strong` beats an inherited colour, so a container's own
   `color:#fff` never reaches the words. That is exactly what happened to the
   Kadence conversion banner on the deal pages: its inner div declares
   `color:#fff` inline, the whole sentence sits inside a `<strong>`, and the
   result measured #0f1b2d on #000 — 1.21:1, so "Get Xero Accounting Software"
   and "for 6 Months" were invisible while the yellow `<span>` inside the same
   `<strong>`, which carries a colour of its own, stayed perfectly legible. The
   sentence looked like it was missing its middle rather than like a colour bug.

   `inherit` is the only value that works here, because the theme cannot know
   the colour a conversion sets inline. It hands the colour back to whatever the
   surface declared — white on this banner — and reaches nothing on paper, since
   a light surface is already painting `--ebi-ink` on those words. The footer is
   included because it is the other dark band in the theme and the same hazard
   is documented against it further down this file; no footer widget prints
   inherited-colour text today, and this is what stops the first one that does
   from being invisible. Scope is the conversion *wrap*, not the inner element,
   so every conversion is covered rather than the one that broke. ---------- */
.kadence-conversion-wrap strong,
.kadence-conversion-wrap b,
#colophon strong,
#colophon b { color: inherit; }

small, .has-small-font-size { font-size: var(--ebi-fs-small); }

hr {
  border: 0;
  border-top: 1px solid var(--ebi-border);
  margin: var(--ebi-s6) 0;
}

blockquote {
  margin: var(--ebi-s5) 0;
  padding: var(--ebi-s3) 0 var(--ebi-s3) var(--ebi-s5);
  border-left: 3px solid var(--ebi-blue);
  background: var(--ebi-soft);
  font-size: 1.0625rem;
  color: var(--ebi-ink);
}
blockquote p:last-child { margin-bottom: 0; }
blockquote cite {
  display: block;
  margin-top: var(--ebi-s2);
  font-size: var(--ebi-fs-small);
  font-style: normal;
  color: var(--ebi-muted);
}

ul, ol { padding-left: 1.35em; }
li { margin-bottom: 0.5em; }
li > ul, li > ol { margin-top: 0.5em; }

/* The site previously depended on JS to fade list items in; the lists were
   invisible (opacity:0) whenever that script failed. Neutralised here. */
.bullet-animate, .highlight-animate { opacity: 1 !important; transform: none !important; }

img, svg, video, iframe { max-width: 100%; height: auto; }
img { border-radius: var(--ebi-radius); }

/* 3. Readable measure (long-form) ---------------------------------------- */
.entry-content,
.elementor-widget-theme-post-content {
  font-size: var(--ebi-fs-body);
  line-height: var(--ebi-lh-body);
  color: var(--ebi-text);
}

/* Cap the measure so paragraphs stop running the full 1240px page width. */
.single-post .entry-content > *,
.single:not(.single-post) .entry-content > * {
  max-width: var(--ebi-measure);
  margin-left: auto;
  margin-right: auto;
}

/* Wide content (tables, galleries, wide/full blocks, embeds) breaks out. */
.single-post .entry-content > .alignwide,
.single-post .entry-content > .alignfull,
.single-post .entry-content > .wp-block-table,
.single-post .entry-content > .ebi-table-wrap,
.single-post .entry-content > figure,
.single-post .entry-content > .wp-block-image,
.single-post .entry-content > .wp-block-embed,
.single-post .entry-content > .wp-block-gallery,
.single-post .entry-content > .ebi-compare,
.single-post .entry-content > table {
  max-width: 100%;
}

.single-post .entry-content h2 { margin: 2.2em 0 0.6em; }
.single-post .entry-content h3 { margin: 1.8em 0 0.5em; }
.single-post .entry-content h2 + h3 { margin-top: 0.75em; }
.single-post .entry-content > h2:first-child,
.single-post .entry-content > h3:first-child { margin-top: 0; }

.single-post .entry-content ul,
.single-post .entry-content ol { margin: 0 0 1.3em; }

.wp-block-image figcaption,
figure figcaption {
  font-size: var(--ebi-fs-small);
  color: var(--ebi-muted);
  text-align: left;
  margin-top: var(--ebi-s2);
}

/* 4. Focus + accessibility ----------------------------------------------- */
/* Kadence ships `hide-focus-outline` on <body>, which removes keyboard focus
   indication. Restored explicitly for keyboard users. */
body.hide-focus-outline :focus-visible,
:focus-visible {
  outline: 3px solid var(--ebi-blue);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Do not show rings for mouse/touch activation. */
:focus:not(:focus-visible) { outline: none; }

.skip-link,
.screen-reader-text:focus {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  background: var(--ebi-navy);
  color: #fff;
  font-weight: 600;
  border-radius: 0 0 var(--ebi-radius) 0;
}
.skip-link:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* 5. Header + navigation ------------------------------------------------- */
.site-header,
.mobile-header-container { background-color: var(--ebi-white); }

.site-header-row-container-inner { border-bottom: 1px solid var(--ebi-border); }

#site-navigation ul.menu > li > a,
.header-navigation ul.menu > li > a {
  font-family: var(--ebi-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  letter-spacing: -0.005em;
}

/* The rightmost dropdown ran 38px past the viewport (horizontal scroll).
   Anchor the last submenu to its right edge instead. */
#site-navigation .menu > li.menu-item-has-children:last-child > .sub-menu,
#site-navigation .menu > li:last-child > .sub-menu {
  left: auto;
  right: 0;
}

.sub-menu {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius);
  box-shadow: var(--ebi-shadow-lg);
  padding: var(--ebi-s2) 0;
}
.sub-menu a {
  padding: 0.55rem 1rem;
  font-size: 0.9375rem;
  line-height: 1.35;
}
.sub-menu a:hover,
.sub-menu a:focus { background: var(--ebi-light-blue); }

/* Keep the current page legible in the nav. */
.current-menu-item > a,
.current-menu-ancestor > a { color: var(--ebi-blue-ink); }

/* Search field */
.search-form input[type="search"],
.header-search input[type="search"] {
  border: 1px solid var(--ebi-border-strong);
  border-radius: var(--ebi-radius);
  padding: 0.5rem 0.75rem;
  font-size: 0.9375rem;
  background: var(--ebi-white);
  min-width: 0;
}
.search-form input[type="search"]:focus {
  border-color: var(--ebi-blue);
  box-shadow: 0 0 0 3px rgba(11, 132, 243, 0.15);
}

/* 6. Buttons + CTAs ------------------------------------------------------ */
.wp-block-button__link,
.kb-button,
.entry-content .button,
a.button,
button,
input[type="submit"],
.elementor-button {
  font-family: var(--ebi-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.2;
  border-radius: var(--ebi-radius);
  padding: 0.8em 1.5em;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link,
a.button,
.entry-content .button,
input[type="submit"] {
  background-color: var(--ebi-blue);
  color: #fff;
  border: 1px solid var(--ebi-blue);
}
.wp-block-button__link:hover,
.wp-block-button__link:focus,
a.button:hover,
.entry-content .button:hover,
input[type="submit"]:hover {
  background-color: var(--ebi-blue-dark);
  border-color: var(--ebi-blue-dark);
  color: #fff;
}

.wp-block-button.is-style-outline .wp-block-button__link,
.kb-button.outline {
  background: transparent;
  color: var(--ebi-blue-ink);
  border: 1px solid var(--ebi-border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  border-color: var(--ebi-blue);
  background: var(--ebi-light-blue);
}

/* Affiliate CTA — clearly labelled, never a bare "Click here". */
.ebi-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--ebi-blue);
  color: #fff !important;
  font-family: var(--ebi-font-head);
  font-weight: 600;
  padding: 0.85em 1.6em;
  border-radius: var(--ebi-radius);
  text-decoration: none;
  box-shadow: var(--ebi-shadow-sm);
}
.ebi-cta:hover, .ebi-cta:focus { background: var(--ebi-blue-dark); color: #fff !important; }

/* 7. Cards + post grids -------------------------------------------------- */
.entry.content-bg,
.post-thumbnail,
.entry-card {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-white);
  overflow: hidden;
}
.entry.content-bg { box-shadow: var(--ebi-shadow-sm); }

.entry-card .entry-title, .entry .entry-title {
  font-size: 1.125rem;
  font-weight: 600;
}
.entry-card .entry-title a, .entry .entry-title a { text-decoration: none; }
.entry-card .entry-title a:hover, .entry .entry-title a:hover { text-decoration: underline; }

/* Compact taxonomy label above/below a title. */
.ebi-kicker,
.entry-taxonomies {
  font-family: var(--ebi-font-head);
  font-size: var(--ebi-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ebi-blue-ink);
}
.ebi-kicker a, .entry-taxonomies a { text-decoration: none; }

/* 8. Comparison tables --------------------------------------------------- */
.wp-block-table,
.ebi-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--ebi-s5) 0;
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-white);
}
/* Overlay hint that the table can be scrolled on small screens. */
.ebi-table-wrap { position: relative; }

.entry-content table,
.ebi-compare table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  font-size: var(--ebi-fs-small);
  line-height: 1.5;
  min-width: 34rem; /* keeps columns legible; wrapper scrolls instead */
}

.entry-content table th,
.entry-content table td,
.ebi-compare th,
.ebi-compare td {
  padding: 0.75rem 0.9rem;
  border: 0;
  border-bottom: 1px solid var(--ebi-border);
  text-align: left;
  vertical-align: top;
}

.entry-content table thead th,
.ebi-compare thead th {
  background: var(--ebi-soft);
  color: var(--ebi-ink);
  font-family: var(--ebi-font-head);
  font-weight: 600;
  font-size: var(--ebi-fs-small);
  border-bottom: 2px solid var(--ebi-border-strong);
  white-space: nowrap;
}

.entry-content table tbody tr:nth-child(even),
.ebi-compare tbody tr:nth-child(even) { background: #fbfcfe; }
.entry-content table tbody tr:hover,
.ebi-compare tbody tr:hover { background: var(--ebi-light-blue); }
.entry-content table tbody tr:last-child td { border-bottom: 0; }

/* First column reads as a row label. */
.entry-content table tbody th[scope="row"] {
  font-weight: 600;
  color: var(--ebi-ink);
  background: var(--ebi-soft);
}

/* Verdict helpers inside comparison tables. */
.ebi-yes, .ebi-no, .ebi-partial {
  font-weight: 600;
  white-space: nowrap;
}
.ebi-yes     { color: var(--ebi-success); }
.ebi-no      { color: var(--ebi-danger); }
.ebi-partial { color: var(--ebi-warning); }

/* 9. Callouts, pros/cons, badges ----------------------------------------- */
.ebi-callout {
  border: 1px solid var(--ebi-border);
  border-left: 4px solid var(--ebi-blue);
  background: var(--ebi-soft);
  border-radius: var(--ebi-radius);
  padding: var(--ebi-s5);
  margin: var(--ebi-s5) 0;
  font-size: var(--ebi-fs-small);
  line-height: 1.65;
}
.ebi-callout > :last-child { margin-bottom: 0; }
.ebi-callout__title {
  font-family: var(--ebi-font-head);
  font-weight: 600;
  color: var(--ebi-ink);
  margin-bottom: var(--ebi-s2);
  font-size: 1rem;
}
.ebi-callout--disclosure { border-left-color: var(--ebi-muted); background: #fafbfd; }
.ebi-callout--tip        { border-left-color: var(--ebi-success); background: var(--ebi-success-bg); }
.ebi-callout--warning    { border-left-color: var(--ebi-warning); background: var(--ebi-warning-bg); }
.ebi-callout--key        { border-left-color: var(--ebi-blue); background: var(--ebi-light-blue); }

.ebi-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--ebi-s4);
  margin: var(--ebi-s5) 0;
}
.ebi-proscons > div {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius);
  padding: var(--ebi-s4) var(--ebi-s5);
  background: var(--ebi-white);
}
.ebi-proscons h3, .ebi-proscons h4 {
  margin: 0 0 var(--ebi-s2);
  font-size: 1rem;
  font-family: var(--ebi-font-head);
}
.ebi-proscons ul { margin: 0; padding-left: 1.15em; }
.ebi-proscons li { margin-bottom: 0.4em; font-size: var(--ebi-fs-small); }
.ebi-pros { border-top: 3px solid var(--ebi-success) !important; }
.ebi-cons { border-top: 3px solid var(--ebi-danger) !important; }

.ebi-badge {
  display: inline-block;
  font-family: var(--ebi-font-head);
  font-size: var(--ebi-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25em 0.6em;
  border-radius: 3px;
  background: var(--ebi-light-blue);
  color: var(--ebi-blue-ink);
  white-space: nowrap;
}
.ebi-badge--best    { background: #fff4e0; color: var(--ebi-warning); }
.ebi-badge--pick    { background: var(--ebi-success-bg); color: var(--ebi-success); }
.ebi-badge--updated { background: var(--ebi-soft); color: var(--ebi-muted); }

/* 10. Article chrome ----------------------------------------------------- */
.kadence-breadcrumbs,
.rank-math-breadcrumb {
  font-size: var(--ebi-fs-tiny);
  color: var(--ebi-muted);
}
.kadence-breadcrumbs a,
.rank-math-breadcrumb a { color: var(--ebi-muted); text-decoration: none; }
.kadence-breadcrumbs a:hover,
.rank-math-breadcrumb a:hover { color: var(--ebi-blue-ink); text-decoration: underline; }
.kadence-breadcrumbs .separator,
.rank-math-breadcrumb .separator { opacity: 0.55; }

/* Entry meta: the published and updated dates previously rendered glued
   together with no separator ("...202616 August 2026"). */
.entry-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.9rem;
  font-size: var(--ebi-fs-small);
  color: var(--ebi-muted);
  margin-top: var(--ebi-s3);
}
.entry-meta > span { display: inline-flex; align-items: center; gap: 0.35rem; }
.entry-meta .posted-by { gap: 0.35em; }
.entry-meta a { color: var(--ebi-text); text-decoration: none; font-weight: 600; }
.entry-meta a:hover { color: var(--ebi-blue-ink); text-decoration: underline; }
/* Suppress the legacy dot/pipe divider so gaps do the separating instead. */
.entry-meta.entry-meta-divider-dot > span::after,
.entry-meta.entry-meta-divider-vline > span::after,
.entry-meta.entry-meta-divider-slash > span::after { content: none; }

.entry-meta .ebi-updated { color: var(--ebi-muted); }

/* Reading time / last-updated strip */
.ebi-article-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: var(--ebi-fs-tiny);
  color: var(--ebi-muted);
  margin: var(--ebi-s3) 0 0;
}
.ebi-article-strip strong { color: var(--ebi-ink); font-weight: 600; }

/* Author box */
.ebi-authorbox {
  display: flex;
  gap: var(--ebi-s4);
  align-items: flex-start;
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-soft);
  padding: var(--ebi-s5);
  margin: var(--ebi-s6) 0;
}
.ebi-authorbox img {
  width: 64px; height: 64px;
  border-radius: 50%;
  flex: 0 0 64px;
  object-fit: cover;
}
.ebi-authorbox__name {
  font-family: var(--ebi-font-head);
  font-weight: 600;
  color: var(--ebi-ink);
  margin: 0 0 0.25rem;
  font-size: 1rem;
}
.ebi-authorbox__role {
  font-size: var(--ebi-fs-tiny);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ebi-blue-ink);
  margin: 0 0 var(--ebi-s2);
}
.ebi-authorbox p { font-size: var(--ebi-fs-small); margin-bottom: var(--ebi-s2); }
.ebi-authorbox p:last-child { margin-bottom: 0; }

/* Table of contents */
.ebi-toc {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-soft);
  padding: var(--ebi-s5);
  margin: var(--ebi-s5) 0 var(--ebi-s6);
  font-size: var(--ebi-fs-small);
}
.ebi-toc__title {
  font-family: var(--ebi-font-head);
  font-weight: 600;
  font-size: 0.9375rem;
  color: var(--ebi-ink);
  margin: 0 0 var(--ebi-s3);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ebi-toc ol { margin: 0; padding-left: 1.2em; }
.ebi-toc li { margin-bottom: 0.35em; }
.ebi-toc a { text-decoration: none; color: var(--ebi-text); }
.ebi-toc a:hover { color: var(--ebi-blue-ink); text-decoration: underline; }

/* Related articles */
.ebi-related { margin: var(--ebi-s7) 0 var(--ebi-s6); }
.ebi-related__title,
.ebi-faq__title,
.ebi-cta-block__title {
  font-family: var(--ebi-font-head);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ebi-ink);
  margin: 0 0 var(--ebi-s5);
  padding-bottom: var(--ebi-s2);
  border-bottom: 2px solid var(--ebi-border);
}
.ebi-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--ebi-s5);
  list-style: none;
  padding: 0;
  margin: 0;
}
.ebi-related__grid li { margin: 0; }
.ebi-related__card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  overflow: hidden;
  background: var(--ebi-white);
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.ebi-related__card:hover { box-shadow: var(--ebi-shadow); transform: translateY(-2px); }
.ebi-related__card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; }
.ebi-related__body { padding: var(--ebi-s4); }
.ebi-related__cat {
  font-size: var(--ebi-fs-tiny);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ebi-blue-ink);
}
.ebi-related__card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0.35rem 0 0;
  color: var(--ebi-ink);
}

/* FAQ */
.ebi-faq { margin: var(--ebi-s6) 0; }
.ebi-faq details {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius);
  background: var(--ebi-white);
  padding: 0;
  margin-bottom: var(--ebi-s3);
  overflow: hidden;
}
.ebi-faq summary {
  cursor: pointer;
  padding: var(--ebi-s4) var(--ebi-s5);
  font-family: var(--ebi-font-head);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ebi-ink);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ebi-s3);
}
.ebi-faq summary::-webkit-details-marker { display: none; }
.ebi-faq summary::after {
  content: "+";
  font-size: 1.25rem;
  line-height: 1;
  color: var(--ebi-blue);
  flex: 0 0 auto;
}
.ebi-faq details[open] summary::after { content: "\2212"; }
.ebi-faq details[open] summary { border-bottom: 1px solid var(--ebi-border); }
.ebi-faq .ebi-faq__answer { padding: var(--ebi-s4) var(--ebi-s5); }
.ebi-faq .ebi-faq__answer > :last-child { margin-bottom: 0; }

/* Article closing CTA */
.ebi-cta-block {
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-navy);
  color: #eaf1fb;
  padding: var(--ebi-s6);
  margin: var(--ebi-s6) 0;
}
.ebi-cta-block .ebi-cta-block__title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}
.ebi-cta-block p { color: #c8d8ee; font-size: var(--ebi-fs-small); }
.ebi-cta-block .ebi-cta { background: var(--ebi-blue); }
.ebi-cta-block .ebi-cta:hover { background: #fff; color: var(--ebi-navy) !important; }

/* Post navigation */
.post-navigation .post-navigation-sub small { color: var(--ebi-muted); }

/* 11. Footer -------------------------------------------------------------
   A dark navy band, so it carries the light-on-dark scale defined in section 1.

   Every rule here is prefixed with `#colophon`. That is not decoration. Kadence
   prints its own footer CSS into an inline <style> in the head, and it is deep
   enough to beat anything built from classes alone:

     #colophon { background:#05053d }
     .site-top-footer-wrap .site-footer-row-container-inner { color:var(--global-palette3) }
     .site-footer .site-top-footer-wrap a:not(.button):not(.wp-block-button__link):not(.wp-element-button) { color:var(--global-palette8) }
     .site-top-footer-inner-wrap .widget-area .widget-title { color:var(--global-palette7) }
     #colophon .footer-html { color:var(--global-palette9) }

   The links rule is four classes deep and the title rule three, so the
   class-only versions of those rules lost *silently*: the footer was being
   painted with the global palette (#f9fafb links, #f3f4f6 titles, #ffffff legal
   line) while the tokens below looked like they were in charge. An ID outranks
   any number of classes, and `#colophon` is the same hook Kadence uses itself,
   so it is the cheapest way to make this section actually apply.

   One consequence is worth knowing: `--global-palette3` is #1f2937, a dark grey
   on a #05053d band — about 1.2:1. No footer widget prints inherited-colour text
   today, but the first one that does would be invisible. Corrected below.
   ------------------------------------------------------------------------- */
#colophon {
  background-color: var(--ebi-deep);
  border-top: 3px solid var(--ebi-deal);
  color: var(--ebi-on-deep-soft);
  font-size: var(--ebi-fs-small);
}
/* One soft light source along the top edge, so the band reads as a surface lit
   from above rather than a flat rectangle. */
#colophon .site-footer-wrap {
  background-image: radial-gradient(120% 80% at 50% 0, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0) 62%);
}
#colophon .site-footer-row,
#colophon .site-footer-row-container-inner {
  background-color: transparent;
  color: var(--ebi-on-deep-soft);
}

/* Vertical rhythm. Kadence's Customizer padding on the inner wrap is *added* to
   the row padding below, so the columns used to open 116px inside the band and
   close 56px after them. One element owning the space is what makes it look
   deliberate instead of leftover. --------------------------------------- */
#colophon .site-top-footer-wrap { padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.75rem, 3.5vw, 2.5rem); }
#colophon .site-top-footer-inner-wrap,
#colophon .site-bottom-footer-inner-wrap { padding-top: 0; padding-bottom: 0; }
#colophon .site-bottom-footer-wrap {
  border-top: 1px solid var(--ebi-on-deep-line);
  padding: clamp(1rem, 2vw, 1.35rem) 0;
}

/* Left-aligned and top-aligned. The theme centres each widget area
   (`content-align-center`) and vertically centres the middle one
   (`content-valign-middle`), which put "COMPANY" 17px below the other two
   headings and made three link lists hard to scan. --------------------- */
#colophon .footer-widget-area { text-align: left; align-items: flex-start; }
#colophon .site-footer-section { align-items: flex-start; }

#colophon .widget-title {
  font-family: var(--ebi-font-ui);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ebi-on-deep);
  margin: 0 0 1.05rem;
  padding-bottom: 0.7rem;
  position: relative;
}
/* An accent rule under each heading, carrying the footer's own yellow. The
   editorial green (--ebi-accent) is only 2.6:1 on this navy, which is below the
   3:1 floor for a graphical element, so it cannot be used here. */
#colophon .widget-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1.5rem;
  height: 2px;
  background-color: var(--ebi-deal);
}
#colophon .widget { margin-bottom: 0; }
#colophon a {
  color: var(--ebi-on-deep-soft);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color 0.15s ease;
}
/* Pad the links, not the list items, so the tap targets are the words. At
   `line-height: 1.42` plus 0.28em of padding this lands at 30px tall, above the
   24px minimum in WCAG 2.5.8 and 4px tighter per row than the 34px it was. */
#colophon .menu a { display: inline-block; padding-block: 0.28em; line-height: 1.42; }
#colophon a:hover { color: var(--ebi-on-deep); text-decoration: underline; }
#colophon a:focus-visible {
  color: var(--ebi-on-deep);
  outline: 2px solid var(--ebi-deal);
  outline-offset: 3px;
  border-radius: 2px;
}
#colophon ul { list-style: none; padding-left: 0; margin: 0; }
#colophon li { margin-bottom: 0; }
#colophon .site-info { font-size: var(--ebi-fs-tiny); }
/* The middle column carries twelve links; two sub-columns stop the footer from
   reading as one long list. */
#colophon .footer-widget5 .menu { column-count: 2; column-gap: var(--ebi-s5); }
#colophon .footer-widget5 .menu li { break-inside: avoid; }

/* Bottom bar. Kadence's inline `#colophon .footer-html{color:var(--global-palette9)}`
   is an ID, so the legal line was pure white — brighter than the links above it,
   which inverts the hierarchy. The faint token is 6.1:1 here. ------------- */
#colophon .footer-html { color: var(--ebi-on-deep-faint); }
#colophon .ebi-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
}
#colophon .ebi-footer-copy { letter-spacing: 0.005em; }
#colophon .ebi-footer-address {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--ebi-font-ui);
}
#colophon .ebi-footer-address::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--ebi-deal);
}

/* Scroll-to-top. Kadence ships it as a 40px square outlined in
   `var(--global-palette4)` — #4b5563, which is 2.0:1 on this navy and below the
   3:1 floor for a UI control, and a hard grey box on the paper pages. A white
   disc reading on both surfaces is the one treatment that needs no page
   context. ------------------------------------------------------------------ */
/* Two classes after the ID, not one: Kadence writes
   `#kt-scroll-up.scroll-up-style-outline{background:rgba(0,0,0,0)}`, which is
   (1,1,0) and beat a plain `#kt-scroll-up` — the border radius landed while the
   background silently did not. `transform` and `opacity` are deliberately left
   alone: Kadence uses those for the show/hide, and its `transition: all` is
   allowed to keep doing the animating. */
#kt-scroll-up.kadence-scroll-to-top.scroll-up-wrap {
  width: 44px;
  height: 44px;
  border: 1px solid var(--ebi-border);
  border-radius: 999px;
  background-color: #fff;
  color: var(--ebi-ink);
  box-shadow: 0 8px 20px rgba(5, 5, 61, 0.18);
}
#kt-scroll-up.kadence-scroll-to-top.scroll-up-wrap:hover {
  background-color: var(--ebi-accent);
  border-color: var(--ebi-accent);
  color: #fff;
  box-shadow: 0 10px 24px rgba(5, 5, 61, 0.26);
}
#kt-scroll-up.kadence-scroll-to-top.scroll-up-wrap:focus-visible {
  outline: 2px solid var(--ebi-accent-ink);
  outline-offset: 3px;
}

/* Footer breakpoints live here rather than in section 12, because Kadence's own
   footer cuts are 719px and 1024px and neither matches this file's.

   719px is the one that matters, and it is worth stating what was measured
   there rather than assumed. The row carries `site-footer-row-mobile-column-
   layout-row`, which reads as "stack them", and Kadence's mobile block does
   match it — but all it sets is `grid`. The `grid-template-columns` from the
   desktop rule is never replaced, so at 719px and 767px the footer measured
   three columns of 183 / 256 / 155px, with the twelve-link list still split
   across two ~110px sub-columns. "Popular Deals" ran to two lines a link. The
   mobile layout is therefore set explicitly here.

   The mobile cut is `719.98px`, not `719px`. Media queries are evaluated
   against a fractional viewport width, and a resize to exactly 719px produced
   `innerWidth === 719` while *both* `(max-width: 719px)` and `(min-width:
   720px)` evaluated false — leaving a sub-pixel band with neither rule applied.
   0.02px is the standard guard (Bootstrap's 767.98px) and it cost a whole
   verification pass to find. ------------------------------------------- */
@media (min-width: 760px) {
  /* Seven links, twelve and three — the third column is ordinarily headed
     "Terms". Equal thirds gave that three-link column the same 394px as the
     twelve-link one, which is what left the middle list reading as a cramped
     pair of sub-columns. These weights settle at roughly 364 / 509 / 309
     against the 1242px container. */
  #colophon .site-top-footer-inner-wrap.site-footer-row-columns-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 0.85fr);
  }
  /* Kadence already positions a divider between columns and leaves it 0px wide
     and transparent — `.site-top-footer-inner-wrap .site-footer-section:not(
     :last-child):after` sits at `right: calc(-30px / 2)`, the middle of the
     column gap. Giving it a width is all the drawing it needs. */
  #colophon .site-top-footer-inner-wrap .site-footer-section:not(:last-child)::after {
    content: "";
    width: 1px;
    background-color: var(--ebi-on-deep-line);
  }
}
/* Tablet band. In 720–1023px the container is only about 700px wide, so the same
   weights left the middle column's two sub-columns 126px each at 768px against a
   longest label of 147.6px ("How We Test Software") — four of the twelve links
   wrapped to a second line, which reads as a broken list rather than a long one.
   Handing the room back to that column then broke the first one, whose longest
   label needs 190.2px ("Best Small Business Software").

   Both constraints are measurable, so the weights are solved rather than guessed.
   At 768px there is 643.2px of track to share and the measured minimums are
   190.2 / 319.2 / 107.1 (the middle figure is two sub-columns plus their 24px
   gap), which leaves 26.7px of slack. These weights divide it and settle at
   199.1 / 328.5 / 115.5.

   The band starts at 760px rather than at Kadence's 720px, because below that
   the three lists cannot all fit: 616.5px of track is needed against the 595px
   available at 720px, and at 720px every one of the three wrapped. Stacked
   below 760px, exactly as Kadence's own tablet default does, and the desktop
   ratio above resumes at 1024px, where the measured sub-column is 181.6px and
   nothing wraps. */
@media (min-width: 760px) and (max-width: 1023.98px) {
  #colophon .site-top-footer-inner-wrap.site-footer-row-columns-3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.65fr) minmax(0, 0.58fr);
  }
}
@media (max-width: 759.98px) {
  #colophon .site-top-footer-inner-wrap.site-footer-row-columns-3 { grid-template-columns: minmax(0, 1fr); }
  /* A hairline above each stacked column and its own breathing room, so the three
     lists still read as three groups. */
  #colophon .site-top-footer-inner-wrap .site-footer-section + .site-footer-section {
    border-top: 1px solid var(--ebi-on-deep-line);
    padding-top: clamp(1.5rem, 5vw, 2rem);
  }
  #colophon .site-top-footer-inner-wrap { grid-row-gap: clamp(1.5rem, 5vw, 2rem); }
  #colophon .site-top-footer-inner-wrap .site-footer-section::after { display: none; }
}
/* The two sub-columns are kept all the way down to 320px rather than collapsed
   to one. Measured at 375px: collapsing them made the footer 1091px tall — 1.6
   screens of phone — against 885px kept 2-up, and the widest label ("How We Test
   Software") simply wraps to two lines in its 150px track. */
/* The bottom bar goes two-ended — copyright left, address right — only from
   1024px, and stacks centred below it.

   Two-ended needs room the bar does not have at tablet widths: the copyright
   string renders 330px and the address 249px, so with a 24px gap the row needs
   603px of content box. Add the 68px the floating control needs and the bar has
   to be 671px wide. At 720px it is 655px, and the measured result of forcing it
   there was the legal line wrapping onto two rows, both left-aligned, which is
   worse than the thing it was avoiding.

   The scroll-to-top control is fixed to the *viewport*, not the container, so it
   shares a band with the legal line long before the layout gets narrow. That
   range is measurable too. The address has to end at least 90px from the right
   edge to clear the control: 44px wide, 30px from the edge, 16px of air. The
   container's content edge sits 24px in until the container caps at 1290px
   (viewport 1338) and then retreats 0.5px per viewport pixel, so it only reaches
   the required 90px at `1338 + 2 x (90 - 24)`, i.e. 1470px. Every width below
   that is in the collision window. Measured at 1280px before this rule, the
   overlap was 50px; measured at 1440px after it, the clearance is 73px. */
@media (min-width: 1024px) and (max-width: 1470px) {
  #colophon .ebi-footer-bottom { padding-right: 68px; }
}
@media (max-width: 1023.98px) {
  #colophon .ebi-footer-bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 0.5rem;
    padding-right: 0;
  }
  #colophon .ebi-footer-address::before { display: none; }
}

/* 12. Responsive breakpoints -------------------------------------------- */
/* Single-column pros/cons below tablet width. */
@media (max-width: 767px) {
  .ebi-proscons { grid-template-columns: 1fr; }
  .ebi-authorbox { flex-direction: column; }
  .ebi-toc { padding: var(--ebi-s4); }
  .ebi-cta-block { padding: var(--ebi-s5); }
}

/* Small phones (320–430px): guarantee no horizontal overflow anywhere. */
@media (max-width: 480px) {
  :root {
    --ebi-fs-body: 1rem;   /* 16px floor for readability */
    --ebi-s6: 1.5rem;
    --ebi-s7: 2rem;
  }

  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
  h3 { font-size: 1.15rem; }

  .entry-content table,
  .ebi-compare table { font-size: 0.875rem; min-width: 28rem; }
  .entry-content table th,
  .entry-content table td { padding: 0.6rem 0.7rem; }

  /* Keep the first column readable while the rest scrolls. */
  .entry-content table tbody th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
  }

  .post-navigation .nav-links { display: block; }
  .post-navigation .nav-previous,
  .post-navigation .nav-next { width: 100%; }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
  :root { --ebi-container: 100%; }
}

/* Wide desktop: keep the reading column honest. */
@media (min-width: 1400px) {
  .single-post .entry-content > * { max-width: var(--ebi-measure); }
}

/* Nav collapses to the mobile toggle — make the panel readable. */
@media (max-width: 1024px) {
  #mobile-site-navigation,
  .mobile-navigation {
    background: var(--ebi-white);
  }
  #mobile-site-navigation .menu > li > a,
  .mobile-navigation .menu > li > a {
    font-family: var(--ebi-font-head);
    font-weight: 600;
    font-size: 1rem;
    color: var(--ebi-ink);
  }
  #mobile-site-navigation .sub-menu a,
  .mobile-navigation .sub-menu a { font-size: 0.9375rem; }
}

/* 12b. Editorial component kit ------------------------------------------ */
/* These are the devices that carry the editorial voice across every page:
   the ledger-rule backdrop, kicker rows, oversized headlines, stat tiles,
   verdict cards, deal chips and CTA pairs. Nothing here needs a page builder,
   so it applies to posts, pages, archives and Elementor templates alike. */

/* Warm paper + ledger rules. Pure CSS, no image request. */
.ebi-ledger {
  background-color: var(--ebi-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ebi-rule) 0,
    var(--ebi-rule) 1px,
    transparent 1px,
    transparent 44px
  );
}

.ebi-section {
  padding: var(--ebi-s7) 0;
}
.ebi-section--paper { background-color: var(--ebi-paper); }
.ebi-section--tight { padding: var(--ebi-s6) 0; }

/* Kicker row: category · volume · updated date. Small, uppercase, factual. */
.ebi-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.7rem;
  font-family: var(--ebi-font-head);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ebi-accent-ink);
  margin: 0 0 var(--ebi-s4);
}
.ebi-kicker__sep { color: var(--ebi-muted); opacity: 0.6; }
.ebi-kicker a { color: inherit; text-decoration: none; }
.ebi-kicker a:hover { text-decoration: underline; }

/* Oversized editorial headline. */
.ebi-display {
  font-family: var(--ebi-font-head);
  font-weight: 700;
  font-size: clamp(2.1rem, 1.4rem + 3.4vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--ebi-ink);
  margin: 0 0 var(--ebi-s4);
  text-wrap: balance;
}

.ebi-standfirst {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.6;
  color: var(--ebi-muted);
  max-width: 34rem;
  margin: 0 0 var(--ebi-s5);
}

/* ---- Verdict card: the offset-shadow summary panel ---- */
.ebi-verdict {
  position: relative;
  background: var(--ebi-white);
  border: 2px solid var(--ebi-ink);
  border-radius: var(--ebi-radius);
  box-shadow: 10px 10px 0 var(--ebi-ink);
  padding: var(--ebi-s5);
  margin: 0 0 var(--ebi-s5);
}
.ebi-verdict__label {
  font-family: var(--ebi-font-head);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ebi-accent-ink);
  margin: 0 0 var(--ebi-s2);
}
.ebi-verdict__title {
  font-family: var(--ebi-font-head);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ebi-ink);
  margin: 0 0 var(--ebi-s2);
}
.ebi-verdict__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ebi-muted);
  margin: 0 0 var(--ebi-s4);
}
.ebi-verdict__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ebi-s3);
  padding: var(--ebi-s4) 0;
  border-top: 1px solid var(--ebi-border);
  border-bottom: 1px solid var(--ebi-border);
}
.ebi-verdict__num {
  font-family: var(--ebi-font-head);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  color: var(--ebi-ink);
  margin: 0;
}
.ebi-verdict__cap {
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--ebi-muted);
  margin: 0.25rem 0 0;
}

/* Highlight chip for a real, verified offer. Never used for invented figures. */
.ebi-chip {
  display: inline-block;
  font-family: var(--ebi-font-head);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  padding: 0.5em 0.7em;
  margin: var(--ebi-s4) 0;
  background: var(--ebi-deal);
  color: var(--ebi-ink);
  border-radius: 3px;
}
.ebi-verdict .ebi-cta { display: block; width: 100%; text-align: center; margin-top: var(--ebi-s2); }

/* Compact stat strip (lighter alternative to the verdict card). */
.ebi-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: var(--ebi-s4);
  border: 1px solid var(--ebi-border);
  border-radius: var(--ebi-radius-lg);
  background: var(--ebi-soft);
  padding: var(--ebi-s5);
  margin: var(--ebi-s5) 0;
}
.ebi-facts__num {
  font-family: var(--ebi-font-head);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--ebi-ink);
  margin: 0;
}
.ebi-facts__cap {
  font-size: 0.8125rem;
  color: var(--ebi-muted);
  margin: 0.2rem 0 0;
}

/* ---- CTA pair: one filled, one outlined ---- */
.ebi-cta-pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ebi-s3);
  margin: var(--ebi-s5) 0;
  align-items: stretch;
}
.ebi-cta-pair .ebi-cta { flex: 1 1 12rem; justify-content: center; text-align: center; }

/* Primary CTA adopts the site accent. Declared before the outlined variant so
   the variant is not overridden by later rule order. */
.ebi-cta {
  background: var(--ebi-accent);
  border: 2px solid var(--ebi-accent);
}
.ebi-cta:hover, .ebi-cta:focus { background: var(--ebi-accent-dark); border-color: var(--ebi-accent-dark); }

/* Outlined variant. Doubled class beats the base `.ebi-cta` on specificity, so
   it stays hollow regardless of source order. */
.ebi-cta.ebi-cta--outline {
  background: transparent;
  color: var(--ebi-ink) !important;
  border: 2px solid var(--ebi-ink);
  box-shadow: none;
}
.ebi-cta.ebi-cta--outline:hover,
.ebi-cta.ebi-cta--outline:focus {
  background: var(--ebi-ink);
  border-color: var(--ebi-ink);
  color: var(--ebi-white) !important;
}

/* Two-column editorial hero: copy left, verdict card right. */
.ebi-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: var(--ebi-s7);
  align-items: start;
}

/* Apply the ledger paper to single-post heroes and archives sitewide. */
.single-post .entry-hero,
.page .entry-hero,
.post-type-archive .entry-hero,
.archive .entry-hero {
  background-color: var(--ebi-paper);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ebi-rule) 0,
    var(--ebi-rule) 1px,
    transparent 1px,
    transparent 44px
  );
  padding-top: var(--ebi-s6);
  padding-bottom: var(--ebi-s6);
}

/* Elementor sections inherit the paper treatment where they use the soft bg. */
.elementor-section[data-ebi-paper="1"],
.e-con[data-ebi-paper="1"] { background-color: var(--ebi-paper); }

@media (max-width: 1024px) {
  .ebi-hero-grid { grid-template-columns: 1fr; gap: var(--ebi-s5); }
}

@media (max-width: 480px) {
  .ebi-verdict { box-shadow: 6px 6px 0 var(--ebi-ink); padding: var(--ebi-s4); }
  .ebi-verdict__title { font-size: 1.4rem; }
  .ebi-verdict__stats { grid-template-columns: 1fr; gap: var(--ebi-s2); }
  .ebi-verdict__num { font-size: 1.2rem; }
  .ebi-cta-pair { flex-direction: column; }
  .ebi-cta-pair .ebi-cta { flex: 1 1 auto; width: 100%; }
}

/* 13. Print -------------------------------------------------------------- */
@media print {
  .site-header, .site-footer, .ebi-toc, .ebi-related, .ebi-cta-block,
  .post-navigation, .ebi-authorbox, .ebi-faq { display: none !important; }
  .single-post .entry-content > * { max-width: 100%; }
  body { font-size: 11pt; color: #000; }
  a { color: #000; text-decoration: none; }
}

/* ==========================================================================
   ACCENT — editorial green, matching the reference design
   --------------------------------------------------------------------------
   Enabled. Every component in this file reads these variables, so this single
   block re-skins buttons, links, kicker rows, verdict cards, chips and CTA
   pairs across the whole site. To return to the original navy/blue brand pair,
   comment this block out again — nothing else needs to change.
   ========================================================================== */
:root {
  --ebi-accent: #0f6f5c;
  --ebi-accent-dark: #0b5748;
  --ebi-accent-ink: #0b5748;
  --ebi-blue: #0f6f5c;
  --ebi-blue-dark: #0b5748;
  --ebi-blue-ink: #0b5748;
  --ebi-light-blue: #e6f2ef;
  --ebi-paper: #f6f6f1;
  --ebi-paper-deep: #eeeee6;
  --ebi-deal: #ffe07a;
}