/* Scoped system overview. Base content is visible; JS opts into initial states. */
#system.system{--system-green:var(--teal,#286b63);--system-number:#6f8d82;--system-ease:cubic-bezier(.22,1,.36,1);background:linear-gradient(180deg,#fff,#f5f8f4);padding-block:clamp(84px,6.5vw,116px) clamp(120px,9vw,160px)}
#system .system-stage{width:100%}
#system .system-heading{width:100%;max-width:1440px;margin-inline:auto;text-align:center}
#system .eyebrow{margin-bottom:22px}
#system h2{max-width:1440px;margin-inline:auto;font-size:clamp(34px,3.5vw,56px);line-height:1.14;white-space:nowrap;text-wrap:nowrap;min-height:1.14em}
#system .system-word{display:inline-block}
#system .system-sequence{position:relative;width:100%;max-width:1320px;margin:72px auto 0}
#system .system-steps{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,4vw,64px);padding:0;margin:0}
#system .system-connector{position:absolute;left:24px;right:24px;top:0;height:2px;background:var(--system-green);transform-origin:left center;pointer-events:none}
#system .system-step{position:relative;min-width:0;padding:34px 24px 20px;text-align:left;isolation:isolate}
#system .system-step::before{content:"";position:absolute;inset:16px 0 0;border-radius:8px;background:#286b6309;opacity:0;z-index:-1;transition:opacity .2s var(--system-ease);pointer-events:none}
#system .system-dot{position:absolute;left:19px;top:-4px;width:10px;height:10px;border-radius:50%;background:var(--system-green);pointer-events:none}
#system .system-number{position:relative;display:block;width:max-content;font-size:clamp(64px,5vw,80px);font-weight:450;line-height:1;font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum" 1,"tnum" 1;letter-spacing:-.055em;color:var(--system-number);margin-bottom:26px}
#system .system-number::after{content:attr(data-number);position:absolute;inset:0;color:var(--system-green);opacity:0;transition:opacity .2s var(--system-ease)}
#system h3{font-size:30px;line-height:1.2;margin:0}
#system .system-description{font-size:17px;line-height:1.6;color:var(--muted,#526a6c);margin:18px 0 16px;max-width:340px}
#system .system-link{display:inline-flex;align-items:center;gap:16px;min-width:44px;min-height:44px;padding:8px 0;color:var(--system-green);font-size:14px;font-weight:600;line-height:1.5;text-underline-offset:5px}
#system .system-link span{font-size:20px;transition:transform .2s var(--system-ease)}
#system .system-link:focus-visible{outline:2px solid var(--system-green);outline-offset:3px;border-radius:2px}
#system .system-step:focus-within::before,#system .system-step:focus-within .system-number::after{opacity:1}
@media(hover:hover) and (pointer:fine){
 #system .system-step:hover::before,#system .system-step:hover .system-number::after{opacity:1}
 #system .system-step:hover .system-link span{transform:translateX(4px)}
 #system .system-link:hover{text-decoration:underline}
}
#system.system-motion-ready [data-system-reveal]:not([data-revealed]){opacity:0;transform:translateY(24px)}
#system.system-motion-ready .eyebrow:not([data-revealed]){transform:translateY(12px)}
#system.system-motion-ready .system-word:not([data-revealed]){transform:translateY(16px)}
#system.system-motion-ready .system-dot:not([data-revealed]){opacity:0;transform:scale(0)}
#system.system-motion-ready .system-connector{transform:scaleX(0)}
@media(max-width:1023px){
 #system.system{padding-block:64px 80px}
 #system .system-heading{max-width:660px}
 #system h2{font-size:40px;max-width:660px;white-space:normal;text-wrap:balance;min-height:2.28em}
 #system .system-sequence{max-width:660px;margin-top:52px}
 #system .system-steps{grid-template-columns:1fr;gap:40px}
 #system .system-step{padding:0 20px 0 52px}
 #system .system-step::before{inset:-12px 0 -12px 32px}
 #system .system-connector{left:8px;right:auto;top:32px;bottom:32px;width:2px;height:auto;transform-origin:center top}
 #system .system-dot{left:4px;top:27px}
 #system .system-number{font-size:64px;margin-bottom:18px}
 #system .system-description{max-width:520px}
 #system.system-motion-ready .system-connector{transform:scaleY(0)}
}
@media(max-width:767px){
 #system.system{padding-block:48px 64px}
 #system h2{font-size:clamp(34px,5.2vw,40px);line-height:1.16}
 #system .system-sequence{margin-top:44px}
 #system h3{font-size:28px}
 #system .system-description{font-size:16px;line-height:1.6;margin-block:14px 12px}
 #system .system-step{padding-right:4px;padding-left:42px}
 #system .system-step::before{left:26px}
}
@media(prefers-reduced-motion:reduce){
 #system [data-system-reveal],#system .system-dot,#system .system-connector{opacity:1!important;transform:none!important}
 #system .system-step::before,#system .system-number::after,#system .system-link span{transition:none}
 #system .system-link span{transform:none!important}
}