/* portal.html only */
/* client portal page */
.flow3{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.flow3 li{display:flex;flex-direction:column;min-width:0}
.flow3 .stage img{aspect-ratio:4/3;object-fit:cover}
.step{display:flex;flex-direction:column;gap:8px;margin-top:18px}
.step h3{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.step p{font-size:15.5px;line-height:1.55;color:var(--muted);max-width:36ch}
.res{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1.5px solid var(--line-strong);border-bottom:1px solid var(--line)}
.res>div{display:flex;flex-direction:column;gap:10px;padding:28px 24px 30px 0;min-width:0}
.res>div+div{padding-left:24px;border-left:1px solid var(--line)}
.res h3{font-size:clamp(24px,2.2vw,30px);font-weight:600;letter-spacing:-.03em;line-height:1.15;font-variant-numeric:tabular-nums}
.res h3 .plus{color:var(--accent)}
.pair2 .stage.flat{padding:0}
.cs-cover .stage.flat img{aspect-ratio:16/10;object-fit:cover;object-position:50% 30%}
.res p{font-size:var(--t-small);line-height:1.5;color:var(--muted);max-width:30ch}
.learn{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.learn li{display:flex;flex-direction:column;gap:10px;padding-top:20px;border-top:1.5px solid var(--line-strong)}
.learn .num{font-family:var(--f-mono);font-size:13px;color:var(--accent)}
.learn h3{font-size:clamp(19px,1.6vw,22px);font-weight:600;letter-spacing:-.02em;line-height:1.25}
.learn p{font-size:15.5px;line-height:1.55;color:var(--muted)}
@media (max-width:760px){
  .flow3,.learn{grid-template-columns:1fr;gap:36px}
  .res{grid-template-columns:1fr}
  .res>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .res>div{padding:22px 0}
}
/* ---------- QA polish: comfortable touch targets, tidy footer and nav at mid widths ---------- */
@media (pointer:coarse){
  .logo{padding-block:10px;margin-block:-10px}
  .ulink{padding-block:10px;margin-block:-10px}
  .crumb a{display:inline-block;padding-block:12px;margin-block:-12px}
  .seg button{height:36px}
  .email a{padding-block:6px;margin-block:-6px}
}
@media (max-width:900px){.nav-right .status{display:none}}
@media (max-width:760px){.foot{flex-direction:column;align-items:flex-start;gap:12px}}
/* ---------- theme transition: the new mode spreads from the toggle like ink in water ---------- */
@property --vr{syntax:'<length>';inherits:true;initial-value:0px}
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
:root.vt-ink::view-transition-new(root){
  -webkit-mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  mask-image:
    radial-gradient(circle at var(--vx) var(--vy),#000 var(--vr),transparent calc(var(--vr) + 160px)),
    radial-gradient(circle at calc(var(--vx) - var(--vr) * .2) calc(var(--vy) + var(--vr) * .14),#000 calc(var(--vr) * .86),transparent calc(var(--vr) * .86 + 140px)),
    radial-gradient(circle at calc(var(--vx) + var(--vr) * .06) calc(var(--vy) + var(--vr) * .3),#000 calc(var(--vr) * .74),transparent calc(var(--vr) * .74 + 120px));
  animation:vt-ink 1100ms cubic-bezier(.4,.15,.2,1) both;
}
@keyframes vt-ink{from{--vr:0px}to{--vr:var(--vR)}}