/* Growing with PPC design system v2 ("Signal").
   Colour meaning is the system: sage = spend, clay = waste, lime = results. Lime is never decoration. */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300..800&family=Geist+Mono:wght@400;600&display=swap');

:root{
  /* forest surfaces, lifted off near-black */
  --f-900:#071f19; --f-800:#0b2b23; --f-700:#0f382d; --f-600:#14473a; --f-500:#1c5848; --f-400:#2b6d59;
  /* semantic data colours */
  --spend:#b9d6a4; --spend-2:#9fc08e; --spend-3:#86a87a;
  --waste:#e7ac8b; --waste-2:#c98f71;
  --result:#d4f76b; --result-glow:#d4f76b40;
  /* text */
  --ink:#eef2e2; --ink-2:#cedcc9; --ink-3:#93ab98;
  /* light tile for third-party logos (shown unaltered on light ground) */
  --tile:#f4f6ee;
  --line:#b9d6bd26; --line-2:#b9d6bd14;
  /* type */
  --sans:'Geist', 'Helvetica Neue', Arial, sans-serif;
  --mono:'Geist Mono', ui-monospace, Menlo, monospace; /* ASCII graphics only, never body text */
  --t-hero:clamp(3rem,6.2vw,6.4rem); --t-h2:clamp(2.1rem,3.8vw,3.8rem); --t-h3:clamp(1.25rem,1.6vw,1.6rem);
  --t-body:17px; --t-small:14px; --t-label:12px;
  /* space / radius / depth */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s6:24px; --s8:32px; --s12:48px; --s16:64px; --s24:96px;
  --r-s:8px; --r-m:14px; --r-l:24px; --r-pill:999px;
  --glass:linear-gradient(160deg,#1c584899,#0b2b23cc); --glass-line:1px solid #d4f76b22;
  --shadow:0 30px 80px #020f0b99, inset 0 1px 0 #ffffff14;
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --d-fast:160ms; --d-mid:420ms; --d-scene:900ms;
}
*{box-sizing:border-box}
html{background:var(--f-900)}
body{margin:0;font-family:var(--sans);font-size:var(--t-body);line-height:1.55;color:var(--ink);background:radial-gradient(110% 70% at 70% 0%,var(--f-500) 0%,var(--f-700) 38%,var(--f-800) 70%,var(--f-900) 100%) no-repeat;background-color:var(--f-900);-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.045em;line-height:1}
p{margin:0}
a{color:inherit}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:clamp(20px,4.5vw,64px)}
.grain{position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.label{font-size:var(--t-label);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.label.lime{color:var(--result)}
.tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:5px 10px;border-radius:var(--r-pill);background:#d4f76b14;color:var(--ink-2);border:1px solid var(--line);white-space:nowrap}
.btn{display:inline-flex;align-items:center;gap:18px;min-height:52px;padding:14px 22px;border-radius:var(--r-pill);background:var(--ink);color:var(--f-900);font:600 15px var(--sans);text-decoration:none;border:0;cursor:pointer;transition:transform var(--d-fast),background var(--d-fast)}
.btn:hover{transform:translateY(-2px);background:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid #eef2e244}
.btn.result{background:var(--result)}
.panel{border-radius:var(--r-l);background:var(--glass);border:var(--glass-line);box-shadow:var(--shadow);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
/* official platform logos: always on a light tile, never recoloured, never larger than our brand */
.ptile{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 16px;border-radius:12px;background:var(--tile);box-shadow:0 8px 24px #0006}
.ptile img{height:22px;width:auto;display:block}
.ptile.icon img{height:24px}
.ptile span{font:600 13px var(--sans);color:#202124}
.num{font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.k-spend{color:var(--spend)}.k-waste{color:var(--waste)}.k-result{color:var(--result)}
:focus-visible{outline:3px solid var(--result);outline-offset:3px}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;animation:none!important}}
html,body{overflow-x:clip}main>*{min-width:0}
/* colour ASCII (Signal) */
pre.ascii{margin:0;font-family:var(--mono);font-weight:600;line-height:1.2;letter-spacing:0;white-space:pre;font-size:var(--a-size,10px);font-variant-ligatures:none;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
pre.ascii span{text-shadow:0 0 .6em currentColor}