/* ================================================================
   homepage-flow-v1.css
   Marketplace-first homepage flow — CSS companion to
   homepage-conversion-optimizer.js v2 changes.

   Phase B: Mini trust strip (#fxf-mini-trust) injected by JS
            between #artisans-section and .how-it-works-section.
   Phase C: Reduce visual dominance of explanatory sections
            (how-it-works, why-fixeo, vision, final-cta).

   CSS only for Phases C/D. Phase B strip is JS-injected.
   Zero HTML structural changes. Zero auth/RLS/logic changes.
   ================================================================ */

/* ── PHASE B: Mini trust strip ──────────────────────────────────── */

#fxf-mini-trust {
  padding: 20px 0 28px;
}

#fxf-mini-trust .fxf-trust-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px;
}

#fxf-mini-trust .fxf-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.13);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12),
              inset 0 1px 0 rgba(255,255,255,0.06);
  flex: 1 1 180px;
  min-width: 160px;
  max-width: 240px;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

#fxf-mini-trust .fxf-pill:hover {
  border-color: rgba(255,255,255,0.15);
  box-shadow: 0 6px 22px rgba(0,0,0,0.18),
              inset 0 1px 0 rgba(255,255,255,0.08);
}

#fxf-mini-trust .fxf-pill-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}

#fxf-mini-trust .fxf-pill-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

#fxf-mini-trust .fxf-pill-label {
  font-size: 0.82rem;
  font-weight: 700;
  color: rgba(255,255,255,0.92);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

#fxf-mini-trust .fxf-pill-sub {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.48);
  line-height: 1.2;
}

/* Subtle divider above strip */
#fxf-mini-trust::before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.07), transparent);
  margin-bottom: 20px;
}

/* ── PHASE C: Compact explanatory sections ──────────────────────── */

/* How it works — tighter padding */
#how-it-works.how-it-works-section,
.how-it-works-section {
  padding-top: 36px !important;
  padding-bottom: 44px !important;
}

/* Smaller section-header gap in how-it-works */
#how-it-works .section-header,
#how-it-works .how-header {
  margin-bottom: 28px !important;
}

/* Why Fixeo (Technology) — compact */
#why-fixeo-section {
  padding-top: 36px !important;
  padding-bottom: 44px !important;
}

#why-fixeo-section .section-header,
#why-fixeo-section .why-fixeo-header {
  margin-bottom: 28px !important;
}

/* Vision section — compact */
.testimonial-section.fxv-section {
  padding-top: 36px !important;
  padding-bottom: 44px !important;
}

.testimonial-section .section-header {
  margin-bottom: 28px !important;
}

/* Final CTA — keep prominent, just normalize top spacing */
.final-cta-section {
  padding-top: 52px !important;
}

/* Section dividers between explanation blocks — lighter */
#how-it-works ~ .section-divider,
#why-fixeo-section ~ .section-divider {
  opacity: 0.5 !important;
}

/* ── PHASE C: Section headers in explanation sections — smaller ─── */

#how-it-works .section-header h2,
#why-fixeo-section .section-header h2 {
  font-size: clamp(1.2rem, 2.2vw, 1.65rem) !important;
  margin-bottom: 8px !important;
}

#how-it-works .section-header p,
#why-fixeo-section .section-header p {
  font-size: 0.84rem !important;
  opacity: 0.60 !important;
}

/* ── PHASE D: Mobile ≤ 768px ────────────────────────────────────── */
@media (max-width: 768px) {

  #fxf-mini-trust {
    padding: 16px 0 22px;
  }

  #fxf-mini-trust .fxf-trust-inner {
    gap: 8px;
    padding: 0 12px;
  }

  #fxf-mini-trust .fxf-pill {
    flex: 1 1 140px;
    min-width: 130px;
    max-width: none;
    padding: 10px 14px;
    gap: 8px;
    border-radius: 12px;
  }

  #fxf-mini-trust .fxf-pill-icon {
    font-size: 1.2rem;
  }

  #fxf-mini-trust .fxf-pill-label {
    font-size: 0.78rem;
  }

  #fxf-mini-trust .fxf-pill-sub {
    font-size: 0.68rem;
  }

  /* Compact explanation sections on mobile */
  #how-it-works.how-it-works-section,
  .how-it-works-section {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  #why-fixeo-section {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  .testimonial-section.fxv-section {
    padding-top: 28px !important;
    padding-bottom: 32px !important;
  }

  #how-it-works .section-header,
  #why-fixeo-section .section-header,
  .testimonial-section .section-header {
    margin-bottom: 20px !important;
  }

}

/* ── PHASE D: Very narrow ≤ 380px ──────────────────────────────── */
@media (max-width: 380px) {

  #fxf-mini-trust .fxf-trust-inner {
    gap: 6px;
  }

  #fxf-mini-trust .fxf-pill {
    flex: 1 1 120px;
    min-width: 110px;
    padding: 9px 11px;
    gap: 7px;
  }

  #fxf-mini-trust .fxf-pill-label {
    font-size: 0.75rem;
  }

}

/* ══════════════════════════════════════════════════════════
   PHASE E — LOWER HOMEPAGE RHYTHM COMPRESSION
   Append-only. Zero existing lines modified.
   Goal: tighter lower-page rhythm, less scroll fatigue.
   Affects: Vision, CTA, Footer.
   ══════════════════════════════════════════════════════════ */

/* ── Phase A: Technologie Fixeo (why-fixeo-section) — already at
      36/44px from Phase C above. Tighten card grid gap + header. */
#why-fixeo-section .why-fixeo-grid,
#why-fixeo-section .fxm-grid {
  gap: 10px !important;
}
/* Card internal padding — slightly less on desktop */
#why-fixeo-section .wf-card,
#why-fixeo-section .fxm-block {
  padding: 20px !important;
}

/* ── Phase B: Vision Fixeo (testimonial-section) — tighten header
      margin-bottom (40px → 20px desktop) + inner blocks spacing.
      Must beat: testimonials-cta-premium.css html body selector (0,2,1) */
html body .testimonial-section.fxv-section .section-header {
  margin-bottom: 20px !important;
}
/* fxv-story / fxv-signals / fxv-flow top padding reduction */
html body .testimonial-section.fxv-section .fxv-story {
  padding-top: 14px !important;
}
html body .testimonial-section.fxv-section .fxv-signals {
  padding-top: 12px !important;
}

/* ── Phase B (mobile ≤768px): tighter header mb, smaller body padding */
@media (max-width: 768px) {
  html body .testimonial-section.fxv-section .section-header {
    margin-bottom: 14px !important;
  }
  html body .testimonial-section.fxv-section .fxv-story {
    padding-top: 10px !important;
  }
  html body .testimonial-section.fxv-section .fxv-signals {
    padding-top: 10px !important;
  }
  /* Vision section overall: tighter on mobile */
  .testimonial-section.fxv-section {
    padding-top: 22px !important;
    padding-bottom: 26px !important;
  }
}

/* ── Phase C: Final CTA — still prominent but not excessive.
      100px/110px → 64px/72px desktop (already applied at mobile via
      testimonials-cta-premium responsive).
      Must beat: html body .final-cta-section (0,2,1) → use (0,3,1) */
html body .final-cta-section {
  padding-top: 64px !important;
  padding-bottom: 72px !important;
}
/* Inner .final-cta card: 56px/48px → 36px/32px — feels denser, still premium */
html body .final-cta-section .final-cta {
  padding: 36px 36px !important;
}
@media (max-width: 768px) {
  html body .final-cta-section {
    padding-top: 40px !important;
    padding-bottom: 48px !important;
  }
  html body .final-cta-section .final-cta {
    padding: 28px 20px !important;
  }
}

/* ── Phase C: Footer — tighten generous gaps.
      Must beat: homepage-v13.css specificity (0,1,1 → use 0,1,1 + !important) */
footer {
  padding-top: 36px !important;
}
.v13-partners-row {
  margin-bottom: 28px !important;
  padding-bottom: 20px !important;
}
.footer-grid {
  gap: 28px !important;
  margin-bottom: 24px !important;
}
@media (max-width: 768px) {
  footer {
    padding-top: 24px !important;
  }
  .v13-partners-row {
    margin-bottom: 16px !important;
    padding-bottom: 14px !important;
  }
  .footer-grid {
    gap: 12px !important;
    margin-bottom: 16px !important;
  }
  /* Footer grid single column on narrow mobile — shrink link list gap */
  .footer-links li {
    margin-bottom: 7px !important;
  }
  .footer-links h4 {
    margin-bottom: 10px !important;
  }
}


/* ── Phase E fix: CTA inner card padding — beat testimonials-cta-premium.css
      (0,2,2) by using > .container > .final-cta (0,2,3). No !important fights. */
html body .final-cta-section > .container > .final-cta {
  padding: 36px 36px !important;
}
@media (max-width: 768px) {
  html body .final-cta-section > .container > .final-cta {
    padding: 28px 20px !important;
  }
}

/* ── Phase C mobile footer: 2-column grid at ≤560px to halve scroll height */
@media (max-width: 560px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
}
/* Very narrow: back to 1 column at ≤320px */
@media (max-width: 320px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   L-2: Trust Strip — Marketplace Signal Premium Polish
   Append-only. Braces balanced. Never modify existing blocks.
   ═══════════════════════════════════════════════════════════════════ */

/* ── L2-A: Per-pill subtle accent — 4 distinct signals, one identity ── */
/* Each pill carries a different type of signal — a micro-tint communicates
   this without labels or headers. All remain within the same glassmorphism
   language. Differences are intentional but subtle — NOT dashboard-loud. */

/* Pill 1 — Quality / verification (warm gold-white — trust, authority) */
#fxf-mini-trust .fxf-pill-verified {
  border-color: rgba(251, 211, 141, 0.18) !important;
}
#fxf-mini-trust .fxf-pill-verified .fxf-pill-label {
  color: rgba(255, 255, 255, 0.96) !important;
}

/* Pill 2 — Live availability (emerald — active, now, alive) */
#fxf-mini-trust .fxf-pill-available {
  border-color: rgba(32, 201, 151, 0.22) !important;
}
#fxf-mini-trust .fxf-pill-available .fxf-pill-label {
  color: rgba(32, 201, 151, 0.94) !important;
}
#fxf-mini-trust .fxf-pill-available .fxf-pill-icon {
  color: rgba(32, 201, 151, 1.00) !important;
}

/* Pill 3 — Payment safety (emerald — same register as L-1 step-4) */
#fxf-mini-trust .fxf-pill-payment {
  border-color: rgba(32, 201, 151, 0.18) !important;
}
#fxf-mini-trust .fxf-pill-payment .fxf-pill-label {
  color: rgba(32, 201, 151, 0.88) !important;
}

/* Pill 4 — Geographic coverage (soft blue-violet — scope, scale) */
#fxf-mini-trust .fxf-pill-coverage {
  border-color: rgba(139, 92, 246, 0.20) !important;
}
#fxf-mini-trust .fxf-pill-coverage .fxf-pill-label {
  color: rgba(192, 168, 255, 0.90) !important;
}
#fxf-mini-trust .fxf-pill-coverage .fxf-pill-icon {
  color: rgba(192, 168, 255, 0.88) !important;
}

/* ── L2-B: Sub-text legibility pass ── */
/* Was 0.48 opacity on 0.72rem — barely legible. 0.56 = readable. */
#fxf-mini-trust .fxf-pill-sub {
  color: rgba(255, 255, 255, 0.56) !important;
  line-height: 1.3 !important;
}

/* ── L2-C: Pill hover — per-accent enhancement ── */
#fxf-mini-trust .fxf-pill-available:hover {
  border-color: rgba(32, 201, 151, 0.36) !important;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18),
              0 0 0 0 transparent,
              inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}
#fxf-mini-trust .fxf-pill-payment:hover {
  border-color: rgba(32, 201, 151, 0.30) !important;
}
#fxf-mini-trust .fxf-pill-coverage:hover {
  border-color: rgba(139, 92, 246, 0.34) !important;
}

/* ── L2-D: Mobile — sub-text slightly smaller to keep 2-row pill clean ── */
@media (max-width: 640px) {
  #fxf-mini-trust .fxf-pill-sub {
    font-size: 0.67rem !important;
    color: rgba(255, 255, 255, 0.50) !important;
  }
  /* Pill 4 sub text is longer ("Casablanca · Rabat · …") — allow wrap gracefully */
  #fxf-mini-trust .fxf-pill-coverage .fxf-pill-sub {
    white-space: normal !important;
    line-height: 1.25 !important;
  }
}