/* Green materials radar, the product site. Shared by index, faq and the blog.
   ------------------------------------------------------------------------------------------------
   Colour (Impeccable colorize): one world with the product UI in ../product-ui.html.
   Strategy: committed. Pine owns the opening and the markets band; a pine-tinted paper owns the reading
   bands; lime is the single signal (the primary action, the selected market, the key number on pine).
   Saving green and carbon blue keep the meanings they have inside the product.
   Pairs checked: ink on paper 16.3:1 · ink-3 on paper 5.3:1 · on-pine on pine-900 14.2:1 ·
   on-pine-2 on pine-900 8.2:1 · pine-900 on lime 12.4:1 · save on paper 5.1:1 · co2 on paper 5.9:1. */
:root{
	/* pine ground */
	--pine-950:#09150f;--pine-900:#0f231b;--pine-850:#142c22;--pine-800:#18342a;--pine-700:#1f4636;--pine-600:#2a5d48;
	--on-pine:#e8f0ea;--on-pine-2:#a9bcb1;--pine-line:rgba(232,240,234,.22);
	/* the one signal */
	--lime:#c4ee68;--lime-2:#a6d544;--lime-ink:#0f231b;
	/* paper, tinted toward pine */
	--bg:#f2f4f1;--surface:#ffffff;--inset:#f7f8f6;--line:#e3e7e2;--line-2:#d3d9d2;
	--ink:#0e1914;--ink-2:#35423b;--ink-3:#5b6862;
	/* meanings, as in the product */
	--save:#06774f;--save-bg:#e4f4eb;--co2:#0a6585;--co2-bg:#e3f0f5;--focus:#2a5d48;
	/* form */
	--font:'Geist',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
	--r:6px;--r-lg:12px;--ease:cubic-bezier(.16,1,.3,1);
	--m:48px;--g:24px;--head:64px;
}
*{box-sizing:border-box}
html{background:var(--bg);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:var(--head);scrollbar-color:var(--line-2) var(--bg);scrollbar-width:thin}
body{margin:0;background:var(--bg);font:400 18px/28px var(--font);font-feature-settings:"ss01";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--lime);color:var(--lime-ink)}
a{color:var(--pine-600);text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.pine :focus-visible{outline-color:var(--lime)}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
h1,h2,h3{font-weight:700;text-wrap:balance}
p{text-wrap:pretty}
ul,ol{list-style:none}
button{font:inherit;color:inherit}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--g);padding:0 var(--m)}
.wrap{max-width:1440px;margin:0 auto}
.pine{background:var(--pine-900);color:var(--on-pine)}
.pine a{color:var(--lime)}
.mega{font:700 clamp(44px,5.6vw,88px)/.98 var(--font);letter-spacing:-.045em}
.h2{font:700 clamp(34px,3.8vw,58px)/1.02 var(--font);letter-spacing:-.04em}
.h3{font:650 clamp(22px,1.8vw,28px)/1.15 var(--font);letter-spacing:-.025em}
.lede{font:400 clamp(19px,1.45vw,22px)/1.5 var(--font);color:var(--ink-2);max-width:36ch}
.pine .lede{color:var(--on-pine-2)}
.lbl{font:500 14px/18px var(--font);color:var(--ink-3)}
.pine .lbl{color:var(--on-pine-2)}
.mono{font-family:var(--mono)}
.btn{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:var(--r);border:1px solid transparent;background:var(--lime);color:var(--lime-ink);font:600 15px/18px var(--font);cursor:pointer;transition:background .2s,transform .12s;white-space:nowrap}
.btn:hover{background:var(--lime-2);text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn.ol{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ol:hover{border-color:var(--ink);background:var(--surface)}
.pine .btn.ol{color:var(--on-pine);border-color:var(--pine-line)}
.pine .btn.ol:hover{border-color:var(--on-pine);background:var(--pine-850)}
.lk{display:inline-flex;align-items:center;gap:6px;font:600 16px/20px var(--font);min-height:44px}
.lk .ar{transition:transform .3s var(--ease)}
.lk:hover .ar{transform:translateX(3px)}

/* ---- running head ---- */
.run{position:sticky;top:0;z-index:40;height:var(--head);display:flex;align-items:center;gap:28px;padding:0 var(--m);background:var(--pine-900);color:var(--on-pine);border-bottom:1px solid var(--pine-line)}
.wm{display:inline-flex;align-items:center;gap:10px;font:700 17px/20px var(--font);letter-spacing:-.02em;color:var(--on-pine)}
.wm:hover{text-decoration:none;color:#fff}
.wm svg{width:26px;height:26px}
.run nav{margin-left:auto;display:flex;gap:26px}
.run nav a{font:500 15px/20px var(--font);color:var(--on-pine-2)}
.run nav a:hover,.run nav a[aria-current="page"]{color:var(--on-pine);text-decoration:none}
.run .loc{display:flex;align-items:center}
.run select{appearance:none;-webkit-appearance:none;height:36px;border-radius:var(--r);border:1px solid var(--pine-line);background:var(--pine-850) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23e8f0ea' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center;padding:0 30px 0 12px;font:500 14px/18px var(--font);color:var(--on-pine);cursor:pointer}
.run .btn{height:38px;padding:0 14px}

/* ---- footer ---- */
.foot{padding:40px var(--m) 48px;display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;border-top:1px solid var(--line);color:var(--ink-3);font:500 14px/20px var(--font)}
.foot nav{display:flex;flex-wrap:wrap;gap:12px 24px;margin-left:auto}
.foot a{color:var(--ink-2)}

@media (max-width:760px){
	:root{--m:20px;--g:12px;--head:56px}
	.g{grid-template-columns:repeat(4,minmax(0,1fr))}
	.g>*{grid-column:1/-1 !important}
	.run{gap:6px}
	.run nav,.run .loc{display:none}
	.run .btn{margin-left:auto;height:44px;padding:0 11px;font-size:14px}
	.wm{min-height:44px;gap:7px;font-size:14px;letter-spacing:-.02em;white-space:nowrap}
	.wm svg{width:22px;height:22px;flex:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none !important;animation:none !important}}
.pine .btn{color:var(--lime-ink)}
.pine .btn:hover{color:var(--lime-ink)}
.pine .btn.ol{color:var(--on-pine)}

/* ---- analytics consent (site.js), shown only once a PostHog key is set (preview with ?consent=preview).
   A centred dialog that opens shortly after arrival; the radar draws itself in as its hero. Yes is the way on;
   No, or Esc, keeps analytics off. ---- */
.cs-open,.cs-open body{overflow:hidden}
.cs-scrim{position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:20px;background:rgba(9,21,15,0);backdrop-filter:blur(0);transition:background .5s var(--ease),backdrop-filter .5s var(--ease)}
.cs-scrim.on{background:rgba(9,21,15,.62);backdrop-filter:blur(6px) saturate(1.1)}
.consent{width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:36px 40px 32px;text-align:center;background:var(--pine-900);color:var(--on-pine);border:1px solid rgba(196,238,104,.25);border-radius:24px;box-shadow:0 2px 8px rgba(9,21,15,.3),0 40px 100px -24px rgba(9,21,15,.75);opacity:0;transform:translateY(22px) scale(.95);transition:opacity .55s var(--ease),transform .7s var(--ease)}
.cs-scrim.on .consent{opacity:1;transform:none}
.cs-scrim.gone{background:rgba(9,21,15,0);backdrop-filter:blur(0)}
.cs-scrim.gone .consent{opacity:0;transform:translateY(12px) scale(.97);transition-duration:.35s}
.cs-radar{width:220px;height:220px;margin:0 auto 22px;border-radius:50%;background:radial-gradient(circle at 50% 50%,#1a3a2c 0,#0f231b 72%);box-shadow:inset 0 0 0 1px rgba(196,238,104,.28),0 0 0 14px rgba(196,238,104,.04)}
.cs-radar svg{display:block;width:100%;height:100%}
.cs-radar .ring{fill:none;stroke:rgba(196,238,104,.22);stroke-width:1.2;transform-origin:120px 120px;transform:scale(0);transition:transform .9s var(--ease)}
.cs-radar .axis{stroke:rgba(196,238,104,.1);stroke-width:1}
.cs-scrim.on .ring{transform:none}
.cs-scrim.on .r2{transition-delay:.1s}.cs-scrim.on .r3{transition-delay:.2s}
.cs-radar .sweep{transform-origin:120px 120px;opacity:0;transition:opacity .5s .35s;animation:cs-sweep 3.4s linear infinite}
.cs-scrim.on .sweep{opacity:1}
.cs-radar .blip{fill:#c4ee68;opacity:0;animation:cs-ping 2.4s ease-out infinite}
.cs-radar .b1{animation-delay:.9s}.cs-radar .b2{animation-delay:1.7s}.cs-radar .b3{animation-delay:2.4s}
.consent h2{font:700 clamp(24px,2.6vw,32px)/1.15 var(--font);letter-spacing:-.025em;max-width:22ch;margin:0 auto}
.consent p{margin:12px auto 0;max-width:46ch;font:400 16px/24px var(--font);color:var(--on-pine-2)}
.consent .acts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:26px}
.consent .btn{height:48px;padding:0 22px;font-size:15px}
.cs-note:empty{display:none}
.cs-note{display:block;margin-top:14px;font:500 14px/20px var(--font);color:var(--lime)}
@keyframes cs-sweep{to{transform:rotate(360deg)}}
@keyframes cs-ping{0%{opacity:0}12%{opacity:1}60%{opacity:.4}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.cs-scrim,.consent,.cs-radar *{transition:none!important;animation:none!important}.cs-radar .ring{transform:none}.cs-radar .sweep,.cs-radar .blip{opacity:1}}
@media (max-width:760px){.consent{padding:28px 20px 24px;border-radius:20px}.cs-radar{width:160px;height:160px;margin-bottom:16px}.consent .btn{flex:1 1 100%;justify-content:center}}
.consent-open{padding:0;border:0;background:none;color:var(--ink-2);font:inherit;cursor:pointer}
.consent-open:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
@media (prefers-reduced-motion:reduce){.consent,.cs-radar .sweep,.consent .blip{animation:none!important;transition:none!important}}
@media print{.consent{display:none}}

/* the outreach address as plain selectable text */
.addr{user-select:all;-webkit-user-select:all;font-weight:600}