/* Banrox capture widgets: waitlist sheet, marketplace listing, moments, quiz and blog modules.
   Tokens copied from live banrox.com (.mkx in bx-market.css). Button recipes copied from style.css.
   Nothing here is a new button style: .btn, .btn_gradient, .btn_transparent, .btn_verysmall, .btn_smallest are the site's own.

   Ported from the design bundle (Downloads/bundle/css/bx-capture.css, 17 Sep 2026) rather than
   written again from the screenshots. Everything above the line that reads "production additions"
   is the bundle's file, byte for byte, apart from two edits made in place:
     * .bxc-overlay and .bxc-sheet were position: absolute, because the mockups sit inside a drawn
       phone frame. On a real page they are fixed, or they scroll away with the catalog;
     * .bxc-capsule likewise absolute -> fixed.
   Everything below that line is ours, and every rule there says why it exists. */

.bxc {
  --bx-bg: #080814; --bx-card: #090C21; --bx-blue: #264BFF; --bx-blue-alt: #375DFB; --bx-lilac: #8585E9; --bx-peri: #B9C3FF;
  --bx-success: #31A650; --bx-error: #FF4242;
  --bx-line: rgba(255, 255, 255, .10); --bx-line-14: rgba(255, 255, 255, .14); --bx-line-8: rgba(255, 255, 255, .08);
  --bx-text: #FFFFFF; --bx-text-2: rgba(255, 255, 255, .7); --bx-text-3: rgba(255, 255, 255, .5);
  --bx-inset: inset 0 4px 20px rgba(255, 255, 255, .08);
  --bx-hair: inset 0 0 0 1.5px var(--bx-line), var(--bx-inset);
  --bx-hair-live: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset), 0 20px 50px rgba(38, 75, 255, .24);
  --bx-glow: 0 12px 32px -12px rgba(38, 75, 255, .45);
  --bx-ramp: radial-gradient(50% 169.64% at 50% 50%, #8585E9 0%, #264BFF 100%);
  --bx-ease: cubic-bezier(.2, .8, .2, 1);
  --bx-r-card: 24px; --bx-r-panel: 16px; --bx-r-control: 12px; --bx-r-pill: 999px;
  --bx-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bx-font-numbers: 'Inter Tight', 'Inter', system-ui, sans-serif;
  font-family: var(--bx-font); color: var(--bx-text); letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
:where(.bxc) *, :where(.bxc) *::before, :where(.bxc) *::after { box-sizing: border-box; }
:where(.bxc) :where(p, h1, h2, h3) { margin: 0; }
:where(.bxc) img { display: block; }
:where(.bxc) button { font-family: inherit; }

/* ---------- site buttons (verbatim recipes) ---------- */
.bxc .btn { border: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; position: relative; font-weight: 500; font-size: 18px; line-height: 100%; letter-spacing: -0.02em; color: #FFFFFF; text-decoration: none; padding: 0 24px 0 32px; gap: 8px; height: 56px; white-space: nowrap; transition: .25s; background: none; font-family: var(--bx-font); }
.bxc .btn span { position: relative; z-index: 3; }
.bxc .btn svg { position: relative; z-index: 3; }
.bxc .btn_smallest { font-size: 16px; padding: 0 32px; height: 48px; }
.bxc .btn_verysmall { font-size: 16px; padding: 0 19.5px; height: 44px; }
.bxc .btn_gradient { overflow: hidden; background: radial-gradient(circle at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 50%), linear-gradient(rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 25%), radial-gradient(50% 169.64%, #8585E9 0%, #264BFF 100%); }
.bxc .btn_gradient::after { content: ""; position: absolute; inset: 1.5px; background: radial-gradient(50% 169.64%, #8585E9 0%, #264BFF 100%); border-radius: 8px; z-index: 1; }
.bxc .btn_transparent { border-radius: 12px; padding: 0 30px; letter-spacing: .01em; height: 48px; }
.bxc .btn_transparent.btn_verysmall { padding: 0 19.5px; height: 44px; }
.bxc .btn_transparent::before { content: ""; background: linear-gradient(-90deg, #8585E9, #264BFF); border-radius: inherit; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 2px; position: absolute; inset: 0; pointer-events: none; transition: .3s; }
.bxc .btn_lightgrey { background: #EBF1FF; color: #141C24; }
/* marketplace hover and press (same as .mkx .btn in bx-market.css and the quality standard) */
.bxc .btn:hover { transform: translateY(-2px); box-shadow: var(--bx-glow); }
.bxc .btn:active { transform: translateY(1px); transition: transform 75ms var(--bx-ease); box-shadow: none; }
.bxc .btn[disabled], .bxc .btn.disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }
.bxc .btn.is-hover { transform: translateY(-2px); box-shadow: var(--bx-glow); }
.bxc .btn.is-busy { cursor: progress; }
.bxc .btn.is-busy::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 8px; background: linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .28) 50%, rgba(255, 255, 255, 0) 70%); background-size: 220% 100%; animation: bxc-sheen 1.1s linear infinite; }
.bxc-block { width: 100%; }

/* ---------- text ---------- */
.bxc-h1 { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 32px; line-height: 38px; letter-spacing: -0.02em; }
.bxc-h2 { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 28px; line-height: 32px; letter-spacing: -0.02em; }
.bxc-h3 { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 20px; line-height: 24px; letter-spacing: -0.01em; }
.bxc-sub { font-size: 16px; line-height: 24px; color: var(--bx-text-2); }
.bxc-small { font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.bxc-fine { font-size: 12px; line-height: 18px; color: var(--bx-text-3); }
.bxc-fine a, .bxc-link { color: var(--bx-peri); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(185, 195, 255, .45); }
.bxc-link { font-size: 14px; line-height: 20px; }
.bxc-label { font-size: 11px; line-height: 16px; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .45); }
.bxc-num { font-family: var(--bx-font-numbers); font-weight: 500; letter-spacing: -0.03em; }
.bxc-center { text-align: center; text-wrap: balance; }
.bxc-h2, .bxc-h3, .bxc-sub, .bxc-small, .bxc-fine { text-wrap: pretty; }

/* ---------- surfaces ---------- */
.bxc-glass { background: radial-gradient(120% 70% at 50% 0%, rgba(38, 75, 255, .20) 0%, rgba(38, 75, 255, 0) 62%), rgba(9, 12, 33, .94); box-shadow: var(--bx-hair), 0 40px 90px -20px rgba(0, 0, 0, .7); -webkit-backdrop-filter: blur(24px) saturate(140%); backdrop-filter: blur(24px) saturate(140%); }
.bxc-overlay { position: fixed; inset: 0; background: rgba(8, 8, 20, .66); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; z-index: 20; }
.bxc-overlay--light { background: rgba(8, 8, 20, .42); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* desktop modal: the card rises out of the top edge */
.bxc-modal { position: relative; width: 440px; border-radius: var(--bx-r-card); padding: 116px 40px 32px; }
.bxc-modal__card { position: absolute; left: 50%; top: -86px; width: 280px; margin-left: -140px; filter: drop-shadow(0 26px 34px rgba(38, 75, 255, .38)) drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.bxc-modal__card img { width: 280px; height: auto; }

/* phone bottom sheet */
.bxc-sheet { position: fixed; left: 0; right: 0; bottom: 0; border-radius: var(--bx-r-card) var(--bx-r-card) 0 0; padding: 10px 20px 34px; z-index: 21; }
.bxc-grab { width: 36px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .28); margin: 0 auto 16px; }
.bxc-sheet__card { width: 176px; margin: 4px auto 20px; filter: drop-shadow(0 20px 26px rgba(38, 75, 255, .36)) drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
.bxc-sheet__card img { width: 176px; height: auto; }

/* close button, 44px target */
.bxc-x { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bx-line-8); transition: background .3s var(--bx-ease); }
.bxc-x:hover { background: rgba(255, 255, 255, .12); color: #FFFFFF; }
.bxc-x svg { width: 18px; height: 18px; }

/* ---------- form ---------- */
.bxc-form { display: flex; flex-direction: column; gap: 16px; }
.bxc-field { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bxc-field label { font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.bxc-input { width: 100%; height: 56px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(33, 33, 33, .1); padding: 0 20px; font: 400 16px/1 var(--bx-font); color: #FFFFFF; letter-spacing: -0.01em; outline: none; transition: border-color .3s var(--bx-ease), box-shadow .3s var(--bx-ease); }
.bxc-input::placeholder { color: rgba(255, 255, 255, .45); }
.bxc-input:hover { border-color: rgba(255, 255, 255, .45); }
.bxc-input:focus, .bxc-input.is-focus { border-color: #8585E9; box-shadow: 0 0 0 4px rgba(133, 133, 233, .18); }
.bxc-input.is-error { border-color: var(--bx-error); box-shadow: 0 0 0 4px rgba(255, 66, 66, .14); }
.bxc-input[disabled] { opacity: .55; cursor: not-allowed; }
.bxc-err { display: flex; align-items: center; gap: 6px; font-size: 13px; line-height: 18px; color: var(--bx-error); }
.bxc-err svg { width: 16px; height: 16px; flex: none; }
.bxc-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: rgba(255, 66, 66, .08); box-shadow: inset 0 0 0 1px rgba(255, 66, 66, .28); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .86); text-align: left; }
.bxc-banner svg { width: 18px; height: 18px; flex: none; color: var(--bx-error); margin-top: 1px; }

/* 6-digit code */
.bxc-code { display: grid; grid-template-columns: repeat(6, 48px); gap: 8px; justify-content: center; }
.bxc-code span { height: 56px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .3); background: rgba(33, 33, 33, .1); display: flex; align-items: center; justify-content: center; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 24px; color: #FFFFFF; position: relative; }
.bxc-code span.is-active { border-color: #8585E9; box-shadow: 0 0 0 4px rgba(133, 133, 233, .18); }
.bxc-code span.is-active::after { content: ""; width: 1.5px; height: 24px; background: #FFFFFF; border-radius: 1px; animation: bxc-caret 1.1s steps(1) infinite; }
.bxc-code.is-loading span { border-color: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .5); background: linear-gradient(100deg, rgba(255, 255, 255, .03) 30%, rgba(255, 255, 255, .09) 50%, rgba(255, 255, 255, .03) 70%); background-size: 240% 100%; animation: bxc-sheen 1.2s linear infinite; }
.bxc-row { display: flex; align-items: center; justify-content: center; gap: 20px; }
.bxc-textbtn { border: none; background: none; cursor: pointer; font: 500 14px/20px var(--bx-font); color: var(--bx-peri); padding: 12px 4px; min-height: 44px; }
.bxc-textbtn[disabled] { color: rgba(255, 255, 255, .5); cursor: default; }
.bxc-textbtn--muted { color: rgba(255, 255, 255, .7); }

/* ---------- success, seats, round actions ---------- */
.bxc-done__card { position: relative; }
.bxc-check { position: absolute; right: -8px; bottom: -8px; width: 32px; height: 32px; border-radius: 50%; background: var(--bx-success); box-shadow: 0 0 0 3px #090C21; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.bxc-check svg { width: 18px; height: 18px; }
.bxc-place { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.bxc-place .bxc-num { font-size: 48px; line-height: 52px; }
.bxc-seats { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.bxc-seats__txt { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.bxc-seats__txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-seats__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.bxc-avatars { display: flex; gap: 8px; }
.bxc-av { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--bx-font); color: #FFFFFF; }
.bxc-av--me { background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bxc-av--open { border: 1.5px dashed rgba(255, 255, 255, .32); color: rgba(255, 255, 255, .7); background: none; cursor: pointer; }
/* 36px circle, 44px touch target */
.bxc-av--open { position: relative; }
button.bxc-av--open::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.bxc-av--open svg { width: 14px; height: 14px; }
.bxc-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.bxc-act { display: flex; flex-direction: column; align-items: center; gap: 8px; border: none; background: none; cursor: pointer; padding: 0; color: #FFFFFF; font: 400 12px/16px var(--bx-font); }
.bxc-act i { width: 54px; height: 54px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--bx-line-14), var(--bx-inset); transition: transform .3s var(--bx-ease), box-shadow .3s var(--bx-ease), background .3s var(--bx-ease); }
.bxc-act i svg { width: 22px; height: 22px; }
.bxc-act span { color: var(--bx-text-2); }
.bxc-act:hover i { transform: translateY(-2px); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5), var(--bx-inset), var(--bx-glow); }
.bxc-act:active i { transform: scale(.96); transition-duration: 75ms; }
.bxc-act--primary i { background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), var(--bx-glow); }
.bxc-linkfield { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 48px; padding: 0 6px 0 16px; border-radius: 12px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); font-size: 14px; color: var(--bx-text-2); }
.bxc-linkfield b { font-weight: 500; color: #FFFFFF; }
.bxc-linkfield button { width: 36px; height: 36px; border-radius: 10px; border: none; background: rgba(255, 255, 255, .06); color: #FFFFFF; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.bxc-linkfield button svg { width: 16px; height: 16px; }

/* toast (2.5 s, bottom, never modal) */
.bxc-toast { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; font-size: 14px; line-height: 20px; white-space: nowrap; z-index: 40; animation: bxc-rise .4s var(--bx-ease) both; }
.bxc-toast svg { width: 18px; height: 18px; color: var(--bx-success); }

/* hairline pill for a real status */
.bxc-pill { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--bx-r-pill); font-size: 12px; line-height: 1; color: rgba(255, 255, 255, .86); background: rgba(38, 75, 255, .14); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .42); letter-spacing: 0; }

/* skeletons */
.bxc-sk { border-radius: 10px; background: linear-gradient(100deg, rgba(255, 255, 255, .04) 30%, rgba(255, 255, 255, .10) 50%, rgba(255, 255, 255, .04) 70%); background-size: 240% 100%; animation: bxc-sheen 1.2s linear infinite; }

/* ---------- iOS inset grouped list and switch ---------- */
.bxc-list { border-radius: 16px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); overflow: hidden; text-align: left; }
.bxc-li { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; position: relative; }
.bxc-li + .bxc-li::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--bx-line-8); }
.bxc-li--flush + .bxc-li::before, .bxc-li--flush::before { left: 16px; }
.bxc-ico { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; background: rgba(38, 75, 255, .18); color: var(--bx-peri); }
.bxc-ico svg { width: 16px; height: 16px; }
.bxc-li__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bxc-li__txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-li__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.bxc-switch { position: relative; width: 51px; height: 31px; flex: none; border-radius: 16px; border: none; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .16); transition: background .25s var(--bx-ease); }
.bxc-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), 0 1px 1px rgba(0, 0, 0, .16); transition: transform .25s var(--bx-ease); }
.bxc-switch[aria-checked="true"] { background: var(--bx-success); }
.bxc-switch[aria-checked="true"]::after { transform: translateX(20px); }

/* note: icon plus two lines on the ground, never a bordered box */
.bxc-note { display: flex; gap: 12px; align-items: flex-start; text-align: left; }
.bxc-note .bxc-ico { margin-top: 1px; }
.bxc-note b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-note i { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }

/* ---------- corner card and capsule (moments) ---------- */
.bxc-corner { position: absolute; right: 32px; bottom: 32px; width: 368px; border-radius: var(--bx-r-card); padding: 20px; z-index: 30; animation: bxc-rise .4s var(--bx-ease) both; }
.bxc-corner__row { display: flex; gap: 16px; align-items: center; padding-right: 36px; }
.bxc-corner__card { width: 112px; flex: none; filter: drop-shadow(0 12px 16px rgba(38, 75, 255, .32)); }
.bxc-corner__card img { width: 112px; height: auto; }
.bxc-corner .bxc-x { top: 10px; right: 10px; }
.bxc-capsule { position: fixed; left: 16px; right: 16px; bottom: 20px; height: 64px; border-radius: 999px; display: flex; align-items: center; gap: 12px; padding: 0 6px 0 10px; z-index: 30; animation: bxc-rise .4s var(--bx-ease) both; }
.bxc-capsule__open { flex: 1; display: flex; align-items: center; gap: 12px; border: none; background: none; color: #FFFFFF; text-align: left; cursor: pointer; padding: 0; height: 100%; min-width: 0; }
.bxc-capsule__card { width: 48px; flex: none; filter: drop-shadow(0 6px 8px rgba(38, 75, 255, .35)); }
.bxc-capsule__card img { width: 48px; height: auto; }
.bxc-capsule__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; white-space: nowrap; }
.bxc-capsule__txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-capsule__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-2); }
.bxc-capsule .bxc-x { position: static; flex: none; width: 44px; height: 44px; }
.bxc .bxc-capsule__join { flex: none; height: 40px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
.bxc .bxc-capsule__join::after { border-radius: 999px; }
.bxc-capsule__chev { width: 36px; height: 36px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); }
.bxc-capsule__chev svg { width: 16px; height: 16px; }

/* ---------- inline content block (blog, calculators) ---------- */
.bxc-inline { position: relative; display: flex; gap: 32px; align-items: center; padding: 28px 32px; border-radius: var(--bx-r-card); background: radial-gradient(90% 120% at 0% 0%, rgba(38, 75, 255, .20) 0%, rgba(38, 75, 255, 0) 60%), rgba(9, 12, 33, .9); box-shadow: var(--bx-hair); overflow: hidden; }
.bxc-inline__card { width: 220px; flex: none; filter: drop-shadow(0 18px 24px rgba(38, 75, 255, .34)); transform: rotate(-4deg); }
.bxc-inline__card img { width: 220px; height: auto; }
.bxc-inline__txt { display: flex; flex-direction: column; gap: 10px; }
.bxc-inline__row { display: flex; align-items: center; gap: 20px; margin-top: 8px; }

/* ---------- motion ---------- */
@keyframes bxc-sheen { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes bxc-caret { 50% { opacity: 0; } }
@keyframes bxc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.bxc-toast { animation-name: bxc-rise-x; }
@keyframes bxc-rise-x { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) {
  .bxc *, .bxc *::before, .bxc *::after { animation: none !important; transition: none !important; }
  .bxc .btn:hover, .bxc .bxc-act:hover i { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .bxc-glass { background: #0D1130; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .bxc-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(8, 8, 20, .82); }
}


/* ---------- production additions ---------- */

/* The Squad row borrows the catalog's own class names so it reads as a row in the list. The live
   stylesheet does not carry every one of them in the shape the boards assume, so the differences
   are restated here from the bundle's bx-site-context.css, every one scoped to
   .cc_catalog_item--squad so nothing here can reach a real card row. Values are the bundle's. */
.cc_catalog_item--squad { background: radial-gradient(55% 90% at 12% 0%, rgba(38, 75, 255, .16) 0%, rgba(38, 75, 255, 0) 70%), rgba(33, 33, 33, .1); }
.cc_catalog_item--squad .cc_cib_image { height: 173px; display: flex; align-items: center; justify-content: center; }
.cc_catalog_item--squad .cc_cib_image img { width: 244px; height: auto; filter: drop-shadow(0 18px 24px rgba(38, 75, 255, .36)) drop-shadow(0 6px 10px rgba(0, 0, 0, .5)); }
.cc_catalog_item--squad .cc_ci_left_inside { width: 292px; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; }
.cc_catalog_item--squad .cc_cib_row { display: flex; justify-content: center; margin: 16px 0; }
.cc_catalog_item--squad .cc_cib_terms { text-align: center; margin-top: 12px; }
.cc_catalog_item--squad .cc_cib_recommended { margin: 20px 0 16px; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .7); }
.cc_catalog_item--squad .cc_cib_recommended b { color: #FFFFFF; font-weight: 500; }
.cc_catalog_item--squad .cc_cib_infos { border-radius: 8px; padding: 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 12px; font-size: 13px; color: rgba(255, 255, 255, .7); }
.cc_catalog_item--squad .cc_cib_info { display: flex; justify-content: space-between; align-items: center; }
.cc_catalog_item--squad .cc_cib_info b { font-weight: 500; color: #FFFFFF; }
.cc_catalog_item--squad .cc_ci_right { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cc_catalog_item--squad .cc_ci_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.cc_catalog_item--squad .cc_ci_title { font-size: 20px; font-weight: 500; line-height: 24px; }
.cc_catalog_item--squad .cc_ci_byline { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .5); margin-top: 6px; }
.cc_catalog_item--squad .cc_ci_cols { display: flex; margin-top: 20px; border-radius: 12px; background-color: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); overflow: hidden; }
.cc_catalog_item--squad .cc_ci_col { flex: 1; min-width: 0; }
.cc_catalog_item--squad .cc_ci_col + .cc_ci_col { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .08); }
.cc_catalog_item--squad .cc_ci_col_title { font-size: 16px; line-height: 20.8px; padding: 14px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .01); display: flex; align-items: center; gap: 10px; }
.cc_catalog_item--squad .cc_ci_col_desc { font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .7); padding: 12px 14px 14px; }
.cc_catalog_item--squad .cc_ci_content_outer { margin-top: 28px; }
.cc_catalog_item--squad .cc_ci_content_outer .cc_ci_title { margin-bottom: 10px; }
.cc_catalog_item--squad .cc_ci_content p { font-size: 16px; line-height: 24px; color: rgba(255, 255, 255, .72); margin: 0; }
.cc_catalog_item--squad .cc_ci_right .cc_ci_fine { margin-top: auto; padding-top: 18px; font-size: 12px; line-height: 18px; color: rgba(255, 255, 255, .5); }

/* The phone row is its own board (parts.j2 m_squad_listing, MarketPhone.j2), not the desktop row
   squeezed. Its shell classes are the bundle's bx-site-context.css .m-item / .m-stack / .m-btns,
   restated under the row's own class. Production stacks the catalog at 768px, so that is where
   the desktop row hands over to this one; there is no breakpoint of ours in between. */
.cc_catalog_item--squad.cc_catalog_item--squad-phone { display: none; padding: 16px; }
.cc_catalog_item--squad-phone .cc_cib_image { height: auto; padding: 10px 0 4px; }
.cc_catalog_item--squad-phone .cc_cib_image img { width: 250px; }
.cc_catalog_item--squad-phone .m-stack { display: flex; flex-direction: column; gap: 12px; }
.cc_catalog_item--squad-phone .m-btns { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
@media (max-width: 768px) {
    .cc_catalog_item--squad.cc_catalog_item--squad-desktop { display: none; }
    .cc_catalog_item--squad.cc_catalog_item--squad-phone { display: block; }
}

/* The boards draw the desktop modal and the phone sheet as two screens. On a real page they have
   to be ONE element: two copies would mean two inputs carrying id="email", and the join runtime
   would wire the wrong one. .bxc-dialog is the bundle's .bxc-modal at width and its .bxc-sheet
   below 600px, with the geometry each one specifies, plus what a real viewport needs and a mockup
   frame never did: a modal taller than the window scrolls inside itself, and the sheet clears the
   home indicator. */
.bxc-overlay[hidden] { display: none !important; }          /* .bxc-overlay is display: flex, which beats the hidden attribute */
.bxc-overlay { overflow-y: auto; }                           /* a modal taller than the window scrolls the overlay, so the card that rises 86px above the modal is never clipped */
.bxc-dialog { position: relative; width: 440px; max-width: calc(100vw - 32px); margin: 100px auto 32px; border-radius: var(--bx-r-card); padding: 116px 40px 32px; }
a.bxc-act, a.bxc-act span { text-decoration: none; }         /* two of the four actions are links on a real page, and the site underlines links */
.bxc-dialog .bxc-grab { display: none; }
.bxc-dialog__card { position: absolute; left: 50%; top: -86px; width: 280px; margin-left: -140px; filter: drop-shadow(0 26px 34px rgba(38, 75, 255, .38)) drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); }
.bxc-dialog__card img { width: 280px; height: auto; }
@media (max-width: 600px) {
    .bxc-overlay { align-items: flex-end; }
    .bxc-dialog { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; margin: 0; border-radius: var(--bx-r-card) var(--bx-r-card) 0 0; padding: 10px 20px calc(34px + env(safe-area-inset-bottom, 0px)); max-height: 92vh; overflow-y: auto; }
    .bxc-dialog .bxc-grab { display: block; }
    .bxc-dialog__card { position: static; width: 176px; margin: 4px auto 20px; filter: drop-shadow(0 20px 26px rgba(38, 75, 255, .36)) drop-shadow(0 6px 12px rgba(0, 0, 0, .45)); }
    .bxc-dialog__card img { width: 176px; }
}

/* The capsule on a real page: above the page, below the consent banner (z-index 9999), and clear
   of the home indicator. The bundle has z-index 30 and bottom 20px; those are for a mockup frame. */
.bxc-capsule { z-index: 900; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
.bxc-capsule[hidden] { display: none !important; }

/* The toast likewise: the bundle draws it absolute inside a mockup frame; on a page it is fixed. */
.bxc-toast { position: fixed; z-index: 901; }

/* The sheet's overlay: the bundle's 20 sat under the catalog's sort selects (inline z-index 99), so
   "Categories" and "Sort By Name" showed through the match sheet. Above the capsule and the corner
   (900), below the consent banner (9999). */
.bxc-overlay { z-index: 950; }

/* The card in the marketplace filter rail: the bundle's bx-site-context.css .rail-card, rules and
   names as they are. Two properties added: width and box-sizing, because the real sidebar lays its
   children out with align-items: flex-start where the mockup's stretches them. */
.rail-card { position: relative; width: 100%; box-sizing: border-box; border-radius: 16px; padding: 16px; margin: 4px 0 24px; background: radial-gradient(100% 70% at 50% 0%, rgba(38, 75, 255, .22) 0%, rgba(38, 75, 255, 0) 70%), rgba(9, 12, 33, .9); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .10), inset 0 4px 20px rgba(255, 255, 255, .08); display: flex; flex-direction: column; gap: 10px; }
.rail-card[hidden] { display: none !important; }
.rail-card__card { width: 150px; margin: 2px auto 6px; filter: drop-shadow(0 12px 16px rgba(38, 75, 255, .36)); }
.rail-card__card img { width: 150px; height: auto; }
.rail-card b { font-weight: 500; font-size: 15px; line-height: 20px; text-wrap: balance; }
.rail-card p { font-size: 13px; line-height: 19px; color: rgba(255, 255, 255, .7); }
.rail-card .btn { margin-top: 4px; }

/* The in-article block on a real page. An article styles its own prose (.blog-post-content h2 and
   .blog-post-content > * reach inside the block), so the board's inline values are held one level
   more specific. The phone geometry is the bundle's own for .bxc-inline (BlogUpgradePhone.j2:
   display block, padding 22px 18px 20px, margin 28px 0). */
.bxc-inline[hidden] { display: none !important; }
.bxc-inline .bxc-h3 { font-weight: 500; margin: 0; }
.bxc-inline p, .bxc-inline .bxc-pill { margin: 0; }
.bxc-inline__row .btn { margin: 0; }
@media (max-width: 600px) {
    .bxc-inline { display: block; padding: 22px 18px 20px; margin: 28px 0 !important; }
    .bxc-inline__card { margin-bottom: 16px; }
}

/* The error line and the Turnstile holder bx-squad.js appends to any form it wires, in the kit's
   own error colour. */
.bxc .bxs-form-err { font-size: 13px; line-height: 18px; color: var(--bx-error); }
.bxc .bxs-ts { min-height: 0; }

/* The seat switch draws at the iOS size, 51 by 31. The plan's rule for small controls (the invite
   circles keep their size and get a 44px touch area) applies here too: an invisible halo takes the
   tap, the pixels stay the bundle's. */
.bxc-switch::before { content: ""; position: absolute; inset: -7px; }

/* The corner card on a real page (ReportBackDesktop.j2, MomentsStates.j2): the bundle draws it
   absolute inside a mockup frame; on a page it is fixed, above the page and below the consent
   banner, and on a phone it takes the page's gutters rather than its 400px. */
.bxc-corner { position: fixed; z-index: 900; }
@media (max-width: 600px) {
    .bxc-corner { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: auto !important; }
}

/* The capsule on a computer (Art, 21 Sep 2026: "after closing the windows nothing follows up"): when
   somebody closes the sheet with its X, the offer folds into this pill at the corner instead of
   vanishing, one tap from coming back. On a phone it keeps the page's gutters as before. */
@media (min-width: 601px) {
    .bxc-capsule { left: auto; right: 32px; bottom: 32px; width: 400px; }
}
.bxc-capsule__card .bxc-ico, .bxc-capsule__card > svg { width: 44px; height: 44px; }
.bxc-capsule__txt b, .bxc-capsule__txt i { overflow: hidden; text-overflow: ellipsis; }

/* The member listing (site/marketplace/_squad_slot_member.html): the seat the person already holds. */
.bxc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sqm-skel { display: inline-block; width: 132px; height: 44px; border-radius: 12px; vertical-align: middle;
    background: linear-gradient(90deg, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, .06) 100%);
    background-size: 240% 100%; animation: bxc-sheen 1.4s linear infinite; }
.bxc-av--friend { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); color: #FFFFFF; }
.bxc-av--friend svg { width: 16px; height: 16px; }
.cc_catalog_item--squad-member .sqm-desk { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 18px; }
.cc_catalog_item--squad-member .sqm-desk .bxc-place { align-items: flex-start; }
.cc_catalog_item--squad-member .sqm-actions { max-width: 380px; }
.cc_catalog_item--squad-member .cc_cib_image .bxc-done__card { display: inline-block; }
.cc_catalog_item--squad-member .cc_cib_image .bxc-done__card img { width: 100%; max-width: 240px; }