/* ETG homepage — "12 steps. No surprises." timeline (two rows of six on desktop) */
.hp-12__wrap { position: relative; display: grid; gap: clamp(36px, 5vw, 56px); margin-top: clamp(36px, 5vw, 56px); }
.hp-12__row { position: relative; }
.hp-12__rail { position: absolute; left: calc(100% / 12); right: calc(100% / 12); top: 21px; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, #CFE2EE 0 8px, transparent 8px 14px); }
.hp-12__rail span { position: absolute; inset: 0; border-radius: 2px; transform-origin: left; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, #1D3F8F, #00A3D9 45%, #00B2A9 75%, #3FB97A); }
.hp-12__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.hp-12__step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.hp-12__n { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; border-radius: 50%; background: #fff; border: 1.5px solid #CFE2EE;
  font: 700 14px/1 var(--f-display); color: #64748B; box-shadow: 0 0 0 6px #F7FAFC; transition: background 450ms, color 450ms, border-color 450ms, transform 450ms cubic-bezier(.2,.7,.1,1), box-shadow 450ms; }
.hp-12__step.is-lit .hp-12__n { background: #082238; border-color: #082238; color: #fff; transform: scale(1.06); box-shadow: 0 0 0 6px #F7FAFC, 0 10px 22px -10px rgba(8,34,56,.6); }
.hp-12__step.is-promise.is-lit .hp-12__n { background: #FFB81C; border-color: #FFB81C; color: #082238; box-shadow: 0 0 0 6px #F7FAFC, 0 10px 22px -8px rgba(255,184,28,.7); }
.hp-12__t { margin: 0 0 6px; font: 700 17px/1.25 var(--f-display); letter-spacing: -.01em; color: #082238; }
.hp-12__d { margin: 0; font: 400 14.5px/1.5 var(--f-body); color: #475569; max-width: 20ch; }
.hp-12__tag { margin-top: 10px; padding: 3px 9px; border-radius: 6px; background: #FFF1CC; color: #7A4B00; font: 600 11.5px/1.4 var(--f-body); }
.hp-12__step { opacity: .55; transform: translateY(10px); transition: opacity 600ms, transform 600ms cubic-bezier(.2,.7,.1,1); }
.hp-12__step.is-lit { opacity: 1; transform: none; }
html:not(.hp-js) .hp-12__step { opacity: 1; transform: none; }

.hp-12__trust { list-style: none; margin: clamp(44px, 6vw, 64px) auto 0; padding: 18px 22px; max-width: 1040px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px;
  border-radius: 18px; background: #fff; border: 1px solid #E2E8F0; box-shadow: 0 20px 44px -36px rgba(8,34,56,.5); }
.hp-12__trust li { position: relative; padding-left: 28px; font: 400 14.5px/1.45 var(--f-body); color: #475569; }
.hp-12__trust li::before { content: ""; position: absolute; left: 0; top: 1px; width: 19px; height: 19px; border-radius: 50%;
  background: #DDF4EF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2308776F' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat; }
.hp-12__trust b { display: block; font: 700 15px/1.3 var(--f-display); color: #082238; }

@media (max-width: 1100px) {
  .hp-12__list { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 30px; }
  .hp-12__rail { display: none; }
  .hp-12__trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .hp-12__wrap { gap: 0; }
  .hp-12__row { padding-left: 0; }
  .hp-12__list { grid-template-columns: 1fr; row-gap: 0; position: relative; }
  .hp-12__list::before { content: ""; position: absolute; left: 21px; top: 22px; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, #CFE2EE 0 6px, transparent 6px 11px); }
  .hp-12__step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; align-items: start; text-align: left; padding: 0 0 22px; }
  .hp-12__n { grid-row: span 3; margin: 0; }
  .hp-12__t { margin-top: 10px; }
  .hp-12__d { max-width: none; }
  .hp-12__tag { justify-self: start; }
  .hp-12__trust { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .hp-12__step, .hp-12__n { transition: none; } .hp-12__step { opacity: 1; transform: none; } }
.hp-12__turn { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 0; }
.hp-12__turn path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.hp-12__turn-base { stroke: #CFE2EE; stroke-dasharray: 8 6; }
.hp-12__turn-fill { transition: stroke-dashoffset .12s linear; }
.hp-12__list { position: relative; z-index: 1; }