.ukc-security-modern {
  --ukc-ink: #172033;
  --ukc-muted: #64748b;
  --ukc-line: #d9e2ec;
  --ukc-soft: #f6f8fb;
  --ukc-blue: #1769aa;
  --ukc-blue-dark: #104f83;
  --ukc-green: #18794e;
  color: var(--ukc-ink);
  max-width: 1120px;
}

.ukc-security-hero {
  align-items: flex-start;
  background: #f4f8fc;
  border: 1px solid var(--ukc-line);
  display: flex;
  gap: 24px;
  justify-content: space-between;
  padding: 26px 28px;
}

.ukc-security-hero h3,
.ukc-security-hero p { letter-spacing: 0; margin: 0; }
.ukc-security-hero h3 { font-size: 28px; line-height: 1.2; margin: 5px 0 7px; }
.ukc-security-hero > div > p:last-child { color: #475569; max-width: 700px; }

.ukc-security-state {
  align-items: center;
  border: 1px solid;
  border-radius: 999px;
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 8px 12px;
}
.ukc-security-state.is-success { background: #e9f7ef; border-color: #b7dfc8; color: #18794e; }
.ukc-security-state.is-progress { background: #eef6fd; border-color: #bdd8ed; color: #1769aa; }
.ukc-security-state.is-recommended { background: #fff8e8; border-color: #e5c879; color: #805b13; }

.ukc-security-availability {
  align-items: center;
  border: 1px solid;
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 20px;
  padding: 18px 20px;
}
.ukc-security-availability > i { font-size: 22px; text-align: center; width: 28px; }
.ukc-security-availability span,
.ukc-security-availability strong,
.ukc-security-availability p { display: block; margin: 0; }
.ukc-security-availability span { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ukc-security-availability strong { color: var(--ukc-ink); font-size: 16px; margin: 2px 0; }
.ukc-security-availability p { color: #526277; font-size: 13px; line-height: 1.5; }
.ukc-security-availability.is-success { background: #edf9f2; border-color: #b9e1c8; color: #18794e; }
.ukc-security-availability.is-progress { background: #eef6fd; border-color: #bdd8ed; color: #1769aa; }
.ukc-security-availability.is-recommended { background: #fff8e8; border-color: #e5c879; color: #805b13; }

.ukc-security-summary {
  border: 1px solid var(--ukc-line);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 20px;
}
.ukc-security-summary > div { align-items: flex-start; display: flex; gap: 11px; min-width: 0; padding: 16px 18px; }
.ukc-security-summary > div + div { border-left: 1px solid var(--ukc-line); }
.ukc-security-summary i { color: var(--ukc-blue-dark); font-size: 16px; margin-top: 3px; text-align: center; width: 18px; }
.ukc-security-summary .is-success i { color: var(--ukc-green); }
.ukc-security-summary .is-recommended i { color: #946000; }
.ukc-security-summary span,
.ukc-security-summary strong,
.ukc-security-summary small { display: block; }
.ukc-security-summary strong { font-size: 13px; }
.ukc-security-summary small { color: var(--ukc-muted); font-size: 12px; line-height: 1.45; margin-top: 2px; }

.ukc-security-route,
.ukc-security-details {
  border: 1px solid var(--ukc-line);
  margin-top: 20px;
  padding: 22px 24px;
}
.ukc-security-route .ukc-domain-section-heading p { color: var(--ukc-muted); margin: 5px 0 0; }
.ukc-security-route-flow { align-items: stretch; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); margin-top: 18px; }
.ukc-security-route-node { align-items: flex-start; background: var(--ukc-soft); border: 1px solid var(--ukc-line); display: flex; gap: 12px; min-width: 0; padding: 15px; }
.ukc-security-route-node > i { color: #946000; margin-top: 3px; }
.ukc-security-route-node.is-success > i { color: var(--ukc-green); }
.ukc-security-route-node span,
.ukc-security-route-node small,
.ukc-security-route-node strong,
.ukc-security-route-node em { display: block; min-width: 0; }
.ukc-security-route-node small { color: var(--ukc-muted); font-size: 11px; font-style: normal; text-transform: uppercase; }
.ukc-security-route-node strong { overflow-wrap: anywhere; }
.ukc-security-route-node em { color: var(--ukc-muted); font-size: 12px; font-style: normal; margin-top: 3px; }
.ukc-security-route-arrow { align-self: center; color: var(--ukc-blue-dark); }
.ukc-security-route-note,
.ukc-security-scope { background: #fff8e8; border: 1px solid #e5c879; color: #755014; font-size: 13px; line-height: 1.5; margin: 16px 0 0; padding: 11px 13px; }
.ukc-security-route-note i,
.ukc-security-scope i { margin-right: 7px; }

.ukc-security-benefits { display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
.ukc-security-benefits > div { align-items: flex-start; display: flex; gap: 11px; padding: 14px; }
.ukc-security-benefits > div + div { border-left: 1px solid var(--ukc-line); }
.ukc-security-benefits i { color: var(--ukc-blue-dark); margin-top: 3px; }
.ukc-security-benefits span,
.ukc-security-benefits strong,
.ukc-security-benefits small { display: block; }
.ukc-security-benefits strong { font-size: 13px; }
.ukc-security-benefits small { color: var(--ukc-muted); font-size: 12px; line-height: 1.45; margin-top: 3px; }

.ukc-security-pricing { align-items: stretch; background: var(--ukc-soft); border-top: 1px solid var(--ukc-line); display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; padding: 18px; }
.ukc-security-price-option { background: #fff; border: 1px solid var(--ukc-line); color: var(--ukc-ink); padding: 12px 14px; position: relative; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.ukc-security-price-option.is-featured { border-color: #78add3; }
.ukc-security-price-option:hover,
.ukc-security-price-option:focus { border-color: var(--ukc-blue); box-shadow: 0 3px 12px rgba(23, 105, 170, .14); color: var(--ukc-ink); outline: 0; text-decoration: none; transform: translateY(-1px); }
.ukc-security-price-option:focus-visible { box-shadow: 0 0 0 3px rgba(23, 105, 170, .2); }
.ukc-security-pricing span,
.ukc-security-pricing strong,
.ukc-security-pricing small { display: block; }
.ukc-security-pricing span { color: var(--ukc-muted); font-size: 11px; text-transform: uppercase; }
.ukc-security-pricing strong { font-size: 17px; margin-top: 2px; }
.ukc-security-pricing small { color: var(--ukc-blue-dark); font-size: 11px; font-weight: 700; margin-top: 5px; }
.ukc-security-pricing small i { margin-left: 4px; }

.ukc-security-service-facts { align-items: center; background: var(--ukc-soft); border-top: 1px solid var(--ukc-line); display: flex; gap: 28px; margin-top: 18px; padding: 16px 18px; }
.ukc-security-service-facts span,
.ukc-security-service-facts small,
.ukc-security-service-facts strong { display: block; }
.ukc-security-service-facts small { color: var(--ukc-muted); font-size: 11px; text-transform: uppercase; }
.ukc-security-service-facts a { margin-left: auto; }
.ukc-security-footer-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; }

.ukc-forward-security {
  align-items: center;
  border: 1px solid var(--ukc-line);
  display: grid;
  gap: 16px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  margin-top: 20px;
  padding: 16px 18px;
}
.ukc-forward-security.is-success { background: #edf9f2; border-color: #b9e1c8; }
.ukc-forward-security.is-recommended { background: #fff8e8; border-color: #e5c879; }
.ukc-forward-security > i { color: #946000; font-size: 20px; width: 24px; }
.ukc-forward-security.is-success > i { color: var(--ukc-green); }
.ukc-forward-security span,
.ukc-forward-security strong,
.ukc-forward-security small { display: block; }
.ukc-forward-security strong { font-size: 14px; }
.ukc-forward-security small { color: #526277; line-height: 1.45; margin-top: 2px; }

@media (max-width: 767px) {
  .ukc-security-hero,
  .ukc-security-availability { align-items: stretch; grid-template-columns: 1fr; }
  .ukc-security-hero { display: flex; flex-direction: column; padding: 20px; }
  .ukc-security-state { align-self: flex-start; }
  .ukc-security-summary,
  .ukc-security-benefits,
  .ukc-security-route-flow,
  .ukc-security-pricing { grid-template-columns: 1fr; }
  .ukc-security-summary > div + div,
  .ukc-security-benefits > div + div { border-left: 0; border-top: 1px solid var(--ukc-line); }
  .ukc-security-route-arrow { transform: rotate(90deg); justify-self: center; }
  .ukc-security-pricing .btn,
  .ukc-security-availability .btn { width: 100%; }
  .ukc-security-service-facts { align-items: flex-start; flex-direction: column; gap: 10px; }
  .ukc-security-service-facts a { margin-left: 0; }
  .ukc-security-footer-actions { align-items: stretch; flex-direction: column; }
  .ukc-forward-security { grid-template-columns: 1fr; }
}