.capability{--cap-black:#0a0a0b;--cap-ink:#1d1e22;--cap-gray-600:#6b6d75;--cap-gray-400:#aeb0b8;--cap-gray-200:#e7e8ea;--cap-gray-100:#f1f2f4;--cap-surface:#fff;background:var(--color-ground);border-top:1px solid var(--color-border)}.capability__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;display:grid}.capability-card{border:1px solid var(--cap-gray-200);border-radius:var(--radius-lg);background:#fdfdfd;flex-direction:column;gap:16px;padding:22px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s cubic-bezier(.16,1,.3,1),border-color .4s;display:flex;box-shadow:0 1px 2px #0a0a0b08}.capability-card:hover{border-color:var(--cap-gray-400);transform:translateY(-6px);box-shadow:0 1px 2px #0a0a0b0a,0 24px 48px -16px #0a0a0b24}.capability-card__body h3{letter-spacing:-.01em;color:var(--cap-black);margin:0 0 3px;font-size:15.5px;font-weight:650}.capability-card__body p{color:var(--cap-gray-400);margin:0;font-size:12.5px;line-height:1.4}.capability-mockup{border-radius:var(--radius-md);perspective:900px;flex:1;overflow:hidden}.mockup-window{background:var(--cap-gray-100);border:1px solid var(--cap-gray-200);border-radius:var(--radius-md);box-sizing:border-box;height:100%;transform-style:preserve-3d;will-change:transform;padding:20px;transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}.capability-card:hover .mockup-window{transform:rotateX(3deg)rotateY(-3deg)scale(1.03)translateY(-2px);box-shadow:0 20px 36px -18px #0a0a0b38}.mockup-toolbar{justify-content:space-between;align-items:center;margin-bottom:16px;font-size:12px;display:flex}.mockup-title{color:var(--cap-gray-600);font-weight:600}.mockup-progress{color:var(--cap-gray-400);font-family:var(--font-mono)}.mockup-plan{flex-direction:column;gap:11px;margin:0;padding:0;list-style:none;display:flex}.mockup-plan__item{color:var(--cap-gray-600);align-items:center;gap:10px;font-size:13px;display:flex}.mockup-plan__item:before{content:"";border:1.5px solid var(--cap-gray-400);background:var(--cap-surface);border-radius:50%;flex-shrink:0;width:16px;height:16px;transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s}.mockup-plan__item--done{color:var(--cap-black)}.mockup-plan__item--done:before{border-color:var(--cap-black);background:var(--cap-black)}.capability-card:hover .mockup-plan__item--done:first-child:before{transition-delay:50ms;transform:scale(1.22);box-shadow:0 0 0 4px #0a0a0b14}.capability-card:hover .mockup-plan__item--done:nth-child(2):before{transition-delay:.15s;transform:scale(1.22);box-shadow:0 0 0 4px #0a0a0b14}.capability-card:hover .mockup-plan__item--done:nth-child(3):before{transition-delay:.25s;transform:scale(1.22);box-shadow:0 0 0 4px #0a0a0b14}.mockup-window--split{grid-template-columns:130px 1fr;gap:0;padding:0;display:grid;overflow:hidden}.mockup-nav{background:var(--cap-surface);border-right:1px solid var(--cap-gray-200);flex-direction:column;gap:6px;padding:12px 10px;display:flex}.mockup-nav__item{color:var(--cap-gray-600);border-radius:var(--radius-sm);padding:6px 8px;font-size:11.5px;transition:background .3s,color .3s}.mockup-nav__item--active{background:var(--cap-black);color:#fff;font-weight:600}.mockup-detail{padding:16px}.mockup-detail__title{color:var(--cap-black);margin-bottom:12px;font-size:13px;font-weight:700}.mockup-detail__line{background:var(--cap-gray-200);border-radius:4px;height:8px;margin-bottom:8px;position:relative;overflow:hidden}.mockup-detail__line--short{width:70%}.mockup-detail__line--shorter{width:45%}.mockup-detail__line:after{content:"";background:linear-gradient(90deg,#0000 0%,#ffffffe6 50%,#0000 100%);position:absolute;top:0;bottom:0;left:0;right:0;transform:translate(-100%)}.capability-card:hover .mockup-detail__line:after{animation:1.1s ease-in-out capShimmer}.capability-card:hover .mockup-detail__line:nth-child(2):after{animation-delay:0s}.capability-card:hover .mockup-detail__line:nth-child(3):after{animation-delay:.1s}.capability-card:hover .mockup-detail__line:nth-child(4):after{animation-delay:.2s}.capability-card:hover .mockup-detail__line:nth-child(5):after{animation-delay:.3s}@keyframes capShimmer{to{transform:translate(100%)}}.mockup-version{color:var(--cap-black);align-items:center;gap:6px;font-size:12px;font-weight:600;display:inline-flex}.mockup-live-dot{background:#22c55e;border-radius:50%;width:6px;height:6px}.mockup-publish-btn{background:var(--cap-black);color:#fff;border-radius:100px;padding:5px 12px;font-size:11.5px;font-weight:700}.mockup-channels{flex-direction:column;gap:11px;display:flex}.channel-row{color:var(--cap-black);align-items:center;gap:8px;font-size:13px;display:flex}.channel-dot{background:var(--cap-gray-400);border-radius:50%;width:8px;height:8px;transition:box-shadow .3s}.channel-dot--on{background:#22c55e}.capability-card:hover .channel-dot--on{animation:1.4s ease-in-out capDotPulse}.capability-card:hover .channel-row:first-child .channel-dot--on{animation-delay:0s}.capability-card:hover .channel-row:nth-child(2) .channel-dot--on{animation-delay:.15s}.capability-card:hover .channel-row:nth-child(3) .channel-dot--on{animation-delay:.3s}@keyframes capDotPulse{0%,to{box-shadow:0 0 #22c55e66}50%{box-shadow:0 0 0 5px #22c55e00}}.channel-state{color:#16a34a;margin-left:auto;font-size:11px;font-weight:700}.channel-state--muted{color:var(--cap-gray-400)}@media (max-width:900px){.capability__grid{grid-template-columns:1fr}.capability-card:hover .mockup-window{transform:none}}