/* Customer timeline after the first purchase: four moments on a line, the silence path underneath (includes/visuals/moments.php) */
.mo { --mo-side: 150px; --mo-gap: 22px; --mo-grey: #7d8a80; }

/* one grid: the lane label, the line row (start pill · four dots · loop pill), the cards, the silence row */
.mo-grid { display: grid; grid-template-columns: var(--mo-side) repeat(4, minmax(0, 1fr)) var(--mo-side); column-gap: var(--mo-gap); align-items: start; }
.mo-lane { grid-column: 2 / 6; grid-row: 1; margin: 0 0 14px; }
.mo-ms { display: contents; list-style: none; margin: 0; padding: 0; }
.mo-m { display: contents; }
.mo-m--1 > * { grid-column: 2; }
.mo-m--2 > * { grid-column: 3; }
.mo-m--3 > * { grid-column: 4; }
.mo-m--4 > * { grid-column: 5; }
.mo-when { grid-row: 2; }
.mo-acts { grid-row: 3; }
.mo-sil { grid-row: 4; }

/* the relationship line and its two ends */
.mo-line { grid-column: 1 / 7; grid-row: 2; display: block; height: 2px; margin-top: 14px; background: var(--forest); }
.mo-start { position: relative; z-index: 1; grid-column: 1; grid-row: 2; margin: 0; min-width: 0; }
.mo-start strong { display: inline-block; padding: 6px 14px; border-radius: 999px; background: var(--forest); color: var(--white); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mo-start span { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.mo-loop { position: relative; z-index: 1; grid-column: 6; grid-row: 2; margin: 0; min-width: 0; }
.mo-loop strong { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; border-radius: 999px; background: var(--mint); border: 1px solid var(--sage); color: var(--forest); font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.mo-loop .mo-ico { color: var(--green-text); }
.mo-loop span { display: block; margin-top: 10px; font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }

/* a moment: dot on the line, name, when */
.mo-when { position: relative; margin: 0; padding-top: 8px; min-width: 0; }
.mo-dot { position: relative; display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 3px var(--white); }
.section--paper .mo-dot { box-shadow: 0 0 0 3px var(--paper); }
.mo-dot--alert::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid var(--green-2); opacity: 0; animation: mo-pulse 2.4s ease-out 2.4s infinite; }
@keyframes mo-pulse { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.6); opacity: 0; } }
.mo-name { display: block; margin-top: 12px; font-family: var(--font-serif); font-size: 19px; line-height: 1.2; color: var(--forest); }
.mo-hint { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; color: var(--ink-2); }

/* the card: a useful message, an easy return */
.mo-acts { list-style: none; margin: 16px 0 0; padding: 4px 14px; min-width: 0; align-self: stretch; border-radius: var(--radius-sm); background: var(--paper); border: 1px solid var(--line); }
.section--paper .mo-acts { background: var(--white); }
.mo-act { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding: 11px 0; }
.mo-act + .mo-act { border-top: 1px solid var(--line); }
.mo-ico { flex: none; width: 16px; height: 16px; }
.mo-act .mo-ico { grid-row: 1 / 3; margin-top: 1px; color: var(--green-text); }
.mo-k { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--green-text); }
.mo-at { margin-top: 3px; font-size: 14px; line-height: 1.45; color: var(--ink); }

/* the silence path: grey notes stepping down along a dashed curve */
.mo-sl { grid-column: 1; grid-row: 4; margin: 28px 0 0; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.mo-drift { grid-column: 2 / 6; grid-row: 4; align-self: start; width: 100%; height: 110px; margin-top: 26px; overflow: visible; }
.mo-drift path { fill: none; stroke: var(--mo-grey); stroke-width: 2; stroke-dasharray: 5 6; }
.mo-sil { position: relative; z-index: 1; margin: 26px 0 0; width: fit-content; max-width: 100%; padding: 0 10px 0 0; font-size: 13px; line-height: 1.45; font-style: italic; color: var(--ink-2); }
.mo-sil::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 50%; border: 2px solid var(--mo-grey); vertical-align: -1px; }
.mo-sil-l { display: none; }
.mo-m--2 .mo-sil { padding-top: 10px; }
.mo-m--3 .mo-sil { padding-top: 20px; }
.mo-m--4 .mo-sil { padding-top: 30px; }

/* the few indicators read */
.mo-reads { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); }
.mo-reads .vz-label { margin: 0 0 14px; }
.mo-read-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px var(--mo-gap); }
.mo-read { display: grid; gap: 3px; min-width: 0; padding-left: 12px; border-left: 2px solid var(--green-2); }
.mo-read strong { font-size: 15px; line-height: 1.3; font-weight: 600; color: var(--forest); }
.mo-read span { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }

/* intro: the line draws from the first purchase, the moments light up one after the other, the loop closes,
   then the silence path appears and the indicators; the last dot keeps pulsing */
.js .vz-figure .mo-line { transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.2, .7, .2, 1) .15s; }
.js .vz-figure .mo-lane, .js .vz-figure .mo-start, .js .vz-figure .mo-when, .js .vz-figure .mo-loop, .js .vz-figure .mo-sl, .js .vz-figure .mo-sil, .js .vz-figure .mo-drift, .js .vz-figure .mo-reads { opacity: 0; transition: opacity .5s ease; }
.js .vz-figure .mo-acts { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
.js .vz-figure .mo-start { transition-delay: .1s; }
.js .vz-figure .mo-m--1 .mo-when { transition-delay: .35s; }
.js .vz-figure .mo-m--2 .mo-when { transition-delay: .55s; }
.js .vz-figure .mo-m--3 .mo-when { transition-delay: .75s; }
.js .vz-figure .mo-m--4 .mo-when { transition-delay: .95s; }
.js .vz-figure .mo-m--1 .mo-acts { transition-delay: .55s; }
.js .vz-figure .mo-m--2 .mo-acts { transition-delay: .75s; }
.js .vz-figure .mo-m--3 .mo-acts { transition-delay: .95s; }
.js .vz-figure .mo-m--4 .mo-acts { transition-delay: 1.15s; }
.js .vz-figure .mo-loop { transition-delay: 1.35s; }
.js .vz-figure .mo-sl, .js .vz-figure .mo-sil, .js .vz-figure .mo-drift { transition-delay: 1.75s; }
.js .vz-figure .mo-reads { transition-delay: 2.1s; }
.js .vz-figure.is-visible .mo-line, .js .vz-figure.is-visible .mo-acts { transform: none; }
.js .vz-figure.is-visible .mo-lane, .js .vz-figure.is-visible .mo-start, .js .vz-figure.is-visible .mo-when, .js .vz-figure.is-visible .mo-acts, .js .vz-figure.is-visible .mo-loop, .js .vz-figure.is-visible .mo-sl, .js .vz-figure.is-visible .mo-sil, .js .vz-figure.is-visible .mo-drift, .js .vz-figure.is-visible .mo-reads { opacity: 1; }

@media (max-width: 1099px) { .mo { --mo-side: 108px; --mo-gap: 14px; } .mo-name { font-size: 17px; } .mo-acts { padding: 2px 12px; } .mo-at { font-size: 13.5px; } .mo-start strong, .mo-loop strong { font-size: 12.5px; padding-inline: 10px; } .mo-start span, .mo-loop span { font-size: 12px; } .mo-loop .mo-ico { display: none; } }

/* phones: a vertical rail, the moments stacked, each card followed by its own silence note */
@media (max-width: 759px) {
  .mo-grid { display: block; }
  .mo-lane { margin-bottom: 16px; }
  .mo-line, .mo-drift, .mo-sl { display: none; }
  .mo-start { margin: 0 0 18px; }
  .mo-start span { display: inline; margin: 0 0 0 10px; }
  .mo-ms { display: block; margin-left: 7px; border-left: 2px solid var(--forest); }
  .mo-m { display: block; position: relative; padding: 0 0 24px 24px; }
  .mo-m > * { grid-column: auto; }
  .mo-when { padding-top: 0; position: static; }
  .mo-dot { position: absolute; left: -8px; top: 4px; }
  .mo-name { margin-top: 0; font-size: 18px; }
  .mo-acts { margin-top: 12px; }
  .mo-sil { margin-top: 12px; width: auto; padding: 0; }
  .mo-m--2 .mo-sil, .mo-m--3 .mo-sil, .mo-m--4 .mo-sil { padding-top: 0; }
  .mo-sil-l { display: inline; margin-right: 6px; font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; }
  .mo-loop { margin: 4px 0 0 7px; }
  .mo-loop span { display: inline; margin: 0 0 0 10px; }
  .mo-reads { margin-top: 30px; }
  .mo-read-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
  .js .vz-figure .mo-sl, .js .vz-figure .mo-sil, .js .vz-figure .mo-drift { transition-delay: 1.3s; }
  .js .vz-figure .mo-reads { transition-delay: 1.6s; }
}
@media (max-width: 419px) { .mo-read-list { grid-template-columns: minmax(0, 1fr); } }