/* TRRUST · how it works flow visuals */
/* ---------- SHARED VISUAL PARTS ---------- */
.viz{position:relative;height:190px;font-family:'Barlow',sans-serif}
.vz-sheet{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 16px 34px -22px rgba(19,31,50,0.45)}
.vz-sheet.vz-nv{background:var(--navy);border-color:var(--navy)}
.vz-k{font-size:8.5px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--muted)}
.vz-k.vz-b{color:var(--blue)}.vz-k.vz-w{color:rgba(255,255,255,0.55)}
.vz-t{font-family:'Barlow Condensed',sans-serif;font-weight:800;text-transform:uppercase;line-height:0.95;color:var(--navy)}
.vz-t.vz-w{color:#fff}
.vz-ln{height:4px;border-radius:2px;background:#e9ebef}
.vz-ln.vz-b{background:var(--light-blue)}
.vz-ln.vz-d{background:rgba(255,255,255,0.22)}
.vz-chip{display:inline-block;font-size:8px;font-weight:800;letter-spacing:0.1em;text-transform:uppercase;padding:3px 6px;border-radius:3px;background:var(--light-blue);color:var(--blue-dark)}
.vz-chip.vz-g{background:#dff2e5;color:#2c6b45}
.vz-av{width:16px;height:16px;border-radius:50%;background:var(--light-blue);color:var(--blue-dark);font-size:7px;font-weight:800;display:flex;align-items:center;justify-content:center}
.vz-row{display:flex;align-items:center;gap:6px}

/* 1 · playbook */
.v1 .vz-s1{left:14px;top:22px;width:120px;height:152px;transform:rotate(-5deg)}
.v1 .vz-s2{left:44px;top:12px;width:126px;height:164px;padding:14px 13px;display:flex;flex-direction:column;justify-content:space-between}
.v1 .vz-s2 .vz-bar{width:26px;height:3px;background:var(--light-blue);border-radius:2px}
.v1 .vz-s2 .vz-t{font-size:19px}
.v1 .vz-s3{left:180px;top:26px;width:132px;height:144px;padding:13px;display:flex;flex-direction:column;gap:7px}
.v1 .vz-s3 .vz-item{display:flex;gap:6px;align-items:center}
.v1 .vz-s3 .vz-tick{width:11px;height:11px;border-radius:3px;background:var(--blue);flex:none;position:relative}
.v1 .vz-s3 .vz-tick::after{content:'';position:absolute;left:3px;top:4px;width:5px;height:3px;border-left:1.5px solid #fff;border-bottom:1.5px solid #fff;transform:rotate(-45deg)}
.v1 .vz-s3 .vz-item .vz-ln{flex:1}

/* 2 · recruit */
.v2 .vz-inv{left:8px;top:16px;width:132px;height:150px;padding:13px;transform:rotate(-4deg);display:flex;flex-direction:column;gap:8px}
.v2 .vz-inv .vz-t{font-size:17px}
.v2 .vz-db{left:150px;top:10px;width:166px;height:170px;padding:11px 12px;display:flex;flex-direction:column;gap:0}
.v2 .vz-db .vz-hd{display:flex;justify-content:space-between;align-items:center;padding-bottom:7px;border-bottom:1px solid var(--line)}
.v2 .vz-db .vz-r{display:flex;align-items:center;gap:7px;padding:7px 0;border-bottom:1px solid #f1f2f5}
.v2 .vz-db .vz-r .vz-nm{flex:1;display:flex;flex-direction:column;gap:3px}
.v2 .vz-db .vz-r .vz-nm .vz-ln:first-child{width:70%}
.v2 .vz-db .vz-r .vz-nm .vz-ln:last-child{width:44%;height:3px}

/* 3 · nurture */
.v3 .vz-nl{left:10px;top:8px;width:158px;height:174px;padding:0;overflow:hidden;transform:rotate(-3deg)}
.v3 .vz-nl .vz-top{background:var(--navy);padding:9px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
.v3 .vz-nl .vz-top .vz-t{font-size:11.5px;white-space:nowrap}
.v3 .vz-nl .vz-bd{padding:11px 12px;display:flex;flex-direction:column;gap:6px}
.v3 .vz-nl .vz-hero{padding:0;flex:none;height:34px;border-radius:5px;background:linear-gradient(180deg,#eaf2fa,#dbe9f6)}
.v3 .vz-cal{left:178px;top:34px;width:138px;height:130px;padding:12px;display:flex;flex-direction:column;gap:8px}
.v3 .vz-cal .vz-date{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:30px;line-height:0.8;color:var(--blue)}
.v3 .vz-cal .vz-who{display:flex;gap:-4px}
.v3 .vz-cal .vz-who .vz-av{margin-right:-5px;border:1.5px solid #fff}

/* 4 · manage */
.v4 .vz-rep{left:8px;top:10px;width:184px;height:170px;padding:12px;display:flex;flex-direction:column;gap:7px}
.v4 .vz-rep .vz-r{display:flex;align-items:center;gap:7px;padding:5px 0;border-top:1px solid #f1f2f5}
.v4 .vz-rep .vz-r .vz-nm{flex:1;display:flex;flex-direction:column;gap:3px}
.v4 .vz-rep .vz-r .vz-nm .vz-ln{width:74%}
.v4 .vz-chart{left:202px;top:30px;width:114px;height:132px;padding:12px;display:flex;flex-direction:column;justify-content:space-between}
.v4 .vz-chart .vz-bars{display:flex;align-items:flex-end;gap:5px;height:56px}
.v4 .vz-chart .vz-bars i{flex:1;border-radius:2px 2px 0 0;background:var(--light-blue)}
.v4 .vz-chart .vz-bars i:last-child{background:var(--blue)}
.v4 .vz-chart .vz-big{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:26px;line-height:0.8;color:var(--navy)}


/* ---------- OPTION 2 · alternating rows on a spine ---------- */
.flow2{max-width:1000px;margin:34px auto 0;position:relative}
.f2-row{display:grid;grid-template-columns:1fr 72px 1fr;align-items:center;gap:0;padding:0;min-height:150px}
.f2-card{padding:0}
.f2-viz{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.13);border-radius:14px;height:124px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}
.f2-viz .viz{position:relative;width:330px;height:190px;transform:scale(0.6);transform-origin:center center;flex:none}
.f2-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;position:relative}
.f2-mid::before{content:'';position:absolute;top:0;bottom:0;width:2px;background:rgba(255,255,255,0.16)}
.f2-row:first-child .f2-mid::before{top:50%}
.f2-row:last-child .f2-mid::before{bottom:50%}
.f2-mid .down.end{background:#fff;border-color:#fff}
.f2-mid .down.end::after{border-right-color:var(--navy);border-bottom-color:var(--navy)}
.f2-node{display:none}
.f2-mid .down{position:relative;z-index:2;width:22px;height:22px;border-radius:50%;border:1px solid #fff;background:#fff;display:flex;align-items:center;justify-content:center;font-size:0}
.f2-mid .down::after{content:'';width:7px;height:7px;border-right:1.5px solid var(--navy);border-bottom:1.5px solid var(--navy);transform:rotate(45deg) translate(-1px,-1px)}
.f2-card .num{font-size:11.5px;font-weight:800;letter-spacing:0.16em;text-transform:uppercase;color:var(--light-blue);margin-bottom:6px}
.f2-card h4{font-family:'Barlow Condensed',sans-serif;font-weight:800;font-size:37px;text-transform:uppercase;line-height:1;margin-bottom:8px;color:#fff}
.f2-card p{font-size:16px;line-height:1.45;color:rgba(255,255,255,0.72);max-width:420px}


@media (max-width:760px){
.f2-row{grid-template-columns:1fr;gap:14px;padding:16px 0}
.f2-mid{flex-direction:row;gap:12px;padding:4px 0;justify-content:flex-start}
.f2-mid::before{display:none}
.f2-viz{height:170px}
.f2-card p{font-size:17px}
.f2-card h4{font-size:34px}
}