/* Com funciona: the approved PNG translated into editable, responsive HTML. */
.how-page .site-nav .nav-toggle{background:none;color:var(--ink)}
.how-page .how-hero{display:grid;grid-template-columns:minmax(0,44fr) minmax(0,56fr);align-items:center;gap:12px;min-height:510px;margin-top:28px}
.how-page .how-intro{position:relative;z-index:2;min-width:0;padding-bottom:20px}
.how-page .how-intro .eyebrow{font-size:17px;line-height:1.25;letter-spacing:0;margin-bottom:18px}
.how-page h1{font:700 clamp(50px,4.8vw,68px)/1.01 Fredoka,sans-serif;letter-spacing:-.025em;margin:0 0 26px;text-wrap:balance}
.how-page h1 span,.how-page h1 em{display:block}
.how-page .how-intro .lead{font:500 25px/1.35 Dosis,sans-serif;max-width:440px;margin:0 0 26px}
.how-page .how-hero-art{position:relative;margin:12px -25px 0 -12px;min-width:0}
.how-page .how-hero-art img{display:block;width:100%;height:auto;max-height:570px;object-fit:contain}
.how-page .how-hero-note{position:absolute;right:0;top:-23px;transform:rotate(-9deg);text-align:center;font:400 23px/1.12 Patrick,sans-serif;padding:0 10px 24px;width:180px;border-bottom:2px dashed var(--purple);border-radius:0 0 55% 45%;background:white}
.how-hero-note:after{content:'';position:absolute;right:0;bottom:0;width:14px;height:14px;background:var(--yellow);border-radius:50%}
.how-page .section-title{font:600 clamp(30px,3vw,40px)/1.15 Fredoka,sans-serif;text-wrap:balance}
.how-page .how-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.how-page .how-mode{display:flex;flex-direction:column;align-items:start;border-radius:30px;background:#DFF8FC;padding:38px 34px;min-width:0;min-height:420px}
.how-page .how-mode.free{background:#F0E9FF}
.how-page .how-mode-heading{display:grid;grid-template-columns:64px minmax(0,1fr);gap:10px 18px;align-items:start;width:100%;position:relative}
.how-page .how-mode-icon{color:#00B4CF;grid-row:1/3}
.how-page .how-mode-icon svg{width:64px;height:64px}
.how-page .free .how-mode-icon{color:var(--purple)}
.how-page .how-mode-heading h3{font:600 29px/1.1 Fredoka,sans-serif;margin:0}
.how-page .how-mode-heading .badge{font:600 16px/1.2 Dosis,sans-serif;width:fit-content;padding:6px 13px}
.how-page .how-mode-copy{margin:26px 0 30px;flex:1}
.how-page .how-mode-copy p{font:500 22px/1.4 Dosis,sans-serif;margin:0 0 18px}
.how-page .how-mode-copy p:last-child{margin-bottom:0}
.how-page .how-mode-copy a{text-decoration:underline;text-underline-offset:3px}
.how-page .how-mode .button{font-size:22px;gap:18px;white-space:normal}
.how-page .how-steps{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:38px 30px;margin:0;padding:0}
.how-page .how-steps li{position:relative;isolation:isolate;display:grid;grid-template-columns:90px minmax(0,1fr);gap:22px;align-items:start;padding:28px 26px 28px 0;min-width:0}
.how-page .how-steps li:before{content:'';position:absolute;inset:0 0 0 26px;z-index:-1;background:#E4F9FC;border-radius:19% 13% 23% 15% / 35% 29% 45% 40%}
.how-page .how-steps li:nth-child(2):before{background:#FFF0F1}.how-page .how-steps li:nth-child(3):before{background:var(--ivory)}.how-page .how-steps li:nth-child(4):before{background:#F1EBFF}
.how-page .how-step-number{display:grid;place-items:center;width:90px;height:90px;border-radius:50%;background:var(--cyan);color:white;font:500 62px/1 Fredoka,sans-serif}
.how-page .how-steps li:nth-child(2) .how-step-number{background:var(--coral)}.how-page .how-steps li:nth-child(3) .how-step-number{background:var(--yellow)}.how-page .how-steps li:nth-child(4) .how-step-number{background:var(--purple)}
.how-page .how-steps h3{font:700 24px/1.2 Dosis,sans-serif;margin:0 0 12px}
.how-page .how-steps p{font:500 21px/1.4 Dosis,sans-serif;color:#344977}
.how-page .how-needs{isolation:isolate;position:relative;padding:50px 32px 42px}
.how-page .how-needs:before{content:'';position:absolute;z-index:-1;inset:0 -10px;background:var(--ivory);border-radius:7% 12% 9% 7% / 19% 13% 23% 25%;transform:rotate(-.5deg)}
.how-page .how-needs-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;text-align:center}
.how-page .how-needs-grid article+article{border-left:1px solid #15214F18}
.how-page .how-needs-grid span{display:block;color:var(--coral);margin:0 auto 12px}
.how-page .how-needs-grid article:nth-child(2) span{color:#00B4CF}.how-page .how-needs-grid article:nth-child(3) span{color:#D19713}
.how-page .how-needs-grid svg{width:65px;height:65px}
.how-page .how-needs h3{font:600 27px/1.2 Fredoka,sans-serif;margin-bottom:12px}
.how-page .how-needs p{font:500 21px/1.35 Dosis,sans-serif}
.how-page .how-needs-note{border-top:1px solid #15214F18;padding-top:26px;margin-top:30px;text-align:center}
.how-page .how-faq{padding-inline:25px}
.how-page .how-contact .children{width:110%;max-width:110%;margin:0;transform:translate(-15px,28px)}
.how-page .how-contact .contact-copy{padding-bottom:80px}
.how-page .how-contact address{margin-left:0}
.how-page .how-contact address svg{width:27px;height:27px}
.how-page .how-contact .contact-copy>.button{margin-left:0;font-size:22px}
.how-page .how-contact .contact-note{right:10px;bottom:36px;font-size:21px}
@media(min-width:701px) and (max-width:1050px){
.how-page .how-hero{min-height:440px;grid-template-columns:45fr 55fr}.how-page h1{font-size:50px}.how-page .how-intro .lead{font-size:23px}.how-page .how-hero-note{font-size:19px;width:148px;top:-28px}
.how-page .how-mode{padding:30px 23px}.how-page .how-mode-heading{grid-template-columns:50px 1fr;gap:10px 12px}.how-page .how-mode-icon svg{width:50px;height:50px}.how-page .how-mode-heading h3{font-size:25px}.how-page .how-mode-copy p{font-size:21px}.how-page .how-mode .button{font-size:20px;padding-inline:18px}
.how-page .how-steps{gap:28px 22px}.how-page .how-steps li{grid-template-columns:70px 1fr;gap:14px;padding-right:19px}.how-page .how-step-number{width:70px;height:70px;font-size:48px}.how-page .how-steps h3{font-size:22px}.how-page .how-steps p{font-size:20px}.how-page .how-needs{padding-inline:22px}.how-page .how-needs-grid{gap:18px}
}
@media(max-width:700px){
.how-page .how-hero{display:flex;flex-direction:column;gap:30px;min-height:0;margin-top:24px;align-items:stretch}.how-page .how-intro{padding:0}.how-page h1{font-size:clamp(42px,11.5vw,60px);line-height:1.04;max-width:100%}.how-page .how-intro .eyebrow{font-size:15px;max-width:280px}.how-page .how-intro .lead{font-size:23px;max-width:none}.how-page .how-intro .button{font-size:21px}
.how-page .how-hero-art{margin:12px 0 0}.how-page .how-hero-note{position:relative;right:auto;top:auto;margin:16px 10px 0 auto;width:170px;font-size:20px}
.how-page .how-mode-grid{grid-template-columns:1fr;gap:26px}.how-page .how-mode{padding:30px 24px;min-height:0}.how-page .how-mode-heading{grid-template-columns:54px 1fr;gap:10px 16px}.how-page .how-mode-icon svg{width:54px;height:54px}.how-page .how-mode-heading h3{font-size:27px}.how-page .how-mode-copy{margin:24px 0 28px}.how-page .how-mode-copy p{font-size:21px}.how-page .how-mode .button{font-size:21px;padding-inline:22px;gap:14px}
.how-page .how-steps{grid-template-columns:1fr;gap:28px}.how-page .how-steps li{grid-template-columns:65px 1fr;gap:16px;padding:25px 22px 25px 0}.how-page .how-step-number{width:65px;height:65px;font-size:45px}.how-page .how-steps h3{font-size:23px}.how-page .how-steps p{font-size:20px}.how-page .how-steps li:before{left:20px}
.how-page .how-needs{padding:35px 22px}.how-page .how-needs-grid{grid-template-columns:1fr;gap:28px}.how-page .how-needs-grid article+article{border-left:0;border-top:1px solid #15214F18;padding-top:25px}.how-page .how-needs-grid svg{width:60px;height:60px}.how-page .how-needs p{font-size:20px}
.how-page .how-faq{padding:0}.how-page .how-contact .contact-copy{padding-bottom:0}.how-page .how-contact .children{max-width:100%;width:100%;transform:translateY(20px);margin:24px 0 0}.how-page .how-contact .contact-copy>.button{font-size:21px}
}

/* Final comparison with the approved PNG: keep the tablet art within the canvas. */
@media(min-width:701px) and (max-width:1050px){
.how-page .how-hero-art{margin-right:0}
.how-page .how-hero-note{right:12px}
}
@media(min-width:1051px){
.how-page .how-mode-heading{grid-template-columns:64px minmax(0,1fr) auto}
.how-page .how-mode-heading h3{grid-column:2;grid-row:1/3}
.how-page .how-mode-heading .badge{grid-column:3;grid-row:1;margin-top:4px;font-size:15px;padding-inline:11px}
}
.how-page .how-steps li:nth-child(-n+2):after{content:'';position:absolute;left:12px;bottom:-33px;width:36px;height:35px;border-left:2px dashed var(--purple);border-radius:55%;transform:rotate(-22deg);pointer-events:none}
@media(max-width:700px){.how-page .how-steps li:nth-child(-n+2):after{display:none}}