/* Robinhood waitlist banner above the header. On desktop the hero gives back the banner (36px) and the
   hero pill (38px + 28px gap, inside v2-hero.js) so the deposit card stays clear of the Learn More cue.
   The banner folds while the phone menu is open, because that menu is pinned at the header's 60px. */
.robinhood-banner{display:flex;align-items:center;justify-content:center;min-height:36px;padding:6px 16px;background:#ccff00;color:#000;font:450 15px/20px var(--font-family);letter-spacing:normal}
.robinhood-banner__inner{display:flex;align-items:center;justify-content:center;gap:16px;min-width:0;margin:0;color:inherit;font:inherit;white-space:nowrap}
.robinhood-banner__action{display:inline-flex;align-items:center;height:24px;padding:0 12px;border:1px solid rgb(0 0 0 / 55%);border-radius:999px;color:#000;font:450 13px/1 var(--font-family);letter-spacing:normal;text-decoration:none;white-space:nowrap;transition:background-color 150ms ease,border-color 150ms ease,color 150ms ease}
.robinhood-banner__action:focus-visible{outline:2px solid #000;outline-offset:2px}
@media(hover:hover){.robinhood-banner__action:hover{background:#000;border-color:#000;color:#ccff00}}
@media(min-width:901px){.home-hero{padding-top:calc(var(--section-padding-block) - 102px)}}
@media(max-width:900px){
 .robinhood-banner{padding-inline:12px;font-size:clamp(12px,3.6vw,14px)}
 .robinhood-banner__inner{gap:clamp(8px,2.6vw,12px)}
 .robinhood-banner__action{padding-inline:clamp(8px,2.6vw,12px);font-size:clamp(11.5px,3.3vw,13px)}
 body:has(#header.mobile-menu-open) .robinhood-banner{display:none}
}
@media(prefers-reduced-motion:reduce){.robinhood-banner__action{transition:none}}