/* Septic 2030 explainers. Every color and font comes from the site's custom properties (site.css :root),
   mapped once here, so a token change restyles every diagram. No hex values, no font names.
   Finished state is the default. Motion runs only after diagrams.js arms a figure below the fold
   (.is-armed) and sees it (.is-in, .is-live). Reduced motion: nothing moves, the labelled end state shows. */
.dg {
  --dg-bg: var(--card); --dg-card: var(--panel); --dg-fg: var(--ink); --dg-ink2: var(--ink-2);
  --dg-line: var(--line); --dg-line2: var(--line-strong); --dg-kicker: var(--brand-hover); --dg-link: var(--brand);
  --dg-brand: var(--brand); --dg-brand-on: var(--on-dark); --dg-deep: var(--brand-deep); --dg-navy: var(--navy);
  --dg-water: var(--brand); --dg-wfill: var(--water-2); --dg-gw: var(--water); --dg-grass: var(--seagrass); --dg-grass-soft: var(--seagrass-soft);
  --dg-ok: var(--seagrass); --dg-n: var(--navy); --dg-alert: var(--alert); --dg-alert-ink: var(--alert-ink); --dg-alert-soft: var(--alert-soft);
  --dg-earth: var(--panel); --dg-focus: var(--focus);
  --dg-font: var(--font-body); --dg-head: var(--font-head); --dg-mono: var(--font-mono); --dg-fw: var(--fw-head);
  --dg-ls: var(--ls-head); --dg-radius: var(--radius); --dg-radius-sm: var(--radius-sm);
  --dg-dur: 800ms; --dg-step: 120ms; --dg-ease: cubic-bezier(.2, .7, .2, 1);
  margin: 2rem 0; padding: clamp(16px, 3vw, 32px); background: var(--dg-bg); color: var(--dg-fg);
  border: 1px solid var(--dg-line); border-radius: var(--dg-radius); font-family: var(--dg-font);
}
.placed > .dg { margin: 0; }
:where(.dg) ol, :where(.dg) ul, :where(.dg) p { margin-top: 0; }
:where(.dg) li, :where(.dg) li + li { margin: 0; }
.dg__head { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem 1rem; margin-bottom: 1.25rem; }
.dg__kicker { margin: 0 0 .35rem; font: 600 .74rem/1.2 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-kicker); }
.dg__title { margin: 0; font: var(--dg-fw) clamp(1.15rem, 2.2vw, 1.5rem)/1.2 var(--dg-head); letter-spacing: var(--dg-ls); max-width: 34em; }
.dg__tag { flex: none; font: 600 .66rem/1 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; padding: .4rem .6rem;
  border: 1.5px solid var(--dg-line2); border-radius: 999px; color: var(--dg-ink2); }
.dg__note { margin: 1rem 0 0; font-size: .92rem; color: var(--dg-ink2); }
.dg__cap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .35rem 1.5rem; margin-top: 1.25rem; padding-top: .85rem;
  border-top: 1px solid var(--dg-line); font-size: .92rem; color: var(--dg-ink2); }
.dg__captext { flex: 1 1 26rem; }
.dg__src { flex: 0 1 30rem; font: .76rem/1.5 var(--dg-mono); color: var(--dg-ink2); }
.dg a { color: var(--dg-link); }
.dg-cite { display: block; margin-top: .3rem; font: .74rem/1.4 var(--dg-mono); color: var(--dg-ink2); }
.dg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* picture + numbered key */
.dg__body--key { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .dg__body--key { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 2.5rem; } }
.dg__art { min-width: 0; }
.dg__svg { display: block; width: 100%; height: auto; overflow: visible; }
.dg__key { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.dg__key li { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); gap: .7rem; align-items: start; }
.dg__key b { display: block; font: var(--dg-fw) 1rem/1.25 var(--dg-head); letter-spacing: var(--dg-ls); }
.dg__key li > div > span { display: block; font-size: .92rem; line-height: 1.45; color: var(--dg-ink2); margin-top: .15rem; }
.dg__n { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--dg-deep); color: var(--dg-brand-on);
  font: 700 .8rem/1 var(--dg-mono); }
@media (min-width: 640px) and (max-width: 999px) { .dg__key--2 { grid-template-columns: 1fr 1fr; } }

/* SVG kit */
.dg svg text { font-family: var(--dg-font); }
.dg .k-ln { fill: none; stroke: var(--dg-fg); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dg .k-ln2 { fill: none; stroke: var(--dg-line2); stroke-width: 1.5; stroke-linejoin: round; }
.dg .k-card { fill: var(--dg-bg); stroke: var(--dg-fg); stroke-width: 2; stroke-linejoin: round; }
.dg .k-cardf { fill: var(--dg-bg); }
.dg .k-earth { fill: var(--dg-earth); }
.dg .k-grav { fill: var(--dg-line); stroke: var(--dg-line2); stroke-width: 1.5; }
.dg .k-earth2 { fill: var(--dg-line); opacity: .45; }
.dg .k-sludge { fill: var(--dg-line2); opacity: .55; }
.dg .k-gw { fill: var(--dg-gw); }
.dg .k-water { fill: var(--dg-wfill); }
.dg .k-wt { fill: none; stroke: var(--dg-water); stroke-width: 2; stroke-dasharray: 8 7; }
.dg .k-wave { fill: none; stroke: var(--dg-water); stroke-width: 2; stroke-linecap: round; }
.dg .k-flow { fill: none; stroke: var(--dg-water); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.dg .k-grass { fill: none; stroke: var(--dg-grass); stroke-width: 3; stroke-linecap: round; }
.dg .k-pipe { fill: none; stroke: var(--dg-ink2); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.dg .k-perf { fill: none; stroke: var(--dg-fg); stroke-width: 4; stroke-dasharray: 10 6; }
.dg .k-media { fill: var(--dg-grass); opacity: .28; }
.dg .k-media2 { fill: var(--dg-grass); opacity: .5; }
.dg .k-stage { fill: var(--dg-bg); stroke: var(--dg-grass); stroke-width: 2.5; }
.dg .k-bub { fill: none; stroke: var(--dg-water); stroke-width: 1.5; }
.dg .k-hatch { stroke: var(--dg-grass); stroke-width: 1.5; opacity: .6; }
.dg .k-old { fill: var(--dg-earth); stroke: var(--dg-line2); stroke-width: 2; stroke-dasharray: 6 5; }
.dg .k-x { stroke: var(--dg-line2); stroke-width: 2; }
.dg .k-road { fill: var(--dg-fg); opacity: .78; }
.dg .k-main { fill: var(--dg-bg); stroke: var(--dg-deep); stroke-width: 6; }
.dg .k-n { fill: var(--dg-n); }
.dg .k-nring { fill: none; stroke: var(--dg-n); stroke-width: 1.5; }
.dg .k-waste { fill: var(--dg-ink2); }
.dg .k-t { fill: var(--dg-fg); font-size: 15px; font-weight: 600; }
.dg .k-t2 { fill: var(--dg-ink2); font-size: 13px; }
.dg .k-tw { fill: var(--dg-deep); font: 600 13px var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; }
.dg-m circle { fill: var(--dg-deep); stroke: var(--dg-bg); stroke-width: 3; }
.dg-m text { fill: var(--dg-brand-on); font: 700 14px var(--dg-mono); }
.dg-m { transform-box: fill-box; transform-origin: center; }
@media (max-width: 640px) {
  .dg .k-lbl { display: none; }
  .dg-m { transform: scale(1.6); }
  .dg__head { flex-direction: column; }
}

/* segmented buttons (toggles and tabs) */
.dg-seg { display: inline-flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; }
.dg-seg[hidden] { display: none; }
.dg-seg button { font: 600 .86rem/1.2 var(--dg-font); color: var(--dg-fg); background: var(--dg-bg); border: 1.5px solid var(--dg-line2);
  border-radius: 999px; padding: .55rem .95rem; min-height: 44px; cursor: pointer; }
.dg-seg button[aria-pressed="true"], .dg-seg button[aria-selected="true"] { background: var(--dg-deep); border-color: var(--dg-deep); color: var(--dg-brand-on); }
.dg button:focus-visible, .dg a:focus-visible { outline: 3px solid var(--dg-focus); outline-offset: 2px; }
.dg-btn { font: 600 .9rem/1.2 var(--dg-font); border-radius: 999px; padding: .6rem 1.1rem; min-height: 44px; cursor: pointer;
  border: 1.5px solid var(--dg-deep); background: var(--dg-bg); color: var(--dg-deep); }
.dg-btn--go { background: var(--dg-deep); color: var(--dg-brand-on); }
.dg-btn--quiet { border-color: var(--dg-line2); color: var(--dg-ink2); }

/* moving particles: only while live; the paused SMIL frame is the static end state */
.dg .dg-flowdots { display: none; }
.dg .dg-still { display: inline; }
.dg.is-live .dg-flowdots { display: inline; }
.dg.is-live .dg-still { display: none; }
.rm .dg.is-live .dg-flowdots { display: none; }
.rm .dg.is-live .dg-still { display: inline; }

/* reveal + draw (only once armed) */
.dg.is-armed .dg-rv { opacity: 0; transform: translateY(14px); }
.dg.is-armed.is-in .dg-rv { opacity: 1; transform: none; transition: opacity var(--dg-dur) var(--dg-ease), transform var(--dg-dur) var(--dg-ease);
  transition-delay: calc(var(--i, 0) * var(--dg-step)); }
.dg.is-armed .k-draw { stroke-dasharray: 1; stroke-dashoffset: 1; }
.dg.is-armed.is-in .k-draw { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--dg-ease) .2s; }

/* 1. nitrogen path: legend line under the key */
.dg-np__fix { margin: 1.1rem 0 0; padding: .85rem 1rem; background: var(--dg-card); border-left: 4px solid var(--dg-brand);
  border-radius: 0 var(--dg-radius-sm) var(--dg-radius-sm) 0; font-size: .95rem; line-height: 1.45; }
.dg-np__fix b { font-family: var(--dg-head); }
.dg-dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; background: var(--dg-n); vertical-align: -.05rem; margin-right: .3rem; }

/* 2. conventional vs ENR */
.dg-cmp { display: grid; gap: 1rem; }
@media (min-width: 900px) { .dg-cmp { grid-template-columns: 1fr 1fr; gap: 1.25rem; } }
.dg-cmp__p { min-width: 0; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius); padding: 1rem; }
.dg-cmp__p--enr { border-top: 4px solid var(--dg-grass); }
.dg-cmp__p--conv { border-top: 4px solid var(--dg-line2); }
.dg-cmp__h { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .3rem .8rem; margin: 0 0 .6rem; }
.dg-cmp__h b { font: var(--dg-fw) 1.1rem/1.2 var(--dg-head); letter-spacing: var(--dg-ls); }
.dg-cmp__h span { font: 600 .72rem/1.2 var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dg-ink2); }
.dg-cmp__p .dg-seg { margin-bottom: .7rem; }
.dg-cmp__p .dg-seg button { font-size: .8rem; padding: .45rem .75rem; }
.dg-cmp__d { margin: .6rem 0 0; font-size: .92rem; line-height: 1.45; color: var(--dg-ink2); }
.dg-cmp__d b { color: var(--dg-fg); }
.dg-meter { margin-top: .75rem; }
.dg-meter__lbl { display: flex; justify-content: space-between; gap: .5rem; font: 600 .74rem/1.2 var(--dg-mono); letter-spacing: .04em; color: var(--dg-ink2); text-transform: uppercase; margin-bottom: .35rem; }
.dg-meter__track { position: relative; height: .9rem; background: var(--dg-earth); border-radius: 999px; overflow: hidden; }
.dg-meter__fill { position: absolute; inset: 0 auto 0 0; width: 65%; background: var(--dg-grass); border-radius: 999px; transform-origin: left center; }
.dg-meter__fill::after { content: ""; position: absolute; inset: 0 -100% 0 100%; width: 54%;
  background: repeating-linear-gradient(90deg, var(--dg-grass) 0 3px, transparent 3px 8px); opacity: .55; }
.dg-meter__none { font-size: .88rem; color: var(--dg-ink2); padding: .2rem 0; }
.dg.is-armed .dg-meter__fill { transform: scaleX(0); }
.dg.is-armed.is-in .dg-meter__fill { transform: none; transition: transform 1.4s var(--dg-ease) .5s; }
/* show one ENR type: hide the others, never force a display value (particle groups keep their own rules) */
.dg-enr[data-show="inrb"] [data-type="atu"], .dg-enr[data-show="inrb"] [data-type="pbts"], .dg-enr[data-show="inrb"] [data-type="stage"],
.dg-enr[data-show="atu"] [data-type="inrb"], .dg-enr[data-show="atu"] [data-type="pbts"],
.dg-enr[data-show="pbts"] [data-type="inrb"], .dg-enr[data-show="pbts"] [data-type="atu"] { display: none; }
.dg .k-keep { font-size: 16px; }

/* 3. decision path */
.dg-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; counter-reset: q; }
.dg-tree > li { display: grid; gap: .45rem; }
@media (min-width: 900px) { .dg-tree > li { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: 1rem; } }
.dg-q { position: relative; background: var(--dg-card); border: 1.5px solid var(--dg-fg); border-radius: var(--dg-radius); padding: .85rem 1rem .85rem 3.2rem; }
.dg-q::before { counter-increment: q; content: counter(q); position: absolute; left: .85rem; top: .85rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--dg-deep); color: var(--dg-brand-on); font: 700 .78rem/1 var(--dg-mono); }
.dg-q b { display: block; font: var(--dg-fw) 1rem/1.3 var(--dg-head); }
.dg-q span { display: block; margin-top: .2rem; font-size: .88rem; color: var(--dg-ink2); }
.dg-out { border-radius: var(--dg-radius); padding: .75rem .95rem; font-size: .92rem; line-height: 1.45; border: 1.5px solid var(--dg-line2); background: var(--dg-bg); }
.dg-out b { display: block; font: var(--dg-fw) 1rem/1.3 var(--dg-head); }
.dg-out .dg-if { display: block; font: 700 .7rem/1 var(--dg-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--dg-ink2); margin-bottom: .35rem; }
.dg-out--act { border-left: 5px solid var(--dg-alert); background: var(--dg-alert-soft); }
.dg-out--fix { border-left: 5px solid var(--dg-brand); background: var(--dg-gw); }
.dg-out--free { border-left: 5px solid var(--dg-ok); background: var(--dg-grass-soft); }
.dg-end { margin-top: .65rem; }
.dg-end .dg-if { color: var(--dg-alert-ink); }
.dg-out--act .dg-if { color: var(--dg-alert-ink); }
.dg-wiz { display: grid; gap: 1rem; }
.dg-wiz[hidden] { display: none; }
.dg-wiz__trail { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.dg-wiz__trail li { font-size: .8rem; background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: 999px; padding: .3rem .7rem; color: var(--dg-ink2); }
.dg-wiz__trail b { color: var(--dg-fg); }
.dg-wiz__card { background: var(--dg-card); border: 1.5px solid var(--dg-fg); border-radius: var(--dg-radius); padding: clamp(1rem, 2.5vw, 1.5rem); }
.dg-wiz__step { margin: 0 0 .4rem; font: 600 .74rem/1.2 var(--dg-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dg-kicker); }
.dg-wiz__q { margin: 0; font: var(--dg-fw) clamp(1.1rem, 2.4vw, 1.4rem)/1.25 var(--dg-head); letter-spacing: var(--dg-ls); outline: none; }
.dg-wiz__help { margin: .4rem 0 0; font-size: .92rem; color: var(--dg-ink2); }
.dg-wiz__btns { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.dg-wiz__btns .dg-btn { min-width: 6rem; }
.dg-wiz__card .dg-out { margin-top: 0; }
.dg-wiz__res { display: grid; gap: .8rem; }
.dg-wiz__res .dg-out b { font-size: 1.2rem; }
.dg-wiz__bar { height: 4px; background: var(--dg-earth); border-radius: 999px; overflow: hidden; margin-bottom: .9rem; }
.dg-wiz__bar i { display: block; height: 100%; width: var(--p, 0%); background: var(--dg-brand); transition: width .4s var(--dg-ease); }
.rm .dg-wiz__bar i { transition: none; }
.dg-wiz__card.is-new { animation: dg-in .45s var(--dg-ease); }
.rm .dg-wiz__card.is-new { animation: none; }
@keyframes dg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dg-dq.is-wiz .dg-dq__all { display: none; }
.dg-dq.is-wiz.is-all .dg-dq__all { display: block; margin-top: 1.25rem; }

/* 4. timeline */
.dg-tl__axis { position: relative; height: 4.6rem; margin: 0 .6rem 1.25rem; }
.dg-tl__axis::before { content: ""; position: absolute; left: 0; right: 0; top: 1.7rem; height: 4px; background: var(--dg-line2); border-radius: 2px; }
.dg-tl__done { position: absolute; left: 0; top: 1.7rem; height: 4px; width: var(--at, 0%); background: var(--dg-brand); border-radius: 2px; transform-origin: left center; }
.dg-tl__done[hidden] { display: none; }
.dg-tl__yr { position: absolute; left: var(--at); top: 0; transform: translateX(-50%); font: 600 .74rem/1 var(--dg-mono); color: var(--dg-ink2); }
.dg-tl__yr::after { content: ""; position: absolute; left: 50%; top: 1rem; width: 1px; height: .55rem; background: var(--dg-line2); }
.dg-tl__dot { position: absolute; left: var(--at); top: 1.7rem; width: 26px; height: 26px; margin: -11px 0 0 -13px; border-radius: 50%;
  background: var(--dg-deep); color: var(--dg-brand-on); border: 3px solid var(--dg-bg); display: grid; place-items: center; font: 700 .7rem/1 var(--dg-mono); }
.dg-tl__dot--end { background: var(--dg-alert); width: 32px; height: 32px; margin: -14px 0 0 -16px; }
.dg-tl__today { z-index: 2; position: absolute; left: var(--at, 50%); top: 1rem; height: 1.9rem; width: 3px; margin-left: -1.5px; background: var(--dg-navy); border-radius: 2px; }
.dg-tl__today span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; margin-top: .3rem;
  font: 700 .7rem/1.25 var(--dg-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--dg-navy); background: var(--dg-bg); padding: .1rem .3rem; text-align: center; }
.dg-tl__ev { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; counter-reset: ev; }
.dg-tl__ev li { position: relative; background: var(--dg-card); border: 1px solid var(--dg-line); border-left: 4px solid var(--dg-deep); border-radius: var(--dg-radius-sm);
  padding: .8rem .95rem .85rem 3rem; }
.dg-tl__ev li::before { counter-increment: ev; content: counter(ev); position: absolute; left: .8rem; top: .8rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--dg-deep); color: var(--dg-brand-on); font: 700 .7rem/1 var(--dg-mono); }
.dg-tl__ev li.is-end, .dg-tl__ev li.is-nirl { border-left-color: var(--dg-alert); }
.dg-tl__ev li.is-end::before { background: var(--dg-alert); }
.dg-tl__ev time { display: block; font: 700 .8rem/1.2 var(--dg-mono); color: var(--dg-kicker); letter-spacing: .03em; }
.dg-tl__ev li.is-end time, .dg-tl__ev li.is-nirl time { color: var(--dg-alert-ink); }
.dg-tl__ev b { display: block; margin-top: .3rem; font: var(--dg-fw) 1rem/1.25 var(--dg-head); }
.dg-tl__ev span { display: block; margin-top: .25rem; font-size: .88rem; color: var(--dg-ink2); line-height: 1.45; }
.dg-tl__ev .dg-cite { font-size: .7rem; }
@media (min-width: 1000px) {
  .dg-tl__ev { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
  .dg-tl__ev li { padding: 2.5rem .85rem .85rem; }
  .dg-tl__ev li::before { top: .75rem; left: .85rem; }
}
@media (max-width: 640px) { .dg-tl__yr:nth-of-type(even) { display: none; } .dg-tl__dot { width: 22px; height: 22px; margin: -9px 0 0 -11px; font-size: .62rem; } }
.dg.is-armed .dg-tl__done { transform: scaleX(0); }
.dg.is-armed.is-in .dg-tl__done { transform: none; transition: transform 1.6s var(--dg-ease) .3s; }
.dg.is-armed .dg-tl__dot, .dg.is-armed .dg-tl__today { opacity: 0; }
.dg.is-armed.is-in .dg-tl__dot, .dg.is-armed.is-in .dg-tl__today { opacity: 1; transition: opacity .5s ease; transition-delay: calc(.3s + var(--i, 0) * 180ms); }
.dg.is-armed.is-in .dg-tl__today { transition-delay: 1.8s; }

/* 5. cost stack */
.dg-cost__axis { position: relative; height: 1.2rem; margin: 0 0 .5rem; border-bottom: 1px solid var(--dg-line2); }
.dg-cost__axis span { position: absolute; left: var(--at); bottom: .3rem; transform: translateX(-50%); white-space: nowrap; font: .72rem/1 var(--dg-mono); color: var(--dg-ink2); }
.dg-cost__axis span:first-child { transform: none; }
.dg-cost__axis span:last-child { transform: translateX(-100%); }
.dg-cost__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.4rem; }
.dg-cost__lbl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-bottom: .45rem; }
.dg-cost__lbl b { font: var(--dg-fw) 1.02rem/1.25 var(--dg-head); }
.dg-cost__lbl span { font: 600 .74rem/1.4 var(--dg-mono); color: var(--dg-ink2); }
.dg-cost__bar { position: relative; height: 2.4rem; background: var(--dg-card); border-radius: var(--dg-radius-sm); }
.dg-cost__seg { position: absolute; top: 0; bottom: 0; left: var(--a); width: calc(var(--b) - var(--a)); transform-origin: left center; }
.dg-cost__seg--job { top: 0; bottom: 0; border: 2px solid var(--dg-fg); border-radius: var(--dg-radius-sm); background: transparent; }
.dg-cost__seg--gmin { top: 4px; bottom: 4px; background: var(--dg-grass); }
.dg-cost__seg--gup { top: 4px; bottom: 4px; background: repeating-linear-gradient(135deg, var(--dg-grass) 0 5px, transparent 5px 10px); border: 1.5px solid var(--dg-grass); }
.dg-cost__seg--you { top: 4px; bottom: 4px; background: var(--dg-deep); }
.dg-cost__res { margin: .55rem 0 0; font-size: .95rem; line-height: 1.45; }
.dg-cost__res b { font-family: var(--dg-head); }
.dg-cost__res .dg-cite { margin-top: .2rem; }
.dg-cost__key { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .86rem; color: var(--dg-ink2); }
.dg-cost__key i { display: inline-block; width: 1.4rem; height: .8rem; vertical-align: -.05rem; margin-right: .4rem; border-radius: 2px; }
.dg-cost__key .k1 { border: 2px solid var(--dg-fg); }
.dg-cost__key .k2 { background: var(--dg-grass); }
.dg-cost__key .k3 { background: repeating-linear-gradient(135deg, var(--dg-grass) 0 4px, transparent 4px 8px); border: 1.5px solid var(--dg-grass); }
.dg-cost__key .k4 { background: var(--dg-deep); }
.dg-cost__go { margin: 1.25rem 0 0; }
.dg.is-armed .dg-cost__seg { transform: scaleX(0); }
.dg.is-armed.is-in .dg-cost__seg { transform: none; transition: transform 1s var(--dg-ease); transition-delay: calc(var(--i, 0) * 160ms + var(--d, 0ms)); }
.dg.is-armed .dg-cost__res { opacity: 0; }
.dg.is-armed.is-in .dg-cost__res { opacity: 1; transition: opacity .6s ease; transition-delay: calc(var(--i, 0) * 160ms + 1.4s); }

/* 6. sewer connection: gravity / pump layers */
.dg-sw [data-mode="pump"] { display: none; }
.dg-sw.is-pump [data-mode="pump"] { display: inline; }
.dg-sw.is-pump [data-mode="gravity"] { display: none; }
.dg-sw.is-pump li[data-mode="pump"] { display: grid; }
.dg-sw li[data-mode="pump"] { display: grid; }
.dg-sw__cost { display: grid; gap: .6rem; margin: 1.1rem 0 0; }
@media (min-width: 560px) { .dg-sw__cost { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .dg-sw__cost { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dg-sw__cost div { background: var(--dg-card); border: 1px solid var(--dg-line); border-radius: var(--dg-radius-sm); padding: .7rem .85rem; }
.dg-sw__cost dt { font: 600 .7rem/1.3 var(--dg-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dg-ink2); }
.dg-sw__cost dd { margin: .2rem 0 0; font: var(--dg-fw) 1.1rem/1.25 var(--dg-head); }
.dg-sw__cost dd small { display: block; font: .74rem/1.4 var(--dg-mono); color: var(--dg-ink2); margin-top: .2rem; }

/* 7. parcels waffle */
.dg-waf { display: grid; gap: 1.5rem; }
@media (min-width: 1000px) { .dg-waf { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: center; gap: 2.5rem; } }
.dg-waf__grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 640px) { .dg-waf__grid { grid-template-columns: repeat(17, minmax(0, 1fr)); max-width: none; } }
.dg-waf__grid i { display: block; aspect-ratio: 1; border-radius: 3px; background: var(--dg-navy); }
.dg-waf__grid i.c2 { background: var(--dg-water); }
.dg-waf__grid i.c3 { background: var(--dg-grass); }
.dg-waf__grid i.c4 { background: var(--dg-wfill); box-shadow: inset 0 0 0 1.5px var(--dg-water); }
.dg-waf__leg { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.dg-waf__leg li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr) auto; gap: .65rem; align-items: baseline; padding-bottom: .6rem; border-bottom: 1px solid var(--dg-line); }
.dg-waf__leg li:last-child { border-bottom: 0; }
.dg-waf__leg i { width: 1rem; height: 1rem; border-radius: 3px; background: var(--dg-navy); align-self: center; }
.dg-waf__leg i.c2 { background: var(--dg-water); } .dg-waf__leg i.c3 { background: var(--dg-grass); } .dg-waf__leg i.c4 { background: var(--dg-wfill); box-shadow: inset 0 0 0 1.5px var(--dg-water); }
.dg-waf__leg b { font: var(--dg-fw) 1rem/1.25 var(--dg-head); }
.dg-waf__leg span { font: 700 .95rem/1 var(--dg-mono); }
.dg-waf__leg small { display: block; font-size: .82rem; color: var(--dg-ink2); }
.dg-waf__total { margin: .9rem 0 0; font: var(--dg-fw) 1.05rem/1.35 var(--dg-head); }
.dg.is-armed .dg-waf__grid i { opacity: 0; transform: scale(.4); }
.dg.is-armed.is-in .dg-waf__grid i { opacity: 1; transform: none; transition: opacity .35s ease, transform .35s var(--dg-ease); transition-delay: calc(var(--i, 0) * 14ms); }

@media print {
  .dg { break-inside: avoid; border-color: currentColor; }
  .dg-seg, .dg-wiz { display: none !important; }
  .dg-dq.is-wiz .dg-dq__all { display: block !important; }
}
.dg__key li > div > .dg-cite, .dg .dg-cite { font: .74rem/1.4 var(--dg-mono); color: var(--dg-ink2); margin-top: .3rem; }
.dg-tl__dot--nirl { background: var(--dg-alert); }