.dc-hero{
  padding-block:var(--space-5);
  color:var(--c-ink);
  background:var(--c-surface)
}

.dc-breadcrumb{
  margin-bottom:var(--space-4)
}

.dc-hero-layout{
  display:grid;
  grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  align-items:center;
  gap:var(--space-5)
}

.dc-hero-layout>*{
  min-width:0
}

.dc-hero-copy{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.dc-title-group{
  display:grid;
  gap:var(--space-1)
}

.dc-title-group h1{
  max-width:min(36rem,100%);
  margin-inline:0
}

.dc-title-group p{
  max-width:61ch;
  margin-inline:0;
  color:var(--c-ink-soft);
  font-size:var(--fs-3)
}

.dc-city-chain{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-1);
  margin-block:var(--space-2);
  color:var(--c-ink-soft)
}

.dc-city-chain span{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  max-width:100%;
  padding:.4rem .7rem;
  border-radius:999px;
  color:var(--c-ink-soft);
  background:var(--c-white);
  font-size:var(--fs-1)
}

.dc-hero-actions{
  justify-content:flex-start
}

.dc-route-board{
  min-width:0;
  margin:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  color:#eaf4e9;
  background:var(--c-dark);
  box-shadow:var(--shadow-raised)
}

.dc-route-board .dc-board-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  padding:var(--space-2) var(--space-3);
  color:#dff3dc;
  background:var(--c-dark-2)
}

.dc-board-heading span{
  color:#aac0b0;
  font-size:var(--fs-0);
  letter-spacing:.08em
}

.dc-board-heading strong{
  color:#f2f8ef;
  font-size:var(--fs-1)
}

.dc-map{
  padding:var(--space-2) var(--space-3) 0;
  color:var(--c-accent);
}

.dc-map svg{
  width:100%;
  height:auto
}

.dc-board-list{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--space-1);
  margin:0;
  padding:var(--space-2) var(--space-3) var(--space-3);
  list-style:none
}

.dc-board-list li{
  display:grid;
  align-content:start;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  color:#eaf4e9;
  background:rgba(255,255,255,.07)
}

.dc-board-list span{
  color:var(--c-accent);
  font-size:var(--fs-0)
}

.dc-board-list strong{
  color:#f2f8ef;
  font-size:var(--fs-1);
  line-height:1.25
}

.dc-board-list small{
  color:#aac0b0;
  font-size:var(--fs-0);
  line-height:1.4
}

.dc-route-board figcaption{
  padding:var(--space-2) var(--space-3);
  color:#aac0b0;
  background:var(--c-dark-2);
  font-size:var(--fs-0)
}

.dc-data-band{
  margin-top:var(--space-5)
}

.dc-node-section{
  color:var(--c-ink);
  background:var(--c-white)
}

.dc-node-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3)
}

.dc-node-grid>*{
  min-width:0
}

.dc-node-card{
  display:grid;
  gap:var(--space-3);
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-soft)
}

.dc-node-card-mint{
  color:#174d3e;
  background:var(--c-cyan)
}

.dc-node-card-yellow{
  color:#515c0b;
  background:var(--c-yellow)
}

.dc-node-card-lilac{
  color:#4d3564;
  background:var(--c-lilac)
}

.dc-node-card-peach{
  color:#682f28;
  background:var(--c-peach)
}

.dc-node-card h3,
.dc-node-card dt,
.dc-node-card dd,
.dc-node-card strong{
  color:inherit
}

.dc-node-card p{
  color:color-mix(in srgb,currentColor 78%,transparent)
}

.dc-card-heading{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-1)
}

.dc-card-heading .c-badge{
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  color:var(--c-primary-hover);
  background:var(--c-white)
}

.dc-region-code{
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  width:fit-content;
  max-width:100%;
  font-weight:700;
  letter-spacing:.06em
}

.dc-card-copy{
  display:grid;
  gap:var(--space-1)
}

.dc-card-copy h3{
  font-size:var(--fs-5)
}

.dc-facts{
  display:grid;
  gap:var(--space-1)
}

.dc-facts div{
  display:grid;
  grid-template-columns:minmax(max-content,.32fr) minmax(0,1fr);
  gap:var(--space-2);
  align-items:start;
  min-width:0;
  padding-block:var(--space-1)
}

.dc-facts dt{
  font-size:var(--fs-1);
  font-weight:650
}

.dc-facts dd{
  min-width:0;
  font-size:var(--fs-1);
  overflow-wrap:anywhere
}

.dc-plan-status{
  display:grid;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  background:var(--c-white)
}

.dc-plan-status div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-2);
  min-width:0
}

.dc-plan-status span{
  min-width:0;
  color:var(--c-ink-soft);
  font-size:var(--fs-1);
  overflow-wrap:anywhere
}

.dc-plan-status strong{
  flex:0 0 auto;
  color:#174d3e;
  font-size:var(--fs-1)
}

.dc-card-action{
  justify-self:start;
  align-self:end
}

.dc-node-card-wide{
  grid-column:1 / -1;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch
}

.dc-node-card-dark{
  color:#eef7ee;
  background:var(--c-dark-2)
}

.dc-node-card-dark h3,
.dc-node-card-dark dt,
.dc-node-card-dark dd,
.dc-node-card-dark strong{
  color:#f2f8ef
}

.dc-node-card-dark p{
  color:#b7cbbb
}

.dc-node-card-dark .dc-region-code{
  color:var(--c-accent)
}

.dc-node-card-dark .dc-card-heading .c-badge{
  color:#194728;
  background:var(--c-mint)
}

.dc-node-card-dark .dc-plan-status strong{
  color:#174d3e
}

.dc-wide-copy{
  display:flex;
  flex-direction:column;
  gap:var(--space-3);
  min-width:0
}

.dc-wide-copy .dc-card-action{
  margin-top:auto
}

.dc-wide-data{
  display:grid;
  align-content:start;
  gap:var(--space-3);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-surface)
}

.dc-wide-data .dc-facts dt,
.dc-wide-data .dc-facts dd{
  color:var(--c-ink)
}

.dc-wide-note{
  color:var(--c-ink-soft) !important;
  font-size:var(--fs-1)
}

.dc-availability{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  align-items:start;
  gap:var(--space-2);
  margin-top:var(--space-3)
}

.dc-availability span{
  min-width:0
}

.dc-latency-section{
  color:#eaf4e9;
  background:var(--c-dark)
}

.dc-latency-section .eyebrow{
  color:var(--c-accent)
}

.dc-test-method{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--space-2);
  margin-bottom:var(--space-4)
}

.dc-test-method div{
  display:grid;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-surface)
}

.dc-test-method span{
  color:var(--c-primary);
  font-size:var(--fs-4);
  font-weight:650
}

.dc-test-method strong{
  color:var(--c-ink)
}

.dc-test-method small{
  color:var(--c-muted);
  font-size:var(--fs-1)
}

.dc-latency-table{
  background:var(--c-white)
}

.dc-latency-table table{
  min-width:860px
}

.dc-latency-table caption{
  padding:var(--space-2);
  color:var(--c-ink-soft);
  background:var(--c-light);
  font-size:var(--fs-1);
  text-align:left
}

.dc-latency-table tbody th{
  color:var(--c-ink);
  background:var(--c-light);
  font-weight:650
}

.dc-latency-table td{
  white-space:nowrap
}

.dc-latency-notes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--space-3);
  margin-top:var(--space-3)
}

.dc-latency-notes div{
  display:grid;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:#eaf4e9;
  background:var(--c-dark-2)
}

.dc-latency-notes strong{
  color:#f2f8ef
}

.dc-latency-notes p{
  color:#b7cbbb
}

.dc-decision-section{
  color:var(--c-ink);
  background:var(--c-light)
}

.dc-decision-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3);
  margin:0;
  padding:0;
  list-style:none
}

.dc-decision-grid>*{
  min-width:0
}

.dc-decision-card{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--space-3);
  min-width:0;
  padding:var(--space-3);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-white);
  box-shadow:var(--shadow-soft)
}

.dc-step{
  display:grid;
  place-items:center;
  width:3rem;
  height:3rem;
  border-radius:50%;
  color:#fff;
  background:var(--c-primary);
  font-size:var(--fs-1);
  font-weight:700
}

.dc-step-copy{
  display:grid;
  gap:var(--space-1);
  min-width:0
}

.dc-step-copy h3{
  color:var(--c-ink)
}

.dc-step-copy p{
  color:var(--c-ink-soft)
}

.dc-check{
  grid-column:2;
  display:grid;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-2);
  border-radius:var(--radius-sm);
  color:var(--c-ink);
  background:var(--c-surface)
}

.dc-check strong{
  color:var(--c-primary);
  font-size:var(--fs-1)
}

.dc-check span{
  color:var(--c-ink-soft);
  font-size:var(--fs-1)
}

.dc-decision-summary{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,.72fr);
  align-items:center;
  gap:var(--space-4);
  margin-top:var(--space-4);
  padding:var(--space-4);
  border-radius:var(--radius-lg);
  color:#eaf4e9;
  background:var(--c-dark)
}

.dc-decision-summary>div{
  display:grid;
  gap:var(--space-1)
}

.dc-decision-summary .c-badge{
  width:fit-content;
  max-width:100%;
  align-self:flex-start;
  color:#194728;
  background:var(--c-mint)
}

.dc-decision-summary h3{
  color:#f2f8ef;
  font-size:var(--fs-5)
}

.dc-decision-summary p{
  color:#b7cbbb
}

.dc-operations-section{
  color:var(--c-ink);
  background:var(--c-white)
}

.dc-operations-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:start;
  gap:var(--space-3)
}

.dc-operation-card{
  display:grid;
  gap:var(--space-1);
  min-width:0;
  padding:var(--space-4);
  border-radius:var(--radius-md);
  color:var(--c-ink);
  background:var(--c-surface)
}

.dc-operation-card svg{
  margin-bottom:var(--space-1);
  color:var(--c-primary)
}

.dc-operation-card h2{
  color:var(--c-ink);
  font-size:var(--fs-4)
}

.dc-operation-card p{
  color:var(--c-ink-soft)
}

.dc-operation-card a{
  width:fit-content;
  max-width:100%;
  margin-top:var(--space-2);
  color:var(--c-primary);
  font-weight:650;
  text-decoration:underline;
  text-decoration-color:var(--c-accent);
  text-underline-offset:.22em
}

.dc-closing-section{
  color:var(--c-ink);
  background:var(--c-white)
}

.dc-closing-actions{
  display:grid;
  gap:var(--space-1);
  min-width:min(100%,15rem)
}

.dc-dark-ghost{
  color:#eef7ee;
  background:transparent;
  border-color:rgba(255,255,255,.42)
}

.dc-dark-ghost:hover{
  color:#fff;
  background:var(--c-dark-2);
  border-color:var(--c-accent)
}

@media (min-width:1440px){
  .dc-route-board{
    max-width:650px;
    justify-self:end
  }
}

@media (max-width:980px){
  .dc-hero-layout{
    grid-template-columns:minmax(0,1fr) minmax(0,.9fr);
    gap:var(--space-3)
  }

  .dc-board-list{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .dc-board-list li:last-child{
    grid-column:1 / -1
  }

  .dc-test-method{
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media (max-width:768px){
  .dc-hero{
    padding-block:var(--space-4)
  }

  .dc-hero-layout,
  .dc-node-grid,
  .dc-node-card-wide,
  .dc-latency-notes,
  .dc-decision-grid,
  .dc-decision-summary,
  .dc-operations-grid{
    grid-template-columns:1fr
  }

  .dc-title-group h1{
    max-width:15ch
  }

  .dc-route-board{
    margin-top:var(--space-3)
  }

  .dc-node-card-wide{
    grid-column:auto
  }

  .dc-availability{
    grid-template-columns:1fr;
    gap:var(--space-1)
  }

  .dc-decision-card{
    grid-template-columns:auto minmax(0,1fr)
  }

  .dc-decision-summary{
    align-items:start
  }

  .dc-closing-actions{
    width:100%
  }
}

@media (max-width:520px){
  .dc-board-list,
  .dc-test-method{
    grid-template-columns:1fr
  }

  .dc-board-list li:last-child{
    grid-column:auto
  }

  .dc-facts div{
    grid-template-columns:1fr;
    gap:var(--space-1)
  }

  .dc-plan-status div{
    align-items:flex-start
  }
}

@media (max-width:390px){
  .dc-hero-actions,
  .dc-hero-actions .c-btn,
  .dc-card-action,
  .dc-closing-actions,
  .dc-closing-actions .c-btn{
    width:100%
  }

  .dc-node-card,
  .dc-decision-summary,
  .dc-operation-card{
    padding:var(--space-3)
  }

  .dc-card-heading{
    align-items:flex-start
  }

  .dc-plan-status div{
    display:grid;
    gap:var(--space-1)
  }

  .dc-decision-card{
    grid-template-columns:1fr
  }

  .dc-check{
    grid-column:1
  }
}