/* ============================================================
   ANNUALPAYCALCULATOR.COM — GLOBAL CSS
   Version: 1.0 | Built: 2026
   
   TABLE OF CONTENTS
   01. CSS Custom Properties (Design Tokens)
   02. CSS Reset & Base
   03. Typography Scale
   04. Layout & Container
   05. Global Header & Navigation
   06. Mobile Navigation
   07. Breadcrumb
   08. Hero / Page Header
   09. Formula Verified Badge
   10. Calculator Widget
   11. Result Display
   12. Ad Slots (pre-reserved, prevents CLS)
   13. Content Sections
   14. Data Tables
   15. Info Box
   16. FAQ Section
   17. Related Calculators (Slot 10)
   18. Prev / Next Navigation (programmatic pages)
   19. Social Actions (Like + Share)
   20. Global Footer
   21. Buttons & Form Elements
   22. Utility Classes
   23. Cookie Banner
   24. Back to Top
   25. PWA Install Banner
   26. Print Styles
   27. Responsive — Tablet (max 1024px)
   28. Responsive — Mobile (max 768px)
   29. Responsive — Small Mobile (max 480px)
   30. Accessibility & Focus
   31. Reduced Motion
   ============================================================ */


/* ============================================================
   01. CSS CUSTOM PROPERTIES
   ============================================================ */
:root {

  /* ── Brand Colors (from logo) ── */
  --color-primary:        #1B3A6B;   /* Navy — main brand */
  --color-primary-dark:   #0F2A52;   /* Navy dark — hover states */
  --color-primary-light:  #EBF4FF;   /* Navy tint — backgrounds */
  --color-primary-xlight: #F0F6FF;   /* Navy ultra-light */

  --color-accent:         #27963C;   /* Forest green — results, CTAs */
  --color-accent-dark:    #1A6B2A;   /* Green dark — hover */
  --color-accent-mid:     #32B44A;   /* Green mid — icons, leaves */
  --color-accent-light:   #F0FDF4;   /* Green tint — result backgrounds */
  --color-accent-xlight:  #F7FEF9;   /* Green ultra-light */

  /* ── Neutral Colors ── */
  --color-text-primary:   #1A1A2E;   /* Near-black — body text */
  --color-text-secondary: #4A5568;   /* Gray — secondary text */
  --color-text-muted:     #718096;   /* Light gray — hints, captions */
  --color-text-inverse:   #FFFFFF;   /* White — text on dark bg */
  --color-text-link:      #1B3A6B;   /* Navy — links */
  --color-text-link-hover:#27963C;   /* Green — link hover */

  /* ── Surface Colors ── */
  --color-bg:             #FFFFFF;   /* Page background */
  --color-surface:        #F8FAFC;   /* Light surface — alt sections */
  --color-surface-2:      #F1F5F9;   /* Slightly darker surface */
  --color-surface-header: #1B3A6B;   /* Header background */
  --color-surface-footer: #0F2A52;   /* Footer background */

  /* ── Border Colors ── */
  --color-border:         #E2E8F0;   /* Default border */
  --color-border-light:   #EEF2F7;   /* Light border */
  --color-border-focus:   #27963C;   /* Focus ring */
  --color-border-primary: #1B3A6B;   /* Navy border */

  /* ── Semantic Colors ── */
  --color-success:        #27963C;
  --color-success-bg:     #F0FDF4;
  --color-success-border: #86EFAC;
  --color-warning:        #D97706;
  --color-warning-bg:     #FFFBEB;
  --color-warning-border: #FCD34D;
  --color-error:          #DC2626;
  --color-error-bg:       #FEF2F2;
  --color-error-border:   #FECACA;
  --color-info:           #1B3A6B;
  --color-info-bg:        #EBF4FF;
  --color-info-border:    #BFDBFE;

  /* ── Typography ── */
  /* System font stack — zero network requests, zero render blocking */
  --font-body:    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --font-heading: Georgia, "Times New Roman", Times, serif;
  --font-mono:    "SF Mono", "Cascadia Code", "Fira Mono", Consolas,
                  "Courier New", monospace;

  /* ── Font Sizes ── */
  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --text-base:  1.0625rem;  /* 17px — slightly larger than default for readability */
  --text-md:    1.125rem;   /* 18px */
  --text-lg:    1.25rem;    /* 20px */
  --text-xl:    1.5rem;     /* 24px */
  --text-2xl:   1.875rem;   /* 30px */
  --text-3xl:   2.25rem;    /* 36px */
  --text-4xl:   2.75rem;    /* 44px */

  /* ── Font Weights ── */
  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold:600;
  --weight-bold:    700;
  --weight-black:   800;

  /* ── Line Heights ── */
  --leading-tight:  1.25;
  --leading-snug:   1.4;
  --leading-normal: 1.6;
  --leading-relaxed:1.75;  /* Body text — optimal for financial content */
  --leading-loose:  2.0;

  /* ── Letter Spacing ── */
  --tracking-tight:  -0.025em;
  --tracking-normal: 0;
  --tracking-wide:   0.025em;
  --tracking-wider:  0.05em;
  --tracking-widest: 0.1em;

  /* ── Spacing Scale ── */
  --space-1:   0.25rem;   /* 4px */
  --space-2:   0.5rem;    /* 8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */

  /* ── Layout ── */
  --container-max:     1200px;
  --container-content: 860px;   /* Max width for body text (readability) */
  --container-narrow:  680px;
  --container-pad:     clamp(1rem, 4vw, 2rem);

  /* ── Border Radius ── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 28px rgba(0,0,0,0.10), 0 4px 10px rgba(0,0,0,0.06);
  --shadow-focus: 0 0 0 3px rgba(39,150,60,0.25);

  /* ── Transitions ── */
  --transition-fast:   150ms ease;
  --transition-base:   250ms ease;
  --transition-slow:   400ms ease;

  /* ── Z-index Scale ── */
  --z-base:     1;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-header:   300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-toast:    600;

  /* ── Header ── */
  --header-height:        68px;
  --header-height-mobile: 58px;

  /* ── Calculator specific ── */
  --calc-input-height:  48px;
  --calc-result-bg:     var(--color-accent-light);
  --calc-result-border: var(--color-success-border);
  --calc-badge-bg:      var(--color-accent-light);
  --calc-badge-color:   var(--color-accent-dark);
  --calc-badge-border:  var(--color-accent);
}


/* ============================================================
   02. CSS RESET & BASE
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 100%;             /* 16px base — rem calculations from this */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
  overflow-x: hidden;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  line-height: var(--leading-relaxed);
  color: var(--color-text-primary);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* NEVER: visibility: hidden — Google sees blank page */
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  max-width: 100%;
}

/* Skip to content link — accessibility */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background: var(--color-primary);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}
.skip-link:focus { top: var(--space-2); }

img, svg, video, canvas, audio, iframe, embed, object {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
  loading: lazy;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

a {
  color: var(--color-text-link);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--transition-fast),
              text-decoration-color var(--transition-fast);
}
a:hover {
  color: var(--color-text-link-hover);
  text-decoration-color: var(--color-text-link-hover);
}

ul, ol { list-style: none; }

table {
  border-collapse: collapse;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-8) 0;
}

strong, b { font-weight: var(--weight-semibold); }
em, i { font-style: italic; }

small { font-size: var(--text-sm); }

sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sup { top: -0.5em; }
sub { bottom: -0.25em; }

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-primary);
}


/* ============================================================
   03. TYPOGRAPHY SCALE
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-body);     /* System sans for headings */
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--color-text-primary);
  letter-spacing: var(--tracking-tight);
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

h1 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  font-weight: var(--weight-black);
  line-height: 1.15;
  margin-bottom: var(--space-4);
}

h2 {
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-weight: var(--weight-bold);
  margin-top: var(--space-10);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-border);
  width: 100%;
  box-sizing: border-box;
  overflow-wrap: break-word;
  word-break: break-word;
}

h2:first-child { margin-top: 0; }

h3 {
  font-size: clamp(var(--text-lg), 2.5vw, var(--text-2xl));
  font-weight: var(--weight-semibold);
  margin-top: var(--space-8);
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

p {
  margin-bottom: var(--space-5);
  max-width: 72ch;       /* Optimal reading line length */
  line-height: var(--leading-relaxed);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

p:last-child { margin-bottom: 0; }

/* Full width paragraphs (tables, intro sections) */
p.full-width { max-width: none; }

/* Lead paragraph */
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  max-width: 68ch;
}

/* Inline code */
code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  background: var(--color-surface);
  color: var(--color-primary);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

/* Code block */
pre {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  overflow-x: auto;
  margin-bottom: var(--space-6);
  line-height: var(--leading-normal);
}

pre code {
  background: none;
  border: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

blockquote {
  border-left: 4px solid var(--color-accent);
  padding: var(--space-4) var(--space-6);
  margin: var(--space-8) 0;
  background: var(--color-accent-xlight);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}
blockquote p { color: var(--color-text-secondary); margin-bottom: 0; }


/* ============================================================
   04. LAYOUT & CONTAINER
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
  box-sizing: border-box;
}

.container--content {
  max-width: var(--container-content);
}

.container--narrow {
  max-width: var(--container-narrow);
}

/* Main content area — offset for sticky header */
#main-content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  min-height: 60vh;
  overflow-x: hidden;
}

/* Two-column layout for desktop (content + sidebar) */
.layout-two-col {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: var(--space-10);
  align-items: start;
}

.layout-two-col .sidebar {
  position: sticky;
  top: calc(var(--header-height) + var(--space-6));
}

/* Section spacing */
.content-section {
  margin-bottom: var(--space-10);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.content-section:last-child {
  margin-bottom: 0;
}


/* ============================================================
   05. GLOBAL HEADER & NAVIGATION
   ============================================================ */
#site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  background: var(--color-surface-header);
  height: var(--header-height);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.header-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.site-logo:hover { opacity: 0.88; }
.site-logo svg {
  height: 42px;
  width: auto;
}
@media (max-width: 480px) {
  .site-logo svg {
    height: 34px;
  }
}

/* Desktop nav */
#main-nav {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

#main-nav > ul {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast),
              color var(--transition-fast);
  white-space: nowrap;
  letter-spacing: var(--tracking-wide);
}

.nav-link:hover {
  background: rgba(255,255,255,0.10);
  color: #FFFFFF;
}

/* Active nav state — driven by data-active on <header> */
/* e.g. <header data-active="salary"> highlights salary nav item */
[data-active="salary"]  [data-section="salary"],
[data-active="tax"]     [data-section="tax"],
[data-active="states"]  [data-section="states"],
[data-active="guides"]  [data-section="guides"],
[data-active="home"]    [data-section="home"] {
  background: rgba(255,255,255,0.12);
  color: #FFFFFF;
  position: relative;
}
[data-active="salary"]  [data-section="salary"]::after,
[data-active="tax"]     [data-section="tax"]::after,
[data-active="states"]  [data-section="states"]::after,
[data-active="guides"]  [data-section="guides"]::after,
[data-active="home"]    [data-section="home"]::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: var(--space-4);
  right: var(--space-4);
  height: 2px;
  background: var(--color-accent-mid);
  border-radius: var(--radius-full);
}


/* Write for Us CTA button in nav */
.nav-link--cta {
  background: var(--color-accent) !important;
  color: #FFFFFF !important;
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-5) !important;
  font-weight: var(--weight-semibold) !important;
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast) !important;
  margin-left: var(--space-2);
}
.nav-link--cta:hover {
  background: var(--color-accent-dark) !important;
  color: #FFFFFF !important;
}
[data-active="write"] .nav-link--cta {
  background: var(--color-accent-dark) !important;
}

/* Dropdown menus */
.has-dropdown {
  position: relative;
}

.dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  min-width: 220px;
  padding: var(--space-2);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(-6px);
  transition: opacity var(--transition-fast),
              visibility var(--transition-fast),
              transform var(--transition-fast);
  z-index: var(--z-dropdown);
}

.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.dropdown li a {
  display: block;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-primary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast),
              color var(--transition-fast);
}
.dropdown li a:hover {
  background: var(--color-primary-xlight);
  color: var(--color-primary);
}
.dropdown li a::after { display: none; }

/* Dropdown arrow indicator */
.has-dropdown > .nav-link::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid rgba(255,255,255,0.6);
  margin-left: var(--space-2);
  transition: transform var(--transition-fast);
  position: static;
  background: none;
  border-radius: 0;
}
.has-dropdown:hover > .nav-link::after {
  transform: rotate(180deg);
}

/* Mobile hamburger button */
#mobile-menu-btn {
  display: none;
  flex-shrink: 0;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-md);
  cursor: pointer;
  padding: var(--space-2);
  transition: background var(--transition-fast);
}
#mobile-menu-btn:hover {
  background: rgba(255,255,255,0.15);
}
#mobile-menu-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: #FFFFFF;
  border-radius: 2px;
  transition: transform var(--transition-base),
              opacity var(--transition-base);
}
/* Hamburger → X animation */
#mobile-menu-btn[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
#mobile-menu-btn[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
#mobile-menu-btn[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ============================================================
   06. MOBILE NAVIGATION
   ============================================================ */
@media (max-width: 1024px) {
  #mobile-menu-btn { display: flex; }

  #main-nav {
    position: fixed;
    top: var(--header-height-mobile);
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-surface-header);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    padding: var(--space-6) var(--container-pad);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--transition-base);
    z-index: var(--z-overlay);
    /* Hide desktop nav from layout on mobile */
    flex: unset;
    width: 100%;
  }

  #main-nav.is-open {
    transform: translateX(0);
  }

  #main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }

  .nav-link {
    padding: var(--space-4);
    font-size: var(--text-md);
    border-radius: var(--radius-lg);
  }

  .has-dropdown > .nav-link::after {
    margin-left: auto;
  }

  .dropdown {
    /* Reset ALL desktop positioning */
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    /* Reset desktop visibility */
    opacity: 1 !important;
    visibility: visible !important;
    /* Reset desktop decoration */
    box-shadow: none !important;
    border: none !important;
    border-left: 3px solid var(--color-accent) !important;
    border-radius: 0 !important;
    /* Mobile styling */
    background: rgba(0,0,0,0.25) !important;
    width: auto !important;
    min-width: unset !important;
    max-width: 100% !important;
    margin-left: 1rem !important;
    margin-right: 0 !important;
    margin-top: 0.25rem !important;
    padding: 0.5rem 0 !important;
    display: none !important;
    z-index: auto !important;
    overflow: visible !important;
    float: none !important;
  }

  .has-dropdown.is-open .dropdown {
    display: block !important;
  }

  .dropdown li {
    display: block !important;
    width: 100% !important;
    float: none !important;
  }

  .dropdown li a {
    display: block !important;
    width: 100% !important;
    color: rgba(255,255,255,0.90) !important;
    border-radius: 0 !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.9375rem !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    white-space: normal !important;
    text-align: left !important;
  }
  .dropdown li a:hover,
  .dropdown li a:focus {
    background: rgba(255,255,255,0.10) !important;
    color: #FFFFFF !important;
  }
}


/* ============================================================
   07. BREADCRUMB
   ============================================================ */
.breadcrumb {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) 0;
}

.breadcrumb ol {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-pad);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  font-size: var(--text-sm);
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-muted);
}

.breadcrumb li::after {
  content: "›";
  color: var(--color-border);
  font-size: var(--text-base);
}

.breadcrumb li:last-child::after { display: none; }
.breadcrumb li:last-child { color: var(--color-text-secondary); }

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.breadcrumb a:hover { color: var(--color-primary); }


/* ============================================================
   08. HERO / PAGE HEADER
   ============================================================ */
.page-hero {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-8) 0 var(--space-6);
}

.page-hero .container { max-width: var(--container-max); }

.page-hero h1 {
  margin-bottom: var(--space-3);
  color: var(--color-primary);
}

.page-hero .lead {
  color: var(--color-text-secondary);
  margin-bottom: 0;
}


/* ============================================================
   09. FORMULA VERIFIED BADGE
   ============================================================ */
.verified-badge {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  background: var(--calc-badge-bg);
  color: var(--calc-badge-color);
  border: 1px solid var(--calc-badge-border);
  border-radius: var(--radius-full);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-5);
  line-height: 1.3;
}

.verified-badge svg,
.verified-badge i {
  flex-shrink: 0;
  color: var(--color-accent);
}

.verified-badge a {
  color: var(--color-accent-dark);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.verified-badge a:hover { color: var(--color-primary); }

.verified-badge .separator {
  color: var(--color-success-border);
}

/* Update badge variant */
.verified-badge--update {
  background: var(--color-warning-bg);
  color: var(--color-warning);
  border-color: var(--color-warning-border);
}

/* Source badge variant */
.verified-badge--source {
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}


/* ============================================================
   10. CALCULATOR WIDGET
   ============================================================ */
.calculator-widget {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  margin-bottom: var(--space-8);
  box-shadow: var(--shadow-md);
}

.calc-title {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

/* Input grid */
.calc-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-5);
  margin-bottom: var(--space-6);
}

.calc-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.calc-field label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-secondary);
  letter-spacing: var(--tracking-wide);
}

.calc-field input,
.calc-field select {
  height: var(--calc-input-height);
  padding: 0 var(--space-4);
  font-size: var(--text-base);
  font-family: var(--font-body);
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
}

.calc-field input:hover,
.calc-field select:hover {
  border-color: var(--color-primary-light);
}

.calc-field input:focus,
.calc-field select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--shadow-focus);
}

.calc-field input::placeholder {
  color: var(--color-text-muted);
  font-style: italic;
}

/* Input with currency prefix */
.input-prefix-wrap {
  position: relative;
}
.input-prefix {
  position: absolute;
  left: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  pointer-events: none;
}
.input-prefix + input { padding-left: var(--space-8); }

/* Input with suffix (%) */
.input-suffix-wrap { position: relative; }
.input-suffix {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  pointer-events: none;
}
.input-suffix ~ input { padding-right: var(--space-8); }

/* Select arrow */
.calc-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  padding-right: var(--space-10);
  cursor: pointer;
}

/* Calculate button */
.calc-btn {
  width: 100%;
  height: 52px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  letter-spacing: var(--tracking-wide);
  transition: background var(--transition-fast),
              transform var(--transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
}
.calc-btn:hover  { background: var(--color-primary-dark); }
.calc-btn:active { transform: scale(0.99); }


/* ============================================================
   11. RESULT DISPLAY
   ============================================================ */
.calc-results {
  margin-top: var(--space-6);
  border: 1px solid var(--calc-result-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--calc-result-bg);
}

/* Primary result — annual */
.result-primary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-5) var(--space-6);
  background: var(--color-accent);
  border-bottom: 1px solid var(--color-accent-dark);
}
.result-primary .result-label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.result-primary .result-value {
  font-size: var(--text-3xl);
  font-weight: var(--weight-black);
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
}

/* Secondary results — monthly, weekly etc */
.result-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid rgba(39,150,60,0.12);
  transition: background var(--transition-fast);
}
.result-row:last-child { border-bottom: none; }
.result-row:hover { background: rgba(39,150,60,0.04); }

.result-row .result-label {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  font-weight: var(--weight-medium);
}
.result-row .result-value {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  color: var(--color-accent-dark);
  font-variant-numeric: tabular-nums;
}

/* Empty/placeholder state */
.result-value--empty {
  color: var(--color-text-muted);
  font-weight: var(--weight-normal);
  font-style: italic;
}

/* Disclaimer below results */
.calc-disclaimer {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: var(--leading-normal);
}


/* ============================================================
   12. AD SLOTS — pre-reserved, prevents CLS
   ============================================================ */
.ad-slot {
  min-height: 280px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-8) 0;
  position: relative;
  overflow: hidden;
}

.ad-slot::before {
  content: "Advertisement";
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-widest);
  position: absolute;
  top: var(--space-2);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

/* Different slot sizes */
.ad-slot--leaderboard { min-height: 90px; }    /* 728×90 */
.ad-slot--rectangle   { min-height: 250px; }   /* 300×250 — most common */
.ad-slot--large       { min-height: 600px; }   /* 160×600 sidebar */
.ad-slot--mobile      { min-height: 100px; }   /* 320×100 mobile banner */

/* Once AdSense loads, the dashed border disappears */
.ad-slot ins.adsbygoogle { min-height: inherit; }


/* ============================================================
   13. CONTENT SECTIONS
   ============================================================ */
.content-body {
  max-width: var(--container-content);
}

.content-body ul,
.content-body ol {
  margin-bottom: var(--space-5);
  padding-left: var(--space-6);
}

.content-body ul { list-style: disc; }
.content-body ol { list-style: decimal; }

.content-body li {
  margin-bottom: var(--space-2);
  line-height: var(--leading-relaxed);
}

.content-body li::marker {
  color: var(--color-accent);
}

/* Worked example box */
.worked-example {
  background: var(--color-primary-xlight);
  border: 1px solid var(--color-info-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6);
  margin: var(--space-8) 0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.worked-example h3 {
  color: var(--color-primary);
  margin-top: 0;
  margin-bottom: var(--space-4);
  font-size: var(--text-lg);
}

.worked-example .example-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-info-border);
  font-size: var(--text-sm);
}
.worked-example .example-row:last-child { border-bottom: none; }
.worked-example .example-label { color: var(--color-text-secondary); }
.worked-example .example-value {
  font-weight: var(--weight-semibold);
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* What people get wrong section */
.people-get-wrong {
  background: var(--color-warning-bg);
  border: 1px solid var(--color-warning-border);
  border-left: 4px solid var(--color-warning);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-6);
  margin: var(--space-8) 0;
}

.people-get-wrong h2,
.people-get-wrong h3 {
  color: var(--color-warning);
  border-bottom-color: var(--color-warning-border);
  margin-top: 0;
}


/* ============================================================
   14. DATA TABLES
   ============================================================ */
.data-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: var(--space-6) 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  box-sizing: border-box;
  max-width: 100%;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  min-width: 400px;
}

.data-table caption {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  text-align: left;
  padding: var(--space-3) var(--space-4) var(--space-2);
  caption-side: top;
}

.data-table thead th {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-weight: var(--weight-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  padding: var(--space-3) var(--space-4);
  text-align: left;
  white-space: nowrap;
}

.data-table thead th:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}
.data-table thead th:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.data-table tbody td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-light);
  color: var(--color-text-primary);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}

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

.data-table tbody tr:nth-child(even) td {
  background: var(--color-surface);
}

.data-table tbody tr:hover td {
  background: var(--color-primary-xlight);
}

/* Highlighted row (e.g. median wage) */
.data-table tbody tr.highlight td {
  background: var(--color-accent-xlight);
  font-weight: var(--weight-semibold);
  color: var(--color-accent-dark);
}

/* Right-aligned number columns */
.data-table td.num,
.data-table th.num {
  text-align: right;
}

/* Table footer row (totals) */
.data-table tfoot td {
  padding: var(--space-3) var(--space-4);
  font-weight: var(--weight-semibold);
  border-top: 2px solid var(--color-border);
  background: var(--color-surface-2);
}


/* ============================================================
   15. INFO BOX
   ============================================================ */
.info-box {
  background: var(--color-info-bg);
  border: 1px solid var(--color-info-border);
  border-left: 4px solid var(--color-primary);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: var(--space-5) var(--space-6);
  margin: var(--space-8) 0;
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.info-box i,
.info-box svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.25rem;
}

.info-box-content p {
  margin-bottom: 0;
  max-width: none;
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.info-box-content strong {
  color: var(--color-primary);
  display: block;
  margin-bottom: var(--space-1);
  font-size: var(--text-base);
}

/* Success variant */
.info-box--success {
  background: var(--color-success-bg);
  border-color: var(--color-success-border);
  border-left-color: var(--color-success);
}
.info-box--success i { color: var(--color-success); }

/* Warning variant */
.info-box--warning {
  background: var(--color-warning-bg);
  border-color: var(--color-warning-border);
  border-left-color: var(--color-warning);
}
.info-box--warning i { color: var(--color-warning); }


/* ============================================================
   16. FAQ SECTION
   ============================================================ */
.faq-section {
  margin: var(--space-10) 0;
}

.faq-section > h2 {
  color: var(--color-primary);
}

.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.faq-item:hover {
  box-shadow: var(--shadow-sm);
}

.faq-item h3 {
  margin: 0;
  font-size: var(--text-base);
}

.faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg);
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  color: var(--color-text-primary);
  line-height: var(--leading-snug);
  transition: background var(--transition-fast);
}

.faq-question:hover {
  background: var(--color-primary-xlight);
  color: var(--color-primary);
}

.faq-question i {
  flex-shrink: 0;
  color: var(--color-text-muted);
  font-size: 1.1rem;
  transition: transform var(--transition-base),
              color var(--transition-fast);
}

.faq-item.is-open .faq-question {
  background: var(--color-primary-xlight);
  color: var(--color-primary);
}
.faq-item.is-open .faq-question i {
  transform: rotate(180deg);
  color: var(--color-primary);
}

.faq-answer {
  display: none;
  padding: var(--space-2) var(--space-6) var(--space-5);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border-light);
}

.faq-item.is-open .faq-answer {
  display: block;
}

.faq-answer p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-relaxed);
  max-width: none;
}

.faq-answer p:last-child { margin-bottom: 0; }

/* Static FAQ (no JS toggle — for pages that need always-visible content) */
.faq-item--static .faq-question { cursor: default; }
.faq-item--static .faq-answer { display: block; }
.faq-item--static .faq-question i { display: none; }


/* ============================================================
   17. RELATED CALCULATORS (SLOT 10)
   ============================================================ */
.related-calculators {
  margin: var(--space-10) 0;
  padding: var(--space-8);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.related-calculators h2 {
  font-size: var(--text-xl);
  color: var(--color-primary);
  border-bottom-color: var(--color-border);
  margin-top: 0;
  margin-bottom: var(--space-5);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  list-style: none;
}

.related-grid li a {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: var(--color-primary);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
}

.related-grid li a:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
  color: var(--color-accent-dark);
}

.related-grid li a p {
  font-size: var(--text-xs);
  font-weight: var(--weight-normal);
  color: var(--color-text-muted);
  margin: 0;
  max-width: none;
}


/* ============================================================
   18. PREV / NEXT NAVIGATION (programmatic pages)
   ============================================================ */
.prev-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-8) 0;
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.prev-next a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-primary);
  text-decoration: none;
  padding: var(--space-3) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast),
              border-color var(--transition-fast);
}

.prev-next a:hover {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
}

.prev-next a[rel="next"] { margin-left: auto; }


/* ============================================================
   19. SOCIAL ACTIONS (LIKE + SHARE)
   ============================================================ */
#social-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding: var(--space-5) 0;
  border-top: 1px solid var(--color-border-light);
  margin-top: var(--space-5);
}

/* Like button */
.like-btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: border-color var(--transition-fast),
              color var(--transition-fast),
              background var(--transition-fast);
}
.like-btn:hover {
  border-color: var(--color-error);
  color: var(--color-error);
}
.like-btn.liked {
  background: var(--color-error-bg);
  border-color: var(--color-error);
  color: var(--color-error);
}
.like-btn svg { transition: transform var(--transition-base); }
.like-btn.liked svg { fill: var(--color-error); stroke: var(--color-error); }
.like-btn:active svg { transform: scale(1.3); }

/* Share label */
.share-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}

/* Share buttons */
.share-buttons {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 34px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}
.share-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-xlight);
  color: var(--color-primary);
}

.share-twitter:hover  { border-color: #000000; background: #f7f7f7; color: #000000; }
.share-whatsapp:hover { border-color: #25D366; background: #f0fdf4; color: #128C7E; }
.share-facebook:hover { border-color: #1877F2; background: #eff6ff; color: #1877F2; }
.share-copy.copied    { border-color: var(--color-accent); background: var(--color-accent-light); color: var(--color-accent-dark); }


/* ============================================================
   20. GLOBAL FOOTER
   ============================================================ */
#site-footer {
  background: var(--color-surface-footer);
  color: rgba(255,255,255,0.75);
  margin-top: var(--space-16);
}

/* ── Footer top: logo + tagline row ── */
.footer-brand {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-10) var(--container-pad) var(--space-8);
  display: flex;
  align-items: flex-start;
  gap: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.footer-logo:hover { opacity: 0.85; }
.footer-logo img {
  height: 44px;
  width: auto;
  display: block;
}
.footer-logo svg {
  height: 44px;
  width: auto;
  display: block;
}

.footer-tagline {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.50);
  line-height: var(--leading-relaxed);
  max-width: 380px;
  margin: 6px 0 0;
}

/* ── Footer nav columns ── */
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-8) var(--container-pad);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-col h3 {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  margin-bottom: var(--space-4);
  padding-bottom: 0;
  border-bottom: none;
  margin-top: 0;
}

.footer-col ul { list-style: none; }
.footer-col ul li { margin-bottom: var(--space-2); }
.footer-col ul li a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color var(--transition-fast);
  line-height: var(--leading-snug);
}
.footer-col ul li a:hover {
  color: #FFFFFF;
  text-decoration-color: transparent;
}

/* ── Footer bottom bar ── */
.footer-bottom {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--space-5) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.footer-bottom-left {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.38);
  line-height: var(--leading-normal);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.footer-bottom-right a {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-bottom-right a:hover { color: rgba(255,255,255,0.85); }


/* ============================================================
   21. BUTTONS & FORM ELEMENTS
   ============================================================ */

/* Primary button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-6);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
  letter-spacing: var(--tracking-wide);
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

.btn--accent {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}
.btn--accent:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
  color: var(--color-text-inverse);
}

.btn--outline {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn--outline:hover {
  background: var(--color-primary-light);
}

.btn--sm {
  height: 36px;
  padding: 0 var(--space-4);
  font-size: var(--text-xs);
}

.btn--lg {
  height: 52px;
  padding: 0 var(--space-8);
  font-size: var(--text-md);
}

/* Print / save button */
.print-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-body);
  transition: all var(--transition-fast);
}
.print-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-xlight);
}


/* ============================================================
   22. UTILITY CLASSES
   ============================================================ */

/* Text alignment */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

/* Text colors */
.text-primary   { color: var(--color-primary) !important; }
.text-accent    { color: var(--color-accent) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-error     { color: var(--color-error) !important; }

/* Font weights */
.font-normal   { font-weight: var(--weight-normal); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* Font sizes */
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }

/* Display */
.hidden    { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Spacing */
.mt-0  { margin-top: 0; }
.mb-0  { margin-bottom: 0; }
.mt-4  { margin-top: var(--space-4); }
.mb-4  { margin-bottom: var(--space-4); }
.mt-8  { margin-top: var(--space-8); }
.mb-8  { margin-bottom: var(--space-8); }

/* Borders */
.border-top    { border-top: 1px solid var(--color-border); }
.border-bottom { border-bottom: 1px solid var(--color-border); }

/* Number formatting */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Currency display */
.currency {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  color: var(--color-accent-dark);
}


/* ============================================================
   23. COOKIE BANNER
   ============================================================ */
#cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--color-surface-footer);
  border-top: 2px solid var(--color-accent);
  padding: var(--space-4) var(--container-pad);
  z-index: var(--z-toast);
  display: flex;
  align-items: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#cookie-banner p {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.80);
  max-width: none;
  margin: 0;
  flex: 1;
  min-width: 200px;
}

#cookie-banner a {
  color: var(--color-accent-mid);
}

.cookie-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

#accept-cookies {
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background var(--transition-fast);
}
#accept-cookies:hover { background: var(--color-accent-dark); }

#reject-cookies {
  padding: var(--space-2) var(--space-5);
  background: transparent;
  color: rgba(255,255,255,0.70);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}
#reject-cookies:hover {
  border-color: rgba(255,255,255,0.60);
  color: #FFFFFF;
}


/* ============================================================
   24. BACK TO TOP
   ============================================================ */
#back-to-top {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 44px;
  height: 44px;
  background: var(--color-primary);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity var(--transition-base),
              visibility var(--transition-base),
              transform var(--transition-base),
              background var(--transition-fast);
  z-index: var(--z-sticky);
  font-size: 1.25rem;
}

#back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#back-to-top:hover {
  background: var(--color-accent);
}


/* ============================================================
   25. PWA INSTALL BANNER
   ============================================================ */
#pwa-install-banner {
  background: var(--color-primary-light);
  border-bottom: 1px solid var(--color-info-border);
  padding: var(--space-3) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

#pwa-install-banner p {
  font-size: var(--text-sm);
  color: var(--color-primary);
  margin: 0;
  max-width: none;
}

#pwa-install-btn {
  padding: var(--space-2) var(--space-5);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  flex-shrink: 0;
}

#pwa-install-dismiss {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  padding: var(--space-1);
}


/* ============================================================
   26. PRINT STYLES
   ============================================================ */
@media print {
  #site-header,
  #site-footer,
  .breadcrumb,
  #social-actions,
  .ad-slot,
  #back-to-top,
  #cookie-banner,
  .related-calculators,
  .prev-next,
  #mobile-menu-btn { display: none !important; }

  body {
    font-size: 12pt;
    color: #000000;
    background: #FFFFFF;
  }

  h1 { font-size: 20pt; color: #1B3A6B; }
  h2 { font-size: 16pt; color: #1B3A6B; }
  h3 { font-size: 13pt; }

  a { color: #000000; text-decoration: none; }

  .calculator-widget {
    border: 1pt solid #CCCCCC;
    box-shadow: none;
    page-break-inside: avoid;
  }

  .calc-results {
    border: 1pt solid #27963C;
    page-break-inside: avoid;
  }

  .data-table-wrap {
    border: 1pt solid #CCCCCC;
    page-break-inside: avoid;
    overflow: visible;
  }

  .data-table thead th {
    background: #1B3A6B !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .faq-answer { display: block !important; }

  #main-content { padding-top: 0; }

  /* Print header */
  body::before {
    content: "AnnualPayCalculator.com — Free US Salary & Tax Calculators";
    display: block;
    font-size: 9pt;
    color: #666666;
    padding-bottom: 8pt;
    border-bottom: 1pt solid #CCCCCC;
    margin-bottom: 16pt;
  }
}


/* ============================================================
   27. RESPONSIVE — TABLET (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --header-height: var(--header-height-mobile);
  }

  .layout-two-col {
    grid-template-columns: 1fr;
  }

  .layout-two-col .sidebar {
    position: static;
    order: -1;
  }

  .footer-brand {
    flex-direction: column;
    gap: var(--space-4);
  }
  .footer-inner {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
  }

  h1 { font-size: clamp(var(--text-2xl), 4vw, var(--text-3xl)); }
  h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); }

  .calculator-widget { padding: var(--space-6); }
}


/* ============================================================
   28. RESPONSIVE — MOBILE (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  #main-content {
    padding-top: var(--space-6);
    padding-bottom: var(--space-12);
  }

  .calculator-widget {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
  }

  .calc-inputs {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .result-primary .result-value {
    font-size: var(--text-2xl);
  }

  .result-row {
    padding: var(--space-3) var(--space-4);
  }

  .data-table { font-size: var(--text-xs); }
  .data-table thead th,
  .data-table tbody td {
    padding: var(--space-2) var(--space-3);
  }

  .footer-inner {
    grid-template-columns: repeat(2, 1fr);
    padding-top: var(--space-6);
    gap: var(--space-5);
  }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .related-calculators {
    padding: var(--space-5);
  }

  .related-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .prev-next {
    gap: var(--space-2);
  }

  .prev-next a {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  .faq-question {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-sm);
  }

  .faq-answer {
    padding: var(--space-2) var(--space-4) var(--space-4);
  }

  .worked-example { padding: var(--space-4); }

  .info-box { padding: var(--space-4); }

  h1 { font-size: clamp(var(--text-xl), 5vw, var(--text-2xl)); }
  h2 { font-size: clamp(var(--text-lg), 4vw, var(--text-xl)); }

  .ad-slot { min-height: 100px; }
  .ad-slot--rectangle { min-height: 250px; }

  #back-to-top {
    bottom: var(--space-4);
    right: var(--space-4);
    width: 40px;
    height: 40px;
  }

  #cookie-banner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Mobile: ensure nav does not affect header layout */
  #main-nav {
    flex: unset;
  }

  /* Mobile: breadcrumb smaller */
  .breadcrumb ol {
    font-size: var(--text-xs);
    gap: var(--space-1);
  }

  /* Mobile: lead text smaller */
  .lead {
    font-size: var(--text-base);
  }

  /* Mobile: verified badge wrap */
  .verified-badge {
    font-size: var(--text-xs);
    flex-wrap: wrap;
  }

  /* Mobile: formula mono text — prevent overflow */
  .fv {
    font-size: 0.75rem !important;
    word-break: break-word;
  }

  /* Mobile: worked example table responsive */
  .worked-example .example-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
    padding: var(--space-3) 0;
  }

  /* Mobile: data table caption */
  .data-table caption {
    font-size: var(--text-xs);
  }

  /* Mobile: page top padding */
  #main-content {
    padding-top: var(--space-4);
  }
}


/* ============================================================
   29. RESPONSIVE — SMALL MOBILE (max 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Small mobile header */
  .header-inner {
    padding: 0 var(--space-4);
    gap: var(--space-3);
  }

  .site-logo svg {
    height: 32px;
  }

  #mobile-menu-btn {
    width: 36px;
    height: 36px;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
  }

  .verified-badge {
    font-size: var(--text-xs);
    padding: var(--space-2) var(--space-3);
  }

  .result-primary {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }

  .result-primary .result-value {
    font-size: var(--text-2xl);
  }

  .share-buttons { gap: var(--space-2); }

  .share-btn {
    height: 30px;
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
  }

  .prev-next {
    flex-direction: column;
    align-items: stretch;
  }

  .prev-next a[rel="next"] { margin-left: 0; }

  h1 { font-size: var(--text-xl); }
  h2 { font-size: var(--text-lg); }
}


/* ============================================================
   CALCULATOR PAGE LAYOUTS — RESPONSIVE
   Covers all calc-layout, formula-grid, content-grid,
   wage-cards, mistake-grid, cluster-grid, hero-inner,
   wfu-layout, contact-grid, req-grid, benefits-grid,
   steps-grid, expertise-grid, stats-inner, topics-grid
   Used by every calculator and guide page on the site
   ============================================================ */

/* ── Tablet (max 900px) ── */
@media (max-width: 900px) {
  /* Calculator two-column layout → single column */
  .calc-layout {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  .calc-sticky {
    position: static !important;
    top: auto !important;
  }

  /* Hero two-column → single column */
  .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .quick-calc {
    margin-top: 0 !important;
  }

  /* Write for us layout */
  .wfu-layout {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  .wfu-sidebar {
    position: static !important;
    order: -1 !important;
  }

  /* Contact grid */
  .contact-grid {
    grid-template-columns: 1fr !important;
  }

  /* Author header */
  .author-header {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
  }
  .author-credentials {
    justify-content: center !important;
  }
}

/* ── Mobile (max 768px) ── */
@media (max-width: 768px) {
  /* Formula and content grids → single column */
  .formula-grid,
  .content-grid,
  .req-grid,
  .steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Cluster grid */
  .cluster-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  /* Benefits grid → 2 col on mobile */
  .benefits-grid,
  .expertise-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Stats inner */
  .stats-inner,
  .wfu-stats-inner {
    justify-content: center !important;
    gap: 1rem !important;
  }

  /* Process steps */
  .process-step {
    gap: 0.75rem !important;
  }

  /* Mistake grid */
  .mistake-grid {
    grid-template-columns: 1fr !important;
  }

  /* Wage cards grid */
  .wage-cards {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Topics grid */
  .topics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  /* Worked example rows → stack */
  .worked-example .example-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    padding: 0.5rem 0 !important;
  }

  /* Formula box values — prevent mono text overflow */
  .fv {
    font-size: 0.75rem !important;
    word-break: break-all !important;
    font-family: -apple-system, sans-serif !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
  }
  .fl {
    min-width: 90px !important;
    font-size: 0.8125rem !important;
  }

  /* Calculator card full width */
  .calc-card {
    border-radius: var(--radius-lg) !important;
  }

  /* Related calc cards — 2 col */
  .calc-grid-related {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }

  /* Stats bar — 3 col */
  .stats-inner {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.75rem !important;
    text-align: center !important;
  }

  /* Footer brand */
  .footer-brand {
    flex-direction: column !important;
    gap: 1rem !important;
    padding-top: 2rem !important;
    padding-bottom: 1.5rem !important;
  }

  /* Info cards sidebar */
  .wfu-info-card,
  .wfu-cta-card,
  .contact-info-card {
    position: static !important;
  }

  /* Requirement cards */
  .req-card ul li {
    font-size: 0.75rem !important;
  }
}

/* ── Small Mobile (max 480px) ── */
@media (max-width: 480px) {
  /* Wage cards → 2 col */
  .wage-cards {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Topics grid → 1 col */
  .topics-grid {
    grid-template-columns: 1fr !important;
  }

  /* Benefits grid → 1 col */
  .benefits-grid,
  .expertise-grid {
    grid-template-columns: 1fr !important;
  }

  /* Related calc cards → 1 col */
  .calc-grid-related {
    grid-template-columns: 1fr !important;
  }

  /* Stats bar → 2 col */
  .stats-inner {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Cluster cards */
  .cluster-card {
    padding: 1rem !important;
  }

  /* Hero badges */
  .hero-badges,
  .wfu-badges {
    gap: 0.375rem !important;
  }
  .hero-badge,
  .wfu-badge {
    font-size: 0.75rem !important;
    padding: 0.2rem 0.625rem !important;
  }

  /* Formula boxes */
  .formula-box {
    padding: 1rem !important;
  }
  .formula-line {
    flex-direction: column !important;
    gap: 0.2rem !important;
    padding: 0.5rem 0 !important;
  }
  .fl {
    min-width: unset !important;
    font-size: 0.75rem !important;
    color: var(--color-text-muted) !important;
  }
  .fv {
    font-size: 0.8125rem !important;
    word-break: break-word !important;
  }

  /* Worked example */
  .worked-example {
    padding: 1rem !important;
  }

  /* Data table — hide less important columns */
  .data-table th:nth-child(n+5),
  .data-table td:nth-child(n+5) {
    display: none !important;
  }

  /* QC tabs wrap */
  .qc-tabs,
  .calc-mode {
    flex-wrap: wrap !important;
  }

  /* Page hero */
  .wfu-hero-inner,
  .hero-inner {
    padding: 0 1rem !important;
  }
  .wfu-hero {
    padding: 2.5rem 0 2rem !important;
  }

  /* Author avatar center */
  .author-avatar {
    margin: 0 auto !important;
  }

  /* Credential badges center */
  .author-credentials {
    justify-content: center !important;
  }
}


/* ============================================================
   30. ACCESSIBILITY & FOCUS
   ============================================================ */

/* Visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--color-border-focus);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
  outline: none;
}

/* High contrast mode support */
@media (forced-colors: active) {
  .btn,
  .calc-btn,
  .like-btn,
  .share-btn {
    border: 2px solid ButtonText;
  }
  .calculator-widget {
    border: 2px solid ButtonText;
  }
}

/* Keyboard navigation indicator */
.js-focus-visible :focus:not(.focus-visible) {
  outline: none;
}


/* ============================================================
   31. 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;
  }

  #back-to-top {
    transition: none;
  }
}






/* ============================================================
   PAGE-LEVEL UTILITY CLASSES
   Replaces all inline styles across all pages
   ============================================================ */

/* Page header section */
.page-header {
  padding: 1.75rem 0 0.5rem;
  width: 100%;
  box-sizing: border-box;
}

.page-header-meta {
  margin-bottom: 0.35rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Verified badge inline */
.verified-badge-inline {
  display: inline-flex;
  vertical-align: middle;
}

/* Lead paragraph */
.lead-text {
  max-width: 62ch;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-6);
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Related calc cards grid */
.related-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  width: 100%;
  box-sizing: border-box;
}

/* Related calc card */
.related-calc-card {
  display: block;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.125rem;
  text-decoration: none;
  transition: border-color 200ms ease, box-shadow 200ms ease;
  box-sizing: border-box;
  width: 100%;
}
.related-calc-card:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
}

/* Card label (uppercase accent) */
.card-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.4rem;
}

/* Card title */
.card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* Card description */
.card-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin-top: 0.3rem;
}

/* Trust note under calculator */
.calc-trust-note {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-sizing: border-box;
  width: 100%;
}

.calc-trust-note-inner {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}

.calc-trust-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--color-accent);
}

.calc-trust-text {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* Required field marker */
.required-marker {
  color: var(--color-error);
}

/* Hidden (JS-controlled) */
.js-hidden {
  display: none;
}

/* Calc disclaimer */
.calc-note {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  margin: 0.75rem 0 0;
  font-family: inherit;
}

/* Section label in calc */
.calc-section-divider {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  padding: 0.75rem 0 0.5rem;
  border-top: 1px solid var(--color-border);
  margin-top: 0.25rem;
}

/* Inline color utilities (replaces style="color:...") */
.c-error   { color: var(--color-error)   !important; }
.c-accent  { color: var(--color-accent)  !important; }
.c-warning { color: var(--color-warning) !important; }
.c-muted   { color: var(--color-text-muted) !important; }
.c-primary { color: var(--color-primary) !important; }
.c-white   { color: #FFFFFF !important; }

/* Background utilities */
.bg-info    { background: var(--color-info-bg) !important; }
.bg-success { background: var(--color-success-bg) !important; }
.bg-error   { background: var(--color-error-bg) !important; }
.bg-warning { background: var(--color-warning-bg) !important; }

/* Margin utilities */
.mt-0  { margin-top: 0 !important; }
.mt-4  { margin-top: 1rem !important; }
.mt-5  { margin-top: 1.25rem !important; }
.mb-4  { margin-bottom: 1rem !important; }
.mb-5  { margin-bottom: 1.25rem !important; }

/* Font size utilities */
.fs-xs  { font-size: 0.75rem; }
.fs-sm  { font-size: 0.8125rem; }
.fs-md  { font-size: 0.875rem; }
.fs-lg  { font-size: 1.5rem; margin-bottom: 0.5rem; }

/* Section top padding */
.section-top { padding: 1.75rem 0 0.5rem; }
.section-pad { padding: 1.5rem 0 0; }

/* List utilities */
.list-clean { list-style: none; padding: 0; margin: 0; }

/* Sitemap grid */
.sitemap-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.5rem;
}

/* About page stat item */
.stat-item {
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  font-size: 0.9375rem;
}
.stat-item::before {
  content: "";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1B3A6B;
  margin-bottom: 0.25rem;
}
.stat-value { font-size: 0.8125rem; color: #718096; }

/* Inline formula note text */
.formula-note-text {
  font-family: inherit;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}
.formula-note-text-sm {
  font-family: inherit;
  font-size: 0.875rem;
}

/* Position indicator for bullet lists */
.bullet-icon {
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* Responsive: Related calc grid */
@media (max-width: 600px) {
  .related-calc-grid {
    grid-template-columns: 1fr !important;
  }
  .lead-text {
    max-width: 100%;
    font-size: 0.9375rem;
  }
}



/* ── Additional utility classes ── */

/* Homepage hero sections */
.hero-section {
  padding: 3.5rem 0;
  width: 100%;
  box-sizing: border-box;
}
.hero-section-alt {
  padding: 3.5rem 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  width: 100%;
  box-sizing: border-box;
}
.section-divider {
  padding: 2.5rem 0;
  border-top: 1px solid var(--color-border);
  width: 100%;
  box-sizing: border-box;
}
.homepage-calc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}
.homepage-stat-note {
  text-align: center;
  font-size: 0.8125rem;
  color: #718096;
  margin-top: 1.5rem;
}

/* About page stat list item */
.about-stat-item {
  padding: 0.75rem 0 0.75rem 1.5rem;
  border-bottom: 1px solid var(--color-border-light);
  position: relative;
  font-size: 0.9375rem;
}
.about-stat-icon {
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}

/* Privacy policy list */
.policy-list {
  padding-left: 1.5rem;
  line-height: 2;
}

/* Contact footnote */
.contact-footnote {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: 0.75rem;
  text-align: center;
}

/* Methodology transparent card */
.method-card-transparent {
  background: none;
  border: none;
  padding: 1.5rem 0 0;
}

/* Calc note inline */
.calc-note-block {
  margin-top: 0.75rem;
  margin-bottom: 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  max-width: none;
}

/* Federal tax bracket hidden wrap */
.bracket-wrap-hidden {
  display: none;
  margin-top: 1rem;
}

/* Calc section label */
.calc-label-small {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}

/* TOC list item border */
.toc-item {
  border-bottom: 1px solid var(--color-border-light);
  padding: 0.375rem 0;
}

/* TOC sidebar CTA */
.toc-cta {
  background: var(--color-accent-xlight);
  border: 1px solid var(--color-success-border);
  border-radius: var(--radius-lg);
  padding: 1.125rem;
  margin-bottom: 1.25rem;
  box-sizing: border-box;
  width: 100%;
}
.toc-cta-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-accent-dark);
  margin: 0 0 0.5rem;
}

/* Font mono small */
.font-mono-sm {
  font-family: var(--font-mono);
  font-size: 0.75rem;
}

/* Inline margin top CTA */
.cta-inline {
  margin-top: 2rem;
  display: inline-flex;
}

/* Margin none important */
.m-0 { margin: 0 !important; }
.mt-6 { margin-top: 1.5rem !important; }

/* Small font secondary */
.text-sm-secondary {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
  margin-bottom: 0;
}
.text-xs-muted {
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* max-width none override */
.mw-none { max-width: none !important; }

@media (max-width: 600px) {
  .hero-section { padding: 2rem 0; }
  .hero-section-alt { padding: 2rem 0; }
  .homepage-calc-grid { grid-template-columns: 1fr 1fr; }
  .toc-cta { padding: 0.875rem; }
}

.toc-source-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-sizing: border-box;
  width: 100%;
}

.calc-field-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.4rem;
  display: block;
}
.toc-section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin: 0 0 0.75rem;
}
/* ============================================================
   END OF GLOBAL.CSS
   Total tokens: Complete design system
   Zero Google Fonts — system fonts only
   Zero external dependencies
   ============================================================ */


/* ============================================================
   PAGE-SPECIFIC COMPONENT STYLES
   All styles extracted from per-page inline <style> blocks.
   Covers all 20 pages. Zero class/ID names changed.
   ============================================================ */

/* ── Shared calculator layout ── */
.calc-layout{display:grid;grid-template-columns:1fr 360px;gap:2.5rem;align-items:start;padding:2rem 0 3rem;width:100%}
.calc-sticky{position:sticky;top:calc(68px + 1.5rem)}
.calc-card{background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md)}
.calc-card-header{background:var(--color-primary);padding:1.25rem 1.5rem}
.calc-card-header h2{font-size:1rem;font-weight:700;color:#fff;margin:0}
.calc-card-header p{font-size:.8125rem;color:rgba(255,255,255,.7);margin:.25rem 0 0}
.calc-body{padding:1.5rem}
.calc-mode{display:flex;background:var(--color-surface);border-radius:var(--radius-md);padding:3px;gap:3px;margin-bottom:1.25rem}
.calc-mode-btn{flex:1;padding:.5rem;font-size:.8125rem;font-weight:500;font-family:inherit;border:none;border-radius:calc(var(--radius-md) - 2px);cursor:pointer;color:var(--color-text-secondary);background:transparent;transition:all 150ms ease;text-align:center}
.calc-mode-btn.active{background:#fff;color:var(--color-primary);box-shadow:0 1px 4px rgba(0,0,0,.10);font-weight:600}
.calc-field{margin-bottom:1rem}
.calc-field label{display:block;font-size:.8125rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:.4rem}
.calc-field label span{color:var(--color-error);margin-left:2px}
.input-wrap{position:relative}
.input-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-weight:600;color:var(--color-text-secondary);pointer-events:none;font-size:.9375rem}
.input-suffix{position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:.8125rem;color:var(--color-text-muted);pointer-events:none}
.calc-input{width:100%;height:48px;padding:0 12px 0 28px;font-size:1rem;font-family:inherit;color:var(--color-text-primary);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);transition:border-color 150ms ease,box-shadow 150ms ease;-webkit-appearance:none;appearance:none}
.calc-input.no-prefix{padding-left:12px}
.calc-input.no-suffix{padding-right:12px}
.calc-input:focus{outline:none;border-color:var(--color-accent);box-shadow:0 0 0 3px rgba(39,150,60,.15)}
.calc-select{width:100%;height:48px;padding:0 36px 0 12px;font-size:.9375rem;font-family:inherit;color:var(--color-text-primary);background:var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid var(--color-border);border-radius:var(--radius-md);-webkit-appearance:none;appearance:none;cursor:pointer;transition:border-color 150ms ease}
.calc-select:focus{outline:none;border-color:var(--color-accent)}
.calc-section-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);padding:.75rem 0 .5rem;border-top:1px solid var(--color-border);margin-top:.25rem}
.calc-results{margin-top:1.25rem;border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--color-success-border)}
.result-primary{background:var(--color-accent);padding:.875rem 1.125rem;display:flex;justify-content:space-between;align-items:center}
.result-primary .rl{font-size:.75rem;font-weight:600;color:rgba(255,255,255,.85);text-transform:uppercase;letter-spacing:.07em}
.result-primary .rv{font-size:1.625rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.result-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 1.125rem;border-bottom:1px solid rgba(39,150,60,.10);background:var(--color-success-bg)}
.result-row:last-child{border-bottom:none}
.result-row .rl{font-size:.875rem;color:var(--color-success)}
.result-row .rv{font-size:.9375rem;font-weight:600;color:var(--color-success);font-variant-numeric:tabular-nums}
.calc-disclaimer{font-size:.75rem;color:var(--color-text-muted);margin-top:.75rem;text-align:center;line-height:1.5}
.calc-btn{width:100%;height:50px;background:var(--color-primary);color:#fff;font-family:inherit;font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;letter-spacing:.02em;transition:background 150ms ease;margin-top:.25rem}
.calc-btn:hover{background:var(--color-primary-dark)}

/* ── Formula grid & boxes ── */
.formula-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0}
.content-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin:1.25rem 0}
.formula-box{background:var(--color-primary-light);border:1px solid var(--color-info-border);border-radius:var(--radius-lg);padding:1.25rem}
.formula-box h3{font-size:.875rem;font-weight:700;color:var(--color-primary);margin:0 0 .75rem;text-transform:uppercase;letter-spacing:.06em}
.formula-line{display:flex;align-items:flex-start;gap:.75rem;padding:.4rem 0;border-bottom:1px solid rgba(27,58,107,.08);font-size:.875rem;line-height:1.5}
.formula-line:last-child{border-bottom:none}
.fl{color:var(--color-text-secondary);flex-shrink:0;min-width:110px}
.fv{color:var(--color-primary);font-weight:600;font-family:var(--font-mono,monospace);word-break:break-word}

/* ── Wage cards ── */
.wage-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:.75rem;margin:1.25rem 0}
.wage-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;text-align:center;cursor:pointer;transition:border-color 150ms,box-shadow 150ms}
.wage-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}
.wage-card .wh{font-size:1.125rem;font-weight:800;color:var(--color-primary)}
.wage-card .wa{font-size:.8125rem;color:var(--color-accent);font-weight:600;margin:.2rem 0}
.wage-card .wl{font-size:.75rem;color:var(--color-text-muted)}

/* ── Mistake cards ── */
.mistake-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.25rem 0}
.mistake-card{border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem;background:var(--color-surface)}
.mistake-card.wrong{border-left:4px solid var(--color-error)}
.mistake-card.right{border-left:4px solid var(--color-accent)}
.mistake-label{display:inline-flex;align-items:center;gap:5px;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:.625rem}
.mistake-label.w{color:var(--color-error)}
.mistake-label.r{color:var(--color-accent)}
.mistake-card h4{font-size:.9375rem;font-weight:600;color:var(--color-text-primary);margin:0 0 .5rem}
.mistake-card p{font-size:.875rem;color:var(--color-text-secondary);margin:0;line-height:1.6;max-width:none}

/* ── Result row variants ── */
.result-row.deduction .rl{color:var(--color-error)}
.result-row.deduction .rv{color:var(--color-error)}
.result-row.divider{background:var(--color-surface);padding:.3rem 1.125rem}
.result-row.divider .rl{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted)}
.result-row.bold-row{background:var(--color-primary-xlight)}
.result-row.bold-row .rl{color:var(--color-primary);font-weight:600}
.result-row.bold-row .rv{color:var(--color-primary);font-weight:700;font-size:.9375rem}
.result-row.highlight-row{background:var(--color-warning-bg)}
.result-row.highlight-row .rl{color:var(--color-warning);font-weight:600}
.result-row.highlight-row .rv{color:var(--color-warning);font-weight:700}
.result-row.green-row{background:var(--color-success-bg)}
.result-row.green-row .rl{color:var(--color-success)}
.result-row.green-row .rv{color:var(--color-success)}
.result-row.warn .rl{color:var(--color-warning)}
.result-row.warn .rv{color:var(--color-warning)}
.result-row.quarterly{background:var(--color-warning-bg)}
.result-row.quarterly .rl{color:var(--color-warning);font-weight:600}
.result-row.quarterly .rv{color:var(--color-warning);font-weight:700}

/* Federal tax page specific */
.result-primary.tax-primary{background:var(--color-primary)}
.result-primary.tax-primary .rv{font-size:1.5rem}
.result-row.tax-row{background:var(--color-primary-xlight);border-bottom:1px solid rgba(27,58,107,.08)}
.result-row.tax-row .rl{font-size:.8125rem;color:var(--color-primary)}
.result-row.tax-row .rv{font-size:.875rem;font-weight:600;color:var(--color-primary)}
.bracket-breakdown{margin:1.25rem 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden}
.bracket-row{display:grid;grid-template-columns:80px 1fr 90px 90px;gap:0;border-bottom:1px solid var(--color-border-light);align-items:center}
.bracket-row:last-child{border-bottom:none}
.bracket-row.header{background:var(--color-primary);color:#fff;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.bracket-row.active{background:var(--color-accent-xlight)}
.bracket-cell{padding:.625rem .75rem;font-size:.8125rem;font-variant-numeric:tabular-nums}
.bracket-rate{font-weight:700;color:var(--color-primary)}
.bracket-row.active .bracket-rate{color:var(--color-accent-dark)}
.bracket-bar-cell{padding:.375rem .75rem}
.bracket-bar{height:8px;background:var(--color-border);border-radius:4px;overflow:hidden}
.bracket-bar-fill{height:100%;background:var(--color-accent);border-radius:4px;transition:width 300ms ease}
.hoh-note{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);border-radius:var(--radius-lg);padding:1rem 1.25rem;margin:1.25rem 0;font-size:.875rem;color:var(--color-text-secondary)}
.hoh-note strong{color:var(--color-warning);display:block;margin-bottom:.25rem}
.filing-compare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1.25rem 0}
.filing-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.125rem;text-align:center}
.filing-card h4{font-size:.875rem;font-weight:700;color:var(--color-primary);margin:0 0 .4rem}
.filing-card .std-ded{font-size:1.125rem;font-weight:800;color:var(--color-accent);margin:.25rem 0}
.filing-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.5}

/* Self-employment tax page */
.scorp-box{background:var(--color-accent-xlight);border:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0}
.scorp-box h3{color:var(--color-accent-dark);margin-top:0}
.scorp-savings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.scorp-card{background:var(--color-bg);border-radius:var(--radius-lg);padding:1rem;text-align:center;border:1px solid var(--color-success-border)}
.scorp-card .income{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted)}
.scorp-card .savings{font-size:1.25rem;font-weight:800;color:var(--color-accent-dark)}
.scorp-card .note{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}
.quarterly-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin:1.25rem 0}
.q-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;text-align:center}
.q-card .qdate{font-size:.75rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.07em}
.q-card .qperiod{font-size:.875rem;font-weight:600;color:var(--color-primary);margin:.25rem 0}
.q-card .qdead{font-size:.8125rem;color:var(--color-error);font-weight:600}

/* Salary-to-hourly page */
.rate-compare{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.25rem 0}
.rate-card{border-radius:var(--radius-lg);padding:1.25rem;border:2px solid var(--color-border)}
.rate-card.nominal{border-color:var(--color-info-border);background:var(--color-info-bg)}
.rate-card.effective{border-color:var(--color-warning-border);background:var(--color-warning-bg)}
.rate-card h4{font-size:.875rem;font-weight:700;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.06em}
.rate-card.nominal h4{color:var(--color-primary)}
.rate-card.effective h4{color:var(--color-warning)}
.rate-card .big-num{font-size:1.75rem;font-weight:800;font-variant-numeric:tabular-nums;margin:.25rem 0}
.rate-card.nominal .big-num{color:var(--color-primary)}
.rate-card.effective .big-num{color:var(--color-warning)}
.rate-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.5}
.contractor-box{background:var(--color-surface);border:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0}
.contractor-box h3{color:var(--color-accent-dark);margin-top:0}
.contractor-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}
.contractor-col{text-align:center;padding:1rem;background:var(--color-bg);border-radius:var(--radius-lg);border:1px solid var(--color-border)}
.contractor-col .label{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted);margin-bottom:.5rem}
.contractor-col .val{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-primary)}
.contractor-col .sub{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}
.result-row.highlight-row .rl{color:var(--color-warning);font-weight:600}
.result-row.highlight-row .rv{color:var(--color-warning);font-weight:700}

/* Pay raise page */
.raise-type-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.25rem 0}
.raise-type-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.125rem}
.raise-type-card h4{font-size:.875rem;font-weight:700;color:var(--color-primary);margin:0 0 .5rem}
.raise-type-card .pct{font-size:1.375rem;font-weight:800;color:var(--color-accent);margin:.25rem 0}
.raise-type-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.5}
.inflation-box{background:var(--color-warning-bg);border:2px solid var(--color-warning-border);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0}
.inflation-box h3{color:var(--color-warning);margin-top:0}
.inflation-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;margin-top:1rem}
.inflation-col{background:var(--color-bg);border-radius:var(--radius-lg);padding:1rem;text-align:center;border:1px solid var(--color-warning-border)}
.inflation-col .val{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums}
.inflation-col.lose .val{color:var(--color-error)}
.inflation-col.flat .val{color:var(--color-warning)}
.inflation-col.gain .val{color:var(--color-accent)}
.inflation-col .lbl{font-size:.75rem;color:var(--color-text-muted);margin-top:.25rem}

/* Take-home pay page */
.rate-visual{margin:1.5rem 0;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem}
.rate-bar-wrap{display:flex;gap:3px;height:32px;border-radius:var(--radius-md);overflow:hidden;margin:.75rem 0}
.rate-bar{height:100%;display:flex;align-items:center;justify-content:center;font-size:.6875rem;font-weight:700;color:#fff;min-width:2px;transition:flex 300ms ease}
.rate-bar.take-home{background:var(--color-accent)}
.rate-bar.federal{background:#1B3A6B}
.rate-bar.fica{background:#4A6FA5}
.rate-bar.state{background:#718096}
.rate-legend{display:flex;flex-wrap:wrap;gap:.5rem .75rem;font-size:.75rem}
.rate-legend-item{display:flex;align-items:center;gap:.375rem;color:var(--color-text-secondary)}
.rate-legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.state-compare-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.25rem 0}
.state-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem}
.state-card.best{border-color:var(--color-accent);background:var(--color-success-bg)}
.state-card h4{font-size:.875rem;font-weight:700;margin:0 0 .4rem}
.state-card.best h4{color:var(--color-accent-dark)}
.state-card .net{font-size:1.25rem;font-weight:800;font-variant-numeric:tabular-nums;color:var(--color-primary)}
.state-card.best .net{color:var(--color-accent-dark)}
.state-card .rate{font-size:.8125rem;color:var(--color-text-muted)}

/* Overtime page */
.obbba-box{background:var(--color-accent-xlight);border:2px solid var(--color-accent);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0}
.obbba-box h3{color:var(--color-accent-dark);margin-top:0;display:flex;align-items:center;gap:.5rem}
.new-badge{background:var(--color-accent);color:#fff;font-size:.6875rem;font-weight:700;padding:.2rem .5rem;border-radius:var(--radius-sm);text-transform:uppercase;letter-spacing:.08em}
.state-ot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.25rem 0}
.state-ot-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.125rem}
.state-ot-card h4{font-size:.875rem;font-weight:700;color:var(--color-primary);margin:0 0 .5rem}
.state-ot-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.6}
.state-ot-card.ca{border-color:var(--color-warning-border);background:var(--color-warning-bg)}
.state-ot-card.ca h4{color:var(--color-warning)}

/* Annual-to-monthly page */
.paycheck-months{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem;margin:1.25rem 0}
.paycheck-month-card{border-radius:var(--radius-lg);padding:1.25rem;border:1px solid var(--color-border);background:var(--color-surface)}
.paycheck-month-card.three{border-color:var(--color-accent);background:var(--color-accent-xlight)}
.paycheck-month-card h4{font-size:.9375rem;font-weight:700;margin:0 0 .5rem}
.paycheck-month-card.three h4{color:var(--color-accent-dark)}
.paycheck-month-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.5}
.budget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin:1.25rem 0}
.budget-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1rem;text-align:center}
.budget-card .pct{font-size:1.5rem;font-weight:800;color:var(--color-primary)}
.budget-card .label{font-size:.75rem;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.07em;margin:.25rem 0}
.budget-card .example{font-size:.8125rem;color:var(--color-text-muted)}

/* Guide layout (how-to pages) */
.guide-layout{display:grid;grid-template-columns:1fr 280px;gap:2.5rem;align-items:start;padding:2rem 0 3rem}
.guide-sidebar{position:sticky;top:calc(68px + 1.5rem)}
.toc-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem;margin-bottom:1.25rem}
.toc-card h3{font-size:.8125rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-muted);margin:0 0 .875rem}
.toc-list{list-style:none;padding:0;margin:0}
.toc-list li{margin-bottom:.375rem}
.toc-list a{font-size:.8125rem;color:var(--color-text-secondary);text-decoration:none;display:block;padding:.25rem 0;border-bottom:1px solid transparent;transition:color 150ms,border-color 150ms}
.toc-list a:hover{color:var(--color-primary);border-bottom-color:var(--color-accent)}
.formula-card{background:var(--color-primary);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0;color:#fff}
.formula-card h3{color:#fff;font-size:1rem;margin:0 0 1rem;font-weight:700}
.formula-display{background:rgba(255,255,255,0.12);border-radius:var(--radius-lg);padding:1rem 1.25rem;font-family:var(--font-mono);font-size:1.0625rem;font-weight:700;color:#fff;margin-bottom:.75rem;letter-spacing:.02em}
.formula-note{font-size:.8125rem;color:rgba(255,255,255,0.75);line-height:1.6}
.step-list{counter-reset:steps;list-style:none;padding:0;margin:1.25rem 0}
.step-list li{counter-increment:steps;display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--color-border-light)}
.step-list li:last-child{border-bottom:none}
.step-num{width:36px;height:36px;border-radius:50%;background:var(--color-primary);color:#fff;font-size:.875rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
.step-body h4{font-size:.9375rem;font-weight:600;color:var(--color-primary);margin:0 0 .4rem}
.step-body p{font-size:.875rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.6}
.calc-cta{background:var(--color-primary);border-radius:var(--radius-xl);padding:1.5rem;margin:1.25rem 0;text-align:center}
.calc-cta h3{color:#fff;margin:0 0 .5rem}
.calc-cta p{color:rgba(255,255,255,.75);font-size:.875rem;margin:0 0 1rem;max-width:none}
.calc-cta a{display:inline-block;background:var(--color-accent);color:#fff;padding:.75rem 1.5rem;border-radius:var(--radius-md);font-weight:600;text-decoration:none;font-size:.9375rem;transition:background 150ms}
.calc-cta a:hover{background:var(--color-accent-dark);color:#fff}

/* Author page */
.author-header{display:flex;gap:2rem;align-items:flex-start;padding:2rem 0 1.5rem;border-bottom:1px solid var(--color-border);margin-bottom:2rem}
.author-avatar{flex-shrink:0;width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid var(--color-primary-light)}
.author-avatar img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.author-meta{flex:1}
.author-meta h1{font-size:clamp(1.75rem,4vw,2.5rem);color:var(--color-primary);margin-bottom:.35rem}
.author-title{font-size:1rem;font-weight:500;color:var(--color-text-secondary);margin-bottom:.75rem;max-width:none}
.author-credentials{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}
.credential-badge{display:inline-block;background:var(--color-primary-light);color:var(--color-primary);border:1px solid var(--color-info-border);border-radius:var(--radius-full);padding:.2rem .75rem;font-size:.8125rem;font-weight:500}
.author-tagline{font-size:.9375rem;color:var(--color-text-secondary);line-height:var(--leading-relaxed);max-width:60ch;margin-bottom:0}
.sources-strip{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;background:var(--color-accent-xlight);border:1px solid var(--color-success-border);border-radius:var(--radius-md);padding:.6rem 1rem;margin-bottom:2rem;font-size:.8125rem}
.source-label{font-weight:600;color:var(--color-accent-dark);margin-right:.25rem}
.source-link{display:inline-block;background:var(--color-bg);color:var(--color-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:.15rem .6rem;font-size:.8rem;font-weight:500;text-decoration:none;transition:all var(--transition-fast)}
.source-link:hover{border-color:var(--color-accent);color:var(--color-accent-dark);background:var(--color-accent-xlight)}
.standards-list{list-style:none;padding:0;margin:0}
.standards-list li{padding:.75rem 0 .75rem 1.5rem;border-bottom:1px solid var(--color-border-light);line-height:var(--leading-relaxed);position:relative;font-size:.9375rem}
.standards-list li::before{content:"✓";position:absolute;left:0;color:var(--color-accent);font-weight:700}
.standards-list li:last-child{border-bottom:none}
.standards-list strong{color:var(--color-primary)}
.expertise-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-top:1rem}
.expertise-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:1.25rem;transition:box-shadow var(--transition-fast)}
.expertise-item:hover{box-shadow:var(--shadow-sm)}
.expertise-icon{width:44px;height:44px;background:var(--color-primary-light);border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;margin-bottom:.75rem;color:var(--color-primary)}
.expertise-item h3{font-size:.9375rem;margin-top:0;margin-bottom:.5rem;color:var(--color-primary)}
.expertise-item p{font-size:.875rem;color:var(--color-text-secondary);margin-bottom:0;max-width:none;line-height:var(--leading-normal)}

/* Contact page */
.form-notice{padding:14px 18px;border-radius:8px;margin-bottom:24px;font-size:.95rem;line-height:1.5}
.form-notice.success{background:#d4edda;border:1px solid #b8dac2;color:#1a5c35}
.form-notice.error{background:#fce4d6;border:1px solid #f5c6ae;color:#7b2d00}
.hp-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.contact-grid{display:grid;grid-template-columns:1fr 340px;gap:3rem;align-items:start}
.contact-info-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:1.75rem;position:sticky;top:calc(var(--header-height) + 1rem)}
.contact-info-card h3{font-size:var(--text-base);color:var(--color-primary);margin-top:0;margin-bottom:1rem;border-bottom:2px solid var(--color-border);padding-bottom:.5rem}
.contact-info-row{display:flex;align-items:flex-start;gap:.75rem;padding:.6rem 0;border-bottom:1px solid var(--color-border-light);font-size:var(--text-sm)}
.contact-info-row:last-child{border-bottom:none}
.contact-info-row svg{color:var(--color-accent);flex-shrink:0;margin-top:2px}
.contact-info-row strong{display:block;color:var(--color-text-primary);margin-bottom:2px}
.contact-info-row span{color:var(--color-text-secondary)}
.form-field{margin-bottom:1.25rem}
.form-field label{display:block;font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--color-text-secondary);margin-bottom:.5rem}
.form-field input,.form-field select,.form-field textarea{width:100%;padding:.75rem 1rem;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text-primary);background:var(--color-bg);border:2px solid var(--color-border);border-radius:var(--radius-md);transition:border-color var(--transition-fast),box-shadow var(--transition-fast)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--color-accent);box-shadow:var(--shadow-focus)}
.form-field textarea{min-height:160px;resize:vertical;line-height:var(--leading-relaxed)}
.form-field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center;padding-right:2.5rem;cursor:pointer}
.submit-btn{width:100%;height:52px;background:var(--color-primary);color:#fff;font-family:var(--font-body);font-size:var(--text-md);font-weight:var(--weight-semibold);border:none;border-radius:var(--radius-md);cursor:pointer;letter-spacing:.03em;transition:background var(--transition-fast)}
.submit-btn:hover{background:var(--color-primary-dark)}

/* Write-for-us page */
.wfu-hero{background:linear-gradient(135deg,#1B3A6B 0%,#0F2A52 100%);padding:3.5rem 0 3rem;position:relative;overflow:hidden}
.wfu-hero::before{content:"";position:absolute;top:-80px;right:-60px;width:380px;height:380px;border-radius:50%;background:rgba(39,150,60,0.07);pointer-events:none}
.wfu-hero-inner{max-width:860px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);position:relative;z-index:1}
.wfu-hero h1{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;color:#FFFFFF;margin-bottom:1rem;line-height:1.15;letter-spacing:-0.025em}
.wfu-hero h1 span{color:#4ADE80}
.wfu-hero p{font-size:1.0625rem;color:rgba(255,255,255,0.75);line-height:1.7;max-width:58ch;margin-bottom:1.5rem}
.wfu-badges{display:flex;flex-wrap:wrap;gap:.5rem}
.wfu-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:.3rem .875rem;font-size:.8125rem;color:rgba(255,255,255,0.85)}
.wfu-badge svg{color:#4ADE80;flex-shrink:0}
.wfu-stats{background:#27963C;padding:1rem 0}
.wfu-stats-inner{max-width:860px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:center}
.wfu-stat{text-align:center}
.wfu-stat .n{font-size:1.5rem;font-weight:800;color:#FFFFFF}
.wfu-stat .l{font-size:.75rem;color:rgba(255,255,255,0.75);margin-top:2px}
.wfu-layout{display:grid;grid-template-columns:1fr 300px;gap:2.5rem;align-items:start;padding:3rem 0}
.wfu-sidebar{position:sticky;top:calc(68px + 1.5rem)}
.wfu-cta-card{background:#1B3A6B;color:#fff;border-radius:16px;padding:1.75rem;margin-bottom:1.25rem}
.wfu-cta-card h3{font-size:1.0625rem;font-weight:700;color:#FFFFFF;margin-bottom:.75rem;margin-top:0}
.wfu-cta-card p{font-size:.875rem;color:rgba(255,255,255,0.75);margin-bottom:1.25rem;max-width:none;line-height:1.6}
.wfu-submit-btn{display:block;width:100%;padding:.875rem 1rem;background:#27963C;color:#FFFFFF;font-family:inherit;font-size:.9375rem;font-weight:600;border:none;border-radius:10px;cursor:pointer;text-decoration:none;text-align:center;transition:background 150ms ease;letter-spacing:.02em}
.wfu-submit-btn:hover{background:#1A6B2A;color:#FFFFFF}
.wfu-email-note{font-size:.75rem;color:rgba(255,255,255,0.55);text-align:center;margin-top:.625rem}
.wfu-info-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:14px;padding:1.25rem}
.wfu-info-card h4{font-size:.8125rem;font-weight:600;color:var(--color-primary);margin:0 0 .875rem;text-transform:uppercase;letter-spacing:.07em}
.wfu-info-row{display:flex;align-items:flex-start;gap:.625rem;padding:.5rem 0;border-bottom:1px solid var(--color-border-light);font-size:.8125rem;line-height:1.5}
.wfu-info-row:last-child{border-bottom:none}
.wfu-info-row svg{color:var(--color-accent);flex-shrink:0;margin-top:1px}
.wfu-info-row span{color:var(--color-text-secondary)}
.wfu-info-row strong{color:var(--color-text-primary);display:block;margin-bottom:1px}
.req-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.25rem 0}
.req-card{border:1px solid var(--color-border);border-radius:12px;padding:1.25rem}
.req-card.yes{border-color:var(--color-success-border);background:var(--color-success-bg)}
.req-card.no{border-color:var(--color-error-border);background:var(--color-error-bg)}
.req-card h4{font-size:.875rem;font-weight:700;margin:0 0 .75rem;display:flex;align-items:center;gap:.5rem}
.req-card.yes h4{color:var(--color-success)}
.req-card.no h4{color:var(--color-error)}
.req-card ul{list-style:none;padding:0;margin:0}
.req-card ul li{font-size:.8125rem;color:var(--color-text-secondary);padding:.3rem 0;border-bottom:1px solid rgba(0,0,0,0.06);line-height:1.5}
.req-card ul li:last-child{border-bottom:none}
.process-steps{margin:1.5rem 0}
.process-step{display:flex;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--color-border-light)}
.process-step:last-child{border-bottom:none}
.topics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:.75rem;margin:1.25rem 0}
.topic-chip{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:.625rem 1rem;font-size:.875rem;color:var(--color-primary);font-weight:500;display:flex;align-items:center;gap:.5rem}
.topic-chip svg{color:var(--color-accent);flex-shrink:0}
.benefits-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.25rem 0}
.benefit-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:12px;padding:1.25rem;text-align:center}
.benefit-icon{width:44px;height:44px;border-radius:10px;background:var(--color-primary-light);display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;color:var(--color-primary)}
.benefit-card h4{font-size:.875rem;font-weight:600;color:var(--color-primary);margin:0 0 .4rem}
.benefit-card p{font-size:.8125rem;color:var(--color-text-secondary);margin:0;max-width:none;line-height:1.5}

/* Homepage specific */
.hero{background:linear-gradient(135deg,#1B3A6B 0%,#0F2A52 100%);color:#fff;padding:3.5rem 0 3rem;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:-60px;right:-80px;width:420px;height:420px;border-radius:50%;background:rgba(39,150,60,0.07);pointer-events:none}
.hero::after{content:"";position:absolute;bottom:-100px;left:-60px;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.03);pointer-events:none}
.hero-inner{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:grid;grid-template-columns:1fr 440px;gap:3rem;align-items:start;position:relative;z-index:1}
.hero-text h1{font-size:clamp(1.75rem,3.5vw,2.75rem);font-weight:800;line-height:1.15;color:#fff;margin-bottom:1rem;letter-spacing:-0.025em}
.hero-text h1 span{color:#4ADE80}
.hero-text .hero-desc{font-size:1.0625rem;color:rgba(255,255,255,0.75);line-height:1.7;margin-bottom:1.5rem;max-width:52ch}
.hero-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.10);border:1px solid rgba(255,255,255,0.18);border-radius:20px;padding:.3rem .85rem;font-size:.8125rem;color:rgba(255,255,255,0.85)}
.hero-badge svg{color:#4ADE80;flex-shrink:0}
.quick-calc{background:#fff;border-radius:16px;padding:1.75rem;box-shadow:0 20px 60px rgba(0,0,0,0.25)}
.quick-calc-title{font-size:1rem;font-weight:700;color:#1B3A6B;margin-bottom:1.25rem;padding-bottom:.75rem;border-bottom:2px solid #E2E8F0}
.qc-tabs{display:flex;gap:4px;margin-bottom:1.25rem;background:#F8FAFC;border-radius:8px;padding:3px}
.qc-tab{flex:1;padding:.45rem .5rem;font-size:.8125rem;font-weight:500;font-family:inherit;border:none;border-radius:6px;cursor:pointer;color:#4A5568;background:transparent;transition:all 150ms ease;text-align:center}
.qc-tab.active{background:#fff;color:#1B3A6B;box-shadow:0 1px 4px rgba(0,0,0,0.10)}
.qc-field label{display:block;font-size:.8125rem;font-weight:500;color:#4A5568;margin-bottom:.4rem}
.qc-input-wrap{position:relative;margin-bottom:.875rem}
.qc-prefix{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-weight:600;color:#4A5568;pointer-events:none;font-size:1rem}
.qc-input{width:100%;height:46px;padding:0 12px 0 28px;font-size:1rem;font-family:inherit;color:#1A1A2E;background:#fff;border:2px solid #E2E8F0;border-radius:8px;transition:border-color 150ms ease,box-shadow 150ms ease;-webkit-appearance:none;appearance:none}
.qc-input:focus{outline:none;border-color:#27963C;box-shadow:0 0 0 3px rgba(39,150,60,0.18)}
.qc-select{width:100%;height:46px;padding:0 36px 0 12px;font-size:.9375rem;font-family:inherit;color:#1A1A2E;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A5568' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;border:2px solid #E2E8F0;border-radius:8px;-webkit-appearance:none;appearance:none;cursor:pointer;margin-bottom:.875rem}
.qc-select:focus{outline:none;border-color:#27963C}
.qc-btn{width:100%;height:48px;background:#1B3A6B;color:#fff;font-family:inherit;font-size:1rem;font-weight:600;border:none;border-radius:8px;cursor:pointer;letter-spacing:.02em;transition:background 150ms ease}
.qc-btn:hover{background:#0F2A52}
.qc-results{margin-top:1rem;background:#F0FDF4;border:1px solid #86EFAC;border-radius:10px;overflow:hidden;display:none}
.qc-results.visible{display:block}
.qc-result-primary{background:#27963C;padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center}
.qc-result-primary .rl{font-size:.75rem;color:rgba(255,255,255,0.80);text-transform:uppercase;letter-spacing:.07em}
.qc-result-primary .rv{font-size:1.5rem;font-weight:800;color:#fff;font-variant-numeric:tabular-nums}
.qc-result-row{display:flex;justify-content:space-between;padding:.45rem 1rem;border-bottom:1px solid rgba(39,150,60,.10);font-size:.875rem}
.qc-result-row:last-child{border-bottom:none}
.qc-result-row span{color:#1A6B2A}
.qc-result-row b{color:#1A6B2A;font-weight:600;font-variant-numeric:tabular-nums}
.qc-disclaimer{font-size:.75rem;color:#718096;margin-top:.5rem;text-align:center}
.cluster-section{padding:3.5rem 0;background:#F8FAFC;border-top:1px solid #E2E8F0;border-bottom:1px solid #E2E8F0}
.cluster-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.25rem;margin-top:1.75rem}
.cluster-card{background:#fff;border:1px solid #E2E8F0;border-radius:14px;padding:1.5rem;transition:box-shadow 200ms ease,transform 200ms ease,border-color 200ms ease}
.cluster-card:hover{box-shadow:0 8px 24px rgba(0,0,0,0.08);transform:translateY(-2px);border-color:#27963C}
.cluster-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}
.cluster-card h3{font-size:1rem;font-weight:700;color:#1B3A6B;margin:0 0 .5rem}
.cluster-card p{font-size:.875rem;color:#4A5568;line-height:1.6;margin:0 0 1rem}
.cluster-link{font-size:.875rem;font-weight:600;color:#27963C;text-decoration:none;display:inline-flex;align-items:center;gap:4px}
.cluster-link:hover{color:#1A6B2A}
.cluster-card ul{list-style:none;padding:0;margin:0 0 1rem}
.cluster-card ul li{font-size:.8125rem;color:#4A5568;padding:.25rem 0;border-bottom:1px solid #F1F5F9}
.cluster-card ul li:last-child{border-bottom:none}
.cluster-card ul li a{color:#1B3A6B;text-decoration:none;font-weight:500}
.cluster-card ul li a:hover{color:#27963C}
.stats-bar{background:#1B3A6B;padding:2rem 0}
.stats-inner{max-width:1200px;margin:0 auto;padding:0 clamp(1rem,4vw,2rem);display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem;text-align:center}
.stat-item .stat-num{font-size:1.875rem;font-weight:800;color:#4ADE80}
.stat-item .stat-label{font-size:.8125rem;color:rgba(255,255,255,0.65);margin-top:.25rem}
.how-section{padding:3.5rem 0}
.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.75rem}
.step-card{text-align:center;padding:1.5rem 1rem}
.step-num{width:44px;height:44px;border-radius:50%;background:#1B3A6B;color:#fff;font-size:1.125rem;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}
.step-card h3{font-size:.9375rem;font-weight:600;color:#1B3A6B;margin-bottom:.5rem}
.step-card p{font-size:.875rem;color:#4A5568;line-height:1.6;margin:0}
.faq-home{padding:3.5rem 0;background:#F8FAFC;border-top:1px solid #E2E8F0}
.facts-section{padding:3.5rem 0}

/* Calc trust note */
.calc-trust-note{margin-top:1rem}
.calc-trust-note-inner{display:flex;align-items:flex-start;gap:.5rem;padding:.875rem 1rem;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg)}
.calc-trust-icon{flex-shrink:0;margin-top:2px}
.calc-trust-text{font-size:.75rem;color:var(--color-text-muted);line-height:1.6}
.calc-trust-text a{color:var(--color-primary)}

/* Related calc cards */
.calc-grid-related{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.25rem 0}
.related-calc-card{display:flex;flex-direction:column;gap:.375rem;padding:1rem 1.125rem;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);text-decoration:none;transition:border-color 150ms ease,box-shadow 150ms ease,transform 150ms ease}
.related-calc-card:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.related-calc-card .card-label{font-size:.6875rem;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--color-text-muted)}
.related-calc-card .card-title{font-size:.9375rem;font-weight:600;color:var(--color-primary)}
.related-calc-card .card-desc{font-size:.8125rem;color:var(--color-text-secondary)}


/* ============================================================
   PAGE-LEVEL RESPONSIVE OVERRIDES
   These fire after all inline styles since they are in the
   external CSS file — and media queries cannot be overridden
   by inline <style> blocks.
   ============================================================ */

@media(max-width:900px){
  .calc-layout{grid-template-columns:1fr !important;gap:1.5rem !important;padding:1.5rem 0 2rem !important}
  .calc-sticky{position:static !important;top:auto !important}
  .guide-layout{grid-template-columns:1fr !important}
  .guide-sidebar{position:static !important}
  .wfu-layout{grid-template-columns:1fr !important}
  .wfu-sidebar{position:static !important;order:-1 !important}
  .hero-inner{grid-template-columns:1fr !important;gap:2rem !important}
  .quick-calc{margin-top:0 !important}
  .formula-grid{grid-template-columns:1fr !important;gap:1rem !important}
  .content-grid{grid-template-columns:1fr !important;gap:1rem !important}
  .rate-compare{grid-template-columns:1fr !important}
  .filing-compare-grid{grid-template-columns:1fr !important}
  .raise-type-grid{grid-template-columns:repeat(2,1fr) !important}
  .scorp-savings-grid{grid-template-columns:1fr !important}
  .contractor-grid{grid-template-columns:1fr !important}
  .quarterly-grid{grid-template-columns:repeat(2,1fr) !important}
  .state-compare-grid{grid-template-columns:repeat(2,1fr) !important}
  .state-ot-grid{grid-template-columns:1fr !important}
  .inflation-grid{grid-template-columns:repeat(3,1fr) !important}
  .mistake-grid{grid-template-columns:1fr !important}
  .wage-cards{grid-template-columns:repeat(2,1fr) !important;gap:.5rem !important}
  .benefits-grid{grid-template-columns:repeat(2,1fr) !important}
  .topics-grid{grid-template-columns:repeat(2,1fr) !important}
  .req-grid{grid-template-columns:1fr !important}
  .contact-grid{grid-template-columns:1fr !important}
  .contact-info-card{position:static !important;order:-1 !important}
  .author-header{flex-direction:column !important;align-items:center !important;text-align:center !important}
  .author-credentials{justify-content:center !important}
  .expertise-grid{grid-template-columns:repeat(2,1fr) !important}
}

@media(max-width:600px){
  .calc-layout{gap:1rem !important;padding:1rem 0 1.5rem !important}
  .calc-card{border-radius:var(--radius-lg) !important}
  .calc-body{padding:1rem !important}
  .hero{padding:2.5rem 0 2rem !important}
  .qc-tabs{flex-wrap:wrap !important}
  .raise-type-grid{grid-template-columns:1fr !important}
  .quarterly-grid{grid-template-columns:1fr !important}
  .state-compare-grid{grid-template-columns:1fr !important}
  .inflation-grid{grid-template-columns:1fr !important}
  .filing-compare-grid{grid-template-columns:1fr !important}
  .benefits-grid{grid-template-columns:1fr !important}
  .topics-grid{grid-template-columns:1fr !important}
  .req-grid{grid-template-columns:1fr !important}
  .contractor-grid{grid-template-columns:1fr !important}
  .expertise-grid{grid-template-columns:1fr !important}
  .wage-card{padding:.625rem .5rem !important}
  .wage-card .wh{font-size:.9375rem !important}
  .wage-card .wa{font-size:.75rem !important}
  .wage-card .wl{font-size:.6875rem !important}
  .worked-example{padding:1rem !important}
  .worked-example h3{font-size:.9375rem !important;word-break:break-word !important;white-space:normal !important}
  .worked-example .example-row{flex-direction:column !important;align-items:flex-start !important;gap:.2rem !important;padding:.5rem 0 !important}
  .example-label{font-size:.8125rem !important}
  .example-value{font-size:.875rem !important;word-break:break-word !important}
  .formula-box{padding:1rem !important}
  .formula-line{flex-direction:column !important;gap:.15rem !important;padding:.5rem 0 !important}
  .fl{min-width:unset !important;font-size:.75rem !important}
  .fv{font-size:.8125rem !important;word-break:break-word !important;font-family:inherit !important;font-weight:600 !important}
  .result-primary{flex-direction:column !important;align-items:flex-start !important;gap:.2rem !important}
  .result-primary .rv{font-size:1.25rem !important}
  .data-table-wrap{overflow-x:auto !important;-webkit-overflow-scrolling:touch !important;max-width:100% !important}
  h1{font-size:clamp(1.375rem,5vw,1.75rem) !important}
  h2{font-size:clamp(1.125rem,4vw,1.375rem) !important}
  .lead{font-size:.9375rem !important;max-width:100% !important}
  p{max-width:100% !important;word-break:break-word !important}
  .wfu-stats-inner{justify-content:center !important;gap:1.25rem !important}
  .calc-grid-related{grid-template-columns:1fr 1fr !important}
  .mistake-grid{grid-template-columns:1fr !important}
  .content-grid{grid-template-columns:1fr !important}
  .author-header{flex-direction:column !important;align-items:center !important;text-align:center !important}
}

@media(max-width:480px){
  .calc-layout{padding:.75rem 0 1.25rem !important}
  .result-primary .rv{font-size:1.125rem !important}
  .result-row .rv{font-size:.875rem !important}
  .calc-grid-related{grid-template-columns:1fr !important}
  .mistake-grid{grid-template-columns:1fr !important}
  .formula-box h3{font-size:.75rem !important}
  .wfu-hero{padding:2.5rem 0 2rem !important}
  .inflation-grid{grid-template-columns:1fr !important}
  .raise-type-grid{grid-template-columns:1fr !important}
}

@media(max-width:360px){
  .result-primary .rv{font-size:1rem !important}
  .calc-body{padding:.875rem !important}
  .calc-trust-note-inner{flex-direction:column !important}
}
* {
    max-width: 100%;
}

/* Mobile overflow fix */
.calc-layout > *,
.content-grid > *,
.formula-grid > *,
.hero-inner > * {
    min-width: 0;
}