/* ==========================================================================
   Zatra UX corrections — 2026-09-06
   One authoritative correction layer, loaded last on every page.
   Each block names the defect it repairs so it can be retired at source.
   ========================================================================== */

/* --- 1. Overlay collision on the fold -------------------------------------
   Defect: the Maureen panel (z-index 1210), the consent banner and the
   WhatsApp dock all claimed the fold at once. On a 390px viewport the panel
   alone covered 54% of the screen, slicing the H1 after "Structure." and
   hiding the primary CTA entirely. Auto-open is now desktop-and-intent gated
   in viola-desk.js; this caps panel geometry for deliberate opens so the
   headline stays legible behind it. */
@media (max-width: 900px) {
  html body .viola-desk-panel {
    left: max(12px, env(safe-area-inset-left, 0px)) !important;
    right: max(12px, env(safe-area-inset-right, 0px)) !important;
    width: auto !important;
    height: min(52vh, 440px) !important;
    bottom: max(76px, calc(64px + env(safe-area-inset-bottom, 0px))) !important;
  }
}

/* --- 2. Consent banner seated on the primary CTA --------------------------
   Defect: a centred 720px card at bottom:12px landed on top of the hero CTA
   on desktop. Re-seated as a slim bar on the bottom edge — same consent
   function, roughly 56px of coverage instead of ~190px over the conversion
   point. */
@media (min-width: 901px) {
  html body .zatra-consent-banner {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    padding: 12px clamp(16px, 4vw, 48px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
  }
  html body .zatra-consent-banner p {
    margin: 0 !important;
    flex: 1 1 460px;
  }
}

/* --- 3. Language switcher spending the mobile fold ------------------------
   Defect: seven locales wrapped to two rows (~130px) directly above the hero
   on mobile — 15% of an 844px viewport spent before any proposition is made.
   Now a single row that scrolls horizontally. */
@media (max-width: 900px) {
  html body .zatra-lang-switcher {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    gap: 2px;
    padding-inline: 12px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  html body .zatra-lang-switcher::-webkit-scrollbar { display: none; }
  html body .zatra-lang-switcher a { flex: 0 0 auto; }
}

/* --- 4. Hero headline rag -------------------------------------------------
   Defect: the five hard-broken H1 lines leave "moves." stranded alone on
   every viewport. Above 1200px the accent clause reflows as one phrase,
   giving a four-line stack and a clean rag. */
@media (min-width: 1200px) {
  .hero-h1-five .hero-h1-line--accent { display: inline; }
  .hero-h1-five .hero-h1-line--accent + .hero-h1-line--accent::before { content: " "; }
}

/* --- 5. Floating dock separation -----------------------------------------
   Defect: launcher, WhatsApp pill and avatar bubble overlapped in the bottom
   strip on mobile. Guarantees a minimum tap separation and keeps them clear
   of the iOS home indicator. */
@media (max-width: 900px) {
  html body .pricing-wa-dock {
    gap: 10px !important;
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* --- 6. Review capture block ---------------------------------------------
   Placed only on the five highest-traffic pages plus /contacts/ (GSC Pages.csv,
   3 months to 2026-08-28). A review ask on a page nobody visits is dead weight;
   one on every page devalues the ask. Brand doctrine: light ground, Montserrat,
   no emoji, no gradient button, hairline border rather than glass. */
.zatra-review-ask {
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  max-width: 1200px;
  margin: clamp(40px, 6vw, 72px) auto;
  padding: clamp(24px, 3.5vw, 36px);
  background: #F0EFF0;
  border: 1px solid rgba(10, 14, 18, .10);
  border-radius: 20px;
  font-family: Montserrat, Arial, sans-serif;
}
.zatra-review-ask__body { flex: 1 1 auto; min-width: 0; }
.zatra-review-ask h2 {
  margin: 0 0 10px;
  font-family: Montserrat, Arial, sans-serif;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #0A0E12;
}
.zatra-review-ask p {
  margin: 0 0 18px;
  max-width: 56ch;
  font-size: 1rem;
  line-height: 1.6;
  color: #33383F;
}
.zatra-review-ask__link {
  display: inline-block;
  padding: 12px 22px;
  background: #F6010F;
  color: #fff;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 999px;
  transition: background .18s ease;
}
.zatra-review-ask__link:hover,
.zatra-review-ask__link:focus-visible { background: #900303; }
.zatra-review-ask__qr {
  flex: 0 0 auto;
  margin: 0;
  text-align: center;
}
.zatra-review-ask__rate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.zatra-review-ask__stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.zatra-review-ask__stars svg {
  width: 22px;
  height: 22px;
  color: #0A0E12;
}
.zatra-review-ask__qr img {
  display: block;
  width: 132px;
  height: 132px;
  padding: 10px;
  background: #fff;
  border: 1px solid rgba(10, 14, 18, .08);
  border-radius: 14px;
}
.zatra-review-ask__scan,
.zatra-review-ask__qr figcaption {
  margin: 0;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #6A7078;
}
@media (max-width: 720px) {
  .zatra-review-ask { flex-direction: column; align-items: flex-start; }
}
@media print {
  .zatra-review-ask__qr { display: block !important; }
}