/* ---- Boxes that act as buttons: details pop-up (al-detail.js), Paris dusk ---- */
.pt[data-detail]::after{content:"Details ›";display:block;margin-top:12px;font-weight:700;font-size:15px;color:var(--al-gold)}
dialog.al-detail{width:min(760px,calc(100vw - 24px));max-height:calc(100vh - 32px);padding:0;border:1px solid var(--line2,#56698A);border-radius:16px;
  background:var(--surface,#25313F);color:var(--al-text,#F3ECE4);box-shadow:0 30px 80px rgba(0,0,0,.6)}
dialog.al-detail::backdrop{background:rgba(15,20,28,.7)}
.al-detail-head{position:sticky;top:0;display:flex;gap:14px;align-items:flex-start;padding:18px 22px;background:var(--navy,#1F2A36);border-bottom:4px solid var(--al-gold)}
.al-detail-head h2{margin:0;font-size:26px;color:var(--al-text,#F3ECE4);border:0;padding:0}
.al-detail-x{margin-left:auto;background:var(--al-gold);color:#1a1512;border:0;border-radius:8px;padding:8px 14px;font:inherit;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap}
.al-detail-body{padding:18px 22px 24px;font-size:17px;line-height:1.6}
.al-detail-body p{margin:0 0 12px;color:var(--sub,#D0D8E2)}
.al-detail-body ul{margin:0 0 12px;padding-left:22px;color:var(--sub,#D0D8E2)}.al-detail-body li{margin:6px 0}
.al-detail-body b{color:var(--al-text,#F3ECE4)}
.al-detail-body .al-go{display:inline-block;margin-top:8px;background:var(--blue,#49698C);color:#fff;font-weight:700;padding:10px 16px;border-radius:8px;text-decoration:none!important}
.al-detail-body .al-go:hover{background:var(--blue-l,#7FA3C9);color:#1a1512}
.al-three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.al-four{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.al-mix{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:6px 0 4px}
.al-mix div{border-radius:12px;padding:14px 16px;background:rgba(255,255,255,.05);border-top:4px solid var(--al-gold)}
.al-mix div:nth-child(2){border-top-color:var(--blue-l,#7FA3C9)}.al-mix div:nth-child(3){border-top-color:#C8704F}
.al-mix b{display:block;color:var(--al-text,#F3ECE4)}.al-mix span{display:block;font-size:16px;color:var(--sub,#D0D8E2)}
@media (max-width:860px){.al-three{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){.al-four,.al-mix{grid-template-columns:minmax(0,1fr)}}
/* screenshot showcase (Database Analytics and Insights) */
.al-shot{display:block;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(215,175,89,.45);box-shadow:0 24px 60px rgba(0,0,0,.4);text-decoration:none!important;margin:0 0 40px;transition:transform .2s}
.al-shot:hover{transform:translateY(-4px)}.al-shot img{display:block;width:100%;height:auto}
.al-shot span{position:absolute;right:16px;bottom:16px;background:#D7AF59;color:#1a1512;font-weight:700;font-size:16px;padding:9px 16px;border-radius:8px}