/* Technology page kit, shared skin (TECH-KIT): a phone running the app, drawn in CSS, for the mobile app technology
   pages (Flutter first, then React Native and Kotlin). It replaces the browser preview in How We Work (.hwj) and keeps
   the kit's step mechanics untouched (tech-page.css / tech-page.js): the same tabs, .hwj__scene panels with .is-active,
   the .a + --d reveal and [data-tp-reveal] on the stage.

   Markup (inside .hwj__stage):
     .hwj__browser.aph                the stage; the class .hwj__browser is kept for the kit's checks (steps.mjs)
       .hwj__screen.aph__fit          tech-page.js sets --s = its width / 640 on .hwj
         .aph__canvas                 a fixed 640 x 570 canvas, scaled by --s (phones: the middle 380 px only)
           .aph__phone                the frame
           .hwj__scene#hwj-sN         one per step, each holding:
             .aph__app                the app screen, laid over the phone's screen (.aph__app--dark: light status bar)
             .aph__note--l / --r      a floating card beside the phone (top set with --t), hidden on phones
           .aph__glass                the dynamic island, status bar (9:41) and home indicator over every screen
   App parts for the screens: .ap-top, .ap-ttl, .ap-card, .ap-row, .ap-ck, .ap-pill(--ok|--warn), .ap-pop, .ap-chip(s),
   .ap-seg, .ap-nav, .ap-btn, .ap-icon, .ap-av, .ap-bub, .ap-stars, .ap-toast; the six process screens are .ap0-.ap5
   (call, screen map, home design, test build, store listing, insights), so another page reuses them by copying the
   markup and changing the words. Skeleton bars are the kit's .sk. */

/* The stage: no browser chrome, a fixed-ratio canvas */
.hwj .aph{max-width:640px;margin:0 auto;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.hwj .aph__fit{aspect-ratio:640/570;overflow:hidden;background:none}
.aph__canvas{position:absolute;top:0;left:0;width:640px;height:570px;transform:scale(var(--s,1));transform-origin:0 0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:#0f1f2e}
/* soft mint circle behind the phone, as in the hero */
.aph__canvas::before{content:"";position:absolute;left:110px;top:90px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,#dff5e8,rgba(233,248,239,0))}
@media (max-width:639.98px){
  .hwj .aph__fit{aspect-ratio:380/570}
  .aph__canvas{transform:scale(calc(var(--s,1) * 640 / 380)) translateX(-130px)}
  .hwj .aph__note{visibility:hidden}   /* not display:none, which would restart the notes' reveal whenever it flips */
}

/* The phone: frame, screen area, glass */
.aph__phone{position:absolute;left:190px;top:8px;width:260px;height:528px;border-radius:46px;background:linear-gradient(145deg,#2a3a48,#0f1f2e 40%,#0b1620);
  box-shadow:inset 0 0 0 1.5px #3b4b59,inset 0 0 0 4px #0b1620,0 26px 30px -24px rgba(15,31,46,.55),0 12px 24px -16px rgba(0,60,36,.3)}
.aph__phone::before,.aph__phone::after{content:"";position:absolute;width:3px;border-radius:2px;background:#1c2b38}
.aph__phone::before{left:-3px;top:110px;height:46px;box-shadow:0 60px 0 #1c2b38}
.aph__phone::after{right:-3px;top:150px;height:70px}
.hwj .aph .hwj__scene{padding:0}
.aph__app,.aph__glass{position:absolute;left:198px;top:16px;width:244px;height:512px;border-radius:38px}
.aph__app{display:flex;flex-direction:column;gap:9px;padding:46px 14px 24px;overflow:hidden;background:#f5faf7;font-size:11px;line-height:1.35}
.aph__app--dark{background:radial-gradient(120% 60% at 50% 0%,#145c3e,transparent 70%),linear-gradient(180deg,#0f1f2e,#0a1822)}
.aph__glass{z-index:3;pointer-events:none}
.aph__island{position:absolute;top:10px;left:50%;width:78px;height:23px;margin-left:-39px;border-radius:999px;background:#05090c}
.aph__bar{position:absolute;top:0;left:0;right:0;height:44px;display:flex;align-items:center;gap:5px;padding:0 22px 0 30px;color:#0f1f2e;transition:color .35s}
.aph__bar b{margin-right:auto;font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.aph__sig{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.aph__sig i{width:2.5px;border-radius:1px;background:currentColor}
.aph__sig i:nth-child(1){height:3px}.aph__sig i:nth-child(2){height:5px}.aph__sig i:nth-child(3){height:7px}.aph__sig i:nth-child(4){height:9px}
.aph__bat{position:relative;width:20px;height:10px;padding:1.5px;border:1px solid currentColor;border-radius:3px;opacity:.9}
.aph__bat::after{content:"";position:absolute;right:-3px;top:2.5px;width:1.5px;height:3px;border-radius:0 1px 1px 0;background:currentColor}
.aph__bat i{display:block;width:75%;height:100%;border-radius:1px;background:currentColor}
.aph__home{position:absolute;bottom:7px;left:50%;width:88px;height:4px;margin-left:-44px;border-radius:999px;background:#0f1f2e;opacity:.8;transition:background-color .35s}
.aph:has(.hwj__scene.is-active .aph__app--dark) .aph__bar{color:#fff}
.aph:has(.hwj__scene.is-active .aph__app--dark) .aph__home{background:#fff}

/* Floating notes beside the phone */
.aph__note{position:absolute;top:var(--t,90px);z-index:2;width:184px;padding:11px 12px;border:1px solid #e1ece5;border-radius:14px;background:#fff;
  box-shadow:0 22px 40px -22px rgba(15,31,46,.4),0 4px 10px -6px rgba(0,60,36,.18);font-size:11px;line-height:1.35}
.aph__note--l{left:14px}
.aph__note--r{right:14px}
.ap-nt{display:block;font-size:12px;font-weight:700}
.ap-ns{display:block;margin-top:2px;font-size:10.5px;color:rgba(15,31,46,.6)}

/* App parts */
.aph .sk{height:6px;background:#e3ece7}
.ap-top{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}
.ap-top small,.ap-ttl small{display:block;font-size:10px;color:rgba(15,31,46,.55)}
.ap-top b{display:block;font-size:18px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.ap-ttl{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:2px}
.ap-ttl b{font-size:12px;font-weight:700}
.ap-card{padding:10px 11px;border:1px solid #e3ece7;border-radius:14px;background:#fff;box-shadow:0 8px 18px -12px rgba(15,31,46,.3);color:#0f1f2e}
.ap-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-top:1px solid #eef3f0}
.ap-ttl+.ap-row{border-top:0}
.ap-row>div{flex:1;min-width:0}
.ap-row b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-row .sk{margin-top:4px}
.ap-lbl{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#00744A}
.ap-pill{display:inline-flex;align-items:center;flex:none;height:18px;padding:0 8px;border-radius:999px;background:#eef3f0;font-size:9.5px;font-weight:600;color:#3d4d47;white-space:nowrap}
.ap-pill--ok{background:#e9f8ef;color:#00744A}
.ap-pill--warn{background:#fff3d1;color:#8a6400}
.ap-chips{display:flex;flex-wrap:wrap;gap:5px}
.ap-chip{display:inline-flex;align-items:center;gap:4px;height:22px;padding:0 9px;border:1px solid #dbe8e0;border-radius:999px;background:#fff;font-size:10px;font-weight:600;color:#0f1f2e;white-space:nowrap}
.ap-chip::before{content:"";width:5px;height:5px;border-radius:50%;background:#00a463}
.ap-chip--on{border-color:#bfe7cf;background:#e9f8ef;color:#00744A}
.ap-chip--on::before{content:none}
.hwj .ap-chip .i{width:10px;height:10px}
.ap-btn{display:inline-flex;align-items:center;justify-content:center;height:22px;min-width:52px;padding:0 12px;border-radius:999px;background:#00a463;color:#fff;font-size:10.5px;font-weight:700}
.ap-btn--wide{height:34px;margin-top:auto;border-radius:12px;font-size:12px}
.ap-icon{display:flex;align-items:center;justify-content:center;flex:none;width:34px;height:34px;border-radius:9px;background:linear-gradient(140deg,#00b26b,#00744A);color:#fff;font-size:11px;font-style:normal;font-weight:800;box-shadow:inset 0 -2px 0 rgba(0,0,0,.12)}
.ap-icon--lg{width:62px;height:62px;border-radius:15px;font-size:18px}
.ap-icon--sm{width:24px;height:24px;border-radius:6px;font-size:8px}
.ap-av{display:flex;align-items:center;justify-content:center;flex:none;width:46px;height:46px;border-radius:50%;background:#e9eef2;color:#0f1f2e;font-size:12px;font-weight:700}
.ap-av--us{background:#00a463;color:#fff}
.ap-av--sm{width:22px;height:22px;font-size:7.5px}
.ap-ib{display:flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;border-radius:50%;background:#fff;border:1px solid #e3ece7}
.aph svg{display:block;width:14px;height:14px}
.ap-stars{display:flex;gap:1px;color:#f5b301}
.ap-stars svg{width:11px;height:11px}
.ap-toast{display:flex;align-items:center;gap:9px}
.ap-toast b{display:block;font-size:12px}
.ap-toast small{display:block;font-size:10.5px;color:rgba(15,31,46,.6)}
.ap-tick{display:flex;align-items:center;justify-content:center;flex:none;width:30px;height:30px;border-radius:50%;background:#e9f8ef;color:#00744A}
.hwj .ap-tick .i{width:14px;height:14px}
/* a check that ticks itself after the card arrives */
.ap-ck{position:relative;flex:none;width:16px;height:16px}
.ap-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #c6d4cc;border-radius:50%}
.ap-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#00a463;color:#fff;transform:scale(0)}
.hwj .ap-ck .i{width:9px;height:9px}
.hwj .is-active .ap-ck i{animation:aphPop .3s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 320ms + 700ms) forwards}
.ap-pop{transform:scale(0);opacity:0}
.hwj .is-active .ap-pop{animation:aphPopIn .3s cubic-bezier(.2,.7,.2,1) calc(var(--d,0) * 260ms + 800ms) forwards}
@keyframes aphPop{to{transform:scale(1)}}
@keyframes aphPopIn{to{transform:scale(1);opacity:1}}
/* segmented control and bottom tab bar */
.ap-seg{display:grid;grid-template-columns:1fr 1fr;gap:3px;padding:3px;border-radius:10px;background:#e7efea;font-size:10px;font-weight:600;text-align:center}
.ap-seg span{padding:5px 2px;border-radius:8px;color:rgba(15,31,46,.6);white-space:nowrap}
.hwj .is-active .ap-seg__pick{animation:aphPick .35s ease 1.2s forwards}
@keyframes aphPick{to{background:#fff;color:#00744A;box-shadow:0 2px 6px -2px rgba(15,31,46,.25)}}
.ap-nav{display:flex;justify-content:space-around;margin:auto -14px -24px;padding:9px 6px 22px;border-top:1px solid #e3ece7;background:#fff}
.ap-nav>span{display:flex;align-items:center;justify-content:center;width:34px;height:22px;border-radius:999px;color:#93a39b}
.ap-nav>span.is-on{background:#e9f8ef;color:#00744A}
.hwj .ap-nav .i{width:14px;height:14px}
/* chat bubbles */
.ap-bub{display:flex;align-items:flex-end;gap:6px}
.ap-bub p{margin:0;padding:7px 10px;border-radius:14px;font-size:10.5px;line-height:1.35}
.ap-bub--you p{border-bottom-left-radius:4px;background:#fff;border:1px solid #e3ece7}
.ap-bub--us{justify-content:flex-end}
.ap-bub--us p{display:flex;align-items:center;gap:5px;border-bottom-right-radius:4px;background:#00a463;color:#fff}
.hwj .ap-bub .i{width:10px;height:10px}

/* 1. Discovery call */
.ap0{gap:10px;color:#fff}
.ap0__hd{text-align:center}
.ap0__hd b{display:block;font-size:14px;font-weight:700}
.ap0__hd small{font-size:10px;color:rgba(255,255,255,.65)}
.ap0__tiles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap0__tile{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 9px;border-radius:14px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1)}
.ap0__tile small{font-size:10px;color:rgba(255,255,255,.75)}
.ap0__tile--us .ap-av{animation:aphTalk 1.6s infinite}
@keyframes aphTalk{0%{box-shadow:0 0 0 0 rgba(0,178,107,.6)}100%{box-shadow:0 0 0 9px rgba(0,178,107,0)}}
.ap0 .ap-card{border-color:transparent}
.ap0__ctl{display:flex;justify-content:center;gap:14px;margin-top:auto}
.ap0__ctl span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.14);color:#fff}
.ap0__ctl .ap0__end{background:#e5484d}

/* 2. Plan and scope */
.ap1__list{padding:4px 11px}
.ap1__list .ap-row:first-child{border-top:0}
.ap1__list .ap-row b{flex:1}
.ap1__code{display:flex;align-items:center;gap:9px}
.ap1__code b{display:block;font-size:11.5px}
.ap1__code small{font-size:10px;color:rgba(15,31,46,.6)}
.ap1__thumb{flex:none;width:18px;height:26px;border:1.5px solid #c6d4cc;border-radius:4px;background:linear-gradient(#e3ece7,#e3ece7) 3px 5px/8px 2px no-repeat,linear-gradient(#e3ece7,#e3ece7) 3px 10px/6px 2px no-repeat}
.ap1__flow{display:flex;align-items:center;gap:4px;margin-top:8px}
.ap1__flow span{padding:4px 6px;border:1px solid #dbe8e0;border-radius:7px;background:#f5faf7;font-size:9.5px;font-weight:600;white-space:nowrap}
.ap1__flow em{flex:1;min-width:6px;height:1.5px;background:#00a463}
.ap1__bar{display:grid;grid-template-columns:64px 1fr;align-items:center;gap:8px;margin-top:7px;font-size:10.5px}
.ap1__bar>i{display:block;height:6px;border-radius:999px;background:#e3ece7;overflow:hidden}
.ap1__bar>i>i{display:block;width:0;height:100%;border-radius:999px;background:#00a463}
.hwj .is-active .ap1__bar>i>i{animation:aphFill .6s ease calc(var(--d,0) * 220ms + 1s) forwards}
@keyframes aphFill{to{width:100%}}

/* 3. Design: the app's home screen */
.ap2{gap:10px}
.ap2__bar{display:flex;align-items:center;gap:8px}
.ap2__bar>div{flex:1}
.ap2__bar .sk+.sk{margin-top:5px}
.ap2__logo{flex:none;width:28px;height:28px;border-radius:50%;background:linear-gradient(140deg,#00b26b,#00744A)}
.ap2__search{display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;border:1px solid #e3ece7;border-radius:10px;background:#fff;color:#93a39b}
.ap2__search .sk{width:60%}
.ap2__hero{display:flex;align-items:center;gap:8px;height:82px;padding:12px;border-radius:14px;background:linear-gradient(135deg,#00a463,#00744A)}
.ap2__hero>div{flex:1}
.ap2__hero .sk{background:rgba(255,255,255,.55)}
.ap2__hero .sk:first-child{width:90%}.ap2__hero .sk+.sk{width:60%;margin-top:6px}
.ap2__btn{display:block;width:54px;height:16px;margin-top:9px;border-radius:999px;background:#fff}
.ap2__img{flex:none;width:58px;height:58px;border-radius:12px;background:rgba(255,255,255,.18);position:relative;overflow:hidden}
.ap2__img::after,.ap2__pi::after{content:"";position:absolute;inset:0;opacity:0;background:linear-gradient(135deg,#e9f8ef,#bfe7cf)}
.ap2__img::after{background:linear-gradient(135deg,#ffd27a,#f5a524)}
.hwj .is-active .ap2__img::after{animation:aphShow .8s ease 1.1s forwards}
.ap2__cats{display:flex;gap:6px}
.ap2__cats span{width:52px;height:20px;border-radius:999px;background:#fff;border:1px solid #e3ece7}
.ap2__cats span.is-on{background:#0f1f2e;border-color:#0f1f2e}
.ap2__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap2__p{padding:6px;border:1px solid #e3ece7;border-radius:12px;background:#fff}
.ap2__pi{position:relative;display:block;height:54px;margin-bottom:6px;border-radius:8px;background:#eef3f0;overflow:hidden}
.ap2__p .sk:nth-of-type(2){width:85%}.ap2__p .sk:nth-of-type(3){width:45%;margin-top:4px;background:#bfe7cf}
.hwj .is-active .ap2__pi::after{animation:aphShow .7s ease calc(1.3s + var(--d,0) * 100ms) forwards}
@keyframes aphShow{to{opacity:1}}
.ap2__style{display:flex;align-items:center;justify-content:space-between;margin-top:8px}
.ap2__sw{display:flex}
.ap2__sw i{width:24px;height:24px;margin-right:-5px;border:2px solid #fff;border-radius:50%;box-shadow:0 1px 3px rgba(15,31,46,.2)}
.ap2__sw i:nth-child(1){background:#00a463}.ap2__sw i:nth-child(2){background:#00744A}.ap2__sw i:nth-child(3){background:#0f1f2e}.ap2__sw i:nth-child(4){background:#e9f8ef}
.ap2__aa{display:flex;align-items:center;justify-content:center;width:38px;height:28px;border:1px solid #dbe8e0;border-radius:8px;font-size:15px;font-weight:800}
.ap2__modes{display:flex;gap:10px;margin-top:8px}
.ap2__mini{display:flex;flex-direction:column;gap:4px;width:44px;height:74px;padding:9px 6px;border:2px solid #0f1f2e;border-radius:10px;background:#f5faf7}
.ap2__mini i{display:block;height:5px;border-radius:999px;background:#d6e3dc}
.ap2__mini i:first-child{height:20px;border-radius:5px;background:#00a463}
.ap2__mini--dark{background:#0f1f2e}
.ap2__mini--dark i{background:#2c3e4d}

/* 4. Build and test builds */
.ap3__app{display:flex;align-items:center;gap:9px}
.ap3__app>div{flex:1;min-width:0}
.ap3__app b{display:block;font-size:12px}
.ap3__app small{font-size:10px;color:rgba(15,31,46,.6)}
.ap3__prog{height:5px;margin:10px 0 8px;border-radius:999px;background:#e3ece7;overflow:hidden}
.ap3__prog i{display:block;width:0;height:100%;background:#00a463}
.hwj .is-active .ap3__prog i{animation:aphFill .9s ease .4s forwards}
.ap3__plats{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ap3__plats>span{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:9px;background:#f5faf7;font-size:10.5px;font-weight:600}
.ap3 .ap-lbl{margin-top:2px}
.ap3 .ap-ttl{margin-bottom:6px}
.ap3__sk{margin-top:5px}
.ap3__code{padding:11px 12px 12px;border-color:#1c2b38;background:#0f1f2e;color:#fff}
.ap3__code b{display:block;margin-bottom:8px;font-size:10.5px;font-weight:600;color:rgba(255,255,255,.75)}
.ap3__ln{display:block;width:0;height:6px;margin:0 0 7px var(--x,0);border-radius:999px;background:var(--c,rgba(255,255,255,.28))}
.hwj .is-active .ap3__ln{animation:aphType .5s steps(10,end) calc(var(--d) * 140ms + 300ms) forwards}
@keyframes aphType{to{width:var(--w)}}

/* 5. Tests and store release: the store listing */
.ap4{gap:11px}
.ap4__head{display:flex;gap:11px;align-items:center}
.ap4__head b{display:block;font-size:15px;font-weight:800}
.ap4__head .sk{margin:5px 0 8px}
.ap4__meta{display:grid;grid-template-columns:repeat(3,1fr);padding:8px 0;border-top:1px solid #e3ece7;border-bottom:1px solid #e3ece7;text-align:center}
.ap4__meta>div{display:flex;flex-direction:column;align-items:center;gap:4px}
.ap4__meta>div+div{border-left:1px solid #e3ece7}
.ap4__meta .sk{width:26px;height:8px}
.ap4__meta small{font-size:9px;color:rgba(15,31,46,.55)}
.ap4 .ap-stars svg{width:8px;height:8px}
.ap4__shots{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ap4__shots i{height:128px;border-radius:10px;background:linear-gradient(#00a463,#00a463) 7px 9px/42% 7px no-repeat,linear-gradient(#e3ece7,#e3ece7) 7px 22px/70% 5px no-repeat,linear-gradient(#e3ece7,#e3ece7) 7px 34px/calc(100% - 14px) 52px no-repeat,linear-gradient(#e3ece7,#e3ece7) 7px 94px/calc(50% - 10px) 24px no-repeat,linear-gradient(#e3ece7,#e3ece7) right 7px top 94px/calc(50% - 10px) 24px no-repeat,#fff;border:1px solid #e3ece7}
.ap4__new .sk+.sk{margin-top:5px}
.ap4__play{display:flex;align-items:center;gap:9px;margin-top:auto}
.ap4__play>div{flex:1}
.ap4__play b{display:block;font-size:11.5px}
.ap4__play small{font-size:10px;color:rgba(15,31,46,.6)}
.ap4__chk{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-top:1px solid #eef3f0;font-size:11px}
.ap-nt+.ap4__chk{margin-top:6px}
.ap4__st{position:relative;width:16px;height:16px}
.ap4__spin{position:absolute;inset:1px;border:2px solid #e3ece7;border-top-color:#00a463;border-radius:50%;animation:aphSpin .8s linear infinite}
.ap4__ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#00a463;color:#fff;transform:scale(0)}
.hwj .ap4__ok .i{width:9px;height:9px}
.hwj .is-active .ap4__spin{animation:aphSpin .8s linear infinite,aphOut .2s ease calc(var(--d) * 360ms + 600ms) forwards}
.hwj .is-active .ap4__ok{animation:aphPop .3s cubic-bezier(.2,.7,.2,1) calc(var(--d) * 360ms + 620ms) forwards}
@keyframes aphSpin{to{transform:rotate(360deg)}}
@keyframes aphOut{to{opacity:0}}
.ap4__flow{display:flex;align-items:center;gap:6px;margin:8px 0 2px;font-size:10.5px;font-weight:600}
.ap4__flow span{padding:4px 8px;border-radius:7px;background:#f1f5f3}
.ap4__flow span.is-on{background:#e9f8ef;color:#00744A}
.ap4__flow em{font-style:normal;color:#00a463}

/* 6. Run and grow */
.ap5__push{display:flex;align-items:center;gap:8px;margin:-2px -4px 2px;padding:8px 10px;border-radius:16px;background:rgba(255,255,255,.92);box-shadow:0 10px 24px -12px rgba(15,31,46,.45);border:1px solid #e3ece7;opacity:0}
.ap5__push>div{flex:1;min-width:0}
.ap5__push b{display:block;font-size:11px}
.ap5__push small{font-size:9.5px;color:rgba(15,31,46,.6)}
.ap5__push>small{align-self:flex-start}
.hwj .is-active .ap5__push{animation:aphDrop .5s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes aphDrop{from{opacity:0;transform:translateY(-24px)}to{opacity:1;transform:none}}
.ap5 .ap-chips{gap:4px}
.ap5 .ap-chip{padding:0 7px;font-size:9.5px}
.ap5__kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ap5__kpis .ap-card{padding:9px 10px}
.ap5__kpis small{display:block;margin-bottom:6px;font-size:9.5px;color:rgba(15,31,46,.6);white-space:nowrap}
.ap-stars--fill svg{color:#e3ece7}
.hwj .is-active .ap-stars--fill svg{animation:aphStar .25s ease forwards}
.hwj .is-active .ap-stars--fill svg:nth-child(1){animation-delay:.9s}.hwj .is-active .ap-stars--fill svg:nth-child(2){animation-delay:1.05s}
.hwj .is-active .ap-stars--fill svg:nth-child(3){animation-delay:1.2s}.hwj .is-active .ap-stars--fill svg:nth-child(4){animation-delay:1.35s}
.hwj .is-active .ap-stars--fill svg:nth-child(5){animation-delay:1.5s}
@keyframes aphStar{to{color:#f5b301}}
.ap5__meter{display:block;height:8px;border-radius:999px;background:#e3ece7;overflow:hidden}
.ap5__meter i{display:block;width:0;height:100%;border-radius:999px;background:#00a463}
.hwj .is-active .ap5__meter i{animation:aphMeter 1s ease 1s forwards}
@keyframes aphMeter{to{width:96%}}
.ap5__chart{display:flex;flex-direction:column;flex:1;min-height:0}
.ap5__plot{position:relative;flex:1;min-height:60px}
.ap5__plot img{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 100% 0 0)}
.hwj .is-active .ap5__plot img{animation:aphDraw 1.6s ease-out .6s forwards}
@keyframes aphDraw{to{clip-path:inset(0 0 0 0)}}

/* Reduced motion: tech-page.css already runs every .hwj animation in .01ms, so screens show their end state; the
   two looping ones (the call pulse and the check spinner) are stopped here instead of looping at that speed */
@media (prefers-reduced-motion:reduce){
  .hwj .ap0__tile--us .ap-av{animation:none!important}
  .hwj .ap4__spin{animation:none!important;opacity:0}
  .hwj .ap4__ok{animation:none!important;transform:none}
  /* the kit's .hwj * rule does not reach pseudo-elements: the design screen's pictures show at once */
  .hwj .is-active .ap2__img::after,.hwj .is-active .ap2__pi::after{animation:none;opacity:1}
}