/* What's included: icon tiles replace the 01/02 numbers; animate on hover and once when scrolled into view */
.ip2-num.ip2-ic{font-size:0;line-height:0;transition:background-color .3s ease,border-color .3s ease,transform .3s cubic-bezier(.2,.7,.2,1)}
.ip2-num.ip2-ic svg{width:24px;height:24px;display:block}
.ip2-num.ip2-ic svg *{transform-box:fill-box;transform-origin:center}
.ip2-row:hover .ip2-num.ip2-ic{transform:translate(-2px,-2px);box-shadow:4px 4px 0 0 #DAE4E6}
.ip2-row:hover .ip2-h3{color:#A8463A}
.ip2-h3{transition:color .25s ease}
/* text + call */
.ic-textcall .ping{opacity:0}
.ip2-row:hover .ic-textcall .ping,.ip2-row.is-on .ic-textcall .ping{animation:ipk-pop 1.2s ease-in-out infinite}
.ip2-row:hover .ic-textcall .bub,.ip2-row.is-on .ic-textcall .bub{animation:ipk-bob 1.4s ease-in-out infinite}
.ip2-row:hover .ic-textcall .hs,.ip2-row.is-on .ic-textcall .hs{animation:ipk-ring .9s ease-in-out infinite}
@keyframes ipk-pop{0%,100%{opacity:0;transform:scale(.4)}40%,70%{opacity:1;transform:scale(1)}}
@keyframes ipk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes ipk-ring{0%,100%{transform:rotate(0)}25%{transform:rotate(-10deg)}75%{transform:rotate(10deg)}}
/* automate */
.ic-automate .flow{stroke-dasharray:1;stroke-dashoffset:0}
.ip2-row:hover .ic-automate .bolt,.ip2-row.is-on .ic-automate .bolt{animation:ipk-flash 1.2s ease-in-out infinite}
.ip2-row:hover .ic-automate .flow,.ip2-row.is-on .ic-automate .flow{animation:ipk-draw 1.2s ease-in-out infinite}
.ip2-row:hover .ic-automate .flowhead,.ip2-row.is-on .ic-automate .flowhead{animation:ipk-nudge 1.2s ease-in-out infinite}
@keyframes ipk-flash{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes ipk-draw{0%{stroke-dashoffset:1}60%,100%{stroke-dashoffset:0}}
@keyframes ipk-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(1.5px)}}
/* agents */
.ip2-row:hover .ic-agents .d,.ip2-row.is-on .ic-agents .d{animation:ipk-type 1.2s ease-in-out infinite}
.ic-agents .d2{animation-delay:.2s!important}.ic-agents .d3{animation-delay:.4s!important}
.ip2-row:hover .ic-agents .antdot,.ip2-row.is-on .ic-agents .antdot{animation:ipk-pop 1.2s ease-in-out infinite}
@keyframes ipk-type{0%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-2px);opacity:1}}
/* track */
.ip2-row:hover .ic-track .in,.ip2-row.is-on .ic-track .in{animation:ipk-drop 1.4s ease-in-out infinite}
.ic-track .in2{animation-delay:.35s!important}
@keyframes ipk-drop{0%{transform:translateY(-3px);opacity:0}40%{opacity:1}70%,100%{transform:translateY(1px);opacity:1}}
/* sync */
.ip2-row:hover .ic-sync .arr,.ip2-row.is-on .ic-sync .arr{animation:ipk-shuttle 1.2s ease-in-out infinite}
.ip2-row:hover .ic-sync .ln,.ip2-row.is-on .ic-sync .ln{animation:ipk-flash 1.2s ease-in-out infinite}
@keyframes ipk-shuttle{0%,100%{transform:translateX(0)}50%{transform:translateX(1.5px)}}
/* import */
.ip2-row:hover .ic-import .cur,.ip2-row.is-on .ic-import .cur{animation:ipk-press 1.4s ease-in-out infinite}
.ip2-row:hover .ic-import .click,.ip2-row.is-on .ic-import .click{animation:ipk-clickring 1.4s ease-out infinite}
.ip2-row:hover .ic-import .row,.ip2-row.is-on .ic-import .row{animation:ipk-rowin 1.4s ease-in-out infinite}
.ic-import .r2{animation-delay:.12s!important}.ic-import .r3{animation-delay:.24s!important}
@keyframes ipk-press{0%,100%{transform:scale(1)}30%{transform:scale(.85)}}
@keyframes ipk-clickring{0%{opacity:0;transform:scale(.4)}30%{opacity:.9}70%,100%{opacity:0;transform:scale(1.6)}}
@keyframes ipk-rowin{0%{transform:translateX(-3px);opacity:.3}40%,100%{transform:translateX(0);opacity:1}}
@media (prefers-reduced-motion:reduce){.ip2-row *{animation:none!important;transition:none!important}}

/* Setup band: label + icon panels */
.ip2-setup-head{display:flex;flex-direction:column;gap:14px;margin-bottom:8px}
.ip2-setup-head .fsec-h2{margin:0}
.ip2-facts{margin-top:28px}
.ip2-fact{position:relative;transition:transform .25s cubic-bezier(.2,.7,.2,1),box-shadow .25s cubic-bezier(.2,.7,.2,1)}
.ip2-fact:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 0 #DAE4E6}
.ip2-fact-ic{width:40px;height:40px;border:1.5px solid #375A63;background:#E8EEEF;display:flex;align-items:center;justify-content:center;margin-bottom:8px}
.ip2-fact-ic svg{width:22px;height:22px;display:block}
.ip2-fact-ic svg *{transform-box:fill-box;transform-origin:center}
.fc-time .hand,.fc-time .hand2{transform-box:view-box;transform-origin:12px 12px}
.ip2-fact:hover .fc-time .hand,.ip2-fact.is-on .fc-time .hand{animation:fcs-spin 2.4s linear infinite}
.ip2-fact:hover .fc-time .hand2,.ip2-fact.is-on .fc-time .hand2{animation:fcs-spin 12s linear infinite}
@keyframes fcs-spin{to{transform:rotate(360deg)}}
.fc-direct .wire{stroke-dasharray:1;stroke-dashoffset:0}
.ip2-fact:hover .fc-direct .wire,.ip2-fact.is-on .fc-direct .wire{animation:fcs-draw 1.4s ease-in-out infinite}
.ip2-fact:hover .fc-direct .pulse,.ip2-fact.is-on .fc-direct .pulse{animation:fcs-travel 1.4s ease-in-out infinite}
@keyframes fcs-draw{0%{stroke-dashoffset:1}50%,100%{stroke-dashoffset:0}}
@keyframes fcs-travel{0%{transform:translateX(-4px);opacity:0}30%{opacity:1}100%{transform:translateX(4px);opacity:0}}
.fc-carrier .arc{opacity:.35}
.ip2-fact:hover .fc-carrier .arc,.ip2-fact.is-on .fc-carrier .arc{animation:fcs-wave 1.5s ease-in-out infinite}
.fc-carrier .a2{animation-delay:.25s!important}.fc-carrier .a3{animation-delay:.5s!important}
@keyframes fcs-wave{0%,100%{opacity:.3}40%{opacity:1}}
.ip2-fact:hover .fc-support .band,.ip2-fact:hover .fc-support .cup,.ip2-fact.is-on .fc-support .band,.ip2-fact.is-on .fc-support .cup{animation:fcs-bob 1.6s ease-in-out infinite}
.ip2-fact:hover .fc-support .micdot,.ip2-fact.is-on .fc-support .micdot{animation:fcs-blink 1s ease-in-out infinite}
@keyframes fcs-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes fcs-blink{0%,100%{opacity:1}50%{opacity:.2}}
@media (prefers-reduced-motion:reduce){.ip2-fact *{animation:none!important}}

.step-num{font-size:15px}
.ip2-sync{padding-top:56px;padding-bottom:56px}