.performance-site #framework.system-section { background: #f7f6f0; color: #171815; padding: clamp(64px,7vw,104px) 24px 64px; margin: 0; border: 0; overflow: hidden; }
.system-shell { max-width: 1232px; margin-inline: auto; }
.system-header { display: grid; grid-template-columns: 1.1fr 1fr; align-items: end; gap: 72px; margin-bottom: 56px; }
.performance-site .system-header .design-script { display: inline-block; transform-origin: left bottom; margin-bottom: 24px; }
.performance-site #system-heading { font-size: clamp(36px,4.5vw,64px); line-height: 1; margin: 0; }
#system-heading span { color: #b54707; }
.system-header > p { max-width: 470px; font-size: 16px; line-height: 1.8; color: #626458; margin: 0 0 4px; }
.system-flow { position: relative; }
.system-track { position: absolute; top: 25px; left: 26px; right: 26px; height: 2px; background: #d4d5c9; }
.system-track > span { display: block; width: 100%; height: 100%; background: #d65a12; transform: scaleX(var(--system-progress,1)); transform-origin: left; }
.system-steps { position: relative; display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 28px; list-style: none; margin: 0; padding: 0; }
.system-node { width: 52px; height: 52px; display: grid; place-items: center; font: 700 27px/1 'Outfit',sans-serif; color: #fff; background: #b54707; border: 6px solid #f7f6f0; position: relative; box-sizing: content-box; margin: -6px 0 24px -6px; }
.system-step-content { min-width: 0; }
.system-label { font-size: 9px; font-weight: 700; letter-spacing: .09em; color: #65675b; margin: 0 0 12px; }
.performance-site .system-step-content h3 { font-size: clamp(25px,2.4vw,34px); margin: 0 0 16px; letter-spacing: -.035em; }
.system-description { font-size: 14px; line-height: 1.8; color: #585b4e; margin: 0 0 24px; }
.system-example { border-top: 1px solid #d4d5c9; padding-top: 18px; margin-top: auto; }
.system-example > span { font-size: 8px; font-weight: 700; letter-spacing: .12em; color: #aa4409; }
.system-example p { font-size: 12px; line-height: 1.75; color: #4f5344; margin: 8px 0 0; }
.system-steps li { display: flex; flex-direction: column; min-width: 0; }
.system-step-content { display: flex; flex-direction: column; flex: 1; }
.system-bottom { margin-top: 44px; padding-top: 28px; border-top: 1px solid #d4d5c9; display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.system-bottom p { font-size: 15px; line-height: 1.8; color: #626458; margin: 0; }
.system-bottom strong { color: #1c2017; font-weight: 600; }
.performance-site a.system-cta[href="#cta"] { background: #171815; color: #fff; border-color: #171815; display: inline-flex; align-items: center; justify-content: space-between; padding: 18px 24px; gap: 36px; text-decoration: none; }
.system-cta span { font-size: 22px; line-height: 1; }
.system-enhanced .system-node { background: #eeeee6; color: #77796c; }
.system-enhanced .is-reached .system-node { background: #b54707; color: #fff; }
/* Individual connectors keep the final link dashed in both orientations. */
.system-track { display: none; }
.system-steps li { position: relative; --connector-color: #d65a12; }
.system-steps li:not(:last-child)::after { content: ''; position: absolute; top: 25px; left: 26px; width: calc(100% + 28px); border-top: 2px solid var(--connector-color); pointer-events: none; }
.system-steps li:nth-last-child(2)::after { border-top-style: dashed; }
.system-node { z-index: 1; }
.system-enhanced .system-steps li { --connector-color: #d4d5c9; }
.system-enhanced .system-steps li.is-reached { --connector-color: #d65a12; }
.system-steps .system-closing-step .system-node { background: #f7f6f0; color: #a34b1b; outline: 1px solid #a34b1b; outline-offset: -7px; }
.system-destination-title { color: #a34b1b; }
@supports (-webkit-text-stroke: 1px #a34b1b) {
 .system-destination-title { color: transparent; -webkit-text-stroke: 1px #a34b1b; }
}
@media (prefers-reduced-motion: no-preference) { .system-node { transition: background .3s,color .3s; } }
@media (max-width: 1023px) {
 .system-steps li:not(:last-child)::after { top: 26px; left: 25px; width: 0; height: calc(100% + 28px); border-top: 0; border-left: 2px solid var(--connector-color); }
 .system-steps li:nth-last-child(2)::after { border-left-style: dashed; }
 .system-header { gap: 32px; }
 .system-steps { grid-template-columns: 1fr; gap: 28px; }
 .system-steps li { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 24px; }
 .system-step-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; }
 .system-label,.system-step-content h3,.system-description { grid-column: 1; }
 .system-description { margin-bottom: 0; }
 .system-example { grid-column: 2; grid-row: 1/4; margin: 0; align-self: center; }
 .system-track { left: 25px; top: 26px; right: auto; bottom: 26px; height: auto; width: 2px; }
 .system-track > span { transform: scaleY(var(--system-progress,1)); transform-origin: top; }
 .system-node { margin-bottom: 0; }
}
@media (max-width: 767px) {
 .system-steps li:not(:last-child)::after { top: 21px; left: 20px; }
 .system-header { grid-template-columns: 1fr; gap: 24px; margin-bottom: 36px; }
 .system-header > p { font-size: 14px; }
 .system-steps li { grid-template-columns: 42px minmax(0,1fr); gap: 18px; }
 .system-node { width: 42px; height: 42px; font-size: 23px; }
 .system-track { left: 20px; top: 21px; bottom: 21px; }
 .system-step-content { display: flex; }
 .system-example { margin-top: 16px; padding-top: 12px; align-self: stretch; }
 .system-bottom { flex-direction: column; align-items: start; gap: 24px; }
 .performance-site a.system-cta[href="#cta"] { width: 100%; gap: 16px; padding-inline: 18px; }
}

/* Compact section spacing on mobile. */
@media (max-width: 767px) {
 .performance-site #framework.system-section { padding-block: 48px; }
}