/* ============================================================
   IrrigAims CMS — combined stylesheet (auto-generated)
   = brand.css + site.css + market.css from the static site.
   Regenerated 2026-08-26 for CMS parity with irrigaims.com.
   ============================================================ */
/* ──────────────── 1/3  brand.css ──────────────── */
/* ============================================================
   IrrigAims BRAND LAYER — the single file to edit when the final
   brand lands. Everything else derives from these tokens.

   To rebrand permanently:
     1. Replace assets/img/logo.svg (any square-ish SVG).
     2. Change the hex values below (light + dark blocks).
   Runtime preview overrides (Settings → Brand) are stored in
   localStorage and applied by assets/js/site.js on top of this file.
   ============================================================ */

:root {
  /* -- brand identity (FINAL palette — extracted from IrrigAims brand lockup (CreativeLeaves)) -- */
  --brand-leaf: #4d870b;        /* primary — growth */
  --brand-leaf-bright: #6ab70f; /* dark-mode primary */
  --brand-water: #0060cf;       /* water metrics */
  --brand-water-bright: #007dfe;
  --brand-water-deep: #002269;  /* gradient's dark stop — logo-matched, for depth on blue surfaces */
  --brand-sand: #a8763e;        /* soil / caution */
  --brand-clay: #b3402f;        /* alerts */
  --brand-ink: #0e1524;         /* near-black vegetal */
  --brand-bone: #f7f8f5;        /* light background */
  --brand-night: #070b12;       /* dark background */

  /* -- wordmark two-tone (Irrig / Aims); -dark variants win in dark mode -- */
  --brand-word1: #6ab70f;
  --brand-word2: #0060cf;
  --brand-word1-dark: #7ccb28;
  --brand-word2-dark: #3f9bff;

  /* -- brand type (swap with final brand faces later) -- */
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-data: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}

/* ============================================================
   TYPE OPTIONS — switch with ?font=a|b|c (sticks for the session)
   a  Editorial      Fraunces / Instrument Sans / Spline Sans Mono
   b  Field Instrument  Clash Display / Switzer / Spline Sans Mono   [default]
   c  Agronomic      Erode / General Sans / Spline Sans Mono
   ============================================================ */
:root[data-font="a"] {
  --font-display: "Fraunces", Georgia, serif;
  --font-ui: "Instrument Sans", -apple-system, "Segoe UI", sans-serif;
  --font-data: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}
:root[data-font="b"] {
  --font-display: "Clash Display", "Instrument Sans", -apple-system, sans-serif;
  --font-ui: "Switzer", -apple-system, "Segoe UI", sans-serif;
  --font-data: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}
:root[data-font="c"] {
  --font-display: "Erode", Georgia, serif;
  --font-ui: "General Sans", -apple-system, "Segoe UI", sans-serif;
  --font-data: "Spline Sans Mono", ui-monospace, SFMono-Regular, monospace;
}
/* Clash Display runs large and tight; ease the display scale a touch */
:root[data-font="b"] h1, :root[data-font="b"] .display { letter-spacing: -.022em; font-weight: 600; }
:root[data-font="b"] h2, :root[data-font="b"] h3 { letter-spacing: -.015em; font-weight: 600; }
:root[data-font="b"] .bignum, :root[data-font="b"] .kpi .v { letter-spacing: -.03em; }
:root[data-font="c"] h1, :root[data-font="c"] .display { letter-spacing: -.01em; font-weight: 600; }

/* ──────────────── 2/3  site.css ──────────────── */
/* ============================================================
   IrrigAims design system v2 — public site
   Brand tokens live in brand.css (single edit point for rebrand).
   Type: Fraunces (display) / Instrument Sans (UI) / Spline Sans Mono (data)
   Light + dark fully designed. RTL-ready via logical properties.
   ============================================================ */

:root {
  --leaf: var(--brand-leaf);
  --water: var(--brand-water);
  --sand: var(--brand-sand);
  --alert: var(--brand-clay);

  /* light theme — bone & glasshouse */
  --bg: var(--brand-bone);
  --bg-raise: #fcfbf7;
  --panel: #ffffff;
  --line: #dfe0d5;
  --line-soft: #e9eae0;
  --ink: var(--brand-ink);
  --dim: #59685c;
  --faint: #8b9a8d;
  --acc: var(--brand-leaf);
  --acc-ink: #ffffff;
  --water-t: var(--brand-water);
  --chip-bg: #ecf1e9;
  --r-box: 14px;            /* one radius for every content surface */
  --mono-bg: #0b150f;       /* instrument strip stays dark in both themes */
  --mono-ink: #dcefe2;
  --mono-dim: #71937f;
  --mono-acc: var(--brand-leaf-bright);
  --mono-water: var(--brand-water-bright);          /* telemetry/data accent — the strip is always dark, so always the bright blue */
  --panel-water: color-mix(in srgb, var(--water-t) 6%, var(--panel));  /* subtle blue-tinted surface for water-metric cards */
  --line-water: color-mix(in srgb, var(--water-t) 32%, var(--line));   /* blue-tinted hairline for data-context frames */
  --shadow: 0 1px 2px rgba(16,27,20,.05), 0 14px 36px -14px rgba(16,27,20,.14);
  --shadow-lg: 0 2px 6px rgba(16,27,20,.06), 0 28px 72px -20px rgba(16,27,20,.22);
  --hero-grad: radial-gradient(1100px 560px at 12% -10%, color-mix(in srgb, var(--brand-leaf) 12%, transparent), transparent 65%),
               radial-gradient(950px 480px at 92% 0%, color-mix(in srgb, var(--brand-water) 13%, transparent), transparent 62%),
               radial-gradient(620px 340px at 100% 34%, color-mix(in srgb, var(--brand-water-deep) 7%, transparent), transparent 60%);
}

:root[data-theme="dark"] {
  --bg: var(--brand-night);
  --bg-raise: #0b1310;
  --panel: #0e1913;
  --line: #1c3125;
  --line-soft: #15271c;
  --ink: #ecf4ee;
  --dim: #8ca697;
  --faint: #5c7466;
  --acc: var(--brand-leaf-bright);
  --acc-ink: #05130b;
  --water-t: var(--brand-water-bright);
  --chip-bg: #11221a;
  --mono-bg: #060d09;
  --mono-ink: #dcefe2;
  --mono-dim: #71937f;
  --mono-acc: var(--brand-leaf-bright);
  --mono-water: var(--brand-water-bright);
  --panel-water: color-mix(in srgb, var(--water-t) 9%, var(--panel));
  --line-water: color-mix(in srgb, var(--water-t) 38%, var(--line));
  --shadow: 0 1px 2px rgba(0,0,0,.3), 0 14px 36px -14px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 28px 72px -20px rgba(0,0,0,.6);
  --hero-grad: radial-gradient(1100px 560px at 12% -10%, color-mix(in srgb, var(--brand-leaf-bright) 10%, transparent), transparent 65%),
               radial-gradient(950px 480px at 92% 0%, color-mix(in srgb, var(--brand-water-bright) 11%, transparent), transparent 62%),
               radial-gradient(620px 340px at 100% 34%, color-mix(in srgb, var(--brand-water-deep) 16%, transparent), transparent 60%);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.6;
  background: var(--bg); color: var(--ink);
  -webkit-font-smoothing: antialiased;
  transition: background .25s ease, color .25s ease;
}

::selection { background: var(--acc); color: var(--acc-ink); }

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 560; line-height: 1.08; letter-spacing: -.012em;
  font-variation-settings: "SOFT" 40, "WONK" 0;
  text-wrap: balance;
}
h1 { font-variation-settings: "SOFT" 60, "WONK" 1; }

.mono, code, .tick {
  font-family: var(--font-data);
  font-feature-settings: "tnum";
}

a { color: var(--acc); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--water-t); }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--water-t); outline-offset: 3px; border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- layout ---------- */
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: 24px; }
.wrap.narrow { max-width: 860px; }
section { padding-block: 88px; }
section.tight { padding-block: 56px; }

.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

@media (max-width: 980px) {
  .grid3, .grid4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  section { padding-block: 60px; }
  .grid2 { grid-template-columns: 1fr; gap: 32px; }
  .grid3, .grid4 { grid-template-columns: 1fr; }
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.site-head .bar {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; flex-wrap: nowrap;
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; font-size: 19px; letter-spacing: -.01em; }
.brand:hover { text-decoration: none; }
.brand svg { width: 30px; height: 30px; }
.brand b { color: var(--acc); font-weight: 700; }

.nav { display: flex; gap: 2px; margin-inline-start: auto; align-items: center; white-space: nowrap; }
.nav a {
  color: var(--dim); font-size: 13.5px; font-weight: 500;
  padding: 7px 9px; border-radius: 8px;
}
.nav a:hover { color: var(--ink); background: var(--chip-bg); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--acc); font-weight: 600; }

.head-cta { display: flex; gap: 10px; align-items: center; }

.theme-btn {
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  width: 36px; height: 36px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-btn:hover { color: var(--acc); border-color: var(--acc); }
.theme-btn svg { width: 17px; height: 17px; }
:root:not([data-theme="dark"]) .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: none; }

.menu-btn { display: none; }

@media (max-width: 1140px) {
  .nav {
    display: none;
    position: absolute; inset-inline: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-raise); border-bottom: 1px solid var(--line);
    padding: 12px 16px 18px; box-shadow: var(--shadow-lg);
  }
  .nav.open { display: flex; }
  .nav a { padding: 12px 14px; font-size: 16px; }
  .menu-btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-inline-start: auto;
    border: 1px solid var(--line); background: var(--panel); color: var(--ink);
    width: 38px; height: 36px; border-radius: 9px;
  }
  .head-cta .btn { display: none; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .1px;
  border: 1px solid transparent; transition: all .16s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn.primary { background: var(--acc); color: var(--acc-ink); }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { border-color: var(--line); color: var(--ink); background: var(--panel); }
.btn.ghost:hover { border-color: var(--water-t); color: var(--water-t); }
.btn.sm { padding: 8px 16px; font-size: 13.5px; border-radius: 8px; }

/* ---------- eyebrow + section headers ---------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-data);
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--acc); margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--acc); }

.sec-head { max-width: 720px; margin-bottom: 48px; }
.sec-head h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 14px; }
.sec-head p { color: var(--dim); font-size: 17px; }
.sec-head.center { margin-inline: auto; text-align: center; }
.sec-head.center .eyebrow::before { display: none; }

/* ---------- maturity chips: the claim-control language ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-data);
  font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); background: var(--chip-bg);
  white-space: nowrap;
}
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85; }
.chip.available   { color: var(--acc); border-color: color-mix(in srgb, var(--acc) 45%, var(--line)); }
.chip.prototype   { color: var(--water-t); border-color: color-mix(in srgb, var(--water-t) 45%, var(--line)); }
.chip.progress    { color: var(--sand); border-color: color-mix(in srgb, var(--sand) 45%, var(--line)); }
.chip.roadmap     { color: var(--faint); }
.chip.synthetic   { color: var(--sand); border-style: dashed; }

/* ---------- cards ---------- */
.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: 26px; position: relative;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card:hover { border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); box-shadow: var(--shadow); }
.card h3 { font-size: 18px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.card p { color: var(--dim); font-size: 14.5px; }
.card .glyph {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--chip-bg); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.card .glyph svg { width: 19px; height: 19px; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  background: var(--hero-grad);
  padding-block: 96px 72px;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-data); font-size: 12.5px;
  color: var(--dim); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 16px; margin-bottom: 26px;
  background: var(--panel);
}
.hero-kicker .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 9px var(--acc); animation: pulse 2.4s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 {
  font-size: clamp(34px, 5.6vw, 62px);
  max-width: 850px; margin-bottom: 22px;
}
.hero h1 em { font-style: normal; color: var(--acc); }
.hero .lede { max-width: 640px; color: var(--dim); font-size: clamp(16px, 2vw, 19px); margin-bottom: 36px; }
.hero .cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* field grid backdrop */
.field-grid {
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(color-mix(in srgb, var(--acc) 7%, transparent) 1px, transparent 1px),
                    linear-gradient(90deg, color-mix(in srgb, var(--acc) 7%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, black 25%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 55% 35%, black 25%, transparent 75%);
}

/* ---------- telemetry ribbon: the signature ---------- */
.telemetry {
  background: var(--mono-bg); color: var(--mono-ink);
  border-block: 1px solid var(--line-water);
  font-family: var(--font-data);
  overflow: hidden;
}
.telemetry .inner {
  display: flex; align-items: stretch; gap: 0;
  max-width: 1160px; margin-inline: auto;
  overflow-x: auto; scrollbar-width: none;
}
.telemetry .inner::-webkit-scrollbar { display: none; }
.telemetry .cell {
  flex: 1 0 auto; min-width: 128px;
  padding: 14px 18px;
  border-inline-end: 1px solid rgba(111,150,130,.18);
}
.telemetry .cell:first-child { border-inline-start: 1px solid rgba(111,150,130,.18); }
.telemetry .k { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--mono-dim); }
.telemetry .v { font-size: 17px; margin-top: 3px; color: var(--mono-ink); }
.telemetry .v b { color: var(--mono-water); font-weight: 600; }
.telemetry .v .u { font-size: 11px; color: var(--mono-dim); margin-inline-start: 3px; }
.telemetry .src {
  flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center;
  padding: 14px 18px; font-size: 11px; color: var(--mono-dim); line-height: 1.5;
}
.telemetry .src .state { display: flex; align-items: center; gap: 7px; color: var(--mono-ink); font-size: 12px; }
.telemetry .src .state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mono-dim); }
.telemetry.is-live .src .state .dot { background: var(--mono-water); box-shadow: 0 0 8px var(--mono-water); animation: pulse 2.2s infinite; }
@media (max-width: 860px) {
  .telemetry .inner { flex-wrap: wrap; }
  .telemetry .src { flex: 1 1 100%; border-bottom: 1px solid rgba(111,150,130,.18); }
  .telemetry .cell { min-width: 104px; }
}

/* ---------- loop diagram ---------- */
.loop-svg { width: 100%; height: auto; }
.loop-svg text { font-family: var(--font-data); }

/* ---------- stat blocks (labelled, honest) ---------- */
.stat { border-inline-start: 2px solid var(--acc); padding-inline-start: 18px; }
.stat .n { font-family: var(--font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 600; letter-spacing: -.02em; }
.stat .n .u { font-size: .55em; color: var(--dim); font-weight: 500; }
.stat .l { color: var(--dim); font-size: 13.5px; margin-top: 4px; }
.stat .note { font-family: var(--font-data); font-size: 11px; color: var(--faint); margin-top: 6px; }

/* ---------- feature rows ---------- */
.feature-row {
  display: grid; grid-template-columns: 240px 1fr; gap: 32px;
  padding-block: 28px; border-top: 1px solid var(--line-soft);
}
.feature-row:last-child { border-bottom: 1px solid var(--line-soft); }
.feature-row .name { font-family: var(--font-display); font-weight: 600; font-size: 19px; }
.feature-row .name .chip { margin-top: 10px; display: inline-flex; }
.feature-row p { color: var(--dim); font-size: 15px; max-width: 640px; }
@media (max-width: 760px) { .feature-row { grid-template-columns: 1fr; gap: 10px; } }

/* ---------- tables ---------- */
.tbl-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-box); }
table.tbl { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--panel); }
.tbl th {
  text-align: start; font-family: var(--font-data); font-weight: 500;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--bg-raise);
}
.tbl td { padding: 12px 16px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }

/* ---------- forms ---------- */
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 13.5px; font-weight: 600; margin-bottom: 7px; }
.field .hint { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 11px 14px; font: inherit; font-size: 15px;
  background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 9px;
  transition: border-color .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.field .err { display: none; font-size: 12.5px; color: var(--alert); margin-top: 5px; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--alert); }
.field.invalid .err { display: block; }
.form-note { font-size: 13px; color: var(--faint); }
.form-ok {
  display: none; padding: 16px 18px; border-radius: 10px;
  background: var(--chip-bg); border: 1px solid var(--acc); color: var(--ink); font-size: 14.5px;
}
.form-ok.show { display: block; }

/* ---------- callout ---------- */
.callout {
  border: 1px solid var(--line); border-inline-start: 3px solid var(--acc);
  background: var(--bg-raise); border-radius: var(--r-box);
  padding: 18px 22px; font-size: 14.5px; color: var(--dim);
}
.callout b { color: var(--ink); }
.callout.warn { border-inline-start-color: var(--sand); }

/* ---------- CTA band ---------- */
.cta-band {
  background: var(--mono-bg); color: var(--mono-ink);
  border-block: 1px solid var(--line);
  padding-block: 72px; text-align: center;
}
.cta-band h2 { font-size: clamp(26px, 3.6vw, 40px); margin-bottom: 14px; color: #fff; }
.cta-band p { color: var(--mono-dim); max-width: 560px; margin: 0 auto 30px; }
.cta-band .btn.primary { background: var(--mono-acc); color: #06130c; }
.cta-band .btn.ghost { border-color: rgba(111,150,130,.4); color: var(--mono-ink); background: transparent; }
.cta-band .btn.ghost:hover { border-color: var(--mono-water); color: var(--mono-water); }

/* ---------- footer ---------- */
.site-foot { border-top: 1px solid var(--line); background: var(--bg-raise); padding-block: 56px 32px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; margin-bottom: 44px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; } }
.site-foot h3 { font-size: 12px; font-family: var(--font-data); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; font-weight: 500; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 9px; }
.site-foot a { color: var(--dim); font-size: 14px; }
.site-foot a:hover { color: var(--acc); }
.foot-brand p { color: var(--dim); font-size: 13.5px; max-width: 300px; margin-top: 12px; }
.foot-base {
  border-top: 1px solid var(--line-soft); padding-top: 22px;
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  color: var(--faint); font-size: 12.5px;
}

/* ---------- reveal on scroll ---------- */
.rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv { opacity: 1; transform: none; } }

/* ---------- page hero (interior pages) ---------- */
.page-hero { padding-block: 72px 48px; background: var(--hero-grad); border-bottom: 1px solid var(--line-soft); }
.page-hero h1 { font-size: clamp(30px, 4.4vw, 48px); max-width: 780px; margin-bottom: 16px; }
.page-hero .lede { color: var(--dim); font-size: 17.5px; max-width: 640px; }

/* ---------- misc ---------- */
.divider { border: none; border-top: 1px solid var(--line-soft); margin-block: 0; }
.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 8px; z-index: 100;
  background: var(--acc); color: var(--acc-ink); padding: 10px 18px; border-radius: 8px; font-weight: 600;
}
.skip-link:focus { inset-inline-start: 8px; }

/* ============================================================
   v2 additions — bento proof grid, display stats, camera card
   ============================================================ */

.bento { display: grid; gap: 16px; grid-template-columns: repeat(12, 1fr); }
.bento > * { grid-column: span 4; }
.bento .b6 { grid-column: span 6; }
.bento .b8 { grid-column: span 8; }
.bento .b12 { grid-column: span 12; }
@media (max-width: 980px) { .bento > *, .bento .b6, .bento .b8 { grid-column: span 6; } }
@media (max-width: 680px) { .bento > *, .bento .b6, .bento .b8 { grid-column: span 12; } }

.bcard {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-box); padding: 24px; position: relative; overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.bcard:hover { border-color: color-mix(in srgb, var(--acc) 38%, var(--line)); box-shadow: var(--shadow); }
.bcard .k {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.bcard h3 { font-size: 19px; margin-bottom: 8px; }
.bcard p { color: var(--dim); font-size: 14px; }
.bcard.deep { background: var(--mono-bg); border-color: #1c3125; }
.bcard.deep h3, .bcard.deep .bignum { color: var(--mono-ink); }
.bcard.deep p { color: var(--mono-dim); }

.bignum {
  font-family: var(--font-display); font-weight: 560;
  font-size: clamp(40px, 5.5vw, 68px); letter-spacing: -.02em; line-height: 1;
  font-feature-settings: "tnum";
}
.bignum .u { font-size: .38em; color: var(--dim); letter-spacing: 0; }

.cam-card img { width: 100%; border-radius: 10px; border: 1px solid var(--line); aspect-ratio: 4/3; object-fit: cover; background: var(--bg-raise); }
.cam-card .meta { font-family: var(--font-data); font-size: 11px; color: var(--faint); margin-top: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* water-metric emphasis: the site's two real litres readouts read in the brand's
   second colour, so a metered number is visually distinct from a plain data count. */
#pWater, #s2Water { color: var(--water-t); }
.stat:has(#s2Water) { border-inline-start-color: var(--water-t); }
.bcard:has(#pWater) { background: var(--panel-water); border-color: var(--line-water); }

.brand img.logo { width: 30px; height: 30px; }

/* wordmark two-tone (brand presets) */
.brand span { color: var(--brand-word1, var(--ink)); }
.brand b { color: var(--brand-word2, var(--acc)); }
:root[data-theme="dark"] .brand span { color: var(--brand-word1-dark, var(--ink)); }
:root[data-theme="dark"] .brand b { color: var(--brand-word2-dark, var(--acc)); }

/* ============================================================
   v3 — full-viewport hero slider, 3D tilt cards, feature index
   ============================================================ */

.hero-slider {
  position: relative; overflow: hidden;
  background: var(--hero-grad);
  min-height: calc(100dvh - 64px);
  display: flex; flex-direction: column;
}
.hs-track { flex: 1; position: relative; }
.hs-slide {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 40px; align-items: center;
  max-width: 1160px; margin-inline: auto; padding: 48px 24px 96px;
  opacity: 0; transform: translateX(28px); pointer-events: none;
  transition: opacity .6s ease, transform .6s ease;
}
.hs-slide.active { opacity: 1; transform: none; pointer-events: auto; }
.hs-slide.prev { transform: translateX(-28px); }
.hs-copy h1, .hs-copy h2 { font-size: clamp(32px, 4.6vw, 56px); margin-bottom: 20px; }
.hs-copy h1 em, .hs-copy h2 em { font-style: normal; color: var(--acc); }
.hs-copy .lede { color: var(--dim); font-size: clamp(15.5px, 1.8vw, 18.5px); max-width: 540px; margin-bottom: 30px; }
.hs-visual { position: relative; min-height: 280px; display: flex; align-items: center; justify-content: center; }

.hs-nav {
  position: absolute; inset-inline: 0; bottom: 26px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 18px;
}
.hs-dots { display: flex; gap: 8px; }
.hs-dot {
  width: 26px; height: 4px; border-radius: 999px; border: none;
  background: color-mix(in srgb, var(--faint) 45%, transparent);
  transition: background .25s ease; padding: 0; position: relative;
}
.hs-dot::after { content: ""; position: absolute; inset: -8px; }
.hs-dot.active { background: var(--acc); }
.hs-arrow {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--dim);
  display: inline-flex; align-items: center; justify-content: center;
}
.hs-arrow:hover { color: var(--acc); border-color: var(--acc); }
.hs-arrow svg { width: 16px; height: 16px; }

@media (max-width: 920px) {
  .hero-slider { min-height: auto; }
  .hs-track { min-height: 720px; }
  .hs-slide { grid-template-columns: 1fr; gap: 20px; padding-bottom: 110px; align-content: start; padding-top: 40px; }
  .hs-visual { min-height: 220px; }
  .hs-visual .plate { max-width: 420px; }
}

/* technical plates — the "prototype" illustrations */
.plate {
  width: 100%; max-width: 520px;
  filter: drop-shadow(0 24px 48px rgba(6, 16, 10, .28));
}
.plate .p-line { stroke: var(--ink); stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.plate .p-soft { stroke: var(--dim); stroke-width: 1.1; fill: none; stroke-linecap: round; }
.plate .p-acc { stroke: var(--acc); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.plate .p-fill { fill: var(--panel); stroke: var(--line); stroke-width: 1.2; }
.plate .p-glass { fill: color-mix(in srgb, var(--acc) 8%, transparent); }
.plate .p-tag { font-family: var(--font-data); font-size: 8.5px; letter-spacing: .12em; fill: var(--faint); text-transform: uppercase; }
.plate .p-dim { fill: color-mix(in srgb, var(--dim) 22%, transparent); }
@keyframes plate-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }
.hs-slide.active .plate { animation: plate-float 5.5s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .hs-slide.active .plate { animation: none; } }

/* 3D tilt interaction */
.tilt { transform-style: preserve-3d; transition: transform .35s ease, box-shadow .35s ease; will-change: transform; position: relative; }
.tilt.tilting { transition: transform .06s linear; }
.tilt .shine {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--acc) 9%, transparent), transparent 65%);
  opacity: 0; transition: opacity .3s ease;
}
.tilt:hover .shine { opacity: 1; }

/* feature index — the full platform directory */
.fidx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; }
@media (max-width: 980px) { .fidx { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .fidx { grid-template-columns: 1fr; } }
.fitem {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 13px 12px; border-radius: 12px; color: inherit;
  border: 1px solid transparent;
  transition: border-color .18s ease, background .18s ease;
}
.fitem:hover { text-decoration: none; background: var(--panel); border-color: var(--line); }
.fitem .fic {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
  background: var(--chip-bg); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
}
.fitem .fic svg { width: 17px; height: 17px; }
.fitem .ft { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 7px; }
.fitem .fs { color: var(--faint); font-size: 12.5px; line-height: 1.45; margin-top: 2px; }
.mdot { width: 7px; height: 7px; border-radius: 50%; flex: 0 0 7px; }
.mdot.available { background: var(--acc); }
.mdot.progress { background: var(--sand); }
.mdot.roadmap { background: var(--faint); }
.fidx-legend { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin-top: 22px; font-family: var(--font-data); }
.fidx-legend span { display: inline-flex; align-items: center; gap: 7px; }

/* exact-wordmark brand presets: full logo replaces icon+text */
.brand.wordmark span { display: none; }
.brand.wordmark img.logo { width: auto; height: 36px; max-width: 200px; object-fit: contain; }
.side .brand.wordmark img.logo { width: auto; height: 32px; max-width: 170px; object-fit: contain; }
/* dark mode uses the dedicated dark logo variants — no backing chip */
/* preset fonts are static families — neutralise Fraunces-only variation axes */
.brand-font h1, .brand-font h2, .brand-font h3, .brand-font .display {
  font-variation-settings: normal; font-weight: 650; letter-spacing: -.02em;
}

/* ---------- scroll progress + back to top (injected by site.js) ---------- */
.scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--acc), var(--water-t));
  z-index: 100; pointer-events: none;
}
.to-top {
  position: fixed; inset-inline-end: 22px; bottom: 22px; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-lg); cursor: pointer;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease, border-color .15s ease;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { border-color: var(--acc); }
.to-top svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media print { .scroll-progress, .to-top { display: none !important; } }

/* ---------- blueprint sketch-in for technical plates (.rv-scoped) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .rv .plate .p-line, .rv .plate .p-acc {
    stroke-dasharray: 620; stroke-dashoffset: 620;
  }
  .rv .plate .p-fill, .rv .plate .p-glass, .rv .plate .p-dim,
  .rv .plate .p-tag, .rv .plate .p-soft { opacity: 0; }

  .rv.in .plate .p-line { animation: plate-draw 1.5s cubic-bezier(.4,0,.2,1) .15s forwards; }
  .rv.in .plate .p-acc  { animation: plate-draw 1.2s cubic-bezier(.4,0,.2,1) .95s forwards; }
  .rv.in .plate .p-fill, .rv.in .plate .p-glass, .rv.in .plate .p-dim {
    animation: plate-fade .8s ease .55s forwards;
  }
  .rv.in .plate .p-tag { animation: plate-fade .6s ease 1.5s forwards; }
  .rv.in .plate .p-soft {
    animation: plate-fade .7s ease 1.25s forwards, plate-march 16s linear 2s infinite;
  }
  @keyframes plate-draw { to { stroke-dashoffset: 0; } }
  @keyframes plate-fade { to { opacity: 1; } }
  @keyframes plate-march { to { stroke-dashoffset: -156; } }
}

/* wordmark logos in the public header: natural ratio, never squished */
.brand.wordmark img.logo { width: auto; height: 30px; max-width: 170px; }
.site-foot .brand.wordmark img.logo { height: 26px; max-width: 150px; }

/* ---------- proof bento interactivity ---------- */
.cam-card { cursor: pointer; }
.cam-card .frame { position: relative; overflow: hidden; border-radius: 10px; }
.cam-card .frame img { border-radius: 0; border: none; }
.cam-card .frame { border: 1px solid var(--line); }
.cam-card .scan {
  position: absolute; inset-inline: 0; top: -8%; height: 6%;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--acc) 45%, transparent), transparent);
  opacity: 0; pointer-events: none;
}
.cam-card:hover .scan { opacity: 1; animation: camscan 1.8s ease-in-out infinite; }
@keyframes camscan { from { top: -8%; } to { top: 104%; } }
.mflip { position: relative; }
.mflip .fb {
  position: absolute; inset: 0; opacity: 0; transition: opacity .3s ease;
  font-family: var(--font-data); font-size: 11.5px; line-height: 1.8; color: var(--dim);
  display: flex; flex-direction: column; justify-content: center;
}
.mflip .fa { transition: opacity .3s ease; }
.bcard:hover .mflip .fa, .bcard:focus-within .mflip .fa { opacity: .06; }
.bcard:hover .mflip .fb, .bcard:focus-within .mflip .fb { opacity: 1; }
.fspark { display: flex; gap: 3px; align-items: flex-end; height: 30px; margin-top: 12px; }
.fspark i { flex: 1; border-radius: 2px 2px 0 0; background: var(--mono-acc); opacity: .75; min-height: 2px; }
.fspark + .fnote { font-family: var(--font-data); font-size: 9.5px; color: var(--mono-dim); margin-top: 6px; letter-spacing: .08em; }
@media (prefers-reduced-motion: reduce) { .cam-card:hover .scan { animation: none; opacity: 0; } }

/* logo options: when a wordmark image is active, the image carries the name,
   so the text span would duplicate it. Applies to header and footer alike. */
.brand.wordmark span { display: none; }
.site-foot .brand.wordmark img.logo { height: 24px; width: auto; max-width: 160px; }
.site-foot .brand img.logo { flex: 0 0 auto; }

/* text-fit & alignment overrides */
/* Long status chips ("Partial: thresholds live in firmware", "Built: deterministic analytics")
   overflow the fixed 240px .feature-row name column at desktop widths, and the same chip
   text can overflow the Intelligence "engine room" stage heading on narrow phones. The base
   .chip rule is white-space:nowrap by design for short labels; these two contexts carry
   longer sentences, so let them wrap instead of clipping. */
.feature-row .name .chip,
.ir-stage h3 .chip {
  white-space: normal;
  text-align: start;
  line-height: 1.35;
}

/* ============================================================
   Engine showcase — six primary features demonstrate themselves
   while all twelve stay scannable. Homepage only.
   ============================================================ */
.eng { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .eng { grid-template-columns: 1fr; } }

.eng-stage {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-box);
  padding: 24px 26px; min-height: 340px; display: flex; flex-direction: column;
}
.eng-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.eng-name { font-family: var(--font-display); font-size: 25px; font-weight: 600; letter-spacing: -.01em; }
.eng-what { color: var(--dim); font-size: 14.5px; margin-top: 8px; min-height: 42px; }
.eng-demo { flex: 1; display: flex; align-items: center; justify-content: center; padding-block: 10px; }
.eng-nav { display: flex; align-items: center; gap: 14px; border-top: 1px dashed var(--line); padding-top: 14px; flex-wrap: wrap; }
.eng-dots { display: flex; gap: 7px; }
.eng-dot {
  width: 24px; height: 4px; border-radius: 999px; border: none; padding: 0;
  background: color-mix(in srgb, var(--faint) 40%, transparent); position: relative;
}
.eng-dot::after { content: ""; position: absolute; inset: -9px; }
.eng-dot.on { background: var(--acc); }
.eng-note { margin-inline-start: auto; font-family: var(--font-data); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }

.eng-list { display: flex; flex-direction: column; gap: 2px; }
.eng-item {
  display: flex; align-items: center; gap: 10px; text-align: start;
  padding: 9px 12px; border-radius: 9px; border: 1px solid transparent;
  background: none; color: var(--dim); font-size: 13.5px; font-weight: 500;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.eng-item .en { flex: 1; min-width: 0; }
.eng-item:hover { background: var(--chip-bg); color: var(--ink); }
.eng-item.on { background: var(--chip-bg); border-color: color-mix(in srgb, var(--acc) 40%, var(--line)); color: var(--ink); font-weight: 600; }
.eng-item .chip { flex: 0 0 auto; }

/* demo primitives */
.ed { width: 100%; max-width: 430px; }
.ed-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-family: var(--font-data); font-size: 11.5px; color: var(--dim); margin-bottom: 12px; }
.ed-row b { color: var(--ink); font-weight: 500; }
.ed-verdict { font-family: var(--font-display); font-size: 23px; font-weight: 600; margin-top: 14px; }
.ed-verdict em { font-style: normal; color: var(--acc); }
.ed-bar { height: 9px; border-radius: 999px; background: var(--chip-bg); position: relative; overflow: hidden; }
.ed-bar > i { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--acc); border-radius: inherit; transition: width 1.1s cubic-bezier(.2,.7,.2,1); }
.ed-band { position: absolute; inset-block: 0; background: color-mix(in srgb, var(--acc) 22%, transparent); }
.ed-lbl { font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--faint); margin-bottom: 5px; }
.ed-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ed-gate { font-family: var(--font-data); font-size: 11.5px; color: var(--acc); margin-top: 12px; }
.ed-fade { opacity: 0; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.ed-fade.in { opacity: 1; transform: none; }
.ed-svg { width: 100%; height: auto; }
.ed-svg text { font-family: var(--font-data); }
@media (prefers-reduced-motion: reduce) {
  .ed-bar > i { transition: none; }
  .ed-fade { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Engine console — the visitor drives the inputs, every feature
   recomputes live. Replaces the passive carousel.
   ============================================================ */
.engc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; }
@media (max-width: 960px) { .engc { grid-template-columns: 1fr; } }

.engc-console { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-box); padding: 24px 26px; }
.engc-top { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.engc-title { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.engc-hint { font-family: var(--font-data); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); margin-inline-start: auto; }

.engc-inputs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 20px; }
@media (max-width: 700px) { .engc-inputs { grid-template-columns: 1fr; } }
.engc-in { display: block; position: relative; }
.engc-in .il { display: block; font-size: 12.5px; color: var(--dim); margin-bottom: 8px; }
.engc-in .il b { font-family: var(--font-data); color: var(--ink); font-weight: 500; }
.engc-in .ih { display: block; font-family: var(--font-data); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 7px; }
.engc-in input[type="range"] { width: 100%; accent-color: var(--acc); height: 22px; cursor: grab; }
.engc-in input[type="range"]:active { cursor: grabbing; }
.engc-in select {
  width: 100%; padding: 7px 10px; font: inherit; font-size: 13.5px;
  background: var(--bg-raise); color: var(--ink); border: 1px solid var(--line); border-radius: 8px;
}
.ir-band { position: absolute; inset-inline: 0; top: 39px; height: 4px; pointer-events: none; }
.ir-band > i { position: absolute; inset-block: 0; background: color-mix(in srgb, var(--acc) 30%, transparent); border-radius: 2px; }

.engc-chain {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  border-block: 1px dashed var(--line); padding-block: 12px; margin-bottom: 18px;
}
.engc-chain .cn {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); padding: 3px 8px; border-radius: 999px; border: 1px solid transparent;
  transition: color .25s ease, background .25s ease, border-color .25s ease;
}
.engc-chain .cn.on { color: var(--acc); background: var(--chip-bg); border-color: color-mix(in srgb, var(--acc) 35%, var(--line)); }
.engc-chain .cx { flex: 1; min-width: 8px; height: 1px; background: var(--line); }

.engc-out { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.oc { background: var(--panel); padding: 14px 15px; min-width: 0; transition: background .3s ease; }
.oc.on { background: color-mix(in srgb, var(--acc) 5%, var(--panel)); }
.oc.warn { background: color-mix(in srgb, var(--sand) 7%, var(--panel)); }
.oc.block { background: color-mix(in srgb, var(--alert) 6%, var(--panel)); }
.oc-h { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.ocn { font-size: 12.5px; font-weight: 600; }
.occ { font-family: var(--font-data); font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.ocv { font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.15; }
.ocv em { font-style: normal; color: var(--acc); }
.oc.block .ocv { color: var(--alert); }
.oc.warn .ocv em { color: var(--sand); }
.ocr { font-size: 11.5px; color: var(--faint); margin-top: 5px; line-height: 1.45; }
.engc-note { font-family: var(--font-data); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-top: 16px; }

.eng-list .eng-item { cursor: pointer; }

/* ---------- embedded CAD viewer (same-origin /cad/) ---------- */
.cad-frame { border: 1px solid var(--line); border-radius: var(--r-box); overflow: hidden; background: var(--panel); }
.cad-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 18px; border-bottom: 1px solid var(--line); }
.cad-bar .cad-t { font-family: var(--font-data); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.cad-bar .btn { margin-inline-start: auto; }
.cad-frame iframe { width: 100%; height: 560px; border: 0; display: block; background: var(--bg-raise); }
@media (max-width: 760px) { .cad-frame iframe { height: 420px; } }
.cad-note { font-family: var(--font-data); font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); padding: 11px 18px; border-top: 1px solid var(--line-soft); }

/* ============================================================
   Person card — one treatment for founders and advisers alike,
   fully theme-aware. Replaces the forced-dark ".bcard deep"
   variant whose hardcoded rgba() values only worked in dark mode.
   ============================================================ */
.person { display: flex; gap: 18px; align-items: flex-start; }
.person .pav {
  flex: none; width: 56px; height: 56px; border-radius: 14px;
  background: var(--chip-bg); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 22px;
  box-shadow: 0 0 0 1.6px var(--acc);
}
.person .pbody { flex: 1; min-width: 0; }
.person h3 { font-size: 19px; margin-bottom: 3px; }
.person .prole {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 12px;
}
.person p { color: var(--dim); font-size: 14px; }
.person .pcreds { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.person .pcreds span {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .07em;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--dim); background: var(--bg-raise);
  white-space: nowrap;
}
/* advisers read as a distinct lane without inverting the whole card */
.person.advisory .pav { background: color-mix(in srgb, var(--water-t) 12%, transparent); color: var(--water-t); box-shadow: 0 0 0 1.6px var(--water-t); }
.person.advisory .prole { color: var(--water-t); }

/* ---------- claims policy: aligned tag legend ----------
   Two-column grid so the chip column sizes to the widest chip and every
   description starts on the same x, instead of ragged inline text. */
.claim-col { min-width: 0; }
.claim-lbl {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--faint);
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.claim-lbl::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
.claim-list {
  display: grid; grid-template-columns: auto 1fr; gap: 11px 14px;
  align-items: baseline;
}
.claim-list > .chip { justify-self: start; }
.claim-list > span:not(.chip) { font-size: 13.5px; color: var(--dim); line-height: 1.5; }
@media (max-width: 560px) {
  .claim-list { grid-template-columns: 1fr; gap: 4px 0; }
  .claim-list > span:not(.chip) { margin-bottom: 8px; }
}

/* ---------- "Why this structure": the key to the team-card colours ----------
   Same dot-and-label language as the .fidx-legend, so the box explains what
   the green and teal rings on the cards above actually mean. */
.callout.why { padding: 20px 24px; }
.why-h { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.why-h b { color: var(--ink); }
.why-key {
  display: flex; gap: 16px; flex-wrap: wrap; margin-inline-start: auto;
  font-family: var(--font-data); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint);
}
.why-key span { display: inline-flex; align-items: center; gap: 7px; }
.wd {
  width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px;
  background: var(--acc); display: inline-block;
}
.wd.adv { background: var(--water-t); }
.why-grid { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px; align-items: baseline; }
.why-grid .wr {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--dim);
}
.why-grid > span:not(.wr) { font-size: 14px; color: var(--dim); line-height: 1.5; }
.why-foot {
  font-size: 14px; color: var(--dim); line-height: 1.55;
  border-top: 1px dashed var(--line); margin-top: 16px; padding-top: 14px;
}
@media (max-width: 620px) {
  .why-key { margin-inline-start: 0; }
  .why-grid { grid-template-columns: 1fr; gap: 3px 0; }
  .why-grid > span:not(.wr) { margin-bottom: 10px; }
}

/* claims columns are cards like everything else, with room for the legend */
.card.claim-col { padding: 22px 24px; }
.card.claim-col .claim-lbl { margin-top: 0; }
/* dark mode: lift the wordmark's navy end against the night background */
:root[data-theme="dark"] .brand.wordmark img.logo { filter: brightness(1.45) saturate(1.05); }

/* Footer column headings are small-caps labels, not display headings: the
   [data-font] switcher styles h2/h3 with tight display tracking, so restore
   the label tracking at a specificity that beats it. */
:root[data-font] .site-foot h3 { letter-spacing: .14em; font-family: var(--font-data); font-weight: 500; }

/* ---------- brand lockup caption: "Sense. Decide. Act. Learn." ----------
   .brand.wordmark hides its <span> and lays the mark out in a row, so the
   caption needs a column axis and a selector specific enough to beat that
   display:none. Hidden on narrow headers where vertical space is tight. */
.brand.wordmark { flex-direction: column; align-items: flex-start; gap: 4px; }
.brand.wordmark .brand-tag {
  display: block;
  font-family: var(--font-data);
  font-size: 8.5px;
  line-height: 1;
  letter-spacing: .12em;
  white-space: nowrap;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--faint);
  padding-inline-start: 2px;
}
.site-head .brand.wordmark .brand-tag { display: none; }
@media (min-width: 760px) { .site-head .brand.wordmark .brand-tag { display: block; } }
:root[data-font] .brand.wordmark .brand-tag { letter-spacing: .12em; }

/* ---------- homepage brand tagline band ---------- */
.tagline-band { padding: 54px 0 8px; }
.tagline {
  margin: 0; text-align: center;
  font-family: var(--font-display, inherit);
  font-weight: 700;
  font-size: clamp(26px, 4.6vw, 52px);
  letter-spacing: -.01em;
  line-height: 1.1;
  color: var(--ink);
}
.tagline span + span { margin-inline-start: .18em; }
.tagline span:nth-child(2) { color: var(--brand-leaf, var(--acc)); }
.tagline span:nth-child(3) { color: var(--brand-water, var(--acc)); }
:root[data-theme="dark"] .tagline span:nth-child(2) { color: var(--brand-leaf-bright, var(--acc)); }
:root[data-theme="dark"] .tagline span:nth-child(3) { color: var(--brand-water-bright, var(--acc)); }
@media (max-width: 640px) { .tagline-band { padding: 36px 0 4px; } }

/* header CTA must never wrap */
.head-cta .btn { white-space: nowrap; }

/* ---------- about: team lineup strip (from the deck) ---------- */
/* portrait in the person chip — the deck frames every face in a water drop, so
   the chip borrows that silhouette: rounded on three corners, drawn to a point
   at the base, which also echoes the leaf in the mark. No rotation, so the ring
   follows the shape and the face stays upright and unclipped.
   Cut-outs are transparent (stray fragments of neighbouring people stripped by
   keeping only the largest alpha island), so they sit on a brand-tinted well and
   read correctly in both themes. The initials stay underneath as the fallback. */
.person .pav.has-photo {
  position: relative; overflow: hidden; padding: 0;
  border-radius: 52% 52% 52% 10%;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--acc) 18%, var(--chip-bg)) 0%,
    var(--chip-bg) 76%);
  transition: transform .45s cubic-bezier(.2,.7,.3,1),
              border-radius .45s cubic-bezier(.2,.7,.3,1),
              box-shadow .45s ease;
}
.person.advisory .pav.has-photo {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--water-t) 18%, var(--chip-bg)) 0%,
    var(--chip-bg) 76%);
}
/* the cut-outs are transparent, so any initials left underneath bleed around
   the head and read as earcups — never show them behind a photo */
.person .pav.has-photo .pav-ini { display: none; }
.person .pav.has-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 6%;
}
/* the drop settles into a circle on hover */
.person:hover .pav.has-photo {
  transform: translateY(-2px);
  border-radius: 52%;
  box-shadow: 0 0 0 1.6px var(--acc), 0 8px 20px -10px color-mix(in srgb, var(--acc) 60%, transparent);
}
.person.advisory:hover .pav.has-photo {
  box-shadow: 0 0 0 1.6px var(--water-t), 0 8px 20px -10px color-mix(in srgb, var(--water-t) 60%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .person .pav.has-photo, .person:hover .pav.has-photo { transition: none; transform: none; }
}

/* ---------- footer social row ----------
   Same droplet silhouette as the team chips so the two read as one system.
   Icons are currentColor, so they inherit the theme and only the accent
   changes on hover — no per-brand colour, which would fight the palette. */
.foot-social {
  display: flex; flex-wrap: wrap; gap: 9px;
  list-style: none; margin: 18px 0 0; padding: 0;
}
.foot-social a {
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 52% 52% 52% 10%;
  border: 1px solid var(--line);
  background: var(--bg-raise);
  color: var(--dim);
  transition: color .3s ease, border-color .3s ease,
              transform .35s cubic-bezier(.2,.7,.3,1), border-radius .35s cubic-bezier(.2,.7,.3,1);
}
.foot-social svg { width: 15px; height: 15px; fill: currentColor; display: block; }
.foot-social a:hover,
.foot-social a:focus-visible {
  color: var(--acc); border-color: var(--acc);
  transform: translateY(-2px); border-radius: 52%;
}
.foot-social a:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .foot-social a, .foot-social a:hover { transition: none; transform: none; }
}

/* ──────────────── 3/3  market.css ──────────────── */
/* ============================================================
   IrrigAims — Marketplace section (products.html only)
   Extends the tokens and component language already defined in
   brand.css / site.css. No new colors are introduced here; every
   value below is a var(--...) already used elsewhere on the site.
   ============================================================ */

/* -- product cards: role line under the h3 -- */
.mkt-role {
  font-family: var(--font-data); font-size: 12.5px; letter-spacing: .03em;
  color: var(--acc); font-weight: 600; margin: 2px 0 14px;
}
.bcard.deep .mkt-role { color: var(--mono-acc); }

/* -- glyph inside a .bcard (site.css only styles .card .glyph) -- */
.bcard .glyph {
  width: 38px; height: 38px; border-radius: 10px;
  background: var(--chip-bg); color: var(--acc);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.bcard .glyph svg { width: 19px; height: 19px; }
.bcard.deep .glyph { background: rgba(255,255,255,.07); color: var(--mono-acc); }

/* -- grouped spec list (readable, not a raw BOM dump) -- */
.mkt-specs {
  display: grid; gap: 13px; margin: 4px 0 20px;
  padding-top: 18px; border-top: 1px solid var(--line-soft);
}
.bcard.deep .mkt-specs { border-top-color: #1c3125; }
.mkt-specs dt {
  font-family: var(--font-data); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); margin-bottom: 3px;
}
.mkt-specs dd { font-size: 13.5px; color: var(--dim); line-height: 1.55; }
.bcard.deep .mkt-specs dt { color: var(--mono-dim); }
.bcard.deep .mkt-specs dd { color: var(--mono-ink); opacity: .82; }

/* -- honest-status note (used once, on the hub card) -- */
.mkt-note {
  font-size: 13px; color: var(--sand); line-height: 1.55;
  margin-bottom: 20px; padding: 11px 13px;
  border: 1px dashed color-mix(in srgb, var(--sand) 45%, var(--line));
  border-radius: 8px;
}
.bcard.deep .mkt-note { border-color: color-mix(in srgb, var(--sand) 55%, transparent); }

/* -- price block: .bignum for the number, .mono for label/qualifier -- */
/* currency unit shown as a small prefix: "$149" (symbol) / "AED 545" (code) */
.bignum .u.code { margin-inline-end: .26em; }
.mkt-price { padding-top: 18px; border-top: 1px solid var(--line-soft); margin-bottom: 18px; }
.bcard.deep .mkt-price { border-top-color: #1c3125; }
.mkt-price-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 6px;
}
.bcard.deep .mkt-price-label { color: var(--mono-dim); }
.mkt-price-note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.5; }
.bcard.deep .mkt-price-note { color: var(--mono-dim); }

.mkt-cards { margin-top: 34px; }

/* -- configurator table: indicative-qualifier tag next to each total -- */
.mkt-indic {
  font-family: var(--font-data); font-size: 10px; letter-spacing: .07em;
  text-transform: uppercase; color: var(--faint); margin-inline-start: 7px;
}

/* -- software tier feature lists -- */
.tier-list { list-style: none; margin: 2px 0 20px; display: grid; gap: 9px; }
.tier-list li { position: relative; padding-inline-start: 20px; color: var(--dim); font-size: 14px; line-height: 1.5; }
.tier-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: .58em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--acc);
}

/* ============================================================
   Marketplace v2 — chassis + options configurator (17 Aug 2026
   pricing workbook). Everything below extends the tokens above;
   no new colors, one new radius scale (image frames only).
   ============================================================ */

/* -- product render frame: a soft light box so the white-background
      CAD renders sit comfortably in both themes -- */
.mkt-img {
  border-radius: 10px; overflow: hidden; margin-bottom: 18px;
  border: 1px solid var(--line-soft);
  background: radial-gradient(ellipse 72% 68% at 50% 38%, #fdfdfa 0%, var(--bg-raise) 82%);
  display: flex; align-items: center; justify-content: center;
}
.mkt-img img { width: 100%; height: 100%; object-fit: contain; }
.mkt-img.hero { aspect-ratio: 4 / 5; padding: 14px; }
.mkt-img.opt  { aspect-ratio: 4 / 3; padding: 12px; }
.mkt-img.tall { aspect-ratio: 3 / 4; padding: 12px; }
.bcard.deep .mkt-img {
  background: radial-gradient(ellipse 72% 68% at 50% 38%, #eef0ea 0%, #d7dbd0 82%);
  border-color: #1c3125;
}

/* -- range banner (pod_family.webp) over the configurator -- */
.mkt-banner {
  border-radius: var(--r-box); border: 1px solid var(--line-soft); overflow: hidden;
  background: radial-gradient(ellipse 85% 100% at 50% 30%, #fdfdfa 0%, var(--bg-raise) 85%);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 28px; padding: 20px;
}
.mkt-banner img { max-height: 240px; width: auto; margin-inline: auto; }

/* -- derived feature tags under the chassis blurb -- */
.mkt-feat { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.mkt-feat span {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .03em;
  color: var(--dim); background: var(--chip-bg); border-radius: 999px; padding: 4px 11px;
}

/* -- what a sensor option measures, above its blurb -- */
.mkt-measures {
  font-family: var(--font-data); font-size: 11.5px; letter-spacing: .02em;
  color: var(--faint); margin: 2px 0 12px;
}

/* -- progressive total: 46 -> 71 -> 85, arithmetic made legible -- */
.mkt-sum {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 16px; margin: 26px 0 10px; padding: 24px; border-radius: var(--r-box);
  background: var(--mono-bg);
}
.mkt-sum .term { text-align: center; min-width: 84px; }
.mkt-sum .term .v {
  font-family: var(--font-data); font-weight: 600; font-feature-settings: "tnum";
  font-size: clamp(18px, 2.6vw, 26px); color: var(--mono-ink);
}
.mkt-sum .term .k {
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--mono-dim); margin-top: 5px;
}
.mkt-sum .op { font-family: var(--font-data); font-size: 18px; color: var(--mono-dim); }
.mkt-sum .term.tot .v { color: var(--mono-acc); }
.mkt-sum-note {
  text-align: center; font-family: var(--font-data); font-size: 11px;
  color: var(--faint); letter-spacing: .03em; margin: 0 0 8px;
}

/* -- "what's inside" mini gallery -- */
.mkt-inside { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 10px; }
.mkt-inside figure { margin: 0; }
.mkt-inside figcaption {
  font-family: var(--font-data); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); text-align: center; margin-top: 8px;
}
@media (max-width: 640px) { .mkt-inside { grid-template-columns: 1fr; } }

/* -- two design-principle callouts, side by side -- */
.mkt-principles { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 8px 0; }
@media (max-width: 780px) { .mkt-principles { grid-template-columns: 1fr; } }
.mkt-principle {
  border-inline-start: 3px solid var(--acc); background: var(--bg-raise);
  border-radius: var(--r-box); padding: 20px 22px;
}
.mkt-principle h4 { font-family: var(--font-display); font-size: 17px; font-weight: 600; margin-bottom: 8px; }
.mkt-principle p { color: var(--dim); font-size: 14px; line-height: 1.6; }

/* -- marketing badge (distinct from the .chip maturity indicators used
      elsewhere on the site — this is a tier label, not a status claim) -- */
.mkt-badge {
  display: inline-flex; align-items: center; font-family: var(--font-data);
  font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc); border: 1px solid color-mix(in srgb, var(--acc) 45%, var(--line));
  background: var(--chip-bg); border-radius: 999px; padding: 3px 10px;
}

/* -- software tier price line, pinned to the bottom of the card -- */
.card.tier { display: flex; flex-direction: column; }
.mkt-tier-price { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.mkt-tier-price .v { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.mkt-tier-price .v .u { font-size: .42em; color: var(--dim); font-weight: 500; letter-spacing: .02em; margin-inline-start: 4px; }
.mkt-tier-price .note { font-size: 11.5px; color: var(--faint); margin-top: 8px; line-height: 1.55; }

/* -- site-planning density table footnote -- */
.mkt-site-note { color: var(--faint); font-size: 12.5px; }

/* -- generic flex row for CTA pairs (site.css only scopes this to .hero) -- */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   Marketplace v3 — interactive configurator, add-on SKU strip,
   tier comparison matrix, use-case strip. All tokens are the
   var(--...) already defined in brand.css / site.css.
   ============================================================ */

/* -- visually-hidden helper (screen-reader only) -- */
.mkt-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---- Configurator shell ---- */
.mkt-config {
  border: 1px solid var(--line); border-radius: var(--r-box);
  background: var(--panel); padding: 28px; margin-bottom: 44px;
}
.mkt-config[hidden] { display: none; }
.mkt-config .sec-head { margin-bottom: 26px; }

.mkt-cfg-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-bottom: 24px;
}
.mkt-cfg-fs {
  border: 1px solid var(--line-soft); border-radius: var(--r-box);
  padding: 16px 18px 18px; margin: 0; min-width: 0;
}
.mkt-cfg-fs legend {
  font-family: var(--font-display); font-weight: 600; font-size: 15px;
  padding: 0 8px; color: var(--ink);
}
.mkt-cfg-hint { font-size: 12px; color: var(--faint); line-height: 1.5; margin-top: 10px; }
.mkt-cfg-hint b { color: var(--dim); }

.mkt-cfg-opts { display: grid; gap: 8px; margin-top: 4px; }
.mkt-cfg-opt,
.mkt-cfg-check {
  display: flex; align-items: flex-start; gap: 10px; min-height: 44px;
  padding: 9px 11px; border: 1px solid var(--line-soft); border-radius: 10px;
  cursor: pointer; font-size: 14px; color: var(--ink); line-height: 1.4;
}
.mkt-cfg-opt:hover,
.mkt-cfg-check:hover { border-color: color-mix(in srgb, var(--acc) 38%, var(--line)); }
.mkt-cfg-opt input,
.mkt-cfg-check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--acc); flex: none; }
.mkt-cfg-opt span { display: flex; flex-direction: column; }
.mkt-cfg-opt b { font-weight: 600; }
.mkt-cfg-opt small,
.mkt-cfg-check small { display: block; color: var(--faint); font-size: 11.5px; margin-top: 2px; }
.mkt-cfg-opt:has(input:checked) {
  border-color: var(--acc); background: var(--chip-bg);
}
.mkt-cfg-check.is-locked { cursor: default; opacity: .9; }
.mkt-cfg-check.is-locked input { accent-color: var(--faint); }

.mkt-cfg-field { margin-top: 12px; }
.mkt-cfg-field[hidden] { display: none; }
.mkt-cfg-field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.mkt-cfg-field input {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg-raise); color: var(--ink);
}
.mkt-cfg-field input:focus {
  outline: none; border-color: var(--acc);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acc) 18%, transparent);
}
.mkt-cfg-check + .mkt-cfg-field { margin-top: 14px; }

/* ---- live subtotal region (dark instrument panel, like .mkt-sum) ---- */
.mkt-cfg-out {
  background: var(--mono-bg); color: var(--mono-ink);
  border-radius: var(--r-box); padding: 22px; margin-bottom: 20px;
}
.mkt-cfg-podnote { font-size: 12.5px; color: var(--mono-dim); line-height: 1.55; margin-bottom: 16px; }
.mkt-cfg-podnote a { color: var(--mono-water); }
.mkt-cfg-out .mkt-indic { color: var(--mono-acc); }
.mkt-cfg-lines { display: grid; gap: 10px; margin-bottom: 18px; }
.mkt-cfg-line {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px solid rgba(113,147,127,.22);
}
.mkt-cfg-line-k { font-size: 13px; color: var(--mono-ink); opacity: .9; }
.mkt-cfg-line-v {
  font-family: var(--font-data); font-weight: 600; font-feature-settings: "tnum";
  font-size: 15px; color: var(--mono-ink); text-align: right; white-space: nowrap;
}
.mkt-cfg-line-usd, .mkt-cfg-usd { display: block; font-weight: 400; font-size: 11px; color: var(--mono-dim); margin-top: 2px; }
.mkt-cfg-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 4px 0 16px; border-bottom: 1px solid rgba(113,147,127,.22);
}
.mkt-cfg-total-k { font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--mono-dim); }
.mkt-cfg-total-v {
  font-family: var(--font-data); font-weight: 600; font-feature-settings: "tnum";
  font-size: clamp(22px, 4vw, 30px); color: var(--mono-acc); text-align: right;
}
.mkt-cfg-total-v .mkt-cfg-usd { color: var(--mono-dim); }
.mkt-cfg-soft { padding: 16px 0 4px; }
.mkt-cfg-soft-k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--mono-water); margin-bottom: 6px; }
.mkt-cfg-soft-v { font-size: 14px; color: var(--mono-ink); }
.mkt-cfg-soft-v .mkt-indic { color: var(--mono-acc); }
.mkt-cfg-soft-note { font-size: 11.5px; color: var(--mono-dim); margin-top: 6px; line-height: 1.5; }
.mkt-cfg-out-foot { font-size: 11px; color: var(--mono-dim); margin-top: 14px; line-height: 1.5; }

.mkt-cfg-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.mkt-cfg-cta-note { font-size: 12px; color: var(--faint); max-width: 42ch; }
.mkt-cfg-foot { font-size: 11.5px; color: var(--faint); margin-top: 18px; line-height: 1.55; }

/* ---- add-on / spares SKU strip ---- */
.mkt-addons {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px;
}
.mkt-addon {
  border: 1px solid var(--line); border-radius: var(--r-box); padding: 20px; background: var(--panel);
  display: flex; flex-direction: column;
}
.mkt-addon h3 { font-size: 16px; margin-bottom: 8px; }
.mkt-addon p { color: var(--dim); font-size: 13.5px; line-height: 1.55; flex: 1; }
.mkt-addon-price {
  margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: var(--sand);
}

/* ---- tier comparison matrix ---- */
.mkt-matrix { font-size: 13.5px; }
.mkt-matrix thead th { vertical-align: top; text-align: center; }
.mkt-matrix thead th.mkt-mx-feat { text-align: start; }
.mkt-matrix .mkt-mx-name { display: block; font-family: var(--font-display); font-size: 15px; font-weight: 600; margin-bottom: 6px; }
.mkt-matrix .mkt-mx-price { display: block; font-family: var(--font-data); font-size: 12px; color: var(--ink); line-height: 1.4; }
.mkt-matrix .mkt-mx-usd { color: var(--faint); font-weight: 400; }
.mkt-matrix .mkt-mx-note { display: block; font-size: 10.5px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); margin-top: 6px; line-height: 1.45; }
.mkt-matrix tbody th { text-align: start; font-weight: 500; color: var(--ink); }
.mkt-matrix tbody th .chip { margin-top: 7px; display: inline-flex; }
.mkt-matrix td { text-align: center; }
.mkt-yes { color: var(--acc); font-weight: 700; }
.mkt-no { color: var(--faint); }
.mkt-matrix .mkt-badge { vertical-align: middle; }

/* ---- use-case segmentation strip ---- */
.mkt-usecase { display: flex; flex-direction: column; text-decoration: none; }
.mkt-usecase:hover { text-decoration: none; }
.mkt-usecase .k {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px;
}
.mkt-usecase h3 { font-size: 17px; margin-bottom: 8px; color: var(--ink); }
.mkt-usecase p { color: var(--dim); font-size: 13.5px; line-height: 1.55; flex: 1; }
.mkt-usecase-link { margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--acc); }
.mkt-usecase:hover .mkt-usecase-link { color: var(--water-t); }

/* ---- pilot pre-fill note ---- */
.mkt-prefill-note { margin-bottom: 18px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mkt-prefill-x {
  font: inherit; font-size: 12.5px; cursor: pointer; padding: 4px 12px; min-height: 32px;
  border: 1px solid var(--acc); border-radius: 8px; background: transparent; color: var(--acc);
}
.mkt-prefill-x:hover { background: var(--chip-bg); }

@media (max-width: 560px) {
  .mkt-config { padding: 20px 16px; }
  .mkt-cfg-cta { flex-direction: column; align-items: stretch; }
  .mkt-cfg-cta .btn { text-align: center; }
}

/* ---- marketplace currency switcher (international market) ---- */
.mkt-currency{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 34px;padding:14px 16px;
  border:1px solid var(--line);border-radius:var(--r-box,14px);background:var(--panel);box-shadow:var(--shadow)}
.mkt-cur-label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);white-space:nowrap}
.mkt-cur-select{font:inherit;font-size:14px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;
  background:var(--bg-raise);color:var(--ink);cursor:pointer;min-width:190px}
.mkt-cur-select:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.mkt-cur-note{font-size:11.5px;color:var(--dim);flex:1;min-width:220px;line-height:1.5}
@media (max-width:520px){.mkt-currency{gap:8px}.mkt-cur-select{width:100%}}

/* wide tier-comparison table scrolls inside its own box (no page overflow) */
.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tbl-scroll .mkt-matrix{min-width:640px}