/* Landing composition. Shared application styles stay in styles.css. */
.landing .site-header { padding-inline: max(var(--gutter), calc((100vw - 1224px) / 2)); }
.landing .brand { gap: 12px; }
.landing .brand-word { font-size: 25px; letter-spacing: -.05em; }
.landing .brand-mark { width: 30px; height: 30px; }
.landing .site-nav { gap: 30px; }
.landing .site-nav a { font-size: 14px; }
.landing .header-actions { gap: 18px; }
.landing .icon-btn { border: 0; }
.landing .btn { border-radius: 5px; font-size: 13px; gap: 20px; min-height: 50px; }
.landing .btn-sm { min-height: 42px; padding: 10px 17px; }
.landing .eyebrow { font-size: 12px; }
.landing .eyebrow::before { border-radius: 0; width: 6px; height: 6px; }
.landing .section-head { gap: 20px; margin-bottom: 44px; }
.landing .section-head p:not(.eyebrow) { max-width: 53ch; font-size: 16px; }
.landing h2 { letter-spacing: -.045em; line-height: 1.08; }
.landing h2 em { color: var(--muted); }
.landing .text-link { justify-self: start; }
.landing [hidden] { display: none !important; }

.landing #product { padding-block: clamp(68px, 6vw, 92px); }
.landing .panel[data-demo] {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.landing .panel[data-demo] .panel-body {
  padding: 0;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: 32px clamp(48px, 6vw, 84px);
}
.landing .demo-head {
  grid-column: 1;
  grid-row: 1;
  max-width: 480px;
  gap: 16px;
  padding: 0;
}
.landing #product .demo-head h2 {
  max-width: none;
  font-size: clamp(44px, 4.4vw, 60px);
  line-height: .98;
  text-wrap: nowrap;
  white-space: nowrap;
}
.landing #product .demo-head p { max-width: 34ch; color: var(--muted); font-size: 16px; line-height: 1.65; }
.landing .outcome-ribbons {
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  max-width: 620px;
  height: clamp(220px, 22vw, 290px);
  min-width: 0;
  margin: 0;
  justify-self: end;
  align-self: center;
}
.landing .outcome-ribbons canvas { display: block; width: 100%; height: 100%; }
.landing .outcome-decision {
  grid-column: 1 / -1;
  display: grid;
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line-strong);
}
.landing .objective {
  padding: 0;
  border: 0;
}
.landing .objective legend { margin-bottom: 12px; color: var(--ink-2); font: 600 13px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.landing .radio-track {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.landing .radio-track label + label span { border-left: 1px solid var(--line); }
.landing .radio-track span {
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  font-size: 13px;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.landing .radio-track input:checked + span {
  border-color: var(--accent-strong);
  background: var(--accent-quiet);
  color: var(--accent-strong);
  box-shadow: inset 0 -3px var(--accent-strong);
  font-weight: 600;
}
.landing .radio-track label:hover span { background: var(--surface-2); }
.landing .radio-track label:active span { transform: translateY(1px); }
/* The figures below are fixtures, not measurements. Said once, quietly, where
   a reader sees it - an aria-label would qualify them for screen readers only. */
.landing .profile-note { margin: 0; color: var(--muted); font: 500 12px/1.4 var(--body); letter-spacing: 0; text-transform: none; }
.landing .route-profile { display: grid; gap: 12px; }
.landing .profile-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.landing .profile-metric {
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 16px 4px 0 0;
  border-top: 1px solid var(--line);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.landing .profile-metric > span { color: var(--muted); font-size: 14px; line-height: 1.4; }
.landing .profile-metric > strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 500 clamp(22px, 2.3vw, 32px) var(--mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.04em;
  transition: color var(--dur-2) var(--ease);
}
.landing .profile-metric.is-optimized { border-top-color: var(--accent-strong); box-shadow: inset 0 2px var(--accent-strong); }
.landing .profile-metric.is-optimized > strong { color: var(--accent-strong); }

@media (max-width: 860px) {
  .landing .panel[data-demo] .panel-body { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .landing .demo-head { grid-column: 1; grid-row: auto; max-width: 680px; }
  .landing .outcome-ribbons {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, 680px);
    height: clamp(220px, 36vw, 300px);
    justify-self: center;
  }
  .landing .outcome-decision { grid-column: 1; }
}

@media (max-width: 760px) {
  .landing .outcome-decision { gap: 20px; padding-top: 20px; }
  .landing .profile-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .landing .profile-metric { padding: 15px 0; }
}

@media (max-width: 620px) {
  .landing #product .radio-track { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .landing #product .radio-track label + label span {
    border-top: 1px solid var(--line);
    border-left: 1px solid var(--line);
  }
}

.landing #how .section-head { max-width: 820px; }
.landing .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); border: 0; border-radius: 0; background: transparent; gap: 28px; overflow: visible; }
.landing .step { padding: 0; background: transparent; gap: 16px; }
.landing .step:hover { transform: none; }
.landing .step-art { border: 1px solid var(--line); background: var(--paper-2); border-radius: 5px; height: 110px; }
.landing .step-n { font-size: 12px; }
.landing .step h3 { font-size: 19px; line-height: 1.25; }
.landing .step p { font-size: 13px; line-height: 1.7; }
.landing .value-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 96px; align-items: center; }
.landing .value-copy { gap: 23px; }
.landing .value-copy p { font-size: 16px; max-width: 39ch; }
.landing .value-copy .eyebrow { font-size: 12px; }
.landing .calc { border-color: var(--line-strong); }
.landing .calc-body { padding: 30px; gap: 22px; }
.landing .answer { padding-bottom: 24px; border-bottom: 1px solid var(--inv-line); }
.landing .answer span { color: var(--inv-accent); font: 14px var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.landing .answer strong { font-size: clamp(46px, 5vw, 68px); font-family: var(--display); font-weight: 400; letter-spacing: -.055em; }
.landing .presets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.landing .vol-field > span:first-child,
.landing .slider-top { font-size: 14px; }
.landing .presets button { min-width: 0; min-height: 40px; padding-inline: 8px; font-size: 13px; }
.landing .vol-input b { font-size: 13px; }
.landing #integration { padding-top: 0; border-top: 0; }

/* The closing section uses the action color as a clear change of pace. */
.landing .cta-section {
  --paper: #c1f7b5;
  --surface: #d7ffce;
  --ink: #15271b;
  --ink-2: #223d27;
  --muted: #39543b;
  --faint: #426146;
  --accent: #173d27;
  --accent-strong: #234d2a;
  --line: #99c78f;
  --line-strong: #82ad79;
  --control-line: #82ad79;
  --control-hover: #39543b;
  --control-bg: #d1fbc8;
  --focus: #173d27;
  background: var(--paper);
  color: var(--ink);
  border: 0;
}
.landing .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 100px; align-items: center; }
.landing .cta-copy { gap: 24px; }
.landing .cta-copy h2 { font-size: clamp(36px, 4.5vw, 60px); }
.landing .cta-copy h2 em { color: var(--muted); }
.landing .cta-copy p { font-size: 14px; max-width: 41ch; }
.landing .cta-copy .eyebrow { font-size: 12px; }
.landing .contact-form label {
  color: var(--ink-2);
  font: 600 14px/1.4 var(--body);
  letter-spacing: 0;
  text-transform: none;
}
.landing .contact-form label span { color: var(--muted); font: 400 13px/1.4 var(--body); }
.landing .cta-section .contact-status[data-tone="error"] { color: #78321e; }
.landing .cta-section .btn-primary { --btn-bg: #173d27; --btn-line: #173d27; --btn-fg: #f2fff0; color: #f2fff0; }
.landing .cta-section .btn-primary:hover { --btn-bg: #245936; --btn-line: #245936; }
.landing .site-footer { padding-top: 62px; padding-bottom: 30px; }
.landing .footer-grid { gap: 45px; padding-bottom: 38px; }
.landing .footer-brand p { max-width: 34ch; font-size: 14px; line-height: 1.6; }
.landing .footer-col { gap: 10px; }
.landing .footer-col a { font-size: 14px; }
.landing .footer-col b { font-size: 13px; }
.landing .footer-base { font-size: 13px; }

@media (max-width: 1100px) {
  .landing .site-nav { gap: 18px; }
  .landing .steps { gap: 18px; }
  .landing .cta-grid { gap: 60px; }
}
@media (max-width: 900px) {
  .landing { --header-h: 68px; }
  .landing .site-nav {
    visibility: hidden;
    transition: opacity var(--dur-2) var(--ease),
                transform var(--dur-2) var(--ease),
                visibility 0s linear var(--dur-2);
  }
  .landing .site-nav.is-open {
    visibility: visible;
    transition-delay: 0s;
  }
  .landing .site-nav a { font-size: 16px; }
  .landing .header-actions { margin-left: auto; gap: 6px; }
  .landing .value-grid, .landing .insights-grid, .landing .cta-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .landing .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .landing .cta-copy p { max-width: 48ch; }
}
@media (max-width: 540px) {
  .landing { --gutter: 22px; }
  .landing .brand-word { font-size: 21px; }
  .landing .logo-btn { width: 28px; }
  .landing .panel[data-demo] .panel-body { padding: 0; gap: 24px; }
  .landing .demo-head { gap: 8px; }
  .landing #product .demo-head h2 { font-size: 30px; }
  .landing .outcome-ribbons { height: 190px; }
  .landing .radio-track { grid-template-columns: minmax(0, 1fr); }
  .landing .radio-track span { font-size: 12px; }
  .landing .steps { gap: 24px 16px; }
  .landing .step-art { height: 85px; }
  .landing .step h3 { font-size: 17px; }
  .landing .step p { font-size: 12px; }
  .landing .step-n { font-size: 12px; }
  .landing .calc-body { padding: 22px; }
  .landing .presets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .landing .footer-brand { grid-column: 1 / -1; }
}

/* ========================================================================== */
/* Reference-led landing direction: neutral black, mint, hairlines, no chrome */
/* ========================================================================== */
.landing,
.landing[data-theme="dark"],
.landing[data-theme="light"] {
  --shell: 1184px;
  --header-h: 78px;
  --tracking-eyebrow: .13em;
  --paper: #000000;
  --paper-2: #050606;
  --surface: #080909;
  --surface-2: #0c0d0d;
  --surface-sunk: #030404;
  --ink: #ffffff;
  --ink-2: #e8ecea;
  --muted: #a7afac;
  --faint: #77807d;
  --line: #1b1e1d;
  --line-strong: #303532;
  --mineral: #b2fff6;
  --mineral-2: #d0fff9;
  --accent: #b2fff6;
  --accent-strong: #b2fff6;
  --accent-quiet: #102522;
  --accent-line: #31554f;
  --inv-bg: #000000;
  --inv-bg-2: #070808;
  --inv-line: #202322;
  --inv-line-2: #343938;
  --inv-ink: #ffffff;
  --inv-muted: #a7afac;
  --inv-faint: #77807d;
  --inv-accent: #b2fff6;
  --viz-bg: #000000;
  --viz-ink: #ffffff;
  --viz-muted: #a7b0ad;
  --viz-line: #69736f;
  --viz-accent: #b2fff6;
  --viz-accent-soft: #5da99f;
  --section-y: clamp(88px, 9vw, 136px);
  --t-h2: clamp(36px, 3.7vw, 48px);
  color-scheme: dark;
  font-family: var(--display);
}
.landing body { background: #000; color: #fff; font-family: var(--display); }
.landing p, .landing input, .landing textarea, .landing button, .landing select { font-family: var(--display); }
.landing .shell { max-width: 1184px; }
.landing .section + .section { border-top-color: var(--line); }
.landing .site-header {
  min-height: 78px;
  padding-inline: max(28px, calc((100vw - 1184px) / 2));
  background: #030404;
  border-bottom: 1px solid transparent;
}
.landing .site-header.is-stuck { background: rgba(3, 4, 4, .92); border-bottom-color: var(--line); }
.landing .logo-btn, .landing .logo-menu, .landing .icon-btn { display: none !important; }
.landing .brand-mark { color: #fff; }
.landing .brand-word { color: #f4f2ea; font-weight: 500; }
.landing .brand-word b { color: inherit; font-weight: inherit; }
.landing[data-logo="switch"] .site-header .brand-mark,
.landing[data-logo="channel"] .site-header .brand-mark { color: #a4f3df; }
.landing .site-nav { gap: clamp(26px, 4vw, 58px); }
.landing .site-nav a { color: #dce2df; font-size: 13px; }
.landing .btn {
  min-height: 48px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.landing .btn-primary { --btn-bg: #b2fff6; --btn-line: #b2fff6; --btn-fg: #000; color: #000; }
.landing .btn-primary:hover { --btn-bg: #d0fff9; --btn-line: #d0fff9; }
.landing .btn-sm { min-height: 42px; padding-inline: 22px; }

.landing .hero {
  position: relative;
  min-height: calc(100svh - 78px);
  overflow: hidden;
  isolation: isolate;
  background: #000;
}
.landing .hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .88) 30%, rgba(0, 0, 0, .42) 58%, rgba(0, 0, 0, .06) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .38), transparent 24%, transparent 72%, rgba(0, 0, 0, .54));
}
.landing .hero-market-canvas {
  position: absolute;
  top: -6%;
  left: -6%;
  z-index: 0;
  width: 112%;
  max-width: none;
  height: 112%;
  pointer-events: none;
  opacity: .94;
}
.landing .hero-inner { position: relative; z-index: 2; }
.landing .hero-inner {
  grid-template-areas: "intro";
  grid-template-columns: minmax(0, 760px);
  grid-template-rows: auto;
  align-items: center;
  min-height: calc(100svh - 78px);
  padding-top: clamp(92px, 11vh, 132px);
  padding-bottom: clamp(92px, 11vh, 132px);
  align-content: center;
}
.landing .hero-intro {
  grid-area: intro;
  display: grid;
  gap: 28px;
}
.landing .hero-intro > .eyebrow {
  font: 600 13px/1.4 var(--body);
  letter-spacing: .02em;
  text-transform: none;
  color: #aeb7b3;
}
.landing .hero-intro h1 {
  max-width: 720px;
  font-size: clamp(64px, 6.2vw, 86px);
  line-height: 1.02;
  letter-spacing: -.055em;
  font-weight: 400;
}
.landing .hero-intro h1 em { color: #b2fff6; }
@media (min-width: 901px) {
  .landing .hero-line-group { white-space: nowrap; }
}
.landing .hero-lede { max-width: 52ch; color: #bdc5c2; font-size: 16px; line-height: 1.7; }
.landing .hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.landing .hero-actions .btn-primary { width: auto; }
.landing .hero-actions .btn-secondary {
  display: inline-flex;
  border-color: rgba(255, 255, 255, .24);
  color: #fff;
}
.landing .hero-trust { display: flex; color: #9da5a1; font-size: 13px; }
.landing .hero-trust::before { width: 18px; height: 1px; border-radius: 0; background: #62706b; }
.landing .trust { padding-block: 0; border-block: 1px solid rgba(255,255,255,.14); background: #000; color: #fff; }
.landing .trust-inner { display: grid; grid-template-columns: minmax(150px,.62fr) minmax(0,2.38fr); align-items: stretch; gap: 0; }
.landing .trust-inner h2 { align-self: center; padding-right: 36px; color: #8d9692; font: 500 11px/1.7 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.landing .trust-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 0; border: 0; border-left: 1px solid rgba(255,255,255,.14); border-radius: 0; background: transparent; overflow: visible; }
.landing .trust-cell { display: grid; align-content: start; gap: 10px; min-width: 0; min-height: 142px; padding: 28px 26px; border-right: 1px solid rgba(255,255,255,.14); background: transparent; }
.landing .trust-cell:last-child { border-right: 0; }
.landing .trust-cell b { color: #fff; font: 500 17px/1.25 var(--display); letter-spacing: -.02em; }
.landing .trust-cell span { display: block; max-width: 24ch; color: #8d9692; font-size: 12px; line-height: 1.55; }
@media (max-width: 900px) {
  .landing .trust-inner { grid-template-columns: 1fr; }
  .landing .trust-inner h2 { padding: 24px 0 18px; }
  .landing .trust-inner h2 br { display: none; }
  .landing .trust-grid { grid-template-columns: repeat(2,minmax(0,1fr)); border-left: 0; border-top: 1px solid rgba(255,255,255,.14); }
  .landing .trust-cell:nth-child(2) { border-right: 0; }
  .landing .trust-cell:nth-child(-n + 2) { border-bottom: 1px solid rgba(255,255,255,.14); }
}
@media (max-width: 540px) {
  .landing .trust-grid { grid-template-columns: 1fr; }
  .landing .trust-cell { min-height: 0; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .landing .trust-cell:last-child { border-bottom: 0; }
}

.landing .flow-visual {
  overflow: hidden;
  padding-block: clamp(84px, 9vw, 128px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 78% 56%, rgba(39, 126, 105, .18), transparent 38%),
    #000;
}
.landing .flow-visual-inner { display: grid; gap: clamp(48px, 6vw, 76px); }
.landing .flow-visual-head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
  gap: 20px 72px;
  align-items: end;
}
.landing .flow-visual-head .eyebrow { grid-column: 1 / -1; }
.landing .flow-visual-head h2 {
  font-size: clamp(46px, 5vw, 68px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.landing .flow-visual-head h2 em { color: #b2fff6; }
.landing .flow-visual-head > p:last-child {
  max-width: 45ch;
  color: #a7afac;
  font-size: 15px;
  line-height: 1.7;
}
.landing .flow-visual .hero-console {
  position: relative;
  inset: auto;
  z-index: auto;
  margin: 0;
  pointer-events: none;
  opacity: 1;
}
.landing .flow-visual .console-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 0 14px;
  color: #828b88;
  font: 12px var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.landing .flow-visual .hero-stage {
  position: relative;
  inset: auto;
  width: 100%;
  height: clamp(340px, 42vw, 520px);
  max-height: none;
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid rgba(178, 255, 246, .22);
  border-bottom: 1px solid var(--line);
}
.landing .flow-visual .hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
}
.landing .route-outcome-label {
  position: absolute;
  z-index: 1;
  top: 30%;
  left: calc(82% + 12px);
  color: #b2fff6;
  font: 12px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity 240ms ease;
}
.landing .route-outcome-label.is-visible { opacity: 1; }

.landing .product-grid {
  display: grid;
  justify-items: center;
}
.landing #product .panel[data-demo] {
  width: 100%;
  max-width: 1120px;
}


.landing #product,
.landing #how,
.landing #insights,
.landing #integration {
  --paper: #f8f8f8;
  --paper-2: #f8f8f8;
  --surface: #ffffff;
  --surface-2: #f2f3f2;
  --surface-sunk: #eceeed;
  --ink: #050606;
  --ink-2: #1d211f;
  --muted: #58605c;
  --faint: #66706b;
  --line: #d9ddda;
  --line-strong: #bfc5c1;
  --accent: #087d6e;
  --accent-strong: #087568;
  --accent-quiet: #d9f7f1;
  --accent-line: #9bcfc5;
  color: #050606;
  color-scheme: light;
}
.landing #product,
.landing #how,
.landing #insights,
.landing #integration { background: #f8f8f8; }
.landing #how, .landing #insights, .landing #integration { border-top-color: #d9ddda; }
.landing .section-head { max-width: 900px; margin-bottom: 58px; }
.landing .section-head h2,
.landing .value-copy h2,
.landing .insight-copy h2,
.landing .cta-copy h2 { font-weight: 500; line-height: 1.14; letter-spacing: -.035em; }
.landing h2 em { color: inherit; }
.landing .eyebrow { color: var(--faint); letter-spacing: .13em; }
.landing .eyebrow::before { background: var(--accent); }

.landing .steps {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: none;
  gap: 0;
  border-top: 1px solid var(--line);
}
.landing .steps > .step,
.landing .step {
  grid-row: auto;
  grid-template-columns: 72px minmax(220px, .8fr) minmax(0, 1.2fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 28px;
  min-height: 116px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.landing .step-art { display: none; }
.landing .step-n { grid-column: 1; color: var(--faint); }
.landing .step h3 { grid-column: 2; font-size: 24px; font-weight: 500; }
.landing .step p { grid-column: 3; font-size: 14px; max-width: 48ch; }

.landing #value { background: #000; color: #fff; }
.landing .calc { border-radius: 0; box-shadow: none; }

.landing .insights-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr);
  align-items: center;
  gap: 84px;
}
.landing .insight-copy { display: grid; gap: 24px; }
.landing .insight-copy > p:not(.eyebrow) {
  max-width: 48ch;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.7;
}
.landing .insight-chart { display: grid; gap: 22px; margin: 0; padding: 30px; border: 1px solid var(--line-strong); background: var(--surface); }
.landing .insight-chart figcaption { display: block; }
.landing .insight-chart figcaption > div { display: grid; gap: 5px; }
.landing .insight-chart figcaption strong { color: var(--ink); font-size: 14px; font-weight: 500; }
.landing .insight-chart figcaption span { color: var(--faint); font: 12px var(--mono); text-transform: uppercase; letter-spacing: .07em; }
.landing .insight-disclosure {
  justify-self: start;
  margin-top: -8px;
  color: var(--faint);
  font: 500 12px/1.4 var(--body);
  letter-spacing: .01em;
}
.landing .insight-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); }
.landing .insight-metrics button {
  min-width: 0;
  min-height: 40px;
  padding: 7px 8px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.landing .insight-metrics button:first-child { border-left: 0; }
.landing .insight-metrics button:hover { background: var(--surface-2); color: var(--ink); }
.landing .insight-metrics button:active { transform: translateY(1px); }
.landing .insight-metrics button[aria-pressed="true"] { background: var(--accent-quiet); color: var(--accent-strong); box-shadow: inset 0 -3px var(--accent-strong); }
.landing .insight-bars { display: grid; gap: 8px; }
.landing .insight-row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 70px; align-items: center; gap: 16px; padding: 13px 0; }
.landing .insight-row > span b { color: var(--ink-2); font-size: 14px; font-weight: 500; }
.landing .insight-row > i { height: 7px; overflow: hidden; background: var(--line); }
.landing .insight-row > i b { display: block; height: 100%; background: var(--accent-strong); transition: width 320ms var(--ease); }
.landing .insight-row > strong { color: var(--ink-2); font: 14px var(--mono); font-weight: 500; text-align: right; }
.landing #integration .section-head > p:not(.eyebrow) { max-width: 70ch; }
.execution-map { position: relative; width: 100%; max-width: 1000px; height: 740px; margin: 0 auto; }
.map-node { position: absolute; z-index: 2; min-height: 112px; display: grid; align-content: center; gap: 9px; padding: 22px 28px; border: 1px solid var(--line-strong); background: var(--surface); }
.map-node > span { color: var(--ink); font-size: 24px; font-weight: 500; line-height: 1.1; }
.map-node > strong { color: var(--muted); font-size: 16px; font-weight: 400; line-height: 1.45; }
.node-execution { top: 8px; left: 9%; width: 47%; }
.node-simulation { top: 244px; left: 9%; width: 47%; border-color: var(--accent-strong); background: var(--accent-quiet); }
.node-learning { top: 244px; right: 4%; width: 34%; border-color: var(--accent-strong); background: var(--accent-quiet); }
.node-meta { top: 432px; left: 9%; width: 47%; }
.node-aggregators { bottom: 0; left: 9%; width: 47%; min-height: 126px; }
.map-sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 5px; }
.map-sources b { padding: 9px 6px; border: 1px solid var(--line); color: var(--ink-2); font-size: 11px; font-weight: 400; text-align: center; }
.map-connections { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; overflow: visible; }
.map-line { fill: none; stroke: var(--accent-strong); stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-feedback { stroke-dasharray: 8 7; }
.map-connections marker path { fill: var(--accent-strong); }
.map-label { position: absolute; z-index: 3; padding: 3px 6px; background: #f8f8f8; color: var(--faint); font: 12px var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.label-candidates { top: 382px; left: 31%; transform: translateX(-50%); }
/* ABOVE the horizontal leg, not on it: a label boxed over the line reads as a break in
   the arrow rather than a caption for it. */
.label-predicted { top: 452px; left: 62%; }
.label-execution { top: 190px; left: 26px; }
/* Left of the shared vertical, matching the predicted-best-quote caption. */
.label-feedback { top: 160px; right: 22%; }
.mobile-map-flow { display: none; }

.landing .cta-section {
  --paper: #b2fff6;
  --surface: transparent;
  --ink: #000;
  --ink-2: #111;
  --muted: #29423e;
  --faint: #385a55;
  --line: rgba(0,0,0,.25);
  --line-strong: rgba(0,0,0,.45);
  background: #b2fff6;
}
.landing .cta-grid { grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); }
.landing .contact-form { padding: 0; border: 0; border-radius: 0; background: transparent; }
.landing .contact-form input,
.landing .contact-form textarea {
  padding: 13px 0;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,.45);
  border-radius: 0;
  background: transparent;
  color: #000;
}
.landing .contact-form input::placeholder,
.landing .contact-form textarea::placeholder { color: rgba(0,0,0,.48); }
.landing .cta-section .btn-primary { --btn-bg: #000; --btn-line: #000; --btn-fg: #fff; color: #fff; }

.landing .site-footer { background: #f8f8f8; color: #050606; border-top: 0; padding-top: 72px; }
.landing .site-footer .brand-word { color: #050606; }
.landing .site-footer .brand-word b { color: inherit; }
.landing .site-footer .brand-mark { color: #050606; }
.landing .footer-brand p, .landing .footer-col a { color: #58605c; }
.landing .footer-col b, .landing .footer-base { color: #66706b; }
.landing .footer-base { border-top-color: #d9ddda; }

@media (max-width: 900px) {
  .landing .hero { min-height: 0; }
  .landing .hero-inner {
    min-height: 0;
    padding-top: 96px;
    padding-bottom: 96px;
  }
  .landing .flow-visual-head { grid-template-columns: 1fr; }
  .landing .flow-visual-head .eyebrow { grid-column: 1; }
  .landing .flow-visual-head > p:last-child { max-width: 56ch; }
  .landing .flow-visual .hero-stage { height: clamp(300px, 56vw, 430px); }
  .landing .hero-market-canvas { left: -24%; width: 148%; opacity: .74; }
  .landing .hero::after {
    background:
      linear-gradient(90deg, rgba(0, 0, 0, .95) 0%, rgba(0, 0, 0, .82) 62%, rgba(0, 0, 0, .38) 100%),
      linear-gradient(180deg, rgba(0, 0, 0, .36), transparent 28%, rgba(0, 0, 0, .56));
  }
  .landing .value-grid, .landing .insights-grid, .landing .cta-grid { grid-template-columns: 1fr; }
  .landing .steps > .step, .landing .step { grid-template-columns: 58px 1fr; gap: 14px 22px; }
  .landing .step h3 { grid-column: 2; }
  .landing .step p { grid-column: 2; }
}
@media (max-width: 760px) {
  .landing .insight-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .landing .insight-metrics button:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .landing .insight-metrics button:nth-child(4) { border-top: 1px solid var(--line); }

}
@media (max-width: 540px) {
  .landing .insight-chart { padding: 22px; }
  .landing .insight-chart figcaption { display: grid; gap: 8px; }
  .landing .insight-row { grid-template-columns: 90px minmax(0, 1fr) 62px; gap: 10px; }
  .execution-map { height: auto; display: grid; gap: 34px; }
  .map-node { position: relative; inset: auto; width: 100%; min-height: 0; padding: 20px 22px; }
  .map-node > span { font-size: 20px; }
  .map-node > strong { font-size: 14px; }
  .node-aggregators { order: 1; }
  .node-meta { order: 2; }
  .node-simulation { order: 3; }
  .node-learning { order: 4; }
  .node-execution { order: 5; }
  .map-sources { grid-template-columns: 1fr; }
  .map-connections, .map-label { display: none; }
  .mobile-map-flow { order: 6; display: block; margin: -12px 0 0; color: var(--accent-strong); font: 12px/1.7 var(--mono); text-align: center; }
}
@media (max-width: 540px) {
  .landing { --gutter: 22px; }
  .landing .hero-inner { padding-top: 72px; padding-bottom: 72px; }
  .landing .hero-intro { gap: 22px; }
  .landing .hero-intro h1 { font-size: clamp(47px, 13.2vw, 60px); }
  .landing .hero-lede { font-size: 15px; }
  .landing .hero-actions { display: grid; }
  .landing .hero-actions .btn { width: 100%; justify-content: space-between; }
  .landing .flow-visual { padding-block: 68px; }
  .landing .flow-visual-inner { gap: 38px; }
  .landing .flow-visual-head { gap: 16px; }
  .landing .flow-visual-head h2 { font-size: clamp(38px, 11vw, 50px); }
  .landing .flow-visual .hero-stage { height: 280px; }
  .landing .flow-visual .console-axis { font-size: 12px; }
  .landing .route-outcome-label { right: 0; left: auto; font-size: 12px; }
  .landing .hero-market-canvas { left: -62%; width: 190%; opacity: .64; }
  .landing .steps > .step, .landing .step { grid-template-columns: 44px 1fr; }
  .landing .step h3 { font-size: 20px; }
}

/* Light-band controls inherit resolved dark control tokens from the page root;
   restate the concrete light values at the band boundary. */
.landing #product,
.landing #how,
.landing #insights,
.landing #integration {
  --control-bg: #ffffff;
  --control-embedded-bg: #f2f3f2;
  --control-line: #bfc5c1;
  --control-hover: #6f7974;
}
.landing .step-n { white-space: nowrap; }
.landing .steps > .step,
.landing .step { grid-template-columns: 100px minmax(220px, .8fr) minmax(0, 1.2fr); }
@media (max-width: 900px) {
  .landing .steps > .step,
  .landing .step { grid-template-columns: 92px 1fr; }
}
@media (max-width: 540px) {
  .landing .steps > .step,
  .landing .step { grid-template-columns: 82px 1fr; }
}
.landing .contact-form textarea { resize: none; }