:root{--bg:#f7f5ef;--paper:#fffef9;--ink:#171b22;--muted:#7a7e83;--line:#dedbd1;--green:#244b37;--sand:#e8dfcf}
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
body:before,body:after{content:"";position:absolute;width:180px;height:180px;border-radius:60% 10% 60% 10%;background:#315a3f;opacity:.10;z-index:-1}
body:before{top:-70px;left:-80px;transform:rotate(30deg)} body:after{top:170px;right:-100px;transform:rotate(-30deg)}
.hero{min-height:92svh;padding:calc(42px + env(safe-area-inset-top)) 24px 42px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;max-width:760px;margin:auto}
.brandmark{width:78px;height:78px;border:3px solid var(--ink);border-radius:50%;display:grid;place-items:center;font-family:Georgia,serif;font-weight:700;font-size:24px;margin-bottom:24px}
.eyebrow{letter-spacing:.18em;font-size:11px;font-weight:800;margin:0 0 12px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;line-height:.98;margin:0;font-weight:500;letter-spacing:-.03em}
h1{font-size:clamp(48px,13vw,86px)} h2{font-size:clamp(38px,10vw,58px)} h3{font-size:32px}
.lead,.muted{color:var(--muted);line-height:1.65;font-size:16px}.lead{max-width:560px;margin:24px auto 28px}
.hero-actions{display:grid;gap:12px;width:min(100%,360px)} .btn{border:0;padding:17px 19px;letter-spacing:.14em;font-size:12px;font-weight:800;cursor:pointer;text-decoration:none;text-align:center}
.dark{background:#111;color:#fff}.outline{background:transparent;border:2px solid #111;color:#111}.full{display:block;width:100%}
main{max-width:760px;margin:auto}.section{padding:68px 20px;border-top:1px solid var(--line)}.last{padding-bottom:140px}
.chips{display:flex;gap:8px;overflow:auto;margin:24px -20px 18px;padding:0 20px}.chip{border:1px solid var(--line);background:var(--paper);border-radius:999px;padding:10px 16px;white-space:nowrap;font-weight:650}.chip.active{background:var(--ink);color:#fff}
.products{display:grid;grid-template-columns:1fr 1fr;gap:12px}.product{background:var(--paper);border:1px solid var(--line);border-radius:20px;overflow:hidden}.product-media{aspect-ratio:1/1;background:linear-gradient(145deg,#d7c5ad,#f2e6d8);display:flex;align-items:flex-end;padding:14px}.emoji{font-size:52px}.product-body{padding:14px}.product h4{font-family:Georgia,serif;font-size:19px;margin:0 0 6px}.product p{color:var(--muted);font-size:12px;line-height:1.45;min-height:34px;margin:0 0 12px}.product-bottom{display:flex;justify-content:space-between;align-items:center}.add{width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);color:#fff;font-size:22px}
.section-head{display:flex;justify-content:space-between;gap:20px}.pill{font-size:10px;letter-spacing:.12em;background:var(--green);color:#fff;border-radius:999px;padding:8px 10px;height:max-content}
.video-card{margin-top:24px;min-height:300px;border-radius:24px;padding:20px;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.55),transparent 55%),linear-gradient(135deg,#273c2e,#bd8f63);display:flex;flex-direction:column;justify-content:space-between}.play{margin:auto;width:68px;height:68px;border-radius:50%;border:1px solid #ffffff80;background:#ffffff22;color:#fff;font-size:24px}.video-card>div{display:flex;justify-content:space-between;gap:16px;align-items:end}.video-card strong{font-family:Georgia,serif;font-size:24px}.video-card span{font-size:11px;opacity:.8}
.steps{display:grid;gap:12px;margin-top:26px}.step{display:flex;gap:12px;align-items:center;background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:14px}.step span{min-width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--sand);font-weight:800}.step small{display:block;color:var(--muted);margin-top:3px}
.school-card,.rewards-card{margin-top:22px;background:var(--green);color:#fff;border-radius:20px;padding:18px;display:flex;gap:14px;align-items:center;font-size:28px}.school-card p,.rewards-card p{margin:4px 0 0;opacity:.76;font-size:13px}.rewards-card{background:#111}.progress{height:7px;background:#ffffff2b;border-radius:999px;margin-top:12px;overflow:hidden}.progress i{display:block;height:100%;width:70%;background:#fff}
.cartbar{position:fixed;left:14px;right:14px;bottom:calc(14px + env(safe-area-inset-bottom));background:#fffffff2;backdrop-filter:blur(18px);border:1px solid #00000012;box-shadow:0 12px 38px #00000029;padding:10px 10px 10px 16px;display:flex;justify-content:space-between;align-items:center;z-index:20;border-radius:18px;transform:translateY(140%);transition:.3s}.cartbar.show{transform:translateY(0)}.cartbar small{display:block;color:var(--muted)}.cartbar strong{font-size:18px}
.backdrop{position:fixed;inset:0;background:#0006;opacity:0;pointer-events:none;transition:.25s;z-index:39}.backdrop.show{opacity:1;pointer-events:auto}.drawer{position:fixed;left:0;right:0;bottom:0;max-height:82svh;background:var(--paper);z-index:40;transform:translateY(105%);transition:.3s;border-radius:28px 28px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));overflow:auto}.drawer.show{transform:translateY(0)}.drawer-head{display:flex;justify-content:space-between}.close{border:0;background:#eee;width:38px;height:38px;border-radius:50%;font-size:24px}.cart-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);padding:14px 0}.qty{display:flex;align-items:center;gap:8px}.qty button{border:1px solid var(--line);background:white;width:28px;height:28px;border-radius:50%}.field{display:grid;gap:8px;margin:18px 0;font-size:12px;font-weight:700;letter-spacing:.08em}select{padding:15px;border:1px solid var(--line);background:#fff;border-radius:12px;font-size:16px}.total{display:flex;justify-content:space-between;align-items:center;margin:20px 0}.total strong{font-size:26px}.fine{font-size:11px;line-height:1.5;color:var(--muted);text-align:center}
@media(min-width:680px){.products{grid-template-columns:repeat(3,1fr)}.steps{grid-template-columns:1fr 1fr}.hero{min-height:80vh}}