/* ==========================================================================
   WillowCreek: Operational Intelligence Platform
   Marketing site stylesheet. Tokens derive from Ember (Chapter 51):
   brand ramp #00CCC0 → #00BDB5 → #007278 (WCG-ADR-061), ink #000C2A,
   dark-primary surfaces. Brand teal is never a status colour (WCG-UX-073).
   ========================================================================== */

:root {
  /* Brand */
  --brand-bright: #00CCC0;
  --brand-primary: #00BDB5;
  --brand-deep: #007278;
  --brand-ink: #000C2A;
  --brand-on-dark: #FCFCFC;

  /* Dark-theme surfaces (primary theme, WCG-UX-003) */
  --surface-base: #0A111B;
  --surface-raised: #111A26;
  --surface-card: #1A2634;
  --surface-pale: #22303F;
  --border-subtle: #2C3A4A;
  --text-primary: #F6F9FB;
  --text-secondary: #AEBBC9;
  --text-muted: #93A1B0;
  --action: #00BDB5;
  --action-hover: #00CCC0;
  --on-action: #041018;
  --link: #00CCC0;

  /* Status lane (dark values). Used sparingly, semantically only */
  --status-critical: #FF6E70;
  --status-warning: #FFA734;
  --status-success: #2FC97D;
  --status-info: #3FB8E8;
  --status-neutral: #93A1B0;

  /* Light panel variants (for alternating sections) */
  --light-base: #F6F9FB;
  --light-raised: #FFFFFF;
  --light-pale: #EBF1F8;
  --light-border: #DDE6ED;
  --light-text: #202C3B;
  --light-text-secondary: #5E6B7A;
  --light-action: #007278;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --max-width: 1180px;
  --radius: 10px;
  --radius-lg: 16px;
}

/* --------------------------------------------------------------------------
   Light theme (Ember light tokens). Dark stays the default/primary theme
   (WCG-UX-003); [data-theme="light"] flips the semantic tokens, and the
   interaction ramp rotates per WCG-ADR-061: deep #007278 becomes the default
   action/link/focus colour on light surfaces.
   -------------------------------------------------------------------------- */
:root[data-theme="light"] {
  --surface-base: #F6F9FB;
  --surface-raised: #FFFFFF;
  --surface-card: #FFFFFF;
  --surface-pale: #EBF1F8;
  --border-subtle: #DDE6ED;
  --text-primary: #202C3B;
  --text-secondary: #5E6B7A;
  --text-muted: #5E6B7A;
  --action: #007278;
  --action-hover: #00BDB5;
  --on-action: #FFFFFF;
  --link: #007278;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  background: var(--surface-base);
  color: var(--text-primary);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 2px;
}

code, .mono { font-family: var(--font-mono); font-size: 0.92em; }

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }
.container.narrow { max-width: 860px; }

/* --------------------------------------------------------------------------
   Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg, rgba(10, 17, 27, 0.92));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 68px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.nav-logo { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.nav-logo img { height: 44px; width: auto; display: block; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
}

.nav-links > li { position: relative; }

.nav-links a.nav-item {
  display: inline-block;
  padding: 8px 13px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
}
.nav-links a.nav-item:hover,
.nav-links a.nav-item[aria-current="page"] {
  color: var(--text-primary);
  background: var(--surface-pale);
  text-decoration: none;
}

/* Dropdown */
.nav-drop { position: relative; }
.nav-drop > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 13px;
  background: none;
  border: none;
  color: var(--text-secondary);
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.nav-drop > button::after {
  content: "";
  width: 7px; height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}
.nav-drop > button:hover, .nav-drop.open > button {
  color: var(--text-primary);
  background: var(--surface-pale);
}
.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 260px;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  padding: 8px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  display: none;
  list-style: none;
}
.nav-drop.open .nav-menu { display: block; }
.nav-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 7px;
  color: var(--text-secondary);
  font-size: 0.93rem;
}
.nav-menu a strong { display: block; color: var(--text-primary); font-weight: 600; }
.nav-menu a span.hint { font-size: 0.82rem; color: var(--text-muted); }
.nav-menu a:hover { background: var(--surface-pale); text-decoration: none; }

.nav-cta { flex-shrink: 0; }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2px;
  background: var(--text-primary);
  margin: 4px 0;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }

.btn-primary { background: var(--action); color: var(--on-action); }
.btn-primary:hover { background: var(--action-hover); color: #041018; }

.btn-ghost { border-color: var(--border-subtle); color: var(--text-primary); }
.btn-ghost:hover { border-color: var(--brand-primary); color: var(--brand-bright); }

.btn-lg { padding: 15px 32px; font-size: 1.05rem; }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }

/* On light sections */
.section-light .btn-ghost { border-color: var(--light-border); color: var(--light-text); }
.section-light .btn-ghost:hover { border-color: var(--light-action); color: var(--light-action); }

/* --------------------------------------------------------------------------
   Typography & sections
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 { line-height: 1.18; letter-spacing: -0.015em; font-weight: 700; }
h1 { font-size: clamp(2.3rem, 5.2vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.05rem; }

.section { padding: 88px 0; }
.section.tight { padding: 56px 0; }

/* A light panel inside a dark-primary design. It must redeclare the WHOLE
   token set locally, not just its own background and text: any child that
   paints itself from --surface-raised or --surface-card (cards, callouts,
   forms, tables) would otherwise render a dark box inside a light panel and
   put dark text on it. Same local-scope pattern as .hero.has-field and
   .mech-section below. The --light-* tokens are theme-stable constants, so
   this panel reads identically in dark and light. */
.section-light {
  --surface-base: var(--light-base);
  --surface-raised: var(--light-raised);
  --surface-card: var(--light-raised);
  --surface-pale: var(--light-pale);
  --border-subtle: var(--light-border);
  --text-primary: var(--light-text);
  --text-secondary: var(--light-text-secondary);
  --text-muted: var(--light-text-secondary);
  --action: var(--light-action);
  --action-hover: var(--brand-primary);
  --on-action: #FFFFFF;
  --link: var(--light-action);
  background: var(--light-base);
  color: var(--light-text);
}
.section-light h1, .section-light h2, .section-light h3, .section-light h4 { color: var(--brand-ink); }
.section-light .muted, .section-light .lead { color: var(--light-text-secondary); }
.section-light a:not(.btn) { color: var(--light-action); }

.section-raised { background: var(--surface-raised); color: var(--text-primary); }

.kicker {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 14px;
}
.section-light .kicker { color: var(--brand-deep); }

.lead {
  font-size: 1.18rem;
  color: var(--text-secondary);
  max-width: 46em;
}

.muted { color: var(--text-muted); }

.section-head { max-width: 760px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { margin-bottom: 14px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 110px 0 90px;
  overflow: hidden;
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(0, 189, 181, 0.14), transparent 60%),
    radial-gradient(700px 400px at 12% 110%, rgba(0, 114, 120, 0.18), transparent 55%),
    var(--surface-base);
}
.hero .container { position: relative; z-index: 1; }
.hero h1 { max-width: 17em; margin-bottom: 22px; }
.hero .lead { margin-bottom: 34px; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-tagline {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-tagline .descriptor {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.hero-tagline .tagline {
  font-size: 1.02rem;
  color: var(--text-secondary);
  font-style: italic;
}

/* Page hero (interior pages) */
.page-hero {
  padding: 84px 0 64px;
  background:
    radial-gradient(900px 420px at 85% -20%, rgba(0, 189, 181, 0.12), transparent 60%),
    var(--surface-base);
  border-bottom: 1px solid var(--border-subtle);
}
.page-hero h1 { max-width: 20em; margin-bottom: 18px; }

/* --------------------------------------------------------------------------
   Cards & grids
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
}
.card h3 { margin: 14px 0 10px; }
.card h3:first-child { margin-top: 0; }
.card p { color: var(--text-secondary); font-size: 0.96rem; }
.card .card-link { display: inline-block; margin-top: 14px; font-weight: 600; font-size: 0.93rem; }

a.card { display: block; transition: border-color 0.15s ease, transform 0.12s ease; }
a.card:hover { border-color: var(--brand-primary); transform: translateY(-3px); text-decoration: none; }

.section-light .card { background: var(--light-raised); border-color: var(--light-border); }
.section-light .card p { color: var(--light-text-secondary); }

.card-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(0, 189, 181, 0.12);
  border: 1px solid rgba(0, 189, 181, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-bright);
}
.card-icon svg { width: 24px; height: 24px; display: block; }
.section-light .card-icon { color: var(--brand-deep); background: rgba(0, 114, 120, 0.08); border-color: rgba(0, 114, 120, 0.25); }

/* Feature rows (alternating image/text) */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  padding: 44px 0;
}
.feature-row + .feature-row { border-top: 1px solid var(--border-subtle); }
.section-light .feature-row + .feature-row { border-top-color: var(--light-border); }
.feature-row h3 { font-size: 1.5rem; margin-bottom: 12px; }
.feature-row p { color: var(--text-secondary); margin-bottom: 12px; }
.section-light .feature-row p { color: var(--light-text-secondary); }
.feature-row.flip .feature-media { order: 2; }

/* --------------------------------------------------------------------------
   Lists, checklists, stats, tables
   -------------------------------------------------------------------------- */
.checklist { list-style: none; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--text-secondary);
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42em;
  width: 14px; height: 8px;
  border-left: 2.5px solid var(--brand-primary);
  border-bottom: 2.5px solid var(--brand-primary);
  transform: rotate(-45deg);
}
.checklist li strong { color: var(--text-primary); }
.section-light .checklist li { color: var(--light-text-secondary); }
.section-light .checklist li strong { color: var(--brand-ink); }
.section-light .checklist li::before { border-color: var(--brand-deep); }

.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
.stat {
  padding: 24px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.stat .stat-value {
  font-size: 2rem;
  font-weight: 750;
  color: var(--brand-bright);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.stat .stat-label { font-size: 0.9rem; color: var(--text-muted); margin-top: 6px; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border-subtle); border-radius: var(--radius); }
table.cmp { width: 100%; border-collapse: collapse; font-size: 0.94rem; min-width: 640px; }
table.cmp th, table.cmp td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: top; }
table.cmp th { background: var(--surface-card); color: var(--text-primary); font-weight: 650; }
table.cmp td { color: var(--text-secondary); }
table.cmp tr:last-child td { border-bottom: none; }
table.cmp td.yes { color: var(--action); font-weight: 600; }

/* Badges */
.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.03em;
  background: rgba(0, 189, 181, 0.13);
  color: var(--brand-bright);
  border: 1px solid rgba(0, 189, 181, 0.35);
}
.badge.neutral { background: var(--surface-pale); color: var(--text-secondary); border-color: var(--border-subtle); }
.section-light .badge { color: var(--brand-deep); border-color: rgba(0, 114, 120, 0.4); background: rgba(0, 114, 120, 0.10); }

/* Steps */
.steps { list-style: none; counter-reset: step; }
.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 28px 62px;
}
.steps li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0; top: -2px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: 1.5px solid var(--brand-primary);
  color: var(--brand-bright);
  font-weight: 700;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
}
.steps li::after {
  content: "";
  position: absolute;
  left: 21px; top: 44px; bottom: 4px;
  width: 1.5px;
  background: var(--border-subtle);
}
.steps li:last-child::after { display: none; }
.steps li h3 { margin-bottom: 6px; }
.steps li p { color: var(--text-secondary); }

/* FAQ */
.faq details {
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  margin-bottom: 12px;
  background: var(--surface-raised);
}
.faq summary {
  padding: 18px 22px;
  font-weight: 650;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 48px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 22px; top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  color: var(--brand-primary);
}
.faq details[open] summary::after { content: "–"; }
.faq details .faq-body { padding: 0 22px 20px; color: var(--text-secondary); }
.faq details .faq-body p + p { margin-top: 10px; }

/* Quote / callout */
.callout {
  border: 1px solid var(--border-subtle);
  border-left: 3px solid var(--brand-primary);
  border-radius: var(--radius);
  background: var(--surface-raised);
  padding: 24px 28px;
  color: var(--text-secondary);
}
.callout strong { color: var(--text-primary); }

/* Principle blocks */
.principle {
  padding: 26px 0;
  border-bottom: 1px solid var(--border-subtle);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
}
.principle:last-child { border-bottom: none; }
.principle h3 { color: var(--brand-bright); font-size: 1.05rem; }
.principle p { color: var(--text-secondary); }

/* --------------------------------------------------------------------------
   Forms (contact / book a demo)
   -------------------------------------------------------------------------- */
.form-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 32px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label {
  display: block;
  font-size: 0.88rem;
  font-weight: 650;
  margin-bottom: 7px;
  color: var(--text-primary);
}
.form-field label .optional { font-weight: 400; color: var(--text-muted); }
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 11px 13px;
  border-radius: 8px;
  border: 1px solid var(--border-subtle);
  background: var(--surface-raised);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 0.96rem;
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 1px;
  border-color: var(--action);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-muted); }
.form-note { font-size: 0.86rem; color: var(--text-muted); margin-top: 14px; }
.form-actions { margin-top: 22px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
:root[data-theme="light"] .form-field input,
:root[data-theme="light"] .form-field select,
:root[data-theme="light"] .form-field textarea { background: #FFFFFF; }

@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-card { padding: 22px; }
}

/* --------------------------------------------------------------------------
   CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background:
    radial-gradient(800px 300px at 50% -40%, rgba(0, 204, 192, 0.16), transparent 65%),
    var(--surface-raised);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: 80px 0;
  text-align: center;
}
.cta-band h2 { margin-bottom: 14px; }
.cta-band .lead { margin: 0 auto 30px; }
.cta-band .hero-actions { justify-content: center; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--surface-base);
  border-top: 1px solid var(--border-subtle);
  padding: 64px 0 36px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 36px;
  margin-bottom: 48px;
}
.footer-brand img { height: 44px; margin-bottom: 16px; }
.footer-brand p { color: var(--text-muted); max-width: 30em; }
.footer-brand .descriptor {
  display: block;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.footer-col h4 {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.footer-col ul { list-style: none; }
.footer-col li { margin-bottom: 9px; }
.footer-col a { color: var(--text-secondary); }
.footer-col a:hover { color: var(--brand-bright); }
.footer-bottom {
  border-top: 1px solid var(--border-subtle);
  padding-top: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   Decorative: locator-mark motif & diagram frames
   -------------------------------------------------------------------------- */
.diagram-frame {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px;
}
.diagram-frame svg { display: block; width: 100%; height: auto; }
.diagram-caption {
  margin-top: 14px;
  font-size: 0.86rem;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------------------------------
   Theme toggle + light-theme component adjustments
   -------------------------------------------------------------------------- */
.theme-toggle {
  background: none;
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  width: 38px; height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--brand-primary); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }

/* Logo swap: dark-mode lockup on dark surfaces, full-colour on light */
img.logo-light { display: none; }
:root[data-theme="light"] img.logo-dark { display: none; }
:root[data-theme="light"] img.logo-light { display: block; }

:root[data-theme="light"] {
  --header-bg: rgba(246, 249, 251, 0.92);
}
:root[data-theme="light"] h1,
:root[data-theme="light"] h2,
:root[data-theme="light"] h3,
:root[data-theme="light"] h4 { color: var(--brand-ink); }
:root[data-theme="light"] .kicker { color: var(--brand-deep); }
:root[data-theme="light"] .btn-ghost:hover { color: var(--brand-deep); border-color: var(--brand-deep); }
:root[data-theme="light"] .card-icon {
  color: var(--brand-deep);
  background: rgba(0, 114, 120, 0.08);
  border-color: rgba(0, 114, 120, 0.25);
}
:root[data-theme="light"] .checklist li::before { border-color: var(--brand-deep); }
:root[data-theme="light"] .stat-value,
:root[data-theme="light"] .stat .stat-value { color: var(--brand-deep); }
:root[data-theme="light"] table.cmp td.yes { color: var(--brand-deep); }
:root[data-theme="light"] .badge {
  color: var(--brand-deep);
  background: rgba(0, 114, 120, 0.08);
  border-color: rgba(0, 114, 120, 0.3);
}
:root[data-theme="light"] .steps li::before { color: var(--brand-deep); border-color: var(--brand-deep); }
:root[data-theme="light"] .faq summary::after { color: var(--brand-deep); }
:root[data-theme="light"] .principle h3 { color: var(--brand-deep); }
:root[data-theme="light"] .nav-menu { box-shadow: 0 16px 40px rgba(6, 28, 45, 0.18); }
:root[data-theme="light"] .section-light {
  border-top: 1px solid var(--light-border);
  border-bottom: 1px solid var(--light-border);
  background: var(--light-raised);
}
:root[data-theme="light"] .hero,
:root[data-theme="light"] .page-hero {
  background:
    radial-gradient(1100px 500px at 78% -10%, rgba(0, 189, 181, 0.10), transparent 60%),
    var(--surface-base);
}
:root[data-theme="light"] .hero-tagline .tagline { color: var(--light-text-secondary); }

/* Diagram frames stay dark in both themes, because the inline SVGs use the dark
   palette and read as product panels, which is what they depict. */
.diagram-frame { background: #111A26; border-color: #2C3A4A; }
.diagram-frame .diagram-caption { color: #93A1B0; }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .feature-row { grid-template-columns: 1fr; gap: 28px; }
  .feature-row.flip .feature-media { order: 0; }
  .principle { grid-template-columns: 1fr; gap: 8px; }
}

/* The inline nav (logo + six items + CTA) stops fitting well before 760px,
   so it collapses to the drawer at 1000px. Layout rules stay at 760px. */
@media (max-width: 1000px) {
  .nav-toggle { display: block; }
  .nav-links {
    display: none;
    position: absolute;
    top: 68px; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--surface-raised);
    border-bottom: 1px solid var(--border-subtle);
    padding: 12px 16px 20px;
    gap: 2px;
    max-height: calc(100vh - 68px);
    overflow-y: auto;
  }
  .nav-links.open { display: flex; }
  .nav-links a.nav-item, .nav-drop > button { width: 100%; text-align: left; }
  .nav-menu {
    position: static;
    display: none;
    box-shadow: none;
    border: none;
    background: transparent;
    padding: 0 0 0 16px;
    min-width: 0;
  }
  .nav-drop.open .nav-menu { display: block; }
  .nav-cta { display: none; }
}

@media (max-width: 760px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
  .section { padding: 60px 0; }
  .hero { padding: 72px 0 60px; }


}

/* Off-screen but still available to assistive technology. Used for the contact
   form's honeypot field, which a person never sees and a bot fills in. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}


/* ==========================================================================
   The positioning field. A schematic of the product's own mechanism, sitting
   behind the hero copy. Everything degrades to a still frame under
   prefers-reduced-motion, handled in js/field.js.
   ========================================================================== */

.hero.has-field { padding-bottom: 70px; }
.hero.has-field > .container { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; align-items: start; }
.hero.has-field .kicker,
.hero.has-field h1,
.hero.has-field .lead,
.hero.has-field .hero-actions { grid-column: 1; }
.hero.has-field .hero-tagline { grid-column: 1 / -1; }

#field-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  /* Fades out behind the headline so type always wins. */
  mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,0.55) 52%, #000 78%);
  -webkit-mask-image: linear-gradient(100deg, transparent 0%, transparent 34%, rgba(0,0,0,0.55) 52%, #000 78%);
  opacity: 0.9;
  pointer-events: none;
}

.field-readout {
  grid-column: 2;
  grid-row: 1 / span 4;
  align-self: center;
  background: color-mix(in srgb, var(--surface-raised) 82%, transparent);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius);
  backdrop-filter: blur(10px);
  overflow: hidden;
  font-family: var(--font-mono);
}

.field-readout-head {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-secondary);
}
.field-readout-head #field-state.is-critical { color: var(--status-critical); }
.field-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--status-success); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-success) 22%, transparent);
}
#field-state.is-critical ~ .field-dot,
.field-readout-head:has(#field-state.is-critical) .field-dot {
  background: var(--status-critical);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-critical) 26%, transparent);
}

.field-rows { margin: 0; padding: 12px 14px; display: grid; gap: 7px; }
.field-rows > div { display: grid; grid-template-columns: 78px 1fr; gap: 10px; align-items: baseline; }
.field-rows dt { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin: 0; }
.field-rows dd { margin: 0; font-size: 12.5px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
#field-accuracy { color: var(--brand-bright); }

.field-ladder {
  margin: 0; padding: 12px 14px;
  list-style: none;
  border-top: 1px solid var(--border-subtle);
  display: grid; gap: 6px;
}
.field-ladder li {
  display: grid; grid-template-columns: 52px 1fr; gap: 10px;
  font-size: 11px; align-items: baseline;
  opacity: 0.32;
  transition: opacity 220ms ease, color 220ms ease;
}
.field-ladder li .t { color: var(--text-muted); letter-spacing: 0.06em; }
.field-ladder li .w { color: var(--text-secondary); }
.field-ladder li.is-on { opacity: 1; }
.field-ladder li.is-on .w { color: var(--status-warning); }
.field-ladder li.is-done { opacity: 0.75; }
.field-ladder li.is-done .w { color: var(--status-success); }

.field-note {
  margin: 0;
  padding: 11px 14px 13px;
  border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans);
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-muted);
}

@media (max-width: 980px) {
  .hero.has-field > .container { grid-template-columns: 1fr; gap: 32px; }
  .field-readout { grid-column: 1; grid-row: auto; }
  #field-canvas { mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 60%, #000 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 60%, #000 100%); opacity: 0.55; }
}

/* The field hero commits to one dark environment in both themes. Dark is the
   primary theme of this design system, the schematic only reads with contrast,
   and a control room is a dark room. Tokens are re-declared locally so every
   child styles correctly without touching the rest of the page. */
.hero.has-field {
  --surface-base: #0A111B;
  --surface-raised: #111A26;
  --surface-card: #1A2634;
  --surface-pale: #22303F;
  --border-subtle: #2C3A4A;
  --text-primary: #F6F9FB;
  --text-secondary: #AEBBC9;
  --text-muted: #93A1B0;
  --action: #00BDB5;
  --action-hover: #00CCC0;
  --on-action: #041018;
  --link: #00CCC0;
  background:
    radial-gradient(1100px 520px at 74% -8%, rgba(0, 204, 192, 0.15), transparent 62%),
    radial-gradient(760px 420px at 10% 112%, rgba(0, 114, 120, 0.22), transparent 58%),
    #0A111B;
  color: var(--text-primary);
}
.hero.has-field .kicker { color: var(--brand-bright); }
.hero.has-field h1 { color: var(--text-primary); }
.hero.has-field .lead { color: var(--text-secondary); }
.hero.has-field .btn-ghost { color: var(--text-primary); border-color: var(--border-subtle); }
.hero.has-field .btn-ghost:hover { border-color: var(--brand-bright); color: var(--brand-bright); }
.hero.has-field .hero-tagline { border-top-color: var(--border-subtle); }
.hero.has-field .hero-tagline .descriptor { color: var(--text-secondary); }
.hero.has-field .hero-tagline .tagline { color: var(--text-muted); }

/* ==========================================================================
   Use case catalogues. Long, dense, and read by somebody scanning for their
   own workflow, so the identifier and the state carry more weight than prose.
   ========================================================================== */
.uc-groups { display: grid; gap: 26px; }
.uc-group h3 {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 10px; margin-bottom: 0;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 1.02rem;
}
.uc-count {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--text-muted); font-weight: 400;
}
.uc-list { list-style: none; margin: 0; padding: 0; }
.uc-list li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) minmax(0, 0.62fr) auto;
  gap: 14px; align-items: baseline;
  padding: 10px 2px;
  border-bottom: 1px solid var(--border-subtle);
  font-size: 0.9rem;
}
.uc-list li:last-child { border-bottom: 0; }
.uc-list code {
  font-family: var(--font-mono); font-size: 11.5px;
  color: var(--action); background: none; padding: 0;
  white-space: nowrap;
}
.uc-title { color: var(--text-primary); }
.uc-eng { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); line-height: 1.5; }
.uc-state {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted);
  border: 1px solid var(--border-subtle); border-radius: 3px;
  padding: 3px 7px; white-space: nowrap;
}
.uc-list li.is-live { background: color-mix(in srgb, var(--brand-primary) 7%, transparent); }
.uc-list li.is-live .uc-title { font-weight: 600; }

@media (max-width: 860px) {
  .uc-list li { grid-template-columns: 84px minmax(0, 1fr); row-gap: 4px; }
  .uc-eng { grid-column: 2; }
  .uc-state, .uc-list li .badge { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Interactive mechanisms. Each one is a working model of something the
   platform does, so they get an instrument treatment rather than a card one:
   dark panel, monospace data, brand teal for signal and the status lane for
   state. They sit inside ordinary light sections, so they declare their own
   dark scope the way the field hero does.
   ========================================================================== */
/* The dark scope belongs to the instrument panel itself, not to the section
   around it. The section head and the copy column sit on the ordinary section
   background, so scoping the section put light-grey text on a light panel in
   light theme. Tokens live on .mech, which is the element that is dark. */
.mech {
  --surface-raised: #111A26;
  --surface-card: #1A2634;
  --border-subtle: #2C3A4A;
  --text-primary: #F6F9FB;
  --text-secondary: #AEBBC9;
  --text-muted: #93A1B0;
  background: #0E1620;
  border: 1px solid #2C3A4A;
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: #F6F9FB;
}
.mech-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 13px 18px; border-bottom: 1px solid #2C3A4A;
  background: #111A26;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.mech-clock { color: #93A1B0; font-variant-numeric: tabular-nums; }
.lad-status { color: #93A1B0; display: inline-flex; align-items: center; gap: 8px; }
.lad-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #93A1B0; }
.lad-status.is-critical { color: var(--status-critical); }
.lad-status.is-critical::before { background: var(--status-critical); box-shadow: 0 0 0 3px rgba(255,110,112,0.25); }
.lad-status.is-ok { color: var(--status-success); }
.lad-status.is-ok::before { background: var(--status-success); }
.lad-status.is-warn { color: var(--status-warning); }
.lad-status.is-warn::before { background: var(--status-warning); }

.mech-body { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0; }
.lad-tiers { list-style: none; margin: 0; padding: 8px 0; border-right: 1px solid #2C3A4A; }
.lad-tiers li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 12px; align-items: baseline;
  padding: 12px 18px;
  font-size: 0.9rem;
  opacity: 0.3;
  border-left: 2px solid transparent;
  transition: opacity 200ms ease, border-color 200ms ease, background 200ms ease;
}
.lad-at { font-family: var(--font-mono); font-size: 11px; color: #93A1B0; }
.lad-who { color: #F6F9FB; }
.lad-via { font-family: var(--font-mono); font-size: 10px; color: #93A1B0; }
.lad-tiers li.is-fired { opacity: 0.8; border-left-color: var(--status-warning); }
.lad-tiers li.is-current {
  opacity: 1; border-left-color: var(--status-critical);
  background: rgba(255,110,112,0.09);
}
.lad-tiers li.is-current .lad-who { color: var(--status-critical); font-weight: 600; }
.lad-tiers li.is-stood-down { opacity: 0.7; border-left-color: var(--status-success); background: transparent; }
.lad-tiers li.is-stood-down .lad-who { color: var(--status-success); font-weight: 400; }

.lad-side { padding: 14px 18px; display: grid; gap: 14px; align-content: start; }
.lad-store-wrap { display: grid; gap: 6px; }
.lad-store-label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #93A1B0;
}
.lad-store {
  font-family: var(--font-mono); font-size: 11px;
  color: #93A1B0; background: #0A111B;
  border: 1px solid #2C3A4A; border-radius: 4px;
  padding: 8px 10px; display: block; word-break: break-all;
}
.lad-store.is-armed { color: var(--brand-bright); border-color: rgba(0,204,192,0.4); }
.lad-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.lad-log li {
  font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5;
  color: #AEBBC9; display: grid; grid-template-columns: 58px 1fr; gap: 8px;
}
.lad-log .lad-t { color: #5F6D85; }
.lad-log li.is-fire strong { color: var(--status-critical); }
.lad-log li.is-ok { color: var(--status-success); }
.lad-log li.is-warn { color: var(--status-warning); }

.mech-controls {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 14px 18px; border-top: 1px solid #2C3A4A; background: #111A26;
}
.mech-controls .btn[disabled] { opacity: 0.4; cursor: not-allowed; }
.mech-note {
  margin: 0; padding: 13px 18px 15px;
  border-top: 1px solid #2C3A4A;
  font-size: 11.5px; line-height: 1.55; color: #93A1B0;
}
#ladder-demo.is-restarting .lad-tiers { opacity: 0.25; filter: grayscale(1); }
#ladder-demo.is-restarting { outline: 1px solid rgba(255,167,52,0.5); }

/* the seam canvas */
.mech-canvas-wrap #seam-canvas { display: block; width: 100%; height: 240px; }

/* staleness */
#fix-demo .fix-stage {
  position: relative; height: 200px;
  background:
    linear-gradient(rgba(44,58,74,0.35) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(44,58,74,0.35) 1px, transparent 1px) 0 0 / 28px 100%,
    #0A111B;
}
.fix-zone {
  position: absolute; left: 16%; top: 18%; width: 44%; height: 58%;
  border: 1px solid #2C3A4A; border-radius: 4px;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; color: #5F6D85;
  transition: background 260ms ease, border-color 260ms ease, color 260ms ease;
}
.fix-zone.is-active {
  background: rgba(0,204,192,0.14);
  border-color: rgba(0,204,192,0.55);
  color: var(--brand-bright);
}
.fix-dot {
  position: absolute; left: 38%; top: 46%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--brand-bright);
  box-shadow: 0 0 0 7px rgba(0,204,192,0.18);
  transition: opacity 220ms ease, transform 220ms ease;
}
.fix-dot.is-hidden { opacity: 0; transform: scale(0.4); }
.fix-controls { padding: 16px 18px; display: grid; gap: 12px; border-top: 1px solid #2C3A4A; }
.fix-controls label {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #93A1B0;
}
.fix-controls input[type="range"] { width: 100%; accent-color: var(--brand-primary); }
.fix-read { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.fix-read > div { display: grid; gap: 3px; }
.fix-read dt {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em;
  text-transform: uppercase; color: #5F6D85; margin: 0;
}
.fix-read dd { margin: 0; font-family: var(--font-mono); font-size: 12px; color: #F6F9FB; }
.fix-read dd.is-warn { color: var(--status-warning); }

@media (max-width: 820px) {
  .mech-body { grid-template-columns: 1fr; }
  .lad-tiers { border-right: 0; border-bottom: 1px solid #2C3A4A; }
  .lad-tiers li { grid-template-columns: 56px 1fr; row-gap: 2px; }
  .lad-via { grid-column: 2; }
  .fix-read { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Industry floor plans and the RTLS visuals.
   ========================================================================== */
.plan-wrap .plan-canvas { display: block; width: 100%; height: 420px; }
.plan-legend {
  display: flex; flex-wrap: wrap; gap: 8px;
  padding: 12px 18px; border-top: 1px solid #2C3A4A;
}
.plan-key {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em;
  padding: 4px 8px; border-radius: 3px;
  border: 1px solid #2C3A4A; color: #93A1B0;
  display: inline-flex; align-items: center; gap: 6px;
}
.plan-key::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.plan-key.is-person { color: var(--brand-bright); border-color: rgba(0,204,192,0.4); }
.plan-key.is-asset  { color: #6E8496; }
.plan-key.is-safety { color: var(--status-critical); border-color: rgba(255,110,112,0.45); }

.rtls-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 34px; align-items: start; }
.rtls-grid .mech-canvas-wrap #rtls-multilateration { display: block; width: 100%; height: 400px; }
.rtls-copy h3 { margin-bottom: 14px; }
.rtls-copy p { color: var(--text-secondary); margin-bottom: 16px; }
.rtls-copy .checklist { margin-bottom: 18px; }

.mech-canvas-wrap #rtls-transition { display: block; width: 100%; height: 300px; }
.trans-read {
  margin: 0; padding: 13px 18px; border-top: 1px solid #2C3A4A;
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px;
}
.trans-read > div { display: grid; gap: 3px; }
.trans-read dt {
  margin: 0; font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: #5F6D85;
}
.trans-read dd { margin: 0; font-family: var(--font-mono); font-size: 12.5px; color: #F6F9FB; }
#trans-accuracy { color: var(--brand-bright); }

@media (max-width: 980px) {
  .rtls-grid { grid-template-columns: 1fr; gap: 26px; }
  .plan-wrap .plan-canvas { height: 340px; }
  .rtls-grid .mech-canvas-wrap #rtls-multilateration { height: 320px; }
  .trans-read { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Industry artwork. Line drawings rather than photography, on the same honesty
   principle as the copy: a stock photo of a ward implies a deployment. The
   frame stays dark in both themes, matching the diagram convention, because the
   drawings are rendered in the dark diagram palette.
   ========================================================================== */
.industry-art {
  margin: 0 0 8px;
  background: #0A111B;
  border: 1px solid #2C3A4A;
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.industry-art img { display: block; width: 100%; height: auto; }
.industry-art figcaption {
  padding: 12px 18px 14px;
  border-top: 1px solid #2C3A4A;
  font-size: 0.8rem; line-height: 1.5; color: #93A1B0;
}

.card-art {
  display: block; width: 100%; height: auto;
  border-radius: 6px;
  border: 1px solid var(--border-subtle);
  margin-bottom: 14px;
  background: #0A111B;
}

/* --------------------------------------------------------------------------
   Scoping calculator (scoping.html, js/scoping.js).
   The sizing model from the Command Centre Sizing Model draft, made usable.
   Status colours are semantic only; brand teal is never a status colour
   (WCG-UX-073), so the verdict block uses brand and the warnings use status.
   -------------------------------------------------------------------------- */
.calc-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 26px;
}
.calc-presets .btn.is-on {
  border-color: var(--brand-primary);
  color: var(--brand-bright);
}
:root[data-theme="light"] .calc-presets .btn.is-on { color: var(--brand-deep); }

.calc-fieldset { border: 0; margin: 0 0 26px; padding: 0; }
.calc-fieldset legend {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand-primary);
  padding: 0;
  margin-bottom: 4px;
}
:root[data-theme="light"] .calc-fieldset legend { color: var(--brand-deep); }
.calc-fieldset .calc-legend-note {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 16px;
}
.form-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }

/* The hints run to one line or two depending on the wording, which left the
   inputs sitting at different heights across a row. Each field is a column
   that fills its grid cell, and the input is pushed to the bottom of it, so
   every input in a row lands on the same line whatever the label does. */
#scoping-form .form-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
#scoping-form .form-field label { margin-bottom: 8px; }
#scoping-form .form-field input,
#scoping-form .form-field select { margin-top: auto; }

.form-field .hint {
  display: block;
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 3px;
  line-height: 1.45;
}

/* Selects render a shade taller than text inputs in most engines, which is
   visible when they share a row. Pin both to the same box. */
#scoping-form .form-field input,
#scoping-form .form-field select {
  height: 44px;
  padding: 0 13px;
}
#scoping-form .form-field select {
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 19px) 19px, calc(100% - 13px) 19px;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 38px;
}

#calc-advanced-toggle {
  background: none;
  border: 1px dashed var(--border-subtle);
  color: var(--link);
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  padding: 10px 16px;
  border-radius: var(--radius);
  margin-bottom: 22px;
}
#calc-advanced-toggle:hover { border-color: var(--brand-primary); }

/* ---- output ---- */
#scoping-output { margin-top: 44px; }

.calc-verdict {
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: wrap;
  padding: 28px 30px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--brand-primary);
  margin-bottom: 38px;
}
.calc-verdict.is-review { border-color: var(--status-warning); }
.calc-verdict-band {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--brand-bright);
  white-space: nowrap;
}
:root[data-theme="light"] .calc-verdict-band { color: var(--brand-deep); }
.calc-verdict.is-review .calc-verdict-band {
  color: var(--status-warning);
  font-size: 1.4rem;
}
.calc-verdict h3 { font-size: 1.25rem; margin-bottom: 4px; }
.calc-verdict p { color: var(--text-secondary); margin: 0; }

.calc-h {
  font-size: 1.15rem;
  margin: 40px 0 10px;
  padding-top: 22px;
  border-top: 1px solid var(--border-subtle);
}
.calc-h:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.calc-note { color: var(--text-secondary); margin-bottom: 20px; }

.calc-server {
  background: var(--surface-raised);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  margin-bottom: 26px;
}
.calc-server-main {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 20px;
}
.calc-spec {
  text-align: center;
  padding: 16px 10px;
  background: var(--surface-pale);
  border-radius: var(--radius);
}
.calc-spec-n {
  display: block;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--text-primary);
}
.calc-spec-l {
  display: block;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 6px;
}
.calc-server-note { font-size: 0.92rem; color: var(--text-secondary); margin: 0; }

.calc-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; }
.calc-table th, .calc-table td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-subtle);
  vertical-align: top;
}
.calc-table thead th {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.calc-table tbody th { width: 30%; font-weight: 600; color: var(--text-primary); }
.calc-table td strong { color: var(--brand-bright); font-size: 1.02rem; }
:root[data-theme="light"] .calc-table td strong { color: var(--brand-deep); }
.calc-table .mono { font-family: var(--font-mono); font-size: 0.86rem; color: var(--text-secondary); }
.calc-sub {
  display: block;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-weight: 400;
  margin-top: 3px;
}

.calc-insight {
  background: var(--surface-pale);
  border-left: 3px solid var(--brand-primary);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
  margin: 30px 0;
}
.calc-insight h4 { font-size: 1.02rem; margin-bottom: 8px; }
.calc-insight p { color: var(--text-secondary); margin: 0; }

.calc-warn {
  border-radius: var(--radius);
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid var(--border-subtle);
  border-left-width: 3px;
}
.calc-warn.is-warning { border-left-color: var(--status-warning); }
.calc-warn.is-critical { border-left-color: var(--status-critical); }
.calc-warn h4 { font-size: 1rem; margin-bottom: 7px; }
.calc-warn.is-warning h4 { color: var(--status-warning); }
.calc-warn.is-critical h4 { color: var(--status-critical); }
.calc-warn p { color: var(--text-secondary); margin: 0; font-size: 0.95rem; }

.calc-list { margin-top: 6px; }

.calc-provenance {
  margin-top: 44px;
  padding: 26px 28px;
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.calc-provenance h4 { font-size: 1.05rem; margin-bottom: 10px; }
.calc-provenance p { color: var(--text-secondary); font-size: 0.94rem; margin-bottom: 12px; }
.calc-provenance p:last-child { margin-bottom: 0; }

@media (max-width: 860px) {
  .form-grid.cols-3 { grid-template-columns: 1fr 1fr; }
  .calc-server-main { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .form-grid.cols-3 { grid-template-columns: 1fr; }
  .calc-verdict { gap: 14px; }
  .calc-verdict-band { font-size: 1.6rem; }
  .calc-spec-n { font-size: 1.4rem; }
}