/* ============================================================
   Nexus Viam Consulting — landing page styles
   Page-only styles built on the Nexus Viam design tokens
   (tokens.css). Hero workflow figure, comparison matrix,
   architecture pipeline, metrics, contact strip, footer.
   ============================================================ */

/* ── Layout ───────────────────────────────────────────────── */
.page {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--s-6);
}
@media (max-width: 720px) { .page { padding: 0 var(--s-4); } }

.row { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: var(--s-2); }
.mono { font-family: var(--font-mono); }

/* ── Top nav ──────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--bg-canvas) 88%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s-3) 0;
  gap: var(--s-4);
}
.nav__brand { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; }
.nav__brand img { width: 24px; height: 24px; display: block; }
.nav__brand-name {
  font-family: var(--font-serif);
  font-size: 18px;
  letter-spacing: var(--tracking-tight);
  color: var(--fg-primary);
}
.nav__brand-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  margin-left: var(--s-1);
}
.nav__actions { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ── Buttons (subset) ─────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-2);
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  font-weight: 500;
  letter-spacing: var(--tracking-base);
  border: 1px solid transparent;
  cursor: pointer; white-space: nowrap;
  transition:
    background var(--d-fast) var(--ease-out),
    border-color var(--d-fast) var(--ease-out),
    color var(--d-fast) var(--ease-out),
    box-shadow var(--d-fast) var(--ease-out);
  text-decoration: none;
  user-select: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); border-color: var(--border-focus); }
.btn--lg { height: 40px; padding: 0 var(--s-4); font-size: var(--t-body); }
.btn--sm { height: 26px; padding: 0 var(--s-2-5); font-size: var(--t-caption); }
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-bg-hover); }
.btn--secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-fg); border-color: var(--btn-secondary-border); }
.btn--secondary:hover { background: var(--btn-secondary-bg-hover); }

/* Theme toggle (compact) */
.toggle {
  display: inline-flex; align-items: center; gap: 2px;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  padding: 2px;
}
.toggle button {
  appearance: none;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--fg-tertiary);
  background: transparent;
  border: 0;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  cursor: pointer;
}
.toggle button[aria-pressed="true"] {
  background: var(--bg-surface);
  color: var(--fg-primary);
  box-shadow: var(--shadow-1);
}

/* ── Hero (stacked + centered: copy on top, workflow figure directly below) ── */
.hero {
  padding: var(--s-12) 0 var(--s-10);
  display: flex;
  flex-direction: column;
  gap: var(--s-10);
  align-items: center;
}
@media (max-width: 720px) { .hero { padding: var(--s-10) 0 var(--s-8); gap: var(--s-8); } }

.hero__copy {
  max-width: 1024px;
  width: 100%;
  text-align: center;
}

.hero__eyebrow {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--fg-tertiary);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.hero__eyebrow img { width: 16px; height: 16px; display: block; }

.hero__title {
  font-family: var(--font-serif);
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-5);
  color: var(--fg-primary);
}
.hero__title em { font-style: italic; color: var(--accent-600); }
[data-theme="dark"] .hero__title em { color: var(--accent-400); }
@media (max-width: 720px) { .hero__title { font-size: 40px; } }

.hero__lead {
  font-size: 17px;
  line-height: var(--lh-loose);
  color: var(--fg-secondary);
  max-width: 36rem;
  margin: 0 auto var(--s-7);
}
.hero__cta { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }

/* ── Workflow figure (static, full-width below hero copy) ───── */
.workflow {
  margin: 0 auto;
  padding: var(--s-6);
  max-width: 1024px;
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  box-shadow: var(--shadow-1);
}
.workflow svg { width: 100%; height: auto; display: block; }

/* Static frame — every layer revealed; this is the only render mode now. */
.workflow.wf-static #line-pm-human line,
.workflow.wf-static #line-human-cluster line,
.workflow.wf-static #line-cluster-result line,
.workflow.wf-static #line-result-workato line,
.workflow.wf-static #line-human-skills line { stroke-dashoffset: 0; }
.workflow.wf-static #pm-stack,
.workflow.wf-static #human,
.workflow.wf-static #cluster .cluster-bg,
.workflow.wf-static .agent-dot,
.workflow.wf-static .model-badge,
.workflow.wf-static #result-node,
.workflow.wf-static #skills-node,
.workflow.wf-static .wf-deploy-label { opacity: 1; }
.workflow.wf-static #workato-card rect { opacity: 1; }
.workflow.wf-static #workato-card { filter: drop-shadow(0 8px 24px rgba(58,107,79,0.35)); }

/* SVG primitives ---------------------------------------------------- */
.workflow text { font-family: var(--font-mono); fill: var(--fg-secondary); }
.workflow .wf-eyebrow {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--fg-muted);
  text-anchor: middle;
}
.workflow .wf-cardtitle { font-size: 11px; fill: var(--fg-primary); text-anchor: middle; }

/* PM stack */
.wf-pm rect.wf-card { fill: var(--bg-surface); stroke: var(--border-default); stroke-width: 1; }
.wf-pm rect.wf-card-shadow { fill: var(--bg-sunken); stroke: var(--border-subtle); stroke-width: 1; opacity: 0.65; }

/* Lines (default style; specific lines override path lengths below) */
.wf-line line {
  stroke: var(--accent-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
[data-theme="dark"] .wf-line line { stroke: var(--accent-400); }

/* Linear connectors — full-length dasharray + matching dashoffset
   keep them invisible by default; .wf-static reveals them. */
#line-pm-human line { stroke-dasharray: 60; stroke-dashoffset: 60; }
#line-human-cluster line,
#line-cluster-result line { stroke-dasharray: 28; stroke-dashoffset: 28; }
#line-result-workato line { stroke-dasharray: 48; stroke-dashoffset: 48; }
#line-human-skills line { stroke-dasharray: 74; stroke-dashoffset: 74; }

/* Deploy arrow — stronger accent stroke. */
.wf-line--deploy line {
  stroke: var(--accent-600);
  stroke-width: 2;
}
[data-theme="dark"] .wf-line--deploy line { stroke: var(--accent-300); }
.wf-deploy-label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--accent-700);
  text-anchor: middle;
  opacity: 0;
}
[data-theme="dark"] .wf-deploy-label { fill: var(--accent-300); }

/* Bidirectional connector (consultant ↔ skills) — two parallel dashed lines. */
.wf-line--bi line { stroke-dasharray: 4 4; }

/* Agent cluster (Kubernetes-style box) */
.cluster-bg {
  fill: var(--bg-canvas);
  stroke: var(--accent-500);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  opacity: 0;
}
[data-theme="dark"] .cluster-bg {
  fill: var(--bg-sunken);
  stroke: var(--accent-400);
}
.cluster-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--accent-700);
  text-anchor: middle;
}
[data-theme="dark"] .cluster-label { fill: var(--accent-300); }

/* Result artifact node */
.wf-result rect {
  fill: var(--bg-surface);
  stroke: var(--border-strong);
  stroke-width: 1.5;
}
[data-theme="dark"] .wf-result rect { stroke: var(--border-default); }
.wf-result-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  fill: var(--fg-primary);
  text-anchor: middle;
}
.wf-result { opacity: 0; }

/* Skills · LLM-WIKI node (consultant's reference store) */
.wf-skills rect {
  fill: var(--bg-surface);
  stroke: var(--accent-500);
  stroke-width: 1.5;
  stroke-dasharray: 0;
}
[data-theme="dark"] .wf-skills rect { stroke: var(--accent-400); }
.wf-skills-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  fill: var(--accent-700);
  text-anchor: middle;
}
[data-theme="dark"] .wf-skills-title { fill: var(--accent-300); }
.wf-skills { opacity: 0; }

/* Human */
.wf-human circle {
  fill: var(--bg-surface);
  stroke: var(--accent-500);
  stroke-width: 2;
}
.wf-human-label {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 18px;
  fill: var(--accent-700);
  text-anchor: middle;
}
[data-theme="dark"] .wf-human-label { fill: var(--accent-300); }

/* Agents */
.agent-dot {
  fill: var(--accent-400);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

/* Models row */
.model-badge rect {
  fill: var(--bg-sunken);
  stroke: var(--border-default);
  stroke-width: 1;
}
.model-badge text {
  font-size: 11px;
  fill: var(--fg-secondary);
  text-anchor: middle;
}
.model-badge { opacity: 0.3; }

/* Outputs */
.wf-out rect { fill: var(--bg-sunken); stroke: var(--border-default); stroke-width: 1; }
.wf-out--active rect {
  fill: var(--accent-50);
  stroke: var(--accent-500);
  stroke-width: 1.5;
}
[data-theme="dark"] .wf-out--active rect { fill: var(--accent-100); stroke: var(--accent-400); }
.wf-out--ghost rect { stroke-dasharray: 3 3; opacity: 0.55; }
.wf-out--ghost text { fill: var(--fg-muted); }
.wf-out-eyebrow { font-size: 9px; fill: var(--fg-muted); text-anchor: middle; letter-spacing: 0.16em; }
.wf-out-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  fill: var(--accent-700);
  text-anchor: middle;
}
[data-theme="dark"] .wf-out-title { fill: var(--accent-300); }
.wf-out-next { font-size: 10px; text-anchor: middle; }

/* ── Section base ─────────────────────────────────────────── */
.section { padding: var(--s-12) 0; border-top: 1px solid var(--border-subtle); }
.section__head { max-width: 64ch; margin-bottom: var(--s-6); }
.section__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  color: var(--accent-600);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
[data-theme="dark"] .section__eyebrow { color: var(--accent-400); }
.section__title {
  font-family: var(--font-serif);
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-3);
  color: var(--fg-primary);
}
.section__title em { font-style: italic; }

/* ── Comparison matrix ────────────────────────────────────── */
.compare {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-body);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  overflow: hidden;
}
.compare thead th {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  text-align: left;
  padding: var(--s-3) var(--s-4);
  color: var(--fg-tertiary);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-default);
  font-weight: 500;
}
.compare thead th.compare__win {
  color: var(--accent-700);
  background: var(--accent-50);
  font-weight: 600;
}
[data-theme="dark"] .compare thead th.compare__win { color: var(--accent-300); background: var(--accent-100); }
.compare tbody th {
  text-align: left;
  font-weight: 500;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  color: var(--fg-tertiary);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  white-space: nowrap;
}
.compare tbody td {
  padding: var(--s-3) var(--s-4);
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.compare tbody tr:last-child td,
.compare tbody tr:last-child th { border-bottom: 0; }

.compare .cell--win {
  background: var(--accent-50);
  color: var(--accent-700);
}
[data-theme="dark"] .compare .cell--win { background: var(--accent-100); color: var(--accent-800); }
.compare .cell--bad { background: var(--danger-bg); color: var(--danger-fg); }
.compare .cell--ok { background: var(--bg-surface); color: var(--fg-secondary); }

.compare__note {
  margin: var(--s-5) 0 0;
  font-size: var(--t-body-sm);
  color: var(--fg-tertiary);
  line-height: var(--lh-base);
  max-width: 64rem;
}

/* Mobile: collapse table to stacked cards */
@media (max-width: 720px) {
  .compare, .compare thead, .compare tbody, .compare tr { display: block; }
  .compare thead { display: none; }
  .compare tbody tr {
    border-bottom: 1px solid var(--border-default);
    padding: var(--s-3) var(--s-4);
  }
  .compare tbody th { background: transparent; border: 0; padding: 0 0 var(--s-2); }
  .compare tbody td {
    border: 0;
    padding: var(--s-1) 0;
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    border-radius: var(--r-2);
    margin-bottom: var(--s-1);
    padding: var(--s-1-5) var(--s-2);
  }
  .compare tbody td::before {
    content: attr(data-col);
    font-family: var(--font-mono);
    font-size: var(--t-micro);
    letter-spacing: var(--tracking-mega);
    text-transform: uppercase;
    color: var(--fg-muted);
  }
}

/* ── Architecture pipeline (SVG) ──────────────────────────── */
.pipeline {
  margin: 0 0 var(--s-8);
  padding: var(--s-4);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
}
.pipeline svg { width: 100%; height: auto; display: block; }
.pipeline text { font-family: var(--font-mono); fill: var(--fg-secondary); }
.pl-eyebrow {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--fg-muted);
  text-anchor: middle;
}
.pl-title { font-size: 12px; fill: var(--fg-primary); text-anchor: middle; font-weight: 500; }
.pl-sub { font-size: 10px; fill: var(--fg-tertiary); text-anchor: middle; }

.pl-node rect { fill: var(--bg-sunken); stroke: var(--border-default); stroke-width: 1; }
.pl-node--accent rect {
  fill: var(--accent-50);
  stroke: var(--accent-500);
  stroke-width: 1.5;
}
[data-theme="dark"] .pl-node--accent rect { fill: var(--accent-100); stroke: var(--accent-400); }
.pl-node--accent .pl-title { fill: var(--accent-700); }
[data-theme="dark"] .pl-node--accent .pl-title { fill: var(--accent-300); }

.pl-node--spec rect { fill: var(--bg-surface); stroke: var(--border-strong); stroke-dasharray: 0; }

.pl-node--out rect { fill: var(--accent-50); stroke: var(--accent-500); stroke-width: 1.5; }
[data-theme="dark"] .pl-node--out rect { fill: var(--accent-100); stroke: var(--accent-400); }
.pl-node--out .pl-out-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  fill: var(--accent-700);
  text-anchor: middle;
}
[data-theme="dark"] .pl-node--out .pl-out-title { fill: var(--accent-300); }
.pl-node--out .pl-out-next { font-size: 10px; fill: var(--fg-muted); text-anchor: middle; }
.pl-node--ghost rect { stroke-dasharray: 3 3; opacity: 0.55; }

.pl-arrow path {
  fill: none;
  stroke: var(--accent-500);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
[data-theme="dark"] .pl-arrow path { stroke: var(--accent-400); }
.pl-arrow--out path { stroke: var(--fg-muted); stroke-dasharray: 2 4; }

/* ── Metrics table ────────────────────────────────────────── */
.metrics-wrap {
  margin: 0 0 var(--s-8);
  padding: var(--s-6);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
}
.metrics-title {
  font-family: var(--font-serif);
  font-size: var(--t-h3);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-1);
  color: var(--fg-primary);
}
.metrics-sub { font-size: var(--t-caption); color: var(--fg-tertiary); margin: 0 0 var(--s-4); }

.metrics-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.metrics {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--t-body-sm);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-3);
  overflow: hidden;
}
.metrics thead th {
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  text-align: left;
  padding: var(--s-2-5) var(--s-3);
  color: var(--fg-tertiary);
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--border-default);
  font-weight: 500;
}
.metrics .metrics__num { text-align: right; }
.metrics tbody td, .metrics tbody th {
  padding: var(--s-2-5) var(--s-3);
  color: var(--fg-secondary);
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: middle;
}
.metrics tbody tr:last-child td { border-bottom: 0; }
.metrics tbody tr:nth-child(odd) td { background: var(--bg-canvas); }
.metrics tbody tr.metrics__total td {
  background: var(--accent-50);
  color: var(--accent-700);
  border-top: 1px solid var(--accent-300);
}
[data-theme="dark"] .metrics tbody tr.metrics__total td {
  background: var(--accent-100);
  color: var(--accent-800);
}
.metrics tbody tr.metrics__est td {
  background: var(--accent-50);
  color: var(--accent-700);
  border-top: 1px dashed var(--accent-300);
  font-style: italic;
}
[data-theme="dark"] .metrics tbody tr.metrics__est td {
  background: var(--accent-100);
  color: var(--accent-800);
}
.metrics tbody tr.metrics__sub td {
  background: var(--bg-sunken);
  color: var(--fg-secondary);
  border-top: 1px dashed var(--border-default);
}
.metrics-note {
  font-size: var(--t-caption);
  color: var(--fg-tertiary);
  line-height: var(--lh-base);
  margin: var(--s-3) 0 0;
}

@media (max-width: 720px) {
  .metrics { font-size: var(--t-caption); }
  .metrics thead th, .metrics tbody td { padding: var(--s-2) var(--s-2-5); }
}

/* ── Tech stack chip row ──────────────────────────────────── */
/* Seven groups laid in a single grid row; chips wrap inline within
   each group so a tall column (e.g. Models) doesn't push later groups
   to a misaligned second row. */
.stack {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-4);
  align-items: start;
}
@media (max-width: 1100px) { .stack { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .stack { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stack__group { display: block; min-width: 0; }
.stack__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-mega);
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--s-2);
}
.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-caption);
  padding: 3px var(--s-2);
  background: var(--bg-sunken);
  color: var(--fg-secondary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  margin: 0 var(--s-1) var(--s-1) 0;
  white-space: nowrap;
}
.chip--accent {
  background: var(--accent-50);
  color: var(--accent-700);
  border-color: var(--accent-200);
}
[data-theme="dark"] .chip--accent { background: var(--accent-100); color: var(--accent-800); border-color: var(--accent-300); }
.chip--ghost { border-style: dashed; color: var(--fg-muted); }

/* ── Contact strip ────────────────────────────────────────── */
.contact {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--r-4);
  padding: var(--s-7);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
}
.contact__title {
  font-family: var(--font-serif);
  font-size: var(--t-h2);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--s-1);
  color: var(--fg-primary);
}
.contact__sub { font-size: var(--t-body); color: var(--fg-secondary); margin: 0; line-height: var(--lh-base); max-width: 56ch; }
.contact__cta { display: inline-flex; gap: var(--s-3); flex-wrap: wrap; }

/* ── Footer ───────────────────────────────────────────────── */
.foot {
  padding: var(--s-10) 0 var(--s-12);
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--s-12);
  display: flex; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap;
  font-size: var(--t-caption);
  color: var(--fg-tertiary);
}
.foot__brand { display: inline-flex; align-items: center; gap: var(--s-2); }
.foot__brand img { width: 16px; height: 16px; display: block; }
.foot__credit { font-family: var(--font-mono); font-size: var(--t-micro); color: var(--fg-muted); }

/* ── Misc helpers ─────────────────────────────────────────── */
a { color: var(--fg-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
strong { font-weight: 600; color: var(--fg-primary); }

/* ============================================================
   Typography override — legibility-first
   The Instrument Serif italic display face from the design system is
   too thin / italic-heavy at small display sizes (h2, h3, metrics
   title, contact title). Swap every editorial display target on this
   landing page to IBM Plex Sans with medium/semibold weight, while
   keeping italic accents for editorial emphasis.
   ============================================================ */
.hero__title,
.section__title,
.metrics-title,
.contact__title {
  font-family: var(--font-sans);
}
.hero__title       { font-weight: 600; letter-spacing: -0.025em; }
.hero__title em    { font-style: italic; font-weight: 600; color: var(--accent-600); }
[data-theme="dark"] .hero__title em { color: var(--accent-400); }
.section__title    { font-weight: 600; letter-spacing: -0.02em; }
.section__title em { font-style: italic; font-weight: 600; color: var(--accent-600); }
[data-theme="dark"] .section__title em { color: var(--accent-400); }
.metrics-title     { font-weight: 600; letter-spacing: -0.01em; }
.contact__title    { font-weight: 600; letter-spacing: -0.015em; }

/* In-SVG titles (result · skills · workato) — sans medium italic */
.wf-result-title,
.wf-skills-title,
.wf-out-title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-style: italic;
}
/* The single "1" inside the consultant circle keeps editorial serif feel */