/* ScaleUp Sidekicks: shared stylesheet */

:root {
  --bg: #faf7f1;
  --navy: #0d1730;
  --navy-deep: #0a1226;
  --blue: #2545ff;
  --blue-down: #1c37d8;
  --ink: #16181f;
  --muted: #5c6170;
  --line: #e5dfd3;
  --red: #c92f2f;
  --green: #1e7a46;
  --display: "Bricolage Grotesque", sans-serif;
  --body: "Geist", system-ui, sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--blue); color: #fff; }

a { color: var(--blue); }

a:focus-visible, button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--display);
  color: var(--navy);
  line-height: 1.08;
  letter-spacing: -0.01em;
}

h1 { font-weight: 800; font-size: clamp(40px, 6.5vw, 74px); }
h2 { font-weight: 800; font-size: clamp(28px, 4vw, 44px); }
h3 { font-weight: 600; font-size: 24px; }

.wrap { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 22px 24px;
}

.wordmark {
  font-family: var(--display);
  font-weight: 800;
  font-size: 20px;
  color: var(--navy);
  text-decoration: none;
  white-space: nowrap;
}

.nav-links { display: flex; align-items: center; flex-wrap: wrap; gap: 26px; }

.nav-links a { white-space: nowrap; }

.nav-links a:not(.btn) {
  color: var(--ink);
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 2px solid transparent;
  padding-bottom: 2px;
  transition: border-color 180ms ease;
}

.nav-links a:not(.btn):hover { border-color: var(--blue); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}

.btn:hover { background: var(--blue-down); transform: translateY(-1px); }

.btn-big { font-size: 17px; padding: 15px 30px; }

.btn-ghost {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: #fff; }

.textlink {
  color: var(--blue);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}

.textlink:hover { color: var(--blue-down); }

/* ---------- hero ---------- */

.hero { padding: 72px 0 48px; max-width: 900px; }

.kicker {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 18px;
}

.hero h1 { margin-bottom: 24px; }

.hero .lead {
  font-size: clamp(17px, 2vw, 21px);
  max-width: 56ch;
  color: var(--ink);
  margin-bottom: 32px;
}

.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }

.hero-sub {
  font-size: 15px;
  color: var(--muted);
  margin-top: 18px;
}

/* ---------- pain grid ---------- */

.pains {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px 40px;
  padding: 28px 0 72px;
}

.pain { border-top: 3px solid var(--navy); padding-top: 18px; }
.pain h3 { margin-bottom: 10px; font-size: 21px; }
.pain p { color: var(--ink); max-width: 44ch; font-size: 16px; }

/* ---------- cited statistics ---------- */

.stat {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 12px;
}

.stat b {
  font-family: var(--display);
  font-weight: 800;
  font-size: 21px;
  color: var(--blue);
  display: block;
  line-height: 1.15;
  margin-bottom: 3px;
}

.stat span { font-size: 13.5px; color: var(--muted); display: block; }
.stat cite { font-style: normal; font-size: 12.5px; color: var(--muted); opacity: 0.85; }

/* ---------- cost of inaction calculator ---------- */

.calc {
  background: var(--navy);
  color: #eef0f6;
  border-radius: 18px;
  padding: 44px 48px;
}

.calc h2 { color: #fff; margin-bottom: 12px; }
.calc > p.lede { max-width: 56ch; opacity: 0.9; margin-bottom: 30px; }

.calc-controls {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
  margin-bottom: 30px;
}

.calc-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9c1d6;
  margin-bottom: 12px;
}

.sizes { display: flex; gap: 10px; flex-wrap: wrap; }

.sizes button {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: #eef0f6;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 11px 18px;
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.sizes button:hover { border-color: #fff; }

.sizes button[aria-pressed="true"] {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}

.rate-wrap { display: flex; align-items: center; gap: 8px; }
.rate-wrap span { color: #b9c1d6; font-size: 15px; }

.rate-wrap input {
  width: 92px;
  font-family: var(--body);
  font-size: 15px;
  color: #fff;
  background: rgba(255,255,255,0.06);
  border: 1.5px solid rgba(255,255,255,0.28);
  border-radius: 8px;
  padding: 11px 12px;
}

.rate-wrap input:focus { outline: 3px solid var(--blue); outline-offset: 1px; }

.calc-out {
  border-top: 1px solid rgba(255,255,255,0.16);
  padding-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

.calc-out .k {
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b9c1d6;
  margin-bottom: 6px;
}

.calc-out .v {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 5vw, 54px);
  color: #fff;
  line-height: 1;
}

.calc-out .v.money { color: #8ea2ff; }

.calc-punch {
  border-top: 1px solid rgba(255,255,255,0.16);
  margin-top: 26px;
  padding-top: 22px;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.32;
  color: #fff;
  max-width: 40ch;
}

.calc-punch b { color: #8ea2ff; font-weight: 800; }

.calc-method {
  border-top: 1px solid rgba(255,255,255,0.16);
  margin-top: 26px;
  padding-top: 18px;
  font-size: 13.5px;
  color: #b9c1d6;
  max-width: 76ch;
}

.calc-method code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px;
  color: #fff;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  padding: 2px 6px;
}

.calc-method a { color: #9db1ff; }

/* ---------- guide block ---------- */

.guide {
  background: var(--navy);
  color: #f2efe8;
  border-radius: 16px;
  padding: 46px 48px;
  margin-bottom: 84px;
}

.guide p.empathy {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(21px, 2.8vw, 29px);
  line-height: 1.28;
  color: #fff;
  max-width: 30ch;
  margin-bottom: 18px;
}

.guide p.answer { max-width: 62ch; opacity: 0.9; margin-bottom: 20px; }

.guide .textlink { color: #9db1ff; }
.guide .textlink:hover { color: #fff; }

/* ---------- sections ---------- */

section.block { padding: 0 0 88px; }

.section-head { max-width: 660px; margin-bottom: 40px; }
.section-head h2 { margin-bottom: 14px; }
.section-head p { color: var(--muted); }
.section-head .kicker { margin-bottom: 14px; }

/* ---------- time map (index signature) ---------- */

.timemap {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 32px 26px;
}

.timemap-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: 20px;
}

.timemap-head strong {
  font-family: var(--display);
  font-weight: 600;
  font-size: 17px;
  color: var(--navy);
}
.timemap-head span { font-size: 13px; color: var(--muted); }

.tm-row {
  display: grid;
  grid-template-columns: 1fr 200px 74px;
  align-items: center;
  gap: 18px;
  padding: 9px 0;
}

.tm-task { font-size: 15.5px; }

.tm-bar {
  height: 12px;
  border-radius: 3px;
  background: var(--line);
  position: relative;
  overflow: hidden;
}

.tm-bar i {
  position: absolute;
  inset: 0;
  transform-origin: left;
  transform: scaleX(var(--w, 0.5));
  background: var(--navy);
  border-radius: 3px;
  transition: background 500ms ease calc(var(--i) * 130ms);
}

.tm-hours {
  font-size: 14px;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tm-flag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  opacity: 0;
  transition: opacity 400ms ease calc(var(--i) * 130ms + 200ms);
}

.timemap.lit .tm-row.auto .tm-bar i { background: var(--blue); }
.timemap.lit .tm-row.auto .tm-flag { opacity: 1; }

.tm-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  border-top: 2px solid var(--navy);
  margin-top: 18px;
  padding-top: 16px;
}

.tm-total .label { font-size: 15px; color: var(--ink); }

.tm-total .value {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--navy);
}
.timemap.lit .tm-total .value { color: var(--blue); }

.figure-note { font-size: 14px; color: var(--muted); margin-top: 14px; max-width: 62ch; }

/* ---------- offer card ---------- */

.offer {
  background: var(--navy);
  color: #eef0f6;
  border-radius: 18px;
  padding: 46px 48px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 48px;
  align-items: start;
}

.offer h2 { color: #fff; margin-bottom: 14px; }
.offer .offer-lead { opacity: 0.9; margin-bottom: 26px; max-width: 46ch; }

.offer-facts { list-style: none; }
.offer-facts li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 15.5px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.13);
}
.offer-facts li:last-child { border-bottom: none; }
.offer-facts .k { color: #b9c1d6; }
.offer-facts .v { font-weight: 600; color: #fff; text-align: right; }

.offer-price {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  padding: 28px;
}

.offer-price .amount {
  font-family: var(--display);
  font-weight: 800;
  font-size: 52px;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}

.offer-price .credit { font-size: 15px; color: #b9c1d6; margin-bottom: 22px; }
.offer-price .btn { width: 100%; text-align: center; }
.offer-price .fine { font-size: 13.5px; color: #b9c1d6; margin-top: 14px; text-align: center; }

/* ---------- deliverables ---------- */

.delivs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.deliv {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px;
  transition: border-color 180ms ease, transform 180ms ease;
}

.deliv:hover { border-color: var(--navy); transform: translateY(-2px); }

.deliv .num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.1em;
  color: var(--blue);
  display: block;
  margin-bottom: 10px;
}

.deliv h3 { font-size: 21px; margin-bottom: 8px; }
.deliv p { font-size: 15.5px; margin-bottom: 14px; }

.deliv .kills {
  font-size: 14.5px;
  color: var(--muted);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-style: italic;
}

.deliv.wide { grid-column: 1 / -1; }

/* ---------- guarantee band ---------- */

.guarantee {
  border: 2px solid var(--navy);
  border-radius: 16px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: center;
  background: #fff;
}

.guarantee .seal {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  border: 3px solid var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.15;
  color: var(--blue);
}

.guarantee h2 { font-size: clamp(24px, 3vw, 34px); margin-bottom: 10px; }
.guarantee p { max-width: 58ch; }

/* ---------- ownership stack ---------- */

.own { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }

.own-item {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 18px;
}
.own-item strong { display: block; font-weight: 600; margin-bottom: 3px; }
.own-item span { font-size: 15px; color: var(--muted); }

/* ---------- ten day timeline ---------- */

.timeline { position: relative; padding-left: 56px; max-width: 780px; }

.tl-rail {
  position: absolute;
  left: 14px; top: 12px; bottom: 12px;
  width: 3px;
  background: var(--line);
  border-radius: 2px;
}

.tl-fill {
  position: absolute; inset: 0;
  background: var(--blue);
  border-radius: 2px;
  transform: scaleY(0);
  transform-origin: top;
}

.tl-step { position: relative; padding: 0 0 52px; }
.tl-step:last-child { padding-bottom: 12px; }

.tl-step::before {
  content: "";
  position: absolute;
  left: -50px; top: 8px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--bg);
  border: 3px solid var(--navy);
}

.tl-day {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.tl-step h3 { font-size: clamp(21px, 2.8vw, 28px); font-weight: 800; margin-bottom: 10px; }
.tl-step p { max-width: 56ch; margin-bottom: 8px; }

/* ---------- pricing ---------- */

.tiers { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }

.tier {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 28px;
  transition: border-color 180ms ease, transform 180ms ease;
}

.tier:hover { border-color: var(--navy); transform: translateY(-2px); }
.tier h3 { margin-bottom: 4px; }

.tier .price {
  font-family: var(--display);
  font-weight: 800;
  font-size: 34px;
  color: var(--navy);
  margin: 14px 0 2px;
}

.tier .term { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
.tier p.desc { font-size: 15.5px; margin-bottom: 12px; }
.tier ul { list-style: none; font-size: 15px; }
.tier ul li { padding: 6px 0 6px 22px; position: relative; }
.tier ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 14px;
  width: 10px; height: 3px;
  background: var(--blue);
}

.tier--featured {
  background: var(--navy);
  border-color: var(--navy);
  color: #f2efe8;
}
.tier--featured:hover { border-color: var(--blue); }
.tier--featured h3, .tier--featured .price { color: #fff; }
.tier--featured .term { color: #b9c1d6; }
.tier--featured .chip {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 99px;
  margin-bottom: 14px;
}

.later {
  border-top: 1px solid var(--line);
  margin-top: 30px;
  padding-top: 22px;
  max-width: 62ch;
  color: var(--muted);
  font-size: 15.5px;
}
.later strong { color: var(--ink); font-weight: 600; }

/* ---------- team grid ---------- */

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.agent-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  transition: border-color 180ms ease, transform 180ms ease;
}
.agent-card:hover { border-color: var(--navy); transform: translateY(-2px); }
.agent-card h3 { font-size: 18px; margin-bottom: 4px; }
.agent-card p { font-size: 14.5px; color: var(--muted); }
.agent-card.custom { border-style: dashed; border-color: var(--muted); background: transparent; }

.team-base {
  background: var(--navy);
  border-radius: 12px;
  padding: 18px 24px;
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
}
.team-base strong { color: #fff; font-family: var(--display); font-weight: 600; font-size: 17px; }
.team-base span { color: #b9c1d6; font-size: 14px; }

/* ---------- context stack ---------- */

.stack { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; }

.stack-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
}
.stack-row:last-child { border-bottom: none; }
.stack-name { font-weight: 600; }
.stack-note { color: var(--muted); font-size: 15px; text-align: right; }
.stack-base { background: var(--navy); }
.stack-base .stack-name { color: #fff; font-family: var(--display); }
.stack-base .stack-note { color: #b9c1d6; }

/* ---------- pipeline + proof diagrams ---------- */

.pipeline-frame { overflow: hidden; }
.pipeline-svg { width: 100%; height: auto; display: block; }
.pipeline-svg.mobile { display: none; }

.p-block { fill: var(--navy); }
.p-blocktext {
  fill: #fff;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: 0.06em;
}
.p-input-box { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.p-input-label {
  fill: var(--ink);
  font-family: var(--body);
  font-weight: 500;
  font-size: 15px;
  transition: opacity 300ms ease;
}
.p-input-label.fade { opacity: 0; }
.p-cap { fill: var(--muted); font-family: var(--body); font-size: 12.5px; }

.p-path {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 700ms ease calc(var(--i) * 120ms);
}
.p-node {
  fill: var(--bg);
  stroke: var(--navy);
  stroke-width: 2;
  transition: fill 400ms ease calc(var(--i) * 120ms + 350ms),
              stroke 400ms ease calc(var(--i) * 120ms + 350ms);
}
.p-label {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 14.5px;
  transition: fill 400ms ease calc(var(--i) * 120ms + 350ms);
}

.run .p-path { stroke-dashoffset: 0; }
.run .p-node { fill: var(--blue); stroke: var(--blue); }
.run .p-label { fill: var(--ink); font-weight: 500; }

.mini-diagram { margin: 8px 0 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mini-diagram svg { width: 100%; max-width: 760px; min-width: 560px; height: auto; display: block; }

.diagram-hint { display: none; font-size: 13px; color: var(--muted); margin: -28px 0 34px; }

.d-cap { fill: var(--muted); font-family: var(--body); font-size: 12.5px; }
.d-label { fill: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 500; }
.d-boxlabel { fill: var(--ink); font-family: var(--body); font-size: 14px; font-weight: 500; }
.d-block { fill: var(--navy); }
.d-blocktext { fill: #fff; font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: 0.06em; }
.d-box { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.d-dash { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 5; }
.d-tick { stroke: var(--green); stroke-width: 2.5; fill: none; }

/* ---------- proof modules ---------- */

.module { border-top: 1px solid var(--line); padding: 64px 0; }
.module:first-of-type { border-top: none; padding-top: 24px; }

.module-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 99px;
  padding: 4px 12px;
  margin-bottom: 16px;
}

.module-tag.demo { color: var(--muted); border-color: var(--muted); }

.module h2 { margin-bottom: 14px; }
.module p.intro { max-width: 62ch; margin-bottom: 32px; }

.strip { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 16px; }

.pane { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 26px; }

.pane-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}

.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.red { background: var(--red); }
.dot.green { background: var(--green); }

.pane.raw p {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 13.5px;
  line-height: 1.75;
}

.pane.pub p { font-size: 15.5px; line-height: 1.75; margin-bottom: 12px; }

mark {
  background: transparent;
  color: inherit;
  border-radius: 3px;
  padding: 1px 3px;
  transition: background 500ms ease calc(var(--i) * 350ms),
              box-shadow 500ms ease calc(var(--i) * 350ms);
}

.lit mark.prob { background: rgba(201, 47, 47, 0.14); box-shadow: inset 0 -2px 0 var(--red); }
.lit mark.fix { background: rgba(30, 122, 70, 0.14); box-shadow: inset 0 -2px 0 var(--green); }

.strip-legend {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 40px;
}
.strip-legend span { display: flex; align-items: center; gap: 8px; }

.frame {
  width: 100%;
  height: 640px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
}

.frame-caption {
  font-size: 14px;
  color: var(--muted);
  margin: 12px 0 36px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}


.demo-banner {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 8px;
  padding: 16px 20px;
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 32px;
  max-width: 72ch;
}
.demo-banner strong { color: var(--ink); font-weight: 600; }

/* ---------- build library ---------- */

.builds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.build-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px 24px 18px;
  transition: border-color 180ms ease, transform 180ms ease;
}

.build-card:hover { border-color: var(--navy); transform: translateY(-2px); }

.build-card h3 { font-size: 19px; margin-bottom: 6px; }
.build-card p.what { font-size: 15px; color: var(--ink); margin-bottom: 14px; }

.build-card svg { width: 100%; height: auto; display: block; margin-bottom: 14px; }

.build-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  font-size: 12.5px;
}

.build-meta span {
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 3px 11px;
  color: var(--muted);
}

.build-meta span.live { color: var(--blue); border-color: var(--blue); font-weight: 600; }

/* ---------- role cards (the team page) ---------- */

.roles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.role {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 26px 26px 20px;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms ease, transform 180ms ease;
}

.role:hover { border-color: var(--navy); transform: translateY(-2px); }

.role h3 { font-size: 21px; margin-bottom: 8px; }
.role p.job { font-size: 15.5px; margin-bottom: 14px; }

.role .makes {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 18px;
  flex-grow: 1;
}
.role .makes b { color: var(--ink); font-weight: 600; }

.role-hours {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.role-hours .n {
  font-family: var(--display);
  font-weight: 800;
  font-size: 28px;
  color: var(--blue);
  line-height: 1;
}

.role-hours .n.soft { color: var(--muted); font-size: 19px; }
.role-hours .cap { font-size: 13.5px; color: var(--muted); }

.role--human { background: transparent; border-style: dashed; }
.role--human .role-hours .n { color: var(--navy); }

/* the running total */
.tally {
  background: var(--navy);
  color: #eef0f6;
  border-radius: 16px;
  padding: 40px 44px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 36px;
  align-items: center;
}

.tally .big {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(54px, 8vw, 86px);
  color: #fff;
  line-height: 0.9;
}
.tally .big span { display: block; font-size: 15px; font-weight: 500; color: #b9c1d6; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 10px; }
.tally p { max-width: 52ch; }
.tally p + p { margin-top: 12px; }
.tally .textlink { color: #9db1ff; }
.tally .textlink:hover { color: #fff; }

/* ---------- the stack figure (destination view) ---------- */

.stackfig {
  margin: 8px 0 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.stackfig svg {
  width: 100%;
  min-width: 620px;
  height: auto;
  display: block;
}

.s-band {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.s-box { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.s-ghost { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.s-label { fill: var(--ink); font-family: var(--body); font-size: 12px; font-weight: 500; }
.s-base { fill: var(--navy); }
.s-basetext { fill: #fff; font-family: var(--display); font-weight: 600; font-size: 15px; }
.s-basesub { fill: #b9c1d6; font-family: var(--body); font-size: 11.5px; }
.s-link { fill: none; stroke: var(--blue); stroke-width: 1.8; }

/* motion variants for the build library. each diagram gets the motion that
   matches what it does, so eight cards don't all animate identically.
   all are triggered by .run landing on the parent svg. */

.a-draw, .a-draw-rev {
  fill: none;
  stroke: var(--blue);
  stroke-width: 2;
  stroke-dasharray: 1;
}
.a-draw { stroke-dashoffset: 1; }
.a-draw-rev { stroke-dashoffset: -1; }
.a-draw, .a-draw-rev {
  transition: stroke-dashoffset 620ms ease calc(var(--i, 0) * 110ms);
}
.run .a-draw, .run .a-draw-rev { stroke-dashoffset: 0; }

.a-pop {
  opacity: 0;
  transform: scale(0.35);
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 420ms cubic-bezier(0.2, 1.5, 0.4, 1) calc(var(--i, 0) * 85ms),
              opacity 260ms ease calc(var(--i, 0) * 85ms);
}
.run .a-pop { opacity: 1; transform: scale(1); }

.a-drop {
  opacity: 0;
  transform: translateY(-9px);
  transform-box: fill-box;
  transition: transform 480ms cubic-bezier(0.3, 1.2, 0.4, 1) calc(var(--i, 0) * 105ms),
              opacity 380ms ease calc(var(--i, 0) * 105ms);
}
.run .a-drop { opacity: 1; transform: none; }

.a-slide {
  opacity: 0;
  transform: translateX(-14px);
  transform-box: fill-box;
  transition: transform 460ms ease calc(var(--i, 0) * 95ms),
              opacity 360ms ease calc(var(--i, 0) * 95ms);
}
.run .a-slide { opacity: 1; transform: none; }

.a-fade {
  opacity: 0;
  transition: opacity 440ms ease calc(var(--i, 0) * 105ms);
}
.run .a-fade { opacity: 1; }

.a-grow {
  transform: scaleX(0);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 520ms ease calc(var(--i, 0) * 105ms);
}
.run .a-grow { transform: scaleX(1); }

/* diagram parts specific to the build library */
.b-fill { fill: var(--navy); }
.b-open { fill: #fff; stroke: var(--navy); stroke-width: 1.5; }
.b-ghost { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 5 4; }
.b-live { fill: var(--blue); }
.b-good { fill: none; stroke: var(--green); stroke-width: 2; }
.b-bad { fill: none; stroke: var(--red); stroke-width: 2; }
.b-badfill { fill: var(--red); }
.b-t {
  fill: var(--muted);
  font-family: var(--body);
  font-size: 11px;
}
.b-t-dark { fill: var(--ink); font-family: var(--body); font-size: 11px; font-weight: 500; }
.b-t-inv { fill: #fff; font-family: var(--body); font-size: 10.5px; font-weight: 500; }

/* ---------- stakes (what happens if nothing changes) ---------- */

.stakes {
  border-left: 3px solid var(--red);
  padding: 4px 0 4px 26px;
  max-width: 62ch;
}

.stakes p {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.4;
  color: var(--navy);
}

@media (max-width: 640px) {
  .stakes { padding-left: 18px; }
}

/* ---------- cta band ---------- */

.cta-band {
  background: var(--navy);
  color: #f2efe8;
  text-align: center;
  padding: 78px 24px;
}

.cta-band h2 { color: #fff; margin-bottom: 14px; }
.cta-band p { max-width: 54ch; margin: 0 auto 30px; opacity: 0.9; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------- footer ---------- */

.foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 1100px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  font-size: 14px;
  color: var(--muted);
}

/* ---------- book page ---------- */

.book-wrap { max-width: 760px; margin: 0 auto; padding: 64px 24px 84px; }
.book-wrap h1 { margin-bottom: 22px; }
.book-wrap p.what { max-width: 58ch; margin-bottom: 28px; }

.book-facts {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 8px 24px;
  margin-bottom: 36px;
}
.book-facts .row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15.5px;
}
.book-facts .row:last-child { border-bottom: none; }
.book-facts .k { color: var(--muted); }
.book-facts .v { font-weight: 600; text-align: right; }

/* ---------- entrance animation ---------- */

[data-animate] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms ease calc(var(--d, 0) * 130ms),
              transform 600ms ease calc(var(--d, 0) * 130ms);
}

[data-animate].in { opacity: 1; transform: none; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  [data-animate] { opacity: 1; transform: none; }
  .p-path { stroke-dashoffset: 0; }
  .p-node { fill: var(--blue); stroke: var(--blue); }
  .p-label { fill: var(--ink); font-weight: 500; }
  .a-draw, .a-draw-rev { stroke-dashoffset: 0 !important; }
  .a-pop, .a-drop, .a-slide, .a-fade { opacity: 1 !important; transform: none !important; }
  .a-grow { transform: none !important; }
  mark.prob { background: rgba(201, 47, 47, 0.14); box-shadow: inset 0 -2px 0 var(--red); }
  mark.fix { background: rgba(30, 122, 70, 0.14); box-shadow: inset 0 -2px 0 var(--green); }
  .tl-fill { transform: none; }
  .tm-row.auto .tm-bar i { background: var(--blue); }
  .tm-row.auto .tm-flag { opacity: 1; }
  .tm-total .value { color: var(--blue); }
}

/* ---------- mobile ---------- */

@media (max-width: 940px) {
  .offer { grid-template-columns: 1fr; gap: 32px; padding: 36px 30px; }
  .calc { padding: 34px 28px; }
  .calc-controls { grid-template-columns: 1fr; gap: 22px; align-items: start; }
  .calc-out { grid-template-columns: 1fr; gap: 22px; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .tiers, .delivs, .own, .builds, .roles { grid-template-columns: 1fr; }
  .nav-links a:not(.btn) { padding: 9px 0; }
  .tally { grid-template-columns: 1fr; gap: 22px; padding: 32px 28px; }
  .tier--featured { order: -1; }
  .strip { grid-template-columns: 1fr; }
  .guide { padding: 34px 28px; }
  .guarantee { grid-template-columns: 1fr; gap: 22px; padding: 32px 28px; }
}

@media (max-width: 760px) {
  .pipeline-svg.desktop { display: none; }
  .pipeline-svg.mobile { display: block; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 360px) {
  .wrap, .book-wrap { padding-left: 16px; padding-right: 16px; }
}

@media (max-width: 640px) {
  body { font-size: 16px; }
  .diagram-hint { display: block; }

  /* five nav items no longer fit one row at 375px, so wrap them and give
     each link a 44px tap target rather than the 26px a bare link gets */
  .nav { padding: 12px 16px 14px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .nav-links { flex-wrap: wrap; width: 100%; gap: 0 18px; }
  /* two per row reads deliberate; 3-plus-1 leaves an orphan */
  .nav-links a:not(.btn) { flex: 0 0 calc(50% - 9px); padding: 10px 0; }
  .nav-links a.btn { width: 100%; text-align: center; margin-top: 8px; padding: 14px 20px; }
  .wordmark { font-size: 18px; }
  .nav-links { gap: 16px; }
  .nav-links a:not(.btn) { font-size: 14px; }
  .btn { padding: 10px 16px; font-size: 14px; }
  .hero { padding: 40px 0 32px; }
  .pains { grid-template-columns: 1fr; gap: 24px; padding-bottom: 48px; }
  .guide { margin-bottom: 56px; }
  section.block { padding-bottom: 58px; }
  .module { padding: 44px 0; }
  .team-grid { grid-template-columns: 1fr; }
  .timemap { padding: 22px 20px; }
  .tm-row { grid-template-columns: 1fr 90px; gap: 10px; }
  .tm-bar { display: none; }
  .timeline { padding-left: 42px; }
  .tl-step::before { left: -38px; }
  .offer-price .amount { font-size: 44px; }
  .frame { height: 560px; }
  .cta-band { padding: 56px 20px; }
  .foot { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════
   PROOF LAYER
   Motion here deliberately avoids the site's existing
   fade-and-rise (opacity + translateY, 600ms ease). Two new
   ideas, each encoding something true about its content:
     1. case studies  -> a measured value transitions from its
        before state to its after state. Nothing enters; a
        number and a bar change in front of you.
     2. architecture  -> a signal fills a spine from the root
        downward and each branch illuminates as it passes.
        No transforms on the branches at all, only light.
   ═══════════════════════════════════════════════════════════ */

/* ---------- nav grouping ---------- */

.navgroup { position: relative; }

.navgroup-btn {
  font-family: var(--body);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0 0 2px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: border-color 120ms linear;
}

.navgroup-btn:hover { border-color: var(--blue); }
.navgroup-btn[aria-expanded="true"] { border-color: var(--blue); }

.navgroup-btn .caret {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  transition: transform 120ms linear;
}
.navgroup-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

.navgroup-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 214px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 12px 28px rgba(13, 23, 48, 0.12);
  z-index: 60;
  display: grid;
  gap: 2px;
}

.navgroup-menu[hidden] { display: none; }

.navgroup-menu a {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  border-bottom: none;
  transition: background 120ms linear;
}

.navgroup-menu a:hover { background: var(--bg); }
.navgroup-menu a[aria-current="page"] { color: var(--blue); }

.navgroup-menu .lead-item { display: flex; flex-direction: column; align-items: flex-start; }
.navgroup-menu .lead-item b { display: block; width: 100%; font-weight: 600; }
.navgroup-menu .lead-item span { display: block; width: 100%; font-size: 12.5px; line-height: 1.35; color: var(--muted); margin-top: 3px; }
.navgroup-menu .lead-item[aria-current="page"] span { color: var(--blue); opacity: 0.8; }

/* ---------- case studies ---------- */

.case-note {
  border-left: 3px solid var(--blue);
  padding: 4px 0 4px 20px;
  margin-bottom: 44px;
  max-width: 62ch;
}
.case-note strong { display: block; margin-bottom: 6px; }
.case-note p { font-size: 15.5px; color: var(--muted); }

.cases { display: grid; gap: 20px; }

.case {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 28px 26px;
}

.case-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 8px; }

.case-num {
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: var(--blue);
  letter-spacing: 0.06em;
}

.case h3 { font-size: clamp(20px, 3.4vw, 26px); line-height: 1.15; margin-bottom: 16px; }
.case p { font-size: 16px; margin-bottom: 14px; }

.case-qual {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--muted);
  border-radius: 99px;
  padding: 3px 11px;
  margin-bottom: 14px;
}

.case-settles {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin: 18px 0 0;
  font-size: 15px;
  color: var(--muted);
}
.case-settles b { color: var(--ink); font-weight: 600; }

/* the measured moment: a value moving from before to after */

.metric {
  background: var(--bg);
  border-radius: 10px;
  padding: 20px 20px 18px;
  margin: 20px 0 4px;
}

.metric-readout { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }

.metric-val {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(38px, 7vw, 52px);
  line-height: 0.95;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
}

.metric-cap { font-size: 14.5px; color: var(--muted); max-width: 30ch; }

.metric-track {
  position: relative;
  height: 10px;
  border-radius: 99px;
  background: rgba(13, 23, 48, 0.09);
  overflow: hidden;
}

.metric-fill {
  position: absolute;
  inset: 0;
  border-radius: 99px;
  background: var(--blue);
  transform: scaleX(var(--from, 0));
  transform-origin: left center;
  /* decisive in-out, distinct from the site's plain ease */
  transition: transform 1150ms cubic-bezier(0.65, 0, 0.35, 1) 260ms;
}

.run .metric-fill { transform: scaleX(var(--to, 1)); }

.metric--estimate .metric-track { background: transparent; border: 1.5px dashed rgba(37, 69, 255, 0.4); }
.metric--estimate .metric-fill { background: var(--blue); opacity: 0.75; }
.metric--estimate .metric-val { color: var(--navy); }

.metric-scale { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--muted); margin-top: 8px; }

/* ---------- architecture: root and branches ---------- */

.tree { position: relative; padding-left: 34px; }

.tree-spine {
  position: absolute;
  left: 9px;
  top: 8px;
  bottom: 30px;
  width: 3px;
  border-radius: 2px;
  background: rgba(13, 23, 48, 0.12);
  overflow: hidden;
}

.tree-spine i {
  position: absolute;
  inset: 0;
  background: var(--blue);
  transform: scaleY(0);
  transform-origin: top center;
  /* a signal travels at a constant rate, so: linear */
  transition: transform 1500ms linear 200ms;
}

.run .tree-spine i { transform: scaleY(1); }

.root {
  position: relative;
  background: var(--navy);
  color: #eef0f6;
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 22px;
}

.root::before {
  content: "";
  position: absolute;
  left: -30px;
  top: 30px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px var(--bg);
}

.root .tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8ea2ff;
  display: block;
  margin-bottom: 8px;
}
.root strong { font-family: var(--display); font-weight: 700; font-size: 19px; color: #fff; display: block; margin-bottom: 8px; }
.root p { font-size: 15px; color: #b9c1d6; }

.branch {
  position: relative;
  border: 1px solid var(--line);
  border-left: 3px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 20px 22px;
  margin-bottom: 14px;
  /* illumination only. no transform, so this cannot read as an entrance */
  opacity: 0.32;
  transition: opacity 380ms cubic-bezier(0.4, 0, 0.2, 1),
              border-left-color 380ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(420ms + var(--b, 0) * 250ms);
}

.branch::before {
  content: "";
  position: absolute;
  left: -29px;
  top: 27px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--line);
  box-shadow: 0 0 0 4px var(--bg);
  transition: background 380ms cubic-bezier(0.4, 0, 0.2, 1);
  transition-delay: calc(420ms + var(--b, 0) * 250ms);
}

.run .branch { opacity: 1; border-left-color: var(--blue); }
.run .branch::before { background: var(--blue); }

.branch h3 { font-size: 18px; margin-bottom: 6px; }
.branch p { font-size: 15.5px; margin-bottom: 10px; }
.branch .settles { font-size: 14.5px; color: var(--muted); }
.branch .settles b { color: var(--ink); font-weight: 600; }

/* ---------- proof-layer reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .metric-fill { transform: scaleX(var(--to, 1)) !important; }
  .tree-spine i { transform: scaleY(1) !important; }
  .branch { opacity: 1 !important; border-left-color: var(--blue) !important; }
  .branch::before { background: var(--blue) !important; }
}

/* ---------- proof-layer mobile ---------- */

@media (max-width: 640px) {
  .navgroup { width: 100%; }
  .navgroup-btn { width: 100%; justify-content: space-between; padding: 10px 0; }
  .navgroup-menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 6px;
    box-shadow: none;
  }
  .navgroup-menu a { padding: 12px; min-height: 44px; }
  .navgroup-menu .lead-item { display: flex; flex-direction: column; align-items: flex-start; }
  .navgroup-menu .lead-item b, .navgroup-menu .lead-item span { display: block; width: 100%; }
  .case { padding: 22px 18px; }
  .metric { padding: 16px 16px 14px; }
  .tree { padding-left: 26px; }
  .tree-spine { left: 5px; }
  .root::before { left: -25px; width: 10px; height: 10px; }
  .branch::before { left: -24px; width: 8px; height: 8px; }
  .root, .branch { padding-left: 18px; padding-right: 18px; }
}

/* Touch-sized target for the disclosure button on tablet widths. This lives at
   the end of the file on purpose: the base .navgroup-btn rule is declared in the
   proof-layer block above, so an override earlier in the file loses on source
   order even at equal specificity. */
@media (max-width: 900px) {
  /* deterministic 44px touch target rather than padding arithmetic against an
     inherited line-height */
  .navgroup-btn { min-height: 44px; padding-top: 0; padding-bottom: 0; }
  .nav-links a:not(.btn) { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ---------- what actually gets built (homepage) ---------- */

.fixes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.fix {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 20px 20px 16px;
  display: flex;
  flex-direction: column;
  transition: border-color 180ms ease, transform 180ms ease;
}

.fix:hover { border-color: var(--navy); transform: translateY(-2px); }

.fix .runs {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 8px;
}

.fix h3 { font-size: 17px; line-height: 1.2; margin-bottom: 7px; }
.fix p { font-size: 14.5px; color: var(--muted); flex-grow: 1; margin-bottom: 12px; }

.fix .hrs {
  border-top: 1px solid var(--line);
  padding-top: 10px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}
.fix .hrs span { font-family: var(--body); font-weight: 400; font-size: 13px; color: var(--muted); }

.fix--open { border-style: dashed; background: transparent; }
.fix--open .runs { color: var(--muted); }

@media (max-width: 900px) { .fixes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .fixes { grid-template-columns: 1fr; } }

/* ---------- announcement bar ---------- */

.ann {
  background: var(--navy);
  color: #eef0f6;
  overflow: hidden;
  position: relative;
}

.ann a { color: inherit; text-decoration: none; display: block; }

.ann-track {
  display: flex;
  width: max-content;
  animation: ann-scroll 38s linear infinite;
}

.ann:hover .ann-track, .ann:focus-within .ann-track { animation-play-state: paused; }

.ann-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 28px;
  font-size: 14px;
  white-space: nowrap;
}

.ann-item b { font-weight: 600; color: #fff; border-bottom: 1px solid #8ea2ff; }
.ann-item .go { color: #8ea2ff; font-weight: 600; }
.ann-item .dot { width: 4px; height: 4px; border-radius: 50%; background: #5c6a8f; }

@keyframes ann-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ann a:focus-visible { outline: 3px solid #8ea2ff; outline-offset: -3px; }

/* static, readable, and still linked when motion is unwelcome or the screen is small */
@media (prefers-reduced-motion: reduce) {
  .ann-track { animation: none; width: 100%; justify-content: center; }
  .ann-item + .ann-item { display: none; }
  .ann-item { white-space: normal; text-align: center; }
}

@media (max-width: 640px) {
  .ann-item { padding: 9px 18px; font-size: 13px; }
}

/* ---------- what the call costs ---------- */

.pricing-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 26px 0 8px;
}

.step-cost {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 18px;
  background: #fff;
}

.step-cost.free { border-color: var(--green); }

.step-cost .when {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 8px;
}

.step-cost .amt {
  font-family: var(--display);
  font-weight: 800;
  font-size: 32px;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 8px;
}
.step-cost.free .amt { color: var(--green); }
.step-cost p { font-size: 15px; color: var(--ink); }
.step-cost .note { font-size: 13.5px; color: var(--muted); margin-top: 8px; }

@media (max-width: 720px) { .pricing-split { grid-template-columns: 1fr; } }

.paid-flag {
  display: inline-block;
  font-family: var(--body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  border: 1px solid var(--blue);
  border-radius: 99px;
  padding: 3px 10px;
  margin-left: 10px;
  vertical-align: middle;
}
@media (max-width: 560px) { .paid-flag { display: block; margin: 8px 0 0; } }

/* ---------- about page ---------- */

.bio { display: grid; grid-template-columns: 260px 1fr; gap: 44px; align-items: start; padding: 64px 0 20px; }

.bio-photo {
  width: 100%;
  max-width: 260px;
  height: auto;          /* without this the width/height attrs beat aspect-ratio */
  aspect-ratio: 1;
  border-radius: 16px;
  display: block;
  object-fit: cover;
  border: 1px solid var(--line);
}

.bio-pronouns { font-size: 14px; color: var(--muted); margin-top: 14px; }
.bio-role { font-size: 14.5px; color: var(--ink); font-weight: 500; margin-top: 4px; }

.bio h1 { font-size: clamp(34px, 5.2vw, 58px); margin-bottom: 20px; }
.bio .lead { font-size: clamp(17px, 2vw, 21px); max-width: 54ch; margin-bottom: 18px; }
.bio p { max-width: 60ch; margin-bottom: 14px; }

/* numbers strip */
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 12px 0 4px; }

.track-item { border-top: 3px solid var(--navy); padding-top: 14px; }
.track-item b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 40px);
  color: var(--navy);
  line-height: 1;
  margin-bottom: 6px;
}
.track-item span { font-size: 14px; color: var(--muted); }

/* career timeline */
.career { display: grid; gap: 2px; }

.job {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 26px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.job:last-child { border-bottom: 1px solid var(--line); }

.job .where { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--navy); }
.job .when { font-size: 13.5px; color: var(--muted); margin-top: 3px; }
.job h3 { font-size: 17px; font-weight: 600; margin-bottom: 6px; }
.job p { font-size: 15.5px; color: var(--ink); margin: 0; max-width: 62ch; }

/* certifications */
.certs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }

.cert {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  padding: 18px 18px;
  min-height: 86px;
}

.cert .mark {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  letter-spacing: -0.02em;
}
.mark.g   { background: #1a73e8; }
.mark.pi  { background: #0b6b5a; }
.mark.sem { background: #ff622d; }
.mark.hub { background: #ff5c35; }
.mark.pmi { background: #1f3f77; }
.mark.li  { background: #0a66c2; }
.mark.cou { background: #2a52be; }

.cert .name { display: block; font-size: 14.5px; font-weight: 500; line-height: 1.35; }
.cert .by { display: block; font-size: 12.5px; color: var(--muted); margin-top: 4px; }

.certs-more { font-size: 15px; color: var(--muted); margin-top: 18px; max-width: 66ch; }

@media (max-width: 900px) {
  .bio { grid-template-columns: 1fr; gap: 28px; padding-top: 44px; }
  .bio-photo { max-width: 190px; }
  .track { grid-template-columns: repeat(2, 1fr); }
  .certs { grid-template-columns: repeat(2, 1fr); }
  .job { grid-template-columns: 1fr; gap: 8px; }
}
@media (max-width: 560px) { .certs { grid-template-columns: 1fr; } }

.pricing-split.three { grid-template-columns: repeat(3, 1fr); }
.step-cost.build { background: var(--navy); border-color: var(--navy); }
.step-cost.build .when { color: #8ea2ff; }
.step-cost.build .amt { color: #fff; }
.step-cost.build p { color: #eef0f6; }
.step-cost.build .note { color: #b9c1d6; }
@media (max-width: 900px) { .pricing-split.three { grid-template-columns: 1fr; } }

/* ---------- founding client program ---------- */

.deal {
  background: var(--navy);
  color: #eef0f6;
  border-radius: 18px;
  padding: 40px 44px;
  margin-bottom: 44px;
}
.deal h2 { color: #fff; margin-bottom: 14px; }
.deal > p { max-width: 58ch; opacity: 0.92; margin-bottom: 24px; }

.deal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.deal-item {
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 20px 22px;
}
.deal-item b {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 34px);
  color: #8ea2ff;
  line-height: 1;
  margin-bottom: 8px;
}
.deal-item span { font-size: 15px; color: #eef0f6; }

.terms { display: grid; gap: 0; margin: 8px 0 4px; }
.term-row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  align-items: start;
}
.term-row:last-child { border-bottom: 1px solid var(--line); }
.term-row .n {
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--blue);
}
.term-row p { margin: 0; font-size: 16px; max-width: 62ch; }
.term-row p b { font-weight: 600; }

/* form */
.apply { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 32px 32px 28px; max-width: 640px; }
.apply .row { margin-bottom: 18px; }
.apply label { display: block; font-size: 14.5px; font-weight: 600; margin-bottom: 6px; }
.apply .hint { font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 2px; }
.apply input, .apply textarea, .apply select {
  width: 100%;
  font-family: var(--body);
  font-size: 16px;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 13px;
}
.apply textarea { min-height: 104px; resize: vertical; }
.apply input:focus, .apply textarea:focus, .apply select:focus { outline: 3px solid var(--blue); outline-offset: 1px; border-color: var(--blue); }
.apply .check { display: flex; gap: 11px; align-items: flex-start; }
.apply .check input { width: auto; margin-top: 2px; flex: 0 0 auto; width: 24px; height: 24px; accent-color: var(--blue); }
.apply .check label { font-weight: 400; font-size: 15px; margin: 0; }
.apply button { width: 100%; min-height: 52px; font-size: 16px; margin-top: 6px; }
.apply .fine { font-size: 13px; color: var(--muted); margin-top: 14px; }

@media (max-width: 720px) {
  .deal { padding: 30px 24px; }
  .deal-grid { grid-template-columns: 1fr; }
  .apply { padding: 24px 20px 22px; }
}


/* ---------- the people ---------- */

.people { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.person {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  padding: 26px 26px 22px;
}

.person-head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.person-head svg { width: 62px; height: 62px; flex: 0 0 62px; display: block; }
.person-head h3 { font-size: 19px; margin-bottom: 3px; }
.person-head .role { font-size: 14px; color: var(--muted); }
.person-head .loc { font-size: 13px; color: var(--muted); margin-top: 2px; }

.person p { font-size: 15.5px; margin-bottom: 12px; }

.person .specs { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; }
.person .specs span {
  font-size: 12.5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 4px 11px;
}

.person .yrs {
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 12px;
  font-size: 13.5px;
  color: var(--muted);
}
.person .yrs b { font-family: var(--display); font-weight: 800; font-size: 17px; color: var(--navy); }

@media (max-width: 820px) { .people { grid-template-columns: 1fr; } }