/* ============================================================
   site.css — shared foundation for every page on verygood.energy.
   Single source of truth for design tokens + the chrome that every
   page repeats: reset, base typography, the paper-grid background,
   the nav, the buttons, and the footer.

   index.html is the gold standard these values are taken from. Page-
   specific styling still lives inline in each page's <style> block;
   this file is only the parts that should look identical everywhere.
   Edit a shared color, the nav, or a button here once and every page
   that links this file updates together.
   ============================================================ */

:root {
  /* Paper world — hero, how-it-works, pricing, final CTA.
     Cream-paper background, dark ink, peach reserved for evidence-coded type. */
  --paper: #ffffff;
  --paper-2: #f7f8fa;
  --paper-rule: #e2e5ea;
  --paper-ink: #0e1220;
  --paper-ink-dim: #3a4151;
  --paper-ink-faint: #3a4151;

  /* Terminal world — feature sections (// 01 // 02 // 03).
     Deep slate background, phosphor peach (evidence) + cool dim (CRM lie). */
  --terminal: #0c0e22;
  --terminal-2: #15172e;
  --terminal-rule: #2a2f4a;
  --terminal-ink: #eceef5;
  --terminal-ink-dim: #c4c9d2;
  --terminal-phosphor: #e08b4a;        /* "what actually happened" — evidence */
  --terminal-phosphor-rgb: 240, 162, 106;
  --terminal-dim: #5a6b86;             /* "what the CRM thinks happened" — the lie */
  --terminal-dim-rgb: 107, 112, 153;

  /* Legacy tokens — kept so existing widgets still render. Paper/terminal
     tokens above are the source of truth for the rebuild. */
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --bg-3: #eef1f6;
  --line: var(--paper-rule);
  --line-2: #d4d8df;
  --ink: var(--paper-ink);
  --ink-dim: var(--paper-ink-dim);
  --ink-faint: var(--paper-ink-faint);
  --accent: var(--paper-ink);
  --accent-ink: var(--paper-ink);
  --accent-rgb: 0, 0, 0;
  --accent-2: #0e1220;
  --good: #e39464;
  --good-rgb: 227, 148, 99;
  /* AA-compliant text variant of --good on the paper background. */
  --good-ink: #b45a28;
  --good-ink-rgb: 180, 90, 40;
  --bad: #B5331E;
  /* Tri-state pipeline status: pending → progress → done */
  --c-pending: #6c9fce;
  --c-pending-rgb: 108, 159, 206;
  --c-progress: #e39464;
  --c-progress-rgb: 227, 148, 99;
  --c-done: #159589;
  --c-done-rgb: 21, 149, 137;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* Strategic accent — soft chartreuse used for highlights/selection. */
  --lime: #9aa1ae;
  --lime-rgb: 154, 161, 174;
  --maxw: 1240px;
  --tap: 44px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
body {
  font-family: var(--sans);
  background: var(--paper);
  color: var(--paper-ink);
  line-height: 1.55;
  overflow-x: hidden;
  background-image: none;
  font-feature-settings: 'ss01', 'cv11';
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
::selection { background: #e39464; color: #ffffff; }

/* Focus indicators — keyboard accessibility */
:focus { outline: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
.btn:focus-visible,
.nav-cta:focus-visible {
  outline: 2px solid var(--accent-2);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--bg);
  padding: 10px 16px;
  font-family: var(--mono);
  font-size: 13px;
  z-index: 100;
}
.skip-link:focus { left: 16px; top: 12px; }

/* Subtle paper-grid background. Fixed to the viewport so it sits
   behind every section as the user scrolls — sections with their
   own opaque background will still cover it. */
.grid-bg {
  position: fixed; inset: 0;
  background-image:
    linear-gradient(#dce0ec 1px, transparent 1px),
    linear-gradient(90deg, #dce0ec 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

/* ===== NAV ===== */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
}
.nav .container {
  display: flex; align-items: center;
  gap: 24px;
  padding-top: 14px; padding-bottom: 14px;
}
/* Push the nav-links and CTA to the right edge; the logo stays left. */
.nav-links { margin-left: auto; }
.nav .nav-cta { margin-left: 8px; }
.brand {
  display: inline-flex; align-items: center;
  line-height: 1;
}
.brand-logo {
  display: block;
  height: 52px;
  width: auto;
  max-width: 260px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 44px;
  list-style: none;
  position: relative;
}
.nav-links li { display: flex; align-items: center; position: relative; z-index: 2; }
.nav-links a {
  font-family: var(--mono); font-size: 13px;
  color: var(--ink-dim);
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-cta {
  font-family: var(--mono); font-size: 13px;
  padding: 12px 18px;
  border: 1px solid var(--line-2);
  background: var(--bg-2);
  transition: all .15s;
  min-height: var(--tap);
  display: inline-flex;
  align-items: center;
}
.nav-cta:hover { background: #e39464; border-color: #e39464; color: #FFFFFF; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--mono); font-size: 14px; font-weight: 500;
  padding: 14px 20px;
  min-height: var(--tap);
  transition: transform .15s, background .15s, border-color .15s, color .15s;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }

/* Signature CTA — pill anchored to the VeryGood peach accent, with two
   continuously-animated warm gradient layers (interior fill + outer halo)
   that fade in on hover/focus. */
.btn-glow {
  position: relative;
  isolation: isolate;
  background: #e39464;
  color: #FFFFFF;
  border: 1.5px solid #e39464;
  border-radius: 999px;
  padding: 12.5px 28px;
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  transition: transform .2s ease, color .25s ease, border-color .25s ease;
}
.btn-glow::before,
.btn-glow::after {
  content: '';
  position: absolute;
  z-index: -1;
  border-radius: 999px;
  background: linear-gradient(45deg,
    #e39464,   /* HubSpot orange */
    #d97757,   /* deeper orange */
    #e39464,   /* VeryGood peach */
    #f4c99a,   /* light peach */
    #d97757,   /* Claude terracotta */
    #b45a28,   /* ember red */
    #e39464    /* seamless loop */
  );
  background-size: 400% 100%;
  animation: btn-glow-drift 20s linear infinite;
  opacity: 0;
  transition: opacity .35s ease-in-out;
  pointer-events: none;
}
.btn-glow::before {
  top: -3px;
  left: -3px;
  width: calc(100% + 6px);
  height: calc(100% + 6px);
  filter: blur(8px);
}
.btn-glow::after {
  inset: 0;
}
.btn-glow:hover,
.btn-glow:focus-visible {
  transform: translateY(-1px);
  color: #FFFFFF;
  border-color: transparent;
}
.btn-glow:hover::before,
.btn-glow:focus-visible::before,
.btn-glow:hover::after,
.btn-glow:focus-visible::after {
  opacity: 1;
}
@keyframes btn-glow-drift {
  from { background-position: 0%   50%; }
  to   { background-position: 400% 50%; }
}

/* ===== FOOTER ===== */
footer {
  border-top: 1px solid var(--line);
  padding: 36px 0;
}
footer .container {
  display: flex; justify-content: space-between;
  align-items: center; flex-wrap: wrap; gap: 20px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-dim);
}
footer a:hover { color: var(--ink); }
.foot-links { display: flex; gap: 24px; list-style: none; }