/* Shop revenue diagram (homepage #shop, shop.html #burn): sources → payment → split.
   Same drafting-paper look as the original burn diagram. Prices come from the catalogue (js/revenue.js). */
.flow {
  --line: #4e6248;
  padding: 28px 24px 20px; border: 1px solid #35493b; border-radius: 6px;
  background: repeating-linear-gradient(0deg, transparent 0 39px, #9ab48608 39px 40px),
              repeating-linear-gradient(90deg, transparent 0 39px, #9ab48608 39px 40px), #12241b;
}
.flow__label { display: block; margin: 0 0 12px; text-align: center; font: 800 12px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--sage-400); }
.flow__sources { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.flow__source {
  --tint: #a1d98f; position: relative; display: grid; justify-items: center; align-content: start; gap: 2px;
  padding: 12px 10px 14px; text-align: center; border: 1px solid #43573e; border-top: 3px solid var(--tint); border-radius: 4px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 14%, #1b3122), #1b3122 70%);
}
.flow__source--finish { --tint: #d4a7ff; }
.flow__source--custom { --tint: var(--gold); }
.flow__thumbs { display: flex; justify-content: center; height: 84px; margin-bottom: 6px; }
.flow__thumbs img { width: 74px; height: 88px; object-fit: contain; margin: -4px -17px 0; filter: drop-shadow(0 4px 3px #0008); }
.flow__source--finish .flow__thumbs img { width: 66px; margin-inline: -10px; }
.flow__source--custom .flow__thumbs img { width: 96px; height: 100px; margin-top: -10px; }
.flow__thumbs img:nth-child(2) { position: relative; z-index: 1; transform: translateY(-4px) scale(1.12); }
.flow__source--custom .flow__thumbs img { filter: brightness(0) invert(.45) drop-shadow(0 4px 3px #0008); }
.flow__source--custom .flow__thumbs { position: relative; }
.flow__source--custom .flow__thumbs::after { content: "?"; position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); font: 28px/1 var(--display); color: #fff5d6; text-shadow: 0 2px 0 #333; }
.flow__source > span { font: 800 15px/1.15 var(--body); letter-spacing: .08em; text-transform: uppercase; color: var(--cream); }
.flow__source b { font: 800 17px/1.25 var(--body); color: var(--tint); }
.flow__source p { margin: 0; font-size: 14px; line-height: 1.3; color: var(--sage-300); }
.flow__source small { font-size: 13px; line-height: 1.3; color: var(--sage-400); }
/* Three sources merge into one payment, which then splits in two. */
.flow__merge { position: relative; width: 66.7%; height: 20px; margin: 0 auto; border: 2px solid var(--line); border-top: 0; }
.flow__merge::before, .flow__merge::after { content: ""; position: absolute; left: 50%; border-left: 2px solid var(--line); transform: translateX(-1px); }
.flow__merge::before { top: 0; height: 18px; }
.flow__merge::after { top: 18px; height: 22px; }
.flow__pay { margin-top: 22px; padding-top: 14px; }
.flow__coins { display: flex; align-items: center; justify-content: center; gap: 20px; }
.flow__coins img { width: 48px; height: 48px; object-fit: contain; }
.flow__split { position: relative; width: 52%; height: 22px; margin: 16px auto 0; border: 2px solid var(--line); border-bottom: 0; }
.flow__split::before { content: ""; position: absolute; left: 50%; top: -16px; height: 16px; border-left: 2px solid var(--line); transform: translateX(-1px); }
.flow__outputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.flow__outputs > div { text-align: center; border: 1px solid #43573e; background: #1b3122; padding: 18px 12px 14px; border-radius: 4px; }
.flow__outputs b { display: block; font: 40px/1.05 var(--display); color: #c0cbb7; }
.flow__outputs b small { font-size: 22px; }
.flow__outputs span { display: block; margin-top: 4px; font: 800 13px/1.2 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.flow__outputs p { margin: 8px 0 0; font-size: 14px; line-height: 1.35; color: var(--sage-300); }
.flow__outputs .flow__burn { border-color: #b47d38; background: linear-gradient(180deg, #4a3518, #352e1b 65%); }
.flow__burn b { color: var(--gold); }
.flow__burn b img { display: inline-block; width: 22px; height: 26px; margin-left: 6px; vertical-align: 2px; }
.flow__status { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--sage-400); }

/* Homepage #shop: copy next to the diagram. */
.burn-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; margin-bottom: 28px; }
.burn-layout .prose { margin: 0; }

@media (max-width: 900px) {
  .burn-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .flow { padding: 20px 14px 16px; }
  .flow__sources { grid-template-columns: 1fr; gap: 8px; }
  .flow__source { grid-template-columns: 76px 1fr; justify-items: start; text-align: left; column-gap: 12px; padding: 10px 12px; border-top-width: 1px; border-left: 3px solid var(--tint); }
  .flow__thumbs { grid-row: 1 / span 4; width: 76px; height: 68px; align-self: center; margin: 0; }
  .flow__thumbs img, .flow__source--finish .flow__thumbs img { width: 50px; height: 66px; margin: 0 -12px; }
  .flow__source--custom .flow__thumbs img { width: 70px; height: 76px; margin: -4px 0 0; }
  .flow__source--custom .flow__thumbs::after { font-size: 22px; }
  .flow__merge { width: 0; height: 18px; border-width: 0 0 0 2px; }
  .flow__merge::before, .flow__merge::after { display: none; }
  .flow__pay { margin-top: 0; padding-top: 10px; }
  .flow__split { width: 50%; }
  .flow__outputs { gap: 10px; }
  .flow__outputs b { font-size: 34px; }
}