/* ============================================================
   Playbook Library — project styles (loaded AFTER leanscale.css)
   ============================================================ */

/* nav category links act as filters (no href) */
.nav-links a[data-navcat]{cursor:pointer}

/* filter chips row (reuses .filters/.fchip from base) */
.libfilters{margin:8px 0 26px}

/* card grid */
.plib{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:4px}
@media(max-width:960px){.plib{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.plib{grid-template-columns:1fr}}

.pbcard{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--ls-light-gray);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:26px 24px;min-height:210px;
  transition:transform .2s,box-shadow .2s,border-color .2s,opacity .2s}
.pbcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lift);border-color:var(--ls-medium-purple)}
.pbcard__cat{font-size:11px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--ls-strong-purple);
  margin-bottom:13px;display:flex;align-items:center;gap:8px}
.pbcard__cat .num{color:var(--ls-medium-purple);font-variant-numeric:tabular-nums}
.pbcard__h{font-size:1.22rem;font-weight:800;letter-spacing:-.02em;color:var(--ls-dark-purple);line-height:1.14;margin-bottom:9px}
.pbcard__b{font-size:.92rem;line-height:1.55;color:var(--ls-dark-gray);flex:1}
.pbcard__foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--ls-light-gray);
  display:flex;align-items:center;justify-content:space-between;gap:10px}

.pbstatus{font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:5px 11px;border-radius:100px;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.pbstatus--live{background:var(--ls-lime);color:var(--ls-dark-purple)}
.pbstatus--live .d{width:6px;height:6px;border-radius:50%;background:#4b9b1f;box-shadow:0 0 0 3px rgba(75,155,31,.2);animation:lpulse 1.8s ease-in-out infinite}
@keyframes lpulse{0%,100%{opacity:1}50%{opacity:.4}}
.pbstatus--soon{background:#f1eef2;color:var(--ls-dark-gray)}
.pbcard__go{font-size:13px;font-weight:800;color:var(--ls-strong-purple);white-space:nowrap}
.pbcard__go .soon{color:var(--ls-dark-gray);font-weight:700}

/* live card gets the accent treatment */
.pbcard--live{border-color:var(--ls-medium-purple)}
.pbcard--live:before{content:"";position:absolute;left:0;top:22px;bottom:22px;width:4px;border-radius:0 4px 4px 0;
  background:linear-gradient(180deg,var(--ls-strong-purple),var(--ls-lime-deep))}
.pbcard--live .pbcard__h{color:var(--ls-strong-purple)}

/* coming-soon cards read quieter until hover */
.pbcard--soon{background:#fffdff}
.pbcard--soon .pbcard__h{color:var(--ls-dark-purple)}
.pbcard--soon:hover{opacity:1}

/* filter hide */
.pbcard.hide{display:none}

/* ============================================================
   FLYWHEEL — "everything compounds"
   ============================================================ */
.flywheel{position:relative;width:100%;max-width:660px;margin:14px auto 0;aspect-ratio:1/1}
.fw-ring{position:absolute;left:19%;top:19%;width:62%;height:62%;border:2px dashed var(--ls-medium-purple);
  border-radius:50%;opacity:.7}
.fw-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:31%;height:31%;border-radius:50%;
  background:linear-gradient(150deg,var(--ls-dark-purple),var(--ls-strong-purple));color:#fff;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:14px;
  box-shadow:0 22px 55px -22px rgba(100,37,133,.65)}
.fw-hub__icon{font-size:20px;line-height:1;color:var(--ls-lime);margin-bottom:8px}
.fw-hub__t{font-size:1.1rem;font-weight:800;letter-spacing:-.02em;line-height:1.05}
.fw-hub__s{font-size:11px;color:rgba(255,255,255,.72);margin-top:6px;font-weight:600;line-height:1.3}
.fw-node{position:absolute;transform:translate(-50%,-50%);width:212px;max-width:33%;background:#fff;
  border:1px solid var(--ls-light-gray);border-radius:16px;box-shadow:var(--shadow);padding:15px 17px}
.fw-node .n{font-size:11px;font-weight:800;color:var(--ls-strong-purple);letter-spacing:.05em;
  background:var(--ls-purple-soft);width:26px;height:26px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin-bottom:9px}
.fw-node h4{font-size:.96rem;font-weight:800;color:var(--ls-dark-purple);line-height:1.18;letter-spacing:-.01em}
.fw-node p{font-size:11.5px;color:var(--ls-dark-gray);line-height:1.4;margin-top:5px}
.fw-node--hero{width:250px;background:linear-gradient(150deg,var(--ls-dark-purple),var(--ls-strong-purple));
  border:none;box-shadow:0 20px 50px -22px rgba(100,37,133,.6)}
.fw-node--hero .n{background:var(--ls-lime);color:var(--ls-dark-purple)}
.fw-node--hero h4{color:#fff}
.fw-node--hero p{color:rgba(255,255,255,.75)}
.fw-node--hero .startpill{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  background:var(--ls-lime);color:var(--ls-dark-purple);padding:3px 9px;border-radius:100px;margin-bottom:9px}
/* node placement (card centers, translate -50%,-50%) */
.fw-n1{left:50%;top:6%}
.fw-n2{left:83%;top:39%}
.fw-n3{left:71%;top:88%}
.fw-n4{left:29%;top:88%}
.fw-n5{left:17%;top:39%}
.fw-loop{display:none}
@media(max-width:760px){
  .flywheel{aspect-ratio:auto;height:auto;max-width:460px;display:flex;flex-direction:column;gap:12px}
  .fw-ring{display:none}
  .fw-hub{position:static;transform:none;width:100%;height:auto;border-radius:16px;flex-direction:row;gap:12px;
    justify-content:flex-start;text-align:left;padding:18px 20px}
  .fw-hub__icon{margin:0}
  .fw-node,.fw-node--hero{position:static;transform:none;width:100%;max-width:100%}
  .fw-loop{display:block;text-align:center;font-size:12px;font-weight:700;color:var(--ls-strong-purple)}
}

/* FOUR PHASES flow */
.p4{display:flex;align-items:stretch;gap:10px;margin-top:8px}
.p4c{flex:1;background:#fff;border:1px solid var(--ls-light-gray);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:22px 20px;transition:transform .2s,box-shadow .2s,border-color .2s}
.p4c:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--ls-medium-purple)}
.p4c__n{width:32px;height:32px;border-radius:50%;background:var(--ls-purple-soft);color:var(--ls-strong-purple);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.p4c__h{font-size:1.12rem;font-weight:800;color:var(--ls-dark-purple);letter-spacing:-.02em;margin-bottom:6px}
.p4c__b{font-size:.9rem;color:var(--ls-dark-gray);line-height:1.5}
.p4arw{display:flex;align-items:center;color:var(--ls-medium-purple);font-weight:800;font-size:20px;flex:0 0 auto}
@media(max-width:760px){
  .p4{flex-direction:column}
  .p4arw{transform:rotate(90deg);align-self:center;padding:2px 0}
}

/* ============================================================
   AGENTS — the fleet
   ============================================================ */
.agents-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:4px}
@media(max-width:1000px){.agents-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.agents-grid{grid-template-columns:1fr}}

.agent{display:flex;flex-direction:column;background:#fff;border:1px solid var(--ls-light-gray);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 22px;min-height:172px;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.agent:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:var(--ls-medium-purple)}
.agent__hd{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.agent__av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:800;font-size:14px;letter-spacing:-.02em;flex:0 0 42px;box-shadow:0 6px 16px -6px rgba(48,25,52,.4)}
.agent__av--rev{background:var(--ls-strong-purple)}
.agent__av--mkt{background:#4e8f2c}
.agent__team{font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:4px 10px;border-radius:100px;white-space:nowrap}
.agent__team--rev{background:var(--ls-purple-soft);color:var(--ls-strong-purple)}
.agent__team--mkt{background:var(--ls-lime);color:#2f5c17}
.agent__name{font-size:1.08rem;font-weight:800;letter-spacing:-.02em;color:var(--ls-dark-purple);line-height:1.12}
.agent__role{font-size:12.5px;font-weight:600;color:var(--ls-dark-gray);margin-top:4px;flex:1}
.agent__foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--ls-light-gray);
  display:flex;align-items:center;justify-content:space-between;gap:8px}
.agent__status{font-size:11px;font-weight:700;color:var(--ls-dark-gray);display:inline-flex;align-items:center;gap:7px}
.agent__status i{width:6px;height:6px;border-radius:50%;background:#4b9b1f;box-shadow:0 0 0 3px rgba(75,155,31,.18)}
.dlbtn{font-size:11.5px;font-weight:800;color:var(--ls-strong-purple);background:var(--ls-purple-soft);
  border:none;border-radius:100px;padding:7px 13px;cursor:pointer;transition:.15s;font-family:inherit;white-space:nowrap}
.dlbtn:hover{background:var(--ls-strong-purple);color:#fff}
.dlbtn.done{background:var(--ls-lime);color:var(--ls-dark-purple)}
.agent.hide{display:none}

/* category legend under hero stats — optional inline */
.catlegend{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.catlegend span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--ls-dark-gray)}
.catlegend i{width:10px;height:10px;border-radius:3px;background:var(--ls-strong-purple)}

/* ---------- FEATURED PLAYBOOK ----------
   Sits above the grid and outside #grid, so the category filter never hides it.
   Onboarding is the one every engagement starts with. */
.pbfeature{position:relative;display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;
  background:linear-gradient(120deg,var(--ls-purple-soft),#fff 46%);
  border:1px solid var(--ls-medium-purple);border-radius:var(--radius);box-shadow:var(--shadow-lift);
  padding:32px 34px;margin-bottom:26px;overflow:hidden;
  transition:transform .2s,box-shadow .2s,border-color .2s}
.pbfeature:hover{transform:translateY(-5px);box-shadow:0 26px 60px -22px rgba(100,37,133,.4);border-color:var(--ls-strong-purple)}
.pbfeature:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;
  background:linear-gradient(180deg,var(--ls-strong-purple),var(--ls-lime-deep))}
.pbfeature__eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ls-strong-purple);background:var(--ls-lime);border-radius:100px;
  padding:6px 14px;margin-bottom:15px}
.pbfeature__eyebrow .pip{width:7px;height:7px;border-radius:50%;background:var(--ls-strong-purple)}
.pbfeature__h{font-size:2.1rem;font-weight:800;letter-spacing:-.03em;line-height:1.05;color:var(--ls-dark-purple);margin-bottom:11px}
.pbfeature__b{font-size:1rem;line-height:1.6;color:var(--ls-dark-gray);max-width:68ch}
.pbfeature__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pbfeature__stat{font-size:12px;font-weight:700;color:var(--ls-dark-gray);background:#fff;
  border:1px solid var(--ls-light-gray);border-radius:100px;padding:7px 14px;white-space:nowrap}
.pbfeature__stat b{color:var(--ls-strong-purple);font-weight:800;margin-right:5px}
.pbfeature__r{display:flex;flex-direction:column;align-items:flex-end;gap:14px;white-space:nowrap}
.pbfeature__go{font-size:14px;font-weight:800;color:var(--ls-strong-purple)}
@media(max-width:860px){
  .pbfeature{grid-template-columns:1fr;gap:18px;padding:28px 26px}
  .pbfeature__r{flex-direction:row;align-items:center;justify-content:space-between;width:100%}
  .pbfeature__h{font-size:1.7rem}
}