/* "Why teams switch": three problem cards that flip from the pain to the fix */
.pb-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;perspective:1100px}
.pb-card{--rx:0deg;--ry:0deg;position:relative;display:flex;flex-direction:column;min-width:0;padding:22px;background:var(--bn-bg);border:1px solid var(--bn-line);border-radius:20px;overflow:hidden;
  transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .3s;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.pb-card:hover{box-shadow:var(--bn-shadow);border-color:var(--bn-accent2)}
.pb-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.pb-n{font-weight:800;font-size:.85rem;letter-spacing:.1em;color:var(--bn-accent)}
html[data-theme="dark"] .pb-n{color:#C4B5FD}
.pb-state{display:inline-flex;align-items:center;gap:7px;font-size:.7rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:5px 11px;border-radius:999px;background:rgba(220,38,38,.12);color:#DC2626;transition:background .4s,color .4s}
.pb-state:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pb-state:after{content:"Without LMSht"}
html[data-theme="dark"] .pb-state{color:#F87171;background:rgba(248,113,113,.14)}
.pb-card[data-state="fix"] .pb-state{background:rgba(4,120,87,.12);color:#047857}
html[data-theme="dark"] .pb-card[data-state="fix"] .pb-state{background:rgba(52,211,153,.14);color:#34D399}
.pb-card[data-state="fix"] .pb-state:after{content:"With LMSht"}

.pb-vis{position:relative;height:196px;border-radius:14px;background:var(--bn-vis);border:1px solid var(--bn-line);overflow:hidden;display:grid;place-items:center}
.pb-card h3{display:block;margin:20px 0 8px;font-size:1.4rem;letter-spacing:-.02em;color:var(--bn-text)}
.pb-prob{color:var(--bn-muted);font-size:.95rem;line-height:1.55;min-height:4.7em}
.pb-fix{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--bn-bar);border:1px solid transparent;display:flex;gap:10px;align-items:flex-start;color:var(--bn-text);font-weight:600;font-size:.92rem;line-height:1.45;opacity:.5;transform:translateY(5px);transition:opacity .5s,transform .5s cubic-bezier(.16,1,.3,1),border-color .4s}
.pb-fix .ms{color:var(--bn-accent2);font-size:20px;margin-top:1px;transition:transform .5s cubic-bezier(.34,1.56,.64,1)}
.pb-card[data-state="fix"] .pb-fix{opacity:1;transform:none;border-color:var(--bn-accent2)}
.pb-card[data-state="fix"] .pb-fix .ms{transform:rotate(180deg) scale(1.15)}
.pb-btn{margin-top:auto;padding-top:0;align-self:flex-start}
.pb-btn button{margin-top:16px;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:999px;border:1px solid var(--bn-line);background:transparent;color:var(--bn-text);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;transition:border-color .2s,background .2s,transform .3s cubic-bezier(.34,1.56,.64,1)}
.pb-btn button:hover{border-color:var(--bn-accent2);background:var(--bn-bar);transform:translateY(-2px)}
.pb-btn button:active{transform:scale(.97)}
.pb-btn button .ms{font-size:20px;transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.pb-btn button:hover .ms{transform:translateX(3px)}
.pb-card[data-state="fix"] .pb-btn button .ms{transform:rotate(180deg)}
.pb-card[data-state="fix"] .pb-btn button:hover .ms{transform:rotate(180deg) translateX(3px)}

/* 1 - the black hole: a dark grid of unknowns that lights up */
.pb-dots{display:grid;grid-template-columns:repeat(5,44px);gap:11px;position:relative;z-index:1;margin-top:-18px}
.pb-dots i{width:44px;height:44px;border-radius:12px;background:var(--bn-vis2);border:1.5px dashed var(--bn-line);display:grid;place-items:center;font-style:normal;font-weight:800;color:var(--bn-muted);
  transition:background .5s calc(var(--i) * 60ms),border-color .5s calc(var(--i) * 60ms),transform .55s calc(var(--i) * 60ms) cubic-bezier(.34,1.56,.64,1),box-shadow .5s calc(var(--i) * 60ms)}
.pb-dots i:after{content:"?";transition:opacity .3s}
.pb-card[data-state="fix"] .pb-dots i{background:var(--c);border:1.5px solid transparent;transform:scale(1.04);box-shadow:0 8px 20px -8px var(--c)}
.pb-card[data-state="fix"] .pb-dots i:after{opacity:0}
.pb-dots .g{--c:#10B981}.pb-dots .a{--c:#F59E0B}.pb-dots .r{--c:#F43F5E}.pb-dots .b{--c:#8B5CF6}
.pb-vis.dark:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 18%,rgba(9,9,11,.62) 78%);transition:opacity .8s}
html[data-theme="light"] .pb-vis.dark:before{background:radial-gradient(circle at 50% 50%,transparent 18%,rgba(15,23,42,.2) 82%)}
.pb-card[data-state="fix"] .pb-vis.dark:before{opacity:0}
.pb-sum{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--bn-text);color:var(--bn-bg);font-weight:800;font-size:.78rem;opacity:0;transform:translateY(10px) scale(.9);transition:.5s .5s cubic-bezier(.34,1.56,.64,1)}
.pb-card[data-state="fix"] .pb-sum{opacity:1;transform:none}
.pb-warn{position:absolute;left:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:rgba(220,38,38,.14);color:#DC2626;font-weight:800;font-size:.78rem;transition:opacity .3s,transform .4s}
html[data-theme="dark"] .pb-warn{color:#FCA5A5}
.pb-warn .ms,.pb-sum .ms{font-size:16px}
.pb-card[data-state="fix"] .pb-warn{opacity:0;transform:translateY(8px)}

/* 2 - the content bottleneck: a slow manual build vs an AI draft */
.pb-race{width:84%;display:grid;gap:18px}
.pb-lane small{display:flex;justify-content:space-between;font-weight:700;font-size:.75rem;color:var(--bn-muted);margin-bottom:7px}
.pb-lane small b{color:var(--bn-text)}
.pb-trk{height:14px;border-radius:14px;background:var(--bn-track);overflow:hidden;position:relative}
.pb-trk i{position:absolute;inset:0;transform-origin:0 50%;transform:scaleX(0);border-radius:14px}
.pb-lane.m i{background:linear-gradient(90deg,#94A3B8,#64748B);animation:pbCreep 6s linear infinite}
@keyframes pbCreep{0%{transform:scaleX(.04)}100%{transform:scaleX(.58)}}
.pb-card[data-state="fix"] .pb-lane.m{opacity:.4}
.pb-card[data-state="fix"] .pb-lane.m i{animation-play-state:paused}
.pb-lane{transition:opacity .5s}
.pb-lane.a i{background:linear-gradient(90deg,var(--bn-accent),var(--bn-accent2));transition:transform 1.3s cubic-bezier(.65,0,.35,1)}
.pb-card[data-state="fix"] .pb-lane.a i{transform:scaleX(1)}
.pb-lane.a .pub{display:inline-flex;align-items:center;gap:4px;font-weight:800;color:#047857;opacity:0;transform:scale(.6);transition:.4s 1.2s cubic-bezier(.34,1.56,.64,1)}
html[data-theme="dark"] .pb-lane.a .pub{color:#34D399}
.pb-lane.a .pub .ms{font-size:15px}
.pb-card[data-state="fix"] .pb-lane.a .pub{opacity:1;transform:none}
.pb-clock{position:absolute;right:14px;top:12px;font-size:22px;color:var(--bn-muted);transition:transform .8s cubic-bezier(.34,1.56,.64,1),color .4s}
.pb-card[data-state="fix"] .pb-clock{transform:rotate(360deg) scale(.9);color:var(--bn-accent2)}

/* 3 - the ghost platform: faded learners that wake up */
.pb-avs{display:flex;gap:14px;align-items:flex-start}
.pb-av{display:flex;flex-direction:column;align-items:center;gap:7px;width:52px}
.pb-av .face{position:relative;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:.85rem;color:#fff;background:var(--c,#8B5CF6);
  filter:grayscale(1);opacity:.4;animation:pbGhost 3.4s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s);transition:filter .6s,opacity .6s}
@keyframes pbGhost{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.pb-av small{font-size:.68rem;font-weight:700;color:var(--bn-muted);white-space:nowrap}
.pb-av small .on{display:none}
.pb-card[data-state="fix"] .pb-av .face{filter:none;opacity:1;animation:none;transform:scale(1.04);box-shadow:0 8px 18px -8px var(--c)}
.pb-card[data-state="fix"] .pb-av small .off{display:none}
.pb-card[data-state="fix"] .pb-av small .on{display:inline}
.pb-coin{position:absolute;right:-8px;top:-10px;padding:2px 7px;border-radius:999px;background:#FEF9C3;color:#713F12;font-weight:800;font-size:.66rem;opacity:0;transform:translateY(8px) scale(.5);transition:.45s calc(.3s + var(--i) * .18s) cubic-bezier(.34,1.56,.64,1)}
.pb-card[data-state="fix"] .pb-coin{opacity:1;transform:none}
.pb-streak{position:absolute;left:50%;bottom:14px;transform:translate(-50%,10px) scale(.9);display:inline-flex;align-items:center;gap:6px;padding:6px 13px;border-radius:999px;background:var(--bn-text);color:var(--bn-bg);font-weight:800;font-size:.78rem;opacity:0;white-space:nowrap;transition:.5s .9s cubic-bezier(.34,1.56,.64,1)}
.pb-streak .ms{font-size:16px;color:#F97316}
.pb-card[data-state="fix"] .pb-streak{opacity:1;transform:translate(-50%,0)}
.pb-vis.col{align-content:center;padding-bottom:30px}

@media (max-width:1040px){.pb-grid{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}.pb-prob{min-height:0}}
@media (prefers-reduced-motion:reduce){.pb-card,.pb-dots i,.pb-fix,.pb-av .face,.pb-lane i{transition:none!important;animation:none!important}}

.pb-w3{left:12px;bottom:12px;position:absolute;z-index:3}
.pb-card[data-state="fix"] .pb-w3{opacity:0;transform:translateY(8px)}
.price-note{text-align:center;color:var(--muted);font-size:.95rem;margin-top:26px}
.copy .soc{display:flex;gap:18px;flex-wrap:wrap}.copy .soc a{color:var(--muted);font-weight:600}.copy .soc a:hover{color:var(--brand)}
html[data-theme="dark"] .copy .soc a:hover{color:#C4B5FD}