/* ============================================================
   PermitPrice.com — main.css
   Design System: Burnt Orange (#D4782A) + Slate (#1E293B)
   Doctrine: Section 18 (locked March 31, 2026)
   All classes use pp- prefix. No page-level CSS.
   ============================================================ */

/* ============================================================
   1. DESIGN TOKENS (CSS CUSTOM PROPERTIES)
   ============================================================ */

:root {
  /* --- Primary: Burnt Orange --- */
  --pp-orange-50:  #FFF7ED;
  --pp-orange-100: #FDDFB0;
  --pp-orange-300: #F5B05C;
  --pp-orange-500: #D4782A;   /* brand primary, wordmark, accent borders */
  --pp-orange-600: #B85A18;   /* CTA buttons, fee totals, links */
  --pp-orange-800: #8B3E0F;   /* text on orange backgrounds */
  --pp-orange-900: #5C2706;   /* darkest orange text */

  /* --- Secondary: Slate --- */
  --pp-slate-50:  #F8FAFC;    /* page background (light mode) */
  --pp-slate-200: #E2E8F0;    /* borders, dividers */
  --pp-slate-400: #94A3B8;    /* muted text, nav items */
  --pp-slate-500: #64748B;    /* secondary text */
  --pp-slate-600: #475569;    /* body text (light mode) */
  --pp-slate-800: #1E293B;    /* header background, headings */
  --pp-slate-900: #0F172A;    /* darkest slate, dark mode bg */

  /* --- Semantic aliases (light mode defaults) --- */
  --pp-bg:              #F8FAFC;
  --pp-bg-alt:          #FFFFFF;
  --pp-surface:         #FFFFFF;
  --pp-surface-raised:  #FFFFFF;
  --pp-border:          #E2E8F0;
  --pp-text:            #1E293B;
  --pp-text-secondary:  #475569;
  --pp-text-muted:      #64748B;

  /* --- Primary aliases --- */
  --pp-primary:         #D4782A;
  --pp-primary-light:   #FFF7ED;
  --pp-primary-hover:   #F5B05C;
  --pp-primary-cta:     #B85A18;

  /* --- Typography --- */
  --pp-font-body:  'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --pp-font-mono:  'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --pp-text-xs:   0.75rem;    /* 12px */
  --pp-text-sm:   0.875rem;   /* 14px */
  --pp-text-base: 1rem;       /* 16px */
  --pp-text-lg:   1.125rem;   /* 18px */
  --pp-text-xl:   1.25rem;    /* 20px */
  --pp-text-2xl:  1.5rem;     /* 24px */
  --pp-text-3xl:  1.875rem;   /* 30px */
  --pp-text-4xl:  2.25rem;    /* 36px */

  --pp-font-normal: 400;
  --pp-font-medium: 500;
  --pp-font-semibold: 600;
  --pp-font-bold: 700;

  --pp-leading-tight:  1.25;
  --pp-leading-snug:   1.375;
  --pp-leading-normal: 1.5;
  --pp-leading-relaxed: 1.625;

  /* --- Spacing --- */
  --pp-space-1:  0.25rem;
  --pp-space-2:  0.5rem;
  --pp-space-3:  0.75rem;
  --pp-space-4:  1rem;
  --pp-space-5:  1.25rem;
  --pp-space-6:  1.5rem;
  --pp-space-8:  2rem;
  --pp-space-10: 2.5rem;
  --pp-space-12: 3rem;
  --pp-space-16: 4rem;
  --pp-space-20: 5rem;

  /* --- Border radius --- */
  --pp-radius-sm:  0.25rem;
  --pp-radius:     0.375rem;
  --pp-radius-md:  0.5rem;
  --pp-radius-lg:  0.75rem;
  --pp-radius-xl:  1rem;
  --pp-radius-full: 9999px;

  /* --- Shadows --- */
  --pp-shadow-sm:  0 1px 2px 0 rgb(0 0 0 / 0.05);
  --pp-shadow:     0 1px 3px 0 rgb(0 0 0 / 0.10), 0 1px 2px -1px rgb(0 0 0 / 0.10);
  --pp-shadow-md:  0 4px 6px -1px rgb(0 0 0 / 0.10), 0 2px 4px -2px rgb(0 0 0 / 0.10);
  --pp-shadow-lg:  0 10px 15px -3px rgb(0 0 0 / 0.10), 0 4px 6px -4px rgb(0 0 0 / 0.10);

  /* --- Layout --- */
  --pp-max-width:       1200px;
  --pp-content-width:   780px;
  --pp-sidebar-width:   300px;
  --pp-header-height:   64px;

  /* --- Transitions --- */
  --pp-transition:      150ms cubic-bezier(0.4, 0, 0.2, 1);
  --pp-transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Dark Mode Variable Swaps (doctrine Section 18) --- */
[data-theme="dark"] {
  --pp-bg:              #0F172A;
  --pp-bg-alt:          #1E293B;
  --pp-surface:         #1E293B;
  --pp-surface-raised:  #263348;
  --pp-border:          #334155;
  --pp-text:            #F1F5F9;
  --pp-text-secondary:  #94A3B8;
  --pp-text-muted:      #64748B;
  --pp-primary-light:   rgba(212, 120, 42, 0.15);
  --pp-shadow-sm:       0 1px 2px 0 rgb(0 0 0 / 0.3);
  --pp-shadow:          0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px -1px rgb(0 0 0 / 0.4);
  --pp-shadow-md:       0 4px 6px -1px rgb(0 0 0 / 0.4), 0 2px 4px -2px rgb(0 0 0 / 0.4);
  --pp-shadow-lg:       0 10px 15px -3px rgb(0 0 0 / 0.5), 0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-normal);
  line-height: var(--pp-leading-relaxed);
  color: var(--pp-text);
  background-color: var(--pp-bg);
  transition: background-color var(--pp-transition-slow), color var(--pp-transition-slow);
  min-height: 100vh;
}

img, svg, video {
  display: block;
  max-width: 100%;
}

a {
  color: var(--pp-primary-cta);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--pp-transition);
}

a:hover {
  color: var(--pp-orange-500);
}

:focus-visible {
  outline: 2px solid var(--pp-orange-500);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pp-font-body);
  font-weight: var(--pp-font-bold);
  line-height: var(--pp-leading-tight);
  color: var(--pp-text);
}

h1 { font-size: var(--pp-text-3xl); }
h2 { font-size: var(--pp-text-2xl); }
h3 { font-size: var(--pp-text-xl); }
h4 { font-size: var(--pp-text-lg); }

p { margin-bottom: var(--pp-space-4); }
p:last-child { margin-bottom: 0; }

ul, ol {
  padding-left: var(--pp-space-6);
  margin-bottom: var(--pp-space-4);
}

li { margin-bottom: var(--pp-space-1); }

strong { font-weight: var(--pp-font-semibold); }

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

/* ============================================================
   3. LAYOUT UTILITIES
   ============================================================ */

.pp-container {
  width: 100%;
  max-width: var(--pp-max-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--pp-space-6);
  padding-right: var(--pp-space-6);
}

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

.pp-grid-sidebar {
  display: grid;
  grid-template-columns: 1fr var(--pp-sidebar-width);
  gap: var(--pp-space-10);
  align-items: start;
}

.pp-section {
  padding-top: var(--pp-space-12);
  padding-bottom: var(--pp-space-12);
}

.pp-section--sm {
  padding-top: var(--pp-space-8);
  padding-bottom: var(--pp-space-8);
}

/* ============================================================
   4. HEADER
   ============================================================ */

.pp-header {
  background-color: var(--pp-slate-800);
  height: var(--pp-header-height);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

[data-theme="dark"] .pp-header {
  background-color: var(--pp-slate-900);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05);
}

.pp-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.pp-wordmark {
  display: flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  user-select: none;
}

.pp-wordmark__permit {
  font-family: var(--pp-font-body);
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-xl);
  color: var(--pp-orange-500);
  letter-spacing: -0.01em;
}

.pp-wordmark__price {
  font-family: var(--pp-font-body);
  font-weight: var(--pp-font-semibold);
  font-size: var(--pp-text-lg);
  color: #F1F5F9;
  letter-spacing: -0.01em;
}

.pp-nav {
  display: flex;
  align-items: center;
  gap: var(--pp-space-6);
}

.pp-nav__list {
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pp-nav__link {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-medium);
  color: var(--pp-slate-400);
  text-decoration: none;
  padding: var(--pp-space-2) var(--pp-space-3);
  border-radius: var(--pp-radius);
  transition: color var(--pp-transition), background-color var(--pp-transition);
}

.pp-nav__link:hover,
.pp-nav__link[aria-current="page"] {
  color: #F1F5F9;
  background-color: rgba(255, 255, 255, 0.08);
}

.pp-nav__link--cta {
  color: #FFFFFF;
  background-color: var(--pp-orange-600);
  padding: var(--pp-space-2) var(--pp-space-4);
  border-radius: var(--pp-radius);
  font-weight: var(--pp-font-semibold);
}

.pp-nav__link--cta:hover {
  background-color: var(--pp-orange-500);
  color: #FFFFFF;
}

/* Mobile nav toggle */
.pp-nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--pp-space-2);
  color: var(--pp-slate-400);
}

.pp-nav-toggle:hover { color: #F1F5F9; }

.pp-nav-toggle__bar {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  margin: 4px 0;
  transition: transform var(--pp-transition), opacity var(--pp-transition);
}

/* Mobile nav open state */
.pp-nav[data-open="true"] .pp-nav__list {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: var(--pp-header-height);
  left: 0;
  right: 0;
  background-color: var(--pp-slate-800);
  padding: var(--pp-space-4) var(--pp-space-6);
  gap: var(--pp-space-1);
  box-shadow: var(--pp-shadow-md);
}

/* ============================================================
   5. BREADCRUMB
   ============================================================ */

.pp-breadcrumb {
  background-color: var(--pp-bg);
  border-bottom: 1px solid var(--pp-border);
  padding: var(--pp-space-3) 0;
}

.pp-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
}

.pp-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
}

.pp-breadcrumb__item::before {
  content: '/';
  color: var(--pp-slate-400);
  margin-right: var(--pp-space-1);
}

.pp-breadcrumb__item:first-child::before {
  display: none;
}

.pp-breadcrumb__link {
  color: var(--pp-text-muted);
  text-decoration: none;
  transition: color var(--pp-transition);
}

.pp-breadcrumb__link:hover { color: var(--pp-primary-cta); }

.pp-breadcrumb__current {
  color: var(--pp-text-secondary);
  font-weight: var(--pp-font-medium);
}

/* ============================================================
   6. HERO
   ============================================================ */

.pp-hero {
  background-color: var(--pp-slate-800);
  color: #F1F5F9;
  padding: var(--pp-space-12) 0 var(--pp-space-10);
}

[data-theme="dark"] .pp-hero {
  background-color: var(--pp-slate-900);
}

.pp-hero__eyebrow {
  display: inline-block;
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-300);
  margin-bottom: var(--pp-space-3);
}

.pp-hero__title {
  font-size: clamp(var(--pp-text-2xl), 4vw, var(--pp-text-4xl));
  font-weight: var(--pp-font-bold);
  color: #F8FAFC;
  line-height: var(--pp-leading-tight);
  margin-bottom: var(--pp-space-4);
}

.pp-hero__title span {
  color: var(--pp-orange-500);
}

.pp-hero__subtitle {
  font-size: var(--pp-text-lg);
  color: var(--pp-slate-400);
  max-width: 680px;
  line-height: var(--pp-leading-relaxed);
  margin-bottom: var(--pp-space-6);
}

.pp-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pp-space-4);
  font-size: var(--pp-text-sm);
  color: var(--pp-slate-400);
}

.pp-hero__meta-item {
  display: flex;
  align-items: center;
  gap: var(--pp-space-2);
}

/* ============================================================
   7. DIRECT ANSWER BLOCK
   ============================================================ */

.pp-direct-answer {
  background-color: var(--pp-orange-50);
  border-left: 4px solid var(--pp-orange-500);
  border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
  padding: var(--pp-space-5) var(--pp-space-6);
  margin-bottom: var(--pp-space-8);
}

[data-theme="dark"] .pp-direct-answer {
  background-color: rgba(212, 120, 42, 0.12);
  border-left-color: var(--pp-orange-500);
}

.pp-direct-answer__label {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-800);
  margin-bottom: var(--pp-space-2);
}

[data-theme="dark"] .pp-direct-answer__label {
  color: var(--pp-orange-300);
}

.pp-direct-answer__text {
  font-size: var(--pp-text-lg);
  font-weight: var(--pp-font-medium);
  color: var(--pp-slate-800);
  line-height: var(--pp-leading-snug);
  margin: 0;
}

[data-theme="dark"] .pp-direct-answer__text {
  color: var(--pp-text);
}

.pp-direct-answer__number {
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-bold);
  color: var(--pp-orange-500);
}

/* ============================================================
   8. KEY TAKEAWAYS
   ============================================================ */

.pp-key-takeaways {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-6);
  margin-bottom: var(--pp-space-8);
  box-shadow: var(--pp-shadow-sm);
}

.pp-key-takeaways__title {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-4);
}

.pp-key-takeaways__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
}

.pp-key-takeaways__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-3);
  font-size: var(--pp-text-base);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-snug);
}

.pp-key-takeaways__item::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--pp-orange-500);
  margin-top: 0.45em;
}

/* ============================================================
   9. FACTS TABLE
   ============================================================ */

.pp-facts-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pp-text-sm);
  margin-bottom: var(--pp-space-8);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  box-shadow: var(--pp-shadow-sm);
  border: 1px solid var(--pp-border);
}

.pp-facts-table caption {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
  text-align: left;
  padding: var(--pp-space-3) var(--pp-space-4);
  background-color: var(--pp-bg);
  border-bottom: 1px solid var(--pp-border);
}

.pp-facts-table thead th {
  background-color: var(--pp-slate-800);
  color: #F1F5F9;
  font-weight: var(--pp-font-semibold);
  font-size: var(--pp-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: var(--pp-space-3) var(--pp-space-4);
  text-align: left;
}

[data-theme="dark"] .pp-facts-table thead th {
  background-color: var(--pp-surface-raised);
}

.pp-facts-table tbody tr {
  background-color: var(--pp-surface);
  border-bottom: 1px solid var(--pp-border);
  transition: background-color var(--pp-transition);
}

.pp-facts-table tbody tr:last-child {
  border-bottom: none;
}

.pp-facts-table tbody tr:hover {
  background-color: var(--pp-bg);
}

.pp-facts-table td {
  padding: var(--pp-space-3) var(--pp-space-4);
  color: var(--pp-text-secondary);
  vertical-align: top;
}

.pp-facts-table td:first-child {
  font-weight: var(--pp-font-medium);
  color: var(--pp-text);
  white-space: nowrap;
}

.pp-facts-table .pp-num {
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
}

.pp-facts-table tfoot td {
  background-color: var(--pp-orange-50);
  font-weight: var(--pp-font-bold);
  border-top: 2px solid var(--pp-orange-500);
  color: var(--pp-slate-800);
  padding: var(--pp-space-3) var(--pp-space-4);
}

[data-theme="dark"] .pp-facts-table tfoot td {
  background-color: rgba(212, 120, 42, 0.12);
  color: var(--pp-text);
}

/* ============================================================
   10. CALCULATOR
   ============================================================ */

.pp-calculator {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  padding: var(--pp-space-8);
  margin-bottom: var(--pp-space-8);
  box-shadow: var(--pp-shadow-md);
}

.pp-calculator__header {
  margin-bottom: var(--pp-space-6);
  padding-bottom: var(--pp-space-5);
  border-bottom: 1px solid var(--pp-border);
}

.pp-calculator__title {
  font-size: var(--pp-text-xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-1);
}

.pp-calculator__subtitle {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
}

.pp-calculator__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-5);
}

/* Calculator input group */
.pp-calc-group {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

.pp-calc-label {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text-secondary);
}

.pp-calc-input {
  width: 100%;
  padding: var(--pp-space-3) var(--pp-space-4);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  color: var(--pp-text);
  background-color: var(--pp-bg);
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  outline: none;
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
  -webkit-appearance: none;
  appearance: none;
}

.pp-calc-input:focus {
  border-color: var(--pp-orange-500);
  box-shadow: 0 0 0 3px rgba(212, 120, 42, 0.15);
}

.pp-calc-input::placeholder {
  color: var(--pp-text-muted);
}

.pp-calc-input--prefix-wrap {
  position: relative;
}

.pp-calc-input--prefix-wrap::before {
  content: '$';
  position: absolute;
  left: var(--pp-space-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--pp-text-muted);
  font-weight: var(--pp-font-medium);
  pointer-events: none;
}

.pp-calc-input--prefix-wrap .pp-calc-input {
  padding-left: var(--pp-space-8);
}

.pp-calc-select {
  width: 100%;
  padding: var(--pp-space-3) var(--pp-space-4);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  color: var(--pp-text);
  background-color: var(--pp-bg);
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748B' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--pp-space-3) center;
  background-size: 20px;
  padding-right: var(--pp-space-10);
}

.pp-calc-select:focus {
  border-color: var(--pp-orange-500);
  box-shadow: 0 0 0 3px rgba(212, 120, 42, 0.15);
}

[data-theme="dark"] .pp-calc-input,
[data-theme="dark"] .pp-calc-select {
  background-color: var(--pp-surface-raised);
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--pp-text);
}

[data-theme="dark"] .pp-calc-select option {
  background-color: var(--pp-surface-raised);
  color: var(--pp-text);
}

/* Calculator button */
.pp-calc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--pp-space-2);
  width: 100%;
  padding: var(--pp-space-4) var(--pp-space-6);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-semibold);
  color: #FFFFFF;
  background-color: var(--pp-orange-600);
  border: none;
  border-radius: var(--pp-radius-md);
  cursor: pointer;
  transition: background-color var(--pp-transition), transform var(--pp-transition);
  letter-spacing: 0.01em;
  margin-top: var(--pp-space-2);
}

.pp-calc-btn:hover {
  background-color: var(--pp-orange-500);
}

.pp-calc-btn:active {
  transform: translateY(1px);
}

.pp-calc-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Calculator result */
.pp-calc-result {
  background-color: var(--pp-orange-50);
  border: 1px solid rgba(212, 120, 42, 0.3);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-6);
  margin-top: var(--pp-space-6);
  display: none;
}

.pp-calc-result[data-visible="true"] {
  display: block;
}

[data-theme="dark"] .pp-calc-result {
  background-color: rgba(212, 120, 42, 0.10);
  border-color: rgba(212, 120, 42, 0.25);
}

.pp-calc-result__label {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-800);
  margin-bottom: var(--pp-space-3);
}

[data-theme="dark"] .pp-calc-result__label {
  color: var(--pp-orange-300);
}

.pp-calc-result__total {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-4xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-orange-500);
  line-height: 1;
  margin-bottom: var(--pp-space-4);
}

.pp-calc-result__breakdown {
  list-style: none;
  padding: 0;
  margin: var(--pp-space-4) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  border-top: 1px solid rgba(212, 120, 42, 0.2);
  padding-top: var(--pp-space-4);
}

.pp-calc-result__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
}

.pp-calc-result__row-label { font-weight: var(--pp-font-medium); }

.pp-calc-result__row-value {
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-slate-800);
}

[data-theme="dark"] .pp-calc-result__row-value {
  color: var(--pp-text);
}

.pp-calc-result__row--total {
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-base);
  color: var(--pp-text);
  border-top: 1px solid var(--pp-border);
  padding-top: var(--pp-space-2);
  margin-top: var(--pp-space-1);
}

.pp-calc-result__row--total .pp-calc-result__row-value {
  color: var(--pp-orange-500);
  font-size: var(--pp-text-lg);
}

/* Calculator disclaimer */
.pp-calc-disclaimer {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-relaxed);
  margin-top: var(--pp-space-4);
  padding-top: var(--pp-space-4);
  border-top: 1px solid var(--pp-border);
}

/* ============================================================
   10b. INLINE JURISDICTION ESTIMATOR
   Compact estimator dropped into jurisdiction pages directly
   after the fee formula table. Reuses .pp-calc-* form/result
   classes inside; this wrapper just gives a tighter card.
   ============================================================ */

.pp-inline-estimator {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  padding: var(--pp-space-6);
  margin: var(--pp-space-6) 0;
  box-shadow: var(--pp-shadow-sm);
}

.pp-inline-estimator__header {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
  margin-bottom: var(--pp-space-5);
  padding-bottom: var(--pp-space-4);
  border-bottom: 1px solid var(--pp-border);
}

.pp-inline-estimator__eyebrow {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-500);
}

.pp-inline-estimator__title {
  font-size: var(--pp-text-lg);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  line-height: var(--pp-leading-tight);
}

.pp-inline-estimator__subtitle {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-relaxed);
}

.pp-inline-estimator__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-4);
}

.pp-inline-estimator__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  margin-top: var(--pp-space-4);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
  text-decoration: none;
  align-self: flex-start;
}

.pp-inline-estimator__cta:hover {
  color: var(--pp-orange-600);
  text-decoration: underline;
}

[data-theme="dark"] .pp-inline-estimator__cta {
  color: var(--pp-orange-300);
}

[data-theme="dark"] .pp-inline-estimator__cta:hover {
  color: var(--pp-orange-200);
}

.pp-inline-estimator [data-pp-ie-hide="true"] {
  display: none;
}

/* ============================================================
   11. CARDS
   ============================================================ */

.pp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pp-space-5);
  margin-bottom: var(--pp-space-8);
}

.pp-card {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-5) var(--pp-space-6);
  box-shadow: var(--pp-shadow-sm);
  transition: box-shadow var(--pp-transition), transform var(--pp-transition);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.pp-card:hover {
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.pp-card__label {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-orange-500);
  margin-bottom: var(--pp-space-2);
}

.pp-card__title {
  font-size: var(--pp-text-lg);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-2);
  line-height: var(--pp-leading-snug);
}

.pp-card__description {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-relaxed);
  margin: 0;
}

.pp-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-1);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--pp-space-4);
}

/* County card variant */
.pp-county-card {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-5);
  box-shadow: var(--pp-shadow-sm);
  transition: box-shadow var(--pp-transition), border-color var(--pp-transition);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
}

.pp-county-card:hover {
  box-shadow: var(--pp-shadow-md);
  border-color: var(--pp-orange-300);
}

.pp-county-card__name {
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
}

.pp-county-card__pop {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  font-weight: var(--pp-font-medium);
}

.pp-county-card__fee-range {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
}

.pp-county-card__method {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  padding: var(--pp-space-1) var(--pp-space-2);
  background-color: var(--pp-bg);
  border-radius: var(--pp-radius-sm);
  display: inline-block;
}

.pp-county-card__link {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--pp-space-1);
}

.pp-county-card__link:hover { color: var(--pp-orange-500); }

/* ============================================================
   12. INSIGHT / PRACTITIONER CALLOUT
   ============================================================ */

.pp-insight {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-left: 3px solid var(--pp-orange-500);
  border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
  padding: var(--pp-space-5) var(--pp-space-6);
  margin: var(--pp-space-6) 0;
}

.pp-insight__label {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-500);
  margin-bottom: var(--pp-space-2);
}

.pp-insight__text {
  font-size: var(--pp-text-base);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-relaxed);
  font-style: italic;
  margin: 0;
}

/* ============================================================
   13. FAQ
   ============================================================ */

.pp-faq {
  margin-bottom: var(--pp-space-8);
}

.pp-faq__title {
  font-size: var(--pp-text-2xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-6);
}

.pp-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
}

.pp-faq__item {
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-md);
  overflow: hidden;
  background-color: var(--pp-surface);
}

.pp-faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pp-space-4);
  padding: var(--pp-space-4) var(--pp-space-5);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text);
  transition: background-color var(--pp-transition);
}

.pp-faq__question:hover {
  background-color: var(--pp-bg);
}

.pp-faq__question[aria-expanded="true"] {
  color: var(--pp-orange-500);
}

.pp-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--pp-text-muted);
  transition: transform var(--pp-transition);
}

.pp-faq__question[aria-expanded="true"] .pp-faq__icon {
  transform: rotate(180deg);
  color: var(--pp-orange-500);
}

.pp-faq__answer {
  display: none;
  padding: 0 var(--pp-space-5) var(--pp-space-4);
  font-size: var(--pp-text-base);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-relaxed);
}

.pp-faq__answer[data-open="true"] {
  display: block;
}

/* ============================================================
   14. SOURCES
   ============================================================ */

.pp-sources {
  background-color: var(--pp-orange-50);
  border: 1px solid rgba(212, 120, 42, 0.2);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-5) var(--pp-space-6);
  margin-bottom: var(--pp-space-6);
}

[data-theme="dark"] .pp-sources {
  background-color: rgba(212, 120, 42, 0.07);
  border-color: rgba(212, 120, 42, 0.2);
}

.pp-sources__title {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-800);
  margin-bottom: var(--pp-space-3);
}

[data-theme="dark"] .pp-sources__title {
  color: var(--pp-orange-300);
}

.pp-sources__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

.pp-sources__item {
  display: flex;
  align-items: flex-start;
  gap: var(--pp-space-2);
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-snug);
}

.pp-sources__item::before {
  content: '↗';
  flex-shrink: 0;
  color: var(--pp-orange-500);
  font-weight: bold;
  margin-top: 0.1em;
}

.pp-sources__link {
  color: var(--pp-orange-500);
  font-weight: var(--pp-font-medium);
}

.pp-sources__date {
  color: var(--pp-text-muted);
  font-size: var(--pp-text-xs);
  display: block;
  margin-top: var(--pp-space-1);
}

/* ============================================================
   15. AUTHOR BOX
   ============================================================ */

.pp-author-box {
  border-top: 1px solid var(--pp-border);
  padding-top: var(--pp-space-6);
  margin-top: var(--pp-space-8);
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
}

.pp-author-box p {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
  margin: 0;
}

.pp-author-box a {
  color: var(--pp-text-secondary);
  font-weight: var(--pp-font-medium);
}

/* ============================================================
   16. DISCLAIMER BLOCK
   ============================================================ */

.pp-disclaimer {
  background-color: var(--pp-orange-50);
  border: 1px solid rgba(212,120,42,0.20);
  border-left: 4px solid var(--pp-orange-500);
  border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
  padding: var(--pp-space-4) var(--pp-space-5);
  margin-bottom: var(--pp-space-6);
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-relaxed);
}

[data-theme="dark"] .pp-disclaimer {
  background-color: rgba(212,120,42,0.10);
  border-color: rgba(212,120,42,0.30);
  border-left-color: var(--pp-orange-500);
}

.pp-disclaimer strong {
  color: var(--pp-orange-800);
  font-weight: var(--pp-font-semibold);
}

[data-theme="dark"] .pp-disclaimer strong {
  color: var(--pp-orange-300);
}

/* Verify block (required on every page) */
.pp-verify-block {
  background-color: var(--pp-orange-50);
  border: 1px solid rgba(212,120,42,0.20);
  border-left: 4px solid var(--pp-orange-500);
  border-radius: 0 var(--pp-radius-md) var(--pp-radius-md) 0;
  padding: var(--pp-space-4) var(--pp-space-5);
  margin-bottom: var(--pp-space-6);
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
}

[data-theme="dark"] .pp-verify-block {
  background-color: rgba(212,120,42,0.12);
  border-color: rgba(212,120,42,0.30);
  border-left-color: var(--pp-orange-500);
}

.pp-verify-block strong {
  display: block;
  color: var(--pp-orange-800);
  font-weight: var(--pp-font-semibold);
  margin-bottom: var(--pp-space-1);
}

[data-theme="dark"] .pp-verify-block strong {
  color: var(--pp-orange-300);
}

/* ============================================================
   17. BADGES
   ============================================================ */

.pp-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-1);
  padding: var(--pp-space-1) var(--pp-space-2);
  border-radius: var(--pp-radius-full);
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* Verified badge */
.pp-verified-badge {
  background-color: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

[data-theme="dark"] .pp-verified-badge {
  background-color: rgba(22, 101, 52, 0.2);
  color: #86EFAC;
  border-color: rgba(134, 239, 172, 0.2);
}

.pp-verified-badge::before {
  content: '✓';
  font-weight: var(--pp-font-bold);
}

/* Confidence badge — color by freshness */
.pp-confidence-badge {
  background-color: #DCFCE7;
  color: #166534;
  border: 1px solid #BBF7D0;
}

.pp-confidence-badge--yellow {
  background-color: #FEF9C3;
  color: #854D0E;
  border-color: #FDE68A;
}

.pp-confidence-badge--red {
  background-color: #FEE2E2;
  color: #991B1B;
  border-color: #FECACA;
}

[data-theme="dark"] .pp-confidence-badge {
  background-color: rgba(22, 101, 52, 0.2);
  color: #86EFAC;
  border-color: rgba(134, 239, 172, 0.2);
}

[data-theme="dark"] .pp-confidence-badge--yellow {
  background-color: rgba(133, 77, 14, 0.2);
  color: #FDE68A;
  border-color: rgba(253, 230, 138, 0.2);
}

[data-theme="dark"] .pp-confidence-badge--red {
  background-color: rgba(153, 27, 27, 0.2);
  color: #FCA5A5;
  border-color: rgba(252, 165, 165, 0.2);
}

/* ============================================================
   18. FOOTER
   ============================================================ */

.pp-footer {
  background-color: var(--pp-slate-800);
  color: var(--pp-slate-400);
  padding: var(--pp-space-8) 0 var(--pp-space-5);
  margin-top: var(--pp-space-12);
}

[data-theme="dark"] .pp-footer {
  background-color: var(--pp-slate-900);
}

.pp-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--pp-space-8);
  margin-bottom: var(--pp-space-6);
}

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

.pp-footer__tagline {
  font-size: var(--pp-text-xs);
  color: var(--pp-slate-500);
  line-height: 1.55;
  max-width: 260px;
  margin: 0;
}

.pp-footer__col-title {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-text);
  margin-bottom: var(--pp-space-3);
}

.pp-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
}

.pp-footer__link {
  font-size: var(--pp-text-sm);
  line-height: 1.7;
  color: var(--pp-text-muted);
  text-decoration: none;
  transition: color var(--pp-transition);
}

.pp-footer__link:hover { color: var(--pp-orange-500); }

.pp-footer__bottom {
  border-top: 1px solid var(--pp-border);
  padding-top: var(--pp-space-4);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--pp-space-3);
}

.pp-footer__legal {
  font-size: var(--pp-text-xs);
  color: var(--pp-slate-500);
  max-width: 680px;
  line-height: var(--pp-leading-relaxed);
}

.pp-footer__copyright {
  font-size: var(--pp-text-xs);
  color: var(--pp-slate-500);
  white-space: nowrap;
}

/* ============================================================
   19. THEME TOGGLE BUTTON
   ============================================================ */

.pp-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: none;
  border: 1.5px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--pp-radius-full);
  cursor: pointer;
  color: var(--pp-slate-400);
  transition: color var(--pp-transition), border-color var(--pp-transition), background-color var(--pp-transition);
  flex-shrink: 0;
}

.pp-theme-toggle:hover {
  color: #F1F5F9;
  border-color: rgba(255, 255, 255, 0.3);
  background-color: rgba(255, 255, 255, 0.06);
}

.pp-theme-toggle__icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pp-theme-toggle__sun { display: block; }
.pp-theme-toggle__moon { display: none; }

[data-theme="dark"] .pp-theme-toggle__sun { display: none; }
[data-theme="dark"] .pp-theme-toggle__moon { display: block; }

/* ============================================================
   20. UTILITY CLASSES
   ============================================================ */

.pp-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;
}

.pp-num {
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-semibold);
}

.pp-text-orange { color: var(--pp-orange-500); }
.pp-text-muted  { color: var(--pp-text-muted); }
.pp-text-sm     { font-size: var(--pp-text-sm); }

.pp-mt-4  { margin-top: var(--pp-space-4); }
.pp-mb-4  { margin-bottom: var(--pp-space-4); }
.pp-mb-6  { margin-bottom: var(--pp-space-6); }
.pp-mb-8  { margin-bottom: var(--pp-space-8); }

/* Skip link */
.pp-skip-link {
  position: absolute;
  top: -100%;
  left: var(--pp-space-4);
  background-color: var(--pp-orange-600);
  color: #FFFFFF;
  padding: var(--pp-space-2) var(--pp-space-4);
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  text-decoration: none;
  z-index: 9999;
  transition: top var(--pp-transition);
}

.pp-skip-link:focus { top: 0; }

/* ============================================================
   21. SECTION HEADINGS
   ============================================================ */

.pp-section-title {
  font-size: var(--pp-text-2xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-2);
}

.pp-section-subtitle {
  font-size: var(--pp-text-base);
  color: var(--pp-text-secondary);
  margin-bottom: var(--pp-space-6);
}

.pp-section-divider {
  border: none;
  border-top: 1px solid var(--pp-border);
  margin: var(--pp-space-10) 0;
}

/* ============================================================
   22. RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .pp-grid-sidebar {
    grid-template-columns: 1fr;
  }

  .pp-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--pp-space-6);
  }
}

@media (max-width: 768px) {
  :root {
    --pp-header-height: 56px;
  }

  .pp-container {
    padding-left: var(--pp-space-4);
    padding-right: var(--pp-space-4);
  }

  .pp-section {
    padding-top: var(--pp-space-8);
    padding-bottom: var(--pp-space-8);
  }

  .pp-nav__list {
    display: none;
  }

  .pp-nav-toggle {
    display: block;
  }

  .pp-hero {
    padding: var(--pp-space-8) 0 var(--pp-space-6);
  }

  .pp-calculator {
    padding: var(--pp-space-5);
  }

  .pp-card-grid {
    grid-template-columns: 1fr;
  }

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

  .pp-footer__brand {
    grid-column: 1 / -1;
  }

  .pp-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
  }

  .pp-facts-table {
    font-size: var(--pp-text-xs);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 480px) {
  h1 { font-size: var(--pp-text-2xl); }
  h2 { font-size: var(--pp-text-xl); }

  .pp-calc-result__total {
    font-size: var(--pp-text-3xl);
  }

  .pp-direct-answer {
    padding: var(--pp-space-4);
  }
}

/* ============================================================
   23. PRINT
   ============================================================ */

@media print {
  .pp-header,
  .pp-footer,
  .pp-theme-toggle,
  .pp-calc-btn,
  .pp-nav-toggle {
    display: none !important;
  }

  body {
    font-size: 12pt;
    color: #000;
    background: #fff;
  }

  .pp-calculator,
  .pp-card,
  .pp-direct-answer,
  .pp-key-takeaways {
    box-shadow: none;
    border: 1px solid #ccc;
  }

  a::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
    color: #666;
  }

  a[href^="/"]:after {
    content: " (permitprice.com" attr(href) ")";
  }
}

/* ============================================================
   24. HEADER — RIGHT GROUP, SEARCH, CTA
   ============================================================ */

.pp-header__right {
  display: flex;
  align-items: center;
  gap: var(--pp-space-3);
}

/* Slim search input inside header */
.pp-header__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pp-header__search-wrap::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}

.pp-header__search {
  height: 34px;
  width: 200px;
  padding: 0 var(--pp-space-3) 0 30px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: var(--pp-radius-full);
  color: #F1F5F9;
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  outline: none;
  transition: border-color var(--pp-transition), background var(--pp-transition), width var(--pp-transition-slow);
}

.pp-header__search::placeholder { color: var(--pp-slate-500); }

.pp-header__search:focus {
  border-color: rgba(212, 120, 42, 0.45);
  background: rgba(255, 255, 255, 0.10);
  width: 240px;
}

/* Orange CTA button in header */
.pp-header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--pp-space-4);
  background-color: var(--pp-orange-600);
  color: #FFFFFF;
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  border-radius: var(--pp-radius);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--pp-transition);
  letter-spacing: 0.01em;
}

.pp-header__cta:hover {
  background-color: var(--pp-orange-500);
  color: #FFFFFF;
}

/* ============================================================
   25. HERO — SPLIT LAYOUT + STAT PILLS
   ============================================================ */

/* Override base .pp-hero for the split variant */
.pp-hero--split {
  background: linear-gradient(135deg, #0F172A 0%, #1a1208 100%);
  padding: 0;        /* padding lives in the grid */
  overflow: hidden;
}

.pp-hero--split .pp-container {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--pp-space-10);
  align-items: center;
  padding-top: var(--pp-space-16);
  padding-bottom: var(--pp-space-16);
}

.pp-hero__col {
  display: flex;
  flex-direction: column;
}

.pp-hero__col--left {
  gap: var(--pp-space-5);
}

.pp-hero__col--right {
  gap: 0;
}

/* Stat pills row */
.pp-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-2);
  margin-top: var(--pp-space-2);
}

.pp-hero__stat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: rgba(212, 120, 42, 0.12);
  border: 1px solid rgba(212, 120, 42, 0.28);
  border-radius: var(--pp-radius-full);
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  color: #F5B05C;     /* orange-300 */
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.pp-hero__stat-pill::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pp-orange-500);
  flex-shrink: 0;
}

/* ============================================================
   26. HERO CALCULATOR CARD
   Always dark — hardcoded dark colors, theme-independent.
   ============================================================ */

.pp-hero-calc {
  background: #1E293B;          /* slate-800 */
  border: 1px solid #475569;    /* slate-600 */
  border-radius: var(--pp-radius-xl);
  padding: var(--pp-space-6);
  box-shadow:
    0 0 0 1px rgba(212, 120, 42, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 8px 16px rgba(0, 0, 0, 0.3);
  position: relative;
}

/* Subtle top accent line */
.pp-hero-calc::before {
  content: '';
  position: absolute;
  top: 0;
  left: var(--pp-space-6);
  right: var(--pp-space-6);
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pp-orange-500), transparent);
  border-radius: 0 0 var(--pp-radius) var(--pp-radius);
}

.pp-hero-calc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--pp-space-5);
  padding-bottom: var(--pp-space-4);
  border-bottom: 1px solid #334155;  /* slate-700 */
}

.pp-hero-calc__title {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-bold);
  color: #F1F5F9;
  letter-spacing: 0.01em;
}

.pp-hero-calc__live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--pp-radius-full);
  font-size: 10px;
  font-weight: var(--pp-font-semibold);
  color: #86EFAC;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.pp-hero-calc__live-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22C55E;
  animation: pp-pulse 2s infinite;
  flex-shrink: 0;
}

@keyframes pp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.pp-hero-calc__body {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
}

/* Form groups inside hero calc */
.pp-hero-calc__group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.pp-hero-calc__label {
  font-size: 11px;
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #64748B;    /* slate-500 */
}

/* Dark inputs — always dark regardless of page theme */
.pp-hero-calc__select,
.pp-hero-calc__input {
  width: 100%;
  padding: 9px var(--pp-space-3);
  background: #0F172A;       /* slate-900 */
  border: 1px solid #334155; /* slate-700 */
  border-radius: var(--pp-radius-md);
  color: #F1F5F9;
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  outline: none;
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition);
  -webkit-appearance: none;
  appearance: none;
}

.pp-hero-calc__select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%2364748B' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 18px;
  padding-right: 32px;
  cursor: pointer;
}

.pp-hero-calc__select:focus,
.pp-hero-calc__input:focus {
  border-color: var(--pp-orange-500);
  box-shadow: 0 0 0 3px rgba(212, 120, 42, 0.15);
}

.pp-hero-calc__select option {
  background: #1E293B;
  color: #F1F5F9;
}

.pp-hero-calc__input-prefix {
  position: relative;
}

.pp-hero-calc__input-prefix::before {
  content: '$';
  position: absolute;
  left: var(--pp-space-3);
  top: 50%;
  transform: translateY(-50%);
  color: #64748B;
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-medium);
  pointer-events: none;
  z-index: 1;
}

.pp-hero-calc__input-prefix .pp-hero-calc__input {
  padding-left: var(--pp-space-6);
  font-family: var(--pp-font-mono);
}

/* Calculate button */
.pp-hero-calc__btn {
  width: 100%;
  padding: var(--pp-space-3) var(--pp-space-4);
  background: var(--pp-orange-600);
  color: #FFFFFF;
  border: none;
  border-radius: var(--pp-radius-md);
  font-family: var(--pp-font-body);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  cursor: pointer;
  transition: background-color var(--pp-transition), transform 100ms;
  margin-top: var(--pp-space-1);
  letter-spacing: 0.01em;
}

.pp-hero-calc__btn:hover  { background: var(--pp-orange-500); }
.pp-hero-calc__btn:active { transform: translateY(1px); }

/* Result breakdown — always visible in hero calc */
.pp-hero-calc__result {
  margin-top: var(--pp-space-4);
  padding-top: var(--pp-space-4);
  border-top: 1px solid #334155;  /* slate-700 */
}

.pp-hero-calc__result-rows {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  margin-bottom: var(--pp-space-3);
}

.pp-hero-calc__result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.pp-hero-calc__result-label {
  font-size: var(--pp-text-xs);
  color: #64748B;   /* slate-500 */
}

.pp-hero-calc__result-val {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: #94A3B8;   /* slate-400 */
}

/* Total row — prominent */
.pp-hero-calc__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-top: var(--pp-space-3);
  border-top: 1px solid #334155;
  margin-top: var(--pp-space-1);
}

.pp-hero-calc__total-label {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-bold);
  color: #F1F5F9;
}

.pp-hero-calc__total-val {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-2xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-orange-500);
  line-height: 1;
}

.pp-hero-calc__note {
  font-size: 10px;
  color: #475569;   /* slate-600 */
  margin-top: var(--pp-space-3);
  line-height: 1.5;
}

/* ============================================================
   27. JURISDICTION STRIP (below hero, light background)
   ============================================================ */

.pp-jx-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  background: var(--pp-surface);
  box-shadow: var(--pp-shadow-sm);
}

.pp-jx-card {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
  padding: var(--pp-space-5) var(--pp-space-5);
  border-right: 1px solid var(--pp-border);
  transition: background-color var(--pp-transition);
  text-decoration: none;
  color: inherit;
}

.pp-jx-card:last-child { border-right: none; }

.pp-jx-card:hover { background-color: var(--pp-bg); }

.pp-jx-card__state {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--pp-orange-500);
}

.pp-jx-card__name {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  line-height: var(--pp-leading-snug);
}

.pp-jx-card__method {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-snug);
  flex: 1;
}

.pp-jx-card__fee {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
}

.pp-jx-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text-muted);
  margin-top: var(--pp-space-1);
  transition: color var(--pp-transition);
}

.pp-jx-card:hover .pp-jx-card__link { color: var(--pp-orange-600); }

/* ============================================================
   28. STATE SELECTION CARDS
   ============================================================ */

.pp-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pp-space-4);
}

.pp-state-card {
  display: flex;
  align-items: center;
  gap: var(--pp-space-4);
  padding: var(--pp-space-5);
  background-color: var(--pp-surface);
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--pp-shadow-sm);
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition), transform var(--pp-transition);
}

.pp-state-card:hover {
  border-color: var(--pp-orange-500);
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.pp-state-card--coming-soon {
  opacity: 0.55;
  cursor: default;
}

.pp-state-card--coming-soon:hover {
  border-color: var(--pp-border);
  box-shadow: var(--pp-shadow-sm);
  transform: none;
}

.pp-state-card__abbr {
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  background-color: var(--pp-slate-800);
  color: #F5B05C;    /* orange-300 */
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-base);
  border-radius: var(--pp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

[data-theme="dark"] .pp-state-card__abbr {
  background-color: var(--pp-surface-raised);
}

.pp-state-card__body  { flex: 1; min-width: 0; }

.pp-state-card__name {
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-base);
  color: var(--pp-text);
  margin-bottom: 2px;
}

.pp-state-card__count {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-orange-500);
  margin-bottom: 2px;
}

.pp-state-card__lead {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-snug);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-state-card__arrow {
  flex-shrink: 0;
  color: var(--pp-text-muted);
  transition: color var(--pp-transition), transform var(--pp-transition);
}

.pp-state-card:hover .pp-state-card__arrow {
  color: var(--pp-orange-500);
  transform: translateX(3px);
}

/* ============================================================
   29. PROJECT TYPE CARDS
   ============================================================ */

.pp-project-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--pp-space-4);
  margin-bottom: var(--pp-space-4);
}

.pp-project-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--pp-space-2);
  padding: var(--pp-space-5) var(--pp-space-3);
  background-color: var(--pp-surface);
  border: 1.5px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--pp-shadow-sm);
  transition: border-color var(--pp-transition), box-shadow var(--pp-transition), transform var(--pp-transition);
}

.pp-project-card:hover {
  border-color: var(--pp-orange-500);
  box-shadow: var(--pp-shadow-md);
  transform: translateY(-2px);
  color: inherit;
}

.pp-project-card__icon {
  width: 48px;
  height: 48px;
  background-color: var(--pp-orange-50);
  border-radius: var(--pp-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pp-orange-500);
  margin-bottom: 2px;
  flex-shrink: 0;
}

[data-theme="dark"] .pp-project-card__icon {
  background-color: rgba(212, 120, 42, 0.12);
}

.pp-project-card__name {
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-sm);
  color: var(--pp-text);
}

.pp-project-card__volume {
  font-size: var(--pp-text-xs);
  color: var(--pp-orange-500);
  font-weight: var(--pp-font-semibold);
}

.pp-project-card__hint {
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-snug);
}

/* ============================================================
   30. HOW IT WORKS — STEPS
   ============================================================ */

.pp-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--pp-space-8);
  position: relative;
}

/* Connector line between step numbers */
.pp-steps::before {
  content: '';
  position: absolute;
  top: 22px;
  left: calc(33.33% - 16px);
  right: calc(33.33% - 16px);
  height: 1px;
  background: linear-gradient(90deg,
    var(--pp-orange-300),
    var(--pp-orange-500),
    var(--pp-orange-300)
  );
  pointer-events: none;
}

.pp-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pp-space-4);
}

.pp-step__number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background-color: var(--pp-orange-600);
  color: #FFFFFF;
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-bold);
  font-size: var(--pp-text-lg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 4px var(--pp-bg);
}

.pp-step__body { flex: 1; }

.pp-step__title {
  font-size: var(--pp-text-lg);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-2);
}

.pp-step__text {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-relaxed);
  margin: 0;
}

/* ============================================================
   31. RESPONSIVE — NEW COMPONENTS
   ============================================================ */

@media (max-width: 1100px) {
  .pp-hero--split .pp-container {
    grid-template-columns: 1fr 360px;
    gap: var(--pp-space-8);
  }
}

@media (max-width: 1024px) {
  .pp-header__search-wrap { display: none; }
  .pp-header__cta { display: none; }

  .pp-hero--split .pp-container {
    grid-template-columns: 1fr;
    padding-top: var(--pp-space-10);
    padding-bottom: var(--pp-space-10);
    gap: var(--pp-space-8);
  }

  .pp-hero__col--right {
    max-width: 480px;
  }

  .pp-jx-strip {
    grid-template-columns: repeat(2, 1fr);
  }

  .pp-jx-card:nth-child(2) { border-right: none; }
  .pp-jx-card:nth-child(3) { border-right: 1px solid var(--pp-border); border-top: 1px solid var(--pp-border); }
  .pp-jx-card:nth-child(4) { border-right: none; border-top: 1px solid var(--pp-border); }

  .pp-project-grid { grid-template-columns: repeat(3, 1fr); }

  .pp-steps {
    grid-template-columns: 1fr;
    gap: var(--pp-space-6);
  }

  .pp-steps::before { display: none; }
}

@media (max-width: 768px) {
  .pp-state-grid { grid-template-columns: 1fr; }
  .pp-state-card__lead { display: none; }

  .pp-jx-strip { grid-template-columns: 1fr; border-radius: var(--pp-radius-md); }
  .pp-jx-card { border-right: none; border-bottom: 1px solid var(--pp-border); }
  .pp-jx-card:last-child { border-bottom: none; }

  .pp-project-grid { grid-template-columns: repeat(2, 1fr); }

  .pp-hero-calc { padding: var(--pp-space-5); }
}

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

/* ============================================================
   GLASSMORPHISM SYSTEM — Concept 4 (Locked April 2026)
   Light-mode-first warm white default. Dark mode via toggle.
   All pp- prefixed. No page-level CSS.
   ============================================================ */

/* --- Glass tokens: light mode (appended to :root semantics) --- */
:root {
  --pp-glass-bg:          rgba(255,255,255,0.65);
  --pp-glass-bg-hi:       rgba(255,255,255,0.80);
  --pp-glass-bg-med:      rgba(255,255,255,0.55);
  --pp-glass-border:      rgba(212,120,42,0.20);
  --pp-glass-border-hi:   rgba(184,90,24,0.40);
  --pp-glass-blur:        blur(20px);
  --pp-nav-glass:         rgba(255,247,237,0.82);
  --pp-shadow-glass:      0 4px 24px rgba(212,120,42,0.12), 0 1px 4px rgba(0,0,0,0.06);
  --pp-shadow-glow:       0 0 40px rgba(212,120,42,0.25), 0 4px 24px rgba(0,0,0,0.08);
  --pp-green:             #059669;
  --pp-orange-glow:       rgba(212,120,42,0.40);
  --pp-orange-soft:       rgba(212,120,42,0.12);
  --pp-orange-2:          rgba(212,120,42,0.07);
  --pp-step-num-col:      rgba(212,120,42,0.20);
  --pp-result-bg:         rgba(255,255,255,0.60);
  --pp-bg:                #FFFDFB;
  --pp-bg-alt:            #FAF7F2;
  --pp-bg-grad-from:      #FFFDFB;
  --pp-bg-grad-to:        #FAF7F2;
  --pp-orb-1: radial-gradient(600px circle at 20% 20%, rgba(212,120,42,0.07), transparent 70%);
  --pp-orb-2: radial-gradient(500px circle at 80% 60%, rgba(245,176,92,0.05), transparent 70%);
  --pp-orb-3: radial-gradient(400px circle at 50% 90%, rgba(212,120,42,0.04), transparent 70%);
}

/* --- Glass tokens: dark mode overrides --- */
[data-theme="dark"] {
  --pp-glass-bg:          rgba(255,255,255,0.04);
  --pp-glass-bg-hi:       rgba(255,255,255,0.07);
  --pp-glass-bg-med:      rgba(255,255,255,0.06);
  --pp-glass-border:      rgba(255,255,255,0.10);
  --pp-glass-border-hi:   rgba(212,120,42,0.35);
  --pp-glass-blur:        blur(16px);
  --pp-nav-glass:         rgba(6,11,20,0.75);
  --pp-shadow-glass:      0 8px 32px rgba(0,0,0,0.40), 0 2px 8px rgba(0,0,0,0.30);
  --pp-shadow-glow:       0 0 40px rgba(212,120,42,0.20), 0 8px 32px rgba(0,0,0,0.40);
  --pp-green:             #10B981;
  --pp-step-num-col:      rgba(212,120,42,0.15);
  --pp-result-bg:         rgba(0,0,0,0.25);
  --pp-bg:                #0F172A;
  --pp-bg-alt:            #1E293B;
  --pp-bg-grad-from:      #060B14;
  --pp-bg-grad-to:        #0F172A;
  --pp-orb-1: radial-gradient(600px circle at 20% 20%, rgba(212,120,42,0.12), transparent 70%);
  --pp-orb-2: radial-gradient(500px circle at 80% 60%, rgba(184,90,24,0.08), transparent 70%);
  --pp-orb-3: radial-gradient(400px circle at 50% 90%, rgba(212,120,42,0.06), transparent 70%);
}

/* ============================================================
   WORDMARK — single-line inline (doctrine: "single-line inline")
   ============================================================ */
.pp-wordmark {
  flex-direction: row;
  align-items: center;
  gap: 0;
  line-height: 1;
}
.pp-wordmark__permit {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-bold);
  color: var(--pp-orange-500);
  letter-spacing: -0.02em;
}
.pp-wordmark__price {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-base);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  letter-spacing: -0.02em;
}
/* Stacked variant for footer */
.pp-wordmark--stack { flex-direction: column; align-items: flex-start; gap: 2px; }
.pp-wordmark--stack .pp-wordmark__permit { font-size: var(--pp-text-xl); }
.pp-wordmark--stack .pp-wordmark__price  { font-size: var(--pp-text-lg); color: var(--pp-text-muted); }

/* ============================================================
   BACKGROUND LAYERS (fixed, behind everything)
   ============================================================ */
.pp-bg-layer {
  position: fixed; inset: 0; z-index: -2;
  background: linear-gradient(135deg, var(--pp-bg-grad-from) 0%, var(--pp-bg-grad-to) 100%);
  transition: background 300ms;
}
.pp-bg-layer::before { content: ''; position: absolute; inset: 0; background: var(--pp-orb-1); }
.pp-bg-layer::after  { content: ''; position: absolute; inset: 0; background: var(--pp-orb-2); }
.pp-bg-orb3 {
  position: fixed; inset: 0; z-index: -1;
  background: var(--pp-orb-3); pointer-events: none;
}

/* ============================================================
   NAV PILL — floating glass header
   ============================================================ */
/* Offset main content below fixed nav */
#main-content { padding-top: 80px; }

.pp-nav-wrap {
  position: fixed; top: 12px; z-index: 100;
  left: 0; right: 0;
  padding: 0 20px;
  transition: transform 300ms cubic-bezier(0.4,0,0.2,1), opacity 250ms ease;
}
.pp-nav-wrap.is-hidden {
  transform: translateY(calc(-100% - 20px));
  opacity: 0;
  pointer-events: none;
}
.pp-nav-pill {
  max-width: var(--pp-max-width); margin: 0 auto;
  background: var(--pp-nav-glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07);
  transition: background 200ms, border-color 200ms;
}
.pp-nav-pill__inner {
  display: flex; align-items: center; gap: 16px;
  height: 56px; padding: 0 20px;
}
.pp-nav-sep {
  width: 1px; height: 18px;
  background: var(--pp-glass-border); flex-shrink: 0;
}
.pp-nav-pill__right {
  margin-left: auto; display: flex; align-items: center; gap: 8px;
}
/* Nav links inside pill */
.pp-nav-pill .pp-nav__list {
  display: flex; gap: 2px; list-style: none; padding: 0; margin: 0; align-items: center;
}
.pp-nav-pill .pp-nav__link {
  font-size: 13px; font-weight: 500; color: var(--pp-text-muted);
  padding: 5px 11px; border-radius: 8px;
  transition: all 150ms; text-decoration: none; background: transparent;
}
.pp-nav-pill .pp-nav__link:hover,
.pp-nav-pill .pp-nav__link[aria-current="page"],
.pp-nav-pill .pp-nav__link[aria-current="location"] {
  background: var(--pp-orange-soft); color: var(--pp-orange-500);
}
/* Theme toggle (overrides existing .pp-theme-toggle for pill context) */
.pp-nav-wrap .pp-theme-toggle {
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--pp-orange-soft);
  border: 1px solid rgba(212,120,42,0.30);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 150ms; flex-shrink: 0;
  padding: 0;
}
.pp-nav-wrap .pp-theme-toggle:hover { background: var(--pp-orange-glow); }
.pp-nav-wrap .pp-theme-toggle svg {
  width: 15px; height: 15px;
  stroke: var(--pp-orange-500); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Icon logic: light mode shows moon (→ dark); dark mode shows sun (→ light) */
.pp-theme-toggle__sun  { display: none; }
.pp-theme-toggle__moon { display: block; }
[data-theme="dark"] .pp-theme-toggle__sun  { display: block; }
[data-theme="dark"] .pp-theme-toggle__moon { display: none; }

/* Hamburger inside pill */
.pp-nav-pill .pp-nav-toggle {
  display: none; background: none; border: none;
  cursor: pointer; color: var(--pp-text-muted); padding: 6px;
}
.pp-nav-pill .pp-nav-toggle__bar {
  display: block; width: 20px; height: 2px;
  background: currentColor; margin: 4px 0;
  transition: transform 150ms, opacity 150ms;
}
/* Mobile drawer */
.pp-nav-drawer {
  max-width: var(--pp-max-width); margin: 0 auto;
  background: var(--pp-nav-glass);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--pp-glass-border); border-top: none;
  border-radius: 0 0 14px 14px;
  padding: 12px 16px 16px; display: none;
}
.pp-nav-drawer[data-open="true"] { display: block; }
.pp-nav-drawer .pp-nav__list {
  display: flex; flex-direction: column;
  list-style: none; padding: 0; margin: 0; gap: 2px;
}
.pp-nav-drawer .pp-nav__link {
  display: block; padding: 9px 12px;
  font-size: 14px; font-weight: 500; color: var(--pp-text-muted);
  border-radius: 8px; text-decoration: none; transition: all 150ms;
}
.pp-nav-drawer .pp-nav__link:hover { background: var(--pp-orange-soft); color: var(--pp-orange-500); }

/* ============================================================
   HERO GLASS
   ============================================================ */
.pp-hero-glass {
  padding: 64px 0 52px;
  background: transparent;
  color: var(--pp-text);
}
.pp-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--pp-font-mono);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--pp-orange-500);
  background: var(--pp-orange-soft);
  border: 1px solid rgba(212,120,42,0.30);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 24px;
}
.pp-pulse {
  width: 6px; height: 6px; flex-shrink: 0;
  background: var(--pp-green); border-radius: 50%;
  box-shadow: 0 0 8px var(--pp-green);
  animation: pp-pulse 2s infinite;
}
@keyframes pp-pulse {
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(1.3); opacity:0.7; }
}
.pp-hero-glass__grid {
  display: grid; grid-template-columns: 1fr 430px; gap: 48px; align-items: start;
}
.pp-hero-glass h1 {
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; margin-bottom: 18px; color: var(--pp-text);
}
.pp-hero-glass h1 em { font-style: normal; color: var(--pp-orange-500); }
.pp-hero-glass__sub {
  font-size: 17px; color: var(--pp-text-secondary);
  line-height: 1.7; max-width: 500px; margin-bottom: 28px;
}

/* Before/After price strip */
.pp-ba-strip {
  display: flex; flex-direction: column; gap: 2px;
  margin-bottom: 32px; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--pp-glass-border);
}
.pp-ba-row {
  display: flex; justify-content: space-between; align-items: center; padding: 13px 18px;
}
.pp-ba-before { background: var(--pp-glass-bg); }
.pp-ba-after  { background: var(--pp-orange-soft); border-top: 1px solid rgba(212,120,42,0.20); }
.pp-ba-label  {
  font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-text-muted);
}
.pp-ba-label--good { color: var(--pp-orange-500); }
.pp-ba-val-bad  {
  font-family: var(--pp-font-mono); font-size: 18px; font-weight: 600;
  color: var(--pp-text-muted); text-decoration: line-through;
}
.pp-ba-val-good {
  font-family: var(--pp-font-mono); font-size: 20px; font-weight: 700; color: var(--pp-orange-500);
}
.pp-ba-note      { font-size: 11px; color: var(--pp-text-muted); text-align: right; line-height: 1.4; }
.pp-ba-note--good{ font-size: 11px; color: var(--pp-orange-500); text-align: right; opacity: 0.85; }

/* CTA row */
.pp-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }
.pp-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pp-orange-500); color: #fff;
  font-size: 14px; font-weight: 700; font-family: var(--pp-font-body);
  padding: 12px 22px; border-radius: 10px;
  border: none; cursor: pointer; transition: all 200ms; text-decoration: none;
}
.pp-btn-primary:hover {
  background: var(--pp-orange-600); color: #fff;
  box-shadow: 0 6px 20px var(--pp-orange-glow); transform: translateY(-1px);
}
.pp-btn-glass {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 500; color: var(--pp-text-secondary);
  padding: 12px 22px; border-radius: 10px;
  background: var(--pp-glass-bg); border: 1px solid var(--pp-glass-border);
  backdrop-filter: blur(8px); cursor: pointer; transition: all 150ms; text-decoration: none;
}
.pp-btn-glass:hover { border-color: var(--pp-orange-500); color: var(--pp-orange-500); }

/* ============================================================
   HERO CALCULATOR CARD (glass treatment)
   ============================================================ */
.pp-hero-calc {
  background: var(--pp-glass-bg-hi);
  backdrop-filter: var(--pp-glass-blur);
  -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border-hi);
  border-radius: 16px;
  box-shadow: var(--pp-shadow-glow);
  overflow: hidden; transition: all 200ms;
}
.pp-hero-calc__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px;
  background: var(--pp-orange-soft);
  border-bottom: 1px solid rgba(212,120,42,0.20);
}
.pp-hero-calc__title {
  font-family: var(--pp-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-text-secondary);
}
.pp-hero-calc__live-badge {
  display: flex; align-items: center; gap: 5px;
  font-family: var(--pp-font-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.07em; color: var(--pp-green);
}
.pp-hero-calc__live-badge::before {
  content: ''; width: 6px; height: 6px; flex-shrink: 0;
  background: var(--pp-green); border-radius: 50%;
  box-shadow: 0 0 8px var(--pp-green);
  animation: pp-pulse 2s infinite;
}
.pp-hero-calc__body {
  padding: 20px; display: flex; flex-direction: column; gap: 14px;
}
.pp-hero-calc__group { display: flex; flex-direction: column; }
.pp-hero-calc__label {
  font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--pp-text-muted); margin-bottom: 6px;
}
.pp-hero-calc__select,
.pp-hero-calc__input {
  width: 100%;
  background: var(--pp-result-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pp-glass-border);
  border-radius: 8px; padding: 10px 14px;
  color: var(--pp-text);
  font-family: var(--pp-font-body); font-size: 14px;
  outline: none; cursor: pointer; transition: border-color 150ms;
  -webkit-appearance: none;
}
.pp-hero-calc__select:focus,
.pp-hero-calc__input:focus { border-color: var(--pp-orange-500); }
[data-theme="dark"] .pp-hero-calc__select option { background: #0F172A; }
.pp-hero-calc__input-prefix { position: relative; }
.pp-hero-calc__btn {
  width: 100%; background: var(--pp-orange-500); color: #fff;
  font-family: var(--pp-font-body); font-size: 14px; font-weight: 700;
  padding: 12px; border-radius: 8px; border: none; cursor: pointer; transition: all 150ms;
}
.pp-hero-calc__btn:hover { background: var(--pp-orange-600); box-shadow: 0 4px 16px var(--pp-orange-glow); }
.pp-hero-calc__result {
  background: var(--pp-result-bg);
  backdrop-filter: blur(8px);
  border: 1px solid var(--pp-glass-border);
  border-radius: 10px; overflow: hidden; transition: background 200ms;
}
.pp-hero-calc__result-rows { display: flex; flex-direction: column; }
.pp-hero-calc__result-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px; font-size: 13px; color: var(--pp-text-secondary);
}
.pp-hero-calc__result-row + .pp-hero-calc__result-row { border-top: 1px solid var(--pp-glass-border); }
.pp-hero-calc__result-val { font-family: var(--pp-font-mono); font-size: 13px; font-weight: 600; }
.pp-hero-calc__total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px; border-top: 1px solid rgba(212,120,42,0.25);
  background: var(--pp-orange-soft);
}
.pp-hero-calc__total-label {
  font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-text-muted);
}
.pp-hero-calc__total-val {
  font-family: var(--pp-font-mono); font-size: 28px; font-weight: 700; color: var(--pp-orange-500);
}
[data-theme="dark"] .pp-hero-calc__total-val { text-shadow: 0 0 24px rgba(212,120,42,0.50); }
.pp-hero-calc__note {
  font-family: var(--pp-font-mono); font-size: 10px; color: var(--pp-text-muted);
  padding: 9px 14px; border-top: 1px solid var(--pp-glass-border); line-height: 1.6;
  margin: 0;
}

/* ============================================================
   STATS STRIP — glass pills row
   ============================================================ */
.pp-stats-strip-glass { padding: 28px 24px; }
.pp-stats-row {
  display: flex; gap: 12px; flex-wrap: wrap; justify-content: center;
  max-width: var(--pp-max-width); margin: 0 auto;
}
.pp-stat-pill {
  display: flex; flex-direction: column; align-items: center;
  padding: 14px 28px; border-radius: 12px;
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border); min-width: 120px; transition: all 200ms;
}
.pp-stat-pill:hover {
  border-color: var(--pp-orange-500); transform: translateY(-2px);
  box-shadow: 0 4px 16px var(--pp-orange-glow);
}
.pp-stat-num  { font-family: var(--pp-font-mono); font-size: 24px; font-weight: 700; color: var(--pp-orange-500); line-height: 1.2; }
.pp-stat-label{ font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.07em; color: var(--pp-text-muted); margin-top: 3px; }

/* ============================================================
   SECTION GLASS — shared section wrapper
   ============================================================ */
.pp-section-glass { padding: 56px 24px; }
.pp-sec-badge {
  display: inline-block;
  font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--pp-orange-500); background: var(--pp-orange-soft);
  border: 1px solid rgba(212,120,42,0.25);
  padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
}
.pp-section-glass h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.pp-sec-sub { font-size: 15px; color: var(--pp-text-muted); margin-bottom: 32px; max-width: 520px; }

/* ============================================================
   JURISDICTION GRID — glass cards
   ============================================================ */
.pp-jx-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(256px,1fr)); gap: 14px;
}
.pp-jx-grid .pp-jx-card {
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px; padding: 22px;
  cursor: pointer; transition: all 200ms; text-decoration: none; display: block; color: inherit;
  /* reset strip borders from old design */
  border-right: 1px solid var(--pp-glass-border) !important;
  border-top: 1px solid var(--pp-glass-border) !important;
  border-bottom: 1px solid var(--pp-glass-border) !important;
}
.pp-jx-grid .pp-jx-card:hover {
  border-color: var(--pp-glass-border-hi) !important;
  box-shadow: var(--pp-shadow-glow); transform: translateY(-3px);
}
.pp-jx-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* ============================================================
   STEPS — glass cards (3-column)
   ============================================================ */
.pp-steps-glass { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.pp-step-glass {
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px; padding: 28px;
  transition: all 200ms; position: relative; overflow: hidden;
}
.pp-step-glass::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 3px; background: var(--pp-orange-500); opacity: 0; transition: opacity 200ms;
}
.pp-step-glass:hover { border-color: var(--pp-glass-border-hi); }
.pp-step-glass:hover::before { opacity: 1; }
.pp-step-glass__num {
  font-family: var(--pp-font-mono); font-size: 38px; font-weight: 700;
  color: var(--pp-step-num-col); line-height: 1; margin-bottom: 14px;
}
.pp-step-glass__title { font-size: 16px; font-weight: 700; color: var(--pp-text); margin-bottom: 8px; }
.pp-step-glass__text  { font-size: 13px; color: var(--pp-text-muted); line-height: 1.7; margin: 0; }

/* ============================================================
   COMPARE GLASS — side-by-side breakdown
   ============================================================ */
.pp-compare-glass { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 28px; }
.pp-cmp-card {
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px; padding: 24px; transition: all 200ms;
}
.pp-cmp-card--featured { border-color: var(--pp-glass-border-hi); box-shadow: 0 0 24px var(--pp-orange-glow); }
.pp-cmp-label  { font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-text-muted); margin-bottom: 10px; }
.pp-cmp-total  { font-family: var(--pp-font-mono); font-size: 32px; font-weight: 700; color: var(--pp-orange-500); margin-bottom: 16px; }
.pp-cmp-line   { display: flex; justify-content: space-between; font-size: 12px; color: var(--pp-text-muted); padding: 5px 0; border-bottom: 1px solid var(--pp-glass-border); }
.pp-cmp-line:last-of-type { border: none; }
.pp-cmp-link   { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 12px; font-weight: 600; color: var(--pp-orange-500); text-decoration: none; }

/* ============================================================
   TABLE GLASS
   ============================================================ */
.pp-table-glass {
  background: var(--pp-glass-bg);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border);
  border-radius: 14px; overflow: hidden;
}
.pp-table-glass table { width: 100%; border-collapse: collapse; font-size: 14px; }
.pp-table-glass thead th {
  text-align: left; padding: 12px 18px;
  font-family: var(--pp-font-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-text-muted);
  background: var(--pp-glass-bg-med); border-bottom: 1px solid var(--pp-glass-border);
}
.pp-table-glass thead th.pp-col-pp { color: var(--pp-orange-500); background: var(--pp-orange-2); }
.pp-table-glass tbody td { padding: 12px 18px; color: var(--pp-text-secondary); border-bottom: 1px solid var(--pp-glass-border); }
.pp-table-glass tbody td.pp-col-pp { background: var(--pp-orange-2); }
.pp-table-glass tbody tr:last-child td { border: none; }
.pp-table-glass tbody tr:hover td { background: var(--pp-glass-bg-med); }
.pp-table-glass tbody tr:hover td.pp-col-pp { background: var(--pp-orange-soft); }
.pp-strike   { color: var(--pp-text-muted); font-style: italic; }
.pp-mono-val { font-family: var(--pp-font-mono); font-weight: 700; color: var(--pp-orange-500); }

/* ============================================================
   CTA GLASS CARD
   ============================================================ */
.pp-cta-glass {
  background: var(--pp-glass-bg-hi);
  backdrop-filter: var(--pp-glass-blur); -webkit-backdrop-filter: var(--pp-glass-blur);
  border: 1px solid var(--pp-glass-border-hi);
  border-radius: 20px; padding: 56px; text-align: center;
  box-shadow: var(--pp-shadow-glow);
  position: relative; overflow: hidden;
}
.pp-cta-glass::before {
  content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%);
  width: 300px; height: 120px;
  background: radial-gradient(ellipse, rgba(212,120,42,0.18), transparent 70%);
  pointer-events: none;
}
.pp-cta-glass h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; }
.pp-cta-glass p  { color: var(--pp-text-muted); margin-bottom: 28px; font-size: 16px; }

/* ============================================================
   FOOTER GLASS (overrides existing .pp-footer bg)
   ============================================================ */
.pp-footer {
  background: rgba(255,255,255,0.72) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--pp-glass-border) !important;
  color: var(--pp-text-muted);
}
[data-theme="dark"] .pp-footer {
  background: rgba(6,11,20,0.88) !important;
  border-top-color: rgba(255,255,255,0.08) !important;
}

/* ============================================================
   RESPONSIVE — glass components
   ============================================================ */
@media (max-width: 960px) {
  .pp-steps-glass       { grid-template-columns: 1fr; }
  .pp-compare-glass     { grid-template-columns: 1fr; }
  .pp-jx-grid           { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .pp-hero-glass__grid  { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pp-nav-pill .pp-nav__list { display: none; }
  .pp-nav-pill .pp-nav-toggle { display: block; }
  .pp-jx-grid { grid-template-columns: 1fr; }
  .pp-cta-glass { padding: 36px 24px; }
}
@media (max-width: 600px) {
  .pp-stats-row   { gap: 8px; }
  .pp-stat-pill   { min-width: 90px; padding: 12px 16px; }
  .pp-hero-glass  { padding: 40px 0 32px; }
  .pp-section-glass { padding: 40px 20px; }
  .pp-nav-wrap    { padding: 0 12px; }
  .pp-table-glass { overflow-x: auto; }
}

/* ============================================================
   JURISDICTION FACTS STRIP
   ============================================================ */
.pp-facts-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  overflow: hidden;
  margin-bottom: var(--pp-space-6);
  font-size: var(--pp-text-sm);
}

.pp-facts-strip__item {
  padding: var(--pp-space-3) var(--pp-space-4);
  border-right: 1px solid var(--pp-border);
  border-bottom: 1px solid var(--pp-border);
  background: var(--pp-surface);
}

.pp-facts-strip__item:last-child {
  border-right: none;
}

.pp-facts-strip__label {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-1);
}

.pp-facts-strip__value {
  font-weight: var(--pp-font-medium);
  color: var(--pp-text);
  line-height: var(--pp-leading-snug);
}

[data-theme="dark"] .pp-facts-strip__item {
  background: var(--pp-surface);
  border-color: rgba(255,255,255,0.08);
}

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

/* ============================================================
   FEE STATUS BADGE
   ============================================================ */
.pp-fee-status {
  display: inline-flex;
  align-items: center;
  gap: var(--pp-space-2);
  padding: var(--pp-space-1) var(--pp-space-3);
  border-radius: var(--pp-radius-full);
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pp-fee-status--official {
  background: rgba(5,150,105,0.12);
  color: #065F46;
  border: 1px solid rgba(5,150,105,0.3);
}

[data-theme="dark"] .pp-fee-status--official {
  background: rgba(5,150,105,0.2);
  color: #6EE7B7;
  border-color: rgba(5,150,105,0.4);
}

.pp-fee-status--partial {
  background: rgba(245,158,11,0.12);
  color: #92400E;
  border: 1px solid rgba(245,158,11,0.3);
}

[data-theme="dark"] .pp-fee-status--partial {
  background: rgba(245,158,11,0.2);
  color: #FCD34D;
  border-color: rgba(245,158,11,0.4);
}

.pp-fee-status--incomplete {
  background: rgba(239,68,68,0.10);
  color: #991B1B;
  border: 1px solid rgba(239,68,68,0.25);
}

[data-theme="dark"] .pp-fee-status--incomplete {
  background: rgba(239,68,68,0.18);
  color: #FCA5A5;
  border-color: rgba(239,68,68,0.35);
}

/* ============================================================
   SCOPE AND EXCLUSIONS BLOCK
   ============================================================ */
.pp-scope-block {
  border: 1px solid var(--pp-border);
  border-left: 3px solid var(--pp-orange-500);
  border-radius: var(--pp-radius-lg);
  background: var(--pp-surface);
  padding: var(--pp-space-4) var(--pp-space-5);
  margin-bottom: var(--pp-space-6);
  font-size: var(--pp-text-sm);
}

.pp-scope-block__title {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-3);
}

.pp-scope-block__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pp-space-4);
}

.pp-scope-block__col-title {
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-2);
  font-size: var(--pp-text-sm);
}

.pp-scope-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-2);
}

.pp-scope-block__list li {
  display: flex;
  gap: var(--pp-space-2);
  align-items: flex-start;
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-snug);
}

.pp-scope-block__list li::before {
  flex-shrink: 0;
  font-weight: var(--pp-font-bold);
  margin-top: 1px;
}

.pp-scope-block__list--covers li::before {
  content: "✓";
  color: #059669;
}

.pp-scope-block__list--excludes li::before {
  content: "✕";
  color: var(--pp-text-muted);
}

[data-theme="dark"] .pp-scope-block {
  background: var(--pp-surface);
  border-color: rgba(255,255,255,0.08);
  border-left-color: var(--pp-orange-500);
}

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

/* ============================================================
   CALCULATION METHODOLOGY BLOCK
   ============================================================ */
.pp-methodology {
  background: var(--pp-bg);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-lg);
  padding: var(--pp-space-5) var(--pp-space-6);
  margin-bottom: var(--pp-space-6);
}

.pp-methodology__title {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-4);
}

.pp-methodology__steps {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  counter-reset: method-step;
}

.pp-methodology__step {
  display: flex;
  gap: var(--pp-space-3);
  align-items: flex-start;
  counter-increment: method-step;
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
}

.pp-methodology__step::before {
  content: counter(method-step);
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(212,120,42,0.12);
  color: var(--pp-orange-500);
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-bold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.pp-methodology__formula {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-xs);
  color: var(--pp-orange-500);
  background: var(--pp-orange-50);
  padding: var(--pp-space-2) var(--pp-space-3);
  border-radius: var(--pp-radius-md);
  margin-top: var(--pp-space-2);
  display: block;
}

[data-theme="dark"] .pp-methodology {
  background: var(--pp-surface);
  border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .pp-methodology__formula {
  background: rgba(212,120,42,0.12);
}

/* ============================================================
   25. PERMIT VISUALIZER — COST STACK v0
   Used only on /tools/permit-calculator/. Reuses the shared
   PermitCalc engine for fee math and renders an itemized
   horizontal-bar cost stack. No fee amounts are stored in
   markup or in CSS — all values come from the verified
   source.json + calculator.json pair via the engine.
   ============================================================ */

.pp-stack {
  background-color: var(--pp-surface);
  border: 1px solid var(--pp-border);
  border-radius: var(--pp-radius-xl);
  padding: var(--pp-space-6);
  margin: var(--pp-space-6) 0;
  box-shadow: var(--pp-shadow-sm);
}

.pp-stack__header {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-1);
  margin-bottom: var(--pp-space-5);
  padding-bottom: var(--pp-space-4);
  border-bottom: 1px solid var(--pp-border);
}

.pp-stack__eyebrow {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-500);
}

.pp-stack__title {
  font-size: var(--pp-text-xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-text);
  line-height: var(--pp-leading-tight);
}

.pp-stack__subtitle {
  font-size: var(--pp-text-sm);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-relaxed);
}

.pp-stack__controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-space-4);
  margin-bottom: var(--pp-space-5);
}

@media (min-width: 720px) {
  .pp-stack__controls {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.pp-stack__rows {
  display: flex;
  flex-direction: column;
  gap: var(--pp-space-3);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pp-stack__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pp-space-1);
}

.pp-stack__row-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-2);
  font-size: var(--pp-text-sm);
}

.pp-stack__row-label {
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text);
}

.pp-stack__row-cat {
  font-size: var(--pp-text-xs);
  font-weight: var(--pp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 9999px;
  background: var(--pp-orange-50);
  color: var(--pp-orange-800);
  margin-left: var(--pp-space-2);
  white-space: nowrap;
}

[data-theme="dark"] .pp-stack__row-cat {
  background: rgba(212,120,42,0.18);
  color: var(--pp-orange-300, #F5B05C);
}

.pp-stack__row-cat[data-cat="review"] {
  background: rgba(30,41,59,0.08);
  color: var(--pp-slate-800, #1E293B);
}

[data-theme="dark"] .pp-stack__row-cat[data-cat="review"] {
  background: rgba(241,245,249,0.10);
  color: var(--pp-text);
}

.pp-stack__row-cat[data-cat="state_levy"],
.pp-stack__row-cat[data-cat="local_surcharge"] {
  background: rgba(5,150,105,0.10);
  color: #047857;
}

[data-theme="dark"] .pp-stack__row-cat[data-cat="state_levy"],
[data-theme="dark"] .pp-stack__row-cat[data-cat="local_surcharge"] {
  background: rgba(5,150,105,0.20);
  color: #6EE7B7;
}

.pp-stack__row-amount {
  font-family: var(--pp-font-mono);
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text);
  font-variant-numeric: tabular-nums;
}

.pp-stack__bar {
  position: relative;
  height: 14px;
  border-radius: 9999px;
  background: var(--pp-bg-alt, var(--pp-orange-50));
  overflow: hidden;
}

[data-theme="dark"] .pp-stack__bar {
  background: rgba(255,255,255,0.06);
}

.pp-stack__bar-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background: var(--pp-orange-500);
  border-radius: 9999px;
  width: 0;
  transition: width 600ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.pp-stack__bar-fill[data-cat="review"] {
  background: var(--pp-slate-800, #1E293B);
}

[data-theme="dark"] .pp-stack__bar-fill[data-cat="review"] {
  background: #94A3B8;
}

.pp-stack__bar-fill[data-cat="state_levy"],
.pp-stack__bar-fill[data-cat="local_surcharge"] {
  background: #059669;
}

.pp-stack__total {
  margin-top: var(--pp-space-5);
  padding-top: var(--pp-space-4);
  border-top: 1px solid var(--pp-border);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pp-space-2);
}

.pp-stack__total-label {
  font-size: var(--pp-text-sm);
  font-weight: var(--pp-font-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--pp-text);
}

.pp-stack__total-amount {
  font-family: var(--pp-font-mono);
  font-size: var(--pp-text-3xl);
  font-weight: var(--pp-font-bold);
  color: var(--pp-orange-500);
  font-variant-numeric: tabular-nums;
}

.pp-stack__source {
  margin-top: var(--pp-space-4);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-left: 3px solid var(--pp-orange-500);
  background: var(--pp-orange-50);
  border-radius: var(--pp-radius-md);
  font-size: var(--pp-text-xs);
  color: var(--pp-text-secondary);
  line-height: var(--pp-leading-relaxed);
}

[data-theme="dark"] .pp-stack__source {
  background: rgba(212,120,42,0.10);
  color: var(--pp-text-secondary);
}

.pp-stack__source a {
  color: var(--pp-orange-600, #B85A18);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.pp-stack__disclaimer {
  margin-top: var(--pp-space-3);
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  line-height: var(--pp-leading-relaxed);
}

.pp-stack__notice {
  padding: var(--pp-space-4);
  border: 1px dashed var(--pp-border);
  border-radius: var(--pp-radius-md);
  background: var(--pp-bg-alt, var(--pp-orange-50));
  color: var(--pp-text-secondary);
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-relaxed);
}

[data-theme="dark"] .pp-stack__notice {
  background: rgba(255,255,255,0.04);
}

.pp-stack__notice strong { color: var(--pp-text); }

@media (prefers-reduced-motion: reduce) {
  .pp-stack__bar-fill { transition: none; }
}

@media (max-width: 480px) {
  .pp-stack { padding: var(--pp-space-5); }
  .pp-stack__total-amount { font-size: var(--pp-text-2xl); }
}

/* ============================================================
   Calculator trust upgrades (2026-05-08)
   Exclusions block, jurisdiction data stamp, AHJ contact card,
   request-missing-jurisdiction CTA
   ============================================================ */

.pp-calc-excludes {
  margin-top: var(--pp-space-5);
  padding: var(--pp-space-4) var(--pp-space-5);
  border-radius: var(--pp-radius-lg);
  border: 1px solid rgba(212, 120, 42, 0.25);
  background: var(--pp-orange-50);
  color: var(--pp-text-secondary);
  font-size: var(--pp-text-sm);
  line-height: var(--pp-leading-relaxed);
}
[data-theme="dark"] .pp-calc-excludes {
  background: rgba(212, 120, 42, 0.07);
  border-color: rgba(212, 120, 42, 0.25);
}
.pp-calc-excludes__title {
  font-size: var(--pp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-orange-800);
  margin-bottom: var(--pp-space-2);
}
[data-theme="dark"] .pp-calc-excludes__title { color: var(--pp-orange-300); }
.pp-calc-excludes ul {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pp-calc-stamp {
  margin-top: var(--pp-space-4);
  padding: var(--pp-space-3) var(--pp-space-4);
  border-radius: var(--pp-radius-md);
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-2) var(--pp-space-4);
  align-items: baseline;
}
.pp-calc-stamp__row { display: inline-flex; gap: 6px; align-items: baseline; }
.pp-calc-stamp__label {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
  color: var(--pp-text-muted);
}
.pp-calc-stamp__value { color: var(--pp-text-secondary); font-family: var(--pp-font-mono); }
.pp-calc-stamp a { color: var(--pp-orange-500); font-weight: var(--pp-font-medium); }

.pp-calc-ahj {
  margin-top: var(--pp-space-4);
  padding: var(--pp-space-4) var(--pp-space-5);
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
}
.pp-calc-ahj__title {
  font-size: var(--pp-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-2);
}
.pp-calc-ahj__name {
  font-weight: var(--pp-font-semibold);
  color: var(--pp-text);
  margin-bottom: var(--pp-space-2);
}
.pp-calc-ahj__rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
}
.pp-calc-ahj__rows a { color: var(--pp-orange-500); font-weight: var(--pp-font-medium); }

.pp-calc-cta-request {
  margin-top: var(--pp-space-5);
  padding: var(--pp-space-4) var(--pp-space-5);
  border-radius: var(--pp-radius-lg);
  border: 1px dashed rgba(212, 120, 42, 0.45);
  background: var(--pp-orange-50);
  font-size: var(--pp-text-sm);
  color: var(--pp-text-secondary);
}
[data-theme="dark"] .pp-calc-cta-request {
  background: rgba(212, 120, 42, 0.07);
}
.pp-calc-cta-request strong { color: var(--pp-text); }
.pp-calc-cta-request a { color: var(--pp-orange-500); font-weight: var(--pp-font-semibold); }

/* Source library list (shared with /sources/library/) */
.pp-source-card {
  padding: var(--pp-space-4) var(--pp-space-5);
  border-radius: var(--pp-radius-lg);
  border: 1px solid var(--pp-border);
  background: var(--pp-surface);
  margin-bottom: var(--pp-space-4);
}
.pp-source-card h3 {
  margin: 0 0 var(--pp-space-2);
  font-size: var(--pp-text-lg);
}
.pp-source-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-2) var(--pp-space-4);
  font-size: var(--pp-text-xs);
  color: var(--pp-text-muted);
  margin-bottom: var(--pp-space-3);
}
.pp-source-card__meta strong {
  color: var(--pp-text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.pp-source-card__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pp-space-3);
  font-size: var(--pp-text-sm);
}
.pp-source-card__links a { color: var(--pp-orange-500); font-weight: var(--pp-font-medium); }