:root {
  /* ---------------------------------------------------------------------
     JOBSITE OPERATIONS CONSOLE identity.
     The legacy variable NAMES are kept and re-pointed to the blueprint
     palette so every existing rule inherits the new look without editing
     each selector. --ink is now blueprint navy (dark grounds + text),
     --copper is now burnt orange (rare, action-only), --paper is cool
     concrete instead of cream. New blueprint, cyan, and mono tokens drive the
     blueprint console treatment applied in the OVERRIDES block at the end.
     --------------------------------------------------------------------- */
  --ink: #0e2842;        /* blueprint navy: dark sections, primary text, buttons */
  --ink-2: #24384c;      /* lighter navy: secondary text, nav */
  --paper: #e7e9ec;      /* cool concrete base (was cream) */
  --white: #ffffff;      /* card surface on light */
  --line: #c9ced5;       /* hairline on light */
  --line-dark: #aab4bb;  /* stronger frame on light */
  --muted: #4a5560;      /* muted text on light */
  --copper: #be5626;     /* burnt orange accent (rare) */
  --copper-dark: #a4471c;
  --sage: #d9e0e2;       /* faint cool band (section-sage) */
  --sage-deep: #2e5f51;
  --sand: #e2e6e9;       /* faint cool band (section-sand) */
  --blue-pale: #d7e3ec;  /* cool blueprint tint (coverage cells) */
  /* functional signal palette (re-points legacy status names) */
  --warning: #e39a12;    /* expected-late amber */
  --danger: #e23d42;     /* no-show / alert red */
  --success: #1f9d6b;    /* on-site / on-time green */
  --shadow: 0 24px 50px rgba(6, 18, 32, 0.18);
  --max: 1180px;

  /* blueprint console tokens */
  --blue-900: #0b2138;   /* deepest: header, footer */
  --blue-850: #0e2842;   /* dark section ground */
  --blue-800: #123152;   /* dark section alt / cta */
  --blue-700: #163a5f;   /* console panel surface */
  --blue-600: #1d476f;
  --line-blue: #284f75;  /* border on blueprint */
  --cyan: #7cc3ea;       /* ambient blueprint line / label accent */
  --route: #3d7fd1;      /* en-route blue (signal, on light) */
  --live-d: #3fc088; --route-d: #6ea8ff; --late-d: #f4ad2b; --alert-d: #f4636a; /* signal on blueprint */
  --on-blue: #e6eef6;    /* text on blueprint */
  --on-blue-soft: #9fb6cd;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 10px 14px;
  background: var(--white);
  color: var(--ink);
}
.skip-link:focus { left: 10px; top: 10px; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(244, 241, 233, 0.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
}
.header-inner {
  width: min(calc(100% - 40px), var(--max));
  min-height: 74px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 800;
  letter-spacing: 0.13em;
  font-size: 1rem;
}
.brand-copy {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  line-height: 1;
}
.brand-name { line-height: 1; }
.brand-motto {
  color: var(--on-blue-soft);
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.025em;
  line-height: 1;
  white-space: nowrap;
}
.brand-mark {
  width: 31px;
  height: 31px;
}
.nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 27px;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-2);
  font-size: 0.92rem;
  font-weight: 650;
  white-space: nowrap;
  padding: 25px 0 22px;
  border-bottom: 3px solid transparent;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] {
  border-bottom-color: var(--copper);
}
.nav-mobile-contact { display: none; }
.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.menu-toggle {
  display: none;
  width: 44px;
  height: 42px;
  border: 1px solid var(--line-dark);
  background: transparent;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after {
  width: 20px;
  height: 2px;
  background: var(--ink);
  position: relative;
  display: block;
  content: "";
}
.menu-toggle span::before { position: absolute; top: -6px; }
.menu-toggle span::after { position: absolute; top: 6px; }
/* CSS-only mobile menu: a visually-hidden checkbox (#nav-toggle) holds the open state so
   the menu works with zero JS; .menu-toggle is its <label>. site.js adds scroll lock,
   close-on-link, and Escape as enhancements. Checkbox is display:none off mobile so it is
   never a stray tab stop when the full nav is shown inline. */
.nav-toggle { display: none; }
.nav-toggle:focus-visible ~ .header-actions .menu-toggle { outline: 2px solid var(--cyan); outline-offset: 2px; }
#nav-toggle:checked ~ .header-actions .menu-toggle span { background: transparent; }
#nav-toggle:checked ~ .header-actions .menu-toggle span::before { top: 0; transform: rotate(45deg); }
#nav-toggle:checked ~ .header-actions .menu-toggle span::after { top: 0; transform: rotate(-45deg); }

.container {
  width: min(calc(100% - 40px), var(--max));
  margin: 0 auto;
}
.narrow { width: min(calc(100% - 40px), 850px); margin: 0 auto; }
section { padding: 92px 0; }
.section-tight { padding: 62px 0; }
.section-dark { background: var(--ink); color: var(--white); }
.section-white { background: var(--white); }
.section-sage { background: var(--sage); }
.section-sand { background: var(--sand); }
.border-top { border-top: 1px solid var(--line); }

h1, h2, h3, h4 {
  margin: 0 0 18px;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); max-width: 850px; }
h2 { font-size: clamp(2rem, 3.5vw, 3.2rem); }
h3 { font-size: 1.35rem; }
h4 { font-size: 1.05rem; }
p { margin: 0 0 22px; }
.lead { font-size: clamp(1.12rem, 2vw, 1.32rem); color: var(--ink-2); max-width: 760px; }
.section-dark .lead { color: #d9e1e7; }
.section-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 430px); gap: 60px; align-items: end; margin-bottom: 46px; }
.section-intro p { color: var(--muted); margin: 0; }
.section-dark .section-intro p { color: #c9d2d9; }
.kicker {
  margin: 0 0 16px;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--copper-dark);
}
.section-dark .kicker { color: #dfaa86; }
.rule { width: 70px; height: 4px; background: var(--copper); margin: 24px 0; }

.button {
  min-height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 11px 18px;
  border: 1px solid var(--ink);
  border-radius: 3px;
  background: var(--ink);
  color: var(--white);
  text-decoration: none;
  font-weight: 750;
  font-size: 0.93rem;
  cursor: pointer;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.button:hover { transform: translateY(-1px); background: var(--ink-2); }
.button-secondary { background: transparent; color: var(--ink); }
.button-secondary:hover { background: var(--white); }
.button-copper { background: var(--copper); border-color: var(--copper); }
.button-copper:hover { background: var(--copper-dark); }
.button-light { background: var(--white); color: var(--ink); border-color: var(--white); }
.button-light:hover { background: #e9eef1; }
.button-small { min-height: 39px; padding: 8px 14px; font-size: 0.86rem; }
.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
/* Keyboard focus ring on the primary CTAs (2026-07-16 audit: buttons were the only interactive element
   without one). Navy ring on light grounds; cyan on the blueprint-dark grounds where navy would vanish. */
.button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.hero .button:focus-visible, .section-dark .button:focus-visible,
.command-stage .button:focus-visible, .cta-section .button:focus-visible { outline-color: var(--cyan); }
.text-link { font-weight: 750; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.scenario-callout {
  margin-top: 28px;
  padding: 21px 24px;
  border-left: 4px solid var(--copper);
  background: var(--sand);
}
.scenario-callout .kicker { margin-bottom: 8px; }
.scenario-callout p:last-child { margin-bottom: 0; }

.hero {
  padding: 74px 0 72px;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(520px, 1.08fr);
  gap: 58px;
  align-items: center;
}
.hero-copy h1 { font-size: clamp(2.4rem, 4.35vw, 3.95rem); }
.hero-copy .lead { margin-top: 24px; }
.hero-note {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 5px 1fr;
  gap: 14px;
  max-width: 590px;
  color: var(--muted);
  font-size: 0.93rem;
}
.hero-note::before { content: ""; background: var(--copper); }

.product-window {
  background: var(--white);
  border: 1px solid var(--line-dark);
  box-shadow: var(--shadow);
  min-width: 0;
}
.product-topbar {
  min-height: 46px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--ink);
  color: var(--white);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
}
.window-dots { display: flex; gap: 6px; }
.window-dots span { width: 7px; height: 7px; border: 1px solid #a8b6c1; }
.window-user { display: flex; align-items: center; gap: 9px; }
.window-avatar {
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  background: var(--sage);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.72rem;
}
.product-body { display: grid; grid-template-columns: 154px 1fr; min-height: 470px; }
.product-sidebar { background: #edf0ef; border-right: 1px solid var(--line); padding: 18px 12px; }
.sidebar-brand { font-weight: 850; letter-spacing: 0.12em; font-size: 0.78rem; margin: 0 0 21px 8px; }
.sidebar-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 9px;
  color: #50616d;
  font-size: 0.77rem;
  font-weight: 700;
  border-left: 3px solid transparent;
}
.sidebar-item.active { background: var(--white); color: var(--ink); border-left-color: var(--copper); }
.sidebar-icon { width: 16px; height: 16px; opacity: 0.9; }
.product-main { padding: 21px 22px 18px; min-width: 0; background: #fafbfa; }
.product-heading { display: flex; justify-content: space-between; align-items: start; gap: 18px; margin-bottom: 18px; }
.product-heading h3 { font-size: 1.05rem; margin-bottom: 4px; }
.product-heading p { margin: 0; color: var(--muted); font-size: 0.74rem; }
.status-live { display: flex; align-items: center; gap: 7px; font-size: 0.7rem; font-weight: 800; color: var(--success); }
.status-live::before { content: ""; width: 7px; height: 7px; background: var(--success); }
.metric-strip { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line); margin-bottom: 14px; }
.metric { padding: 12px 9px; border-right: 1px solid var(--line); background: var(--white); }
.metric:last-child { border-right: 0; }
.metric strong { display: block; font-size: 1.22rem; line-height: 1; margin-bottom: 5px; }
.metric span { display: block; color: var(--muted); font-size: 0.62rem; line-height: 1.2; }
.operations-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 14px; }
.map-panel, .attention-panel, .voice-panel { border: 1px solid var(--line); background: var(--white); }
.panel-head { min-height: 39px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); }
.panel-head h4 { margin: 0; font-size: 0.72rem; letter-spacing: 0.02em; }
.panel-head a { color: var(--copper-dark); font-size: 0.64rem; font-weight: 750; text-decoration: none; }
.map-art { height: 172px; position: relative; overflow: hidden; background: #e8ecea; }
.map-road { position: absolute; height: 12px; background: #fff; border: 1px solid #d7dcda; transform-origin: left center; }
.map-road.r1 { width: 125%; left: -25px; top: 72px; transform: rotate(-12deg); }
.map-road.r2 { width: 100%; left: 30px; top: 112px; transform: rotate(21deg); }
.map-road.r3 { width: 75%; left: 125px; top: 17px; transform: rotate(76deg); }
.map-block { position: absolute; border: 1px solid #d2d8d5; background: #f6f7f5; }
.map-pin { position: absolute; width: 19px; height: 19px; border: 4px solid var(--white); box-shadow: 0 1px 4px rgba(0,0,0,.25); transform: rotate(45deg); }
.map-pin::after { content: ""; width: 5px; height: 5px; background: var(--white); position: absolute; top: 3px; left: 3px; }
.map-pin.green { background: var(--success); }
.map-pin.orange { background: var(--warning); }
.map-pin.blue { background: var(--ink-2); }
.pin-label { position: absolute; padding: 4px 6px; background: var(--ink); color: var(--white); font-size: 0.55rem; white-space: nowrap; }
.attention-list { padding: 3px 0; }
.attention-item { display: grid; grid-template-columns: 7px 1fr auto; gap: 9px; padding: 10px 10px; border-bottom: 1px solid #e7ebed; align-items: start; }
.attention-item:last-child { border-bottom: 0; }
.attention-dot { width: 7px; height: 7px; margin-top: 5px; background: var(--warning); }
.attention-dot.red { background: var(--danger); }
.attention-dot.green { background: var(--success); }
.attention-item strong { display: block; font-size: 0.66rem; line-height: 1.25; }
.attention-item span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.58rem; line-height: 1.25; }
.attention-time { color: var(--muted); font-size: 0.53rem; white-space: nowrap; }
.hero-voice { margin-top: 14px; border: 1px solid var(--ink); background: var(--ink); color: var(--white); padding: 12px; }
.hero-voice-top { display: flex; justify-content: space-between; align-items: center; gap: 15px; }
.voice-mini { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mic-square { width: 29px; height: 29px; display: grid; place-items: center; background: var(--copper); flex: 0 0 auto; }
.voice-mini p { margin: 0; font-size: 0.65rem; color: #dfe6eb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.voice-mini strong { display: block; color: var(--white); font-size: 0.7rem; }
.hero-voice .button { border-color: #6d7d8b; min-height: 32px; padding: 6px 9px; font-size: 0.61rem; background: transparent; }

.command-stage { background: var(--ink); color: var(--white); border-top: 1px solid #30485d; border-bottom: 1px solid #30485d; }
.command-shell { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 54px; align-items: center; }
.command-copy h2 { max-width: 540px; }
.command-copy p { color: #cbd5dc; max-width: 560px; }
.command-example { border: 1px solid #516474; background: #142b41; box-shadow: 16px 16px 0 rgba(255,255,255,0.05); }
.command-input { padding: 23px; border-bottom: 1px solid #516474; }
.command-label { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 17px; font-size: 0.76rem; color: #c1cbd2; }
.listening-state { display: flex; gap: 3px; align-items: end; height: 18px; }
.listening-state span { width: 3px; background: #d9a17b; animation: bars 1s ease-in-out infinite; }
.listening-state span:nth-child(1) { height: 7px; }
.listening-state span:nth-child(2) { height: 15px; animation-delay: 0.12s; }
.listening-state span:nth-child(3) { height: 10px; animation-delay: 0.24s; }
.listening-state span:nth-child(4) { height: 17px; animation-delay: 0.36s; }
.listening-state span:nth-child(5) { height: 8px; animation-delay: 0.48s; }
@keyframes bars { 0%,100% { transform: scaleY(.65); opacity:.65; } 50% { transform:scaleY(1); opacity:1; } }
.command-transcript { min-height: 84px; font-size: clamp(1.25rem, 2.4vw, 1.85rem); line-height: 1.35; margin: 0; }
.command-caret { display: inline-block; width: 2px; height: 1.1em; background: #d9a17b; vertical-align: -0.15em; animation: blink 800ms step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }
.command-result { padding: 23px; background: var(--white); color: var(--ink); }
.command-result-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 17px; margin-bottom: 17px; border-bottom: 1px solid var(--line); }
.command-result-head strong { display: block; }
.command-result-head span { color: var(--success); font-size: 0.78rem; font-weight: 800; }
.appointment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.appointment-field small { display: block; color: var(--muted); text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.62rem; font-weight: 800; margin-bottom: 4px; }
.appointment-field strong { font-size: 0.95rem; }
.confirm-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 20px; padding-top: 17px; border-top: 1px solid var(--line); }
.confirm-row p { color: var(--muted); font-size: 0.76rem; margin: 0; }

.statement-band { background: var(--copper); color: var(--white); padding: 32px 0; }
.statement-inner { display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 40px; }
.statement-inner strong { font-size: clamp(1.45rem, 2.6vw, 2.25rem); line-height: 1.2; }
.statement-inner p { margin: 0; font-size: 0.94rem; color: #f4e6dd; }

.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.feature-block { background: var(--white); padding: 29px; min-height: 240px; }
.feature-block .icon-box,
.module .icon-box { width: 42px; height: 42px; display: grid; place-items: center; background: var(--sage); margin-bottom: 27px; }
.feature-block h3 { margin-bottom: 12px; }
.feature-block p { color: var(--muted); font-size: 0.94rem; margin-bottom: 0; }
.feature-block a { display: inline-block; margin-top: 20px; font-weight: 750; font-size: 0.9rem; text-underline-offset: 4px; }

.coverage-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-dark); background: var(--line-dark); gap: 1px; }
.coverage-cell { background: var(--white); padding: 32px; min-height: 260px; }
.coverage-cell:nth-child(2), .coverage-cell:nth-child(3) { background: var(--blue-pale); }
.coverage-cell h3 { margin-bottom: 12px; }
.coverage-cell p { color: var(--muted); font-size: 0.94rem; }
.inline-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; }
.inline-list li { position: relative; padding-left: 14px; font-size: 0.84rem; color: var(--ink-2); }
.inline-list li::before { content: ""; position: absolute; width: 5px; height: 5px; background: var(--copper); left: 0; top: 0.55em; }

.live-board { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); }
.live-board-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.live-board-top h3 { margin: 0; }
.live-board-top p { margin: 3px 0 0; color: var(--muted); font-size: 0.82rem; }
.live-board-body { padding: 24px; }
.big-metrics { display: grid; grid-template-columns: repeat(6, 1fr); border: 1px solid var(--line); }
.big-metric { padding: 16px 13px; border-right: 1px solid var(--line); }
.big-metric:last-child { border-right: 0; }
.big-metric strong { display: block; font-size: 1.75rem; line-height: 1; }
.big-metric span { display: block; font-size: 0.74rem; color: var(--muted); margin-top: 8px; }
.board-columns { display: grid; grid-template-columns: 1.12fr 0.88fr; gap: 18px; margin-top: 18px; }
.board-panel { border: 1px solid var(--line); min-width: 0; }
.board-panel-title { display: flex; align-items: center; justify-content: space-between; padding: 13px 15px; border-bottom: 1px solid var(--line); }
.board-panel-title h4 { margin: 0; }
.board-table { width: 100%; border-collapse: collapse; font-size: 0.79rem; }
.board-table th { text-align: left; padding: 10px 12px; background: #edf1f2; color: var(--muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; }
.board-table td { padding: 11px 12px; border-top: 1px solid #e3e8ea; vertical-align: middle; }
.status-cell { display: inline-flex; align-items: center; gap: 7px; font-weight: 750; }
.status-square { width: 7px; height: 7px; background: var(--success); }
.status-square.orange { background: var(--warning); }
.status-square.red { background: var(--danger); }
.feed-list { padding: 4px 14px 2px; }
.feed-item { display: grid; grid-template-columns: 34px 1fr; gap: 11px; padding: 12px 0; border-bottom: 1px solid #e3e8ea; }
.feed-item:last-child { border-bottom: 0; }
.feed-icon { width: 32px; height: 32px; display: grid; place-items: center; background: var(--sage); font-weight: 800; font-size: 0.7rem; }
.feed-item p { margin: 0; font-size: 0.79rem; }
.feed-item span { display: block; color: var(--muted); font-size: 0.68rem; margin-top: 3px; }

.context-layout { display: grid; grid-template-columns: 0.72fr 1.28fr; gap: 60px; align-items: center; }
.context-list { border-left: 2px solid var(--line-dark); }
.context-item { padding: 7px 0 24px 28px; position: relative; }
.context-item::before { content: ""; position: absolute; width: 11px; height: 11px; left: -7px; top: 11px; background: var(--white); border: 2px solid var(--copper); }
.context-item h3 { font-size: 1.07rem; margin-bottom: 7px; }
.context-item p { color: var(--muted); font-size: 0.89rem; margin: 0; }
.conversation-mock { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); }
.conversation-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 17px 19px; border-bottom: 1px solid var(--line); }
.conversation-title strong { display: block; }
.conversation-title span { color: var(--muted); font-size: 0.75rem; }
.conversation-body { padding: 20px; }
.message { max-width: 86%; padding: 13px 14px; margin-bottom: 12px; border-left: 3px solid var(--line-dark); background: #edf1f2; font-size: 0.88rem; }
.message.mine { margin-left: auto; background: var(--sage); border-left-color: var(--sage-deep); }
.message small { display: block; margin-top: 6px; color: var(--muted); font-size: 0.66rem; }
.message-action { border: 1px solid var(--copper); background: #fff7f1; padding: 14px; margin-top: 18px; }
.message-action strong { display: block; }
.message-action p { margin: 4px 0 12px; color: var(--muted); font-size: 0.8rem; }
.action-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.action-tag { border: 1px solid var(--line-dark); padding: 6px 9px; font-size: 0.7rem; font-weight: 750; background: var(--white); }

.workflow { counter-reset: flow; border-top: 1px solid var(--line-dark); }
.workflow-row { counter-increment: flow; display: grid; grid-template-columns: 100px 0.75fr 1.25fr; gap: 28px; padding: 28px 0; border-bottom: 1px solid var(--line); align-items: start; }
.workflow-row::before { content: counter(flow, decimal-leading-zero); font-size: 1.25rem; font-weight: 850; color: var(--copper); }
.workflow-row h3 { margin: 0; }
.workflow-row p { margin: 0; color: var(--muted); }

.module-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); gap: 1px; background: var(--line); }
.module { background: var(--white); padding: 28px; min-height: 280px; }
.module h3 { margin-bottom: 11px; }
.module p { color: var(--muted); font-size: 0.9rem; }
.module ul { margin: 18px 0 0; padding: 0; list-style: none; }
.module li { padding: 8px 0 8px 17px; border-top: 1px solid #e3e8ea; font-size: 0.83rem; position: relative; }
.module li::before { content: ""; width: 5px; height: 5px; background: var(--copper); position: absolute; left: 0; top: 1.1em; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
.split-top { align-items: start; }
.data-table-wrap { overflow-x: auto; border: 1px solid var(--line-dark); background: var(--white); }
/* No min-width: every .data-table is a 2-column table living in a half-width
   split column. A fixed min-width forced it to overflow and show a needless
   horizontal scrollbar; width:100% lets it fill the column and wrap instead.
   (The genuinely wide 7-column plan table is .comparison-table, not this.) */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: var(--ink); color: var(--white); text-align: left; padding: 14px 16px; font-size: 0.77rem; letter-spacing: 0.05em; }
.data-table td { padding: 14px 16px; border-top: 1px solid var(--line); vertical-align: top; font-size: 0.88rem; }
.data-table td:first-child { font-weight: 800; width: 22%; }
.data-table tr:nth-child(even) td { background: #e9eef0; }

.pricing-hero { padding: 72px 0 48px; }
.pricing-controls { display: flex; align-items: center; gap: 0; margin-top: 30px; }
.billing-button { border: 1px solid var(--ink); background: transparent; padding: 10px 14px; cursor: pointer; font-weight: 750; font-size: 0.86rem; }
.billing-button + .billing-button { border-left: 0; }
.billing-button.active { background: var(--ink); color: var(--white); }
.pricing-grid { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--line-dark); background: var(--line-dark); gap: 1px; }
.price-card { background: var(--white); padding: 27px 24px; display: flex; flex-direction: column; min-height: 620px; }
.price-card.featured { background: var(--sage); }
.price-card .plan-name { font-size: 1.22rem; font-weight: 850; margin: 0 0 8px; }
.price-card .plan-desc { min-height: 75px; color: var(--muted); font-size: 0.87rem; }
.price { display: flex; align-items: end; gap: 4px; min-height: 72px; margin: 20px 0 10px; }
.price strong { font-size: 2.65rem; line-height: 1; letter-spacing: -0.04em; }
.price span { color: var(--muted); font-size: 0.78rem; margin-bottom: 5px; }
.price-note { color: var(--muted); font-size: 0.74rem; min-height: 38px; }
.price-card .button { width: 100%; margin: 18px 0 22px; }
.price-list { list-style: none; padding: 0; margin: 0; }
.price-list li { padding: 9px 0 9px 19px; border-top: 1px solid rgba(157,169,175,0.55); font-size: 0.82rem; position: relative; }
.price-list li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 7px; height: 4px; border-left: 2px solid var(--success); border-bottom: 2px solid var(--success); transform: rotate(-45deg); }
.price-card small { display: block; margin-top: auto; padding-top: 20px; color: var(--muted); font-size: 0.69rem; }
.pricing-note { margin-top: 24px; color: var(--muted); font-size: 0.82rem; }

.comparison-table { width: 100%; border-collapse: collapse; background: var(--white); border: 1px solid var(--line-dark); }
.comparison-table th { background: var(--ink); color: var(--white); text-align: center; padding: 15px 12px; font-size: 0.75rem; }
.comparison-table th:first-child { text-align: left; width: 34%; }
.comparison-table td { border-top: 1px solid var(--line); padding: 13px 12px; text-align: center; font-size: 0.82rem; }
.comparison-table td:first-child { text-align: left; font-weight: 700; }
.comparison-table tr:nth-child(even) td { background: #e9eef0; }
.check { color: var(--success); font-weight: 900; }
.dash { color: var(--line-dark); }

.faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.faq { background: var(--white); padding: 28px; }
.faq h3 { font-size: 1.05rem; }
.faq p { color: var(--muted); font-size: 0.9rem; margin: 0; }

.about-hero { padding: 86px 0; }
.about-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; }
.origin-card { background: var(--ink); color: var(--white); padding: 42px; position: relative; }
.origin-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--copper); }
.origin-card blockquote { margin: 0; font-size: 1.55rem; line-height: 1.35; font-weight: 750; }
.origin-card p { margin: 28px 0 0; color: #c8d1d8; font-size: 0.88rem; }
.principles { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--line); background: var(--line); gap: 1px; }
.principle { background: var(--white); padding: 30px; min-height: 235px; }
.principle strong { display: block; color: var(--copper-dark); font-size: 0.83rem; letter-spacing: 0.08em; margin-bottom: 18px; }
.principle p { color: var(--muted); font-size: 0.92rem; margin: 0; }

.credibility-strip { background: var(--ink-2); color: var(--white); padding: 0; border-top: 1px solid #385067; border-bottom: 1px solid #385067; }
.credibility-grid { display: grid; grid-template-columns: 1.2fr 0.8fr 1fr; }
.credibility-intro, .credibility-item { padding: 28px 30px; border-right: 1px solid #40576b; }
.credibility-item:last-child { border-right: 0; }
.credibility-intro strong { display: block; font-size: 1.18rem; margin-bottom: 5px; }
.credibility-intro span, .credibility-item span { display: block; color: #c9d3da; font-size: 0.84rem; line-height: 1.45; }
.credibility-item strong { display: block; font-size: 2rem; line-height: 1; color: #f0c09f; margin-bottom: 8px; letter-spacing: -0.04em; }

.co-design-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); }
.co-design-card { background: var(--white); padding: 38px; min-height: 390px; }
.co-design-card:nth-child(even) { background: #f7f6f1; }
.co-design-role { display: block; color: var(--copper-dark); font-size: 0.76rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 18px; }
.co-design-stat { display: block; font-size: clamp(2.4rem, 5vw, 4.1rem); line-height: 0.95; letter-spacing: -0.055em; margin-bottom: 24px; }
.co-design-card h3 { max-width: 470px; }
.co-design-card p { color: var(--muted); font-size: 0.93rem; }
.co-design-card p:last-child { margin-bottom: 0; }

.partner-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 70px; align-items: center; }
.partner-summary { background: var(--ink); color: var(--white); padding: 38px; border-left: 7px solid var(--copper); }
.partner-summary strong { display: block; font-size: 1.45rem; line-height: 1.25; margin-bottom: 18px; }
.partner-summary p { color: #c8d1d8; margin-bottom: 0; }
.partner-types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.partner-type { background: var(--white); padding: 32px; min-height: 250px; }
.partner-type h3 { font-size: 1.2rem; }
.partner-type p { color: var(--muted); font-size: 0.92rem; }
.partner-type ul { margin: 0; padding-left: 19px; color: var(--ink-2); font-size: 0.86rem; }
.partner-type li { margin: 6px 0; }
.partner-fit { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 65px; align-items: start; }
.fit-list { border-top: 1px solid var(--line-dark); }
.fit-row { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.fit-row strong { color: var(--copper-dark); }
.fit-row h3 { font-size: 1.05rem; margin-bottom: 7px; }
.fit-row p { color: var(--muted); font-size: 0.9rem; margin: 0; }
.program-panel { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); padding: 38px; }
.program-panel h3 { font-size: 1.45rem; }
.program-panel ul { padding-left: 20px; color: var(--ink-2); }
.program-panel li { margin: 10px 0; }
.program-panel .button { margin-top: 10px; }
.application-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.application-step { background: var(--white); padding: 28px; min-height: 245px; }
.application-step strong { display: block; color: var(--copper-dark); font-size: 0.78rem; letter-spacing: 0.1em; margin-bottom: 18px; }
.application-step h3 { font-size: 1.12rem; }
.application-step p { color: var(--muted); font-size: 0.88rem; margin: 0; }

.contact-layout { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 64px; align-items: start; }
.contact-details { border-top: 1px solid var(--line-dark); }
.contact-item { padding: 22px 0; border-bottom: 1px solid var(--line); }
.contact-item h3 { font-size: 1rem; margin-bottom: 7px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: 0.9rem; margin: 0; }
.contact-form { background: var(--white); border: 1px solid var(--line-dark); padding: 34px; box-shadow: var(--shadow); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; }
.form-field { display: flex; flex-direction: column; gap: 7px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 750; font-size: 0.83rem; }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1px solid #7a848c; /* darker than --line-dark so the input control boundary clears WCAG 1.4.11 3:1 on the #fbfbf8 field (2026-07-16 audit) */
  border-radius: 0;
  background: #fbfbf8;
  color: var(--ink);
  padding: 12px 13px;
  outline: none;
}
.form-field textarea { min-height: 145px; resize: vertical; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--copper); box-shadow: 0 0 0 3px rgba(168,95,53,0.35); }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; }
.form-actions p { margin: 0; color: var(--muted); font-size: 0.72rem; }
.form-status { margin-top: 17px; padding: 12px 14px; border-left: 4px solid var(--success); background: var(--sage); display: none; font-size: 0.86rem; }
.form-status.show { display: block; }
/* honeypot: hidden from people, tempting to bots. submit.ashx drops any POST with it set */
.honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.legal-hero { padding: 72px 0 40px; }
.legal-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 70px; align-items: start; }
.legal-nav { position: sticky; top: 100px; border-top: 1px solid var(--line-dark); }
.legal-nav a { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 0.85rem; font-weight: 700; }
.legal-content h2 { font-size: 1.7rem; margin-top: 44px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: 1.1rem; margin-top: 28px; }
.legal-content p, .legal-content li { color: var(--ink-2); font-size: 0.94rem; }
.legal-content ul { padding-left: 22px; }
.notice { border-left: 5px solid var(--copper); background: var(--white); padding: 17px 19px; margin: 26px 0; }
.notice p { margin: 0; }

.cta-section { background: var(--ink); color: var(--white); padding: 72px 0; }
.cta-inner { display: grid; grid-template-columns: 1fr auto; gap: 45px; align-items: center; }
.cta-inner h2 { font-size: clamp(2rem, 4vw, 3.4rem); max-width: 800px; }
.cta-inner p { color: #c9d3da; max-width: 720px; margin: 0; }

.site-footer { background: #0b1b2a; color: var(--white); padding: 62px 0 25px; }
.footer-grid { display: grid; grid-template-columns: minmax(220px, 1.25fr) repeat(5, minmax(0, 0.68fr)); gap: 30px; }
.footer-brand p { color: #aebcc6; max-width: 410px; font-size: 0.88rem; margin-top: 21px; }
.footer-column h3 { font-size: 0.83rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 18px; }
.footer-column a { display: block; color: #bdc8cf; text-decoration: none; font-size: 0.84rem; padding: 5px 0; }
.footer-column a:hover { color: var(--white); }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 25px; border-top: 1px solid #304254; margin-top: 46px; padding-top: 22px; color: #95a5b0; font-size: 0.75rem; }
.footer-legal { display: flex; gap: 18px; }
.footer-legal a { color: inherit; }

/* Scroll-reveal is a progressive enhancement: only hide (and later animate) when JS is
   present, so the class is added to <html> by an inline head script. Without JS the
   content is simply visible; no section ever ends up blank. */
.reveal { transition: opacity 550ms ease, transform 550ms ease; }
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
  .js .reveal { opacity: 1; transform: none; }
}

@media (max-width: 1080px) {
  /* minmax(0, 1fr) lets long localized labels shrink inside the single-column
     hero instead of making the grid wider than a phone viewport. */
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > * { min-width: 0; }
  .hero-copy { max-width: 850px; }
  .product-window { width: 100%; max-width: 850px; }
  .command-shell, .context-layout { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr 1fr; }
  .price-card { min-height: 0; }
  .big-metrics { grid-template-columns: repeat(3, 1fr); }
  .big-metric:nth-child(3) { border-right: 0; }
  .big-metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .module-grid { grid-template-columns: 1fr 1fr; }
  .credibility-grid { grid-template-columns: 1fr 1fr; }
  .credibility-intro { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #40576b; }
  .application-steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1220px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-grid > * { min-width: 0; }
  .hero-copy { max-width: 850px; }
  .product-window { width: 100%; max-width: 850px; }
}

@media (max-width: 880px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: flex; justify-self: end; }
  .header-actions .button { display: none; }
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .nav-links {
    position: fixed;
    inset: 74px 0 auto 0;
    display: none;
    background: var(--paper);
    border-bottom: 1px solid var(--line-dark);
    padding: 18px 20px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .nav-links .nav-mobile-contact { display: block; color: var(--white); font-weight: 700; }
  .section-intro, .statement-inner, .split, .about-grid, .contact-layout, .cta-inner, .partner-hero-grid, .partner-fit { grid-template-columns: minmax(0, 1fr); }
  .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
  .operations-grid, .board-columns { grid-template-columns: 1fr; }
  .workflow-row { grid-template-columns: 72px 1fr; }
  .workflow-row p { grid-column: 2; }
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .legal-layout { grid-template-columns: 1fr; gap: 35px; }
  .legal-nav { position: static; display: flex; flex-wrap: wrap; gap: 0 20px; }
  .legal-nav a { min-width: 180px; }
}

@media (max-width: 650px) {
  body { font-size: 16px; }
  .container, .header-inner { width: auto; max-width: var(--max); margin-left: 14px; margin-right: 14px; }
  .narrow { width: auto; max-width: 850px; margin-left: 14px; margin-right: 14px; }
  section { padding: 68px 0; }
  .hero { padding: 52px 0 54px; }
  h1, .hero-copy h1 { font-size: 2.25rem; }
  h2 { font-size: 2.05rem; }
  .product-body { grid-template-columns: 1fr; }
  .product-sidebar { display: none; }
  .product-main { padding: 16px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric:nth-child(2) { border-right: 0; }
  .metric:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .operations-grid { display: block; }
  .attention-panel { margin-top: 12px; }
  .appointment-grid, .coverage-grid, .grid-3, .grid-4, .module-grid, .pricing-grid, .faq-grid, .principles, .form-grid, .co-design-grid, .partner-types, .application-steps, .credibility-grid { grid-template-columns: minmax(0, 1fr); }
  .form-field.full { grid-column: auto; }
  .credibility-intro { grid-column: auto; }
  .credibility-intro, .credibility-item { border-right: 0; border-bottom: 1px solid #40576b; padding: 24px 20px; }
  .credibility-item:last-child { border-bottom: 0; }
  .co-design-card, .partner-type, .program-panel { padding: 28px 22px; min-height: 0; }
  .fit-row { grid-template-columns: 58px 1fr; }
  .big-metrics { grid-template-columns: repeat(2, 1fr); }
  .big-metric { border-bottom: 1px solid var(--line); }
  .big-metric:nth-child(2n) { border-right: 0; }
  .big-metric:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .big-metric:nth-last-child(-n+2) { border-bottom: 0; }
  .workflow-row { grid-template-columns: 54px 1fr; gap: 15px; }
  .inline-list { grid-template-columns: 1fr; }
  .price-card { min-height: 0; }
  .contact-form { padding: 23px 18px; }
  .form-actions, .footer-bottom { align-items: flex-start; flex-direction: column; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 35px; }
  .footer-brand { grid-column: 1 / -1; }
  .command-example { box-shadow: 8px 8px 0 rgba(255,255,255,.05); }
  .command-input, .command-result { padding: 18px; }
  .command-result-head, .confirm-row { align-items: flex-start; flex-direction: column; }
  .statement-inner { gap: 12px; }
  .board-table th:nth-child(3), .board-table td:nth-child(3) { display: none; }
}

/* Pricing structure: connected access without per-user gating */
.pricing-principle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--line-dark);
  background: var(--line-dark);
  gap: 1px;
}
.pricing-principle > div { background: var(--white); padding: 28px 30px; }
.pricing-principle strong { display: block; font-size: 1.2rem; margin-bottom: 8px; }
.pricing-principle p { margin: 0; color: var(--muted); font-size: 0.92rem; }
.plan-fit { margin: 0 0 12px; color: var(--copper-dark); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.04em; }
.connect-plan {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  border: 1px solid var(--line-dark);
  background: var(--white);
}
.connect-plan-price { padding: 34px; border-right: 1px solid var(--line); background: var(--ink); color: var(--white); }
.connect-plan-price .plan-name { font-size: 1.45rem; font-weight: 850; margin: 0 0 7px; }
.connect-plan-price .plan-fit, .connect-plan-price .price span, .connect-plan-price .price-note { color: #cbd5dc; }
.connect-plan-price .button { width: 100%; margin-top: 15px; }
.connect-plan-details { padding: 34px 38px; }
.connect-plan-details h3 { max-width: 680px; }
.connect-feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 34px; }
.connect-note { margin: 24px 0 0; padding: 17px 18px; border-left: 4px solid var(--copper); background: #f7f3ec; color: var(--muted); font-size: 0.84rem; }
.connect-note strong { color: var(--ink); }
.enterprise-plan { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 70px; align-items: center; }
.enterprise-plan > * { min-width: 0; }
.enterprise-price { display: flex; align-items: baseline; gap: 14px; margin-bottom: 24px; }
.enterprise-price strong { font-size: 3.25rem; line-height: 1; }
.enterprise-price span { color: #c9d3da; font-size: 0.85rem; }
.enterprise-list { list-style: none; padding: 0; margin: 0 0 28px; }
.enterprise-list li { position: relative; padding: 10px 0 10px 21px; border-top: 1px solid #33495c; color: #dce4e9; font-size: 0.9rem; }
.enterprise-list li::before { content: ""; position: absolute; left: 0; top: 1.12em; width: 7px; height: 4px; border-left: 2px solid #86aa9b; border-bottom: 2px solid #86aa9b; transform: rotate(-45deg); }
.pricing-comparison { min-width: 1040px; }
.pricing-comparison th:first-child { width: 29%; }
.pricing-comparison th, .pricing-comparison td { padding-left: 10px; padding-right: 10px; }

@media (max-width: 1080px) {
  .connect-plan, .enterprise-plan { grid-template-columns: 1fr; }
  .connect-plan-price { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 650px) {
  .pricing-principle, .connect-feature-grid { grid-template-columns: 1fr; }
  .pricing-principle > div { padding: 24px 21px; }
  .connect-plan-price, .connect-plan-details { padding: 27px 22px; }
  .enterprise-plan { gap: 34px; }
}

/* ============================================================
   JOBSITE OPERATIONS CONSOLE: identity overrides
   Layered on top of the legacy rules above (which keep the layout).
   Concentrated here so the reskin is easy to review and revert.
   Palette lives in :root. Dark grounds become blueprint navy with a
   faint drafting grid; eyebrow labels become monospace telemetry;
   the header is a dark control bar; burnt orange is action-only.
   ============================================================ */
:root {
  /* two layered grids (minor + major) read like engineering paper */
  --bp-grid:
    linear-gradient(rgba(124, 195, 234, .022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 195, 234, .022) 1px, transparent 1px),
    linear-gradient(rgba(124, 195, 234, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124, 195, 234, .045) 1px, transparent 1px);
  --bp-grid-size: 28px 28px, 28px 28px, 140px 140px, 140px 140px;
}

/* blueprint grounds + grid on the full-bleed dark sections.
   background-color/background-image longhand is used deliberately so the
   grid image is not wiped by the legacy `background:` shorthand above. */
.hero:has(.hero-grid),
.section-dark,
.command-stage,
.statement-band,
.credibility-strip,
.cta-section,
.site-footer {
  background-image: var(--bp-grid);
  background-size: var(--bp-grid-size);
}
.hero:has(.hero-grid), .section-dark, .command-stage { background-color: var(--blue-850); }
.statement-band, .credibility-strip, .cta-section { background-color: var(--blue-800); }
.site-footer { background-color: var(--blue-900); }

/* the blueprint hero is reserved for heroes that carry the live board (they have
   a .hero-grid). Text-only heroes (platform, contact, security, 404) fall back to
   their light section-white surface, else the empty half reads as dead dark space. */
.hero:has(.hero-grid) { color: var(--on-blue); }
.hero:has(.hero-grid) .lead { color: var(--on-blue-soft); }
.hero:has(.hero-grid) .hero-note { color: var(--on-blue-soft); }

/* Light-surface panels and cards assert their own dark text. Otherwise, when
   nested inside a blueprint section whose color is light-on-dark, their
   un-colored inner text (headings, metric numerals, table cells) inherits that
   light color and vanishes on the white surface. Covers every white/tinted card
   that can appear in a dark section; genuinely dark panels (origin-card,
   connect-plan-price, partner-summary) keep their own light text and are absent. */
.product-window,
.live-board,
.conversation-mock,
.data-table,
.comparison-table,
.program-panel,
.feature-block,
.coverage-cell,
.module,
.faq,
.principle,
.co-design-card,
.partner-type,
.price-card,
.application-step,
.contact-form,
.notice,
.message,
.connect-plan-details,
.pricing-principle > div { color: var(--ink); }

/* secondary/ghost buttons on blueprint grounds need light text + line
   (their default navy text and navy border vanish on navy) */
.hero:has(.hero-grid) .button-secondary,
.section-dark .button-secondary,
.command-stage .button-secondary,
.statement-band .button-secondary,
.cta-section .button-secondary {
  color: var(--on-blue);
  border-color: var(--line-blue);
}
.hero:has(.hero-grid) .button-secondary:hover,
.section-dark .button-secondary:hover,
.command-stage .button-secondary:hover,
.cta-section .button-secondary:hover {
  background: rgba(255, 255, 255, .05);
  border-color: var(--cyan);
  color: var(--cyan);
}

/* eyebrow/kicker -> monospace telemetry label with a burnt tick */
.kicker {
  font-family: var(--mono);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.kicker::before { content: ""; width: 22px; height: 2px; background: var(--copper); }
.hero:has(.hero-grid) .kicker,
.section-dark .kicker,
.command-stage .kicker,
.statement-band .kicker,
.cta-section .kicker { color: var(--cyan); }

/* monospace numerals + data labels reinforce the instrumentation feel */
.metric strong, .big-metric strong, .price strong, .co-design-stat,
.credibility-item strong, .enterprise-price strong,
.metric span, .big-metric span, .board-table th, .appointment-field small,
.co-design-role, .application-step strong, .fit-row strong, .plan-fit {
  font-family: var(--mono);
}
.credibility-item strong { color: var(--cyan); }
.statement-inner p { color: var(--on-blue-soft); }
/* signal green is tuned for status fills; as small text on light it misses AA,
   so green-as-text usages get a darker green (fills keep the bright --success) */
.check, .status-live { color: #12764c; }
.listening-state span, .command-caret { background: var(--cyan); }
.co-design-card:nth-child(even) { background: #eef1f3; }

/* header: dark control bar, monospace nav, burnt action button */
.site-header { background: var(--blue-900); border-bottom: 1px solid var(--line-blue); }
.site-header .brand { color: var(--on-blue); }
.nav-links a {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 500;
  color: var(--on-blue-soft);
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"] { color: var(--cyan); border-bottom-color: var(--cyan); }
.header-actions .button { background: var(--copper); border-color: var(--copper); color: #fff; }
.header-actions .button:hover { background: var(--copper-dark); border-color: var(--copper-dark); }
.menu-toggle { border-color: var(--line-blue); }
.menu-toggle span,
.menu-toggle span::before,
.menu-toggle span::after { background: var(--on-blue); }

/* footer: monospace column heads, cyan link hover */
.footer-column h4 { font-family: var(--mono); color: var(--cyan); }
.footer-column a:hover { color: var(--cyan); }
.footer-bottom { border-top-color: var(--line-blue); }

/* mobile nav drops down over the dark header */
@media (max-width: 880px) {
  .nav-links { background: var(--blue-900); border-bottom-color: var(--line-blue); }
  .nav-links a { border-bottom-color: var(--line-blue); }
}

/* ---- group communication (project channel) visual ---- */
.chan { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); color: var(--ink); position: relative; min-width: 0; }
.chan::before, .chan::after { content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; }
.chan::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.chan::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.chan-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.chan-title { display: flex; align-items: center; gap: 11px; min-width: 0; }
.chan-hash { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--ink); color: var(--on-blue); font-family: var(--mono); font-weight: 700; font-size: 1rem; }
.chan-name strong { display: block; font-size: 0.92rem; letter-spacing: -0.01em; }
.chan-name small { display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.chan-people { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.chan-avatars { display: flex; }
.chan-avatars i { width: 25px; height: 25px; margin-left: -7px; display: grid; place-items: center; background: var(--sage); color: var(--ink); font-size: 0.58rem; font-weight: 800; font-style: normal; border: 2px solid var(--white); }
.chan-avatars i:first-child { margin-left: 0; }
.chan-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; color: #12764c; }
.chan-live::before { content: ""; width: 7px; height: 7px; background: var(--success); }
.chan-body { padding: 16px; display: grid; gap: 15px; }
.chan-msg { display: grid; grid-template-columns: 30px 1fr; gap: 11px; min-width: 0; }
.chan-msg .av { width: 30px; height: 30px; display: grid; place-items: center; font-size: 0.62rem; font-weight: 800; color: #fff; }
.role-sup { background: #157a52; }
.role-owner { background: var(--ink-2); }
.role-sub { background: #2f68b0; }
.chan-msg .who { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.chan-msg .who b { font-size: 0.82rem; }
.chan-msg .who em { font-style: normal; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); }
.chan-msg .who time { font-family: var(--mono); font-size: 0.6rem; color: var(--muted); }
.chan-msg .txt { font-size: 0.85rem; color: var(--ink-2); line-height: 1.5; margin: 0; }
.chan-msg .txt .mention { color: var(--copper-dark); font-weight: 700; }
.sms-badge { font-family: var(--mono); font-size: 0.52rem; letter-spacing: 0.08em; padding: 2px 5px; background: var(--blue-pale); color: var(--ink-2); }
.chan-photo { margin-top: 8px; display: inline-flex; align-items: center; gap: 9px; border: 1px solid var(--line); padding: 6px 9px; background: #f3f6f7; font-family: var(--mono); font-size: 0.64rem; color: var(--muted); }
.chan-photo span { width: 32px; height: 24px; background: var(--blue-700); flex: 0 0 auto; }
.chan-read { font-family: var(--mono); font-size: 0.58rem; color: #12764c; margin-top: 5px; }
.chan-action { border: 1px solid var(--copper); background: #fdf3ec; padding: 12px 13px; margin-left: 41px; }
.chan-action strong { display: block; font-size: 0.82rem; }
.chan-action p { margin: 3px 0 11px; color: var(--muted); font-size: 0.78rem; }
.chan-composer { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-top: 1px solid var(--line); background: #fafbfb; }
.chan-composer .mic { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; background: var(--copper); }
.chan-composer .field { flex: 1; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); min-width: 0; }
.chan-composer .chan-send { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: var(--copper-dark); }

/* ---- footer feedback band (bug / wish) ---- */
.footer-feedback { display: flex; align-items: center; justify-content: space-between; gap: 22px 40px; flex-wrap: wrap; margin-top: 44px; padding-top: 26px; border-top: 1px solid var(--line-blue); }
.footer-feedback strong { display: block; font-size: 1rem; color: var(--on-blue); letter-spacing: -0.01em; }
.footer-feedback p { margin: 6px 0 0; color: var(--on-blue-soft); font-size: 0.86rem; max-width: 60ch; }
.footer-feedback-links { display: flex; gap: 12px; flex: 0 0 auto; flex-wrap: wrap; }
.footer-feedback-links a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 0.73rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--on-blue); border: 1px solid var(--line-blue); padding: 11px 15px; }
.footer-feedback-links a:hover { border-color: var(--cyan); color: var(--cyan); }
.footer-feedback + .footer-bottom { margin-top: 26px; }

/* ---- field app (mobile) visual: shows large-text / glove-friendly field UI ---- */
.field-app { max-width: 300px; margin: 0 auto; background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); color: var(--ink); position: relative; }
.field-app::before, .field-app::after { content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; }
.field-app::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.field-app::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.fa-bar { display: flex; align-items: center; justify-content: space-between; padding: 11px 14px; background: var(--ink); color: var(--on-blue); font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.05em; }
.fa-size { display: flex; align-items: stretch; border: 1px solid #46607e; }
.fa-size b { display: grid; place-items: center; min-width: 24px; padding: 3px 0; font-family: var(--mono); font-weight: 700; border-right: 1px solid #46607e; line-height: 1; }
.fa-size b:nth-child(1) { font-size: 0.56rem; }
.fa-size b:nth-child(2) { font-size: 0.68rem; }
.fa-size b:nth-child(3) { font-size: 0.82rem; border-right: 0; }
.fa-size b.on { background: var(--copper); color: #fff; }
.fa-body { padding: 17px 16px; }
.fa-day { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.fa-job { font-size: 1.25rem; font-weight: 850; letter-spacing: -0.02em; margin: 5px 0 2px; }
.fa-when { color: var(--ink-2); font-size: 1rem; margin-bottom: 15px; }
.fa-when b { color: var(--copper-dark); }
.fa-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 6px; }
.fa-btn { padding: 15px 10px; text-align: center; font-weight: 800; font-size: 0.98rem; border: 1px solid var(--ink); }
.fa-btn.primary { background: var(--copper); border-color: var(--copper); color: #fff; }
.fa-tasklabel { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 18px 0 4px; }
.fa-task { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 1.02rem; font-weight: 650; }
.fa-check { width: 24px; height: 24px; border: 2px solid var(--line-dark); display: grid; place-items: center; }
.fa-check.done { background: var(--success); border-color: var(--success); color: #fff; }
.fa-task.done span { color: var(--muted); text-decoration: line-through; font-weight: 550; }
.fa-voice { display: flex; align-items: center; gap: 11px; margin: 15px -16px -17px; padding: 13px 16px; background: var(--ink); }
.fa-voice .mic { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; background: var(--copper); }
.fa-voice span { font-family: var(--mono); font-size: 0.72rem; color: var(--on-blue-soft); }

/* shared console-panel corner ticks + light-surface dark text for the new visuals */
.sched, .est { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); color: var(--ink); position: relative; min-width: 0; }
.sched::before, .est::before, .sched::after, .est::after { content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; }
.sched::before, .est::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.sched::after, .est::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }

/* ---- schedule / crew board ---- */
.sched-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--ink); color: var(--on-blue); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; }
.sched-top b { color: #fff; }
.sched-top .status-live { color: var(--live-d); font-size: 0.6rem; }
.sched-head { display: grid; grid-template-columns: 116px repeat(5, 1fr); border-bottom: 1px solid var(--line); }
.sched-head span { padding: 8px 6px; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: center; border-left: 1px solid var(--line); }
.sched-head span:first-child { border-left: 0; text-align: left; padding-left: 12px; }
.sched-row { display: grid; grid-template-columns: 116px 1fr; border-bottom: 1px solid #eef1f2; }
.sched-row:last-child { border-bottom: 0; }
.sched-res { padding: 11px 12px; font-size: 0.75rem; font-weight: 650; }
.sched-res small { display: block; font-family: var(--mono); font-size: 0.52rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }
.sched-lane { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 8px; border-left: 1px solid var(--line); }
.sched-bar { display: flex; align-items: center; padding: 7px 8px; font-size: 0.6rem; font-weight: 700; color: #fff; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sched-bar.j1 { background: var(--blue-700); }
.sched-bar.j2 { background: var(--sage-deep); }
.sched-bar.j3 { background: #2f68b0; }
.sched-bar.late { background: var(--warning); color: #14202c; }
.sched-bar.idle { background: transparent; color: var(--muted); border: 1px dashed var(--line-dark); font-weight: 600; }

/* ---- estimate / margin ---- */
.est-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.est-top .est-kicker { display: block; font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.est-top strong { font-size: 0.95rem; letter-spacing: -0.01em; }
.est-status { flex: 0 0 auto; font-family: var(--mono); font-size: 0.56rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700; color: #12764c; border: 1px solid #bfe0cf; padding: 4px 8px; }
.est-rows { padding: 4px 16px; }
.est-row { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 10px 0; align-items: baseline; }
.est-rows .est-row { border-top: 1px solid #eef1f2; }
.est-rows .est-row:first-child { border-top: 0; }
.est-row .d { font-size: 0.82rem; }
.est-row .d small { display: block; font-family: var(--mono); font-size: 0.54rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 2px; }
.est-row .a { font-family: var(--mono); font-size: 0.8rem; font-weight: 700; }
.est-sum { padding: 8px 16px 4px; border-top: 2px solid var(--ink); }
.est-sum .est-row { padding: 6px 0; }
.est-sum .d { color: var(--muted); font-size: 0.8rem; }
.est-total .d { color: var(--ink); font-weight: 800; }
.est-total .a { font-size: 1.02rem; }
.est-margin { margin: 6px 16px 16px; padding: 12px 13px; background: #f3f6f7; border-left: 3px solid var(--success); }
.est-margin-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.est-margin-top span { font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.est-margin-top strong { font-family: var(--mono); font-size: 1.05rem; color: #12764c; }
.est-track { height: 6px; background: #dde4e8; margin-top: 9px; }
.est-track span { display: block; height: 100%; background: var(--success); }

/* ---- Duxor IQ: scenario library + phased roadmap ---- */
.iq-hero { padding-top: clamp(58px, 8vw, 100px); padding-bottom: clamp(50px, 7vw, 86px); }
.iq-hero h1 { max-width: 17ch; }
.iq-hero .lead { max-width: 68ch; }

/* hero formula: the 01 scenario -> 02 response -> 03 magic reading of every row */
.iq-formula { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-blue); border: 1px solid var(--line-blue); margin-top: 40px; }
.iq-formula > div { background: var(--blue-800); padding: 20px 22px; }
.iq-formula strong { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); margin-bottom: 9px; }
.iq-formula p { margin: 0; color: var(--on-blue-soft); font-size: 0.88rem; line-height: 1.55; }

/* phase tiers: V1 available / V2 planned / Future vision */
.iq-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); box-shadow: var(--shadow); }
.iq-phase { background: var(--white); padding: clamp(22px, 3vw, 32px); }
.iq-phase-top { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; }
.iq-count { font-family: var(--mono); font-size: clamp(2rem, 3.4vw, 2.7rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); }
.iq-phase h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 2vw, 1.5rem); }
.iq-phase p { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.62; }

/* status pill, shared by the phase cards and the table rows */
.iq-pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line); white-space: nowrap; }
.iq-pill::before { content: ""; width: 7px; height: 7px; flex: 0 0 auto; }
.iq-pill.v1 { color: #12764c; border-color: #bfe0cf; background: #eaf5ef; }
.iq-pill.v1::before { background: var(--success); }
.iq-pill.v2 { color: #1f4f74; border-color: #bcd3e6; background: #e9f1f8; }
.iq-pill.v2::before { background: var(--route); }
.iq-pill.future { color: #8a5320; border-color: #e6cdaf; background: #f7efe4; }
.iq-pill.future::before { background: var(--warning); }

/* filter + search toolbar (JS-only: without JS the whole table shows, so the
   inert controls are hidden rather than sitting there dead) */
.iq-toolbar { display: none; position: sticky; top: 74px; z-index: 20; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding: 12px; background: var(--white); border: 1px solid var(--line-dark); box-shadow: 0 12px 30px rgba(6, 18, 32, 0.09); }
.js .iq-toolbar { display: flex; }
.iq-filters { display: flex; flex-wrap: wrap; gap: 7px; }
.iq-filter { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700; color: var(--ink); background: var(--white); border: 1px solid var(--line-dark); padding: 9px 13px; cursor: pointer; }
.iq-filter:hover { border-color: var(--ink); }
.iq-filter.active { background: var(--ink); color: var(--white); border-color: var(--ink); }
.iq-filter:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.iq-search { flex: 0 1 320px; min-width: 200px; }
.iq-search input { width: 100%; min-height: 42px; padding: 10px 12px; border: 1px solid var(--line-dark); background: var(--white); color: var(--ink); font: inherit; font-size: 0.9rem; }
.iq-search input::placeholder { color: var(--muted); }
.iq-search input:focus-visible { outline: 2px solid var(--copper); outline-offset: 1px; border-color: var(--ink); }

/* scenario table */
.iq-table-wrap { border: 1px solid var(--line-dark); background: var(--white); overflow-x: auto; }
.iq-table { width: 100%; min-width: 820px; border-collapse: collapse; }
.iq-table thead th { background: var(--ink); color: var(--on-blue); text-align: left; padding: 13px 15px; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 600; }
.iq-table td { padding: 16px 15px; border-top: 1px solid var(--line); vertical-align: top; color: var(--muted); font-size: 0.9rem; line-height: 1.6; }
.iq-table tbody tr:hover td { background: #eef2f4; }
.iq-col-phase { width: 132px; }
.iq-col-scenario { width: 340px; }
.iq-col-solution { width: 30%; }
.iq-scenario { display: grid; grid-template-columns: 26px 1fr; gap: 12px; }
.iq-num { font-family: var(--mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--copper-dark); padding-top: 2px; }
.iq-scenario strong { display: block; color: var(--ink); font-size: 0.98rem; line-height: 1.35; letter-spacing: -0.01em; }
.iq-scenario p { margin: 6px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.55; }
.iq-solution { color: var(--ink-2); }
.iq-magic-cell { color: var(--ink); font-weight: 600; }
.iq-empty { display: none; padding: 40px; text-align: center; color: var(--muted); border: 1px solid var(--line-dark); border-top: 0; background: var(--white); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.04em; }
.iq-empty.visible { display: block; }

/* magic band tiers (on the dark section) */
.iq-magic { display: grid; }
.iq-magic-item { display: grid; grid-template-columns: 116px 1fr; gap: 28px; padding: 22px 0; border-top: 1px solid var(--line-blue); align-items: start; }
.iq-magic-item:last-child { border-bottom: 1px solid var(--line-blue); }
.iq-magic-tier { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); padding-top: 3px; }
.iq-magic-item h3 { margin: 0 0 7px; color: var(--white); font-size: 1.2rem; }
.iq-magic-item p { margin: 0; color: var(--on-blue-soft); font-size: 0.94rem; line-height: 1.6; }

/* product-direction note */
.iq-note { max-width: 900px; color: var(--muted); font-size: 0.86rem; line-height: 1.65; border-left: 3px solid var(--copper); padding-left: 20px; }
.iq-note strong { color: var(--ink); }

@media (max-width: 880px) {
  .iq-phases, .iq-formula { grid-template-columns: 1fr; }
  .iq-toolbar { position: static; }
  .iq-search { flex-basis: auto; min-width: 0; width: 100%; }
  .iq-table-wrap { border: 0; overflow: visible; background: transparent; }
  /* the table must become a block, not stay display:table, or its grid tbody
     computes to a shrink-wrapped ~half width instead of filling the container. */
  .iq-table { display: block; min-width: 0; }
  .iq-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
  .iq-table tbody { display: grid; gap: 14px; }
  .iq-table tr { display: block; border: 1px solid var(--line-dark); background: var(--white); box-shadow: 0 10px 26px rgba(6, 18, 32, 0.06); }
  .iq-table td { display: block; border-top: 0; }
  .iq-table td + td { border-top: 1px solid var(--line); }
  .iq-table td::before { content: attr(data-label); display: block; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
  .iq-magic-item { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Duxor disaster-avoidance scenarios (before / after cases) ---- */
/* hero reading key: how each case is structured */
.dz-legend { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-blue); border: 1px solid var(--line-blue); margin-top: 40px; }
.dz-legend > div { background: var(--blue-800); padding: 18px 20px; }
.dz-legend strong { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cyan); margin-bottom: 8px; }
.dz-legend p { margin: 0; color: var(--on-blue-soft); font-size: 0.88rem; line-height: 1.5; }

.dz-cases { display: grid; gap: 26px; }
/* each case is a blueprint console panel with cyan corner ticks */
.dz-case { background: var(--white); border: 1px solid var(--line-dark); box-shadow: var(--shadow); position: relative; }
.dz-case::before, .dz-case::after { content: ""; position: absolute; width: 12px; height: 12px; z-index: 2; }
.dz-case::before { top: -1px; left: -1px; border-top: 2px solid var(--cyan); border-left: 2px solid var(--cyan); }
.dz-case::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cyan); border-right: 2px solid var(--cyan); }
.dz-case-head { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: baseline; padding: 20px 22px 16px; }
.dz-num { font-family: var(--mono); font-size: 1.05rem; font-weight: 700; color: var(--copper-dark); letter-spacing: -0.02em; }
.dz-case-head h3 { margin: 0; font-size: clamp(1.18rem, 1.9vw, 1.45rem); letter-spacing: -0.02em; }
.dz-label { display: block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 7px; }
/* situation is the neutral setup, kept on the white "head" zone; grey is reserved for the
   without-Duxor failure path so the two are not confused (they read as one block otherwise). */
.dz-situation { padding: 15px 22px; border-top: 1px solid var(--line); background: var(--white); }
.dz-situation .dz-label { color: var(--muted); }
.dz-situation p { margin: 0; color: var(--ink-2); font-size: 0.92rem; line-height: 1.55; }
/* the contrast: a recessed "without" world beside the bright, cyan-marked "with Duxor" world */
.dz-split { display: grid; grid-template-columns: 1fr 1fr; }
.dz-col { padding: 18px 22px; border-top: 1px solid var(--line); }
.dz-col p { margin: 0; color: var(--ink-2); font-size: 0.9rem; line-height: 1.58; }
.dz-without { background: #eceff2; }
.dz-without .dz-label { color: var(--muted); }
.dz-with { background: var(--white); border-left: 1px solid var(--line); position: relative; }
.dz-with::before { content: ""; position: absolute; left: -1px; top: 0; bottom: 0; width: 3px; background: var(--cyan); }
.dz-with .dz-label { color: #15618f; }
/* the payoff: a dark blueprint resolution bar */
.dz-avoided { display: grid; grid-template-columns: auto 1fr; gap: 15px; align-items: baseline; padding: 15px 22px; background-color: var(--ink); background-image: var(--bp-grid); background-size: var(--bp-grid-size); }
.dz-avoided b { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cyan); white-space: nowrap; }
.dz-avoided span { color: var(--on-blue); font-size: 0.94rem; font-weight: 600; line-height: 1.45; }

@media (max-width: 700px) {
  .dz-legend { grid-template-columns: 1fr; }
  .dz-split { grid-template-columns: 1fr; }
  .dz-with { border-left: 0; border-top: 1px solid var(--line); }
  .dz-with::before { display: none; }
  .dz-with .dz-label::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--cyan); vertical-align: middle; margin-right: 7px; }
  .dz-avoided { grid-template-columns: 1fr; gap: 6px; }
}

/* Locale switcher: a compact disclosure keeps seven real language links usable without JS. */
.language-switcher {
  position: relative;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.language-switcher summary {
  min-width: 84px;
  min-height: 38px;
  padding: 8px 26px 8px 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--line-blue);
  color: var(--on-blue-soft);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.language-switcher summary::-webkit-details-marker { display: none; }
.language-switcher summary::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-65%) rotate(45deg);
}
.language-switcher[open] summary,
.language-switcher summary:hover,
.language-switcher summary:focus-visible { color: var(--white); background: var(--blue-800); }
.language-switcher[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.language-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  width: max-content;
  min-width: 220px;
  max-width: calc(100vw - 28px);
  padding: 6px;
  display: grid;
  background: var(--blue-900);
  border: 1px solid var(--line-blue);
  box-shadow: 0 16px 34px rgba(2, 15, 28, 0.28);
}
.language-menu a {
  min-height: 40px;
  padding: 9px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  color: var(--on-blue-soft);
  font-family: var(--sans);
  font-size: 0.87rem;
  font-weight: 650;
  letter-spacing: 0;
  text-decoration: none;
}
.language-menu a + a { border-top: 1px solid var(--line-blue); }
.language-menu a:hover,
.language-menu a:focus-visible { color: var(--white); background: var(--blue-800); }
.language-menu a[aria-current="page"] { color: var(--white); background: var(--blue-700); }
.language-fallback-note {
  position: absolute;
  z-index: 21;
  top: calc(100% + 8px);
  right: 0;
  width: min(320px, calc(100vw - 30px));
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line-blue);
  background: var(--white);
  color: var(--blue-900);
  font-family: var(--font);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.4;
}
.language-fallback-note + .language-menu { top: calc(100% + 75px); }
.language-option {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.language-flag {
  width: 22px;
  height: 15px;
  flex: 0 0 auto;
  display: block;
  overflow: hidden;
  border-radius: 1px;
  background: var(--white);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.language-code {
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
}

@media (max-width: 1220px) and (min-width: 881px) {
  .header-inner { gap: 18px; }
  .nav-links { gap: 18px; }
  .nav-links a { font-size: 0.86rem; }
}

@media (max-width: 1220px) and (min-width: 881px) {
  .header-inner { grid-template-columns: auto 1fr auto; }
  .menu-toggle { display: flex; justify-self: end; }
  .header-actions .button { display: none; }
  .nav-toggle { display: block; position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }
  .nav-links {
    position: fixed;
    inset: 74px 0 auto 0;
    display: none;
    background: var(--blue-900);
    border-bottom: 1px solid var(--line-blue);
    padding: 18px 20px 24px;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  #nav-toggle:checked ~ .nav-links { display: flex; }
  .nav-links a { padding: 14px 0; border-bottom: 1px solid var(--line-blue); }
  .nav-links .nav-mobile-contact { display: block; color: var(--white); font-weight: 700; }
}

@media (max-width: 650px) {
  .header-inner { gap: 14px; }
  .header-actions { gap: 7px; }
}

@media (max-width: 1220px) {
  .header-actions { justify-self: end; width: max-content; }
}

@media (max-width: 400px) {
  .site-header .brand { gap: 7px; }
  .site-header .brand-copy { display: inline-flex; }
  .site-header .brand-name { font-size: 0.84rem; letter-spacing: 0.1em; }
  .site-header .brand-motto { display: none; }
}

/* Keep page introductions close to the header without tightening later sections. */
main > section:first-child { padding-top: 48px; }

@media (max-width: 650px) {
  main > section:first-child { padding-top: 32px; }
}

@media (max-width: 480px) {
  .button-row { display: grid; grid-template-columns: minmax(0, 1fr); }
  .button-row .button { width: 100%; min-width: 0; justify-content: center; text-align: center; }
  .form-field textarea { min-height: 230px; }

  .enterprise-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .enterprise-price strong {
    max-width: 100%;
    font-size: 2rem;
    line-height: 1.1;
    overflow-wrap: anywhere;
  }
  .enterprise-plan .button { width: 100%; min-width: 0; justify-content: center; text-align: center; }

  .hero-voice-top { flex-direction: column; align-items: stretch; }
  .hero-voice .button { width: 100%; justify-content: center; }
  .voice-mini p { overflow: visible; text-overflow: clip; white-space: normal; }

  .footer-feedback { align-items: stretch; }
  .footer-feedback-links {
    width: 100%;
    min-width: 0;
    flex: 1 1 100%;
    flex-direction: column;
  }
  .footer-feedback-links a {
    width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }

  .sched-head { grid-template-columns: 90px repeat(5, 1fr); }
  .sched-row { grid-template-columns: 90px minmax(0, 1fr); }
  .sched-res { padding: 9px 8px; font-size: 0.67rem; }
  .sched-bar { padding: 6px 4px; font-size: 0.52rem; }
}

@media (max-width: 360px) {
  h1, .hero-copy h1 { font-size: 2.05rem; }
  .board-table th:nth-child(2), .board-table td:nth-child(2) { display: none; }
  .board-table th, .board-table td { padding-left: 8px; padding-right: 8px; }
}

/* ---- Real-console screenshots (product.html and the strips on platform / live-operations).
   Frames are drafting-sheet plain: hairline border, mono caption bar, square corners. The
   images ARE the product; the frame must never compete with them. */
.shot { margin: 0; border: 1px solid var(--line-dark); background: var(--white); }
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  border-top: 1px solid var(--line);
  padding: 9px 12px;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
}
.section-dark .shot, .cta-section .shot { border-color: var(--line-blue); background: var(--ink); }
.section-dark .shot figcaption, .cta-section .shot figcaption { border-top-color: var(--line-blue); color: var(--on-blue-soft); }
.shot-stack { display: grid; gap: 26px; }
/* A standalone shot directly before a stack must sit the same 26px off it as the
   stack's own rows, so the group reads evenly (e.g. job costing above the estimate
   stack). Without this the first two shots touch while the rest are spaced. */
.shot + .shot-stack { margin-top: 26px; }
.shot-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 880px) { .shot-pair { grid-template-columns: 1fr; } }
.shot-note { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--muted); }
.section-dark .shot-note { color: var(--on-blue-soft); }

/* Mobile shots. The console is a fixed desktop layout (the field phone is the mobile surface),
   so a capture cannot reflow to a phone. The earlier fix rendered the image wider than the
   screen and made you SWIPE inside the frame, which hid most of the shot and read as broken.
   Better: show the WHOLE shot fit-to-width so it is fully visible at a glance, and make the
   tap-to-enlarge affordance obvious, since the full-size file with native pinch-zoom is where
   the fine print lives. "Visible" should mean you can see the whole thing, then zoom for detail. */
.shot-link { display: block; cursor: zoom-in; position: relative; }
@media (max-width: 700px) {
  .shot img { width: 100%; max-width: 100%; }
  /* Touch-only hint (a mouse has hover + a cursor already); the arrow matches the nav's. */
  .shot-link::after {
    content: "Tap to enlarge \2197";
    position: absolute; right: 8px; bottom: 8px;
    font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.04em;
    background: rgba(14, 40, 66, 0.86); color: #fff; padding: 4px 8px;
    pointer-events: none;
  }
}

/* ---- Analytics consent bar: one question, two equal answers, bottom of the sheet. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--ink); color: var(--on-blue); border-top: 1px solid var(--line-blue); box-shadow: 0 -12px 30px rgba(6, 18, 32, 0.25); }
.consent[hidden] { display: none !important; }
.consent-inner { max-width: var(--max); margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.consent-inner p { margin: 0; flex: 1 1 320px; font-size: 0.82rem; color: var(--on-blue); }
.consent-inner p a { color: var(--cyan); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.consent-actions .button { padding: 9px 16px; font-size: 0.8rem; }
.consent-actions .button-secondary { border-color: var(--line-blue); color: var(--on-blue); }

/* Focused operational scenario pages. */
.scenario-hero .lead { max-width: 850px; }
.scenario-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 24px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-transform: uppercase;
}
.scenario-breadcrumb::before { content: "\2190"; color: var(--route); }
.scenario-breadcrumb:hover,
.scenario-breadcrumb:focus-visible { color: var(--ink); }
.scenario-heading-row {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.scenario-heading-row .kicker { margin: 0; }
.scenario-number {
  color: var(--blue-600);
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.scenario-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.scenario-panel {
  min-height: 220px;
  padding: clamp(25px, 4vw, 42px);
  background: var(--white);
}
.scenario-panel-wide { grid-column: 1 / -1; min-height: 0; }
.scenario-panel-accent { background: var(--blue-pale); }
.scenario-label {
  display: block;
  margin-bottom: 13px;
  color: var(--blue-600);
  font-family: var(--mono);
  font-size: 0.69rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scenario-panel h2 { margin-bottom: 14px; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.scenario-panel h2.scenario-label {
  margin-bottom: 13px;
  font-size: 0.69rem;
  line-height: 1.4;
  letter-spacing: 0.08em;
}
.scenario-panel p:last-child { margin-bottom: 0; }
.scenario-outcome {
  border-left: 4px solid var(--success);
  padding-left: 20px;
  font-size: 1.12rem;
  font-weight: 700;
}
.scenario-related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.scenario-card {
  display: flex;
  min-height: 180px;
  padding: 26px;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  background: var(--white);
  text-decoration: none;
}
.scenario-card:hover,
.scenario-card:focus-visible { background: var(--blue-pale); }
.scenario-card small {
  color: var(--blue-600);
  font-family: var(--mono);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.scenario-card strong { font-size: 1.08rem; line-height: 1.35; }
.scenario-card span { font-size: 0.83rem; font-weight: 750; text-decoration: underline; text-underline-offset: 4px; }
.scenario-signal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line-blue);
  background: var(--line-blue);
  margin: 0;
  padding: 0;
  list-style: none;
}
.scenario-signal {
  min-height: 170px;
  padding: 28px;
  background: var(--blue-800);
}
.scenario-signal span {
  display: block;
  margin-bottom: 18px;
  color: var(--cyan);
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.scenario-signal p { margin: 0; color: var(--on-blue); }
.scenario-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 34px;
  border: 1px solid var(--line);
  background: var(--line);
}
.scenario-notes article { padding: clamp(25px, 4vw, 40px); background: var(--white); }
.scenario-notes p { margin: 0; color: var(--muted); }
.scenario-workflow { margin: 0; padding: 0; list-style: none; }

@media (max-width: 760px) {
  .scenario-detail-grid,
  .scenario-related-grid,
  .scenario-signal-grid,
  .scenario-notes { grid-template-columns: minmax(0, 1fr); }
  .scenario-panel-wide { grid-column: auto; }
}