/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   01 — HERO
   ========================================================= */

.wn-dwa-hero {
    position: relative;
    overflow: hidden;
    padding: 150px 0 62px;
    background: #07111f;
    color: #ffffff;
}

.wn-dwa-hero::before {
    content: "";
    position: absolute;
    top: -520px;
    right: -250px;
    width: 1050px;
    height: 1050px;
    border: 1px solid rgba(35, 116, 255, .06);
    border-radius: 50%;
    box-shadow:
        0 0 0 150px rgba(35, 116, 255, .014),
        0 0 0 300px rgba(35, 116, 255, .006);
    pointer-events: none;
}

.wn-dwa-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 58%;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(112, 184, 255, .055),
        transparent
    );
    pointer-events: none;
}

.wn-dwa-hero .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   HERO — LAYOUT
   ========================================================= */

.wn-dwa-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .87fr) minmax(560px, 1.13fr);
    gap: 74px;
    align-items: center;
    min-height: 570px;
}


/* =========================================================
   HERO — CONTENT
   ========================================================= */

.wn-dwa-hero-content {
    position: relative;
    z-index: 5;
}

.wn-dwa-hero-kicker {
    display: block;
    margin-bottom: 25px;
    color: #70b8ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .13em;
}

.wn-dwa-hero h1 {
    max-width: 650px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(52px, 5.1vw, 74px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 650;
}

.wn-dwa-hero h1 span {
    display: block;
    margin-top: 7px;
    color: #70b8ff;
    font-weight: 500;
}

.wn-dwa-hero-lead {
    max-width: 565px;
    margin: 30px 0 0;
    color: rgba(255, 255, 255, .59);
    font-size: 17px;
    line-height: 1.72;
}


/* =========================================================
   HERO — ACTIONS
   ========================================================= */

.wn-dwa-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;
    margin-top: 35px;
}

.wn-dwa-hero-primary,
.wn-dwa-hero-secondary {
    display: inline-flex;
    min-height: 56px;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 0 19px;
    text-decoration: none;
    font-size: 11px;
    line-height: 1;
    font-weight: 650;
    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.wn-dwa-hero-primary {
    min-width: 225px;
    border: 1px solid #2374ff;
    background: #2374ff;
    color: #ffffff;
}

.wn-dwa-hero-primary:hover {
    border-color: #438bff;
    background: #438bff;
    color: #ffffff;
    transform: translateY(-2px);
}

.wn-dwa-hero-secondary {
    min-width: 195px;
    border: 1px solid rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .025);
    color: rgba(255, 255, 255, .7);
}

.wn-dwa-hero-secondary:hover {
    border-color: rgba(112, 184, 255, .35);
    background: rgba(35, 116, 255, .05);
    color: #ffffff;
}

.wn-dwa-hero-primary i,
.wn-dwa-hero-secondary i {
    font-style: normal;
}


/* =========================================================
   HERO — WORKFLOW VISUAL
   ========================================================= */

.wn-dwa-hero-visual {
    position: relative;
    min-width: 0;
    min-height: 535px;
}

.wn-dwa-flow-label {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, .43);
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-dwa-flow-label > span,
.wn-dwa-flow-label > small {
    flex: 0 0 auto;
}

.wn-dwa-flow-label i {
    flex: 1 1 auto;
    height: 1px;
    background: rgba(255, 255, 255, .08);
}

.wn-dwa-flow-label small {
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .48);
    font: inherit;
}

.wn-dwa-flow-label small::before {
    content: "";
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #2374ff;
    box-shadow: 0 0 10px rgba(35, 116, 255, .7);
}

.wn-dwa-flow {
    position: absolute;
    top: 48px;
    right: 0;
    bottom: 52px;
    left: 0;
}


/* =========================================================
   HERO — REQUEST DOCUMENT
   ========================================================= */

.wn-dwa-flow-start {
    position: absolute;
    top: 68px;
    left: 0;
    width: 190px;
}

.wn-dwa-document {
    position: relative;
    padding: 17px;
    border: 1px solid rgba(112, 184, 255, .15);
    background: rgba(8, 23, 39, .86);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.wn-dwa-document::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 28px;
    height: 28px;
    border-left: 1px solid rgba(255, 255, 255, .08);
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    background: rgba(255, 255, 255, .02);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
}

.wn-dwa-document-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.wn-dwa-document-top span,
.wn-dwa-document-top small {
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-document-top span {
    color: #70b8ff;
}

.wn-dwa-document-top small {
    color: rgba(255, 255, 255, .36);
}

.wn-dwa-document-title {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 16px;
}

.wn-dwa-document-title i {
    display: block;
    width: 23px;
    height: 27px;
    flex: 0 0 23px;
    border: 1px solid rgba(35, 116, 255, .35);
    background: rgba(35, 116, 255, .07);
}

.wn-dwa-document-title strong {
    color: rgba(255, 255, 255, .76);
    font-size: 10px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-dwa-document-lines {
    display: grid;
    gap: 6px;
    margin-top: 17px;
}

.wn-dwa-document-lines span {
    display: block;
    height: 3px;
    background: rgba(255, 255, 255, .10);
}

.wn-dwa-document-lines span:nth-child(2) {
    width: 80%;
}

.wn-dwa-document-lines span:nth-child(3) {
    width: 58%;
}

.wn-dwa-document-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 19px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.wn-dwa-document-meta span {
    min-width: 0;
    color: rgba(255, 255, 255, .62);
    font-size: 8px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-dwa-document-meta small {
    display: block;
    margin-bottom: 4px;
    color: rgba(112, 184, 255, .58);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}


/* =========================================================
   HERO — WORKFLOW ROUTE
   ========================================================= */

.wn-dwa-flow-route {
    position: absolute;
    top: 155px;
    left: 185px;
    right: 265px;
    height: 55px;
}

.wn-dwa-route-line {
    position: absolute;
    top: 10px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .08),
        rgba(112, 184, 255, .62)
    );
}

.wn-dwa-route-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #70b8ff;
    border-right: 1px solid #70b8ff;
    transform: translateY(-50%) rotate(45deg);
}

.wn-dwa-route-step {
    position: absolute;
    top: 5px;
    transform: translateX(-50%);
}

.wn-dwa-route-step-one {
    left: 18%;
}

.wn-dwa-route-step-two {
    left: 50%;
}

.wn-dwa-route-step-three {
    left: 82%;
}

.wn-dwa-route-step i {
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 auto;
    border: 2px solid #07111f;
    border-radius: 50%;
    background: #2374ff;
    box-shadow: 0 0 0 1px rgba(112, 184, 255, .35);
}

.wn-dwa-route-step span {
    display: block;
    margin-top: 10px;
    color: rgba(255, 255, 255, .4);
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
    white-space: nowrap;
}


/* =========================================================
   HERO — PROCESS CARDS
   ========================================================= */

.wn-dwa-flow-process {
    position: absolute;
    top: 226px;
    left: 110px;
    right: 58px;
    display: grid;
    gap: 9px;
}

.wn-dwa-process-card {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    min-height: 62px;
    padding: 10px 13px;
    border: 1px solid rgba(112, 184, 255, .11);
    background: rgba(8, 23, 39, .92);
    box-shadow: 0 15px 35px rgba(0, 0, 0, .12);
}

.wn-dwa-process-card::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -35px;
    width: 34px;
    height: 1px;
    background: rgba(112, 184, 255, .22);
}

.wn-dwa-process-icon {
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 116, 255, .3);
    background: rgba(35, 116, 255, .07);
}

.wn-dwa-process-icon span {
    color: #70b8ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
}

.wn-dwa-process-card > div:nth-child(2) {
    min-width: 0;
}

.wn-dwa-process-card small,
.wn-dwa-process-card strong {
    display: block;
}

.wn-dwa-process-card small {
    margin-bottom: 4px;
    color: rgba(112, 184, 255, .62);
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}

.wn-dwa-process-card strong {
    color: rgba(255, 255, 255, .72);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 600;
}

.wn-dwa-process-status {
    padding: 6px 7px;
    border: 1px solid rgba(82, 201, 142, .2);
    background: rgba(82, 201, 142, .05);
    color: #76d7a7;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .05em;
    white-space: nowrap;
}

.wn-dwa-process-arrow {
    color: #70b8ff;
    font-size: 17px;
}


/* =========================================================
   HERO — RESULT
   ========================================================= */

.wn-dwa-flow-result {
    position: absolute;
    top: 68px;
    right: 0;
    width: 235px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid rgba(112, 184, 255, .2);
    background: rgba(8, 23, 39, .96);
    box-shadow: 0 25px 60px rgba(0, 0, 0, .24);
}

.wn-dwa-flow-result::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 90px;
    height: 1px;
    background: #2374ff;
}

.wn-dwa-result-status {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    color: #70b8ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-result-status i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #76d7a7;
    box-shadow: 0 0 10px rgba(118, 215, 167, .45);
}

.wn-dwa-flow-result > strong {
    display: block;
    max-width: 185px;
    color: rgba(255, 255, 255, .8);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
}

.wn-dwa-result-meta {
    display: grid;
    gap: 6px;
    margin-top: 17px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.wn-dwa-result-meta span {
    position: relative;
    padding-left: 13px;
    color: rgba(255, 255, 255, .48);
    font-size: 7px;
    line-height: 1.4;
}

.wn-dwa-result-meta span::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #76d7a7;
}


/* =========================================================
   HERO — VISUAL NOTES
   ========================================================= */

.wn-dwa-flow-note {
    position: absolute;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, .38);
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-flow-note small {
    color: #70b8ff;
    font: inherit;
}

.wn-dwa-flow-note-left {
    left: 0;
}

.wn-dwa-flow-note-center {
    left: 50%;
    transform: translateX(-50%);
}

.wn-dwa-flow-note-right {
    right: 0;
}


/* =========================================================
   HERO — BOTTOM PATH
   ========================================================= */

.wn-dwa-hero-path {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 50px;
    align-items: center;
    margin-top: 45px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, .08);
}

.wn-dwa-hero-path > span {
    color: rgba(255, 255, 255, .44);
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-hero-path-flow {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    gap: 14px;
    align-items: center;
}

.wn-dwa-hero-path-flow > strong {
    color: rgba(255, 255, 255, .48);
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .045em;
    white-space: nowrap;
}

.wn-dwa-hero-path-flow > strong:last-child {
    color: #70b8ff;
    font-weight: 750;
}

.wn-dwa-hero-path-flow > i {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .08),
        rgba(35, 116, 255, .65)
    );
}

.wn-dwa-hero-path-flow > i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #70b8ff;
    border-right: 1px solid #70b8ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   HERO — RESPONSIVE
   Same responsive discipline as the completed
   AI Assistants & Knowledge Systems page.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-hero .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-dwa-hero-grid {
        grid-template-columns: minmax(0, .9fr) minmax(500px, 1.1fr);
        gap: 45px;
    }

    .wn-dwa-hero-visual {
        transform: scale(.9);
        transform-origin: center center;
    }

}


/* =========================================================
   HERO — STACKED TABLET
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-hero {
        padding-top: 125px;
    }

    .wn-dwa-hero-grid {
        grid-template-columns: 1fr;
        gap: 65px;
    }

    .wn-dwa-hero-content {
        max-width: 760px;
    }

    .wn-dwa-hero h1 {
        max-width: 720px;
    }

    .wn-dwa-hero-lead {
        max-width: 650px;
    }

    .wn-dwa-hero-visual {
        width: 100%;
        max-width: 680px;
        margin-inline: auto;
        transform: none;
    }

    .wn-dwa-hero-path {
        margin-top: 60px;
    }

}


/* =========================================================
   HERO — MOBILE
   Keep one controlled workflow canvas.
   Reposition the existing components inside it rather than
   converting the illustration into another layout system.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-hero {
        padding: 105px 0 48px;
    }

    .wn-dwa-hero .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-dwa-hero-grid {
        gap: 50px;
        min-height: 0;
    }

    .wn-dwa-hero h1 {
        font-size: clamp(46px, 12.5vw, 62px);
    }

    .wn-dwa-hero-lead {
        margin-top: 25px;
        font-size: 16px;
    }

    .wn-dwa-hero-actions {
        display: grid;
        grid-template-columns: 1fr;
        max-width: 340px;
    }

    .wn-dwa-hero-primary,
    .wn-dwa-hero-secondary {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }


    /* -----------------------------------------------------
       Workflow canvas
       ----------------------------------------------------- */

    .wn-dwa-hero-visual {
        width: 100%;
        max-width: 100%;
        min-height: 650px;
    }

    .wn-dwa-flow-label {
        font-size: 8px;
    }

    .wn-dwa-flow {
        top: 42px;
        bottom: 35px;
    }


    /* -----------------------------------------------------
       Request
       ----------------------------------------------------- */

    .wn-dwa-flow-start {
        top: 10px;
        left: 0;
        width: calc(50% - 8px);
    }

    .wn-dwa-document {
        padding: 12px;
    }

    .wn-dwa-document-title {
        gap: 8px;
        margin-top: 13px;
    }

    .wn-dwa-document-title i {
        width: 20px;
        height: 24px;
        flex-basis: 20px;
    }

    .wn-dwa-document-lines {
        margin-top: 13px;
    }

    .wn-dwa-document-meta {
        margin-top: 14px;
        padding-top: 10px;
    }


    /* -----------------------------------------------------
       Result
       ----------------------------------------------------- */

    .wn-dwa-flow-result {
        top: 10px;
        right: 0;
        width: calc(50% - 8px);
        padding: 14px;
    }

    .wn-dwa-flow-result > strong {
        font-size: 12px;
    }

    .wn-dwa-result-meta {
        margin-top: 13px;
        padding-top: 10px;
    }


    /* -----------------------------------------------------
       Route
       On mobile the long desktop route is unnecessary.
       The process cards below communicate the sequence.
       ----------------------------------------------------- */

    .wn-dwa-flow-route {
        display: none;
    }


    /* -----------------------------------------------------
       Process
       Existing workflow cards stay inside the canvas.
       ----------------------------------------------------- */

    .wn-dwa-flow-process {
        top: 275px;
        left: 0;
        right: 0;
        gap: 10px;
    }

    .wn-dwa-process-card {
        min-height: 66px;
    }

    .wn-dwa-process-card::before {
        display: none;
    }

    .wn-dwa-process-card small {
        font-size: 7px;
    }

    .wn-dwa-process-card strong {
        font-size: 10px;
    }


    /* -----------------------------------------------------
       Phase labels
       ----------------------------------------------------- */

    .wn-dwa-flow-note {
        bottom: 0;
    }

    .wn-dwa-flow-note-center {
        left: 50%;
    }


    /* -----------------------------------------------------
       Bottom path
       Same vertical path treatment used on AI Assistant.
       ----------------------------------------------------- */

    .wn-dwa-hero-path {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 45px;
    }

    .wn-dwa-hero-path-flow {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .wn-dwa-hero-path-flow > strong {
        font-size: 9px;
    }

    .wn-dwa-hero-path-flow > i {
        width: 1px;
        height: 15px;
        margin-left: 3px;
    }

    .wn-dwa-hero-path-flow > i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

}


/* =========================================================
   HERO — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-hero-visual {
        min-height: 690px;
    }

    .wn-dwa-flow-label {
        gap: 8px;
    }

    .wn-dwa-flow-start {
        width: calc(52% - 7px);
    }

    .wn-dwa-flow-result {
        width: calc(48% - 7px);
        padding: 12px;
    }

    .wn-dwa-document {
        padding: 10px;
    }

    .wn-dwa-document-top {
        gap: 5px;
    }

    .wn-dwa-document-top span,
    .wn-dwa-document-top small {
        font-size: 6px;
    }

    .wn-dwa-document-title strong {
        font-size: 9px;
    }

    .wn-dwa-document-meta {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .wn-dwa-result-status {
        font-size: 6px;
    }

    .wn-dwa-flow-result > strong {
        font-size: 11px;
    }

    .wn-dwa-result-meta span {
        font-size: 7px;
    }

    .wn-dwa-flow-process {
        top: 300px;
    }

    .wn-dwa-process-card {
        grid-template-columns: 32px minmax(0, 1fr) auto;
        gap: 9px;
        padding: 10px;
    }

    .wn-dwa-process-icon {
        width: 32px;
        height: 32px;
    }

    .wn-dwa-process-status {
        padding: 5px;
        font-size: 5px;
    }

}


/* =========================================================
   HERO — NARROW MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-hero h1 {
        font-size: 43px;
    }

    .wn-dwa-hero-visual {
        min-height: 720px;
    }

    .wn-dwa-flow-label small {
        font-size: 7px;
    }

    .wn-dwa-flow-start {
        width: 53%;
    }

    .wn-dwa-flow-result {
        width: 43%;
    }

    .wn-dwa-document-meta {
        display: none;
    }

    .wn-dwa-flow-process {
        top: 270px;
    }

    .wn-dwa-process-card {
        grid-template-columns: 30px minmax(0, 1fr);
    }

    .wn-dwa-process-status,
    .wn-dwa-process-arrow {
        grid-column: 2;
        justify-self: start;
    }

    .wn-dwa-flow-note {
        font-size: 6px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   02 — THE MANUAL PROCESS

   Purpose:
   Show the fragmentation of a manual business process before
   introducing the structured workflow solution later.

   Visual story:
   DOCUMENT → EMAIL → SPREADSHEET → APPROVAL

   Responsive approach:
   Follows the same Webnime discipline used on the completed
   AI Assistants & Knowledge Systems page:
   desktop → tablet → mobile → narrow mobile.
   ========================================================= */

.wn-dwa-problem {
    position: relative;
    overflow: hidden;
    padding: 125px 0 115px;
    background: #f4f7fa;
    color: #101d2d;
}

.wn-dwa-problem::before {
    content: "";
    position: absolute;
    top: 330px;
    left: -340px;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(35, 116, 255, .05);
    border-radius: 50%;
    box-shadow:
        0 0 0 120px rgba(35, 116, 255, .012),
        0 0 0 240px rgba(35, 116, 255, .006);
    pointer-events: none;
}

.wn-dwa-problem .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   SECTION INTRO

   Same editorial structure used across Webnime:
   section number + kicker + strong heading + supporting copy.
   ========================================================= */

.wn-dwa-problem-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-dwa-problem-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-dwa-section-number {
    padding-top: 8px;
    color: #2374ff;
    font-size: 11px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-section-kicker {
    display: block;
    margin-bottom: 20px;
    color: #2374ff;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-dwa-problem-title h2 {
    max-width: 690px;
    margin: 0;
    color: #101d2d;
    font-size: clamp(46px, 4.7vw, 68px);
    line-height: .99;
    letter-spacing: -.05em;
    font-weight: 650;
}

.wn-dwa-problem-title h2 span {
    display: block;
    margin-top: 5px;
    color: #2374ff;
    font-weight: 500;
}


/* =========================================================
   INTRO COPY

   This explains the business problem before the illustration
   shows how that fragmentation looks in practice.
   ========================================================= */

.wn-dwa-problem-intro {
    padding-top: 39px;
}

.wn-dwa-problem-intro p {
    max-width: 470px;
    margin: 0;
    color: #657386;
    font-size: 16px;
    line-height: 1.75;
}

.wn-dwa-problem-intro p + p {
    margin-top: 17px;
}


/* =========================================================
   MANUAL PROCESS SCENE

   A single horizontal process field rather than four generic
   feature cards. Each stage represents a different place
   where the same business request has to be handled manually.
   ========================================================= */

.wn-dwa-problem-scene {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        62px
        minmax(0, 1fr)
        62px
        minmax(0, 1fr)
        62px
        minmax(0, 1fr);
    gap: 0;
    align-items: center;
    margin-top: 92px;
    padding: 54px 0 48px;
    border-top: 1px solid rgba(16, 29, 45, .09);
    border-bottom: 1px solid rgba(16, 29, 45, .09);
}

.wn-dwa-problem-scene::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(35, 116, 255, .03),
        rgba(35, 116, 255, .11),
        rgba(35, 116, 255, .03)
    );
    pointer-events: none;
}


/* =========================================================
   PROCESS STAGES

   Stage numbers sit on the same grid as their UI component.
   Nothing is shifted outside the shared content alignment.
   ========================================================= */

.wn-dwa-problem-stage {
    position: relative;
    z-index: 2;
    min-width: 0;
}

.wn-dwa-problem-stage-number {
    display: block;
    margin-bottom: 14px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-problem-stage-label {
    display: block;
    margin-top: 15px;
    color: #758294;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}


/* =========================================================
   STEP 01 — REQUEST DOCUMENT

   Represents the original information entering the process.
   ========================================================= */

.wn-dwa-problem-document {
    min-height: 198px;
    padding: 18px;
    border: 1px solid #dce3eb;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(16, 29, 45, .055);
}

.wn-dwa-problem-document-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e9edf2;
}

.wn-dwa-problem-document-head span,
.wn-dwa-problem-document-head small {
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-problem-document-head span {
    color: #2374ff;
}

.wn-dwa-problem-document-head small {
    color: #9aa5b2;
}

.wn-dwa-problem-document > strong {
    display: block;
    margin-top: 18px;
    color: #172638;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-dwa-problem-document-lines {
    display: grid;
    gap: 7px;
    margin-top: 19px;
}

.wn-dwa-problem-document-lines i {
    display: block;
    height: 4px;
    background: #e8edf2;
}

.wn-dwa-problem-document-lines i:nth-child(2) {
    width: 83%;
}

.wn-dwa-problem-document-lines i:nth-child(3) {
    width: 58%;
    background: rgba(35, 116, 255, .13);
}

.wn-dwa-problem-document-foot {
    display: block;
    margin-top: 22px;
    color: #8b97a5;
    font-size: 8px;
    line-height: 1;
}


/* =========================================================
   MANUAL HANDOFFS

   These connectors are deliberately weaker than the workflow
   route in the Hero. They represent forwarding, waiting and
   follow-up rather than a controlled digital process.
   ========================================================= */

.wn-dwa-problem-handoff {
    position: relative;
    z-index: 3;
    display: grid;
    justify-items: center;
    gap: 8px;
}

.wn-dwa-problem-handoff i {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: repeating-linear-gradient(
        90deg,
        rgba(111, 126, 144, .32) 0,
        rgba(111, 126, 144, .32) 4px,
        transparent 4px,
        transparent 8px
    );
}

.wn-dwa-problem-handoff i:first-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 5px;
    height: 5px;
    border-top: 1px solid #8e9aa8;
    border-right: 1px solid #8e9aa8;
    transform: translateY(-50%) rotate(45deg);
}

.wn-dwa-problem-handoff span {
    color: #9aa5b2;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
    white-space: nowrap;
}


/* =========================================================
   STEP 02 — EMAIL

   The request leaves its original context and continues as
   a message with an attachment and a manual question.
   ========================================================= */

.wn-dwa-problem-email {
    min-height: 198px;
    padding: 18px;
    border: 1px solid #dce3eb;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(16, 29, 45, .055);
}

.wn-dwa-problem-email-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.wn-dwa-problem-email-top span,
.wn-dwa-problem-email-top small {
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-problem-email-top span {
    color: #2374ff;
}

.wn-dwa-problem-email-top small {
    color: #9aa5b2;
}

.wn-dwa-problem-email > strong {
    display: block;
    margin-top: 20px;
    color: #172638;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-dwa-problem-email > p {
    margin: 10px 0 0;
    color: #7b8795;
    font-size: 9px;
    line-height: 1.55;
}

.wn-dwa-problem-email-file {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-top: 18px;
    padding-top: 13px;
    border-top: 1px solid #e9edf2;
}

.wn-dwa-problem-email-file i {
    display: flex;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 116, 255, .18);
    background: rgba(35, 116, 255, .05);
    color: #2374ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    font-style: normal;
}

.wn-dwa-problem-email-file span {
    overflow: hidden;
    min-width: 0;
    color: #697789;
    font-size: 8px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   STEP 03 — TRACKING SHEET

   A second system is required simply to record where the
   request currently is.
   ========================================================= */

.wn-dwa-problem-sheet {
    min-height: 198px;
    padding: 18px;
    border: 1px solid #dce3eb;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(16, 29, 45, .055);
}

.wn-dwa-problem-sheet-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 13px;
    border-bottom: 1px solid #e9edf2;
}

.wn-dwa-problem-sheet-top span,
.wn-dwa-problem-sheet-top small {
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}

.wn-dwa-problem-sheet-top span {
    color: #2374ff;
}

.wn-dwa-problem-sheet-top small {
    color: #9aa5b2;
}

.wn-dwa-problem-sheet-row {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    gap: 7px;
    align-items: center;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid #edf1f4;
}

.wn-dwa-problem-sheet-row:last-child {
    border-bottom: 0;
}

.wn-dwa-problem-sheet-row span,
.wn-dwa-problem-sheet-row strong,
.wn-dwa-problem-sheet-row small {
    min-width: 0;
    font-size: 7px;
    line-height: 1.25;
}

.wn-dwa-problem-sheet-row span {
    overflow: hidden;
    color: #778494;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-dwa-problem-sheet-row strong {
    color: #d48b42;
    font-weight: 750;
}

.wn-dwa-problem-sheet-row small {
    color: #58a87e;
    font-weight: 700;
}


/* =========================================================
   STEP 04 — APPROVAL

   The process finally reaches a person whose response is
   needed before anything else can happen.
   ========================================================= */

.wn-dwa-problem-approval {
    min-height: 198px;
    padding: 18px;
    border: 1px solid #dce3eb;
    background: #ffffff;
    box-shadow: 0 18px 45px rgba(16, 29, 45, .055);
}

.wn-dwa-problem-approval > span {
    display: block;
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-problem-approval > strong {
    display: block;
    margin-top: 18px;
    color: #172638;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-dwa-problem-approval-person {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #e9edf2;
}

.wn-dwa-problem-approval-person > i {
    display: flex;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(35, 116, 255, .16);
    background: rgba(35, 116, 255, .05);
    color: #2374ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    font-style: normal;
}

.wn-dwa-problem-approval-person span,
.wn-dwa-problem-approval-person small {
    display: block;
}

.wn-dwa-problem-approval-person span {
    color: #647286;
    font-size: 8px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-dwa-problem-approval-person small {
    margin-top: 3px;
    color: #9aa5b2;
    font-size: 7px;
    line-height: 1.3;
}

.wn-dwa-problem-approval-status {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 16px;
}

.wn-dwa-problem-approval-status i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #d48b42;
    box-shadow: 0 0 8px rgba(212, 139, 66, .25);
}

.wn-dwa-problem-approval-status span {
    color: #b97939;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}


/* =========================================================
   PROBLEM SUMMARY

   The visual chain is compressed into a simple business
   conclusion underneath the process illustration.
   ========================================================= */

.wn-dwa-problem-summary {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 90px;
    align-items: center;
    margin-top: 48px;
}


/* =========================================================
   SUMMARY — PROCESS CHAIN
   ========================================================= */

.wn-dwa-problem-summary-line {
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto 1fr auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
}

.wn-dwa-problem-summary-line span {
    color: #7c8998;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .055em;
    white-space: nowrap;
}

.wn-dwa-problem-summary-line i {
    position: relative;
    display: block;
    height: 1px;
    background: rgba(35, 116, 255, .18);
}

.wn-dwa-problem-summary-line i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 4px;
    height: 4px;
    border-top: 1px solid #2374ff;
    border-right: 1px solid #2374ff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   SUMMARY — BUSINESS CONCLUSION
   ========================================================= */

.wn-dwa-problem-summary-copy {
    padding-left: 26px;
    border-left: 2px solid #2374ff;
}

.wn-dwa-problem-summary-copy > span {
    display: block;
    margin-bottom: 10px;
    color: #2374ff;
    font-size: 8px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-problem-summary-copy p {
    margin: 0;
    color: #6b7888;
    font-size: 14px;
    line-height: 1.65;
}

.wn-dwa-problem-summary-copy strong {
    color: #172638;
    font-weight: 650;
}


/* =========================================================
   RESPONSIVE — TABLET

   Keep the horizontal process while enough width remains.
   The intro tightens first, following the same progressive
   responsive approach as the AI page.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-problem .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-dwa-problem-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
        gap: 60px;
    }

    .wn-dwa-problem-scene {
        grid-template-columns:
            minmax(0, 1fr)
            42px
            minmax(0, 1fr)
            42px
            minmax(0, 1fr)
            42px
            minmax(0, 1fr);
    }

    .wn-dwa-problem-document,
    .wn-dwa-problem-email,
    .wn-dwa-problem-sheet,
    .wn-dwa-problem-approval {
        padding: 15px;
    }

    .wn-dwa-problem-summary {
        gap: 55px;
    }

}


/* =========================================================
   RESPONSIVE — STACKED TABLET

   At this width the editorial intro becomes one column.
   The process remains readable without changing its meaning.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-problem {
        padding: 110px 0 100px;
    }

    .wn-dwa-problem-head {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .wn-dwa-problem-title h2 {
        max-width: 720px;
    }

    .wn-dwa-problem-intro {
        max-width: 650px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-dwa-problem-intro p {
        max-width: 100%;
    }

    .wn-dwa-problem-scene {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 48px 30px;
        margin-top: 72px;
        padding: 48px 0;
    }

    .wn-dwa-problem-scene::before {
        display: none;
    }

    .wn-dwa-problem-handoff {
        display: none;
    }

    .wn-dwa-problem-document,
    .wn-dwa-problem-email,
    .wn-dwa-problem-sheet,
    .wn-dwa-problem-approval {
        min-height: 210px;
        padding: 20px;
    }

    .wn-dwa-problem-summary {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .wn-dwa-problem-summary-copy {
        max-width: 620px;
    }

}


/* =========================================================
   RESPONSIVE — MOBILE

   The four-stage process becomes one readable vertical story.
   No desktop width is retained and no element is positioned
   outside the shared Webnime wrapper.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-problem {
        padding: 90px 0 82px;
    }

    .wn-dwa-problem .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-dwa-problem-title {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
    }

    .wn-dwa-section-number {
        padding-top: 6px;
        font-size: 10px;
    }

    .wn-dwa-section-kicker {
        margin-bottom: 16px;
        font-size: 8px;
    }

    .wn-dwa-problem-title h2 {
        font-size: clamp(42px, 11.5vw, 58px);
    }

    .wn-dwa-problem-intro {
        padding-left: 54px;
    }

    .wn-dwa-problem-intro p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       Mobile process

       Cards are now one continuous vertical handoff.
       A subtle vertical line keeps the sense of movement.
       ----------------------------------------------------- */

    .wn-dwa-problem-scene {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        margin-top: 58px;
        padding: 40px 0;
    }

    .wn-dwa-problem-stage {
        position: relative;
        padding-left: 38px;
    }

    .wn-dwa-problem-stage::before {
        content: "";
        position: absolute;
        top: 28px;
        bottom: -40px;
        left: 5px;
        width: 1px;
        background: rgba(35, 116, 255, .18);
    }

    .wn-dwa-problem-stage::after {
        content: "";
        position: absolute;
        top: 4px;
        left: 1px;
        width: 9px;
        height: 9px;
        border: 2px solid #f4f7fa;
        border-radius: 50%;
        background: #2374ff;
        box-shadow: 0 0 0 1px rgba(35, 116, 255, .22);
    }

    .wn-dwa-problem-stage:last-child::before {
        bottom: 25px;
    }

    .wn-dwa-problem-stage + .wn-dwa-problem-stage {
        margin-top: 38px;
    }

    .wn-dwa-problem-stage-number {
        margin-bottom: 12px;
    }

    .wn-dwa-problem-document,
    .wn-dwa-problem-email,
    .wn-dwa-problem-sheet,
    .wn-dwa-problem-approval {
        min-height: 0;
        padding: 18px;
    }

    .wn-dwa-problem-stage-label {
        margin-top: 12px;
    }

    .wn-dwa-problem-handoff {
        display: none;
    }


    /* -----------------------------------------------------
       Mobile summary

       The compact horizontal chain becomes a vertical path,
       following the same treatment used in the Hero.
       ----------------------------------------------------- */

    .wn-dwa-problem-summary {
        gap: 32px;
        margin-top: 38px;
    }

    .wn-dwa-problem-summary-line {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .wn-dwa-problem-summary-line i {
        width: 1px;
        height: 14px;
        margin-left: 3px;
    }

    .wn-dwa-problem-summary-line i::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-dwa-problem-summary-copy {
        max-width: 100%;
        padding-left: 20px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-problem {
        padding: 82px 0 74px;
    }

    .wn-dwa-problem-title {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
    }

    .wn-dwa-problem-intro {
        padding-left: 42px;
    }

    .wn-dwa-problem-scene {
        margin-top: 50px;
    }

    .wn-dwa-problem-stage {
        padding-left: 30px;
    }

    .wn-dwa-problem-stage::before {
        left: 4px;
    }

    .wn-dwa-problem-stage::after {
        left: 0;
    }

    .wn-dwa-problem-document,
    .wn-dwa-problem-email,
    .wn-dwa-problem-sheet,
    .wn-dwa-problem-approval {
        padding: 16px;
    }

}


/* =========================================================
   RESPONSIVE — NARROW MOBILE
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-problem-title h2 {
        font-size: 40px;
    }

    .wn-dwa-problem-intro {
        padding-left: 0;
    }

    .wn-dwa-problem-sheet-row {
        grid-template-columns: 34px minmax(0, 1fr) auto;
        gap: 5px;
    }

    .wn-dwa-problem-summary-copy p {
        font-size: 13px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   02 — ONE CONTROLLED WORKFLOW

   Purpose:
   After Section 01 shows a process fragmented across tools
   and people, this section shows the opposite: one controlled
   workflow with rules, routing, responsibility and actions.

   Visual concept:
   INPUT → WORKFLOW ENGINE → CONTROLLED OUTCOME

   This is intentionally not a dashboard and does not repeat
   the Hero illustration. The centre acts as the operational
   "spine" of the business process.
   ========================================================= */

.wn-dwa-control {
    position: relative;
    overflow: hidden;
    padding: 128px 0 112px;
    background: #07111f;
    color: #ffffff;
}

.wn-dwa-control::before {
    content: "";
    position: absolute;
    top: 230px;
    right: -360px;
    width: 820px;
    height: 820px;
    border: 1px solid rgba(66, 145, 255, .055);
    border-radius: 50%;
    box-shadow:
        0 0 0 120px rgba(66, 145, 255, .018),
        0 0 0 240px rgba(66, 145, 255, .009);
    pointer-events: none;
}

.wn-dwa-control::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 7%;
    width: 1px;
    height: 44%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(66, 145, 255, .08),
        transparent
    );
    pointer-events: none;
}

.wn-dwa-control .wn-wrap {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   SECTION INTRO

   Keep the editorial language of the page while reversing
   the colour rhythm after the light Section 01.
   ========================================================= */

.wn-dwa-control-head {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
    gap: 100px;
    align-items: start;
}

.wn-dwa-control-title {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 24px;
    min-width: 0;
}

.wn-dwa-control-number {
    padding-top: 8px;
    color: #4291ff;
    font-size: 11px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-control-kicker {
    display: block;
    margin-bottom: 20px;
    color: #4291ff;
    font-size: 9px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-dwa-control-title h2 {
    max-width: 720px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(46px, 4.7vw, 68px);
    line-height: .99;
    letter-spacing: -.05em;
    font-weight: 650;
}

.wn-dwa-control-title h2 span {
    display: block;
    margin-top: 5px;
    color: #68adff;
    font-weight: 500;
}

.wn-dwa-control-intro {
    padding-top: 39px;
}

.wn-dwa-control-intro p {
    max-width: 470px;
    margin: 0;
    color: #8fa0b5;
    font-size: 16px;
    line-height: 1.75;
}

.wn-dwa-control-intro p + p {
    margin-top: 17px;
}


/* =========================================================
   WORKFLOW ENGINE FIELD

   The whole illustration is one connected operational field.
   The three areas are not equal "feature cards":
   input is quiet, the workflow engine dominates, and the
   output behaves like information produced by that engine.
   ========================================================= */

.wn-dwa-control-engine {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(190px, .72fr)
        86px
        minmax(430px, 1.48fr)
        minmax(215px, .8fr);
    gap: 0;
    align-items: center;
    margin-top: 92px;
    padding: 52px 0;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.wn-dwa-control-engine::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 3%;
    right: 3%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(66, 145, 255, .08) 12%,
        rgba(66, 145, 255, .18) 50%,
        rgba(66, 145, 255, .08) 88%,
        transparent
    );
    pointer-events: none;
}


/* =========================================================
   SHARED SIDE LABEL

   Small technical labels identify where information enters
   and what the workflow produces without competing with
   the central engine.
   ========================================================= */

.wn-dwa-control-side-label {
    display: block;
    margin-bottom: 15px;
    color: #61758d;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .11em;
}


/* =========================================================
   INPUT — BUSINESS REQUEST

   A deliberately compact request object. The user should
   immediately understand that information enters once and
   then becomes part of the controlled workflow.
   ========================================================= */

.wn-dwa-control-input {
    position: relative;
    z-index: 3;
    min-width: 0;
}

.wn-dwa-control-request {
    position: relative;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(115, 153, 198, .18);
    background:
        linear-gradient(
            145deg,
            rgba(15, 32, 52, .96),
            rgba(9, 23, 39, .96)
        );
    box-shadow: 0 24px 60px rgba(0, 0, 0, .2);
}

.wn-dwa-control-request::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 18px;
    width: 38px;
    height: 1px;
    background: #4291ff;
}

.wn-dwa-control-request-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.wn-dwa-control-request-top span,
.wn-dwa-control-request-top small {
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-control-request-top span {
    color: #4291ff;
}

.wn-dwa-control-request-top small {
    color: #64768b;
}

.wn-dwa-control-request > strong {
    display: block;
    margin-top: 19px;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 650;
}

.wn-dwa-control-request-data {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.wn-dwa-control-request-data div {
    min-width: 0;
}

.wn-dwa-control-request-data small,
.wn-dwa-control-request-data span {
    display: block;
}

.wn-dwa-control-request-data small {
    margin-bottom: 5px;
    color: #586b82;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-control-request-data span {
    overflow: hidden;
    color: #9fb0c4;
    font-size: 8px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-dwa-control-request-ready {
    display: flex;
    gap: 7px;
    align-items: center;
    margin-top: 21px;
    padding-top: 13px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.wn-dwa-control-request-ready i {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #47c98a;
    box-shadow: 0 0 10px rgba(71, 201, 138, .35);
}

.wn-dwa-control-request-ready span {
    color: #6fae91;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}


/* =========================================================
   ENTRY CONNECTION

   This connector is intentionally clean and continuous.
   Unlike the broken handoffs in Section 01, the request now
   enters a defined process instead of being forwarded around.
   ========================================================= */

.wn-dwa-control-entry {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    min-width: 0;
}

.wn-dwa-control-entry span {
    position: absolute;
    top: -18px;
    left: 50%;
    color: #587089;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
    transform: translateX(-50%);
}

.wn-dwa-control-entry i {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: #2374ff;
}

.wn-dwa-control-entry i::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #2374ff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 12px rgba(35, 116, 255, .45);
}

.wn-dwa-control-entry i::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1px;
    width: 6px;
    height: 6px;
    border-top: 1px solid #68adff;
    border-right: 1px solid #68adff;
    transform: translateY(-50%) rotate(45deg);
}


/* =========================================================
   CENTRAL WORKFLOW ENGINE

   This is the visual focus of the section. It has more weight
   than the input/output areas and acts as the process "machine"
   connecting business information with controlled outcomes.
   ========================================================= */

.wn-dwa-control-core {
    position: relative;
    z-index: 4;
    min-width: 0;
    padding: 19px 20px 20px;
    border: 1px solid rgba(87, 145, 211, .25);
    background:
        linear-gradient(
            145deg,
            rgba(12, 29, 49, .98),
            rgba(8, 21, 37, .98)
        );
    box-shadow:
        0 32px 80px rgba(0, 0, 0, .26),
        inset 0 1px 0 rgba(255, 255, 255, .02);
}

.wn-dwa-control-core::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 20px;
    right: 20px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #2374ff,
        #68adff,
        transparent
    );
}

.wn-dwa-control-core-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.wn-dwa-control-core-head > span {
    color: #7fb7ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .1em;
}

.wn-dwa-control-core-head > div {
    display: flex;
    gap: 7px;
    align-items: center;
}

.wn-dwa-control-core-head i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #47c98a;
    box-shadow: 0 0 10px rgba(71, 201, 138, .4);
}

.wn-dwa-control-core-head small {
    color: #6fae91;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}


/* =========================================================
   WORKFLOW ROUTE

   The vertical line visually binds all four workflow rules.
   Each step is part of one route rather than an independent
   card, reinforcing the "one process" concept.
   ========================================================= */

.wn-dwa-control-route {
    position: relative;
    display: grid;
    gap: 8px;
    margin-top: 16px;
}

.wn-dwa-control-route::before {
    content: "";
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 20px;
    width: 1px;
    background: linear-gradient(
        to bottom,
        #2374ff,
        rgba(66, 145, 255, .22)
    );
}

.wn-dwa-control-step {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    min-width: 0;
    padding: 11px 12px 11px 0;
    border: 1px solid transparent;
    transition:
        border-color .2s ease,
        background .2s ease;
}

.wn-dwa-control-step:nth-child(3) {
    border-color: rgba(66, 145, 255, .13);
    background: rgba(66, 145, 255, .035);
}

.wn-dwa-control-step-marker {
    position: relative;
    display: flex;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(66, 145, 255, .28);
    background: #0b1d31;
}

.wn-dwa-control-step-marker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4291ff;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 9px rgba(66, 145, 255, .45);
}

.wn-dwa-control-step-marker span {
    position: absolute;
    top: 5px;
    right: 5px;
    color: #557492;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-dwa-control-step-copy {
    min-width: 0;
}

.wn-dwa-control-step-copy small,
.wn-dwa-control-step-copy strong,
.wn-dwa-control-step-copy span {
    display: block;
}

.wn-dwa-control-step-copy small {
    margin-bottom: 4px;
    color: #4291ff;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .08em;
}

.wn-dwa-control-step-copy strong {
    overflow: hidden;
    color: #e8f0fa;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-dwa-control-step-copy span {
    overflow: hidden;
    margin-top: 3px;
    color: #657a91;
    font-size: 7px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wn-dwa-control-step-state {
    padding: 6px 7px;
    border: 1px solid rgba(71, 201, 138, .15);
    background: rgba(71, 201, 138, .04);
    color: #62b88f;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}


/* =========================================================
   CONTROLLED OUTCOME

   Instead of another large card, the right side behaves as
   information emerging from the workflow engine. A vertical
   guide links ownership, status, action and history.
   ========================================================= */

.wn-dwa-control-output {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding-left: 46px;
}

.wn-dwa-control-output::before {
    content: "";
    position: absolute;
    top: 38px;
    bottom: 20px;
    left: 22px;
    width: 1px;
    background: rgba(66, 145, 255, .15);
}

.wn-dwa-control-output::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 23px;
    height: 1px;
    background: #2374ff;
}

.wn-dwa-control-output-item {
    position: relative;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    align-items: center;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.wn-dwa-control-output-item:last-child {
    border-bottom: 0;
}

.wn-dwa-control-output-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -24px;
    width: 24px;
    height: 1px;
    background: rgba(66, 145, 255, .15);
}

.wn-dwa-control-output-icon {
    position: relative;
    display: flex;
    width: 34px;
    height: 34px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(66, 145, 255, .18);
    background: rgba(66, 145, 255, .035);
}

.wn-dwa-control-output-icon::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4291ff;
}

.wn-dwa-control-output-icon span {
    position: absolute;
    top: 4px;
    right: 4px;
    color: #526d88;
    font-size: 5px;
    line-height: 1;
    font-weight: 750;
}

.wn-dwa-control-output-item > div:last-child {
    min-width: 0;
}

.wn-dwa-control-output-item small,
.wn-dwa-control-output-item strong {
    display: block;
}

.wn-dwa-control-output-item small {
    margin-bottom: 4px;
    color: #597089;
    font-size: 6px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .07em;
}

.wn-dwa-control-output-item strong {
    color: #b8c7d8;
    font-size: 9px;
    line-height: 1.35;
    font-weight: 600;
}


/* =========================================================
   OPERATIONAL PRINCIPLES

   This closes the section with four concise business benefits.
   They are kept visually lighter than the workflow engine so
   the illustration remains the dominant storytelling device.
   ========================================================= */

.wn-dwa-control-principles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 48px;
    border-top: 1px solid rgba(255, 255, 255, .075);
    border-bottom: 1px solid rgba(255, 255, 255, .075);
}

.wn-dwa-control-principle {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 13px;
    min-width: 0;
    padding: 24px 24px 24px 0;
}

.wn-dwa-control-principle + .wn-dwa-control-principle {
    padding-left: 24px;
    border-left: 1px solid rgba(255, 255, 255, .075);
}

.wn-dwa-control-principle > span {
    padding-top: 3px;
    color: #4291ff;
    font-size: 7px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: .06em;
}

.wn-dwa-control-principle div {
    min-width: 0;
}

.wn-dwa-control-principle strong,
.wn-dwa-control-principle small {
    display: block;
}

.wn-dwa-control-principle strong {
    color: #d8e3ef;
    font-size: 11px;
    line-height: 1.3;
    font-weight: 650;
}

.wn-dwa-control-principle small {
    margin-top: 7px;
    color: #66798e;
    font-size: 8px;
    line-height: 1.55;
}


/* =========================================================
   RESPONSIVE — TABLET / SMALL DESKTOP

   The engine keeps its connected desktop architecture while
   the side areas tighten. No element is allowed to force the
   viewport wider than the Webnime wrapper.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-control .wn-wrap {
        width: calc(100% - 70px);
    }

    .wn-dwa-control-head {
        grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
        gap: 60px;
    }

    .wn-dwa-control-engine {
        grid-template-columns:
            minmax(165px, .65fr)
            58px
            minmax(390px, 1.45fr)
            minmax(185px, .75fr);
    }

    .wn-dwa-control-output {
        padding-left: 34px;
    }

    .wn-dwa-control-output::before {
        left: 15px;
    }

    .wn-dwa-control-output::after {
        width: 16px;
    }

    .wn-dwa-control-output-item::before {
        left: -19px;
        width: 19px;
    }

    .wn-dwa-control-principle {
        grid-template-columns: 24px minmax(0, 1fr);
        gap: 9px;
        padding-right: 15px;
    }

    .wn-dwa-control-principle + .wn-dwa-control-principle {
        padding-left: 15px;
    }

}


/* =========================================================
   RESPONSIVE — STACKED TABLET

   At this point the full four-column machine would become too
   compressed. The visual is restructured into a deliberate
   three-part journey:

   INPUT
     ↓
   WORKFLOW ENGINE
     ↓
   CONTROLLED OUTCOME

   This preserves the story rather than shrinking desktop UI.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-control {
        padding: 110px 0 100px;
    }

    .wn-dwa-control-head {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .wn-dwa-control-title h2 {
        max-width: 720px;
    }

    .wn-dwa-control-intro {
        max-width: 650px;
        padding-top: 0;
        padding-left: 76px;
    }

    .wn-dwa-control-intro p {
        max-width: 100%;
    }

    .wn-dwa-control-engine {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        max-width: 680px;
        margin: 72px auto 0;
        padding: 48px 0;
    }

    .wn-dwa-control-engine::before {
        top: 40px;
        bottom: 40px;
        left: 50%;
        right: auto;
        width: 1px;
        height: auto;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(66, 145, 255, .17),
            transparent
        );
    }

    .wn-dwa-control-input {
        width: 54%;
        max-width: 330px;
        justify-self: start;
    }


    /* Entry connector becomes vertical */

    .wn-dwa-control-entry {
        width: 1px;
        height: 48px;
        margin-left: 27%;
    }

    .wn-dwa-control-entry span {
        top: 50%;
        left: 13px;
        transform: translateY(-50%);
    }

    .wn-dwa-control-entry i {
        width: 1px;
        height: 100%;
    }

    .wn-dwa-control-entry i::before {
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .wn-dwa-control-entry i::after {
        top: auto;
        right: auto;
        bottom: 1px;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }


    /* Engine remains the dominant middle element */

    .wn-dwa-control-core {
        width: 82%;
        max-width: 560px;
        justify-self: center;
    }


    /* Output becomes a horizontal information field below */

    .wn-dwa-control-output {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 26px;
        width: 82%;
        max-width: 560px;
        margin-top: 48px;
        padding: 28px 0 0;
        justify-self: center;
        border-top: 1px solid rgba(66, 145, 255, .16);
    }

    .wn-dwa-control-output::before {
        top: -49px;
        bottom: auto;
        left: 50%;
        width: 1px;
        height: 49px;
    }

    .wn-dwa-control-output::after {
        top: -49px;
        left: 50%;
        width: 1px;
        height: 49px;
    }

    .wn-dwa-control-output > .wn-dwa-control-side-label {
        grid-column: 1 / -1;
        margin-bottom: 10px;
    }

    .wn-dwa-control-output-item::before {
        display: none;
    }

    .wn-dwa-control-principles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-dwa-control-principle:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .075);
        padding-left: 0;
    }

    .wn-dwa-control-principle:nth-child(4) {
        border-top: 1px solid rgba(255, 255, 255, .075);
    }

}


/* =========================================================
   RESPONSIVE — MOBILE

   Mobile keeps the visual as a process, not a collection of
   tiny desktop cards. All meaningful text remains readable,
   and the engine becomes the clear centre of the section.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-control {
        padding: 90px 0 82px;
    }

    .wn-dwa-control .wn-wrap {
        width: calc(100% - 40px);
    }

    .wn-dwa-control-title {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 16px;
    }

    .wn-dwa-control-number {
        padding-top: 6px;
        font-size: 10px;
    }

    .wn-dwa-control-kicker {
        margin-bottom: 16px;
        font-size: 8px;
    }

    .wn-dwa-control-title h2 {
        font-size: clamp(42px, 11.5vw, 58px);
    }

    .wn-dwa-control-intro {
        padding-left: 54px;
    }

    .wn-dwa-control-intro p {
        font-size: 15px;
        line-height: 1.7;
    }


    /* -----------------------------------------------------
       Mobile workflow journey
       ----------------------------------------------------- */

    .wn-dwa-control-engine {
        width: 100%;
        max-width: 100%;
        margin-top: 58px;
        padding: 40px 0;
    }

    .wn-dwa-control-input {
        width: 78%;
        max-width: 330px;
    }

    .wn-dwa-control-entry {
        height: 42px;
        margin-left: 39%;
    }

    .wn-dwa-control-core {
        width: 100%;
        max-width: 100%;
        padding: 17px 15px 16px;
        box-sizing: border-box;
    }

    .wn-dwa-control-route {
        gap: 9px;
    }

    .wn-dwa-control-step {
        grid-template-columns: 38px minmax(0, 1fr) auto;
        gap: 10px;
        padding-right: 8px;
    }

    .wn-dwa-control-step-marker {
        width: 38px;
        height: 38px;
    }

    .wn-dwa-control-route::before {
        left: 19px;
    }

    .wn-dwa-control-step-copy strong {
        font-size: 10px;
        white-space: normal;
    }

    .wn-dwa-control-step-copy span {
        font-size: 7px;
        white-space: normal;
    }

    .wn-dwa-control-step-state {
        padding: 5px;
    }


    /* -----------------------------------------------------
       Controlled outcome

       Two-column layout keeps the four results readable
       without producing an unnecessarily long mobile block.
       ----------------------------------------------------- */

    .wn-dwa-control-output {
        width: 100%;
        max-width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 18px;
        box-sizing: border-box;
    }

    .wn-dwa-control-output-item {
        grid-template-columns: 32px minmax(0, 1fr);
        gap: 9px;
    }

    .wn-dwa-control-output-icon {
        width: 32px;
        height: 32px;
    }


    /* -----------------------------------------------------
       Principles

       Become one clean column so explanatory copy remains
       comfortably readable on phones.
       ----------------------------------------------------- */

    .wn-dwa-control-principles {
        grid-template-columns: 1fr;
        margin-top: 38px;
    }

    .wn-dwa-control-principle,
    .wn-dwa-control-principle + .wn-dwa-control-principle,
    .wn-dwa-control-principle:nth-child(3),
    .wn-dwa-control-principle:nth-child(4) {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
        padding: 18px 0;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, .075);
    }

    .wn-dwa-control-principle:first-child {
        border-top: 0;
    }

    .wn-dwa-control-principle strong {
        font-size: 11px;
    }

    .wn-dwa-control-principle small {
        font-size: 8px;
    }

}


/* =========================================================
   RESPONSIVE — SMALL MOBILE

   Simplify spacing rather than shrinking meaningful text.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-control {
        padding: 82px 0 74px;
    }

    .wn-dwa-control-title {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
    }

    .wn-dwa-control-intro {
        padding-left: 42px;
    }

    .wn-dwa-control-input {
        width: 88%;
    }

    .wn-dwa-control-entry {
        margin-left: 44%;
    }

    .wn-dwa-control-request {
        padding: 16px;
    }

    .wn-dwa-control-core {
        padding-inline: 12px;
    }

    .wn-dwa-control-step {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 9px;
        padding: 10px 5px 10px 0;
    }

    .wn-dwa-control-step-marker {
        width: 36px;
        height: 36px;
    }

    .wn-dwa-control-route::before {
        left: 18px;
    }

    .wn-dwa-control-step-state {
        grid-column: 2;
        justify-self: start;
        margin-top: 2px;
    }

    .wn-dwa-control-output {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .wn-dwa-control-output-item {
        padding: 13px 0;
    }

}


/* =========================================================
   RESPONSIVE — NARROW MOBILE

   Final protection for very narrow screens. Structure stays
   intact and no horizontal overflow is introduced.
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-control-title h2 {
        font-size: 40px;
    }

    .wn-dwa-control-intro {
        padding-left: 0;
    }

    .wn-dwa-control-input {
        width: 94%;
    }

    .wn-dwa-control-entry {
        margin-left: 47%;
    }

    .wn-dwa-control-request-data {
        grid-template-columns: 1fr;
        gap: 9px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   03 — DOCUMENTS BECOME ACTIONABLE

   Light section showing how an incoming business document
   becomes structured information that can continue through
   a controlled workflow.

   Desktop:
   document → extraction → structured data

   Mobile:
   the same story is reorganised into a vertical journey
   rather than simply shrinking the desktop composition.
   ========================================================= */


.wn-dwa-documents {
    position: relative;
    overflow: hidden;
    padding: 132px 0 108px;
    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(34, 108, 255, 0.08),
            transparent 31%
        ),
        #f5f7fa;
    color: var(--ink, #101828);
}


/* Subtle technical grid behind the visual side.
   It gives the section structure without turning the
   background into another dashboard. */

.wn-dwa-documents::before {
    content: "";
    position: absolute;
    top: 120px;
    right: -80px;
    width: 760px;
    height: 610px;
    pointer-events: none;
    opacity: 0.42;
    background-image:
        linear-gradient(rgba(15, 36, 64, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(15, 36, 64, 0.045) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(
        90deg,
        transparent 0%,
        #000 22%,
        #000 78%,
        transparent 100%
    );
}


.wn-dwa-documents .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   MAIN SECTION GRID
   ========================================================= */

.wn-dwa-documents-grid {
    display: grid;
    grid-template-columns:
        minmax(360px, 0.82fr)
        minmax(620px, 1.35fr);
    gap: clamp(58px, 6vw, 96px);
    align-items: center;
}


.wn-dwa-documents-content,
.wn-dwa-documents-visual {
    min-width: 0;
}


/* =========================================================
   LEFT — EDITORIAL CONTENT
   ========================================================= */

.wn-dwa-section-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 26px;
}


.wn-dwa-section-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(15, 36, 64, 0.14);
    border-radius: 50%;
    color: var(--blue, #226cff);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}


.wn-dwa-section-kicker {
    color: #526071;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.14em;
}


.wn-dwa-documents-content h2 {
    max-width: 560px;
    margin: 0;
    color: #0b1728;
    font-size: clamp(42px, 4vw, 64px);
    font-weight: 750;
    line-height: 0.99;
    letter-spacing: -0.045em;
}


.wn-dwa-documents-lead {
    max-width: 535px;
    margin: 28px 0 0;
    color: #586575;
    font-size: 17px;
    line-height: 1.72;
}


/* The three points continue the document story in plain
   business language rather than repeating the visual. */

.wn-dwa-documents-points {
    max-width: 540px;
    margin-top: 42px;
    border-top: 1px solid rgba(15, 36, 64, 0.12);
}


.wn-dwa-documents-point {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 17px;
    padding: 20px 0;
    border-bottom: 1px solid rgba(15, 36, 64, 0.12);
}


.wn-dwa-documents-point-index {
    padding-top: 3px;
    color: var(--blue, #226cff);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 0.08em;
}


.wn-dwa-documents-point h3 {
    margin: 0 0 5px;
    color: #142236;
    font-size: 16px;
    font-weight: 750;
    line-height: 1.35;
}


.wn-dwa-documents-point p {
    max-width: 440px;
    margin: 0;
    color: #687485;
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   RIGHT — DOCUMENT TRANSFORMATION STAGE
   ========================================================= */

.wn-dwa-documents-visual {
    position: relative;
}


.wn-dwa-documents-stage {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(205px, 0.88fr)
        82px
        minmax(260px, 1.12fr);
    align-items: center;
    min-height: 550px;
    padding: 54px 28px;
}


/* Soft field behind the transformation scene. */

.wn-dwa-documents-stage::before {
    content: "";
    position: absolute;
    inset: 38px 4px 32px;
    border: 1px solid rgba(19, 49, 84, 0.09);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.82),
            rgba(255, 255, 255, 0.42)
        );
    box-shadow:
        0 32px 70px rgba(22, 42, 70, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* =========================================================
   INCOMING DOCUMENT
   ========================================================= */

.wn-dwa-document-source {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding: 18px;
    border: 1px solid rgba(18, 44, 77, 0.13);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 22px 46px rgba(20, 43, 72, 0.12),
        0 2px 5px rgba(20, 43, 72, 0.04);
    transform: rotate(-1.5deg);
}


.wn-dwa-document-source-top {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #e7ebf0;
}


.wn-dwa-document-source-top > div,
.wn-dwa-document-data-head > div {
    min-width: 0;
}


.wn-dwa-document-file-icon {
    position: relative;
    display: block;
    width: 34px;
    height: 40px;
    flex: 0 0 34px;
    border: 1.5px solid #256df1;
    border-radius: 6px;
    background: #edf4ff;
}


.wn-dwa-document-file-icon::before {
    content: "";
    position: absolute;
    top: -1.5px;
    right: -1.5px;
    width: 11px;
    height: 11px;
    border-left: 1.5px solid #256df1;
    border-bottom: 1.5px solid #256df1;
    border-radius: 0 5px 0 3px;
    background: #ffffff;
}


.wn-dwa-document-file-icon span,
.wn-dwa-document-file-icon span::before,
.wn-dwa-document-file-icon span::after {
    position: absolute;
    left: 7px;
    width: 16px;
    height: 1.5px;
    border-radius: 4px;
    background: #76a0ed;
}


.wn-dwa-document-file-icon span {
    top: 19px;
}


.wn-dwa-document-file-icon span::before,
.wn-dwa-document-file-icon span::after {
    content: "";
    left: 0;
}


.wn-dwa-document-file-icon span::before {
    top: 5px;
}


.wn-dwa-document-file-icon span::after {
    top: 10px;
    width: 11px;
}


.wn-dwa-document-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #8490a0;
    font-size: 8px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-dwa-document-source-top strong,
.wn-dwa-document-data-head strong {
    display: block;
    overflow: hidden;
    color: #172538;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* The inner paper makes the source unmistakably read as
   a business document rather than another application card. */

.wn-dwa-document-sheet {
    margin-top: 16px;
    padding: 14px;
    border: 1px solid #e3e8ee;
    border-radius: 9px;
    background: #fafbfc;
}


.wn-dwa-document-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 15px;
    color: #7b8796;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.1em;
}


.wn-dwa-document-sheet-line {
    width: 67%;
    height: 4px;
    margin-bottom: 7px;
    border-radius: 10px;
    background: #dce2e9;
}


.wn-dwa-document-sheet-line--long {
    width: 88%;
}


.wn-dwa-document-sheet-line--short {
    width: 45%;
    margin-top: 14px;
    margin-bottom: 0;
}


.wn-dwa-document-field {
    position: relative;
    margin-top: 11px;
    padding: 9px 10px 9px 12px;
    border: 1px solid rgba(34, 108, 255, 0.15);
    border-radius: 7px;
    background: #f1f6ff;
}


.wn-dwa-document-field::before {
    content: "";
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: -1px;
    width: 2px;
    border-radius: 3px;
    background: var(--blue, #226cff);
}


.wn-dwa-document-field span {
    display: block;
    margin-bottom: 2px;
    color: #7a8797;
    font-size: 7px;
    font-weight: 750;
    line-height: 1.3;
}


.wn-dwa-document-field strong {
    display: block;
    overflow: hidden;
    color: #23364d;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-dwa-document-source-foot {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 13px;
    color: #8793a1;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.09em;
}


.wn-dwa-document-source-foot span:last-child {
    color: #268460;
}


/* =========================================================
   EXTRACTION BRIDGE
   ========================================================= */

.wn-dwa-document-transform {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    width: calc(100% + 22px);
    margin-left: -11px;
}


.wn-dwa-document-transform-line {
    position: relative;
    flex: 1 1 auto;
    height: 1px;
    background: rgba(34, 108, 255, 0.28);
}


.wn-dwa-document-transform-line:first-child::after {
    content: "";
    position: absolute;
    top: -2px;
    right: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--blue, #226cff);
    box-shadow: 0 0 0 4px rgba(34, 108, 255, 0.10);
}


.wn-dwa-document-transform-line:last-child::after {
    content: "";
    position: absolute;
    top: -3px;
    right: -1px;
    width: 6px;
    height: 6px;
    border-top: 1.5px solid #226cff;
    border-right: 1.5px solid #226cff;
    transform: rotate(45deg);
}


.wn-dwa-document-transform-core {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 62px;
    height: 62px;
    flex: 0 0 62px;
    margin-inline: 8px;
    border: 1px solid rgba(34, 108, 255, 0.25);
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 10px 28px rgba(34, 108, 255, 0.13),
        0 0 0 7px rgba(34, 108, 255, 0.04);
}


.wn-dwa-document-transform-pulse {
    position: absolute;
    inset: -9px;
    border: 1px solid rgba(34, 108, 255, 0.12);
    border-radius: 50%;
}


.wn-dwa-document-transform-icon {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 16px;
    margin-bottom: 5px;
}


.wn-dwa-document-transform-icon span {
    display: block;
    width: 3px;
    border-radius: 3px;
    background: var(--blue, #226cff);
}


.wn-dwa-document-transform-icon span:nth-child(1) {
    height: 8px;
}


.wn-dwa-document-transform-icon span:nth-child(2) {
    height: 15px;
}


.wn-dwa-document-transform-icon span:nth-child(3) {
    height: 11px;
}


.wn-dwa-document-transform-core strong {
    color: #45617f;
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.12em;
}


/* =========================================================
   STRUCTURED DATA
   ========================================================= */

.wn-dwa-document-data {
    position: relative;
    z-index: 3;
    min-width: 0;
    padding: 20px;
    border: 1px solid rgba(18, 44, 77, 0.13);
    border-radius: 18px;
    background: #ffffff;
    box-shadow:
        0 24px 54px rgba(20, 43, 72, 0.13),
        0 2px 5px rgba(20, 43, 72, 0.04);
}


.wn-dwa-document-data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e7ebf0;
}


.wn-dwa-document-data-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 5px 8px;
    flex: 0 0 auto;
    border: 1px solid rgba(31, 151, 103, 0.18);
    border-radius: 999px;
    background: #edf9f4;
    color: #25825f;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.08em;
}


.wn-dwa-document-data-list {
    margin-top: 8px;
}


.wn-dwa-document-data-row {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-width: 0;
    padding: 12px 0;
    border-bottom: 1px solid #edf0f3;
}


.wn-dwa-document-data-key {
    color: #8b96a4;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.09em;
}


.wn-dwa-document-data-value {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 7px;
}


.wn-dwa-document-data-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border-radius: 50%;
    background: #e9f7f1;
    color: #25825f;
    font-size: 9px;
    font-weight: 900;
}


.wn-dwa-document-data-value strong {
    display: block;
    min-width: 0;
    overflow: hidden;
    color: #26384d;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* The extracted data now has somewhere to go.
   This is the bridge from document automation to workflow. */

.wn-dwa-document-data-next {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 17px;
    padding: 12px 13px;
    border: 1px solid rgba(34, 108, 255, 0.14);
    border-radius: 10px;
    background: #f1f6ff;
}


.wn-dwa-document-data-next div {
    min-width: 0;
}


.wn-dwa-document-data-next span:first-child {
    display: block;
    margin-bottom: 2px;
    color: #7d8998;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.09em;
}


.wn-dwa-document-data-next strong {
    display: block;
    overflow: hidden;
    color: #1f3d63;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-dwa-document-data-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--blue, #226cff);
    color: #ffffff;
    font-size: 15px;
    line-height: 1;
}


/* =========================================================
   FLOATING STORY LABELS
   ========================================================= */

.wn-dwa-document-float {
    position: absolute;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(17, 43, 75, 0.10);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 8px 20px rgba(21, 43, 70, 0.08);
    color: #6d7988;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.09em;
    white-space: nowrap;
}


.wn-dwa-document-float span {
    color: var(--blue, #226cff);
}


.wn-dwa-document-float--input {
    top: 61px;
    left: 8px;
}


.wn-dwa-document-float--output {
    right: 0;
    bottom: 53px;
}


/* =========================================================
   BOTTOM PRINCIPLE
   ========================================================= */

.wn-dwa-documents-principle {
    display: grid;
    grid-template-columns: minmax(80px, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 66px;
}


.wn-dwa-documents-principle-line {
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(18, 45, 78, 0.08),
        rgba(18, 45, 78, 0.22)
    );
}


.wn-dwa-documents-principle p {
    max-width: 710px;
    margin: 0;
    color: #74808e;
    font-size: 14px;
    line-height: 1.65;
    text-align: right;
}


.wn-dwa-documents-principle strong {
    color: #24364b;
    font-weight: 750;
}


/* =========================================================
   TABLET — ≤ 1100px

   Keep the horizontal transformation story, but give the
   visual a larger share of the available width and tighten
   decorative spacing.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-documents {
        padding: 112px 0 94px;
    }

    .wn-dwa-documents .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-dwa-documents-grid {
        grid-template-columns:
            minmax(310px, 0.76fr)
            minmax(520px, 1.24fr);
        gap: 44px;
    }

    .wn-dwa-documents-content h2 {
        font-size: clamp(39px, 4.6vw, 54px);
    }

    .wn-dwa-documents-stage {
        grid-template-columns:
            minmax(185px, 0.88fr)
            72px
            minmax(225px, 1.12fr);
        min-height: 520px;
        padding-inline: 20px;
    }

    .wn-dwa-document-source {
        padding: 15px;
    }

    .wn-dwa-document-data {
        padding: 17px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   This is the important structural breakpoint. The section
   becomes one column before the desktop illustration starts
   fighting for space.

   The visual itself still tells the same left-to-right story
   because there is enough room at this width.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-documents::before {
        top: auto;
        right: -120px;
        bottom: 170px;
        width: 720px;
        height: 520px;
    }

    .wn-dwa-documents-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
    }

    .wn-dwa-documents-content {
        max-width: 720px;
    }

    .wn-dwa-documents-content h2 {
        max-width: 690px;
        font-size: clamp(44px, 6.4vw, 60px);
    }

    .wn-dwa-documents-lead {
        max-width: 650px;
    }

    .wn-dwa-documents-points {
        max-width: 690px;
    }

    .wn-dwa-documents-point p {
        max-width: 590px;
    }

    .wn-dwa-documents-visual {
        width: min(100%, 760px);
        margin-inline: auto;
    }

    .wn-dwa-documents-stage {
        grid-template-columns:
            minmax(215px, 0.88fr)
            88px
            minmax(270px, 1.12fr);
        min-height: 560px;
        padding-inline: 34px;
    }

    .wn-dwa-documents-principle {
        margin-top: 56px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The illustration is rebuilt as a vertical transformation:
   incoming document
        ↓
   extraction
        ↓
   structured data

   Nothing depends on squeezing desktop columns into a phone.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-documents {
        padding: 88px 0 76px;
    }

    .wn-dwa-documents .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-dwa-documents::before {
        right: -270px;
        bottom: 250px;
        width: 620px;
        height: 720px;
        opacity: 0.34;
    }

    .wn-dwa-section-label {
        gap: 11px;
        margin-bottom: 21px;
    }

    .wn-dwa-section-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-dwa-section-kicker {
        font-size: 10px;
        letter-spacing: 0.11em;
    }

    .wn-dwa-documents-content h2 {
        max-width: 580px;
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1.01;
    }

    .wn-dwa-documents-lead {
        margin-top: 22px;
        font-size: 16px;
        line-height: 1.68;
    }

    .wn-dwa-documents-points {
        margin-top: 34px;
    }

    .wn-dwa-documents-point {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 13px;
        padding: 17px 0;
    }

    .wn-dwa-documents-point h3 {
        font-size: 15px;
    }

    .wn-dwa-documents-point p {
        font-size: 13px;
        line-height: 1.58;
    }

    .wn-dwa-documents-grid {
        gap: 48px;
    }

    .wn-dwa-documents-visual {
        width: min(100%, 470px);
    }

    .wn-dwa-documents-stage {
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 62px 30px 58px;
    }

    .wn-dwa-documents-stage::before {
        inset: 20px 0;
        border-radius: 24px;
    }

    .wn-dwa-document-source,
    .wn-dwa-document-data {
        width: min(100%, 330px);
    }

    .wn-dwa-document-source {
        transform: rotate(-1deg);
    }

    /* The horizontal bridge becomes a vertical connector. */

    .wn-dwa-document-transform {
        flex-direction: column;
        width: 76px;
        height: 112px;
        margin: -3px 0;
    }

    .wn-dwa-document-transform-line {
        width: 1px;
        height: auto;
        min-height: 23px;
        flex: 1 1 auto;
        background: rgba(34, 108, 255, 0.28);
    }

    .wn-dwa-document-transform-line:first-child::after {
        top: auto;
        right: -2px;
        bottom: 0;
    }

    .wn-dwa-document-transform-line:last-child::after {
        top: auto;
        right: -3px;
        bottom: 0;
        transform: rotate(135deg);
    }

    .wn-dwa-document-transform-core {
        width: 58px;
        height: 58px;
        flex-basis: 58px;
        margin: 8px 0;
    }

    .wn-dwa-document-float--input {
        top: 29px;
        left: 16px;
    }

    .wn-dwa-document-float--output {
        right: 14px;
        bottom: 27px;
    }

    .wn-dwa-documents-principle {
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 16px;
        margin-top: 48px;
    }

    .wn-dwa-documents-principle p {
        font-size: 13px;
        line-height: 1.6;
        text-align: left;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Increase the important UI text instead of endlessly
   shrinking the illustration. Decorative labels are reduced
   where they do not carry essential meaning.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-documents {
        padding: 78px 0 68px;
    }

    .wn-dwa-documents .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-dwa-documents-content h2 {
        font-size: clamp(36px, 10.8vw, 46px);
        letter-spacing: -0.04em;
    }

    .wn-dwa-documents-stage {
        padding: 58px 18px 54px;
    }

    .wn-dwa-document-source,
    .wn-dwa-document-data {
        width: min(100%, 320px);
    }

    .wn-dwa-document-source {
        padding: 16px;
    }

    .wn-dwa-document-data {
        padding: 17px;
    }

    /* Meaningful labels become larger on the phone.
       The visual should still be readable without zooming. */

    .wn-dwa-document-eyebrow {
        font-size: 8px;
    }

    .wn-dwa-document-source-top strong,
    .wn-dwa-document-data-head strong {
        font-size: 12px;
    }

    .wn-dwa-document-sheet-head,
    .wn-dwa-document-source-foot {
        font-size: 8px;
    }

    .wn-dwa-document-field span,
    .wn-dwa-document-data-key,
    .wn-dwa-document-data-next span:first-child {
        font-size: 8px;
    }

    .wn-dwa-document-field strong,
    .wn-dwa-document-data-value strong {
        font-size: 10px;
    }

    .wn-dwa-document-data-next strong {
        font-size: 11px;
    }

    .wn-dwa-document-data-row {
        grid-template-columns: 76px minmax(0, 1fr);
        gap: 9px;
    }

    .wn-dwa-document-data-status {
        font-size: 7px;
    }

    .wn-dwa-document-float {
        font-size: 7px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final width protection. Important content remains intact;
   only non-essential floating labels are removed.
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-documents .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-dwa-documents-content h2 {
        font-size: 35px;
    }

    .wn-dwa-documents-lead {
        font-size: 15px;
    }

    .wn-dwa-documents-stage {
        padding-inline: 13px;
    }

    .wn-dwa-document-float {
        display: none;
    }

    .wn-dwa-document-data-head {
        gap: 8px;
    }

    .wn-dwa-document-data-status {
        padding-inline: 6px;
    }

    .wn-dwa-document-data-row {
        grid-template-columns: 69px minmax(0, 1fr);
        gap: 7px;
    }

    .wn-dwa-documents-principle {
        grid-template-columns: 30px minmax(0, 1fr);
        gap: 12px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   04 — AUTOMATION & EXCEPTIONS

   Dark decision-map section.

   The visual explains a core automation principle:
   routine work continues automatically, while exceptions
   are surfaced to the right person with useful context.

   Desktop:
   incoming item → automated check → split → two outcomes

   Mobile:
   the same logic becomes a vertical decision journey.
   ========================================================= */


.wn-dwa-exceptions {
    position: relative;
    overflow: hidden;
    padding: 128px 0 108px;
    background:
        radial-gradient(
            circle at 78% 44%,
            rgba(35, 109, 255, 0.10),
            transparent 32%
        ),
        #07111f;
    color: #ffffff;
}


/* Large technical orbit gives the section its own silhouette
   without repeating the card/grid language of earlier sections. */

.wn-dwa-exceptions::before {
    content: "";
    position: absolute;
    top: 250px;
    left: 50%;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(87, 145, 255, 0.07);
    border-radius: 50%;
    transform: translateX(-8%);
    pointer-events: none;
}


.wn-dwa-exceptions::after {
    content: "";
    position: absolute;
    top: 365px;
    left: 50%;
    width: 530px;
    height: 530px;
    border: 1px solid rgba(87, 145, 255, 0.05);
    border-radius: 50%;
    transform: translateX(9%);
    pointer-events: none;
}


.wn-dwa-exceptions .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-dwa-exceptions-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}


.wn-dwa-exceptions-title,
.wn-dwa-exceptions-intro {
    min-width: 0;
}


.wn-dwa-exceptions-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
}


.wn-dwa-exceptions-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(91, 151, 255, 0.26);
    border-radius: 50%;
    color: #5d9cff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}


.wn-dwa-exceptions-kicker {
    color: #8ba0ba;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.14em;
}


.wn-dwa-exceptions-title h2 {
    max-width: 800px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.7vw, 68px);
    font-weight: 750;
    line-height: 0.99;
    letter-spacing: -0.047em;
}


.wn-dwa-exceptions-title h2 span {
    color: #61a2ff;
}


.wn-dwa-exceptions-intro {
    padding-bottom: 4px;
}


.wn-dwa-exceptions-intro p {
    margin: 0;
    color: #91a2b8;
    font-size: 15px;
    line-height: 1.7;
}


.wn-dwa-exceptions-intro p + p {
    margin-top: 16px;
}


/* =========================================================
   DECISION MAP

   Five columns create a single readable journey:
   input → connection → decision → split → outcomes.
   The final column contains the two possible paths.
   ========================================================= */

.wn-dwa-exceptions-map {
    position: relative;
    display: grid;
    grid-template-columns:
        minmax(180px, 0.78fr)
        78px
        minmax(290px, 1.22fr)
        108px
        minmax(250px, 1fr);
    gap: 0;
    align-items: center;
    min-height: 520px;
    margin-top: 78px;
    padding: 54px 34px;
    border-top: 1px solid rgba(122, 157, 200, 0.11);
    border-bottom: 1px solid rgba(122, 157, 200, 0.11);
}


/* A faint central axis makes the whole scene read as one
   process rather than a collection of independent cards. */

.wn-dwa-exceptions-map::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 34px;
    left: 34px;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(65, 125, 219, 0.06),
        rgba(65, 125, 219, 0.28) 38%,
        rgba(65, 125, 219, 0.16) 72%,
        rgba(65, 125, 219, 0.04)
    );
}


/* =========================================================
   SHARED MICRO LABEL
   ========================================================= */

.wn-dwa-exceptions-eyebrow {
    display: block;
    color: #68809c;
    font-size: 8px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.13em;
}


/* =========================================================
   INCOMING ITEM
   ========================================================= */

.wn-dwa-exceptions-entry {
    position: relative;
    z-index: 3;
    min-width: 0;
}


.wn-dwa-exceptions-entry > .wn-dwa-exceptions-eyebrow {
    margin-bottom: 11px;
}


.wn-dwa-exceptions-entry-card {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(78, 134, 206, 0.20);
    border-radius: 12px;
    background: #0a192b;
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.15);
}


.wn-dwa-exceptions-entry-icon {
    position: relative;
    display: block;
    width: 34px;
    height: 39px;
    flex: 0 0 34px;
    border: 1px solid #397fe9;
    border-radius: 5px;
    background: rgba(41, 111, 220, 0.08);
}


.wn-dwa-exceptions-entry-icon::before {
    content: "";
    position: absolute;
    top: 9px;
    right: 7px;
    left: 7px;
    height: 1px;
    background: #4388ee;
    box-shadow:
        0 6px 0 rgba(67, 136, 238, 0.60),
        0 12px 0 rgba(67, 136, 238, 0.32);
}


.wn-dwa-exceptions-entry-card div {
    min-width: 0;
}


.wn-dwa-exceptions-entry-card strong {
    display: block;
    overflow: hidden;
    color: #f5f9ff;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-dwa-exceptions-entry-card div span {
    display: block;
    margin-top: 3px;
    color: #758aa3;
    font-size: 9px;
    line-height: 1.4;
}


/* =========================================================
   ENTRY CONNECTION
   ========================================================= */

.wn-dwa-exceptions-route {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
}


.wn-dwa-exceptions-route-line {
    width: 100%;
    height: 1px;
    background: #285a9e;
}


.wn-dwa-exceptions-route-dot {
    position: absolute;
    top: 50%;
    right: -3px;
    width: 7px;
    height: 7px;
    border: 2px solid #07111f;
    border-radius: 50%;
    background: #4b94ff;
    box-shadow: 0 0 0 4px rgba(75, 148, 255, 0.10);
    transform: translateY(-50%);
}


/* =========================================================
   AUTOMATED DECISION
   ========================================================= */

.wn-dwa-exceptions-decision {
    position: relative;
    z-index: 5;
    min-width: 0;
    padding: 21px;
    border: 1px solid rgba(76, 139, 226, 0.26);
    border-radius: 15px;
    background:
        linear-gradient(
            145deg,
            rgba(14, 38, 66, 0.98),
            rgba(8, 25, 44, 0.98)
        );
    box-shadow:
        0 28px 55px rgba(0, 0, 0, 0.19),
        0 0 0 1px rgba(40, 105, 198, 0.03);
}


.wn-dwa-exceptions-decision::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 26px;
    width: 76px;
    height: 2px;
    background: #3988ff;
}


.wn-dwa-exceptions-decision-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}


.wn-dwa-exceptions-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #57ce9b;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.1em;
}


.wn-dwa-exceptions-live::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #45ca91;
    box-shadow: 0 0 0 4px rgba(69, 202, 145, 0.08);
}


.wn-dwa-exceptions-decision-core {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
    margin-top: 19px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(107, 145, 190, 0.13);
}


.wn-dwa-exceptions-decision-symbol {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid rgba(65, 139, 245, 0.28);
    border-radius: 50%;
    background: rgba(40, 108, 207, 0.09);
}


.wn-dwa-exceptions-decision-symbol span {
    position: relative;
    width: 15px;
    height: 15px;
    border: 1.5px solid #5c9cff;
    border-radius: 50%;
}


.wn-dwa-exceptions-decision-symbol span::before,
.wn-dwa-exceptions-decision-symbol span::after {
    content: "";
    position: absolute;
    background: #5c9cff;
}


.wn-dwa-exceptions-decision-symbol span::before {
    top: 6px;
    right: -7px;
    width: 7px;
    height: 1.5px;
}


.wn-dwa-exceptions-decision-symbol span::after {
    top: -4px;
    left: 6px;
    width: 1.5px;
    height: 5px;
}


.wn-dwa-exceptions-decision-core > div:last-child {
    min-width: 0;
}


.wn-dwa-exceptions-decision-core strong {
    display: block;
    color: #f6f9fd;
    font-size: 14px;
    font-weight: 750;
    line-height: 1.35;
}


.wn-dwa-exceptions-decision-core > div:last-child span {
    display: block;
    margin-top: 3px;
    color: #71869f;
    font-size: 9px;
    line-height: 1.45;
}


.wn-dwa-exceptions-checks {
    margin-top: 9px;
}


.wn-dwa-exceptions-check {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(107, 145, 190, 0.09);
}


.wn-dwa-exceptions-check:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}


.wn-dwa-exceptions-check span {
    color: #93a4b8;
    font-size: 9px;
    line-height: 1.4;
}


.wn-dwa-exceptions-check strong {
    flex: 0 0 auto;
    color: #50ca96;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.08em;
}


.wn-dwa-exceptions-check:last-child strong {
    color: #ffb45e;
}


/* =========================================================
   DECISION SPLIT

   This is the visual centre of the section: one controlled
   process becomes two deliberate paths.
   ========================================================= */

.wn-dwa-exceptions-split {
    position: relative;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 270px;
}


.wn-dwa-exceptions-split::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    height: 1px;
    background: #285a9e;
}


.wn-dwa-exceptions-split::after {
    content: "";
    position: absolute;
    top: 25%;
    right: 0;
    bottom: 25%;
    width: 50%;
    border-top: 1px solid #285a9e;
    border-right: 1px solid #285a9e;
    border-bottom: 1px solid #285a9e;
    border-radius: 0 12px 12px 0;
}


.wn-dwa-exceptions-split-line {
    position: absolute;
    right: 0;
    width: 50%;
    height: 1px;
    background: #285a9e;
}


.wn-dwa-exceptions-split-line:first-child {
    top: 25%;
}


.wn-dwa-exceptions-split-line:last-child {
    bottom: 25%;
}


.wn-dwa-exceptions-split-node {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(80, 145, 239, 0.28);
    border-radius: 50%;
    background: #0a192b;
    box-shadow: 0 0 0 7px rgba(50, 118, 215, 0.05);
}


.wn-dwa-exceptions-split-node span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4e96ff;
}


/* =========================================================
   OUTCOME PATHS
   ========================================================= */

.wn-dwa-exceptions-path {
    position: relative;
    z-index: 5;
    min-width: 0;
}


/* Both outcome cards occupy the final grid column.
   They are vertically separated to visually complete the split. */

.wn-dwa-exceptions-path--routine {
    grid-column: 5;
    grid-row: 1;
    align-self: start;
    margin-top: 30px;
}


.wn-dwa-exceptions-path--exception {
    grid-column: 5;
    grid-row: 1;
    align-self: end;
    margin-bottom: 30px;
}


.wn-dwa-exceptions-path-label {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    color: #71869e;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.11em;
}


.wn-dwa-exceptions-path-status {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
}


.wn-dwa-exceptions-path--routine .wn-dwa-exceptions-path-status {
    background: #45c990;
    box-shadow: 0 0 0 4px rgba(69, 201, 144, 0.07);
}


.wn-dwa-exceptions-path--exception .wn-dwa-exceptions-path-status {
    background: #ffad4e;
    box-shadow: 0 0 0 4px rgba(255, 173, 78, 0.07);
}


.wn-dwa-exceptions-path-card {
    padding: 16px;
    border: 1px solid rgba(79, 132, 197, 0.18);
    border-radius: 12px;
    background: rgba(9, 26, 46, 0.96);
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.14);
}


.wn-dwa-exceptions-path--routine .wn-dwa-exceptions-path-card {
    border-color: rgba(69, 201, 144, 0.18);
}


.wn-dwa-exceptions-path--exception .wn-dwa-exceptions-path-card {
    border-color: rgba(255, 173, 78, 0.21);
}


.wn-dwa-exceptions-path-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 11px;
    border-bottom: 1px solid rgba(107, 145, 190, 0.10);
}


.wn-dwa-exceptions-path-head span {
    color: #698099;
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.09em;
}


.wn-dwa-exceptions-path-head strong {
    font-size: 7px;
    font-weight: 850;
    letter-spacing: 0.07em;
}


.wn-dwa-exceptions-path--routine .wn-dwa-exceptions-path-head strong {
    color: #51ca96;
}


.wn-dwa-exceptions-path--exception .wn-dwa-exceptions-path-head strong {
    color: #ffb45e;
}


.wn-dwa-exceptions-path-action {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 14px 0 11px;
}


.wn-dwa-exceptions-action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 800;
}


.wn-dwa-exceptions-path--routine .wn-dwa-exceptions-action-icon {
    background: rgba(69, 201, 144, 0.09);
    color: #54cf9b;
}


.wn-dwa-exceptions-path--exception .wn-dwa-exceptions-action-icon {
    background: rgba(255, 173, 78, 0.09);
    color: #ffb45e;
}


.wn-dwa-exceptions-path-action div {
    min-width: 0;
}


.wn-dwa-exceptions-path-action strong {
    display: block;
    color: #f0f5fb;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.4;
}


.wn-dwa-exceptions-path-action div span {
    display: block;
    margin-top: 2px;
    color: #7489a1;
    font-size: 8px;
    line-height: 1.45;
}


.wn-dwa-exceptions-path-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding-top: 10px;
    border-top: 1px solid rgba(107, 145, 190, 0.10);
}


.wn-dwa-exceptions-path-foot span {
    padding: 4px 6px;
    border: 1px solid rgba(69, 201, 144, 0.13);
    border-radius: 4px;
    color: #6fa68f;
    font-size: 6px;
    font-weight: 750;
    line-height: 1;
}


/* Human owner is deliberately different from the automatic
   path footer: the exception ends with responsibility. */

.wn-dwa-exceptions-owner {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 22px;
    gap: 9px;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid rgba(107, 145, 190, 0.10);
}


.wn-dwa-exceptions-owner-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255, 174, 79, 0.18);
    border-radius: 50%;
    background: rgba(255, 174, 79, 0.07);
    color: #ffc173;
    font-size: 7px;
    font-weight: 850;
}


.wn-dwa-exceptions-owner > div:nth-child(2) {
    min-width: 0;
}


.wn-dwa-exceptions-owner > div:nth-child(2) span {
    display: block;
    color: #667c95;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 0.09em;
}


.wn-dwa-exceptions-owner > div:nth-child(2) strong {
    display: block;
    margin-top: 2px;
    overflow: hidden;
    color: #e8eef6;
    font-size: 9px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-dwa-exceptions-owner-arrow {
    color: #ffb45e;
    font-size: 13px;
    text-align: right;
}


/* =========================================================
   BUSINESS OUTCOMES

   A restrained three-column close gives meaning to the
   graphic without adding another large visual system.
   ========================================================= */

.wn-dwa-exceptions-outcomes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 54px;
    border-top: 1px solid rgba(122, 157, 200, 0.11);
    border-bottom: 1px solid rgba(122, 157, 200, 0.11);
}


.wn-dwa-exceptions-outcome {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 25px 28px 25px 0;
}


.wn-dwa-exceptions-outcome + .wn-dwa-exceptions-outcome {
    padding-left: 28px;
    border-left: 1px solid rgba(122, 157, 200, 0.11);
}


.wn-dwa-exceptions-outcome-index {
    padding-top: 2px;
    color: #4f91ef;
    font-size: 8px;
    font-weight: 850;
    letter-spacing: 0.08em;
}


.wn-dwa-exceptions-outcome strong {
    display: block;
    color: #edf4fc;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}


.wn-dwa-exceptions-outcome p {
    max-width: 310px;
    margin: 6px 0 0;
    color: #71869f;
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   TABLET — ≤ 1100px

   Tighten the decision map while preserving its horizontal
   storytelling for larger tablets.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-exceptions {
        padding: 112px 0 96px;
    }

    .wn-dwa-exceptions .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-dwa-exceptions-head {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
        gap: 58px;
    }

    .wn-dwa-exceptions-map {
        grid-template-columns:
            minmax(155px, 0.72fr)
            55px
            minmax(255px, 1.18fr)
            80px
            minmax(220px, 1fr);
        min-height: 500px;
        padding-inline: 18px;
    }

    .wn-dwa-exceptions-decision {
        padding: 18px;
    }

    .wn-dwa-exceptions-split {
        height: 260px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The page becomes one editorial column and the decision map
   changes into a clear staged process. The two outcomes still
   remain side by side where enough width exists.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-exceptions-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .wn-dwa-exceptions-title h2 {
        max-width: 760px;
        font-size: clamp(44px, 6.3vw, 60px);
    }

    .wn-dwa-exceptions-intro {
        max-width: 650px;
    }

    .wn-dwa-exceptions-map {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 24px;
        min-height: 0;
        margin-top: 64px;
        padding: 48px 32px;
    }

    .wn-dwa-exceptions-map::before {
        display: none;
    }

    .wn-dwa-exceptions-entry {
        grid-column: 1 / -1;
        width: min(100%, 310px);
        margin-inline: auto;
    }

    .wn-dwa-exceptions-route {
        grid-column: 1 / -1;
        justify-self: center;
        width: 1px;
        height: 60px;
    }

    .wn-dwa-exceptions-route-line {
        width: 1px;
        height: 100%;
    }

    .wn-dwa-exceptions-route-dot {
        top: auto;
        right: -3px;
        bottom: -3px;
        transform: none;
    }

    .wn-dwa-exceptions-decision {
        grid-column: 1 / -1;
        width: min(100%, 470px);
        margin-inline: auto;
    }

    .wn-dwa-exceptions-split {
        grid-column: 1 / -1;
        width: calc(50% + 24px);
        height: 100px;
        margin-inline: auto;
    }

    .wn-dwa-exceptions-split::before {
        top: 0;
        left: 50%;
        width: 1px;
        height: 50%;
    }

    .wn-dwa-exceptions-split::after {
        top: 50%;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 50%;
        border-top: 1px solid #285a9e;
        border-right: 1px solid #285a9e;
        border-bottom: 0;
        border-left: 1px solid #285a9e;
        border-radius: 10px 10px 0 0;
    }

    .wn-dwa-exceptions-split-line {
        top: auto !important;
        bottom: 0 !important;
        width: 1px;
        height: 50%;
    }

    .wn-dwa-exceptions-split-line:first-child {
        right: auto;
        left: 0;
    }

    .wn-dwa-exceptions-split-line:last-child {
        right: 0;
    }

    .wn-dwa-exceptions-split-node {
        position: absolute;
        top: 34px;
        left: 50%;
        transform: translateX(-50%);
    }

    .wn-dwa-exceptions-path--routine,
    .wn-dwa-exceptions-path--exception {
        grid-column: auto;
        grid-row: auto;
        align-self: stretch;
        margin: 0;
    }

    .wn-dwa-exceptions-path--routine {
        grid-column: 1;
    }

    .wn-dwa-exceptions-path--exception {
        grid-column: 2;
    }

    .wn-dwa-exceptions-outcomes {
        margin-top: 48px;
    }

    .wn-dwa-exceptions-outcome {
        grid-template-columns: 26px minmax(0, 1fr);
        gap: 10px;
        padding-right: 18px;
    }

    .wn-dwa-exceptions-outcome + .wn-dwa-exceptions-outcome {
        padding-left: 18px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The split becomes a vertical story. Routine and exception
   are shown as two deliberate outcomes beneath the decision,
   rather than squeezed into narrow side-by-side cards.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-exceptions {
        padding: 88px 0 76px;
    }

    .wn-dwa-exceptions .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-dwa-exceptions::before {
        top: 480px;
        left: 40%;
        width: 560px;
        height: 560px;
    }

    .wn-dwa-exceptions::after {
        display: none;
    }

    .wn-dwa-exceptions-label {
        gap: 11px;
        margin-bottom: 21px;
    }

    .wn-dwa-exceptions-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-dwa-exceptions-kicker {
        font-size: 10px;
        letter-spacing: 0.11em;
    }

    .wn-dwa-exceptions-title h2 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1.01;
    }

    .wn-dwa-exceptions-intro p {
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-dwa-exceptions-map {
        display: flex;
        flex-direction: column;
        gap: 0;
        margin-top: 48px;
        padding: 42px 20px;
    }

    .wn-dwa-exceptions-entry,
    .wn-dwa-exceptions-decision,
    .wn-dwa-exceptions-path {
        width: min(100%, 390px);
    }

    .wn-dwa-exceptions-route {
        width: 1px;
        height: 54px;
        flex: 0 0 54px;
    }

    .wn-dwa-exceptions-split {
        width: 1px;
        height: 60px;
        flex: 0 0 60px;
    }

    .wn-dwa-exceptions-split::before {
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: #285a9e;
    }

    .wn-dwa-exceptions-split::after,
    .wn-dwa-exceptions-split-line {
        display: none;
    }

    .wn-dwa-exceptions-split-node {
        top: 50%;
        left: 50%;
        width: 28px;
        height: 28px;
        transform: translate(-50%, -50%);
    }

    .wn-dwa-exceptions-path--routine,
    .wn-dwa-exceptions-path--exception {
        margin: 0;
    }

    .wn-dwa-exceptions-path--routine {
        position: relative;
    }

    /* Small vertical connector between the two possible
       outcomes keeps the decision story visually continuous. */

    .wn-dwa-exceptions-path--routine::after {
        content: "";
        display: block;
        width: 1px;
        height: 34px;
        margin: 0 auto;
        background: #285a9e;
    }

    .wn-dwa-exceptions-path-label {
        margin-top: 0;
    }

    .wn-dwa-exceptions-path-card {
        padding: 18px;
    }

    .wn-dwa-exceptions-path-action strong {
        font-size: 11px;
    }

    .wn-dwa-exceptions-path-action div span {
        font-size: 9px;
    }

    .wn-dwa-exceptions-outcomes {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 42px;
    }

    .wn-dwa-exceptions-outcome {
        padding: 20px 0;
    }

    .wn-dwa-exceptions-outcome + .wn-dwa-exceptions-outcome {
        padding-left: 0;
        border-top: 1px solid rgba(122, 157, 200, 0.11);
        border-left: 0;
    }

    .wn-dwa-exceptions-outcome p {
        max-width: 500px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Keep meaningful labels readable. The cards are allowed to
   use the phone width rather than shrinking their contents.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-exceptions {
        padding: 78px 0 68px;
    }

    .wn-dwa-exceptions .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-dwa-exceptions-title h2 {
        font-size: clamp(36px, 10.8vw, 46px);
        letter-spacing: -0.04em;
    }

    .wn-dwa-exceptions-map {
        padding-inline: 14px;
    }

    .wn-dwa-exceptions-entry-card {
        padding: 15px;
    }

    .wn-dwa-exceptions-entry-card strong {
        font-size: 12px;
    }

    .wn-dwa-exceptions-entry-card div span,
    .wn-dwa-exceptions-decision-core > div:last-child span,
    .wn-dwa-exceptions-check span {
        font-size: 10px;
    }

    .wn-dwa-exceptions-eyebrow {
        font-size: 8px;
    }

    .wn-dwa-exceptions-decision {
        padding: 18px;
    }

    .wn-dwa-exceptions-decision-core strong {
        font-size: 14px;
    }

    .wn-dwa-exceptions-check strong,
    .wn-dwa-exceptions-live,
    .wn-dwa-exceptions-path-label,
    .wn-dwa-exceptions-path-head span,
    .wn-dwa-exceptions-path-head strong {
        font-size: 8px;
    }

    .wn-dwa-exceptions-path-action strong {
        font-size: 12px;
    }

    .wn-dwa-exceptions-path-action div span {
        font-size: 10px;
    }

    .wn-dwa-exceptions-owner > div:nth-child(2) span {
        font-size: 7px;
    }

    .wn-dwa-exceptions-owner > div:nth-child(2) strong {
        font-size: 10px;
    }

    .wn-dwa-exceptions-path-foot span {
        font-size: 7px;
    }

    .wn-dwa-exceptions-outcome strong {
        font-size: 13px;
    }

    .wn-dwa-exceptions-outcome p {
        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-exceptions .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-dwa-exceptions-title h2 {
        font-size: 35px;
    }

    .wn-dwa-exceptions-map {
        padding-inline: 10px;
    }

    .wn-dwa-exceptions-entry-card,
    .wn-dwa-exceptions-decision,
    .wn-dwa-exceptions-path-card {
        border-radius: 10px;
    }

    .wn-dwa-exceptions-decision-core {
        gap: 10px;
    }

    .wn-dwa-exceptions-decision-symbol {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .wn-dwa-exceptions-owner {
        grid-template-columns: 28px minmax(0, 1fr) 18px;
        gap: 7px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   05 — VISIBILITY & TRACEABILITY

   Light closing content section.

   This section completes the workflow story by showing that
   every automated action, exception and human decision can
   remain connected to one continuous process record.

   Desktop:
   wide operational record + horizontal process history

   Mobile:
   compact record summary + vertical audit trail
   ========================================================= */


.wn-dwa-trace {
    position: relative;
    overflow: hidden;
    padding: 128px 0 108px;
    background:
        radial-gradient(
            circle at 78% 35%,
            rgba(34, 108, 255, 0.075),
            transparent 30%
        ),
        #f5f7fa;
    color: #101828;
}


/* A restrained line system behind the record gives the
   section a technical feel without becoming another UI grid. */

.wn-dwa-trace::before {
    content: "";
    position: absolute;
    top: 320px;
    right: -170px;
    width: 760px;
    height: 760px;
    border: 1px solid rgba(35, 75, 125, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-trace::after {
    content: "";
    position: absolute;
    top: 470px;
    right: -20px;
    width: 460px;
    height: 460px;
    border: 1px solid rgba(35, 75, 125, 0.045);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-trace .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   SECTION INTRO
   ========================================================= */

.wn-dwa-trace-head {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(310px, 0.65fr);
    gap: clamp(70px, 9vw, 140px);
    align-items: end;
}


.wn-dwa-trace-title,
.wn-dwa-trace-intro {
    min-width: 0;
}


.wn-dwa-trace-label {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 27px;
}


.wn-dwa-trace-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border: 1px solid rgba(15, 36, 64, 0.14);
    border-radius: 50%;
    color: var(--blue, #226cff);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.06em;
}


.wn-dwa-trace-kicker {
    color: #526071;
    font-size: 11px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.14em;
}


.wn-dwa-trace-title h2 {
    max-width: 810px;
    margin: 0;
    color: #0b1728;
    font-size: clamp(44px, 4.7vw, 68px);
    font-weight: 750;
    line-height: 0.99;
    letter-spacing: -0.047em;
}


.wn-dwa-trace-title h2 span {
    color: var(--blue, #226cff);
}


.wn-dwa-trace-intro {
    padding-bottom: 4px;
}


.wn-dwa-trace-intro p {
    margin: 0;
    color: #657181;
    font-size: 15px;
    line-height: 1.7;
}


.wn-dwa-trace-intro p + p {
    margin-top: 16px;
}


/* =========================================================
   MAIN PROCESS RECORD

   The record is intentionally one large coherent object,
   rather than another collection of floating cards.
   ========================================================= */

.wn-dwa-trace-record {
    position: relative;
    margin-top: 76px;
    border: 1px solid rgba(18, 44, 77, 0.12);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 34px 80px rgba(20, 43, 72, 0.09),
        0 2px 6px rgba(20, 43, 72, 0.03);
}


/* Small blue edge marks the beginning of the operational
   record and gives the large white object a clear anchor. */

.wn-dwa-trace-record::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 38px;
    width: 112px;
    height: 2px;
    background: var(--blue, #226cff);
}


/* =========================================================
   RECORD HEADER
   ========================================================= */

.wn-dwa-trace-record-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    padding: 25px 30px;
    border-bottom: 1px solid #e7ebf0;
}


.wn-dwa-trace-record-id {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}


.wn-dwa-trace-record-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 39px;
    height: 39px;
    flex: 0 0 39px;
    border: 1px solid rgba(34, 108, 255, 0.18);
    border-radius: 9px;
    background: #edf4ff;
}


.wn-dwa-trace-record-icon::before,
.wn-dwa-trace-record-icon::after,
.wn-dwa-trace-record-icon span {
    content: "";
    position: absolute;
    left: 10px;
    width: 17px;
    height: 2px;
    border-radius: 5px;
    background: #5590ec;
}


.wn-dwa-trace-record-icon::before {
    top: 11px;
}


.wn-dwa-trace-record-icon span {
    top: 17px;
}


.wn-dwa-trace-record-icon::after {
    top: 23px;
    width: 11px;
}


.wn-dwa-trace-record-id > div {
    min-width: 0;
}


.wn-dwa-trace-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #85909e;
    font-size: 8px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-dwa-trace-record-id strong {
    display: block;
    overflow: hidden;
    color: #172538;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.wn-dwa-trace-record-state {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid rgba(35, 154, 105, 0.15);
    border-radius: 9px;
    background: #f0faf6;
}


.wn-dwa-trace-state-dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: #31a876;
    box-shadow: 0 0 0 4px rgba(49, 168, 118, 0.08);
}


.wn-dwa-trace-record-state span:not(.wn-dwa-trace-state-dot) {
    display: block;
    color: #789184;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.09em;
}


.wn-dwa-trace-record-state strong {
    display: block;
    margin-top: 1px;
    color: #277d5d;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.3;
}


/* =========================================================
   RECORD SUMMARY
   ========================================================= */

.wn-dwa-trace-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-bottom: 1px solid #e7ebf0;
    background: #fafbfd;
}


.wn-dwa-trace-summary-item {
    min-width: 0;
    padding: 17px 30px;
}


.wn-dwa-trace-summary-item + .wn-dwa-trace-summary-item {
    border-left: 1px solid #e7ebf0;
}


.wn-dwa-trace-summary-item span {
    display: block;
    color: #8a95a2;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.1em;
}


.wn-dwa-trace-summary-item strong {
    display: block;
    margin-top: 4px;
    overflow: hidden;
    color: #293b50;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   PROCESS HISTORY
   ========================================================= */

.wn-dwa-trace-history {
    padding: 30px;
}


.wn-dwa-trace-history-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-bottom: 22px;
}


.wn-dwa-trace-history-top span {
    color: #8793a1;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


.wn-dwa-trace-history-top span:last-child {
    color: #4c79b6;
}


/* Six events form one continuous horizontal history.
   The connecting line sits behind the event nodes. */

.wn-dwa-trace-timeline {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    padding-top: 3px;
}


.wn-dwa-trace-timeline::before {
    content: "";
    position: absolute;
    top: 47px;
    right: calc(8.333% - 2px);
    left: calc(8.333% - 2px);
    height: 1px;
    background: linear-gradient(
        90deg,
        #67a2f5,
        #67a2f5 48%,
        #e0a051 63%,
        #67a2f5 82%,
        #42ad7e
    );
}


.wn-dwa-trace-event {
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 0 12px;
}


.wn-dwa-trace-event-time {
    height: 28px;
    color: #84909f;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.3;
    text-align: center;
}


.wn-dwa-trace-event-node {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0 auto;
    border: 5px solid #ffffff;
    border-radius: 50%;
    background: #eaf3ff;
    box-shadow:
        0 0 0 1px rgba(34, 108, 255, 0.18),
        0 5px 14px rgba(25, 73, 137, 0.08);
    color: #347ce7;
    font-size: 10px;
    font-weight: 850;
    line-height: 1;
}


.wn-dwa-trace-event--attention .wn-dwa-trace-event-node {
    background: #fff4e6;
    box-shadow:
        0 0 0 1px rgba(225, 144, 48, 0.23),
        0 5px 14px rgba(145, 91, 27, 0.07);
    color: #d88a2e;
}


.wn-dwa-trace-event--human .wn-dwa-trace-event-node {
    background: #f4f0ff;
    box-shadow:
        0 0 0 1px rgba(110, 83, 193, 0.19),
        0 5px 14px rgba(81, 57, 147, 0.07);
    color: #7058b5;
    font-size: 7px;
}


.wn-dwa-trace-event--final .wn-dwa-trace-event-node {
    background: #eaf8f2;
    box-shadow:
        0 0 0 1px rgba(48, 164, 116, 0.21),
        0 5px 14px rgba(33, 120, 83, 0.07);
    color: #2e9b70;
}


/* The text below each node reads like an operational log,
   not like six unrelated feature cards. */

.wn-dwa-trace-event-content {
    margin-top: 17px;
    padding-top: 15px;
    border-top: 1px solid #e8ecf1;
}


.wn-dwa-trace-event-type {
    display: block;
    margin-bottom: 6px;
    color: #4f83c7;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.1em;
}


.wn-dwa-trace-event--attention .wn-dwa-trace-event-type {
    color: #d68b34;
}


.wn-dwa-trace-event--human .wn-dwa-trace-event-type {
    color: #715bb0;
}


.wn-dwa-trace-event--final .wn-dwa-trace-event-type {
    color: #318d68;
}


.wn-dwa-trace-event-content strong {
    display: block;
    color: #26384d;
    font-size: 10px;
    font-weight: 750;
    line-height: 1.42;
}


.wn-dwa-trace-event-content p {
    margin: 6px 0 0;
    color: #7a8695;
    font-size: 8px;
    line-height: 1.5;
}


/* Exception context makes the unusual event visibly richer,
   reinforcing why it required human attention. */

.wn-dwa-trace-event-context {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 9px;
}


.wn-dwa-trace-event-context span {
    padding: 5px 6px;
    border: 1px solid rgba(218, 143, 53, 0.13);
    border-radius: 4px;
    background: #fff9f1;
    color: #a87539;
    font-size: 6px;
    font-weight: 800;
    line-height: 1.25;
}


/* =========================================================
   RECORD FOOTER
   ========================================================= */

.wn-dwa-trace-record-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 20px 30px;
    border-top: 1px solid #e7ebf0;
    border-radius: 0 0 22px 22px;
    background: #fafbfd;
}


.wn-dwa-trace-record-foot-note {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}


.wn-dwa-trace-record-foot-line {
    width: 42px;
    height: 1px;
    flex: 0 0 42px;
    background: #82a8da;
}


.wn-dwa-trace-record-foot-note p {
    margin: 0;
    color: #7a8695;
    font-size: 10px;
    line-height: 1.5;
}


.wn-dwa-trace-record-foot-note strong {
    color: #31465f;
    font-weight: 750;
}


.wn-dwa-trace-record-foot-status {
    flex: 0 0 auto;
    text-align: right;
}


.wn-dwa-trace-record-foot-status span {
    display: block;
    color: #8b96a3;
    font-size: 6px;
    font-weight: 850;
    letter-spacing: 0.1em;
}


.wn-dwa-trace-record-foot-status strong {
    display: block;
    margin-top: 2px;
    color: #2c8d68;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   BUSINESS BENEFITS
   ========================================================= */

.wn-dwa-trace-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 56px;
    border-top: 1px solid rgba(18, 44, 77, 0.12);
    border-bottom: 1px solid rgba(18, 44, 77, 0.12);
}


.wn-dwa-trace-benefit {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 14px;
    min-width: 0;
    padding: 25px 28px 25px 0;
}


.wn-dwa-trace-benefit + .wn-dwa-trace-benefit {
    padding-left: 28px;
    border-left: 1px solid rgba(18, 44, 77, 0.12);
}


.wn-dwa-trace-benefit-index {
    padding-top: 2px;
    color: var(--blue, #226cff);
    font-size: 8px;
    font-weight: 850;
    line-height: 1.4;
    letter-spacing: 0.08em;
}


.wn-dwa-trace-benefit strong {
    display: block;
    color: #25374b;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.4;
}


.wn-dwa-trace-benefit p {
    max-width: 320px;
    margin: 6px 0 0;
    color: #778392;
    font-size: 11px;
    line-height: 1.55;
}


/* =========================================================
   TABLET — ≤ 1100px

   The six-step record remains horizontal while there is
   enough room, but typography and internal spacing tighten.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-trace {
        padding: 112px 0 96px;
    }

    .wn-dwa-trace .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-dwa-trace-head {
        grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr);
        gap: 58px;
    }

    .wn-dwa-trace-record {
        margin-top: 66px;
    }

    .wn-dwa-trace-record-head,
    .wn-dwa-trace-history,
    .wn-dwa-trace-record-foot {
        padding-right: 24px;
        padding-left: 24px;
    }

    .wn-dwa-trace-summary-item {
        padding-right: 24px;
        padding-left: 24px;
    }

    .wn-dwa-trace-event {
        padding-inline: 9px;
    }

    .wn-dwa-trace-event-content strong {
        font-size: 9px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   Intro becomes one column. The record remains a single
   object, while the timeline changes from six columns to a
   vertical history before the content becomes cramped.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-trace-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 30px;
    }

    .wn-dwa-trace-title h2 {
        max-width: 760px;
        font-size: clamp(44px, 6.3vw, 60px);
    }

    .wn-dwa-trace-intro {
        max-width: 650px;
    }

    .wn-dwa-trace-record {
        width: min(100%, 760px);
        margin: 62px auto 0;
    }

    .wn-dwa-trace-timeline {
        display: block;
        padding: 0;
    }

    .wn-dwa-trace-timeline::before {
        top: 19px;
        bottom: 19px;
        left: 74px;
        width: 1px;
        height: auto;
        background: linear-gradient(
            180deg,
            #67a2f5,
            #67a2f5 48%,
            #e0a051 66%,
            #7058b5 82%,
            #42ad7e
        );
    }

    .wn-dwa-trace-event {
        display: grid;
        grid-template-columns: 48px 52px minmax(0, 1fr);
        gap: 0;
        align-items: start;
        min-height: 108px;
        padding: 0;
    }

    .wn-dwa-trace-event:last-child {
        min-height: 0;
    }

    .wn-dwa-trace-event-time {
        height: auto;
        padding-top: 12px;
        text-align: left;
    }

    .wn-dwa-trace-event-node {
        margin: 0 auto;
    }

    .wn-dwa-trace-event-content {
        margin: 0;
        padding: 7px 0 28px 16px;
        border-top: 0;
    }

    .wn-dwa-trace-event-content strong {
        font-size: 11px;
    }

    .wn-dwa-trace-event-content p {
        max-width: 480px;
        font-size: 9px;
    }

    .wn-dwa-trace-event-context {
        max-width: 230px;
    }

    .wn-dwa-trace-benefits {
        margin-top: 48px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The record becomes a compact mobile audit trail.
   Summary data wraps into a 2×2 grid and all meaningful
   history remains readable without horizontal scrolling.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-trace {
        padding: 88px 0 76px;
    }

    .wn-dwa-trace .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-dwa-trace::before {
        top: 560px;
        right: -350px;
        width: 620px;
        height: 620px;
    }

    .wn-dwa-trace::after {
        display: none;
    }

    .wn-dwa-trace-label {
        gap: 11px;
        margin-bottom: 21px;
    }

    .wn-dwa-trace-number {
        width: 32px;
        height: 32px;
        flex-basis: 32px;
    }

    .wn-dwa-trace-kicker {
        font-size: 10px;
        letter-spacing: 0.11em;
    }

    .wn-dwa-trace-title h2 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1.01;
    }

    .wn-dwa-trace-intro p {
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-dwa-trace-record {
        margin-top: 48px;
        border-radius: 18px;
    }

    .wn-dwa-trace-record::before {
        left: 22px;
        width: 82px;
    }

    .wn-dwa-trace-record-head {
        padding: 20px;
    }

    .wn-dwa-trace-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .wn-dwa-trace-summary-item {
        padding: 14px 20px;
    }

    .wn-dwa-trace-summary-item:nth-child(3) {
        border-left: 0;
        border-top: 1px solid #e7ebf0;
    }

    .wn-dwa-trace-summary-item:nth-child(4) {
        border-top: 1px solid #e7ebf0;
    }

    .wn-dwa-trace-history {
        padding: 24px 20px;
    }

    .wn-dwa-trace-history-top {
        padding-bottom: 24px;
    }

    .wn-dwa-trace-timeline::before {
        left: 67px;
    }

    .wn-dwa-trace-event {
        grid-template-columns: 43px 48px minmax(0, 1fr);
        min-height: 112px;
    }

    .wn-dwa-trace-event-content {
        padding-left: 13px;
    }

    .wn-dwa-trace-event-content strong {
        font-size: 12px;
    }

    .wn-dwa-trace-event-content p {
        font-size: 10px;
        line-height: 1.5;
    }

    .wn-dwa-trace-event-type {
        font-size: 7px;
    }

    .wn-dwa-trace-event-context span {
        font-size: 7px;
    }

    .wn-dwa-trace-record-foot {
        align-items: flex-start;
        padding: 18px 20px;
    }

    .wn-dwa-trace-record-foot-line {
        width: 28px;
        flex-basis: 28px;
    }

    .wn-dwa-trace-record-foot-note {
        gap: 10px;
    }

    .wn-dwa-trace-benefits {
        grid-template-columns: minmax(0, 1fr);
        margin-top: 42px;
    }

    .wn-dwa-trace-benefit {
        padding: 20px 0;
    }

    .wn-dwa-trace-benefit + .wn-dwa-trace-benefit {
        padding-left: 0;
        border-top: 1px solid rgba(18, 44, 77, 0.12);
        border-left: 0;
    }

    .wn-dwa-trace-benefit p {
        max-width: 500px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Important operational text becomes larger. The history
   remains a real readable record, not a miniature diagram.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-trace {
        padding: 78px 0 68px;
    }

    .wn-dwa-trace .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-dwa-trace-title h2 {
        font-size: clamp(36px, 10.8vw, 46px);
        letter-spacing: -0.04em;
    }

    .wn-dwa-trace-record-head {
        align-items: flex-start;
        gap: 14px;
    }

    .wn-dwa-trace-record-id strong {
        font-size: 12px;
        white-space: normal;
    }

    .wn-dwa-trace-record-state {
        padding: 7px 8px;
    }

    .wn-dwa-trace-summary-item span,
    .wn-dwa-trace-eyebrow,
    .wn-dwa-trace-history-top span {
        font-size: 8px;
    }

    .wn-dwa-trace-summary-item strong {
        font-size: 11px;
    }

    .wn-dwa-trace-timeline::before {
        left: 59px;
    }

    .wn-dwa-trace-event {
        grid-template-columns: 38px 42px minmax(0, 1fr);
        min-height: 118px;
    }

    .wn-dwa-trace-event-time {
        padding-top: 11px;
        font-size: 8px;
    }

    .wn-dwa-trace-event-node {
        width: 34px;
        height: 34px;
        border-width: 4px;
    }

    .wn-dwa-trace-event-content {
        padding-top: 5px;
        padding-left: 10px;
    }

    .wn-dwa-trace-event-content strong {
        font-size: 11px;
    }

    .wn-dwa-trace-event-content p {
        font-size: 10px;
    }

    .wn-dwa-trace-record-foot-note p {
        font-size: 9px;
    }

    .wn-dwa-trace-benefit strong {
        font-size: 13px;
    }

    .wn-dwa-trace-benefit p {
        font-size: 11px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final width protection. The timeline keeps its structure;
   secondary header information is simplified before any
   meaningful process content is sacrificed.
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-trace .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-dwa-trace-title h2 {
        font-size: 35px;
    }

    .wn-dwa-trace-record-head {
        flex-direction: column;
    }

    .wn-dwa-trace-record-state {
        margin-left: 52px;
    }

    .wn-dwa-trace-history {
        padding-inline: 14px;
    }

    .wn-dwa-trace-history-top span:last-child {
        display: none;
    }

    .wn-dwa-trace-timeline::before {
        left: 53px;
    }

    .wn-dwa-trace-event {
        grid-template-columns: 35px 39px minmax(0, 1fr);
    }

    .wn-dwa-trace-event-content {
        padding-left: 8px;
    }

    .wn-dwa-trace-record-foot {
        flex-direction: column;
        gap: 13px;
    }

    .wn-dwa-trace-record-foot-status {
        padding-left: 38px;
        text-align: left;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   FAQ

   Dark editorial FAQ section.

   After five visually stronger content sections, the FAQ
   intentionally reduces visual complexity before the final
   CTA. The left side summarizes the page story, while the
   right side provides practical buying / implementation
   questions in a clean native accordion.
   ========================================================= */


.wn-dwa-faq {
    position: relative;
    overflow: hidden;
    padding: 126px 0 118px;
    background: #07111f;
    color: #ffffff;
}


/* Restrained background geometry keeps continuity with the
   rest of the page without introducing another UI scene. */

.wn-dwa-faq::before {
    content: "";
    position: absolute;
    top: -290px;
    left: -260px;
    width: 780px;
    height: 780px;
    border: 1px solid rgba(74, 137, 225, 0.06);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-faq::after {
    content: "";
    position: absolute;
    right: -310px;
    bottom: -430px;
    width: 850px;
    height: 850px;
    border: 1px solid rgba(74, 137, 225, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-faq .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   MAIN LAYOUT
   ========================================================= */

.wn-dwa-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(470px, 1.18fr);
    gap: clamp(80px, 10vw, 150px);
    align-items: start;
}


.wn-dwa-faq-intro,
.wn-dwa-faq-list {
    min-width: 0;
}


/* =========================================================
   LEFT — EDITORIAL INTRO
   ========================================================= */

.wn-dwa-faq-label {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 28px;
}


.wn-dwa-faq-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 39px;
    height: 27px;
    padding: 0 9px;
    border: 1px solid rgba(83, 149, 244, 0.24);
    border-radius: 20px;
    color: #5b9cff;
    font-size: 8px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.09em;
}


.wn-dwa-faq-kicker {
    color: #758aa4;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.13em;
}


.wn-dwa-faq-intro h2 {
    max-width: 620px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(44px, 4.25vw, 62px);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.047em;
}


.wn-dwa-faq-intro h2 span {
    color: #61a2ff;
}


.wn-dwa-faq-intro > p {
    max-width: 520px;
    margin: 28px 0 0;
    color: #8fa0b5;
    font-size: 15px;
    line-height: 1.72;
}


/* =========================================================
   DOCUMENT → WORKFLOW → ACTION

   This is deliberately a small conceptual signature rather
   than another full illustration. It summarizes the entire
   page in three words before the visitor reaches the CTA.
   ========================================================= */

.wn-dwa-faq-flow {
    display: grid;
    grid-template-columns:
        minmax(82px, auto)
        minmax(34px, 1fr)
        minmax(82px, auto)
        minmax(34px, 1fr)
        minmax(72px, auto);
    align-items: center;
    gap: 10px;
    max-width: 500px;
    margin-top: 62px;
    padding: 22px 0;
    border-top: 1px solid rgba(116, 151, 193, 0.13);
    border-bottom: 1px solid rgba(116, 151, 193, 0.13);
}


.wn-dwa-faq-flow-step {
    min-width: 0;
}


.wn-dwa-faq-flow-index {
    display: block;
    margin-bottom: 6px;
    color: #4d8ee9;
    font-size: 7px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.09em;
}


.wn-dwa-faq-flow-step strong {
    display: block;
    color: #c9d5e4;
    font-size: 9px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-dwa-faq-flow-line {
    position: relative;
    display: block;
    width: 100%;
    height: 1px;
    background: rgba(64, 126, 211, 0.36);
}


.wn-dwa-faq-flow-line::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #4b8fe9;
    border-right: 1px solid #4b8fe9;
    transform: translateY(-50%) rotate(45deg);
}


.wn-dwa-faq-flow-line span {
    position: absolute;
    top: 50%;
    left: 45%;
    width: 5px;
    height: 5px;
    border: 2px solid #07111f;
    border-radius: 50%;
    background: #4f95f3;
    transform: translate(-50%, -50%);
}


/* =========================================================
   RIGHT — FAQ ACCORDION

   Native <details> keeps the interaction simple, accessible
   and independent from JavaScript.
   ========================================================= */

.wn-dwa-faq-list {
    border-top: 1px solid rgba(116, 151, 193, 0.15);
}


.wn-dwa-faq-item {
    margin: 0;
    border-bottom: 1px solid rgba(116, 151, 193, 0.15);
}


.wn-dwa-faq-item summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 36px;
    gap: 28px;
    align-items: center;
    min-height: 94px;
    padding: 27px 0;
    cursor: pointer;
    list-style: none;
    color: #eaf1f9;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    transition: color 180ms ease;
}


.wn-dwa-faq-item summary::-webkit-details-marker {
    display: none;
}


.wn-dwa-faq-item summary::marker {
    display: none;
    content: "";
}


.wn-dwa-faq-item summary:hover {
    color: #68a6ff;
}


/* Custom plus/minus icon. Native details handles state;
   CSS only changes the visual indicator. */

.wn-dwa-faq-toggle {
    position: relative;
    display: block;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(83, 149, 244, 0.20);
    border-radius: 50%;
    background: rgba(35, 91, 168, 0.06);
    transition:
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease;
}


.wn-dwa-faq-toggle::before,
.wn-dwa-faq-toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 1px;
    background: #5d9df7;
    transform: translate(-50%, -50%);
    transition:
        opacity 180ms ease,
        transform 180ms ease;
}


.wn-dwa-faq-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}


.wn-dwa-faq-item[open] .wn-dwa-faq-toggle {
    border-color: rgba(83, 149, 244, 0.38);
    background: rgba(35, 91, 168, 0.12);
}


.wn-dwa-faq-item[open] .wn-dwa-faq-toggle::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(0deg);
}


.wn-dwa-faq-item[open] summary {
    color: #ffffff;
}


/* =========================================================
   ANSWER
   ========================================================= */

.wn-dwa-faq-answer {
    max-width: 670px;
    padding: 0 64px 29px 0;
}


.wn-dwa-faq-answer p {
    margin: 0;
    color: #8fa0b5;
    font-size: 14px;
    line-height: 1.72;
}


/* A small blue marker gives the opened answer a controlled
   visual relationship with the process graphics above. */

.wn-dwa-faq-item[open] .wn-dwa-faq-answer {
    position: relative;
    padding-left: 17px;
}


.wn-dwa-faq-item[open] .wn-dwa-faq-answer::before {
    content: "";
    position: absolute;
    top: 4px;
    bottom: 34px;
    left: 0;
    width: 1px;
    background: #3e83e5;
}


/* =========================================================
   TABLET — ≤ 1100px

   Preserve the two-column editorial composition, but give
   more width to the accordion and tighten the gap.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-faq {
        padding: 112px 0 102px;
    }

    .wn-dwa-faq .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-dwa-faq-grid {
        grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1.2fr);
        gap: 62px;
    }

    .wn-dwa-faq-intro h2 {
        font-size: clamp(42px, 4.8vw, 56px);
    }

    .wn-dwa-faq-flow {
        margin-top: 50px;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The editorial intro moves above the questions before either
   side becomes cramped. The conceptual flow remains wide and
   visually separates the intro from the accordion.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-faq-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 64px;
    }

    .wn-dwa-faq-intro {
        max-width: 760px;
    }

    .wn-dwa-faq-intro h2 {
        max-width: 720px;
        font-size: clamp(44px, 6.3vw, 60px);
    }

    .wn-dwa-faq-intro > p {
        max-width: 650px;
    }

    .wn-dwa-faq-flow {
        max-width: 600px;
        margin-top: 44px;
    }

    .wn-dwa-faq-list {
        width: 100%;
    }

    .wn-dwa-faq-answer {
        max-width: 760px;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   FAQ becomes a clean single-column reading experience.
   Questions stay comfortably large and the flow signature
   remains intact rather than shrinking into unreadable UI.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-faq {
        padding: 88px 0 78px;
    }

    .wn-dwa-faq .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-dwa-faq::before {
        top: -180px;
        left: -400px;
        width: 650px;
        height: 650px;
    }

    .wn-dwa-faq::after {
        display: none;
    }

    .wn-dwa-faq-grid {
        gap: 54px;
    }

    .wn-dwa-faq-label {
        gap: 10px;
        margin-bottom: 22px;
    }

    .wn-dwa-faq-kicker {
        font-size: 9px;
        letter-spacing: 0.1em;
    }

    .wn-dwa-faq-intro h2 {
        font-size: clamp(38px, 10.5vw, 52px);
        line-height: 1.01;
    }

    .wn-dwa-faq-intro > p {
        margin-top: 23px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-dwa-faq-flow {
        margin-top: 38px;
    }

    .wn-dwa-faq-item summary {
        grid-template-columns: minmax(0, 1fr) 34px;
        gap: 18px;
        min-height: 0;
        padding: 24px 0;
        font-size: 16px;
    }

    .wn-dwa-faq-toggle {
        width: 32px;
        height: 32px;
    }

    .wn-dwa-faq-answer {
        max-width: none;
        padding-right: 48px;
        padding-bottom: 25px;
    }

    .wn-dwa-faq-answer p {
        font-size: 13px;
        line-height: 1.7;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   The conceptual flow becomes a vertical mini-process.
   This avoids squeezing three meaningful labels into a
   narrow horizontal strip.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-faq {
        padding: 78px 0 68px;
    }

    .wn-dwa-faq .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-dwa-faq-intro h2 {
        font-size: clamp(36px, 10.8vw, 46px);
        letter-spacing: -0.04em;
    }

    .wn-dwa-faq-flow {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        max-width: 100%;
        padding: 19px 0;
    }

    .wn-dwa-faq-flow-step {
        display: grid;
        grid-template-columns: 32px minmax(0, 1fr);
        align-items: center;
        gap: 11px;
        padding: 5px 0;
    }

    .wn-dwa-faq-flow-index {
        margin: 0;
        font-size: 8px;
    }

    .wn-dwa-faq-flow-step strong {
        font-size: 10px;
    }

    .wn-dwa-faq-flow-line {
        width: 1px;
        height: 26px;
        margin-left: 15px;
        background: rgba(64, 126, 211, 0.36);
    }

    .wn-dwa-faq-flow-line::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-dwa-faq-flow-line span {
        top: 45%;
        left: 50%;
    }

    .wn-dwa-faq-item summary {
        gap: 14px;
        padding: 22px 0;
        font-size: 15px;
    }

    .wn-dwa-faq-answer,
    .wn-dwa-faq-item[open] .wn-dwa-faq-answer {
        padding-right: 40px;
        padding-bottom: 24px;
    }

    .wn-dwa-faq-answer p {
        font-size: 13px;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final protection for narrow devices. Nothing meaningful
   is hidden and no element is allowed to widen the viewport.
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-faq .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-dwa-faq-intro h2 {
        font-size: 35px;
    }

    .wn-dwa-faq-label {
        align-items: flex-start;
    }

    .wn-dwa-faq-kicker {
        padding-top: 7px;
    }

    .wn-dwa-faq-item summary {
        grid-template-columns: minmax(0, 1fr) 30px;
        gap: 12px;
        font-size: 14px;
    }

    .wn-dwa-faq-toggle {
        width: 30px;
        height: 30px;
    }

    .wn-dwa-faq-answer,
    .wn-dwa-faq-item[open] .wn-dwa-faq-answer {
        padding-right: 24px;
    }

}
/* =========================================================
   DOCUMENT & WORKFLOW AUTOMATION
   FINAL CTA

   Light closing section.

   The page has already explained the problem, workflow,
   document handling, exceptions and traceability. This final
   section does not introduce another feature system.

   It reduces the entire page story to one simple movement:

   manual inputs → controlled workflow → clear next action
   ========================================================= */


.wn-dwa-final {
    position: relative;
    overflow: hidden;
    padding: 122px 0 126px;
    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(34, 108, 255, 0.075),
            transparent 31%
        ),
        #f5f7fa;
    color: #0b1728;
}


/* Large quiet geometry gives the final section depth while
   keeping the overall finish lighter than the dark FAQ above. */

.wn-dwa-final::before {
    content: "";
    position: absolute;
    top: -310px;
    right: -260px;
    width: 850px;
    height: 850px;
    border: 1px solid rgba(29, 71, 126, 0.055);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-final::after {
    content: "";
    position: absolute;
    right: 110px;
    bottom: -390px;
    width: 650px;
    height: 650px;
    border: 1px solid rgba(29, 71, 126, 0.045);
    border-radius: 50%;
    pointer-events: none;
}


.wn-dwa-final .wn-wrap {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 100px));
    margin-inline: auto;
}


/* =========================================================
   MAIN CTA LAYOUT

   Copy gets slightly more visual weight than the diagram.
   The right side acts as the page's closing signature rather
   than as another full product interface.
   ========================================================= */

.wn-dwa-final-shell {
    display: grid;
    grid-template-columns: minmax(0, 0.93fr) minmax(500px, 1.07fr);
    gap: clamp(76px, 9vw, 140px);
    align-items: center;
}


.wn-dwa-final-content,
.wn-dwa-final-visual {
    min-width: 0;
}


/* =========================================================
   CTA COPY
   ========================================================= */

.wn-dwa-final-kicker {
    display: block;
    margin-bottom: 25px;
    color: #55708f;
    font-size: 10px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.14em;
}


.wn-dwa-final-content h2 {
    max-width: 720px;
    margin: 0;
    color: #0b1728;
    font-size: clamp(48px, 5vw, 72px);
    font-weight: 750;
    line-height: 0.98;
    letter-spacing: -0.05em;
}


.wn-dwa-final-content h2 span {
    color: var(--blue, #226cff);
}


.wn-dwa-final-content > p {
    max-width: 590px;
    margin: 28px 0 0;
    color: #657181;
    font-size: 15px;
    line-height: 1.72;
}


/* =========================================================
   CTA ACTIONS
   ========================================================= */

.wn-dwa-final-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 35px;
}


.wn-dwa-final-primary,
.wn-dwa-final-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    min-height: 50px;
    padding: 0 18px;
    border-radius: 2px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        color 180ms ease;
}


.wn-dwa-final-primary {
    min-width: 190px;
    border: 1px solid var(--blue, #226cff);
    background: var(--blue, #226cff);
    color: #ffffff;
    box-shadow: 0 12px 26px rgba(34, 108, 255, 0.16);
}


.wn-dwa-final-primary:hover {
    background: #145ce7;
    border-color: #145ce7;
    color: #ffffff;
    transform: translateY(-2px);
}


.wn-dwa-final-secondary {
    min-width: 215px;
    border: 1px solid rgba(17, 43, 76, 0.15);
    background: rgba(255, 255, 255, 0.45);
    color: #263b54;
}


.wn-dwa-final-secondary:hover {
    border-color: rgba(34, 108, 255, 0.35);
    background: #ffffff;
    color: var(--blue, #226cff);
    transform: translateY(-2px);
}


/* =========================================================
   CLOSING VISUAL

   Unlike earlier sections, this is intentionally compact.
   Three fragmented manual inputs feed one central workflow
   and leave as a single clear next action.
   ========================================================= */

.wn-dwa-final-visual {
    position: relative;
    padding: 30px 32px 27px;
    border: 1px solid rgba(17, 43, 76, 0.11);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 251, 255, 0.90)
        );
    box-shadow:
        0 32px 75px rgba(20, 43, 72, 0.09),
        0 2px 5px rgba(20, 43, 72, 0.025);
}


/* Blue edge gives the visual the same technical precision as
   the earlier process record without repeating its layout. */

.wn-dwa-final-visual::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 32px;
    width: 88px;
    height: 2px;
    background: var(--blue, #226cff);
}


.wn-dwa-final-visual-label {
    padding-bottom: 20px;
    border-bottom: 1px solid #e7ebf0;
    color: #7c8999;
    font-size: 7px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.12em;
}


/* =========================================================
   MANUAL INPUTS
   ========================================================= */

.wn-dwa-final-inputs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 25px;
}


.wn-dwa-final-input {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 12px 10px;
    border: 1px solid #e1e7ee;
    border-radius: 9px;
    background: #ffffff;
}


.wn-dwa-final-input > div {
    min-width: 0;
}


.wn-dwa-final-input > div > span {
    display: block;
    margin-bottom: 3px;
    color: #8793a2;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-dwa-final-input strong {
    display: block;
    overflow: hidden;
    color: #31445b;
    font-size: 8px;
    font-weight: 750;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* Three simple CSS icons distinguish the inputs without
   requiring external assets or decorative icon libraries. */

.wn-dwa-final-input-icon {
    position: relative;
    display: block;
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    border: 1px solid rgba(34, 108, 255, 0.17);
    border-radius: 6px;
    background: #eef5ff;
}


.wn-dwa-final-input-icon--document::before {
    content: "";
    position: absolute;
    top: 7px;
    right: 6px;
    left: 6px;
    height: 1px;
    background: #5c94e6;
    box-shadow:
        0 5px 0 #7aa7e7,
        0 10px 0 #a6c2e8;
}


.wn-dwa-final-input-icon--email::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 6px;
    width: 13px;
    height: 10px;
    border: 1px solid #6599e4;
    border-radius: 2px;
}


.wn-dwa-final-input-icon--email::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 9px;
    height: 9px;
    border-right: 1px solid #6599e4;
    border-bottom: 1px solid #6599e4;
    transform: rotate(45deg) translate(-3px, 3px);
}


.wn-dwa-final-input-icon--sheet::before {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    bottom: 6px;
    left: 6px;
    border: 1px solid #6599e4;
    background:
        linear-gradient(
            90deg,
            transparent 31%,
            #9bbce9 32%,
            #9bbce9 35%,
            transparent 36%,
            transparent 65%,
            #9bbce9 66%,
            #9bbce9 69%,
            transparent 70%
        ),
        linear-gradient(
            180deg,
            transparent 31%,
            #9bbce9 32%,
            #9bbce9 35%,
            transparent 36%,
            transparent 65%,
            #9bbce9 66%,
            #9bbce9 69%,
            transparent 70%
        );
}


/* =========================================================
   CONTROLLED ROUTE

   The three inputs visually converge into one controlled
   centre. This is the final distilled message of the page.
   ========================================================= */

.wn-dwa-final-route {
    position: relative;
    display: grid;
    grid-template-columns: minmax(30px, 1fr) auto minmax(30px, 1fr);
    align-items: center;
    gap: 13px;
    width: 84%;
    margin: 28px auto;
}


.wn-dwa-final-route-line {
    position: relative;
    display: block;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(55, 116, 202, 0.18),
        rgba(55, 116, 202, 0.75)
    );
}


.wn-dwa-final-route-line:last-child {
    background: linear-gradient(
        90deg,
        rgba(55, 116, 202, 0.75),
        rgba(55, 116, 202, 0.18)
    );
}


.wn-dwa-final-route-line:first-child::before {
    content: "";
    position: absolute;
    top: -17px;
    left: 0;
    width: 42%;
    height: 17px;
    border-top: 1px solid rgba(55, 116, 202, 0.24);
    border-left: 1px solid rgba(55, 116, 202, 0.24);
    border-radius: 7px 0 0 0;
}


.wn-dwa-final-route-line:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -1px;
    width: 5px;
    height: 5px;
    border-top: 1px solid #4d8ee8;
    border-right: 1px solid #4d8ee8;
    transform: translateY(-50%) rotate(45deg);
}


.wn-dwa-final-route-node {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 144px;
    padding: 12px 14px;
    border: 1px solid rgba(34, 108, 255, 0.18);
    border-radius: 10px;
    background: #edf4ff;
    box-shadow: 0 10px 22px rgba(34, 108, 255, 0.07);
}


.wn-dwa-final-route-pulse {
    position: relative;
    display: block;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border: 1px solid rgba(34, 108, 255, 0.22);
    border-radius: 50%;
    background: #ffffff;
}


.wn-dwa-final-route-pulse::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--blue, #226cff);
    box-shadow: 0 0 0 5px rgba(34, 108, 255, 0.08);
    transform: translate(-50%, -50%);
}


.wn-dwa-final-route-node div {
    min-width: 0;
}


.wn-dwa-final-route-node div span {
    display: block;
    color: #6f8aae;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.09em;
}


.wn-dwa-final-route-node strong {
    display: block;
    margin-top: 2px;
    color: #245caa;
    font-size: 9px;
    font-weight: 850;
    line-height: 1.25;
    letter-spacing: 0.04em;
}


/* =========================================================
   CLEAR RESULT
   ========================================================= */

.wn-dwa-final-result {
    width: min(100%, 310px);
    margin-left: auto;
    padding: 15px;
    border: 1px solid rgba(41, 154, 108, 0.16);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(20, 43, 72, 0.055);
}


.wn-dwa-final-result-top {
    display: flex;
    align-items: center;
    gap: 7px;
    color: #4d9b78;
    font-size: 6px;
    font-weight: 850;
    line-height: 1;
    letter-spacing: 0.09em;
}


.wn-dwa-final-result-status {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #37ad79;
    box-shadow: 0 0 0 4px rgba(55, 173, 121, 0.07);
}


.wn-dwa-final-result > strong {
    display: block;
    margin-top: 11px;
    color: #20364f;
    font-size: 13px;
    font-weight: 750;
    line-height: 1.35;
}


.wn-dwa-final-result-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #e5eaf0;
    border-radius: 8px;
    background: #f8fafc;
}


.wn-dwa-final-result-action div {
    min-width: 0;
}


.wn-dwa-final-result-action div span {
    display: block;
    color: #8a95a2;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: 0.08em;
}


.wn-dwa-final-result-action div strong {
    display: block;
    margin-top: 3px;
    color: #344960;
    font-size: 9px;
    font-weight: 750;
    line-height: 1.3;
}


.wn-dwa-final-result-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: var(--blue, #226cff);
    color: #ffffff;
    font-size: 11px;
}


/* =========================================================
   CLOSING MICRO MESSAGE
   ========================================================= */

.wn-dwa-final-caption {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 25px;
    padding-top: 18px;
    border-top: 1px solid #e7ebf0;
    color: #8491a0;
    font-size: 6px;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: 0.1em;
}


.wn-dwa-final-caption span:nth-child(2),
.wn-dwa-final-caption span:nth-child(4) {
    color: #4e91ec;
}


/* =========================================================
   TABLET — ≤ 1100px

   Keep the closing composition side by side while enough
   width remains, but tighten the visual and typography.
   ========================================================= */

@media (max-width: 1100px) {

    .wn-dwa-final {
        padding: 108px 0 110px;
    }

    .wn-dwa-final .wn-wrap {
        width: min(100% - 64px, 1280px);
    }

    .wn-dwa-final-shell {
        grid-template-columns: minmax(0, 0.9fr) minmax(430px, 1.1fr);
        gap: 58px;
    }

    .wn-dwa-final-content h2 {
        font-size: clamp(46px, 5.5vw, 64px);
    }

    .wn-dwa-final-visual {
        padding: 27px 25px 24px;
    }

    .wn-dwa-final-visual::before {
        left: 25px;
    }

    .wn-dwa-final-input {
        padding-inline: 8px;
    }

    .wn-dwa-final-route {
        width: 90%;
    }

}


/* =========================================================
   INTERMEDIATE — ≤ 950px

   The CTA becomes a stacked editorial close. The visual
   receives full width instead of being compressed beside
   the large headline.
   ========================================================= */

@media (max-width: 950px) {

    .wn-dwa-final-shell {
        grid-template-columns: minmax(0, 1fr);
        gap: 66px;
    }

    .wn-dwa-final-content {
        max-width: 780px;
    }

    .wn-dwa-final-content h2 {
        max-width: 760px;
        font-size: clamp(48px, 7vw, 66px);
    }

    .wn-dwa-final-content > p {
        max-width: 650px;
    }

    .wn-dwa-final-visual {
        width: min(100%, 760px);
        margin-inline: auto;
    }

}


/* =========================================================
   MOBILE — ≤ 760px

   The final visual changes from a horizontal process into a
   readable vertical movement. Nothing relies on tiny labels
   or an oversized desktop diagram squeezed into the phone.
   ========================================================= */

@media (max-width: 760px) {

    .wn-dwa-final {
        padding: 88px 0 82px;
    }

    .wn-dwa-final .wn-wrap {
        width: min(100% - 40px, 1280px);
    }

    .wn-dwa-final::before {
        top: 430px;
        right: -390px;
        width: 650px;
        height: 650px;
    }

    .wn-dwa-final::after {
        display: none;
    }

    .wn-dwa-final-shell {
        gap: 54px;
    }

    .wn-dwa-final-kicker {
        margin-bottom: 20px;
        font-size: 9px;
        letter-spacing: 0.11em;
    }

    .wn-dwa-final-content h2 {
        font-size: clamp(40px, 10.8vw, 54px);
        line-height: 1;
    }

    .wn-dwa-final-content > p {
        margin-top: 23px;
        font-size: 14px;
        line-height: 1.68;
    }

    .wn-dwa-final-actions {
        margin-top: 29px;
    }

    .wn-dwa-final-visual {
        padding: 25px 20px 22px;
        border-radius: 18px;
    }

    .wn-dwa-final-visual::before {
        left: 20px;
        width: 76px;
    }

    .wn-dwa-final-inputs {
        grid-template-columns: minmax(0, 1fr);
        gap: 7px;
        width: min(100%, 390px);
        margin: 22px auto 0;
    }

    .wn-dwa-final-input {
        padding: 12px 13px;
    }

    .wn-dwa-final-input > div > span {
        font-size: 7px;
    }

    .wn-dwa-final-input strong {
        font-size: 10px;
    }

    .wn-dwa-final-route {
        display: flex;
        flex-direction: column;
        gap: 0;
        width: min(100%, 390px);
        margin: 0 auto;
    }

    .wn-dwa-final-route-line {
        width: 1px;
        height: 30px;
        flex: 0 0 30px;
        background: #6c9bdc;
    }

    .wn-dwa-final-route-line:last-child {
        background: #6c9bdc;
    }

    .wn-dwa-final-route-line:first-child::before {
        display: none;
    }

    .wn-dwa-final-route-line:last-child::after {
        top: auto;
        right: auto;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%) rotate(135deg);
    }

    .wn-dwa-final-route-node {
        width: min(100%, 230px);
        min-width: 0;
        justify-content: center;
    }

    .wn-dwa-final-route-node div span {
        font-size: 7px;
    }

    .wn-dwa-final-route-node strong {
        font-size: 10px;
    }

    .wn-dwa-final-result {
        width: min(100%, 390px);
        margin: 0 auto;
    }

    .wn-dwa-final-result-top {
        font-size: 7px;
    }

    .wn-dwa-final-result > strong {
        font-size: 14px;
    }

    .wn-dwa-final-result-action div span {
        font-size: 7px;
    }

    .wn-dwa-final-result-action div strong {
        font-size: 10px;
    }

}


/* =========================================================
   SMALL MOBILE — ≤ 520px

   Buttons become full width and meaningful UI copy is
   enlarged. This is the actual conversion point of the page,
   so neither the CTA nor the visual should feel miniature.
   ========================================================= */

@media (max-width: 520px) {

    .wn-dwa-final {
        padding: 78px 0 72px;
    }

    .wn-dwa-final .wn-wrap {
        width: min(100% - 32px, 1280px);
    }

    .wn-dwa-final-content h2 {
        font-size: clamp(37px, 10.8vw, 47px);
        letter-spacing: -0.043em;
    }

    .wn-dwa-final-actions {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 9px;
    }

    .wn-dwa-final-primary,
    .wn-dwa-final-secondary {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        padding-inline: 17px;
        font-size: 12px;
    }

    .wn-dwa-final-visual {
        padding-inline: 16px;
    }

    .wn-dwa-final-visual-label {
        font-size: 8px;
    }

    .wn-dwa-final-inputs,
    .wn-dwa-final-route,
    .wn-dwa-final-result {
        width: 100%;
    }

    .wn-dwa-final-caption {
        gap: 7px;
        font-size: 7px;
        letter-spacing: 0.07em;
    }

}


/* =========================================================
   VERY SMALL MOBILE — ≤ 380px

   Final protection for narrow devices. The closing story
   stays intact without allowing any element to widen the
   viewport.
   ========================================================= */

@media (max-width: 380px) {

    .wn-dwa-final .wn-wrap {
        width: min(100% - 28px, 1280px);
    }

    .wn-dwa-final-content h2 {
        font-size: 35px;
    }

    .wn-dwa-final-visual {
        padding: 22px 13px 20px;
        border-radius: 15px;
    }

    .wn-dwa-final-visual::before {
        left: 13px;
    }

    .wn-dwa-final-input {
        gap: 8px;
        padding-inline: 10px;
    }

    .wn-dwa-final-route-node {
        width: min(100%, 215px);
    }

    .wn-dwa-final-result {
        padding: 13px;
    }

    .wn-dwa-final-caption {
        column-gap: 6px;
        row-gap: 5px;
    }

}