/* =========================================================================
   enereg.com — marketing site styles
   =========================================================================
   Plain CSS on the design tokens (site/tokens.css, generated from
   design/tokens.css). No framework: two pages, no server logic.

   The marketing surface keeps the shipped site's language — dark navy hero,
   brand-500 CTAs, paper checkup section — expressed through tokens so the
   conformance gate can police it (`--target site`).
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  background: var(--color-surface);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
img, svg { max-width: 100%; }
a { color: inherit; }

/* Permanently-dark surfaces re-declare the dark-scope role values from
   tokens.css (the site never toggles .dark). Values are declared token
   values, so the gate accepts them; keep in lockstep with the .dark block. */
.hero, .section.dark, .section.dark-2, .footer, .mock, .panel-dark {
  --color-focus: var(--color-brand-300);
  --color-warning-fill: #E8A838;
  --color-warning-text: #E8A838;
}

.container { margin: 0 auto; width: 100%; max-width: 1200px; padding: 0 20px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }

/* ─── Type ─── */
.display { font-family: var(--font-serif); letter-spacing: -0.02em; line-height: 1.12; font-weight: 500; }
.mono { font-family: var(--font-mono); }
.kicker {
  display: block; font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.15em;
  color: var(--color-text-tertiary); margin-bottom: 16px;
}
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); margin: 0 0 20px; color: var(--color-navy-900); }

/* ─── Buttons ─── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15.5px; font-weight: 500; text-decoration: none;
  cursor: pointer; transition: background-color var(--duration-base) var(--ease-standard), border-color var(--duration-base) var(--ease-standard);
}
.btn-primary { background: var(--color-brand); color: var(--color-on-brand); box-shadow: var(--shadow-1); }
.btn-primary:hover { background: var(--color-brand-hover); }
.btn-secondary { background: var(--color-surface); color: var(--color-navy-900); border-color: var(--color-border-secondary); }
.btn-secondary:hover { background: var(--color-surface-secondary); }
.btn-ghost-dark { background: color-mix(in srgb, var(--color-surface) 8%, transparent); color: var(--color-surface); border-color: var(--color-navy-400); }
.btn-ghost-dark:hover { background: color-mix(in srgb, var(--color-surface) 14%, transparent); }
.btn-sm { padding: 8px 16px; font-size: 14px; border-radius: 10px; }

/* ─── Nav ─── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}
.nav-inner { display: flex; align-items: center; gap: 24px; height: 60px; }
.nav-logo { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 22px; color: var(--color-brand); text-decoration: none; letter-spacing: -0.02em; }
.nav-beta {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em;
  padding: 2px 10px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
}
.nav-links { display: none; align-items: center; gap: 22px; margin-left: auto; }
.nav-links a { font-size: 14.5px; color: var(--color-text-secondary); text-decoration: none; padding: 8px 2px; }
.nav-links a:hover { color: var(--color-text-primary); }
.nav-cta { margin-left: auto; }
@media (min-width: 820px) {
  .nav-links { display: flex; }
  .nav-cta { margin-left: 0; }
}

/* ─── Hero (dark) ─── */
.hero {
  position: relative; overflow: hidden;
  min-height: 88vh; display: flex; align-items: center;
  background: linear-gradient(135deg, var(--color-navy-950), var(--color-navy-900) 55%, var(--color-brand-950));
  color: var(--color-surface);
  padding: 72px 0;
}
.hero-grid { display: grid; gap: 48px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--color-brand-300); margin-bottom: 24px;
}
.hero-eyebrow .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--color-brand-400); animation: pulse 2s infinite; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 24px; color: var(--color-surface); }
.hero p.lede { font-size: 18px; line-height: 1.65; color: var(--color-navy-300); max-width: 520px; margin: 0 0 36px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }

/* Hero dashboard mockup */
.mock {
  background: color-mix(in srgb, var(--color-navy-800) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 8%, transparent);
  border-radius: 16px; padding: 20px;
  box-shadow: var(--shadow-4);
  max-width: 560px; margin: 0 auto;
  font-size: 13px;
}
.mock-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.mock-title { font-weight: 600; font-size: 14px; color: var(--color-surface); }
.mock-chip {
  font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, var(--color-brand-500) 20%, transparent);
  color: var(--color-brand-300);
  border: 1px solid color-mix(in srgb, var(--color-brand-500) 15%, transparent);
}
.mock-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 12px; }
.mock-stat {
  background: color-mix(in srgb, var(--color-surface) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 6%, transparent);
  border-radius: 10px; padding: 12px;
}
.mock-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-navy-300); margin-bottom: 4px; }
.mock-stat .v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--color-surface); }
.mock-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
  background: color-mix(in srgb, var(--color-surface) 3%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 5%, transparent);
  color: var(--color-navy-100);
}
.mock-pill { font-size: 10px; padding: 2px 8px; border-radius: 999px; }
.mock-pill.ok  { background: color-mix(in srgb, var(--color-brand-400) 18%, transparent); color: var(--color-brand-200); }
.mock-pill.prep{ background: color-mix(in srgb, var(--color-warning-fill) 18%, transparent); color: var(--color-warning-text); }
.mock-pill.idle{ background: color-mix(in srgb, var(--color-surface) 10%, transparent); color: var(--color-navy-200); }
.mock-nudge {
  margin-top: 14px; padding: 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-ai) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ai) 20%, transparent);
}
.mock-nudge .who { display: flex; gap: 8px; align-items: flex-start; }
.mock-nudge .badge { width: 20px; height: 20px; border-radius: 999px; background: var(--color-ai); color: var(--color-on-solid); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.mock-nudge .t { font-size: 12.5px; font-weight: 500; color: var(--color-surface); }
.mock-nudge .d { font-size: 11.5px; color: var(--color-navy-300); }

/* ─── Tracking strip ─── */
.strip { padding: 56px 0; background: var(--color-surface); border-bottom: 1px solid var(--color-border); text-align: center; }
.strip .line { font-size: 15px; color: var(--color-text-secondary); }
.strip .line b { font-family: var(--font-mono); font-size: 1.25em; color: var(--color-navy-900); }

/* ─── Sections ─── */
.section { padding: 88px 0; }
.section.paper { background: var(--color-paper); }
.section.dark { background: var(--color-navy-950); color: var(--color-surface); }
.section.dark .section-title { color: var(--color-surface); }
.section.dark-2 { background: var(--color-navy-900); color: var(--color-surface); }
.section.dark-2 .section-title { color: var(--color-surface); }
.section-head { max-width: 720px; margin: 0 auto 48px; text-align: center; }

/* Problem: with/without */
.compare { display: grid; gap: 20px; max-width: 900px; margin: 0 auto; }
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare-card { border-radius: 16px; padding: 26px; }
.compare-card h3 { margin: 0 0 18px; font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
.compare-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.compare-card li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--color-text-secondary); }
.compare-card li::before { flex-shrink: 0; width: 20px; height: 20px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; }
.compare-without { background: color-mix(in srgb, var(--color-danger-light) 40%, transparent); border: 1px solid color-mix(in srgb, var(--color-danger) 10%, transparent); }
.compare-without h3 { color: var(--color-danger); }
.compare-without li::before { content: "✕"; background: color-mix(in srgb, var(--color-danger) 10%, transparent); color: var(--color-danger); }
.compare-with { background: color-mix(in srgb, var(--color-brand-50) 50%, transparent); border: 1px solid color-mix(in srgb, var(--color-brand-500) 10%, transparent); }
.compare-with h3 { color: var(--color-brand-600); }
.compare-with li::before { content: "✓"; background: color-mix(in srgb, var(--color-brand-500) 10%, transparent); color: var(--color-brand-600); }

/* Feature cards */
.cards-3 { display: grid; gap: 20px; }
@media (min-width: 820px) { .cards-3 { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: 16px; padding: 30px;
  transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard);
}
.card:hover { border-color: var(--color-brand-200); box-shadow: var(--shadow-2); }
.card .icon { width: 44px; height: 44px; border-radius: 12px; background: var(--color-brand-50); color: var(--color-brand-600); display: flex; align-items: center; justify-content: center; margin-bottom: 20px; font-size: 20px; }
.card h3 { margin: 0 0 12px; font-size: 18px; color: var(--color-navy-900); }
.card p { margin: 0; font-size: 15px; color: var(--color-text-secondary); }

/* Steps */
.step { display: grid; gap: 28px; align-items: center; padding: 36px 0; }
@media (min-width: 880px) { .step { grid-template-columns: 1fr 1fr; gap: 64px; } .step:nth-child(even) > .step-copy { order: 2; } }
.step-n { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--color-brand); margin-bottom: 12px; }
.step h3 { font-size: 24px; margin: 0 0 12px; color: var(--color-navy-900); letter-spacing: -0.01em; }
.step p { margin: 0; font-size: 15.5px; color: var(--color-text-secondary); }
.step-mock { background: var(--color-surface-secondary); border: 1px solid var(--color-border); border-radius: 14px; padding: 20px; font-size: 13px; }
.step-mock .h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-secondary); margin-bottom: 14px; }
.step-mock .row { display: flex; align-items: center; justify-content: space-between; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; color: var(--color-text-secondary); }
.step-mock .row b { color: var(--color-text-primary); font-weight: 500; }
.step-mock .tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 999px; background: var(--color-brand-50); color: var(--color-brand-600); }
.step-mock .tag.ai { background: var(--color-ai-light); color: var(--color-ai); }
.step-mock .meter { height: 6px; border-radius: 999px; background: var(--color-surface-tertiary); overflow: hidden; margin: 6px 0 2px; }
.step-mock .meter i { display: block; height: 100%; background: var(--color-brand); }

/* Dark feature rows */
.feature-row { display: grid; gap: 40px; align-items: center; }
@media (min-width: 880px) { .feature-row { grid-template-columns: 1fr 1fr; gap: 64px; } }
.feature-row + .feature-row { margin-top: 96px; }
.feature-row .kicker.brand { color: var(--color-brand-400); }
.feature-row .kicker.ai { color: var(--color-brand-400); }
.feature-row h2 { font-family: var(--font-serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 20px; color: var(--color-surface); }
.feature-row p { margin: 0; font-size: 16px; line-height: 1.7; color: var(--color-navy-300); }
.panel-dark {
  background: color-mix(in srgb, var(--color-navy-800) 60%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-surface) 8%, transparent);
  border-radius: 16px; padding: 20px; font-size: 13px;
}
.panel-alert {
  border-left: 3px solid var(--color-warning-fill);
  background: color-mix(in srgb, var(--color-warning-fill) 7%, transparent);
  border-radius: 0 10px 10px 0; padding: 14px 16px; margin-bottom: 14px;
}
.panel-alert .t { font-size: 13px; font-weight: 600; color: var(--color-surface); margin-bottom: 6px; }
.panel-alert .d { font-size: 12px; color: var(--color-navy-300); }
.panel-ai {
  background: color-mix(in srgb, var(--color-ai) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-ai) 15%, transparent);
  border-radius: 12px; padding: 16px;
}

/* Coverage */
.coverage-grid { display: grid; gap: 18px; }
@media (min-width: 700px) { .coverage-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .coverage-grid { grid-template-columns: repeat(3, 1fr); } }
.coverage-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; padding: 24px; }
.coverage-card .head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.coverage-card .flag { font-size: 22px; }
.coverage-card .name { font-size: 15.5px; font-weight: 600; color: var(--color-navy-800); }
.coverage-card .cc { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 999px; background: var(--color-surface-secondary); color: var(--color-text-secondary); margin-left: auto; }
.coverage-card .mapped { font-size: 14px; color: var(--color-brand-600); font-weight: 500; margin-bottom: 10px; }
.coverage-card dl { margin: 0; font-size: 14px; color: var(--color-text-secondary); display: grid; gap: 6px; }
.coverage-card dt { font-weight: 600; color: var(--color-text-secondary); display: inline; }
.coverage-card dd { margin: 0; display: inline; }
.coverage-card .note { font-size: 13.5px; font-style: italic; color: var(--color-text-secondary); margin-top: 10px; }
.coverage-foot { text-align: center; font-size: 14.5px; color: var(--color-text-tertiary); margin-top: 28px; }

/* Numbers */
.numbers { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
@media (min-width: 820px) { .numbers { grid-template-columns: repeat(4, 1fr); } }
.number { text-align: center; }
.number .v { font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-surface); margin-bottom: 12px; }
.number .d { font-size: 14.5px; color: var(--color-navy-400); max-width: 180px; margin: 0 auto; }

/* Checkup teaser + page */
.checkup-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0 0 40px; }
.checkup-badges span { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-navy-600); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 8px 16px; box-shadow: var(--shadow-1); }
.checkup-frame { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 16px; box-shadow: var(--shadow-2); overflow: hidden; max-width: 720px; margin: 0 auto; }
.checkup-note { text-align: center; font-size: 13px; color: var(--color-text-tertiary); margin-top: 20px; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border: 1px solid var(--color-border); border-radius: 14px; background: var(--color-surface); margin-bottom: 12px; overflow: hidden; }
.faq summary { list-style: none; cursor: pointer; padding: 20px 24px; font-size: 17px; font-weight: 500; color: var(--color-navy-800); display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "▾"; color: var(--color-text-secondary); transition: transform var(--duration-base) var(--ease-standard); }
.faq details[open] summary::after { transform: rotate(180deg); }
.faq details p { margin: 0; padding: 0 24px 20px; font-size: 15px; color: var(--color-text-secondary); }

/* Early access (dark) */
.access { text-align: center; }
.access form { max-width: 460px; margin: 36px auto 0; display: grid; gap: 12px; text-align: left; }
.access label { font-size: 13px; color: var(--color-navy-300); }
.access input, .access select {
  width: 100%; font: inherit; font-size: 15.5px;
  background: color-mix(in srgb, var(--color-surface) 7%, transparent);
  border: 1px solid var(--color-navy-500);
  border-radius: 12px; padding: 12px 16px; color: var(--color-surface);
}
.access input::placeholder { color: var(--color-navy-300); }
.access input:focus, .access select:focus { border-color: var(--color-brand-300); background: color-mix(in srgb, var(--color-surface) 10%, transparent); }
.access select { appearance: none; }
.access .msg-ok { font-size: 21px; font-weight: 600; color: var(--color-surface); }
.access .msg-ok + p { color: var(--color-navy-300); }
.access .msg-err {
  display: none; font-size: 14px; color: var(--color-danger-light);
  background: color-mix(in srgb, var(--color-danger) 25%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-danger) 40%, transparent);
  border-radius: 12px; padding: 12px 16px;
}
.access .fineprint { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; margin-top: 28px; font-size: 14.5px; color: var(--color-navy-300); }
.access .fineprint span { display: inline-flex; gap: 6px; align-items: center; }

/* Footer */
.footer { background: var(--color-navy-950); border-top: 1px solid color-mix(in srgb, var(--color-surface) 6%, transparent); padding: 24px 0; }
.footer-inner { display: flex; flex-direction: column; gap: 12px; align-items: center; justify-content: space-between; font-size: 14px; color: var(--color-navy-300); }
@media (min-width: 640px) { .footer-inner { flex-direction: row; } }
.footer a { color: var(--color-navy-300); text-decoration: underline; }
.footer a:hover { color: var(--color-navy-100); }
.footer .logo { font-weight: 700; font-size: 18px; color: var(--color-brand-400); letter-spacing: -0.02em; }

@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.fade-up { animation: fade-up var(--duration-reveal) var(--ease-out) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}