/* Leave for Brands (/brands). Loaded after styles.css; only new rules live here. */
.bd-hero__title { max-width: 12ch; }
.bd-what { max-width: 760px; font-size: 16px; }
.bd-section .section__head { margin-bottom: clamp(24px, 4vw, 36px); }

/* Landing: steps, chips, why, visibility, the line */
.bd-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.bd-step { background: var(--card); border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; }
.bd-step--ink { background: var(--ink); color: var(--paper); }
.bd-step__n { font: 400 11px var(--mono); letter-spacing: .12em; color: var(--muted); }
.bd-step--ink .bd-step__n { color: var(--volt); }
.bd-step__t { margin: 0; font: 700 26px/1.05 var(--sans); letter-spacing: -.04em; }
.bd-step__d { font-size: 15px; line-height: 1.5; opacity: .85; text-wrap: pretty; }
.bd-chips { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bd-chips li { border: 1.5px solid var(--ink); border-radius: 999px; padding: 7px 12px; font: 400 11px var(--mono); letter-spacing: .1em; }
.bd-why { list-style: none; margin: clamp(24px, 4vw, 40px) 0 0; padding: 0; }
.bd-why li { border-top: 1.5px solid var(--ink); padding-top: 12px; display: grid; gap: 6px; }
.bd-why p { font-size: 15px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.bd-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 14px; }
.bd-card { background: var(--paper); border-radius: 22px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 14px; align-content: start; }
.bd-card--ink { background: var(--ink); color: var(--paper); }
.bd-card__label { margin: 0; }
.bd-card__label--volt { color: var(--volt); }
.bd-vis, .bd-line { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; font-size: 16px; line-height: 1.45; }
.bd-vis li, .bd-line li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.bd-vis__m { width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--volt); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.bd-vis__m--no { background: transparent; color: #b3261e; border: 1.5px solid #b3261e; }
.bd-line li > span:first-child { font: 600 12px/22px var(--mono); color: var(--volt); }
.bd-line li:last-child { font-weight: 700; color: var(--volt); }
.bd-faq-wrap { max-width: calc(820px + 2 * var(--gutter)); }
.bd-sign { margin-top: clamp(28px, 4vw, 44px); }
.bd-cta__title { font-size: clamp(46px, 9vw, 120px); max-width: 12ch; }

/* Demo frame */
.bd-demo-section { padding-top: var(--section-y); padding-bottom: var(--section-y); scroll-margin-top: 0; }
.bd-demo-wrap { max-width: calc(1280px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.bd-app { background: var(--paper); border: 1px solid rgba(0,0,0,.14); border-radius: 18px; overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.12); scroll-margin-top: calc(var(--sp) - 8px); }
.bd-banner { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--volt); color: var(--ink); padding: 6px 8px 6px 16px; border-bottom: 1px solid var(--ink); }
.bd-banner__t { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; }
.bd-banner__reset { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--volt); color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.bd-banner__reset:hover { background: var(--ink); color: var(--volt); }
.bd-app__body { min-height: 640px; }
.bd-noscript { padding: 24px; }
.bd-demo-foot { margin-top: 18px; max-width: 760px; font-size: 14px; line-height: 1.5; color: var(--body); }
.bd-demo-foot strong { display: block; margin-top: 6px; font: 700 clamp(22px, 2.6vw, 30px)/1.1 var(--sans); letter-spacing: -.03em; color: var(--ink); }

.bd-shell { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 720px; }
.bd-side { background: var(--ink); color: var(--paper); padding: 22px 14px; display: flex; flex-direction: column; gap: 20px; }
.bd-side__brand { display: flex; align-items: center; gap: 8px; padding: 0 10px; }
.bd-side__logo { display: inline-flex; align-items: center; gap: 4px; font: 700 22px/1 var(--sans); letter-spacing: -.04em; }
.bd-side__w { display: inline-flex; align-items: center; gap: 2px; height: 15px; }
.bd-side__w i { display: block; width: 3px; border-radius: 3px; background: var(--paper); }
.bd-side__w i:nth-child(1) { height: 62%; } .bd-side__w i:nth-child(2) { height: 100%; } .bd-side__w i:nth-child(3) { height: 78%; }
.bd-side__for { font: 400 10px var(--mono); letter-spacing: .12em; color: var(--volt); }
.bd-nav { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.bd-nav__a { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 12px; color: var(--paper); font-size: 15px; font-weight: 500; }
.bd-nav__a:hover { color: var(--volt); }
.bd-nav__a[aria-current="page"] { background: var(--volt); color: var(--ink); }
.bd-nav__n { font: 600 10px var(--mono); background: var(--volt); color: var(--ink); border-radius: 999px; padding: 2px 7px; }
.bd-nav__a[aria-current="page"] .bd-nav__n { background: var(--ink); color: var(--volt); }
.bd-side :focus-visible { box-shadow: 0 0 0 4px var(--volt); outline-color: var(--paper); }
.bd-side__foot { margin-top: auto; display: grid; gap: 10px; border-top: 1px solid rgba(244,243,239,.14); padding: 14px 10px 0; }
.bd-side__biz { display: flex; align-items: center; gap: 10px; }
.bd-side__biz > span:last-child { display: grid; gap: 2px; min-width: 0; }
.bd-side__mark { width: 36px; height: 36px; border-radius: 10px; background: var(--volt); color: var(--ink); display: flex; align-items: center; justify-content: center; font: 700 11px var(--mono); flex: none; }
.bd-side__name { font-size: 13px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.bd-side__ver { font: 400 10px var(--mono); letter-spacing: .1em; color: #c9c9c4; }
.bd-side__mail { color: #c9c9c4; font-size: 12px; min-height: 44px; display: inline-block; padding: 12px 0; line-height: 1.4; }
.bd-side__mail:hover { color: var(--volt); }

.bd-main { min-width: 0; padding: 22px clamp(14px, 2.4vw, 28px) 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; container-type: inline-size; }
.bd-main--solo { padding: clamp(18px, 3vw, 36px); }
.bd-view { display: grid; gap: 14px; min-width: 0; }

/* Hint pill */
.bd-hint { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 4px 4px 4px 6px; font-size: 14px; justify-self: start; max-width: 100%; animation: rise .35s ease both; }
.bd-hint__k { background: var(--volt); color: var(--ink); border-radius: 999px; padding: 4px 9px; font: 600 10px var(--mono); letter-spacing: .12em; }
.bd-hint__t { flex: 1 1 200px; min-width: 0; line-height: 1.35; padding: 6px 0; }
.bd-hint__go { color: var(--volt); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; text-decoration: underline; text-underline-offset: 3px; }
.bd-hint__go:hover { color: var(--paper); }
.bd-hint__x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: var(--paper); font: 400 22px/1 var(--sans); cursor: pointer; }
.bd-hint__x:hover { background: rgba(244,243,239,.12); }
.bd-hint :focus-visible { outline-color: var(--paper); }

/* Type + primitives */
.bd-eyebrow { font: 400 11px/1.5 var(--mono); letter-spacing: .12em; color: #5f5f5f; }
.bd-h1 { margin: 4px 0 0; font: 700 clamp(26px, 3vw, 34px)/1.05 var(--sans); letter-spacing: -.05em; overflow-wrap: anywhere; }
.bd-h1:focus { outline: none; }
.bd-h1:focus-visible { outline: 2px solid var(--ink); }
.bd-h2 { margin: 0 0 10px; font: 700 20px/1.1 var(--sans); letter-spacing: -.03em; }
.bd-p { font-size: 15px; line-height: 1.5; color: var(--body); text-wrap: pretty; }
.bd-p--light { color: rgba(244,243,239,.85); }
.bd-small { font-size: 13px; line-height: 1.45; color: #444; }
.bd-small a { text-decoration: underline; text-underline-offset: 2px; }
.bd-small--light { color: #c9c9c4; }
.bd-warn { color: #8a3b00; font-weight: 500; }
.bd-err { color: #b3261e; font-size: 13px; font-weight: 500; }
.bd-err:empty { display: none; }
.bd-mono { font: 400 11px/1.4 var(--mono); letter-spacing: .08em; color: #5f5f5f; }
.bd-label { margin: 0; font: 400 11px/1.4 var(--mono); letter-spacing: .12em; color: #5f5f5f; padding: 0; }
.bd-label--volt { color: var(--volt); }
.bd-flabel { font-size: 13px; color: #444; }
.bd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.bd-head > div:first-child { min-width: 0; }
.bd-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bd-row--wrap { flex-wrap: wrap; }
.bd-row--between { justify-content: space-between; }
.bd-stack { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bd-stack--tight { gap: 4px; }
.bd-card-w { background: var(--card); border-radius: 18px; padding: 14px 16px; display: grid; gap: 8px; align-content: start; min-width: 0; }
.bd-fs { border: 0; margin: 0; }
.bd-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px; }
.bd-grid3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr)); gap: 12px; }
.bd-kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; flex-wrap: wrap; }
.bd-kv--sw { min-height: 52px; flex-wrap: nowrap; }

.bd-input, .bd-select { min-height: 44px; border-radius: 12px; border: 1.5px solid rgba(0,0,0,.2); padding: 0 12px; font: 500 15px var(--sans); color: var(--ink); background: #fff; width: 100%; min-width: 0; }
.bd-select { width: auto; border-radius: 999px; border-color: var(--ink); padding: 0 12px; cursor: pointer; }
.bd-select--full { width: 100%; }
.bd-input:disabled { background: var(--paper); color: #777; }
.bd-input--amt { font-weight: 700; font-size: 18px; border-color: var(--ink); }
.bd-input:focus, .bd-select:focus { border-color: var(--ink); }
.bd-code { font: 600 26px var(--mono); letter-spacing: .5em; text-align: center; padding: 0 0 0 .5em; min-height: 56px; }

.bd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1.5px solid transparent; font: 500 15px var(--sans); cursor: pointer; text-align: center; line-height: 1.2; background: transparent; color: var(--ink); }
.bd-btn--sm { font-size: 14px; padding: 0 14px; }
.bd-btn--full { width: 100%; }
.bd-btn--dark { background: var(--ink); color: var(--paper); }
.bd-btn--dark:hover { background: var(--volt); color: var(--ink); }
.bd-btn--volt { background: var(--volt); color: var(--ink); border-color: var(--ink); }
.bd-btn--volt:hover { background: var(--ink); color: var(--volt); }
.bd-btn--outline { border-color: var(--ink); background: #fff; }
.bd-btn--outline:hover { background: var(--ink); color: var(--paper); }
.bd-btn--outline-light { border-color: rgba(244,243,239,.5); color: var(--paper); }
.bd-btn--outline-light:hover { border-color: var(--volt); color: var(--volt); }
.bd-link { background: none; border: 0; padding: 0 4px; min-height: 44px; display: inline-flex; align-items: center; font: 500 14px var(--sans); color: var(--ink); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.bd-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; color: var(--ink); font: 500 14px var(--sans); cursor: pointer; }
.bd-chip--sm { font-size: 13px; padding: 0 12px; }
.bd-chip.is-on { background: var(--ink); color: var(--paper); }
.bd-chip__n { font: 600 11px var(--mono); background: var(--volt); color: var(--ink); border-radius: 999px; padding: 2px 7px; }
.bd-delivs { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-deliv { display: inline-flex; align-items: center; gap: 4px; }
.bd-deliv.is-on { background: var(--paper); border-radius: 999px; padding-right: 4px; }
.bd-step-ctl { display: inline-flex; gap: 2px; }
.bd-mini { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; font: 600 20px/1 var(--sans); color: var(--ink); cursor: pointer; }
.bd-mini:hover { background: #fff; }
.bd-mini:disabled { opacity: .3; cursor: default; }

.bd-radio { position: relative; display: inline-flex; }
.bd-radio input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bd-radio span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--ink); background: #fff; font: 500 14px var(--sans); }
.bd-radio--sm span { font-size: 13px; padding: 0 12px; }
.bd-radio input:checked + span { background: var(--ink); color: var(--paper); }
.bd-radio input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--volt); }

.bd-switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--paper); cursor: pointer; padding: 0; margin: 7px 0; }
.bd-switch::before { content: ''; position: absolute; inset: -8px -2px; } /* 44px hit area */
.bd-switch__knob { position: absolute; top: 2px; left: 2px; width: 23px; height: 23px; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); display: flex; align-items: center; justify-content: center; font: 700 11px var(--sans); color: var(--ink); transition: left .15s; }
.bd-switch[aria-checked="true"] { background: var(--ink); }
.bd-switch[aria-checked="true"] .bd-switch__knob { left: 24px; background: var(--volt); border-color: var(--volt); }

.bd-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 10px; font: 600 10px/1.3 var(--mono); letter-spacing: .1em; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); white-space: nowrap; }
.bd-pill--volt { background: var(--volt); }
.bd-pill--ink { background: var(--ink); color: var(--volt); border-color: var(--ink); }
.bd-badge { display: inline-block; border-radius: 999px; padding: 3px 8px; font: 500 11px/1.3 var(--sans); background: #fff; border: 1px solid rgba(0,0,0,.2); }
.bd-badge--volt { background: var(--volt); border-color: var(--volt); }
.bd-badge--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.bd-av { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font: 700 12px var(--mono); flex: none; border: 1px solid rgba(0,0,0,.12); }
.bd-av--sm { width: 32px; height: 32px; border-radius: 10px; font-size: 11px; }
.bd-av--volt { background: var(--volt); color: var(--ink); }
.bd-av--ink { background: var(--ink); color: var(--volt); }
.bd-av--white { background: #fff; color: var(--ink); }
.bd-av--paper { background: var(--paper); color: var(--ink); }

/* Sign in */
.bd-signin { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(18px, 3vw, 36px); align-items: start; max-width: 980px; }
.bd-signin__intro { display: grid; gap: 10px; }
.bd-signin__form { padding: 20px; gap: 12px; }
.bd-signin__skip { grid-column: 1 / -1; display: grid; gap: 8px; justify-items: start; }
.bd-signin__skip .bd-btn { white-space: normal; }

/* Post a deal */
.bd-post { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@container (min-width: 820px) { .bd-post { grid-template-columns: minmax(0, 1fr) 340px; } }
.bd-form { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bd-aside { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bd-match { font: 400 11px/1.3 var(--mono); letter-spacing: .08em; text-align: right; }
.bd-match strong { font: 700 22px var(--sans); letter-spacing: -.03em; }
.bd-rules { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.bd-rule { display: inline-flex; align-items: flex-start; gap: 6px; border: 1.5px solid var(--ink); border-radius: 14px; padding: 6px 10px; font-size: 13px; line-height: 1.35; background: #fff; max-width: 100%; }
.bd-rule > span { font-weight: 700; flex: none; }
.bd-rule--volt { background: var(--volt); }
.bd-rule--no { border-color: #b3261e; color: #8f1d16; }
.bd-rule--muted { background: var(--paper); border-color: rgba(0,0,0,.2); color: #444; }
.bd-thread { background: var(--volt); border-radius: 18px; padding: 16px; display: grid; gap: 8px; }
.bd-thread__meta { display: flex; justify-content: space-between; font: 400 10px var(--mono); letter-spacing: .12em; }
.bd-thread__h { margin: 0; font: 700 19px/1.15 var(--sans); letter-spacing: -.03em; }
.bd-thread__from { font-size: 13px; line-height: 1.4; color: #222; }
.bd-plain { gap: 10px; }
.bd-prows { margin: 0; display: grid; gap: 0; }
.bd-prow { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: 10px; border-top: 1px solid rgba(0,0,0,.08); padding: 8px 0; }
.bd-prow dt { font: 400 10px/1.6 var(--mono); letter-spacing: .1em; color: #5f5f5f; }
.bd-prow dd { margin: 0; font-size: 14px; line-height: 1.45; }
.bd-prows--tight .bd-prow { padding: 6px 0; }
.bd-fakebtns { display: flex; gap: 6px; flex-wrap: wrap; }
.bd-fakebtns span { border: 1.5px solid var(--ink); border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 500; }
.bd-fakebtns .is-dark { background: var(--ink); color: var(--paper); }
.bd-fee .bd-kv strong { font-size: 14px; }

/* Who will see it */
.bd-aud { display: grid; gap: 14px; }
.bd-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; background: var(--card); border-left: 6px solid var(--volt); border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.bd-note--row .bd-btn { flex: none; }
.bd-flag { background: #fff3ef; border: 1.5px solid #b3261e; color: #5c140f; border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; }
.bd-flag--dark { background: rgba(244,243,239,.08); border-color: var(--volt); color: var(--paper); }
.bd-filters { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.bd-aths { display: grid; gap: 8px; }
.bd-ath { display: grid; grid-template-columns: 40px minmax(0, 1.5fr) minmax(0, 1.3fr) 90px 100px 60px minmax(0, 1.5fr); gap: 12px; align-items: center; background: var(--card); border-radius: 16px; padding: 12px 14px; font-size: 14px; }
.bd-ath--head { background: transparent; padding: 0 14px; font: 400 10px var(--mono); letter-spacing: .1em; color: #5f5f5f; }
.bd-ath__who, .bd-ath__sch, .bd-ath__reach { display: grid; gap: 2px; min-width: 0; }
.bd-ath__who span { font-size: 13px; color: #444; }
.bd-ath__rate { font-weight: 700; }
.bd-ath__badges { display: flex; flex-wrap: wrap; gap: 4px; }
@container (max-width: 860px) {
  .bd-ath { grid-template-columns: 40px minmax(0, 1fr) auto; grid-template-areas: "av who rate" "av sch dist" "av reach reach" "av badges badges"; row-gap: 6px; align-items: start; }
  .bd-ath--head { display: none; }
  .bd-ath > .bd-av { grid-area: av; }
  .bd-ath__who { grid-area: who; } .bd-ath__sch { grid-area: sch; } .bd-ath__reach { grid-area: reach; display: flex; gap: 12px; }
  .bd-ath__rate { grid-area: rate; text-align: right; } .bd-ath__dist { grid-area: dist; text-align: right; } .bd-ath__badges { grid-area: badges; }
}
.bd-out { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.45; }
.bd-empty { padding: 12px 0; }

/* Deals list */
.bd-deals { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bd-deal { display: grid; gap: 6px; background: var(--card); border-radius: 16px; padding: 14px 16px; border: 1.5px solid transparent; }
.bd-deal:hover { border-color: var(--ink); color: var(--ink); }
.bd-deal__top, .bd-deal__meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; }
.bd-deal__t { font: 700 20px/1.15 var(--sans); letter-spacing: -.03em; }
.bd-deal__meta { font-size: 14px; color: #444; }

/* Deal status */
.bd-status { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: var(--volt); border-radius: 999px; padding: 8px 14px; font: 600 11px/1.3 var(--mono); letter-spacing: .1em; }
.bd-wdot { display: inline-flex; align-items: center; gap: 2px; height: 11px; }
.bd-wdot i { display: block; width: 2px; height: 11px; border-radius: 2px; background: currentColor; animation: wv ease-in-out infinite; }
.bd-tl { list-style: none; margin: 0; padding: 14px 16px; background: var(--card); border-radius: 18px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.bd-tl__i { position: relative; display: grid; gap: 4px; align-content: start; padding-top: 34px; min-width: 0; }
.bd-tl__i::before { content: ''; position: absolute; top: 13px; left: 30px; right: -8px; border-top: 2px dashed rgba(0,0,0,.25); }
.bd-tl__i:last-child::before { display: none; }
.bd-tl__i--done::before { border-top: 2px solid var(--ink); }
.bd-tl__dot { position: absolute; top: 0; left: 0; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; display: flex; align-items: center; justify-content: center; font: 700 13px var(--sans); }
.bd-tl__i--done .bd-tl__dot { background: var(--ink); color: var(--volt); }
.bd-tl__i--now .bd-tl__dot { background: var(--volt); color: var(--ink); }
.bd-tl__i--now .bd-tl__dot { animation: rise .35s ease both; }
.bd-tl__t { font-weight: 700; font-size: 14px; line-height: 1.2; }
.bd-tl__d { font-size: 12px; line-height: 1.35; color: #444; }
.bd-tl__i--next .bd-tl__t { color: #5f5f5f; }
@container (max-width: 700px) {
  .bd-tl { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bd-tl__i { padding: 4px 0 14px 40px; min-height: 44px; }
  .bd-tl__i::before { top: 30px; bottom: -2px; left: 13px; right: auto; border-top: 0; border-left: 2px dashed rgba(0,0,0,.25); }
  .bd-tl__i--done::before { border-top: 0; border-left: 2px solid var(--ink); }
}
.bd-dealgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@container (min-width: 780px) { .bd-dealgrid { grid-template-columns: minmax(0, 1fr) 320px; } }
.bd-dealgrid section > .bd-label { margin-bottom: 8px; }
.bd-reply { background: var(--card); border-radius: 16px; padding: 14px; display: grid; gap: 8px; border: 1.5px solid transparent; animation: rise .4s ease both; }
.bd-reply.is-acc { background: var(--volt); border-color: var(--ink); }
.bd-reply .bd-btn { justify-self: start; }
.bd-quote { margin: 0; font-size: 15px; line-height: 1.5; }
.bd-meta { font-size: 10px; }
.bd-wait { border: 1.5px dashed rgba(0,0,0,.25); }
.bd-dvs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.bd-dv { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--card); border-radius: 14px; padding: 10px 12px; }
.bd-dv__m { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--ink); background: #fff; display: flex; align-items: center; justify-content: center; font: 700 12px var(--sans); color: var(--volt); }
.bd-dv--done .bd-dv__m { background: var(--ink); }
.bd-dv--proof .bd-dv__m { background: var(--volt); color: var(--ink); }
.bd-dv__t { display: grid; gap: 2px; min-width: 0; font-size: 14px; }
.bd-dv__t span { font-size: 12px; color: #444; overflow-wrap: anywhere; }
.bd-dv__a { justify-self: end; }
@container (max-width: 520px) { .bd-dv { grid-template-columns: 28px minmax(0, 1fr); } .bd-dv__a { grid-column: 2; justify-self: start; } }
.bd-paybox { background: var(--ink); color: var(--paper); border-radius: 18px; padding: 16px; display: grid; gap: 10px; }
.bd-big { font: 700 40px/1 var(--sans); letter-spacing: -.05em; }
.bd-ruleline { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: start; font-size: 14px; line-height: 1.4; border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; }
.bd-ruleline > span:first-child { font-weight: 700; }

/* Payments */
.bd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; }
.bd-tile { border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; background: var(--card); }
.bd-tile--volt { background: var(--volt); }
.bd-tile--ink { background: var(--ink); color: var(--paper); }
.bd-tile--ink .bd-mono { color: #c9c9c4; }
.bd-tile--volt .bd-mono { color: var(--ink); }
.bd-tile__v { font: 700 32px/1 var(--sans); letter-spacing: -.05em; }
.bd-tile__d { font-size: 12px; opacity: .8; }
.bd-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bd-table th { text-align: left; font: 400 10px var(--mono); letter-spacing: .1em; color: #5f5f5f; padding: 6px 8px; }
.bd-table td { padding: 10px 8px; border-top: 1px solid rgba(0,0,0,.08); vertical-align: top; }
.bd-table td > strong, .bd-table td > span { display: block; }
.bd-table td .bd-pill { display: inline-flex; margin-bottom: 4px; }
@container (max-width: 700px) {
  .bd-table, .bd-table tbody, .bd-table tr, .bd-table td { display: block; width: auto; }
  .bd-table thead { position: absolute; left: -9999px; }
  .bd-table tr { border-top: 2px solid rgba(0,0,0,.1); padding: 6px 0; }
  .bd-table td { border-top: 0; padding: 4px 0; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 8px; }
  .bd-table td::before { content: attr(data-k); font: 400 10px/1.8 var(--mono); letter-spacing: .1em; color: #5f5f5f; }
  .bd-table td > * { grid-column: 2; }
}
.bd-receipt { background: #fff; border: 1.5px solid var(--ink); border-radius: 18px; padding: 16px; display: grid; gap: 8px; animation: rise .3s ease both; }
.bd-receipt__biz { font: 700 22px/1.1 var(--sans); letter-spacing: -.03em; }
.bd-receipt .bd-label:focus { outline: none; }

/* Business */
.bd-fields { display: grid; gap: 10px; }
.bd-field { display: grid; gap: 4px; }
.bd-member { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-top: 1px solid rgba(0,0,0,.08); padding-top: 8px; }
.bd-member__t { display: grid; gap: 2px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.bd-member__t span { font-size: 12px; color: #444; }
.bd-invite { display: grid; gap: 6px; border-top: 1px solid rgba(0,0,0,.08); padding-top: 10px; }
.bd-invite .bd-input { flex: 1 1 200px; width: auto; }

/* Phones: the sidebar becomes a tab row on top */
@media (max-width: 820px) {
  .bd-shell { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bd-side { padding: 12px; gap: 10px; }
  .bd-side__foot { display: none; }
  .bd-side__brand { padding: 0 4px; }
  .bd-nav { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
  .bd-nav__a { justify-content: center; padding: 0 4px; font-size: 13px; text-align: center; line-height: 1.15; gap: 4px; border: 1px solid rgba(244,243,239,.18); }
  .bd-nav__n { padding: 1px 5px; }
  .bd-main { padding: 16px 12px 22px; }
  .bd-app__body { min-height: 0; }
  .bd-banner { padding-left: 12px; }
}
@media (max-width: 480px) {
  .bd-banner__t { font-size: 10px; flex: 1 1 180px; }
  .bd-prow { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .bd-big { font-size: 34px; }
  .bd-head .bd-row .bd-btn { flex: 1 1 auto; }
  .bd-demo-wrap { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .bd-hint, .bd-reply, .bd-receipt, .bd-tl__i--now .bd-tl__dot { animation: none; }
  .bd-wdot i { animation: none; transform: scaleY(.6); }
  .bd-switch__knob { transition: none; }
}
@container (max-width: 480px) { .bd-grid3 { grid-template-columns: minmax(0, 1fr); } }