/* Webflow's own framework CSS (.w-nav-overlay [data-nav-menu-open]{top:0})
   unconditionally pins the dropdown's container to the very top of the
   page whenever the menu is moved into its open-state overlay — this is
   generic Webflow behavior, not custom code, and it can't be overridden
   cleanly on the container itself. Instead, push the VISIBLE white card
   down by the navbar's own height so it appears below the logo row
   instead of overlapping it. */
.navbar_list{position:relative;z-index:999}
.nav_mobile{z-index:999}
.menu-button{position:relative;z-index:1000}
.navbar_logo-link{position:relative;z-index:1000}
/* The logo sits inside .navbar .container-large, which has its own z-index:2
   stacking context — that traps the logo below the dropdown (z-index:999)
   no matter what z-index the logo itself has, since a child can't escape
   its ancestor's stacking ceiling. Raise that ceiling, scoped to the navbar
   only so other uses of .container-large elsewhere are unaffected. */
.navbar .container-large{position:relative;z-index:1001}

/* Webflow's JS injects an explicit, huge inline height onto .w-nav-overlay
   (matching full document height — meant for a full-screen dimmed-backdrop
   overlay pattern we don't want). Since .w-nav-overlay is normally
   position:static (in normal document flow), that huge height was what
   physically pushed all page content down when the menu opened. The actual
   visible dropdown (nav_mobile) is already position:absolute relative to
   the navbar by Webflow's own default — exactly the "sits just below the
   nav, scrolls away naturally with the page" behavior wanted here. So the
   fix is just neutralizing the injected height, not fighting position at
   all: no fixed positioning, no JS reparenting, none of that — the menu is
   normal in-flow content that scrolls with the page like everything else. */
.w-nav-overlay{position:static!important;height:0!important;overflow:visible!important;width:auto!important;transform:none!important}
.nav_mobile{top:calc(100% + 8px)!important}

/* The "Learn more" button-arrow's fill-slide hover effect is normally
   driven by Webflow's compiled interaction system, keyed to a specific
   page ID our reconstructed blog/learn pages don't have — so it never
   fires. This reproduces the same visual effect with plain CSS instead,
   so it works reliably regardless. */
.button-arrow{overflow:hidden}
.button-arrow_bg{transition:opacity .25s ease}
.button-arrow:hover .button-arrow_bg{opacity:1}
.button-arrow:hover .button-arrow_text,.button-arrow:hover .button_container-arrow{position:relative;z-index:2}
.button_container-arrow{transition:transform .25s ease}
.button-arrow:hover .button_container-arrow{transform:translateX(2px)}

/* Circular arrow overlay on card/featured images (arrow_button_container) —
   like the pill button above, this had no CSS hover of its own; its
   animation was entirely driven by the same broken JS interaction system.
   Reproduced as a clean CSS-only hover effect instead. */
.arrow_button_container{transition:transform .25s ease,background-color .25s ease}
.content-blog_card:hover .arrow_button_container,.blog_main-card:hover .arrow_button_container{transform:scale(1.12);background-color:var(--bg-color--bg-dark)}
.content-blog_card:hover .arrow_btn,.blog_main-card:hover .arrow_btn{color:var(--base--white)}

/* Blog/Learn tag filter bar */
.tag-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.5rem 0 2.5rem}
.tag-filter_btn{font-family:var(--_typography---font-family--alternate);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;padding:.5rem 1rem;border-radius:5rem;border:1px solid var(--grey--grey-300);background:transparent;color:var(--text-color--text-primary);cursor:pointer;transition:background-color .2s,color .2s}
.tag-filter_btn.is-active{background-color:var(--bg-color--bg-dark);color:var(--base--white);border-color:var(--bg-color--bg-dark)}

/* Post category badge — align-self prevents it stretching full-width inside flex columns */
.post-badge{display:inline-block;align-self:flex-start;width:fit-content;font-family:var(--_typography---font-family--alternate);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding:.25rem .6rem;border-radius:5rem;background-color:var(--bg-color--bg-subtle);color:var(--text-color--text-primary);margin-bottom:.5rem}

.arrow_button_container svg{width:1.1rem;height:1.1rem}
.blog_main-card_content h2{margin-bottom:.75rem}

/* FAQ accordion — Webflow's plus/minus icon toggle and expand/collapse are
   normally driven by its own compiled interaction system, keyed to a page
   this reconstructed homepage doesn't have, so it wouldn't fire (same root
   cause as the blog/learn animations). Built as a plain, reliable
   CSS+JS toggle instead. */
.faq_bottom{overflow:hidden;transition:max-height .35s ease}
.icon-1x1-medium.is-animated{transition:transform .25s ease}
.faq_item.is-open .icon-1x1-medium.is-animated{transform:rotate(0deg)}