*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background-color:#F3ECE0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");color:#1E2B25;font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:#213D32}
a:hover{color:#C0503D}

.header-1 { max-width:1200px; margin:0 auto; padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px; }

.header-2 { display:flex; align-items:center; gap:12px; text-decoration:none; color:#1E2B25; }

.header-3 { font-family:Caveat,cursive; font-size:44px; line-height:1; font-weight:600; }

.header-4 { font-size:13px; line-height:1.3; border-left:1px solid rgba(30,43,37,.25); padding-left:12px; }

.header-5 { display:flex; gap:32px; font-size:15px; font-weight:500; }

.header-6 { text-decoration:none; }

.header-7 { display:inline-flex; align-items:center; gap:10px; background:#213D32; color:#FBF7F0; padding:12px 22px; border-radius:999px; font-weight:600; font-size:14px; text-decoration:none; white-space:nowrap; }

.header-8:hover { background:#2C4A3E; color:#FBF7F0 }

.top-1 { max-width:1200px; margin:0 auto; padding:24px 24px 72px; display:flex; flex-wrap:wrap; align-items:center; gap:48px; }

.top-2 { flex:1 1 460px; min-width:0; display:flex; flex-direction:column; gap:28px; }

.top-3 { font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:#5B645E; }

.top-4 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(40px,6.2vw,78px); line-height:1.04; letter-spacing:-.01em; text-wrap:balance; }

.top-5 { font-style:italic; color:#213D32; background:linear-gradient(100deg,transparent 1%,#F1CFC5 2.5%,#F1CFC5 97%,transparent 99%) 0 82%/100% 42% no-repeat; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding:0 .12em; }

.top-6 { margin:0; font-size:clamp(17px,1.6vw,20px); line-height:1.55; color:#3E4A43; max-width:520px; text-wrap:pretty; }

.top-7 { display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px; }

.top-8 { display:inline-flex; align-items:center; gap:12px; background:#213D32; color:#FBF7F0; padding:19px 32px; border-radius:999px; font-weight:600; font-size:17px; text-decoration:none; box-shadow:0 10px 24px rgba(33,61,50,.22); }

.top-9 { font-family:Caveat,cursive; font-size:24px; line-height:1.05; color:#213D32; transform:rotate(-4deg); }

.top-10 { display:flex; flex-wrap:wrap; gap:10px 26px; font-size:14px; color:#3E4A43; padding-top:8px; }

.top-11 { display:flex; align-items:center; gap:8px; }

.top-12 { width:8px; height:8px; border-radius:50%; background:#E9782F; }

.top-13 { flex:1 1 420px; min-width:0; position:relative; height:clamp(440px,52vw,600px); }

.top-14 { position:absolute; left:2%; top:0; z-index:3; }

.top-15 { position:absolute; left:clamp(0px,14%,90px); top:6%; width:min(380px,76%); transform:rotate(2deg); filter:drop-shadow(0 16px 26px rgba(30,43,37,.18)); z-index:2; }

.top-16 { background:#FBF7F0; padding:14px 14px 56px; position:relative; }

.top-17 { position:absolute; left:50%; top:-14px; width:110px; height:30px; margin-left:-55px; transform:rotate(-3deg); background:rgba(226,212,182,.8); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.top-18 { aspect-ratio:4/5; background:repeating-linear-gradient(135deg,#E6DCCB 0 10px,#DED2BE 10px 20px); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono',monospace; font-size:13px; color:#5B645E; }

.top-19 { position:absolute; left:18px; bottom:12px; font-family:Caveat,cursive; font-size:26px; color:#213D32; }

.hero-photo { display: block; width: 100%; height: auto; object-fit: cover; }

.top-20 { position:absolute; right:0; top:2%; width:clamp(130px,30%,180px); transform:rotate(5deg); z-index:3; filter:drop-shadow(0 8px 14px rgba(30,43,37,.15)); }

.top-21 { background:#F1CFC5; padding:20px 16px 26px; font-family:Caveat,cursive; font-size:clamp(22px,2.2vw,27px); line-height:1.05; color:#213D32; clip-path:polygon(0 0,100% 2%,100% 94%,92% 98%,84% 94%,75% 99%,66% 95%,57% 99%,48% 94%,39% 98%,30% 94%,21% 99%,12% 95%,0 98%); }

.top-22 { position:absolute; left:-2%; bottom:10%; width:150px; transform:rotate(-7deg); z-index:3; filter:drop-shadow(0 8px 14px rgba(30,43,37,.14)); }

.top-23 { position:absolute; left:40px; top:-12px; width:70px; height:24px; transform:rotate(4deg); background:rgba(226,212,182,.85); z-index:1; clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.top-24 { background:#FBF7F0; padding:22px 18px 28px; font-family:Caveat,cursive; font-size:30px; line-height:1; color:#1E2B25; clip-path:polygon(0 2%,100% 0,100% 94%,93% 98%,86% 94%,78% 99%,70% 95%,62% 99%,54% 94%,46% 98%,38% 94%,30% 99%,22% 95%,14% 99%,7% 94%,0 97%); }

.top-25 { position:absolute; right:6%; bottom:6%; z-index:3; }

.goals-1 { max-width:1200px; margin:0 auto; padding:64px 24px 96px; overflow-x:clip; }

.goals-2 { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; margin-bottom:48px; }

.goals-3 { position:relative; }

.goals-4 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(34px,4.4vw,54px); line-height:1.1; }

.goals-5 { display:block; margin-top:4px; max-width:100%; }

.goals-6 { display:flex; align-items:center; gap:18px; }

.goals-7 { font-family:Caveat,cursive; font-size:25px; line-height:1.05; color:#213D32; transform:rotate(-3deg); }

.goals-8 { font-family:Manrope,sans-serif; font-size:13px; font-weight:600; color:#213D32; background:transparent; border:1px solid rgba(33,61,50,.35); border-radius:999px; padding:9px 16px; cursor:pointer; }

.goals-9:hover { background:#213D32; color:#FBF7F0 }

.goals-10 { position:relative; display:grid; grid-template-columns:repeat(auto-fit, minmax(clamp(calc(20% + 1px), calc((1080px - 100%) * 1000), clamp(calc(33.4% + 1px), calc((540px - 100%) * 1000), 100%)), 1fr)); gap:40px 24px; padding:16px 0 24px; }

.goals-11 { position:relative; justify-self:center; width:min(100%, 280px); height:360px; margin-top:26px; transform:translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rotation)); z-index:var(--layer, 1); transition:transform .45s cubic-bezier(.2,.8,.2,1); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; perspective:1400px; outline:none; }

.goals-12 { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .65s cubic-bezier(.3,.7,.2,1); transform:rotateY(var(--flip, 0deg)); }

.goals-13 { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#FBF7F0; border-radius:6px; box-shadow:0 6px 18px rgba(30,43,37,.12); padding:28px 22px 18px; display:flex; flex-direction:column; gap:10px; }

.goals-14 { position:absolute; left:50%; top:-13px; width:90px; height:26px; margin-left:-45px; transform:rotate(-4deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.goals-15 { font-family:'JetBrains Mono',monospace; font-size:12px; color:#5B645E; }

.goals-16 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:30px; }

.goals-17 { margin:0; font-size:15px; line-height:1.5; color:#3E4A43; }

.goals-18 { flex:1; min-height:80px; border-radius:3px; background:repeating-linear-gradient(135deg,#ECE3D4 0 9px,#E4D9C6 9px 18px); position:relative; overflow:hidden; box-shadow:inset 0 0 0 5px #FFFDF8; }

.goals-19 { position:absolute; inset:5px; width:calc(100% - 10px); height:calc(100% - 10px); object-fit:cover; filter:sepia(.18) saturate(.85) contrast(.95); pointer-events:none; }

.goals-20 { font-family:Caveat,cursive; font-size:22px; color:#213D32; }

.goals-21 { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:rotateY(180deg); background:#213D32; color:#F3ECE0; border-radius:6px; box-shadow:0 6px 18px rgba(30,43,37,.12); padding:28px 22px 18px; display:flex; flex-direction:column; gap:14px; }

.goals-22 { font-family:Caveat,cursive; font-size:24px; color:#F4A56E; }

.goals-23 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:26px; }

.goals-24 { display:flex; flex-direction:column; gap:12px; font-size:15px; line-height:1.45; }

.goals-25 { display:flex; gap:10px; }

.goals-26 { color:#F4A56E; font-weight:700; }

.goals-27 { margin-top:auto; font-family:Caveat,cursive; font-size:22px; color:#F3ECE0; }

.goals-28 { position:relative; justify-self:center; width:min(100%, 280px); height:360px; margin-top:0px; transform:translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rotation)); z-index:var(--layer, 1); transition:transform .45s cubic-bezier(.2,.8,.2,1); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; perspective:1400px; outline:none; }

.goals-29 { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#F6E1DA; border-radius:6px; box-shadow:0 6px 18px rgba(30,43,37,.12); padding:28px 22px 18px; display:flex; flex-direction:column; gap:10px; }

.goals-30 { position:absolute; left:50%; top:-13px; width:90px; height:26px; margin-left:-45px; transform:rotate(3deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.goals-31 { flex:1; min-height:80px; border-radius:3px; background:repeating-linear-gradient(135deg,#EFD6CE 0 9px,#E8CCC3 9px 18px); position:relative; overflow:hidden; box-shadow:inset 0 0 0 5px #FFFDF8; }

.goals-32 { position:relative; justify-self:center; width:min(100%, 280px); height:360px; margin-top:40px; transform:translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rotation)); z-index:var(--layer, 1); transition:transform .45s cubic-bezier(.2,.8,.2,1); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; perspective:1400px; outline:none; }

.goals-33 { position:absolute; left:50%; top:-13px; width:90px; height:26px; margin-left:-45px; transform:rotate(-2deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.goals-34 { position:relative; justify-self:center; width:min(100%, 280px); height:360px; margin-top:10px; transform:translate(var(--x, 0px), var(--y, 0px)) rotate(var(--rotation)); z-index:var(--layer, 1); transition:transform .45s cubic-bezier(.2,.8,.2,1); touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; perspective:1400px; outline:none; }

.goals-35 { position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; background:#EFE7D8; border-radius:6px; box-shadow:0 6px 18px rgba(30,43,37,.12); padding:28px 22px 18px; display:flex; flex-direction:column; gap:10px; }

.goals-36 { position:absolute; left:50%; top:-13px; width:90px; height:26px; margin-left:-45px; transform:rotate(4deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.goals-37 { flex:1; min-height:80px; border-radius:3px; background:repeating-linear-gradient(135deg,#E6DCCA 0 9px,#DDD1BC 9px 18px); position:relative; overflow:hidden; box-shadow:inset 0 0 0 5px #FFFDF8; }

.about-1 { max-width:1100px; margin:0 auto; padding:64px 24px 96px; display:flex; flex-wrap:wrap; align-items:center; gap:56px 72px; }

.about-2 { flex:1 1 320px; max-width:420px; position:relative; margin:0 auto; }

.about-3 { transform:rotate(-2.5deg); filter:drop-shadow(0 16px 26px rgba(30,43,37,.16)); }

.about-4 { background:#FBF7F0; padding:14px 14px 18px; position:relative; }

.about-5 { position:absolute; left:-18px; top:14px; width:90px; height:26px; transform:rotate(-38deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.about-6 { position:absolute; right:-18px; top:14px; width:90px; height:26px; transform:rotate(38deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.about-photo { display:block; width:100%; height:auto; }

.about-8 { position:absolute; right:-6%; bottom:-28px; width:130px; transform:rotate(6deg); filter:drop-shadow(0 8px 14px rgba(30,43,37,.14)); }

.about-9 { background:#F1CFC5; padding:16px 14px 22px; font-family:Caveat,cursive; font-size:26px; line-height:1; color:#213D32; clip-path:polygon(0 0,100% 2%,100% 94%,92% 98%,84% 94%,75% 99%,66% 95%,57% 99%,48% 94%,39% 98%,30% 94%,21% 99%,12% 95%,0 98%); }

.about-10 { flex:1 1 380px; min-width:0; display:flex; flex-direction:column; gap:22px; }

.about-11 { font-style:italic; color:#C0503D; }

.about-12 { margin:0; font-size:18px; line-height:1.6; color:#3E4A43; text-wrap:pretty; }

.about-13 { display:flex; flex-direction:column; gap:12px; font-size:16px; padding-top:4px; }

.about-14 { display:flex; align-items:center; gap:12px; }

.about-15 { font-family:Caveat,cursive; font-size:26px; line-height:1; color:#B85418; }

.steps-1 { max-width:1200px; margin:0 auto; padding:64px 24px 110px; }

.steps-2 { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 40px; margin-bottom:56px; }

.steps-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:36px 28px; }

.steps-4 { position:relative; background:#FBF7F0; padding:34px 26px 30px; transform:rotate(-1.2deg); box-shadow:0 6px 18px rgba(30,43,37,.1); display:flex; flex-direction:column; gap:12px; }

.steps-5 { position:absolute; left:24px; top:-12px; width:76px; height:24px; transform:rotate(-5deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.steps-6 { font-family:Caveat,cursive; font-size:46px; line-height:.9; color:#B85418; }

.steps-7 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:24px; }

.steps-8 { margin:0; font-size:15px; line-height:1.55; color:#3E4A43; }

.steps-9 { position:relative; background:#F6E1DA; padding:34px 26px 30px; transform:rotate(1deg); box-shadow:0 6px 18px rgba(30,43,37,.1); display:flex; flex-direction:column; gap:12px; }

.steps-10 { position:absolute; left:24px; top:-12px; width:76px; height:24px; transform:rotate(4deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.steps-11 { position:relative; background:#FBF7F0; padding:34px 26px 30px; transform:rotate(-.6deg); box-shadow:0 6px 18px rgba(30,43,37,.1); display:flex; flex-direction:column; gap:12px; }

.steps-12 { position:absolute; left:24px; top:-12px; width:76px; height:24px; transform:rotate(-3deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.steps-13 { position:relative; background:#EFE7D8; padding:34px 26px 30px; transform:rotate(1.4deg); box-shadow:0 6px 18px rgba(30,43,37,.1); display:flex; flex-direction:column; gap:12px; }

.steps-14 { position:absolute; left:24px; top:-12px; width:76px; height:24px; transform:rotate(5deg); background:rgba(226,212,182,.85); clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.reviews-1 { background:#213D32; color:#F3ECE0; padding:130px 24px 140px; clip-path:polygon(0 14px,4% 4px,9% 16px,15% 2px,22% 12px,28% 0,35% 14px,42% 5px,49% 15px,56% 3px,63% 13px,70% 1px,77% 14px,84% 4px,91% 15px,96% 3px,100% 12px,100% calc(100% - 12px),95% calc(100% - 2px),89% calc(100% - 14px),82% calc(100% - 3px),75% calc(100% - 15px),68% calc(100% - 4px),61% calc(100% - 13px),54% 100%,47% calc(100% - 14px),40% calc(100% - 2px),33% calc(100% - 12px),26% calc(100% - 1px),19% calc(100% - 14px),12% calc(100% - 3px),6% calc(100% - 13px),0 calc(100% - 4px)); }

.reviews-2 { max-width:1100px; margin:0 auto; display:flex; flex-wrap:wrap; gap:48px 72px; align-items:flex-start; }

.reviews-3 { flex:1 1 300px; min-width:0; display:flex; flex-direction:column; gap:20px; position:relative; }

.reviews-4 { display:block; margin-top:-8px; }

.reviews-5 { margin:0; font-size:17px; line-height:1.6; color:#D9D4C8; max-width:360px; }

.reviews-6 { width:150px; margin-top:28px; transform:rotate(-6deg); filter:drop-shadow(0 10px 16px rgba(0,0,0,.25)); }

.reviews-7 { background:#FBF7F0; padding:20px 16px 26px; font-family:Caveat,cursive; font-size:30px; line-height:1; color:#1E2B25; clip-path:polygon(0 2%,100% 0,100% 94%,93% 98%,86% 94%,78% 99%,70% 95%,62% 99%,54% 94%,46% 98%,38% 94%,30% 99%,22% 95%,14% 99%,7% 94%,0 97%); }

.reviews-8 { flex:1.4 1 420px; min-width:0; display:flex; flex-direction:column; gap:18px; }

.reviews-9 { display:flex; align-items:flex-end; gap:12px; max-width:480px; }

.reviews-10 { display:block; flex:none; width:64px; height:64px; object-fit:cover; border-radius:50%; border:2px solid rgba(243,236,224,.35); }
.reviews-demo-note { margin:0; max-width:340px; font-size:12px; line-height:1.5; color:#D9D4C8; }

.reviews-11 { background:#FBF7F0; color:#1E2B25; padding:14px 18px 10px; border-radius:18px 18px 18px 4px; display:flex; flex-direction:column; gap:6px; }

.reviews-12 { font-size:12px; font-weight:700; color:#B85418; }

.reviews-13 { font-size:16px; line-height:1.5; }

.reviews-14 { font-family:'JetBrains Mono',monospace; font-size:11px; color:#6B736D; align-self:flex-end; }

.reviews-15 { display:flex; align-items:flex-end; justify-content:flex-end; gap:12px; max-width:480px; align-self:flex-end; }

.reviews-16 { background:#F1CFC5; color:#1E2B25; padding:14px 18px 10px; border-radius:18px 18px 4px 18px; display:flex; flex-direction:column; gap:6px; }

.reviews-17 { font-size:12px; font-weight:700; color:#8A3A2C; }

.reviews-18 { font-family:'JetBrains Mono',monospace; font-size:11px; color:#6B5650; align-self:flex-end; }

.signup-1 { max-width:960px; margin:0 auto; padding:110px 24px 80px; }

.signup-2 { position:relative; transform:rotate(-1deg); filter:drop-shadow(0 18px 30px rgba(30,43,37,.14)); }

.signup-3 { position:absolute; left:-14px; top:10px; width:100px; height:28px; transform:rotate(-35deg); background:rgba(226,212,182,.9); z-index:2; clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.signup-4 { position:absolute; right:-14px; top:10px; width:100px; height:28px; transform:rotate(35deg); background:rgba(226,212,182,.9); z-index:2; clip-path:polygon(0 12%,5% 0,95% 8%,100% 0,97% 50%,100% 100%,4% 92%,0 100%,3% 50%); }

.signup-5 { background:#F1CFC5; padding:clamp(48px,7vw,80px) clamp(24px,6vw,72px); display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; clip-path:polygon(0 1%,6% 0,14% 1.5%,23% 0,31% 1%,40% 0,48% 1.5%,57% 0,66% 1%,74% 0,83% 1.5%,91% 0,100% 1%,100% 98%,94% 100%,86% 98.5%,77% 100%,69% 98%,60% 100%,52% 98.5%,43% 100%,35% 98%,26% 100%,18% 98.5%,9% 100%,0 98%); }

.signup-6 { font-family:Caveat,cursive; font-size:38px; line-height:1; color:#213D32; transform:rotate(-4deg); }

.signup-7 { margin:0; font-family:'Playfair Display',serif; font-weight:500; font-size:clamp(34px,4.8vw,58px); line-height:1.08; text-wrap:balance; }

.signup-8 { margin:0; font-size:18px; line-height:1.55; color:#3E3531; max-width:520px; text-wrap:pretty; }

.signup-9 { display:inline-flex; align-items:center; gap:12px; background:#C0503D; color:#FFFFFF; padding:20px 34px; border-radius:999px; font-weight:600; font-size:17px; text-decoration:none; box-shadow:0 10px 24px rgba(192,80,61,.3); margin-top:6px; }

.signup-10:hover { background:#A9432F; color:#FFFFFF }

.footer-1 { max-width:1200px; margin:0 auto; padding:24px 24px 40px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; font-size:13px; color:#5B645E; }

.footer-2 { display:flex; align-items:center; gap:10px; }

.footer-3 { font-family:Caveat,cursive; font-size:30px; line-height:1; color:#1E2B25; font-weight:600; }

/* Layout and accessible interactions */
.desktop-only { display: contents; }
section { scroll-margin-top: 24px; }
:focus-visible { outline: 3px solid #B85418 !important; outline-offset: 6px; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 12px; background: #FBF7F0; }
.skip-link:focus { top: 16px; }
[data-i="0"] { --rotation: -4deg; }
[data-i="1"] { --rotation: 2.5deg; }
[data-i="2"] { --rotation: -2deg; }
[data-i="3"] { --rotation: 3.5deg; }
[data-i].is-flipped { --flip: 180deg; }
[data-i].is-dragging { transition: none; cursor: grabbing; }
.contact-note { font-size: 14px; margin: 0; color: #3E3531; }
.mobile-menu, .tap-hint { display: none; }
a, button, summary, [data-i] { -webkit-tap-highlight-color: rgba(33,61,50,.12); }
.top-12 { flex-shrink: 0; }
@media (min-width: 820px) and (pointer: fine) { [data-i] { touch-action: none; } }
@media (max-width: 819px) {
 .desktop-only { display: none; }
 #reset-goals { display: none; }
 .header-1 { flex-wrap: wrap; gap: 12px; padding: 18px 24px; }
 .header-2 { margin-right: auto; }
 .header-7 { min-height: 44px; justify-content: center; }
 .mobile-menu { display: block; width: 100%; border-top: 1px solid rgba(33,61,50,.18); }
 .mobile-menu summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; font-size: 14px; list-style: none; }
 .mobile-menu summary::-webkit-details-marker { display: none; }
 .menu-icon { position: relative; width: 22px; height: 18px; }
 .menu-icon > span { position: absolute; left: 0; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .25s ease, opacity .18s ease; }
 .menu-icon > span:nth-child(1) { top: 0; }
 .menu-icon > span:nth-child(2) { top: 8px; }
 .menu-icon > span:nth-child(3) { top: 16px; }
 .mobile-menu.is-expanded .menu-icon > span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
 .mobile-menu.is-expanded .menu-icon > span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
 .mobile-menu.is-expanded .menu-icon > span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
 .mobile-menu nav { display: grid; padding: 4px 0 12px; }
 .mobile-menu nav a { display: flex; align-items: center; min-height: 48px; padding: 10px 12px; border-radius: 8px; text-decoration: none; }
 .mobile-menu nav a:hover { background: #E9DFD0; }
 #top, #about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 36px; }
 #top { padding-top: 20px; padding-bottom: 48px; }
 .top-2 { gap: 22px; }
 .top-4 { font-size: clamp(38px, 7.5vw, 60px); line-height: 1.08; }
 .top-6 { max-width: 620px; }
 .top-13 { width: min(100%, 430px); justify-self: center; height: auto; padding: 20px 22px 10px; }
 .top-15 { position: relative; left: auto; top: auto; width: 88%; margin: 0 auto; }
 .top-14 { width: 90px; top: 0; left: 0; }
 .top-20 { right: 0; top: 6px; width: 128px; }
 .top-21 { padding: 16px 12px 20px; font-size: 22px; }
 #goals, #about, #steps { padding-top: 44px; padding-bottom: 52px; }
 .goals-2, .steps-2 { gap: 20px; margin-bottom: 28px; }
 .goals-6 { width: 100%; justify-content: space-between; gap: 12px; }
 .goals-7 { font-size: 23px; }
 .goals-8 { min-height: 44px; }
 .drag-hint { display: none; }
 .tap-hint { display: inline; }
 .goals-board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; padding: 16px 0; }
 /* Both faces determine the height, so larger text is never clipped. */
 .goals-board [data-i] { width: 100%; height: auto; margin: 0; transform: none; cursor: pointer; touch-action: pan-y pinch-zoom; }
 .goals-12 { position: relative; display: grid; }
 .goals-12 > div { position: relative; inset: auto; grid-area: 1 / 1; min-width: 0; padding: 26px 20px 20px; }
 .goals-18, .goals-31, .goals-37 { min-height: 116px; }
 .goals-16 { font-size: clamp(25px, 4vw, 30px); overflow-wrap: anywhere; }
 .goals-24 { line-height: 1.55; }
 .about-2 { width: min(82%, 340px); min-width: 0; margin: 8px auto 20px; }
 .about-8 { right: -4%; width: 112px; }
 .about-9 { font-size: 23px; }
 .about-10 { gap: 18px; }
 .about-12 { font-size: 17px; }
 .steps-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
 .steps-3 > div { transform: none; padding: 28px 22px 24px; min-width: 0; }
 #reviews { padding: 64px 24px 72px; }
 .reviews-2 { gap: 28px; }
 .reviews-3, .reviews-8 { flex-basis: 100%; }
 .reviews-9, .reviews-15 { max-width: 100%; gap: 8px; }
 .reviews-11, .reviews-16 { min-width: 0; overflow-wrap: anywhere; }
 #signup { padding: 56px 24px 40px; }
 .signup-2 { transform: none; }
 .signup-5 { padding: 44px 24px; gap: 20px; }
 .signup-9 { justify-content: center; max-width: 100%; padding: 17px 22px; text-align: center; }
 .footer-1 { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
}
@media (max-width: 540px) {
 .header-1 { padding: 14px 20px 0; gap: 10px; }
 .header-3 { font-size: 38px; }
 .header-2 { gap: 8px; }
 .header-4 { font-size: 11px; padding-left: 8px; }
 .header-7 { padding: 12px 14px; font-size: 12px; }
 #top, #goals, #about, #steps, #signup { padding-left: 24px; padding-right: 24px; }
 .top-3 { font-size: 10px; letter-spacing: .1em; line-height: 1.6; }
 .top-4 { font-size: clamp(34px, 9.4vw, 48px); }
 .top-6, .about-12, .signup-8 { font-size: 16px; line-height: 1.65; }
 .top-7 { gap: 14px; }
 .top-8 { width: 100%; justify-content: center; padding: 16px 18px; font-size: 15px; min-height: 54px; text-align: center; }
 .top-8 > span, .signup-9 > span { flex-shrink: 0; }
 .top-9 { width: 100%; text-align: center; transform: none; font-size: 22px; }
 .top-9 br { display: none; }
 .top-10 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-size: 13px; }
 .top-13 { padding: 16px 14px 8px; }
 .top-20 { width: 106px; }
 .top-21 { font-size: 19px; padding: 14px 10px 18px; }
 .top-16 { padding: 10px 10px 46px; }
 .top-19 { font-size: 23px; left: 12px; }
 .goals-4, .signup-7 { font-size: clamp(30px, 8vw, 40px); line-height: 1.15; }
 .goals-6 { flex-wrap: wrap; }
 .goals-7 { font-size: 22px; }
 .goals-8 { font-size: 12px; padding: 10px 12px; }
 .goals-board { grid-template-columns: minmax(0, 1fr); gap: 28px; }
 .goals-12 > div { padding: 26px 22px 20px; }
 .goals-18, .goals-31, .goals-37 { min-height: 136px; }
 .goals-16 { font-size: 29px; }
 .about-2 { width: 84%; }
 .steps-3 { grid-template-columns: minmax(0, 1fr); }
 .steps-3 > div { gap: 10px; }
 #reviews { padding: 56px 24px 64px; }
 .reviews-10 { width: 48px; height: 48px; }
 .reviews-11, .reviews-16 { padding: 13px 14px 10px; }
 .reviews-13 { font-size: 15px; }
 .signup-5 { padding: 38px 18px; }
 .signup-3, .signup-4 { width: 64px; height: 22px; }
 .signup-3 { left: -8px; }
 .signup-4 { right: -8px; }
 .signup-9 { width: 100%; padding: 16px 12px; font-size: 15px; gap: 8px; }
 .footer-1 { flex-direction: column; align-items: flex-start; padding-left: 24px; padding-right: 24px; }
}
@media (pointer: coarse) {
 .drag-hint { display: none; }
 .tap-hint { display: inline; }
}
@media (prefers-reduced-motion: reduce) {
 html { scroll-behavior: auto; }
 *, *::before, *::after { transition: none !important; animation: none !important; }
}