/* 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) 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.
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,900;1,400&display=swap');
@import url('https://use.typekit.net/jfe4hxx.css');

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

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

.brumble-guide h2,
.brumble-article 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 {
  margin-top: 0;
}

.brumble-guide h3,
.brumble-article 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 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  color: #1c233d;
  font-size: 18px;
  margin: 24px 0 10px 0;
}

/* 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 {
  margin-bottom: 18px;
  color: #5c5e7b;
  font-size: 16px;
  line-height: 1.8;
  letter-spacing: normal;
}

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

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

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

.brumble-guide ul,
.brumble-guide ol,
.brumble-article ul,
.brumble-article 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 {
  margin-bottom: 6px;
  color: #5c5e7b;
}

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

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

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

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

/* ---------- Quick summary (navy gradient background) ---------- */
:where(.brumble-guide, .brumble-article) .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) .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) .quick-summary h2,
:where(.brumble-guide, .brumble-article) .quick-summary h3,
:where(.brumble-guide, .brumble-article) .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) .quick-summary p {
  color: #d9daef;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .quick-summary .hero-stat {
  background: transparent;
  padding: 0;
  margin: 0 0 20px 0;
  border-radius: 0;
  text-align: center;
}

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

:where(.brumble-guide, .brumble-article) .quick-summary .hero-stat .stat-label,
:where(.brumble-guide, .brumble-article) .quick-summary .hero-stat .label,
:where(.brumble-guide, .brumble-article) .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) .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) .quick-summary .stat-card .stat-number,
:where(.brumble-guide, .brumble-article) .quick-summary .stat-card .stat-card-number {
  color: #5bb2ae;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .stat-number,
:where(.brumble-guide, .brumble-article) .stat-card-number,
:where(.brumble-guide, .brumble-article) .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) .stat-label,
:where(.brumble-guide, .brumble-article) .stat-card-label,
:where(.brumble-guide, .brumble-article) .hero-stat-label {
  font-size: 13px;
  color: #d9daef;
  line-height: 1.4;
}

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

:where(.brumble-guide, .brumble-article) .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) .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 {
  margin-bottom: 32px;
}

/* Bare .number / .label children of .stat-card (used by migrated brumble-article guides). */
:where(.brumble-guide, .brumble-article) .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) .stat-card .label {
  font-size: 14px;
  color: #5c5e7b;
  margin-top: 8px;
}

/* Hero stat (standalone) */
:where(.brumble-guide, .brumble-article) .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) .hero-stat .stat-number,
:where(.brumble-guide, .brumble-article) .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) .hero-stat .stat-label,
:where(.brumble-guide, .brumble-article) .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) .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) .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) .key-stat .label {
  font-size: 18px;
  color: #ffffff;
  opacity: 0.95;
}

/* ---------- Navigation / TOC ---------- */
:where(.brumble-guide, .brumble-article) .nav-block,
:where(.brumble-guide, .brumble-article) .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) .nav-block-title,
:where(.brumble-guide, .brumble-article) .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) .nav-block ul,
:where(.brumble-guide, .brumble-article) .in-page-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
  column-gap: 20px;
}

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .nav-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
  columns: 2;
}

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .toc {
  background: #f7f7fb;
  border: 1px solid #d9daef;
  border-radius: 10px;
  padding: 24px 28px;
  margin: 28px 0;
}

/* ---------- Callouts ---------- */
:where(.brumble-guide, .brumble-article) .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) .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) .callout p {
  margin: 0;
}

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

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

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

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

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

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

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

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .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-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-tip p {
  color: #d9daef;
  margin-bottom: 12px;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article) .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) .tip-list {
  counter-reset: tip-counter;
  list-style: none;
  padding: 0;
  margin: 24px 0;
}

:where(.brumble-guide, .brumble-article) .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) .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) .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) .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) .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) .body-stat-card .number,
:where(.brumble-guide, .brumble-article) .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) .body-stat-card .label,
:where(.brumble-guide, .brumble-article) .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) .badge-a,
:where(.brumble-guide, .brumble-article) .badge-d,
:where(.brumble-guide, .brumble-article) .badge-e,
:where(.brumble-guide, .brumble-article) .badge-g,
:where(.brumble-guide, .brumble-article) .badge-p,
:where(.brumble-guide, .brumble-article) .badge-u {
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600;
  font-size: 13px;
}

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

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

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

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .example-box h4,
:where(.brumble-guide, .brumble-article) .car-list h4,
:where(.brumble-guide, .brumble-article) .group-box h4,
:where(.brumble-guide, .brumble-article) .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) .example-box ul,
:where(.brumble-guide, .brumble-article) .car-list ul,
:where(.brumble-guide, .brumble-article) .group-box ul,
:where(.brumble-guide, .brumble-article) .payment-box ul {
  margin: 0;
  padding-left: 20px;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .key-points ul {
  margin: 0;
  padding-left: 20px;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .avoid-list ul {
  margin: 0;
  padding-left: 20px;
}

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

/* ---------- Methodology / quote-block / source-box (research-report layout) ---------- */
:where(.brumble-guide, .brumble-article) .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) .methodology h4 {
  font-family: 'altivo', 'Roboto', sans-serif;
  font-weight: 700;
  margin-top: 0;
  color: #1c233d;
  text-transform: capitalize;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .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) .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) .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) .hook-box p {
  color: #ffffff;
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
}

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

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

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

:where(.brumble-guide, .brumble-article) .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) .impact-card p {
  margin: 0;
  font-size: 14px;
  color: #5c5e7b;
}

:where(.brumble-guide, .brumble-article) .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) .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) .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) .warning-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article) .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) .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) .info-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article) .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) .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) .top-tip-heading,
:where(.brumble-guide, .brumble-article) .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) .top-tip p {
  margin-bottom: 0;
  color: #d9daef;
  font-size: 15px;
  line-height: 1.7;
}

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

:where(.brumble-guide, .brumble-article) .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) .tip-box-heading,
:where(.brumble-guide, .brumble-article) .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) .tip-box p {
  margin-bottom: 0;
}

:where(.brumble-guide, .brumble-article) .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) .table-scroll,
:where(.brumble-guide, .brumble-article) .table-wrapper,
:where(.brumble-guide, .brumble-article) .table-wrap,
:where(.brumble-guide, .brumble-article) .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 {
  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 {
  min-width: auto !important;
  word-break: normal;
  overflow-wrap: normal;
}

:where(.brumble-guide, .brumble-article) .comparison-table,
:where(.brumble-guide, .brumble-article) .data-table,
:where(.brumble-guide, .brumble-article) .brumble-table,
:where(.brumble-guide, .brumble-article) .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) .comparison-table thead th,
:where(.brumble-guide, .brumble-article) .data-table thead th,
:where(.brumble-guide, .brumble-article) .brumble-table thead th,
:where(.brumble-guide, .brumble-article) .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) .comparison-table thead th:first-child {
  background: #1c233d;
}

:where(.brumble-guide, .brumble-article) .comparison-table tbody td,
:where(.brumble-guide, .brumble-article) .data-table tbody td,
:where(.brumble-guide, .brumble-article) .brumble-table tbody td,
:where(.brumble-guide, .brumble-article) .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) .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) .comparison-table tbody tr:nth-child(even) td {
  background: #f0f0f8;
}

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .finance-card-badge.badge-hp {
  background: #1c233d;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .finance-card p {
  font-size: 14px;
  color: #5c5e7b;
  margin-bottom: 14px;
  line-height: 1.6;
}

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .step-text {
  font-size: 13px;
  color: #5c5e7b;
  display: block;
}

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

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

:where(.brumble-guide, .brumble-article) .step-list li,
:where(.brumble-guide, .brumble-article) .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) .step-list li::before,
:where(.brumble-guide, .brumble-article) .steps-list li::before {
  content: counter(step-counter);
  position: absolute;
  left: 18px;
  top: 16px;
  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) .jargon-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 24px 0;
}

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

:where(.brumble-guide, .brumble-article) .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) .jargon-def {
  font-size: 14px;
  color: #5c5e7b;
  line-height: 1.6;
}

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

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

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

:where(.brumble-guide, .brumble-article) .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) .factor-desc {
  font-size: 13px;
  color: #5c5e7b;
  line-height: 1.5;
}

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

:where(.brumble-guide, .brumble-article) .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) .checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 15px;
}

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

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

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .decision-card p {
  font-size: 15px;
  margin-bottom: 10px;
}

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

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

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

/* ---------- CTA box / CTA section / CTA button ---------- */
:where(.brumble-guide, .brumble-article) .cta-box,
:where(.brumble-guide, .brumble-article) .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) .cta-box h3,
:where(.brumble-guide, .brumble-article) .cta-section h3 {
  color: #ffffff;
  margin-top: 0;
  font-size: 22px;
}

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

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

:where(.brumble-guide, .brumble-article) .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) .cta-button:hover {
  background: #4a9e9a;
  color: #ffffff !important;
}

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

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

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

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

:where(.brumble-guide, .brumble-article) .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) .faq-item p {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
}

:where(.brumble-guide, .brumble-article) .faq-question,
:where(.brumble-guide, .brumble-article) .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) .faq-answer,
:where(.brumble-guide, .brumble-article) .faq-a {
  margin-bottom: 0;
  font-size: 15px;
  line-height: 1.7;
}

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

:where(.brumble-guide, .brumble-article) .sources h4,
:where(.brumble-guide, .brumble-article) .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) .sources p,
:where(.brumble-guide, .brumble-article) .sources-section p,
:where(.brumble-guide, .brumble-article) .source-cite {
  font-size: 13px;
  color: #9a9cb5;
  margin-bottom: 4px;
}

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

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

:where(.brumble-guide, .brumble-article) .sources ul li::before,
:where(.brumble-guide, .brumble-article) .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) .sources ul li a,
:where(.brumble-guide, .brumble-article) .sources-section ul li a {
  color: #5bb2ae;
  font-size: 13px;
}

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

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

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

  :where(.brumble-guide, .brumble-article) .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) .lead,
  :where(.brumble-guide, .brumble-article) .intro-text,
  :where(.brumble-guide, .brumble-article) .guide-desc {
    font-size: 17px;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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