body:not(.home) main ol.lyl-process-pattern { --process-rail: 90px; --process-circle: 70px; --process-axis: 45px; position: relative; display: block; width: 100%; max-width: none; margin: 0; padding: 0; border: 0; background: transparent; list-style: none; } body:not(.home) main ol.lyl-process-pattern::before { content: none; } body:not(.home) main ol.lyl-process-pattern > li { position: relative; display: grid; grid-template-columns: var(--process-rail) minmax(0, 1fr); grid-template-rows: auto; align-items: start; gap: 0 24px; min-height: 0; margin: 0; padding: 0 0 36px; border: 0; background: transparent; text-align: left; } body:not(.home) main ol.lyl-process-pattern > li:last-child { padding-bottom: 0; } body:not(.home) main ol.lyl-process-pattern > li:not(:last-child)::before { content: ''; position: absolute; top: calc(var(--process-circle) / 2); bottom: calc(var(--process-circle) / -2); left: var(--process-axis); width: 1px; height: auto; background: #a8873f; transform: translateX(-50%); } body:not(.home) main ol.lyl-process-pattern > li:last-child::before { content: none; } body:not(.home) main ol.lyl-process-pattern > li:not(:last-child)::after { content: ''; position: absolute; top: auto; right: auto; bottom: 18px; left: var(--process-axis); box-sizing: border-box; width: 9px; height: 9px; margin: 0; border: 0; border-right: 1px solid #a8873f; border-bottom: 1px solid #a8873f; background: transparent; transform: translateX(-50%) rotate(45deg); } body:not(.home) main ol.lyl-process-pattern > li:last-child::after { content: none; } body:not(.home) main ol.lyl-process-pattern > li > .lyl-process-pattern__number { position: relative; z-index: 1; top: auto; right: auto; bottom: auto; left: auto; grid-column: 1; grid-row: 1; justify-self: center; display: grid; place-items: center; box-sizing: border-box; width: var(--process-circle); height: var(--process-circle); margin: 0; padding: 0; border: 1px solid #a8873f; border-radius: 50%; background: #fff; color: #806329; font: 500 16px/1 var(--lyl-sans); transform: none; } body:not(.home) main ol.lyl-process-pattern > li > .lyl-process-pattern__body { grid-column: 2; grid-row: 1; box-sizing: border-box; width: 100%; min-width: 0; max-width: none; margin: 0; padding: 28px 32px; border: 1px solid var(--lyl-line, #ddd5c4); border-left: 3px solid #a8873f; background: #faf8f3; color: #24332b; } body:not(.home) main .lyl-process-pattern__body > :is(small, .lyl-support-flow__label) { display: block; margin: 0 0 8px; color: #806329; font: 700 13px/1.6 var(--lyl-sans); letter-spacing: .03em; } body:not(.home) main .lyl-process-pattern__body > :is(h3, strong) { display: block; margin: 0 0 12px; padding: 0; color: #172c25; font-size: 20px; font-weight: 700; line-height: 1.6; text-align: left; } body:not(.home) main .lyl-process-pattern__body > p { margin: 0 0 14px; color: #5b685f; font-size: 15px; line-height: 1.95; } body:not(.home) main .lyl-process-pattern__body > :last-child { margin-bottom: 0; } @media (max-width: 760px) { body:not(.home) main ol.lyl-process-pattern { --process-rail: 50px; --process-circle: 44px; --process-axis: 25px; } body:not(.home) main ol.lyl-process-pattern > li { column-gap: 12px; padding-bottom: 28px; } body:not(.home) main ol.lyl-process-pattern > li > .lyl-process-pattern__number { font-size: 13px; } body:not(.home) main ol.lyl-process-pattern > li > .lyl-process-pattern__body { padding: 20px 18px; } body:not(.home) main .lyl-process-pattern__body > :is(h3, strong) { font-size: 17px; } body:not(.home) main ol.lyl-process-pattern > li:not(:last-child)::after { bottom: 14px; } }   body:not(.home) main ol.lyl-process-pattern { counter-reset: process-step; } body:not(.home) main ol.lyl-process-pattern > li { counter-increment: process-step; } body:not(.home) main .lyl-process-pattern__body:not(:has(> small))::before { content: "STEP " counter(process-step); display: block; margin: 0 0 8px; color: #806329; font: 700 13px/1.6 var(--lyl-sans); letter-spacing: .03em; }