/* Digital Chain Guide
   Namespaced so the interactive article cannot drift the rest of the theme. */

.post-article:has(.digital-chain-guide) .post-header h1 {
  max-width: 34ch;
  font-size: clamp(1.55rem, 2.4vw, 1.9rem);
  line-height: 1.22;
  letter-spacing: -0.015em;
}

.post-article:has(.digital-chain-guide) .post-header {
  margin-bottom: 20px;
  padding-bottom: 16px;
}

.post-article:has(.digital-chain-guide) .post-featured-image {
  margin-bottom: 20px;
}

.digital-chain-guide {
  --dcg-reading-width: 720px;
  --dcg-bg: #17191c;
  --dcg-panel: #22262b;
  --dcg-panel-2: #2a2f35;
  --dcg-edge: #454c54;
  --dcg-text: #f1eee8;
  --dcg-muted: #b8b3aa;
  --dcg-faint: #7f7b74;
  --dcg-red: #b84343;
  --dcg-red-deep: #821e21;
  --dcg-cyan: #5fd8ee;
  --dcg-amber: #f1ae45;
  --dcg-violet: #aa8fe6;
  --dcg-green: #78c993;
  color: var(--dcg-text);
  font-size: 16px;
  line-height: 1.68;
}

.digital-chain-guide > p,
.digital-chain-guide > ul,
.digital-chain-guide > ol,
.digital-chain-guide > blockquote {
  max-width: var(--dcg-reading-width);
  margin-right: auto;
  margin-left: auto;
}

.digital-chain-guide > p {
  margin-top: 0.85rem;
  margin-bottom: 0;
}

.digital-chain-guide > h2 {
  max-width: var(--dcg-reading-width);
  margin: 2.75rem auto 0.7rem;
  scroll-margin-top: 6rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--dcg-edge);
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: 1.24;
  letter-spacing: -0.02em;
}

.digital-chain-guide > h3 {
  max-width: var(--dcg-reading-width);
  margin: 1.9rem auto 0.55rem;
  scroll-margin-top: 6rem;
  font-size: 1.15rem;
  line-height: 1.35;
}

.digital-chain-guide > ul,
.digital-chain-guide > ol {
  margin-top: 0.7rem;
  margin-bottom: 0;
  padding-left: 1.45rem;
}

.digital-chain-guide > ul li,
.digital-chain-guide > ol li {
  margin: 0.4rem 0;
}

.digital-chain-guide > blockquote {
  margin-top: 1.5rem;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--dcg-edge);
  border-radius: 12px;
  background: var(--dcg-panel);
  box-shadow: inset 0 3px 0 var(--dcg-amber);
  color: var(--dcg-text);
  font-size: 1.05rem;
}

.digital-chain-guide :where(button, select):focus-visible {
  outline: 3px solid var(--dcg-amber);
  outline-offset: 3px;
}

.digital-chain-guide button,
.digital-chain-guide select {
  min-height: 44px;
  font: 600 0.82rem/1.2 var(--font-heading);
}

.dcg-takeaway {
  position: relative;
  max-width: var(--dcg-reading-width);
  margin: 1.6rem auto;
  overflow: hidden;
  padding: 1.2rem clamp(1.15rem, 4vw, 1.8rem);
  border: 1px solid #653335;
  border-radius: 12px;
  background:
    radial-gradient(circle at 90% 15%, rgba(184, 67, 67, 0.18), transparent 42%),
    var(--dcg-bg);
}

.dcg-takeaway::after {
  position: absolute;
  top: -28px;
  right: -20px;
  width: 130px;
  height: 130px;
  border: 1px solid rgba(241, 174, 69, 0.24);
  border-radius: 50%;
  content: "";
}

.dcg-takeaway p {
  position: relative;
  z-index: 1;
  max-width: 700px;
  margin: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 700;
  line-height: 1.35;
}

.dcg-reviewed {
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--dcg-amber);
  color: var(--dcg-muted);
  background: rgba(241, 174, 69, 0.055);
  font-size: 0.86rem;
  line-height: 1.55;
}

.dcg-reviewed strong {
  color: var(--dcg-text);
}

.dcg-cliffhanger {
  max-width: var(--dcg-reading-width);
  margin: 2.75rem auto 0.25rem;
  padding: 1.25rem 0 0;
  border-top: 1px solid var(--dcg-amber);
}

.dcg-cliffhanger strong {
  display: block;
  color: var(--dcg-amber);
  font: 700 0.86rem/1.4 var(--font-heading);
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.dcg-cliffhanger p {
  margin: 0.45rem 0 0;
  color: var(--dcg-text);
  font-size: 1.05rem;
  line-height: 1.6;
}

.dcg-interactive,
.dcg-plane-picker,
.dcg-handoff,
.dcg-term-grid,
.dcg-failure-grid,
.dcg-hazard-grid {
  max-width: var(--dcg-reading-width);
  margin: 1.75rem auto;
}

.dcg-interactive {
  overflow: hidden;
  border: 1px solid var(--dcg-edge);
  border-radius: 14px;
  background: var(--dcg-bg);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

.dcg-control-row {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 1.2rem 0;
}

.dcg-control-row h3,
.dcg-role-decoder h3,
.dcg-box-test h3 {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.35;
}

.dcg-segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--dcg-edge);
  border-radius: 999px;
  background: #111316;
}

.dcg-segmented button {
  padding: 0.65rem 0.9rem;
  border: 0;
  border-radius: 999px;
  color: var(--dcg-muted);
  background: transparent;
  cursor: pointer;
}

.dcg-segmented button[aria-pressed="true"] {
  color: #151515;
  background: var(--dcg-amber);
}

.dcg-network-map {
  display: block;
  width: 100%;
  height: auto;
  min-height: 260px;
  margin-top: 0.5rem;
}

.dcg-network-map text {
  fill: var(--dcg-text);
  font: 700 15px var(--font-heading);
  text-anchor: middle;
}

.dcg-network-map .dcg-small {
  fill: var(--dcg-muted);
  font-size: 11px;
  font-weight: 400;
}

.dcg-network-map .dcg-caption {
  fill: var(--dcg-muted);
  font-size: 12px;
  font-weight: 400;
}

.dcg-box {
  fill: var(--dcg-panel);
  stroke: var(--dcg-edge);
  stroke-width: 1.5;
}

.dcg-box-active {
  fill: #28333a;
  stroke: var(--dcg-cyan);
}

.dcg-box-endpoint {
  stroke: var(--dcg-amber);
}

.dcg-line {
  fill: none;
  stroke-width: 3;
}

.dcg-line-data {
  stroke: var(--dcg-cyan);
  stroke-dasharray: 7 6;
}

.dcg-packet {
  fill: var(--dcg-cyan);
  filter: drop-shadow(0 0 7px rgba(95, 216, 238, 0.75));
}

.dcg-network-view.is-hidden,
.dcg-route.is-hidden,
.dcg-network-mobile.is-hidden {
  display: none;
}

.dcg-network-mobile {
  display: none;
}

.dcg-module-note {
  margin: 0;
  padding: 1rem 1.4rem 1.25rem;
  border-top: 1px solid var(--dcg-edge);
  color: var(--dcg-muted);
  font-size: 0.9rem;
}

.dcg-plane-picker {
  overflow: hidden;
  border: 1px solid var(--dcg-edge);
  border-radius: 14px;
  background: var(--dcg-panel);
}

.dcg-plane-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--dcg-edge);
}

.dcg-plane-buttons button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 0.55rem;
  border: 0;
  color: var(--dcg-muted);
  background: var(--dcg-bg);
  cursor: pointer;
}

.dcg-plane-buttons button[aria-pressed="true"] {
  color: var(--dcg-text);
  background: var(--dcg-panel-2);
  box-shadow: inset 0 -3px 0 var(--plane-color, var(--dcg-cyan));
}

.dcg-plane-buttons button[data-plane="control"] { --plane-color: var(--dcg-violet); }
.dcg-plane-buttons button[data-plane="packet"] { --plane-color: var(--dcg-cyan); }
.dcg-plane-buttons button[data-plane="clock"] { --plane-color: var(--dcg-amber); }
.dcg-plane-buttons button[data-plane="power"] { --plane-color: var(--dcg-red); }

.dcg-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}

.dcg-dot-control { color: var(--dcg-violet); }
.dcg-dot-packet { color: var(--dcg-cyan); }
.dcg-dot-clock { color: var(--dcg-amber); }
.dcg-dot-power { color: var(--dcg-red); }

.dcg-plane-stage {
  padding: 1.2rem;
}

.dcg-plane-row {
  display: grid;
  grid-template-columns: 112px 1fr 180px 1fr;
  align-items: center;
  gap: 0.8rem;
  padding: 0.75rem 0.9rem;
  border-radius: 10px;
  color: var(--dcg-muted);
  font: 500 0.78rem/1.45 var(--font-heading);
  opacity: 1;
  transition: opacity 180ms ease, background 180ms ease;
}

.dcg-plane-row.is-active {
  color: var(--dcg-text);
  background: var(--dcg-bg);
  opacity: 1;
}

.dcg-plane-row b {
  color: var(--dcg-amber);
}

.dcg-plane-row .dcg-arrow {
  color: var(--dcg-muted);
  text-align: center;
}

.dcg-plane-row .dcg-arrow::before,
.dcg-plane-row .dcg-arrow::after {
  content: "  ·  ";
  color: var(--dcg-edge);
}

.dcg-role-decoder {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
}

.dcg-role-decoder > div:first-child {
  padding: 1.5rem;
  background:
    radial-gradient(circle at 0 0, rgba(95, 216, 238, 0.12), transparent 55%),
    var(--dcg-panel);
}

.dcg-role-decoder label,
.dcg-box-test label {
  display: block;
  margin-top: 1.5rem;
  color: var(--dcg-muted);
  font: 600 0.78rem/1.4 var(--font-heading);
}

.dcg-role-decoder select,
.dcg-box-test select {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  padding: 0 2.5rem 0 0.8rem;
  border: 1px solid var(--dcg-edge);
  border-radius: 9px;
  color: var(--dcg-text);
  background: #111316;
}

.dcg-role-answer {
  display: grid;
  margin: 0;
  padding: 0;
}

.dcg-role-answer div {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--dcg-edge);
}

.dcg-role-answer div:last-child {
  border-bottom: 0;
}

.dcg-role-answer dt {
  color: var(--dcg-amber);
  font: 700 0.73rem/1.45 var(--font-heading);
  text-transform: uppercase;
}

.dcg-role-answer dd {
  margin: 0;
  color: var(--dcg-muted);
  font-size: 0.9rem;
}

.dcg-current-products {
  max-width: var(--dcg-reading-width);
  margin: 1.75rem auto;
  overflow: hidden;
  border: 1px solid var(--dcg-edge);
  border-radius: 14px;
  background: var(--dcg-bg);
}

.dcg-current-products summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  color: var(--dcg-text);
  background:
    linear-gradient(110deg, rgba(241, 174, 69, 0.11), transparent 48%),
    var(--dcg-panel);
  cursor: pointer;
  font: 700 0.9rem/1.35 var(--font-heading);
}

.dcg-current-products summary small {
  color: var(--dcg-muted);
  font-size: 0.7rem;
  font-weight: 500;
}

.dcg-current-products[open] summary {
  border-bottom: 1px solid var(--dcg-edge);
}

.dcg-current-products-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dcg-current-products-grid article {
  padding: 1.15rem 1.2rem;
  border-right: 1px solid var(--dcg-edge);
  border-bottom: 1px solid var(--dcg-edge);
}

.dcg-current-products-grid article:nth-child(2n) {
  border-right: 0;
}

.dcg-current-products-grid article:nth-last-child(-n + 2) {
  border-bottom: 0;
}

.dcg-current-products-grid h3 {
  margin: 0;
  color: var(--dcg-amber);
  font-size: 0.92rem;
  line-height: 1.35;
}

.dcg-current-products-grid p {
  margin: 0.55rem 0 0;
  color: var(--dcg-muted);
  font-size: 0.83rem;
  line-height: 1.6;
}

.dcg-current-products-grid b {
  display: block;
  margin-top: 0.75rem;
  color: var(--dcg-text);
  font: 600 0.76rem/1.5 var(--font-heading);
}

.dcg-handoff {
  display: grid;
  grid-template-columns: 1fr 170px 1fr;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid var(--dcg-edge);
  border-radius: 14px;
  background: var(--dcg-bg);
}

.dcg-packet-cloud,
.dcg-buffer,
.dcg-clock-train {
  position: relative;
  min-height: 160px;
  overflow: hidden;
  padding: 1rem;
}

.dcg-packet-cloud,
.dcg-clock-train {
  display: flex;
  align-items: center;
  justify-content: center;
}

.dcg-packet-cloud b,
.dcg-buffer b,
.dcg-clock-train b {
  position: absolute;
  right: 0.8rem;
  bottom: 0.65rem;
  left: 0.8rem;
  color: var(--dcg-muted);
  font: 600 0.73rem/1.3 var(--font-heading);
  text-align: center;
}

.dcg-packet-cloud span {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--dcg-cyan);
  box-shadow: 0 0 10px rgba(95, 216, 238, 0.6);
  animation: dcg-packet-burst 2.4s ease-in-out infinite;
}

.dcg-packet-cloud span:nth-child(1) { top: 30%; left: 12%; animation-delay: -0.2s; }
.dcg-packet-cloud span:nth-child(2) { top: 48%; left: 25%; animation-delay: -1.5s; }
.dcg-packet-cloud span:nth-child(3) { top: 26%; left: 48%; animation-delay: -0.9s; }
.dcg-packet-cloud span:nth-child(4) { top: 53%; left: 64%; animation-delay: -1.9s; }
.dcg-packet-cloud span:nth-child(5) { top: 35%; left: 82%; animation-delay: -0.6s; }

.dcg-buffer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  place-content: center;
  border-right: 1px solid var(--dcg-edge);
  border-left: 1px solid var(--dcg-edge);
  background: var(--dcg-panel);
}

.dcg-buffer i {
  height: 26px;
  border-radius: 4px;
  background: var(--dcg-cyan);
  opacity: 0.2;
  animation: dcg-buffer-fill 1.8s steps(1) infinite;
}

.dcg-buffer i:nth-child(2) { animation-delay: -0.3s; }
.dcg-buffer i:nth-child(3) { animation-delay: -0.6s; }
.dcg-buffer i:nth-child(4) { animation-delay: -0.9s; }
.dcg-buffer i:nth-child(5) { animation-delay: -1.2s; }
.dcg-buffer i:nth-child(6) { animation-delay: -1.5s; }

.dcg-clock-train {
  gap: 22px;
}

.dcg-clock-train span {
  width: 6px;
  height: 34px;
  border-radius: 2px;
  background: var(--dcg-amber);
  box-shadow: 0 0 10px rgba(241, 174, 69, 0.5);
  animation: dcg-clock-pulse 1.4s ease-in-out infinite;
}

.dcg-clock-train span:nth-child(2) { animation-delay: -0.28s; }
.dcg-clock-train span:nth-child(3) { animation-delay: -0.56s; }
.dcg-clock-train span:nth-child(4) { animation-delay: -0.84s; }
.dcg-clock-train span:nth-child(5) { animation-delay: -1.12s; }

.dcg-software-router {
  padding-bottom: 0;
}

.dcg-route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  min-height: 145px;
  padding: 1.3rem;
}

.dcg-route span {
  display: grid;
  min-height: 66px;
  place-items: center;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--dcg-edge);
  border-radius: 10px;
  background: var(--dcg-panel);
  font: 700 0.78rem/1.3 var(--font-heading);
  text-align: center;
}

.dcg-route i {
  color: var(--dcg-cyan);
  font: 600 0.68rem/1.3 var(--font-heading);
  text-align: center;
}

.dcg-route i::after {
  display: block;
  color: var(--dcg-faint);
  content: "→";
  font-size: 1.3rem;
  font-style: normal;
}

.dcg-term-grid,
.dcg-failure-grid,
.dcg-hazard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
}

.dcg-term-grid {
  grid-template-columns: repeat(2, 1fr);
}

.dcg-term-grid article,
.dcg-failure-grid article,
.dcg-hazard-grid article {
  position: relative;
  overflow: hidden;
  padding: 1.25rem;
  border: 1px solid var(--dcg-edge);
  border-radius: 12px;
  background: var(--dcg-bg);
}

.dcg-term-grid h3,
.dcg-failure-grid h3,
.dcg-hazard-grid h3 {
  margin: 0.8rem 0 0.55rem;
  font-size: 1.05rem;
}

.dcg-term-grid h3 {
  margin-top: 0;
  color: var(--dcg-cyan);
}

.dcg-term-grid p,
.dcg-failure-grid p,
.dcg-hazard-grid p {
  margin-top: 0.55rem;
  color: var(--dcg-muted);
  font-size: 0.87rem;
  line-height: 1.65;
}

.dcg-failure-grid b,
.dcg-hazard-grid b {
  display: block;
  margin-top: 1rem;
  color: var(--dcg-amber);
  font: 700 0.74rem/1.4 var(--font-heading);
}

.dcg-box-test {
  padding: 1.5rem;
  background:
    linear-gradient(120deg, rgba(184, 67, 67, 0.08), transparent 40%),
    var(--dcg-bg);
}

.dcg-box-test-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.dcg-box-result {
  margin-top: 1.25rem;
  padding: 1.15rem;
  border: 1px solid var(--dcg-edge);
  border-radius: 12px;
  background: var(--dcg-panel);
  box-shadow: inset 0 3px 0 var(--dcg-amber);
}

.dcg-box-result span {
  display: block;
  font: 700 1rem/1.4 var(--font-heading);
}

.dcg-box-result p {
  margin-top: 0.4rem;
  color: var(--dcg-muted);
  font-size: 0.9rem;
}

.dcg-hazard-grid article {
  padding-top: 1.5rem;
}

.dcg-connector {
  display: flex;
  width: 105px;
  height: 58px;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-bottom: 1rem;
  border: 3px solid var(--dcg-muted);
  background: #111316;
  box-shadow: inset 0 0 0 3px #25292e;
}

.dcg-connector-hdmi {
  clip-path: polygon(8% 0, 92% 0, 100% 25%, 93% 100%, 7% 100%, 0 25%);
}

.dcg-connector-rj45 {
  border-radius: 7px 7px 2px 2px;
}

.dcg-connector-clock {
  width: 66px;
  height: 66px;
  border-radius: 50%;
}

.dcg-connector i {
  display: block;
  width: 5px;
  height: 17px;
  background: var(--dcg-amber);
}

.dcg-connector-rj45 i {
  width: 5px;
  height: 23px;
}

.dcg-connector-clock i {
  width: 16px;
  height: 16px;
  border-radius: 50%;
}

@keyframes dcg-packet-burst {
  0%, 25% { opacity: 0.2; transform: translateX(-7px); }
  45%, 70% { opacity: 1; transform: translateX(5px); }
  100% { opacity: 0.2; transform: translateX(12px); }
}

@keyframes dcg-buffer-fill {
  0%, 45% { opacity: 0.2; }
  46%, 100% { opacity: 0.95; }
}

@keyframes dcg-clock-pulse {
  0%, 55%, 100% { opacity: 0.28; transform: scaleY(0.45); }
  20%, 40% { opacity: 1; transform: scaleY(1); }
}

@media (max-width: 760px) {
  .post-article:has(.digital-chain-guide) {
    padding: 1.15rem;
  }

  .post-article:has(.digital-chain-guide) .post-header h1 {
    font-size: 1.375rem;
    line-height: 1.25;
  }

  .digital-chain-guide {
    font-size: 15px;
    line-height: 1.65;
  }

  .digital-chain-guide > h2 {
    margin-top: 2rem;
    padding-top: 0.65rem;
    font-size: 1.35rem;
    line-height: 1.3;
  }

  .digital-chain-guide > h3 {
    margin-top: 1.65rem;
    font-size: 1.08rem;
  }

  .dcg-control-row {
    align-items: stretch;
    flex-direction: column;
  }

  .dcg-segmented {
    width: 100%;
  }

  .dcg-segmented button {
    flex: 1;
  }

  .dcg-network-map {
    display: none;
  }

  .dcg-network-mobile:not(.is-hidden) {
    display: block;
    padding: 1.2rem;
    border-top: 1px solid var(--dcg-edge);
    text-align: center;
  }

  .dcg-mobile-chain {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-bottom: 1rem;
  }

  .dcg-mobile-chain span,
  .dcg-mobile-branches span,
  .dcg-mobile-hub {
    padding: 0.65rem 0.7rem;
    border: 1px solid var(--dcg-edge);
    border-radius: 8px;
    background: var(--dcg-panel);
    font: 700 0.74rem/1.25 var(--font-heading);
  }

  .dcg-mobile-chain i {
    color: var(--dcg-cyan);
    font-style: normal;
  }

  .dcg-mobile-hub {
    width: 92px;
    margin: 0 auto 1rem;
    border-color: var(--dcg-cyan);
    border-radius: 999px;
  }

  .dcg-mobile-branches {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.65rem;
    margin-bottom: 1rem;
  }

  .dcg-mobile-branches span {
    position: relative;
  }

  .dcg-mobile-branches span::before {
    position: absolute;
    top: -0.7rem;
    left: 50%;
    width: 1px;
    height: 0.7rem;
    background: var(--dcg-cyan);
    content: "";
  }

  .dcg-mobile-branches b,
  .dcg-mobile-branches small {
    display: block;
  }

  .dcg-mobile-branches small {
    margin-top: 0.2rem;
    color: var(--dcg-muted);
    font-weight: 400;
  }

  .dcg-network-mobile > b {
    color: var(--dcg-muted);
    font: 600 0.76rem/1.45 var(--font-heading);
  }

  .dcg-plane-buttons {
    grid-template-columns: repeat(2, 1fr);
  }

  .dcg-plane-row {
    grid-template-columns: 1fr;
    gap: 0.3rem;
    margin-bottom: 0.5rem;
  }

  .dcg-plane-row .dcg-arrow {
    text-align: left;
  }

  .dcg-role-decoder,
  .dcg-handoff,
  .dcg-current-products-grid,
  .dcg-term-grid,
  .dcg-failure-grid,
  .dcg-hazard-grid,
  .dcg-box-test-grid {
    grid-template-columns: 1fr;
  }

  .dcg-current-products summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }

  .dcg-current-products-grid article,
  .dcg-current-products-grid article:nth-child(2n),
  .dcg-current-products-grid article:nth-last-child(-n + 2) {
    border-right: 0;
    border-bottom: 1px solid var(--dcg-edge);
  }

  .dcg-current-products-grid article:last-child {
    border-bottom: 0;
  }

  .dcg-role-answer div {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }

  .dcg-handoff {
    grid-template-columns: 1fr;
  }

  .dcg-packet-cloud,
  .dcg-buffer,
  .dcg-clock-train {
    min-height: 130px;
  }

  .dcg-buffer {
    grid-template-columns: repeat(6, 1fr);
    border: 0;
    border-top: 1px solid var(--dcg-edge);
    border-bottom: 1px solid var(--dcg-edge);
  }

  .dcg-route {
    align-items: stretch;
    flex-direction: column;
  }

  .dcg-route i::after {
    transform: rotate(90deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .digital-chain-guide *,
  .digital-chain-guide *::before,
  .digital-chain-guide *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}