/* =============================================================================
   Zatra — Mobile & tablet layout polish
   Loads LAST. Desktop (≥981px) is intentionally untouched.
   Fixes: gutters, type hierarchy, paragraph rhythm, container padding,
   overflow, FAB collision, and cramped/stacked shells.
   ============================================================================= */

:root{
  --zatra-mobile-gutter:16px;
  --zatra-mobile-section-y:40px;
  --zatra-mobile-radius:16px;
  --zatra-mobile-card-pad:16px;
  --zatra-mobile-stack:14px;
}

/* Kill whole-page zoom on phones/tablets — causes overflow and weak density */
@media (max-width:980px){
  body:not(:has(.hero.hero-editorial)),
  body:not(:has(.hero.hero-editorial)) .floating-whatsapp{
    zoom:1!important;
    --zatra-page-zoom:1!important;
  }
}

/* ---------- Tablet + phone (≤980) ---------- */
@media (max-width:980px){
  html,body{
    overflow-x:hidden!important;
  }
  body{
    padding-bottom:calc(28px + env(safe-area-inset-bottom,0px))!important;
  }

  /* Unified page gutter — prefer real padding over width tricks */
  .container,
  .setup-layout,
  .proof-layout,
  .zatra-footer-shell{
    width:100%!important;
    max-width:100%!important;
    margin-inline:auto!important;
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
    box-sizing:border-box!important;
  }

  .section,
  .page-intro-section,
  .pricing-decision-section,
  .about-premium-hero,
  .conversion-band,
  .retention-section{
    padding-top:var(--zatra-mobile-section-y)!important;
    padding-bottom:var(--zatra-mobile-section-y)!important;
  }

  /* ---------- Typography: authority without desktop sprawl ----------
     Include #top / #hero-title — site.css uses section#top h1 (!important + ID)
     which otherwise beats class-only mobile overrides. */
  .hero-editorial h1,
  .about-hero-copy h1,
  .page-intro-shell h1,
  .pricing-decision-hero h1,
  .pricing-decision-copy h1,
  main h1,
  section#top h1,
  #top h1,
  #hero-title,
  #page-intro-title,
  #pricing-page-title,
  body.home-page .hero-editorial-copy h1,
  body.home-page .hero h1,
  body.home-page .hero-title{
    max-width:100%!important;
    width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    font-size:clamp(1.7rem,6.2vw,2.35rem)!important;
    line-height:1.18!important;
    letter-spacing:-.035em!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    hyphens:manual!important;
    text-wrap:pretty!important;
  }

  .section-head h2,
  .section h2,
  .conversion-band h2,
  .retention-copy h2,
  .about-cta-copy h2,
  .about-story-copy h2,
  .zatra-staff-copy h2{
    max-width:100%!important;
    font-size:clamp(1.35rem,4.6vw,1.85rem)!important;
    line-height:1.2!important;
    letter-spacing:-.028em!important;
    overflow-wrap:break-word!important;
  }

  main h3,
  .card h3,
  .package-card h3,
  .premium-offer-card h3,
  .service-card h3,
  .about-badge-card h3,
  .faq-card h3,
  .proof-card h3{
    font-size:clamp(1.05rem,3.8vw,1.28rem)!important;
    line-height:1.25!important;
    letter-spacing:-.02em!important;
  }

  .hero-lede,
  .about-hero-copy p,
  .page-intro-shell p,
  .pricing-decision-hero p,
  .section-head p,
  .hero-editorial-copy p,
  .retention-copy p,
  .conversion-band p{
    max-width:100%!important;
    font-size:clamp(.94rem,3.2vw,1.02rem)!important;
    line-height:1.62!important;
    letter-spacing:0!important;
  }

  /* Long copy reads better left-aligned on narrow screens */
  .about-hero-copy,
  .about-hero-copy h1,
  .about-hero-copy p,
  .about-hero-actions,
  .page-intro-shell,
  .page-intro-shell h1,
  .page-intro-shell p,
  .page-intro-actions,
  .hero-editorial-copy,
  .hero-editorial-copy h1,
  .hero-editorial-copy p,
  #top .hero-editorial-copy,
  #top .hero-editorial-copy h1,
  #top .hero-editorial-copy p,
  body.home-page .hero-editorial-copy,
  .section-head.center,
  .section-head.center h2,
  .section-head.center p{
    text-align:left!important;
  }
  .page-intro-shell .eyebrow,
  .about-hero-copy .eyebrow,
  .pricing-decision-hero .eyebrow,
  .hero-editorial-copy .eyebrow,
  .hero-editorial-copy .hero-eyebrow,
  .hero-editorial-copy .hero-brand-mark,
  #top .hero-brand-mark,
  body.home-page .hero-editorial-copy>.hero-eyebrow,
  body.home-page .hero-editorial-copy .hero-brand-mark,
  body.home-page .hero-editorial-copy{
    display:block!important;
    text-align:left!important;
    margin-left:0!important;
    margin-right:0!important;
    width:auto!important;
    max-width:100%!important;
  }
  .page-intro-shell .eyebrow,
  .about-hero-copy .eyebrow,
  .pricing-decision-hero .eyebrow,
  .hero-editorial-copy .eyebrow,
  .hero-editorial-copy .hero-eyebrow,
  body.home-page .hero-editorial-copy>.hero-eyebrow{
    display:inline-flex!important;
  }

  /* ---------- Hero / intro shells: kill desktop card padding ---------- */
  .page-intro-shell,
  .pricing-decision-shell,
  .pricing-decision-hero,
  .about-hero-shell,
  .about-hero-copy,
  #page-overview.page-hero-fill .page-intro-shell,
  #pricing-overview.page-hero-fill .pricing-decision-shell,
  #page-overview.about-premium-hero .about-hero-shell{
    width:100%!important;
    max-width:100%!important;
    margin-inline:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    background:transparent!important;
    box-sizing:border-box!important;
  }

  /* Section itself carries the gutter for full-bleed photo heroes */
  .page-hero-fill,
  #page-overview.page-hero-fill,
  #pricing-overview.page-hero-fill,
  #page-overview.about-premium-hero{
    min-height:auto!important;
    padding-top:clamp(58px,12vw,76px)!important;
    padding-bottom:clamp(36px,8vw,52px)!important;
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
    display:block!important;
    box-sizing:border-box!important;
  }

  .page-hero-fill .page-intro-shell,
  .page-hero-fill .pricing-decision-shell,
  .page-hero-fill .pricing-decision-hero,
  #page-overview.about-premium-hero .about-hero-shell{
    padding-left:0!important;
    padding-right:0!important;
  }

  .legal-hero.page-hero-fill{
    padding:clamp(40px,10vw,64px) var(--zatra-mobile-gutter)!important;
  }

  /* Home editorial hero */
  .hero.hero-editorial{
    min-height:auto!important;
    min-height:min(88dvh,820px)!important;
    padding-top:clamp(56px,12vw,72px)!important;
    padding-bottom:clamp(32px,6vw,48px)!important;
    padding-left:0!important;
    padding-right:0!important;
  }
  .hero-editorial-copy,
  .hero-brand-mark,
  #top .hero-editorial-copy,
  body.home-page .hero-editorial-copy{
    width:100%!important;
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    padding:clamp(22px,5vw,28px) var(--zatra-mobile-gutter)!important;
    border-radius:var(--zatra-mobile-radius)!important;
    box-sizing:border-box!important;
    text-align:left!important;
  }
  .hero.hero-editorial .container.hero-editorial-grid{
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
  }
  /* Avoid double-inset: grid already gutters; copy card pads itself */
  .hero.hero-editorial .container.hero-editorial-grid .hero-editorial-copy{
    width:100%!important;
  }
  .hero-editorial-copy .hero-lede,
  #top .hero-editorial-copy .hero-lede,
  body.home-page .hero-editorial-copy p,
  body.home-page .hero-editorial-copy .hero-copy{
    max-width:100%!important;
    margin-left:0!important;
    margin-right:0!important;
    text-align:left!important;
  }

  /* Home photo carousel — full bleed (no double gutter with section padding) */
  .home-hero-photo-carousel,
  .zatra-staff-frame.home-hero-photo-carousel,
  #home-carousel .home-hero-photo-carousel,
  #home-carousel .zatra-staff-frame.home-hero-photo-carousel{
    margin-inline:0!important;
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
    border-radius:0!important;
    box-sizing:border-box!important;
  }
  .home-hero-photo-carousel .zatra-staff-copy,
  .zatra-staff-frame .zatra-staff-copy{
    padding:16px 18px 20px!important;
    max-width:100%!important;
  }
  .home-hero-photo-carousel .zatra-staff-copy h2,
  .zatra-staff-frame .zatra-staff-copy h2,
  html .home-hero-photo-carousel.zatra-staff-frame .zatra-staff-copy h2{
    font-size:clamp(1.05rem,4.2vw,1.35rem)!important;
    line-height:1.25!important;
    max-width:100%!important;
  }

  /* ---------- CTAs ---------- */
  .hero-actions,
  .about-hero-actions,
  .page-intro-actions,
  .pricing-primary-actions,
  .conversion-band-actions,
  .about-cta-actions,
  .fee-actions,
  .why-actions,
  .agri-actions,
  .conversion-actions{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
    width:100%!important;
    margin-top:clamp(18px,4vw,24px)!important;
  }
  .hero-actions .btn,
  .about-hero-actions .btn,
  .page-intro-actions .btn,
  .pricing-primary-actions .btn,
  .conversion-band-actions .btn,
  .about-cta-actions .btn,
  .fee-actions .btn,
  .why-actions .btn,
  .agri-actions .btn,
  .conversion-actions .btn{
    width:100%!important;
    min-height:50px!important;
    justify-content:center!important;
    padding-inline:18px!important;
    box-sizing:border-box!important;
  }

  /* ---------- Grids → single column with consistent gaps ---------- */
  .grid-2,
  .grid-3,
  .grid-4,
  .package-grid,
  .package-grid-trio,
  .premium-ladder-grid,
  .concern-grid,
  .service-grid,
  .docs-grid,
  .docs-premium-grid,
  .faq-grid,
  .proof-grid,
  .authority-grid,
  .team-grid-premium,
  .about-vm-grid,
  .about-hero-side,
  .answers,
  .answers.executive-answers,
  .contact-grid,
  .fee-tool-grid,
  .fee-results,
  .scope-command-grid,
  .offer-scope-grid,
  .assurance-evidence-grid,
  .assurance-command-grid,
  .addon-grid,
  .optional-service-grid,
  .command-steps,
  #process .command-steps,
  .hero-trust-strip,
  .trust-strip,
  .retention-metrics,
  .retention-card-grid,
  .proof-row,
  .statline,
  .people-grid,
  .setup-cards,
  .mini-grid,
  .cta-meta,
  .contact-strip,
  .why-command-band,
  .agri-command-band,
  .package-conversion-strip,
  .retainer-service-card,
  .fee-calculator-intro,
  .executive-scope-shell,
  form.grid-2{
    grid-template-columns:1fr!important;
    gap:14px!important;
  }

  /* Cards: readable padding, firmer radius, no overflow */
  .package-card,
  .premium-offer-card,
  .service-card,
  .faq-card,
  .proof-card,
  .doc-card,
  .about-badge-card,
  .authority-card,
  .investor-reason-card,
  .answer-card,
  .team-card-premium,
  .process-step-card,
  .retainer-desk-card,
  .scope-summary-card,
  .fee-calculator,
  .conversion-band-shell,
  .documents-shell,
  .doc-tier-card,
  .wide-card,
  .about-hero-side .about-badge-card,
  .premium-reason-stack .investor-reason-card{
    border-radius:var(--zatra-mobile-radius)!important;
    padding:var(--zatra-mobile-card-pad)!important;
    max-width:100%!important;
    width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
    min-width:0!important;
  }
  .about-badge-card p,
  .about-hero-side .about-badge-card p,
  .package-card p,
  .premium-offer-card p,
  .service-card p,
  .faq-card p,
  .proof-card p,
  .investor-reason-card p,
  .answer-card p,
  .team-card-premium p,
  .wide-card p{
    max-width:100%!important;
    overflow-wrap:break-word!important;
    word-break:normal!important;
    margin-bottom:0!important;
  }

  /* Soften oversized button glow that reads “cheap” on small screens */
  .btn-primary,
  .hero-actions .btn-primary,
  .page-intro-actions .btn-primary,
  .pricing-primary-actions .btn-primary,
  .about-hero-actions .btn-primary{
    box-shadow:0 10px 24px rgba(237,0,0,.22)!important;
  }

  /* Jump bars / chip rows wrap cleanly */
  .pricing-jump-bar{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
    padding:10px!important;
    border-radius:var(--zatra-mobile-radius)!important;
    width:100%!important;
    max-width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .pricing-jump-bar a{
    min-width:0!important;
    font-size:12px!important;
    padding:10px 10px!important;
    justify-content:flex-start!important;
    align-items:center!important;
    min-height:64px!important;
    overflow:visible!important;
  }
  .pricing-jump-bar .pricing-jump-label{
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    line-height:1.15!important;
    white-space:normal!important;
  }
  .pricing-jump-bar .pricing-jump-word{
    display:block!important;
  }
  .pricing-jump-bar a[href="#fee-calculator"] .pricing-jump-label,
  .pricing-jump-bar a[href="#partnership-desk"] .pricing-jump-label{
    display:inline!important;
  }
  .chips,
  .proof-row,
  .hero-proof-row,
  .expertise-pills{
    display:flex!important;
    flex-wrap:wrap!important;
    gap:8px!important;
    max-width:100%!important;
  }
  .chips span,
  .expertise-pills span,
  .eyebrow,
  .badge,
  .doc-chip,
  .hero-eyebrow{
    max-width:100%!important;
    white-space:normal!important;
    overflow-wrap:break-word!important;
    box-sizing:border-box!important;
  }

  /* Section heads: no nested “card within card” padding pile-up */
  .section-head{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:12px!important;
    margin-bottom:24px!important;
    padding:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    max-width:100%!important;
  }
  .section-head:not(.center):not(.compact)>p{
    border-left:0!important;
    padding-left:0!important;
    padding-top:0!important;
    max-width:100%!important;
  }

  /* Topbar denser, safer */
  .topbar .nav,
  .topbar .container.nav{
    width:100%!important;
    max-width:100%!important;
    padding:10px var(--zatra-mobile-gutter)!important;
    gap:10px!important;
    box-sizing:border-box!important;
  }
  .brand-wordmark{
    font-size:clamp(.92rem,3.2vw,1.05rem)!important;
  }
  .menu-toggle{
    width:44px!important;
    height:44px!important;
    flex:0 0 auto!important;
  }

  /* Mobile nav panel: solid sheet */
  .navlinks.is-open{
    width:100%!important;
    left:0!important;
    right:0!important;
    margin:0!important;
    max-height:calc(100dvh - 68px)!important;
    padding:14px var(--zatra-mobile-gutter) 28px!important;
    background:#fff!important;
    box-shadow:0 24px 60px rgba(16,24,40,.16)!important;
    border-bottom:1px solid rgba(16,24,40,.08)!important;
    box-sizing:border-box!important;
  }
  .navlinks.is-open a,
  .navlinks.is-open summary{
    min-height:48px!important;
    display:flex!important;
    align-items:center!important;
    font-size:1.02rem!important;
  }

  /* Footer */
  .zatra-premium-footer{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    background:#07080b!important;
  }
  .zatra-premium-footer .zatra-footer-shell{
    width:100%!important;
    padding-top:40px!important;
    padding-bottom:36px!important;
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
  }
  .zatra-premium-footer .zatra-footer-grid{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }

  /* Live notice / popup — never spill past viewport */
  .zatra-notice-bar,
  .zatra-live-popup,
  .zatra-notice-bar.zatra-live-popup{
    left:var(--zatra-mobile-gutter)!important;
    right:var(--zatra-mobile-gutter)!important;
    width:auto!important;
    max-width:calc(100% - (var(--zatra-mobile-gutter) * 2))!important;
    margin-inline:0!important;
    box-sizing:border-box!important;
  }
  .zatra-notice-inner{
    max-width:100%!important;
    width:100%!important;
    box-sizing:border-box!important;
    overflow:hidden!important;
  }
  .zatra-notice-trigger,
  .zatra-notice-link{
    max-width:100%!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  /* WhatsApp: in-flow conversion strip — scrolls with page, clears review badges */
  .floating-whatsapp{
    position:relative!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    z-index:1!important;
    display:flex!important;
    width:calc(100% - (var(--zatra-mobile-gutter) * 2))!important;
    max-width:none!important;
    min-width:0!important;
    min-height:52px!important;
    margin:8px var(--zatra-mobile-gutter) 24px!important;
    padding:14px 16px!important;
    justify-content:center!important;
    align-items:center!important;
    gap:10px!important;
    font-size:.92rem!important;
    font-weight:800!important;
    letter-spacing:-.015em!important;
    line-height:1.2!important;
    border-radius:14px!important;
    box-shadow:0 12px 28px rgba(6,118,71,.22)!important;
    box-sizing:border-box!important;
    transform:none!important;
  }
  .floating-whatsapp .svg,
  .floating-whatsapp svg{
    width:18px!important;
    height:18px!important;
    flex:0 0 auto!important;
  }
  .mobile-action-bar{
    display:none!important;
  }

  /* Decorative orbits / absolute layers must not create scroll */
  .retainer-decorator,
  .retainer-decorator.orbit{
    display:none!important;
  }

  /* Forms */
  input,select,textarea,.btn{
    max-width:100%!important;
    box-sizing:border-box!important;
  }

  /* Media / photo cards don’t force awkward min-heights */
  .why-command-band .photo-card,
  .agri-command-band .photo-card,
  .media-service,
  .setup-visual,
  .service-visual-card{
    min-height:min(420px,70vw)!important;
    border-radius:var(--zatra-mobile-radius)!important;
  }



  /* About side cards: give icon+copy room so text isn’t clipped */
  .about-hero-side,
  .about-hero-side .about-badge-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
  .about-badge-card{
    display:grid!important;
    grid-template-columns:auto 1fr!important;
    gap:14px!important;
    align-items:start!important;
    padding:18px 18px!important;
  }
  .about-badge-card h3,
  .about-badge-card p,
  .about-badge-card strong{
    min-width:0!important;
    max-width:100%!important;
    overflow-wrap:break-word!important;
  }

  /* Keep badges on the same left edge as headlines */
  .eyebrow,
  .hero-eyebrow,
  .retention-kicker,
  .page-intro-shell .eyebrow,
  .about-hero-copy .eyebrow,
  .pricing-decision-hero .eyebrow{
    margin-left:0!important;
    margin-right:0!important;
    margin-bottom:12px!important;
  }

  /* Prices stay bold but don’t dominate the column */
  .price,
  .package-card .price,
  .premium-offer-card .package-style-price,
  #premium-offers .premium-offer-card .package-style-price{
    font-size:clamp(1.65rem,8vw,2.25rem)!important;
    line-height:1.05!important;
    letter-spacing:-.03em!important;
  }
  #proof .score-card>strong,
  #proof .score-card strong{
    font-size:clamp(2.2rem,12vw,3.4rem)!important;
  }
}

/* ---------- Phone (≤720) ---------- */
@media (max-width:720px){
  :root{
    --zatra-mobile-gutter:16px;
    --zatra-mobile-section-y:36px;
    --zatra-mobile-card-pad:16px;
  }

  .hero.hero-editorial{
    min-height:auto!important;
    min-height:min(86dvh,740px)!important;
  }

  .hero-editorial h1,
  .about-hero-copy h1,
  .page-intro-shell h1,
  .pricing-decision-hero h1,
  main h1,
  section#top h1,
  #top h1,
  #hero-title,
  #page-intro-title,
  #pricing-page-title,
  body.home-page .hero-editorial-copy h1,
  body.home-page .hero h1,
  body.home-page .hero-title{
    font-size:clamp(1.62rem,7.2vw,2.05rem)!important;
    line-height:1.2!important;
  }

  /* WhatsApp stays labeled in-flow on phones (see ≤980 rules) */

  .page-hero-fill,
  #page-overview.page-hero-fill,
  #pricing-overview.page-hero-fill,
  #page-overview.about-premium-hero{
    padding-top:clamp(54px,13vw,70px)!important;
    padding-bottom:clamp(28px,7vw,44px)!important;
  }

  .team-card{
    display:block!important;
  }
  .team-portrait{
    aspect-ratio:1/1!important;
    min-height:0!important;
  }
}

/* ---------- Small phone (≤420) ---------- */
@media (max-width:420px){
  :root{
    --zatra-mobile-gutter:16px;
    --zatra-mobile-section-y:34px;
  }

  .hero-editorial h1,
  .about-hero-copy h1,
  .page-intro-shell h1,
  .pricing-decision-hero h1,
  main h1,
  section#top h1,
  #top h1,
  #hero-title,
  #page-intro-title,
  #pricing-page-title,
  body.home-page .hero-editorial-copy h1,
  body.home-page .hero h1,
  body.home-page .hero-title{
    font-size:1.55rem!important;
    letter-spacing:-.03em!important;
  }

  .brand-wordmark{
    max-width:42vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
  }

  .pricing-jump-bar a{
    font-size:11.5px!important;
    gap:6px!important;
  }
}

/* Wix iframe helpers */
html.in-wix-frame, html.in-wix-frame body, body.in-wix-frame{
  zoom:1!important; --zatra-page-zoom:1!important;
  height:auto!important; max-height:none!important;
  overflow-x:hidden!important; overflow-y:visible!important;
}
html.in-wix-frame .zatra-premium-footer{
  padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))!important;
  background:#07080b!important;
}


/* =============================================================================
   Mobile premium polish — padding, rhythm, uniformity (desktop untouched)
   ============================================================================= */
@media (max-width:980px){
  /* Uniform page frame */
  .topbar .nav,
  .topbar .container.nav{
    padding:8px var(--zatra-mobile-gutter)!important;
    gap:8px!important;
  }

  .section,
  .page-intro-section,
  .pricing-decision-section,
  .about-premium-hero,
  .conversion-band,
  .retention-section{
    padding-left:0!important;
    padding-right:0!important;
  }

  /* Tighter, even section heads */
  .section-head{
    gap:10px!important;
    margin-bottom:20px!important;
  }
  .section-head h2,
  .section h2{
    margin:0!important;
  }
  .section-head p,
  .hero-lede,
  .about-hero-copy p,
  .page-intro-shell p,
  .pricing-decision-hero p{
    margin-top:10px!important;
    margin-bottom:0!important;
  }

  /* Cards: consistent internal breathing room */
  .package-card,
  .premium-offer-card,
  .service-card,
  .faq-card,
  .proof-card,
  .doc-card,
  .about-badge-card,
  .authority-card,
  .investor-reason-card,
  .answer-card,
  .team-card-premium,
  .process-step-card,
  .wide-card,
  .story-scenario-card,
  .concern-card,
  .route-card{
    padding:var(--zatra-mobile-card-pad)!important;
    margin:0!important;
    gap:var(--zatra-mobile-stack)!important;
  }

  .grid-2,
  .grid-3,
  .grid-4,
  .package-grid,
  .package-grid-trio,
  .service-grid,
  .faq-grid,
  .proof-grid,
  .concern-grid,
  .answers,
  .docs-grid,
  .docs-premium-grid{
    gap:12px!important;
  }

  /* CTA stack: commercial, not glued */
  .hero-actions,
  .about-hero-actions,
  .page-intro-actions,
  .pricing-primary-actions,
  .conversion-band-actions,
  .about-cta-actions,
  .why-actions,
  .fee-actions{
    gap:10px!important;
    margin-top:18px!important;
  }
  .hero-actions .btn,
  .about-hero-actions .btn,
  .page-intro-actions .btn,
  .pricing-primary-actions .btn,
  .conversion-band-actions .btn,
  .about-cta-actions .btn,
  .why-actions .btn,
  .fee-actions .btn{
    min-height:48px!important;
    border-radius:14px!important;
    font-size:.92rem!important;
  }

  /* Soften heavy button glow on mobile */
  .btn-primary{
    box-shadow:0 8px 20px rgba(237,0,0,.18)!important;
  }

  /* Hero copy card: even inset */
  .hero-editorial-copy,
  #top .hero-editorial-copy,
  body.home-page .hero-editorial-copy{
    padding:20px var(--zatra-mobile-gutter)!important;
    border-radius:var(--zatra-mobile-radius)!important;
  }

  .page-hero-fill,
  #page-overview.page-hero-fill,
  #pricing-overview.page-hero-fill,
  #page-overview.about-premium-hero{
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
    padding-top:clamp(52px,12vw,68px)!important;
    padding-bottom:clamp(28px,6vw,40px)!important;
  }

  /* Carousel full-bleed — no page gutter inset */
  .home-hero-photo-carousel,
  .zatra-staff-frame.home-hero-photo-carousel,
  #home-carousel .home-hero-photo-carousel{
    margin-inline:0!important;
    margin-left:0!important;
    margin-right:0!important;
    width:100%!important;
    max-width:100%!important;
    border-radius:0!important;
  }

  /* Footer: readable columns; WA clearance is dark footer pad (not white body gap) */
  .zatra-premium-footer{
    padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))!important;
    background:#07080b!important;
  }
  html.in-wix-frame .zatra-premium-footer,
  body.in-wix-frame .zatra-premium-footer{
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
  }
  .zatra-premium-footer .zatra-footer-shell{
    padding-left:var(--zatra-mobile-gutter)!important;
    padding-right:var(--zatra-mobile-gutter)!important;
    padding-top:36px!important;
    padding-bottom:20px!important;
  }
  .zatra-premium-footer .zatra-footer-grid{
    gap:22px!important;
  }
  .zatra-footer-proof{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:10px!important;
  }
  .zatra-footer-proof span{
    font-size:.78rem!important;
    line-height:1.35!important;
  }

  /* Live notice: stay inside frame */
  .zatra-notice-bar.zatra-live-popup,
  .zatra-live-popup{
    left:var(--zatra-mobile-gutter)!important;
    right:var(--zatra-mobile-gutter)!important;
    width:auto!important;
    max-width:calc(100% - (var(--zatra-mobile-gutter) * 2))!important;
  }

  /* Jump bar / chips: cleaner commercial density */
  .pricing-jump-bar{
    gap:8px!important;
    padding:8px!important;
  }
  .pricing-jump-bar a{
    min-height:44px!important;
    border-radius:12px!important;
  }
}

@media (max-width:720px){
  .floating-whatsapp{
    width:calc(100% - 32px)!important;
    margin:10px 16px 24px!important;
    font-size:.9rem!important;
  }
  .zatra-footer-proof{
    grid-template-columns:1fr!important;
  }
}
