/* ===========================================================================
   QA Polish — scoped, non-destructive fixes from full visual audit (Round 5)
   ---------------------------------------------------------------------------
   ONLY adjusts spacing, alignment, sizing, and responsive behavior.
   Does NOT change branding, colors, typography, layout, or design system.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   FIX 1 — Spanish desktop horizontal overflow (all desktop widths)
   The ES brand tagline ("| Financiamiento inteligente, a nivel nacional") is
   ~107px wider than EN, plus ES nav-links (~49px wider) and the ES Apply Now
   button (29px wider). Tighten ES desktop only — no effect on EN.
   --------------------------------------------------------------------------- */
@media (min-width: 921px) {
  html[lang="es"] .header .brand small {
    font-size: 0.72rem;
    letter-spacing: 0.03em;
  }
  html[lang="es"] .header .nav-links {
    gap: 1.05rem;
  }
  html[lang="es"] .header .nav-actions {
    gap: 0.6rem;
  }
  html[lang="es"] .header .nav-actions .btn-primary {
    padding-inline: 1rem;
    font-size: 0.92rem;
  }
  html[lang="es"] .header .nav-tel {
    font-size: 0.88rem;
  }
}

/* Tablet-desktop boundary (921–1180px) — hide ES brand tagline + tel
   so the row fits a 1024px viewport with a 1200px wrap cap. */
@media (min-width: 921px) and (max-width: 1180px) {
  html[lang="es"] .header .nav-tel {
    display: none;
  }
  html[lang="es"] .header .brand small {
    display: none;
  }
  html[lang="es"] .header .nav-links {
    gap: 0.85rem;
  }
  html[lang="es"] .header .nav-links a {
    font-size: 0.85rem;
  }
  html[lang="es"] .header .nav-actions .btn-primary {
    padding-inline: 0.9rem;
    font-size: 0.85rem;
  }
}

/* Same tier for EN — only hide the tel at 921–1000 to be safe
   (EN fits fine at 1024+, no other change). */
@media (min-width: 921px) and (max-width: 1000px) {
  html[lang="en"] .header .brand small {
    font-size: 0.7rem;
  }
}

/* ---------------------------------------------------------------------------
   FIX 2 — h2 sections converted from h3 (services + blog pages, EN + ES)
   To preserve the existing visual size of the card titles, normalize new
   <h2> inside .svc-detail and .blog-card to the existing h3 sizing.
   --------------------------------------------------------------------------- */
.svc-detail h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
}
.blog-card h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.005em;
  margin-bottom: 1rem;
}
@media (max-width: 720px) {
  .svc-detail h2 { margin-bottom: 0.2rem; }
  .blog-card h2 { font-size: 1.2rem; line-height: 1.3; margin-bottom: 0.15rem; }
}

/* ---------------------------------------------------------------------------
   FIX 3 — Even card heights for trust strip on mobile (4 items)
   Audit found items wrapping to 2 lines created 87 vs 135px heights.
   Force equal rows so the strip aligns.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .trust-grid,
  .trust-strip,
  .trust-items {
    grid-auto-rows: 1fr;
  }
  .trust-grid > *,
  .trust-strip > *,
  .trust-items > * {
    height: 100%;
  }
}

/* ---------------------------------------------------------------------------
   FIX 4 — Even card heights for grid-funding on tablet (ecommerce industry)
   Audit found 201 vs 149px in a single row at 768px.
   --------------------------------------------------------------------------- */
.grid-funding {
  grid-auto-rows: 1fr;
}
.grid-funding > * {
  height: 100%;
}

/* ---------------------------------------------------------------------------
   FIX 5 — Touch targets: meet WCAG 2.5.5 minimum 44×44 on mobile.
   Only affects mobile (≤720px); desktop unchanged.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  /* Blog "Read more" arrow link */
  .blog-card .read {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
  }
  /* Services "Learn More" inquire link */
  .svc-detail .inquire {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.25rem;
    min-height: 44px;
  }
  /* Breadcrumb links — add vertical padding only, no horizontal shift */
  .breadcrumbs a {
    display: inline-block;
    padding: 0.4rem 0.15rem;
    min-height: 36px;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
   FIX 6 — Remove broken .webp <source> elements at the network level
   Browsers will see the JPG <img> fallback, but the broken <source srcset>
   declarations still trigger 404 noise. We handle removal via HTML cleanup
   (separate Python script), but if any remain, hide-side effect: none here.
   (Placeholder section — no CSS required.)
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   FIX 7 — Smooth out section spacing inconsistencies
   No-op for desktop; only normalize section padding on small viewports
   to reduce visual debt.
   --------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .section { padding-block: clamp(2.5rem, 7vw, 3.5rem); }
}

/* ---------------------------------------------------------------------------
   FIX 8 — Footer-grid overflow at very narrow viewports (≤360px)
   At 320–360px, the footer brand link (with long ES tagline) sets the
   implicit min-width of every grid track, pushing the column to ~337px and
   creating ~37px of internal overflow (clipped by overflow-x:hidden on body).
   Force grid children to shrink and allow long content to wrap.
   --------------------------------------------------------------------------- */
.footer-grid > * {
  min-width: 0;
}
.footer-grid a,
.footer-grid p,
.footer-grid li,
.footer-grid span {
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media (max-width: 420px) {
  .footer .brand small { display: none; }
  .footer .brand span { font-size: 0.95rem; }
}

/* ---------------------------------------------------------------------------
   FIX 9 — Hero h1 + lede at ≤360px should never overflow.
   At 320px the hero h1 is clamp(2.25rem, 4.5vw, 3.5rem). The h1 stays at
   2.25rem (36px) but long unbroken Spanish words like
   "Financiamiento" can push width. Allow them to break.
   --------------------------------------------------------------------------- */
.hero h1, .page-hero h1, .post-hero h1 {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
@media (max-width: 360px) {
  .hero h1, .page-hero h1, .post-hero h1 {
    font-size: clamp(1.85rem, 8vw, 2.25rem);
  }
  .hero p.sub, .page-hero p, .post-hero p { font-size: 0.95rem; }
  .hero .hero-cta .btn,
  .hero .hero-secondary { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   FIX 10 — Touch targets up through 768px (tablet inclusive).
   Extend touch-target padding to tablets so the same rules cover both
   small and medium mobile devices.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .blog-card .read {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.25rem;
    min-height: 44px;
  }
  .svc-detail .inquire {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.55rem 0.25rem;
    min-height: 44px;
  }
  .breadcrumbs a {
    display: inline-block;
    padding: 0.4rem 0.15rem;
    min-height: 36px;
    line-height: 1.4;
  }
  /* Footer link list — add tap padding without changing visible layout */
  .footer-grid ul a {
    display: inline-block;
    padding-block: 0.25rem;
    line-height: 1.45;
  }
  /* In-page anchors / inline links in copy */
  .footer .footer-bottom .links a {
    display: inline-block;
    padding: 0.35rem 0.25rem;
  }
  /* Loan calculator unit toggle buttons */
  .calc-term-toggle button {
    min-height: 44px;
    padding-inline: 0.85rem;
  }
}

/* ---------------------------------------------------------------------------
   FIX 11 — Mobile hamburger touch target (44×44 WCAG minimum).
   nav-cta.css sets nav-toggle to 38×38; bump to 44×44 on mobile while
   keeping the same icon size.
   --------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .header .nav-toggle {
    width: 44px;
    height: 44px;
  }
}

/* ---------------------------------------------------------------------------
   FIX 12 — ES locations page cta-actions button centering (5 pages)
   At 320px, the .cta-actions wrapper contained a button that ended up
   18px off-center. Force the inner container to center-align children.
   --------------------------------------------------------------------------- */
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
@media (max-width: 420px) {
  .cta-actions .btn { width: 100%; justify-content: center; }
}

/* ---------------------------------------------------------------------------
   FIX 13 — Defensive guards against any other accidental horizontal overflow
   Hidden body overflow on base.css already clips, but visible content can
   still be wider than the viewport. Force images and embeds to fit; force
   pre/code to scroll their own block.
   --------------------------------------------------------------------------- */
img, video, iframe, svg.partner-logo {
  max-width: 100%;
  height: auto;
}
pre, code, table { max-width: 100%; }
.partner-badges, .industries-grid, .business-sectors-grid { min-width: 0; }

/* ---------------------------------------------------------------------------
   FIX 14 — Make form fields meet 44px tap target on mobile/tablet
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .form-card input,
  .form-card select,
  .form-card textarea,
  form[data-alta-form] input,
  form[data-alta-form] select,
  form[data-alta-form] textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS zoom on focus */
  }
  .form-card button[type="submit"],
  form[data-alta-form] button[type="submit"] {
    min-height: 48px;
  }
}

/* ---------------------------------------------------------------------------
   FIX 15 — 320px small-viewport overflow guards for hero/page-hero/post-hero.
   ES industry/location pages have long unbreakable words/phrases that push
   the .wrap container wider than the viewport at 320. Force soft-wrap and
   zero out min-width so flex/grid children can shrink below content size.
   --------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .page-hero .wrap,
  .hero .wrap,
  .post-hero .wrap {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-wrap: break-word;
  }
  .page-hero p,
  .hero p,
  .post-hero p,
  .page-hero h1,
  .hero h1,
  .post-hero h1,
  .page-hero .eyebrow,
  .hero .eyebrow,
  .post-hero .eyebrow {
    overflow-wrap: anywhere;
    word-wrap: break-word;
    hyphens: auto;
  }
  /* Long-text gold CTA on ES industry/location pages — let it wrap inline
     rather than blowing out the row. Keeps design intent: centered button. */
  .page-hero .mt-8,
  .hero .mt-8 {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
  }
  .page-hero .mt-8 .btn,
  .hero .mt-8 .btn {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    line-height: 1.25;
  }
}

/* ---------------------------------------------------------------------------
   FIX 16 — Legal pages: prevent long URLs/emails inside <strong>/<a> from
   producing horizontal overflow at narrow tablet widths. The audit reports
   strong⇄strong overlap on privacy/terms at 768px (false positive from
   inline siblings on the same baseline); also harmless to soft-wrap.
   --------------------------------------------------------------------------- */
.legal-content p,
.legal-content li,
.legal-content strong,
.legal-content a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------------------------------------------------------------------------
   FIX 17 — Final 320px overflow cleanup.
   - .hero .wrap.hero-grid on ES homepage overflows by ~30px because grid
     children + gap exceed viewport. Force grid to single column and zero
     min-width at narrow viewports.
   - .rate-table on calculator page overflows at 320; wrap in scroll context.
   - a.btn.btn-navy on ES location "Ver todos los servicios en detalle"
     button overflows because btn has white-space:nowrap; allow wrap at <=420.
   --------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .hero .wrap.hero-grid,
  .hero .wrap {
    min-width: 0;
    grid-template-columns: 1fr;
  }
  .hero .reveal,
  .hero .hero-media,
  .hero .hero-cta,
  .hero .hero-secondary {
    min-width: 0;
    max-width: 100%;
  }
  /* Allow all .btn variants to wrap inside narrow viewports. */
  .btn,
  .btn-navy,
  .btn-gold,
  .btn-primary,
  .btn-ghost {
    white-space: normal;
    text-align: center;
    line-height: 1.25;
    max-width: 100%;
  }
  /* Rate tables / wide tables can scroll within their own container. */
  .rate-table,
  table {
    display: block;
    max-width: 100%;
    overflow-x: auto !important;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
}

/* ---------------------------------------------------------------------------
   FIX 18 — Touch targets: footer link rows and remaining narrow tables.
   - Footer ul li a renders ~29px tall; pad vertically to clear 36-44px WCAG.
   - Force table internals (thead/tr/th/td) to inherit block scroll behavior
     so a wide rate-table at 320 cannot push the viewport.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .footer ul li a {
    display: inline-block;
    padding-block: 0.55rem;
    padding-inline: 0.1rem;
    min-height: 44px;
    line-height: 1.3;
  }
}
@media (max-width: 420px) {
  .rate-table {
    /* Ensure block-scroll wrapper actually clips children */
    width: 100%;
  }
  .rate-table thead,
  .rate-table tbody,
  .rate-table tr,
  .rate-table th,
  .rate-table td {
    /* Don't force these to block — keep table semantics — but ensure
       they don't force the parent table's overflow-x container wider
       than the viewport. */
    max-width: none; /* allow table content its natural width inside scroller */
  }
  /* The block-displayed .rate-table is the scrollable viewport; constrain it. */
  .rate-table {
    max-width: calc(100vw - 2.5rem);
  }
}

/* ---------------------------------------------------------------------------
   FIX 19 — Pad inline contact links (phone, email) for touch targets.
   Contact page has tel: / mailto: links rendered inline at ~17px tall.
   Promote to inline-block with vertical padding on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* All tel:/mailto:/email-protection inline links across the site */
  a[href^="tel:"],
  a[href*="cdn-cgi/l/email-protection"],
  a[href^="mailto:"] {
    display: inline-block;
    padding-block: 0.4rem;
    padding-inline: 0.1rem;
    min-height: 44px;
    line-height: 1.4;
    vertical-align: middle;
  }
  /* Footer-bottom legal links (Privacy / Terms / Disclosures) */
  .footer-bottom .links a {
    display: inline-block;
    padding-block: 0.4rem;
    min-height: 36px;
    line-height: 1.4;
  }
  /* Blog "Read more" inline arrow links */
  a.read,
  a.inquire {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0.25rem;
  }
}

/* ---------------------------------------------------------------------------
   FIX 20 — Breadcrumb link touch padding on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .breadcrumb a,
  .breadcrumbs a {
    display: inline-block;
    padding-block: 0.4rem;
    min-height: 36px;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
   FIX 21 — Blog "Related Posts" and in-prose list-item links touch padding.
   Blog post pages list internal links inside <ul><li><a>; at default they
   render h:20 inline. Promote to inline-block with padding on mobile.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* In-prose article list anchors: blog/post-body content lists */
  article ul li a,
  article ol li a,
  .post-body ul li a,
  .post-body ol li a,
  main section ul li a:not(.btn):not(.read):not(.inquire) {
    display: inline-block;
    padding-block: 0.4rem;
    min-height: 36px;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
   FIX 22 — Table cell inline anchors (rate-table) touch padding.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .rate-table td a,
  table td a {
    display: inline-block;
    padding-block: 0.4rem;
    min-height: 36px;
    line-height: 1.4;
  }
}

/* ---------------------------------------------------------------------------
   FIX 23 — Production-review (Round 10): mobile header overlap at ≤430px.
   At 375–430px viewports the brand text "Alta Business Loans" (~163px wide)
   collided with the ESPAÑOL + Apply + hamburger cluster on the right.
   Fix: hide the wordmark span on small phones and keep just the SVG logo
   glyph (same pattern as Stripe/Vercel headers). The brand remains a clickable
   link to home, with aria-label preserved. Also shrink nav-actions paddings
   slightly so all three controls fit comfortably with breathing room.
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .header .brand { gap: 0; min-width: 0; }
  .header .brand span { display: none; }
  .header .brand .logo { width: 36px; height: 36px; }
  .header .nav-actions { gap: 0.35rem; flex: none; }
  .header .lang-toggle {
    padding: 0 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    min-width: auto;
  }
  /* Keep font-size:0 from nav-cta.css so original "Apply Now" text stays hidden.
     Style the ::before pseudo-element (which renders "Apply" / "Solicitar"). */
  .header .nav-actions .btn-primary {
    padding: 0.5rem 0.7rem;
    white-space: nowrap;
  }
  .header .nav-actions .btn-primary::before {
    font-size: 0.82rem;
  }
}

/* At extra-small phone widths keep the same pattern with slightly tighter
   action padding so nothing hits viewport edge. */
@media (max-width: 360px) {
  .header .brand .logo { width: 32px; height: 32px; }
  .header .lang-toggle { font-size: 0.68rem; padding: 0 0.4rem; }
  .header .nav-actions .btn-primary { padding: 0.45rem 0.6rem; }
  .header .nav-actions .btn-primary::before { font-size: 0.78rem; }
}

/* ===========================================================================
   ROUND 12 — Responsive layout repair (CSS-only, no design/branding change)
   ---------------------------------------------------------------------------
   Issues fixed:
   1. Footer columns overlapping (root cause: --space-7 undefined → gap:normal=0)
   2. Email address wrapping mid-word in narrow Contact column
   3. Spanish navigation crowding header at ~1080–1440 ("Acerca de Nosotros"
      wraps to 3 lines, nav-actions extends past viewport at 1440)
   4. Brand description text touching adjacent column headers
   5. Service Areas / Contact columns equally narrow on EN/ES desktop
   =========================================================================== */

/* ---- 1. Footer grid gap (the missing token --space-7) ---------------------
   Restore proper column spacing. Mirrors --space-6 (1.5rem) + a touch more,
   matching the visual rhythm of the rest of the footer. */
.footer-grid {
  column-gap: 2.25rem;          /* desktop horizontal gap between columns */
  row-gap: 2rem;                /* gap when columns wrap to multi-row */
}

/* On very wide desktops give a bit more air so each column has room. */
@media (min-width: 1280px) {
  .footer-grid { column-gap: 2.75rem; }
}

/* Tablet — preserve readable spacing when columns drop to 3 across. */
@media (max-width: 1020px) {
  .footer-grid { column-gap: 2rem; row-gap: 1.75rem; }
}

/* Smaller tablet / large phone — 2-up grid. */
@media (max-width: 860px) {
  .footer-grid { column-gap: 1.5rem; row-gap: 1.5rem; }
}

/* Phone — single column stack. Restore vertical breathing room. */
@media (max-width: 520px) {
  .footer-grid { row-gap: 1.5rem; }
}

/* ---- 2. Footer column min-width + email wrap -----------------------------
   Ensure long single tokens (email/phone/address) never visually clip,
   wrap on safe characters only (no mid-word break for the email), and
   each column reserves enough room for its content. */
.footer-grid > * { min-width: 0; }              /* allow grid items to shrink properly */

.footer .footer-col-title,
.footer h4 { white-space: nowrap; }             /* prevent "Service Areas" from breaking */

/* Email + long address fields: prefer word-level wrap, not mid-word break. */
.footer a[href^="mailto:"],
.footer a[href^="tel:"] {
  word-break: normal;
  overflow-wrap: anywhere;        /* break only if no other option */
  display: inline-block;
  line-height: 1.5;
}

/* On wide desktops, the Contact column needs a hair more room because the
   email ("info@altabusinessloans.com") is 26 chars. Give the right-most
   column slightly more weight so the email stays on a single line. */
@media (min-width: 1280px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1.25fr;
  }
}

/* ---- 3. Footer brand column — keep description inside the column --------
   The brand column intro paragraph was running into the Company column at
   1280–1440. Constrain its inline size. */
.footer-grid > :first-child p,
.footer-grid > :first-child .footer-brand-copy,
.footer-grid > :first-child .es {
  max-width: 28ch;
  word-break: normal;
  overflow-wrap: break-word;
}

/* ---- 4. Spanish navigation breakpoint adjustments ------------------------
   ES strings are ~25% longer than EN. The desktop nav (.nav-links) is
   hidden ≤960px. Raise that threshold to 1100px for ES so links stop
   crowding once "Acerca de Nosotros" / "Calculadora" appear in the nav,
   and let .nav-tel and the button compress earlier. */

/* Allow nav links to wrap naturally instead of forcing a column at 1440. */
html[lang="es"] .nav-links {
  white-space: nowrap;
  gap: 1.1rem;                    /* slightly tighter than EN's 1.5rem */
}
html[lang="es"] .nav-links a { white-space: nowrap; }

/* Hide the long mailto link earlier on ES so .nav-actions doesn't overflow. */
@media (max-width: 1200px) {
  html[lang="es"] .header .nav-tel { display: none; }
}

/* On ES, switch to mobile-menu mode earlier so nothing crowds. */
@media (max-width: 1100px) {
  html[lang="es"] .nav-links { display: none; }
  html[lang="es"] .nav-toggle { display: inline-flex; }
}

/* ---- 5. Header row sanity — never let .nav-actions push past viewport ---
   Existing rule hides nav-tel at narrower widths for EN; ensure flex
   distribution gives the actions area only what it needs. */
.header .wrap.nav {
  flex-wrap: nowrap;
  max-width: 100%;
}
.header .nav-actions { flex: 0 0 auto; }
.header .brand { min-width: 0; }   /* let brand text ellipsize before pushing */

/* On very wide screens just keep the existing layout — no change needed. */

/* ---- 6. Homepage CTA section — even card heights + balanced spacing -----
   The three value cards (Nationwide / Financing / Personalized) should be
   equal height so the row reads as a balanced trio. Stretch + min-height
   anchors. No color/typography change. */
#apply .grid.grid-3 {
  align-items: stretch;
}
#apply .grid.grid-3 > .value-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
#apply .grid.grid-3 > .value-card p {
  margin-top: auto;
}

/* CTA container — keep the form-card centered with consistent inline padding
   so the bullet list never butts against the card edge on narrow phones. */
@media (max-width: 520px) {
  #apply .form-card {
    padding-inline: 1.25rem;
  }
  #apply .check-list { padding-inline: 0; }
}

/* ---- 7. Horizontal-scroll guard ------------------------------------------
   Belt-and-braces: prevent any single rogue element from triggering page
   horizontal scroll. Does not affect layout when nothing overflows. */
html, body { overflow-x: clip; }

/* ---- 8. Global tap-target & wrap safety for very narrow phones ----------
   320–360px: ensure footer email/phone never trigger horizontal scroll. */
@media (max-width: 360px) {
  .footer a[href^="mailto:"],
  .footer a[href^="tel:"] { font-size: 0.92rem; }
  .footer-grid > :first-child p { max-width: 100%; }
}

/* END ROUND 12 ============================================================ */

/* ROUND 12 — Email single-line refinement -------------------------------
   The Contact column was sized just under the email's render width
   (info@altabusinessloans.com ≈ 207px at 0.85rem). Bump the column's
   share of the grid slightly more at 1280+ so the email never wraps. */
@media (min-width: 1280px) {
  .footer-grid { grid-template-columns: 1.45fr 1fr 1fr 1fr 1.45fr; }
}
@media (min-width: 1440px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.55fr; }
}

/* ROUND 13 — Final pre-launch polish ====================================== */

/* 1. Rate / comparison table — small-mobile horizontal scroll fallback
   At ≤360px (especially ES with longer column labels) the rate-table content
   can exceed viewport width. Wrap the table in its own scroll container so
   the page never triggers horizontal scroll, while the table itself remains
   pan-able. Pure responsiveness fix — no design change. */
.rate-table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rate-table thead,
.rate-table tbody,
.rate-table tr { width: 100%; }

/* 2. Footer column titles — relax the Round 12 nowrap so ES long headings
   ("Áreas de Servicio", "Financiamiento") wrap cleanly inside their column
   without triggering scrollWidth > clientWidth. Columns already have proper
   gap and template ratios from Round 12, so soft wrapping looks balanced. */
.footer .footer-col-title {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
}

/* END ROUND 13 ============================================================ */

/* ROUND 13b — calculator rate-table on ≤360 phones: tighten cell padding and
   add a subtle right-edge fade so users see the table is pan-able when
   content extends past the visible area. No design change, no layout change. */
@media (max-width: 360px) {
  .rate-table th,
  .rate-table td {
    padding: 0.5rem 0.5rem;
    font-size: 0.82rem;
    line-height: 1.35;
  }
  .rate-table {
    position: relative;
    background-image: linear-gradient(to right, transparent calc(100% - 16px), rgba(0,0,0,0.06) 100%);
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 16px 100%;
  }
}

/* ========================================================================
   ROUND 14 — Vertical Compression Pass (CSS only)
   Goal: tighten unnecessary whitespace, preserve design, branding, colors,
   typography, images, content. No section added/removed/restructured.
   ====================================================================== */

/* ---- 1+2. Section padding — tighter rhythm across the site ------------
   Base v12.2 set 72/72 desktop, 48/48 mobile. Pull both down ~22-25% so
   the page reads tighter without feeling cramped. Also keeps section + 
   section additive spacing consistent. */
:root{
  --section-pad: 3.5rem;      /* was 4.5rem → 56px (was 72px), -22% */
  --section-pad-hero: 4.5rem; /* was 5.5rem → 72px (was 88px), -18% */
}
@media (max-width: 768px){
  :root{
    --section-pad: 2.25rem;      /* was 3rem → 36px (was 48px), -25% */
    --section-pad-hero: 2.5rem;  /* was 3.25rem → 40px (was 52px), -23% */
  }
}

/* ---- 3. Hero compression on the homepage hero-grid -------------------
   The .hero-grid uses its own padding-block clamp(--space-12,5vw,--space-20)
   = clamp(48px, 5vw, 80px). Pull both ends down ~12-15%. */
.hero .hero-grid{
  padding-block: clamp(2.5rem, 4.2vw, 4.25rem); /* was clamp(48px,5vw,80px) → ~40-68px */
}
.hero .hero-cta{ margin-top: 1.5rem; }   /* was --space-8 = 32px → 24px */
.hero .hero-pills{ margin-top: 1.5rem; } /* was --space-8 = 32px → 24px */
@media (max-width: 768px){
  .hero .hero-media{ margin-top: 1.25rem; } /* was --space-4 + auto sum */
}

/* ---- Page-hero (interior pages) — same logic ------------------------
   Base v12.2: hero-pad var above already covers it. Trim the original
   .page-hero clamp(--space-16,7vw,--space-24) = clamp(64,7vw,96px). */
.page-hero{
  padding-block: clamp(3rem, 5.5vw, 4.5rem); /* was clamp(64,7vw,96) → 48-72px, -25% */
}

/* ---- 4. American flag band — reduce height ~30% --------------------- */
.flag-band{
  min-height: 240px;            /* was 340px → -29% */
}
@media (max-width: 768px){
  .flag-band{ min-height: 200px; } /* was 280-300px → ~-30% */
}
.flag-band .inner{
  padding-block: 2.25rem;       /* was var(--section-pad) ~72px → 36px */
  padding-inline: 1.5rem;
}
@media (max-width: 768px){
  .flag-band .inner{ padding-block: 1.75rem; } /* was 2rem-3rem */
}

/* ---- 5. Loan calculator CTA — tighten surrounding spacing ------------
   The calculator page has section.calc-page (form + results) and a CTA
   band lower down. Both fall under the new --section-pad. Add a slight
   extra tightening for the form-card padding on small phones so the
   calc surface itself feels denser. */
.calc-page{ padding-block: 3rem; }      /* override default for this page */
.calc-grid{ gap: 1.5rem; }
.calc-results h3{ margin-bottom: .75rem; }
.calc-result-row{ padding-block: .65rem; }
@media (max-width: 768px){
  .calc-page{ padding-block: 2rem; }
}
/* Trim disclaimer breathing room a bit */
.calc-disclaimer{ margin-top: 1.5rem; }

/* ---- 6. "Built on four simple promises" — values section ------------
   Identified by body.home #values; the existing v12.x rules push padding
   high. Trim section top/bottom and the gap between header and grid. */
body.home #values{
  padding-block: var(--section-pad);
}
body.home #values .center{ margin-bottom: 1.5rem; }
body.home #values .grid.grid-4{ gap: 1.25rem; }
body.home #values .value-card{ padding: 1.1rem 1.15rem; }

/* ---- 7. Homepage Apply CTA — tighten before and after ---------------
   #apply section uses default --section-pad. Pull it ~30% tighter since
   the section has minimal internal content (heading + bullets + button). */
#apply{
  padding-top: 2.5rem;     /* was 56px → 40px */
  padding-bottom: 2.5rem;
}
#apply .center{ margin-bottom: 1.25rem; }
#apply .form-card{ padding: 1.5rem clamp(1.25rem, 3vw, 2rem); }
#apply .check-list{ gap: .55rem; margin-block: 1rem; }
@media (max-width: 768px){
  #apply{ padding-top: 1.75rem; padding-bottom: 1.75rem; }
}

/* ---- 8. Footer height reduction ~25% --------------------------------
   Baseline: .footer .wrap padding-block 3rem 1.5rem (48/24), +32 margin
   to disclaimer, +24 margin to bottom. Tighten each band proportionally. */
.footer .wrap{
  padding-block: 2.25rem 1.1rem; /* was 48/24 → 36/17.6, -25% top, -27% bottom */
}
.footer h4,
.footer .footer-col-title{
  margin-bottom: .85rem;          /* was --space-4 = 1rem */
}
.footer ul{ gap: .4rem; }         /* was .5rem */
.footer ul li[style]{ line-height: 1.4; }
.footer-disclaimer{
  margin-top: 1.5rem;             /* was --space-8 = 2rem */
  padding-top: 1rem;              /* was --space-6 = 1.5rem */
  line-height: 1.55;
}
.footer-bottom{
  margin-top: 1rem;               /* was --space-6 = 1.5rem */
}
@media (max-width: 768px){
  .footer .wrap{ padding-block: 1.75rem .9rem; }
  .footer-disclaimer{ margin-top: 1.25rem; padding-top: .85rem; }
  .footer-bottom{ margin-top: .85rem; }
  .footer-grid{ row-gap: 1.5rem; } /* was --space-7 = 1.75rem on stacked mobile */
}

/* ---- 9. Section-to-section additive padding (style.css line 1157)
   has `.section + .section{ padding-top: var(--section-pad) }`. Our
   new --section-pad already shrinks this — nothing extra needed. */

/* ---- 10. Tighten the "section heading block" rhythm globally ---------
   `.center` blocks above grids/cards typically have margin below from
   their child lead/eyebrow. Trim the gap before the content grid. */
.section .center{ margin-bottom: 1.5rem; }        /* was implicit ~2rem */
.section .center + .grid,
.section .center + .feature,
.section .center + .steps{ margin-top: .25rem; }

/* ---- Misc: tighten CTA bands (consistent compression) ---------------- */
.cta-band{ padding: clamp(1.75rem, 4vw, 3rem); }  /* was clamp(2rem,5vw,4rem) */
.partners{ padding: clamp(1.75rem, 4vw, 3rem); }  /* match */

/* END ROUND 14 ============================================================ */

/* ROUND 14b — Flag-band: content drives height (5-line h2 + paragraph at
   chosen typography). Further tighten internal padding and gap so the band
   feels denser even though content size is fixed by the typography rules. */
.flag-band .inner{
  padding-block: 1.5rem;   /* was 2.25rem → -33% */
}
.flag-band h2{ line-height: 1.08; }
.flag-band p{ margin-top: .75rem; }   /* was 1rem */
@media (max-width: 768px){
  .flag-band .inner{ padding-block: 1.25rem; }
}

/* ============================================================================
   ROUND 17 — Visual QA fixes (CSS-only)
   Scope: spacing, wrapping, alignment, overflow, responsiveness.
   NO redesign. NO content/branding changes.
   ============================================================================ */

/* FIX R17-1 — Trust strip: uniform row heights across ALL breakpoints
   Previously equal-row-height only at <=720. ES at 768 had [40,40,64,64].
   Make rows equal everywhere and tame excess vertical whitespace. */
.trust-grid{
  grid-auto-rows: 1fr;
  align-items: stretch;
}
.trust-grid > *{
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.5rem;
}

/* FIX R17-2 — Homepage value cards: stop pushing body text to the bottom.
   `margin-top:auto` on <p> created large empty gaps at 768–1024.
   Let content sit naturally below the title; equal column heights still come
   from the parent grid. */
#apply .grid.grid-3 > .value-card{
  justify-content: flex-start;
}
#apply .grid.grid-3 > .value-card p{
  margin-top: 0.5rem;
}

/* FIX R17-3 — Tight mobile nav (ES + EN): reduce crowding 320–414px.
   Prevent the Solicitar/Apply button from kissing the hamburger.
   R22 FIX: keep font-size:0 on the button itself (so the original
   "Apply Now" text remains hidden) and style the ::before pseudo-element
   that nav-cta.css uses to render the short "Apply" / "Solicitar" label. */
@media (max-width: 414px){
  .header .nav-actions{ gap: 0.35rem; }
  .header .nav-actions .btn-primary{
    padding: 0.45rem 0.6rem;
    font-size: 0;
    white-space: nowrap;
  }
  .header .nav-actions .btn-primary::before{ font-size: 0.85rem; }
}
@media (max-width: 375px){
  .header .nav-actions{ gap: 0.3rem; }
  .header .nav-actions .btn-primary{ padding: 0.4rem 0.55rem; font-size: 0; }
  .header .nav-actions .btn-primary::before{ font-size: 0.8rem; }
}
@media (max-width: 360px){
  .header .nav-actions{ gap: 0.25rem; }
  .header .nav-actions .btn-primary{ padding: 0.35rem 0.5rem; font-size: 0; }
  .header .nav-actions .btn-primary::before{ font-size: 0.78rem; }
}

/* FIX R17-4 — Footer email link: ensure no awkward wrap at narrow widths.
   The cdn-cgi obfuscated anchor sits in a <li> with min-height:44px tap target.
   Keep that tap target but prevent any visual wrap of the email text itself. */
.footer-grid a[href*="cdn-cgi/l/email-protection"]{
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
  display: inline-block;
  max-width: 100%;
}
@media (max-width: 480px){
  .footer-grid a[href*="cdn-cgi/l/email-protection"]{
    font-size: 0.9rem;
  }
}

/* FIX R17-5 — Footer column safety at tablet widths.
   Ensure no overlap between columns when grid wraps 5 → 2/3 cols. */
@media (max-width: 1024px) and (min-width: 641px){
  .footer-grid{
    gap: clamp(1rem, 2vw, 1.5rem) clamp(1.25rem, 3vw, 2rem);
  }
}

/* END ROUND 17 ============================================================ */

/* ============================================================================
   ROUND 18 — Final visual polish (CSS-only)
   Scope: CTA card alignment, blog image edges, page-wide alignment QA.
   NO redesign, NO content/branding changes.
   ============================================================================ */

/* FIX R18-1 — CTA 3-card section (Nationwide / Financing / Personalized):
   Make icon row, title row, and body row align ACROSS the three cards.
   We pin each region to a fixed vertical band so all 3 cards line up.
   This removes excessive whitespace by giving the title block a min-height
   that fits 2 lines, and lets body text fill remaining space naturally. */
.wrap.grid.grid-3.mt-12 > .value-card{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  height: 100%;
  padding: 1.75rem 1.5rem;
}
.wrap.grid.grid-3.mt-12 > .value-card .icon-box{
  margin: 0 auto 1rem;
  flex: 0 0 auto;
}
.wrap.grid.grid-3.mt-12 > .value-card h3{
  margin: 0 0 0.75rem;
  min-height: calc(1.375rem * 1.3 * 2);  /* room for 2 lines */
  display: flex;
  align-items: center;
  justify-content: center;
}
.wrap.grid.grid-3.mt-12 > .value-card p{
  margin: 0;
  max-width: 28ch;
}
/* Ensure the parent grid sizes all rows equally so card heights match. */
.wrap.grid.grid-3.mt-12{
  align-items: stretch;
  grid-auto-rows: 1fr;
}

@media (max-width: 720px){
  .wrap.grid.grid-3.mt-12 > .value-card h3{
    min-height: 0;
  }
}

/* FIX R18-1b — Tablet (641–980px): when 3-col grid becomes 2-col, keep 3 cols
   for this specific CTA section so cards don't orphan on row 2. */
@media (min-width: 641px) and (max-width: 980px){
  .wrap.grid.grid-3.mt-12{
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .wrap.grid.grid-3.mt-12 > .value-card{
    padding: 1.25rem 0.9rem;
  }
  .wrap.grid.grid-3.mt-12 > .value-card p{
    font-size: 0.92rem;
  }
}

/* FIX R18-2 — Blog card image: harden against any letterbox/black-edge
   artifact (defense-in-depth even though source JPGs were re-cropped). */
.blog-card > a{
  display: block;
  width: 100%;
  background: #fff;
  line-height: 0;          /* kill inline-img baseline gap */
}
.blog-card > a > img,
.blog-card picture > img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #fff;        /* fallback while image loads */
  margin: 0;
}

/* FIX R18-3 — Blog home preview thumbnails: same hardening
   NOTE (R19): restrict to the IMMEDIATE child anchor that wraps the image,
   NOT to every <a> in the card (which broke <h3><a></a></h3> and .read by
   forcing display:block + line-height:0, collapsing them to height 0). */
body.home #blog-preview .blog-card > a{ display: block; line-height: 0; background:#fff; }
body.home #blog-preview .blog-card > a > img,
body.home #blog-preview .blog-card > a > picture > img{
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
}

/* END ROUND 18 ============================================================ */

/* ============================================================================
   ROUND 19 — PRE-LAUNCH POLISH (CSS-only)
   ============================================================================ */

/* FIX R19-1 — Reset any cascade that may have flattened anchors inside
   blog-card text content. Ensure <h3><a> and .read anchors render normally
   (inline-level, with their own line-height) regardless of any image-anchor
   hardening rules elsewhere. */
.blog-card .body h2,
.blog-card .body h3{
  display: block;
  line-height: 1.3;
  margin: 0 0 .15rem 0;
}
.blog-card .body h2 > a,
.blog-card .body h3 > a,
.blog-card .body a.read,
.blog-card .body p > a{
  display: inline;
  line-height: inherit;
  background: transparent;
}
.blog-card .body a.read{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  line-height: 1.4;
}

/* FIX R19-2 — Force the blog card body to lay out as a normal flex column
   with proper vertical spacing between category, title, excerpt, and CTA.
   No overlap, no collapse, equal heights via flex stretch. */
.blog-card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.blog-card .body{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: .5rem;
}
.blog-card .body > .cat{ margin: 0 }
.blog-card .body > h2,
.blog-card .body > h3{ margin: 0 }
.blog-card .body > p{ margin: 0 }
.blog-card .body > .read{ margin-top: auto; padding-top: .6rem }

/* FIX R19-3 — Ensure the .reveal hide-state never hides a blog card
   permanently (safety net beyond JS): cards must always be visible after
   initial paint even if IntersectionObserver fails. */
.js-on .blog-card.reveal{
  opacity: 1;
  transform: none;
}

/* FIX R19-4 — Article body (.article.reveal) safety: same — never let JS
   reveal logic hide article text. */
.js-on .article.reveal,
.js-on .post-hero .reveal{
  opacity: 1;
  transform: none;
}

/* END ROUND 19 ============================================================ */