/* Banrox funnel hooks. Copied from the design bundle (Downloads/bundle/css/bx-hooks.css,
   17 Sep 2026) rather than written again from the screenshots, and loaded only by the tool pages
   that use it, never site-wide. It builds on the tokens bx-capture.css defines on .bxc, so that
   file is loaded first wherever this one is.

   Production additions are at the END of this file, under one heading, and nothing above that
   heading has been changed. */

/* Banrox funnel hooks: email-first steps, counters, group invites, denial decoder, inline capture,
   calculator context, student loan deadline, partner pages, ads, nurture emails and the front-desk flyer.
   Builds on bx-capture.css tokens (.bxc). Buttons stay the site's own: .btn, .btn_gradient, .btn_transparent,
   .btn_border, .btn_small, .btn_smallest, .btn_verysmall. Colors: brand blue family, white at opacities,
   #31A650 for success, #FF4242 for errors. Nothing orange or amber. */

/* ---------- site button that the calculator page already uses ---------- */
.bxc .btn_border { color: #375DFB; background: rgba(255, 255, 255, .04); border: 1.5px solid #375DFB; border-radius: 8px; }
.bxc .btn_small { font-size: 18px; height: 48px; padding: 0 32px; }

.bxc .btn svg { width: 18px; height: 18px; flex: none; }

/* ---------- step label and progress ---------- */
.bxc-steps { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 14px; }
.bxc-steps i { width: 24px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .18); }
.bxc-steps i.is-on { background: var(--bx-ramp); }
.bxc-steps span { font-size: 12px; line-height: 16px; color: var(--bx-text-3); margin-left: 4px; }
.bxc-sent { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--bx-text-2); margin: 0 auto 18px; }
.bxc-sent svg { width: 18px; height: 18px; color: var(--bx-success); flex: none; }

/* ---------- selectable chips (group picker, notice dates) ---------- */
.bxc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bxc-chip { height: 44px; padding: 0 16px; border-radius: 999px; border: none; cursor: pointer; font: 500 15px/1 var(--bx-font); letter-spacing: -0.01em; color: rgba(255, 255, 255, .86); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bx-line-14); transition: background .3s var(--bx-ease), box-shadow .3s var(--bx-ease), transform 75ms var(--bx-ease); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.bxc-chip:hover { background: rgba(255, 255, 255, .09); }
.bxc-chip:active { transform: scale(.97); }
.bxc-chip[aria-pressed="true"] { color: #FFFFFF; background: rgba(38, 75, 255, .22); box-shadow: inset 0 0 0 1.5px #8585E9, 0 8px 22px -12px rgba(38, 75, 255, .8); }
.bxc-chip svg { width: 16px; height: 16px; }

/* ---------- message preview (the text people send from their own phone) ---------- */
.bxc-bubble { position: relative; padding: 14px 16px; border-radius: 18px 18px 18px 6px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bx-line-8); font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .9); text-align: left; }
.bxc-bubble b { display: block; margin-top: 6px; font-weight: 500; color: var(--bx-peri); overflow-wrap: anywhere; }
.bxc-caption { font-size: 12px; line-height: 16px; color: var(--bx-text-3); margin: 0 0 8px 2px; text-align: left; }

/* ---------- invitee banner ---------- */
.bxc-invite { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bx-line-8); align-self: center; }
.bxc-invite b { font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-invite i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); display: block; }
.bxc-av--lg { width: 44px; height: 44px; font-size: 15px; }

/* ---------- counter states ---------- */
.bxc-statecol { display: flex; flex-direction: column; gap: 10px; }
.bxc-statecol > p { font-size: 15px; line-height: 20px; font-weight: 500; color: rgba(255, 255, 255, .86); }
.bxc-statecol > span { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.bxc-capsule--static { position: relative; left: auto; right: auto; bottom: auto; animation: none; }
.bxc-sk--line { display: block; height: 12px; width: 132px; border-radius: 6px; margin-top: 4px; }

/* ---------- glass tool card (same recipe as the live calculator card) ---------- */
.bxc-tool { position: relative; border-radius: 24px; padding: 32px; box-shadow: inset 0 1px 5px 1px rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); background: rgba(9, 12, 33, .35); }
.bxc-panel { border-radius: 16px; padding: 24px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.bxc-kicker { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 5px 16px 5px 12px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font-size: 16px; color: #FFFFFF; }
.bxc-kicker svg { width: 16px; height: 16px; color: var(--bx-peri); }
.bxc-sectionhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.bxc-sectionhead b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 22px; }
.bxc-sectionhead span { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }

/* ---------- checkbox rows (real buttons with role=checkbox) ---------- */
.bxc-cbxlist { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 6px; }
.bxc-cbx { display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; padding: 10px 14px; border: none; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); color: rgba(255, 255, 255, .86); font: 400 15px/20px var(--bx-font); text-align: left; transition: background .3s var(--bx-ease), box-shadow .3s var(--bx-ease); }
.bxc-cbx:hover { background: rgba(255, 255, 255, .06); }
.bxc-cbx i { width: 22px; height: 22px; flex: none; border-radius: 6px; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45); display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.bxc-cbx i svg { width: 14px; height: 14px; opacity: 0; }
.bxc-cbx[aria-checked="true"] { background: rgba(38, 75, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .55); color: #FFFFFF; }
.bxc-cbx[aria-checked="true"] i { background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bxc-cbx[aria-checked="true"] i svg { opacity: 1; }

/* ---------- iOS segmented control ---------- */
.bxc-seg { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px; padding: 3px; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.bxc-seg button { height: 44px; border: none; border-radius: 9px; background: none; cursor: pointer; font: 500 14px/1 var(--bx-font); color: rgba(255, 255, 255, .72); transition: background .3s var(--bx-ease), color .3s var(--bx-ease); white-space: nowrap; }
.bxc-seg button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .2); }

/* ---------- plain-words result blocks ---------- */
.bxc-reason { padding: 18px 0; box-shadow: inset 0 -1px 0 var(--bx-line-8); display: flex; flex-direction: column; gap: 8px; text-align: left; }
.bxc-reason:first-child { padding-top: 4px; }
.bxc-reason h3 { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 17px; line-height: 22px; }
.bxc-reason q { quotes: none; display: block; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.bxc-reason p { font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .78); }
.bxc-reason p b { font-weight: 500; color: #FFFFFF; }
.bxc-ol { display: flex; flex-direction: column; gap: 12px; text-align: left; }
.bxc-ol li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .78); }
.bxc-ol li b { font-weight: 500; color: #FFFFFF; }
.bxc-ol li > span:first-child { width: 24px; height: 24px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--bx-font-numbers); color: var(--bx-peri); background: rgba(38, 75, 255, .16); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); margin-top: -1px; }
.bxc-ol--tight { gap: 10px; }
.bxc-ol--tight li { font-size: 14px; line-height: 20px; }
:where(.bxc) ol, :where(.bxc) ul { margin: 0; padding: 0; }

/* ---------- inline capture: "Email me this" with an optional Squad switch ---------- */
.bxc-capture { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.bxc-capture__head { display: flex; gap: 12px; align-items: flex-start; }
.bxc-capture__head b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 22px; }
.bxc-capture__head i { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); margin-top: 4px; }
.bxc-capture__row { display: flex; gap: 10px; align-items: flex-start; }
.bxc-capture__row .bxc-input { flex: 1; min-width: 0; }
.bxc-capture__row .btn { flex: none; height: 56px; }
.bxc-capture--stack .bxc-capture__row { flex-direction: column; align-items: stretch; }
.bxc-capture--stack .bxc-capture__row .bxc-input { flex: none; }
.bxc-capture--stack .bxc-capture__row .btn { width: 100%; height: 48px; }
.bxc-capture .bxc-list { background: rgba(255, 255, 255, .03); }
.bxc-capture__done { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; background: rgba(49, 166, 80, .08); box-shadow: inset 0 0 0 1px rgba(49, 166, 80, .35); }
.bxc-capture__done svg { width: 20px; height: 20px; color: var(--bx-success); flex: none; margin-top: 1px; }
.bxc-capture__done b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.bxc-capture__done i { display: block; font-style: normal; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }

/* ---------- live calculator context (values read from banrox.com/credit-card-payoff-calculator) ---------- */
.calc-wrap { position: relative; width: 1240px; margin: 0 auto; }
.calc-card { display: flex; gap: 15px; }
.calc-left { width: 746px; flex: none; display: flex; flex-direction: column; }
.calc-field { display: flex; flex-direction: column; margin-bottom: 18px; }
.calc-field__top { display: flex; justify-content: space-between; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; line-height: 19.2px; }
.calc-range { position: relative; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .85); margin: 12px 0 8px; }
.calc-range i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: linear-gradient(90deg, #264BFF, #6F74F0); }
.calc-range b { position: absolute; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px #375DFB; }
.calc-field__mm { display: flex; justify-content: space-between; font-family: var(--bx-font-numbers); font-size: 12px; line-height: 14.4px; color: rgba(255, 255, 255, .7); }
.calc-select { display: flex; align-items: center; justify-content: space-between; height: 44px; padding: 0 14px; border-radius: 8px; box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .7); background: rgba(255, 255, 255, .02); font-size: 14px; margin-top: 10px; }
.calc-select svg { width: 16px; height: 16px; }
.calc-note { font-family: var(--bx-font-numbers); font-size: 12px; line-height: 16.8px; color: rgba(255, 255, 255, .5); margin: 12px 0 24px; }
.calc-results { width: 415px; flex: none; }
.calc-results__title { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; line-height: 19.2px; }
.calc-results__sub { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
.calc-legend { display: flex; gap: 14px; font-size: 11px; line-height: 14px; color: rgba(255, 255, 255, .7); margin-top: 6px; }
.calc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.calc-legend i { width: 8px; height: 8px; border-radius: 50%; }
.calc-saves { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 22px 0 18px; box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .04); }
.calc-saves span { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 14px; line-height: 16.8px; max-width: 120px; }
.calc-saves b { font-family: var(--bx-font-numbers); font-weight: 600; font-size: 24px; line-height: 28.8px; text-align: right; }
.calc-saves b em { font-style: normal; color: #8585E9; }
.calc-table { width: 100%; border-collapse: collapse; margin-top: 12px; }
.calc-table th { text-align: left; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 14px; line-height: 16.8px; padding: 12px 0 10px; }
.calc-table th:last-child { text-align: right; font-weight: 400; color: #8585E9; }
.calc-table td { font-family: var(--bx-font-numbers); font-size: 14px; line-height: 16.8px; color: rgba(255, 255, 255, .7); padding: 12px 0 10px; border-bottom: 1.5px solid rgba(255, 255, 255, .04); }
.calc-table td:last-child { text-align: right; font-size: 16px; line-height: 19.2px; font-weight: 500; color: #FFFFFF; }

/* ---------- steppers ---------- */
.bxc-stepper { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bxc-stepper button { width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #FFFFFF; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px var(--bx-line-14); transition: transform 75ms var(--bx-ease), background .3s var(--bx-ease); }
.bxc-stepper button:hover { background: rgba(255, 255, 255, .12); }
.bxc-stepper button:active { transform: scale(.94); }
.bxc-stepper button svg { width: 18px; height: 18px; }
.bxc-stepper output { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 22px; line-height: 28px; min-width: 110px; text-align: center; }

/* ---------- deadline countdown ---------- */
.rap-count { display: flex; align-items: flex-end; gap: 14px; }
.rap-count .bxc-num { font-size: 72px; line-height: 64px; }
.rap-count > span:last-child { font-size: 16px; line-height: 22px; color: var(--bx-text-2); padding-bottom: 4px; }
.rap-bar { position: relative; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .1); overflow: hidden; margin: 16px 0 10px; }
.rap-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--bx-ramp); }
.rap-bar__legend { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.rap-plans { display: flex; flex-direction: column; }
.rap-plan { display: grid; grid-template-columns: minmax(0, 2.1fr) repeat(3, minmax(0, 1fr)); gap: 12px; align-items: center; padding: 14px 12px; margin: 0 -12px; border-radius: 12px; box-shadow: inset 0 -1.5px 0 rgba(255, 255, 255, .05); font-family: var(--bx-font-numbers); }
.rap-plan--head { padding: 0 12px 10px; font-family: var(--bx-font); font-size: 12px; line-height: 16px; color: var(--bx-text-3); letter-spacing: .02em; }
.rap-plan b { font-weight: 500; font-size: 16px; line-height: 20px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rap-plan i { font-style: normal; display: block; font-family: var(--bx-font); font-size: 12px; line-height: 16px; color: var(--bx-text-3); margin-top: 2px; }
.rap-plan > span { font-size: 16px; line-height: 20px; text-align: right; }
.rap-plan--head > span { font-size: 12px; }
.rap-plan--best { background: rgba(38, 75, 255, .10); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .45); }
.bxc-pill--ok { background: rgba(49, 166, 80, .12); box-shadow: inset 0 0 0 1px rgba(49, 166, 80, .45); color: #FFFFFF; height: 22px; font-size: 11px; }
.rap-phone .rap-plan { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }

/* ---------- co-branded partner strip ---------- */
.pt-cobrand { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 0 2px; }
.pt-cobrand__office { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.pt-cobrand__logo { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font: 600 11px/1 var(--bx-font); color: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .28); border: none; }
.pt-cobrand__x { color: var(--bx-text-3); font-size: 15px; }

/* ---------- paid social creative (1080 wide) ---------- */
.ad { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(70% 45% at 18% 0%, rgba(38, 75, 255, .30) 0%, rgba(38, 75, 255, 0) 70%), radial-gradient(60% 40% at 100% 100%, rgba(133, 133, 233, .18) 0%, rgba(133, 133, 233, 0) 70%), #080814; }
.ad-lockup { display: flex; align-items: center; gap: 16px; }
.ad-lockup img { width: 64px; height: 64px; }
.ad-lockup b { font-family: var(--bx-font-numbers); font-weight: 600; font-size: 48px; line-height: 52px; letter-spacing: -0.02em; }
.ad .bxc-pill { height: 52px; padding: 0 24px; font-size: 24px; }
.ad-h { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 124px; line-height: 118px; letter-spacing: -0.035em; text-wrap: balance; }
.ad-sub { font-size: 40px; line-height: 54px; color: rgba(255, 255, 255, .74); letter-spacing: -0.01em; text-wrap: pretty; }
.ad-card { filter: drop-shadow(0 60px 70px rgba(38, 75, 255, .45)) drop-shadow(0 18px 30px rgba(0, 0, 0, .55)); }
.ad-card img { width: 100%; height: auto; }
.ad-seats { display: flex; align-items: center; gap: 18px; }
.ad-seats .bxc-av { width: 104px; height: 104px; font-size: 32px; }
.ad-seats .bxc-av--open { border-width: 3px; }
.ad-seats .bxc-av--open svg { width: 36px; height: 36px; }
.ad-seats span { font-size: 32px; line-height: 40px; color: rgba(255, 255, 255, .8); margin-left: 8px; }
.ad-url { display: inline-flex; align-items: center; gap: 14px; height: 88px; padding: 0 40px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 2px rgba(133, 133, 233, .55); font-family: var(--bx-font-numbers); font-weight: 500; font-size: 36px; }
.ad-url svg { width: 34px; height: 34px; color: var(--bx-peri); }
.ad-fine { font-size: 26px; line-height: 36px; color: rgba(255, 255, 255, .6); }

/* ---------- nurture email (replica of the Banrox email kit, 600 wide) ---------- */
.em { position: absolute; inset: 0; background: #06060F; font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; color: #FFFFFF; letter-spacing: 0; }
.em-in { padding: 26px 12px 46px; display: flex; flex-direction: column; gap: 14px; }
.em-top { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 4px; }
.em-lock { display: flex; align-items: center; gap: 9px; font-family: 'Inter Tight', 'Inter', sans-serif; font-size: 21px; line-height: 24px; font-weight: 600; letter-spacing: -.5px; }
.em-lock img { width: 28px; height: 28px; }
.em-top > span:last-child { font-size: 11px; line-height: 14px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: #868CB0; }
.em-hero { border-radius: 27px; padding: 1px; background: linear-gradient(135deg, #7f7fe8 0%, #262c5f 44%, #2a4fee 100%); }
.em-hero > div { border-radius: 26px; padding: 32px 34px 34px; background: radial-gradient(78% 96% at 4% -14%, rgba(56, 92, 255, .44) 0%, rgba(45, 66, 180, .20) 32%, rgba(12, 16, 41, 0) 58%), linear-gradient(168deg, #0e1334 0%, #0a0e24 46%, #0c1029 100%); }
.em-card { border-radius: 27px; padding: 1px; background: linear-gradient(180deg, #232A5C, #1B2149); }
.em-card > div { border-radius: 26px; padding: 26px 30px; background: #0A0E22; }
.em-pill { display: inline-block; border: 1px solid #3B3F7E; border-radius: 999px; padding: 6px 13px; font-size: 11px; line-height: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #B9BAF4; background: #121740; margin: 0 0 16px; }
.em-h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 32px; line-height: 38px; letter-spacing: -.7px; margin: 0 0 10px; }
.em-h2 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 20px; line-height: 26px; letter-spacing: -.3px; margin: 0 0 10px; }
.em-p { font-size: 16px; line-height: 25px; color: #B9BEDA; }
.em-p--s { font-size: 15px; line-height: 24px; }
.em-p b { color: #FFFFFF; font-weight: 600; }
.em-btn { display: inline-block; margin-top: 22px; padding: 14px 26px; border-radius: 14px; font-size: 15px; line-height: 20px; font-weight: 600; color: #FFFFFF; text-decoration: none; background: linear-gradient(96deg, #8585E9 0%, #264BFF 68%); border: 1px solid rgba(255, 255, 255, .24); box-shadow: 0 8px 26px rgba(38, 75, 255, .34); }
.em-link { margin: 16px 0 0; padding: 13px 15px; border-radius: 14px; border: 1px dashed #333C7A; background: #0E1330; font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Courier New', monospace; font-size: 13px; line-height: 20px; color: #B9C3FF; word-break: break-all; }
.em-share { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.em-share a { display: inline-block; padding: 11px 17px; background: #141A40; border: 1px solid #2C3468; border-radius: 999px; font-size: 14px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
.em-list { display: flex; flex-direction: column; gap: 16px; margin-top: 18px; }
.em-li { display: flex; gap: 14px; align-items: flex-start; }
.em-li > span { width: 28px; height: 28px; flex: none; border-radius: 999px; background: #121740; border: 1px solid #3B3F7E; color: #B9BAF4; font-size: 13px; line-height: 26px; font-weight: 600; text-align: center; }
.em-li b { display: block; font-size: 16px; line-height: 22px; font-weight: 600; color: #FFFFFF; }
.em-li i { display: block; font-style: normal; font-size: 15px; line-height: 23px; color: #B9BEDA; margin-top: 2px; }
.em-answers { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.em-answers a { display: block; padding: 15px 18px; border-radius: 14px; background: #141A40; border: 1px solid #2C3468; font-size: 16px; line-height: 20px; font-weight: 600; color: #FFFFFF; text-decoration: none; }
.em-foot { padding: 26px 6px 0; }
.em-foot > div { border-top: 1px solid #1B2149; padding: 20px 10px 0; text-align: center; font-size: 12px; line-height: 20px; color: #868CB0; }
.em-foot a { color: #868CB0; text-decoration: underline; }
.em-foot em { font-style: normal; color: #6D739A; }
.em-meta { position: absolute; left: 0; right: 0; top: 0; }

/* ---------- front-desk flyer (print, US Letter, light stock) ---------- */
.fl { position: absolute; inset: 0; background: #FFFFFF; color: #141C24; font-family: var(--bx-font); letter-spacing: -0.01em; }
.fl-band { position: absolute; left: 0; right: 0; top: 0; height: 520px; background: linear-gradient(180deg, #EEF1FF 0%, #F7F8FF 70%, #FFFFFF 100%); }
.fl-in { position: absolute; inset: 56px 64px 48px; display: flex; flex-direction: column; }
.fl-top { display: flex; align-items: center; justify-content: space-between; }
.fl-top img { width: 132px; height: auto; }
.fl-office { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; color: #141C24; }
.fl-office span { width: 44px; height: 44px; border-radius: 12px; border: 1.5px dashed #9AA3C7; display: flex; align-items: center; justify-content: center; font-size: 11px; color: #5A6180; }
.fl-h { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 84px; line-height: 84px; letter-spacing: -0.035em; margin: 40px 0 0; text-wrap: balance; }
.fl-sub { font-size: 24px; line-height: 34px; color: #3A4160; margin-top: 18px; max-width: 560px; }
.fl-mid { display: flex; align-items: center; gap: 36px; margin-top: 36px; }
.fl-card { width: 330px; flex: none; filter: drop-shadow(0 22px 26px rgba(38, 75, 255, .28)); transform: rotate(-5deg); }
.fl-card img { width: 330px; height: auto; }
.fl-list { display: flex; flex-direction: column; gap: 14px; }
.fl-list li { list-style: none; display: flex; gap: 12px; align-items: flex-start; font-size: 20px; line-height: 27px; color: #141C24; }
.fl-list li span { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #264BFF; color: #FFFFFF; display: flex; align-items: center; justify-content: center; }
.fl-list li span svg { width: 16px; height: 16px; }
.fl-scan { display: flex; align-items: center; gap: 28px; margin-top: auto; padding: 24px; border-radius: 20px; border: 1.5px solid #D7DCF0; }
.fl-scan img { width: 172px; height: 172px; flex: none; }
.fl-scan b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 34px; line-height: 38px; letter-spacing: -0.02em; }
.fl-scan i { display: block; font-style: normal; font-size: 20px; line-height: 28px; color: #264BFF; font-weight: 500; margin-top: 8px; }
.fl-scan small { display: block; font-size: 14px; line-height: 20px; color: #5A6180; margin-top: 6px; }
.fl-fine { font-size: 12px; line-height: 18px; color: #4A5170; margin-top: 18px; }

/* ---------- motion safety ---------- */
@media (prefers-reduced-motion: reduce) {
  .bxc-chip, .bxc-cbx, .bxc-seg button, .bxc-stepper button { transition: none; }
}

/* ================= round 3: marketplace match, reported results, points, push ================= */

/* band under the marketplace hero */
.mx-band { position: relative; display: flex; align-items: center; gap: 32px; padding: 24px 28px; border-radius: 20px; background: radial-gradient(80% 140% at 0% 0%, rgba(38, 75, 255, .22) 0%, rgba(38, 75, 255, 0) 62%), rgba(9, 12, 33, .9); box-shadow: var(--bx-hair); margin-bottom: 24px; }
.mx-band__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mx-band__txt h2 { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 26px; line-height: 32px; letter-spacing: -0.02em; }
.mx-band__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.mx-source { font-size: 12px; line-height: 18px; color: var(--bx-text-3); }

/* the Match check chip that sits beside Apply, never over it */
.mx-chip { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 16px; border-radius: 999px; border: none; cursor: pointer; font: 500 15px/1 var(--bx-font); color: var(--bx-peri); background: rgba(38, 75, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .45); white-space: nowrap; transition: background .3s var(--bx-ease); }
.mx-chip:hover { background: rgba(38, 75, 255, .2); color: #FFFFFF; }
.mx-chip svg { width: 16px; height: 16px; flex: none; }
.mx-chip { max-width: 100%; }
.mx-chip b { font-weight: 500; color: #FFFFFF; }

/* locked teaser list */
.mx-list { display: flex; flex-direction: column; gap: 8px; }
.mx-row { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.mx-row__art { width: 54px; height: 34px; flex: none; border-radius: 6px; background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .06)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; font: 500 8px/1 var(--bx-font); color: rgba(255, 255, 255, .55); text-align: center; letter-spacing: .02em; }
.mx-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mx-row__txt b { font-weight: 500; font-size: 15px; line-height: 20px; }
.mx-row__txt i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.mx-row__n { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 17px; line-height: 22px; text-align: right; }
.mx-row__n span { display: block; font-family: var(--bx-font); font-weight: 400; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.mx-row--locked .mx-row__txt b, .mx-row--locked .mx-row__n { color: transparent; text-shadow: 0 0 12px rgba(255, 255, 255, .55); }
.mx-row--locked .mx-row__art { color: transparent; }
.mx-lock { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 14px; background: rgba(38, 75, 255, .10); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); font-size: 14px; line-height: 20px; color: rgba(255, 255, 255, .86); }
.mx-lock svg { width: 16px; height: 16px; color: var(--bx-peri); }

/* the report table */
.mx-table { width: 100%; border-collapse: collapse; }
.mx-table th { text-align: left; font: 400 12px/16px var(--bx-font); color: var(--bx-text-3); padding: 0 12px 10px 0; letter-spacing: .02em; }
.mx-table th:last-child, .mx-table td:last-child { text-align: right; padding-right: 0; }
.mx-table td { padding: 14px 12px 14px 0; border-top: 1.5px solid rgba(255, 255, 255, .05); vertical-align: middle; }
.mx-card { display: flex; align-items: center; gap: 12px; }
.mx-card b { font-weight: 500; font-size: 15px; line-height: 20px; }
.mx-card i { font-style: normal; display: block; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.mx-num { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 17px; line-height: 22px; }
.mx-num span { font-family: var(--bx-font); font-weight: 400; font-size: 12px; color: var(--bx-text-3); margin-left: 4px; }
.mx-bar { display: block; position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 6px; width: 120px; }
.mx-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--bx-ramp); }
.mx-thin { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }

/* stat row for the reported-results page */
.mx-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mx-stat { padding: 18px 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.mx-stat b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 32px; line-height: 38px; }
.mx-stat span { display: block; font-size: 13px; line-height: 18px; color: var(--bx-text-2); margin-top: 2px; }
.mx-split { display: flex; flex-direction: column; gap: 10px; }
.mx-split__row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 92px; gap: 12px; align-items: center; font-size: 14px; line-height: 20px; color: var(--bx-text-2); }
.mx-split__row b { font-weight: 500; color: #FFFFFF; font-family: var(--bx-font-numbers); text-align: right; }
.mx-split__bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.mx-split__bar i { display: block; height: 100%; border-radius: 4px; background: var(--bx-ramp); }

/* one-tap answers */
.bxc-answers { display: flex; flex-direction: column; gap: 8px; }
.bxc-answers button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 12px 16px; border: none; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--bx-line-14); color: #FFFFFF; font: 500 15px/20px var(--bx-font); text-align: left; transition: background .3s var(--bx-ease), box-shadow .3s var(--bx-ease); }
.bxc-answers button:hover { background: rgba(255, 255, 255, .09); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .5); }
.bxc-answers button svg { width: 18px; height: 18px; color: var(--bx-peri); flex: none; }
.bxc-answers--row { flex-direction: row; flex-wrap: wrap; }
.bxc-answers--row button { width: auto; flex: 1; justify-content: center; }

/* points */
.pt-hero { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 2px; }
.pt-hero .bxc-num { font-size: 56px; line-height: 60px; }
.pt-hero span { font-size: 15px; line-height: 20px; color: var(--bx-text-2); }
.pt-meter { position: relative; height: 12px; border-radius: 6px; background: rgba(255, 255, 255, .09); overflow: hidden; margin: 16px 0 8px; }
.pt-meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: var(--bx-ramp); box-shadow: 0 0 18px rgba(38, 75, 255, .55); }
.pt-meter__legend { display: flex; justify-content: space-between; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.pt-step { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 12px 16px; position: relative; }
.pt-step + .pt-step::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--bx-line-8); }
.pt-step__mark { width: 28px; height: 28px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 600 12px/1 var(--bx-font-numbers); color: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1.5px var(--bx-line-14); }
.pt-step--done .pt-step__mark { background: var(--bx-success); color: #FFFFFF; box-shadow: none; }
.pt-step--next .pt-step__mark { background: var(--bx-ramp); color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.pt-step__txt { flex: 1; min-width: 0; }
.pt-step__txt b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.pt-step__txt i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pt-step__val { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; line-height: 20px; color: rgba(255, 255, 255, .86); }
.pt-cats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pt-cat { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.pt-cat b { font-weight: 500; font-size: 15px; line-height: 20px; }
.pt-cat i { font-style: normal; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.pt-cat--locked { opacity: .55; }

/* upload */
.up-drop { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); text-align: center; }
.up-drop .bxc-ico { width: 44px; height: 44px; border-radius: 14px; }
.up-drop .bxc-ico svg { width: 22px; height: 22px; }
.up-drop b { font-weight: 500; font-size: 16px; line-height: 22px; }
.up-drop i { font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.up-found { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 21px; color: rgba(255, 255, 255, .86); }
.up-found svg { width: 18px; height: 18px; color: var(--bx-success); flex: none; margin-top: 2px; }

/* push cards */
.ps-steps { display: flex; flex-direction: column; gap: 14px; }
.ps-step { display: flex; align-items: flex-start; gap: 12px; }
.ps-step > span:first-child { width: 26px; height: 26px; flex: none; border-radius: 50%; background: rgba(38, 75, 255, .16); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .35); color: var(--bx-peri); font: 600 12px/26px var(--bx-font-numbers); text-align: center; }
.ps-step b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.ps-step i { display: block; font-style: normal; font-size: 13px; line-height: 19px; color: var(--bx-text-3); }

/* 36px control, 44px touch target (copy button in the link field) */
.bxc-linkfield button { position: relative; }
.bxc-linkfield button::before { content: ""; position: absolute; inset: -4px; border-radius: 12px; }

/* ---------- points wallet (round 4) ---------- */
.pw-dial { position: relative; width: 208px; height: 208px; flex: none; }
.pw-dial svg { width: 208px; height: 208px; display: block; }
.pw-dial__in { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.pw-dial__in b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 46px; line-height: 48px; letter-spacing: -0.03em; }
.pw-dial__in span { font-size: 13px; line-height: 17px; color: var(--bx-text-3); }
.pw-dial__in em { font-style: normal; font-size: 13px; line-height: 17px; color: var(--bx-peri); margin-top: 3px; }
.pw-dial--s, .pw-dial--s svg { width: 148px; height: 148px; }
.pw-dial--s .pw-dial__in b { font-size: 34px; line-height: 36px; }

.pw-split { display: flex; flex-direction: column; gap: 2px; }
.pw-bucket { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 0; }
.pw-bucket + .pw-bucket { border-top: 1px solid var(--bx-line-8); }
.pw-bucket__dot { width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--bx-ramp); }
.pw-bucket__dot--off { background: rgba(255, 255, 255, .16); }
.pw-bucket__txt { flex: 1; min-width: 0; }
.pw-bucket__txt b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.pw-bucket__txt i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pw-bucket__val { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 19px; line-height: 22px; }
.pw-bucket__val--off { color: var(--bx-text-3); }

.pw-deadline { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 12px; background: rgba(133, 133, 233, .10); box-shadow: inset 0 0 0 1px rgba(133, 133, 233, .28); }
.pw-deadline svg { width: 18px; height: 18px; flex: none; color: var(--bx-peri); }
.pw-deadline span { font-size: 13px; line-height: 18px; color: rgba(255, 255, 255, .84); }
.pw-deadline b { font-weight: 500; }

.pw-ledger { width: 100%; border-collapse: collapse; }
.pw-ledger th { text-align: left; font-size: 12px; line-height: 16px; font-weight: 500; color: var(--bx-text-3); text-transform: uppercase; letter-spacing: .06em; padding: 0 12px 10px 0; }
.pw-ledger th:last-child, .pw-ledger td:last-child { text-align: right; padding-right: 0; }
.pw-ledger td { padding: 13px 12px 13px 0; border-top: 1px solid var(--bx-line-8); font-size: 14px; line-height: 20px; vertical-align: top; }
.pw-ledger td:first-child { color: var(--bx-text-3); white-space: nowrap; width: 88px; }
.pw-ledger b { font-weight: 500; }
.pw-ledger i { display: block; font-style: normal; font-size: 12px; line-height: 17px; color: var(--bx-text-3); margin-top: 2px; }
.pw-ledger .pw-amt { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; white-space: nowrap; }
.pw-ledger tr.is-pending td { color: var(--bx-text-3); }
.pw-ledger tr.is-pending .pw-amt { color: var(--bx-text-3); }

.pw-pick { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.pw-pick button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 64px; padding: 12px 16px; border: none; background: none; cursor: pointer; text-align: left; color: inherit; font-family: var(--bx-font); }
.pw-pick button + button { border-top: 1px solid var(--bx-line-8); }
.pw-pick button:hover { background: rgba(255, 255, 255, .04); }
.pw-pick__txt { flex: 1; min-width: 0; }
.pw-pick__txt b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.pw-pick__txt i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pw-pick__mark { width: 22px; height: 22px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--bx-line-14); display: flex; align-items: center; justify-content: center; }
.pw-pick__mark svg { width: 14px; height: 14px; opacity: 0; }
.pw-pick button[aria-pressed="true"] .pw-pick__mark { background: var(--bx-ramp); box-shadow: none; }
.pw-pick button[aria-pressed="true"] .pw-pick__mark svg { opacity: 1; }

.pw-toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: rgba(49, 166, 80, .12); box-shadow: inset 0 0 0 1px rgba(49, 166, 80, .38); }
.pw-toast svg { width: 20px; height: 20px; flex: none; color: var(--bx-success); }
.pw-toast b { font-weight: 500; font-size: 15px; line-height: 20px; }
.pw-toast i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-2); margin-top: 1px; }

/* the funnel rail */
.pw-rail { display: flex; flex-direction: column; }
.pw-rail__row { display: flex; gap: 20px; position: relative; padding-bottom: 22px; }
.pw-rail__row:last-child { padding-bottom: 0; }
.pw-rail__mark { width: 40px; flex: none; display: flex; flex-direction: column; align-items: center; }
.pw-rail__mark b { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 15px/1 var(--bx-font-numbers); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1.5px var(--bx-line-14); }
.pw-rail__mark i { flex: 1; width: 1.5px; background: var(--bx-line-8); margin-top: 8px; }
.pw-rail__row:last-child .pw-rail__mark i { display: none; }
.pw-rail__body { flex: 1; min-width: 0; padding-top: 2px; }
.pw-rail__body > b { display: block; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 18px; line-height: 24px; }
.pw-rail__body > span { display: block; font-size: 13px; line-height: 19px; color: var(--bx-text-3); margin-top: 2px; }
.pw-rail__say { margin-top: 10px; padding: 12px 16px; border-radius: 12px; border-left: 2px solid rgba(133, 133, 233, .7); background: rgba(255, 255, 255, .035); font-size: 15px; line-height: 22px; color: rgba(255, 255, 255, .92); }

/* the economics board */
.pw-formula { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 14px 18px; }
.pw-term { display: flex; flex-direction: column; gap: 5px; min-width: 116px; }
.pw-term b { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 34px; line-height: 36px; letter-spacing: -0.025em; }
.pw-term span { font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pw-term--out b { color: var(--bx-peri); }
.pw-op { font-family: var(--bx-font-numbers); font-weight: 400; font-size: 28px; line-height: 40px; color: var(--bx-text-3); }
.pw-lever { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 0; }
.pw-lever + .pw-lever { border-top: 1px solid var(--bx-line-8); }
.pw-lever__txt { flex: 1; min-width: 0; }
.pw-lever__txt b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.pw-lever__txt i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); }
.pw-lever__bar { width: 128px; flex: none; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .09); position: relative; overflow: hidden; }
.pw-lever__bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: var(--bx-ramp); }
.pw-lever__val { width: 52px; flex: none; text-align: right; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 16px; }

/* points inside the email kit */
.em-meter { height: 12px; border-radius: 6px; background: #141A40; border: 1px solid #2C3468; overflow: hidden; margin: 18px 0 10px; }
.em-meter i { display: block; height: 100%; background: linear-gradient(96deg, #8585E9 0%, #264BFF 68%); }
.em-legend { display: flex; justify-content: space-between; font-size: 13px; line-height: 18px; color: #868CB0; }
.em-big { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 600; font-size: 44px; line-height: 48px; letter-spacing: -1px; margin: 4px 0 2px; }

/* ---------- more moments (round 5) ---------- */
.bxc-corner--static { position: static; right: auto; bottom: auto; animation: none; }
.bxc-corner--static .bxc-corner__row { padding-right: 48px; }
.bxc-modal--plain { padding: 32px 36px; }

/* the router welcome: three doors, one hero */
.wl-doors { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--bx-line-8); }
.wl-door { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 14px 18px; border: none; background: none; cursor: pointer; text-align: left; color: inherit; font-family: var(--bx-font); transition: background .25s var(--bx-ease); }
.wl-door + .wl-door { border-top: 1px solid var(--bx-line-8); }
.wl-door:hover { background: rgba(255, 255, 255, .05); }
.wl-door__ico { width: 40px; height: 40px; flex: none; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(38, 75, 255, .18); color: var(--bx-peri); }
.wl-door__ico svg { width: 20px; height: 20px; }
.wl-door__txt { flex: 1; min-width: 0; }
.wl-door__txt b { display: block; font-weight: 500; font-size: 16px; line-height: 21px; }
.wl-door__txt i { display: block; font-style: normal; font-size: 13px; line-height: 18px; color: var(--bx-text-3); margin-top: 1px; }
.wl-door__go { color: var(--bx-text-3); flex: none; }
.wl-door__go svg { width: 18px; height: 18px; }

/* reported fraud where they live */
.fr-big { font-family: var(--bx-font-numbers); font-weight: 500; font-size: 64px; line-height: 62px; letter-spacing: -0.035em; }
.fr-scale { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 4px; }
.fr-row { display: flex; align-items: center; gap: 12px; font-size: 14px; line-height: 19px; }
.fr-row > span:first-child { width: 96px; flex: none; color: var(--bx-text-2); }
.fr-row b { width: 76px; flex: none; text-align: right; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 15px; }
.fr-bar { flex: 1; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, .07); position: relative; overflow: hidden; }
.fr-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--bx-ramp); }
.fr-bar--avg i { background: rgba(255, 255, 255, .28); box-shadow: none; }
.fr-row--me > span:first-child { color: #FFFFFF; font-weight: 500; }
.fr-pick { display: flex; flex-wrap: wrap; gap: 8px; }

/* the orbit: one hero object, facts floating around it */
.fx-orbit { position: relative; }
.fx-orbit__card { filter: drop-shadow(0 30px 40px rgba(38, 75, 255, .40)) drop-shadow(0 10px 18px rgba(0, 0, 0, .5)); }
.fx-orbit__card img { width: 100%; height: auto; display: block; }
.fx-tag { position: absolute; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 14px; line-height: 1; white-space: nowrap; color: #FFFFFF; background: rgba(9, 12, 33, .92); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .45), 0 16px 34px -14px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.fx-tag svg { width: 16px; height: 16px; color: var(--bx-peri); flex: none; }
.fx-tag b { font-family: var(--bx-font-numbers); font-weight: 500; }
.fx-tag > span { display: inline; }
.fx-tag--on { box-shadow: inset 0 0 0 1.5px rgba(49, 166, 80, .6), 0 16px 34px -14px rgba(0, 0, 0, .8); }

/* motion spec rows */
.mo-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 0; }
.mo-row + .mo-row { border-top: 1px solid var(--bx-line-8); }
.mo-row__n { width: 30px; height: 30px; flex: none; border-radius: 50%; display: flex; align-items: center; justify-content: center; font: 500 13px/1 var(--bx-font-numbers); color: var(--bx-peri); background: rgba(38, 75, 255, .16); }
.mo-row__txt { flex: 1; min-width: 0; }
.mo-row__txt b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.mo-row__txt i { display: block; font-style: normal; font-size: 13px; line-height: 19px; color: var(--bx-text-3); margin-top: 2px; }
.mo-row__t { flex: none; font-family: var(--bx-font-numbers); font-weight: 500; font-size: 13px; color: var(--bx-peri); padding-top: 3px; }
.mo-take { display: flex; gap: 14px; padding: 16px 0; }
.mo-take + .mo-take { border-top: 1px solid var(--bx-line-8); }
.mo-take__src { width: 116px; flex: none; }
.mo-take__src b { display: block; font-weight: 500; font-size: 15px; line-height: 20px; }
.mo-take__src i { display: block; font-style: normal; font-size: 12px; line-height: 16px; color: var(--bx-text-3); }
.mo-take__body { flex: 1; min-width: 0; font-size: 14px; line-height: 21px; color: var(--bx-text-2); }
.mo-take__body b { color: #FFFFFF; font-weight: 500; }
.mo-take__no { display: block; margin-top: 6px; font-size: 13px; line-height: 19px; color: var(--bx-text-3); }

/* motion: the float, the stagger, and the switch that turns both off */
@keyframes fx-float { 0%, 100% { transform: translateY(-7px); } 50% { transform: translateY(7px); } }
@keyframes fx-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }
.fx-orbit__card { animation: fx-float 6s var(--bx-ease) infinite; }
.fx-tag { animation: fx-pop .42s var(--bx-ease) both; }
@media (prefers-reduced-motion: reduce) {
  .fx-orbit__card, .fx-tag, .bxc-corner, .bxc-capsule, .bxc-toast { animation: none; }
}


/* =========================== production additions, nothing above this line is ours ==========

   The denial decoder's picker is a real form, so that it still works with JavaScript switched off:
   a label wrapping a hidden checkbox rather than a button carrying aria-checked. The look is the
   bundle's, reached from the input as well as from the attribute. */
.bxc-cbx input { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bxc-cbx:has(input:checked) { background: rgba(38, 75, 255, .12); box-shadow: inset 0 0 0 1.5px rgba(133, 133, 233, .55); color: #FFFFFF; }
.bxc-cbx:has(input:checked) i { background: var(--bx-ramp); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.bxc-cbx:has(input:checked) i svg { opacity: 1; }
.bxc-cbx:has(input:focus-visible) { outline: 2px solid var(--bx-peri); outline-offset: 2px; }

/* the bureau segment is radio buttons for the same reason */
.bxc-seg label { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: 9px; cursor: pointer; font: 500 14px/1 var(--bx-font); color: rgba(255, 255, 255, .72); transition: background .3s var(--bx-ease), color .3s var(--bx-ease); white-space: nowrap; }
.bxc-seg label input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.bxc-seg label:has(input:checked) { background: rgba(255, 255, 255, .14); color: #FFFFFF; box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 .5px rgba(255, 255, 255, .2); }
.bxc-seg label:has(input:focus-visible) { outline: 2px solid var(--bx-peri); outline-offset: 2px; }

/* Anything this file hides has to actually be hidden. Several of the kit's classes set display,
   which beats the browser's own [hidden] rule, so an element can be hidden in the document and
   still drawn on the screen. That happened here: the reasons nobody ticked, and the fourteen
   behind "show all", were both sitting in plain sight while the page said otherwise. */
.bxc [hidden], .bxc-reason[hidden], .bxc-cbxlist[hidden] { display: none !important; }

/* The tool pages at phone width are their own boards (DeniedPhone.j2, RapPhone.j2): no glass card
   and no panel, the page's own gutter, and the answer under the phone heading, which is the bundle's
   bx-site-context.css .m-h1 restated here. Production stacks at 768px, the same line the catalog
   hands over on. The heroes' inline values are the desktop boards', so the phone ones have to
   outrank them. This lives here because it overrides .bxc-tool and .bxc-panel, which are this
   file's, and this file loads after bx-capture.css. */
.m-h1 { font-family: 'Inter Tight', 'Inter', sans-serif; font-weight: 500; font-size: 30px; line-height: 36px; letter-spacing: -0.02em; margin: 24px 0 16px; }
@media (max-width: 768px) {
    [data-bxd-hero], [data-bxr-hero] { margin-top: 24px !important; }
    [data-bxd-hero] h1, [data-bxr-hero] h1 { font-size: 30px !important; line-height: 36px !important; letter-spacing: -0.02em !important; }
    [data-bxd-tool], [data-bxr-tool] { display: block !important; margin-top: 24px !important; padding: 0; border-radius: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
    [data-bxd-tool] > form, [data-bxr-tool] > form { width: auto !important; }
    [data-bxd-tool] > .bxc-panel, [data-bxr-tool] > .bxc-panel { padding: 0; border-radius: 0; background: none; box-shadow: none; }
    [data-bxd-tool][data-bxd-view="pick"] > .bxc-panel { display: none; }
    [data-bxd-tool][data-bxd-view="result"] > form { display: none; }
    /* RapPhone.j2 keeps the clock in its panel (padding 20px) and the tool's own gap between the two halves */
    [data-bxr-tool] > form > .bxc-panel { padding: 20px; border-radius: 16px; background: rgba(255, 255, 255, .02); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
    [data-bxr-tool] > .bxc-panel { margin-top: 24px; }
    [data-bxr-tool] .bxc-chips { flex-wrap: wrap; }
}

/* The match pages (MatchReportDesktop.j2, ApprovalsSeoDesktop.j2) are two columns at width and one
   below 768px, the same line as the rest. The crumb is bx-site-context.css .art__crumb restated. */
.art__crumb { font-size: 14px; color: rgba(255, 255, 255, .5); margin-bottom: 16px; }
.mx-row__art img { display: block; }
@media (max-width: 768px) {
    [data-mr-cols], [data-cr-cols] { display: block !important; margin-top: 24px !important; }
    [data-mr-cols] h1, [data-cr-cols] h1 { font-size: 30px !important; line-height: 36px !important; letter-spacing: -0.02em !important; }
    [data-mr-aside], [data-cr-aside] { width: auto !important; margin-top: 24px; }
    [data-mr-cols] .bxc-tool { padding: 20px 16px !important; }
    /* each row stacks: the card and Apply on the first line, what people reported on the next at full
       width (a tier sentence, services/cards/match.py line(), needs the width); the bureau column waits
       for the desktop */
    .mx-table thead { display: none; }
    .mx-table tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 0; border-top: 1.5px solid rgba(255, 255, 255, .05); }
    .mx-table tbody tr:first-child { border-top: 0; padding-top: 0; }
    .mx-table td { display: block; padding: 0; border-top: 0; }
    .mx-table td:first-child { grid-column: 1; grid-row: 1; }
    .mx-table td:last-child { grid-column: 2; grid-row: 1; align-self: center; }
    .mx-table td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; margin-top: 10px; }
    .mx-table td:nth-child(3) { display: none; }
    .mx-band { display: none; }
}
/* On the board the filter chips above the band end with their own 28px; the live hero's goal tiles
   end flush, so the band carries the gap itself. */
.mx-band { margin-top: 28px; }

/* The points pages: PointsWebDesktop.j2 at width, PointsPhone.j2 and PointsRedeemPhone.j2 under
   768px. One markup, so the phone board's differences are here: the columns stack, the dial is the
   small one, the heading is the phone's, the three dialogs become the sheet, and the statement is
   the one row that opens it. */
[data-pw-page] .bxc-li { color: inherit; }
.bxc-pwdialog .bxc-grab { display: none; }
@media (max-width: 768px) {
    [data-pw-head] { margin-top: 24px !important; }
    [data-pw-h1] { font-family: 'Inter Tight', 'Inter', sans-serif !important; font-size: 30px !important; line-height: 36px !important; letter-spacing: -0.02em !important; margin: 6px 0 4px !important; }
    [data-pw-lead] { font-size: 14px; line-height: 20px; margin: 0 0 18px !important; }
    [data-pw-row] { flex-direction: column !important; gap: 14px !important; }
    [data-pw-hero], [data-pw-aside] { width: auto !important; }
    [data-pw-hero] { padding: 20px !important; gap: 14px !important; }
    [data-pw-dialrow] { flex-direction: column !important; gap: 16px !important; }
    [data-pw-page] .pw-dial, [data-pw-page] .pw-dial svg { width: 148px; height: 148px; }
    [data-pw-page] .pw-dial__in b { font-size: 34px; line-height: 36px; }
    [data-pw-page] .bxc-tool { padding: 20px 16px !important; }
    .bxc-overlay[data-pw-dialog] { align-items: flex-end; }
    .bxc-pwdialog { position: fixed !important; left: 0; right: 0; bottom: 0; width: auto !important; border-radius: var(--bx-r-card) var(--bx-r-card) 0 0 !important; padding: 10px 20px 34px !important; }
    .bxc-pwdialog .bxc-grab { display: block; }
    .bxc-pwdialog .bxc-x { top: 12px; right: 12px; }
    .bxc-pwdialog .bxc-h2 { margin-top: 8px; }
}

/* The denial decoder's upload path (DeniedUploadPhone.j2): a third view of the tool, in the picker's
   place, at every width; the found panel is the kit's panel. */
[data-bxd-tool][data-bxd-view="upload"] > form, [data-bxd-tool][data-bxd-view="upload"] > .bxc-panel { display: none; }
[data-bxd-tool]:not([data-bxd-view="upload"]) > [data-bxd-upload] { display: none !important; }
[data-bxd-tool][data-bxd-view="upload"] > [data-bxd-upload] { display: block; }
@media (max-width: 768px) {
    [data-bxd-tool] > [data-bxd-upload] { width: auto !important; }
}

/* Motion rule 4 (StyleMotionDesktop.j2): the ring fills in 700ms when a friend confirms, on the site's
   one curve; a system asking for less motion gets the end state at once. */
[data-pw-ring] { transition: stroke-dashoffset .7s var(--bx-ease); }
@media (prefers-reduced-motion: reduce) {
    [data-pw-ring] { transition: none; }
}

/* The checklist content upgrade inside an article body (BlogUpgradePhone.j2): the block is moved
   into .blog-post-content in the browser, so the article's own list and heading rules are taken
   back off the kit's markup. */
.blog-post-content [data-bxc-checklist] { margin: 28px 0 !important; font-size: 15px; line-height: 22px; }
.blog-post-content [data-bxc-checklist] .bxc-ol { margin: 0; padding: 0; }
.blog-post-content [data-bxc-checklist] .bxc-ol li { margin: 0; padding: 0; font-size: 14px; line-height: 20px; }
.blog-post-content [data-bxc-checklist] .bxc-ol li::marker { content: none; }
.blog-post-content [data-bxc-checklist] h2 { font-size: 22px; line-height: 28px; margin: 12px 0 14px; font-weight: 500; letter-spacing: -0.01em; }
.blog-post-content [data-bxc-checklist] p { margin: 0; }
.blog-post-content [data-bxc-checklist] > p.bxc-small { margin: 10px 0 16px 36px; }
.blog-post-content [data-bxc-checklist] .bxc-capture p.bxc-fine { margin-top: 12px; }