.wb-eyebrow{font-family:var(--mono);font-weight:500;font-size:12px;letter-spacing:0.06em;text-transform:uppercase;opacity:0.6;display:block;margin-bottom:16px;}
.wb-head{max-width:680px;margin-bottom:48px;}
.wb-head h2{margin:0 0 16px;}
.wb-head p{font-size:16px;line-height:1.6;color:var(--text-dim-paper);margin:0;max-width:60ch;}
.wb-head.on-ink p{color:var(--text-dim-ink);}

/* 01 HERO — flat paper, no texture, real list panel */
.wb-hero{background:var(--paper-100);padding:64px 0 88px;}
.wb-hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:start;}
.wb-hero h1{max-width:15ch;margin:20px 0 22px;}
.wb-hero .lede{max-width:52ch;}
.wb-hero .btnrow{margin-top:30px;}
.panel{background:var(--ink-900);color:var(--paper-100);padding:22px 24px;}
.panel-head{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;letter-spacing:0.05em;color:var(--text-dim-ink);border-bottom:1px solid var(--line-on-ink);padding-bottom:12px;margin-bottom:6px;text-transform:uppercase;}
.build-row{display:flex;align-items:baseline;gap:10px;padding:11px 0;border-bottom:1px solid var(--line-on-ink);font-family:var(--mono);font-size:15px;}
.build-row:last-child{border-bottom:none;}
.build-row .mark{color:var(--fuchsia-700);flex-shrink:0;}

/* 02 REFRAMING — flat paper */
.wb-input-list{border-top:1px solid var(--ink-900);margin-top:44px;max-width:640px;}
.wb-input-row{display:flex;gap:20px;padding:22px 0;border-bottom:1px solid var(--paper-400);align-items:baseline;}
.wb-input-row .n{font-family:var(--mono);font-size:15px;color:var(--text-dim-paper);}
.wb-input-row .t{font-size:18px;font-weight:600;}

.wb-reframe-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:start;}
.wb-reframe-panel{border:1px solid var(--paper-400);background:var(--paper-200);padding:28px;margin-top:8px;}
.wb-reframe-row{padding:18px 0;border-bottom:1px solid var(--paper-400);}
.wb-reframe-row.new{border-bottom:none;padding-bottom:8px;}
.wb-reframe-k{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--text-dim-paper);margin-bottom:8px;}
.wb-reframe-row.old .wb-reframe-v{font-size:17px;font-weight:600;opacity:0.55;text-decoration:line-through;text-decoration-color:var(--fuchsia-700);text-decoration-thickness:2px;}
.wb-reframe-row.new .wb-reframe-v{font-size:19px;font-weight:700;}
.wb-reframe-note{font-size:15px;color:var(--text-dim-paper);line-height:1.6;margin-top:18px;padding-top:18px;border-top:1px dashed var(--paper-400);}

/* 03 SPEC -> OUTCOME — cobalt, texture (kept, earned it) */
.wb-system{
  background:var(--cobalt-700);color:var(--paper-100);
  background-image:linear-gradient(rgba(0,58,176,0.35),rgba(0,58,176,0.5)),url(../assets/backgrounds/bars-stack-cobalt.png);
  background-size:cover;background-position:center;
  text-align:center;
}
.wb-system .wb-eyebrow{opacity:0.85;}
.wb-system{padding:88px 0;}
.wb-system h2{max-width:20ch;margin:0 auto 22px;}
.wb-system-copy{max-width:52ch;margin:0 auto 44px;font-size:16px;line-height:1.6;color:rgba(245,240,235,0.85);}
.wb-branch{font-family:var(--mono);font-size:15px;max-width:520px;margin:0 auto;}
.wb-branch .node{border:1px solid rgba(245,240,235,0.35);padding:12px 20px;display:inline-block;background:rgba(6,8,17,0.2);}
.wb-branch .arrow-down{margin:14px 0;opacity:0.8;}
.wb-branch-row{display:flex;justify-content:space-between;gap:12px;margin:0 auto;}
.wb-branch-row .node{flex:1;}

/* 04 CONSTRAINTS — flat ink, no texture, no motif */
.wb-constraints{background:var(--ink-900);color:var(--paper-100);}
.wb-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-on-ink);border:1px solid var(--line-on-ink);margin-top:44px;}
.wb-matrix-cell{background:var(--ink-900);padding:26px;}
.wb-matrix-cell .k{font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:#80B5FF;margin-bottom:10px;}
.wb-matrix-cell p{font-size:15px;color:var(--text-dim-ink);margin:0;}

/* 05 PRODUCTION JOURNEY — flat colours only, ONE motif at the handoff */
.wb-journey-steps{display:flex;flex-direction:column;border:1px solid var(--paper-400);margin-top:44px;}
.wb-step{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;padding:20px 24px;border-top:1px solid var(--paper-400);}
.wb-step:first-child{border-top:none;}
.wb-step .t{font-size:16px;font-weight:600;}
.wb-step .d{font-size:15px;opacity:0.75;margin-top:2px;}
.wb-step-01{background:var(--paper-100);color:var(--ink-900);}
.wb-step-02{background:var(--paper-200);color:var(--ink-900);}
.wb-step-03{background:#ffffff;color:var(--ink-900);}
.wb-step-04{background:var(--paper-200);color:var(--ink-900);}
.wb-step-05{background:var(--ink-900);color:var(--paper-100);border-top-color:var(--line-on-ink) !important;}
.wb-step-06{background:var(--cobalt-700);color:var(--paper-100);border-top-color:rgba(245,240,235,0.2) !important;}
.wb-handoff{display:flex;align-items:center;gap:10px;padding:12px 24px;background:rgba(228,0,92,0.06);font-family:var(--mono);font-size:11px;letter-spacing:0.04em;text-transform:uppercase;color:var(--fuchsia-700);border-top:1px solid var(--paper-400);}

/* 06 VERIFICATION — fuchsia solid, one motif (kept) */
.wb-verify{background:var(--fuchsia-700);color:var(--paper-100);text-align:center;padding:110px 0;}
.wb-verify img{margin:0 auto 22px;width:38px;height:38px;}
.wb-verify h2{max-width:26ch;margin:0 auto 20px;}
.wb-verify .big{font-family:var(--sans);font-weight:800;font-size:clamp(26px,3.6vw,36px);margin-top:20px;}

/* 07 BUYERS — white, persona motifs reused from landing page's established pattern */
.wb-buyers{background:#ffffff;}
.wb-persona-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--paper-300);border:1px solid var(--paper-300);margin-top:44px;}
.wb-persona{background:#ffffff;padding:28px 24px;}
.wb-persona .role{font-family:var(--mono);font-size:11px;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-dim-paper);margin-bottom:12px;}
.wb-persona .word{font-size:30px;font-weight:800;letter-spacing:-0.01em;margin-bottom:16px;}
.wb-persona .word.cobalt{color:var(--cobalt-700);}
.wb-persona .word.fuchsia{color:var(--fuchsia-700);}
.wb-persona .word.ink{color:var(--ink-900);}
.wb-persona h3{margin-bottom:8px;}
.wb-persona p{font-size:15px;color:var(--text-dim-paper);line-height:1.55;margin:0;}

/* 08 CTA — ink + texture (kept, consistent w/ other 2 pages) */
.wb-cta{
  background:var(--ink-900);color:var(--paper-100);text-align:center;
  background-image:linear-gradient(rgba(6,8,17,0.82),rgba(6,8,17,0.9)),url(../assets/backgrounds/runs-fuchsia-on-ink.png);
  background-size:cover;background-position:center;
  padding:110px 0;
}
.wb-cta h2{max-width:14ch;margin:0 auto 14px;}
.wb-cta p{max-width:46ch;margin:0 auto;color:var(--text-dim-ink);font-size:16px;}
.wb-cta .btnrow{justify-content:center;margin-top:28px;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .wb-hero-grid{grid-template-columns:1fr;}
  .wb-matrix{grid-template-columns:1fr;}
  .wb-persona-grid{grid-template-columns:1fr;}
  .wb-branch-row{flex-direction:column;}
  .wb-reframe-grid{grid-template-columns:1fr;}
}
@media (max-width:640px){
  .wb-hero .btnrow{flex-direction:column;align-items:stretch;}
  .wb-step{grid-template-columns:1fr;gap:6px;}
  .wb-step .n{justify-self:start;}
}