/* /library/ landing page (main-site layout) */
.lib-hero{min-height:0;background:radial-gradient(900px 480px at 78% 30%,rgba(63,175,122,.14),transparent 65%),#0b0f12}
.lib-hero .gr2{position:absolute;right:-160px;top:-80px;width:820px;opacity:.28;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse 60% 60% at 60% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 60% 45%,#000 30%,transparent 75%)}
.lib-hero .wx{padding-top:96px;padding-bottom:96px}
.lib-hero .lib-h1{font-size:clamp(44px,6vw,80px)!important;max-width:900px;margin:0}
.lib-hero .hero-sub{max-width:720px}
.lib-ctas{display:flex;gap:28px;margin-top:36px;flex-wrap:wrap}
.lib-h2{font-size:clamp(34px,4vw,52px)!important;margin:8px 0 34px}
.lib-cats-sec{background:#0E1116}
.lib-cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lib-cat{background:#1B1E22;border:1px solid rgba(63,175,154,.35);border-radius:4px;padding:24px 24px 18px;display:flex;flex-direction:column}
.lib-cat-code{font:600 12px/1.3 "Geist Mono","IBM Plex Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:#D9893F;margin:0 0 8px}
.lib-cat h3{font:700 24px/1.2 "Space Grotesk",sans-serif;color:#E7E4DD;margin:0}
.lib-cat-n{font:400 14px/1.4 Inter,sans-serif;color:#9AA39F;margin:6px 0 14px}
.lib-cat ul{list-style:none;margin:0;padding:0;border-top:1px solid rgba(231,228,221,.12)}
.lib-cat li{border-bottom:1px solid rgba(231,228,221,.08)}
.lib-cat li:last-child{border-bottom:0}
.lib-cat a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 0;font:500 15.5px/1.35 Inter,sans-serif;color:#E7E4DD;text-decoration:none}
.lib-cat a i{color:#3FAF7A;font-style:normal;transition:transform .2s}
.lib-cat a:hover{color:#3FAF7A}.lib-cat a:hover i{transform:translateX(3px)}
.lib-cat a:focus-visible{outline:2px solid #B46A2C;outline-offset:2px}
.lib-all{background:#090B0E;padding-bottom:110px}
@media (max-width:1100px){.lib-cats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:720px){.lib-cats{grid-template-columns:1fr}.lib-hero .wx{padding-top:56px;padding-bottom:56px}.lib-ctas .tbtn,.lib-ctas .gbtn{width:100%}}
/* Compact "Browse by category": denser grid (4 columns on wide desktop), cards size to their own content (no stretched empty
   space under short lists), tighter padding, title spacing and entry rows. Same borders, colors and links. */
.lib-cats-sec .lib-h2{margin-bottom:24px}
.lib-cats{gap:16px;align-items:start}
.lib-cat{padding:18px 18px 8px}
.lib-cat-code{font-size:11.5px;margin-bottom:6px}
.lib-cat h3{font-size:20px;line-height:1.2}
.lib-cat-n{font-size:13px;margin:4px 0 10px}
.lib-cat a{min-height:36px;padding:6px 0;font-size:14.5px;line-height:1.3}
@media (min-width:1360px){.lib-cats{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:720px){.lib-cats{gap:12px}.lib-cat{padding:16px 16px 6px}.lib-cat a{min-height:40px}}

/* Browse by category (Nov 1, v2): 9 identical boxes, 3 across on desktop, 2 on tablet, 1 on phone. Each box shows only the OWASP code,
   category name and entry count, and is a button that opens that category's entries in a panel under the grid (one at a time).
   Shared highlight style (.hl-card from wix.css: jade border + jade -> Verdant -> copper top line). No lime. */
.lib-cats-hint{font:400 15px/1.5 Inter,sans-serif;color:#9AA39F;margin:-14px 0 22px}
.lib-cats-sec:not(.js) .lib-cats-hint{display:none}
.lib-cats{grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:1fr;align-items:stretch;gap:24px}
.lib-cats>button.lib-cat.hl-card{display:flex;flex-direction:column;align-items:flex-start;gap:0;width:100%;min-height:152px;margin:0;padding:26px 24px 20px;border-radius:10px;color:inherit;font:inherit;text-align:left;cursor:pointer;-webkit-appearance:none;appearance:none}
.lib-cats>button.lib-cat .lib-cat-code{margin:0 0 8px}
.lib-cat-name{display:block;font:700 22px/1.25 "Space Grotesk",sans-serif;color:#E7E4DD}
.lib-cats>button.lib-cat .lib-cat-n{display:flex;align-items:center;gap:8px;margin:auto 0 0;padding-top:14px;font-size:14px;color:#9AA39F}
.lib-cats>button.lib-cat .lib-cat-n i{width:8px;height:8px;border-right:2px solid #3FAF7A;border-bottom:2px solid #3FAF7A;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.lib-cats>button.lib-cat:hover{border-color:rgba(63,175,122,.55)!important;box-shadow:0 0 0 1px rgba(63,175,122,.12),0 0 26px rgba(39,139,115,.28)}
.lib-cats>button.lib-cat[aria-expanded="true"]{border-color:rgba(63,175,122,.7)!important;background:linear-gradient(180deg,#1F2A27,#171B1F)}
.lib-cats>button.lib-cat[aria-expanded="true"] .lib-cat-n{color:#E7E4DD}
.lib-cats>button.lib-cat[aria-expanded="true"] .lib-cat-n i{transform:translateY(2px) rotate(-135deg)}
.lib-cats>button.lib-cat:focus-visible{outline:2px solid #B46A2C;outline-offset:3px}
.lib-cat-panels{display:grid;gap:16px;margin-top:24px}
.lib-cat-panel.hl-card{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:40px;padding:28px 32px 18px;scroll-margin:calc(var(--navh,96px) + 24px) 0 24px}
.lib-cat-panel[hidden]{display:none}
.lib-cat-panel:focus{outline:none}.lib-cat-panel:focus-visible{outline:2px solid #B46A2C;outline-offset:3px}
.lib-cat-panel h3{font:700 26px/1.2 "Space Grotesk",sans-serif;color:#E7E4DD;margin:0 0 6px}
.lib-cat-panel .lib-cat-n{margin:0}
.lib-cat-panel ul{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
.lib-cat-panel li{break-inside:avoid;border-bottom:1px solid rgba(231,228,221,.08)}
.lib-cat-panel a{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:44px;padding:8px 0;font:500 15.5px/1.35 Inter,sans-serif;color:#E7E4DD;text-decoration:none}
.lib-cat-panel a i{color:#3FAF7A;font-style:normal;transition:transform .2s}
.lib-cat-panel a:hover{color:#3FAF7A}.lib-cat-panel a:hover i{transform:translateX(3px)}
.lib-cat-panel a:focus-visible{outline:2px solid #B46A2C;outline-offset:2px}
@media (max-width:1100px){.lib-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.lib-cat-panel.hl-card{grid-template-columns:1fr;gap:14px}}
@media (max-width:720px){.lib-cats{grid-template-columns:1fr;gap:12px}.lib-cats>button.lib-cat.hl-card{min-height:0;padding:20px 18px 16px}.lib-cat-name{font-size:20px}.lib-cat-panel.hl-card{padding:22px 18px 8px}.lib-cat-panel ul{columns:1}.lib-cat-panel h3{font-size:22px}}
