:root{--tools:#2ee6c3}
.d-tools{background:var(--tools)}

/* The proxy guide is a Workflow article, not a generic legacy Page. */
.proxy-art-tag{color:var(--blue)}
.proxy-qa{border-left-color:var(--blue)}
.proxy-qa h2{color:var(--blue)}
.proxy-hubup a{border-left-color:var(--blue)}
.workflow-art-tag{color:var(--blue)}
.workflow-hubup a{border-left-color:var(--blue)}
.hardware-art-tag{color:#a6e22e}
.hardware-hubup a{border-left-color:#a6e22e}

.legacy-hub-page{padding-top:38px}
.legacy-hub-route{max-width:760px;padding:28px;border:1px solid var(--line2);border-left:4px solid var(--green);border-radius:14px;background:var(--panel)}
.legacy-hub-route h2{margin:0}
.legacy-hub-route p{margin:14px 0 0}
.legacy-hub-cta{display:inline-flex;margin-top:22px;padding:11px 18px;border:1px solid var(--green);border-radius:999px;color:var(--ink);font-weight:800}
.legacy-hub-cta:hover{background:var(--green);color:var(--bg)}

/* Tools is its own editorial cluster: teal, not Workflow blue. */
.hub-band--tools{--acc:var(--tools);padding-top:28px;padding-bottom:28px}
.hub-band--tools h1{font-size:clamp(2rem,3.6vw,3rem)}
.hub-page-body--tools{--acc:var(--tools)}

/* Put the cover inside the tool hero so it is visible before the controls. */
.tool-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);grid-template-areas:"title cover" "answer cover";gap:22px 46px;align-items:start}
.tool-title-block{grid-area:title}
.tool-cover{grid-area:cover;margin:0}
.tool-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;background:#090c12;border:1px solid var(--line2);border-radius:14px}
.tool-cover figcaption{margin-top:9px;color:var(--mute);font-size:.78rem;line-height:1.45;text-align:center}
.tool-qa{grid-area:answer;margin-top:0;border-left-color:var(--tools)}
.tool-art-tag{color:var(--tools);border-color:rgba(46,230,195,.42)}
.tool-qa h2{color:var(--tools)}
.tool-hubup{margin-top:0;margin-bottom:64px}
.tool-hubup a{border-left-color:var(--tools)}
.tool-hubup a:hover{border-color:var(--tools)}
.tool-toc a.on,.tool-toc a:hover{border-color:var(--tools)}

@media (max-width:960px){
  .tool-hero{grid-template-columns:1fr;grid-template-areas:"title" "cover" "answer";gap:22px}
  .tool-cover{max-width:720px}
}
@media (max-width:560px){
  .hub-band--tools{padding-top:24px;padding-bottom:24px}
  .tool-art-head{padding-top:24px}
  .tool-hubup{margin-bottom:44px}
}

/* Tag hubs can carry a real editorial cover; Workflow is the first one. */
.tag-hub-hero--with-cover{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(360px,.96fr);gap:46px;align-items:center}
.tag-hub-cover{margin:0}
.tag-hub-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line2);border-radius:14px;background:#090c12}
@media (max-width:960px){.tag-hub-hero--with-cover{grid-template-columns:1fr;gap:24px}.tag-hub-cover{max-width:720px}}

/* The final Tools boundary is one explanation followed by three equal limits. */
.hub-page-body--tools .hub-shell>.hub-overview:last-child{display:block;padding:42px 0 8px}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-overview-copy{max-width:820px}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-overview-copy>p:last-child{max-width:78ch}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-routes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:26px;border-top:0}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-route{min-height:152px;padding:20px 20px 22px;border:1px solid var(--line2);border-top:3px solid var(--tools);border-radius:12px;background:var(--panel)}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-route b{font-size:1rem}
.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-route span{margin-top:7px;font-size:.88rem;line-height:1.55}
@media (max-width:780px){.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-routes{grid-template-columns:1fr}.hub-page-body--tools .hub-shell>.hub-overview:last-child .hub-route{min-height:0}}