/* LX web security: editorial hierarchy, shared service system and explanatory diagrams. */
.ws-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    vertical-align: middle;
    object-fit: contain;
}

.waf-hero {
    height: 315px;
    position: relative;
    overflow: hidden;
    text-align: left;
    background-size: cover;
    background-position: center;
}

.waf-hero:before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(12, 30, 48, .97), rgba(16, 46, 70, .92) 58%, rgba(17, 56, 82, .85));
}

.waf-hero-inner {
    width: 1170px;
    height: 100%;
    margin: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.waf-hero-copy {
    width: 735px;
}

.waf-hero-copy h3 {
    margin: 0 0 23px;
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -1.2px;
    line-height: 1.4;
}

.waf-hero-copy p {
    font-size: 14px;
    line-height: 1.9;
    color: #c3d2df;
    word-break: keep-all;
    max-width: 680px;
}

.waf-hero-copy p:first-of-type {
    font-size: 18px;
    color: #7dcced;
    margin-bottom: 10px;
}

.waf-hero-art {
    position: relative;
    width: 345px;
    height: 265px;
    flex: none;
}

.ws-hero-plane {
    position: absolute;
    width: 205px;
    height: 160px;
    border: 1px solid #4e86a866;
    border-radius: 10px;
    transform: skewY(-6deg);
}

.ws-plane-back {
    left: 99px;
    top: 28px;
    background: #22496966;
}

.ws-plane-mid {
    left: 74px;
    top: 49px;
    background: #1c4969aa;
}

.ws-hero-window {
    position: absolute;
    left: 49px;
    top: 70px;
    width: 205px;
    height: 160px;
    border: 1px solid #6198b9;
    border-radius: 10px;
    background: linear-gradient(145deg, #26577b, #183b58);
    box-shadow: 0 18px 45px #00132355;
    transform: skewY(-6deg);
}

.ws-window-chrome {
    height: 29px;
    border-bottom: 1px solid #ffffff22;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 11px;
}

.ws-window-chrome>b {
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #8cb8d1;
}

.ws-hero-shield {
    position: absolute;
    left: 27px;
    top: 57px;
    color: #a3e4ff;
}

.ws-hero-shield .ws-icon {
    width: 61px;
    height: 61px;
}

.ws-hero-lines {
    position: absolute;
    right: 22px;
    top: 66px;
    width: 64px;
}

.ws-hero-lines span {
    display: block;
    height: 4px;
    margin: 9px 0;
    background: #5482a3;
    border-radius: 3px;
}

.ws-hero-lines span:nth-child(2) {
    width: 80%;
}

.ws-hero-lines span:last-child {
    width: 55%;
    background: #6fc6de;
}

.ws-hero-service {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    background: #173d58;
    border: 1px solid #5187a7;
    border-radius: 6px;
    box-shadow: 0 6px 14px #00162833;
    color: #e3f4ff;
    font-size: 12px;
}

.ws-hero-service .ws-icon {
    width: 21px;
    height: 21px;
    color: #82d2ed;
}

.ws-hero-a {
    left: 0;
    top: 34px;
}

.ws-hero-b {
    right: 0;
    top: 112px;
}

.ws-hero-c {
    right: 18px;
    bottom: 0;
}

.waf-content {
    padding: 30px 0 80px;
    color: #4c5c6b;
    font-size: 14px;
    line-height: 1.85;
}

.waf-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #dce5ec;
    margin-bottom: 38px;
}

.waf-tabs a {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 13px 6px 16px;
    color: #7a8896;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
}

.waf-tabs .ws-icon {
    width: 19px;
    height: 19px;
}

.waf-tabs a:hover {
    color: #237daf;
    background: #f6fafc;
}

.waf-tabs a[aria-current="page"] {
    color: #2279ad;
    border-color: #2f91c1;
    font-weight: 600;
}

.waf-content>h4 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    height: auto;
    min-height: 30px;
    margin: 0 0 23px;
    padding: 0;
    border: 0;
    color: #243c51;
    font-size: 25px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: -.7px;
}

.waf-content>h4:before {
    content: "";
    width: 5px;
    height: 22px;
    background: #389bc3;
    flex: none;
}

.waf-content>h4:not(:first-of-type) {
    margin-top: 62px;
}

.waf-content .waf-intro {
    font-size: 15px;
    line-height: 1.95;
    word-break: keep-all;
    margin: 0 0 30px;
}

.waf-grid {
    display: flex;
    gap: 20px;
}

.waf-card {
    position: relative;
    flex: 1;
    min-width: 0;
}

.waf-card h5 {
    margin: 0 0 15px;
    color: #234f6d;
    font-size: 19px;
    line-height: 1.5;
    font-weight: 500;
}

.waf-card p {
    margin: 0 0 15px;
    word-break: keep-all;
}

.waf-icon {
    display: block;
    width: 44px;
    height: 44px;
    color: #2e83b0;
    margin-bottom: 22px;
}

.waf-card ul {
    padding: 0;
    margin: 0;
}

.waf-card li {
    position: relative;
    padding-left: 14px;
    margin-bottom: 9px;
    word-break: keep-all;
}

.waf-card li:before {
    content: "";
    position: absolute;
    left: 0;
    top: .85em;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #8baabd;
}

.waf-card li:last-child {
    margin-bottom: 0;
}

.ws-platform {
    border: 1px solid #d7e3ed;
    border-radius: 12px;
    overflow: hidden;
    background: #f2f7fb;
    box-shadow: 0 12px 25px #173e5b07;
}

.ws-platform-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 23px 26px;
    background: #193f5b;
    color: #fff;
    position: relative;
}

.ws-platform-heading>div {
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 17px;
    font-weight: 500;
}

.ws-platform-heading .ws-icon {
    width: 30px;
    height: 30px;
    color: #87d3ef;
}

.ws-platform-heading>strong {
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 1px;
    color: #8fcce5;
}

.ws-services {
    position: relative;
    gap: 0;
    padding: 27px 0 0;
}

.ws-services:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 27px;
    border-left: 1px solid #a9c5d8;
}

.ws-services .waf-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 25px 23px 20px;
    border-top: 1px solid #c7dce9;
    border-right: 1px solid #d7e3ec;
    background: #fff;
    color: #4c5c6b;
    text-decoration: none;
    transition: background .18s;
}

.ws-services .waf-card:last-child {
    border-right: 0;
}

.ws-services .waf-card:before {
    content: "";
    position: absolute;
    left: 23px;
    top: -3px;
    width: 6px;
    height: 6px;
    background: #2f91bd;
    border-radius: 50%;
}

.ws-services .waf-card h5 {
    order: 1;
    margin: 0 0 15px;
    font-size: 19px;
}

.ws-services .waf-card>.waf-icon {
    order: 0;
    width: 46px;
    height: 46px;
    margin: 0 0 20px;
    color: #247fae;
}

.ws-services .waf-card:nth-child(2)>.waf-icon {
    color: #238f96;
}

.ws-services .waf-card:nth-child(3)>.waf-icon {
    color: #5e76b1;
}

.ws-services .waf-card p {
    order: 2;
    font-size: 13px;
    line-height: 1.9;
}

.ws-services .waf-card strong {
    order: 3;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding-top: 16px;
    border-top: 1px solid #e6edf2;
    font-size: 12px;
    color: #247ba6;
    font-weight: 500;
}

.ws-services .waf-card:hover {
    background: #f5fbff;
}

.ws-services .waf-card:focus-visible,
.waf-tabs a:focus-visible {
    outline: 3px solid #3493c1;
    outline-offset: -3px;
}

.waf-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px;
    margin: 0;
    color: #497389;
    font-size: 13px;
}

.waf-note .ws-icon {
    width: 18px;
    height: 18px;
}

.ws-benefits {
    display: block;
    border-top: 1px solid #dbe5ed;
}

.ws-benefits .waf-card {
    display: grid;
    grid-template-columns: 56px 145px 1fr;
    gap: 20px;
    align-items: center;
    padding: 27px 12px;
    border-bottom: 1px solid #dbe5ed;
}

.ws-benefits .waf-icon {
    margin: 0;
    width: 42px;
    height: 42px;
    color: #468bac;
}

.ws-benefits .waf-card h5 {
    margin: 0;
    font-size: 19px;
    color: #2b536e;
}

.ws-benefits .waf-card ul {
    border-left: 1px solid #dbe5ed;
    padding-left: 25px;
}

.ws-benefits .waf-card li {
    font-size: 14px;
    margin-bottom: 7px;
}

.waf-table-wrap {
    overflow-x: auto;
    border: 1px solid #d9e4ec;
    border-radius: 8px;
}

.waf-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 1.8;
}

.waf-table .waf-col-label {
    width: 18%;
}

.waf-table .waf-col-service {
    width: 30%;
}

.waf-table .waf-col-benefit {
    width: 22%;
}

.waf-table caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
}

.waf-table th,
.waf-table td {
    padding: 20px 16px;
    vertical-align: middle;
    border: 1px solid #e2eaf0;
    text-align: center;
    word-break: keep-all;
}

.waf-table tr>:first-child {
    border-left: 0;
}

.waf-table tr>:last-child {
    border-right: 0;
}

.waf-table thead th {
    height: 76px;
    box-sizing: border-box;
    border-top: 0;
    background: #f3f6f9;
    color: #526777;
    font-weight: 500;
}

.waf-table thead th:nth-child(3) {
    background: linear-gradient(135deg, #176b9b, #2454a0);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    box-shadow: inset 2px 0 #257ca9, inset -2px 0 #257ca9;
}

.waf-table tbody tr {
    height: 96px;
}

.waf-table tbody th {
    background: #f8fafb;
    font-weight: 500;
    color: #4a6375;
}

.waf-table td:nth-child(3) {
    background: #e3f1fb;
    color: #174d78;
    font-weight: 700;
    box-shadow: inset 2px 0 #257ca9, inset -2px 0 #257ca9;
}

.waf-table tbody tr:last-child td:nth-child(3) {
    box-shadow: inset 2px 0 #257ca9, inset -2px 0 #257ca9, inset 0 -2px #257ca9;
}

.waf-table td:last-child {
    color: #24799e;
    font-weight: 500;
}

.waf-table tbody tr:last-child>* {
    border-bottom: 0;
}

.ws-comparison-value {
    display: block;
    font-size: 13px;
}

.ws-comparison-value:before {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: #9bcadd;
    margin: 0 auto 9px;
}

.waf-explain {
    gap: 24px;
    padding: 8px 0 28px;
    border-bottom: 1px solid #dfe8ee;
}

.waf-explain .waf-card {
    padding: 0 22px 0 0;
    border-right: 1px solid #dfe8ee;
}

.waf-explain .waf-card:last-child {
    padding-right: 0;
    border: 0;
}

.waf-explain .waf-icon {
    width: 37px;
    height: 37px;
    margin: 0 0 17px;
}

.waf-explain .waf-card p {
    font-size: 14px;
    margin: 0;
}

.waf-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
}

.ws-feature-columns {
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
}

.waf-feature {
    position: relative;
    padding: 25px 0 27px 55px;
    border-top: 1px solid #dce6ed;
    min-width: 0;
}

.waf-feature>.waf-icon {
    position: absolute;
    top: 27px;
    left: 0;
    width: 32px;
    height: 32px;
    margin: 0;
    color: #4089af;
}

.waf-feature h5 {
    font-size: 17px;
    color: #315a75;
    font-weight: 500;
    line-height: 1.6;
    margin: 0 0 12px;
    word-break: keep-all;
}

.waf-feature p {
    font-size: 13px;
    line-height: 1.9;
    word-break: keep-all;
    margin: 0;
}

/* WAF architecture: preserve the equipment order and two groups in PPT 10. */
.ws-architecture {
    padding: 30px 28px;
    background: #f5f8fb;
    border: 1px solid #dae5ed;
    border-radius: 12px;
    text-align: center;
}

.ws-architecture-title {
    display: inline-block;
    padding: 11px 25px;
    border-radius: 24px;
    background: #286e99;
    color: #fff;
    font-size: 17px;
    font-weight: 500;
}

.ws-architecture-title span {
    margin-left: 5px;
    font-size: 14px;
    font-weight: 400;
    color: #e0eff8;
}

.ws-architecture-cloud {
    position: relative;
    width: 90px;
    height: 105px;
    margin: 22px auto 0;
}

.ws-architecture-cloud img {
    width: 76px;
    height: 63px;
}

.ws-architecture-cloud:after {
    content: "";
    position: absolute;
    top: 63px;
    bottom: 0;
    left: 50%;
    border-left: 1px dashed #92b6cd;
}

.ws-architecture-network {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 22px 35px;
    border: 1px solid #adc9db;
    border-radius: 64px;
    background: #edf4f9;
}

.ws-architecture-network:before {
    content: "";
    position: absolute;
    top: -4px;
    left: calc(50% - 4px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2e83b0;
}

.ws-architecture-network img {
    width: 76px;
    height: 76px;
    object-fit: contain;
}

.ws-architecture-arrow {
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 11px solid #92b6cd;
}

.ws-architecture-servers {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    padding: 18px 25px;
    border: 1px solid #adc9db;
    border-radius: 64px;
    background: #fff;
}

.ws-architecture-servers img {
    width: 70px;
    height: 78px;
    object-fit: contain;
}
.ws-need {
    display: grid;
    grid-template-columns: 1fr 245px;
    border: 1px solid #dce6ee;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.ws-need-reasons {
    padding: 7px 25px;
}

.ws-reason {
    display: flex;
    gap: 19px;
    padding: 23px 0;
    border-bottom: 1px solid #e5ecf1;
}

.ws-reason:last-child {
    border: 0;
}

.ws-reason>.ws-icon {
    width: 33px;
    height: 33px;
    color: #8d9ba6;
    margin-top: 3px;
}

.ws-reason h5 {
    font-size: 17px;
    color: #526675;
    font-weight: 500;
    margin: 0 0 8px;
}

.ws-reason p {
    margin: 0;
    word-break: keep-all;
    font-size: 14px;
}

.ws-need-answer {
    position: relative;
    background: #204b68;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    padding: 28px;
}

.ws-need-answer:before {
    content: "";
    position: absolute;
    left: -10px;
    top: calc(50% - 10px);
    border: 10px solid transparent;
    border-left-color: #fff;
    border-right: 0;
}

.ws-need-answer h5 {
    font-size: 21px;
    font-weight: 500;
    margin: 25px 0 0;
}

.ws-scan-art {
    position: relative;
    width: 104px;
    height: 120px;
    color: #c5e5f5;
}

.ws-scan-art>.ws-icon {
    width: 94px;
    height: 110px;
}

.ws-scan-art>span {
    position: absolute;
    bottom: 2px;
    right: -12px;
    padding: 8px;
    background: #295c7d;
    border: 1px solid #5d8fae;
    border-radius: 9px;
}

.ws-scan-art>span>.ws-icon {
    width: 38px;
    height: 38px;
    color: #91d5f0;
}

.ws-scan-art>b {
    position: absolute;
    left: 15px;
    top: 51px;
    width: 68px;
    height: 1px;
    background: #81d6ec;
    box-shadow: 0 0 10px #68d7ee;
}

.ws-management {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 16px;
    position: relative;
}

.ws-management-part {
    position: relative;
    min-width: 0;
    padding: 23px 18px;
    background: #f6f9fb;
    border-top: 3px solid #a8c4d7;
}

.ws-management-part:nth-child(2) {
    background: #edf5fa;
    border-top-color: #3289b7;
}

.ws-management-heading {
    margin-bottom: 20px;
}

.ws-management-heading>.ws-icon {
    display: block;
    width: 35px;
    height: 35px;
    color: #4d8fb3;
    margin-bottom: 20px;
}

.ws-management-heading>span {
    font-size: 11px;
    color: #7e96a7;
    display: block;
    margin-bottom: 6px;
}

.ws-management-heading h5 {
    font-size: 17px;
    line-height: 1.5;
    font-weight: 500;
    color: #325d79;
    margin: 0;
}

.ws-management-part ul {
    padding: 0;
    margin: 0;
}

.ws-management-part li {
    position: relative;
    font-size: 13px;
    padding: 0 0 11px 12px;
    word-break: keep-all;
    line-height: 1.85;
}

.ws-management-part li:before {
    position: absolute;
    content: "";
    width: 3px;
    height: 3px;
    left: 0;
    top: .85em;
    background: #80a5bc;
    border-radius: 50%;
}

.ws-feature-rows {
    display: block;
}

.ws-feature-rows .waf-card {
    display: grid;
    grid-template-columns: 55px 150px 1fr;
    gap: 20px;
    align-items: center;
    padding: 24px 8px;
    border-top: 1px solid #dce6ed;
}

.ws-feature-rows .waf-card:last-child {
    border-bottom: 1px solid #dce6ed;
}

.ws-feature-rows .waf-icon {
    margin: 0;
    width: 37px;
    height: 37px;
}

.ws-feature-rows .waf-card h5 {
    margin: 0;
    font-size: 17px;
}

.ws-feature-rows ul {
    border-left: 1px solid #e0e8ef;
    padding-left: 24px;
}

.ws-feature-rows li {
    font-size: 14px;
}

.ws-risks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 30px;
    background: #faf8f5;
    border: 1px solid #ebe5dd;
    border-radius: 10px;
    padding: 6px 26px;
}

.ws-risks .waf-card {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 24px 0;
    border-bottom: 1px solid #e8e2d9;
}

.ws-risks .waf-card:nth-last-child(-n+2) {
    border-bottom: 0;
}

.ws-risks .waf-card>.waf-icon {
    width: 32px;
    height: 32px;
    margin: 3px 0 0;
    color: #ab8b66;
}

.ws-risks .waf-card p {
    font-size: 14px;
    line-height: 1.9;
    margin: 0;
    color: #746b60;
}

.ws-propagation {
    position: relative;
    height: 450px;
    background: #f4f7fa;
    border: 1px solid #e0e8ef;
    border-radius: 12px;
    overflow: hidden;
}

.ws-propagation-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ws-website {
    position: absolute;
    left: calc(50% - 120px);
    top: 164px;
    width: 240px;
    height: 126px;
    background: #214d6c;
    border: 1px solid #4f83a4;
    border-radius: 8px;
    box-shadow: 0 12px 25px #1e4e6e14;
    color: #fff;
}

.ws-website .ws-window-chrome {
    height: 25px;
}

.ws-website .ws-window-chrome span {
    margin-left: auto;
    font-size: 9px;
    letter-spacing: 2px;
    color: #8fb9d2;
}

.ws-website>div:last-child {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 18px;
}

.ws-website>div:last-child>.ws-icon {
    width: 35px;
    height: 35px;
    color: #83cce9;
}

.ws-website strong {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.85;
}

.ws-propagation-step {
    position: absolute;
    display: flex;
    gap: 17px;
    align-items: center;
    background: #fff;
    border: 1px solid #dce6ee;
    border-radius: 8px;
    padding: 18px 20px;
    box-shadow: 0 5px 12px #264f6b06;
}

.ws-propagation-step>.ws-icon {
    width: 34px;
    height: 34px;
    color: #6998b6;
}

.ws-propagation-step p {
    margin: 0;
    font-size: 14px;
    line-height: 1.85;
    color: #536f84;
}

.ws-prop-top {
    width: 310px;
    height: 96px;
    left: calc(50% - 155px);
    top: 25px;
}

.ws-prop-left {
    width: 260px;
    min-height: 125px;
    left: 3%;
    top: 290px;
}

.ws-prop-right {
    width: 260px;
    min-height: 125px;
    right: 3%;
    top: 290px;
}

@media(prefers-reduced-motion:reduce) {
    .ws-services .waf-card {
        transition: none;
    }

}

/* PPT 12: remote webshell execution and the three affected targets. */
.ws-shell-flow {
    display: flex;
    align-items: center;
    padding: 30px 26px;
    border: 1px solid #d9e5ed;
    border-radius: 12px;
    background: linear-gradient(120deg, #f5f9fc, #edf5fa);
    margin: 0 0 40px;
    gap: 0;
}

.ws-shell-attacker {
    width: 90px;
    flex: none;
    text-align: center;
    color: #315d7c;
}

.ws-shell-attacker>.ws-icon {
    display: block;
    width: 68px;
    height: 68px;
    padding: 15px;
    box-sizing: border-box;
    margin: 0 auto 12px;
    border: 1px solid #b6cedf;
    border-radius: 50%;
    background: #fff;
}

.ws-shell-attacker strong {
    font-size: 16px;
    font-weight: 500;
}

.ws-shell-link {
    height: 1px;
    flex: 1;
    min-width: 70px;
    background: #80abc7;
    position: relative;
}

.ws-shell-link span {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -50%);
    background: #266c99;
    color: #fff;
    border-radius: 20px;
    padding: 4px 17px;
    white-space: nowrap;
    font-size: 14px;
}

.ws-shell-execution {
    width: 225px;
    flex: none;
    text-align: center;
    border: 1px solid #95bbd3;
    border-radius: 10px;
    background: #fff;
    padding: 24px 10px;
    box-sizing: border-box;
    color: #28658b;
    box-shadow: 0 8px 20px #234f6d08;
}

.ws-shell-files {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 16px;
}

.ws-shell-files .ws-icon {
    width: 43px;
    height: 43px;
    color: #86a9be;
}

.ws-shell-files .ws-icon:nth-child(2) {
    color: #2b83af;
}

.ws-shell-execution strong {
    font-size: 16px;
    font-weight: 500;
}

.ws-shell-targets {
    position: relative;
    flex: 1;
    min-width: 220px;
    margin-left: 46px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.ws-shell-targets:before {
    content: "";
    position: absolute;
    left: -24px;
    top: 38px;
    bottom: 38px;
    border-left: 1px solid #80abc7;
}

.ws-shell-targets:after {
    content: "";
    position: absolute;
    left: -46px;
    width: 22px;
    top: 50%;
    border-top: 1px solid #80abc7;
}

.ws-shell-target {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid #dce7ef;
    border-radius: 8px;
    min-height: 76px;
    box-sizing: border-box;
}

.ws-shell-target:before {
    content: "";
    position: absolute;
    left: -24px;
    width: 23px;
    top: 50%;
    border-top: 1px solid #80abc7;
}

.ws-shell-target:after {
    content: "";
    position: absolute;
    left: -5px;
    top: calc(50% - 3px);
    width: 5px;
    height: 5px;
    border-top: 1px solid #80abc7;
    border-right: 1px solid #80abc7;
    transform: rotate(45deg);
}

.ws-shell-target>.ws-icon {
    width: 35px;
    height: 35px;
    color: #377fa9;
}

.ws-shell-target span,
.ws-shell-target strong {
    display: block;
    line-height: 1.6;
}

.ws-shell-target span {
    font-size: 12px;
    color: #778e9e;
}

.ws-shell-target strong {
    font-size: 16px;
    font-weight: 500;
    color: #254f6d;
}

/* Keep phrases intact and avoid a lone word at the end of a paragraph. */
.waf-content p,
.waf-content li,
.waf-content h5,
.waf-table th,
.waf-table td {
    word-break: keep-all;
    overflow-wrap: break-word;
    text-wrap: pretty;
}

.ws-propagation-step p {
    flex: 1;
    min-width: 0;
}

.ws-prop-left {
    width: 290px;
    gap: 12px;
    padding-right: 15px;
    padding-left: 15px;
}

.waf-content .ws-phrase {
    white-space: nowrap;
}