/* The header's "Free Resources" menu. It is a details element, so it opens and closes without JavaScript;
   static/nav.js only closes it on a click outside it or on Escape. */
.navmenu { position: relative; }
.navmenu > summary { display: inline-flex; align-items: center; gap: 7px; list-style: none; cursor: pointer; white-space: nowrap; }
.navmenu > summary::-webkit-details-marker { display: none; }
.navmenu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.navmenu[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.navmenu > summary:focus-visible { outline: 2px solid #24407A; outline-offset: 3px; border-radius: 2px; }
.navmenu > summary.on { border-bottom: 1.5px solid #13264F; padding-bottom: 2px; }
.navmenu .navpanel { position: absolute; top: calc(100% + 14px); left: -18px; z-index: 30; min-width: 190px; padding: 6px 0; background: #FFFFFF; border: 1px solid #E4DED4; border-radius: 6px; box-shadow: 0 12px 28px rgba(19, 38, 79, 0.10); }
.navmenu .navpanel a { display: block; padding: 9px 18px; color: #13264F; font-weight: 500; white-space: nowrap; text-decoration: none; }
.navmenu .navpanel a:hover, .navmenu .navpanel a:focus-visible { background: #F5F2EC; outline: none; }
.navmenu .navpanel a[aria-current="page"] { font-weight: 600; }
@media (max-width: 960px) { .navmenu .navpanel { left: 50%; transform: translateX(-50%); } }

/* Details every page shares. */
.btn { font-family: inherit; border: 0; }
.prose a.btn { text-decoration: none; }
p, li { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; }

/* Keep the phone menu and Get started on one row. */
@media (min-width: 351px) and (max-width: 480px) {
  .nav .navr { flex-wrap: nowrap; gap: 6px; }
  .nav .navr .btn { padding: 0 10px; }
  .nav .navmenu > summary { gap: 5px; }
}