/* The Watt walkthrough from the home page, shared with article pages. Keep in step with index.html (#h2-style, #h4-style). */
.h2-walk{position:relative;background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 50px 80px -40px rgba(2,12,24,.8),0 4px 10px rgba(2,12,24,.25)}
.h2-wbar{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1.2rem;background:var(--mist);border-bottom:1px solid var(--line);font-size:.8rem;font-weight:600;color:#1F3A57}
.h2-conn{display:inline-flex;align-items:center;gap:.35rem;color:#007A62}
.h2-bolt{width:14px;height:14px;fill:none;stroke:#007A62;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.h2-tabs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem;padding:.9rem 3.4rem 0 1.25rem}
.h2-tab{display:flex;flex-direction:column;gap:.5rem;min-height:44px;padding:.35rem .1rem;border:0;background:transparent;font:600 .8rem/1.2 'Poppins',sans-serif;color:var(--slate);text-align:left;cursor:pointer}
.h2-tab[aria-selected=true]{color:var(--ink)}
.h2-tl .sm{display:none}
.h2-bar{display:block;height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.h2-bar span{display:block;height:100%;width:0;background:var(--teal)}
.h2-tab.done .h2-bar span{width:100%;background:#9FE9D8}
.h2-tab[aria-selected=true] .h2-bar span{animation:h2fill 7s linear forwards}
.h2-walk.paused .h2-tab[aria-selected=true] .h2-bar span{animation-play-state:paused}
.h2-pause{position:absolute;top:3.05rem;right:1rem;width:36px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}
.h2-pause svg{width:14px;height:14px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round}
.h2-stage{height:520px;padding:1.25rem 1.4rem;overflow:hidden}
.h2-scene{display:flex;flex-direction:column;gap:.85rem}
.h2-scene[hidden]{display:none}
.h2-scene>*{animation:h2rise .6s cubic-bezier(.2,.7,.2,1) both}
.h2-scene>*:nth-child(2){animation-delay:.3s}
.h2-scene>*:nth-child(3){animation-delay:.5s}
.h2-scene>*:nth-child(4){animation-delay:1.6s}
@keyframes h2rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes h2fill{from{width:0}to{width:100%}}
@media(max-width:820px){.h2-tabs{gap:.25rem;padding:.8rem 3rem .0 .75rem}.h2-tl .lg{display:none}.h2-tl .sm{display:inline}.h2-tab{font-size:.66rem;letter-spacing:-.01em;min-width:0}.h2-tabs{grid-template-columns:repeat(5,minmax(0,1fr))}.h2-wbar{font-size:.72rem;padding:.7rem .9rem}.h2-pause{top:2.9rem;right:.6rem}.h2-stage{height:560px;padding:1rem}}
@media (prefers-reduced-motion: reduce){.h2-scene>*,.h2-row,.h2-post{animation:none}.h2-bar span{animation:none!important}}
.h2-scene.h4{height:100%;gap:1rem}
.h4-cap{margin:.2rem 0 0;font-size:1.32rem;line-height:1.25;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.h4-vis{position:relative;flex:1;min-height:0}
.h4 [style*="--d"]{animation-delay:var(--d)}
@keyframes h4pop{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes h4in{from{opacity:0}to{opacity:1}}
.h4-brand{display:flex;flex-direction:column;gap:1rem}
.h4-site{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#F3F1EC;box-shadow:0 18px 30px -22px rgba(10,37,64,.5)}
.h4-sbar{display:flex;align-items:center;gap:6px;padding:.5rem .7rem;background:#fff;border-bottom:1px solid var(--line)}
.h4-sbar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.h4-sbar span{flex:1;margin-left:.4rem;padding:.2rem .7rem;border-radius:6px;background:var(--mist);font-size:.8rem;font-weight:500;color:#1F3A57}
.h4-spage{display:flex;flex-direction:column;justify-content:center;gap:.6rem;padding:1rem 1.4rem;height:calc(100% - 2.2rem)}
.h4-snav{display:flex;align-items:center;justify-content:space-between;margin-bottom:auto}
.h4-snav span{display:flex;gap:.6rem}
.h4-snav span i{display:block;width:34px;height:6px;border-radius:3px;background:#DCD6CB}
.h4-slogo{width:38%;max-width:180px;height:auto}
.h4-sh{display:block;height:15px;width:70%;border-radius:3px;background:#1D2A44}
.h4-sh.s2{width:48%}
.h4-sl{display:block;height:7px;width:62%;border-radius:4px;background:#DCD6CB}
.h4-sl.s2{width:40%}
.h4-sbtn{display:block;width:96px;height:24px;border-radius:6px;background:#C4552F;margin:.3rem 0 auto}
.h4-scan{position:absolute;left:0;right:0;top:0;height:46px;background:linear-gradient(180deg,rgba(0,212,170,0),rgba(0,212,170,.38) 80%,#00D4AA);opacity:0;animation:h4scan 1.3s ease-in-out .2s 1 both}
@keyframes h4scan{0%{opacity:0;transform:translateY(-46px)}10%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translateY(260px)}}
.h4-toks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.6rem}
.h4-toks li{position:relative;display:flex;flex-direction:column;align-items:center;gap:.45rem;padding:.8rem .4rem .7rem;border:1px solid var(--line);border-radius:12px;background:#fff;animation:h4pop .55s cubic-bezier(.2,.7,.2,1) both}
.h4-toks li:after{content:"";position:absolute;top:-7px;right:-7px;width:20px;height:20px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230A2540' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.h4-toks b{font-size:.82rem;font-weight:600;color:var(--ink);text-align:center;line-height:1.2}
.h4-tv{height:46px;display:flex;align-items:center;justify-content:center}
.h4-sw i{width:30px;height:30px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);margin-left:-8px}
.h4-sw i:first-child{margin-left:0}
.h4-aa{gap:.35rem;align-items:baseline;color:#1D2A44}
.h4-aa .se{font-family:Fraunces,Georgia,'Times New Roman',serif;font-size:2.1rem;line-height:1}
.h4-aa span{font-size:1.35rem;font-weight:500;color:var(--slate)}
.h4-mark{display:block;width:28px;height:28px;background:#C4552F;transform:rotate(45deg)}
.h4-wave{gap:4px}
.h4-wave i{width:5px;border-radius:3px;background:var(--teal);height:12px;animation:h4wave 1s ease-in-out infinite alternate}
.h4-wave i:nth-child(2){animation-delay:-.2s;height:26px}
.h4-wave i:nth-child(3){animation-delay:-.5s;height:38px}
.h4-wave i:nth-child(4){animation-delay:-.1s;height:30px}
.h4-wave i:nth-child(5){animation-delay:-.7s;height:40px}
.h4-wave i:nth-child(6){animation-delay:-.3s;height:22px}
.h4-wave i:nth-child(7){animation-delay:-.6s;height:14px}
@keyframes h4wave{from{transform:scaleY(.45)}to{transform:scaleY(1)}}
.h4-fan figure{position:absolute;margin:0;left:var(--x);top:var(--y);width:40%;transform:rotate(var(--r));transform-origin:50% 110%;animation:h4deal .7s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d)}
.h4-fan figure:nth-child(3){z-index:5}
.h4-fan figure:nth-child(4){z-index:4}
.h4-fan figure:nth-child(5){z-index:3}
.h4-fan figure img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 22px 34px -18px rgba(10,37,64,.6),0 0 0 1px rgba(10,37,64,.08)}
.h4-fan figure span{position:absolute;top:.55rem;left:.55rem;z-index:2;font-size:.72rem;font-weight:600;color:#fff;background:var(--ink);padding:.18rem .5rem;border-radius:6px}
@keyframes h4deal{from{opacity:0;transform:translateY(40%) rotate(0deg) scale(.92)}to{opacity:1;transform:rotate(var(--r))}}
.h4-pills{display:flex;justify-content:center;gap:.6rem;flex-wrap:wrap;animation:h4pop .55s both}
.h4-pills span{font-size:.85rem;font-weight:500;color:#1F3A57;background:var(--mist);padding:.4rem .8rem;border-radius:8px}
.h4-pills b{color:#007A62;font-weight:700}
.h4-mailw{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.6rem;align-items:center;justify-items:start}
.h4-phone{width:248px;height:100%;max-height:392px;border-radius:32px;background:var(--ink);padding:9px;box-shadow:0 30px 44px -26px rgba(10,37,64,.7);animation:h4pop .6s both}
.h4-scr{height:100%;border-radius:24px;background:#fff;overflow:hidden;display:flex;flex-direction:column;gap:.5rem;padding:0 1rem 1rem}
.h4-mhead{margin:0 -1rem .3rem;padding:1.6rem 1rem .7rem;background:#F3F1EC;border-bottom:3px solid #C4552F}
.h4-mhead img{width:58%;height:auto;display:block}
.h4-subj{font-family:Fraunces,Georgia,serif;font-size:1.12rem;line-height:1.2;color:#1D2A44;font-weight:600;margin-bottom:.2rem}
.h4-scr>*{flex-shrink:0}
.h4-kick{font-size:.62rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#C4552F;margin-bottom:-.2rem}
.h4-art{display:flex;gap:.55rem;align-items:center;margin-top:.3rem;padding:.45rem;border:1px solid #E5E9EC;border-radius:8px;animation:h4pop .5s both;animation-delay:var(--d)}
.h4-art img{width:44px;height:44px;border-radius:5px;object-fit:cover;flex:none}
.h4-art>span{display:grid;gap:.3rem;flex:1;min-width:0}
.h4-art b{font-size:.62rem;font-weight:700;color:#1D2A44;letter-spacing:.04em;text-transform:uppercase}
.h4-art i{display:block;height:6px;border-radius:3px;background:#DCE3E8}
.h4-art i.s{width:60%}
.h4-ln{display:block;height:7px;border-radius:4px;background:#DCE3E8;width:var(--w);transform-origin:left;animation:h4write .4s ease-out both;animation-delay:var(--d)}
.h4-ln.dis{height:5px;background:#EDF0F2}
@keyframes h4write{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.h4-mbtn{align-self:flex-start;margin:.35rem 0 .2rem;background:#C4552F;color:#fff;font-size:.72rem;font-weight:600;padding:.45rem .75rem;border-radius:6px;animation:h4pop .5s both;animation-delay:2.45s}
.h4-oks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.h4-oks li{display:flex;align-items:center;gap:.7rem;font-size:1.02rem;font-weight:600;color:var(--ink);animation:h4pop .5s both}
.h4-oks i{width:30px;height:30px;border-radius:50%;flex-shrink:0;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230A2540' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.h4-hfan img{position:absolute;height:auto;border-radius:8px;box-shadow:0 26px 40px -22px rgba(10,37,64,.65),0 0 0 1px rgba(10,37,64,.08)}
.h4-hfan .c{width:50%;left:25%;top:0;z-index:3;animation:h4pop .7s cubic-bezier(.2,.7,.2,1) .2s both}
.h4-hfan .l,.h4-hfan .r{width:41%;top:8%;animation:h4spread .8s cubic-bezier(.2,.8,.2,1) .8s both}
.h4-hfan .l{left:2%;--r:-7deg;--from:42%}
.h4-hfan .r{right:2%;--r:7deg;--from:-42%}
.h4-hfan .l,.h4-hfan .r{transform:rotate(var(--r))}
@keyframes h4spread{from{opacity:0;transform:translateX(var(--from)) rotate(0deg)}to{opacity:1;transform:rotate(var(--r))}}
.h4-appr{display:flex;flex-direction:column;gap:1rem}
.h4-acard{border:1px solid var(--line);border-radius:14px;padding:1rem;display:flex;flex-direction:column;gap:.9rem;box-shadow:0 18px 30px -24px rgba(10,37,64,.55);animation:h4pop .55s both}
.h4-thumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.5rem}
.h4-thumbs span{position:relative}
.h4-thumbs img{display:block;width:100%;height:auto;border-radius:7px;box-shadow:0 0 0 1px var(--line)}
.h4-thumbs span:after{content:"";position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%230A2540' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:0 0 0 2px #fff;animation:h4pop .35s both;animation-delay:var(--d)}
.h4-go{position:relative;display:grid;place-items:center;height:50px;border-radius:8px;background:var(--teal);color:var(--ink);font-size:1.02rem;font-weight:600;animation:h4press 1.9s both}
.h4-go>span{grid-area:1/1}
.h4-go .a{animation:h4out .2s 1.5s both}
.h4-go .b{opacity:0;animation:h4in .25s 1.55s both}
.h4-go .b:before{content:"\2713\00a0\00a0";color:var(--teal)}
@keyframes h4out{to{opacity:0}}
@keyframes h4press{0%,74%{transform:none;background:var(--teal);color:var(--ink)}79%{transform:scale(.97)}84%,100%{transform:none;background:var(--ink);color:#fff}}
.h4-cur{position:absolute;left:58%;top:52%;width:26px;height:26px;fill:#fff;stroke:var(--ink);stroke-width:1.6;stroke-linejoin:round;filter:drop-shadow(0 3px 4px rgba(10,37,64,.35));opacity:0;animation:h4cur 2.2s cubic-bezier(.4,0,.2,1) .2s both}
@keyframes h4cur{0%{opacity:0;transform:translate(150px,110px)}15%{opacity:1}60%{transform:translate(0,0)}66%{transform:translate(0,0) scale(.8)}72%{transform:translate(0,0) scale(1);opacity:1}100%{transform:translate(18px,14px);opacity:0}}
.h4-res{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.h4-res li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.5rem;padding:.85rem .5rem;border-radius:12px;background:var(--mist);animation:h4pop .5s both}
.h4-res b{font-size:.84rem;font-weight:600;line-height:1.25;color:var(--ink)}
.h4-ri{width:38px;height:38px;border-radius:10px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line)}
.h4-ri svg{width:20px;height:20px;fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.h4-ri.li{background:#0A66C2;box-shadow:none;color:#fff;font-weight:700;font-size:1.05rem;letter-spacing:-.02em}.h4-ris{display:flex;gap:.35rem}.h4-ri.fb{background:#1877F2;box-shadow:none;color:#fff;font-weight:800;font-size:1.3rem;font-family:Arial,Helvetica,sans-serif}
.h4-time{margin:0;text-align:center;font-size:1rem;color:var(--slate);animation:h4pop .5s both}
.h4-time b{color:var(--ink);font-size:1.15rem}
@media(max-width:700px){.h4-cap{font-size:1.12rem}.h4-toks{grid-template-columns:1fr 1fr;gap:.55rem}.h4-toks li{flex-direction:row;justify-content:flex-start;padding:.55rem .7rem;gap:.6rem}.h4-toks b{text-align:left;font-size:.78rem}.h4-tv{height:36px;min-width:44px}.h4-sw i{width:22px;height:22px;margin-left:-7px}.h4-aa .se{font-size:1.6rem}.h4-aa span{font-size:1rem}.h4-mark{width:22px;height:22px}.h4-wave{gap:3px}.h4-wave i{width:4px}.h4-spage{padding:.8rem;gap:.55rem}.h4-slogo{width:55%}.h4-snav span i{width:20px}.h4-fan figure{width:58%;--r:0deg!important;z-index:auto!important}.h4-fan figure:nth-child(1){left:0;top:0}.h4-fan figure:nth-child(2){left:10.5%;top:8%}.h4-fan figure:nth-child(3){left:21%;top:16%}.h4-fan figure:nth-child(4){left:31.5%;top:24%}.h4-fan figure:nth-child(5){left:42%;top:32%}.h4-fan figure span{font-size:.64rem}.h4-mailw{grid-template-columns:1fr;justify-items:center;gap:.9rem;align-content:start}.h4-phone{width:220px;height:330px}.h4-oks{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:.45rem .8rem}.h4-oks li{font-size:.8rem;gap:.4rem}.h4-oks i{width:20px;height:20px;background-size:11px}.h4-hfan .c{width:66%;left:17%}.h4-hfan .l,.h4-hfan .r{width:50%;top:9%}.h4-hfan .l{left:0}.h4-hfan .r{right:0}.h4-res b{font-size:.74rem}.h4-res li{padding:.7rem .35rem}.h4-go{font-size:.95rem;height:46px}}
@media (prefers-reduced-motion: reduce){.h4 *,.h4 *:before,.h4 *:after{animation:none!important}.h4-scan,.h4-cur{display:none}.h4-go{background:var(--ink);color:#fff}.h4-go .a{opacity:0}.h4-go .b{opacity:1}}
.a2-meet .a2-demo-head h2{font-size:clamp(1.45rem,2.1vw,1.85rem) !important;line-height:1.2 !important;max-width:34ch}