/* Banrox Business Spending Card on banrox.com only (templates/site/business_card.html links this last; the standalone
   page does not). The page's own stylesheets meet the site's assets/lp/css/style.css here, and these few rules settle
   the places where the two set the same thing. Everything the page shares with the site by name (.title_bk, .subtitle_bk,
   .ftbk_title, .join_title, .subbox, .btn_gradient, .btn_smallest) is meant to match and needs nothing. */

/* the site's .join carries two blurred brand glows as :before/:after at z-index 1 and 2 and lifts its .container above
   them; the page's join has no .container, so its own children take that place */
.bxcard .join > *{position:relative; z-index:3}
/* the site's join title sits under an image on the home page (margin-top 60px, and margin 60px auto 0 under 1024px);
   here the title opens the section */
.bxcard .join_title{margin:0}

/* the site's .btn (the big gradient button) and the app's .btn (the widgets' controls) share a name. The app's values are
   later in the cascade and win, except for what only the site sets: the hover that widens the gap and dims, the active
   state that removes the press, and the label lifted to z-index 3. The widgets are demonstrations, not buttons of the
   site, so they keep the app's behaviour. */
.bxcard .widget .btn:hover{gap:8px; opacity:1}
.bxcard .widget .btn.sm:hover{gap:8px}
.bxcard .widget .btn:active{transform:scale(.98); transition:transform .08s, opacity .2s}
.bxcard .widget .btn[disabled]{transform:none}
.bxcard .widget .btn span{position:static; z-index:auto}

/* and the other way round: the site frame's own buttons (the header's Login and Sign Up, the cookie notice) are .btn too
   and would take the app's pill. They get the site's .btn back, value for value (style.css .btn, .btn_smallest,
   .btn_lightgrey, .btn:hover). */
.header .btn,.footer .btn,#bx-consent .btn{height:56px; border-radius:8px; display:flex; align-items:center; justify-content:center; gap:8px; padding:0 24px 0 32px;
  font-weight:500; font-size:18px; line-height:100%; letter-spacing:-.02em; white-space:nowrap; overflow:visible; transition:.25s; color:#fff}
.header .btn:hover,.footer .btn:hover,#bx-consent .btn:hover{gap:12px; opacity:.7}
.header .btn:active,.footer .btn:active,#bx-consent .btn:active{transform:none; transition:none}
.header .btn span,.footer .btn span,#bx-consent .btn span{position:relative; z-index:3}
.header .btn_smallest,.footer .btn_smallest{font-size:16px; padding:0 32px; height:48px}
.header .btn_lightgrey,.footer .btn_lightgrey{background:#ebf1ff; color:#141c24}
.header .btn_gradient,.footer .btn_gradient,#bx-consent .btn_gradient{overflow:hidden}
@media (max-width:640px){ .header .btn,.footer .btn,#bx-consent .btn{height:48px} }

/* the app's a{color:inherit; text-decoration:none} is global; the site frame's plain links (the footer's privacy text)
   get the site's own link colour back */
.footer_privacy a{color:#375dfb; text-decoration:underline}
.footer_privacy a:hover{text-decoration:none}

/* the site frame's inline svg icons are inline-block (the header's Sign Up arrow); the app's svg{display:block} must not
   reach them */
.header svg,.footer svg,#bx-consent svg{display:inline-block}

/* the bot check renders as an iframe of its own size inside the form; keep it on its own line, centred with the fields */
.bxcard .access .cf-turnstile{justify-self:start; min-height:0}
.bxcard .access .cf-turnstile iframe{display:block}
/* the guard's code box (.pf-verify) is inserted right after the email field, so in this grid it would take a column of
   its own between the two fields; it takes the whole row under the button instead, and the note follows it */
.bxcard .access > div:has(.pf-verify){grid-column:1 / -1; order:5}
.bxcard .access > .access__note{order:6}
.bxcard .access .pf-verify{margin:0}
.bxcard .access .pf-verify .pf-code{font-family:var(--fb)}