*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  color:#171717;
  background:#fafaf9;
  -webkit-font-smoothing:antialiased;
}

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

.publicPage{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.publicHeader{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
  padding:28px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.publicBrand{
  display:flex;
  align-items:center;
  gap:11px;
  font-weight:800;
  font-size:18px;
  letter-spacing:-.04em;
}

.publicBrandMark{
  width:34px;
  height:34px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#171717;
  color:#fff;
  font-size:17px;
  font-weight:800;
}

.publicBack{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#6b6b6b;
  font-size:14px;
  font-weight:600;
  transition:.2s ease;
}

.publicBack:hover{
  color:#171717;
}

.publicMain{
  width:min(1000px,calc(100% - 40px));
  margin:0 auto;
  padding:55px 0 90px;
  flex:1;
}

.publicIntro{
  max-width:760px;
  margin-bottom:42px;
}

.publicEyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  color:#777;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.publicEyebrow::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:50%;
  background:#171717;
}

.publicIntro h1{
  margin:0;
  font-size:clamp(38px,6vw,68px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:800;
}

.publicIntro p{
  margin:22px 0 0;
  max-width:680px;
  color:#686868;
  font-size:18px;
  line-height:1.65;
}

.publicCard{
  background:#fff;
  border:1px solid #e9e9e7;
  border-radius:28px;
  box-shadow:0 16px 50px rgba(0,0,0,.045);
}

.publicContent{
  padding:34px;
}

.publicContent h2{
  margin:0 0 15px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.035em;
}

.publicContent h3{
  margin:30px 0 9px;
  font-size:17px;
  letter-spacing:-.02em;
}

.publicContent p,
.publicContent li{
  color:#626262;
  font-size:15px;
  line-height:1.7;
}

.publicContent p{
  margin:0 0 14px;
}

.publicContent ul{
  margin:10px 0 22px;
  padding-left:21px;
}

.publicContent li{
  margin:7px 0;
}

.publicDivider{
  height:1px;
  background:#ededeb;
  margin:30px 0;
}

/* ===== PRICES ===== */

.priceHeroCard{
  padding:42px;
  margin-bottom:24px;
  overflow:hidden;
  position:relative;
}

.priceHeroCard::after{
  content:"";
  position:absolute;
  width:260px;
  height:260px;
  right:-100px;
  top:-110px;
  border-radius:50%;
  background:#f4f4f2;
  z-index:0;
}

.priceHeroContent{
  position:relative;
  z-index:1;
}

.priceLabel{
  color:#888;
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.priceTitle{
  margin:12px 0 25px;
  font-size:clamp(26px,4vw,42px);
  line-height:1.05;
  letter-spacing:-.045em;
}

.priceAmount{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:8px;
}

.priceAmount strong{
  font-size:clamp(58px,10vw,92px);
  line-height:.9;
  letter-spacing:-.07em;
}

.priceAmount span{
  font-size:18px;
  color:#777;
}

.priceDescription{
  color:#666;
  font-size:16px;
  line-height:1.55;
}

.pricePromo{
  margin-top:30px;
  padding:20px 22px;
  border-radius:20px;
  background:#f4f4f2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.pricePromo strong{
  display:block;
  font-size:16px;
}

.pricePromo span{
  display:block;
  margin-top:4px;
  color:#777;
  font-size:14px;
}

.pricePromoBadge{
  flex:none;
  padding:9px 13px;
  border-radius:999px;
  background:#171717;
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.priceFeatures{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:24px;
}

.priceFeature{
  padding:19px 20px;
  border:1px solid #e9e9e7;
  border-radius:18px;
  background:#fff;
}

.priceFeature strong{
  display:block;
  font-size:15px;
  margin-bottom:5px;
}

.priceFeature span{
  color:#777;
  font-size:13px;
  line-height:1.5;
}

.publicButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:54px;
  padding:0 23px;
  border-radius:16px;
  background:#171717;
  color:#fff;
  font-size:15px;
  font-weight:750;
  transition:.2s ease;
}

.publicButton:hover{
  transform:translateY(-1px);
  background:#292929;
}

.publicButtonArrow{
  font-size:20px;
  line-height:1;
}

/* ===== RULES / ARTICLES ===== */

.ruleGrid{
  display:grid;
  gap:14px;
}

.ruleBlock{
  padding:27px 29px;
  border:1px solid #e9e9e7;
  border-radius:22px;
  background:#fff;
}

.ruleNumber{
  display:inline-flex;
  width:31px;
  height:31px;
  align-items:center;
  justify-content:center;
  margin-bottom:14px;
  border-radius:10px;
  background:#f2f2f0;
  color:#555;
  font-size:12px;
  font-weight:800;
}

.ruleBlock h2{
  margin:0 0 9px;
  font-size:19px;
  letter-spacing:-.025em;
}

.ruleBlock p{
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.7;
}

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

.infoCard{
  padding:28px;
  border:1px solid #e9e9e7;
  border-radius:22px;
  background:#fff;
}

.infoIcon{
  width:42px;
  height:42px;
  margin-bottom:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#f2f2f0;
  font-size:19px;
}

.infoCard h2{
  margin:0 0 9px;
  font-size:20px;
  letter-spacing:-.03em;
}

.infoCard p{
  margin:0;
  color:#666;
  font-size:14px;
  line-height:1.65;
}

/* ===== FOOTER ===== */

.publicFooter{
  border-top:1px solid #e9e9e7;
  background:#fff;
}

.publicFooterInner{
  width:min(1000px,calc(100% - 40px));
  margin:0 auto;
  padding:30px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.publicFooterBrand{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.025em;
}

.publicFooterNav{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:18px;
}

.publicFooterNav a{
  color:#777;
  font-size:13px;
  font-weight:600;
  transition:.2s ease;
}

.publicFooterNav a:hover{
  color:#171717;
}

/* ===== MOBILE ===== */

@media(max-width:700px){

  .publicHeader{
    width:min(100% - 28px,1180px);
    padding:20px 0;
  }

  .publicBrand{
    font-size:16px;
  }

  .publicBrandMark{
    width:31px;
    height:31px;
    border-radius:10px;
  }

  .publicBack{
    font-size:13px;
  }

  .publicMain{
    width:min(100% - 28px,1000px);
    padding:35px 0 60px;
  }

  .publicIntro{
    margin-bottom:28px;
  }

  .publicIntro h1{
    font-size:43px;
  }

  .publicIntro p{
    font-size:16px;
    line-height:1.55;
  }

  .publicContent{
    padding:24px 20px;
  }

  .priceHeroCard{
    padding:27px 22px;
  }

  .priceTitle{
    font-size:30px;
  }

  .pricePromo{
    align-items:flex-start;
    flex-direction:column;
    padding:17px;
  }

  .pricePromoBadge{
    align-self:flex-start;
  }

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

  .ruleBlock{
    padding:23px 20px;
  }

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

  .publicFooterInner{
    width:min(100% - 28px,1000px);
    padding:25px 0;
    align-items:flex-start;
    flex-direction:column;
  }

  .publicFooterNav{
    justify-content:flex-start;
    gap:12px 18px;
  }
}

@media(max-width:380px){

  .publicIntro h1{
    font-size:38px;
  }

  .priceAmount strong{
    font-size:65px;
  }

  .publicButton{
    width:100%;
  }
}

/* ===== TOPPIO PUBLIC PAGES — REAL HTML CLASSES ===== */

.publicLogo{
  display:inline-flex;
  align-items:center;
  font-size:20px;
  font-weight:850;
  letter-spacing:-.055em;
  color:#171717;
}

.backLink{
  color:#707070;
  font-size:14px;
  font-weight:600;
  transition:.2s ease;
}

.backLink:hover{
  color:#171717;
}

.publicMain > h1{
  margin:0;
  font-size:clamp(40px,6vw,68px);
  line-height:.98;
  letter-spacing:-.055em;
  font-weight:800;
}

.publicMain > h1 span{
  color:#8a8a8a;
}

.priceCard{
  margin-top:42px;
  padding:40px;
  background:#fff;
  border:1px solid #e7e7e5;
  border-radius:28px;
  box-shadow:0 18px 55px rgba(0,0,0,.055);
}

.priceCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.priceLabel{
  color:#858585;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}

.price{
  margin:12px 0 8px;
  font-size:clamp(58px,9vw,90px);
  line-height:.9;
  font-weight:850;
  letter-spacing:-.07em;
}

.priceCardTop p{
  margin:0;
  color:#6b6b6b;
  font-size:15px;
  line-height:1.55;
}

.freeBadge{
  flex:none;
  min-width:190px;
  padding:22px 24px;
  border-radius:20px;
  background:#f2f2f0;
  text-align:center;
}

.freeBadge strong{
  display:block;
  font-size:42px;
  line-height:1;
  letter-spacing:-.055em;
}

.freeBadge span{
  display:block;
  margin-top:8px;
  color:#707070;
  font-size:13px;
  line-height:1.35;
}

.priceDivider{
  height:1px;
  margin:34px 0 26px;
  background:#e9e9e7;
}

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

.priceFeatures > div{
  padding:15px 17px;
  border:1px solid #ededeb;
  border-radius:15px;
  color:#454545;
  background:#fff;
  font-size:14px;
}

.priceCard .publicButton{
  margin-top:28px;
}

.publicNote{
  max-width:760px;
  margin:22px auto 0;
  color:#777;
  font-size:14px;
  line-height:1.65;
  text-align:center;
}

.publicFooter{
  width:min(1000px,calc(100% - 40px));
  margin:0 auto;
  padding:30px 0 35px;
  border-top:1px solid #e8e8e6;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  color:#777;
  font-size:13px;
}

.publicFooter nav{
  display:flex;
  flex-wrap:wrap;
  gap:18px;
}

.publicFooter nav a{
  color:#777;
  font-weight:600;
  transition:.2s ease;
}

.publicFooter nav a:hover{
  color:#171717;
}

/* ===== MOBILE ===== */

@media(max-width:700px){

  .publicHeader{
    width:calc(100% - 28px);
    padding:20px 0;
  }

  .publicLogo{
    font-size:18px;
  }

  .backLink{
    font-size:13px;
  }

  .publicMain{
    width:calc(100% - 28px);
    padding:35px 0 55px;
  }

  .publicMain > h1{
    font-size:43px;
  }

  .priceCard{
    margin-top:28px;
    padding:24px 20px;
    border-radius:22px;
  }

  .priceCardTop{
    display:block;
  }

  .price{
    font-size:68px;
  }

  .freeBadge{
    margin-top:25px;
    min-width:0;
    text-align:left;
  }

  .freeBadge strong{
    font-size:36px;
  }

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

  .priceCard .publicButton{
    width:100%;
  }

  .publicFooter{
    width:calc(100% - 28px);
    align-items:flex-start;
    flex-direction:column;
  }

  .publicFooter nav{
    gap:12px 18px;
  }
}

@media(max-width:380px){

  .publicMain > h1{
    font-size:38px;
  }

  .price{
    font-size:62px;
  }
}


/* ===== TOPPIO ARTICLE PAGES ===== */

.publicArticle{
  width:min(860px,calc(100% - 40px));
  margin:0 auto;
  padding:75px 0 90px;
}

.publicArticle .publicEyebrow{
  margin-bottom:20px;
}

.publicArticle .lead{
  max-width:720px;
  margin:28px 0 55px;
  color:#666;
  font-size:20px;
  line-height:1.65;
}

.publicArticle h1{
  margin:0 0 30px;
  font-size:clamp(42px,6vw,64px);
  line-height:1;
  letter-spacing:-.055em;
  font-weight:800;
}

.publicArticle h2{
  margin:52px 0 18px;
  font-size:26px;
  line-height:1.15;
  letter-spacing:-.025em;
  font-weight:800;
}

.publicArticle p{
  color:#555;
  font-size:16px;
  line-height:1.75;
}

.publicArticle ul{
  margin:20px 0 30px;
  padding-left:22px;
}

.publicArticle li{
  margin:10px 0;
  color:#555;
  font-size:16px;
  line-height:1.65;
}

.publicArticle strong{
  color:#222;
}

.publicArticle section{
  padding:0 0 12px;
}

.aboutHighlight{
  margin:45px 0 55px;
  padding:30px 32px;
  background:#f4f4f2;
  border-radius:24px;
}

.aboutHighlight h2{
  margin-top:0;
}

.aboutHighlight p{
  margin-bottom:0;
}

/* ===== ARTICLE LINKS ===== */

.publicArticle a{
  color:#222;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}

/* ===== ARTICLE MOBILE ===== */

@media(max-width:700px){

  .publicArticle{
    width:calc(100% - 28px);
    padding:48px 0 65px;
  }

  .publicArticle .lead{
    margin:22px 0 40px;
    font-size:17px;
    line-height:1.6;
  }

  .publicArticle h1{
    font-size:42px;
  }

  .publicArticle h2{
    margin-top:42px;
    font-size:23px;
  }

  .publicArticle p,
  .publicArticle li{
    font-size:15px;
    line-height:1.7;
  }

  .aboutHighlight{
    margin:35px 0 45px;
    padding:24px 20px;
    border-radius:20px;
  }
}

@media(max-width:380px){

  .publicArticle h1{
    font-size:37px;
  }

  .publicArticle .lead{
    font-size:16px;
  }
}



/* =========================================================
   TOPPIO GUIDE
   ========================================================= */

.guideMain{
  width:min(1120px,calc(100% - 40px));
  margin:0 auto;
  padding:45px 0 100px;
  flex:1;
}

.guideHero{
  padding:25px 0 55px;
}

.guideHero h1{
  margin:0;
  font-size:clamp(42px,7vw,76px);
  line-height:.96;
  letter-spacing:-.06em;
  font-weight:800;
}

.guideHero h1 span{
  color:#8a8a88;
}

.guideHero > p{
  max-width:720px;
  margin:25px 0 0;
  color:#666;
  font-size:19px;
  line-height:1.6;
}

.guideStats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin-top:40px;
}

.guideStats div{
  padding:22px;
  background:#fff;
  border:1px solid #e9e9e7;
  border-radius:20px;
}

.guideStats strong{
  display:block;
  font-size:28px;
  letter-spacing:-.05em;
}

.guideStats span{
  display:block;
  margin-top:8px;
  color:#777;
  font-size:13px;
  line-height:1.4;
}

.guideNav{
  position:sticky;
  top:10px;
  z-index:20;
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  padding:8px;
  margin:0 0 55px;
  background:rgba(250,250,249,.88);
  border:1px solid #e8e8e5;
  border-radius:18px;
  backdrop-filter:blur(15px);
}

.guideNav a{
  padding:10px 14px;
  border-radius:12px;
  color:#666;
  font-size:13px;
  font-weight:700;
  transition:.2s ease;
}

.guideNav a:hover{
  background:#fff;
  color:#171717;
}

.guideStep{
  scroll-margin-top:90px;
  padding:60px 0;
  border-top:1px solid #e7e7e4;
}

.guideStepNumber{
  margin-bottom:12px;
  color:#aaa;
  font-size:14px;
  font-weight:800;
  letter-spacing:.12em;
}

.guideStepContent{
  display:grid;
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr);
  gap:45px;
  align-items:start;
}

.guideStepText h2{
  margin:0;
  font-size:clamp(29px,4vw,43px);
  line-height:1.05;
  letter-spacing:-.05em;
}

.guideStepText p{
  margin:18px 0 0;
  color:#666;
  font-size:16px;
  line-height:1.7;
}

.guideTag{
  margin-bottom:13px;
  color:#8b8b89;
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
}

.guideImage{
  margin:0;
}

.guideImage img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid #e4e4e1;
  border-radius:22px;
  box-shadow:0 18px 55px rgba(0,0,0,.07);
  background:#fff;
}

.guideImage figcaption{
  margin-top:10px;
  color:#999;
  font-size:12px;
  text-align:center;
}

.guideImageLarge{
  grid-column:2;
}

.guideTools{
  display:grid;
  gap:10px;
  margin-top:25px;
}

.guideTools div{
  padding:14px 16px;
  background:#fff;
  border:1px solid #e8e8e5;
  border-radius:15px;
}

.guideTools strong{
  display:block;
  font-size:14px;
}

.guideTools span{
  display:block;
  margin-top:4px;
  color:#777;
  font-size:13px;
  line-height:1.4;
}

.guideList{
  margin:25px 0 0;
  padding:0;
  list-style:none;
}

.guideList li{
  padding:11px 0;
  border-bottom:1px solid #ececea;
  color:#666;
  font-size:14px;
  line-height:1.5;
}

.guideFinish{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:40px;
  padding:32px;
  background:#171717;
  color:#fff;
  border-radius:28px;
}

.guideFinishIcon{
  width:58px;
  height:58px;
  flex:0 0 58px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:18px;
  background:#fff;
  color:#171717;
  font-size:27px;
  font-weight:800;
}

.guideFinish .guideTag{
  color:#999;
}

.guideFinish h2{
  margin:0;
  font-size:24px;
  letter-spacing:-.035em;
}

.guideFinish p{
  margin:8px 0 0;
  color:#aaa;
  font-size:14px;
  line-height:1.5;
}

.guideButton{
  margin-left:auto;
  flex:0 0 auto;
  padding:14px 20px;
  border-radius:13px;
  background:#fff;
  color:#171717;
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
  transition:.2s ease;
}

.guideButton:hover{
  transform:translateY(-1px);
}


/* mobile */

@media(max-width:760px){

  .guideMain{
    width:min(100% - 28px,1120px);
    padding-top:25px;
    padding-bottom:60px;
  }

  .guideHero{
    padding-bottom:35px;
  }

  .guideHero > p{
    font-size:16px;
  }

  .guideStats{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
  }

  .guideStats div{
    padding:16px;
  }

  .guideStats strong{
    font-size:23px;
  }

  .guideNav{
    top:6px;
    margin-bottom:25px;
    overflow:hidden;
  }

  .guideNav a{
    padding:8px 10px;
    font-size:12px;
  }

  .guideStep{
    padding:42px 0;
  }

  .guideStepContent{
    display:flex;
    flex-direction:column;
    gap:25px;
  }

  .guideImageLarge{
    width:100%;
  }

  .guideTools{
    gap:7px;
  }

  .guideTools div{
    padding:12px 13px;
  }

  .guideFinish{
    flex-direction:column;
    align-items:flex-start;
    padding:25px;
    border-radius:23px;
  }

  .guideButton{
    width:100%;
    margin-left:0;
    text-align:center;
  }

}

/* =========================================================
   GUIDE — примеры эффектов
   ========================================================= */

.guideExamples{
  margin-top:28px;
}

.guideExamplesTitle{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.guideExamplesTitle span{
  font-size:14px;
  font-weight:800;
  letter-spacing:-.01em;
}

.guideExamplesTitle small{
  font-size:11px;
  color:#9a9592;
}

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

.guideExample{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(25,22,22,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 22px rgba(30,25,25,.045);
}

.guideExampleVisual{
  height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#faf8f7;
}

.guideExampleText{
  padding:11px 13px 13px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.guideExampleText strong{
  font-size:12px;
  line-height:1.3;
  font-weight:800;
}

.guideExampleText span{
  font-size:10px;
  line-height:1.35;
  color:#918b88;
}


/* КРУГ */

.guideExampleRound .guideExampleVisual{
  background:
    radial-gradient(circle at 50% 42%, #f9d6de 0 28%, #f5c3cf 29% 45%, transparent 46%),
    #fff4f6;
}

.guideExampleCircle{
  width:92px;
  height:92px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(145deg,#f7a5b8,#ef6d8b);
  box-shadow:
    0 9px 20px rgba(230,105,135,.22),
    inset 0 0 0 5px rgba(255,255,255,.72);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}


/* ПОЛАРОИД */

.guideExamplePolaroid .guideExampleVisual{
  background:#f5f2ee;
}

.guidePolaroid{
  width:92px;
  padding:7px 7px 11px;
  background:#fff;
  box-shadow:0 9px 20px rgba(40,35,30,.14);
  transform:rotate(-4deg);
}

.guidePolaroidPhoto{
  height:91px;
  background:
    radial-gradient(circle at 55% 38%, #f6b5c3 0 14%, transparent 15%),
    radial-gradient(circle at 35% 63%, #ef7e9b 0 17%, transparent 18%),
    linear-gradient(145deg,#f7d9df,#f0a4b5);
}

.guidePolaroidCaption{
  padding-top:8px;
  text-align:center;
  font-family:cursive;
  font-size:10px;
  color:#55504d;
}


/* КИНОЛЕНТА */

.guideExampleFilm .guideExampleVisual{
  background:#f2f2f2;
}

.guideFilmstrip{
  position:relative;
  width:155px;
  height:104px;
  padding:13px 8px;
  box-sizing:border-box;
  background:#222;
  border-radius:4px;
  box-shadow:0 9px 20px rgba(0,0,0,.15);
}

.guideFilmstrip i{
  position:absolute;
  top:3px;
  bottom:3px;
  width:8px;
  background:
    repeating-linear-gradient(
      to bottom,
      #f4f1ec 0 7px,
      transparent 7px 16px
    );
  opacity:.9;
}

.guideFilmstrip i:nth-child(1){
  left:2px;
}

.guideFilmstrip i:nth-child(2){
  right:2px;
}

.guideFilmstrip i:nth-child(3){
  display:none;
}

.guideFilmFrames{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  height:100%;
}

.guideFilmFrames b{
  display:block;
  border-radius:2px;
  background:
    radial-gradient(circle at 50% 35%,#f5b3c1 0 16%,transparent 17%),
    linear-gradient(145deg,#f6d9df,#e9809d);
}


/* ОБВОДКА */

.guideExampleOutline .guideExampleVisual{
  background:#f8f8f8;
}

.guideOutlineShape{
  position:relative;
  width:110px;
  height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.guideOutlineShape:before{
  content:"";
  position:absolute;
  width:72px;
  height:72px;
  border-radius:45% 55% 48% 52%;
  background:#ef6b87;
  transform:rotate(-8deg);
  box-shadow:0 0 0 3px #272323;
}

.guideOutlineShape div{
  position:relative;
  z-index:1;
  width:63px;
  height:63px;
  border-radius:45% 55% 48% 52%;
  background:
    radial-gradient(circle at 35% 34%,#fff 0 5%,transparent 6%),
    radial-gradient(circle at 65% 34%,#fff 0 5%,transparent 6%),
    linear-gradient(145deg,#f7b1c0,#f07998);
  transform:rotate(-8deg);
}


/* МОБИЛЬНАЯ ВЕРСИЯ */

@media (max-width:700px){

  .guideExamples{
    margin-top:22px;
  }

  .guideExamplesTitle{
    display:block;
    margin-bottom:12px;
  }

  .guideExamplesTitle span{
    display:block;
    font-size:13px;
  }

  .guideExamplesTitle small{
    display:block;
    margin-top:3px;
  }

  .guideExamplesGrid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .guideExampleVisual{
    height:125px;
  }

  .guideExampleText{
    padding:9px 10px 11px;
  }

  .guideExampleText strong{
    font-size:11px;
  }

  .guideExampleText span{
    font-size:9px;
  }

  .guideExampleCircle{
    width:72px;
    height:72px;
    font-size:9px;
  }

  .guidePolaroid{
    width:75px;
    padding:5px 5px 8px;
  }

  .guidePolaroidPhoto{
    height:72px;
  }

  .guidePolaroidCaption{
    padding-top:5px;
    font-size:8px;
  }

  .guideFilmstrip{
    width:125px;
    height:82px;
  }

  .guideOutlineShape{
    transform:scale(.82);
  }
}


/* =========================================================
   TOPPIO GUIDE — визуальная демонстрация эффектов
   ========================================================= */

.guideExamples{
  width:100%;
  margin-top:34px;
}

.guideExamplesHeader{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:18px;
  margin-bottom:4px;
}

.guideExamplesTitle{
  font-size:25px;
  font-weight:800;
  letter-spacing:-.04em;
}

.guideExamplesSub{
  font-size:12px;
  color:#999391;
}

.guideExamplesShowcase{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:5px;
}

.guideExampleItem{
  position:relative;
  min-width:0;
}

.guideExampleLabel{
  position:relative;
  width:max-content;
  margin:0 auto -2px;
  font-family:"Comic Sans MS","Segoe Print",cursive;
  font-size:19px;
  font-weight:700;
  line-height:1;
  color:#252b36;
  transform:rotate(-3deg);
  z-index:3;
}

.guideExampleItem:nth-child(2) .guideExampleLabel{
  transform:rotate(2deg);
}

.guideExampleItem:nth-child(3) .guideExampleLabel{
  transform:rotate(-2deg);
}

.guideExampleItem:nth-child(4) .guideExampleLabel{
  transform:rotate(3deg);
}

.guideDoodleArrow{
  position:absolute;
  left:50%;
  top:18px;
  width:30px;
  height:30px;
  border-right:2px solid #39414c;
  border-bottom:2px solid #39414c;
  border-radius:0 0 18px 0;
  transform:rotate(30deg);
}

.guideDoodleArrow:after{
  content:"";
  position:absolute;
  right:-4px;
  bottom:-3px;
  width:7px;
  height:7px;
  border-right:2px solid #39414c;
  border-bottom:2px solid #39414c;
  transform:rotate(5deg);
}


/* ОБЛАСТЬ РИСУНКА */

.guideExampleArtwork{
  height:205px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}


/* КРУГЛОЕ */

.guideExampleRound .guideExampleArtwork{
  background:radial-gradient(circle at 50% 55%,
    rgba(248,181,198,.28) 0 32%,
    transparent 33%);
}

.guideExampleCircle{
  position:relative;
  width:135px;
  height:135px;
  border-radius:50%;
  background:linear-gradient(145deg,#f9b4c5,#ef6f91);
  border:7px solid #fff;
  box-shadow:
    0 0 0 2px rgba(239,109,145,.2),
    0 18px 35px rgba(224,104,135,.20);
}

.guideBunnyEar{
  position:absolute;
  top:-19px;
  width:38px;
  height:55px;
  border-radius:50% 50% 45% 45%;
  background:#f8a9bd;
  border:5px solid #fff;
  transform:rotate(-10deg);
}

.guideBunnyEar.right{
  right:17px;
  transform:rotate(10deg);
}

.guideBunnyEar.left{
  left:17px;
}

.guideBunnyFace{
  position:absolute;
  left:30px;
  top:35px;
  width:68px;
  height:63px;
  border-radius:50%;
  background:#fff;
}

.guideBunnyFace i{
  position:absolute;
  top:24px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#3b3436;
}

.guideBunnyFace i:first-child{
  left:18px;
}

.guideBunnyFace i:nth-child(2){
  right:18px;
}

.guideBunnyFace b{
  position:absolute;
  left:28px;
  top:34px;
  width:12px;
  height:8px;
  border-radius:50%;
  background:#f16b87;
}


/* ПОЛАРОИД */

.guideExamplePolaroid .guideExampleArtwork{
  background:radial-gradient(circle at 50% 55%,
    rgba(242,226,205,.45) 0 35%,
    transparent 36%);
}

.guidePolaroid{
  width:125px;
  padding:9px 9px 18px;
  background:#fff;
  box-shadow:0 18px 30px rgba(40,35,30,.14);
  transform:rotate(-5deg);
}

.guidePolaroidPhoto{
  position:relative;
  height:132px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 37%,#e4a17e 0 21%,transparent 22%),
    radial-gradient(circle at 38% 45%,#c77b60 0 7%,transparent 8%),
    radial-gradient(circle at 62% 45%,#c77b60 0 7%,transparent 8%),
    linear-gradient(145deg,#f5d6c5,#d98e80);
}

.guideTeddyEar{
  position:absolute;
  top:26px;
  width:29px;
  height:29px;
  border-radius:50%;
  background:#c98a68;
}

.guideTeddyEar.left{
  left:28px;
}

.guideTeddyEar.right{
  right:28px;
}

.guideTeddyFace{
  position:absolute;
  left:48px;
  top:42px;
  width:30px;
  height:30px;
  border-radius:50%;
  color:#fff;
  font-size:10px;
  text-align:center;
  padding-top:8px;
  box-sizing:border-box;
}

.guidePolaroidCaption{
  padding-top:10px;
  text-align:center;
  font-family:cursive;
  font-size:13px;
  color:#55504d;
}


/* КИНОЛЕНТА */

.guideExampleFilm .guideExampleArtwork{
  background:radial-gradient(circle at 50% 55%,
    rgba(210,215,224,.40) 0 38%,
    transparent 39%);
}

.guideFilmstrip{
  position:relative;
  width:152px;
  height:168px;
  padding:13px 14px;
  box-sizing:border-box;
  background:#22252a;
  border-radius:5px;
  box-shadow:0 18px 30px rgba(25,25,25,.18);
  transform:rotate(-4deg);
}

.guideFilmSprockets{
  position:absolute;
  top:5px;
  bottom:5px;
  width:9px;
  background:repeating-linear-gradient(
    to bottom,
    #f2eee9 0 8px,
    transparent 8px 16px
  );
}

.guideFilmSprockets.left{
  left:3px;
}

.guideFilmSprockets.right{
  right:3px;
}

.guideFilmFrames{
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:6px;
  height:100%;
}

.guideFilmFrames b{
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:2px;
  background:linear-gradient(145deg,#f5c3ce,#e87896);
}

.guideFilmFrames b span{
  width:24px;
  height:24px;
  border-radius:50%;
  background:#fff;
  opacity:.8;
  font-size:0;
}


/* ОБВОДКА */

.guideExampleOutline .guideExampleArtwork{
  background:radial-gradient(circle at 50% 55%,
    rgba(215,211,244,.38) 0 37%,
    transparent 38%);
}

.guideOutlineCat{
  position:relative;
  width:135px;
  height:125px;
  filter:drop-shadow(0 10px 14px rgba(90,80,120,.14));
}

.guideOutlineCat .face{
  position:absolute;
  left:20px;
  top:26px;
  width:95px;
  height:85px;
  border-radius:48% 48% 45% 45%;
  background:linear-gradient(145deg,#fff,#f7c8d3);
  border:5px solid #29282d;
  box-sizing:border-box;
}

.guideOutlineCat .ear{
  position:absolute;
  top:4px;
  width:43px;
  height:49px;
  background:#f3a8ba;
  border:5px solid #29282d;
  transform:rotate(25deg);
  z-index:1;
}

.guideOutlineCat .ear.left{
  left:18px;
  border-radius:12px 35px 8px 30px;
}

.guideOutlineCat .ear.right{
  right:18px;
  transform:rotate(-25deg);
  border-radius:35px 12px 30px 8px;
}

.guideOutlineCat .face i{
  position:absolute;
  top:29px;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#29282d;
}

.guideOutlineCat .face i:first-child{
  left:23px;
}

.guideOutlineCat .face i:nth-child(2){
  right:23px;
}

.guideOutlineCat .face b{
  position:absolute;
  left:40px;
  top:45px;
  width:12px;
  height:9px;
  border-radius:50%;
  background:#ef7896;
}

.guideOutlineCat .heart{
  position:absolute;
  right:4px;
  bottom:1px;
  color:#ef6b87;
  font-size:33px;
  -webkit-text-stroke:3px #29282d;
}


/* ПОДПИСИ */

.guideExampleCaption{
  position:relative;
  margin:0 8px;
  padding:11px 13px 13px;
  border:1px solid rgba(30,25,25,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 20px rgba(30,25,25,.045);
}

.guideExampleCaption strong{
  display:block;
  font-size:12px;
  line-height:1.3;
  font-weight:800;
}

.guideExampleCaption span{
  display:block;
  margin-top:3px;
  font-size:10px;
  line-height:1.35;
  color:#918b88;
}


/* МОБИЛЬНАЯ ВЕРСИЯ */

@media (max-width:700px){

  .guideExamples{
    margin-top:25px;
  }

  .guideExamplesHeader{
    display:block;
    text-align:left;
    margin-bottom:8px;
  }

  .guideExamplesTitle{
    font-size:19px;
  }

  .guideExamplesSub{
    margin-top:3px;
    font-size:10px;
  }

  .guideExamplesShowcase{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px 8px;
  }

  .guideExampleArtwork{
    height:155px;
  }

  .guideExampleLabel{
    font-size:16px;
  }

  .guideDoodleArrow{
    top:15px;
    width:24px;
    height:24px;
  }

  .guideExampleCircle{
    width:100px;
    height:100px;
  }

  .guideBunnyFace{
    left:23px;
    top:27px;
    transform:scale(.75);
    transform-origin:top left;
  }

  .guideBunnyEar{
    transform:scale(.75) rotate(-10deg);
    transform-origin:bottom center;
  }

  .guideBunnyEar.right{
    transform:scale(.75) rotate(10deg);
  }

  .guidePolaroid{
    width:92px;
    padding:7px 7px 12px;
  }

  .guidePolaroidPhoto{
    height:98px;
  }

  .guideTeddyEar{
    transform:scale(.75);
  }

  .guideTeddyEar.left{
    left:20px;
  }

  .guideTeddyEar.right{
    right:20px;
  }

  .guideTeddyFace{
    left:34px;
    top:31px;
  }

  .guidePolaroidCaption{
    padding-top:6px;
    font-size:10px;
  }

  .guideFilmstrip{
    width:110px;
    height:135px;
  }

  .guideOutlineCat{
    transform:scale(.8);
  }

  .guideExampleCaption{
    margin:0 2px;
    padding:9px 9px 10px;
  }

  .guideExampleCaption strong{
    font-size:10px;
  }

  .guideExampleCaption span{
    font-size:8px;
  }
}


/* Примеры эффектов занимают всю ширину блока инструкции */
.guideStepContent > .guideExamples{
  grid-column:1 / -1;
  width:100%;
  max-width:none;
  margin-top:34px;
}

.guideStepContent > .guideImageLarge{
  grid-column:2;
}

@media (max-width:800px){
  .guideStepContent > .guideExamples{
    grid-column:1 / -1;
  }

  .guideStepContent > .guideImageLarge{
    grid-column:1 / -1;
  }
}


/* =========================================================
   GUIDE — примеры эффектов в правой колонке
   ========================================================= */

.guideStepContent > .guideExamples{
  grid-column:2;
  width:100%;
  max-width:none;
  margin-top:0;
}

.guideExamplesHeader{
  display:block;
  text-align:left;
  margin-bottom:12px;
}

.guideExamplesTitle{
  font-size:21px;
}

.guideExamplesSub{
  display:block;
  margin-top:3px;
  font-size:11px;
}

.guideExamplesShowcase{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:0;
}

.guideExampleArtwork{
  height:145px;
}

.guideExampleLabel{
  font-size:16px;
}

.guideExampleCaption{
  margin:0 2px;
  padding:9px 10px 10px;
}

.guideExampleCaption strong{
  font-size:10px;
}

.guideExampleCaption span{
  font-size:8px;
}

@media (max-width:800px){

  .guideStepContent > .guideExamples{
    grid-column:1 / -1;
  }

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

  .guideExampleArtwork{
    height:155px;
  }

  .guideExampleLabel{
    font-size:16px;
  }

}


/* ===== GUIDE: примеры эффектов — правая колонка ===== */

.guideStepContent{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, .95fr);
  column-gap:64px;
  align-items:start;
}

.guideStepContent > .guideStepText{
  grid-column:1;
  grid-row:1;
}

.guideStepContent > .guideExamples{
  grid-column:2;
  grid-row:1;
  width:100%;
  max-width:none;
  margin:0;
  align-self:start;
}

.guideStepContent > .guideImageLarge{
  grid-column:2;
  grid-row:2;
  width:100%;
  margin-top:34px;
}

/* Примеры: аккуратная сетка 2 × 2 */
.guideExamplesShowcase{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

/* На небольших экранах — одна колонка */
@media (max-width:900px){

  .guideStepContent{
    grid-template-columns:1fr;
    row-gap:28px;
  }

  .guideStepContent > .guideStepText{
    grid-column:1;
    grid-row:1;
  }

  .guideStepContent > .guideExamples{
    grid-column:1;
    grid-row:2;
  }

  .guideStepContent > .guideImageLarge{
    grid-column:1;
    grid-row:3;
    margin-top:0;
  }

}

@media (max-width:520px){

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

}


/* =========================================================
   GUIDE — визуальные примеры эффектов
   ========================================================= */

.guideExamples{
  width:100%;
  max-width:none;
}

.guideExamplesHeader{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-bottom:14px;
}

.guideExamplesHeader strong{
  font-size:18px;
  line-height:1.2;
}

.guideExamplesHeader span{
  font-size:11px;
  color:#9b9694;
}

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

.guideEffectCard{
  overflow:hidden;
  border:1px solid rgba(30,25,25,.08);
  border-radius:16px;
  background:#fff;
  box-shadow:0 8px 24px rgba(40,25,25,.055);
}

.guideEffectVisual{
  position:relative;
  height:145px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#faf7f5;
}

.guideEffectArrow{
  position:absolute;
  right:10px;
  bottom:8px;
  font-size:22px;
  line-height:1;
  font-weight:700;
  color:#f16b87;
}

.guideEffectInfo{
  padding:10px 11px 12px;
}

.guideEffectInfo strong{
  display:block;
  font-size:11px;
  line-height:1.25;
  font-weight:750;
}

.guideEffectInfo span{
  display:block;
  margin-top:3px;
  font-size:9px;
  line-height:1.3;
  color:#9b9694;
}


/* Кадрирование */

.guideVisualCrop{
  background:#f9eef1;
}

.cropFrame{
  position:relative;
  width:100px;
  height:100px;
  border:2px dashed #f16b87;
  display:flex;
  align-items:center;
  justify-content:center;
}

.cropPhoto{
  width:68px;
  height:82px;
  border-radius:9px;
  background:linear-gradient(145deg,#f8b2c2,#ef6688);
  position:relative;
  transform:rotate(-4deg);
}

.cropPhoto i{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.72);
}

.cropPhoto i:first-child{
  width:18px;
  height:18px;
  left:13px;
  top:18px;
}

.cropPhoto i:last-child{
  width:28px;
  height:12px;
  right:10px;
  bottom:17px;
  border-radius:20px 20px 8px 8px;
}

.cropFrame > span{
  position:absolute;
  width:11px;
  height:11px;
  border-color:#171414;
  border-style:solid;
  z-index:2;
}

.cropFrame > span:nth-child(1){
  left:-3px;top:-3px;
  border-width:2px 0 0 2px;
}
.cropFrame > span:nth-child(2){
  right:-3px;top:-3px;
  border-width:2px 2px 0 0;
}
.cropFrame > span:nth-child(3){
  left:-3px;bottom:-3px;
  border-width:0 0 2px 2px;
}
.cropFrame > span:nth-child(4){
  right:-3px;bottom:-3px;
  border-width:0 2px 2px 0;
}


/* Удаление фона */

.guideVisualRemove{
  background:
    linear-gradient(45deg,#eee 25%,transparent 25%),
    linear-gradient(-45deg,#eee 25%,transparent 25%),
    linear-gradient(45deg,transparent 75%,#eee 75%),
    linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:16px 16px;
  background-position:0 0,0 8px,8px -8px,-8px 0;
}

.removeBefore,
.removeAfter{
  width:55px;
  height:76px;
  border-radius:14px;
  position:relative;
}

.removeBefore{
  background:#f49ab0;
  box-shadow:0 5px 12px rgba(0,0,0,.12);
}

.removeAfter{
  background:rgba(241,107,135,.13);
}

.removeBefore b,
.removeAfter b{
  position:absolute;
  display:block;
  border-radius:50%;
  background:#f16b87;
}

.removeBefore b:nth-child(1),
.removeAfter b:nth-child(1){
  width:20px;height:20px;
  left:17px;top:13px;
}

.removeBefore b:nth-child(2){
  width:31px;height:20px;
  left:11px;top:34px;
  border-radius:18px 18px 8px 8px;
}

.removeBefore b:nth-child(3){
  width:13px;height:13px;
  right:5px;bottom:6px;
}

.removeAfter b:nth-child(2){
  width:28px;height:19px;
  left:13px;top:35px;
  border-radius:18px 18px 8px 8px;
}


/* Круглое */

.guideVisualRound{
  background:#fff5f7;
}

.roundPhoto{
  width:94px;
  height:94px;
  border-radius:50%;
  background:linear-gradient(145deg,#f7a8bb,#ed6285);
  border:5px solid rgba(255,255,255,.9);
  box-shadow:
    0 8px 18px rgba(241,107,135,.2),
    0 0 0 2px rgba(241,107,135,.18);
  position:relative;
  overflow:hidden;
}

.roundPhoto i{
  position:absolute;
  display:block;
  border-radius:50%;
  background:rgba(255,255,255,.72);
}

.roundPhoto i:nth-child(1){
  width:24px;height:24px;
  left:18px;top:18px;
}

.roundPhoto i:nth-child(2){
  width:46px;height:25px;
  left:24px;bottom:17px;
  border-radius:30px 30px 12px 12px;
}

.roundPhoto i:nth-child(3){
  width:12px;height:12px;
  right:14px;top:25px;
}


/* Полароид */

.guideVisualPolaroid{
  background:#f6f3ef;
}

.polaroidDemo{
  width:82px;
  padding:7px 7px 13px;
  background:#fff;
  box-shadow:0 10px 20px rgba(40,30,25,.14);
  transform:rotate(-5deg);
}

.polaroidPhoto{
  width:68px;
  height:76px;
  background:linear-gradient(145deg,#f5a8b9,#ed6a89);
  position:relative;
  overflow:hidden;
}

.polaroidPhoto i{
  position:absolute;
  display:block;
  border-radius:50%;
  background:rgba(255,255,255,.65);
}

.polaroidPhoto i:first-child{
  width:20px;height:20px;
  left:13px;top:15px;
}

.polaroidPhoto i:last-child{
  width:38px;height:21px;
  left:19px;bottom:13px;
  border-radius:25px 25px 8px 8px;
}

.polaroidDemo > span{
  display:block;
  margin-top:7px;
  text-align:center;
  font-size:7px;
  color:#756d69;
}


/* Кинолента */

.guideVisualFilm{
  background:#f4f3f2;
}

.filmDemo{
  display:flex;
  gap:3px;
  padding:8px 5px;
  background:#202020;
  border-radius:5px;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.filmDemo span{
  width:39px;
  height:65px;
  display:block;
  background:linear-gradient(145deg,#f4a3b7,#ee6687);
  position:relative;
}

.filmDemo span:before,
.filmDemo span:after{
  content:"";
  position:absolute;
  left:4px;
  right:4px;
  height:5px;
  background:
    radial-gradient(circle,#fff 2px,transparent 2.5px);
  background-size:9px 5px;
}

.filmDemo span:before{top:-6px}
.filmDemo span:after{bottom:-6px}


/* Обводка */

.guideVisualOutline{
  background:#fff;
}

.outlineDemo{
  width:92px;
  height:92px;
  border-radius:50%;
  background:#f16b87;
  position:relative;
  box-shadow:0 0 0 3px #202020;
}

.outlineDemo i{
  position:absolute;
  width:25px;
  height:25px;
  left:21px;
  top:20px;
  border-radius:50%;
  background:#fff;
}

.outlineDemo:after{
  content:"";
  position:absolute;
  width:38px;
  height:22px;
  left:27px;
  bottom:19px;
  border-radius:25px 25px 9px 9px;
  background:#fff;
}


/* Мобильная версия */

@media (max-width:900px){

  .guideExamplesHeader{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }

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

}

@media (max-width:520px){

  .guideEffectsGrid{
    gap:9px;
  }

  .guideEffectVisual{
    height:125px;
  }

  .guideEffectInfo{
    padding:9px 9px 10px;
  }

  .guideEffectInfo strong{
    font-size:10px;
  }

  .guideEffectInfo span{
    font-size:8px;
  }

  .guideEffectArrow{
    font-size:19px;
    right:7px;
    bottom:6px;
  }

}


/* =========================================================
   GUIDE — ручное исправление фона
   ========================================================= */

.guideBgFixTips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:22px;
}

.guideBgFixTip{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:62px;
  padding:10px 11px;
  box-sizing:border-box;
  border:1px solid rgba(30,25,25,.07);
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(40,25,25,.045);
}

.guideBgFixTipIcon{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:#f8eef1;
  font-size:16px;
}

.guideBgFixTip div{
  min-width:0;
}

.guideBgFixTip strong{
  display:block;
  font-size:10px;
  line-height:1.2;
  font-weight:750;
}

.guideBgFixTip small{
  display:block;
  margin-top:3px;
  font-size:8px;
  line-height:1.3;
  color:#9b9694;
}

@media (max-width:900px){
  .guideBgFixTips{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .guideBgFixTips{
    grid-template-columns:1fr;
    gap:8px;
  }

  .guideBgFixTip{
    min-height:56px;
  }
}


/* =========================================================
   GUIDE — редактор макета
   ========================================================= */

.guideLayoutExamples{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:0;
}

.guideLayoutCard{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(30,25,25,.07);
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 22px rgba(40,25,25,.045);
}

.guideLayoutVisual{
  position:relative;
  height:116px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(135deg,#faf7f6,#f5efee);
}

.guideLayoutInfo{
  padding:11px 12px 13px;
}

.guideLayoutInfo strong{
  display:block;
  font-size:10px;
  line-height:1.25;
  font-weight:750;
}

.guideLayoutInfo small{
  display:block;
  margin-top:4px;
  color:#9b9694;
  font-size:8px;
  line-height:1.35;
}


/* Размер */

.guideLayoutBox{
  width:54px;
  height:66px;
  border-radius:9px;
  background:linear-gradient(145deg,#f2d9de,#d9b4bd);
  box-shadow:0 8px 18px rgba(80,45,55,.12);
}

.guideLayoutMeasure{
  position:absolute;
  right:24%;
  top:50%;
  transform:translateY(-50%);
  padding:5px 7px;
  border-radius:7px;
  background:#fff;
  color:#75696a;
  font-size:9px;
  font-weight:700;
  box-shadow:0 4px 12px rgba(40,25,25,.08);
}

.guideLayoutMeasure::before{
  content:"";
  position:absolute;
  left:-18px;
  top:50%;
  width:14px;
  border-top:1px dashed #b8abad;
}


/* Пропорции */

.guideRatioImage{
  width:76px;
  height:58px;
  border-radius:9px;
  background:linear-gradient(145deg,#ead1d6,#cdaeb7);
  box-shadow:0 8px 18px rgba(80,45,55,.12);
}

.guideRatioLink{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  box-shadow:0 4px 12px rgba(40,25,25,.1);
  font-size:13px;
}

.guideRatioArrow{
  position:absolute;
  right:20%;
  bottom:22px;
  color:#a88990;
  font-size:18px;
}


/* Лист */

.guideSheet{
  position:absolute;
  width:68px;
  height:88px;
  border-radius:4px;
  background:#fff;
  box-shadow:0 7px 18px rgba(40,25,25,.13);
}

.guideSheetElement{
  position:absolute;
  z-index:2;
  border-radius:5px;
  background:linear-gradient(145deg,#e7c8cf,#c99faa);
  box-shadow:0 3px 8px rgba(60,40,40,.1);
}

.guideSheetElement.one{
  width:20px;
  height:25px;
  margin-left:-25px;
  margin-top:-30px;
}

.guideSheetElement.two{
  width:24px;
  height:19px;
  margin-left:22px;
  margin-top:-5px;
}

.guideSheetElement.three{
  width:18px;
  height:22px;
  margin-left:-20px;
  margin-top:27px;
}


/* Перемещение */

.guideMoveElement{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:linear-gradient(145deg,#ead0d5,#cfaab3);
  color:#fff;
  font-size:22px;
  box-shadow:0 8px 18px rgba(80,45,55,.14);
}

.guideMoveArrow{
  position:absolute;
  color:#a88990;
  font-size:20px;
  margin-left:88px;
}

.guideMoveArrow.down{
  margin-left:0;
  margin-top:82px;
}


@media (max-width:900px){
  .guideLayoutExamples{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:520px){
  .guideLayoutExamples{
    grid-template-columns:1fr;
  }

  .guideLayoutVisual{
    height:105px;
  }
}


/* =========================================================
   GUIDE — Подготовьте изображения
   2 колонки × 3 ряда
   ========================================================= */

.guideStep#studio .guideExamples{
  width:100%;
  max-width:none;
  margin:0;
}

.guideStep#studio .guideEffectsGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  width:100%;
}

.guideStep#studio .guideEffectCard{
  min-width:0;
  min-height:112px;
  display:grid;
  grid-template-columns:118px minmax(0,1fr);
  align-items:center;
  gap:12px;
  padding:10px 12px;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:16px;
  border:1px solid rgba(30,25,25,.07);
  background:#fff;
  box-shadow:0 7px 22px rgba(40,25,25,.045);
}

.guideStep#studio .guideEffectVisual{
  width:118px;
  height:90px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  overflow:hidden;
}

.guideStep#studio .guideEffectInfo{
  min-width:0;
}

.guideStep#studio .guideEffectInfo strong{
  display:block;
  font-size:10px;
  line-height:1.25;
  font-weight:750;
}

.guideStep#studio .guideEffectInfo small{
  display:block;
  margin-top:5px;
  font-size:8px;
  line-height:1.35;
  color:#9b9694;
}

.guideStep#studio .guideEffectArrow{
  display:none;
}


/* На планшете оставляем две колонки */

@media (max-width:900px){
  .guideStep#studio .guideEffectsGrid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .guideStep#studio .guideEffectCard{
    grid-template-columns:90px minmax(0,1fr);
    min-height:96px;
    padding:8px;
    gap:9px;
  }

  .guideStep#studio .guideEffectVisual{
    width:90px;
    height:76px;
  }
}


/* На телефоне — одна колонка, чтобы карточки не стали слишком узкими */

@media (max-width:520px){
  .guideStep#studio .guideEffectsGrid{
    grid-template-columns:1fr;
  }

  .guideStep#studio .guideEffectCard{
    grid-template-columns:105px minmax(0,1fr);
    min-height:96px;
  }

  .guideStep#studio .guideEffectVisual{
    width:105px;
    height:78px;
  }
}


/* =========================================================
   GUIDE — Предпросмотр
   ========================================================= */

.guidePreviewExamples{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  width:100%;
  margin:0;
}

.guidePreviewCard{
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(30,25,25,.07);
  border-radius:16px;
  background:#fff;
  box-shadow:0 7px 22px rgba(40,25,25,.045);
}

.guidePreviewVisual{
  position:relative;
  height:108px;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#faf7f6,#f5efee);
}

.guidePreviewInfo{
  padding:11px 12px 13px;
}

.guidePreviewInfo strong{
  display:block;
  font-size:10px;
  line-height:1.25;
  font-weight:750;
}

.guidePreviewInfo small{
  display:block;
  margin-top:5px;
  color:#9b9694;
  font-size:8px;
  line-height:1.35;
}


/* Предпросмотр */

.guidePreviewEye span{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 6px 16px rgba(40,25,25,.1);
  font-size:20px;
}

.guidePreviewEye i{
  position:absolute;
  width:72px;
  height:42px;
  border:2px solid #d8b6bd;
  border-radius:50%;
  transform:rotate(-8deg);
}

.guidePreviewEye b{
  position:absolute;
  width:88px;
  height:1px;
  background:#d8b6bd;
  transform:rotate(28deg);
  opacity:.7;
}


/* Проверка */

.guidePreviewCheck{
  flex-direction:column;
  gap:5px;
}

.guidePreviewCheck span{
  position:absolute;
  left:22px;
  top:25px;
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#f3dce1;
  color:#9b6d78;
  font-size:15px;
  font-weight:800;
}

.guidePreviewCheck i{
  display:block;
  width:58px;
  height:6px;
  margin-left:28px;
  border-radius:5px;
  background:#ddc4c9;
}

.guidePreviewCheck i:nth-of-type(2){
  width:43px;
  opacity:.75;
}

.guidePreviewCheck i:nth-of-type(3){
  width:50px;
  opacity:.5;
}


/* Водяной знак */

.guidePreviewWatermark{
  flex-direction:column;
  gap:7px;
  transform:none;
}

.guidePreviewWatermark::before,
.guidePreviewWatermark::after{
  content:"";
  position:absolute;
  width:150%;
  height:22px;
  background:rgba(190,170,175,.08);
  transform:rotate(-22deg);
}

.guidePreviewWatermark::before{
  top:25px;
}

.guidePreviewWatermark::after{
  bottom:22px;
}

.guidePreviewWatermark span{
  position:relative;
  z-index:2;
  color:#b7abad;
  font-size:15px;
  font-weight:800;
  letter-spacing:2px;
}

.guidePreviewWatermark b{
  position:relative;
  z-index:2;
  color:#b7abad;
  font-size:7px;
  letter-spacing:1.5px;
  font-weight:700;
}


@media (max-width:900px){
  .guidePreviewExamples{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:620px){
  .guidePreviewExamples{
    grid-template-columns:1fr;
  }

  .guidePreviewVisual{
    height:92px;
  }
}


/* Реквизиты в футере */
.toppioFooterRequisites{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:6px 14px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(30,25,25,.07);
  color:#aaa4a2;
  font-size:11px;
  line-height:1.5;
  text-align:center;
}

.toppioFooterRequisites span,
.toppioFooterRequisites a{
  color:inherit;
  text-decoration:none;
}

.toppioFooterRequisites a:hover{
  color:#75696a;
}

@media (max-width:520px){
  .toppioFooterRequisites{
    flex-direction:column;
    gap:3px;
    font-size:10px;
  }
}