/* Snapit Partner v8 — compact, contained, responsive UI layer.
   Loaded after the base page styles so it is the final responsive authority. */
:root{
  --snapit-green:#007700;
  --snapit-green-dark:#005d00;
  --snapit-deep:#07150a;
  --snapit-ink:#102016;
  --snapit-muted:#68736b;
  --snapit-line:rgba(16,32,22,.11);
  --snapit-soft:#eef7eb;
  --snapit-radius:22px;
}
html,body{max-width:100%;overflow-x:hidden}
*,*::before,*::after{box-sizing:border-box;min-width:0}
body{font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
img,video,svg,canvas{max-width:100%}
button,input,select,textarea{font-family:"Poppins",system-ui,sans-serif}
.wrap{width:min(1180px,calc(100% - 32px));margin-inline:auto}
.section{padding:72px 0}
.section h2{font-size:44px;line-height:1.08;letter-spacing:-1.5px}
.section .lead{max-width:760px;font-size:13px;line-height:1.7}

/* Keep every slider inside its viewport. The cards themselves stay compact. */
.slider-shell{width:100%;max-width:100%;overflow:hidden}
.viewport{position:relative;width:100%;max-width:100%;overflow:hidden}
.track{
  display:flex!important;
  width:max-content!important;
  max-width:none!important;
  gap:16px!important;
  transform:translate3d(0,0,0);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
  touch-action:pan-y;
}
.slidecard{
  flex:0 0 340px!important;
  width:340px!important;
  max-width:340px!important;
  min-width:0!important;
  overflow:hidden!important;
}

/* Feature / showcase cards: compact V5-like proportions */
.featurecard,.showcard{
  padding:12px!important;
  border-radius:20px!important;
  min-height:0!important;
}
.feature-media,.showcase-media{
  height:190px!important;
  width:100%!important;
  max-width:100%!important;
  border-radius:15px!important;
  overflow:hidden!important;
  background:#eef3ec!important;
  display:grid!important;
  place-items:center!important;
}
.feature-media img,.showcase-media img{
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  object-fit:contain!important;
}
.feature-media dotlottie-player,.showcase-media dotlottie-player,
.feature-media .lottie-wrap,.showcase-media .lottie-wrap{
  width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;
}
.featurecopy h3,.showcopy h3{font-size:14px!important;line-height:1.3!important;margin:0 0 5px!important}
.featurecopy p,.showcopy p{font-size:10px!important;line-height:1.55!important;margin:0!important}

/* Reviews: contained, readable cards */
.reviewcard{
  padding:16px!important;
  min-height:190px!important;
  border-radius:19px!important;
  display:flex!important;
  flex-direction:column!important;
}
.reviewquote{
  font-size:10.5px!important;
  line-height:1.65!important;
  overflow-wrap:anywhere!important;
}
.person{margin-top:auto!important;display:grid!important;grid-template-columns:1fr auto!important;gap:2px 8px!important;align-items:end!important}
.person strong{font-size:9.5px!important}
.person span{font-size:8px!important;color:var(--snapit-muted)!important}
.person .age{font-size:7.5px!important;white-space:nowrap!important}

/* Trust ticker — one uninterrupted looping lane + blinking dots */
.trust{overflow:hidden!important}
.trustin{width:100%!important;max-width:100%!important;overflow:hidden!important;padding:10px 0!important}
.trust-track{
  display:flex!important;
  width:max-content!important;
  max-width:none!important;
  animation:snapitTrust 20s linear infinite!important;
  will-change:transform!important;
}
.trust-group{
  display:flex!important;
  align-items:center!important;
  gap:26px!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  padding-right:26px!important;
}
.trustitem{
  display:inline-flex!important;
  align-items:center!important;
  gap:7px!important;
  font-size:9px!important;
  font-weight:700!important;
  white-space:nowrap!important;
}
.trustitem i{
  width:6px!important;height:6px!important;flex:0 0 6px!important;
  border-radius:50%!important;background:#a8e063!important;
  animation:snapitPulse 1.45s ease-in-out infinite!important;
}
@keyframes snapitTrust{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes snapitPulse{0%,100%{transform:scale(.72);opacity:.45}50%{transform:scale(1);opacity:1}}

/* Pricing — compact two-panel layout; feature matrix is real cards, never vertical words */
.pricing{overflow:hidden!important}
.price-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr)!important;
  gap:18px!important;
  align-items:start!important;
  width:100%!important;
}
.planbox,.pricepanel,.breakdown{min-width:0!important;width:100%!important}
.pricepanel{
  padding:19px!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
.plans{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
}
.plans .plan{
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:center!important;
  min-width:0!important;
  width:100%!important;
  height:92px!important;
  padding:13px 14px!important;
  border-radius:15px!important;
  overflow:hidden!important;
}
.plans .plan b{font-size:20px!important;line-height:1!important}
.plans .plan span{font-size:9px!important;margin-top:7px!important;white-space:normal!important}
.plan-features,.plan-details{width:100%!important;min-width:0!important;overflow:hidden!important}
.plan-details{margin-top:13px!important;padding-top:13px!important;border-top:1px solid rgba(255,255,255,.11)!important}
.plan-details h4{font-size:10px!important;margin:0 0 9px!important;line-height:1.35!important}
.plan-matrix{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  margin:0!important;
}
.matrix-row{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:7px!important;
  width:100%!important;
  min-width:0!important;
  min-height:45px!important;
  padding:8px 9px!important;
  border-radius:11px!important;
  border:1px solid rgba(255,255,255,.11)!important;
  font-size:9px!important;
  line-height:1.25!important;
  white-space:normal!important;
  word-break:normal!important;
  overflow-wrap:anywhere!important;
}
.matrix-row span{
  min-width:0!important;
  display:block!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
}
.matrix-row i{flex:0 0 16px!important;width:16px!important;text-align:center!important;font-style:normal!important;font-weight:800!important}
.pricing .matrix-row.on{background:rgba(168,224,99,.12)!important}
.pricing .matrix-row.off{opacity:.42!important}
.breakdown{
  padding:19px!important;
  border-radius:22px!important;
  overflow:hidden!important;
}
.breakdown h3{font-size:17px!important;line-height:1.3!important}
.brow{
  display:flex!important;
  justify-content:space-between!important;
  align-items:center!important;
  gap:12px!important;
  padding:10px 0!important;
  font-size:10px!important;
}
.brow strong{white-space:nowrap!important;background:none!important;border:0!important;padding:0!important}
.breaknote{font-size:9px!important;line-height:1.6!important}

/* Registration plan cards use the exact same readable matrix */
.picker{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
  width:100%!important;
}
.payment-plan{
  min-width:0!important;
  overflow:hidden!important;
  border-radius:17px!important;
}
.payment-plan .plan-option{
  min-width:0!important;
  width:100%!important;
  min-height:82px!important;
  padding:12px!important;
}
.payment-plan .plan-option b{font-size:19px!important}
.payment-plan .plan-option span{font-size:9px!important}
.payment-plan .plan-details{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
  margin:0!important;
  padding:0 10px 10px!important;
  border:0!important;
}
.payment-plan .matrix-row{
  min-height:40px!important;
  background:#f4f8f2!important;
  color:var(--snapit-ink)!important;
  border-color:rgba(16,32,22,.07)!important;
  font-size:8.2px!important;
}
.payment-plan .matrix-row.off{opacity:.42!important}
.payment-plan .matrix-row.on i{color:var(--snapit-green)!important}

/* Areas: restrained, contained cards */
.areasbox{width:100%!important;max-width:100%!important;overflow:hidden!important;border-radius:22px!important}
.areagrid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
  width:100%!important;
}
.area{
  min-width:0!important;
  width:100%!important;
  padding:11px 12px!important;
  border-radius:13px!important;
  font-size:9px!important;
  line-height:1.25!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  transition:transform .18s ease,box-shadow .18s ease!important;
}
.area:hover{transform:translateY(-2px)!important;box-shadow:0 8px 18px rgba(0,119,0,.08)!important}

/* Recognition/gallery/why remain compact */
.recognition-grid,.gallery-grid,.why-grid{width:100%!important;min-width:0!important}
.gallery-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}
.gallery-media{aspect-ratio:1.35!important}
.gallery-card-body{padding:10px!important}

/* Sticky CTA: comfortable desktop, compact phone */
.sticky{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  bottom:18px!important;
  width:min(640px,calc(100vw - 48px))!important;
  min-height:60px!important;
  transform:translateX(-50%)!important;
  padding:9px 11px!important;
  border-radius:17px!important;
  z-index:100!important;
}
.stickycopy strong{font-size:10px!important}
.stickycopy span{font-size:8px!important}
.sticky .btn{font-size:10px!important;padding:11px 16px!important;border-radius:12px!important;white-space:nowrap!important}

/* Business cards */
.biz{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:12px!important;
}
.bizlabel{
  min-width:0!important;
  min-height:82px!important;
  padding:13px 42px 13px 13px!important;
  border-radius:17px!important;
}

/* Desktop: keep page dense enough to scan quickly */
@media (min-width:901px){
  .section{padding:64px 0}
  .feature-media,.showcase-media{height:190px!important}
  .slidecard{flex-basis:340px!important;width:340px!important;max-width:340px!important}
}

/* Tablet */
@media (max-width:900px){
  .wrap{width:min(1180px,calc(100% - 28px))}
  .section{padding:58px 0}
  .price-layout{grid-template-columns:1fr!important}
  .plan-matrix{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .areagrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .slidecard{flex-basis:46vw!important;width:46vw!important;max-width:46vw!important}
}

/* Phone */
@media (max-width:640px){
  .wrap{width:calc(100% - 20px)}
  .section{padding:48px 0}
  .section h2{font-size:31px!important;line-height:1.1!important;letter-spacing:-.9px!important}
  .section .lead{font-size:10px!important;line-height:1.6!important}
  .slidecard{flex-basis:82vw!important;width:82vw!important;max-width:82vw!important}
  .featurecard,.showcard{padding:10px!important;border-radius:17px!important}
  .feature-media,.showcase-media{height:165px!important;border-radius:14px!important}
  .featurecopy h3,.showcopy h3{font-size:12px!important}
  .featurecopy p,.showcopy p{font-size:9px!important;line-height:1.55!important}
  .reviewcard{min-height:180px!important;padding:14px!important}
  .reviewquote{font-size:10px!important}
  .person strong{font-size:9px!important}
  .person span,.person .age{font-size:7.5px!important}
  .trust-track{animation-duration:16s!important}
  .trust-group{gap:18px!important;padding-right:18px!important}
  .trustitem{font-size:7.2px!important}
  .trustitem i{width:5px!important;height:5px!important;flex-basis:5px!important}
  .price-layout{grid-template-columns:1fr!important;gap:13px!important}
  .pricepanel,.breakdown{padding:15px!important;border-radius:19px!important}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .plans .plan{height:78px!important;padding:11px 10px!important;border-radius:12px!important}
  .plans .plan b{font-size:17px!important}
  .plans .plan span{font-size:7.5px!important;margin-top:5px!important}
  .plan-details{margin-top:10px!important;padding-top:10px!important}
  .plan-details h4{font-size:8.5px!important}
  .plan-matrix{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:5px!important}
  .matrix-row{
    min-height:42px!important;
    padding:7px 8px!important;
    font-size:8px!important;
    border-radius:9px!important;
  }
  .matrix-row i{flex-basis:15px!important;width:15px!important}
  .breakdown h3{font-size:12px!important}
  .brow{font-size:8.8px!important;padding:8px 0!important}
  .breaknote{font-size:8px!important}
  .picker{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
  .payment-plan .plan-option{min-height:74px!important;padding:10px!important}
  .payment-plan .plan-option b{font-size:17px!important}
  .payment-plan .plan-option span{font-size:7.5px!important}
  .payment-plan .plan-details{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 8px 8px!important;gap:5px!important}
  .payment-plan .matrix-row{font-size:7.6px!important;min-height:38px!important;padding:6px!important}
  .areagrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:7px!important}
  .area{padding:9px 9px!important;font-size:8px!important}
  .gallery-grid{grid-template-columns:1fr 1fr!important}
  .sticky{
    width:calc(100vw - 18px)!important;
    min-height:50px!important;
    bottom:7px!important;
    padding:7px 8px!important;
    border-radius:14px!important;
  }
  .stickycopy strong{font-size:8.2px!important}
  .stickycopy span{font-size:7px!important}
  .sticky .btn{font-size:8px!important;padding:9px 11px!important;border-radius:10px!important}
  .biz{gap:8px!important}
  .bizlabel{min-height:82px!important;padding:12px 34px 12px 10px!important}
}

/* Tiny phones */
@media(max-width:360px){
  .slidecard{flex-basis:86vw!important;width:86vw!important;max-width:86vw!important}
  .plans,.picker{gap:6px!important}
  .matrix-row{font-size:7.5px!important}
  .sticky .btn{padding-inline:9px!important}
}

/* Respect accessibility settings */
@media(prefers-reduced-motion:reduce){
  .trust-track,.trustitem i{animation:none!important}
  .track{transition:none!important}
  .area{transition:none!important}
}
