/* Squarespace page only: How We Work drawn as a Squarespace-style site editor (.sqe), on the technology page kit's step
   mechanics and 640 x 420 canvas (tech-page.css / tech-page.js), as the Google Cloud, Zapier and HubSpot pages draw their
   products. Generic shapes only: no Squarespace logo and no real Squarespace domain. The editor's clean black-and-white
   look: black text and buttons on white, greys for panels; muted text is #646464 (5.9:1 on white), green text #1e6b36
   and the selection blue #2251d6 both meet 4.5:1. The panel item that matches the active step is lit with :has(); in the
   build step the panel slides away and the page fills the frame, as it does when a page is opened for editing.
   Loaded late (preload + onload), the section is below the fold. */
.hwj .sqe{position:absolute;inset:0;display:grid;grid-template-rows:34px minmax(0,1fr);background:#fff;color:#111;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif}
/* Top bar: back arrow and site title, the desktop / mobile switch, then Edit (or Exit and Save while editing) */
.sqe__bar{display:flex;align-items:center;gap:9px;padding:0 10px 0 13px;border-bottom:1px solid #e2e2e2;font-size:10.5px}
.sqe__back{flex:none;width:7px;height:7px;margin-right:2px;border-left:1.6px solid #111;border-bottom:1.6px solid #111;transform:rotate(45deg)}
.sqe__site{font-size:11px;font-weight:700;white-space:nowrap}
.sqe__view{display:flex;gap:3px;margin:0 auto;padding:2px;border-radius:999px;background:#f2f2f2}
.sqe__view i{position:relative;width:24px;height:16px;border-radius:999px}
.sqe__view i::after{content:"";position:absolute;left:7.5px;top:4px;width:9px;height:7px;border:1.4px solid #646464;border-radius:1.5px}
.sqe__view i:last-child::after{left:9.5px;top:3px;width:5px;height:9px}
.sqe__view i.is-on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14)}
.sqe__view i.is-on::after{border-color:#111}
.sqe-btn{display:inline-flex;align-items:center;height:22px;padding:0 12px;border-radius:999px;background:#111;font-size:10px;font-weight:600;letter-spacing:.02em;color:#fff;white-space:nowrap}
.sqe-btn--line{background:#fff;color:#111;box-shadow:inset 0 0 0 1px #111}
.sqe__save{display:none;gap:6px}
.sqe:has(#hwj-s3.is-active) .sqe__edit{display:none}
.sqe:has(#hwj-s3.is-active) .sqe__save{display:flex}
.sqe__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}
/* Left panel and the area beside it; the panel slides away while a page is being edited */
.sqe__body{display:grid;grid-template-columns:132px minmax(0,1fr);min-height:0;transition:grid-template-columns .5s cubic-bezier(.2,.7,.2,1)}
.sqe:has(#hwj-s3.is-active) .sqe__body{grid-template-columns:0 minmax(0,1fr)}
.sqe__nav{display:flex;flex-direction:column;gap:1px;min-width:0;padding:10px 8px;border-right:1px solid #e2e2e2;background:#fff;overflow:hidden;white-space:nowrap}
.sqe__nav > span{display:flex;align-items:center;flex:none;height:25px;padding:0 9px;border-radius:5px;font-size:11.5px;font-weight:600;color:#111;transition:background-color .3s,box-shadow .3s}
.sqe__nav > span::after{content:"";margin-left:auto;width:4.5px;height:4.5px;border-top:1.4px solid #8a8a8a;border-right:1.4px solid #8a8a8a;transform:rotate(45deg)}
.sqe__nav > small{display:block;margin-top:auto;padding:8px 9px 0;border-top:1px solid #ececec;font-size:10px;color:#646464}
.sqe:has(#hwj-s0.is-active) [data-nav="home"],
.sqe:has(#hwj-s1.is-active) [data-nav="pages"],
.sqe:has(#hwj-s2.is-active) [data-nav="website"],
.sqe:has(#hwj-s3.is-active) [data-nav="website"],
.sqe:has(#hwj-s4.is-active) [data-nav="commerce"],
.sqe:has(#hwj-s5.is-active) [data-nav="analytics"]{background:#efefef;box-shadow:inset 2px 0 0 #111}
.sqe__main{position:relative;min-height:0;background:#fff}
.hwj .sqe .hwj__scene{padding:0}
/* Page header and shared parts */
.sqe-hd{display:flex;align-items:center;gap:8px;height:38px;padding:0 14px;border-bottom:1px solid #ececec}
.sqe-hd b{font-size:14.5px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.sqe-hd small{font-size:10.5px;color:#646464;white-space:nowrap}
.sqe-hd > small + *,.sqe-hd > b + :not(small){margin-left:auto}
.sqe-pg{padding:10px 12px}
.sqe-card{border:1px solid #e2e2e2;border-radius:6px;background:#fff}
.sqe-t{display:block;font-size:11.5px;font-weight:600;color:#111}
.sqe-s{display:block;font-size:10px;color:#646464}
.sqe-chip{display:inline-flex;align-items:center;gap:4px;height:17px;padding:0 8px;border-radius:999px;background:#f2f2f2;font-size:9.5px;font-weight:600;color:#333;white-space:nowrap}
.sqe-chip--ok{background:#e8f4ec;color:#1e6b36}
.sqe-chip--ok::before{content:"";width:6px;height:6px;border-radius:50%;background:#2a8a49}
.sqe-chip--dark{background:#111;color:#fff}
.sqe-ck{position:relative;flex:none;width:18px;height:18px}
.sqe-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #d6d6d6;border-radius:50%}
.sqe-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#111;color:#fff;transform:scale(0)}
.hwj .sqe-ck .i,.hwj .sqe4__ok .i,.hwj .sqe-msg .i{width:10px;height:10px}
.hwj .is-active .sqe-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 700ms) forwards}
@keyframes sqeGrow{to{transform:scaleX(1)}}
/* A small website drawn inside the editor: nav, hero, a row of images */
.sqe-site{border-radius:4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.1);overflow:hidden}
.sqe-site__nav{display:flex;align-items:center;justify-content:space-between;height:26px;padding:0 14px;border-bottom:1px solid #f0f0f0}
.sqe-site__logo{font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.sqe-site__links{display:flex;gap:9px}
.sqe-site__links i{width:22px;height:4px;border-radius:2px;background:#d6d6d6}
.sqe-site__hero{position:relative;padding:20px 16px 16px}
.sqe-site__h{position:relative;height:46px}
.sqe-site__h b{position:absolute;left:0;top:0;max-width:260px;font-size:19px;font-weight:700;line-height:1.15;letter-spacing:-.01em}
.sqe-site__hero .sk{max-width:230px;height:6px;margin-top:7px;background:#ececec}
.sqe-site__cta{display:inline-block;margin-top:12px;padding:6px 13px;border-radius:3px;background:#111;font-size:9px;font-weight:600;color:#fff}
.sqe-site__imgs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 16px 14px}
.sqe-site__imgs i{display:block;height:46px;border-radius:2px;background:linear-gradient(135deg,#ececec,#dcdcdc)}

/* 1. Discovery call: Home, a site brief filled in from the call */
.sqe0{display:grid;grid-template-columns:1.4fr 1fr;gap:10px;align-items:start}
.sqe0__brief{padding:11px 13px}
.sqe0__bar{height:4px;margin:9px 0 2px;border-radius:999px;background:#ececec;overflow:hidden}
.sqe0__bar i{display:block;width:100%;height:100%;background:#111;transform:scaleX(0);transform-origin:left}
.hwj .is-active .sqe0__bar i{animation:sqeGrow 1.9s ease-out .9s forwards}
.sqe0__row{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid #f2f2f2}
.sqe0__row:first-of-type{margin-top:8px}
.sqe0__row div{flex:1}
.sqe0__row .sk{height:6px;margin-top:6px;background:#ececec}
.sqe0__side{display:flex;flex-direction:column;gap:10px}
.sqe0__info{padding:11px 12px}
.sqe0__info dl{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;margin:9px 0 0;font-size:10px}
.sqe0__info dt{color:#646464}
.sqe0__info dd{margin:0;font-weight:600;text-align:right}
.sqe0__call{display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:11px 12px}
.sqe0__avs{display:flex}
.sqe0__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:#ececec;font-size:9px;font-weight:600;color:#333}
.sqe0__avs span:first-child{margin-left:0}
.sqe0__avs span:last-child{background:#00B26B;color:#04150D}

/* 2. Plan and scope: the Pages panel with the planned pages, and the scope ticked off */
.sqe1{display:grid;grid-template-columns:1.1fr 1fr;gap:10px;align-items:start}
.sqe1__tree{padding:6px 0 8px}
.sqe1__grp{display:block;padding:7px 12px 3px;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#646464}
.sqe1__pg{display:flex;align-items:center;gap:8px;height:24px;padding:0 12px;font-size:10.5px;font-weight:500}
.sqe1__pg::before{content:"";flex:none;width:8px;height:10px;border:1.4px solid #8a8a8a;border-radius:1.5px}
.sqe1__pg .sqe-chip{margin-left:auto}
.sqe1__scope{padding:11px 12px 4px}
.sqe1__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #f2f2f2;font-size:10.5px;color:#333}
.sqe1__row:first-of-type{margin-top:8px}
.sqe1__chips{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 9px}

/* 3. Design: site styles, the heading font and the accent colour picked and shown on the page */
.sqe2{display:grid;grid-template-columns:minmax(0,1fr) 178px;height:calc(100% - 38px)}
.sqe2__prev{padding:14px;background:#f4f4f4}
.sqe2 .sqe-site__h b + b{font-family:Georgia,"Times New Roman",serif;font-weight:400;opacity:0}
.hwj .is-active .sqe2 .sqe-site__h b:first-child{animation:hwjOut .35s ease 1.7s forwards}
.hwj .is-active .sqe2 .sqe-site__h b + b{animation:hwjIn .45s var(--ease) 1.8s both}
.hwj .is-active .sqe2 .sqe-site__cta{animation:sqeAccent .4s ease 2.9s forwards}
@keyframes sqeAccent{to{background:#a4482a}}
.sqe2__panel{padding:10px 12px;border-left:1px solid #e2e2e2;background:#fff;overflow:hidden}
.sqe2__lbl{display:block;margin:2px 0 6px;font-size:9px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:#646464}
.sqe2__lbl + .sqe2__font{margin-top:0}
.sqe2__font{display:flex;align-items:center;gap:9px;margin-bottom:6px;padding:6px 8px;border:1px solid #e2e2e2;border-radius:5px}
.sqe2__font em{flex:none;width:24px;font-size:18px;font-style:normal;line-height:1}
.sqe2__font--serif em{font-family:Georgia,"Times New Roman",serif}
.sqe2__font b{display:block;font-size:10.5px;font-weight:600}
.sqe2__font span{display:block;font-size:9.5px;color:#646464}
.hwj .is-active .sqe2__font--serif{animation:hwjIn .55s var(--ease) 270ms both,sqePick .3s ease 1.5s forwards}
@keyframes sqePick{to{border-color:#111;box-shadow:0 0 0 1px #111}}
.sqe2__pal{display:flex;gap:5px;margin:2px 0 10px}
.sqe2__pal i{flex:1;height:26px;border:1px solid rgba(0,0,0,.12);border-radius:4px}
.sqe2__pal i:nth-child(1){background:#fff}
.sqe2__pal i:nth-child(2){background:#f1ece4}
.sqe2__pal i:nth-child(3){background:#a4482a}
.sqe2__pal i:nth-child(4){background:#3a3a3a}
.sqe2__pal i:nth-child(5){background:#111}
.hwj .is-active .sqe2__pal i:nth-child(3){animation:sqeRing .3s ease 2.7s forwards}
@keyframes sqeRing{to{box-shadow:0 0 0 2px #fff,0 0 0 3.5px #111}}
.sqe2__themes{display:flex;flex-direction:column;gap:4px}
.sqe2__themes span{display:flex;align-items:center;gap:7px;height:20px;padding:0 7px;border-radius:4px;background:#f6f6f6;font-size:9.5px;font-weight:500}
.sqe2__themes span::before{content:"";width:10px;height:10px;border:1px solid rgba(0,0,0,.18);border-radius:50%;background:#fff}
.sqe2__themes span:nth-child(2)::before{background:#f1ece4}
.sqe2__themes span:nth-child(3)::before{background:#111}

/* 4. Build: the page open for editing, a section selected, the block picker open on the code block */
.sqe3{position:relative;height:100%;padding:12px 18px;background:#f4f4f4}
.sqe3 .sqe-site{position:relative;height:100%}
.sqe3__sec{position:relative}
.sqe3__sec .sqe-site__hero{padding-bottom:18px}
.sqe3__ov{position:absolute;inset:0;border:1.5px solid #2251d6;opacity:0}
.hwj .is-active .sqe3__ov{animation:hwjIn .4s ease .7s both}
.sqe3__tools{position:absolute;right:10px;top:8px;display:flex;gap:5px}
.sqe3__pill{display:inline-flex;align-items:center;gap:4px;height:19px;padding:0 9px;border-radius:999px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);font-size:9px;font-weight:600;color:#111;white-space:nowrap}
.sqe3__pill--blue{background:#2251d6;color:#fff}
.sqe3__add{position:absolute;left:30%;bottom:-10px;z-index:1;transform:translateX(-50%)}
.sqe3__add::before,.sqe3__tools .sqe3__pill--blue::before{content:"+";font-size:12px;line-height:1}
.sqe3__pick{position:absolute;right:34px;top:112px;z-index:2;width:236px;padding:10px;border-radius:6px;background:#fff;box-shadow:0 10px 30px -6px rgba(0,0,0,.3)}
.sqe3__pick > b{display:block;font-size:11px;font-weight:700}
.sqe3__find{display:block;height:20px;margin:7px 0 8px;padding:0 8px;border-radius:4px;background:#f2f2f2;font-size:9.5px;line-height:20px;color:#646464}
.sqe3__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:4px}
.sqe3__txt{padding:4px 16px 0}
.sqe3__txt .sk{height:6px;margin-top:8px;background:#ececec}
.sqe3__blk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 5px;border-radius:4px;font-size:8.5px;font-weight:500;color:#333}
.sqe3__blk i{display:flex;align-items:center;justify-content:center;width:18px;height:14px;border:1.4px solid #333;border-radius:2px;font-size:8px;font-style:normal;font-weight:700;line-height:1}
.sqe3__blk--btn i{height:9px;margin:2.5px 0;border-radius:999px}
.sqe3__blk--img i{background:linear-gradient(135deg,transparent 55%,#333 56%,#333 64%,transparent 65%)}
.hwj .is-active .sqe3__blk--code{animation:sqeBlk .35s ease 2.3s forwards}
@keyframes sqeBlk{to{background:#edf1fc;box-shadow:inset 0 0 0 1.5px #2251d6;color:#2251d6}}
.sqe-msg{position:absolute;display:flex;align-items:center;gap:6px;max-width:220px;padding:8px 12px;border-radius:12px;box-shadow:0 6px 18px -6px rgba(0,0,0,.28);font-size:11.5px;line-height:16px;font-weight:500}
.sqe-msg--you{left:30px;bottom:56px;border-bottom-left-radius:3px;background:#111;color:#fff}
.sqe-msg--us{left:52px;bottom:18px;border-bottom-left-radius:3px;background:#fff;color:#111}
.sqe-msg--us .i{color:#2a8a49}

/* 5. Tests and launch: the checks pass, a test order goes through, then the site is made public */
.sqe4{display:grid;grid-template-columns:1.05fr 1fr;gap:10px;align-items:start}
.sqe4__checks{padding:10px 12px 4px}
.sqe4__checks .sqe-t{margin-bottom:5px}
.sqe4__row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 0;border-top:1px solid #f2f2f2;font-size:10.5px;color:#333;white-space:nowrap}
.sqe4__st{position:relative;flex:none;width:16px;height:16px}
.sqe4__spin{position:absolute;inset:1px;border:2px solid #e6e6e6;border-top-color:#111;border-radius:50%;animation:hwjSpin .8s linear infinite}
.sqe4__ok{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#111;color:#fff;transform:scale(0)}
.hwj .is-active .sqe4__spin{animation:hwjSpin .8s linear infinite,hwjOut .2s ease calc(var(--d) * 300ms + 500ms) forwards}
.hwj .is-active .sqe4__ok{animation:hwjPop .3s var(--ease) calc(var(--d) * 300ms + 520ms) forwards}
.sqe4__side{display:flex;flex-direction:column;gap:10px}
.sqe4__order{padding:10px 12px}
.sqe4__oh{display:flex;align-items:center;justify-content:space-between;gap:6px}
.sqe4__state{position:relative;width:58px;height:17px}
.sqe4__state > *{position:absolute;right:0;top:0}
.sqe4__paid{opacity:0}
.hwj .is-active .sqe4__pend{animation:hwjOut .25s ease 1.9s forwards}
.hwj .is-active .sqe4__paid{animation:hwjIn .35s var(--ease) 2s both}
.sqe4__line{display:grid;grid-template-columns:26px minmax(0,1fr);align-items:center;gap:8px;margin-top:9px}
.sqe4__line i{display:block;width:26px;height:26px;border-radius:3px;background:linear-gradient(135deg,#ececec,#dcdcdc)}
.sqe4__line .sk{height:6px;background:#ececec}
.sqe4__line .sk + .sk{width:60%;margin-top:6px}
.sqe4__vis{padding:10px 12px}
.sqe4__tg{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px;font-size:10.5px;font-weight:500}
.sqe4__sw{position:relative;flex:none;width:30px;height:17px;border-radius:999px;background:#d6d6d6}
.sqe4__sw::after{content:"";position:absolute;left:2px;top:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25)}
.hwj .is-active .sqe4__sw{animation:sqeOn .3s ease 2.9s forwards}
.hwj .is-active .sqe4__sw::after{animation:sqeKnob .3s ease 2.9s forwards}
@keyframes sqeOn{to{background:#111}}
@keyframes sqeKnob{to{transform:translateX(13px)}}
.sqe4__lbl{position:relative;width:96px;height:14px}
.sqe4__lbl span{position:absolute;left:0;top:0;white-space:nowrap}
.sqe4__pub{opacity:0}
.hwj .is-active .sqe4__pw{animation:hwjOut .25s ease 2.9s forwards}
.hwj .is-active .sqe4__pub{animation:hwjIn .3s ease 3s both}
.sqe4__note{display:block;margin-top:9px;font-size:9.5px;line-height:13px;color:#646464}

/* 6. Run and grow: analytics with no figures, the most visited pages, then the upkeep */
.sqe-range{display:flex;border:1px solid #e2e2e2;border-radius:999px;overflow:hidden}
.sqe-range span{padding:2px 8px;font-size:9.5px;font-weight:600;color:#646464}
.sqe-range span.is-on{background:#111;color:#fff}
.sqe5{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:minmax(0,1fr) auto;gap:10px;height:calc(100% - 38px)}
.sqe5__chart{display:flex;flex-direction:column;padding:10px 12px;min-height:0}
.sqe5__ch{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin-bottom:6px}
.sqe5__plot{position:relative;flex:1;min-height:0;background-image:linear-gradient(#f2f2f2 1px,transparent 1px);background-size:100% 25%;border-bottom:1px solid #e2e2e2}
.sqe5__plot svg{position:absolute;inset:0;width:100%;height:100%;clip-path:inset(0 100% 0 0)}
.hwj .is-active .sqe5__plot svg{animation:hwjDraw 1.6s ease-out .5s forwards}
.sqe5__line{fill:none;stroke:#111;stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.sqe5__area{fill:rgba(17,17,17,.07)}
.sqe5__top{padding:10px 12px}
.sqe5__row{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:8px;margin-top:11px;font-size:10.5px;font-weight:500}
.sqe5__row i{display:block;height:6px;border-radius:999px;background:#ececec;overflow:hidden}
.sqe5__row i b{display:block;width:var(--w,50%);height:100%;border-radius:inherit;background:#111;transform:scaleX(0);transform-origin:left}
.hwj .is-active .sqe5__row i b{animation:sqeGrow .9s ease-out calc(var(--d,0) * 250ms + 900ms) forwards}
.sqe5__keep{grid-column:1/-1;display:flex;gap:7px}
.sqe5__keep span{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid #e2e2e2;border-radius:999px;font-size:10px;font-weight:600;color:#333}
.sqe5__keep span::before{content:"";width:6px;height:6px;border-radius:50%;background:#2a8a49}

/* Neutral browser bar, so the screen reads as the editor rather than the site's green */
.hwj .hwj__browser{border-color:#e2e2e2}
.hwj .hwj__bar{background:linear-gradient(180deg,#f3f3f3,#e8e8e8);border-bottom:1px solid #d4d4d4}
.hwj .hwj__url{background:#fff;border-color:#dcdcdc;color:#646464}
.hwj .hwj__status.is-live{background:#e8f4ec;color:#1e6b36}