/* ==========================================================================
   How we work — a direct rebuild of Homepage/How we work.png.
   Deliberately not the brand system: this is the reference's own palette,
   type and card style, reproduced. Scoped under .hww so it touches nothing else.
   ========================================================================== */

.hww{
  --navy:#1E293B; --navy-deep:#0F172A; --slate:#64748B; --slate-2:#94A3B8;
  --line:#E2E8F0; --line-2:#F1F5F9; --page:#FFFFFF;
  --blue:#2563EB; --blue-soft:#DBEAFE; --blue-line:#93C5FD;
  --violet:#7C3AED; --violet-soft:#EDE9FE; --violet-line:#DDD6FE;
  --green:#16A34A; --green-soft:#DCFCE7; --green-line:#86EFAC;
  --amber-bg:#FEF3C7; --amber-fg:#B45309;
  --orange:#F97316; --red:#EF4444; --indigo:#6366F1;
  background:var(--page);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  color:var(--navy);
  padding:72px 0 80px;
  border-top:1px solid var(--line);
}
.hww *{box-sizing:border-box}

.hww__scroll{overflow-x:auto;overflow-y:hidden;padding:0 40px}
.hww__inner{width:1480px;margin:0 auto}

/* --- heading -------------------------------------------------------------- */
.hww__head{text-align:center;margin-bottom:44px}
.hww__head h2{margin:0;font-size:40px;line-height:1.15;font-weight:800;letter-spacing:-.02em;color:var(--navy-deep)}
.hww__head p{margin:14px 0 0;font-size:19px;line-height:1.5;color:var(--slate);font-weight:400}

/* --- the flow row --------------------------------------------------------- */
.hww__flow{display:grid;grid-template-columns:180px 48px 320px 150px 430px 32px 320px;align-items:start}

.hww__coltitle{font-size:14px;font-weight:700;letter-spacing:.06em;color:var(--navy-deep);text-align:center}
.hww__colsub{margin:6px 0 22px;font-size:14px;line-height:1.45;color:var(--slate);text-align:center}
.hww__stagehead{text-align:center;margin-bottom:20px;min-height:74px}
.hww__stagehead h2{margin:0;font-size:14px;font-weight:700;letter-spacing:.04em}
.hww__stagehead h2 span{margin-right:4px}
.hww__stagehead p{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--slate)}
.s1 h3{color:var(--blue)} .s2 h3{color:var(--violet)} .s3 h3{color:var(--green)}

/* --- requirement cards ---------------------------------------------------- */
.reqcards{display:flex;flex-direction:column;gap:14px}
.reqcard{display:flex;align-items:center;gap:11px;padding:13px 14px;background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 1px 2px rgba(15,23,42,.05)}
.reqcard svg{flex:none}
.reqcard span{font-size:12.5px;line-height:1.35;color:var(--navy)}

/* --- dashed connectors ---------------------------------------------------- */
.hww__dash{padding-top:120px}
.hww__gap{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:172px}
.hww__arrow{position:absolute;top:236px;left:0;color:#0F172A;font-size:15px;line-height:1}
.hww__arrow--mid{position:static;padding-top:250px;text-align:center}

/* --- the dashboard -------------------------------------------------------- */
.dash{border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line);
  box-shadow:0 18px 40px -18px rgba(15,23,42,.28)}
.dash--live{box-shadow:0 18px 44px -16px rgba(22,163,74,.35)}
.dash__chrome{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#F8FAFC;
  border-bottom:1px solid var(--line)}
.dash__dots{display:flex;gap:5px}
.dash__dots i{width:8px;height:8px;border-radius:50%;display:block}
.dash__dots i:nth-child(1){background:#FF5F57}
.dash__dots i:nth-child(2){background:#FEBC2E}
.dash__dots i:nth-child(3){background:#28C840}
.dash__chev{color:var(--slate-2);font-size:10px;letter-spacing:2px}
.dash__body{display:flex;min-height:300px}
.dash__rail{width:26px;flex:none;background:var(--navy);padding:9px 0;display:flex;flex-direction:column;
  align-items:center;gap:11px}
.dash__logo{width:15px;height:15px;border-radius:4px;background:#fff;color:var(--navy);font-size:10px;font-weight:800;
  display:flex;align-items:center;justify-content:center}
.dash__rail i{width:9px;height:9px;border-radius:2px;border:1.4px solid rgba(255,255,255,.42);display:block}
.dash__main{flex:1;min-width:0;padding:11px 12px;display:flex;flex-direction:column;gap:9px;background:#fff}
.dash__top{display:flex;align-items:center;justify-content:space-between}
.dash__title{font-size:13px;font-weight:700;color:var(--navy-deep)}
.dash__btns{display:flex;gap:6px}
.dash__btn{width:19px;height:19px;border-radius:5px;border:1px solid var(--line);display:flex;align-items:center;
  justify-content:center;color:var(--slate-2)}
.dash__report{display:flex;align-items:center;gap:5px;padding:4px 8px;border-radius:6px;background:var(--green-soft);
  color:var(--green);font-size:9.5px;font-weight:600}

.dash__stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stat{border:1px solid var(--line);border-radius:8px;padding:8px 9px;position:relative}
.stat__k{font-size:8.5px;color:var(--slate);font-weight:500}
.stat__v{margin-top:3px;font-size:17px;font-weight:700;color:var(--navy-deep);letter-spacing:-.01em}
.stat__d{margin-top:2px;font-size:8.5px;font-weight:600;color:var(--green)}
.stat__c{position:absolute;top:7px;right:8px;color:var(--slate-2);font-size:8px}

.panel{border:1px solid var(--line);border-radius:8px;padding:9px 10px}
.panel__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.panel__k{font-size:9px;font-weight:600;color:var(--navy)}
.panel__legend{font-size:7.5px;color:var(--slate-2)}
.panel__axis{display:flex;justify-content:space-between;margin-top:4px;font-size:7px;color:var(--slate-2)}

.rows__k{font-size:9px;font-weight:600;color:var(--navy);margin-bottom:5px}
.row{display:grid;grid-template-columns:52px 1fr 56px 34px;align-items:center;gap:6px;padding:5px 0;
  border-top:1px solid var(--line-2);font-size:8.5px;color:var(--slate)}
.row b{font-weight:600;color:var(--navy)}
.pill{justify-self:start;padding:2px 7px;border-radius:999px;font-size:7.5px;font-weight:600}
.pill--p{background:var(--amber-bg);color:var(--amber-fg)}
.pill--a{background:var(--green-soft);color:var(--green)}

/* --- handwritten annotations ---------------------------------------------- */
.hand{margin:18px 0 0;font-family:'Caveat',cursive;font-size:19px;line-height:1.45;text-align:center}
.hand--blue{color:var(--blue)}
.hand--violet{color:var(--violet)}

/* --- the aligned node ----------------------------------------------------- */
.node{margin-top:0;text-align:center;padding:18px 14px;background:#fff;border:1px solid var(--line);
  border-radius:60px/40px;box-shadow:0 10px 26px -14px rgba(15,23,42,.3)}
.node__check{width:26px;height:26px;margin:0 auto 8px;border-radius:50%;background:var(--blue);display:flex;
  align-items:center;justify-content:center}
.node__k{font-size:10px;font-weight:700;letter-spacing:.04em;color:var(--navy-deep);line-height:1.3}
.node__t{margin:8px 0 0;font-size:11px;line-height:1.5;color:var(--slate)}

/* --- the sprint cycle ----------------------------------------------------- */
.cycle2{position:relative;height:392px}
.cycle2__ring{position:absolute;inset:0}
.chip{position:absolute;width:104px;padding:9px 10px;background:var(--violet-soft);border:1px solid var(--violet-line);
  border-radius:9px;text-align:center}
.chip b{display:block;font-size:11px;font-weight:700;color:var(--violet);letter-spacing:.04em}
.chip span{display:block;margin-top:3px;font-size:9px;line-height:1.35;color:#6D5BA6}
.chip--plan{top:0;left:50%;transform:translateX(-50%)}
.chip--build{top:150px;right:0}
.chip--build b,.chip--review b{letter-spacing:.05em}
.chip--test{bottom:0;left:50%;transform:translateX(-50%)}
.chip--review{top:150px;left:0}

.editor{position:absolute;top:92px;left:50%;transform:translateX(-50%);width:212px;border-radius:9px;overflow:hidden;
  background:#0F172A;box-shadow:0 14px 30px -14px rgba(15,23,42,.5)}
.editor__bar{display:flex;gap:4px;padding:6px 8px;background:#1E293B}
.editor__bar i{width:6px;height:6px;border-radius:50%;display:block;background:#475569}
.editor__code{padding:8px;display:flex;flex-direction:column;gap:4px}
.editor__code i{height:3px;border-radius:2px;display:block}
.editor__ai{position:absolute;right:34px;top:206px;z-index:4;width:116px;background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:8px;box-shadow:0 10px 22px -10px rgba(15,23,42,.35)}
.editor__ai b{display:flex;align-items:center;gap:4px;font-size:8px;font-weight:700;color:var(--navy-deep)}
.editor__ai u{display:block;margin:6px 0 3px;font-size:7px;font-weight:600;color:var(--slate);text-decoration:none}
.editor__ai span{display:block;font-size:7px;line-height:1.4;color:var(--slate)}
.editor__apply{margin-top:6px;display:inline-block;padding:3px 9px;border-radius:5px;background:var(--blue);
  color:#fff;font-size:7.5px;font-weight:600}

/* --- the production bar --------------------------------------------------- */
.hww__bar{margin:46px auto 0;width:1480px;display:flex;align-items:center;background:#fff;border:1px solid var(--line);
  border-radius:12px;box-shadow:0 1px 2px rgba(15,23,42,.05);padding:22px 26px;gap:26px}
.hww__bar h4{margin:0;font-size:15px;font-weight:800;letter-spacing:-.01em;color:var(--navy-deep);line-height:1.3;
  min-width:150px}
.hww__mark{flex:1;display:flex;align-items:center;gap:11px;padding-left:26px;border-left:1px solid var(--line-2)}
.hww__mark b{display:block;font-size:13px;font-weight:600;color:var(--navy-deep)}
.hww__mark span{display:block;font-size:12px;color:var(--slate)}