/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS & INTERACTIONS LAYER
   Pure CSS + vanilla JS — no external libraries
   GPU-only: transform, opacity, filter only
   ═══════════════════════════════════════════════════════════════ */

/* ── Accessibility: respect reduced motion ──── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── PART 1: Page Loader ───────────────────── */
#page-loader {
  position: fixed;
  inset: 0;
  background: #1B2E4B;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.loader-logo {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  animation: loader-pulse 1.2s ease-in-out infinite,
             loader-spin 3s linear infinite;
  display: block;
}

.loader-logo img {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: block;
}

/* Remove the old .loader-tn span style */
.loader-tn { display: none; }

.loader-bar {
  width: 160px;
  height: 3px;
  background: rgba(255,255,255,0.10);
  border-radius: 99px;
  overflow: hidden;
}

.loader-bar-fill {
  height: 100%;
  width: 0%;
  background: #22C55E;
  border-radius: 99px;
  transition: width 0.4s ease;
}

.loader-text {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.40);
  letter-spacing: 0.05em;
}

@keyframes loader-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(34,197,94,0.4); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 16px rgba(34,197,94,0); }
}

@keyframes loader-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ── PART 2: Scroll Entrance Reveals ────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.10s; }
.reveal-delay-2 { transition-delay: 0.20s; }
.reveal-delay-3 { transition-delay: 0.30s; }
.reveal-delay-4 { transition-delay: 0.40s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* ── PART 3: Parallax ───────────────────────── */
.hero-section {
  overflow: hidden;
  position: relative;
}

.hero-parallax-bg {
  position: absolute;
  inset: -20% 0;
  background: #1B2E4B;
  z-index: 0;
}

.hero-parallax-bg::after {
  content: '';
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 600px;
  background: radial-gradient(
    circle,
    rgba(34, 197, 94, 0.06) 0%,
    transparent 70%
  );
  border-radius: 50%;
}

.hero-section > *:not(.hero-parallax-bg):not(.hero-float-1):not(.hero-float-2):not(.hero-float-3) {
  position: relative;
  z-index: 1;
}

/* ── PART 4: 3D Card Tilt ──────────────────── */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.08s ease, box-shadow 0.3s ease;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,0.14),
              0 4px 16px rgba(0,0,0,0.08) !important;
}

.tilt-card .tilt-shine {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(255,255,255,0.06) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 2;
}

.tilt-card:hover .tilt-shine {
  opacity: 1;
}

/* ── PART 5: Hover Effects ──────────────────── */
nav a {
  position: relative;
  transition: color 0.2s ease;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: #22C55E;
  border-radius: 99px;
  transition: width 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

nav a:hover::after {
  width: 100%;
}

.btn-primary,
button[class*="primary"],
a[class*="primary"] {
  transition: transform 0.15s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.15s ease,
              background-color 0.12s ease;
  position: relative;
  overflow: hidden;
}

.btn-primary::before,
button[class*="primary"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}

.btn-primary:hover::before {
  width: 300px;
  height: 300px;
  opacity: 1;
}

.btn-primary:hover,
button[class*="primary"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(34,197,94,0.40);
}

.btn-primary:active,
button[class*="primary"]:active {
  transform: translateY(0px);
  box-shadow: 0 2px 8px rgba(34,197,94,0.20);
  transition-duration: 0.08s;
}

.deduction-pill {
  transition: transform 0.15s cubic-bezier(0.16,1,0.3,1),
              border-color 0.12s ease,
              color 0.12s ease,
              background-color 0.12s ease;
}

.deduction-pill:hover {
  transform: translateY(-2px);
  border-color: #22C55E;
  color: #15803D;
  background-color: #F0FDF4;
  box-shadow: 0 4px 12px rgba(34,197,94,0.15);
}

footer a {
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}

footer a:hover {
  color: #ffffff;
  transform: translateX(4px);
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1);
  flex-shrink: 0;
}

.logo-wrap:hover {
  transform: scale(1.04);
}

.logo-text {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.5px;
  line-height: 1;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 0;
}

.logo-tax {
  color: #ffffff;
}

.logo-ninja {
  color: #22C55E;
  position: relative;
}

/* Subtle underline accent on Ninja */
.logo-ninja::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: #22C55E;
  border-radius: 99px;
  opacity: 0.5;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1),
              opacity 0.25s ease;
}

.logo-wrap:hover .logo-ninja::after {
  transform: scaleX(1);
  opacity: 1;
}

/* Footer logo — slightly smaller */
footer .logo-text {
  font-size: 20px;
}

/* Mobile — slightly smaller logo text */
@media (max-width: 640px) {
  .logo-text {
    font-size: 19px;
  }
  
  .logo-wrap {
    gap: 10px;
  }
}

/* Very small screens */
@media (max-width: 374px) {
  .logo-text {
    font-size: 17px;
  }
}

.faq-item {
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item:hover {
  border-color: rgba(34,197,94,0.40);
  box-shadow: 0 2px 12px rgba(34,197,94,0.08);
}

.btn-copy {
  transition: background 0.18s ease,
              color 0.18s ease,
              transform 0.18s ease;
}

.btn-copy:hover {
  background: rgba(34,197,94,0.12);
  color: #22C55E;
  transform: scale(1.03);
}

.btn-copy.copied {
  background: #22C55E;
  color: #1B2E4B;
}

.blog-card {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.28s ease;
}

.blog-card:hover {
  transform: translateY(-6px);
}

.blog-card .read-more-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.blog-card:hover .read-more-arrow {
  transform: translateX(5px);
}

.deduction-result-card {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
}

.deduction-result-card:hover {
  transform: translateY(-3px);
  border-color: #22C55E;
  box-shadow: 0 8px 28px rgba(34,197,94,0.12);
}

.stat-number {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-number:hover {
  transform: scale(1.06);
}

/* ── PART 6: Micro-Interactions ─────────────── */
.form-group {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-group:focus-within {
  transform: translateY(-1px);
}

.custom-checkbox {
  transition: background-color 0.18s ease,
              border-color 0.18s ease,
              transform 0.15s ease;
}

.custom-checkbox:checked,
.custom-checkbox.checked {
  animation: checkbox-pop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes checkbox-pop {
  0% { transform: scale(0.8); }
  60% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.quiz-option {
  transition: transform 0.15s cubic-bezier(0.16,1,0.3,1),
              border-color 0.12s ease,
              background-color 0.12s ease;
}

.quiz-option.selected {
  animation: option-select 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes option-select {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

.progress-bar-fill {
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

.progress-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,0.35),
    transparent
  );
  animation: shimmer 1.8s ease infinite;
}

@keyframes shimmer {
  0% { left: -100%; }
  100% { left: 200%; }
}

.count-up {
  display: inline-block;
}

.results-header {
  animation: results-burst 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes results-burst {
  0% { transform: scale(0.85); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.quiz-step {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.quiz-step.exit-left {
  opacity: 0;
  transform: translateX(-40px);
  pointer-events: none;
}

.quiz-step.enter-right {
  animation: enter-from-right 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.quiz-step.enter-left {
  animation: enter-from-left 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes enter-from-right {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes enter-from-left {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}

.quarterly-card {
  animation: card-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.quarterly-card:nth-child(1) { animation-delay: 0.05s; }
.quarterly-card:nth-child(2) { animation-delay: 0.12s; }
.quarterly-card:nth-child(3) { animation-delay: 0.19s; }
.quarterly-card:nth-child(4) { animation-delay: 0.26s; }

@keyframes card-pop {
  0% { opacity: 0; transform: scale(0.88) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.deduction-result-card {
  opacity: 0;
  animation: slide-in-up 0.45s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.deduction-result-card:nth-child(1)  { animation-delay: 0.05s; }
.deduction-result-card:nth-child(2)  { animation-delay: 0.10s; }
.deduction-result-card:nth-child(3)  { animation-delay: 0.15s; }
.deduction-result-card:nth-child(4)  { animation-delay: 0.20s; }
.deduction-result-card:nth-child(5)  { animation-delay: 0.25s; }
.deduction-result-card:nth-child(6)  { animation-delay: 0.30s; }
.deduction-result-card:nth-child(7)  { animation-delay: 0.35s; }
.deduction-result-card:nth-child(8)  { animation-delay: 0.40s; }
.deduction-result-card:nth-child(9)  { animation-delay: 0.45s; }
.deduction-result-card:nth-child(10) { animation-delay: 0.50s; }

@keyframes slide-in-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
}

.faq-chevron {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.faq-item.open .faq-chevron,
.faq-accordion-item.open .faq-chevron {
  transform: rotate(180deg);
}

.mobile-nav-menu {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease;
  opacity: 0;
}

.mobile-nav-menu.open {
  max-height: 400px;
  opacity: 1;
}

@keyframes input-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.input-shake {
  animation: input-shake 0.4s ease;
}

.tooltip {
  opacity: 0;
  transform: translateY(4px) scale(0.96);
  transition: opacity 0.18s ease, transform 0.18s ease;
  pointer-events: none;
}

.tooltip.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── PART 8: Floating Hero Elements ─────────── */
.hero-float-1,
.hero-float-2,
.hero-float-3 {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.hero-float-1 {
  width: 280px;
  height: 280px;
  background: rgba(34,197,94,0.04);
  border: 1px solid rgba(34,197,94,0.08);
  top: -60px;
  right: -80px;
  animation: float-slow 9s ease-in-out infinite;
}

.hero-float-2 {
  width: 160px;
  height: 160px;
  background: rgba(34,197,94,0.03);
  border: 1px solid rgba(34,197,94,0.06);
  bottom: 40px;
  left: -40px;
  animation: float-slow 12s ease-in-out infinite reverse;
}

.hero-float-3 {
  width: 80px;
  height: 80px;
  background: transparent;
  border: 1.5px solid rgba(34,197,94,0.10);
  top: 40%;
  right: 15%;
  animation: float-slow 7s ease-in-out infinite;
  animation-delay: -3s;
}

@keyframes float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33% { transform: translateY(-16px) rotate(3deg); }
  66% { transform: translateY(8px) rotate(-2deg); }
}

/* ── PART 9: Ripple Keyframe ────────────────── */
@keyframes ripple-expand {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════
   TaxNinja — Design System v2
   taxninja.site
   ═══════════════════════════════════════════════════════════════ */

:root {
  --c-bg:           #FFFFFF;
  --c-surface:      #FFFFFF;
  --c-surface-2:    #F8FAFC;
  --c-navy:         #1B2E4B;
  --c-navy-2:       #16273F;
  --c-navy-3:       #0F1E32;
  --c-navy-dark:    #0F1E32;
  --c-navy-accent:  #90CDF4;
  --c-green:        #22C55E;
  --c-green-dark:   #16A34A;
  --c-green-glow:   rgba(34,197,94,0.18);
  --c-green-light:  #DCFCE7;
  --c-amber:        #D97706;
  --c-amber-light:  #FEF3C7;
  --c-red:          #C53030;
  --c-border:       #E2E8F0;
  --c-border-2:     #CBD5E0;
  --c-text:         #1B2E4B;
  --c-muted:        #4A5568;
  --c-light:        #718096;
  --c-lighter:      #A0AEC0;
  --c-bg-hover:     #F1F5F9;

  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Bricolage Grotesque', 'Inter', sans-serif;

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-card:     0 4px 6px rgba(0,0,0,0.04), 0 10px 15px rgba(0,0,0,0.06);
  --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.10), 0 20px 48px rgba(0,0,0,0.08);
  --shadow-green-glow: 0 4px 20px rgba(34,197,94,0.30);
  --shadow-input-focus: 0 0 0 4px rgba(34,197,94,0.12);

  --radius-card:  20px;
  --radius-input: 12px;
  --radius-badge:  6px;
  --radius-pill:  20px;
  --max-width:    1140px;
}

/* ─── Real dark mode (v12): variables flip; navy surfaces stay dark ─── */
[data-theme="dark"] {
  --c-bg:           #0F172A;
  --c-surface:      #1E293B;
  --c-surface-2:    #263348;
  --c-navy:         #16273F;
  --c-navy-2:       #1B2E4B;
  --c-navy-3:       #223454;
  --c-navy-dark:    #E2E8F0;
  --c-navy-accent:  #90CDF4;
  --c-green-light:  #14532D;
  --c-amber-light:  #451A03;
  --c-red:          #F87171;
  --c-border:       #2D3748;
  --c-border-2:     #243247;
  --c-text:         #E2E8F0;
  --c-muted:        #94A3B8;
  --c-light:        #64748B;
  --c-lighter:      #475569;
  --c-bg-hover:     #1E293B;
}

/* ─── Reset ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
  color: var(--c-muted);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-green); text-decoration: none; transition: color 0.15s; }
a:hover { color: var(--c-green-dark); }
h1,h2,h3,h4,h5,h6 { color: var(--c-text); line-height: 1.2; }
ul,ol { list-style: none; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input,select,textarea { font-family: inherit; font-size: inherit; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.text-green { color: var(--c-green) !important; }
.text-right { text-align: right; }

/* ═══════════════════════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 64px;
  background: var(--c-navy);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  display: flex;
  align-items: center;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.header-left { display: flex; align-items: center; gap: 14px; }

.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: var(--c-green);
  border-radius: 8px;
  color: #fff;
  font-weight: 800;
  font-size: 13px;
  font-family: var(--font-body);
  flex-shrink: 0;
}
.logo-accent { color: var(--c-green); font-weight: 700; font-size: 18px; }
.logo-domain { color: rgba(255,255,255,0.35); font-weight: 400; font-size: 14px; }

.header-badge {
  background: rgba(34,197,94,0.12);
  color: #22C55E;
  border: 1px solid rgba(34,197,94,0.3);
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-pill);
  padding: 6px 14px;
  white-space: nowrap;
}

.header-nav {
  display: flex;
  align-items: center;
  gap: 32px;
}
.header-nav a {
  color: rgba(255,255,255,0.70);
  font-weight: 500;
  font-size: 14px;
  transition: color 0.15s;
}
.header-nav a:hover { color: #fff; }

.mobile-menu-btn { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.hamburger-line {
  display: block; width: 22px; height: 2px;
  background: #fff; border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

.header-nav.open {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 64px;
  left: 0; right: 0;
  background: var(--c-navy);
  padding: 20px 24px;
  gap: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}

/* Trust strip — dark seamless bar with 3 trust signals */
.trust-strip {
  background: linear-gradient(90deg, #1B2E4B 0%, #16273F 50%, #1B2E4B 100%);
  border-bottom: 1px solid rgba(34, 197, 94, 0.10);
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 64px;
  position: relative;
  z-index: 999;
  overflow: hidden;
}
.trust-strip::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(34,197,94,0.25) 50%, transparent);
}
.trust-strip-items {
  display: flex;
  align-items: center;
  gap: 0;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.50);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding: 0 20px;
  transition: color 0.2s ease;
  position: relative;
}
.trust-item:hover {
  color: rgba(255, 255, 255, 0.80);
}
.trust-item svg {
  color: #22C55E;
  opacity: 0.75;
  flex-shrink: 0;
  transition: opacity 0.2s ease;
}
.trust-item:hover svg {
  opacity: 1;
}
.trust-divider {
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  flex-shrink: 0;
}
/* Legacy fallback if old HTML still used */
.trust-strip-text {
  font-weight: 500;
  font-size: 12.5px;
  color: rgba(255, 255, 255, 0.50);
  letter-spacing: 0.01em;
}
@media (max-width: 640px) {
  .trust-strip {
    height: 36px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .trust-strip::-webkit-scrollbar { display: none; }
  .trust-item {
    font-size: 10px;
    gap: 5px;
    padding: 0 10px;
  }
  .trust-item svg {
    width: 12px;
    height: 12px;
  }
  .trust-strip-text {
    font-size: 10px;
  }
}
@media (max-width: 374px) {
  .trust-item {
    font-size: 10px;
    padding: 0 6px;
    gap: 4px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  background: var(--c-navy);
  padding: 48px 0 48px;
  text-align: center;
  min-height: 560px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.hero-eyebrow {
  display: inline-block;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.25);
  color: #22C55E;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: var(--radius-pill);
  padding: 8px 20px;
  margin-bottom: 28px;
}
.hero-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.08;
  letter-spacing: -2px;
  color: #fff;
  max-width: 720px;
  margin: 0 auto 20px;
}
.hero-h1 .text-green, .hero-h1 .hero-green { color: var(--c-green); }
.hero-subtitle {
  font-size: 18px;
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.7;
}

.hero-trust-items {
 display: flex;
 justify-content: center;
 gap: 20px;
 margin-top: 20px;
 font-size: 14px;
 font-weight: 500;
 color: rgba(255,255,255,0.55);
}
.hero-trust-items span + span::before {
 content: '·';
 margin-right: 20px;
}

.hero-stats {
  display: flex;
 justify-content: center;
 align-items: center;
 gap: 0;
 margin-top: 32px;
}
.hero-stat {
 display: flex;
 flex-direction: column;
 align-items: center;
 padding: 0 40px;
}
.hero-stat + .hero-stat { border-left: 1px solid rgba(255,255,255,0.12); }
.hero-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 36px;
  color: var(--c-green);
  line-height: 1.2;
}
.hero-stat-label {
  font-size: 13px;
  color: rgba(255,255,255,0.50);
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   TOOL CARD (floats between hero & page)
   ═══════════════════════════════════════════════════════════════ */
.tool-float-wrapper {
  background: linear-gradient(to bottom, #1B2E4B 50%, #FFFFFF 50%);
  padding: 0 24px;
  position: relative;
  z-index: 2;
  margin-top: -8px;
}
.tool-float-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 24px;
  box-shadow:
    0 0 0 1px rgba(34,197,94,0.06),
    0 12px 48px rgba(0,0,0,0.10),
    0 4px 12px rgba(0,0,0,0.06),
    0 0 80px -20px rgba(34,197,94,0.15);
  max-width: 960px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.tool-float-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--c-green), #4ADE80, var(--c-green));
  background-size: 200% 100%;
  border-radius: 24px 24px 0 0;
  opacity: 0.85;
  z-index: 5;
}
.tool-float-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg, rgba(34,197,94,0.03) 0%, transparent 100%);
  pointer-events: none;
  z-index: 1;
  border-radius: 24px 24px 0 0;
}
.tool-trust-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 10px 24px 0;
  margin-top: -4px;
  position: relative;
  z-index: 2;
}
.tool-trust-bar span {
  font-size: 11px;
  color: var(--c-light);
  display: flex;
  align-items: center;
  gap: 5px;
}
.tool-trust-bar span svg {
  width: 12px;
  height: 12px;
  color: var(--c-green);
  flex-shrink: 0;
}
.tool-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 36px 40px 0;
  position: relative;
  z-index: 2;
}
.tool-header-title {
  font-weight: 700;
  font-size: 18px;
  color: var(--c-text);
  display: flex;
  align-items: center;
  gap: 10px;
}
.tool-header-title::before {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--c-green);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(34,197,94,0.5);
  flex-shrink: 0;
}

.step-tabs {
  display: flex;
  background: #F1F5F9;
  border-radius: 24px;
  padding: 4px;
  gap: 2px;
}
.step-pill {
  font-weight: 600;
  font-size: 13px;
  border-radius: var(--radius-pill);
  padding: 7px 18px;
  background: transparent;
  color: var(--c-light);
  transition: background-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
.step-pill:hover:not(.active) { color: var(--c-muted); background: rgba(0,0,0,0.03); }
.step-pill.active {
  background: var(--c-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(6,78,59,0.25);
}
.step-pill.done { background: var(--c-green-light); color: #15803D; }
.step-pill.done::before { content: '✓'; margin-right: 4px; font-size: 11px; }

/* Hidden progress bar — DOM needed for JS */
.progress-bar { display: none; }
.steps-viewport { overflow: visible; }
#steps-track { display: flex; transform: none !important; }
.step-panel { min-width: 100%; display: none; padding: 32px 0 0; }
.step-panel.active { display: block; }

.step-header { margin-bottom: 32px; }
.step-header h1, .step-header h2 {
  font-weight: 800;
  font-size: 26px;
  color: var(--c-text);
  margin-bottom: 8px;
  letter-spacing: -0.5px;
  line-height: 1.2;
}
.step-subtitle {
  font-size: 15px;
  color: #64748B;
  line-height: 1.6;
  max-width: 480px;
}

/* ─── Form Fields ─── */
.form-group { margin-bottom: 24px; }
.form-group label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--c-text);
  margin-bottom: 8px;
}
.form-group label::after {
  content: attr(data-hint);
  font-weight: 400;
  font-size: 12px;
  color: var(--c-light);
  margin-left: auto;
}

.input-currency-wrapper {
  position: relative;
}
.input-prefix {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  font-size: 22px;
  color: var(--c-light);
  pointer-events: none;
  transition: color 0.2s ease, transform 0.2s ease;
}
.input-currency-wrapper:focus-within .input-prefix {
  color: var(--c-green);
  transform: translateY(-50%) scale(1.05);
}
.input-currency, #gross-income, #w2-income {
  width: 100%;
  height: 60px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-input);
  padding: 0 18px 0 48px;
  font-weight: 700;
  font-size: 22px;
  color: var(--c-text);
  background: var(--c-surface);
  transition: border-color 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
  outline: none;
}
.input-currency:focus, #gross-income:focus, #w2-income:focus {
  border-color: var(--c-green);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.12), 0 4px 16px rgba(34,197,94,0.10);
  background: #FEFFFE;
}
.input-currency::placeholder, #gross-income::placeholder, #w2-income::placeholder {
  color: #CBD5E1;
  font-weight: 400;
  font-size: 18px;
}

select {
  width: 100%;
  height: 54px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-input);
  padding: 0 44px 0 16px;
  font-weight: 500;
  font-size: 15px;
  color: var(--c-text);
  background: var(--c-surface) url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2394A3B8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
  appearance: none; -webkit-appearance: none;
  cursor: pointer; outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
select:hover { border-color: #CBD5E1; }
select:focus { border-color: var(--c-green); box-shadow: 0 0 0 4px rgba(34,197,94,0.12); background-color: #FEFFFE; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.toggle-group { display: flex; gap: 8px; }
.toggle-btn {
  height: 44px;
  min-width: 80px;
  padding: 0 24px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 14px;
  color: var(--c-muted);
  background: #F1F5F9;
  border: 2px solid transparent;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.toggle-btn:hover { border-color: var(--c-border); background: #E8ECF1; }
.toggle-btn.active {
  background: var(--c-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(6,78,59,0.20);
}

.field-error { display: block; font-size: 12px; color: var(--c-red); margin-top: 6px; min-height: 18px; font-weight: 500; }
.step-actions { display: flex; gap: 12px; margin-top: 28px; padding-bottom: 36px; }

/* ─── Buttons ─── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 36px;
  background: linear-gradient(180deg, #34D399 0%, #16A34A 100%);
  color: var(--c-navy);
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-input);
  box-shadow:
    0 2px 4px rgba(34,197,94,0.20),
    0 8px 24px rgba(34,197,94,0.30),
    inset 0 1px 0 rgba(255,255,255,0.20);
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}
.btn-primary:hover {
  background: linear-gradient(180deg, #4ADE80 0%, #22C55E 100%);
  transform: translateY(-2px);
  box-shadow:
    0 4px 8px rgba(34,197,94,0.25),
    0 12px 32px rgba(34,197,94,0.35),
    inset 0 1px 0 rgba(255,255,255,0.25);
}
.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(34,197,94,0.20);
  transition-duration: 0.08s;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 20px;
  background: var(--c-surface);
  color: var(--c-muted);
  font-weight: 600;
  font-size: 14px;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-input);
  transition: all 0.15s;
}
.btn-secondary:hover { border-color: var(--c-light); color: var(--c-text); }
.btn-lg { height: 60px; min-width: 260px; font-size: 16px; padding: 0 40px; }
.btn-icon { margin-right: 6px; }

/* ─── Step 2 Layout ─── */
.step2-layout { display: grid; grid-template-columns: 1fr 260px; gap: 28px; align-items: start; }
.step2-categories { min-width: 0; }
.step2-sidebar { position: relative; }
.sidebar-summary { position: sticky; top: 100px; }

/* Card generic */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.card h3 { font-weight: 700; font-size: 20px; margin-bottom: 16px; }

.stat-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
}
.stat-row:last-child { border-bottom: none; }
.stat-row.highlight {
  background: #F8FAFC;
  margin: 0 -32px;
  padding: 16px 32px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.stat-label { font-size: 14px; color: var(--c-muted); }
.stat-value { font-weight: 700; font-size: 18px; color: var(--c-text); }

.categories-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  align-items: start;
}

/* Deduction cards (rendered by JS) */
.deduction-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.deduction-card:hover { border-color: #CBD5E1; }
.deduction-card.active { border-color: var(--c-green); box-shadow: 0 0 0 1px rgba(34,197,94,0.12); }
.deduction-card-header {
  display: flex;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  gap: 10px;
}
.deduction-card-header label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  cursor: pointer;
  flex: 1;
}
.deduction-card-header label strong {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-text);
  line-height: 1.3;
}
.deduction-card-header label span {
  font-size: 11px;
  opacity: 0.45;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-checkbox {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 2px solid var(--c-border);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; transition: all 0.15s;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  margin-top: 2px;
}
.cat-checkbox:checked {
  background: var(--c-green); border-color: var(--c-green);
}
.cat-checkbox:checked::after {
  content: ''; width: 5px; height: 9px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg); margin-top: -2px;
}
.often-missed-badge {
  font-size: 10px;
  font-weight: 600;
  color: #B45309;
  background: #FEF3C7;
  border: none;
  border-radius: 99px;
  padding: 2px 7px;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1.4;
}
.deduction-chevron {
  font-size: 10px; color: #94A3B8;
  transition: transform 0.2s;
  flex-shrink: 0;
  padding: 4px;
  line-height: 1;
  margin-left: auto;
}
.deduction-card.open .deduction-chevron { transform: rotate(180deg); }
/* Body collapsed by default via JS inline maxHeight:0 + overflow:hidden */
.deduction-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  box-sizing: border-box;
  padding: 0 14px;
}
.cat-description {
  font-size: 12px;
  color: var(--c-muted);
  line-height: 1.5;
  margin: 8px 0 6px;
}
.cat-examples {
  font-size: 11.5px;
  color: var(--c-muted);
  padding-left: 14px;
  margin: 0 0 6px;
  line-height: 1.5;
}
.cat-examples li { margin-bottom: 1px; }
.cat-rule {
  font-size: 11.5px;
  color: #059669;
  background: #F0FDF4;
  border-radius: 6px;
  padding: 5px 8px;
  margin-bottom: 8px;
}
.cat-amount-group { padding-bottom: 12px; }
.cat-amount-group label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text);
  margin-bottom: 4px;
}
.cat-amount-group input {
  width: 100%; height: 38px;
  border: 1.5px solid var(--c-border); border-radius: 8px;
  padding: 0 10px; font-weight: 500; font-size: 13px;
  color: var(--c-text); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  background: #fff;
}
.cat-amount-group input:focus { border-color: var(--c-green); box-shadow: 0 0 0 3px rgba(34,197,94,0.10); }
.cat-amount-group .cat-sqft-input,
.cat-amount-group .cat-miles-input {
  height: 38px; font-size: 13px;
}

/* Missed deductions */
.missed-section { margin-top: 20px; }
.missed-section h3 { font-size: 18px; margin-bottom: 12px; }
.missed-deductions-list { display: flex; flex-direction: column; gap: 8px; }
.missed-cat-checkbox {
  width: 18px; height: 18px; border-radius: 5px;
  border: 2px solid var(--c-border);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; cursor: pointer; vertical-align: middle;
  transition: all 0.15s;
}
.missed-cat-checkbox.checked { background: var(--c-green); border-color: var(--c-green); }
.missed-amount-input {
  width: 100px; height: 36px;
  border: 2px solid var(--c-border); border-radius: 8px;
  padding: 0 10px; font-weight: 500; font-size: 14px;
  color: var(--c-text); outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.missed-amount-input:focus { border-color: var(--c-green); box-shadow: var(--shadow-input-focus); }
.missed-total-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; background: var(--c-green-light);
  border-radius: 8px; margin-top: 12px;
  font-weight: 600; font-size: 14px; color: var(--c-text);
}
.review-summary { margin-bottom: 20px; }

.desktop-only { display: flex; }

.mobile-sticky-bar {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 12px 20px; z-index: 90;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
}
.mobile-sticky-stats { display: flex; gap: 24px; margin-bottom: 10px; }
.mobile-stat-label { font-size: 11px; color: var(--c-light); text-transform: uppercase; letter-spacing: 0.05em; }
.mobile-stat-value { font-weight: 700; font-size: 16px; color: var(--c-text); }
.mobile-sticky-actions { display: flex; gap: 8px; }
.mobile-sticky-actions .btn-primary { flex: 1; height: 44px; }
.mobile-sticky-actions .btn-secondary { height: 44px; padding: 0 16px; }

/* ═══════════════════════════════════════════════════════════════
   SECTION STYLES
   ═══════════════════════════════════════════════════════════════ */
.section-white { background: var(--c-surface); padding: 96px 0; }
.section-gray { background: var(--c-bg); padding: 96px 0; }
.section-dark { background: var(--c-navy); padding: 80px 0; }
.section-green { background: var(--c-green); padding: 80px 0; text-align: center; }

.section-eyebrow {
  display: inline-block;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--c-light);
  margin-bottom: 14px;
}
.section-header-center { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.section-header-center h2 {
  font-weight: 800;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -0.5px;
  margin-bottom: 14px;
}
.section-subtitle { font-size: 17px; color: var(--c-light); max-width: 520px; margin: 0 auto; line-height: 1.6; }

/* ─── HOW IT WORKS (3-col) ─── */
.how-it-works-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.how-step-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: transform 0.25s, box-shadow 0.25s;
}
.how-step-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.how-step-num {
  display: inline-block;
  font-weight: 800;
  font-size: 13px;
  color: var(--c-green);
  background: var(--c-green-light);
  border-radius: var(--radius-badge);
  padding: 4px 10px;
  margin-bottom: 16px;
}
.how-step-card h3 { font-weight: 700; font-size: 20px; margin-bottom: 10px; }
.how-step-card p { font-size: 15px; line-height: 1.65; color: var(--c-muted); }

/* ─── DEDUCTION PILLS GRID ─── */
.deduction-pills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.deduction-pill {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 500;
  font-size: 14px;
  color: var(--c-muted);
  transition: all 0.15s;
  text-decoration: none;
}
.deduction-pill:hover { border-color: var(--c-green); color: #15803D; background: #F0FDF4; }

/* ─── TRUST / SOCIAL PROOF (dark) ─── */
.dark-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-bottom: 32px; }
.dark-stat-card {
  background: var(--c-navy-2);
  border: 1px solid var(--c-navy-3);
  border-radius: 16px;
  padding: 32px;
  text-align: center;
}
.dark-stat-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 48px;
  color: var(--c-green);
  line-height: 1.2;
}
.dark-stat-label { font-size: 14px; color: rgba(255,255,255,0.55); margin-top: 8px; }
.dark-trust-items {
  display: flex;
  justify-content: center;
  gap: 20px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.65);
  flex-wrap: wrap;
}
.dark-trust-items span + span::before { content: '·'; margin-right: 20px; }

/* ─── SAVINGS TABLE ─── */
.savings-table-wrap {
  border-radius: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-border);
  max-width: 800px;
  margin: 0 auto;
}
.savings-table { width: 100%; border-collapse: collapse; }
.savings-table thead th {
  background: var(--c-navy);
  color: #fff;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 14px 20px;
  text-align: left;
}
.savings-table thead th:last-child { text-align: right; }
.savings-table tbody td {
  padding: 14px 20px;
  font-size: 15px;
  color: var(--c-muted);
  border-bottom: 1px solid var(--c-border);
}
.savings-table tbody td:last-child { text-align: right; font-weight: 700; color: var(--c-green-dark); }
.savings-table tbody tr:nth-child(even) { background: #F8FAFC; }
.savings-table tbody tr:last-child td { border-bottom: none; }
.savings-table-disclaimer {
  font-size: 12px;
  color: var(--c-light);
  margin-top: 12px;
  text-align: center;
}

/* ─── BLOG CARDS ─── */
.blog-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  max-width: var(--max-width);
  margin: 0 auto 48px;
  padding: 0 24px;
}
.blog-section-header h2 { font-weight: 800; font-size: clamp(26px,3vw,40px); letter-spacing: -0.5px; margin-bottom: 0; }
.blog-section-header a { font-weight: 600; font-size: 15px; white-space: nowrap; }

.blog-preview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  padding: 32px;
  transition: transform 0.25s, box-shadow 0.25s;
  text-decoration: none;
  overflow: hidden;
}
.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.blog-card-category {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 4px;
  padding: 3px 10px;
  margin-bottom: 16px;
}
.blog-card-category.cat-deductions { background: var(--c-green-light); color: #15803D; }
.blog-card-category.cat-quarterly { background: var(--c-amber-light); color: #92400E; }
.blog-card-category.cat-home-office { background: #EDE9FE; color: #5B21B6; }
.blog-card h3 { font-weight: 700; font-size: 18px; color: var(--c-text); line-height: 1.4; margin-bottom: 10px; }
.blog-card p { font-size: 14px; color: #64748B; line-height: 1.6; margin-bottom: 12px; }
.blog-card-read-time { font-size: 12px; color: var(--c-light); margin-bottom: 12px; display: block; }
.blog-card-read { font-size: 14px; font-weight: 600; color: var(--c-green); }

/* ─── FAQ ACCORDION ─── */
.faq-list { max-width: 780px; margin: 0 auto; }

.faq-tools-banner {
  background: var(--c-navy);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 40px;
  border: 1px solid rgba(34,197,94,0.15);
}
.faq-tools-banner-label {
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #22C55E;
  margin-bottom: 14px;
}
.faq-tools-banner a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #ffffff;
  font-weight: 500;
  font-size: 14px;
  padding: 7px 0;
  text-decoration: none;
  transition: color 0.15s;
}
.faq-tools-banner a:hover { color: #22C55E; }

.faq-category-header {
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--c-green);
  margin: 44px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--c-green);
}
.faq-category-header:first-of-type { margin-top: 0; }

.faq-accordion-item {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  margin-bottom: 10px;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
  overflow: hidden;
}
.faq-accordion-item:hover {
  border-color: rgba(34,197,94,0.3);
  box-shadow: 0 2px 12px rgba(34,197,94,0.06);
}
.faq-accordion-item.open {
  border-color: var(--c-green);
  box-shadow: 0 4px 20px rgba(34,197,94,0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: 15.5px;
  color: var(--c-text);
  text-align: left;
  background: none;
  padding: 18px 22px;
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1.5;
}
.faq-accordion-item .faq-question:hover { color: var(--c-green); }
.faq-accordion-item .faq-question::after {
  content: '▾';
  font-size: 12px;
  color: var(--c-light);
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), color 0.15s;
  flex-shrink: 0;
  margin-left: auto;
}
.faq-accordion-item:hover .faq-question::after { color: var(--c-green); }
.faq-accordion-item.open .faq-question { color: var(--c-green); }
.faq-accordion-item.open .faq-question::after { transform: rotate(180deg); color: var(--c-green); }

.faq-accordion-item .faq-answer { display: none; padding: 0 22px 20px; }
.faq-accordion-item.open .faq-answer { display: block; }
.faq-accordion-item .faq-answer p {
  font-size: 15px;
  color: var(--c-muted);
  line-height: 1.8;
  margin: 0;
}
.faq-accordion-item .faq-answer a { color: var(--c-green); font-weight: 500; }

/* ─── CTA BANNER (green) ─── */
.section-green h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: var(--c-navy);
  margin-bottom: 14px;
}
.section-green .cta-subtitle {
  font-weight: 500;
  font-size: 18px;
  color: rgba(6,78,59,0.75);
  margin-bottom: 28px;
}
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  min-width: 260px;
  background: var(--c-navy);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  border-radius: var(--radius-input);
  transition: all 0.2s;
}
.btn-dark:hover { background: var(--c-navy-2); box-shadow: 0 8px 24px rgba(0,0,0,0.25); }

/* ─── BOTTOM CTA (navy, old style kept for compatibility) ─── */
.bottom-cta { background: var(--c-navy); padding: 80px 0; text-align: center; }
.bottom-cta .section-eyebrow { color: #4ADE80; }
.bottom-cta-heading {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 40px;
  color: #fff;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
}
.bottom-cta-subtitle { font-size: 16px; color: rgba(255,255,255,0.6); max-width: 480px; margin: 0 auto 28px; }
.bottom-cta-trust { display: flex; justify-content: center; gap: 24px; margin-top: 20px; flex-wrap: wrap; }
.bottom-cta-trust span { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); }

/* ═══════════════════════════════════════════════════════════════
   AD SLOTS
   ═══════════════════════════════════════════════════════════════ */
.ad-slot-wrapper { display: flex; justify-content: center; padding: 32px 0; }
.ad-slot {
  background: #F8FAFC;
  border: 1.5px dashed #CBD5E1;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: #CBD5E1; font-size: 11px; font-family: var(--font-body); font-weight: 500;
  letter-spacing: 0.05em;
}
.ad-slot[data-ad-size="728x90"] { width: 100%; max-width: 728px; height: 90px; margin: 0 auto; }
.ad-slot[data-ad-size="300x250"] { width: 300px; height: 250px; }
.ad-slot[data-ad-size="320x50"] { width: 100%; max-width: 320px; height: 50px; }
.ad-mobile-only { display: none; }
.ad-desktop-only { display: flex; }
.mobile-bottom-bar {
  position: fixed; bottom: 0; left: 0; width: 100%;
  z-index: 200; background: var(--c-surface);
  border-top: 1px solid var(--c-border);
  padding: 8px 16px;
  display: none;
}

/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.site-footer {
  background: var(--c-navy);
  padding: 64px 0 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 0; }
.footer-brand { margin-bottom: 0; }
.footer-brand .logo { margin-bottom: 16px; }
.footer-brand-desc { font-size: 14px; color: rgba(255,255,255,0.50); line-height: 1.6; margin-bottom: 8px; }
.footer-disclaimer-small { font-size: 12px; color: rgba(255,255,255,0.30); }
.footer-col h4, .footer-col h6 { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255,255,255,0.40); margin-bottom: 16px; }
.footer-col a { display: block; font-size: 14px; color: rgba(255,255,255,0.60); margin-bottom: 8px; transition: color 0.15s; }
.footer-col a:hover { color: #fff; }
.footer-bottom-bar {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 24px; margin-top: 48px;
  font-size: 13px; color: rgba(255,255,255,0.35);
}

/* ═══════════════════════════════════════════════════════════════
   RESULTS PAGE
   ═══════════════════════════════════════════════════════════════ */
.results-main { padding-top: 64px; padding-bottom: 80px; }
.results-hero { background: var(--c-navy); padding: 48px 0 40px; text-align: center; position: relative; overflow: hidden; }
.results-hero-title { font-family: var(--font-display); font-weight: 800; font-size: 32px; color: #fff; margin-bottom: 32px; }
.hero-amount-row { display: flex; justify-content: center; gap: 32px; margin-bottom: 24px; flex-wrap: wrap; }
.hero-amount-block { display: flex; flex-direction: column; align-items: center; }
.hero-amount-label { font-size: 12px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 4px; }
.hero-amount-value { font-weight: 800; font-size: 40px; color: #fff; }
.hero-amount-value.text-green { color: var(--c-green); }
.hero-comparison-row { display: flex; justify-content: center; gap: 24px; font-size: 14px; color: rgba(255,255,255,0.6); flex-wrap: wrap; }
.hero-comparison-row strong { color: #fff; }
.hero-disclaimer { font-size: 12px; color: rgba(255,255,255,0.35); margin-top: 16px; }
.results-layout { display: grid; grid-template-columns: 1fr 300px; gap: 32px; padding-top: 32px; padding-bottom: 32px; align-items: start; }
.results-content { min-width: 0; }
.results-sidebar { position: relative; }
.ad-sidebar-sticky { position: sticky; top: 100px; }
.results-section { margin-bottom: 32px; }
.results-section-title { font-weight: 800; font-size: 22px; margin-bottom: 20px; color: var(--c-text); }
.results-table { width: 100%; border-collapse: collapse; }
.results-table thead th { font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-light); padding: 10px 0; border-bottom: 1px solid var(--c-border); text-align: left; }
.results-table tbody td { padding: 12px 0; border-bottom: 1px solid #F1F5F9; font-size: 14px; color: var(--c-muted); }
.results-table tbody td:last-child { text-align: right; font-weight: 600; color: var(--c-text); }
.results-table tbody tr.highlight td { background: #F8FAFC; font-weight: 700; color: var(--c-text); }
.quarterly-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 16px; }
.quarterly-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 20px; text-align: center; }
.quarterly-card .q-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-light); margin-bottom: 8px; }
.quarterly-card .q-date { font-size: 13px; color: var(--c-muted); margin-bottom: 8px; }
.quarterly-card .q-amount { font-weight: 800; font-size: 22px; color: var(--c-text); }
.quarterly-note { font-size: 13px; color: var(--c-light); font-style: italic; }
.deductions-list { display: flex; flex-direction: column; gap: 8px; }
.deduction-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #F1F5F9; }
.deduction-item:last-child { border-bottom: none; }
.deduction-item-name { font-size: 14px; color: var(--c-muted); }
.deduction-item-amount { font-weight: 600; font-size: 14px; color: var(--c-text); }
.deductions-total-row { display: flex; justify-content: space-between; padding: 16px 0 0; border-top: 2px solid var(--c-border); margin-top: 8px; font-weight: 700; color: var(--c-text); }
.missed-banner { background: var(--c-amber-light); border: 1px solid #FDE68A; border-radius: var(--radius-card); overflow: hidden; }
.missed-banner-inner { padding: 24px; }
.missed-banner-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.missed-banner-icon { font-size: 20px; }
.missed-banner-header h2 { font-size: 18px; color: #92400E; }
.missed-banner-list { display: flex; flex-direction: column; gap: 8px; }
.missed-item { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #78350F; }
.results-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.share-toast { display: none; background: var(--c-navy); color: #fff; padding: 8px 16px; border-radius: 8px; font-size: 13px; font-weight: 500; }
.share-toast.show { display: inline-block; animation: fadeInOut 2s ease forwards; }
@keyframes fadeInOut { 0%{opacity:0;transform:translateY(4px)} 15%{opacity:1;transform:translateY(0)} 85%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(-4px)} }

/* ═══════════════════════════════════════════════════════════════
   CONTENT PAGES (guide, about, terms, privacy)
   ═══════════════════════════════════════════════════════════════ */
.page-hero { padding: 64px 0; text-align: center; }
.page-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(32px,4vw,48px); letter-spacing: -0.5px; margin-bottom: 14px; color: #ffffff; }
.page-hero p, .page-subtitle { font-size: 17px; color: rgba(255,255,255,0.65); max-width: 620px; margin: 0 auto; line-height: 1.7; }
.page-content { background: var(--c-surface); padding: 0 0 96px; }
.page-content .container { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }
.page-article { max-width: 100%; }
.page-article h2 { font-weight: 800; font-size: 26px; margin: 48px 0 16px; letter-spacing: -0.3px; }
.page-article h3 { font-weight: 700; font-size: 20px; margin: 32px 0 12px; }
.page-article p { margin-bottom: 16px; font-size: 16px; line-height: 1.75; color: var(--c-muted); }
.page-article ul, .page-article ol { margin-bottom: 16px; padding-left: 20px; }
.page-article li { margin-bottom: 8px; font-size: 15px; color: var(--c-muted); line-height: 1.75; list-style: disc; }
.page-article ol li { list-style: decimal; }
.page-article strong { color: var(--c-text); }
.page-article a { color: var(--c-green); font-weight: 500; }
.page-sidebar { position: sticky; top: 100px; }
.sidebar-cta-card { background: var(--c-navy); border-radius: var(--radius-card); padding: 32px; color: #fff; text-align: center; margin-bottom: 20px; }
.sidebar-cta-card h3 { color: #fff; font-size: 20px; margin-bottom: 10px; }
.sidebar-cta-card p { font-size: 14px; color: rgba(255,255,255,0.6); margin-bottom: 20px; }
.sidebar-cta-card .btn-primary { width: 100%; }
.privacy-content { max-width: 720px; margin: 0 auto; padding: 64px 0 96px; }
.privacy-content h2 { font-weight: 800; font-size: 24px; margin: 48px 0 12px; letter-spacing: -0.3px; }
.privacy-content h2:first-child { margin-top: 0; }
.privacy-content p { margin-bottom: 14px; }
.privacy-content ul { margin-bottom: 14px; padding-left: 20px; }
.privacy-content li { margin-bottom: 6px; list-style: disc; }

/* About page specific */
.about-content { max-width: 800px; margin: 0 auto; padding: 64px 0 96px; }
.about-content h2 { font-weight: 800; font-size: 26px; margin: 48px 0 16px; }
.about-content h2:first-child { margin-top: 0; }
.about-content p { margin-bottom: 18px; font-size: 17px; line-height: 1.8; color: var(--c-muted); }
.about-diff-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 32px 0; }
.about-diff-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 16px; padding: 28px; }
.about-diff-card h3 { font-weight: 700; font-size: 17px; margin-bottom: 10px; }
.about-diff-card p { font-size: 14px; color: var(--c-muted); margin-bottom: 0; }
.amber-banner { background: var(--c-amber-light); border-left: 4px solid var(--c-amber); border-radius: 12px; padding: 24px 28px; margin: 32px 0; }
.amber-banner h3 { font-weight: 700; font-size: 18px; color: #92400E; margin-bottom: 10px; }
.amber-banner p { font-size: 15px; color: #78350F; margin-bottom: 10px; }

/* Terms page */
.terms-content { max-width: 720px; margin: 0 auto; padding: 64px 0 96px; }
.terms-content h2 { font-weight: 800; font-size: 22px; margin: 40px 0 12px; }
.terms-content h2:first-child { margin-top: 0; }
.terms-content p { margin-bottom: 14px; }
.terms-content ul { margin-bottom: 14px; padding-left: 20px; }
.terms-content li { margin-bottom: 6px; list-style: decimal; }

/* ═══════════════════════════════════════════════════════════════
   BLOG PAGES (REDESIGNED 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── Blog Hero ──── */
.blog-hero {
  background: #1B2E4B;
  padding: 100px 0 64px;
  text-align: center;
}
.blog-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.blog-hero-eyebrow {
  display: inline-block;
  background: rgba(34,197,94,0.10);
  border: 1px solid rgba(34,197,94,0.25);
  color: #22C55E;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 24px;
}
.blog-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(36px, 5vw, 60px);
  letter-spacing: -1.5px;
  line-height: 1.1;
  margin-bottom: 20px;
}
.blog-hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.60);
  max-width: 540px;
  margin: 0 auto 40px;
  line-height: 1.7;
}
.blog-hero-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
}
.blog-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.blog-hero-stat-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: #22C55E;
}
.blog-hero-stat-label {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
}

/* ── Featured Article Card ──── */
.blog-featured-section {
  background: linear-gradient(to bottom, #1B2E4B 50%, #FFFFFF 50%);
  padding: 0 24px;
}
.blog-featured-card {
  max-width: 1140px;
  margin: -32px auto 0;
  background: #FFFFFF;
  border-radius: 24px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  overflow: hidden;
  display: grid;
  grid-template-columns: 60% 40%;
}
.blog-featured-left {
  padding: 48px;
  display: flex;
  flex-direction: column;
}
.blog-featured-badge {
  display: inline-block;
  background: #22C55E;
  color: #1B2E4B;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 6px 14px;
  border-radius: 99px;
  width: fit-content;
  margin-bottom: 20px;
}
.blog-featured-left h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 32px;
  color: #0F172A;
  line-height: 1.25;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}
.blog-featured-meta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: #94A3B8;
  margin-bottom: 16px;
}
.blog-featured-excerpt {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: #475569;
  line-height: 1.8;
  margin-bottom: 20px;
}
.blog-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.blog-tag-pill {
  background: #F1F5F9;
  color: #475569;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
}
.blog-featured-cta {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: #22C55E;
  text-decoration: none;
  transition: color 0.15s;
}
.blog-featured-cta:hover {
  color: #16A34A;
  text-decoration: underline;
}
.blog-featured-right {
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 32px;
}
.blog-featured-mockup {
  background: #1B2E4B;
  border-radius: 20px;
  padding: 32px;
  width: 260px;
}
.mockup-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #22C55E;
  margin-bottom: 16px;
}
.mockup-divider {
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 12px 0;
}
.mockup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-body);
  font-size: 14px;
  color: #ffffff;
  padding: 6px 0;
}
.mockup-val { font-weight: 600; }
.mockup-val.green { color: #22C55E; }
.mockup-val.big { font-size: 20px; font-weight: 700; }
.mockup-total { padding: 8px 0; }
.mockup-note {
  font-family: var(--font-body);
  font-size: 11px;
  color: rgba(255,255,255,0.40);
  text-align: right;
  margin-top: 4px;
}

/* ── Filter Bar ──── */
.blog-filter-section {
  background: #FFFFFF;
  padding: 48px 0 0;
}
.blog-filter-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.blog-filter-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}
.blog-filter-pills {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 16px;
  -webkit-overflow-scrolling: touch;
}
.blog-filter-pills::-webkit-scrollbar { display: none; }
.blog-filter-pill {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  color: #475569;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 99px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s ease;
}
.blog-filter-pill:hover {
  border-color: #22C55E;
  color: #22C55E;
}
.blog-filter-pill.active {
  background: #1B2E4B;
  color: #ffffff;
  border-color: #1B2E4B;
}

/* ── Blog Cards Grid ──── */
.blog-grid-section {
  background: #FFFFFF;
  padding: 32px 0 96px;
}
.blog-grid {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blg-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blg-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
}
.blg-card-bar {
  height: 4px;
  width: 100%;
}
.blg-card-body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.blg-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blg-card-badge {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  border-radius: 6px;
}
.blg-card-read-time {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #94A3B8;
}
.blg-card-body h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: var(--c-text);
  line-height: 1.35;
  margin-top: 12px;
  letter-spacing: -0.2px;
}
.blg-card-date {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 400;
  color: #94A3B8;
  margin-top: 6px;
}
.blg-card-excerpt {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.7;
  margin-top: 12px;
  flex: 1;
}
.blg-card-footer {
  padding: 0 28px 28px;
  border-top: 1px solid var(--c-border);
  margin-top: auto;
  padding-top: 20px;
}
.blg-card-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-green);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
}
.blg-card-link:hover { color: var(--c-green-dark); }
.blg-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.blg-card-link:hover .blg-arrow {
  transform: translateX(4px);
}

/* ── Newsletter CTA ──── */
.blog-cta-section {
  background: #1B2E4B;
  padding: 80px 0;
  text-align: center;
}
.blog-cta-inner {
  max-width: 600px;
  margin: 0 auto;
  padding: 0 24px;
}
.blog-cta-inner h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: -0.5px;
}
.blog-cta-inner p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  margin-bottom: 24px;
}
.blog-cta-trust {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.45);
  margin-bottom: 32px;
}
.blog-cta-btn {
  display: inline-block;
  background: var(--c-green);
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 12px;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.blog-cta-btn:hover {
  background: var(--c-green-dark);
  transform: translateY(-1px);
}

/* ── Related Tools Strip ──── */
.blog-tools-section {
  background: #FFFFFF;
  padding: 64px 0;
}
.blog-tools-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 24px;
}
.blog-tools-label {
  display: block;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: #94A3B8;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}
.blog-tools-inner h2 {
  font-family: var(--font-body);
  font-size: 28px;
  font-weight: 800;
  color: var(--c-text);
  margin-bottom: 32px;
  letter-spacing: -0.3px;
}
.blog-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-tool-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-left: 4px solid #22C55E;
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-tool-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
}
.blog-tool-icon {
  font-size: 20px;
}
.blog-tool-body h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 4px;
}
.blog-tool-body p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.6;
}
.blog-tool-link {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-green);
  margin-top: auto;
}

/* ── Blog Responsive ──── */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
  .blog-tools-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .blog-hero { padding: 80px 0 48px; }
  .blog-hero-stats { gap: 32px; }
  .blog-featured-card { grid-template-columns: 1fr; }
  .blog-featured-left { padding: 32px 24px; }
  .blog-featured-right { padding: 32px 24px; }
  .blog-featured-mockup { width: 100%; max-width: 260px; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-tools-grid { grid-template-columns: 1fr; }
  .blog-cta-section { padding: 64px 0; }
}
@media (max-width: 480px) {
  .blog-hero h1 { font-size: 28px; letter-spacing: -0.8px; }
  .blog-hero-stat-num { font-size: 26px; }
  .blog-hero-stats { gap: 24px; }
  .blog-featured-left h2 { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGES (REDESIGNED 2026)
   ═══════════════════════════════════════════════════════════════ */

/* ── Article Hero ──── */
.article-hero {
  background: #1B2E4B;
  padding: 100px 0 64px;
}
.article-hero-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 24px;
}
.article-breadcrumb {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.40);
  margin-bottom: 20px;
}
.article-breadcrumb a {
  color: rgba(255,255,255,0.40);
  text-decoration: none;
  transition: color 0.15s;
}
.article-breadcrumb a:hover { color: #22C55E; }
.article-breadcrumb .sep { margin: 0 8px; }
.article-hero-badge {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.article-hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -1px;
  line-height: 1.15;
  margin-bottom: 16px;
}
.article-hero-meta {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.50);
  margin-bottom: 16px;
}
.article-hero-deck {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  max-width: 640px;
  line-height: 1.7;
}

/* ── Article Body Layout ──── */
.article-body-section {
  background: #FFFFFF;
  padding: 64px 24px 96px;
}
.article-body-inner {
  max-width: 1140px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
}
.article-content-area {
  max-width: 720px;
  min-width: 0;
}
.article-content-card {
  background: #FFFFFF;
  border-radius: 20px;
  padding: 48px;
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-card);
}

/* ── Article Typography ──── */
.article-content-card h2 {
  font-family: var(--font-body);
  font-size: 26px;
  font-weight: 800;
  color: var(--c-text);
  margin-top: 48px;
  margin-bottom: 16px;
  padding-top: 48px;
  border-top: 1px solid var(--c-border);
 letter-spacing: -0.3px;
}
.article-content-card h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.article-content-card h3 {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--c-text);
  margin-top: 32px;
  margin-bottom: 12px;
}
.article-content-card p {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.85;
  margin-bottom: 20px;
}
.article-content-card ul,
.article-content-card ol {
  margin-left: 24px;
  margin-bottom: 20px;
}
.article-content-card li {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  color: var(--c-muted);
  line-height: 1.75;
  margin-bottom: 8px;
}
.article-content-card strong {
  color: var(--c-text);
  font-weight: 700;
}
.article-content-card a {
  color: var(--c-green);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.15s;
}
.article-content-card a:hover { color: var(--c-green-dark); text-decoration: underline; }

/* ── Article Callout Boxes ──── */
.article-callout {
  background: var(--c-green-light);
  border-left: 4px solid var(--c-green);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 32px 0;
}
.article-callout p {
  color: var(--c-green-dark);
  font-weight: 600;
  margin: 0;
}
.article-warning {
  background: var(--c-amber-light);
  border-left: 4px solid var(--c-amber);
  border-radius: 0 12px 12px 0;
  padding: 20px 24px;
  margin: 32px 0;
}
.article-warning p {
  color: var(--c-amber);
  margin: 0;
}

/* ── Article Tables ──── */
.article-table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--c-border);
}
.article-table th {
  background: #1B2E4B;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  padding: 14px 20px;
  text-align: left;
  letter-spacing: 0.05em;
}
.article-table td {
  padding: 14px 20px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--c-muted);
  border-top: 1px solid var(--c-border);
}
.article-table tr:nth-child(even) td {
  background: #F8FAFC;
}

/* ── Article Sticky Sidebar ──── */
.article-sidebar {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-self: start;
  height: fit-content;
}
.article-sidebar-cta {
  background: #1B2E4B;
  border-radius: 20px;
  padding: 28px;
}
.article-sidebar-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.article-sidebar-cta h3 {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
}
.article-sidebar-cta p {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  color: rgba(255,255,255,0.60);
  line-height: 1.6;
  margin-bottom: 20px;
}
.article-sidebar-btn {
  display: block;
  width: 100%;
  background: var(--c-green);
  color: var(--c-navy);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 10px;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.article-sidebar-btn:hover { background: var(--c-green-dark); }
.article-sidebar-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 16px 0;
}
.article-sidebar-link {
  display: block;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #22C55E;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.15s;
}
.article-sidebar-link:hover { color: #16A34A; }

/* ── Related Articles Sidebar Card ──── */
.article-related-card {
  background: #FFFFFF;
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 24px;
}
.article-related-card h4 {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text);
  margin-bottom: 16px;
}
.article-related-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--c-border);
  text-decoration: none;
  transition: color 0.15s;
}
.article-related-item:last-child { border-bottom: none; }
.article-related-item-title {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: #22C55E;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.15s;
}
.article-related-item:hover .article-related-item-title { color: #16A34A; }
.article-related-arrow {
  font-size: 16px;
  color: #22C55E;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.article-related-item:hover .article-related-arrow { transform: translateX(4px); }

/* ── Article Footer (below content) ──── */
.article-bottom-section {
  background: #FFFFFF;
  padding: 0 24px 64px;
}
.article-bottom-inner {
  max-width: 720px;
  margin: 0 auto;
}
.article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: #22C55E;
  text-decoration: none;
  margin-bottom: 32px;
  transition: color 0.15s;
}
.article-back-link:hover { color: #16A34A; }
.article-feedback {
  border-top: 1px solid var(--c-border);
  padding-top: 32px;
  margin-bottom: 32px;
}
.article-feedback-title {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.article-feedback-btns {
  display: flex;
  gap: 12px;
}
.article-feedback-btn {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  background: transparent;
  border: 1px solid var(--c-border);
  border-radius: 8px;
  padding: 10px 20px;
  cursor: pointer;
  transition: all 0.15s;
}
.article-feedback-btn:hover {
  border-color: var(--c-green);
  color: var(--c-green);
}
.article-feedback-thanks {
  display: none;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--c-green);
  padding: 10px 0;
}
.article-feedback-thanks.visible { display: block; }
.article-disclaimer {
  background: var(--c-amber-light);
  border-left: 3px solid var(--c-amber);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
}
.article-disclaimer p {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: var(--c-amber);
  line-height: 1.6;
  margin: 0;
}

/* ── Article Responsive ──── */
@media (max-width: 1024px) {
  .article-body-inner { grid-template-columns: 1fr; }
  .article-sidebar { display: none; }
  .article-content-area { max-width: 100%; }
}
@media (max-width: 768px) {
  .article-hero { padding: 80px 0 48px; }
  .article-content-card { padding: 24px; }
  .article-body-section { padding: 32px 16px 64px; }
}

/* ═══════════════════════════════════════════════════════════════
   DEDUCTION FINDER QUIZ
   ═══════════════════════════════════════════════════════════════ */

/* ── Progress Area ──── */
.df-progress-area {
  padding: 20px 32px 0;
  margin-bottom: 8px;
}
.df-progress-bar-track {
  width: 100%;
  height: 4px;
  background: var(--c-border);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 12px;
}
.df-progress-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--c-green), #4ADE80);
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.df-progress-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.df-progress-text span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}
.df-q-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 24px;
  background: var(--c-green-light);
  color: var(--c-green-dark);
  font-size: 11px;
  font-weight: 700;
  border-radius: 6px;
  letter-spacing: 0.03em;
}

/* ── Questions Viewport & Track ──── */
.df-questions-viewport {
  overflow: hidden;
  position: relative;
}
.df-questions-track {
  position: relative;
}

/* ── Question Panels ──── */
.df-question-panel {
  display: none;
  padding: 4px 32px 0;
}
.df-question-panel.active {
  display: block;
}
.df-question-panel h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--c-text);
  line-height: 1.3;
  letter-spacing: -0.3px;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.df-q-icon {
  font-size: 26px;
  line-height: 1;
  flex-shrink: 0;
}
.df-q-tag {
  display: inline-block;
  padding: 3px 10px;
  background: #F1F5F9;
  color: var(--c-muted);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.df-question-hint {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: 24px;
}

/* ── Option Pills (single-select) ──── */
.df-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.df-option-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 16px 20px;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.df-option-pill:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.df-option-pill.selected {
  border-color: var(--c-green);
  background: var(--c-green-light);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10), 0 2px 8px rgba(34,197,94,0.08);
}
.df-pill-text {
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.4;
  flex: 1;
}
.df-pill-check {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--c-surface);
}
.df-option-pill.selected .df-pill-check {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
  transform: scale(1.05);
}

/* ── Multi-Select Chips (Q3) ──── */
.df-multi-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.df-multi-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  background: var(--c-surface);
  border: 2px solid var(--c-border);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.df-multi-chip:hover {
  border-color: #CBD5E1;
  background: #F8FAFC;
}
.df-multi-chip.selected {
  border-color: var(--c-green);
  background: var(--c-green-light);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10);
}
.df-chip-check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 2px solid var(--c-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  flex-shrink: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  background: var(--c-surface);
}
.df-multi-chip.selected .df-chip-check {
  background: var(--c-green);
  border-color: var(--c-green);
  color: #fff;
}
.df-chip-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.3;
}

/* ── Navigation Buttons ──── */
.df-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 32px;
}
.df-back-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 4px;
  transition: color 0.15s;
  font-family: var(--font-body);
}
.df-back-link:hover {
  color: var(--c-text);
}
.df-next-btn {
  height: 50px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-family: var(--font-body);
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.df-next-btn.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ── Results Panel ──── */
.df-results-panel {
  display: none;
}
.df-results-panel.active {
  display: block;
}
.df-results-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.df-results-banner {
  text-align: center;
  padding: 28px 24px;
  margin-bottom: 24px;
  background: linear-gradient(135deg, var(--c-green-light) 0%, #ECFDF5 100%);
  border-radius: 16px;
  border: 1px solid rgba(34,197,94,0.15);
}
.df-results-banner h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  color: var(--c-text);
  margin-bottom: 6px;
}
.df-results-banner p {
  font-size: 16px;
  font-weight: 600;
  color: var(--c-green-dark);
}

/* ── Result Cards ──── */
.df-results-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 28px;
}
.df-result-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 20px 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.df-result-card:hover {
  border-color: #CBD5E1;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.df-result-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.df-result-check {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--c-green);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}
.df-result-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-text);
}
.df-result-irs {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-light);
  margin-bottom: 10px;
  margin-left: 40px;
  letter-spacing: 0.02em;
}
.df-result-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-left: 40px;
}
.df-result-savings {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-green-dark);
  margin-top: 12px;
  margin-left: 40px;
  padding: 10px 16px;
  background: var(--c-green-light);
  border-radius: 10px;
  display: inline-block;
}
.df-missed-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--c-amber-light);
  color: var(--c-amber);
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--radius-badge);
  letter-spacing: 0.02em;
}

/* ── CTA Card in Results ──── */
.df-cta-card {
  background: linear-gradient(135deg, #1B2E4B, #16273F);
  border-radius: 16px;
  padding: 28px 32px;
  color: #fff;
  margin-bottom: 20px;
}
.df-cta-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 20px;
  margin-bottom: 8px;
}
.df-cta-card p {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,0.65);
  margin-bottom: 20px;
}
.df-cta-card .btn-primary {
  display: inline-block;
  text-decoration: none;
}

/* ── Start Over Button ──── */
.df-start-over {
  display: block;
  width: 100%;
  padding: 14px;
  background: none;
  border: 2px dashed var(--c-border);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
  margin-bottom: 8px;
}
.df-start-over:hover {
  border-color: var(--c-light);
  color: var(--c-text);
  background: #F8FAFC;
}

/* ── Deduction Mapping Table ──── */
.df-map-table-wrap {
  overflow-x: auto;
  margin-top: 24px;
  border-radius: 14px;
  border: 1px solid var(--c-border);
}
.df-map-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.df-map-table thead {
  background: #F8FAFC;
}
.df-map-table thead th {
  padding: 14px 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-muted);
  text-align: left;
  border-bottom: 2px solid var(--c-border);
}
.df-map-table tbody td {
  padding: 14px 20px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
  line-height: 1.5;
}
.df-map-table tbody tr:last-child td {
  border-bottom: none;
}
.df-map-table tbody tr:hover {
  background: #FAFBFC;
}
.df-map-table tbody td:first-child {
  font-weight: 600;
  color: var(--c-text);
  white-space: nowrap;
  width: 35%;
}
.df-map-table tbody td:last-child {
  color: var(--c-muted);
}

/* ── Results Sidebar ──── */
.df-results-sidebar {
  position: sticky;
  top: 100px;
}

/* ── Deduction Finder Mobile ──── */
@media (max-width: 768px) {
  .df-progress-area { padding: 16px 20px 0; }
  .df-question-panel { padding: 4px 20px 0; }
  .df-question-panel h2 { font-size: 19px; }
  .df-question-hint { font-size: 13px; margin-bottom: 20px; }
  .df-option-pill { padding: 14px 16px; }
  .df-pill-text { font-size: 14px; }
  .df-multi-chip { padding: 10px 14px; }
  .df-chip-text { font-size: 13px; }
  .df-nav { margin-top: 24px; padding-bottom: 24px; }
  .df-next-btn { height: 48px; flex: 1; padding: 0 24px; }

  .df-results-layout { grid-template-columns: 1fr; }
  .df-results-sidebar { display: none; }
  .df-results-banner h2 { font-size: 20px; }
  .df-result-card { padding: 16px 18px; }
  .df-result-desc { margin-left: 0; }
  .df-result-irs { margin-left: 0; }
  .df-result-savings { margin-left: 0; }
  .df-cta-card { padding: 24px 20px; }
  .df-map-table thead th,
  .df-map-table tbody td { padding: 12px 14px; font-size: 13px; }
}

/* ═══════════════════════════════════════════════════════════════
   QUARTERLY TAX ESTIMATOR
   ═══════════════════════════════════════════════════════════════ */

/* ── Two-Column Layout ──── */
.qe-tool-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 0;
  min-height: 500px;
}

/* ── Left Column: Inputs ──── */
.qe-inputs-col {
  padding: 28px 28px 28px 32px;
  border-right: 1px solid var(--c-border);
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.qe-col-label {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--c-text);
  letter-spacing: -0.2px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--c-border);
  margin-bottom: 4px;
}
.qe-inputs-col .form-group {
  margin-bottom: 0;
}
.qe-inputs-col .form-group label {
  font-size: 12px;
  font-weight: 600;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.qe-inputs-col .input-currency {
  height: 48px;
  font-size: 18px;
  font-weight: 600;
}
.qe-inputs-col .input-prefix {
  font-size: 18px;
}
.qe-inputs-col select {
  height: 48px;
  width: 100%;
  border: 2px solid var(--c-border);
  border-radius: var(--radius-input);
  padding: 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-text);
  background: var(--c-surface);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: var(--font-body);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M2.5 4.5L6 8l3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.qe-inputs-col select:focus {
  border-color: var(--c-green);
  box-shadow: var(--shadow-input-focus);
}
.qe-helper {
  font-size: 13px;
  color: var(--c-light);
  line-height: 1.5;
  margin-top: 8px;
}
.qe-helper a {
  color: var(--c-green);
  text-decoration: none;
  font-weight: 600;
}
.qe-helper a:hover {
  text-decoration: underline;
}

/* ── Toggle Rows ──── */
.qe-toggle-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qe-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--c-text);
  line-height: 1.4;
}

/* ── Conditional (hidden by default) ──── */
.qe-conditional {
  display: none;
  padding: 16px 16px 4px;
  background: #F8FAFC;
  border-radius: 12px;
  border: 1px solid var(--c-border);
}
.qe-conditional.visible {
  display: block;
}

/* ── Right Column: Results ──── */
.qe-results-col {
  padding: 28px 32px;
  background: #FAFBFC;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  overflow-y: auto;
  max-height: 680px;
}

/* ── Annual Estimate Header ──── */
.qe-annual-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-light);
  margin-bottom: 8px;
}
.qe-annual-total {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 36px;
  color: var(--c-text);
  letter-spacing: -1px;
  margin-bottom: 20px;
}
.qe-annual-total small {
  font-size: 16px;
  color: var(--c-muted);
  font-weight: 500;
  margin-left: 4px;
}

/* ── Threshold Note ──── */
.qe-threshold-note {
  display: none;
  padding: 14px 18px;
  background: var(--c-green-light);
  border: 1px solid rgba(34,197,94,0.20);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--c-green-dark);
  margin-bottom: 20px;
  line-height: 1.5;
}
.qe-threshold-note.visible {
  display: block;
}

/* ── Breakdown Table ──── */
.qe-breakdown {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 24px;
}
.qe-breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0;
}
.qe-breakdown-divider {
  height: 1px;
  background: var(--c-border);
  margin: 4px 0;
}
.qe-bd-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--c-muted);
}
.qe-bd-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text);
  font-variant-numeric: tabular-nums;
}
.qe-bd-se .qe-bd-value { color: var(--c-amber); }
.qe-bd-fed .qe-bd-value { color: var(--c-muted); }
.qe-bd-total {
  padding-top: 10px;
  margin-top: 2px;
  border-top: 2px solid var(--c-border);
}
.qe-bd-total .qe-bd-label {
  font-weight: 700;
  color: var(--c-text);
}
.qe-bd-total .qe-bd-value {
  font-size: 18px;
  color: var(--c-text);
}

/* ── Schedule Label ──── */
.qe-schedule-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-light);
  margin-bottom: 14px;
  margin-top: 4px;
}

/* ── Quarter Grid (inside results) ──── */
.qe-quarter-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
.qe-quarter-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qe-quarter-card.active-quarter {
  border-color: var(--c-green);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10);
  background: var(--c-green-light);
}
.qe-quarter-card.past-quarter {
  opacity: 0.55;
}
.qe-q-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-light);
  margin-bottom: 4px;
}
.qe-q-due {
  font-size: 12px;
  color: var(--c-muted);
  margin-bottom: 10px;
}
.qe-q-amount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 20px;
  color: var(--c-text);
}
.qe-quarter-card.active-quarter .qe-q-amount {
  color: var(--c-green-dark);
}

/* ── Penalty Warning ──── */
.qe-penalty-warning {
  display: none;
  padding: 18px 20px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 12px;
  margin-bottom: 16px;
}
.qe-penalty-warning.visible {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.qe-penalty-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-red);
  margin-bottom: 4px;
}
.qe-penalty-body {
  font-size: 13px;
  color: #7F1D1D;
  line-height: 1.6;
}

/* ── Safe Harbor ──── */
.qe-safe-harbor {
  display: none;
  padding: 14px 18px;
  background: #F0FDF4;
  border: 1px solid #BBF7D0;
  border-radius: 12px;
  font-size: 13px;
  color: #166534;
  line-height: 1.6;
  margin-bottom: 16px;
}
.qe-safe-harbor.visible {
  display: block;
}
.qe-safe-harbor strong {
  font-weight: 800;
  color: var(--c-green-dark);
}

/* ── Copy Button ──── */
.qe-copy-btn {
  display: block;
  width: 100%;
  padding: 12px;
  background: none;
  border: 2px dashed var(--c-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  transition: all 0.2s;
  font-family: var(--font-body);
}
.qe-copy-btn:hover {
  border-color: var(--c-light);
  color: var(--c-text);
  background: #F8FAFC;
}

/* ── Calendar Grid (below tool card) ──── */
.qe-calendar-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 24px;
}
.qe-calendar-card {
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--c-border);
  background: var(--c-surface);
}
.qe-calendar-header {
  padding: 20px 24px 16px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--c-border);
}
.qe-calendar-q h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--c-text);
  text-transform: none;
  letter-spacing: -0.2px;
}
.qe-calendar-date {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-green-dark);
  margin-top: 6px;
}
.qe-calendar-period {
  font-size: 12px;
  color: var(--c-light);
  margin-top: 4px;
}
.qe-calendar-body {
  padding: 16px 24px 20px;
}
.qe-calendar-body p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
}

/* ── How to Pay Grid ──── */
.qe-pay-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 24px;
}
.qe-pay-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.qe-pay-card:hover {
  border-color: #CBD5E1;
  box-shadow: var(--shadow-card);
}
.qe-pay-card h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--c-text);
 line-height: 1.3;
  margin-bottom: 12px;
}
.qe-pay-card p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--c-muted);
  margin-bottom: 16px;
}
.qe-pay-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--c-green);
  text-decoration: none;
  transition: color 0.15s;
}
.qe-pay-link:hover {
  color: var(--c-green-dark);
  text-decoration: underline;
}

/* ── Quarterly Estimator Mobile ──── */
@media (max-width: 768px) {
  .qe-tool-layout {
    grid-template-columns: 1fr;
  }
  .qe-inputs-col {
    padding: 20px;
    border-right: none;
    border-bottom: 1px solid var(--c-border);
  }
  .qe-results-col {
    padding: 20px;
    max-height: none;
    border-radius: 0 0 var(--radius-card) var(--radius-card);
  }
  .qe-annual-total { font-size: 28px; }
  .qe-quarter-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qe-q-amount { font-size: 17px; }
  .qe-breakdown { padding: 14px 16px; }
  .qe-calendar-grid { grid-template-columns: 1fr; }
  .qe-pay-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
   CLICK/INTERACTION PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 1: INSTANT ACTIVE STATES ────────────── */
button:active,
[role="button"]:active,
input[type="submit"]:active,
input[type="button"]:active {
  transform: scale(0.97) !important;
  transition: transform 0.05s ease !important;
}

.btn-primary:active,
[class*="btn-primary"]:active,
[class*="cta-button"]:active {
  transform: translateY(1px) scale(0.98) !important;
  box-shadow: 0 2px 8px rgba(34,197,94,0.20) !important;
  transition: transform 0.05s ease,
              box-shadow 0.05s ease !important;
}

.quiz-option:active,
[class*="quiz-option"]:active {
  transform: scale(0.97) !important;
  background-color: #F0FDF4 !important;
  border-color: #22C55E !important;
  transition: transform 0.05s ease,
              background-color 0.05s ease,
              border-color 0.05s ease !important;
}

.deduction-pill:active,
[class*="deduction-pill"]:active {
  transform: scale(0.96) !important;
  transition: transform 0.05s ease !important;
}

.faq-item button:active,
[class*="faq-question"]:active,
[class*="faq-toggle"]:active {
  background-color: rgba(34,197,94,0.05) !important;
  transition: background-color 0.05s ease !important;
}

.step-tab:active,
.step-pill:active,
[class*="step-tab"]:active {
  transform: scale(0.97) !important;
  transition: transform 0.05s ease !important;
}

nav a:active {
  opacity: 0.7 !important;
  transition: opacity 0.05s ease !important;
}

.theme-toggle:active {
  transform: scale(0.90) !important;
  transition: transform 0.08s ease !important;
}

[class*="toggle-pill"]:active,
[class*="pill-btn"]:active,
.toggle-btn:active {
  transform: scale(0.96) !important;
  transition: transform 0.05s ease !important;
}

.btn-copy:active {
  transform: scale(0.95) !important;
  transition: transform 0.05s ease !important;
}

.tilt-card:active {
  transition: transform 0.08s ease !important;
}

/* ── FIX 4: FAST SHADOW TECHNIQUE ────────────── */
.blog-card {
  transition: transform 0.25s cubic-bezier(0.16,1,0.3,1) !important;
}

.blog-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 60px rgba(0,0,0,0.14),
              0 4px 16px rgba(0,0,0,0.08);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  z-index: -1;
}

.blog-card:hover::before {
  opacity: 1;
}

/* ── FIX 6: CSS CONTAINMENT ─────────────────── */
.tool-card,
[class*="tool-card"] {
  contain: layout style;
}

[class*="quiz-step"],
[data-step] {
  contain: layout style;
}

[class*="results-panel"],
[class*="results-section"],
#results {
  contain: layout style;
}

.faq-list,
[class*="faq-list"],
[class*="faq-container"] {
  contain: layout style;
}

.faq-accordion-item {
  contain: layout;
}

[class*="pills-grid"],
[class*="deduction-grid"] {
  contain: layout style;
}

[class*="result-card"] {
  contain: layout style;
}

.ad-slot,
[class*="ad-slot"] {
  contain: strict;
}

/* ── FIX 9: CONTENT-VISIBILITY ──────────────── */
[class*="how-it-works"],
[class*="deduction-categories"],
[class*="social-proof"],
[class*="savings-table"],
[class*="blog-preview"],
[class*="faq-section"],
[class*="cta-banner"] {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

[class*="faq-section"] {
  contain-intrinsic-size: 0 800px;
}

footer {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px;
}

/* ── FIX 10: POINTER OPTIMIZATION ────────────── */
button,
[role="button"],
.quiz-option,
.deduction-pill,
.step-tab,
.step-pill,
.faq-item button,
.toggle-btn,
.theme-toggle,
.btn-copy,
nav a,
footer a {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}

p, h1, h2, h3, h4, h5, h6,
.stat-number, .ad-slot,
.hero-float-1, .hero-float-2, .hero-float-3,
[aria-hidden="true"] {
  pointer-events: none;
}

p a, p button {
  pointer-events: auto;
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE (< 768px)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  body { padding-bottom: 50px; }
  .container { padding: 0 16px; }
  .header-nav { display: none; }
  .mobile-menu-btn { display: flex; }
  .header-badge { display: none; }

  .hero { padding: 32px 0 40px; min-height: auto; }
  .hero-stats { flex-direction: column; gap: 16px; }
  .hero-stat + .hero-stat { border-left: none; border-top: 1px solid rgba(255,255,255,0.12); padding-top: 16px; }
  .hero-trust-items { flex-direction: column; gap: 6px; font-size: 13px; }
  .hero-trust-items span + span::before { display: none; }

  .tool-float-wrapper { padding: 0 12px; }
  .tool-float-card { border-radius: 16px; }
  .tool-header { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 24px 0; }
  .step-tabs { align-self: stretch; justify-content: center; }
  .step-header { padding: 0 24px; }
  .step-panel.active .container { padding: 0 24px; }

  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .input-currency, #gross-income, #w2-income { height: 54px; font-size: 20px; padding-left: 42px; }
  .input-prefix { font-size: 20px; left: 16px; }
  select { height: 52px; }

  .step2-layout { grid-template-columns: 1fr; gap: 0; }
  .step2-sidebar { display: none; }
  .desktop-only { display: none !important; }
  .mobile-sticky-bar { display: block; }

  .categories-container { grid-template-columns: repeat(2, 1fr) !important; gap: 6px; }
  .deduction-card-header { padding: 10px 12px; gap: 8px; }
  .deduction-card-header label strong { font-size: 13px; }
  .deduction-card-header label span { font-size: 11px; }
  .deduction-card-body { padding: 0 12px; }
  .often-missed-badge { font-size: 9px; padding: 1px 6px; }
  .cat-amount-group input { height: 44px; font-size: 16px; }

  .tool-trust-bar { gap: 12px; padding: 8px 16px 0; }
  .tool-trust-bar span { font-size: 10px; }
  .tool-trust-bar span:nth-child(3) { display: none; }

  .section-white, .section-gray, .section-dark, .section-green { padding: 64px 0; }
  .how-it-works-grid { grid-template-columns: 1fr; gap: 16px; }
  .how-step-card { padding: 24px; }
  .dark-stat-grid { grid-template-columns: 1fr; gap: 16px; }
  .blog-preview-grid { grid-template-columns: 1fr; gap: 16px; }
  .savings-table thead th, .savings-table tbody td { padding: 10px 8px; font-size: 12px; }
  .savings-table thead th h5 { font-size: 10px !important; }
  .savings-table-wrap { margin: 0 -16px; border-radius: 0; border-left: none; border-right: none; }
  .savings-table { border-collapse: separate; border-spacing: 0; }
  .savings-table thead th { border: 1px solid rgba(255,255,255,0.2); border-bottom: none; }
  .savings-table thead th + th { border-left: none; }
  .savings-table tbody td { border: 1px solid #94A3B8; border-top: none; }
  .savings-table tbody td + td { border-left: none; }
  .savings-table thead th { border-right: 1px solid rgba(255,255,255,0.3); }
  .savings-table tbody td:not(:last-child) { border-right: 1px solid #94A3B8; }

  .section-header-center h2, .blog-section-header h2 { font-size: 24px; }
  .section-green h2, .bottom-cta-heading { font-size: 28px; }
  .dark-trust-items { flex-direction: column; gap: 6px; text-align: center; }
  .dark-trust-items span + span::before { display: none; }

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom-bar { flex-direction: column; gap: 4px; text-align: center; }

  .ad-desktop-only { display: none !important; }
  .ad-mobile-only { display: flex !important; }
  .mobile-bottom-bar { display: block !important; }
  .ad-slot-wrapper { padding: 20px 0; }

  .results-layout { grid-template-columns: 1fr; }
  .results-sidebar { display: none; }
  .quarterly-grid { grid-template-columns: 1fr 1fr; }
  .page-content .container { grid-template-columns: 1fr; }
  .page-sidebar { display: none; }
  .page-hero h1 { font-size: clamp(24px,6vw,36px); }
  .page-hero p, .page-subtitle { font-size: 15px; max-width: 100%; }

  .faq-accordion-item .faq-question { font-size: 14.5px; padding: 16px 18px; }
  .faq-accordion-item .faq-answer { padding: 0 18px 16px; }
  .faq-accordion-item .faq-answer p { font-size: 14px; line-height: 1.75; }
  .faq-category-header { font-size: 12px; margin: 32px 0 12px; }
  .faq-tools-banner { padding: 18px 20px; }
  .blog-listing-grid { grid-template-columns: 1fr; }
  .read-next-grid { grid-template-columns: 1fr; }
  .about-diff-grid { grid-template-columns: 1fr; }

  /* ── FIX 8: MOBILE CLICK PERFORMANCE ── */
  @media (hover: none) {
    .blog-card:hover,
    .deduction-pill:hover,
    .quiz-option:hover,
    .step-pill:hover,
    .faq-accordion-item:hover,
    nav a:hover,
    .btn-primary:hover {
      transform: none !important;
      box-shadow: none !important;
    }
    .blog-card::before,
    .tilt-card::before {
      display: none !important;
    }
  }

  button,
  [role="button"],
  .quiz-option,
  .deduction-pill,
  .step-pill,
  .faq-item button,
  .toggle-btn {
    transition-duration: 0.08s !important;
  }

  .hero-float-1,
  .hero-float-2,
  .hero-float-3 {
    animation: none !important;
    display: none !important;
  }

  .progress-bar-fill::after {
    animation: none !important;
    display: none !important;
  }

  .loader-logo {
    animation: loader-pulse 1.2s ease-in-out infinite !important;
  }
}

@page {
  margin: 0;
  size: A4;
}

.print-header,
.print-footer {
  display: none;
}

@media print {
  @page {
    margin: 0;
    size: A4;
  }

  /* Hide screen-only elements */
  .site-header,.trust-strip,.site-footer,.mobile-bottom-bar,.ad-slot-wrapper,.results-sidebar,.results-actions,.bottom-cta,.section-green,.mobile-sticky-bar,.share-toast { display: none !important; }
  .results-layout { grid-template-columns: 1fr; }
  body { background: #fff; padding-bottom: 0; padding-top: 0 !important; }
  .hero-amount-value { color: #000 !important; }

  /* Show print-only header */
  .print-header {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1B2E4B;
    padding: 10px 28px;
  }
  .print-header-inner {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .print-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .print-header-sep {
    color: rgba(255,255,255,0.2);
    font-size: 14px;
  }
  .print-header-tagline {
    color: rgba(255,255,255,0.55);
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.3px;
  }
  .print-header-url {
    color: #22C55E;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
  }

  /* Show print-only footer */
  .print-footer {
    display: block !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #1B2E4B;
    padding: 8px 28px;
  }
  .print-footer-inner {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .print-footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .print-footer-sep {
    color: rgba(255,255,255,0.25);
    font-size: 12px;
  }
  .print-footer-disclaimer {
    color: rgba(255,255,255,0.4);
    font-family: 'Inter', sans-serif;
    font-size: 9px;
  }
  .print-footer-url {
    color: #22C55E;
    font-family: 'Inter', sans-serif;
    font-size: 10px;
    font-weight: 600;
  }

  /* Add padding so content doesn't overlap fixed header/footer */
  .results-hero {
    padding-top: 60px !important;
    margin-top: 0 !important;
  }
  body {
    padding-bottom: 40px !important;
  }

  /* Print disclaimer header (LAYER 3C) */
  body::before {
    content: "\26A0 TAXNINJA ESTIMATE \2014 NOT OFFICIAL TAX ADVICE \2014 taxninja.site \2014 " attr(data-print-date);
    display: block;
    background: #FEF3C7;
    border: 2px solid #D97706;
    color: #92400E;
    padding: 12px 20px;
    font-family: Arial, sans-serif;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  /* Print disclaimer footer (LAYER 3C) */
  body::after {
    content: "This document contains ESTIMATES ONLY generated by TaxNinja (taxninja.site). It is NOT tax advice, NOT prepared by a licensed CPA, and should NOT be used for actual tax filing. Consult a licensed tax professional for official tax preparation.";
    display: block;
    margin-top: 30px;
    padding: 16px;
    border-top: 2px solid #DC2626;
    font-family: Arial, sans-serif;
    font-size: 10pt;
    color: #DC2626;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   BLOG INDEX PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── Blog Hero ── */
.blog-hero {
  background: #1B2E4B;
  padding: 80px 24px 60px;
  text-align: center;
}
.blog-hero-inner {
  max-width: 720px;
  margin: 0 auto;
}
.blog-hero-eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #22C55E;
  margin-bottom: 16px;
}
.blog-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 16px;
}
.blog-hero .text-green { color: #22C55E; }
.blog-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  color: #94A3B8;
  line-height: 1.65;
  margin: 0 0 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.blog-hero-stats {
  display: flex;
  justify-content: center;
  gap: 40px;
}
.blog-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.blog-hero-stat-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
}
.blog-hero-stat-label {
  font-size: 12px;
  color: #64748B;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ── Featured Article Card ── */
.blog-featured-section {
  background: #FFFFFF;
  padding: 48px 24px;
}
.blog-featured-card {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 40px;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
  border: 1px solid var(--c-border, #E2E8F0);
}
.blog-featured-left {
  padding: 36px 36px 36px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.blog-featured-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #F59E0B;
  align-self: flex-start;
}
.blog-featured-left h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: var(--c-text, #0F172A);
  line-height: 1.25;
  margin: 0;
}
.blog-featured-meta {
  font-size: 13px;
  color: var(--c-muted, #64748B);
  margin: 0;
}
.blog-featured-excerpt {
  font-size: 15px;
  color: #475569;
  line-height: 1.65;
  margin: 0;
}
.blog-featured-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.blog-tag-pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 99px;
  background: #F1F5F9;
  color: #475569;
}
.blog-featured-cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 700;
  color: #22C55E;
  text-decoration: none;
  margin-top: 4px;
  transition: color 0.15s;
}
.blog-featured-cta:hover { color: #16A34A; }

/* Featured mockup */
.blog-featured-right {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1B2E4B;
  padding: 40px 32px;
}
.blog-featured-mockup {
  background: #111D33;
  border-radius: 12px;
  padding: 24px;
  width: 100%;
  max-width: 260px;
  border: 1px solid rgba(255,255,255,0.06);
}
.mockup-title {
  font-size: 12px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.mockup-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin: 10px 0;
}
.mockup-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #CBD5E1;
  padding: 4px 0;
}
.mockup-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.mockup-val.green { color: #22C55E; }
.mockup-val.big { font-size: 20px; }
.mockup-total .mockup-row { padding-top: 8px; }
.mockup-note {
  font-size: 11px;
  color: #64748B;
  text-align: right;
  margin-top: 8px;
}

/* ── Filter Bar ── */
.blog-filter-section {
  background: #fff;
  padding: 24px 24px 8px;
  border-bottom: 1px solid #E2E8F0;
  position: sticky;
  top: 60px;
  z-index: 50;
}
.blog-filter-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.blog-filter-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #94A3B8;
  display: block;
  margin-bottom: 12px;
}
.blog-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.blog-filter-pill {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 99px;
  border: 1.5px solid #E2E8F0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.blog-filter-pill:hover {
  border-color: #22C55E;
  color: #22C55E;
}
.blog-filter-pill.active {
  background: #22C55E;
  border-color: #22C55E;
  color: #fff;
}

/* ── Blog Cards Grid ── */
.blog-grid-section {
  background: #FFFFFF;
  padding: 40px 24px 64px;
}
.blog-grid {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.blg-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #E2E8F0;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blg-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.blg-card-bar {
  height: 4px;
  flex-shrink: 0;
}
.blg-card-body {
  padding: 24px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.blg-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.blg-card-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 4px;
}
.blg-card-read-time {
  font-size: 12px;
  color: #94A3B8;
}
.blg-card-body h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--c-text, #0F172A);
  line-height: 1.35;
  margin: 0;
}
.blg-card-date {
  font-size: 12px;
  color: #94A3B8;
  margin: 0;
}
.blg-card-excerpt {
  font-size: 14px;
  color: #64748B;
  line-height: 1.6;
  margin: 0;
  flex: 1;
}
.blg-card-footer {
  padding: 12px 24px 20px;
  border-top: 1px solid #F1F5F9;
}
.blg-card-link {
  font-size: 13px;
  font-weight: 700;
  color: #22C55E;
  text-decoration: none;
  transition: color 0.15s;
}
.blg-card-link:hover { color: #16A34A; }
.blg-arrow {
  transition: transform 0.15s;
  display: inline-block;
}
.blg-card-link:hover .blg-arrow { transform: translateX(3px); }

/* ── Newsletter CTA Strip ── */
.blog-cta-section {
  background: #1B2E4B;
  padding: 56px 24px;
  text-align: center;
}
.blog-cta-inner {
  max-width: 560px;
  margin: 0 auto;
}
.blog-cta-inner h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px;
}
.blog-cta-inner > p {
  font-size: 16px;
  color: #94A3B8;
  margin: 0 0 20px;
  line-height: 1.6;
}
.blog-cta-trust {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 24px;
}
.blog-cta-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 32px;
  border-radius: 10px;
  background: #22C55E;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.blog-cta-btn:hover {
  background: #16A34A;
  transform: translateY(-1px);
}

/* ── Related Tools Strip ── */
.blog-tools-section {
  background: #FFFFFF;
  padding: 56px 24px 72px;
}
.blog-tools-inner {
  max-width: 1120px;
  margin: 0 auto;
}
.blog-tools-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.5px;
  color: #22C55E;
  display: block;
  text-align: center;
  margin-bottom: 8px;
}
.blog-tools-inner h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: var(--c-text, #0F172A);
  text-align: center;
  margin: 0 0 32px;
}
.blog-tools-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.blog-tool-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.blog-tool-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.07);
}
.blog-tool-icon {
  font-size: 24px;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 10px;
}
.blog-tool-body { flex: 1; }
.blog-tool-body h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text, #0F172A);
  margin: 0 0 6px;
}
.blog-tool-body p {
  font-size: 13px;
  color: #64748B;
  line-height: 1.55;
  margin: 0;
}
.blog-tool-link {
  font-size: 13px;
  font-weight: 700;
  color: #22C55E;
  white-space: nowrap;
  flex-shrink: 0;
  align-self: center;
}

/* ═══════════════════════════════════════════════════════════════
   ARTICLE PAGE STYLES
   ═══════════════════════════════════════════════════════════════ */

/* ── Article Hero ── */
.article-hero {
  background: #1B2E4B;
  padding: 48px 24px 48px;
}
.article-hero-inner {
  max-width: 780px;
  margin: 0 auto;
}
.article-breadcrumb {
  font-size: 13px;
  color: #64748B;
  margin-bottom: 16px;
}
.article-breadcrumb a {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.15s;
}
.article-breadcrumb a:hover { color: #fff; }
.article-breadcrumb .sep {
  margin: 0 8px;
  color: #475569;
}
.article-hero-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  padding: 4px 12px;
  border-radius: 4px;
  margin-bottom: 16px;
}
.article-hero h1 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
  margin: 0 0 16px;
}
.article-hero-meta {
  font-size: 13px;
  color: #94A3B8;
  margin: 0 0 12px;
}
.article-hero-deck {
  font-size: 16px;
  color: #CBD5E1;
  line-height: 1.65;
  margin: 0;
}

/* ── Article Body Layout ── */
.article-body-section {
  background: #FFFFFF;
  padding: 40px 24px 32px;
}
.article-body-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
.article-content-area {
  min-width: 0;
}
.article-content-card {
  background: #fff;
  border-radius: 12px;
  padding: 40px 40px 48px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ── Article Typography ── */
.article-content-card p {
  font-family: 'Inter', sans-serif;
  font-size: 15.5px;
  color: #334155;
  line-height: 1.75;
  margin: 0 0 18px;
}
.article-content-card p:last-child { margin-bottom: 0; }
.article-content-card h2 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #0F172A;
  margin: 40px 0 14px;
  line-height: 1.25;
}
.article-content-card h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #1E293B;
  margin: 32px 0 12px;
  line-height: 1.3;
}
.article-content-card h4 {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #334155;
  margin: 24px 0 10px;
  line-height: 1.35;
}
.article-content-card h5 {
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  color: #475569;
  margin: 20px 0 8px;
  line-height: 1.4;
}
.article-content-card h6 {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #64748B;
  margin: 18px 0 6px;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.article-content-card strong {
  color: #0F172A;
  font-weight: 700;
}
.article-content-card a {
  color: #16A34A;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.article-content-card a:hover { color: #15803D; }
.article-content-card ul,
.article-content-card ol {
  margin: 0 0 18px 20px;
  padding: 0;
}
.article-content-card li {
  font-size: 15px;
  color: #334155;
  line-height: 1.7;
  margin-bottom: 6px;
}
.article-content-card li:last-child { margin-bottom: 0; }

/* ── Article Callout Boxes ── */
.article-callout {
  background: #F0FDF4;
  border-left: 4px solid #22C55E;
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.article-callout p {
  font-size: 14.5px;
  color: #15803D;
  margin: 0;
  line-height: 1.65;
}
.article-callout p:last-child { margin-bottom: 0; }
.article-callout strong {
  color: #166534 !important;
}

.article-warning {
  background: #FFFBEB;
  border-left: 4px solid #F59E0B;
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 24px 0;
}
.article-warning p {
  font-size: 14.5px;
  color: #92400E;
  margin: 0;
  line-height: 1.65;
}
.article-warning p:last-child { margin-bottom: 0; }
.article-warning strong {
  color: #78350F !important;
}

/* ── Article Tables ── */
.article-table-wrap {
  overflow-x: auto;
  margin: 24px 0;
  border-radius: 10px;
  border: 1px solid #E2E8F0;
}
.article-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
}
.article-table thead {
  background: #F8FAFC;
}
.article-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 700;
  font-size: 12px;
  color: #64748B;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  border-bottom: 2px solid #E2E8F0;
}
.article-table td {
  padding: 12px 16px;
  color: #334155;
  border-bottom: 1px solid #F1F5F9;
}
.article-table tbody tr:last-child td { border-bottom: none; }
.article-table tbody tr:hover { background: #F8FAFC; }

/* ── Article Sidebar ── */
.article-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 120px;
}
.article-sidebar-cta {
  background: #fff;
  border-radius: 12px;
  padding: 28px 24px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  text-align: center;
}
.article-sidebar-logo {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  margin: 0 auto 16px;
  display: block;
}
.article-sidebar-cta h3 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 8px;
}
.article-sidebar-cta > p {
  font-size: 13px;
  color: #64748B;
  line-height: 1.55;
  margin: 0 0 18px;
}
.article-sidebar-btn {
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 8px;
  background: #22C55E;
  color: #fff;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.article-sidebar-btn:hover {
  background: #16A34A;
  transform: translateY(-1px);
}
.article-sidebar-divider {
  height: 1px;
  background: #E2E8F0;
  margin: 18px 0;
}
.article-sidebar-link {
  display: block;
  font-size: 13px;
  color: #475569;
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.15s;
}
.article-sidebar-link:hover { color: #22C55E; }

/* Related articles card */
.article-related-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  border: 1px solid #E2E8F0;
}
.article-related-card h4 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #94A3B8;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 16px;
}
.article-related-item {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid #F1F5F9;
  text-decoration: none;
}
.article-related-item:last-child { border-bottom: none; }
.article-related-item-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  line-height: 1.4;
}
.article-related-item:hover .article-related-item-title { color: #22C55E; }
.article-related-arrow {
  color: #CBD5E1;
  flex-shrink: 0;
  font-size: 14px;
  transition: color 0.15s;
}
.article-related-item:hover .article-related-arrow { color: #22C55E; }

/* ── Article Bottom Section ── */
.article-bottom-section {
  background: #FFFFFF;
  padding: 0 24px 48px;
}
.article-bottom-inner {
  max-width: 780px;
  margin: 0 auto;
}
.article-back-link {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.15s;
}
.article-back-link:hover { color: #22C55E; }

/* Feedback widget */
.article-feedback {
  background: #fff;
  border-radius: 12px;
  padding: 28px 32px;
  border: 1px solid #E2E8F0;
  margin-bottom: 20px;
  text-align: center;
}
.article-feedback-title {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0F172A;
  margin: 0 0 16px;
}
.article-feedback-btns {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.article-feedback-btn {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 24px;
  border-radius: 8px;
  border: 1.5px solid #E2E8F0;
  background: #fff;
  color: #475569;
  cursor: pointer;
  transition: all 0.15s;
}
.article-feedback-btn:hover {
  border-color: #22C55E;
  color: #22C55E;
  background: #F0FDF4;
}
.article-feedback-thanks {
  display: none;
  font-size: 14px;
  color: #22C55E;
  font-weight: 600;
  padding: 12px 0;
}
.article-feedback-thanks.visible {
  display: block;
}

/* Disclaimer */
.article-disclaimer {
  background: #FFFBEB;
  border-radius: 10px;
  padding: 18px 22px;
  border: 1px solid #FDE68A;
}
.article-disclaimer p {
  font-size: 13px;
  color: #92400E;
  line-height: 1.6;
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG & ARTICLE RESPONSIVE STYLES
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .blog-featured-card {
    grid-template-columns: 1fr;
  }
  .blog-featured-right {
    padding: 32px 24px;
  }
  .blog-featured-mockup {
    max-width: 300px;
    margin: 0 auto;
  }
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .article-body-inner {
    grid-template-columns: 1fr 260px;
    gap: 28px;
  }
}

@media (max-width: 768px) {
  .blog-hero {
    padding: 56px 20px 44px;
  }
  .blog-hero-stats {
    gap: 24px;
  }
  .blog-hero-stat-num {
    font-size: 22px;
  }
  .blog-featured-left {
    padding: 24px;
  }
  .blog-featured-left h2 {
    font-size: 20px;
  }
  .blog-featured-right {
    display: none;
  }
  .blog-filter-section {
    top: 56px;
    padding: 16px 16px 8px;
  }
  .blog-filter-pills {
    overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .blog-filter-pill {
    flex-shrink: 0;
    font-size: 12px;
    padding: 7px 14px;
  }
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .blog-tools-grid {
    grid-template-columns: 1fr;
  }

  /* Article responsive */
  .article-hero {
    padding: 36px 20px 32px;
  }
  .article-body-section {
    padding: 24px 16px 24px;
  }
  .article-body-inner {
    grid-template-columns: 1fr;
  }
  .article-sidebar {
    position: static;
    order: 2;
    flex-direction: row;
    gap: 16px;
  }
  .article-sidebar-cta {
    flex: 1;
  }
  .article-related-card {
    display: none;
  }
  .article-content-card {
    padding: 28px 24px 36px;
  }
  .article-content-card h2 {
    font-size: 20px;
    margin: 28px 0 12px;
  }
  .article-content-card h3 {
    font-size: 17px;
    margin: 24px 0 10px;
  }
  .article-content-card p {
    font-size: 15px;
    line-height: 1.7;
  }
  .article-bottom-section {
    padding: 0 16px 40px;
  }
}

@media (max-width: 480px) {
  .blog-hero h1 {
    font-size: 26px;
  }
  .blog-hero-subtitle {
    font-size: 15px;
  }
  .blog-hero-stats {
    flex-direction: column;
    gap: 12px;
    align-items: center;
  }
  .blg-card-body {
    padding: 20px;
  }
  .blg-card-body h3 {
    font-size: 15.5px;
  }
  .article-hero h1 {
    font-size: 24px;
  }
  .article-content-card {
    padding: 22px 18px 32px;
  }
  .article-content-card h2 {
    font-size: 19px;
  }
  .article-sidebar {
    flex-direction: column;
  }
  .article-feedback-btns {
    flex-direction: column;
    gap: 8px;
  }
  .article-feedback-btn {
    width: 100%;
    text-align: center;
  }
}

/* ═══════════════════════════════════════════════════════════════
   DATA VISUALIZATION GRAPHS
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared Graph Section ── */
.graph-section { padding: 80px 0; }
.graph-container { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* ── Donut Chart (Tax Calculator) ── */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 56px;
  flex-wrap: wrap;
  justify-content: center;
}
.donut-chart {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #1E293B 0% 15.3%,
    #475569 15.3% 27.8%,
    #22C55E 27.8% 38.1%,
    #BBF7D0 38.1% 100%
  );
  position: relative;
  flex-shrink: 0;
  transform: scale(0.85);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.16,1,0.3,1), opacity 0.6s ease;
}
.revealed .donut-chart { transform: scale(1); opacity: 1; }
.donut-hole {
  position: absolute;
  inset: 32px;
  border-radius: 50%;
  background: var(--c-surface, #fff);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.donut-hole .donut-amount {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 800;
  font-size: 26px;
  color: var(--c-text, #0F172A);
  line-height: 1;
}
.donut-hole .donut-label {
  font-size: 11px;
  color: #059669;
  margin-top: 3px;
  font-weight: 500;
}
.donut-legend { display: flex; flex-direction: column; gap: 14px; }
.legend-item { display: flex; align-items: center; gap: 10px; }
.legend-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.legend-text { font-size: 14px; color: var(--c-muted, #475569); font-weight: 500; flex: 1; opacity: 1; }
.legend-pct {
  font-size: 14px;
  color: var(--c-text, #0F172A);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 42px;
  text-align: right;
  opacity: 1;
}

/* ── Horizontal Bar Chart (Deduction Finder) ── */
.bar-chart { display: flex; flex-direction: column; gap: 16px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label {
  width: 150px;
  font-size: 13px;
  font-weight: 600;
  color: var(--c-muted, #475569);
  text-align: right;
  flex-shrink: 0;
  line-height: 1.3;
  opacity: 1;
}
.bar-track {
  flex: 1;
  height: 30px;
  background: #F1F5F9;
  border-radius: 6px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: 6px;
  width: 0;
  transition: width 1.2s cubic-bezier(0.16,1,0.3,1);
}
.revealed .bar-fill { width: var(--w, 0%); }
.bar-value {
  width: 65px;
  font-size: 14px;
  font-weight: 700;
  color: var(--c-text, #0F172A);
  flex-shrink: 0;
  opacity: 1;
}

/* ── Quarterly Timeline Chart ── */
.timeline-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 0;
  padding: 24px 0 0;
  position: relative;
}
.timeline-track {
  position: absolute;
  bottom: 52px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: #E2E8F0;
  border-radius: 99px;
}
.timeline-track-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #22C55E, #16A34A);
  border-radius: 99px;
  transition: width 1.6s cubic-bezier(0.16,1,0.3,1) 0.3s;
}
.revealed .timeline-track-fill { width: var(--w, 0%); }
.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  position: relative;
  z-index: 1;
}
.timeline-pct {
  font-size: 13px;
  font-weight: 700;
  color: #22C55E;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease 0.8s, transform 0.4s ease 0.8s;
}
.revealed .timeline-pct { opacity: 1; transform: translateY(0); }
.timeline-col {
  width: 44px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, #22C55E, #16A34A);
  height: 0;
  transition: height 1s cubic-bezier(0.16,1,0.3,1);
}
.revealed .timeline-col { height: var(--h, 0px); }
.timeline-dot {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22C55E;
  border: 3px solid var(--c-surface, #fff);
  box-shadow: 0 0 0 2px #22C55E;
  position: relative;
  flex-shrink: 0;
}
.timeline-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #fff;
}
.timeline-date {
  font-size: 13px;
  font-weight: 700;
  color: var(--c-text, #0F172A);
  margin-top: 4px;
}
.timeline-period {
  font-size: 11px;
  color: var(--c-muted, #64748B);
}

/* ── Graph dark mode ── */
[data-theme="dark"] .donut-hole { background: var(--c-navy); }
[data-theme="dark"] .donut-hole .donut-amount { color: #fff; }
[data-theme="dark"] .donut-hole .donut-label { color: #34D399; }
[data-theme="dark"] .bar-track { background: #1E293B; }
[data-theme="dark"] .bar-label { color: #8B949E; }
[data-theme="dark"] .bar-value { color: #E6EDF3; }
[data-theme="dark"] .timeline-date { color: #E2E8F0; }
[data-theme="dark"] .legend-text { color: #8B949E; }
[data-theme="dark"] .legend-pct { color: #E6EDF3; }
[data-theme="dark"] .timeline-track { background: #1E293B; }
[data-theme="dark"] .timeline-dot { border-color: var(--c-navy); }

/* ── Graph responsive ── */
@media (max-width: 640px) {
  .graph-section { padding: 56px 0; }
  .donut-wrap { flex-direction: column; gap: 32px; }
  .donut-chart { width: 180px; height: 180px; }
  .donut-hole { inset: 28px; }
  .donut-hole .donut-amount { font-size: 22px; }
  .bar-label { width: 110px; font-size: 12px; }
  .bar-track { height: 26px; }
  .bar-value { width: 55px; font-size: 12px; }
  .timeline-col { width: 36px; }
  .timeline-date { font-size: 12px; }
  .timeline-period { font-size: 10px; }
  .timeline-pct { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   ADVANCED GRAPH SECTIONS (Dark-themed, glassmorphism style)
   ═══════════════════════════════════════════════════════════════ */

.adv-graph-section {
  background: #1B2E4B;
  padding: 96px 0;
  position: relative;
  overflow: hidden;
}

/* Subtle grid pattern overlay */
.adv-graph-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}

/* Subtle radial glow in background */
.adv-graph-section::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 600px;
  height: 400px;
  background: radial-gradient(ellipse, rgba(34,197,94,0.04) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Waterfall Chart (index.html) ── */
.waterfall-wrap {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.waterfall-svg {
  width: 100%;
  height: auto;
  display: block;
}
.waterfall-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.wf-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.wf-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* ── Radial Gauge v2 (deduction-finder.html) ── */
.rg2-layout {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.rg2-chart-col {
  flex-shrink: 0;
  width: 440px;
}
.rg2-svg {
  width: 100%;
  height: auto;
  display: block;
}
.rg2-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.rg2-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rg2-stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, background 0.3s, transform 0.2s;
}
.rg2-stat-card:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  transform: translateX(4px);
}
.rg2-stat-left {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.rg2-stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rg2-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.rg2-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  line-height: 1.45;
}
.rg2-stat-badge {
  flex-shrink: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Breakdown bars */
.rg2-breakdown {
  padding: 20px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 14px;
}
.rg2-breakdown-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 16px 0;
}
.rg2-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.rg2-bar-row:last-child {
  margin-bottom: 0;
}
.rg2-bar-label {
  flex-shrink: 0;
  width: 80px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  text-align: right;
}
.rg2-bar-track {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.rg2-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}
.rg2-bar-value {
  flex-shrink: 0;
  width: 52px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}

/* Responsive: rg2 */
@media (max-width: 960px) {
  .rg2-layout {
    flex-direction: column;
    gap: 40px;
    align-items: center;
  }
  .rg2-chart-col {
    width: 360px;
  }
  .rg2-info-col {
    width: 100%;
    max-width: 480px;
  }
}
@media (max-width: 480px) {
  .rg2-chart-col {
    width: 300px;
  }
  .rg2-stat-card {
    padding: 12px 14px;
    gap: 10px;
  }
  .rg2-stat-left {
    width: 36px;
    height: 36px;
  }
  .rg2-stat-left svg {
    width: 18px;
    height: 18px;
  }
  .rg2-stat-value {
    font-size: 16px;
  }
  .rg2-stat-badge {
    display: none;
  }
  .rg2-bar-label {
    width: 64px;
    font-size: 11px;
  }
  .rg2-bar-value {
    width: 46px;
    font-size: 11px;
  }
}

/* ── Payment Timeline Clock (quarterly-estimator.html) ── */
.ptc-layout {
  max-width: 1060px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.ptc-clock-col {
  flex-shrink: 0;
  width: 420px;
}
.ptc-svg {
  width: 100%;
  height: auto;
  display: block;
}
.ptc-info-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.ptc-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ptc-stat-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, background 0.3s, transform 0.2s;
}
.ptc-stat-card:hover {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.04);
  transform: translateX(4px);
}
.ptc-stat-left {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
}
.ptc-stat-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ptc-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.ptc-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.38);
  line-height: 1.4;
}

/* Period coverage bars */
.ptc-coverage {
  padding: 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 12px;
}
.ptc-coverage-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin: 0 0 14px 0;
}
.ptc-period-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.ptc-period-row:last-child {
  margin-bottom: 0;
}
.ptc-period-label {
  flex-shrink: 0;
  width: 110px;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
  text-align: right;
}
.ptc-period-bar-wrap {
  flex: 1;
  height: 6px;
  background: rgba(255,255,255,0.04);
  border-radius: 3px;
  overflow: hidden;
}
.ptc-period-bar {
  height: 100%;
  border-radius: 3px;
  transition: width 1s ease;
}
.ptc-period-months {
  flex-shrink: 0;
  width: 36px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.45);
}
.ptc-note {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  line-height: 1.6;
  margin: 0;
}

/* Responsive: ptc */
@media (max-width: 960px) {
  .ptc-layout {
    flex-direction: column;
    gap: 36px;
    align-items: center;
  }
  .ptc-clock-col {
    width: 340px;
  }
  .ptc-info-col {
    width: 100%;
    max-width: 480px;
  }
}
@media (max-width: 480px) {
  .ptc-clock-col {
    width: 290px;
  }
  .ptc-stat-card {
    padding: 10px 12px;
    gap: 10px;
  }
  .ptc-stat-left {
    width: 34px;
    height: 34px;
  }
  .ptc-stat-left svg {
    width: 16px;
    height: 16px;
  }
  .ptc-stat-value {
    font-size: 14px;
  }
  .ptc-period-label {
    width: 90px;
    font-size: 10px;
  }
}

/* ── Radial Gauge v1 (kept for backwards compat) ── */
.radial-gauge-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 48px;
  position: relative;
  z-index: 1;
}
.radial-gauge-main {
  flex-shrink: 0;
  width: 380px;
}
.radial-svg {
  width: 100%;
  height: auto;
  display: block;
}
.radial-gauge-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.rg-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  backdrop-filter: blur(8px);
  transition: border-color 0.3s, background 0.3s;
}
.rg-stat-card:hover {
  border-color: rgba(34,197,94,0.15);
  background: rgba(34,255,255,0.05);
}
.rg-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border-radius: 8px;
  margin-top: 2px;
}
.rg-stat-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.rg-stat-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.rg-stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,0.4);
  line-height: 1.5;
}

/* ── Area Chart (quarterly-estimator.html) ── */
.area-chart-wrap {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
.area-svg {
  width: 100%;
  height: auto;
  display: block;
}
.area-chart-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.ac-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.5);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}
.ac-legend-line {
  width: 24px;
  height: 3px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Scroll hint hidden on desktop */
.chart-scroll-hint { display: none; }

/* ── Advanced Graphs Responsive ── */
@media (max-width: 768px) {
  .adv-graph-section { padding: 64px 0; }
  .radial-gauge-wrap {
    flex-direction: column;
    gap: 36px;
  }
  .radial-gauge-main {
    width: 300px;
  }
  .waterfall-legend,
  .area-chart-legend {
    gap: 14px;
  }
  .wf-legend-item,
  .ac-legend-item {
    font-size: 11px;
    gap: 6px;
  }
  .rg-stat-value { font-size: 18px; }
  .rg-stat-label { font-size: 12px; }
}

@media (max-width: 640px) {
  .adv-graph-section { padding: 48px 0; }

  /* Scrollable wide charts — keep SVGs readable */
  .waterfall-wrap,
  .area-chart-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -16px;
    padding: 0 16px;
    scroll-snap-type: x proximity;
  }
  .waterfall-svg,
  .area-svg {
    min-width: 580px;
    width: auto !important;
    scroll-snap-align: center;
  }
  .waterfall-wrap::after,
  .area-chart-wrap::after {
    content: '';
    display: block;
    min-width: 580px;
    pointer-events: none;
  }

  /* Hide Y-axis labels on mobile (too small to read) */
  .hide-mobile { display: none !important; }

  /* Scroll hint for wide charts */
  .chart-scroll-hint {
    display: block;
    text-align: center;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(255,255,255,0.25);
    margin-bottom: 12px;
    letter-spacing: 0.3px;
    animation: hint-pulse 2s ease-in-out 2;
  }
  @keyframes hint-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 0.5; }
  }

  /* Stack legends vertically */
  .waterfall-legend,
  .area-chart-legend {
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
  }
  .wf-legend-item,
  .ac-legend-item {
    font-size: 12px;
    gap: 8px;
  }

  /* Radial gauge: smaller ring, better card spacing */
  .radial-gauge-main { width: 280px; }
  .radial-gauge-wrap { gap: 28px; }
  .rg-stat-card { padding: 14px 16px; gap: 12px; }
  .rg-stat-icon { width: 34px; height: 34px; }
  .rg-stat-icon svg { width: 18px; height: 18px; }
  .rg-stat-value { font-size: 18px; }
  .rg-stat-label { font-size: 13px; color: rgba(255,255,255,0.5); }
}

@media (max-width: 400px) {
  .adv-graph-section { padding: 40px 0; }
  .waterfall-svg,
  .area-svg {
    min-width: 520px;
    width: auto !important;
  }
  .waterfall-wrap::after,
  .area-chart-wrap::after {
    min-width: 520px;
  }
  .radial-gauge-main { width: 240px; }
  .rg-stat-value { font-size: 16px; }
  .rg-stat-label { font-size: 12px; }
  .rg-stat-card { padding: 12px 14px; }
  .savings-table thead th, .savings-table tbody td { padding: 8px 5px; font-size: 11px; }
  .savings-table thead th h5 { font-size: 9px !important; letter-spacing: 0.02em !important; }
  .savings-table { border-collapse: separate; border-spacing: 0; }
  .savings-table thead th { border: 1px solid rgba(255,255,255,0.2); border-bottom: none; }
  .savings-table thead th + th { border-left: none; }
  .savings-table tbody td { border: 1px solid #94A3B8; border-top: none; }
  .savings-table tbody td + td { border-left: none; }
  .savings-table thead th { border-right: 1px solid rgba(255,255,255,0.3); }
  .savings-table tbody td:not(:last-child) { border-right: 1px solid #94A3B8; }
}

/* ═══════════════════════════════════════════════════════════════
   STEP 2 & 3 REDESIGN — Compact · Animated · Polished
   ═══════════════════════════════════════════════════════════════ */

/* ─── Keyframes ─── */
@keyframes cardSlideIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes checkPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@keyframes valuePulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}
@keyframes progressGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.3); }
  50%      { box-shadow: 0 0 12px rgba(34,197,94,0.5); }
}
@keyframes btnGlow {
  0%, 100% { box-shadow: 0 4px 20px rgba(34,197,94,0.30), 0 0 0 0 rgba(34,197,94,0.15); }
  50%      { box-shadow: 0 6px 28px rgba(34,197,94,0.40), 0 0 0 6px rgba(34,197,94,0); }
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes sidebarIn {
  from { opacity: 0; transform: translateX(16px) scale(0.96); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ─── Step 2 Layout ─── */
.step2-layout {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 14px;
  align-items: start;
  max-width: 100%;
}
.step2-right { position: sticky; top: 80px; }
/* Fix: content-visibility/contain on step2 grid children breaks layout */
.step2-categories {
  content-visibility: visible !important;
  contain-intrinsic-size: none !important;
  min-width: 0;
  overflow: visible;
}
#step-2[data-step] {
  contain: none !important;
}

/* ─── Step Header (compact) ─── */
#step-2 .step-header,
#step-3 .step-header {
  margin-bottom: 20px;
  animation: fadeSlideUp 0.4s ease both;
}
#step-2 .step-header h2,
#step-3 .step-header h2 {
  font-size: 22px;
  margin-bottom: 4px;
}
#step-2 .step-subtitle,
#step-3 .step-subtitle {
  font-size: 13.5px;
  color: #64748B;
  line-height: 1.5;
}

/* ─── Category Headers ─── */
.deduction-category-header {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 10px;
  color: #64748B;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 10px 0 6px;
  margin-top: 16px;
  margin-bottom: 6px;
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.deduction-category-header::before {
  content: '';
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg, #22C55E, #059669);
  flex-shrink: 0;
}
.deduction-category-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(100,116,139,0.15), transparent);
}
.deduction-category-header:first-child { margin-top: 0; }

/* ─── Deduction Cards Container ─── */
.categories-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  align-items: start;
  overflow: visible;
}

/* ─── Deduction Cards ─── */
.deduction-card {
  background: var(--c-surface, #FFFFFF);
  border: 1.5px solid var(--c-border, #E2E8F0);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s cubic-bezier(0.16,1,0.3,1), background 0.2s ease;
  position: relative;
  overflow: visible;
  animation: cardSlideIn 0.35s ease both;
}
/* Stagger children */
.categories-container > :nth-child(2)  { animation-delay: 0.02s; }
.categories-container > :nth-child(3)  { animation-delay: 0.04s; }
.categories-container > :nth-child(4)  { animation-delay: 0.06s; }
.categories-container > :nth-child(5)  { animation-delay: 0.08s; }
.categories-container > :nth-child(6)  { animation-delay: 0.10s; }
.categories-container > :nth-child(7)  { animation-delay: 0.12s; }
.categories-container > :nth-child(8)  { animation-delay: 0.14s; }
.categories-container > :nth-child(9)  { animation-delay: 0.16s; }
.categories-container > :nth-child(10) { animation-delay: 0.18s; }
.categories-container > :nth-child(11) { animation-delay: 0.20s; }
.categories-container > :nth-child(12) { animation-delay: 0.22s; }
.categories-container > :nth-child(13) { animation-delay: 0.24s; }
.categories-container > :nth-child(14) { animation-delay: 0.26s; }
.categories-container > :nth-child(15) { animation-delay: 0.28s; }
.categories-container > :nth-child(16) { animation-delay: 0.30s; }
.categories-container > :nth-child(17) { animation-delay: 0.32s; }
.categories-container > :nth-child(18) { animation-delay: 0.34s; }
.categories-container > :nth-child(19) { animation-delay: 0.36s; }
.categories-container > :nth-child(20) { animation-delay: 0.38s; }
.categories-container > :nth-child(n+21) { animation-delay: 0.40s; }

.deduction-card:hover {
  border-color: rgba(34,197,94,0.35);
  box-shadow: 0 2px 12px rgba(34,197,94,0.06);
  transform: translateY(-1px);
}
.deduction-card.active {
  border-color: #22C55E;
  background: linear-gradient(135deg, rgba(34,197,94,0.04) 0%, rgba(34,197,94,0.01) 100%);
  box-shadow: 0 2px 16px rgba(34,197,94,0.10), inset 0 0 0 1px rgba(34,197,94,0.05);
}
.deduction-card.active:hover {
  border-color: rgba(34,197,94,0.55);
  box-shadow: 0 4px 20px rgba(34,197,94,0.14);
}
.deduction-card-header {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 10px 10px;
  overflow: visible;
}

/* ─── Custom Checkbox ─── */
.cat-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid #CBD5E1;
  border-radius: 5px;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: white;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  position: relative;
  margin-top: 0;
}
.cat-checkbox:checked {
  background: linear-gradient(135deg, #22C55E, #16A34A);
  border-color: #16A34A;
  animation: checkPop 0.3s cubic-bezier(0.16,1,0.3,1);
  box-shadow: 0 2px 8px rgba(34,197,94,0.30);
}
.cat-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 1px;
  width: 6px;
  height: 10px;
  border: 2px solid white;
  border-top: none;
  border-left: none;
  transform: rotate(45deg);
}
.cat-checkbox:hover:not(:checked) {
  border-color: #94A3B8;
  background: #F8FAFC;
}

/* ─── Card Header Label ─── */
.deduction-card-header label {
  display: flex;
  flex-direction: column;
  gap: 0px;
  min-width: 0;
  cursor: pointer;
  flex: 1;
  overflow: hidden;
}
.deduction-card-header label strong {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: var(--c-text, #0F172A);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.deduction-card-header label span {
  display: none;
}

/* ─── Often Missed Badge ─── */
.often-missed-badge {
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  font-weight: 700;
  color: #92400E;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A);
  border: 1px solid rgba(217,119,6,0.15);
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
  line-height: 1.5;
}

/* ─── Chevron ─── */
.deduction-chevron {
  color: #CBD5E1;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1), color 0.2s ease;
  flex-shrink: 0;
  font-size: 9px;
  margin-left: auto;
  padding: 2px;
  line-height: 1;
}
.deduction-card.open .deduction-chevron {
  transform: rotate(180deg);
  color: #22C55E;
}

/* ─── Card Body ─── */
.deduction-card-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16,1,0.3,1);
  box-sizing: border-box;
  padding: 0 14px;
}
.deduction-card.open .deduction-card-body {
  padding: 0 14px 12px;
}
.cat-description {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #64748B;
  line-height: 1.6;
  margin: 10px 0 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(226,232,240,0.7);
}
.cat-amount-group { padding-bottom: 2px; }
.cat-amount-group label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-text, #0F172A);
  margin-bottom: 5px;
}
.amount-input-wrap {
  position: relative;
}
.amount-input-wrap::before {
  content: '$';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8;
  pointer-events: none;
  z-index: 1;
}
.amount-input-wrap input {
  padding-left: 32px !important;
}
.cat-amount-group input,
.cat-amount-group .cat-amount-input,
.cat-amount-group .input-currency {
  width: 100%;
  height: 42px;
  padding: 0 14px 0 36px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text, #0F172A);
  background: #F8FAFC;
  border: 1.5px solid var(--c-border, #E2E8F0);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.cat-amount-group input:focus,
.cat-amount-group .cat-amount-input:focus,
.cat-amount-group .input-currency:focus {
  border-color: #22C55E;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10);
  background: white;
}

/* ─── Sidebar Summary ─── */
.sidebar-summary {
  position: sticky;
  top: 80px;
  background: linear-gradient(180deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.85) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(226,232,240,0.7);
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.02);
  animation: sidebarIn 0.5s cubic-bezier(0.16,1,0.3,1) 0.15s both;
}
.sidebar-summary h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 13px;
  color: #475569;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(226,232,240,0.6);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.step2-sidebar .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(226,232,240,0.5);
}
.step2-sidebar .stat-row:last-of-type {
  border-bottom: none;
}
.step2-sidebar .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  color: #94A3B8;
  font-weight: 500;
}
#sidebar-total {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: var(--c-text, #0F172A);
  transition: color 0.2s ease, transform 0.15s ease;
}
#sidebar-total.has-value {
  color: #059669;
}
#sidebar-savings {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #22C55E;
  transition: transform 0.15s ease;
}
.deduction-count-pill {
  background: linear-gradient(135deg, rgba(34,197,94,0.08), rgba(34,197,94,0.04));
  border: 1px solid rgba(34,197,94,0.20);
  color: #16A34A;
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  border-radius: 99px;
  padding: 3px 10px;
  margin-top: 12px;
  display: inline-block;
  transition: all 0.2s ease;
}
.deduction-progress {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(226,232,240,0.5);
}
.deduction-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px;
  color: #94A3B8;
  margin-bottom: 6px;
}
.deduction-progress-bar {
  height: 5px;
  background: #F1F5F9;
  border-radius: 99px;
  overflow: hidden;
}
.deduction-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22C55E, #16A34A, #059669);
  background-size: 200% 100%;
  border-radius: 99px;
  transition: width 0.5s cubic-bezier(0.16,1,0.3,1);
  width: 0%;
  animation: shimmer 3s ease infinite;
}

/* ─── Step 2 Action Buttons ─── */
#step-2 .step-actions {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.step2-next-btn,
#btn-step2-next-desktop {
  width: 100%;
  height: 46px;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
  color: #0A1628;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  margin-top: 16px;
  box-shadow: 0 4px 16px rgba(34,197,94,0.25);
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1);
  touch-action: manipulation;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step2-next-btn:hover,
#btn-step2-next-desktop:hover {
  background: linear-gradient(135deg, #16A34A 0%, #15803D 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,197,94,0.35);
}
.step2-next-btn:active,
#btn-step2-next-desktop:active {
  transform: translateY(0);
  transition-duration: 0.08s;
}
#btn-step2-back-desktop {
  height: 44px;
  padding: 0 16px;
  background: transparent;
  color: #94A3B8;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid rgba(226,232,240,0.7);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
}
#btn-step2-back-desktop:hover {
  border-color: #94A3B8;
  color: var(--c-text, #0F172A);
}

/* ═══════════════════════════════════════════════════════════════
   STEP 3: REVIEW & CALCULATE
   ═══════════════════════════════════════════════════════════════ */

/* ─── Review Summary Card ─── */
.review-summary {
  background: var(--c-surface, #FFFFFF);
  border: 1.5px solid var(--c-border, #E2E8F0);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 18px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.02);
  padding: 0;
  animation: fadeSlideUp 0.4s ease both;
}
.step3-summary-header {
  background: linear-gradient(135deg, #0A1628 0%, #0F2442 100%);
  padding: 14px 20px;
}
.step3-summary-header h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: rgba(255,255,255,0.55) !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 2px;
}
.step3-summary-header p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,0.35);
  margin: 0;
}
.review-summary .stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 20px;
  border-bottom: 1px solid rgba(226,232,240,0.6) !important;
  margin: 0;
  border-radius: 0;
  background: transparent;
  transition: background 0.15s ease;
}
.review-summary .stat-row:last-child {
  border-bottom: none !important;
}
.review-summary .stat-label {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: #94A3B8;
  font-weight: 500;
}
.review-summary .stat-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c-text, #0F172A);
  transition: transform 0.15s ease;
}
.review-summary .stat-row:first-of-type .stat-value {
  font-size: 16px;
}
.review-summary .text-green {
  color: #16A34A !important;
  font-size: 16px;
}
.review-summary .stat-row.highlight {
  background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.02) 100%) !important;
  margin: 0;
  padding: 15px 20px;
  border-radius: 0;
}
.review-summary .stat-row.highlight .stat-label {
  font-weight: 700;
  color: var(--c-text, #0F172A) !important;
  font-size: 14px;
}
.review-summary .stat-row.highlight .stat-value {
  font-size: 18px;
  color: #059669;
}

/* ─── Missed Deductions Section ─── */
.missed-section {
  margin-top: 0;
  margin-bottom: 18px;
  background: var(--c-surface, #FFFFFF) !important;
  border: 1.5px solid var(--c-border, #E2E8F0) !important;
  border-radius: 16px !important;
  overflow: hidden;
  padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.02) !important;
  animation: fadeSlideUp 0.4s ease 0.1s both;
}
.missed-section > h3 {
  display: none;
}
.unclaimed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(226,232,240,0.6);
  background: linear-gradient(135deg, #FFFBEB 0%, #FEF3C7 100%);
}
.unclaimed-header-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #F59E0B, #D97706);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(217,119,6,0.20);
}
.unclaimed-header-text h3 {
  font-family: 'Inter', sans-serif;
  font-weight: 700 !important;
  font-size: 13px !important;
  color: #92400E !important;
  margin-bottom: 1px;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.unclaimed-header-text p {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #B45309;
  margin: 0;
}
.missed-deductions-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.missed-deductions-list > div[data-missed-cat-id] {
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  margin-bottom: 0 !important;
  background: white !important;
  border-bottom: 1px solid rgba(226,232,240,0.5) !important;
  transition: background 0.15s ease !important;
}
.missed-deductions-list > div[data-missed-cat-id]:last-child {
  border-bottom: none !important;
}
.missed-deductions-list > div[data-missed-cat-id]:hover {
  background: #F8FAFC !important;
}
.missed-deductions-list > div[data-missed-cat-id] > div:first-child {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}
.missed-deductions-list > div[data-missed-cat-id] > div:first-child > div:first-child {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}
.missed-cat-checkbox {
  width: 18px !important;
  height: 18px !important;
  border: 2px solid #CBD5E1 !important;
  border-radius: 5px !important;
  cursor: pointer;
  flex-shrink: 0;
  appearance: none !important;
  -webkit-appearance: none !important;
  background: white !important;
  transition: all 0.2s cubic-bezier(0.16,1,0.3,1) !important;
  position: relative;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}
.missed-cat-checkbox:checked,
.missed-cat-checkbox.checked {
  background: linear-gradient(135deg, #22C55E, #16A34A) !important;
  border-color: #16A34A !important;
  box-shadow: 0 2px 8px rgba(34,197,94,0.25) !important;
}
.missed-cat-checkbox:checked::after,
.missed-cat-checkbox.checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 6px !important;
  height: 10px !important;
  border: 2px solid white !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(45deg) !important;
}
.missed-deductions-list > div[data-missed-cat-id] > div:first-child > div:first-child > span:not(.often-missed-badge) {
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--c-text, #0F172A) !important;
  flex: 1;
}
.missed-deductions-list > div[data-missed-cat-id] .often-missed-badge {
  font-family: 'Inter', sans-serif !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  color: #92400E !important;
  background: linear-gradient(135deg, #FEF3C7, #FDE68A) !important;
  border: 1px solid rgba(217,119,6,0.15) !important;
  border-radius: 4px !important;
  padding: 2px 6px !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.missed-deductions-list > div[data-missed-cat-id] > p {
  font-family: 'Inter', sans-serif !important;
  font-size: 12px !important;
  color: #64748B !important;
  line-height: 1.55 !important;
  margin: 0 0 8px 28px !important;
  padding-left: 0 !important;
}
.missed-deductions-list > div[data-missed-cat-id] > div:last-child:not(.unclaimed-header) {
  padding-left: 28px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
}
.missed-amount-input {
  width: 160px !important;
  height: 40px !important;
  padding: 0 12px 0 32px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--c-text, #0F172A) !important;
  background: #F8FAFC !important;
  border: 1.5px solid var(--c-border, #E2E8F0) !important;
  border-radius: 8px !important;
  outline: none !important;
  transition: all 0.2s ease !important;
}
.missed-amount-input:focus {
  border-color: #22C55E !important;
  box-shadow: 0 0 0 3px rgba(34,197,94,0.10) !important;
  background: white !important;
}
.missed-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background: linear-gradient(135deg, rgba(34,197,94,0.06) 0%, rgba(34,197,94,0.03) 100%) !important;
  border-top: 1px solid rgba(34,197,94,0.12) !important;
  border-radius: 0 !important;
  margin-top: 0 !important;
  font-weight: 600;
  font-size: 13px;
  color: var(--c-text, #0F172A);
}
.missed-total-bar > span:first-child {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #15803D;
}
#missed-savings-amount {
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #16A34A !important;
}

/* ─── Step 3: Buttons ─── */
.step-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}
.step-buttons .step-back-btn,
#btn-step3-back {
  height: 46px;
  padding: 0 18px;
  background: transparent;
  color: #94A3B8;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13px;
  border: 1.5px solid rgba(226,232,240,0.7);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s ease;
  touch-action: manipulation;
  flex-shrink: 0;
  white-space: nowrap;
}
.step-buttons .step-back-btn:hover,
#btn-step3-back:hover {
  border-color: #94A3B8;
  color: var(--c-text, #0F172A);
}
#btn-calculate,
.calculate-btn {
  width: 100%;
  height: 54px;
  background: linear-gradient(135deg, #22C55E 0%, #16A34A 50%, #059669 100%);
  background-size: 200% 100%;
  color: #0A1628;
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: 15px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(34,197,94,0.30);
  transition: all 0.25s cubic-bezier(0.16,1,0.3,1);
  touch-action: manipulation;
  letter-spacing: -0.2px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 1;
  animation: btnGlow 3s ease-in-out infinite;
}
#btn-calculate:hover,
.calculate-btn:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(34,197,94,0.40);
}
#btn-calculate:active,
.calculate-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(34,197,94,0.20);
  transition-duration: 0.08s;
}
.calculate-trust {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.calculate-trust span {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  color: #94A3B8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
  opacity: 0.8;
}

/* ─── Mobile Sticky Bar (compact) ─── */
.mobile-sticky-bar {
  background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.98) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(226,232,240,0.6);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .deduction-card {
  background: var(--c-surface);
  border-color: rgba(51,65,85,0.5);
}
[data-theme="dark"] .cat-checkbox {
  background: var(--c-surface-2, #1E293B);
  border-color: rgba(51,65,85,0.5);
}
[data-theme="dark"] .cat-checkbox:hover:not(:checked) {
  background: #1E293B;
  border-color: #475569;
}
[data-theme="dark"] .deduction-card.active {
  background: linear-gradient(135deg, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0.02) 100%);
}
[data-theme="dark"] .deduction-category-header::before {
  background: linear-gradient(180deg, #22C55E, #059669);
}
[data-theme="dark"] .deduction-category-header::after {
  background: linear-gradient(90deg, rgba(100,116,139,0.2), transparent);
}
[data-theme="dark"] .step3-summary-header {
  background: linear-gradient(135deg, #010409 0%, #0A1628 100%);
}
[data-theme="dark"] .sidebar-summary {
  background: linear-gradient(180deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.88) 100%);
  border-color: rgba(51,65,85,0.5);
}
[data-theme="dark"] .missed-total-bar {
  background: linear-gradient(135deg, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0.05) 100%) !important;
  border-color: rgba(34,197,94,0.15) !important;
}
[data-theme="dark"] .missed-deductions-list > div[data-missed-cat-id] {
  background: var(--c-surface) !important;
  border-bottom-color: rgba(51,65,85,0.4) !important;
}
[data-theme="dark"] .missed-deductions-list > div[data-missed-cat-id]:hover {
  background: var(--c-surface-2, #1E293B) !important;
}
[data-theme="dark"] .missed-cat-checkbox {
  background: var(--c-surface-2, #1E293B) !important;
  border-color: rgba(51,65,85,0.5) !important;
}
[data-theme="dark"] .cat-amount-group input,
[data-theme="dark"] .missed-amount-input {
  background: var(--c-surface-2, #1E293B) !important;
  border-color: rgba(51,65,85,0.5) !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] .amount-input-wrap::before {
  color: #CBD5E1 !important;
}
[data-theme="dark"] .unclaimed-header {
  background: linear-gradient(135deg, rgba(120,53,15,0.15) 0%, rgba(120,53,15,0.08) 100%);
}
[data-theme="dark"] .review-summary {
  border-color: rgba(51,65,85,0.5);
}
[data-theme="dark"] .review-summary .stat-row {
  border-bottom-color: rgba(51,65,85,0.4) !important;
}
[data-theme="dark"] .mobile-sticky-bar {
  background: linear-gradient(180deg, rgba(15,23,42,0.95) 0%, rgba(15,23,42,0.98) 100%);
  border-top-color: rgba(51,65,85,0.4);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .step2-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step2-sidebar {
    display: none;
  }
  .categories-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 5px;
  }
  .deduction-card-header {
    padding: 8px 10px !important;
    gap: 6px !important;
  }
  .deduction-card-header label strong {
    font-size: 11.5px !important;
    -webkit-line-clamp: 2 !important;
  }
  .deduction-card-header label span {
    display: none !important;
  }
  .often-missed-badge {
    display: none !important;
  }
  .deduction-chevron {
    font-size: 8px !important;
    padding: 2px !important;
  }
  .cat-checkbox {
    width: 16px !important;
    height: 16px !important;
  }
  /* Hide mobile ad bar when tool is active — sticky bar replaces it */
  .mobile-bottom-bar {
    display: none !important;
  }
  /* Fix: contain property on [data-step] breaks position:fixed for sticky bar */
  [data-step] {
    contain: none !important;
  }
  /* Fix: reveal-scale transform breaks position:fixed for sticky bar */
  .tool-float-wrapper.reveal-scale.revealed {
    transform: none !important;
  }
  /* Mobile sticky bar — full redesign override */
  .mobile-sticky-bar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(255,255,255,0.99) 100%) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(226,232,240,0.7) !important;
    padding: 10px 16px 12px !important;
    z-index: 250 !important;
    box-shadow: 0 -2px 16px rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
  .mobile-sticky-stats {
    display: flex !important;
    gap: 20px !important;
    margin-bottom: 8px !important;
  }
  .mobile-stat-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 10px !important;
    color: #94A3B8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 600 !important;
  }
  .mobile-stat-value {
    font-family: 'Bricolage Grotesque', sans-serif !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    color: var(--c-text, #0F172A) !important;
  }
  .mobile-sticky-actions {
    display: flex !important;
    gap: 8px !important;
  }
  .mobile-sticky-actions .btn-primary {
    flex: 1 !important;
    height: 46px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    padding: 0 16px !important;
    min-width: 0 !important;
  }
  .mobile-sticky-actions .btn-secondary {
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }
  /* Step 2 action buttons hidden on mobile (use sticky bar instead) */
  #step-2 .step-actions {
    display: none !important;
  }
  /* Step 3 buttons — make full width */
  .step-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    margin-top: 16px !important;
  }
  .step-buttons .step-back-btn,
  #btn-step3-back {
    width: 100% !important;
    height: 46px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }
  #btn-calculate,
  .calculate-btn {
    width: 100% !important;
    height: 52px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
  }
  .calculate-trust {
    justify-content: center;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
  }
  .calculate-trust span {
    font-size: 10px;
    white-space: nowrap;
  }
  /* Review summary compact */
  .review-summary {
    margin-bottom: 14px;
    border-radius: 14px;
  }
  .step3-summary-header {
    padding: 12px 16px;
  }
  .review-summary .stat-row {
    padding: 12px 16px;
  }
  .review-summary .stat-label {
    font-size: 12.5px;
  }
  .review-summary .stat-value {
    font-size: 14px;
  }
  .review-summary .stat-row.highlight {
    padding: 14px 16px;
  }
  .review-summary .stat-row.highlight .stat-value {
    font-size: 16px;
  }
  /* Missed deductions compact */
  .missed-section {
    margin-bottom: 14px;
    border-radius: 14px !important;
  }
  .unclaimed-header {
    padding: 12px 16px;
    gap: 8px;
  }
  .unclaimed-header-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .unclaimed-header-text h3 {
    font-size: 12px !important;
  }
  .unclaimed-header-text p {
    font-size: 10px;
  }
  .missed-deductions-list > div[data-missed-cat-id] {
    padding: 10px 16px !important;
  }
  .missed-deductions-list > div[data-missed-cat-id] > p {
    margin-left: 24px !important;
    font-size: 11px !important;
  }
  .missed-deductions-list > div[data-missed-cat-id] > div:last-child:not(.unclaimed-header) {
    padding-left: 24px !important;
  }
  .missed-amount-input {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 6px !important;
  }
  .missed-total-bar {
    padding: 10px 16px !important;
    font-size: 12px !important;
  }
  /* Deduction cards compact */
  .deduction-card-body {
    padding: 0 10px;
  }
  .deduction-card.open .deduction-card-body {
    padding: 0 10px 10px;
  }
  .cat-checkbox, .missed-cat-checkbox {
    width: 16px !important;
    height: 16px !important;
  }
  .cat-checkbox:checked::after,
  .missed-cat-checkbox:checked::after,
  .missed-cat-checkbox.checked::after {
    left: 3px !important;
    top: 0px !important;
    width: 6px !important;
    height: 9px !important;
  }
  .often-missed-badge {
    font-size: 8px !important;
    padding: 1px 5px !important;
    order: 3;
  }
  .deduction-category-header {
    font-size: 9px;
    padding: 8px 0 4px;
    margin-top: 12px;
  }
  /* Step headers */
  #step-2 .step-header,
  #step-3 .step-header {
    margin-bottom: 16px;
  }
  #step-2 .step-header h2,
  #step-3 .step-header h2 {
    font-size: 19px;
  }
  /* Extra bottom padding for sticky bar */
  #step-2 {
    padding-bottom: 100px !important;
  }
}
@media (max-width: 640px) {
  .step2-layout {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .step2-sidebar {
    display: none;
  }
  .categories-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
  }
  .deduction-card {
    border-radius: 8px !important;
  }
  .deduction-card-header {
    padding: 8px 8px !important;
    gap: 5px !important;
  }
  .deduction-card-header label strong {
    font-size: 11px !important;
    -webkit-line-clamp: 2 !important;
  }
  .deduction-card-header label span {
    display: none !important;
  }
  .deduction-card-body {
    padding: 0 8px !important;
  }
  .deduction-card.open .deduction-card-body {
    padding: 0 8px 10px !important;
  }
  .often-missed-badge {
    display: none !important;
  }
  .deduction-chevron {
    font-size: 7px !important;
    padding: 1px !important;
  }
  .cat-checkbox, .missed-cat-checkbox {
    width: 15px !important;
    height: 15px !important;
  }
  .cat-checkbox:checked::after,
  .missed-cat-checkbox:checked::after,
  .missed-cat-checkbox.checked::after {
    left: 3px !important;
    top: 0 !important;
    width: 5px !important;
    height: 8px !important;
  }
  .missed-amount-input {
    width: 100% !important;
    margin-left: 0 !important;
    margin-top: 8px !important;
  }
  .step-buttons {
    flex-direction: column;
  }
  .step-buttons .step-back-btn,
  #btn-step3-back {
    width: 100%;
  }
  .deduction-category-header {
    font-size: 9px;
    padding: 8px 0 4px;
    margin-top: 12px;
  }
  .review-summary .stat-row {
    padding: 11px 14px;
  }
  .unclaimed-header {
    padding: 12px 14px;
    gap: 8px;
  }
  .unclaimed-header-icon {
    width: 28px;
    height: 28px;
    font-size: 13px;
  }
  .missed-deductions-list > div[data-missed-cat-id] {
    padding: 10px 14px !important;
  }
  .missed-deductions-list > div[data-missed-cat-id] > p {
    margin-left: 22px !important;
    font-size: 11px !important;
  }
  .missed-deductions-list > div[data-missed-cat-id] > div:last-child:not(.unclaimed-header) {
    padding-left: 22px !important;
  }
  #btn-calculate, .calculate-btn {
    height: 50px;
    font-size: 14px;
  }
  .calculate-trust {
    gap: 12px;
  }
  .calculate-trust span {
    font-size: 10px;
  }
}
@media (max-width: 480px) {
  .categories-container {
    grid-template-columns: 1fr !important;
  }
  .deduction-card-header {
    padding: 10px 12px !important;
    gap: 8px !important;
  }
  .deduction-card-header label strong {
    font-size: 12.5px !important;
    -webkit-line-clamp: 2 !important;
  }
  .deduction-card-header label span {
    display: none !important;
  }
  .often-missed-badge {
    display: none !important;
  }
  .deduction-card-body {
    padding: 0 12px !important;
  }
  .deduction-card.open .deduction-card-body {
    padding: 0 12px 10px !important;
  }
}
@media (max-width: 374px) {
  .deduction-card-header label strong {
    font-size: 12px !important;
  }
}

/* ── Feedback Dialog ─────────────────────────────── */
.feedback-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.50);z-index:10001;display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;transition:opacity 0.25s ease,visibility 0.25s ease;}
.feedback-overlay.open{opacity:1;visibility:visible;}
.feedback-dialog{background:var(--c-surface,#fff);border-radius:16px;max-width:480px;width:100%;padding:28px 28px 24px;box-shadow:0 24px 80px rgba(0,0,0,0.25);transform:translateY(20px) scale(0.97);transition:transform 0.25s cubic-bezier(0.16,1,0.3,1);position:relative;}
.feedback-overlay.open .feedback-dialog{transform:translateY(0) scale(1);}
.feedback-dialog-close{position:absolute;top:16px;right:16px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--c-muted,#64748B);width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:background 0.15s;}
.feedback-dialog-close:hover{background:var(--c-bg-hover,#f1f5f9);}
.feedback-dialog h3{font-family:var(--font-display,'Bricolage Grotesque',sans-serif);font-size:18px;font-weight:700;margin:0 0 6px;color:var(--c-fg,#0A1628);}
.feedback-dialog .feedback-dialog-sub{font-size:13px;color:var(--c-muted,#64748B);margin:0 0 18px;line-height:1.5;}
.feedback-dialog textarea{width:100%;min-height:110px;border:1.5px solid var(--c-border,#e2e8f0);border-radius:10px;padding:12px 14px;font-family:'Inter',sans-serif;font-size:14px;color:var(--c-fg,#0A1628);background:var(--c-surface,#fff);resize:vertical;transition:border-color 0.2s;line-height:1.6;box-sizing:border-box;}
.feedback-dialog textarea:focus{outline:none;border-color:#22C55E;box-shadow:0 0 0 3px rgba(34,197,94,0.15);}
.feedback-dialog textarea::placeholder{color:var(--c-muted,#94a3b8);}
.feedback-dialog-actions{display:flex;gap:10px;margin-top:16px;justify-content:flex-end;}
.feedback-dialog-actions button{font-family:'Inter',sans-serif;font-weight:600;font-size:13px;border-radius:8px;padding:10px 20px;cursor:pointer;transition:opacity 0.15s,transform 0.1s;}
.feedback-dialog-actions button:active{transform:scale(0.97);}
.feedback-dialog-cancel{background:transparent;color:var(--c-muted,#64748B);border:1.5px solid var(--c-border,#e2e8f0);}
.feedback-dialog-cancel:hover{background:var(--c-bg-hover,#f1f5f9);}
.feedback-dialog-submit{background:#22C55E;color:#0A1628;border:none;}
.feedback-dialog-submit:hover{opacity:0.90;}
.feedback-dialog-submit:disabled{opacity:0.50;cursor:not-allowed;}
.feedback-dialog-success{text-align:center;padding:16px 0 4px;}
.feedback-dialog-success .feedback-check{width:48px;height:48px;border-radius:50%;background:#DCFCE7;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;font-size:24px;}
.feedback-dialog-success p{color:var(--c-fg,#0A1628);font-weight:600;font-size:15px;margin:0 0 4px;}
.feedback-dialog-success span{color:var(--c-muted,#64748B);font-size:13px;}
[data-theme="dark"] .feedback-dialog{background:#131c2e;}
[data-theme="dark"] .feedback-dialog-close:hover{background:rgba(255,255,255,0.08);}
[data-theme="dark"] .feedback-dialog textarea{background:#0e1525;border-color:rgba(255,255,255,0.12);color:#e2e8f0;}
[data-theme="dark"] .feedback-dialog-cancel{border-color:rgba(255,255,255,0.15);color:#94a3b8;}
[data-theme="dark"] .feedback-dialog-cancel:hover{background:rgba(255,255,255,0.06);}
@media (max-width:640px){.feedback-dialog{padding:22px 20px 20px;max-width:100%;}.feedback-dialog-actions{flex-direction:column;}.feedback-dialog-actions button{width:100%;}}

/* ── Trust Badges Dark Mode ── */
[data-theme="dark"] .trust-badge-irs{background:rgba(63,185,80,0.08);border-color:rgba(63,185,80,0.20);}
[data-theme="dark"] .trust-badge-irs p{color:var(--c-text,#E6EDF3);}
[data-theme="dark"] .trust-privacy-badge p{color:var(--c-muted,#8B949E);}
[data-theme="dark"] .infrastructure-badge{background:#131c2e;border-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .infrastructure-badge p:first-child{color:#E6EDF3;}
[data-theme="dark"] .infrastructure-badge p:last-child{color:#8B949E;}
[data-theme="dark"] .verify-calculation{background:#131c2e;border-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .verify-calculation p{color:#E6EDF3;}
[data-theme="dark"] .irs-sources{background:#131c2e;border-color:rgba(255,255,255,0.08);}
[data-theme="dark"] .irs-sources h3{color:#E6EDF3;}
[data-theme="dark"] .irs-sources p{color:#8B949E;}
[data-theme="dark"] .last-updated-badge{background:rgba(63,185,80,0.10);border-color:rgba(63,185,80,0.25);}
[data-theme="dark"] .last-updated-badge span:last-child{color:#4ADE80;}
[data-theme="dark"] .tool-disclaimer{color:var(--c-light,#64748B);}
@media (max-width:640px){.irs-sources [style*="grid-template-columns"]{grid-template-columns:1fr !important;}}
@media (max-width: 768px) { .related-topics-grid { grid-template-columns: 1fr !important; } }
/* Ad slot stability - prevent CLS */
.ad-slot{min-height:90px;contain:layout;}

/* ── Disclaimer Modal — Mobile Bottom Sheet ── */
@media (max-width: 768px) {
  .disclaimer-overlay {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .disclaimer-card {
    padding: 24px 20px !important;
    border-radius: 20px 20px 0 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
  }

  /* Warning icon — smaller on mobile */
  .disclaimer-card > div:first-child {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    font-size: 20px !important;
    margin-bottom: 12px !important;
  }

  /* "Before You Start" heading */
  .disclaimer-card h2,
  .disclaimer-card h3 {
    font-size: 18px !important;
    margin-bottom: 10px !important;
  }

  /* Body paragraphs */
  .disclaimer-card p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    margin-bottom: 10px !important;
  }

  /* Checkbox row */
  .disclaimer-card div[style*="background: #F8FAFC"],
  .disclaimer-card div[style*="background:#F8FAFC"] {
    padding: 12px !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    gap: 8px !important;
  }

  /* Checkbox label text */
  .disclaimer-card label {
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  /* Checkbox itself */
  .disclaimer-card input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  /* Accept button */
  .disclaimer-card #disclaimer-accept {
    height: 48px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    margin-bottom: 10px !important;
  }

  /* "This notice appears once" text */
  .disclaimer-card p:last-child {
    font-size: 11px !important;
    margin-top: 8px !important;
  }
}

/* Very small phones (iPhone SE etc) */
@media (max-width: 375px) {
  .disclaimer-card {
    padding: 20px 16px !important;
  }

  .disclaimer-card h2,
  .disclaimer-card h3 {
    font-size: 16px !important;
  }

  .disclaimer-card p {
    font-size: 12px !important;
  }

  .disclaimer-card #disclaimer-accept {
    height: 44px !important;
    font-size: 13px !important;
  }
}

/* ── Ad Placeholder Boxes (invisible until real ads load) ── */

.ad-placeholder {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  overflow: hidden;
}

.ad-placeholder::before {
  content: 'Sponsored Space';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: #1A1A1A;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Leaderboard — 728x90 desktop */
.ad-placeholder.ad-leaderboard {
  height: 90px;
  max-width: 728px;
  margin: 0 auto;
}

/* Large rectangle — 336x280 */
.ad-placeholder.ad-rectangle {
  height: 280px;
  max-width: 336px;
  margin: 0 auto;
}

/* In-content / native banner */
.ad-placeholder.ad-banner {
  height: 90px;
  max-width: 100%;
}

/* Mobile banner — 320x50 */
.ad-placeholder.ad-mobile {
  height: 50px;
  max-width: 320px;
  margin: 0 auto;
  display: none;
}

/* Section wrapper for ads */
.ad-section {
  width: 100%;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: transparent;
}

.ad-section.ad-between-sections {
  padding: 28px 24px;
  background: transparent;
}

/* Dark mode */
[data-theme="dark"] .ad-placeholder {
  background: transparent;
  border-color: transparent;
}

[data-theme="dark"] .ad-placeholder::before {
  color: #333333;
}

[data-theme="dark"] .ad-section {
  background: transparent;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ad-placeholder.ad-leaderboard {
    display: none;
  }
  .ad-placeholder.ad-banner {
    display: none;
  }
  .ad-placeholder.ad-mobile {
    display: flex;
  }
  .ad-placeholder.ad-rectangle {
    max-width: 300px;
    height: 250px;
  }
  .ad-section {
    padding: 16px;
  }
}

/* Comment placeholder text (hidden) */
.ad-placeholder-label {
  display: none;
}

/* Article mid-ad responsive adjustment */
@media (max-width: 768px) {
  .article-mid-ad {
    margin-left: -24px !important;
    margin-right: -24px !important;
    width: calc(100% + 48px) !important;
    padding: 16px 24px !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   V12 PROFESSIONAL REDESIGN LAYER — appended 2026-10-03
   SmartAsset/NerdWallet-style retheme. Later rules override above.
   Light values here; [data-theme="dark"] companions at the end.
   ═══════════════════════════════════════════════════════════════ */

/* ── Typography ── */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.3px; color: var(--c-navy-dark); }
.logo-text, .hero-h1 { font-family: var(--font-display); }

/* ── Nav: white authority bar ── */
.site-header { background: #FFFFFF; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-sm); backdrop-filter: none; -webkit-backdrop-filter: none; }
.logo-tax { color: var(--c-navy-dark); }
.logo-ninja { color: var(--c-green); }
.header-nav a { color: var(--c-muted); font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 6px; transition: all 0.15s ease; }
.header-nav a:hover { background: var(--c-surface-2); color: var(--c-navy-dark); }
.header-nav a.active { background: rgba(34,197,94,0.08); color: #15803D; }
.nav-irs-badge { font-family: 'Inter',sans-serif; font-size: 11px; font-weight: 600; color: #16A34A; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.20); padding: 4px 10px; border-radius: 4px; letter-spacing: 0.03em; white-space: nowrap; }
.hamburger-line { background: var(--c-navy-dark) !important; }
.header-nav.open { background: #FFFFFF; border: 1px solid var(--c-border); box-shadow: var(--shadow-card); }

/* ── Trust strip: white ── */
.trust-strip { background: #FFFFFF; border-bottom: 1px solid var(--c-border); }
.trust-strip::before { background: none; }
.trust-item { color: var(--c-light); }
.trust-item:hover { color: var(--c-navy-dark); }
.trust-divider { background: var(--c-border-2); }

/* ── Hero: light, data-driven ── */
.hero-section { background: linear-gradient(180deg, #EBF5FF 0%, #F8FAFC 60%, #FFFFFF 100%); padding: 48px 0 64px; border-bottom: 1px solid var(--c-border); }
.hero-parallax-bg, .hero-float-1, .hero-float-2, .hero-float-3 { display: none !important; }
.hero-eyebrow { display: inline-flex; align-items: center; gap: 6px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 4px; padding: 5px 12px; color: #92400E; font-family: 'Inter',sans-serif; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-h1 { font-weight: 800; font-size: clamp(28px, 3.5vw, 44px); color: var(--c-navy-dark); line-height: 1.15; letter-spacing: -0.5px; }
.hero-h1 .text-green, .hero-h1 .hero-green { color: var(--c-green); }
.hero-subtitle { font-size: 16px; color: var(--c-muted); line-height: 1.75; max-width: 480px; }
.hero-intro-long { font-size: 14.5px; color: var(--c-light); line-height: 1.75; max-width: 520px; margin-top: 14px; }
.hero-trust-items span { color: var(--c-muted); font-size: 13px; font-weight: 500; }
.hero-trust-items span + span::before { color: var(--c-border-2); }
.hero-irs-badge { display: inline-flex; align-items: center; gap: 6px; background: #FFFBEB; border: 1px solid #FCD34D; border-radius: 4px; padding: 5px 12px; margin-bottom: 20px; }
.hero-irs-badge .hib-text { font-family: 'Inter',sans-serif; font-size: 11px; font-weight: 600; color: #92400E; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-trust-checks { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 32px; }
.hero-trust-checks > div { display: flex; align-items: center; gap: 6px; }
.hero-trust-checks .check-green { color: var(--c-green); }
.hero-trust-checks .check-label { font-family: 'Inter',sans-serif; font-size: 13px; font-weight: 500; color: var(--c-muted); }
.hero-source-note { font-family: 'Inter',sans-serif; font-size: 12px; color: var(--c-lighter); margin: 0; }
.hero-source-note a { color: var(--c-green); text-decoration: none; }
.hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── Stats bar: navy band ── */
.stats-bar { background: var(--c-navy); padding: 20px 0; }
.stats-bar-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats-bar-item { text-align: center; padding: 0 24px; border-right: 1px solid rgba(255,255,255,0.10); }
.stats-bar-item:last-child { border-right: none; }
.stats-bar-value { font-family: 'Inter',sans-serif; font-size: 28px; font-weight: 800; color: var(--c-green); letter-spacing: -0.5px; }
.stats-bar-label { font-family: 'Inter',sans-serif; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 4px; }
@media (max-width: 900px) {
  .stats-bar-grid { grid-template-columns: repeat(2, 1fr); row-gap: 18px; }
  .stats-bar-item:nth-child(2) { border-right: none; }
  .stats-bar-item:nth-child(3) { border-right: 1px solid rgba(255,255,255,0.10); }
}

/* ── Tool card ── */
.tool-float-wrapper { margin: 0; }
.tool-float-card { background: #FFFFFF; border: 1px solid var(--c-border); border-radius: 16px; box-shadow: 0 4px 6px rgba(0,0,0,0.04), 0 20px 40px rgba(0,0,0,0.08); overflow: hidden; }
.tool-float-card::before, .tool-float-card::after { display: none; }
.tool-header { background: var(--c-navy); padding: 16px 24px; }
.tool-header-title { color: #FFFFFF; font-size: 13px; font-weight: 600; }
.step-pill { color: rgba(255,255,255,0.40); }
.step-pill.active { background: var(--c-green); color: #0F1E32; }
.step-pill.done { background: rgba(34,197,94,0.15); color: #4ADE80; }
.progress-bar { background: #FFFFFF; border-bottom: 1px solid var(--c-border); }
.progress-step { color: var(--c-light); }
.progress-step.active { color: var(--c-navy-dark); }
.input-currency, #gross-income, #w2-income { background: var(--c-surface-2); border: 1.5px solid var(--c-border); border-radius: 8px; height: 48px; font-size: 16px; color: var(--c-navy-dark); }
.input-currency:focus, #gross-income:focus, #w2-income:focus { border-color: var(--c-green); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(34,197,94,0.10); }
.input-prefix { color: var(--c-light); }
.btn-primary { background: var(--c-green); color: #0F1E32; font-weight: 700; font-size: 15px; height: 52px; border-radius: 8px; }
.btn-primary::before { display: none; }
.btn-primary:hover { background: var(--c-green-dark); box-shadow: 0 4px 12px rgba(34,197,94,0.25); color: #0F1E32; }

/* ── Sections ── */
.section-white { background: #FFFFFF; padding: 72px 0; }
.section-gray { background: var(--c-surface-2); padding: 72px 0; }

/* ── Savings table ── */
.savings-table-wrap { border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; margin-top: 32px; box-shadow: var(--shadow-sm); background: var(--c-surface); }
.savings-table { width: 100%; border-collapse: collapse; }
.savings-table thead tr { background: var(--c-navy); }
.savings-table th { padding: 14px 20px; text-align: left; font-size: 11px; font-weight: 600; color: rgba(255,255,255,0.70); text-transform: uppercase; letter-spacing: 0.08em; border: none; }
.savings-table td { padding: 14px 20px; font-size: 14px; color: var(--c-muted); border-bottom: 1px solid var(--c-border); background: transparent; }
.savings-table tbody tr:nth-child(odd) td { background: var(--c-surface); }
.savings-table tbody tr:nth-child(even) td { background: var(--c-surface-2); }
.savings-table td:first-child { font-weight: 500; color: var(--c-navy-dark); }
.savings-table td:last-child { font-weight: 700; color: var(--c-green); }
.savings-table-note { padding: 12px 20px; background: var(--c-surface-2); border-top: 1px solid var(--c-border); font-family: 'Inter',sans-serif; font-size: 12px; color: var(--c-lighter); }

/* ── FAQ ── */
.faq-item { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 8px; margin-bottom: 6px; transition: all 0.15s ease; }
.faq-item:hover { border-color: var(--c-border-2); }
.faq-item.open { border-color: var(--c-green); box-shadow: 0 2px 8px rgba(34,197,94,0.08); }
.faq-question { padding: 16px 20px; }
.faq-question span { font-size: 15px; font-weight: 600; color: var(--c-navy-dark); }
.faq-answer { padding: 0 20px 18px; font-size: 14px; color: var(--c-muted); line-height: 1.75; }

/* ── Disclaimer bar (new, site-wide) ── */
.disclaimer-bar { position: relative; background: #FFFBEB; border-bottom: 1px solid #FCD34D; padding: 8px 44px 8px 24px; margin-top: 64px; text-align: center; z-index: 998; }
.disclaimer-bar + .trust-strip { margin-top: 0; }
.disclaimer-bar p { font-family: 'Inter',sans-serif; font-size: 12px; color: #78350F; max-width: 900px; margin: 0 auto; line-height: 1.5; }
.disclaimer-bar strong { font-weight: 700; }
.disclaimer-bar a { color: #78350F; font-weight: 600; text-decoration: underline; }
.disclaimer-close { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #78350F; font-size: 16px; cursor: pointer; padding: 4px 8px; line-height: 1; }

/* ── Footer additions ── */
.footer-verified-line { font-family: 'Inter',sans-serif; font-size: 11px; color: rgba(255,255,255,0.25); text-align: center; margin-top: 8px; }
.footer-verified-line a { color: rgba(255,255,255,0.35); }

/* ── Article pages ── */
.article-toc { background: var(--c-surface-2); border: 1px solid var(--c-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; }
.article-toc-title { font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 700; color: var(--c-navy-dark); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 12px; }
.article-toc ol { list-style: none; margin: 0; padding: 0; }
.article-toc li { margin: 6px 0; }
.article-toc a { font-size: 13px; color: var(--c-muted); line-height: 1.5; display: block; }
.article-toc a:hover { color: var(--c-green-dark); }
.article-irs-badge { font-family: 'Inter',sans-serif; font-size: 11px; font-weight: 600; color: #16A34A; background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.20); padding: 2px 8px; border-radius: 4px; margin-left: 10px; }
.article-content-area h2 { font-size: 22px; font-weight: 700; margin-top: 40px; margin-bottom: 16px; padding-top: 40px; border-top: 1px solid var(--c-border); color: var(--c-navy-dark); }
.article-content-area h3 { font-size: 18px; font-weight: 700; margin-top: 28px; color: var(--c-navy-dark); }
.article-content-area p { line-height: 1.85; }

/* ── Animations: authority = stillness ── */
.tilt-card, .tilt-card:hover, .tilt-card:active { transform: none !important; transition: none !important; }
.tilt-card .tilt-shine, .tilt-card::before { display: none !important; }
.reveal, .reveal-left, .reveal-right, .reveal-scale { transform: none !important; transition: opacity 0.25s ease !important; }
@keyframes float-slow { 0%, 100% { opacity: 0.5; } 50% { opacity: 0.5; } }
#page-loader .loader-logo { animation: loader-pulse 1.2s ease-in-out infinite; }
#page-loader .loader-bar, #page-loader .loader-bar-fill { display: none; }

/* ── Blog index cards ── */
.blg-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.blg-card:hover { border-color: var(--c-green); box-shadow: 0 4px 16px rgba(34,197,94,0.12); }

/* ═══════════════════════════════════════════════════════════════
   V12 DARK-MODE COMPANIONS
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] .site-header { background: var(--c-surface); border-bottom-color: var(--c-border); box-shadow: none; }
[data-theme="dark"] .header-nav a { color: var(--c-muted); }
[data-theme="dark"] .header-nav a:hover { background: var(--c-surface-2); color: var(--c-text); }
[data-theme="dark"] .header-nav a.active { background: rgba(34,197,94,0.10); color: #4ADE80; }
[data-theme="dark"] .logo-tax { color: var(--c-text); }
[data-theme="dark"] .header-nav.open { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .trust-strip { background: var(--c-surface); border-bottom-color: var(--c-border); }
[data-theme="dark"] .trust-item { color: var(--c-light); }
[data-theme="dark"] .trust-item:hover { color: var(--c-text); }
[data-theme="dark"] .trust-divider { background: var(--c-border); }
[data-theme="dark"] .hero-section { background: var(--c-bg); border-bottom-color: var(--c-border); }
[data-theme="dark"] .hero-eyebrow, [data-theme="dark"] .hero-irs-badge { background: #451A03; border-color: #78350F; }
[data-theme="dark"] .hero-eyebrow, [data-theme="dark"] .hero-irs-badge .hib-text { color: #FCD34D; }
[data-theme="dark"] .hero-h1 { color: var(--c-text); }
[data-theme="dark"] .hero-subtitle, [data-theme="dark"] .hero-intro-long { color: var(--c-muted); }
[data-theme="dark"] .hero-trust-items span, [data-theme="dark"] .hero-trust-checks .check-label { color: var(--c-muted); }
[data-theme="dark"] .hero-trust-items span + span::before { color: var(--c-border); }
[data-theme="dark"] .hero-source-note { color: var(--c-lighter); }
[data-theme="dark"] .stats-bar { background: var(--c-navy); }
[data-theme="dark"] .tool-float-card { background: var(--c-surface); border-color: var(--c-border); }
[data-theme="dark"] .tool-header { background: var(--c-navy); }
[data-theme="dark"] .progress-bar { background: var(--c-surface); border-bottom-color: var(--c-border); }
[data-theme="dark"] .progress-step { color: var(--c-light); }
[data-theme="dark"] .progress-step.active { color: var(--c-text); }
[data-theme="dark"] .input-currency, [data-theme="dark"] #gross-income, [data-theme="dark"] #w2-income { background: var(--c-surface-2); color: var(--c-text); border-color: var(--c-border); }
[data-theme="dark"] .input-currency:focus, [data-theme="dark"] #gross-income:focus, [data-theme="dark"] #w2-income:focus { background: var(--c-surface); }
[data-theme="dark"] .btn-primary { background: var(--c-green); color: #0F1E32; }
[data-theme="dark"] .savings-table thead tr { background: var(--c-navy); }
[data-theme="dark"] .savings-table td:first-child { color: var(--c-text); }
[data-theme="dark"] .faq-question span { color: var(--c-text); }
[data-theme="dark"] .disclaimer-bar { background: #451A03; border-bottom-color: #78350F; }
[data-theme="dark"] .disclaimer-bar p, [data-theme="dark"] .disclaimer-bar a, [data-theme="dark"] .disclaimer-close { color: #FCD34D; }
[data-theme="dark"] .article-toc { background: var(--c-surface-2); border-color: var(--c-border); }
[data-theme="dark"] .article-toc-title { color: var(--c-text); }
[data-theme="dark"] .article-toc a { color: var(--c-muted); }
[data-theme="dark"] .article-content-area h2, [data-theme="dark"] .article-content-area h3 { color: var(--c-text); border-top-color: var(--c-border); }
[data-theme="dark"] .blg-card { background: var(--c-surface); border-color: var(--c-border); }
/* Inline-styled light surfaces that must read correctly on dark */
[data-theme="dark"] #disclaimer-modal h2 { color: var(--c-text) !important; }
[data-theme="dark"] #disclaimer-modal p, [data-theme="dark"] #disclaimer-modal label { color: var(--c-muted) !important; }
[data-theme="dark"] .expert-context p { color: var(--c-muted) !important; }
[data-theme="dark"] .tool-float-card p strong { color: var(--c-text); }
/* V12 LAYER END */

/* v12: hide nav badge on small screens */
@media (max-width: 900px) { .nav-irs-badge { display: none; } }


/* ── v12 QA fix pass (visual review 2026-10-03) ── */
.hero-copy { text-align: left; }
.tool-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.step-tabs { width: 100%; }
.tool-float-wrapper::before, .tool-float-wrapper::after { display: none !important; }
[data-theme="dark"] .article-irs-badge { color: #4ADE80; background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.30); }
/* v12 QA fix pass end */


/* ── v12 QA fix 2 (tool card frame + pill contrast) ── */
.tool-float-wrapper { background: none; padding: 0; margin-top: 0; }
.step-pill { color: var(--c-muted); }
.step-pill.done { background: var(--c-green-light); color: #15803D; }
/* v12 QA fix 2 end */