/* 2026-11-12 fin1m-buy-moments: the designed "moments" on the /buy/ and /sell/ timelines
   (template-parts/gen6-journey-moments.php), and the one-time reveal of the real pictures on the same line.
   - The finished still is the default render. It is what shows with scripts off, with reduced motion, and after a
     piece has played once. Motion runs only while js/gen6-punch-journey-line.js puts .g6m-run on the figure, and
     every animation starts from hidden and ends exactly on the still (fill-mode both), so nothing jumps.
   - Each piece lays itself out by its own width (container queries): narrow (the phone line, about 290px) stacks,
     wide (the desktop stage, about 560px and up) sits side by side.
   - Text inside a piece is 13px or more at every size (labels are .g6m-label, not *kicker / *eyebrow: gen6-quality.css
     forces those to 12px). Tokens only (gen6.css :root); no hex in this file.
   Auto-loaded by inc/gen6-owner-punch.php (glob css/gen6-punch-*.css). */

/* ---------- the frame every moment sits in ---------- */
[data-journey-line] .g6-journey-media--moment { margin: 18px 0 0; }
[data-journey-line] .g6m { container-type: inline-size; width: 100%; }
[data-journey-line] .g6m-inner { width: 100%; color: var(--g6-ink); font: 500 .9375rem/1.45 var(--g6-ui); text-align: left; }
/* the pieces are built from div and span only, so none of the line's p / li rules reach inside them; the one image
   (sell 5) is reset here against the stage's picture rules */
[data-journey-line] .g6-journey-media--moment .g6m img { flex: none; width: 100%; height: auto; min-height: 0; aspect-ratio: 16 / 9; object-fit: cover; object-position: 50% 50%; border-radius: 0; box-shadow: none; background: var(--g6-mist); }

.g6m-sheet {
  position: relative;
  padding: 20px 22px;
  border-radius: calc(var(--g6-radius) - 4px);
  background: var(--g6-paper);
  box-shadow: 0 1px 0 var(--g6-line), var(--g6-floating-shadow);
}
[data-journey-line] .g6m .g6m-label {
  margin: 0 0 12px;
  color: var(--g6-slate);
  font: 700 .8125rem/1.3 var(--g6-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
}
[data-journey-line] .g6m .g6m-title { margin: 0 0 6px; color: var(--g6-ink); font: 600 1.625rem/1.1 var(--g6-display); }
.g6m-check { flex: none; width: 22px; height: 22px; }
.g6m-check circle { fill: var(--g6-channel); }
.g6m-check path { fill: none; stroke: var(--g6-paper); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
[data-journey-line] .g6m .g6m-ticks > div { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--g6-line); font-weight: 600; }
[data-journey-line] .g6m .g6m-ticks > div:first-child { border-top: 0; }

/* ---------- buy 1: your first call (the buyer's phone, on the call) ---------- */
.g6m-call { display: grid; justify-items: start; }
.g6m-call .g6m-phone {
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 10px;
  width: 100%;
  max-width: 300px;
  padding: 18px 20px 22px;
  border-radius: 34px;
  background: var(--g6-ink);
  color: var(--g6-paper);
  box-shadow: inset 0 0 0 6px color-mix(in srgb, var(--g6-paper) 8%, transparent), var(--g6-floating-shadow);
}
.g6m-phone-top { display: flex; justify-content: space-between; font: 600 .8125rem/1.2 var(--g6-ui); }
.g6m-call .g6m-phone-top { justify-self: stretch; color: color-mix(in srgb, var(--g6-paper) 80%, transparent); }
.g6m-live { display: inline-flex; align-items: center; gap: 6px; }
.g6m-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--g6-live-teal); }
.g6m-avatar { display: grid; place-items: center; width: 76px; height: 76px; margin-top: 14px; border-radius: 50%; background: color-mix(in srgb, var(--g6-paper) 14%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--g6-paper) 6%, transparent); color: var(--g6-paper); font: 600 1.75rem/1 var(--g6-display); letter-spacing: .02em; }
.g6m-call .g6m-who { color: var(--g6-paper); font: 600 1.75rem/1.1 var(--g6-display); text-align: center; }
.g6m-time { color: color-mix(in srgb, var(--g6-paper) 85%, transparent); font: 600 .9375rem/1.2 var(--g6-ui); font-variant-numeric: tabular-nums; }
.g6m-wave { display: flex; align-items: center; justify-content: center; gap: 5px; height: 40px; margin: 8px 0 4px; }
.g6m-wave i { width: 5px; height: 100%; border-radius: 3px; background: color-mix(in srgb, var(--g6-paper) 60%, transparent); transform-origin: 50% 50%; transform: scaleY(.45); }
.g6m-wave i:nth-child(3n+1) { transform: scaleY(.3); }
.g6m-wave i:nth-child(4n+2) { transform: scaleY(.75); }
.g6m-wave i:nth-child(6) { transform: scaleY(.95); }
/* a plain label, not a pill or a button: nothing in a sample looks like it can be pressed */
.g6m-how { display: inline-flex; align-items: center; gap: 8px; color: color-mix(in srgb, var(--g6-paper) 85%, transparent); font: 700 .8125rem/1.2 var(--g6-ui); letter-spacing: .06em; text-transform: uppercase; }
.g6m-how::before { content: ""; width: 18px; height: 1px; background: currentColor; }
.g6m-how::after { content: ""; width: 18px; height: 1px; background: currentColor; }
@container (min-width: 520px) {
  .g6m-call .g6m-phone { max-width: 270px; min-height: 336px; padding: 18px 20px 20px; gap: 11px; }
  .g6m-avatar { margin-top: 6px; }
}

/* ---------- buy 5: make your offer (fin1n: the home you love, and your offer coming together on it) ----------
   Phone: the photo on top, the offer sheet lifted over its lower edge. Desktop stage: the photo fills most of the
   piece and the sheet sits over its right side. The sheet is opaque paper, so no words ever sit on the photo. */
.g6m-love { position: relative; display: grid; }
[data-journey-line] .g6-journey-media--moment .g6m .g6m-love-photo img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 35% 55%; }
.g6m-love-photo { overflow: hidden; aspect-ratio: 16 / 10; border-radius: calc(var(--g6-radius) - 4px); background: var(--g6-mist); box-shadow: var(--g6-floating-shadow); }
.g6m-deal { position: relative; z-index: 1; margin: -40px 12px 0; padding: 18px 20px 18px; }
[data-journey-line] .g6m .g6m-deal .g6m-title { margin: 0 0 8px; font-size: 1.625rem; }
.g6m-terms > div { display: grid; gap: 1px; padding: 8px 0; border-top: 1px solid var(--g6-line); }
.g6m-terms > div > span { color: var(--g6-slate); font: 600 .8125rem/1.3 var(--g6-ui); }
.g6m-terms > div > b { color: var(--g6-ink); font: 600 .9375rem/1.35 var(--g6-ui); }
.g6m-sent { display: flex; align-items: center; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 2px solid var(--g6-ink); }
.g6m-sent b { color: var(--g6-channel); font: 700 .9375rem/1.3 var(--g6-ui); }
.g6m-cal {
  display: grid;
  place-items: center;
  align-content: center;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--g6-mist);
  color: var(--g6-ink);
  font: 600 1.125rem/1 var(--g6-display);
}
.g6m-cal b { color: var(--g6-channel); font: 700 .8125rem/1.1 var(--g6-ui); text-transform: uppercase; letter-spacing: .04em; }
@container (min-width: 520px) {
  .g6m-love { display: block; height: 330px; }
  .g6m-love-photo { position: absolute; left: 0; top: 0; bottom: 0; width: 66%; aspect-ratio: auto; }
  /* translate, not transform, so the one-time motion (transform) never fights the position */
  .g6m-deal { position: absolute; right: 0; top: 50%; width: 44%; margin: 0; padding: 18px 22px 16px; translate: 0 -50%; }
  [data-journey-line] .g6m .g6m-deal .g6m-title { margin-bottom: 6px; }
  .g6m-terms > div { padding: 6px 0; }
}

/* ---------- buy 6: under contract (the key dates) ---------- */
[data-journey-line] .g6m .g6m-strip { position: relative; display: grid; gap: 0; }
.g6m-strip > div { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 8px 0; }
.g6m-strip .g6m-cal { grid-row: span 2; }
.g6m-what { font-weight: 700; }
.g6m-note { color: var(--g6-channel); font: 700 .8125rem/1.3 var(--g6-ui); }
.g6m-strip > div.is-last .g6m-cal { background: var(--g6-ink); color: var(--g6-paper); }
.g6m-strip > div.is-last .g6m-cal b { color: color-mix(in srgb, var(--g6-paper) 80%, transparent); }
.g6m-strip::before { content: ""; position: absolute; left: 22px; top: 24px; bottom: 24px; width: 2px; background: color-mix(in srgb, var(--g6-ink) 14%, transparent); }
@container (min-width: 520px) {
  .g6m-dates .g6m-sheet { padding: 26px 28px 22px; }
  [data-journey-line] .g6m .g6m-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 6px 0 4px; }
  .g6m-strip > div { grid-template-columns: 1fr; grid-template-rows: 60px auto auto; align-content: start; align-self: start; justify-items: center; row-gap: 6px; padding: 0 4px; text-align: center; }
  .g6m-strip .g6m-cal { grid-row: auto; width: 60px; height: 60px; font-size: 1.375rem; position: relative; z-index: 1; }
  .g6m-strip::before { left: 12.5%; right: 12.5%; top: 29px; bottom: auto; width: auto; height: 2px; }
}

/* ---------- buy 8: after you move in (a text thread on the buyer's phone) ---------- */
.g6m-after { display: grid; justify-items: start; }
.g6m-thread {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  padding: 14px 14px 16px;
  border-radius: 28px;
  background: var(--g6-paper);
  box-shadow: inset 0 0 0 1px var(--g6-line), var(--g6-floating-shadow);
}
.g6m-thread .g6m-phone-top { padding: 0 4px 8px; border-bottom: 1px solid var(--g6-line); color: var(--g6-slate); }
.g6m-thread .g6m-phone-top span:last-child { color: var(--g6-ink); font-weight: 700; }
.g6m-stamp { justify-self: center; color: var(--g6-slate); font: 600 .8125rem/1.3 var(--g6-ui); }
.g6m-bub { justify-self: start; max-width: 84%; padding: 9px 13px; border-radius: 18px 18px 18px 6px; background: var(--g6-mist); color: var(--g6-ink); font: 500 .9375rem/1.4 var(--g6-ui); }
.g6m-bub.is-you { justify-self: end; border-radius: 18px 18px 6px 18px; background: var(--g6-channel); color: var(--g6-paper); }
.g6m-card { display: grid; gap: 1px; justify-self: start; min-width: 60%; padding: 8px 14px; border-radius: 14px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g6-ink) 18%, transparent); background: var(--g6-paper); }
.g6m-card b { font-weight: 700; }
.g6m-card span { color: var(--g6-slate); font-size: .875rem; }
/* the typing dots show only while the piece plays, then leave no gap */
.g6m-typing { display: none; justify-self: start; gap: 4px; padding: 10px 13px; border-radius: 18px; background: var(--g6-mist); }
.g6m-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--g6-slate); }
.g6m-run .g6m-typing { display: inline-flex; }

/* ---------- sell 1: the written plan ---------- */
.g6m-plan .g6m-paper { margin-bottom: 16px; padding: 22px 22px 20px; }
[data-journey-line] .g6m .g6m-sub { margin: 0 0 16px; color: var(--g6-slate); font-size: .875rem; }
.g6m-mini { margin-bottom: 16px !important; }
.g6m-mini > div { display: grid; padding: 5px 0; border-top: 1px solid var(--g6-line); }
.g6m-mini > div:first-child { border-top: 0; padding-top: 0; }
.g6m-mini span { color: var(--g6-slate); font-size: .875rem; }
.g6m-sum { display: grid; gap: 0; max-width: 340px; }
.g6m-sum > div { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: baseline; padding: 6px 0; }
.g6m-sum > div > span:first-child { color: var(--g6-slate); font: 600 .875rem/1.3 var(--g6-ui); }
.g6m-sum > div > span:last-child { font-weight: 600; }
.g6m-sum > div.is-total { margin-top: 4px; padding-top: 10px; border-top: 2px solid var(--g6-ink); }
.g6m-sum > div.is-total b { color: var(--g6-channel); font: 600 1.375rem/1.15 var(--g6-display); }
/* a sheet of paper on the table: a second sheet peeks out under it */
.g6m-plan .g6m-paper { box-shadow: 0 1px 0 var(--g6-line), 7px 9px 0 -1px var(--g6-paper), 7px 9px 0 0 color-mix(in srgb, var(--g6-ink) 12%, transparent), var(--g6-floating-shadow); }
@container (min-width: 520px) {
  .g6m-plan .g6m-paper { width: 94%; margin: 0 auto 16px; padding: 22px 30px 20px; }
  .g6m-mini { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .g6m-mini > div { border-top: 0; padding-top: 0; }
}

/* ---------- sell 2: pick the price ---------- */
.g6m-price .g6m-sheet { padding: 22px 22px 20px; }
.g6m-scale { position: relative; height: 96px; margin: 4px 6px 0; }
.g6m-axis { position: absolute; left: 0; right: 0; top: 46px; height: 2px; background: color-mix(in srgb, var(--g6-ink) 22%, transparent); }
.g6m-dot { position: absolute; top: 39px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; }
.g6m-dot.is-sold, .g6m-k.is-sold { background: var(--g6-ink); }
.g6m-dot.is-now, .g6m-k.is-now { background: var(--g6-paper); box-shadow: inset 0 0 0 3px var(--g6-slate); }
.g6m-p1 { left: 10%; } .g6m-p2 { left: 24%; } .g6m-p3 { left: 38%; }
.g6m-p4 { left: 63%; } .g6m-p5 { left: 77%; } .g6m-p6 { left: 91%; }
.g6m-yours { position: absolute; left: 50.5%; top: 0; bottom: 30px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--g6-channel); }
.g6m-yours b { position: absolute; top: -2px; left: 50%; transform: translateX(-50%); padding: 3px 10px; border-radius: 999px; background: var(--g6-channel); color: var(--g6-paper); font: 700 .8125rem/1.3 var(--g6-ui); white-space: nowrap; }
.g6m-ends { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; color: var(--g6-slate); font: 600 .8125rem/1.2 var(--g6-ui); }
[data-journey-line] .g6m .g6m-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 14px 0 0; color: var(--g6-slate); font-size: .875rem; }
.g6m-key > span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.g6m-k { display: inline-block; flex: none; width: 12px; height: 12px; border-radius: 50%; }
.g6m-take { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--g6-line); }
.g6m-take .g6m-label { margin-bottom: 8px !important; }
.g6m-split { display: flex; height: 16px; border-radius: 8px; overflow: hidden; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g6-ink) 18%, transparent); }
.g6m-split i { flex: 0 0 88%; background: var(--g6-channel); transform-origin: 0 50%; }
.g6m-split em { flex: 1 1 auto; background: repeating-linear-gradient(135deg, var(--g6-mist) 0 4px, color-mix(in srgb, var(--g6-ink) 14%, transparent) 4px 6px); }
.g6m-split-k { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: .875rem; }
.g6m-split-k b { color: var(--g6-channel); font-weight: 700; }
.g6m-split-k span { color: var(--g6-slate); font-weight: 600; text-align: right; }
@container (min-width: 520px) {
  .g6m-price .g6m-sheet { padding: 26px 30px 24px; }
  .g6m-scale { height: 104px; }
}

/* ---------- sell 3: small fixes ---------- */
.g6m-fixes .g6m-pad { padding: 22px 22px 18px; }
.g6m-fixes .g6m-title { margin-bottom: 10px !important; }
[data-journey-line] .g6m .g6m-then { margin-top: 10px; padding-top: 12px; border-top: 1px dashed color-mix(in srgb, var(--g6-ink) 25%, transparent); color: var(--g6-slate); font-weight: 600; }
@container (min-width: 520px) {
  .g6m-fixes .g6m-pad { padding: 26px 32px 22px; }
}

/* ---------- sell 5: list your home ---------- */
.g6m-list { position: relative; display: grid; gap: 14px; }
.g6m-home { position: relative; overflow: hidden; border-radius: calc(var(--g6-radius) - 4px); background: var(--g6-paper); box-shadow: var(--g6-floating-shadow); }
.g6m-home > div { display: grid; gap: 2px; padding: 12px 16px 14px; }
.g6m-home b { font: 600 1.375rem/1.15 var(--g6-display); }
.g6m-home > div > span:last-child { color: var(--g6-slate); font-size: .875rem; }
.g6m-pill { justify-self: start; margin-bottom: 4px; padding: 2px 10px; border-radius: 999px; background: var(--g6-ink); color: var(--g6-paper); font: 700 .8125rem/1.4 var(--g6-ui); }
.g6m-wires { display: none; }
.g6m-out { display: grid; gap: 8px; }
.g6m-out > div { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 14px; border-radius: 12px; background: var(--g6-paper); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--g6-ink) 14%, transparent); font-weight: 700; }
.g6m-out > div::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--g6-channel); }
@container (min-width: 520px) {
  .g6m-list { display: block; height: 340px; }
  /* positions use translate, so the one-time motion (transform) never fights them */
  .g6m-home { position: absolute; left: 0; top: 50%; width: 44%; translate: 0 -50%; }
  .g6m-wires { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
  /* each wire has pathLength=1, so a 1-on/1-off dash slid by 1 hides it and by 0 shows it whole (no non-scaling-stroke:
     it breaks the dash in Chromium) */
  .g6m-w { fill: none; stroke: color-mix(in srgb, var(--g6-channel) 70%, transparent); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  .g6m-out { position: absolute; left: 68.75%; right: 0; top: 0; bottom: 0; display: block; }
  .g6m-out > div { position: absolute; left: 0; right: 0; min-height: 44px; translate: 0 -50%; font-size: .875rem; line-height: 1.25; }
  .g6m-o1 { top: 12.35%; } .g6m-o2 { top: 31.18%; } .g6m-o3 { top: 50%; } .g6m-o4 { top: 68.82%; } .g6m-o5 { top: 87.65%; }
}

/* ---------- sell 6: weekly updates ---------- */
.g6m-update .g6m-sheet { padding: 20px 22px 22px; }
.g6m-three { display: grid; gap: 14px; margin-top: 12px; }
.g6m-three > div { padding-top: 12px; border-top: 1px solid var(--g6-line); }
.g6m-three .g6m-label { margin-bottom: 6px !important; }
[data-journey-line] .g6m .g6m-big { font: 600 3rem/1 var(--g6-display); }
[data-journey-line] .g6m .g6m-small { color: var(--g6-slate); font-size: .875rem; }
[data-journey-line] .g6m .g6m-q { margin-bottom: 6px; font: 500 1.125rem/1.3 var(--g6-display); }
[data-journey-line] .g6m .g6m-q.is-plain { font: 600 .9375rem/1.45 var(--g6-ui); }
@container (min-width: 520px) {
  .g6m-update .g6m-sheet { padding: 24px 28px 26px; }
  .g6m-three { grid-template-columns: .7fr 1.25fr 1.05fr; gap: 22px; }
}

/* ---------- sell 7: pick the offer ---------- */
.g6m-offers { display: grid; gap: 10px; }
.g6m-col { position: relative; padding: 14px 16px; border-radius: calc(var(--g6-radius) - 4px); background: var(--g6-paper); box-shadow: inset 0 0 0 1px var(--g6-line), 0 8px 24px color-mix(in srgb, var(--g6-ink) 8%, transparent); }
.g6m-col.is-pick { box-shadow: inset 0 0 0 2px var(--g6-channel), var(--g6-floating-shadow); }
[data-journey-line] .g6m .g6m-col-h { margin-bottom: 6px; font: 600 1.375rem/1.1 var(--g6-display); }
[data-journey-line] .g6m .g6m-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 10px; padding: 5px 0; }
.g6m-row > span:first-child { color: var(--g6-slate); font-size: .875rem; }
.g6m-pbar { position: relative; display: block; height: 10px; border-radius: 5px; background: var(--g6-mist); overflow: hidden; }
.g6m-pbar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--g6-ink); transform-origin: 0 50%; }
.g6m-pw3 i { width: 96%; } .g6m-pw2 i { width: 84%; } .g6m-pw1 i { width: 70%; }
[data-journey-line] .g6m .g6m-counter { margin-top: 8px; color: var(--g6-channel); font: 700 .8125rem/1.3 var(--g6-ui); }
[data-journey-line] .g6m .g6m-chose { position: absolute; top: -12px; right: 12px; padding: 3px 10px; border-radius: 999px; background: var(--g6-paper); box-shadow: inset 0 0 0 2px var(--g6-channel); color: var(--g6-channel); font: 700 .8125rem/1.3 var(--g6-ui); }
@container (min-width: 520px) {
  .g6m-offers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 14px; padding-top: 14px; }
  [data-journey-line] .g6m .g6m-row { grid-template-columns: 1fr; gap: 3px; padding: 7px 0; }
  .g6m-col { padding: 18px 18px 16px; }
  .g6m-col.is-pick { translate: 0 -8px; }
}

/* ---------- buy 2: one home card from the real saved search (fin1m, review J7 and J8) ----------
   One card, shown at about 1.35 times the portal's own size (460px on the desktop stage) so its words read without zooming; on the phone line
   it sits in the text column like every other picture (no break-out over the rail). */
[data-journey-line] .g6-journey-media--card picture { display: block; }
[data-journey-line] .g6-journey-media--card img { width: 100%; max-width: 420px; height: auto; aspect-ratio: auto; object-fit: contain; border-radius: 14px; }
/* phone: a tighter crop of the same card (its left part: photo, price, beds, baths, size and address) fills the
   text column, so the words in it are about 15px; nothing is redrawn, only cropped */
@media (min-width: 960px) {
  .g6-journey--line .g6-journey-media--card { align-items: center; }
  .g6-journey--line .g6-journey-media--card img { flex: none; width: 460px; max-width: 460px; height: auto; }
}

/* ---------- desktop stage: the moment fills the picture column ---------- */
@media (min-width: 960px) {
  /* the piece sits at the top of the picture column, level with the step's words, and its caption follows it;
     a narrow piece (a phone, a thread, one card) is centred in the column, so no stop leaves an empty side */
  .g6-journey--line .g6-journey-media--moment { justify-content: flex-start; }
  .g6-journey--line .g6-journey-media--moment .g6m { flex: 0 1 auto; display: flex; justify-content: flex-start; min-height: 0; }
  .g6-journey--line .g6-journey-media--moment figcaption,
  .g6-journey--line .g6-journey-media--card figcaption { text-align: center; }
  .g6-journey--line .g6m-call, .g6-journey--line .g6m-after { justify-items: center; }
  .g6-journey--line .g6-journey-media--moment .g6m-inner { max-width: none; }
}

/* ---------- motion: once, only while .g6m-run is on (the still above is the default) ---------- */
.g6m-run .g6m-in { animation: g6mIn 520ms cubic-bezier(.22, 1, .36, 1) both; }
.g6m-run .g6m-pop { animation: g6mPop 560ms cubic-bezier(.22, 1, .36, 1) both; }
.g6m-run .g6m-slide { animation: g6mSlide 900ms cubic-bezier(.22, 1, .36, 1) both; }
.g6m-run .g6m-grow { animation: g6mGrow 700ms cubic-bezier(.22, 1, .36, 1) both; }
.g6m-run .g6m-w { animation: g6mDraw 700ms ease-out both; }
.g6m-run .g6m-wave i { animation: g6mWave 520ms ease-in-out 4 alternate; }
.g6m-run .g6m-wave i:nth-child(2n) { animation-delay: 180ms; }
.g6m-run .g6m-wave i:nth-child(3n) { animation-delay: 340ms; }
.g6m-run .g6m-d1 { animation-delay: 300ms; }
.g6m-run .g6m-d2 { animation-delay: 600ms; }
.g6m-run .g6m-d3 { animation-delay: 900ms; }
.g6m-run .g6m-d4 { animation-delay: 1200ms; }
.g6m-run .g6m-d5 { animation-delay: 1500ms; }
.g6m-run .g6m-d6 { animation-delay: 1800ms; }
.g6m-run .g6m-d7 { animation-delay: 2100ms; }
/* buy 8: the typing dots show from 300ms to 900ms, then give way to the reply */
.g6m-run .g6m-blink { animation: g6mBlink 600ms ease-in-out both; }
.g6m-run .g6m-blink.g6m-d1 { animation-delay: 300ms; }
@keyframes g6mBlink { 0% { opacity: 0; } 15%, 85% { opacity: 1; } 100% { opacity: 0; display: none; } }
/* a real picture on the line comes in once too, so every stop arrives the same way */
.g6m-run.g6-journey-media:not(.g6-journey-media--moment) img { animation: g6mPhoto 900ms cubic-bezier(.22, 1, .36, 1) both; }
@keyframes g6mIn { from { opacity: 0; transform: translateY(10px); } }
@keyframes g6mPop { from { opacity: 0; transform: scale(.94); } }
@keyframes g6mSlide { from { opacity: 0; left: 8%; } }
@keyframes g6mGrow { from { transform: scaleX(0); } }
@keyframes g6mDraw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes g6mWave { to { transform: scaleY(1); } }
@keyframes g6mPhoto { from { opacity: 0; transform: scale(1.025); } }
@media (prefers-reduced-motion: reduce) {
  .g6m-run *, .g6m-run.g6-journey-media img { animation: none !important; }
}