@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --off:#FFFDF9; --dark:#2F3E33; --leaf:#587A54; --yellow:#F4C430;
  --coral:#E68B4C; --blue:#62929A; --cream:#FAF4EE; --line:#E2D6CB;
}
*{box-sizing:border-box}
html{background:#f3f0eb}
body{margin:0;color:var(--dark);font-family:"Nunito",Arial,sans-serif}
.page{width:min(100%,1000px);margin:auto;background:var(--off);min-height:100vh;overflow:hidden;
  padding:30px clamp(18px,5vw,54px) 18px;box-shadow:0 0 40px #00000012}
.hero{text-align:center;position:relative}
.logo{width:155px;max-width:32vw;display:block;margin:0 auto 5px;mix-blend-mode:multiply}
.brush{position:absolute;left:8%;right:8%;height:74px;top:130px;background:#f4c43035;border-radius:55% 35% 48% 42%;
  transform:rotate(-1deg);z-index:0}
h1{position:relative;z-index:1;margin:3px 0 0;font-size:clamp(2.2rem,6vw,4.3rem);line-height:.92;font-weight:900;letter-spacing:-.045em}
h1 span{display:block;font-size:.64em;margin-top:8px}
.subtitle{display:inline-block;margin:18px 0 15px;padding:8px 28px;border-radius:30px;background:#e68b4c20;color:#d66f38;
  font-size:clamp(1.1rem,2.6vw,1.7rem);font-weight:900}
.mat-map{position:relative;margin:0 auto;border:2px dashed var(--coral);max-width:790px;background:white}
.mat-map>img{width:100%;display:block}
.grid-overlay{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr)}
.grid-overlay:before,.grid-overlay:after{content:"";position:absolute;inset:0;pointer-events:none;
 background:linear-gradient(to right,transparent calc(33.333% - 1px),var(--coral) calc(33.333% - 1px),var(--coral) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),var(--coral) calc(66.666% - 1px),var(--coral) calc(66.666% + 1px),transparent calc(66.666% + 1px))}
.grid-overlay:after{background:linear-gradient(to bottom,transparent calc(33.333% - 1px),var(--coral) calc(33.333% - 1px),var(--coral) calc(33.333% + 1px),transparent calc(33.333% + 1px),transparent calc(66.666% - 1px),var(--coral) calc(66.666% - 1px),var(--coral) calc(66.666% + 1px),transparent calc(66.666% + 1px))}
.tag{place-self:center;padding:7px 14px;border-radius:10px;color:white;font-weight:900;font-size:clamp(1rem,2.3vw,1.45rem);z-index:2}
.a{background:#76a65f}.b{background:#ed7542}.c{background:#4d9aad}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.card{position:relative;display:grid;grid-template-columns:52px 1fr;gap:8px;min-height:270px;padding:20px 15px 15px;border-radius:30px;background:var(--cream)}
.number{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:white;font-size:2rem;font-weight:900;margin-left:-28px;margin-top:-9px}
.coral{background:var(--coral)}.yellow{background:var(--yellow)}.blue{background:var(--blue)}.green{background:var(--leaf)}
.card h2{margin:0 0 8px;font-size:clamp(1.25rem,2.3vw,1.7rem);line-height:1}
.card p{margin:0;font-size:.98rem;line-height:1.35}
.download{margin:22px auto 0;width:120px;height:82px;border:8px solid #516873;border-radius:7px;background:#dce8e8;
 display:grid;place-items:center;font-size:3.8rem;line-height:1;color:white;text-shadow:0 2px 0 #456;background-color:#75a95e}
.printer{width:130px;height:65px;background:#718f99;border-radius:10px;margin:30px auto 0;position:relative}
.printer div{position:absolute;width:90px;height:55px;background:white;left:20px;top:-27px;border:3px solid #5c7780}
.printer span{position:absolute;width:95px;height:52px;background:white;left:18px;top:45px;border:3px solid #5c7780;transform:skew(-8deg)}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin:15px auto 0;max-width:190px}
.mini-grid b{padding:6px;text-align:center;border-radius:5px}.mini-grid .a,.mini-grid .b,.mini-grid .c{color:var(--dark)}
.cut-demo{height:90px;margin-top:18px;border:3px solid #aaa;background:white;border-radius:6px;position:relative}
.cut-demo:after{content:"";position:absolute;right:20px;top:0;bottom:0;border-right:3px dashed var(--coral)}
.cut-demo span{position:absolute;right:-4px;top:26px;font-size:2.8rem;z-index:2}
.join-demo{height:95px;display:flex;align-items:center;justify-content:center;gap:3px;font-size:2rem;color:var(--coral)}
.join-demo i{display:block;width:52px;height:75px;background:white;border:3px solid #aaa}
.tape{width:80px;height:80px;border:20px solid #e6d4ae;border-radius:50%;margin:24px auto 0;box-shadow:7px 7px 0 #d5c49f}
.tip{display:flex;align-items:center;justify-content:center;gap:15px;margin:18px auto 5px;padding:15px 25px;max-width:650px;border-radius:28px;background:#f4c43035}
.tip .bulb{font-size:2.6rem}.tip h2{display:inline;color:#d66f38;margin:0 12px 0 0}.tip p{display:inline;margin:0;line-height:1.35}
footer{position:relative;min-height:160px;margin:5px -54px -18px;padding-top:125px;text-align:center;background:linear-gradient(to top,#62929a30,transparent 60%)}
footer p{margin:0;font-weight:800;letter-spacing:.3em;font-size:.9rem}footer p span:nth-of-type(1){color:var(--yellow)}footer p span:nth-of-type(2){color:var(--blue)}
.capybaras{position:absolute;left:45px;bottom:18px;width:250px;height:150px}
.capybaras img{position:absolute;object-fit:contain}.adult{width:175px;left:0;bottom:0}.baby{width:105px;left:130px;bottom:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media(max-width:760px){
 .page{padding:22px 14px 14px}.steps{grid-template-columns:1fr}.card{min-height:210px;grid-template-columns:46px 1fr}
 .number{margin-left:-8px;width:46px;height:46px;font-size:1.65rem}.card p{font-size:.95rem}
 .download,.printer,.cut-demo,.join-demo,.tape{transform:scale(.82);transform-origin:top center}
 footer{margin-left:-14px;margin-right:-14px;min-height:145px;padding-top:115px}.capybaras{left:10px;transform:scale(.75);transform-origin:left bottom}
 footer p{font-size:.68rem;letter-spacing:.18em}
}
@media print{
 @page{size:A4 portrait;margin:0}
 html,body{background:white}.page{width:210mm;min-height:297mm;box-shadow:none;margin:0;padding:8mm 10mm 5mm}
 .logo{width:30mm}.brush{top:27mm;height:14mm}h1{font-size:25pt}.subtitle{font-size:12pt;margin:3mm 0}
 .mat-map{max-width:155mm}.steps{gap:2.5mm;margin-top:3mm}.card{min-height:51mm;padding:4mm 3mm;border-radius:6mm;grid-template-columns:9mm 1fr}
 .number{width:10mm;height:10mm;font-size:15pt;margin-left:-5mm}.card h2{font-size:12pt}.card p{font-size:7.5pt}
 .download,.printer,.cut-demo,.join-demo,.tape{transform:scale(.65);transform-origin:top center;margin-top:3mm}
 .tip{margin:3mm auto 0;padding:2.5mm 5mm;font-size:8pt}footer{min-height:25mm;padding-top:20mm;margin:0 -10mm -5mm}
 .capybaras{transform:scale(.58);transform-origin:left bottom;left:8mm;bottom:2mm}footer p{font-size:7pt}
}