.wp-site-blocks > .haillo-how-template,.haillo-how-template > .wp-block-shortcode,.haillo-how-shell { margin-block: 0 !important; }
.haillo-how-template { background: var(--wp--preset--gradient--atmosphere); }
.haillo-how-page { overflow: clip; background: #fff; color: var(--wp--preset--color--navy); }
.haillo-how-page *,.haillo-how-page *::before,.haillo-how-page *::after { box-sizing: border-box; }
.haillo-how-page :is(h1,h2,h3) { letter-spacing: 0; }
.haillo-how-gradient { color: transparent; background: var(--wp--preset--gradient--signal); background-clip: text; -webkit-background-clip: text; }
.haillo-primary-nav .current-menu-item > .wp-block-navigation-item__content { color: var(--wp--preset--color--blue); }

.haillo-how-hero { padding: clamp(155px,16vw,210px) 24px clamp(90px,10vw,135px); background: radial-gradient(circle at 82% 30%,rgba(124,58,237,.1),transparent 29%),radial-gradient(circle at 10% 18%,rgba(52,120,246,.1),transparent 27%),var(--wp--preset--gradient--atmosphere); }
.haillo-how-hero__inner { display: grid; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); align-items: center; gap: clamp(55px,8vw,110px); width: var(--wp--custom--container--page); margin: auto; }
.haillo-how-hero__copy { max-width: 680px; }.haillo-how-hero h1 { margin: 0; font-size: clamp(3.4rem,5.8vw,5.75rem); font-weight: 680; line-height: 1.02; }.haillo-how-hero h1 span { display: block; }.haillo-how-hero__copy > p { max-width: 630px; margin: 28px 0 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--lead); line-height: 1.65; }.haillo-how-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 35px; }
.haillo-how-hero-studio { position: relative; overflow: hidden; border: 1px solid rgba(52,120,246,.14); border-radius: 30px; background: rgba(255,255,255,.88); box-shadow: 0 35px 100px rgba(35,50,100,.17); }
.haillo-how-hero-studio::before { position: absolute; inset: 58px 0 42px; background-image: radial-gradient(rgba(52,120,246,.16) .7px,transparent .7px); background-size: 18px 18px; opacity: .45; content: ""; }
.haillo-how-hero-studio__bar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 62px; padding: 0 20px; border-bottom: 1px solid rgba(6,23,71,.08); background: rgba(255,255,255,.88); }.haillo-how-hero-studio__bar > span { display: flex; gap: 5px; }.haillo-how-hero-studio__bar > span i { width: 7px; height: 7px; border-radius: 50%; background: rgba(102,112,133,.25); }.haillo-how-hero-studio__bar strong { font-size: .75rem; }.haillo-how-hero-studio__bar small { justify-self: end; color: var(--wp--preset--color--slate); font-size: .56rem; }
.haillo-how-hero-studio__body { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(150px,.72fr) minmax(150px,.8fr) minmax(210px,1fr); align-items: center; gap: 18px; min-height: 355px; padding: 40px 28px; }
.haillo-how-idea-card { padding: 20px; border: 1px solid rgba(52,120,246,.13); border-radius: 17px; background: #fff; box-shadow: var(--wp--custom--shadow--small); }.haillo-how-idea-card small { color: var(--wp--preset--color--blue); font-size: .51rem; font-weight: 800; letter-spacing: .08em; }.haillo-how-idea-card p { margin: 11px 0 0; font-size: .72rem; font-weight: 650; line-height: 1.55; }.haillo-how-idea-card span { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--wp--preset--color--slate); font-size: .54rem; }.haillo-how-idea-card span i { color: var(--wp--preset--color--purple); font-style: normal; }
.haillo-how-hero-flow { display: grid; justify-items: center; gap: 7px; }.haillo-how-hero-flow span { display: flex; align-items: center; gap: 8px; width: 128px; padding: 9px; border: 1px solid rgba(6,23,71,.08); border-radius: 11px; background: #fff; box-shadow: 0 6px 16px rgba(6,23,71,.055); }.haillo-how-hero-flow span i { display: grid; place-items: center; width: 25px; height: 25px; border-radius: 8px; background: var(--wp--preset--color--soft-blue); color: var(--wp--preset--color--blue); font-size: .61rem; font-style: normal; }.haillo-how-hero-flow span b { font-size: .58rem; }.haillo-how-hero-flow em { width: 1px; height: 16px; background: linear-gradient(var(--wp--preset--color--blue),var(--wp--preset--color--purple)); }
.haillo-how-live-agent { overflow: hidden; border: 1px solid rgba(52,120,246,.18); border-radius: 20px; background: #fff; box-shadow: 0 22px 50px rgba(35,50,100,.15); }.haillo-how-live-agent header { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 18px; border-bottom: 1px solid rgba(6,23,71,.07); }.haillo-how-live-agent .haillo-mark { width: 36px; height: 33px; }.haillo-how-live-agent header > div { display: grid; }.haillo-how-live-agent header small { color: var(--wp--preset--color--blue); font-size: .47rem; font-weight: 800; letter-spacing: .07em; }.haillo-how-live-agent header strong { margin-top: 2px; font-size: .67rem; }.haillo-how-live-agent header > em { display: flex; align-items: center; gap: 5px; color: var(--wp--custom--interaction--success-text); font-size: .5rem; font-style: normal; font-weight: 800; }.haillo-how-live-agent header > em i { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--success); }.haillo-how-live-agent > div { display: flex; gap: 6px; padding: 18px; }.haillo-how-live-agent > div span { padding: 7px 9px; border-radius: 999px; background: var(--wp--preset--color--soft-blue); color: var(--wp--preset--color--blue); font-size: .52rem; font-weight: 700; }.haillo-how-live-agent > div .is-whatsapp { background: rgba(18,140,98,.1); color: #128c62; }.haillo-how-live-agent footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px; background: var(--wp--preset--color--mist); }.haillo-how-live-agent footer span { color: var(--wp--preset--color--slate); font-size: .5rem; }.haillo-how-live-agent footer strong { color: var(--wp--custom--interaction--success-text); font-size: .54rem; }
.haillo-how-hero-studio__steps { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 52px; padding: 10px 18px; border-top: 1px solid rgba(6,23,71,.07); background: rgba(249,250,253,.9); }.haillo-how-hero-studio__steps span,.haillo-how-hero-studio__steps strong { font-size: .52rem; }.haillo-how-hero-studio__steps span { color: var(--wp--preset--color--slate); }.haillo-how-hero-studio__steps strong { padding: 5px 8px; border-radius: 999px; background: rgba(18,164,111,.1); color: var(--wp--custom--interaction--success-text); }.haillo-how-hero-studio__steps i { width: 27px; height: 1px; background: linear-gradient(90deg,rgba(52,120,246,.3),rgba(124,58,237,.55)); }
.haillo-how-hero-studio.is-in-view .haillo-how-hero-flow em { animation: haillo-how-hero-line .85s ease both; }.haillo-how-hero-studio.is-in-view .haillo-how-live-agent { animation: haillo-how-hero-agent .7s .35s ease both; } @keyframes haillo-how-hero-line { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes haillo-how-hero-agent { from { opacity: 0; transform: translateX(12px); } to { opacity: 1; transform: none; } }

.haillo-how-step-nav-trigger { height: 1px; margin-bottom: -1px; }
.haillo-how-step-nav { position: sticky; z-index: 90; top: 78px; border-block: 1px solid rgba(6,23,71,.08); background: #fff; transition: background .25s ease,border-color .25s ease; }.haillo-how-step-nav > div { display: flex; align-items: center; justify-content: center; width: var(--wp--custom--container--page); min-height: 72px; margin: auto; transition: min-height .25s ease,width .25s ease,border-radius .25s ease,box-shadow .25s ease,background .25s ease; }.haillo-how-step-nav a { padding: 10px 17px; border-radius: 999px; color: var(--wp--preset--color--slate); font-size: .7rem; font-weight: 680; white-space: nowrap; }.haillo-how-step-nav a:hover,.haillo-how-step-nav a.is-active { background: rgba(52,120,246,.08); color: var(--wp--preset--color--blue); }.haillo-how-step-nav.is-floating { border-color: transparent; background: transparent; pointer-events: none; }.haillo-how-step-nav.is-floating > div { width: fit-content; min-height: 52px; margin-top: 10px; padding: 0 7px; border: 1px solid rgba(6,23,71,.09); border-radius: 999px; background: rgba(255,255,255,.94); box-shadow: 0 18px 45px rgba(35,50,100,.16); backdrop-filter: blur(16px); pointer-events: auto; }

.haillo-how-journey { position: relative; display: flex; isolation: isolate; flex-direction: column; }.haillo-how-journey::before { position: absolute; z-index: 3; left: max(24px,calc((100vw - 1200px)/2 + 20px)); top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg,rgba(52,120,246,.34),rgba(124,58,237,.65),rgba(18,164,111,.48)); box-shadow: 0 0 8px rgba(52,120,246,.12); content: ""; pointer-events: none; }
.haillo-how-step { position: relative; padding: clamp(105px,12vw,165px) 24px; background: #fff; }.haillo-how-step:nth-child(even) { background: #fff; }.haillo-how-step:is(#build,#integrate,#test) { background: var(--wp--preset--color--mist); }.haillo-how-step#connect { order: 1; }.haillo-how-step#build { order: 2; }.haillo-how-step#create { order: 3; }.haillo-how-step#integrate { order: 4; }.haillo-how-step#knowledge { order: 5; }.haillo-how-step#test { order: 6; }.haillo-how-step#go-live { order: 7; }.haillo-how-step__marker { position: absolute; z-index: 4; left: max(4px,calc((100vw - 1200px)/2)); top: clamp(105px,12vw,165px); display: grid; place-items: center; width: 42px; height: 58px; border-radius: 999px; background: #fff; box-shadow: 0 8px 24px rgba(6,23,71,.09); }.haillo-how-step__marker span { color: var(--wp--preset--color--blue); font-size: .59rem; font-weight: 800; }.haillo-how-step__marker i { width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--blue); }.haillo-how-step__content { position: relative; z-index: 1; width: min(1100px,calc(100vw - 120px)); margin: auto; }.haillo-how-intro { max-width: 800px; }.haillo-how-intro h2 { margin: 0; font-size: clamp(3rem,5vw,5rem); font-weight: 670; line-height: 1.06; }.haillo-how-intro h2 span { display: block; }.haillo-how-intro > p { max-width: 690px; margin: 25px 0 0; color: var(--wp--preset--color--slate); font-size: var(--wp--preset--font-size--lead); line-height: 1.65; }.haillo-how-intro blockquote { display: grid; gap: 12px; margin: 34px 0 0; padding: 22px 24px; border-left: 3px solid var(--wp--preset--color--blue); background: rgba(52,120,246,.055); }.haillo-how-intro blockquote strong,.haillo-how-intro blockquote span { display: block; }.haillo-how-intro blockquote strong { font-size: .9rem; }.haillo-how-intro blockquote span { color: var(--wp--preset--color--slate); font-size: .82rem; }.haillo-how-intro > small { display: block; margin-top: 20px; color: var(--wp--preset--color--slate); font-size: .68rem; line-height: 1.55; }
.haillo-how-two-column { display: grid; grid-template-columns: minmax(0,.85fr) minmax(480px,1.15fr); align-items: center; gap: clamp(60px,9vw,125px); }

.haillo-how-builder { margin-top: 62px; overflow: hidden; border: 1px solid rgba(6,23,71,.1); border-radius: 27px; background: #fff; box-shadow: var(--wp--custom--shadow--medium); }.haillo-how-builder__bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 68px; padding: 0 24px; border-bottom: 1px solid rgba(6,23,71,.08); }.haillo-how-builder__bar > div { display: flex; align-items: baseline; gap: 12px; }.haillo-how-builder__bar strong { font-size: .8rem; }.haillo-how-builder__bar span { color: var(--wp--preset--color--slate); font-size: .62rem; }.haillo-how-builder__bar small { display: flex; align-items: center; gap: 7px; color: var(--wp--custom--interaction--success-text); font-size: .6rem; }.haillo-how-builder__bar small i { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--success); box-shadow: 0 0 0 4px rgba(18,164,111,.09); }.haillo-how-builder__canvas { display: grid; grid-template-columns: 178px minmax(0,1fr); min-height: 590px; overflow: hidden; background: #fcfdff; }.haillo-how-builder__palette { position: relative; z-index: 2; padding: 24px 16px; border-right: 1px solid rgba(6,23,71,.08); background: linear-gradient(180deg,#f7f9fd,#f2f5fb); }.haillo-how-builder__palette > small { color: var(--wp--preset--color--slate); font-size: .48rem; font-weight: 800; letter-spacing: .1em; }.haillo-how-builder__palette > div { display: grid; gap: 7px; margin-top: 20px; }.haillo-how-builder__palette strong { color: var(--wp--preset--color--navy); font-size: .58rem; }.haillo-how-builder__palette span { padding: 8px 9px; border: 1px solid rgba(6,23,71,.07); border-radius: 8px; background: #fff; color: var(--wp--preset--color--slate); font-size: .52rem; box-shadow: 0 4px 11px rgba(6,23,71,.035); }.haillo-how-builder__workspace { position: relative; min-width: 0; min-height: 590px; overflow: hidden; background-image: radial-gradient(rgba(52,120,246,.16) .65px,transparent .65px); background-size: 18px 18px; }.haillo-how-builder__context { position: absolute; z-index: 2; top: 17px; left: 20px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid rgba(6,23,71,.07); border-radius: 9px; background: rgba(255,255,255,.88); box-shadow: 0 6px 16px rgba(6,23,71,.04); }.haillo-how-builder__context span { color: var(--wp--preset--color--slate); font-size: .48rem; }.haillo-how-builder__context strong { font-size: .55rem; }.haillo-how-builder__context small { padding: 4px 6px; border-radius: 999px; background: rgba(18,164,111,.08); color: var(--wp--custom--interaction--success-text); font-size: .45rem; font-weight: 800; }.haillo-how-builder__workspace svg { position: absolute; inset: 0; width: 100%; height: 100%; }.haillo-how-builder__workspace path { fill: none; stroke: rgba(52,120,246,.25); stroke-width: 1.6; vector-effect: non-scaling-stroke; }.haillo-how-builder__workspace path.is-execution { stroke: url(#none); stroke: var(--wp--preset--color--purple); stroke-dasharray: 7 11; opacity: .72; }.haillo-how-node { position: absolute; width: 150px; min-height: 70px; padding: 12px 13px; border: 1px solid rgba(52,120,246,.16); border-radius: 12px; background: #fff; box-shadow: 0 8px 21px rgba(6,23,71,.07); transition: border-color .25s ease,box-shadow .25s ease,transform .25s ease; }.haillo-how-node::before,.haillo-how-node::after { position: absolute; top: 50%; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: #9db8ec; box-shadow: 0 0 0 1px rgba(52,120,246,.25); content: ""; transform: translateY(-50%); }.haillo-how-node::before { left: -5px; }.haillo-how-node::after { right: -5px; }.haillo-how-node small { display: block; color: var(--wp--preset--color--blue); font-size: .47rem; font-weight: 800; letter-spacing: .08em; }.haillo-how-node strong { display: block; margin-top: 4px; font-size: .64rem; line-height: 1.3; }.haillo-how-node em { display: block; margin-top: 6px; color: var(--wp--preset--color--slate); font-size: .47rem; font-style: normal; line-height: 1.25; }.haillo-how-node.node-1 { left: 4%; top: 90px; }.haillo-how-node.node-2 { left: 29%; top: 90px; }.haillo-how-node.node-3 { left: 54%; top: 90px; }.haillo-how-node.node-4 { right: 3%; top: 90px; }.haillo-how-node.node-5 { left: 54%; top: 255px; }.haillo-how-node.node-6 { right: 3%; top: 255px; }.haillo-how-node.node-7 { right: 3%; top: 410px; }.haillo-how-node.node-8 { left: 29%; top: 410px; opacity: .68; }
.haillo-how-builder.is-in-view .haillo-how-node[data-run-node] { animation: haillo-how-node-run 7s ease both; animation-delay: calc(var(--run-index,0) * .65s); }.haillo-how-node[data-run-node="1"] { --run-index:0; }.haillo-how-node[data-run-node="2"] { --run-index:1; }.haillo-how-node[data-run-node="3"] { --run-index:2; }.haillo-how-node[data-run-node="4"] { --run-index:3; }.haillo-how-node[data-run-node="5"] { --run-index:4; }.haillo-how-node[data-run-node="6"] { --run-index:5; }.haillo-how-node[data-run-node="7"] { --run-index:6; }
@keyframes haillo-how-node-run { 0%,8% { border-color: rgba(52,120,246,.16); box-shadow: 0 8px 21px rgba(6,23,71,.07); transform: none; } 12%,24% { border-color: rgba(124,58,237,.7); box-shadow: 0 12px 28px rgba(86,73,236,.2); transform: translateY(-2px); } 30%,100% { border-color: rgba(18,164,111,.35); box-shadow: 0 8px 21px rgba(6,23,71,.07); transform: none; } }
.haillo-how-builder.is-in-view .haillo-how-builder__workspace path.is-execution { animation: haillo-how-path-run 7s linear both; }
@keyframes haillo-how-path-run { from { stroke-dashoffset: 120; opacity: .2; } to { stroke-dashoffset: 0; opacity: .78; } }
.haillo-how-builder__canvas > p:empty,.haillo-how-builder__workspace > p:empty { display: none; }
.haillo-how-inline-capabilities { display: grid; grid-template-columns: repeat(4,1fr); margin-top: 38px; border-block: 1px solid rgba(6,23,71,.1); }.haillo-how-inline-capabilities div { padding: 22px 20px; }.haillo-how-inline-capabilities div + div { border-left: 1px solid rgba(6,23,71,.1); }.haillo-how-inline-capabilities strong { display: block; font-size: .76rem; }.haillo-how-inline-capabilities span { display: block; margin-top: 7px; color: var(--wp--preset--color--slate); font-size: .66rem; line-height: 1.5; }

.haillo-how-agent { padding: 22px; border: 1px solid rgba(6,23,71,.09); border-radius: 27px; background: #eef2f9; box-shadow: var(--wp--custom--shadow--medium); }.haillo-how-agent header { display: flex; align-items: center; gap: 13px; padding: 18px; border-radius: 17px; background: #fff; }.haillo-how-agent header .haillo-mark { width: 43px; height: 39px; }.haillo-how-agent header > div { display: grid; }.haillo-how-agent header small { color: var(--wp--preset--color--blue); font-size: .52rem; font-weight: 800; letter-spacing: .08em; }.haillo-how-agent header strong { font-size: .9rem; }.haillo-how-agent header em { color: var(--wp--custom--interaction--success-text); font-size: .57rem; font-style: normal; }.haillo-how-agent dl { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin: 10px 0 0; }.haillo-how-agent dl div { min-height: 88px; padding: 15px; border-radius: 13px; background: rgba(255,255,255,.86); }.haillo-how-agent dt { color: var(--wp--preset--color--slate); font-size: .55rem; }.haillo-how-agent dd { margin: 7px 0 0; font-size: .68rem; font-weight: 680; line-height: 1.4; }.haillo-how-agent dd em { display: block; margin-top: 5px; color: var(--wp--custom--interaction--success-text); font-size: .54rem; font-style: normal; }

.haillo-how-channel-flow { display: grid; grid-template-columns: minmax(0,1fr) 40px 155px 40px 170px; align-items: center; gap: 12px; margin-top: 60px; padding: clamp(30px,5vw,55px); border: 1px solid rgba(6,23,71,.08); border-radius: 28px; background: #fff; box-shadow: var(--wp--custom--shadow--small); }.haillo-how-channel-flow > div:first-child { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; }.haillo-how-channel-flow > div:first-child span { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 11px; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--blue); font-size: .72rem; }.haillo-how-channel-flow > div:first-child strong { color: var(--wp--preset--color--navy); font-size: .65rem; }.haillo-how-channel-flow > div:first-child .is-whatsapp { color: #128c62; }.haillo-how-channel-flow > i { color: var(--wp--preset--color--purple); font-style: normal; text-align: center; }.haillo-how-channel-flow .is-haillo { display: grid; place-items: center; padding: 22px; border-radius: 18px; background: var(--wp--preset--color--navy); color: #fff; }.haillo-how-channel-flow .is-haillo .haillo-mark { width: 36px; height: 33px; }.haillo-how-channel-flow .is-haillo b { background: linear-gradient(180deg,#70a4ff,#b866ff); }.haillo-how-channel-flow .is-haillo strong { margin-top: 8px; font-size: .76rem; }.haillo-how-channel-flow .is-workflow { display: grid; place-items: center; padding: 25px 15px; border: 1px solid rgba(52,120,246,.15); border-radius: 15px; background: var(--wp--preset--color--soft-blue); }.haillo-how-channel-flow .is-workflow small { color: var(--wp--preset--color--blue); font-size: .52rem; font-weight: 800; }.haillo-how-channel-flow .is-workflow strong { margin-top: 4px; font-size: .78rem; }
.haillo-how-channel-icon { display: grid; flex: 0 0 auto; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(124,58,237,.09); color: var(--wp--preset--color--purple); }.haillo-how-channel-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }.haillo-how-channel-icon.is-voice { background: rgba(52,120,246,.1); color: var(--wp--preset--color--blue); }.haillo-how-channel-icon.is-voice svg { fill: currentColor; stroke: none; }.haillo-how-channel-icon.is-sms { background: rgba(124,58,237,.09); color: var(--wp--preset--color--purple); }.haillo-how-channel-icon.is-web { background: rgba(6,23,71,.07); color: var(--wp--preset--color--navy); }.haillo-how-channel-flow .is-whatsapp .haillo-how-channel-icon { background: rgba(18,140,98,.1); color: #128c62; }.haillo-how-channel-flow .is-whatsapp .haillo-how-channel-icon svg { fill: currentColor; stroke: none; }
.haillo-how-channel-flow > p { margin: 0; color: var(--wp--preset--color--purple); font-size: .8rem; text-align: center; }
.haillo-how-callout { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 18px 20px; border-left: 3px solid var(--wp--preset--color--blue); background: rgba(52,120,246,.055); }.haillo-how-callout strong { font-size: .82rem; }.haillo-how-callout span { color: var(--wp--preset--color--slate); font-size: .72rem; }.haillo-how-callout a { margin-left: auto; font-size: .72rem; font-weight: 700; white-space: nowrap; }

.haillo-how-system-map { display: grid; justify-items: center; padding: 28px; border: 1px solid rgba(6,23,71,.08); border-radius: 26px; background: #fff; box-shadow: var(--wp--custom--shadow--medium); }.haillo-how-system-map > i { margin: 10px 0; color: var(--wp--preset--color--purple); font-style: normal; }.haillo-how-system-map .is-customer { display: grid; justify-items: center; padding: 15px 25px; border-radius: 13px; background: var(--wp--preset--color--mist); }.haillo-how-system-map .is-customer small { color: var(--wp--preset--color--slate); font-size: .5rem; font-weight: 800; }.haillo-how-system-map .is-customer strong { margin-top: 4px; font-size: .69rem; }.haillo-how-system-map > .is-haillo { display: grid; justify-items: center; min-width: 130px; padding: 19px; border-radius: 17px; background: var(--wp--preset--color--navy); color: #fff; }.haillo-how-system-map .is-haillo .haillo-mark { width: 34px; height: 31px; }.haillo-how-system-map .is-haillo b { background: linear-gradient(180deg,#70a4ff,#b866ff); }.haillo-how-system-map .is-haillo strong { margin-top: 7px; font-size: .72rem; }.haillo-how-system-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; width: 100%; }.haillo-how-system-grid span { min-width: 0; padding: 13px 10px; border: 1px solid rgba(6,23,71,.07); border-radius: 11px; background: var(--wp--preset--color--mist); }.haillo-how-system-grid b { display: block; font-size: .63rem; }.haillo-how-system-grid small { display: block; margin-top: 4px; color: var(--wp--preset--color--slate); font-size: .51rem; line-height: 1.3; }

.haillo-how-knowledge-map { display: grid; grid-template-columns: minmax(130px,.8fr) 28px minmax(175px,1fr) 28px minmax(130px,.8fr); align-items: center; gap: 10px; padding: 26px; border: 1px solid rgba(6,23,71,.08); border-radius: 26px; background: #fff; box-shadow: var(--wp--custom--shadow--medium); }.haillo-how-knowledge-map > :is(i,p) { margin: 0; color: var(--wp--preset--color--purple); font-style: normal; text-align: center; }.haillo-how-knowledge-sources,.haillo-how-knowledge-results { display: grid; gap: 8px; }.haillo-how-knowledge-sources span,.haillo-how-knowledge-results span { padding: 11px 12px; border: 1px solid rgba(6,23,71,.07); border-radius: 10px; background: var(--wp--preset--color--mist); color: var(--wp--preset--color--slate); font-size: .57rem; line-height: 1.35; }.haillo-how-knowledge-results span::before { margin-right: 6px; color: var(--wp--custom--interaction--success-text); content: "✓"; }.haillo-how-knowledge-core { display: grid; justify-items: center; min-width: 0; padding: 24px 16px; border-radius: 18px; background: linear-gradient(145deg,#102a70,#3478f6 54%,#7c3aed); color: #fff; text-align: center; }.haillo-how-knowledge-core .haillo-mark { width: 38px; height: 35px; }.haillo-how-knowledge-core .haillo-mark i { background: linear-gradient(180deg,#fff,#cfb8ff); }.haillo-how-knowledge-core small { margin-top: 12px; color: rgba(255,255,255,.7); font-size: .48rem; font-weight: 800; letter-spacing: .08em; }.haillo-how-knowledge-core strong { margin-top: 5px; font-size: .72rem; }.haillo-how-knowledge-core em { margin-top: 10px; padding: 5px 8px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: .5rem; font-style: normal; }

.haillo-how-simulator { margin-top: 60px; overflow: hidden; border: 1px solid rgba(6,23,71,.1); border-radius: 27px; background: #fff; box-shadow: var(--wp--custom--shadow--medium); }.haillo-how-simulator__bar { display: flex; align-items: center; justify-content: space-between; min-height: 66px; padding: 0 24px; border-bottom: 1px solid rgba(6,23,71,.08); }.haillo-how-simulator__bar strong { font-size: .79rem; }.haillo-how-simulator__bar span { color: var(--wp--preset--color--slate); font-size: .61rem; }.haillo-how-simulator__body { display: grid; grid-template-columns: 1fr 1fr; min-height: 400px; }.haillo-how-sim-chat,.haillo-how-sim-flow { padding: clamp(25px,4vw,45px); }.haillo-how-sim-chat { border-right: 1px solid rgba(6,23,71,.08); background: #fcfdff; }.haillo-how-sim-chat > small,.haillo-how-sim-flow > small { color: var(--wp--preset--color--blue); font-size: .54rem; font-weight: 800; letter-spacing: .09em; }.haillo-how-sim-chat > div { max-width: 85%; margin-top: 35px; padding: 15px 17px; border-radius: 15px; background: var(--wp--preset--color--mist); opacity: 1; }.haillo-how-sim-chat .is-haillo { margin-left: auto; background: var(--wp--preset--color--soft-blue); }.haillo-how-sim-chat strong { font-size: .58rem; }.haillo-how-sim-chat p { margin: 6px 0 0; font-size: .78rem; line-height: 1.55; }.haillo-how-sim-flow ol { display: grid; gap: 0; margin: 25px 0 0; padding: 0; list-style: none; }.haillo-how-sim-flow li { position: relative; margin-left: 9px; padding: 13px 15px 13px 30px; border-left: 1px solid rgba(52,120,246,.22); color: var(--wp--preset--color--slate); font-size: .69rem; }.haillo-how-sim-flow li::before { position: absolute; left: -5px; top: 17px; width: 9px; height: 9px; border: 2px solid #fff; border-radius: 50%; background: rgba(52,120,246,.45); box-shadow: 0 0 0 1px rgba(52,120,246,.25); content: ""; }.haillo-how-sim-flow li.is-active { border-radius: 10px; background: var(--wp--preset--color--soft-blue); color: var(--wp--preset--color--navy); font-weight: 700; }.haillo-how-sim-flow li.is-active::before { background: var(--wp--preset--color--purple); box-shadow: 0 0 0 5px rgba(124,58,237,.1); }.haillo-how-sim-flow li span { float: right; color: var(--wp--preset--color--purple); font-size: .54rem; text-transform: uppercase; }.haillo-how-simulator footer { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(6,23,71,.08); }.haillo-how-simulator footer span { padding: 19px; color: var(--wp--preset--color--slate); font-size: .61rem; line-height: 1.45; }.haillo-how-simulator footer span + span { border-left: 1px solid rgba(6,23,71,.08); }.haillo-how-simulator footer b { display: block; margin-bottom: 4px; color: var(--wp--preset--color--navy); }
.haillo-how-simulator.is-in-view .haillo-how-sim-chat > div { animation: haillo-how-message-in .65s ease both; }.haillo-how-simulator.is-in-view .haillo-how-sim-chat .is-haillo { animation-delay: .65s; }.haillo-how-simulator.is-in-view .haillo-how-sim-flow li.is-active { animation: haillo-how-active-node .8s ease 1.3s both; }
@keyframes haillo-how-message-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes haillo-how-active-node { from { background: transparent; box-shadow: none; } to { background: var(--wp--preset--color--soft-blue); box-shadow: 0 8px 18px rgba(52,120,246,.09); } }

.haillo-how-publish-flow { margin-top: 55px; padding: clamp(30px,5vw,55px); border: 1px solid rgba(6,23,71,.08); border-radius: 27px; background: #fff; box-shadow: var(--wp--custom--shadow--small); }.haillo-how-publish-flow > div { display: flex; align-items: center; justify-content: center; gap: clamp(12px,3vw,32px); }.haillo-how-publish-flow > div span,.haillo-how-publish-flow > div strong { padding: 14px 18px; border: 1px solid rgba(6,23,71,.09); border-radius: 12px; background: var(--wp--preset--color--mist); font-size: .72rem; }.haillo-how-publish-flow > div span b { color: var(--wp--custom--interaction--success-text); }.haillo-how-publish-flow > div > i { color: var(--wp--preset--color--purple); font-style: normal; }.haillo-how-publish-flow > div strong { display: flex; align-items: center; gap: 8px; background: var(--wp--preset--color--navy); color: #fff; }.haillo-how-publish-flow > div strong b { width: 7px; height: 7px; border-radius: 50%; background: var(--wp--preset--color--success); }.haillo-how-publish-flow footer { display: flex; justify-content: center; gap: 10px; margin-top: 28px; }.haillo-how-publish-flow footer span { padding: 7px 10px; border-radius: 999px; background: rgba(18,164,111,.08); color: var(--wp--custom--interaction--success-text); font-size: .6rem; }.haillo-how-live-cta { display: grid; justify-items: center; margin-top: 38px; }.haillo-how-live-cta p { margin: 11px 0 0; color: var(--wp--preset--color--slate); font-size: .65rem; }

.haillo-how-after { padding: clamp(110px,13vw,175px) 24px; background: #07132f; color: #fff; }.haillo-how-after__inner { width: var(--wp--custom--container--page); margin: auto; }.haillo-how-after .haillo-how-intro h2 { color: #fff; }.haillo-how-after .haillo-how-intro > p { color: rgba(225,232,249,.7); }.haillo-how-after .haillo-eyebrow { border-color: rgba(255,255,255,.12); background: #12234f; color: #fff; }.haillo-how-lifecycle { display: grid; grid-template-columns: repeat(3,1fr); margin-top: 65px; border-block: 1px solid rgba(154,180,255,.17); }.haillo-how-lifecycle article { padding: 31px clamp(20px,3vw,40px); }.haillo-how-lifecycle article + article { border-left: 1px solid rgba(154,180,255,.17); }.haillo-how-lifecycle article > span { color: #7da9ff; font-size: .58rem; font-weight: 800; }.haillo-how-lifecycle h3 { margin: 10px 0 0; color: #fff; font-size: 1.45rem; }.haillo-how-lifecycle strong { display: block; margin-top: 9px; color: rgba(255,255,255,.82); font-size: .78rem; }.haillo-how-lifecycle ul { display: grid; gap: 9px; margin: 22px 0 0; padding: 0; list-style: none; }.haillo-how-lifecycle li { color: rgba(225,232,249,.58); font-size: .68rem; }.haillo-how-lifecycle li::before { margin-right: 7px; color: #7da9ff; content: "·"; }

.haillo-how-example { padding: clamp(82px,9vw,118px) 24px; background: linear-gradient(180deg,#fff,var(--wp--preset--color--mist)); }.haillo-how-example__inner { width: var(--wp--custom--container--page); margin: auto; }.haillo-how-example .haillo-how-intro { max-width: none; }.haillo-how-example .haillo-how-intro h2 { display: flex; flex-wrap: wrap; gap: 0 .18em; max-width: 1050px; font-size: clamp(2.8rem,4.5vw,4.5rem); }.haillo-how-example .haillo-how-intro h2 span { display: inline; }.haillo-example-flow { position: relative; display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); margin-top: 44px; overflow: hidden; border: 1px solid rgba(6,23,71,.09); border-radius: 24px; background: rgba(255,255,255,.82); box-shadow: 0 22px 55px rgba(6,23,71,.07); }.haillo-example-flow::before { position: absolute; z-index: 0; top: 47px; right: 42px; left: 42px; height: 1px; background: linear-gradient(90deg,rgba(52,120,246,.25),rgba(124,58,237,.38),rgba(18,164,111,.3)); content: ""; }.haillo-example-flow article,.haillo-example-flow article:nth-child(even),.haillo-example-flow article:nth-child(odd) { position: relative; display: flex; grid-column: auto; flex-direction: column; min-width: 0; min-height: 195px; padding: 24px 17px 21px; }.haillo-example-flow article + article { border-left: 1px solid rgba(6,23,71,.07); }.haillo-example-flow article > span { position: absolute; top: 18px; right: 15px; color: var(--wp--preset--color--blue); font-size: .54rem; font-weight: 800; }.haillo-example-flow article > i { position: relative; z-index: 1; display: grid; flex: 0 0 auto; place-items: center; width: 46px; height: 46px; margin-bottom: 19px; border: 1px solid rgba(52,120,246,.12); border-radius: 14px; background: #fff; box-shadow: var(--wp--custom--shadow--small); color: var(--wp--preset--color--blue); font-size: .76rem; font-style: normal; }.haillo-example-flow article > p:empty { display: none; }.haillo-example-flow article > div { min-width: 0; }.haillo-example-flow h3 { margin: 0; font-size: .82rem; line-height: 1.25; }.haillo-example-flow p,.haillo-example-flow blockquote { margin: 8px 0 0; color: var(--wp--preset--color--slate); font-size: .64rem; line-height: 1.5; overflow-wrap: normal; }.haillo-example-flow blockquote { padding-left: 9px; border-left: 2px solid rgba(52,120,246,.3); }.haillo-example-flow blockquote p { margin: 0; }.haillo-example-flow p strong { color: var(--wp--custom--interaction--success-text); }

.haillo-how-final { display: flex; align-items: end; justify-content: space-between; gap: 60px; width: var(--wp--custom--container--page); margin: clamp(90px,11vw,145px) auto; padding: clamp(45px,7vw,82px); border-radius: 34px; background: linear-gradient(125deg,#102a70,#3478f6 50%,#7c3aed); color: #fff; }.haillo-how-final > div:first-child { max-width: 800px; }.haillo-how-final h2 { margin: 0; color: #fff; font-size: clamp(3rem,4.8vw,4.7rem); line-height: 1.05; }.haillo-how-final > div:first-child p { margin: 22px 0 0; color: rgba(255,255,255,.78); line-height: 1.65; }.haillo-how-final > div:last-child { display: grid; flex: 0 0 auto; justify-items: center; }.haillo-how-final .haillo-button { min-width: 170px; background: #fff; color: var(--wp--preset--color--navy); }.haillo-how-final > div:last-child p { margin: 12px 0 0; color: rgba(255,255,255,.68); font-size: .63rem; }

@media (max-width: 1024px) {
  .haillo-how-hero__inner,.haillo-how-two-column { grid-template-columns: 1fr; }.haillo-how-hero-studio { max-width: 760px; }.haillo-how-step__content { width: min(100% - 70px,1000px); margin-left: auto; margin-right: 0; }.haillo-how-inline-capabilities { grid-template-columns: repeat(2,1fr); }.haillo-how-inline-capabilities div:nth-child(3) { border-left: 0; border-top: 1px solid rgba(6,23,71,.1); }.haillo-how-inline-capabilities div:nth-child(4) { border-top: 1px solid rgba(6,23,71,.1); }.haillo-how-agent { max-width: 720px; }.haillo-how-channel-flow { grid-template-columns: minmax(0,1fr) 30px 140px 30px 150px; padding-inline: 25px; }.haillo-example-flow { grid-template-columns: repeat(4,minmax(0,1fr)); }.haillo-example-flow::before { display: none; }.haillo-example-flow article { min-height: 170px; }.haillo-example-flow article:nth-child(5) { border-left: 0; }.haillo-example-flow article:nth-child(n+5) { border-top: 1px solid rgba(6,23,71,.07); }.haillo-how-final { align-items: start; flex-direction: column; }
}

@media (max-width: 768px) {
  .haillo-how-hero { padding: 135px 18px 88px; }.haillo-how-hero__inner { width: min(100%,680px); }.haillo-how-hero h1 { font-size: clamp(2.8rem,11vw,4.2rem); }.haillo-how-actions { flex-direction: column; }.haillo-how-actions .haillo-button { width: 100%; }.haillo-how-hero-studio__body { grid-template-columns: 1fr; }.haillo-how-idea-card,.haillo-how-live-agent { width: min(330px,100%); margin: auto; }.haillo-how-hero-flow { display: flex; align-items: center; justify-content: center; }.haillo-how-hero-flow em { flex: 0 0 18px; width: 18px; height: 1px; }.haillo-how-hero-flow span { width: auto; min-width: 0; flex-direction: column; }.haillo-how-hero-flow span b { font-size: .52rem; }
  .haillo-how-step-nav { top: 70px; overflow: hidden; }.haillo-how-step-nav > div { justify-content: flex-start; width: 100%; min-width: 0; padding-inline: 10px; overflow-x: auto; scrollbar-width: none; }.haillo-how-step-nav.is-floating > div { width: calc(100% - 24px); min-height: 50px; margin-inline: 12px; border-radius: 18px; }.haillo-how-step-nav a { padding-inline: 13px; }
  .haillo-how-journey::before { left: 23px; }.haillo-how-step { padding: 95px 16px; }.haillo-how-step__marker { left: 3px; top: 95px; }.haillo-how-step__content { width: calc(100% - 50px); margin-left: 50px; }.haillo-how-intro h2 { font-size: clamp(2.55rem,10.5vw,3.75rem); }
  .haillo-how-builder__canvas { min-height: 670px; }.haillo-how-builder__canvas svg { display: none; }.haillo-how-node { width: 145px; }.haillo-how-node.node-1 { left: 5%; top: 5%; }.haillo-how-node.node-2 { left: 5%; top: 19%; }.haillo-how-node.node-3 { right: 5%; left: auto; top: 19%; }.haillo-how-node.node-4 { left: 5%; top: 36%; }.haillo-how-node.node-5 { right: 5%; left: auto; top: 36%; }.haillo-how-node.node-6 { left: 5%; top: 53%; }.haillo-how-node.node-7 { right: 5%; top: 53%; }.haillo-how-node.node-8 { right: 5%; top: 71%; }.haillo-how-node.node-9 { left: 5%; top: 71%; }
  .haillo-how-builder__canvas { grid-template-columns: 1fr; }.haillo-how-builder__palette,.haillo-how-builder__context { display: none; }.haillo-how-builder__workspace { min-height: 670px; }.haillo-how-node.node-8 { right: auto; left: 5%; }
  .haillo-how-channel-flow { grid-template-columns: 1fr; gap: 16px; }.haillo-how-channel-flow > i,.haillo-how-channel-flow > p { transform: rotate(90deg); }.haillo-how-channel-flow .is-haillo,.haillo-how-channel-flow .is-workflow { width: min(180px,100%); margin: auto; }.haillo-how-callout { align-items: flex-start; flex-direction: column; }.haillo-how-callout a { margin-left: 0; }.haillo-how-knowledge-map { grid-template-columns: 1fr; max-width: 620px; }.haillo-how-knowledge-map > :is(i,p) { transform: rotate(90deg); }.haillo-how-knowledge-core { width: min(230px,100%); margin: auto; }.haillo-how-knowledge-sources,.haillo-how-knowledge-results { grid-template-columns: repeat(2,1fr); }
  .haillo-how-simulator__body { grid-template-columns: 1fr; }.haillo-how-sim-chat { border-right: 0; border-bottom: 1px solid rgba(6,23,71,.08); }.haillo-how-simulator footer { grid-template-columns: repeat(2,1fr); }.haillo-how-simulator footer span:nth-child(3) { border-left: 0; border-top: 1px solid rgba(6,23,71,.08); }.haillo-how-simulator footer span:nth-child(4) { border-top: 1px solid rgba(6,23,71,.08); }
  .haillo-how-publish-flow > div { align-items: stretch; flex-direction: column; text-align: center; }.haillo-how-publish-flow > div > i { transform: rotate(90deg); }.haillo-how-publish-flow footer { flex-wrap: wrap; }
  .haillo-how-after,.haillo-how-example { padding-inline: 16px; }.haillo-how-after__inner,.haillo-how-example__inner { width: 100%; }.haillo-how-lifecycle { grid-template-columns: 1fr; }.haillo-how-lifecycle article + article { border-top: 1px solid rgba(154,180,255,.17); border-left: 0; }
  .haillo-how-example .haillo-how-intro h2 { display: block; }.haillo-how-example .haillo-how-intro h2 span { display: block; }.haillo-example-flow { grid-template-columns: 1fr; margin-top: 34px; border-radius: 20px; }.haillo-example-flow::before { display: block; top: 32px; right: auto; bottom: 32px; left: 41px; width: 1px; height: auto; background: linear-gradient(180deg,rgba(52,120,246,.25),rgba(124,58,237,.38),rgba(18,164,111,.3)); }.haillo-example-flow article,.haillo-example-flow article:nth-child(even),.haillo-example-flow article:nth-child(odd) { display: grid; grid-column: 1; grid-template-columns: 50px minmax(0,1fr); gap: 14px; min-height: 0; padding: 18px 46px 18px 18px; }.haillo-example-flow article + article,.haillo-example-flow article:nth-child(5) { border-top: 1px solid rgba(6,23,71,.07); border-left: 0; }.haillo-example-flow article > span { top: 21px; right: 17px; }.haillo-example-flow article > i { width: 46px; height: 46px; margin: 0; }.haillo-example-flow article > div { align-self: center; padding: 0; }.haillo-example-flow h3 { font-size: .8rem; }.haillo-example-flow p,.haillo-example-flow blockquote { font-size: .65rem; }
  .haillo-how-final { width: calc(100% - 32px); padding: 40px 27px; }.haillo-how-final > div:last-child,.haillo-how-final .haillo-button { width: 100%; }
}

@media (max-width: 430px) {
  .haillo-how-hero-studio__bar { grid-template-columns: auto 1fr; gap: 12px; }.haillo-how-hero-studio__bar strong { justify-self: end; }.haillo-how-hero-studio__bar small { display: none; }.haillo-how-hero-studio__body { padding: 28px 17px; }.haillo-how-hero-flow { gap: 5px; }.haillo-how-hero-studio__steps { gap: 6px; }.haillo-how-hero-studio__steps i { width: 15px; }.haillo-how-step__content { width: calc(100% - 45px); margin-left: 45px; }.haillo-how-step__marker { width: 38px; }
  .haillo-how-builder { border-radius: 20px; }.haillo-how-builder__bar { align-items: flex-start; flex-direction: column; justify-content: center; gap: 3px; padding-block: 13px; }.haillo-how-builder__bar small { display: none; }.haillo-how-builder__canvas { min-height: 700px; }.haillo-how-node { width: 122px; padding: 10px; }.haillo-how-node strong { font-size: .58rem; }.haillo-how-inline-capabilities { grid-template-columns: 1fr; }.haillo-how-inline-capabilities div { border-left: 0 !important; border-top: 1px solid rgba(6,23,71,.1); }
  .haillo-how-agent { padding: 14px; }.haillo-how-agent dl { grid-template-columns: 1fr; }.haillo-how-agent dl div { min-height: 0; }.haillo-how-knowledge-sources,.haillo-how-knowledge-results { grid-template-columns: 1fr; }
  .haillo-how-channel-flow > div:first-child { grid-template-columns: 1fr 1fr; }.haillo-how-system-grid { grid-template-columns: repeat(2,1fr); }
  .haillo-how-simulator { border-radius: 20px; }.haillo-how-simulator__bar { align-items: flex-start; flex-direction: column; justify-content: center; gap: 4px; padding-block: 13px; }.haillo-how-sim-chat,.haillo-how-sim-flow { padding: 22px 17px; }.haillo-how-sim-chat > div { max-width: 94%; }.haillo-how-simulator footer { grid-template-columns: 1fr; }.haillo-how-simulator footer span { border-top: 1px solid rgba(6,23,71,.08); border-left: 0 !important; }
  .haillo-how-final h2 { font-size: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .haillo-how-page *,.haillo-how-page *::before,.haillo-how-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.haillo-how-channel-flow .is-haillo .haillo-mark i,
.haillo-how-system-map .is-haillo .haillo-mark i { background: linear-gradient(180deg,#70a4ff,#b866ff); }