/* BridgeMD homepage, counter lens. Loaded after company.css and company.hero.css.
   One row sits directly above the finder card, at about the card's width: Live, the two figures and the way in.
   The two figures are flip tiles, like the cards on a scoreboard. The server draws every tile with its digit (no layout
   shift) and keeps the number as hidden text for screen readers. company.js turns a tile only when its digit changes, so a
   new application turns the ones tile, and the tens tile with it when the ones pass nine.
   Every class here starts with cx-lc or cx-fl so nothing else on the page can restyle the tiles. */

/* The right column stacks the pill over the finder card. */
body.cx-page .cx-hero-r { flex-direction: column; align-items: flex-end; justify-content: center; }

.cx-lc { container-type: inline-size; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px 22px; width: 100%; max-width: 560px; margin: 0 0 20px; padding: 0; box-sizing: border-box; font-family: var(--f-mono); font-size: 15.5px; line-height: 1.2; color: var(--text); }
.cx-lc[hidden] { display: none; }

/* Live, as plain small text */
/* Live: a small steady dot and the word, so the figures read as real and current */
.cx-lc-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ok); }
.cx-lc-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #1f9d55; box-shadow: 0 0 0 3px rgba(31, 157, 85, .16); }
.cx-lc-prev { padding: 0 8px; border-radius: 999px; background: #fdf1dc; color: #7a4f00; font-size: 13px; font-weight: 600; }
.cx-lc-prev[hidden] { display: none; }

/* The two figures, the same size, set apart by space alone */
.cx-lc-fig { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; font-weight: 500; }
.cx-lc-fig[hidden] { display: none; }
.cx-lc-num { --fl-w: 27px; --fl-h: 39px; --fl-fs: 24px; display: inline-flex; align-items: center; height: var(--fl-h); color: var(--ink); }
.cx-lc-wk { margin-left: 3px; font-size: 13px; font-weight: 600; color: var(--ok); }
.cx-lc-wk[hidden] { display: none; }
@container (max-width: 479px) { .cx-lc-wk { display: none; } }

/* Flip tiles. A tile is two cards, the top and the bottom half of one digit, with a hinge line between them. While a
   digit changes, the old top card falls forward over the tile and the new digit's bottom card swings down after it
   (company.js adds those two loose cards for the length of the turn and removes them as they land). Every card is half
   a tile tall with overflow hidden, and its digit box is a whole tile tall, so the two halves always join into one digit. */
/* Each tile is a little taller than its digit, with room on every side, so the digit sits inside the card instead of filling
   it. The top card is one step lighter than the bottom one, the way a flip card catches the light, and the hinge is a thin dark
   gap between them. */
.cx-fl { display: inline-flex; align-items: center; gap: 4px; }
.cx-fl-c { align-self: flex-end; margin: 0 1px; padding-bottom: 1px; font-size: var(--fl-fs); font-weight: 700; line-height: 1; color: var(--ink); }
.cx-fl-d { position: relative; flex: none; width: var(--fl-w); height: var(--fl-h); perspective: 200px; color: #fff; font-size: var(--fl-fs); font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0; user-select: none;
  border-radius: 6px; box-shadow: 0 1px 1px rgba(10, 26, 58, .25), 0 6px 14px -8px rgba(10, 26, 58, .55); }
.cx-fl-d::after { content: ''; position: absolute; z-index: 4; left: 0; right: 0; top: calc(50% - .5px); height: 1px; background: rgba(1, 6, 18, .7); }
.cx-fl-t, .cx-fl-b, .cx-fl-ft, .cx-fl-fb { position: absolute; left: 0; width: 100%; height: 50%; overflow: hidden; background: #0b1a3a; }
.cx-fl-t, .cx-fl-ft { top: 0; border-radius: 6px 6px 0 0; background: #142a57; }
.cx-fl-b, .cx-fl-fb { bottom: 0; border-radius: 0 0 6px 6px; }
.cx-fl-g { position: absolute; left: 0; width: 100%; height: var(--fl-h); line-height: var(--fl-h); text-align: center; }
.cx-fl-t .cx-fl-g, .cx-fl-ft .cx-fl-g { top: 0; }
.cx-fl-b .cx-fl-g, .cx-fl-fb .cx-fl-g { bottom: 0; }
.cx-fl-ft, .cx-fl-fb { z-index: 2; backface-visibility: hidden; }
.cx-fl-ft { transform-origin: 50% 100%; }
.cx-fl-fb { transform-origin: 50% 0; transform: rotateX(90deg); }

/* The way in */
.cx-lc-go { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 15px; font-weight: 600; color: var(--accent); transition: color .15s ease; }
/* The search card sits right under the figures, so the row needs no link of its own to it. */
.cx-lc .cx-lc-go { display: none; }
.cx-lc-go .ico { flex: none; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s ease; }
.cx-lc-go:hover { color: var(--accent-d); }
.cx-lc-go:hover .ico { transform: translateX(3px); }
.cx-lc-go:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
@media (pointer: coarse) { .cx-lc-go { padding: 11px 6px; margin: -11px -6px -11px auto; } }

/* First paint holds the numbers back until the script starts the first turn, so a number never shows before it turns.
   Without the script they appear after 1.8 s, so the real figures are always shown. */
@media (prefers-reduced-motion: no-preference) {
  .cx-lc:not(.is-on) .cx-lc-num { opacity: 0; animation: cxLcShow .01s linear 1.8s forwards; }
  .cx-lc.is-js:not(.is-on) .cx-lc-num { animation: none; }
}
@keyframes cxLcShow { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .cx-lc-go, .cx-lc-go .ico { transition: none; }
  .cx-lc-go:hover .ico { transform: none; }
}

/* Tablet and phone, where the column stacks under the pitch and the card starts at the left edge */
@media (max-width: 899px) {
  body.cx-page .cx-hero-r { align-items: flex-start; justify-content: flex-start; }
  .cx-lc { max-width: none; }
}
@media (max-width: 640px) {
  /* A touch smaller, so the whole line (Live, both figures, Join them) holds one row on a 390 wide phone and wraps cleanly on narrower ones. */
  .cx-lc { max-width: none; padding: 0 2px; gap: 12px 18px; font-size: 14.5px; }
  .cx-lc-live { flex-basis: 100%; justify-content: center; }        /* Live on its own line, the two figures on one row under it */
  .cx-lc-num { --fl-w: 22px; --fl-h: 32px; --fl-fs: 20px; }
  .cx-fl { gap: 3px; }
  .cx-lc-fig { gap: 8px; }
  .cx-lc-go { gap: 5px; font-size: 14.5px; }
}