/* How We Work (hwj) for the Shopify page only: the step tabs and animated browser from the eCommerce page,
   copied from ecommerce.css ("How We Work (hwj)" block plus its later overrides) so this page doesn't load all of it.
   Keep in step with ecommerce.css when that block changes. */
/* ═══════════════════════════════════════════════════════════════
   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;max-width:260px;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}
.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)}

/* ═══════════════════════════════════════════════════════════════
   Shopify page: the preview drawn as a Shopify-admin-style screen (.sa).
   The same 640 x 420 canvas and step mechanics as above; only the look and
   the six scenes differ. Generic icons only: no Shopify logo.
   ═══════════════════════════════════════════════════════════════ */
.hwj .sa{position:absolute;inset:0;display:grid;grid-template-rows:38px minmax(0,1fr);background:#1a1a1a;color:#303030;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,"Helvetica Neue",sans-serif}
.sa__top{display:flex;align-items:center;gap:10px;padding:0 12px;color:#e3e3e3}
.sa__mark{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#303030;color:#fff}
.hwj .sa__mark .i{width:13px;height:13px}
.sa__search{display:flex;align-items:center;gap:6px;flex:1;max-width:250px;height:24px;margin:0 auto;padding:0 10px;border:1px solid #4a4a4a;border-radius:8px;background:#303030;font-size:11px;color:#b5b5b5}
.sa__search::before{content:"";width:9px;height:9px;border:1.5px solid #8a8a8a;border-radius:50%}
.sa__store{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:600}
.sa__av{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:#00B26B;color:#04150D;font-size:9.5px;font-weight:800}
.sa__body{display:grid;grid-template-columns:128px minmax(0,1fr);min-height:0;background:#ebebeb;border-radius:12px 12px 0 0;overflow:hidden}
.sa__nav{display:flex;flex-direction:column;gap:1px;padding:10px 7px}
.sa__nav span{display:flex;align-items:center;gap:8px;height:23px;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:550;color:#303030;transition:background-color .3s,box-shadow .3s}
.sa__nav span::before{content:"";flex:none;width:11px;height:11px;border:1.6px solid #616161;border-radius:3px}
.sa__nav small{margin:9px 8px 2px;font-size:10px;font-weight:650;color:#616161}
.sa:has(#hwj-s0.is-active) [data-nav="home"],
.sa:has(#hwj-s1.is-active) [data-nav="store"],
.sa:has(#hwj-s2.is-active) [data-nav="store"],
.sa:has(#hwj-s3.is-active) [data-nav="store"],
.sa:has(#hwj-s4.is-active) [data-nav="store"],
.sa:has(#hwj-s5.is-active) [data-nav="analytics"]{background:#fff;font-weight:700;box-shadow:0 1px 0 rgba(0,0,0,.07)}
.sa__main{position:relative;min-height:0;background:#f1f1f1;border-top-left-radius:12px;box-shadow:inset 1px 1px 0 #e3e3e3}
.hwj .sa .hwj__scene{padding:14px 16px}
/* Polaris-style parts */
.sa-h{display:flex;align-items:center;gap:8px;height:26px;margin-bottom:10px}
.sa-h b{font-size:15px;font-weight:700;color:#303030}
.sa-h .sa-btn{margin-left:auto}
.sa-card{border-radius:12px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08),0 1px 0 rgba(0,0,0,.06)}
.sa-btn{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:8px;background:#303030;color:#fff;font-size:11px;font-weight:650;white-space:nowrap;box-shadow:inset 0 -1px 0 #000,inset 0 1px 0 rgba(255,255,255,.22)}
.sa-btn--plain{background:#fff;color:#303030;box-shadow:inset 0 0 0 1px #d4d4d4,0 1px 0 rgba(0,0,0,.08)}
.sa-badge{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 7px;border-radius:7px;background:#e3e3e3;font-size:10.5px;font-weight:600;color:#303030;white-space:nowrap}
.sa-badge--ok{background:#cdfee1;color:#0c5132}
.sa-badge--info{background:#e0f0ff;color:#00527c}
.sa-badge--warn{background:#ffef9d;color:#4f4700}
.sa-t{display:block;font-size:12.5px;font-weight:650;color:#303030}
.sa-s{display:block;font-size:11px;color:#616161}
.sa-ck{position:relative;flex:none;width:18px;height:18px}
.sa-ck::before{content:"";position:absolute;inset:0;border:1.5px dashed #b5b5b5;border-radius:50%}
.sa-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#303030;color:#fff;transform:scale(0)}
.hwj .sa-ck .i{width:10px;height:10px}
.hwj .is-active .sa-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes saGrow{to{transform:scaleX(1)}}
/* 1. Discovery call: a setup-guide style plan */
.sa0{display:grid;grid-template-columns:1.55fr 1fr;gap:12px;align-items:start}
.sa0__plan{padding:14px}
.sa0__bar{height:6px;margin:10px 0 4px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.sa0__bar i{display:block;width:100%;transform:scaleX(0);transform-origin:left;height:100%;border-radius:inherit;background:#303030}
.hwj .is-active .sa0__bar i{animation:saGrow 1.9s ease-out .9s forwards}
.sa0__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #ebebeb}
.sa0__row:first-of-type{margin-top:8px}
.sa0__row div{flex:1}
.sa0__row .sk{margin-top:5px;height:6px}
.sa0__row--goal .sa-t{color:#0c5132}
.sa0__call{padding:14px;text-align:center}
.sa0__avs{display:flex;justify-content:center;margin:6px 0 10px}
.sa0__avs span{display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:#e3e3e3;font-size:11px;font-weight:700}
.sa0__avs span:first-child{margin-left:0}
.sa0__avs span:last-child{background:#00B26B;color:#04150D}
.sa0__call .sa-badge{margin-top:10px}
/* 2. Plan and scope: theme choice and the migration mapped */
.sa1{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.sa1 .sa-card{padding:12px}
.sa1__opt{position:relative;display:flex;align-items:center;gap:10px;margin-top:8px;padding:9px 10px;border:1px solid #e3e3e3;border-radius:10px;background:#fff}
.sa1__th{flex:none;width:38px;height:28px;border-radius:6px;background:linear-gradient(180deg,#e3e3e3 0 30%,#f1f1f1 30%)}
.sa1__opt div{flex:1}
.hwj .is-active .sa1__pick{animation:hwjIn .55s var(--ease) 390ms both,hwjPick .35s ease 1.5s forwards}
.sa1__pick .s1__tick{top:50%;right:10px;transform:translateY(-50%) scale(0)}
.hwj .is-active .sa1__pick .s1__tick{animation:saTick .35s var(--ease) 1.6s forwards}
@keyframes saTick{to{transform:translateY(-50%) scale(1)}}
.sa1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11.5px;font-weight:600}
.sa1__row span{flex:none;width:76px}
.sa1__track{flex:1;height:6px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.sa1__track i{display:block;width:100%;transform:scaleX(0);transform-origin:left;height:100%;border-radius:inherit;background:#00B26B}
.hwj .is-active .sa1__track i{animation:saGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.sa1__note{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:11px;color:#616161}
/* 3. Design: the theme editor */
.sa2{display:grid;grid-template-columns:138px minmax(0,1fr);gap:10px;height:calc(100% - 36px)}
.sa2__panel{padding:10px}
.sa2__panel .sa-t{margin-bottom:6px}
.sa2__sec{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border-radius:7px;font-size:11px;font-weight:550;color:#303030}
.sa2__sec::before{content:"";flex:none;width:10px;height:10px;border-radius:3px;background:#d4d4d4}
.sa2__sec.is-on{background:#f1f1f1;font-weight:700}
.sa2__sec.is-on::before{background:#00B26B}
.sa2__add{display:block;margin-top:6px;padding-left:8px;font-size:11px;font-weight:600;color:#005bd3}
.sa2__view{position:relative;padding:12px;overflow:hidden}
.sa2__view .s2{height:auto}
.sa2__view .s2__hero{padding:14px}
.sa2__view .s2__img{height:96px}
.sa2__view .s2__pi{height:56px}
.sa2__view .s2__prods{gap:8px}
/* 4. Build on staging: edit code on the unpublished theme */
.sa3{position:relative;display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;height:calc(100% - 36px)}
.sa3__files{padding:10px;font-size:11px}
.sa3__files small{display:block;margin:8px 0 3px;font-size:10px;font-weight:700;color:#616161}
.sa3__files small:first-child{margin-top:0}
.sa3__files span{display:block;height:21px;padding:0 6px;border-radius:6px;line-height:21px;color:#303030;white-space:nowrap}
.sa3__files span.is-on{background:#f1f1f1;font-weight:700}
.sa3 .s3__code{border-radius:12px}
.sa3 .s3__tabs{gap:4px}
.sa3 .s3__tabs b{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.08);font-size:10px;font-weight:600;color:rgba(255,255,255,.55)}
.sa3 .s3__tabs b:first-child{background:rgba(59,220,154,.2);color:#7CF0BC}
.sa3 .s3__msg--you{right:10px;bottom:84px}
.sa3 .s3__msg--us{right:30px;bottom:22px}
/* 5. QA and launch: checks, then publish */
.sa4{display:grid;grid-template-columns:1.35fr 1fr;gap:12px;align-items:start}
.sa4 .s4__list{padding:12px 14px}
.sa4 .s4__row{padding:9px 0;font-size:12.5px}
.sa4__theme{padding:12px}
.sa4__shot{height:92px;margin:8px 0 10px;border-radius:8px;background:linear-gradient(180deg,#303030 0 14%,#f1f1f1 14% 60%,#e3e3e3 60%)}
.sa4__pub{position:relative;height:24px}
.sa4__pub > *{position:absolute;left:0;top:0}
.sa4__live{top:3px;opacity:0}
.hwj .is-active .sa4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .sa4__live{animation:hwjIn .4s var(--ease) 2.55s both}
.sa4__note{display:block;margin-top:10px;font-size:10.5px;line-height:15px;color:#616161}
/* 6. Run and grow: analytics */
.sa5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:10px;height:calc(100% - 36px)}
.sa5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sa5__kpi{padding:10px 12px}
.sa5__kpi .sk{width:55%;height:9px;margin-top:8px;background:#e3e3e3}
.sa5__kpi em{float:right;margin-top:-1px;padding:1px 6px;border-radius:6px;background:#cdfee1;font-size:10px;font-style:normal;font-weight:700;color:#0c5132}
.sa5 .s5__chart{padding:12px}
.sa5 .s5__toasts{gap:8px}
.sa5 .s5__toast{padding:8px 10px}
.sa5 .s5__keep{gap:8px}
.sa5 .s5__keep span{padding:5px 12px;background:#fff;font-size:11.5px}
/* Neutral browser bar, so the admin screen reads as Shopify rather than the site's green */
.hwj .hwj__browser{border-color:#d4d4d4}
.hwj .hwj__bar{background:linear-gradient(180deg,#f3f3f3,#e8e8e8);border-bottom:1px solid #d4d4d4}
.hwj .hwj__url{background:#fff;border-color:#dcdcdc;color:#616161}
.hwj .hwj__status.is-live{background:#cdfee1;color:#0c5132}
/* 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; } }