/* Magento page only: a Magento admin (.ma) drawn in CSS, for two places (UD-044, UD-045):
   1. How We Work: the preview on the technology page kit's step mechanics and 640 x 420 canvas (tech-page.css), as the
      BigCommerce page draws a control panel (bigcommerce-admin.css, whose layout this recolours).
   2. The hero (.ma--hero): a still admin dashboard, no animation and no image file, sized in --u (1/640 of its width,
      a container unit) so it scales with no script.
   Generic marks only: no Magento or Adobe logo. The orange is Magento's, darkened to #c2410c so white text on it
   meets 4.5:1 contrast. The sidebar item that matches the active step is lit with :has(). */
/* 1. How We Work */
.hwj .ma{position:absolute;inset:0;display:grid;grid-template-rows:30px minmax(0,1fr);background:#fff;color:#303030;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
/* Admin bar */
.ma__bar{display:flex;align-items:center;gap:12px;padding:0 10px;border-bottom:1px solid #e3e3e3;font-size:10.5px;color:#303030}
.ma__mark{display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;background:#303030;font-size:9px;font-weight:800;color:#fff}
.ma__search{display:flex;align-items:center;gap:6px;flex:1;max-width:230px;height:20px;margin:0 auto;padding:0 8px;border:1px solid #e3e3e3;border-radius:4px;background:#f8f8f8;font-size:9.5px;color:#adadad}
.ma__search::before{content:"";width:8px;height:8px;border:1.5px solid #adadad;border-radius:50%}
.ma__bar span{display:flex;align-items:center;gap:5px;white-space:nowrap}
.ma__howdy{margin-left:auto;font-weight:600}
.ma__howdy i{display:inline-block;width:14px;height:14px;border-radius:2px;background:#00B26B}
/* Sidebar and content */
.ma__body{display:grid;grid-template-columns:118px minmax(0,1fr);min-height:0}
.ma__nav{display:flex;flex-direction:column;gap:1px;padding:6px 0;background:#373330}
.ma__nav > span{position:relative;display:flex;align-items:center;gap:7px;height:21px;padding:0 9px;font-size:10.5px;color:#f8f8f8;transition:background-color .3s,color .3s}
.ma__nav > span::before{content:"";flex:none;width:10px;height:10px;border-radius:2px;background:#adadad;opacity:.7;transition:background-color .3s,opacity .3s}
.ma__sep{height:6px}
/* the lit item: an orange bar on the left and its submenu open below it, as the admin marks the open menu */
.ma:has(#hwj-s0.is-active) [data-nav="dashboard"],
.ma:has(#hwj-s1.is-active) [data-nav="system"],
.ma:has(#hwj-s4.is-active) [data-nav="system"],
.ma:has(#hwj-s2.is-active) [data-nav="content"],
.ma:has(#hwj-s3.is-active) [data-nav="content"],
.ma:has(#hwj-s5.is-active) [data-nav="reports"]{background:#4a4542;color:#fff;box-shadow:inset 3px 0 0 #c2410c}
.ma:has(#hwj-s0.is-active) [data-nav="dashboard"]::before,
.ma:has(#hwj-s1.is-active) [data-nav="system"]::before,
.ma:has(#hwj-s4.is-active) [data-nav="system"]::before,
.ma:has(#hwj-s2.is-active) [data-nav="content"]::before,
.ma:has(#hwj-s3.is-active) [data-nav="content"]::before,
.ma:has(#hwj-s5.is-active) [data-nav="reports"]::before{background:#f8a36b;opacity:1}
.ma__sub{display:none;flex-direction:column;padding:4px 0 5px;background:#4a4542}
.ma__sub i{display:block;height:17px;padding-left:26px;font-size:9.5px;font-style:normal;line-height:17px;color:#c7c4c0;white-space:nowrap}
.ma__sub i.is-on{font-weight:700;color:#fff}
.ma:has(#hwj-s1.is-active) [data-sub="sys-import"],
.ma:has(#hwj-s4.is-active) [data-sub="sys-cache"],
.ma:has(#hwj-s2.is-active) [data-sub="ct-pages"],
.ma:has(#hwj-s3.is-active) [data-sub="ct-design"],
.ma:has(#hwj-s5.is-active) [data-sub="rp-sales"]{display:flex}
.ma__main{position:relative;min-height:0;background:#f8f8f8}
.hwj .ma .hwj__scene{padding:0}
/* Page header strip, then the page body */
.ma-hd{display:flex;align-items:center;gap:8px;height:34px;padding:0 14px;border-bottom:1px solid #e3e3e3;background:#fff}
.ma-hd b{font-size:13px;font-weight:600;color:#303030}
.ma-hd small{font-size:10.5px;color:#6b6b6b}
.ma-hd .ma-btn{margin-left:auto}
.ma-pg{padding:12px 14px}
/* Control-panel parts */
.ma-card{border:1px solid #e3e3e3;border-radius:4px;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.04)}
.ma-btn{display:inline-flex;align-items:center;height:22px;padding:0 10px;border:1px solid #c2410c;border-radius:4px;background:#c2410c;color:#fff;font-size:10.5px;font-weight:500;white-space:nowrap}
.ma-btn--sec{background:#f6f7f7;color:#c2410c}
.ma-badge{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;background:#e5e5e5;font-size:10px;font-weight:500;color:#454545;white-space:nowrap}
.ma-badge--ok{background:#e6f8ea;color:#1d7a30}      /* control panel success */
.ma-badge--info{background:#e5f0fa;color:#00699d}    /* info */
.ma-badge--warn{background:#fff3d1;color:#8a6400}    /* pending */
.ma-t{display:block;font-size:12px;font-weight:600;color:#303030}
.ma-s{display:block;font-size:10.5px;color:#6b6b6b}
.ma-link{font-size:10.5px;color:#c2410c}
.ma-ck{position:relative;flex:none;width:18px;height:18px}
.ma-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #c7c4c0;border-radius:50%}
.ma-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#c2410c;color:#fff;transform:scale(0)}
.hwj .ma-ck .i{width:10px;height:10px}
.hwj .is-active .ma-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes maGrow{to{transform:scaleX(1)}}
/* 1. Discovery call: the Dashboard's store checklist, filled from the call */
.ma0{display:grid;grid-template-columns:1.55fr 1fr;gap:10px;align-items:start}
.ma0__tasks{padding:12px 14px}
.ma0__bar{height:5px;margin:9px 0 2px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.ma0__bar i{display:block;width:100%;height:100%;border-radius:inherit;background:#c2410c;transform:scaleX(0);transform-origin:left}
.hwj .is-active .ma0__bar i{animation:maGrow 1.9s ease-out .9s forwards}
.ma0__row{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid #f8f8f8}
.ma0__row:first-of-type{margin-top:8px}
.ma0__row div{flex:1}
.ma0__row .sk{height:6px;margin-top:5px}
.ma0__row--goal .ma-t{color:#1d7a30}
.ma0__call{padding:12px;text-align:center}
.ma0__avs{display:flex;justify-content:center;margin:8px 0}
.ma0__avs span{display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:#e3e3e3;font-size:10.5px;font-weight:700}
.ma0__avs span:first-child{margin-left:0}
.ma0__avs span:last-child{background:#00B26B;color:#04150D}
.ma0__call .ma-badge{margin-top:8px}
/* 2. Plan and scope: theme choice, then System > Data Transfer > Import mapped */
.ma1{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start}
.ma1 .ma-card{padding:11px 12px}
.ma1__theme{position:relative;display:flex;align-items:center;gap:9px;margin-top:8px;padding:8px 9px;border:1px solid #e3e3e3;border-radius:2px;background:#fff}
.ma1__shot{flex:none;width:40px;height:30px;border:1px solid #e3e3e3;background:linear-gradient(180deg,#4a4542 0 22%,#f6f7f7 22% 62%,#e3e3e3 62%)}
.ma1__theme div{flex:1}
.hwj .is-active .ma1__pick{animation:hwjIn .55s var(--ease) 390ms both,maPick .35s ease 1.5s forwards}
@keyframes maPick{to{border-color:#c2410c;box-shadow:0 0 0 2px rgba(194,65,12,.25)}}
.ma1__pick .s1__tick{top:50%;right:9px;background:#c2410c;transform:translateY(-50%) scale(0)}
.hwj .is-active .ma1__pick .s1__tick{animation:maTick .35s var(--ease) 1.6s forwards}
@keyframes maTick{to{transform:translateY(-50%) scale(1)}}
.ma1__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.ma1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:11px;font-weight:600}
.ma1__row span{flex:none;width:72px}
.ma1__track{flex:1;height:5px;border-radius:999px;background:#e3e3e3;overflow:hidden}
.ma1__track i{display:block;width:100%;height:100%;border-radius:inherit;background:#c2410c;transform:scaleX(0);transform-origin:left}
.hwj .is-active .ma1__track i{animation:maGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.ma1__note{display:flex;align-items:center;gap:6px;margin-top:11px;font-size:10.5px;color:#6b6b6b}
/* 3. Design: Content > Pages in Page Builder, elements on the left, the home page on the right */
.ma2{display:grid;grid-template-columns:138px minmax(0,1fr);gap:10px;height:calc(100% - 58px)}
.ma2__list{padding:9px}
.ma2__list .ma-t{margin-bottom:5px;font-size:11px}
.ma2__blk{display:flex;align-items:center;gap:6px;height:23px;padding:0 6px;font-size:10.5px;color:#303030;white-space:nowrap;overflow:hidden}
.ma2__blk::before{content:"";flex:none;width:9px;height:9px;border:1.5px solid #8c8f94;border-radius:2px}
.ma2__blk.is-on{background:#c2410c;color:#fff}
.ma2__blk.is-on::before{border-color:#fff}
.ma2__add{display:flex;align-items:center;justify-content:center;width:22px;height:22px;margin:6px 0 0 6px;border-radius:2px;background:#1e1e1e;color:#fff;font-size:14px;line-height:1}
.ma2__view{position:relative;padding:10px;overflow:hidden}
.ma2__view .s2{height:auto}
.ma2__view .s2__hero{padding:12px}
.ma2__view .s2__img{height:88px}
.ma2__view .s2__pi{height:50px}
.ma2__view .s2__prods{gap:8px}
/* 4. Build on staging: the theme's files (layout XML, templates, LESS), with feedback going straight in */
.ma3{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 128px;gap:10px;height:calc(100% - 58px)}
.ma3__files{padding:9px;font-size:10.5px}
.ma3__files small{display:block;margin:7px 0 3px;font-size:9.5px;font-weight:600;color:#6b6b6b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma3__files small:first-child{margin-top:0}
.ma3__files span{display:block;height:19px;padding:0 5px;line-height:19px;color:#c2410c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ma3__files span.is-on{background:#f8f8f8;font-weight:600;color:#303030}
.ma3 .s3__code{border-radius:2px;background:#1e1e1e}
.ma3 .s3__tabs{gap:4px}
.ma3 .s3__tabs b{padding:3px 8px;border-radius:2px;background:rgba(255,255,255,.08);font-size:9.5px;font-weight:600;color:rgba(255,255,255,.55)}
.ma3 .s3__tabs b:first-child{background:rgba(194,65,12,.28);color:#ffc19e}
.ma3 .s3__msg--you{right:146px;bottom:84px}
.ma3 .s3__msg--us{right:160px;bottom:22px}
/* 5. QA and launch: the checks pass (indexers, cache), then staging is deployed to production */
.ma4{display:grid;grid-template-columns:1.35fr 1fr;gap:10px;align-items:start}
.ma4 .s4__list{padding:11px 13px;border-radius:2px}
.ma4 .s4__row{padding:8px 0;font-size:12px}
.ma4 .s4__spin{border-top-color:#c2410c}
.ma4 .s4__ok{background:#1d7a30}
.ma4__push{padding:11px 12px}
.ma4__env{display:flex;align-items:center;gap:8px;margin-top:9px}
.ma4__env span{flex:1;padding:7px 8px;border:1px solid #e3e3e3;border-radius:2px;font-size:10.5px;font-weight:600;text-align:center}
.ma4__env span:last-child{border-color:#e6f8ea;background:#effaf1;color:#1d7a30}
.ma4__env em{flex:none;font-style:normal;color:#c2410c}
.ma4__pub{position:relative;height:22px;margin-top:11px}
.ma4__pub > *{position:absolute;left:0;top:0}
.ma4__live{top:2px;opacity:0}
.hwj .is-active .ma4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .ma4__live{animation:hwjIn .4s var(--ease) 2.55s both}
.ma4__note{display:block;margin-top:9px;font-size:10px;line-height:14px;color:#6b6b6b}
/* 6. Run and grow: Reports */
.ma5{display:grid;grid-template-columns:1.45fr 1fr;grid-template-rows:auto minmax(0,1fr) auto;gap:9px;height:calc(100% - 58px)}
.ma5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e3e3e3;background:#fff}
.ma5__kpi{padding:9px 11px;border-left:1px solid #f8f8f8}
.ma5__kpi:first-child{border-left:0}
.ma5__kpi .sk{width:55%;height:9px;margin-top:7px;background:#e3e3e3}
.ma5__kpi em{float:right;padding:0 5px;border-radius:2px;background:#e6f8ea;font-size:9.5px;font-style:normal;font-weight:600;color:#1d7a30}
.ma5 .s5__chart{padding:11px;border-radius:2px}
.ma5 .s5__toasts{gap:7px}
.ma5 .s5__toast{padding:7px 9px;border-radius:2px}
.ma5 .s5__keep{gap:7px}
.ma5 .s5__keep span{padding:4px 11px;border-radius:2px;background:#fff;font-size:11px}
/* Neutral browser bar, so the screen reads as a store admin 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:#6b6b6b}
.hwj .hwj__status.is-live{background:#e6f8ea;color:#1d7a30}

/* 2. The hero illustration: a still Magento admin dashboard in a browser frame. Every size is a multiple of --u, 1/640 of
   the frame's width, so the drawing scales like an image (container query units, no script). The frame reserves its
   final height (34 + 330 units and its 2px border) so it does not grow, and shift the hero, while the page streams in. */
.ma-hero{position:relative;container-type:inline-size;width:100%;padding-bottom:36px}
.ma-hero__frame{--u:calc(100cqw / 640);position:relative;min-height:calc(var(--u) * 364 + 2px);border:1px solid #e3e3e3;border-radius:calc(var(--u) * 12);background:#fff;box-shadow:0 30px 60px -30px rgba(48,48,48,.45);overflow:hidden}
.ma-hero__top{display:flex;align-items:center;gap:calc(var(--u) * 10);height:calc(var(--u) * 34);padding:0 calc(var(--u) * 14);border-bottom:1px solid #e3e3e3;background:linear-gradient(180deg,#f3f3f3,#e8e8e8)}
.ma-hero__top i{width:calc(var(--u) * 9);height:calc(var(--u) * 9);border-radius:50%;background:#d4d4d4}
.ma-hero__top span{margin:0 auto;padding:calc(var(--u) * 3) calc(var(--u) * 14);border:1px solid #dcdcdc;border-radius:999px;background:#fff;font-size:calc(var(--u) * 11);line-height:1.4;color:#6b6b6b}
.ma.ma--hero{position:relative;display:grid;grid-template-columns:calc(var(--u) * 84) minmax(0,1fr);height:calc(var(--u) * 330);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;color:#303030}
.ma--hero .mh-nav{display:flex;flex-direction:column;align-items:stretch;gap:calc(var(--u) * 2);padding:calc(var(--u) * 10) 0;background:#373330}
.ma--hero .mh-nav span{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u) * 4);padding:calc(var(--u) * 5) 0;font-size:calc(var(--u) * 9);color:#d6d3d0}
.ma--hero .mh-nav span::before{content:"";width:calc(var(--u) * 15);height:calc(var(--u) * 15);border-radius:calc(var(--u) * 3);background:#8a8580}
.ma--hero .mh-nav span.is-on{background:#4a4542;color:#fff;box-shadow:inset calc(var(--u) * 3) 0 0 #c2410c}
.ma--hero .mh-nav span.is-on::before{background:#f8a36b}
.ma--hero .mh-nav b{display:flex;align-items:center;justify-content:center;width:calc(var(--u) * 34);height:calc(var(--u) * 34);margin:0 auto calc(var(--u) * 8);border-radius:calc(var(--u) * 6);background:#c2410c;font-size:calc(var(--u) * 12);color:#fff}
.ma--hero .mh-main{display:flex;flex-direction:column;gap:calc(var(--u) * 10);min-width:0;min-height:0;overflow:hidden;padding:calc(var(--u) * 14) calc(var(--u) * 16);background:#f8f8f8}
.ma--hero .mh-hd{display:flex;align-items:center;gap:calc(var(--u) * 8)}
.ma--hero .mh-hd b{font-size:calc(var(--u) * 19);font-weight:600}
.ma--hero .mh-btn{margin-left:auto;padding:calc(var(--u) * 5) calc(var(--u) * 12);border-radius:calc(var(--u) * 2);background:#c2410c;font-size:calc(var(--u) * 10);font-weight:600;color:#fff}
.ma--hero .mh-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--u) * 8)}
.ma--hero .mh-kpi{padding:calc(var(--u) * 9) calc(var(--u) * 10);border:1px solid #e3e3e3;background:#fff;font-size:calc(var(--u) * 9.5);color:#6b6b6b}
.ma--hero .mh-kpi i{display:block;width:62%;height:calc(var(--u) * 9);margin-top:calc(var(--u) * 7);border-radius:calc(var(--u) * 2);background:#e3e3e3}
.ma--hero .mh-kpi em{float:right;font-style:normal;font-weight:700;color:#1d7a30}
.ma--hero .mh-row{display:grid;grid-template-columns:1.25fr 1fr;gap:calc(var(--u) * 10);min-height:0;flex:1}
.ma--hero .mh-card{min-width:0;padding:calc(var(--u) * 10) calc(var(--u) * 11);border:1px solid #e3e3e3;background:#fff}
.ma--hero .mh-card > b{display:block;margin-bottom:calc(var(--u) * 7);font-size:calc(var(--u) * 11);font-weight:600}
.ma--hero .mh-chart img{display:block;width:100%;height:auto}
.ma--hero .mh-order{display:flex;align-items:center;gap:calc(var(--u) * 7);padding:calc(var(--u) * 6) 0;border-top:1px solid #f1f1f1}
.ma--hero .mh-order i{flex:1;height:calc(var(--u) * 7);border-radius:calc(var(--u) * 2);background:#e9e9e9}
.ma--hero .mh-st{flex:none;padding:calc(var(--u) * 2) calc(var(--u) * 7);border-radius:999px;font-size:calc(var(--u) * 8.5);font-weight:600}
.ma--hero .mh-st--ok{background:#e6f8ea;color:#1d7a30}
.ma--hero .mh-st--run{background:#e5f0fa;color:#00699d}
.ma--hero .mh-idx{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 6)}
.ma--hero .mh-idx span{display:inline-flex;align-items:center;gap:calc(var(--u) * 5);padding:calc(var(--u) * 4) calc(var(--u) * 8);border:1px solid #e3e3e3;border-radius:calc(var(--u) * 2);background:#fff;font-size:calc(var(--u) * 9.5)}
.ma--hero .mh-idx span::before{content:"";width:calc(var(--u) * 7);height:calc(var(--u) * 7);border-radius:50%;background:#1d7a30}
/* two notes floating over the frame's edge: what the build delivers, not numbers */
.ma-hero__note{position:absolute;display:flex;align-items:center;gap:10px;padding:10px 14px;border:1px solid #edf2ef;border-radius:14px;background:#fff;box-shadow:0 18px 40px -20px rgba(15,60,40,.35);font-size:13px;font-weight:600;color:#0f1f2e;white-space:nowrap}
.ma-hero__note i{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e9f8ef;color:#00965a}
.ma-hero__note--a{left:-18px;bottom:0}
.ma-hero__note--b{right:-14px;top:-20px}
@media (max-width:639px){.ma-hero{padding-bottom:0}.ma-hero__note{display:none}}