@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#183b34;--green:#194d40;--lime:#dcf59a;--muted:#68766e;--line:#dce3dc;--cream:#f7f8f2}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--cream);font:15px 'DM Sans',sans-serif}button,input,select{font:inherit}button,a{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer;border:0;border-radius:7px;padding:12px 20px;background:var(--green);color:white;font-weight:600}button:hover{filter:brightness(1.12)}button:disabled{opacity:.45;cursor:default}button.secondary{background:white;border:1px solid var(--line);color:var(--ink)}header{background:#fff;display:flex;align-items:center;justify-content:space-between;padding:24px 5%;gap:20px;border-bottom:1px solid var(--line)}.logo{display:flex;align-items:center;gap:10px;font:bold 29px Manrope,sans-serif;letter-spacing:-1px}.logo>span:first-child{background:var(--green);color:var(--lime);border-radius:8px;padding:1px 8px}.logo-sub{border-left:1px solid var(--line);padding-left:13px;font:9px/1.5 Manrope,sans-serif;letter-spacing:1px}nav{display:flex;gap:28px;font-size:13px}nav a:hover,nav a.active{color:#528055;text-decoration:underline;text-underline-offset:8px}.cart{background:#edf1e8;color:var(--ink);font-size:13px}.cart span {
    background: var(--green);
    color: white;
    border-radius: 50%;
    padding: 3px 7px;
    margin-left: 10px;
    display: inline-flex;
    width: 25px;
    height: 25px;
    align-content: center;
    align-items: center;
    justify-content: center;
}.demo{padding:9px 5%;background:#e9efdf;color:#4b6152;font-size:10px;letter-spacing:1.4px;display:flex;justify-content:space-between}.demo span{letter-spacing:0}main{max-width:1320px;padding:36px 4% 70px;margin:auto;min-height:70vh}.hero{background:var(--green);color:#fff;border-radius:14px;padding:48px;display:grid;grid-template-columns:1.2fr 1fr;gap:35px;overflow:hidden}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:700;text-transform:uppercase}.hero .eyebrow{color:var(--lime)}h1{font:600 clamp(32px,4vw,54px)/1.1 Manrope,sans-serif;letter-spacing:-2px;margin:20px 0}h2{font:700 27px Manrope,sans-serif;letter-spacing:-.8px}h3{font:700 19px Manrope,sans-serif;line-height:1.4;margin:14px 0}p{line-height:1.7}.hero p{color:#ccdbd2;max-width:420px}.hero button{background:var(--lime);color:var(--ink);margin-top:15px}.hero-art{position:relative;min-height:260px;display:grid;place-items:center;background:radial-gradient(ellipse,#397057,transparent 70%)}.shield{width:170px;height:190px;background:var(--lime);clip-path:polygon(50% 0,95% 20%,90% 65%,75% 85%,50% 100%,25% 85%,10% 65%,5% 20%);display:grid;place-items:center;font-size:90px;color:var(--green);transform:rotate(-8deg)}.float{position:absolute;background:#fff;color:var(--ink);border-radius:9px;padding:14px 18px;box-shadow:0 10px 30px #062d3333;font-size:12px}.float.one{left:0;bottom:15px}.float.two{right:-5px;top:20px}.float b{display:block;font-size:15px;margin-bottom:3px}.trust{display:flex;gap:35px;padding:23px 0;color:var(--muted);font-size:12px;border-bottom:1px solid var(--line)}.section-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:25px}.section-head p{font-size:13px;color:var(--muted);margin-top:-8px}.search{padding:13px 16px;border:1px solid var(--line);border-radius:8px;width:260px;background:white}.filters{display:flex;gap:9px;margin:17px 0 25px;flex-wrap:wrap}.filters button{background:transparent;color:var(--muted);border:1px solid var(--line);padding:9px 18px;font-size:12px;border-radius:30px}.filters button.selected{background:var(--green);color:#fff;border-color:var(--green)}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.card{background:#fff;border:1px solid var(--line);border-radius:11px;overflow:hidden}.cover{height:145px;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#e8eddd;color:#567544}.cover.blue{background:#e1ecea;color:#487e7a}.cover.sand{background:#f0e7d6;color:#967750}.cover:before{content:'';width:150px;height:150px;border:25px solid currentColor;opacity:.1;position:absolute;border-radius:50%;right:-25px;top:20px}.cover .glyph{font-size:62px;font-weight:500;letter-spacing:-6px}.tag{font-size:10px;letter-spacing:.7px;text-transform:uppercase;padding:6px 9px;border-radius:4px;background:#fff;position:absolute;left:18px;top:16px;color:var(--ink)}.card-body{padding:22px}.card-body p{font-size:13px;color:var(--muted);min-height:44px}.meta{display:flex;gap:16px;font-size:11px;color:var(--muted);margin:18px 0}.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);padding-top:17px}.price{font-size:23px;font-weight:700}.price small{font-size:10px;font-weight:400;color:var(--muted)}.card button{font-size:12px;padding:10px 14px}.panel{background:white;border:1px solid var(--line);padding:28px;border-radius:12px;margin-top:22px}.twocol{display:grid;grid-template-columns:1.5fr 1fr;gap:25px}.row{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.muted{color:var(--muted);font-size:13px}label{display:block;font-size:12px;margin:17px 0 7px}input,select{width:100%;border:1px solid var(--line);border-radius:6px;padding:12px;background:#fff;color:var(--ink)}.qty{width:70px}.full{width:100%;margin-top:20px}.note{padding:14px;background:#f1f5e9;border-radius:6px;font-size:12px;line-height:1.7}.empty{text-align:center;padding:65px 20px}.pill{font-size:11px;background:#e9f2da;color:#416534;border-radius:20px;padding:6px 10px}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.stats strong{font:700 32px Manrope;display:block;margin-top:12px}.lesson{max-width:750px;margin:auto}.lesson p{font-size:17px}.progress{height:7px;background:#e6ecdf;border-radius:10px;margin:15px 0;overflow:hidden}.progress span{display:block;height:100%;background:#739449}.link{background:transparent;color:var(--green);padding:8px}.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);background:var(--ink);color:white;padding:15px 25px;border-radius:9px;display:none;z-index:10}footer{border-top:1px solid var(--line);padding:30px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px;color:var(--muted);font-size:12px}footer .logo{color:var(--ink)}footer small{max-width:230px;text-align:right}@media(max-width:850px){nav{gap:13px;flex-wrap:wrap}.logo-sub{display:none}.hero{padding:30px}.hero-art{min-height:200px}.grid{grid-template-columns:repeat(2,1fr)}.twocol{grid-template-columns:1fr}.trust{gap:15px;flex-wrap:wrap}footer{flex-wrap:wrap}}@media(max-width:580px){header{flex-wrap:wrap;padding:18px 5%}nav{order:3;width:100%;justify-content:space-between;font-size:11px}.hero{grid-template-columns:1fr}.hero-art{display:none}.grid{grid-template-columns:1fr}.section-head{display:block}.search{width:100%}.demo span{display:none}.stats{grid-template-columns:1fr}main{padding:23px 5%}.row{flex-wrap:wrap}.hero h1{font-size:39px}footer small{text-align:left}}

/* Keep standalone content clear of the iPhone sensor housing and home indicator. */
body{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
header{padding-top:calc(24px + env(safe-area-inset-top))}
footer{padding-bottom:calc(30px + env(safe-area-inset-bottom))}
@media(max-width:580px){header{padding-top:calc(18px + env(safe-area-inset-top))}}

/* Use one vector arrow across browsers and keep the header above scrolling content. */
.arrow-icon{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;flex-shrink:0}
.logo>span:first-child{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;padding:0}
.logo .arrow-icon{width:36px;height:36px;vertical-align:middle}
.glyph .arrow-icon{width:1.35em;height:1.35em}
header{position:fixed;top:0;left:0;right:0;z-index:100;padding-left:calc(5% + env(safe-area-inset-left));padding-right:calc(5% + env(safe-area-inset-right));box-shadow:0 2px 12px #183b3408}
body{padding-top:var(--header-height,91px)}
html{scroll-padding-top:calc(var(--header-height,91px) + 20px)}
@media(max-width:580px){body{padding-top:var(--header-height,133px)}}

/* A rounded vector check shares the arrow icon's light, simple stroke. */
.check-icon{display:inline-block;width:1.25em;height:1.25em;vertical-align:-.25em;flex-shrink:0}
.trust>span{display:inline-flex;align-items:center;gap:7px}
.trust .check-icon{color:var(--green)}
.shield .check-icon{width:100px;height:100px}
.success-mark{display:flex;align-items:center;justify-content:center;width:72px;height:72px;margin:0 auto 24px;border-radius:50%;background:var(--lime);color:var(--green)}
.success-mark .check-icon{width:44px;height:44px}
.note .check-icon{color:var(--green);margin-right:4px}

/* Decorative symbols use the same vector stroke rather than browser fonts. */
.ui-icon{display:inline-block;width:1.2em;height:1.2em;vertical-align:-.22em;flex-shrink:0}
.glyph .ui-icon{width:1.15em;height:1.15em;vertical-align:middle}
.meta>span{display:inline-flex;align-items:center;gap:5px}