/* Approach steps on light dots (C08). Generated from mockup/sections/industry/10-built-around-how-your-company-actually-w.html and css/industry.css. */
@keyframes i-up {from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes a-pop {from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
.gx-approachstep .i-kick {margin:0;font-size:14px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#5834C7}
.gx-approachstep .i-h2 {margin:0;font-family:'Jost',Arial,sans-serif;font-weight:700;font-size:64px;line-height:1.1;letter-spacing:-.02em;color:#19152F}
.gx-approachstep .i-lede {margin:0;max-width:680px;font-size:20px;line-height:1.6;color:#655B77}
.gx-approachstep .i-hr.is-wait>* {opacity:0;transform:translateY(20px)}
.gx-approachstep .i-hr.is-wait.is-in>* {animation:i-up 1.2s cubic-bezier(.2,.7,.2,1) both}
.gx-approachstep .i-hr.is-wait.is-in>:nth-child(2) {animation-delay:.15s}
.gx-approachstep .i-hr.is-wait.is-in>:nth-child(3) {animation-delay:.3s}
.gx-approachstep .i-steps {position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px}
.gx-approachstep .i-steps::before {content:"";position:absolute;left:0;right:0;top:32px;border-top:1.5px solid #665483}
.gx-approachstep .i-step {position:relative;display:flex;flex-direction:column;gap:12px}
.gx-approachstep .i-dot {display:flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:#302544;margin-bottom:12px}
.gx-approachstep .i-step h3 {margin:0;font-family:'Jost',Arial,sans-serif;font-weight:600;font-size:24px;line-height:1.15;color:#FFFFFF}
.gx-approachstep .i-step p {margin:0;font-size:16px;line-height:1.55;color:#C9C2DA}
.gx-approachstep .i-steps-light::before {border-top-color:#D9D4E6}
.gx-approachstep .i-steps-light .i-step h3 {color:#19152F}
.gx-approachstep .i-steps-light .i-step p {color:#655B77}
.gx-approachstep .i-steps-light .i-dot {background:#FFFFFF!important;box-shadow:inset 0 0 0 1px #D9D4E6;-webkit-backdrop-filter:none;backdrop-filter:none}
.gx-approachstep .i-dot,.gx-approachstep .i-glass {background:rgba(255,255,255,.1)!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.36);-webkit-backdrop-filter:blur(2px) saturate(160%);backdrop-filter:blur(2px) saturate(160%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .gx-approachstep .i-dot,.gx-approachstep .i-glass {background:#2A2346!important}
}
@media (prefers-reduced-motion: no-preference) {
  .gx-approachstep .i-steps.is-wait .i-dot {opacity:0;transform:scale(.4)}
  .gx-approachstep .i-steps.is-wait.is-in .i-dot {animation:a-pop .5s cubic-bezier(.2,.7,.2,1) both}
  .gx-approachstep .i-steps.is-in .i-step:nth-child(2) .i-dot {animation-delay:.15s}
  .gx-approachstep .i-steps.is-in .i-step:nth-child(3) .i-dot {animation-delay:.3s}
  .gx-approachstep .i-steps.is-in .i-step:nth-child(4) .i-dot {animation-delay:.45s}
  .gx-approachstep .i-steps.is-in .i-step:nth-child(5) .i-dot {animation-delay:.6s}
}
.gx-approachstep-s1.gx-approachstep-s1 { display: grid;grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);gap: 80px;align-items: end }
.gx-approachstep-s2.gx-approachstep-s2 { display: flex;flex-direction: column;gap: 20px;max-width: 900px }
.gx-approachstep-s3.gx-approachstep-s3 { font-size: 56px;color: #19152F }
.gx-approachstep-s4.gx-approachstep-s4 { color: #5834C7 }
.gx-approachstep-s5.gx-approachstep-s5 { margin: 0;font-family: 'Jost', Arial, sans-serif;font-weight: 600;font-size: 26px;line-height: 1.25;color: #5834C7 }
.gx-approachstep-s6.gx-approachstep-s6 { margin: 0 }
/* One column per step (2 to 6), so five steps sit on one line (hand-written change). */
.gx-approachstep-s7.gx-approachstep-s7 { grid-template-columns: repeat(var(--gm-n, 4), minmax(0, 1fr)); gap: 40px }
.gx-approachstep-s7.gx-approachstep-s7[style*="--gm-n: 5"], .gx-approachstep-s7.gx-approachstep-s7[style*="--gm-n: 6"] { gap: 28px }
.gx-approachstep-s8.gx-approachstep-s8 { display: flex;flex-direction: column;gap: 64px }
@media (max-width: 1100px) {
  .gx-approachstep-s1.gx-approachstep-s1 { grid-template-columns:minmax(0,1fr)!important }
  .gx-approachstep-s3.gx-approachstep-s3 { font-size:38px!important;line-height:1.1!important }
  .gx-approachstep-s7.gx-approachstep-s7 { grid-template-columns:minmax(0,1fr)!important }
  .gx-approachstep .i-steps { grid-template-columns:minmax(0,1fr)!important }
  .gx-approachstep .i-steps { grid-template-columns:minmax(0,1fr)!important }
}
@media (max-width: 640px) {
  .gx-approachstep-s5.gx-approachstep-s5 { font-size:24px!important;line-height:1.25!important }
}

/* Optional connecting line (hand-written addition). */
.gx-approachstep .i-steps--no-line::before { display: none; }