/* Bizneeds — brand palette per BIZNEEDS-BRAND.md, executed dense/editorial */

:root {
  /* Light theme matched to the services-and-pricing menu (zig.ai-derived):
     warm paper ground, white cards, working green, rust red reserved for
     actions, slate blue third voice, Archivo throughout. The old dark
     tokens died with the Vesper theme; --amber* names are kept because
     ~60 rules reference them — they now carry the GREEN working colour. */
  --bg:          #F2F6F5;   /* page ground, warm paper */
  --bg-alt:      #FFFFFF;   /* alternating section */
  --bg-deep:     #E9EFED;   /* footer, deepest inset */
  --panel:       #FFFFFF;   /* cards and surfaces */
  --band:        #E4F2EE;   /* accent bands (disqualifier, sequence, contact) */
  --glow:        rgba(8, 144, 108, 0.22);

  --text:        #15171A;
  --text-muted:  #5C6764;
  --text-dim:    #68746F;

  --line:        #DFE7E4;
  --line-2:      #EAF0EE;

  --amber:       #08906C;   /* the working green */
  --amber-ink:   #066B51;   /* green as TEXT: 5.9:1 on paper, 6.6:1 on white */

  --red:         #CE3C2B;   /* actions only */
  --red-deep:    #B23324;
  --red-soft:    #FAEAE7;
  --blue:        #2B4D60;   /* third voice */
  --blue-soft:   #E8EFF3;
  --green-deep:  #066B51;
  --green-soft:  #E4F2EE;

  --ok:   #08906C;
  --warn: #B0731A;
  --esc:  #CE3C2B;

  --f-ui:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-dspl: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-cw:   "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --r:        14px;   /* controls: inputs; buttons go full pill */
  --r-btn:    80px;   /* pill buttons */
  --r-card:   18px;   /* cards and cells */
  --r-panel:  24px;   /* the big artifacts */
  --gut: clamp(20px, 4vw, 40px);
  --max: 1220px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 78px;
}

body {
  font-family: var(--f-ui);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss03" 1;
}

.grid { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* grid/flex children default to min-width:auto, which forces wide content
   (tables, long strings) to overflow instead of shrinking the column */
.hero-grid > *, .panel > *, .strip-grid > *, .scope-grid > *, .contact-grid > *,
.show > *, .pain-grid > * { min-width: 0; }

.mono { font-family: var(--f-mono); font-size: 0.87em; letter-spacing: -0.01em; }
.muted { color: var(--text-muted); }
.r { text-align: right; }

.skip {
  position: absolute; left: -9999px;
  background: var(--band); color: #fff; padding: 10px 16px; z-index: 99;
}
.skip:focus { left: 12px; top: 12px; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ───────── nav ───────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
}

.nav-in {
  max-width: var(--max); margin: 0 auto;
  padding: 0 var(--gut);
  height: 62px;
  display: flex; align-items: center; gap: 32px;
}

.mark {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-dspl); font-weight: 600;
  font-size: 0.86rem; letter-spacing: 0.13em;
  color: var(--text); text-decoration: none;
  min-height: 44px;
}

.hex { width: 11px; height: 11px; flex: none; }
.hex polygon { fill: var(--amber); }

.nav-links { margin-left: auto; display: flex; gap: 28px; min-width: 0; flex-wrap: wrap; }

.nav-links a {
  font-size: 0.9rem; color: var(--text-muted); text-decoration: none;
  transition: color .15s;
  /* full-height hit area rather than a 23px text box */
  display: inline-flex; align-items: center; min-height: 44px;
}
.nav-links a:hover { color: var(--text); }

/* ───────── buttons ───────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-ui); font-weight: 500; font-size: 0.94rem;
  color: #FFFFFF; background: var(--red);
  border: 1px solid var(--red); border-radius: var(--r-btn);
  padding: 13px 24px; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
button.btn { cursor: pointer; }

/* red actions sit flat on the paper; no glow in this system */
.btn { box-shadow: none; }

/* 44px minimum tap target */
.btn-sm { padding: 11px 15px; font-size: 0.86rem; }

.ghost {
  font-size: 0.94rem; color: var(--text); text-decoration: none;
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px; transition: border-color .15s;
  display: inline-flex; align-items: center; min-height: 44px; /* tap target */
}
.ghost:hover { border-color: var(--amber-ink); }

.quiet-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.78rem;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--text); text-decoration: none;
  min-height: 44px; /* tap target */
}
.quiet-link.light { color: var(--text); }
.quiet-link .arr { transition: transform .2s ease; }
.quiet-link:hover .arr { transform: translateX(5px); }

/* ───────── atmosphere ─────────
   Three cheap layers that give the near-black ground depth without
   tipping into sci-fi: a page-wide grain, a surveyed grid behind the
   hero, and a single amber bloom above the fold. */

body::after {
  content: "";
  position: fixed; inset: 0; z-index: 500; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ───────── hero ───────── */

.hero {
  padding: clamp(52px, 8vw, 88px) 0 clamp(44px, 6vw, 68px);
  position: relative; isolation: isolate;
}

/* ── hero backdrop: the pricing menu's concentric arcs ── */
.hero { background: #FFFFFF; border-bottom: 1px solid var(--line); }
.hero-arc {
  position: absolute; top: -22%; right: -14%;
  width: min(780px, 82vw); height: auto;
  pointer-events: none; opacity: 0.55; z-index: -1;
}
.hero-arc circle { fill: none; stroke: #BEC9C6; stroke-width: 1; }

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.eyebrow {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--text-dim); margin-bottom: 20px;
}

h1 {
  display: flex; flex-direction: column;
  font-weight: 700; line-height: 1.02; margin-bottom: 22px;
}

h1 .dspl {
  font-family: var(--f-dspl);
  font-size: clamp(2.1rem, 4.4vw, 3.35rem);
  letter-spacing: -0.035em; color: var(--text);
  text-transform: none;
}

h1 .cw {
  font-family: var(--f-cw); font-style: normal; font-weight: 700;
  font-size: clamp(2.05rem, 4.3vw, 3.25rem);
  letter-spacing: -0.035em; color: var(--amber);
  margin-top: 2px;
}

.lede {
  font-size: 1.04rem; color: var(--text-muted);
  max-width: 30em; margin-bottom: 28px;
}

.hero-cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-bottom: 34px; }

.assure {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: 8px 22px;
  border-top: 1px solid var(--line); padding-top: 18px;
}
.assure li {
  position: relative; padding-left: 18px;
  font-size: 0.9rem; color: var(--text-muted);
}
.assure li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 7px; height: 7px; background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

/* ───────── console ───────── */

.console {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  overflow: hidden;
  box-shadow: 0 18px 44px -20px rgba(15, 30, 61, 0.42);
}

.console-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.console-bar .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(244,242,237,.2); }
.console-title {
  font-family: var(--f-mono); font-size: 0.74rem;
  color: var(--text-muted); margin-left: 8px;
}
.console-tag {
  margin-left: auto;
  font-family: var(--f-mono); font-size: 0.63rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--amber-ink);
  border: 1px solid rgba(233,161,21,.4); border-radius: 6px; padding: 1px 6px;
}

.console-body {
  padding: 16px;
  min-height: 292px;
  font-family: var(--f-mono); font-size: 0.775rem; line-height: 1.85;
  color: var(--text-muted);
}

.ln { display: flex; gap: 10px; opacity: 0; animation: fade .28s ease forwards; }
.ln .t { color: rgba(244,242,237,.34); flex: none; }
.ln .m { color: var(--text); }
.ln.sub .m { color: var(--text-muted); padding-left: 12px; }
.ln.good .m { color: #7CD6A5; }
.ln.good .m b { color: #7CD6A5; font-weight: 500; }
.ln .m b { color: var(--amber-ink); font-weight: 500; }

@keyframes fade { to { opacity: 1; } }

.cursor {
  display: inline-block; width: 7px; height: 14px;
  background: var(--amber); vertical-align: -2px;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.console-foot {
  border-top: 1px solid var(--line);
  padding: 10px 14px;
  font-size: 0.73rem; color: rgba(244,242,237,.44);
}
.console-foot p { display: flex; align-items: center; gap: 7px; }
.live { width: 6px; height: 6px; border-radius: 50%; background: #4FA97A; flex: none; }

/* ───────── rotating headline ───────── */

.rot-h1 .dspl {
  font-size: clamp(1.75rem, 3.4vw, 2.65rem);
  letter-spacing: 0.035em; line-height: 1.14;
}
.rot-h1 .cw { font-size: clamp(1.9rem, 3.8vw, 2.95rem); }
#rot { transition: opacity .22s ease; }
#rot.swap { opacity: 0; }

/* vertical + systems page hero */
.vhero { padding-bottom: clamp(44px, 6vw, 68px); }
.vh1 {
  font-size: clamp(1.7rem, 3.2vw, 2.5rem);
  letter-spacing: 0.035em; line-height: 1.16; color: var(--text);
}
.eyebrow a { color: var(--text-dim); text-decoration: none; }
.eyebrow a:hover { color: var(--amber-ink); }
.lede.wide { max-width: 66ch; }

/* ───────── the "only" disqualifier band ───────── */

.only {
  background: var(--band); color: var(--text);
  padding: clamp(44px, 6vw, 68px) 0;
}
.only-line {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.35rem, 3vw, 2.1rem);
  letter-spacing: 0.03em; margin-bottom: 14px;
}
.only-line::after {
  content: ""; display: block; width: 40px; height: 2px;
  background: var(--amber); margin-top: 18px;
}
/* cap measure at ~72ch for readability */
.only-body { max-width: 66ch; color: var(--text-muted); font-size: 0.98rem; }
.faq details p, .seq-body, .seq-close { max-width: 66ch; }

/* ───────── industry cards ───────── */

.verts {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.verts.three { grid-template-columns: repeat(3, 1fr); }
.vert {
  background: var(--panel); padding: 26px 26px 24px;
  text-decoration: none; display: block;
  transition: background .15s;
}
.sec.alt .vert { background: var(--panel); }
.vert:hover { background: var(--band); }
.vert-k { font-size: 0.7rem; color: var(--amber-ink); margin-bottom: 12px; }
.vert h3 {
  font-size: 1.05rem; font-weight: 600; color: var(--text);
  margin-bottom: 10px; line-height: 1.35;
}
.vert-p { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 16px; }
.vert-go {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 0.8rem; font-weight: 500; color: var(--text);
  text-transform: uppercase; letter-spacing: 0.06em;
}
.vert .arr { transition: transform .2s ease; }
.vert:hover .arr { transform: translateX(5px); }

/* ───────── vertical page: pains ───────── */

.pain-grid {
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 68px); align-items: start;
}
.pains { list-style: none; counter-reset: p; border-top: 1px solid var(--line); }
.pains li {
  counter-increment: p; position: relative;
  padding: 18px 0 18px 40px; border-bottom: 1px solid var(--line-2);
  font-size: 1rem; color: var(--text);
}
.pains li::before {
  content: "0" counter(p);
  position: absolute; left: 0; top: 20px;
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--amber-ink);
}

/* ───────── vertical page: systems ───────── */

.vsystems {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  margin-bottom: clamp(28px, 4vw, 40px);
}
.vsys { background: var(--panel); padding: 26px 24px 28px; }
.vsys-n { font-size: 0.72rem; color: var(--amber-ink); margin-bottom: 14px; }
.vsys h3 {
  font-size: 1.02rem; font-weight: 600; color: var(--text);
  margin-bottom: 10px; line-height: 1.35;
}
.vsys > p { font-size: 0.91rem; color: var(--text-muted); }

.notes { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.note { border-top: 1px solid var(--line); padding-top: 18px; }
.note-h {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-dim); margin-bottom: 9px;
}
.note p:last-child { font-size: 0.88rem; color: var(--text-muted); }

/* ───────── product menu ───────── */

.prods {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
}
.prod { background: var(--panel); padding: 26px 24px 24px; }
.prod h3 {
  font-size: 1.03rem; font-weight: 600; color: var(--text);
  margin-bottom: 10px;
}
.prod-p { font-size: 0.91rem; color: var(--text-muted); margin-bottom: 16px; }
.prod-fit {
  font-size: 0.85rem; color: var(--text);
  border-top: 1px solid var(--line-2); padding-top: 13px;
}
.prod-fit span {
  display: block;
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.63rem;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--amber-ink); margin-bottom: 5px;
}

/* ───────── live delivery feed ───────── */

.feed {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 18px 44px -22px rgba(0, 0, 0, 0.6);
}
.feed-body { padding: 4px 0; }
.feed-row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: 14px;
  padding: 11px 16px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.86rem;
}
.feed-row:last-child { border-bottom: none; }
.feed-v { color: var(--text); }
.feed-geo { color: var(--text-dim); font-size: 0.76rem; }

/* ───────── vertical coverage ───────── */

.cover {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
}
.cover-g { background: var(--panel); padding: 24px 24px 26px; }
.cover-g h3 {
  font-size: 0.97rem; font-weight: 600; color: var(--text);
  margin-bottom: 14px;
}
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  font-size: 0.79rem; color: var(--text-muted);
  background: var(--bg-deep); border: 1px solid var(--line-2);
  border-radius: 999px; padding: 4px 11px;
}

/* ───────── compliance regime table ───────── */

.regime { width: 100%; border-collapse: collapse; min-width: 640px; }
.regime th {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-dim); text-align: left;
  padding: 12px 16px; border-bottom: 1px solid var(--line);
}
.regime th.r { text-align: right; }
.regime tbody th {
  font-family: var(--f-ui); font-size: 0.9rem; font-weight: 600;
  text-transform: none; letter-spacing: 0; color: var(--text);
  white-space: nowrap; border-bottom: 1px solid var(--line-2);
}
.regime td {
  padding: 14px 16px; font-size: 0.88rem; color: var(--text-muted);
  border-bottom: 1px solid var(--line-2); vertical-align: top;
}
.regime td.r { text-align: right; }
.regime tr:last-child th, .regime tr:last-child td { border-bottom: none; }

/* ───────── value proposition ───────── */

.vprop {
  background: var(--bg-alt);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(52px, 7vw, 80px) 0;
}
.vprop-lead {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.3rem, 2.7vw, 1.95rem);
  letter-spacing: 0.02em; line-height: 1.3; color: var(--text);
  max-width: 20em; margin-bottom: 20px;
}
.vprop-body {
  font-size: 1.02rem; color: var(--text-muted);
  max-width: 40em; margin-bottom: 24px;
}
.vprop-punch {
  font-size: 1.02rem; color: var(--text);
  padding-left: 18px; border-left: 3px solid var(--amber);
}
.vprop-punch b { color: var(--text); font-weight: 600; }

/* ───────── lead lifecycle ───────── */

.cycle {
  list-style: none;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
  margin-bottom: clamp(24px, 3vw, 34px);
}
.stage { background: var(--panel); padding: 26px 24px 28px; position: relative; }
.stage-n { font-size: 0.72rem; color: var(--amber-ink); margin-bottom: 12px; }
.stage-k {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-dim); margin-bottom: 8px;
}
.stage h3 {
  font-size: 1rem; font-weight: 600; color: var(--text);
  line-height: 1.3; margin-bottom: 10px;
}
.stage-p { font-size: 0.89rem; color: var(--text-muted); }
.cycle-close {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.02rem, 1.9vw, 1.28rem);
  letter-spacing: 0.02em; color: var(--text);
  padding-left: 18px; border-left: 3px solid var(--amber);
  max-width: 34em;
}

/* keep adjacent dark sections from merging into one slab */
.seq + .only, .only + .seq { border-top: 1px solid rgba(244, 242, 237, 0.16); }

/* contact block additions */
.contact-sub.ctx {
  font-size: 0.94rem; color: rgba(244, 242, 237, 0.55);
  margin-top: 12px;
}
.cta-note {
  margin-top: 16px; font-size: 0.85rem; color: var(--amber-ink);
}

/* ───────── two pillars ───────── */

.pillars {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-panel); overflow: hidden;
}
.pillar {
  background: var(--panel); padding: 30px 28px 32px;
  display: flex; flex-direction: column;
}
.pillar-n { font-size: 0.72rem; color: var(--amber-ink); margin-bottom: 14px; }
.pillar-k {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.7rem;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--text-dim); margin-bottom: 10px;
}
.pillar h3 {
  font-size: 1.2rem; font-weight: 600; color: var(--text);
  line-height: 1.3; margin-bottom: 12px;
}
.pillar-p { font-size: 0.95rem; color: var(--text-muted); margin-bottom: 22px; }
.pillar .quiet-link { margin-top: auto; }

/* ───────── why the order matters ───────── */

.seq {
  background: var(--band); color: var(--text);
  padding: clamp(58px, 8vw, 88px) 0;
}
.seq-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: start;
}
.seq h2 { color: var(--text); }
.label.light { color: rgba(244, 242, 237, 0.5); }
.seq-body {
  margin-top: 16px; color: var(--text-muted); font-size: 0.97rem;
}
.seq-punch {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  letter-spacing: 0.02em; line-height: 1.35; color: var(--text);
  padding-left: 20px; border-left: 3px solid var(--amber);
  margin-bottom: 20px;
}
.seq-close { color: var(--text-muted); font-size: 0.95rem; }

/* rotating word inside the eyebrow */
.rot-e { color: var(--amber-ink); transition: opacity .22s ease; }
.rot-e.swap { opacity: 0; }

/* ───────── comparison: tabs + unequal cards ───────── */

.cmp-tabs {
  display: flex; gap: 4px; flex-wrap: wrap;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin-bottom: 28px;
  width: fit-content; max-width: 100%;
}
.cmp-tab {
  font-family: var(--f-ui); font-size: 0.87rem; font-weight: 500;
  color: var(--text-muted); background: none; border: none;
  padding: 13px 18px; border-radius: 999px; cursor: pointer;
  white-space: nowrap; transition: background .15s, color .15s;
}
.cmp-tab:hover { color: var(--text); }
.cmp-tab[aria-selected="true"] { background: var(--band); color: var(--text); }

.cmp-panel {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(16px, 2.4vw, 28px); align-items: stretch;
}
.cmp-panel[hidden] { display: none; }

.cmp-card {
  border-radius: var(--r-panel); padding: 26px 26px 28px;
  display: flex; flex-direction: column;
}
.cmp-who {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  margin-bottom: 18px; display: inline-flex; align-items: center; gap: 7px;
}
.cmp-line { font-size: 1.06rem; line-height: 1.45; }

/* theirs: deliberately sparse */
.cmp-card.them {
  background: var(--panel); border: 1px solid var(--line);
  justify-content: space-between; min-height: 210px;
}
.cmp-card.them .cmp-who { color: var(--text-dim); }
.cmp-card.them .cmp-line { color: var(--text-muted); }

/* ours: dense, and it contains the thing you actually wanted */
.cmp-card.us {
  background: var(--band); color: var(--text);
  border: 1px solid var(--amber);
}
.cmp-card.us .cmp-who { color: var(--amber-ink); }
.cmp-card.us .cmp-line { color: var(--text); margin-bottom: 22px; }

.artifact {
  margin-top: auto; background: var(--panel);
  border: 1px solid rgba(244, 242, 237, 0.14);
  border-left: 3px solid var(--amber);
  border-radius: 6px; padding: 16px 18px;
}
.a-k {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: rgba(244, 242, 237, 0.55); margin-bottom: 4px;
}
.a-v {
  font-family: var(--f-dspl); font-weight: 600; font-size: 1.5rem;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.a-s { font-size: 0.8rem; color: rgba(244, 242, 237, 0.6); margin-top: 5px; }

.cmp-note {
  margin-top: 26px; font-size: 0.9rem; color: var(--text-muted);
  max-width: 66ch; padding-left: 16px; border-left: 2px solid var(--line);
}

/* ───────── architecture diagram ───────── */

.diag {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(8px, 2vw, 24px); align-items: center;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-panel); padding: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.diag-col { display: flex; flex-direction: column; gap: 10px; }
.diag-h {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); margin-bottom: 4px;
}
.node {
  background: var(--bg-alt); border: 1px solid var(--line);
  border-radius: 5px; padding: 9px 13px;
  font-size: 0.83rem; color: var(--text); text-align: center;
}
.node.out {
  background: var(--band); border-color: var(--amber-ink); color: var(--text);
}
.diag-mid {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; min-width: 120px;
}
.diag-wires { width: 100%; height: 190px; }
.diag-wires path { fill: none; stroke: #C3BFB6; stroke-width: 1.5; }
.diag-core {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--band); display: grid; place-items: center;
}
.diag-core .hex { width: 17px; height: 17px; }

/* ───────── ask an AI ───────── */

.askai { background: var(--bg-alt); border-top: 1px solid var(--line); padding: clamp(52px, 7vw, 76px) 0; }
.askai-in {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px); align-items: center;
}
.askai-k {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--text-dim); margin-bottom: 12px;
}
.askai-b { margin-top: 12px; color: var(--text-muted); max-width: 32em; }
.askai-btns { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.askai-btn {
  font-size: 0.88rem; font-weight: 500; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 10px 18px; text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.askai-btn:hover { border-color: var(--amber-ink); transform: translateY(-1px); }
.askai-prompt {
  font-size: 0.87rem; color: var(--text-muted); line-height: 1.6;
  background: var(--panel); border: 1px dashed var(--line);
  border-radius: var(--r-card); padding: 15px 17px;
}

/* ───────── console request line ───────── */

.console-ask {
  display: flex; align-items: baseline; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(244, 242, 237, 0.03);
  font-family: var(--f-mono); font-size: 0.775rem;
}
.ask-who {
  color: var(--amber-ink); flex: none;
  border: 1px solid rgba(8, 144, 108, 0.35);
  border-radius: 6px; padding: 0 6px; font-size: 0.68rem;
}
.ask-msg { color: var(--text); }

/* ───────── fixed-price band ───────── */

.band {
  background: var(--bg-alt);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: clamp(44px, 6vw, 66px) 0;
}
.band-h {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.2rem, 2.6vw, 1.85rem);
  letter-spacing: 0.03em; color: var(--text); margin-bottom: 14px;
}
.band-b { max-width: 46em; color: var(--text-muted); margin-bottom: 20px; }

/* ───────── order cards (foundation → agents) ───────── */

.order { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.order-card {
  background: var(--panel); padding: 24px 26px 26px;
  text-decoration: none; display: block; transition: background .15s;
}
.order-card:hover { background: var(--band); }
.order-n {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--amber-ink); margin-bottom: 12px;
}
.order-card h3 {
  font-size: 1.08rem; font-weight: 600; color: var(--text);
  margin-bottom: 10px; line-height: 1.35;
}
.order-card > p { font-size: 0.92rem; color: var(--text-muted); margin-bottom: 16px; }

/* ───────── deliverable list ───────── */

.gets { list-style: none; border-top: 1px solid var(--line); }
.gets li {
  position: relative; padding: 15px 0 15px 30px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.98rem; color: var(--text);
}
.gets li::before {
  content: ""; position: absolute; left: 2px; top: 22px;
  width: 8px; height: 8px; background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}

.vsystems.four { grid-template-columns: repeat(4, 1fr); }

/* ───────── systems page showcase ───────── */

.show {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(30px, 5vw, 64px); align-items: center;
}
.show-copy h2 { margin-bottom: 14px; }
.show-copy > p:last-child { color: var(--text-muted); font-size: 0.97rem; }
.show-ui .console { box-shadow: 0 18px 44px -22px rgba(15, 30, 61, 0.4); }

/* ───────── proof strip ───────── */

.strip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 26px 0;
}
.strip-grid {
  display: grid;
  grid-template-columns: minmax(0, .62fr) minmax(0, 2fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.strip-lead {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.76rem;
  text-transform: uppercase; letter-spacing: 0.09em; line-height: 1.6;
  color: var(--text);
}
.strip-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
.strip-facts > div { padding-left: clamp(16px, 2.4vw, 30px); border-left: 1px solid var(--line); }
.strip-facts > div:first-child { padding-left: 0; border-left: none; }
.strip-facts dt {
  font-family: var(--f-dspl); font-weight: 600; font-size: 1.28rem;
  color: var(--text); font-variant-numeric: tabular-nums; margin-bottom: 2px;
}
.strip-facts dt span {
  font-family: var(--f-ui); font-weight: 400; font-size: 0.7rem;
  color: var(--text-muted); margin-left: 5px; letter-spacing: 0;
}
.strip-facts dd { font-size: 0.8rem; color: var(--text-muted); line-height: 1.45; }

/* ───────── sections ───────── */

.sec { padding: clamp(64px, 9vw, 104px) 0; }
.sec.alt { background: var(--bg-alt); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.sec-head { max-width: 620px; margin-bottom: clamp(36px, 5vw, 52px); }

.label {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-dim);
  margin-bottom: 14px;
}

h2 {
  font-family: var(--f-dspl); font-weight: 700;
  font-size: clamp(1.5rem, 2.7vw, 2.05rem);
  letter-spacing: 0.005em; line-height: 1.2; color: var(--text);
}

.sub { margin-top: 12px; color: var(--text-muted); font-size: 1rem; }

/* ───────── tabs ───────── */

.tablist {
  display: flex; gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 34px;
  overflow-x: auto;
}

.tab {
  font-family: var(--f-ui); font-size: 0.93rem; font-weight: 500;
  color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent;
  padding: 14px 18px 15px; cursor: pointer; white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: 8px;
  transition: color .15s, border-color .15s;
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--amber-ink); }
.tab .tnum { font-family: var(--f-mono); font-size: 0.72rem; color: var(--text-dim); }
.tab[aria-selected="true"] .tnum { color: var(--amber-ink); }

.panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(30px, 4.6vw, 60px);
  align-items: start;
}
.panel[hidden] { display: none; }

.panel-copy h3 {
  font-size: 1.2rem; font-weight: 600; color: var(--text);
  line-height: 1.35; margin-bottom: 12px;
}
.panel-copy > p { color: var(--text-muted); font-size: 0.97rem; margin-bottom: 26px; }

.spec { border-top: 1px solid var(--line); }
.spec > div {
  display: grid; grid-template-columns: 108px 1fr; gap: 16px;
  padding: 12px 0; border-bottom: 1px solid var(--line-2);
}
.spec dt { font-size: 0.78rem; color: var(--text-dim); }
.spec dd { font-size: 0.88rem; color: var(--text); }

/* ───────── ui mocks ───────── */

.ui {
  border: 1px solid var(--line); border-radius: var(--r-card);
  background: var(--panel); overflow: hidden;
  box-shadow: 0 12px 34px -22px rgba(15, 30, 61, 0.3);
}
.sec.alt .ui { background: var(--panel); }

.ui-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--line-2);
  background: var(--bg-deep);
}
.ui-head p:first-child { font-size: 0.83rem; font-weight: 600; color: var(--text); }
.ui-head .muted { font-size: 0.72rem; }

.ui-scroll { overflow-x: auto; }
.ui-table { width: 100%; border-collapse: collapse; }
.ui-table th {
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--text-dim); text-align: left;
  padding: 9px 14px; border-bottom: 1px solid var(--line-2);
}
.ui-table th.r { text-align: right; }
.ui-table td {
  padding: 10px 14px; font-size: 0.83rem;
  border-bottom: 1px solid var(--line-2);
  font-variant-numeric: tabular-nums;
}
.ui-table td:last-child, .ui-table th:last-child { white-space: nowrap; }
.ui-table tr:last-child td { border-bottom: none; }

.chip {
  display: inline-block; font-size: 0.7rem; font-weight: 500;
  padding: 2px 8px; border-radius: 6px; white-space: nowrap;
}
.chip.ok   { color: var(--ok);   background: rgba(31,122,77,.09); }
.chip.warn { color: var(--warn); background: rgba(166,105,12,.10); }
.chip.esc  { color: var(--esc);  background: rgba(163,52,31,.09); }
.chip.mute { color: var(--text-muted); background: rgba(92,100,114,.08); }

.ui-foot {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 12px 16px;
  border-top: 1px solid var(--line-2); background: var(--bg-deep);
  font-size: 0.8rem; color: var(--text-muted);
}
.ui-foot b { color: var(--text); font-weight: 600; }
.delta { color: var(--ok); font-size: 0.76rem; margin-left: 4px; }

.brief { padding: 4px 0; }
.brief-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid var(--line-2);
  font-size: 0.85rem; color: var(--text-muted);
}
.brief-row b { color: var(--text); font-weight: 600; font-size: 0.92rem; }

.flags { padding: 14px 16px; background: var(--bg-deep); }
.flags-h {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--text-dim); margin-bottom: 9px;
}
.flag { display: flex; align-items: center; gap: 9px; font-size: 0.83rem; color: var(--text); padding: 3px 0; }

.panel-copy .ghost { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; }
.panel-copy .ghost .arr { transition: transform .2s ease; }
.panel-copy .ghost:hover .arr { transform: translateX(5px); }

/* ───────── mid-page cta ───────── */

.mid-cta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  margin-top: clamp(36px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--line);
}
.mid-cta p { font-size: 1.02rem; color: var(--text); font-weight: 500; }

/* ───────── faq ───────── */

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.faq-grid .btn { margin-top: 28px; }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-2); }
.faq summary {
  list-style: none; cursor: pointer;
  padding: 17px 34px 17px 0; position: relative;
  font-size: 0.98rem; font-weight: 500; color: var(--text);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 6px; top: 50%;
  width: 9px; height: 9px; margin-top: -6px;
  border-right: 1.5px solid var(--amber); border-bottom: 1.5px solid var(--amber);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq details p {
  padding: 0 24px 20px 0;
  font-size: 0.93rem; color: var(--text-muted);
}

/* ───────── steps ───────── */

.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.steps li { background: var(--bg-alt); padding: 24px 22px 28px; }
.step-n { font-size: 0.72rem; color: var(--amber-ink); margin-bottom: 14px; }
.steps h3 { font-size: 0.98rem; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.steps p:last-child { font-size: 0.87rem; color: var(--text-muted); }

/* ───────── plans ───────── */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.plan { background: var(--panel); padding: 28px 26px 30px; display: flex; flex-direction: column; }
.plan-k { font-size: 0.7rem; color: var(--text-dim); margin-bottom: 16px; }
.plan h3 { font-size: 1.06rem; font-weight: 600; color: var(--text); margin-bottom: 10px; }
.plan-p {
  font-family: var(--f-dspl); font-weight: 600; font-size: 1.62rem;
  color: var(--text); font-variant-numeric: tabular-nums;
  padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid var(--line-2);
}
.plan-p span { display: block; font-family: var(--f-ui); font-weight: 400; font-size: 0.78rem; color: var(--text-muted); letter-spacing: 0; margin-top: 3px; }
.plan-l { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.plan-l li { position: relative; padding-left: 18px; font-size: 0.88rem; color: var(--text-muted); }
.plan-l li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.plan-g {
  margin-top: 22px; padding: 12px 14px;
  background: var(--bg-alt); border-left: 2px solid var(--amber);
  font-size: 0.83rem; color: var(--text);
}

/* ───────── scope ───────── */

.scope-grid { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: clamp(30px, 5vw, 68px); align-items: start; }
.nots { list-style: none; border-top: 1px solid var(--line); }
.nots li {
  position: relative; padding: 13px 0 13px 30px;
  border-bottom: 1px solid var(--line-2);
  font-size: 0.94rem; color: var(--text);
}
.nots li::before {
  content: ""; position: absolute; left: 4px; top: 21px;
  width: 11px; height: 1px; background: var(--esc);
}

/* ───────── contact ───────── */

.contact { background: var(--band); color: var(--text); padding: clamp(64px, 9vw, 100px) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.contact h2 { color: var(--text); }
.contact-sub { margin-top: 14px; color: var(--text-muted); max-width: 30em; }

.next { list-style: none; margin-top: 30px; border-top: 1px solid var(--line); }
.next li {
  display: flex; gap: 14px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--line);
  font-size: 0.92rem; color: var(--text-muted);
}
.next span { color: var(--amber-ink); font-size: 0.76rem; flex: none; }

.or-mail { margin-top: 26px; font-size: 0.9rem; color: var(--text-muted); }
.or-mail a { color: var(--text); }

.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card); padding: 26px 26px 28px; }

/* ───────── lead form ───────── */

.f-row { display: flex; flex-direction: column; margin-bottom: 15px; }
.f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.f-two .f-row { margin-bottom: 15px; }

.lead-form label {
  font-size: 0.78rem; color: var(--text-muted);
  margin-bottom: 6px; letter-spacing: 0.01em;
}
.lead-form .opt { color: var(--text-dim); }

.lead-form input,
.lead-form select,
.lead-form textarea {
  min-height: 44px;
  font-family: var(--f-ui); font-size: 0.94rem;
  color: var(--text); background: #FFFFFF;
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 12px 12px; width: 100%;
  transition: border-color .15s;
}
.lead-form textarea { resize: vertical; min-height: 72px; }
.lead-form select { appearance: none; background-image: none; cursor: pointer; }
.lead-form option { color: var(--text); }

.lead-form input::placeholder,
.lead-form textarea::placeholder { color: var(--text-dim); }

.lead-form input:hover,
.lead-form select:hover,
.lead-form textarea:hover { border-color: #BEC9C6; }

/* Pointer focus: border tint only, no ring. Keyboard focus keeps a real
   visible ring — killing the outline outright locked keyboard users out. */
.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
  outline: none; border-color: var(--amber-ink);
}
.lead-form input:focus-visible,
.lead-form select:focus-visible,
.lead-form textarea:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-color: var(--amber-ink);
}

.lead-form .invalid { border-color: #E0705A; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-submit { width: 100%; margin-top: 8px; }
.form-submit[disabled] { opacity: .6; cursor: default; }

.form-note {
  margin-top: 14px; font-size: 0.81rem;
  color: var(--text-dim); text-align: center;
}
.form-note.err { color: var(--red-deep); font-weight: 500; }
.form-note.ok { color: #7CD6A5; }

.form-done { text-align: center; padding: 18px 0 8px; }
.form-done h3 {
  font-family: var(--f-dspl); font-weight: 600; font-size: 1.15rem;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--text); margin-bottom: 12px;
}
.form-done p { font-size: 0.93rem; color: var(--text-muted); }

/* ───────── footer ───────── */

.foot { background: var(--bg-deep); color: var(--text-muted); padding: 48px 0 40px; }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-bottom: 32px; border-bottom: 1px solid var(--line);
}
.foot .mark { color: var(--text); margin-bottom: 12px; }
.foot-tag { font-size: 0.84rem; max-width: 26em; }
.foot-col { display: flex; flex-direction: column; gap: 9px; }
.foot-h {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--text-dim); margin-bottom: 3px;
}
.foot-col a { font-size: 0.87rem; color: var(--text-muted); text-decoration: none; }
.foot-col a:hover { color: var(--text); }
.foot-legal { font-size: 0.78rem; color: var(--text-dim); padding-top: 24px; }

/* ───────── responsive ───────── */

@media (max-width: 1000px) {
  .hero-grid, .panel, .scope-grid, .contact-grid, .faq-grid,
  .pain-grid, .show { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: 1fr; gap: 18px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .plans, .vsystems { grid-template-columns: 1fr; }
  .prods { grid-template-columns: repeat(2, 1fr); }
  .cover { grid-template-columns: 1fr; }
  .verts.three { grid-template-columns: repeat(2, 1fr); }
  .cycle { grid-template-columns: repeat(2, 1fr); }
  .cmp-panel, .askai-in, .pillars, .seq-in { grid-template-columns: 1fr; }
  .diag { grid-template-columns: 1fr; gap: 18px; }
  .diag-mid { grid-template-columns: 1fr auto 1fr; min-width: 0; }
  .diag-wires { height: 46px; }
  .diag-col { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .diag-h { width: 100%; margin-bottom: 0; }
  .vsystems.four { grid-template-columns: repeat(2, 1fr); }
  .foot-top { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  /* two-row nav: brand + CTA, then the two pillars underneath */
  .nav-in { flex-wrap: wrap; height: auto; gap: 12px; padding-top: 12px; }
  .btn-sm { margin-left: auto; }
  .nav-links {
    order: 3; width: 100%; min-width: 0; margin-left: 0;
    /* seven section anchors on a one-page site: wrap them rather than
       letting the row push the whole document sideways. */
    flex-wrap: wrap; justify-content: center;
    gap: 2px 18px;
    border-top: 1px solid var(--line-2); padding: 6px 0 8px;
  }
  .nav-links a {
    font-size: 0.86rem;
    /* WCAG 2.2 target size: keep the tap area comfortable on a phone */
    padding: 7px 2px; line-height: 1.2;
  }
  .steps { grid-template-columns: 1fr; }
  .strip-facts { grid-template-columns: 1fr; }
  .strip-facts > div {
    padding: 12px 0 0; border-left: none;
    border-top: 1px solid var(--line);
    display: flex; align-items: baseline; gap: 14px;
  }
  .strip-facts > div:first-child { padding-top: 0; border-top: none; }
  .strip-facts dt { margin-bottom: 0; flex: none; min-width: 78px; }
  .spec > div { grid-template-columns: 92px 1fr; gap: 12px; }
  .foot-grid { flex-direction: column; }
  .foot-legal { text-align: left; }
  .console-body { min-height: 260px; font-size: 0.72rem; }
  .f-two { grid-template-columns: 1fr; gap: 0; }
  .mid-cta { flex-direction: column; align-items: flex-start; }
  .verts, .notes, .foot-top, .cycle, .prods { grid-template-columns: 1fr; }
  .vsystems.four { grid-template-columns: 1fr; }
  .pains li { padding-left: 34px; }
}

@media (prefers-reduced-motion: reduce) {
  .ln { animation: none; opacity: 1; }
  .cursor { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ───────── instrument-panel surfaces ─────────
   A one-pixel light catch along the top edge of every card. Reads as a
   bevel under a light source rather than a flat fill, which is most of
   what separates "dark mode" from "hardware". */

.prod, .stage, .vert, .plan, .vsys, .cover-g, .pillar, .steps li, .order-card {
  position: relative;
}
.prod::before, .stage::before, .vert::before, .plan::before,
.vsys::before, .cover-g::before, .pillar::before, .steps li::before,
.order-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 241, 236, 0.16), transparent);
  pointer-events: none;
}

/* the console, feed and UI mocks get a stronger one — they're the artifacts */
.console, .feed, .ui { position: relative; }
.console::after, .feed::after, .ui::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(8, 144, 108, 0.34), transparent);
  pointer-events: none; z-index: 2;
}

/* live status dot, breathing */
.live {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ok); flex: none;
  animation: breathe 2.6s ease-in-out infinite;
}
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124, 214, 165, 0.45); }
  50%      { box-shadow: 0 0 0 5px rgba(124, 214, 165, 0); }
}

/* section seams read as hairlines rather than colour changes */
.sec.alt { border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }

@media (prefers-reduced-motion: reduce) {
  .live { animation: none; }
}

/* hero backdrop respects motion preferences: lattice and bloom hold a
   static frame, signals disappear entirely */
@media (prefers-reduced-motion: reduce) {
}

/* ───────── scroll-driven lifecycle ─────────
   A pipeline rail above the six stages. Scroll position fills the rail
   and lights each stage as the head passes it, so scrolling the section
   IS the lead moving through the lifecycle.

   The dimmed state only exists once JS adds .js-cycle, so with no JS
   (or a failed script) every stage renders at full strength. */

.rail { position: relative; margin-bottom: clamp(30px, 4vw, 44px); }

.rail-line {
  position: absolute; top: 5px; left: 8.33%; right: 8.33%;
  height: 1px; background: var(--line);
}
.rail-fill {
  position: absolute; inset: 0 auto 0 0;
  width: calc(var(--p, 1) * 100%);
  background: linear-gradient(90deg, rgba(233,161,21,.35), var(--amber));
  box-shadow: 0 0 12px rgba(8, 144, 108, 0.55);
}
.js-cycle .rail-fill { transition: width .18s linear; }

.rail-nodes { position: relative; display: flex; }
.rail-node {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.rn-dot {
  width: 11px; height: 11px; flex: none;
  background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.rn-k {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.63rem;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-dim);
}

/* dimmed-until-reached, only when the script is driving */
.js-cycle .rn-dot { background: var(--line); transition: background .35s ease, box-shadow .35s ease; }
.js-cycle .rn-k   { color: var(--line); transition: color .35s ease; }
.js-cycle .rail-node.lit .rn-dot {
  background: var(--amber);
  box-shadow: 0 0 10px rgba(8, 144, 108, 0.7);
}
.js-cycle .rail-node.lit .rn-k { color: var(--amber-ink); }

.js-cycle .stage {
  opacity: 0.55;
  transition: opacity .5s ease, transform .5s ease;
  transform: translateY(6px);
}
.js-cycle .stage.lit { opacity: 1; transform: none; }

/* the top-edge light catch warms to amber as a stage lights */
.js-cycle .stage::before { transition: background .5s ease; }
.js-cycle .stage.lit::before {
  background: linear-gradient(90deg, transparent, rgba(8, 144, 108, 0.5), transparent);
}

@media (max-width: 860px) {
  /* rail turns into a compact progress bar; per-stage labels would crowd */
  .rail-nodes { display: none; }
  .rail-line { left: 0; right: 0; top: 0; }
  .rail { height: 1px; margin-bottom: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  .js-cycle .stage { opacity: 1; transform: none; transition: none; }
  .js-cycle .rail-fill { transition: none; }
}

/* ───────── hero artifacts: dashboard + calculator ───────── */

.dash, .calc {
  background: var(--band);
  border: 1px solid var(--line);
  border-radius: var(--r-panel); overflow: hidden;
  box-shadow: 0 22px 52px -26px rgba(0, 0, 0, 0.75);
  position: relative;
}
.dash::after, .calc::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(233,161,21,.4), transparent);
  pointer-events: none;
}

.dash-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-deep);
}
.dash-title { font-size: 0.84rem; font-weight: 600; color: var(--text); }
.dash-live {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim);
}

/* ── dashboard ── */

.dash-kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1px; background: var(--line-2);
}
.kpi { background: var(--band); padding: 16px; }
.kpi-k {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim); margin-bottom: 8px;
}
.kpi-v {
  font-family: var(--f-dspl); font-weight: 600; font-size: 1.34rem;
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.kpi-d { font-size: 0.72rem; color: var(--text-dim); margin-top: 5px; }
.kpi-d.up { color: var(--ok); }

.dash-chart { padding: 16px 16px 8px; border-top: 1px solid var(--line-2); }
.dash-chart-h {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.76rem; color: var(--text-muted); margin-bottom: 10px;
}
.dash-chart svg { width: 100%; height: 78px; display: block; }
.dash-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dash-area { opacity: 0; transition: opacity .5s ease .6s; }
.dash.in .dash-line { animation: draw 1.5s ease forwards; }
.dash.in .dash-area { opacity: 1; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.dash-feed { border-top: 1px solid var(--line-2); padding: 12px 16px 6px; }
.dash-feed-h {
  font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.11em;
  color: var(--text-dim); margin-bottom: 8px;
}
.df-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 7px 0; font-size: 0.83rem;
  border-bottom: 1px solid var(--line-2);
  opacity: 0; transform: translateY(4px);
}
.df-row:last-child { border-bottom: none; }
.dash.in .df-row { animation: rowin .45s ease forwards; }
.dash.in .df-row:nth-child(2) { animation-delay: .25s; }
.dash.in .df-row:nth-child(3) { animation-delay: .5s; }
.dash.in .df-row:nth-child(4) { animation-delay: .75s; }
.dash.in .df-row:nth-child(5) { animation-delay: 1s; }
@keyframes rowin { to { opacity: 1; transform: none; } }
.df-t { color: var(--text); }
.df-m { color: var(--text-dim); flex: none; }

.dash-foot, .calc-foot {
  border-top: 1px solid var(--line-2);
  padding: 11px 16px;
  font-size: 0.72rem; color: var(--text-dim);
}

/* ── calculator ── */

.calc-out {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 1px; background: var(--line-2);
}
.co { background: var(--band); padding: 18px 16px; }
.co-k {
  font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim); margin-bottom: 9px;
}
.co-v {
  font-family: var(--f-dspl); font-weight: 600;
  font-size: clamp(1.3rem, 2.4vw, 1.72rem);
  color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.co-v.amber { color: var(--amber-ink); }
.co-v span {
  font-family: var(--f-ui); font-weight: 400; font-size: 0.64rem;
  color: var(--text-dim); margin-left: 4px; letter-spacing: 0;
}

.calc-in { padding: 16px 16px 6px; border-top: 1px solid var(--line-2); }
.cin { margin-bottom: 4px; }
.cin label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 0.79rem; color: var(--text-muted); margin-bottom: 7px;
}
.cin label b {
  font-family: var(--f-mono); font-weight: 500; font-size: 0.82rem;
  color: var(--amber-ink); font-variant-numeric: tabular-nums;
}

.cin input[type="range"] {
  -webkit-appearance: none; appearance: none;
  /* 44px tap target; the visible track stays a 2px hairline centred in it */
  width: 100%; height: 44px; background: none; cursor: pointer; display: block;
}
.cin input[type="range"]::-webkit-slider-runnable-track {
  height: 2px; background: var(--line); border-radius: 2px;
}
.cin input[type="range"]::-moz-range-track {
  height: 2px; background: var(--line); border-radius: 2px;
}
.cin input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; margin-top: -6.5px;
  background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  box-shadow: 0 0 10px rgba(8, 144, 108, 0.55);
}
.cin input[type="range"]::-moz-range-thumb {
  width: 15px; height: 15px; border: none;
  background: var(--amber);
  clip-path: polygon(50% 0, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
}
.cin input[type="range"]:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.calc-foot p { margin-bottom: 10px; max-width: 52ch; }

@media (max-width: 620px) {
  .dash-kpis { grid-template-columns: 1fr; }
  .calc-out { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .dash .dash-line { stroke-dashoffset: 0; animation: none; }
  .dash .dash-area { opacity: 1; transition: none; }
  .dash .df-row { opacity: 1; transform: none; animation: none; }
}

/* ───────── hero without an artifact ─────────
   The right half is deliberately empty so the live honeycomb has room
   to read as the subject rather than as texture behind a panel. */

.hero-solo { min-height: min(76vh, 700px); display: flex; align-items: center; }
.hero-solo > .grid { width: 100%; }        /* flex item must not shrink off the gutter */
.hero-solo .hero-grid { grid-template-columns: minmax(0, 1fr); }
.hero-solo .hero-copy { max-width: 720px; position: relative; z-index: 1; }
.hero-solo .lede { max-width: 34em; }

.hero { overflow-x: clip; }

/* ───────── calculator as a full-width section ───────── */

#leak .calc { max-width: none; }
#leak .calc-out { grid-template-columns: 1fr 1fr; }
#leak .co { padding: 26px 28px; }
#leak .co-v { font-size: clamp(1.7rem, 4vw, 2.7rem); }
#leak .co-k { font-size: 0.72rem; }

/* sliders in two columns once there's room */
#leak .calc-in {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 56px);
  padding: 22px 28px 12px;
}
#leak .calc-foot { padding: 16px 28px 20px; }
#leak .calc-foot p { max-width: 74ch; }

@media (max-width: 820px) {
  #leak .calc-in { grid-template-columns: 1fr; }
  #leak .calc-out { grid-template-columns: 1fr; }
  .hero-solo { min-height: 0; display: block; }
}

/* ───────── integrations catalogue ───────── */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.int-bar { margin-bottom: 20px; }

.int-search input {
  width: 100%;
  font-family: var(--f-ui); font-size: 0.98rem;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 16px; min-height: 48px;
}
.int-search input::placeholder { color: var(--text-dim); }
.int-search input:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.int-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.int-chip {
  font-family: var(--f-ui); font-size: 0.82rem;
  color: var(--text-muted); background: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 11px 15px; cursor: pointer; min-height: 44px;
  transition: color .15s, border-color .15s, background .15s;
}
.int-chip:hover { color: var(--text); border-color: var(--text-dim); }
.int-chip.on {
  color: var(--bg-deep); background: var(--amber); border-color: var(--amber-ink);
}

.int-count { font-size: 0.8rem; color: var(--text-dim); margin-bottom: 22px; }

.int-group { margin-bottom: 30px; }
.int-group[hidden] { display: none; }
.int-group h3 {
  font-family: var(--f-dspl); font-weight: 600; font-size: 0.68rem;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--text-dim); margin-bottom: 12px;
  padding-bottom: 9px; border-bottom: 1px solid var(--line-2);
}
.int-items { display: flex; flex-wrap: wrap; gap: 8px; }

.int {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-size: 0.88rem; color: var(--text);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 9px 13px;
}
.int[hidden] { display: none; }
.int b {
  font-family: var(--f-mono); font-weight: 500; font-size: 0.62rem;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--bg-deep); background: var(--amber);
  border-radius: 6px; padding: 2px 6px;
}
.int em {
  font-style: normal; font-size: 0.76rem; color: var(--text-dim);
}
.int.proven { border-color: rgba(8, 144, 108, 0.4); }

.int-none { font-size: 0.95rem; color: var(--text-muted); }

@media (max-width: 620px) {
  .int em { display: none; }   /* keep chips single-line on small screens */
}


/* ───────── light sections ─────────
   Dark is the site's default; light is punctuation. Each variant simply
   redefines the tokens, so every component inside inverts without any
   component-level overrides. */

.sec.light,
.band.light,
.vprop.light {
  /* white ground; cards flip to paper, exactly as the pricing menu does */
  --bg-alt:     #F2F6F5;
  --bg-deep:    #E9EFED;
  --panel:      #F2F6F5;
  --band:       #E4F2EE;
  --text:       #15171A;
  --text-muted: #5C6764;
  --text-dim:   #68746F;
  --line:       #DFE7E4;
  --line-2:     #EAF0EE;
  --amber-ink:  #066B51;
  --ok:         #136B41;
  --warn:       #8A5210;
  --esc:        #A32E17;
  background: #F7F8FA;
  color: var(--text);
  border-top: 1px solid rgba(14, 17, 22, 0.08);
  border-bottom: 1px solid rgba(14, 17, 22, 0.08);
}

.sec.light.white, .vprop.light.white, .band.light.white { background: #FFFFFF; }

/* the light-ground panels want a shadow rather than a glow */
.sec.light .ui,
.sec.light .calc,
.sec.light .dash,
.sec.light .prod,
.sec.light .plan,
.sec.light .vert,
.sec.light .stage,
.sec.light .vsys,
.sec.light .pillar,
.sec.light .cover-g,
.sec.light .int {
  box-shadow: 0 1px 2px rgba(14, 17, 22, 0.04), 0 8px 24px -16px rgba(14, 17, 22, 0.14);
}

/* the top-edge light catch is a dark-ground device; it reads as grime on white */
.sec.light .prod::before, .sec.light .stage::before, .sec.light .vert::before,
.sec.light .plan::before, .sec.light .vsys::before, .sec.light .cover-g::before,
.sec.light .pillar::before, .sec.light .steps li::before, .sec.light .order-card::before,
.sec.light .ui::after, .sec.light .calc::after { display: none; }

/* amber fills keep the bright cut and take dark text */
.sec.light .btn { color: #0E1116; background: var(--amber); border-color: var(--amber); }
.sec.light .int b { color: #0E1116; }
.sec.light .int-chip.on { color: #0E1116; }


/* ───────── tables ─────────
   Roomier cells and a single hairline per row. The old 9-10px padding
   made data feel cramped where the surrounding cards are generous. */

.ui-table th, .regime th, .cmp th { padding: 14px 22px; }
.ui-table td, .regime td, .cmp td { padding: 15px 22px; }

.ui-table th, .regime thead th, .cmp thead th {
  font-size: 0.67rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-dim);
  border-bottom: 1px solid var(--line);
}

.ui-table td, .regime td, .cmp td,
.regime tbody th, .cmp tbody th {
  border-bottom: 1px solid var(--line-2);
}
.ui-table tr:last-child td,
.regime tbody tr:last-child td, .regime tbody tr:last-child th,
.cmp tbody tr:last-child td, .cmp tbody tr:last-child th { border-bottom: none; }

/* rows lift very slightly on hover so a wide row stays readable across */
.ui-table tbody tr, .regime tbody tr, .cmp tbody tr { transition: background .12s; }
.ui-table tbody tr:hover, .regime tbody tr:hover, .cmp tbody tr:hover {
  background: rgba(8, 144, 108, 0.035);
}

.ui, .cmp-scroll { border-radius: var(--r-panel); overflow: hidden; }

/* chips sit inside rounder cells now */
.chip { border-radius: 6px; padding: 4px 10px; }

/* ───────── separated cards ─────────
   The grids above use a flush hairline pattern: a 1px gap over a line-
   coloured container, so only the outer corners round. Separating them
   into individually-bordered cards is what actually delivers curvature,
   and it's how the reference lays its cards out. */

.pillars, .verts, .cycle, .plans, .vsystems, .prods, .steps, .cover, .order {
  background: none;
  border: none;
  border-radius: 0;
  overflow: visible;
  gap: clamp(12px, 1.4vw, 18px);
}

.pillar, .vert, .stage, .plan, .vsys, .prod, .steps li, .cover-g, .order-card {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--panel);
}

/* the top-edge light catch has to follow the new corner */
.prod::before, .stage::before, .vert::before, .plan::before, .vsys::before,
.cover-g::before, .pillar::before, .steps li::before, .order-card::before {
  left: var(--r-card); right: var(--r-card);
}

/* hover now has somewhere to go, since cards are discrete objects */
.vert { transition: border-color .16s, transform .16s; }
.vert:hover { border-color: rgba(8, 144, 108, 0.45); transform: translateY(-2px); }

/* the comparison cards and artifacts get the panel radius */
.cmp-card, .console, .feed, .dash, .calc, .card { border-radius: var(--r-panel); }
.artifact { border-radius: var(--r-card); }

/* chips and pills */
.tag, .int, .int-chip { border-radius: 999px; }
.int { padding: 10px 15px; }



/* ───────── industry marquee ─────────
   Sits between the hero and the value prop. Two identical lists ride one
   track; translating the track -50% lands copy 2 exactly where copy 1
   started, so the loop has no seam. Masked at both edges so names fade
   rather than clip. Motion is decorative — it stops entirely for anyone
   who asked it to, and the names simply wrap instead. */
.indus {
  border-block: 1px solid var(--line);
  background: var(--bg-alt);
  padding: 18px 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.indus-track { display: flex; width: max-content; animation: indus-run 38s linear infinite; }
.indus-list {
  display: flex; align-items: center; gap: clamp(28px, 4vw, 56px);
  margin: 0; padding: 0 clamp(14px, 2vw, 28px); list-style: none;
}
.indus-list li {
  font-family: var(--f-mono); font-weight: 500;
  font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-dim); white-space: nowrap;
}
/* the amber dot between names, so the strip reads as one continuous run */
.indus-list li::after {
  content: ""; display: inline-block; vertical-align: middle;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--amber-ink); opacity: 0.5;
  margin-left: clamp(28px, 4vw, 56px);
}
@keyframes indus-run { to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .indus { -webkit-mask-image: none; mask-image: none; }
  .indus-track { animation: none; width: 100%; }
  .indus-list { flex-wrap: wrap; justify-content: center; row-gap: 10px; }
  .indus-list[aria-hidden="true"] { display: none; }
}

/* three pillars need more width than the old pair; step down before they crush */
@media (max-width: 1080px) { .pillars { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .pillars { grid-template-columns: 1fr; } }

/* ───────── bracketed labels (vesper) ─────────
   Section eyebrows move to the mono voice with bracket delimiters. The
   hexagon stays — the mark survives the costume change. */
.label, .eyebrow {
  font-family: var(--f-mono);
  font-weight: 500;
  letter-spacing: 0.12em;
}
.label::before, .eyebrow::before { content: "[ "; color: var(--text-dim); }
.label::after,  .eyebrow::after  { content: " ]"; color: var(--text-dim); }


/* ═══════════ pricing page ═══════════
   Ported from the approved services-and-pricing artifact. Scoped under
   .pg-pricing so its generic class names (.chip, .note, .step, .scope)
   never leak into the rest of the site. */

.pg-pricing .mast{position:relative;overflow:hidden;background:#FFFFFF;border-bottom:1px solid var(--line);padding:clamp(54px,8vw,96px) 0 clamp(46px,6vw,72px)}
.pg-pricing .mast .grid{position:relative}
.pg-pricing .mast h1{font-size:clamp(2.3rem,6vw,4.1rem);line-height:1.02;letter-spacing:-.035em;font-weight:700;text-wrap:balance;max-width:15ch;display:block}
.pg-pricing .mast h1 .g{color:var(--amber);display:block}
.pg-pricing .mast .lede{margin-top:24px;max-width:60ch;font-size:clamp(1.02rem,1.3vw,1.14rem);color:var(--text-muted)}
.pg-pricing .mast-meta{margin-top:30px;display:flex;flex-wrap:wrap;gap:8px 26px;font-size:.88rem;color:var(--text-dim)}
.pg-pricing .mast-meta a{color:var(--green-deep);text-decoration:none;font-weight:500}
.pg-pricing .mast-meta a:hover{text-decoration:underline}

.pg-pricing section{padding:clamp(58px,7.5vw,94px) 0;border-bottom:1px solid var(--line)}
.pg-pricing section.white{background:#FFFFFF}
.pg-pricing .sec-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:14px;max-width:none}
.pg-pricing .sec-num{font-size:.84rem;font-weight:600;color:var(--green-deep);letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pg-pricing h2{font-size:clamp(1.6rem,3.3vw,2.35rem);line-height:1.08;letter-spacing:-.03em;font-weight:700;text-wrap:balance}
.pg-pricing .sec-lede{max-width:64ch;color:var(--text-muted);margin-bottom:clamp(30px,4vw,44px);font-size:1.02rem}

.pg-pricing .headline-plan{background:var(--green-deep);color:#FFFFFF;border-radius:24px;padding:clamp(30px,4.4vw,46px);display:grid;grid-template-columns:1fr 1.05fr;gap:30px 48px;align-items:start;position:relative;z-index:2}
@media (max-width:900px){.pg-pricing .headline-plan{grid-template-columns:1fr}}
.pg-pricing .plan-flag{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#FFFFFF;border-radius:var(--r-btn);padding:6px 14px;font-size:.76rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;margin-bottom:18px}
.pg-pricing .headline-plan h2{color:#FFFFFF;font-size:clamp(1.9rem,3.6vw,2.7rem)}
.pg-pricing .plan-price{display:flex;align-items:baseline;gap:10px;margin:20px 0 16px;font-size:clamp(2.4rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pg-pricing .plan-price span{font-size:.95rem;font-weight:500;opacity:.85;letter-spacing:0}
.pg-pricing .headline-plan p{color:rgba(255,255,255,.94);font-size:1rem}
.pg-pricing .plan-cta{margin-top:24px;display:flex;gap:12px;flex-wrap:wrap}
.pg-pricing .btn-ondark{color:var(--green-deep);background:#FFFFFF;border-color:#FFFFFF}
.pg-pricing .btn-ondark:hover{background:var(--green-soft);border-color:var(--green-soft);color:var(--green-deep)}
.pg-pricing .plan-cols{display:grid;grid-template-columns:1fr 1fr;gap:22px 32px}
@media (max-width:620px){.pg-pricing .plan-cols{grid-template-columns:1fr}}
.pg-pricing .plan-cols h3{font-size:.8rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.86);margin-bottom:12px}
.pg-pricing ul.ticks{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.pg-pricing ul.ticks li{position:relative;padding-left:26px;font-size:.94rem;color:#FFFFFF;line-height:1.45}
.pg-pricing ul.ticks li::before{content:"";position:absolute;left:0;top:.28em;width:16px;height:16px;border-radius:50%;background:rgba(255,255,255,.22)}
.pg-pricing ul.ticks li::after{content:"";position:absolute;left:5px;top:.5em;width:5px;height:8px;border:solid #FFFFFF;border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.pg-pricing ul.ticks.no li::before{background:rgba(255,255,255,.14)}
.pg-pricing ul.ticks.no li::after{width:8px;height:0;border-width:0 0 1.8px 0;transform:none;left:4px;top:.86em;border-color:rgba(255,255,255,.75)}

.pg-pricing .step{display:flex;align-items:center;gap:14px;margin:clamp(32px,4vw,46px) 0 22px}
.pg-pricing .step-n{background:var(--blue);color:#FFFFFF;border-radius:var(--r-btn);padding:6px 15px;font-size:.76rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.pg-pricing .step h3{font-size:1.05rem;font-weight:600;letter-spacing:-.01em}
.pg-pricing .step::after{content:"";height:1px;flex:1;background:var(--line)}
.pg-pricing .subhead{display:flex;align-items:center;gap:14px;margin:clamp(36px,4.4vw,52px) 0 22px}
.pg-pricing .subhead h3{font-size:.84rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--text-muted)}
.pg-pricing .subhead::after{content:"";height:1px;flex:1;background:var(--line)}

.pg-pricing .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media (max-width:900px){.pg-pricing .tiles{grid-template-columns:1fr}}
.pg-pricing .tile{background:#FFFFFF;border:1px solid var(--line);border-radius:24px;padding:28px 26px 30px;display:flex;flex-direction:column;gap:15px}
.pg-pricing section.white .tile{background:var(--bg)}
.pg-pricing .tile.pick{border:1.5px solid var(--amber);box-shadow:0 14px 40px -28px rgba(8,144,108,.55)}
.pg-pricing .tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.pg-pricing .tile h4{font-size:1.06rem;font-weight:600;letter-spacing:-.02em;line-height:1.25}
.pg-pricing .chip{background:var(--green-soft);color:var(--green-deep);border-radius:var(--r-btn);padding:4px 11px;font-size:.7rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;border:0}
.pg-pricing .chip-red{background:#FAEAE7;color:var(--red-deep)}
.pg-pricing .chip-blue{background:var(--blue-soft);color:var(--blue)}
.pg-pricing .scope{font-size:.86rem;color:var(--text-dim);margin-top:-8px;padding:0;border:0;background:none}
.pg-pricing .price{display:flex;align-items:baseline;gap:8px;font-size:2.1rem;font-weight:700;letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.pg-pricing .price .per{font-size:.82rem;font-weight:500;color:var(--text-dim);letter-spacing:0}
.pg-pricing .tile .blurb{font-size:.94rem;color:var(--text-muted)}
.pg-pricing ul.feat{list-style:none;display:flex;flex-direction:column;gap:10px;padding:0;margin:0}
.pg-pricing ul.feat li{position:relative;padding-left:25px;font-size:.93rem;color:var(--text-muted);line-height:1.45}
.pg-pricing ul.feat li::before{content:"";position:absolute;left:0;top:.3em;width:15px;height:15px;border-radius:50%;background:var(--green-soft)}
.pg-pricing ul.feat li::after{content:"";position:absolute;left:4.5px;top:.5em;width:5px;height:8px;border:solid var(--amber);border-width:0 1.8px 1.8px 0;transform:rotate(42deg)}
.pg-pricing ul.feat li.carry{color:var(--text);font-weight:500;font-size:.88rem}
.pg-pricing .tile-foot{margin-top:auto;padding-top:18px;border-top:1px solid var(--line);font-size:.83rem;color:var(--text-dim);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pg-pricing .forwho{background:var(--bg);border-radius:14px;padding:15px 17px}
.pg-pricing section.white .forwho{background:#FFFFFF}
.pg-pricing .forwho h5{font-size:.69rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--green-deep);margin-bottom:7px}
.pg-pricing .forwho p{font-size:.89rem;color:var(--text-muted);line-height:1.5}

.pg-pricing .callout{display:flex;gap:20px;align-items:flex-start;background:var(--blue-soft);border:1px solid #D2E0E8;border-radius:24px;padding:22px 24px;margin-bottom:clamp(26px,3.4vw,38px)}
.pg-pricing .callout .k{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue);white-space:nowrap;padding-top:3px}
.pg-pricing .callout p{font-size:.96rem;color:#3D5666}
.pg-pricing .callout p b{color:var(--blue);font-weight:600}
@media (max-width:620px){.pg-pricing .callout{flex-direction:column;gap:10px}}

.pg-pricing .note{margin-top:20px;background:#FFFFFF;border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:14px;padding:18px 22px;font-size:.95rem;color:var(--text-muted)}
.pg-pricing section.white .note{background:var(--bg)}
.pg-pricing .note strong{color:var(--text);font-weight:600}
.pg-pricing .note + .note{margin-top:12px}

.pg-pricing .tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:24px;background:#FFFFFF}
.pg-pricing section.white .tablewrap{background:var(--bg)}
.pg-pricing table{width:100%;border-collapse:collapse;min-width:600px}
.pg-pricing caption{text-align:left;padding:22px 24px 6px;font-size:.84rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted)}
.pg-pricing thead th{font-size:.78rem;font-weight:600;letter-spacing:.04em;color:var(--text-dim);text-align:left;padding:14px 24px;border-bottom:1px solid var(--line)}
.pg-pricing thead th.r,.pg-pricing td.r{text-align:right}
.pg-pricing tbody td{padding:15px 24px;border-bottom:1px solid var(--line);font-size:.95rem;vertical-align:top}
.pg-pricing tbody tr:last-child td{border-bottom:0}
.pg-pricing tbody tr:hover td{background:var(--green-soft)}
.pg-pricing td.item{color:var(--text);font-weight:500;width:32%}
.pg-pricing td.desc{color:var(--text-muted)}
.pg-pricing td.r{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.pg-pricing .bdg{display:block;width:fit-content;margin-top:7px;border-radius:var(--r-btn);padding:3px 10px;font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase}
.pg-pricing .bdg-in{background:var(--green-soft);color:var(--green-deep)}
.pg-pricing .bdg-svc{background:var(--blue-soft);color:var(--blue)}

/* ── disclosure: detail stays published, one click off the main scroll ── */
.pg-pricing .disclose{margin-top:20px}
.pg-pricing .disclose summary{
  list-style:none;cursor:pointer;position:relative;
  background:#FFFFFF;border:1px solid var(--line);border-radius:24px;
  padding:18px 52px 18px 24px;
  font-size:.92rem;font-weight:600;color:var(--text);
  transition:border-color .18s ease;
}
.pg-pricing section.white .disclose summary{background:var(--bg)}
.pg-pricing .disclose summary:hover{border-color:var(--amber)}
.pg-pricing .disclose summary:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.pg-pricing .disclose summary::-webkit-details-marker{display:none}
.pg-pricing .disclose summary .cnt{font-weight:400;color:var(--text-dim);margin-left:6px}
.pg-pricing .disclose summary::after{
  content:"";position:absolute;right:26px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:1.5px solid var(--amber);border-bottom:1.5px solid var(--amber);
  transform:rotate(45deg);transition:transform .2s ease;
}
.pg-pricing .disclose[open] summary::after{transform:rotate(-135deg);margin-top:-2px}
.pg-pricing .disclose-body{margin-top:14px}
.pg-pricing .disclose-body .tablewrap + .tablewrap{margin-top:18px}
@media (prefers-reduced-motion:reduce){
  .pg-pricing .disclose summary,.pg-pricing .disclose summary::after{transition:none}
}

.pg-pricing .duo{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.pg-pricing .duo{grid-template-columns:1fr}}
.pg-pricing .pblock{background:#FFFFFF;border:1px solid var(--line);border-radius:24px;padding:28px 26px}
.pg-pricing section.white .pblock{background:var(--bg)}
.pg-pricing .pblock h4{font-size:1rem;font-weight:600;letter-spacing:-.02em;margin-bottom:16px}
.pg-pricing .pline{display:flex;justify-content:space-between;gap:18px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.pg-pricing .pline:last-child{border-bottom:0;padding-bottom:0}
.pg-pricing .pline .l{font-size:.93rem;color:var(--text-muted)}
.pg-pricing .pline .l b{color:var(--text);font-weight:600;display:block;font-size:.96rem}
.pg-pricing .pline .p{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}

.pg-pricing .custom{margin-top:18px;background:var(--blue);color:#FFFFFF;border-radius:24px;padding:32px 28px;display:grid;grid-template-columns:1.25fr 1fr;gap:24px 44px;align-items:start}
@media (max-width:860px){.pg-pricing .custom{grid-template-columns:1fr}}
.pg-pricing .custom h4{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;margin-bottom:12px}
.pg-pricing .custom p{font-size:.96rem;color:rgba(255,255,255,.86)}
.pg-pricing .custom .price{margin-top:18px;color:#FFFFFF}
.pg-pricing .custom .price .per{color:rgba(255,255,255,.7)}

.pg-pricing .terms-g{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 44px}
@media (max-width:820px){.pg-pricing .terms-g{grid-template-columns:1fr}}
.pg-pricing .term h4{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--green-deep);margin-bottom:8px}
.pg-pricing .term p{font-size:.95rem;color:var(--text-muted)}

.pg-pricing .close{background:#FFFFFF;border-bottom:0}
.pg-pricing .close-in{display:flex;justify-content:space-between;gap:34px;align-items:flex-end;flex-wrap:wrap}
.pg-pricing .close h2{max-width:16ch}
.pg-pricing .close p{color:var(--text-muted);max-width:46ch;margin-top:14px}

/* ── nav dropdown for the pricing sub-menu ── */
.nav-drop{position:relative;display:inline-flex;align-items:center}
.nav-drop > a{font-size:.9rem;color:var(--text-muted);text-decoration:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;transition:color .15s}
.nav-drop > a::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg) translateY(-2px);opacity:.6}
.nav-drop > a:hover{color:var(--text)}
.drop-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%);min-width:230px;background:#FFFFFF;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 50px -22px rgba(21,23,26,.25);padding:8px;list-style:none;margin:0;opacity:0;visibility:hidden;translate:0 6px;transition:opacity .16s ease,translate .16s ease,visibility .16s}
.nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{opacity:1;visibility:visible;translate:0 0}
.drop-menu li a{display:flex;justify-content:space-between;gap:14px;align-items:baseline;padding:10px 12px;border-radius:10px;text-decoration:none;font-size:.9rem;color:var(--text);white-space:nowrap}
.drop-menu li a:hover{background:var(--green-soft);color:var(--green-deep)}
.drop-menu li a .dp{font-size:.78rem;color:var(--text-dim);font-variant-numeric:tabular-nums}
@media (max-width:700px){.drop-menu{display:none}.nav-drop > a::after{display:none}}

/* ───────── the bases: tinted grounds, one solid card to finish ───────── */

.bases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
@media (max-width: 780px) { .bases { grid-template-columns: 1fr; } }
.base {
  border-radius: var(--r-card); padding: clamp(26px, 3vw, 34px);
  display: flex; flex-direction: column; gap: 12px;
  color: var(--text); min-height: 290px; overflow: hidden;
}
.base .mk { font-size: .8rem; font-weight: 600; letter-spacing: .02em; }
.base h4 { font-size: clamp(1.3rem, 2vw, 1.62rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; }
.base p { font-size: .95rem; color: var(--text-muted); max-width: 46ch; }
.base .go {
  align-self: flex-start; font-weight: 600; font-size: .9rem; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 2px; opacity: .85;
  transition: opacity .15s;
}
.base .go:hover { opacity: 1; }
.base .art { margin-top: auto; padding-top: 20px; }
.base .art svg { display: block; width: 100%; height: auto; max-height: 118px; }

.b1 { background: var(--red-soft); }
.b1 .mk, .b1 .go, .b1 .art { color: var(--red-deep); }
.b2 { background: var(--blue-soft); }
.b2 .mk, .b2 .go, .b2 .art { color: var(--blue); }
.b3 { background: var(--green-soft); }
.b3 .mk, .b3 .go, .b3 .art { color: var(--green-deep); }
.b4 { background: var(--green-deep); color: #FFFFFF; }
.b4 .mk { color: rgba(255,255,255,.84); }
.b4 p { color: rgba(255,255,255,.92); }
.b4 .go, .b4 .art { color: #FFFFFF; }

/* ───────── bridge between one step and the next ───────── */

.bridge {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 26px 28px; display: flex; gap: 26px;
  justify-content: space-between; align-items: center; flex-wrap: wrap;
}
.white .bridge { background: var(--bg); }
.bridge h4 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.02em; margin-bottom: 8px; }
.bridge p { font-size: .95rem; color: var(--text-muted); max-width: 62ch; }

/* Safety net. Any single overflowing child used to make the whole document
   scroll sideways on a phone; this contains it without creating a scroll
   container (which `hidden` would, breaking position:sticky on the nav). */
.pg-pricing .about-cols {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(26px, 4vw, 52px); align-items: start;
}
@media (max-width: 820px) { .pg-pricing .about-cols { grid-template-columns: 1fr; } }
.pg-pricing .about-lead { font-size: 1.06rem; color: var(--text); }
.pg-pricing .about-cols p { color: var(--text-muted); max-width: 62ch; }
.pg-pricing .about-cols p + p { margin-top: 14px; }
.pg-pricing .about-cols h3 {
  font-size: .95rem; font-weight: 600; letter-spacing: -.01em;
  margin-bottom: 8px; color: var(--text);
}
.pg-pricing .about-cols h3 + p { margin-bottom: 20px; }

/* ───────── legal pages ───────── */
.pg-pricing .legal { max-width: 74ch; margin-left: 0; margin-right: auto; }
.pg-pricing .legal h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem); font-weight: 700;
  letter-spacing: -.02em; margin: 38px 0 12px;
}
.pg-pricing .legal h2:first-child { margin-top: 0; }
.pg-pricing .legal p { color: var(--text-muted); margin-bottom: 14px; }
.pg-pricing .legal p strong { color: var(--text); font-weight: 600; }
.pg-pricing .legal a { color: var(--green-deep); font-weight: 500; }
.pg-pricing .legal-list { list-style: none; margin: 0 0 14px; }
.pg-pricing .legal-list li {
  position: relative; padding-left: 20px; margin-bottom: 10px;
  color: var(--text-muted);
}
.pg-pricing .legal-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
}
.pg-pricing .legal-back { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }

html { overflow-x: clip; }