/* art60 — /obrazec/: шаги, тренажёр счёта, пересчёт, факторы */
a.birka{text-decoration:none;display:inline-block}
.birka[aria-current="true"]{background:var(--terra);color:#fff}
.ob-hero{position:relative;padding:24px 0 60px}
.ob-hero h1{font:600 clamp(36px,4.4vw,64px)/1.06 var(--serif);margin:0 0 26px;letter-spacing:-.015em}
.kroshki{display:flex;align-items:center;gap:10px;font-size:16px;margin:0 0 22px;color:var(--chern2)}
.kroshki a{color:var(--chern2)}
.kroshki svg{width:16px;height:16px;color:var(--terra)}
.r-ob{position:absolute;right:-30px;bottom:-90px;transform:rotate(-14deg);text-align:center}
.ob-hero .hero-ph img{aspect-ratio:1.35}
.r-ugol{position:absolute;right:-48px;bottom:-40px;background:#F2E8D6;padding:26px 20px 18px;box-shadow:var(--ten);rotate:6deg;font-size:27px;color:var(--terra);margin:0;text-align:center}

/* шаги */
.shagi{padding:40px 0 50px}
.lenta-shagov{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:46px;counter-reset:s;position:relative}
.lenta-shagov li{counter-increment:s;background:var(--list);box-shadow:var(--ten);padding:12px 12px 20px;position:relative}
.lenta-shagov li:nth-child(odd){rotate:-.7deg}.lenta-shagov li:nth-child(even){rotate:.6deg}
.lenta-shagov li::before{content:counter(s);position:absolute;left:4px;top:4px;z-index:2;width:44px;height:44px;border-radius:50%;
  background:var(--terra);color:#fff;font:600 24px/44px var(--serif);text-align:center;box-shadow:0 2px 4px rgba(0,0,0,.2)}
.lenta-shagov li+li::after{content:"→";position:absolute;left:-38px;top:30%;font:500 30px var(--sans);color:var(--terra)}
.lenta-shagov figure{margin:0 0 14px;overflow:hidden}
.lenta-shagov img{aspect-ratio:1.45;object-fit:cover;width:100%;transition:scale .6s}
.lenta-shagov li:hover img{scale:1.05}
.lenta-shagov h3{font:600 23px/1.2 var(--serif);margin:0 4px 6px}
.lenta-shagov p{margin:0 4px;font-size:17px;line-height:1.45}

/* тренажёр */
.schet{position:relative;padding:60px 0;margin:10px 0}
.schet::before{content:"";position:absolute;inset:0 1%;background:url(/assets/img/obr-poloska.webp) 0 0/100% 100% no-repeat;z-index:-1;filter:drop-shadow(0 4px 8px rgba(58,42,34,.16))}
.schet-in{display:grid;grid-template-columns:1.25fr 1fr;gap:50px;align-items:start}
.foto-sch{position:relative;user-select:none;-webkit-user-select:none;touch-action:none;box-shadow:var(--ten);border:10px solid var(--list);rotate:-.6deg}
.foto-sch img{width:100%;aspect-ratio:1.5;object-fit:cover;pointer-events:none}
.metki{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.metki circle{fill:var(--terra);stroke:#fff;stroke-width:1.5}
.lin{position:absolute;cursor:grab;outline:none;
  background:linear-gradient(180deg,#E9C996,#D6AF74);box-shadow:0 4px 8px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.5)}
.lin:active{cursor:grabbing}
.lin:focus-visible{box-shadow:0 0 0 3px var(--terra),0 4px 8px rgba(0,0,0,.3)}
.lin-g{height:46px;width:var(--d,40%);left:var(--x,20%);top:var(--y,55%)}
.lin-v{width:46px;height:var(--d,40%);left:var(--x,80%);top:var(--y,10%)}
.lin-sh{position:absolute;inset:0;pointer-events:none}
.lin-g .lin-sh{background:
  repeating-linear-gradient(90deg,#4A3524 0 1.5px,transparent 1.5px 10%) 0 0/100% 18px no-repeat,
  repeating-linear-gradient(90deg,#4A3524 0 1px,transparent 1px 2%) 0 0/100% 9px no-repeat}
.lin-v .lin-sh{background:
  repeating-linear-gradient(180deg,#4A3524 0 1.5px,transparent 1.5px 10%) 0 0/18px 100% no-repeat,
  repeating-linear-gradient(180deg,#4A3524 0 1px,transparent 1px 2%) 0 0/9px 100% no-repeat}
.lin-sh::after{position:absolute;font:600 12px var(--sans);color:#4A3524}
.lin-g .lin-sh::after{content:"0 · · · · 5 · · · · 10 см";left:6px;bottom:4px;letter-spacing:.06em}
.lin-v .lin-sh::after{content:"10 см";right:4px;bottom:6px;writing-mode:vertical-rl}
.r-centr{position:absolute;right:-40px;bottom:-40px;background:#F2E8D6;padding:24px 18px 16px;box-shadow:var(--ten);rotate:7deg;font-size:26px;text-align:center;color:var(--terra)}
.sch-pod{font-size:15px;color:var(--chern2);margin:22px 0 0}
.sch-r{position:relative;padding-top:20px}
.sch-polya{background:var(--list);box-shadow:var(--ten);padding:24px 26px;display:grid;gap:14px}
.sch-polya label{display:grid;grid-template-columns:1fr 120px 70px;align-items:center;gap:12px;font-size:18px}
.sch-polya input,.pe-b input{font:500 21px var(--sans);color:var(--chern);border:1px solid #D9CBB3;background:#fff;padding:8px 12px;width:100%;border-radius:2px}
.sch-polya input:focus,.pe-b input:focus{outline:2px solid var(--terra);border-color:var(--terra)}
.sch-polya span{color:var(--chern2)}
.knopka-svetl{justify-self:start;border:1.5px solid var(--shalf2);background:none;color:var(--shalf2);padding:10px 18px;font:600 16px var(--sans);cursor:pointer;transition:background .25s,color .25s}
.knopka-svetl:hover{background:var(--shalf2);color:#fff}
.sch-otvet{margin:0;font-size:16px;color:var(--chern2);min-height:1.4em}
.sch-otvet b{color:var(--terra2)}
.sch-itog{background:var(--list);box-shadow:var(--ten);margin-top:-2px;padding:20px 26px 26px;position:relative;border-top:1px dashed #D9CBB3}
.sch-h{font:600 20px var(--serif);margin:0 0 4px}
.plotn{font:500 84px/1 var(--ruka);color:var(--terra);margin:0}
.plotn b{font-weight:400;display:inline-block;min-width:1.2em;transition:scale .3s}
.plotn-sub{display:flex;gap:70px;margin:6px 0 0 6px;font:400 19px/1.1 var(--ruka);color:var(--chern2)}
.klubok{position:absolute;right:20px;bottom:10px;width:120px;rotate:-10deg}
.r-chisla{position:absolute;right:-60px;top:250px;background:#F2E8D6;padding:20px 16px;box-shadow:var(--ten);rotate:8deg;font-size:23px;z-index:2;width:200px;text-align:center}

/* пересчёт */
.perescht{padding:60px 0 40px}
.pe-in{display:grid;grid-template-columns:1.35fr 1fr;gap:50px;align-items:start}
.pe-kol{display:grid;grid-template-columns:1fr 40px 1fr;gap:16px;align-items:center}
.pe-b{background:var(--list);box-shadow:var(--ten);padding:20px 22px 22px;display:grid;gap:12px}
.pe-b legend{float:left;width:100%;font:600 24px var(--serif);margin:0 0 4px}
.pe-b label{display:grid;grid-template-columns:1fr 96px;align-items:center;gap:10px;font-size:17px}
.pe-b .pe-n{grid-template-columns:1fr 96px 54px;border-top:1px dashed #D9CBB3;padding-top:12px}
.pe-b .pe-n span{color:var(--chern2);font-size:15px}
.pe-str{width:40px;color:var(--terra)}
.pe-itog{margin:0;font-size:19px;display:flex;align-items:center;gap:12px;border-top:1px dashed #D9CBB3;padding-top:12px}
.pe-itog+.pe-itog{border-top:0;padding-top:0}
.pe-itog b{font:600 30px/1 var(--serif);color:var(--terra2);background:#F4DCCB;border:1.5px solid var(--terra);padding:6px 16px;min-width:80px;text-align:center;display:inline-block;transition:scale .3s}
.pe-itog b.pryg,.plotn b.pryg{scale:1.15}
.r-prop{position:relative;margin:22px 0 0 60px;font-size:24px;transform:rotate(-3deg)}
.r-prop .str{position:absolute;left:-60px;top:-22px;width:56px;height:30px;color:var(--terra);transform:scaleY(-1) rotate(20deg)}
.pe-vazhno{font-size:16px;color:var(--chern2);margin:22px 0 0;border-left:3px solid var(--ohra);padding-left:14px}
.pe-shema{margin:0;background:#F2E8D6;box-shadow:var(--ten);padding:34px 22px 18px;position:relative;rotate:1.5deg}
.pe-shema figcaption{text-align:center;font-size:25px;margin-bottom:6px}
#pe-svg{width:100%;height:auto;display:block}
#pe-svg .igla{stroke:#A97A45;stroke-width:4;stroke-linecap:round}
#pe-svg .podp{font:400 20px var(--ruka);fill:var(--chern)}
#pe-svg .podp2{font:400 20px var(--ruka);fill:var(--terra)}
#pe-svg .polotno{transition:width .6s cubic-bezier(.2,.7,.3,1),x .6s cubic-bezier(.2,.7,.3,1)}

/* факторы */
.faktory{padding:50px 0}
.fk{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.fk article{background:#F7F0E3;box-shadow:var(--ten);padding:18px;display:grid;grid-template-columns:140px 1fr;gap:18px;position:relative;transition:rotate .4s,translate .4s}
.fk article:nth-child(1){rotate:-.8deg}.fk article:nth-child(2){rotate:.6deg}.fk article:nth-child(3){rotate:-.4deg}
.fk article:hover{rotate:0deg;translate:0 -4px}
.fk img{width:140px;aspect-ratio:1;object-fit:cover}
.fk h3{font:600 23px var(--serif);margin:4px 0 6px}
.fk p{margin:0;font-size:16px;line-height:1.45}

@media (max-width:1000px){
  .schet-in,.pe-in{grid-template-columns:1fr}
  .lenta-shagov{grid-template-columns:1fr 1fr}
  .lenta-shagov li+li::after{display:none}
  .fk{grid-template-columns:1fr}
  .r-chisla{position:static;rotate:-2deg;margin:24px auto 0}
}
@media (max-width:640px){
  .r-ob{position:static;transform:rotate(-4deg);margin:20px 0 0 auto;width:max-content}
  .r-ugol{right:-6px;bottom:-30px;font-size:21px;padding:20px 14px 12px}
  .lenta-shagov{grid-template-columns:1fr;gap:22px}
  .r-centr{display:none}
  .sch-polya label{grid-template-columns:1fr 90px 54px;font-size:16px}
  .plotn{font-size:64px}
  .pe-kol{grid-template-columns:1fr}
  .pe-str{rotate:90deg;justify-self:center}
  .r-prop{margin-left:0;font-size:21px}.r-prop .str{display:none}
  .fk article{grid-template-columns:100px 1fr}.fk img{width:100px}
  .lin-g{height:38px}.lin-v{width:38px}
}
.ob-hero,.shagi,.faktory{position:relative}.ob-hero>.wrap,.shagi>.wrap,.faktory>.wrap{position:relative;z-index:1}
.shagi{padding:30px 0 40px}.faktory{padding:36px 0}