@import url("aal-dot.css?v=20261026g"); /* grey dot token (Coop, 26 Oct 2026) */
/*
  Heat-map landing page: neon sections. AI Accuracy Lab, public Heat-map landing page.

  1. Neon sign: "See where AI may have got it wrong" (canvas board "Neon 7 · Tube capitals and arrow")
  2. Hot spots: "Watch the hot spots glow" (canvas board "Hot spots A5 · Three tubes, three levels")

  Load after site.css on the Heat-map landing page only.
  Shared parts (tokens, tube recipes, ball, pills, switch-on keyframes) come first, then each section.
  Class prefixes: hm-neon-sign-* (section 1), hm-hotspots-* (section 2), and the shared hm-tube*, hm-ball, hm-on-*, hm-blink, hm-arrow.

  Fonts:
  - Quicksand (the tube lettering) is self-hosted from ../fonts/ (full, unmodified variable font, SIL OFL 1.1, see fonts/OFL.txt).
    Alternative: load https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap and delete the @font-face below.
  - Inter (body) and Newsreader (the example document) are the site's existing fonts.

  Motion: every animation is off for prefers-reduced-motion: reduce, and the sections then show fully lit.
  js/heatmap-neon.js (optional) holds each section's switch-on until it is 35% on screen.
*/

@font-face {
  font-family: "Quicksand";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/quicksand-variable.woff2") format("woff2");
}

/* ============================================================
   Shared: tokens
   ============================================================ */

:where(.hm-neon-sign, .hm-hotspots) {
  /* Brand neon colours (newest logo kit) */
  --hm-red-deep: #C8102E;
  --hm-vermilion: #E0251F;
  --hm-red: #EF2E27;
  --hm-red-bright: #FF4D3D;
  --hm-red-soft: #FF8A7A;
  --hm-red-core: #FFE4DE;
  --hm-orange: #F45A26;
  --hm-amber: #FA8A2B;
  --hm-amber-soft: #FFB070;
  --hm-orange-core: #FFEAD6;
  --hm-gold: #FDC029;
  --hm-yellow: #FEE21F;
  --hm-yellow-soft: #FFF0A0;
  --hm-yellow-core: #FFF6CC;

  /* Tube recipes: white-hot core, then the tube colour, then a wide halo */
  --hm-tube-yellow: 0 0 1px #FFFFFF, 0 0 4px #FFF0A0, 0 0 10px #FEE21F, 0 0 22px #FDC029,
                    0 0 44px rgba(250, 138, 43, 0.85), 0 0 80px rgba(250, 138, 43, 0.5);
  --hm-tube-orange: 0 0 1px #FFFFFF, 0 0 4px #FFB070, 0 0 10px #FA8A2B, 0 0 22px #F45A26,
                    0 0 46px rgba(244, 90, 38, 0.88), 0 0 90px rgba(244, 90, 38, 0.5);
  --hm-tube-red:    0 0 1px #FFFFFF, 0 0 4px #FF8A7A, 0 0 10px #FF4D3D, 0 0 22px #EF2E27,
                    0 0 46px rgba(224, 37, 31, 0.9), 0 0 90px rgba(200, 16, 46, 0.6);

  /* Pill tubes (likelihood) */
  --hm-pill-red: #FF6B5E;
  --hm-pill-red-glow: 0 0 6px #FF5A4A, 0 0 18px rgba(239, 46, 39, 0.75), inset 0 0 10px rgba(239, 46, 39, 0.5);
  --hm-pill-orange: #FFA052;
  --hm-pill-orange-glow: 0 0 6px #FFA052, 0 0 18px rgba(250, 138, 43, 0.7), inset 0 0 10px rgba(250, 138, 43, 0.45);
  --hm-pill-yellow: #FFE45C;
  --hm-pill-yellow-glow: 0 0 6px #FFE45C, 0 0 18px rgba(253, 192, 41, 0.65), inset 0 0 10px rgba(253, 192, 41, 0.4);

  /* Ball (the visual full stop) */
  --hm-ball: var(--aal-dot-on-dark,linear-gradient(135deg,#D8D8DC 15%,#9A9AA0 85%));
  --hm-ball-glow: none;   /* grey dot: no glow */

  /* The site's gradient button */
  --hm-cta: linear-gradient(95deg, #FFD60A 0%, #FFD60A 55%, #FF8A00 80%, #F2501E 100%);
  --hm-cta-ink: #1D1D1F;

  /* Wall texture: fine grey noise, blended over the wall at low strength */
  --hm-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  --hm-sign-font: Quicksand, Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --hm-body-font: Inter, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

:where(.hm-neon-sign, .hm-hotspots),
:where(.hm-neon-sign, .hm-hotspots) *,
:where(.hm-neon-sign, .hm-hotspots) *::before,
:where(.hm-neon-sign, .hm-hotspots) *::after { box-sizing: border-box; }

/* ============================================================
   Shared: tube lettering, ball, pills
   ============================================================ */

.hm-tube--yellow { color: var(--hm-yellow-core); text-shadow: var(--hm-tube-yellow); }
.hm-tube--orange { color: var(--hm-orange-core); text-shadow: var(--hm-tube-orange); }
.hm-tube--red    { color: var(--hm-red-core);    text-shadow: var(--hm-tube-red); }

.hm-ball {
  display: inline-block;
  width: 0.2em;
  height: 0.2em;
  margin-left: 0.08em;
  border-radius: 50%;
  background: var(--hm-ball);
  box-shadow: var(--hm-ball-glow);
}

/* Likelihood pills drawn as neon tubes. Labels, not buttons. */
.hm-tube-pill {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 26px;
  border-radius: 999px;
  border: 2.5px solid transparent;
  color: #FFFFFF;
  font-family: var(--hm-body-font);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
}
.hm-tube-pill--higher { border-color: var(--hm-pill-red);    box-shadow: var(--hm-pill-red-glow); }
.hm-tube-pill--medium { border-color: var(--hm-pill-orange); box-shadow: var(--hm-pill-orange-glow); }
.hm-tube-pill--lower  { border-color: var(--hm-pill-yellow); box-shadow: var(--hm-pill-yellow-glow); }

/* ============================================================
   Shared: switch-on, blink and arrow motion
   Groups start 1.1 s apart so no one-second window holds more than 3 flashes (WCAG 2.3.1).
   ============================================================ */

@keyframes hm-on {
  0%, 4%    { opacity: 0.08; }
  5%        { opacity: 1; }
  7%        { opacity: 0.15; }
  10%       { opacity: 1; }
  13%       { opacity: 0.3; }
  16%, 100% { opacity: 1; }
}

@keyframes hm-blink {
  0%, 62%   { opacity: 1; }
  64%       { opacity: 0.2; }
  66%       { opacity: 1; }
  68%       { opacity: 0.3; }
  71%, 100% { opacity: 1; }
}

@keyframes hm-arrow {
  0%, 58%   { opacity: 1; }
  60%, 78%  { opacity: 0.16; }
  80%, 100% { opacity: 1; }
}

.hm-on-1 { animation: hm-on 2.4s linear 0.3s both; }
.hm-on-2 { animation: hm-on 2.4s linear 1.4s both; }
.hm-on-3 { animation: hm-on 2.4s linear 2.5s both; }

/* Blink: two quick dips every 7 s, after the switch-on has finished */
.hm-on-2.hm-blink { animation: hm-on 2.4s linear 1.4s both, hm-blink 7s linear 3.8s infinite; }
.hm-on-3.hm-blink { animation: hm-on 2.4s linear 2.5s both, hm-blink 7s linear 4.9s infinite; }

/* Arrow: lights with group 3, then goes dark once every 1.8 s */
.hm-arrow { animation: hm-on 2.4s linear 2.5s both, hm-arrow 1.8s linear 5s infinite; }

/* Set by js/heatmap-neon.js until the section is on screen */
.hm-wait .hm-on-1,
.hm-wait .hm-on-2,
.hm-wait .hm-on-3,
.hm-wait .hm-arrow { animation-play-state: paused; }

/* Reduced motion: everything fully lit and still. The .hm-blink pairs repeat the selectors above so they win on specificity. */
@media (prefers-reduced-motion: reduce) {
  .hm-on-1,
  .hm-on-2,
  .hm-on-3,
  .hm-on-2.hm-blink,
  .hm-on-3.hm-blink,
  .hm-arrow { animation: none; }
}

/* ============================================================
   1. Neon sign: "See where AI may have got it wrong"
   ============================================================ */

.hm-neon-sign {
  --hm-neon-sign-pad-top: clamp(80px, 9vw, 128px);
  --hm-neon-sign-pad-x: 20px;
  --hm-neon-sign-pad-bottom: clamp(64px, 7vw, 104px);
  --hm-neon-sign-text: #ECE7E9;
  --hm-neon-sign-note: #B9B3B6;
  --hm-neon-sign-link: #FDC029;
  --hm-neon-sign-focus: #FEE21F;

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--hm-neon-sign-pad-top) var(--hm-neon-sign-pad-x) var(--hm-neon-sign-pad-bottom);
  background:
    radial-gradient(50% 36% at 50% 28%, rgba(239, 46, 39, 0.30), rgba(239, 46, 39, 0) 72%),
    radial-gradient(34% 20% at 50% 16%, rgba(253, 192, 41, 0.14), rgba(253, 192, 41, 0) 72%),
    radial-gradient(26% 16% at 50% 78%, rgba(253, 192, 41, 0.10), rgba(253, 192, 41, 0) 72%),
    radial-gradient(130% 90% at 50% 10%, #211618 0%, #120D0F 72%);
  color: #FFFFFF;
  font-family: var(--hm-body-font);
  line-height: 1.4;
  text-align: center;
}

.hm-neon-sign::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hm-noise);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hm-neon-sign a { color: var(--hm-neon-sign-link); }
.hm-neon-sign a:focus-visible { outline: 3px solid var(--hm-neon-sign-focus); outline-offset: 3px; }

.hm-neon-sign-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The sign scales with its own width (container query units) */
.hm-neon-sign-sign {
  width: min(1000px, 100%);
  container-type: inline-size;
}

.hm-neon-sign-title {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.2cqw;
  font-family: var(--hm-sign-font);
  font-weight: 500;
  line-height: 1;
  text-transform: uppercase;
}

.hm-neon-sign-line1 {
  display: block;
  font-size: 4.6cqw;
  letter-spacing: 0.12em;
}

.hm-neon-sign-line2 {
  display: block;
  font-size: 9.6cqw;
  letter-spacing: 0.06em;
  white-space: nowrap;
}

/* Older browsers without container queries: the sign is min(1000px, viewport − 40px) wide, so size from vw */
@supports not (container-type: inline-size) {
  .hm-neon-sign-title { gap: min(22px, 2.2vw - 0.88px); }
  .hm-neon-sign-line1 { font-size: min(46px, 4.6vw - 1.84px); }
  .hm-neon-sign-line2 { font-size: min(96px, 9.6vw - 3.84px); }
}

.hm-neon-sign-lead {
  margin: 56px 0 0;
  max-width: 640px;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.55;
  color: var(--hm-neon-sign-text);
}

.hm-neon-sign-pills {
  margin: 34px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.hm-neon-sign-ctas {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 16px;
}

/* The neon arrow pointing at the button */
.hm-neon-sign-arrow {
  flex: 0 0 auto;
  width: 150px;
  height: 70px;
  overflow: visible;
  fill: none;
  stroke: #FFF8D6;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 2px #FFF0A0) drop-shadow(0 0 7px #FEE21F) drop-shadow(0 0 16px rgba(250, 138, 43, 0.85));
}

.hm-neon-sign-cta {
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  background: var(--hm-cta);
  color: var(--hm-cta-ink);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(253, 192, 41, 0.6), 0 0 44px rgba(250, 138, 43, 0.45);
}
.hm-neon-sign a.hm-neon-sign-cta,
.hm-neon-sign a.hm-neon-sign-cta:hover { color: var(--hm-cta-ink); }
.hm-neon-sign-cta:hover { filter: brightness(1.04); }

.hm-neon-sign-note {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--hm-neon-sign-note);
}

/* Phones: the arrow sits above the button and points down at it */
@media (max-width: 560px) {
  .hm-neon-sign-lead { margin-top: 40px; }
  .hm-neon-sign-pills { gap: 10px; }
  .hm-neon-sign .hm-tube-pill { min-height: 44px; padding: 0 18px; font-size: 16px; }
  .hm-neon-sign-ctas { flex-direction: column; gap: 0; margin-top: 18px; }
  .hm-neon-sign-arrow {
    width: 100px;
    height: 47px;
    margin: 24px 0 26px;
    transform: rotate(78deg);
  }
}

/* ============================================================
   2. Hot spots: "Watch the hot spots glow"
   ============================================================ */

.hm-hotspots {
  --hm-hotspots-pad-y: clamp(72px, 9vw, 120px);
  --hm-hotspots-pad-x: clamp(20px, 4vw, 32px);
  --hm-hotspots-ground: #141416;
  --hm-hotspots-lead: #D6D6DB;
  --hm-hotspots-eyebrow: #FFB46B;
  --hm-hotspots-note: #B4B4B9;
  --hm-hotspots-focus: #FFD60A;

  /* Likelihood highlights in the example document (same line styles as the product) */
  --hm-hotspots-higher-fill: rgba(239, 46, 39, 0.16);
  --hm-hotspots-higher-line: #C8102E;     /* solid underline */
  --hm-hotspots-higher-glow: rgba(239, 46, 39, 0.42);
  --hm-hotspots-medium-fill: rgba(255, 122, 26, 0.18);
  --hm-hotspots-medium-line: #E8590C;     /* dashed underline */
  --hm-hotspots-medium-glow: rgba(255, 122, 26, 0.42);
  --hm-hotspots-lower-fill: rgba(255, 194, 26, 0.32);
  --hm-hotspots-lower-line: #C98A00;      /* dotted underline */
  --hm-hotspots-lower-glow: rgba(255, 194, 26, 0.5);

  /* Example document */
  --hm-hotspots-paper: #FFFDF8;
  --hm-hotspots-ink: #1D1D1F;
  --hm-hotspots-muted: #5E5E63;
  --hm-hotspots-tag: #F1EEE8;
  --hm-hotspots-doc-pad: clamp(24px, 4vw, 40px) clamp(20px, 4vw, 42px) clamp(26px, 4vw, 44px);

  position: relative;
  width: 100%;
  overflow: hidden;
  padding: var(--hm-hotspots-pad-y) var(--hm-hotspots-pad-x);
  background:
    radial-gradient(30% 40% at 22% 36%, rgba(244, 90, 38, 0.26), rgba(244, 90, 38, 0) 72%),
    radial-gradient(38% 46% at 74% 40%, rgba(239, 46, 39, 0.30), rgba(239, 46, 39, 0) 70%),
    radial-gradient(30% 36% at 90% 86%, rgba(253, 192, 41, 0.22), rgba(253, 192, 41, 0) 70%),
    radial-gradient(34% 40% at 8% 100%, rgba(244, 90, 38, 0.18), rgba(244, 90, 38, 0) 70%),
    var(--hm-hotspots-ground);
  color: #FFFFFF;
  font-family: var(--hm-body-font);
  line-height: 1.4;
}

.hm-hotspots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--hm-noise);
  opacity: 0.14;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.hm-hotspots a:focus-visible { outline: 3px solid var(--hm-hotspots-focus); outline-offset: 3px; }

.hm-hotspots-inner {
  position: relative;
  z-index: 1;
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 56px 64px;
}

/* ---------- Copy column (the sign scales with this column) ---------- */

.hm-hotspots-copy {
  flex: 1 1 440px;
  min-width: 0;
  container-type: inline-size;
}

.hm-hotspots-eyebrow {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--hm-hotspots-eyebrow);
}

.hm-hotspots-title {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: min(2.4cqw, 14px);
  font-family: var(--hm-sign-font);
  font-weight: 500;
  line-height: 0.95;
}

/* Capped so the sign doesn't balloon when the columns stack on tablets */
.hm-hotspots-line1 {
  display: block;
  font-size: min(10cqw, 56px);
  letter-spacing: 0.02em;
}
.hm-hotspots-line2,
.hm-hotspots-line3 {
  display: block;
  font-size: min(17cqw, 96px);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.hm-hotspots-line3 .hm-ball { width: 0.16em; height: 0.16em; margin-left: 0.07em; }

@supports not (container-type: inline-size) {
  .hm-hotspots-title { gap: 12px; }
  .hm-hotspots-line1 { font-size: clamp(30px, 9vw, 52px); }
  .hm-hotspots-line2,
  .hm-hotspots-line3 { font-size: clamp(48px, 15.5vw, 88px); }
}

.hm-hotspots-lead {
  margin: 30px 0 0;
  max-width: 470px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--hm-hotspots-lead);
}

.hm-hotspots-legend {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hm-hotspots-legend .hm-tube-pill { min-height: 46px; padding: 0 22px; font-size: 16px; }

.hm-hotspots-ctas {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.hm-hotspots-cta {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  background: var(--hm-cta);
  color: var(--hm-cta-ink);
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 0 18px rgba(253, 192, 41, 0.5), 0 0 40px rgba(250, 138, 43, 0.35);
}
.hm-hotspots-cta:hover { filter: brightness(1.04); color: var(--hm-cta-ink); }

.hm-hotspots-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 17px;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
}
.hm-hotspots-link:hover { color: var(--hm-hotspots-focus); }

.hm-hotspots-note {
  margin: 20px 0 0;
  font-size: 13.5px;
  color: var(--hm-hotspots-note);
}

/* ---------- Example document ---------- */

.hm-hotspots-stage {
  flex: 1 1 500px;
  min-width: 0;
  display: flex;
  justify-content: center;
  padding: 20px 0;
}

.hm-hotspots-doc {
  width: 100%;
  max-width: 560px;
  padding: var(--hm-hotspots-doc-pad);
  border-radius: 18px;
  background: var(--hm-hotspots-paper);
  color: var(--hm-hotspots-ink);
  transform: rotate(-2deg);
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.2),
    0 40px 90px rgba(0, 0, 0, 0.45),
    0 0 120px rgba(239, 46, 39, 0.28);
}

.hm-hotspots-doc-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--hm-hotspots-muted);
}

.hm-hotspots-tag {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--hm-hotspots-tag);
}

.hm-hotspots-doc-title {
  margin: 18px 0 0;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(21px, 2.4vw, 25px);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.hm-hotspots-doc-sub {
  margin: 6px 0 0;
  font-family: Newsreader, Georgia, serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--hm-hotspots-muted);
}

.hm-hotspots-doc-body {
  margin-top: 20px;
  font-family: Newsreader, Georgia, serif;
  font-size: clamp(15.5px, 1.2vw, 16.5px);
  line-height: 1.95;
}
.hm-hotspots-doc-body p { margin: 0 0 14px; }
.hm-hotspots-doc-body p:last-child { margin-bottom: 0; }

/* Flags: <mark> with a fill, an underline style per level, and a soft glow */
.hm-hotspots-flag {
  color: inherit;
  border-radius: 4px;
  padding: 1px 3px;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.hm-hotspots-flag--higher {
  background: var(--hm-hotspots-higher-fill);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: var(--hm-hotspots-higher-line);
  box-shadow: 0 0 24px 9px var(--hm-hotspots-higher-glow);
}
.hm-hotspots-flag--medium {
  background: var(--hm-hotspots-medium-fill);
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-color: var(--hm-hotspots-medium-line);
  box-shadow: 0 0 20px 7px var(--hm-hotspots-medium-glow);
}
.hm-hotspots-flag--lower {
  background: var(--hm-hotspots-lower-fill);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--hm-hotspots-lower-line);
  box-shadow: 0 0 18px 6px var(--hm-hotspots-lower-glow);
}

/* Screen-reader-only likelihood text inside each flag */
.hm-hotspots-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Phones ---------- */

@media (max-width: 600px) {
  .hm-hotspots-inner { gap: 40px; }
  .hm-hotspots-legend { gap: 10px; }
  .hm-hotspots-legend .hm-tube-pill { min-height: 44px; padding: 0 16px; font-size: 15px; }
  .hm-hotspots-ctas { margin-top: 28px; }
  .hm-hotspots-stage { padding: 8px 0; }
  .hm-hotspots-doc { transform: rotate(-1deg); }
}