/* The Autoflowly flow — shared by the homepage hero and the rendered videos
   (motion/). Sizes are in em so a video can scale the whole thing by setting
   one font-size. State is two classes per node: .on (has happened) and .now
   (is happening). The thread fill follows --p (0–1).

   This file is the look only (no transitions, keyframes or transforms) so a
   video can drive the same elements from a seekable timeline. The site adds
   its motion with flow-motion.css.

   Identity: warm off-white, ink #1b1b1f, one cyan thread (#06b6d4 → #0891b2),
   Inter, the page's single easing. No dark surfaces, no second accent. */
.af-flow {
  --ink: #1b1b1f; --ink-2: #4b4a48; --ink-3: #8a8784;
  --cyan: #06b6d4; --cyan-d: #0891b2; --cyan-l: #cffafe;
  --line: rgba(25,25,29,.09); --card: #fff; --surface: #fff;
  --ease: cubic-bezier(.16,1,.3,1);
  --p: 0;
  container: af-flow / inline-size;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 15px; color: var(--ink); text-align: left;
  position: relative;
}
.af-flow *, .af-flow *::before, .af-flow *::after { box-sizing: border-box; }

.af-flow-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.4em; flex-wrap: wrap; }
.af-flow-kicker { display: inline-flex; align-items: center; gap: .6em; font-size: .8em; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0; }
.af-flow-kicker::before { content: ''; width: .55em; height: .55em; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 .3em rgba(6,182,212,.16); }
.af-flow-trades { display: flex; gap: .4em; flex-wrap: wrap; }
.af-flow-trade {
  font: inherit; font-size: .87em; font-weight: 500; color: var(--ink-2); cursor: pointer;
  padding: .45em .95em; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7);
}
.af-flow-trade:hover { border-color: rgba(25,25,29,.22); color: var(--ink); }
.af-flow-trade[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.af-flow-trade:focus-visible { outline: 2px solid var(--cyan-d); outline-offset: 2px; }

/* The thread: a hairline through the five step dots, filled in cyan up to --p,
   with a bright spark riding its end. */
.af-flow-row { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1em; }
/* JS measures the dots and sets left/top/width/height exactly; these are the
   fallbacks. */
.af-flow-track { position: absolute; left: 1.05em; width: calc(80% + .8em); top: 1.05em; height: 2px; margin-top: -1px; background: var(--line); border-radius: 2px; pointer-events: none; }
.af-flow-fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--p) * 100%); border-radius: 2px; background: linear-gradient(90deg, var(--cyan-l), var(--cyan) 40%, var(--cyan-d)); }
.af-flow-spark { position: absolute; top: 50%; left: calc(var(--p) * 100%); width: .7em; height: .7em; margin: -.35em 0 0 -.35em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .2em var(--cyan), 0 0 1.2em .3em rgba(6,182,212,.55); opacity: 0; }
.af-flow.is-running .af-flow-spark { opacity: 1; }
.af-flow-rtl .af-flow-fill { inset: 0 0 0 auto; background: linear-gradient(270deg, var(--cyan-l), var(--cyan) 40%, var(--cyan-d)); }
.af-flow-rtl .af-flow-spark { left: auto; right: calc(var(--p) * 100%); margin: -.35em -.35em 0 0; transition: right .9s var(--ease), top .9s var(--ease), opacity .3s; }

/* A step that has not happened yet: faded card, quiet label. Only the card
   moves; the dots stay on the thread and the labels stay opaque over it. */
.af-flow-node { position: relative; min-width: 0; }
.af-flow-node .af-flow-card { opacity: .32; filter: saturate(0); }
.af-flow-node.on .af-flow-card { opacity: 1; filter: none; }
.af-flow-node:not(.on) .af-flow-label { color: #918e8b; }
.af-flow-step { display: flex; align-items: center; gap: .25em; margin-bottom: .85em; }
.af-flow-dot { position: relative; z-index: 1; flex: 0 0 auto; width: 2.1em; height: 2.1em; border-radius: 50%; display: grid; place-items: center; font-size: 1em; font-weight: 600; background: #fff; color: var(--ink-3); border: 1px solid var(--line); }
.af-flow-node.on .af-flow-dot { background: var(--ink); color: #fff; border-color: var(--ink); }
.af-flow-node.now .af-flow-dot { background: var(--cyan-d); border-color: var(--cyan-d); box-shadow: 0 0 0 .35em rgba(6,182,212,.18); }
/* The label sits on the thread, so it carries the surface colour behind it. */
.af-flow-label { position: relative; z-index: 1; padding: 0 .6em 0 .45em; background: var(--surface, #fff); font-size: .8em; font-weight: 600; letter-spacing: .02em; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.af-flow-card { min-height: 8.4em; padding: .95em 1em; border-radius: 1em; background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 .8em 2em -1.2em rgba(15,23,42,.14); }
.af-flow-node.now .af-flow-card { border-color: rgba(8,145,178,.45); box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 1.2em 2.6em -1.2em rgba(8,145,178,.35); }

/* 1 — the prompt, typed */
.af-flow-prompt { font-size: .95em; line-height: 1.45; color: var(--ink); min-height: 4.3em; }
.af-flow-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; vertical-align: -.15em; background: var(--cyan-d); }
.af-flow-node:not(.now) .af-flow-caret { opacity: 0; }
.af-flow-send { display: flex; justify-content: flex-end; margin-top: .5em; }
.af-flow-send span { width: 1.9em; height: 1.9em; border-radius: .55em; display: grid; place-items: center; background: var(--ink); color: #fff; font-size: .85em; }

/* 2 — the live address and the site behind it */
.af-flow-url { display: flex; align-items: center; gap: .45em; padding: .4em .6em; border-radius: .6em; background: #f6f5f2; font-size: .74em; color: var(--ink-2); white-space: nowrap; }
.af-flow-url span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.af-flow-url b { color: var(--ink); font-weight: 600; }
.af-flow-lock { flex: 0 0 auto; width: .7em; height: .8em; border-radius: .15em; background: #16a34a; position: relative; margin-top: .2em; }
.af-flow-lock::before { content: ''; position: absolute; left: .12em; right: .12em; top: -.32em; height: .42em; border: .12em solid #16a34a; border-bottom: 0; border-radius: .3em .3em 0 0; }
.af-flow-site { margin-top: .7em; display: flex; align-items: center; justify-content: space-between; gap: .6em; }
.af-flow-site strong { font-size: 1em; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.af-flow-site em { flex: 0 0 auto; font-style: normal; font-size: .75em; font-weight: 600; padding: .45em .75em; border-radius: .5em; background: var(--ink); color: #fff; }
.af-flow-live { display: inline-flex; align-items: center; gap: .4em; margin-top: .75em; font-size: .75em; font-weight: 600; color: #15803d; }
.af-flow-live i { width: .55em; height: .55em; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 .25em rgba(34,197,94,.18); }

/* 3 and 4 — the conversation */
.af-flow-msg { font-size: .9em; line-height: 1.45; padding: .7em .85em; border-radius: .9em; }
.af-flow-msg.customer { background: #f2f1ee; border-bottom-left-radius: .25em; }
.af-flow-msg.ai { background: #ecfeff; color: #0b3b47; border-bottom-left-radius: .25em; }
.af-flow-who { display: flex; align-items: center; gap: .5em; margin-bottom: .6em; font-size: .75em; font-weight: 600; color: var(--ink-3); }
.af-flow-who i { width: 1.9em; height: 1.9em; border-radius: 50%; display: grid; place-items: center; font-style: normal; background: #e9e7e3; color: var(--ink-2); font-size: .95em; }
.af-flow-who img { width: 1.9em; height: 1.9em; border-radius: 50%; }
.af-flow-tag { display: inline-flex; align-items: center; gap: .35em; margin-top: .65em; font-size: .75em; font-weight: 600; padding: .35em .7em; border-radius: 999px; background: var(--ink); color: #fff; opacity: 0; }
.af-flow-node.on .af-flow-tag { opacity: 1; }

/* 5 — the payment, as the owner's phone shows it */
.af-flow-pay-top { display: flex; align-items: center; gap: .5em; font-size: .75em; font-weight: 600; color: var(--ink-3); }
.af-flow-pay-top img { width: 1.7em; height: 1.7em; border-radius: .45em; }
.af-flow-amount { margin-top: .5em; font-size: 2em; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.af-flow-payline { margin-top: .35em; font-size: .8em; color: var(--ink-2); line-height: 1.35; }
.af-flow-node.now .af-flow-amount { color: var(--cyan-d); }

/* The two doors above can point at their half of the story. */
.af-flow[data-focus="build"] :is([data-step="3"], [data-step="4"], [data-step="5"]) .af-flow-card,
.af-flow[data-focus="run"] :is([data-step="1"], [data-step="2"]) .af-flow-card { opacity: .3; filter: saturate(0); }
.af-flow.is-leaving .af-flow-row { opacity: 0; }

.af-flow-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Narrow: the five steps stack and the thread runs down the left. A container
   query in em, so it follows the flow's own width and scale — a phone, or a
   vertical video at a bigger font-size. */
@container af-flow (max-width: 56em) {
  .af-flow-row { grid-template-columns: 1fr; gap: .9em; }
  .af-flow-track { left: 1.05em; top: 1.05em; bottom: 1.05em; width: 2px; height: auto; margin-left: -1px; }
  .af-flow-fill { inset: 0 0 auto 0; width: auto; height: calc(var(--p) * 100%); }
  .af-flow-spark { left: 50%; top: calc(var(--p) * 100%); margin: -.35em 0 0 -.35em; }
  .af-flow-node { display: grid; grid-template-columns: 2.1em minmax(0, 1fr); column-gap: .85em; }
  .af-flow-step { display: contents; }
  .af-flow-dot { grid-row: 1 / span 2; }
  .af-flow-label { grid-column: 2; justify-self: start; max-width: 100%; margin: .5em 0 .5em; }
  .af-flow-card { grid-column: 2; min-height: 0; }
  .af-flow-prompt { min-height: 0; }
}