/* ==========================================================================
   solutions-multi-location.css — /solutions/multi-location
   (solutions wave A, 2026-09-04; rebuilt 2026-09-05 evening on Lachlan's two
   rulings: "hugely wordy… remember, simplify" and "these blocks need to be
   polished, elevated or closer to the real product".)
   Loads after feature-v2.css, feature-v3.css, show.css and home.css.

   Six things worth knowing before editing:

   1. The hero is HeroLive and this page keeps it by decision. Nothing here
      touches .console, .feed, .kpis, .seq-strip or .float: that markup is the
      contract with feature-v2.js and feature-v2.css.
   2. The device is the ranked table. The Locations card (.ml-card) is the
      spine, and the three beats under it (.ml-row) are three more rows of the
      same table: the same 168px left gutter, the same #eef0f6 divider, and a
      marker that is the club's own Status pill. There is NO vertical hairline
      on this page — a rail down a gutter is the grammar of
      /solutions/professional-services and /solutions/healthcare, and two
      pages must not read as one. Do not add one, and do not alternate the
      rows left and right: a table does not alternate.
   3. Every screen is a port of real product code, named in the page's header
      comment. Where a value here looks odd against the rest of the site it is
      almost always the product's: the 42px react-select with its 1px #cccccc
      border and 4px radius, the 15px trigger-property labels indented 15px,
      the 24px rank badge at an 8px radius, the 40px inbox avatar with its
      18px source badge, the 32px outline combobox, the 27px rank-1 disc.
   4. Two site rules override the product inside those ports and nothing else
      does. Nothing renders under 13px (the product's captions are 11 to
      12.5px: the table headers, the delta pills, the group labels and the
      inbox meta row are all lifted to 13). Muted text is #5b6076, which
      measures 6.21:1 on white, 5.80 on --v2-card, 5.70 on --ghost and 5.65 on
      #f3f4f6; the product's #667085, #6b7280, #989898 and #9ca3af all fail.
   5. The three status tones keep the product's colour families but not its
      exact values, because two of them fail the floor: #b07a00 on #fff4d6 is
      3.40:1 and #00845a on #e4f8f0 is 4.36:1. The measured substitutes are
      #8a5a00 on #fff0cc (5.22:1), #0c7a52 on #ddf7ea (4.73:1) and #c9184a on
      #ffe3ea (4.74:1). Amber-600 #d97706 fails on white at 3.21:1 and is
      #b45309 (5.04:1) here.
   6. The table is the only thing wide enough to overflow. It scrolls inside
      .ml-scroll and the two long column headings swap to short ones under
      1080px, so the page body never scrolls sideways.
   ========================================================================== */

.ml-page { --ml-line: #e7e9f2; --ml-grid: #eef0f6; --ml-mute: #5b6076; --ml-gut: 168px; --ml-gap: clamp(26px, 3vw, 46px); }

.ml-page .v2-logos img.is-tall { max-height: 34px; }
.ml-page .v2-logos img[alt="The Lash Lounge"] { max-height: 30px; }
.ml-page .v2-logos img[alt="Frenchies"] { max-height: 17px; }
/* the shared blockquote carries a 40px browser default margin that nothing else resets */
.ml-page .tq blockquote { margin: 0; }

/* ==========================================================================
   THE SECTION HEAD. Left aligned in the copy column, so the page is not three
   centred blocks; it lines up with the table's left edge, not with the gutter.
   ========================================================================== */
.ml-head { max-width: 760px; margin-bottom: clamp(30px, 3.4vw, 44px); }
.ml-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 16px; }
.ml-links a { display: inline-flex; align-items: center; gap: 7px; font: 600 14.5px/1.4 var(--font-display); color: var(--blue); text-decoration: none; }
.ml-links a:hover { text-decoration: underline; }
.ml-links .icon { width: 15px; height: 15px; }

/* ==========================================================================
   THE SPINE: the Insights Scorecard's Locations card (LocationsCard.js).
   The window control sits ABOVE the card, because that is where the Scorecard
   tab carries it, and it is what the card's own caption means by "the period
   above".
   ========================================================================== */
.ml-spine { margin-bottom: clamp(8px, 1.4vw, 18px); }
.ml-period {
  display: flex; justify-content: flex-end; align-items: center; gap: 7px;
  margin-bottom: 12px;
}
.ml-period span {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px;
  border: 1px solid var(--ml-line); border-radius: 9px; background: #fff;
  font: 600 13px/1 var(--font-display); color: #4a5065;
}
.ml-period .icon { flex: none; width: 13px; height: 13px; color: var(--ml-mute); }

/* .card + .blk: 16px radius, 1px line, the product's two-layer shadow, 20px 22px of padding */
.ml-card {
  padding: 20px 22px;
  border: 1px solid var(--ml-line); border-radius: 16px; background: #fff;
  box-shadow: 0 1px 2px rgba(16, 18, 26, .05), 0 12px 32px -20px rgba(16, 18, 26, .22);
}
.ml-card-h { margin-bottom: 14px; }
.ml-card-h h3 { font: 800 16px/1.3 var(--font-display); letter-spacing: -.02em; color: #0b0e1a; }
.ml-digest { margin-top: 3px; font: 400 13px/1.5 var(--font-body); color: var(--ml-mute); }
/* The card's own .tableScroll. Under 780px the Status column - the whole argument - sits off the right edge, so the
   scroller carries a fade to say there is more, and takes a tab stop so it can be reached from the keyboard. No
   caption: a sentence the product does not have does not belong inside a port of it. */
.ml-scroll { position: relative; overflow-x: auto; }
@media (max-width: 780px) {
  .ml-spine { position: relative; }
  .ml-spine::after {
    content: ""; position: absolute; top: 96px; right: 1px; bottom: 74px; width: 42px; pointer-events: none;
    border-radius: 0 15px 15px 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 82%);
  }
}
.ml-lg { width: 100%; min-width: 740px; border-collapse: collapse; font-size: 13.5px; text-align: left; }
.ml-lg th, .ml-lg td { padding: 12px; }
.ml-lg thead th {
  border-bottom: 1px solid var(--ml-line);
  font: 800 13px/1.35 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ml-mute); vertical-align: bottom;
}
.ml-lg tbody th, .ml-lg tbody td {
  border-bottom: 1px solid var(--ml-grid);
  font: 400 13.5px/1.4 var(--font-body); color: #4a5065; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ml-lg tbody tr:last-child th, .ml-lg tbody tr:last-child td { border-bottom: 0; }
.ml-lg .c-name { font: 700 13.5px/1.4 var(--font-display); color: #0b0e1a; }
.ml-lg .c-abbr { display: none; }
.ml-lg thead th:first-child { width: 48px; }
/* .rankb, with the product's own 8px radius. .r1 is its warn tone, corrected to the measured pair. */
.ml-rankb {
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px;
  background: #f0f1f7; color: #4a5065; font: 800 13px/1 var(--font-display); font-variant-numeric: tabular-nums;
}
.ml-rankb.is-r1 { background: #fff0cc; color: #8a5a00; }
/* .tdelta: 11px in the product, 13 here */
.ml-td { margin-left: 5px; font: 800 13px/1 var(--font-display); }
.ml-td.is-up { color: #0c7a52; }
.ml-td.is-down { color: #c93a3a; }
.ml-td.is-flat { color: var(--ml-mute); }
/* .flagPill */
.ml-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 9px; border-radius: 99px;
  font: 700 13px/1.4 var(--font-display); white-space: nowrap;
}
.ml-pill.is-good { background: #ddf7ea; color: #0c7a52; }
.ml-pill.is-warn { background: #fff0cc; color: #8a5a00; }
.ml-pill.is-crit { background: #ffe3ea; color: #c9184a; }
/* .locMore: a ghost button, 40px tall in the product. Inert here, because the whole card is a still. */
.ml-more { display: flex; margin-top: 14px; }
.ml-more span {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 12px;
  border: 1px solid var(--ml-line); border-radius: 9px; background: #fff;
  font: 700 13px/1 var(--font-display); color: #4a5065;
}
.ml-more .icon { flex: none; width: 15px; height: 15px; color: #4a5065; }

/* ==========================================================================
   THREE MORE ROWS OF THE SAME TABLE. Marker in the gutter, two sentences, one
   screen. Same divider as the table's cells, same gutter width, so the eye
   reads the table continuing.
   ========================================================================== */
.ml-rows { margin: 0; padding: 0; list-style: none; }
.ml-row {
  display: grid;
  grid-template-columns: var(--ml-gut) minmax(0, .86fr) minmax(0, 1.14fr);
  column-gap: var(--ml-gap);
  align-items: start;
  padding: clamp(30px, 3.4vw, 46px) 0;
  border-top: 1px solid var(--ml-grid);
}
.ml-mark { grid-column: 1; }
.ml-mark em { display: block; margin-top: 10px; font-style: normal; font: 700 14px/1.35 var(--font-display); color: #0b0e1a; }
.ml-copy { grid-column: 2; }
.ml-copy h3 { font: 500 clamp(23px, 2.1vw, 27px)/1.2 var(--font-serif); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.ml-copy p { margin-top: 12px; font: 400 15.5px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty; }
.ml-copy .ml-links { margin-top: 16px; }
.ml-copy .ml-links a { color: var(--blue); }

.ml-foot {
  margin-top: clamp(30px, 3.2vw, 44px);
  margin-left: calc(var(--ml-gut) + var(--ml-gap));
  padding-top: clamp(22px, 2.4vw, 32px);
  border-top: 1px solid var(--v2-line);
  max-width: 64ch;
  font: 400 16px/1.6 var(--font-body); color: var(--v2-body); text-wrap: pretty;
}

/* ==========================================================================
   THE THREE SCREENS. One frame, three ported surfaces.
   ========================================================================== */
.ml-scr {
  grid-column: 3;
  padding: 16px;
  border-radius: 18px; background: #fff;
  box-shadow: 0 0 0 1px var(--v2-line), var(--v2-shadow);
}

/* a provider with no sprite gets its initial in a white disc (REDESIGN-COMMON rule 5) */
.ml-mk {
  flex: none; width: 25px; height: 25px; border-radius: 7px;
  display: grid; place-items: center;
  background: #fff; box-shadow: inset 0 0 0 1px var(--v2-line);
  font-style: normal; font: 700 13px/1 var(--font-display); color: #1d7a6c;
}
.ml-mk--c { color: var(--blue); }
.ml-mk--c .icon { width: 15px; height: 15px; }
/* a real vendor mark sits on the same white disc, at the Cloutly mark’s size and in its own brand colour */
.ml-mk .icon, .ml-mk .mk-logo { width: 15px; height: 15px; }
.ml-mk .mk-logo { display: block; object-fit: contain; }

/* the shadcn TabsList both the automation modal and the inbox header carry */
.ml-tabs { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 8px; background: #f1f5f9; }
.ml-tabs b, .ml-tabs i { padding: 4px 10px; border-radius: 6px; font-style: normal; font: 600 13px/1.35 var(--font-display); }
.ml-tabs b { background: #fff; color: #0b0e1a; box-shadow: 0 1px 2px rgba(16, 18, 26, .07); }
.ml-tabs i { color: var(--ml-mute); }

/* ---------- 1 · the Mindbody automation (ModalTitle + index.js + AutomationForm + Select + SelectLabel) ----------
   The modal title is `${label} Automation` over a 20px provider mark; the grey "Selected location:" line carries the
   business in an ItemDescriptionBadge; then the trigger control, its indented properties, the action control, its
   indented properties, and Submit. Every control is react-select's 42px box with a 1px #cccccc border and a 4px
   radius; the property selects are the same control at the shorter height a single value needs. */
.ml-mt { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-display); color: var(--ink); }
.ml-mt .ml-mk { width: 20px; height: 20px; border-radius: 6px; font-size: 13px; }
.ml-mt .ml-mk .icon, .ml-mt .ml-mk .mk-logo { width: 13px; height: 13px; }
.ml-mloc { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 10px; font: 400 13px/1.4 var(--font-body); color: var(--ml-mute); }
.ml-mloc { margin-bottom: 14px; }
.ml-mloc b { padding: 2px 8px; border-radius: 6px; background: var(--v2-card); font: 600 13px/1.4 var(--font-display); color: #0b0e1a; }
.ml-sel {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 6px 12px;
  border: 1px solid #cccccc; border-radius: 4px; background: #fff;
  font: 400 14.5px/1.35 var(--font-body); color: var(--ink);
}
.ml-sel > span { min-width: 0; }
.ml-sel.is-sm { min-height: 36px; }
.ml-empty { display: block; min-height: 20px; }
.ml-ok { flex: none; width: 16px; height: 16px; margin-left: auto; color: #009900; }
.ml-chev { flex: none; width: 13px; height: 13px; margin-left: auto; color: var(--ml-mute); }
/* the form indents a trigger's or an action's properties 15px under the control they belong to */
.ml-fields { margin: 12px 0 14px; padding-left: 15px; }
.ml-fields label { display: block; margin-bottom: 5px; font: 400 13.5px/1.45 var(--font-body); color: var(--ink); }
.ml-fields .ml-sel + label { margin-top: 12px; }
.ml-submit {
  display: inline-block; margin-top: 2px; padding: 9px 18px; border-radius: 9px;
  background: var(--blue); font: 600 13.5px/1 var(--font-display); color: #fff;
}

/* ---------- 2 · the inbox (InboxHeader + LocationPicker + GroupLabel + CustomerListItem) ----------
   The header's h1, its amber "{N} need response" chip and its "{reviews} · {location} · {period}" meta line; the
   Filters popover with its "Location" field over the real picker, whose default option is "All Locations"; the pinned
   uppercase "Needs response · {N}" group and "Everything else"; then the rows. */
.ml-scr--inb { padding: 0; overflow: hidden; }
.ml-inh { padding: 14px 16px; border-bottom: 1px solid #f3f4f6; }
.ml-inh-1 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ml-inh-1 b { font: 700 18px/1.2 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; }
.ml-need { flex: none; padding: 2px 10px; border-radius: 999px; background: #fff0cc; font-style: normal; font: 600 13px/1.45 var(--font-display); color: #8a5a00; font-variant-numeric: tabular-nums; }
.ml-inh-2 { margin-top: 6px; font: 500 13px/1.4 var(--font-body); color: var(--ml-mute); font-variant-numeric: tabular-nums; }
.ml-scr--inb .ml-tabs { margin-top: 12px; }
/* the Filters popover, open. w-64 with a 12px stack in the product. */
.ml-pop {
  margin: 12px 16px 0; padding: 12px; max-width: 258px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff;
  box-shadow: 0 10px 24px -14px rgba(16, 18, 26, .35);
}
.ml-pop-l { margin-bottom: 5px; font: 600 13px/1.3 var(--font-display); color: var(--ml-mute); }
.ml-combo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 32px; padding: 0 10px;
  border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
  font: 500 14px/1 var(--font-display); color: #374151;
}
.ml-combo > span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.ml-combo .icon { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ml-combo > span .icon { color: var(--ml-mute); }
.ml-updown { opacity: .5; }
.ml-combo.is-tight { height: 36px; border-color: var(--ml-line); border-radius: 9px; font: 600 13px/1 var(--font-display); color: #4a5065; }
.ml-combo.is-tight .ml-chev { margin-left: 0; }
/* GroupLabel: uppercase, bold, tracked, with the count in amber on the pinned group only */
.ml-grp { padding: 14px 16px 6px; font: 700 13px/1.3 var(--font-display); letter-spacing: .045em; text-transform: uppercase; color: var(--ml-mute); }
.ml-grp i { font-style: normal; color: #b45309; }
.ml-inb { margin: 0; padding: 0; list-style: none; }
.ml-inb > li { display: flex; align-items: flex-start; gap: 12px; padding: 16px; border-bottom: 1px solid #f3f4f6; }
.ml-inb > li.is-sel { background: rgba(0, 61, 255, .06); }
.ml-av { position: relative; flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display); }
.ml-av-mk { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.ml-av-mk .icon { width: 12px; height: 12px; }
.ml-inb-b { min-width: 0; flex: 1; }
.ml-inb-1 { display: flex; align-items: center; gap: 8px; font: 600 15px/1.35 var(--font-display); color: #111827; }
.ml-inb-1, .ml-inb-2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-inb-1 em { margin-left: auto; padding-left: 10px; font-style: normal; font: 400 13px/1.3 var(--font-body); color: var(--ml-mute); white-space: nowrap; }
.ml-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #f59e0b; }
.ml-inb-2 { display: block; margin-top: 2px; font: 400 13.5px/1.45 var(--font-body); color: var(--ml-mute); }
.ml-inb-3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 5px; font: 400 13px/1.4 var(--font-body); color: var(--ml-mute); }
.ml-stars { font-style: normal; font-size: 13px; letter-spacing: 1px; color: #f5a623; }
.ml-rep { display: inline-flex; align-items: center; gap: 4px; font-style: normal; }
.ml-rep .icon { width: 13px; height: 13px; color: #0c7a52; }

/* ---------- 3 · Staff recognition (Board + BoardRow + index.module.scss) ----------
   The page head and its two page-level filters, then the card: h2 "Leaderboard" with the window right-aligned, then
   rows with no header row and no sort control. The rank-1 disc is the product's color-mix of the primary at 12%
   behind text at 60%, resolved to hex. */
.ml-lbh { font: 700 19px/1.25 var(--font-display); letter-spacing: -.015em; color: #0b0e1a; }
.ml-lbf { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
/* one filter only in this excerpt: the board also carries a period control and a menu, which the copy does not need */
.ml-lb { border: 1px solid var(--ml-line); border-radius: 16px; overflow: hidden; }
.ml-lb-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 15px 18px 13px; border-bottom: 1px solid var(--ml-line); }
.ml-lb-h b { font: 800 15px/1.3 var(--font-display); color: #0b0e1a; }
.ml-lb-h span { font: 600 13px/1.3 var(--font-display); color: var(--ml-mute); }
/* The product's row is `34px 40px minmax(0,1fr) auto auto`: rank, avatar, who, one flex of metric slots (26px gap),
   then the 17px chevron the whole row carries because it is a link. Its board sits on a 1100px dashboard; this screen's
   column is 440px, so the metric flex takes the second grid row under the name rather than a fourth track that would
   squeeze "Club manager, Halstead" onto three lines. The only other deviation is that the slots read left there
   instead of right, because right-aligning them under a name leaves a hole. */
.ml-brow {
  display: grid; grid-template-columns: 27px 40px minmax(0, 1fr) auto;
  column-gap: 12px; row-gap: 9px; align-items: center; padding: 13px 12px 13px 10px;
}
.ml-bmet { grid-column: 3 / -1; display: flex; align-items: center; gap: 20px; }
/* ChevronRight at 17px: the sprite carries a down chevron, so it is turned a quarter */
.ml-bchev { grid-column: 4; width: 17px; height: 17px; color: var(--ml-mute); transform: rotate(-90deg); }
.ml-brow + .ml-brow { border-top: 1px solid var(--ml-line); }
.ml-bpos { grid-column: 1; font: 800 14px/1 var(--font-display); color: var(--ml-mute); text-align: center; font-variant-numeric: tabular-nums; }
.ml-brow.is-lead .ml-bpos { height: 27px; border-radius: 50%; display: grid; place-items: center; background: #e0e8ff; color: #002499; }
.ml-bav { grid-column: 2; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: #fff; font: 600 15px/1 var(--font-display); }
.ml-bwho { grid-column: 3; min-width: 0; }
.ml-bwho b { display: block; font: 700 14.5px/1.35 var(--font-display); color: #0b0e1a; }
.ml-bwho em { display: block; padding-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal; font: 400 13px/1.3 var(--font-body); color: var(--ml-mute); }
.ml-bslot { flex: none; min-width: 84px; text-align: left; }
.ml-bslot > b { display: block; font: 800 16px/1.25 var(--font-display); letter-spacing: -.01em; color: #0b0e1a; font-variant-numeric: tabular-nums; }
.ml-bslot small { display: block; padding-top: 2px; font: 400 13px/1.3 var(--font-body); color: var(--ml-mute); white-space: nowrap; }
.ml-chip { display: inline-block; padding: 3px 9px; border-radius: 6px; background: #f1f5f9; color: #475569; font: 500 13px/1.4 var(--font-display); white-space: nowrap; }
.ml-chip.is-up { background: #ddf7ea; color: #0c7a52; }
.ml-chip.is-down { background: #ffe3ea; color: #c9184a; }

/* ---------- proof: the headline and the quote share one 780px column and one left edge ---------- */
.ml-page .ml-proof .col > .h { max-width: 780px; margin: 0 auto; }
.ml-page .ml-proof { padding-bottom: 0; }
.ml-page .tq-section { padding: clamp(28px, 3vw, 40px) 0 clamp(48px, 5vw, 72px); }
.ml-page .tq blockquote p { font-size: clamp(20px, 2.1vw, 27px); line-height: 1.35; font-weight: 400; }
.ml-page .tq figcaption { margin-top: 26px; }

/* ==========================================================================
   BREAKPOINTS. Two steps for the rows, one for the table's headings.
   Under 1180px the screen drops below its copy and the gutter stays, because
   the gutter is what makes the beats read as rows. Under 992px the gutter
   closes and the marker becomes one inline line above the heading.
   ========================================================================== */
@media (max-width: 1079px) {
  .ml-lg .c-full { display: none; }
  .ml-lg .c-abbr { display: inline; }
}
@media (max-width: 1180px) {
  .ml-row { grid-template-columns: var(--ml-gut) minmax(0, 1fr); }
  .ml-scr { grid-column: 2; margin-top: 22px; max-width: 620px; }
}
@media (max-width: 991px) {
  .ml-page { --ml-gut: 0px; }
  .ml-row { grid-template-columns: minmax(0, 1fr); }
  .ml-copy, .ml-scr { grid-column: 1; }
  .ml-mark { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 10px; margin-bottom: 14px; }
  .ml-mark em { margin-top: 0; }
  .ml-copy h3 { max-width: 26ch; }
  .ml-copy p { max-width: 62ch; }
  .ml-scr { max-width: 560px; }
  .ml-foot { margin-left: 0; max-width: 66ch; }
  .ml-card { padding: 18px 16px; }
}
@media (max-width: 640px) {
  .ml-head { margin-bottom: 28px; }
  .ml-period { justify-content: flex-start; }
  .ml-lg { min-width: 660px; }
  .ml-lg th, .ml-lg td { padding: 11px 9px; }
  .ml-scr { padding: 14px; }
  .ml-scr--inb { padding: 0; }
  .ml-pop { max-width: none; margin-right: 16px; }
  .ml-inb > li { padding: 13px 12px; }
  .ml-brow { column-gap: 10px; padding: 13px 10px; }
  .ml-brow.is-lead .ml-bpos { width: 24px; height: 24px; }
  .ml-bav { width: 34px; height: 34px; font-size: 14px; }
  .ml-bmet { gap: 16px; }
}