/* Brumble Guide Components
 * Shared CSS for guide page content (used inside .brumble-guide and .brumble-article wrappers).
 * Gold standard: how-does-car-finance-work guide inline CSS.
 * Brand colours: Electric Teal #5bb2ae, Power Blue #1c233d, Road Slate #5c5e7b,
 * Shade #383b6c, Shade Light #d9daef, Peanut Butter Biscuit #f7b369.
 * Typography: Altivo (headings), Roboto (body).
 *
 * All component rules are scoped under :where(.brumble-guide, .brumble-article, .brumble-report) so they
 * never leak to surrounding chrome (footer, header, etc.). :where() contributes zero
 * to specificity, so inline <style> rules in legacy guides still win on equal-class
 * selectors.
 */


/* ---------- Base typography ---------- */
.brumble-guide *,
.brumble-article *,
.brumble-report * {
  box-sizing: border-box;
}

.brumble-guide,
.brumble-article,
.brumble-report {
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #5c5e7b;
  line-height: 1.8;
  font-size: 16px;
}

.brumble-guide h2,
.brumble-article h2,
.brumble-report h2 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 28px;
  line-height: 1.3;
  margin: 40px 0 16px 0;
}

.brumble-guide h2:first-of-type,
.brumble-article h2:first-of-type,
.brumble-report h2:first-of-type {
  margin-top: 0;
}

.brumble-guide h3,
.brumble-article h3,
.brumble-report h3 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 20px;
  line-height: 1.4;
  margin: 28px 0 12px 0;
}

.brumble-guide h4,
.brumble-article h4,
.brumble-report h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 18px;
  margin: 24px 0 10px 0;
}

.brumble-guide h2,
.brumble-article h2,
.brumble-report h2 {
  font-weight: 900;
  letter-spacing: -0.5px;
}

.brumble-guide h3,
.brumble-article h3,
.brumble-report h3 {
  letter-spacing: -0.25px;
}

/* Explicit values defeat the Lambda template's :where(.guide-content) p rules
   which otherwise set color #383b6c, letter-spacing 0.5px, line-height 24px. */
.brumble-guide p,
.brumble-article p,
.brumble-report p {
  margin-bottom: 18px;
  color: #5c5e7b;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
}

.brumble-guide a,
.brumble-article a,
.brumble-report a {
  color: #5bb2ae;
  text-decoration: underline;
}

.brumble-guide a:hover,
.brumble-article a:hover,
.brumble-report a:hover {
  color: #1c233d;
}

.brumble-guide strong,
.brumble-article strong,
.brumble-report strong {
  color: #1c233d;
}

.brumble-guide ul,
.brumble-guide ol,
.brumble-article ul,
.brumble-article ol,
.brumble-report ul,
.brumble-report ol {
  margin: 0 0 18px 0;
  padding-left: 24px;
  color: #5c5e7b;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
}

.brumble-guide li,
.brumble-article li,
.brumble-report li {
  margin-bottom: 6px;
  color: #5c5e7b;
}

/* ---------- Lead / meta / inline utilities ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .lead,
:where(.brumble-guide, .brumble-article, .brumble-report) .intro-text,
:where(.brumble-guide, .brumble-article, .brumble-report) .guide-desc {
  font-size: 18px;
  color: #5c5e7b;
  margin-bottom: 25px;
  line-height: 1.7;
  letter-spacing: normal;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .meta {
  color: #5c5e7b;
  font-size: 14px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .highlight {
  color: #1c233d;
  font-weight: 600;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .icon {
  font-size: 20px;
}

/* ---------- Quick summary (navy gradient background) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 12px;
  padding: 28px;
  margin: 24px 0 32px 0;
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #5bb2ae;
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Headings inside quick-summary act as quick-summary-title */
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary h2,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary h3,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #5bb2ae;
  margin: 0 0 16px 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  line-height: 1.3;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary p {
  color: #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary ol,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary li {
  color: #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary strong {
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary a {
  color: #5bb2ae;
}

/* When .hero-stat is INSIDE .quick-summary, remove its own gradient and use light colours */
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat {
  background: transparent;
  padding: 0;
  margin: 0 0 20px 0;
  border-radius: 0;
  text-align: center;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat-number {
  color: #5bb2ae;
  font-size: 42px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat .stat-label,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat .label,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .hero-stat-label {
  color: #d9daef;
}

/* When .stat-card is INSIDE .quick-summary, match the gold-standard .stat-item exactly:
   semi-transparent white background, subtle teal-tinted border, 10px radius. */
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .stat-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(91, 178, 174, 0.25);
  border-radius: 10px;
  padding: 16px 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .stat-card .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .stat-card .stat-card-number {
  color: #5bb2ae;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .stat-card .stat-label,
:where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary .stat-card .stat-card-label {
  color: #d9daef;
}

/* ---------- Stat grids and stat items ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-item {
  text-align: center;
  padding: 16px 12px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(91, 178, 174, 0.25);
  border-radius: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat-number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #5bb2ae;
  display: block;
  margin-bottom: 4px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-label,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card-label,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat-label {
  font-size: 13px;
  color: #d9daef;
  line-height: 1.4;
}

/* Stat card variant (light background context) */
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  text-align: center;
  border: 1px solid #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .stat-number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #5bb2ae;
  font-size: 24px;
  display: block;
  line-height: 1.2;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .stat-label {
  font-size: 13px;
  color: #5c5e7b;
  margin-top: 4px;
}

/* When a .stat-card is a direct child of .brumble-guide / .brumble-article (no grid wrapper),
   add bottom margin so the next heading or paragraph doesn't bump against it. Grids
   handle their own spacing via .stat-grid / .body-stat-grid margin-bottom. */
.brumble-guide > .stat-card:last-child,
.brumble-article > .stat-card:last-child,
.brumble-report > .stat-card:last-child {
  margin-bottom: 32px;
}

/* Bare .number / .label children of .stat-card (used by migrated brumble-article guides). */
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 32px;
  color: #5bb2ae;
  display: block;
  margin-bottom: 4px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .label {
  font-size: 14px;
  color: #5c5e7b;
  margin-top: 8px;
}

/* Hero stat (standalone) */
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  margin: 24px 0 20px 0;
  text-align: center;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #5bb2ae;
  font-size: 42px;
  display: block;
  line-height: 1.2;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .stat-label,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .label {
  font-size: 14px;
  color: #d9daef;
  margin-top: 4px;
}

/* Key stat (navy gradient with teal number — matches Brumble emphasis pattern). */
:where(.brumble-guide, .brumble-article, .brumble-report) .key-stat {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  color: #ffffff;
  padding: 30px;
  border-radius: 12px;
  margin: 24px 0 32px 0;
  text-align: center;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .key-stat .number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 800;
  font-size: 48px;
  color: #5bb2ae;
  display: block;
  margin-bottom: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .key-stat .label {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.95;
}

/* ---------- Navigation / TOC ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 24px 0 32px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block-title,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1c233d;
  margin-bottom: 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block li,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav li {
  margin-bottom: 8px;
  padding-left: 18px;
  position: relative;
  font-size: 15px;
  break-inside: avoid;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block li::before,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: #5bb2ae;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block a,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav a {
  text-decoration: none;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-block a:hover,
:where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav a:hover {
  text-decoration: underline;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 12px;
  padding: 22px 28px;
  margin: 24px 0 32px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 16px;
  margin-top: 0;
  margin-bottom: 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box ul li {
  margin-bottom: 6px;
  font-size: 14px;
  break-inside: avoid;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box ul li a {
  color: #5bb2ae;
  text-decoration: none;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nav-box ul li a:hover {
  text-decoration: underline;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .guide-nav {
  background: #d9daef;
  border-radius: 10px;
  padding: 22px 26px;
  margin: 32px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .page-nav {
  background: #f7f7fc;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0 32px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .page-nav-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  color: #1c233d;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .toc {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 28px 0;
}

/* ---------- Callouts ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .callout {
  background: #f0f7f7;
  border-left: 4px solid #5bb2ae;
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  margin: 0 0 8px 0;
  color: #1c233d;
  font-size: 16px;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout p {
  margin: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout p + p {
  margin-top: 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-warning {
  background: #fef9ee;
  border-left-color: #e5a43a;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-warning h4 {
  color: #92400e;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-info {
  background: #f3f3fa;
  border-left-color: #383b6c;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-success {
  background: #f0f7f7;
  border-left-color: #5bb2ae;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-danger {
  background: #fde8e8;
  border-left-color: #c43d3d;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-tip {
  background: #f0f1f8;
  border-left-color: #383b6c;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-orange {
  background: #fff7ed;
  border-left-color: #f7b369;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-box {
  background: #fff7ed;
  border-radius: 8px;
  padding: 20px 24px;
  margin: 24px 0;
  border-left: 4px solid #f7b369;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-title,
:where(.brumble-guide, .brumble-article, .brumble-report) .callout-heading {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 17px;
  margin-bottom: 8px;
}

/* Icon and heading sit on one line rather than stacking. */
:where(.brumble-guide, .brumble-article, .brumble-report) .callout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .callout-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ---------- Situation / van callout cards ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .situation-card {
  background: #f7f7fc;
  border-left: 4px solid #5bb2ae;
  border-radius: 8px;
  padding: 24px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .situation-card h4 {
  margin-top: 0;
  font-size: 18px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .van-callout {
  background: #f7f7fc;
  border-left: 4px solid #1c233d;
  border-radius: 6px;
  padding: 22px 24px;
  margin: 24px 0;
}

/* ---------- Brumble tip (navy gradient, alternative to .top-tip) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-tip {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 8px;
  padding: 24px 26px;
  margin: 30px 0;
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-tip p {
  color: #d9daef;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-tip p:last-child {
  margin-bottom: 0;
}

/* ---------- Numbered tip list (counter-based, alternative to .step-list) ----------
   Absolute-positioned counter circle vertically centred against the item box.
   Block layout preserves inline text flow so mid-sentence <a> tags stay in the
   sentence rather than becoming separate flex items. */
:where(.brumble-guide, .brumble-article, .brumble-report) .tip-list {
  counter-reset: tip-counter;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tip-list li {
  counter-increment: tip-counter;
  position: relative;
  padding: 18px 18px 18px 66px;
  background: #f7f7fb;
  border-radius: 10px;
  margin-bottom: 14px;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tip-list li::before {
  content: counter(tip-counter);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  background: #5bb2ae;
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
  flex-shrink: 0;
}

/* ---------- Tip box title variant ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .tip-box-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #5bb2ae;
  font-size: 16px;
  margin: 0 0 8px 0;
}

/* ---------- Body stat grid / card (navy gradient like quick-summary stat-items) ----------
   The same visual treatment as .quick-summary .stat-card: navy gradient,
   teal numbers, light text. */
:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  margin: 25px 0 32px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 10px;
  padding: 22px;
  text-align: center;
  color: #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .stat-number {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #5bb2ae;
  display: block;
  margin-bottom: 6px;
  line-height: 1.2;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .label,
:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .stat-label {
  font-size: 13px;
  color: #d9daef;
  line-height: 1.4;
}

/* ---------- Car insurance group letter badges (semantic status colours) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-a,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-d,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-e,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-g,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-p,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-u {
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .badge-a {
  background: #f0f7f7;
  color: #383b6c;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .badge-d,
:where(.brumble-guide, .brumble-article, .brumble-report) .badge-p {
  background: #fef9ee;
  color: #92400e;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .badge-e {
  background: #f0faf9;
  color: #065f46;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .badge-g {
  background: #f7f7fb;
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .badge-u {
  background: #fee2e2;
  color: #7f1d1d;
}

/* ---------- Step / example / payment / car / group boxes (light bordered content boxes) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .step-box {
  background: #ffffff;
  border: 2px solid #f7b369;
  border-radius: 12px;
  padding: 28px;
  margin: 28px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-box h3 {
  margin-top: 0;
  color: #f7b369;
  font-size: 20px;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .example-box,
:where(.brumble-guide, .brumble-article, .brumble-report) .car-list,
:where(.brumble-guide, .brumble-article, .brumble-report) .group-box,
:where(.brumble-guide, .brumble-article, .brumble-report) .payment-box {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 12px;
  padding: 24px;
  margin: 28px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .example-box h4,
:where(.brumble-guide, .brumble-article, .brumble-report) .car-list h4,
:where(.brumble-guide, .brumble-article, .brumble-report) .group-box h4,
:where(.brumble-guide, .brumble-article, .brumble-report) .payment-box h4 {
  margin: 0 0 14px 0;
  color: #1c233d;
  font-size: 18px;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .example-box ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .car-list ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .group-box ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .payment-box ul {
  margin: 0;
  padding-left: 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .example-box li,
:where(.brumble-guide, .brumble-article, .brumble-report) .car-list li,
:where(.brumble-guide, .brumble-article, .brumble-report) .group-box li,
:where(.brumble-guide, .brumble-article, .brumble-report) .payment-box li {
  margin-bottom: 12px;
}

/* ---------- Key points (orange-bordered highlight box) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .key-points {
  background: #fff7ed;
  border: 2px solid #f7b369;
  border-radius: 12px;
  padding: 28px;
  margin: 28px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .key-points h4 {
  margin: 0 0 14px 0;
  color: #c4861f;
  font-size: 18px;
  font-weight: 700;
  font-family: 'altivo', 'Roboto', sans-serif;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .key-points ul {
  margin: 0;
  padding-left: 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .key-points li {
  margin-bottom: 10px;
}

/* ---------- Avoid list (red-bordered, danger semantics) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .avoid-list {
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .avoid-list h4 {
  margin: 0 0 14px 0;
  color: #991b1b;
  font-size: 18px;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .avoid-list ul {
  margin: 0;
  padding-left: 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .avoid-list li {
  margin-bottom: 12px;
}

/* ---------- Methodology / quote-block / source-box (research-report layout) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .methodology {
  background: #f5f5fb;
  border: 2px solid #d9daef;
  border-radius: 8px;
  padding: 24px;
  margin: 40px 0;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .methodology h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  margin-top: 0;
  color: #1c233d;
  text-transform: capitalize;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .methodology p {
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quote-block {
  border-left: 4px solid #5bb2ae;
  padding-left: 24px;
  margin: 30px 0;
  font-style: italic;
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .quote-block cite {
  display: block;
  font-style: normal;
  font-weight: 900;
  color: #1c233d;
  margin-top: 10px;
  font-family: 'Roboto', sans-serif;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .source-box {
  background: #f5f5fb;
  border: 2px solid #d9daef;
  border-radius: 8px;
  padding: 20px;
  margin: 24px 0;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .source-box h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #5c5e7b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ---------- Hook box (navy gradient intro) + impact card grid ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .hook-box {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 8px;
  padding: 22px 24px;
  margin: 0 0 24px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .hook-box p {
  color: #ffffff;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .impact-card {
  background: #ffffff;
  border: 2px solid #d9daef;
  border-radius: 8px;
  padding: 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .impact-card .impact-icon {
  font-size: 30px;
  margin-bottom: 6px;
  display: block;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .impact-card .impact-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  color: #383b6c;
  font-weight: 700;
  font-size: 16px;
  display: block;
  margin-bottom: 6px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .impact-card p {
  margin: 0;
  font-size: 14px;
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-value {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 26px;
  color: #383b6c;
  font-weight: 700;
  display: block;
}

/* ---------- Warning / info / how-to boxes ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .warning-box {
  background: #fff4e5;
  border-left: 4px solid #f7b369;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .warning-box-heading {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #c4861f;
  font-size: 16px;
  margin-bottom: 6px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .warning-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .info-box {
  background: #f3f3fa;
  border-left: 4px solid #383b6c;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .info-box-heading {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #383b6c;
  font-size: 16px;
  margin-bottom: 6px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .info-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .how-to-box {
  background: #ffffff;
  border: 2px solid #5bb2ae;
  border-radius: 12px;
  padding: 28px;
  margin: 28px 0;
}

/* ---------- Top tip / tip box / tips list ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .top-tip {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 12px;
  padding: 24px 28px;
  margin: 28px 0;
  color: #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .top-tip-heading,
:where(.brumble-guide, .brumble-article, .brumble-report) .top-tip-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #5bb2ae;
  font-size: 16px;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .top-tip p {
  margin-bottom: 0;
  color: #d9daef;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .top-tip a {
  color: #5bb2ae;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tip-box {
  background: #f0faf9;
  border-left: 4px solid #5bb2ae;
  border-radius: 0 8px 8px 0;
  padding: 18px 22px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tip-box-heading,
:where(.brumble-guide, .brumble-article, .brumble-report) .tip-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #5bb2ae;
  font-size: 16px;
  margin: 0 0 8px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tip-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .tips-list {
  background: #f0f7f7;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 24px;
  margin: 24px 0;
}

/* ---------- Tables ----------
   The Lambda template applies `:where(.guide-content) table { display: block; ... }`
   which breaks normal table layout. The rules below override that with `display: table`
   and `table-layout: auto` so columns size naturally based on content. The wrapper
   provides horizontal scroll on narrow viewports via `overflow-x: auto`, and the table's
   `min-width: 500px` ensures it stays readable instead of squashing. */
:where(.brumble-guide, .brumble-article, .brumble-report) .table-scroll,
:where(.brumble-guide, .brumble-article, .brumble-report) .table-wrapper,
:where(.brumble-guide, .brumble-article, .brumble-report) .table-wrap,
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 24px 0;
  border-radius: 8px;
  border: 1px solid #d9daef;
}

/* Override the Lambda template's `display: block` on any <table> inside a guide.
   Also reset word-break/overflow-wrap so cells don't inherit `break-word` from
   `.guide-content`, which would otherwise collapse cell min-content to a single
   character and squash short-content columns. */
.brumble-guide table,
.brumble-article table,
.brumble-report table {
  display: table;
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  word-break: normal;
  overflow-wrap: normal;
}

/* Defeat the Lambda template's `.guide-content * { min-width: 0 !important }` on cells
   and reset word-break/overflow-wrap on the cells themselves as belt-and-braces. */
.brumble-guide th,
.brumble-guide td,
.brumble-article th,
.brumble-article td,
.brumble-report th,
.brumble-report td {
  min-width: auto !important;
  word-break: normal;
  overflow-wrap: normal;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table,
:where(.brumble-guide, .brumble-article, .brumble-report) .data-table,
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-table,
:where(.brumble-guide, .brumble-article, .brumble-report) .facts-table {
  display: table;
  table-layout: auto;
  width: 100%;
  min-width: 500px;
  border-collapse: collapse;
  margin: 0;
  font-size: 15px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table thead th,
:where(.brumble-guide, .brumble-article, .brumble-report) .data-table thead th,
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-table thead th,
:where(.brumble-guide, .brumble-article, .brumble-report) .facts-table thead th {
  background: #383b6c;
  color: #ffffff;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  padding: 14px 16px;
  text-align: left;
  font-size: 15px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table thead th:first-child {
  background: #1c233d;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table tbody td,
:where(.brumble-guide, .brumble-article, .brumble-report) .data-table tbody td,
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-table tbody td,
:where(.brumble-guide, .brumble-article, .brumble-report) .facts-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #d9daef;
  vertical-align: top;
}

/* First-column emphasis on .comparison-table — visual styling only, no width constraints
   so the column sizes naturally based on its content. */
:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table tbody td:first-child {
  background: #f7f7fb;
  font-weight: 700;
  color: #1c233d;
  border-right: 2px solid #d9daef;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 14px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table tbody tr:nth-child(even) td {
  background: #f0f0f8;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table tbody tr:nth-child(even) td:first-child {
  background: #ebebf5;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .comparison-table tbody tr:last-child td,
:where(.brumble-guide, .brumble-article, .brumble-report) .data-table tbody tr:last-child td,
:where(.brumble-guide, .brumble-article, .brumble-report) .brumble-table tbody tr:last-child td,
:where(.brumble-guide, .brumble-article, .brumble-report) .facts-table tbody tr:last-child td {
  border-bottom: none;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .highlight-row {
  background: #f0f7f7 !important;
  font-weight: 600;
}

/* ---------- Finance cards ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .finance-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 22px 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
  color: #ffffff;
  background: #383b6c;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card-badge.badge-hp {
  background: #1c233d;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card-badge.badge-pcp {
  background: #5bb2ae;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card-badge.badge-loan {
  background: #383b6c;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  margin: 0 0 10px 0;
  font-size: 17px;
  color: #1c233d;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card p {
  font-size: 14px;
  color: #5c5e7b;
  margin-bottom: 14px;
  line-height: 1.6;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card .feature {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 6px;
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .finance-card .feature .icon {
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Process steps ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .process-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-item {
  text-align: center;
  padding: 20px 10px;
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-num {
  display: inline-flex;
  width: 36px;
  height: 36px;
  background: #5bb2ae;
  color: #ffffff;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin-bottom: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-text {
  font-size: 13px;
  color: #5c5e7b;
  display: block;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-text strong {
  color: #1c233d;
}

/* ---------- Step list (counter-based) ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .step-list,
:where(.brumble-guide, .brumble-article, .brumble-report) .steps-list {
  counter-reset: step-counter;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-list li,
:where(.brumble-guide, .brumble-article, .brumble-report) .steps-list li {
  counter-increment: step-counter;
  background: #f7f7fb;
  border-radius: 10px;
  padding: 18px 18px 18px 64px;
  margin-bottom: 14px;
  position: relative;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .step-list li::before,
:where(.brumble-guide, .brumble-article, .brumble-report) .steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  background: #5bb2ae;
  color: #ffffff;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 15px;
}

/* ---------- Jargon grid ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .jargon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .jargon-item {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 18px 20px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .jargon-term {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 15px;
  margin-bottom: 4px;
  display: block;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .jargon-def {
  font-size: 14px;
  color: #5c5e7b;
  line-height: 1.6;
}

/* ---------- Factor grid ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .factor-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .factor-item {
  text-align: center;
  padding: 22px 14px;
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .factor-icon {
  font-size: 28px;
  margin-bottom: 8px;
  display: block;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .factor-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 15px;
  margin-bottom: 4px;
  display: block;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .factor-desc {
  font-size: 13px;
  color: #5c5e7b;
  line-height: 1.5;
}

/* ---------- Checklist box ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .checklist-box {
  background: #f0f7f7;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .checklist-box h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  margin: 0 0 14px 0;
  color: #1c233d;
  font-size: 18px;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .checklist-item:last-child {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .check-icon {
  color: #5bb2ae;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ---------- Decision cards ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .decision-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card {
  background: #ffffff;
  border: 2px solid #d9daef;
  border-radius: 12px;
  padding: 24px;
  transition: border-color 0.2s;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card:hover {
  border-color: #5bb2ae;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 18px;
  color: #1c233d;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .card-tag {
  display: inline-block;
  background: #f0f7f7;
  color: #5bb2ae;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card p {
  font-size: 15px;
  margin-bottom: 10px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card p:last-child {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card ul {
  padding-left: 18px;
  margin: 8px 0 0 0;
  font-size: 14px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .decision-card ul li {
  margin-bottom: 4px;
}

/* ---------- CTA box / CTA section / CTA button ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box,
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  border-radius: 12px;
  padding: 28px;
  margin: 32px 0;
  text-align: center;
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box h3,
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section h3 {
  color: #ffffff;
  margin-top: 0;
  font-size: 22px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box p,
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section p {
  color: #d9daef;
  margin-bottom: 18px;
  font-size: 16px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box a:not(.cta-button),
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section a:not(.cta-button) {
  color: #5bb2ae;
  text-decoration: underline;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box a:not(.cta-button):hover,
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section a:not(.cta-button):hover {
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-box a:not(.cta-button):focus,
:where(.brumble-guide, .brumble-article, .brumble-report) .cta-section a:not(.cta-button):focus {
  color: #ffffff;
  outline: 2px solid #5bb2ae;
  outline-offset: 2px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-button {
  display: inline-block;
  background: #5bb2ae;
  color: #ffffff !important;
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 32px;
  border-radius: 8px;
  text-decoration: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.2s;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .cta-button:hover {
  background: #4a9e9a;
  color: #ffffff !important;
}

/* ---------- FAQ ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .faq-section {
  margin: 40px 0 32px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-item {
  border-bottom: 1px solid #d9daef;
  padding: 18px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-item:first-of-type {
  border-top: 1px solid #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-item:last-child {
  border-bottom: none;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-item h3 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 17px;
  margin: 0 0 8px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-item p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-question,
:where(.brumble-guide, .brumble-article, .brumble-report) .faq-q {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 17px;
  margin: 0 0 8px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .faq-answer,
:where(.brumble-guide, .brumble-article, .brumble-report) .faq-a {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Sources ---------- */
:where(.brumble-guide, .brumble-article, .brumble-report) .sources,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid #d9daef;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources h4,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-title {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-size: 14px;
  color: #5c5e7b;
  margin: 0 0 10px 0;
  font-weight: 700;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources p,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section p,
:where(.brumble-guide, .brumble-article, .brumble-report) .source-cite {
  font-size: 13px;
  color: #9a9cb5;
  margin-bottom: 4px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources ul,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources ul li,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section ul li {
  font-size: 13px;
  color: #5c5e7b;
  margin-bottom: 6px;
  padding-left: 16px;
  position: relative;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources ul li::before,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  background: #5bb2ae;
  border-radius: 50%;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .sources ul li a,
:where(.brumble-guide, .brumble-article, .brumble-report) .sources-section ul li a {
  color: #5bb2ae;
  font-size: 13px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
  :where(.brumble-guide, .brumble-article, .brumble-report) .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .process-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .finance-cards {
    grid-template-columns: 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .factor-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .brumble-guide h2,
  .brumble-article h2 {
    font-size: 24px;
  }

  .brumble-guide h3,
  .brumble-article h3 {
    font-size: 18px;
  }

  .brumble-guide,
  .brumble-article {
    font-size: 15px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .lead,
  :where(.brumble-guide, .brumble-article, .brumble-report) .intro-text,
  :where(.brumble-guide, .brumble-article, .brumble-report) .guide-desc {
    font-size: 17px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .stat-grid {
    grid-template-columns: 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .quick-summary {
    padding: 20px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .nav-block ul,
  :where(.brumble-guide, .brumble-article, .brumble-report) .nav-box ul,
  :where(.brumble-guide, .brumble-article, .brumble-report) .in-page-nav ul {
    columns: 1;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .finance-cards {
    grid-template-columns: 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .process-steps {
    grid-template-columns: 1fr 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .jargon-grid {
    grid-template-columns: 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .factor-grid {
    grid-template-columns: 1fr;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .cta-box,
  :where(.brumble-guide, .brumble-article, .brumble-report) .cta-section {
    padding: 24px 20px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .key-stat,
  :where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat {
    padding: 20px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .stat-number,
  :where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .number {
    font-size: 32px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .key-stat .number {
    font-size: 38px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .stat-number {
    font-size: 22px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .step-list li,
  :where(.brumble-guide, .brumble-article, .brumble-report) .steps-list li {
    padding-left: 56px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .decision-card,
  :where(.brumble-guide, .brumble-article, .brumble-report) .how-to-box {
    padding: 18px;
  }

  :where(.brumble-guide, .brumble-article, .brumble-report) .top-tip {
    padding: 20px;
  }
}

/* ============================================================
   Pothole report — topic-coded component classes
   Original colours preserved from pothole-postcode-index-2026 inline CSS
   (semantic traffic-light theming used by Brumble research reports).
   ============================================================ */

/* Advice box — blue tint */
:where(.brumble-guide, .brumble-article, .brumble-report) .advice-box {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 25px;
  margin: 25px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .advice-box h4 {
  margin-top: 0;
  color: #1e40af;
}

/* Methodology box — green tint */
:where(.brumble-guide, .brumble-article, .brumble-report) .methodology-box {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 12px;
  padding: 30px;
  margin: 30px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .methodology-box h3 {
  margin-top: 0;
  color: #166534;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .methodology-box h4 {
  color: #166534;
  margin-top: 20px;
  margin-bottom: 10px;
}

/* Nation section — neutral bordered card with flex heading */
:where(.brumble-guide, .brumble-article, .brumble-report) .nation-section {
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 25px;
  margin: 25px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nation-section h3 {
  margin-top: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .nation-flag {
  font-size: 28px;
}

/* Rank row highlights for top-3 ranked tables */
:where(.brumble-guide, .brumble-article, .brumble-report) .rank-1 {
  background: #fef2f2 !important;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .rank-2 {
  background: #fff7ed !important;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .rank-3 {
  background: #fefce8 !important;
}

/* Rank pill badges */
:where(.brumble-guide, .brumble-article, .brumble-report) .rank-badge {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  line-height: 28px;
  font-weight: 700;
  font-size: 14px;
  color: #ffffff;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .rank-badge.rank-1 {
  background: #dc2626 !important;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .rank-badge.rank-2 {
  background: #ea580c !important;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .rank-badge.rank-3 {
  background: #ca8a04 !important;
}

/* Score breakdown — 3-column grid, collapses to 1 on mobile */
:where(.brumble-guide, .brumble-article, .brumble-report) .score-breakdown {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin: 20px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .score-item {
  background: #ffffff;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .score-item .score-label {
  font-size: 13px;
  color: #166534;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .score-item .score-range {
  font-size: 24px;
  font-weight: 700;
  color: #166534;
  margin: 8px 0;
}

:where(.brumble-guide, .brumble-article, .brumble-report) .score-item .score-desc {
  font-size: 12px;
  color: #64748b;
}

@media (max-width: 600px) {
  :where(.brumble-guide, .brumble-article, .brumble-report) .score-breakdown {
    grid-template-columns: 1fr;
  }
}

/* === Calculator Widget (cost-of-running-a-car-uk, average-miles-driven-per-year-uk) === */
/* Migrated from inline <style> blocks. Scoped under .brumble-guide only so guides */
/* still using the .brumble-article wrapper are unaffected. */

.brumble-guide .cost-calculator {
  background: #ffffff;
  border: 2px solid #5bb2ae;
  border-radius: 12px;
  padding: 30px;
  margin: 40px 0;
}

.brumble-guide .cost-calculator h2 {
  margin-top: 0;
  color: #1c233d;
  font-size: 24px;
}

.brumble-guide .calc-intro {
  color: #5c5e7b;
  font-size: 15px;
  margin-bottom: 25px;
  line-height: 1.6;
}

.brumble-guide .calc-section {
  margin-bottom: 24px;
}

.brumble-guide .calc-section-title {
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #1c233d;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.brumble-guide .calc-section-title .icon {
  font-size: 20px;
}

.brumble-guide .calc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.brumble-guide .calc-row label {
  font-size: 14px;
  color: #5c5e7b;
  min-width: 240px;
  flex-shrink: 0;
}

.brumble-guide .calc-row input, .brumble-guide .calc-row select {
  font-family: 'Roboto', inherit;
  font-size: 15px;
  padding: 10px 14px;
  border: 1px solid #d9daef;
  border-radius: 8px;
  background: #f8f8fc;
  color: #1c233d;
  width: 150px;
  transition: border-color 0.2s;
}

.brumble-guide .calc-row input:focus, .brumble-guide .calc-row select:focus {
  outline: none;
  border-color: #5bb2ae;
  background: #ffffff;
}

.brumble-guide .calc-row .unit {
  font-size: 13px;
  color: #5c5e7b;
}

.brumble-guide .calc-divider {
  border: none;
  border-top: 1px solid #d9daef;
  margin: 24px 0;
}

.brumble-guide .calc-button {
  display: inline-block;
  background: #5bb2ae;
  color: white;
  padding: 14px 32px;
  border: none;
  border-radius: 8px;
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.brumble-guide .calc-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(91, 178, 174, 0.35);
}

.brumble-guide .calc-reset {
  display: inline-block;
  background: none;
  color: #5c5e7b;
  padding: 14px 20px;
  border: 1px solid #d9daef;
  border-radius: 8px;
  font-size: 14px;
  font-family: 'Roboto', inherit;
  cursor: pointer;
  margin-left: 10px;
  transition: border-color 0.2s;
}

.brumble-guide .calc-reset:hover {
  border-color: #5c5e7b;
  color: #1c233d;
}

.brumble-guide .cost-calculator .calc-results {
  display: none;
  margin-top: 24px;
}

.brumble-guide .cost-calculator .calc-results.visible {
  display: block;
}

.brumble-guide .result-card {
  background: linear-gradient(135deg, #1c233d 0%, #383b6c 100%);
  color: white;
  padding: 28px;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 20px;
}

.brumble-guide .result-card .result-number {
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 44px;
  font-weight: 900;
  display: block;
  margin-bottom: 6px;
}

.brumble-guide .result-card .result-label {
  font-size: 16px;
  opacity: 0.95;
}

.brumble-guide .result-card .result-sublabel {
  font-size: 14px;
  opacity: 0.8;
  margin-top: 6px;
  display: block;
}

.brumble-guide .result-breakdown {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.brumble-guide .breakdown-item {
  background: #f8f8fc;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}

.brumble-guide .breakdown-item .bd-number {
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #5bb2ae;
  display: block;
}

.brumble-guide .breakdown-item .bd-label {
  font-size: 13px;
  color: #5c5e7b;
  margin-top: 4px;
}

.brumble-guide .result-comparison {
  background: #f0f9f8;
  border: 1px solid #b2dfdb;
  border-radius: 10px;
  padding: 18px 22px;
  font-size: 15px;
  color: #166534;
  line-height: 1.6;
}

.brumble-guide .result-comparison.above-avg {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}

.brumble-guide .result-comparison.neutral {
  background: #f0f4ff;
  border-color: #d9daef;
  color: #383b6c;
}

.brumble-guide .finance-callout {
  background: #f8f8fc;
  border: 2px solid #5bb2ae;
  border-radius: 10px;
  padding: 22px 26px;
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.brumble-guide .finance-callout .finance-icon {
  font-size: 28px;
  flex-shrink: 0;
  margin-top: 2px;
}

.brumble-guide .finance-callout .finance-text {
  flex: 1;
}

.brumble-guide .finance-callout .finance-text strong {
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: #1c233d;
  font-size: 16px;
  display: block;
  margin-bottom: 6px;
}

.brumble-guide .finance-callout .finance-text p {
  margin: 0 0 10px 0;
  font-size: 14px;
  color: #5c5e7b;
  line-height: 1.6;
}

.brumble-guide .finance-link {
  display: inline-block;
  background: #5bb2ae;
  color: white;
  padding: 10px 22px;
  border-radius: 8px;
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: transform 0.2s;
}

.brumble-guide .finance-link:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: white;
}

.brumble-guide .calc-anchor-wrapper {
  margin-bottom: 20px;
}

.brumble-guide .calc-anchor-link {
  color: #5bb2ae;
  font-family: 'Altivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-weight: 700;
  text-decoration: none;
  font-size: 16px;
}

@media (max-width: 600px) {
  .brumble-guide .calc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .brumble-guide .calc-row label {
    min-width: unset;
  }
  .brumble-guide .calc-row input, .brumble-guide .calc-row select {
    width: 100%;
  }
  .brumble-guide .result-breakdown {
    grid-template-columns: 1fr 1fr;
  }
  .brumble-guide .finance-callout {
    flex-direction: column;
    gap: 10px;
  }
}

/* ---------- Restored components from a48cfa4 ---------- */

.brumble-guide .callout-box.tip .callout-icon,
.brumble-article .callout-box.tip .callout-icon,
.brumble-report .callout-box.tip .callout-icon {
  background: #5bb2ae;
  color: #ffffff;
}

.brumble-guide .callout-box.warning .callout-icon,
.brumble-article .callout-box.warning .callout-icon,
.brumble-report .callout-box.warning .callout-icon {
  background: #e0b05f;
  color: #ffffff;
}

.brumble-guide .callout-box.info .callout-icon,
.brumble-article .callout-box.info .callout-icon,
.brumble-report .callout-box.info .callout-icon {
  background: #383b6c;
  color: #ffffff;
}

.brumble-guide .step-list li .step-content,
.brumble-article .step-list li .step-content,
.brumble-report .step-list li .step-content {
  flex: 1;
}

.brumble-guide .step-list li .step-content strong,
.brumble-article .step-list li .step-content strong,
.brumble-report .step-list li .step-content strong {
  color: #1c233d;
  font-size: 16px;
}

.brumble-guide .step-list li .step-content p,
.brumble-article .step-list li .step-content p,
.brumble-report .step-list li .step-content p {
  margin: 0;
  font-size: 15px;
}

.brumble-guide .comparison-grid,
.brumble-article .comparison-grid,
.brumble-report .comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 24px 0;
}

.brumble-guide .comparison-card,
.brumble-article .comparison-card,
.brumble-report .comparison-card {
  border-radius: 12px;
  padding: 22px;
  border: 1px solid #e8e9f0;
  background: #ffffff;
  transition: box-shadow 0.2s ease;
}

.brumble-guide .comparison-card:hover,
.brumble-article .comparison-card:hover,
.brumble-report .comparison-card:hover {
  box-shadow: 0 4px 20px rgba(28, 35, 61, 0.08);
}

.brumble-guide .comparison-card.highlight,
.brumble-article .comparison-card.highlight,
.brumble-report .comparison-card.highlight {
  border-color: #5bb2ae;
  background: #f0faf9;
}

.brumble-guide .comparison-card .card-label,
.brumble-article .comparison-card .card-label,
.brumble-report .comparison-card .card-label {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5bb2ae;
  margin-bottom: 8px;
}

.brumble-guide .comparison-card h4,
.brumble-article .comparison-card h4,
.brumble-report .comparison-card h4 {
  color: #1c233d;
  margin: 0 0 10px 0;
  font-size: 17px;
}

.brumble-guide .comparison-card p,
.brumble-article .comparison-card p,
.brumble-report .comparison-card p {
  font-size: 14px;
  margin: 0;
  line-height: 1.55;
}

.brumble-guide .checklist,
.brumble-article .checklist,
.brumble-report .checklist {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.brumble-guide .checklist li,
.brumble-article .checklist li,
.brumble-report .checklist li {
  position: relative;
  padding: 10px 0 10px 36px;
  border-bottom: 1px solid #f0f0f5;
  font-size: 15px;
}

.brumble-guide .checklist li:last-child,
.brumble-article .checklist li:last-child,
.brumble-report .checklist li:last-child {
  border-bottom: none;
}

.brumble-guide .checklist li::before,
.brumble-article .checklist li::before,
.brumble-report .checklist li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #5bb2ae;
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
}

.brumble-guide .summary-source,
.brumble-article .summary-source,
.brumble-report .summary-source {
  font-size: 11px;
  color: rgba(217, 218, 239, 0.5);
  margin-top: 14px;
  text-align: right;
  position: relative;
  z-index: 1;
}

.brumble-guide .cta-disclaimer,
.brumble-article .cta-disclaimer,
.brumble-report .cta-disclaimer {
  font-size: 12px;
  color: rgba(217, 218, 239, 0.6);
  margin-top: 14px;
  position: relative;
  z-index: 1;
}

.brumble-guide .badge,
.brumble-article .badge,
.brumble-report .badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brumble-guide .badge.green,
.brumble-article .badge.green,
.brumble-report .badge.green {
  background: #e8f7f6;
  color: #3d9490;
}

.brumble-guide .badge.amber,
.brumble-article .badge.amber,
.brumble-report .badge.amber {
  background: #fdf2e0;
  color: #b8862e;
}

.brumble-guide .badge.red,
.brumble-article .badge.red,
.brumble-report .badge.red {
  background: #fde8e8;
  color: #c04040;
}

@media (max-width: 700px) {
  .brumble-guide .comparison-grid,
  .brumble-article .comparison-grid,
  .brumble-report .comparison-grid {
    grid-template-columns: 1fr;
  }
}

:where(.brumble-guide, .brumble-article, .brumble-report) .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-card .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .hero-stat .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .key-stat .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .number,
:where(.brumble-guide, .brumble-article, .brumble-report) .body-stat-card .stat-number,
:where(.brumble-guide, .brumble-article, .brumble-report) .stat-value,
.brumble-guide .result-card .result-number {
  font-weight: 900;
  letter-spacing: -0.02em;
}

footer h5,
.ft-col-heading {
  letter-spacing: -0.25px;
}