/* ============================================================
   Syndie · V5 tokens — the final direction (landing first).
   Locked by team review:
   - Serif display (Newsreader) — "best font for the landing page".
   - Sharp geometry: 3px corner radius everywhere. No pills.
   - The organic green gradient (from the supplied image) is THE
     gradient: hero backdrop, progress fills, photo washes.
   - Line grid kept, but lighter and thinner.
   - Mono labeling stays, but no terminal/console styling anywhere —
     the product must not look tech-heavy.
   - Stats and feature-trio patterns demoted: quiet, not sections.
   ============================================================ */

:root {
  /* Surfaces */
  --canvas: #FAF9F6;
  --linen: #F1EEE9;
  --card: #FFFFFF;
  --ink: #17171C;

  /* Text */
  --text: #1D1D1B;
  --text-2: #57574F;
  --faint: #8B8B82;
  --on-dark: #F7F8F2;
  --on-dark-2: #C2CBB4;

  /* Lines */
  --hairline: #E3E0D8;
  --gridline: #F2F0EA;        /* lighter + thinner grid */

  /* The green system — sampled from the supplied gradient image */
  --moss-deep: #22381C;
  --moss: #2E5527;
  --leaf: #5C8A3C;
  --lime: #A9C93F;
  --lime-pale: #DDE8C4;
  --green-soft: #EBF1E4;
  --green-text: #2E5527;

  /* The organic gradient — blurred leaf-light, built from the image */
  --organic:
    radial-gradient(42% 34% at 12% 78%, rgba(196,224,99,.85) 0%, rgba(196,224,99,0) 70%),
    radial-gradient(30% 26% at 8% 38%, rgba(163,199,84,.55) 0%, rgba(163,199,84,0) 70%),
    radial-gradient(36% 30% at 55% 62%, rgba(150,190,80,.5) 0%, rgba(150,190,80,0) 70%),
    radial-gradient(28% 24% at 78% 88%, rgba(180,212,92,.45) 0%, rgba(180,212,92,0) 70%),
    radial-gradient(46% 40% at 85% 30%, rgba(58,94,44,.6) 0%, rgba(58,94,44,0) 75%),
    linear-gradient(160deg, #2A4522 0%, #2E5527 45%, #3C6530 100%);
  --organic-bar: linear-gradient(90deg, #2E5527 0%, #5C8A3C 45%, #A9C93F 100%);
  --organic-overlay:
    radial-gradient(50% 45% at 10% 80%, rgba(169,201,63,.5) 0%, rgba(169,201,63,0) 70%),
    linear-gradient(160deg, rgba(34,56,28,.55) 0%, rgba(46,85,39,.35) 100%);

  /* Status */
  --ok: #2E6B34;   --ok-soft: #E9F1E6;
  --warn: #96660F; --warn-soft: #F5EDDA;
  --bad: #A63A22;  --bad-soft: #F6E9E4;

  /* Shape — sharp, one value */
  --r: 3px;

  /* Type */
  --font-display: "Newsreader", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Geist Mono", Consolas, monospace;

  --page-max: 1160px;
}

* { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--canvas); color: var(--text);
  font-family: var(--font-body); font-size: 14.5px; line-height: 1.5;
  letter-spacing: -0.006em;
}

::selection { background: var(--lime-pale); }

/* Lighter, thinner working grid */
.grid-paper {
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Film grain for the organic gradient */
.grain { position: relative; isolation: isolate; }
.grain::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23n)' opacity='0.7'/></svg>");
}
.grain > * { position: relative; z-index: 2; }

.display { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; margin: 0; }

/* ---- Mono labeling (quiet, never terminal) ---- */
.mono {
  font-family: var(--font-mono); font-size: 11px; font-weight: 400;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.09em;
  text-transform: uppercase; border-radius: var(--r); padding: 8px 13px;
}
.kicker::before { content: "▪"; font-size: 8px; }

/* ---- Actions — sharp ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; line-height: 1;
  border-radius: var(--r); border: none; cursor: pointer; text-decoration: none;
  transition: background .13s ease, border-color .13s ease, color .13s ease;
}
.btn:focus-visible { outline: 2px solid var(--leaf); outline-offset: 2px; }
.btn-ink { background: var(--ink); color: #fff; padding: 13px 20px; }
.btn-ink:hover { background: #000; }
.btn-ink.sm { padding: 10px 15px; font-size: 13px; }
.btn-light { background: var(--card); color: var(--ink); padding: 13px 20px; }
.btn-light:hover { background: var(--lime-pale); }
.btn-line { background: transparent; color: var(--ink); border: 1px solid var(--ink); padding: 12px 19px; }
.btn-line:hover { background: var(--linen); }
.btn-line-light { background: transparent; color: var(--on-dark); border: 1px solid rgba(247,248,242,.55); padding: 12px 19px; }
.btn-line-light:hover { border-color: var(--on-dark); }
.btn-ghost { background: transparent; color: var(--text); padding: 9px 13px; border-radius: var(--r); font-weight: 400; }
.btn-ghost:hover { background: var(--linen); }
.btn-green { background: var(--moss); color: #fff; padding: 13px 20px; }
.btn-green:hover { background: var(--moss-deep); }

.link-u {
  color: var(--text); font-weight: 500; text-decoration: underline;
  text-underline-offset: 4px; text-decoration-thickness: 1px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 13.5px;
}
.link-u:hover { color: #000; }
.link-u:focus-visible { outline: 2px solid var(--leaf); outline-offset: 3px; }

/* ---- Tags ---- */
.tag {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1;
  border-radius: var(--r); padding: 6px 9px;
}
.tag::before { content: "▪"; font-size: 8px; }
.tag-ok   { color: var(--ok);   background: var(--ok-soft); }
.tag-warn { color: var(--warn); background: var(--warn-soft); }
.tag-bad  { color: var(--bad);  background: var(--bad-soft); }

/* ---- Cards ---- */
.card { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--r); }

.meter { height: 4px; border-radius: 2px; background: var(--hairline); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0%; background: var(--organic-bar); transition: width .5s ease; }

.scroll-x { overflow-x: auto; scrollbar-width: none; }
.scroll-x::-webkit-scrollbar { display: none; }