:root { --ink:#173a32; --forest:#2f624e; --moss:#81a66d; --cream:#f7f3ea; --sand:#ebe3d1; --white:#fffdf8; --line:#d7d0c3; }
* { box-sizing:border-box; }
img { max-width:100%; height:auto; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family: ui-rounded, "Avenir Next", Avenir, "Trebuchet MS", sans-serif; line-height:1.5; }
h1,h2,h3,p { margin-top:0; } h1,h2 { letter-spacing:-.045em; line-height:1.04; } h1 { font-size:clamp(2.8rem,6vw,5.4rem); } h2 { font-size:clamp(2rem,4vw,3.45rem); } h3 { font-size:1.45rem; margin-bottom:.45rem; }
main { overflow:hidden; } section { padding:clamp(4.5rem,8vw,8rem) max(1.4rem, calc((100vw - 1160px)/2)); } .eyebrow { color:var(--forest); text-transform:uppercase; font-weight:800; font-size:.78rem; letter-spacing:.12em; }
.hero { min-height:720px; display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,7vw,7rem); align-items:center; background:linear-gradient(112deg,#f7f2e6 0%,#f4efdf 58%,#dce5d0 100%); }
.intro { max-width:38rem; font-size:1.22rem; } .button { display:inline-block; border-radius:999px; padding:1.05rem 1.4rem; color:var(--white); background:var(--forest); font-weight:800; text-decoration:none; transition:transform .2s,background .2s; } .button:hover { transform:translateY(-2px); background:#204a3a; } .fine-print { margin:1rem 0 0; font-size:.9rem; max-width:28rem; }
figure { margin:0; } .hero__image { display:flex; justify-content:center; align-items:center; } .hero__image img { display:block; width:min(100%,430px); height:auto; aspect-ratio:1 / 1; object-fit:contain; filter:drop-shadow(0 24px 24px rgba(21,54,42,.22)); border-radius:5px; }
.origin { display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2.5rem,7vw,7rem); align-items:center; background:#edf0e4; } .origin__copy { min-width:0; max-width:33rem; } .origin__copy > p:last-child { font-size:1.09rem; } .origin__photos { min-width:0; width:100%; max-width:100%; } .origin__photo { width:100%; max-width:100%; overflow:hidden; border-radius:16px; box-shadow:0 16px 35px rgba(32,54,40,.14); background:var(--sand); } .origin__photo img { display:block; width:100%; max-width:100%; height:100%; object-fit:cover; filter:saturate(1.04) contrast(1.03); } .origin__photo--main { aspect-ratio:4 / 3; } .origin__photo--main img { object-position:50% 46%; }
.story { background:var(--white); } .story > div:first-child { max-width:50rem; } .story__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:3.5rem; } .story article { padding:1.7rem; background:var(--cream); border:1px solid var(--line); border-radius:15px; } .story span { display:inline-flex; width:2.1rem; height:2.1rem; align-items:center; justify-content:center; border-radius:50%; background:var(--moss); color:var(--white); font-weight:800; margin-bottom:1.5rem; }
.preview,.qr { display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,7vw,7rem); align-items:center; } .preview figure img,.qr figure img { display:block; width:100%; height:auto; aspect-ratio:auto; object-fit:contain; border-radius:16px; box-shadow:0 16px 35px rgba(32,54,40,.14); } .preview { background:#dfead7; } .qr { background:#f4ede0; } .preview__copy,.qr__copy { max-width:33rem; }
.signup { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(2.5rem,7vw,7rem); align-items:center; background:var(--forest); color:var(--white); } .signup .eyebrow { color:#c4ddad; } .signup h2 { margin-bottom:.85rem; } .signup__copy { max-width:43rem; } .signup__copy > p:last-child { max-width:40rem; font-size:1.08rem; margin-bottom:0; } .signup__banner { width:100%; overflow:hidden; border-radius:16px; box-shadow:0 18px 38px rgba(10,34,25,.24); background:#14382e; clip-path:inset(0 round 16px); } .signup__banner img { display:block; width:100%; height:100%; aspect-ratio:2.2 / 1; object-fit:cover; border-radius:inherit; } .signup__embed { grid-column:1 / -1; justify-self:center; width:100%; max-width:34rem; margin:0 auto; } .signup__form label { display:block; font-weight:700; margin-bottom:.45rem; } .form-row { display:flex; gap:.65rem; } input[type=email] { flex:1; min-width:0; font:inherit; padding:1rem; border:1px solid transparent; border-radius:8px; } button { font:inherit; font-weight:800; color:var(--ink); border:0; border-radius:8px; background:#c4ddad; padding:0 1.1rem; cursor:pointer; } .consent { display:flex !important; gap:.55rem; margin-top:1rem; font-size:.84rem; font-weight:400 !important; } .consent input { width:1.1rem; height:1.1rem; margin:.12rem 0 0; } .consent a, footer a { color:inherit; } .form-status { min-height:1.5rem; margin:1rem 0 0; font-weight:700; }
.signup__embed { width:100%; max-width:34rem; }
footer { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:1.3rem max(1.4rem, calc((100vw - 1160px)/2)); background:#183b31; color:#eff5e7; font-size:.9rem; }
.footer__social { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:.55rem; }
.footer__social a { display:inline-flex; align-items:center; gap:.38rem; color:inherit; text-decoration:none; border:1px solid rgba(239,245,231,.52); border-radius:999px; padding:.42rem .72rem; transition:background .2s,border-color .2s,color .2s; }
.social-icon { width:1.02rem; height:1.02rem; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.social-icon--facebook { fill:currentColor; stroke:none; }
.social-link--instagram .social-icon { color:#f06b54; }
.social-link--facebook .social-icon { color:#6fa8ff; }
.footer__social a:hover,.footer__social a:focus-visible { color:#183b31; background:#eff5e7; border-color:#eff5e7; }
.cookie-banner { position:fixed; z-index:20; right:1.2rem; bottom:1.2rem; width:min(31rem,calc(100% - 2.4rem)); padding:1.15rem; border:1px solid var(--line); border-radius:14px; background:var(--white); color:var(--ink); box-shadow:0 15px 40px rgba(23,58,50,.22); }
.cookie-banner strong { display:block; margin-bottom:.35rem; font-size:1rem; }.cookie-banner p { margin:0; font-size:.88rem; }.cookie-banner__actions { display:flex; justify-content:flex-end; gap:.6rem; margin-top:1rem; }.cookie-banner button { min-height:2.7rem; padding:.5rem .9rem; }.cookie-banner__decline { background:transparent; border:1px solid var(--line); }
@media (max-width:760px) { .cookie-banner__actions { justify-content:stretch; }.cookie-banner__actions button { flex:1; } }
@media (max-width:760px) { .hero,.origin,.preview,.qr,.signup { grid-template-columns:1fr; } .hero { min-height:auto; padding-top:4.5rem; } .hero__image { grid-row:1; } .hero__image img { width:min(80%,360px); } .story__grid { grid-template-columns:1fr; } .signup__banner { border-radius:13px; } .signup__embed { width:100%; } .form-row { flex-direction:column; } button { min-height:3.2rem; } footer { align-items:flex-start; flex-direction:column; } .footer__social { justify-content:flex-start; } }

/* Product facts, FAQ and privacy page */
.facts { display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; padding-top:2.1rem; padding-bottom:2.1rem; background:#204a3a; color:#fffdf8; }
.facts div { padding:0 1rem; border-left:1px solid rgba(255,253,248,.35); }.facts div:first-child { border-left:0; }.facts strong,.facts span { display:block; }.facts strong { font-size:1.08rem; }.facts span { margin-top:.25rem; color:#d6e6c6; font-size:.92rem; }
.preview__copy .button { margin-top:.4rem; }
.faq { display:grid; grid-template-columns:minmax(14rem,.7fr) minmax(0,1.3fr); gap:clamp(2.5rem,7vw,7rem); align-items:start; background:var(--white); }.faq__intro { max-width:25rem; }.faq__items { border-top:1px solid var(--line); }.faq details { border-bottom:1px solid var(--line); padding:1.25rem 0; }.faq summary { cursor:pointer; font-weight:800; font-size:1.1rem; list-style-position:inside; }.faq details p { margin:.8rem 1.5rem 0 0; color:#35564c; }
.footer__preferences { min-height:auto; padding:.42rem .72rem; color:inherit; border:1px solid rgba(239,245,231,.52); background:transparent; border-radius:999px; font-size:inherit; font-weight:400; }.footer__preferences:hover,.footer__preferences:focus-visible { color:#183b31; background:#eff5e7; border-color:#eff5e7; }
.legal { width:min(850px,calc(100% - 2.8rem)); margin:0 auto; padding:clamp(4.5rem,8vw,8rem) 0; }.legal h1 { max-width:13ch; }.legal h2 { margin:3rem 0 1rem; font-size:clamp(1.7rem,3vw,2.7rem); }.legal p,.legal li { max-width:70ch; font-size:1.05rem; }.legal a { color:var(--forest); font-weight:800; }.legal__back { display:inline-block; margin-top:2rem; }
@media (max-width:760px) { .facts,.faq { grid-template-columns:1fr; }.facts { gap:.9rem; }.facts div { padding:0; border-left:0; } }