/* ============================================================
   CSS VARIABLES — DESIGN SYSTEM
   ============================================================ */
:root {
  --p1: #002868;
  --p1d: #00183F;
  --p8: #BF0A30;
  --p8h: #a00826;
  --p9: #00875A;
  --p9h: #006644;
  --white: #ffffff;
  --charcoal: #1D1D1F;
  --gray-text: #5F6368;
  --border: #E0E4E8;
  --bg-light: #F7F9FC;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,40,104,.08);
  --wa-green: #25D366;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;font-size:15px;color:var(--charcoal);background:#eef2f7;line-height:1.6}
input,select,button{font:inherit;color:inherit}
button{cursor:pointer}

/* ============================================================
   CALCULATOR WRAPPER & TITLE BAR
   ============================================================ */
.calc-wrap {
  max-width: 1220px;
  margin: 40px auto;
  padding: 0 20px 60px;
}

.calc-title-bar {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 24px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 4px solid var(--p8);
  position: relative;
  overflow: hidden;
}
.calc-title-bar::before {
  content: '';
  position: absolute;
  top: -50px; right: -5%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(191,10,48,0.15) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.calc-title-left {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}
.calc-title-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
  color: #fff;
  flex-shrink: 0;
}
.calc-title-bar h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px; font-weight: 800;
  line-height: 1.2; margin: 0;
  color: #ffffff !important;
}
.calc-title-bar .calc-subtitle { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.calc-badges { display: flex; gap: 8px; flex-wrap: wrap; z-index: 1; }
.calc-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 11px; font-weight: 600;
  padding: 5px 11px; border-radius: 6px;
  white-space: nowrap;
}
.calc-badge i { color: #4ade80; font-size: 10px; }

/* ============================================================
   CALC BODY — TWO COLUMNS
   ============================================================ */
.calc-body {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.calc-inputs {
  padding: 24px;
  border-right: 1px solid var(--border);
  overflow-y: auto;
}
.calc-results-panel {
  background: var(--bg-light);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

/* ============================================================
   USER MODE TAB SWITCHER
   ============================================================ */
.tab-switcher {
  display: flex; gap: 6px;
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 10px; padding: 4px;
  margin-bottom: 20px;
}
.tab-btn {
  flex: 1; padding: 10px 6px;
  border: none; border-radius: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 700;
  color: var(--gray-text);
  background: transparent; cursor: pointer;
  transition: all 180ms ease;
  text-align: center; line-height: 1.3;
}
.tab-btn i { display: block; font-size: 15px; margin-bottom: 4px; }
.tab-btn:hover { color: var(--p1); background: rgba(0,40,104,.06); }
.tab-btn.active { background: var(--p1); color: #fff; box-shadow: 0 2px 8px rgba(0,40,104,.25); }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   FUEL TYPE PILL TABS
   ============================================================ */
.fuel-tabs {
  display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px;
}
.fuel-tab {
  padding: 7px 13px; border: 2px solid var(--border);
  border-radius: 20px; font-size: 12px; font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: var(--gray-text); background: #fff;
  cursor: pointer; transition: all 180ms ease;
  white-space: nowrap;
}
.fuel-tab:hover { border-color: var(--p1); color: var(--p1); background: #f0f4fb; }
.fuel-tab.active { background: var(--p1); border-color: var(--p1); color: #fff; }

.fuel-inputs { display: none; }
.fuel-inputs.active { display: block; }

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--p1);
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid #e8eef8;
  display: flex; align-items: center; gap: 8px;
}
.section-title:first-of-type { margin-top: 0; }
.section-title i { color: var(--p9); }

/* ============================================================
   FORM FIELDS
   ============================================================ */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid.cols1 { grid-template-columns: 1fr; }
.form-grid.cols3 { grid-template-columns: 1fr 1fr 1fr; }
.field { display: flex; flex-direction: column; gap: 4px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--charcoal); }
.field label .hint { font-weight: 400; color: var(--gray-text); font-size: 11px; display: block; }
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap .prefix,.input-wrap .suffix {
  position: absolute; font-size: 13px; font-weight: 600;
  color: var(--gray-text); pointer-events: none; z-index: 5;
}
.input-wrap .prefix { left: 12px; }
.input-wrap .suffix { right: 12px; }

/* NUCLEAR INPUT OVERRIDES */
.calc-body input[type="text"],
.calc-body input[type="number"],
.calc-body select {
  width: 100% !important;
  padding: 9px 12px !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  color: var(--charcoal) !important;
  background-color: #ffffff !important;
  background-image: none !important;
  transition: all 0.2s !important;
  outline: none !important;
  -webkit-appearance: none !important;
  box-shadow: none !important;
  height: 40px !important;
}
.calc-body input:focus,.calc-body select:focus {
  border-color: var(--p1) !important;
  box-shadow: 0 0 0 3px rgba(0,40,104,.1) !important;
}
.input-wrap.has-prefix input { padding-left: 26px !important; }
.input-wrap.has-suffix input { padding-right: 40px !important; }
select {
  cursor: pointer !important; padding-right: 30px !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%235F6368'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E") no-repeat right 10px center/12px #ffffff !important;
}

/* TOGGLE SWITCH for round-trip */
.toggle-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 8px;
}
.toggle-label-text { font-size: 12.5px; font-weight: 600; color: var(--charcoal); }
.toggle-switch {
  position: relative; width: 44px; height: 24px;
  flex-shrink: 0;
}
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--border); border-radius: 24px;
  transition: .3s;
}
.toggle-slider:before {
  content: ''; position: absolute;
  height: 18px; width: 18px;
  left: 3px; bottom: 3px;
  background: white; border-radius: 50%;
  transition: .3s;
}
.toggle-switch input:checked + .toggle-slider { background: var(--p1); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(20px); }

/* FLEET ROW */
.fleet-vehicle-row {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 14px;
  margin-bottom: 12px;
  position: relative;
}
.fleet-vehicle-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.fleet-vehicle-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px; font-weight: 800;
  color: var(--p1); letter-spacing: .04em;
}
.btn-remove-vehicle {
  background: none; border: none;
  color: var(--p8); font-size: 13px;
  cursor: pointer; padding: 2px;
}

/* ACTION BUTTONS */
.calc-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 7px; padding: 12px 18px; border-radius: 8px;
  font-size: 13px; font-family: 'Montserrat', sans-serif;
  font-weight: 700; border: none; cursor: pointer;
  transition: all 180ms ease; width: 100%;
}
.btn-pdf { background: var(--p9); color: #fff; display: none; }
.btn-pdf:hover { background: var(--p9h); box-shadow: 0 4px 12px rgba(0,135,90,.25); transform: translateY(-1px); }
.btn-wa { background: var(--wa-green); color: #fff; display: none; }
.btn-wa:hover { background: #1fa850; box-shadow: 0 4px 12px rgba(37,211,102,.25); transform: translateY(-1px); }
.btn-add-vehicle {
  background: #fff; border: 2px dashed var(--p1);
  color: var(--p1); border-radius: 8px; padding: 10px;
  font-size: 12.5px; font-family: 'Montserrat', sans-serif;
  font-weight: 700; width: 100%; cursor: pointer;
  transition: all 180ms;
}
.btn-add-vehicle:hover { background: #f0f4fb; }

/* INFO NOTE */
.info-note {
  background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 10px 14px;
  font-size: 12px; color: #78350f;
  margin-top: 8px; line-height: 1.5;
}
.info-note i { margin-right: 5px; color: #d97706; }

/* ============================================================
   RESULTS PANEL
   ============================================================ */
.results-placeholder {
  text-align: center; padding: 50px 20px;
  color: #9ca3af;
}
.results-placeholder i { font-size: 44px; margin-bottom: 16px; color: #d1d5db; display: block; }
.results-placeholder p { font-size: 13.5px; line-height: 1.6; }
.results-content { display: none; }

/* KPI SUMMARY GRID — 3 columns */
.kpi3-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.kpi3 {
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 10px; text-align: center;
}
.kpi3 .kpi3-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--gray-text); margin-bottom: 5px;
}
.kpi3 .kpi3-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.kpi3.daily .kpi3-val { color: var(--p9); }
.kpi3.monthly .kpi3-val { color: var(--p1); }
.kpi3.annual .kpi3-val { color: var(--p8); }

/* RESULT CARDS */
.res-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.res-card-header {
  background: var(--p1); color: #fff;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.res-card-body { padding: 14px 16px; }

/* DATA ROWS */
.data-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px;
}
.data-row:last-child { border-bottom: none; }
.data-label { color: var(--gray-text); font-weight: 500; }
.data-val { font-weight: 700; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.data-val.green { color: var(--p9); }
.data-val.red { color: var(--p8); }
.data-val.blue { color: var(--p1); }
.data-val.big { font-family: 'Montserrat', sans-serif; font-size: 17px; font-weight: 900; }

/* TOTAL LINE */
.total-line {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: var(--p1);
  margin: 8px -16px -14px; border-radius: 0 0 10px 10px;
}
.total-line .label { color: rgba(255,255,255,.85); font-size: 12px; font-weight: 700; }
.total-line .value {
  color: #fff; font-family: 'Montserrat', sans-serif;
  font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums;
}

/* COST BARS */
.cost-bar-row { margin-bottom: 9px; }
.cost-bar-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; margin-bottom: 3px; }
.cost-bar-track { height: 7px; background: var(--border); border-radius: 9999px; overflow: hidden; }
.cost-bar-fill { height: 100%; border-radius: 9999px; transition: width 400ms ease; }

/* MODE COMPARISON TABLE */
.mode-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.mode-table th {
  background: #f0f4fb; padding: 8px 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--p1); text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
}
.mode-table td {
  padding: 7px 8px; border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.mode-table tr:last-child td { border-bottom: none; }
.mode-table tr.best-mode td { background: #dcfce7; color: #166534; font-weight: 700; }
.mode-table td.mode-name { font-weight: 600; color: var(--charcoal); }
.mode-table td.save-val { color: var(--p9); font-weight: 700; }

/* DEDUCTION COMPARISON */
.deduction-compare {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px;
}
.ded-col {
  background: var(--bg-light); border: 2px solid var(--border);
  border-radius: 8px; padding: 12px; text-align: center;
}
.ded-col.winner {
  background: #dcfce7; border-color: var(--p9);
}
.ded-col .ded-method {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--gray-text); margin-bottom: 6px;
}
.ded-col.winner .ded-method { color: var(--p9); }
.ded-col .ded-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px; font-weight: 900; color: var(--p1);
}
.ded-col.winner .ded-amount { color: var(--p9); }
.ded-col .ded-sub { font-size: 11px; color: var(--gray-text); margin-top: 3px; }
.winner-badge {
  display: inline-block; background: var(--p9); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 8px;
  border-radius: 9999px; margin-top: 5px; font-family: 'Montserrat', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
}

/* WFH CARD */
.wfh-highlight {
  background: #eff6ff; border: 1px solid #bfdbfe;
  border-radius: 8px; padding: 12px 14px;
  font-size: 13px; color: var(--p1); font-weight: 600;
  line-height: 1.5; margin-bottom: 10px;
}
.wfh-highlight strong { color: var(--p1); }

/* FLEET RESULTS */
.fleet-res-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.fleet-res-table th {
  background: #f0f4fb; padding: 7px 8px;
  font-family: 'Montserrat', sans-serif; font-weight: 700;
  color: var(--p1); text-align: left; border-bottom: 1px solid var(--border);
  font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase;
}
.fleet-res-table td {
  padding: 7px 8px; border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.fleet-res-table tr:last-child td { border-bottom: none; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
  .calc-body { grid-template-columns: 1fr; }
  .calc-results-panel { border-top: 1px solid var(--border); border-right: none; }
}
@media (max-width: 768px) {
  .calc-title-bar { padding: 20px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .calc-title-bar h1 { font-size: 18px; }
  .kpi3-grid { grid-template-columns: 1fr; }
  .deduction-compare { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .calc-wrap { padding: 0 12px 40px; margin: 20px auto; }
  .calc-inputs, .calc-results-panel { padding: 16px; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid.cols3 { grid-template-columns: 1fr 1fr; }
  .fuel-tab { font-size: 11px; padding: 6px 10px; }
}

/* PRINT */
@media print {
  .calc-actions, .btn-pdf, .btn-wa, .tab-switcher { display: none !important; }
  .calc-wrap { margin: 0; padding: 0; }
  .calc-body { box-shadow: none; }
}
/* ========================================================
   HOW THIS CALCULATOR WORKS — MAIN SECTION
   ======================================================== */
.htcw-section {
  background: #f7f8fa;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-top: 3px solid #e8eaf0;
}
.htcw-container {
  max-width: 1100px;
  margin-inline: auto;
}

/* ---- Eyebrow + Heading ---- */
.htcw-eyebrow {
  display: inline-block;
  background: #e8f4f5;
  color: var(--p9);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #c3e6cb;
  margin-bottom: 0.85rem;
}
.htcw-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.htcw-intro {
  font-size: 1rem;
  color: #4a5568;
  max-width: 72ch;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.htcw-intro strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   OVERVIEW FEATURES GRID (3-col icon cards)
   ======================================================== */
.htcw-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 2.5rem;
}
.htcw-feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.htcw-feature-card:hover {
  box-shadow: 0 4px 12px rgba(0,40,104,.08);
  transform: translateY(-1px);
}
.htcw-feature-icon {
  width: 40px; height: 40px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; color: #fff;
  margin-bottom: 10px;
  flex-shrink: 0;
}
.htcw-feature-icon.navy { background: var(--p1); }
.htcw-feature-icon.red  { background: var(--p8); }
.htcw-feature-icon.green{ background: var(--p9); }
.htcw-feature-card h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--p1);
  margin-bottom: 5px;
  line-height: 1.3;
}
.htcw-feature-card p {
  font-size: 0.83rem;
  color: #4a5568;
  line-height: 1.55;
}


/* ========================================================
   SUB-SECTION HEADER (navy left border accent)
   ======================================================== */
.htcw-sub-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 2.5rem 0 1.25rem;
  padding-bottom: 10px;
  border-bottom: 2px solid #e8eef8;
}
.htcw-sub-header .htcw-sub-icon {
  width: 32px; height: 32px;
  background: var(--p1);
  color: #fff;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.htcw-sub-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.25;
}
.htcw-sub-desc {
  font-size: 0.92rem;
  color: #4a5568;
  line-height: 1.7;
  max-width: 72ch;
  margin-bottom: 1.25rem;
}
.htcw-sub-desc strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   CALCULATOR MODES — 3 TAB-STYLE CARDS
   ======================================================== */
.htcw-modes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-bottom: 1.5rem;
}
.htcw-mode-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.htcw-mode-card:hover {
  box-shadow: 0 4px 14px rgba(0,40,104,.10);
  transform: translateY(-2px);
}
.htcw-mode-card-header {
  background: var(--p1);
  color: #fff;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.htcw-mode-card-header i {
  font-size: 16px;
  opacity: 0.9;
}
.htcw-mode-card-header span {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.htcw-mode-card-body {
  padding: 14px 16px;
}
.htcw-mode-card-body p {
  font-size: 0.83rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 10px;
}
.htcw-mode-card-body p:last-child { margin-bottom: 0; }
.htcw-mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 9999px;
  margin-top: 6px;
}
.htcw-mode-badge.personal { background: #e8f4f5; color: var(--p9); border: 1px solid #c3e6cb; }
.htcw-mode-badge.business { background: #eff0ff; color: #4338ca; border: 1px solid #c7d2fe; }
.htcw-mode-badge.fleet    { background: #fff1f2; color: var(--p8); border: 1px solid #fecdd3; }


/* ========================================================
   FUEL TYPES TABLE
   ======================================================== */
.htcw-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.25rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.htcw-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.htcw-table th {
  background: var(--p1);
  color: #fff;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.htcw-table th:first-child { border-radius: 9px 0 0 0; }
.htcw-table th:last-child  { border-radius: 0 9px 0 0; }
.htcw-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--charcoal);
  line-height: 1.5;
  vertical-align: top;
}
.htcw-table tr:last-child td { border-bottom: none; }
.htcw-table tr:hover td { background: #fafbff; }
.htcw-table .fuel-label {
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--p1);
  white-space: nowrap;
}
.htcw-table .formula-code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  background: #f0f4fb;
  padding: 3px 8px;
  border-radius: 4px;
  color: var(--p1);
  display: inline-block;
  white-space: nowrap;
}


/* ========================================================
   7-COMPONENT BREAKDOWN CARDS
   ======================================================== */
.htcw-components-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 1.25rem;
}
.htcw-comp-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: var(--shadow-sm);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.htcw-comp-card:hover {
  box-shadow: 0 4px 12px rgba(0,40,104,.08);
  transform: translateY(-1px);
}
.htcw-comp-card.full-width {
  grid-column: 1 / -1;
}
.htcw-comp-num {
  width: 28px; height: 28px;
  background: var(--p1);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.htcw-comp-card h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--p1);
  margin-bottom: 3px;
  line-height: 1.3;
}
.htcw-comp-card p {
  font-size: 0.8rem;
  color: #4a5568;
  line-height: 1.6;
}
.htcw-comp-card .comp-formula {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 10.5px;
  background: #f0f4fb;
  color: var(--p1);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-top: 5px;
}
.htcw-comp-card .comp-default {
  font-size: 11px;
  color: var(--p9);
  font-weight: 600;
  margin-top: 3px;
}


/* ========================================================
   INFO / TIP CALLOUT BOXES
   ======================================================== */
.htcw-callout {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.htcw-callout i {
  font-size: 15px;
  flex-shrink: 0;
  margin-top: 2px;
}
.htcw-callout.tip {
  background: #e8f4f5;
  border: 1px solid #c3e6cb;
  color: #1a4731;
}
.htcw-callout.tip i { color: var(--p9); }
.htcw-callout.warn {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.htcw-callout.warn i { color: #d97706; }
.htcw-callout.info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--p1);
}
.htcw-callout.info i { color: var(--p1); }
.htcw-callout strong { font-weight: 700; }


/* ========================================================
   IRS DEDUCTION — COMPARISON VISUAL
   ======================================================== */
.htcw-irs-compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: stretch;
  margin-bottom: 1.25rem;
}
.htcw-irs-col {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.htcw-irs-col.std  { border-color: var(--p1); }
.htcw-irs-col.act  { border-color: var(--p9); }
.htcw-irs-col-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.htcw-irs-col.std .htcw-irs-col-label { color: var(--p1); }
.htcw-irs-col.act .htcw-irs-col-label { color: var(--p9); }
.htcw-irs-col .irs-formula {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}
.htcw-irs-col.std .irs-formula { color: var(--p1); }
.htcw-irs-col.act .irs-formula { color: var(--p9); }
.htcw-irs-col p {
  font-size: 12px;
  color: #4a5568;
  line-height: 1.55;
}
.htcw-irs-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--p8);
}


/* ========================================================
   RATES TABLE — small inline table
   ======================================================== */
.htcw-rates-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.25rem;
}
.htcw-rate-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.htcw-rate-card .rate-type {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 4px;
}
.htcw-rate-card .rate-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: var(--p1);
  line-height: 1;
}
.htcw-rate-card .rate-unit {
  font-size: 11px;
  color: var(--gray-text);
  margin-top: 2px;
}


/* ========================================================
   WFH / MODE / CO2 — STEP CARDS (reuses how-step pattern)
   ======================================================== */
.htcw-step-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin-bottom: 1.25rem;
}
.htcw-step {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--white);
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.htcw-step:hover {
  box-shadow: 0 4px 12px rgba(0,40,104,.08);
  transform: translateY(-1px);
}
.htcw-step-icon {
  flex-shrink: 0;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem;
  color: #fff;
  margin-top: 0.1rem;
}
.htcw-step-icon.navy  { background: var(--p1); }
.htcw-step-icon.red   { background: var(--p8); }
.htcw-step-icon.green { background: var(--p9); }
.htcw-step h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--p1);
  margin-bottom: 0.3rem;
  font-family: 'Montserrat', sans-serif;
}
.htcw-step p {
  font-size: 0.85rem;
  color: #4a5568;
  line-height: 1.65;
}
.htcw-step p strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   OUTPUT FEATURES — MINI GRID
   ======================================================== */
.htcw-output-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 1.5rem;
}
.htcw-output-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  box-shadow: var(--shadow-sm);
}
.htcw-output-card .out-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; color: #fff;
  flex-shrink: 0;
}
.htcw-output-card .out-icon.pdf  { background: var(--p9); }
.htcw-output-card .out-icon.wa   { background: #25D366; }
.htcw-output-card .out-icon.live { background: var(--p1); }
.htcw-output-card .out-icon.kpi  { background: var(--p8); }
.htcw-output-card h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--p1);
  margin-bottom: 3px;
}
.htcw-output-card p {
  font-size: 0.8rem;
  color: #4a5568;
  line-height: 1.55;
}


/* ========================================================
   DATA ASSUMPTIONS ACCORDION
   ======================================================== */
.htcw-accordion {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.htcw-acc-item { border-bottom: 1px solid var(--border); }
.htcw-acc-item:last-child { border-bottom: none; }
.htcw-acc-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  background: var(--white);
  transition: background 180ms;
}
.htcw-acc-q:hover { background: var(--bg-light); }
.htcw-acc-q.open { background: #f0f4fb; }
.htcw-acc-q-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  padding-right: 12px;
  line-height: 1.35;
}
.htcw-acc-q.open .htcw-acc-q-text { color: var(--p1); }
.htcw-acc-chevron {
  color: #9ca3af;
  transition: transform 200ms ease;
  flex-shrink: 0;
  font-size: 13px;
}
.htcw-acc-q.open .htcw-acc-chevron {
  transform: rotate(180deg);
  color: var(--p1);
}
.htcw-acc-a {
  display: none;
  padding: 0 16px 14px;
  font-size: 12.5px;
  color: #4a5568;
  line-height: 1.65;
  border-top: 1px solid var(--border);
  background: #fafbff;
}
.htcw-acc-a.open { display: block; }
.htcw-acc-a p { padding-top: 12px; }
.htcw-acc-a ul {
  margin: 8px 0 0 18px;
  list-style: disc;
}
.htcw-acc-a li {
  margin-bottom: 4px;
  font-size: 12.5px;
  line-height: 1.55;
}


/* ========================================================
   MOBILE RESPONSIVE
   ======================================================== */
@media (max-width: 900px) {
  .htcw-features-grid { grid-template-columns: 1fr 1fr; }
  .htcw-modes-grid     { grid-template-columns: 1fr; }
  .htcw-irs-compare    { grid-template-columns: 1fr; gap: 10px; }
  .htcw-irs-vs         { padding: 6px 0; font-size: 12px; }
  .htcw-components-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .htcw-features-grid { grid-template-columns: 1fr; }
  .htcw-rates-grid    { grid-template-columns: 1fr; }
  .htcw-output-grid   { grid-template-columns: 1fr; }
  .htcw-table         { font-size: 11.5px; }
  .htcw-table th,
  .htcw-table td      { padding: 8px 10px; }
}

@media (max-width: 600px) {
  .htcw-section { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.25rem); }
  .htcw-sub-header h3 { font-size: 0.95rem; }
  .htcw-rate-card .rate-val { font-size: 18px; }
  .htcw-step { padding: 0.85rem 1rem; }
}

/* ========================================================
   EDUCATIONAL SECTION — MASTER WRAPPER
   ======================================================== */
.edu-section {
  background: var(--white);
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-top: 3px solid #e8eaf0;
}
.edu-container {
  max-width: 1100px;
  margin-inline: auto;
}


/* ---- Eyebrow + Master Heading ---- */
.edu-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eff0ff;
  color: var(--p1);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #c7d2fe;
  margin-bottom: 0.85rem;
}
.edu-section h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.edu-master-intro {
  font-size: 1rem;
  color: #4a5568;
  max-width: 72ch;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.edu-master-intro strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   TOPIC NAVIGATION PILLS
   ======================================================== */
.edu-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 2.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid #e8eef8;
}
.edu-nav a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 2px solid var(--border);
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: var(--gray-text);
  background: var(--white);
  cursor: pointer;
  transition: all 180ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.edu-nav a:hover {
  border-color: var(--p1);
  color: var(--p1);
  background: #f0f4fb;
}
.edu-nav a i { font-size: 12px; }


/* ========================================================
   TOPIC HEADER (reusable)
   ======================================================== */
.edu-topic-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 3rem 0 1rem;
  padding-bottom: 12px;
  border-bottom: 2px solid #e8eef8;
  scroll-margin-top: 24px;
}
.edu-topic-header:first-of-type { margin-top: 0; }
.edu-topic-icon {
  width: 38px; height: 38px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; color: #fff;
  flex-shrink: 0;
}
.edu-topic-icon.navy  { background: var(--p1); }
.edu-topic-icon.red   { background: var(--p8); }
.edu-topic-icon.green { background: var(--p9); }
.edu-topic-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.35rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.25;
}


/* ========================================================
   PROSE / BODY TEXT
   ======================================================== */
.edu-prose {
  font-size: 0.94rem;
  color: #4a5568;
  line-height: 1.75;
  max-width: 72ch;
  margin-bottom: 1.25rem;
}
.edu-prose strong { color: var(--p1); font-weight: 700; }
.edu-prose a {
  color: var(--p1);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.edu-prose a:hover { color: var(--p8); }


/* ========================================================
   STAT HIGHLIGHT STRIP (inline hero numbers)
   ======================================================== */
.edu-stats-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 1.75rem;
}
.edu-stat-card {
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.edu-stat-card .stat-num {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 4px;
}
.edu-stat-card .stat-num.navy { color: var(--p1); }
.edu-stat-card .stat-num.red  { color: var(--p8); }
.edu-stat-card .stat-num.green{ color: var(--p9); }
.edu-stat-card .stat-label {
  font-size: 10.5px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gray-text);
  line-height: 1.3;
}


/* ========================================================
   ICEBERG DIAGRAM — visual cost breakdown
   ======================================================== */
.edu-iceberg {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 2rem;
}
.edu-iceberg-header {
  background: var(--p1);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.edu-iceberg-header i { font-size: 16px; opacity: 0.85; }
.edu-iceberg-header span {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.edu-iceberg-body { padding: 20px; }

/* The visible portion */
.iceberg-visible {
  background: linear-gradient(135deg, #e8f4f5 0%, #f0f4fb 100%);
  border: 2px dashed var(--p9);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  position: relative;
}
.iceberg-visible::before {
  content: 'WHAT YOU SEE';
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--p9);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .06em;
  padding: 2px 10px;
  border-radius: 9999px;
}
.iceberg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0,0,0,.08);
}
.iceberg-row:last-child { border-bottom: none; }
.iceberg-row .ib-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
}
.iceberg-row .ib-label i { font-size: 13px; width: 18px; text-align: center; }
.iceberg-row .ib-pct {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.iceberg-row .ib-bar {
  flex: 1;
  margin: 0 12px;
  height: 6px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}
.iceberg-row .ib-bar-fill {
  height: 100%;
  border-radius: 9999px;
}

/* The hidden portion */
.iceberg-hidden {
  background: linear-gradient(135deg, #fff1f2 0%, #fef3f3 100%);
  border: 2px dashed var(--p8);
  border-radius: 10px;
  padding: 14px 16px;
  position: relative;
}
.iceberg-hidden::before {
  content: 'WHAT YOU DON'T SEE (65–75%)';
  position: absolute;
  top: -10px;
  left: 16px;
  background: var(--p8);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .06em;
  padding: 2px 10px;
  border-radius: 9999px;
}
.iceberg-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  margin: 4px 0;
}
.iceberg-divider .line {
  flex: 1;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--border), var(--border) 6px, transparent 6px, transparent 12px);
}
.iceberg-divider .water-label {
  font-size: 10px;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #60a5fa;
  white-space: nowrap;
}


/* ========================================================
   IRS RATES HISTORY TABLE
   ======================================================== */
.edu-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.edu-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.edu-table th {
  background: var(--p1);
  color: #fff;
  padding: 10px 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.edu-table th:first-child { border-radius: 9px 0 0 0; }
.edu-table th:last-child  { border-radius: 0 9px 0 0; }
.edu-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #f1f5f9;
  color: var(--charcoal);
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.edu-table tr:last-child td { border-bottom: none; }
.edu-table tr:hover td { background: #fafbff; }
.edu-table tr.current-yr td {
  background: #e8f4f5;
  font-weight: 700;
}
.edu-table .yr-badge {
  display: inline-block;
  background: var(--p9);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 9999px;
  margin-left: 5px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .04em;
  vertical-align: middle;
}


/* ========================================================
   CALLOUT BOXES
   ======================================================== */
.edu-callout {
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.65;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.edu-callout i { font-size: 15px; flex-shrink: 0; margin-top: 2px; }
.edu-callout.tip   { background: #e8f4f5; border: 1px solid #c3e6cb; color: #1a4731; }
.edu-callout.tip i { color: var(--p9); }
.edu-callout.warn   { background: #fffbeb; border: 1px solid #fde68a; color: #78350f; }
.edu-callout.warn i { color: #d97706; }
.edu-callout.info   { background: #eff6ff; border: 1px solid #bfdbfe; color: var(--p1); }
.edu-callout.info i { color: var(--p1); }
.edu-callout.danger   { background: #fff1f2; border: 1px solid #fecdd3; color: #881337; }
.edu-callout.danger i { color: var(--p8); }
.edu-callout strong { font-weight: 700; }
.edu-callout code {
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
}
.edu-callout.tip code   { background: #d1fae5; }
.edu-callout.warn code  { background: #fef3c7; }
.edu-callout.info code  { background: #dbeafe; }
.edu-callout.danger code{ background: #ffe4e6; }


/* ========================================================
   TWO-COLUMN COMPARISON CARDS
   ======================================================== */
.edu-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 1.5rem;
}
.edu-compare-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.edu-compare-card-head {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.edu-compare-card-head i { font-size: 16px; }
.edu-compare-card-head span {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.edu-compare-card.std .edu-compare-card-head {
  background: var(--p1); color: #fff;
}
.edu-compare-card.act .edu-compare-card-head {
  background: var(--p9); color: #fff;
}
.edu-compare-card-body {
  padding: 16px;
}
.edu-compare-card-body h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--p1);
  margin-bottom: 8px;
}
.edu-compare-card.act .edu-compare-card-body h5 { color: var(--p9); }
.edu-compare-card-body p {
  font-size: 0.83rem;
  color: #4a5568;
  line-height: 1.6;
  margin-bottom: 8px;
}
.edu-compare-card-body p:last-child { margin-bottom: 0; }
.edu-compare-card-body ul {
  margin: 6px 0 10px 18px;
  list-style: disc;
}
.edu-compare-card-body li {
  font-size: 0.82rem;
  color: #4a5568;
  line-height: 1.55;
  margin-bottom: 4px;
}
.edu-compare-card-body li strong { color: var(--charcoal); }
.edu-formula-highlight {
  background: #f0f4fb;
  border: 1px solid #e0e7ff;
  border-radius: 6px;
  padding: 10px 14px;
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  color: var(--p1);
  text-align: center;
  font-weight: 600;
  margin: 8px 0;
}
.edu-compare-card.act .edu-formula-highlight {
  background: #e8f4f5;
  border-color: #c3e6cb;
  color: var(--p9);
}


/* ========================================================
   DECISION FLOWCHART
   ======================================================== */
.edu-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 2rem;
  padding: 0 10px;
}
.edu-flow-node {
  background: var(--white);
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 14px 20px;
  text-align: center;
  max-width: 480px;
  width: 100%;
  box-shadow: var(--shadow-sm);
  position: relative;
}
.edu-flow-node.question {
  border-color: var(--p1);
  background: #f0f4fb;
}
.edu-flow-node.question h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--p1);
}
.edu-flow-node.answer-yes {
  border-color: var(--p9);
  background: #e8f4f5;
}
.edu-flow-node.answer-yes p {
  font-size: 0.85rem;
  color: #166534;
  font-weight: 600;
}
.edu-flow-node.answer-no {
  border-color: var(--p8);
  background: #fff1f2;
}
.edu-flow-node.answer-no p {
  font-size: 0.85rem;
  color: #881337;
  font-weight: 600;
}
.edu-flow-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4px 0;
}
.edu-flow-arrow .arrow-line {
  width: 2px;
  height: 16px;
  background: var(--border);
}
.edu-flow-arrow .arrow-label {
  font-size: 10px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}
.edu-flow-arrow .arrow-label.yes { background: #dcfce7; color: #166534; }
.edu-flow-arrow .arrow-label.no  { background: #ffe4e6; color: #881337; }
.edu-flow-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  max-width: 480px;
  width: 100%;
}
.edu-flow-split-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 480px;
  width: 100%;
  padding: 2px 0;
}
.edu-flow-split-connector .branch {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.edu-flow-split-connector .branch .arrow-line {
  width: 2px;
  height: 14px;
  background: var(--border);
}


/* ========================================================
   EXAMPLE SCENARIO CARD
   ======================================================== */
.edu-example {
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.edu-example-header {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 3px solid var(--p8);
}
.edu-example-header i { font-size: 16px; opacity: 0.85; }
.edu-example-header span {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.edu-example-body {
  padding: 18px 20px;
}
.edu-example-body .scenario-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 8px;
}
.edu-example-body .scenario-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.edu-example-body .sg-item {
  display: flex;
  justify-content: space-between;
  font-size: 12.5px;
  padding: 5px 0;
  border-bottom: 1px dashed var(--border);
}
.edu-example-body .sg-item .sg-label { color: var(--gray-text); font-weight: 500; }
.edu-example-body .sg-item .sg-val   { font-weight: 700; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.edu-example-body .result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: var(--p1);
  border-radius: 8px;
  margin-top: 10px;
}
.edu-example-body .result-row .r-label {
  color: rgba(255,255,255,.85);
  font-size: 12px;
  font-weight: 600;
}
.edu-example-body .result-row .r-val {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 18px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}


/* ========================================================
   CHECKLIST CARDS
   ======================================================== */
.edu-checklist {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 1.5rem;
}
.edu-checklist h5 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--p1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.edu-checklist h5 i { color: var(--p9); }
.edu-checklist-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.55;
}
.edu-checklist-item:last-child { border-bottom: none; }
.edu-checklist-item i {
  color: var(--p9);
  font-size: 12px;
  margin-top: 3px;
  flex-shrink: 0;
}
.edu-checklist-item strong { color: var(--charcoal); font-weight: 600; }


/* ========================================================
   MYTH vs FACT CARDS
   ======================================================== */
.edu-myths-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-bottom: 1.5rem;
}
.edu-myth-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.edu-myth-top {
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.edu-myth-top .myth-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  flex-shrink: 0;
  margin-top: 2px;
  background: #ffe4e6;
  color: var(--p8);
}
.edu-myth-top p {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.45;
}
.edu-myth-bottom {
  background: #e8f4f5;
  padding: 12px 16px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-top: 1px solid var(--border);
}
.edu-myth-bottom .fact-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 9999px;
  flex-shrink: 0;
  margin-top: 2px;
  background: var(--p9);
  color: #fff;
}
.edu-myth-bottom p {
  font-size: 12.5px;
  color: #1a4731;
  line-height: 1.55;
}


/* ========================================================
   MOBILE RESPONSIVE
   ======================================================== */
@media (max-width: 900px) {
  .edu-stats-strip  { grid-template-columns: repeat(2, 1fr); }
  .edu-compare      { grid-template-columns: 1fr; }
  .edu-myths-grid   { grid-template-columns: 1fr; }
  .edu-flow-split   { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 768px) {
  .edu-stats-strip  { grid-template-columns: 1fr 1fr; }
  .edu-table th,
  .edu-table td     { padding: 8px 10px; font-size: 11.5px; }
  .edu-example-body .scenario-grid { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .edu-section      { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.25rem); }
  .edu-stats-strip  { grid-template-columns: 1fr; }
  .edu-nav          { gap: 6px; }
  .edu-nav a        { font-size: 11px; padding: 6px 12px; }
  .edu-topic-header h3 { font-size: 1rem; }
  .edu-stat-card .stat-num { font-size: 1.1rem; }
  .edu-flow-node    { padding: 12px 14px; }
  .edu-example-body .result-row .r-val { font-size: 15px; }
}


/* ============================================================
   SECTION 1: QUICK REFERENCE DATA STRIP
   ============================================================ */
.qref-section {
  background: #fff;
  border-top: 3px solid var(--p1);
  border-bottom: 1px solid var(--border);
  padding: clamp(1.25rem,3vw,2rem) clamp(1rem,4vw,2rem);
}
.qref-container { max-width: 1220px; margin-inline: auto; }
.qref-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 1.25rem;
}
.qref-heading {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 800;
  color: var(--p1); display: flex; align-items: center; gap: 8px;
}
.qref-heading i { color: var(--p8); font-size: 1rem; }
.qref-updated {
  font-size: 11px; color: var(--gray-text);
  background: var(--bg-light); border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 10px;
  display: flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.qref-updated i { color: var(--p9); }
.qref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}
.qref-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 10px; padding: 14px 16px;
  display: flex; align-items: center; gap: 12px;
  transition: box-shadow 180ms ease, transform 180ms ease;
}
.qref-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.qref-icon-wrap {
  width: 40px; height: 40px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; flex-shrink: 0;
}
.qref-icon-wrap.navy  { background: #e8eef8; color: var(--p1); }
.qref-icon-wrap.red   { background: #fbe9ec; color: var(--p8); }
.qref-icon-wrap.green { background: #e6f4ed; color: var(--p9); }
.qref-icon-wrap.amber { background: #fef9e7; color: #b45309; }
.qref-icon-wrap.slate { background: #f0f4fb; color: #475569; }
.qref-body { min-width: 0; }
.qref-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem; font-weight: 900;
  color: var(--p1); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.qref-label { font-size: 11px; color: var(--gray-text); font-weight: 600; margin-top: 2px; line-height: 1.3; }

/* divider between rate groups */
.qref-divider {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 10px;
  color: var(--gray-text); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
  margin: 4px 0 -2px;
}
.qref-divider::before,.qref-divider::after {
  content:''; flex:1; height:1px; background: var(--border);
}
.qref-source {
  margin-top: 10px; font-size: 11px; color: var(--gray-text);
  display: flex; align-items: center; gap: 5px;
}
.qref-source i { color: var(--p9); }


/* ============================================================
   SECTION 2: FUEL TYPE COST COMPARISON TABLE
   ============================================================ */
.fuelcmp-section {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  padding: clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem);
}
.fuelcmp-container { max-width: 1100px; margin-inline: auto; }
.section-eyebrow {
  display: inline-block; background: #e8f4f5; color: var(--p9);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 0.3rem 0.9rem; border-radius: 9999px;
  border: 1px solid #c3e6cb; margin-bottom: 0.85rem;
}
.section-h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.3rem, 3vw, 1.9rem); font-weight: 800;
  color: var(--p1); line-height: 1.2; margin-bottom: 0.6rem;
}
.section-lead {
  font-size: 0.95rem; color: #4a5568; max-width: 72ch;
  line-height: 1.7; margin-bottom: 1.75rem;
}

/* Table wrapper for horizontal scroll on mobile */
.table-scroll-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
}
.fuel-cmp-table {
  width: 100%; min-width: 640px;
  border-collapse: collapse;
  background: #fff;
  font-size: 13px;
}
.fuel-cmp-table thead tr {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
}
.fuel-cmp-table thead th {
  padding: 13px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; text-align: left; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.12);
}
.fuel-cmp-table thead th:last-child { border-right: none; }
.fuel-cmp-table thead th.best-col { color: #4ade80; }

.fuel-cmp-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 150ms;
}
.fuel-cmp-table tbody tr:last-child { border-bottom: none; }
.fuel-cmp-table tbody tr:hover { background: #f0f4fb; }
.fuel-cmp-table tbody td {
  padding: 12px 14px; color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border);
}
.fuel-cmp-table tbody td:last-child { border-right: none; }
.fuel-cmp-table tbody td:first-child { font-weight: 700; white-space: nowrap; }

.fuel-type-pill {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 700;
  padding: 3px 9px; border-radius: 9999px;
}
.pill-gas    { background: #fef9e7; color: #b45309; }
.pill-diesel { background: #fff7ed; color: #c2410c; }
.pill-hybrid { background: #e6f4ed; color: var(--p9); }
.pill-ev     { background: #eff6ff; color: #1d4ed8; }
.pill-phev   { background: #f5f3ff; color: #6d28d9; }

.td-num { font-family: 'Montserrat', sans-serif; font-weight: 800; }
.td-green { color: var(--p9); }
.td-red   { color: var(--p8); }
.td-blue  { color: #1d4ed8; }
.td-gold  { color: #b45309; }
.td-muted { color: var(--gray-text); font-size: 12px; }

.best-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--p9); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 9999px; letter-spacing: .05em; text-transform: uppercase;
  margin-left: 5px;
  font-family: 'Montserrat', sans-serif;
}
.worst-badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fbe9ec; color: var(--p8);
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 9999px; letter-spacing: .05em; text-transform: uppercase;
  margin-left: 5px;
  font-family: 'Montserrat', sans-serif;
}
.fuelcmp-note {
  margin-top: 10px; font-size: 11.5px; color: var(--gray-text);
  display: flex; align-items: flex-start; gap: 6px; line-height: 1.5;
}
.fuelcmp-note i { color: #b45309; margin-top: 1px; flex-shrink: 0; }

/* Pros/Cons cards below the table */
.fuel-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px; margin-top: 1.75rem;
}
.fuel-detail-card {
  background: #fff; border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.fuel-detail-header {
  padding: 11px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase;
  display: flex; align-items: center; gap: 7px;
  border-bottom: 1px solid var(--border);
}
.fuel-detail-header.gas    { background: #fef9e7; color: #b45309; }
.fuel-detail-header.diesel { background: #fff7ed; color: #c2410c; }
.fuel-detail-header.hybrid { background: #e6f4ed; color: var(--p9); }
.fuel-detail-header.ev     { background: #eff6ff; color: #1d4ed8; }
.fuel-detail-header.phev   { background: #f5f3ff; color: #6d28d9; }
.fuel-detail-body { padding: 12px 14px; }
.fuel-pro, .fuel-con {
  display: flex; align-items: flex-start; gap: 6px;
  font-size: 12px; line-height: 1.5; margin-bottom: 5px;
}
.fuel-pro i { color: var(--p9); margin-top: 2px; font-size: 10px; flex-shrink: 0; }
.fuel-con i { color: var(--p8); margin-top: 2px; font-size: 10px; flex-shrink: 0; }
.fuel-pro span { color: #374151; }
.fuel-con span { color: #374151; }


/* ============================================================
   SECTION 3: COMMUTE SAVINGS STRATEGIES
   ============================================================ */
.tips-section {
  background: #fff;
  border-top: 1px solid var(--border);
  padding: clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem);
}
.tips-container { max-width: 1100px; margin-inline: auto; }
.tips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 1.75rem;
}
.tip-card {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 12px; padding: 20px;
  position: relative; overflow: hidden;
  transition: box-shadow 200ms ease, transform 200ms ease;
  display: flex; flex-direction: column; gap: 10px;
}
.tip-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.tip-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
}
.tip-card.navy::before  { background: var(--p1); }
.tip-card.red::before   { background: var(--p8); }
.tip-card.green::before { background: var(--p9); }
.tip-card.amber::before { background: #d97706; }
.tip-card.slate::before { background: #475569; }
.tip-card.purple::before{ background: #7c3aed; }

.tip-icon-wrap {
  width: 46px; height: 46px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.tip-icon-wrap.navy  { background: #e8eef8; color: var(--p1); }
.tip-icon-wrap.red   { background: #fbe9ec; color: var(--p8); }
.tip-icon-wrap.green { background: #e6f4ed; color: var(--p9); }
.tip-icon-wrap.amber { background: #fef9e7; color: #d97706; }
.tip-icon-wrap.slate { background: #f1f5f9; color: #475569; }
.tip-icon-wrap.purple{ background: #ede9fe; color: #7c3aed; }

.tip-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 800; color: var(--charcoal);
  line-height: 1.3;
}
.tip-desc {
  font-size: 13px; color: #4a5568; line-height: 1.65;
}
.tip-savings {
  display: inline-flex; align-items: center; gap: 5px;
  background: #e6f4ed; color: var(--p9);
  font-size: 11px; font-weight: 800;
  padding: 4px 10px; border-radius: 9999px;
  font-family: 'Montserrat', sans-serif;
  border: 1px solid #c3e6cb;
  width: fit-content; margin-top: auto;
}
.tip-savings i { font-size: 10px; }
.tip-action {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--p1); font-size: 12px; font-weight: 700;
  text-decoration: none; margin-top: 4px;
  cursor: pointer; background: none; border: none; padding: 0;
  font-family: 'Inter', sans-serif;
}
.tip-action i { font-size: 11px; }
.tip-action:hover { text-decoration: underline; }

/* Tips CTA Banner */
.tips-cta {
  margin-top: 1.75rem;
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  border-radius: 12px; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.tips-cta-left { display: flex; align-items: center; gap: 14px; }
.tips-cta-icon {
  width: 44px; height: 44px; border-radius: 10px;
  background: rgba(255,255,255,.12); display: flex;
  align-items: center; justify-content: center;
  font-size: 20px; color: #fff; flex-shrink: 0;
}
.tips-cta-text h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px; font-weight: 800; color: #fff;
}
.tips-cta-text p { font-size: 12px; color: rgba(255,255,255,.75); margin-top: 2px; }
.tips-cta-btn {
  background: var(--p8); color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px; font-weight: 800;
  padding: 11px 22px; border-radius: 8px; border: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: all 180ms ease; white-space: nowrap; text-decoration: none;
  min-height: 44px;
}
.tips-cta-btn:hover { background: var(--p8h); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(191,10,48,.35); }


/* ============================================================
   SECTION 4: IRS MILEAGE RATE HISTORY
   ============================================================ */
.history-section {
  background: var(--bg-light);
  border-top: 1px solid var(--border);
  padding: clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem);
}
.history-container { max-width: 1100px; margin-inline: auto; }
.history-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 24px; align-items: start;
  margin-top: 1.75rem;
}
.history-table-wrap {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm);
}
.history-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
}
.history-table thead tr {
  background: var(--p1);
}
.history-table thead th {
  padding: 12px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .07em; text-transform: uppercase;
  color: #fff; text-align: left;
  border-right: 1px solid rgba(255,255,255,.12);
}
.history-table thead th:last-child { border-right: none; }
.history-table tbody tr { border-bottom: 1px solid var(--border); }
.history-table tbody tr:last-child { border-bottom: none; }
.history-table tbody tr:hover { background: #f0f4fb; }
.history-table tbody tr.current-yr { background: #eff6ff; }
.history-table tbody tr.current-yr td { font-weight: 700; }
.history-table tbody td {
  padding: 10px 14px; color: var(--charcoal);
  font-variant-numeric: tabular-nums;
  border-right: 1px solid var(--border);
}
.history-table tbody td:last-child { border-right: none; }
.current-yr-badge {
  display: inline-block; background: var(--p1); color: #fff;
  font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 9999px; margin-left: 6px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .05em; text-transform: uppercase;
  vertical-align: middle;
}
.rate-change {
  font-size: 11px; display: inline-flex; align-items: center; gap: 3px;
}
.rate-up   { color: var(--p9); }
.rate-down { color: var(--p8); }
.rate-same { color: var(--gray-text); }

/* Sidebar callout cards */
.history-sidebar { display: flex; flex-direction: column; gap: 14px; }
.hcall {
  background: #fff; border: 1px solid var(--border);
  border-radius: 12px; padding: 18px;
  box-shadow: var(--shadow-sm);
}
.hcall-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--gray-text); margin-bottom: 8px;
  display: flex; align-items: center; gap: 6px;
}
.hcall-label i { font-size: 11px; }
.hcall-label.green i { color: var(--p9); }
.hcall-label.red i   { color: var(--p8); }
.hcall-label.navy i  { color: var(--p1); }
.hcall-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.2rem; font-weight: 900;
  color: var(--p1); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.hcall-amount.green { color: var(--p9); }
.hcall-amount.red   { color: var(--p8); }
.hcall-sub { font-size: 12px; color: var(--gray-text); margin-top: 5px; line-height: 1.5; }
.hcall-divider { height: 1px; background: var(--border); margin: 10px 0; }
.hcall-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 4px 0;
}
.hcall-row .hlabel { color: var(--gray-text); font-weight: 500; }
.hcall-row .hval   { font-weight: 800; color: var(--charcoal); font-variant-numeric: tabular-nums; }
.hcall-row .hval.green { color: var(--p9); }


/* ============================================================
   SECTION 5: AVERAGE COMMUTE COST BY US CITY
   ============================================================ */
.city-section {
  background: var(--p1d);
  border-top: 3px solid var(--p8);
  padding: clamp(2rem,5vw,4rem) clamp(1rem,4vw,2rem);
}
.city-container { max-width: 1100px; margin-inline: auto; }
.city-section .section-eyebrow {
  background: rgba(255,255,255,.1); color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.15);
}
.city-section .section-h2 { color: #fff; }
.city-section .section-lead { color: rgba(255,255,255,.75); }

.city-search-wrap {
  position: relative; max-width: 360px; margin-bottom: 1.25rem;
}
.city-search-wrap i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: rgba(255,255,255,.5); font-size: 14px; pointer-events: none;
}
.city-search {
  width: 100%; height: 44px;
  padding: 0 14px 0 38px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; color: #fff;
  font-size: 13.5px; font-family: 'Inter', sans-serif;
  outline: none; transition: border-color 180ms;
}
.city-search::placeholder { color: rgba(255,255,255,.4); }
.city-search:focus { border-color: rgba(255,255,255,.5); }

.city-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.city-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; padding: 14px 16px;
  transition: background 180ms ease, transform 180ms ease;
  cursor: default;
}
.city-card:hover { background: rgba(255,255,255,.12); transform: translateY(-1px); }
.city-card.hidden { display: none; }
.city-top {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; margin-bottom: 10px;
}
.city-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px; font-weight: 800; color: #fff; line-height: 1.25;
}
.city-state { font-size: 11px; color: rgba(255,255,255,.55); font-weight: 500; margin-top: 1px; }
.city-rank-badge {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif; font-size: 11px; font-weight: 900;
  color: #fff;
}
.rank-gold   { background: #d97706; }
.rank-silver { background: #64748b; }
.rank-bronze { background: #b45309; }
.rank-default{ background: rgba(255,255,255,.15); }

.city-metrics {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px;
}
.city-metric { text-align: center; }
.city-metric-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px; font-weight: 900;
  color: #fff; font-variant-numeric: tabular-nums; line-height: 1.1;
}
.city-metric-val.amber { color: #fbbf24; }
.city-metric-val.red   { color: #f87171; }
.city-metric-val.green { color: #4ade80; }
.city-metric-lbl {
  font-size: 9.5px; color: rgba(255,255,255,.5);
  font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  margin-top: 2px;
}
.city-bar-wrap { margin-top: 10px; }
.city-bar-label {
  display: flex; justify-content: space-between;
  font-size: 10px; color: rgba(255,255,255,.5);
  margin-bottom: 4px;
}
.city-bar-track {
  height: 5px; background: rgba(255,255,255,.1);
  border-radius: 9999px; overflow: hidden;
}
.city-bar-fill { height: 100%; border-radius: 9999px; transition: width .4s ease; }
.fill-expensive { background: #f87171; }
.fill-moderate  { background: #fbbf24; }
.fill-affordable{ background: #4ade80; }

.city-legend {
  display: flex; gap: 16px; flex-wrap: wrap;
  margin-top: 1.25rem;
}
.city-legend-item {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: rgba(255,255,255,.65);
}
.city-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
}

/* No results message */
.city-no-results {
  grid-column: 1 / -1; text-align: center;
  padding: 40px 20px; color: rgba(255,255,255,.4);
  font-size: 14px; display: none;
}


/* ============================================================
   MOBILE RESPONSIVE — ALL SECTIONS
   ============================================================ */
@media (max-width: 900px) {
  .history-layout { grid-template-columns: 1fr; }
  .history-sidebar { flex-direction: row; flex-wrap: wrap; }
  .hcall { flex: 1 1 200px; }
}
@media (max-width: 768px) {
  .tips-cta { flex-direction: column; align-items: flex-start; }
  .qref-grid { grid-template-columns: repeat(2, 1fr); }
  .fuel-details-grid { grid-template-columns: 1fr 1fr; }
  .city-metrics { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
  .qref-grid { grid-template-columns: 1fr 1fr; }
  .fuel-details-grid { grid-template-columns: 1fr; }
  .tips-grid { grid-template-columns: 1fr; }
  .city-grid { grid-template-columns: 1fr; }
  .history-sidebar { flex-direction: column; }
  .hcall { flex: auto; }
  .tip-card { padding: 16px; }
  .city-card { padding: 12px 14px; }
  .tips-cta { padding: 16px; }
  .tips-cta-btn { width: 100%; justify-content: center; }
  .city-metrics { gap: 4px; }
  .city-metric-val { font-size: 13px; }
}
@media (max-width: 400px) {
  .qref-grid { grid-template-columns: 1fr; }
  .fuel-details-grid { grid-template-columns: 1fr; }
}
/* ========================================================
   EXAMPLES SECTION — WRAPPER
   ======================================================== */
.rex-section {
  background: #f7f8fa;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-top: 3px solid #e8eaf0;
}
.rex-container {
  max-width: 1100px;
  margin-inline: auto;
}

/* ---- Eyebrow + Heading ---- */
.rex-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #fff1f2;
  color: var(--p8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #fecdd3;
  margin-bottom: 0.85rem;
}
.rex-section > .rex-container > h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.rex-intro {
  font-size: 1rem;
  color: #4a5568;
  max-width: 72ch;
  line-height: 1.7;
  margin-bottom: 2rem;
}
.rex-intro strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   EXAMPLE CARD — MASTER COMPONENT
   ======================================================== */
.rex-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 24px;
  transition: box-shadow 200ms ease;
}
.rex-card:hover {
  box-shadow: 0 6px 28px rgba(0,40,104,.12);
}
.rex-card:last-child { margin-bottom: 0; }

/* ---- Card Header (gradient) ---- */
.rex-card-header {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  color: #fff;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  border-bottom: 3px solid var(--p8);
  position: relative;
  overflow: hidden;
}
.rex-card-header::before {
  content: '';
  position: absolute;
  top: -40px; right: -30px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(191,10,48,0.12) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}
.rex-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
}
.rex-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: rgba(255,255,255,.12);
  border: 1.5px solid rgba(255,255,255,.2);
  flex-shrink: 0;
}
.rex-header-info h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
}
.rex-header-info .rex-subtitle {
  font-size: 12px;
  color: rgba(255,255,255,.7);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rex-header-info .rex-subtitle i { font-size: 10px; }
.rex-header-badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 1;
}
.rex-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  color: #fff;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.rex-badge i { font-size: 9px; }
.rex-badge.fuel-gas   i { color: #f87171; }
.rex-badge.fuel-ev    i { color: #a78bfa; }
.rex-badge.fuel-hybrid i { color: #4ade80; }


/* ---- Card Body ---- */
.rex-card-body {
  padding: 20px 22px;
}

/* ---- Profile Grid (vehicle + commute details) ---- */
.rex-profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.rex-profile-col {
  padding: 0;
}
.rex-profile-col-header {
  background: var(--bg-light);
  padding: 8px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p1);
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}
.rex-profile-col-header i { color: var(--p9); font-size: 11px; }
.rex-profile-col:first-child {
  border-right: 1px solid var(--border);
}
.rex-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 14px;
  font-size: 12.5px;
  border-bottom: 1px dashed #f1f5f9;
}
.rex-data-row:last-child { border-bottom: none; }
.rex-data-row .rd-label {
  color: var(--gray-text);
  font-weight: 500;
}
.rex-data-row .rd-val {
  font-weight: 700;
  color: var(--charcoal);
  font-variant-numeric: tabular-nums;
}


/* ---- KPI Strip (3 values) ---- */
.rex-kpi-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 16px;
}
.rex-kpi {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
}
.rex-kpi .kpi-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 4px;
}
.rex-kpi .kpi-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.rex-kpi.daily  .kpi-val { color: var(--p9); }
.rex-kpi.monthly .kpi-val { color: var(--p1); }
.rex-kpi.annual .kpi-val { color: var(--p8); }


/* ---- Cost Breakdown Bars ---- */
.rex-bars {
  margin-bottom: 16px;
}
.rex-bars-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--p1);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.rex-bars-title i { color: var(--p9); font-size: 12px; }
.rex-bar-row {
  margin-bottom: 8px;
}
.rex-bar-top {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 3px;
}
.rex-bar-top .bar-label { color: var(--charcoal); }
.rex-bar-top .bar-val {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}
.rex-bar-track {
  height: 7px;
  background: var(--border);
  border-radius: 9999px;
  overflow: hidden;
}
.rex-bar-fill {
  height: 100%;
  border-radius: 9999px;
  transition: width 400ms ease;
}


/* ---- Total Cost Line ---- */
.rex-total-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  background: var(--p1);
  border-radius: 10px;
  margin-bottom: 16px;
}
.rex-total-line .tl-label {
  color: rgba(255,255,255,.85);
  font-size: 12.5px;
  font-weight: 700;
}
.rex-total-line .tl-val {
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}


/* ---- Insight Box ---- */
.rex-insight {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.rex-insight i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.rex-insight.green {
  background: #e8f4f5;
  border: 1px solid #c3e6cb;
  color: #1a4731;
}
.rex-insight.green i { color: var(--p9); }
.rex-insight.amber {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.rex-insight.amber i { color: #d97706; }
.rex-insight.blue {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--p1);
}
.rex-insight.blue i { color: var(--p1); }
.rex-insight strong { font-weight: 700; }
.rex-insight code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
}
.rex-insight.green code { background: #d1fae5; }
.rex-insight.amber code { background: #fef3c7; }
.rex-insight.blue code  { background: #dbeafe; }


/* ---- Cost-per-mile badge ---- */
.rex-cpm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 14px;
}
.rex-cpm-row .cpm-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-text);
}
.rex-cpm-row .cpm-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}
.rex-cpm-row .cpm-vs {
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 9999px;
  white-space: nowrap;
}
.rex-cpm-row .cpm-vs.under { background: #dcfce7; color: #166534; }
.rex-cpm-row .cpm-vs.over  { background: #ffe4e6; color: #881337; }


/* ========================================================
   COMPARISON SUMMARY TABLE (after all 5 cards)
   ======================================================== */
.rex-summary-wrap {
  margin-top: 2.5rem;
}
.rex-summary-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.rex-summary-icon {
  width: 34px; height: 34px;
  background: var(--p1);
  color: #fff;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.rex-summary-header h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 800;
  color: var(--p1);
}
.rex-summary-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  box-shadow: var(--shadow-md);
  margin-bottom: 1.5rem;
}
.rex-summary-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.rex-summary-table th {
  background: var(--p1);
  color: #fff;
  padding: 11px 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
}
.rex-summary-table th:first-child { border-radius: 8px 0 0 0; }
.rex-summary-table th:last-child  { border-radius: 0 8px 0 0; }
.rex-summary-table td {
  padding: 10px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.rex-summary-table tr:last-child td { border-bottom: none; }
.rex-summary-table tr:hover td { background: #fafbff; }
.rex-summary-table .name-cell {
  font-weight: 700;
  color: var(--p1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.rex-summary-table .name-cell i { font-size: 12px; }
.rex-summary-table tr.cheapest td {
  background: #dcfce7;
  font-weight: 700;
  color: #166534;
}
.rex-summary-table tr.priciest td {
  background: #fff1f2;
  font-weight: 700;
  color: #881337;
}
.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 9999px;
}
.rank-badge.cheapest { background: var(--p9); color: #fff; }
.rank-badge.priciest { background: var(--p8); color: #fff; }


/* ---- Bottom CTA callout ---- */
.rex-cta-box {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  border-radius: 10px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  border: 3px solid var(--p8);
}
.rex-cta-box i {
  font-size: 22px;
  flex-shrink: 0;
  opacity: 0.85;
}
.rex-cta-box p {
  font-size: 13.5px;
  line-height: 1.6;
}
.rex-cta-box strong {
  font-weight: 700;
}


/* ========================================================
   MOBILE RESPONSIVE
   ======================================================== */
@media (max-width: 900px) {
  .rex-profile-grid { grid-template-columns: 1fr; }
  .rex-profile-col:first-child { border-right: none; border-bottom: 1px solid var(--border); }
}

@media (max-width: 768px) {
  .rex-kpi-strip { grid-template-columns: 1fr; }
  .rex-card-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .rex-summary-table { font-size: 11.5px; }
  .rex-summary-table th,
  .rex-summary-table td { padding: 8px 10px; }
  .rex-cpm-row { flex-wrap: wrap; gap: 6px; }
}

@media (max-width: 600px) {
  .rex-section { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.25rem); }
  .rex-card-body { padding: 16px; }
  .rex-card-header { padding: 14px 16px; }
  .rex-kpi .kpi-val { font-size: 17px; }
  .rex-total-line .tl-val { font-size: 17px; }
  .rex-total-line { padding: 10px 14px; }
  .rex-cta-box { flex-direction: column; text-align: center; }
}

/* ========================================================
   PRO TIPS SECTION — WRAPPER
   ======================================================== */
.tips-section {
  background: #f7f8fa;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 2rem);
  border-top: 3px solid #e8eaf0;
}
.tips-container {
  max-width: 1100px;
  margin-inline: auto;
}

/* ---- Eyebrow + Heading ---- */
.tips-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #ecfdf5;
  color: var(--p9);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding: 0.3rem 0.9rem;
  border-radius: 9999px;
  border: 1px solid #a7f3d0;
  margin-bottom: 0.85rem;
}
.tips-section > .tips-container > h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  color: var(--p1);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.tips-intro {
  font-size: 1rem;
  color: #4a5568;
  max-width: 72ch;
  line-height: 1.7;
  margin-bottom: 2.5rem;
}
.tips-intro strong { color: var(--p1); font-weight: 700; }


/* ========================================================
   TIP CARD — MASTER COMPONENT
   ======================================================== */
.tip-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-bottom: 28px;
  transition: box-shadow 250ms ease, transform 250ms ease;
  position: relative;
}
.tip-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}
.tip-card:last-of-type { margin-bottom: 0; }

/* ---- Card Accent Bar (top) ---- */
.tip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
}
.tip-card[data-accent="navy"]::before   { background: linear-gradient(90deg, var(--p1) 0%, #1a4a8a 100%); }
.tip-card[data-accent="green"]::before  { background: linear-gradient(90deg, var(--p9) 0%, #34d399 100%); }
.tip-card[data-accent="red"]::before    { background: linear-gradient(90deg, var(--p8) 0%, #f87171 100%); }
.tip-card[data-accent="purple"]::before { background: linear-gradient(90deg, #7c3aed 0%, #a78bfa 100%); }
.tip-card[data-accent="amber"]::before  { background: linear-gradient(90deg, #d97706 0%, #fbbf24 100%); }


/* ---- Card Header ---- */
.tip-header {
  padding: 22px 24px 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.tip-number {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 900;
  color: var(--white);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.tip-number::after {
  content: '';
  position: absolute;
  top: -10px; right: -10px;
  width: 30px; height: 30px;
  background: rgba(255,255,255,.15);
  border-radius: 50%;
}
.tip-card[data-accent="navy"]   .tip-number { background: var(--p1); }
.tip-card[data-accent="green"]  .tip-number { background: var(--p9); }
.tip-card[data-accent="red"]    .tip-number { background: var(--p8); }
.tip-card[data-accent="purple"] .tip-number { background: #7c3aed; }
.tip-card[data-accent="amber"]  .tip-number { background: #d97706; }

.tip-header-text h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.2rem);
  font-weight: 800;
  color: var(--charcoal);
  line-height: 1.25;
  margin-bottom: 4px;
}
.tip-header-text .tip-tagline {
  font-size: 13px;
  color: var(--gray-text);
  font-weight: 500;
  line-height: 1.5;
}

/* ---- Source Badge ---- */
.tip-source {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  margin-top: 6px;
  white-space: nowrap;
}
.tip-source.aaa    { background: #eff6ff; color: var(--p1); border: 1px solid #bfdbfe; }
.tip-source.irs    { background: #ecfdf5; color: var(--p9); border: 1px solid #a7f3d0; }
.tip-source.expert { background: #faf5ff; color: #7c3aed; border: 1px solid #ddd6fe; }
.tip-source.data   { background: #fff7ed; color: #c2410c; border: 1px solid #fed7aa; }
.tip-source.epa    { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }


/* ---- Card Body ---- */
.tip-body {
  padding: 18px 24px 24px;
}


/* ---- Explanation Paragraph ---- */
.tip-explain {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 18px;
  max-width: 72ch;
}
.tip-explain strong { color: var(--charcoal); font-weight: 700; }


/* ---- Savings Math Box ---- */
.tip-math-box {
  background: var(--bg-light);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.tip-math-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--p1);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-math-title i { font-size: 12px; }
.tip-card[data-accent="navy"]   .tip-math-title { color: var(--p1); }
.tip-card[data-accent="green"]  .tip-math-title { color: var(--p9); }
.tip-card[data-accent="red"]    .tip-math-title { color: var(--p8); }
.tip-card[data-accent="purple"] .tip-math-title { color: #7c3aed; }
.tip-card[data-accent="amber"]  .tip-math-title { color: #d97706; }

/* ---- Formula Steps ---- */
.tip-formula {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.tip-formula-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.5;
}
.tip-formula-step .step-icon {
  width: 22px; height: 22px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
  flex-shrink: 0;
  color: var(--white);
}
.tip-card[data-accent="navy"]   .step-icon { background: var(--p1); }
.tip-card[data-accent="green"]  .step-icon { background: var(--p9); }
.tip-card[data-accent="red"]    .step-icon { background: var(--p8); }
.tip-card[data-accent="purple"] .step-icon { background: #7c3aed; }
.tip-card[data-accent="amber"]  .step-icon { background: #d97706; }

.tip-formula-step .step-text {
  color: #374151;
  font-weight: 500;
}
.tip-formula-step .step-text code {
  font-family: 'SF Mono', 'Cascadia Code', 'Consolas', monospace;
  font-size: 12px;
  background: #e0e7ff;
  color: var(--p1);
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 600;
}

/* ---- Savings Result Bar ---- */
.tip-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  color: var(--white);
  gap: 12px;
  flex-wrap: wrap;
}
.tip-card[data-accent="navy"]   .tip-result { background: var(--p1); }
.tip-card[data-accent="green"]  .tip-result { background: var(--p9); }
.tip-card[data-accent="red"]    .tip-result { background: var(--p8); }
.tip-card[data-accent="purple"] .tip-result { background: #7c3aed; }
.tip-card[data-accent="amber"]  .tip-result { background: #d97706; }

.tip-result .result-label {
  font-size: 12px;
  font-weight: 600;
  opacity: .9;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-result .result-label i { font-size: 13px; }
.tip-result .result-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
}


/* ---- Action Checklist ---- */
.tip-actions {
  margin-top: 18px;
}
.tip-actions-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gray-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tip-actions-title i { font-size: 11px; }
.tip-action-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed #f1f5f9;
  font-size: 13px;
  line-height: 1.55;
  color: #374151;
}
.tip-action-item:last-child { border-bottom: none; }
.tip-action-item .action-check {
  width: 20px; height: 20px;
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px;
  flex-shrink: 0;
  margin-top: 1px;
}
.tip-card[data-accent="navy"]   .action-check { background: #eff6ff; color: var(--p1); }
.tip-card[data-accent="green"]  .action-check { background: #ecfdf5; color: var(--p9); }
.tip-card[data-accent="red"]    .action-check { background: #fff1f2; color: var(--p8); }
.tip-card[data-accent="purple"] .action-check { background: #faf5ff; color: #7c3aed; }
.tip-card[data-accent="amber"]  .action-check { background: #fffbeb; color: #d97706; }

.tip-action-item strong { color: var(--charcoal); font-weight: 700; }


/* ---- Quick Stat Trio (inline KPIs) ---- */
.tip-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.tip-stat {
  background: var(--bg-light);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 10px;
  text-align: center;
}
.tip-stat .ts-val {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-bottom: 3px;
}
.tip-stat .ts-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-text);
  letter-spacing: .02em;
}
.tip-card[data-accent="navy"]   .tip-stat .ts-val { color: var(--p1); }
.tip-card[data-accent="green"]  .tip-stat .ts-val { color: var(--p9); }
.tip-card[data-accent="red"]    .tip-stat .ts-val { color: var(--p8); }
.tip-card[data-accent="purple"] .tip-stat .ts-val { color: #7c3aed; }
.tip-card[data-accent="amber"]  .tip-stat .ts-val { color: #d97706; }


/* ---- Comparison Mini-Table ---- */
.tip-compare {
  border: 1.5px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 18px;
}
.tip-compare table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tip-compare th {
  padding: 9px 14px;
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.tip-card[data-accent="navy"]   .tip-compare th { background: var(--p1); color: #fff; }
.tip-card[data-accent="green"]  .tip-compare th { background: var(--p9); color: #fff; }
.tip-card[data-accent="red"]    .tip-compare th { background: var(--p8); color: #fff; }
.tip-card[data-accent="purple"] .tip-compare th { background: #7c3aed; color: #fff; }
.tip-card[data-accent="amber"]  .tip-compare th { background: #d97706; color: #fff; }

.tip-compare td {
  padding: 8px 14px;
  border-bottom: 1px solid #f1f5f9;
  font-variant-numeric: tabular-nums;
}
.tip-compare tr:last-child td { border-bottom: none; }
.tip-compare tr:hover td { background: #fafbff; }
.tip-compare .winner-cell {
  font-weight: 700;
}


/* ---- Pro Tip Callout ---- */
.tip-callout {
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 12.5px;
  line-height: 1.6;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
}
.tip-callout i { font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.tip-callout strong { font-weight: 700; }
.tip-callout.navy {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--p1);
}
.tip-callout.navy i { color: var(--p1); }
.tip-callout.green {
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  color: #065f46;
}
.tip-callout.green i { color: var(--p9); }
.tip-callout.amber {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #78350f;
}
.tip-callout.amber i { color: #d97706; }


/* ========================================================
   BOTTOM CTA
   ======================================================== */
.tips-cta {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p1d) 100%);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  color: #fff;
  border: 3px solid var(--p8);
  margin-top: 2.5rem;
  position: relative;
  overflow: hidden;
}
.tips-cta::before {
  content: '';
  position: absolute;
  top: -50px; right: -30px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(191,10,48,.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.tips-cta .cta-icon {
  width: 48px; height: 48px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
  z-index: 1;
}
.tips-cta .cta-text {
  z-index: 1;
}
.tips-cta .cta-text p {
  font-size: 14px;
  line-height: 1.65;
}
.tips-cta strong { font-weight: 700; }


/* ========================================================
   RESPONSIVE
   ======================================================== */
@media (max-width: 768px) {
  .tip-stats { grid-template-columns: 1fr; }
  .tip-header { flex-direction: column; gap: 10px; }
  .tip-result .result-val { font-size: 18px; }
  .tip-compare table { font-size: 11.5px; }
  .tip-compare th,
  .tip-compare td { padding: 7px 10px; }
}
@media (max-width: 600px) {
  .tips-section { padding: clamp(1.5rem, 4vw, 2.5rem) clamp(0.75rem, 3vw, 1.25rem); }
  .tip-header { padding: 18px 16px 0; }
  .tip-body { padding: 14px 16px 20px; }
  .tip-math-box { padding: 12px 14px; }
  .tip-stat .ts-val { font-size: 17px; }
  .tips-cta { flex-direction: column; text-align: center; padding: 18px; }
}

/* ========================================================
   FAQ SECTION WRAPPER
   ======================================================== */
.faq-section{
  background:#f7f8fa;
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem);
  border-top:3px solid #e8eaf0;
}
.faq-container{
  max-width:1100px;
  margin-inline:auto;
}

/* ---- Eyebrow + Heading ---- */
.faq-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:#eff6ff;color:var(--p1);
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .9rem;border-radius:9999px;border:1px solid #bfdbfe;
  margin-bottom:.85rem;
}
.faq-section>.faq-container>h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
  color:var(--p1);line-height:1.2;margin-bottom:.75rem;
}
.faq-intro{
  font-size:1rem;color:#4a5568;max-width:72ch;line-height:1.7;margin-bottom:1.5rem;
}
.faq-intro strong{color:var(--p1);font-weight:700}


/* ========================================================
   CATEGORY NAV PILLS
   ======================================================== */
.faq-nav{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:2rem;
}
.faq-pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:9999px;
  font-size:12.5px;font-weight:700;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--gray-text);cursor:pointer;
  transition:all 180ms ease;
  text-decoration:none;
}
.faq-pill i{font-size:11px}
.faq-pill:hover,.faq-pill.active{
  border-color:var(--p1);color:var(--p1);background:#eff6ff;
}
.faq-pill[data-cat="fuel"]:hover,.faq-pill[data-cat="fuel"].active{
  border-color:var(--p8);color:var(--p8);background:#fff1f2;
}
.faq-pill[data-cat="irs"]:hover,.faq-pill[data-cat="irs"].active{
  border-color:var(--p9);color:var(--p9);background:#ecfdf5;
}
.faq-pill[data-cat="ev"]:hover,.faq-pill[data-cat="ev"].active{
  border-color:#7c3aed;color:#7c3aed;background:#faf5ff;
}
.faq-pill[data-cat="savings"]:hover,.faq-pill[data-cat="savings"].active{
  border-color:#d97706;color:#d97706;background:#fffbeb;
}


/* ========================================================
   CATEGORY GROUP
   ======================================================== */
.faq-group{margin-bottom:2.5rem}
.faq-group-header{
  display:flex;align-items:center;gap:10px;
  margin-bottom:14px;padding-bottom:10px;
  border-bottom:2px solid var(--border);
}
.faq-group-icon{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#fff;flex-shrink:0;
}
.faq-group[data-cat="fuel"]   .faq-group-icon{background:var(--p8)}
.faq-group[data-cat="irs"]    .faq-group-icon{background:var(--p9)}
.faq-group[data-cat="ev"]     .faq-group-icon{background:#7c3aed}
.faq-group[data-cat="savings"] .faq-group-icon{background:#d97706}
.faq-group-header h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1rem,2.5vw,1.2rem);font-weight:800;color:var(--p1);
}
.faq-group-header .faq-count{
  font-size:10px;font-weight:700;color:var(--gray-text);
  background:var(--bg-light);border:1px solid var(--border);
  padding:2px 8px;border-radius:9999px;margin-left:auto;white-space:nowrap;
}


/* ========================================================
   ACCORDION ITEM
   ======================================================== */
.faq-item{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:10px;
  margin-bottom:10px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 200ms ease;
}
.faq-item:hover{box-shadow:var(--shadow-md)}
.faq-item:last-child{margin-bottom:0}

/* Question Button */
.faq-q{
  width:100%;display:flex;align-items:center;gap:12px;
  padding:16px 20px;
  background:none;border:none;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  color:var(--charcoal);text-align:left;line-height:1.45;
  cursor:pointer;
  transition:background 150ms ease;
}
.faq-q:hover{background:#fafbff}
.faq-q .q-num{
  width:26px;height:26px;border-radius:7px;
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;
  font-size:10px;font-weight:900;color:#fff;flex-shrink:0;
}
.faq-group[data-cat="fuel"]   .q-num{background:var(--p8)}
.faq-group[data-cat="irs"]    .q-num{background:var(--p9)}
.faq-group[data-cat="ev"]     .q-num{background:#7c3aed}
.faq-group[data-cat="savings"] .q-num{background:#d97706}

.faq-q .q-text{flex:1}
.faq-q .q-arrow{
  width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--gray-text);
  transition:transform 300ms cubic-bezier(.16,1,.3,1);
  flex-shrink:0;
}
.faq-item.open .faq-q .q-arrow{transform:rotate(180deg)}
.faq-item.open .faq-q{
  border-bottom:1px solid var(--border);
}

/* Answer Panel */
.faq-a{
  max-height:0;overflow:hidden;
  transition:max-height 400ms cubic-bezier(.16,1,.3,1),padding 300ms ease;
  padding:0 20px;
}
.faq-item.open .faq-a{
  max-height:2000px;
  padding:16px 20px 20px;
}
.faq-a p{
  font-size:13.5px;color:#374151;line-height:1.75;margin-bottom:10px;max-width:72ch;
}
.faq-a p:last-child{margin-bottom:0}
.faq-a strong{color:var(--charcoal);font-weight:700}
.faq-a code{
  font-family:'SF Mono','Cascadia Code','Consolas',monospace;
  font-size:12px;background:#e0e7ff;color:var(--p1);
  padding:2px 7px;border-radius:4px;font-weight:600;
}
.faq-a ul{
  margin:8px 0 10px 0;padding-left:0;list-style:none;
}
.faq-a ul li{
  font-size:13px;color:#374151;line-height:1.65;
  padding:4px 0 4px 22px;
  position:relative;
}
.faq-a ul li::before{
  content:'\f00c';font-family:'Font Awesome 6 Free';font-weight:900;
  font-size:9px;position:absolute;left:0;top:7px;
}
.faq-group[data-cat="fuel"]    .faq-a ul li::before{color:var(--p8)}
.faq-group[data-cat="irs"]     .faq-a ul li::before{color:var(--p9)}
.faq-group[data-cat="ev"]      .faq-a ul li::before{color:#7c3aed}
.faq-group[data-cat="savings"] .faq-a ul li::before{color:#d97706}

/* Mini-table inside answer */
.faq-mini-table{
  width:100%;border-collapse:collapse;margin:10px 0;
  font-size:12px;border:1px solid var(--border);border-radius:6px;overflow:hidden;
}
.faq-mini-table th{
  padding:7px 12px;font-family:'Montserrat',sans-serif;
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  text-align:left;white-space:nowrap;color:#fff;
}
.faq-group[data-cat="fuel"]   .faq-mini-table th{background:var(--p8)}
.faq-group[data-cat="irs"]    .faq-mini-table th{background:var(--p9)}
.faq-group[data-cat="ev"]     .faq-mini-table th{background:#7c3aed}
.faq-group[data-cat="savings"] .faq-mini-table th{background:#d97706}
.faq-mini-table td{
  padding:6px 12px;border-bottom:1px solid #f1f5f9;
  font-variant-numeric:tabular-nums;
}
.faq-mini-table tr:last-child td{border-bottom:none}

/* Callout inside answer */
.faq-callout{
  border-radius:6px;padding:10px 14px;font-size:12px;line-height:1.6;
  display:flex;align-items:flex-start;gap:8px;margin-top:10px;
}
.faq-callout i{font-size:12px;flex-shrink:0;margin-top:2px}
.faq-callout.green{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46}
.faq-callout.green i{color:var(--p9)}
.faq-callout.amber{background:#fffbeb;border:1px solid #fde68a;color:#78350f}
.faq-callout.amber i{color:#d97706}
.faq-callout.blue{background:#eff6ff;border:1px solid #bfdbfe;color:var(--p1)}
.faq-callout.blue i{color:var(--p1)}
.faq-callout.red{background:#fff1f2;border:1px solid #fecdd3;color:#881337}
.faq-callout.red i{color:var(--p8)}


/* ========================================================
   BOTTOM CTA
   ======================================================== */
.faq-cta{
  background:linear-gradient(135deg,var(--p1) 0%,var(--p1d) 100%);
  border-radius:12px;padding:22px 26px;
  display:flex;align-items:center;gap:16px;
  color:#fff;border:3px solid var(--p8);
  margin-top:2.5rem;position:relative;overflow:hidden;
}
.faq-cta::before{
  content:'';position:absolute;top:-50px;right:-30px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(191,10,48,.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.faq-cta .cta-icon{
  width:48px;height:48px;background:rgba(255,255,255,.1);
  border:1.5px solid rgba(255,255,255,.2);border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;flex-shrink:0;z-index:1;
}
.faq-cta .cta-text{z-index:1}
.faq-cta .cta-text p{font-size:14px;line-height:1.65}
.faq-cta strong{font-weight:700}


/* ========================================================
   RESPONSIVE
   ======================================================== */
@media(max-width:768px){
  .faq-q{padding:14px 16px;font-size:13px;gap:10px}
  .faq-item.open .faq-a{padding:14px 16px 18px}
  .faq-a p{font-size:13px}
  .faq-mini-table{font-size:11px}
  .faq-mini-table th,.faq-mini-table td{padding:5px 8px}
  .faq-nav{gap:6px}
  .faq-pill{padding:6px 12px;font-size:11.5px}
}
@media(max-width:600px){
  .faq-section{padding:clamp(1.5rem,4vw,2.5rem) clamp(.75rem,3vw,1.25rem)}
  .faq-q .q-num{width:22px;height:22px;font-size:9px;border-radius:5px}
  .faq-cta{flex-direction:column;text-align:center;padding:18px}
}
/* ========================================================
   RELATED CALCULATORS SECTION
   ======================================================== */
.rc-section{
  background:linear-gradient(180deg,#f0f3f8 0%,#f7f8fa 100%);
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem);
  border-top:3px solid #e8eaf0;
}
.rc-container{
  max-width:1100px;
  margin-inline:auto;
}


/* ---- Section Header ---- */
.rc-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:#eff6ff;color:var(--p1);
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .9rem;border-radius:9999px;border:1px solid #bfdbfe;
  margin-bottom:.85rem;
}
.rc-section>.rc-container>h2{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
  color:var(--p1);line-height:1.2;margin-bottom:.75rem;
}
.rc-intro{
  font-size:1rem;color:#4a5568;max-width:72ch;line-height:1.7;margin-bottom:2rem;
}
.rc-intro strong{color:var(--p1);font-weight:700}


/* ---- Category Tabs ---- */
.rc-tabs{
  display:flex;flex-wrap:wrap;gap:8px;margin-bottom:1.8rem;
}
.rc-tab{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 16px;border-radius:9999px;
  font-size:12.5px;font-weight:700;
  border:1.5px solid var(--border);background:var(--white);
  color:var(--gray-text);cursor:pointer;
  transition:all 180ms ease;text-decoration:none;
}
.rc-tab i{font-size:11px}
.rc-tab:hover,.rc-tab.active{
  border-color:var(--p1);color:var(--p1);background:#eff6ff;
}


/* ========================================================
   CARD GRID
   ======================================================== */
.rc-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}


/* ========================================================
   CALCULATOR CARD
   ======================================================== */
.rc-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 280ms ease,transform 280ms ease,border-color 280ms ease;
  display:flex;flex-direction:column;
  text-decoration:none;color:inherit;
  position:relative;
}
.rc-card:hover{
  box-shadow:var(--shadow-lg);
  transform:translateY(-4px);
  border-color:var(--p1);
}

/* ---- Top Accent ---- */
.rc-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:4px;
}
.rc-card[data-color="navy"]::before   {background:linear-gradient(90deg,var(--p1),#1a4a8a)}
.rc-card[data-color="red"]::before    {background:linear-gradient(90deg,var(--p8),#f87171)}
.rc-card[data-color="green"]::before  {background:linear-gradient(90deg,var(--p9),#34d399)}
.rc-card[data-color="purple"]::before {background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.rc-card[data-color="amber"]::before  {background:linear-gradient(90deg,#d97706,#fbbf24)}
.rc-card[data-color="teal"]::before   {background:linear-gradient(90deg,#0891b2,#67e8f9)}
.rc-card[data-color="rose"]::before   {background:linear-gradient(90deg,#be123c,#fb7185)}
.rc-card[data-color="indigo"]::before {background:linear-gradient(90deg,#4338ca,#818cf8)}
.rc-card[data-color="emerald"]::before{background:linear-gradient(90deg,#047857,#6ee7b7)}

/* ---- Card Top: Icon + Category Badge ---- */
.rc-card-top{
  padding:18px 18px 0;
  display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
}
.rc-icon{
  width:44px;height:44px;border-radius:11px;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:var(--white);flex-shrink:0;
  position:relative;overflow:hidden;
}
.rc-icon::after{
  content:'';position:absolute;top:-8px;right:-8px;
  width:26px;height:26px;
  background:rgba(255,255,255,.15);border-radius:50%;
}
.rc-card[data-color="navy"]    .rc-icon{background:var(--p1)}
.rc-card[data-color="red"]     .rc-icon{background:var(--p8)}
.rc-card[data-color="green"]   .rc-icon{background:var(--p9)}
.rc-card[data-color="purple"]  .rc-icon{background:#7c3aed}
.rc-card[data-color="amber"]   .rc-icon{background:#d97706}
.rc-card[data-color="teal"]    .rc-icon{background:#0891b2}
.rc-card[data-color="rose"]    .rc-icon{background:#be123c}
.rc-card[data-color="indigo"]  .rc-icon{background:#4338ca}
.rc-card[data-color="emerald"] .rc-icon{background:#047857}

.rc-cat-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:6px;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
}
.rc-cat-badge.tax{background:#ecfdf5;color:var(--p9);border:1px solid #a7f3d0}
.rc-cat-badge.auto{background:#fff1f2;color:var(--p8);border:1px solid #fecdd3}
.rc-cat-badge.personal{background:#eff6ff;color:var(--p1);border:1px solid #bfdbfe}
.rc-cat-badge.mortgage{background:#faf5ff;color:#7c3aed;border:1px solid #ddd6fe}
.rc-cat-badge.invest{background:#fffbeb;color:#d97706;border:1px solid #fde68a}
.rc-cat-badge.business{background:#f0fdfa;color:#0891b2;border:1px solid #99f6e4}
.rc-cat-badge.credit{background:#fff1f2;color:#be123c;border:1px solid #fecdd3}
.rc-cat-badge.insurance{background:#eef2ff;color:#4338ca;border:1px solid #c7d2fe}


/* ---- Card Body ---- */
.rc-card-body{
  padding:14px 18px 0;flex:1;
}
.rc-card-body h3{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:800;
  color:var(--charcoal);line-height:1.3;margin-bottom:6px;
}
.rc-card:hover .rc-card-body h3{color:var(--p1)}
.rc-card-body p{
  font-size:12.5px;color:var(--gray-text);line-height:1.6;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}


/* ---- Card Features Mini List ---- */
.rc-features{
  padding:10px 18px 0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.rc-feat{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;font-weight:600;color:var(--gray-text);
  background:var(--bg-light);border:1px solid var(--border);
  padding:3px 8px;border-radius:5px;
  white-space:nowrap;
}
.rc-feat i{font-size:8px}
.rc-card[data-color="navy"]    .rc-feat i{color:var(--p1)}
.rc-card[data-color="red"]     .rc-feat i{color:var(--p8)}
.rc-card[data-color="green"]   .rc-feat i{color:var(--p9)}
.rc-card[data-color="purple"]  .rc-feat i{color:#7c3aed}
.rc-card[data-color="amber"]   .rc-feat i{color:#d97706}
.rc-card[data-color="teal"]    .rc-feat i{color:#0891b2}
.rc-card[data-color="rose"]    .rc-feat i{color:#be123c}
.rc-card[data-color="indigo"]  .rc-feat i{color:#4338ca}
.rc-card[data-color="emerald"] .rc-feat i{color:#047857}


/* ---- Card Footer (CTA row) ---- */
.rc-card-footer{
  padding:14px 18px 16px;
  margin-top:auto;
  display:flex;align-items:center;justify-content:space-between;
}
.rc-use-btn{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;
  padding:8px 16px;border-radius:8px;
  color:var(--white);border:none;cursor:pointer;
  transition:background 180ms ease,transform 150ms ease;
  text-decoration:none;
}
.rc-card[data-color="navy"]    .rc-use-btn{background:var(--p1)}
.rc-card[data-color="red"]     .rc-use-btn{background:var(--p8)}
.rc-card[data-color="green"]   .rc-use-btn{background:var(--p9)}
.rc-card[data-color="purple"]  .rc-use-btn{background:#7c3aed}
.rc-card[data-color="amber"]   .rc-use-btn{background:#d97706}
.rc-card[data-color="teal"]    .rc-use-btn{background:#0891b2}
.rc-card[data-color="rose"]    .rc-use-btn{background:#be123c}
.rc-card[data-color="indigo"]  .rc-use-btn{background:#4338ca}
.rc-card[data-color="emerald"] .rc-use-btn{background:#047857}
.rc-use-btn:hover{filter:brightness(.88);transform:translateY(-1px)}
.rc-use-btn i{font-size:10px}

.rc-free-tag{
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--p9);
  display:flex;align-items:center;gap:4px;
}
.rc-free-tag i{font-size:9px}


/* ---- "Hot" / "Popular" / "New" corner badges ---- */
.rc-corner{
  position:absolute;top:14px;right:14px;z-index:2;
  font-family:'Montserrat',sans-serif;
  font-size:9px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:5px;
  color:#fff;
}
.rc-corner.hot{background:var(--p8)}
.rc-corner.popular{background:var(--p1)}
.rc-corner.new{background:var(--p9)}
.rc-corner.top{background:#d97706}


/* ========================================================
   FEATURED / HERO CARD (first row, full width)
   ======================================================== */
.rc-featured{
  grid-column:1/-1;
  background:linear-gradient(135deg,var(--p1) 0%,var(--p1d) 100%);
  border:2px solid var(--p8);
  border-radius:14px;
  padding:28px 30px;
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:24px;
  color:#fff;
  text-decoration:none;
  position:relative;overflow:hidden;
  transition:box-shadow 280ms ease,transform 280ms ease;
}
.rc-featured::before{
  content:'';position:absolute;top:-60px;right:-40px;
  width:280px;height:280px;
  background:radial-gradient(circle,rgba(191,10,48,.15) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.rc-featured:hover{
  box-shadow:0 8px 36px rgba(0,40,104,.2);
  transform:translateY(-3px);
}
.rc-featured-left{z-index:1}
.rc-featured-badge{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  padding:4px 12px;border-radius:6px;
  font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:rgba(255,255,255,.85);margin-bottom:12px;
}
.rc-featured-badge i{font-size:9px;color:#fbbf24}
.rc-featured-left h3{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.1rem,2.5vw,1.4rem);font-weight:900;
  line-height:1.25;margin-bottom:8px;color:#fff;
}
.rc-featured-left p{
  font-size:13.5px;color:rgba(255,255,255,.8);line-height:1.65;
  max-width:60ch;margin-bottom:14px;
}
.rc-featured-feats{
  display:flex;flex-wrap:wrap;gap:6px;
}
.rc-featured-feats .rc-feat{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.85);
}
.rc-featured-feats .rc-feat i{color:#fbbf24}
.rc-featured-right{z-index:1;text-align:center}
.rc-featured-cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:14px 28px;border-radius:10px;
  background:var(--p8);color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:800;
  text-decoration:none;
  transition:background 180ms ease,transform 150ms ease;
  white-space:nowrap;
}
.rc-featured-cta:hover{background:var(--p8h);transform:translateY(-2px)}
.rc-featured-cta i{font-size:11px}


/* ========================================================
   VIEW ALL LINK
   ======================================================== */
.rc-view-all{
  text-align:center;margin-top:2rem;
}
.rc-view-all a{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 28px;border-radius:10px;
  background:var(--white);border:2px solid var(--p1);
  color:var(--p1);font-family:'Montserrat',sans-serif;
  font-size:13px;font-weight:800;
  text-decoration:none;
  transition:all 200ms ease;
}
.rc-view-all a:hover{
  background:var(--p1);color:#fff;transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.rc-view-all a i{font-size:11px}


/* ========================================================
   RESPONSIVE
   ======================================================== */
@media(max-width:960px){
  .rc-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .rc-featured{grid-template-columns:1fr;text-align:center}
  .rc-featured-left p{margin-inline:auto}
  .rc-featured-feats{justify-content:center}
  .rc-tabs{gap:6px}
  .rc-tab{padding:6px 12px;font-size:11.5px}
}
@media(max-width:600px){
  .rc-section{padding:clamp(1.5rem,4vw,2.5rem) clamp(.75rem,3vw,1.25rem)}
  .rc-grid{grid-template-columns:1fr;gap:14px}
  .rc-card-top{padding:14px 14px 0}
  .rc-card-body{padding:10px 14px 0}
  .rc-features{padding:8px 14px 0}
  .rc-card-footer{padding:12px 14px 14px}
  .rc-featured{padding:20px 18px}
}
/* ========================================================
   LEGAL & TRANSPARENCY SECTION
   ======================================================== */
.lt-section{
  background:linear-gradient(180deg,#f0f2f6 0%,#f7f8fa 100%);
  padding:clamp(2.5rem,6vw,5rem) clamp(1rem,4vw,2rem);
  border-top:3px solid #e8eaf0;
}
.lt-container{
  max-width:1100px;
  margin-inline:auto;
}


/* ---- Section Header ---- */
.lt-eyebrow{
  display:inline-flex;align-items:center;gap:6px;
  background:#fef2f2;color:var(--p8);
  font-size:.72rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:.3rem .9rem;border-radius:9999px;border:1px solid #fecaca;
  margin-bottom:.85rem;
}
.lt-section h2.lt-title{
  font-family:'Montserrat',sans-serif;
  font-size:clamp(1.4rem,3vw,2rem);font-weight:800;
  color:var(--p1);line-height:1.2;margin-bottom:.75rem;
}
.lt-intro{
  font-size:1rem;color:#4a5568;max-width:72ch;line-height:1.7;margin-bottom:2rem;
}
.lt-intro strong{color:var(--p1);font-weight:700}


/* ========================================================
   TOP BANNER — CRITICAL NOTICE
   ======================================================== */
.lt-banner{
  background:linear-gradient(135deg,var(--p1) 0%,var(--p1d) 100%);
  border-radius:14px;padding:24px 28px;
  display:flex;align-items:flex-start;gap:18px;
  margin-bottom:2rem;position:relative;overflow:hidden;
  border:2px solid var(--p8);
}
.lt-banner::before{
  content:'';position:absolute;top:-40px;right:-20px;
  width:200px;height:200px;
  background:radial-gradient(circle,rgba(191,10,48,.12) 0%,transparent 70%);
  border-radius:50%;pointer-events:none;
}
.lt-banner-icon{
  flex-shrink:0;width:48px;height:48px;border-radius:12px;
  background:rgba(191,10,48,.2);border:1px solid rgba(191,10,48,.3);
  display:flex;align-items:center;justify-content:center;
  font-size:22px;color:#fca5a5;
}
.lt-banner-text{flex:1;z-index:1}
.lt-banner-text h3{
  font-family:'Montserrat',sans-serif;
  font-size:15px;font-weight:800;color:#fff;margin-bottom:6px;
  display:flex;align-items:center;gap:8px;
}
.lt-banner-text h3 .lt-live-dot{
  width:8px;height:8px;border-radius:50%;background:#f87171;
  animation:lt-pulse 2s infinite;
}
@keyframes lt-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.lt-banner-text p{
  font-size:13.5px;color:rgba(255,255,255,.82);line-height:1.65;
}
.lt-banner-text p strong{color:#fff;font-weight:700}


/* ========================================================
   2-COL GRID — DISCLAIMER + TRANSPARENCY
   ======================================================== */
.lt-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin-bottom:2rem;
}


/* ========================================================
   PANEL CARD — Shared styles for both columns
   ======================================================== */
.lt-panel{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  display:flex;flex-direction:column;
}
.lt-panel-header{
  padding:20px 22px 16px;
  border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;gap:12px;
}
.lt-panel-icon{
  width:40px;height:40px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--white);flex-shrink:0;
}
.lt-panel-header h3{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:800;color:var(--charcoal);
}
.lt-panel-header h3 span{
  display:block;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;color:var(--gray-text);margin-top:2px;
}
.lt-panel-body{
  padding:18px 22px 22px;flex:1;
}


/* ---- Disclaimer Items ---- */
.lt-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;
  border-bottom:1px dashed #e8ebed;
}
.lt-item:last-child{border-bottom:none}
.lt-item-icon{
  width:32px;height:32px;border-radius:8px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:13px;
}
.lt-item-icon.warn{background:#fef2f2;color:var(--p8);border:1px solid #fecaca}
.lt-item-icon.info{background:#eff6ff;color:var(--p1);border:1px solid #bfdbfe}
.lt-item-icon.shield{background:#ecfdf5;color:var(--p9);border:1px solid #a7f3d0}
.lt-item-icon.lock{background:#faf5ff;color:#7c3aed;border:1px solid #ddd6fe}
.lt-item-text h4{
  font-family:'Montserrat',sans-serif;
  font-size:12.5px;font-weight:800;color:var(--charcoal);margin-bottom:3px;
}
.lt-item-text p{
  font-size:12.5px;color:var(--gray-text);line-height:1.6;
}
.lt-item-text p strong{color:var(--charcoal);font-weight:600}


/* ---- Editorial Transparency Items ---- */
.lt-edit-item{
  display:flex;align-items:flex-start;gap:12px;
  padding:12px 0;
  border-bottom:1px dashed #e8ebed;
}
.lt-edit-item:last-child{border-bottom:none}
.lt-edit-num{
  width:28px;height:28px;border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:900;
  color:var(--white);background:var(--p1);
}
.lt-edit-item h4{
  font-family:'Montserrat',sans-serif;
  font-size:12.5px;font-weight:800;color:var(--charcoal);margin-bottom:3px;
}
.lt-edit-item p{
  font-size:12.5px;color:var(--gray-text);line-height:1.6;
}
.lt-edit-item p strong{color:var(--charcoal);font-weight:600}


/* ========================================================
   AUTHORITY SOURCES — GOV LINKS GRID
   ======================================================== */
.lt-auth-header{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
}
.lt-auth-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--p1);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.lt-auth-header h3{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:800;color:var(--charcoal);
}
.lt-auth-header h3 span{
  display:block;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;color:var(--gray-text);margin-top:1px;
}

.lt-gov-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-bottom:2rem;
}
.lt-gov-card{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:12px;
  padding:18px;
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:var(--shadow-sm);
  transition:box-shadow 280ms ease,transform 280ms ease,border-color 280ms ease;
  position:relative;overflow:hidden;
}
.lt-gov-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
}
.lt-gov-card[data-dept="irs"]::before{background:linear-gradient(90deg,var(--p1),#1a4a8a)}
.lt-gov-card[data-dept="cfpb"]::before{background:linear-gradient(90deg,var(--p9),#34d399)}
.lt-gov-card[data-dept="ftc"]::before{background:linear-gradient(90deg,var(--p8),#f87171)}
.lt-gov-card[data-dept="dot"]::before{background:linear-gradient(90deg,#7c3aed,#a78bfa)}
.lt-gov-card[data-dept="eia"]::before{background:linear-gradient(90deg,#d97706,#fbbf24)}
.lt-gov-card[data-dept="fhfa"]::before{background:linear-gradient(90deg,#0891b2,#67e8f9)}

.lt-gov-card:hover{
  box-shadow:var(--shadow-lg);transform:translateY(-3px);border-color:var(--p1);
}
.lt-gov-card-top{
  display:flex;align-items:center;gap:10px;
}
.lt-gov-seal{
  width:38px;height:38px;border-radius:9px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;color:var(--white);
}
.lt-gov-card[data-dept="irs"]  .lt-gov-seal{background:var(--p1)}
.lt-gov-card[data-dept="cfpb"] .lt-gov-seal{background:var(--p9)}
.lt-gov-card[data-dept="ftc"]  .lt-gov-seal{background:var(--p8)}
.lt-gov-card[data-dept="dot"]  .lt-gov-seal{background:#7c3aed}
.lt-gov-card[data-dept="eia"]  .lt-gov-seal{background:#d97706}
.lt-gov-card[data-dept="fhfa"] .lt-gov-seal{background:#0891b2}

.lt-gov-card-top h4{
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:800;color:var(--charcoal);line-height:1.3;
}
.lt-gov-card-top h4 span{
  display:block;font-family:'Inter',sans-serif;
  font-size:10px;font-weight:600;color:var(--gray-text);margin-top:2px;
  letter-spacing:.02em;
}
.lt-gov-desc{
  font-size:11.5px;color:var(--gray-text);line-height:1.6;
}
.lt-gov-link{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:700;color:var(--p1);
  margin-top:auto;
}
.lt-gov-link i{font-size:9px;transition:transform 180ms ease}
.lt-gov-card:hover .lt-gov-link i{transform:translateX(3px)}
.lt-gov-badge{
  position:absolute;top:12px;right:12px;
  font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 7px;border-radius:4px;
}
.lt-gov-badge.official{background:#eff6ff;color:var(--p1);border:1px solid #bfdbfe}
.lt-gov-badge.regulatory{background:#ecfdf5;color:var(--p9);border:1px solid #a7f3d0}
.lt-gov-badge.data{background:#fffbeb;color:#d97706;border:1px solid #fde68a}


/* ========================================================
   DATA SOURCING — FORMULA ACCURACY TABLE
   ======================================================== */
.lt-table-wrap{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:14px;overflow:hidden;box-shadow:var(--shadow-sm);
  margin-bottom:2rem;
}
.lt-table-header{
  padding:18px 22px;
  border-bottom:1.5px solid var(--border);
  display:flex;align-items:center;gap:12px;
  background:var(--bg-light);
}
.lt-table-header-icon{
  width:36px;height:36px;border-radius:9px;
  background:var(--p9);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;
}
.lt-table-header h3{
  font-family:'Montserrat',sans-serif;
  font-size:14px;font-weight:800;color:var(--charcoal);
}
.lt-table-header h3 span{
  display:block;font-family:'Inter',sans-serif;
  font-size:11px;font-weight:500;color:var(--gray-text);margin-top:1px;
}
.lt-table{
  width:100%;border-collapse:collapse;
}
.lt-table thead th{
  font-family:'Montserrat',sans-serif;
  font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  color:var(--p1);
  padding:12px 16px;text-align:left;
  background:var(--bg-light);border-bottom:1.5px solid var(--border);
}
.lt-table tbody td{
  font-size:12.5px;color:var(--gray-text);
  padding:12px 16px;border-bottom:1px solid #f0f2f5;
  vertical-align:top;line-height:1.55;
}
.lt-table tbody tr:last-child td{border-bottom:none}
.lt-table tbody tr:hover{background:#fafbfc}
.lt-table .lt-td-label{
  font-weight:700;color:var(--charcoal);white-space:nowrap;
}
.lt-src-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:5px;
  font-size:9.5px;font-weight:700;letter-spacing:.03em;
  white-space:nowrap;
}
.lt-src-badge.gov{background:#eff6ff;color:var(--p1);border:1px solid #bfdbfe}
.lt-src-badge.industry{background:#ecfdf5;color:var(--p9);border:1px solid #a7f3d0}
.lt-src-badge.cfpb{background:#fef2f2;color:var(--p8);border:1px solid #fecaca}
.lt-update-badge{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:600;color:var(--p9);
}
.lt-update-badge i{font-size:8px}


/* ========================================================
   BOTTOM STRIP — OPERATOR + LAST UPDATE + FULL DISCLAIMER LINK
   ======================================================== */
.lt-bottom{
  background:var(--white);border:1.5px solid var(--border);
  border-radius:14px;box-shadow:var(--shadow-sm);
  padding:22px 24px;
  display:grid;grid-template-columns:1fr auto;
  align-items:center;gap:20px;
}
.lt-bottom-left{display:flex;flex-direction:column;gap:6px}
.lt-operator{
  display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--gray-text);
}
.lt-operator strong{color:var(--charcoal);font-weight:700}
.lt-operator-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:2px 8px;border-radius:5px;
  font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:#ecfdf5;color:var(--p9);border:1px solid #a7f3d0;
}
.lt-operator-badge i{font-size:8px}
.lt-meta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;
  font-size:11px;color:var(--gray-text);
}
.lt-meta-row span{display:inline-flex;align-items:center;gap:4px}
.lt-meta-row i{font-size:9px;color:var(--p1)}
.lt-bottom-right{
  display:flex;flex-direction:column;gap:8px;align-items:flex-end;
}
.lt-full-link{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 20px;border-radius:9px;
  background:var(--p1);color:#fff;
  font-family:'Montserrat',sans-serif;
  font-size:12px;font-weight:800;
  text-decoration:none;
  transition:background 180ms ease,transform 150ms ease;
}
.lt-full-link:hover{background:var(--p1d);transform:translateY(-2px)}
.lt-full-link i{font-size:10px}
.lt-ymyl-badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 10px;border-radius:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  background:#fef2f2;color:var(--p8);border:1px solid #fecaca;
}
.lt-ymyl-badge i{font-size:9px}


/* ========================================================
   RESPONSIVE
   ======================================================== */
@media(max-width:960px){
  .lt-grid{grid-template-columns:1fr}
  .lt-gov-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .lt-gov-grid{grid-template-columns:1fr}
  .lt-bottom{grid-template-columns:1fr;text-align:center}
  .lt-bottom-right{align-items:center}
  .lt-table-wrap{overflow-x:auto}
  .lt-table{min-width:640px}
}
@media(max-width:600px){
  .lt-section{padding:clamp(1.5rem,4vw,2.5rem) clamp(.75rem,3vw,1.25rem)}
  .lt-banner{flex-direction:column;gap:12px;padding:18px 16px}
  .lt-panel-header{padding:16px 16px 12px}
  .lt-panel-body{padding:14px 16px 18px}
  .lt-gov-card{padding:14px}
  .lt-meta-row{flex-direction:column;align-items:flex-start;gap:6px}
  .lt-bottom{padding:16px}
}