/* Who we protect (v2) — a decision path: pick your audience → your path → same finding → side by side → shared engine. */
.t-creators{--tint:#a95cff}.t-executives{--tint:#ffb340}.t-agencies{--tint:#43e3bf}.t-brands{--tint:#ff6b8a}
.wp-step{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;background:linear-gradient(135deg,var(--v),var(--v2));color:#fff;font-size:11px;letter-spacing:0;margin-right:2px}
.kicker:has(.wp-step)::before{display:none}
.wp-chap{scroll-margin-top:100px}
#pick{padding-top:60px}

/* 1. persona cards */
.wp-personas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wp-persona{display:flex;flex-direction:column;padding:0;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s;min-width:0}
.wp-persona:hover{transform:translateY(-4px)}
.wp-persona.on{border-color:color-mix(in srgb,var(--tint) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 40%,transparent),0 24px 60px -20px color-mix(in srgb,var(--tint) 55%,transparent)}
.wp-persona .ph{display:block;height:150px;position:relative;overflow:hidden}
.wp-persona .ph img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.7);transition:transform .8s,filter .5s}
.wp-persona:hover .ph img,.wp-persona.on .ph img{transform:scale(1.06);filter:saturate(1) brightness(.85)}
.wp-persona .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(10,8,22,.95))}
.wp-persona .tag{position:absolute;left:14px;top:14px;z-index:1;font:600 10.5px var(--mono);padding:5px 9px;border-radius:999px;background:rgba(7,6,15,.65);border:1px solid var(--line2);backdrop-filter:blur(8px)}
.wp-persona .bd{padding:16px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.wp-persona .k{font:600 10.5px/1.4 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.wp-persona .h3t{font-size:17px;font-weight:700;display:flex;align-items:center;gap:9px;letter-spacing:-.02em}
.wp-persona .h3t i{color:var(--tint)}
.wp-persona .p{color:var(--muted);font-size:13.5px}
.wp-persona .asset{font-size:12.5px;color:var(--faint);padding-top:10px;border-top:1px solid var(--line);margin-top:auto}
.wp-persona .asset b{color:var(--tint);display:block;font-size:14px}
.wp-persona .go{font-size:13px;font-weight:600;color:var(--v2);display:flex;align-items:center;gap:6px}
.wp-persona.on .go{color:var(--tint)}

/* 2. the path */
.wp-path__head{display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.wp-path__head>div{flex:1;min-width:0}
.wp-path__head h3{font-size:28px;font-weight:800;margin-top:8px}
.wp-path__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;font-size:22px;color:var(--tint);background:color-mix(in srgb,var(--tint) 16%,transparent);border:1px solid color-mix(in srgb,var(--tint) 35%,transparent)}
.wp-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wp-col{padding:24px;min-width:0;display:flex;flex-direction:column;gap:16px}
.wp-col__n{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tint);display:flex;gap:8px;align-items:center}
.wp-col__lead{font-size:18px;font-weight:700;letter-spacing:-.02em;line-height:1.3}
.impact{display:grid;gap:12px}
.impact .row{display:flex;gap:12px;align-items:flex-start}
.impact .row i{font-size:18px;color:var(--red);flex:none}
.impact .row b{display:block;font-size:14px}.impact .row span{color:var(--muted);font-size:13px}
.wp-kv{display:grid;gap:8px;margin-top:auto;padding-top:14px;border-top:1px solid var(--line)}
.wp-kv>div{display:grid;gap:2px}
.wp-kv dt{font:600 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.wp-kv dd{font-size:13.5px}
.wp-feat{display:grid;gap:12px}
.wp-feat li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.wp-feat .ico{width:18px;height:18px;color:var(--tint);margin-top:2px}
.wp-feat b{display:block;font-size:14px}
.wp-feat span{display:block;color:var(--faint);font-size:12.5px;line-height:1.45}
.wp-score{display:flex;align-items:center;gap:14px}
.wp-score .ring{width:84px;height:84px;margin:0;flex:none}
.wp-score .ring::before{inset:7px}
.wp-score .ring b{font-size:26px}
.wp-score b{display:block;font-size:14.5px}
.wp-score span{font-size:12.5px}
.wp-menu{display:flex;flex-wrap:wrap;gap:6px}
.wp-menu li{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--line);color:var(--muted)}
.wp-menu li:first-child{color:#fff;border-color:color-mix(in srgb,var(--tint) 55%,transparent);background:color-mix(in srgb,var(--tint) 14%,transparent)}
.wp-next{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:18px;padding:18px 22px;border-radius:18px;background:linear-gradient(90deg,rgba(146,81,255,.18),rgba(67,227,191,.08));border:1px solid rgba(169,92,255,.35)}
.wp-next p{min-width:0;flex:1 1 320px;font-size:15px}

/* 3. one finding */
.wp-case{display:flex;align-items:center;gap:14px;padding:16px 20px;margin-bottom:18px;flex-wrap:wrap}
.wp-case .ic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(255,77,109,.15);color:var(--red)}
.wp-case .ico{width:20px;height:20px}
.wp-case b{font:700 15px var(--mono);overflow-wrap:anywhere}
.wp-case>span:last-child{color:var(--faint);font-size:13px}
.wp-read__col{padding:22px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;transition:border-color .3s,box-shadow .3s}
.wp-read__col::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.sev-edge-4::before{background:var(--red)}.sev-edge-3::before{background:var(--amber)}.sev-edge-2::before{background:var(--v2)}
.wp-read__col.pick{border-color:color-mix(in srgb,var(--tint) 65%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--tint) 35%,transparent)}
.wp-read__who{font:600 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tint)}
.wp-read__label{font-weight:700;font-size:16px}
.wp-read__col p{color:var(--muted);font-size:13.5px}
.wp-read__act{margin-top:auto;display:flex;gap:8px;align-items:center;font-weight:600;font-size:13px;color:var(--teal)}
.wp-foot{font-size:12.5px;margin-top:16px}

/* 4. matrix */
.wp-matrix{padding:8px;overflow-x:auto}
.wp-matrix table{min-width:780px}
.wp-matrix thead th{vertical-align:bottom}
.wp-matrix thead a{font:700 14px var(--sans);letter-spacing:-.01em;text-transform:none;color:#fff}
.wp-matrix thead a:hover{color:var(--tint)}
.wp-matrix__bar{display:block;width:28px;height:3px;border-radius:2px;background:var(--tint);margin-bottom:8px}
.wp-matrix tbody th{font:500 13.5px var(--sans);letter-spacing:0;text-transform:none;color:var(--faint);width:190px}
.wp-matrix td{color:var(--muted);transition:background .3s,color .3s}
.wp-matrix .pick{background:rgba(255,255,255,.04);color:#fff}
.wp-matrix thead .pick{box-shadow:inset 0 2px 0 var(--teal)}

/* 5. engine drawing */
.who-spine{padding:18px;overflow-x:auto}
.who-spine svg{display:block;width:100%;min-width:760px;height:auto}
.who-spine__head{fill:rgba(255,255,255,.03);stroke:var(--line2)}
.who-spine__tint{fill:var(--tint)}
.who-spine__chip{fill:color-mix(in srgb,var(--tint) 16%,transparent)}
.who-spine__ic{color:var(--tint);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.who-spine__name{fill:#fff;font:700 15px var(--sans)}
.who-spine__note{fill:var(--faint);font:500 11px var(--mono)}
.who-spine__rule{stroke:var(--line)}
.who-spine__asset{fill:var(--tint);font:600 12.5px var(--sans)}
.who-spine__lane{fill:none;stroke:var(--line2);stroke-width:1.5}
.who-spine__glow{fill:none;stroke:var(--v2);stroke-width:2;opacity:.55}
.who-spine__pulse{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-dasharray:6 94;animation:wp-pulse 3.2s linear infinite}
.who-spine__l2{animation-delay:-.8s}.who-spine__l3{animation-delay:-1.6s}.who-spine__l4{animation-delay:-2.4s}
@keyframes wp-pulse{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.who-spine__stem{stroke:var(--v2);stroke-width:2}
.who-spine__halo{fill:rgba(67,227,191,.15);stroke:rgba(67,227,191,.5)}
.who-spine__split{fill:var(--teal)}
.who-spine__bar{fill:rgba(146,81,255,.12);stroke:rgba(169,92,255,.4)}
.who-spine__core{fill:#fff;font:700 12px var(--mono);letter-spacing:.2em;text-anchor:middle}
.who-spine__rail{stroke:var(--line2);stroke-width:2}
.who-spine__dot{fill:var(--v2)}
.who-spine__cap{fill:var(--muted);font:600 10.5px var(--mono);letter-spacing:.14em;text-anchor:middle}
.wp-shared-head{margin:44px 0 16px}
.wp-shared-head .h3{margin-top:12px}
.wp-shared{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.wp-shared li{padding:24px 20px;display:flex;flex-direction:column;gap:8px;border-left:1px solid var(--line);min-width:0}
.wp-shared li:first-child{border-left:0}
.wp-shared .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(146,81,255,.16);color:var(--v2)}
.wp-shared .ico{width:20px;height:20px}
.wp-shared b{font-size:15px}
.wp-shared li>span:last-child{color:var(--muted);font-size:13px}

/* principle */
.wp-principle{padding:44px}
.wp-principle p{color:var(--muted);font-size:15.5px;margin-top:14px}

@media (max-width:1180px){
  .wp-personas{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp-cols{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .wp-get{grid-column:span 2}
  .wp-shared{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wp-shared li{border-left:0;border-top:1px solid var(--line)}
  .wp-shared li:nth-child(-n+2){border-top:0}
}
@media (max-width:760px){
  .wp-personas,.wp-cols,.wp-shared{grid-template-columns:minmax(0,1fr)}
  .wp-get{grid-column:auto}
  .wp-shared li:nth-child(2){border-top:1px solid var(--line)}
  .wp-path__head h3{font-size:22px}
  .wp-path__head>div{flex-basis:calc(100% - 70px)}
  .wp-path__head .kicker{font-size:10.5px;letter-spacing:.1em;line-height:1.4}
  .wp-path__head .kicker::before{display:none}
  .wp-col{padding:20px}
  .wp-principle{padding:28px 20px}
  .wp-next .ctas{width:100%}
}