/* Amazon AWS page only: the How We Work preview drawn as the AWS Management Console (.awc), on the technology page
   kit's step mechanics and 640 x 420 canvas (tech-page.css), as the Magento, BigCommerce and WooCommerce pages draw
   their own admin. Drawn entirely in CSS with neutral shapes: no AWS or Amazon logo, smile or service icons (Simple
   Icons removed the Amazon marks in v15), service names as plain text only. The console's colours: navy top bar
   (#232f3e), grey content area, white panels, orange primary buttons with dark text (#ff9900 on #0f1b2a), blue links
   (#0972d3), green/red status text darkened to 4.5:1. The sidebar item for the active step is lit with :has(), so it
   needs no script. Per-element delays use the .dN classes from tech-page-base.css (no inline styles, UD-057). */
.hwj .awc{position:absolute;inset:0;display:grid;grid-template-rows:32px minmax(0,1fr);background:#f2f3f3;color:#000716;font-family:"Helvetica Neue",Roboto,Arial,sans-serif;font-size:10px;line-height:1.3}
.hwj .awc .hwj__scene{padding:0}
/* Top bar: services menu, search, region and account */
.awc__bar{display:flex;align-items:center;gap:10px;padding:0 10px;background:#232f3e;color:#fff;font-size:10px;white-space:nowrap}
.awc__svc{display:flex;align-items:center;gap:6px;font-weight:700}
.awc__svc::before{content:"";width:11px;height:11px;background:radial-gradient(circle,#fff 1.1px,transparent 1.4px) 0 0/3.67px 3.67px}
.awc__search{display:flex;align-items:center;gap:6px;flex:1;max-width:230px;height:20px;padding:0 8px;border:1px solid #687078;border-radius:6px;background:#0f1b2a;color:#b6bec9}
.awc__search::before{content:"";flex:none;width:7px;height:7px;border:1.5px solid #b6bec9;border-radius:50%}
.awc__search em{margin-left:auto;font-style:normal;font-size:9px;color:#8d99a8}
.awc__ico{flex:none;width:11px;height:11px;margin-left:auto;border:1.5px solid #d1d5db;border-radius:50%}
.awc__ico + .awc__ico{margin-left:0;border-radius:3px}
.awc__region,.awc__acct{display:flex;align-items:center;gap:4px;font-weight:700}
.awc__region::after,.awc__acct::after{content:"";width:4px;height:4px;margin-top:-2px;border:solid #fff;border-width:0 1.3px 1.3px 0;transform:rotate(45deg)}
/* Body: services sidebar and the grey content area */
.awc__body{display:grid;grid-template-columns:126px minmax(0,1fr);min-height:0}
.awc__nav{display:flex;flex-direction:column;padding:8px 0;border-right:1px solid #e9ebed;background:#fff}
.awc__nav small{display:block;padding:0 12px 5px;font-size:9px;font-weight:700;letter-spacing:.02em;color:#5f6b7a}
.awc__nav span{display:flex;align-items:center;height:21px;padding:0 12px;font-size:10px;color:#414d5c;white-space:nowrap;transition:background-color .3s,color .3s,box-shadow .3s}
.awc__nav hr{height:1px;margin:5px 12px;border:0;background:#e9ebed}
/* the lit item: bold blue with a blue edge, as the console marks the current page */
.awc:has(#hwj-s0.is-active) [data-nav="home"],
.awc:has(#hwj-s1.is-active) [data-nav="vpc"],
.awc:has(#hwj-s2.is-active) [data-nav="ec2"],
.awc:has(#hwj-s3.is-active) [data-nav="pipeline"],
.awc:has(#hwj-s4.is-active) [data-nav="acm"],
.awc:has(#hwj-s4.is-active) [data-nav="dns"],
.awc:has(#hwj-s5.is-active) [data-nav="watch"],
.awc:has(#hwj-s5.is-active) [data-nav="billing"]{background:#f2f8fd;font-weight:700;color:#0972d3;box-shadow:inset 3px 0 0 #0972d3}
.awc__main{position:relative;min-height:0}
/* Breadcrumbs, page header, page body */
.awc-crumb{display:flex;align-items:center;height:24px;padding:0 14px;font-size:9.5px;color:#5f6b7a;white-space:nowrap}
.awc-crumb span:not(:last-child){color:#0864c2}
.awc-crumb span:not(:last-child)::after{content:"";display:inline-block;width:4px;height:4px;margin:0 7px 1px 5px;border:solid #5f6b7a;border-width:1.2px 1.2px 0 0;transform:rotate(45deg)}
.awc-hd{display:flex;align-items:center;gap:8px;height:28px;padding:0 14px}
.awc-hd b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#000716}
.awc-hd small{font-size:10px;color:#5f6b7a}
.awc-hd__r{display:flex;align-items:center;gap:6px;margin-left:auto}
.awc-pg{height:calc(100% - 52px);padding:6px 14px 12px}
/* Console parts */
.awc-panel{border:1px solid #d1d5db;border-radius:8px;background:#fff;box-shadow:0 1px 1px rgba(0,28,36,.12)}
.awc-ph{display:flex;align-items:center;gap:6px;padding:8px 10px 0;font-size:11px;font-weight:700;color:#000716}
.awc-ph small{font-size:9.5px;font-weight:400;color:#5f6b7a}
.awc-ph .awc-st,.awc-ph .awc-sw,.awc-ph .awc-link{margin-left:auto}
.awc-ps{display:block;padding:1px 10px 0;font-size:9.5px;color:#5f6b7a}
.awc-btn{display:inline-flex;align-items:center;height:21px;padding:0 11px;border:1.5px solid #ff9900;border-radius:999px;background:#ff9900;font-size:10px;font-weight:700;color:#0f1b2a;white-space:nowrap}
.awc-btn--sec{border-color:#0972d3;background:#fff;color:#0972d3}
.awc-link{color:#0972d3;font-weight:700}
.awc-badge{display:inline-flex;align-items:center;height:16px;padding:0 7px;border-radius:999px;background:#e9ebed;font-size:9px;font-weight:700;color:#414d5c;white-space:nowrap}
.awc-badge--info{background:#f2f8fd;color:#0560b5;box-shadow:inset 0 0 0 1px #b5d6f4}
.awc-badge--prod{background:#f2fcf3;color:#037f0c}
/* Status indicators: a filled circle with a tick (green), a circle with a bar (red), a turning ring (pending) */
.awc-st{position:relative;display:inline-flex;align-items:center;padding-left:13px;font-size:10px;font-weight:700;white-space:nowrap}
.awc-st::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:currentColor}
.awc-st--ok{color:#037f0c}
.awc-st--ok::after{content:"";position:absolute;left:3.2px;top:50%;width:2px;height:4.5px;margin-top:-3.6px;border:solid #fff;border-width:0 1.4px 1.4px 0;transform:rotate(45deg)}
.awc-st--err{color:#d91515}
.awc-st--err::after{content:"";position:absolute;left:4px;top:50%;width:1.4px;height:5px;margin-top:-2.5px;background:#fff}
.awc-st--pend{color:#5f6b7a;font-weight:400}
.awc-st--pend::before{box-sizing:border-box;background:none;border:1.5px solid #8d99a8;border-top-color:transparent;animation:hwjSpin .8s linear infinite}
/* a status that changes: the first child gives way to the second, step by step (--d from the .dN class) */
.awc-sw{position:relative;display:inline-grid}
.awc-sw > *{grid-area:1/1}
.awc-sw > :last-child{opacity:0}
.hwj .is-active .awc-sw > :first-child{animation:hwjOut .2s ease calc(var(--d,0) * 450ms + 700ms) forwards}
.hwj .is-active .awc-sw > :last-child{animation:awcShow .3s ease calc(var(--d,0) * 450ms + 750ms) forwards}
@keyframes awcShow{to{opacity:1}}
/* A neutral service tile: a coloured rounded square, the colour by kind of service, never a service icon */
.awc-sq{flex:none;width:14px;height:14px;border-radius:3px;background:#8d99a8}
.awc-sq--cmp{background:#ed7100}
.awc-sq--db{background:#c925d1}
.awc-sq--st{background:#7aa116}
.awc-sq--net{background:#8c4fff}
.awc-sq--mon{background:#e7157b}
.awc-ck{position:relative;flex:none;width:16px;height:16px}
.awc-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #b6bec9;border-radius:50%}
.awc-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#037f0c;color:#fff;transform:scale(0)}
.hwj .awc-ck .i{width:9px;height:9px}
.hwj .is-active .awc-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes awcGrow{to{transform:scaleX(1)}}

/* 1. Discovery call: Console Home, a project brief beside recently visited services and cost */
.awc0{display:grid;grid-template-columns:1.25fr 1fr;gap:10px;align-items:start}
.awc0__brief{padding-bottom:10px}
.awc0__bar{height:5px;margin:8px 10px 2px;border-radius:999px;background:#e9ebed;overflow:hidden}
.awc0__bar i{display:block;width:100%;height:100%;background:#0972d3;transform:scaleX(0);transform-origin:left}
.hwj .is-active .awc0__bar i{animation:awcGrow 1.9s ease-out .9s forwards}
.awc0__row{display:flex;align-items:center;gap:9px;margin:0 10px;padding:8px 0;border-top:1px solid #f2f3f3}
.awc0__bar + .awc0__row{margin-top:6px;border-top:0}
.awc0__row div{flex:1}
.awc0__row b{display:block;font-size:10.5px;font-weight:700}
.awc0__row .sk{height:5px;margin-top:5px;background:#e9ebed}
.awc0__foot{display:flex;align-items:center;gap:8px;margin:4px 10px 0;padding-top:8px;border-top:1px solid #e9ebed}
.awc0__avs{display:flex}
.awc0__avs span{display:flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:-5px;border:2px solid #fff;border-radius:50%;background:#e9ebed;font-size:7.5px;font-weight:700}
.awc0__avs span:first-child{margin-left:0}
.awc0__avs span:last-child{background:#00B26B;color:#04150D}
.awc0__foot .awc-st{margin-left:auto}
.awc0__side{display:flex;flex-direction:column;gap:10px}
.awc0__svc{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:8px 10px 10px}
.awc0__svc span{display:flex;align-items:center;gap:6px;height:22px;font-weight:700;color:#0972d3}
.awc0__cost{padding-bottom:10px}
.awc0__amt{display:flex;align-items:end;gap:10px;padding:6px 10px 0}
.awc0__amt div{flex:1}
.awc0__amt small{display:block;font-size:9px;color:#5f6b7a}
.awc0__amt .sk{width:70%;height:10px;margin-top:4px;background:#d1d5db}
.awc0__bars{display:flex;align-items:end;gap:5px;height:44px;margin:8px 10px 0;border-bottom:1px solid #d1d5db}
.awc0__bars i{flex:1;border-radius:2px 2px 0 0;background:#688ae8;transform:scaleY(0);transform-origin:bottom}
.awc0__bars i:nth-child(1){height:70%}.awc0__bars i:nth-child(2){height:82%}.awc0__bars i:nth-child(3){height:76%}
.awc0__bars i:nth-child(4){height:90%}.awc0__bars i:nth-child(5){height:86%}.awc0__bars i:nth-child(6){height:60%;background:#b5c5f2}
.hwj .is-active .awc0__bars i{animation:awcRise .6s var(--ease) calc(var(--d,0) * 90ms + 900ms) forwards}
@keyframes awcRise{to{transform:scaleY(1)}}

/* 2. Plan the architecture: a resource map, the region holding the VPC (public and private subnets) and storage */
.awc1{padding:8px 10px 10px}
.awc1__users{display:flex;flex-direction:column;align-items:center}
.awc1__users span{padding:3px 10px;border:1px solid #d1d5db;border-radius:999px;background:#fff;font-size:9.5px;font-weight:700}
.awc1__users i{width:1.5px;height:10px;background:#8d99a8}
.awc1__region{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:9px;padding:18px 9px 9px;border:1.5px dashed #8d99a8;border-radius:6px}
.awc1__lbl{position:absolute;left:8px;top:4px;font-size:9px;font-weight:700;color:#414d5c}
.awc1__vpc{position:relative;padding:17px 8px 8px;border:1.5px solid #8c4fff;border-radius:4px}
.awc1__vpc > .awc1__lbl{color:#6b40c4}
.awc1__sub{position:relative;display:flex;gap:6px;padding:17px 7px 7px;border:1px solid #b3e2b8;border-radius:4px;background:#f2fcf3}
.awc1__sub > .awc1__lbl{left:7px;top:3px;color:#037f0c}
.awc1__sub--priv{border-color:#b5d6f4;background:#f2f8fd}
.awc1__sub--priv > .awc1__lbl{color:#0560b5}
.awc1__link{display:block;width:1.5px;height:12px;margin:0 auto;background:#8d99a8}
.awc1__side{display:flex;flex-direction:column;justify-content:center;gap:7px}
.awc-node{display:flex;align-items:center;gap:6px;flex:1;min-width:0;padding:5px 6px;border:1px solid #d1d5db;border-radius:4px;background:#fff}
.awc-node div{min-width:0}
.awc-node b{display:block;font-size:9.5px;font-weight:700;white-space:nowrap}
.awc-node small{display:block;font-size:8.5px;color:#5f6b7a;white-space:nowrap}
.awc1__side .awc-node{flex:none}
.awc1__foot{display:flex;align-items:center;gap:10px;margin-top:10px}
.awc1__seg{display:flex;padding:2px;border:1px solid #d1d5db;border-radius:999px}
.awc1__seg span{padding:3px 9px;border-radius:999px;font-size:9.5px;font-weight:700;color:#414d5c}
.awc1__seg span:last-child{color:#414d5c}
.hwj .is-active .awc1__seg span:last-child{animation:awcSel .35s ease 1.6s forwards}
@keyframes awcSel{to{background:#0972d3;color:#fff}}
.awc1__foot .awc-sw{margin-left:auto}

/* 3. Set up environments: EC2 Instances, staging and production coming up Running, then environments and access */
.awc2{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.awc2__tbl{padding-bottom:4px}
.awc2__find{display:flex;align-items:center;gap:8px;padding:7px 10px}
.awc2__find span{display:flex;align-items:center;gap:6px;flex:1;height:20px;padding:0 8px;border:1px solid #8d99a8;border-radius:6px;font-size:9.5px;color:#5f6b7a}
.awc2__find span::before{content:"";width:7px;height:7px;border:1.5px solid #5f6b7a;border-radius:50%}
.awc2__find small{font-size:9.5px;color:#5f6b7a}
.awc2__tr{display:grid;grid-template-columns:12px 1.45fr 1fr .8fr .8fr .85fr;gap:8px;align-items:center;height:23px;margin:0 10px;border-top:1px solid #e9ebed;font-size:9.5px;white-space:nowrap}
.awc2__tr > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
.awc2__tr i{width:10px;height:10px;border:1.2px solid #8d99a8;border-radius:2px}
.awc2__th{height:20px;border-top:0;border-bottom:1px solid #d1d5db;font-weight:700;color:#414d5c}
.awc2__th + .awc2__tr{border-top:0}
.awc2__tr .awc-link{font-weight:400}
.awc2__low{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:start;min-height:0}
.awc2__low .awc-panel{padding-bottom:3px}
.awc2__row{display:flex;align-items:center;gap:7px;margin:0 10px;padding:8px 0;border-top:1px solid #f2f3f3;font-size:9.5px}
.awc-ph + .awc2__row{margin-top:5px;border-top:0}
.awc2__row b{font-weight:700}
.awc2__row small{color:#5f6b7a}
.awc2__row > :last-child{margin-left:auto}

/* 4. Build the pipeline: source, build and two deploy stages succeeding in turn, then the run history */
.awc3{display:grid;grid-template-rows:auto minmax(0,1fr);gap:10px}
.awc3__flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:10px}
.awc3__stage{position:relative;padding:7px 8px 8px;border:1px solid #d1d5db;border-top:3px solid #8d99a8;border-radius:6px;background:#fafafa}
.hwj .is-active .awc3__stage{animation:awcDone .3s ease calc(var(--d,0) * 450ms + 750ms) forwards}
@keyframes awcDone{to{border-top-color:#037f0c}}
.awc3__stage:not(:last-child)::after{content:"";position:absolute;right:-13px;top:50%;width:8px;height:8px;margin-top:-4px;border:solid #5f6b7a;border-width:1.5px 1.5px 0 0;transform:rotate(45deg)}
.awc3__stage > b{display:block;font-size:10.5px;font-weight:700}
.awc3__stage .awc-sw{margin-top:4px}
.awc3__act{margin-top:7px;padding:6px 7px;border:1px solid #e9ebed;border-radius:4px;background:#fff}
.awc3__act b{display:block;font-size:9.5px;font-weight:700}
.awc3__act small{display:block;font-size:8.5px;color:#5f6b7a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.awc3__act .awc-link{display:block;margin-top:4px;font-size:9px}
.awc3__hist{padding-bottom:4px}
.awc3__tr{display:grid;grid-template-columns:1.1fr 1fr 1.2fr 1fr;gap:10px;align-items:center;height:25px;margin:0 10px;border-top:1px solid #e9ebed;font-size:9.5px;white-space:nowrap}
.awc3__tr > *{min-width:0;overflow:hidden;text-overflow:ellipsis}
.awc3__th{height:22px;margin-top:4px;border-top:0;border-bottom:1px solid #d1d5db;font-weight:700;color:#414d5c}
.awc3__th + .awc3__tr{border-top:0}
.awc3__tr .sk{width:80%;height:5px;background:#e9ebed}
.awc3__tr .awc-link{font-weight:400}

/* 5. Test and switch over: checks pass, the certificate is issued, then the DNS record moves to AWS */
.awc4{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:start}
.awc4__checks{padding-bottom:6px}
.awc4__row{display:flex;align-items:center;justify-content:space-between;margin:0 10px;padding:8px 0;border-top:1px solid #f2f3f3;font-size:10.5px}
.awc-ph + .awc4__row{margin-top:5px;border-top:0}
.awc4__side{display:flex;flex-direction:column;gap:10px}
.awc4__kv{display:grid;grid-template-columns:62px minmax(0,1fr);gap:5px 8px;padding:7px 10px 9px;font-size:9.5px}
.awc4__kv dt{color:#5f6b7a}
.awc4__kv dd{margin:0;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.awc4__kv dd .awc-sw{font-weight:700}
.awc4__old{color:#5f6b7a;text-decoration:line-through}
.awc4__act{display:flex;align-items:center;gap:8px;padding:0 10px 9px}
.awc4__act .awc-sw{margin-left:auto}
.awc4__note{display:block;padding:0 10px 9px;font-size:9px;line-height:13px;color:#5f6b7a}

/* 6. Monitor and tune cost: CloudWatch graphs, alarms back to OK, and the monthly bill coming down */
.awc5{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:10px}
.awc5 .awc-panel{position:relative;display:flex;flex-direction:column;min-height:0}
.awc5__plot{position:relative;flex:1;margin:6px 10px 9px;border-bottom:1px solid #d1d5db;background:repeating-linear-gradient(180deg,#e9ebed 0 1px,transparent 1px 25%);clip-path:inset(0 100% 0 0)}
.hwj .is-active .awc5__plot{animation:awcDraw 1.6s ease-out .5s forwards}
@keyframes awcDraw{to{clip-path:inset(0 0 0 0)}}
.awc5__plot i{position:absolute;inset:0}
.awc5__plot i:first-child{background:#0972d3;clip-path:polygon(0 62%,8% 55%,16% 60%,24% 40%,32% 48%,40% 35%,48% 52%,56% 30%,64% 44%,72% 38%,80% 50%,88% 42%,100% 46%,100% 100%,0 100%)}
.awc5__plot i:last-child{top:2px;background:#e2effb;clip-path:polygon(0 62%,8% 55%,16% 60%,24% 40%,32% 48%,40% 35%,48% 52%,56% 30%,64% 44%,72% 38%,80% 50%,88% 42%,100% 46%,100% 100%,0 100%)}
.awc5__plot--req i:first-child{background:#e07000;clip-path:polygon(0 70%,10% 64%,20% 66%,30% 52%,40% 56%,50% 40%,60% 46%,70% 30%,80% 36%,90% 22%,100% 26%,100% 100%,0 100%)}
.awc5__plot--req i:last-child{background:#fdecdc;clip-path:polygon(0 70%,10% 64%,20% 66%,30% 52%,40% 56%,50% 40%,60% 46%,70% 30%,80% 36%,90% 22%,100% 26%,100% 100%,0 100%)}
.awc5__row{display:flex;align-items:center;gap:8px;margin:0 10px;padding:6px 0;border-top:1px solid #f2f3f3;font-size:9.5px}
.awc-ph + .awc5__row{margin-top:4px;border-top:0}
.awc5__row > :last-child{margin-left:auto}
.awc5__bars{display:flex;align-items:end;gap:8px;flex:1;margin:6px 10px 0;border-bottom:1px solid #d1d5db}
.awc5__bars i{flex:1;border-radius:2px 2px 0 0;background:#688ae8;transform:scaleY(0);transform-origin:bottom}
.awc5__bars i:nth-child(1){height:92%}.awc5__bars i:nth-child(2){height:88%}.awc5__bars i:nth-child(3){height:74%}
.awc5__bars i:nth-child(4){height:66%}.awc5__bars i:nth-child(5){height:60%}.awc5__bars i:nth-child(6){height:56%}
.hwj .is-active .awc5__bars i{animation:awcRise .6s var(--ease) calc(var(--d,0) * 110ms + 900ms) forwards}
.awc5__legend{display:flex;align-items:center;gap:6px;padding:5px 10px 8px;font-size:9px;color:#5f6b7a}
.awc5__legend::before{content:"";width:8px;height:8px;border-radius:2px;background:#688ae8}
.awc5__legend .awc-st{margin-left:auto;font-size:9.5px}
.awc5__range{display:flex;border:1px solid #8d99a8;border-radius:6px;overflow:hidden}
.awc5__range span{padding:2px 7px;border-left:1px solid #d1d5db;font-size:9.5px;color:#414d5c}
.awc5__range span:first-child{border-left:0}
.awc5__range span.is-on{background:#0972d3;font-weight:700;color:#fff}

/* Neutral browser bar, so the screen reads as the console rather than the site's green */
.hwj .hwj__browser{border-color:#d1d5db}
.hwj .hwj__bar{background:linear-gradient(180deg,#f3f3f3,#e8e8e8);border-bottom:1px solid #d1d5db}
.hwj .hwj__url{background:#fff;border-color:#d1d5db;color:#414d5c}
.hwj .hwj__status{background:#e9ebed;color:#414d5c}
.hwj .hwj__status.is-live{background:#e8f5e9;color:#037f0c}