:root { --cream:#fbf8ef; --paper:#fffdf8; --sand:#eee3cf; --sage:#cbd9c7; --sage-dark:#31584b; --yellow:#efc968; --ink:#29322e; --muted:#64706a; --line:#ded7c9; --shadow:0 16px 38px rgba(64,76,68,.11); --radius:22px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--cream); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.6; }
img { display:block; max-width:100%; }
a { color:inherit; }
p { margin:0 0 1rem; }
h1,h2,h3 { color:#20332b; line-height:1.15; letter-spacing:-.035em; }
h1 { margin:0 0 1rem; font-size:clamp(2.25rem,5.2vw,4.7rem); max-width:15ch; }
h2 { margin:0 0 .9rem; font-size:clamp(1.7rem,3.2vw,2.75rem); }
h3 { margin:.1rem 0 .55rem; font-size:1.15rem; }
.container { width:min(1120px, calc(100% - 2.5rem)); margin:0 auto; }
.skip-link { position:absolute; left:-999px; top:auto; }
.skip-link:focus { left:1rem; top:1rem; z-index:50; background:#fff; padding:.6rem 1rem; }
.site-header { position:sticky; z-index:20; top:0; background:rgba(251,248,239,.92); border-bottom:1px solid rgba(222,215,201,.8); backdrop-filter:blur(10px); }
.header-inner { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }
.brand { display:inline-flex; align-items:center; gap:.65rem; color:#203c32; font-weight:800; text-decoration:none; letter-spacing:-.025em; }
.brand-mark { display:grid; width:34px; height:34px; place-items:center; border-radius:50% 50% 50% 10%; background:var(--sage-dark); color:#fff; font-family:Georgia,serif; font-size:1.18rem; }
.main-nav { display:flex; align-items:center; gap:1.65rem; }
.main-nav a { color:#405047; text-decoration:none; font-size:.94rem; font-weight:650; }
.main-nav a:hover,.main-nav a:focus { color:var(--sage-dark); }
.menu-toggle { display:none; width:45px; height:43px; padding:10px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.menu-toggle span:not(.sr-only) { display:block; height:2px; margin:4px 0; background:var(--sage-dark); }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.hero { position:relative; overflow:hidden; padding:clamp(4rem,8vw,7rem) 0 4.5rem; background:linear-gradient(115deg,#fbf8ef 0%,#f8f1df 64%,#e3ebdd 100%); }
.hero:after { content:""; position:absolute; width:330px; height:330px; right:-100px; bottom:-180px; border:42px solid rgba(239,201,104,.27); border-radius:50%; }
.hero-grid { position:relative; z-index:1; display:grid; grid-template-columns:1.07fr .93fr; align-items:center; gap:3.5rem; }
.hero p { max-width:58ch; color:#45564d; font-size:clamp(1.05rem,1.6vw,1.22rem); }
.eyebrow { display:inline-flex; align-items:center; gap:.45rem; margin-bottom:1rem; color:var(--sage-dark); font-size:.82rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; }
.eyebrow:before { content:""; width:24px; height:2px; background:var(--yellow); }
.hero-actions,.cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; margin-top:1.75rem; }
.button { display:inline-flex; justify-content:center; align-items:center; min-height:49px; padding:.75rem 1.2rem; border:0; border-radius:12px; background:var(--sage-dark); color:#fff; box-shadow:0 8px 16px rgba(49,88,75,.16); text-align:center; text-decoration:none; font-weight:780; cursor:pointer; transition:transform .18s ease,background .18s ease; }
.button:hover { background:#24473b; transform:translateY(-1px); }
.button-yellow { background:#dfae3c; color:#23332b; }
.button-yellow:hover { background:#d29d23; }
.button-quiet { background:transparent; box-shadow:none; border:1px solid #aebcb0; color:#31584b; }
.button-small { min-height:39px; padding:.5rem .8rem; font-size:.85rem; }
.text-link { color:var(--sage-dark); font-weight:750; text-decoration-thickness:1px; text-underline-offset:3px; }
.hero-art { max-width:480px; justify-self:end; filter:drop-shadow(0 24px 26px rgba(62,77,64,.15)); }
.section { padding:clamp(3.8rem,7vw,6.8rem) 0; }
.section-tight { padding:3.5rem 0; }
.section-tint { background:#edf2e9; }
.section-sand { background:#f4ead9; }
.section-heading { max-width:710px; margin-bottom:2.2rem; }
.section-heading p { color:var(--muted); font-size:1.06rem; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.card { padding:1.55rem; border:1px solid rgba(212,205,191,.8); border-radius:var(--radius); background:var(--paper); box-shadow:0 6px 16px rgba(64,76,68,.045); }
.card p { color:var(--muted); margin-bottom:0; }
.icon { display:grid; width:44px; height:44px; place-items:center; margin-bottom:1rem; border-radius:13px; background:#e3ecdf; color:var(--sage-dark); font-size:1.25rem; }
.product-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.3rem; align-items:stretch; }
.product-card { position:relative; display:flex; flex-direction:column; padding:1.4rem; border:1px solid #ddd5c5; border-radius:23px; background:var(--paper); box-shadow:var(--shadow); }
.product-card.featured { border:2px solid var(--sage-dark); transform:translateY(-9px); }
.pill { align-self:flex-start; margin-bottom:.65rem; padding:.22rem .65rem; border-radius:99px; background:#e7bd52; color:#273229; font-size:.75rem; font-weight:800; }
.product-card img { width:100%; max-height:205px; margin:0 auto 1rem; object-fit:contain; }
.product-card p { color:var(--muted); }
.price { margin-top:auto; color:#22372e; font-size:1.75rem; font-weight:850; letter-spacing:-.045em; }
.price small { color:var(--muted); font-size:.82rem; font-weight:600; letter-spacing:0; }
.product-card .button { width:100%; margin-top:1rem; }
.split { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:4rem; }
.split-reverse > :first-child { order:2; }
.split p { color:var(--muted); font-size:1.04rem; }
.check-list { padding:0; margin:1.4rem 0 0; list-style:none; }
.check-list li { position:relative; padding:.55rem 0 .55rem 1.95rem; border-bottom:1px solid rgba(211,205,191,.7); }
.check-list li:before { content:"✓"; position:absolute; left:0; top:.55rem; display:grid; width:23px; height:23px; place-items:center; border-radius:50%; background:#dbe9d7; color:#31584b; font-weight:900; font-size:.8rem; }
.notice { padding:1.25rem 1.35rem; border-left:4px solid #d8a93e; border-radius:0 14px 14px 0; background:#fff6df; color:#4c5046; }
.notice strong { color:#394a40; }
.price-box { padding:2rem; border-radius:var(--radius); background:#2f5749; color:#fff; box-shadow:var(--shadow); }
.price-box h2,.price-box p { color:#fff; }
.price-box .price { color:#fff; font-size:3rem; }
.price-box .button { background:#efc968; color:#21342b; }
.price-box .button:hover { background:#f5d47e; }
.steps { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; counter-reset:steps; }
.step { position:relative; padding:1.35rem 1.2rem 1.15rem 4.4rem; border-radius:17px; background:#fffdf8; }
.step:before { counter-increment:steps; content:counter(steps); position:absolute; top:1.2rem; left:1.15rem; display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:50%; background:#e8c86f; color:#25372e; font-weight:850; }
.step p { margin:0; color:var(--muted); }
.faq { max-width:800px; }
details { border-bottom:1px solid var(--line); }
summary { padding:1.15rem 2rem 1.15rem 0; color:#2c4237; font-weight:750; cursor:pointer; list-style:none; position:relative; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; position:absolute; top:.95rem; right:.2rem; font-size:1.5rem; color:var(--sage-dark); font-weight:400; }
details[open] summary:after { content:"–"; }
details p { max-width:700px; color:var(--muted); }
.cross-sell { display:grid; grid-template-columns:1fr auto; align-items:center; gap:1.5rem; padding:2rem; border-radius:22px; background:#e0eadb; }
.cross-sell h2 { max-width:22ch; font-size:clamp(1.5rem,3vw,2.25rem); }
.cross-sell p { margin:0; color:#496054; }
.comparison { width:100%; border-collapse:collapse; overflow:hidden; border-radius:16px; background:#fffdf8; box-shadow:var(--shadow); }
.comparison th,.comparison td { padding:1rem; border-bottom:1px solid #ebe2d4; text-align:left; }
.comparison th { background:#dfeada; color:#31584b; }
.comparison tr:last-child td { border-bottom:0; font-weight:800; }
.comparison .saving { color:#2c6a51; }
.page-hero { padding:4rem 0 3rem; background:linear-gradient(115deg,#f9f4e8,#e8f0e5); }
.page-hero h1 { max-width:19ch; font-size:clamp(2.25rem,4.5vw,4rem); }
.prose { max-width:830px; }
.prose h2 { margin-top:2.55rem; font-size:1.65rem; }
.prose h3 { margin-top:1.7rem; }
.prose p,.prose li { color:#4d5a53; }
.prose ul { padding-left:1.2rem; }
.contact-card { padding:2rem; border-radius:var(--radius); background:#fffdf8; box-shadow:var(--shadow); }
.thank-you { min-height:calc(100vh - 75px); display:grid; place-items:center; padding:4rem 0; background:linear-gradient(145deg,#fbf8ef,#e3ecde); }
.thank-card { max-width:720px; padding:clamp(2rem,6vw,4rem); border-radius:27px; background:#fffdf8; box-shadow:var(--shadow); text-align:center; }
.thank-card h1 { max-width:none; font-size:clamp(2rem,5vw,3.5rem); }
.thank-icon { display:grid; width:68px; height:68px; place-items:center; margin:0 auto 1rem; border-radius:50%; background:#deebd9; color:#31584b; font-size:2rem; }
.cookie-banner { position:fixed; z-index:40; right:1rem; bottom:1rem; display:flex; max-width:760px; align-items:center; gap:1.25rem; padding:1.15rem 1.25rem; border:1px solid #dcd4c3; border-radius:16px; background:#fffdf8; box-shadow:0 12px 35px rgba(39,53,45,.23); }
.cookie-banner p { margin:0; color:#58655d; font-size:.87rem; line-height:1.45; }
.cookie-banner a { color:#31584b; }
.cookie-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.45rem; min-width:290px; }
.cookie-settings { border:0; background:transparent; color:#31584b; text-decoration:underline; cursor:pointer; font-weight:700; font-size:.8rem; }
.cookie-modal { position:fixed; z-index:50; inset:0; display:grid; place-items:center; padding:1rem; }
.cookie-modal-backdrop { position:absolute; inset:0; background:rgba(27,42,34,.48); backdrop-filter:blur(3px); }
.cookie-modal-card { position:relative; width:min(650px,100%); max-height:calc(100vh - 2rem); overflow:auto; padding:clamp(1.5rem,4vw,2.35rem); border:1px solid #d9d0bf; border-radius:24px; background:#fffdf8; box-shadow:0 28px 65px rgba(24,42,33,.28); }
.cookie-modal-card h2 { margin-bottom:.65rem; font-size:clamp(1.7rem,4vw,2.25rem); }
.cookie-modal-card > p { max-width:56ch; color:var(--muted); font-size:.94rem; }
.cookie-modal-close { position:absolute; top:1rem; right:1rem; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:#edf2e9; color:#31584b; cursor:pointer; font-size:1.5rem; line-height:1; }
.cookie-modal-close:hover { background:#dfeadd; }
.cookie-choice { display:grid; grid-template-columns:1fr auto; gap:1rem; align-items:center; margin-top:.8rem; padding:1rem 0; border-top:1px solid #e7dfd1; }
.cookie-choice strong { color:#2c4237; }
.cookie-choice p { margin:.15rem 0 0; color:var(--muted); font-size:.84rem; line-height:1.45; }
.cookie-choice.is-required { opacity:.8; }
.switch { display:grid; grid-template-columns:44px auto; gap:.55rem; align-items:center; color:#526158; font-size:.75rem; font-weight:750; white-space:nowrap; cursor:pointer; }
.switch input { position:absolute; opacity:0; pointer-events:none; }
.switch span { position:relative; width:44px; height:25px; border-radius:99px; background:#c6d1c5; transition:background .18s ease; }
.switch span:after { content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(31,48,39,.25); transition:transform .18s ease; }
.switch input:checked + span { background:#4d8167; }
.switch input:checked + span:after { transform:translateX(19px); }
.switch input:focus-visible + span { outline:3px solid #dfb64e; outline-offset:3px; }
.cookie-modal-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.7rem; margin-top:1.5rem; padding-top:1.3rem; border-top:1px solid #e7dfd1; }
.site-footer { padding:2.6rem 0 1.2rem; background:#273d33; color:#e5eee2; }
.footer-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:2rem; }
.site-footer .brand { color:#fff; }
.site-footer .brand-mark { background:#ddba57; color:#2a4136; }
.site-footer p { max-width:470px; color:#c7d1c9; font-size:.9rem; }
.footer-links { display:grid; grid-template-columns:repeat(2,max-content); align-content:start; justify-content:end; gap:.45rem 1.7rem; }
.footer-links a { color:#dde8df; font-size:.9rem; text-decoration:none; }
.footer-links a:hover { text-decoration:underline; }
.footer-bottom { display:flex; justify-content:space-between; gap:2rem; margin-top:1.8rem; padding-top:1rem; border-top:1px solid rgba(231,240,230,.18); }
.footer-bottom p { margin:0; font-size:.76rem; }
.footer-bottom p:first-child { max-width:650px; }
.includes-note { padding:.7rem 1rem; color:#815b1b; background:#fff2d5; font-size:.85rem; text-align:center; }
@media (max-width:800px) { .menu-toggle { display:block; } .main-nav { position:absolute; top:76px; right:0; left:0; display:none; padding:1rem 1.25rem 1.25rem; border-bottom:1px solid var(--line); background:#fbf8ef; box-shadow:0 10px 15px rgba(50,60,50,.08); } .main-nav.is-open { display:grid; gap:.9rem; } .hero-grid,.split { grid-template-columns:1fr; gap:2.5rem; } .split-reverse > :first-child { order:initial; } .hero-art { max-width:390px; justify-self:center; } .cards,.product-grid,.steps { grid-template-columns:1fr; } .product-card.featured { transform:none; } .cross-sell { grid-template-columns:1fr; } .footer-grid { grid-template-columns:1fr; } .footer-links { justify-content:start; } .cookie-banner { right:.7rem; bottom:.7rem; left:.7rem; display:block; } .cookie-actions { justify-content:flex-start; min-width:0; margin-top:.75rem; } }
@media (max-width:520px) { .container { width:min(100% - 1.5rem,1120px); } .hero { padding-top:3.4rem; } .section { padding:3.5rem 0; } .button { width:100%; } .hero-actions { display:grid; } .price-box { padding:1.5rem; } .comparison { font-size:.87rem; } .comparison th,.comparison td { padding:.75rem .5rem; } .footer-bottom { display:block; } .footer-bottom p + p { margin-top:.5rem; } .cookie-modal-card { padding:1.35rem; } .cookie-choice { grid-template-columns:1fr; gap:.65rem; } .switch { justify-self:start; } .cookie-modal-actions { display:grid; } }