@layer site {
    .zu-work {
        padding-block: var(--zu-section-space);
        color: var(--zam-text);
        background: var(--zu-smoke);
    }

    .zu-work-heading { padding: 0; }
    .zu-work-heading .sec_zag { margin: 0 0 12px; }
    .zu-work-copy > p {
        margin: 0;
        color: var(--zam-muted);
        line-height: 1.55;
    }
    .zu-work-copy h3 {
        margin: 0 0 10px;
        font-size: clamp(20px, 1.8vw, 27px);
        font-weight: 500;
        line-height: 1.22;
        text-wrap: balance;
    }
    .zu-work-copy > p { max-width: 44ch; font-size: 15px; }
    .zu-work-steps { margin: 0; padding: 0; list-style: none; }
    .zu-work-marker { color: var(--zam-gold); }
    .zu-work-marker svg { display: block; width: 32px; height: 32px; flex: none; }
    .zu-work-number { font-variant-numeric: tabular-nums; }
    .zu-work-action .zhn-button {
        margin: 0;
        min-height: 48px;
        justify-content: space-between;
        gap: 20px;
        font-weight: 500;
    }
    .zu-work-action .zhn-button span { flex: none; }

    /* 01. Follow one continuous line across the four steps. */
    .zu-work--timeline .zu-work-layout { display: grid; gap: 36px; }
    .zu-work--timeline .zu-work-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .zu-work--timeline .zu-work-step {
        position: relative;
        padding-inline-end: clamp(14px, 3vw, 48px);
    }
    .zu-work--timeline .zu-work-step:not(:last-child)::after {
        content: "";
        position: absolute;
        inset: 20px -1px auto 40px;
        height: 1px;
        background: linear-gradient(90deg, var(--zam-gold-dark), var(--zu-line));
    }
    .zu-work--timeline .zu-work-marker {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
        margin-bottom: 16px;
    }
    .zu-work--timeline .zu-work-number {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border: 1px solid var(--zam-gold-dark);
        border-radius: 50%;
        font-size: 13px;
        font-weight: 500;
    }

    /* 02. Use an editorial column and one list without card borders. */
    .zu-work--editorial .zu-work-layout {
        display: grid;
        grid-template-columns: minmax(240px, .7fr) minmax(0, 1.3fr);
        grid-template-rows: auto 1fr;
        gap: 30px clamp(38px, 6vw, 110px);
        align-items: start;
    }
    .zu-work--editorial .zu-work-steps { grid-column: 2; grid-row: 1 / 3; }
    .zu-work--editorial .zu-work-action { grid-column: 1; grid-row: 2; }
    .zu-work--editorial .zu-work-step {
        display: grid;
        grid-template-columns: 106px minmax(0, 1fr);
        gap: 20px;
        padding-block: 22px;
        border-top: 1px solid var(--zu-line);
    }
    .zu-work--editorial .zu-work-step:last-child { border-bottom: 1px solid var(--zu-line); }
    .zu-work--editorial .zu-work-marker { display: flex; align-items: flex-start; gap: 16px; }
    .zu-work--editorial .zu-work-number { font-size: 34px; font-weight: 300; line-height: 1; }
    .zu-work--editorial .zu-work-copy h3 { margin-bottom: 7px; text-wrap: wrap; }
    .zu-work--editorial .zu-work-copy > p { max-width: 57ch; }

    /* 03. Give the four stages one shared panel and a 2 × 2 structure. */
    .zu-work--grid .zu-work-layout { display: grid; gap: 30px; }
    .zu-work--grid .zu-work-steps {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        border: 1px solid var(--zu-line);
        border-radius: var(--zam-radius-panel);
        background: var(--zu-glass);
    }
    .zu-work--grid .zu-work-step {
        display: grid;
        grid-template-columns: 50px minmax(0, 1fr);
        gap: 20px;
        padding: clamp(22px, 3vw, 42px);
    }
    .zu-work--grid .zu-work-step:nth-child(even) { border-left: 1px solid var(--zu-line); }
    .zu-work--grid .zu-work-step:nth-child(n + 3) { border-top: 1px solid var(--zu-line); }
    .zu-work--grid .zu-work-marker { display: grid; align-content: start; gap: 16px; }
    .zu-work--grid .zu-work-number { font-size: 38px; font-weight: 300; line-height: 1; }
    .zu-work--grid .zu-work-copy h3 { text-wrap: wrap; }

    .zu-work-compare {
        scroll-margin-top: 96px;
        padding-block: 24px;
        border-block: 1px solid var(--zu-line);
        background: var(--zu-dark);
    }
    .zu-work-compare p { margin: 0 0 12px; font-size: 17px; font-weight: 500; }
    .zu-work-compare-links { display: flex; flex-wrap: wrap; gap: 8px; }
    .zu-work-compare-links a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 8px 12px;
        border: 1px solid var(--zu-line);
        border-radius: var(--zam-radius-control);
        color: var(--zam-gold);
        font-size: 14px;
    }
    .zu-work-compare-links a:is(:hover, :focus-visible) { border-color: var(--zam-gold); }
    .zu-work + .zu-work { border-top: 1px solid var(--zu-line); }
    .zu-work-variant-name { margin: 0 0 18px; color: var(--zam-gold); font-size: 13px; letter-spacing: .05em; }

    @media (max-width: 760px) {
        .zu-work-marker svg { width: 28px; height: 28px; }
        .zu-work--timeline .zu-work-layout, .zu-work--grid .zu-work-layout { gap: 25px; }
        .zu-work--timeline .zu-work-steps, .zu-work--grid .zu-work-steps { grid-template-columns: 1fr; }
        .zu-work--timeline .zu-work-step {
            display: grid;
            grid-template-columns: 34px minmax(0, 1fr);
            gap: 18px;
            padding: 0 0 24px;
        }
        .zu-work--timeline .zu-work-step:last-child { padding-bottom: 0; }
        .zu-work--timeline .zu-work-step:not(:last-child)::after {
            inset: 34px auto 0 16px;
            width: 1px;
            height: auto;
            background: linear-gradient(var(--zam-gold-dark), var(--zu-line));
        }
        .zu-work--timeline .zu-work-marker { margin: 0; }
        .zu-work--timeline .zu-work-marker svg { display: none; }
        .zu-work--timeline .zu-work-number { width: 34px; height: 34px; }
        .zu-work--timeline .zu-work-copy h3 { padding-top: 4px; text-wrap: wrap; }

        .zu-work--editorial .zu-work-layout { display: flex; flex-direction: column; gap: 25px; align-items: stretch; }
        .zu-work--editorial .zu-work-step { grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding-block: 18px; }
        .zu-work--editorial .zu-work-marker { flex-direction: column; gap: 8px; }
        .zu-work--editorial .zu-work-number { font-size: 28px; }
        .zu-work--grid .zu-work-step { grid-template-columns: 36px minmax(0, 1fr); gap: 14px; }
        .zu-work--grid .zu-work-step:nth-child(even) { border-left: 0; }
        .zu-work--grid .zu-work-step + .zu-work-step { border-top: 1px solid var(--zu-line); }
        .zu-work--grid .zu-work-marker { gap: 12px; }
        .zu-work--grid .zu-work-number { font-size: 30px; }
    }
}