/* what-is-csma.css — page-specific styles */

.body{color:var(--muted);font-size:1.05rem;max-width:58ch;margin-top:20px}
.note{margin-top:22px;font-family:'IBM Plex Mono',monospace;font-size:.7rem;color:var(--muted);letter-spacing:.06em}
.card h3{font-size:1.12rem;font-weight:600;margin-bottom:9px}
.card p{color:#C3D3EA;font-size:1rem;line-height:1.6}
.card .num{font-family:'IBM Plex Mono',monospace;font-size:.86rem;font-weight:500;color:#AFC7F2;letter-spacing:.16em;margin-bottom:13px}
.card .impl{margin-top:16px;padding:14px 15px;border:1px solid rgba(138,99,255,.32);border-radius:10px;background:rgba(138,99,255,.08);font-size:.98rem;line-height:1.6;color:#EDF3FF}
.card .impl::before{content:'RAVEN FORESIGHT →';display:block;font-family:'IBM Plex Mono',monospace;font-size:.76rem;font-weight:500;letter-spacing:.14em;color:#C0A6FF;margin-bottom:7px}
.diagram{cursor:zoom-in;margin-top:30px;max-width:1100px;margin-left:auto;margin-right:auto}
.diagram img{width:100%;height:auto;display:block}
.diagram:hover{border-color:rgba(123,200,255,.55)}
#lightbox{position:fixed;inset:0;z-index:300;background:rgba(4,8,16,.94);backdrop-filter:blur(10px);
    display:flex;align-items:center;justify-content:center;padding:28px;opacity:0;visibility:hidden;
    transition:opacity .3s var(--ease),visibility .3s;cursor:zoom-out}
#lightbox.open{opacity:1;visibility:visible}
#lightbox img{max-width:100%;max-height:100%;border-radius:12px;border:1px solid rgba(123,200,255,.3);box-shadow:0 30px 90px rgba(0,0,0,.7)}
#lightbox .lb-close{position:absolute;top:20px;right:24px;background:rgba(13,20,31,.9);border:1px solid rgba(123,200,255,.5);
    color:#EAF2FF;border-radius:99px;padding:9px 18px;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;cursor:pointer}
@media (max-width:920px){
    .nav-links{display:none;position:absolute;top:74px;left:0;right:0;flex-direction:column;background:var(--raven);border-bottom:1px solid var(--line);padding:18px 32px;gap:16px}
    .nav-links.open{display:flex}
    .menu-toggle{display:block}.nav .btn{display:none}
    .grid2,.cards2,.cards3{grid-template-columns:1fr}
    .cards5{grid-template-columns:1fr 1fr}
    .hero{padding:130px 0 50px}
    section{padding:50px 0}
    
  }