/* ═══════════════════════════════════════════════════════════════════════════════
   business-public.css — the three PUBLIC Business surfaces: the business page
   (.bp), the directory (.bd) and the membership price list (.ms).

   HOW IT RELATES TO business-ui.css
   That file is the foundation: tokens, the reset, the boundary against thirty
   legacy sheets, and the components every Business screen shares. It explicitly
   must not carry page-specific rules, so the three surfaces below live here.
   Everything here is scoped to `.bui` too, reads the same `--bui-*` tokens, and
   adds no second token set — only the handful of values the foundation has no
   opinion on yet, declared once on `.bui-public` below.

   HOW TO USE IT
   Load business-ui.css, then this file, and wrap the screen in
   `class="bui bui-public"`. Load order does not decide anything between the two:
   nothing here restates a foundation rule.

   THE ONE RULE THAT REACHES OUTSIDE .bui, AND WHY
   `body.bui-shell`. The legacy shell sets `body { display:flex; flex-direction:
   column; height:100vh }` (Other_View_CSS/other_style.css, minified into
   OtherViewCssOtherStyle.min.css and loaded by _UserLayout on every page). A
   fixed-height flex body clips its overflowing children and shrink-wraps a
   percentage-free child, which is what draws the price list as a phone-width
   column in the middle of a laptop and paints the footer over the directory's
   results. The fix is opt-in per page — _UserLayout writes the class only when a
   view asks for it — so the legacy sheet is not touched and no other page moves.
   Element+class outranks the bare `body` rule whatever order they load in.

   Light only. The site has no dark theme and this file does not invent one.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── The shell opt-in ─────────────────────────────────────────────────────────
   See the header. Three declarations, each undoing exactly one of the legacy
   rule's three, and nothing else. */
body.bui-shell {
  display: block;
  height: auto;
  min-height: 100%;
}

/* ── The few tokens the foundation has no opinion on ──────────────────────────
   Declared on the page root, not on `.bui`, so a screen that does not opt in is
   unaffected. Every one of them is either a semantic colour the foundation does
   not carry yet (info), a shadow with a different job (a diffused lift, where
   --bui-e3 is the sticky bar's upward edge), or a measure. */
.bui.bui-public {
  --bp-info: #1d4ed8;
  --bp-info-soft: #eff6ff;
  --bp-info-line: #bfdbfe;

  /* Diffused ambient, never a hard drop. --bui-e2 is the resting card; these two
     are the hover lift and the dialog. */
  --bp-lift: 0 1px 3px rgba(16, 24, 40, .06), 0 18px 44px -28px rgba(16, 24, 40, .34);
  --bp-raise: 0 2px 6px rgba(16, 24, 40, .07), 0 36px 80px -40px rgba(16, 24, 40, .42);

  /* One centred measure for a PUBLIC page. Narrower than the owner hub's 1320:
     these screens are read, not operated, and a buyer's eye should not travel the
     width of a desktop to get from a photograph to a phone number. */
  --bp-measure: 1120px;
  --bp-prose: 66ch;

  /* The star colour. Amber, and deliberately NOT the brand: a rating is not
     something Partners is claiming (ADR-0042). 4.6:1 on white. */
  --bp-star: #b47500;
}

/* ── The centred measure ──────────────────────────────────────────────────────
   max-width AND margin-inline:auto, together, always. A cap on its own is what
   produces the left-hugging column with dead space beside it (Rule 16). */
.bui .pub-page {
  max-width: var(--bp-measure);
  margin-inline: auto;
  padding-inline: var(--bui-s6);
}
@container bui (max-width: 560px) { .bui .pub-page { padding-inline: var(--bui-s4); } }

/* ── The only utilities on these surfaces ────────────────────────────────────
   Rule 16 forbids per-element `style="…"`, and a public page has a dozen places
   that want nothing more than "a gap above this" or "centre this column". They
   are named for the STEP on the shared scale, not for a pixel value, so a change
   to the scale moves them all; there are eight of them and there will not be a
   ninth without a reason written here. A value the SERVER computes — a tier's
   accent, a bar's length, a grid's column count — is still passed as a custom
   property, because that is data, not styling. */
.bui .u-gap-xs { margin-top: var(--bui-s1); }
.bui .u-gap-s  { margin-top: var(--bui-s2); }
.bui .u-gap-m  { margin-top: var(--bui-s3); }
.bui .u-gap-l  { margin-top: var(--bui-s4); }
.bui .u-gap-xl { margin-top: var(--bui-s5); }
.bui .u-center { text-align: center; }
.bui .u-full   { width: 100%; }
/* A prose cap AND the centring, together — a cap on its own is the left-hugging
   column rule 16 names by name. */
.bui .u-measure { max-width: var(--bp-prose); margin-inline: auto; }
.bui .u-measure--wide { max-width: 940px; margin-inline: auto; }
.bui .u-measure + * { margin-top: var(--bui-s6); }
/* A handle or a business name with no space in it must wrap rather than widen
   its own card off the side of a 360px phone. */
.bui .u-anywhere { overflow-wrap: anywhere; }
/* The sentence that introduces a block, rather than a caption inside one. */
.bui .ms-lede { max-width: var(--bp-prose); margin-bottom: var(--bui-s6); }
.bui .u-center.ms-lede { margin-inline: auto; }

.bui .pub-prose { max-width: var(--bp-prose); line-height: 1.65; color: var(--bui-label); }

/* ═══════════════════════════════════════════════════════════════════════════════
   SHARED MARKS — the verified tick and the tier gem.
   Used by the business page, the directory card and the price list, so they live
   here rather than three times over.
   ═══════════════════════════════════════════════════════════════════════════════ */

/* The platform's own mark, in brand magenta, never a tier colour. */
.bui .vtick {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  color: var(--bui-brand); font-size: 11.5px; font-weight: 900; letter-spacing: .02em;
  text-transform: none;
}
.bui .vtick svg { width: 17px; height: 17px; flex: none; }
.bui .vtick .vtick-in { fill: #fff; }

/* The tier gem — the ONLY place a tier colour appears (ADR-0042), as the stone
   and its ring. The surface accent stays brand magenta everywhere else. */
.bui .tiergem {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  min-height: 26px; padding: 3px 11px 3px 4px; border-radius: var(--bui-r-full);
  background: var(--bui-surface); border: 1px solid var(--bui-line);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tier, var(--bui-muted)) 38%, transparent);
  color: var(--bui-label); font-size: 11.5px; font-weight: 900;
  letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; max-width: 100%;
}
.bui .tiergem-i {
  width: 20px; height: 20px; flex: none; border-radius: 50%; display: block; overflow: hidden;
  background:
    radial-gradient(circle at 32% 28%,
      #fff 0%,
      color-mix(in srgb, var(--tier, var(--bui-muted)) 22%, #fff) 26%,
      var(--tier, var(--bui-muted)) 72%,
      color-mix(in srgb, var(--tier, var(--bui-muted)) 55%, #000) 100%);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .28), inset 0 -1px 2px rgba(0, 0, 0, .18);
}
/* The Super-Admin's uploaded badge is the source of record; the drawn stone above
   is what a page falls back to when there is no asset, or it fails to load. */
.bui .tiergem-i img { width: 100%; height: 100%; object-fit: contain; display: block; }
.bui .tiergem-i--asset { background: none; box-shadow: none; }

/* ── Status pill, and the one thing on the platform allowed to breathe ──────── */
.bui .statepill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 28px;
  padding: 3px 12px; border-radius: var(--bui-r-full);
  font-size: 12.5px; font-weight: 800; line-height: 1.2; white-space: nowrap;
}
.bui .statepill--open { background: var(--bui-ok-soft); color: var(--bui-ok); border: 1px solid var(--bui-ok-line); }
.bui .statepill--shut { background: var(--bui-sunken); color: var(--bui-subtle); border: 1px solid var(--bui-line); }
.bui .statepill-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; position: relative; }
/* SIGNATURE — the Open Sign. Only "open now" is alive; a pulsing grey dot would
   read as a fault, and a grey pill meaning "we do not know" reads as "closed",
   which is why the closed state has no ring and an unknown week has no pill. */
.bui .statepill--open .statepill-dot::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  border: 2px solid currentColor; opacity: .45;
  animation: bui-breathe 2.4s ease-in-out infinite;
}
@keyframes bui-breathe {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50% { transform: scale(1.25); opacity: 0; }
}

/* ── Three different answers, three different looks ──────────────────────────
   empty  — the query answered nothing, which is a fact about the business
   unavail— we could not read it, so we say so and print no number
   err    — something failed and the reader must act */
.bui .pub-empty {
  border: 1.5px dashed var(--bui-line-strong); border-radius: var(--bui-r-lg);
  background: var(--bui-canvas); padding: var(--bui-s8) var(--bui-s6); text-align: center;
}
.bui .pub-empty h3 { font-size: 16px; font-weight: 900; line-height: 1.3; margin-bottom: 6px; }
.bui .pub-empty p { color: var(--bui-subtle); font-size: 13.5px; line-height: 1.55; max-width: 46ch; margin: 0 auto var(--bui-s4); }
.bui .pub-empty-acts { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }

.bui .pub-unavail,
.bui .pub-err,
.bui .pub-ok {
  display: flex; gap: 11px; align-items: flex-start;
  border-radius: var(--bui-r-md); padding: 13px 15px; font-size: 13.5px; line-height: 1.55;
}
.bui .pub-unavail { border: 1px solid var(--bui-warn-line); background: var(--bui-warn-soft); color: var(--bui-warn-ink); }
.bui .pub-err { border: 1px solid var(--bui-danger-line); background: var(--bui-danger-soft); color: var(--bui-danger); }
.bui .pub-ok { border: 1px solid var(--bui-ok-line); background: var(--bui-ok-soft); color: var(--bui-ok); }
.bui .pub-unavail svg, .bui .pub-err svg, .bui .pub-ok svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.bui .pub-unavail > span, .bui .pub-err > span, .bui .pub-ok > span { flex: 1; min-width: 0; }

/* ── A card, and the page's pager ───────────────────────────────────────────── */
.bui .pub-card {
  background: var(--bui-surface); border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-xl); padding: var(--bui-s6); box-shadow: var(--bui-e1);
}
.bui .pub-card + .pub-card { margin-top: var(--bui-s5); }
.bui .pub-card > h2 { font-size: 17px; font-weight: 900; letter-spacing: -.016em; line-height: 1.25; margin-bottom: var(--bui-s3); }
.bui .pub-cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bui-s4); flex-wrap: wrap; margin-bottom: var(--bui-s4); }
.bui .pub-cardhead h2 { font-size: 17px; font-weight: 900; letter-spacing: -.016em; line-height: 1.25; }

.bui .pub-pager { display: flex; align-items: center; justify-content: center; gap: var(--bui-s4); margin-top: var(--bui-s8); }
.bui .pub-pager span { font-size: 13px; color: var(--bui-subtle); }
/* An empty cell, never a disabled button: a dead Previous on page one is a
   control that can never do anything. The row keeps its three slots. */
.bui .pub-pager-gap { display: block; min-width: 1px; }

@media (prefers-reduced-motion: reduce) {
  .bui .statepill--open .statepill-dot::after { animation: none; opacity: .45; transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SURFACE 1 — THE PUBLIC BUSINESS PAGE  (.bp-)
   ═══════════════════════════════════════════════════════════════════════════════ */
.bui.bp-surface { background: var(--bui-canvas); padding-bottom: var(--bui-s12); }

/* The cover is a BAND, not a mural: 220px, and it never carries information —
   the identity card below does. */
.bui .bp-cover { height: 220px; position: relative; overflow: hidden; background: #dfe4ec; }
.bui .bp-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bui .bp-cover::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 38%, rgba(15, 23, 42, .30) 100%);
}
/* No cover uploaded: a deterministic shutter woven from the brand. A grey
   rectangle reads as a failed image; this reads as a page without a photograph. */
.bui .bp-cover--none {
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, .55) 0 2px, transparent 2px 13px),
    linear-gradient(126deg, #fde8f2 0%, #f3e9fb 46%, #e7eef9 100%);
}
.bui .bp-cover--none::after { content: none; }

/* The identity card lifts over the band: one card, one edge, one measure. */
.bui .bp-id {
  position: relative; margin-top: -64px; background: var(--bui-surface);
  border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl); box-shadow: var(--bp-lift);
  padding: var(--bui-s6);
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--bui-s5); align-items: start;
}
.bui .bp-logo {
  width: 104px; height: 104px; border-radius: 22px; background: var(--bui-sunken);
  border: 1px solid var(--bui-line); overflow: hidden; display: flex;
  align-items: center; justify-content: center;
  font-size: 34px; font-weight: 900; line-height: 1; color: var(--bui-brand); box-shadow: var(--bui-e1);
}
.bui .bp-logo img { width: 100%; height: 100%; object-fit: cover; }
.bui .bp-name {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 32px; font-weight: 900; line-height: 1.08; letter-spacing: -.032em;
}
.bui .bp-name-bn { font-family: var(--bui-font-bn); font-size: 16px; color: var(--bui-subtle); margin-top: 4px; }
.bui .bp-handle { font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--bui-muted); margin-top: 6px; }
.bui .bp-handle b { color: var(--bui-label); font-weight: 900; }
.bui .bp-statline { display: flex; align-items: center; gap: var(--bui-s3); flex-wrap: wrap; margin-top: var(--bui-s4); }
.bui .bp-rate { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 800; color: var(--bui-label); }
.bui .bp-rate svg { width: 15px; height: 15px; color: var(--bp-star); }
.bui .bp-rate span { color: var(--bui-subtle); font-weight: 400; }
.bui .bp-idact { display: flex; flex-direction: column; gap: 9px; min-width: 188px; }

/* THE CONTACT ROW — the reason a buyer opened the page. One primary (WhatsApp,
   because that is what Bangladeshi buyers use), four peers, one radius, 44px,
   and every one of them only when the field it needs exists. */
.bui .bp-contactrow {
  display: flex; gap: 9px; flex-wrap: wrap; grid-column: 1 / -1;
  margin-top: var(--bui-s5); padding-top: var(--bui-s5); border-top: 1px solid var(--bui-line);
}
.bui .bp-act {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 11px 17px; border-radius: var(--bui-r-md);
  border: 1.5px solid var(--bui-line-strong); background: var(--bui-surface); color: var(--bui-ink);
  font-size: 13.5px; font-weight: 800; line-height: 1; text-decoration: none;
  transition: border-color var(--bui-fast) var(--bui-ease-base),
              background var(--bui-fast) var(--bui-ease-base),
              color var(--bui-fast) var(--bui-ease-base),
              transform var(--bui-press) var(--bui-ease-press);
}
.bui .bp-act svg { width: 17px; height: 17px; flex: none; color: var(--bui-muted); transition: color var(--bui-fast) var(--bui-ease-base); }
.bui .bp-act:hover { border-color: var(--bui-brand); color: var(--bui-brand); background: var(--bui-brand-soft); text-decoration: none; }
.bui .bp-act:hover svg { color: var(--bui-brand); }
.bui .bp-act:active { transform: scale(.975); }
.bui .bp-act--primary { background: var(--bui-brand); border-color: var(--bui-brand); color: var(--bui-brand-contrast); box-shadow: var(--bui-e1); }
.bui .bp-act--primary svg { color: currentColor; }
.bui .bp-act--primary:hover { background: var(--bui-brand-dark); border-color: var(--bui-brand-dark); color: var(--bui-brand-contrast); }
.bui .bp-act--primary:hover svg { color: currentColor; }

/* Tabs — real links with a real selected state. NOT an ARIA tablist: these are
   separate URLs, and announcing them as tabs tells a screen-reader user the
   content is already loaded. */
.bui .bp-nav { margin-top: var(--bui-s6); border-bottom: 1px solid var(--bui-line); }
.bui .bp-nav ul { display: flex; gap: var(--bui-s5); overflow-x: auto; scrollbar-width: none; }
.bui .bp-nav ul::-webkit-scrollbar { display: none; }
.bui .bp-nav a {
  position: relative; display: inline-flex; align-items: center; min-height: 46px; padding: 0 2px;
  font-size: 14.5px; font-weight: 800; line-height: 1; color: var(--bui-subtle); white-space: nowrap;
  text-decoration: none; transition: color var(--bui-fast) var(--bui-ease-base);
}
.bui .bp-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
  border-radius: 3px 3px 0 0; background: var(--bui-brand);
  transform: scaleX(0); transform-origin: center; transition: transform var(--bui-base) var(--bui-ease-arrive);
}
.bui .bp-nav a:hover { color: var(--bui-ink); text-decoration: none; }
.bui .bp-nav a[aria-current="page"] { color: var(--bui-brand); }
.bui .bp-nav a[aria-current="page"]::after { transform: scaleX(1); }
.bui .bp-nav .ct { margin-left: 6px; font-size: 12.5px; font-weight: 700; color: var(--bui-muted); }

.bui .bp-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(296px, 4fr); gap: var(--bui-s6); margin-top: var(--bui-s6); }
.bui .bp-body--wide { grid-template-columns: minmax(0, 1fr); }
.bui .bp-body > * { min-width: 0; }

/* Ad grid — the tier gem rides the CARD, top-right over the photo, on a frosted
   plate so it survives a light or a dark image. */
.bui .bp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: var(--bui-s4); }
.bui .bp-tile {
  border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); background: var(--bui-surface);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow var(--bui-fast) var(--bui-ease-base),
              transform var(--bui-fast) var(--bui-ease-base),
              border-color var(--bui-fast) var(--bui-ease-base);
}
.bui .bp-tile:hover { box-shadow: var(--bp-lift); transform: translateY(-3px); border-color: var(--bui-line-strong); }
.bui .bp-tile:focus-within { box-shadow: var(--bui-focus); }
.bui .bp-media { aspect-ratio: 4 / 3; position: relative; background: var(--bui-sunken); display: block; overflow: hidden; }
.bui .bp-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bui .bp-media--none { display: flex; align-items: center; justify-content: center; color: var(--bui-muted); font-size: 12.5px; font-weight: 700; }
.bui .bp-media .tiergem {
  position: absolute; top: 9px; right: 9px; max-width: calc(100% - 18px);
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  box-shadow: var(--bui-e1), inset 0 0 0 1.5px color-mix(in srgb, var(--tier, var(--bui-muted)) 42%, transparent);
}
.bui .bp-tilebody { padding: 13px 14px 15px; display: flex; flex-direction: column; gap: 5px; flex: 1; }
.bui .bp-tiletitle { font-size: 13.5px; font-weight: 700; line-height: 1.35; }
.bui .bp-tiletitle a { color: inherit; }
.bui .bp-tiletitle a:hover { color: var(--bui-brand); text-decoration: underline; text-underline-offset: 2px; }
.bui .bp-price { font-size: 15.5px; font-weight: 900; line-height: 1.2; letter-spacing: -.02em; }
.bui .bp-tilemeta { font-size: 12px; color: var(--bui-subtle); line-height: 1.45; margin-top: auto; padding-top: 4px; }

/* Hours — today is the only row that gets weight; six other days are reference. */
.bui .bp-hours { width: 100%; border-collapse: collapse; font-size: 13px; }
.bui .bp-hours th { text-align: left; font-weight: 400; color: var(--bui-label); padding: 7px 0; }
.bui .bp-hours td { text-align: right; padding: 7px 0; color: var(--bui-subtle); font-variant-numeric: tabular-nums; }
.bui .bp-hours tr + tr th, .bui .bp-hours tr + tr td { border-top: 1px solid var(--bui-line); }
.bui .bp-hours tr[data-today] th { font-weight: 900; color: var(--bui-ink); }
.bui .bp-hours tr[data-today] td { color: var(--bui-ok); font-weight: 800; }
/* The two halves of one fact: hovering or focusing the open pill lights today's
   row. Script-free — the pill and the table are siblings under one wrapper. */
.bui .bp-hourswrap:hover tr[data-today] th,
.bui .bp-hourswrap:focus-within tr[data-today] th { background: var(--bui-ok-soft); box-shadow: inset 3px 0 0 var(--bui-ok); padding-left: 9px; }
.bui .bp-hourswrap:hover tr[data-today] td,
.bui .bp-hourswrap:focus-within tr[data-today] td { background: var(--bui-ok-soft); padding-right: 9px; }

/* The seven-day fold. On a phone three rows and a disclosure; at every other
   width the whole week is simply there, and the disclosure is not drawn — a
   control that reveals what is already visible is a control with nothing behind
   it. `:has()` is what lets the <details> govern a SIBLING table, which is the
   only reason the whole week can live in the markup (it prints, ctrl-F finds it,
   and it works with scripting off). */
.bui .bp-hours-more { display: none; }
.bui .bp-hours-more > summary {
  display: inline-flex; width: 100%; justify-content: center; margin-top: 12px; cursor: pointer;
  list-style: none;
}
.bui .bp-hours-more > summary::-webkit-details-marker { display: none; }
@container bui (max-width: 560px) {
  .bui .bp-hours-more { display: block; }
  .bui .pub-card:has(.bp-hours-more:not([open])) .bp-hours-rest { display: none; }
  .bui .pub-card:has(.bp-hours-more[open]) > .bp-hours-more > summary { visibility: hidden; height: 0; margin: 0; min-height: 0; padding: 0; }
}

/* Contact — a definition list with icons, not a stack of magenta links. */
.bui .bp-dl { display: grid; gap: 12px; }
.bui .bp-dl > div { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; }
.bui .bp-dl svg { width: 17px; height: 17px; color: var(--bui-muted); margin-top: 2px; }
.bui .bp-dl dt { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bui-muted); }
.bui .bp-dl dd { font-size: 13.5px; line-height: 1.5; color: var(--bui-label); word-break: break-word; }
.bui .bp-dl dd a { color: var(--bui-label); text-decoration: underline; text-decoration-color: var(--bui-line-strong); text-underline-offset: 3px; }
.bui .bp-dl dd a:hover { color: var(--bui-brand); text-decoration-color: var(--bui-brand); }

/* Reviews — the distribution first, then the reviews. The Google Business
   Profile order, because a single newest review is not a summary. */
.bui .bp-score { display: flex; gap: var(--bui-s6); align-items: center; flex-wrap: wrap; padding-bottom: var(--bui-s5); margin-bottom: var(--bui-s5); border-bottom: 1px solid var(--bui-line); }
.bui .bp-scorebig { font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -.04em; }
.bui .bp-stars { color: var(--bp-star); letter-spacing: 1px; font-size: 13px; }
.bui .bp-bars { flex: 1; min-width: 210px; display: grid; gap: 5px; }
.bui .bp-bar { display: grid; grid-template-columns: 34px 1fr 34px; gap: 9px; align-items: center; font-size: 12px; color: var(--bui-subtle); }
.bui .bp-bar i { height: 7px; border-radius: 99px; background: var(--bui-line); display: block; overflow: hidden; }
.bui .bp-bar i b { display: block; height: 100%; background: var(--bp-star); border-radius: 99px; }
.bui .bp-rev { border: 1px solid var(--bui-line); border-radius: var(--bui-r-lg); padding: var(--bui-s5); background: var(--bui-surface); }
.bui .bp-rev + .bp-rev { margin-top: var(--bui-s4); }
/* The owner's reply, named so nobody mistakes it for the reviewer's own words. */
.bui .bp-replyby { color: var(--bui-on-soft); }
.bui .bp-revtop { display: flex; gap: 12px; align-items: center; }
.bui .bp-ava { width: 42px; height: 42px; border-radius: 50%; flex: none; overflow: hidden; display: flex; align-items: center; justify-content: center; background: var(--bui-brand-soft); color: var(--bui-on-soft); font-size: 14px; font-weight: 900; line-height: 1; }
.bui .bp-ava img { width: 100%; height: 100%; object-fit: cover; }
.bui .bp-reply { margin-top: var(--bui-s4); padding: 13px 15px; border-radius: var(--bui-r-md); background: var(--bui-sunken); border-left: 3px solid var(--bui-brand); }

/* The share panel. */
.bui .bp-qr { width: 132px; height: 132px; margin: 14px auto 12px; border-radius: var(--bui-r-lg); border: 6px solid var(--bui-surface); box-shadow: var(--bui-e1); display: block; background: var(--bui-surface); }

@container bui (max-width: 980px) {
  .bui .bp-id { grid-template-columns: auto minmax(0, 1fr); }
  .bui .bp-idact { grid-column: 1 / -1; flex-direction: row; min-width: 0; }
  .bui .bp-idact > * { flex: 1; }
  .bui .bp-body { grid-template-columns: minmax(0, 1fr); }
}
@container bui (max-width: 560px) {
  .bui .bp-cover { height: 104px; }
  .bui .bp-id { margin-top: -40px; padding: var(--bui-s5) var(--bui-s4); gap: var(--bui-s4); }
  .bui .bp-logo { width: 66px; height: 66px; border-radius: 16px; font-size: 24px; }
  .bui .bp-name { font-size: 23px; }
  /* Two up, WhatsApp full width. Seven buttons wrapping ragged across three rows
     is what orphans "Website" alone on the last one. */
  .bui .bp-contactrow { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .bui .bp-act { padding: 11px 10px; font-size: 13px; }
  .bui .bp-act--primary { grid-column: 1 / -1; }
  .bui .bp-grid { grid-template-columns: 1fr 1fr; gap: 11px; }
  .bui .bp-scorebig { font-size: 37px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SURFACE 2 — THE DIRECTORY  (.bd-)
   ═══════════════════════════════════════════════════════════════════════════════ */
.bui.bd-surface { background: var(--bui-canvas); padding-bottom: var(--bui-s12); }
.bui .bd-head { padding: var(--bui-s10) 0 var(--bui-s5); }
.bui .bd-head h1 { font-size: 34px; font-weight: 900; line-height: 1.08; letter-spacing: -.034em; }
.bui .bd-head p { margin-top: 10px; color: var(--bui-subtle); font-size: 15px; line-height: 1.55; max-width: var(--bp-prose); }

/* SIGNATURE — the Verified Rail. The filter bar is sticky, and the chip line
   below it always says exactly what is being asked. Each chip's ✕ is a plain
   link that drops one query parameter, so the page stays script-free and a
   bookmark, the back button and a shared URL all still work. */
.bui .bd-rail {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bui-canvas) 86%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--bui-line);
  padding: var(--bui-s4) 0; margin-bottom: var(--bui-s5);
}
.bui .bd-filters { display: grid; grid-template-columns: minmax(220px, 1.6fr) repeat(3, minmax(140px, 1fr)) auto; gap: 10px; align-items: end; }
.bui .bd-fld { min-width: 0; }
.bui .bd-fld label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--bui-muted); margin-bottom: 5px; }
.bui .bd-fld input, .bui .bd-fld select { width: 100%; min-height: 44px; }
.bui .bd-fld-hint { display: block; margin-top: 5px; font-size: 12px; line-height: 1.45; color: var(--bui-muted); }
.bui .bd-search { position: relative; }
.bui .bd-search > svg { position: absolute; left: 13px; top: calc(50% + 9px); transform: translateY(-50%); width: 16px; height: 16px; color: var(--bui-muted); pointer-events: none; }
.bui .bd-search input { padding-left: 38px; }

/* A real checkbox, styled, sitting WITH the button it belongs to — not a native
   control marooned a thousand pixels from Apply. */
.bui .bd-chk {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px 0 12px;
  border: 1.5px solid var(--bui-line-strong); border-radius: var(--bui-r-md); background: var(--bui-surface);
  cursor: pointer; font-size: 13.5px; font-weight: 800; color: var(--bui-label); white-space: nowrap;
  transition: border-color var(--bui-fast) var(--bui-ease-base), background var(--bui-fast) var(--bui-ease-base), color var(--bui-fast) var(--bui-ease-base);
}
.bui .bd-chk input {
  appearance: none; width: 19px; height: 19px; border-radius: 6px; margin: 0; flex: none;
  border: 1.5px solid var(--bui-line-strong); background: var(--bui-surface); position: relative; cursor: pointer;
}
.bui .bd-chk input:checked { background: var(--bui-brand); border-color: var(--bui-brand); }
.bui .bd-chk input:checked::after {
  content: ""; position: absolute; left: 6px; top: 2.5px; width: 5px; height: 9px;
  border: 2px solid var(--bui-brand-contrast); border-top: 0; border-left: 0; transform: rotate(43deg);
}
.bui .bd-chk:hover { border-color: var(--bui-brand); color: var(--bui-brand); }
.bui .bd-chk:has(input:checked) { border-color: var(--bui-brand); background: var(--bui-brand-soft); color: var(--bui-on-soft); }

.bui .bd-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.bui .bd-chip {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 7px 5px 13px;
  border-radius: var(--bui-r-full); background: var(--bui-surface); border: 1.5px solid var(--bui-brand);
  color: var(--bui-on-soft); font-size: 12.5px; font-weight: 800; line-height: 1.2; text-decoration: none;
}
.bui .bd-chip-x {
  width: 22px; height: 22px; border-radius: 50%; border: 0; flex: none;
  background: var(--bui-brand-soft); color: var(--bui-on-soft);
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none;
  transition: background var(--bui-fast) var(--bui-ease-base), color var(--bui-fast) var(--bui-ease-base);
}
.bui .bd-chip-x:hover { background: var(--bui-brand); color: var(--bui-brand-contrast); text-decoration: none; }
.bui .bd-chip-x svg { width: 11px; height: 11px; }
.bui .bd-chip--clear { border-style: dashed; border-color: var(--bui-line-strong); color: var(--bui-subtle); padding-right: 13px; }
.bui .bd-chip--clear:hover { border-color: var(--bui-label); color: var(--bui-ink); text-decoration: none; }
/* Apply sits at the end of the chip line, which is where the eye finishes
   reading what is in force. margin-inline-start, not margin-left: the rail is
   mirrored wholesale under `dir="rtl"`. */
.bui .bd-apply { margin-inline-start: auto; }

.bui .bd-summary { display: flex; justify-content: space-between; align-items: baseline; gap: var(--bui-s4); flex-wrap: wrap; margin-bottom: var(--bui-s4); }
.bui .bd-summary p { font-size: 13.5px; color: var(--bui-subtle); }
.bui .bd-summary strong { color: var(--bui-ink); font-weight: 900; }

.bui .bd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(316px, 1fr)); gap: var(--bui-s4); }
.bui .bd-grid > li { display: flex; }
.bui .bd-card {
  position: relative; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto;
  padding: var(--bui-s5); background: var(--bui-surface); border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-lg);
  transition: box-shadow var(--bui-fast) var(--bui-ease-base), transform var(--bui-fast) var(--bui-ease-base), border-color var(--bui-fast) var(--bui-ease-base);
}
.bui .bd-card:hover { box-shadow: var(--bp-lift); transform: translateY(-3px); border-color: var(--bui-line-strong); }
.bui .bd-card:focus-within { box-shadow: var(--bui-focus); }
/* Verified pages carry a brand edge as well as the tick, because the order
   claims they came first and a reader is entitled to see which ones they are. */
.bui .bd-card--verified { box-shadow: inset 3px 0 0 var(--bui-brand); }
.bui .bd-card--verified:hover { box-shadow: inset 3px 0 0 var(--bui-brand), var(--bp-lift); }
.bui .bd-cardtop { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 13px; align-items: start; }
.bui .bd-cardtop > div { min-width: 0; }
.bui .bd-logo {
  width: 56px; height: 56px; border-radius: 15px; flex: none; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #f4f6fa, #e8ecf4); border: 1px solid var(--bui-line);
  font-size: 20px; font-weight: 900; line-height: 1; color: var(--bui-brand);
}
.bui .bd-logo img { width: 100%; height: 100%; object-fit: cover; }
.bui .bd-name { font-size: 16px; font-weight: 900; line-height: 1.25; letter-spacing: -.014em; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.bui .bd-name a { color: inherit; }
/* One link per card, stretched over the tile: a second anchor makes every
   business two identical stops for a keyboard and a screen reader. */
.bui .bd-name a::after { content: ""; position: absolute; inset: 0; border-radius: var(--bui-r-lg); }
.bui .bd-name a:hover { color: var(--bui-brand); text-decoration: none; }
.bui .bd-where { font-size: 12.5px; color: var(--bui-subtle); line-height: 1.45; display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.bui .bd-where i { width: 3px; height: 3px; border-radius: 50%; background: var(--bui-line-strong); display: inline-block; }
.bui .bd-tag { font-size: 13px; color: var(--bui-label); line-height: 1.5; }
.bui .bd-foot { display: flex; gap: var(--bui-s4); align-items: center; flex-wrap: wrap; padding-top: 12px; margin-top: auto; border-top: 1px solid var(--bui-line); font-size: 12.5px; color: var(--bui-subtle); }
.bui .bd-foot b { color: var(--bui-ink); font-weight: 900; }
.bui .bd-star { color: var(--bp-star); }

@container bui (max-width: 820px) {
  .bui .bd-filters { grid-template-columns: 1fr 1fr; }
  .bui .bd-filters .bd-search { grid-column: 1 / -1; }
}
@container bui (max-width: 560px) {
  .bui .bd-head { padding: var(--bui-s6) 0 var(--bui-s4); }
  .bui .bd-head h1 { font-size: 26px; }
  .bui .bd-rail { padding: 12px 0; }
  .bui .bd-filters { grid-template-columns: 1fr; gap: 9px; }
  .bui .bd-grid { grid-template-columns: 1fr; }
  .bui .bd-summary { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   SURFACE 3 — THE MEMBERSHIP PRICE LIST  (.ms-)
   ═══════════════════════════════════════════════════════════════════════════════ */
.bui.ms-surface {
  background: var(--bui-canvas); padding-bottom: var(--bui-s12);
  background-image: radial-gradient(1100px 420px at 50% -10%, var(--bui-brand-soft) 0%, transparent 68%);
}
.bui .ms-hero { text-align: center; padding: var(--bui-s12) 0 var(--bui-s6); }
.bui .ms-hero h1 { margin: var(--bui-s4) 0 12px; font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: -.038em; }
.bui .ms-lede { color: var(--bui-subtle); font-size: 16px; line-height: 1.55; max-width: var(--bp-prose); margin-inline: auto; }
.bui .ms-eyebrow {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: var(--bui-r-full);
  background: var(--bui-brand-soft); color: var(--bui-on-soft);
  font-size: 11.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase;
}
.bui .ms-eyebrow svg { width: 14px; height: 14px; }

/* SIGNATURE — the Term Dial. Terms in customer words with the saving named, and
   real links carrying ?period=, so it works with scripting off. */
.bui .ms-term { display: flex; flex-direction: column; align-items: center; gap: 11px; margin-bottom: var(--bui-s6); }
.bui .ms-seg { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 2px; padding: 5px; background: var(--bui-chip); border-radius: 16px; border: 1px solid var(--bui-line); }
.bui .ms-seg a {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 46px; padding: 6px 20px; border-radius: 12px;
  font-size: 14px; font-weight: 800; line-height: 1.2; color: var(--bui-subtle); white-space: nowrap; text-decoration: none;
  transition: color var(--bui-fast) var(--bui-ease-base), background var(--bui-fast) var(--bui-ease-base);
}
.bui .ms-seg a small { font-size: 10.5px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; color: var(--bui-ok); margin-top: 2px; }
.bui .ms-seg a:hover { color: var(--bui-ink); text-decoration: none; }
.bui .ms-seg a[aria-current] { color: var(--bui-on-soft); background: var(--bui-surface); box-shadow: 0 2px 10px rgba(16, 24, 40, .16); }

/* auto-fit, not a fixed four: the catalogue decides how many tiers there are,
   and it currently ships five — four paid plus Free. A hard count left Free
   alone on a second row with three empty cells beside it, which reads as a
   page that failed to finish loading. */
.bui .ms-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(198px, 1fr)); gap: var(--bui-s4); align-items: stretch; }
/* The <li> is the grid item and the card is inside it, so the card fills the row
   only if the item is itself a flex container. Without this the cards end at
   different heights and the CTAs step down the page — the one defect a price
   grid must never have. */
.bui .ms-grid > li { display: flex; }
.bui .ms-card {
  position: relative; display: flex; flex-direction: column; flex: 1 1 auto;
  background: var(--bui-surface); border: 1px solid var(--bui-line); border-radius: var(--bui-r-xl);
  padding: var(--bui-s6) var(--bui-s5) var(--bui-s5); box-shadow: var(--bui-e1);
  transition: transform var(--bui-fast) var(--bui-ease-base), box-shadow var(--bui-fast) var(--bui-ease-base);
}
.bui .ms-card:hover { transform: translateY(-5px); box-shadow: var(--bp-raise); }
.bui .ms-card--retired { background: var(--bui-canvas); }
/* The recommended plan is the ONE card that is filled. One accent, one decision. */
.bui .ms-card--pick { border-color: var(--bui-brand); box-shadow: 0 0 0 3px var(--bui-brand-soft), var(--bp-lift); }
.bui .ms-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 5px 14px; border-radius: var(--bui-r-full); background: var(--bui-brand); color: var(--bui-brand-contrast);
  font-size: 10.5px; font-weight: 900; letter-spacing: .09em; text-transform: uppercase; box-shadow: var(--bui-e1);
}
.bui .ms-flag--current { background: var(--bui-ok); }
.bui .ms-flag--retired { background: var(--bui-muted); }
.bui .ms-cardtop { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.bui .ms-gem {
  width: 46px; height: 46px; flex: none; border-radius: 14px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; background: var(--bui-surface);
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tier, var(--bui-muted)) 40%, transparent), var(--bui-e1);
}
.bui .ms-gem .tiergem-i { width: 26px; height: 26px; }
.bui .ms-gem img { width: 100%; height: 100%; object-fit: contain; }
.bui .ms-tier { font-size: 19px; font-weight: 900; line-height: 1.2; letter-spacing: -.018em; }
/* Two lines reserved whether the tagline needs them or not, so the prices land
   on one baseline across the row. Released on a phone, where there is no row. */
.bui .ms-tag { font-size: 12.5px; color: var(--bui-subtle); line-height: 1.4; min-height: 4.2em; margin-bottom: var(--bui-s4); }
.bui .ms-price { display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.bui .ms-cur { font-size: 14px; font-weight: 800; line-height: 1; color: var(--bui-subtle); }
.bui .ms-amt { font-size: 33px; font-weight: 900; line-height: 1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.bui .ms-per { width: 100%; font-size: 12.5px; color: var(--bui-subtle); margin-top: 5px; }
.bui .ms-priceline { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }
.bui .ms-eq { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--bui-r-full); background: var(--bui-sunken); font-size: 12px; font-weight: 800; line-height: 1.3; color: var(--bui-label); font-variant-numeric: tabular-nums; }
.bui .ms-save { display: inline-block; padding: 3px 10px; border-radius: var(--bui-r-full); background: var(--bui-ok-soft); border: 1px solid var(--bui-ok-line); color: var(--bui-ok); font-size: 11.5px; font-weight: 900; line-height: 1.3; }
.bui .ms-rule { height: 1px; background: var(--bui-line); margin: var(--bui-s5) 0 var(--bui-s4); }
/* The limits read as FIGURES, not as three more ticks in a list of nine. */
/* --ms-cols is the number of limit figures the CATALOGUE actually carries for
   this tier; three is what every seeded tier has today, and the fallback keeps
   the strip square if a tier ever ships with fewer. */
.bui .ms-limits { display: grid; grid-template-columns: repeat(var(--ms-cols, 3), 1fr); gap: 7px; margin-bottom: var(--bui-s4); }
/* The three chips are one strip and must read as one: equal height, and a unit
   that never wraps. "ADS / MO" broken over three lines beside a one-line
   "PAGES" is what turned the strip ragged once five cards had to fit a row. */
.bui .ms-limit {
  display: flex; flex-direction: column; justify-content: center;
  text-align: center; padding: 9px 3px; min-height: 52px;
  border-radius: var(--bui-r-sm); background: var(--bui-sunken);
}
.bui .ms-limit b { display: block; font-size: 18px; font-weight: 900; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bui .ms-limit span { display: block; font-size: 10px; line-height: 1.3; color: var(--bui-subtle); margin-top: 3px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; }
/* An unpublished limit is amber and says so. A dash would be read as "none". */
.bui .ms-limit--unresolved b { font-size: 11px; font-style: italic; font-weight: 700; color: var(--bui-warn-ink); letter-spacing: 0; }
.bui .ms-bens { display: flex; flex-direction: column; gap: 9px; flex: 1; margin-bottom: var(--bui-s5); }
.bui .ms-ben { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.45; color: var(--bui-label); }
.bui .ms-ben svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--bui-muted); }
/* Weighted: the first two are the reason to buy this tier; the rest are detail.
   Nine equal ticks per card across five cards is 45 pieces of equal emphasis,
   which is none. */
.bui .ms-ben--key { font-weight: 800; color: var(--bui-ink); }
.bui .ms-ben--key svg { color: var(--bui-ok); }
.bui .ms-cta { margin-top: auto; }
.bui .ms-note { color: var(--bui-subtle); font-size: 12.5px; line-height: 1.45; margin: 8px 0 16px; }
.bui .ms-foot { max-width: var(--bp-prose); margin: var(--bui-s8) auto 0; text-align: center; color: var(--bui-subtle); font-size: 13px; line-height: 1.6; }

/* The comparison table: the FRAME scrolls, never the page, and it looks
   scrollable — macOS hides overlay scrollbars, so a silent scroller reads as a
   grid that is cut off. */
.bui .ms-cmp { margin-top: var(--bui-s12); }
.bui .ms-cmphead { text-align: center; margin-bottom: var(--bui-s5); }
.bui .ms-cmphead h2 { font-size: 24px; font-weight: 900; line-height: 1.15; letter-spacing: -.026em; }
.bui .ms-cmphead p { margin: 8px auto 0; max-width: var(--bp-prose); color: var(--bui-subtle); font-size: 13.5px; line-height: 1.55; }
/* Shown where the table actually overflows. Above its min-width the whole grid
   is on screen and the sentence would be an instruction to do nothing. */
.bui .ms-cmphint { display: none; text-align: center; margin-bottom: 9px; }
@container bui (max-width: 820px) { .bui .ms-cmphint { display: block; } }

.bui .ms-cmpscroll {
  overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--bui-line);
  border-radius: var(--bui-r-lg); background: var(--bui-surface); box-shadow: var(--bui-e1);
  scrollbar-width: thin; scrollbar-color: #6b7280 #eef0f5;
}
.bui .ms-cmpscroll::-webkit-scrollbar { height: 10px; -webkit-appearance: none; appearance: none; }
.bui .ms-cmpscroll::-webkit-scrollbar-track { background: #eef0f5; border-radius: 0 0 var(--bui-r-lg) var(--bui-r-lg); }
.bui .ms-cmpscroll::-webkit-scrollbar-thumb { background: #6b7280; border-radius: 99px; border: 2px solid #eef0f5; }
.bui .ms-cmp table { width: 100%; min-width: 780px; border-collapse: collapse; font-size: 13.5px; }
.bui .ms-cmp th, .bui .ms-cmp td { padding: 13px 16px; text-align: center; border-bottom: 1px solid var(--bui-line); vertical-align: middle; }
.bui .ms-cmp tbody tr:last-child th, .bui .ms-cmp tbody tr:last-child td { border-bottom: 0; }
.bui .ms-cmp thead th { background: var(--bui-sunken); font-size: 14px; font-weight: 900; line-height: 1.2; }
.bui .ms-cmp thead th[scope="col"] { border-top: 3px solid var(--tier, var(--bui-line)); }
/* Sticky, so the capability stays readable once the columns scroll off: a cell
   of "Unlimited" with no visible row label is a number about nothing. */
.bui .ms-cmp th[scope="row"] {
  position: sticky; left: 0; z-index: 1; background: var(--bui-surface); text-align: left;
  font-weight: 700; min-width: 224px; border-right: 1px solid var(--bui-line);
  box-shadow: 3px 0 6px -4px rgba(16, 24, 40, .45);
}
/* One layer above the row labels, so the two never overlap as the frame scrolls. */
.bui .ms-cmp thead th:first-child {
  position: sticky; left: 0; z-index: 2; background: var(--bui-sunken); text-align: left;
  border-top: 3px solid transparent; border-right: 1px solid var(--bui-line);
  box-shadow: 3px 0 6px -4px rgba(16, 24, 40, .45);
}
.bui .ms-cmp tbody tr:nth-child(even) th[scope="row"], .bui .ms-cmp tbody tr:nth-child(even) td { background: #fbfcfe; }
.bui .ms-cmpnote { display: block; margin-top: 3px; font-weight: 400; font-size: 12px; color: var(--bui-subtle); line-height: 1.4; }
.bui .ms-cmpcol { display: block; margin-top: 2px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bui-muted); }
.bui .ms-cell { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.bui .ms-cell svg { width: 15px; height: 15px; }
.bui .ms-cell.is-yes { color: var(--bui-ok); font-weight: 800; }
.bui .ms-cell.is-no { color: var(--bui-subtle); font-weight: 600; }
.bui .ms-cell.is-unresolved { color: var(--bui-warn-ink); font-weight: 600; font-style: italic; }

/* The page picker (/membership/choose-page). */
.bui .cp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); gap: 13px; }
.bui .cp-page {
  display: flex; gap: 14px; padding: var(--bui-s5); border: 1.5px solid var(--bui-line-strong);
  border-radius: var(--bui-r-lg); background: var(--bui-surface); min-height: 44px; color: inherit; text-decoration: none;
  transition: border-color var(--bui-fast) var(--bui-ease-base), box-shadow var(--bui-fast) var(--bui-ease-base), transform var(--bui-fast) var(--bui-ease-base);
}
.bui a.cp-page:hover { border-color: var(--bui-brand); box-shadow: var(--bp-lift); transform: translateY(-2px); text-decoration: none; }
.bui .cp-page.is-locked { background: var(--bui-canvas); border-style: dashed; }
.bui .cp-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bui .cp-title { margin-bottom: var(--bui-s3); }
/* The picker's monogram is a size up from the directory card's: it is the only
   thing identifying a page in a list the reader is about to spend money on. */
.bui .cp-logo { width: 46px; height: 46px; border-radius: 12px; font-size: 17px; }
.bui .cp-marks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.bui .cp-go { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; padding-top: 13px; font-size: 13.5px; font-weight: 900; color: var(--bui-on-soft); }
.bui .cp-go svg { width: 15px; height: 15px; transition: transform var(--bui-fast) var(--bui-ease-base); }
.bui a.cp-page:hover .cp-go svg { transform: translateX(4px); }

@container bui (max-width: 1180px) { .bui .ms-grid { grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); } }
@container bui (max-width: 820px) { .bui .ms-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container bui (max-width: 560px) {
  .bui .ms-hero { padding: var(--bui-s8) 0 var(--bui-s5); }
  .bui .ms-hero h1 { font-size: 30px; }
  .bui .ms-grid { grid-template-columns: 1fr; }
  /* Baseline alignment across a row only matters when there is a row. */
  .bui .ms-tag { min-height: 0; }
  .bui .ms-cmp th[scope="row"] { min-width: 150px; max-width: 168px; }
  .bui .ms-cmp th, .bui .ms-cmp td { padding: 11px 12px; }
  .bui .cp-list { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .bui .ms-card, .bui .bd-card, .bui .bp-tile, .bui .cp-page { transition: none; }
  .bui .ms-card:hover, .bui .bd-card:hover, .bui .bp-tile:hover, .bui a.cp-page:hover { transform: none; }
  .bui .bp-nav a::after { transition: none; }
}

/* ── The share sheet ─────────────────────────────────────────────────────────
   A native <dialog>, so the browser owns the backdrop, Escape and the focus
   trap. The element carries `.bui` itself because a dialog is rendered in the
   top layer, outside the page's own subtree — a token declared on an ancestor
   would not reach it, and every rule below would resolve to an invalid value. */
.bui.bp-dialog {
  width: min(460px, calc(100vw - 32px)); padding: 0; border: 0;
  border-radius: var(--bui-r-xl); box-shadow: var(--bp-raise);
  color: var(--bui-ink); background: var(--bui-surface);
  /* Stated, not left to the UA sheet's `dialog:modal { margin: auto }`. One of
     the thirty legacy sheets zeroes the margin on a top-level element and the
     sheet is not even loaded on every page that opens this — the dialog then
     pins itself to the top-left corner, which is what the first screenshot of
     it showed. */
  margin: auto;
  max-height: calc(100dvh - 32px);
}
.bui.bp-dialog::backdrop { background: rgba(15, 23, 42, .48); backdrop-filter: blur(2px); }
.bui .bp-dialog-head {
  display: flex; align-items: center; justify-content: space-between; gap: var(--bui-s4);
  padding: var(--bui-s5) var(--bui-s6); border-bottom: 1px solid var(--bui-line);
}
.bui .bp-dialog-body { padding: var(--bui-s6); display: flex; flex-direction: column; gap: var(--bui-s4); }
.bui .bp-copyrow { display: flex; gap: 8px; align-items: stretch; }
.bui .bp-copyrow input { flex: 1; min-width: 0; }
.bui .bp-sharelinks { display: flex; gap: 9px; flex-wrap: wrap; }
.bui .bp-sharedqr { text-align: center; padding-top: var(--bui-s2); border-top: 1px solid var(--bui-line); }
.bui .bp-sharedqr .bp-sharelinks { justify-content: center; margin-top: var(--bui-s3); }

/* The reviews list. A real <ol>, because the order is the page's answer and a
   screen reader should be told how many there are. */
.bui .bp-revlist { display: flex; flex-direction: column; gap: var(--bui-s4); list-style: none; padding: 0; margin: 0; }

/* A SETTING, not a fault, and it must not look like one. Amber is reserved for
   "we could not read it"; this is the platform working exactly as the page's
   owner asked. Read the two side by side: "this list is private" must never
   read as "try again in a moment", because one of them is never going to
   change. */
.bui .pub-setting {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--bui-line); background: var(--bui-sunken); color: var(--bui-label);
  border-radius: var(--bui-r-md); padding: 13px 15px; font-size: 13.5px; line-height: 1.55;
}
.bui .pub-setting svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--bui-muted); }
.bui .pub-setting > span { flex: 1; min-width: 0; }

/* ── THE BOUNDARY, ONE MORE TIME ─────────────────────────────────────────────
   A bare `span { font-size: 14px }` in a legacy sheet outranks INHERITANCE from
   a `.bui .x` rule, however specific that rule is — inheritance has no
   specificity at all. It is invisible in review, because the rule that "should"
   win is right there in this file: the identity h1 computes at 32px and the
   `<span>` holding the business name inside it renders at 14, and the directory
   card's monogram renders at 14 inside a 20px frame. Both shipped that way in
   the first pass of this package.

   So: inside a public surface, a plain inline element inherits its METRICS.
   `:where()` keeps the whole selector at `.bui-public` weight, so every rule
   above that deliberately sizes a child (ms-limit b, ms-seg a small, t-small,
   vtick) still wins, and colour and weight are left entirely alone.

   Class names are written WITHOUT their leading dot in this comment on purpose:
   BusinessUiClassNamespaceTests reads selectors out of every sheet with a text
   scan, and a dotted name in prose reads to it as a bare legacy rule. */
.bui-public :where(span, b, strong, small, i, em) {
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   PAPER
   A printed directory is the list, not the chrome. The filter rail, the chip
   line and the pager are controls nobody can press on paper, so they do not
   print; and a link on paper is a name with no way back to it unless its
   address prints beside it.
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  .bui .pub-no-print { display: none !important; }

  .bui .bd-card { break-inside: avoid; box-shadow: none; }
  .bui .bd-name a[href]::after {
    content: " — partners.com.bd" attr(href);
    font-weight: 400;
    font-size: 12px;
  }
}