/* NESkills v213 — Soft Skills applied-learning flow.
   Replaces the heavy navy slab with a light, connected three-step progression. */
.ss213-transfer-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
  padding:8px 0;
  isolation:isolate;
}
.ss213-transfer-flow::before{
  content:"";
  position:absolute;
  z-index:0;
  left:10%;
  right:10%;
  top:50%;
  height:2px;
  background:linear-gradient(90deg,rgba(7,143,162,.18),rgba(7,143,162,.75),rgba(244,180,0,.58));
  transform:scaleX(0);
  transform-origin:left center;
  animation:ss213Line 1.15s cubic-bezier(.22,.78,.24,1) .18s forwards;
}
.ss213-transfer-step{
  position:relative;
  z-index:1;
  display:grid;
  align-content:start;
  min-width:0;
  min-height:218px;
  padding:25px 23px 23px;
  border:1px solid rgba(6,19,38,.1);
  border-radius:24px;
  background:linear-gradient(155deg,#fff 0%,#fcf9f3 100%);
  box-shadow:0 18px 42px rgba(6,19,38,.08);
  transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.ss213-transfer-step::before{
  content:"";
  position:absolute;
  top:50%;
  left:-10px;
  width:18px;
  height:18px;
  border:4px solid #f7fafb;
  border-radius:50%;
  background:#078fa2;
  box-shadow:0 0 0 1px rgba(7,143,162,.22);
  transform:translateY(-50%);
}
.ss213-transfer-step:first-child::before{display:none}
.ss213-transfer-step:last-child::before{background:#f4b400;box-shadow:0 0 0 1px rgba(244,180,0,.28)}
.ss213-transfer-index{
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:11px;
  background:#ddf4f7;
  color:#0f7694;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
}
.ss213-transfer-label{
  margin-top:34px;
  color:#9a6800;
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ss213-transfer-step strong{
  display:block;
  margin-top:9px;
  color:#061326;
  font-size:clamp(19px,1.45vw,23px);
  line-height:1.12;
  letter-spacing:-.032em;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
}
.ss213-transfer-step p{
  margin:12px 0 0;
  color:#5b6677;
  font-size:13px;
  line-height:1.5;
}
@media (hover:hover) and (pointer:fine){
  .ss213-transfer-step:hover{
    transform:translateY(-4px);
    border-color:rgba(7,143,162,.26);
    box-shadow:0 24px 50px rgba(6,19,38,.11);
  }
}
@keyframes ss213Line{to{transform:scaleX(1)}}
@media (min-width:768px) and (max-width:1180px){
  .ss213-transfer-flow{gap:12px}
  .ss213-transfer-step{min-height:205px;padding:22px 18px 20px;border-radius:21px}
  .ss213-transfer-label{margin-top:27px}
  .ss213-transfer-step strong{font-size:18px}
}
@media (max-width:767px){
  .ss98-proof-grid{gap:25px!important}
  .ss213-transfer-flow{
    grid-template-columns:1fr;
    gap:12px;
    width:100%;
    padding:0 0 0 24px;
  }
  .ss213-transfer-flow::before{
    left:8px;
    right:auto;
    top:18px;
    bottom:18px;
    width:2px;
    height:auto;
    background:linear-gradient(180deg,rgba(7,143,162,.25),rgba(7,143,162,.78),rgba(244,180,0,.62));
    transform:scaleY(0);
    transform-origin:center top;
    animation-name:ss213LineMobile;
  }
  .ss213-transfer-step{
    grid-template-columns:40px minmax(0,1fr);
    column-gap:13px;
    min-height:0;
    padding:17px 18px;
    border-radius:18px;
    box-shadow:0 12px 28px rgba(6,19,38,.075);
  }
  .ss213-transfer-step::before{
    left:-24px;
    top:24px;
    width:14px;
    height:14px;
    border-width:3px;
    transform:none;
  }
  .ss213-transfer-step:first-child::before{display:block}
  .ss213-transfer-index{grid-row:1 / span 3;width:36px;height:36px;border-radius:10px}
  .ss213-transfer-label{grid-column:2;margin:1px 0 0;font-size:10px}
  .ss213-transfer-step strong{grid-column:2;margin-top:5px;font-size:17px;line-height:1.18}
  .ss213-transfer-step p{grid-column:2;margin-top:7px;font-size:12px;line-height:1.42}
}
@keyframes ss213LineMobile{to{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .ss213-transfer-flow::before{animation:none;transform:none}
  .ss213-transfer-step{transition:none}
}
