:root { --ink:#102e25; --forest:#174b38; --green:#267052; --lime:#c9ef9e; --cream:#f7f4ea; --paper:#fffdf8; --line:#d8dfda; --muted:#5d7068; --orange:#f3a154; --display:"Aptos Display","Segoe UI Variable Display","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; --sans:"Aptos","Segoe UI Variable Text","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-feature-settings:"kern" 1,"liga" 1; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
.wrap { width:min(1160px, calc(100% - 40px)); margin-inline:auto; }
.site-header { background:rgba(255,253,248,.96); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20; backdrop-filter:blur(14px); }
.header-inner { min-height:84px; display:flex; align-items:center; justify-content:space-between; gap:30px; }
.brand { display:flex; align-items:center; gap:12px; font-family:var(--display); color:var(--ink); }
.brand-name { display:flex; flex-wrap:wrap; align-items:baseline; font-size:20px; font-weight:790; letter-spacing:-.045em; line-height:1; }
.brand-name > span { color:var(--green); }
.brand-name small { flex-basis:100%; margin-top:5px; color:#71827a; font-size:9px; font-weight:720; letter-spacing:.13em; line-height:1; text-transform:uppercase; }
.brand-mark { width:46px; height:46px; flex:0 0 46px; position:relative; display:block; border-radius:14px; background:var(--forest); box-shadow:0 8px 22px rgba(16,46,37,.18); transform:rotate(-2deg); transition:transform .2s ease,box-shadow .2s ease; }
.brand:hover .brand-mark { transform:rotate(2deg) translateY(-1px); box-shadow:0 11px 26px rgba(16,46,37,.24); }
.brand-cup { position:absolute; width:24px; height:16px; left:10px; bottom:10px; border:3px solid #fffdf8; border-top:0; border-radius:0 0 9px 9px; }
.brand-cup:after { content:""; position:absolute; width:8px; height:8px; right:-8px; top:1px; border:3px solid #fffdf8; border-left:0; border-radius:0 7px 7px 0; }
.brand-leaf { position:absolute; width:11px; height:16px; left:20px; top:7px; border-radius:11px 1px 11px 1px; background:var(--lime); transform:rotate(30deg); }
.brand:focus-visible { outline:3px solid var(--orange); outline-offset:5px; border-radius:6px; }
nav { display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; }
nav a { padding:11px 13px; border-radius:999px; transition:background .18s ease,color .18s ease,transform .18s ease; }
nav a:hover { color:var(--forest); background:#edf4e9; transform:translateY(-1px); }
.footer-links a:hover { color:var(--lime); }
.hero { min-height:650px; display:grid; grid-template-columns:1.14fr .86fr; gap:72px; align-items:center; padding-block:82px; background:radial-gradient(circle at 11% 22%,rgba(201,239,158,.16),transparent 28%); }
.eyebrow { color:var(--green); font-weight:800; text-transform:uppercase; letter-spacing:.16em; font-size:12px; margin:0 0 18px; }
h1,h2,h3,p { margin-top:0; }
h1 { font-family:var(--display); font-size:clamp(50px,6.5vw,82px); font-weight:780; line-height:.98; letter-spacing:-.062em; max-width:760px; margin-bottom:28px; text-wrap:balance; }
.hero-text { font-size:19px; line-height:1.65; color:var(--muted); max-width:650px; }
.hero-actions { display:flex; align-items:center; gap:26px; margin-top:34px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:56px; padding:0 26px; border-radius:999px; font-weight:780; font-size:14px; transition:transform .18s ease,box-shadow .18s ease,background .18s ease; box-shadow:0 8px 24px rgba(16,46,37,.12); }
.button-dark { background:var(--ink); color:white; }
.button-dark:hover, .button-green:hover { transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,46,37,.2); }
.button-green { background:var(--lime); color:var(--ink); margin-top:24px; }
.text-link { min-height:56px; display:inline-flex; align-items:center; padding:0 23px; border:1px solid #aebbb5; border-radius:999px; font-weight:750; transition:.18s ease; }
.text-link:hover { background:white; border-color:var(--ink); transform:translateY(-2px); }
.button:focus-visible,.text-link:focus-visible,nav a:focus-visible,.contact-email:focus-visible { outline:3px solid var(--orange); outline-offset:3px; }
.microcopy { color:#78847f; font-size:12px; margin-top:20px; }
.hero-card { background:var(--cream); border:1px solid #dedccb; border-radius:24px; padding:44px; position:relative; box-shadow:18px 20px 0 #e5efdc,0 24px 70px rgba(16,46,37,.08); }
.cup { height:155px; position:relative; margin-bottom:22px; }
.cup:before { content:""; position:absolute; width:130px; height:86px; border:7px solid var(--forest); border-top-width:10px; border-radius:9px 9px 50px 50px; bottom:12px; left:50%; transform:translateX(-50%); background:linear-gradient(#7a4c2a 0 14px,#faf7ea 15px); }
.cup:after { content:""; position:absolute; width:45px; height:48px; border:7px solid var(--forest); border-left:0; border-radius:0 28px 28px 0; bottom:34px; left:calc(50% + 63px); }
.card-kicker { text-transform:uppercase; letter-spacing:.14em; font-size:11px; font-weight:800; color:var(--green); }
.hero-card h2 { font-family:var(--display); font-size:31px; font-weight:780; line-height:1.1; letter-spacing:-.04em; margin-bottom:22px; }
.hero-card ul { list-style:none; margin:0; padding:0; border-top:1px solid #d5d2c5; }
.hero-card li { padding:13px 0; border-bottom:1px solid #d5d2c5; font-weight:700; display:flex; gap:14px; }
.hero-card li span { color:var(--green); font-size:11px; padding-top:3px; }
.card-note { margin-top:22px; background:var(--orange); color:var(--ink); padding:13px 15px; border-radius:999px; font-size:12px; font-weight:800; text-align:center; }
.trust-strip { border-block:1px solid var(--line); background:white; }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
.trust-grid p { margin:0; padding:25px 28px; display:grid; grid-template-columns:25px 1fr; border-right:1px solid var(--line); }
.trust-grid p:last-child { border:0; }
.trust-grid p > span { grid-row:1/3; width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:var(--lime);font-size:11px;margin-top:2px; }
.trust-grid strong { font-size:14px; }
.trust-grid small { color:var(--muted); margin-top:4px; }
.section { padding-block:100px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:60px; margin-bottom:46px; }
.section-heading > div { flex:1; }
.section-heading > p { flex:0 1 430px; color:var(--muted); line-height:1.65; }
.section-heading h2, .checklist-section h2, .disclosure-panel h2, .faq h2 { font-family:var(--display); font-size:clamp(36px,4.7vw,54px); font-weight:780; line-height:1.04; letter-spacing:-.05em; margin:0; text-wrap:balance; }
.criteria-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.criteria { padding:36px; border:1px solid var(--line); border-radius:20px; background:white; transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease; }
.criteria:hover { transform:translateY(-5px); border-color:#afc0b7; box-shadow:0 18px 45px rgba(16,46,37,.09); }
.criteria > span { font-size:12px; font-weight:800; color:var(--green); }
.criteria h3 { font-family:var(--display); font-size:24px; font-weight:760; line-height:1.2; letter-spacing:-.035em; margin:45px 0 14px; }
.criteria p, .format-card > p { color:var(--muted); line-height:1.65; margin-bottom:0; }
.section-tint { background:var(--cream); }
.compact { margin-bottom:38px; }
.format-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.format-card { background:var(--paper); border:1px solid #dfddcf; border-radius:22px; padding:18px 18px 26px; overflow:hidden; transition:transform .2s ease,box-shadow .2s ease; }
.format-card:hover { transform:translateY(-6px); box-shadow:0 20px 45px rgba(16,46,37,.1); }
.format-visual { height:210px; position:relative; overflow:hidden; background:#dfeacb; margin-bottom:25px; }
.format-visual:before { content:""; position:absolute; inset:40px 25% 25px; background:#f8f1dd; border:3px solid var(--ink); border-radius:7px 7px 18px 18px; box-shadow:12px 14px 0 rgba(23,50,41,.13); }
.format-visual:after { content:"COFFEE"; position:absolute; top:93px; left:0; right:0; text-align:center; font-weight:900; font-size:13px; letter-spacing:.12em; }
.visual-2 { background:#f1d6ad; }
.visual-2:before { border-radius:50%; inset:40px 28% 28px; }
.visual-3 { background:#c9ded7; }
.visual-3:before { inset:25px 33% 18px; border-radius:13px 13px 26px 26px; }
.tag { color:var(--green)!important; text-transform:uppercase; letter-spacing:.12em; font-size:10px; font-weight:900; margin:0 0 10px!important; }
.format-card h3 { font-family:var(--display); font-size:24px; font-weight:760; line-height:1.16; letter-spacing:-.035em; margin-bottom:12px; }
.best { border-top:1px solid var(--line); margin-top:22px; padding-top:15px; font-size:12px; line-height:1.5; color:var(--muted); }
.checklist-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; }
.lead { color:var(--muted); line-height:1.7; margin-top:25px; }
.checklist { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.checklist li { display:flex; gap:24px; align-items:center; border-bottom:1px solid var(--line); padding:19px 5px; font-weight:700; }
.checklist span { color:var(--green); font-size:11px; font-weight:900; }
.disclosure-panel { background:var(--forest); color:white; padding:56px; display:grid; grid-template-columns:.85fr 1.15fr; gap:70px; margin-bottom:80px; }
.eyebrow.light { color:var(--lime); }
.disclosure-panel p { color:#d8e6df; line-height:1.7; }
.disclosure-panel a { color:var(--lime); font-weight:800; }
.faq { display:grid; grid-template-columns:.65fr 1.35fr; gap:80px; }
.faq-list { border-top:1px solid var(--line); }
details { border-bottom:1px solid var(--line); padding:23px 2px; }
summary { cursor:pointer; font-weight:800; font-size:18px; }
details p { color:var(--muted); line-height:1.7; padding-top:16px; margin:0; }
.site-footer { background:#10251f; color:#eaf2ee; padding-top:70px; }
.footer-top { display:grid; grid-template-columns:1.7fr .65fr .65fr; gap:60px; padding-bottom:45px; }
.footer-brand { color:white; }
.footer-brand .brand-name { color:white; }
.footer-brand .brand-name small { color:#9fb1a9; }
.footer-brand .brand-mark { background:#2b644e; box-shadow:none; }
.footer-top > div:first-child > p { color:#9fb1a9; max-width:400px; line-height:1.65; margin-top:18px; }
.footer-links { display:flex; flex-direction:column; gap:12px; font-size:13px; color:#c4d1cb; }
.footer-links strong { color:white; margin-bottom:4px; }
.full-disclosure { border-top:1px solid #365048; padding-block:34px; }
.full-disclosure strong { text-transform:uppercase; letter-spacing:.14em; font-size:11px; color:var(--lime); }
.full-disclosure p { font-size:11px; line-height:1.65; color:#9fb1a9; margin:12px 0 0; }
.footer-bottom { border-top:1px solid #365048; padding-block:22px; display:flex; justify-content:space-between; color:#81978d; font-size:11px; }
.legal-hero { background:var(--cream); padding:72px 0 52px; border-bottom:1px solid var(--line); }
.legal-hero h1 { font-size:clamp(44px,6vw,70px); margin-bottom:18px; }
.legal-hero p { color:var(--muted); max-width:650px; line-height:1.65; }
.legal-content { max-width:850px; padding-block:70px 100px; }
.legal-content h2 { font-family:var(--display); font-size:27px; font-weight:760; line-height:1.2; margin:42px 0 14px; letter-spacing:-.035em; }
.legal-content p,.legal-content li { color:#53665e; line-height:1.75; }
.legal-content a { color:var(--green); text-decoration:underline; }
.notice { background:#eef5e8; border-left:4px solid var(--green); border-radius:0 14px 14px 0; padding:20px 22px; color:var(--ink)!important; }
.contact-content { max-width:760px; padding-block:80px 110px; }
.contact-card { background:white; border:1px solid var(--line); border-radius:24px; padding:clamp(30px,6vw,58px); box-shadow:0 22px 60px rgba(16,46,37,.09); }
.contact-card h2 { margin-top:0; font-size:clamp(30px,4vw,42px); }
.contact-card p { font-size:17px; }
.contact-email { display:inline-flex; align-items:center; margin:12px 0 26px; padding:17px 24px; border-radius:999px; background:var(--ink); color:white!important; text-decoration:none!important; font-size:clamp(16px,2.5vw,20px); font-weight:780; box-shadow:0 12px 28px rgba(16,46,37,.18); transition:.18s ease; }
.contact-email:hover { background:var(--green); transform:translateY(-2px); box-shadow:0 18px 34px rgba(16,46,37,.22); }
.contact-note { font-size:13px!important; color:#74847d!important; border-top:1px solid var(--line); padding-top:22px; margin-bottom:0; }
@media (max-width:820px) { .header-inner { min-height:unset; padding-block:14px; align-items:flex-start; flex-direction:column; } nav { width:100%; overflow-x:auto; padding-bottom:2px; scrollbar-width:none; } nav::-webkit-scrollbar { display:none; } nav a { white-space:nowrap; } .hero { grid-template-columns:1fr; gap:45px; padding-block:60px; } .trust-grid,.criteria-grid,.format-grid,.checklist-section,.disclosure-panel,.faq,.footer-top { grid-template-columns:1fr; } .trust-grid p { border-right:0; border-bottom:1px solid var(--line); } .section-heading { display:block; } .section-heading > p { margin-top:20px; } .checklist-section,.faq { gap:45px; } .disclosure-panel { margin-inline:20px; width:auto; padding:38px 28px; gap:35px; } .footer-top { gap:35px; } }
@media (max-width:520px) { .wrap { width:min(100% - 28px,1160px); } .brand-mark { width:42px; height:42px; flex-basis:42px; } .brand-cup { left:8px; bottom:9px; } .brand-leaf { left:18px; top:5px; } .brand-name { font-size:19px; } .brand-name small { font-size:8px; } h1 { font-size:45px; } .hero-actions { align-items:stretch; flex-direction:column; } .button,.text-link { width:100%; justify-content:center; } .hero-card { padding:30px 25px; border-radius:20px; box-shadow:8px 10px 0 #e5efdc; } .section { padding-block:72px; } .footer-bottom { gap:10px; flex-direction:column; } .contact-card { padding:30px 22px; } }