/* Zapier page only: Zapier's own interface (.ze) drawn in CSS for How we work, on the technology page kit's step
   mechanics and 640 x 420 canvas (tech-page.css / tech-page.js), as the Magento, BigCommerce and WooCommerce pages
   draw their product's admin. Six scenes: the Zap list, a Canvas map, the Zap editor (step cards joined by a connector
   with "+" buttons), field mapping with a code step, test records and the on/off toggle, and Zap history.
   Generic marks only: no Zapier logo or wordmark, and app tiles are coloured squares with a letter or glyph.
   Zapier's orange #ff4f00 is used for shapes; text and buttons with white text use #c2410c (4.5:1 or better).
   The rail item for the active step is lit with :has(#hwj-sN.is-active). Loaded deferred (below the fold). */
.hwj .ze{--zo:#ff4f00;--zod:#c2410c;--zsoft:#fff1ea;--zink:#201515;--zmut:#6b625c;--zln:#e6e1da;--zbg:#f6f4f0;position:absolute;inset:0;display:grid;grid-template-rows:34px minmax(0,1fr);background:#fff;color:var(--zink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif}
.hwj .ze .hwj__scene{padding:0}

/* Top bar: back, Zap name, draft/published, on/off toggle, Publish */
.ze__top{display:flex;align-items:center;gap:8px;padding:0 10px 0 0;border-bottom:1px solid var(--zln);background:#fff;font-size:11px}
.ze__back{display:flex;align-items:center;justify-content:center;flex:none;width:54px;height:100%;border-right:1px solid var(--zln);font-size:18px;line-height:1;color:var(--zmut)}
.ze__name{font-size:12px;font-weight:700;white-space:nowrap}
.ze__pen{width:2.5px;height:11px;border-radius:1px 1px 0 0;background:linear-gradient(#a8a29e 0 75%,#57534e 75%);transform:rotate(40deg)}
.ze__sts{display:grid}.ze__sts > *{grid-area:1/1;justify-self:start}
.ze__st{display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 8px;border-radius:999px;background:#efece7;font-size:10px;font-weight:600;color:#57534e;white-space:nowrap}
.ze__st::before{content:"";width:6px;height:6px;border-radius:50%;background:#a8a29e}
.ze__st--on{background:#e5f6ec;color:#1a7f37}.ze__st--on::before{background:#1a7f37}
/* Draft / Published and Off / On are stacked; the second shows once the Zap is switched on (end of step 5, step 6) */
.ze__st--on,.ze__tgt--on{opacity:0}
.ze:has(#hwj-s5.is-active) .ze__st--draft,.ze:has(#hwj-s5.is-active) .ze__tgt--off{opacity:0}
.ze:has(#hwj-s5.is-active) .ze__st--on,.ze:has(#hwj-s5.is-active) .ze__tgt--on{opacity:1}
.hwj .ze:has(#hwj-s4.is-active) .ze__st--draft,.hwj .ze:has(#hwj-s4.is-active) .ze__tgt--off{animation:hwjOut .2s ease 3.4s forwards}
.hwj .ze:has(#hwj-s4.is-active) .ze__st--on,.hwj .ze:has(#hwj-s4.is-active) .ze__tgt--on{animation:zeShow .2s ease 3.4s forwards}
@keyframes zeShow{to{opacity:1}}
.ze__tgl{display:flex;align-items:center;gap:6px;margin-left:auto;font-size:10.5px;font-weight:600;color:var(--zmut)}
.ze__tgt--on{color:var(--zink)}
.ze__tog{position:relative;flex:none;width:28px;height:16px;border-radius:999px;background:#d6d3d1;transition:background-color .3s}
.ze__tog i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .3s}
.ze__pub{display:inline-flex;align-items:center;height:22px;padding:0 12px;border-radius:5px;background:var(--zod);font-size:10.5px;font-weight:700;color:#fff}
/* switch-on: the toggle turns on during step 5 and stays on in step 6 */
.ze:has(#hwj-s5.is-active) .ze__top .ze__tog{background:var(--zo)}
.ze:has(#hwj-s5.is-active) .ze__top .ze__tog i{transform:translateX(12px)}
.ze:has(#hwj-s5.is-active) .ze__pub{background:#efece7;color:#57534e}
.hwj .ze:has(#hwj-s4.is-active) .ze__top .ze__tog{animation:zeTogBg .3s ease 3.3s forwards}
.hwj .ze:has(#hwj-s4.is-active) .ze__top .ze__tog i{animation:zeTogKnob .3s ease 3.3s forwards}
@keyframes zeTogBg{to{background:var(--zo)}}
@keyframes zeTogKnob{to{transform:translateX(12px)}}
/* review: once the Zap is published (end of step 5) the Publish button greys out, as it does in step 6 */
.hwj .ze:has(#hwj-s4.is-active) .ze__pub{animation:zePubDone .2s ease 3.4s forwards}
@keyframes zePubDone{to{background:#efece7;color:#57534e}}

/* Left rail: Create, then the app's sections; the lit one follows the step */
.ze__body{display:grid;grid-template-columns:54px minmax(0,1fr);min-height:0}
.ze__rail{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0;border-right:1px solid var(--zln);background:#fffdf9}
.ze__new{display:flex;align-items:center;justify-content:center;width:30px;height:26px;margin-bottom:4px;border-radius:6px;background:var(--zod);font-size:16px;font-weight:600;line-height:1;color:#fff}
.ze__rail > span[data-nav]{display:flex;flex-direction:column;align-items:center;gap:3px;width:46px;padding:5px 0 4px;border-radius:6px;font-size:8.5px;font-weight:600;color:var(--zmut);transition:background-color .3s,color .3s}
.ze__rail > span[data-nav]::before{content:"";width:13px;height:13px;border:1.5px solid #a8a29e;border-radius:3px;transition:border-color .3s,background-color .3s}
.ze__rail [data-nav="home"]::before{border-radius:3px 3px 1px 1px}
.ze__rail [data-nav="zaps"]::before{border-radius:50%}
.ze__rail [data-nav="canvas"]::before{border-style:dashed}
.ze__rail [data-nav="history"]::before{border-radius:50%;border-right-color:transparent}
.ze:has(#hwj-s0.is-active) [data-nav="zaps"],
.ze:has(#hwj-s2.is-active) [data-nav="zaps"],
.ze:has(#hwj-s3.is-active) [data-nav="zaps"],
.ze:has(#hwj-s4.is-active) [data-nav="zaps"],
.ze:has(#hwj-s1.is-active) [data-nav="canvas"],
.ze:has(#hwj-s5.is-active) [data-nav="history"]{background:var(--zsoft);color:var(--zod)}
.ze:has(#hwj-s0.is-active) [data-nav="zaps"]::before,
.ze:has(#hwj-s2.is-active) [data-nav="zaps"]::before,
.ze:has(#hwj-s3.is-active) [data-nav="zaps"]::before,
.ze:has(#hwj-s4.is-active) [data-nav="zaps"]::before,
.ze:has(#hwj-s1.is-active) [data-nav="canvas"]::before,
.ze:has(#hwj-s5.is-active) [data-nav="history"]::before{border-color:var(--zo);background:rgba(255,79,0,.12)}
.ze__main{position:relative;min-height:0;background:var(--zbg)}

/* Shared parts */
.ze-hd{display:flex;align-items:center;gap:8px;height:36px;padding:0 14px;border-bottom:1px solid var(--zln);background:#fff}
.ze-hd b{font-size:14px;font-weight:700}
.ze-hd small{font-size:10.5px;color:var(--zmut)}
.ze-hd .ze-btn{margin-left:auto}
.ze-hd .ze-pill + .ze-btn{margin-left:auto}
.ze-pg{padding:12px 14px}
.ze-card{border:1px solid var(--zln);border-radius:8px;background:#fff;box-shadow:0 1px 2px rgba(32,21,21,.05)}
.ze-t{display:block;font-size:12px;font-weight:700}
.ze-s{display:block;font-size:10.5px;color:var(--zmut)}
.ze-btn{display:inline-flex;align-items:center;height:22px;padding:0 10px;border-radius:5px;background:var(--zod);font-size:10.5px;font-weight:700;color:#fff;white-space:nowrap}
.ze-btn--sec{border:1px solid var(--zln);background:#fff;color:var(--zink);font-weight:600}
.ze-pill{display:inline-flex;align-items:center;height:17px;padding:0 7px;border-radius:999px;background:#efece7;font-size:9.5px;font-style:normal;font-weight:600;color:#57534e;white-space:nowrap}
.ze-pill--ok{background:#e5f6ec;color:#1a7f37}
.ze-pill--err{background:#fde8e7;color:#b42318}
.ze-pill--halt{background:#fdf1d8;color:#8a5300}
.ze-pill--info{background:#e8eefc;color:#2f4fb5}
.ze-pill--org{background:var(--zsoft);color:var(--zod)}
.ze-ck{position:relative;flex:none;width:16px;height:16px}
.ze-ck::before{content:"";position:absolute;inset:0;border:1.5px solid #d6d3d1;border-radius:50%}
.ze-ck i{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--zod);color:#fff;transform:scale(0)}
.hwj .ze-ck .i{width:9px;height:9px}
.hwj .is-active .ze-ck i{animation:hwjPop .3s var(--ease) calc(var(--d,0) * 380ms + 900ms) forwards}
@keyframes zeGrow{to{transform:scaleX(1)}}
/* App tiles: generic coloured squares, a letter or glyph, never a logo */
.ze-app{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none;width:20px;height:20px;border-radius:5px;font-size:10px;font-weight:800;line-height:1;color:#fff;letter-spacing:-.04em}
.ze-app--form{background:#6d28d9}
.ze-app--crm{background:#0f766e}
.ze-app--mail{background:#1d4ed8}
.ze-app--chat{background:#9d174d}
.ze-app--pay{background:#4338ca}
.ze-app--hook{background:#be185d;font-size:8px}
.ze-app--code{background:#334155;font-size:7px}
.ze-app--sheet{background:#15803d}
.ze-app--sheet::before{content:"";width:10px;height:10px;border:1.5px solid #fff;border-radius:1px;background:linear-gradient(#fff,#fff) 50% 0/1.5px 100% no-repeat,linear-gradient(#fff,#fff) 0 50%/100% 1.5px no-repeat}
.ze-app--filter{background:var(--zod)}
.ze-app--filter::before{content:"";width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:7px solid #fff;margin-top:-2px}
.ze-app--filter::after{content:"";position:absolute;left:9px;top:11px;width:2px;height:4px;background:#fff}

/* The editor canvas: dotted background, step cards in a column joined by a line with "+" buttons */
.ze-cv{position:relative;height:100%;background-color:var(--zbg);background-image:radial-gradient(#d3ccc2 1px,transparent 1.3px);background-size:14px 14px}
.ze-hd + .ze-cv{height:calc(100% - 37px)}
.ze-flow{position:absolute;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ze-step{position:relative;display:flex;align-items:center;gap:9px;width:100%;height:42px;padding:0 10px;border:1px solid var(--zln);border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(32,21,21,.08)}
.ze-step > span:not([class]){display:flex;flex-direction:column;min-width:0;flex:1}
.ze-step small{font-size:9px;font-weight:600;color:var(--zmut)}
.ze-step b{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ze-step.is-sel{border-color:var(--zo);box-shadow:0 0 0 2px rgba(255,79,0,.2)}
.ze-step--trig{border-top:3px solid var(--zo)}
.ze-join{position:relative;display:flex;align-items:center;justify-content:center;width:2px;height:20px;background:#bdb5ab}
.ze-join i{display:flex;align-items:center;justify-content:center;width:14px;height:14px;border:1px solid #bdb5ab;border-radius:50%;background:#fff;font-size:11px;font-style:normal;line-height:1;color:var(--zmut)}
/* The side panel the editor opens for the selected step */
.ze-panel{position:absolute;top:0;right:0;bottom:0;display:flex;flex-direction:column;gap:8px;padding:12px 14px;border-left:1px solid var(--zln);background:#fff;box-shadow:-8px 0 20px -14px rgba(32,21,21,.25)}
.ze-panel__hd{display:flex;align-items:center;gap:8px}
.ze-panel__hd b{font-size:12px;font-weight:700;white-space:nowrap}
.ze-panel__hd .ze-pill{margin-left:auto}
.ze-tabs{display:flex;gap:14px;border-bottom:1px solid var(--zln)}
.ze-tabs span{display:flex;align-items:center;gap:4px;padding:3px 0 6px;font-size:10.5px;font-weight:600;color:var(--zmut)}
.ze-tabs .is-done::before{content:"";width:6px;height:6px;border-radius:50%;background:#1a7f37}
.ze-tabs .is-on{box-shadow:inset 0 -2px 0 var(--zo);color:var(--zink)}
.ze-fld small{display:block;margin-bottom:3px;font-size:9.5px;font-weight:700}
.ze-in{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-height:24px;padding:3px 5px;border:1px solid #d6d0c7;border-radius:5px;background:#fff;font-size:10px}
.ze-in--area{flex-direction:column;align-items:stretch;gap:6px;padding:7px 8px}
.ze-in--area .sk{height:6px}
.ze-chip{display:inline-flex;align-items:center;gap:4px;height:18px;padding:0 6px 0 2px;border:1px solid #e3ddd4;border-radius:4px;background:#f7f5f1;font-size:9.5px;font-style:normal;font-weight:600;white-space:nowrap}
.ze-chip .ze-app{width:14px;height:14px;border-radius:3px;font-size:7px}
.ze-chip .ze-app--hook{font-size:5.5px}.ze-chip .ze-app--code{font-size:5px}

/* 1. Discovery call: the Zap list of what to automate, and the call */
.ze0{display:grid;grid-template-columns:1.75fr 1fr;gap:10px;align-items:start}
.ze0__list{padding:10px 12px 4px}
.ze0__cap{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.ze0__row{display:grid;grid-template-columns:minmax(0,1fr) 62px 38px;align-items:center;gap:8px;height:44px;border-top:1px solid #f0ece6}
.ze0__row--h{height:24px;font-size:9.5px;font-weight:700;color:var(--zmut)}
.ze0__row > span:last-child{justify-self:center}
.ze0__nm{display:flex;align-items:center;gap:6px;min-width:0}
.ze0__nm b{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ze0__apps{display:flex;align-items:center;gap:3px}
.ze0__apps i{width:8px;height:1.5px;background:#bdb5ab}
.ze0__call{padding:11px 12px 12px;text-align:center}
.ze0__avs{display:flex;justify-content:center;margin:8px 0 6px}
.ze0__avs span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;margin-left:-8px;border:2px solid #fff;border-radius:50%;background:#e7e2db;font-size:10px;font-weight:700}
.ze0__avs span:first-child{margin-left:0}
.ze0__avs span:last-child{background:#00B26B;color:#04150D}
.ze0__note{padding:6px 0;border-top:1px solid #f0ece6;text-align:left}
.ze0__note b{display:block;font-size:10.5px;font-weight:700}
.ze0__note .sk{height:6px;margin-top:4px}
.ze0__call .ze-pill{margin-top:6px}

/* 2. Map the workflows: a Canvas map, nodes joined by lines, a split, a sticky note; what each needs on the right */
.ze1__map{position:absolute;top:0;left:0;bottom:0;width:390px}
.ze1__node{position:absolute;display:flex;align-items:center;gap:7px;width:140px;height:36px;padding:0 8px;border:1px solid var(--zln);border-radius:8px;background:#fff;box-shadow:0 1px 3px rgba(32,21,21,.08)}
.ze1__node span{display:flex;flex-direction:column;min-width:0}
.ze1__node small{font-size:8.5px;font-weight:600;color:var(--zmut)}
.ze1__node b{font-size:10.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ze1__node--n1{top:14px;left:125px;border-top:3px solid var(--zo)}
.ze1__node--n2{top:72px;left:125px}
.ze1__node--n3{top:146px;left:20px}
.ze1__node--n4{top:146px;left:230px}
.ze1__node--n5{top:220px;left:125px}
.ze1__node--n6{top:278px;left:125px}
.ze1__ln{position:absolute;background:#bdb5ab}
.ze1__ln--1{left:194px;top:50px;width:2px;height:22px}
.ze1__ln--2{left:194px;top:108px;width:2px;height:12px}
.ze1__ln--3{left:89px;top:120px;width:212px;height:2px}
.ze1__ln--4{left:89px;top:120px;width:2px;height:26px}
.ze1__ln--5{left:299px;top:120px;width:2px;height:26px}
.ze1__ln--6{left:89px;top:182px;width:2px;height:14px}
.ze1__ln--7{left:299px;top:182px;width:2px;height:14px}
.ze1__ln--8{left:89px;top:196px;width:212px;height:2px}
.ze1__ln--9{left:194px;top:198px;width:2px;height:80px}
.ze1__node--n5,.ze1__node--n6{z-index:1}
.ze1__if{position:absolute;top:126px;padding:1px 6px;border-radius:4px;background:#fff;border:1px solid var(--zln);font-size:8.5px;font-weight:700;color:var(--zmut)}
.ze1__if--a{left:100px}
.ze1__if--b{left:230px}
.ze1__sticky{position:absolute;left:14px;top:262px;width:92px;padding:8px 9px;border-radius:2px;background:#fde68a;box-shadow:0 4px 10px -6px rgba(32,21,21,.35);font-size:10px;font-weight:600;line-height:13px;color:#3f2d00;transform:rotate(-2deg)}
.ze1__needs{position:absolute;top:14px;right:14px;width:172px;padding:11px 12px}
.ze1__row{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10.5px;font-weight:600}
.ze1__row span:first-child{flex:none;width:56px}
.ze1__track{flex:1;height:5px;border-radius:999px;background:#ece7e0;overflow:hidden}
.ze1__track i{display:block;width:100%;height:100%;border-radius:inherit;background:var(--zo);transform:scaleX(0);transform-origin:left}
.hwj .is-active .ze1__track i{animation:zeGrow .9s ease-out calc(var(--d,0) * 300ms + 900ms) forwards}
.ze1__tool{display:flex;flex-wrap:wrap;gap:5px;margin-top:12px}

/* 3. Design the steps: five steps, the email step open in the panel */
.ze2__flow{left:30px;width:236px}
.ze-ed .ze-panel{width:270px}
.ze-panel__go{align-self:flex-start;margin-top:2px}

/* 4. Build the zaps: webhook trigger, code step, fields mapped, the code itself */
.ze3__flow{left:28px;width:212px}
.ze3__url{display:flex;flex-direction:column;gap:2px;width:100%;margin-top:10px;padding:6px 9px;border:1px dashed #c9c1b6;border-radius:6px;background:#fffdf9}
.ze3__url small{font-size:8.5px;font-weight:700;color:var(--zmut)}
.ze3__url span{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:9.5px;color:var(--zink)}
.ze-ed .ze3__panel{width:300px}
.ze3__code{margin-top:2px;padding:8px 10px 2px;border-radius:6px;background:#1c1917}
.ze3__tab{display:flex;align-items:center;gap:6px;margin-bottom:8px;font-size:9.5px;font-weight:600;color:#d6d3d1}
.ze3__tab .ze-app{width:14px;height:14px;font-size:5px}
.ze3__code .s3__ln{height:6px;margin-bottom:8px}

/* 5. Test runs and switch-on: each step tested, test records, then the toggle turns on */
.ze4__flow{left:28px;width:232px}
.ze4__flow .s4__st{flex:none;width:18px;height:18px}
.ze4__flow .s4__spin{border-top-color:var(--zo)}
.ze4__flow .s4__ok{background:#1a7f37}
.ze-ed .ze4__panel{width:282px}
.ze4__rec{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #f0ece6}
.ze4__rec > span:nth-child(2){display:flex;flex-direction:column;flex:1;min-width:0}
.ze4__rec b{font-size:11px;font-weight:700}
.ze4__rec small{font-size:9.5px;color:var(--zmut)}
.ze4__ck{display:flex;align-items:center;justify-content:center;flex:none;width:16px;height:16px;border-radius:50%;background:#e5f6ec;font-size:9px;font-weight:800;color:#1a7f37}
.ze4__on{display:flex;align-items:center;gap:10px;margin-top:auto;padding:10px 11px;border:1px solid var(--zln);border-radius:8px;background:#fffdf9}
.ze4__on > span:first-child{display:flex;flex-direction:column;flex:1}
.ze4__on b{font-size:11.5px;font-weight:700}
.ze4__on small{font-size:9.5px;color:var(--zmut)}
.ze4__tog{width:34px;height:19px}
.ze4__tog i{width:15px;height:15px}
.hwj .is-active .ze4__tog{animation:zeTogBg .3s ease 3.3s forwards}
.hwj .is-active .ze4__tog i{animation:zeTogKnob4 .3s ease 3.3s forwards}
@keyframes zeTogKnob4{to{transform:translateX(15px)}}

/* 6. Watch and improve: Zap history, task usage, alerts */
.ze5{display:grid;grid-template-columns:minmax(0,1fr) 168px;grid-template-rows:auto minmax(0,1fr);gap:10px;height:calc(100% - 37px)}
.ze5__kpis{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.ze5__kpi{padding:8px 10px}
.ze5__kpi em{float:right;padding:0 5px;border-radius:3px;background:#e5f6ec;font-size:9.5px;font-style:normal;font-weight:700;color:#1a7f37}
.ze5__kpi small{display:block;margin-top:4px;font-size:9px;color:var(--zmut)}
.ze5__kpi .sk{height:8px;margin-top:6px;background:#ece7e0}
.ze5__use{display:block;height:8px;margin-top:6px;border-radius:999px;background:#ece7e0;overflow:hidden}
.ze5__use i{display:block;width:62%;height:100%;border-radius:inherit;background:var(--zo);transform:scaleX(0);transform-origin:left}
.hwj .is-active .ze5__use i{animation:zeGrow 1.2s ease-out .8s forwards}
.ze5__al{display:block;margin-top:3px;font-size:11px;font-weight:700;color:#1a7f37}
.ze5__runs{padding:2px 10px;overflow:hidden}
.ze5__row{display:grid;grid-template-columns:70px minmax(0,1fr) 66px;align-items:center;gap:8px;height:31px;border-top:1px solid #f0ece6;font-size:10px;color:var(--zmut)}
.ze5__row b{font-size:10.5px;font-weight:700;color:var(--zink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ze5__row--h{height:24px;border-top:0;font-size:9.5px;font-weight:700}
.ze5__row.is-err{margin:0 -10px;padding:0 10px;background:#fff7f6}
.ze5__feed{display:flex;flex-direction:column;gap:8px}
.ze5__alert{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:9px 10px;border-left:3px solid #1a7f37}
.ze5__alert--err{border-left-color:#b42318}
.ze5__alert b{font-size:11px;font-weight:700}
.ze5__alert small{font-size:9.5px;line-height:13px;color:var(--zmut)}
.ze5__alert .ze-pill{margin-top:3px}
.ze5__next{margin-top:auto}

/* Neutral browser bar, so the screen reads as Zapier rather than the site's green */
.hwj .hwj__browser{border-color:#d6d0c7}
.hwj .hwj__bar{background:linear-gradient(180deg,#f5f3ef,#ebe7e1);border-bottom:1px solid #d6d0c7}
.hwj .hwj__url{background:#fff;border-color:#ddd7ce;color:#6b625c}
.hwj .hwj__status.is-live{background:#e5f6ec;color:#1a7f37}