/**
 * PlumberFinderUSA — Production CSS
 * Rebuilt: 2026-05-09
 * Token system: see :root block below
 */

/**
 * PlumberFinderUSA — Design Token System
 * Single source of truth for all colors, spacing, typography, shadows, radius
 * Never use raw hex or pixel values outside this file
 */

:root {
  /* ── Brand colors ── */
  --red-50:  #FEF2F2;
  --red-100: #FEE2E2;
  --red-200: #FECACA;
  --red-400: #F87171;
  --red-600: #DC2626;   /* Primary CTA */
  --red-700: #B91C1C;   /* CTA hover */
  --red-900: #7F1D1D;

  --ink-0:   #FFFFFF;
  --ink-50:  #F9FAFB;
  --ink-100: #F3F4F6;
  --ink-200: #E5E7EB;
  --ink-300: #D1D5DB;
  --ink-400: #9CA3AF;
  --ink-500: #6B7280;
  --ink-700: #374151;
  --ink-900: #0A0A0A;   /* Near-black — never pure #000 */

  /* ── Semantic tokens ── */
  --color-bg:           var(--ink-0);
  --color-bg-subtle:    var(--ink-50);
  --color-bg-muted:     var(--ink-100);
  --color-border:       var(--ink-200);
  --color-border-strong:var(--ink-300);
  --color-text:         var(--ink-900);
  --color-text-muted:   var(--ink-500);
  --color-text-subtle:  var(--ink-400);
  --color-accent:       var(--red-600);
  --color-accent-hover: var(--red-700);
  --color-accent-soft:  var(--red-100);
  --color-star:         #F59E0B;
  --color-success:      #16A34A;

  /* ── Typography ── */
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Inter', -apple-system, sans-serif;

  /* Scale: using rem so user font-size preferences are respected */
  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.8125rem; /* 13px */
  --text-base: 1rem;      /* 16px */
  --text-lg:   1.125rem;  /* 18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */
  --text-3xl:  1.875rem;  /* 30px */
  --text-4xl:  2.25rem;   /* 36px */
  --text-5xl:  3rem;      /* 48px */

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --leading-tight:  1.2;
  --leading-snug:   1.375;
  --leading-normal: 1.5;
  --leading-relaxed:1.7;

  /* ── Spacing (8px base scale) ── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ── Border radius ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-2xl:  28px;
  --radius-full: 9999px;

  /* ── Shadows (layered — no single-shadow) ── */
  --shadow-xs:  0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:  0 4px 12px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg:  0 10px 32px rgba(0,0,0,0.10), 0 4px 12px rgba(0,0,0,0.06);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.14), 0 8px 24px rgba(0,0,0,0.08);
  --shadow-accent: 0 4px 14px rgba(220,38,38,0.30);
  --shadow-accent-lg: 0 8px 28px rgba(220,38,38,0.40);

  /* ── Motion ── */
  --duration-fast:   120ms;
  --duration-base:   200ms;
  --duration-slow:   300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.4, 0, 1, 1);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Layout ── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
}

/* ════════════════════════════════════════════════════════
   COMPATIBILITY BRIDGE — Maps legacy --pf-* vars to tokens
   These alias the old variable names to new token system.
   Allows gradual migration of templates without breakage.
   ════════════════════════════════════════════════════════ */
:root {
  /* Color aliases */
  --pf-cta:          var(--color-accent);
  --pf-cta-dark:     var(--color-accent-hover);
  --pf-cta-soft:     var(--color-accent-soft);
  --pf-cta-glow:     rgba(220,38,38,.30);
  --pf-ink:          var(--ink-900);
  --pf-blue:         var(--color-accent);
  --pf-blue-dark:    var(--color-accent-hover);
  --pf-blue-soft:    var(--color-accent-soft);
  --pf-red:          var(--color-accent);
  --pf-red-dark:     var(--color-accent-hover);
  --pf-navy:         var(--ink-900);
  --pf-green:        var(--color-success);
  --pf-green-soft:   rgba(22,163,74,.12);
  --pf-star:         var(--color-star);
  --pf-yellow:       var(--color-star);
  --pf-amber:        var(--color-star);
  --pf-amber-text:   #92400e;
  --pf-orange:       var(--color-accent);
  
  /* Background aliases */
  --pf-bg:           var(--color-bg);
  --pf-bg-2:         var(--color-bg-subtle);
  --pf-bg-3:         var(--color-bg-muted);
  --pf-bg-4:         var(--color-bg-muted);
  
  /* Text aliases */
  --pf-text:         var(--color-text);
  --pf-text-2:       var(--color-text-muted);
  --pf-mute:         var(--color-text-muted);
  --pf-mute-2:       var(--color-text-subtle);
  
  /* Border aliases */
  --pf-line:         var(--color-border);
  --pf-line-soft:    var(--color-bg-muted);
  
  /* Font aliases */
  --pf-font-body:    var(--font-sans);
  --pf-font-display: var(--font-sans);
  --pf-font-serif:   var(--font-sans);
  
  /* Motion aliases */
  --pf-ease:         var(--ease-out);
  --pf-ease-in:      var(--ease-in);
  --pf-e:            var(--ease-out);
  --pf-dur-fast:     var(--duration-fast);
  --pf-dur-base:     var(--duration-base);
  --pf-dur-slow:     var(--duration-slow);
  
  /* Shadow aliases */
  --pf-shadow:       var(--shadow-sm);
  --pf-shadow-sm:    var(--shadow-sm);
  --pf-shadow-md:    var(--shadow-md);
  --pf-shadow-lg:    var(--shadow-lg);
  --pf-shadow-xl:    var(--shadow-xl);
  --pf-shadow-cta:   var(--shadow-accent);
  
  /* Radius aliases */
  --pf-r-xs:         var(--radius-sm);
  --pf-r-sm:         var(--radius-sm);
  --pf-r-md:         var(--radius-md);
  --pf-r-lg:         var(--radius-lg);
  --pf-r-xl:         var(--radius-xl);
  --pf-r-pill:       var(--radius-full);
  
  /* Spacing aliases */
  --pf-sp-1:         var(--space-1);
  --pf-sp-2:         var(--space-2);
  --pf-sp-3:         var(--space-3);
  --pf-sp-4:         var(--space-4);
  --pf-sp-5:         var(--space-6);
  --pf-sp-6:         var(--space-8);
  --pf-sp-7:         var(--space-10);
  --pf-sp-8:         var(--space-12);
  
  /* Gradient aliases */
  --pf-gradient-cta:  var(--color-accent);
  --pf-gradient-hero: var(--ink-900);
}


/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}


/*
 * Plumber Finder USA — Master CSS v2.0
 * Single source of truth. No conflicts. No dead code.
 */

/* ============================================================
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   PFUSA BRAND KIT — design tokens (single source of truth)
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   Reference these vars EVERYWHERE. Never hardcode brand colors.
   ============================================================ */


/* ============================================================
   PFUSA BRAND KIT — UTILITY COMPONENT CLASSES
   Use these instead of one-off styles. Anywhere on the site.
   ============================================================ */

/* ---- Buttons ---- */
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 22px; min-height: 44px;
    border: none; border-radius: var(--radius-md);
    font-family: var(--font-sans); font-size: 15px; font-weight: 700;
    line-height: 1; text-decoration: none;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out),
                filter var(--duration-base) var(--ease-out),
                background var(--duration-base) var(--ease-out),
                color var(--duration-fast) var(--ease-out);
    white-space: nowrap;
}
.pf-btn:active { transform: scale(.97); }

.pf-btn-primary {
    background: var(--color-accent); color: #fff;
    box-shadow: var(--shadow-accent);
}
.pf-btn-primary:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 10px 28px rgba(220,38,38,.45); }

.pf-btn-secondary {
    background: var(--color-accent); color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,.20), 0 1px 3px rgba(220,38,38,.10);
}
.pf-btn-secondary:hover { color: #fff; background: var(--color-accent-hover); box-shadow: 0 4px 14px rgba(220,38,38,.30), 0 2px 6px rgba(220,38,38,.15); }

.pf-btn-outline {
    background: #fff; color: var(--ink-900);
    border: 1.5px solid var(--color-border);
}
.pf-btn-outline:hover { color: var(--ink-900); border-color: var(--ink-900); background: var(--color-bg); }

.pf-btn-ghost {
    background: rgba(255,255,255,.06); color: rgba(255,255,255,.95);
    border: 1.5px solid rgba(255,255,255,.30);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.pf-btn-ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.55); color: #fff; }

.pf-btn-lg { padding: 16px 26px; font-size: 16px; min-height: 52px; }
.pf-btn-sm { padding: 8px 14px; font-size: 13px; min-height: 36px; }

/* ---- Cards ---- */
.pf-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
.pf-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ---- Pills ---- */
.pf-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--radius-full);
    font-family: var(--font-sans); font-size: 12px; font-weight: 700;
    line-height: 1.3;
}
.pf-pill-primary { background: var(--color-accent-soft); color: var(--color-accent); }
.pf-pill-warm    { background: var(--color-star);     color: var(--color-star); }
.pf-pill-success { background: var(--color-success);color: #15803D; }
.pf-pill-danger  { background: #FEE2E2;             color: var(--color-accent); }
.pf-pill-dark    { background: var(--ink-900); color: #fff; }

/* ---- Headings (use these to enforce font + tracking site-wide) ---- */
.pf-h1, .pf-h2, .pf-h3 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: var(--ink-900); }
.pf-h1 { font-size: clamp(28px, 4vw, 44px); }
.pf-h2 { font-size: clamp(24px, 3.2vw, 34px); }
.pf-h3 { font-size: clamp(18px, 2vw, 22px); }
.pf-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(220,38,38,.18); color: #4ADE80;
    border: 1px solid rgba(220,38,38,.35);
    padding: 6px 14px; border-radius: var(--radius-full);
    font-family: var(--font-sans); font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em;
}
.pf-eyebrow-light {
    background: var(--color-accent-soft); color: var(--color-accent);
    border-color: rgba(220,38,38,.20);
}

/* ---- Section shells ---- */
.pf-section { max-width: 1240px; margin: 0 auto; padding: var(--space-10) var(--space-5); }
.pf-section-narrow { max-width: 880px; margin: 0 auto; padding: var(--space-10) var(--space-5); }
.pf-section-head { text-align: center; max-width: 720px; margin: 0 auto var(--space-8); }

@media (max-width: 768px) {
    .pf-section, .pf-section-narrow { padding: var(--space-8) var(--space-4); }
    .pf-btn { font-size: 14px; padding: 12px 18px; }
    .pf-btn-lg { padding: 14px 20px; font-size: 15px; }
}

/* ============================================================
   BOOTSTRAP 4 → 5 COMPAT SHIM
   Trimmed to only the aliases still emitted by code we don't control:
   - .sr-only is emitted by the WP Bootstrap navwalker
   - .form-group / badge-* / .close may appear in legacy WYSIWYG post content
   Source-controlled markup has been migrated to BS5 directly.
   ============================================================ */
.sr-only { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
.form-group { margin-bottom:1rem; }
.badge-primary{background-color:var(--bs-primary,#0d6efd);color:#fff}.badge-secondary{background-color:var(--bs-secondary,#6c757d);color:#fff}.badge-success{background-color:var(--bs-success,#198754);color:#fff}.badge-danger{background-color:var(--bs-danger,#dc3545);color:#fff}.badge-warning{background-color:var(--bs-warning,#ffc107);color:#0A0A0A}.badge-info{background-color:var(--bs-info,#0dcaf0);color:#0A0A0A}.badge-light{background-color:var(--bs-light,#fafafa);color:#0A0A0A}.badge-dark{background-color:var(--bs-dark,#212529);color:#fff}
.close { padding:.25rem .5rem; font-size:1.5rem; line-height:1; color:#0A0A0A; background:transparent; border:0; opacity:.5; }
.close:hover { opacity:.75; }

/* ============================================================
   HEADER & NAV (moved out of inline <style> in header.php)
   ============================================================ */
.pfusa-topbar { background:#0A0A0A; padding:8px 0; font-size:0.82rem; font-family:'Inter',sans-serif; }
.pfusa-topbar a { color:rgba(255,255,255,0.8); text-decoration:none; display:inline-flex; align-items:center; gap:6px; margin-right:20px; }
.pfusa-topbar a:hover { color:#F59E0B; }
.pfusa-topbar .cta { background:#DC2626; color:#fff; padding:4px 14px; border-radius:20px; font-weight:700; margin-right:0; }
.pfusa-topbar .cta:hover { background:#B91C1C; color:#fff; }
.pfusa-topbar-inner { display:flex; align-items:center; justify-content:space-between; padding:0 24px; }

.pfusa-brand img { height:40px; width:auto; display:block; }
.pfusa-brand-text, .pfusa-brand-text:link, .pfusa-brand-text:visited { font-family:'Inter',sans-serif; font-size:1.15rem; font-weight:900; color:#fff; text-decoration:none; letter-spacing:-.03em; line-height:1; white-space:nowrap; }
.pfusa-brand-text span { color: var(--color-accent); }
.pfusa-navlinks { display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.pfusa-navlinks li { position:relative; }
.pfusa-navlinks li.current-menu-item > a { color:#DC2626; }
.pfusa-navlinks .dropdown-toggle::after { display:inline-block; width:0; height:0; margin-left:6px; vertical-align:middle; border-top:4px solid; border-right:4px solid transparent; border-left:4px solid transparent; }
.pfusa-navlinks li:hover .dropdown-menu { display:block; }
.pfusa-navlinks .dropdown-menu a { border-radius:6px; padding:8px 12px; color:#1F2937; font-size:0.875rem; }
.pfusa-navlinks .dropdown-menu a:hover { background:#F3F4F6; color:#0A0A0A; }
.pfusa-mobile-toggle { display:none; background:none; border:none; cursor:pointer; padding:4px; flex-direction:column; gap:5px; }

@media(max-width:991px) {
    .pfusa-navlinks, .pfusa-nav-cta { display:none; }
    .pfusa-mobile-toggle { display:flex; }
    .pfusa-navlinks.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; border-top:1px solid #E5E7EB; padding:16px 24px; box-shadow:0 8px 24px rgba(0,0,0,0.1); gap:0; }
    .pfusa-navlinks.open li a { padding:12px 8px; }
}

/* ============================================================
   FONTS + RESET
   ============================================================ */
/* Google Fonts loaded via functions.php enqueue — Inter only */


*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-sans); color: var(--ink-900); -webkit-font-smoothing: antialiased; overflow-x: hidden; margin: 0; padding: 0; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); letter-spacing: -.025em; }
a { transition: color .2s, background .2s; }
img { max-width: 100%; height: auto; }

/* ============================================================
   GLOBAL INNER PAGES
   ============================================================ */
body:not(.home) #primary { max-width: 100% !important; width: 100% !important; flex: none !important; padding: 0 !important; }
body:not(.home) #secondary, body:not(.home) .widget-area { display: none !important; }
body:not(.home) .entry-header, body:not(.home) .entry-footer { display: none !important; }
body:not(.home) #content, body:not(.home) .site-content, body:not(.home) .site-main { padding: 0 !important; margin: 0 !important; }
.home #content, .home .site-content { padding: 0 !important; margin: 0 !important; }
.home #primary { max-width: 100% !important; width: 100% !important; flex: none !important; padding: 0 !important; }
.home #secondary { display: none !important; }
.home .entry-header, .home .entry-footer { display: none !important; }

/* Inner banner */
.innerBanner { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)) !important; padding: 3rem 0 !important; text-align: center; }
.innerBannerHeading h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0; }

/* Global buttons */
.theme-btn, button.theme-btn { background: linear-gradient(135deg,var(--color-accent),#0A0A0A); color: #fff; border: none; border-radius: var(--radius-lg); padding: 12px 24px; font-weight: 700; font-size: .9rem; font-family: var(--font-sans); cursor: pointer; transition: all .2s; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.theme-btn:hover, button.theme-btn:hover { background: linear-gradient(135deg,#0A0A0A,#0A0A0A); color: #fff; transform: translateY(-1px); }
button.theme-btn[name="submit"] { background: var(--color-accent) !important; }
button.theme-btn[name="button"] { background: var(--gray-bg); color: var(--gray-text); border: 1px solid var(--gray-border); }
button.theme-btn[name="button"]:hover { background: var(--gray-border); color: var(--gray-text); transform: none; }

/* Global forms */
.form-control, input[type="text"], input[type="email"], input[type="tel"], select, textarea { border: 1.5px solid var(--gray-border); border-radius: var(--radius-lg); padding: 10px 14px; font-size: .9rem; color: var(--gray-text); background: #FAFAFA; height: auto; box-shadow: none; font-family: var(--font-sans); transition: all .2s; width: 100%; }
.form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--color-accent) !important; background: #fff !important; box-shadow: 0 0 0 3px rgba(220,38,38,.08) !important; outline: none !important; }

/* ============================================================
   LISTINGS PAGE — Zocdoc-style
   ============================================================ */

.zl-page { background: #FAFAFA; min-height: 100vh; }

/* ---- Archive Hero (taxonomy pages only) ---- */
.zl-archive-hero {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-900) 100%);
    color: #fff;
    padding: 36px 0 32px;
    border-bottom: 4px solid #DC2626;
}
.zl-archive-hero-inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
}
.zl-archive-title {
    font-size: 30px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
    color: #fff;
    letter-spacing: -0.01em;
}
.zl-archive-subtitle {
    font-size: 15px;
    margin: 0;
    color: rgba(255,255,255,.86);
    font-weight: 400;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
@media (max-width: 768px) {
    .zl-archive-hero { padding: 24px 0 22px; }
    .zl-archive-title { font-size: 22px; }
    .zl-archive-subtitle { font-size: 13px; }
}

/* ---- Top Search Bar ---- */
.zl-search-bar {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 14px 0;
    position: sticky;
    top: 70px;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.zl-search-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}
.zl-search-form {
    display: flex;
    align-items: center;
    background: #FAFAFA;
    border: 1.5px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    height: 52px;
    transition: border-color .2s, box-shadow .2s;
}
.zl-search-form:focus-within {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
    background: #fff;
}
.zl-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    flex: 1;
    height: 100%;
}
.zl-search-field i {
    color: #9CA3AF;
    font-size: .9rem;
    flex-shrink: 0;
}
.zl-search-field input,
.zl-search-field select {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-family: var(--font-sans);
    font-size: .9rem;
    color: var(--ink-900);
    width: 100% !important;
    height: 100% !important;
    box-shadow: none !important;
    padding: 0 !important;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.zl-search-field input::placeholder { color: #9CA3AF; }
.zl-field-name { flex: 1.4; border-right: 1px solid #E5E7EB; }
.zl-field-select { flex: 1; border-right: 1px solid #E5E7EB; }
.zl-search-divider { display: none; } /* handled by border-right */
.zl-search-btn {
    background: var(--color-accent);
    color: #fff;
    border: none;
    height: 100%;
    padding: 0 28px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: .9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: background .2s;
    border-radius: 0 12px 12px 0;
    flex-shrink: 0;
}
.zl-search-btn:hover { background: #0A0A0A; }
.zl-clear-btn {
    color: var(--gray-mid);
    font-family: var(--font-sans);
    font-size: .85rem;
    text-decoration: none;
    padding: 0 16px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color .2s;
}
.zl-clear-btn:hover { color: var(--color-accent); }

/* ---- Filter bar ---- */
.zl-filter-bar {
    background: #fff;
    border-bottom: 1px solid #E5E7EB;
    padding: 10px 0;
}
.zl-filter-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.zl-count {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -.02em;
}
.zl-filter-chips {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.zl-entries-wrap {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--gray-mid);
}
.zl-entries-sel {
    border: 1.5px solid #E5E7EB !important;
    border-radius: 8px;
    padding: 4px 8px !important;
    font-size: .82rem;
    font-family: var(--font-sans);
    background: #FAFAFA !important;
    color: var(--ink-900);
    outline: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    height: auto !important;
    width: auto !important;
}
.zl-inline-search {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px solid #E5E7EB;
    border-radius: 20px;
    padding: 6px 14px;
    background: #FAFAFA;
    transition: all .2s;
}
.zl-inline-search:focus-within {
    border-color: var(--color-accent);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(220,38,38,.08);
}
.zl-inline-search i { color: #9CA3AF; font-size: .78rem; }
.zl-inline-search input {
    border: none !important;
    background: transparent !important;
    outline: none !important;
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--ink-900);
    width: 160px !important;
    box-shadow: none !important;
    padding: 0 !important;
    height: auto !important;
}
.zl-inline-search input::placeholder { color: #9CA3AF; }

/* ---- Body split ---- */
.zl-body {
    display: flex;
    align-items: flex-start;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    min-height: calc(100vh - 160px);
}

/* ---- List panel ---- */
.zl-list-panel {
    flex: 1;
    min-width: 0;
    padding: 20px 24px;
    overflow-y: auto;
}

/* ---- Provider card — compact chat-style ---- */
.zl-card {
    display: flex; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #E9EAEC;
    border-radius: 12px; padding: 10px 12px;
    margin-bottom: 6px; text-decoration: none; color: inherit;
    transition: box-shadow .18s, border-color .18s;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    cursor: pointer;
}
.zl-card:hover {
    box-shadow: 0 3px 12px rgba(0,0,0,.08);
    border-color: #D1D5DB;
    color: inherit;
}
/* ---- Card inner elements ---- */
.zl-card-info { flex: 1; min-width: 0; }
.zl-card-row1 { display: flex; align-items: center; gap: 5px; margin-bottom: 2px; }
.zl-card-name { font-weight: 700; font-size: 13.5px; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 210px; }
.zl-card-score { font-size: 10px; font-weight: 800; color: #DC2626; background: #FEE2E2; padding: 2px 7px; border-radius: 999px; flex-shrink: 0; }
.zl-card-verified { color: #16A34A; font-size: 12px; flex-shrink: 0; }
.zl-card-meta2 { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6B7280; flex-wrap: wrap; }
.zl-card-meta2 strong { color: #0A0A0A; }
.zl-star { color: #F59E0B; font-size: 12px; }
.zl-reviews { color: #9CA3AF; }
.zl-dot { color: #D1D5DB; }
.zl-card-tags { font-size: 12px; color: #9CA3AF; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Call button */
.zl-call-btn {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    background: #DC2626; color: #fff; border-radius: 10px;
    padding: 8px 12px; flex-shrink: 0; text-decoration: none;
    font-size: 12px; font-weight: 700; min-width: 80px; text-align: center;
    transition: background .15s; box-shadow: 0 2px 6px rgba(220,38,38,.3);
}
.zl-call-btn i { font-size: 13px; margin-bottom: 1px; }
.zl-call-btn:hover { background: #B91C1C; color: #fff; }
.zl-call-btn span { font-size: 12px; white-space: nowrap; }


/* Photo — rounded square */
.zl-card-photo {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    background: #F3F4F6;
    border: 1px solid #E5E7EB;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zl-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.zl-photo-placeholder {
    color: #374151;
    font-size: 1.1rem;
    font-weight: 700;
    background: #E5E7EB;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Hidden state — letter tile hidden when real image present */
.zl-photo-hidden { display: none !important; }
/* Image load error — hide broken img, show letter tile */
.zl-photo-err { display: none !important; }
.zl-verified-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 20px;
    height: 20px;
    background: var(--color-success);
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .55rem;
    color: #fff;
}

/* Card info */
.zl-card-info { flex: 1; min-width: 0; }

.zl-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
}

.zl-card-name {
    font-family: var(--font-sans);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 3px;
    letter-spacing: -.01em;
    line-height: 1.3;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.zl-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--font-sans);
    font-size: .72rem;
    font-weight: 700;
    color: var(--color-success);
    background: rgba(22,163,74,.08);
    border: 1px solid rgba(22,163,74,.2);
    padding: 2px 8px;
    border-radius: 20px;
    letter-spacing: 0;
}

.zl-card-type {
    font-family: var(--font-sans);
    font-size: .82rem;
    color: var(--gray-mid);
    margin: 0;
    line-height: 1.4;
}

.zl-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 700;
    color: var(--color-accent);
    border: 1.5px solid var(--color-accent);
    border-radius: 20px;
    padding: 8px 16px;
    white-space: nowrap;
    text-decoration: none;
    transition: all .2s;
    flex-shrink: 0;
}
.zl-view-btn:hover {
    background: var(--color-accent);
    color: #fff;
}

.zl-card-rating {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    font-family: var(--font-sans);
}
.zl-star { color: var(--color-star); font-size: .88rem; }
.zl-rating-num {
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink-900);
}
.zl-reviews {
    font-size: .82rem;
    color: var(--gray-mid);
}

.zl-card-meta {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.zl-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-sans);
    font-size: .8rem;
    color: var(--gray-mid);
}
.zl-meta-item i { color: #9CA3AF; font-size: .72rem; }
.zl-meta-item a { color: var(--color-accent); text-decoration: none; font-weight: 600; }
.zl-meta-item a:hover { text-decoration: underline; }

/* No results */
.zl-no-results {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--gray-mid);
}
.zl-no-results i { font-size: 2.5rem; color: #E5E7EB; display: block; margin-bottom: 1rem; }
.zl-no-results h3 { font-size: 1.1rem; color: var(--gray-text); margin-bottom: .5rem; }

/* Pagination */
.zl-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0 8px;
    gap: 8px;
    flex-wrap: wrap;
    font-family: var(--font-sans);
    font-size: .8rem;
    color: var(--gray-mid);
    border-top: 1px solid #F3F4F6;
    margin-top: 4px;
}
#zl-pagination {
    display: flex;
    align-items: center;
    gap: 3px;
}
.zl-pg-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border-radius: 7px;
    border: 1.5px solid #E5E7EB;
    background: #fff;
    color: #374151;
    font-family: var(--font-sans);
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    line-height: 1;
}
.zl-pg-btn:hover:not(.disabled) {
    background: #F9FAFB;
    border-color: #D1D5DB;
}
.zl-pg-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}
.zl-pg-btn.zl-pg-arrow {
    min-width: 32px;
    font-size: 1rem;
    color: #6B7280;
    border-color: #E5E7EB;
}
.zl-pg-btn.zl-pg-arrow:hover:not(.disabled) {
    color: #111;
    border-color: #9CA3AF;
    background: #F3F4F6;
}
.zl-pg-btn.disabled { opacity: .35; cursor: default; pointer-events: none; }
.zl-pg-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    color: #9CA3AF;
    font-size: .8rem;
    user-select: none;
}

/* ---- Map panel ---- */
.zl-map-panel {
    width: 420px;
    flex-shrink: 0;
    position: sticky;
    top: 132px;
    height: calc(100vh - 136px);
    border-left: 1px solid #E5E7EB;
    background: #E5E7EB;
    transition: width .3s cubic-bezier(.2,.8,.2,1);
}
#zl-map { width: 100%; height: 100%; }

/* ---- Map toggle button (Zocdoc-style "Expand map") ---- */
.zl-map-toggle {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #fff;
    color: var(--ink-900);
    border: 1px solid rgba(10,37,64,.08);
    border-radius: 999px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(10,37,64,.12), 0 1px 2px rgba(10,37,64,.06);
    transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
    -webkit-font-smoothing: antialiased;
}
.zl-map-toggle:hover  { background: #FAFAFA; box-shadow: 0 4px 14px rgba(10,37,64,.16); }
.zl-map-toggle:active { transform: scale(.97); }
.zl-map-toggle .zlmt-icon { display: inline-flex; }

/* ---- Expanded-map layout (overlays list onto the map) ---- */
.zl-body.zl-map-expanded {
    position: relative;
}
.zl-body.zl-map-expanded .zl-list-panel {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 380px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
    z-index: 4;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(10,37,64,.18), 0 2px 6px rgba(10,37,64,.08);
    padding: 16px 18px;
    -webkit-overflow-scrolling: touch;
}
.zl-body.zl-map-expanded .zl-map-panel {
    width: 100%;
    border-left: none;
}
.zl-body.zl-map-expanded .zl-map-toggle {
    /* When expanded, push the toggle to the right so it doesn't overlap the floating list */
    left: auto;
    right: 16px;
}
.zl-body.zl-map-expanded .zl-card {
    /* Tighten cards in the floating panel */
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 12px;
}
.zl-body.zl-map-expanded .zl-card-photo  { width: 56px; height: 56px; }
.zl-body.zl-map-expanded .zl-pagination-bar { padding: 8px 0 4px; }

/* Card "active" state — fired when user clicks a marker */
.zl-card.is-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(220,38,38,.18), 0 4px 12px rgba(220,38,38,.12);
}

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .zl-map-panel { width: 340px; }
    .zl-body.zl-map-expanded .zl-list-panel { width: 340px; }
}
@media (max-width: 991px) {
    .zl-body { flex-direction: column !important; }
    .zl-list-panel { padding: 16px; order: 2; width: 100%; }
    .zl-map-panel {
        width: 100% !important; height: 280px !important;
        position: static !important; order: 1;
        border-left: none; border-bottom: 1px solid #E5E7EB;
    }
    .zl-search-form { border-radius: 10px; height: auto; flex-wrap: wrap; }
    .zl-search-field { border-right: none !important; border-bottom: 1px solid #E5E7EB; min-height: 48px; }
    .zl-search-btn { border-radius: 0 0 10px 10px; width: 100%; justify-content: center; height: 48px; }
    .zl-field-name, .zl-field-select { flex: none; width: 100%; }
    .zl-body.zl-map-expanded .zl-list-panel { position: static !important; width: 100% !important; }
    .zl-body.zl-map-expanded .zl-map-panel { position: static !important; width: 100% !important; height: 300px !important; }
}
@media (max-width: 640px) {
    /* Card layout on mobile — tighter, horizontal */
    .zl-card { padding: 12px 14px; gap: 12px; align-items: center; }
    /* Photo — rounded square not circle */
    .zl-card-photo { width: 52px; height: 52px; border-radius: 10px; flex-shrink: 0; }
    .zl-photo-placeholder.zl-letter-tile { border-radius: 10px; }
    .zl-view-btn { display: none; }
    .zl-card-name { font-size: .92rem; }
    .zl-filter-chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .zl-list-panel { padding: 12px; }
    /* My Location button — smaller on mobile */
    #zl-map button[style*="right:16px"] { top: 10px; right: 10px; padding: 6px 10px; font-size: 12px; }
}

/* ============================================================
   END LISTINGS PAGE — Zocdoc-style
   ============================================================ */

/* ============================================================
   ABOUT, FAQ, HOW IT WORKS, STATES, CONTACT, LEGAL
   ============================================================ */
/* About */
.about-hero { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 5rem 0 4rem; color: #fff; position: relative; overflow: hidden; }
.about-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 80% 20%,rgba(245,184,0,.1) 0%,transparent 50%); pointer-events: none; }
.about-hero .container { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.about-breadcrumb { font-size: .82rem; color: rgba(255,255,255,.6); margin-bottom: 1.5rem; display: flex; align-items: center; gap: 8px; font-family: var(--font-sans); }
.about-breadcrumb a { color: rgba(255,255,255,.75); text-decoration: none; }
.about-hero h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.75rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0 0 1rem; line-height: 1.15; }
.about-hero p { font-size: 1.1rem; color: rgba(255,255,255,.82); margin: 0; line-height: 1.75; font-family: var(--font-sans); max-width: 680px; }
.about-mission { padding: 5rem 0; background: #fff; }
.about-mission .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.about-label { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); display: block; margin-bottom: 1rem; }
.about-text h2 { font-family: var(--font-sans); font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 900; color: var(--ink-900); letter-spacing: -.03em; margin-bottom: 1.25rem; line-height: 1.2; }
.about-text p { font-size: .975rem; color: var(--gray-text); line-height: 1.8; margin-bottom: 1rem; font-family: var(--font-sans); }
.btn-about-cta { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,var(--color-accent),#B91C1C); color: #fff; padding: 12px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: .9rem; font-family: var(--font-sans); text-decoration: none; margin-top: 1rem; transition: all .2s; box-shadow: 0 4px 16px rgba(220,38,38,.35); }
.btn-about-cta:hover { color: #fff; transform: translateY(-1px); }
.about-stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.about-stat-card { background: var(--gray-bg); border-radius: 16px; padding: 2rem; text-align: center; border: 1px solid var(--gray-border); }
.about-stat-num { font-family: var(--font-sans); font-size: 3rem; font-weight: 900; color: var(--color-accent); display: block; letter-spacing: -.04em; line-height: 1; margin-bottom: .5rem; }
.about-stat-label { font-size: .875rem; color: var(--gray-mid); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-sans); }
.about-how { padding: 5rem 0; background: var(--gray-bg); }
.about-how .container, .about-values .container, .about-cta .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.about-section-header { text-align: center; margin-bottom: 3rem; }
.about-section-header h2 { font-family: var(--font-sans); font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 900; color: var(--ink-900); letter-spacing: -.03em; margin-bottom: .75rem; }
.about-section-header p { color: var(--gray-mid); font-size: 1rem; font-family: var(--font-sans); margin: 0; }
.about-audience-card { background: #fff; border-radius: 20px; padding: 2.5rem; height: 100%; border: 1px solid var(--gray-border); box-shadow: var(--shadow); }
.about-audience-card.featured { border: 2px solid var(--color-accent); box-shadow: 0 0 0 4px rgba(220,38,38,.08),var(--shadow); }
.audience-icon { width: 56px; height: 56px; background: var(--color-accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 1.25rem; }
.about-audience-card h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 900; color: var(--ink-900); margin-bottom: .875rem; }
.about-audience-card p { font-size: .95rem; color: var(--gray-text); line-height: 1.7; margin-bottom: 1.25rem; font-family: var(--font-sans); }
.about-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.about-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: .9rem; color: var(--gray-text); border-bottom: 1px solid #FAFAFA; font-family: var(--font-sans); }
.about-list li:last-child { border-bottom: none; }
.about-list li i { color: var(--color-success); font-size: .82rem; flex-shrink: 0; }
.about-link { color: var(--color-accent); font-weight: 700; font-size: .875rem; text-decoration: none; font-family: var(--font-sans); display: inline-flex; align-items: center; gap: 6px; }
.about-values { padding: 5rem 0; background: #fff; }
.value-card { text-align: center; padding: 2rem 1.5rem; }
.value-icon { width: 64px; height: 64px; background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); border-radius: 18px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin: 0 auto 1.25rem; }
.value-card h4 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; color: var(--ink-900); margin-bottom: .75rem; }
.value-card p { font-size: .9rem; color: var(--gray-mid); line-height: 1.7; margin: 0; font-family: var(--font-sans); }
.about-cta { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 5rem 0; }
.about-cta h2 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin-bottom: 1rem; text-align: center; }
.about-cta p { color: rgba(255,255,255,.8); font-size: 1rem; margin-bottom: 2rem; font-family: var(--font-sans); text-align: center; }
.about-cta-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.btn-about-primary { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,var(--color-star),#E5A800); color: var(--ink-900); padding: 14px 32px; border-radius: var(--radius-pill); font-weight: 800; font-size: 1rem; font-family: var(--font-sans); text-decoration: none; transition: all .2s; box-shadow: 0 8px 28px rgba(245,184,0,.4); }
.btn-about-primary:hover { color: var(--ink-900); transform: translateY(-2px); }
.btn-about-secondary { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); padding: 14px 32px; border-radius: var(--radius-pill); font-weight: 700; font-size: 1rem; font-family: var(--font-sans); text-decoration: none; border: 1px solid rgba(255,255,255,.25); transition: all .2s; }
.btn-about-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }

/* FAQ */
.faq-hero { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 4rem 0 3rem; text-align: center; }
.faq-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.faq-hero h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0 0 1rem; }
.faq-hero p { color: rgba(255,255,255,.8); font-size: 1rem; margin: 0 0 1.5rem; font-family: var(--font-sans); max-width: 600px; margin-left: auto; margin-right: auto; }
.faq-hero-stats { display: flex; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.faq-hero-stats span { color: rgba(255,255,255,.75); font-size: .875rem; font-family: var(--font-sans); display: flex; align-items: center; gap: 8px; }
.faq-hero-stats span i { color: var(--color-star); }
.faq-content-section { padding: 4rem 0 5rem; background: var(--gray-bg); }
.faq-content-section .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.faq-sidebar { position: sticky; top: 90px; }
.faq-sidebar h4 { font-family: var(--font-sans); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #9CA3AF; margin: 0 0 1rem; }
.faq-nav { list-style: none; padding: 0; margin: 0 0 2rem; }
.faq-nav li { margin-bottom: 4px; }
.faq-nav li a { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; color: var(--gray-text); text-decoration: none; font-size: .875rem; font-weight: 600; font-family: var(--font-sans); transition: all .15s; }
.faq-nav li a:hover { background: #fff; color: var(--color-accent); }
.faq-contact-box { background: #fff; border-radius: 14px; padding: 1.5rem; border: 1px solid var(--gray-border); text-align: center; }
.faq-contact-title { font-family: var(--font-sans); font-size: .875rem; font-weight: 800; color: var(--ink-900); margin: 0 0 1rem; }
.btn-faq-contact { display: block; background: var(--color-accent); color: #fff; padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: .875rem; font-family: var(--font-sans); text-decoration: none; margin-bottom: .75rem; transition: all .2s; }
.btn-faq-contact:hover { background: #0A0A0A; color: #fff; }
.faq-phone { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--color-accent); text-decoration: none; font-size: .875rem; font-weight: 600; font-family: var(--font-sans); }
.faq-group { margin-bottom: 2.5rem; }
.faq-group-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--gray-border); }
.faq-group-icon { width: 48px; height: 48px; background: var(--color-accent); border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #fff; flex-shrink: 0; }
.faq-group-icon.featured { background: linear-gradient(135deg,var(--color-accent),#B91C1C); }
.faq-group-header h2 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 900; color: var(--ink-900); margin: 0 0 2px; letter-spacing: -.02em; }
.faq-group-header p { font-size: .875rem; color: var(--gray-mid); margin: 0; font-family: var(--font-sans); }
.faq-section .faq-item, .faq-item { background: #fff; border-radius: 12px; border: 1px solid var(--gray-border); margin-bottom: 8px; overflow: hidden; cursor: pointer; transition: all .2s; }
.faq-item:hover { border-color: #E5E7EB; }
.faq-item.open { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(220,38,38,.08); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: 1.125rem 1.5rem; gap: 1rem; }
.faq-question span { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--ink-900); line-height: 1.4; }
.faq-item.open .faq-question span { color: var(--color-accent); }
.faq-icon { width: 28px; height: 28px; background: var(--gray-bg); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.faq-icon i { font-size: .7rem; color: var(--gray-mid); transition: transform .25s; }
.faq-item.open .faq-icon { background: var(--color-accent); }
.faq-item.open .faq-icon i { color: #fff; transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.faq-item.open .faq-answer { max-height: 400px; }
.faq-answer p { padding: 0 1.5rem 1.25rem; margin: 0; font-size: .9rem; color: var(--gray-text); line-height: 1.75; font-family: var(--font-sans); }
.faq-answer a { color: var(--color-accent); text-decoration: none; font-weight: 600; }

/* How It Works */
.hiw-hero { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 4rem 0; text-align: center; }
.hiw-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hiw-hero-inner { max-width: 680px; margin: 0 auto; }
.hiw-label { font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--color-star); display: block; margin-bottom: 1rem; }
.hiw-hero h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.75rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0 0 1rem; }
.hiw-hero p { color: rgba(255,255,255,.8); font-size: 1rem; font-family: var(--font-sans); margin: 0; line-height: 1.75; }
.hiw-section { padding: 5rem 0; background: #fff; }
.hiw-section.alt { background: var(--gray-bg); }
.hiw-section .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hiw-section-tag { display: inline-block; padding: 5px 14px; border-radius: 20px; font-family: var(--font-sans); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1.25rem; }
.hiw-section-tag.homeowner { background: rgba(220,38,38,.08); color: var(--color-accent); }
.hiw-section-tag.business { background: rgba(220,38,38,.08); color: var(--color-accent); }
.hiw-section-title { font-family: var(--font-sans); font-size: clamp(1.5rem,2.5vw,2.25rem); font-weight: 900; color: var(--ink-900); letter-spacing: -.03em; margin: 0 0 .75rem; }
.hiw-section-sub { color: var(--gray-mid); font-size: 1rem; font-family: var(--font-sans); margin: 0 0 3rem; }
.hiw-steps-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.5rem; margin-bottom: 3rem; }
.hiw-step-card { background: #fff; border-radius: 20px; padding: 2.25rem 2rem; border: 1px solid var(--gray-border); box-shadow: var(--shadow); position: relative; transition: all .25s; }
.hiw-section.alt .hiw-step-card { background: #fff; }
.hiw-step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: #E5E7EB; }
.hiw-step-num { position: absolute; top: -14px; left: 24px; width: 32px; height: 32px; background: var(--color-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-sans); font-size: .875rem; font-weight: 900; box-shadow: 0 4px 12px rgba(220,38,38,.35); }
.hiw-step-num.biz { background: linear-gradient(135deg,var(--color-accent),#B91C1C); box-shadow: 0 4px 12px rgba(220,38,38,.35); }
.hiw-step-icon { width: 56px; height: 56px; background: #F3F4F6; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--color-accent); margin: 0 0 1.25rem; }
.hiw-step-icon.biz { background: #FFF0F0; color: var(--color-accent); }
.hiw-step-card h3 { font-family: var(--font-sans); font-size: 1.05rem; font-weight: 800; color: var(--ink-900); margin: 0 0 .75rem; }
.hiw-step-card p { font-size: .9rem; color: var(--gray-text); line-height: 1.75; margin: 0; font-family: var(--font-sans); }
.hiw-cta-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-hiw-primary { display: inline-flex; align-items: center; gap: 10px; background: var(--color-accent); color: #fff; padding: 13px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: .95rem; font-family: var(--font-sans); text-decoration: none; transition: all .2s; }
.btn-hiw-primary:hover { background: #0A0A0A; color: #fff; }
.btn-hiw-biz { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(135deg,var(--color-accent),#B91C1C); color: #fff; padding: 13px 28px; border-radius: var(--radius-pill); font-weight: 700; font-size: .95rem; font-family: var(--font-sans); text-decoration: none; box-shadow: 0 6px 20px rgba(220,38,38,.35); transition: all .2s; }
.btn-hiw-biz:hover { color: #fff; transform: translateY(-1px); }
.btn-hiw-secondary { display: inline-flex; align-items: center; gap: 10px; background: transparent; color: var(--gray-text); padding: 13px 24px; border-radius: var(--radius-pill); font-weight: 600; font-size: .95rem; font-family: var(--font-sans); text-decoration: none; border: 1.5px solid var(--gray-border); transition: all .2s; }
.btn-hiw-secondary:hover { border-color: var(--color-accent); color: var(--color-accent); }
.hiw-divider { background: var(--ink-900); padding: 2rem 0; }
.hiw-divider .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hiw-divider-inner { display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; }
.hiw-divider-stat { color: rgba(255,255,255,.8); font-size: .9rem; font-family: var(--font-sans); }
.hiw-divider-stat span { font-family: var(--font-sans); font-weight: 900; color: var(--color-star); font-size: 1.1rem; margin-right: 5px; }
.hiw-divider-dot { width: 4px; height: 4px; background: rgba(255,255,255,.2); border-radius: 50%; }
.hiw-trust { background: #fff; border-top: 1px solid var(--gray-border); padding: 3rem 0; }
.hiw-trust .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hiw-trust-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; }
.hiw-trust-item { display: flex; align-items: flex-start; gap: 1rem; }
.hiw-trust-item > i { font-size: 1.5rem; color: var(--color-accent); flex-shrink: 0; margin-top: 2px; }
.hiw-trust-item strong { display: block; font-family: var(--font-sans); font-size: .9rem; font-weight: 800; color: var(--ink-900); margin-bottom: 2px; }
.hiw-trust-item span { font-size: .82rem; color: var(--gray-mid); font-family: var(--font-sans); line-height: 1.5; }

/* States */
.states-hero-section { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 4rem 0 0; text-align: center; }
.states-hero-section .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.states-hero-section h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0 0 .75rem; }
.states-hero-section p { color: rgba(255,255,255,.8); font-size: 1rem; margin: 0 0 2rem; font-family: var(--font-sans); }
.states-search-wrap { background: #fff; border-radius: 14px 14px 0 0; padding: 1.5rem 2rem; margin-top: 1.5rem; position: relative; display: flex; align-items: center; gap: 12px; border: 1px solid var(--gray-border); }
.states-search-icon { color: #9CA3AF; font-size: 1rem; flex-shrink: 0; }
.states-search-wrap input { flex: 1; border: none; font-size: 1rem; color: var(--gray-text); font-family: var(--font-sans); outline: none; background: transparent; box-shadow: none; }
.states-grid-section { background: #fff; padding: 2rem 0 5rem; }
.states-grid-section .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.states-count { font-size: .875rem; color: var(--gray-mid); font-family: var(--font-sans); margin-bottom: 1.75rem; }
.states-count span { font-weight: 700; color: var(--color-accent); }
.states-alpha-grid { columns: 3; column-gap: 2rem; }
.state-letter-group { break-inside: avoid; margin-bottom: 1.5rem; }
.state-letter { font-family: var(--font-sans); font-size: 1rem; font-weight: 900; color: var(--ink-900); padding-bottom: 6px; border-bottom: 2px solid var(--gray-border); margin-bottom: 8px; letter-spacing: .05em; }
.state-items { display: flex; flex-direction: column; gap: 2px; }
.state-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; border-radius: 8px; text-decoration: none; transition: all .15s; }
.state-item:hover { background: #F3F4F6; }
.state-name { font-size: .9rem; color: var(--gray-text); font-family: var(--font-sans); font-weight: 500; }
.state-item:hover .state-name { color: var(--color-accent); }
.state-count { background: var(--red-50); color: var(--color-accent); padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 700; font-family: var(--font-sans); }
.states-cta { border-top: 1px solid var(--gray-border); margin-top: 3rem; padding-top: 2rem; text-align: center; }
.states-cta p { color: var(--gray-mid); font-size: .9rem; font-family: var(--font-sans); margin-bottom: 1rem; }
.btn-states-search { display: inline-flex; align-items: center; gap: 8px; background: var(--color-accent); color: #fff; padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 700; font-size: .875rem; font-family: var(--font-sans); text-decoration: none; margin: 0 6px; transition: all .2s; }
.btn-states-search:hover { background: #0A0A0A; color: #fff; }
.btn-states-list { display: inline-flex; align-items: center; gap: 8px; background: transparent; color: var(--color-accent); padding: 12px 24px; border-radius: var(--radius-pill); font-weight: 700; font-size: .875rem; font-family: var(--font-sans); text
-decoration: none; border: 1.5px solid var(--color-accent); margin: 0 6px; }
.btn-states-list:hover { background: var(--color-accent); color: #fff; }

/* Contact */
.contact-hero { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)); padding: 4rem 0; text-align: center; }
.contact-hero .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.contact-hero h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0 0 .75rem; }
.contact-hero p { color: rgba(255,255,255,.8); font-size: 1rem; font-family: var(--font-sans); margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.7; }
.contact-content { padding: 4rem 0 5rem; background: var(--gray-bg); }
.contact-content .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.contact-info-block { background: #fff; border-radius: 16px; padding: 2rem; border: 1px solid var(--gray-border); box-shadow: var(--shadow); margin-bottom: 1.5rem; }
.contact-info-block h3 { font-family: var(--font-sans); font-size: 1.1rem; font-weight: 800; color: var(--ink-900); margin: 0 0 1.5rem; }
.contact-info-item { display: flex; gap: 1rem; align-items: flex-start; padding: 1rem 0; border-bottom: 1px solid #FAFAFA; }
.contact-info-item:last-child { border-bottom: none; }
.contact-info-icon { width: 40px; height: 40px; background: #F3F4F6; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--color-accent); font-size: .95rem; flex-shrink: 0; }
.contact-info-item strong { display: block; font-family: var(--font-sans); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; color: #9CA3AF; margin-bottom: 3px; }
.contact-info-item span, .contact-info-item a { font-size: .9rem; color: var(--gray-text); font-family: var(--font-sans); text-decoration: none; line-height: 1.5; }
.contact-info-item a:hover { color: var(--color-accent); }
.contact-quick-links { background: #fff; border-radius: 16px; padding: 1.75rem; border: 1px solid var(--gray-border); }
.contact-quick-links h4 { font-family: var(--font-sans); font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: #9CA3AF; margin: 0 0 1rem; }
.contact-quick-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--gray-text); font-size: .875rem; font-weight: 600; font-family: var(--font-sans); transition: all .15s; margin-bottom: 4px; }
.contact-quick-link:hover { background: #F3F4F6; color: var(--color-accent); }
.contact-quick-link i { color: var(--color-accent); font-size: .82rem; width: 14px; }
.contact-form-wrap { background: #fff; border-radius: 20px; padding: 2.5rem; border: 1px solid var(--gray-border); box-shadow: var(--shadow); }
.contact-form-wrap h3 { font-family: var(--font-sans); font-size: 1.25rem; font-weight: 900; color: var(--ink-900); letter-spacing: -.02em; margin: 0 0 .5rem; }
.contact-form-wrap p { color: var(--gray-mid); font-size: .9rem; margin: 0 0 1.75rem; font-family: var(--font-sans); }

/* Legal pages */
.page-template-fullwidth-php .innerBanner { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)) !important; padding: 3rem 0 !important; text-align: center !important; }
.page-template-fullwidth-php .innerBannerHeading h1 { font-family: var(--font-sans); font-size: clamp(1.75rem,3vw,2.5rem); font-weight: 900; color: #fff; letter-spacing: -.03em; margin: 0; }
.page-template-fullwidth-php #content { padding: 0 !important; }
.page-template-fullwidth-php .content-area { max-width: 100% !important; width: 100% !important; padding: 0 !important; }
.page-template-fullwidth-php #secondary { display: none !important; }
.page-template-fullwidth-php .site-main { padding: 0 !important; }
.page-template-fullwidth-php .entry-content { max-width: 860px; margin: 0 auto; padding: 3rem 24px 5rem; font-family: var(--font-sans); }
.page-template-fullwidth-php .entry-header { display: none !important; }
.page-template-fullwidth-php .entry-content h1,.page-template-fullwidth-php .entry-content h2,.page-template-fullwidth-php .entry-content h3 { font-family: var(--font-sans); font-weight: 800; color: var(--ink-900); letter-spacing: -.02em; margin-top: 2rem; margin-bottom: .875rem; }
.page-template-fullwidth-php .entry-content p { color: var(--gray-text); font-size: .95rem; line-height: 1.8; margin-bottom: 1rem; }
.page-template-fullwidth-php .entry-content ul,.page-template-fullwidth-php .entry-content ol { color: var(--gray-text); font-size: .95rem; line-height: 1.8; padding-left: 1.5rem; margin-bottom: 1rem; }
.page-template-fullwidth-php .entry-content li { margin-bottom: .5rem; }
.page-template-fullwidth-php .entry-content a { color: var(--color-accent); }

/* Taxonomy / Category */
.tax-business_category .innerBanner,.tax-state .innerBanner,.tax-cities .innerBanner { background: linear-gradient(135deg,var(--ink-900),var(--color-accent)) !important; }
.back-to-search { display: inline-flex; align-items: center; gap: 6px; color: var(--color-accent); font-size: .875rem; font-weight: 600; text-decoration: none; margin-bottom: 1.25rem; font-family: var(--font-sans); }
.back-to-search::before { content: "←"; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: linear-gradient(180deg,#0A0A0A,#0a0a0a); color: rgba(255,255,255,.8); }
.footer-main { padding: 4rem 0 3rem; border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-main .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.footer-logo-img { height: 50px; width: auto; margin-bottom: 1.25rem; display: block; }
.footer-desc { color: rgba(255,255,255,.65); line-height: 1.7; font-size: .875rem; margin-bottom: 1.25rem; font-family: var(--font-sans); }
.footer-badges { display: flex; gap: .625rem; flex-wrap: wrap; }
.footer-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.75); padding: 4px 14px; border-radius: 20px; font-size: .78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-sans); }
.footer-badge i { color: var(--color-star); }
.footer-heading { font-family: var(--font-sans); font-size: .78rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.25rem; padding-bottom: .75rem; border-bottom: 2px solid rgba(255,255,255,.1); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .625rem; }
.footer-links li a { color: rgba(255,255,255,.65); text-decoration: none; font-size: .875rem; transition: color .2s; font-family: var(--font-sans); }
.footer-links li a:hover { color: var(--color-star); }
.footer-contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .75rem; color: rgba(255,255,255,.65); font-size: .875rem; font-family: var(--font-sans); }
.footer-contact-list li i { color: var(--color-accent); font-size: .9rem; margin-top: 2px; flex-shrink: 0; }
.footer-contact-list li a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-contact-list li a:hover { color: var(--color-star); }
.social-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.5); margin-bottom: .75rem; font-family: var(--font-sans); }
.footer-social { display: flex; gap: .5rem; }
.fsoc-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.7); text-decoration: none; font-size: .85rem; transition: all .2s; }
.fsoc-link:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; transform: translateY(-2px); }
.footer-cta-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-star); font-weight: 700; margin-bottom: .5rem; font-family: var(--font-sans); }
.footer-cta-title { font-family: var(--font-sans); font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 1.25rem; line-height: 1.3; }
.btn-footer-signup { display: block; background: linear-gradient(135deg,var(--color-accent),#B91C1C); color: #fff; text-decoration: none; padding: .75rem 1rem; border-radius: 8px; font-weight: 700; font-size: .875rem; text-align: center; margin-bottom: .75rem; transition: all .2s; font-family: var(--font-sans); }
.btn-footer-signup:hover { color: #fff; transform: translateY(-1px); }
.footer-cta-note { font-size: .75rem; color: rgba(255,255,255,.4); text-align: center; margin: 0; font-family: var(--font-sans); }
.footer-bottom-bar .container { max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.footer-copy { color: rgba(255,255,255,.45); font-size: .82rem; margin: 0; font-family: var(--font-sans); }
.footer-copy a { color: rgba(255,255,255,.65); text-decoration: none; }
.footer-copy a:hover { color: var(--color-star); }
.footer-legal-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; }
.footer-legal-links li a { color: rgba(255,255,255,.45); text-decoration: none; font-size: .82rem; transition: color .2s; font-family: var(--font-sans); }
.footer-legal-links li a:hover { color: var(--color-star); }
.btt-btn { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: var(--color-accent); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 16px rgba(220,38,38,.45); opacity: 0; visibility: hidden; transition: all .3s; z-index: 999; font-size: .85rem; }
.btt-btn.show { opacity: 1; visibility: visible; }
.btt-btn:hover { background: #0A0A0A; color: #fff; transform: translateY(-3px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1100px) {
    .listings-split { flex-direction: column !important; }
    .listings-split-left { max-width: 100% !important; }
    .listings-split-right { width: 100% !important; height: 350px !important; position: relative !important; top: 0 !important; }
    .blog-post-layout { grid-template-columns: 1fr; }
    .blog-post-sidebar { position: relative; top: 0; }
    .home-biz-inner { flex-direction: column; gap: 3rem; }
    .sp-checkout-inner { flex-direction: column; }
    .sp-checkout-card { width: 100%; }
    .login-layout { flex-direction: column; }
    .login-brand-panel { width: 100%; padding: 2.5rem 1.5rem; }
    .login-brand-features { display: none; }
}
@media(max-width:991px) {
    .pfusa-navlinks, .pfusa-nav-cta { display: none !important; }
    .pfusa-mobile-toggle { display: flex !important; }
    .home-cat-grid { grid-template-columns: repeat(2,1fr); }
    .blog-archive-grid { grid-template-columns: repeat(2,1fr); }
    .blog-card-featured { grid-column: 1; grid-template-columns: 1fr; }
    .sp-problem-grid { grid-template-columns: 1fr; }
    .sp-pricing-cards { grid-template-columns: 1fr; max-width: 480px; }
    .sp-testimonials-grid { grid-template-columns: 1fr; }
    .sp-hiw-steps { flex-direction: column; }
    .sp-hiw-arrow { transform: rotate(90deg); margin: 0 auto; }
    .hiw-steps-grid { grid-template-columns: 1fr; }
    .hiw-trust-grid { grid-template-columns: repeat(2,1fr); }
    .about-stats-grid { grid-template-columns: 1fr 1fr; }
    .home-how-steps { grid-template-columns: 1fr; }
    .home-biz-stats { grid-template-columns: 1fr 1fr; }
}
@media(max-width:768px) {
    .pfusa-brand img { height: 40px; }
    .home-hero { padding: 3rem 0 2.5rem; min-height: auto; }
    .home-hero h1 { font-size: 1.9rem; }
    /* Mobile: stack the search sections vertically; the button becomes full-width at the bottom */
    .home-search-bar { flex-direction: column; border-radius: 14px; min-height: 0; }
    .home-search-field { border-bottom: 1px solid var(--color-border); padding: 12px 16px !important; }
    .home-search-field.location { border-bottom: none; }
    .home-search-divider { display: none; }
    
    .home-search-label { font-size: 12px; }
    .home-search-field input { font-size: 16px; }
    .home-trust-item { padding: .5rem 1rem; }
    .home-trust-sep { display: none; }
    .home-biz-ctas { flex-direction: column; }
    .btn-biz-primary, .btn-biz-secondary { justify-content: center; }
    .blog-archive-grid { grid-template-columns: 1fr; }
    .blog-related-grid { grid-template-columns: 1fr; }
    .sp-hero h1 { font-size: 1.75rem; }
    .sp-hero-ctas { flex-direction: column; align-items: center; }
    .sp-btn-primary, .sp-btn-secondary { width: 100%; justify-content: center; }
    .sp-stats-inner { gap: .5rem; }
    .sp-stat-sep { display: none; }
    .sp-stat { padding: .5rem 1rem; }
    .sp-row { flex-direction: column; gap: 0; }
    .about-cta-buttons { flex-direction: column; align-items: center; }
    .btn-about-primary, .btn-about-secondary { width: 100%; justify-content: center; }
    .hiw-cta-row, 
    .btn-hiw-primary, .btn-hiw-biz, .btn-hiw-secondary, .btn-home-search { width: 100%; justify-content: center; }
    .states-alpha-grid { columns: 2; }
    .footer-legal-links { justify-content: center; }
    .footer-copy { text-align: center; }
}



/* ============================================================
   FOOTER (moved out of inline <style> in footer.php for caching)
   ============================================================ */
.site-footer { background: linear-gradient(180deg, #0A0A0A 0%, #0a0a0a 100%); color: rgba(255,255,255,0.8); font-size: 0.9rem; }
.footer-main { padding: 4rem 0 3rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-logo-img { height: 50px; width: auto; margin-bottom: 1.25rem; display: block; }
.footer-desc { color: rgba(255,255,255,0.65); line-height: 1.7; font-size: 0.875rem; margin-bottom: 1.25rem; }
.footer-badges { display: flex; gap: 0.625rem; flex-wrap: wrap; }
.footer-badge { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.75); padding: 0.3rem 0.75rem; border-radius: 20px; font-size: 0.78rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.footer-badge i { color: #F59E0B; }
.footer-heading { font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 800; color: #fff; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid rgba(255,255,255,0.1); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.625rem; }
.footer-links li a { color: rgba(255,255,255,0.65); text-decoration: none; transition: color 0.2s ease; font-size: 0.875rem; }
.footer-links li a:hover { color: #F59E0B; }
.footer-contact-list { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.footer-contact-list li { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; color: rgba(255,255,255,0.65); font-size: 0.875rem; }
.footer-contact-list li i { color: #DC2626; font-size: 0.9rem; margin-top: 2px; flex-shrink: 0; }
.footer-contact-list li a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-contact-list li a:hover { color: #F59E0B; }
.social-label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.5); margin-bottom: 0.75rem; }
.footer-social { display: flex; gap: 0.5rem; }
.fsoc-link { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); text-decoration: none; font-size: 0.85rem; transition: all 0.2s ease; }
.fsoc-link:hover { background: #DC2626; border-color: #DC2626; color: #fff; transform: translateY(-2px); }
.footer-cta-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: #F59E0B; font-weight: 700; margin-bottom: 0.5rem; }
.footer-cta-title { font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 800; color: #fff; margin-bottom: 1.25rem; line-height: 1.3; }
.btn-footer-signup { display: block; background: linear-gradient(135deg, #DC2626, #B91C1C); color: #fff; text-decoration: none; padding: 0.75rem 1rem; border-radius: 8px; font-weight: 700; font-size: 0.875rem; text-align: center; margin-bottom: 0.75rem; transition: all 0.2s ease; }
.btn-footer-signup:hover { background: linear-gradient(135deg, #B91C1C, #B91C1C); color: #fff; transform: translateY(-1px); }
.footer-cta-note { font-size: 0.75rem; color: rgba(255,255,255,0.4); text-align: center; margin: 0; }
.footer-copy { color: rgba(255,255,255,0.45); font-size: 0.82rem; margin: 0; }
.footer-copy a { color: rgba(255,255,255,0.65); text-decoration: none; }
.footer-copy a:hover { color: #F59E0B; }
.footer-legal-links { list-style: none; padding: 0; margin: 0; display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; }
.footer-legal-links li a { color: rgba(255,255,255,0.45); text-decoration: none; font-size: 0.82rem; transition: color 0.2s ease; }
.footer-legal-links li a:hover { color: #F59E0B; }
.btt-btn { position: fixed; bottom: 28px; right: 28px; width: 44px; height: 44px; background: #DC2626; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 16px rgba(220,38,38,0.45); opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 999; font-size: 0.85rem; }
.btt-btn.show { opacity: 1; visibility: visible; }
.btt-btn:hover { background: #08437A; color: #fff; transform: translateY(-3px); }
@media (max-width: 768px) {
    .footer-main { padding: 3rem 0 2rem; }
    .footer-legal-links { justify-content: center; }
    .footer-copy { text-align: center; }
}

/* ============================================================
   SINGLE BUSINESS PROFILE (spv2-*)
   Moved out of inline <style> in single-business.php for caching.
   ============================================================ */
.spv2-page { font-family: var(--font-sans); background: var(--color-bg-subtle); }

/* Breadcrumb */
.spv2-breadcrumb { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 10px 0; font-size: .82rem; overflow: hidden; }
.spv2-breadcrumb nav { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 4px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; white-space: nowrap; }
.spv2-breadcrumb nav::-webkit-scrollbar { display: none; }
.spv2-breadcrumb a { color: #DC2626; text-decoration: none; flex-shrink: 0; }
.spv2-breadcrumb a:hover { text-decoration: underline; }
.spv2-breadcrumb span.sep { color: #9CA3AF; flex-shrink: 0; }
.spv2-breadcrumb span:last-child { color: #374151; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
@media (max-width: 640px) {
    .spv2-breadcrumb span:last-child { max-width: 150px; }
}

/* Hero */
.spv2-hero { background: linear-gradient(135deg, #0A0A0A 0%, var(--ink-900) 100%); padding: 32px 0 36px; }
.spv2-hero-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; gap: 40px; align-items: flex-start; }
.spv2-hero-left { flex: 1; min-width: 0; }
.spv2-hero-right { width: 360px; flex-shrink: 0; }

/* Name row */
.spv2-name-row { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 12px; }
.spv2-logo { width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: #1E3A5F; border: 2px solid rgba(255,255,255,.15); flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.spv2-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spv2-logo-fallback { color: rgba(255,255,255,.5); font-size: 1.6rem; }
.spv2-name-meta h1 { font-family: 'Inter', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: #fff; margin: 0 0 8px; letter-spacing: -.03em; }
.spv2-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.spv2-badge { font-size: .75rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.spv2-badge-verified { background: rgba(22,163,74,.2); color: #4ADE80; border: 1px solid rgba(74,222,128,.3); }
.spv2-badge-type { background: rgba(255,255,255,.12); color: rgba(255,255,255,.85); border: 1px solid rgba(255,255,255,.2); }

/* Rating row in hero */
.spv2-rating-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; }
.spv2-rating-star { color: #F59E0B; font-size: .9rem; }
.spv2-rating-num { font-weight: 700; color: #fff; font-size: 1rem; }
.spv2-rating-count { color: rgba(255,255,255,.65); font-size: .85rem; }
.spv2-rating-link { color: #60A5FA; font-size: .8rem; text-decoration: none; display: flex; align-items: center; gap: 4px; }

/* Address */
.spv2-address { color: rgba(255,255,255,.75); font-size: .88rem; display: flex; align-items: flex-start; gap: 8px; margin-bottom: 16px; }
.spv2-address i { color: #F59E0B; margin-top: 2px; flex-shrink: 0; }

/* CTAs */
.spv2-ctas { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spv2-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 50px; font-family: 'Inter', sans-serif; font-weight: 700; font-size: .88rem; text-decoration: none; transition: all .2s; cursor: pointer; border: none; }
.spv2-btn-primary { background: #DC2626; color: #fff; font-size: .95rem; padding: 12px 24px; }
.spv2-btn-primary:hover { background: #B91C1C; color: #fff; }
.spv2-btn-outline { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.spv2-btn-outline:hover { background: rgba(255,255,255,.2); color: #fff; }

/* Tags */
.spv2-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.spv2-tag { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.8); font-size: .75rem; padding: 3px 10px; border-radius: 20px; }

/* Map in hero */
.spv2-map-wrap { border-radius: 14px; overflow: hidden; height: 280px; border: 2px solid rgba(255,255,255,.1); }
.spv2-map-wrap #sp-map { width: 100%; height: 100%; }

/* Body */
.spv2-body { max-width: 1200px; margin: 0 auto; padding: 28px 24px 48px; display: flex; gap: 24px; align-items: flex-start; }
.spv2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.spv2-sidebar { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; }

/* Cards */
.spv2-card { background: #fff; border-radius: 14px; border: 1px solid #E5E7EB; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.spv2-card-header { padding: 14px 20px 12px; border-bottom: 1px solid #F3F4F6; display: flex; align-items: center; gap: 8px; }
.spv2-card-header h3 { font-family: 'Inter', sans-serif; font-size: .9rem; font-weight: 800; color: #0A0A0A; margin: 0; letter-spacing: -.01em; }
.spv2-card-header i { color: #DC2626; font-size: .85rem; }
.spv2-card-body { padding: 16px 20px; }
.spv2-card-body--tight-rows { padding: 8px 20px; }
.spv2-card-body--contact { padding: 4px 20px 8px; }

/* Hours */
.spv2-hours-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #FAFAFA; font-size: .88rem; }
.spv2-hours-row:last-child { border-bottom: none; }
.spv2-hours-day { color: #1F2937; font-weight: 600; }
.spv2-hours-time { color: #6B7280; }
.spv2-hours-row.closed .spv2-hours-time { color: #DC2626; }

/* Highlights */
.spv2-highlights { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.spv2-highlights li { display: flex; align-items: center; gap: 8px; font-size: .88rem; color: #1F2937; }
.spv2-highlights li i { color: #15803D; font-size: .8rem; }

/* Gallery */
.spv2-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.spv2-gallery-item img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; }

/* Empty state */
.spv2-empty { color: #9CA3AF; font-size: .88rem; font-style: italic; margin: 0; }
.spv2-claim-prompt { text-align: center; padding: 12px 0; }
.spv2-claim-prompt i { color: #9CA3AF; font-size: 1.5rem; margin-bottom: 8px; display: block; }
.spv2-claim-prompt p { color: #6B7280; margin: 0 0 12px; }

/* Sidebar — Rating */
.spv2-rating-big { text-align: center; padding: 6px 0 10px; }
.spv2-rating-num-big { font-family: 'Inter', sans-serif; font-size: 2.8rem; font-weight: 900; color: #0A0A0A; line-height: 1; }
.spv2-stars-row { display: flex; justify-content: center; gap: 3px; margin: 6px 0 4px; }
.spv2-stars-row i { color: #F59E0B; font-size: 1.1rem; }
.spv2-stars-row i.empty { color: #E5E7EB; }
.spv2-rating-label { font-size: .8rem; color: #6B7280; margin: 0 0 12px; }
.spv2-reviews-btn { display: flex; align-items: center; justify-content: center; gap: 6px; background: #DC2626; color: #fff; padding: 10px 16px; border-radius: 50px; font-weight: 700; font-size: .82rem; text-decoration: none; transition: background .2s; }
.spv2-reviews-btn:hover { background: #0A0A0A; color: #fff; }

/* Sidebar — Contact */
.spv2-contact-list { display: flex; flex-direction: column; }
.spv2-contact-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid #F3F4F6; font-size: .86rem; color: #1F2937; text-decoration: none; }
.spv2-contact-item:last-child { border-bottom: none; }
.spv2-contact-item i { color: #DC2626; font-size: .85rem; margin-top: 2px; flex-shrink: 0; width: 14px; }
.spv2-contact-item:hover { color: #DC2626; }

/* Sidebar — Directions CTA */
.spv2-dir-card { display: flex; align-items: center; gap: 12px; background: #DC2626; color: #fff; padding: 14px 18px; border-radius: 12px; text-decoration: none; font-weight: 700; font-size: .9rem; transition: background .2s; }
.spv2-dir-card:hover { background: #0A0A0A; color: #fff; }
.spv2-dir-card i.arrow { margin-left: auto; }
.spv2-dir-icon { font-size: 1.1rem; }

/* Back bar */
.spv2-back-bar { max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; }
.spv2-back-link { display: inline-flex; align-items: center; gap: 8px; color: #DC2626; font-weight: 600; font-size: .88rem; text-decoration: none; padding: 8px 16px; border: 1px solid #E5E7EB; border-radius: 8px; background: #fff; transition: all .2s; }
.spv2-back-link:hover { background: #F0F6FF; color: #0A0A0A; }

/* spv2 responsive */
@media (max-width: 991px) {
    .spv2-hero-inner { flex-direction: column; gap: 24px; }
    .spv2-hero-right { width: 100%; }
    .spv2-map-wrap { height: 220px; }
    .spv2-body { flex-direction: column; }
    .spv2-sidebar { width: 100%; flex-direction: row; flex-wrap: wrap; }
    .spv2-sidebar .spv2-card,
    .spv2-sidebar .spv2-dir-card { flex: 1 1 260px; }
}
@media (max-width: 600px) {
    .spv2-hero { padding: 20px 0 24px; }
    .spv2-hero-inner { padding: 0 16px; gap: 16px; }
    .spv2-body { padding: 16px 16px 40px; }
    .spv2-ctas { flex-direction: column; }
    .spv2-btn { width: 100%; justify-content: center; }
    .spv2-gallery { grid-template-columns: repeat(2, 1fr); }
    .spv2-sidebar { flex-direction: column; }
}

/* ============================================================
   BROWSE LISTINGS — distance fallback banner + distance pill
   ============================================================ */
.zl-fallback-banner {
    background: linear-gradient(90deg, #FEE2E2 0%, #FEE2E2 100%);
    border-bottom: 1px solid #F59E0B;
    color: #0A0A0A;
    padding: 12px 0;
    font-family: 'Inter', sans-serif;
}
.zl-fallback-inner {
    max-width: 1400px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 12px;
}
.zl-fallback-inner > i {
    font-size: 1.1rem; color: #B45309; flex-shrink: 0;
}
.zl-fallback-inner div { font-size: .92rem; line-height: 1.5; }
.zl-fallback-inner strong { color: #0A0A0A; font-weight: 700; margin-right: 4px; }

.zl-distance-badge {
    display: inline-flex; align-items: center; gap: 5px;
    background: #FEE2E2; color: #DC2626;
    font-size: .72rem; font-weight: 700;
    padding: 3px 10px; border-radius: 999px;
    margin-left: 8px; vertical-align: middle;
    border: 1px solid #E5E7EB;
}
.zl-distance-badge i { font-size: .68rem; }

/* Make the new free-text location input look right inside the search bar */
.zl-field-name input[name="search_location"]::placeholder { color: #9CA3AF; }

/* ============================================================
   SINGLE BUSINESS — comprehensive GMB sections (PFUSA Score, Services, Reviews)
   ============================================================ */

/* PFUSA Score strip — between hero and main content */
.spv2-score-strip { background: #fff; border-bottom: 1px solid #E5E7EB; padding: 2rem 0; }
.spv2-score-inner {
    max-width: 1200px; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.spv2-score-badge {
    flex-shrink: 0;
    width: 140px; height: 140px;
    background: var(--grade-color, #DC2626);
    border: none;
    border-radius: 24px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    box-shadow: 0 12px 32px rgba(0,0,0,.18);
    position: relative;
    opacity: 0;
    transform: scale(.85);
    transition: opacity .5s ease, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.spv2-score-badge.animated {
    opacity: 1;
    transform: scale(1);
}
.spv2-score-badge .ssb-grade {
    font-family: 'Inter', sans-serif; font-weight: 900;
    font-size: 2.8rem; line-height: 1; color: #fff;
    margin-bottom: 2px;
    text-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.spv2-score-badge .ssb-num {
    font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: 1.1rem; color: rgba(255,255,255,.9);
}
.spv2-score-badge .ssb-num small { font-weight: 600; color: rgba(255,255,255,.65); font-size: .75rem; }
.spv2-score-badge .ssb-label {
    font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: .62rem; text-transform: uppercase; letter-spacing: .12em;
    color: rgba(255,255,255,.75); margin-top: 5px;
}
.spv2-score-bars { flex: 1; min-width: 280px; }
.ssb-bar-row {
    display: grid; grid-template-columns: 110px 1fr 65px;
    align-items: center; gap: 12px; margin-bottom: .5rem;
    font-family: 'Inter', sans-serif; font-size: .85rem;
}
.ssb-bar-label { font-weight: 600; color: #1F2937; }
.ssb-bar-track { background: #F3F4F6; height: 8px; border-radius: 999px; overflow: hidden; }
.ssb-bar-fill { height: 100%; border-radius: 999px; transition: width .7s cubic-bezier(.4,0,.2,1); width: 0 !important; }
.ssb-bar-fill.animated { width: var(--bar-target) !important; }
.ssb-bar-num { font-weight: 700; color: #6B7280; font-size: .8rem; text-align: right; }
.spv2-score-note { font-size: .78rem; color: #6B7280; margin: .5rem 0 0; line-height: 1.5; }
@media (max-width: 720px) {
    .spv2-score-inner { flex-direction: column; gap: 1rem; align-items: stretch; }
    .spv2-score-badge { margin: 0 auto; }
}

/* About: subtype chips below the description */
.spv2-subtypes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 1rem; }
.spv2-tag-chip {
    display: inline-flex; align-items: center;
    background: #FAFAFA; color: #1F2937;
    border: 1px solid #E5E7EB;
    font-size: .78rem; font-weight: 600;
    padding: 4px 10px; border-radius: 999px;
}

/* Services & Offerings card — grouped sections */
.spv2-services-body { padding: 16px 20px; }
.spv2-svc-section { margin-bottom: 1rem; }
.spv2-svc-section:last-child { margin-bottom: 0; }
.spv2-svc-section-title {
    font-family: 'Inter', sans-serif; font-weight: 800;
    font-size: .82rem; color: #0A0A0A; margin: 0 0 .4rem;
    display: inline-flex; align-items: center; gap: 6px;
    text-transform: uppercase; letter-spacing: .05em;
}
.spv2-svc-section-title i { color: #DC2626; font-size: .82rem; }
.spv2-svc-list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 16px;
}
.spv2-svc-list li {
    font-size: .85rem; color: #1F2937;
    display: flex; align-items: center; gap: 8px;
    line-height: 1.4;
}
.spv2-svc-list li i { color: #15803D; font-size: .72rem; flex-shrink: 0; }
@media (max-width: 600px) { .spv2-svc-list { grid-template-columns: 1fr; } }

/* What customers mention — chip cloud */
.spv2-tag-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.spv2-tag-cloud .spv2-tag-chip {
    background: #FEE2E2; color: #DC2626; border-color: #E5E7EB;
    font-weight: 700;
}

/* Photos card header — Google count */
.spv2-photo-google-count { font-size: .72rem; color: #6B7280; font-weight: 500; margin-left: 6px; }
.spv2-photo-google-link {
    margin-left: auto; font-size: .78rem; color: #DC2626; text-decoration: none;
    display: inline-flex; align-items: center; gap: 4px; font-weight: 600;
}
.spv2-photo-google-link:hover { text-decoration: underline; }
.spv2-card-header { justify-content: flex-start; }
.spv2-card-header h3 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Reviews card */
.spv2-reviews-card .spv2-card-header h3 { font-size: 1.05rem; }
.spv2-rev-total { color: #6B7280; font-weight: 500; font-size: .9rem; }
.spv2-rev-summary {
    display: grid; grid-template-columns: 180px 1fr; gap: 24px;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid #F3F4F6;
    align-items: center;
}
.spv2-rev-avg { text-align: center; }
.spv2-rev-avg-num {
    font-family: 'Inter', sans-serif; font-weight: 900;
    font-size: 3rem; line-height: 1; color: #0A0A0A;
}
.spv2-rev-avg-stars { color: #F59E0B; font-size: 1rem; margin: 4px 0; letter-spacing: 1px; }
.spv2-rev-avg-stars i.empty { color: #E5E7EB; }
.spv2-rev-avg-label { font-size: .82rem; color: #6B7280; }
.spv2-rev-dist { display: flex; flex-direction: column; gap: 6px; }
.spv2-rev-dist-row { display: grid; grid-template-columns: 60px 1fr 40px; align-items: center; gap: 10px; font-size: .82rem; }
.srdr-star { color: #6B7280; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; }
.srdr-star i { color: #F59E0B; font-size: .72rem; }
.srdr-track { background: #F3F4F6; height: 8px; border-radius: 999px; overflow: hidden; }
.srdr-fill { background: linear-gradient(90deg, #F59E0B, #F59E0B); height: 100%; border-radius: 999px; transition: width .4s ease; }
.srdr-count { color: #4B5563; font-weight: 700; text-align: right; font-size: .82rem; }
@media (max-width: 600px) { .spv2-rev-summary { grid-template-columns: 1fr; gap: 1rem; } }

/* Tabs */
.spv2-rev-tabs {
    display: flex; gap: .5rem; padding: 1rem 1.5rem; flex-wrap: wrap;
    border-bottom: 1px solid #F3F4F6;
}
.spv2-rev-tab {
    background: #FAFAFA; color: #1F2937;
    border: 1px solid transparent;
    font-family: 'Inter', sans-serif; font-weight: 700; font-size: .82rem;
    padding: 8px 16px; border-radius: 999px;
    cursor: pointer; transition: all .15s;
    display: inline-flex; align-items: center; gap: 6px;
}
.spv2-rev-tab:hover { background: #FEE2E2; color: #DC2626; }
.spv2-rev-tab.is-active { background: #DC2626; color: #fff; box-shadow: 0 4px 10px rgba(220,38,38,.25); }
.spv2-rev-tab .srt-count {
    background: rgba(0,0,0,.08); color: inherit;
    padding: 1px 8px; border-radius: 999px; font-size: .72rem; font-weight: 800;
}
.spv2-rev-tab.is-active .srt-count { background: rgba(255,255,255,.25); color: #fff; }
.spv2-rev-tab i { font-size: .72rem; }

/* Review list */
.spv2-rev-list { padding: 0 1.5rem; }
.spv2-review { padding: 1.25rem 0; border-bottom: 1px solid #F3F4F6; }
.spv2-review:last-child { border-bottom: none; }
.spv2-review-head { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.spv2-review-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; }
.spv2-review-avatar-fallback {
    background: #DC2626; color: #fff; display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 1rem;
}
.spv2-review-meta { flex: 1; min-width: 0; }
.spv2-review-author a, .spv2-review-author { color: #0A0A0A; font-weight: 700; font-size: .9rem; text-decoration: none; }
.spv2-review-author a:hover { color: #DC2626; }
.spv2-review-rating-row { display: flex; align-items: center; gap: 10px; margin-top: 2px; flex-wrap: wrap; }
.spv2-review-stars { color: #F59E0B; font-size: .82rem; letter-spacing: 1px; }
.spv2-review-stars i.empty { color: #E5E7EB; }
.spv2-review-date { font-size: .78rem; color: #6B7280; }
.spv2-review-text {
    color: #1F2937; font-size: .92rem; line-height: 1.65;
    margin: 4px 0 8px; white-space: pre-wrap; word-wrap: break-word;
}
.spv2-review-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.spv2-review-tag {
    background: #FAFAFA; color: #4B5563;
    border: 1px solid #E5E7EB;
    font-size: .72rem; padding: 3px 10px; border-radius: 8px;
}
.spv2-review-tag strong { color: #0A0A0A; font-weight: 700; }
.spv2-review-photos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.spv2-review-photos img {
    width: 72px; height: 72px; object-fit: cover; border-radius: 8px;
    transition: transform .15s ease; cursor: pointer;
}
.spv2-review-photos img:hover { transform: scale(1.05); }

/* Owner response */
.spv2-review-response {
    background: #F3F4F6; border-left: 3px solid #DC2626;
    padding: 12px 16px; border-radius: 0 8px 8px 0;
    margin-top: 10px;
}
.spv2-review-response-head {
    display: flex; align-items: center; gap: 6px;
    font-size: .8rem; color: #DC2626; font-weight: 700;
    margin-bottom: 4px;
}
.spv2-review-response-head i { font-size: .75rem; }
.spv2-review-response-date { font-weight: 500; color: #6B7280; }
.spv2-review-response p {
    margin: 0; font-size: .85rem; color: #1F2937; line-height: 1.55;
    white-space: pre-wrap;
}

/* Bucket tinting */
.spv2-review.is-critical { background: linear-gradient(90deg, #FEF2F2 0%, transparent 12%); }
.spv2-review.is-positive { background: linear-gradient(90deg, #F0FDF4 0%, transparent 8%); }

/* Load more */
.spv2-rev-loadmore { padding: 1rem 1.5rem; text-align: center; border-top: 1px solid #F3F4F6; }
.spv2-rev-loadmore .spv2-btn { background: #fff; color: #DC2626; border: 1.5px solid #DC2626; padding: 10px 22px; }
.spv2-rev-loadmore .spv2-btn:hover { background: #DC2626; color: #fff; }


/* ============================================================
   CATEGORIES INDEX  (/categories/)
   STATES INDEX      (/states/)
   CONTACT PAGE      (/contact-us/)
   Apple-quality, consistent with /business-listings-search/
   ============================================================ */


/* ---------- Shared hero (used on all three pages) ---------- */
.pfcat-hero, .pfst-hero, .pfct-hero {
    background: linear-gradient(135deg, var(--ink-900) 0%, var(--ink-900) 100%);
    color: #fff;
    padding: 56px 24px 48px;
    border-bottom: none;
    position: relative;
    overflow: hidden;
}
.pfcat-hero::before, .pfst-hero::before, .pfct-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(circle at 20% 50%, rgba(220,38,38,.10), transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(245,184,0,.08), transparent 50%);
    pointer-events: none;
}
.pfcat-hero-inner, .pfst-hero-inner, .pfct-hero-inner {
    max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 1;
}
.pfcat-hero-title, .pfst-hero-title, .pfct-hero-title {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(28px, 4vw, 40px); font-weight: 800;
    margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.1;
    color: #fff;
}
.pfcat-hero-sub, .pfst-hero-sub, .pfct-hero-sub {
    font-size: 16px; line-height: 1.55; margin: 0 0 24px;
    color: rgba(255,255,255,.86);
}

/* ---------- Search input within hero (categories + states) ---------- */
.pfcat-search-wrap, .pfst-search-wrap {
    position: relative; max-width: 520px; margin: 0 auto; width: 100%;
}
.pfcat-search-icon, .pfst-search-icon {
    position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted); pointer-events: none; font-size: 14px;
}
.pfcat-search-wrap input, .pfst-search-wrap input {
    width: 100%; height: 52px; padding: 0 18px 0 46px;
    box-sizing: border-box; border: none; border-radius: 14px;
    background: rgba(255,255,255,.96);
    font-size: 16px; color: var(--color-text);
    box-shadow: 0 4px 16px rgba(0,0,0,.10);
    -webkit-appearance: none; appearance: none;
    transition: box-shadow .15s ease, transform .12s ease;
}
.pfcat-search-wrap input:focus, .pfst-search-wrap input:focus {
    outline: none; box-shadow: 0 6px 24px rgba(0,0,0,.18), 0 0 0 3px rgba(245,184,0,.4);
}

/* ============================================================
   /categories/ — branded category tiles
   ============================================================ */
.pf-cats-page { background: var(--color-bg); min-height: 60vh; }

.pfcat-grid-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 24px 56px; }

.pfcat-grid {
    display: grid; gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.pfcat-card {
    display: flex; flex-direction: column;
    padding: 24px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    text-decoration: none !important;
    color: #1F2937;
    box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    transition: transform .18s ease, box-shadow .2s ease, border-color .18s ease;
    position: relative; overflow: hidden;
}
.pfcat-card::after {
    content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--card-color, #DC2626), transparent);
    opacity: 0; transition: opacity .2s;
}
.pfcat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,.1), 0 4px 12px rgba(0,0,0,.06);
    border-color: var(--card-color, #DC2626);
}
.pfcat-card:hover::after { opacity: 1; }
.pfcat-card:active { transform: translateY(-1px); }

/* link wrap covers icon + name + blurb + footer */
.pfcat-card-link-wrap {
    display: flex; flex-direction: column;
    text-decoration: none !important;
    color: inherit; flex: 1;
}

/* icon */
.pfcat-card-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px; flex-shrink: 0;
    background: var(--card-bg, #FEE2E2);
    color: var(--card-color, #DC2626);
}
/* legacy icon class */
.pfcat-card-icon {
    flex: 0 0 52px; width: 52px; height: 52px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 14px; font-size: 22px;
    background: var(--card-bg, #FEE2E2);
    color: var(--card-color, #DC2626);
}

.pfcat-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pfcat-card-name {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 16px; font-weight: 700;
    line-height: 1.3; margin-bottom: 6px;
    color: #0A0A0A;
}
.pfcat-card-blurb {
    font-size: 13px; line-height: 1.5;
    color: #6B7280; margin-bottom: 20px; flex: 1;
}

/* footer: count pill + arrow */
.pfcat-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid #F3F4F6;
    margin-top: auto;
}
.pfcat-card-meta {
    margin-top: auto;
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px;
}
.pfcat-card-count {
    font-size: 12px; font-weight: 700;
    color: var(--card-color, #DC2626);
    background: var(--card-bg, #FEE2E2);
    padding: 4px 10px; border-radius: 999px;
}
.pfcat-card-count--empty { color: var(--color-text-muted); background: #F3F4F6; }
.pfcat-card-arrow {
    width: 28px; height: 28px; border-radius: 50%;
    background: #F8FAFC; display: flex; align-items: center; justify-content: center;
    color: #6B7280; font-size: 12px;
    transition: background .15s, color .15s, transform .15s;
}
.pfcat-card:hover .pfcat-card-arrow {
    background: var(--card-color, #DC2626); color: #fff; transform: translateX(2px);
}

/* "Read the guide" link — sits BELOW the main link-wrap */
.pfcat-card-guide-link {
    display: flex; align-items: center; gap: 6px;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid #F3F4F6;
    font-size: 13px; font-weight: 600; color: var(--card-color, #DC2626);
    text-decoration: none; transition: gap .15s;
}
.pfcat-card-guide-link:hover { gap: 10px; text-decoration: none; }
.pfcat-card-guide-link i { font-size: 12px; }

.pfcat-no-results {
    text-align: center; padding: 60px 20px;
    color: var(--color-text-muted);
}
.pfcat-no-results i { font-size: 36px; opacity: .5; margin-bottom: 12px; display: block; }

/* pfcat extended classes (from categories-business.php) */
.pfcat-page { background: #F8FAFC; min-height: 100vh; }
.pfcat-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(220,38,38,.15); border: 1px solid rgba(220,38,38,.3);
    color: #FCA5A5; font-size: 11px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
    margin-bottom: 20px;
}
.pfcat-section-label {
    font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: #9CA3AF; margin-bottom: 20px;
}
.pfcat-card-link-wrap {
    display: flex; flex-direction: column; text-decoration: none !important;
    color: inherit; flex: 1;
}
.pfcat-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 14px; border-top: 1px solid #F3F4F6;
    margin-top: auto;
}
.pfcat-card-icon-wrap {
    width: 52px; height: 52px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 22px; margin-bottom: 16px; flex-shrink: 0;
    background: var(--card-bg, #FEE2E2);
    color: var(--card-color, #DC2626);
}

/* CTA */
.pfcat-cta, .pfst-cta {
    text-align: center; padding: 32px 24px 56px;
    border-top: 1px solid var(--color-border);
    margin-top: 24px;
}
.pfcat-cta p, .pfst-cta p {
    font-size: 14px; color: var(--color-text-muted);
    margin: 0 0 16px;
}
.pfcat-cta-btns, .pfst-cta-btns {
    display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
.pfcat-btn, .pfst-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 22px; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 14px; font-weight: 600;
    text-decoration: none;
    transition: transform .12s ease, box-shadow .15s ease;
}
.pfcat-btn:active, .pfst-btn:active { transform: scale(.97); }
.pfcat-btn-primary, .pfst-btn-primary {
    background: var(--color-accent); color: #fff;
    box-shadow: 0 2px 8px rgba(220,38,38,.20), 0 1px 3px rgba(220,38,38,.10);
}
.pfcat-btn-primary:hover, .pfst-btn-primary:hover {
    background: #0A0A0A; color: #fff;
    box-shadow: 0 4px 14px rgba(220,38,38,.30), 0 2px 6px rgba(220,38,38,.15);
}
.pfcat-btn-outline, .pfst-btn-outline {
    background: #fff; color: var(--ink-900);
    border: 1.5px solid var(--color-border);
}
.pfcat-btn-outline:hover, .pfst-btn-outline:hover {
    border-color: var(--ink-900);
    color: var(--ink-900);
}

/* ============================================================
   /states/ — alpha-grouped state grid
   ============================================================ */
.pf-states-page { background: var(--color-bg); min-height: 60vh; }

.pfst-grid-wrap { max-width: 1240px; margin: 0 auto; padding: 40px 24px 24px; }

.pfst-count {
    font-size: 13px; color: var(--color-text-muted);
    text-align: center; margin-bottom: 24px;
    font-weight: 600;
}
.pfst-count #pfst-visible-count { color: var(--ink-900); }

.pfst-alpha {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.pfst-letter-group {
    background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
    padding: 16px 18px; box-shadow: var(--shadow-sm);
}
.pfst-letter-badge {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink-900); color: #fff;
    font-family: 'Inter', sans-serif; font-weight: 800;
    border-radius: 8px; font-size: 14px;
    margin-bottom: 12px;
}
.pfst-items { display: flex; flex-direction: column; gap: 2px; }

.pfst-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px;
    font-size: 14px; font-weight: 500;
    color: var(--color-text);
    text-decoration: none;
    transition: background .12s ease, color .12s ease;
}
.pfst-item:hover {
    background: #F3F4F6; color: var(--color-accent);
}
.pfst-item:active { background: #FEE2E2; }
.pfst-name { flex: 1; min-width: 0; }
.pfst-count-pill {
    font-size: 12px; font-weight: 700;
    color: var(--color-accent); background: #F3F4F6;
    padding: 2px 8px; border-radius: 999px;
}
.pfst-item:hover .pfst-count-pill { background: #fff; }
.pfst-soon {
    font-size: 12px; font-weight: 600;
    color: var(--color-text-muted); font-style: italic;
}
.pfst-item--empty { opacity: .65; }

.pfst-empty, .pfst-no-results {
    text-align: center; padding: 60px 20px;
    color: var(--color-text-muted);
}
.pfst-empty i, .pfst-no-results i {
    font-size: 36px; opacity: .5; margin-bottom: 12px; display: block;
}
.pfst-empty h3 { color: var(--ink-900); margin-bottom: 8px; }

/* ============================================================
   Mobile responsiveness — all three pages
   ============================================================ */
@media (max-width: 768px) {
    .pfcat-hero, .pfst-hero, .pfct-hero { padding: 36px 16px 32px; }
    .pfcat-hero-title, .pfst-hero-title, .pfct-hero-title { font-size: 24px; }
    .pfcat-hero-sub, .pfst-hero-sub, .pfct-hero-sub { font-size: 14px; }
    .pfcat-grid { grid-template-columns: 1fr; gap: 12px; }
    .pfcat-card { padding: 16px; }
    .pfcat-card-icon-wrap { width: 44px; height: 44px; font-size: 19px; margin-bottom: 12px; }
    .pfcat-card-name { font-size: 15px; }
    .pfcat-card-blurb { font-size: 12px; }
    .pfst-alpha { grid-template-columns: 1fr; gap: 12px; }
    .pfct-grid { grid-template-columns: 1fr; gap: 16px; }
    .pfct-form-card { padding: 20px 18px; }
    .pfct-iframe { min-height: 720px; }
    .pfcat-cta-btns, .pfst-cta-btns { flex-direction: column; }
    .pfcat-btn, .pfst-btn { width: 100%; justify-content: center; }
}


/* ============================================================
   /sign-up/  — CXL high-conversion landing
   Form in hero (right), single MWA, sticky CTA, social proof
   ============================================================ */

body.signup-cxl { background: #fff; color: #0A0A0A; -webkit-font-smoothing: antialiased; }
body.signup-cxl #masthead, body.signup-cxl .pfusa-mainnav, body.signup-cxl .mobile-sticky-cta,
body.signup-cxl .pfusa-mobile-overlay, body.signup-cxl #colophon,
body.signup-cxl .signup-topnav /* old, unused */ { display: none !important; }
body.signup-cxl main, body.signup-cxl #content, body.signup-cxl .site-content { padding: 0 !important; margin: 0 !important; max-width: none !important; }

/* ---------- Announcement bar (full-bleed scarcity stripe) ---------- */
.sp2-announce {
    background: linear-gradient(90deg, #DC2626 0%, #DC2626 100%);
    color: #fff;
    padding: 8px 16px;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 13px; font-weight: 600;
    line-height: 1.3;
    position: relative;
    z-index: 50;
}
.sp2-announce-inner {
    max-width: 1180px; margin: 0 auto;
    display: inline-flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
}
.sp2-announce strong { font-weight: 800; }
.sp2-announce-sep { opacity: .55; }
.sp2-announce-pulse {
    width: 8px; height: 8px; border-radius: 50%;
    background: #DC2626;
    box-shadow: 0 0 0 0 rgba(255,255,255,.55);
    animation: sp2pulseW 1.6s infinite;
}
@keyframes sp2pulseW {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}
.sp2-announce-cta {
    color: #fff; font-weight: 800;
    text-decoration: underline; text-underline-offset: 2px;
    margin-left: 6px;
    transition: opacity .12s ease;
}
.sp2-announce-cta:hover { opacity: .85; }
@media (prefers-reduced-motion: reduce) { .sp2-announce-pulse { animation: none; } }

/* ---------- Top nav (overlays the hero, scoped to .sp2-hero) ---------- */
.sp2-nav {
    position: absolute; top: 0; left: 0; right: 0; z-index: 40;
    padding: 16px 24px;
    background: transparent;
}
.sp2-nav-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sp2-nav-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.sp2-nav-logo.pfusa-brand-text,
.sp2-nav-logo.pfusa-brand-text:link,
.sp2-nav-logo.pfusa-brand-text:visited { color: #fff; font-size: 19px; }
.sp2-nav-logo.pfusa-brand-text span { color: #DC2626; }
.sp2-nav-logo img {
    height: 36px; width: auto; display: block;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.20));
}
.sp2-nav-right {
    display: flex; align-items: center; gap: 14px;
    font-family: 'Inter', sans-serif;
}
.sp2-nav-help {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.85); text-decoration: none;
    font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 8px;
    transition: background .15s ease, color .12s ease;
}
.sp2-nav-help:hover { color: #fff; background: rgba(255,255,255,.10); }
.sp2-nav-help i { color: #DC2626; }

.sp2-nav-signin {
    display: inline-flex; align-items: center; gap: 6px;
    color: rgba(255,255,255,.92); text-decoration: none;
    font-size: 13px;
    padding: 8px 16px; border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,.30);
    background: rgba(255,255,255,.06);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.sp2-nav-signin strong { font-weight: 800; color: #fff; }
.sp2-nav-signin:hover {
    background: rgba(255,255,255,.16);
    border-color: rgba(255,255,255,.55);
    color: #fff;
}
.sp2-nav-signin:active { transform: scale(.97); }

/* (hero padding-top is set in the main .sp2-hero rule below to leave room for the overlay nav) */

/* ---------- HERO ---------- */
.sp2-hero {
    background: linear-gradient(135deg, #0A0A0A 0%, #0A0A0A 60%, #1a0505 100%);
    color: #fff;
    padding: 96px 24px 72px;  /* extra top to leave room for the absolutely-positioned topnav */
    position: relative;
    overflow: hidden;
}
.sp2-hero::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(900px circle at 80% 30%, rgba(220,38,38,.18), transparent 60%),
                radial-gradient(700px circle at 10% 80%, rgba(220,38,38,.08), transparent 55%);
}
.sp2-hero-inner {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
    align-items: start; position: relative; z-index: 1;
}

/* Left pitch */
.sp2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.12); color: rgba(255,255,255,.95);
    border: 1px solid rgba(255,255,255,.20);
    padding: 6px 14px; border-radius: 999px;
    font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700;
    letter-spacing: 0.02em; margin-bottom: 18px;
}
.sp2-eyebrow--dark { background: rgba(220,38,38,.15); color: rgba(255,255,255,.95); border-color: rgba(220,38,38,.30); }
.sp2-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: #DC2626;
    box-shadow: 0 0 0 0 rgba(220,38,38,.6);
    animation: sp2pulse 1.6s infinite;
}
@keyframes sp2pulse {
    0%   { box-shadow: 0 0 0 0 rgba(220,38,38,.6); }
    70%  { box-shadow: 0 0 0 10px rgba(220,38,38,0); }
    100% { box-shadow: 0 0 0 0 rgba(220,38,38,0); }
}
@media (prefers-reduced-motion: reduce) { .sp2-pulse { animation: none; } }

.sp2-h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(32px, 4.4vw, 52px); font-weight: 900;
    line-height: 1.05; letter-spacing: -0.025em;
    margin: 0 0 18px; color: #fff;
}
.sp2-h1-highlight { color: #fff; }
.sp2-sub {
    font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55;
    color: #fff; margin: 0 0 22px; font-size: clamp(15px, 1.5vw, 17px);
}
.sp2-bullets { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.sp2-bullets li {
    display: flex; align-items: center; gap: 10px;
    font-size: 15px; color: #fff;
}
.sp2-bullets li i { color: #4ADE80; font-size: 16px; flex-shrink: 0; }

.sp2-live {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.18);
    padding: 8px 14px; border-radius: 999px;
    font-size: 13px; color: rgba(255,255,255,.95);
    margin-bottom: 18px;
}
.sp2-live strong { color: #DC2626; font-weight: 800; }
.sp2-live-dots { display: inline-flex; gap: 3px; }
.sp2-live-dots span { width: 6px; height: 6px; border-radius: 50%; background: #4ADE80; animation: sp2blink 1.6s infinite; }
.sp2-live-dots span:nth-child(2){ animation-delay:.2s; }
.sp2-live-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes sp2blink { 0%,100%{opacity:.3} 50%{opacity:1} }

.sp2-mini-quote {
    margin: 0; padding: 12px 16px;
    background: rgba(0,0,0,.18);
    border-left: 3px solid #DC2626;
    border-radius: 8px; font-size: 14px; line-height: 1.5;
    color: rgba(255,255,255,.95);
}
.sp2-mini-quote .sp2-stars { display: block; color: #F59E0B; font-size: 12px; margin-bottom: 4px; }
.sp2-mini-quote cite { display: block; font-size: 12px; color: rgba(255,255,255,.7); font-style: normal; margin-top: 6px; }

/* Right form card — the MWA */
.sp2-form-card {
    background: #fff; color: #0A0A0A;
    border-radius: 18px;
    padding: 26px 26px 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,.30), 0 8px 16px rgba(0,0,0,.14);
    position: sticky; top: 24px;
}
.sp2-form-head { margin-bottom: 16px; text-align: center; }
.sp2-form-tag {
    display: inline-block;
    background: linear-gradient(135deg, #DC2626 0%, #DC2626 100%);
    color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
    padding: 6px 14px; border-radius: 999px;
    margin-bottom: 10px; text-transform: uppercase;
}
.sp2-form-h {
    font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800;
    margin: 0; color: #0A0A0A; letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Plan toggle */
.sp2-plan-toggle { display: grid; gap: 8px; margin-bottom: 14px; }
.sp2-plan {
    display: block; cursor: pointer;
    border: 2px solid #E5E7EB; border-radius: 12px;
    padding: 12px 14px; transition: border-color .15s ease, background .15s ease;
    position: relative;
}
.sp2-plan input { position: absolute; opacity: 0; pointer-events: none; }
.sp2-plan-inner { display: flex; flex-direction: column; gap: 2px; }
.sp2-plan-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sp2-plan-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 15px; color: #0A0A0A; }
.sp2-plan-price { font-weight: 800; font-size: 18px; color: #0A0A0A; }
.sp2-plan-price small { font-size: 12px; font-weight: 600; color: #6B7280; }
.sp2-plan-sub { font-size: 12px; color: #6B7280; }
.sp2-plan.is-selected, .sp2-plan:has(input:checked) {
    border-color: #DC2626; background: #FEE2E2;
}
.sp2-plan--featured { border-color: rgba(220,38,38,.30); background: linear-gradient(135deg, #FEE2E2 0%, #FEE2E2 100%); }
.sp2-plan--featured.is-selected, .sp2-plan--featured:has(input:checked) {
    border-color: #DC2626; background: linear-gradient(135deg, #FEE2E2 0%, #FEE2E2 100%);
}
.sp2-plan-badge {
    position: absolute; top: -10px; right: 12px;
    background: linear-gradient(135deg, #DC2626 0%, #DC2626 100%);
    color: #fff; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
    padding: 3px 10px; border-radius: 999px;
    box-shadow: 0 2px 6px rgba(220,38,38,.35);
}

/* Form fields */
.sp2-field { margin-bottom: 10px; }
.sp2-field input {
    width: 100%; height: 48px;
    padding: 0 14px;
    border: 1.5px solid #E5E7EB; border-radius: 10px;
    background: #FAFAFA;
    font-size: 16px; color: #0A0A0A;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    -webkit-appearance: none; appearance: none;
}
.sp2-field input::placeholder { color: #9CA3AF; }
.sp2-field-hint {
    display: block;
    font-size: 12px;
    color: var(--color-text-muted);
    margin: 6px 2px 0;
    line-height: 1.4;
}

/* ============================================================
   /signup-success/ — branded thank-you page
   ============================================================ */
.pf-success-page {
    background: var(--color-bg);
    min-height: 70vh;
    padding: 60px 24px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.pf-success-inner {
    max-width: 640px;
    width: 100%;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--color-border);
    box-shadow: 0 12px 40px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
    padding: 48px 40px;
    text-align: center;
}
.pf-success-check {
    display: inline-flex;
    width: 80px; height: 80px;
    background: var(--color-success);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    animation: pf-success-pop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes pf-success-pop {
    0%   { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .pf-success-check { animation: none; }
}
.pf-success-h1 {
    font-family: var(--font-sans);
    font-size: clamp(24px, 3.4vw, 32px);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink-900);
    margin: 0 0 8px;
    line-height: 1.15;
}
.pf-success-sub {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0 0 32px;
    line-height: 1.55;
}
.pf-success-steps {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
    text-align: left;
    display: grid;
    gap: 16px;
}
.pf-success-steps li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: var(--color-bg-subtle);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}
.pf-step-num {
    flex: 0 0 32px;
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--color-accent);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pf-success-steps li > div:last-child {
    flex: 1;
}
.pf-success-steps strong {
    display: block;
    font-family: var(--font-sans);
    font-size: 15px;
    font-weight: 800;
    color: var(--ink-900);
    margin-bottom: 2px;
}
.pf-success-steps span {
    display: block;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.pf-success-ctas {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.pf-success-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--color-accent);
    color: #fff;
    padding: 14px 26px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 15px;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(249,115,22,.25);
    transition: background var(--duration-base), box-shadow var(--duration-base), transform var(--duration-fast);
}
.pf-success-btn-primary:hover {
    background: var(--color-accent-hover);
    color: #fff;
    box-shadow: 0 6px 18px rgba(249,115,22,.40);
}
.pf-success-btn-primary:active { transform: scale(.97); }
.pf-success-btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--ink-900);
    border: 1.5px solid var(--color-border);
    padding: 14px 26px;
    border-radius: 12px;
    font-family: var(--font-sans);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: border-color var(--duration-base), background var(--duration-base);
}
.pf-success-btn-outline:hover {
    border-color: var(--ink-900);
    background: var(--color-bg-subtle);
    color: var(--ink-900);
}
.pf-success-note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.55;
}
.pf-success-note a { color: var(--color-accent); text-decoration: underline; }

@media (max-width: 640px) {
    .pf-success-inner { padding: 32px 24px; }
    .pf-success-ctas { flex-direction: column; }
    .pf-success-btn-primary, .pf-success-btn-outline { width: 100%; justify-content: center; }
}
.sp2-field input:focus {
    outline: none; border-color: #DC2626; background: #fff;
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

/* Primary CTA */
.sp2-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; padding: 16px 18px;
    background: var(--color-accent) !important;
    color: #ffffff; border: none; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(220,38,38,.35), 0 2px 4px rgba(0,0,0,.10);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    margin: 6px 0 12px;
    letter-spacing: -0.01em;
    -webkit-text-fill-color: #ffffff;
}
.sp2-cta:hover  { filter: brightness(1.06); box-shadow: 0 10px 28px rgba(220,38,38,.45); }
.sp2-cta:active { transform: scale(.98); }

.sp2-trust-row {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px;
    list-style: none; margin: 0 0 6px; padding: 0;
    font-size: 12px; color: #6B7280;
}
.sp2-trust-row li { display: inline-flex; align-items: center; gap: 6px; }
.sp2-trust-row i { color: #15803D; }
.sp2-legal-mini { font-size: 12px; color: #9CA3AF; text-align: center; margin: 6px 0 0; }
.sp2-legal-mini a { color: #6B7280; text-decoration: underline; }

/* ---------- STATS BAR ---------- */
.sp2-stats {
    background: #fff; border-bottom: 1px solid #F3F4F6;
    padding: 18px 24px;
}
.sp2-stats-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-around; gap: 16px; flex-wrap: wrap;
}
.sp2-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sp2-stat strong { font-family: 'Inter', sans-serif; font-size: 22px; font-weight: 800; color: #0A0A0A; }
.sp2-stat span { font-size: 12px; color: #6B7280; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.sp2-stat-sep { width: 1px; height: 32px; background: #F3F4F6; }

/* ---------- SECTION SHELL ---------- */
.sp2-section { max-width: 1180px; margin: 0 auto; padding: 64px 24px; }
.sp2-section-head { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.sp2-section-head h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3.4vw, 36px); font-weight: 800;
    line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 12px; color: #0A0A0A;
}
.sp2-section-head p { font-size: 16px; color: #6B7280; margin: 0; line-height: 1.55; }

/* ---------- PROBLEM ---------- */
.sp2-problem { background: #FAFAFA; }
.sp2-problem-grid {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sp2-problem-card {
    background: #fff; border: 1px solid #F3F4F6; border-radius: 16px;
    padding: 24px; box-shadow: 0 1px 3px rgba(10,37,64,.04);
    transition: transform .15s ease, box-shadow .2s ease;
}
.sp2-problem-card:hover { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(10,37,64,.10); }
.sp2-problem-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    background: #FEE2E2; color: #DC2626; font-size: 22px;
    margin-bottom: 14px;
}
.sp2-problem-card h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: #0A0A0A; margin: 0 0 8px; }
.sp2-problem-card p { font-size: 14px; line-height: 1.55; color: #4B5563; margin: 0 0 14px; }
.sp2-problem-stat {
    display: inline-block; background: #FEE2E2; color: #DC2626;
    font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
}

/* ---------- HOW IT WORKS ---------- */
.sp2-hiw { background: #fff; }
.sp2-hiw-steps {
    list-style: none; padding: 0; margin: 0;
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    counter-reset: hiw;
}
.sp2-hiw-step {
    background: #FAFAFA; border: 1px solid #F3F4F6; border-radius: 16px;
    padding: 24px; position: relative;
}
.sp2-hiw-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--color-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Inter', sans-serif; font-weight: 800; font-size: 16px;
    margin-bottom: 12px;
}
.sp2-hiw-step h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: #0A0A0A; margin: 0 0 8px; }
.sp2-hiw-step p { font-size: 14px; line-height: 1.55; color: #4B5563; margin: 0; }

/* ---------- PREVIEW (phone mockup) ---------- */
.sp2-preview { background: #FAFAFA; }
.sp2-preview-grid {
    display: grid; gap: 56px;
    grid-template-columns: 1fr 360px;
    align-items: center;
}
.sp2-preview-text h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(26px, 3.2vw, 34px); font-weight: 800;
    color: #0A0A0A; line-height: 1.2; letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.sp2-preview-text > p { font-size: 16px; line-height: 1.6; color: #4B5563; margin: 0 0 18px; }
.sp2-preview-bullets { list-style: none; padding: 0; margin: 0 0 24px; display: grid; gap: 8px; }
.sp2-preview-bullets li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-text); }
.sp2-preview-bullets li i { color: #15803D; }
.sp2-link-btn {
    display: inline-flex; align-items: center; gap: 8px;
    color: #DC2626; font-weight: 700; font-size: 14px;
    text-decoration: none;
}
.sp2-link-btn:hover { color: var(--color-accent-hover); }
.sp2-link-btn:hover i { transform: translateX(3px); }
.sp2-link-btn i { transition: transform .15s ease; }

/* Phone mockup */
.sp2-phone { display: flex; justify-content: center; }
.sp2-phone-frame {
    width: 320px; max-width: 100%;
    background: #0A0A0A; border-radius: 36px;
    padding: 14px; box-shadow: 0 24px 50px rgba(10,37,64,.30), 0 6px 14px rgba(0,0,0,.20);
    position: relative;
}
.sp2-phone-notch {
    position: absolute; top: 6px; left: 50%; transform: translateX(-50%);
    width: 90px; height: 18px; background: #0A0A0A; border-radius: 0 0 14px 14px; z-index: 2;
}
.sp2-phone-screen {
    background: #FAFAFA; border-radius: 24px; overflow: hidden;
    padding: 24px 12px 12px;
}
.sp2-mock-bar {
    background: #fff; padding: 10px 14px; border-radius: 10px;
    margin-bottom: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    font-family: 'Inter', sans-serif; font-size: 12px; color: #0A0A0A;
}
.sp2-mock-bar-h strong { color: #0A0A0A; }
.sp2-mock-bar-h:not(strong) { color: #DC2626; }
.sp2-mock-card {
    background: #fff; border-radius: 12px; overflow: hidden;
    margin-bottom: 10px; box-shadow: 0 1px 3px rgba(10,37,64,.06);
    border: 1.5px solid #4ADE80;
    position: relative;
}
.sp2-mock-card--small { border-color: #F3F4F6; }
.sp2-mock-photo {
    background: linear-gradient(135deg, #FEE2E2 0%, #FEE2E2 100%);
    height: 80px; position: relative; display: flex; align-items: center; justify-content: center;
}
.sp2-mock-photo--small { height: 50px; }
.sp2-mock-photo-ico { color: #DC2626; font-size: 28px; opacity: .55; }
.sp2-mock-verified, .sp2-mock-featured {
    position: absolute; top: 6px;
    background: rgba(0,0,0,.7); color: #fff;
    font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px;
}
.sp2-mock-verified { left: 6px; background: #15803D; }
.sp2-mock-featured { right: 6px; background: var(--color-accent); }
.sp2-mock-body { padding: 10px 12px; }
.sp2-mock-name { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 13px; color: #0A0A0A; margin-bottom: 4px; }
.sp2-mock-rating { font-size: 12px; margin-bottom: 4px; }
.sp2-mock-star { color: var(--color-star); font-weight: 700; }
.sp2-mock-rev { color: #6B7280; }
.sp2-mock-meta { font-size: 12px; color: #6B7280; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; }
.sp2-mock-meta i { color: #DC2626; width: 10px; }
.sp2-mock-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 8px; }
.sp2-mock-tags span { font-size: 9px; background: #F3F4F6; color: #DC2626; padding: 2px 6px; border-radius: 999px; font-weight: 700; }
.sp2-mock-cta {
    display: block; text-align: center;
    background: #15803D; color: #fff;
    padding: 8px; border-radius: 6px;
    font-size: 12px; font-weight: 700;
}

/* ---------- PRICING ---------- */
.sp2-pricing { background: #fff; }
.sp2-math {
    display: flex; align-items: center; gap: 16px;
    background: #FEE2E2; border: 1px solid #F59E0B; border-radius: 14px;
    padding: 18px 20px; margin-bottom: 32px;
    color: #0A0A0A; font-size: 14px; line-height: 1.55;
}
.sp2-math i { font-size: 24px; color: #D97706; flex-shrink: 0; }
.sp2-math strong { color: #0A0A0A; }

.sp2-pricing-cards {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width: 880px; margin: 0 auto;
}
.sp2-pricing-card {
    background: #fff; border: 1.5px solid #E5E7EB; border-radius: 18px;
    padding: 28px; position: relative;
    box-shadow: 0 1px 3px rgba(10,37,64,.04);
    transition: transform .2s ease, box-shadow .2s ease;
    display: flex; flex-direction: column;
}
.sp2-pricing-card:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(10,37,64,.10); }
.sp2-pricing-card--featured {
    border: 2px solid #DC2626;
    box-shadow: 0 12px 36px rgba(220,38,38,.18);
    transform: scale(1.02);
}
.sp2-pricing-card--featured:hover { transform: scale(1.02) translateY(-3px); }
.sp2-pricing-ribbon {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    background: linear-gradient(135deg, #DC2626 0%, #DC2626 100%);
    color: #fff; font-weight: 800; font-size: 12px; letter-spacing: 0.04em;
    padding: 6px 16px; border-radius: 999px; white-space: nowrap;
    box-shadow: 0 4px 10px rgba(220,38,38,.35);
}
.sp2-pricing-head { text-align: center; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; margin-bottom: 20px; }
.sp2-pricing-head h3 { font-family: 'Inter', sans-serif; font-size: 18px; font-weight: 800; color: #0A0A0A; margin: 0 0 12px; }
.sp2-pricing-price {
    font-family: 'Inter', sans-serif; font-weight: 900;
    font-size: 44px; color: #0A0A0A; line-height: 1;
}
.sp2-pricing-price small { font-size: 14px; color: #6B7280; font-weight: 600; }
.sp2-pricing-card--featured .sp2-pricing-price { color: #DC2626; }
.sp2-pricing-head p { font-size: 13px; color: #6B7280; margin: 8px 0 0; }
.sp2-pricing-features { list-style: none; padding: 0; margin: 0 0 20px; display: grid; gap: 10px; flex: 1; }
.sp2-pricing-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; line-height: 1.4; color: #0A0A0A; }
.sp2-pricing-features li i { color: #15803D; margin-top: 3px; flex-shrink: 0; }
.sp2-pricing-features li.muted { color: #9CA3AF; }
.sp2-pricing-features li.muted i { color: #E5E7EB; }
.sp2-pricing-features li.hi i { color: var(--color-success); }
.sp2-pricing-features li.hi { color: #0A0A0A; font-weight: 600; }

.sp2-pricing-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 18px; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 800;
    text-decoration: none; transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
    background: var(--color-accent); color: #fff;
    box-shadow: 0 4px 14px rgba(220,38,38,.30);
}
.sp2-pricing-cta:hover { color: #fff; filter: brightness(1.06); box-shadow: 0 8px 22px rgba(220,38,38,.40); }
.sp2-pricing-cta--outline {
    background: #fff; color: #0A0A0A;
    border: 1.5px solid #E5E7EB;
    box-shadow: none;
}
.sp2-pricing-cta--outline:hover { background: #FAFAFA; color: #0A0A0A; border-color: #0A0A0A; box-shadow: none; }
.sp2-spots-left {
    text-align: center; font-size: 12px; color: #DC2626;
    font-weight: 600; margin: 10px 0 0;
}

/* Guarantee */
.sp2-guarantee {
    margin-top: 32px; max-width: 720px; margin-left: auto; margin-right: auto;
    display: flex; align-items: center; gap: 18px;
    background: #DCFCE7; border: 1px solid #A7F3D0; border-radius: 14px;
    padding: 20px;
}
.sp2-guarantee i { font-size: 32px; color: #15803D; flex-shrink: 0; }
.sp2-guarantee strong { display: block; font-family: 'Inter', sans-serif; font-size: 16px; color: #064E3B; margin-bottom: 4px; }
.sp2-guarantee p { font-size: 13px; color: #15803D; margin: 0; line-height: 1.5; }

/* ---------- TESTIMONIALS ---------- */
.sp2-testimonials { background: #FAFAFA; }
.sp2-test-grid {
    display: grid; gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.sp2-test {
    background: #fff; border-radius: 16px; padding: 24px;
    box-shadow: 0 1px 3px rgba(10,37,64,.06);
    display: flex; flex-direction: column;
}
.sp2-stars { color: var(--color-star); font-size: 14px; margin-bottom: 10px; letter-spacing: 1px; }
.sp2-test p { font-size: 14px; line-height: 1.6; color: #0A0A0A; margin: 0 0 16px; flex: 1; }
.sp2-test footer { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sp2-test-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: linear-gradient(135deg, #DC2626 0%, var(--ink-900) 100%);
    color: #fff; font-weight: 800; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp2-test footer strong { display: block; font-size: 13px; color: #0A0A0A; }
.sp2-test footer span { font-size: 12px; color: #6B7280; }
.sp2-test-result {
    display: inline-block;
    background: linear-gradient(135deg, #FEE2E2 0%, #FEE2E2 100%);
    color: #0A0A0A; font-size: 12px; font-weight: 700;
    padding: 4px 10px; border-radius: 999px;
    align-self: flex-start;
}

/* ---------- FAQ ---------- */
.sp2-faq { background: #fff; }
.sp2-faq-list { max-width: 760px; margin: 0 auto; display: grid; gap: 8px; }
.sp2-faq-item {
    background: #FAFAFA; border: 1px solid #F3F4F6; border-radius: 12px;
    overflow: hidden;
}
.sp2-faq-item summary {
    padding: 16px 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    font-family: 'Inter', sans-serif; font-weight: 600; font-size: 15px; color: #0A0A0A;
    list-style: none;
}
.sp2-faq-item summary::-webkit-details-marker { display: none; }
.sp2-faq-item summary i { color: #DC2626; font-size: 14px; transition: transform .2s ease; }
.sp2-faq-item[open] summary i { transform: rotate(45deg); }
.sp2-faq-a {
    padding: 0 20px 16px; font-size: 14px; line-height: 1.6; color: #4B5563;
}

/* ---------- FINAL CTA ---------- */
.sp2-final {
    background: linear-gradient(135deg, #0A0A0A 0%, var(--ink-900) 100%);
    color: #fff;
}
.sp2-final-inner {
    display: flex; align-items: center; justify-content: space-between; gap: 32px;
    flex-wrap: wrap;
}
.sp2-final-text { flex: 1; min-width: 280px; }
.sp2-final-text h2 {
    font-family: 'Inter', sans-serif;
    font-size: clamp(24px, 3vw, 34px); font-weight: 800;
    color: #fff; margin: 0 0 8px; line-height: 1.2; letter-spacing: -0.02em;
}
.sp2-final-text p { font-size: 15px; color: rgba(255,255,255,.85); margin: 0 0 14px; }
.sp2-trust-row--lg { font-size: 13px; color: rgba(255,255,255,.85); justify-content: flex-start; }
.sp2-trust-row--lg i { color: #4ADE80; }
.sp2-final-cta {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 16px 26px;
    background: var(--color-accent);
    color: #fff; border-radius: 12px;
    font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 800;
    text-decoration: none; box-shadow: 0 8px 22px rgba(220,38,38,.40);
    transition: transform .12s ease, filter .15s ease;
    white-space: nowrap;
}
.sp2-final-cta:hover { color: #fff; filter: brightness(1.08); }
.sp2-final-cta:active { transform: scale(.97); }

/* ---------- STICKY ---------- */
.sp2-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990;
    background: rgba(255,255,255,.98);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
            backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(10,37,64,.10);
    box-shadow: 0 -8px 32px rgba(10,37,64,.12);
    padding: 14px 24px max(env(safe-area-inset-bottom), 14px);
}
/* Hide any nav widget/fallback text that bleeds into the sticky bar */
.sp2-sticky .widget, .sp2-sticky nav, .sp2-sticky .menu,
.sp2-sticky [class*="menu"], .sp2-sticky [class*="nav"] { display: none !important; }
/* Global: hide WP nav fallback "Display a menu" text */
.wp-block-navigation__responsive-container-content .wp-block-navigation__responsive-close,
.wp-block-navigation .wp-block-navigation__responsive-container-open { display: none; }
.sp2-sticky-inner > *:not(.sp2-sticky-text):not(.sp2-sticky-cta) { display: none !important; }
.sp2-sticky-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.sp2-sticky-text { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.sp2-sticky-text strong { font-size: 15px; font-weight: 800; color: #0A0A0A; line-height: 1.2; }
.sp2-sticky-text span { font-size: 12px; color: #6B7280; }
.sp2-sticky-cta {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 24px;
    background: var(--color-accent);
    color: #fff; border-radius: 12px;
    font-weight: 800; font-size: 15px; text-decoration: none;
    box-shadow: 0 4px 16px rgba(249,115,22,.35);
    white-space: nowrap; flex-shrink: 0;
    transition: filter .2s, transform .15s;
}
.sp2-sticky-cta:hover { filter: brightness(1.06); transform: translateY(-1px); }

/* ---------- MOBILE ---------- */
@media (max-width: 880px) {
    /* Announcement bar — compact */
    .sp2-announce { font-size: 12px; padding: 8px 12px; }
    .sp2-announce-sep, .sp2-announce-cta { display: none; }
    /* Topnav — hide help link, keep logo + sign-in */
    .sp2-nav { padding: 12px 16px; }
    .sp2-nav-logo img { height: 30px; }
    .sp2-nav-help { display: none; }
    .sp2-nav-signin { padding: 8px 12px; font-size: 12px; }
    .sp2-nav-signin span, .sp2-nav-signin strong { display: inline; }

    .sp2-hero { padding: 76px 16px 48px; }
    .sp2-hero-inner { grid-template-columns: 1fr; gap: 28px; }
    .sp2-form-card { position: static; padding: 22px 18px 18px; order: -1; /* form FIRST on mobile */ }
    .sp2-h1 { font-size: 28px; }
    .sp2-sub { font-size: 15px; }
    .sp2-mini-quote { font-size: 13px; }
    .sp2-form-h { font-size: 19px; }
    .sp2-section { padding: 48px 16px; }
    .sp2-section-head h2 { font-size: 24px; }
    .sp2-stats-inner { gap: 8px 16px; }
    .sp2-stat strong { font-size: 18px; }
    .sp2-stat-sep { display: none; }
    .sp2-preview-grid { grid-template-columns: 1fr; gap: 32px; }
    .sp2-pricing-card--featured { transform: none; }
    .sp2-pricing-card--featured:hover { transform: translateY(-3px); }
    .sp2-final-inner { flex-direction: column; align-items: stretch; text-align: center; }
    .sp2-trust-row--lg { justify-content: center; }
    .sp2-final-cta { justify-content: center; }
    .sp2-math { flex-direction: column; align-items: flex-start; text-align: left; padding: 16px; }
    .sp2-math i { font-size: 20px; }
    body.signup-cxl { padding-bottom: 76px; /* clear sticky bar */ }
    .sp2-sticky-text span { display: none; }
}


/* ============================================================
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   PFUSA BRAND-KIT SHIM
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   Maps every legacy button + hero class to the brand kit so the
   ENTIRE site visually unifies without touching template markup.

   Loaded LAST so these rules win the cascade. Anything new should
   prefer .pf-btn-* utilities directly instead of relying on this.
   ============================================================ */

/* ---------- PRIMARY CTAs → orange→red gradient (the brand action)
   Anything where the user's main desired action lives. Header CTA,
   "Sign up", "Find a plumber", "Get started", featured pricing, etc.
   ---------- */
/* PRIMARY CTAs — flat orange, no gradient, no wrappers in this list.
   Only ACTUAL <button> or <a> elements that should be CTAs. */
a.btn-nav-cta,
a.btn-hero-primary, button.btn-hero-primary,
a.btn-hiw-primary, button.btn-hiw-primary,
a.btn-hiw-biz,
a.btn-final-primary, button.btn-final-primary,
a.btn-about-primary, button.btn-about-primary,
a.btn-about-cta,
a.btn-home-search, button.btn-home-search,
button.home-search-btn,
a.btn-footer-signup,
a.btn-faq-contact,
a.btn-login-signup, button.btn-login-signup,
a.btn-pricing-featured, button.btn-pricing-featured,
a.btn-heading, button.btn-heading,
a.theme-btn,
a.lls-btn-browse,
a.hbs-btn-primary, button.hbs-btn-primary,
a.sidebar-btn-search, button.sidebar-btn-search,
a.blog-cta-btn,
a.spv2-btn-primary,
a.spv2-reviews-btn,
a.pfusa-mobile-cta,
a.cta-list,
a.btn-primary, button.btn-primary {
    background: var(--color-accent) !important;
    background-image: none !important;
    color: #fff;
    border: none !important;
    box-shadow: 0 1px 3px rgba(232,116,60,.20), 0 1px 2px rgba(0,0,0,.05) !important;
    transition: background var(--duration-base), box-shadow var(--duration-base), transform var(--duration-fast) !important;
    text-decoration: none;
}
a.btn-nav-cta:hover, a.btn-hero-primary:hover, a.btn-hiw-primary:hover,
a.btn-hiw-biz:hover, a.btn-final-primary:hover, a.btn-about-primary:hover,
a.btn-about-cta:hover, a.btn-home-search:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}

.btn-urgency {
    background: #fff !important;
    background-image: none !important;
    color: var(--color-accent);
    border: none !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.20) !important;
    text-decoration: none;
    font-weight: 800;
    transition: transform var(--duration-fast), box-shadow var(--duration-base), color var(--duration-fast);
}
.btn-urgency:hover {
    background: #fff !important;
    background-image: none !important;
    color: var(--color-accent-hover);
    box-shadow: 0 4px 18px rgba(0,0,0,.32) !important;
    transform: translateY(-1px);
}
.btn-urgency:active { transform: scale(.98); }
.btn-urgency i { color: var(--color-accent); }

/* The site-wide nav CTA + footer CTA + listings search CTA — gradient FILL
   but keep their existing padding/sizing */
.btn-nav-cta, .btn-footer-signup, .zl-search-btn {
    box-shadow: 0 4px 14px rgba(220,38,38,.30);
}

/* ---------- SECONDARY CTAs → blue solid (info / supporting action) ---------- */
/* Secondary buttons — only color/border, keep original sizing */
.btn-hero-secondary,
.btn-hiw-secondary,
.btn-about-secondary,
.btn-pricing,
.btn-hero-secondary:hover, .btn-hiw-secondary:hover, .btn-about-secondary:hover,
.btn-pricing:hover, .hbs-btn-secondary:hover, .lls-btn-home:hover,
.btn-secondary:hover {
    color: var(--ink-900);
    border-color: var(--ink-900);
    background: var(--color-bg) !important;
}

/* On dark backgrounds (hero gradients + B2B band), secondary needs to invert
   from "white pill with dark text" → "ghost pill with light text" */
.home-hero .btn-hero-secondary,
.about-hero .btn-hero-secondary,
.faq-hero .btn-hero-secondary,
.hiw-hero .btn-hero-secondary {
    background: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.95);
    border: 1.5px solid rgba(255,255,255,.30) !important;
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
}
.home-hero .btn-hero-secondary:hover,
.about-hero .btn-hero-secondary:hover,
.faq-hero .btn-hero-secondary:hover,
.hiw-hero .btn-hero-secondary:hover {
    background: rgba(255,255,255,.16) !important;
    border-color: rgba(255,255,255,.55);
    color: #fff;
}

/* ---------- HEROES → unified navy gradient, no orange stripe ---------- */
.home-hero,
.about-hero,
.faq-hero,
.hiw-hero,
.hero-section,
.blog-archive-hero,
.blog-post-hero,
.ebook-hero-header,
.innerBanner {
    background: var(--ink-900) !important;
    color: #fff;
    border-bottom: none;
    position: relative;
}
.home-hero h1, .about-hero h1, .faq-hero h1, .hiw-hero h1,
.hero-section h1, .blog-archive-hero h1, .blog-post-hero h1, .ebook-hero-header h1,
.home-hero h2, .about-hero h2, .faq-hero h2, .hiw-hero h2,
.innerBanner h1, .innerBanner .page-title,
.home-hero p, .about-hero p, .faq-hero p, .hiw-hero p, .hero-section p {
    color: #fff;
}
.home-hero p, .about-hero p, .faq-hero p, .hiw-hero p, .hero-section p,
.blog-archive-hero p, .blog-post-hero p {
    color: rgba(255,255,255,.86);
}

/* ---------- Body anchor color → brand blue ---------- */
body:not(.signup-cxl) a:not(.btn):not([class*="btn-"]):not([class*="-btn"]):not(.zl-card-name):not(.zl-card):not(.spv2-card):not(.pf-btn):not(.spv2-dir-card):not(.spv2-reviews-btn):not(.blog-topic-pill) {
    color: var(--color-accent);
}
body:not(.signup-cxl) a:not(.btn):not([class*="btn-"]):not([class*="-btn"]):not(.spv2-dir-card):not(.spv2-reviews-btn):hover {
    color: var(--color-accent-hover);
}
/* Force white text on blue/dark buttons that get overridden by global anchor rule */
a.spv2-dir-card, a.spv2-dir-card:hover,
a.spv2-dir-card:visited, a.spv2-dir-card:focus { color: #fff; }
a.spv2-reviews-btn, a.spv2-reviews-btn:hover { color: #fff; }

/* ---------- HEADER NAV — dark navy bar with white wordmark + nav ---------- */
.pfusa-brand-text {
    font-family: var(--font-sans);
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.02em;
}
.pfusa-brand-text span { color: var(--color-accent); }
.pfusa-navlinks > li > a {
    color: rgba(255,255,255,.85);
    font-family: var(--font-sans);
    font-weight: 600;
    font-size: 14px;
    transition: color var(--duration-fast) var(--ease-out);
}
.pfusa-navlinks > li > a:hover,
.pfusa-navlinks > li.current-menu-item > a,
.pfusa-navlinks > li.current_page_item > a {
    color: #fff;
}
.pfusa-mobile-toggle span { background: #fff !important; }

/* Header CTA polish — more prominent (revenue funnel entry) */

/* ---------- "Popular:" pill chips on the homepage hero (high-contrast) ---------- */
.home-popular-searches { padding-top: 6px; }
.home-popular-searches span {
    color: rgba(255,255,255,.95);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 12px;
}
.home-popular-searches a {
    color: var(--ink-900);
    background: rgba(255,255,255,.95) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
    box-shadow: 0 2px 8px rgba(0,0,0,.10);
    text-decoration: none;
}
.home-popular-searches a:hover {
    background: var(--color-star) !important;
    color: var(--ink-900);
    transform: translateY(-1px);
}

/* ---------- FOOTER — apply brand tokens ---------- */
#colophon, .site-footer { background: var(--ink-900); color: rgba(255,255,255,.78); }
.site-footer h3, .site-footer h4, .site-footer .footer-h {
    font-family: var(--font-sans);
    color: #fff;
    font-weight: 800;
}
.site-footer a { color: rgba(255,255,255,.78); transition: color var(--duration-fast) var(--ease-out); }
.site-footer a:hover { color: var(--color-star); }
.footer-cta-box, .footer-cta-inner {
    background: linear-gradient(135deg, rgba(220,38,38,.12), rgba(220,38,38,.08)) !important;
    border: 1px solid rgba(220,38,38,.20) !important;
    border-radius: var(--radius-lg);
}
.footer-cta-title, .footer-cta-label {
    font-family: var(--font-sans);
    color: #fff;
    font-weight: 800;
}

/* ---------- Mobile sticky CTA bar — apply brand gradient ---------- */
.mobile-sticky-cta .cta-call {
    background: var(--color-accent) !important;
    color: #fff;
}
.mobile-sticky-cta .cta-list {
    background: var(--color-accent) !important;
    color: #fff;
}

/* ---------- Card hover — gentle brand shadow ---------- */
.zl-card:hover, .home-listing-card:hover, .home-cat-card:hover,
.spv2-card:hover, .pfcat-card:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* ---------- Verified / rating badges ---------- */
.verified, .zl-verified-badge, .spv2-badge-verified, .hlc-verified, .sp2-mock-verified {
    background: var(--color-success) !important;
    color: #fff;
}
.zl-verified-dot { background: var(--color-success); color: #fff; }

/* ---------- WordPress default form fields → brand polish ---------- */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], textarea, select {
    font-family: var(--font-sans);
    border-radius: var(--radius-md);
    border-color: var(--color-border);
    transition: border-color var(--duration-base), box-shadow var(--duration-base);
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus,
textarea:focus, select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}

/* ---------- Selection color → brand ---------- */
::selection { background: rgba(220,38,38,.2); color: #0A0A0A; }
::-moz-selection { background: rgba(220,38,38,.2); color: #0A0A0A; }

/* ---------- Focus rings → brand orange (no longer yellow) ---------- */
:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ============================================================
   FOOTER NOTE — force the "No contract" paragraph to render as
   plain text, not as an invisible white pill (something inherited
   pill/button styling from the cascade).
   ============================================================ */
.footer-cta-note,
p.footer-cta-note {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0;
    color: rgba(255,255,255,.55);
    font-size: 12px;
    font-family: var(--font-sans);
    font-weight: 400;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    display: block !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
}

/* The CTA box stack — make sure the button + note stack vertically, not side-by-side */
.footer-cta-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
}
.footer-cta-box .btn-footer-signup {
    width: 100% !important;
    margin: 4px 0 !important;
    text-align: center !important;
    justify-content: center !important;
}

/* ---------- Page background → PURE WHITE (Stripe-style high-contrast) ---------- */
body:not(.signup-cxl) {
    background: #FFFFFF !important;
    color: var(--color-text);
}

/* Section backgrounds — alternate white and slate-50 for subtle rhythm */
.home-trust-strip { background: #fff !important; border-color: var(--color-border) !important; border-bottom: 1px solid var(--color-border) !important; }
.home-categories,
.home-listings,
.home-how-section { background: #FFFFFF !important; }

body:not(.signup-cxl) p { color: var(--color-text-muted); }

/* ---------- Wordmark sizing per context ---------- */
/* Sign-up landing nav */
.sp2-nav-logo.pfusa-brand-text {
    font-family: var(--font-sans);
    font-weight: 900;
    color: #fff;
    font-size: 22px;
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
}
.sp2-nav-logo.pfusa-brand-text span { color: var(--color-accent); }

/* Login page brand panel — larger, prominent */
.login-logo.pfusa-brand-text {
    display: inline-block;
    font-family: var(--font-sans);
    font-weight: 900;
    color: #fff;
    font-size: 28px;
    letter-spacing: -0.02em;
    text-decoration: none;
    line-height: 1;
    margin-bottom: 24px;
}
.login-logo.pfusa-brand-text span { color: var(--color-accent); }

/* Footer brand area */
.footer-brand-text {
    display: inline-block;
    font-size: 22px;
    margin-bottom: 16px;
    text-decoration: none;
    line-height: 1;
}
.footer-brand-text span { color: var(--color-accent); }

/* ---------- Login page → on-brand ---------- */
.login-page { background: var(--color-bg) !important; }
.login-brand-panel {
    background: var(--ink-900) !important;
    color: #fff;
    border-bottom: none;
}
.login-brand-panel h2,
.login-brand-panel p,
.login-brand-panel .login-feature span { color: rgba(255,255,255,.92); }
.login-brand-panel h2 {
    font-family: var(--font-sans);
    font-weight: 800;
    color: #fff;
}
.login-brand-panel .login-feature i {
    color: var(--color-star);
}
.login-form-panel {
    background: #fff !important;
    border-left: 1px solid var(--color-border);
}
.btn-login {
    background: var(--color-accent) !important;
    color: #fff;
    border: none !important;
    border-radius: var(--radius-md);
    font-family: var(--font-sans);
    font-weight: 700;
    padding: 14px 22px !important;
    width: 100%;
    box-shadow: var(--shadow-accent) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 48px;
    cursor: pointer;
    transition: filter var(--duration-base), box-shadow var(--duration-base) !important;
}


/* Login form fields use brand focus ring */
.login-input-wrap input {
    font-family: var(--font-sans);
    font-size: 15px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--color-border) !important;
}
.login-input-wrap input:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important;
}
.login-input-wrap i { color: var(--color-text-muted); }

/* ---------- Innerbanner (legacy WP archive title bar) → brand hero ---------- */
.innerBanner .page-title {
    font-family: var(--font-sans);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
}

/* ---------- "Back to top" + utility buttons ---------- */
.btt-btn, #back-to-top {
    background: var(--ink-900) !important;
    color: #fff;
    border: none !important;
    border-radius: 50%;
    box-shadow: var(--shadow-md) !important;
}
.btt-btn:hover, #back-to-top:hover {
    background: var(--color-accent) !important;
    color: #fff;
}

/* ---------- Generic .btn (Bootstrap base) → make WP form buttons on-brand ---------- */
.wp-block-button__link,
input[type="submit"] {
    background: var(--color-accent) !important;
    color: #fff;
    border: none !important;
}

/* "View Profile" listing buttons — branded blue (color only, keep sizing) */
.zl-view-btn { background: var(--color-accent); color: #fff; }
.zl-view-btn:hover { background: var(--color-accent-hover); color: #fff; }

/* Single business profile: secondary action buttons */
.spv2-btn:not(.spv2-btn-primary):not(.spv2-btn-outline) {
    background: var(--color-accent) !important;
    color: #fff;
}
.spv2-btn-outline {
    background: #fff !important;
    color: var(--ink-900);
    border: 1.5px solid var(--color-border) !important;
}
.spv2-btn-outline:hover {
    border-color: var(--ink-900);
    color: var(--ink-900);
    background: var(--color-bg) !important;
}

/* ---------- Sub-page banners (Yoast / archive titles) → align to hero look ---------- */
.sub-page-banner {
    background: var(--ink-900) !important;
    color: #fff;
    padding: 56px 24px !important;
    border-bottom: none;
}
.sub-page-banner h2 {
    font-family: var(--font-sans);
    color: #fff;
    font-weight: 800;
}
.sub-page-banner p { color: rgba(255,255,255,.85); }

/* ---------- Reusable announcement bar utility ----------
   Drop-in: <div class="pf-announce">[content]</div>
*/
.pf-announce {
    background: var(--ink-900);
    color: rgba(255,255,255,.92);
    padding: 8px 16px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 13px; font-weight: 600;
    line-height: 1.3;
    position: relative; z-index: 50;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.pf-announce-inner {
    max-width: 1180px; margin: 0 auto;
    display: inline-flex; align-items: center; gap: 10px;
    flex-wrap: wrap; justify-content: center;
}
.pf-announce strong { font-weight: 800; }
.pf-announce a { color: #fff; text-decoration: underline; font-weight: 800; margin-left: 6px; }
.pf-announce a:hover { opacity: .85; }
@media (max-width: 768px) { .pf-announce { font-size: 12px; padding: 8px 12px; } }
/* ============================================================
   PlumberFinderUSA — v6 Brand Override Block
   Single source of truth. Applied last. Wins over everything.
   Tokens: white + black + #DC2626 only.
   Inter only. No blue. No orange. No dark navy.
   Last updated: 2026-05-07
   ============================================================ */

/* ── 1. TOKEN DECLARATIONS ── */


/* ── 2. GLOBAL BASE ── */
body { font-family: var(--font-sans) !important; color: var(--color-text) !important; background: var(--color-bg) !important; -webkit-font-smoothing: antialiased !important; }
@media (max-width: 768px) { body { padding-bottom: 76px !important; } }
/* Headings: font only globally — color set per-context */
h1,h2,h3,h4,h5,h6 { font-family: var(--font-sans); letter-spacing: -.025em; }
h1 { font-weight: 900; letter-spacing: -.045em; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }
/* Dark text on light backgrounds */
/* heading colors handled by default h1-h6 rule above */
/* Hero headings always white */
.pf-hero h1, .pf-hero h2,
.pfv6 .pf-hero h1, .pfv6 .pf-hero h2,
.hero h1, .hero h2,
.spv2-hero h1, .spv2-hero h2,
.pf-section-dark h1, .pf-section-dark h2, .pf-section-dark h3,
body.home .pf-hero h1, body.home .pf-hero h2 { color: #fff; }

/* ── 3. HEADER — white sticky ── */
#masthead {
  background: rgba(255,255,255,.96) !important;
  backdrop-filter: saturate(180%) blur(14px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(14px) !important;
  border-bottom: 1px solid var(--color-border);
  box-shadow: none !important;
}
/* Brand wordmark */
.pfv6-brand, .pfusa-brand-text, .pfusa-brand-text:link, .pfusa-brand-text:visited {
  font-family: var(--font-sans);
  font-weight: 900; font-size: 19px;
  color: var(--ink-900); letter-spacing: -.04em;
  text-decoration: none; white-space: nowrap;
}
.pfv6-brand span, .pfusa-brand-text span { color: var(--color-accent); }
/* Nav container */
.pfv6-nav, .pfusa-mainnav {
  display: flex !important; align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important; margin: 0 auto !important;
  padding: 0 24px !important; min-height: 72px !important;
  background: transparent !important; height: auto !important;
}
/* Nav links */
ul#menu-main-menu, ul.pfv6-navlinks {
  display: flex !important; flex-direction: row !important;
  align-items: center !important; list-style: none !important;
  margin: 0 !important; padding: 0 !important;
  gap: 2px !important; flex: 1 !important; justify-content: center !important;
}
@media (max-width: 991px) { ul#menu-main-menu, ul.pfv6-navlinks { display: none !important; } }
ul#menu-main-menu li, ul.pfv6-navlinks li { list-style: none !important; margin: 0 !important; padding: 0 !important; position: relative !important; }
ul#menu-main-menu li a, ul.pfv6-navlinks li a {
  color: var(--ink-900) !important; font-weight: 500;
  font-size: 14.5px; font-family: var(--font-sans);
  padding: 8px 14px; border-radius: var(--radius-md);
  display: block !important; transition: color .15s, background .15s !important;
  text-decoration: none !important;
}
ul#menu-main-menu li a:hover, ul.pfv6-navlinks li a:hover { color: var(--ink-900) !important; background: var(--color-bg-muted); }
ul#menu-main-menu li.current-menu-item > a, ul.pfv6-navlinks li.current-menu-item > a { color: var(--color-accent); }
/* Sub-menus */
ul#menu-main-menu .sub-menu, ul.pfv6-navlinks .sub-menu {
  display: none !important; position: absolute !important; top: calc(100% + 8px) !important;
  left: 0 !important; z-index: 1000 !important; background: #fff !important;
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md) !important; padding: 8px !important; min-width: 180px !important;
  flex-direction: column !important; gap: 2px !important;
}
ul#menu-main-menu li:hover > .sub-menu, ul.pfv6-navlinks li:hover > .sub-menu { display: flex !important; }
/* Nav actions */
.pfv6-nav-actions { display: none !important; align-items: center !important; gap: 10px !important; }
@media (min-width: 992px) { .pfv6-nav-actions { display: flex !important; } .pfv6-mobile-toggle { display: none !important; } }
/* Nav CTA button */
.pfv6-btn-outline, .btn-nav-cta {
  display: inline-flex !important; align-items: center !important; gap: 8px !important;
  padding: 10px 16px; background: transparent; color: var(--ink-900);
  font-weight: 700; font-size: 14px; font-family: var(--font-sans);
  border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
  box-shadow: none !important; transition: all .15s var(--ease-out) !important;
}
.pfv6-btn-outline:hover, .btn-nav-cta:hover {
  border-color: var(--ink-900) !important; background: var(--color-bg-subtle) !important;
  color: var(--ink-900); transform: none;
}
/* Mobile overlay */
.pfv6-overlay { background: #fff !important; }
.pfusa-mobile-overlay { background: #fff !important; }
.pfusa-mobile-overlay a, .pfv6-overlay a { color: var(--ink-900); }

/* ── 4. FULL-BLEED SECTIONS ── */
body.home #content, body.home .site-content, body.home .site-main,
body.home #primary, body.home main, body.home .pfusa-page-content,
body.home .content-area {
  max-width: 100% !important; width: 100% !important;
  padding: 0 !important; margin: 0 !important;
  float: none !important; flex: 0 0 100% !important;
}
.pfv6 section, .pfv6 .pf-section, .pfv6 .pf-section-alt,
.pfv6 .pf-section-dark, .pfv6 .pf-trust-strip, .pfv6 .pf-ai-strip {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
  box-sizing: border-box !important;
}
.pf-container {
  max-width: 1280px !important; margin: 0 auto !important;
  padding: 0 24px !important; width: 100% !important; box-sizing: border-box !important;
}

/* ── 5. BUTTONS GLOBAL ── */
.btn-primary, .btn-cta, .btn-red, .cta-btn, .spv2-btn-primary,
input[type="submit"], button[type="submit"] {
  background: var(--color-accent) !important; border-color: var(--color-accent) !important;
  color: #fff; font-family: var(--font-sans);
  font-weight: 700; border-radius: var(--radius-md);
  box-shadow: var(--shadow-accent) !important; transition: all .15s var(--ease-out) !important;
}
.btn-primary:hover, .btn-cta:hover, input[type="submit"]:hover, button[type="submit"]:hover {
  background: var(--color-accent-hover) !important; border-color: var(--color-accent-hover) !important;
  color: #fff; transform: translateY(-1px);
}
.btn-outline-primary, .btn-light {
  background: transparent !important; border: 1.5px solid var(--color-border) !important;
  color: var(--ink-900); border-radius: var(--radius-md); font-weight: 700;
}
.btn-outline-primary:hover, .btn-light:hover {
  border-color: var(--ink-900); background: var(--color-bg-subtle); color: var(--ink-900);
}
/* Call buttons */
.call-btn, .btn-call, .lc-call, .spv2-call-btn, .listing-call-btn,
a[href^="tel:"][class*="call"], a[href^="tel:"][class*="btn"] {
  background: var(--color-accent); color: #fff;
  border-radius: var(--radius-md); font-weight: 800;
  border: none !important; transition: background .15s !important;
}
.call-btn:hover, .btn-call:hover { background: var(--color-accent-hover); color: #fff; }

/* ── 6. FORMS ── */
input[type="text"], input[type="email"], input[type="tel"],
input[type="search"], input[type="number"], select, textarea {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: #fff; color: var(--ink-900);
  font-family: var(--font-sans); font-size: 15px;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important;
  outline: none !important; background: #fff !important;
}
/* Exception: dialog textarea has its own rules */

/* ── 7. DIALOG ── */
/* ============================================================
   Plumby Chat Widget — v4 clean
   ============================================================ */

/* Dialog — no padding, no background bleed */

/* Inner column */

/* Header — flush to edges, no border-radius needed (dialog clips it) */

/* Message stream — grey, fills space */

/* Messages */

/* Typing */

/* Chips — white bg, red outlined */

/* Input bar — white, flush bottom */

/* Result cards */

/* close button removed */

/* Mobile */
@media (max-width: 640px) {
}

/* ── 8. FOOTER ── */
.site-footer a, footer#colophon a { color: #9CA3AF; text-decoration: none; }
.site-footer a:hover, footer#colophon a:hover { color: #fff; }
.site-footer h3, .site-footer h4, .footer-h, .footer-heading { color: #fff; }
.site-footer .pfusa-brand-text, .site-footer .footer-brand-text { color: #fff; }
.site-footer .pfusa-brand-text span, .site-footer .footer-brand-text span { color: var(--color-accent); }
.footer-bottom-bar { border-top: 1px solid rgba(255,255,255,.08) !important; }
.footer-copy, .footer-copy a { color: #9CA3AF; }
.footer-legal a { color: #9CA3AF; }
.footer-legal a:hover { color: #fff; }

/* ── 9. CARDS / BADGES / STARS ── */
.card { border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); background: #fff; }
.verified-badge i, .badge-verified i, .lc-verified i { color: var(--color-success); }
.star-rating, .stars, [class*="star"], .lc-stars { color: var(--color-star); }

/* ── 10. PAGINATION ── */
.page-numbers { border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--ink-900); font-weight: 600; }
.page-numbers.current, .page-numbers:hover { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

/* ── 11. GLOBAL LINK RESET ── */
a { color: inherit; text-decoration: none; }
.pf-see-all, .pf-see-all:link, .pf-see-all:visited { color: var(--color-accent); }
.pf-state-pill, .pf-state-pill:link, .pf-state-pill:visited { color: var(--ink-900); text-decoration: none; }
.pf-btn-secondary, .pf-btn-secondary:link, .pf-btn-secondary:visited { background: var(--ink-900); color: #fff; text-decoration: none; }
.pf-btn-secondary:hover { background: var(--color-accent); color: #fff; }

/* ── 12. MOBILE STICKY BAR ── */
.mobile-sticky-cta { display: none !important; }

/* ============================================================
   v6 CHAT DIALOG — ChatGPT layout (messages above, input below)
   Single source of truth. Replaces all prior dialog overrides.
   ============================================================ */

/* The modal itself */

/* Close button */

/* Inner: column flex — stream grows, input fixed bottom */

/* Message stream — takes all available space */

/* Suggestion chips — show when no messages, hide after first send */

/* Input row — pinned at bottom */

/* Chat messages */

/* Result cards */


@media (max-width: 768px) {
}

/* sp2 signup page — LEFT SIDE dark hero text must be white */
/* Scope to sp2-left ONLY — not the form card which is white bg */
.sp2-left, .sp2-left p, .sp2-left li,
.sp2-left .sp2-sub, .sp2-left .sp2-bullets li { color: #fff; }
.sp2-hero .sp2-h1 { color: #fff; font-size: clamp(32px,4.4vw,52px); }
.sp2-hero .sp2-h1 span, .sp2-hero .sp2-h1-highlight { color: #fff; }
.sp2-hero h1, .sp2-hero h2 { color: #fff; }
/* Keep green checkmarks */
.sp2-left .sp2-bullets li i { color: #4ADE80; }
/* Form card overrides — white bg needs dark text */
.sp2-form-card, .sp2-form-card * { color: #0A0A0A; }
.sp2-form-card .sp2-form-h { color: #0A0A0A; }
.sp2-form-card .sp2-plan-name,
.sp2-form-card .sp2-plan-price,
.sp2-form-card .sp2-plan-sub { color: #0A0A0A; }
.sp2-form-card .sp2-plan-price small { color: #6B7280; }
.sp2-form-card input { color: #0A0A0A; }
.sp2-form-card input::placeholder { color: #9CA3AF; }
/* Keep form button white text */
.sp2-checkout-btn, .sp2-checkout-btn * { color: #fff; }
.sp2-form-tag, .sp2-form-tag * { color: #fff; }
.sp2-plan-badge, .sp2-plan-badge * { color: #fff; }
.sp2-trust-row, .sp2-trust-row * { color: #6B7280; }
.sp2-trust-row i { color: #15803D; }

/* sp2-ai-section */
.sp2-ai-section { background: var(--ink-900,#0A0A0A); color: #fff; padding: 56px 24px; }
.sp2-ai-section h2, .sp2-ai-section h3,
body .sp2-ai-section h2, body .sp2-ai-section h3 { color: #fff; }
.sp2-ai-section p { color: rgba(255,255,255,.85); }
/* AI section inner layout */
.sp2-ai-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.sp2-ai-sub { font-size: 1.05rem; max-width: 640px; margin: 0 auto var(--space-8,32px); color: rgba(255,255,255,.75); }
/* AI platform cards grid */
.sp2-ai-cards { display: flex; flex-wrap: wrap; gap: var(--space-4,16px); justify-content: center; margin-bottom: var(--space-8,32px); }
.sp2-ai-card {
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: var(--radius-lg,12px); padding: 18px 24px; min-width: 160px;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.sp2-ai-card-icon { font-size: 1.5rem; margin-bottom: 2px; line-height: 1; }
.sp2-ai-card strong { color: #fff; display: block; font-weight: 700; font-size: 0.95rem; }
.sp2-ai-card span { color: rgba(255,255,255,.6); font-size: 0.85rem; }
/* AI section eyebrow (red on dark) */
.sp2-eyebrow--ai { color: var(--red-600,#DC2626); margin-bottom: var(--space-4,16px); display: inline-flex; align-items: center; gap: 6px; }
/* AI section CTA button */
.sp2-ai-cta {
    display: inline-block; padding: 14px 32px;
    background: var(--red-600,#DC2626); color: #fff;
    border-radius: var(--radius-md,8px); font-weight: 700; font-size: 1rem;
    text-decoration: none; transition: filter .15s, transform .12s;
}
.sp2-ai-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
/* Promo banner (warm amber) */
.sp2-promo-banner {
    background: #FFF7ED; border: 1px solid #FED7AA; border-radius: var(--radius-md,8px);
    padding: 10px 14px; margin-bottom: 12px; font-size: 13px; color: #92400E;
}

/* sp2-final — dark bg, all text white — must beat body:not(.home) h* rules */
.sp2-final h2, .sp2-final h3, .sp2-final p,
.sp2-final *, .sp2-final-text { color: #fff; }
.sp2-final .sp2-final-cta a { color: #fff; }
body .sp2-final h2,
body .sp2-final h3,
body .sp2-final .sp2-final-text h2,
body .sp2-final-text h2 { color: #fff; }
/* sp2-final eyebrow on dark */
.sp2-final .sp2-eyebrow,
.sp2-final .sp2-eyebrow--dark { color: rgba(255,255,255,.85); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.20); }

/* ── Typography: font system globally, color by context ── */
h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-sans);
  letter-spacing: -.025em;
  line-height: 1.15;
}
h1 { font-weight: 900; letter-spacing: -.045em; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }

/* Default: dark text on light backgrounds */
h1, h2, h3, h4, h5, h6 { color: var(--ink-900); }

/* Dark section overrides — white text */
.pf-hero h1, .pf-hero h2,
.pfv6 .pf-hero h1, .pfv6 .pf-hero h2,
.spv2-hero h1, .spv2-hero h2,
.sp2-hero h1, .sp2-hero h2, .sp2-hero h3,
.pf-section-dark h1, .pf-section-dark h2, .pf-section-dark h3,
.sp2-final h2, .sp2-final h3,
.sp2-ai-section h2, .sp2-ai-section h3,
.pros-section h2,
[style*="background:#0A0A0A"] h2,
[style*="background: #0A0A0A"] h2 { color: #fff; }
/* Plumby chat footer */


/* ============================================================
   PFUSA Specialty Page — Full Design System v2
   ============================================================ */

/* Page wrapper */
.pfspec-page { background: var(--color-bg-subtle); }

/* ── Hero ── */
.pfspec-hero {
    background: linear-gradient(135deg, #0A0A0A 0%, #1F2937 60%, #0A0A0A 100%);
    padding: 72px 24px 60px; text-align: center; position: relative; overflow: hidden;
}
.pfspec-hero::before {
    content: ''; position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% -20%, var(--spec-color, #DC2626) 0%, transparent 60%);
    opacity: .25; pointer-events: none;
}
.pfspec-hero-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; }
.pfspec-hero-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
    color: #D1D5DB; font-size: 12px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; padding: 6px 16px; border-radius: 999px; margin-bottom: 20px;
}
.pfspec-hero-eyebrow i { color: var(--spec-color, #DC2626); }
.pfspec-hero-h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(32px, 5vw, 56px); font-weight: 400;
    color: #fff; line-height: 1.1; margin: 0 0 16px;
}
.pfspec-hero-sub { font-size: 17px; color: #9CA3AF; margin: 0 0 32px; max-width: 560px; margin-left: auto; margin-right: auto; }
.pfspec-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-bottom: 28px; }
.pfspec-hero-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--spec-color, #DC2626); color: #fff;
    padding: 14px 28px; border-radius: 12px; font-weight: 700; font-size: 15px;
    text-decoration: none; transition: filter .15s, transform .12s;
}
.pfspec-hero-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; }
.pfspec-hero-btn-secondary {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: #fff;
    padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 15px;
    text-decoration: none; transition: background .15s;
}
.pfspec-hero-btn-secondary:hover { background: rgba(255,255,255,.18); color: #fff; }
.pfspec-hero-trust {
    display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;
}
.pfspec-hero-trust span { font-size: 13px; color: #6B7280; display: flex; align-items: center; gap: 6px; }
.pfspec-hero-trust i { color: #16A34A; }

/* ── Body layout ── */
.pfspec-body { max-width: 1280px; margin: 0 auto; padding: 48px 24px 80px; }
.pfspec-layout { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }
@media (max-width: 960px) { .pfspec-layout { grid-template-columns: 1fr; } .pfspec-sidebar { display: none; } }

/* ── Article content ── */
.pfspec-article {
    background: #fff; border-radius: 20px; padding: 40px 44px;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pfspec-article h1 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(28px,4vw,40px); font-weight: 400; color: #0A0A0A;
    margin: 0 0 16px; line-height: 1.2;
}
.pfspec-article h2 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(22px,3vw,30px); font-weight: 400;
    color: #0A0A0A; margin: 48px 0 16px;
    padding-bottom: 12px; border-bottom: 2px solid #F3F4F6;
    scroll-margin-top: 80px;
}
.pfspec-article h2:first-of-type { margin-top: 0; }
.pfspec-article h3 { font-size: 17px; font-weight: 700; color: #0A0A0A; margin: 24px 0 8px; }
.pfspec-article p { font-size: 15px; line-height: 1.75; color: #374151; margin: 0 0 16px; }
.pfspec-article ul, .pfspec-article ol { font-size: 15px; line-height: 1.75; color: #374151; margin: 0 0 20px; padding-left: 24px; }
.pfspec-article li { margin-bottom: 8px; }
.pfspec-article strong { color: #0A0A0A; font-weight: 700; }
.pfspec-article em { font-size: 13px; color: #6B7280; font-style: normal; display: block; margin: -8px 0 16px; }
.pfspec-article a { color: #DC2626; text-decoration: none; }
.pfspec-article a:hover { text-decoration: underline; }

/* TOC */
.pfspec-article nav.pfspec-toc {
    background: var(--color-bg-subtle); border: 1px solid #E5E7EB;
    border-left: 4px solid #DC2626; border-radius: 0 12px 12px 0;
    padding: 20px 24px; margin-bottom: 40px;
}
.pfspec-toc h2 { font-family: 'Inter',sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #9CA3AF; margin: 0 0 12px; padding: 0; border: none; }
.pfspec-toc ul { margin: 0; padding-left: 16px; }
.pfspec-toc li { margin-bottom: 6px; }
.pfspec-toc a { font-size: 14px; font-weight: 500; color: #DC2626; }

/* Cost table */
.pfspec-article table.pfspec-table {
    width: 100%; border-collapse: collapse; margin: 16px 0 28px;
    font-size: 14px; border-radius: 12px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.pfspec-article .pfspec-table th {
    background: #0A0A0A; color: #fff; text-align: left;
    padding: 12px 16px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.pfspec-article .pfspec-table td { padding: 12px 16px; border-bottom: 1px solid #F3F4F6; color: #374151; }
.pfspec-article .pfspec-table tr:last-child td { border-bottom: none; }
.pfspec-article .pfspec-table tr:nth-child(even) td { background: var(--color-bg-subtle); }
.pfspec-article .pfspec-table tr:hover td { background: #FEF2F2; }

/* State grid */
.pfspec-states-grid {
    display: grid; gap: 8px;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    margin-top: 16px;
}
.pfspec-state-link {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: var(--color-bg-subtle);
    border: 1px solid #E5E7EB; border-radius: 10px;
    text-decoration: none; color: #1F2937;
    font-size: 13px; font-weight: 500;
    transition: border-color .12s, background .12s, color .12s;
}
.pfspec-state-link span { font-size: 12px; color: #9CA3AF; }
.pfspec-state-link:hover { border-color: #DC2626; background: #FEF2F2; color: #DC2626; }
.pfspec-state-link:hover span { color: #DC2626; }

/* CTA section */
.pfspec-cta-section {
    background: linear-gradient(135deg, #0A0A0A 0%, #1F2937 100%);
    border-radius: 16px; padding: 40px; margin-top: 48px;
    border: 1px solid rgba(255,255,255,.05);
}
.pfspec-cta-section h2 {
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: clamp(22px,3vw,28px); font-weight: 400;
    color: #fff; border: none; margin: 0 0 12px; padding: 0;
}
.pfspec-cta-section p { color: #9CA3AF; font-size: 15px; }
.pfspec-cta-section ul { color: #D1D5DB; }
.pfspec-cta-section li { color: #D1D5DB; }
.pfspec-cta-section strong { color: #fff; }
.pfspec-cta-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #DC2626; color: #fff; text-decoration: none;
    padding: 14px 28px; border-radius: 12px; font-weight: 700; font-size: 15px;
    margin-top: 20px; transition: background .15s, transform .12s;
}
.pfspec-cta-btn:hover { background: #B91C1C; transform: translateY(-1px); }

/* ── Sidebar ── */
.pfspec-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.pfspec-sidebar-card {
    background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pfspec-sidebar-icon {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; margin-bottom: 14px;
}
.pfspec-sidebar-card h3 { font-size: 16px; font-weight: 700; color: #0A0A0A; margin: 0 0 8px; }
.pfspec-sidebar-card p { font-size: 13px; color: #6B7280; margin: 0 0 16px; line-height: 1.5; }
.pfspec-sidebar-btn {
    display: block; text-align: center; padding: 10px 16px; border-radius: 10px;
    background: var(--ink-900); color: #fff; font-size: 14px; font-weight: 700;
    text-decoration: none; transition: background .15s;
}
.pfspec-sidebar-btn:hover { background: #B91C1C; }
.pfspec-sidebar-btn-green { background: #16A34A; }
.pfspec-sidebar-btn-green:hover { background: #15803D; }
.pfspec-stat-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid #F3F4F6; }
.pfspec-stat-row:last-child { border-bottom: none; }
.pfspec-stat-num { font-size: 20px; font-weight: 800; color: #DC2626; }
.pfspec-stat-label { font-size: 13px; color: #6B7280; }

/* Mobile */
@media (max-width: 640px) {
    .pfspec-hero { padding: 48px 16px 40px; }
    .pfspec-body { padding: 24px 16px 60px; }
    .pfspec-article { padding: 24px 20px; border-radius: 16px; }
    .pfspec-hero-actions { flex-direction: column; align-items: center; }
    .pfspec-states-grid { grid-template-columns: 1fr 1fr; }
    .pfspec-cta-section { padding: 28px 20px; }
}
/* ── Nav Specialties Dropdown ── */
.pfv6-has-dropdown { position: relative; }
.pfv6-subnav {
    display: none; position: absolute; top: calc(100% + 8px); left: 50%;
    transform: translateX(-50%);
    background: #fff; border: 1px solid #E5E7EB; border-radius: 14px;
    padding: 8px; min-width: 210px; list-style: none; margin: 0;
    box-shadow: 0 8px 28px rgba(0,0,0,.12); z-index: 9999;
}
.pfv6-has-dropdown:hover .pfv6-subnav { display: block; }
.pfv6-subnav li a {
    display: block; padding: 8px 14px; border-radius: 8px;
    color: #1F2937; font-size: 14px; font-weight: 500;
    text-decoration: none; white-space: nowrap;
    transition: background .12s, color .12s;
}
.pfv6-subnav li a:hover { background: var(--color-bg-subtle); color: #DC2626; }
.pfv6-subnav-all a { color: #DC2626; font-weight: 700; border-top: 1px solid #F3F4F6; margin-top: 4px; padding-top: 12px; }

/* Specialty page — ensure clear separation from footer */
#pfspec-main { padding-bottom: 0 !important; }
#pfspec-main + footer, #pfspec-main ~ footer { margin-top: 0; }
.pfspec-cta-section { margin-bottom: 0; border-radius: 16px 16px 0 0; }

/* Specialty page — white gap before footer so it doesn't blend with dark CTA */
#pfspec-main { padding-bottom: 48px; background: #fff; }

/* Chat result photo */

/* ============================================================
   MOBILE USABILITY PASS — 2026-05-08
   Covers: specialty pages, categories, homepage, nav, tables
   ============================================================ */

/* ── Global ── */
html, body { overflow-x: hidden !important; max-width: 100vw; }
img, video, iframe { max-width: 100%; height: auto; }
* { box-sizing: border-box; }

/* ── Specialty page hero ── */
@media (max-width: 640px) {
  .pfspec-hero { padding: 40px 16px 32px; }
  .pfspec-hero-h1 { font-size: 28px; line-height: 1.2; }
  .pfspec-hero-sub { font-size: 15px; }
  .pfspec-hero-actions { flex-direction: column; align-items: stretch; }
  .pfspec-hero-btn-primary,
  .pfspec-hero-btn-secondary { justify-content: center; padding: 14px 20px; width: 100%; }
  .pfspec-hero-trust { flex-direction: column; gap: 8px; align-items: center; }
  .pfspec-body { padding: 20px 16px 48px; }
  .pfspec-article { padding: 20px 16px; border-radius: 14px; }
  .pfspec-article h2 { font-size: 22px; margin-top: 36px; }
  .pfspec-article h3 { font-size: 16px; }
  .pfspec-article p, .pfspec-article li { font-size: 15px; line-height: 1.65; }
  .pfspec-cta-section { padding: 24px 16px; border-radius: 12px; }
  .pfspec-cta-btn { width: 100%; justify-content: center; padding: 14px 20px; }
  .pfspec-states-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .pfspec-state-link { font-size: 12px; padding: 8px 10px; }
  /* Responsive cost table */
  .pfspec-table { font-size: 13px; display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pfspec-table thead, .pfspec-table tbody, .pfspec-table tr { display: table; width: 100%; table-layout: fixed; }
  .pfspec-toc { padding: 14px 16px; }
  .pfspec-toc a { font-size: 13px; }
}

/* ── Categories page ── */
@media (max-width: 640px) {
  .pfcat-hero { padding: 40px 16px 32px; }
  .pfcat-hero-title { font-size: 28px; }
  .pfcat-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pfcat-card { padding: 14px; border-radius: 14px; }
  .pfcat-card-icon-wrap { width: 40px; height: 40px; font-size: 17px; margin-bottom: 10px; }
  .pfcat-card-name { font-size: 13px; }
  .pfcat-card-blurb { font-size: 12px; display: none; } /* hide blurb on smallest screens */
  .pfcat-card-guide-link { font-size: 12px; }
  .pfcat-search-wrap input { font-size: 16px; } /* prevent iOS zoom */
}
@media (max-width: 380px) {
  .pfcat-grid { grid-template-columns: 1fr; }
  .pfcat-card-blurb { display: block; font-size: 13px; }
}

/* ── Homepage chat ── */
@media (max-width: 640px) {
  .pf-hero h1 { font-size: 28px; }
  .pf-hero-sub { font-size: 15px; }
  .pf-chat-result-name { max-width: 130px; font-size: 12px; }
}

/* ── Featured listing cards (homepage) ── */
@media (max-width: 640px) {
  .pf-listings-grid { grid-template-columns: 1fr !important; }
  .pf-listing-card { border-radius: 12px; }
}
@media (min-width: 480px) and (max-width: 768px) {
  .pf-listings-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ── Search/listings page ── */
@media (max-width: 768px) {
  .zl-listings-grid { grid-template-columns: 1fr !important; }
  .zl-card { border-radius: 12px; }
  .zl-card-body { padding: 12px; }
  .zl-filters { flex-direction: column; gap: 8px; }
}

/* ── Nav mobile ── */
@media (max-width: 991px) {
  .pfv6-has-dropdown .pfv6-subnav { display: none !important; } /* no dropdown on mobile */
}

/* ── Forms — prevent iOS auto-zoom ── */
@media (max-width: 640px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="search"],
  textarea,
  select { font-size: 16px; }
}

/* ── Touch targets — min 44px ── */
@media (max-width: 768px) {
  .pfspec-cta-btn,
  .pfspec-hero-btn-primary,
  .pfspec-hero-btn-secondary,
  .pfspec-sidebar-btn,
  .pfcat-card-guide-link,
  .pfv6-mobile-bar a,
  .pf-mcb-search,
  .pf-mcb-emergency { min-height: 44px; display: flex; align-items: center; }
}

/* ── Global: all red buttons get white text — no exceptions ── */
a[style*="background:#DC2626"], a[style*="background: #DC2626"],
button[style*="background:#DC2626"], button[style*="background: #DC2626"],
.btn-red, .btn-primary, .pf-btn-primary,
[class*="cta-btn"], [class*="btn-cta"],
.pfspec-cta-btn, .pfspec-hero-btn-primary, .pfspec-sidebar-btn,
.pfcat-btn-primary, .pfv6-overlay-cta, .sp2-cta-btn, .sp2-plan-btn,
.pf-hero-cta, .pf-mcb-emergency,
a.pfspec-cta-btn, a[class*="cta-btn"] {
    color: #ffffff;
}
/* Specifically catch any element with red/DC2626 background */
[style*="background-color:#DC2626"], [style*="background-color: #DC2626"],
[style*="background:#DC2626"], [style*="background: #DC2626"] {
    color: #ffffff;
}




/* ══════════════════════════════════════
   BLOG ARCHIVE PAGE
   ══════════════════════════════════════ */

.blog-archive-hero {
  background: #0A0A0A;
  padding: 64px 24px 56px;
  text-align: center;
}
.blog-archive-hero h1 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.blog-archive-hero p,
.blog-archive-hero p p {
  font-size: 17px;
  color: rgba(255,255,255,.65);
  margin: 0;
}

.blog-topic-filter {
  background: #fff;
  border-bottom: 1px solid #E5E7EB;
  padding: 14px 0;
  position: sticky;
  top: 64px;
  z-index: 50;
}
.blog-topic-filter .container {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.blog-topic-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  background: #F3F4F6;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: all .15s;
  white-space: nowrap;
}
.blog-topic-pill:hover { background: #E5E7EB; color: #0A0A0A; }
.blog-topic-pill.is-active { background: #0A0A0A; color: #fff; border-color: #0A0A0A; }
.btp-count { background: rgba(0,0,0,.12); font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 999px; }
.blog-topic-pill.is-active .btp-count { background: rgba(255,255,255,.2); }

.blog-archive-content { padding: 48px 0 80px; background: #FAFAFA; }

.blog-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 1024px) { .blog-archive-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-archive-grid { grid-template-columns: 1fr; } }

.blog-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #E5E7EB;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s, transform .2s;
}
.blog-card:hover { box-shadow: 0 8px 32px rgba(0,0,0,.10); transform: translateY(-2px); }

.blog-card-featured {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
@media (max-width: 768px) {
  .blog-card-featured {
    grid-column: 1;
    display: flex;
    flex-direction: column;
  }
  .blog-card-featured .blog-card-img-wrap {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16/9;
  }
  .blog-card-featured .blog-card-body {
    padding: 20px;
    justify-content: flex-start;
  }
}

.blog-card-img-wrap {
  display: block;
  overflow: hidden;
  position: relative;
  aspect-ratio: 16/9;
  background: #F3F4F6;
}
.blog-card-featured .blog-card-img-wrap { aspect-ratio: unset; min-height: 280px; height: 100%; }
.blog-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; display: block; }
.blog-card:hover .blog-card-img { transform: scale(1.03); }

.blog-card-cat {
  position: absolute;
  top: 12px; left: 12px;
  background: #DC2626; color: #fff;
  font-size: 11px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

.blog-card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 10px;
}
.blog-card-featured .blog-card-body { padding: 32px 36px; justify-content: center; }

.blog-card-meta { display: flex; gap: 16px; font-size: 12px; color: #9CA3AF; }
.blog-card-meta i { margin-right: 4px; }

.blog-card-title { font-size: 17px; font-weight: 800; color: #0A0A0A; line-height: 1.3; letter-spacing: -0.02em; margin: 0; }
.blog-card-featured .blog-card-title { font-size: clamp(20px, 2.5vw, 28px); }
.blog-card-title a { color: #0A0A0A; text-decoration: none; }
.blog-card-title a:hover { color: #DC2626; }

.blog-card-excerpt { font-size: 14px; color: #6B7280; line-height: 1.65; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.blog-card-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: #DC2626; text-decoration: none; margin-top: auto; padding-top: 4px; transition: gap .15s; }
.blog-card-link:hover { gap: 10px; }
.blog-card-no-img { display: flex; align-items: center; justify-content: center; min-height: 180px; background: #F3F4F6; color: #9CA3AF; font-size: 32px; }

.blog-pagination { padding: 40px 0 0; text-align: center; }
.blog-empty { text-align: center; padding: 80px 24px; color: #9CA3AF; }
.blog-empty i { font-size: 48px; margin-bottom: 16px; display: block; }
.blog-empty h3 { color: #374151; margin-bottom: 8px; }

/* ══════════════════════════════════════
   SINGLE BLOG POST
   ══════════════════════════════════════ */

.blog-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: #DC2626;
  width: 0;
  z-index: 9999;
  transition: width .1s linear;
}

.blog-post-hero { background: #0A0A0A; padding: 28px 0; }

/* Breadcrumb — single line, no wrap, ellipsis on last segment */
.blog-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  overflow: hidden;
  white-space: nowrap;
}
.blog-breadcrumb a {
  color: rgba(255,255,255,.75);
  text-decoration: none;
  flex-shrink: 0;
}
.blog-breadcrumb a:hover,
.blog-breadcrumb a:link,
.blog-breadcrumb a:visited { color: rgba(255,255,255,.75); }
.blog-breadcrumb a:hover { color: #fff; }
.blog-breadcrumb span {
  color: rgba(255,255,255,.35);
  padding: 0 6px;
  flex-shrink: 0;
}
.blog-breadcrumb span:last-child {
  color: rgba(255,255,255,.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0;
  flex-shrink: 1;
  min-width: 0;
}

.blog-post-content { background: #FAFAFA; padding: 48px 0 80px; }

.blog-post-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}
@media (max-width: 960px) { .blog-post-layout { grid-template-columns: 1fr; } .blog-post-sidebar { display: none; } }

.blog-post-main { background: #fff; border-radius: 16px; border: 1px solid #E5E7EB; overflow: hidden; }
.blog-post-header { padding: 40px 40px 0; }
@media (max-width: 640px) { .blog-post-header { padding: 24px 20px 0; } }

.blog-post-meta-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.blog-cat-pill {
  display: inline-flex;
  align-items: center;
  background: #DC2626;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  text-decoration: none;
  line-height: 1;
  height: auto;
  min-height: 0;
}
.blog-meta-date, .blog-meta-read { font-size: 13px; color: #9CA3AF; }
.blog-meta-date i, .blog-meta-read i { margin-right: 4px; }

.blog-post-title { font-size: clamp(24px, 3.5vw, 38px); font-weight: 900; color: #0A0A0A; line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 20px; }

.blog-post-byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid #F3F4F6; margin-bottom: 24px; }
.blog-byline-author { font-size: 13px; color: #374151; font-weight: 700; }
.blog-byline-author i { margin-right: 6px; color: #9CA3AF; }
.blog-byline-share { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #9CA3AF; }
.blog-byline-share a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-height: 0;
  min-width: 0;
  border-radius: 50%;
  background: #F3F4F6;
  color: #374151;
  font-size: 13px;
  text-decoration: none;
  transition: background .15s, color .15s;
  flex-shrink: 0;
  box-sizing: content-box;
  padding: 0;
}
.blog-byline-share a:hover { background: #DC2626; color: #fff; }
a.blog-byline-share a,
a.blog-byline-share a:link,
a.blog-byline-share a:visited { color: #374151; }

.blog-post-featured-img { margin: 0 40px 32px; border-radius: 14px; overflow: hidden; }
@media (max-width: 640px) { .blog-post-featured-img { margin: 0 20px 24px; } }
.blog-feat-img { width: 100%; height: auto; display: block; }

.blog-post-body { padding: 0 40px 32px; font-size: 16px; line-height: 1.75; color: #374151; }
@media (max-width: 640px) { .blog-post-body { padding: 0 20px 24px; } }
.blog-post-body h2 { font-size: clamp(19px, 2.5vw, 26px); font-weight: 900; color: #0A0A0A; margin: 48px 0 16px; letter-spacing: -0.025em; padding-bottom: 10px; border-bottom: 2px solid #F3F4F6; }
.blog-post-body h2:first-of-type { margin-top: 28px; }
.blog-post-body h3 { font-size: 17px; font-weight: 800; color: #1F2937; margin: 32px 0 10px; }
.blog-post-body p { margin: 0 0 18px; }
.blog-post-body ul, .blog-post-body ol { padding-left: 24px; margin: 0 0 18px; }
.blog-post-body li { margin-bottom: 8px; }
.blog-post-body a { color: #DC2626; text-decoration: none; }
.blog-post-body a:hover { text-decoration: underline; }
.blog-post-body strong { color: #0A0A0A; font-weight: 700; }
.blog-post-body table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 14px; }
.blog-post-body th { background: #0A0A0A; color: #fff; padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.blog-post-body td { padding: 10px 14px; border-bottom: 1px solid #F3F4F6; color: #374151; }
.blog-post-body tr:last-child td { border-bottom: none; }
.blog-post-body tr:nth-child(even) td { background: #FAFAFA; }

.blog-post-cta { margin: 0 40px 32px; background: linear-gradient(135deg, #0A0A0A, #1F2937); border-radius: 16px; padding: 28px; }
@media (max-width: 640px) { .blog-post-cta { margin: 0 20px 24px; } }
.blog-cta-inner { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.blog-cta-icon { width: 48px; height: 48px; background: #DC2626; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: #fff; flex-shrink: 0; }
.blog-post-cta h3 { color: #fff; font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.blog-post-cta p { color: rgba(255,255,255,.7); font-size: 13px; margin: 0; }
.blog-cta-btn { display: inline-flex; align-items: center; gap: 8px; background: #DC2626; color: #fff; padding: 12px 24px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; white-space: nowrap; margin-left: auto; transition: background .15s; }
.blog-cta-btn:hover { background: #B91C1C; }
a.blog-cta-btn { color: #fff; }

.blog-post-tags { padding: 20px 40px 28px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: #9CA3AF; border-top: 1px solid #F3F4F6; }
.blog-tag { display: inline-block; background: #F3F4F6; color: #374151; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; text-decoration: none; }
.blog-tag:hover { background: #E5E7EB; color: #0A0A0A; }

.blog-post-sidebar { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 80px; }
.sidebar-cta-card { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 24px; text-align: center; }
.sidebar-cta-icon { width: 48px; height: 48px; min-height: 0; background: #DC2626; color: #fff; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 14px; }
.sidebar-cta-card h3 { font-size: 16px; font-weight: 800; color: #0A0A0A; margin: 0 0 8px; }
.sidebar-cta-card p { font-size: 13px; color: #6B7280; margin: 0 0 16px; }
.sidebar-btn-search { display: flex; align-items: center; justify-content: center; gap: 8px; background: #0A0A0A; color: #fff; padding: 12px 20px; border-radius: 10px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .15s; }
.sidebar-btn-search:hover { background: #DC2626; }

.sidebar-emergency { display: flex; align-items: center; gap: 14px; background: #DC2626; color: #fff; border-radius: 14px; padding: 18px 20px; text-decoration: none; transition: background .15s; }
.sidebar-emergency:hover { background: #B91C1C; }
.sidebar-emergency i { font-size: 22px; flex-shrink: 0; }
.sidebar-emergency strong { display: block; font-size: 14px; font-weight: 800; }
.sidebar-emergency span { font-size: 12px; opacity: .85; }

.sidebar-recent { background: #fff; border: 1px solid #E5E7EB; border-radius: 16px; padding: 20px; }
.sidebar-section-title { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: #9CA3AF; margin: 0 0 14px; }
.sidebar-recent-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid #F3F4F6; text-decoration: none; }
.sidebar-recent-item:last-child { border-bottom: none; }
.sri-thumb { width: 60px; height: 60px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #F3F4F6; }
.sri-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sri-title { display: block; font-size: 13px; font-weight: 600; color: #0A0A0A; line-height: 1.4; margin-bottom: 4px; }
.sidebar-recent-item:hover .sri-title { color: #DC2626; }
.sri-date { font-size: 11px; color: #9CA3AF; }

.blog-related { background: #F3F4F6; padding: 60px 0 72px; border-top: 1px solid #E5E7EB; }
.blog-related-title { font-size: clamp(20px, 2.5vw, 28px); font-weight: 900; color: #0A0A0A; margin: 0 0 32px; letter-spacing: -0.03em; }
.blog-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 768px) { .blog-related-grid { grid-template-columns: 1fr; } }
.blog-related-grid .blog-card { border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid #E5E7EB; text-decoration: none; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.blog-related-grid .blog-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,.09); transform: translateY(-2px); }
.blog-related-grid .blog-card-img { aspect-ratio: 16/9; overflow: hidden; background: #F3F4F6; }
.blog-related-grid .blog-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-related-grid .blog-card-body { padding: 16px; }
.blog-related-grid .blog-card-body h3 { font-size: 14px; font-weight: 700; color: #0A0A0A; margin: 0 0 6px; line-height: 1.4; }
.blog-related-grid .blog-card-body span { font-size: 12px; color: #9CA3AF; }
.blog-related-grid .blog-card-body i { margin-right: 4px; }

/* NAV FINAL AUTHORITY */
.pfv6-navlinks a,
.pfv6-navlinks a:link,
.pfv6-navlinks a:visited,
ul.pfv6-navlinks li a,
ul#menu-main-menu li a {
  color: #0A0A0A !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
  text-decoration: none !important;
}
.pfv6-navlinks a:hover,
ul.pfv6-navlinks li a:hover,
ul#menu-main-menu li a:hover {
  color: #0A0A0A !important;
  background: #F3F4F6 !important;
}


/* ══════════════════════════════════════
   LOGIN PAGE — full layout
   ══════════════════════════════════════ */

.login-page { background: #FAFAFA !important; min-height: 100vh; display: flex; align-items: stretch; }
.login-page .container { max-width: 100% !important; padding: 0 !important; width: 100% !important; }

.login-layout {
  display: grid;
  grid-template-columns: 420px 1fr;
  min-height: calc(100vh - 64px);
}
@media (max-width: 768px) {
  .login-layout { grid-template-columns: 1fr; }
}

.login-brand-panel {
  background: #0A0A0A !important;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-logo.pfusa-brand-text {
  font-family: 'Inter', sans-serif !important;
  font-weight: 900 !important;
  font-size: 22px !important;
  color: #fff !important;
  text-decoration: none !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 40px !important;
  display: block !important;
}
.login-logo.pfusa-brand-text span { color: #DC2626 !important; }
.login-brand-panel h2 {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
}
.login-brand-panel > p {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  margin: 0 0 36px;
  line-height: 1.6;
}
.login-brand-features {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.login-feature {
  display: flex;
  align-items: center;
  gap: 14px;
}
.login-feature i {
  width: 36px; height: 36px;
  background: rgba(255,255,255,.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  color: #F59E0B;
  flex-shrink: 0;
}
.login-feature span {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.85);
}

.login-form-panel {
  background: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 48px;
}
.login-form-inner {
  width: 100%;
  max-width: 400px;
}
.login-form-inner > h2 {
  font-family: 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #0A0A0A;
  letter-spacing: -0.03em;
  margin: 0 0 8px;
}
.login-form-inner > p {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 28px;
}
.login-form-inner > p a { color: #DC2626; text-decoration: none; font-weight: 600; }

.login-field { margin-bottom: 18px; }
.login-field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}
.login-input-wrap {
  position: relative;
}
.login-input-wrap i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9CA3AF;
  font-size: 14px;
  pointer-events: none;
}
.login-input-wrap input {
  width: 100%;
  padding: 12px 14px 12px 40px !important;
  font-size: 15px;
  border: 1.5px solid #E5E7EB !important;
  border-radius: 10px !important;
  outline: none;
  transition: border-color .15s;
  background: #fff;
  color: #0A0A0A;
}
.login-input-wrap input:focus {
  border-color: #DC2626 !important;
  box-shadow: 0 0 0 3px rgba(220,38,38,.1) !important;
}

.login-options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6B7280;
  cursor: pointer;
}
.login-forgot {
  font-size: 13px;
  color: #DC2626;
  text-decoration: none;
  font-weight: 600;
}

.btn-login {
  width: 100% !important;
  background: #DC2626 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  padding: 14px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer;
  transition: background .15s, transform .1s;
  margin-bottom: 20px;
}
.btn-login:hover { background: #B91C1C !important; transform: translateY(-1px); }

.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #9CA3AF;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #E5E7EB;
}

.btn-login-signup {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: 1.5px solid #E5E7EB;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  color: #0A0A0A !important;
  text-decoration: none !important;
  background: #fff;
  transition: border-color .15s, background .15s;
}
.btn-login-signup:hover { border-color: #0A0A0A; background: #FAFAFA; }

.login-already {
  text-align: center;
  padding: 40px 20px;
  color: #6B7280;
}
.login-already i { font-size: 40px; color: #15803D; margin-bottom: 12px; display: block; }
.login-already a { color: #DC2626; font-weight: 600; text-decoration: none; }

/* ══════════════════════════════════════
   CONTACT PAGE — full layout
   ══════════════════════════════════════ */

.pfct-hero {
  background: #0A0A0A;
  padding: 64px 24px 56px;
  text-align: center;
}
.pfct-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.04em;
  margin: 0 0 12px;
}
.pfct-hero-sub {
  font-size: 17px;
  color: rgba(255,255,255,.6);
  margin: 0;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

.pfct-body {
  background: #FAFAFA;
  padding: 56px 0 80px;
}
.pfct-body .container,
.pfct-grid {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}
.pfct-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .pfct-grid { grid-template-columns: 1fr; }
}

.pfct-info-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 16px;
}
.pfct-info-h {
  font-size: 16px;
  font-weight: 800;
  color: #0A0A0A;
  margin: 0 0 20px;
}
.pfct-info-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid #F3F4F6;
  text-decoration: none;
}
.pfct-info-row:last-child { border-bottom: none; }
.pfct-info-icon {
  width: 38px; height: 38px;
  background: #FEE2E2;
  color: #DC2626;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  flex-shrink: 0;
}
.pfct-info-text { flex: 1; }
.pfct-info-text strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: #9CA3AF;
  margin-bottom: 2px;
}
.pfct-info-text span { font-size: 14px; color: #374151; line-height: 1.5; }
.pfct-info-arrow { color: #D1D5DB; font-size: 12px; align-self: center; }
a.pfct-info-row:hover .pfct-info-arrow { color: #DC2626; }

.pfct-quick {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 20px 24px;
}
.pfct-quick-h {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #9CA3AF;
  margin: 0 0 12px;
}
.pfct-quick-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #F3F4F6;
  text-decoration: none !important;
  color: #374151 !important;
  font-size: 14px;
  font-weight: 500;
  transition: color .15s;
}
.pfct-quick-link:last-child { border-bottom: none; }
.pfct-quick-link:hover { color: #DC2626 !important; }
.pfct-quick-link > .fas:first-child { width: 18px; color: #9CA3AF; font-size: 13px; }
.pfct-quick-link span { flex: 1; }
.pfct-quick-chevron { font-size: 11px; color: #D1D5DB; }
.pfct-quick-link:hover .pfct-quick-chevron { color: #DC2626; }

.pfct-form-card {
  background: #fff;
  border: 1px solid #E5E7EB;
  border-radius: 16px;
  padding: 32px 36px;
  min-height: 500px;
}
.pfct-form-h {
  font-size: 20px;
  font-weight: 800;
  color: #0A0A0A;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.pfct-form-sub {
  font-size: 14px;
  color: #6B7280;
  margin: 0 0 24px;
}
.pfct-form-card iframe {
  width: 100% !important;
  min-height: 469px !important;
  border: none !important;
  border-radius: 8px !important;
  display: block !important;
}

/* ══════════════════════════════════════
   BLOG FIXES
   ══════════════════════════════════════ */

/* Category pill text visibility — global anchor rule sets color:accent (red)
   which makes white text on red background invisible */
.blog-cat-pill,
.blog-cat-pill:link,
.blog-cat-pill:visited { color: #fff !important; }

/* Blog card title — Inter only */
.blog-card-title,
.blog-card-title a,
.blog-post-title {
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* Blog single category pill same fix */
a.blog-cat-pill,
a.blog-cat-pill:link,
a.blog-cat-pill:visited { color: #fff !important; text-decoration: none !important; }



/* ══════════════════════════════════════
   FINAL COLOR FIXES
   ══════════════════════════════════════ */

/* Sidebar emergency button — white text on red */
a.sidebar-emergency,
a.sidebar-emergency:link,
a.sidebar-emergency:visited,
.sidebar-emergency,
.sidebar-emergency strong,
.sidebar-emergency span { color: #fff !important; }

/* Blog card title links — dark, not red */
.blog-card-title a,
.blog-card-title a:link,
.blog-card-title a:visited { color: #0A0A0A !important; }
.blog-card-title a:hover { color: #DC2626 !important; }

/* Blog archive content section bg */
.blog-archive-content { background: #FAFAFA !important; }

/* Breadcrumb links on single post — should be muted white, not red */
.blog-breadcrumb a,
.blog-breadcrumb a:link,
.blog-breadcrumb a:visited { color: rgba(255,255,255,.75) !important; }
.blog-breadcrumb a:hover { color: #fff !important; }

/* Share icon buttons — override global anchor color */
.blog-byline-share a,
.blog-byline-share a:link,
.blog-byline-share a:visited { color: #374151 !important; }
.blog-byline-share a:hover { color: #fff !important; }

/* Sidebar recent article links */
.sidebar-recent-item,
.sidebar-recent-item:link,
.sidebar-recent-item:visited { color: #0A0A0A !important; }
.sidebar-recent-item:hover .sri-title { color: #DC2626 !important; }

/* Blog CTA button */
a.blog-cta-btn,
a.blog-cta-btn:link,
a.blog-cta-btn:visited { color: #fff !important; }

/* Blog "Read Article" link */
a.blog-card-link,
a.blog-card-link:link,
a.blog-card-link:visited { color: #DC2626 !important; text-decoration: none !important; }

/* Related posts card links */
.blog-related-grid a.blog-card,
.blog-related-grid a.blog-card:link,
.blog-related-grid a.blog-card:visited { color: #0A0A0A !important; text-decoration: none !important; }

/* Blog tag links */
a.blog-tag,
a.blog-tag:link,
a.blog-tag:visited { color: #374151 !important; }

/* Contact quick links */
a.pfct-quick-link,
a.pfct-quick-link:link,
a.pfct-quick-link:visited { color: #374151 !important; }
a.pfct-quick-link:hover { color: #DC2626 !important; }

/* Contact info row email link */
a.pfct-info-row,
a.pfct-info-row:link,
a.pfct-info-row:visited { color: inherit !important; }



/* ══════════════════════════════════════
   BUSINESS PROFILE PAGE — ELEVATED
   ══════════════════════════════════════ */

/* Hero — richer dark gradient with subtle texture */
.spv2-hero {
  background: linear-gradient(135deg, #0D0D0D 0%, #1a1a1a 50%, #0A0A0A 100%) !important;
  padding: 40px 0 44px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  position: relative !important;
  overflow: hidden !important;
}
.spv2-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 50%, rgba(220,38,38,.06) 0%, transparent 60%);
  pointer-events: none;
}

/* Hero inner — better alignment */
.spv2-hero-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  gap: 48px !important;
  align-items: center !important;
}

/* Logo — larger, premium */
.spv2-logo {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  border: 2px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
  background: #1F2937 !important;
}

/* Business name — tighter, stronger */
.spv2-name-meta h1 {
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
  margin: 0 0 10px !important;
}

/* Ratings row — more breathing room */
.spv2-rating-row {
  margin: 12px 0 14px !important;
  gap: 10px !important;
}
.spv2-rating-num { font-size: 1.05rem !important; }
.spv2-rating-count { font-size: .88rem !important; }

/* CTA buttons — more prominent */
.spv2-btn { border-radius: 12px !important; }
.spv2-btn-primary {
  padding: 14px 28px !important;
  font-size: .95rem !important;
  box-shadow: 0 4px 16px rgba(220,38,38,.35) !important;
  transition: all .15s !important;
}
.spv2-btn-primary:hover { transform: translateY(-1px) !important; box-shadow: 0 6px 20px rgba(220,38,38,.45) !important; }
.spv2-btn-outline {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  backdrop-filter: blur(8px) !important;
}
.spv2-btn-outline:hover { background: rgba(255,255,255,.15) !important; }

/* Map — taller, rounder */
.spv2-map-wrap {
  border-radius: 20px !important;
  overflow: hidden !important;
  height: 300px !important;
  border: 2px solid rgba(255,255,255,.08) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.3) !important;
}

/* Score strip — elevated */
.spv2-score-strip {
  background: linear-gradient(180deg, #fff 0%, #FAFAFA 100%) !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding: 32px 0 !important;
}
.spv2-score-inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 40px !important;
}

/* Score bar rows — better spacing */
.ssb-bar-row {
  margin-bottom: .75rem !important;
}
/* ssb-bar-track now handled by thermometer gradient rule below */
.ssb-bar-track {
  background: linear-gradient(
    to right,
    #DC2626 0%,
    #F59E0B 35%,
    #0EA5E9 65%,
    #059669 100%
  ) !important;
  position: relative !important;
}
.ssb-bar-track::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; bottom: 0 !important; right: 0 !important;
  width: calc(100% - var(--bar-target, 0%)) !important;
  background: #F3F4F6 !important;
  border-radius: 0 999px 999px 0 !important;
  transition: width .7s cubic-bezier(.4,0,.2,1) !important;
}
.ssb-bar-fill {
  display: none !important;
}
.ssb-bar-label {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #1F2937 !important;
}
.ssb-bar-num {
  font-size: .85rem !important;
  font-weight: 800 !important;
  color: #374151 !important;
}

/* Score note */
.spv2-score-note {
  font-size: .8rem !important;
  color: #9CA3AF !important;
  margin-top: 12px !important;
  line-height: 1.6 !important;
}

/* Breadcrumb on business pages */
/* spv2-breadcrumb is on a WHITE background — keep text dark */
.spv2-breadcrumb {
  background: #fff !important;
  border-bottom: 1px solid #E5E7EB !important;
  padding: 10px 0 !important;
}
.spv2-breadcrumb nav {
  max-width: 1200px !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  font-size: 13px !important;
  color: #374151 !important;
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow-x: auto !important;
}
.spv2-breadcrumb a { color: #DC2626 !important; text-decoration: none !important; }
.spv2-breadcrumb a:hover { text-decoration: underline !important; }
.spv2-breadcrumb .sep { color: #9CA3AF !important; }
.spv2-breadcrumb span:last-child { color: #374151 !important; }
.spv2-breadcrumb .sep { color: rgba(255,255,255,.25) !important; }



/* ══════════════════════════════════════
   BLOG CARD MOBILE FIXES (< 768px)
   ══════════════════════════════════════ */
@media (max-width: 767px) {
  /* All cards: full-width image on top, content below — no side-by-side */
  .blog-card {
    flex-direction: column !important;
  }
  .blog-card-img-wrap {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    height: auto !important;
    min-height: 0 !important;
    flex-shrink: 0;
  }

  /* Hide category pill over image on mobile */
  .blog-card-cat {
    display: none;
  }

  /* Headline: smaller, tighter */
  .blog-card-title {
    font-size: 15px !important;
    line-height: 1.25 !important;
  }

  /* Trim excerpt to 2 lines on mobile */
  .blog-card-excerpt {
    -webkit-line-clamp: 2 !important;
    font-size: 13px;
  }

  /* Tighten card body padding */
  .blog-card-body {
    padding: 16px !important;
    gap: 8px !important;
    justify-content: flex-start !important;
  }
}