/* ============================================================
mU Greens and Greens — site.css
Header, footer and homepage design CSS, extracted from the
approved mockup (mugreens-homepage-mockup.html, revision 2).
Load order: tokens.css → fonts.css → mu-logo-ring.css → site.css.
Every colour is a var() from tokens.css; no hex, rgb() or
font names here. BEM, one namespace per homepage section.
Breakpoints: ≤720 phone · 721–960 tablet · >960 desktop.
Build changes against the mockup are commented where they
happen and collected in "Build additions" at the end.
============================================================ */
/* ============================================================
Layout and motion tokens added for the homepage by the designer
("proposed tokens" in the mockup). tokens.css is the approved,
unchanged design system, so these live here. No colours: the
mockup's two colour aliases (--stem-color, --footer-motif) were
resolved to existing tokens where they are used.
============================================================ */
:root {
/* motion: hero stems, headline, ticker */
--motion-stem-grow: 3000ms; /* seed → open seed-leaves */
--motion-stem-stagger: 160ms; /* per-stem delay step */
--motion-stem-sway: 7000ms; /* one half-sway; alternates */
--motion-word-rise: 600ms; /* H1 word rise (position only) */
--motion-word-stagger: 60ms;
--motion-ticker-pulse: 2400ms;
--motion-menu: 180ms; /* mega/dropdown reveal */
--ease-unfurl: cubic-bezier(.16, 1, .3, 1);
--ease-sway: cubic-bezier(.45, 0, .55, 1);
--sway-angle: 1.5deg;
--word-rise: 12px;
/* layout */
--gutter: var(--space-5); /* page gutter: 24 desktop, 16 phone */
--header-main-h: 80px;
--header-condensed-h: 56px;
--mobile-bar-h: 60px;
--logo-desktop: 60px; --logo-mobile: 48px; --logo-condensed: 44px; --logo-footer: 120px;
--size-section: 44px; --lh-section: 1.1; /* homepage section H2s; --size-h2 stays for article H2s */
--motion-cta-fill: 320ms; /* Training button fill */
--touch-min: 44px;
--touch-gap: 8px;
--result-min-h: 64px; /* pincode result: reserved, no layout shift */
--z-header: 40; --z-drawer: 60; --z-mobile-bar: 50;
}
@media (max-width: 720px) { :root { --gutter: var(--space-4); --size-section: 35px; } } /* 30px left H2 only 1.76x body; 35px restores the desktop step */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--surface-paper); color: var(--text-primary); font-family: var(--font-text); font-size: var(--size-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
a { color: var(--text-link); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--text-link-hover); }
::selection { background: var(--brand-lime); color: var(--brand-soil); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); margin: 0 0 var(--space-4); text-wrap: balance; color: var(--green-deep); }
h1 { font-size: var(--size-h1); line-height: var(--lh-h1); font-weight: var(--weight-heading); font-stretch: var(--stretch-heading); }
h2 { font-size: var(--size-h2); line-height: var(--lh-h2); font-weight: var(--weight-heading); font-stretch: var(--stretch-heading); }
h3 { font-size: var(--size-h3); line-height: var(--lh-h3); font-weight: var(--weight-ui); }
h4 { font-size: var(--size-h4); line-height: var(--lh-h4); font-weight: var(--weight-ui); }
p { margin: 0 0 var(--space-4); text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.container { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--space-9) 0; }
.overline { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--green-forest); margin: 0 0 var(--space-3); }
.lead { font-size: var(--size-lead); line-height: var(--lh-lead); }
.muted { color: var(--text-secondary); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; background: var(--green-deep); color: var(--action-primary-text); font-family: var(--font-display); font-weight: var(--weight-ui); padding: 10px 16px; border-radius: var(--radius-md); text-decoration: none; }
.skip-link:focus { top: var(--space-4); }
[hidden] { display: none !important; }
@media (max-width: 720px) { .section { padding: var(--space-8) 0; } }
/* dark world */
.on-soil { background: var(--surface-soil); color: var(--text-on-dark);
--text-primary: var(--text-on-dark); --text-secondary: var(--text-secondary-on-dark); --text-link: var(--brand-lime); --text-link-hover: var(--action-on-dark-hover);
--border-line: var(--border-on-dark); --surface-card: var(--surface-soil-raised); --focus-ring: var(--brand-lime); --accent-harvest: var(--accent-harvest-on-dark); }
.on-soil h1, .on-soil h2, .on-soil h3, .on-soil h4 { color: var(--text-on-dark); }
.on-soil .overline { color: var(--brand-lime); }
/* ---------- icon helper ---------- */
/* Icons are inline SVG printed by mugreens_icon() from assets/icons/svg/ (stroke and fill
use currentColor). The mockup drew them as CSS masks with one data: URI per icon; those
rules are gone. The .ic--{name} class stays on every icon for targeting. */
.ic { display: inline-block; width: 22px; height: 22px; flex-shrink: 0; }
.ic--sm { width: 16px; height: 16px; }
.ic--lg { width: 28px; height: 28px; }
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-button); line-height: 1.2; padding: 10px 20px; min-height: var(--touch-min); border-radius: var(--radius-md); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; background: var(--action-primary); color: var(--action-primary-text); transition: background var(--duration-fast) var(--ease-standard); white-space: nowrap; }
.btn:hover { background: var(--action-primary-hover); color: var(--action-primary-text); }
.btn--secondary { background: transparent; border-color: var(--green-deep); color: var(--green-deep); }
.btn--secondary:hover { background: var(--action-wash); color: var(--green-deep); }
.btn--lime { background: var(--action-on-dark); color: var(--action-on-dark-text); }
.btn--lime:hover { background: var(--action-on-dark-hover); color: var(--action-on-dark-text); }
.btn--lg { padding: 13px 28px; min-height: 52px; }
.btn--full { width: 100%; }
.iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border: none; background: none; border-radius: var(--radius-md); color: var(--text-primary); cursor: pointer; text-decoration: none; }
.iconbtn:hover { background: var(--action-wash); color: var(--green-deep); }
.textlink { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-button); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; color: var(--text-link); min-height: var(--touch-min); }
.textlink:hover, .textlink:focus-visible { color: var(--text-link-hover); text-decoration: underline; }
.textlink .ic { width: 18px; height: 18px; transition: transform var(--duration-fast) var(--ease-grow); }
.textlink:hover .ic, .textlink:focus-visible .ic { transform: translateX(3px); }
.textlink--quiet { color: var(--text-secondary); font-weight: 500; }
/* ---------- delivery-scope badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 12.5px; letter-spacing: .02em; padding: 5px 12px; border-radius: var(--radius-pill); background: var(--surface-tint); color: var(--green-deep); border: 1px solid var(--badge-fresh-border); }
.badge::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021V10%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2010C7%2010%204%207%204%203c5%200%208%203%208%207Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2012c0-3.5%202.6-6%207-6%200%203.5-2.6%206-7%206Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12%2021V10%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2010C7%2010%204%207%204%203c5%200%208%203%208%207Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M12%2012c0-3.5%202.6-6%207-6%200%203.5-2.6%206-7%206Z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E") center / contain no-repeat; }
.badge--ships { border-radius: 3px; border-style: dashed; background: var(--grey-100); color: var(--grey-600); border-color: var(--border-strong); }
.badge--ships::before { -webkit-mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208l8-4%208%204v8l-8%204-8-4Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%208l8%204%208-4M12%2012v8%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); mask-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%208l8-4%208%204v8l-8%204-8-4Z%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%208l8%204%208-4M12%2012v8%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E"); }
.badge--ondark { background: var(--wash-lime-on-dark); color: var(--brand-lime); border-color: var(--border-on-dark-soft); }
.badge--ships.badge--ondark { background: var(--wash-paper-on-dark); color: var(--text-secondary-on-dark); }
.badge--sm { font-size: 11px; padding: 3px 9px; }
/* ---------- photo placeholder (img keeps width/height → no layout shift) ---------- */
.ph { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--grey-100); margin: 0; }
.ph::before { content: ""; position: absolute; right: -12%; bottom: -12%; width: 55%; height: 80%; background: var(--grey-200); -webkit-mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20xmlns%3Ac2pa%3D%22http%3A%2F%2Fc2pa.org%2Fmanifest%22%3E%3Cmetadata%3E%3Cc2pa%3Amanifest%3EAAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTpjM2IzN2Q4ZC02YjY4LTQxYjctYmNjYS04ZWYwZjRkZWUwZGMAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaAcUD7HgYwF3IczfWCo95goAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpkYjUzYmI0YS0wYTA0LTRiNmUtYjRlNy04MGY5Y2E4MTQyOTRscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoPUR172NvIL%2BbKy2D3Q87jgAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggoYVvauGMN0g6ChDn4jVn2wuntFb7KoEO5bKJ3thqbnukZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaNmGCZAI%2BNT8GvWaoadPPMsAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDbCyiN609TNcGTd0iVMFa3WJIBY2SULoLf%2FKhmtWHrd2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBi2Zmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmMzYjM3ZDhkLTZiNjgtNDFiNy1iY2NhLThlZjBmNGRlZTBkYy9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOmI3ZjcwNWYyLTY3Y2ItNGIyNS04OTQ5LTFlZTEzMDBiZTk0OHJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCChhW9q4Yw3SDoKEOfiNWfbC6e0VvsqgQ7lsone2Gpue6JjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFgg0o1%2BvQRN5xPO%2Bh2kFFOfcV9HSsNoKkUNdu4W0iTffX2iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggJtaBbp2odRoLf8Jqkys085DEHIz26j6Q8htuKzJ2Rvd0Y2xhaW1fZ2VuZXJhdG9yX2luZm%2BjZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g%2FoGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd%2F3cyjxFA3Qo5S46fX0%2FihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB%2FwQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB%2FwQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj%2BOPEz5o%2BnMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn%2FaArXyTwFAZfKrPzxF2vPoJNf1%2BUCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9%2B1rdDwSPLMOPOjKuiXjoU%2FpUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQCoZNm8WxzDizdnGHX75FEjIv%2B3UREfWfJHh0T29z3WReUL7XOlLaW6okmZmVtLTTuxxd5rY3NmjRUIg3xx1jVA%3D%3C%2Fc2pa%3Amanifest%3E%3C%2Fmetadata%3E%20%3Cdefs%3E%20%3Cg%20id%3D%22E%22%3E%3Cpath%20d%3D%22M0%2030.6C-12.6%2052.2%20-15.3%2079.2%200%20106.2C15.3%2079.2%2012.6%2052.2%200%2030.6Z%22%20stroke-width%3D%222.02%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%2048.6C-7.2%2061.2%20-8.55%2076.5%200%2090.9C8.55%2076.5%207.2%2061.2%200%2048.6Z%22%20stroke-width%3D%221.38%22%20opacity%3D%22.7%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2275.60000000000001%22%20r%3D%226.40%22%20stroke-width%3D%221.56%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2275.60000000000001%22%20r%3D%222.48%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M0%20106.2V117%22%20stroke-width%3D%221.74%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3Cg%20id%3D%22e%22%3E%3Cpath%20d%3D%22M0%2014.28C-5.88%2024.36%20-7.14%2036.96%200%2049.559999999999995C7.14%2036.96%205.88%2024.36%200%2014.28Z%22%20stroke-width%3D%221.16%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%2022.68C-3.36%2028.56%20-3.9899999999999998%2035.699999999999996%200%2042.42C3.9899999999999998%2035.699999999999996%203.36%2028.56%200%2022.68Z%22%20stroke-width%3D%220.80%22%20opacity%3D%22.7%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2235.28%22%20r%3D%223.52%22%20stroke-width%3D%220.89%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2235.28%22%20r%3D%221.42%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M0%2049.559999999999995V54.6%22%20stroke-width%3D%220.97%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3Cg%20id%3D%22b%22%3E%3Cpath%20d%3D%22M0%20148c3.5-6%203.2-12-.8-17.5%22%20stroke-width%3D%220.9%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%20150c4-5.5%204.2-11.5.8-17%22%20stroke-width%3D%220.9%22%20opacity%3D%22.65%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3C%2Fdefs%3E%20%3Cg%20transform%3D%22scale(1.55)%22%3E%20%3Cg%20transform%3D%22rotate(-8)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-22.8)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-37.6)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-52.4)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-67.2)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-82)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-15.4)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-30.200000000000003)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-45)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-59.8)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-74.60000000000001)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-4)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-11.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-19)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-26.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-34)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-41.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-49)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-56.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-64)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-71.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-79)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cpath%20transform%3D%22rotate(0)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-15)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-30)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-45)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-60)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-75)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-90)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Ccircle%20r%3D%227%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") top left / contain no-repeat; mask: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20220%20220%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20xmlns%3Ac2pa%3D%22http%3A%2F%2Fc2pa.org%2Fmanifest%22%3E%3Cmetadata%3E%3Cc2pa%3Amanifest%3EAAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTpjM2IzN2Q4ZC02YjY4LTQxYjctYmNjYS04ZWYwZjRkZWUwZGMAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaAcUD7HgYwF3IczfWCo95goAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDpkYjUzYmI0YS0wYTA0LTRiNmUtYjRlNy04MGY5Y2E4MTQyOTRscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNoPUR172NvIL%2BbKy2D3Q87jgAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggoYVvauGMN0g6ChDn4jVn2wuntFb7KoEO5bKJ3thqbnukZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaNmGCZAI%2BNT8GvWaoadPPMsAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCDbCyiN609TNcGTd0iVMFa3WJIBY2SULoLf%2FKhmtWHrd2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBi2Zmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmMzYjM3ZDhkLTZiNjgtNDFiNy1iY2NhLThlZjBmNGRlZTBkYy9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOmI3ZjcwNWYyLTY3Y2ItNGIyNS04OTQ5LTFlZTEzMDBiZTk0OHJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCChhW9q4Yw3SDoKEOfiNWfbC6e0VvsqgQ7lsone2Gpue6JjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFgg0o1%2BvQRN5xPO%2Bh2kFFOfcV9HSsNoKkUNdu4W0iTffX2iY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFggJtaBbp2odRoLf8Jqkys085DEHIz26j6Q8htuKzJ2Rvd0Y2xhaW1fZ2VuZXJhdG9yX2luZm%2BjZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g%2FoGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd%2F3cyjxFA3Qo5S46fX0%2FihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB%2FwQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB%2FwQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj%2BOPEz5o%2BnMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn%2FaArXyTwFAZfKrPzxF2vPoJNf1%2BUCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9%2B1rdDwSPLMOPOjKuiXjoU%2FpUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQCoZNm8WxzDizdnGHX75FEjIv%2B3UREfWfJHh0T29z3WReUL7XOlLaW6okmZmVtLTTuxxd5rY3NmjRUIg3xx1jVA%3D%3C%2Fc2pa%3Amanifest%3E%3C%2Fmetadata%3E%20%3Cdefs%3E%20%3Cg%20id%3D%22E%22%3E%3Cpath%20d%3D%22M0%2030.6C-12.6%2052.2%20-15.3%2079.2%200%20106.2C15.3%2079.2%2012.6%2052.2%200%2030.6Z%22%20stroke-width%3D%222.02%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%2048.6C-7.2%2061.2%20-8.55%2076.5%200%2090.9C8.55%2076.5%207.2%2061.2%200%2048.6Z%22%20stroke-width%3D%221.38%22%20opacity%3D%22.7%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2275.60000000000001%22%20r%3D%226.40%22%20stroke-width%3D%221.56%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2275.60000000000001%22%20r%3D%222.48%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M0%20106.2V117%22%20stroke-width%3D%221.74%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3Cg%20id%3D%22e%22%3E%3Cpath%20d%3D%22M0%2014.28C-5.88%2024.36%20-7.14%2036.96%200%2049.559999999999995C7.14%2036.96%205.88%2024.36%200%2014.28Z%22%20stroke-width%3D%221.16%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M0%2022.68C-3.36%2028.56%20-3.9899999999999998%2035.699999999999996%200%2042.42C3.9899999999999998%2035.699999999999996%203.36%2028.56%200%2022.68Z%22%20stroke-width%3D%220.80%22%20opacity%3D%22.7%22%3E%3C%2Fpath%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2235.28%22%20r%3D%223.52%22%20stroke-width%3D%220.89%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%220%22%20cy%3D%2235.28%22%20r%3D%221.42%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%3Cpath%20d%3D%22M0%2049.559999999999995V54.6%22%20stroke-width%3D%220.97%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3Cg%20id%3D%22b%22%3E%3Cpath%20d%3D%22M0%20148c3.5-6%203.2-12-.8-17.5%22%20stroke-width%3D%220.9%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M4%20150c4-5.5%204.2-11.5.8-17%22%20stroke-width%3D%220.9%22%20opacity%3D%22.65%22%3E%3C%2Fpath%3E%3C%2Fg%3E%20%3C%2Fdefs%3E%20%3Cg%20transform%3D%22scale(1.55)%22%3E%20%3Cg%20transform%3D%22rotate(-8)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-22.8)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-37.6)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-52.4)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-67.2)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-82)%22%3E%3Cuse%20href%3D%22%23E%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-15.4)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-30.200000000000003)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-45)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-59.8)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-74.60000000000001)%20translate(0%2046)%22%3E%3Cuse%20href%3D%22%23e%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-4)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-11.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-19)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-26.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-34)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-41.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-49)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-56.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-64)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-71.5)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cg%20transform%3D%22rotate(-79)%22%3E%3Cuse%20href%3D%22%23b%22%3E%3C%2Fuse%3E%3C%2Fg%3E%20%3Cpath%20transform%3D%22rotate(0)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-15)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-30)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-45)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-60)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-75)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Cpath%20transform%3D%22rotate(-90)%22%20d%3D%22M0%2026c4.5-6.5%204-12.5-.5-18%22%20stroke-width%3D%221.6%22%3E%3C%2Fpath%3E%3Ccircle%20r%3D%227%22%20fill%3D%22currentColor%22%20stroke%3D%22none%22%3E%3C%2Fcircle%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E") top left / contain no-repeat; transform: rotate(180deg); }
.ph--plain::before { content: none; } /* hero: looks like what ships, nothing layered */
.ph__img { width: 100%; height: auto; display: block; }
.ph__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 11px; letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--grey-500); }
.ph--dark { background: var(--surface-soil-raised); }
.ph--dark::before { background: var(--border-on-dark); }
.ph--dark .ph__label { color: var(--text-secondary-on-dark); }
/* ---------- forms ---------- */
.input { font-family: var(--font-display); font-size: 16px; font-variant-numeric: tabular-nums; padding: 10px 14px; min-height: var(--touch-min); border-radius: var(--radius-md); border: 1.5px solid var(--grey-400); background: var(--surface-card); color: var(--text-primary); width: 100%; }
.on-soil .input { background: var(--surface-paper); color: var(--brand-soil); border-color: var(--grey-300); }
/* ---------- pincode checker (compact and full) ---------- */
.checker { display: flex; flex-direction: column; gap: var(--space-2); }
.checker__label { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); }
.checker__row { display: flex; gap: var(--space-2); }
.checker__row .input { flex: 1 1 auto; min-width: 0; width: auto; max-width: 200px; letter-spacing: .08em; }
.checker__result { min-height: var(--result-min-h); display: flex; align-items: flex-start; gap: var(--space-3); padding: 10px 14px; border-radius: var(--radius-md); font-family: var(--font-display); font-size: var(--size-small); line-height: 1.45; background: transparent; transition: background var(--duration-base) var(--ease-standard); }
.checker__msg { margin: 0; min-width: 0; }
.checker__result:empty, .checker[data-state="empty"] .checker__result { visibility: hidden; min-height: 0; padding: 0; } /* Do not reserve the result box before a check: it left a dead gap mid-section on mobile. A shift caused by the user tapping Check is interaction-driven and does not count against CLS. */
.checker[data-state="checking"] .checker__result { visibility: visible; color: var(--text-secondary); }
.checker[data-state="fresh"] .checker__result { visibility: visible; background: var(--surface-tint); color: var(--green-deep); }
.checker[data-state="ships"] .checker__result { visibility: visible; background: var(--grey-100); color: var(--grey-600); }
.checker[data-state="invalid"] .checker__result { visibility: visible; background: var(--status-error-bg); color: var(--status-error); }
.checker__dots::after { content: "…"; }
.checker--compact .checker__label { font-size: var(--size-caption); color: var(--text-secondary); }
.checker--compact .checker__result { min-height: 40px; padding: 6px 10px; font-size: var(--size-caption); }
/* ---------- harvest ticker (light surface) ---------- */
.ticker { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: var(--radius-pill); background: var(--surface-tint); border: 1px solid var(--badge-fresh-border); color: var(--green-deep); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); font-variant-numeric: tabular-nums; max-width: 100%; }
.ticker__dot { width: 8px; height: 8px; border-radius: var(--radius-round); background: var(--green-forest); flex-shrink: 0; animation: ticker-pulse var(--motion-ticker-pulse) var(--ease-sway) infinite; }
.ticker__text { min-width: 24ch; } /* reserved width; JS swaps placeholders for live values */
@keyframes ticker-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .55; } }
.is-paused .ticker__dot { animation-play-state: paused; }
/* ---------- chips ---------- */
.chips { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-caption); padding: 7px 12px; min-height: 34px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-line); background: var(--surface-card); color: var(--text-secondary); text-decoration: none; }
a.chip:hover, a.chip:focus-visible { border-color: var(--green-deep); color: var(--green-deep); }
.chip--cat { background: var(--surface-tint); border-color: var(--badge-fresh-border); color: var(--green-deep); min-height: 28px; padding: 4px 10px; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; }
.on-soil .chip { background: var(--wash-paper-on-dark); border-color: var(--border-on-dark-soft); color: var(--text-on-dark); }
.on-soil .chip .ic { color: var(--brand-lime); width: 16px; height: 16px; }
@media (max-width: 960px) { a.chip { min-height: var(--touch-min); } }
/* ---------- product & category cards ---------- */
.pcard { position: relative; background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow var(--duration-base) var(--ease-grow), transform var(--duration-base) var(--ease-grow); }
.pcard:hover, .pcard:focus-within { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.pcard__media { display: block; text-decoration: none; }
.pcard__media .ph { border-radius: 0; }
.pcard__body { padding: var(--space-4); display: flex; flex-direction: column; gap: 8px; flex: 1; align-items: flex-start; }
.pcard__title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h4); line-height: 1.25; margin: 0; }
.pcard__title a { color: var(--text-primary); text-decoration: none; }
.pcard__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the tap target (≥44px) */
.pcard__title a:hover, .pcard__title a:focus-visible { color: var(--green-deep); text-decoration: underline; }
.pcard__price { margin: 0; margin-top: auto; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: 18px; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.ccard { display: block; text-decoration: none; background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-grow), transform var(--duration-base) var(--ease-grow); }
.ccard:hover, .ccard:focus-visible { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.ccard .ph { border-radius: 0; }
.ccard__row { padding: 14px 16px; min-height: var(--touch-min); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ccard__title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: 18px; color: var(--text-primary); display: inline-flex; align-items: center; gap: 10px; }
.ccard__title .ic { color: var(--green-forest); width: 20px; height: 20px; }
.ccard__arrow { color: var(--green-forest); width: 20px; height: 20px; transition: transform var(--duration-fast) var(--ease-grow); }
.ccard:hover .ccard__arrow, .ccard:focus-visible .ccard__arrow { transform: translateX(3px); }
/* product rows: grid on desktop, scroll-snap with the next card peeking below 900px */
.prow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }
.prow--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .prow--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.scroller { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding: 0 var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.scroller > * { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
@media (max-width: 900px) {
.prow, .prow--5 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding: 0 var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.prow > * { flex: 0 0 76%; max-width: 300px; scroll-snap-align: start; }
}
@media (min-width: 721px) and (max-width: 900px) { .prow > * { flex-basis: 44%; } }
/* ---------- homepage section title ---------- */
.sec-title { font-size: var(--size-section); line-height: var(--lh-section); max-width: 26ch; margin-bottom: var(--space-6); letter-spacing: -.01em; }
.sec-head .sec-title { margin-bottom: 0; }
.sec-head { margin-bottom: var(--space-7); }
@media (max-width: 720px) { .sec-title { margin-bottom: var(--space-5); } .sec-head { margin-bottom: var(--space-6); } }
/* ---------- section header pattern ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4) var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.sec-head h2 { margin: 0; max-width: 22ch; }
.sec-head .textlink { padding-bottom: 2px; }
/* ============================================================
HEADER
============================================================ */
.site-header { position: relative; z-index: var(--z-header); }
.masthead { position: sticky; top: 0; background: var(--surface-paper); border-bottom: 1px solid var(--border-line); z-index: var(--z-header); transition: box-shadow var(--duration-base) var(--ease-standard); }
.masthead__row { display: flex; align-items: center; gap: var(--space-6); min-height: var(--header-main-h); transition: min-height var(--duration-base) var(--ease-standard); }
.masthead__logo { display: inline-flex; flex-shrink: 0; text-decoration: none; }
.masthead__logo img { height: var(--logo-desktop); width: var(--logo-desktop); transition: height var(--duration-base) var(--ease-standard), width var(--duration-base) var(--ease-standard); }
.site-header.is-condensed .masthead { box-shadow: var(--shadow-card); }
.site-header.is-condensed .masthead__row { min-height: var(--header-condensed-h); }
.site-header.is-condensed .masthead__logo img { height: var(--logo-condensed); width: var(--logo-condensed); }
.nav { flex: 1; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: var(--touch-gap); }
.nav__item { position: relative; }
.nav__item--mega { position: static; } /* mega spans the masthead, not the item */
.nav__link { display: inline-flex; align-items: center; gap: 4px; min-height: var(--touch-min); padding: 8px 12px; border: none; background: none; border-radius: var(--radius-md); cursor: pointer; text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-primary); white-space: nowrap; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: var(--action-wash); color: var(--green-deep); }
.nav__link .ic { width: 16px; height: 16px; color: var(--green-forest); transition: transform var(--duration-fast) var(--ease-grow); }
.nav__link[aria-expanded="true"] .ic { transform: rotate(180deg); }
/* Training: outlined pill; fill grows from the bottom on hover/focus */
.nav__cta { position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch-min); height: 40px; padding: 0 16px 0 12px; margin-left: var(--space-2); border: 1.5px solid var(--green-forest); border-radius: var(--radius-pill); color: var(--green-forest); background: transparent; text-decoration: none; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); white-space: nowrap; transition: color var(--motion-cta-fill) var(--ease-grow), transform var(--duration-fast) var(--ease-standard); }
.nav__cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--green-forest); transform: scaleY(0); transform-origin: 50% 100%; transition: transform var(--motion-cta-fill) var(--ease-grow); }
.nav__cta:hover, .nav__cta:focus-visible { color: var(--surface-paper); }
.nav__cta:hover::before, .nav__cta:focus-visible::before { transform: scaleY(1); }
.nav__cta:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.nav__cta:active { transform: translateY(1px); color: var(--surface-paper); }
.nav__cta:active::before { transform: scaleY(1); background: var(--green-deep); }
.sprout { width: 18px; height: 18px; flex-shrink: 0; display: block; }
.sprout__leaf { transform-box: fill-box; transition: transform var(--motion-cta-fill) var(--ease-grow); }
.sprout__leaf--l { transform-origin: 100% 100%; }
.sprout__leaf--r { transform-origin: 0% 100%; }
.nav__cta:hover .sprout__leaf--l, .nav__cta:focus-visible .sprout__leaf--l { transform: rotate(-8deg); }
.nav__cta:hover .sprout__leaf--r, .nav__cta:focus-visible .sprout__leaf--r { transform: rotate(8deg); }
.site-header.is-condensed .nav__cta { height: 36px; min-height: 36px; padding: 0 14px 0 10px; }
.drawer__cta { margin-top: var(--space-5); gap: 10px; }
.drawer__cta .sprout { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .nav__cta, .nav__cta::before, .sprout__leaf { transition: none; } .nav__cta:hover .sprout__leaf, .nav__cta:focus-visible .sprout__leaf { transform: none; } }
/* mega menu */
.mega { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface-card); border-bottom: 1px solid var(--border-line); box-shadow: var(--shadow-lift); animation: menu-in var(--motion-menu) var(--ease-unfurl); }
.mega__grid { max-width: var(--container-max); margin: 0 auto; padding: var(--space-6) var(--gutter); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 300px; gap: var(--space-6) var(--space-7); }
.mega--3 .mega__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) 320px; }
.mega__title { margin: 0 0 var(--space-2); font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); }
.mega__title a { color: inherit; text-decoration: none; }
.mega__title a:hover { color: var(--green-deep); }
.mega__col a:not(.textlink) { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: var(--text-primary); text-decoration: none; padding: 7px 0; }
.mega__col a:not(.textlink):hover { color: var(--green-deep); text-decoration: underline; }
.mega__col .textlink { margin-top: var(--space-2); font-size: var(--size-small); min-height: 0; }
.mega__side { background: var(--surface-tint); border-radius: var(--radius-lg); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); align-items: flex-start; }
.mega__side--ships { background: var(--grey-100); }
.mega__side h3 { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h4); line-height: 1.25; margin: 0; color: var(--text-primary); }
.mega__side .checker { width: 100%; }
.mega__side .ph { width: 100%; }
.mega__side .textlink { min-height: 0; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
/* simple dropdown */
.drop { position: absolute; left: 0; top: 100%; min-width: 220px; background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: var(--space-2); animation: menu-in var(--motion-menu) var(--ease-unfurl); }
.drop a { display: block; font-family: var(--font-display); font-weight: 500; font-size: 15.5px; color: var(--text-primary); text-decoration: none; padding: 10px 12px; border-radius: var(--radius-sm); }
.drop a:hover { background: var(--action-wash); color: var(--green-deep); }
/* tools */
.masthead__tools { display: flex; align-items: center; gap: var(--touch-gap); margin-left: auto; }
.cart__count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); background: var(--green-deep); color: var(--action-primary-text); font-family: var(--font-display); font-size: 11px; font-weight: var(--weight-heading); font-variant-numeric: tabular-nums; line-height: 1; }
.cart__count:empty { visibility: hidden; } /* space reserved; JS fills the count */
.iconbtn--menu { display: none; }
/* search */
.search { border-top: 1px solid var(--border-line); background: var(--surface-card); animation: menu-in var(--motion-menu) var(--ease-unfurl); }
.search__form { display: flex; gap: var(--space-2); align-items: center; padding-top: var(--space-3); padding-bottom: var(--space-3); }
.search__form .input { flex: 1; width: auto; min-width: 0; }
/* drawer (mobile) */
.drawer { position: fixed; inset: 0; z-index: var(--z-drawer); background: var(--surface-paper); overflow-y: auto; display: flex; flex-direction: column; padding: var(--space-4) var(--gutter) calc(var(--space-6) + env(safe-area-inset-bottom)); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.drawer__top img { width: var(--logo-mobile); height: var(--logo-mobile); }
.drawer__check { background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); padding: var(--space-4); margin-bottom: var(--space-4); }
.drawer__nav { flex: 1; }
.drawer__group { border-bottom: 1px solid var(--grey-200); }
.drawer__group > summary, .drawer__link { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 52px; padding: var(--space-3) 0; font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: 20px; color: var(--brand-soil); text-decoration: none; cursor: pointer; }
.drawer__group > summary::-webkit-details-marker { display: none; }
.drawer__group > summary .ic { width: 18px; height: 18px; color: var(--green-forest); transition: transform var(--duration-fast) var(--ease-grow); }
.drawer__group[open] > summary .ic { transform: rotate(180deg); }
.drawer__sub { display: flex; flex-direction: column; padding: 0 0 var(--space-3); }
.drawer__subtitle { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary); padding: 12px 0 4px var(--space-4); }
.drawer__sub a { font-family: var(--font-display); font-weight: 500; font-size: 16px; color: var(--grey-600); text-decoration: none; padding: 11px 0 11px var(--space-4); min-height: var(--touch-min); display: flex; align-items: center; }
.drawer__contact { display: flex; flex-direction: column; gap: var(--touch-gap); margin-top: var(--space-5); }
.drawer__contact a { display: inline-flex; align-items: center; gap: 10px; min-height: var(--touch-min); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 16px; color: var(--text-primary); text-decoration: none; font-variant-numeric: tabular-nums; }
.drawer__contact .ic { color: var(--green-forest); }
body.drawer-open { overflow: hidden; }
/* mobile bottom bar (safe-area aware; body reserves the same height) */
.mobile-bar { display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-mobile-bar); background: var(--surface-paper); border-top: 1px solid var(--border-line); height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); }
.mobile-bar__list { display: grid; grid-template-columns: repeat(3, 1fr); height: var(--mobile-bar-h); gap: var(--touch-gap); }
.mobile-bar__item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; color: var(--green-deep); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 11px; min-height: var(--touch-min); }
.mobile-bar__item .ic { width: 22px; height: 22px; }
.mobile-bar__item .cart__count { position: absolute; top: 6px; left: calc(50% + 6px); right: auto; }
@media (max-width: 960px) {
.nav { display: none; }
.iconbtn--account { display: none; }
.iconbtn--menu { display: inline-flex; }
.masthead__row { min-height: 64px; gap: var(--space-3); }
.masthead__logo img { height: var(--logo-mobile); width: var(--logo-mobile); }
.site-header.is-condensed .masthead__row { min-height: var(--header-condensed-h); }
.mobile-bar { display: block; }
body { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom) + var(--space-3)); } /* bar height + clearance: the legal row sat under the bar at exactly bar-height */
}
/* ============================================================
FOOTER
============================================================ */
.foot { position: relative; overflow: hidden; }
.foot__motif { position: absolute; left: -380px; bottom: -420px; width: 900px; height: 900px; background: var(--surface-paper); opacity: .045; /* the mockup's footer-motif alias: Paper at 4.5% */ -webkit-mask: url("../img/motifs/mandala-rosette.svg") center / contain no-repeat; mask: url("../img/motifs/mandala-rosette.svg") center / contain no-repeat; pointer-events: none; }
.foot__grid { position: relative; display: grid; grid-template-columns: minmax(280px, 1.6fr) repeat(3, minmax(160px, 1fr)); gap: var(--space-8); padding-top: var(--space-8); padding-bottom: var(--space-7); }
.foot__brand .mu-logo-ring { --ring-size: var(--logo-footer); display: block; margin-bottom: var(--space-4); } /* ring component (mu-logo-ring.css) in place of the single ![]()
; block so no baseline gap */
.foot__name { font-size: var(--size-small); line-height: 1.6; font-weight: 600; color: var(--text-on-dark); margin: 0 0 2px; } /* business-name line of the address block: text face, not the display face */
.foot__address { font-style: normal; font-size: var(--size-small); line-height: 1.6; color: var(--text-secondary-on-dark); margin: 0 0 var(--space-3); max-width: 300px; }
.foot__contact { display: flex; flex-direction: column; gap: 0; margin-bottom: var(--space-2); }
.foot__contact a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: var(--size-small); color: var(--text-on-dark); text-decoration: none; min-height: var(--touch-min); font-variant-numeric: tabular-nums; }
.foot__contact .ic { width: 16px; height: 16px; color: var(--brand-lime); }
.foot__contact a:hover, .foot__contact a:focus-visible { color: var(--brand-lime); }
.foot__contact .foot__maps { color: var(--brand-lime); font-weight: var(--weight-ui); }
.foot__contact .foot__maps:hover { text-decoration: underline; }
.foot__social { display: flex; gap: var(--touch-gap); margin-top: var(--space-3); flex-wrap: wrap; }
.foot__social a { display: inline-flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); border-radius: var(--radius-md); color: var(--text-on-dark); }
.foot__social a:hover, .foot__social a:focus-visible { color: var(--brand-lime); background: var(--wash-paper-on-dark); }
.foot__group > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--text-secondary-on-dark); margin: 0 0 var(--space-3); cursor: default; pointer-events: none; }
.foot__group > summary::-webkit-details-marker { display: none; }
.foot__group > summary .ic { display: none; width: 16px; height: 16px; color: var(--brand-lime); transition: transform var(--duration-fast) var(--ease-grow); }
.foot__links { display: flex; flex-direction: column; }
.foot__links a { font-family: var(--font-display); font-weight: 500; font-size: var(--size-small); color: var(--text-on-dark); text-decoration: none; padding: 7px 0; }
.foot__links a:hover, .foot__links a:focus-visible { color: var(--brand-lime); }
.foot__legal { position: relative; border-top: 1px solid var(--border-on-dark); }
.foot__legal-row { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; padding-top: var(--space-4); padding-bottom: var(--space-4); font-family: var(--font-display); font-size: var(--size-caption); color: var(--text-secondary-on-dark); }
.foot__legal-row a { color: var(--text-secondary-on-dark); text-decoration: none; padding: 6px 0; }
.foot__legal-row a:hover, .foot__legal-row a:focus-visible { color: var(--brand-lime); }
.foot__legal-row .sep { opacity: .6; }
.foot__copy { margin-left: auto; }
@media (max-width: 960px) { .foot__grid { grid-template-columns: 1fr 1fr 1fr; gap: var(--space-6); } .foot__brand { grid-column: 1 / -1; } .foot__motif { left: auto; right: -420px; bottom: -520px; } }
@media (max-width: 720px) {
.foot__grid { grid-template-columns: 1fr; gap: 0; padding-top: var(--space-7); }
.foot__brand { padding-bottom: var(--space-5); }
.foot__group { border-top: 1px solid var(--border-on-dark); }
.foot__group > summary { pointer-events: auto; cursor: pointer; margin: 0; min-height: 52px; font-size: 13px; }
.foot__group > summary .ic { display: inline-block; }
.foot__group[open] > summary .ic { transform: rotate(180deg); }
.foot__links { padding-bottom: var(--space-4); }
.foot__links a { padding: 10px 0; min-height: var(--touch-min); display: flex; align-items: center; }
.foot__legal-row { gap: 0 var(--space-3); }
.foot__legal-row a { min-height: var(--touch-min); display: inline-flex; align-items: center; }
.foot__legal-row .sep { display: none; }
.foot__copy { margin-left: 0; width: 100%; padding-top: var(--space-2); }
}
/* ============================================================
S1 HERO — H1, one sentence, one button, the image. ≤ 620px at 1440.
============================================================ */
.hero { position: relative; overflow: hidden; padding: 40px 0 calc(var(--space-5) + 76px); }
.hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px); grid-template-areas: ". media" "title media" "sub media" "cta media" ". media"; grid-template-rows: 1fr auto auto auto 1fr; column-gap: var(--space-8); align-items: center; } /* the 1fr rows take the clip's extra height, so the copy stays packed and centred instead of spreading out */
.hero__head { grid-area: title; }
.hero__sub { grid-area: sub; }
.hero__cta { grid-area: cta; }
.hero__media { grid-area: media; }
.hero__title { font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: var(--size-display); line-height: var(--lh-display); max-width: 15ch; margin-bottom: var(--space-5); }
/* LCP: the h1 is fully opaque in frame one; only position animates */
.hero__sub { font-size: var(--size-lead); line-height: var(--lh-lead); color: var(--text-secondary-on-dark); max-width: 44ch; margin-bottom: var(--space-6); }
/* Headline at three sizes: a quiet "Buy", an oversized lime "microgreens" with a
hand-drawn stroke beneath it, then the rest at the regular display size. */
.hero__title { display: grid; gap: .05em; }
.hero__title > span { display: block; line-height: 1; }
.hero__t-lead { font-size: 1em; } /* the headline runs at the full display size; .78em had left the H1 the same size as the H2s */
.hero__t-hero { font-size: 1em; color: var(--brand-lime); } /* same size as the rest of the headline; colour and the stroke carry the emphasis */
.hero__t-rest { font-size: 1em; }
.hero__stroke { position: relative; display: inline-block; }
.hero__stroke-svg { position: absolute; left: -.02em; right: -.02em; bottom: -.08em; inline-size: 104%; block-size: .16em; color: var(--brand-lime); opacity: .9; pointer-events: none; }
/* The support line is two promises, not a paragraph: one row each. Near-paper
rather than the secondary grey, because it is the primary supporting line. */
.hero__points { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-2); color: var(--text-on-dark); }
.hero__media { justify-self: end; width: 100%; max-width: 480px; } /* was 380px, which left ~300px of dead space before the clip */
.hero__media .ph { aspect-ratio: 4 / 5; box-shadow: var(--shadow-overlay); }
.hero__media .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* stems along the bottom edge (default variant only): ~8 across, forest green, decorative */
@media (max-width: 960px) {
/* Stacked order on narrow screens: headline, then the tray, then the supporting line and the button. */
.hero__grid { grid-template-columns: 1fr; grid-template-areas: "title" "sub" "cta" "media"; grid-template-rows: auto auto auto auto; row-gap: var(--space-4); column-gap: 0; }
.hero__title { margin-bottom: 0; }
.hero__sub { margin-bottom: 0; }
.hero__media { margin-top: var(--space-6); } /* clear space between the button and the clip: at the end of the scrub the canopy sits at the very top of the frame and crowded the button */
.hero__title { font-size: 52px; max-width: none; }
.hero__media { justify-self: stretch; max-width: none; }
.hero__media .ph { aspect-ratio: 4 / 3; }
}
@media (min-width: 721px) and (max-width: 960px) { .hero__media { max-width: 560px; } }
@media (max-width: 720px) {
.hero { padding: var(--space-8) 0 calc(var(--space-5) + 56px); }
.hero__title { font-size: 52px; line-height: 1.02; max-width: none; margin-bottom: var(--space-4); } /* mobile H1; H2 is 35px */
.hero__sub { font-size: 19px; margin-bottom: var(--space-5); } /* was 17px, identical to body: the lead had no step at all */
/* On a phone the two promises run on as one paragraph; on desktop they stay as two lines. Same words, same markup. */
.hero__points { display: block; }
.hero__points li { display: inline; }
.hero__points li + li::before { content: " "; }
.hero .btn { width: 100%; }
/* grow once, hold still */
/* ~5 stems on phones */
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.pcard, .ccard, .ways__card, .kb__hub, .kb__hub-motif, .post { transition: none; }
}
/* ============================================================
S3 TWO WAYS TO BUY — holds the pincode checker; result drives the cards
============================================================ */
/* Tint surface so the section reads as its own band between Reviews (Paper) and Fresh (Card). */
.ways { background: var(--surface-tint); }
.ways h2 { text-align: center; margin-bottom: var(--space-7); margin-left: auto; margin-right: auto; }
.ways__check { max-width: 520px; margin: var(--space-7) auto 0; align-items: center; text-align: center; } /* sits below the cards */
.ways__check .checker__row { justify-content: center; width: 100%; }
.ways__check .checker__row .input { max-width: 220px; }
.ways__check .checker__result { width: 100%; text-align: left; }
.ways__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.ways__card { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-6); background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); text-decoration: none; color: var(--text-primary); transition: transform var(--duration-base) var(--ease-grow), box-shadow var(--duration-base) var(--ease-grow), opacity var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard); }
.ways__card h3 { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h3); margin: 0; color: var(--green-deep); }
.ways__card p { margin: 0; color: var(--text-secondary); font-size: 17px; }
.ways__card .textlink { margin-top: auto; }
.ways__card .ic--lg { color: var(--green-forest); }
.ways__note { visibility: hidden; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-caption); color: var(--text-secondary); margin: 0; min-height: 18px; } /* space reserved; shown in the ships-only state */
.ways__card:hover, .ways__card:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-lift); }
/* checker result → cards (works on touch; no hover needed) */
.ways[data-zone="fresh"] .ways__card { border-color: var(--green-forest); box-shadow: var(--shadow-lift); }
.ways[data-zone="ships"] .ways__card--ships { border-color: var(--green-forest); box-shadow: var(--shadow-lift); transform: translateY(-3px); }
.ways[data-zone="ships"] .ways__card--fresh { opacity: .62; }
.ways[data-zone="ships"] .ways__card--fresh .ways__note { visibility: visible; }
@media (max-width: 720px) { .ways__grid { grid-template-columns: 1fr; } .ways__card { padding: var(--space-5); } .ways__check .checker__row { flex-direction: column; } .ways__check .checker__row .input, .ways__check .checker__row .btn { max-width: none; width: 100%; } .ways h2 { text-align: left; } .ways__check { align-items: stretch; text-align: left; margin-top: var(--space-6); margin-bottom: 0; } }
/* ============================================================
S4 FRESH — white; holds the harvest ticker
============================================================ */
.fresh { background: var(--surface-card); border-top: 1px solid var(--border-line); border-bottom: 1px solid var(--border-line); }
.fresh__ticker { margin: 0 0 var(--space-6); }
.fresh__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); margin-bottom: var(--space-7); }
.fresh__intro p { margin: 0; max-width: var(--measure-article); }
.fresh__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-6); }
.fresh .pcard { background: var(--surface-paper); }
.fresh__cities { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-6); font-family: var(--font-display); font-size: var(--size-small); color: var(--text-secondary); }
@media (max-width: 960px) { .fresh__intro { grid-template-columns: 1fr; gap: var(--space-4); } .fresh__tiles { grid-template-columns: 1fr 1fr; } }
/* ============================================================
S5 HOW DELIVERY WORKS — three equal steps; vertical timeline on phones
============================================================ */
.delivery__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); counter-reset: step; margin: 0 0 var(--space-6); }
.delivery__step { counter-increment: step; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); }
.delivery__step::before { content: counter(step, decimal-leading-zero); font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: var(--size-h2); color: var(--grey-300); font-variant-numeric: tabular-nums; line-height: 1; }
.delivery__step .ic { width: 30px; height: 30px; color: var(--green-forest); }
.delivery__step p { margin: 0; font-size: 18px; font-family: var(--font-display); font-weight: var(--weight-ui); color: var(--text-primary); }
.delivery__links { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
@media (max-width: 720px) {
.delivery__steps { grid-template-columns: 1fr; gap: 0; position: relative; padding-left: 44px; }
.delivery__steps::before { content: ""; position: absolute; left: 15px; top: 16px; bottom: 16px; width: 2px; background: var(--border-strong); }
.delivery__step { position: relative; flex-direction: row; align-items: center; gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-3); background: var(--surface-card); }
.delivery__step::before { position: absolute; left: -44px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border-radius: var(--radius-round); background: var(--green-deep); color: var(--action-primary-text); font-size: 13px; font-stretch: var(--stretch-heading); display: inline-flex; align-items: center; justify-content: center; content: counter(step); }
.delivery__step .ic { width: 26px; height: 26px; }
.delivery__step p { font-size: 17px; }
.delivery__links { flex-direction: column; align-items: flex-start; gap: 0; }
}
/* ============================================================
S6 SEEDS AND SUPPLIES (tint)
============================================================ */
.supplies { background: var(--surface-tint); }
.supplies__intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); margin-bottom: var(--space-7); }
.supplies__intro p { margin: 0; max-width: var(--measure-article); }
.supplies__cta { display: flex; justify-content: center; margin-top: var(--space-7); }
@media (max-width: 960px) { .supplies__intro { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 720px) { .supplies__cta .btn { width: 100%; } }
/* ============================================================
S7 KNOWLEDGE BASE (Paper) — two rows of large hub cards (2 + 3); 2-col tablet; 1-col phone
============================================================ */
.kb__intro { max-width: 60ch; margin-top: calc(-1 * var(--space-3)); margin-bottom: var(--space-7); }
.kb__hubs { display: grid; gap: var(--space-4); margin-bottom: var(--space-4); }
.kb__hubs--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kb__hubs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kb__hub { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 300px; padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-grow), transform var(--duration-base) var(--ease-grow), border-color var(--duration-base) var(--ease-standard); }
.kb__hub:hover, .kb__hub:focus-visible { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--green-forest); }
.kb__hub-motif { position: absolute; right: 6%; top: 8%; width: 46%; height: 60%; background: var(--surface-tint); -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat; transition: transform var(--duration-slow) var(--ease-grow); pointer-events: none; }
.kb__hubs--2 .kb__hub-motif { width: 34%; height: 70%; right: 8%; top: 12%; }
.kb__hub:hover .kb__hub-motif, .kb__hub:focus-visible .kb__hub-motif { transform: translate(-4px, -4px); }
.kb__hub--eye .kb__hub-motif { -webkit-mask-image: url("../img/motifs/feather-eye.svg"); mask-image: url("../img/motifs/feather-eye.svg"); }
.kb__hub--sun .kb__hub-motif { -webkit-mask-image: url("../img/motifs/sun.svg"); mask-image: url("../img/motifs/sun.svg"); }
.kb__hub--sprout .kb__hub-motif { -webkit-mask-image: url("../img/motifs/sprout-figure.svg"); mask-image: url("../img/motifs/sprout-figure.svg"); }
.kb__hub--quarter .kb__hub-motif { -webkit-mask-image: url("../img/motifs/mandala-quarter.svg"); mask-image: url("../img/motifs/mandala-quarter.svg"); transform: rotate(180deg); }
.kb__hub--quarter:hover .kb__hub-motif, .kb__hub--quarter:focus-visible .kb__hub-motif { transform: rotate(180deg) translate(4px, 4px); }
.kb__hub--rosette .kb__hub-motif { -webkit-mask-image: url("../img/motifs/mandala-rosette.svg"); mask-image: url("../img/motifs/mandala-rosette.svg"); }
.kb__hub-text { position: relative; display: flex; flex-direction: column; gap: 6px; max-width: 30ch; }
.kb__hub-title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h3); line-height: var(--lh-h3); color: var(--green-deep); }
.kb__hub-desc { font-size: var(--size-small); line-height: 1.5; color: var(--text-secondary); }
.kb__hub-count { margin-top: var(--space-2); display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-link); font-variant-numeric: tabular-nums; }
.kb__hub-count .ic { width: 16px; height: 16px; transition: transform var(--duration-fast) var(--ease-grow); }
.kb__hub:hover .kb__hub-count, .kb__hub:focus-visible .kb__hub-count { text-decoration: underline; text-underline-offset: 3px; }
.kb__hub:hover .kb__hub-count .ic, .kb__hub:focus-visible .kb__hub-count .ic { transform: translateX(3px); }
@media (max-width: 960px) { .kb__hubs--2, .kb__hubs--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kb__hub { min-height: 240px; } .kb__hubs--2 .kb__hub-motif, .kb__hub-motif { width: 42%; height: 55%; } }
@media (max-width: 720px) { .kb__hubs--2, .kb__hubs--3 { grid-template-columns: 1fr; gap: var(--space-3); } .kb__hubs { margin-bottom: var(--space-3); } .kb__hub { min-height: 140px; justify-content: center; padding: var(--space-4); padding-right: 40%; } .kb__hubs--2 .kb__hub-motif, .kb__hub-motif { width: 30%; height: 76%; right: 5%; top: 12%; } .kb__hub-text { max-width: none; } .kb__hub-title { font-size: 20px; } .kb__hub-count { margin-top: 2px; } }
/* ============================================================
S8 TRAINING (Soil) — top row (intro + date tile), two programme cards, proof line
============================================================ */
.training { position: relative; overflow: hidden; }
.training__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 300px); gap: var(--space-8); align-items: end; margin-bottom: var(--space-7); }
.training__intro .sec-title { margin-bottom: var(--space-4); }
.training__lead { font-size: var(--size-lead); line-height: var(--lh-lead); color: var(--text-secondary-on-dark); max-width: 52ch; margin: 0; }
.training__next { background: var(--surface-paper); color: var(--brand-soil); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5) var(--space-5); border-top: 6px solid var(--brand-lime); box-shadow: var(--shadow-lift); display: flex; flex-direction: column; gap: 4px; }
.training__next p { margin: 0; }
.training__next-label { font-family: var(--font-display); font-weight: var(--weight-heading); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--green-forest); }
.training__next-date { font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: 40px; line-height: 1.05; color: var(--green-deep); font-variant-numeric: tabular-nums; margin-top: 4px !important; }
.training__next-seats { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--brand-soil); margin-top: var(--space-2) !important; }
.training__next-format { font-family: var(--font-display); font-size: var(--size-small); color: var(--text-secondary); }
.training__cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); margin-bottom: var(--space-6); }
.tcard { display: flex; flex-direction: column; background: var(--surface-soil-raised); border: 1px solid var(--border-on-dark); border-radius: var(--radius-lg); overflow: hidden; }
.tcard .ph { border-radius: 0; aspect-ratio: 16 / 9; }
.tcard .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tcard__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; align-items: flex-start; }
.tcard__title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h3); margin: 0; }
.tcard__for { margin: 0; font-size: 17px; color: var(--text-secondary-on-dark); }
.tcard__list { list-style: disc; padding-left: 20px; margin: 0; display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-size: var(--size-small); color: var(--text-on-dark); }
.tcard__list li::marker { color: var(--brand-lime); }
.tcard__meta { margin: 0; font-family: var(--font-display); font-size: var(--size-small); color: var(--text-secondary-on-dark); }
.tcard .btn { margin-top: auto; }
.btn--outline-light { background: transparent; border-color: var(--text-on-dark); color: var(--text-on-dark); }
.btn--outline-light:hover { background: var(--wash-paper-on-dark); color: var(--text-on-dark); }
.training__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4) var(--space-6); flex-wrap: wrap; padding-top: var(--space-5); border-top: 1px solid var(--border-on-dark); }
.training__proof { margin: 0; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-on-dark); max-width: 60ch; }
@media (max-width: 960px) { .training__top { grid-template-columns: minmax(0, 1fr) 240px; gap: var(--space-6); } }
@media (max-width: 720px) { .training__top { grid-template-columns: 1fr; gap: var(--space-5); margin-bottom: var(--space-6); } .training__next-date { font-size: 34px; } .training__cards { grid-template-columns: 1fr; gap: var(--space-4); } .tcard .btn { width: 100%; } .training__foot { flex-direction: column; align-items: flex-start; gap: var(--space-2); } }
/* ============================================================
S9 FOUNDER STORY (Paper) — tall two-column feature, ~600px at desktop
============================================================ */
.founder__grid { display: grid; grid-template-columns: minmax(0, 480px) minmax(0, 1fr); gap: var(--space-9); align-items: center; }
.founder__portrait { aspect-ratio: 4 / 5; width: 100%; box-shadow: var(--shadow-card); }
.founder__portrait .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.founder__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; align-self: center; }
.founder__caption { font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-overline); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--green-forest); margin: 0 0 var(--space-3); }
.founder__title { font-size: 56px; line-height: 1.05; max-width: 14ch; margin-bottom: var(--space-5); font-stretch: var(--stretch-display); font-weight: var(--weight-display); }
.founder__body { font-size: var(--size-lead); line-height: var(--lh-lead); max-width: 52ch; margin-bottom: var(--space-4); }
@media (max-width: 960px) { .founder__grid { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: var(--space-6); } .founder__title { font-size: 44px; } }
@media (max-width: 720px) { .founder__grid { grid-template-columns: 1fr; gap: var(--space-5); } .founder__title { font-size: 36px; } .founder__body { font-size: 17px; } }
/* ============================================================
S2 REVIEWS (Paper) — the page's main trust signal, under the hero.
Sticky summary tile + a two-column masonry wall of up to six quotes
(CSS columns, no JavaScript). No structured data here: see the template.
============================================================ */
.reviews__latest { margin: calc(-1 * var(--space-4)) 0 var(--space-6); font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-secondary); }
.reviews__layout { display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--space-7); align-items: start; }
/* The tile follows the wall down. The header condenses to 56px as you scroll, so it clears that. */
.reviews__summary { position: sticky; top: calc(var(--header-condensed-h) + var(--space-4)); }
.reviews__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); padding: var(--space-5); background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); }
.reviews__g { color: var(--text-primary); margin-bottom: var(--space-2); }
.reviews__rating { margin: 0; font-family: var(--font-display); font-stretch: var(--stretch-display); font-weight: var(--weight-display); font-size: 56px; line-height: 1; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.reviews__count { margin: 0; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-secondary); }
.reviews__proof { margin: var(--space-2) 0 var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-line); width: 100%; font-family: var(--font-display); font-size: var(--size-caption); line-height: 1.5; color: var(--text-secondary); }
.reviews__links { display: flex; flex-direction: column; align-items: flex-start; }
.reviews__links .textlink { min-height: var(--touch-min); }
/* No quotes yet: the tile has the row to itself and lies down across it. */
.reviews__layout--alone { grid-template-columns: minmax(0, 1fr); }
.reviews__layout--alone .reviews__summary { position: static; }
.reviews__layout--alone .reviews__tile { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); }
.reviews__layout--alone .reviews__g, .reviews__layout--alone .reviews__proof { margin: 0; }
.reviews__layout--alone .reviews__proof { width: auto; border-top: 0; padding-top: 0; }
.reviews__layout--alone .reviews__links { flex-direction: row; gap: var(--space-5); flex-wrap: wrap; }
/* The wall: two masonry columns, so a card with a photo and a card without sit
side by side without either being stretched to match the other. */
.reviews__wall { column-count: 2; column-gap: var(--space-4); }
.review { margin: 0 0 var(--space-4); background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); overflow: hidden; break-inside: avoid; -webkit-column-break-inside: avoid; }
.review__photo { margin: 0; }
.review__photo-img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--grey-100); }
.review__body { padding: var(--space-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.review--photo .review__body { padding-top: var(--space-4); }
.review__stars { display: flex; gap: 2px; color: var(--green-forest); }
.review__stars .ic { width: 16px; height: 16px; fill: currentColor; } /* the kit's star is an outline; a rating row needs it solid or five stars read as none */
.review__text { margin: 0; font-size: 17px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; }
.review__text.is-open { display: block; -webkit-line-clamp: none; line-clamp: none; }
.review__more { background: none; border: none; padding: 8px 0; min-height: var(--touch-min); cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-link); text-decoration: underline; text-underline-offset: 3px; }
.review__more:hover { color: var(--text-link-hover); }
.review__who { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1); }
/* Drawn from the name, never fetched from Google. Five shades, all with white on them. */
.review__avatar { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-round); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 17px; line-height: 1; color: var(--surface-card); background: var(--green-deep); }
.review__avatar--photo { object-fit: cover; background: var(--surface-tint); }
.review__avatar--1 { background: var(--green-forest); }
.review__avatar--2 { background: var(--accent-harvest); }
.review__avatar--3 { background: var(--status-info); }
.review__avatar--4 { background: var(--status-success); }
.review__name { margin: 0; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: var(--size-small); color: var(--text-primary); }
.review__meta { margin: 0; font-family: var(--font-display); font-size: var(--size-caption); color: var(--text-secondary); }
.review__foot { margin: var(--space-2) 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
.review__segment { display: inline-flex; align-items: center; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 12px; letter-spacing: .03em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-sm); background: var(--surface-tint); border: 1px solid var(--badge-fresh-border); color: var(--green-deep); }
.review__source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: var(--size-caption); color: var(--text-secondary); }
.review__source .ic { width: 14px; height: 14px; }
@media (max-width: 960px) {
.reviews__layout, .reviews__layout--alone { grid-template-columns: 1fr; gap: var(--space-5); }
.reviews__summary { position: static; }
.reviews__tile, .reviews__layout--alone .reviews__tile { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "g rating" "g stars" "g count" "proof proof" "links links"; column-gap: var(--space-4); align-items: center; }
.reviews__g { grid-area: g; margin: 0; }
.reviews__rating { grid-area: rating; font-size: 44px; }
.reviews__tile .review__stars { grid-area: stars; }
.reviews__count { grid-area: count; }
.reviews__proof, .reviews__layout--alone .reviews__proof { grid-area: proof; width: auto; margin: var(--space-3) 0 0; padding-top: var(--space-3); border-top: 1px solid var(--border-line); }
.reviews__links, .reviews__layout--alone .reviews__links { grid-area: links; flex-direction: row; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }
/* The wall becomes the site's scroll-snap row, the next card peeking.
Photo cards and text cards are the same width, so the row snaps evenly. */
.reviews__wall { column-count: auto; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding: 0 var(--gutter) var(--space-3); margin: 0 calc(-1 * var(--gutter)); scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.review { flex: 0 0 62%; max-width: 340px; margin: 0; scroll-snap-align: start; }
}
@media (max-width: 720px) { .review { flex-basis: 78%; } .reviews__links, .reviews__layout--alone .reviews__links { flex-direction: column; gap: 0; } }
/* ============================================================
S11 BLOG (Paper) — one featured + two stacked
============================================================ */
.blog__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--space-5); }
.blog__stack { display: flex; flex-direction: column; gap: var(--space-4); }
.post { position: relative; display: flex; flex-direction: column; background: var(--surface-card); border: 1px solid var(--border-line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--duration-base) var(--ease-grow), transform var(--duration-base) var(--ease-grow), border-color var(--duration-base) var(--ease-standard); }
.post:hover, .post:focus-within { box-shadow: var(--shadow-lift); transform: translateY(-3px); border-color: var(--green-forest); }
.post .ph { border-radius: 0; }
.post__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; flex: 1; }
.post__title { font-family: var(--font-display); font-stretch: var(--stretch-heading); font-weight: var(--weight-heading); font-size: var(--size-h3); line-height: 1.2; margin: 0; }
.post__title a { color: var(--text-primary); text-decoration: none; }
.post__title a::after { content: ""; position: absolute; inset: 0; } /* whole card is the tap target */
.post:hover .post__title a, .post:focus-within .post__title a { color: var(--green-deep); text-decoration: underline; text-decoration-thickness: 2px; }
.post__meta { margin: 0; font-family: var(--font-display); font-size: 14px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.post--small { flex-direction: row; align-items: stretch; flex: 1; }
.post--small .ph { flex: 0 0 150px; min-height: 100%; }
.post--small .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post--small .post__body { padding: var(--space-4) var(--space-5); gap: var(--space-2); justify-content: center; }
.post--small .post__title { font-size: var(--size-h4); }
@media (max-width: 960px) { .blog__grid { grid-template-columns: 1fr; } .post--small .ph { flex-basis: 132px; } }
@media (max-width: 720px) { .post__body { padding: var(--space-4); } .post--small .ph { flex-basis: 104px; } .post--small .post__body { padding: var(--space-3) var(--space-4); } .post--small .post__title { font-size: 16.5px; } }
/* ============================================================
S12 FAQ (white)
============================================================ */
.faq { background: var(--surface-card); border-top: 1px solid var(--border-line); border-bottom: 1px solid var(--border-line); }
.faq__list { max-width: var(--measure-article); border: 1px solid var(--border-line); border-radius: var(--radius-lg); background: var(--surface-paper); overflow: hidden; }
.faq__item { border-top: 1px solid var(--border-line); }
.faq__item:first-child { border-top: none; }
.faq__q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4) 20px; min-height: 56px; cursor: pointer; font-family: var(--font-display); font-weight: var(--weight-ui); font-size: 17px; color: var(--text-primary); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::after { content: "+"; color: var(--green-forest); font-size: 20px; line-height: 1; transition: transform var(--duration-fast) var(--ease-grow); }
.faq__item[open] .faq__q::after { transform: rotate(45deg); }
.faq__a { padding: 0 20px 20px; font-size: 16.5px; line-height: 1.65; color: var(--text-secondary); }
.faq__a p { margin: 0; }
@media (max-width: 720px) { .faq__q { padding: var(--space-4) var(--space-4); font-size: 16px; } .faq__a { padding: 0 var(--space-4) var(--space-4); font-size: 16px; } }
/* ============================================================
S13 FINAL CTA (Paper)
============================================================ */
.cta { text-align: center; padding: var(--space-9) 0; }
.cta h2 { margin: 0 auto var(--space-7); max-width: 22ch; }
.cta__actions { display: flex; justify-content: center; gap: var(--space-3); flex-wrap: wrap; }
@media (max-width: 720px) { .cta { padding: var(--space-8) 0; } .cta__actions { flex-direction: column; } .cta__actions .btn { width: 100%; } }
/* ============================================================
Build additions (job 1) — not in the mockup; each says why.
============================================================ */
/* Sticky header. In the mockup .masthead is sticky inside .site-header,
which is exactly as tall as the masthead, so it can never stick. The
header itself sticks instead: condensed 56px row, 44px logo. */
.site-header { position: sticky; top: 0; }
/* Anchor jumps and the skip link land below the stuck header (:root outranks
the admin bar's own html { scroll-padding-top } whatever the load order). */
:root { scroll-padding-top: calc(var(--header-condensed-h) + var(--wp-admin--admin-bar--height, 0px)); }
/* The drawer (z 60) sits inside the header's stacking context (z 40),
under the mobile bar (z 50). Lift the header while the drawer is
open so the drawer covers the bar, as the z tokens intend. */
body.drawer-open .site-header { z-index: var(--z-drawer); }
/* WordPress admin bar (only for logged-in editors, who bypass the page cache). */
@media (min-width: 601px) { .admin-bar .site-header, .admin-bar .drawer { top: var(--wp-admin--admin-bar--height, 32px); } }
/* WordPress core markup (pagination headings, etc.) uses .screen-reader-text. */
.screen-reader-text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Generic templates (index, page, 404, WooCommerce wrapper). Deliberately
minimal: base type and .section/.container do the work. */
.entry + .entry { margin-top: var(--space-7); padding-top: var(--space-7); border-top: 1px solid var(--border-line); }
.entry__title a { color: inherit; text-decoration: none; }
.entry__title a:hover, .entry__title a:focus-visible { text-decoration: underline; }
.entry__meta { font-family: var(--font-display); font-size: var(--size-small); color: var(--text-secondary); margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.entry__content { max-width: var(--measure-article); }
.entry__content--wide { max-width: none; } /* cart, checkout, account: WooCommerce blocks need the width */
.entry__content > :is(h2, h3, h4) { margin-top: var(--space-6); }
/* The base reset strips list styles (right for UI lists); editorial lists need them back.
Direct children only, so lists inside WooCommerce blocks are left alone. */
.entry__content > :is(ul, ol), .entry__content > :is(ul, ol) :is(ul, ol) { padding-left: 1.4em; margin: 0 0 var(--space-4); }
.entry__content > ul, .entry__content > :is(ul, ol) ul { list-style: disc; }
.entry__content > ol, .entry__content > :is(ul, ol) ol { list-style: decimal; }
.entry__content img { height: auto; }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-7); font-family: var(--font-display); font-weight: var(--weight-ui); }
.nav-links .current { color: var(--text-secondary); }
.page-404 .search__form { max-width: 560px; padding: 0; margin: var(--space-5) 0; }
/* ============================================================
Build additions (job 3): states that live data brings. Each says why.
============================================================ */
/* WooCommerce marks a sale price as ; the browser underlines it by default, and
WooCommerce's own CSS (which would undo that) is not loaded on the homepage. */
.pcard__price ins { text-decoration: none; }
/* A product with no price shows "Not available to order" in its price line: a sentence,
not an amount, so it is set as quiet secondary text rather than an 18px price. */
.pcard__na { font-size: var(--size-small); font-weight: var(--weight-ui); color: var(--text-secondary); }
/* A real photo in the product (4:5), category (3:2) and featured-article (16:10) slots is
cropped to the slot, as the hero, course and small-article photos already are: a photo
of another shape (one uploaded before the theme's crops existed, or smaller than the
crop) must not change the card's height. Photos of the right shape look the same. */
.pcard .ph--plain { aspect-ratio: 4 / 5; }
.ccard .ph--plain { aspect-ratio: 3 / 2; }
.post--featured .ph--plain { aspect-ratio: 16 / 10; }
.pcard .ph--plain .ph__img, .ccard .ph--plain .ph__img, .post--featured .ph--plain .ph__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }