/* Shared by the static marketing chrome and baked storefront/blog shell. */
/* Compatibility for published R2 shells; remove only after all pages are rebaked. */
.blog-header .blog-nav { align-items: center; }
.blog-header .blog-mobile-nav { display: none; }
.blog-header .blog-mobile-nav > summary::-webkit-details-marker { display: none; }
.blog-header .blog-mobile-nav summary:focus-visible { outline: 3px solid #1679b7; outline-offset: 4px; border-radius: 4px; }
.blog-header .homepage-menu-panel:has(.homepage-menu-intro) { grid-template-columns: 1fr 1fr 1fr; width: min(920px, calc(100vw - 48px)); padding: 28px; gap: 24px; }
.blog-header .homepage-menu-intro { padding: 14px 8px; }
.blog-header .homepage-menu-intro strong { font-size: 18px; }
.blog-header .homepage-menu-intro p { margin: 10px 0 0; color: #596673; font-size: 14px; line-height: 1.7; }
.blog-header .homepage-menu-panel:has(.homepage-menu-intro) > a { flex-direction: column; gap: 8px; padding: 16px; }
.blog-header .homepage-menu-panel:has(.homepage-menu-intro) span { color: #596673; font-size: 14px; font-weight: 400; }
.blog-header .homepage-menu-panel small { color: #1679b7; font-size: 13px; margin-top: 8px; }
@media (max-width: 960px) {
  .blog-header .blog-mobile-nav { display: block; }
  .blog-header .blog-mobile-nav > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px; cursor: pointer; list-style: none; font-size: 14px; font-weight: 600; }
  .blog-header .blog-mobile-nav nav { position: absolute; top: 100%; right: 16px; width: min(340px, calc(100vw - 32px)); padding: 16px; border: 1px solid #dce5ec; border-radius: 0 0 14px 14px; background: white; box-shadow: 0 12px 28px rgb(37 45 56 / 12%); }
  .blog-header .blog-mobile-nav nav a { display: flex; align-items: center; min-height: 48px; padding: 8px 12px; }
  .blog-header .blog-mobile-nav nav a:hover { background: #eff8fd; }
  .blog-header .blog-shell { gap: 12px; }
  .blog-header .blog-navcta { margin-left: auto; }
}
.homepage-menu > summary { display: flex; align-items: center; gap: 6px; min-height: 44px; cursor: pointer; font-weight: 570; list-style: none; white-space: nowrap; }
.homepage-menu > summary::-webkit-details-marker { display: none; }
.homepage-menu > summary svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.homepage-menu[open] > summary, .homepage-menu[data-current] > summary { color: #1679b7; }
.homepage-menu[open] > summary svg { transform: rotate(180deg); }
/* Header 03-style hover: invisible bridge from the trigger down to the panel, plus a soft entrance. */
.homepage-menu > summary { position: relative; }
.homepage-menu[open] > summary::after { content: ""; position: absolute; left: -16px; right: -16px; top: 100%; height: 28px; }
.homepage-menu > summary svg { transition: transform 180ms ease-out; }
@keyframes homepage-menu-in { from { opacity: 0; transform: translate(-50%, -6px) scale(.98); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
.homepage-menu[open] > .homepage-menu-panel { animation: homepage-menu-in 180ms cubic-bezier(.2, .8, .2, 1); transform-origin: top center; }
@media (prefers-reduced-motion: reduce) { .homepage-menu[open] > .homepage-menu-panel { animation: none; } .homepage-menu > summary svg { transition: none; } }
.homepage-menu summary:focus-visible { outline: 3px solid #1679b7; outline-offset: 4px; border-radius: 4px; }
.homepage-menu-panel { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); display: grid; grid-template-columns: 1fr 1fr; width: min(640px, calc(100vw - 48px)); padding: 16px; gap: 8px; border: 1px solid #d2dde6; border-radius: 0 0 14px 14px; background: white; box-shadow: 0 16px 28px rgb(37 45 56 / 12%); }
.homepage-menu-panel > a { display: flex; align-items: flex-start; gap: 16px; padding: 20px; border: 0; white-space: normal; border-radius: 8px; line-height: 1.6; }
.homepage-menu-panel > a:hover, .homepage-menu-panel > a:focus-visible { background: #eff8fd; }
.homepage-menu-panel strong { font-size: 16px; font-weight: 650; color: #252d38; }
.homepage-menu-copy span { color: #596673; font-size: 14px; font-weight: 400; }
.homepage-menu-panel > a[aria-current="page"] strong { color: #1679b7; }
.homepage-menu-panel > a[aria-current="page"] { background: #eff8fd; }
.homepage-menu-icon { flex: 0 0 24px; width: 24px; height: 24px; margin-top: 2px; fill: none; stroke: #1679b7; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.homepage-menu-copy { display: flex; flex-direction: column; gap: 6px; }
.homepage-menu-panel > a { transition: background-color 160ms ease-out; }
.homepage-menu-panel > a:focus-visible { outline: 2px solid #1679b7; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .homepage-menu-panel > a { transition: none; } }
.mobile-nav-group{border-top:1px solid #dce5ec;margin-top:12px;padding-top:12px}.mobile-nav-group>span{display:block;padding:0 12px 4px;font-size:12px;font-weight:600;color:#596673}.homepage-menu-panel{max-height:calc(100dvh - 96px);overflow-y:auto;overscroll-behavior:contain}
