/*
 * BerryShifts landing-page responsive layer
 *
 * This file deliberately loads after the page's legacy inline styles. Keep
 * viewport rules here so each breakpoint has one final source of truth.
 */

/* Standard desktop -------------------------------------------------------- */
@media (min-width:1101px){
  .hero{min-height:max(720px,100svh)}
  .hero-in{padding:clamp(126px,14vh,150px) clamp(28px,5vw,80px) clamp(78px,11vh,110px)}
  .hero-word{max-width:54%;font-size:clamp(4rem,8vw,7.7rem)}
  /* Keep the three parts of the brand lockup together at full desktop size. */
  .hero-word em{margin-left:clamp(23rem,24vw,26rem)}
  .hero-brand-mark{left:32%;top:59%;width:clamp(180px,18vw,312px);height:clamp(154px,16vw,300px)}
}

/* Short desktops need a smaller lockup, but preserve clear space on each
   side of the fruit mark. */
@media (min-width:1101px) and (max-height:820px){
  .hero{min-height:100svh}
  .hero-in{padding:clamp(92px,13vh,126px) clamp(28px,5vw,80px) clamp(52px,8vh,78px)}
  .hero-word{font-size:clamp(4rem,min(7vw,13vh),6.8rem)}
  .hero-word em{margin-left:4em}
  .hero-brand-mark{left:38%;width:clamp(156px,min(16vw,27vh),250px);height:clamp(144px,min(15vw,25vh),232px)}
  .hero h1{font-size:clamp(2rem,min(2.8vw,5.2vh),3rem);margin-top:1.35rem}
  .hero-sub{font-size:clamp(1rem,min(1.25vw,2.7vh),1.22rem);margin-top:.7rem}
  .hero-cta{margin-top:1.6rem}
  .scroll-cue{bottom:12px}
}

/* Mid-width laptops need the mark clear of Berry's final letter. The wider
   short-desktop layout above has enough room for the more compact placement. */
@media (min-width:1101px) and (max-width:1450px) and (max-height:820px){
  .hero-in{padding-top:88px}
  .hero-word{font-size:clamp(5rem,10vw,7rem)}
  /* Keep the fruit visually between the two words in this desktop range. */
  .hero-word em{margin-left:4em}
  .hero-brand-mark{left:50%;width:clamp(170px,17vw,210px);height:clamp(158px,16vw,195px)}
  .hero h1{margin-top:1rem}
}

@media (min-width:1121px) and (max-width:1450px) and (max-height:820px){
  .hero-brand-mark{left:clamp(52%,calc(88.4% - 2.46vw),60%)}
}

/* Tablet ------------------------------------------------------------------ */
@media (min-width:761px) and (max-width:1100px){
  .intro{display:none!important}
  .nav-in{height:84px;padding:0 clamp(22px,3vw,36px)}
  .nav-links{gap:2px}.nav-links a{font-size:15px;padding:9px 12px}
  .nav-actions{gap:8px}.nav-login{font-size:14px;padding:10px 17px}.nav-cta{font-size:14px;padding:11px 20px}
  .hero{min-height:100svh;align-items:flex-start}
  .hero-in{padding:clamp(104px,14vh,132px) clamp(28px,6vw,64px) 62px}
  .hero-word{max-width:64%;font-size:clamp(4.1rem,8.5vw,6rem)}
  .hero-word em{margin-left:4.5em}
  .hero-brand-mark{left:48%;width:clamp(148px,18vw,220px);height:clamp(138px,17vw,205px)}
  .hero h1,.hero-sub,.hero-cta{width:min(60vw,640px)}
}

/* Fluid bridge from compact laptops into tablets: 791px and 1119px share
   the same composition, with type and mark size interpolating between them. */
@media (min-width:761px) and (max-width:1120px) and (min-height:561px){
  .hero-in{padding:clamp(92px,12vh,110px) clamp(28px,6vw,64px) 56px}
  .hero-word{max-width:64%;font-size:clamp(4.2rem,calc(13.7vw - 41px),7rem)}
  .hero-word em{margin-left:clamp(18.9rem,calc(28vw + 80px),24.6rem)}
  .hero-brand-mark{left:49%;top:59%;width:clamp(148px,calc(6.7vw + 95px),170px);height:clamp(138px,calc(6.4vw + 87px),158px)}
  .hero h1,.hero-sub,.hero-cta{width:min(60vw,640px)}
}

/* Landscape phones and compact tablets ----------------------------------- */
@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
  .intro{display:none!important}
  .nav-in,.nav.scrolled .nav-in{height:58px;padding:0 22px}
  .nav-links{gap:0}.nav-links a{font-size:13px;padding:7px 10px}
  .nav-actions{gap:7px}.nav-login{font-size:12px;padding:8px 13px}.nav-cta{font-size:12px;padding:9px 15px}
  .hero-in{padding:74px clamp(22px,6vw,56px) 28px}
  .hero-word{max-width:62%;font-size:clamp(3rem,7vw,4rem)}
  .hero-brand-mark{left:46%;top:57%;width:clamp(112px,15vw,154px);height:clamp(104px,14vw,142px)}
  .hero h1{width:min(58vw,590px);font-size:clamp(1.55rem,2.8vw,2rem);margin-top:.7rem}
  .hero-sub{width:min(58vw,590px);font-size:.9rem;line-height:1.35;margin-top:.4rem}
  .hero-cta{width:min(58vw,590px);margin-top:.8rem;gap:10px}
  .hero-cta .btn-pill{padding:10px 20px;font-size:.84rem}
  .scroll-cue{display:none}
}

@media (orientation:landscape) and (max-height:480px) and (max-width:1100px){
  .hero-in{padding-top:54px;padding-bottom:16px}
  .hero-word{display:flex;align-items:center;justify-content:flex-start;gap:.08em;max-width:none;font-size:clamp(2.65rem,6vw,3.45rem)}
  .hero-word > span,.hero-word em{display:block}
  .hero-word em{margin:0}
  .hero-brand-mark{position:static;flex:none;width:1.25em;height:1.12em;transform:none;filter:drop-shadow(0 6px 10px rgba(46,15,20,.14))}
  .hero h1{font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.04;margin-top:.35rem}
  .hero-sub,.hero-cta .btn-ghost{display:none}
  .hero-cta{margin-top:.65rem}.hero-cta .btn-primary{padding:9px 19px;font-size:.8rem}
}

/* Phones ------------------------------------------------------------------ */
@media (max-width:760px){
  html,body,#app{max-width:100%;overflow-x:clip}
  .intro{display:none!important}
  .nav-links{display:none}
  .nav-in{height:76px;padding:0 18px}
  .nav.scrolled .nav-in{height:62px}
  .nav-actions{gap:8px;margin-left:auto}
  .nav-login{font-size:13px;padding:9px 14px}
  .nav-cta{font-size:13px;padding:10px 15px;white-space:nowrap}
  .logo img{height:32px}.nav.scrolled .logo img{height:28px}
  .frow{flex-direction:column;gap:0}
  .section{padding:80px 20px}
  .hero{min-height:100svh;align-items:flex-start}
  .hero::after{background:linear-gradient(180deg,rgba(249,250,237,.96) 0%,rgba(249,250,237,.9) 54%,rgba(249,250,237,.52) 100%)}
  .hero-in{text-align:center;padding:clamp(104px,14svh,132px) 20px 56px}
  .hero-word{display:flex;align-items:center;justify-content:center;gap:.07em;max-width:none;font-size:clamp(3.3rem,15vw,4.4rem)}
  .hero-word > span,.hero-word em{display:block}
  .hero-word em{margin:0}
  .hero-brand-mark{position:static;flex:none;width:1.12em;height:1.05em;transform:none;filter:drop-shadow(0 6px 10px rgba(46,15,20,.14))}
  .hero h1{width:auto;font-size:clamp(2rem,8vw,2.55rem);margin:1.15rem auto 0}
  .hero-sub{width:auto;font-size:1rem;margin:.8rem auto 0}
  .hero-cta{width:100%;justify-content:center;margin-top:1.35rem}
  .hero-cta .btn-pill{flex:0 1 auto}
  #stats{padding:70px 20px}
  .stat .v{font-size:clamp(.9rem,2.4vw,1.3rem)}
  .stat .l{font-size:.54rem;letter-spacing:.07em}
  .demo-head,.inc-head,.sch-head{padding:15px 16px 10px;gap:8px;flex-wrap:wrap}
  .demo-head .dt,.inc-head .it,.sch-head .st{font-size:.82rem;line-height:1.35}
  .pill-dark,.pill-soft,.ann-pill,.sch-pill,.inc-head .sev{font-size:.58rem;padding:3px 9px;letter-spacing:.08em;flex:none}
  .demo-note{font-size:.74rem;padding:0 14px 14px}
}

/* Compact tablets still have room for the primary navigation. */
@media (min-width:600px) and (max-width:760px){
  .nav-in,.nav.scrolled .nav-in{height:68px;padding:0 16px}
  .nav-links{display:flex;gap:0}
  .nav-links a{font-size:13px;padding:7px 9px}
  .nav-actions{gap:6px}
  .nav-login{font-size:12px;padding:8px 12px}
  .nav-cta{font-size:12px;padding:9px 13px}
}

@media (max-width:560px){
  .hero-word{flex-wrap:wrap;row-gap:0;font-size:clamp(2.8rem,13vw,3.5rem)}
  .hero-word > span{flex-basis:100%}
  .hero-brand-mark{width:1em;height:.94em}
  .stats{display:flex;flex-direction:column;align-items:center}
  .stat{flex:none;width:min(80vw,340px);aspect-ratio:1000/832;margin-left:0!important;padding:0;border:0;min-height:0}
  .stat:not(:first-child){margin-top:calc(min(80vw,340px) * -0.35)}
  .stat .pzs{display:none}.stat .pzs-v{display:block}.stat .stat-watermark{display:none}
  .stat .tx{left:30%;right:38%;top:40%}
  .stat .v{font-size:clamp(1.15rem,6vw,1.6rem)}
  .stat .l{font-size:clamp(.56rem,2.6vw,.72rem);letter-spacing:.08em}
  .stat.reveal{transform:translateY(-26px)}
  .stat.reveal:nth-child(even){transform:translateY(26px)}
  .stat.reveal.in{transform:none}
}

/* -------------------------------------------------------------------------
   FINAL HERO SYSTEM
   The fruit SVG has a large invisible canvas around its artwork. The framed
   image below offsets that canvas, then flex lays out the three visible pieces
   as one lockup. Keep the artwork visible beyond the frame so the bottom
   stroke is not clipped. This overrides the legacy absolute rules.
   ---------------------------------------------------------------------- */
.hero-word{
  display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;
  gap:.035em;width:max-content;max-width:calc(100vw - 2 * clamp(28px,5vw,80px));
  font-size:clamp(4.5rem,7.2vw,13rem);line-height:.82
}
.hero-word > span{flex-basis:auto}
.hero-word > span:first-child{display:block;transform:translateY(-.16em)}
.hero-word em{display:block;margin:0;font-style:normal;transform:translateY(.16em)}
.hero-word > .hero-brand-mark{
  position:relative;inset:auto;z-index:1;display:block;flex:0 0 .72em;
  width:.72em;height:1.02em;overflow:visible;transform:translateY(.01em);
  filter:drop-shadow(0 8px 14px rgba(46,15,20,.14))
}
.hero-brand-mark img{
  position:absolute;left:-45.25%;top:-5.8%;width:213%;height:129%;
  max-width:none;object-fit:fill;transform:none
}

@media (min-width:1101px){
  .hero{min-height:max(720px,100svh)}
  .hero-in{padding:clamp(126px,14vh,180px) clamp(28px,5vw,120px) clamp(72px,10vh,130px)}
  .hero h1{font-size:clamp(2.2rem,2.75vw,5.5rem);width:min(44vw,1100px);margin-top:1.6rem}
  .hero-sub{font-size:clamp(1.05rem,1.15vw,2rem);width:min(44vw,1100px)}
  .hero-cta{width:min(44vw,1100px);margin-top:clamp(1.5rem,3vh,2.6rem)}
}

@media (min-width:761px) and (max-width:1100px){
  .intro{display:none!important}
  .nav-in{height:76px;padding:0 clamp(20px,3vw,32px)}
  .nav-links{gap:0}.nav-links a{font-size:14px;padding:8px 11px}
  .nav-actions{gap:7px}.nav-login{font-size:13px;padding:9px 15px}.nav-cta{font-size:13px;padding:10px 17px}
  .hero{min-height:100svh;align-items:flex-start}
  .hero-in{padding:clamp(96px,13vh,116px) clamp(28px,5vw,54px) 54px}
  .hero-word{max-width:calc(100vw - 2 * clamp(28px,5vw,54px));font-size:clamp(3.75rem,8.2vw,5.5rem)}
  .hero h1,.hero-sub,.hero-cta{width:min(64vw,640px)}
}

@media (min-width:761px) and (max-height:820px){
  .hero{min-height:100svh}
  .hero-in{padding:clamp(84px,12vh,112px) clamp(28px,5vw,80px) clamp(42px,7vh,64px)}
  .hero-word{font-size:clamp(4rem,min(7.1vw,12.5vh),6.8rem)}
  .hero h1{font-size:clamp(2rem,min(2.8vw,5.2vh),3rem);margin-top:1.2rem}
  .hero-sub{font-size:clamp(1rem,min(1.25vw,2.7vh),1.22rem);margin-top:.65rem}
  .hero-cta{margin-top:1.35rem}
  .scroll-cue{bottom:10px}
}

@media (orientation:landscape) and (max-height:560px) and (max-width:1100px){
  .intro{display:none!important}
  .nav-in,.nav.scrolled .nav-in{height:56px;padding:0 20px}
  .nav-links{gap:0}.nav-links a{font-size:12px;padding:6px 9px}
  .nav-actions{gap:6px}.nav-login{font-size:12px;padding:7px 12px}.nav-cta{font-size:12px;padding:8px 14px}
  .hero-in{padding:68px clamp(22px,5vw,48px) 24px}
  .hero-word{font-size:clamp(2.7rem,min(6.6vw,11.5vh),3.8rem)}
  .hero h1{width:min(62vw,590px);font-size:clamp(1.4rem,2.6vw,1.9rem);margin-top:.6rem}
  .hero-sub{width:min(62vw,590px);font-size:.85rem;line-height:1.35;margin-top:.35rem}
  .hero-cta{width:min(62vw,590px);margin-top:.7rem;gap:9px}
  .hero-cta .btn-pill{padding:9px 18px;font-size:.8rem}
  .scroll-cue{display:none}
}

@media (orientation:landscape) and (max-height:440px) and (max-width:1100px){
  .hero-in{padding-top:52px;padding-bottom:12px}
  .hero-word{font-size:clamp(2.4rem,min(5.8vw,10.5vh),3.2rem)}
  .hero h1{font-size:clamp(1.15rem,2vw,1.4rem);margin-top:.25rem}
  .hero-sub,.hero-cta .btn-ghost{display:none}
  .hero-cta{margin-top:.5rem}.hero-cta .btn-primary{padding:8px 17px;font-size:.76rem}
}

@media (max-width:760px){
  .intro{display:none!important}
  .nav-links{display:none}
  .nav-in{height:70px;padding:0 14px}
  .nav.scrolled .nav-in{height:60px}
  .nav-actions{gap:7px;margin-left:auto}
  .nav-login{font-size:12px;padding:8px 12px}
  .nav-cta{font-size:12px;padding:9px 13px;white-space:nowrap}
  .hero{min-height:100svh;align-items:flex-start}
  .hero::after{background:linear-gradient(180deg,rgba(249,250,237,.96) 0%,rgba(249,250,237,.9) 54%,rgba(249,250,237,.52) 100%)}
  .hero-in{text-align:center;padding:clamp(96px,13svh,118px) 18px 48px}
  .hero-word{justify-content:center;margin-inline:auto;max-width:calc(100vw - 36px);font-size:clamp(1.95rem,calc((100vw - 36px)/9),3.6rem)}
  .hero h1{width:auto;font-size:clamp(1.85rem,7.2vw,2.45rem);margin:1.05rem auto 0}
  .hero-sub{width:auto;font-size:.95rem;margin:.7rem auto 0}
  .hero-cta{width:100%;justify-content:center;margin-top:1.15rem;gap:10px}
  .hero-cta .btn-pill{flex:1 1 145px;padding:12px 16px}
}

@media (min-width:620px) and (max-width:760px){
  .nav-in,.nav.scrolled .nav-in{height:66px;padding:0 14px}
  .nav-links{display:flex;gap:0}
  .nav-links a{font-size:12px;padding:7px 8px}
  .nav-actions{gap:5px}
  .nav-login{font-size:11px;padding:7px 11px}
  .nav-cta{font-size:11px;padding:8px 12px}
}

/* Large and 4K displays: preserve the same visual proportions instead of
   leaving a small desktop composition in the corner. */
@media (min-width:2200px){
  .nav-in{height:clamp(104px,4vw,138px);padding-inline:6vw}
  .nav-links a{font-size:clamp(20px,1vw,30px);padding:14px 24px}
  .nav-login,.nav-cta{font-size:clamp(18px,.85vw,26px);padding:16px 32px}
  .nav-actions{gap:18px}
  .hero-in{padding:clamp(190px,12vh,280px) 6vw clamp(110px,9vh,190px)}
  .hero-word{font-size:clamp(10rem,5.4vw,13rem);max-width:58vw}
  .hero h1{font-size:clamp(4rem,2.35vw,5.5rem);width:min(46vw,1500px);margin-top:2rem}
  .hero-sub{font-size:clamp(1.65rem,.95vw,2rem);width:min(46vw,1500px)}
  .hero-cta{width:min(46vw,1500px)}
  .hero-cta .btn-pill{font-size:clamp(1.25rem,.75vw,1.65rem);padding:22px 44px}
}