/* Quinbis final responsive refinement – alignment-first pass
   Focus: balanced tablet header, cleaner home service art,
   three-across tablet packages, neater design-page card system,
   and tighter final CTA blocks across the site. */

/* ---------- Shared touch-ups ---------- */
.setup-package-card,
.design-package-card,
.design-card,
.cta-frame,
.setup-after-frame,
.setup-final-frame,
.design-final-frame{
  box-sizing:border-box;
}

/* Home: make the Design card use the same two-sheet language as Setup. */
.path-card .design-art{
  position:absolute!important;
  left:30px!important;
  right:30px!important;
  bottom:24px!important;
  height:215px!important;
}
.path-card .design-art .design-frame{
  position:absolute!important;
  border:none!important;
  box-shadow:none!important;
}
.path-card .design-art .frame-one{
  right:3%!important;
  bottom:0!important;
  left:auto!important;
  top:auto!important;
  width:69%!important;
  height:182px!important;
  border-radius:18px!important;
  background:var(--green)!important;
  opacity:.94!important;
  transform:rotate(8deg)!important;
}
.path-card .design-art .frame-one span{display:none!important}
.path-card .design-art .frame-two{
  left:5%!important;
  bottom:10px!important;
  right:auto!important;
  top:auto!important;
  width:74%!important;
  height:182px!important;
  border-radius:18px!important;
  background:var(--lime)!important;
  transform:rotate(-4deg)!important;
  box-shadow:0 20px 48px rgba(1,61,55,.12)!important;
}
.path-card .design-art .frame-three{display:none!important}

/* Design page: replace the awkward long-card composition with a cleaner card stack. */
.design-stage{
  min-height:0!important;
  padding:18px!important;
}
.design-stage::before,
.design-stage-glow,
.design-stage-line{display:none!important}
.design-deck{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  perspective:none!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-template-rows:repeat(2,minmax(240px,1fr))!important;
  gap:14px!important;
  min-height:0!important;
}
.design-card{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:100%!important;
  min-width:0!important;
  min-height:240px!important;
  padding:24px!important;
  border-radius:24px!important;
  transform:none!important;
  animation:none!important;
  box-shadow:none!important;
}
.design-card-brand,
.design-card-sales,
.design-card-social,
.design-card-web{
  grid-column:auto!important;
  grid-row:auto!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
}
.design-card-brand{background:var(--green)!important;color:#fff!important}
.design-card-sales{background:#fff!important;color:var(--onyx)!important}
.design-card-social{background:var(--lime)!important;color:#013D37 !important}
.design-card-web{
  background:var(--palette-lime-soft)!important;
  color:var(--green)!important;
  border-color:var(--palette-line)!important;
}
.design-brand-mark{
  margin:auto 0 20px!important;
  align-self:flex-start!important;
  font-size:118px!important;
  line-height:.82!important;
}
.design-card-top{font-size:10px!important;letter-spacing:.14em!important}
.design-card-bottom strong{font-size:19px!important;line-height:1.05!important}
.design-card-bottom small{font-size:10px!important;line-height:1.45!important;opacity:.72!important}
.sales-layout{margin-top:34px!important}
.sales-rule{width:58px!important;height:8px!important}
.sales-layout strong{
  margin-top:22px!important;
  font-size:33px!important;
  line-height:1.02!important;
}
.sales-chip{margin-top:24px!important}
.social-layout{margin-top:32px!important}
.social-layout strong{
  margin-top:18px!important;
  font-size:37px!important;
  line-height:.95!important;
}
.web-browser{
  margin-top:18px!important;
  min-height:150px!important;
  border-radius:18px!important;
}
.web-copy{padding:20px 8px 8px!important}
.web-copy strong{font-size:21px!important;margin-top:14px!important}
.web-copy>span{margin-top:20px!important}
.design-stage-note{
  position:relative!important;
  left:auto!important;
  bottom:auto!important;
  margin:14px 4px 0!important;
}

/* ---------- Tablet refinements ---------- */
@media (min-width:760px) and (max-width:1180px){
  /* Balanced header: brand left, actions right, no awkward empty centre weight. */
  .nav-shell{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:18px!important;
    min-height:74px!important;
  }
  .brand{flex:0 0 auto!important}
  .nav-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-end!important;
    gap:10px!important;
  }
  .btn-nav{min-height:42px!important;padding:0 18px!important}
  .menu-toggle{width:44px!important;height:44px!important;border-radius:16px!important}

  /* Tablet package tables: keep the approved three-up reading layout. */
  .package-grid,
  .design-package-grid{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:16px!important;
    max-width:none!important;
    width:100%!important;
    margin-inline:auto!important;
    overflow:visible!important;
    padding:0!important;
    scroll-snap-type:none!important;
  }
  .setup-package-card,
  .design-package-card{
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    min-height:0!important;
    height:100%!important;
    padding:22px!important;
    border-radius:22px!important;
    display:flex!important;
    flex-direction:column!important;
    text-align:left!important;
  }
  .setup-package-card h3,
  .design-package-card h3{
    font-size:28px!important;
    line-height:1.04!important;
  }
  .package-for,
  .design-package-why{max-width:none!important;margin-top:10px!important}
  .package-price,
  .design-package-price{margin-top:18px!important;padding-top:18px!important}
  .package-price strong,
  .design-package-price strong{font-size:31px!important}
  .package-list,
  .design-package-card ul{margin-top:14px!important;padding-right:0!important}
  .package-list li,
  .design-package-card li{font-size:12.5px!important;line-height:1.48!important}
  .package-cta,
  .design-package-cta{width:100%!important;margin-top:auto!important}
  .package-common-note,
  .package-fineprint,
  .design-package-note{max-width:none!important}

  /* Final CTA bands: bring buttons closer to the copy. */
  .cta-frame,
  .setup-after-frame,
  .setup-final-frame,
  .design-final-frame,
  .design-credit-frame{
    grid-template-columns:1fr!important;
    gap:20px!important;
    padding:30px!important;
    text-align:left!important;
  }
  .cta-actions,
  .setup-after-actions,
  .setup-final-actions,
  .design-final-actions{
    justify-self:start!important;
    align-items:flex-start!important;
    gap:12px!important;
  }
  .setup-after-copy,
  .setup-final-frame>div,
  .design-final-frame>div,
  .cta-copy{max-width:620px!important}

  /* Keep the design showcase professional on tablet. */
  .design-stage{padding:16px!important;border-radius:24px!important}
  .design-deck{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    grid-template-rows:repeat(2,minmax(215px,1fr))!important;
    gap:12px!important;
  }
  .design-card{min-height:215px!important;padding:22px!important;border-radius:20px!important}
  .design-brand-mark{font-size:102px!important}
  .sales-layout strong{font-size:30px!important}
  .social-layout strong{font-size:34px!important}
  .web-browser{min-height:132px!important}
}

/* ---------- Mobile refinements ---------- */
@media (max-width:759px){
  .nav-shell{
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:10px!important;
    min-height:66px!important;
  }
  .brand{min-width:0!important}
  .brand-word{font-size:15px!important}
  .nav-actions{
    margin-left:auto!important;
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
  }
  .menu-toggle{width:42px!important;height:42px!important;border-radius:14px!important}

  .path-card .design-art{left:22px!important;right:22px!important;bottom:18px!important;height:168px!important}
  .path-card .design-art .frame-one{height:142px!important}
  .path-card .design-art .frame-two{height:142px!important}

  .design-stage{padding:14px!important;border-radius:22px!important}
  .design-deck{
    grid-template-columns:1fr!important;
    grid-template-rows:none!important;
    gap:12px!important;
  }
  .design-card{min-height:210px!important;padding:22px!important;border-radius:20px!important}
  .design-card-brand{min-height:240px!important}
  .design-brand-mark{font-size:96px!important}
  .sales-layout strong{font-size:31px!important}
  .social-layout strong{font-size:35px!important}
  .web-browser{min-height:138px!important}
}

@media (max-width:420px){
  .brand-word{font-size:14px!important}
  .btn-nav{padding:0 14px!important}
  .design-card{padding:20px!important}
  .design-brand-mark{font-size:88px!important}
}