/* Technology page kit (tech-page.css): what every redesigned technology page shares, so no page copies it again
   (decision UD-006 in provis-map-and-fix). Loaded without blocking the first paint; nothing here touches another page.
   - How We Work (.hwj): the step tabs and animated browser from the eCommerce page, as on the Shopify page
     (shopify-hwj.css lines 4-210 and its phone rules). The browser shows the eCommerce scenes (.s0-.s5) unless the
     page draws its own screen and skins it in its own CSS.
   - Contact panel (.tp-cpanel): the eCommerce "What Makes Us Different" card background.
   The scroll reveal's rules are inline in each page (so nothing flickers before this file loads); its script and the
   contact stepper are in tech-page.js. Shopify keeps shopify-hwj.css until a later row moves it here. */
/* ═══════════════════════════════════════════════════════════════
   How We Work (hwj): step tabs beside an animated browser preview.
   Icons are files in img/ecommerce/hwj/ drawn as masks (.i.i--name).
   ═══════════════════════════════════════════════════════════════ */
.hwj{--g:#00B26B;--gd:#00744A;--gl:#E8F5EE;--ln:#E3ECE7;--sk:#E9EFEC;--dur:5200ms;--ease:cubic-bezier(.2,.7,.2,1)}
.hwj__wrap{display:grid;gap:40px}
@media(min-width:1024px){.hwj__wrap{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:64px;align-items:start}.hwj__stage{position:sticky;top:calc(var(--ec-header-h,72px) + 32px)}}
.hwj__side .ec-lead{margin-top:16px;max-width:440px}
.hwj__steps{list-style:none;margin:32px 0 0;padding:0;border-bottom:1px solid rgba(0,0,0,.1)}
.hwj__step{position:relative;display:grid;grid-template-columns:44px 1fr;width:100%;padding:18px 0;border:0;border-top:1px solid rgba(0,0,0,.1);background:none;text-align:left;font:inherit;color:inherit;cursor:pointer}
.hwj__num{font-size:14px;line-height:28px;font-weight:600;color:rgba(0,0,0,.35);font-variant-numeric:tabular-nums;transition:color .3s}
.hwj__t{display:block;font-size:18px;line-height:28px;font-weight:600;color:rgba(0,0,0,.45);transition:color .3s}
.hwj__step:hover .hwj__t,.hwj__step.is-active .hwj__t{color:var(--ec-ink,#000)}
.hwj__step.is-active .hwj__num{color:var(--g)}
.hwj__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.hwj__step.is-active .hwj__more{grid-template-rows:1fr}
.hwj__more>span{overflow:hidden}
.hwj__p{display:block;padding-top:6px;font-size:15px;line-height:24px;color:var(--ec-body,rgba(0,0,0,.75))}
.hwj__prog{position:absolute;left:0;right:0;top:-1px;height:2px;overflow:hidden}
.hwj__prog i{display:block;width:0;height:100%;background:var(--g)}
.hwj__step.is-active .hwj__prog i{width:100%}
.hwj.is-playing .hwj__step.is-active .hwj__prog i{animation:hwjProg var(--dur) linear both}
.hwj__step:focus-visible{outline:2px solid var(--g);outline-offset:4px;border-radius:999px}
@keyframes hwjProg{from{width:0}to{width:100%}}
.hwj__stage{position:relative;padding:28px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 80% at 85% 0%,rgba(0,178,107,.35),transparent 60%),linear-gradient(150deg,#0E5A37 0%,#063321 55%,#031A10 100%)}
.hwj__stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:32px 32px;-webkit-mask-image:linear-gradient(#000,transparent 85%);mask-image:linear-gradient(#000,transparent 85%);pointer-events:none}
.hwj__browser{position:relative;border-radius:12px;background:#fff;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);overflow:hidden}
.hwj__bar{display:flex;align-items:center;gap:12px;height:44px;padding:0 14px;border-bottom:1px solid var(--ln);background:#F7FAF8}
.hwj__dots3{display:flex;gap:6px}.hwj__dots3 i{width:10px;height:10px;border-radius:50%;background:#D9E3DE}
.hwj__url{flex:1;min-width:0;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 auto;padding:4px 12px;border-radius:999px;background:#fff;border:1px solid var(--ln);font-size:12px;line-height:18px;color:rgba(0,0,0,.55);text-align:center}
@media (max-width:480px){.hwj__url{font-size:11px;padding:4px 8px;letter-spacing:-.01em}}
.hwj__status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:#EEF2F0;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:rgba(0,0,0,.55);white-space:nowrap}
.hwj__status::before{content:"";width:6px;height:6px;border-radius:50%;background:#F5A524}
.hwj__status.is-live{background:var(--gl);color:var(--gd)}.hwj__status.is-live::before{background:var(--g);animation:hwjPulse 1.6s infinite}
.hwj__screen{position:relative;aspect-ratio:640/420;overflow:hidden}
.hwj__canvas{position:absolute;top:0;left:0;width:640px;height:420px;transform:scale(var(--s,1));transform-origin:0 0}
.hwj__scene{position:absolute;inset:0;padding:24px;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.hwj__scene.is-active{opacity:1;visibility:visible;transition:opacity .35s}
.hwj .a{opacity:0}
.hwj .is-active .a{animation:hwjIn .55s var(--ease) calc(var(--d,0) * 120ms + 150ms) both}
@keyframes hwjIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes hwjPulse{0%{box-shadow:0 0 0 0 rgba(0,178,107,.5)}100%{box-shadow:0 0 0 8px rgba(0,178,107,0)}}
.hwj .hc{border:1px solid var(--ln);border-radius:12px;background:#fff;box-shadow:0 6px 16px -10px rgba(0,60,35,.25)}
.hwj .sk{display:block;height:8px;border-radius:999px;background:var(--sk)}
.hwj .lbl{margin:0 0 14px;font-size:12px;line-height:16px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--gd)}
/* icons: mask images, so they take currentColor */
.hwj .i{display:inline-block;flex:none;width:16px;height:16px;background-color:currentColor;-webkit-mask:var(--ii) center/contain no-repeat;mask:var(--ii) center/contain no-repeat}
.hwj .i--store{--ii:url("../img/ecommerce/hwj/store.svg")}
.hwj .i--users{--ii:url("../img/ecommerce/hwj/users.svg")}
.hwj .i--target{--ii:url("../img/ecommerce/hwj/target.svg")}
.hwj .i--arrow{--ii:url("../img/ecommerce/hwj/arrow.svg")}
.hwj .i--check{--ii:url("../img/ecommerce/hwj/check.svg")}
.hwj .i--bag{--ii:url("../img/ecommerce/hwj/bag.svg")}
.s0{display:grid;grid-template-columns:1fr 56px 1.15fr;align-items:center;height:100%}
.s0__in{display:grid;gap:14px}
.s0__c{display:flex;align-items:center;gap:12px;padding:14px}
.s0__ic{display:flex;align-items:center;justify-content:center;flex:none;width:36px;height:36px;border-radius:8px;background:var(--gl);color:var(--gd)}
.s0__c b{display:block;margin-bottom:8px;font-size:14px;line-height:18px}
.s0__arrow{display:flex;justify-content:center;color:var(--g)}
.hwj .s0__arrow .i{width:28px;height:28px}
.s0__plan{padding:18px}
.s0__ph{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:15px;font-weight:600}
.s0__ph i{width:8px;height:8px;border-radius:50%;background:var(--g)}
.s0__row{display:flex;align-items:center;gap:10px;margin-top:12px}
.s0__row .ck{display:flex;align-items:center;justify-content:center;flex:none;width:18px;height:18px;border-radius:50%;background:var(--g);color:#fff}
.hwj .s0__row .ck .i{width:11px;height:11px}
.s1__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.s1__chip{position:relative;padding:14px;border:1px solid var(--ln);border-radius:12px;background:#fff;font-size:14px;font-weight:600;color:rgba(0,0,0,.7)}
.s1__chip--custom{border-style:dashed;border-color:#BFD9CB;color:var(--gd)}
.hwj .is-active .s1__pick{animation:hwjIn .55s var(--ease) 390ms both,hwjPick .35s ease 1.5s forwards}
@keyframes hwjPick{to{border-color:var(--g);background:var(--gl);color:var(--gd);box-shadow:0 0 0 4px rgba(0,178,107,.15)}}
.s1__tick{position:absolute;top:10px;right:10px;display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;background:var(--g);color:#fff;transform:scale(0)}
.hwj .s1__tick .i{width:12px;height:12px}
.hwj .is-active .s1__tick{animation:hwjPop .35s var(--ease) 1.6s forwards}
@keyframes hwjPop{to{transform:scale(1)}}
.s1__mig{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:8px;margin-top:22px;padding:18px}
.s1__box{padding:14px;border-radius:8px;background:#F4F7F5}
.s1__box small{display:block;margin-bottom:10px;font-size:12px;font-weight:600;color:rgba(0,0,0,.55)}
.s1__box .sk+.sk{margin-top:8px}
.s1__box--new{background:var(--gl)}.s1__box--new small{color:var(--gd)}.s1__box--new .sk{background:#C6EAD7}
.s1__pipe{position:relative;height:2px;background:repeating-linear-gradient(90deg,#BFD9CB 0 6px,transparent 6px 12px)}
.s1__pipe span{position:absolute;top:-4px;left:0;width:10px;height:10px;border-radius:50%;background:var(--g);animation:hwjFlow 1.8s linear infinite}
.s1__pipe span:nth-child(2){animation-delay:.6s}.s1__pipe span:nth-child(3){animation-delay:1.2s}
@keyframes hwjFlow{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 10px);opacity:0}}
.s1__tags{display:flex;gap:10px;margin-top:16px}
.s1__tags span{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--gl);font-size:13px;font-weight:600;color:var(--gd)}
.hwj .s1__tags .i{width:13px;height:13px}
.s2{position:relative;height:100%}
.s2__nav{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.s2__logo{width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,#00B26B,#0E5A37)}
.s2__nav .sk{width:48px}.s2__nav .sk:first-of-type{margin-left:auto}
.s2__cart{width:26px;height:26px;border-radius:50%;border:2px solid var(--sk)}
.s2__hero{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:center;padding:20px;border-radius:12px;background:#F4F8F6}
.s2__hero .sk{height:12px}.s2__hero .sk+.sk{margin-top:10px}
.s2__btn{display:block;width:96px;height:28px;margin-top:16px;border-radius:999px;background:var(--g)}
.s2__img{position:relative;height:120px;border-radius:12px;background:var(--sk);overflow:hidden}
.s2__img::after,.s2__pi::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,#BFF0D8,#00B26B 70%,#0E5A37);opacity:0}
.hwj .is-active .s2__img::after{animation:hwjFill .8s ease 1.1s forwards}
.s2__prods{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:14px}
.s2__p .sk{margin-top:8px}.s2__p .sk+.sk{width:55%}
.s2__pi{position:relative;height:70px;border-radius:8px;background:var(--sk);overflow:hidden}
.s2__pi::after{background:linear-gradient(135deg,#E3F6EC,#9ADDBB)}
.hwj .is-active .s2__pi::after{animation:hwjFill .7s ease calc(1.3s + var(--d,0) * 100ms) forwards}
@keyframes hwjFill{to{opacity:1}}
.s2__brand{position:absolute;right:6px;bottom:6px;display:flex;align-items:center;gap:14px;padding:12px 16px}
.s2__sw{display:flex}.s2__sw i{width:22px;height:22px;margin-left:-6px;border:2px solid #fff;border-radius:50%}
.s2__sw i:nth-child(1){margin-left:0;background:#00B26B}.s2__sw i:nth-child(2){background:#0E5A37}.s2__sw i:nth-child(3){background:#BFF0D8}.s2__sw i:nth-child(4){background:#16191C}
.s2__brand b{font-size:20px;line-height:1}
.s3{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:14px;height:100%}
.s3__code{padding:16px;border-radius:12px;background:#0B1F16}
.s3__tabs{display:flex;gap:6px;margin-bottom:16px}.s3__tabs i{width:44px;height:8px;border-radius:999px;background:rgba(255,255,255,.12)}.s3__tabs i:first-child{background:rgba(59,220,154,.5)}
.s3__ln{display:block;width:0;height:7px;margin:0 0 11px var(--x,0);border-radius:999px;background:var(--c,rgba(255,255,255,.25))}
.hwj .is-active .s3__ln{animation:hwjType .5s steps(10,end) calc(var(--d) * 140ms + 300ms) forwards}
@keyframes hwjType{to{width:var(--w)}}
.s3__prev{position:relative;padding:16px;border:1px solid var(--ln);border-radius:12px;background:#fff}
.s3__chip{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;padding:3px 10px;border-radius:999px;background:var(--gl);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gd)}
.s3__chip i{width:6px;height:6px;border-radius:50%;background:var(--g);animation:hwjPulse 1.6s infinite}
.s3__blk{height:64px;border-radius:8px;background:#F4F8F6}
.s3__prev .sk{margin-top:10px}
.s3__cta{display:block;width:64px;height:20px;margin-top:14px;border-radius:999px;background:var(--g);transform-origin:left center}
.hwj .is-active .s3__cta{animation:hwjGrow .4s var(--ease) 2.5s forwards}
@keyframes hwjGrow{to{width:112px;height:30px}}
.s3__msg{position:absolute;max-width:230px;padding:10px 14px;border-radius:14px;font-size:13px;line-height:18px;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
.s3__msg--you{right:14px;bottom:96px;border-bottom-right-radius:4px;background:#16191C;color:#fff}
.s3__msg--us{right:44px;bottom:30px;display:flex;align-items:center;gap:8px;border-bottom-left-radius:4px;background:#fff;border:1px solid var(--ln);color:var(--ec-ink,#000)}
.hwj .s3__msg--us .i{color:var(--g)}
.s4{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;align-items:center;height:100%}
.s4__list{padding:18px}
.s4__h{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;font-size:15px}
.s4__h span{padding:2px 8px;border-radius:8px;background:#F4F7F5;font-size:11px;font-weight:600;color:rgba(0,0,0,.55)}
.s4__row{display:flex;justify-content:space-between;align-items:center;padding:11px 0;border-top:1px solid var(--ln);font-size:14px;color:rgba(0,0,0,.75)}
.s4__st{position:relative;width:20px;height:20px}
.s4__spin{position:absolute;inset:2px;border:2px solid var(--sk);border-top-color:var(--g);border-radius:50%;animation:hwjSpin .8s linear infinite}
.s4__ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--g);color:#fff;transform:scale(0)}
.hwj .s4__ok .i{width:12px;height:12px}
.hwj .is-active .s4__spin{animation:hwjSpin .8s linear infinite,hwjOut .2s ease calc(var(--d) * 380ms + 500ms) forwards}
.hwj .is-active .s4__ok{animation:hwjPop .3s var(--ease) calc(var(--d) * 380ms + 520ms) forwards}
@keyframes hwjSpin{to{transform:rotate(360deg)}}
@keyframes hwjOut{to{opacity:0}}
/* readiness ring: a conic gradient cut to a ring with a radial mask, filled via @property */
@property --hwj-p{syntax:"<percentage>";inherits:false;initial-value:0%}
.s4__ring{position:relative;display:flex;align-items:center;justify-content:center}
.s4__arc{display:block;width:170px;height:170px;border-radius:50%;--hwj-p:0%;
  background:conic-gradient(var(--g) var(--hwj-p),var(--sk) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px));mask:radial-gradient(farthest-side,transparent calc(100% - 10px),#000 calc(100% - 10px))}
.hwj .is-active .s4__arc{animation:hwjRing 2.3s ease-in-out .4s forwards}
@keyframes hwjRing{to{--hwj-p:100%}}
.s4__ring div{position:absolute;text-align:center}
.s4__ring b{display:block;font-size:22px;color:var(--gd)}.s4__ring small{font-size:12px;color:rgba(0,0,0,.55)}
.hwj .s4__ring div{opacity:0}.hwj .is-active .s4__ring div{animation:hwjIn .4s ease 2.6s both}
.s5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto 1fr auto;gap:14px;height:100%}
.s5__top{grid-column:1/-1;display:flex;align-items:center;gap:12px;font-size:15px}
.s5__live{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border-radius:999px;background:var(--g);color:#04150D;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.s5__live i{width:7px;height:7px;border-radius:50%;background:#04150D;animation:hwjPulse 1.6s infinite}
.s5__chart{display:flex;flex-direction:column;padding:16px}
.s5__ch{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.s5__ch span{font-size:12px;color:rgba(0,0,0,.5)}
/* the chart image is revealed left to right, like the line being drawn */
.s5__plot{position:relative;flex:1;min-height:0}
.s5__plot img{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 100% 0 0)}
.hwj .is-active .s5__plot img{animation:hwjDraw 1.6s ease-out .5s forwards}
@keyframes hwjDraw{to{clip-path:inset(0 0 0 0)}}
.s5__toasts{display:flex;flex-direction:column;gap:10px;justify-content:center}
.s5__toast{display:flex;align-items:center;gap:10px;padding:10px 12px}
.s5__toast .ic{display:flex;align-items:center;justify-content:center;flex:none;width:32px;height:32px;border-radius:8px;background:var(--gl);color:var(--gd)}
.s5__toast b{display:block;font-size:13px;line-height:17px}.s5__toast small{font-size:11px;color:rgba(0,0,0,.5)}
.s5__keep{grid-column:1/-1;display:flex;gap:10px}
.s5__keep span{display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border:1px solid var(--ln);border-radius:999px;font-size:13px;font-weight:500}
.s5__keep span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--g)}
@media(prefers-reduced-motion:reduce){.hwj *{animation-duration:.01ms!important;animation-delay:0s!important;transition:none!important}}
/* How We Work: a light stage instead of the dark green panel */
.hwj__stage{padding:24px;border:1px solid #E3ECE7;background:linear-gradient(180deg,#FFFFFF 0%,#F2F7F4 100%);box-shadow:0 30px 60px -40px rgba(0,60,36,.35)}
.hwj__stage::before{background-image:radial-gradient(rgba(0,116,74,.12) 1px,transparent 1.2px);background-size:18px 18px;-webkit-mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent);mask-image:radial-gradient(70% 60% at 50% 0%,#000,transparent)}
.hwj__browser{border:1px solid #E3ECE7;box-shadow:0 24px 48px -28px rgba(0,60,36,.35)}
.hwj__stage::before{content:none}
/* No card around the browser: it sits on the section background */
.hwj__stage{padding:0;border:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.hwj__browser{box-shadow:0 30px 60px -32px rgba(0,60,36,.4)}
  font-size:13px;font-weight:600;transition:background-color .3s,border-color .3s,color .3s,box-shadow .3s,transform .3s}
/* macOS window controls */
.hwj__dots3 i{width:12px;height:12px;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.12)}
.hwj__dots3 i:nth-child(1){background:#FF5F57}.hwj__dots3 i:nth-child(2){background:#FEBC2E}.hwj__dots3 i:nth-child(3){background:#28C840}
/* Browser colours: a deep green title bar, a soft mint screen so the white cards stand out */
.hwj{--ln:#DDE9E2;--sk:#E2ECE7}
.hwj__browser{border:1px solid #CFE0D6;border-radius:16px;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 40px 70px -40px rgba(0,60,36,.55),0 12px 24px -16px rgba(0,60,36,.25)}
.hwj__bar{background:linear-gradient(180deg,#0E5A37,#0A4A2D);border-bottom:0}
.hwj__url{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.82)}
.hwj__status{background:rgba(255,255,255,.1);color:rgba(255,255,255,.8)}
.hwj__status.is-live{background:rgba(0,178,107,.22);color:#7CF0BC}
.hwj__screen{background:radial-gradient(120% 90% at 100% 0%,rgba(0,178,107,.10),transparent 55%),linear-gradient(180deg,#F5FAF7 0%,#EDF5F0 100%)}
.hwj .hc{border-color:#DDE9E2;box-shadow:0 10px 24px -16px rgba(0,60,36,.35)}
.s1__chip{border-color:#DDE9E2}

/* Phones/tablets: heading, then the browser preview, then the steps */
/* Phones/tablets: heading, then the browser preview, then the steps (so the preview is seen as the steps play) */
@media (max-width: 1023.98px) {
  .hwj__wrap { gap: 0; }
  .hwj__side { display: contents; }
  .hwj__side > .ec-head { order: 1; }
  .hwj__stage { order: 2; margin-top: 28px; }
  .hwj__steps { order: 3; margin-top: 24px; }
}
/* Contrast for the step labels */
.hwj__num { color: rgba(0,0,0,.6); }
.hwj__t { color: rgba(0,0,0,.62); }
.hwj__step.is-active .hwj__num { color: var(--gd); }
.hwj__browser{box-shadow:0 30px 60px -30px rgba(16,24,20,.32),0 2px 8px rgba(16,24,20,.05)}
.hwj .hc{box-shadow:0 6px 16px -8px rgba(16,24,20,.18)}


/* Phones/tablets: keep the single column to the screen width (the preview canvas must not widen it) */
@media (max-width: 1023.98px) { .hwj__wrap { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .hwj .hwj__status { display: none; } }

/* ═══════════════════════════════════════════════════════════════
   Contact panel: the eCommerce "What Makes Us Different" card background (ecommerce.css .ec11-why__intro)
   ═══════════════════════════════════════════════════════════════ */
.tp-cpanel{isolation:isolate;background:radial-gradient(120% 90% at 100% 100%,#0b6b44 0%,rgba(11,107,68,0) 60%),linear-gradient(135deg,#050806 0%,#08291b 45%,#0a5a3a 100%)}
.tp-cpanel::before{content:"";position:absolute;z-index:-1;pointer-events:none;width:680px;height:680px;right:-345px;bottom:-400px;border-radius:50%;
    background:radial-gradient(circle closest-side,transparent 0 212px,rgba(255,255,255,.07) 212px 213px,rgba(255,255,255,.045) 213px 262px,rgba(255,255,255,.03) 262px 312px,transparent 312px)}
.tp-cpanel::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:70%;height:60%;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px);background-size:32px 32px;background-position:right bottom;
    -webkit-mask-image:radial-gradient(85% 85% at 100% 100%,#000 35%,transparent);mask-image:radial-gradient(85% 85% at 100% 100%,#000 35%,transparent)}

/* Contact stepper: a hidden step stays hidden even where a utility sets display (the panels toggle [hidden]) */
[data-tp-panel][hidden]{display:none!important}
/* The reveal hooks, for reference (the rules themselves are inline in each page's head styles):
   [data-tp-reveal], [data-tp-reveal-group], [data-tp-reveal-group=lift] under html.tp-motion */

/* ═══════════════════════════════════════════════════════════════
   Apps and integrations (.tp-apps): a card of category rows (icon, name, a line, then the tools as chips with their
   mark or a letter tile) beside a dark "Built by us" panel. Replaces the eight-card grid (OD-019, UD-028): made on the
   BigCommerce page first (BC-4), then carried to WooCommerce (WOO-5) and Shopify (SHP-2). Plain CSS, so it needs no
   new utility in the shared compiled CSS.
   ═══════════════════════════════════════════════════════════════ */
.tp-apps{display:grid;gap:20px;margin-top:40px}
@media(min-width:1024px){.tp-apps{grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:24px;margin-top:48px;align-items:start}}
.tp-apps__list{margin:0;padding:0;list-style:none;border:1px solid #e3efe7;border-radius:22px;background:#fff;box-shadow:0 18px 50px -30px rgba(15,60,40,.25);overflow:hidden}
.tp-apps__row{display:grid;gap:14px;padding:20px;border-top:1px solid #edf2ef}
.tp-apps__row:first-child{border-top:0}
@media(min-width:768px){.tp-apps__row{grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:center;padding:22px 26px}}
.tp-apps__cat{display:flex;align-items:flex-start;gap:12px}
.tp-apps__ic{display:flex;flex:none;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:#e9f8ef;color:#00744A}
.tp-apps__cat b{display:block;font-size:16px;line-height:1.3;font-weight:700;color:#0f1f2e}
.tp-apps__cat small{display:block;margin-top:3px;font-size:13.5px;line-height:1.45;color:rgba(0,0,0,.6)}
.tp-apps__tools{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.tp-apps__tool{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:6px 13px 6px 9px;border:1px solid #e3efe7;border-radius:999px;background:#fbfefc;font-size:14.5px;font-weight:600;line-height:1.2;color:#0f1f2e;transition:border-color .2s,background-color .2s}
.tp-apps__tool:hover{border-color:rgba(0,178,107,.45);background:#f3fbf6}
.tp-apps__tool svg{flex:none;width:20px;height:20px;color:#111}
.tp-apps__letter{display:flex;flex:none;align-items:center;justify-content:center;width:20px;height:20px;border-radius:6px;background:#111;font-size:11px;font-weight:800;line-height:1;color:#fff}
/* Built by us: the custom work, each item linked to the store it is live on */
.tp-apps__ours{position:relative;isolation:isolate;overflow:hidden;padding:26px;border-radius:22px;background:radial-gradient(120% 90% at 100% 100%,#0b6b44 0%,rgba(11,107,68,0) 60%),linear-gradient(135deg,#050806 0%,#08291b 50%,#0a4f33 100%);color:#fff}
@media(min-width:1024px){.tp-apps__ours{padding:30px}}
.tp-apps__ours::after{content:"";position:absolute;z-index:-1;right:-120px;bottom:-140px;width:320px;height:320px;border-radius:50%;border:1px solid rgba(159,245,205,.18)}
.tp-apps__ours p{margin:0}
.tp-apps__eyebrow{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#9ff5cd}
.tp-apps__ours h3{margin:10px 0 0;font-size:24px;line-height:1.2;font-weight:800;letter-spacing:-.01em}
.tp-apps__lead{margin-top:8px!important;font-size:15px;line-height:1.6;color:rgba(255,255,255,.72)}
.tp-apps__built{margin:20px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.tp-apps__built li{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.04)}
.tp-apps__ck{display:flex;flex:none;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:rgba(0,178,107,.2);color:#7CF0BC}
.tp-apps__built b{display:block;font-size:15px;line-height:1.35;font-weight:700}
.tp-apps__built a{display:inline-block;margin-top:3px;font-size:13px;font-weight:600;color:#9ff5cd;text-decoration:none}
.tp-apps__built a:hover{text-decoration:underline}
.tp-apps__built a:focus-visible,.tp-apps__cta:focus-visible{outline:2px solid #9ff5cd;outline-offset:2px;border-radius:4px}
.tp-apps__cta{display:inline-flex;align-items:center;gap:6px;margin-top:20px;font-size:15px;font-weight:700;color:#fff;text-decoration:none}
.tp-apps__cta:hover{text-decoration:underline}