/*
 * Tennessee Cash For Homes — Mobile Optimization Layer
 *
 * Loaded AFTER style.min.css, so every rule here overrides where needed.
 * Every rule is wrapped in a max-width media query — desktop is untouched.
 *
 * Breakpoints used:
 *   ≤1024px : tablet safety guards (very light)
 *   ≤768px  : phones (primary mobile fixes)
 *   ≤480px  : small phones
 *   ≤390px  : extra-small phones (iPhone SE, etc.)
 */


/* =========================================================================
   1. GLOBAL SAFETY: prevent runaway horizontal scroll on every page
   ========================================================================= */
@media (max-width: 1024px) {
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }
  /* Anything that injects fixed pixel widths must not exceed viewport */
  img, video, iframe, picture, svg, canvas, embed, object {
    max-width: 100%;
    height: auto;
  }
  /* Tables: allow horizontal scroll on their wrapper rather than overflowing */
  table {
    max-width: 100%;
  }
}


/* =========================================================================
   2. HERO MIN-HEIGHT FIX — the largest mobile issue
   --------------------------------------------------------------------
   The "hero unification" block in style.css forces every hero to
   1000px on phones / 960px below 480px. On a 375px-wide phone this
   creates 2–3 viewports of empty space below the form because the
   flex-centering pushes content to the middle of a 1000px column.
   On mobile we want the hero to be content-height + breathing room.
   ========================================================================= */
@media (max-width: 768px) {
  .hero,
  .fc-hero,
  .page-hero,
  .about-hero,
  .wwb-hero,
  .sit-hero,
  .blog-hero,
  .land-hero,
  .county-hero,
  .location-hero {
    min-height: 0 !important;
    justify-content: flex-start !important;
  }
}
@media (max-width: 480px) {
  .hero,
  .fc-hero,
  .page-hero,
  .about-hero,
  .wwb-hero,
  .sit-hero,
  .blog-hero,
  .land-hero,
  .county-hero,
  .location-hero {
    min-height: 0 !important;
  }
}


/* =========================================================================
   3. NAVIGATION — tap targets, mobile menu polish
   ========================================================================= */
@media (max-width: 768px) {
  /* Hamburger: enlarge tap area to the WCAG-recommended 44×44 */
  .nav__hamburger {
    padding: 12px;
    margin-right: -8px;            /* keep visual position; just expand hitbox */
    min-width: 44px;
    min-height: 44px;
    align-items: center;
    justify-content: center;
  }

  /* Mobile dropdown menu: when nav is open, stack everything cleanly */
  .nav__links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border-bottom: 1px solid var(--border);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease, padding 0.25s ease;
  }
  .nav__links.open {
    max-height: 80vh;
    padding: 8px 16px 16px;
    overflow-y: auto;
  }
  .nav__links a,
  .nav__dropdown-toggle {
    display: block;
    padding: 14px 8px;
    font-size: 16px;
    min-height: 44px;
    width: 100%;
    text-align: left;
  }

  /* Resources dropdown: on mobile, render flat (no floating panel) */
  .nav__dropdown-menu {
    position: static !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    padding: 4px 0 8px 16px !important;
    min-width: 0 !important;
    background: transparent !important;
  }
  .nav__dropdown-menu a {
    padding: 12px 8px !important;
    font-size: 15px;
    white-space: normal;            /* allow wrap on phones */
  }

  /* CTA button hidden on mobile — hero already has a Call Us Today phone CTA */
  .nav__cta-item {
    display: none !important;
  }
}


/* =========================================================================
   4. INTERACTIVE TENNESSEE COUNTY MAP — usable on phones
   --------------------------------------------------------------------
   Existing rules force min-width: 700px below 480px, which makes the
   map wider than the viewport and traps users in horizontal scroll.
   That conflicts with the goal of "usable on mobile." Better: let the
   map shrink to fit, raise tap-target tolerance, and reposition the
   tooltip so it never overflows offscreen.
   ========================================================================= */
@media (max-width: 768px) {
  .tn-map-svg-wrap {
    overflow-x: visible !important;
  }
  .tn-map-svg-wrap svg {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    min-width: 0 !important;        /* override the 700px push at desktop */
    touch-action: manipulation;     /* faster taps, no double-tap zoom delay */
  }
  /* Slight stroke increase so county outlines remain visible when shrunk */
  .county-path {
    stroke-width: 0.18 !important;
  }
  /* Tooltip sized & positioned for touch — keep it readable, off-finger */
  #county-tooltip {
    font-size: 14px;
    padding: 10px 16px;
    max-width: calc(100vw - 24px);
    white-space: normal;
    text-align: center;
  }
}
@media (max-width: 480px) {
  .tn-map-svg-wrap svg {
    /* Override the 700px overflow trap from style.css line 3327 */
    min-width: 0 !important;
    min-height: 0 !important;
  }
  .tn-map-wrapper {
    overflow-x: visible !important;
    padding: 0 12px !important;
  }
  .tn-map-svg-wrap {
    overflow-x: visible !important;
  }
}


/* =========================================================================
   5. COUNTY / FORECLOSURE / LOCATION HERO LAYOUT
   --------------------------------------------------------------------
   These specialized heroes use 2-column grids that aren't all covered
   by the existing mobile CSS. Force single-column stacking and tighten
   spacing so the form is always reachable in one swipe.
   ========================================================================= */
@media (max-width: 768px) {
  .fc-hero__grid,
  .county-hero__inner,
  .location-hero__inner,
  .wwb-hero__inner,
  .land-hero__inner,
  .land-section__inner {
    display: block !important;       /* override grid 2-col layouts */
  }
  .fc-hero__content,
  .county-hero__content,
  .location-hero__content,
  .wwb-hero__content,
  .land-hero__content {
    margin-bottom: 24px;
  }
  /* Map column on county hero — let it sit flush below text on phones */
  .county-hero__map-col {
    margin-top: 16px;
  }
  /* Foreclosure-specific hero typography */
  .fc-hero__h1 {
    font-size: 28px !important;
    line-height: 1.2;
  }
  .fc-hero__sub {
    font-size: 15px;
    line-height: 1.5;
  }
  .fc-hero__checks li {
    font-size: 15px;
  }
  .fc-hero__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .fc-hero__call,
  .fc-hero__form-card .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .fc-hero__h1 {
    font-size: 25px !important;
  }
  .county-hero__title {
    font-size: 26px !important;
    line-height: 1.18;
  }
}


/* =========================================================================
   6. COMPARE TABLE — clean side-by-side comparison on phones
   --------------------------------------------------------------------
   On desktop, the original .compare-table renders as a 3-column
   comparison table (untouched here). On mobile, we hide the desktop
   table entirely and show a separate, mobile-only table
   (.compare-mobile) declared in front-page.php with simplified labels.
   The mobile layout is a true 3-column grid: row label · TCFH · Traditional.
   ========================================================================= */

@media (max-width: 768px) {
  /* Swap visibility on phones: hide desktop table, show mobile table.
     .compare-mobile-wrap is hidden by default in style.css; the rule below
     reveals it only on mobile, paired with hiding the desktop table. */
  .compare-wrap {
    display: none !important;
  }
  .compare-mobile-wrap {
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border);
    background: #fff;
  }

  .compare-mobile {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: 'Poppins', sans-serif;
  }

  /* ── Column headers ─────────────────────────────────────────────── */
  .compare-mobile thead th {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    padding: 14px 8px;
    line-height: 1.25;
    vertical-align: middle;
  }
  .compare-mobile__corner {
    background: #fff;
    border-bottom: 1px solid var(--border);
  }
  .compare-mobile__brand-head {
    background: var(--green-dark);
    color: #fff;
    border-bottom: 2px solid var(--green-dark);
  }
  .compare-mobile__trad-head {
    background: #f2f2f2;
    color: var(--charcoal);
    border-bottom: 1px solid var(--border);
  }

  /* ── Body rows ──────────────────────────────────────────────────── */
  .compare-mobile tbody th[scope="row"] {
    background: #fff;
    color: var(--charcoal);
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 14px 10px;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: .02em;
    border-bottom: 1px solid var(--border);
    width: 36%;
  }
  .compare-mobile tbody td {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    padding: 14px 8px;
    line-height: 1.3;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
  }

  /* TCFH (brand) column — light brand-green fill with dark text */
  .compare-mobile tbody td.compare-mobile__brand {
    background: var(--green);
    color: var(--charcoal);
    font-weight: 700;
  }

  /* Traditional column — light gray fill with muted text */
  .compare-mobile tbody td.compare-mobile__trad {
    background: #f7f7f7;
    color: var(--charcoal-light);
  }

  /* Alternating-row tint on the row-label column for readability */
  .compare-mobile tbody tr:nth-child(even) th[scope="row"] {
    background: #fafafa;
  }

  /* Strip the bottom border from the last row for a clean edge */
  .compare-mobile tbody tr:last-child th,
  .compare-mobile tbody tr:last-child td {
    border-bottom: none;
  }

  /* Tighten layout on the smallest phones */
  @media (max-width: 380px) {
    .compare-mobile thead th { font-size: 12.5px; padding: 12px 6px; }
    .compare-mobile tbody th[scope="row"] { font-size: 12px; padding: 12px 8px; }
    .compare-mobile tbody td { font-size: 13.5px; padding: 12px 6px; }
  }
}


/* =========================================================================
   7. CITY CHIP GRIDS — readable on small screens
   --------------------------------------------------------------------
   .cities-grid is already 2-col at ≤480px (line 2011). On the smallest
   phones the chips become very narrow. Tighten padding so labels fit.
   ========================================================================= */
@media (max-width: 390px) {
  .cities-grid {
    gap: 10px;
  }
  .city-chip {
    padding: 11px 6px;
    font-size: 12.5px;
    gap: 5px;
  }
  .city-chip svg {
    width: 11px;
    height: 11px;
  }
}


/* =========================================================================
   8. CTAS / BUTTONS — comfortable tap targets everywhere
   --------------------------------------------------------------------
   Existing rules cover .btn-primary, .btn-outline, button[type=submit].
   These extend the same treatment to less common variants and ensure
   adjacent buttons stack cleanly.
   ========================================================================= */
@media (max-width: 768px) {
  .btn-white,
  .btn-footer-cta,
  .hero__btn-primary,
  .hero__btn-outline,
  .page-hero__cta-row a,
  .cta-band a {
    min-height: 46px;
    padding: 13px 22px;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .cta-band {
    padding: 48px 0 !important;
  }
  .cta-band p {
    font-size: 15px;
  }
  .page-hero__cta-row,
  .hero__cta-row,
  .fc-hero__ctas,
  .land-hero__cta-row {
    width: 100%;
  }
  .page-hero__cta-row > a,
  .land-hero__cta-row > a {
    width: 100%;
    text-align: center;
  }

  /* Tap feedback so users feel button presses on touch */
  a.btn-primary:active,
  a.btn-outline:active,
  a.btn-white:active,
  button[type="submit"]:active,
  .nav__cta:active,
  .city-chip:active {
    transform: translateY(1px);
    opacity: 0.92;
  }
}


/* =========================================================================
   9. FORMS — final polish (most rules already covered upstream)
   --------------------------------------------------------------------
   Existing CSS already sets inputs to 100% width / 16px font / 12-14px
   padding. We just add label spacing, ensure card-style forms fit, and
   prevent the "How It Works" form from getting squished.
   ========================================================================= */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 14px;
  }
  .form-group label {
    font-size: 14px;
    margin-bottom: 6px;
    display: block;
  }
  /* All form-card variants use the same padding rules */
  .hero__form-card,
  .fc-hero__form-card,
  .land-section__form-wrap,
  .form-card {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    padding: 22px 18px !important;
  }
  /* iOS prevents zoom-on-focus when input font-size ≥16px */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    font-size: 16px !important;
  }
}


/* =========================================================================
   10. PROOF / STATS STRIP — keep stats visible without overflow
   ========================================================================= */
@media (max-width: 768px) {
  .proof-bar {
    padding: 18px 0 !important;
  }
  .proof-bar__inner {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px 22px !important;
    text-align: center;
  }
  .proof-bar__item {
    flex: 0 0 auto;
    font-size: 13px;
  }
}


/* =========================================================================
   11. CONTAINER & TYPOGRAPHY — small-screen polish
   ========================================================================= */
@media (max-width: 390px) {
  .container {
    padding-left: 14px;
    padding-right: 14px;
  }
  body {
    font-size: 15.5px;
    line-height: 1.55;
  }
  h1 { font-size: 22px; }
  h2 { font-size: 19px; }
  h3 { font-size: 17px; }
  .section__title { font-size: 20px; }
}


/* =========================================================================
   12. IMAGES — guarantee no image breaks the layout
   --------------------------------------------------------------------
   This is the safety net for any inline-styled or background images
   that slipped past the global rule above.
   ========================================================================= */
@media (max-width: 768px) {
  .single-post img,
  .prose img,
  .page-content img,
  .blog-card__img,
  .testimonial-card img,
  .market-card img,
  .gov-resource-card img,
  .who-we-help__card img {
    max-width: 100%;
    height: auto;
  }
  /* Hero background images: keep focal point centered, shrink-cropped */
  .hero,
  .page-hero,
  .fc-hero,
  .county-hero,
  .location-hero,
  .wwb-hero {
    background-position: center center !important;
    background-size: cover !important;
  }
}


/* =========================================================================
   13. ACCESSIBILITY — improve touch interaction across the board
   ========================================================================= */
@media (max-width: 768px) {
  a, button, [role="button"], .city-chip, .county-group {
    -webkit-tap-highlight-color: rgba(132, 204, 156, 0.18);
    touch-action: manipulation;
  }
  /* Improve focus-visible rings on touch devices */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible {
    outline: 2px solid var(--green-dark);
    outline-offset: 2px;
  }
}


/* =========================================================================
   ▼▼▼ ROUND 2 — Homepage-specific tweaks (2026-05-05) ▼▼▼
   All rules below are inside max-width: 768px / 480px media queries.
   Desktop is untouched.
   ========================================================================= */


/* -------------------------------------------------------------------------
   R2.1  LOGO + COMPANY NAME — bigger logo, plus the "Tennessee Cash For
   Homes" wordmark injected via ::after on the .nav__logo anchor. The
   markup is <a class="nav__logo"><picture><img/></picture></a>, so we
   make the anchor an inline-flex container; the <picture> sits as the
   first flex item and the ::after-generated text sits beside it.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav__logo img {
    max-height: 56px !important;     /* bumped from 44px per user request */
    height: 56px;
    width: auto;
  }
  /* Nav row is 64px tall on mobile (style.css:5582). 56px logo fits with 4px
     above/below — but ensure the nav row can grow if needed. */
  .nav,
  .nav__inner {
    min-height: 64px;
    height: auto !important;
  }

  /* Make the logo anchor a flex row so the wordmark span sits next to image */
  .nav__logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none;
  }
  /* Wordmark — real DOM span injected from header.php. Inline default is
     display:none so desktop is fully unaffected. We force it visible on
     mobile. inline-block (not inline-flex) so the whitespace between child
     spans renders as visible word-spacing. Each child span has its own
     inline `style="color:..."` to override the parent's color per word. */
  .nav__logo .nav__logo-text {
    display: inline-block !important;
    vertical-align: middle;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;        /* trimmed for breathing room */
    line-height: 1.15 !important;
    white-space: nowrap !important;    /* never wrap to two lines */
    letter-spacing: -0.01em;
  }
  /* Each colored word stays on the same baseline */
  .nav__logo .nav__logo-text > span {
    display: inline;
  }
}

/* Smaller phones — shrink the wordmark proportionally (also doubled) */
@media (max-width: 400px) {
  .nav__logo {
    gap: 8px !important;
  }
  .nav__logo .nav__logo-text {
    font-size: 16px !important;        /* trimmed for breathing room */
  }
}
@media (max-width: 360px) {
  .nav__logo {
    gap: 6px !important;
  }
  .nav__logo .nav__logo-text {
    font-size: 15px !important;        /* trimmed for breathing room */
  }
}
@media (max-width: 330px) {
  .nav__logo .nav__logo-text {
    font-size: 14px !important;        /* trimmed for breathing room */
  }
}


/* -------------------------------------------------------------------------
   R2.2  HERO TOP SPACING — pull hero content up under the nav
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero,
  .page-hero,
  .fc-hero,
  .about-hero,
  .wwb-hero,
  .sit-hero,
  .blog-hero,
  .land-hero,
  .county-hero,
  .location-hero {
    padding-top: 32px !important;    /* was 92px */
    padding-bottom: 40px !important; /* tighten the bottom too */
  }
  /* The .hero on the front page has its own gap above the form card; trim it */
  .hero__inner {
    gap: 18px !important;
  }
  .hero__badge {
    margin-bottom: 12px !important;
  }
}


/* -------------------------------------------------------------------------
   R2.3  HERO TRUST ROW — force three items onto ONE row, no exceptions.
   Markup: <div class="hero__trust-row">
             <span class="hero__trust-item"><svg/> No Agent Fees</span>
             <span class="hero__trust-item"><svg/> Close in 7 Days</span>
             <span class="hero__trust-item"><svg/> Any Condition</span>
           </div>
   Maximum-specificity overrides + !important so nothing in the cascade
   can re-flow this to multiple lines.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero .hero__trust-row,
  div.hero__trust-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 6px !important;
    margin-top: 14px !important;
    overflow: visible !important;
    text-align: center;
  }
  /* RESTORED — green circle SVG checkmarks before each item */
  .hero .hero__trust-row .hero__trust-item svg,
  div.hero__trust-row span.hero__trust-item svg {
    display: inline-block !important;
    width: 11px !important;
    height: 11px !important;
    flex-shrink: 0 !important;
  }
  .hero .hero__trust-row .hero__trust-item,
  div.hero__trust-row span.hero__trust-item {
    display: inline-flex !important;
    flex: 1 1 0 !important;          /* equal width slots, allow shrink */
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 4px !important;             /* icon-to-text spacing */
    color: #FFFFFF !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;    /* max that fits on one line at 375px with icons */
    line-height: 1.2 !important;
    white-space: nowrap !important;  /* never break a label */
    text-align: center !important;
    justify-content: center !important;
    align-items: center !important;
    letter-spacing: -0.01em !important;
  }
}
@media (max-width: 480px) {
  .hero .hero__trust-row,
  div.hero__trust-row {
    gap: 5px !important;
  }
  .hero .hero__trust-row .hero__trust-item,
  div.hero__trust-row span.hero__trust-item {
    font-size: 11.5px !important;
    gap: 3px !important;
  }
  .hero .hero__trust-row .hero__trust-item svg,
  div.hero__trust-row span.hero__trust-item svg {
    width: 10px !important;
    height: 10px !important;
  }
}
@media (max-width: 380px) {
  .hero .hero__trust-row .hero__trust-item,
  div.hero__trust-row span.hero__trust-item {
    font-size: 11px !important;
  }
}
@media (max-width: 340px) {
  .hero .hero__trust-row,
  div.hero__trust-row {
    gap: 4px !important;
  }
  .hero .hero__trust-row .hero__trust-item,
  div.hero__trust-row span.hero__trust-item {
    font-size: 10px !important;
  }
  .hero .hero__trust-row .hero__trust-item svg,
  div.hero__trust-row span.hero__trust-item svg {
    width: 9px !important;
    height: 9px !important;
  }
}


/* -------------------------------------------------------------------------
   R2.4  ACCOLADES / PROOF BAR — 2x2 grid on mobile
   Row 1: 1,200+ Homes Purchased | 14 Days Average Close Time
   Row 2: $0 Agent Fees          | 5.0 Google Rating
   The HTML order is: stat / divider / stat / divider / stat / divider /
   stat. We hide the dividers and lay out the four stats as a CSS grid.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .proof-bar {
    padding: 16px 0 !important;
  }
  .proof-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    justify-items: center !important;
    gap: 18px 12px !important;
    text-align: center;
    flex-wrap: initial;              /* override the flex-wrap rule from base CSS */
  }
  .proof-stat {
    width: 100%;
    max-width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .proof-stat__num {
    text-align: center;
    width: 100%;
    font-size: 22px;
    line-height: 1.1;
    margin-bottom: 4px;
  }
  .proof-stat__label {
    text-align: center;
    width: 100%;
    font-size: 12.5px;
    line-height: 1.3;
    max-width: 160px;
    margin: 0 auto;
  }
  /* Vertical dividers don't belong in a 2x2 grid layout */
  .proof-divider {
    display: none !important;
  }
}
@media (max-width: 360px) {
  .proof-bar__inner {
    gap: 14px 8px !important;
  }
  .proof-stat__num { font-size: 20px; }
  .proof-stat__label { font-size: 11.5px; }
}


/* -------------------------------------------------------------------------
   R2.5  GAP AFTER STEP 3 ("pick your own closing date and get paid")
   The next section (.house-to-cash-section) sits below #how-it-works.
   Trim the seam from both sides.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  #how-it-works {
    padding-bottom: 24px !important;
  }
  #how-it-works .steps {
    gap: 18px !important;
  }
  .house-to-cash-section {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .htc-headline-wrap {
    margin-top: 12px !important;
    margin-bottom: 0 !important;
  }
}


/* -------------------------------------------------------------------------
   R2.6  GAP ABOVE THE TEAM PHOTO (.difference-section)
   The headline "Get a Fair Cash Offer in 24 Hours" sits inside
   .house-to-cash-section. The team photo below it is the first child
   of .difference-section. Pull the difference section up.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .difference-section {
    padding-top: 20px !important;
  }
  .difference__img-wrap {
    margin-top: 0 !important;
  }
  .difference__img-wrap img {
    border-radius: 12px;
    margin-bottom: 16px;
  }
  .difference__content-wrap {
    padding-top: 8px !important;
  }
}


/* -------------------------------------------------------------------------
   R2.7  COMPARE TABLE — full redesign now lives in section 6 above
   (stacked feature cards). The previous horizontal-scroll fade hint
   has been removed because there is no longer any scroll to hint at.
   ------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------
   R2.8  FOOTER BOTTOM BAR
   - Shrink the Black Labrador image (it shares a class with the 100%
     image, so we target it via :last-of-type)
   - Stack the copyright and Privacy Policy onto two centered lines.
     Pure-CSS approach: zero out the original span's font-size so the
     literal "·" middot text node disappears, then render the copyright
     line via ::before and force the link to its own block.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer-bottom__inner {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px !important;
    text-align: center;
  }

  /* Both seal images get smaller; the Black Lab gets smaller still. */
  .footer-bottom__img {
    height: 96px !important;
    width: auto !important;
  }
  .footer-bottom__inner img.footer-bottom__img:last-of-type {
    height: 72px !important;          /* the Black Labrador image */
  }

  /* Copyright + Privacy Policy on two centered lines (kept from R2 — see
     R3.5 below, which restructures this into a horizontal layout). */
  .footer-bottom__copy {
    font-size: 0 !important;          /* hide the original text node + middot */
    line-height: 1.5;
    text-align: center;
    flex: 0 0 auto;
  }
  .footer-bottom__copy::before {
    content: "© 2026 Tennessee Cash For Homes";
    display: block;
    font-size: 13px;
    color: rgba(255,255,255,0.72);
    margin-bottom: 4px;
  }
  .footer-bottom__copy .footer-bottom__link {
    display: block !important;
    font-size: 13px !important;
    color: rgba(255,255,255,0.72);
    text-decoration: underline;
  }
}


/* =========================================================================
   ▼▼▼ ROUND 3 — Density pass + footer restructure (2026-05-05) ▼▼▼
   ========================================================================= */


/* -------------------------------------------------------------------------
   R3.4  REDUCE DEAD SPACE THROUGHOUT THE HOMEPAGE
   The base CSS sets .section / .about-* / .market-overview / etc. to
   48px top+bottom on mobile. That's still a lot of empty space between
   sections. Tighten everything to ~28px on phones, ~22px on small phones.
   Also tighten section header bottom margins and heading top/bottom margins.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Override the 48px section padding from style.css:5436-5456.
     36px is the user-approved breathing room — feels spacious without
     creating large empty seams between sections. */
  .section,
  .about-mission,
  .about-who,
  .about-team,
  .about-values,
  .about-why,
  .about-process,
  .about-badges,
  .about-service,
  .faq-section,
  .market-overview,
  .reviews-section,
  .who-we-help,
  .gov-resources,
  .difference-section,
  .land-section,
  .land-section-2,
  .common-situations,
  .home-blog,
  .blog-articles,
  .single-post__body,
  .video-section,
  .tn-map-section,
  .cta-band {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  /* Section headers: less air below the eyebrow → title → subtitle stack */
  .section__header,
  .common-situations__header,
  .about-who__header,
  .market-overview__header,
  .reviews-section__header,
  .who-we-help__header,
  .gov-resources__header,
  .home-blog__header,
  .blog-articles__header,
  .faq-section__header {
    margin-bottom: 18px !important;
  }
  .section__eyebrow {
    margin-bottom: 6px !important;
  }
  .section__title,
  .common-situations__title,
  h1, h2, h3 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
  }
  .section__subtitle,
  .common-situations__sub {
    margin-bottom: 0 !important;
  }
  .common-situations__divider {
    margin: 12px auto !important;
  }

  /* "How it works" steps: tighter step-to-step spacing */
  .steps {
    gap: 14px !important;
  }
  .step {
    padding: 16px 14px !important;
  }
  .step__title {
    margin-bottom: 6px !important;
  }
  .step__body {
    margin-bottom: 0 !important;
  }

  /* House-to-cash transition: tighter padding so it doesn't feel like a
     standalone heavy section */
  .house-to-cash-section {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .htc-headline-wrap {
    margin-top: 10px !important;
  }
  .htc-headline {
    margin-bottom: 0 !important;
  }
  .htc-image-container {
    margin: 6px 0 !important;
  }

  /* Difference section (team photo + text): minimal seam from above */
  .difference-section {
    padding-top: 12px !important;
    padding-bottom: 28px !important;
  }
  .difference__img-wrap img {
    margin-bottom: 12px !important;
  }
  .difference__intro {
    margin-bottom: 14px !important;
  }
  .difference__list {
    margin-bottom: 14px !important;
  }
  .difference__list li {
    margin-bottom: 6px !important;
  }
  .difference__trust-row {
    margin-top: 14px !important;
    gap: 14px !important;
  }

  /* FAQ: tighten question-to-question spacing */
  .faq-list {
    gap: 8px !important;
  }
  .faq-item {
    margin-bottom: 6px !important;
  }

  /* Reviews: tighter card spacing inside the carousel */
  .reviews-carousel,
  .reviews-slide {
    margin-bottom: 12px !important;
  }

  /* Areas/cities section */
  .cities-grid {
    margin-bottom: 16px !important;
  }
  .areas-footnote {
    margin-top: 12px !important;
  }

  /* CTA band: less vertical air */
  .cta-band {
    padding: 28px 0 !important;
  }
  .cta-band p {
    margin-bottom: 18px !important;
  }
  .cta-band h2 {
    margin-bottom: 10px !important;
  }

  /* Footer dark CTA: tighter */
  .footer-dark-cta {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .footer-dark-cta__title {
    margin-bottom: 10px !important;
  }
  .footer-dark-cta__sub {
    margin-bottom: 18px !important;
  }
  .footer-dark-cta__phone {
    margin-top: 12px !important;
  }

  /* Footer main grid */
  .footer-main {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  .footer-main__grid {
    gap: 22px !important;
  }
}

@media (max-width: 480px) {
  /* Slightly tighter on small phones — overrides the ≤480 rule at
     style.css:5611. 28px keeps a comfortable breathing room. */
  .section,
  .about-mission,
  .about-who,
  .about-team,
  .about-values,
  .about-why,
  .about-process,
  .about-service,
  .faq-section,
  .market-overview,
  .reviews-section,
  .who-we-help,
  .gov-resources,
  .difference-section,
  .land-section,
  .common-situations,
  .home-blog,
  .blog-articles,
  .video-section,
  .tn-map-section,
  .cta-band {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
  .section__header,
  .common-situations__header {
    margin-bottom: 14px !important;
  }
}


/* -------------------------------------------------------------------------
   R3.5  FOOTER BOTTOM BAR — restructure into:
   [Gold Seal]  © 2026 Tennessee Cash For Homes  [Black Lab]
                       Privacy Policy

   - Three items on row 1, vertically centered with each other
   - Privacy Policy on row 2, centered horizontally
   The Privacy Policy <a> lives inside the copyright span, so we make
   the span a flex column whose ::before renders the copyright text and
   whose anchor child sits below it. Because the span is the middle
   item of a flex row, the anchor inside it appears visually below the
   copyright (and roughly centered in the row).
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Override the column-stack layout from R2.8 */
  .footer-bottom {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
  .footer-bottom__inner {
    display: flex !important;
    flex-direction: row !important;     /* horizontal row */
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    text-align: center;
  }

  /* Image sizes on the row layout */
  .footer-bottom__img {
    height: 64px !important;            /* gold seal */
    width: auto !important;
    flex: 0 0 auto;
  }
  .footer-bottom__inner img.footer-bottom__img:last-of-type {
    height: 56px !important;            /* black labrador, slightly smaller */
  }

  /* Middle column: copyright text on row 1, Privacy Policy below */
  .footer-bottom__copy {
    font-size: 0 !important;            /* hide raw text node + middot */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.4;
    text-align: center;
  }
  .footer-bottom__copy::before {
    content: "© 2026 Tennessee Cash For Homes";
    display: block;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.78);
    margin-bottom: 4px;
    white-space: nowrap;
  }
  .footer-bottom__copy .footer-bottom__link {
    display: block !important;
    font-size: 12px !important;
    color: rgba(255,255,255,0.72) !important;
    text-decoration: underline;
    margin: 0 !important;
  }
}

/* On the smallest phones, allow the copyright text to wrap if it doesn't
   fit on one line (rare given the labels are short, but a safety net) */
@media (max-width: 360px) {
  .footer-bottom__inner {
    gap: 6px !important;
  }
  .footer-bottom__img {
    height: 52px !important;
  }
  .footer-bottom__inner img.footer-bottom__img:last-of-type {
    height: 46px !important;
  }
  .footer-bottom__copy::before {
    font-size: 11px;
    white-space: normal;                /* allow wrap on tiny screens */
  }
  .footer-bottom__copy .footer-bottom__link {
    font-size: 11px !important;
  }
}


/* =========================================================================
   ▼▼▼ ROUND 4 — Floating back-to-top button (mobile only) ▼▼▼
   HTML lives in footer.php (with inline style="display:none" so desktop
   never sees it). JS lives in js/main.js. We override the inline display
   on mobile here, then handle visibility/fade via the .is-visible class
   that the JS toggles after 300px of scroll.
   ========================================================================= */

/* Mobile: show the button, fade in/out via opacity + visibility */
@media (max-width: 768px) {
  .back-to-top {
    display: flex !important;            /* override inline style="display:none" */
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 24px;
    right: 20px;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 50%;
    background: #84CC9C;
    color: #ffffff;
    cursor: pointer;
    z-index: 9999;                       /* above nav (1000), tooltip (9999) */
    padding: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    /* Fade out by default — JS adds .is-visible after scrolling 300px */
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.28s ease, visibility 0.28s ease, transform 0.28s ease, background 0.2s ease;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0.18);
    /* Respect iOS home indicator + notches */
    bottom: max(24px, env(safe-area-inset-bottom));
  }
  .back-to-top svg {
    display: block;
    pointer-events: none;
  }
  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .back-to-top:active {
    background: #5aab78;
    transform: translateY(0) scale(0.96);
  }
}

/* Desktop: never show. The inline style="display:none" already hides it,
   but enforcing this rule guards against any future markup change. */
@media (min-width: 769px) {
  .back-to-top {
    display: none !important;
  }
}


/* =========================================================================
   ▼▼▼ ROUND 5 — Site-wide mobile audit fixes (2026-05-05) ▼▼▼
   Findings from a 28-page mobile audit at 375px width.
   ========================================================================= */


/* -------------------------------------------------------------------------
   R5.1  INVESTORS PAGE HERO — overflow fix
   The /investors/ hero uses .hero__inner--center / .hero__content--center
   with a long centered headline ("Work With Tennessee Cash For Homes") and
   3 longer trust-row labels ("Off-Market Deals", "Win-Win Partnerships",
   "Fast, Transparent Deals"). At 375px the h1 and trust row push 14px past
   the viewport edge, clipping "Cash" off the right. Constrain children to
   the container, allow word-break on the headline, and let this hero's
   trust row wrap (the homepage no-wrap rule is per-row, this is a different
   row with longer labels).
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .hero__inner--center,
  .hero__content--center {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero__content--center > * {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .hero__content--center .hero__title,
  .hero__content--center .hero__subtitle {
    word-break: break-word;
    overflow-wrap: anywhere;     /* let long phrases wrap inside the column */
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* The investors hero trust row has 3 *longer* labels (~20 chars each).
     Override the no-wrap rule from R2.3 ONLY for this centered hero — let
     the items wrap to a second line so they never get clipped. */
  .hero__content--center .hero__trust-row,
  .hero__inner--center .hero__trust-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px 14px !important;
  }
  .hero__content--center .hero__trust-item,
  .hero__inner--center .hero__trust-item {
    flex: 0 0 auto !important;     /* shrink to content, don't force equal slots */
    white-space: normal !important; /* allow inside wrap if a single item is long */
    font-size: 12px !important;
    text-align: left !important;
    justify-content: flex-start !important;
  }
}


/* -------------------------------------------------------------------------
   R5.2  REVIEWS CAROUSEL — guarantee no horizontal overflow
   #reviewsTrack is a flex track sized to N×slide-width and translated
   horizontally by JS. Its parent already clips, but ensure the parent
   has overflow-x: hidden on mobile as a hard belt-and-suspenders.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .reviews-carousel,
  .reviews-section .reviews-carousel,
  .reviews-track-wrap {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}


/* -------------------------------------------------------------------------
   R5.3  TAP TARGETS — bump the smaller-than-44px hits found in the audit
   These are inline links/buttons with line-height 1 and no padding. Add
   vertical padding (or display:inline-block) only where it does not
   disturb surrounding flow.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* Privacy Policy in the footer-bottom row — was 71×17 across 28 pages */
  .footer-bottom__link {
    display: inline-block !important;
    padding: 8px 4px !important;
    min-height: 36px;
    line-height: 1.3;
  }

  /* Testimonial "View Full Review" toggle — was 309×15 across 21 pages */
  .testimonial-toggle {
    padding: 10px 0 !important;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Reviews carousel dots — base button is 24×24 (style.css:5383). The
     visible 9px dot is rendered via ::before, so we can grow the button's
     hit area to 40×40 without enlarging the visible dot. Active state
     keeps its widened 41×24 form (already >40 tall enough → bump height
     to 40 for that one too). */
  .carousel-dot {
    width: 40px !important;
    height: 40px !important;
  }
  .carousel-dot.active {
    width: 56px !important;   /* preserves the active widening (41 + 15) */
    height: 40px !important;
  }

  /* Government resource "Visit Website →" — was 114×22 (15 pages) */
  .gov-resource-row__cta {
    display: inline-block !important;
    padding: 8px 12px !important;
    min-height: 40px;
    line-height: 1.4;
  }

  /* Phone number anchors that aren't styled as buttons — anywhere they
     appear inline in text like "Or call us now: (615) 801-8126" */
  a[href^="tel:"] {
    padding: 4px 2px;
    display: inline-block;
  }

  /* Breadcrumb "Home" — was 39×20 (10 pages). Add vertical padding to
     enlarge tap area without negative margin (which would collide with
     the › separators). The breadcrumb row gains a few px of height. */
  .breadcrumb a {
    display: inline-block;
    padding: 6px 4px;
    line-height: 1.4;
  }
  .breadcrumb {
    line-height: 1.6;
  }

  /* "Read more" location-about toggle — was 102×18 (6 pages) */
  .loc-about__toggle {
    padding: 10px 14px !important;
    min-height: 40px;
    line-height: 1.3;
  }

  /* Single post — "← Back to Blog" anchor */
  .single-post__back {
    display: inline-block;
    padding: 8px 4px;
    min-height: 40px;
    line-height: 1.4;
  }

  /* Sidebar TOC links — already wrap to 2 lines (32px); just ensure each
     line gets its own comfortable touch row. */
  .sidebar-toc__link {
    padding: 6px 4px;
    line-height: 1.5;
  }
}


/* -------------------------------------------------------------------------
   R5.4  TEXT TOO SMALL TO READ — bump anything under 12px to a comfortable
   minimum. The hero trust-row at 11px is a USER-INTENDED layout choice
   (R2.3 — must fit 3 items on one line at 375px) and is intentionally NOT
   bumped here.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* "GET STARTED TODAY" eyebrow above the dark CTA — 27 pages. Slight bump
     keeps it visually compact while improving legibility. */
  .footer-dark-cta__label {
    font-size: 12px !important;
    letter-spacing: 0.08em;
  }

  /* "Market Insight" insight-card label on city/county pages — 7 pages */
  .loc-about__insight-label {
    font-size: 12px !important;
  }

  /* "No Repairs. No Fees. No Hassle." house-to-cash eyebrow — 2 pages */
  .htc-eyebrow {
    font-size: 12px !important;
    letter-spacing: 0.06em;
  }

  /* "Soon" badge on city link buttons */
  .city-link-btn__soon {
    font-size: 11.5px !important;
  }

  /* Foreclosure callout eyebrow — "Key Takeaway" */
  .fc-process-callout__eyebrow {
    font-size: 12px !important;
  }

  /* Pros/Cons subheadings on situation pages */
  .pros-cons h4,
  .pros-cons-section h4 {
    font-size: 14px !important;
  }

  /* Sidebar CTA "FREE OFFER" badge on blog posts */
  .sidebar-cta__badge {
    font-size: 12px !important;
  }
}


/* -------------------------------------------------------------------------
   R5.5  h6 minimum size — on the contact page the placeholder template
   ships an h6 at 10.7px ("Send a Mail"). Force a readable minimum.
   ------------------------------------------------------------------------- */
@media (max-width: 768px) {
  h6 {
    font-size: 13px !important;
  }
}