/* Sculpted product objects for the connection journey. Scoped to this section. */
#how.dimensional-how{padding:108px 0 95px;background:var(--bg,#08090e)}
#how.dimensional-how .head{display:grid;grid-template-columns:1fr 360px;column-gap:50px;align-items:end;margin-bottom:48px}
#how.dimensional-how .head .tag{grid-column:1/-1;margin-bottom:20px}
#how.dimensional-how h2{margin:0;font-size:clamp(38px,4.6vw,64px);line-height:1.07;letter-spacing:-.05em}
#how.dimensional-how .head p{margin:0;line-height:1.8}
#how.dimensional-how .steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;counter-reset:none}
#how.dimensional-how .step{display:flex;flex-direction:column;position:relative;padding:0 28px 26px;min-height:510px;border:1px solid #2b2c3d;border-radius:18px;background:linear-gradient(155deg,#1b1c2a 0%,#10111a 42%,#0c0d14 100%);box-shadow:inset 0 1px 0 #ffffff0d,0 18px 35px #0003;overflow:hidden;transform:none}
#how.dimensional-how .step:before,#how.dimensional-how .step:after{display:none}
#how.dimensional-how .how-stage{position:relative;height:245px;display:grid;place-items:center;perspective:700px;isolation:isolate;margin:0 -28px 8px;overflow:hidden}
#how.dimensional-how .how-stage:after{content:"";position:absolute;bottom:28px;width:160px;height:14px;border-radius:50%;background:#0008;filter:blur(10px);z-index:-1}
#how.dimensional-how .how-number{position:absolute;left:28px;top:23px;font-size:14px;letter-spacing:.08em;color:#818198}
#how.dimensional-how .how-object{position:relative;transition:transform .65s cubic-bezier(.2,.8,.2,1);width:210px;height:145px;transform-style:preserve-3d}
#how.dimensional-how .how-plan{transform:rotateX(16deg) rotateY(-22deg) rotateZ(-9deg);width:148px;height:153px}
#how.dimensional-how .plan-sheet{position:absolute;inset:0;border-radius:11px;border:1px solid #a293df78}
#how.dimensional-how .plan-sheet.back{background:#30274e;transform:translate3d(18px,16px,-18px)}
#how.dimensional-how .plan-sheet.middle{background:#51406f;transform:translate3d(9px,8px,-9px)}
#how.dimensional-how .plan-sheet.front{background:linear-gradient(135deg,#c4b5f0,#8372bd 75%,#6b5b9b);box-shadow:inset 1px 1px 0 #ede7ffad,5px 6px 0 #3a2d64;color:#28203e;padding:19px}
#how.dimensional-how .object-label{font-size:9px;font-weight:750;letter-spacing:.1em}
#how.dimensional-how .plan-lines{display:grid;gap:9px;margin-top:26px}
#how.dimensional-how .plan-lines i{height:4px;width:73px;background:#30224866;border-radius:3px}
#how.dimensional-how .plan-lines i:nth-child(2){width:55px}
#how.dimensional-how .plan-lines i:nth-child(3){width:37px}
#how.dimensional-how .object-tick{position:absolute;right:14px;bottom:14px;background:#34284c;color:#e0d3ff;width:29px;height:29px;display:grid;place-items:center;border-radius:50%;font-size:18px}
#how.dimensional-how .how-bank{transform:rotateX(16deg) rotateY(-20deg) rotateZ(-10deg)}
#how.dimensional-how .bank-edge,#how.dimensional-how .bank-face{position:absolute;inset:0;border-radius:14px}
#how.dimensional-how .bank-edge{transform:translate3d(6px,7px,-6px);background:#253062;border:1px solid #515c91}
#how.dimensional-how .bank-face{background:linear-gradient(130deg,#8b9df0,#555fa3 65%,#404879);border:1px solid #a9b8ff;box-shadow:inset 0 1px 0 #fff7;padding:19px;color:#edf0ff}
#how.dimensional-how .bank-chip{width:29px;height:23px;border-radius:5px;margin-top:18px;background:linear-gradient(145deg,#eee1c8,#a99d86);border:1px solid #f0e3c4;position:relative}
#how.dimensional-how .bank-chip:before,#how.dimensional-how .bank-chip:after{content:"";position:absolute;background:#8b8274;opacity:.7}
#how.dimensional-how .bank-chip:before{top:10px;left:0;right:0;height:1px}
#how.dimensional-how .bank-chip:after{top:0;bottom:0;left:9px;width:1px}
#how.dimensional-how .bank-dots{margin-top:9px;letter-spacing:3px;font-size:12px;color:#e3e7ff}
#how.dimensional-how .bank-word{font-size:7px;letter-spacing:.13em;position:absolute;bottom:15px;left:20px}
#how.dimensional-how .bank-circles{display:flex;position:absolute;right:18px;bottom:16px}
#how.dimensional-how .bank-circles i{width:22px;height:22px;border:1px solid #d9dcff99;border-radius:50%;background:#bbc1ff33}
#how.dimensional-how .bank-circles i+i{margin-left:-8px}
#how.dimensional-how .paid-seal{position:absolute;right:-18px;bottom:-13px;border-radius:50%;width:44px;height:44px;display:grid;place-items:center;background:linear-gradient(135deg,#dad0fb,#8b77c8);border:2px solid #e0d6ff;box-shadow:4px 5px 0 #3b2b6a;font-size:25px;color:#31254c;transform:translateZ(16px)}
#how.dimensional-how .how-access{width:242px;height:168px;transform:rotateX(9deg) rotateY(-17deg) rotateZ(-17deg)}
#how.dimensional-how .how-access svg{display:block;width:100%;height:100%;filter:drop-shadow(0 12px 9px #0004)}
#how.dimensional-how .access-label{position:absolute;bottom:0;left:45px;font-size:8px;letter-spacing:.15em;color:#b6a7d9;transform:rotate(17deg)}
#how.dimensional-how .access-label span{color:#e0d5ff;margin-right:5px}
#how.dimensional-how h3{font-size:25px;letter-spacing:-.035em;margin:0 0 15px;line-height:1.2}
#how.dimensional-how .step p{font-size:14px;line-height:1.8;margin:0 0 30px;color:var(--muted,#a0a0b4)}
#how.dimensional-how .step-action{margin-top:auto;border-top:1px solid #2a2b3a;padding-top:20px;display:flex;justify-content:space-between;color:#c8b8f8;font-size:12px;text-decoration:none}
#how.dimensional-how .flat-alternative{margin-top:30px;display:flex;gap:16px;justify-content:center;font-size:12px;color:#8c8b9f}
#how.dimensional-how .flat-alternative a{color:#b7a7e0;text-decoration:none}
@media(hover:hover){#how.dimensional-how .step:hover .how-plan{transform:rotateX(12deg) rotateY(-15deg) rotateZ(-6deg)}#how.dimensional-how .step:hover .how-bank{transform:rotateX(12deg) rotateY(-14deg) rotateZ(-6deg)}#how.dimensional-how .step:hover .how-access{transform:rotateX(7deg) rotateY(-12deg) rotateZ(-12deg)}}
@media(max-width:950px){#how.dimensional-how .steps{gap:14px}#how.dimensional-how .step{padding-left:20px;padding-right:20px}#how.dimensional-how h3{font-size:22px}#how.dimensional-how .head{grid-template-columns:1fr 300px}}
@media(max-width:760px){#how.dimensional-how{padding:72px 0}#how.dimensional-how .head{display:block}#how.dimensional-how .head p{margin-top:20px;max-width:390px}#how.dimensional-how .steps{grid-template-columns:1fr;gap:20px}#how.dimensional-how .step{min-height:450px;padding:0 26px 26px}#how.dimensional-how .how-stage{height:225px}#how.dimensional-how h3{font-size:26px}#how.dimensional-how .flat-alternative{flex-direction:column;gap:9px;text-align:center}}
@media(prefers-reduced-motion:reduce){#how.dimensional-how .how-object{transition:none}}
html[data-theme="light"] #how.dimensional-how .step{background:linear-gradient(145deg,#f4f1fc,#eae9f3);border-color:#d1cce0;box-shadow:inset 0 1px 0 #fff,0 18px 35px #26203c12}
html[data-theme="light"] #how.dimensional-how .step-action{border-color:#ccc5db;color:#60489a}