.das-hero-category {
  margin-top: 10px;
  color: #8fe4ef;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.6;
}

.das-hero-role {
  max-width: 620px;
  margin-top: 25px;
  padding-left: 18px;
  border-left: 2px solid #58cfc3;
  color: #9fb8c9;
  font-size: 14px;
  line-height: 1.75;
}

.das-visual {
  min-width: 0;
  overflow: hidden;
}

.das-figure {
  margin: 0;
}

.das-diagram-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  color: #8edcd7;
  font: 11px/1.6 Consolas, monospace;
  letter-spacing: .05em;
}

.das-diagram-status {
  color: #9db4c4;
  white-space: nowrap;
}

.das-diagram-status i {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 6px;
  border-radius: 50%;
  background: #6cdcca;
}

.das-diagram {
  display: block;
  width: 100%;
  height: auto;
  color: #bcd1dd;
  overflow: visible;
}

.das-diagram-grid path {
  fill: none;
  stroke: #4d7382;
  stroke-width: .7;
  opacity: .18;
}

.das-diagram-source rect,
.das-head-end rect,
.das-indoor-antennas rect {
  fill: #0c202d;
  stroke: #3e6578;
  stroke-width: 1;
}

.das-building .das-floor-line,
.das-building .das-riser-line,
.das-building .das-room-lines {
  fill: none;
  stroke: #496b7b;
  stroke-width: 1;
}

.das-building .das-riser-line { stroke: #74a5ae; }
.das-building .das-room-lines { opacity: .35; }

.das-floor-number {
  fill: #74c7c8;
  font: 21px Consolas, monospace;
}

.das-floor-label,
.das-diagram-kicker,
.das-tiny-label,
.das-coax-label,
.das-legend-label {
  fill: #91b4c2;
  font: 10px Consolas, monospace;
  letter-spacing: .04em;
}

.das-diagram-kicker { fill: #80d8cf; font-size: 9px; }
.das-diagram-label { fill: #d1e9f3; font-family: inherit; font-size: 14px; }
.das-tiny-label { font-size: 8px; }
.das-coax-label { fill: #d1c58c; font-size: 8px; }

.das-route {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.das-route-fiber { stroke: #87dbc2; }
.das-route-coax { stroke: #d2be75; stroke-width: 1.5; }
.das-route-offair { stroke: #65dfdf; }
.das-route-dedicated { stroke: #80c7e0; stroke-dasharray: 4 4; }
.das-route-node { fill: #65dfdf; }
.das-route-node-fiber { fill: #87dbc2; }

.das-antenna-mark {
  fill: none;
  stroke: #9ddbd0;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.das-antenna-label { fill: #b9d9dc; font: 9px Consolas, monospace; }
.das-callout-line { fill: none; stroke: #6d9dad; stroke-dasharray: 3 4; }
.das-callout-label { fill: #9bb8c7; font-family: inherit; font-size: 11px; }
.das-legend-label { font-size: 9px; }

.das-figure figcaption {
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid #2c4354;
  color: #91a9bd;
  font-size: 12px;
  line-height: 1.75;
}

.das-figure figcaption > span {
  color: #6cdcca;
  font-size: 16px;
}

.das-benefits,
.das-comparison-grid,
.das-value-list,
.das-territory-grid {
  display: grid;
  gap: 26px;
}

.das-benefits { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 34px; }
.das-benefit { min-width: 0; padding-top: 20px; border-top: 1px solid #375064; }
.das-benefit h3 { margin: 17px 0 12px; color: #e1edf6; font-size: 21px; line-height: 1.3; }
.das-benefit p,
.das-value-item p,
.das-territory-item p { color: #aabed0; font-size: 15px; line-height: 1.85; }
.das-number { color: #72c6cf; font: 12px/1.6 Consolas, monospace; }

.das-solution-points { margin-top: 28px; border-top: 1px solid #2f4557; }
.das-solution-point { border-bottom: 1px solid #2f4557; }
.das-solution-point summary { display: flex; align-items: center; gap: 22px; padding: 21px 0; cursor: pointer; list-style: none; color: #e3edf5; }
.das-solution-point summary::-webkit-details-marker { display: none; }
.das-solution-point summary strong { flex: 1; font-size: 21px; font-weight: 500; }
.das-solution-point summary > span:last-child { color: #6cdcca; font-size: 22px; }
.das-solution-point[open] summary > span:last-child { transform: rotate(45deg); }
.das-solution-point > p { max-width: 850px; margin: 0 0 23px 42px; color: #aabed0; font-size: 15px; line-height: 1.85; }

.das-comparison { margin-top: 48px; padding: 27px 0 0; border-top: 1px solid #375064; }
.das-comparison h3 { max-width: 620px; margin: 0 0 25px; color: #e1edf6; font-size: 25px; line-height: 1.25; letter-spacing: -.03em; }
.das-comparison-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.das-comparison-grid article { padding: 20px; border: 1px solid #2c4558; background: #0d1c27; border-radius: 8px; }
.das-comparison-grid strong { display: block; margin-bottom: 12px; color: #82ded0; font: 12px/1.6 Consolas, monospace; letter-spacing: .06em; }
.das-comparison-grid p { color: #aabed0; font-size: 14px; line-height: 1.8; }

.das-matrix-mobile { display: none; }
.das-matrix-card { padding: 20px; border: 1px solid #2e495b; background: #0d1b26; border-radius: 8px; }
.das-matrix-card dl { margin: 15px 0 0; }
.das-matrix-card dl > div { padding: 13px 0; border-top: 1px solid #294152; }
.das-matrix-card dt { color: #7cdece; font: 11px/1.6 Consolas, monospace; text-transform: uppercase; }
.das-matrix-card dd { margin: 5px 0 0; color: #b7cbdc; font-size: 15px; line-height: 1.75; }

.das-value-list { gap: 0; margin-top: 20px; }
.das-value-item { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 25px; padding: 24px 0; border-top: 1px solid #2f4557; }
.das-value-number { color: #4accc0; font-size: 38px; font-weight: 350; letter-spacing: -.05em; line-height: 1.1; }
.das-value-item h3,
.das-territory-item h3 { margin: 0 0 10px; color: #e1edf6; font-size: 21px; line-height: 1.3; }

.das-roles { margin-top: 31px; }
.das-site-test { display: flex; align-items: center; justify-content: space-between; gap: 34px; margin-top: 35px; padding: 26px; border: 1px solid #345366; background: #10243170; border-radius: 8px; }
.das-site-test h3 { margin: 0 0 11px; color: #e3edf4; font-size: 22px; line-height: 1.3; }
.das-site-test p:not(.section-label) { max-width: 760px; color: #aec5d6; font-size: 15px; line-height: 1.8; }
.das-site-test .section-label { margin-bottom: 12px; }
.das-site-test .button { flex: 0 0 auto; white-space: nowrap; }

.das-territory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 25px; }
.das-territory-item { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding-top: 18px; border-top: 1px solid #375064; }

@media (max-width: 820px) {
  .das-benefits,
  .das-comparison-grid,
  .das-territory-grid { grid-template-columns: 1fr; }
  .das-site-test { align-items: flex-start; flex-direction: column; }
  .das-site-test .button { white-space: normal; }
}

@media (max-width: 700px) {
  .das-diagram-head { align-items: flex-start; flex-direction: column; gap: 5px; }
  .das-diagram { width: 100%; max-width: 100%; }
  .das-matrix-desktop { display: none; }
  .das-matrix-mobile { display: grid; gap: 13px; }
  .das-value-item { grid-template-columns: 54px minmax(0, 1fr); gap: 16px; }
  .das-value-number { font-size: 29px; }
}