.dl-security-summary {
  margin-top: 48px;
  padding: 26px 30px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fafafa;
}

.dl-security-summary h2 {
  font-size: clamp(23px, 2.6vw, 34px);
  line-height: 1.35;
}

.dl-security-summary p,
.dl-security-page main p {
  max-width: 76ch;
  color: #4d4d4d;
  line-height: 1.75;
}

.dl-security-summary p {
  margin: 12px 0 16px;
}

.dl-security-page main {
  padding-block: 52px 80px;
}

.dl-security-hero h1 {
  margin: 8px 0 14px;
  font-size: clamp(34px, 4.8vw, 60px);
  line-height: 1.15;
  text-wrap: balance;
  word-break: keep-all;
}

.dl-security-hero > p {
  font-size: clamp(17px, 2vw, 21px);
}

.dl-security-hero .dl-security-eyebrow {
  margin-top: 24px;
  color: #a63613;
  font-size: 15px;
  font-weight: 700;
}

.dl-security-governance {
  margin: 30px 0 16px;
  padding: 22px;
  border: 1px solid #e5e5e5;
  border-radius: 14px;
  background: #fafafa;
}

.dl-security-governance figcaption strong {
  font-size: 19px;
}

.dl-security-flow {
  list-style: none;
  display: grid;
  gap: 20px;
  padding: 0;
  margin: 16px 0 0;
}

.dl-security-controls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 24px 0 16px;
}

.dl-security-flow li,
.dl-security-system,
.dl-security-providers article {
  position: relative;
  min-width: 0;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 18px;
}

.dl-security-flow li,
.dl-security-system {
  background: #fff;
}

.dl-security-exchange {
  display: grid;
  grid-template-areas:
    "app request company"
    "app response company";
  grid-template-columns: minmax(0, 1fr) min(27%, 245px) minmax(0, 1.25fr);
  grid-template-rows: auto 1fr;
  gap: 12px 28px;
  align-items: start;
  margin-top: 16px;
}

.dl-security-app {
  grid-area: app;
}

.dl-security-mcp {
  padding: 8px 12px;
  text-align: center;
}

.dl-security-company {
  grid-area: company;
}

.dl-security-phase {
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 700;
}

.dl-security-phase:not(:first-child) {
  margin-top: 16px;
}

.dl-security-request {
  grid-area: request;
  color: #555;
  font-size: 14px;
}

.dl-security-response {
  grid-area: response;
  min-width: 0;
  padding: 14px;
  background: #fff5ef;
  border: 1px solid #e7b5a3;
  border-radius: 12px;
}

.dl-security-response dl,
.dl-security-response dd {
  margin: 0;
}

.dl-security-response dd + dd {
  margin-top: 10px;
}

.dl-security-response dt {
  font-weight: 700;
  color: #a63613;
}

.dl-security-direction-arrow {
  position: relative;
  display: block;
  margin: 3px 2px 10px;
  color: #a63613;
  border-top: 2px solid currentColor;
}

.dl-security-direction-arrow::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 0;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 0 2px 2px;
  transform: rotate(45deg);
}

.dl-security-request .dl-security-direction-arrow {
  margin-top: 8px;
  color: inherit;
  transform: rotate(180deg);
}

.dl-security-system > strong {
  display: block;
  margin-bottom: 4px;
  font-size: 18px;
}

.dl-security-system p,
.dl-security-record p,
.dl-security-response dd {
  font-size: 15px;
}

.dl-security-system-name {
  display: block;
  margin-bottom: 6px;
  color: #555;
  font-size: 13px;
}

.dl-security-vertical-link {
  display: block;
  text-align: center;
  color: #666;
}

.dl-security-company-data {
  padding-block: 10px;
}

.dl-security-company-data > strong,
.dl-security-mcp > strong {
  margin: 0;
}

.dl-security-record {
  margin-top: 10px;
  padding: 10px 14px;
  border-left: 2px solid #d5d5d5;
  background: #f1f1f1;
}

.dl-security-flow li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -15px;
  width: 8px;
  height: 8px;
  border: solid #767676;
  border-width: 1px 1px 0 0;
  transform: translateY(-50%) rotate(45deg);
}

.dl-security-flow li > span {
  display: block;
  color: #a63613;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 7px;
}

.dl-security-flow strong {
  display: block;
  margin-bottom: 4px;
}

.dl-security-flow p {
  font-size: 15px;
}

.dl-security-section {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid #e5e5e5;
}

.dl-security-section h2 {
  font-size: clamp(24px, 3.2vw, 39px);
  line-height: 1.3;
  margin-bottom: 14px;
}

.dl-security-section > p + p {
  margin-top: 10px;
}

.dl-security-question {
  margin-top: 20px;
}

.dl-security-question h3 {
  margin-bottom: 6px;
  font-size: 19px;
  line-height: 1.4;
}

.dl-security-providers {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.dl-security-providers article {
  background: #fff;
}

.dl-security-providers h3,
.dl-security-providers h4 {
  font-size: 18px;
  line-height: 1.4;
  margin-bottom: 8px;
}

.dl-security-providers ul {
  list-style: none;
  padding: 0;
  margin: 10px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.dl-security-providers .text-link {
  font-size: 14px;
}

.dl-security-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 20px;
  align-items: center;
  margin-top: 22px;
}

@media (max-width: 767px) {
  .dl-security-summary {
    margin-top: 30px;
    padding: 18px;
  }

  .dl-security-page main {
    padding-block: 34px 52px;
  }

  .dl-security-flow,
  .dl-security-providers {
    grid-template-columns: minmax(0, 1fr);
  }

  .dl-security-governance {
    padding: 14px;
  }

  .dl-security-exchange {
    grid-template-areas: "app" "request" "company" "response";
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 22px;
  }

  .dl-security-direction-arrow {
    width: 20px;
    margin: 8px 0 15px;
    transform: rotate(90deg);
  }

  .dl-security-request .dl-security-direction-arrow {
    margin-top: 12px;
    transform: rotate(-90deg);
  }

  .dl-security-flow li + li::before {
    top: -16px;
    left: 26px;
    transform: rotate(135deg);
  }

  .dl-security-section {
    margin-top: 32px;
    padding-top: 22px;
  }
}