/* ==========================================================================
   Homepage layout and proof-first product sections.
   Pre-commit claim leads the hero; the independent benchmark is the signature
   section. Light theme, CloudAEye blue.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero - .cx-hero in foundation.css supplies the shell, copy and stage.
   Only the proof lockup beneath the stage is page-specific.
   -------------------------------------------------------------------------- */

/* --- Animated pre-commit terminal --- */

.a-terminal {
  min-width: 0;
  margin: 4px 0 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 18px 40px -22px rgba(6, 78, 94, 0.28);
}

.a-terminal-bar {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.a-tdot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--line-strong);
}

.a-tdot:nth-child(1) {
  background: #e8a08f;
}
.a-tdot:nth-child(2) {
  background: #e7c785;
}
.a-tdot:nth-child(3) {
  background: #a8cf7c;
}

.a-terminal-bar em {
  margin-left: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.7rem;
  font-style: normal;
}

.a-terminal-body {
  display: grid;
  gap: 8px;
  min-height: 0;
  align-content: start;
  padding: 22px 20px 26px;
  font-family: var(--mono);
  font-size: 0.76rem;
  line-height: 1.5;
}

.a-line {
  margin: 0;
  opacity: 0;
  transform: translateY(6px);
  animation: a-line-in 15s linear infinite;
}

.a-line b {
  color: var(--blue);
  font-weight: 500;
}

.a-dim {
  color: var(--muted);
}

.a-l1 {
  animation-delay: 0s;
}
.a-l2 {
  animation-delay: 0.55s;
}
.a-l3 {
  animation-delay: 1.1s;
}
.a-l4 {
  animation-delay: 1.9s;
}
.a-l5 {
  animation-delay: 2.6s;
}
.a-l6 {
  animation-delay: 3.3s;
}
.a-l7 {
  animation-delay: 4.1s;
}
.a-l8 {
  animation-delay: 4.8s;
}

@keyframes a-line-in {
  0% {
    opacity: 0;
    transform: translateY(6px);
  }
  3%,
  92% {
    opacity: 1;
    transform: none;
  }
  97%,
  100% {
    opacity: 0;
    transform: translateY(-4px);
  }
}

/* Finding rows */
.a-find {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 11px 13px;
  border: 1px solid var(--line);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
}

.a-find strong {
  display: block;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.a-find em {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.68rem;
  font-style: normal;
}

.a-find code {
  font-family: var(--mono);
  font-size: 0.94em;
}

.a-sev {
  padding: 3px 0;
  border-radius: 4px;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: center;
}

.a-find-crit {
  background: var(--coral-soft);
  border-color: #f0c4b9;
  border-left-color: var(--coral);
}

.a-find-crit .a-sev {
  background: #f9d8d0;
  color: var(--coral-dark);
}

.a-find-warn {
  background: var(--amber-soft);
  border-color: #ecd79a;
  border-left-color: var(--amber);
}

.a-find-warn .a-sev {
  background: #f6e6b6;
  color: var(--amber-dark);
}

.a-find-ok {
  background: var(--blue-tint);
  border-color: #bfe6ee;
  border-left-color: var(--blue);
}

.a-find-ok .a-sev {
  background: var(--blue-soft);
  color: var(--blue-deep);
}

.a-verdict {
  padding: 11px 13px;
  background: var(--ink);
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: 0.74rem;
}

.a-verdict b {
  margin-right: 6px;
  color: #ffb3a2;
}

.a-caret {
  display: inline-block;
  width: 7px;
  height: 0.95em;
  margin-left: 3px;
  background: var(--blue);
  vertical-align: text-bottom;
  animation: cx-caret 900ms steps(1) infinite;
}

/* --- Hero proof lockup --- */

.a-hero-proof {
  position: relative;
  z-index: 1;
  display: grid;
  width: var(--shell);
  margin: 0 auto 72px;
  grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 22px 50px -30px rgba(6, 78, 94, 0.3);
}

.a-proof-rank {
  display: grid;
  align-content: center;
  gap: 2px;
  padding: 26px 28px;
  background: linear-gradient(
    150deg,
    var(--blue-dark) 0%,
    var(--blue-deep) 100%
  );
  color: #fff;
}

.a-proof-rank span {
  color: #a8dfea;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.a-proof-rank strong {
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.4vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.a-proof-rank small {
  color: #b9e6ef;
  font-size: 0.72rem;
}

.a-proof-items {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  background: #fff;
}

.a-proof-items > div {
  padding: 24px 22px;
}

.a-proof-items > div + div {
  border-left: 1px solid var(--line);
}

.a-proof-items code {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
}

.a-proof-items strong {
  display: block;
  margin-top: 12px;
  font-size: 0.94rem;
}

.a-proof-items span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: 0.79rem;
  line-height: 1.45;
}

/* --------------------------------------------------------------------------
   Benchmark board
   -------------------------------------------------------------------------- */

.a-benchmark {
  background: var(--surface);
}

.a-bench-board {
  display: grid;
  grid-template-columns: minmax(260px, 0.4fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  box-shadow: 0 28px 60px -34px rgba(6, 78, 94, 0.28);
}

.a-bench-score {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 42px 36px;
  background: linear-gradient(165deg, var(--blue-dark) 0%, #053f4d 100%);
  color: #fff;
}

.a-score-label {
  color: #a8dfea;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.a-score-value {
  margin: -14px 0 -6px;
  font-family: var(--display);
  font-size: clamp(3.6rem, 6vw, 5.6rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.05em;
  line-height: 1;
}

.a-score-sub {
  color: #b9e6ef;
  font-size: 0.82rem;
}

.a-score-deltas {
  display: grid;
  gap: 0;
  margin: auto 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.a-score-deltas > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.a-score-deltas dt {
  color: #b9e6ef;
  font-size: 0.8rem;
}

.a-score-deltas dd {
  margin: 0;
  color: var(--lime);
  font-family: var(--mono);
  font-size: 0.9rem;
  font-weight: 500;
}

.a-bench-score .cx-btn-ghost {
  color: #cdf19a;
}

.a-bench-score .cx-btn-ghost:hover {
  color: #fff;
}

.a-bench-chart {
  min-width: 0;
  padding: 34px 38px 30px;
  background: var(--paper);
}

.a-chart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.a-bench-comparisons {
  margin-top: 28px;
}

.a-comparisons-label {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
}

.a-comparison-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
}

.a-comparison {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
  padding: 16px;
  background: var(--paper);
  border-radius: 8px;
}

.a-comparison dt {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  color: var(--ink-soft);
  font-size: 12px;
  line-height: 1.4;
}

.a-comparison dt img {
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.a-comparison dd {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  line-height: 1.15;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.a-bench-repos .cx-repo-chip {
  min-height: 44px;
  gap: 9px;
  padding: 7px 13px 7px 8px;
  font-size: 13px;
}

/* The repository assets are white marks, so each needs a contrasting tile. */
.a-bench-repos .cx-repo-chip img {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 5px;
  border-radius: 7px;
}

.a-repo-logo-sentry {
  background: #6232d6;
}
.a-repo-logo-calcom {
  background: #333b4b;
}
.a-repo-logo-keycloak {
  background: #3282f6;
}
.a-repo-logo-grafana {
  background: #f28b28;
}
.a-repo-logo-discourse {
  background: #f48a42;
}

@media (max-width: 1100px) {
  .a-comparison-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.a-bench-repos {
  margin: 0;
}

.a-repos-label {
  display: block;
  margin-bottom: 12px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Three moments
   -------------------------------------------------------------------------- */

.a-moments {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: none;
}

.a-moment {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform 260ms var(--ease),
    box-shadow 260ms var(--ease),
    border-color 260ms var(--ease);
}

.a-moment:hover {
  border-color: var(--blue);
  box-shadow: 0 22px 44px -26px rgba(6, 78, 94, 0.28);
  transform: translateY(-4px);
}

.a-moment.is-lead {
  background: linear-gradient(180deg, var(--blue-tint) 0%, #fff 42%);
  border-color: var(--blue);
  box-shadow: 0 18px 40px -26px rgba(6, 78, 94, 0.3);
}

.a-moment-step {
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
}

.a-moment.is-lead .a-moment-step {
  color: var(--blue);
}

.a-moment > code {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
}

.a-moment > .cx-h3 {
  font-size: 1.28rem;
}

.a-moment > .cx-body {
  flex: 1;
  font-size: 0.9rem;
}

.a-moment .cx-only-us {
  align-self: flex-start;
}

/* --------------------------------------------------------------------------
   Capability board: replaced the vendor comparison table
   -------------------------------------------------------------------------- */

.a-capabilities {
  background: var(--surface);
}

.a-cap-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
}

.a-cap {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 9px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition:
    transform 240ms var(--ease),
    box-shadow 240ms var(--ease),
    border-color 240ms var(--ease);
}

.a-cap:hover {
  border-color: var(--blue);
  box-shadow: 0 22px 44px -26px rgba(6, 78, 94, 0.26);
  transform: translateY(-3px);
}

.a-cap.is-lead {
  background: linear-gradient(180deg, var(--blue-tint) 0%, #fff 52%);
  border-color: #b6e4ee;
}

.a-cap-num {
  color: var(--line-strong);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.06em;
}

.a-cap.is-lead .a-cap-num {
  color: var(--blue);
}

.a-cap strong {
  font-family: var(--display);
  font-size: 1.04rem;
  letter-spacing: -0.022em;
  line-height: 1.24;
}

.a-cap.is-lead strong {
  font-size: 1.14rem;
}

.a-cap p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.58;
}

.a-cap code {
  color: var(--blue-deep);
  font-family: var(--mono);
  font-size: 0.9em;
}

/* --------------------------------------------------------------------------
   Product shot
   -------------------------------------------------------------------------- */

.a-shot {
  position: relative;
  overflow: hidden;
  padding: 96px 0 76px;
  background: var(--paper);
  border-top: 1px solid var(--line);
}

.a-shot-visual {
  position: relative;
  max-width: 1240px;
  margin: 56px auto 0;
  padding: 44px 18px 0;
}

.a-shot-visual::after {
  position: absolute;
  right: 8%;
  bottom: -6px;
  left: 8%;
  z-index: 0;
  height: 60px;
  background: rgba(6, 78, 94, 0.2);
  filter: blur(38px);
  content: "";
}

.a-shot-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.a-shot-pin {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 4px;
  min-width: 128px;
  padding: 11px 14px;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 30px -14px rgba(6, 78, 94, 0.34);
  animation: cx-float 5s ease-in-out infinite;
}

.a-shot-pin code {
  color: var(--muted);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.08em;
}

.a-shot-pin strong {
  font-size: 0.84rem;
}

.a-pin-1 {
  top: 6px;
  left: 3%;
  border-top: 3px solid var(--blue);
}

.a-pin-2 {
  top: 12%;
  right: 5%;
  border-top: 3px solid var(--coral);
  animation-delay: -1.6s;
}

.a-pin-2 strong {
  color: var(--coral-dark);
}

.a-pin-3 {
  right: 1%;
  bottom: 18%;
  border-top: 3px solid var(--purple);
  animation-delay: -3.1s;
}

/* --------------------------------------------------------------------------
   Trust
   -------------------------------------------------------------------------- */

.a-trust-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.a-trust-card {
  display: grid;
  gap: 13px;
  align-content: start;
  padding: 30px 26px;
  background: #fff;
  border: 1px solid #c2e5ed;
  border-radius: var(--radius);
}

.a-trust-card code {
  color: var(--blue-dark);
  font-family: var(--mono);
  font-size: 0.63rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.a-trust-card .cx-h3 {
  font-size: 1.16rem;
}

/* --------------------------------------------------------------------------
   CTA
   -------------------------------------------------------------------------- */

.a-cta {
  padding: 96px 0;
  background:
    radial-gradient(90% 130% at 12% 0%, #f2fbdf 0%, rgba(242, 251, 223, 0) 60%),
    var(--surface);
  border-top: 1px solid var(--line);
}

.a-cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
  gap: 60px;
  align-items: end;
}

.a-cta-inner .cx-h2 {
  margin-top: 24px;
}

.a-cta-action {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.a-cta-action .cx-free-note {
  width: 100%;
  margin-top: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1060px) {
  .a-hero-proof {
    grid-template-columns: 1fr;
  }

  .a-proof-items {
    grid-template-columns: 1fr 1fr;
  }

  .a-proof-items > div:nth-child(n + 3) {
    border-top: 1px solid var(--line);
  }

  .a-proof-items > div:nth-child(odd) {
    border-left: 0;
  }

  .a-bench-board {
    grid-template-columns: 1fr;
  }

  .a-moments {
    grid-template-columns: 1fr;
  }

  .a-trust-grid {
    grid-template-columns: 1fr;
  }

  .a-cta-inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

@media (max-width: 780px) {
  .a-terminal-body {
    font-size: 0.7rem;
  }

  .a-find {
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 9px;
  }

  .a-proof-items {
    grid-template-columns: 1fr;
  }

  .a-proof-items > div + div {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .a-bench-score,
  .a-bench-chart {
    padding: 30px 24px;
  }

  .a-shot {
    padding: 74px 0 54px;
  }

  .a-pin-3 {
    display: none;
  }
}

@media (max-width: 520px) {
  .a-terminal-bar em {
    display: none;
  }

  .a-shot-pin {
    min-width: 106px;
    padding: 8px 10px;
  }

  .a-pin-1 {
    left: 0;
  }
  .a-pin-2 {
    right: 0;
  }
}

/* ==========================================================================
   Two-flows micro-animations (page A only)

   Scoped under .a-flows so B and C, which share the .cx-flows component, are
   untouched. Both run the same 10s cycle so the two cards read as one story:
   the MCP call catches it pre-commit, the PR gate confirms it post-commit.
   Pure CSS: no observers, no timers.
   ========================================================================== */

.a-flows .a-flowviz {
  margin-top: 20px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 26px -18px rgba(6, 78, 94, 0.3);
}

.a-flows .a-fv-bar {
  display: flex;
  min-height: 34px;
  align-items: center;
  gap: 9px;
  padding: 0 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 0.64rem;
}

.a-flows .a-fv-dots {
  display: flex;
  gap: 4px;
}

.a-flows .a-fv-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

.a-flows .a-fv-dots i:nth-child(1) {
  background: #e8a08f;
}
.a-flows .a-fv-dots i:nth-child(2) {
  background: #e7c785;
}
.a-flows .a-fv-dots i:nth-child(3) {
  background: #a8cf7c;
}

.a-flows .a-fv-bar em {
  color: var(--muted);
  font-style: normal;
}

.a-flows .a-fv-tag {
  margin-left: auto;
  padding: 2px 7px;
  background: var(--blue-soft);
  border-radius: 4px;
  color: var(--blue-deep);
  font-size: 0.56rem;
  font-weight: 500;
  letter-spacing: 0.08em;
}

.a-flows .a-fv-body {
  display: grid;
  gap: 6px;
  min-height: 152px;
  align-content: start;
  padding: 13px 14px 15px;
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1.45;
}

/* --- Terminal: a Claude Code MCP tool call ----------------------------- */

.a-flows .a-fvl {
  margin: 0;
  color: var(--ink);
  opacity: 0;
  animation: a-fv-line 10s linear infinite;
}

.a-flows .a-fvl b {
  color: var(--blue);
  font-weight: 500;
}

.a-flows .a-fvl-1 {
  animation-delay: 0.3s;
}
.a-flows .a-fvl-2 {
  animation-delay: 1.2s;
}
.a-flows .a-fvl-3 {
  animation-delay: 2.1s;
}
.a-flows .a-fvl-4 {
  animation-delay: 2.9s;
}
.a-flows .a-fvl-5 {
  animation-delay: 3.8s;
}
.a-flows .a-fvl-6 {
  animation-delay: 4.8s;
}

@keyframes a-fv-line {
  0% {
    opacity: 0;
    transform: translateY(4px);
  }
  3%,
  88% {
    opacity: 1;
    transform: none;
  }
  95%,
  100% {
    opacity: 0;
    transform: translateY(-3px);
  }
}

/* The MCP call row: mirrors how Claude Code renders a tool invocation */
.a-flows .a-fv-call {
  color: var(--ink);
  font-weight: 500;
}

.a-flows .a-fv-bullet {
  margin-right: 4px;
  color: var(--blue);
  font-size: 0.6rem;
  vertical-align: 1px;
}

.a-flows .a-fv-call i {
  color: var(--muted);
  font-style: normal;
}

.a-flows .a-fv-out {
  color: var(--muted);
  padding-left: 2px;
}

.a-flows .a-fv-elbow {
  display: inline-block;
  width: 12px;
  color: var(--line-strong);
}

.a-flows .a-fv-hit {
  color: var(--coral-dark);
}

.a-flows .a-fv-say {
  margin-top: 2px;
  padding: 7px 9px;
  background: var(--blue-tint);
  border-left: 2px solid var(--blue);
  border-radius: 0 5px 5px 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 0.78rem;
}

.a-flows .a-fv-say code {
  font-family: var(--mono);
  font-size: 0.92em;
}

.a-flows .a-fv-caret {
  display: inline-block;
  width: 6px;
  height: 0.92em;
  background: var(--blue);
  vertical-align: text-bottom;
  animation: cx-caret 900ms steps(1) infinite;
}

/* --- PR: checks land, gate unblocks ------------------------------------ */

.a-flows .a-fv-bar-pr {
  background: #fff;
}

.a-flows .a-fv-branch {
  color: var(--lime-dark);
  font-size: 0.8rem;
}

.a-flows .a-fv-bar-pr em {
  color: var(--ink);
  font-weight: 500;
}

.a-flows .a-fv-num {
  margin-left: auto;
  color: var(--muted);
}

.a-flows .a-fv-pr .a-fv-body {
  gap: 5px;
  background: var(--paper);
}

.a-flows .a-pc {
  opacity: 0;
  animation: a-fv-line 10s linear infinite;
}

.a-flows .a-pc-1 {
  animation-delay: 0.8s;
}
.a-flows .a-pc-2 {
  animation-delay: 1.5s;
}
.a-flows .a-pc-3 {
  animation-delay: 2.2s;
}

.a-flows .a-pc,
.a-flows .a-pc-fail,
.a-flows .a-pc-pass {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 0.68rem;
}

/* the swap row is a positioning context for its two states */
.a-flows .a-pc-3 {
  display: block;
  padding: 0;
  background: none;
  border: 0;
}

.a-flows .a-pc-swap {
  position: relative;
  display: block;
  min-height: 31px;
}

.a-flows .a-pc-fail,
.a-flows .a-pc-pass {
  position: absolute;
  inset: 0;
}

.a-flows .a-pc i {
  display: grid;
  width: 15px;
  height: 15px;
  place-items: center;
  border-radius: 50%;
  font-size: 0.58rem;
  font-style: normal;
  font-weight: 700;
}

.a-flows .a-pc i.is-ok {
  background: var(--lime-soft);
  color: var(--lime-dark);
}

.a-flows .a-pc i.is-bad {
  background: #f9d8d0;
  color: var(--coral-dark);
}

.a-flows .a-pc span {
  color: var(--ink-soft);
  font-family: var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.a-flows .a-pc b {
  font-family: var(--mono);
  font-size: 0.6rem;
  font-weight: 500;
}

.a-flows .a-pc-1 b,
.a-flows .a-pc-2 b,
.a-flows .a-pc-pass b {
  color: var(--lime-dark);
}

.a-flows .a-pc-fail {
  background: var(--coral-soft);
  border-color: #f0c4b9;
}

.a-flows .a-pc-fail b {
  color: var(--coral-dark);
}

.a-flows .a-pc-pass {
  background: #fff;
}

/* Exact-percentage keyframes so the fail -> pass flip lands with the gate. */
.a-flows .a-pc-fail {
  animation: a-pc-fail 10s linear infinite;
}

.a-flows .a-pc-pass {
  animation: a-pc-pass 10s linear infinite;
}

@keyframes a-pc-fail {
  0%,
  23% {
    opacity: 0;
  }
  26%,
  54% {
    opacity: 1;
  }
  57%,
  100% {
    opacity: 0;
  }
}

@keyframes a-pc-pass {
  0%,
  54% {
    opacity: 0;
  }
  57%,
  88% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

.a-flows .a-pc-gate {
  position: relative;
  min-height: 32px;
  margin-top: 4px;
}

.a-flows .a-gate-blocked,
.a-flows .a-gate-ready {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 11px;
  border-radius: 5px;
  font-family: var(--mono);
  font-size: 0.64rem;
  font-weight: 500;
  opacity: 0;
}

.a-flows .a-gate-blocked i,
.a-flows .a-gate-ready i {
  font-style: normal;
}

.a-flows .a-gate-blocked {
  background: var(--coral-soft);
  border: 1px solid #f0c4b9;
  color: var(--coral-dark);
  animation: a-gate-blocked 10s linear infinite;
}

.a-flows .a-gate-ready {
  background: var(--lime-soft);
  border: 1px solid #cbe694;
  color: var(--lime-dark);
  animation: a-gate-ready 10s linear infinite;
}

@keyframes a-gate-blocked {
  0%,
  30% {
    opacity: 0;
  }
  33%,
  57% {
    opacity: 1;
  }
  60%,
  100% {
    opacity: 0;
  }
}

@keyframes a-gate-ready {
  0%,
  60% {
    opacity: 0;
  }
  63%,
  88% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0;
  }
}

@media (max-width: 560px) {
  .a-flows .a-fv-body {
    min-height: 0;
    font-size: 0.64rem;
  }

  .a-flows .a-fv-bar em {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Freeze on the resolved state rather than looping. */
  .a-flows .a-fvl,
  .a-flows .a-pc,
  .a-flows .a-pc-pass,
  .a-flows .a-gate-ready {
    opacity: 1 !important;
    animation: none !important;
  }

  .a-flows .a-pc-fail,
  .a-flows .a-gate-blocked {
    opacity: 0 !important;
    animation: none !important;
  }

  .a-flows .a-fv-caret {
    animation: none !important;
  }
}