/* =============================================================================
   GENIUSJACKAL — AI BLOG STYLESHEET  (geniusjackal-ai-blog.css)
   =============================================================================

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

   ACCENT COLOUR: Teal  (#0c6b6b light / #2ecece dark)
   COVERS: Article wrapper, TOC, lead paragraph, comparison table, brand cards,
           category sections, score bars, pros/cons, use-case picker,
           verdict banner, final verdict, FAQ, callouts.

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


/* ─────────────────────────────────────────────────────────────────────────────
   RESET (scoped — won't affect the rest of the page)
───────────────────────────────────────────────────────────────────────────── */
.gj-article *,
.gj-article *::before,
.gj-article *::after {
  box-sizing: border-box;
}


/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE WRAPPER
   Usage: <div class="gj-article"> … </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-article {
  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-article p  { margin: 0 0 1.4em; }
.gj-article ul,
.gj-article ol { padding-left: 1.5em; margin: 0 0 1.4em; }
.gj-article li { margin-bottom: .45em; }

.gj-article 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-article 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-lead"> … </p>
   Purpose: First large intro paragraph with bottom border separator.
───────────────────────────────────────────────────────────────────────────── */
.gj-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-toc">
       <p class="gj-toc__title">📋 In This Article</p>
       <ol> <li><a href="#section-id">Section name</a></li> … </ol>
     </nav>
───────────────────────────────────────────────────────────────────────────── */
.gj-toc {
  background: var(--color-surface-2, #faf8f5);
  border: 1px solid var(--color-border, #e7e2da);
  border-left: 4px solid var(--color-ai, #0c6b6b);
  border-radius: var(--radius-lg, 14px);
  padding: 24px 28px;
  margin: 36px 0;
}

.gj-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-ai, #0c6b6b);
  margin: 0 0 14px;
}

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

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

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

.gj-toc a:hover {
  color: var(--color-ai, #0c6b6b);
}


/* ─────────────────────────────────────────────────────────────────────────────
   CALLOUT BOX
   Usage:
     <div class="gj-callout">              ← default (teal / AI)
     <div class="gj-callout gj-callout--warning">  ← amber warning
     Inside either: <strong>LABEL TEXT</strong> then body text.
───────────────────────────────────────────────────────────────────────────── */
.gj-callout {
  background: var(--color-ai-light, #e0f2f2);
  border-left: 4px solid var(--color-ai, #0c6b6b);
  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-callout strong {
  display: block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-ai, #0c6b6b);
  margin-bottom: 6px;
}

.gj-callout--warning {
  background: #fefce8;
  border-left-color: #ca8a04;
}

.gj-callout--warning strong {
  color: #92400e;
}

[data-theme="dark"] .gj-callout {
  background: var(--color-ai-light, #0a2929);
}

[data-theme="dark"] .gj-callout--warning {
  background: #1f1c0a;
}


/* ─────────────────────────────────────────────────────────────────────────────
   BRAND CARDS  (AI provider / tool overview)
   Usage:
     <div class="gj-brand-cards">
       <div class="gj-brand-card gj-brand-card--chatgpt">
         <div class="gj-brand-card__logo">🟢</div>
         <p class="gj-brand-card__name">ChatGPT</p>
         <p class="gj-brand-card__maker">by OpenAI · GPT-4o</p>
         <span class="gj-brand-card__tag">Most Popular</span>
       </div>
       …  (also --claude, --gemini, or any custom modifier)
     </div>

   Available modifiers for badge colour:
     .gj-brand-card--chatgpt  → green badge
     .gj-brand-card--claude   → teal badge
     .gj-brand-card--gemini   → purple badge
   Add your own:
     .gj-brand-card--mytool .gj-brand-card__tag { background:#xxx; color:#xxx; }
───────────────────────────────────────────────────────────────────────────── */
.gj-brand-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 32px 0;
}

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

.gj-brand-card:hover {
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08));
  transform: translateY(-2px);
}

.gj-brand-card__logo {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 10px;
}

.gj-brand-card__name {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem;
  font-weight: 700;
  color: var(--color-text, #1c1917);
  margin: 0 0 5px;
}

.gj-brand-card__maker {
  font-size: .75rem;
  color: var(--color-muted, #78716c);
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  margin: 0 0 12px;
}

.gj-brand-card__tag {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 99px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Badge colour variants */
.gj-brand-card--chatgpt .gj-brand-card__tag { background: #e8f7ee; color: #1a6b3a; }
.gj-brand-card--claude  .gj-brand-card__tag { background: var(--color-ai-light, #e0f2f2); color: var(--color-ai, #0c6b6b); }
.gj-brand-card--gemini  .gj-brand-card__tag { background: #ede8ff; color: #5b3dc4; }


/* ─────────────────────────────────────────────────────────────────────────────
   COMPARISON TABLE
   Usage:
     <div class="gj-table-wrap">
       <table class="gj-table">
         <thead> <tr> <th>Feature</th> <th>Tool A</th> … </tr> </thead>
         <tbody>
           <tr>
             <td>Feature name</td>
             <td class="gj-win">Best</td>
             <td class="gj-ok">Average</td>
             <td class="gj-win gj-star">Best + star</td>
           </tr>
         </tbody>
       </table>
     </div>

   Cell utility classes:
     .gj-win   → green "winner" text
     .gj-ok    → muted grey text
     .gj-star  → appends a gold ★ after the cell text
───────────────────────────────────────────────────────────────────────────── */
.gj-table-wrap {
  overflow-x: auto;
  margin: 36px 0;
  border-radius: var(--radius-lg, 14px);
  border: 1px solid var(--color-border, #e7e2da);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06));
}

.gj-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem;
  min-width: 560px;
}

.gj-table thead th {
  background: var(--color-surface-3, #f0ede7);
  padding: 14px 18px;
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--color-muted, #78716c);
  border-bottom: 2px solid var(--color-border, #e7e2da);
}

.gj-table thead th:first-child {
  text-align: left;
  border-radius: var(--radius-lg, 14px) 0 0 0;
}

.gj-table thead th:last-child {
  border-radius: 0 var(--radius-lg, 14px) 0 0;
}

.gj-table tbody tr:last-child td:first-child {
  border-radius: 0 0 0 var(--radius-lg, 14px);
}

.gj-table tbody tr:last-child td:last-child {
  border-radius: 0 0 var(--radius-lg, 14px) 0;
}

.gj-table tbody td {
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
  vertical-align: middle;
  color: var(--color-text-2, #44403c);
}

.gj-table tbody tr:last-child td {
  border-bottom: none;
}

.gj-table tbody td:first-child {
  font-weight: 600;
  color: var(--color-text, #1c1917);
  background: var(--color-surface-2, #faf8f5);
}

.gj-table tbody td:not(:first-child) {
  text-align: center;
}

.gj-table tbody tr:nth-child(even) td:not(:first-child) {
  background: var(--color-surface-2, #faf8f5);
}

/* Cell state classes */
.gj-table .gj-win  { color: #16a34a; font-weight: 700; }
.gj-table .gj-ok   { color: var(--color-muted, #78716c); }
.gj-table .gj-star::after { content: ' ★'; color: #ca8a04; }


/* ─────────────────────────────────────────────────────────────────────────────
   CATEGORY SECTION  (per-topic deep-dive card)
   Usage:
     <div class="gj-category-section">
       <span class="gj-category-section__eyebrow gj-category-section__eyebrow--writing">✍️ Writing</span>
       <h3 class="gj-category-section__title">Winner: …</h3>
       … (score bars, pros/cons, etc.)
     </div>

   Eyebrow colour modifiers:
     (none)        → teal  (AI default)
     --writing     → purple
     --coding      → blue
     --data        → burnt orange
     --creative    → pink
     --research    → green
───────────────────────────────────────────────────────────────────────────── */
.gj-category-section {
  margin: 44px 0;
  padding: 32px 34px;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius-lg, 14px);
}

.gj-category-section__eyebrow {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-ai, #0c6b6b);
  background: var(--color-ai-light, #e0f2f2);
  display: inline-block;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 10px;
}

.gj-category-section__eyebrow--writing  { color: #7c3aed; background: #ede8ff; }
.gj-category-section__eyebrow--coding   { color: #0369a1; background: #e0f2fe; }
.gj-category-section__eyebrow--data     { color: #b54c0c; background: #fdebd5; }
.gj-category-section__eyebrow--creative { color: #be185d; background: #fce7f3; }
.gj-category-section__eyebrow--research { color: #166534; background: #dcfce7; }

.gj-category-section__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0 0 14px;
  color: var(--color-text, #1c1917);
}


/* ─────────────────────────────────────────────────────────────────────────────
   WINNER BADGE  (inline pill next to a section title)
   Usage:
     <span class="gj-winner-badge gj-winner-badge--claude">🏆 Claude</span>
   Variants: --chatgpt  --claude  --gemini  --tie
───────────────────────────────────────────────────────────────────────────── */
.gj-winner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8125rem;
  font-weight: 700;
  padding: 5px 14px 5px 10px;
  border-radius: 99px;
  margin-bottom: 12px;
}

.gj-winner-badge--chatgpt { background: #e8f7ee; color: #1a6b3a; }
.gj-winner-badge--claude  { background: var(--color-ai-light, #e0f2f2); color: var(--color-ai, #0c6b6b); }
.gj-winner-badge--gemini  { background: #ede8ff; color: #5b3dc4; }
.gj-winner-badge--tie     { background: var(--color-surface-3, #f0ede7); color: var(--color-text-2, #44403c); }


/* ─────────────────────────────────────────────────────────────────────────────
   SCORE BARS  (horizontal progress bars for category ratings)
   Usage:
     <div class="gj-scores">
       <div class="gj-score-row">
         <div class="gj-score-row__label">🟢 ChatGPT</div>
         <div class="gj-score-row__bar-wrap">
           <div class="gj-score-row__bar gj-score-row__bar--chatgpt" style="width:78%"></div>
         </div>
         <div class="gj-score-row__val">7.8</div>
       </div>
       …
     </div>

   Bar colour variants: --chatgpt (green)  --claude (teal)  --gemini (purple)
   Set width via inline style="width:XX%"
───────────────────────────────────────────────────────────────────────────── */
.gj-scores {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 16px 0;
}

.gj-score-row {
  display: grid;
  grid-template-columns: 110px 1fr 40px;
  align-items: center;
  gap: 12px;
}

.gj-score-row__label {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--color-text-2, #44403c);
  display: flex;
  align-items: center;
  gap: 6px;
}

.gj-score-row__bar-wrap {
  background: var(--color-surface-3, #f0ede7);
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.gj-score-row__bar {
  height: 100%;
  border-radius: 99px;
  transition: width .6s cubic-bezier(.4,0,.2,1);
}

.gj-score-row__bar--chatgpt { background: #22c55e; }
.gj-score-row__bar--claude  { background: var(--color-ai, #0c6b6b); }
.gj-score-row__bar--gemini  { background: #8b5cf6; }

.gj-score-row__val {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem;
  font-weight: 700;
  color: var(--color-muted, #78716c);
  text-align: right;
}


/* ─────────────────────────────────────────────────────────────────────────────
   PROS / CONS  (two-column green/red checklist grid)
   Usage:
     <div class="gj-proscons">
       <div class="gj-pros">
         <h4>Pros</h4>
         <ul> <li>Item</li> … </ul>
       </div>
       <div class="gj-cons">
         <h4>Cons</h4>
         <ul> <li>Item</li> … </ul>
       </div>
     </div>
   Note: both .gj-pros AND .gj-cons get a ✓/✗ prefix automatically via ::before.
   You can use two .gj-pros side-by-side for a "strengths comparison."
───────────────────────────────────────────────────────────────────────────── */
.gj-proscons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
}

.gj-pros,
.gj-cons {
  padding: 18px 20px;
  border-radius: var(--radius, 8px);
}

.gj-pros { background: #f0fdf4; border: 1px solid #bbf7d0; }
.gj-cons { background: #fef2f2; border: 1px solid #fecaca; }

.gj-pros h4,
.gj-cons h4 {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 10px;
}

.gj-pros h4 { color: #166534; }
.gj-cons h4 { color: #b91c1c; }

.gj-pros ul,
.gj-cons ul { margin: 0; padding: 0; list-style: none; }

.gj-pros li,
.gj-cons li {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem;
  color: var(--color-text-2, #44403c);
  padding: 4px 0;
  display: flex;
  gap: 8px;
}

.gj-pros li::before { content: '✓'; color: #16a34a; font-weight: 700; flex-shrink: 0; }
.gj-cons li::before { content: '✗'; color: #dc2626; font-weight: 700; flex-shrink: 0; }

[data-theme="dark"] .gj-pros { background: #0e2218; border-color: #1a4a30; }
[data-theme="dark"] .gj-cons { background: #2d0d0d; border-color: #6b2020; }


/* ─────────────────────────────────────────────────────────────────────────────
   USE-CASE PICKER  (striped table showing "task → best tool" at a glance)
   Usage:
     <div class="gj-picker">
       <div class="gj-picker__header"><h3>Which should you use?</h3></div>
       <div class="gj-picker__rows">
         <div class="gj-picker__row">
           <div class="gj-picker__use">
             <span class="gj-picker__icon">📝</span> Write blog posts
           </div>
           <span class="gj-picker__winner gj-picker__winner--claude">Claude</span>
         </div>
         …
       </div>
     </div>

   Winner badge variants: --chatgpt  --claude  --gemini  --tie
───────────────────────────────────────────────────────────────────────────── */
.gj-picker {
  background: var(--color-surface-2, #faf8f5);
  border: 1px solid var(--color-border, #e7e2da);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  margin: 36px 0;
}

.gj-picker__header {
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
}

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

.gj-picker__rows {
  display: flex;
  flex-direction: column;
}

.gj-picker__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 28px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
  transition: background .12s;
}

.gj-picker__row:last-child { border-bottom: none; }
.gj-picker__row:hover { background: var(--color-surface-3, #f0ede7); }

.gj-picker__use {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .9rem;
  color: var(--color-text-2, #44403c);
  display: flex;
  align-items: center;
  gap: 10px;
}

.gj-picker__icon { font-size: 1.1rem; }

.gj-picker__winner {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .8rem;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 99px;
  white-space: nowrap;
}

.gj-picker__winner--chatgpt { background: #e8f7ee; color: #1a6b3a; }
.gj-picker__winner--claude  { background: var(--color-ai-light, #e0f2f2); color: var(--color-ai, #0c6b6b); }
.gj-picker__winner--gemini  { background: #ede8ff; color: #5b3dc4; }
.gj-picker__winner--tie     { background: var(--color-surface-3, #f0ede7); color: var(--color-text-2, #44403c); }


/* ─────────────────────────────────────────────────────────────────────────────
   VERDICT BANNER  (colorful summary strip at the end)
   Usage:
     <div class="gj-verdict-banner">
       <p class="gj-verdict-banner__label">Our 2026 verdict</p>
       <p class="gj-verdict-banner__title">You don't need to pick just one.</p>
       <div class="gj-verdict-banner__pills">
         <div class="gj-verdict-pill">Claude <span>Best for writing</span></div>
         …
       </div>
     </div>
───────────────────────────────────────────────────────────────────────────── */
.gj-verdict-banner {
  background: linear-gradient(135deg, var(--color-ai, #0c6b6b) 0%, #0a5555 100%);
  color: #fff;
  border-radius: var(--radius-lg, 14px);
  padding: 32px 36px;
  margin: 40px 0;
  position: relative;
  overflow: hidden;
}

.gj-verdict-banner::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 120% 100% at 90% -10%, rgba(255,255,255,.10) 0%, transparent 60%);
  pointer-events: none;
}

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

.gj-verdict-banner__title {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
  margin: 0 0 18px;
  line-height: 1.25;
}

.gj-verdict-banner__pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gj-verdict-pill {
  background: rgba(255,255,255,.15);
  border: 1.5px solid rgba(255,255,255,.35);
  border-radius: 99px;
  padding: 7px 18px;
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .875rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
}

.gj-verdict-pill span {
  display: block;
  font-size: .6875rem;
  font-weight: 400;
  opacity: .8;
  margin-top: 1px;
}


/* ─────────────────────────────────────────────────────────────────────────────
   FINAL VERDICT CARD  (structured teal-bordered summary)
   Usage:
     <div class="gj-final-verdict">
       <div class="gj-final-verdict__header"><h3>🏁 Our Verdict</h3></div>
       <div class="gj-final-verdict__body">
         <div class="gj-fv-row">
           <span class="gj-fv-row__badge gj-fv-row__badge--claude">Claude</span>
           <p class="gj-fv-row__text"><strong>Best overall.</strong> …</p>
         </div>
         …
       </div>
     </div>

   Badge variants: --chatgpt  --claude  --gemini
───────────────────────────────────────────────────────────────────────────── */
.gj-final-verdict {
  border: 2px solid var(--color-ai, #0c6b6b);
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  margin: 44px 0 32px;
}

.gj-final-verdict__header {
  background: var(--color-ai, #0c6b6b);
  padding: 18px 28px;
}

.gj-final-verdict__header h3 {
  font-family: var(--font-display, 'Fraunces', Georgia, serif);
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  letter-spacing: -.01em;
}

.gj-final-verdict__body {
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.gj-fv-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #e7e2da);
}

.gj-fv-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gj-fv-row__badge {
  font-family: var(--font-ui, 'DM Sans', sans-serif);
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 13px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 2px;
}

.gj-fv-row__badge--chatgpt { background: #e8f7ee; color: #1a6b3a; }
.gj-fv-row__badge--claude  { background: var(--color-ai-light, #e0f2f2); color: var(--color-ai, #0c6b6b); }
.gj-fv-row__badge--gemini  { background: #ede8ff; color: #5b3dc4; }

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

.gj-fv-row__text strong {
  color: var(--color-text, #1c1917);
  font-weight: 600;
}


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

.gj-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-faq-item:hover {
  border-color: var(--color-ai, #0c6b6b);
}

.gj-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-faq-item__q::before {
  content: 'Q';
  font-size: .7rem;
  font-weight: 800;
  background: var(--color-ai, #0c6b6b);
  color: #fff;
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 2px;
}

.gj-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-brand-cards  { grid-template-columns: 1fr; }
  .gj-proscons     { grid-template-columns: 1fr; }
  .gj-score-row    { grid-template-columns: 90px 1fr 34px; }
  .gj-picker__row  { grid-template-columns: 1fr; gap: 6px; }
  .gj-category-section { padding: 22px 20px; }
  .gj-verdict-banner   { padding: 24px 22px; }
  .gj-final-verdict__body { padding: 18px 20px; }
  .gj-fv-row       { flex-direction: column; gap: 6px; }
  .gj-table        { font-size: .8125rem; }
  .gj-table thead th,
  .gj-table tbody td { padding: 10px 12px; }
}