/* =============================================================================
   GENIUSJACKAL — FINANCE BLOG STYLESHEET  (geniusjackal-finance-blog.css)
   =============================================================================

   HOW TO USE
   ──────────
   1. Upload to WordPress Media Library or theme folder.
   2. Enqueue in functions.php:
        wp_enqueue_style('gj-finance-blog', get_template_directory_uri() . '/assets/css/geniusjackal-finance-blog.css', [], '1.0.0');
   3. Or paste into Appearance → Customize → Additional CSS.
   4. In each finance blog post Code Editor, wrap your content in:
        <div class="gj-budget"> … </div>

   ACCENT COLOUR: Burnt Orange  (#b54c0c light / #f5804a dark)
   COVERS: Article wrapper, lead, TOC, hero banner with SVG donut,
           three-bucket cards, breakdown table, step-by-step guide,
           category classifier blocks, mistakes grid, tips list,
           variations grid, tools list, callouts, FAQ.

   DARK MODE:  Auto-adapts via [data-theme="dark"] set by theme.js.
   FONTS:      Inherits Fraunces (display) + DM Sans (UI) from main.css.
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────────────────────
   RESET (scoped)
───────────────────────────────────────────────────────────────────────────── */
.gj-budget *,
.gj-budget *::before,
.gj-budget *::after {
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE WRAPPER
   Usage: <div class="gj-budget"> … </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-budget {
  font-family: var(--font-body, 'DM Sans', system-ui, sans-serif);
  font-size: 1.0625rem;
  line-height: 1.82;
  color: var(--color-text, #1c1917);
  max-width: 760px;
  margin: 0 auto;
}

.gj-budget p  { margin: 0 0 1.4em; }
.gj-budget ul,
.gj-budget ol { padding-left: 1.5em; margin: 0 0 1.4em; }
.gj-budget li { margin-bottom: .45em; }

.gj-budget h2 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.65rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--color-text, #1c1917);
  margin: 2.6em 0 .7em;
}

.gj-budget h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--color-text, #1c1917);
  margin: 1.9em 0 .5em;
}


/* ─────────────────────────────────────────────────────────────────────────────
   LEAD PARAGRAPH
   Usage: <p class="gj-b-lead"> … </p>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-lead {
  font-size: 1.1875rem;
  line-height: 1.72;
  color: var(--color-text-2, #44403c);
  margin-bottom: 2em;
  padding-bottom: 1.6em;
  border-bottom: 1px solid var(--color-border, #e7e2da);
}


/* ─────────────────────────────────────────────────────────────────────────────
   TABLE OF CONTENTS
   Usage:
     <nav class="gj-b-toc">
       <p class="gj-b-toc__title">📋 What's in this guide</p>
       <ol> <li><a href="#id">Section</a></li> … </ol>
     </nav>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-toc {
  background: var(--color-surface-2, #faf8f5);
  border: 1px solid var(--color-border, #e7e2da);
  border-left: 4px solid var(--color-finance, #b54c0c);
  border-radius: var(--radius-lg, 14px);
  padding: 24px 28px;
  margin: 36px 0;
}

.gj-b-toc__title {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--color-finance, #b54c0c);
  margin: 0 0 14px;
}

.gj-b-toc ol {
  margin: 0;
  padding: 0 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.gj-b-toc li {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9375rem;
  color: var(--color-text-2, #44403c);
}

.gj-b-toc a {
  color: var(--color-text-2, #44403c);
  text-decoration: none;
  transition: color .12s;
}

.gj-b-toc a:hover { color: var(--color-finance, #b54c0c); }


/* ─────────────────────────────────────────────────────────────────────────────
   HERO BANNER  (full-width coloured banner, great for "the rule" intros)
   Usage:
     <div class="gj-b-hero">
       <div class="gj-b-hero__donut"> … SVG donut chart … </div>
       <div class="gj-b-hero__text">
         <p class="gj-b-hero__eyebrow">The Rule</p>
         <h2 class="gj-b-hero__title">50% · 30% · 20%</h2>
         <div class="gj-b-hero__pills">
           <span class="gj-b-hero__pill">Simple</span> …
         </div>
       </div>
     </div>
   Tip: the donut chart is a plain SVG — see the blog file for the markup.
───────────────────────────────────────────────────────────────────────────── */
.gj-b-hero {
  background: linear-gradient(145deg, #7c2d12 0%, var(--color-finance, #b54c0c) 60%, #ea7a3c 100%);
  border-radius: var(--radius-lg, 14px);
  padding: 40px 36px;
  margin: 36px 0;
  display: flex;
  align-items: center;
  gap: 40px;
  position: relative;
  overflow: hidden;
}

.gj-b-hero::after {
  content: '';
  position: absolute; top: -40px; right: -40px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,.06);
  pointer-events: none;
}

/* Donut chart container */
.gj-b-hero__donut {
  flex-shrink: 0;
  width: 140px; height: 140px;
  position: relative;
}

.gj-b-hero__donut svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.gj-b-hero__donut-label {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: #fff;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: .75rem; font-weight: 700;
  line-height: 1.2; text-align: center;
}

.gj-b-hero__donut-label span {
  font-size: 1.5rem; font-weight: 700; letter-spacing: -.04em;
}

/* Text side */
.gj-b-hero__text { color: #fff; }

.gj-b-hero__eyebrow {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .13em;
  opacity: .75; margin: 0 0 6px;
}

.gj-b-hero__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.75rem; font-weight: 700;
  letter-spacing: -.025em; line-height: 1.2;
  margin: 0 0 14px; color: #fff;
}

.gj-b-hero__pills { display: flex; gap: 10px; flex-wrap: wrap; }

.gj-b-hero__pill {
  background: rgba(255,255,255,.18);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 99px; padding: 6px 16px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem; font-weight: 700; color: #fff;
}


/* ─────────────────────────────────────────────────────────────────────────────
   BUCKET CARDS  (3-up grid showing e.g. 50% Needs / 30% Wants / 20% Savings)
   Usage:
     <div class="gj-b-buckets">
       <div class="gj-b-bucket gj-b-bucket--needs">
         <div class="gj-b-bucket__pct">50%</div>
         <div class="gj-b-bucket__label">Bucket 1</div>
         <div class="gj-b-bucket__name">Needs</div>
         <ul class="gj-b-bucket__items"> <li>Rent</li> … </ul>
       </div>
       <div class="gj-b-bucket gj-b-bucket--wants"> … </div>
       <div class="gj-b-bucket gj-b-bucket--saves"> … </div>
     </div>

   Modifiers:
     .gj-b-bucket--needs  → orange
     .gj-b-bucket--wants  → amber/yellow
     .gj-b-bucket--saves  → green
───────────────────────────────────────────────────────────────────────────── */
.gj-b-buckets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 36px 0;
}

.gj-b-bucket {
  border-radius: var(--radius-lg, 14px);
  padding: 24px 20px;
  text-align: center;
  border: 1px solid transparent;
  transition: transform .22s, box-shadow .22s;
}

.gj-b-bucket:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08));
}

/* Light colours */
.gj-b-bucket--needs { background: #fef3eb; border-color: #f5c49a; }
.gj-b-bucket--wants { background: #fef9e7; border-color: #f5e29a; }
.gj-b-bucket--saves { background: #edfaf3; border-color: #9addb4; }

/* Dark mode overrides */
[data-theme="dark"] .gj-b-bucket--needs { background: #2a1408; border-color: #7c3010; }
[data-theme="dark"] .gj-b-bucket--wants { background: #272212; border-color: #786020; }
[data-theme="dark"] .gj-b-bucket--saves { background: #0e2218; border-color: #1a6b3a; }

.gj-b-bucket__pct {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 3rem; font-weight: 700;
  letter-spacing: -.05em; line-height: 1;
  margin-bottom: 4px;
}

.gj-b-bucket--needs .gj-b-bucket__pct { color: #c05621; }
.gj-b-bucket--wants .gj-b-bucket__pct { color: #b7791f; }
.gj-b-bucket--saves .gj-b-bucket__pct { color: #276749; }

.gj-b-bucket__label {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 6px;
}

.gj-b-bucket--needs .gj-b-bucket__label { color: #c05621; }
.gj-b-bucket--wants .gj-b-bucket__label { color: #b7791f; }
.gj-b-bucket--saves .gj-b-bucket__label { color: #276749; }

.gj-b-bucket__name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.0625rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  margin-bottom: 10px;
}

.gj-b-bucket__items {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem; color: var(--color-muted, #78716c);
  line-height: 1.7; list-style: none; padding: 0; margin: 0;
}

.gj-b-bucket__items li::before { content: '· '; }


/* ─────────────────────────────────────────────────────────────────────────────
   CALLOUT BOX
   Usage:
     <div class="gj-b-callout gj-b-callout--finance">
       <strong>💡 Tip label</strong>
       Body text here.
     </div>

   Variants:
     .gj-b-callout--finance  → orange (default for finance posts)
     .gj-b-callout--tip      → green
     .gj-b-callout--warning  → amber
───────────────────────────────────────────────────────────────────────────── */
.gj-b-callout {
  border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
  padding: 18px 22px;
  margin: 28px 0;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9375rem;
  color: var(--color-text-2, #44403c);
  line-height: 1.65;
}

.gj-b-callout--finance {
  background: var(--color-finance-light, #fdebd5);
  border-left: 4px solid var(--color-finance, #b54c0c);
}

.gj-b-callout--tip {
  background: #edfaf3;
  border-left: 4px solid #276749;
}

.gj-b-callout--warning {
  background: #fefce8;
  border-left: 4px solid #ca8a04;
}

[data-theme="dark"] .gj-b-callout--finance { background: #2a1408; }
[data-theme="dark"] .gj-b-callout--tip     { background: #0e2218; }
[data-theme="dark"] .gj-b-callout--warning  { background: #1f1c0a; }

.gj-b-callout strong {
  display: block;
  font-size: .6875rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 6px;
}

.gj-b-callout--finance strong { color: var(--color-finance, #b54c0c); }
.gj-b-callout--tip strong     { color: #276749; }
.gj-b-callout--warning strong { color: #92400e; }


/* ─────────────────────────────────────────────────────────────────────────────
   EXAMPLE BREAKDOWN TABLE  (monthly budget rows with colour-coded categories)
   Usage:
     <div class="gj-b-example">
       <div class="gj-b-example__header"><h3>📊 Monthly Breakdown</h3></div>
       <div class="gj-b-example__income">Take-home: <strong>₹50,000</strong></div>
       <div class="gj-b-rows">
         <div class="gj-b-row gj-b-row--header">
           <div class="gj-b-row__label">Category</div>
           <div class="gj-b-row__pct">Split</div>
           <div class="gj-b-row__amount">Amount</div>
         </div>
         <div class="gj-b-row gj-b-row--needs">
           <div class="gj-b-row__label">🏠 Rent</div>
           <div class="gj-b-row__pct">Needs</div>
           <div class="gj-b-row__amount">₹12,000</div>
         </div>
         …
       </div>
     </div>

   Row modifiers: .gj-b-row--needs  .gj-b-row--wants  .gj-b-row--saves  .gj-b-row--header
───────────────────────────────────────────────────────────────────────────── */
.gj-b-example {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  margin: 36px 0;
}

.gj-b-example__header {
  background: var(--color-finance, #b54c0c);
  padding: 16px 24px;
}

.gj-b-example__header h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1rem; font-weight: 700; color: #fff; margin: 0;
}

.gj-b-example__income {
  padding: 16px 24px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem; color: var(--color-text-2, #44403c);
  border-bottom: 1px solid var(--color-border, #e7e2da);
}

.gj-b-example__income strong {
  color: var(--color-text, #1c1917); font-size: 1.1rem;
}

.gj-b-rows { display: flex; flex-direction: column; }

.gj-b-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 13px 24px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem;
}

.gj-b-row:last-child { border-bottom: none; }

.gj-b-row--header {
  background: var(--color-surface-2, #faf8f5);
}

.gj-b-row--header .gj-b-row__label {
  font-size: .6875rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted, #78716c);
}

.gj-b-row__label {
  color: var(--color-text-2, #44403c);
  display: flex; align-items: center; gap: 8px;
}

.gj-b-row__pct {
  font-size: .75rem; font-weight: 700;
  padding: 2px 9px; border-radius: 99px;
  white-space: nowrap;
}

.gj-b-row--needs .gj-b-row__pct { background: #fef3eb; color: #c05621; }
.gj-b-row--wants .gj-b-row__pct { background: #fef9e7; color: #b7791f; }
.gj-b-row--saves .gj-b-row__pct { background: #edfaf3; color: #276749; }

[data-theme="dark"] .gj-b-row--needs .gj-b-row__pct { background: #2a1408; color: #f09c60; }
[data-theme="dark"] .gj-b-row--wants .gj-b-row__pct { background: #272212; color: #e8c96a; }
[data-theme="dark"] .gj-b-row--saves .gj-b-row__pct { background: #0e2218; color: #5ecb8a; }

.gj-b-row__amount {
  font-weight: 700; color: var(--color-text, #1c1917);
  font-size: .9375rem; text-align: right; white-space: nowrap;
}


/* ─────────────────────────────────────────────────────────────────────────────
   STEP-BY-STEP GUIDE  (numbered circles + content)
   Usage:
     <div class="gj-b-steps">
       <div class="gj-b-step">
         <div class="gj-b-step__num">1</div>
         <div class="gj-b-step__body">
           <h3>Step title</h3>
           <p>Step description.</p>
         </div>
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-steps {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 32px 0;
}

.gj-b-step {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: flex-start;
}

.gj-b-step__num {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--color-finance, #b54c0c);
  color: #fff;
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.1rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 2px;
}

.gj-b-step__body h3 {
  margin: 0 0 8px;
  font-size: 1.0625rem;
}

.gj-b-step__body p {
  margin: 0;
  font-size: .9375rem;
  color: var(--color-text-2, #44403c);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  line-height: 1.65;
}


/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY CLASSIFIER BLOCK  (Needs vs Wants visual list)
   Usage:
     <div class="gj-b-catblock">
       <div class="gj-b-catblock__head gj-b-catblock__head--needs">
         <div class="gj-b-catblock__pct">NEEDS</div>
         <div class="gj-b-catblock__meta">
           <div class="gj-b-catblock__name">Essential — 50%</div>
           <div class="gj-b-catblock__sub">Things you can't cut</div>
         </div>
       </div>
       <div class="gj-b-catblock__items">
         <div class="gj-b-catblock__item">
           <div class="gj-b-catblock__item-name">
             <span class="gj-b-catblock__item-icon">🏠</span> Rent
           </div>
           <span class="gj-b-catblock__item-yes yes-needs">Need ✓</span>
         </div>
         …
       </div>
     </div>

   Head modifiers: .gj-b-catblock__head--needs / --wants / --saves
   Badge classes: yes-needs / yes-wants / yes-saves
───────────────────────────────────────────────────────────────────────────── */
.gj-b-catblock {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  margin: 28px 0;
}

.gj-b-catblock__head {
  padding: 16px 22px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.gj-b-catblock__head--needs { background: #fef3eb; border-bottom: 1px solid #f5c49a; }
.gj-b-catblock__head--wants { background: #fef9e7; border-bottom: 1px solid #f5e29a; }
.gj-b-catblock__head--saves { background: #edfaf3; border-bottom: 1px solid #9addb4; }

[data-theme="dark"] .gj-b-catblock__head--needs { background: #2a1408; border-bottom-color: #5a2208; }
[data-theme="dark"] .gj-b-catblock__head--wants { background: #272212; border-bottom-color: #584c18; }
[data-theme="dark"] .gj-b-catblock__head--saves { background: #0e2218; border-bottom-color: #1a4a30; }

.gj-b-catblock__pct {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.5rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}

.gj-b-catblock__head--needs .gj-b-catblock__pct { color: #c05621; }
.gj-b-catblock__head--wants .gj-b-catblock__pct { color: #b7791f; }
.gj-b-catblock__head--saves .gj-b-catblock__pct { color: #276749; }

.gj-b-catblock__meta { flex: 1; }

.gj-b-catblock__name {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.0625rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  margin: 0 0 2px;
}

.gj-b-catblock__sub {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem; color: var(--color-muted, #78716c);
}

.gj-b-catblock__items { padding: 0; }

.gj-b-catblock__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 22px;
  gap: 12px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem;
  transition: background .1s;
}

.gj-b-catblock__item:last-child { border-bottom: none; }
.gj-b-catblock__item:hover { background: var(--color-surface-2, #faf8f5); }

.gj-b-catblock__item-name {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-2, #44403c);
}

.gj-b-catblock__item-icon {
  font-size: 1rem; width: 20px; text-align: center;
}

/* Category badge pills */
.gj-b-catblock__item-yes,
.yes-needs,
.yes-wants,
.yes-saves {
  font-size: .75rem; font-weight: 700;
  padding: 3px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.yes-needs { background: #fef3eb; color: #c05621; }
.yes-wants { background: #fef9e7; color: #b7791f; }
.yes-saves { background: #edfaf3; color: #276749; }

[data-theme="dark"] .yes-needs { background: #2a1408; color: #f09c60; }
[data-theme="dark"] .yes-wants { background: #272212; color: #e8c96a; }
[data-theme="dark"] .yes-saves { background: #0e2218; color: #5ecb8a; }


/* ─────────────────────────────────────────────────────────────────────────────
   MISTAKES GRID  (2-column red-topped warning cards)
   Usage:
     <div class="gj-b-mistakes">
       <div class="gj-b-mistake">
         <div class="gj-b-mistake__icon">❌</div>
         <div class="gj-b-mistake__title">Mistake headline</div>
         <p class="gj-b-mistake__text">Explanation.</p>
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-mistakes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 28px 0;
}

.gj-b-mistake {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-top: 3px solid #dc2626;
  border-radius: var(--radius, 8px);
  padding: 18px 20px;
  transition: box-shadow .2s;
}

.gj-b-mistake:hover {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}

.gj-b-mistake__icon {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.gj-b-mistake__title {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  margin-bottom: 6px;
}

.gj-b-mistake__text {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8375rem; color: var(--color-muted, #78716c);
  line-height: 1.6; margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TIPS LIST  (icon + title + description rows)
   Usage:
     <div class="gj-b-tips">
       <div class="gj-b-tip">
         <div class="gj-b-tip__icon">🤖</div>
         <div class="gj-b-tip__body">
           <div class="gj-b-tip__title">Automate everything</div>
           <p class="gj-b-tip__text">Explanation.</p>
         </div>
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-tips {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 28px 0;
}

.gj-b-tip {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius, 8px);
  padding: 16px 18px;
  transition: border-color .15s;
}

.gj-b-tip:hover {
  border-color: var(--color-finance, #b54c0c);
}

.gj-b-tip__icon {
  width: 38px; height: 38px;
  flex-shrink: 0;
  background: var(--color-finance-light, #fdebd5);
  border-radius: var(--radius, 8px);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}

[data-theme="dark"] .gj-b-tip__icon { background: #2a1408; }

.gj-b-tip__body { flex: 1; }

.gj-b-tip__title {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9375rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  margin: 0 0 4px;
}

.gj-b-tip__text {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem; color: var(--color-muted, #78716c);
  line-height: 1.6; margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   VARIATIONS GRID  (3-up cards for rule variations e.g. 60/20/20, 50/20/30)
   Usage:
     <div class="gj-b-variations">
       <div class="gj-b-variation">
         <div class="gj-b-variation__formula">60/20/20</div>
         <div class="gj-b-variation__name">High-cost city</div>
         <p class="gj-b-variation__desc">Explanation.</p>
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-variations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 28px 0;
}

.gj-b-variation {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius-lg, 14px);
  padding: 20px 18px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
}

.gj-b-variation:hover {
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
  transform: translateY(-2px);
}

.gj-b-variation__formula {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.25rem; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--color-finance, #b54c0c);
  margin-bottom: 6px;
}

.gj-b-variation__name {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-muted, #78716c);
  margin-bottom: 10px;
}

.gj-b-variation__desc {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8125rem; color: var(--color-text-2, #44403c);
  line-height: 1.6; margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   TOOLS LIST  (recommended apps / resources with free/paid tags)
   Usage:
     <div class="gj-b-tools">
       <div class="gj-b-tool">
         <div class="gj-b-tool__icon">📊</div>
         <div class="gj-b-tool__name">Tool name</div>
         <div class="gj-b-tool__desc">Short description.</div>
         <span class="gj-b-tool__tag">Free</span>
         <!--  or  <span class="gj-b-tool__tag gj-b-tool__tag--paid">$X/mo</span>  -->
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-tools {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 24px 0;
}

.gj-b-tool {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius, 8px);
  padding: 13px 18px;
  transition: border-color .15s;
}

.gj-b-tool:hover {
  border-color: var(--color-border-2, #d4cfc6);
}

.gj-b-tool__icon {
  font-size: 1.25rem; width: 32px;
  text-align: center; flex-shrink: 0;
}

.gj-b-tool__name {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  min-width: 120px;
}

.gj-b-tool__desc {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .85rem; color: var(--color-muted, #78716c);
  flex: 1; line-height: 1.55;
}

.gj-b-tool__tag {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .6875rem; font-weight: 700;
  padding: 3px 10px; border-radius: 99px;
  background: #edfaf3; color: #276749;
  white-space: nowrap;
}

.gj-b-tool__tag--paid {
  background: var(--color-finance-light, #fdebd5);
  color: var(--color-finance, #b54c0c);
}

[data-theme="dark"] .gj-b-tool__tag       { background: #0e2218; color: #5ecb8a; }
[data-theme="dark"] .gj-b-tool__tag--paid  { background: #2a1408; color: #f09c60; }


/* ─────────────────────────────────────────────────────────────────────────────
   FAQ SECTION
   Usage:
     <div class="gj-b-faq">
       <div class="gj-b-faq-item">
         <p class="gj-b-faq-item__q">Question?</p>
         <p class="gj-b-faq-item__a">Answer.</p>
       </div>
       …
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-b-faq {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 36px 0;
}

.gj-b-faq-item {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius, 8px);
  padding: 18px 22px;
  transition: border-color .15s;
}

.gj-b-faq-item:hover {
  border-color: var(--color-finance, #b54c0c);
}

.gj-b-faq-item__q {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9375rem; font-weight: 700;
  color: var(--color-text, #1c1917);
  margin: 0 0 8px;
  display: flex; gap: 10px;
}

.gj-b-faq-item__q::before {
  content: 'Q';
  font-size: .7rem; font-weight: 800;
  background: var(--color-finance, #b54c0c);
  color: #fff; border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0; align-self: flex-start; margin-top: 2px;
}

.gj-b-faq-item__a {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem; color: var(--color-text-2, #44403c);
  line-height: 1.65; margin: 0;
}


/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .gj-b-buckets    { grid-template-columns: 1fr; }
  .gj-b-mistakes   { grid-template-columns: 1fr; }
  .gj-b-variations { grid-template-columns: 1fr; }
  .gj-b-hero       { flex-direction: column; text-align: center; gap: 24px; }
  .gj-b-hero__pills { justify-content: center; }
  .gj-b-tool       { flex-wrap: wrap; }
  .gj-b-row        { grid-template-columns: 1fr auto; }
  .gj-b-row__pct   { display: none; }
  .gj-b-step       { grid-template-columns: 36px 1fr; gap: 12px; }
  .gj-b-step__num  { width: 36px; height: 36px; font-size: .95rem; }
}