/* /platforms/woocommerce. Page-only rules, prefix pwc-. No accent bars, side lines or icon tiles. */
.pf-job .steps{--n:5}

/* Jobs: a ruled list, with the art on the right (the WordPress page puts it on the left). */
.pwc-jobs{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(32px,5vw,80px);align-items:center}
.pwc-jobs-img{display:block;width:100%;aspect-ratio:4/5;max-height:640px;object-fit:cover;border-radius:20px;background:#0A0D14}
.pwc-list{display:flex;flex-direction:column}
.pwc-list > div{padding:16px 0;border-top:1px solid var(--line)}
.pwc-list > div:last-child{border-bottom:1px solid var(--line)}
.pwc-list dt{font:600 1.05rem/1.3 var(--font-head);letter-spacing:-.01em;color:var(--ink)}
.pwc-list dd{margin:4px 0 0;color:var(--muted);line-height:1.55}

/* Playbook: a wide art strip above the topic list. */
.pwc-strip{display:block;width:100%;height:clamp(160px,20vw,280px);object-fit:cover;object-position:center 45%;border-radius:20px;margin-bottom:28px;background:#0A0D14}

/* Demos: a screenshot, then the two links. */
.pwc-demos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pwc-demo{display:flex;flex-direction:column;min-width:0;background:var(--canvas);border:1px solid var(--line);border-radius:18px;overflow:hidden}
.pwc-demo img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#E9E8E4}
.pwc-demo-body{display:flex;flex:1;flex-direction:column;gap:4px;padding:20px 22px 10px}
.pwc-demo h3{font-size:1.1rem}
.pwc-demo-body p{color:var(--muted);font-size:.93rem;line-height:1.5}
.pwc-demo-body .pwc-demo-links{margin-top:auto;padding-top:6px;display:flex;flex-wrap:wrap;gap:0 22px}
.pwc-demo-links a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:600;color:var(--blue-ink)}

/* The depth cards sit on a white band here, so they take the canvas tone. */
.pg-platforms-woocommerce .sec-white .pf-can > div{background:var(--canvas)}
.pg-platforms-woocommerce .sec-white .pf-can > .pf-not{background:transparent}

@media (max-width:900px){
  .pwc-jobs{grid-template-columns:minmax(0,1fr)}
  .pwc-jobs-img{order:-1;aspect-ratio:16/9;max-height:300px}
  .pwc-demos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pwc-demo:last-child:nth-child(odd){grid-column:1 / -1}
}
@media (max-width:640px){
  .pwc-demos{grid-template-columns:minmax(0,1fr)}
}