:root{--paper:#fbfbf6;--grid:#dfe7f3;--ink:#1d2b53;--muted:#5d6886;--red:#d9412f;--marker:#ffe36e;--blue:#2f5bd3}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:90px;overflow-x:clip}
body{margin:0;color:var(--ink);font:500 17px/1.6 Manrope,Arial,sans-serif;background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:28px 28px;overflow-x:clip}
a{color:inherit;text-decoration:none}
h1,h2,h3,p,ul{margin:0;padding:0}
:focus-visible{outline:2px solid var(--blue);outline-offset:4px}
.hand{font-family:Caveat,cursive;font-weight:600}

.bar{position:fixed;inset:0 0 auto;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(16px,4vw,56px);background:rgb(251 251 246 / .9);border-bottom:2px solid var(--ink)}
.logo{font-weight:800;font-size:18px}
.logo span{font:600 22px Caveat,cursive;color:var(--red)}
.bar nav{display:flex;gap:28px;font-weight:700;font-size:15px}
.bar nav a:hover{color:var(--blue)}
.bar-cta{padding:10px 18px;border-radius:12px;background:var(--blue);color:#fff;font-size:14px;font-weight:800}

.hero{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:40px;min-height:100svh;padding:120px clamp(16px,4vw,56px) 60px}
.note-top{font-size:26px;color:var(--red)}
h1{margin-top:12px;font-size:clamp(40px,5.6vw,82px);line-height:1.05;font-weight:800;letter-spacing:-.035em}
.mark{background:linear-gradient(transparent 58%,var(--marker) 58% 92%,transparent 92%) no-repeat 0 0/0% 100%;animation:mark 1s .5s ease-out forwards}
@keyframes mark{to{background-size:100% 100%}}
.lead{max-width:31em;margin-top:22px;color:var(--muted);font-size:clamp(17px,1.4vw,20px)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:32px}
.btn{display:inline-flex;align-items:center;min-height:56px;padding:0 26px;border-radius:14px;background:var(--blue);color:#fff;font-weight:800;box-shadow:0 10px 0 -2px #1f3e95;transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translateY(3px);box-shadow:0 7px 0 -2px #1f3e95}
.free{font-size:30px;color:var(--red);transform:rotate(-4deg)}

.board{position:relative;padding:34px 30px 40px;border-radius:20px;background:#22303f;color:#f4f1e6;box-shadow:inset 0 0 0 10px #8a5a33,0 30px 50px -30px rgb(20 30 60 / .6)}
.board .hand{font-size:clamp(30px,3.2vw,46px);line-height:1.5}
.write{clip-path:inset(-10% 100% -10% 0);animation:write 1.1s steps(18,end) forwards}
.w1{animation-delay:.3s}.w2{animation-delay:1.5s}.w3{animation-delay:2.7s}.w4{animation-delay:4.3s;color:#ff8a78;transform:rotate(-6deg);width:max-content;margin:10px 0 0 auto}
@keyframes write{to{clip-path:inset(-10% -2% -10% 0)}}
.circle{position:absolute;left:2px;top:146px;width:min(330px,84%);overflow:visible}
.circle path{fill:none;stroke:#ffd75e;stroke-width:3;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s 3.8s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}

.who,.results,.price,.cta{padding:clamp(70px,10vw,130px) clamp(16px,4vw,56px)}
h2{font-size:clamp(34px,4.6vw,64px);line-height:1.08;font-weight:800;letter-spacing:-.03em}
.pages{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.page{position:relative;padding:28px 24px;border:2px solid var(--ink);border-radius:6px 22px 6px 22px;background:#fff;transition:transform .3s}
.page:nth-child(odd){transform:rotate(-1deg)}.page:nth-child(even){transform:rotate(1deg)}
.page:hover{transform:rotate(0) translateY(-6px)}
.tag{font-size:26px;color:var(--red)}
.page h3{margin-top:8px;font-size:22px}
.page p{margin-top:8px;color:var(--muted)}

.results{display:grid;grid-template-columns:.8fr 1.2fr;align-items:center;gap:40px}
.results-text p{margin-top:16px;color:var(--muted)}
.chart{margin:0;padding:20px;border:2px solid var(--ink);border-radius:20px;background:#fff}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.grid path{stroke:var(--grid);stroke-width:2}
.axis text{fill:var(--muted);font:600 15px Manrope,sans-serif}
.line{fill:none;stroke:var(--blue);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2s ease-out}
.dots circle{fill:#fff;stroke:var(--blue);stroke-width:4;opacity:0;transition:opacity .4s}
.hand-svg{font:700 38px Caveat,cursive;fill:var(--ink);opacity:0;transition:opacity .5s 1.6s}
.hand-svg.red{fill:var(--red)}
.chart.in .line{stroke-dashoffset:0}
.chart.in .dots circle{opacity:1}
.chart.in .dots circle:nth-child(1){transition-delay:.1s}.chart.in .dots circle:nth-child(2){transition-delay:.5s}.chart.in .dots circle:nth-child(3){transition-delay:.9s}.chart.in .dots circle:nth-child(4){transition-delay:1.3s}.chart.in .dots circle:nth-child(5){transition-delay:1.7s}
.chart.in .hand-svg{opacity:1}

.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.price article{position:relative;padding:30px;border:2px solid var(--ink);border-radius:20px;background:#fff}
.price article.accent{background:var(--marker)}
.price h3{font-size:20px}
.price b{display:block;margin-top:14px;font-size:clamp(34px,3.6vw,48px);letter-spacing:-.03em}
.price p{margin-top:8px;color:var(--muted)}
.price .accent p{color:var(--ink)}
.sticker{position:absolute;top:-18px;right:18px;padding:2px 14px;border-radius:99px;background:var(--red);color:#fff;font-size:24px;transform:rotate(6deg)}

.cta{display:grid;place-items:center}
.sticky-note{max-width:520px;padding:40px 36px;background:var(--marker);box-shadow:0 24px 30px -18px rgb(60 50 0 / .5);transform:rotate(-2deg)}
.sticky-note .hand{font-size:42px;color:var(--red)}
.sticky-note p+p{margin:10px 0 26px;font-size:19px}

footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding:24px clamp(16px,4vw,56px);border-top:2px solid var(--ink);background:var(--paper);color:var(--muted);font-size:14px}

.js .reveal{opacity:0;translate:0 24px;transition:opacity .7s,translate .7s cubic-bezier(.2,.8,.2,1)}
.js .reveal.in{opacity:1;translate:0 0}

@media(max-width:960px){
  .bar nav{display:none}
  .hero,.results{grid-template-columns:1fr}
  .pages{grid-template-columns:1fr 1fr}
  .price-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.pages{grid-template-columns:1fr}.circle{top:132px}}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mark{animation:none;background-size:100% 100%}
  .write{animation:none;clip-path:none}
  .circle path{animation:none;stroke-dashoffset:0}
  .line{transition:none;stroke-dashoffset:0}
  .dots circle,.hand-svg{opacity:1;transition:none}
  .js .reveal{opacity:1;translate:0 0;transition:none}
}