/* Scale Axis conversion pass: calmer typography, restrained accent, no forced clipping. */

:root {
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sa-bg: #101310;
  --sa-surface: #151913;
  --sa-surface-2: #1a1e19;
  --sa-text: #f2f0e9;
  --sa-neutral: #d8d6cf;
  --sa-muted: #9a9e96;
  --sa-accent: #7f9f68;
  --sa-electric: #a4f23d;
  --sa-accent-ink: #101310;
  --sa-border: #2a2e28;
}

html, body { overflow-x: clip; background: var(--sa-bg); color: var(--sa-text); }
body, button, input, select, textarea { font-family: var(--font-body); }

h1, h2, h3, .brand, .sheet__nav a:not(.btn), .hero-core strong, .ticker__track, .manifesto__lead, .engine-grid h3, .path-card h3, .capability h3, .steps h3, .footer__line {
  font-family: var(--font-display);
  font-feature-settings: "kern" 1, "liga" 1;
  font-kerning: normal;
}

h1, h2, h3 { font-weight: 800; line-height: 1.02; letter-spacing: -0.04em; overflow-wrap: normal; word-break: normal; hyphens: none; max-width: none; color: var(--sa-text); }
p, a, li, span { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* Electric lime only on hero promise + primary actions. Everything else stays neutral. */
.lime { color: var(--sa-text) !important; }
.hero h1 .lime { color: var(--sa-electric) !important; }
.brand__mark { color: var(--sa-text) !important; }
.step-no { color: var(--sa-muted) !important; }
.form-status { color: var(--sa-neutral) !important; }
:focus-visible { outline-color: var(--sa-electric); }
::selection { background: color-mix(in srgb, var(--sa-electric) 70%, #fff); color: var(--sa-accent-ink); }

.bar, .sheet, .hero, .process, .close, .footer { background: var(--sa-bg); }
.manifesto, .capabilities, .book { background: var(--sa-surface); }

.hero__sub, .section-head__side, .path-card p, .manifesto__copy p:not(.manifesto__lead), .engine-grid p, .capability p, .steps p, .close__inner > p:not(.eyebrow), .footer__meta { color: var(--sa-neutral); }
.hero__note, .eyebrow, .hero__tag, .aside-link, .section-head__side { color: var(--sa-muted); }

.bar, .split, .manifesto, .engine, .capabilities, .process, .close, .book { border-color: var(--sa-border); }

/* All primary CTAs use the original electric lime. */
.btn, .btn--accent, .btn.btn--accent { background: var(--sa-electric) !important; border-color: var(--sa-electric) !important; color: var(--sa-accent-ink) !important; }
.btn:hover, .btn--accent:hover, .btn.btn--accent:hover { background: var(--sa-text) !important; border-color: var(--sa-text) !important; color: var(--sa-bg) !important; }
.btn--light { background: var(--sa-text) !important; border-color: var(--sa-text) !important; color: var(--sa-bg) !important; }
.btn--light:hover { background: var(--sa-electric) !important; border-color: var(--sa-electric) !important; color: var(--sa-bg) !important; }
.text-link:hover, .bar__links a:hover, .footer__meta a:hover { color: var(--sa-electric) !important; border-color: var(--sa-electric); }

/*
 * Ticker / marquee
 * - Parent clips; track is max-content and left-anchored (never centered).
 * - Two equal .ticker__group children; animate exactly -50% for a seamless loop.
 */
.ticker {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  text-align: left !important;
  background: var(--sa-bg) !important;
  color: var(--sa-text) !important;
  border-bottom: 1px solid var(--sa-border);
}
.ticker__track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0 !important;
  width: max-content !important;
  min-width: max-content !important;
  max-width: none !important;
  margin: 0 !important;
  margin-inline: 0 !important;
  padding: 14px 0 !important;
  position: relative !important;
  left: 0 !important;
  right: auto !important;
  inset-inline: 0 auto !important;
  float: none !important;
  /* no !important on transform — keyframes must be able to override */
  transform: translate3d(0, 0, 0);
  animation: scale-axis-ticker var(--ticker-duration, 28s) linear infinite !important;
  animation-delay: 0s !important;
  animation-fill-mode: none !important;
  will-change: transform;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.06em;
}
.ticker__group {
  display: flex !important;
  flex: 0 0 auto !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 20px !important;
  width: max-content !important;
  min-width: max-content !important;
  margin: 0 !important;
  padding: 0 20px 0 0 !important; /* trailing gap so seam matches item gap */
  box-sizing: content-box !important;
}
.ticker__group > span,
.ticker__group > b {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
.ticker__group b { color: var(--sa-electric) !important; font-weight: 800; }
@keyframes scale-axis-ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--ticker-shift, -50%), 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ticker__track { animation: none !important; transform: none !important; }
}

/* Hero core keeps electric lime as the one brand hit in the visual. */
.hero-core { background: var(--sa-electric); color: var(--sa-accent-ink); box-shadow: 0 0 70px rgba(164, 242, 61, 0.14); }
.hero__visual { border-color: var(--sa-border); background: radial-gradient(circle at center, #1b2019 0, #121510 43%, var(--sa-bg) 70%); }
.hero__visual:before, .orbit { border-color: #31362f; }
.hero-node { border-color: #454b42; background: var(--sa-surface); color: var(--sa-text); }

.engine-grid, .engine-grid article, .steps, .steps li, .path-card, .capability { border-color: var(--sa-border); }
.path-card, .capability { background: var(--sa-surface); }

/* Local + ecommerce path cards: fully neutral. No green fills or green headline spans. */
.path-card,
.path-card--local,
.path-card--ecom {
  background: var(--sa-surface) !important;
  border-color: var(--sa-border) !important;
  color: var(--sa-text) !important;
}
.path-card h3 span,
.path-card--local h3 span,
.path-card--ecom h3 span { color: var(--sa-text) !important; }
.path-card p,
.path-card--local p,
.path-card--ecom p { color: var(--sa-neutral) !important; }
.path-card__index,
.path-card--local .path-card__index,
.path-card--ecom .path-card__index { color: var(--sa-muted) !important; opacity: 1; }
.path-card .mini-flow,
.path-card--local .mini-flow,
.path-card--ecom .mini-flow { color: var(--sa-neutral) !important; }
.mini-flow i { color: var(--sa-muted); opacity: 1; }

/* Engine boxes: same surface language, no special green SCALE tile. */
.engine-grid {
  border-color: var(--sa-border);
  background: transparent;
}
.engine-grid article {
  background: var(--sa-surface);
  color: var(--sa-text);
  border-color: var(--sa-border);
}
.engine-grid article:last-child {
  background: var(--sa-surface) !important;
  border-color: var(--sa-border) !important;
  color: var(--sa-text) !important;
}
.engine-grid article:last-child p,
.engine-grid article:last-child span,
.engine-grid span {
  color: var(--sa-muted) !important;
}
.engine-grid article:last-child p,
.engine-grid p {
  color: var(--sa-neutral) !important;
}
.engine-grid h3 {
  color: var(--sa-text);
}

.capabilities.is-hidden-for-now { display: none; }

.hero { min-height: auto; padding: 74px 0 82px; }
.hero__grid { gap: 46px; }
.hero__copy { gap: 18px; }
.hero h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 0.99; letter-spacing: -0.045em; max-width: 13ch; text-transform: none; }
.hero__sub { font-size: clamp(17px, 1.35vw, 21px); line-height: 1.42; max-width: 58ch; }
.hero__note { max-width: 48ch; font-size: 12px; line-height: 1.45; }
.cta-row { gap: 12px; }
.hero__visual { min-height: 430px; max-width: 500px; }
.hero-core strong { font-size: 28px; }
.hero-tag { max-width: calc(100% - 32px); text-align: center; }
.section-head h2, .manifesto h2, .close h2 { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.01; max-width: 14ch; }
.path-card h3 { font-size: clamp(34px, 3.2vw, 52px); line-height: 1.01; max-width: 13ch; }
.manifesto__lead { line-height: 1.08; }
.engine-grid h3 { font-size: clamp(28px, 3.2vw, 44px); line-height: 1; margin: 28px 0 12px; }
.capability h3, .capability:not(.capability--feature) h3, .steps h3 { line-height: 1.04; }
.close__inner > p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }

@media (min-width: 700px) {
  .hero { padding-block: 76px 86px; }
  .hero__visual { min-height: 470px; }
}
@media (min-width: 1000px) {
  .hero { padding-block: 78px 88px; }
  .hero h1 { font-size: clamp(50px, 5.0vw, 74px); max-width: 13ch; }
  .hero__visual { min-height: 500px; max-width: 500px; }
}
@media (min-width: 1280px) { .hero h1 { font-size: 72px; } }
@media (max-width: 699px) {
  .hero { padding-top: 54px; padding-bottom: 64px; }
  .hero h1 { font-size: clamp(42px, 12vw, 60px); max-width: 100%; }
  .hero__sub { font-size: 17px; }
  .hero__visual { min-height: 320px; max-width: 360px; }

  /* Path cards: less empty vertical space on phones */
  .path-card {
    min-height: 0 !important;
    padding: 22px 18px;
  }
  .path-card h3 {
    font-size: clamp(30px, 9vw, 40px);
    max-width: 14ch;
  }

  /*
   * Engine grid mobile fix:
   * base CSS forces a cramped 2-col grid with huge min-heights and giant title margins.
   * Stack as compact single-column cards instead.
   */
  .engine { padding-block: 72px; }
  .engine-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px;
    border: none !important;
    background: transparent;
  }
  .engine-grid article {
    min-height: 0 !important;
    padding: 18px 16px !important;
    border: 1px solid var(--sa-border) !important;
    border-radius: 8px;
    background: var(--sa-surface) !important;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num title"
      "body body";
    column-gap: 12px;
    row-gap: 8px;
    align-items: baseline;
  }
  .engine-grid article > span {
    grid-area: num;
    font-size: 11px !important;
    letter-spacing: 0.08em;
    color: var(--sa-muted) !important;
  }
  .engine-grid article > h3 {
    grid-area: title;
    margin: 0 !important;
    font-size: clamp(26px, 8vw, 34px) !important;
    line-height: 1 !important;
  }
  .engine-grid article > p {
    grid-area: body;
    margin: 0;
    max-width: none !important;
    font-size: 14px;
    line-height: 1.45;
    color: var(--sa-neutral) !important;
  }
  .engine-grid article:last-child {
    background: var(--sa-surface) !important;
    color: var(--sa-text) !important;
  }
}


/* Simplified chrome: brand + growth-plan CTA only (no menu sheet). */
body.nav-open { overflow: visible; }
.menu-btn, .sheet, .bar__links { display: none !important; }
.bar {
  justify-content: space-between;
  gap: 12px;
}
.bar__end {
  margin-left: auto;
  min-width: 0;
}
.btn--nav {
  white-space: nowrap;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 13px;
}
.cta-row .btn--lg {
  min-height: 52px;
}
@media (max-width: 699px) {
  .bar { padding-inline: 16px; gap: 10px; }
  .brand { font-size: 18px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .btn--nav {
    max-width: min(100%, 12.5rem);
    padding-inline: 12px;
    font-size: 12px;
  }
  .cta-row {
    width: 100%;
    align-items: stretch;
  }
  .cta-row .btn--lg {
    width: 100%;
    max-width: 22rem;
    justify-content: center;
  }
  .mini-flow i { color: var(--sa-muted); }
}

/* Desktop engine: keep 5-up, but drop the giant empty min-heights a bit and kill green SCALE tile. */
@media (min-width: 1000px) {
  .engine-grid article {
    min-height: 300px !important;
  }
  .engine-grid h3 {
    margin-top: 40px;
  }
}
@media (min-width: 700px) {
  .btn--nav { font-size: 13px; max-width: none; }
}