/* Distinct outcomes for every choice in the creator monetization walkthrough. */
.demo-section .flow-art-response {
  align-content: start;
  gap: 10px;
  padding: 12px;
}
.demo-section .flow-response-head > span { color: #f0c35e; font-size: .56rem; font-weight: 850; letter-spacing: .1em; }
.demo-section .flow-response-head > strong { color: #c9b990; font-size: .53rem; letter-spacing: .045em; text-align: right; }
.demo-section .flow-branch-view[hidden] { display: none !important; }
.demo-section .flow-branch-view {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
}
.demo-section .flow-branch-node {
  min-width: 0;
  min-height: 82px;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  align-items: center;
  column-gap: 7px;
  row-gap: 4px;
  padding: 8px;
  border: 1px solid rgba(232, 173, 67, .24);
  border-radius: 10px;
  background: linear-gradient(145deg, rgba(232, 173, 67, .09), rgba(16, 15, 13, .55));
}
.demo-section .flow-branch-icon {
  width: 28px;
  height: 28px;
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  border: 1px solid rgba(232, 173, 67, .4);
  border-radius: 8px;
  background: rgba(232, 173, 67, .12);
  color: #f0c35e;
}
.demo-section .flow-branch-icon svg { width: 17px; height: 17px; }
.demo-section .flow-branch-node > small,
.demo-section .flow-route-card > small { color: #e6ba59; font-size: .48rem; font-weight: 850; letter-spacing: .065em; line-height: 1.25; }
.demo-section .flow-branch-node > strong { color: #fff4dc; font-size: .63rem; line-height: 1.3; }
.demo-section .flow-branch-arrow {
  position: relative;
  align-self: center;
  height: 2px;
  background: rgba(232, 173, 67, .33);
}
.demo-section .flow-branch-arrow::after {
  position: absolute;
  top: -4px;
  right: -1px;
  width: 7px;
  height: 7px;
  border-top: 2px solid #f0c35e;
  border-right: 2px solid #f0c35e;
  content: "";
  transform: rotate(45deg);
}
.demo-section .flow-branch-view.is-replaying .flow-branch-node { animation: flow-node-in .34s cubic-bezier(.2,.75,.25,1) both; }
.demo-section .flow-branch-view.is-replaying .flow-branch-node:nth-of-type(2) { animation-delay: .1s; }
.demo-section .flow-branch-view.is-replaying .flow-branch-node:nth-of-type(3) { animation-delay: .2s; }
.demo-section .flow-branch-view.is-replaying .flow-branch-arrow { animation: flow-line-in .3s ease both; }
.demo-section .flow-branch-view.is-replaying .flow-branch-arrow:nth-of-type(2) { animation-delay: .12s; }

.demo-section .flow-live-dialogue { gap: 10px; }
.demo-section .flow-choice-route {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 20px minmax(0, 1fr);
  align-items: stretch;
  gap: 6px;
  padding: 10px;
  border: 1px solid rgba(232, 173, 67, .19);
  border-radius: 11px;
  background: rgba(0, 0, 0, .18);
}
.demo-section .flow-route-card {
  min-width: 0;
  min-height: 69px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 9px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .045), rgba(0, 0, 0, .2));
}
.demo-section .flow-route-card > strong { color: #fff3d9; font-size: .67rem; line-height: 1.25; }
.demo-section .flow-route-card > span { color: #bdb4a3; font-size: .56rem; line-height: 1.35; }
.demo-section .flow-route-card-featured { border-color: rgba(232, 173, 67, .45); background: linear-gradient(145deg, rgba(232, 173, 67, .13), rgba(14, 13, 11, .45)); }
.demo-section .flow-choice-route > i,
.demo-section .flow-journey-connector {
  position: relative;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(232, 173, 67, .32), #eab448);
}
.demo-section .flow-choice-route > i::after,
.demo-section .flow-journey-connector::after { position: absolute; top: -4px; right: -1px; width: 7px; height: 7px; border-top: 2px solid #f0c35e; border-right: 2px solid #f0c35e; content: ""; transform: rotate(45deg); }
.demo-section .flow-live-dialogue.is-replaying .flow-route-card { animation: flow-node-in .34s cubic-bezier(.2,.75,.25,1) both; }
.demo-section .flow-live-dialogue.is-replaying .flow-route-card:nth-of-type(2) { animation-delay: .11s; }
.demo-section .flow-live-dialogue.is-replaying .flow-route-card:nth-of-type(3) { animation-delay: .22s; }
.demo-section .flow-live-dialogue.is-replaying .flow-choice-route > i { animation: flow-line-in .3s ease both; }

.demo-section .flow-journey-illustration {
  min-width: 0;
  min-height: 112px;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) 30px minmax(130px, .8fr);
  align-items: center;
  gap: 9px;
  padding: 11px;
  overflow: hidden;
  border: 1px solid rgba(232, 173, 67, .22);
  border-radius: 11px;
  background: radial-gradient(ellipse at 18% 50%, rgba(232, 173, 67, .11), transparent 56%), rgba(0, 0, 0, .18);
}
.demo-section .flow-product-page,
.demo-section .flow-product-checkout,
.demo-section .flow-service-chat,
.demo-section .flow-service-agenda {
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 5px;
  padding: 9px 11px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 9px;
  background: linear-gradient(145deg, rgba(32, 30, 25, .96), rgba(17, 16, 14, .92));
}
.demo-section .flow-product-page { position: relative; padding-left: 16px; }
.demo-section .flow-product-page::before { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 9px 0 0 9px; background: #e9b84f; content: ""; }
.demo-section .flow-product-page > small,
.demo-section .flow-product-checkout > small,
.demo-section .flow-service-chat > small,
.demo-section .flow-service-agenda > small { color: #e6ba59; font-size: .5rem; font-weight: 850; letter-spacing: .07em; }
.demo-section .flow-product-page > strong,
.demo-section .flow-product-checkout > strong,
.demo-section .flow-service-chat > strong,
.demo-section .flow-service-agenda > strong { color: #fff3d9; font-size: .75rem; line-height: 1.3; }
.demo-section .flow-product-page > span,
.demo-section .flow-service-chat > span { color: #c4bbab; font-size: .62rem; line-height: 1.4; }
.demo-section .flow-product-checkout { justify-items: center; min-height: 80px; border-color: rgba(232, 173, 67, .4); text-align: center; background: linear-gradient(145deg, rgba(80, 59, 23, .75), rgba(25, 22, 17, .95)); }
.demo-section .flow-checkout-icon,
.demo-section .flow-agenda-icon { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgba(232, 173, 67, .6); border-radius: 50%; background: rgba(232, 173, 67, .14); color: #f1c45b; font-size: 1rem; }
.demo-section .flow-service-chat { position: relative; padding-left: 16px; border-radius: 12px 12px 12px 3px; }
.demo-section .flow-service-chat::before { position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: 12px 0 0 3px; background: #e9b84f; content: ""; }
.demo-section .flow-service-agenda { justify-items: center; min-height: 80px; text-align: center; border-color: rgba(232, 173, 67, .4); }
.demo-section .flow-offer-journey.is-replaying .flow-journey-illustration > * { animation: flow-node-in .36s cubic-bezier(.2,.75,.25,1) both; }
.demo-section .flow-offer-journey.is-replaying .flow-journey-illustration > :nth-child(2) { animation-delay: .13s; }
.demo-section .flow-offer-journey.is-replaying .flow-journey-illustration > :nth-child(3) { animation-delay: .22s; }
.demo-section .flow-offer-journey.is-replaying .flow-journey-connector { animation: flow-line-in .31s ease both; }

@media (max-width: 560px) {
  .demo-section .flow-art-response { gap: 8px; padding: 9px; }
  .demo-section .flow-branch-view,
  .demo-section .flow-choice-route { grid-template-columns: minmax(0, 1fr) 12px minmax(0, 1fr) 12px minmax(0, 1fr); gap: 4px; }
  .demo-section .flow-branch-node { min-height: 78px; grid-template-columns: 21px minmax(0, 1fr); column-gap: 5px; padding: 6px; }
  .demo-section .flow-branch-icon { width: 21px; height: 21px; border-radius: 6px; }
  .demo-section .flow-branch-icon svg { width: 14px; height: 14px; }
  .demo-section .flow-branch-node > small,
  .demo-section .flow-route-card > small { font-size: .43rem; }
  .demo-section .flow-branch-node > strong { font-size: .57rem; }
  .demo-section .flow-choice-route { padding: 7px; }
  .demo-section .flow-route-card { min-height: 74px; padding: 6px; }
  .demo-section .flow-route-card > strong { font-size: .59rem; }
  .demo-section .flow-route-card > span { font-size: .5rem; }
  .demo-section .flow-journey-illustration { grid-template-columns: minmax(0, 1.25fr) 18px minmax(100px, .8fr); gap: 6px; min-height: 104px; padding: 7px; }
  .demo-section .flow-product-page,
  .demo-section .flow-product-checkout,
  .demo-section .flow-service-chat,
  .demo-section .flow-service-agenda { padding: 7px; }
  .demo-section .flow-product-page > small,
  .demo-section .flow-product-checkout > small,
  .demo-section .flow-service-chat > small,
  .demo-section .flow-service-agenda > small { font-size: .43rem; }
  .demo-section .flow-product-page > strong,
  .demo-section .flow-product-checkout > strong,
  .demo-section .flow-service-chat > strong,
  .demo-section .flow-service-agenda > strong { font-size: .66rem; }
  .demo-section .flow-product-page > span,
  .demo-section .flow-service-chat > span { font-size: .53rem; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-section .flow-branch-view.is-replaying .flow-branch-node,
  .demo-section .flow-branch-view.is-replaying .flow-branch-arrow,
  .demo-section .flow-live-dialogue.is-replaying .flow-route-card,
  .demo-section .flow-live-dialogue.is-replaying .flow-choice-route > i,
  .demo-section .flow-offer-journey.is-replaying .flow-journey-illustration > * { animation: none; }
}

/* Give each choice its own accent and a separate drawn scene, not only a glow. */
.demo-section .flow-image-actions button {
  --flow-widget-rgb: 232, 173, 67;
  --flow-widget-accent: #e8ad43;
  border-color: rgba(var(--flow-widget-rgb), .3);
  background: linear-gradient(135deg, rgba(var(--flow-widget-rgb), .09), rgba(29, 27, 23, .96));
}
.demo-section .flow-image-actions button[data-flow-content-action="saved"],
.demo-section .flow-image-actions .flow-choice[data-flow-need="solo"],
.demo-section .flow-image-actions .flow-offer-option[data-flow-offer="kit"] {
  --flow-widget-rgb: 132, 191, 154;
  --flow-widget-accent: #9ccd8b;
}
.demo-section .flow-image-actions button[data-flow-content-action="question"] {
  --flow-widget-rgb: 232, 173, 67;
  --flow-widget-accent: #e8ad43;
}
.demo-section .flow-image-actions .flow-choice[data-flow-need="review"],
.demo-section .flow-image-actions .flow-offer-option[data-flow-offer="review"] {
  --flow-widget-rgb: 221, 142, 113;
  --flow-widget-accent: #df9276;
}
.demo-section .flow-image-actions button:hover,
.demo-section .flow-image-actions button:focus-visible,
.demo-section .flow-image-actions button[aria-pressed="true"] {
  border-color: rgba(var(--flow-widget-rgb), .92);
  background: linear-gradient(125deg, rgba(var(--flow-widget-rgb), .22), rgba(24, 22, 19, .97));
  box-shadow: 0 0 0 2px rgba(var(--flow-widget-rgb), .17), 0 9px 20px rgba(0, 0, 0, .25);
}
.demo-section .flow-image-actions button > svg,
.demo-section .flow-image-actions .flow-choice-glyph,
.demo-section .flow-image-actions .flow-offer-icon {
  border-color: rgba(var(--flow-widget-rgb), .48);
  background-color: rgba(var(--flow-widget-rgb), .12);
  color: var(--flow-widget-accent);
}
.demo-section .flow-image-actions button > svg { color: var(--flow-widget-accent); }
.demo-section .flow-image-actions .flow-choice > span:not(.flow-choice-glyph),
.demo-section .flow-image-actions .flow-offer-option strong { color: #fffaf0; }
.demo-section .flow-image-actions .flow-offer-option small,
.demo-section .flow-image-actions .flow-offer-option > b { color: var(--flow-widget-accent); }
.demo-section .flow-image-actions .flow-choice > small,
.demo-section .flow-image-actions .flow-offer-option em { color: #d2c8b8; }

.demo-section .flow-art-state {
  pointer-events: none;
  opacity: 0;
  transform: translateY(10px) scale(.975);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .22s ease, transform .34s cubic-bezier(.2, .75, .25, 1), filter .25s ease;
}
.demo-section .flow-stage[data-flow-current="0"][data-flow-signal="question"] [data-flow-art-variant="question"],
.demo-section .flow-stage[data-flow-current="0"][data-flow-signal="saved"] [data-flow-art-variant="saved"],
.demo-section .flow-stage[data-flow-current="1"][data-flow-need="solo"] [data-flow-art-variant="solo"],
.demo-section .flow-stage[data-flow-current="1"][data-flow-need="review"] [data-flow-art-variant="review"],
.demo-section .flow-stage[data-flow-current="2"][data-flow-offer="kit"] [data-flow-art-variant="kit"],
.demo-section .flow-stage[data-flow-current="2"][data-flow-offer="review"] [data-flow-art-variant="review"] {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.demo-section .flow-stage[data-flow-current="0"][data-flow-signal="saved"] [data-flow-art-variant="saved"] { filter: drop-shadow(0 6px 12px rgba(115, 195, 178, .14)); }
.demo-section .flow-stage[data-flow-current="0"][data-flow-signal="question"] [data-flow-art-variant="question"] { filter: drop-shadow(0 6px 12px rgba(232, 173, 67, .14)); }
.demo-section .flow-stage[data-flow-current="1"][data-flow-need="solo"] [data-flow-art-variant="solo"],
.demo-section .flow-stage[data-flow-current="2"][data-flow-offer="kit"] [data-flow-art-variant="kit"] { filter: drop-shadow(0 6px 12px rgba(156, 205, 139, .14)); }
.demo-section .flow-stage[data-flow-current="1"][data-flow-need="review"] [data-flow-art-variant="review"],
.demo-section .flow-stage[data-flow-current="2"][data-flow-offer="review"] [data-flow-art-variant="review"] { filter: drop-shadow(0 6px 12px rgba(223, 146, 118, .14)); }

@media (prefers-reduced-motion: reduce) {
  .demo-section .flow-art-state { transition: none; transform: none; }
}