/* =============================================================================
   REVIEW COMPONENTS CSS — thatmy.com
   Master stylesheet for all review page components.
   Imports table-themes-v2.css and verdict-cards.css, then defines
   all review-specific UI components.

   SECTIONS:
   A. Imports (table themes + verdict cards)
   B. Enhanced Simple-Table Base
   C. Plain Table Fallback
   D. Simple-Table + Tabs Fix
   E. Verdict Summary Box (score bars)
   F. Benchmark Result Cards
   G. Test Environment
   H. Resource Limits Grid
   I. Review Score Box
   J. Quick Verdict Grid
   K. Who It's Not For Box
   L. Comparison Box
   M. HowTo Steps
   N. Review Themes Grid
   O. Benchmark Results Grid (tabular)
   P. Final Verdict Box
   Q. Coupon Box
   R. Table of Contents
   ============================================================================= */


/* =============================================================================
   A. IMPORTS
   ============================================================================= */
@import url('/assets/css/table-themes-v2.css');
@import url('/assets/css/verdict-cards.css');


/* =============================================================================
   B. ENHANCED SIMPLE-TABLE BASE
   Overrides the basic inline simple-table in base.njk with a polished version.
   Themed tables (verdict-table, pricing-table, etc.) override these via
   CSS custom properties — so this just makes the default look great.
   ============================================================================= */
.simple-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: var(--tbl-margin, 2em 0);
  border-radius: var(--tbl-radius, 10px);
  overflow: hidden;
  border: var(--tbl-border, 1px solid #e2e8f0);
  background: var(--tbl-bg, #fff);
  box-shadow: var(--tbl-shadow, 0 2px 12px rgba(0,0,0,.06));
  font-size: 14px;
  font-family: var(--font-display, inherit);
}

.simple-table caption {
  text-align: left;
  font-size: 13px;
  font-weight: 700;
  padding: 0 0 10px;
  color: var(--tbl-caption-color, #374151);
  letter-spacing: 0.4px;
  caption-side: top;
}

.simple-table thead tr th {
  padding: var(--tbl-th-pad, 14px 20px);
  background: var(--tbl-thead-bg, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%));
  color: var(--tbl-thead-color, #1e293b);
  font-size: var(--tbl-th-size, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tbl-th-tracking, 0.8px);
  border-bottom: var(--tbl-thead-border, 2px solid #e2e8f0);
  text-align: left;
  white-space: nowrap;
}

.simple-table tbody td,
.simple-table tbody th {
  padding: var(--tbl-td-pad, 14px 20px);
  border-bottom: var(--tbl-row-border, 1px solid #f1f5f9);
  color: var(--tbl-td-color, #334155);
  font-size: var(--tbl-td-size, 14px);
  vertical-align: middle;
  line-height: 1.55;
  font-weight: 500;
}

.simple-table tbody tr:last-child td,
.simple-table tbody tr:last-child th {
  border-bottom: none;
}

.simple-table tbody tr {
  transition: background 0.15s ease;
}

.simple-table tbody tr:hover {
  background: var(--tbl-hover-bg, #f8fafc);
}

/* Alternating row stripes — subtle */
.simple-table tbody tr:nth-child(even) {
  background: var(--tbl-stripe-bg, rgba(241, 245, 249, 0.5));
}
.simple-table tbody tr:nth-child(even):hover {
  background: var(--tbl-hover-bg, #f8fafc);
}

/* Bold first column */
.simple-table tbody td:first-child,
.simple-table tbody th[scope="row"] {
  font-weight: 700;
  color: var(--tbl-td-first-color, #1e293b);
}

/* Sticky first column — add .has-sticky to the table */
.simple-table.has-sticky tbody th[scope="row"],
.simple-table.has-sticky thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--tbl-sticky-bg, #fff);
  box-shadow: 2px 0 6px rgba(0,0,0,.06);
}

/* Responsive */
@media (max-width: 768px) {
  .simple-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: normal;
  }
  .simple-table thead th {
    white-space: nowrap;
  }
}


/* =============================================================================
   C. PLAIN TABLE FALLBACK
   Styles <table> elements without any class inside .entry-content.
   These are manual HTML tables in review pages that have no styling at all.
   ============================================================================= */
.entry-content table:not([class]) {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin: 2em 0;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,.04);
  font-size: 14px;
}

.entry-content table:not([class]) thead th {
  padding: 12px 16px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  color: #1e293b;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  border-bottom: 2px solid #e2e8f0;
  text-align: left;
}

.entry-content table:not([class]) tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f1f5f9;
  color: #334155;
  font-size: 14px;
  line-height: 1.5;
}

.entry-content table:not([class]) tbody tr:last-child td {
  border-bottom: none;
}

.entry-content table:not([class]) tbody tr:hover {
  background: #f8fafc;
}

.entry-content table:not([class]) tbody td:first-child {
  font-weight: 600;
}


/* =============================================================================
   D. SIMPLE-TABLE + TABS FIX
   Reduces excessive spacing when tables are inside the tabs component.
   Fixes overflow and wrapping issues.
   ============================================================================= */
.widget-menu-tabs .list-tab .simple-table {
  margin: 1em 0;
}

.widget-menu-tabs .list-tab {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.widget-menu-tabs .list-tab .simple-table tbody td:first-child {
  font-size: 14px;
}

/* Ensure tables inside tabs don't force horizontal scroll unnecessarily */
@media (max-width: 768px) {
  .widget-menu-tabs .list-tab .simple-table {
    white-space: normal;
  }
}


/* =============================================================================
   E. VERDICT SUMMARY BOX
   Score bars at the top of review pages (Speed 8.5/10, Value 6.8/10, etc.)
   ============================================================================= */
.verdict-summary-box {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  margin: 1.75rem 0;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.verdict-summary-box--danger {
  background: linear-gradient(135deg, #fff5f5 0%, #fef2f2 100%);
  border-color: #fca5a5;
}

.verdict-scores {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.verdict-score-row {
  display: grid;
  grid-template-columns: 180px 1fr 3.5rem;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 4px 0;
}

.verdict-score-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #374151;
  letter-spacing: 0.01em;
}

.verdict-score-bar-track {
  height: 10px;
  background: #e5e7eb;
  border-radius: 99px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}

.verdict-score-bar-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #22c55e, #4ade80);
  transition: width 0.6s cubic-bezier(.4, 0, .2, 1);
}

.verdict-score-bar-fill--success {
  background: linear-gradient(90deg, #22c55e, #4ade80);
}

.verdict-score-bar-fill--warning {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.verdict-score-bar-fill--danger {
  background: linear-gradient(90deg, #ef4444, #f87171);
}

.verdict-score-value {
  font-size: 0.85rem;
  font-weight: 800;
  text-align: right;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.verdict-overall {
  margin-top: 1rem;
  font-size: 1.1rem;
  font-weight: 700;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.75rem;
}

.verdict-summary-box--danger .verdict-overall {
  color: #ef4444;
  border-top-color: #fca5a5;
}

/* Mobile — stack label above bar */
@media (max-width: 640px) {
  .verdict-score-row {
    grid-template-columns: 1fr 3rem;
    gap: 0.4rem;
  }
  .verdict-score-label {
    grid-column: 1 / -1;
    font-size: 0.8rem;
  }
}


/* =============================================================================
   F. BENCHMARK RESULT CARDS
   Metric display cards (TTFB 165ms, GTmetrix Grade A, etc.)
   ============================================================================= */
.benchmark-result-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 1.5rem 0;
}

.benchmark-result-card {
  flex: 1;
  min-width: 150px;
  padding: 1.15rem 1.35rem;
  border-left: 4px solid #22c55e;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 0 10px 10px 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.benchmark-result-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

/* Variants */
.benchmark-result-card--success {
  border-left-color: #22c55e;
}
.benchmark-result-card--warning {
  border-left-color: #f59e0b;
}
.benchmark-result-card--danger {
  border-left-color: #ef4444;
  background: linear-gradient(135deg, #fff5f5, #fef2f2);
}
.benchmark-result-card--error {
  border-left-color: #991b1b;
  background: linear-gradient(135deg, #fef2f2, #fee2e2);
}
.benchmark-result-card--info {
  border-left-color: #3b82f6;
}

/* Value — large metric number */
.benchmark-result-value {
  font-size: 2rem;
  font-weight: 900;
  color: #22c55e;
  line-height: 1;
  letter-spacing: -0.02em;
}

.benchmark-result-card--warning .benchmark-result-value {
  color: #f59e0b;
}
.benchmark-result-card--danger .benchmark-result-value {
  color: #ef4444;
}
.benchmark-result-card--error .benchmark-result-value {
  color: #991b1b;
}
.benchmark-result-card--info .benchmark-result-value {
  color: #3b82f6;
}

/* Label — metric name */
.benchmark-result-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-top: 0.35rem;
  color: #475569;
}

/* Context — supporting detail */
.benchmark-result-context {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.2rem;
  line-height: 1.4;
}

/* Note — extra info */
.benchmark-result-note {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 0.3rem;
  font-style: italic;
}

/* Mobile — stack to 2 columns then 1 */
@media (max-width: 640px) {
  .benchmark-result-card {
    min-width: calc(50% - 0.5rem);
    flex: 0 0 calc(50% - 0.5rem);
  }
}
@media (max-width: 420px) {
  .benchmark-result-card {
    min-width: 100%;
    flex: 0 0 100%;
  }
}


/* =============================================================================
   G. TEST ENVIRONMENT
   Two patterns: grid inside content_box, and standalone box
   ============================================================================= */

/* Pattern 1: Grid inside content_box_custom (most reviews) */
.test-env-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-top: 0.75rem;
}

.test-env-item {
  font-size: 0.88rem;
  line-height: 1.5;
  color: #334155;
}

.test-env-item strong {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 0.2rem;
}

/* Pattern 2: Standalone box (scalahosting-review) */
.test-environment-box {
  background: linear-gradient(135deg, #f0f7ff, #e8f0fe);
  border: 2px solid #b3d4f5;
  border-radius: 10px;
  padding: 20px 24px;
  margin: 20px 0;
  max-width: 720px;
}

.test-environment-box h3 {
  margin: 0 0 16px;
  font-size: 1.05rem;
  color: #1a5fa8;
}

.teb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.teb-col h4 {
  margin: 0 0 8px;
  font-size: 0.95rem;
  color: #333;
  border-bottom: 1px solid #b3d4f5;
  padding-bottom: 4px;
}

.teb-col ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.7;
}

.teb-note {
  margin: 16px 0 0;
  font-size: 0.85rem;
  color: #555;
  font-style: italic;
  border-top: 1px solid #b3d4f5;
  padding-top: 12px;
}

@media (max-width: 600px) {
  .teb-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   H. RESOURCE LIMITS GRID
   Card grid showing CPU, PHP Workers, Bandwidth, Inodes, etc.
   ============================================================================= */
.resource-limits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

.resource-limit-item {
  padding: 1.1rem 1rem;
  background: linear-gradient(135deg, #f8fafc, #f1f5f9);
  border-radius: 10px;
  text-align: center;
  border: 1px solid #e2e8f0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.resource-limit-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.resource-limit-icon {
  font-size: 1.6rem;
  margin-bottom: 0.5rem;
  line-height: 1;
}

.resource-limit-label {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.3rem;
}

.resource-limit-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: #1e293b;
  line-height: 1.2;
}

.resource-limit-note {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.25rem;
  line-height: 1.3;
}

/* Value color by state */
.resource-limit-item--unlimited .resource-limit-value {
  color: #22c55e;
}
.resource-limit-item--limited .resource-limit-value {
  color: #f59e0b;
}
.resource-limit-item--unknown .resource-limit-value {
  color: #ef4444;
}

@media (max-width: 480px) {
  .resource-limits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* =============================================================================
   I. REVIEW SCORE BOX
   Standalone score display with overall rating, category bars, CTA
   ============================================================================= */
.review-score-box {
  border: 2px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px;
  margin: 24px 0;
  background: linear-gradient(135deg, #fafafa 0%, #fff 100%);
  max-width: 720px;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

.rsb-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.rsb-overall {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rsb-score {
  font-size: 3rem;
  font-weight: 900;
  color: #1a7f37;
  line-height: 1;
  letter-spacing: -0.02em;
}

.rsb-label {
  font-size: 1.1rem;
  color: #666;
}

.rsb-stars {
  color: #f5a623;
  font-size: 1.2rem;
  letter-spacing: 2px;
}

.rsb-count {
  font-size: 0.8rem;
  color: #888;
}

.rsb-categories {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.rsb-cat {
  display: grid;
  grid-template-columns: 140px 1fr 40px;
  align-items: center;
  gap: 10px;
}

.rsb-cat-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #333;
}

.rsb-bar-wrap {
  background: #e5e7eb;
  border-radius: 99px;
  height: 8px;
  overflow: hidden;
}

.rsb-bar {
  background: linear-gradient(90deg, #1a7f37, #2ea043);
  height: 100%;
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(.4, 0, .2, 1);
}

.rsb-cat-score {
  font-size: 0.9rem;
  font-weight: 700;
  color: #1a7f37;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.rsb-verdict {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-bottom: 16px;
  font-size: 0.95rem;
  line-height: 1.65;
  color: #374151;
}

.rsb-cta {
  display: block;
  background: linear-gradient(135deg, #ff6b35, #ff8a5c);
  color: #fff !important;
  text-align: center;
  padding: 14px 24px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.rsb-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

@media (max-width: 500px) {
  .rsb-cat {
    grid-template-columns: 1fr 40px;
    gap: 6px;
  }
  .rsb-cat-name {
    grid-column: 1 / -1;
  }
}


/* =============================================================================
   J. QUICK VERDICT GRID
   Side-by-side pros/cons boxes (green ✅ / red ❌)
   ============================================================================= */
.quick-verdict-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  max-width: 720px;
}

.qv-box {
  border-radius: 10px;
  padding: 18px 22px;
}

.qv-box h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
}

.qv-box ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.7;
}

.qv-green {
  background: linear-gradient(135deg, #f0faf3, #e6f7ec);
  border: 1px solid #b7dfbf;
}

.qv-green h3 {
  color: #166534;
}

.qv-red {
  background: linear-gradient(135deg, #fff5f5, #fef2f2);
  border: 1px solid #ffc9c9;
}

.qv-red h3 {
  color: #991b1b;
}

@media (max-width: 600px) {
  .quick-verdict-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   K. WHO IT'S NOT FOR BOX
   Red-tinted warning box with icon + text items
   ============================================================================= */
.who-its-not-for-box {
  border: 2px solid #fca5a5;
  border-radius: 12px;
  padding: 22px 26px;
  background: linear-gradient(135deg, #fff5f5, #fef2f2);
  max-width: 720px;
  margin: 20px 0;
}

.who-its-not-for-box > p {
  margin: 0 0 16px;
  font-weight: 700;
  color: #991b1b;
  font-size: 1.05rem;
}

.winf-item {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #fecaca;
}

.winf-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.winf-icon {
  font-size: 1.5rem;
  flex-shrink: 0;
  width: 32px;
  text-align: center;
  line-height: 1;
}

.winf-item strong {
  display: block;
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: #1e293b;
}

.winf-item p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555;
}


/* =============================================================================
   L. COMPARISON BOX
   Side-by-side host comparison (ScalaHosting vs Other)
   ============================================================================= */
.comparison-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  max-width: 720px;
}

.comp-col {
  border-radius: 10px;
  padding: 18px 22px;
}

.comp-col h4 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 700;
}

.comp-col ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.8;
}

.comp-scala {
  background: linear-gradient(135deg, #f0faf3, #e6f7ec);
  border: 2px solid #1a7f37;
}

.comp-scala h4 {
  color: #1a7f37;
}

.comp-other {
  background: #f8f9fa;
  border: 1px solid #d1d5db;
}

.comp-other h4 {
  color: #374151;
}

@media (max-width: 600px) {
  .comparison-box { grid-template-columns: 1fr; }
}


/* =============================================================================
   M. HOWTO STEPS
   Numbered step-by-step instructions
   ============================================================================= */
.howto-steps {
  max-width: 720px;
  margin: 20px 0;
}

.howto-step {
  display: flex;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e5e7eb;
}

.howto-step:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.howto-step-number {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  background: linear-gradient(135deg, #ff6b35, #ff8a5c);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 1.1rem;
  box-shadow: 0 3px 8px rgba(255, 107, 53, 0.3);
}

.howto-step-content {
  flex: 1;
}

.howto-step-content h3 {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e293b;
}

.howto-step-content p {
  font-size: 0.92rem;
  line-height: 1.7;
  margin: 0 0 10px;
  color: #374151;
}

@media (max-width: 500px) {
  .howto-step {
    gap: 14px;
  }
  .howto-step-number {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }
}


/* =============================================================================
   N. REVIEW THEMES GRID
   Side-by-side positive/negative review theme analysis
   ============================================================================= */
.review-themes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0;
  max-width: 720px;
}

.rtg-positive {
  background: linear-gradient(135deg, #f0faf3, #e6f7ec);
  border: 1px solid #b7dfbf;
  border-radius: 10px;
  padding: 18px 22px;
}

.rtg-negative {
  background: linear-gradient(135deg, #fff9f0, #fef3cd);
  border: 1px solid #f5d5a0;
  border-radius: 10px;
  padding: 18px 22px;
}

.rtg-positive h3,
.rtg-negative h3 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
}

.rtg-positive h3 { color: #166534; }
.rtg-negative h3 { color: #92400e; }

.rtg-positive ul,
.rtg-negative ul {
  margin: 0;
  padding-left: 18px;
  font-size: 0.85rem;
  line-height: 1.8;
}

@media (max-width: 600px) {
  .review-themes-grid { grid-template-columns: 1fr; }
}


/* =============================================================================
   O. BENCHMARK RESULTS GRID (TABULAR)
   Compact row-based benchmark comparison (Metric | Value | Context)
   ============================================================================= */
.benchmark-results-grid {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  margin: 20px 0;
  max-width: 720px;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
}

.brg-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr;
  padding: 11px 18px;
  font-size: 0.9rem;
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
  align-items: center;
  transition: background 0.12s;
}

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

.brg-header {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  font-weight: 700;
  font-size: 0.8rem;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.brg-good {
  background: #fff;
}

.brg-good:hover {
  background: #f8fafc;
}


/* =============================================================================
   P. FINAL VERDICT BOX
   Summary recommendation with score grid and CTA
   ============================================================================= */
.final-verdict-box {
  border: 2px solid #22c55e;
  border-radius: 14px;
  padding: 28px;
  background: linear-gradient(135deg, #f0fdf4, #e6f7ec);
  max-width: 720px;
  margin: 24px 0;
  box-shadow: 0 2px 12px rgba(34, 197, 94, 0.08);
}

.fvb-score-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 20px;
}

.fvb-score-item {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  text-align: center;
  border: 1px solid #bbf7d0;
  transition: transform 0.1s ease;
}

.fvb-score-item:hover {
  transform: translateY(-1px);
}

.fvb-overall {
  grid-column: span 3;
  background: linear-gradient(135deg, #1a7f37, #22c55e);
  color: #fff;
  border-color: #1a7f37;
  border-radius: 10px;
}

.fvb-category {
  display: block;
  font-size: 0.78rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.fvb-overall .fvb-category {
  color: rgba(255,255,255,0.8);
}

.fvb-score {
  display: block;
  font-size: 1.5rem;
  font-weight: 900;
  margin-bottom: 4px;
  letter-spacing: -0.02em;
}

.fvb-excellent { color: #1a7f37; }
.fvb-good { color: #2ea043; }
.fvb-average { color: #f59e0b; }
.fvb-poor { color: #ef4444; }

.fvb-overall .fvb-score {
  color: #fff;
  font-size: 2rem;
}

.fvb-note {
  display: block;
  font-size: 0.73rem;
  color: #6b7280;
  line-height: 1.4;
}

.fvb-overall .fvb-note {
  color: rgba(255,255,255,0.75);
}

.fvb-summary {
  border-top: 1px solid #bbf7d0;
  padding-top: 16px;
  margin-bottom: 20px;
  font-size: 0.93rem;
  line-height: 1.7;
  color: #374151;
}

.fvb-cta-group {
  text-align: center;
}

.fvb-cta-primary {
  display: inline-block;
  background: linear-gradient(135deg, #ff6b35, #ff8a5c);
  color: #fff !important;
  padding: 14px 28px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 8px;
  box-shadow: 0 4px 12px rgba(255, 107, 53, 0.3);
}

.fvb-cta-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.4);
}

.fvb-cta-note {
  font-size: 0.85rem;
  color: #6b7280;
  margin: 8px 0 0;
}

@media (max-width: 600px) {
  .fvb-score-grid { grid-template-columns: 1fr 1fr; }
  .fvb-overall { grid-column: span 2; }
}

@media (max-width: 400px) {
  .fvb-score-grid { grid-template-columns: 1fr; }
  .fvb-overall { grid-column: span 1; }
}


/* =============================================================================
   Q. COUPON BOX
   Promotional code display inside content boxes
   ============================================================================= */
.coupon-box {
  margin: 16px 0;
  padding: 16px 20px;
  background: #fff;
  border: 2px dashed #fbbf24;
  border-radius: 10px;
  text-align: center;
}

.coupon-code {
  font-family: 'Courier New', 'JetBrains Mono', monospace;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #92400e;
  padding: 8px 20px;
  background: #fef9c3;
  border-radius: 6px;
  display: inline-block;
  margin-bottom: 8px;
  user-select: all;
  cursor: pointer;
}

.coupon-box p {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #6b7280;
}


/* =============================================================================
   R. TABLE OF CONTENTS
   Collapsible TOC sidebar/box
   ============================================================================= */
.toc-container {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 0;
  margin: 24px 0;
  background: #f8fafc;
  max-width: 720px;
  overflow: hidden;
}

.toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  user-select: none;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.15s;
}

.toc-header:hover {
  background: #eef2f7;
}

.toc-title {
  margin: 0;
  font-size: 0.95rem;
}

.toc-icon {
  font-size: 1.2rem;
  color: #6b7280;
  font-weight: 700;
  transition: transform 0.2s;
}

.toc-list {
  list-style: none;
  padding: 14px 20px;
  margin: 0;
}

.toc-list li {
  padding: 5px 0;
  border-bottom: 1px solid #f1f5f9;
}

.toc-list li:last-child {
  border-bottom: none;
}

.toc-list a {
  font-size: 0.88rem;
  color: #334155;
  text-decoration: none;
  display: block;
  padding: 2px 0;
  transition: color 0.15s;
}

.toc-list a:hover {
  color: #2563eb;
}


/* =============================================================================
   PRINT STYLES
   ============================================================================= */
@media print {
  .benchmark-result-row { page-break-inside: avoid; }
  .benchmark-result-card { box-shadow: none; border: 1px solid #ccc; }
  .verdict-summary-box { box-shadow: none; border: 1px solid #ccc; }
  .resource-limits-grid { page-break-inside: avoid; }
  .final-verdict-box { box-shadow: none; }
  .toc-container { display: none; }
  .coupon-box { display: none; }
}