/* The reference diagram, kept element for element, but set in Poppins on our cream ground. */
.hww{
  font-family:'Poppins',system-ui,sans-serif;
  background:#FFFFFF;
  --page:#FFFFFF;
  --line:#EADFC8;                     /* card borders warm rather than cool grey */
  --line-2:#F3EBDA;
}
.hww *{font-family:'Poppins',system-ui,sans-serif !important}

/* cards and panels sit on raised cream so they still lift off the ground */
.hww .reqcard,.hww .dash,.hww .dash__main,.hww .stat,.hww .panel,.hww .node{background:#FFFFFF}
.hww .dash__chrome{background:#F8FAFC}
.hww .dash{border-color:#EADFC8}
.hww .reqcard{border-color:#EADFC8}
.hww .hww__bar{border-color:#EADFC8}
.hww .node{border-color:#EADFC8}

/* the handwritten notes become Poppins, light and italic, in the same accent colours */
.hww .hand{font-family:'Poppins',system-ui,sans-serif !important;font-size:15px;font-weight:400;
  font-style:italic;line-height:1.5;letter-spacing:0}

/* Poppins runs wider than Inter, so the small labels need a touch more room */
.hww .reqcard span{font-size:12px;line-height:1.3}
.hww .chip b{font-size:10.5px}
.hww .chip span{font-size:8.5px;line-height:1.3}
.hww .stat__k{font-size:8px}
.hww .row{font-size:8px}
.hww__head h2{font-size:38px;font-weight:600;letter-spacing:-.02em}
.hww__head p{font-size:18px}
.hww__stagehead h2{font-size:13px;font-weight:600}
.hww__stagehead p{font-size:13.5px}
.hww__mark b{font-size:12.5px}
.hww__mark span{font-size:11.5px}
.hww__bar h4{font-size:14px;font-weight:600}

/* A — the dashed lines are positioned in real coordinates, so the column takes no padding */
.hww .hww__dash{padding:0;display:block}

/* B and C — the aligned-requirements node had a 150px box in a 150px column, so it touched both sides */
.hww .hww__inner{width:1560px}
.hww .hww__bar{width:1560px}
.hww .hww__flow{grid-template-columns:180px 48px 320px 230px 430px 32px 320px}
.hww .node{max-width:150px;margin:0 auto}

/* more room between the parts, and arrows you can actually see */
.hww .hww__inner{width:1680px}
.hww .hww__bar{width:1680px}
.hww .hww__flow{grid-template-columns:190px 66px 340px 110px 450px 110px 340px;column-gap:14px}
.hww .hww__step-arrow{display:flex;align-items:center;justify-content:center;padding-top:250px}
.hww .hww__step-arrow span{font-size:30px;line-height:1;color:#1E293B;font-weight:300}
.hww .flow__col,.hww .hww__col{padding-left:0;padding-right:0}
.hww .reqcards{gap:18px}
.hww .hww__stagehead{margin-bottom:26px;min-height:80px}
.hww .hand{margin-top:26px}
.hww .hww__bar{margin-top:46px;padding:26px 30px}
.hww__scroll{padding:0 30px}