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

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

/* Builders: logos in a row, one line of depth under each. */
.pwl-builders{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:36px 28px;padding:36px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pwl-builder{display:flex;flex-direction:column;gap:16px;min-width:0}
.pwl-logo-slot{display:flex;align-items:center;height:48px}
.pwl-logo{display:block;height:auto;max-width:100%}
.pwl-logo-divi{width:88px}
.pwl-logo-elementor{width:160px}
.pwl-logo-beaver{width:150px}
.pwl-logo-vc{width:180px}
.pwl-wordmark{font:600 1.7rem/1 var(--font-head);letter-spacing:-.035em;color:var(--ink)}
.pwl-builder p{color:var(--muted);font-size:.93rem;line-height:1.5}

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

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

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

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