/* Role Agent on the home page, and the connected-apps wall shared with /role-agent (10 Oct 2026). */
.appwall{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:8px}
.appwall li{aspect-ratio:1;border-radius:12px;background:#fff;border:1px solid #e3e5ea;display:grid;place-items:center;transition:transform .18s ease,box-shadow .18s ease}
.appwall li:hover{transform:translateY(-2px);box-shadow:0 10px 22px -14px rgba(17,22,41,.5)}
.appwall img{width:24px;height:24px;object-fit:contain;display:block}
.appwall li.more{grid-column:span 2;aspect-ratio:auto;font-weight:700;font-size:.82rem;color:#3d4352;background:#f5f6f8;text-align:center;line-height:1.2;padding:6px}
.rah{background:#0d1224;color:#e9ecf5;border-radius:30px;padding:clamp(28px,4.4vw,56px);display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center;overflow:hidden;position:relative}
.rah::before{content:"";position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;background:radial-gradient(closest-side,rgba(240,86,60,.28),transparent);pointer-events:none}
.ag .rah h2{color:#fff;margin:0}
.ag .rah p{color:#aeb4c8}
.rah-tag{display:inline-block;background:rgba(240,86,60,.16);color:#ff9a85;font-weight:700;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;border-radius:999px;padding:6px 14px;margin-bottom:16px}
.rah-copy>p{margin:16px 0 0;font-size:1.08rem;line-height:1.6}
.rah-points{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:12px}
.rah-points li{border-left:2px solid #f0563c;padding:2px 0 2px 14px;color:#aeb4c8;font-size:.98rem;line-height:1.5}
.rah-points b{display:block;color:#fff;font-size:1.02rem}
.ag .btn.rah-btn{background:#f0563c;border-color:#f0563c;color:#fff}
.rah .btns{align-items:center}
.rah-price{font-size:.92rem;color:#aeb4c8}
.rah-apps{position:relative;background:#161d36;border:1px solid #262f52;border-radius:22px;padding:22px}
.ag .rah-k{margin:0 0 16px;color:#e9ecf5;font-size:1rem}
.rah-k b{font-size:2rem;letter-spacing:-.03em;color:#fff;margin-right:6px;font-variant-numeric:tabular-nums}
.rah .appwall li{border-color:#262f52}
.rah .appwall li.more{background:#0d1224;color:#e9ecf5;border-color:#262f52}
.ag .rah-fine{margin:16px 0 0;font-size:.88rem;color:#8a91a8}
.rah>*{min-width:0}
@media (max-width:900px){.rah{grid-template-columns:1fr}}
@media (max-width:520px){.appwall{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}.appwall li.more{font-size:.7rem;padding:2px}.appwall li{border-radius:10px}.appwall img{width:20px;height:20px}.appwall li:nth-child(n+29):not(.more){display:none}.rah{border-radius:24px;padding:24px 20px}.rah-apps{padding:16px}.rah-tag{font-size:.74rem}}
@media (prefers-reduced-motion:reduce){.appwall li{transition:none}.appwall li:hover{transform:none}}
@media (min-width:901px){.rah .appwall{grid-template-columns:repeat(7,minmax(0,1fr))}.rah .appwall li:nth-child(n+48):not(.more){display:none}}
/* Live demo inside the Role Agent panel: a request, the agent's answer, and the apps it uses light up. */
.rah-demo{background:#0d1224;border:1px solid #262f52;border-radius:16px;padding:14px;margin:0 0 16px;height:178px;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;overflow:hidden}
.rah-demo .m{max-width:88%;font-size:.86rem;line-height:1.45;border-radius:14px;padding:9px 12px;opacity:0;transform:translateY(8px);transition:opacity .35s ease,transform .35s ease}
.rah-demo .m.on{opacity:1;transform:none}
.rah-demo .me{align-self:flex-end;background:#f0563c;color:#fff;border-bottom-right-radius:4px}
.rah-demo .bot{align-self:flex-start;background:#161d36;color:#e9ecf5;border:1px solid #262f52;border-bottom-left-radius:4px}
.rah-demo .acts{display:flex;gap:6px;margin-top:8px}
.rah-demo .pill{font-size:.74rem;font-weight:700;border-radius:999px;padding:4px 10px;background:#262f52;color:#cfd4e6;transition:background .2s ease,transform .2s ease}
.rah-demo .pill.go{background:#186747;color:#fff}
.rah-demo .pill.go.press{transform:scale(.92);background:#1f8a5d}
.rah-demo .dots span{display:inline-block;width:6px;height:6px;border-radius:50%;background:#8a91a8;margin-right:4px;animation:rah-dot 1.2s infinite}
.rah-demo .dots span:nth-child(2){animation-delay:.15s}.rah-demo .dots span:nth-child(3){animation-delay:.3s}
@keyframes rah-dot{0%,60%,100%{opacity:.25}30%{opacity:1}}
.rah .appwall li{transition:transform .25s ease,box-shadow .25s ease,opacity .5s ease}
.rah .appwall.dim li:not(.lit){opacity:.45}
.rah .appwall li.lit{transform:translateY(-3px) scale(1.12);box-shadow:0 0 0 2px #f0563c,0 10px 26px -8px rgba(240,86,60,.7);opacity:1;z-index:1;position:relative}
.rah .appwall.pre li{opacity:0;transform:translateY(6px)}
@media (max-width:520px){.rah-demo{height:196px}}
@media (prefers-reduced-motion:reduce){.rah-demo .m{transition:none}.rah .appwall li{transition:none}.rah-demo .dots span{animation:none}}
.rah-demo{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 34px);mask-image:linear-gradient(to bottom,transparent 0,#000 34px)}