/* ==========================================================================
   Simulated product interface library.

   These are interface MOCK-UPS built in HTML and CSS, used as the proof system
   in place of screenshots. Every frame carries a visible "Illustrative" label
   so no visitor can mistake one for a real product screenshot — the claims
   rules in the source documents forbid fabricated screens, and this treatment
   is the labelled-schematic alternative they permit.
   ========================================================================== */

/* --------------------------------------------------------------- frame */

.appframe {
  border-radius: var(--radius-xl);
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}

.appframe-dark {
  box-shadow: 0 40px 90px -40px rgba(4, 14, 26, 0.75);
  border-color: rgba(255, 255, 255, 0.14);
}

.appbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px;
  background: var(--bg-alt);
  border-bottom: 1px solid var(--line);
}

.appdots {
  display: flex;
  gap: 6px;
  flex: none;
}

.appdots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d9dee5;
  display: block;
}

.apptitle {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}

.appillus {
  margin-left: auto;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--faint);
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 999px;
  padding: 3px 9px;
  flex: none;
}

.appbody {
  padding: 22px;
  background: #fff;
}

.appbody-tint {
  background: linear-gradient(180deg, #fbfcfd 0%, #f6f8fb 100%);
}

.appfoot {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: var(--fs-xxs);
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* -------------------------------------------------------------- request */

/* Named .reqpanel, not .req. A bare `.req { display: grid }` here was also
   matching the required-field marker `<span class="req">*</span>` in every
   form on the site, turning an inline asterisk into a block-level grid
   container — which is why it sat on its own line under the label. */

.reqpanel {
  display: grid;
  gap: 14px;
}

.req-head {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  flex: none;
  background: var(--info-bg);
  color: var(--navy);
}

.avatar-agent {
  background: var(--navy-deep);
  color: #fff;
}

.avatar-green {
  background: var(--green-tint);
  color: var(--green-deeper);
}

.avatar-amber {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.who {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.25;
}

.who span {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 400;
  color: var(--muted);
}

.stamp {
  margin-left: auto;
  font-size: 11px;
  color: var(--faint);
  font-family: var(--font-mono);
}

.bubble {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 4px 14px 14px 14px;
  padding: 14px 16px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.bubble-agent {
  background: #fff;
  border-color: #cfdff0;
  box-shadow: var(--shadow-xs);
}

.bubble em {
  font-style: normal;
  background: var(--warning-bg);
  color: var(--warning-text);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 500;
}

.bubble strong {
  font-weight: 500;
  color: var(--navy-deep);
}

/* ---------------------------------------------------------- field grid */

.fgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.fgrid > div {
  background: #fff;
  padding: 12px 14px;
}

.fgrid dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 4px;
}

.fgrid dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--navy-deep);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 7px;
}

.fgrid .filled {
  color: var(--green-deeper);
}

.fgrid .missing {
  color: var(--warning-text);
}

.tick {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--green-tint);
  color: var(--green-deeper);
  display: inline-grid;
  place-items: center;
  font-size: 9px;
  flex: none;
}

/* --------------------------------------------------------------- rows */

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

.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 13px 16px;
  font-size: var(--fs-sm);
  transition: background-color var(--t-fast) var(--ease);
}

.row + .row {
  border-top: 1px solid var(--line-soft);
}

.row:hover {
  background: var(--bg-alt);
}

.row-head {
  background: var(--bg-alt);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  padding: 10px 16px;
}

.row-main {
  min-width: 0;
}

.row-title {
  color: var(--navy-deep);
  font-weight: 500;
  display: block;
  line-height: 1.3;
}

.row-sub {
  color: var(--muted);
  font-size: var(--fs-xs);
  display: block;
  margin-top: 2px;
}

.row-3 {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.row-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.row-strong {
  color: var(--navy-deep);
  font-weight: 500;
}

/* ------------------------------------------------------------- meters */

.meter {
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  min-width: 80px;
}

.meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--green-deeper);
  transition: width 1.2s var(--ease);
}

.meter-amber i {
  background: var(--warning-text);
}
.meter-navy i {
  background: var(--navy-soft);
}
.meter-red i {
  background: var(--risk-text);
}

.bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 40px;
}

.bars-mini i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: var(--navy-soft);
  opacity: 0.35;
  transition:
    height 0.9s var(--ease),
    opacity var(--t) var(--ease);
}

.bars-mini i.hot {
  background: var(--green-deeper);
  opacity: 1;
}

/* ---------------------------------------------------------- policy rule */

.rule {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  font-size: var(--fs-sm);
}

.rule + .rule {
  margin-top: 8px;
}

.rule-mark {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  flex: none;
  margin-top: 1px;
}

.rule-mark.ok {
  background: var(--green-tint);
  color: var(--green-deeper);
}
.rule-mark.stop {
  background: var(--risk-bg);
  color: var(--risk-text);
}
.rule-mark.hold {
  background: var(--warning-bg);
  color: var(--warning-text);
}

.rule-text {
  color: var(--ink-2);
  line-height: 1.45;
  min-width: 0;
}

.rule-text b {
  font-weight: 500;
  color: var(--navy-deep);
}

.rule-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  display: block;
  margin-top: 3px;
}

/* ---------------------------------------------------------- timeline */

.tl {
  position: relative;
  padding-left: 26px;
}

.tl::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}

.tl-item {
  position: relative;
  padding-bottom: 18px;
}

.tl-item:last-child {
  padding-bottom: 0;
}

.tl-item::before {
  content: '';
  position: absolute;
  left: -23px;
  top: 5px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--faint);
}

.tl-item.ok::before {
  border-color: var(--green-deeper);
  background: var(--green-deeper);
}
.tl-item.human::before {
  border-color: var(--warning-text);
  background: var(--warning-bg);
}
.tl-item.sys::before {
  border-color: var(--navy-deep);
  background: var(--navy-deep);
}

.tl-title {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.35;
}

.tl-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.tl-meta .mono {
  font-size: 11px;
  color: var(--faint);
}

/* -------------------------------------------------------- stage flow */

.flow {
  display: grid;
  gap: 10px;
}

.stage {
  border: 1px solid var(--line);
  border-left: 3px solid var(--faint);
  border-radius: var(--radius);
  background: #fff;
  padding: 14px 16px;
  transition:
    opacity var(--t-story) var(--ease),
    transform var(--t-story) var(--ease),
    border-color var(--t-story) var(--ease),
    box-shadow var(--t-story) var(--ease);
}

.stage[data-play] {
  opacity: 0.28;
  transform: translateY(8px);
}

.stage[data-play].on {
  opacity: 1;
  transform: none;
  box-shadow: var(--shadow-xs);
}

.stage-trigger {
  border-left-color: var(--green);
}
.stage-agent {
  border-left-color: var(--navy-soft);
}
.stage-policy {
  border-left-color: var(--faint);
}
.stage-human {
  border-left-color: var(--warning-text);
}
.stage-system {
  border-left-color: var(--navy-deep);
}
.stage-done {
  border-left-color: var(--green-deeper);
}

.stage-top {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.stage-role {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.stage-title {
  font-weight: 500;
  color: var(--navy-deep);
  font-size: var(--fs-sm);
  line-height: 1.35;
}

.stage-detail {
  margin-top: 5px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

/* connector between stages */
.flow-connect {
  display: flex;
  align-items: center;
  gap: 9px;
  padding-left: 4px;
  font-size: 11px;
  color: var(--faint);
}

.flow-connect::before {
  content: '';
  width: 1px;
  height: 14px;
  background: var(--line);
  margin-left: 7px;
}

/* ------------------------------------------------------- entity tree */

.tree {
  display: grid;
  gap: 12px;
}

.tree-node {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 13px 16px;
}

.tree-group {
  background: var(--navy-deep);
  border-color: var(--navy-deep);
  color: #fff;
}

.tree-group .tree-name {
  color: #fff;
}
.tree-group .tree-meta {
  color: rgba(255, 255, 255, 0.66);
}

.tree-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
}

.tree-meta {
  font-size: var(--fs-xs);
  color: var(--muted);
  margin-top: 3px;
}

.tree-children {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding-left: 22px;
  position: relative;
}

.tree-children::before {
  content: '';
  position: absolute;
  left: 8px;
  top: -12px;
  bottom: 50%;
  width: 1px;
  background: var(--line);
}

@media (max-width: 620px) {
  .tree-children {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 16px;
  }
}

/* --------------------------------------------------------- erp shuttle */

.shuttle {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
}

@media (max-width: 620px) {
  .shuttle {
    grid-template-columns: minmax(0, 1fr);
  }
}

.shuttle-node {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  padding: 16px;
  text-align: center;
}

.shuttle-node .n-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 6px;
}

.shuttle-node .n-name {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
}

.shuttle-pipe {
  position: relative;
  height: 2px;
  background: var(--line);
  border-radius: 2px;
  min-width: 70px;
  overflow: hidden;
}

.shuttle-pipe i {
  position: absolute;
  top: -2px;
  left: -20%;
  width: 20%;
  height: 6px;
  border-radius: 999px;
  background: var(--green);
  animation: shuttleRun 2.6s var(--ease-io) infinite;
}

.shuttle-pipe.back i {
  animation-name: shuttleBack;
  background: var(--navy-soft);
}

@keyframes shuttleRun {
  0% {
    left: -22%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: 102%;
    opacity: 0;
  }
}

@keyframes shuttleBack {
  0% {
    left: 102%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    left: -22%;
    opacity: 0;
  }
}

@media (max-width: 620px) {
  .shuttle-pipe {
    height: 24px;
    width: 2px;
    margin-inline: auto;
  }
}

/* --------------------------------------------------------- stat tiles */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.stat {
  background: #fff;
  padding: 20px;
}

.stat .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.stat .v {
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
  line-height: 1;
  margin-bottom: 8px;
}

.bg-navy .stats {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.14);
}

.bg-navy .stat {
  background: rgba(255, 255, 255, 0.04);
}

.bg-navy .stat .v {
  color: #fff;
}

/* ------------------------------------------------------ manual clutter */

.clutter {
  display: grid;
  gap: 10px;
}

.scrap {
  border: 1px dashed #cfd7e0;
  border-radius: var(--radius);
  background: var(--bg-alt);
  padding: 13px 16px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  transition:
    transform var(--t-story) var(--ease),
    opacity var(--t-story) var(--ease);
}

.scrap b {
  font-weight: 500;
  color: var(--navy-deep);
}

.scrap .tag {
  font-size: 11px;
  color: var(--risk-text);
  background: var(--risk-bg);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.scrap:nth-child(odd) {
  transform: rotate(-0.35deg);
}
.scrap:nth-child(even) {
  transform: rotate(0.3deg);
}

/* ------------------------------------------------- proof strip marquee */

.proofstrip {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #fff;
  overflow: hidden;
  padding-block: 22px;
}

.proof-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: marquee 42s linear infinite;
}

.proofstrip:hover .proof-track {
  animation-play-state: paused;
}

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

.proof-item {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}

.proof-item svg {
  width: 17px;
  height: 17px;
  color: var(--green-deeper);
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .proof-track {
    animation: none;
    flex-wrap: wrap;
    width: auto;
    justify-content: center;
    row-gap: 16px;
  }
  .shuttle-pipe i {
    animation: none;
    left: 40%;
  }
}

/* ------------------------------------------------------- sticky story */

.story {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 72px;
  align-items: start;
}

@media (max-width: 1040px) {
  .story {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.story-steps {
  display: grid;
  gap: 14px;
}

.story-step {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: 22px 24px;
  cursor: pointer;
  transition:
    border-color var(--t-slow) var(--ease),
    background-color var(--t-slow) var(--ease),
    box-shadow var(--t-slow) var(--ease),
    transform var(--t-slow) var(--ease);
}

.story-step:hover {
  border-color: #cdd6e0;
}

.story-step.active {
  border-color: var(--green-line);
  background: var(--green-tint);
  box-shadow: var(--shadow-sm);
}

.story-step .s-kicker {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 8px;
  display: block;
}

.story-step h3 {
  font-size: 1.0625rem;
  margin-bottom: 7px;
}

.story-step p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

.story-panel {
  position: sticky;
  top: calc(var(--header-h) + 40px);
}

@media (max-width: 1040px) {
  .story-panel {
    display: none;
  }
}

.story-detail {
  display: grid;
  gap: 16px;
}

.story-detail dt {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 5px;
}

.story-detail dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.5;
}

.story-progress {
  display: flex;
  gap: 5px;
  margin-top: 24px;
}

.story-progress i {
  height: 3px;
  flex: 1;
  border-radius: 3px;
  background: var(--line);
  transition: background-color var(--t-slow) var(--ease);
}

.story-progress i.on {
  background: var(--green-deeper);
}

/* mobile: show detail inline */
.story-inline {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--green-line);
}

@media (max-width: 1040px) {
  .story-inline {
    display: grid;
    gap: 12px;
  }
}

/* ---------------------------------------------------------- calculators */

.calc-out {
  background: var(--navy-deep);
  color: #fff;
  border-radius: var(--radius-xl);
  padding: 32px;
  position: relative;
  overflow: hidden;
}

.calc-out::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 100% at 100% 0%, rgba(88, 185, 71, 0.22), transparent 60%);
  pointer-events: none;
}

.calc-out > * {
  position: relative;
}

.calc-out .k {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 8px;
}

.calc-big {
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1;
  color: #fff;
}

.calc-big.green {
  color: var(--green);
}

.calc-sub {
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  margin-top: 10px;
}

.calc-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

@media (max-width: 980px) {
  .calc-split {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
}

.range-field input[type='range'] {
  width: 100%;
  accent-color: var(--green-deeper);
  padding: 0;
  border: 0;
  background: transparent;
}

.range-val {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--navy-deep);
  font-weight: 500;
}

/* ------------------------------------------------------------ scorecard */

.score-ring {
  width: 108px;
  height: 108px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: conic-gradient(var(--green-deeper) var(--pct, 0%), var(--line) 0);
  position: relative;
  transition: background 0.8s var(--ease);
}

.score-ring::before {
  content: '';
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: #fff;
}

.score-ring span {
  position: relative;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--navy-deep);
}

/* --------------------------------------------------- self-qualification */

.qual-head {
  margin-bottom: 28px;
}

.qual-head h2 {
  font-size: clamp(1.44rem, 1.2rem + 1vw, 1.94rem);
}

.qual-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 24px;
}

@media (max-width: 860px) {
  .qual-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.qual-yes,
.qual-no {
  border-radius: var(--radius-xl);
  padding: 28px;
  border: 1px solid var(--line);
  background: #fff;
}

.qual-yes {
  border-color: var(--green-line);
  background: var(--green-tint);
}

.qual-yes strong,
.qual-no strong {
  font-weight: 500;
  color: var(--navy-deep);
}

.crosses li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-size: var(--fs-sm);
}

.crosses li + li {
  margin-top: 12px;
}

.crosses li::before,
.crosses li::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 11px;
  height: 1.6px;
  background: var(--faint);
  border-radius: 2px;
}

.crosses li::before {
  transform: rotate(45deg);
}
.crosses li::after {
  transform: rotate(-45deg);
}

.crosses em {
  font-style: italic;
}

/* ---------------------------------------------------- industry scenarios */

.scenario {
  border-left: 2px solid var(--green-line);
  padding: 4px 0 4px 26px;
}

.scenario h3 {
  font-size: 1.06rem;
  margin-bottom: 8px;
}

.scenario p {
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.scenario .num {
  margin-bottom: 10px;
}

.scenario-note {
  margin-top: 40px;
  padding: 20px 24px;
  background: var(--green-tint);
  border-radius: var(--radius-lg);
  color: var(--navy-deep);
  font-size: var(--fs-sm);
  font-weight: 500;
  max-width: 72ch;
}

/* ------------------------------------------------- soft result capture */

.capture {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr);
  gap: 40px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--green-line);
  border-radius: var(--radius-xl);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

@media (max-width: 860px) {
  .capture {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    padding: 26px;
  }
}

.capture h3 {
  font-size: 1.25rem;
}

.capture-form {
  display: grid;
  gap: 12px;
}

.capture-form .btn {
  width: 100%;
  justify-content: center;
}

/* ==========================================================================
   Customer stories
   ========================================================================== */

.storyfacts {
  display: grid;
  gap: 0;
}

.storyfacts > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 16px;
  padding-block: 11px;
  border-bottom: 1px solid var(--line);
}

.storyfacts > div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.storyfacts dt {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.storyfacts dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2, var(--navy));
  line-height: 1.45;
}

@media (max-width: 520px) {
  .storyfacts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Numbered implementation list */

.storysteps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  counter-reset: none;
}

.storysteps > li {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 24px;
  padding-block: 26px;
  border-top: 1px solid var(--line);
  align-items: start;
}

.storysteps > li:last-child {
  border-bottom: 1px solid var(--line);
}

.storystep-n {
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.storysteps h3 {
  margin: 0;
}

.storysteps p {
  margin: 8px 0 12px;
  color: var(--muted);
  max-width: 72ch;
}

@media (max-width: 620px) {
  .storysteps > li {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Story index cards */

.storygrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

.storycard {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: var(--shadow-xs);
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease),
    transform var(--t) var(--ease);
}

.storycard:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.storycard-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 20px;
}

/* Scope facts sit above the headline, following the structure Zip uses on its
   customer cards — the reader gets three scannable facts before reaching a
   sentence. Zip's are quantified outcomes; ours are scope, because no outcome
   was measured. See docs/competitor-research.md section 8. */
.storycard-stats {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: grid;
  gap: 10px;
}

.storycard-stats li {
  font-size: 1.0625rem;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
  line-height: 1.25;
  padding-left: 16px;
  border-left: 2px solid var(--green);
}

.storycard-h {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: var(--tracking-h);
  line-height: 1.25;
  color: var(--navy-deep);
  margin: 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* The outcome line, between the headline and the link.
   Set lighter and smaller than the headline on purpose: the headline is what
   the customer DID, this is what they GOT, and the reader should take them in
   that order rather than meet two competing bold statements. */
.storycard-o {
  display: block;
  margin-top: 10px;
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--muted);
}

.storycard-go {
  margin-top: auto;
  padding-top: 22px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--green-deeper);
}

/* Anonymity note. Deliberately prominent — an unexplained blank reads as
   weakness, an explained one reads as discipline. */

.anon {
  border-left: 3px solid var(--green);
  background: var(--bg-alt);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  padding: 26px 30px;
  max-width: 82ch;
}

.bg-alt .anon {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
}

.anon-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 10px;
}

.anon p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* Plain link list */

.linklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.linklist li {
  border-bottom: 1px solid var(--line);
}

.linklist a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 13px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy);
  transition: color var(--t-fast) var(--ease);
}

.linklist a:hover {
  color: var(--green-deeper);
}

/* Contextual proof banner, used on the industry and solution pages the
   deployment actually relates to. */

.storyband {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 24px;
  padding: 20px 26px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  background: var(--bg-alt);
  transition:
    border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease);
}

.storyband:hover {
  background: #fff;
  border-color: var(--green-line);
  border-left-color: var(--green);
}

.storyband-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  white-space: nowrap;
}

.storyband-t {
  font-size: var(--fs-sm);
  color: var(--navy);
  line-height: 1.5;
}

.storyband-go {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--green-deeper);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .storyband {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ==========================================================================
   Page depth blocks — use cases, capabilities, roles, evaluation
   Structure measured off jaggaer.com; see docs/competitor-research.md §9.
   ========================================================================== */

/* Named buying situations, in four scannable columns. */

.ucgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px 28px;
}

.uccol h3 {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.uccol ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.uccol li {
  font-size: var(--fs-sm);
  color: var(--ink-2, var(--navy));
  line-height: 1.45;
  padding-left: 18px;
  position: relative;
}

.uccol li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 1px;
  background: var(--green);
}

.bg-alt .uccol h3 {
  border-bottom-color: var(--line);
}

/* Mechanical capability detail. Two columns, term above definition. */

.capgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 44px;
  margin: 0;
}

.capitem {
  padding-block: 22px;
  border-top: 1px solid var(--line);
}

.capitem dt {
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--navy-deep);
  letter-spacing: -0.012em;
  line-height: 1.3;
}

.capitem dd {
  margin: 7px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

/* ==========================================================================
   Stakes — the cost of the current state
   Deliberately quiet: no red, no warning iconography. The consequences are
   structural rather than dramatic, and styling them as alarms would make
   them read as marketing rather than as observations.
   ========================================================================== */

 /* Four consequences want a 2x2 block. auto-fit put three on the first row
   and orphaned the fourth beside a column of white space. */
.stakegrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 48px;
}

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

.stakeitem {
  position: relative;
  padding: 26px 0 26px 46px;
  border-top: 1px solid var(--line);
}

.stake-n {
  position: absolute;
  left: 0;
  top: 27px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green-deeper);
  font-variant-numeric: tabular-nums;
}

.stakeitem h3 {
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.35;
  letter-spacing: -0.012em;
  margin: 0;
}

.stakeitem p {
  margin: 9px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 620px) {
  .stakeitem {
    padding-left: 38px;
  }
}

/* ==========================================================================
   Stakeholder pain and change
   One card per role. The pain is a quotation, so it is set in italic and
   given the quotation marks in CSS rather than in the content, which keeps
   the source text plain and searchable.
   ========================================================================== */

.shgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 22px;
}

.shcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.sh-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.sh-top h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.012em;
}

.sh-tag {
  font-size: var(--fs-xxs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
  white-space: nowrap;
}

.sh-k {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 6px;
}

.sh-pain {
  margin: 18px 0 0;
  font-size: var(--fs-sm);
  font-style: italic;
  color: var(--ink-2);
  line-height: 1.6;
}

.sh-pain::before {
  content: '\201C';
}

.sh-pain::after {
  content: '\201D';
}

.sh-pain .sh-k {
  font-style: normal;
}

.sh-win {
  margin: 18px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.sh-mods {
  list-style: none;
  margin: 20px 0 0;
  padding: 16px 0 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.sh-mods li {
  font-size: var(--fs-xs);
}

.sh-mods li + li::before {
  content: '·';
  color: var(--faint);
  margin-right: 10px;
}

.sh-mods a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--green-line);
}

.sh-mods a:hover {
  color: var(--green-deeper);
  border-bottom-color: var(--green);
}

/* ==========================================================================
   Qualifier, immediately before the ask
   Four short exchanges. Compact by design — this is the last thing read
   before the CTA and must not compete with it for attention.
   ========================================================================== */

.qgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px 40px;
}

.qitem {
  border-top: 2px solid var(--navy-deep);
  padding-top: 16px;
}

.q-q {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.4;
}

.q-a {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* Who touches this, and what changes for them. */

.rolelist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}

.rolelist li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
  padding-block: 15px;
  border-top: 1px solid var(--line);
}

.rolelist li:last-child {
  border-bottom: 1px solid var(--line);
}

.rolelist b {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.4;
}

.rolelist span {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.5;
}

@media (max-width: 620px) {
  .rolelist li {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* Questions to put to any vendor. Numbered, because they are a checklist. */

.evallist {
  list-style: none;
  counter-reset: ev;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.evallist li {
  counter-increment: ev;
  position: relative;
  padding-left: 38px;
  font-size: var(--fs-sm);
  color: var(--ink-2, var(--navy));
  line-height: 1.55;
}

.evallist li::before {
  content: counter(ev, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green-deeper);
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Homepage objection block
   Three objections that decide the deal, answered before the reader raises
   them. Presented as one section rather than three consecutive ones, which
   is how they previously read as a wall.
   ========================================================================== */

.objgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

.objitem {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px;
  display: flex;
  flex-direction: column;
}

.objq {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--muted);
  font-style: italic;
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  line-height: 1.45;
}

.objitem h3 {
  font-size: var(--fs-h3);
  font-weight: 400;
  letter-spacing: var(--tracking-h);
  line-height: 1.22;
  color: var(--navy-deep);
  margin: 0 0 14px;
}

.objitem > p {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 20px;
}

.objitem .ticks {
  margin: 0 0 22px;
}

.objitem .ticks li {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.objitem .alink {
  margin-top: auto;
}

/* Explainer misconception block — the claim, then the correction. */

.misgrid { display: grid; gap: 18px; }

.misitem {
  border-left: 3px solid var(--line);
  padding-left: 22px;
}

.miswrong {
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  margin: 0 0 8px;
}

.misright {
  font-size: var(--fs-sm);
  color: var(--navy-deep);
  line-height: 1.6;
  margin: 0;
}

.bg-alt .misitem { border-left-color: var(--green); }

/* ==========================================================================
   Mid-page conversion block and compact proof band
   ========================================================================== */

.midcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 36px;
  padding: 28px 32px;
  border-radius: var(--radius-lg);
  background: var(--navy-deep);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.midcta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 120% at 88% 20%, rgba(88, 185, 71, 0.22), transparent 62%);
  pointer-events: none;
}

.midcta > * { position: relative; }

.midcta-copy { flex: 1 1 340px; min-width: 0; }

.midcta-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 8px;
}

.midcta-t {
  font-size: 1.19rem;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.32;
  color: #fff;
  max-width: 44ch;
  margin: 0;
}

.midcta-acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}

/* The outline button inverts on this dark ground. */
.midcta .btn.btn-outline {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

.midcta .btn.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.75);
  color: #fff;
}

.midcta-note {
  margin-top: 14px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

@media (max-width: 720px) {
  .midcta { padding: 24px; }
  .midcta-acts { width: 100%; }
  .midcta-acts .btn { flex: 1 1 100%; }
}

/* Proof band */

.proofband {
  padding-block: 4px;
}

.proofband-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 18px;
}

.proofband-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.proofband-list a {
  display: block;
  padding: 20px 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  height: 100%;
  transition:
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t) var(--ease);
}

.proofband-list a:hover {
  border-color: var(--green-line);
  box-shadow: var(--shadow-sm);
}

.pb-sector {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 8px;
}

.pb-head {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--navy-deep);
  line-height: 1.4;
  margin-bottom: 12px;
}

.pb-go {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--green-deeper);
}

/* Lighter second conversion point. */

.softcta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px 32px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.softcta-t {
  flex: 1 1 320px;
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
  line-height: 1.4;
  margin: 0;
  max-width: 48ch;
}

.softcta .cta-row { flex: 0 0 auto; }

@media (max-width: 720px) {
  .softcta .cta-row { width: 100%; }
  .softcta .btn { flex: 1 1 100%; }
}

/* ==========================================================================
   ZIP-SHAPED PRODUCT PAGE
   Decoded from zip.com/products/intake-to-procure (docs/zip-page-method.md).
   Their page is 789 words with a visual for every claim. The rules below
   exist to make that discipline possible: large art blocks, one sentence of
   body copy, and motion that carries the explanation.

   Every animation here stops under prefers-reduced-motion, and every section
   is fully readable with JavaScript disabled — the scroll states are applied
   only after the script marks a container [data-enhanced].
   ========================================================================== */

/* Centred heading. Only alignment is changed — the 780px max-width from
   .sec-head is inherited deliberately. Overriding it with a ch value was a
   bug: `ch` resolves against .sec-head's own 16px font, not the 42px display
   heading inside it, so the container collapsed to about 200px and every
   centred heading broke onto four lines. */
.sec-head.centred {
  text-align: center;
  margin-inline: auto;
}

.sec-head.centred .sec-sub {
  max-width: 60ch;
  margin-inline: auto;
}

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

/* The site header is `position: sticky` and renders transparent with a
   reversed logo on hero pages, so a dark hero must be pulled up underneath
   it — exactly as .hero does on the homepage. Without the negative margin
   the white logo and white nav text sit on the white page background above
   the hero and the menu disappears. */
.zhero {
  position: relative;
  background: #16212e;
  color: #fff;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + 76px);
  padding-bottom: 84px;
}

.zhero > * {
  position: relative;
  z-index: 2;
}

.zhero-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px 56px;
  align-items: end;
}

.zhero h1 {
  margin: 14px 0 0;
  font-size: var(--fs-mega);
  line-height: 1.02;
  letter-spacing: var(--tracking-mega);
  color: #fff;
  font-weight: 500;
}

.zhero .eyebrow-trail,
.zhero .eyebrow {
  color: #8ed77f;
}

.zhero .eyebrow-trail i {
  color: #5d6f81;
}

.zhero-sub {
  margin: 0;
  font-size: clamp(1.5rem, 1rem + 1.6vw, 2.125rem);
  line-height: 1.22;
  letter-spacing: -0.02em;
  color: #9fb0c2;
}

.zhero .cta-row {
  margin-top: 30px;
}

.zhero-stage {
  margin-top: 64px;
  border-radius: var(--radius-xl);
  background: linear-gradient(148deg, #22405f 0%, #2f6e25 128%);
  padding: clamp(18px, 3vw, 40px);
}

@media (max-width: 900px) {
  .zhero {
    padding-top: 118px;
  }

  .zhero-top {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

/* -------------------------------------------------- hero schematic motion */

.zhero-motion {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 20px;
}

.zhm-pane {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 26px;
  min-height: 236px;
}

.zhm-k {
  margin: 0 0 16px;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.zhm-type {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
  color: var(--navy-deep);
}

.zhm-type span {
  display: inline-block;
  animation: zhmType 9s steps(60, end) infinite;
  clip-path: inset(0 100% 0 0);
  border-right: 2px solid var(--green);
  padding-right: 3px;
}

@keyframes zhmType {
  0% { clip-path: inset(0 100% 0 0); }
  22%, 92% { clip-path: inset(0 0 0 0); }
  97%, 100% { clip-path: inset(0 100% 0 0); }
}

.zhm-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.zhm-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-radius: var(--radius);
  background: var(--bg-alt);
  font-size: var(--fs-sm);
  color: var(--ink-2);
  opacity: 0;
  transform: translateY(6px);
  animation: zhmIn 9s ease-out infinite;
  animation-delay: calc(var(--i) * 0.82s + 1.4s);
}

@keyframes zhmIn {
  0%, 4% { opacity: 0; transform: translateY(6px); }
  9%, 88% { opacity: 1; transform: none; }
  94%, 100% { opacity: 0; transform: translateY(6px); }
}

.zhm-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--faint);
  flex: 0 0 auto;
}

.zhm-agent .zhm-dot { background: #4a7fb5; }
.zhm-rule .zhm-dot { background: var(--green); }
.zhm-human .zhm-dot { background: #d9a13a; }
.zhm-system .zhm-dot,
.zhm-trigger .zhm-dot { background: var(--faint); }

.zhm-human {
  background: #fdf6e7;
  color: var(--warning-text);
  font-weight: 500;
}

.zhm-t {
  min-width: 0;
}

@media (max-width: 760px) {
  .zhero-motion {
    grid-template-columns: 1fr;
  }

  .zhm-pane {
    min-height: 0;
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zhm-type span {
    animation: none;
    clip-path: none;
    border-right: 0;
  }

  .zhm-step {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ------------------------------------------------- two big capability cards */

.zsquares {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 30px;
}

.zsquare-art,
.zcard-art {
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #eef3f8 0%, #e6efe3 100%);
  padding: 26px;
  margin-bottom: 26px;
}

.zsquare-art svg,
.zcard-art svg,
.zaccord-art svg {
  display: block;
  width: 100%;
  height: auto;
}

.zsquare h3,
.zcard h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
}

.zsquare p,
.zcard p {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  max-width: 46ch;
}

.zcards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
}

.zcard-art {
  background: linear-gradient(160deg, #f2f5f9 0%, #eaf1e7 100%);
}

/* --------------------------------------------- numbered scroll accordion */

.zaccord {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.zaccord-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 28px;
}

/* Inside the accordion the heading sits in the left column above its own
   list, so it hugs that list rather than clearing a full section gap. */
.zaccord .sec-head {
  margin-bottom: 28px;
}

.zaccord-item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  transition: opacity 0.45s ease;
}

.zaccord-n {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-deeper);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}

.zaccord-item h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-deep);
}

.zaccord-item p {
  margin: 7px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.zaccord-stage {
  display: grid;
  gap: 20px;
}

.zaccord-art {
  margin: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, #eef3f8 0%, #e6efe3 100%);
  padding: 26px;
}

/* Scroll states apply only once the script has enhanced the container, so a
   reader with JavaScript disabled sees all three items and all three
   diagrams rather than one. */
[data-enhanced].zaccord .zaccord-item {
  opacity: 0.32;
}

[data-enhanced].zaccord .zaccord-item.is-active {
  opacity: 1;
}

[data-enhanced].zaccord .zaccord-r {
  position: sticky;
  top: 104px;
}

[data-enhanced].zaccord .zaccord-stage {
  display: block;
  position: relative;
  aspect-ratio: 420 / 300;
}

[data-enhanced].zaccord .zaccord-art {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  align-items: center;
}

[data-enhanced].zaccord .zaccord-art.is-active {
  opacity: 1;
}

@media (max-width: 900px) {
  .zaccord {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  [data-enhanced].zaccord .zaccord-item {
    opacity: 1;
  }

  [data-enhanced].zaccord .zaccord-r {
    position: static;
  }
}

/* ------------------------------------- sticky panel that builds as you scroll */

.zbuild {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 56px;
  align-items: start;
}

.zbuild-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 34px;
}

.zbuild-step {
  border-left: 2px solid var(--line);
  padding-left: 22px;
  transition: opacity 0.45s ease, border-color 0.45s ease;
}

.zbuild-k {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.zbuild-step h3 {
  margin: 6px 0 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-deep);
}

.zbuild-step p {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.zbuild-stack {
  display: grid;
  gap: 10px;
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.zbuild-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: baseline;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.zbuild-cardk {
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}

.zbuild-card p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  line-height: 1.45;
}

.zbc-rule { border-color: var(--green-line); }
.zbc-rule .zbuild-cardk { color: var(--green-deeper); }
.zbc-human { border-color: #f0dfba; background: #fdf6e7; }
.zbc-human .zbuild-cardk { color: var(--warning-text); }
.zbc-record { border-style: dashed; }
.zbc-trigger .zbuild-cardk,
.zbc-agent .zbuild-cardk,
.zbc-system .zbuild-cardk { color: var(--faint); }

[data-enhanced].zbuild .zbuild-step {
  opacity: 0.34;
}

[data-enhanced].zbuild .zbuild-step.is-active {
  opacity: 1;
  border-left-color: var(--green);
}

[data-enhanced].zbuild .zbuild-stage {
  position: sticky;
  top: 104px;
}

[data-enhanced].zbuild .zbuild-card {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

[data-enhanced].zbuild .zbuild-card.is-in {
  opacity: 1;
  transform: none;
}

@media (max-width: 900px) {
  .zbuild {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  [data-enhanced].zbuild .zbuild-step {
    opacity: 1;
  }

  [data-enhanced].zbuild .zbuild-stage {
    position: static;
  }

  [data-enhanced].zbuild .zbuild-card {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-enhanced].zbuild .zbuild-card {
    transition: none;
  }

  [data-enhanced].zaccord .zaccord-art,
  [data-enhanced].zaccord .zaccord-item,
  [data-enhanced].zbuild .zbuild-step {
    transition: none;
  }
}

/* ------------------------------------------------------------- next links */

.znext {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
}

.znext-k {
  margin: 0;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

.znext-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
}

.znext-list a {
  font-size: var(--fs-sm);
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid var(--green-line);
}

.znext-list a:hover {
  color: var(--green-deeper);
  border-bottom-color: var(--green);
}

/* Grid children need an explicit min-width or long headings force overflow. */
.zhero-l,
.zhero-r,
.zhm-left,
.zhm-right,
.zaccord-l {
  min-width: 0;
}

.zhero-r {
  padding-bottom: 6px;
}

/* Per-diagram tints. Zip alternates a blue and a green card here; the same
   two-tone treatment stops the pair reading as one block. */
.zart-intake {
  background: linear-gradient(160deg, #eaf1f8 0%, #dfeaf5 100%);
}

.zart-orchestrate {
  background: linear-gradient(160deg, #eef5ea 0%, #e2efdc 100%);
}

/* Numbered outcome cards. Deliberately typographic — see zipNumbered() for
   why these carry no illustration. */

 /* 280px let only three tracks fit at container width, so a four-item set
   wrapped 3 + 1 beside a column of white space. 258px fits four. */
.znum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 0 40px;
}

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

.znum-item {
  border-top: 2px solid var(--navy-deep);
  padding: 20px 0 26px;
}

.znum-n {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--green-deeper);
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}

.znum-item h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.znum-item p {
  margin: 10px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

/* A hero carrying an existing labelled mock-up rather than the schematic
   animation needs no gradient panel behind it — the mock-up has its own
   frame and shadow. */
.zhero-stage-plain {
  background: none;
  padding: 0;
  margin-top: 56px;
}

/* ==========================================================================
   Zip-section heading scale — corrected after viewing the built pages
   Checked against zip.com in a browser: their section H2 sits around 40px,
   roughly half their 76px H1. Ours were rendering at --fs-display (up to
   64px), which on a centred 780px block ran to four lines and made the green
   second beat shout. The hero H1 stays at --fs-mega; everything below it
   steps down to --fs-h2, and the accordion heading — which lives in a
   half-width column — steps down again.
   ========================================================================== */

.zsquares ~ *,
.sec-head.centred h2,
.zbuild ~ *,
.sec-head.centred h2.display {
  letter-spacing: var(--tracking-h);
}

.sec-head.centred h2,
.zaccord .sec-head h2,
.zbuild + * h2 {
  font-size: var(--fs-h2);
  line-height: 1.12;
}

/* The accordion heading shares its column with the numbered list, so it gets
   one more step down or it swamps the items it is meant to introduce. */
.zaccord .sec-head h2 {
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.125rem);
}

/* No character cap here. Capping this at 20ch pushed a two-beat heading onto
   seven lines inside an already narrow column — the heading should fill the
   column it sits in and nothing more. */
.zaccord .sec-head {
  max-width: none;
}

/* Seven build steps at 34% opacity read as a disabled section rather than a
   focused one. Zip fades three items; with seven the effect inverts. The
   active state now carries the green rule and full contrast, and the rest
   stay legible. */
[data-enhanced].zbuild .zbuild-step {
  opacity: 0.62;
}

/* ==========================================================================
   Mobile corrections — found by auditing the built pages at 390px
   ========================================================================== */

/* The three-level eyebrow trail is one long uppercase string with letter
   spacing. On a 375px viewport it pushed the page 15px wider than the screen
   on product pages and 39px on the platform pages. It has to be allowed to
   wrap. */
.eyebrow-trail {
  /* .eyebrow is inline-flex with a leading dash rule, so wrapping has to be
     enabled on the flex container rather than switched to inline-block —
     that would drop the dash out of the flow. */
  flex-wrap: wrap;
  row-gap: 4px;
  max-width: 100%;
}

/* Defensive only. An earlier audit appeared to show the header logo forcing
   107px of horizontal overflow on mobile; checked in the real browser it does
   not — the brand renders at 151x28 and the page does not overflow. The
   reading was an artefact of measuring an injected iframe, where the
   homepage's relative stylesheet paths never resolved. No sizing change is
   applied; this cap just stops any image escaping its column. */
.brand img {
  max-width: 100%;
}

/* ==========================================================================
   DIAGRAM KIT
   Replaces the hand-placed SVG schematics. Laid out with flex and grid so
   two cards cannot overlap — which is what went wrong when the coordinates
   were written by hand and never looked at.

   Each part animates in on a stagger when its diagram becomes active, which
   is what makes the accordion feel like Zip's rather than like a slideshow.
   All of it stops under prefers-reduced-motion.
   ========================================================================== */

.dg {
  display: flex;
  flex-direction: column;
  gap: 14px;
  container-type: inline-size;
}

.dg-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dg-row > .dg-note,
.dg-row > .dg-card {
  flex: 1 1 0;
  min-width: 0;
}

.dg-note {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: var(--fs-sm);
  color: var(--navy-deep);
  line-height: 1.45;
}

.dg-arrow {
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  background: var(--green);
  position: relative;
}

.dg-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border-left: 7px solid var(--green);
  border-block: 4px solid transparent;
}

.dg-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.dg-card.dg-ok {
  border-color: var(--green-line);
}

.dg-t {
  margin: 0 0 8px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-deep);
}

.dg-rows {
  margin: 0;
  display: grid;
}

.dg-rows > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 8px;
}

.dg-rows > div + div {
  border-top: 1px solid var(--line-soft);
}

.dg-rows dt {
  font-size: var(--fs-xs);
  color: var(--muted);
  min-width: 0;
}

.dg-rows dd {
  margin: 0;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--ink-2);
  text-align: right;
  white-space: nowrap;
}

.dg-rows dd.dg-ok,
.dg-ok > .dg-step-s {
  color: var(--green-deeper);
}
.dg-rows dd.dg-wait {
  color: var(--warning-text);
}
.dg-rows dd.dg-no {
  color: var(--faint);
}

/* route chips */

.dg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dg-chips span {
  flex: 1 1 auto;
  text-align: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 10px 12px;
  font-size: var(--fs-xs);
  color: var(--muted);
}

.dg-chips span.on {
  border-color: var(--green-line);
  background: var(--green-tint);
  color: var(--green-deeper);
  font-weight: 600;
}

/* the fork between an approved request and its routes */

.dg-fork {
  display: block;
  height: 22px;
  border-left: 2px solid var(--green);
  margin-inline: auto;
  width: 0;
}

/* approval chain */

.dg-steps {
  display: grid;
  gap: 8px;
}

.dg-step {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 16px;
}

.dg-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 auto;
}
.dg-dot-ok { background: var(--green); }
.dg-dot-wait { background: #d9a13a; }

.dg-step-n {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy-deep);
  min-width: 0;
  flex: 1 1 auto;
}

.dg-step-n i {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--faint);
  margin-top: 2px;
}

.dg-step-s {
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.dg-step-s.dg-wait { color: var(--warning-text); }

/* banner */

.dg-banner {
  border-radius: var(--radius);
  padding: 12px 16px;
  border: 1px solid;
}

.dg-banner strong {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
}

.dg-banner span {
  display: block;
  margin-top: 3px;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.5;
}

.dg-b-wait {
  background: var(--warning-bg);
  border-color: #f0dfba;
}
.dg-b-wait strong { color: var(--warning-text); }

.dg-b-plain {
  background: var(--bg-alt);
  border-color: var(--line);
}
.dg-b-plain strong { color: var(--navy-deep); }

.dg-cap {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--faint);
  text-align: center;
}

@container (max-width: 420px) {
  .dg-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dg-arrow {
    width: 2px;
    height: 18px;
    margin-inline: auto;
  }

  .dg-arrow::after {
    right: -3px;
    top: auto;
    bottom: -1px;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 7px solid var(--green);
    border-bottom: 0;
  }
}

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

/* Parts rise in on a stagger the moment their diagram becomes the active
   one, and again each time the reader scrolls back to it. This is the
   difference between a diagram that sits there and one that performs. */
.zaccord-art.is-active .dg > *,
.zsquare.in .dg > *,
.zcard.in .dg > * {
  animation: dgIn 0.52s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}

.zaccord-art.is-active .dg > *:nth-child(2) { animation-delay: 0.06s; }
.zaccord-art.is-active .dg > *:nth-child(3) { animation-delay: 0.13s; }
.zaccord-art.is-active .dg > *:nth-child(4) { animation-delay: 0.2s; }
.zsquare.in .dg > *:nth-child(2),
.zcard.in .dg > *:nth-child(2) { animation-delay: 0.08s; }
.zsquare.in .dg > *:nth-child(3),
.zcard.in .dg > *:nth-child(3) { animation-delay: 0.16s; }
.zsquare.in .dg > *:nth-child(4),
.zcard.in .dg > *:nth-child(4) { animation-delay: 0.24s; }

@keyframes dgIn {
  from { opacity: 0; transform: translateY(12px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* The selected route pulses once so the eye lands on the decision. */
.zsquare.in .dg-chips span.on,
.zaccord-art.is-active .dg-chips span.on {
  animation: dgPulse 1.9s ease-out 0.5s 2 both;
}

@keyframes dgPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(88, 185, 71, 0); }
  22% { box-shadow: 0 0 0 5px rgba(88, 185, 71, 0.16); }
  55% { box-shadow: 0 0 0 0 rgba(88, 185, 71, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .zaccord-art.is-active .dg > *,
  .zsquare.in .dg > *,
  .zcard.in .dg > *,
  .dg-chips span.on {
    animation: none !important;
  }
}

/* ==========================================================================
   Customer story cards
   Was a two-line link under the label "Running today", which said nothing
   and gave the reader no reason to click. Now a full card: sector, headline,
   scale, the three structural facts, and an explicit action. The whole card
   is the link and it lifts on hover so that reads as clickable.
   ========================================================================== */

.pbcard {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 30px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    border-color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.pbcard:hover {
  transform: translateY(-3px);
  border-color: var(--green-line);
  box-shadow: var(--shadow-md);
}

.pb-sector {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.pb-head {
  display: block;
  margin-top: 14px;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--navy-deep);
}

.pb-scope {
  display: block;
  margin-top: 12px;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.55;
}

.pb-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 20px;
}

.pb-stats i {
  font-style: normal;
  font-size: var(--fs-xxs);
  font-weight: 500;
  color: var(--ink-2);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 11px;
}

.pb-go {
  display: block;
  margin-top: auto;
  padding-top: 22px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--green-deeper);
}

.pbcard:hover .pb-go .ar {
  transform: translateX(5px);
}

.proofband-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

/* Diagrams differ in height, so without this the two card headings sit at
   different heights and the pair reads as misaligned. Stretching the art
   box puts every heading on the same line. */
.zsquare,
.zcard {
  display: flex;
  flex-direction: column;
}

.zsquare-art,
.zcard-art {
  flex: 1 0 auto;
  display: flex;
  align-items: center;
}

.zsquare-art > .dg,
.zcard-art > .dg,
.zaccord-art > .dg {
  width: 100%;
}

/* A halt is not a success. The checkpoint chip was rendering in the same
   green as a completed step, which read as "done" when it means "stopped
   and waiting for a person". */
.dg-chips span.stop {
  border-color: var(--navy-deep);
  border-width: 1.5px;
  background: #fff;
  color: var(--navy-deep);
  font-weight: 600;
}

/* Hero step states carried over from the workflow data. Rule and record
   stages had no dot colour, so they fell back to the default grey. */
.zhm-policy .zhm-dot { background: var(--green); }
.zhm-done .zhm-dot { background: var(--navy-soft); }

/* Two-line hero steps: state label above, stage title below. */
.zhm-t b {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 2px;
}

.zhm-human .zhm-t b { color: var(--warning-text); }

.zhm-steps {
  gap: 6px;
}

.zhm-step {
  align-items: flex-start;
  padding: 10px 14px;
  line-height: 1.35;
}

.zhm-step .zhm-dot {
  margin-top: 6px;
}

/* Zip's H1 is two words. Ours carries a searchable category phrase — "Spend
   Analysis Software for Multi-Entity Manufacturers" — which at --fs-mega ran
   to four lines and swallowed the hero. Slightly smaller, balanced, so the
   keyword stays and the hero still breathes. */
.zhero h1 {
  font-size: clamp(2.25rem, 1.35rem + 3.5vw, 3.75rem);
  text-wrap: balance;
  max-width: 15ch;
}

@media (max-width: 900px) {
  .zhero h1 {
    max-width: none;
  }
}

/* Generated stage diagrams.
   The numbered chip row wrapped 6 + 1 on a seven-stage workflow and read as
   broken, and truncating the stage text at a fixed character count cut words
   in half. A progress bar scales to any stage count, and the prose is clamped
   by CSS so it ends on a line rather than mid-word. */

.dg-head {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.dg-head-k {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.dg-head-t {
  margin: 6px 0 0;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.35;
}

.dg-prog {
  display: flex;
  gap: 5px;
}

.dg-prog i {
  flex: 1 1 0;
  height: 5px;
  border-radius: 999px;
  background: var(--line);
}

.dg-prog i.past { background: var(--green-line); }
.dg-prog i.on { background: var(--green); }
.dg-prog i.stop { background: #d9a13a; }

.dg-prose {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   HOMEPAGE — stacked product rows
   The largest section on zip.com's homepage (2,422px): each product area a
   full-width panel, copy left, product visual right, stacked. Ours carries
   a diagram drawn from that product's own workflow, so no two rows repeat.
   ========================================================================== */

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

.zrow {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: 40px;
  align-items: center;
  padding: 40px;
  border-radius: var(--radius-xl);
  background: linear-gradient(150deg, #eef3f8 0%, #e7eff6 100%);
}

.zrow.alt {
  background: linear-gradient(150deg, #eff5ec 0%, #e4efe0 100%);
}

.zrow-copy h3 {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
}

.zrow-copy p {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
  max-width: 44ch;
}

.zrow-copy .alink {
  margin-top: 20px;
  display: inline-block;
}

.zrow-art .dg {
  max-width: 560px;
}

@media (max-width: 900px) {
  .zrow {
    grid-template-columns: 1fr;
    gap: 26px;
    padding: 28px;
  }
}

/* Diagram parts rise on a stagger as each row enters, so the section has
   motion all the way down rather than only at the top. */
.zrow.in .dg > * {
  animation: dgIn 0.52s cubic-bezier(0.22, 0.75, 0.3, 1) both;
}

.zrow.in .dg > *:nth-child(2) { animation-delay: 0.07s; }
.zrow.in .dg > *:nth-child(3) { animation-delay: 0.14s; }
.zrow.in .dg > *:nth-child(4) { animation-delay: 0.21s; }

@media (prefers-reduced-motion: reduce) {
  .zrow.in .dg > * { animation: none !important; }
}

/* ==========================================================================
   HOMEPAGE — fit qualifier
   Two columns, and the right one genuinely disqualifies. A homepage that
   fits everyone converts nobody.
   ========================================================================== */

.fitgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
}

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

.fitcol.fit-yes {
  border-color: var(--green-line);
  background: var(--green-tint);
}

.fitcol-k {
  margin: 0 0 18px;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.fit-no .fitcol-k {
  color: var(--faint);
}

.crosses {
  list-style: none;
  margin: 0;
  padding: 0;
}

.crosses li {
  position: relative;
  padding-left: 30px;
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.6;
}

.crosses li + li {
  margin-top: 12px;
}

.crosses li::before,
.crosses li::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0.62em;
  width: 11px;
  height: 1.5px;
  background: var(--faint);
  border-radius: 2px;
}

.crosses li::before { transform: rotate(45deg); }
.crosses li::after { transform: rotate(-45deg); }

/* ==========================================================================
   LIVE MINI-SEQUENCE
   The animation beside each stacked homepage row. Runs that product's own
   stages on a loop: each row lights in turn, the human checkpoint holds
   amber, a rail tracks progress. Static art beside eight rows reads as
   wallpaper — this reads as the product working.
   ========================================================================== */

.mseq {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.mseq-rail {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  margin-bottom: 16px;
}

.mseq-rail i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--green-deeper), var(--green));
  animation: mseqRail var(--dur) linear infinite;
}

@keyframes mseqRail {
  0% { width: 0; }
  86% { width: 100%; }
  100% { width: 100%; }
}

.mseq-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

.mseq-row {
  display: grid;
  grid-template-columns: 10px 62px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  opacity: 0.32;
  animation: mseqRow var(--dur) ease-out infinite;
  animation-delay: calc(var(--i) * 0.9s);
}

@keyframes mseqRow {
  0% { opacity: 0.32; }
  6%, 92% { opacity: 1; }
  100% { opacity: 0.32; }
}

.mseq-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--faint);
}

.mseq-trigger .mseq-dot { background: var(--faint); }
.mseq-agent .mseq-dot { background: #4a7fb5; }
.mseq-system .mseq-dot { background: var(--navy-soft); }
.mseq-policy .mseq-dot { background: var(--green); }
.mseq-human .mseq-dot { background: #d9a13a; }
.mseq-done .mseq-dot { background: var(--navy-soft); }

.mseq-k {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.mseq-t {
  font-size: var(--fs-xs);
  color: var(--ink-2);
  line-height: 1.35;
  min-width: 0;
}

.mseq-s {
  font-size: 10px;
  font-weight: 600;
  color: var(--green-deeper);
  white-space: nowrap;
}

.mseq-human {
  background: #fdf6e7;
}

.mseq-human .mseq-k,
.mseq-human .mseq-s {
  color: var(--warning-text);
}

@media (max-width: 620px) {
  .mseq-row {
    grid-template-columns: 10px minmax(0, 1fr) auto;
  }
  .mseq-k { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mseq-row { animation: none; opacity: 1; }
  .mseq-rail i { animation: none; width: 100%; }
}

/* ==========================================================================
   CONNECTED SYSTEMS
   Zip's "One platform to orchestrate everything" — 41 logos in eight
   categories. Categories only, until an integration partner is cleared to
   name. The structure is already right for logos when they arrive.
   ========================================================================== */

.cxgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.cxcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 28px;
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.cxcard:hover {
  border-color: var(--green-line);
  transform: translateY(-2px);
}

.cxcard-i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: var(--green-tint);
  border: 1px solid var(--green-line);
  margin-bottom: 16px;
  position: relative;
}

 /* A connector, not a tick. These are categories of system we connect to,
   not achievements — a tick would claim something the card does not say. */
.cxcard-i::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 11px;
  width: 12px;
  height: 2px;
  background: var(--green-deeper);
  border-radius: 2px;
  box-shadow:
    -1px -4px 0 -1px var(--green-deeper),
    -1px 4px 0 -1px var(--green-deeper);
}

.cxcard h3 {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 600;
  color: var(--navy-deep);
}

.cxcard p {
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.cxnote {
  margin: 26px 0 0;
  font-size: var(--fs-xs);
  color: var(--faint);
  text-align: center;
}

/* ==========================================================================
   CERTIFICATIONS
   Mirrors Zip's "Audit-ready, out of the box". Typographic marks rather than
   the official badge artwork — swap in the real files when supplied.
   ========================================================================== */

.certrow {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.certcard {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
}

.cert-mark {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--green-tint);
  border: 2px solid var(--green-line);
  position: relative;
}

.cert-mark::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 12px;
  width: 12px;
  height: 20px;
  border: 2.5px solid var(--green-deeper);
  border-top: 0;
  border-left: 0;
  transform: rotate(42deg);
}

.cert-n {
  margin: 0;
  font-size: var(--fs-h4);
  font-weight: 700;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}

.cert-l {
  margin: 3px 0 0;
  font-size: var(--fs-xxs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.cert-b {
  margin: 12px 0 0;
  font-size: var(--fs-xs);
  color: var(--muted);
  line-height: 1.55;
}

/* ==========================================================================
   HERO PIPELINE
   A request travelling a track: raw text, classified, routed — then STOPPED
   at a gate until a person approves, then into the ERP. The positioning in
   one loop: autonomous movement, a gate a person controls, evidence after.
   ========================================================================== */

.zhero { padding-top: calc(var(--header-h) + 40px); }

.pipe {
  --dur: 11s;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 44px 40px 34px;
}

.pipe-track {
  position: relative;
  height: 86px;
}

.pipe-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 41px;
  height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.13);
  overflow: hidden;
}

.pipe-line i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #4a7fb5, var(--green));
  animation: pipeLine var(--dur) linear infinite;
}

@keyframes pipeLine {
  0% { width: 0; }
  30% { width: 52%; }
  46% { width: 52%; }
  78% { width: 100%; }
  100% { width: 100%; }
}

/* The travelling request. Three labels cross-fade inside it as it changes
   state, so the token is the same object throughout — that is the point. */
.pipe-token {
  position: absolute;
  top: 20px;
  left: 0;
  padding: 9px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy-deep);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
  animation: pipeMove var(--dur) cubic-bezier(0.5, 0, 0.3, 1) infinite;
}

@keyframes pipeMove {
  0% { left: 0; }
  28% { left: 40%; }
  50% { left: 40%; }
  76% { left: calc(100% - 210px); }
  92% { left: calc(100% - 210px); }
  100% { left: 0; }
}

.pipe-token span {
  position: absolute;
  left: 16px;
  top: 9px;
  opacity: 0;
}

/* One keyframe per label rather than a shared one with delays. With delays
   the third label finished before the token reached the ERP, leaving an
   empty white pill for the last quarter of the loop. */
.pipe-token-a { animation: pipeLabelA var(--dur) linear infinite; }
.pipe-token-b { animation: pipeLabelB var(--dur) linear infinite; }
.pipe-token-c { animation: pipeLabelC var(--dur) linear infinite; }

@keyframes pipeLabelA {
  0%, 22% { opacity: 1; }
  25%, 97% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes pipeLabelB {
  0%, 22% { opacity: 0; }
  26%, 46% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pipeLabelC {
  0%, 47% { opacity: 0; }
  51%, 94% { opacity: 1; }
  97%, 100% { opacity: 0; }
}

.pipe-token::after {
  content: 'Drives · Plant 2 · Band B';
  visibility: hidden;
}

/* The gate. Shut and amber while it waits, then green and open. */
.pipe-gate {
  position: absolute;
  left: 52%;
  top: 8px;
  width: 2px;
  height: 68px;
}

.pipe-gate-bar {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: #d9a13a;
  animation: pipeGate var(--dur) linear infinite;
}

@keyframes pipeGate {
  0%, 27% { opacity: 0.25; height: 68px; }
  30%, 48% { opacity: 1; height: 68px; }
  52%, 100% { opacity: 0.25; height: 12px; }
}

.pipe-gate-tag,
.pipe-gate-ok {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  opacity: 0;
}

.pipe-gate-tag {
  background: rgba(217, 161, 58, 0.18);
  color: #eec37a;
  animation: pipeTag var(--dur) linear infinite;
}

.pipe-gate-ok {
  background: rgba(88, 185, 71, 0.2);
  color: #9fe08f;
  animation: pipeOk var(--dur) linear infinite;
}

@keyframes pipeTag {
  0%, 28% { opacity: 0; }
  31%, 47% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes pipeOk {
  0%, 50% { opacity: 0; }
  53%, 90% { opacity: 1; }
  93%, 100% { opacity: 0; }
}

.pipe-stations {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.pipe-st {
  text-align: left;
  opacity: 0.4;
  animation: pipeSt var(--dur) linear infinite;
  animation-delay: calc(var(--i) * 1.9s);
}

@keyframes pipeSt {
  0%, 4% { opacity: 0.4; }
  8%, 30% { opacity: 1; }
  34%, 100% { opacity: 0.4; }
}

.pipe-st-dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  margin-bottom: 9px;
}

.pipe-st.is-gate .pipe-st-dot { background: #d9a13a; }

.pipe-st-t {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: #fff;
}

.pipe-st-s {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #8ea3b8;
}

@media (max-width: 820px) {
  .pipe { padding: 30px 22px 24px; }
  .pipe-stations { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .pipe-st:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  .pipe-line i { animation: none; width: 100%; }
  .pipe-token { animation: none; left: calc(100% - 210px); }
  .pipe-token span { animation: none; }
  .pipe-token-c { opacity: 1; }
  .pipe-gate-bar { animation: none; height: 12px; opacity: 0.25; }
  .pipe-gate-ok { animation: none; opacity: 1; }
  .pipe-gate-tag { animation: none; opacity: 0; }
  .pipe-st { animation: none; opacity: 1; }
}

/* ==========================================================================
   NAMED SYSTEM TILES
   Zip's "One platform to orchestrate everything" is 41 tiles in eight
   groups. Same structure, our systems, set as type rather than logo
   artwork we do not hold.
   ========================================================================== */

.sysgrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 30px 40px;
}

.sysgroup-t {
  margin: 0 0 14px;
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green-deeper);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.systiles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.systiles li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-xs);
  padding: 9px 13px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  transition: border-color var(--t) var(--ease), transform var(--t) var(--ease);
}

.systiles li:hover {
  border-color: var(--green-line);
  transform: translateY(-2px);
}

[data-reveal].in .systiles li {
  animation: dgIn 0.4s cubic-bezier(0.22, 0.75, 0.3, 1) both;
  animation-delay: calc(var(--i) * 0.035s);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].in .systiles li { animation: none; }
}

/* ==========================================================================
   PRODUCT SCENES
   One bespoke animation per product row. Eight identical sequences taught a
   reader nothing about eight different things; each of these shows the
   mechanism that product actually performs. Conceptual, never a screenshot.
   ========================================================================== */

.sc {
  --d: 7s;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 268px;
  justify-content: center;
}

.sc-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 9px 12px;
  border-radius: var(--radius-xs);
  background: var(--bg-alt);
  font-size: var(--fs-xs);
  color: var(--muted);
}

.sc-row b { color: var(--navy-deep); font-weight: 600; }

.sc-note {
  background: var(--bg-alt);
  border-left: 2px solid var(--green);
  border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
  padding: 12px 14px;
  font-size: var(--fs-xs);
  color: var(--navy-deep);
  line-height: 1.5;
}

.sc-cap {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
}

.sc-k {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--faint);
}

.sc-k2 { color: var(--green-deeper); margin-top: 6px; }

/* --- intake: fields populate one by one, then a route lights ----------- */

.sc-fields { display: grid; gap: 6px; }
.sc-fields .sc-row { opacity: 0; animation: scPop var(--d) ease-out infinite; }
.sc-fields .f1 { animation-delay: 0.5s; }
.sc-fields .f2 { animation-delay: 1.0s; }
.sc-fields .f3 { animation-delay: 1.5s; }
.sc-fields .f4 { animation-delay: 2.0s; }

@keyframes scPop {
  0%, 5% { opacity: 0; transform: translateY(6px); }
  10%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(6px); }
}

.sc-routes { display: flex; gap: 6px; }
.sc-routes span {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.sc-routes span:nth-child(2) {
  animation: scRoute var(--d) ease-out infinite;
  animation-delay: 2.6s;
}

@keyframes scRoute {
  0%, 4% { background: #fff; border-color: var(--line); color: var(--muted); }
  8%, 88% { background: var(--green-tint); border-color: var(--green-line); color: var(--green-deeper); font-weight: 600; }
  95%, 100% { background: #fff; border-color: var(--line); color: var(--muted); }
}

/* --- sourcing: responses land, then bars normalise --------------------- */

.sc-sup { display: grid; gap: 5px; }
.sc-sup-r {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 11px; border-radius: var(--radius-xs);
  background: var(--bg-alt); font-size: 11px; color: var(--muted);
}
.sc-sup-r b { color: var(--green-deeper); font-size: 10px; opacity: 0; animation: scFade var(--d) ease-out infinite; }
.sc-sup-r.s1 b { animation-delay: 0.4s; }
.sc-sup-r.s2 b { animation-delay: 1.1s; }
.sc-sup-r.s3 b { animation-delay: 1.8s; }
.sc-sup-r.s4 b { animation-delay: 2.5s; }

@keyframes scFade {
  0%, 5% { opacity: 0; }
  10%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}

.sc-bars { display: flex; align-items: flex-end; gap: 8px; height: 54px; }
.sc-bars i {
  flex: 1; border-radius: 3px 3px 0 0; background: var(--navy-soft);
  height: 4px; animation: scBar var(--d) cubic-bezier(0.3,0.8,0.3,1) infinite;
}
.sc-bars .b1 { animation-delay: 3.0s; }
.sc-bars .b2 { animation-delay: 3.15s; background: var(--green-deeper); }
.sc-bars .b3 { animation-delay: 3.3s; }
.sc-bars .b4 { animation-delay: 3.45s; }

@keyframes scBar {
  0%, 6% { height: 4px; }
  14%, 88% { height: var(--h); }
  95%, 100% { height: 4px; }
}

/* --- contracts: clauses assemble, one flags --------------------------- */

.sc-doc { display: grid; gap: 5px; }
.sc-clause {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 12px; border-radius: var(--radius-xs);
  background: var(--bg-alt); font-size: 11px; color: var(--ink-2);
  opacity: 0; animation: scPop var(--d) ease-out infinite;
}
.sc-clause b { font-size: 10px; font-weight: 600; color: var(--green-deeper); }
.sc-clause.c3 { background: #fdf6e7; }
.sc-clause.c3 b { color: var(--warning-text); }
.sc-clause.c1 { animation-delay: 0.4s; }
.sc-clause.c2 { animation-delay: 0.8s; }
.sc-clause.c3 { animation-delay: 1.2s; }
.sc-clause.c4 { animation-delay: 1.6s; }
.sc-clause.c5 { animation-delay: 2.0s; }

/* --- p2p: three-way match, then ERP write ---------------------------- */

.sc-match { display: grid; gap: 6px; }
.sc-m {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 13px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--ink-2);
}
.sc-m b { color: var(--green-deeper); opacity: 0; animation: scFade var(--d) ease-out infinite; }
.sc-m.m1 b { animation-delay: 0.6s; }
.sc-m.m2 b { animation-delay: 1.4s; }
.sc-m.m3 b { animation-delay: 2.2s; }

.sc-erp {
  text-align: center; padding: 12px; border-radius: var(--radius-xs);
  background: var(--green-tint); border: 1px solid var(--green-line);
  color: var(--green-deeper); font-size: var(--fs-xs); font-weight: 600;
  opacity: 0; animation: scPop var(--d) ease-out infinite; animation-delay: 3.1s;
}

/* --- supplier: sequential becomes concurrent ------------------------- */

.sc-seq, .sc-par { display: flex; gap: 6px; }
.sc-seq i, .sc-par i {
  flex: 1; text-align: center; padding: 9px 4px; border-radius: var(--radius-xs);
  font-style: normal; font-size: 11px; background: var(--bg-alt); color: var(--muted);
  opacity: 0.35; animation: scStep var(--d) ease-out infinite;
}
.sc-seq .q1 { animation-delay: 0.4s; }
.sc-seq .q2 { animation-delay: 1.3s; }
.sc-seq .q3 { animation-delay: 2.2s; }
.sc-par i {
  background: var(--green-tint); color: var(--green-deeper); font-weight: 600;
  animation-delay: 3.2s;
}

@keyframes scStep {
  0%, 4% { opacity: 0.35; }
  9%, 88% { opacity: 1; }
  95%, 100% { opacity: 0.35; }
}

/* --- quality: 8D advances, standing changes -------------------------- */

.sc-8d { display: flex; gap: 4px; }
.sc-8d i {
  flex: 1; text-align: center; padding: 10px 0; border-radius: var(--radius-xs);
  font-style: normal; font-size: 10px; font-weight: 600;
  background: var(--bg-alt); color: var(--faint);
  animation: scD var(--d) ease-out infinite;
}
.sc-8d .d1 { animation-delay: 0.2s; } .sc-8d .d2 { animation-delay: 0.55s; }
.sc-8d .d3 { animation-delay: 0.9s; } .sc-8d .d4 { animation-delay: 1.25s; }
.sc-8d .d5 { animation-delay: 1.6s; } .sc-8d .d6 { animation-delay: 1.95s; }
.sc-8d .d7 { animation-delay: 2.3s; } .sc-8d .d8 { animation-delay: 2.65s; }

@keyframes scD {
  0%, 4% { background: var(--bg-alt); color: var(--faint); }
  9%, 88% { background: var(--green-tint); color: var(--green-deeper); }
  95%, 100% { background: var(--bg-alt); color: var(--faint); }
}

.sc-standing {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); font-size: var(--fs-xs); color: var(--muted);
  position: relative;
}
.sc-standing b { font-size: 11px; font-weight: 600; position: absolute; right: 14px; }
.sc-st-a { color: var(--warning-text); animation: scSwapA var(--d) linear infinite; }
.sc-st-b { color: var(--green-deeper); opacity: 0; animation: scSwapB var(--d) linear infinite; }

@keyframes scSwapA { 0%, 40% { opacity: 1; } 46%, 100% { opacity: 0; } }
@keyframes scSwapB { 0%, 44% { opacity: 0; } 50%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }

/* --- spend: fragments consolidate ------------------------------------ */

.sc-frag { display: flex; align-items: flex-end; gap: 4px; height: 66px; }
.sc-frag i {
  flex: 1; border-radius: 3px 3px 0 0; background: var(--navy-soft); opacity: 0.5;
  animation: scFrag var(--d) cubic-bezier(0.3,0.8,0.3,1) infinite;
}
.sc-frag .g1 { --h: 30%; } .sc-frag .g2 { --h: 55%; } .sc-frag .g3 { --h: 22%; }
.sc-frag .g4 { --h: 68%; } .sc-frag .g5 { --h: 40%; } .sc-frag .g6 { --h: 80%; }
.sc-frag .g7 { --h: 34%; } .sc-frag .g8 { --h: 60%; } .sc-frag .g9 { --h: 46%; }
.sc-frag i:nth-child(n) { animation-delay: calc(0.2s * var(--n, 1)); }

@keyframes scFrag {
  0%, 8% { height: var(--h); opacity: 0.5; background: var(--navy-soft); }
  46%, 88% { height: 66%; opacity: 1; background: var(--green-deeper); }
  96%, 100% { height: var(--h); opacity: 0.5; background: var(--navy-soft); }
}

.sc-total {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 14px; border-radius: var(--radius-xs);
  background: var(--green-tint); border: 1px solid var(--green-line);
  font-size: var(--fs-xs); color: var(--muted);
  opacity: 0; animation: scPop var(--d) ease-out infinite; animation-delay: 3.4s;
}
.sc-total b { color: var(--green-deeper); font-weight: 600; }

/* --- multi-entity: group rule cascades ------------------------------- */

.sc-group {
  text-align: center; padding: 11px; border-radius: var(--radius-xs);
  background: var(--navy-deep); color: #fff; font-size: var(--fs-xs); font-weight: 600;
}

.sc-fan { display: flex; justify-content: space-around; height: 20px; }
.sc-fan i {
  width: 2px; background: var(--green-line); height: 0;
  animation: scFan var(--d) ease-out infinite;
}
.sc-fan i:nth-child(1) { animation-delay: 0.6s; }
.sc-fan i:nth-child(2) { animation-delay: 0.8s; }
.sc-fan i:nth-child(3) { animation-delay: 1.0s; }

@keyframes scFan {
  0%, 5% { height: 0; }
  12%, 88% { height: 20px; }
  95%, 100% { height: 0; }
}

.sc-ents { display: flex; gap: 6px; }
.sc-ent {
  flex: 1; text-align: center; padding: 11px 4px; border-radius: var(--radius-xs);
  border: 1px solid var(--line); font-size: 11px; color: var(--muted);
  opacity: 0; animation: scPop var(--d) ease-out infinite;
}
.sc-ent b { display: block; margin-top: 4px; color: var(--green-deeper); font-size: 10px; }
.sc-ent.e1 { animation-delay: 1.3s; }
.sc-ent.e2 { animation-delay: 1.6s; }
.sc-ent.e3 { animation-delay: 1.9s; }

@media (prefers-reduced-motion: reduce) {
  .sc *, .sc { animation: none !important; opacity: 1 !important; }
  .sc-bars i, .sc-frag i { height: var(--h, 60%) !important; }
  .sc-fan i { height: 20px !important; }
  .sc-st-a { opacity: 0 !important; }
}

/* Grid children need an explicit min-width or a long system name forces the
   whole column wider than its track. */
.sysgroup { min-width: 0; }

/* Per-scene tint. Each product row already has its own animation; a faint
   wash keyed to the scene keeps eight stacked panels from reading as one
   repeated component. */
.sc-intake, .sc-classify { background: linear-gradient(170deg, #ffffff 62%, #f2f7fc 100%); }
.sc-sourcing { background: linear-gradient(170deg, #ffffff 62%, #f3f8f1 100%); }
.sc-contract { background: linear-gradient(170deg, #ffffff 62%, #faf7f2 100%); }
.sc-p2p { background: linear-gradient(170deg, #ffffff 62%, #f1f6fb 100%); }
.sc-supplier { background: linear-gradient(170deg, #ffffff 62%, #f4f8f2 100%); }
.sc-quality { background: linear-gradient(170deg, #ffffff 62%, #fbf6f4 100%); }
.sc-spend { background: linear-gradient(170deg, #ffffff 62%, #f2f6fb 100%); }
.sc-entity { background: linear-gradient(170deg, #ffffff 62%, #f5f4f9 100%); }

/* ==========================================================================
   CONNECTED SYSTEMS CONSTELLATION
   Rebuilt from the zip.com screenshot: brand orb left, eight category rows
   radiating out in a staircase, each row a "+" marker, a label, then system
   cells that scroll and fade at the right edge.

   The one difference is not a design choice — Zip shows vendor logo
   artwork, we do not hold those files and will not redraw trademarks, so
   each cell is the system name set in type. Drop real SVGs into .plat-tile
   and nothing else has to change.
   ========================================================================== */

.plat-sec { overflow: hidden; }

.plat {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.44fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
}

/* --- the orb --------------------------------------------------------- */

.plat-orb {
  position: relative;
  aspect-ratio: 1;
  max-width: 340px;
  justify-self: center;
  border-radius: 50%;
  /* FADED, not saturated. The first version ran a strong blue into a deep
     green, which did two unhelpful things: it fought the mark sitting on top
     of it for attention, and it looked like the saturated gradient sphere that
     every AI vendor put on their homepage this year. Zip's equivalent is pale
     and diffuse — it reads as atmosphere behind the content rather than as a
     graphic competing with it.
     Pulling the saturation down also solves the contrast problem for free: a
     navy mark on a pale sphere is legible, on a mid-blue one it was muddy. */
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.98), transparent 55%),
    radial-gradient(circle at 72% 76%, rgba(124, 196, 108, 0.34), transparent 64%),
    radial-gradient(circle at 18% 78%, rgba(150, 190, 226, 0.32), transparent 62%),
    linear-gradient(150deg, #e4f0fa 0%, #d9e8f4 46%, #dcedd6 100%);
  display: grid;
  place-items: center;
  animation: platOrb 14s ease-in-out infinite;
}

/* Wider and fainter than before, so the sphere fades out rather than ending
   on a hard circular edge. This is most of what makes it read as "faded". */
.plat-orb::after {
  content: '';
  position: absolute;
  inset: -22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(120, 170, 214, 0.16), transparent 66%);
  z-index: -1;
}

/* The orb used to carry the word "Proconomy" typed in the body font.
   The problem was not the size of it — it was that the page then showed the
   brand name TWICE in two different renderings: the real wordmark in the
   header, and a typographic imitation of it forty pixels below. A logo drawn
   in Instrument Sans reads as a placeholder for a logo, which is why it never
   sat right against the rest of the design.

   The mark solves it: it is the actual brand asset, it is square so it fits a
   circle without crowding, and it says the same thing without competing with
   the wordmark. */
.plat-orb img {
  width: 46%;
  height: auto;
  /* A soft lift, not a drop shadow. The orb is pale now, so a heavy shadow
     would be the darkest thing in the section and pull focus. */
  filter: drop-shadow(0 8px 22px rgba(10, 26, 44, 0.14));
}

@keyframes platOrb {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-10px) scale(1.02); }
}

/* --- the rows -------------------------------------------------------- */

.plat-rows {
  display: grid;
  gap: 10px;
  min-width: 0;
}

/* The staircase. Rows step in toward the middle of the stack and back out,
   so the block reads as radiating from the orb rather than as a table. */
.plat-row {
  display: grid;
  grid-template-columns: 20px minmax(140px, 200px) minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 0 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  margin-left: calc(var(--indent, 0) * 1px);
}

.plat-row:nth-child(1) { --indent: 0; }
.plat-row:nth-child(2) { --indent: 26; }
.plat-row:nth-child(3) { --indent: 46; }
.plat-row:nth-child(4) { --indent: 58; }
.plat-row:nth-child(5) { --indent: 58; }
.plat-row:nth-child(6) { --indent: 46; }
.plat-row:nth-child(7) { --indent: 26; }
.plat-row:nth-child(8) { --indent: 0; }

.plat-mark {
  font-size: 15px;
  font-weight: 400;
  color: var(--green-deeper);
  text-align: center;
  line-height: 1;
}

.plat-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.25;
}

/* --- the scrolling cells --------------------------------------------- */

.plat-track {
  overflow: hidden;
  min-width: 0;
 /* Faded at BOTH ends. Zip's logos are static so they only fade on the
     right; ours scroll, so a name leaving on the left was being sliced
     mid-word — "…IA", "…osoft Entra ID". */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 60%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 60%, transparent 100%);
}

.plat-run {
  display: flex;
  width: max-content;
  animation: platRun var(--speed, 30s) linear infinite;
}

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

.plat-tile {
  flex: 0 0 auto;
  padding: 12px 26px;
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
  border-left: 1px solid var(--line);
  line-height: 1.2;
}

.plat-row:hover .plat-run { animation-play-state: paused; }

@media (max-width: 980px) {
  .plat { grid-template-columns: 1fr; gap: 30px; }
  .plat-orb { max-width: 210px; }
  .plat-row { margin-left: 0; grid-template-columns: 16px minmax(120px, 160px) minmax(0, 1fr); }
}

@media (max-width: 620px) {
  .plat-row { grid-template-columns: 16px minmax(0, 1fr); row-gap: 4px; }
  .plat-track { grid-column: 1 / -1; }
}

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

/* ==========================================================================
   COMPACT INTEGRATIONS BAND
   Zip's "Work with your existing tools": eight tiles on a dashed graph-paper
   grid with a green CTA. Measured across 22 of their pages — homepage carries
   the big constellation, product pages carry this, nothing else carries
   either. We follow the same placement.
   ========================================================================== */

.intg-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 56px 40px;
  padding: 56px 8px;
  justify-items: center;
}

/* The graph paper. Drawn as a background rather than as elements so it never
   interferes with the tile grid. */
.intg-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 25%),
    repeating-linear-gradient(180deg, var(--line) 0 1px, transparent 1px 50%);
  background-position: 12.5% 0, 0 25%;
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 55%, transparent 100%);
  pointer-events: none;
}

.intg-tile {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 148px;
  aspect-ratio: 1;
  padding: 14px;
  border-radius: var(--radius-lg);
  background: #fff;
  box-shadow: 0 10px 30px -18px rgba(10, 26, 44, 0.35);
  text-align: center;
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease);
}

.intg-tile span {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.3;
}

.intg-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -20px rgba(10, 26, 44, 0.45);
}

/* The small plus marks that sit between the two rows, as in Zip's version. */
.intg-tile:nth-child(-n + 4)::after {
  content: '+';
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 15px;
  color: var(--green-deeper);
  line-height: 1;
}

[data-reveal].in .intg-tile {
  animation: dgIn 0.45s cubic-bezier(0.22, 0.75, 0.3, 1) both;
  animation-delay: calc(var(--i) * 0.06s);
}

.intg-cta {
  text-align: center;
  margin-top: 8px;
}

@media (max-width: 780px) {
  .intg-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 24px; }
  .intg-grid::before { display: none; }
  .intg-tile:nth-child(-n + 4)::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal].in .intg-tile { animation: none; }
}

/* The band sits between two white sections, so it needs its own breathing
   room rather than inheriting the standard section rhythm. */
.intg {
  padding-block: 84px;
}

/* ------------------------------------------------- hero column alignment */
/* Bottom alignment is right when the left column carries a breadcrumb trail:
   the H1 baseline then settles against the CTA row. With no trail the H1 has
   nothing above it, so bottom alignment pushes it far below the standfirst.
   Flush-top on those heroes only. */
.zhero-top-flush {
  align-items: start;
}

.zhero-top-flush .zhero-l h1 {
  margin-top: 0;
}

/* --------------------------------------------- whole workflow row is a link */
/* The row was an <article> with a green link at the foot of the copy. A reader
   who has already decided from the heading should not have to travel down to a
   small line of text to act. The row is now the anchor, and the affordance it
   replaced now responds to hover on the whole row rather than on itself. */
a.zrow {
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

a.zrow:hover,
a.zrow:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(22, 33, 46, 0.13);
}

a.zrow:hover .alink {
  color: var(--green-deeper);
  border-bottom-color: var(--green);
}

a.zrow:hover .alink .ar {
  transform: translateX(4px);
}

a.zrow:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  a.zrow {
    transition: none;
  }

  a.zrow:hover,
  a.zrow:focus-visible {
    transform: none;
  }
}

/* ==========================================================================
   HOMEPAGE HERO — THE POLICY BOUNDARY
   --------------------------------------------------------------------------
   Requests drift left to right into the ERP. Most never stop. A few meet the
   authority line and hold, one resolves against a named person, and partway
   through the loop the line itself moves so more of them stop.

   The per-request keyframes are generated in lib/scenes.mjs and emitted with
   the markup; everything static lives here. Motion is deliberately slow — at
   speed, eleven moving pills read as a screensaver rather than as work.
   ========================================================================== */

.gate {
  position: relative;
}

.gate-stage {
  position: relative;
  height: 336px;
  border-radius: var(--radius-lg);
  /* Its own surface. Sitting on the hero's blue-to-green panel, the green
     ERP zone on the right had nothing to contrast against and disappeared. */
  background: linear-gradient(104deg, #16212e 0%, #1b2c3d 52%, #1c3a2b 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Destination. Gives the flow somewhere to be going, which is the difference
   between "things are moving" and "work is being completed". */
.gate-erp {
  position: absolute;
  inset: 0 0 0 auto;
  width: 118px;
  display: grid;
  place-items: center;
  background: linear-gradient(90deg, rgba(47, 110, 37, 0) 0%, rgba(47, 110, 37, 0.28) 70%);
  border-left: 1px solid rgba(142, 215, 127, 0.28);
}

.gate-erp span {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #bfe3b4;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

/* ------------------------------------------------------------- the line */

.gate-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 62%;
  width: 0;
  border-left: 2px dashed rgba(224, 165, 58, 0.75);
  animation: gateSlide var(--T) linear infinite;
  z-index: 1;
}

/* The policy label sits at the head of the line and the approval chip at the
   foot, so the two never compete for the same row — and the bottom lane stays
   clear for requests rather than being covered by a caption. */
.gate-lim {
  position: absolute;
  top: 12px;
  left: 0;
  transform: translateX(-50%);
  white-space: nowrap;
  text-align: center;
  display: grid;
}

.gate-lim i em {
  font-style: normal;
}

.gate-lim i {
  grid-area: 1 / 1;
  font-style: normal;
  font-size: 0.78rem;
  font-weight: 500;
  color: #dfe7ef;
  background: rgba(224, 165, 58, 0.16);
  border: 1px solid rgba(224, 165, 58, 0.32);
  border-radius: 999px;
  padding: 4px 11px;
}

.gate-lim .gl-a {
  animation: gateLimA var(--T) linear infinite;
}

.gate-lim .gl-b {
  opacity: 0;
  animation: gateLimB var(--T) linear infinite;
}

/* ---------------------------------------------------------- the requests */

.gate-lanes {
  position: absolute;
  inset: 54px 0 46px 0;
  display: grid;
  grid-template-rows: repeat(var(--lanes, 4), 1fr);
  z-index: 2;
}

.gate-lane {
  position: relative;
}

.gtk {
  position: absolute;
  top: 50%;
  left: -10%;
  transform: translateY(-50%);
  display: grid;
  gap: 1px;
  padding: 7px 12px;
  min-width: 92px;
  border-radius: 10px;
  background: rgba(19, 30, 42, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* The left edge is the state indicator: neutral before the line, green once
     the request has cleared it, amber while it waits. */
  border-left-width: 3px;
  animation:
    var(--m) var(--T) linear infinite,
    var(--s, none) var(--T) linear infinite;
}

.gtk b {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.1;
}

.gtk i {
  font-style: normal;
  font-size: 0.68rem;
  color: #93a5b8;
  line-height: 1.1;
}

/* ------------------------------------------------------------- the key */

.gate-key {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  align-items: center;
  font-size: 0.8rem;
  color: #9fb0c2;
}

.gk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.gk-run::before,
.gk-hold::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.gk-run::before {
  background: #6fc45a;
}

.gk-hold::before {
  background: #e0a53a;
}

.gk-note {
  margin-left: auto;
  color: #d6e0ea;
  font-weight: 500;
}

/* Narrow screens keep all four lanes — dropping one would drop requests and
   with them the point, which is volume. The pills lose their category line and
   the policy label loses its prefix instead. */
@media (max-width: 640px) {
  .gtk i {
    display: none;
  }

  .gate-lim i em {
    display: none;
  }
}

@media (max-width: 760px) {
  .gate-stage {
    height: 272px;
  }

  .gate-lanes {
    inset: 50px 0 42px 0;
  }

  .gtk {
    min-width: 68px;
    padding: 5px 9px;
    border-radius: 8px;
  }

  .gate-erp {
    width: 58px;
  }

  .gate-lim i {
    font-size: 0.72rem;
    padding: 4px 9px;
  }

  .gtk b {
    font-size: 0.76rem;
  }

  .gk-note {
    margin-left: 0;
  }
}

/* Reduced motion: the same statement as a still. Requests spread along the
   lane, the held ones stopped at the line in amber, the threshold legible. */
@media (prefers-reduced-motion: reduce) {
  .gate-line,
  .gate-lim i,
  .gtk {
    animation: none !important;
  }

  .gtk {
    left: var(--rest);
    opacity: 1;
  }

  .gtk {
    border-left-color: #6fc45a;
  }

  .gtk.is-held {
    border-left-color: #e0a53a;
    box-shadow: 0 0 0 3px rgba(224, 165, 58, 0.18);
  }

  .gate-lim .gl-b {
    display: none;
  }
}

/* ==========================================================================
   HOMEPAGE HERO — THE PORTFOLIO NOBODY HAS HOURS FOR
   --------------------------------------------------------------------------
   Blocks sized by spend, sorted descending, so the picture is the shape of a
   real portfolio: a handful of large categories a team can actually work, and
   a long tail nobody has ever had a free week for. The light then moves down
   through the tail. Per-wave keyframes are generated in lib/scenes.mjs.
   ========================================================================== */

.cov-stage {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 14px;
  height: 340px;
  padding: 18px;
  border-radius: var(--radius-lg);
  background: linear-gradient(122deg, #16212e 0%, #1a2a3a 60%, #172d24 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cov-cap {
  margin: 0;
  display: grid;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.2;
}

.cov-cap span {
  grid-area: 1 / 1;
}

.cov-cap .cc-a {
  color: #cdd8e4;
  animation: covCapA var(--T) linear infinite;
}

.cov-cap .cc-b {
  opacity: 0;
  color: #a9dc98;
  animation: covCapB var(--T) linear infinite;
}

.cov-field {
  display: grid;
  gap: 6px;
  min-height: 0;
}

.cov-row {
  display: flex;
  gap: 6px;
  min-height: 0;
}

.cov-c {
  position: relative;
  flex: var(--f) 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding: 0 8px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  animation: var(--w, none) var(--T) linear infinite;
}

/* The top of the portfolio is lit from the first frame and stays lit. It is
   the part a team already covers, so it never needs to change. */
.cov-c.is-team {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.34);
}

.cov-c b {
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cov-c.is-flag i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: #f0c274;
  opacity: 0;
  animation: covDot var(--T) linear infinite;
}

.gk-team::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.75);
}

@media (max-width: 760px) {
  .cov-stage {
    height: 272px;
    padding: 14px;
    gap: 10px;
  }

  .cov-cap {
    font-size: 0.85rem;
  }

  .cov-field,
  .cov-row {
    gap: 4px;
  }

  .cov-c {
    padding: 0 5px;
  }

  .cov-c b {
    font-size: 0.66rem;
  }
}

/* Reduced motion settles on the payoff frame: tail worked, flags raised. */
@media (prefers-reduced-motion: reduce) {
  .cov-c,
  .cov-c.is-flag i,
  .cov-cap span {
    animation: none !important;
  }

  .cov-c:not(.is-team) {
    background: rgba(111, 196, 90, 0.24);
    border-color: rgba(111, 196, 90, 0.5);
  }

  .cov-c.is-flag {
    background: rgba(224, 165, 58, 0.26);
    border-color: rgba(224, 165, 58, 0.7);
  }

  .cov-c.is-flag i {
    opacity: 1;
  }

  .cov-cap .cc-a {
    display: none;
  }

  .cov-cap .cc-b {
    opacity: 1;
  }
}

/* The key is shared by both scenes, and they now sit on opposite backgrounds:
   the coverage field is in the dark hero, the gate scene is in the governance
   section on a light one. The dark colours stay the default; only the gate
   scene's new home overrides them. */
.zcontrol-stage .gate-key {
  color: var(--muted);
}

.zcontrol-stage .gk-note {
  color: var(--navy-deep);
}

.zcontrol-stage {
  margin-bottom: 36px;
}

/* The coverage scene is the hero's whole visual, so it needs no wrapper of its
   own — but the class has to exist for the CSS variables it carries. */
.cov {
  position: relative;
}

/* ==========================================================================
   HOMEPAGE HERO — THE APP WINDOW
   --------------------------------------------------------------------------
   Built to the shape of zip.com's hero, which is a 34-second screen recording
   of their product: a typed request, then a board of reviews going green one
   at a time. We have no cleared product capture, so this is the same sequence
   rebuilt in DOM and CSS — conceptual, labelled on the frame, and carrying our
   difference rather than theirs: one card stops and waits for a named person.

   Per-card keyframes are generated in lib/scenes-app.mjs.
   ========================================================================== */

.app {
  position: relative;
}

.app-win {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  height: 384px;
  border-radius: 14px;
  overflow: hidden;
  background: #f4f7fa;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 30px 70px rgba(6, 14, 24, 0.42);
}

/* ------------------------------------------------------------ app chrome */

.app-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  background: #16212e;
}

.app-rail i {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.16);
}

.app-rail i.on {
  background: #8ed77f;
}

.app-main {
  display: grid;
  grid-template-rows: 40px minmax(0, 1fr);
  min-width: 0;
  background: #fff;
}

.app-top {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid #e7edf3;
  background: #fbfcfe;
}

.app-search {
  flex: 1;
  font-size: 0.72rem;
  color: #93a5b8;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 5px 10px;
}

/* The frame says what it is. We have no product capture cleared for use, so
   the window must never be mistakable for one. */
.app-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #93a5b8;
  border: 1px solid #dde5ee;
  border-radius: 999px;
  padding: 3px 8px;
}

.app-new {
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
  background: var(--navy-deep);
  border-radius: 999px;
  padding: 5px 11px;
}

.app-body {
  position: relative;
  min-height: 0;
}

.ap-prompt,
.ap-record {
  position: absolute;
  inset: 0;
  padding: 16px;
}

/* --------------------------------------------------------- scene 1: ask */

.ap-prompt {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 16px;
  animation: apPrompt var(--T) linear infinite;
}

.ap-ask {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.ap-input {
  width: min(520px, 92%);
  border: 1px solid #d8e2ec;
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(16, 32, 52, 0.07);
}

/* Typed by revealing width, so the text is fully present in the DOM and
   readable with motion reduced or CSS off. */
.ap-typed {
  display: flex;
  align-items: center;
  min-height: 40px;
  font-size: 0.85rem;
  color: var(--navy-deep);
}

.ap-typed em {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  font-style: normal;
  width: 0;
  animation: apType var(--T) steps(64, end) infinite;
}

.ap-caret {
  width: 1px;
  height: 14px;
  margin-left: 2px;
  background: var(--navy-deep);
  animation: apCaret var(--T) steps(1, end) infinite;
}

.ap-chips {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
}

.ap-chips span {
  font-size: 0.66rem;
  color: #6b7f93;
  border: 1px solid #e4ebf2;
  border-radius: 6px;
  padding: 4px 8px;
}

.ap-send {
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--navy-deep);
  animation: apSend var(--T) ease infinite;
}

/* ------------------------------------------------------ scene 2: record */

.ap-record {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 10px;
  opacity: 0;
  animation: apRecord var(--T) linear infinite;
}

.ap-head {
  min-width: 0;
}

.ap-id {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy-deep);
}

.ap-sub {
  display: block;
  font-size: 0.7rem;
  color: #8093a6;
  margin-top: 2px;
}

.ap-tabs {
  display: flex;
  gap: 4px;
}

.ap-tabs span {
  font-size: 0.68rem;
  color: #7b8ea1;
  border-radius: 6px;
  padding: 4px 9px;
}

.ap-tabs .on {
  color: var(--navy-deep);
  font-weight: 600;
  background: #eef3f8;
}

.ap-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 216px;
  gap: 14px;
  min-height: 0;
}

/* ------------------------------------------------------------- the board */

.ap-board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 10px;
  background:
    radial-gradient(circle, #e3eaf2 1px, transparent 1px) 0 0 / 14px 14px;
  border-radius: 8px;
  padding: 4px;
  min-height: 0;
}

.ac {
  position: relative;
  display: grid;
  align-content: start;
  gap: 3px;
  padding: 7px 8px;
  border-radius: 7px;
  background: #fbfcfe;
  border: 1px solid #e2e9f1;
  opacity: 0;
  animation: var(--k) var(--T) linear infinite;
}

/* Connectors. Zip runs a line between every card and drops a branch from the
   third. Drawn as pseudo-elements so no coordinate is ever hand-placed. */
.ac[style*="1/1"]::after,
.ac[style*="1/2"]::after,
.ac[style*="1/3"]::after,
.ac[style*="1/4"]::after {
  content: "";
  position: absolute;
  right: -11px;
  top: 50%;
  width: 11px;
  height: 1px;
  background: #ccd8e4;
}

.ac.is-br::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  width: 1px;
  height: 11px;
  background: #ccd8e4;
}

.ac-st {
  position: relative;
  display: block;
  height: 13px;
}

.ac-st i {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  font-style: normal;
  font-size: 0.62rem;
  font-weight: 600;
  color: #5f7285;
  white-space: nowrap;
  opacity: 0;
  animation: var(--k) var(--T) linear infinite;
}

.ac-st .s1 {
  color: #2f6bb5;
}

.ac.is-wait .ac-st .s1 {
  color: #a8722a;
}

.ac-st .s2 {
  color: #2f6e25;
}

.dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
}

.d-idle {
  background: #c3cfdb;
}

.d-run {
  background: #4a8ede;
}

.d-wait {
  background: #e0a53a;
}

.d-ok {
  background: #6fc45a;
}

.ac-h {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.2;
}

.ac-by {
  font-size: 0.62rem;
  color: #8093a6;
  line-height: 1.2;
}

/* ------------------------------------------------------- the agent panel */

.ap-agent {
  border-left: 1px solid #e7edf3;
  padding-left: 14px;
  min-width: 0;
}

.ap-agent-h {
  margin: 0 0 8px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #93a5b8;
}

.ap-log {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
}

.al {
  position: relative;
  padding-left: 12px;
  font-size: 0.68rem;
  line-height: 1.3;
  color: #5f7285;
  opacity: 0;
  animation: var(--k) var(--T) ease infinite;
}

.al::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #b7c4d1;
}

.al-wait {
  color: #a8722a;
}

.al-wait::before {
  background: #e0a53a;
}

.al-ok {
  color: #2f6e25;
}

.al-ok::before {
  background: #6fc45a;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 900px) {
  .app-win {
    height: 420px;
    grid-template-columns: 38px minmax(0, 1fr);
  }

  .ap-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 10px;
  }

  .ap-agent {
    border-left: 0;
    border-top: 1px solid #e7edf3;
    padding: 10px 0 0;
  }

  /* Seven cards across five columns does not survive a phone. Two columns,
     connectors off — the board still reads as parallel work. */
  .ap-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: none;
    grid-auto-rows: minmax(0, 1fr);
  }

  .ac {
    grid-area: auto !important;
  }

  .ac::after,
  .ac.is-br::before {
    display: none;
  }

  .ap-log {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 10px;
  }
}

/* Reduced motion settles on the frame that carries the whole story: the board
   complete, the held card approved by a named person, the log fully written. */
@media (prefers-reduced-motion: reduce) {
  .ap-prompt,
  .ap-record,
  .ap-typed em,
  .ap-caret,
  .ap-send,
  .ac,
  .ac-st i,
  .al {
    animation: none !important;
  }

  .ap-prompt {
    display: none;
  }

  .ap-record {
    opacity: 1;
  }

  .ac {
    opacity: 1;
    border-color: #8fce7d;
    background: #f1f9ee;
  }

  .ac.is-wait {
    border-color: #e0a53a;
    background: #fdf5e7;
  }

  .ac-st .s0,
  .ac-st .s1 {
    display: none;
  }

  .ac-st .s2 {
    opacity: 1;
  }

  .ac.is-wait .ac-st .s1 {
    display: flex;
    opacity: 1;
  }

  .ac.is-wait .ac-st .s2 {
    display: none;
  }

  .al {
    opacity: 1;
  }
}

/* ==========================================================================
   EVENTS AND NEWSROOM
   --------------------------------------------------------------------------
   The first pages on this site carrying third-party-verifiable proof: named
   summits, the organisers' own dates and venues, and the partner tier they
   publish. Treated visually as evidence — dated, plain, no decoration.
   ========================================================================== */

.ev-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ev-card {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.ev-card:hover,
.ev-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 16px 36px rgba(22, 33, 46, 0.11);
}

.ev-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Date first, because a reader scanning this page is checking whether they
   can make it before they read what it is. */
.ev-date {
  display: grid;
  justify-items: center;
  padding: 12px 0;
  border-radius: 10px;
  background: var(--navy-deep);
  color: #fff;
  line-height: 1;
}

.ev-date b {
  font-size: 1.65rem;
  font-weight: 600;
}

.ev-date i {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 5px;
  color: #8ed77f;
}

.ev-date u {
  text-decoration: none;
  font-size: 0.68rem;
  margin-top: 5px;
  color: #9fb0c2;
}

.ev-body {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.ev-role {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.ev-name {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.22;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
}

.ev-where {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.ev-sess {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ev-sess i {
  font-style: normal;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--navy);
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
}

.ev-go {
  margin-top: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--green-deeper);
}

.ev-card:hover .ev-go .ar {
  transform: translateX(4px);
}

/* ----------------------------------------------------------- detail page */

.ev-facts {
  margin: 0;
  display: grid;
  gap: 0;
}

.ev-facts > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 20px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}

.ev-facts > div:first-child {
  border-top: 1px solid var(--line);
}

.ev-facts dt {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
}

.ev-facts dd {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--navy-deep);
}

.ev-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}

.ev-sessions li {
  display: grid;
  gap: 6px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
}

.evs-kind {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deeper);
}

.evs-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.3;
}

.evs-who {
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* -------------------------------------------------------------- newsroom */

.news-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.news-list li {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}

.news-list li:first-child {
  padding-top: 0;
}

.news-list li:last-child {
  border-bottom: 0;
}

.news-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.news-meta span {
  color: var(--green-deeper);
}

.news-list h2 {
  margin: 12px 0 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--navy-deep);
  letter-spacing: -0.015em;
}

.news-list p {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.65;
  color: var(--muted);
  max-width: 68ch;
}

.news-list .alink {
  margin-top: 16px;
}

@media (max-width: 720px) {
  .ev-card {
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .ev-date b {
    font-size: 1.35rem;
  }

  .ev-facts > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* ==========================================================================
   AWARDS
   --------------------------------------------------------------------------
   Three awards from the 18th Procurement Excellence Summit, 8 July 2026. This
   is the first proof on the site that a stranger can attribute to somebody
   other than us, so it is styled as evidence: named, dated, sourced, and
   never floating free of the event that granted it.
   ========================================================================== */

/* The laurel mark. Typographic, because no award artwork has been supplied —
   the same rule the certification marks follow. */
.aw-mark {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(88, 185, 71, 0.14);
  border: 1px solid rgba(88, 185, 71, 0.4);
}

.aw-mark::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 5px;
  width: 5px;
  height: 9px;
  border: solid var(--green-deeper);
  border-width: 0 2px 2px 0;
  transform: rotate(43deg);
}

/* ------------------------------------------------- homepage trust strip */

.awards-band {
  background: #16212e;
  color: #fff;
  padding-block: 40px;
}

.awb {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 28px 44px;
  align-items: center;
}


.awb-src {
  margin: 0;
  display: grid;
  gap: 5px;
}

.awb-src b {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  color: #fff;
}

.awb-src span {
  font-size: 0.78rem;
  color: #93a5b8;
}

.awb-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px 20px;
}

.awb-list li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.3;
  color: #e4ecf3;
}

.awards-band .aw-mark {
  background: rgba(142, 215, 127, 0.16);
  border-color: rgba(142, 215, 127, 0.45);
}

.awards-band .aw-mark::after {
  border-color: #8ed77f;
}

.awb-note {
  margin: 22px 0 0;
}

.awards-band .alink {
  color: #b8c8d8;
  font-size: 0.8rem;
}

.awards-band .alink:hover {
  color: #fff;
  border-bottom-color: #8ed77f;
}

/* ------------------------------------------------------ event page block */

/* The awards section sits directly under the event hero, so it loses the
   standard top rhythm — the hero already provided it. */
.awards-sec {
  padding-top: 56px;
}

.aw-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}

.aw-list li {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-top: 3px solid var(--green);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
}

/* The engraved plate is the primary source for the title, so it gets the top
   of the card rather than a thumbnail somewhere below the fold. */
.aw-trophy {
  width: 100%;
  height: 260px;
  object-fit: cover;
  object-position: 50% 30%;
  display: block;
  background: #eef3f8;
}

.aw-body {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 22px 24px 26px;
}

/* The presentation itself. Three wide frames, each with the summit's own LED
   wall naming the award and Proconomy — the closest thing to a published
   winners list that exists. */
.aw-stage {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}

.aw-stage li {
  display: grid;
  gap: 10px;
}

.aw-stage img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  display: block;
}

.aw-stage span {
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.35;
}

.aw-name {
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}

.aw-src {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Awards named in the event hero, above the fold on that page. */
.ev-won {
  margin: 22px 0 0;
  font-size: var(--fs-sm);
  line-height: 1.6;
  color: var(--muted);
  max-width: 64ch;
}

.ev-won b {
  color: var(--green-deeper);
}

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


  .awb-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* An announcement that has evidence shows it. Only the awards item does. */
.news-img {
  display: block;
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 16px 0 0;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

/* ==========================================================================
   LEADERSHIP
   --------------------------------------------------------------------------
   Six people, square portraits, each linking to their own LinkedIn. No bios,
   because none were supplied and a leadership page is the worst place on a
   site to invent one — see content/leadership.mjs.
   ========================================================================== */

.team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 24px;
}

.team li {
  display: grid;
}

/* The whole card is the link. A reader on this page wants to check somebody
   out; making them find a small line of text at the bottom to do it is a
   pointless obstacle. */
.team-card {
  display: grid;
  justify-items: start;
  gap: 4px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: inherit;
  text-decoration: none;
  height: 100%;
  align-content: start;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.team-card:hover,
.team-card:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 16px 36px rgba(22, 33, 46, 0.11);
}

.team-card:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.team-card:hover .team-li {
  color: var(--navy-deep);
  border-bottom-color: var(--green);
}

.team img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--bg-alt);
  margin-bottom: 14px;
}

.team-n {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--navy-deep);
  letter-spacing: -0.01em;
}

.team-r {
  font-size: var(--fs-sm);
  color: var(--green-deeper);
  font-weight: 500;
}

.team-b {
  display: block;
  margin: 8px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.team-li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 12px;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
  transition:
    color var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.team-li:hover,
.team-li:focus-visible {
  color: var(--navy-deep);
  border-bottom-color: var(--green);
}

/* On the leadership page the H1 is the company's positioning sentence rather
   than a short headline — ORO's page opens the same way. At full display size
   a 70-character sentence fills the screen and reads as a billboard; it should
   read as a statement, so it sits between the display and h2 scales. */
.lead-h1 {
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 2.85rem);
  line-height: 1.12;
  text-wrap: balance;
}


/* ==========================================================================
   MATURITY ASSESSMENT — ANSWER CHIPS
   --------------------------------------------------------------------------
   The radios are visually hidden and their labels are styled as chips, but
   nothing in the stylesheet ever responded to :checked. Eleven questions and
   no way to see which answer you had picked, or which ones you had already
   done. It also meant keyboard users had no focus indicator at all, because
   the only focusable element was the hidden input.

   Both fixed here: a clear selected state, and a focus ring that appears on
   the chip when its hidden input takes focus.
   ========================================================================== */

.chip-row span {
  display: inline-block;
}

.chip-row label.chip {
  transition:
    background-color var(--t) var(--ease),
    border-color var(--t) var(--ease),
    color var(--t) var(--ease),
    box-shadow var(--t) var(--ease);
}

.chip-row label.chip:hover {
  border-color: var(--green);
  color: var(--navy-deep);
}

/* Selected. Filled rather than outlined, so a completed question is obvious
   from across the page when scanning back through eleven of them. */
.chip-row input:checked + label.chip {
  background: var(--green-deeper);
  border-color: var(--green-deeper);
  color: #fff;
  font-weight: 600;
}

.chip-row input:checked + label.chip::before {
  content: "";
  width: 5px;
  height: 9px;
  margin-right: 2px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(43deg) translateY(-1px);
}

/* The input is .vh — 1px and clipped — so the ring has to be drawn on the
   label instead, or tabbing through the assessment shows nothing. */
.chip-row input:focus-visible + label.chip {
  outline: 2px solid var(--green);
  outline-offset: 2px;
}

/* A question that has been answered gets a quiet marker on its card, so the
   reader can see progress without counting. */
.card:has(.chip-row input:checked) {
  border-color: var(--green-line);
}

/* ==========================================================================
   THANK-YOU PAGES
   ========================================================================== */

.ty-hero {
  padding: clamp(34px, 4.5vw, 62px) 0 clamp(30px, 4vw, 54px);
  text-align: center;
}

.ty-hero .eyebrow {
  justify-content: center;
}

.ty-hero h1 {
  margin: 0;
  font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
  line-height: 1.08;
  letter-spacing: var(--tracking-mega);
  font-weight: 500;
  color: var(--navy-deep);
}

.ty-sub {
  margin: 20px auto 0;
  max-width: 54ch;
  font-size: clamp(1.02rem, 0.95rem + 0.35vw, 1.22rem);
  line-height: 1.5;
  color: var(--muted);
}

/* The video is the point of the page, so it gets the width and sits directly
   under the line that promises it. preload="none" keeps the 6.8 MB off the
   wire until somebody actually presses play. */
.ty-video {
  margin: clamp(28px, 4vw, 44px) auto 0;
  max-width: 940px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #0a1a2c;
  box-shadow: 0 30px 70px rgba(6, 14, 24, 0.22);
}

.ty-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

.ty-video-cap {
  margin: 14px 0 0;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
}

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

.ty-proof {
  background: #16212e;
  color: #fff;
}

.ty-proof-head {
  text-align: center;
  max-width: 60ch;
  margin: 0 auto 34px;
}

.ty-proof-k {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8ed77f;
}

.ty-proof-head h2 {
  margin: 12px 0 0;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.15rem);
  line-height: 1.16;
  font-weight: 500;
  color: #fff;
  letter-spacing: -0.02em;
}

.ty-proof-s {
  margin: 12px 0 0;
  font-size: var(--fs-sm);
  color: #9fb0c2;
}

.ty-awards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.ty-awards li {
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
  padding: 24px 20px 26px;
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.ty-awards img {
  width: 100%;
  max-width: 190px;
  height: 210px;
  object-fit: cover;
  object-position: 50% 22%;
  border-radius: var(--radius);
}

.ty-awards span {
  font-size: 0.98rem;
  font-weight: 600;
  line-height: 1.32;
  color: #e6edf4;
}

.ty-proof-go {
  margin: 32px 0 0;
  text-align: center;
}

.ty-proof .alink {
  color: #b8c8d8;
}

.ty-proof .alink:hover {
  color: #fff;
  border-bottom-color: #8ed77f;
}

/* ------------------------------------------------------- what happens next */

/* Horizontal step flow on /thank-you/. Three icons on a connecting rule,
   which reads in about two seconds. The connector is drawn on each li rather
   than as a single background so it cannot fall out of alignment when a
   heading wraps to two lines. */
.ty-flow {
  list-style: none;
  margin: 46px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}

.ty-flow li {
  position: relative;
  text-align: center;
  padding: 0 6px;
}

/* The rule between one circle and the next. Sits behind the circles (z-index
   on .ty-flow-i) so it appears to run into them rather than across them. */
.ty-flow li::after {
  content: '';
  position: absolute;
  top: 31px;
  left: calc(50% + 46px);
  right: calc(-50% + 46px);
  height: 2px;
  background: var(--green-line);
}

.ty-flow li:last-child::after {
  display: none;
}

.ty-flow-i {
  position: relative;
  z-index: 1;
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--green-deeper);
  color: #fff;
}

.ty-flow-i svg {
  width: 26px;
  height: 26px;
}

.ty-flow-n {
  display: block;
  font-size: var(--fs-xxs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green-deeper);
  margin-bottom: 9px;
}

.ty-flow b {
  display: block;
  font-size: 1.12rem;
  font-weight: 600;
  color: var(--navy-deep);
  margin-bottom: 7px;
}

.ty-flow-t {
  display: block;
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: 24ch;
  margin-inline: auto;
}

/* Stacked below three-up. The connector is meaningless vertically, so it goes
   rather than being rotated into a decoration nobody asked for. */
@media (max-width: 860px) {
  .ty-flow {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .ty-flow li::after {
    display: none;
  }
}








/* ------------------------------------------------------------------ links */

.ty-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}

.ty-link {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 26px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: #fff;
  color: inherit;
  text-decoration: none;
  transition:
    transform var(--t) var(--ease),
    box-shadow var(--t) var(--ease),
    border-color var(--t) var(--ease);
}

.ty-link:hover,
.ty-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--green);
  box-shadow: 0 16px 36px rgba(22, 33, 46, 0.11);
}

.ty-link-h {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy-deep);
  line-height: 1.25;
}

.ty-link-b {
  font-size: var(--fs-sm);
  color: var(--muted);
  line-height: 1.6;
}

.ty-link-go {
  margin-top: 6px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--green-deeper);
}