/* Урок5 — дизайн-система «Конспект відмінника» */
:root{
  --mat:#E6E9EC; --line:#CDD3D9; --ink:#14141A; --paper:#fff;
  --yellow:#FFD83D; --pink:#FF7BA3; --blue:#2543F5; --mint:#BDF0D5; --pen:#D8201A; --grey:#565B66;
  --s1:6px; --s2:14px; --s3:26px; --s4:44px; --s5:76px; --s6:128px;
  --torn-a:polygon(0 4%,4% 0,9% 3%,15% 0,22% 4%,30% 1%,38% 4%,47% 0,55% 3%,63% 0,72% 4%,80% 1%,88% 4%,95% 0,100% 3%,99% 22%,100% 41%,98% 60%,100% 79%,99% 96%,93% 100%,85% 97%,76% 100%,68% 97%,58% 100%,49% 96%,40% 100%,31% 97%,22% 100%,13% 96%,5% 100%,0 97%,1% 74%,0 50%,2% 26%);
  --torn-b:polygon(1% 0,100% 2%,98% 15%,100% 31%,99% 48%,100% 66%,98% 83%,100% 100%,86% 97%,74% 100%,61% 96%,48% 100%,36% 97%,24% 100%,12% 96%,0 99%,2% 82%,0 63%,2% 45%,0 27%,2% 12%);
  --torn-c:polygon(0 16px,7% 5px,16% 18px,26% 2px,37% 15px,49% 0,60% 13px,71% 3px,83% 16px,92% 5px,100% 18px,100% 100%,0 100%);
  --shadow:drop-shadow(0 12px 16px rgba(20,20,26,.2));
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;overflow-x:hidden}
body{font-family:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--mat);
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:40px 40px;line-height:1.5;font-size:17px;overflow-x:hidden}
a{color:inherit}
.hand{font-family:Caveat,"Segoe Script","Comic Sans MS",cursive;font-weight:700;line-height:1.05}
.wrap{max-width:1280px;margin:0 auto;padding:0 var(--s3)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:12px 18px;z-index:99;font-weight:800}
.skip:focus{left:0}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) 0}
.logo{font-weight:900;font-size:21px;letter-spacing:-.02em;text-decoration:none;background:var(--ink);color:#fff;padding:9px 16px 10px;transform:rotate(-2deg);display:inline-block;clip-path:var(--torn-b)}
.logo b{color:var(--yellow)}
.nav{display:flex;align-items:center;gap:var(--s1) var(--s3);font-weight:600;font-size:16px;flex-wrap:wrap}
.nav a{text-decoration:none;padding:4px 2px;min-height:44px;display:inline-flex;align-items:center;background:linear-gradient(var(--yellow),var(--yellow)) 0 78%/0 8px no-repeat;transition:background-size .25s}
.nav a:hover,.nav a[aria-current=page]{background-size:100% 8px}
.nav .in{font-family:Caveat,cursive;font-size:26px;font-weight:700;color:var(--blue);background:none;line-height:1}
.nav .in:hover{text-decoration:underline wavy}

/* breadcrumbs */
.crumbs{font-size:16px;font-weight:600;padding:var(--s2) 0 0}
.crumbs ol{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 10px;align-items:center}
.crumbs li+li::before{content:"→";margin-right:10px;color:var(--grey)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px}
.crumbs [aria-current]{color:var(--grey)}

/* hero */
.hero{display:grid;grid-template-columns:7fr 5fr;gap:var(--s4);align-items:center;padding:var(--s3) 0 var(--s6)}
.kicker{display:inline-block;background:var(--mint);padding:6px 12px;font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-1.5deg);margin-bottom:var(--s3);line-height:1.3}
h1{font-weight:900;line-height:.9;letter-spacing:-.055em}
h1 .kicker{display:block;width:fit-content;letter-spacing:.06em}
.h1-home{font-size:clamp(58px,7.3vw,112px);white-space:nowrap}
.h1-home .kicker{white-space:normal}
.h1-page{font-size:clamp(40px,5.4vw,84px);max-width:13em;line-height:.95;letter-spacing:-.05em}
.strip{display:inline-block;background:var(--yellow);padding:.02em .14em .1em;margin-left:-.08em;transform:rotate(-2.5deg);clip-path:var(--torn-b)}
.h1-page .strip{transform:rotate(-1.5deg);margin-left:0}
.strip,.h2 mark{white-space:nowrap}
.x{position:relative;display:inline-block;color:var(--grey)}
.x svg{position:absolute;left:-4%;top:38%;width:108%;height:.34em;overflow:visible}
.lead{max-width:32em;margin-top:var(--s4);font-size:19px}
.lead b{font-weight:800}
.act{display:flex;align-items:center;gap:var(--s3);margin-top:var(--s4);flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;background:var(--ink);color:#fff;font-weight:800;font-size:20px;text-decoration:none;padding:20px 30px 21px;transform:rotate(-1deg);box-shadow:7px 7px 0 var(--pink);transition:transform .18s,box-shadow .18s;border:0;cursor:pointer;font-family:inherit}
.btn:hover{transform:rotate(0) translate(-3px,-3px);box-shadow:10px 10px 0 var(--yellow)}
.btn:active{transform:translate(4px,4px);box-shadow:3px 3px 0 var(--pink)}
.btn svg{width:22px;height:22px;flex:none}
.act .hand{font-size:27px;color:var(--blue);transform:rotate(-3deg);max-width:9em}
.act .arrow{width:56px;height:34px;flex:none;margin-right:-12px}
.page-hero{padding:var(--s3) 0 var(--s5)}
.page-hero .kicker{margin-top:var(--s3)}

/* collage pile */
.pile{position:relative;aspect-ratio:1/1.22;container-type:inline-size}
.scrap{position:absolute;filter:drop-shadow(0 .9cqw 1.2cqw rgba(20,20,26,.22));transition:transform .3s}
.scrap:hover{transform:rotate(0) scale(1.03);z-index:9}
.tape::before,.tape::after{content:"";position:absolute;width:19cqw;height:5.2cqw;background:rgba(255,216,61,.72);top:-2.4cqw;left:50%;transform:translateX(-50%) rotate(-4deg);z-index:2;border-left:2px dotted rgba(0,0,0,.12);border-right:2px dotted rgba(0,0,0,.12)}
.tape::after{display:none}
.tape.two::before{left:1%;transform:rotate(-38deg)}
.tape.two::after{display:block;left:auto;right:-6%;transform:rotate(34deg)}
.p-prompt{left:0;top:5%;width:80%;transform:rotate(-3.5deg)}
.p-prompt .in{background:var(--paper);clip-path:var(--torn-a);padding:11cqw 6cqw 15cqw}
.p-prompt small{display:block;font-size:2.6cqw;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#6a6f78;margin-bottom:2.5cqw}
.p-prompt p{font-size:5cqw;font-weight:600;line-height:1.75}
.p-prompt s{text-decoration:none;position:relative;color:#7a7f88}
.p-prompt s::after{content:"";position:absolute;left:-2%;right:-2%;top:52%;height:.5cqw;background:var(--pen);transform:rotate(-2deg);border-radius:9px}
.p-prompt .fix{position:absolute;font-size:6.6cqw;color:var(--pen);transform:rotate(-5deg)}
.p-prompt .f1{right:22%;top:5%}
.p-prompt .f2{left:8%;bottom:10.5%;transform:rotate(-2deg)}
.p-mcp{right:0;top:0;width:27%;aspect-ratio:1;border-radius:50%;background:var(--blue);color:#fff;transform:rotate(12deg);display:grid;place-items:center;text-align:center;border:1.2cqw solid #fff;filter:drop-shadow(0 .8cqw 1cqw rgba(20,20,26,.3))}
.p-mcp svg{width:44%;display:block;margin:0 auto}
.p-mcp b{font-weight:900;font-size:6cqw;letter-spacing:-.03em;line-height:1;display:block}
.p-mcp i{font-style:normal;font-size:2.1cqw;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.p-film{left:14%;top:55%;width:86%;transform:rotate(4deg)}
.p-film .in{background:var(--ink);padding:3.2cqw 2.4cqw;display:grid;grid-template-columns:repeat(4,1fr);gap:1.6cqw;
  background-image:radial-gradient(circle,var(--mat) 0 .7cqw,transparent .75cqw),radial-gradient(circle,var(--mat) 0 .7cqw,transparent .75cqw);background-size:4cqw 3.2cqw;background-position:0 0,0 100%;background-repeat:repeat-x}
.p-film svg{display:block;width:100%;height:auto}
.p-film .hand{position:absolute;left:4%;bottom:-8.5cqw;font-size:6cqw;color:var(--ink);transform:rotate(-3deg);white-space:nowrap}
.p-wave{left:0;top:88%;width:54%;transform:rotate(-5deg)}
.p-wave .in{background:var(--pink);clip-path:var(--torn-b);padding:4cqw 5cqw 4.5cqw}
.p-wave svg{display:block;width:100%;height:9cqw}
.p-wave span{display:flex;justify-content:space-between;font-size:2.7cqw;font-weight:800;margin-top:1.5cqw}
.p-note{right:1%;top:89%;width:36%;transform:rotate(6deg)}
.p-note .in{background:var(--yellow);padding:5cqw 4cqw 6cqw;font-size:7.4cqw;clip-path:polygon(0 0,100% 0,100% 82%,84% 100%,0 100%)}
.p-note .in em{font-style:normal;color:var(--pen)}

/* sections */
section{padding:var(--s5) 0 var(--s6);position:relative}
.h2{font-weight:900;font-size:clamp(40px,6.2vw,92px);line-height:.9;letter-spacing:-.05em;max-width:11em}
.h2.sm{font-size:clamp(34px,4.6vw,68px);line-height:.95}
.h2 mark{background:var(--pink);color:inherit;padding:0 .12em .06em;display:inline-block;transform:rotate(-1.5deg);clip-path:var(--torn-b)}
.h2 mark.y{background:var(--yellow)}
.h2 mark.m{background:var(--mint)}
.h2 + .hand{font-size:34px;color:var(--blue);margin-top:var(--s3);transform:rotate(-1.5deg);display:block;width:fit-content}
.answer{font-size:19px;max-width:38em;margin-top:var(--s4)}
.answer b{font-weight:800}
.prose{max-width:40em}
.prose p+p{margin-top:var(--s2)}

/* steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4);margin-top:var(--s5);list-style:none;padding:0;counter-reset:st}
.steps li{position:relative;padding:30px 26px 34px;filter:drop-shadow(0 8px 10px rgba(20,20,26,.18));counter-increment:st}
.steps li::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--paper)}
.steps li:nth-child(1){transform:rotate(-2deg)} .steps li:nth-child(1)::before{background:var(--yellow);clip-path:polygon(0 0,100% 0,100% 84%,86% 100%,0 100%)}
.steps li:nth-child(2){transform:rotate(1.5deg);margin-top:30px} .steps li:nth-child(2)::before{clip-path:var(--torn-a)}
.steps li:nth-child(3){transform:rotate(-1deg)} .steps li:nth-child(3)::before{background:var(--mint);clip-path:var(--torn-b)}
.steps .n{font-weight:900;font-size:64px;letter-spacing:-.06em;line-height:.8;display:block;margin-bottom:14px}
.steps h3{font-weight:900;font-size:28px;letter-spacing:-.04em;line-height:1}
.steps p{font-size:16px;margin-top:10px}
.steps .hand{font-size:25px;color:var(--pen);display:block;margin-top:12px}

/* inside */
.inside{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--s3);margin-top:var(--s5);align-items:start}
.bit{position:relative;filter:drop-shadow(0 8px 10px rgba(20,20,26,.18));transition:transform .25s}
.bit:hover{transform:rotate(0) translateY(-6px)}
.bit .in{padding:26px 24px 30px;min-height:190px}
.bit h3{font-weight:900;font-size:30px;letter-spacing:-.04em;line-height:1}
.bit h3 a{text-decoration-thickness:3px;text-underline-offset:4px}
.bit p{font-size:16px;margin-top:10px;max-width:22em}
.bit .hand{font-size:25px;display:block;margin-top:12px}
.bit svg.ic{width:56px;height:56px;margin-bottom:16px;display:block}
.bit svg.wv{width:120px;height:40px}
.b1{grid-column:1/5;transform:rotate(-2deg)} .b1 .in{background:var(--ink);color:#fff;clip-path:var(--torn-a);padding-top:34px}
.b2{grid-column:5/8;transform:rotate(2.5deg);margin-top:40px} .b2 .in{background:var(--paper);clip-path:polygon(0 0,82% 0,100% 16%,100% 100%,0 100%)}
.b3{grid-column:8/13;transform:rotate(-1deg)} .b3 .in{background:var(--pink);clip-path:var(--torn-b)}
.b4{grid-column:2/6;transform:rotate(1.5deg)} .b4 .in{background:var(--paper);background-image:repeating-linear-gradient(transparent 0 27px,#c9d4ff 27px 28px);clip-path:var(--torn-c);padding-top:62px}
.b4 h3{line-height:28px;position:relative;top:-5px} .b4 p{line-height:28px;margin-top:0} .b4 .hand{line-height:28px;margin-top:0}
.b5{grid-column:6/9;transform:rotate(-3deg);margin-top:-30px} .b5 .in{background:var(--paper);padding:14px 14px 22px}
.b5 .pic{display:block;width:100%;height:auto;margin-bottom:12px}
.b6{grid-column:9/13;transform:rotate(2deg);margin-top:26px} .b6 .in{background:var(--blue);color:#fff;clip-path:var(--torn-a);padding-top:34px}
.b1 .hand,.b6 .hand{color:var(--yellow)} .b2 .hand,.b4 .hand{color:var(--pen)}
.b1 :focus-visible,.b6 :focus-visible{outline-color:var(--yellow)}
.tag{display:inline-block;font-size:16px;font-weight:800;padding:2px 10px;border:1.5px dashed currentColor;margin-bottom:14px}
.tag.on{background:var(--yellow);color:var(--ink);border-style:solid;border-color:var(--ink)}
.more{display:inline-flex;align-items:center;min-height:44px;font-weight:800;margin-top:8px}

/* programme */
.prog{display:grid;grid-template-columns:4fr 8fr;gap:var(--s4);align-items:start}
.prog .h2{font-size:clamp(40px,4.7vw,70px)}
.star{width:190px;aspect-ratio:1;background:var(--yellow);display:grid;place-items:center;text-align:center;font-weight:900;font-size:19px;line-height:1;letter-spacing:-.03em;transform:rotate(-12deg);margin-top:var(--s4);
  clip-path:polygon(50% 0,61% 12%,77% 7%,80% 23%,96% 27%,90% 42%,100% 55%,87% 64%,90% 80%,74% 81%,66% 96%,52% 88%,38% 98%,31% 83%,15% 83%,17% 67%,3% 58%,13% 45%,5% 30%,21% 25%,23% 9%,39% 13%)}
.star b{display:block;font-size:64px;letter-spacing:-.06em}
.sheet{position:relative;transform:rotate(.8deg);filter:var(--shadow)}
.sheet>ol,.sheet>.pad{list-style:none;padding:34px 34px 46px 84px;background:var(--paper);clip-path:var(--torn-c);
  background-image:linear-gradient(90deg,transparent 62px,#ff9db8 62px 64px,transparent 64px),radial-gradient(circle at 30px 50%,var(--mat) 0 9px,transparent 10px);background-size:auto,100% 120px;background-repeat:no-repeat,space}
.sheet>ol>li{display:grid;grid-template-columns:64px 1fr auto;gap:var(--s2) var(--s3);align-items:baseline;padding:18px 0;border-bottom:1.5px solid #c9d4ff}
.sheet>ol>li:last-child{border:0}
.sheet .n{font-weight:900;font-size:44px;letter-spacing:-.06em;line-height:.8}
.sheet h3{font-weight:800;font-size:24px;letter-spacing:-.03em;line-height:1.1}
.sheet p{font-size:16px;color:#3d414a;margin-top:4px}
.sheet li>.hand{font-size:25px;color:var(--blue);transform:rotate(-3deg);max-width:8.5em;text-align:right}
.sheet>ol>li:nth-child(even)>.hand{color:var(--pen);transform:rotate(2deg)}
.sheet .les{list-style:none;padding:0;margin-top:10px;font-size:16px}
.sheet .les li{padding:3px 0 3px 26px;position:relative}
.sheet .les li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:12px;border:2px solid var(--ink);background:var(--yellow)}
.next{margin-top:var(--s4);font-size:16px;max-width:19em;display:flex;flex-wrap:wrap;gap:8px}
.next b{flex:0 0 100%;font-weight:800}
.next span{display:inline-block;border:1.5px dashed var(--ink);padding:3px 10px;font-weight:600;background:rgba(255,255,255,.6)}

/* facts strip */
.facts{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin-top:var(--s4)}
.facts li{background:var(--paper);border:2.5px solid var(--ink);padding:10px 16px;font-weight:600;font-size:16px;line-height:1.2}
.facts li:nth-child(odd){transform:rotate(-1.2deg)} .facts li:nth-child(even){transform:rotate(1deg)}
.facts b{display:block;font-weight:900;font-size:30px;letter-spacing:-.04em}

/* checklist */
.check{list-style:none;padding:0;margin-top:var(--s4);display:grid;grid-template-columns:1fr 1fr;gap:var(--s2) var(--s4);max-width:62em;font-size:18px;font-weight:600}
.check li{padding-left:40px;position:relative}
.check li::before{content:"✓";position:absolute;left:0;top:-4px;font-family:Caveat,cursive;font-size:38px;line-height:1;color:var(--pen)}

/* pay */
.pay{display:grid;grid-template-columns:5fr 6fr;gap:var(--s5);margin-top:var(--s5);align-items:start}
.receipt{padding:38px 34px 60px;transform:rotate(-2deg);position:relative;filter:var(--shadow)}
.receipt .paper{position:absolute;inset:0;background:var(--paper);z-index:-1;clip-path:polygon(0 0,100% 0,100% 97%,95% 100%,90% 97%,85% 100%,80% 97%,75% 100%,70% 97%,65% 100%,60% 97%,55% 100%,50% 97%,45% 100%,40% 97%,35% 100%,30% 97%,25% 100%,20% 97%,15% 100%,10% 97%,5% 100%,0 97%)}
.receipt h3,.pass h3{font-size:16px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.receipt ul{list-style:none;padding:0;margin:20px 0;border-top:2px dashed var(--ink);border-bottom:2px dashed var(--ink)}
.receipt li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:16px;font-weight:600}
.receipt li span:last-child{font-weight:800;white-space:nowrap}
.sum{display:flex;justify-content:space-between;align-items:baseline;font-weight:900;gap:12px;flex-wrap:wrap}
.sum b{font-size:64px;letter-spacing:-.06em;line-height:1}
.sum small{font-size:18px;font-weight:800}
.receipt>.hand{position:absolute;right:-18px;top:-26px;font-size:30px;color:var(--pen);transform:rotate(8deg);background:var(--yellow);padding:4px 14px 8px}
.pass{background:var(--mint);padding:38px 38px 40px;transform:rotate(1.5deg);position:relative;filter:var(--shadow);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent 17px,#000 18px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 17px,#000 18px) 100% 0/51% 100% no-repeat;mask:radial-gradient(circle at 0 50%,transparent 17px,#000 18px) 0 0/51% 100% no-repeat,radial-gradient(circle at 100% 50%,transparent 17px,#000 18px) 100% 0/51% 100% no-repeat}
.pass .big{font-weight:900;font-size:clamp(72px,9vw,128px);letter-spacing:-.07em;line-height:.85;margin-top:14px}
.pass .big small{font-size:.22em;letter-spacing:-.02em;font-weight:800;margin-left:.3em}
.pass p{margin-top:18px;max-width:26em}
.pass .hand{font-size:29px;color:var(--blue);margin-top:14px;transform:rotate(-2deg)}
.lnk{display:inline-flex;align-items:center;min-height:48px;margin-top:24px;font-weight:800;font-size:17px;text-decoration:none;border:2.5px solid var(--ink);padding:10px 20px;background:var(--paper);transition:background .15s,color .15s,transform .15s}
.lnk:hover{background:var(--ink);color:#fff;transform:rotate(-1deg)}
.fine{font-size:16px;color:#3d414a;margin-top:var(--s4);max-width:44em}

/* compare table */
.cmp{width:100%;border-collapse:collapse;font-size:16px}
.cmp caption{text-align:left;font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding-bottom:12px}
.cmp th,.cmp td{text-align:left;padding:12px 10px 12px 0;border-bottom:1.5px solid #c9d4ff;vertical-align:top}
.cmp thead th{font-weight:900;font-size:20px;letter-spacing:-.03em;border-bottom:2px dashed var(--ink)}
.cmp tbody th{font-weight:600;color:#3d414a}
.cmp td{font-weight:800}

/* faq */
.faq{margin-top:var(--s5);max-width:980px}
.faq details{border-bottom:1.5px solid #c9d4ff}
.faq details:last-child{border:0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:var(--s3);align-items:center;font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.2;padding:16px 0;min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:20px;height:20px;flex:none;transition:transform .2s;background:linear-gradient(var(--pen),var(--pen)) center/100% 3px no-repeat,linear-gradient(var(--pen),var(--pen)) center/3px 100% no-repeat;border-radius:2px;transform:rotate(-4deg)}
.faq details[open] summary::after{transform:rotate(41deg)}
.faq details p{padding:0 0 18px;max-width:42em;margin:0;font-size:17px}

/* dark band */
.auth{background:var(--ink);color:#fff;clip-path:var(--torn-c);padding:calc(var(--s6) - 20px) 0 var(--s5);margin-top:var(--s4)}
.auth .wrap{display:grid;grid-template-columns:7fr 5fr;gap:var(--s5);align-items:end}
.auth .h2 mark{background:var(--yellow);color:var(--ink)}
.auth p{font-size:18px;color:#e4e6ea}
.auth .hand{font-size:34px;color:var(--yellow);display:block;margin-bottom:var(--s2);transform:rotate(-2deg);width:fit-content}
.auth .lnk{background:transparent;color:#fff;border-color:#fff}
.auth .lnk:hover{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.auth :focus-visible,footer :focus-visible{outline-color:var(--yellow)}
.auth .btn{box-shadow:7px 7px 0 var(--pink);background:var(--yellow);color:var(--ink);margin-top:24px}
.auth .btn:hover{box-shadow:10px 10px 0 #fff}
footer{background:var(--ink);color:#c9ccd3;font-size:16px;padding:var(--s3) 0 var(--s4)}
footer .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s2) var(--s3);flex-wrap:wrap}
footer .wrap::before{content:"";flex:0 0 100%;border-top:1px dashed #555a66;margin-bottom:var(--s1)}
footer a{text-decoration:none;margin-right:var(--s3);display:inline-flex;align-items:center;min-height:44px}
footer a:hover{color:var(--yellow)}
footer b{color:#fff}

/* form */
.formgrid{display:grid;grid-template-columns:7fr 4fr;gap:var(--s5);align-items:start}
.form{display:grid;gap:var(--s3)}
.form label{display:grid;gap:6px;font-weight:800;font-size:17px}
.form input,.form select,.form textarea{font:inherit;font-weight:400;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:0;padding:12px 14px;min-height:50px;width:100%}
.form textarea{min-height:120px;resize:vertical}
.form .btn{justify-self:start;margin-top:var(--s1)}
.side{background:var(--yellow);padding:28px 26px 40px;transform:rotate(2deg);filter:var(--shadow);clip-path:polygon(0 0,100% 0,100% 88%,86% 100%,0 100%)}
.side h2{font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1.05}
.side ol{padding-left:22px;margin-top:14px;display:grid;gap:10px;font-weight:600}
.side .hand{font-size:27px;color:var(--pen);margin-top:16px;display:block}

/* admin (admin/index.html) */
.adm button{font-family:inherit;cursor:pointer}
.adm button.lnk{margin-top:0}
.adm-bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3)}
.adm-status{margin-top:var(--s3);font-weight:600;font-size:16px;background:var(--mint);padding:10px 16px;max-width:60em}
.adm-status.bad{background:var(--paper);border:2.5px solid var(--pen);color:var(--pen)}
.adm-grid{display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:auto 1fr;gap:var(--s4) var(--s5);align-items:start;margin-top:var(--s4)}
.adm-nav{grid-column:1;grid-row:1}
#adm-edit{grid-column:2;grid-row:1/span 2}
#adm-edit>.form{max-width:640px}
.adm-nav h2{font-weight:900;font-size:26px;letter-spacing:-.03em}
.adm-nav ol{list-style:none;padding:0;margin:var(--s2) 0 var(--s3);display:grid;gap:10px}
.adm-nav li button{display:grid;gap:2px;width:100%;text-align:left;font-size:16px;background:var(--paper);color:var(--ink);border:2.5px solid var(--ink);padding:10px 14px;min-height:48px}
.adm-nav li button b{font-weight:800;font-size:18px;line-height:1.2}
.adm-nav li button span{color:#3d414a}
.adm-nav li button[aria-current]{background:var(--yellow);box-shadow:5px 5px 0 var(--ink)}
.adm .form small,.adm .opt small{font-weight:400;font-size:16px;color:#3d414a}
.adm .form input[type=radio],.adm input[type=checkbox]{width:24px;height:24px;min-height:0;padding:0;accent-color:var(--blue);flex:none}
.opts{border:2.5px solid var(--ink);background:var(--paper);padding:14px 16px 16px;display:grid;gap:12px;min-width:0}
.opts legend{font-weight:800;padding:0 8px}
.adm .form .opt{display:flex;gap:12px;align-items:flex-start;font-weight:400;cursor:pointer}
.opt span{display:grid;gap:2px}
.opt b{font-weight:800}
.groups{margin-top:var(--s5);display:grid;gap:var(--s3)}
.groups .fine{margin-top:0}
.groups>.lnk{justify-self:start}
.group{padding:18px;background:var(--paper);border:2.5px solid var(--ink);display:grid;gap:var(--s2)}
.group>.lnk{justify-self:start}
.ghead,.lessons li{display:flex;gap:8px;align-items:center}
.ghead .n{font-weight:900;font-size:32px;letter-spacing:-.06em;line-height:1;min-width:1.3em}
.adm .group input[type=text]{font:inherit;color:var(--ink);background:var(--paper);border:2px solid var(--ink);border-radius:0;padding:8px 12px;min-height:44px;flex:1;min-width:0}
.adm .ghead input[type=text]{font-weight:800;font-size:19px}
.lessons{list-style:none;padding:0;display:grid;gap:8px}
.free{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:16px;min-height:44px;padding:0 6px;cursor:pointer;white-space:nowrap}
.free:has(input:checked){background:var(--yellow)}
.ib{width:44px;height:44px;flex:none;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font-size:20px;font-weight:800;line-height:1}
.ib:hover:not(:disabled){background:var(--ink);color:#fff}
.ib:disabled{opacity:.35;cursor:default}
.danger{margin-top:var(--s5)}
.danger .lnk{border-color:var(--pen);color:var(--pen)}
.danger .lnk:hover{background:var(--pen);color:#fff}
.adm .receipt{grid-column:1;grid-row:2;margin-top:var(--s3);position:sticky;top:var(--s3);transform:rotate(1deg);z-index:0}
.adm .receipt .sum b{font-size:44px}
.adm .receipt .nop{color:var(--pen)}
.adm .receipt .fine{margin-top:var(--s2)}
.adm .receipt>.hand{right:-10px;top:-24px;font-size:26px}
.adm .receipt li span:last-child{text-align:right;white-space:normal}
.adm>.fine{margin-top:var(--s5)}
@media (max-width:1100px){
  .adm-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:var(--s4)}
  .adm-nav,#adm-edit,.adm .receipt{grid-column:1;grid-row:auto}
  .adm .receipt{position:relative;top:0;max-width:420px}
}
@media (max-width:600px){
  .lessons li{flex-wrap:wrap;padding-bottom:8px;border-bottom:1.5px solid #c9d4ff}
  .adm .lessons li input[type=text]{flex:0 0 100%}
  .lessons .free{margin-right:auto}
  .ghead{flex-wrap:wrap}
  .adm .ghead input[type=text]{flex:1 0 calc(100% - 60px)}
  .ghead .ib:first-of-type{margin-left:auto}
  .adm-bar{gap:var(--s2)}
}

.nf{padding:var(--s5) 0 var(--s6);text-align:left}
.nf .big{font-weight:900;font-size:clamp(120px,24vw,320px);letter-spacing:-.07em;line-height:.8;display:block;margin-top:var(--s4)}

@media (max-width:860px){
  body{font-size:16px;background-size:30px 30px}
  .wrap{padding:0 18px}
  main{overflow-x:clip;overflow-clip-margin:18px}
  .top{flex-wrap:wrap;gap:var(--s1) var(--s3);padding:18px 0 var(--s2)}
  .nav{gap:0 18px;flex:0 0 100%}
  .top{position:relative}
  .nav .in{font-size:24px;position:absolute;right:0;top:20px}
  .hero{grid-template-columns:1fr;gap:var(--s5);padding-bottom:var(--s5)}
  .h1-home{font-size:17vw;white-space:normal;line-height:.88}
  .h1-page{font-size:clamp(36px,10.5vw,60px)}
  .lead,.answer{font-size:17px;margin-top:var(--s3)}
  .btn{font-size:18px;padding:18px 22px}
  .act .arrow{display:none}
  .act .hand{font-size:25px;max-width:none}
  section{padding:var(--s4) 0 var(--s5)}
  .h2 + .hand{font-size:28px}
  .steps{grid-template-columns:1fr;gap:var(--s3);margin-top:var(--s4)}
  .steps li:nth-child(2){margin-top:0}
  .inside{grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s4)}
  .bit{grid-column:auto!important;margin-top:0!important}
  .b1,.b3,.b4,.b6{grid-column:1/-1!important}
  .b5{order:2}.b2{order:1}.b3{order:3}.b4{order:4}.b6{order:5}
  .inside.flat .bit{grid-column:1/-1!important;order:0}
  .inside:has(.notify) .bit,.inside:has(.leadform) .bit{grid-column:1/-1!important}
  .inside:has(.notify) .b5 .in,.inside:has(.leadform) .b5 .in{display:grid;grid-template-columns:120px 1fr;gap:4px 18px;align-items:center}
  .inside:has(.notify) .b5 svg,.inside:has(.leadform) .b5 svg{grid-row:1/3;margin:0}
  .inside:has(.notify) .b5 h3,.inside:has(.leadform) .b5 h3{align-self:end}
  .inside:has(.notify) .b5 p,.inside:has(.leadform) .b5 p{align-self:start;margin-top:0}
  .bit .in{min-height:0;padding:24px 20px 26px}
  .b4 .in{padding-top:62px}
  .bit h3{font-size:26px}
  .prog{grid-template-columns:1fr;gap:var(--s3)}
  .prog>div:first-child{position:relative}
  .star{width:124px;font-size:16px;margin-top:0;position:absolute;right:0;top:-6px}
  .star b{font-size:40px}
  .prog .h2{max-width:6em}
  .next{max-width:none;margin-top:var(--s3)}
  .sheet>ol,.sheet>.pad{padding:30px 16px 36px 46px;background-image:linear-gradient(90deg,transparent 32px,#ff9db8 32px 34px,transparent 34px),radial-gradient(circle at 15px 50%,var(--mat) 0 6px,transparent 7px)}
  .sheet>ol>li{grid-template-columns:40px 1fr}
  .sheet .n{font-size:32px}
  .sheet h3{font-size:20px}
  .sheet li>.hand{grid-column:2;text-align:left;max-width:none;font-size:22px}
  .sheet .notify{padding:8px 12px}
  .check{grid-template-columns:1fr;font-size:17px}
  .pay{grid-template-columns:1fr;gap:var(--s4);margin-top:var(--s4)}
  .receipt{padding:32px 24px 52px}
  .sum b{font-size:52px}.sum small{font-size:16px}
  .receipt>.hand{right:-6px;top:-22px;font-size:26px}
  .pay .receipt{margin-top:var(--s3)}
  .pass{padding:32px 30px}
  .faq{margin-top:var(--s4)}
  .faq summary{font-size:19px}
  .auth .wrap{grid-template-columns:1fr;gap:var(--s3)}
  .formgrid{grid-template-columns:1fr;gap:var(--s4)}
  .pile{margin-bottom:var(--s5)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
@media (max-width:600px){
  .cmp thead{position:absolute;left:-9999px}
  .cmp tr{display:block;padding:10px 0;border-bottom:1.5px solid #c9d4ff}
  .cmp tbody th,.cmp td{display:block;border:0;padding:2px 0}
  .cmp tbody th{font-weight:900;color:var(--ink);font-size:18px}
  .cmp td{font-weight:600}
  .cmp td::before{content:attr(data-l) ": ";font-weight:400;color:#3d414a}
}

/* заявка одним полем: блок біля ціни, кнопка на картках */
.signup{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s3) var(--s4);align-items:center;margin-top:var(--s4);max-width:820px;background:var(--paper);border:2.5px solid var(--ink);padding:26px 28px 30px;box-shadow:8px 8px 0 var(--yellow);scroll-margin-top:var(--s3)}
.signup .form{gap:var(--s2)}
.signup h2{font-weight:900;font-size:26px;letter-spacing:-.03em;line-height:1.1}
.signup .fine,.form .lead-msg{margin-top:0}
.lead-msg:empty{display:none}
.price1{background:var(--mint);padding:22px 26px 26px;transform:rotate(2deg);clip-path:var(--torn-b);display:grid;justify-items:start;min-width:210px}
.price1 small{font-size:16px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.price1 b{font-weight:900;font-size:54px;letter-spacing:-.05em;line-height:1;white-space:nowrap;margin-top:6px}
.price1 span{font-weight:600;font-size:16px}
.price1 .hand{font-size:27px;color:var(--pen);margin-top:10px;transform:rotate(-3deg)}
.notify{display:inline-flex;align-items:center;gap:8px;min-height:48px;margin-top:16px;padding:8px 16px;font:inherit;font-weight:800;font-size:16px;line-height:1.2;text-decoration:none;color:var(--ink);background:var(--yellow);border:2.5px solid var(--ink);border-radius:0;cursor:pointer;transition:transform .15s,background .15s}
.notify:hover{transform:rotate(-1deg);background:#fff}
.notify svg{width:18px;height:18px;flex:none}
.notify:disabled{opacity:.6;cursor:default}
.leadform.mini{display:grid;gap:8px;margin-top:16px;max-width:22em}
.leadform.mini label{display:grid;gap:6px;font-weight:800;font-size:16px}
.leadform.mini input[type=email]{font:inherit;color:var(--ink);background:var(--paper);border:2.5px solid var(--ink);border-radius:0;padding:10px 12px;min-height:48px;width:100%}
.leadform.mini .notify{margin-top:0;justify-self:start}
.leadform.mini .lead-msg{font-size:16px;margin-top:0}
.lead-ok{margin-top:16px;padding:12px 16px;background:var(--mint);color:var(--ink);border:2.5px solid var(--ink);font-weight:600;font-size:16px;max-width:30em}
.lead-ok b{font-weight:900}
.tag.soon{background:transparent}
.steps.soon li:first-child .notify{background:#fff}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.steps.soon .notify{margin-top:14px}
@media (max-width:860px){
  .signup{grid-template-columns:1fr;padding:22px 18px 26px;box-shadow:6px 6px 0 var(--yellow)}
  .signup .btn{justify-self:stretch;justify-content:center}
  .price1{order:-1;justify-self:start;padding:16px 22px 20px;min-width:0}
  .price1 b{font-size:44px}
}