/* Visa Services page only. Loaded after css/services.css. */
/* ---- VISA · six flaws: a red cross that turns into our tick ---- */
.flaws{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.flaw{position:relative;padding:clamp(24px,2.6vw,34px) clamp(18px,2vw,28px) clamp(26px,2.8vw,36px) 0;border-bottom:1px solid var(--line)}
.flaw:not(:nth-child(3n+1)){padding-left:clamp(18px,2vw,28px);border-left:1px solid var(--line)}
.flaw-x{position:relative;width:46px;height:46px;margin-bottom:18px}
.flaw-x span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;font-size:18px;
 transition:opacity .5s ease,transform .6s var(--ease)}
.flaw-x .x{background:#FCE8E6;color:var(--no)}
.flaw-x .ok{background:#E3F4EA;color:var(--ok);opacity:0;transform:rotate(-90deg) scale(.6)}
.flaw.is-checked .flaw-x .x{opacity:0;transform:rotate(90deg) scale(.6)}
.flaw.is-checked .flaw-x .ok{opacity:1;transform:none}
.flaw h3{font-size:clamp(18px,1.5vw,21px);color:var(--purple-700);margin:0 0 8px;line-height:1.3}
.flaw p{margin:0;font-size:14.5px;line-height:1.7;color:#4A4450}
/* ---- VISA · five steps on a flight path that fills as you scroll ---- */
.steps{position:relative;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);list-style:none;margin:0;padding:0}
.steps-line,.steps-fill{position:absolute;left:24px;right:24px;top:23px;height:0;border-top:2px dashed rgba(142,44,142,.28)}
.steps-fill{border-top:2px solid var(--gold);right:auto;width:calc((100% - 48px) * var(--p,0));transition:width .2s linear}
.step{position:relative;z-index:1}
.step-n{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:#fff;
 border:2px solid var(--purple-400);font-family:'Playfair Display',serif;font-size:20px;font-weight:600;color:var(--purple-700);
 box-shadow:0 0 0 6px var(--surface-alt);transition:background .4s ease,color .4s ease,border-color .4s ease}
.step.is-past .step-n{background:var(--purple-700);border-color:var(--purple-700);color:var(--gold)}
.step h3{font-size:18px;color:var(--purple-700);margin:20px 0 6px}
.step p{margin:0;font-size:14px;line-height:1.65;color:#4A4450}
@media (max-width:900px){
  .flaws{grid-template-columns:repeat(2,minmax(0,1fr))}
  .flaw,.flaw:not(:nth-child(3n+1)){padding:24px 18px 26px 0;border-left:0}
  .flaw:nth-child(2n){padding-left:18px;border-left:1px solid var(--line)}
  .steps{grid-template-columns:minmax(0,1fr);gap:0;padding-left:0}
  .steps-line,.steps-fill{left:23px;right:auto;top:24px;bottom:24px;height:auto;width:0;border-top:0;border-left:2px dashed rgba(142,44,142,.28)}
  .steps-fill{border-left:2px solid var(--gold);bottom:auto;height:calc((100% - 48px) * var(--p,0))}
  .step{display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px;padding-bottom:24px}
  .step .step-n{grid-row:span 2}
  .step h3{margin:10px 0 4px}
}
@media (max-width:640px){
  .flaw:nth-child(2n){padding-left:0;border-left:0}
}
.flaws{gap:16px;border-top:0}
.flaw,.flaw:not(:nth-child(3n+1)){padding:24px;border:0;border-radius:16px;background:#fff;box-shadow:0 12px 30px rgba(94,26,94,.08);
 transition:transform .4s var(--ease),box-shadow .4s ease}
.flaw:hover{transform:translateY(-5px);box-shadow:0 26px 54px rgba(94,26,94,.14)}
@media (max-width:640px){
  .flaws{grid-template-columns:minmax(0,1fr)}
}