/* site.css — seimo.ai public site
   Every value comes from styles/tokens.css (copied from Seimo, auto-generated there).
   No raw colors, no arbitrary px. Layout constants are named below as tokens too. */

:root {
  --site-max-width: 1120px;
  --site-gutter: var(--spacing-4);          /* 16px: phone gutter (design rule 5) */
  --site-measure: 68ch;                    /* reading width (design rule 4) */
  --site-header-height: 64px;
}

/* ---------- reset (subset of Seimo/src/styles/reset.css) ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-family-ui);
  font-size: var(--text-body-lg-size);
  font-weight: var(--text-body-lg-weight);
  line-height: var(--text-body-lg-leading);
  letter-spacing: var(--text-body-lg-tracking);
  color: var(--color-foreground);
  background-color: var(--color-background);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul { list-style: none; }

/* focus ring: visible everywhere (design rule 7) */
:focus-visible { outline: 2px solid var(--color-ring); outline-offset: 2px; border-radius: var(--radius-sm); }

/* ---------- layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--site-max-width);
  margin-inline: auto;
  padding-inline: var(--site-gutter);
}
main { flex: 1; }
.section { padding-block: var(--spacing-12); }
@media (min-width: 768px) { .section { padding-block: var(--spacing-16); } }

/* ---------- header ---------- */
.site-header {
  height: var(--site-header-height);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-background);
}
.site-header .wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-6);
}
.wordmark { display: flex; align-items: baseline; gap: var(--spacing-2); user-select: none; white-space: nowrap; }
.wordmark-name {
  font-size: var(--text-heading-md-size);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--font-tracking-tight);
  color: var(--color-foreground);
}
.wordmark-tag {
  font-size: var(--text-heading-md-size);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--font-tracking-tight);
  color: var(--color-foreground-muted);
}
.site-nav { display: none; align-items: center; gap: var(--spacing-6); }
.site-nav a, .site-nav span {
  font-size: var(--text-label-md-size);
  font-weight: var(--text-label-md-weight);
  color: var(--color-foreground-muted);
  transition: color var(--motion-duration-fast) var(--motion-easing-standard);
}
.site-nav a:hover { color: var(--color-foreground); }
@media (min-width: 900px) { .site-nav { display: flex; } }
.header-actions { display: flex; align-items: center; gap: var(--spacing-3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px; padding: var(--spacing-2) var(--spacing-4);
  border-radius: var(--radius-md);
  font-size: var(--text-label-md-size); font-weight: var(--text-label-md-weight);
  line-height: 1; white-space: nowrap;
  transition: background-color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard),
              color var(--motion-duration-fast) var(--motion-easing-standard);
}
.btn-primary { background: var(--color-primary); color: var(--color-primary-foreground); }
.btn-primary:hover { background: var(--semantic-primary-bg-hover, var(--color-primary)); }
.btn-ghost { border: 1px solid var(--color-border-strong); color: var(--color-foreground); }
.btn-ghost:hover { border-color: var(--color-foreground-muted); }
.btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: default; }

.theme-toggle {
  width: 40px; height: 40px; border-radius: var(--radius-md);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-foreground-muted);
  border: 1px solid transparent;
  transition: color var(--motion-duration-fast) var(--motion-easing-standard),
              border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.theme-toggle:hover { color: var(--color-foreground); border-color: var(--color-border); }
.theme-toggle svg { width: 18px; height: 18px; }
[data-theme="light"] .icon-moon { display: block; }
[data-theme="light"] .icon-sun  { display: none; }
[data-theme="dark"]  .icon-moon { display: none; }
[data-theme="dark"]  .icon-sun  { display: block; }

/* ---------- type ---------- */
.eyebrow {
  font-size: var(--text-label-sm-size); font-weight: var(--text-label-sm-weight);
  letter-spacing: var(--font-tracking-wide); text-transform: uppercase;
  color: var(--color-foreground-muted);
  margin-bottom: var(--spacing-3);
}
h1 {
  font-size: var(--text-display-size); font-weight: var(--text-display-weight);
  line-height: var(--text-display-leading); letter-spacing: var(--text-display-tracking);
  max-width: 22ch;
}
@media (min-width: 768px) { h1 { font-size: 44px; } }   /* one step above the scale's top; display-only, the product never uses it */
h2 {
  font-size: var(--text-heading-xl-size); font-weight: var(--text-heading-xl-weight);
  line-height: var(--text-heading-xl-leading); letter-spacing: var(--text-heading-xl-tracking);
}
h3 {
  font-size: var(--text-heading-sm-size); font-weight: var(--text-heading-sm-weight);
  line-height: var(--text-heading-sm-leading);
}
.lede {
  margin-top: var(--spacing-5);
  max-width: var(--site-measure);
  font-size: var(--text-heading-sm-size); font-weight: var(--font-weight-regular);
  line-height: var(--font-leading-md);
  color: var(--color-foreground-muted);
}
.muted { color: var(--color-foreground-muted); }
p + p { margin-top: var(--spacing-4); }

/* ---------- hero ---------- */
.hero { padding-block: var(--spacing-16) var(--spacing-12); }
@media (min-width: 768px) { .hero { padding-block: var(--spacing-16); } }
.hero-actions { margin-top: var(--spacing-8); display: flex; flex-wrap: wrap; gap: var(--spacing-3); }

/* product frame: the screenshot slot (D13). Empty in Phase A, filled in A2/B. */
.product-frame {
  margin-top: var(--spacing-12);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
}
.product-frame-bar {
  height: 36px; display: flex; align-items: center; gap: var(--spacing-2);
  padding-inline: var(--spacing-4);
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-family-code); font-size: var(--text-code-sm-size);
  color: var(--color-foreground-subtle);
}
.product-frame-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.product-frame-body { aspect-ratio: 16 / 9; display: grid; place-items: center; }
.product-frame-body img, .product-frame-body .mock { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-frame-body .slot { font-size: var(--text-label-sm-size); color: var(--color-foreground-subtle); }

/* ---------- three lines ---------- */
.lines { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .lines { grid-template-columns: repeat(3, 1fr); } }
.line-card {
  padding: var(--spacing-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  display: flex; flex-direction: column; gap: var(--spacing-3);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
a.line-card:hover { border-color: var(--color-border-strong); }
.line-card .num {
  font-family: var(--font-family-code); font-size: var(--text-code-sm-size);
  color: var(--color-foreground-subtle);
}
.line-card p { color: var(--color-foreground-muted); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); }
.line-card.lead { border-color: var(--color-border-strong); }

/* ---------- plain list (how it works) ---------- */
.steps { list-style: none; margin-top: var(--spacing-8); display: grid; gap: var(--spacing-6); max-width: var(--site-measure); }
.steps li { display: grid; grid-template-columns: 32px 1fr; gap: var(--spacing-4); align-items: start; }
.steps .k {
  font-family: var(--font-family-code); font-size: var(--text-code-sm-size);
  color: var(--color-foreground-subtle); padding-top: 3px;
}
.steps p { color: var(--color-foreground-muted); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); margin-top: var(--spacing-1); }

/* ---------- footer ---------- */
.site-footer {
  border-top: 1px solid var(--color-border);
  padding-block: var(--spacing-8);
  font-size: var(--text-body-sm-size);
  color: var(--color-foreground-muted);
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--spacing-4) var(--spacing-8); align-items: center; justify-content: space-between; }
.site-footer ul { display: flex; flex-wrap: wrap; gap: var(--spacing-5); }
.site-footer a:hover { color: var(--color-foreground); }

/* ---------- motion ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }

/* ---------- inner pages (Phase B) ---------- */
.site-nav a.active { color: var(--color-foreground); }
.page-hero { padding-block: var(--spacing-16) var(--spacing-8); }
.page-hero h1 { max-width: 20ch; }
.two-col { display: grid; gap: var(--spacing-8); align-items: center; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--spacing-12); } .two-col.flip > :last-child { order: -1; } }
.two-col h2 { margin-bottom: var(--spacing-4); }
.two-col > div > p { color: var(--color-foreground-muted); max-width: var(--site-measure); }
.two-col > div > ul { margin-top: var(--spacing-5); display: grid; gap: var(--spacing-3); }
.two-col > div > ul > li { display: grid; grid-template-columns: 20px 1fr; gap: var(--spacing-3); color: var(--color-foreground-muted); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); }
.two-col > div > ul > li::before { content: ""; width: 6px; height: 6px; margin-top: 7px; border-radius: 50%; background: var(--color-primary); justify-self: center; }
.mock-frame { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); overflow: hidden; }
.mock-frame svg { display: block; width: 100%; height: auto; }
.mock-frame figcaption { padding: var(--spacing-3) var(--spacing-4); border-top: 1px solid var(--color-border); font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-foreground-subtle); }
.divider { border: 0; border-top: 1px solid var(--color-border); }
.grid-3 { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-2 { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
.tile { padding: var(--spacing-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.tile h3 { margin-bottom: var(--spacing-2); }
.tile p { color: var(--color-foreground-muted); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); }
.tile .k { display: block; font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-foreground-subtle); margin-bottom: var(--spacing-3); }
.principles { list-style: none; margin-top: var(--spacing-8); display: grid; gap: var(--spacing-6); max-width: var(--site-measure); }
.principles li { padding-left: var(--spacing-5); border-left: 2px solid var(--color-primary); }
.principles h3 { margin-bottom: var(--spacing-1); }
.principles p { color: var(--color-foreground-muted); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); }
.cta-band { padding-block: var(--spacing-12); border-top: 1px solid var(--color-border); background: var(--color-surface); }
.cta-band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-6); }
.cta-band p { color: var(--color-foreground-muted); max-width: 48ch; }
.address { margin-top: var(--spacing-6); font-family: var(--font-family-code); font-size: var(--text-code-md-size); color: var(--color-foreground-muted); line-height: 1.7; }

/* ---------- contact (Phase C) ---------- */
.contact-grid { display: grid; gap: var(--spacing-8); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: 3fr 2fr; gap: var(--spacing-12); align-items: start; } }
.form { display: grid; gap: var(--spacing-5); }
.form-row { display: grid; gap: var(--spacing-5); }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: var(--spacing-2); }
.field label { font-size: var(--text-label-md-size); font-weight: var(--text-label-md-weight); }
.field label small { font-weight: var(--font-weight-regular); color: var(--color-foreground-muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: var(--spacing-3) var(--spacing-4);
  font: inherit; font-size: var(--text-body-md-size); color: var(--color-foreground);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.field textarea { min-height: 160px; resize: vertical; line-height: var(--text-body-md-leading); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-ring); box-shadow: 0 0 0 2px var(--color-ring); }
.field select { appearance: none; -webkit-appearance: none; padding-right: var(--spacing-8);
  background-image: linear-gradient(45deg, transparent 50%, var(--color-foreground-muted) 50%), linear-gradient(135deg, var(--color-foreground-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.field .err { display: none; font-size: var(--text-body-sm-size); color: var(--color-destructive); }
.field.invalid .err { display: block; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--color-destructive); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-4); }
.form-note { font-size: var(--text-body-sm-size); color: var(--color-foreground-muted); max-width: 48ch; }
.notice { padding: var(--spacing-4) var(--spacing-5); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-surface); font-size: var(--text-body-md-size); }
.notice.ok { border-color: var(--color-success); }
.notice.bad { border-color: var(--color-destructive); }
.notice[hidden] { display: none; }
.contact-aside .tile + .tile { margin-top: var(--spacing-4); }
.contact-aside a { color: var(--color-primary); }
.contact-aside .k { display: block; font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-foreground-subtle); margin-bottom: var(--spacing-2); }

/* phone: the header row is wordmark + toggle + button; drop the wordmark's second word under 480px so nothing clips */
@media (max-width: 479px) { .wordmark-tag { display: none; } .site-header .wrap { gap: var(--spacing-3); } }
.principles a, .form-note a { color: var(--color-primary); }

/* ---------- copy pass 2026-09-23: benefit-first points (plan §2b) ---------- */
.points { margin-top: var(--spacing-8); display: grid; gap: var(--spacing-5); max-width: var(--site-measure); }
.points li { display: grid; grid-template-columns: 20px 1fr; gap: var(--spacing-3); color: var(--color-foreground-muted); }
.points li::before { content: ""; width: 6px; height: 6px; margin-top: 11px; border-radius: 50%; background: var(--color-primary); justify-self: center; }
.points strong, .line-card strong, .two-col li strong { color: var(--color-foreground); font-weight: var(--font-weight-semibold); }
.section-close { margin-top: var(--spacing-8); max-width: var(--site-measure); font-weight: var(--font-weight-medium); }
.section-body { margin-top: var(--spacing-5); max-width: var(--site-measure); color: var(--color-foreground-muted); }

/* =====================================================================
   Visual pass 2026-09-23 (homepage sample). Tokens only; example data
   scenes are HTML so their text stays crisp and follows the theme.
   ===================================================================== */
:root {
  --site-tint: color-mix(in oklch, var(--color-primary) 9%, transparent);
  --site-tint-strong: color-mix(in oklch, var(--color-primary) 16%, transparent);
  --site-warn-tint: color-mix(in oklch, var(--color-warning) 14%, transparent);
  --site-lift: 0 1px 2px color-mix(in oklch, var(--color-foreground) 6%, transparent),
               0 12px 32px -12px color-mix(in oklch, var(--color-foreground) 18%, transparent);
}

/* shared small parts */
.chip {
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  padding: 2px var(--spacing-2); border-radius: var(--radius-sm);
  font-size: var(--font-size-xs); font-weight: var(--font-weight-medium);
  color: var(--color-foreground-muted); background: var(--color-background);
  border: 1px solid var(--color-border); white-space: nowrap;
}
.fine { margin-top: var(--spacing-4); font-size: var(--font-size-xs); color: var(--color-foreground-subtle); }
.btn-lg { min-height: 48px; padding-inline: var(--spacing-6); font-size: var(--text-label-lg-size); }
h2 { max-width: 24ch; text-wrap: balance; }
.signal-spark { height: 52px; }
@media (min-width: 768px) { h2 { font-size: var(--font-size-2xl); line-height: var(--font-leading-2xl); } }

/* ---------- hero v2 ---------- */
.hero-v2 { padding-block: var(--spacing-12) var(--spacing-16); overflow: hidden; }
@media (min-width: 768px) { .hero-v2 { padding-block: var(--spacing-16) calc(var(--spacing-16) * 1.5); } }
.hero-grid { display: grid; gap: var(--spacing-12); align-items: center; }
.hero-grid > *, .two-col > *, .moves > *, .flow > * { min-width: 0; }
@media (max-width: 559px) {
  .app-kpis b { font-size: var(--font-size-md); }
  .app-kpis > div { padding: var(--spacing-3); }
  .app-bar .chip { display: none; }
  .app-rank li { grid-template-columns: minmax(0, 1fr) 18% 3.2em 2.6em; gap: var(--spacing-2); }
}
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 5fr 6fr; gap: var(--spacing-12); } }
.hero-copy h1 { max-width: 18ch; text-wrap: balance; }
@media (min-width: 1200px) { .hero-copy h1 { font-size: 48px; } }  /* display-only, one step above 44 */
.hero-copy .lede { max-width: 52ch; }

.scene { position: relative; padding-bottom: var(--spacing-12); }
@media (min-width: 1024px) { .scene { padding: 0 0 calc(var(--spacing-16) * 2) var(--spacing-8); } }

.app {
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  background: var(--color-surface); box-shadow: var(--site-lift); overflow: hidden;
  font-size: var(--font-size-sm);
}
.app-bar {
  display: flex; align-items: center; gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-4); border-bottom: 1px solid var(--color-border);
}
.app-dots { display: inline-flex; gap: 6px; }
.app-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border-strong); }
.app-path { flex: 1; min-width: 0; font-weight: var(--font-weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-kpis { display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid var(--color-border); }
.app-kpis > div { padding: var(--spacing-4); display: grid; gap: var(--spacing-1); }
.app-kpis > div + div { border-left: 1px solid var(--color-border); }
.app-kpis span { font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
.app-kpis b { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-tight); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-rank { padding: var(--spacing-4); }
.app-h { display: flex; justify-content: space-between; font-size: var(--font-size-xs); color: var(--color-foreground-muted); margin-bottom: var(--spacing-2); }
.app-rank ol { list-style: none; display: grid; gap: 2px; }
.app-rank li {
  display: grid; grid-template-columns: minmax(0, 1fr) 22% 3.5em 3em; gap: var(--spacing-3); align-items: center;
  padding: var(--spacing-2); border-radius: var(--radius-md); font-variant-numeric: tabular-nums;
}
.app-rank li.hot { background: var(--site-tint); box-shadow: inset 2px 0 0 var(--color-primary); }
.app-rank .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-rank .bar { height: 6px; border-radius: 3px; background: var(--color-background); overflow: hidden; }
.app-rank .bar i { display: block; height: 100%; width: var(--w); border-radius: 3px; background: var(--chart-seq-3); }
.app-rank li.hot .bar i { background: var(--color-primary); }
.app-rank .val { text-align: right; font-weight: var(--font-weight-medium); }
.app-rank .d { text-align: right; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.d.up { color: var(--color-success); } .d.down { color: var(--color-destructive); } .d.new { color: var(--color-primary); }

.signal {
  position: relative; margin: calc(var(--spacing-8) * -1) var(--spacing-4) 0 auto; max-width: 320px;
  padding: var(--spacing-4); border-radius: var(--radius-lg);
  background: var(--color-surface-overlay); border: 1px solid var(--color-border-strong);
  box-shadow: var(--site-lift);
}
@media (min-width: 1024px) { .signal { position: absolute; left: 0; bottom: 0; margin: 0; width: 300px; } }
.signal-k { display: flex; align-items: center; gap: var(--spacing-2); font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--font-tracking-wide); }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px var(--site-tint-strong); }
.signal-t { margin-top: var(--spacing-2); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-heading-sm); }
.signal-b { margin-top: var(--spacing-1); font-size: var(--font-size-sm); line-height: var(--font-leading-sm); color: var(--color-foreground-muted); }
.signal-spark { margin-top: var(--spacing-3); width: 100%; height: 40px; }
.signal-spark polyline { fill: none; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.signal-spark .mk { stroke: var(--color-foreground-subtle); stroke-width: 1.5; stroke-dasharray: 4 4; }
.signal-spark .co { stroke: var(--color-primary); stroke-width: 2.5; }

/* ---------- bands ---------- */
.band { background: var(--color-surface); border-block: 1px solid var(--color-border); }
.band-dark { background: var(--color-surface); color: var(--color-foreground); border-block: 1px solid var(--color-border); }
.band-dark .eyebrow { color: var(--color-foreground-muted); }
.band-dark .flow-step p { color: color-mix(in oklch, var(--color-foreground) 72%, transparent); }

/* ---------- shift: three moves ---------- */
.moves { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .moves { grid-template-columns: repeat(3, 1fr); } }
.move { padding: var(--spacing-6); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); }
.move-chart { width: 100%; height: 72px; margin-bottom: var(--spacing-5); }
.move-chart .b rect { fill: var(--color-border-strong); }
.move-chart .b.hi rect { fill: var(--color-primary); }
.move-chart .ln { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.move-chart .ln.old { stroke: var(--color-border-strong); }
.move-chart .ln.hi { stroke: var(--color-primary); }
.move-chart .ln.mk { stroke: var(--color-foreground-subtle); stroke-dasharray: 5 5; stroke-width: 2; }
.move-chart .ln.warn { stroke: var(--color-warning); }
.move-chart .pt { fill: var(--color-primary); }
.stat { font-size: var(--font-size-2xl); font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-tight); line-height: 1; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.stat.warn { color: var(--color-warning); }
.move h3 { margin-top: var(--spacing-3); }
.move p:not(.stat) { margin-top: var(--spacing-2); font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); color: var(--color-foreground-muted); }

/* ---------- panels (decision, source) ---------- */
.panel { border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); box-shadow: var(--site-lift); padding: var(--spacing-6); }
.panel-h { display: flex; justify-content: space-between; align-items: center; gap: var(--spacing-3); font-weight: var(--font-weight-semibold); padding-bottom: var(--spacing-4); margin-bottom: var(--spacing-2); border-bottom: 1px solid var(--color-border); }
.dec-row { display: flex; justify-content: space-between; gap: var(--spacing-4); padding-block: var(--spacing-3); font-size: var(--font-size-base); }
.dec-row + .dec-row { border-top: 1px solid var(--color-border); }
.dec-row span { color: var(--color-foreground-muted); }
.dec-row b { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dec-meter { position: relative; height: 8px; margin-block: var(--spacing-3) var(--spacing-4); border-radius: 4px; background: var(--color-background); border: 1px solid var(--color-border); }
.dec-meter i { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); left: var(--at); border: 2px solid var(--color-surface); }
.dec-meter .m { background: var(--color-foreground-subtle); }
.dec-meter .y { background: var(--color-warning); }
.dec-flag { margin-bottom: var(--spacing-2); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--site-warn-tint); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.panel .big { font-size: 40px; font-weight: var(--font-weight-bold); letter-spacing: var(--font-tracking-tight); line-height: 1.1; margin-block: var(--spacing-4); color: var(--color-foreground); max-width: none; font-variant-numeric: tabular-nums; }
.panel .big small { font-size: var(--font-size-lg); font-weight: var(--font-weight-medium); color: var(--color-foreground-muted); }
.panel dl div { display: flex; justify-content: space-between; gap: var(--spacing-4); padding-block: var(--spacing-3); border-top: 1px solid var(--color-border); font-size: var(--font-size-base); }
.panel dt { color: var(--color-foreground-muted); }
.panel dd { font-weight: var(--font-weight-medium); text-align: right; }

/* ---------- flow (how it works) ---------- */
.flow { list-style: none; display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 900px) { .flow { grid-template-columns: 0.8fr 1fr 1fr 1fr; } }
.flow-step { position: relative; }
.flow-step > a, .flow-step:not(:has(a)) {
  display: flex; flex-direction: column; gap: var(--spacing-2); height: 100%;
  padding: var(--spacing-6); border-radius: var(--radius-lg);
  border: 1px solid var(--color-border); background: var(--color-background);
  transition: border-color var(--motion-duration-fast) var(--motion-easing-standard);
}
.flow-step:not(:has(a)) { background: transparent; border-style: dashed; }
.flow-step > a:hover { border-color: var(--color-primary); }
.flow-step.lead > a { border-color: var(--color-primary); box-shadow: inset 0 2px 0 var(--color-primary); }
.flow-step .num { font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-foreground-muted); }
.flow-step p { font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); color: var(--color-foreground-muted); }
.flow-step .more { margin-top: auto; padding-top: var(--spacing-3); font-size: var(--text-label-md-size); font-weight: var(--font-weight-medium); color: var(--color-primary); }
.tags { display: flex; flex-wrap: wrap; gap: var(--spacing-2); margin-top: auto; padding-top: var(--spacing-3); }
.tags span { padding: 2px var(--spacing-2); border-radius: var(--radius-sm); border: 1px solid var(--color-border-strong); font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
@media (min-width: 900px) {
  .flow-step + .flow-step::before {
    content: "→"; position: absolute; left: calc(var(--spacing-4) * -1); top: 50%;
    width: var(--spacing-4); text-align: center; transform: translateY(-50%);
    color: var(--color-foreground-subtle); font-size: var(--font-size-sm);
  }
}

.two-col > .panel { align-self: center; }

/* ---------- inner pages v2 (rollout 2026-09-23) ---------- */
.page-hero-v2 { padding-block: var(--spacing-16) var(--spacing-12); }
.page-hero-v2 h1 { max-width: 20ch; text-wrap: balance; }
@media (min-width: 1200px) { .page-hero-v2 h1 { font-size: 48px; } }
.page-hero-v2 .lede { max-width: 60ch; }

/* generic example panel parts */
.panel-sub { font-size: var(--font-size-xs); color: var(--color-foreground-muted); margin-top: calc(var(--spacing-2) * -1); margin-bottom: var(--spacing-3); }
.rows { list-style: none; display: grid; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-3); align-items: center; padding-block: var(--spacing-3); border-top: 1px solid var(--color-border); font-size: var(--font-size-base); }
.rows li:first-child { border-top: 0; }
.rows .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rows .nm small { display: block; font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
.rows b { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rows .meter { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: var(--color-background); overflow: hidden; margin-top: calc(var(--spacing-1) * -1); }
.rows .meter i { display: block; height: 100%; width: var(--w); background: var(--chart-seq-3); border-radius: 3px; }
.rows li.hot .meter i { background: var(--color-primary); }
.flag { margin-top: var(--spacing-3); padding: var(--spacing-3) var(--spacing-4); border-radius: var(--radius-md); background: var(--site-tint); font-size: var(--font-size-base); font-weight: var(--font-weight-medium); }
.flag.warn { background: var(--site-warn-tint); }
.flag .k { display: block; font-size: var(--font-size-xs); color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--font-tracking-wide); margin-bottom: var(--spacing-1); }

/* company dossier header */
.co-head { display: flex; align-items: center; gap: var(--spacing-3); margin-bottom: var(--spacing-4); }
.co-mark { width: 40px; height: 40px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--site-tint-strong); color: var(--color-primary); font-weight: var(--font-weight-bold); }
.co-head b { display: block; font-weight: var(--font-weight-semibold); }
.co-head small { font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
.co-head .chip { margin-left: auto; }
.months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; align-items: end; height: 72px; margin-block: var(--spacing-2) var(--spacing-4); }
.months i { display: block; height: var(--h); border-radius: 2px; background: var(--color-border-strong); }
.months i.hi { background: var(--color-primary); }

/* corridor rows: origin -> port -> importer */
.lanes { list-style: none; display: grid; gap: var(--spacing-2); }
.lane { display: grid; grid-template-columns: 1fr auto 1fr auto 1.3fr; gap: var(--spacing-2); align-items: center; padding: var(--spacing-3); border-radius: var(--radius-md); background: var(--color-background); border: 1px solid var(--color-border); font-size: var(--font-size-sm); }
.lane .ar { color: var(--color-foreground-subtle); }
.lane span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lane b { grid-column: 1 / -1; display: flex; justify-content: space-between; font-weight: var(--font-weight-medium); font-size: var(--font-size-xs); color: var(--color-foreground-muted); }
.lane b em { font-style: normal; color: var(--color-foreground); font-variant-numeric: tabular-nums; }
.lane.hot { border-color: var(--color-primary); background: var(--site-tint); }
.split { display: grid; gap: var(--spacing-6); }
@media (min-width: 560px) { .split { grid-template-columns: 1fr 1fr; } }
.split h4 { font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); color: var(--color-foreground-muted); text-transform: uppercase; letter-spacing: var(--font-tracking-wide); margin-bottom: var(--spacing-2); }

/* AI signal feed */
.ai-grid { display: grid; gap: var(--spacing-8); margin-top: var(--spacing-8); }
@media (min-width: 900px) { .ai-grid { grid-template-columns: 1fr 1fr; gap: var(--spacing-12); align-items: start; } }
.feed { list-style: none; display: grid; gap: var(--spacing-3); }
.feed li { padding: var(--spacing-4); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-background); }
.feed li:first-child { border-color: var(--color-primary); }
.feed .signal-k { margin-bottom: var(--spacing-2); }
.feed .signal-k.warn { color: var(--color-warning); }
.feed .signal-k.warn .pulse { background: var(--color-warning); box-shadow: 0 0 0 4px var(--site-warn-tint); }
.feed b { display: block; font-weight: var(--font-weight-semibold); }
.feed p { margin-top: var(--spacing-1); font-size: var(--font-size-sm); color: color-mix(in oklch, var(--color-foreground) 72%, transparent); }
.band-dark .principles li { border-left-color: var(--color-primary); }
.band-dark .principles p { color: color-mix(in oklch, var(--color-foreground) 72%, transparent); }
.band-dark .principles { margin-top: 0; }

/* question / value cards (2x2) */
.cards-2 { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.qcard { padding: var(--spacing-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-background); display: grid; gap: var(--spacing-2); align-content: start; }
.band .qcard { background: var(--color-background); }
.qcard .q { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); letter-spacing: var(--font-tracking-snug); line-height: var(--font-leading-lg); }
.qcard .q::before { content: "“"; color: var(--color-primary); margin-right: 2px; }
.qcard .q::after { content: "”"; color: var(--color-primary); margin-left: 1px; }
.qcard p:not(.q) { font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); color: var(--color-foreground-muted); }
.qcard .num { font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-primary); }
.vcard h3 { font-size: var(--font-size-lg); }

/* dossier (answer) */
.dossier-t { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: var(--font-leading-lg); margin-bottom: var(--spacing-4); }
.findings { list-style: none; display: grid; gap: var(--spacing-3); counter-reset: f; }
.findings li { counter-increment: f; display: grid; grid-template-columns: 24px 1fr; gap: var(--spacing-3); font-size: var(--font-size-base); line-height: var(--font-leading-base); }
.findings li::before { content: counter(f); width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); background: var(--site-tint-strong); color: var(--color-primary); }
.findings b { font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }

/* options table (strategy) */
.opts { list-style: none; display: grid; gap: var(--spacing-2); }
.opt { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--spacing-1) var(--spacing-3); padding: var(--spacing-4); border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-background); }
.opt .nm { font-weight: var(--font-weight-medium); }
.opt .nm small { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-regular); color: var(--color-foreground-muted); }
.opt b { font-variant-numeric: tabular-nums; font-weight: var(--font-weight-semibold); text-align: right; }
.opt b small { display: block; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); }
.opt .good { color: var(--color-success); } .opt .bad { color: var(--color-destructive); }
.opt.pick { border-color: var(--color-primary); background: var(--site-tint); }
.opt .tag { grid-column: 1 / -1; justify-self: start; font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-primary-foreground); background: var(--color-primary); padding: 2px var(--spacing-2); border-radius: var(--radius-sm); }

/* timeline (engagement steps) */
.timeline { list-style: none; display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .timeline { grid-template-columns: repeat(4, 1fr); } }
.timeline li { position: relative; padding: var(--spacing-5) var(--spacing-5) var(--spacing-5); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-surface); }
.timeline .when { font-family: var(--font-family-code); font-size: var(--text-code-sm-size); color: var(--color-primary); }
.timeline h3 { margin-block: var(--spacing-2) var(--spacing-1); }
.timeline p { font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); color: var(--color-foreground-muted); }

/* tiles with a big lead line (about, strategy "how we work with you") */
.tiles-2 { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .tiles-2 { grid-template-columns: 1fr 1fr; } }
.tiles-3 { display: grid; gap: var(--spacing-4); margin-top: var(--spacing-8); }
@media (min-width: 768px) { .tiles-3 { grid-template-columns: repeat(3, 1fr); } }
.vtile { padding: var(--spacing-6); border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-background); }
.band-dark .vtile { background: var(--color-background); }
.vtile .ic { width: 36px; height: 36px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--site-tint-strong); color: var(--color-primary); margin-bottom: var(--spacing-4); }
.vtile .ic svg { width: 18px; height: 18px; }
.vtile h3 { margin-bottom: var(--spacing-2); }
.vtile p { font-size: var(--text-body-md-size); line-height: var(--text-body-md-leading); color: var(--color-foreground-muted); }
.band-dark .vtile p { color: color-mix(in oklch, var(--color-foreground) 72%, transparent); }
.vtile a { color: var(--color-primary); }
.vtile .mail { margin-top: var(--spacing-4); font-family: var(--font-family-code); font-size: var(--text-code-md-size); }

/* privacy: numbered notice cards */
.legal-list { list-style: none; counter-reset: s; display: grid; gap: var(--spacing-4); margin-top: var(--spacing-4); }
@media (min-width: 900px) { .legal-list { grid-template-columns: 1fr 1fr; } }
.legal-list > li {
  counter-increment: s; position: relative;
  padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) calc(var(--spacing-6) + var(--spacing-8));
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
}
.legal-list > li::before {
  content: counter(s, decimal-leading-zero); position: absolute; left: var(--spacing-6); top: var(--spacing-6);
  font-family: var(--font-family-code); font-size: var(--text-code-md-size); color: var(--color-primary);
}
.legal-list h3 { margin-bottom: var(--spacing-2); }
.legal-list p { font-size: var(--text-body-md-size); line-height: var(--font-leading-sm); color: var(--color-foreground-muted); }
.legal-list a { color: var(--color-primary); }

/* ---------- cta v2 ---------- */
.cta-v2 { padding-block: var(--spacing-16); }
.cta-v2 h2 { max-width: none; }

/* homepage hero: Alexander 2026-09-23 — headline first, the small line sits under it */
.eyebrow-after { margin-top: var(--spacing-4); margin-bottom: 0; }
.hero-copy .eyebrow-after + .lede { margin-top: var(--spacing-5); }

/* header: Request a demo (primary) beside Contact us (ghost); on phones only the demo button stays */
@media (max-width: 639px) { .header-contact { display: none; } }