/* uslugi-zps-guide.css — preview (21) + 9 WEBP */
/* 2026-09-09.01: main.zps */

:root{
  --zps-ink:#17122f;
  --zps-ink2:#29203f;
  --zps-text:#443e4e;
  --zps-muted:#756f7e;
  --zps-line:#e8e2ed;
  --zps-soft:#faf8fc;
  --zps-soft2:#f4eef8;
  --zps-violet:#76508b;
  --zps-violet2:#a879ba;
  --zps-white:#fff;
  --zps-blue:#243854;
  --zps-shadow:0 18px 55px rgba(23,18,47,.08);
}

.zps,
.zps *,
.zps *::before,
.zps *::after{box-sizing:border-box}

.zps{
  color:var(--zps-ink);
  background:#fff;
}

.zps img{
  display:block;
  max-width:100%;
}

.zps a{color:inherit}

.zps__wrap{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
}

.zps__crumbs{
  padding:24px 0 0;
  color:var(--zps-muted);
  font-size:14px;
}

.zps__crumbs a{
  color:inherit;
  text-decoration:none;
}

.zps__crumbs span{margin:0 7px}

/* ===== ICON SYSTEM ===== */

.zps-icon{
  width:24px;
  height:24px;
  flex:0 0 auto;
  fill:none;
  stroke:currentColor;
  stroke-width:1.65;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* ===== HERO ===== */

.zps__hero{
  position:relative;
  overflow:hidden;
  padding:48px 0 88px;
  background:
    radial-gradient(circle at 88% 12%,rgba(168,121,186,.20),transparent 28%),
    linear-gradient(180deg,#fff 0%,#faf8fc 100%);
}

.zps__hero::after{
  content:"";
  position:absolute;
  right:-200px;
  bottom:-310px;
  width:540px;
  height:540px;
  border:1px solid rgba(118,80,139,.11);
  border-radius:50%;
}

.zps__hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(350px,.62fr);
  gap:68px;
  align-items:center;
}

.zps__eyebrow{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 17px;
  color:var(--zps-violet);
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.zps__eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:currentColor;
}

.zps__hero h1{
  max-width:900px;
  margin:0;
  font-size:clamp(40px,5vw,64px);
  line-height:1.03;
  letter-spacing:-.045em;
}

.zps__lead{
  max-width:790px;
  margin:25px 0 0;
  color:var(--zps-text);
  font-size:clamp(18px,2vw,21px);
  line-height:1.67;
}

.zps__hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:29px;
}

.zps__btn{
  min-height:49px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 20px;
  border-radius:999px;
  text-decoration:none;
  border:0;
  font:inherit;
  font-size:14px;
  font-weight:800;
  cursor:pointer;
  transition:.18s ease;
}

.zps__btn--dark{
  color:#fff!important;
  background:var(--zps-ink);
}

.zps__btn--dark:hover{
  transform:translateY(-1px);
  background:#2d2346;
}

.zps__btn--light{
  color:var(--zps-ink)!important;
  background:#fff;
  border:1px solid #d9cedd;
}

.zps__trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px 19px;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--zps-line);
}

.zps__trust span{
  display:flex;
  align-items:center;
  gap:7px;
  color:#56505d;
  font-size:13px;
  font-weight:650;
}

.zps__trust span::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--zps-violet2);
}

/* ===== HERO IMAGES ===== */

.zps__hero-visual{
  position:relative;
  min-height:480px;
}

.zps__shot{
  position:absolute;
  overflow:hidden;
  margin:0;
  background:#e8e1eb;
  border-radius:24px;
  box-shadow:0 22px 64px rgba(23,18,47,.14);
}

.zps__shot img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.zps__shot figcaption{
  position:absolute;
  left:12px;
  bottom:12px;
  padding:7px 10px;
  color:#fff;
  background:rgba(23,18,47,.74);
  border-radius:999px;
  font-size:10px;
  font-weight:750;
  backdrop-filter:blur(7px);
}

.zps__shot--main{
  left:0;
  top:34px;
  width:71%;
  height:395px;
  z-index:2;
}

.zps__shot--top{
  right:0;
  top:0;
  width:44%;
  height:195px;
  z-index:3;
}

.zps__shot--bottom{
  right:2px;
  bottom:0;
  width:43%;
  height:215px;
  z-index:4;
}

/* ===== SEARCH ===== */

.zps__search-zone{
  position:relative;
  z-index:10;
  margin-top:-37px;
}

.zps__search{
  padding:24px 27px;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:23px;
  box-shadow:var(--zps-shadow);
}

.zps__search-label{
  display:block;
  margin-bottom:10px;
  font-size:15px;
  font-weight:800;
}

.zps__search-field{
  position:relative;
}

.zps__search-field .zps-icon{
  position:absolute;
  z-index:2;
  left:19px;
  top:50%;
  transform:translateY(-50%);
  color:var(--zps-violet);
}

.zps__search-input{
  width:100%;
  min-height:62px;
  padding:0 55px 0 54px;
  color:var(--zps-ink);
  background:#faf9fb;
  border:1px solid #ddd5e3;
  border-radius:16px;
  outline:0;
  font:inherit;
  font-size:17px;
  transition:.18s ease;
}

.zps__search-input:focus{
  background:#fff;
  border-color:#a986ba;
  box-shadow:0 0 0 4px rgba(118,80,139,.09);
}

.zps__search-clear{
  position:absolute;
  right:15px;
  top:50%;
  width:34px;
  height:34px;
  display:none;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  border:0;
  border-radius:50%;
  background:#eee9f1;
  color:#716a78;
  font-size:19px;
  cursor:pointer;
}

.zps__search-clear.is-visible{display:flex}

.zps__search-status{
  margin:10px 0 0;
  color:var(--zps-muted);
  font-size:13px;
}

.zps__filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:17px;
}

.zps__filter{
  min-height:38px;
  padding:8px 13px;
  color:#5e5765;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:999px;
  font:inherit;
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:.18s ease;
}

.zps__filter:hover,
.zps__filter.is-active{
  color:#fff;
  background:var(--zps-violet);
  border-color:var(--zps-violet);
}

/* ===== GENERIC SECTION ===== */

.zps__section{
  padding:88px 0;
}

.zps__section--soft{background:var(--zps-soft)}
.zps__section--lilac{background:var(--zps-soft2)}
.zps__section--dark{
  color:#fff;
  background:var(--zps-ink);
}

.zps__head{
  display:grid;
  grid-template-columns:1fr minmax(280px,440px);
  gap:48px;
  align-items:end;
  margin-bottom:38px;
}

.zps__kicker{
  margin:0 0 9px;
  color:var(--zps-violet);
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.zps__section--dark .zps__kicker{color:#d9bce4}

.zps__head h2{
  margin:0;
  font-size:clamp(31px,4vw,45px);
  line-height:1.08;
  letter-spacing:-.035em;
}

.zps__head p{
  margin:0;
  color:var(--zps-muted);
  font-size:16px;
  line-height:1.72;
}

.zps__section--dark .zps__head p{
  color:#d7d1df;
}

/* ===== TASK MOSAIC ===== */

.zps__tasks{
  display:grid;
  grid-template-columns:1.22fr .78fr 1fr;
  grid-template-rows:215px 215px;
  gap:15px;
}

.zps__task{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  min-height:180px;
  padding:25px;
  color:#fff!important;
  border-radius:24px;
  text-decoration:none;
  transition:.22s ease;
}

.zps__task:hover{
  transform:translateY(-3px);
}

.zps__task > *{
  position:relative;
  z-index:2;
}

.zps__task::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 82% 15%,rgba(255,255,255,.17),transparent 27%),
    linear-gradient(145deg,transparent,rgba(255,255,255,.04));
}

.zps__task--large{
  grid-row:1/3;
  background:linear-gradient(145deg,#281e3a,#775486);
}

.zps__task--family{
  background:linear-gradient(145deg,#593e51,#9d6e84);
}

.zps__task--neuro{
  background:linear-gradient(145deg,#755184,#432d50);
}

.zps__task--business{
  background:linear-gradient(145deg,#243854,#18253a);
}

.zps__task--print{
  background:linear-gradient(145deg,#695044,#a37a60);
}

.zps__task small{
  margin-bottom:auto;
  color:rgba(255,255,255,.72);
  font-size:11px;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}

.zps__task h3{
  margin:0 0 7px;
  font-size:24px;
  line-height:1.15;
}

.zps__task p{
  margin:0;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.55;
}

/* ===== SERVICE GROUP ===== */

.zps__group{
  scroll-margin-top:calc(var(--zp-fixed-header-h,93px) + 28px);
}

.zps__group-layout{
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:42px;
  align-items:start;
}

.zps__group-layout--reverse{
  grid-template-columns:minmax(0,1fr) 330px;
}

.zps__group-layout--reverse .zps__group-visual{
  order:2;
}

.zps__group-visual{
  position:sticky;
  top:calc(var(--zp-fixed-header-h,93px) + 22px);
}

.zps__group-photo{
  overflow:hidden;
  aspect-ratio:4/5;
  border-radius:25px;
  background:#e9e3ec;
}

.zps__group-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.zps__group-note{
  margin-top:15px;
  padding:17px;
  color:#61596a;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:15px;
  font-size:13px;
  line-height:1.65;
}

.zps__cards{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:13px;
}

.zps-card{
  position:relative;
  min-height:230px;
  display:flex;
  flex-direction:column;
  padding:23px;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:18px;
  transition:.2s ease;
}

.zps-card:hover{
  transform:translateY(-2px);
  border-color:#cebcd7;
  box-shadow:0 13px 34px rgba(23,18,47,.055);
}

.zps__section--dark .zps-card{
  background:#211936;
  border-color:rgba(255,255,255,.14);
}

.zps__section--dark .zps-card:hover{
  border-color:rgba(255,255,255,.28);
}

.zps-card__top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.zps-card__icon{
  width:43px;
  height:43px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:var(--zps-violet);
  background:var(--zps-soft2);
  border-radius:13px;
}

.zps__section--dark .zps-card__icon{
  color:#ead6f1;
  background:rgba(255,255,255,.10);
}

.zps-card__tag{
  color:#9b92a4;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.zps-card h3{
  margin:19px 0 9px;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.018em;
}

.zps-card p{
  margin:0;
  color:var(--zps-muted);
  font-size:14px;
  line-height:1.68;
}

.zps__section--dark .zps-card p{
  color:#cfc7d6;
}

.zps-card__link{
  display:inline-flex;
  align-items:center;
  gap:7px;
  width:max-content;
  margin-top:auto;
  padding-top:20px;
  color:var(--zps-violet)!important;
  text-decoration:none;
  font-size:14px;
  font-weight:800;
}

.zps__section--dark .zps-card__link{
  color:#e0c5ea!important;
}

.zps-card__link::after{
  content:"→";
  transition:transform .18s ease;
}

.zps-card:hover .zps-card__link::after{
  transform:translateX(4px);
}

.zps-card.is-hidden{display:none!important}
.zps__group.is-hidden{display:none!important}

/* ===== NEURO SPLIT ===== */

.zps__feature-split{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}

.zps__feature{
  position:relative;
  min-height:410px;
  overflow:hidden;
  display:flex;
  align-items:flex-end;
  padding:31px;
  border-radius:27px;
  color:#fff;
  background:#3d2c4c;
}

.zps__feature img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.zps__feature::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(23,18,47,.05),rgba(23,18,47,.90));
}

.zps__feature-body{
  position:relative;
  z-index:2;
  max-width:500px;
}

.zps__feature-body small{
  color:#ddc8e5;
  font-weight:750;
}

.zps__feature-body h3{
  margin:9px 0 10px;
  font-size:29px;
  line-height:1.12;
}

.zps__feature-body p{
  margin:0 0 17px;
  color:#ddd7e4;
  line-height:1.65;
}

.zps__feature-body a{
  color:#fff;
  font-weight:800;
  text-decoration:none;
}

/* ===== CHOICE NAV ===== */

.zps__choice{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--zps-line);
  border-left:1px solid var(--zps-line);
}

.zps__choice-row{
  padding:23px;
  border-right:1px solid var(--zps-line);
  border-bottom:1px solid var(--zps-line);
}

.zps__choice-row span{
  display:block;
  margin-bottom:7px;
  color:var(--zps-muted);
  font-size:13px;
}

.zps__choice-row strong{
  display:block;
  margin-bottom:9px;
  font-size:18px;
  line-height:1.4;
}

.zps__choice-row a{
  color:var(--zps-violet);
  text-decoration:none;
  font-weight:800;
  font-size:14px;
}

/* ===== COMPARE ===== */

.zps__compare{
  display:grid;
  grid-template-columns:1fr 110px 1fr;
  align-items:stretch;
  gap:0;
  overflow:hidden;
  border:1px solid var(--zps-line);
  border-radius:27px;
  background:#fff;
}

.zps__compare-side{
  padding:34px;
}

.zps__compare-side h3{
  margin:0 0 12px;
  font-size:28px;
}

.zps__compare-side p{
  margin:0;
  color:var(--zps-muted);
  line-height:1.7;
}

.zps__compare-mid{
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--zps-violet);
  background:var(--zps-soft2);
  font-size:13px;
  font-weight:900;
  letter-spacing:.08em;
}

.zps__compare-link{
  display:inline-flex;
  margin-top:17px;
  color:var(--zps-violet)!important;
  text-decoration:none;
  font-weight:800;
}

/* ===== PROCESS ===== */

.zps__steps{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  border-top:1px solid var(--zps-line);
  border-left:1px solid var(--zps-line);
}

.zps__step{
  min-height:147px;
  padding:20px 17px;
  border-right:1px solid var(--zps-line);
  border-bottom:1px solid var(--zps-line);
}

.zps__step-num{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:23px;
  color:#fff;
  background:var(--zps-ink);
  border-radius:50%;
  font-size:11px;
  font-weight:800;
}

.zps__step strong{
  display:block;
  margin-bottom:5px;
  font-size:14px;
}

.zps__step span{
  color:var(--zps-muted);
  font-size:12px;
  line-height:1.5;
}

/* ===== PHOTO CHECK ===== */

.zps__check{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:17px;
}

.zps__check-main{
  padding:35px;
  color:#fff;
  background:var(--zps-ink);
  border-radius:25px;
}

.zps__check-main h2{
  margin:0 0 14px;
  font-size:clamp(29px,4vw,42px);
  line-height:1.08;
}

.zps__check-main p{
  margin:0 0 25px;
  color:#d9d3df;
  line-height:1.72;
}

.zps__check-side{
  display:grid;
  gap:12px;
}

.zps__check-item{
  padding:22px;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:18px;
}

.zps__check-item strong{
  display:block;
  margin-bottom:6px;
}

.zps__check-item p{
  margin:0;
  color:var(--zps-muted);
  font-size:14px;
  line-height:1.6;
}

/* ===== BLOG ===== */

.zps__articles{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:13px;
}

.zps__article{
  min-height:205px;
  display:flex;
  flex-direction:column;
  padding:23px;
  color:var(--zps-ink)!important;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:18px;
  text-decoration:none;
  transition:.18s ease;
}

.zps__article:hover{
  transform:translateY(-2px);
  border-color:#ccb9d5;
}

.zps__article small{
  color:var(--zps-violet);
  font-weight:800;
}

.zps__article h3{
  margin:14px 0 9px;
  font-size:20px;
  line-height:1.3;
}

.zps__article p{
  margin:0;
  color:var(--zps-muted);
  font-size:14px;
  line-height:1.65;
}

.zps__article span{
  margin-top:auto;
  padding-top:18px;
  font-weight:800;
}

/* ===== FAQ ===== */

.zps__faq{
  max-width:880px;
}

.zps__faq details{
  margin:0 0 9px;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:14px;
}

.zps__faq summary{
  position:relative;
  display:block;
  padding:19px 54px 19px 20px;
  cursor:pointer;
  list-style:none;
  font-weight:750;
  line-height:1.45;
}

.zps__faq summary::-webkit-details-marker{display:none}

.zps__faq summary::after{
  content:"+";
  position:absolute;
  right:17px;
  top:50%;
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  color:var(--zps-violet);
  background:var(--zps-soft2);
  border-radius:50%;
}

.zps__faq details[open] summary::after{
  content:"−";
  color:#fff;
  background:var(--zps-violet);
}

.zps__faq details p{
  margin:0;
  padding:0 20px 20px;
  color:var(--zps-muted);
  font-size:14px;
  line-height:1.7;
}

/* ===== VK ===== */

.zps__vk{
  padding:76px 0;
  background:#f6f3f8;
}

.zps__vk-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.zps__vk-card{
  min-height:96px;
  display:flex;
  align-items:center;
  gap:15px;
  padding:17px;
  color:var(--zps-ink)!important;
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:16px;
  text-decoration:none;
  transition:.18s ease;
}

.zps__vk-card:hover{
  transform:translateY(-2px);
  border-color:#ccb9d5;
}

.zps__vk-logo{
  width:37px;
  height:37px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  color:#fff;
  background:#2787f5;
  border-radius:11px;
  font-size:12px;
  font-weight:900;
}

.zps__vk-card strong{
  display:block;
  font-size:14px;
  line-height:1.4;
}

.zps__vk-card small{
  color:var(--zps-muted);
}

.zps__vk-more{
  margin-top:12px;
}

.zps__vk-more summary{
  width:max-content;
  padding:10px 15px;
  color:var(--zps-violet);
  background:#fff;
  border:1px solid var(--zps-line);
  border-radius:999px;
  cursor:pointer;
  list-style:none;
  font-weight:800;
}

.zps__vk-more summary::-webkit-details-marker{display:none}

.zps__vk-more[open] summary{
  margin-bottom:14px;
}

/* ===== CTA ===== */

.zps__cta{
  padding:82px 0;
  color:#fff;
  background:
    radial-gradient(circle at 87% 20%,rgba(168,121,186,.42),transparent 29%),
    var(--zps-ink);
}

.zps__cta-inner{
  max-width:850px;
}

.zps__cta h2{
  margin:0;
  color:#fff;
  font-size:clamp(32px,4.6vw,48px);
  line-height:1.07;
  letter-spacing:-.04em;
}

.zps__cta p{
  max-width:730px;
  margin:21px 0 28px;
  color:#d9d3df;
  font-size:17px;
  line-height:1.72;
}

/* ===== REVEAL ===== */

.zps-reveal{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .48s ease,transform .48s ease;
}

.zps-reveal.is-visible{
  opacity:1;
  transform:none;
}

/* ===== RESPONSIVE ===== */

@media(max-width:1020px){
  .zps__hero-grid,
  .zps__head,
  .zps__group-layout,
  .zps__group-layout--reverse,
  .zps__check{
    grid-template-columns:1fr;
    gap:32px;
  }

  .zps__group-layout--reverse .zps__group-visual{order:0}

  .zps__group-visual{
    position:static;
    display:grid;
    grid-template-columns:220px 1fr;
    gap:16px;
  }

  .zps__group-photo{aspect-ratio:4/5}

  .zps__hero-visual{
    max-width:650px;
    min-height:405px;
  }

  .zps__tasks{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
  }

  .zps__task--large{grid-row:auto}

  .zps__steps{
    grid-template-columns:repeat(3,1fr);
  }

  .zps__articles,
  .zps__vk-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:720px){
  .zps__wrap{
    width:min(100% - 28px,1180px);
  }

  .zps__hero{
    padding:34px 0 64px;
  }

  .zps__hero h1{
    font-size:clamp(35px,10vw,49px);
  }

  .zps__hero-visual{
    min-height:335px;
  }

  .zps__shot{
    border-radius:18px;
  }

  .zps__shot--main{
    width:69%;
    height:282px;
  }

  .zps__shot--top{
    width:45%;
    height:145px;
  }

  .zps__shot--bottom{
    width:44%;
    height:155px;
  }

  .zps__search-zone{
    margin-top:-25px;
  }

  .zps__search{
    padding:18px;
    border-radius:18px;
  }

  .zps__section{
    padding:64px 0;
  }

  .zps__tasks,
  .zps__cards,
  .zps__feature-split,
  .zps__choice,
  .zps__articles,
  .zps__vk-grid{
    grid-template-columns:1fr;
  }

  .zps__task{
    min-height:180px;
  }

  .zps__group-visual{
    grid-template-columns:1fr;
  }

  .zps__group-photo{
    max-height:380px;
  }

  .zps__compare{
    grid-template-columns:1fr;
  }

  .zps__compare-mid{
    min-height:52px;
  }

  .zps__steps{
    grid-template-columns:repeat(2,1fr);
  }

  .zps__feature{
    min-height:360px;
  }

  .zps__cta .zps__btn{
    width:100%;
  }
}

@media(max-width:460px){
  .zps__hero-visual{
    min-height:292px;
  }

  .zps__shot--main{
    width:72%;
    height:245px;
  }

  .zps__shot--top{
    height:123px;
  }

  .zps__shot--bottom{
    height:132px;
  }

  .zps__steps{
    grid-template-columns:1fr;
  }
}

@media(prefers-reduced-motion:reduce){
  .zps *,
  .zps *::before,
  .zps *::after{
    transition:none!important;
    scroll-behavior:auto!important;
  }

  .zps-reveal{
    opacity:1;
    transform:none;
  }
}

html { scroll-behavior: smooth; scroll-padding-top: 110px; }
main.zps {
  overflow-x: clip;
  width: 100%;
  max-width: 100%;
}
main.zps img {
  max-width: 100%;
  height: auto;
  display: block;
}
main.zps a[data-zp-contacts-open] { cursor: pointer; }