/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */
@media (max-width: 1080px) {
  .ec-nav-list { display: none; }
  .mobile-menu-btn { display: flex; margin-left: 14px; }
  .header-actions { margin-left: auto; }
  .products-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-ledger-grid { grid-template-columns: 1fr; }
  .footer-main-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .ec-header .header-actions { display: none; }
  .mobile-menu-btn { display: flex; margin-left: auto; }
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .calc-two-col { grid-template-columns: 1fr; }
  .calc-summary-card { border-left: none; border-top: 1px solid rgba(255, 255, 255, 0.2); }
  /* minmax(0,1fr) so a wide stat cannot force the
     track past the viewport — plain 1fr floors at min-content. */
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .adv-index-grid { columns: 1; }
  .process-steps-track { grid-template-columns: 1fr; }
  .products-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .container { padding: 0 18px; }
  .brand-logo-img { height: 44px; }
  .ec-brand-logo { gap: 10px; }
  .hero-main-title { font-size: clamp(38px, 10.5vw, 48px); }
  .hero-btn-row .btn { width: 100%; }
  .footer-main-grid { grid-template-columns: 1fr; }
  .footer-copyright-bar { flex-direction: column; align-items: flex-start; }

  /* Trust ledger: two columns on a phone, with the figures scaled to the
     widest value ("3,000+"). Measured ceiling before the number wraps is
     25px at 320px and the full 34px from 375px up, so ramp between them.
     No overflow-wrap here on purpose — a wrapped figure would hide an
     overflow bug from check_layout.py instead of failing loudly. */
  .trust-grid { gap: 12px; }
  .trust-card { padding: 15px 13px; border-left-width: 3px; }
  .trust-stat { font-size: clamp(24px, 7.6vw, 34px); margin-bottom: 4px; }
  .trust-stat span { font-size: 13px; }
  .trust-label { font-size: 12px; line-height: 1.45; }

  /* Product card CTA was 28px tall — too small to tap reliably. */
  .product-btn-link { padding: 11px 0; }
}

/* ============================================================
   TOUCH TARGETS
   Applies to touch devices only, so the desktop design is
   untouched. The calculator sliders are drag controls; a 24px
   thumb is hard to grab with a thumb.
   ============================================================ */
@media (pointer: coarse) {
  .fintech-range-slider { height: 14px; }
  .fintech-range-slider::-webkit-slider-thumb { width: 32px; height: 32px; }
  .fintech-range-slider::-moz-range-thumb { width: 32px; height: 32px; }
  .product-btn-link { padding: 11px 0; }
}


/* ============================================================
   ACCESSIBILITY
   Keyboard focus and reduced motion. The stylesheet previously
   defined no focus styles at all, so keyboard users had no
   visible indicator — AGENTS.md requires WCAG AA.
   ============================================================ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--green-bright);
  outline-offset: 2px;
}

/* Dark bands need a light ring to stay visible against forest green. */
.calc-section a:focus-visible,
.calc-section button:focus-visible,
.calc-section input:focus-visible,
.process-section a:focus-visible,
.cta-section a:focus-visible,
.ec-footer a:focus-visible,
.compliance-slogan-card a:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* The perks ribbon is an infinite marquee — park it. */
  .perk-track { animation: none !important; transform: none !important; }
}

/* Floating WhatsApp CTA — compact on phones. */
@media (max-width: 560px) {
  .float-wa {
    right: 16px;
    bottom: 16px;
    padding: 10px 12px;
    min-width: 52px;
    min-height: 52px;
    border-radius: 12px;
  }
  .float-wa i { font-size: 22px; }
  .float-wa-label { font-size: 10px; }
}