:root {
  /* GRAPHITE MONO — no accent color anywhere */
  --ground: #f4f4f2;
  --ink: #141414;
  --muted: #8a8a8a;
  --hair: #e2e2e0;
  --construction: #b8b8b6;
  --disp: "Hanken Grotesk", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, monospace;
  --gutter: clamp(20px, 5vw, 72px);
  --maxw: 1600px;
  --side: clamp(150px, 15vw, 208px);
}

* {
  box-sizing: border-box;
}
html {
  font-size: 100%;
  scroll-behavior: smooth;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--disp);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

/* ---------- typography primitives ---------- */
.mono {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.mono.ink {
  color: var(--ink);
}
a {
  color: inherit;
  text-decoration: none;
}

/* keyboard focus, in the page's own ink rather than the browser default accent */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 4px;
  border-radius: 1px;
}
/* the inverted band draws its focus ring in the ground colour instead */
#suppliers a:focus-visible,
#suppliers button:focus-visible {
  outline-color: var(--ground);
}

/* landing.js parks off-screen scenes here; see "pause off-screen animation".
   The pseudo-element selectors matter: several bars animate on ::after. */
.anim-paused,
.anim-paused *,
.anim-paused *::before,
.anim-paused *::after {
  animation-play-state: paused !important;
}

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
}

/* ---------- threading line layer ---------- */
/* Width and height are set by landing.js to match the viewBox it measures. Do not
   size this element from CSS: CSS beats the SVG width/height attributes, and any
   mismatch is applied as a stretch by preserveAspectRatio="none", which drags the
   line off the anchors it was drawn through. */
#thread-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
#thread-layer path {
  fill: none;
}
.thread-ink {
  stroke: var(--ink);
  stroke-width: 1.3;
}
.node-dot {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.node-lead {
  fill: var(--ink);
}

/* keep real content above the line */
header,
main,
footer {
  position: relative;
  z-index: 2;
}

/* invisible thread anchors */
.anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ---------- nav (RSC-style horizontal tabs) ---------- */
header {
  border-bottom: 1px solid var(--hair);
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--ground);
}
nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 3vw, 44px);
  padding-top: 18px;
  padding-bottom: 18px;
}
.wordmark {
  font-family: var(--disp);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 11px;
}
.wordmark .mark {
  width: 34px;
  height: 34px;
  display: block;
}
.wordmark sup {
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.1em;
  top: -0.8em;
}
.nav-tabs {
  display: flex;
  gap: clamp(16px, 2.4vw, 34px);
  margin-left: clamp(20px, 4vw, 64px);
}
.nav-tabs a {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 1.5px solid transparent;
}
.nav-tabs a:hover {
  color: var(--ink);
}
.nav-tabs a.active {
  color: var(--ink);
  border-color: var(--ink);
}
.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  border: 1px solid var(--ink);
  background: none;
  color: var(--ink);
  padding: 11px 18px;
  line-height: 1;
  border-radius: 0;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.btn:hover {
  background: var(--ink);
  color: var(--ground);
}
/* solid ink primary button, off-white text, sharp corners */
.btn-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}
.btn-solid:hover {
  background: var(--ground);
  color: var(--ink);
}
@media (max-width: 760px) {
  .nav-tabs {
    display: none;
  }
}

/* ---------- section scaffold ---------- */
section {
  position: relative;
  padding-top: clamp(40px, 6vh, 84px);
  padding-bottom: clamp(40px, 6vh, 84px);
}
.sec-tag {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-top: 1px solid var(--hair);
  padding-top: 10px;
  margin-bottom: clamp(24px, 3.6vh, 48px);
  gap: 16px;
}

/* ============ HERO — RSC "STS-63" technical layout ============ */
.hero {
  padding-top: 0;
  padding-bottom: 12px;
  overflow: hidden;
}
.hero-inner {
  /* same measure as .wrap so the hero lines up with every other section;
     natural height so the next section's tag peeks above the fold */
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  /* min() keeps the figure from outgrowing its share of the capped container
     on very wide screens (44vw alone starves the text column past ~1600px) */
  grid-template-columns: minmax(0, 1fr) minmax(300px, min(44vw, 600px));
  gap: clamp(24px, 3vw, 60px);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  padding-top: clamp(32px, 5vh, 56px);
  align-items: start;
}

/* --- main column: blocks stacked tight under the title, indented --- */
.hero-main {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-self: stretch;
  gap: clamp(30px, 4.5vh, 52px);
  padding-left: 0;
}
.hero-main > * {
  margin-bottom: 0 !important;
}
.hero-main .title-block .topic {
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
.hero-main .title-block h1 {
  margin-bottom: 0;
}
.hero-main .title-block .subhead {
  margin: clamp(16px, 2.2vh, 24px) 0 0;
}
.topic {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: clamp(16px, 2.4vh, 26px);
}
h1.display {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2.6rem, 5.5vw, 5.1rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 clamp(24px, 3.4vh, 40px);
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 640px) {
  h1.display {
    white-space: normal;
  }
}
h1.display .u {
  /* emphasis by rule, not color */
  display: inline-block;
  border-bottom: 3px solid var(--ink);
  line-height: 0.9;
}
.subhead {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.55;
  color: var(--ink);
  max-width: 52ch;
  margin: 0 0 clamp(30px, 4vh, 46px);
}

/* three-up feature row (title + short body, thin rules between columns) */
.hero-feats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 30px);
  border-top: 1px solid var(--hair);
  padding-top: clamp(18px, 2.6vh, 26px);
  margin: 0;
  align-items: start;
}
.hf + .hf {
  border-left: 1px solid var(--hair);
  padding-left: clamp(16px, 2vw, 30px);
}
.hf h3 {
  font-family: var(--disp);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 9px;
}
.hf p {
  margin: 0;
  font-family: var(--disp);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 72px);
  margin-left: 0;
}
.cta-row .btn {
  padding: 18px 30px;
  font-size: 15.5px;
}
.see-link {
  font-family: var(--mono);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 3px;
}
.see-link:hover {
  color: var(--muted);
  border-color: var(--muted);
}

/* --- hero image slot: schematic bleeding off the right --- */
.hero-figure {
  position: relative;
  align-self: stretch;
  min-height: clamp(340px, 52vh, 560px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-right: clamp(12px, 2vw, 40px);
}
.hero-slot {
  position: relative;
  width: 100%;
  aspect-ratio: 2400/1792; /* hug the sourced image exactly — no letterboxing */
  background: transparent; /* image dissolves straight into the page ground */
  overflow: hidden;
}
.hero-slot .schematic {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  /* image paper tone (#F4F3F0) already matches the page ground — no filter needed */
  /* dissolve all four edges into the page (Authentik-style blend) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0, #000 9%, #000 97.5%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-composite: intersect;
}
/* ---------- hero schematic animation (sa-) ----------
     wires draw in → bid card generates (skeleton) → pricing lists → Supplier A awarded.
     All sizes in cqw so the composition scales with the hero slot. Loops every 11s. */
.sa-scene {
  container-type: inline-size;
  --sa-dur: 6.5s;
  --sa-ink: #2d2a28;
  --sa-gray: #8a8987;
}
.sa-scene .sa-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.sa-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.sa-wire {
  fill: none;
  stroke: var(--sa-ink);
  stroke-width: 3.2;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: sa-wire-draw var(--sa-dur) linear infinite;
}
.sa-wire.sa-w2 {
  animation-name: sa-wire-draw2;
}
@keyframes sa-wire-draw {
  0%,
  3% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  16% {
    stroke-dashoffset: 0;
  }
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
@keyframes sa-wire-draw2 {
  0%,
  5% {
    stroke-dashoffset: 1;
    opacity: 1;
  }
  18% {
    stroke-dashoffset: 0;
  }
  92% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  97%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}
.sa-node {
  fill: #f4f3f0;
  stroke: var(--sa-ink);
  stroke-width: 3.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: sa-node-pop var(--sa-dur) ease infinite;
}
.sa-node-delayed {
  animation-delay: 0.2s;
}
.sa-node.sa-n-end {
  animation-name: sa-node-pop-end;
}
@keyframes sa-node-pop {
  0% {
    transform: scale(0);
  }
  3% {
    transform: scale(1);
  }
  92% {
    transform: scale(1);
    opacity: 1;
  }
  97%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes sa-node-pop-end {
  0%,
  15% {
    transform: scale(0);
  }
  18% {
    transform: scale(1);
  }
  92% {
    transform: scale(1);
    opacity: 1;
  }
  97%,
  100% {
    transform: scale(1);
    opacity: 0;
  }
}
.sa-card {
  position: absolute;
  left: 59.5%;
  top: 27.5%;
  width: 40.5%;
  background: #fff;
  border-radius: 1.288cqw;
  box-shadow:
    0 0.644cqw 2.061cqw rgba(30, 28, 25, 0.1),
    0 0.155cqw 0.45cqw rgba(30, 28, 25, 0.06);
  padding: 1.738cqw 1.867cqw 1.417cqw;
  box-sizing: border-box;
  opacity: 0;
  font-family: var(--disp);
  animation: sa-card-in var(--sa-dur) ease infinite;
}
@keyframes sa-card-in {
  0%,
  17% {
    opacity: 0;
    transform: translateY(1.546cqw) scale(0.97);
  }
  21% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
.sa-title {
  font-size: 1.777cqw;
  font-weight: 650;
  color: #1b1b1a;
  letter-spacing: -0.01em;
}
.sa-pill {
  display: inline-block;
  margin-top: 0.708cqw;
  font-size: 1.056cqw;
  color: #6b6a68;
  background: #e9e8e5;
  border-radius: 2.576cqw;
  padding: 0.283cqw 0.799cqw;
}
.sa-headers {
  display: flex;
  justify-content: flex-end;
  gap: 2.705cqw;
  font-size: 0.876cqw;
  letter-spacing: 0.08em;
  color: #a5a3a0;
  margin: 1.223cqw 0.45cqw 0.708cqw 0;
  opacity: 0;
  animation: sa-headers-in var(--sa-dur) ease infinite;
}
@keyframes sa-headers-in {
  0%,
  22% {
    opacity: 0;
  }
  26% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
.sa-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.223cqw;
  padding: 1.005cqw 0.799cqw;
  border-radius: 0.927cqw;
  border: 0.142cqw solid transparent;
}
.sa-sep {
  height: 1px;
  background: #ecebe8;
  margin: 0.232cqw 0.515cqw;
}
.sa-avatar {
  width: 3.284cqw;
  height: 3.284cqw;
  flex: none;
  border-radius: 0.773cqw;
  background: #e6e5e2;
  color: #7a7977;
  font-weight: 630;
  font-size: 1.611cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sa-who {
  flex: 1;
  min-width: 0;
}
.sa-who .sa-name {
  font-size: 1.314cqw;
  color: #1b1b1a;
  font-weight: 480;
}
.sa-who .sa-sub {
  font-size: 1.056cqw;
  color: var(--sa-gray);
  margin-top: 0.129cqw;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
}
.sa-lead {
  font-size: 1.288cqw;
  color: var(--sa-gray);
  white-space: nowrap;
}
.sa-price {
  font-size: 1.365cqw;
  color: #1b1b1a;
  font-weight: 520;
  white-space: nowrap;
  min-width: 5.925cqw;
  text-align: right;
}
.sa-check {
  width: 1.738cqw;
  height: 1.738cqw;
  flex: none;
  margin-left: 0.386cqw;
  border-radius: 50%;
  background: var(--sa-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(0);
}
.sa-check svg {
  width: 0.965cqw;
  height: 0.965cqw;
}
.sa-skel {
  position: absolute;
  inset: 0.799cqw;
  display: flex;
  align-items: center;
  gap: 1.223cqw;
  opacity: 0;
}
.sa-skel .sa-sk {
  background: linear-gradient(100deg, #eceae7 40%, #f7f6f4 50%, #eceae7 60%);
  background-size: 200% 100%;
  border-radius: 0.579cqw;
  animation: sa-shimmer 1.15s linear infinite;
}
.sa-sk-av {
  width: 3.284cqw;
  height: 3.284cqw;
  border-radius: 0.773cqw;
}
.sa-sk-name {
  width: 10.562cqw;
  height: 1.223cqw;
}
.sa-sk-fill {
  flex: 1;
}
.sa-sk-lead {
  width: 4.379cqw;
  height: 1.094cqw;
}
.sa-sk-price {
  width: 5.152cqw;
  height: 1.223cqw;
}
@keyframes sa-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -80% 0;
  }
}
.sa-content {
  opacity: 0;
  display: flex;
  align-items: center;
  gap: 1.223cqw;
  width: 100%;
}
.sa-row-a .sa-skel {
  animation: sa-skel-a var(--sa-dur) ease infinite;
}
.sa-row-b .sa-skel {
  animation: sa-skel-b var(--sa-dur) ease infinite;
}
.sa-row-c .sa-skel {
  animation: sa-skel-c var(--sa-dur) ease infinite;
}
.sa-row-a .sa-content {
  animation: sa-content-a var(--sa-dur) ease infinite;
}
.sa-row-b .sa-content {
  animation: sa-content-b var(--sa-dur) ease infinite;
}
.sa-row-c .sa-content {
  animation: sa-content-c var(--sa-dur) ease infinite;
}
@keyframes sa-skel-a {
  0%,
  20% {
    opacity: 0;
  }
  23% {
    opacity: 1;
  }
  34% {
    opacity: 1;
  }
  37%,
  100% {
    opacity: 0;
  }
}
@keyframes sa-skel-b {
  0%,
  22% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  37% {
    opacity: 1;
  }
  40%,
  100% {
    opacity: 0;
  }
}
@keyframes sa-skel-c {
  0%,
  24% {
    opacity: 0;
  }
  27% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  43%,
  100% {
    opacity: 0;
  }
}
@keyframes sa-content-a {
  0%,
  35% {
    opacity: 0;
    transform: translateY(0.45cqw);
  }
  39% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes sa-content-b {
  0%,
  38% {
    opacity: 0;
    transform: translateY(0.45cqw);
  }
  42% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
@keyframes sa-content-c {
  0%,
  41% {
    opacity: 0;
    transform: translateY(0.45cqw);
  }
  45% {
    opacity: 1;
    transform: none;
  }
  92% {
    opacity: 1;
  }
  97%,
  100% {
    opacity: 0;
  }
}
.sa-row-a {
  animation: sa-select var(--sa-dur) ease infinite;
}
@keyframes sa-select {
  0%,
  55% {
    background: transparent;
    border-color: transparent;
  }
  60%,
  92% {
    background: #ececea;
    border-color: #b9b7b4;
  }
  100% {
    background: transparent;
    border-color: transparent;
  }
}
.sa-row-a .sa-avatar {
  animation: sa-avatar-a var(--sa-dur) ease infinite;
}
@keyframes sa-avatar-a {
  0%,
  55% {
    background: #e6e5e2;
    color: #7a7977;
  }
  60%,
  92% {
    background: #8f8e8c;
    color: #fff;
  }
  100% {
    background: #e6e5e2;
    color: #7a7977;
  }
}
.sa-row-a .sa-name {
  animation: sa-name-a var(--sa-dur) ease infinite;
}
@keyframes sa-name-a {
  0%,
  55% {
    font-weight: 480;
  }
  60%,
  92% {
    font-weight: 720;
  }
  100% {
    font-weight: 480;
  }
}
.sa-row-a .sa-price {
  animation: sa-price-a var(--sa-dur) ease infinite;
}
@keyframes sa-price-a {
  0%,
  55% {
    font-weight: 520;
  }
  60%,
  92% {
    font-weight: 760;
  }
  100% {
    font-weight: 520;
  }
}
.sa-row-a .sa-sub {
  animation: sa-sub-a var(--sa-dur) ease infinite;
}
@keyframes sa-sub-a {
  0%,
  56% {
    opacity: 0;
    max-height: 0;
  }
  62%,
  92% {
    opacity: 1;
    max-height: 1.546cqw;
  }
  100% {
    opacity: 0;
    max-height: 0;
  }
}
.sa-row-a .sa-check {
  animation: sa-check-a var(--sa-dur) cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes sa-check-a {
  0%,
  57% {
    transform: scale(0);
  }
  62%,
  92% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sa-scene * {
    animation: none !important;
  }
  .sa-wire {
    stroke-dashoffset: 0;
  }
  .sa-node {
    transform: scale(1);
  }
  .sa-card,
  .sa-headers,
  .sa-content {
    opacity: 1;
  }
  .sa-skel {
    opacity: 0;
    display: none;
  }
  .sa-row-a {
    background: #ececea;
    border-color: #b9b7b4;
  }
  .sa-row-a .sa-avatar {
    background: #8f8e8c;
    color: #fff;
  }
  .sa-row-a .sa-name {
    font-weight: 720;
  }
  .sa-row-a .sa-price {
    font-weight: 760;
  }
  .sa-row-a .sa-sub {
    opacity: 1;
    max-height: 1.2cqw;
  }
  .sa-row-a .sa-check {
    transform: scale(1);
  }
}

/* ---------- credibility ---------- */
.cred-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
h1.big,
h2.big {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(2rem, 4.6vw, 3.7rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 26px;
}
.cred-body {
  font-size: clamp(1.15rem, 1.55vw, 1.4rem);
  line-height: 1.6;
  color: var(--ink);
  max-width: 52ch;
  margin: 0;
}
.cred-body-problem {
  margin-top: 26px;
}
.pain {
  list-style: none;
  margin: clamp(28px, 4vh, 44px) 0 0;
  padding: 0;
  border-top: 1px solid var(--hair);
}
.pain li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid var(--hair);
}
.pain li .n {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.pain li .t {
  font-family: var(--disp);
  font-weight: 500;
  font-size: clamp(1.15rem, 1.8vw, 1.55rem);
  line-height: 1.35;
}

/* ---------- capabilities (ruled editorial table) ---------- */
.cap-table {
  border-top: 2px solid var(--ink);
}
.cap-row {
  display: grid;
  grid-template-columns: 44px minmax(180px, 1fr) 2fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(20px, 3vh, 30px) 0;
  border-bottom: 1px solid var(--hair);
}
.cap-row .idx {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
}
.cap-row .name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.7rem);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.cap-row .desc {
  font-family: var(--disp);
  font-weight: 400;
  font-size: clamp(0.95rem, 1.15vw, 1.08rem);
  color: var(--muted);
  line-height: 1.5;
}
.cap-row:hover .desc {
  color: var(--ink);
}
@media (max-width: 720px) {
  .cap-row {
    grid-template-columns: 32px 1fr;
  }
  .cap-row .desc {
    grid-column: 2;
  }
}

/* ---------- workflow ---------- */
.wf-intro {
  position: sticky;
  top: 32px;
}

/* ---------- credibility knot (the mess, threaded on the line) ---------- */
.knot-vis {
  width: 100%;
  max-width: 960px;
  margin: -30% auto 0;
}
.knot-frame {
  position: relative;
  width: 100%;
}
.knot-anchor-top {
  left: 48.5%;
  top: 26%;
}
.knot-anchor-bottom {
  left: 51.5%;
  top: 73%;
}
.knot-anchor-exit {
  left: 50%;
  bottom: 0;
}
.knot-frame svg {
  display: block;
  width: 100%;
  height: auto;
}
.knot-cap {
  text-align: center;
  margin-top: -24%;
  font-size: 9.5px;
  background: var(--ground);
  padding: 3px 0;
  position: relative;
  z-index: 2;
}
.knot-node {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 1.1;
}
.tglyph {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.1;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.tglyph.fillg {
  fill: var(--ground);
}
.tline {
  fill: none;
  stroke: var(--construction);
  stroke-width: 1;
}
.tline.ink {
  stroke: var(--ink);
  stroke-width: 1.1;
}

/* ---------- agent layer (lz-) ----------
     One generated loop: your email on the left, the agent in the middle, the five
     things it runs on the right. The clip's paper is within two points of the page
     ground, so it runs frameless and its edges dissolve straight into the page. */
.lz-intro {
  margin-bottom: clamp(30px, 4.4vh, 50px);
}
.cred-body-integration {
  margin-top: 18px;
  max-width: 54ch;
}
.aw-scroll {
  width: 100%;
  position: relative;
}
/* thread guides: fixed distances above the agent-layer box, so the descent
   from the knot holds its shape at every viewport width */
.aw-guide-a {
  left: 66%;
  top: -190px;
}
.aw-guide-b {
  left: 58%;
  top: -70px;
}
.aw-terminal {
  /* Match 55% of the stage while it fills the figure, then stay aligned to
     that same point when the stage reaches its 940px maximum. */
  left: calc(50% + min(47px, 5%));
  top: 0;
}
.lz-state {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--hair);
  padding-bottom: 8px;
  margin-bottom: clamp(14px, 2vh, 22px);
}

.lz-fig {
  margin: 0;
  position: relative;
}
.lz-out {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  gap: clamp(16px, 3vw, 44px);
  margin-top: clamp(26px, 3.8vh, 44px);
  padding-top: 14px;
}
.lz-out .lead {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
  white-space: nowrap;
}
.lz-res .rule {
  display: block;
  height: 1.3px;
  background: var(--ink);
  margin: 0 0 10px;
}
.lz-res h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
  color: var(--ink);
}
.lz-res p {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--muted);
}

@media (max-width: 620px) {
  .lz-out {
    grid-template-columns: 1fr;
    gap: 18px;
  }
}

/* ---------- Agent-workflow diagram (aw-) ----------
     Mandel-style ingestion→agent→workflows map in the graphite-mono language.
     Frameless: dashed construction cards + rails sit directly on the ground.
     One shared 8s timeline; pulses travel the rails; arms activate staggered. */
.aw-stage {
  position: relative;
  width: min(100%, 940px);
  margin: 0 auto;
  aspect-ratio: 1900/1000;
  container-type: inline-size;
  font-family: var(--disp);
  border: 1.3px solid var(--ink);
}
svg.aw-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.aw-rail {
  fill: none;
  stroke: var(--construction);
  stroke-width: 1.4;
}
.aw-pulse {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 40 960;
  stroke-dashoffset: 40;
  opacity: 0;
}
.p-in-a {
  animation: aw-pulse-in-a 8s linear infinite;
}
.p-in-b {
  animation: aw-pulse-in-b 8s linear infinite;
}
.p-out-1 {
  animation: aw-pulse-out-1 8s linear infinite;
}
.p-out-2 {
  animation: aw-pulse-out-2 8s linear infinite;
}
.p-out-3 {
  animation: aw-pulse-out-3 8s linear infinite;
}
.p-out-4 {
  animation: aw-pulse-out-4 8s linear infinite;
}
.p-out-5 {
  animation: aw-pulse-out-5 8s linear infinite;
}
@keyframes aw-pulse-in-a {
  0%,
  8% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  8.6% {
    opacity: 1;
  }
  17.4% {
    opacity: 1;
  }
  18% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-in-b {
  0%,
  10% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  10.6% {
    opacity: 1;
  }
  19.4% {
    opacity: 1;
  }
  20% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-out-1 {
  0%,
  26% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  26.6% {
    opacity: 1;
  }
  35.4% {
    opacity: 1;
  }
  36% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-out-2 {
  0%,
  28% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  28.6% {
    opacity: 1;
  }
  37.4% {
    opacity: 1;
  }
  38% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-out-3 {
  0%,
  30% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  30.6% {
    opacity: 1;
  }
  39.4% {
    opacity: 1;
  }
  40% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-out-4 {
  0%,
  32% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  32.6% {
    opacity: 1;
  }
  41.4% {
    opacity: 1;
  }
  42% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
@keyframes aw-pulse-out-5 {
  0%,
  34% {
    stroke-dashoffset: 40;
    opacity: 0;
  }
  34.6% {
    opacity: 1;
  }
  43.4% {
    opacity: 1;
  }
  44% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
  100% {
    stroke-dashoffset: -960;
    opacity: 0;
  }
}
.aw-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.4%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: aw-core-beat 8s ease infinite;
}
.aw-core img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
@keyframes aw-core-beat {
  0%,
  18% {
    transform: translate(-50%, -50%) scale(1);
  }
  22% {
    transform: translate(-50%, -50%) scale(1.07);
  }
  27%,
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.aw-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7.4%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--construction);
  transform: translate(-50%, -50%) scale(1);
  opacity: 0;
  animation: aw-core-ring 8s ease-out infinite;
}
@keyframes aw-core-ring {
  0%,
  19% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  20% {
    opacity: 0.65;
  }
  30% {
    transform: translate(-50%, -50%) scale(2.1);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.aw-card {
  position: absolute;
  border: 1px dashed var(--construction);
  background: transparent;
  box-sizing: border-box;
  padding: 1.05cqw 1.15cqw;
}
.aw-dot {
  position: absolute;
  width: 0.44cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--construction);
}
.aw-dot.tl {
  left: -0.24cqw;
  top: -0.24cqw;
}
.aw-dot.tr {
  right: -0.24cqw;
  top: -0.24cqw;
}
.aw-dot.bl {
  left: -0.24cqw;
  bottom: -0.24cqw;
}
.aw-dot.br {
  right: -0.24cqw;
  bottom: -0.24cqw;
}
.aw-label {
  font-family: var(--mono);
  font-size: 0.92cqw;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.aw-src {
  left: 4.7%;
  width: 19.5%;
}
.src-email {
  top: 17%;
  height: 21%;
}
.src-docs {
  top: 53%;
  height: 29%;
}
.aw-row {
  display: flex;
  align-items: center;
  gap: 0.85cqw;
  margin-top: 0.95cqw;
  border-radius: 0.45cqw;
  padding: 0.35cqw 0.5cqw;
}
.row-flash-1 {
  animation: aw-row-flash1 8s ease infinite;
}
.row-flash-2 {
  animation: aw-row-flash2 8s ease infinite;
}
.row-flash-3 {
  animation: aw-row-flash3 8s ease infinite;
}
.row-flash-4 {
  animation: aw-row-flash4 8s ease infinite;
}
.row-flash-5 {
  animation: aw-row-flash5 8s ease infinite;
}
@keyframes aw-row-flash1 {
  0%,
  2% {
    background: transparent;
  }
  4% {
    background: #e9e9e7;
  }
  7%,
  100% {
    background: transparent;
  }
}
@keyframes aw-row-flash2 {
  0%,
  4% {
    background: transparent;
  }
  6% {
    background: #e9e9e7;
  }
  9%,
  100% {
    background: transparent;
  }
}
@keyframes aw-row-flash3 {
  0%,
  5% {
    background: transparent;
  }
  7% {
    background: #e9e9e7;
  }
  10%,
  100% {
    background: transparent;
  }
}
@keyframes aw-row-flash4 {
  0%,
  7% {
    background: transparent;
  }
  9% {
    background: #e9e9e7;
  }
  12%,
  100% {
    background: transparent;
  }
}
@keyframes aw-row-flash5 {
  0%,
  9% {
    background: transparent;
  }
  11% {
    background: #e9e9e7;
  }
  14%,
  100% {
    background: transparent;
  }
}
.aw-row .name {
  font-size: 1.25cqw;
  font-weight: 600;
  color: var(--ink);
}
.aw-glyph {
  width: 1.7cqw;
  height: 1.7cqw;
  flex: none;
  border-radius: 0.32cqw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aw-glyph-gmail {
  background: #f0e4e2;
}
.aw-glyph-outlook {
  background: #e2e9f2;
}
.aw-glyph svg {
  width: 72%;
  height: 72%;
}
.aw-chipfile {
  width: 2.8cqw;
  height: 1.9cqw;
  flex: none;
  border-radius: 0.32cqw;
  font-family: var(--mono);
  font-size: 0.78cqw;
  font-weight: 500;
  letter-spacing: 0.06em;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
}
.f-pdf {
  color: #8a3b34;
  background: #f0e4e2;
  border-color: #e4d2cf;
}
.f-xls {
  color: #3f6a4a;
  background: #e3ece5;
  border-color: #d0dfd4;
}
.f-doc {
  color: #39557e;
  background: #e2e9f2;
  border-color: #cfdbea;
}
.aw-arm {
  left: 75.8%;
  width: 19.5%;
  height: 12.4%;
}
.arm-1 {
  top: 11%;
}
.arm-2 {
  top: 27%;
}
.arm-3 {
  top: 43%;
}
.arm-4 {
  top: 59%;
}
.arm-5 {
  top: 75%;
}
.arm-1 .aw-label {
  animation: aw-label1 8s ease infinite;
}
.arm-2 .aw-label {
  animation: aw-label2 8s ease infinite;
}
.arm-3 .aw-label {
  animation: aw-label3 8s ease infinite;
}
.arm-4 .aw-label {
  animation: aw-label4 8s ease infinite;
}
.arm-5 .aw-label {
  animation: aw-label5 8s ease infinite;
}
@keyframes aw-label1 {
  0%,
  34% {
    color: var(--muted);
  }
  37%,
  90% {
    color: var(--ink);
  }
  96%,
  100% {
    color: var(--muted);
  }
}
@keyframes aw-label2 {
  0%,
  36% {
    color: var(--muted);
  }
  39%,
  90% {
    color: var(--ink);
  }
  96%,
  100% {
    color: var(--muted);
  }
}
@keyframes aw-label3 {
  0%,
  38% {
    color: var(--muted);
  }
  41%,
  90% {
    color: var(--ink);
  }
  96%,
  100% {
    color: var(--muted);
  }
}
@keyframes aw-label4 {
  0%,
  40% {
    color: var(--muted);
  }
  43%,
  90% {
    color: var(--ink);
  }
  96%,
  100% {
    color: var(--muted);
  }
}
@keyframes aw-label5 {
  0%,
  42% {
    color: var(--muted);
  }
  45%,
  90% {
    color: var(--ink);
  }
  96%,
  100% {
    color: var(--muted);
  }
}
.aw-out {
  display: flex;
  align-items: center;
  gap: 0.7cqw;
  margin-top: 0.8cqw;
  font-size: 1.18cqw;
  color: var(--ink);
  opacity: 0;
  transform: translateY(0.3cqw);
}
.arm-1 .aw-out {
  animation: aw-out1 8s ease infinite;
}
.arm-2 .aw-out {
  animation: aw-out2 8s ease infinite;
}
.arm-3 .aw-out {
  animation: aw-out3 8s ease infinite;
}
.arm-4 .aw-out {
  animation: aw-out4 8s ease infinite;
}
.arm-5 .aw-out {
  animation: aw-out5 8s ease infinite;
}
@keyframes aw-out1 {
  0%,
  35% {
    opacity: 0;
    transform: translateY(0.3cqw);
  }
  38%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes aw-out2 {
  0%,
  37% {
    opacity: 0;
    transform: translateY(0.3cqw);
  }
  40%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes aw-out3 {
  0%,
  39% {
    opacity: 0;
    transform: translateY(0.3cqw);
  }
  42%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes aw-out4 {
  0%,
  41% {
    opacity: 0;
    transform: translateY(0.3cqw);
  }
  44%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
@keyframes aw-out5 {
  0%,
  43% {
    opacity: 0;
    transform: translateY(0.3cqw);
  }
  46%,
  90% {
    opacity: 1;
    transform: none;
  }
  96%,
  100% {
    opacity: 0;
  }
}
.aw-chip {
  font-family: var(--mono);
  font-size: 0.78cqw;
  border: 1px solid var(--hair);
  background: #fff;
  padding: 0.18cqw 0.5cqw;
  border-radius: 0.32cqw;
  color: var(--ink);
  white-space: nowrap;
}
.aw-sub {
  font-size: 0.88cqw;
  color: var(--muted);
  white-space: nowrap;
}
.aw-tick {
  width: 1.25cqw;
  height: 1.25cqw;
  flex: none;
  border-radius: 0.28cqw;
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aw-tick svg {
  width: 62%;
  height: 62%;
}
.aw-gantt {
  display: flex;
  flex-direction: column;
  gap: 0.28cqw;
  flex: none;
  width: 5.6cqw;
}
.aw-gantt i {
  display: block;
  height: 0.34cqw;
  border-radius: 0.17cqw;
  background: #dbdbd9;
  position: relative;
  overflow: hidden;
}
.aw-gantt i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0;
  background: var(--ink);
  border-radius: inherit;
}
.arm-3 .aw-gantt i:nth-child(1)::after {
  animation: aw-bar1 8s ease infinite;
}
.arm-3 .aw-gantt i:nth-child(2)::after {
  animation: aw-bar2 8s ease infinite;
}
.arm-3 .aw-gantt i:nth-child(3)::after {
  animation: aw-bar3 8s ease infinite;
}
@keyframes aw-bar1 {
  0%,
  40% {
    width: 0;
  }
  46%,
  90% {
    width: 88%;
  }
  96%,
  100% {
    width: 0;
  }
}
@keyframes aw-bar2 {
  0%,
  42% {
    width: 0;
  }
  48%,
  90% {
    width: 64%;
  }
  96%,
  100% {
    width: 0;
  }
}
@keyframes aw-bar3 {
  0%,
  44% {
    width: 0;
  }
  50%,
  90% {
    width: 38%;
  }
  96%,
  100% {
    width: 0;
  }
}
.aw-risk {
  width: 0.62cqw;
  height: 0.62cqw;
  flex: none;
  border-radius: 50%;
  background: var(--ink);
}
.arm-4 .aw-risk {
  animation: aw-riskblink 8s ease infinite;
}
@keyframes aw-riskblink {
  0%,
  41% {
    opacity: 0.15;
  }
  44% {
    opacity: 1;
  }
  49% {
    opacity: 0.25;
  }
  54% {
    opacity: 1;
  }
  59% {
    opacity: 0.25;
  }
  64%,
  90% {
    opacity: 1;
  }
  96%,
  100% {
    opacity: 0.15;
  }
}
@media (prefers-reduced-motion: reduce) {
  .aw-stage * {
    animation: none !important;
  }
  .aw-pulse {
    opacity: 0;
  }
  .aw-out {
    opacity: 1;
    transform: none;
  }
  .aw-arm .aw-label {
    color: var(--ink);
  }
  .aw-gantt i:nth-child(1)::after {
    width: 88%;
  }
  .aw-gantt i:nth-child(2)::after {
    width: 64%;
  }
  .aw-gantt i:nth-child(3)::after {
    width: 38%;
  }
  .aw-risk {
    opacity: 1;
  }
}

/* ---------- automation (the agent's run log) ---------- */
.au-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(28px, 4.5vw, 64px);
  align-items: start;
}

/* left: ruled step index, active step in ink, others in construction grey */
.au-steps {
  border-top: 2px solid var(--ink);
  position: relative;
}
.au-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: clamp(12px, 1.6vw, 20px);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--hair);
  padding: clamp(15px, 2.2vh, 23px) 0;
  cursor: pointer;
  font-family: var(--disp);
}
.au-step .idx {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--construction);
  padding-top: 4px;
  transition: color 0.3s ease;
}
.au-step .name {
  display: block;
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.55vw, 1.32rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 7px;
  color: var(--muted);
  transition: color 0.3s ease;
}
.au-step .desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--construction);
  margin: 0;
  transition: color 0.3s ease;
}
.au-step:hover .name {
  color: var(--ink);
}
.au-step.on .idx,
.au-step.on .name {
  color: var(--ink);
}
.au-step.on .desc {
  color: var(--muted);
}
/* progress rail: reads as one more construction line, not a UI widget.
   Every step reserves the rail's space whether or not it is active — toggling
   display here would grow the active row and shove every row below it down as
   the log advances. */
.au-rail {
  display: block;
  height: 1.3px;
  background: var(--hair);
  margin-top: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.au-step.on .au-rail {
  opacity: 1;
}
.au-rail i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
/* right: the run log, built like an fcard plate */
.au-panel-wrap {
  position: sticky;
  top: 88px;
  min-width: 0;
}
/* fixed height: every chapter is authored to fit, so the plate never jumps or clips */
/* Height comes from landing.js, which sizes .au-feed to the tallest of the five
   steps so advancing never resizes the panel. No fixed height here: it would clip
   the longer steps, and it has to track wrapping at every viewport width. */
.au-panel {
  background: #fff;
  border: 1.2px solid var(--ink);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.au-head {
  border-bottom: 1px solid var(--ink);
  padding: 13px 18px 12px;
}
.au-head-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 9px;
}
.au-head h3 {
  font-family: var(--disp);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 9px;
}
.au-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 20px;
}
.au-meta span {
  font-family: var(--disp);
  font-size: 12px;
  color: var(--ink);
}
.au-meta i {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 6px;
}
.au-meta b {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.au-log-lbl {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--hair);
  padding: 8px 18px;
}
.au-feed {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  padding: 15px 18px;
}

.au-in {
  opacity: 0;
  transform: translateY(8px);
}

/* agent utterance */
.au-say {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 11px;
  align-items: start;
  margin-bottom: 13px;
}
.au-say .who {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.au-say p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink);
}
.au-ic {
  display: block;
  flex: 0 0 auto;
}
.au-ic .ring {
  fill: var(--ground);
  stroke: var(--ink);
  stroke-width: 1.2;
}
.au-ic .gl {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.au-ic .glf {
  fill: var(--ink);
  stroke: none;
}

/* tool calls hang off a hairline, echoing the page thread */
.au-tools {
  display: grid;
  gap: 10px;
  border-left: 1px solid var(--hair);
  margin: 0 0 13px 11px;
  padding-left: 18px;
}
.au-tool {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: center;
}
.au-tool .src {
  display: block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.au-tool .act {
  display: block;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink);
}

/* dispatch roster */
.au-chips {
  margin: 0 0 13px 29px;
}
.au-chips .lbl {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.au-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--hair);
  padding: 4px 9px;
  margin: 0 6px 6px 0;
  font-size: 11.5px;
  color: var(--ink);
}
.au-chip i {
  display: block;
  width: 4px;
  height: 4px;
  background: var(--ink);
}

/* response board: who has quoted, who is still being chased */
.au-roll {
  margin: 0 0 13px 29px;
  border-top: 1px solid var(--hair);
}
.au-rrow {
  display: grid;
  grid-template-columns: 1fr auto 50px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
}
.au-rrow .sp {
  font-size: 11.5px;
  color: var(--muted);
}
.au-rrow .st {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--hair);
  padding: 1px 5px;
}
.au-rrow .dt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--construction);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.au-rrow.open .sp {
  color: var(--ink);
}
.au-rrow.open .st {
  color: var(--ink);
  border-color: var(--ink);
}

/* marginal note; .flag is the loudest thing on the page and still has no colour */
.au-note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  margin: 0 0 13px 29px;
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
  padding: 9px 0;
}
.au-note .tg {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 1px;
}
.au-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink);
}

/* inbound formats collapsing into one template */
.au-fmt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px 29px;
}
.au-fmt b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--hair);
  padding: 3px 7px;
  color: var(--muted);
}
.au-fmt em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
}

/* normalized comparison */
.au-tbl {
  margin: 0 0 13px 29px;
  border-top: 1px solid var(--ink);
}
.au-tr {
  display: grid;
  grid-template-columns: 1.55fr 0.68fr 0.82fr 0.6fr 0.68fr;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  border-bottom: 1px solid var(--hair);
}
.au-tr.hd {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 6px 0;
}
.au-tr span {
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.au-tr .sup {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink);
}
.au-tr.win span {
  color: var(--ink);
}
.au-tr.win .sup {
  font-weight: 700;
}
.au-tr .sq {
  display: block;
  width: 5px;
  height: 5px;
  background: var(--ink);
  flex: 0 0 auto;
}
.au-tr .mk {
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 400;
  border: 1px solid var(--ink);
  padding: 1px 4px;
  color: var(--ink);
}

/* right-to-left schedule: bars are derived from the SOP rule and grow back toward it */
.au-tl {
  position: relative;
  margin: 0 0 13px 29px;
}
.au-tl-sop {
  position: absolute;
  top: -2px;
  bottom: 4px;
  right: 68px;
  width: 1px;
  background: var(--ink);
}
.au-tl-sop b {
  position: absolute;
  top: 0;
  left: 5px;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.au-tl-row {
  display: grid;
  grid-template-columns: 88px 1fr 58px;
  gap: 10px;
  align-items: center;
  margin-bottom: 7px;
}
.au-tl-row:last-child {
  margin-bottom: 0;
}
.au-tl-row .lb {
  font-size: 11.5px;
  color: var(--ink);
}
.au-tl-row .dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.au-tl-bar {
  position: relative;
  height: 9px;
}
.au-tl-bar i {
  position: absolute;
  top: 0;
  height: 9px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: right center;
}
.au-tl-release i {
  left: 0;
  width: 5%;
}
.au-tl-nomination i {
  left: 3.5%;
  width: 5%;
}
.au-tl-kickoff i {
  left: 7%;
  width: 36.8%;
}
.au-tl-shots i {
  left: 43.9%;
  width: 36.8%;
}
.au-tl-ppap i {
  left: 80.7%;
  width: 19.3%;
}

/* live cost roll-up */
.au-cost {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
  margin: 0 0 13px 29px;
}
.au-cost div {
  padding: 11px 0 12px;
}
/* Scoped to the cells with `>`: a bare `div + div` also matched .v inside each
   cell, drawing a second short rule beside every figure. Only the full-height
   dividers between Target / Current / Variance are wanted. */
.au-cost > div + div {
  border-left: 1px solid var(--hair);
  padding-left: 14px;
}
.au-cost .k {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 5px;
}
.au-cost .v {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.3rem, 2.3vw, 1.7rem);
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* cost history across design changes */
.au-hist {
  margin: 0 0 4px 29px;
  border-top: 1px solid var(--hair);
}
.au-hrow {
  display: grid;
  grid-template-columns: 46px 54px 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--hair);
}
.au-hrow .rv {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.au-hrow .pc {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.au-hrow .wh {
  font-size: 11.5px;
  color: var(--construction);
}
.au-hrow .dt {
  font-family: var(--mono);
  font-size: 9px;
  color: var(--construction);
}
.au-hrow.cur .rv,
.au-hrow.cur .wh,
.au-hrow.cur .dt {
  color: var(--ink);
}
.au-hrow.cur .pc {
  color: var(--ink);
  font-weight: 700;
}

@media (max-width: 860px) {
  .au-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .au-panel-wrap {
    position: static;
    order: -1;
  }
}
@media (max-width: 520px) {
  .au-tbl,
  .au-tl,
  .au-cost,
  .au-hist,
  .au-chips,
  .au-note,
  .au-fmt {
    margin-left: 0;
  }
  .au-tools {
    padding-left: 14px;
  }
  .au-tr {
    grid-template-columns: 1.4fr 0.7fr 0.7fr 0.7fr;
  }
  .au-tr span:nth-child(3) {
    display: none;
  }
  .au-tl-row {
    grid-template-columns: 70px 1fr 58px;
  }
  .au-tl-sop {
    right: 68px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .au-in,
  .au-tl-bar i {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .au-step.on.run .au-rail i {
    animation: none;
    transform: scaleX(1);
  }
}

/* ---------- team (two founders, set as spec plates) ---------- */
body.team-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.team-page main {
  min-width: 0;
}
.team-page #team {
  width: 100%;
  padding-top: clamp(56px, 8vh, 96px);
  padding-bottom: clamp(80px, 11vh, 132px);
}
.team-page .team-grid {
  grid-template-columns: 1fr;
  gap: clamp(48px, 7vh, 80px);
}
.team-page .team-intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.team-page .cred-body-team {
  max-width: 34ch;
  margin: 0;
}
.team-page .founder-card {
  gap: clamp(22px, 2.2vw, 34px);
  padding: clamp(22px, 2.5vw, 36px);
}
.team-page .fc-photo {
  width: clamp(112px, 10vw, 148px);
  height: clamp(112px, 10vw, 148px);
}
.team-page .fc-name {
  font-size: clamp(1.25rem, 1.8vw, 1.65rem);
}
.team-page .fc-role {
  font-size: 15px;
}
.team-grid {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.cred-body-team {
  margin-top: 26px;
}
.team-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
}
/* same plate construction as the run log: white ground, ink hairline, sharp corners */
.founder-card {
  display: flex;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
  background: #fff;
  border: 1.2px solid var(--ink);
  border-radius: 2px;
  padding: clamp(16px, 2vw, 24px);
}
/* portraits print in the page's graphite until touched */
.fc-photo {
  width: clamp(84px, 8.5vw, 116px);
  height: clamp(84px, 8.5vw, 116px);
  flex: none;
  object-fit: cover;
  border-radius: 2px;
  filter: grayscale(1) contrast(1.04);
  transition: filter 0.3s ease;
}
.founder-card:hover .fc-photo {
  filter: none;
}
.fc-info {
  min-width: 0;
}
.fc-idx {
  display: block;
  font-size: 9px;
  margin-bottom: 8px;
}
.fc-name {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 0 0 5px;
}
.fc-role {
  font-family: var(--disp);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 12px;
}
.fc-link {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.fc-link:hover {
  color: var(--muted);
  border-color: var(--muted);
}
#team h1.big,
#team h2.big {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}
@media (max-width: 1120px) {
  .team-cards {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 860px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
  .team-page .team-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .team-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 640px) {
  .team-page #team {
    padding-top: 40px;
    padding-bottom: 64px;
  }
  .team-page .team-grid {
    gap: 38px;
  }
  .team-page .founder-card {
    gap: 16px;
    padding: 16px;
  }
  .team-page .fc-photo {
    width: 88px;
    height: 88px;
  }
  .team-page .fc-name {
    font-size: 1.15rem;
  }
  .team-page .fc-role {
    font-size: 13.5px;
  }
  .team-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- security (standalone page, same construction as team) ---------- */
body.security-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.security-page main {
  min-width: 0;
}
.security-page #security {
  padding-top: clamp(56px, 8vh, 96px);
}
#security h1.big,
#sec-docs h2.big {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}
.sec-intro {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: clamp(24px, 3vw, 48px);
  align-items: end;
}
.cred-body-sec {
  max-width: 40ch;
  margin: 0;
}
.sec-status {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 28px);
  margin-top: clamp(40px, 6vh, 64px);
}
/* same plate construction as the founder cards */
.status-card {
  background: #fff;
  border: 1.2px solid var(--ink);
  border-radius: 2px;
  padding: clamp(18px, 2vw, 28px);
}
.ss-title {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.15rem, 1.5vw, 1.45rem);
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 10px;
}
.ss-desc {
  font-family: var(--disp);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0;
}
.status-card:hover .ss-desc {
  color: var(--ink);
}
.cred-body-sub {
  margin-bottom: clamp(28px, 4vh, 44px);
}
/* subprocessor table — same ruled editorial construction as .cap-table */
.sub-table {
  border-top: 2px solid var(--ink);
}
.sub-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) 1.3fr 1.1fr;
  gap: clamp(16px, 3vw, 40px);
  align-items: baseline;
  padding: clamp(18px, 2.6vh, 26px) 0;
  border-bottom: 1px solid var(--hair);
}
.sub-row.sub-head {
  padding: 12px 0;
}
.sub-row.sub-head .mono {
  font-size: 9px;
}
.sub-vendor {
  font-family: var(--disp);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.sub-desc {
  font-family: var(--disp);
  font-size: clamp(0.92rem, 1.1vw, 1.02rem);
  color: var(--muted);
  line-height: 1.5;
}
.sub-row:hover .sub-desc {
  color: var(--ink);
}
.sec-docs-inner .cred-body-sec {
  max-width: 46ch;
}
.sec-docs-btn {
  margin-top: 28px;
  padding: 16px 26px;
  font-size: 12px;
}
@media (max-width: 1120px) {
  .sec-status {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  .sec-intro {
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }
  .sub-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .sub-row.sub-head {
    display: none;
  }
}
@media (max-width: 640px) {
  .security-page #security {
    padding-top: 40px;
  }
  .sec-status {
    grid-template-columns: 1fr;
    margin-top: 38px;
  }
}

/* ---------- closing cta ---------- */
.workflow-intro {
  position: static;
  margin-bottom: clamp(34px, 5vh, 58px);
}
.cred-body-workflow {
  margin-top: 18px;
  max-width: 46ch;
}
.close-cta {
  text-align: left;
}
.close-cta h2 {
  font-family: var(--disp);
  font-weight: 800;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 24px;
  max-width: 22ch;
}
.close-cta-button {
  padding: 16px 26px;
  font-size: 12px;
}

/* ---------- footer ---------- */
footer {
  border-top: 1px solid var(--ink);
  padding: 28px 0 44px;
}
.foot-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 40px;
  align-items: baseline;
  justify-content: space-between;
}
.foot-grid .wordmark {
  font-size: 16px;
  align-items: flex-start;
  gap: 2px;
}
.foot-grid .wordmark sup {
  margin-top: 1px;
}
.foot-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.foot-links a {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.foot-links a:hover {
  color: var(--ink);
}
.foot-links a[aria-current="page"] {
  color: var(--ink);
}
.foot-marg {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 22px;
}

@media (max-width: 980px) {
  .hero-inner {
    grid-template-columns: 1fr;
    padding-right: var(--gutter);
    gap: clamp(28px, 5vh, 44px);
  }
  .hero-main {
    order: 1;
    justify-content: flex-start;
    gap: 24px;
    padding-left: 0;
  }
  .cta-row {
    margin-left: 0;
    gap: 20px;
  }
  .hero-figure {
    order: 3;
    min-height: clamp(300px, 46vh, 460px);
  }
  .hero-slot .schematic {
    width: 100%;
  }
}
@media (max-width: 860px) {
  .cred-grid,
  .wf-grid {
    grid-template-columns: 1fr;
  }
  .wf-intro {
    position: static;
  }
}
@media (max-width: 520px) {
  .hero-feats {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .hf + .hf {
    border-left: 0;
    border-top: 1px solid var(--hair);
    padding-left: 0;
    padding-top: 18px;
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .thread-ink {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
}

/* ---------- capabilities: inverted theme band (flavor break, Squash-style) ---------- */
#suppliers {
  background: var(--ink);
  color: var(--ground);
}
#suppliers .sec-tag {
  border-top: 1px solid rgba(244, 244, 242, 0.18);
}
#suppliers .mono {
  color: rgba(244, 244, 242, 0.5);
}
#suppliers .cap-table {
  border-top: 2px solid var(--ground);
}
#suppliers .cap-row {
  border-bottom: 1px solid rgba(244, 244, 242, 0.14);
}
#suppliers .cap-row .idx {
  color: rgba(244, 244, 242, 0.45);
}
#suppliers .cap-row .name {
  color: var(--ground);
}
#suppliers .cap-row .desc {
  color: rgba(244, 244, 242, 0.55);
}
#suppliers .cap-row:hover .desc {
  color: var(--ground);
}

/* from-this / to-this headings: a notch smaller than the default h2.big */
#company h2.big,
#integration h2.big {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
}

/* ===== responsive: keep both animations legible at every width ===== */

/* bid-card type never drops below legible (max() is a no-op on large screens) */
.sa-title {
  font-size: max(1.777cqw, 11px);
}
.sa-who .sa-name {
  font-size: max(1.314cqw, 10px);
}
.sa-who .sa-sub {
  font-size: max(1.056cqw, 8px);
}
.sa-lead {
  font-size: max(1.288cqw, 9px);
}
.sa-price {
  font-size: max(1.365cqw, 10px);
}
.sa-headers {
  font-size: max(0.876cqw, 7px);
}
.sa-avatar {
  font-size: max(1.611cqw, 10px);
}

@media (max-width: 980px) {
  /* the agent-layer diagram keeps its proportions and becomes swipeable
     instead of shrinking its labels into illegibility */
  .aw-guide-a,
  .aw-guide-b,
  .aw-terminal {
    left: calc(100% - 8px);
  }
  /* Reach the right margin before the heading at every narrow width. The
     figure moves farther from the preceding knot as the copy wraps, so this
     offset grows smoothly instead of introducing a breakpoint kink. */
  .aw-guide-a {
    top: clamp(-350px, calc(36.9vw - 488px), -220px);
  }
  .aw-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .aw-stage {
    min-width: 680px;
  }
  .aw-label {
    font-size: max(0.92cqw, 8.5px);
  }
  .aw-row .name {
    font-size: max(1.25cqw, 11px);
  }
  .aw-out {
    font-size: max(1.18cqw, 10px);
  }
  .aw-chipfile {
    width: max(2.8cqw, 26px);
    height: max(1.9cqw, 16px);
    font-size: max(0.78cqw, 7px);
  }
}

@media (max-width: 700px) {
  /* phones: the bid card grows to stay readable (geometry x1.75) */
  .sa-card {
    left: 27%;
    top: 22%;
    width: 71%;
    padding: 3.042cqw 3.267cqw 2.48cqw;
    border-radius: 2.254cqw;
  }
  .sa-title {
    font-size: max(3.11cqw, 11px);
  }
  .sa-pill {
    margin-top: 1.239cqw;
    font-size: max(1.848cqw, 8px);
    border-radius: 4.508cqw;
    padding: 0.495cqw 1.398cqw;
  }
  .sa-headers {
    gap: 4.734cqw;
    font-size: max(1.533cqw, 7px);
    margin: 2.14cqw 0.787cqw 1.239cqw 0;
  }
  .sa-row {
    gap: 2.14cqw;
    padding: 1.759cqw 1.398cqw;
    border-radius: 1.622cqw;
  }
  .sa-row + .sa-row {
    margin-top: 0.721cqw;
  }
  .sa-sep {
    margin: 0.406cqw 0.901cqw;
  }
  .sa-avatar {
    width: 5.747cqw;
    height: 5.747cqw;
    border-radius: 1.353cqw;
    font-size: max(2.819cqw, 10px);
  }
  .sa-who .sa-name {
    font-size: max(2.3cqw, 10px);
  }
  .sa-who .sa-sub {
    font-size: max(1.848cqw, 8px);
    margin-top: 0.226cqw;
  }
  .sa-lead {
    font-size: max(2.254cqw, 9px);
  }
  .sa-price {
    font-size: max(2.389cqw, 10px);
    min-width: 10.369cqw;
  }
  .sa-check {
    width: 3.042cqw;
    height: 3.042cqw;
    margin-left: 0.675cqw;
  }
  .sa-check svg {
    width: 1.689cqw;
    height: 1.689cqw;
  }
  .sa-skel {
    inset: 1.398cqw;
    gap: 2.14cqw;
  }
  .sa-skel .sa-sk {
    border-radius: 1.013cqw;
  }
  .sa-sk-av {
    width: 5.747cqw;
    height: 5.747cqw;
    border-radius: 1.353cqw;
  }
  .sa-sk-name {
    width: 18.483cqw;
    height: 2.14cqw;
  }
  .sa-sk-lead {
    width: 7.663cqw;
    height: 1.915cqw;
  }
  .sa-sk-price {
    width: 9.016cqw;
    height: 2.14cqw;
  }
  .sa-content {
    gap: 2.14cqw;
  }
}