@font-face{font-family:"Bricolage";src:url(fonts/bricolage.woff2) format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Figtree";src:url(fonts/figtree.woff2) format("woff2");font-weight:300 900;font-display:swap}
:root{--sage:#6f8f66;--sage-deep:#4e6e45;--cream:#fbf6f0;--ink:#2a2320;--muted:#6e645a;--peach:#f4b393;--butter:#f6d77a;--rose:#e98a8a;--sky:#9cc3d5;--line:#ede5d9}
*{box-sizing:border-box}
html{background:#f6efe5}
body{margin:0;min-height:100vh;color:var(--ink);font:17px/1.6 "Figtree",system-ui,sans-serif;overflow-x:hidden;position:relative}
body::before,body::after{content:"";position:fixed;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.7}
body::before{width:520px;height:520px;background:var(--peach);top:-160px;right:-140px}
body::after{width:560px;height:560px;background:#b9d3a8;bottom:-220px;left:-180px}
.blob{position:fixed;z-index:-1;width:360px;height:360px;border-radius:50%;filter:blur(70px);opacity:.45;background:var(--butter);top:40%;left:55%}
h1,h2,.brand{font-family:"Bricolage","Figtree",sans-serif}
a{color:inherit;text-underline-offset:3px}

/* Header */
.top{max-width:1080px;margin:0 auto;padding:22px 16px;display:flex;align-items:center;gap:10px}
.brand{font-weight:800;font-size:22px;letter-spacing:-.4px;text-decoration:none}
.top img{width:34px;height:34px;border-radius:10px}

/* Hero */
.hero{max-width:1080px;margin:0 auto;padding:24px 16px 40px;display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;background:#fff7e0;border:1px solid #f0dca0;color:#7a5a12;font-weight:700;font-size:14px;padding:6px 14px;border-radius:999px}
.dot{width:9px;height:9px;border-radius:50%;background:#e2a521;box-shadow:0 0 0 0 rgba(226,165,33,.6);animation:pulse 2.4s ease-out infinite}
h1{font-size:clamp(40px,6.4vw,72px);line-height:1.02;letter-spacing:-2px;margin:18px 0 18px;font-weight:800}
h1 em{font-style:normal;background:linear-gradient(100deg,var(--sage-deep),#8fb36f 45%,#e0904f);-webkit-background-clip:text;background-clip:text;color:transparent}
.lead{font-size:clamp(18px,2vw,20px);color:#4a413b;max-width:34em;margin:0 0 14px}
.thanks{display:inline-block;margin-top:10px;background:var(--sage);color:#fff;font-weight:700;padding:12px 22px;border-radius:16px;box-shadow:0 12px 24px rgba(111,143,102,.3);transform:rotate(-1.5deg)}

/* Collage */
.collage{position:relative;height:520px}
.card{position:absolute;width:210px;background:#fff;border-radius:18px;padding:10px 10px 12px;box-shadow:0 18px 36px rgba(42,35,32,.14);animation:float 6s ease-in-out infinite}
.card img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}
.card b{display:block;margin-top:8px;font-size:15px}
.card span{position:absolute;top:-12px;right:-10px;background:var(--c);color:#2a2320;font-weight:800;font-family:"Bricolage",sans-serif;font-size:17px;padding:5px 12px;border-radius:12px;transform:rotate(6deg)}
.c1{--c:var(--butter);left:4%;top:0;transform:rotate(-6deg)}
.c2{--c:var(--sky);right:2%;top:30px;transform:rotate(5deg);animation-delay:-1.5s}
.c3{--c:var(--peach);left:8%;top:270px;transform:rotate(3deg);animation-delay:-3s}
.c4{--c:#b9d3a8;right:4%;top:300px;transform:rotate(-4deg);animation-delay:-4.5s}
.zz{position:absolute;left:47%;top:-28px;font:800 34px "Bricolage",sans-serif;color:var(--sage-deep);opacity:.8;animation:zz 3s ease-in-out infinite}

/* Steps */
.how{max-width:1080px;margin:0 auto;padding:16px 16px 56px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{background:rgba(251,246,240,.8);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:22px;padding:22px}
.step i{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:13px;font-style:normal;font-size:21px;background:var(--c)}
.step h2{font-size:19px;margin:12px 0 4px}
.step p{margin:0;color:var(--muted);font-size:15.5px}

footer{max-width:1080px;margin:0 auto;padding:24px 16px 36px;display:flex;gap:20px;justify-content:center;color:var(--muted);font-size:14px}

/* Legal pages */
.doc{max-width:720px;margin:0 auto;padding:8px 16px 24px}
.doc .sheet{background:var(--cream);border:1px solid var(--line);border-radius:24px;padding:30px 26px;box-shadow:0 8px 20px rgba(42,35,32,.05)}
.doc h1{font-size:clamp(30px,5vw,42px);letter-spacing:-1px;margin:0 0 14px}
.doc h2{font-size:18px;margin:22px 0 4px;color:var(--sage-deep)}
.doc p{margin:0 0 10px;font-size:16px}
.small{color:var(--muted);font-size:14px}

@keyframes float{0%,100%{translate:0 0}50%{translate:0 -10px}}
@keyframes zz{0%,100%{transform:translateY(0) rotate(-8deg);opacity:.35}50%{transform:translateY(-14px) rotate(4deg);opacity:.9}}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,165,33,.55)}80%,100%{box-shadow:0 0 0 12px rgba(226,165,33,0)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important}}
@media (max-width:820px){
  .hero{grid-template-columns:1fr;gap:12px;padding-top:8px}
  .collage{height:470px;max-width:420px;width:100%;margin:12px auto 0}
  .card{width:150px}
  .c3{top:236px;left:6%}.c4{top:262px}
  .zz{top:-30px;left:44%}
  .how{grid-template-columns:1fr}
}