/* Banrox Business Spending Card, page layout.
   Colours, radii and fonts come from tokens.css; components from app.css (the mobile app);
   the type scale, header, eyebrow pill and buttons are the site's own recipes (assets/lp/css/style.css). */

html{overflow-x:clip}
/* the ground is the site's own: body.basic on banrox.com paints assets/lp/img/bg_basic.jpg (the blue beam on navy) over the
   page. Here it sits once at the top at the page's width, and the site's own two colours continue the light down the page as
   four soft beams (brand right, lavender left, alternating), so no screen of the page is black and there is no seam.
   (body.basic is named too so this rule also wins on banrox.com, where style.css stretches the image to cover the whole page.) */
body,body.basic{background:
    url(../assets/site/bg_basic.jpg) top center / 100% auto no-repeat,
    radial-gradient(42% 22% at 72% 30%, rgba(38,75,255,.34), rgba(38,75,255,0) 70%),
    radial-gradient(40% 20% at 26% 52%, rgba(133,133,233,.20), rgba(133,133,233,0) 70%),
    radial-gradient(42% 22% at 74% 74%, rgba(38,75,255,.30), rgba(38,75,255,0) 70%),
    radial-gradient(40% 18% at 30% 94%, rgba(133,133,233,.18), rgba(133,133,233,0) 70%)
    var(--bg);
  color:var(--t1); font:400 16px/1.5 var(--fb); margin:0; min-height:100%; height:auto; overflow-x:clip; -webkit-font-smoothing:antialiased; font-variant-numeric:lining-nums}
.page-wrap{max-width:1272px; margin-inline:auto; padding-inline:16px}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

/* ---------- tiles: the feature visual sits on a card-coloured tile (the site's .dashboard_section, r32), the caption under it.
   The widget is the components alone, no panel of its own: one idea, one action, small. ---------- */
.tile{background:var(--card); border-radius:32px; overflow:clip; position:relative}
.widget{position:relative; width:100%; max-width:420px; min-height:120px}
.widget.is-loading::before{content:""; position:absolute; inset:0; border-radius:var(--r-panel); background:linear-gradient(100deg, var(--fill) 30%, rgba(255,255,255,.10) 50%, var(--fill) 70%); background-size:200% 100%}
.widget__failed{display:grid; place-items:center; gap:12px; padding:24px; text-align:center; color:var(--t5); font-size:14px}

/* ---------- the site's type scale (style.css .ftbk_title, .title_bk, .title_bk--small, .subtitle_bk, .join_title, .join_subtitle, .subbox) ---------- */
h1,h2,h3{margin:0; text-wrap:balance}
.ftbk_title{font-family:var(--fn); font-weight:400; font-size:72px; line-height:100%}
.ftbk_title span,.title_bk span,.join_title span{font-family:var(--fz); font-style:italic; font-weight:400}
.title_bk{font-family:var(--fn); font-weight:400; font-size:48px; line-height:100%}
.title_bk--center{text-align:center}
.join_title{font-family:var(--fn); font-weight:400; font-size:56px; line-height:100%; text-align:center}
.subtitle_bk{font-weight:400; font-size:16px; line-height:150%; color:var(--t7); margin:16px 0 0; letter-spacing:.01em; max-width:62ch}
.subtitle_bk--center{text-align:center; margin-inline:auto}
.join .subtitle_bk{font-family:var(--fn); font-size:24px; line-height:150%}
.clip__eyebrow{margin:0 0 14px; font-size:14px; letter-spacing:.01em; color:var(--t5)}
.subbox{display:inline-flex; align-items:center; gap:8px; background:linear-gradient(214.43deg, rgba(226,230,255,.05) 9.68%, rgba(133,133,233,.05) 79.28%); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); backdrop-filter:blur(5px); border-radius:8px; padding:5px 16px 5px 12px; margin-bottom:24px; min-height:34px; width:fit-content}
.subbox_icon{display:grid; place-items:center; color:var(--pale)}
.subbox_icon .icon{width:16px; height:16px}
.subbox_title{font-size:16px; color:#fff}
p{margin:0}

/* ---------- controls: the site's .btn recipes, renamed .action so the app's .btn stays for the widgets; the app's .input for fields ---------- */
.action{border:none;border-radius:8px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;position:relative;font-weight:500;font-size:18px;line-height:100%;letter-spacing:-0.02em;color:#fff;text-decoration:none;padding:0 24px 0 32px;gap:8px;height:56px;white-space:nowrap;transition:.25s}
.action:hover{gap:12px;opacity:.7}
.action span{position:relative;z-index:3}
.btn_icon{font-size:0;display:inline-flex}
.btn_icon > *{display:inline-block;vertical-align:middle}
.btn_gradient{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 0%, #ffffff 0%, rgba(255,255,255,0) 50%),linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,0) 25%),radial-gradient(50% 169.64% at 50% 50%, #8585E9 0%, #264BFF 100%)}
.btn_gradient:after{content:"";position:absolute;left:1.5px;top:1.5px;right:1.5px;bottom:1.5px;background:radial-gradient(50% 169.64% at 50% 50%, #8585E9 0%, #264BFF 100%);border-radius:8px;z-index:1}
.btn_smallest{font-size:16px;padding:0 24px;height:48px}
.btn_transparent{border-radius:12px;padding:0 30px;position:relative;letter-spacing:.01em;height:48px}
.btn_transparent:before{content:"";background:linear-gradient(-90deg, #8585E9, #264BFF);border-radius:inherit;mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);mask-composite:exclude;-webkit-mask-composite:xor;padding:2px;position:absolute;top:0;left:0;height:100%;width:100%;pointer-events:none;transition:.3s}
.action:focus-visible,.access .input:focus-within{outline:2px solid var(--lav);outline-offset:2px}
.action[disabled]{opacity:.4;cursor:not-allowed}
.access .input{height:56px; border:2px solid rgba(255,255,255,.3); padding:0 22px}
.access .input input{font-size:16px}
.access .input:has(input[aria-invalid="true"]){border-color:var(--bad)}
@media (hover:none){ .action:hover{gap:8px;opacity:1} }

/* ---------- header: the site's fixed light bar (.header / .header_inside) ---------- */
.sitebar{position:fixed; left:0; right:0; top:16px; z-index:10}
.sitebar__inside{display:flex; align-items:center; gap:16px; background:linear-gradient(180deg, #fff 0%, #e2e6ff 100%); border:1px solid rgba(255,255,255,.2); border-radius:12px; padding:4px 4px 4px 16px}
.sitebar__logo{display:inline-flex; color:#141c24; font-size:0}
.sitebar__logo svg{display:block; width:112px; height:24px}
.sitebar__product{color:#141c24; font-size:16px; line-height:100%; letter-spacing:-.02em; padding-left:16px; border-left:1px solid rgba(20,28,36,.14); margin-right:auto}
.sitebar .action{margin-left:auto}

/* ---------- hero: the site's .first_bk spacing ---------- */
.intro{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:48px; align-items:center; padding-block:180px 80px}
.intro__copy{display:grid; gap:0}
.intro .subbox{margin-bottom:32px}
.intro .subtitle_bk{margin-top:24px}
.intro__copy .access{margin-top:48px}
.intro__card{position:relative; aspect-ratio:4/3; overflow:visible; background:transparent; outline:none; user-select:none; -webkit-user-select:none}
.intro__card:focus-visible canvas{filter:drop-shadow(0 7px 16px rgba(0,0,0,.40)) drop-shadow(0 24px 48px rgba(0,0,0,.55)) drop-shadow(0 0 0 1.5px rgba(133,133,233,.9))}
.intro__card canvas,.intro__poster{position:absolute; inset:0; width:100%; height:100%; display:block}
.intro__card canvas{filter:drop-shadow(0 7px 16px rgba(0,0,0,.40)) drop-shadow(0 24px 48px rgba(0,0,0,.55))}
.intro__card.is-lost canvas{display:none}
.intro__card.is-lost .intro__poster{display:block}
.intro__poster{object-fit:contain; padding:8%}
.intro__card.is-live .intro__poster{display:none}
.intro__card::before{content:""; position:absolute; left:14%; top:26%; width:72%; aspect-ratio:85.6/53.98; border-radius:3.7%; background:linear-gradient(100deg, var(--fill) 30%, rgba(255,255,255,.10) 50%, var(--fill) 70%); opacity:0; pointer-events:none}
.intro__card.is-loading::before{opacity:1}
.intro__card.is-loading .intro__poster{opacity:0}

/* ---------- early-access form ---------- */
.access{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto; gap:10px; max-width:680px; align-items:center}
.access .access__note{grid-column:1 / -1; color:var(--t5); font-size:14px}
.access.is-done .input,.access.is-done .action{opacity:.5; pointer-events:none}
.access.is-done .access__note{color:var(--good)}

/* ---------- feature rows (tile beside the copy) and tile grids (caption under the tile), .section_bk 80px ---------- */
.feature-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:80px}
.feature-row + .feature-row{padding-top:0}
.feature-row--flip .tile{order:2}
.feature-row__copy{max-width:56ch}
.feature-row .clip__foot{margin-top:16px}
.clip__foot{color:var(--t5)}
.tiles{padding-block:80px}
.tiles__title{margin-bottom:40px}
.tiles--head{padding-block:96px 0}
.tiles--head .tiles__title{margin-bottom:0}
.tiles--head + .feature-row,.tiles--head + .row{padding-top:40px}
.tiles--more{padding-block:0 80px}
.tiles__grid{display:grid; gap:40px 24px; align-items:stretch}
.tiles__grid--3{grid-template-columns:repeat(3, minmax(0,1fr))}
.tiles__grid--2{grid-template-columns:repeat(2, minmax(0,1fr))}
.tile-block{display:grid; grid-template-rows:1fr auto auto; gap:0; min-width:0}
.tile-block .tile{margin-bottom:24px}
.tile-block__title{font-family:var(--fn); font-weight:400; font-size:26px; line-height:110%}
.tile-block .subtitle_bk{margin-top:10px; font-size:15px}

/* ---------- statements: a claim that has no object gets words, laid out the way the site sets a section:
   the headline in the left column, the argument in the right, a hairline above. ---------- */
.feature-row__title{font-size:38px}
.statement{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px 56px; align-items:start; padding-block:96px 80px; border-top:1.5px solid var(--hair)}
.statement__head{min-width:0}
.statement__body{padding-top:38px}   /* the argument starts level with the headline, below the eyebrow */
.statement__body .subtitle_bk{margin-top:0; font-size:18px; max-width:52ch}
.statement__body .clip__foot{margin-top:20px}
.statement .clip__eyebrow{margin-bottom:16px}
/* one sourced number under the problem, plain type on the ground between two hairlines: the number in Inter Tight,
   the sentence beside it, the source under the sentence (the LinkedIn set's "Every number has a source") */
.proof{grid-column:1 / -1; margin-top:40px; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 40px; align-items:baseline; padding:28px 0 26px; border-top:1.5px solid var(--hair); border-bottom:1.5px solid var(--hair)}
.proof__n{font-family:var(--fn); font-weight:500; font-size:80px; line-height:1; letter-spacing:-.035em; grid-row:1 / 3; font-variant-numeric:tabular-nums; align-self:center}
.proof__t{color:var(--t8); font-size:22px; line-height:1.35; align-self:end; max-width:40ch; text-wrap:pretty}
.proof__s{font-size:14px; color:var(--t35)}
.proof__s a{color:var(--pale); text-decoration:none}
.proof__s a:hover{text-decoration:underline}
/* ---------- object rows: the site's own panel (banrox.com style.css .fp_col.bg_gradient_border): glass over the lit ground,
   the inset highlight, a hairline that fades down, radius 32. The instrument stands inside it; the words beside it in the
   site's type. A brand circle (.bg_card_circle:before) lights the panel from behind. ---------- */
.row{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:56px; align-items:center; padding-block:48px}
.row--flip{grid-template-columns:minmax(0,1fr) minmax(0,1.45fr)}
.row--flip .row__panel{order:2}
.row--phone,.row--phone.row--flip{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* a phone alone needs less room than an instrument with a column beside it */
.row__panel{position:relative; min-width:0}
.row__glow{position:absolute; width:422px; height:422px; border-radius:50%; background:var(--brand); opacity:.25; filter:blur(100px); pointer-events:none; z-index:-1; right:-120px; top:-140px}
.row--flip .row__glow{right:auto; left:-120px}
.panel{position:relative; display:grid; justify-items:center; align-items:center; padding:40px 28px; min-height:420px; border-radius:32px; overflow:clip; background:rgba(33,33,33,.10); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); box-shadow:inset 0 4px 20px 0 rgba(255,255,255,.08)}
.panel::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; background:linear-gradient(to bottom, rgba(255,255,255,.2), rgba(255,255,255,.05)); -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none}
.panel .widget{max-width:640px; width:100%; min-height:0; position:relative; z-index:1}
.row__copy{min-width:0; max-width:46ch}
.row__title{font-size:40px}
.row__copy .subtitle_bk{font-size:18px; margin-top:20px; max-width:40ch}

/* three claims in one row, each with a small instrument above its words: the same glass panel, smaller */
.claims{padding-block:64px 16px}
.claims__grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:32px 40px; margin-top:48px}
.claim{display:grid; align-content:start; gap:12px; padding-top:24px; border-top:1.5px solid var(--hair)}
.claim__title{font-family:var(--fn); font-weight:400; font-size:26px; line-height:115%; text-wrap:pretty}
.claim .subtitle_bk{margin-top:0; font-size:15px}
.panel--sm{min-height:190px; padding:18px 18px 16px; border-radius:24px; justify-items:stretch}   /* the three instruments share one height; each centres in it */
.claim__panel{margin-bottom:12px}
.claim__panel .widget{max-width:none; min-height:0}
.section-lead{margin-top:16px}
/* the Squad statement carries an object under its headline: the two cards of the account, turned. It floats on the
   ground with its cast shadow, the way the hero's card does; no panel. */
.statement__object{width:100%; max-width:none; min-height:0; margin-top:44px}
.statement--squad{align-items:start}

/* ---------- join + footer ---------- */
.join{padding-block:60px 100px; display:grid; justify-items:center; gap:0}
.join .access{margin-top:32px; width:100%}
.page-foot{display:grid; gap:12px; padding-block:24px 48px; border-top:1.5px solid var(--hair)}
.page-foot img{height:18px; width:auto}
.page-foot p{color:rgba(255,255,255,.7); font-size:14px; line-height:150%; letter-spacing:-.02em; max-width:80ch}
/* on banrox.com the site's footer follows; the page keeps only its one-line note above the site's legal notice */
.page-note{padding-block:24px 0; border-top:1.5px solid var(--hair)}
.page-note p{color:rgba(255,255,255,.7); font-size:14px; line-height:150%; letter-spacing:-.02em; max-width:80ch}
.access__check{grid-column:1 / -1}
.access__check:empty{display:none}

/* ---------- the site's breakpoints ---------- */
@media (max-width:1320px){
  .intro .access{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* the two fields keep their full placeholders; the button takes the next line */
  .intro .access .action{grid-column:1 / -1; justify-self:start}
}
@media (max-width:1024px){
  .ftbk_title{font-size:56px}
  .title_bk{font-size:40px}
  .join_title{font-size:40px}
  .intro{padding-block:120px 48px}
  .feature-row,.tiles{padding-block:48px}
  .sitebar__inside{padding:4px 4px 4px 12px}
}
@media (max-width:900px){
  .feature-row__title{font-size:32px}
  body{background-size:200% auto, auto, auto, auto, auto}
  .row,.row--flip,.row--phone,.row--phone.row--flip{grid-template-columns:1fr; gap:24px; padding-block:32px}
  .row--flip .row__panel{order:0}
  .panel{padding:24px 12px; min-height:0; border-radius:24px}
  .row__glow{width:260px; height:260px; right:0; top:-40px}
  .row--flip .row__glow{left:0}
  .row__title{font-size:32px}
  .row__copy .subtitle_bk{font-size:16px; margin-top:14px}
  .proof{grid-template-columns:1fr; gap:8px; padding:24px 0; margin-top:24px}
  .proof__n{grid-row:auto; font-size:56px}
  .proof__t{font-size:18px}
  .statement{grid-template-columns:1fr; gap:20px; padding-block:64px 48px}
  .statement__body{padding-top:0}
  .statement__body .subtitle_bk{font-size:16px}
  .claims{padding-block:64px 0}
  .claims__grid{grid-template-columns:1fr; gap:28px; margin-top:32px}
  .intro{grid-template-columns:1fr; gap:8px}
  .intro__card{order:-1; aspect-ratio:16/11; margin-inline:-16px}
  .sitebar__product{display:none}
  .feature-row{grid-template-columns:1fr; gap:28px}
  .feature-row--flip .tile{order:0}
  .tiles__grid--3{grid-template-columns:repeat(2, minmax(0,1fr))}
  .tiles__grid--2{grid-template-columns:1fr}
  .tile{min-height:300px; padding:28px 20px}
  .access{grid-template-columns:1fr}
}
@media (max-width:768px){
  .ftbk_title{font-size:48px}
  .subbox_title{font-size:14px}
  .join .subtitle_bk{font-size:16px}
}
@media (max-width:640px){
  .action{height:48px}
  .btn_transparent{font-size:14px}
}
@media (max-width:480px){
  .access .action{width:100%}
  .tiles__grid--3{grid-template-columns:1fr}
  .tile{padding:24px 16px}
}
@media (max-width:375px){
  .ftbk_title{font-size:36px}
}
@media (prefers-reduced-motion: reduce){ .action,.btn_transparent:before{transition:none} }