/* Why-section feature cards (Figma 4133:3427 SMS, 4133:3596 LMS), shared.
   Illustration drawn on a 598x300 grid scaled with --u; motion at the end. */
/* Why-SMS feature cards (Figma 4133:3427). Illustration drawn on a 598x300 grid, scaled with --u */
.wx-ill{position:relative;width:100%;aspect-ratio:598/300;container-type:inline-size;flex:none}
.wx-s{--u:calc(100cqw / 598);position:absolute;inset:0;font-family:'Inter',sans-serif;font-size:calc(var(--u)*10);line-height:1.4;color:#505866;letter-spacing:normal}
.wx-s b{font-weight:500}
.wx-i{display:block;flex:none}
.wx-i svg{display:block;width:100%;height:100%}
.wx-gv{position:absolute;top:0;width:calc(var(--u)*1);height:calc(var(--u)*272);background:#eef1f6}
.wx-gh{position:absolute;left:0;width:calc(var(--u)*598);height:calc(var(--u)*1);background:#eef1f6}
.wx-row{display:flex}
.wx-col{display:flex;flex-direction:column;align-items:flex-start}
.wx-col>.wx-row{align-self:stretch}
.wx-ui{position:absolute;left:calc(var(--u)*46);top:calc(var(--u)*32);width:calc(var(--u)*506);height:calc(var(--u)*246);background:#fcfdff;border-radius:calc(var(--u)*18);box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(51,73,106,.05);overflow:hidden;outline:calc(var(--u)*2) solid #fff;outline-offset:calc(var(--u)*-2)}
.wx-bar{display:flex;align-items:center;justify-content:space-between;height:calc(var(--u)*37);padding:0 calc(var(--u)*16);border-bottom:calc(var(--u)*1) solid var(--t)}
.wx-dots{display:flex;gap:calc(var(--u)*6)}
.wx-dots i{width:calc(var(--u)*8);height:calc(var(--u)*8);border-radius:50%;background:var(--t)}
.wx-view{font-size:calc(var(--u)*10);color:#8b929e;line-height:normal;white-space:nowrap}
.wx-h{font-weight:500;font-size:calc(var(--u)*14);color:#505866;white-space:nowrap}
.wx-s .wx-num{font-weight:600;line-height:normal;color:#505866;white-space:nowrap}
.wx-field{display:flex;align-items:center;gap:calc(var(--u)*8);width:100%;height:calc(var(--u)*34);padding:0 calc(var(--u)*10);border:calc(var(--u)*1) solid var(--t);border-radius:calc(var(--u)*8)}
.wx-btn{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*8);width:100%;height:calc(var(--u)*32);border-radius:calc(var(--u)*8);background:var(--t)}
.wx-emb{display:flex;align-items:center;justify-content:center;width:calc(var(--u)*43);height:calc(var(--u)*43);border-radius:calc(var(--u)*12);background:var(--t)}
.wx-pill{display:flex;align-items:center;gap:calc(var(--u)*5);padding:calc(var(--u)*4) calc(var(--u)*8);border-radius:calc(var(--u)*5);background:var(--t);white-space:nowrap}
.wx-pill b{font-size:calc(var(--u)*10);color:var(--a)}
.wx-svc{position:absolute;display:flex;align-items:center;gap:calc(var(--u)*9);width:calc(var(--u)*126);height:calc(var(--u)*51);padding:0 calc(var(--u)*12);border:calc(var(--u)*1) solid var(--t);border-radius:calc(var(--u)*8);background:#fcfdff;white-space:nowrap}
.wx-svc b{font-size:calc(var(--u)*10)}
.wx-hub{position:absolute;left:calc(var(--u)*198);top:calc(var(--u)*50);width:calc(var(--u)*110);height:calc(var(--u)*83);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*7);border-radius:calc(var(--u)*12);background:var(--t);outline:calc(var(--u)*2) solid #fff;outline-offset:calc(var(--u)*-2);white-space:nowrap}
.wx-hub b{font-size:calc(var(--u)*11);color:var(--a)}
.wx-side{height:100%;border-right:calc(var(--u)*1) solid var(--t);flex:none}
.wx-nav{display:flex;align-items:center;gap:calc(var(--u)*7);width:100%;height:calc(var(--u)*27);padding:0 calc(var(--u)*7);border-radius:calc(var(--u)*5);background:#fcfdff;font-size:calc(var(--u)*9);color:#8b929e;white-space:nowrap}
.wx-nav.on{background:var(--t);color:var(--a)}
.wx-qa{display:flex;flex-direction:column;gap:calc(var(--u)*7);flex:1 0 0;min-width:0;height:calc(var(--u)*61);padding:calc(var(--u)*9);border:calc(var(--u)*1) solid var(--t);border-radius:calc(var(--u)*8);font-size:calc(var(--u)*8);white-space:nowrap}
.wx-conv{display:flex;align-items:center;gap:calc(var(--u)*7);width:100%;padding:calc(var(--u)*6);border-radius:calc(var(--u)*6);background:#fcfdff}
.wx-conv.on{background:var(--t)}
.wx-av{display:flex;align-items:center;justify-content:center;flex:none;width:calc(var(--u)*22);height:calc(var(--u)*22);border-radius:50%;background:#eef1f6;font-size:calc(var(--u)*9);color:#505866}
.wx-conv.on .wx-av{background:#fff;color:var(--a)}
.wx-msg{width:100%;gap:calc(var(--u)*5);padding:calc(var(--u)*11);border-radius:calc(var(--u)*8);background:var(--t)}
.wx-comp{display:flex;align-items:center;justify-content:space-between;width:100%;height:calc(var(--u)*31);padding:0 calc(var(--u)*10);border:calc(var(--u)*1) solid var(--t);border-radius:calc(var(--u)*8)}
.wx-camp{display:flex;flex-direction:column;gap:calc(var(--u)*6);flex:1 0 0;min-width:0;padding:calc(var(--u)*12);border:calc(var(--u)*1) solid var(--t);border-radius:calc(var(--u)*8);background:#fcfdff}
.wx-camp.on{background:var(--t);border-color:#ffe5d7}
.wx-hl{position:absolute;left:calc(var(--u)*205);top:calc(var(--u)*239);width:calc(var(--u)*350);height:calc(var(--u)*53);display:flex;align-items:center;gap:calc(var(--u)*10);padding:calc(var(--u)*11) calc(var(--u)*14);border-radius:calc(var(--u)*12);background:#fcfdff;box-shadow:0 calc(var(--u)*4) calc(var(--u)*14) rgba(51,73,106,.05);outline:calc(var(--u)*2) solid #fff;outline-offset:calc(var(--u)*-2);overflow:hidden}
.wx-hl-ic{display:flex;align-items:center;justify-content:center;flex:none;width:calc(var(--u)*30);height:calc(var(--u)*30);border-radius:calc(var(--u)*8);background:var(--t)}
.wx-hl-tx{display:flex;flex-direction:column;gap:calc(var(--u)*3);flex:1 0 0;min-width:0;line-height:normal}
.wx-hl-tx b{font-size:calc(var(--u)*11);color:var(--a)}
.wx-hl-tx span{font-size:calc(var(--u)*10);color:#8b929e}
.wx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:40px}
.wx-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;outline:1px solid #fff;outline-offset:-1px;border-radius:18px;box-shadow:0 5px 12px rgba(36,50,77,.05);container-type:inline-size}
.wx-txt{flex:1 0 auto;min-height:24.415cqw;display:flex;flex-direction:column;gap:10px;padding:10px min(32px,5.35cqw) 28px;font-family:'Inter',sans-serif;color:#505866}
.wx-txt h3{font-family:'Inter',sans-serif;font-weight:600;font-size:24px;line-height:1.2;letter-spacing:normal;color:#505866}
.wx-txt p{font-size:16px;line-height:1.5;color:#505866}
@media (max-width:760px){ .wx-grid{grid-template-columns:minmax(0,1fr);gap:16px} .wx-txt h3{font-size:21px} .wx-txt p{font-size:15px} }
/* Why-SMS card motion */
@keyframes wx-float{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--u)*-4))}}
@keyframes wx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes wx-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.wx-card{transition:opacity .7s ease,transform .6s cubic-bezier(.2,.8,.2,1),box-shadow .35s ease}
.wx-card.wx-pre{opacity:0;transform:translateY(28px)}
.wx-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(36,50,77,.12)}
.wx-ui{transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.wx-card:hover .wx-ui{transform:scale(1.02)}
.wx-hl{animation:wx-float 5s ease-in-out infinite}
.wx-card:nth-child(2n) .wx-hl{animation-delay:-1.6s}
.wx-card:nth-child(3n) .wx-hl{animation-delay:-3.2s}
.wx-hl>.wx-i:last-child{transition:transform .3s ease}
.wx-card:hover .wx-hl>.wx-i:last-child{transform:translate(calc(var(--u)*2),calc(var(--u)*-2))}
.wx-s i[style*="border-radius:50%"]{animation:wx-pulse 2.4s ease-in-out infinite}
.wx-bar-i{transform-origin:50% 100%}
@keyframes wx-rise{from{opacity:0;transform:translateY(calc(var(--u)*18))}to{opacity:1;transform:none}}
@keyframes wx-slide{from{opacity:0;transform:translate(calc(var(--u)*24),calc(var(--u)*6))}to{opacity:1;transform:none}}
.wx-card.wx-in .wx-ui{animation:wx-rise .7s cubic-bezier(.2,.8,.2,1) .12s backwards}
.wx-card.wx-in .wx-hl{animation:wx-slide .6s cubic-bezier(.2,.8,.2,1) .4s backwards,wx-float 5s ease-in-out 1.1s infinite}
@keyframes wx-txtin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wx-card.wx-in .wx-txt{animation:wx-txtin .6s ease-out .2s backwards}
.wx-card.wx-in .wx-bar-i{animation:wx-grow .8s cubic-bezier(.2,.8,.2,1) calc(.25s + var(--i) * .07s) both}
@media (prefers-reduced-motion:reduce){ .wx-card,.wx-ui,.wx-hl,.wx-hl>.wx-i,.wx-s i,.wx-bar-i{animation:none!important;transition:none!important} .wx-card.wx-pre{opacity:1;transform:none} }
.wx-hl-tx.lh14{line-height:1.4}
@keyframes wx-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.wx-prog{transform-origin:0 50%}
.wx-card.wx-in .wx-prog{animation:wx-growx .9s cubic-bezier(.2,.8,.2,1) .35s both}
/* TestGUARD extras: activity trace draws in, face-detection box pulses */
@keyframes wx-draw{from{stroke-dashoffset:320}to{stroke-dashoffset:0}}
@keyframes wx-scan{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(1.06)}}
.wx-trace{stroke-dasharray:320}
.wx-card.wx-in .wx-trace{animation:wx-draw 1.4s ease-out .45s both}
.wx-scan{animation:wx-scan 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){ .wx-trace,.wx-scan{animation:none!important;stroke-dasharray:none} }
/* Home "Why arivoo" extras: integration wires draw in, sync icon turns once */
@keyframes wx-wire{from{stroke-dashoffset:560}to{stroke-dashoffset:0}}
@keyframes wx-spin{from{transform:rotate(-180deg)}to{transform:none}}
.wx-wire{stroke-dasharray:560}
.wx-card.wx-in .wx-wire{animation:wx-wire 1.5s ease-out .45s both}
.wx-spin{transform-origin:50% 50%}
.wx-card.wx-in .wx-spin{animation:wx-spin .9s cubic-bezier(.2,.8,.2,1) .6s both}
@media (prefers-reduced-motion:reduce){ .wx-wire,.wx-spin{animation:none!important;stroke-dasharray:none} }