/* ============================================================================
 * site-flow.css — "From scattered files to trusted work" single-glance flow.
 * Ports the WAIC v2 "Slot direito — produto + prova" money shot to the site:
 * messy inputs → Nama's verbs → a verified artifact, with the memory loop made
 * loud. One DOM, three layouts switched by body[data-flow] (Tweaks).
 *
 * Pure vector / real-content miniatures — reuses the .ichip / .ipill / .ihlt
 * vocabulary from site-illos.css. No bitmap assets.
 * ========================================================================== */

.flowband {
  display: grid;
  align-items: stretch;
  gap: 28px 22px;
  background: #FFFFFF;
  border: 1px solid #E4E4E7;
  border-radius: 18px;
  padding: 34px 34px 32px;
  box-shadow: 0 30px 70px -38px rgba(15, 23, 42, 0.26);
}

/* column scaffolding */
.fb-col { display: flex; flex-direction: column; min-width: 0; }
.fb-cap {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: #9CA1AB; margin-bottom: 16px;
}
.fb-cap b { color: #006ADF; font-weight: 700; }

.fb-have  { grid-area: have; }
.fb-verbs { grid-area: verbs; }
.fb-get   { grid-area: get; }
.fb-memory{ grid-area: memory; }

/* ── 1 · What you have — scattered file chips ── */
.fb-chips { display: flex; flex-direction: column; gap: 10px; }
.flowband .ichip {
  font-size: 13.5px; padding: 9px 13px; border-radius: 10px;
  transform: rotate(var(--r, 0deg)) translateX(var(--x, 0));
  transition: transform .2s ease, box-shadow .2s ease;
}
.flowband .ichip svg { width: 14px; height: 14px; }
.flowband .ichip .ext { font-size: 11.5px; margin-left: auto; padding-left: 8px; }
.flowband .ichip:hover { transform: rotate(0deg) translateX(0); box-shadow: 0 8px 20px -10px rgba(15,23,42,0.25); }
.fb-more {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed #D4D7DE; border-radius: 10px; background: transparent;
  padding: 9px 13px; font-size: 12.5px; font-weight: 600; color: #9CA1AB;
  transform: rotate(var(--r, 0deg)) translateX(var(--x, 0));
}

/* ── 2 · Nama — live chain-of-thought console ── */
.fb-think { display: flex; flex-direction: column; gap: 3px; }
.fb-tstep { border-radius: 9px; }
.fb-thead {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 8px 11px; background: none; border: none; border-radius: 8px;
  font-family: inherit; text-align: left; cursor: default;
}
.fb-tname { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #0050B0; white-space: nowrap; }
.fb-tname svg { width: 15px; height: 15px; color: #2684FF; flex: none; }
.fb-tsum { margin-left: auto; font-size: 11.5px; font-weight: 600; color: #9CA1AB; white-space: nowrap; overflow: hidden; }
.fb-tstat { display: flex; flex: none; width: 15px; height: 15px; align-items: center; justify-content: center; }
.fb-tstat:empty { display: none; }
.fb-tbody {
  padding: 1px 11px 7px 33px; display: flex; flex-direction: column; gap: 6px;
}
.fb-tline { font-size: 12px; line-height: 1.45; color: #64748B; position: relative; padding-left: 14px; text-wrap: pretty; }
.fb-tline::before { content: '›'; position: absolute; left: 0; top: -0.5px; color: #C4C9D2; font-weight: 700; }
.fb-tline code { font-family: var(--font-mono); font-size: 11px; color: #0B1220; background: #F1F5FB; border-radius: 4px; padding: 0.5px 5px; }
.fb-tline .fb-arr { color: #2684FF; font-weight: 700; padding: 0 1px; }
.fb-tline .fb-cn { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #1D6AE5; }
.fb-tline .fb-ok { color: #16A34A; font-weight: 700; margin-left: 2px; }

/* mini knowledge-graph drawn inside the "connects" step */
.fb-graph { margin-top: 7px; position: relative; }
.fb-graph svg { width: 100%; height: auto; display: block; overflow: visible; }
.fb-edge { stroke: #C7DEFF; stroke-width: 1.5; }
.fb-edge--warn { stroke: #F5A524; stroke-width: 2; }
.fb-node circle { stroke: #FFFFFF; stroke-width: 2; }
.fb-node--file circle { fill: #2684FF; }
.fb-node--concept circle { fill: #22B8E6; }
.fb-node--reg circle { fill: #F5A524; }
.fb-node text { font-family: var(--font-sans); font-size: 8.5px; font-weight: 600; fill: #64748B; text-anchor: middle;
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }
.fb-node--reg text { fill: #B45309; font-weight: 700; }

/* cluster-style graph details (matches deck slide 12 "company brain") */
.fb-hulls ellipse { pointer-events: none; }
.fb-node .halo { stroke: none; opacity: 0.14; }
.fb-node--person circle { fill: #A78BFA; }
.fb-edge--thin { stroke-width: 1; }
.fb-sat circle { stroke: #FFFFFF; stroke-width: 1.2; }
.fb-clab { font-family: var(--font-sans); font-size: 7px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; text-anchor: middle;
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }
.fb-elab { font-family: var(--font-sans); font-size: 7.5px; font-weight: 700; fill: #B45309; text-anchor: middle;
  paint-order: stroke; stroke: #FFFFFF; stroke-width: 3px; stroke-linejoin: round; }
.fb-gtag { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font-size: 10.5px; font-weight: 700; color: #B45309; }
.fb-gtag .dot { width: 6px; height: 6px; border-radius: 999px; background: #F5A524; flex: none;
  box-shadow: 0 0 0 3px rgba(245, 165, 36, 0.18); }

/* connector arrows (pipeline only) */
.fb-arrow { display: flex; align-items: center; justify-content: center; color: #C4C9D2; }
.fb-arrow.a1 { grid-area: a1; }
.fb-arrow.a2 { grid-area: a2; }
.fb-arrow svg { width: 20px; height: 20px; }

/* ── 3 · What you get — live stage (parse → graph → artifact) ── */
.fb-stage { display: grid; }
.fb-stage > .fb-panel { grid-area: 1 / 1; min-width: 0; align-self: start; }
.fb-panel-parse, .fb-panel-graph { display: none; }            /* base/no-JS shows only the artifact */
.flowband.play .fb-panel-parse,
.flowband.play .fb-panel-graph { display: block; }

/* parse panel — the user's document being read, key fields extracted */
.fb-parse { background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 56px -28px rgba(26, 26, 26, 0.22); }
.fb-parse-h { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid #EEF0F4; }
.fb-parse-h svg { width: 16px; height: 16px; color: #2684FF; flex: none; }
.fb-parse-h b { font-size: 13.5px; font-weight: 700; color: #0B1220; }
.fb-parse-stat { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #2684FF; background: #EFF6FF; border-radius: 999px; padding: 2px 9px; }
.fb-parse-doc { position: relative; padding: 15px 16px; display: flex; flex-direction: column; gap: 9px; overflow: hidden; }
.fb-parse-doc .pl { height: 7px; border-radius: 4px; background: #EEF0F4; }
.fb-parse-doc .pl.w92 { width: 92%; } .fb-parse-doc .pl.w84 { width: 84%; }
.fb-parse-doc .pl.w70 { width: 70%; } .fb-parse-doc .pl.w55 { width: 55%; } .fb-parse-doc .pl.w48 { width: 48%; }
.fb-parse-doc .pln { margin: 0; font-size: 12.5px; line-height: 1.5; color: #3F3F46; }
.fb-parse-doc mark { background: #FEF3C7; color: #92400E; font-weight: 700; border-radius: 3px; padding: 0 3px; }
.fb-scan { position: absolute; left: 0; right: 0; top: 0; height: 22px; pointer-events: none;
  background: linear-gradient(180deg, rgba(38,132,255,0) 0%, rgba(38,132,255,0.14) 55%, rgba(38,132,255,0.42) 100%);
  border-bottom: 1.5px solid #2684FF; opacity: 0; }
.flowband.play.s1:not(.s2) .fb-scan { opacity: 1; }
.fb-parse-foot { display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-top: 1px solid #EEF0F4;
  background: #FBFCFE; font-size: 11.5px; font-weight: 600; color: #166534; }
.fb-parse-foot svg { width: 13px; height: 13px; flex: none; }

/* graph panel sizing */
.fb-panel-graph .fb-graph { margin-top: 0; padding: 6px 4px 2px; }
.fb-panel-graph .fb-node text { font-size: 9px; }
.fb-panel-graph .fb-gtag { font-size: 11px; padding-left: 4px; }

/* ── the verified artifact card ── */
.fb-card {
  background: #FFFFFF; border: 1px solid #E4E4E7; border-radius: 12px;
  padding: 16px 18px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 56px -28px rgba(26, 26, 26, 0.22);
}
.fb-card-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; border-bottom: 1px solid #EEF0F4; }
.fb-card-head .ic {
  width: 34px; height: 34px; border-radius: 9px; flex: none;
  background: #EFF6FF; display: grid; place-items: center;
}
.fb-card-head .ic svg { width: 18px; height: 18px; color: #2684FF; }
.fb-card-head .meta { min-width: 0; flex: 1; }
.fb-card-head .meta .t { font-size: 16px; font-weight: 700; color: #0B1220; line-height: 1.15; }
.fb-card-head .meta .m { margin-top: 3px; font-size: 12px; font-weight: 500; color: #71717A; }
.fb-card-head .ok {
  margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px; border-radius: 999px; background: #DCFCE7; color: #166534;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.fb-card-head .ok svg { width: 11px; height: 11px; }
.fb-finding { display: flex; flex-direction: column; gap: 9px; font-size: 13.5px; line-height: 1.55; color: #3F3F46; }
.fb-finding p { margin: 0; }
.fb-finding b { color: #09090B; font-weight: 700; }
.flowband .ipill { font-size: 9px; min-width: 14px; height: 14px; }
.fb-foot { display: flex; gap: 8px; flex-wrap: wrap; }
.fb-fchip {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  background: #F4F4F5; color: #52525B; font-size: 11px; font-weight: 700; white-space: nowrap;
}
.fb-fchip svg { width: 11px; height: 11px; flex: none; }

/* ── memory loop — the compounding hook, made loud ── */
.fb-memory {
  display: flex; align-items: center; gap: 15px;
  background: linear-gradient(100deg, #EFF6FF 0%, #F4F9FF 100%);
  border: 1px solid #C7DEFF; border-radius: 12px; padding: 15px 18px;
}
.fb-mem-ic {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: #2684FF; display: grid; place-items: center;
  box-shadow: 0 8px 20px -8px rgba(38, 132, 255, 0.6);
}
.fb-mem-ic svg { width: 20px; height: 20px; color: #FFFFFF; }
.fb-mem-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fb-mem-txt b { font-size: 15px; font-weight: 700; color: #0A2E6B; letter-spacing: -0.005em; }
.fb-mem-txt span { font-size: 13px; line-height: 1.4; color: #2C5BA8; text-wrap: pretty; }
.fb-mem-loop { margin-left: auto; flex: none; display: flex; align-items: center; color: #2684FF; }
.fb-mem-loop svg { width: 22px; height: 22px; }

/* memory callout inside the S5 governed-artifact card */
.acard .acard-mem {
  display: flex; align-items: center; gap: 11px;
  padding: 12px 16px 14px; background: #EFF6FF; border-top: 1px solid #C7DEFF;
}
.acard .acard-mem-ic {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: #2684FF; display: grid; place-items: center;
}
.acard .acard-mem-ic svg { width: 15px; height: 15px; color: #FFFFFF; }
.acard .acard-mem-tx { font-size: 12.5px; line-height: 1.4; color: #2C5BA8; }
.acard .acard-mem-tx b { color: #0A2E6B; font-weight: 700; }

/* ════════════════════ LAYOUT A · Pipeline (default · WAIC money shot) ════════════════════ */
body[data-flow="pipeline"] .flowband {
  grid-template-columns: minmax(200px, 0.82fr) 24px minmax(258px, 1.05fr) 24px minmax(316px, 1.16fr);
  grid-template-areas:
    "have a1 verbs a2 get"
    "memory memory memory memory memory";
}
body[data-flow="pipeline"] .fb-verbs { justify-content: flex-start; }
body[data-flow="pipeline"] .fb-arrow { align-self: center; }      /* center arrows on the thinking console */
body[data-flow="pipeline"] .fb-memory { margin-top: 4px; }

/* ════════════════════ LAYOUT B · Artifact-led (output is the hero) ════════════════════ */
body[data-flow="artifact"] .flowband {
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  grid-template-areas:
    "have   get"
    "verbs  get"
    "memory get";
  column-gap: 40px; align-items: start;
}
body[data-flow="artifact"] .fb-arrow { display: none; }
body[data-flow="artifact"] .fb-steps { flex-direction: row; flex-wrap: wrap; }
body[data-flow="artifact"] .fb-verbs { margin-top: 22px; }
body[data-flow="artifact"] .fb-memory { margin-top: 22px; }
body[data-flow="artifact"] .fb-get { align-self: center; }
body[data-flow="artifact"] .fb-card { max-width: 560px; }
body[data-flow="artifact"] .fb-card .meta .t { font-size: 18px; }
body[data-flow="artifact"] .fb-finding { font-size: 14.5px; }

/* ════════════════════ LAYOUT C · Journey (vertical storytelling) ════════════════════ */
body[data-flow="journey"] .flowband {
  grid-template-columns: 1fr;
  grid-template-areas: "have" "verbs" "get" "memory";
  gap: 22px; max-width: 760px; margin: 0 auto;
}
body[data-flow="journey"] .fb-arrow { display: none; }
body[data-flow="journey"] .fb-chips { flex-direction: row; flex-wrap: wrap; }
body[data-flow="journey"] .fb-steps { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
body[data-flow="journey"] .fb-have,
body[data-flow="journey"] .fb-verbs,
body[data-flow="journey"] .fb-get,
body[data-flow="journey"] .fb-memory { position: relative; }
body[data-flow="journey"] .fb-have::after,
body[data-flow="journey"] .fb-verbs::after,
body[data-flow="journey"] .fb-get::after {
  content: ""; position: absolute; left: 18px; bottom: -22px; height: 22px; width: 1px;
  background: linear-gradient(#C7DEFF, #E4E4E7);
}

/* ── S5 · "Artifacts, not chats" — show a dead chat reply vs the governed artifact ── */
.s-art .art-grid { align-items: center; }
.s-art .art-copy { align-self: center; }
.deadchat {
  background: #FAFAFB; border: 1px solid #E8E8EC; border-radius: 12px;
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 9px;
}
.dc-cap { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #A9AEB8; margin-bottom: 3px; }
.dc-bubble { font-size: 13.5px; line-height: 1.5; border-radius: 12px; padding: 9px 13px; max-width: 90%; }
.dc-bubble.u { align-self: flex-end; background: #ECEDF1; color: #6B7280; }
.dc-bubble.a { align-self: flex-start; background: #FFFFFF; border: 1px solid #ECECEF; color: #9AA0AB; }
.dc-foot { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 5px; padding-top: 13px; border-top: 1px dashed #E4E4E7; }
.dc-x {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px;
  background: #FDF1F2; color: #B0212F; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.dc-x svg { width: 11px; height: 11px; flex: none; }

/* ── responsive: collapse all modes to the vertical journey ── */
@media (max-width: 880px) {
  .flowband,
  body[data-flow="pipeline"] .flowband,
  body[data-flow="artifact"] .flowband {
    grid-template-columns: 1fr !important;
    grid-template-areas: "have" "verbs" "get" "memory" !important;
    column-gap: 0;
  }
  .fb-arrow { display: none !important; }
  .fb-chips { flex-direction: row; flex-wrap: wrap; }
  body[data-flow="pipeline"] .fb-steps,
  body[data-flow="artifact"] .fb-steps { flex-direction: row; flex-wrap: wrap; }
  body[data-flow="pipeline"] .fb-arrow { padding-top: 0; }
  .fb-card { max-width: 100%; }
}

/* ════════════════════ INTERACTIVE PLAY-THROUGH (site-flow.js) ════════════════════
 * Only active when JS adds .play (not reduced-motion, not print, not no-JS).
 * Base markup stays fully visible for capture / fallback. Under .play the
 * reveal targets start hidden and light up cumulatively via .s1…​.s5 driven by
 * the five verbs. Works across all three data-flow layouts. */
.flowband.play .fb-thead { cursor: pointer; transition: background .2s ease; }
.flowband.play .fb-thead:hover { background: #F4F8FE; }
.flowband.play .fb-thead:focus-visible { outline: 2px solid var(--ring, #2684FF); outline-offset: 2px; }
.flowband.play .fb-tname { color: #AEB4BE; transition: color .35s ease; }
.flowband.play .fb-tname svg { color: #CBD2DC; transition: color .35s ease; }
.flowband.play .fb-tstep.run .fb-tname,
.flowband.play .fb-tstep.done .fb-tname { color: #0050B0; }
.flowband.play .fb-tstep.run .fb-tname svg,
.flowband.play .fb-tstep.done .fb-tname svg { color: #2684FF; }
.flowband.play .fb-tstep.run { background: #F4F8FE; box-shadow: inset 0 0 0 1px #E0EDFF; }

.flowband.play .fb-tbody { max-height: 0; opacity: 0; overflow: hidden;
  padding-top: 0; padding-bottom: 0;
  transition: max-height .5s ease, opacity .4s ease, padding .35s ease; }
.flowband.play .fb-tstep.run .fb-tbody { max-height: 190px; opacity: 1; padding-top: 1px; padding-bottom: 8px; }

.flowband.play .fb-tsum { opacity: 0; transition: opacity .3s ease; }
.flowband.play .fb-tstep.done .fb-tsum { opacity: 1; }

.flowband.play .fb-tstep.run .fb-tline { animation: fbLine .4s ease both; }
.flowband.play .fb-tstep.run .fb-tline:nth-child(2) { animation-delay: .13s; }
.flowband.play .fb-tstep.run .fb-tline:nth-child(3) { animation-delay: .26s; }
@keyframes fbLine { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* ── right column = live stage: parse → graph → artifact, swapped per step ── */
.flowband.play .fb-stage .fb-panel { opacity: 0; visibility: hidden;
  transition: opacity .5s ease, visibility .5s; }
.flowband.play.s1:not(.s2) .fb-panel-parse { opacity: 1; visibility: visible; }
.flowband.play.s2:not(.s3) .fb-panel-graph { opacity: 1; visibility: visible; }
.flowband.play.s3 .fb-panel-card { opacity: 1; visibility: visible; }

/* graph: nodes pop in (parsed entities), then edges draw (connections) */
.flowband.play .fb-panel-graph .fb-node { opacity: 0; transform: scale(.2);
  transform-box: fill-box; transform-origin: center; }
.flowband.play .fb-panel-graph .fb-edge { stroke-dasharray: 360; stroke-dashoffset: 360; }
.flowband.play .fb-panel-graph .fb-gtag { opacity: 0; }
.flowband.play.s2:not(.s3) .fb-panel-graph .fb-node {
  animation: fbPop .4s cubic-bezier(.2,1.5,.4,1) both; animation-delay: var(--nd, 0s); }
.flowband.play.s2:not(.s3) .fb-panel-graph .fb-edge {
  animation: fbDraw .6s ease both; animation-delay: var(--ed, .3s); }
.flowband.play.s2:not(.s3) .fb-panel-graph .fb-edge--warn {
  animation: fbDraw .55s ease var(--ed) both, fbWarn 1.1s ease calc(var(--ed) + .55s) 2; }
.flowband.play.s2:not(.s3) .fb-panel-graph .fb-gtag {
  animation: fbLine .4s ease 1.2s both; }

/* parse: scan line sweeps the document */
.flowband.play.s1:not(.s2) .fb-scan { animation: fbScan 1.15s cubic-bezier(.4,0,.3,1) .15s 1 both; }
.flowband.play .fb-parse mark { background-size: 100% 0; }
.flowband.play.s1:not(.s2) .fb-parse mark { animation: fbMark .4s ease both; }
.flowband.play.s1:not(.s2) .fb-parse mark:nth-of-type(2) { animation-delay: .35s; }

@keyframes fbPop { to { opacity: 1; transform: scale(1); } }
@keyframes fbDraw { to { stroke-dashoffset: 0; } }
@keyframes fbWarn { 0%, 100% { stroke-opacity: 1; } 50% { stroke-opacity: .3; } }
@keyframes fbScan { from { transform: translateY(-4px); } to { transform: translateY(var(--scan-h, 150px)); } }
@keyframes fbMark { from { background-color: transparent; color: inherit; } }

/* when "creates" runs, pull the eye toward WHAT YOU GET */
.flowband.play.s3 .fb-arrow.a2 { color: #2684FF; }
.flowband.play.s3 .fb-arrow.a2 svg { animation: fbNudge .9s ease-in-out 2; }

.flowband.play .fb-have .ichip,
.flowband.play .fb-have .fb-more { opacity: .32; filter: saturate(.35);
  transition: opacity .5s ease, filter .5s ease, transform .25s ease, box-shadow .25s ease; }
.flowband.play.s1 .fb-have .ichip,
.flowband.play.s1 .fb-have .fb-more { opacity: 1; filter: none; }

.flowband.play .fb-arrow { opacity: .15; transition: opacity .45s ease; }
.flowband.play.s2 .fb-arrow { opacity: 1; }
.flowband.play.s2 .fb-arrow.a1 svg,
.flowband.play.s3 .fb-arrow.a2 svg { animation: fbNudge 1s ease-in-out 1; }

.flowband.play .fb-card { opacity: 0; transform: translateY(10px) scale(.985);
  transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.flowband.play.s3 .fb-card { opacity: 1; transform: none; }

.flowband.play .fb-card-head .ok { opacity: 0; transform: scale(.7);
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,1.4,.4,1); }
.flowband.play.s4 .fb-card-head .ok { opacity: 1; transform: none; }

.flowband.play .fb-finding > p { opacity: 0; transform: translateY(5px);
  transition: opacity .5s ease, transform .5s ease; }
.flowband.play.s3 .fb-finding > p:first-child { opacity: 1; transform: none; }
.flowband.play.s5 .fb-finding > p:last-child { opacity: 1; transform: none; }

.flowband.play .fb-finding .ipill { opacity: 0; transition: opacity .35s ease; }
.flowband.play.s4 .fb-finding p:first-child .ipill,
.flowband.play.s5 .fb-finding p:last-child .ipill { opacity: 1; }
.flowband.play .fb-finding .ihlt { background: transparent; box-shadow: none; color: inherit;
  transition: background .45s ease, box-shadow .45s ease, color .45s ease; }
.flowband.play.s4 .fb-finding .ihlt { background: #EFF6FF; box-shadow: 0 0 0 2px #EFF6FF; color: #1E3A8A; }

.flowband.play .fb-foot { opacity: 0; transform: translateY(5px);
  transition: opacity .45s ease, transform .45s ease; }
.flowband.play.s4 .fb-foot { opacity: 1; transform: none; }

.flowband.play .fb-memory { opacity: .42; filter: saturate(.45);
  transition: opacity .55s ease, filter .55s ease, box-shadow .4s ease; }
.flowband.play.s5 .fb-memory { opacity: 1; filter: none; box-shadow: 0 14px 34px -20px rgba(38, 132, 255, 0.55); }
.flowband.play .fb-mem-loop { cursor: pointer; }
.flowband.play.s5 .fb-mem-loop svg { animation: fbSpin 1.1s cubic-bezier(.5,0,.2,1) 1; }

@keyframes fbNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes fbSpin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .flowband.play .fb-have .ichip,
  .flowband.play .fb-have .fb-more,
  .flowband.play .fb-arrow,
  .flowband.play .fb-card,
  .flowband.play .fb-card-head .ok,
  .flowband.play .fb-finding > p,
  .flowband.play .fb-finding .ipill,
  .flowband.play .fb-foot,
  .flowband.play .fb-memory { opacity: 1 !important; filter: none !important; transform: none !important; }
  .flowband.play .fb-tbody { max-height: none !important; opacity: 1 !important; }
  .flowband.play .fb-tname,
  .flowband.play .fb-tname svg { color: #0050B0 !important; }
  .flowband.play .fb-tsum { opacity: 0 !important; }
  .flowband.play .fb-node { opacity: 1 !important; transform: none !important; }
  .flowband.play .fb-edge { stroke-dashoffset: 0 !important; }
  .flowband.play .fb-gtag { opacity: 1 !important; }
}