/* Product Strategy path — the 'new' arm of the pspath experiment.
 *
 * Scoped under .ps. A handful of .psp-* names are restyled here because the
 * page's inline script and ps-tools.js bind to them — see the header of
 * includes/sections/pspath-new.php. Written fresh rather than derived from
 * bapath-new.css: that file carries a capstone, a certificate and an UNSCOPED
 * glossary-tooltip block, and copying it would have shipped rules for elements
 * this page does not have and one that could reach the old arm.
 *
 * Colours stated outright — design-system.css styles bare p/h1..h6/a. */

.ps{
  --ps-ink:#0a0a0a; --ps-paper:#fff; --ps-dim:#5c626b; --ps-lab:#6b7280;
  --ps-hair:#e6e6e6; --ps-blue:#1a3aff; --ps-green:#0f7a4a; --ps-warn:#b45309;
  --ps-pad:clamp(20px,5vw,64px);
  background:var(--ps-paper); color:var(--ps-ink);
}
.ps *{box-sizing:border-box}
.ps-in{max-width:1180px;margin:0 auto;padding:0 var(--ps-pad)}

/* hero */
.ps-hero{background:var(--ps-blue);color:#fff;padding:clamp(44px,7vw,84px) 0 0}
.ps-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;color:rgba(255,255,255,.82)}
.ps-h1{font-size:clamp(30px,5.4vw,64px);line-height:1.09;letter-spacing:-.045em;font-weight:800;
  margin:16px 0 0;max-width:19ch;color:#fff}
.ps-lead{font-size:clamp(15px,1.6vw,18px);line-height:1.5;margin:22px 0 0;max-width:58ch;color:rgba(255,255,255,.9)}
.ps-lead b{color:#fff;font-weight:700}
.ps-traps{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px}
.ps-traps span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:6px 12px;border:1px solid rgba(255,255,255,.45);color:#fff}
.ps-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.ps-btn{display:inline-block;font-size:13.5px;font-weight:800;text-decoration:none;padding:13px 22px;
  border:2px solid currentColor;border-radius:0;white-space:nowrap;line-height:1.2;cursor:pointer;font-family:inherit}
.ps-btn-solid{background:#fff;color:var(--ps-ink);border-color:#fff}
.ps-btn-solid:hover{background:#f0f0f0;color:var(--ps-ink);text-decoration:none}
.ps-btn-ghost{background:transparent;color:#fff}
.ps-btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff;text-decoration:none}
.ps-btn-on{background:var(--ps-ink);color:#fff;border-color:var(--ps-ink)}
.ps-btn-on:hover{background:#252525;color:#fff;text-decoration:none}
.ps-figs{display:grid;grid-template-columns:1fr;border-top:1px solid rgba(255,255,255,.3);margin-top:clamp(32px,5vw,56px)}
@media (min-width:700px){ .ps-figs{grid-template-columns:repeat(3,1fr)} }
.ps-fig{padding:20px 0 22px;border-bottom:1px solid rgba(255,255,255,.16)}
@media (min-width:700px){
  .ps-fig{border-bottom:0;border-left:1px solid rgba(255,255,255,.3);padding-left:24px}
  .ps-fig:first-child{border-left:0;padding-left:0}
}
/* Child combinators: `.ps-fig span` would also claim the <a> in the third one. */
.ps-fig > b{display:block;font-size:clamp(34px,5vw,60px);line-height:.9;font-weight:800;
  letter-spacing:-.05em;font-variant-numeric:tabular-nums;color:#fff}
.ps-fig > span{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;color:rgba(255,255,255,.78);margin-top:10px}
.ps-fig > span a{color:#fff;text-decoration:underline;text-underline-offset:3px}
.ps-bar{height:6px;background:rgba(255,255,255,.25);margin-top:4px}
.ps-bar i{display:block;height:100%;background:#fff}

/* body */
.ps-body{padding:clamp(38px,6vw,72px) 0 0}
.ps-sec{margin-bottom:clamp(42px,6vw,76px)}
.ps-h2{font-size:clamp(24px,3.2vw,40px);line-height:1.1;letter-spacing:-.035em;font-weight:800;margin:0 0 10px;color:var(--ps-ink)}
.ps-sub{font-size:15px;line-height:1.55;color:var(--ps-dim);margin:0 0 24px;max-width:70ch}
.ps-sub b{color:var(--ps-ink)}

/* panels */
.ps-panel{border:2px solid var(--ps-ink);padding:24px 26px;display:flex;gap:22px;align-items:center;
  justify-content:space-between;flex-wrap:wrap}
.ps-panel-ink{background:var(--ps-ink);color:#fff}
.ps-panel-ink .ps-panel-k{color:rgba(255,255,255,.6)}
.ps-panel-ink .ps-panel-t{color:#fff}
.ps-panel-ink .ps-panel-p{color:rgba(255,255,255,.86)}
.ps-panel-ink .ps-btn-on{background:#fff;color:var(--ps-ink);border-color:#fff}
.ps-panel-ink .ps-btn-on:hover{background:#e8e8e8;color:var(--ps-ink)}
.ps-panel-cta{border-left-width:10px;border-left-color:var(--ps-blue)}
.ps-panel-k{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--ps-lab)}
/* Explicit colour: a bare p{} rule in design-system.css beats inheritance. */
.ps-panel-t{font-size:clamp(19px,2.2vw,26px);font-weight:800;letter-spacing:-.03em;line-height:1.2;
  margin:8px 0 0;color:var(--ps-ink)}
.ps-panel-p{font-size:14px;line-height:1.55;color:var(--ps-dim);margin:9px 0 0;max-width:64ch}

/* steps — .psp-step / .psp-card kept for the anchors and the script */
.ps-steps{border-top:2px solid var(--ps-ink)}
.ps .psp-step{border-bottom:1px solid var(--ps-hair);display:block}
.ps .psp-step:last-child{border-bottom:2px solid var(--ps-ink)}
.ps .psp-card{padding:22px 0 24px;background:transparent;border:0;border-radius:0;box-shadow:none}
.ps .psp-card-top{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.ps-num{flex:0 0 auto;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--ps-ink);color:#fff;font-size:12.5px;font-weight:800;align-self:center}
.ps .psp-step.done .ps-num{background:var(--ps-green)}
.ps .psp-card-top h3{flex:1 1 260px;margin:0;font-size:clamp(17px,1.9vw,22px);font-weight:800;
  letter-spacing:-.02em;line-height:1.25;color:var(--ps-ink)}
.ps-badge{flex:0 0 auto;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
  padding:4px 9px;border:1px solid var(--ps-hair);color:var(--ps-lab)}
.ps-b-done{background:var(--ps-green);border-color:var(--ps-green);color:#fff}
.ps-b-prog{border-color:var(--ps-ink);color:var(--ps-ink)}
.ps-fix,.ps-do{margin:11px 0 0;font-size:14px;line-height:1.55;color:var(--ps-dim)}
.ps-fix b{color:var(--ps-warn);font-weight:800}
.ps-do b{color:var(--ps-green);font-weight:800}
.ps-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:13px;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;font-weight:700;color:var(--ps-lab)}
.ps .psp-prog{height:4px;background:var(--ps-hair);margin-top:14px}
.ps .psp-prog span{display:block;height:100%;background:var(--ps-blue)}
.ps .psp-card-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:17px}
.ps .psp-blink{display:inline-block;font-size:12.5px;font-weight:800;text-decoration:none;padding:10px 17px;
  border:2px solid var(--ps-ink);background:var(--ps-ink);color:#fff;line-height:1.2;border-radius:0}
.ps .psp-blink:hover{background:#252525;color:#fff;text-decoration:none}
.ps .psp-blink.ghost{background:transparent;color:var(--ps-ink)}
.ps .psp-blink.ghost:hover{background:var(--ps-ink);color:#fff}
.ps .psp-toggle{font-family:inherit;font-size:12.5px;font-weight:800;padding:10px 17px;
  border:2px solid var(--ps-ink);background:transparent;color:var(--ps-ink);border-radius:0;cursor:pointer;line-height:1.2}
.ps .psp-toggle:hover{background:var(--ps-ink);color:#fff}
/* The inline script toggles the class `open` — verified in the page, not
   assumed. `.is-open` would have left every lesson list permanently shut. */
.ps .psp-lessons{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--ps-hair)}
.ps .psp-lessons.open{display:block}
.ps .psp-lessons ol{margin:0;padding-left:20px;display:grid;gap:6px}
.ps .psp-lessons li{font-size:13.5px;line-height:1.5;color:var(--ps-dim)}

/* tools */
.ps .psp-tool{border:0;border-bottom:1px solid var(--ps-hair);border-radius:0;padding:20px 0 24px;margin:0}
.ps .psp-tool:last-child{border-bottom:2px solid var(--ps-ink)}
.ps .psp-tool > h3{margin:0;font-size:16.5px;font-weight:800;letter-spacing:-.015em;line-height:1.3;color:var(--ps-ink)}
.ps .psp-tool-sub{margin:8px 0 14px;font-size:13.5px;line-height:1.55;color:var(--ps-dim);max-width:74ch}
/* ps-tools.js injects its own sheet with the old palette baked in. */
.ps .psp-tool [class^="ps-"],.ps .psp-tool [class*=" ps-"],
.ps .psp-tool input,.ps .psp-tool textarea,.ps .psp-tool select,.ps .psp-tool button{border-radius:0}

/* what next */
.ps-next{display:grid;grid-template-columns:1fr;border:2px solid var(--ps-ink)}
@media (min-width:820px){ .ps-next{grid-template-columns:repeat(3,1fr)} }
.ps-next-c{display:block;padding:20px 22px;text-decoration:none;color:var(--ps-ink);border-bottom:1px solid var(--ps-hair)}
.ps-next-c:last-child{border-bottom:0}
@media (min-width:820px){
  .ps-next-c{border-right:1px solid var(--ps-hair);border-bottom:0}
  .ps-next-c:last-child{border-right:0}
}
.ps-next-c:hover{background:#f6f6f6;text-decoration:none;color:var(--ps-ink)}
.ps-next-c b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em}
.ps-next-c span{display:block;margin-top:8px;font-size:13px;line-height:1.5;color:var(--ps-dim)}

/* closing strip */
.ps-strip{background:var(--ps-green);color:#fff;padding:clamp(34px,5vw,60px) 0}
.ps-strip-in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.ps-strip-t{font-size:clamp(20px,2.6vw,32px);font-weight:800;letter-spacing:-.03em;line-height:1.15;margin:0;color:#fff}
.ps-strip-s{font-size:14.5px;line-height:1.55;margin:9px 0 0;color:rgba(255,255,255,.9);max-width:62ch}
.ps-strip .ps-btn-on{background:#fff;color:var(--ps-ink);border-color:#fff}
.ps-strip .ps-btn-on:hover{background:#eee;color:var(--ps-ink)}

/* ── tool widgets built by ps-tools.js ───────────────────────────────────────
   The five toolkit mounts are filled at runtime, and ps-tools.js carries its own
   <style> for the .pst-* markup it creates — 10px radii and a 999px pill, which
   no stylesheet on disk covers. The tools therefore stayed rounded inside a page
   with square everything else, and only after the widget rendered, so a static
   pass over the served HTML never sees it.

   ps-tools.js is loaded by BOTH arms, so it is not the thing to edit. These are
   (0,2,0) against its (0,1,0) and apply only under .ps, the new arm's root. */
.ps .pst-input,.ps .pst-btn,.ps .pst-preview,.ps .pst-verdict,
.ps .pst-reply,.ps .pst-mtable{border-radius:0}
.ps .pst-vlabel{border-radius:0}
.ps .pst-btn{border:2px solid var(--ps-ink,#0a0a0a);font-weight:800}
.ps .pst-input{border:2px solid var(--ps-hair,#e6e6e6)}
.ps .pst-input:focus{border-color:var(--ps-ink,#0a0a0a);outline:none;box-shadow:none}
.ps .pst-reply,.ps .pst-mtable{border:2px solid var(--ps-hair,#e6e6e6)}