/* ============================================================================
   BQ HEATMAPS — /heatmap
   ----------------------------------------------------------------------------
   DESIGN LANGUAGE: the homepage's, not its own.
     · square edges — homepage panels have no radius and its buttons are pinned
       to 0-1px, so nothing here is rounded either
     · white panels on a #f7fafc canvas, separated by 1px hairlines
     · a tinted #f5f8fa panel head, the same one .bq-panel__head uses
     · Lato via inherit; only figures fall back to the mono stack

   COLOUR: the chrome is achromatic on purpose. Navy is the site's furniture —
   menu bar, footer — so repeating it on segmented controls, buttons and the
   drawer made the page read as a wall of blue AND competed with the map. The
   only saturated colour on this page is the heat ramp, which is the data.
   Chrome is white/grey/graphite; blue survives only where the homepage already
   uses it, as TEXT on links (.bq-qt__sym a does the same).
   ============================================================================ */

.bq-hm {
  --hm-bg:      var(--white, #ffffff);
  --hm-canvas:  #ffffff;
  --hm-head:    var(--bq-panel-head, #f5f8fa);
  --hm-line:    var(--bq-line, #e7edf2);
  --hm-line-2:  var(--bq-line-strong, #cdd7e0);
  --hm-ink:     var(--bq-ink, #0b1f2e);
  --hm-text-2:  var(--gray-700, #4a5568);
  --hm-text-3:  var(--gray-500, #a0aec0);
  /* Graphite, not navy — this is what active controls use. */
  --hm-ctrl:    #2b3947;
  --hm-ctrl-2:  #f2f4f6;
  /* Link blue only. Never a background. */
  --hm-link:    var(--blue-primary, #00529b);
  --hm-mono:    var(--bq-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --hm-r:       0;

  /* Diverging ramp. Neutral slate midpoint so "flat" reads as absence of
     movement rather than as a colour, and the two arms separate by lightness
     as well as hue for colour-vision deficiency. */
  --hm-d4: #7a0e13; --hm-d3: #b3161c; --hm-d2: #dc2626; --hm-d1: #ef5350;
  --hm-z:  #5f6b78;
  --hm-u1: #35bd74; --hm-u2: #17a44f; --hm-u3: #0d8038; --hm-u4: #075c28;

  background: var(--hm-canvas);
  color: var(--hm-ink);
  /* 14px put the H1 hard against the navy menu bar with no breathing room, and
     a 0 bottom let the BQ-MICS panel butt into the footer. The page needs air
     at both ends, not just between its parts. */
  padding: 34px 22px 56px;
  min-height: 70vh;
  /* body is a flex column in bq-global-layout, so without growing, the section
     stops at its content height and the body colour shows underneath it. */
  flex: 1 0 auto;
  width: 100%;
}

/* bq-global-layout paints `body { background: #f2f2f2 }` for every route on the
   site. This page is white, and that grey was showing through around and below
   the section — which is the tint that survived making the section itself
   white. Scoped with :has() so it only repaints the body on routes that
   actually render the heatmap, and so this plugin does not have to reach into
   the layout plugin's stylesheet to do it. */
body:has(.bq-hm) { background: #ffffff; }
.bq-hm *, .bq-hm *::before, .bq-hm *::after { box-sizing: border-box; }
.bq-hm__inner, .bq-hm__head, .bq-hm__controls, .bq-hm__crumbs,
.bq-hm__mapwrap, .bq-hm__legend, .bq-hm__explain, .bq-hm__below { max-width: 1600px; margin-left: auto; margin-right: auto; }

/* ── HEAD ─────────────────────────────────────────────────────────────────── */

.bq-hm__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 9px; flex-wrap: wrap;
}
.bq-hm__h1 { font-size: 21px; font-weight: 700; letter-spacing: -.3px; margin: 0; color: var(--hm-ink); }
.bq-hm__sub {
  margin: 5px 0 0; font-size: 12.5px; color: var(--hm-text-2);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bq-hm__market {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--hm-line-2); border-radius: var(--hm-r); padding: 3px 9px;
  background: var(--hm-bg); color: var(--hm-text-2);
}
.bq-hm__market-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hm-text-3); }
.bq-hm__market.is-open { color: var(--hm-u3); border-color: var(--hm-u1); }
.bq-hm__market.is-open .bq-hm__market-dot { background: var(--hm-u3); }

/* The page's headline figure, right-aligned in the header. It spent one
   revision as a bordered grey card (a slab bolted to the corner) and one
   inline in the strapline (a percentage lost between two other facts). This
   is neither: no box, no fill, just type on the right edge where the eye
   lands after the title, coloured by direction. */
/* ── WHOLE-MARKET READOUT ──
   The page's headline figure, and the thing that was hardest to read on it.

   THE RED WAS THE PROBLEM. --hm-d3 is #b3161c, the third stop on the tile
   RAMP — a colour chosen to sit under white text on a filled rectangle, where
   it needs to be dark. Used as TYPE on a white page it reads closer to brown
   than red, and at 30px with -0.5px tracking the minus sign collided with the
   first digit. Ramp colours and text colours are two different jobs; this now
   uses the site's own --bq-red, which is what every other figure on the site
   turns when it falls.

   The label moved ABOVE the number, because it is read first — "whole market,
   one day" is the question and the percentage is the answer. And the block is
   bordered, so it reads as a readout rather than as loose type drifting at the
   end of the header row. */
.bq-hm__agg {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  padding: 9px 16px 10px;
  border: 1px solid var(--hm-line-2); border-radius: var(--hm-r);
  border-left: 3px solid var(--hm-line-2);
  background: var(--hm-bg);
  min-width: 168px;
}
.bq-hm__agg[data-dir="up"]   { border-left-color: var(--bq-green, #15803d); }
.bq-hm__agg[data-dir="down"] { border-left-color: var(--bq-red, #c5331f); }

.bq-hm__agg-lab {
  font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hm-text-3); white-space: nowrap;
}
.bq-hm__agg-lab span { color: var(--hm-text-2); }

.bq-hm__agg-val {
  font-family: var(--hm-mono); font-size: 27px; font-weight: 700; line-height: 1.05;
  font-variant-numeric: tabular-nums;
  /* Normal tracking. Negative letter-spacing on a mono figure that opens with
     a sign is how "-4.67%" became "‑4.67%" with the sign touching the 4. */
  letter-spacing: 0;
  color: var(--hm-text-2);
}
.bq-hm__agg[data-dir="up"]   .bq-hm__agg-val { color: var(--bq-green, #15803d); }
.bq-hm__agg[data-dir="down"] .bq-hm__agg-val { color: var(--bq-red, #c5331f); }

.bq-hm__agg-note {
  font-size: 10px; font-weight: 600; letter-spacing: .04em;
  color: var(--hm-text-3); white-space: nowrap;
}


/* Time of the last successful poll. Small, and only after the first refresh —
   before that it would be stating the obvious about a page just loaded. */
.bq-hm__updated {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--hm-text-3); margin-right: 2px; font-variant-numeric: tabular-nums;
}


/* ── CONTROLS ─────────────────────────────────────────────────────────────── */
/* Square segmented control, lifted from the homepage's .bq-seg: hairline box,
   pale fill, one dark active cell. Active is GRAPHITE, not the menu navy. */

/* TWO CONTROLS THAT LOOK LIKE TWO CONTROLS.
   Period and Group-by were identical segmented strips 8px apart, so eleven
   buttons read as one eleven-cell control and nothing said which half did
   what. Each now carries a label above it and the pair is split by a vertical
   rule — the two cheapest devices that turn one row into two groups. */
.bq-hm__controls {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 10px; padding-bottom: 12px;
  border-bottom: 1px solid var(--hm-line-2);
}
.bq-hm__ctrl { display: flex; flex-direction: column; gap: 5px; }
.bq-hm__ctrl-lab {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--hm-text-3);
}
.bq-hm__ctrl-div { width: 1px; align-self: stretch; margin: 0 2px; background: var(--hm-line-2); }

.bq-hm__seg { display: flex; border: 1px solid var(--hm-line-2); border-radius: var(--hm-r); overflow: hidden; }
.bq-hm__seg-btn {
  padding: 6px 12px; border: 0; border-right: 1px solid var(--hm-line-2);
  background: var(--hm-ctrl-2); cursor: pointer;
  font-family: inherit; font-size: 11px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--hm-text-2);
  transition: background .12s, color .12s;
  /* NEVER WRAP. "Industry group" is the longest label in either control and
     the only one that breaks: given 65px it wrapped to two lines and stood the
     whole Group-by strip 40px tall against Period's 28px, so the two controls
     no longer shared a baseline and the taller one looked like a mistake.
     Below, the strip scrolls sideways rather than letting any label break. */
  white-space: nowrap;
}
.bq-hm__seg-btn:last-child { border-right: 0; }
.bq-hm__seg-btn:hover { background: #e3e9ef; color: var(--hm-ink); }
.bq-hm__seg-btn.is-active { background: var(--hm-ctrl); color: #fff; }
.bq-hm__seg-btn:focus-visible { outline: 2px solid var(--hm-ctrl); outline-offset: -2px; }

/* The tools sit on the baseline of the two segmented controls, not of their
   labels, so all three rows of buttons line up. */
.bq-hm__tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }

.bq-hm__icon-btn {
  width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--hm-line-2); border-radius: var(--hm-r); background: var(--hm-bg);
  color: var(--hm-text-2); cursor: pointer; transition: background .12s, color .12s;
}
.bq-hm__icon-btn:hover { background: var(--hm-ctrl-2); color: var(--hm-ink); }
.bq-hm__icon-btn svg { width: 16px; height: 16px; }
.bq-hm__icon-btn.is-busy svg { animation: bq-hm-spin .7s linear infinite; }
@keyframes bq-hm-spin { to { transform: rotate(360deg); } }

.bq-hm__btn {
  padding: 8px 16px; border: 1px solid var(--hm-line-2); border-radius: var(--hm-r);
  background: var(--hm-bg); font-family: inherit; font-size: 11.5px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--hm-text-2); cursor: pointer;
}
.bq-hm__btn:hover { background: var(--hm-ctrl); border-color: var(--hm-ctrl); color: #fff; }

/* ── BREADCRUMBS ──────────────────────────────────────────────────────────── */

.bq-hm__crumbs { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 12px; margin-bottom: 7px; }
.bq-hm__crumbs[hidden] { display: none; }
.bq-hm__crumb {
  border: 0; background: none; cursor: pointer; padding: 3px 6px; border-radius: var(--hm-r);
  font-family: inherit; font-size: 12px; font-weight: 700; color: var(--hm-link);
}
.bq-hm__crumb:hover { background: var(--hm-ctrl-2); }
.bq-hm__crumb[aria-current="page"] { color: var(--hm-text-2); cursor: default; }
.bq-hm__crumb-sep { color: var(--hm-text-3); }

/* ── MAP ──────────────────────────────────────────────────────────────────── */

.bq-hm__mapwrap { position: relative; }

/* THE MAP'S HEIGHT IS A STYLESHEET FACT, AND THAT IS THE WHOLE POINT.
   -----------------------------------------------------------------
   It used to be a JavaScript fact: mapHeight() computed
   min(560, innerHeight - top - 108) and wrote it onto the element after the
   page had already painted. Nothing on the server knew that number, so the
   first paint was whatever the pre-layout flex wrap came to — MEASURED at
   3,153px for 84 tiles on a 375px viewport, against the 403px the script then
   imposed. A 2,750px collapse, on every single load, a few hundred
   milliseconds late: the "heatmap keeps changing dimensions for three or four
   seconds" bug, and a catastrophic CLS score on the one page most likely to
   be opened on a phone.

   Now the height is declared here, mapHeight() READS IT BACK (see heatmap.js),
   and the box the browser paints first is the box the treemap is laid out
   into. There is nothing left to shift, and the fix cannot drift apart the way
   two copies of a formula would — there is only one copy, and it is this one.

   svh, not vh: on iOS Safari `vh` is the height with the URL bar RETRACTED, so
   a vh-sized map is taller than the screen on arrival and shrinks as you
   scroll — reintroducing by another route exactly the resizing this removes.
   The vh fallback on the line above serves engines without svh. */
.bq-hm {
  --hm-map-h: clamp(320px, calc(100vh - 340px), 560px);
}
.bq-hm__map {
  position: relative; width: 100%;
  height: var(--hm-map-h);
  background: var(--hm-bg); border: 1px solid var(--hm-line-2); border-radius: var(--hm-r);
  overflow: hidden;
}
/* BEFORE JS: normal flow, readable and indexable. AFTER: .is-laid-out switches
   to absolute and the treemap supplies the geometry.

   align-content:flex-start so the clipped pre-layout rows stack from the top
   rather than distributing themselves down a box they overflow — what is
   visible in that first frame should be the largest tiles, which are first. */
.bq-hm__map:not(.is-laid-out) {
  display: flex; flex-wrap: wrap; align-content: flex-start; gap: 1px; padding: 1px;
}
.bq-hm__map:not(.is-laid-out) .bq-hm__tile { flex: 1 1 150px; min-height: 74px; position: relative; }
.bq-hm__map.is-laid-out .bq-hm__tile { position: absolute; }

/* ── THE PRE-LAYOUT STATE IS NOT SHOWN TO A JS VISITOR ────────────────────
   render() in heatmap.js REPLACES el.map.innerHTML wholesale and only then
   adds .is-laid-out, and the script is enqueued in the footer. So the browser
   painted 448 server-rendered tiles in the flex fallback above, and the
   visitor then watched every one of them be discarded and re-laid-out
   absolutely — a full visible re-layout of the map on every single load.
   That is the jump on this page. The layout-shift API scores it at 0, because
   the map's own box never changes size (height is var(--hm-map-h), overflow
   hidden) and replaced nodes are not shift sources, which is exactly why it
   has to be fixed by looking at the page rather than at the metric.

   Hiding costs nothing: the box is already the right size, so nothing moves —
   it is simply empty for the few milliseconds until the footer script runs,
   instead of showing a layout that is about to be thrown away.

   The fallback still exists for a visitor who will never get the treemap; see
   the <noscript> in templates/heatmap.php. The server-rendered tiles are in
   the HTML regardless, so crawlers are unaffected either way. */
.bq-hm__map:not(.is-laid-out) { visibility: hidden; }

/* VISIBILITY, NOT OPACITY, AND NOT A TRANSITION.
   The first version of this was `opacity:0` flipping to `opacity:1` with a
   .16s fade. It left the map permanently invisible: the transition entered a
   running state and never settled, and because a running transition outranks
   every other origin in the cascade — inline styles included — even
   `map.style.opacity = '1'` still computed 0. A property that has to animate
   to become correct is a property that can get stuck being wrong.
   `visibility` needs no keyframe: the moment .is-laid-out lands the rule stops
   matching and the element is simply visible again. */

.bq-hm__tile {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 6px; overflow: hidden; cursor: pointer;
  border: 1px solid rgba(255,255,255,.2);
  color: #fff; text-align: center;
  transition: filter .12s, box-shadow .12s;
}
.bq-hm__tile:hover { filter: brightness(1.13); z-index: 3; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); }
.bq-hm__tile:focus-visible { outline: none; z-index: 4; box-shadow: inset 0 0 0 3px #fff; }
.bq-hm__tile.is-dim { opacity: .16; }

.bq-hm__tile-name {
  font-size: 12px; font-weight: 700; line-height: 1.15;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
}
.bq-hm__tile-chg {
  font-family: var(--hm-mono); font-size: 12px; font-weight: 700;
  font-variant-numeric: tabular-nums; margin-top: 2px;
  text-shadow: 0 1px 2px rgba(0,0,0,.24);
}
.bq-hm__tile-meta { font-size: 9.5px; opacity: .84; margin-top: 1px; white-space: nowrap; }

/* Size classes come from measured geometry, applied by JS (see render()).
   Each step down drops the least important line, and the PADDING comes down
   with it — 6px of padding on a 28px tile leaves 16px for a four-letter
   ticker, which is why small tiles truncated to "PY…" even when the tile
   itself had room for the whole thing. */
.bq-hm__tile.is-sm .bq-hm__tile-meta { display: none; }
.bq-hm__tile.is-xs { padding: 2px; }
.bq-hm__tile.is-xs .bq-hm__tile-meta,
.bq-hm__tile.is-xs .bq-hm__tile-chg { display: none; }
.bq-hm__tile.is-xs .bq-hm__tile-name { font-size: 10px; }
/* The smallest tile that can still say what it is. */
.bq-hm__tile.is-micro { padding: 1px; }
.bq-hm__tile.is-micro .bq-hm__tile-meta,
.bq-hm__tile.is-micro .bq-hm__tile-chg { display: none; }
.bq-hm__tile.is-micro .bq-hm__tile-name {
  font-size: 8px; letter-spacing: -.2px; text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
/* Genuinely below the size of a legible word: colour only. */
.bq-hm__tile.is-tiny > * { display: none; }

/* ── THE RAMP — the only saturated colour on the page ─────────────────────── */

.bq-hm-d4 { background: var(--hm-d4); }
.bq-hm-d3 { background: var(--hm-d3); }
.bq-hm-d2 { background: var(--hm-d2); }
.bq-hm-d1 { background: var(--hm-d1); }
.bq-hm-z  { background: var(--hm-z); }
.bq-hm-u1 { background: var(--hm-u1); }
.bq-hm-u2 { background: var(--hm-u2); }
.bq-hm-u3 { background: var(--hm-u3); }
.bq-hm-u4 { background: var(--hm-u4); }


/* ── STATES ───────────────────────────────────────────────────────────────── */

.bq-hm__empty, .bq-hm__state {
  max-width: 1600px; margin: 0 auto; padding: 40px 20px; text-align: center;
  color: var(--hm-text-2); font-size: 13px;
  background: var(--hm-bg); border: 1px solid var(--hm-line-2);
}
.bq-hm__empty[hidden] { display: none; }
.bq-hm__state--err p { color: var(--hm-d3); margin: 0 0 14px; line-height: 1.6; }
.bq-hm__loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.66); z-index: 5;
}
.bq-hm__loading[hidden] { display: none; }
.bq-hm__loading span {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2.5px solid var(--hm-line-2); border-top-color: var(--hm-ctrl);
  animation: bq-hm-spin .7s linear infinite;
}

/* ── LEGEND ───────────────────────────────────────────────────────────────── */

.bq-hm__legend {
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  font-size: 10px; color: var(--hm-text-3); margin-top: 7px;
}
.bq-hm__legend-sw { width: 26px; height: 10px; }
.bq-hm__legend-cap { font-family: var(--hm-mono); margin: 0 6px; }
.bq-hm__legend-note { margin-left: 14px; letter-spacing: .2px; }

/* ── BQ-MICS ──────────────────────────────────────────────────────────────── */
/* A single band, read left to right: three figures, then one paragraph, then
   one action. It sat as a stack of paragraphs with the numbers buried at the
   end; the figures are the claim, so they go first and the prose earns its
   place by being short enough to finish. */

/* ── BQ-MICS PANEL ────────────────────────────────────────────────────────── */
/* A calm explainer, not another dense data module. It sits well clear of the
   legend so it reads as a separate thought, its chrome is one hairline and a
   tinted head rather than a grid of boxed figures, and the interior padding is
   generous enough that the text is never crowded against an edge. */

/* ── BQ-MICS PANEL ──────────────────────────────────────────────────────── */
.bq-hm__mics-panel {
  background: var(--hm-bg); border: 1px solid var(--hm-line);
  border-radius: var(--hm-r); max-width: 900px;
}
.bq-hm__mics-head {
  padding: 13px 32px; background: var(--hm-head);
  border-bottom: 1px solid var(--hm-line);
}
.bq-hm__mics-head h2 {
  margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -.1px;
  color: var(--hm-ink); text-transform: none;
}
.bq-hm__mics-body { padding: 26px 32px 28px; }

.bq-hm__mics-lede {
  margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--hm-ink);
}
.bq-hm__mics-lede strong { font-weight: 700; letter-spacing: -.1px; }
.bq-hm__mics-copy {
  margin: 0 0 24px; font-size: 14px; line-height: 1.7;
  color: var(--hm-text-2); max-width: 68ch;
}

/* Figures read as a quiet row of facts. The old version boxed each one in its
   own bordered cell, which gave four small numbers the visual weight of a
   dashboard they are not. */
/* GRID, NOT WRAPPING FLEX — this is what makes the four figures reflow
   4 -> 2x2 -> 2 rather than dropping to one per row.
   The flex version used `flex: 1 1 0` with `min-width: 120px`, so once the
   panel was narrower than ~500px no two items could both satisfy the 120px
   basis and every figure took its own line: four rows of one number, each
   with most of the row empty. auto-fit with a 96px floor holds two per row
   down to ~210px of panel, narrower than any phone this renders on. */
.bq-hm__mics-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 0 16px; margin: 0 0 24px;
  border-top: 1px solid var(--hm-line); border-bottom: 1px solid var(--hm-line);
}
.bq-hm__fig {
  min-width: 0; padding: 14px 12px 14px 0;
  display: flex; flex-direction: column-reverse; gap: 3px;
}
.bq-hm__fig dd {
  margin: 0; font-family: var(--hm-mono); font-size: 22px; font-weight: 700;
  line-height: 1; color: var(--hm-ink); font-variant-numeric: tabular-nums;
}
.bq-hm__fig dt {
  font-size: 10px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--hm-text-3);
}

.bq-hm__mics-link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border: 1px solid var(--hm-line-2); border-radius: var(--hm-r);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--hm-ink); text-decoration: none;
  transition: background .12s, color .12s, border-color .12s;
}
.bq-hm__mics-link:hover { background: var(--hm-ctrl); border-color: var(--hm-ctrl); color: #fff; }
.bq-hm__mics-link svg { width: 15px; height: 15px; transition: transform .12s; }
.bq-hm__mics-link:hover svg { transform: translateX(2px); }

/* ── BELOW THE MAP ────────────────────────────────────────────────────────
   Two rows: four explainer cards across the full width, then the BQ-MICS
   panel beside the FAQ.

   THE FIRST ARRANGEMENT WAS WRONG AND IT IS WORTH SAYING WHY. All of this
   copy went into one column next to the panel; measured on the page that
   column was 1107px tall against the panel's 389px, leaving a 717px hole and
   putting a wall of prose in a 630px gutter. Four short cards across the top
   fixes both: each idea is its own block, the row self-balances, and what
   remains below (panel + FAQ) are two blocks of near-identical height. */

.bq-hm__explain { margin-top: 46px; }

.bq-hm__sec-h2 {
  margin: 0 0 14px; font-size: 15px; font-weight: 700; letter-spacing: -.1px;
  color: var(--hm-ink);
}

/* auto-fit, so 4 -> 3 -> 2 -> 1 happens on available width rather than on
   breakpoints this file would then have to keep in step with the map's. */
.bq-hm__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px;
}
.bq-hm__card {
  background: var(--hm-bg); border: 1px solid var(--hm-line);
  border-radius: var(--hm-r); padding: 16px 18px 18px; min-width: 0;
}
.bq-hm__card h3 {
  margin: 0 0 7px; font-size: 12.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--hm-ink);
}
.bq-hm__card p {
  margin: 0; font-size: 13px; line-height: 1.65; color: var(--hm-text-2);
}
.bq-hm__card p strong { color: var(--hm-ink); font-weight: 700; }

/* 1.35fr : 1fr rather than 900px : 1fr — a fixed first column starves the
   second at intermediate widths (at 1200px the FAQ would have had ~270px),
   whereas a ratio keeps both readable down to the breakpoint. */
.bq-hm__below {
  margin-top: 26px;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
/* The panel fills its column instead of capping at 900px — at a 1600px
   container that column IS ~900px, so nothing moves on a wide screen. */
.bq-hm__below .bq-hm__mics { margin-top: 0; max-width: none; }
.bq-hm__below .bq-hm__mics-panel { max-width: none; }

.bq-hm__faqcol { min-width: 0; }
.bq-hm__faq { border-top: 1px solid var(--hm-line); }
.bq-hm__faq-item { border-bottom: 1px solid var(--hm-line); }
.bq-hm__faq-q {
  list-style: none; cursor: pointer; padding: 12px 28px 12px 0; position: relative;
  font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--hm-ink);
}
.bq-hm__faq-q::-webkit-details-marker { display: none; }
/* Chevron in CSS, so there is no icon asset to keep in step. */
.bq-hm__faq-q::after {
  content: ''; position: absolute; right: 4px; top: 50%;
  width: 7px; height: 7px; margin-top: -5px;
  border-right: 2px solid var(--hm-text-3); border-bottom: 2px solid var(--hm-text-3);
  transform: rotate(45deg); transition: transform .15s;
}
.bq-hm__faq-item[open] .bq-hm__faq-q::after { transform: rotate(-135deg); margin-top: -2px; }
.bq-hm__faq-q:hover { color: var(--hm-ctrl); }
.bq-hm__faq-q:focus-visible { outline: 2px solid var(--hm-ctrl); outline-offset: 2px; }
.bq-hm__faq-a p { margin: 0 0 13px; font-size: 13px; line-height: 1.7; color: var(--hm-text-2); }

@media (max-width: 1100px) {
  .bq-hm__below { grid-template-columns: 1fr; gap: 26px; }
}

/* ── DRILL-DOWN DRAWER ────────────────────────────────────────────────────── */

.bq-hm__scrim { position: fixed; inset: 0; background: rgba(11,31,46,.4); z-index: 998; animation: bq-hm-fade .15s ease; }
.bq-hm__scrim[hidden] { display: none; }
@keyframes bq-hm-fade { from { opacity: 0; } }

.bq-hm__drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--hm-bg); border-left: 1px solid var(--hm-line-2);
  box-shadow: -10px 0 34px rgba(11,31,46,.16);
  z-index: 999; display: flex; flex-direction: column;
  animation: bq-hm-slide .18s cubic-bezier(.22,.61,.36,1);
}
.bq-hm__drawer[hidden] { display: none; }
@keyframes bq-hm-slide { from { transform: translateX(18px); opacity: .4; } }

.bq-hm__drawer-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 20px; background: var(--hm-head); border-bottom: 1px solid var(--hm-line-2);
}
.bq-hm__drawer-eyebrow {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--hm-text-3); margin-bottom: 3px;
}
.bq-hm__drawer-head h3 { margin: 0; font-size: 16px; letter-spacing: -.1px; }
.bq-hm__drawer-body { flex: 1; overflow-y: auto; }

.bq-hm__stats { display: flex; padding: 13px 20px; border-bottom: 1px solid var(--hm-line); }
.bq-hm__stat { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.bq-hm__stat-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hm-text-3); }
.bq-hm__stat-val { font-family: var(--hm-mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; background: none !important; }

.bq-hm__ctable { width: 100%; border-collapse: collapse; table-layout: fixed; }
.bq-hm__ctable th {
  position: sticky; top: 0; background: var(--hm-head); z-index: 1;
  font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--hm-text-3); text-align: right; padding: 8px 12px;
  border-bottom: 1px solid var(--hm-line-2); white-space: nowrap; cursor: pointer; user-select: none;
}
.bq-hm__ctable th:first-child, .bq-hm__ctable th:nth-child(2) { text-align: left; }
.bq-hm__ctable th.is-sorted { color: var(--hm-ink); }
.bq-hm__ctable th:hover { color: var(--hm-text-2); }
.bq-hm__ctable td {
  padding: 8px 12px; border-bottom: 1px solid var(--hm-line); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bq-hm__ctable tbody tr:hover { background: var(--bq-row-hover, #f4f8fb); }
.bq-hm__c-sym { width: 76px; }
.bq-hm__c-sym a { font-family: var(--hm-mono); font-size: 12px; font-weight: 700; color: var(--hm-link); text-decoration: none; }
.bq-hm__c-sym a:hover { text-decoration: underline; }
.bq-hm__c-name { color: var(--hm-text-3); }
.bq-hm__c-num { text-align: right; font-family: var(--hm-mono); font-size: 12px; font-variant-numeric: tabular-nums; width: 86px; }
.bq-hm__c-chg { text-align: right; font-family: var(--hm-mono); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; width: 78px; }
.bq-hm__c-chg.is-up { color: var(--hm-u3); }
.bq-hm__c-chg.is-down { color: var(--hm-d3); }
.bq-hm__c-chg.is-flat { color: var(--hm-text-3); }

/* ── TOOLTIP ──────────────────────────────────────────────────────────────── */

.bq-hm__tip {
  position: fixed; z-index: 1000; pointer-events: none; opacity: 0;
  transform: translateY(3px); transition: opacity .1s, transform .1s;
  background: var(--hm-bg); border: 1px solid var(--hm-line-2); border-radius: var(--hm-r);
  box-shadow: 0 8px 26px rgba(11,31,46,.15); padding: 10px 13px;
  min-width: 190px; max-width: 290px;
}
.bq-hm__tip.is-open { opacity: 1; transform: translateY(0); }
.bq-hm__tip-name { font-size: 13px; font-weight: 700; margin-bottom: 1px; }
.bq-hm__tip-path { font-size: 10px; color: var(--hm-text-3); margin-bottom: 7px; letter-spacing: .3px; }
.bq-hm__tip-row { display: flex; justify-content: space-between; gap: 14px; font-size: 11.5px; line-height: 1.7; }
.bq-hm__tip-row span:first-child { color: var(--hm-text-3); }
.bq-hm__tip-row span:last-child { font-family: var(--hm-mono); font-variant-numeric: tabular-nums; font-weight: 600; }
.bq-hm__tip-hint { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--hm-line); font-size: 10px; color: var(--hm-text-3); }

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .bq-hm { padding: 22px 14px 40px; }
  .bq-hm__h1 { font-size: 20px; }

  .bq-hm__head { align-items: flex-start; gap: 12px; }
  .bq-hm__titles { flex: 1 1 100%; }
  /* The strapline is four facts on one line at desktop width; on a phone it
     wraps, and the separator rules would land at the start of a wrapped line. */
  .bq-hm__sub { gap: 7px; }
  /* Header is a two-column flex at desktop width; on a phone the title wraps,
     so the figure sits under it left-aligned rather than orphaned right. */
  /* On a phone the readout goes back to a single line — label, figure, note
     side by side — because a three-line block at the top of a narrow screen
     pushes the map itself below the fold. */
  .bq-hm__agg {
    flex-direction: row; align-items: baseline; gap: 8px; flex-wrap: wrap;
    min-width: 0; padding: 7px 12px 8px;
  }
  .bq-hm__agg-val  { font-size: 21px; }
  .bq-hm__agg-lab  { font-size: 9px; }
  .bq-hm__agg-note { display: none; }

  .bq-hm__controls { gap: 10px; }
  .bq-hm__ctrl-div { display: none; }

  .bq-hm__tools { margin-left: auto; }
  .bq-hm__seg-btn { padding: 7px 10px; font-size: 10px; letter-spacing: .3px; }
  .bq-hm__legend-note { flex-basis: 100%; margin: 6px 0 0; }

  /* Panel keeps its air but stops wasting a third of a narrow screen on it.
     Stats go two-up rather than four-across, which at 360px was 90px a column. */
  .bq-hm__explain { margin-top: 32px; }
  .bq-hm__below { margin-top: 22px; }
  .bq-hm__sec-h2 { font-size: 14.5px; }
  .bq-hm__cards { gap: 12px; }
  .bq-hm__card { padding: 14px 16px 16px; }
  .bq-hm__faq-a p, .bq-hm__faq-q { font-size: 12.75px; }

  /* THE HEADLINE FIGURE TAKES THE ROW IT IS ALREADY ON.
     .bq-hm__titles is flex:1 1 100% here, so the readout wraps onto its own
     line — where it then shrink-wrapped to ~180px and left the rest of the
     row empty. Spanning it and pushing the value to the far edge turns that
     dead space into the gap between label and figure. */
  .bq-hm__agg { flex: 1 1 100%; justify-content: space-between; }
  .bq-hm__mics-head { padding: 12px 18px; }
  .bq-hm__mics-body { padding: 20px 18px 22px; }
  .bq-hm__mics-lede { font-size: 14.5px; }
  .bq-hm__mics-copy { font-size: 13.5px; margin-bottom: 20px; }
  .bq-hm__mics-stats { gap: 0 12px; }
  .bq-hm__fig { padding: 12px 10px 12px 0; }
  .bq-hm__fig dd { font-size: 20px; }
  .bq-hm__mics-link { width: 100%; justify-content: center; }
}

/* Segmented controls are the first thing to overflow on a phone. They now
   SCROLL rather than wrap: see the note on .bq-hm__seg-btn's white-space. */
@media (max-width: 560px) {
  .bq-hm__controls { gap: 8px; }

  /* Each control takes the full row, and its buttons scroll inside it.
     `flex: 1 1 100%` with `flex: 1` buttons was the old answer and it is what
     produced the two-line "Industry / group" label — four buttons dividing
     347px gives 86px each, and INDUSTRY GROUP needs 95px at the old type size.
     Tighter type gets it to ~78px so nothing scrolls in practice on a 375px
     phone; the scroll container is the guarantee for the 320px ones, where a
     strip that scrolls is strictly better than a strip that breaks. */
  .bq-hm__seg {
    flex: 1 1 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bq-hm__seg::-webkit-scrollbar { display: none; }
  .bq-hm__seg-btn {
    flex: 1 0 auto;
    padding: 9px 8px; font-size: 9.5px; letter-spacing: 0;
  }

  .bq-hm__agg-val { font-size: 20px; }

  /* THE THREE TOOL BUTTONS NO LONGER GET A ROW OF THEIR OWN.
     Each segmented strip is flex:1 1 100% here, so `margin-left:auto` on the
     tools pushed them onto a fourth line — three 31px buttons alone against
     ~250px of white. As a two-column grid they sit beside Period, which needs
     the least width of the two strips, and Group by keeps the full width its
     longer labels want. */
  .bq-hm__controls {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 10px;
    align-items: end;
  }
  .bq-hm__ctrl:nth-child(1) { grid-column: 1; grid-row: 1; }
  .bq-hm__ctrl:nth-child(3) { grid-column: 1 / -1; grid-row: 2; }
  .bq-hm__tools { grid-column: 2; grid-row: 1; margin-left: 0; }
  /* Sector captions cost 17px of height each; on a phone that is most of a
     small block, so the stock level shows fewer, larger tiles instead. */
  .bq-hm__grp span { font-size: 8px; }
  .bq-hm__cards { gap: 10px; }
  .bq-hm__card { padding: 13px 14px 15px; }
}

/* ── PHONE ────────────────────────────────────────────────────────────────
   A treemap is the one chart type that does NOT degrade by being made
   smaller: halve the width and every tile loses three quarters of its area,
   so the labels go first and what is left is a colour field. The desktop
   ceiling of 560px is therefore wrong on a phone in the other direction — the
   map wants MORE of the screen, not the same amount.

   These blocks give it roughly two thirds of the viewport and take the
   surrounding chrome down to match, so the map is the thing on screen rather
   than the thing under the controls. */
@media (max-width: 900px) {
  .bq-hm { --hm-map-h: clamp(360px, calc(100vh - 300px), 620px); }
}
@media (max-width: 560px) {
  .bq-hm { --hm-map-h: 66vh; }

  /* Tools drop to their own row rather than squeezing the Group-by strip. */
  .bq-hm__tools { margin-left: 0; width: 100%; justify-content: flex-end; }

  /* Tile type: one step down so a 60x40 tile still says something. The
     is-xs / is-tiny rules already strip lines by measured area; this only
     changes what the surviving line looks like. */
  .bq-hm__tile { padding: 4px; }
  .bq-hm__tile-name { font-size: 10.5px; }
  .bq-hm__tile-chg  { font-size: 10.5px; }
  .bq-hm__tile-meta { display: none; }

  /* The legend is nine swatches, two captions and a sentence. On a phone the
     sentence is the part that wraps into three lines and pushes the BQ-MICS
     panel down; the swatches alone carry the meaning. */
  .bq-hm__legend { gap: 1px; margin-top: 9px; }
  .bq-hm__legend-sw { width: 100%; flex: 1 1 0; min-width: 0; height: 9px; }
  .bq-hm__legend-cap { margin: 0 4px; font-size: 9.5px; }
  .bq-hm__legend-note { font-size: 9.5px; line-height: 1.5; }

  /* Full-width sheet. `min(560px, 94vw)` left a 6vw dead strip on the left of
     a phone that did nothing but show the scrim. */
  .bq-hm__drawer { width: 100%; border-left: 0; }
  .bq-hm__drawer-head { padding: 13px 16px; }
  .bq-hm__drawer-head h3 { font-size: 15px; }
  .bq-hm__stats { padding: 12px 16px; gap: 10px; }
  .bq-hm__stat-val { font-size: 13.5px; }
}

@media (hover: none) { .bq-hm__tip { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .bq-hm__drawer, .bq-hm__scrim { animation: none; }
  .bq-hm__icon-btn.is-busy svg, .bq-hm__loading span { animation-duration: 2s; }
}


/* ── PARENT FRAMES (every level below sector) ─────────────────────────────── */
/* Tiles are packed inside their parent's rectangle at every level: stocks
   inside their industry, industries inside their group, groups inside their
   sector. See PARENT_KEY in heatmap.js.
   The frame is chrome — it is never clickable and never takes a ramp colour,
   or it would compete with the data it contains. */
.bq-hm__grp {
  position: absolute; background: var(--hm-head);
  border: 1px solid var(--hm-line-2); pointer-events: none; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease;
}

/* THE HOVERED BLOCK. Hovering any tile lights the whole parent block it sits
   in — an industry at stock level, an industry group at industry level, a
   sector at group level. It answers "which industry is this in?" at a glance
   instead of forcing a reader to find the caption.

   THE FRAME IS NEVER LIFTED. It used to take `z-index: 1` when hot, and that
   was the bug behind blocks going blank on hover: the frame is an ordinary
   absolutely-positioned sibling that happens to be painted BEFORE its own
   tiles, and it carries a solid `background: var(--hm-head)`. Give it a
   z-index and it jumps in front of the very tiles it contains and fills the
   block with flat header colour. The hovered tile itself survived only
   because :hover lifts it to z-index 3; every one of its neighbours vanished.
   An inset ring on the frame had the same problem in reverse — drawn under
   the tiles, it was invisible wherever it mattered.

   So the frame only changes its 1px border and its caption colour, both of
   which sit in the gutter the tiles do not cover, and the ring is drawn by a
   separate overlay element above everything. See .bq-hm__ring below. */
.bq-hm__grp.is-hot {
  border-color: var(--hm-ink, #17222c);
}
.bq-hm__grp.is-hot span { color: var(--hm-ink, #17222c); }

/* THE HIGHLIGHT RING.
   One element, moved over whichever block is hot. It is above every tile
   (tiles reach z-index 4 on focus) so it is never occluded, and it has NO
   background of its own, so it cannot occlude anything either — which is the
   whole point. pointer-events:none keeps it out of hit-testing; without that
   it would sit under the cursor, steal the mouseover, and the highlight would
   flicker on and off as the two fought over the pointer. */
.bq-hm__ring {
  position: absolute;
  display: none;
  z-index: 6;
  pointer-events: none;
  background: none;
  box-shadow: inset 0 0 0 2px var(--hm-ink, #17222c);
}
.bq-hm__ring.is-on { display: block; }
.bq-hm__grp span {
  position: absolute; left: 5px; top: 3px; right: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--hm-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── CHANGE FLASH ─────────────────────────────────────────────────────────── */
/* Fires only on tiles whose number actually moved between polls, so the eye is
   drawn to what changed rather than to the fact that a refresh happened. */
@keyframes bq-hm-flash-up   { from { box-shadow: inset 0 0 0 2px #b6f7d0; } to { box-shadow: inset 0 0 0 2px transparent; } }
@keyframes bq-hm-flash-down { from { box-shadow: inset 0 0 0 2px #ffd0d0; } to { box-shadow: inset 0 0 0 2px transparent; } }
.bq-hm__tile.is-flash-up   { animation: bq-hm-flash-up 1.4s ease-out 1; }
.bq-hm__tile.is-flash-down { animation: bq-hm-flash-down 1.4s ease-out 1; }

/* ── FULLSCREEN ───────────────────────────────────────────────────────────── */
/* The map should own the screen, so everything that is not the map or its
   controls steps out — the explainer panel especially. */
/* ── FULLSCREEN ──
   The container went fullscreen and the map did not: the map's own height is
   computed in JS and was capped at 560px, so the tiles stayed exactly the size
   they had been inside a full-viewport white box. mapHeight() in heatmap.js
   now drops that ceiling while .is-fullscreen is set — the fix is there,
   because the height is a measurement, not a style.

   What is left here is the chrome around it: everything that is not the map
   gets out of the way, and nothing scrolls. overflow:hidden rather than auto
   is deliberate — in fullscreen there is nothing below the map to scroll to,
   and a scrollbar appearing over a treemap is the map losing a column of
   tiles. */
/* GRID, NOT FLEX, and the reason is worth writing down.

   The map's height is read from its wrapper (see mapHeight() in heatmap.js),
   so the wrapper has to be given the leftover height by the layout rather than
   sized by its own content. A flex COLUMN does that with flex:1 1 auto — but
   the controls and the whole-market readout want to share one horizontal band,
   and switching the container to `row wrap` to get that silently turned
   flex-grow into a HORIZONTAL distribution. The wrapper stopped growing
   vertically and the map stayed at its page height: 552px of a 911px viewport.

   A grid does both at once. Two columns for the top band, three rows, and the
   middle row is 1fr — the map row gets everything left over no matter what the
   chrome above and below comes to, and no JS constant has to track it. */
.bq-hm.is-fullscreen {
  padding: 12px 16px 10px;
  overflow: hidden;
  background: var(--hm-canvas);
  width: 100vw; height: 100vh;

  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  column-gap: 16px;
  /* align-items MUST stay stretch (the default). Setting `end` on the
     container to bottom-align the two top-band items also stopped the map row
     stretching — a grid item that is not stretched is sized by its content, so
     the wrapper reported its old 552px height, mapHeight() read that back, and
     the map stayed exactly the size the fix was meant to change. The two items
     that want bottom alignment ask for it themselves, below. */
}

/* Everything that is not the map goes away. Each pixel reclaimed here is a
   pixel of tiles — the chrome was costing 252px of a 911px viewport. */
/* ANY NEW SECTION ADDED TO .bq-hm MUST BE LISTED HERE.
   .bq-hm.is-fullscreen is a 2-column x 3-row grid, so a section that is not
   hidden does not merely appear in fullscreen — it becomes an extra GRID ITEM
   and is auto-placed, which pushes the controls and the readout out of the
   band they were assigned and leaves the map with whatever is left. That is
   exactly what happened when the explainer cards and the panel/FAQ row were
   added: fullscreen showed body copy above a shrunken map with the controls
   scattered. Hiding the two wrappers removes four items from the grid and the
   layout returns to the three rows it is written for. */
.bq-hm.is-fullscreen .bq-hm__explain,
.bq-hm.is-fullscreen .bq-hm__below,
/* The <noscript> guarding the map fallback is a child of .bq-hm too, and an
   unhidden child is a grid ITEM here whether or not it paints anything. */
.bq-hm.is-fullscreen > noscript,
.bq-hm.is-fullscreen .bq-hm__mics,
.bq-hm.is-fullscreen .bq-hm__h1,
.bq-hm.is-fullscreen .bq-hm__sub,
.bq-hm.is-fullscreen .bq-hm__crumbs { display: none; }

/* Top band: controls left, readout right. */
.bq-hm.is-fullscreen .bq-hm__controls {
  grid-column: 1; grid-row: 1; align-self: end;
  margin-bottom: 0; padding-bottom: 8px;
}
.bq-hm.is-fullscreen .bq-hm__head {
  grid-column: 2; grid-row: 1; align-self: end;
  margin-bottom: 0; padding-bottom: 8px;
  justify-content: flex-end;
}
/* The readout goes inline and loses its box: in fullscreen it is a caption on
   the map, not the page's headline figure. */
.bq-hm.is-fullscreen .bq-hm__agg {
  flex-direction: row; align-items: baseline; gap: 8px;
  padding: 0; border: 0; min-width: 0; background: none;
}
.bq-hm.is-fullscreen .bq-hm__agg-val  { font-size: 18px; }
.bq-hm.is-fullscreen .bq-hm__agg-note { display: none; }

/* The map row. minmax(0, 1fr) rather than 1fr — a bare 1fr has an automatic
   MINIMUM of the content's size, so a tall map would push the row past the
   viewport instead of being clipped into it. */
.bq-hm.is-fullscreen .bq-hm__mapwrap {
  grid-column: 1 / -1; grid-row: 2;
  min-height: 0; max-width: none; width: 100%;
}
.bq-hm.is-fullscreen .bq-hm__legend {
  grid-column: 1 / -1; grid-row: 3;
  max-width: none; margin-bottom: 0; padding-top: 6px;
}

.bq-hm:fullscreen { width: 100vw; }

@media (prefers-reduced-motion: reduce) {
  .bq-hm__tile.is-flash-up, .bq-hm__tile.is-flash-down { animation: none; }
}