/* DevOps page only: How We Work drawn as a generic CI/CD pipeline tool (.dpp), on the technology page kit's step
   mechanics and 640 x 420 canvas (tech-page.css / tech-page.js), as the Google Cloud and AWS pages draw their consoles.
   DevOps is a practice, not one product, so this is no vendor's interface: no logo, no product colours, no real domain.
   Fills use indigo #4f46e5; text in indigo is #4338ca and text in green #15803d, both at least 4.5:1 on white. The menu
   item that matches the active step is lit with :has(). Loaded late (preload + onload), the section is below the fold. */
.hwj .dpp{position:absolute;inset:0;display:grid;grid-template-rows:34px minmax(0,1fr);background:#fff;color:#111827;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
/* Top bar: a plain ring mark, the project path, the branch, search and the account */
.dpp__bar{display:flex;align-items:center;gap:10px;padding:0 12px;background:#111827;color:#fff;font-size:10.5px}
.dpp__logo{position:relative;flex:none;width:20px;height:20px;border-radius:5px;background:#00B26B}
.dpp__logo::after{content:"";position:absolute;inset:5px;border:2px solid #04150D;border-right-color:transparent;border-radius:50%}
.dpp__repo{font-weight:600;white-space:nowrap}
.dpp__repo span{font-weight:400;color:#d1d5db}
.dpp__branch{display:inline-flex;align-items:center;gap:5px;flex:none;height:20px;padding:0 8px;border:1px solid #4b5563;border-radius:999px;font-size:9.5px;color:#e5e7eb;white-space:nowrap}
.dpp__branch::before{content:"";width:6px;height:6px;border:1.5px solid #d1d5db;border-radius:50%}
.dpp__search{display:flex;align-items:center;gap:7px;flex:1;min-width:0;height:22px;padding:0 9px;border:1px solid #4b5563;border-radius:6px;font-size:9.5px;color:#d1d5db;white-space:nowrap;overflow:hidden}
.dpp__search::before{content:"";flex:none;width:8px;height:8px;border:1.5px solid #d1d5db;border-radius:50%}
.dpp__me{display:flex;align-items:center;justify-content:center;flex:none;width:22px;height:22px;border-radius:50%;background:#00744a;font-size:10px;font-weight:600;color:#fff}
/* Side menu and content */
.dpp__body{display:grid;grid-template-columns:120px minmax(0,1fr);min-height:0}
.dpp__nav{display:flex;flex-direction:column;gap:1px;padding:8px 8px;border-right:1px solid #e5e7eb;background:#f9fafb;overflow:hidden}
.dpp__nav > span{display:flex;align-items:center;gap:8px;flex:none;height:23px;padding:0 8px;border-radius:6px;font-size:10.5px;color:#374151;white-space:nowrap;transition:background-color .3s,color .3s}
.dpp__nav > span::before{content:"";flex:none;width:10px;height:10px;border:1.5px solid #6b7280;border-radius:3px;transition:border-color .3s,background-color .3s}
.dpp__nav > small{display:block;flex:none;margin:7px 0 2px;padding-left:8px;font-size:8.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4b5563;white-space:nowrap}
.dpp:has(#hwj-s0.is-active) [data-nav="home"],
.dpp:has(#hwj-s1.is-active) [data-nav="plan"],
.dpp:has(#hwj-s2.is-active) [data-nav="infra"],
.dpp:has(#hwj-s3.is-active) [data-nav="pipe"],
.dpp:has(#hwj-s4.is-active) [data-nav="env"],
.dpp:has(#hwj-s5.is-active) [data-nav="mon"]{background:#eef2ff;font-weight:600;color:#3730a3}
.dpp:has(#hwj-s0.is-active) [data-nav="home"]::before,
.dpp:has(#hwj-s1.is-active) [data-nav="plan"]::before,
.dpp:has(#hwj-s2.is-active) [data-nav="infra"]::before,
.dpp:has(#hwj-s3.is-active) [data-nav="pipe"]::before,
.dpp:has(#hwj-s4.is-active) [data-nav="env"]::before,
.dpp:has(#hwj-s5.is-active) [data-nav="mon"]::before{border-color:#4f46e5;background:#4f46e5}
.dpp__main{position:relative;min-height:0;background:#fff}
.hwj .dpp .hwj__scene{padding:0}
/* Page header, tabs, then the page */
.dpp-hd{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-bottom:1px solid #e5e7eb}
.dpp-hd b{font-size:13.5px;font-weight:600;color:#111827;white-space:nowrap}
.dpp-hd small{font-size:10.5px;color:#4b5563;white-space:nowrap}
.dpp-hd > small + *,.dpp-hd > b + :not(small){margin-left:auto}
.dpp-tabs{display:flex;gap:2px;height:26px;padding:0 10px;border-bottom:1px solid #e5e7eb}
.dpp-tabs span{display:flex;align-items:center;padding:0 9px;border-bottom:2px solid transparent;font-size:10px;font-weight:500;color:#4b5563}
.dpp-tabs span.is-on{border-bottom-color:#4f46e5;color:#4338ca}
.dpp-pg{padding:10px 12px}
/* Tool parts */
.dpp-card{border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.dpp-t{display:block;font-size:11.5px;font-weight:600;color:#111827}
.dpp-s{display:block;font-size:10px;color:#4b5563}
.dpp-link{font-size:10px;font-weight:500;color:#4338ca}
.dpp-btn{display:inline-flex;align-items:center;height:22px;padding:0 11px;border-radius:6px;background:#4f46e5;font-size:10px;font-weight:600;color:#fff;white-space:nowrap}
.dpp-tbtn{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;border:1px solid #d1d5db;border-radius:6px;font-size:10px;font-weight:500;color:#374151;white-space:nowrap}
.dpp-tbtn::before{content:"";width:0;height:0;border:4px solid transparent;border-left:6px solid #374151;border-right:0}
.dpp-chip{display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 7px;border-radius:999px;background:#f3f4f6;font-size:9.5px;font-weight:500;color:#374151;white-space:nowrap}
.dpp-chip--ok{background:#dcfce7;color:#166534}
.dpp-chip--ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a}
.dpp-chip--info{background:#eef2ff;color:#3730a3}
.dpp-chip--warn{background:#fef3c7;color:#92400e}
.dpp-th{display:grid;align-items:center;height:24px;padding:0 10px;border-bottom:1px solid #e5e7eb;font-size:9.5px;font-weight:600;color:#4b5563}
.dpp-ck{position:relative;flex:none;width:18px;height:18px}
.dpp-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #d1d5db;border-radius:50%}
.dpp-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#16a34a;color:#fff;transform:scale(0)}
.hwj .dpp-ck .i,.hwj .dpp-ok .i{width:10px;height:10px}
.hwj .is-active .dpp-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
/* A status that spins, then turns green: the step's --d sets when */
.dpp-st{position:relative;flex:none;width:16px;height:16px}
.dpp-spin{position:absolute;inset:1px;border:2px solid #e5e7eb;border-top-color:#4f46e5;border-radius:50%;animation:hwjSpin .8s linear infinite}
.dpp-ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#16a34a;color:#fff;transform:scale(0)}
.hwj .is-active .dpp-spin{animation:hwjSpin .8s linear infinite,hwjOut .2s ease calc(var(--d,0) * 420ms + 600ms) forwards}
.hwj .is-active .dpp-ok{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 420ms + 620ms) forwards}
/* generic marks: a tinted rounded square with a plain shape, never a product icon */
.dpp-ic{position:relative;flex:none;width:16px;height:16px;border-radius:4px;background:#eef2ff}
.dpp-ic::after{content:"";position:absolute;inset:4px;border:1.5px solid #4f46e5;border-radius:2px}
.dpp-ic--box::after{inset:4px 3px;border-radius:1px}
.dpp-ic--test::after{inset:4px 5px;border-width:0 1.5px 1.5px 0;border-radius:0;transform:rotate(40deg) translate(-1px,-1px)}
.dpp-ic--go::after{inset:5px 4px 5px 6px;border:0;border-left:6px solid #4f46e5;border-top:3px solid transparent;border-bottom:3px solid transparent;border-radius:0}
.dpp-ic--live::after{inset:5px;border:0;border-radius:50%;background:#16a34a}
.dpp-ic--live{background:#dcfce7}
.dpp-ic--git::after{inset:4px 6px;border-width:0 0 0 1.5px;border-radius:0}
.dpp-ic--user{background:#f3f4f6}
.dpp-ic--user::after{inset:3px 5px 7px;border-color:#4b5563;border-radius:50%}
@keyframes dppGrow{to{transform:scaleX(1)}}

/* 1. Discovery call: the project overview, a brief filled in from the call */
.dpp0{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;align-items:start}
.dpp0__brief{padding:11px 13px}
.dpp0__bar{height:4px;margin:9px 0 2px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.dpp0__bar i{display:block;width:100%;height:100%;background:#4f46e5;transform:scaleX(0);transform-origin:left}
.hwj .is-active .dpp0__bar i{animation:dppGrow 1.9s ease-out .9s forwards}
.dpp0__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f3f4f6}
.dpp0__row:first-of-type{margin-top:8px}
.dpp0__row div{flex:1}
.dpp0__row .sk{height:6px;margin-top:6px;background:#e5e7eb}
.dpp0__row--goal .dpp-t{color:#15803d}
.dpp0__side{display:flex;flex-direction:column;gap:10px}
.dpp0__info{padding:11px 12px}
.dpp0__info dl,.dpp4__env dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:9px 0 0;font-size:10px}
.dpp0__info dt,.dpp4__env dt{color:#4b5563}
.dpp0__info dd,.dpp4__env dd{margin:0;font-weight:500;color:#111827;text-align:right}
.dpp0__info .dpp-link{display:block;margin-top:10px;padding-top:8px;border-top:1px solid #f3f4f6}
.dpp0__call{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px}
.dpp0__avs{display:flex}
.dpp0__avs span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-7px;border:2px solid #fff;border-radius:50%;background:#e5e7eb;font-size:9px;font-weight:600;color:#374151}
.dpp0__avs span:first-child{margin-left:0}
.dpp0__avs span:last-child{background:#00B26B;color:#04150D}

/* 2. Plan and scope: deploys by hand replaced by a pipeline on every merge, then the stages planned */
.dpp1{display:grid;grid-template-columns:1fr 1.1fr;gap:10px;align-items:start}
.dpp1__how{padding:11px 12px}
.dpp1__opt{display:flex;align-items:center;gap:9px;margin-top:8px;padding:9px 10px;border:1px solid #e5e7eb;border-radius:6px}
.dpp1__opt div{flex:1}
.dpp1__radio{position:relative;flex:none;width:14px;height:14px;border:1.5px solid #4b5563;border-radius:50%}
.dpp1__radio::after{content:"";position:absolute;inset:2.5px;border-radius:50%;background:#4f46e5;transform:scale(0)}
.hwj .is-active .dpp1__pick{animation:hwjIn .55s var(--ease) 390ms both,dppPick .35s ease 1.5s forwards}
.hwj .is-active .dpp1__pick .dpp1__radio{animation:dppRadio .35s ease 1.5s forwards}
.hwj .is-active .dpp1__pick .dpp1__radio::after{animation:hwjPop .3s var(--ease) 1.6s forwards}
@keyframes dppPick{to{border-color:#4f46e5;background:#f8f9ff;box-shadow:0 0 0 1px #4f46e5}}
@keyframes dppRadio{to{border-color:#4f46e5}}
.dpp1__chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.dpp1__stages{overflow:hidden}
.dpp1__stages .dpp-th{grid-template-columns:1fr auto}
.dpp1__row{display:grid;grid-template-columns:16px 92px minmax(0,1fr);align-items:center;gap:8px;height:34px;padding:0 10px;border-bottom:1px solid #f3f4f6}
.dpp1__name{font-size:10.5px;font-weight:500;white-space:nowrap}
.dpp1__track{height:6px;border-radius:999px;background:#e5e7eb;overflow:hidden}
.dpp1__track i{display:block;width:var(--w,50%);height:100%;border-radius:inherit;background:#4f46e5;transform:scaleX(0);transform-origin:left}
.hwj .is-active .dpp1__track i{animation:dppGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.dpp1__total{display:flex;align-items:center;gap:8px;padding:10px;font-size:10.5px;font-weight:500}
.dpp1__total .sk{flex:1;height:7px;background:#e5e7eb}

/* 3. Architecture: repository to pipeline to image registry to staging and production, with the Terraform beside it */
.dpp2{display:grid;grid-template-columns:minmax(0,1fr) 168px;gap:10px;height:calc(100% - 62px)}
.dpp2__map{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px;background:#f9fafb;background-image:radial-gradient(#e5e7eb 1px,transparent 1.2px);background-size:14px 14px}
.dpp2__node{display:flex;align-items:center;gap:7px;width:128px;height:30px;padding:0 9px;border:1px solid #d1d5db;border-radius:6px;background:#fff;box-shadow:0 1px 2px rgba(17,24,39,.12);font-size:10.5px;font-weight:500;white-space:nowrap}
.dpp2__node--key{border-color:#4f46e5;box-shadow:0 0 0 1px #4f46e5}
.dpp2__ln{display:block;width:1.5px;height:14px;background:#6b7280}
.dpp2__fork{position:relative;display:block;width:146px;height:13px;border:1.5px solid #6b7280;border-bottom:0;border-radius:4px 4px 0 0}
.dpp2__fork::before{content:"";position:absolute;left:50%;top:-9px;width:1.5px;height:8px;background:#6b7280}
.dpp2__pair{display:flex;gap:18px}
.dpp2__code{padding:10px 12px;border-radius:8px;background:#1f2937;overflow:hidden}
.dpp2__file{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding-bottom:7px;border-bottom:1px solid rgba(255,255,255,.12)}
.dpp2__file b{font-size:10.5px;font-weight:500;color:#fff}
.dpp2__file span{font-size:9px;color:#d1d5db}
.dpp2__code .s3__ln{height:6px;margin-bottom:10px}

/* 4. Build on staging: the pipeline graph (test, build, deploy to staging), each job turning green in turn, and its log */
.dpp3{position:relative;display:flex;flex-direction:column;gap:10px;height:calc(100% - 36px)}
.dpp3__run{display:flex;align-items:center;gap:8px;font-size:10px;color:#4b5563}
.dpp3__run b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:500;color:#4338ca}
.dpp3__graph{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;padding:10px 12px;background:#f9fafb}
.dpp3__stage{position:relative;display:flex;flex-direction:column;gap:6px}
.dpp3__stage + .dpp3__stage::before{content:"";position:absolute;left:-22px;top:33px;width:22px;height:1.5px;background:#9ca3af}
.dpp3__stage > small{font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#4b5563}
.dpp3__job{display:flex;align-items:center;gap:7px;height:26px;padding:0 8px;border:1px solid #d1d5db;border-radius:999px;background:#fff;font-size:10px;font-weight:500;white-space:nowrap}
.dpp3__log{flex:1;min-height:0;padding:9px 12px;border-radius:8px;background:#1f2937;overflow:hidden}
.dpp3__lh{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.12);font-size:10px;color:#d1d5db}
.dpp3__lh b{font-weight:500;color:#fff}
.dpp3__log .s3__ln{height:6px;margin-bottom:9px}
.dpp3 .s3__msg{max-width:210px;font-size:11.5px;line-height:16px;padding:8px 12px}
.dpp3 .s3__msg--you{right:24px;bottom:62px}
.dpp3 .s3__msg--us{right:44px;bottom:16px}
.dpp3 .s3__msg--us .i{color:#16a34a}

/* 5. Tests and launch: the release checks pass, then the staging build is promoted to production */
.dpp4{display:grid;grid-template-columns:1.05fr 1fr;gap:10px;align-items:start}
.dpp4__checks{padding:10px 12px 4px}
.dpp4__checks .dpp-t{margin-bottom:5px}
.dpp4__row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 0;border-top:1px solid #f3f4f6;font-size:10.5px;color:#374151;white-space:nowrap}
.dpp4__envs{display:flex;flex-direction:column;gap:10px}
.dpp4__env{padding:10px 12px}
.dpp4__eh{display:flex;align-items:center;justify-content:space-between;gap:6px}
.dpp4__env dd code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px}
.dpp4__swap{position:relative;display:inline-block;width:52px;height:12px;vertical-align:middle}
.dpp4__swap > *{position:absolute;right:0;top:0}
.dpp4__new{opacity:0}
.hwj .is-active .dpp4__old{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .dpp4__new{animation:hwjIn .4s var(--ease) 2.6s both}
.dpp4__pub{position:relative;height:22px;margin-top:10px}
.dpp4__pub > *{position:absolute;left:0;top:0}
.dpp4__live{top:2px;opacity:0}
.hwj .is-active .dpp4__btn{animation:hwjOut .25s ease 2.4s forwards}
.hwj .is-active .dpp4__live{animation:hwjIn .4s var(--ease) 2.7s both}
.dpp4__note{display:block;margin-top:8px;font-size:9.5px;line-height:13px;color:#4b5563}

/* 6. Run and grow: response time and errors after launch, the alert rules and the backups */
.dpp-range{display:flex;border:1px solid #d1d5db;border-radius:6px;overflow:hidden}
.dpp-range span{padding:2px 7px;border-left:1px solid #d1d5db;font-size:9.5px;font-weight:500;color:#4b5563}
.dpp-range span:first-child{border-left:0}
.dpp-range span.is-on{background:#eef2ff;color:#3730a3}
.dpp5{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:10px;height:calc(100% - 36px)}
.dpp5__chart{display:flex;flex-direction:column;padding:10px 12px;min-height:0}
.dpp5__ch{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:6px}
.dpp5__plot{position:relative;flex:1;min-height:0;background-image:linear-gradient(#f3f4f6 1px,transparent 1px);background-size:100% 25%;border-bottom:1px solid #e5e7eb}
.dpp5__plot svg{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 100% 0 0)}
.hwj .is-active .dpp5__plot svg{animation:hwjDraw 1.6s ease-out .5s forwards}
.dpp5__line{fill:none;stroke:#4f46e5;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.dpp5__line--err{stroke:#0d9488}
.dpp5__area{fill:rgba(79,70,229,.1)}
.dpp5__alerts{grid-column:1/-1;overflow:hidden}
.dpp5__alerts .dpp-th,.dpp5__rule{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 70px}
.dpp5__rule{display:grid;align-items:center;height:26px;padding:0 10px;border-bottom:1px solid #f3f4f6;font-size:10px;color:#374151}
.dpp5__rule:last-child{border-bottom:0}
.dpp5__rule b{font-weight:500;color:#111827}
.dpp5__keep{grid-column:1/-1;display:flex;gap:7px}
.dpp5__keep span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #e5e7eb;border-radius:999px;font-size:10px;font-weight:500;color:#374151}
.dpp5__keep span::before{content:"";width:6px;height:6px;border-radius:50%;background:#16a34a}

/* Neutral browser bar, so the screen reads as the tool 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:#4b5563}
.hwj .hwj__status.is-live{background:#dcfce7;color:#166534}