/* =========================================================================
   digital(R)evolution — Agentic design system binding

   Loads after tokens.css + home.css. The Agentic :root contract is pasted
   verbatim in the page's first <style> block; this file binds the existing
   component layer to that contract and adds the reworked hero.
   ========================================================================= */

:root {
  /* ---- Bridge: component-layer names → Agentic contract ------------------
     Every value below resolves to an Agentic token. --color-border carries a
     literal because the Agentic token is named --border, which the component
     layer already uses for its `1px solid …` shorthand. */
  --color-border: #293653;

  --color-bg: var(--bg);
  --color-bg-section: var(--surface);
  --color-surface: var(--surface-warm);
  --color-border-strong: color-mix(in oklab, var(--color-border), white 16%);
  --color-surface-hover: color-mix(in oklab, var(--surface-warm), white 6%);

  --color-text-primary: var(--fg);
  --color-text-secondary: var(--fg-2);
  --color-text-muted: var(--muted);

  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-hover);
  --color-on-primary: var(--accent-on);
  --color-primary-soft: color-mix(in oklab, var(--accent) 14%, transparent);

  --color-link: var(--accent);
  --color-link-soft: color-mix(in oklab, var(--accent) 34%, transparent);
  --color-warm-accent: var(--warn);

  /* ---- Type: Agentic scale + families ----------------------------------- */
  --font-display: Inter, system-ui, sans-serif;
  --font-body: Inter, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --text-display: clamp(2.75rem, 5.2vw, 66px);
  --text-h1: clamp(2rem, 3.8vw, 48px);
  --text-h2: clamp(1.625rem, 2.6vw, 32px);
  --text-h3: var(--text-xl);
  --text-h4: var(--text-lg);
  --text-body-lg: var(--text-lg);
  --text-body: var(--text-base);
  --text-small: var(--text-sm);
  --text-caption: var(--text-xs);
  --text-overline: 11px;

  /* ---- Shape, motion, measure ------------------------------------------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 9999px;

  --dur: var(--motion-base);
  --dur-fast: var(--motion-fast);
  --ease: var(--ease-standard);

  --container: var(--container-max);
  --gutter: var(--container-gutter-desktop);

  --sec-accent: var(--accent);
}

/* Section / panel / column accents, drawn from the Agentic semantic palette */
[data-accent='blue'] { --sec-accent: var(--accent); }
[data-accent='amber'] { --sec-accent: var(--warn); }
[data-accent='green'] { --sec-accent: var(--success); }

/* ---------- Base adjustments -------------------------------------------- */

body { line-height: var(--leading-body); }
h1, h2 { letter-spacing: var(--tracking-display); }
h1 { line-height: var(--leading-tight); }

:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

@media (max-width: 1023px) { :root { --gutter: var(--container-gutter-tablet); } }

/* Phone-sized touch targets: the token pair is 44×32, which is under the 44px
   guideline on the short axis. */
@media (max-width: 767px) {
  .lang__btn { min-height: 40px; }
  .sec { padding-block: 56px; }
}

/* Agentic permits elevation — the flat 1px-only rule belonged to Graphite */
.btn--primary { box-shadow: 0 8px 24px color-mix(in oklab, var(--accent) 22%, transparent); }
.btn--primary:hover { box-shadow: 0 10px 30px color-mix(in oklab, var(--accent) 30%, transparent); }
.btn { border-radius: var(--radius-pill); letter-spacing: 0.02em; }

/* ---------- Reworked hero ------------------------------------------------ */

.ahero { padding-block: var(--section-y-desktop) var(--space-12); }
.ahero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: var(--space-12);
  align-items: start;
}

.ahero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}
.ahero__title {
  margin-top: var(--space-5);
  font-size: var(--text-display);
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--fg);
  max-width: 20ch;
  text-wrap: balance;   /* keeps the em dash off the start of a line */
}
.ahero__lead { margin-top: var(--space-8); font-size: var(--text-lg); color: var(--fg-2); max-width: 54ch; }
.ahero__sub { margin-top: var(--space-4); font-size: var(--text-base); color: var(--muted); max-width: 54ch; }
.ahero .hero__cta { margin-top: var(--space-8); }

/* Engagement terms — the trust asset that replaces the operating-boundary log */
.pact {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--elev-raised);
  overflow: hidden;
}
.pact__head {
  padding: var(--space-6) var(--space-6) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  background: color-mix(in oklab, var(--accent) 7%, var(--surface));
}
.pact__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--text-overline);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);   /* accent is rationed: CTA + eyebrow are the two marks */
}
.pact__title {
  margin-top: var(--space-3);
  font-size: var(--text-xl);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--fg);
}

.pact__list { list-style: none; margin: 0; padding: 0; }
.pact__item {
  display: grid;
  grid-template-columns: 34px 24px minmax(0, 1fr);
  gap: var(--space-4);
  align-items: start;
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-soft);
  transition: background-color var(--motion-base) var(--ease-standard);
}
.pact__item:first-child { border-top: 0; }
.pact__item:hover { background: color-mix(in oklab, var(--surface-warm) 60%, var(--surface)); }
.pact__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  color: var(--muted);
  padding-top: 5px;
}
.pact__ico { color: var(--success); margin-top: 1px; }
.pact__text h3 { font-size: var(--text-base); font-weight: 600; color: var(--fg); letter-spacing: 0; }
.pact__text p { margin-top: 6px; font-size: var(--text-sm); line-height: 1.5; color: var(--fg-2); }

.pact__foot {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--bg);
}
.pact__foot svg { color: var(--muted); flex: none; }
.pact__foot p { font-size: var(--text-sm); color: var(--fg); }

/* Systems strip — "we integrate with what you already run" */
.stack-strip {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-soft);
}
.stack-strip__label { font-size: var(--text-sm); color: var(--muted); max-width: 46ch; }
.stack-strip__list { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; }
.stack-strip__list li {
  padding: 7px var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

/* ---------- Section markers pick up the Agentic accents ------------------ */

.sec-head__index { border-top-color: var(--sec-accent); color: var(--sec-accent); }
.coda::before { background: var(--sec-accent); }
.sec--alt { background: color-mix(in oklab, var(--sec-accent) 6%, var(--surface)); }

.symptom__idx { color: var(--sec-accent); }
.symptom li::before,
.faq .accordion__body li::before { background: color-mix(in oklab, var(--sec-accent) 70%, transparent); }

.tab__n { color: var(--sec-accent); }
.tab[aria-selected='true']::after { background: var(--sec-accent); }
.caps { background: var(--surface); }
.caps__head { background: color-mix(in oklab, var(--sec-accent) 9%, var(--surface)); }
.caps__head .overline { color: var(--sec-accent); }
.caps__list svg { color: var(--sec-accent); }
.panel__lead h3 { border-left: 3px solid var(--sec-accent); padding-left: var(--space-4); }
.panel__lead .q { color: var(--warn); }

.matrix__ico { color: var(--sec-accent); }
.matrix__head { background: color-mix(in oklab, var(--sec-accent) 10%, var(--surface)); }
.matrix__col li::before { color: var(--sec-accent); }

.stepbar__n { color: var(--warn); }
.stepbar__node::after { border-color: var(--accent); }
.stepbar__node--final::after { background: var(--success); border-color: var(--success); }
.step__n { color: var(--warn); }
.step__q span::before { color: var(--accent); }
.step--wide { border-left: 3px solid var(--success); }

.control__ico { color: var(--accent); }
.control:nth-child(2) .control__ico { color: var(--warn); }
.control:nth-child(3) .control__ico { color: var(--success); }
.control:nth-child(5) .control__ico { color: var(--warn); }
.control:nth-child(6) .control__ico { color: var(--danger); }

.ledger__n { color: var(--sec-accent); }

.accordion details[open] summary { background: color-mix(in oklab, var(--sec-accent) 8%, var(--surface)); }
.accordion details[open] summary::after { border-color: var(--sec-accent); }

.close-cta { background: color-mix(in oklab, var(--warn) 5%, var(--surface)); }
.close-cta__aside { border-left: 3px solid var(--sec-accent); }
.close-cta .overline { color: var(--sec-accent); }

.symptom, .control, .ledger__row, .step { transition: background-color var(--motion-base) var(--ease-standard); }
.symptom:hover, .control:hover, .ledger__row:hover { background: var(--color-surface-hover); }

.nav__link[aria-current='page']::after { background: var(--accent); }
.menu a:hover strong { color: var(--accent); }
.site-footer__list a:hover { color: var(--accent); }

/* ---------- Responsive ---------------------------------------------------- */

@media (max-width: 1023px) {
  .ahero { padding-block: var(--section-y-tablet) var(--space-8); }
  .ahero__grid { grid-template-columns: 1fr; gap: var(--space-12); }
  .ahero__title { max-width: 18ch; }
  .stack-strip { grid-template-columns: 1fr; gap: var(--space-5); }
}
@media (max-width: 767px) {
  .ahero { padding-block: var(--section-y-phone) var(--space-6); }
  .pact__item { grid-template-columns: 24px minmax(0, 1fr); gap: var(--space-3) var(--space-4); }
  .pact__n { grid-column: 1 / -1; padding-top: 0; }
  .pact__head, .pact__item, .pact__foot { padding-inline: var(--space-5); }
}