.dg { margin: 0; }
.dg svg { width: 100%; height: auto; display: block; }
.dg figcaption { font-size: 14px; color: var(--muted); margin-top: 14px; }
.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--blue); border-radius: 999px; padding: 4px 10px; }
.pill-muted { background: var(--muted); }

.dg-tank .layer { transform-box: fill-box; transform-origin: bottom; transform: scaleY(0); }
.dg-tank.in .layer, .dg-tank.static .layer { animation: fillUp 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
.dg-tank.in .l3 { animation-delay: .1s; } .dg-tank.in .l2 { animation-delay: .5s; } .dg-tank.in .l1 { animation-delay: .9s; }
@keyframes fillUp { to { transform: scaleY(1); } }
.dg-tank .wave { animation: bob 4s ease-in-out infinite; }
.dg-tank .w2 { animation-duration: 5s; animation-direction: reverse; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.dg-tank .lab { opacity: 0; transform: translateX(-8px); transition: opacity .6s, transform .6s; }
.dg-tank.in .lab, .dg-tank.static .lab { opacity: 1; transform: none; }
.dg-tank.in .lab1 { transition-delay: 1.4s; } .dg-tank.in .lab2 { transition-delay: 1.6s; } .dg-tank.in .lab3 { transition-delay: 1.8s; }
.dg-tank .flow { animation: dash 1.2s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -24; } }

.dg-lanes { display: grid; gap: 18px; }
.lane-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.lane-toggle button { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: #fff; border: 1px solid; border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.lane-toggle button[aria-pressed="true"], .lane-toggle button.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.lane { border: 1px solid; border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px 20px; background: #fff; transition: opacity .4s, transform .4s; }
.lane-ueg { border-color: rgba(40,91,124,.45); box-shadow: 0 12px 34px rgba(25,47,71,.10); }
.dg-lanes.show-swd .lane-ueg, .dg-lanes.show-ueg .lane-swd { opacity: .28; transform: scale(.985); }
.lane-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lane-title { margin: 0; font-size: 17px; font-weight: 700; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; }
.steps li { position: relative; padding: 0 14px 0 0; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
.dg-lanes.in .steps li, .dg-lanes.static .steps li { opacity: 1; transform: none; }
.dg-lanes.in .steps li:nth-child(2) { transition-delay: .2s; } .dg-lanes.in .steps li:nth-child(3) { transition-delay: .4s; } .dg-lanes.in .steps li:nth-child(4) { transition-delay: .6s; }
.steps .ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 14px; background: var(--tint); margin-bottom: 10px; }
.steps .ico svg { width: 34px; height: 34px; }
.lane-ueg .steps .ico { background: #e4eef6; }
.steps b { display: block; font-size: 14.5px; margin-bottom: 4px; }
.steps small { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.steps small.cost { color: #b05a45; font-weight: 600; }
.steps small.gain { color: #285b7c; font-weight: 600; }

.steps li:not(.end)::after { content: ""; position: absolute; top: 27px; left: 62px; right: 8px; height: 2px; background: repeating-linear-gradient(90deg,  0 8px, transparent 8px 14px); background: repeating-linear-gradient(90deg, var(--line) 0 8px, transparent 8px 14px); }
.lane-ueg .steps li:not(.end)::after { background: repeating-linear-gradient(90deg,  0 8px, transparent 8px 14px); background: repeating-linear-gradient(90deg, var(--blue-bright) 0 8px, transparent 8px 14px); animation: slide 1s linear infinite; }
.lane-swd .steps li:not(.end)::after { animation: slide 1.6s linear infinite; }
@keyframes slide { to { background-position: 14px 0; } }
.lane-ueg .spin { transform-box: fill-box; transform-origin: center; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 760px) {
  .steps { grid-template-columns: 1fr; gap: 14px; }
  .steps li { display: grid; grid-template-columns: 56px 1fr; column-gap: 14px; align-items: start; padding: 0; }
  .steps .ico { margin: 0; grid-row: 1 / 3; }
  .steps li:not(.end)::after { top: 60px; left: 27px; right: auto; width: 2px; height: 14px; background: repeating-linear-gradient(180deg,  0 4px, transparent 4px 7px); background: repeating-linear-gradient(180deg, var(--line) 0 4px, transparent 4px 7px); animation: none; }
  .lane-ueg .steps li:not(.end)::after { background: repeating-linear-gradient(180deg,  0 4px, transparent 4px 7px); background: repeating-linear-gradient(180deg, var(--blue-bright) 0 4px, transparent 4px 7px); }
}

.dg-sep .flow { animation: dash 1s linear infinite; }
.dg-sep .flow.water { animation-duration: 1.4s; }
.dg-sep .rotor { transform-box: fill-box; transform-origin: center; animation: spin 2.2s linear infinite; }
.dg-sep .ring { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite reverse; }
.dg-sep .wave { animation: bob 3.6s ease-in-out infinite; }
.sep-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 18px; }
.cmp-card { border: 1px solid; border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; background: #fff; }
.cmp-card.muted { background: var(--tint); }
.cmp-card p { margin: 10px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.cmp-card:not(.muted) { border-color: rgba(40,91,124,.45); }
.cmp-card:not(.muted) p { color: var(--ink); }
@media (max-width: 760px) { .sep-compare { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .dg *, .dg *::before, .dg *::after { animation: none !important; transition: none !important; }
  .dg-tank .layer { transform: none; } .dg-tank .lab, .dg-sep .stage, .steps li { opacity: 1; transform: none; }
}

.legend { display: none; list-style: none; margin: 14px 0 0; padding: 0; }
.legend li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; font-size: 14px; color: var(--muted); margin-bottom: 8px; }
.legend li i { width: 14px; height: 14px; border-radius: 4px; margin-top: 3px; }
.legend li b { color: var(--ink); }
@media (max-width: 760px) {
  .svg-text { display: none; }
  .dg-sep .sep-body text { display: none; }
  .legend { display: block; }
  .dg-tank svg { max-width: 420px; margin: 0 auto; }
}

.dg-seq .hose { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.2s ease-out; }

.dg-seq[data-step="0"] .hose, .dg-seq[data-step="1"] .hose { visibility: hidden; }
.dg-seq[data-step="2"] .hose, .dg-seq[data-step="3"] .hose, .dg-seq[data-step="4"] .hose { stroke-dashoffset: 0; }
.dg-seq .flow { opacity: 0; transition: opacity .4s; }
.dg-seq[data-step="3"] .flow, .dg-seq[data-step="4"] .flow { opacity: 1; }
.dg-seq .drain { transform-box: fill-box; transform-origin: bottom; transition: transform 2.2s cubic-bezier(.4,0,.2,1); }
.dg-seq .sink { transition: transform 2.2s cubic-bezier(.4,0,.2,1); }
.dg-seq[data-step="3"] .drain, .dg-seq[data-step="4"] .drain { transform: scaleY(0); }
.dg-seq[data-step="3"] .sink, .dg-seq[data-step="4"] .sink { transform: translateY(80px); }
.dg-seq .paid { opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s; }
.dg-seq[data-step="4"] .paid { opacity: 1; transform: none; }
.dg-seq.in[data-step="3"] .lab3, .dg-seq.static[data-step="3"] .lab3 { opacity: .35; transition-delay: 0s; }
.dg-seq.in[data-step="4"] .lab3, .dg-seq.static[data-step="4"] .lab3 { opacity: 0; transition-delay: 0s; }
.seq-ctl { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.seq-play { font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: #fff; border: 1px solid; border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; cursor: pointer; }
.seq-play:hover { border-color: var(--navy); }
.seq-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.seq-step { display: flex; flex-direction: column; justify-content: flex-start; font: inherit; text-align: left; font-size: 13.5px; line-height: 1.45; color: var(--muted); background: #fff; border: 1px solid; border: 1px solid var(--line); border-radius: 10px; padding: 14px; cursor: pointer; transition: border-color .2s, background-color .2s; }
.seq-step b { display: block; color: var(--navy); font-size: 14px; margin-bottom: 4px; }
.seq-step:hover { border-color: var(--blue); }
.seq-step[aria-pressed="true"] { border-color: var(--blue); box-shadow: inset 0 0 0 1px; box-shadow: inset 0 0 0 1px var(--blue); }
.seq-play:focus-visible, .seq-step:focus-visible { outline: 2px solid; outline: 2px solid var(--blue); outline-offset: 2px; }
@media (max-width: 760px) { .seq-steps { grid-template-columns: 1fr 1fr; } }

.dg-money .flow { animation: dash 1.2s linear infinite; }
.dg-money .flow.down { animation-duration: 1.6s; }
.dg-money .wave { animation: bob 3.6s ease-in-out infinite; }
.dg-money .rotor { transform-box: fill-box; transform-origin: center; animation: spin 2.2s linear infinite; }
.dg-money .ring { transform-box: fill-box; transform-origin: center; animation: spin 14s linear infinite reverse; }
.dg-money .coin text { font-family: Manrope, Inter, sans-serif; font-size: 11px; font-weight: 700; fill: #fff; text-anchor: middle; }
.dg-money .coin-cost circle { fill: #b05a45; }
.dg-money .coin-gain circle { fill: #285b7c; }
.dg-money .coin-still { display: none; }
@media (prefers-reduced-motion: reduce) {
  .dg-money .stage { opacity: 1; transform: none; }
  .dg-money .coin-move { display: none; }
  .dg-money .coin-still { display: inline; }
}
@media (max-width: 760px) { .dg-money .coin text { display: none; } }

.dg-money .flow, .dg-sep .flow { animation-duration: 2.4s; }
.dg-money .flow.down { animation-duration: 3.2s; }
.dg-sep .flow.water { animation-duration: 2.8s; }
.dg-money .rotor, .dg-sep .rotor { animation-duration: 4.4s; }
.dg-money .ring, .dg-sep .ring { animation-duration: 28s; }
.dg-money .wave, .dg-sep .wave { animation-duration: 6s; }

.seq-step.seq-paid, .seq-step.seq-paid[aria-pressed="true"] { border-color: #285b7c; background: #eaf2f9; }
.seq-step.seq-paid[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #285b7c; }
.seq-step.seq-paid b { color: #285b7c; }
.seq-step.seq-paid:hover { border-color: #285b7c; }
.seq-step.seq-paid:focus-visible { outline-color: #285b7c; }
.cmp-card.gain { border: 2px solid #285b7c; background: #eaf2f9; }
.pill-gain { background: #285b7c; }
.cmp-card.gain p { font-size: 14px; font-weight: 700; line-height: 1.45; color: #285b7c; }

.cmp-card.cost { border: 2px solid #b05a45; background: #f8eeeb; }
.pill-cost { background: #b05a45; }
.cmp-card.cost p { font-size: 14px; font-weight: 700; line-height: 1.45; color: #a1523f; }

.dg > .dg-m { display: none; }
@media (max-width: 760px) {
  .dg > .dg-d { display: none; }
  .dg > .dg-m { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; }
  .dg .dg-m ~ .legend { display: none; }
  .dg-money .dg-m .coin text { display: inline; }
}

#gWater stop:first-child, #gWaterM stop:first-child { stop-color: #7a8ea4; } #gWater stop:last-child, #gWaterM stop:last-child { stop-color: #4d6178; }
.dg-sep .flow.water { stroke: #d5dde6; }

.dg-tank .flow, .dg-sep .flow.oil, .dg-money .flow.down { stroke: #8fc3e6; }

#gOil stop:first-child, #gOilM stop:first-child { stop-color: #9b7350; } #gOil stop:last-child, #gOilM stop:last-child { stop-color: #5c4129; }
#gOil2 stop:first-child, #mfOil stop:first-child, #gOil2M stop:first-child, #mfmOil stop:first-child { stop-color: #8a6544; }
#gOil2 stop:last-child, #mfOil stop:last-child, #gOil2M stop:last-child, #mfmOil stop:last-child { stop-color: #5c4129; }
#gOff stop:first-child, #gOffM stop:first-child { stop-color: #8f8273; } #gOff stop:last-child, #gOffM stop:last-child { stop-color: #6a5f53; }
#gMix stop:first-child, #mfMix stop:first-child, #gMixM stop:first-child, #mfmMix stop:first-child { stop-color: #8a6a4f; }
.dg-tank .wave:not(.w2) { fill: #5c4129; }
.dg-tank .wave.w2 { fill: #6a5f53; }
.dg-sep .wave, .dg-money .wave { fill: #8a6a4f; }
.dg-tank .flow, .dg-sep .flow.oil, .dg-money .flow.down { stroke: #d2b48c; }
.dg-money .flow:not(.down), .dg-sep .flow:not(.oil):not(.water) { stroke: #cbb59a; }

.dg > :not(.seq-steps):not(.sep-compare), .seq-steps > :not(.seq-paid), .sep-compare > :not(.gain) { filter: saturate(.8); }

.seq-step.seq-paid, .seq-step.seq-paid[aria-pressed="true"] { border-color: #1f6a3a; background: #f1f7f3; }
.seq-step.seq-paid[aria-pressed="true"] { box-shadow: inset 0 0 0 1px #1f6a3a; }
.seq-step.seq-paid b { color: #1f6a3a; }
.seq-step.seq-paid:hover { border-color: #1f6a3a; }
.seq-step.seq-paid:focus-visible { outline-color: #1f6a3a; }
.cmp-card.gain { border: 2px solid #1f6a3a; background: #f1f7f3; }
.pill-gain { background: #1f6a3a; }
.cmp-card.gain p { font-size: 14px; font-weight: 700; line-height: 1.45; color: #1f6a3a; }

@media (max-width: 760px) {
  .pill { font-size: 12px; }
  .dg figcaption { font-size: 15.5px; }
  .cmp-card p, .cmp-card.cost p { font-size: 15px; }
  .seq-ctl { font-size: 14px; }
  .seq-play { font-size: 13px; }
  .seq-step { font-size: 15px; }
  .seq-step b { font-size: 15.5px; }

  .dg-m text[font-size="12"] { font-size: 13px; }
  .dg-m text[font-size="11.5"] { font-size: 12.5px; }
}

.diagram-wrap .dg > .dg-d { margin-left: auto; margin-right: auto; }
.diagram-wrap .dg-tank > .dg-d { max-width: 756px; }

.diagram-wrap .dg-sep > .dg-d { max-width: 86.36%; }
.dg-tank .hose { stroke-width: 8; }
.dg .flow { stroke-dasharray: 8 12; }
@keyframes dash20 { to { stroke-dashoffset: -40; } }
.dg-tank .flow { animation: dash20 2s linear infinite; }
.dg-money .flow, .dg-sep .flow { animation-name: dash20; animation-duration: 4s; }
.dg-money .flow.down { animation-duration: 5.3s; }
.dg-sep .flow.water { animation-duration: 4.7s; }
.dg-sep .ring { stroke-width: 2.5; }
.cmp-card { border-width: 2px; padding: 16px 18px; }
.cmp-card p { font-size: 14px; }
.cmp-card.muted { border-color: #c5cfdb; }
.cmp-card:not(.muted):not(.cost):not(.gain) { border-color: #285b7c; }
.cmp-card:not(.muted):not(.cost):not(.gain) p { font-weight: 600; }
@media (max-width: 760px) { .cmp-card p { font-size: 15px; } }

.dg-seq[data-step="3"] .dg-d .sink, .dg-seq[data-step="4"] .dg-d .sink { transform: translateY(180px); }
.dg-seq[data-step="3"] .dg-m .sink, .dg-seq[data-step="4"] .dg-m .sink { transform: translateY(150px); }
.dg-tank.dg-seq .lab1 { transition: opacity .6s, transform 2.2s cubic-bezier(.4,0,.2,1); }
.dg-tank.dg-seq.in .lab1 { transition-delay: 1.4s, 0s; }
.dg-seq[data-step="3"] .dg-d .lab1, .dg-seq[data-step="4"] .dg-d .lab1 { transform: translateY(180px); }
.dg-seq[data-step="3"] .dg-m .lab1, .dg-seq[data-step="4"] .dg-m .lab1 { transform: translateY(150px); }
.dg-seq.dg-tank[data-step="3"] .lab2, .dg-seq.dg-tank[data-step="4"] .lab2,
.dg-seq.dg-tank[data-step="3"] .lab3, .dg-seq.dg-tank[data-step="4"] .lab3 { opacity: 0; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .dg-tank.dg-seq .lab1 { transition: none; } }

@keyframes truckIn { from { transform: translateX(300px); } to { transform: none; } }
@keyframes truckOut { from { transform: none; } to { transform: translateX(80px); } }
@keyframes boxIn { from { transform: translateY(-26px); opacity: 0; } to { transform: none; opacity: 1; } }
.dg-seq[data-step="0"] .veh-truck { transform: translateX(300px); }
.dg-seq[data-step="0"] .veh-box { opacity: 0; }
.dg-seq[data-step="1"] .veh-truck { animation: truckIn 1.6s cubic-bezier(.2,.7,.2,1) both; }
.dg-seq[data-step="1"] .veh-box { animation: boxIn .9s .5s cubic-bezier(.2,.7,.2,1) both; }
.dg-seq[data-step="4"] .veh-truck { animation: truckOut 1.6s .5s cubic-bezier(.4,0,.2,1) both; }
.dg-seq[data-step="0"] .dg-m .veh-truck { transform: translateX(200px); }
.dg-seq[data-step="1"] .dg-m .veh-truck { animation: truckInM 1.6s cubic-bezier(.2,.7,.2,1) both; }
.dg-seq[data-step="4"] .dg-m .veh-truck { animation: truckOutM 1.6s .5s cubic-bezier(.4,0,.2,1) both; }
@keyframes truckInM { from { transform: translateX(200px); } to { transform: none; } }
@keyframes truckOutM { from { transform: none; } to { transform: translateX(40px); } }
.dg-seq .truck-fill { transform-box: fill-box; transform-origin: left center; transform: scaleX(0); }
.dg-seq .box-load { transform-box: fill-box; transform-origin: center bottom; transform: scaleY(0); }
.dg-seq[data-step="3"] .truck-fill, .dg-seq[data-step="3"] .box-load { transform: none; transition: transform 2.2s cubic-bezier(.4,0,.2,1); }
.dg-seq[data-step="4"] .truck-fill, .dg-seq[data-step="4"] .box-load { transform: none; }
.dg-tank.dg-seq[data-step="4"] .hose, .dg-tank.dg-seq[data-step="4"] .flow { opacity: 0; transition: opacity .5s; }
.dg-seq .to-facility { opacity: 0; transition: opacity .5s; }
.dg-seq[data-step="4"] .to-facility { opacity: 1; transition-delay: 1s; }