/* Loaded after the shared JMKFLOW styles: final responsive PAWS hero composition. */
.paws-landing-metrics{margin-top:58px!important}

/* Homepage parity: keep the approved desktop master intact above 1200px. */
@media(min-width:1201px){
  .paws-landing-hero{padding:44px 0 60px!important}
  .paws-landing-grid{
    width:min(1276px,calc(100% - 84px))!important;
    max-width:1276px!important;
    margin-inline:auto!important;
    padding-inline:0!important;
    min-height:clamp(700px,38vw,760px)!important;
    grid-template-columns:minmax(0,.92fr) minmax(420px,1.08fr)!important;
    column-gap:72px!important;
    row-gap:24px!important;
    align-items:start!important
  }
  .paws-landing-copy{z-index:10;max-width:610px;padding-top:12px!important}
  .paws-landing-copy h1{max-width:610px;font-size:clamp(3.35rem,4.1vw,4.9rem)}
  .paws-landing-copy .lead{max-width:560px;font-size:clamp(1.02rem,1.05vw,1.16rem)}
  .paws-landing-metrics{max-width:570px;margin-top:46px!important}
  .paws-landing-scene{width:66%!important;object-position:center bottom!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.72) 31%,#000 48%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.78) 80%,rgba(0,0,0,.42) 91%,transparent 100%),linear-gradient(180deg,#000 0,#000 82%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.12) 12%,rgba(0,0,0,.72) 31%,#000 48%,rgba(0,0,0,.98) 68%,rgba(0,0,0,.78) 80%,rgba(0,0,0,.42) 91%,transparent 100%),linear-gradient(180deg,#000 0,#000 82%,transparent 100%)!important}
  .paws-landing-visual{
    position:absolute!important;
    inset:0!important;
    min-height:0!important;
    margin:0!important;
    pointer-events:none
  }
  .paws-landing-phone--primary{
    top:325px!important;
    left:calc(66% + 61px)!important;
    width:clamp(210px,13vw,250px)!important
  }
  .paws-landing-phone--secondary{
    top:345px!important;
    left:calc(81% + 61px)!important;
    right:auto!important;
    width:clamp(190px,11.5vw,220px)!important
  }
  .paws-landing-note--left{top:-6px!important;left:calc(50% - 120px)!important;width:165px!important}
  .paws-landing-note--right{top:140px!important;right:calc(1.5% - 10px)!important;width:120px!important}
  .paws-landing-rating{top:-18px!important;right:-40px!important;width:292px!important;height:88px!important;object-fit:cover!important;object-position:center 48%!important;border-radius:44px!important;clip-path:none!important}
  .paws-landing-trust{right:calc(2% - 59px)!important;bottom:-19px!important;width:182px!important}
}

/* Exact final desktop measure used by MB Beauty V7: 1304px shell, 72px gutters, 1160px content. */
@media(min-width:1201px){
  :root{--container:min(1160px,calc(100vw - 144px))}
  .paws-landing-grid{
    width:min(1304px,100%)!important;
    max-width:1304px!important;
    padding-inline:72px!important
  }
}

/* Same intermediate range as the homepage: copy and visual stay in one grid. */
@media(min-width:901px) and (max-width:1200px){
  :root{--container:min(1160px,calc(100vw - 64px))}
  .paws-landing-hero{padding:44px 0 58px!important}
  .paws-landing-grid{width:min(calc(100% - 64px),1160px)!important;max-width:1160px!important;min-height:0!important;padding:0!important;grid-template-columns:minmax(0,.9fr) minmax(390px,1.1fr)!important;gap:clamp(24px,4vw,52px)!important;align-items:center!important}
  .paws-landing-copy{max-width:560px;padding:10px 0!important}
  .paws-landing-copy h1{font-size:clamp(3rem,5.5vw,4.1rem)}
  .paws-landing-metrics{margin-top:40px!important}
  .paws-landing-visual{position:relative!important;inset:auto!important;width:100%!important;min-height:clamp(590px,66vw,720px)!important;margin:0!important;transform:none!important}
  .paws-landing-scene{top:auto!important;right:0!important;bottom:0!important;width:72%!important;height:clamp(630px,70vw,760px)!important;object-fit:cover!important;object-position:56% bottom!important;transform:translateY(-20px)!important;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.78) 31%,#000 48%,rgba(0,0,0,.96) 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 11%,#000 84%,transparent 100%)!important;mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.18) 12%,rgba(0,0,0,.78) 31%,#000 48%,rgba(0,0,0,.96) 80%,transparent 100%),linear-gradient(180deg,transparent 0,#000 11%,#000 84%,transparent 100%)!important}
  .paws-landing-phone--primary{top:39%!important;left:17%!important;width:42%!important}
  .paws-landing-phone--secondary{top:42%!important;left:auto!important;right:2%!important;width:35%!important}
  .paws-landing-note--left{top:7%!important;left:0!important;width:135px!important;font-size:1.35rem!important}
  .paws-landing-note--right{top:25%!important;right:0!important;width:106px!important;font-size:1.1rem!important}
  .paws-landing-rating{top:3%!important;right:0!important;width:220px!important;height:66px!important;object-fit:cover!important;object-position:center 48%!important;border-radius:999px!important;clip-path:inset(0 round 999px)!important;background:transparent!important}
  .paws-landing-trust{right:0!important;bottom:3%!important;width:160px!important}
}

/* Homepage single-column breakpoint. All artwork keeps one coordinate system. */
@media(max-width:900px){
  :root{--container:min(1160px,calc(100vw - 32px))}
  .paws-landing-hero{padding:40px 0 44px!important}
  .paws-landing-grid{width:min(calc(100% - 32px),1160px)!important;max-width:1160px!important;min-height:0!important;padding:0!important;grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
  .paws-landing-copy{max-width:680px;padding:0!important}
  .paws-landing-copy h1{font-size:clamp(2.65rem,9vw,4.2rem)}
  .paws-landing-metrics{margin-top:38px!important}
  .paws-landing-visual{position:relative!important;inset:auto!important;width:min(100%,680px)!important;min-height:clamp(620px,112vw,760px)!important;margin:4px auto 0!important;transform:none!important}
  .paws-landing-scene{top:auto!important;right:50%!important;bottom:0!important;width:100vw!important;max-width:900px!important;height:clamp(620px,112vw,760px)!important;object-fit:cover!important;object-position:58% bottom!important;transform:translate(50%,-10px)!important;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important;mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%)!important}
  .paws-landing-phone--primary{top:31%!important;left:18%!important;width:46%!important}
  .paws-landing-phone--secondary{top:35%!important;left:auto!important;right:5%!important;width:36%!important}
  .paws-landing-note--left{top:5%!important;left:3%!important;width:126px!important;font-size:1.25rem!important}
  .paws-landing-note--right{top:20%!important;right:3%!important;bottom:auto!important;width:100px!important;font-size:1.02rem!important}
  .paws-landing-rating{top:3%!important;right:4%!important;width:clamp(150px,31vw,210px)!important;height:auto!important;border-radius:999px!important}
  .paws-landing-trust{right:4%!important;bottom:2%!important;width:150px!important}
}

@media(max-width:480px){
  :root{--container:min(1160px,calc(100vw - 26px))}
  .paws-landing-grid{width:min(calc(100% - 26px),1160px)!important}
  .paws-landing-metrics{margin-top:34px!important}
  .paws-landing-visual{min-height:clamp(720px,190vw,820px)!important}
  .paws-landing-scene{height:clamp(720px,190vw,820px)!important}
  .paws-landing-phone--primary{top:55%!important;left:12%!important;width:53%!important}
  .paws-landing-phone--secondary{top:59%!important;right:1%!important;width:41%!important}
  .paws-landing-note--left{top:5%!important;left:1%!important;width:92px!important;font-size:1rem!important}
  .paws-landing-note--right{top:19%!important;right:1%!important;width:84px!important;font-size:.9rem!important}
  .paws-landing-rating{top:4%!important;right:1%!important;width:146px!important}
  .paws-landing-trust{right:1%!important;bottom:2%!important;width:132px!important;min-height:56px;padding:8px 9px;gap:7px}
  .paws-landing-trust svg{flex-basis:23px;width:23px;height:29px}
  .paws-landing-trust span{font-size:7.5px;line-height:1.32}
}

@media(max-width:900px) and (orientation:landscape){
  .paws-landing-visual{min-height:520px!important;margin-top:10px}
  .paws-landing-scene{top:auto!important;right:50%!important;bottom:0!important;width:100vw!important;max-width:900px!important;height:520px!important;object-fit:cover!important;object-position:50% 50%!important;transform:translate(50%,-10px)!important}
  .paws-landing-phone--primary{top:118px!important;left:31%!important;width:clamp(190px,31vw,235px)!important}
  .paws-landing-phone--secondary{top:145px!important;right:8%!important;width:clamp(150px,24vw,188px)!important}
  .paws-landing-rating{top:18px!important;right:7%!important;width:176px!important;height:53px!important;border-radius:999px!important;clip-path:inset(0 round 999px)!important}
  .paws-landing-note--left{top:24px!important;left:7%!important;width:110px!important;font-size:1.12rem!important}
  .paws-landing-note--right{top:104px!important;right:5%!important;bottom:auto!important;width:96px!important;font-size:1rem!important}
  .paws-landing-trust{right:3%!important;bottom:12px!important;width:200px!important;min-height:64px!important;padding:10px 12px!important;gap:9px!important;overflow:hidden!important}
  .paws-landing-trust svg{flex:0 0 28px!important;width:28px!important;height:35px!important}
  .paws-landing-trust span{flex:1 1 auto!important;min-width:0!important;font-size:10px!important;line-height:1.32!important;white-space:normal!important;overflow-wrap:normal!important}
}

/* Wider touch phones in landscape use the intermediate hero grid. */
@media (min-width:901px) and (max-width:1199px) and (orientation:landscape) and (hover:none) and (pointer:coarse){
  .paws-landing-trust{right:0!important;width:200px!important;min-height:64px!important;padding:10px 12px!important;gap:9px!important;overflow:hidden!important}
  .paws-landing-trust svg{flex:0 0 28px!important;width:28px!important;height:35px!important}
  .paws-landing-trust span{flex:1 1 auto!important;min-width:0!important;font-size:10px!important;line-height:1.32!important;white-space:normal!important;overflow-wrap:normal!important}
}

/* Mobile hero: reveal the full face instead of applying the desktop left fade. */
@media(max-width:900px){
  .paws-landing-hero::before{
    background:linear-gradient(180deg,rgba(251,250,245,.08) 0%,transparent 34%,transparent 100%)!important
  }
  .paws-landing-scene{object-position:50% bottom!important}
}

@media(max-width:900px) and (orientation:landscape){
  .paws-landing-scene{object-position:50% 50%!important}
}

/* Portrait mobile only: landscape keeps its own lower crop so the dog's head stays visible. */
@media(max-width:767px) and (orientation:portrait){
  .paws-landing-scene{transform:translate(50%,-50px)!important}
}

/* Ultra-wide screens: scale the photo with its native aspect ratio instead of
   letting its box grow with the full viewport. The regular desktop is intact. */
@media(min-width:1921px){
  .paws-landing-scene{
    right:max(0px,calc((100vw - 1745px)/2))!important;
    width:min(66vw,1152px)!important;
    height:112%!important;
    object-fit:cover!important;
    object-position:center bottom!important
  }
}

/* Mobile viewport guard: off-canvas compositions must not widen the document. */
@media (max-width:767px),
       (min-width:768px) and (max-width:1199px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  html,body,main{width:100%;max-width:100%;min-width:0;overflow-x:hidden!important;overscroll-behavior-x:none}
  body{position:relative}
  .site-header,main,main>section,.section,.hero,.final-cta,.site-footer{width:100%;max-width:100%;min-width:0;overflow-x:clip}
  .container{width:100%;max-width:100%;min-width:0;padding-inline:clamp(15px,4vw,24px)}
  main :is(.paws-landing-grid,.paws-landing-copy,.paws-landing-visual,.case-journey,.section-heading,.section-head,.overview-grid,.journey-track,.strategy-proof,.logic-grid,.showcase-duo,.showcase-principles,.mobile-summary,.prototype,.prototype-canvas,.web-flow-intro,.storefront,.pdp,.checkout-shell,.web-showcase,.brand-sign,.system-grid,.system-block,.tools-grid,.outcome-card,.next-project__card){min-width:0;max-width:100%}
  main img,main svg{max-width:100%;height:auto}
  body.mobile-menu-open .mobile-quick-nav{display:none!important}
}
@media (min-width:841px){
  .paws-landing-copy{translate:0 26px!important}
}
@media (max-width:840px),
       (min-width:841px) and (max-width:1199px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  .paws-landing-copy{translate:0 20px!important}
}
@media (min-width:1200px){
  html body .site-header[data-shared-header],html body .site-header[data-shared-header].is-scrolled{border:0!important;border-bottom:0!important;box-shadow:none!important}
}
/* Extra logo-to-return-link breathing room for PAWS CARE on mobile only. */
@media (max-width:840px),
       (min-width:841px) and (max-width:1199px) and (hover:none) and (pointer:coarse) and (orientation:landscape){
  main>.hero:first-child:has(>.back-link){padding-top:max(116px,calc(env(safe-area-inset-top) + 116px))!important}
  main>.hero:first-child>.back-link{top:40px!important}
  .prototype-stage__actions{display:none!important}
  .phone-frame{cursor:default!important}
}

/* Match the eye-drops card to the portrait-mobile product scale in landscape. */
@media (min-width:861px) and (max-width:1199px) and (orientation:landscape){
  .product-card[data-store-product="Higiena oczu"]{
    grid-column:auto!important;
  }
}