/* QuietSignal · speak softly, say less. */

:root {
  --bg: #0a0b0f;
  --panel: #15161b;
  --panel-line: rgba(255, 255, 255, 0.07);
  --stage: #0e0f17;
  --text: #ecebf2;
  --text-2: #b9b8c6;
  --muted: #7d7c8a;
  --accent: #b4aaff;
  --radius: 18px;
  --radius-stage: 14px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'cv11', 'ss01';
}

a { color: inherit; }
img { max-width: 100%; display: block; }

.qs-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-inline: clamp(16px, 4vw, 48px);
  padding-block: clamp(28px, 6vw, 72px) 96px;
}

/* ---- shared type ---- */

.qs-label {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.qs-glyph {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.qs-dim { color: var(--muted); }

/* In a tight card header the glyph gives way before the title does. */
.qs-card__head .qs-glyph { flex: 0 1000 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- index header ---- */

.qs-masthead { margin-bottom: clamp(36px, 6vw, 64px); max-width: 640px; }

.qs-mark {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text-2);
}

.qs-mark__icon {
  width: auto;
  height: 28px;
  animation: qs-breathe 6s ease-in-out infinite;
}

@keyframes qs-breathe {
  50% { opacity: 0.6; }
}

.qs-masthead h1 {
  margin: 22px 0 14px;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}

.qs-masthead p { margin: 0; color: var(--text-2); font-size: 16px; text-wrap: pretty; }
.qs-masthead p + p:not(.qs-label) { margin-top: 12px; }

.qs-masthead .qs-label { margin-top: 28px; }

/* ---- grid + card ---- */

.qs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 460px), 1fr));
  gap: 24px;
}

.qs-grid > .qs-card { display: flex; flex-direction: column; }

/* Equal card heights only matter when cards sit side by side. */
@media (min-width: 760px) {
  .qs-grid { grid-auto-rows: 1fr; }
}
.qs-grid > .qs-card .qs-card__body { flex: 1; }

.qs-card {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius);
  padding: 20px 22px 24px;
}

.qs-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.qs-card__title {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.qs-card__title a { text-decoration: none; }

/* No card chrome: on the index and the detail page the piece sits straight on the page. */
.qs-grid > .qs-tile,
.qs-detail__card > .qs-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.qs-tile .qs-card__stage { transition: transform 0.5s ease, box-shadow 0.5s ease; }
.qs-tile:hover .qs-card__stage,
.qs-tile:focus-visible .qs-card__stage { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14); }
.qs-grid { row-gap: clamp(36px, 4vw, 56px); column-gap: clamp(24px, 3vw, 40px); }

/* Index thumbnails: a still image, with a soft white veil and "Open visualisation" on hover. */
.qs-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.qs-thumb__open {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.28);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.qs-thumb__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #17181d;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
.qs-tile:hover .qs-thumb__open,
.qs-tile:focus-visible .qs-thumb__open { opacity: 1; }
@media (hover: none) {
  .qs-thumb__open { opacity: 1; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; place-items: end; padding: 12px; }
  .qs-thumb__pill { padding: 7px 12px; font-size: 12px; }
}

/* Index tiles: the whole card is the link. */
.qs-tile {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: border-color 0.4s, transform 0.4s, background 0.4s;
}
.qs-tile:hover,
.qs-tile:focus-visible { color: inherit; }
.qs-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: 4px; }
.qs-tile .qs-card__head { margin-bottom: 12px; gap: 10px; }

/* Index: a wider page and four tiles across on desktop, stepping down to one on phones. */
[data-page="index"] .qs-wrap { max-width: 1680px; }
[data-page="index"] .qs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 28px); row-gap: clamp(28px, 3vw, 44px); }
@media (max-width: 1180px) { [data-page="index"] .qs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { [data-page="index"] .qs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { [data-page="index"] .qs-grid { grid-template-columns: minmax(0, 1fr); } }
[data-page="index"] .qs-tile .qs-card__title { font-size: 15px; }
[data-page="index"] .qs-tile .qs-glyph { font-size: 10px; letter-spacing: 0.12em; }
[data-page="index"] .qs-thumb__pill { padding: 8px 13px; font-size: 12px; }
.qs-grid > .qs-tile { display: block; }
.qs-tile.is-current .qs-card__stage { box-shadow: 0 0 0 1px rgba(180, 170, 255, 0.45); }
.qs-versions__grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); }

.qs-icon-btn {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: -6px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
}

.qs-icon-btn:hover,
.qs-icon-btn:focus-visible { color: var(--text); background: rgba(255, 255, 255, 0.05); }

.qs-card__stage { aspect-ratio: 8 / 9; }
.qs-card--wide .qs-card__stage { aspect-ratio: 16 / 10; }
/* Index cards are landscape: every piece is composed for widescreen first. */
.qs-grid .qs-card__stage { aspect-ratio: 16 / 10; }
/* The full data source detail lives on each piece's own page; the index keeps cards tight. */
.qs-grid .qs-card__body .qs-dim { display: none; }

/* ---- index sections ---- */

.qs-section + .qs-section { margin-top: clamp(64px, 10vw, 120px); }
.qs-section__head { margin-bottom: 28px; max-width: 640px; }
.qs-section__title { margin: 0; font-size: 22px; font-weight: 500; letter-spacing: -0.01em; }
.qs-section__intro { margin: 6px 0 0; color: var(--muted); font-size: 15px; }

.qs-grid--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); }

.qs-empty {
  display: grid;
  place-content: center;
  gap: 6px;
  min-height: 220px;
  padding: 24px;
  border: 1px dashed var(--panel-line);
  border-radius: var(--radius);
  text-align: center;
}
.qs-empty p { margin: 0; }
.qs-empty p + p { color: var(--muted); font-size: 14px; }

.qs-card__body {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-line);
}

.qs-sec + .qs-sec { margin-top: 12px; }
.qs-sec p { margin: 3px 0 0; color: var(--text-2); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.qs-sec p + p { margin-top: 6px; font-size: 13.5px; }

/* ---- stage + visualisation ---- */

.qs-stage {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-stage);
  background:
    radial-gradient(120% 90% at 50% 55%, #13131f 0%, var(--stage) 62%, #090a0f 100%);
  container-type: size;
}

.qs-stage:fullscreen { border-radius: 0; }
.qs-stage--zoom { cursor: zoom-in; }
.qs-stage--zoom:fullscreen { cursor: auto; }

.qs-stage--image { background: var(--stage); }
.qs-stage--image img { width: 100%; height: 100%; object-fit: cover; }

.qs-viz__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.qs-counter {
  position: absolute;
  left: 7cqw;
  top: 6cqh;
  text-align: center;
  pointer-events: none;
}

.qs-counter__value {
  font-size: clamp(18px, 8cqmin, 140px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.qs-counter__label {
  margin-top: 0.6em;
  font-size: clamp(7px, 2.6cqmin, 40px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-2);
  white-space: nowrap;
}

.qs-counter--right { left: auto; right: 7cqw; text-align: right; text-shadow: 0 0 12px #0e0f17, 0 0 4px #0e0f17; }

/* Event terrain */
.qs-terrain__status {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  color: var(--muted);
  transition: color 1.5s;
}
.qs-terrain__status.is-warm { color: #eaa07c; }

.qs-terrain__legend {
  position: absolute;
  left: 7cqw;
  bottom: 5cqh;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: clamp(7px, 2.2cqmin, 30px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
}
.qs-terrain__legend i {
  width: 9cqmin;
  height: 2px;
  border-radius: 1px;
  background: linear-gradient(90deg, #3a4a6c, #70a0bc, #e2c892, #de744e, #b03238);
}

/* ---- how to read this: corner legend box on every stage ---- */

.qs-howto {
  --ht-bg: rgba(14, 15, 21, 0.9);
  --ht-line: rgba(255, 255, 255, 0.1);
  --ht-text: #d9d8e2;
  --ht-muted: #8d8c9a;
  position: absolute;
  z-index: 5;
  right: max(10px, 2.2cqmin);
  bottom: max(10px, 2.2cqmin);
  font-family: var(--font);
  font-size: clamp(11px, 1.35cqmin, 15px);
  line-height: 1.4;
  color: var(--ht-text);
}
.qs-howto--light {
  --ht-bg: rgba(252, 250, 245, 0.93);
  --ht-line: rgba(0, 0, 0, 0.09);
  --ht-text: #2d2b29;
  --ht-muted: #77736c;
}
.qs-howto__toggle {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--ht-line);
  border-radius: 50%;
  background: var(--ht-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ht-muted);
  font: 500 12px/1 var(--font);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
}
.qs-howto__toggle:hover,
.qs-howto__toggle:focus-visible { opacity: 1; color: var(--ht-text); }
.qs-howto.is-open .qs-howto__toggle { display: none; }
.qs-howto__panel {
  display: none;
  position: relative;
  width: min(22em, 62cqw);
  max-height: min(78cqh, 40em);
  overflow-y: auto;
  padding: 1em 1.1em 1.1em;
  border: 1px solid var(--ht-line);
  border-radius: 12px;
  background: var(--ht-bg);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  scrollbar-width: thin;
}
.qs-howto.is-open .qs-howto__panel { display: block; animation: qs-howto-in 0.4s ease; }
@keyframes qs-howto-in { from { opacity: 0; transform: translateY(4px); } }
.qs-howto section + section { margin-top: 0.95em; padding-top: 0.85em; border-top: 1px solid var(--ht-line); }
.qs-howto h4 {
  margin: 0;
  padding-right: 1.6em;
  font-size: 0.74em;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ht-muted);
}
.qs-howto__close {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--ht-muted);
  cursor: pointer;
}
.qs-howto__close:hover { color: var(--ht-text); }
.qs-howto p { margin: 0.45em 0 0; color: var(--ht-text); text-wrap: pretty; }
.qs-howto ul { margin: 0.55em 0 0; padding: 0; list-style: none; display: grid; gap: 0.38em; }
.qs-howto li { display: flex; align-items: center; gap: 0.6em; }
.qs-howto li svg { flex: none; }
/* Small stages: keep only the "?" unless someone opens it. */
@container (max-width: 420px) {
  .qs-howto__panel { width: min(17em, 80cqw); font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .qs-howto.is-open .qs-howto__panel { animation: none; }
}

/* ---- App Store badge (Apple artwork: keep its proportions and clear space) ---- */

.qs-appstore { display: inline-block; margin-top: 28px; line-height: 0; }
.qs-appstore img { width: 120px; height: 40px; }
a.qs-appstore { transition: opacity 0.3s; }
a.qs-appstore:hover { opacity: 0.85; }
#main > .qs-appstore { display: block; width: fit-content; margin: 56px auto 0; }

/* ---- original / dark switch ---- */

[data-page="index"] .qs-wrap { position: relative; }
[data-page="index"] .qs-wrap > .qs-theme { position: absolute; top: clamp(28px, 6vw, 72px); right: clamp(16px, 4vw, 48px); }
.qs-top__end { display: inline-flex; align-items: center; gap: 18px; min-width: 0; }
.qs-theme {
  display: inline-flex;
  padding: 2px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
}
.qs-theme button {
  padding: 5px 12px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: 500 12px/1.2 var(--font);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: color 0.3s, background 0.3s;
}
.qs-theme button:hover,
.qs-theme button:focus-visible { color: var(--text); }
.qs-theme button[aria-pressed='true'] { background: rgba(255, 255, 255, 0.1); color: var(--text); }
@media (max-width: 600px) {
  .qs-top__end > .qs-glyph { display: none; }
}

/* ---- detail page ---- */

.qs-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: clamp(28px, 5vw, 48px);
}

.qs-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.3s;
}

.qs-back:hover { color: var(--text); }

.qs-detail {
  display: grid;
  grid-template-columns: minmax(0, 460px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 80px);
  align-items: start;
}

.qs-detail__info { padding-top: 8px; max-width: 520px; }
/* The notes sit beside the card on the detail page, so the card itself is just the stage. */
.qs-detail__card .qs-card__body { display: none; }

/* Dashboards: the landscape card leads, the notes sit underneath. */
.qs-detail--wide { grid-template-columns: minmax(0, 1fr); }
.qs-detail--wide .qs-detail__info { max-width: none; }
.qs-detail--wide .qs-detail__card .qs-card__stage { aspect-ratio: 16 / 9; }
/* Notes under the landscape card: title on the left, the four answers in two columns. */
.qs-detail--wide .qs-detail__info {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  grid-template-rows: auto auto 1fr;
  column-gap: clamp(32px, 6vw, 80px);
  align-items: start;
}
.qs-detail--wide .qs-detail__info > .qs-glyph,
.qs-detail--wide .qs-detail__info > .qs-h1 { grid-column: 1; }
.qs-detail--wide .qs-detail__info > .qs-h1 { margin-bottom: 0; }
.qs-detail--wide .qs-info { grid-column: 2; grid-row: 1 / span 3; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 40px; }
.qs-detail--wide .qs-info .qs-sec + .qs-sec { margin-top: 0; }
.qs-detail--wide .qs-note { grid-column: 1; margin-top: 24px; }
.qs-detail--wide .qs-detail__info > .qs-h1 { margin-top: 10px; }
.qs-detail--wide .qs-detail__card .qs-card__body { display: none; }

.qs-h1 {
  margin: 12px 0 32px;
  font-size: clamp(32px, 4.5vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.08;
}

.qs-info .qs-sec + .qs-sec { margin-top: 24px; }
.qs-info .qs-sec p { font-size: 16px; line-height: 1.55; margin-top: 6px; }
.qs-info .qs-sec p + p { font-size: 14px; }

.qs-note { margin: 36px 0 0; font-size: 13px; color: var(--muted); }
.qs-note a { color: var(--text-2); text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.25); }

.qs-block { margin-top: clamp(56px, 9vw, 104px); }
.qs-block > .qs-label { margin-bottom: 24px; }

/* ---- the data: schema and sample tables on the detail page ---- */

.qs-data__lede { margin: 0 0 28px; max-width: 720px; color: var(--text-2); font-size: 16px; line-height: 1.55; }
.qs-data__table + .qs-data__table { margin-top: 48px; }
.qs-data__name { margin: 0; font: 500 15px/1.4 'Roboto Mono', ui-monospace, monospace; color: var(--text); }
.qs-data__meta { margin: 4px 0 14px; color: var(--muted); font-size: 13px; }
.qs-data__sample-label { margin: 22px 0 10px; }
.qs-data__scroll { overflow-x: auto; border: 1px solid var(--panel-line); border-radius: 10px; }
.qs-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.qs-table th,
.qs-table td { padding: 9px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--panel-line); }
.qs-table tr:last-child td { border-bottom: 0; }
.qs-table th { font-weight: 500; color: var(--muted); background: rgba(255, 255, 255, 0.02); white-space: nowrap; }
.qs-table td { color: var(--text-2); }
.qs-table code { font: 12.5px/1.4 'Roboto Mono', ui-monospace, monospace; color: var(--text); }
.qs-table--schema td:first-child { white-space: nowrap; }
.qs-table--schema td:nth-child(2) { white-space: nowrap; }
.qs-table--sample td { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- devices ---- */

.qs-devices {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: clamp(28px, 5vw, 64px);
}

.qs-device { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }

.qs-device__frame { position: relative; background: #050507; border: 1px solid rgba(255, 255, 255, 0.09); }
.qs-device__screen { width: 100%; height: 100%; }

.qs-device--tv { flex: 1 1 520px; max-width: 760px; }
.qs-device--tv .qs-device__frame { width: 100%; aspect-ratio: 16 / 9; padding: 1.2%; border-radius: 10px; }
.qs-device--tv .qs-device__screen { border-radius: 3px; }
.qs-device--tv .qs-device__frame::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 22%;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: linear-gradient(#141419, #0b0b0e);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-top: 0;
}

.qs-device--phone { flex: 0 0 auto; }
.qs-device--phone .qs-device__frame { width: 230px; aspect-ratio: 9 / 19.5; padding: 9px; border-radius: 40px; }
.qs-device--phone .qs-device__screen { border-radius: 31px; }
.qs-device--phone .qs-device__frame::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: 19px;
  left: 50%;
  width: 72px;
  height: 21px;
  transform: translateX(-50%);
  border-radius: 12px;
  background: #000;
}

.qs-device--web { flex: 1 1 520px; max-width: 760px; }
.qs-device--web .qs-device__frame { width: 100%; aspect-ratio: 16 / 10; padding: 28px 0 0; border-radius: 10px; }
.qs-device--web .qs-device__screen { border-radius: 0 0 9px 9px; }
.qs-device--web .qs-device__frame::before {
  content: '';
  position: absolute;
  top: 11px;
  left: 14px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2a2a31;
  box-shadow: 13px 0 #2a2a31, 26px 0 #2a2a31;
}

.qs-lock {
  position: absolute;
  z-index: 1;
  inset: 13% 0 auto;
  text-align: center;
  pointer-events: none;
  color: rgba(236, 235, 242, 0.88);
}

.qs-lock__date { font-size: 12px; font-weight: 500; }
.qs-lock__time { font-size: 62px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; margin-top: 2px; }

/* ---- reference + pager ---- */

.qs-ref { margin: 0; max-width: 420px; }
.qs-ref img { border-radius: 12px; border: 1px solid var(--panel-line); }
.qs-ref figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

.qs-pager {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(56px, 9vw, 104px);
  padding-top: 24px;
  border-top: 1px solid var(--panel-line);
}

.qs-pager a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--text-2); }
.qs-pager a:hover { color: var(--text); }
.qs-pager__next { text-align: right; margin-left: auto; }

/* ---- footer ---- */

.qs-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(64px, 9vw, 112px);
  padding-top: 22px;
  border-top: 1px solid var(--panel-line);
  font-size: 13px;
  color: var(--muted);
}
.qs-footer img { width: auto; height: 16px; }
.qs-footer__sep { opacity: 0.45; margin-inline: 2px; }
.qs-footer a { text-decoration: none; transition: color 0.3s; }
.qs-footer a:hover, .qs-footer a:focus-visible { color: var(--text); }

/* ---- embed mode: nothing but the stage ---- */

.is-embed, .is-embed body { height: 100%; overflow: hidden; }
.qs-stage--full { position: fixed; inset: 0; border-radius: 0; }

/* ---- small screens ---- */

@media (max-width: 860px) {
  .qs-detail { grid-template-columns: minmax(0, 1fr); }
  .qs-detail__card { max-width: none; }
  .qs-detail--wide .qs-detail__info, .qs-detail--wide .qs-info { display: block; }
  .qs-detail--wide .qs-info .qs-sec + .qs-sec { margin-top: 20px; }
  .qs-detail--wide .qs-detail__info > .qs-h1 { margin-bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .qs-mark__icon { animation: none; }
}

/* Channel tide · ink on paper, so the stage is light and the overlay is dark ink */
.qs-stage.qs-channel-tide {
  background:
    radial-gradient(110% 90% at 45% 45%, #f8f4ea 0%, #f2ecdf 60%, #e9e1cf 100%);
}
.qs-channel-tide .qs-channel-tide__head { text-align: left; }
.qs-channel-tide .qs-counter__value { color: #1c224e; }
.qs-channel-tide .qs-counter__label { color: #4c5274; }
.qs-channel-tide__status {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  color: #6e7190;
  transition: color 1.5s;
}
.qs-channel-tide__status.is-rising { color: #2a44b8; }

.qs-channel-tide__axis {
  position: absolute;
  left: 7cqw;
  right: max(7cqw, calc(max(10px, 2.2cqmin) + 40px)); /* clear the folded "?" of How to read this */
  bottom: 5cqh;
  display: flex;
  align-items: center;
  gap: 1em;
  font-size: clamp(7px, 2.2cqmin, 30px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a7a8c;
  white-space: nowrap;
  pointer-events: none;
}
.qs-channel-tide__axis i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(28, 34, 78, 0.06), rgba(28, 34, 78, 0.28));
}
.qs-channel-tide .qs-lock { color: rgba(28, 34, 78, 0.86); }
/* Channel tide · dark: silver-blue ink on an indigo night */
.qs-stage.qs-channel-tide.is-dark {
  background:
    radial-gradient(110% 90% at 45% 45%, #121628 0%, #0d1020 60%, #090b16 100%);
}
.qs-channel-tide.is-dark .qs-counter__value { color: rgba(226, 232, 252, 0.92); }
.qs-channel-tide.is-dark .qs-counter__label { color: rgba(200, 208, 238, 0.6); }
.qs-channel-tide.is-dark .qs-channel-tide__status { color: rgba(180, 190, 228, 0.55); }
.qs-channel-tide.is-dark .qs-channel-tide__status.is-rising { color: #a8bcff; }
.qs-channel-tide.is-dark .qs-channel-tide__axis { color: rgba(190, 198, 230, 0.45); }
.qs-channel-tide.is-dark .qs-channel-tide__axis i {
  background: linear-gradient(90deg, rgba(214, 220, 244, 0.04), rgba(214, 220, 244, 0.22));
}
.qs-channel-tide.is-dark .qs-lock { color: rgba(226, 232, 252, 0.86); }

/* Talent network · constellation of orgs, people and roles */
.qs-talent-network .qs-talent-network__head { text-align: left; text-shadow: 0 0 14px #0e0f17, 0 0 4px #0e0f17; }
.qs-talent-network__focus {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  color: #8fd6c4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.qs-talent-network__focus.is-on { opacity: 1; transform: none; }

.qs-talent-network__legend {
  position: absolute;
  left: 7cqw;
  bottom: 5cqh;
  display: flex;
  align-items: center;
  gap: 1.4em;
  font-size: clamp(7px, 2.1cqmin, 28px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  pointer-events: none;
}
.qs-talent-network__legend span { display: inline-flex; align-items: center; gap: 0.6em; }
.qs-talent-network__legend i { width: 0.7em; height: 0.7em; border-radius: 50%; }
.qs-talent-network__legend .is-org { background: #5ec4ac; }
.qs-talent-network__legend .is-person { background: #a08cf0; width: 0.5em; height: 0.5em; }
.qs-talent-network__legend .is-role { background: #ecac4e; border-radius: 1px; width: 0.5em; height: 0.5em; transform: rotate(45deg); }
.qs-talent-network__synthetic { opacity: 0.65; }
@media (prefers-reduced-motion: reduce) {
  .qs-talent-network__focus { transition: opacity 1.4s ease; transform: none; }
}

/* Source cells · slate-violet ground, overlay sits bottom left like a map key */
.qs-stage.qs-source-cells {
  background:
    radial-gradient(120% 100% at 55% 42%, #2a2f44 0%, #222639 55%, #181b28 100%);
}
.qs-source-cells__head {
  top: auto;
  bottom: 5cqh;
  left: 6cqw;
  text-align: left;
  text-shadow: 0 0 10px #1c1f2e, 0 0 3px #1c1f2e;
}
.qs-source-cells__head .qs-counter__value { font-size: clamp(18px, 7cqmin, 120px); }
.qs-source-cells__legend {
  display: flex;
  align-items: center;
  gap: 1.2em;
  margin-top: 0.9em;
  font-size: clamp(7px, 2.2cqmin, 30px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.qs-source-cells__legend span { display: inline-flex; align-items: center; gap: 0.6em; }
.qs-source-cells__legend b { font-weight: 500; color: #e8e5f6; }
.qs-source-cells__legend i { display: inline-block; box-sizing: border-box; border-radius: 50%; border: 1px solid #cfcbe2; }
.qs-source-cells__visit { width: 0.7em; height: 0.7em; }
.qs-source-cells__signup { width: 1.3em; height: 1.3em; border-width: 2px; }
/* Dark: the slate-violet ground taken down to a night version of itself */
.qs-stage.qs-source-cells.is-dark {
  background:
    radial-gradient(120% 100% at 55% 42%, #151724 0%, #10121c 55%, #0b0c13 100%);
}
.qs-source-cells.is-dark .qs-source-cells__head { text-shadow: 0 0 10px #0f111a, 0 0 3px #0f111a; }

/* Day threads · teal-to-violet ground, pale yellow type like the reference */
.qs-stage.qs-day-threads {
  background: linear-gradient(135deg, #487692 0%, #485692 50%, #4a3480 100%);
}
.qs-day-threads .qs-day-threads__head { text-align: left; }
.qs-day-threads .qs-counter__value { color: #fbf6dc; }
.qs-day-threads .qs-counter__label { color: rgba(240, 232, 128, 0.85); }
.qs-day-threads .qs-lock { color: rgba(255, 250, 230, 0.9); }
/* Dark: the teal-to-violet sweep at night (the canvas paints the same ramp) */
.qs-stage.qs-day-threads.is-dark {
  background: linear-gradient(135deg, #0d1d25 0%, #0f1428 50%, #170e29 100%);
}
.qs-day-threads.is-dark .qs-counter__value { color: #efe9d0; }
.qs-day-threads.is-dark .qs-counter__label { color: rgba(232, 222, 138, 0.78); }

/* Cohort skyline · warm dusk ground, amber type, lamplight gold for the launch cohort */
.qs-stage.qs-cohort-skyline {
  background:
    radial-gradient(120% 80% at 40% 60%, #2a1d12 0%, #1d140d 55%, #130d08 100%);
}
.qs-cohort-skyline .qs-cohort-skyline__head { text-shadow: 0 0 14px #1d140d, 0 0 4px #1d140d; }
.qs-cohort-skyline .qs-counter__value { color: #f3e2c6; }
.qs-cohort-skyline .qs-counter__label { color: #c4a47c; }
.qs-cohort-skyline__status {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6em;
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  color: #ffd68c;
  white-space: nowrap;
}
.qs-cohort-skyline__status i {
  flex: none;
  width: 0.55em;
  height: 0.9em;
  border-radius: 1px;
  background: #ffd68c;
  box-shadow: 0 0 0.6em rgba(255, 214, 140, 0.45);
}
.qs-cohort-skyline .qs-lock { color: rgba(243, 226, 198, 0.9); }
/* Dark: the dusk taken on into night, still faintly warm */
.qs-stage.qs-cohort-skyline.is-dark {
  background:
    radial-gradient(120% 80% at 40% 60%, #170f09 0%, #100a06 55%, #0a0704 100%);
}
.qs-cohort-skyline.is-dark .qs-cohort-skyline__head { text-shadow: 0 0 14px #100a06, 0 0 4px #100a06; }

/* Order drift · daily average order value as a dot scatter on a soft white ground, sand baseline band */
.qs-stage.qs-order-drift {
  background:
    radial-gradient(120% 100% at 50% 45%, #fdfcf9 0%, #f8f6f1 65%, #f1eee7 100%);
}
.qs-order-drift .qs-order-drift__head { text-align: left; transition: opacity 0.4s linear; }
.qs-order-drift .qs-counter__value { color: #2a2633; }
.qs-order-drift .qs-counter__label { color: #77737f; }
.qs-order-drift .qs-lock { color: rgba(42, 38, 51, 0.86); }
/* Order drift · dark: the same ramp glowing on a warm violet night */
.qs-stage.qs-order-drift.is-dark {
  background: radial-gradient(120% 100% at 50% 40%, #16131c 0%, #110f16 60%, #0c0b10 100%);
}
.qs-order-drift.is-dark .qs-counter__value { color: rgba(240, 234, 246, 0.92); }
.qs-order-drift.is-dark .qs-counter__label { color: rgba(220, 212, 232, 0.55); }
.qs-order-drift.is-dark .qs-lock { color: rgba(240, 234, 246, 0.86); }

/* Channel warmth · crisp little day lines on a deep plum ground, Inter row labels */
.qs-stage.qs-channel-warmth {
  background:
    radial-gradient(120% 100% at 50% 45%, #1d1726 0%, #17121f 60%, #100d16 100%);
}
.qs-channel-warmth .qs-channel-warmth__head { left: 6cqw; text-align: left; text-shadow: 0 0 12px #17121f, 0 0 4px #17121f; }
.qs-channel-warmth .qs-counter__value { color: #f6e6d6; }
.qs-channel-warmth .qs-counter__label { color: #a69fb8; }
.qs-channel-warmth__status {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  color: #a69fb8;
  white-space: nowrap;
  transition: color 1.5s;
}
.qs-channel-warmth__status.is-warm { color: #f0b47a; }
.qs-channel-warmth__legend {
  position: absolute;
  left: 6cqw; /* bottom-left, so the "How to read this" corner stays clear */
  bottom: 5cqh;
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-size: clamp(7px, 2.1cqmin, 28px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a839c;
  white-space: nowrap;
  pointer-events: none;
}
.qs-channel-warmth__legend i {
  width: 10cqmin;
  height: 0.55em;
  border-radius: 1px;
  background: linear-gradient(90deg, #5452c4, #8060c4, #b268b0, #da7896, #ea8e7a, #eea864, #f2c86c);
}
.qs-channel-warmth .qs-lock { color: rgba(246, 230, 214, 0.9); }
/* Dark: the plum ground at night; key gradient follows the lifted night ramp */
.qs-stage.qs-channel-warmth.is-dark {
  background:
    radial-gradient(120% 100% at 50% 45%, #120e18 0%, #0e0b13 60%, #09070d 100%);
}
.qs-channel-warmth.is-dark .qs-channel-warmth__head { text-shadow: 0 0 12px #0e0b13, 0 0 4px #0e0b13; }
.qs-channel-warmth.is-dark .qs-channel-warmth__legend i {
  background: linear-gradient(90deg, #6866d4, #8a6cce, #b46eb4, #d67c98, #e4907c, #e8a866, #ecc470);
}

/* Source rose · Nightingale's coxcomb on aged paper, centred, letter-spaced Inter capitals; legend lives in the how-to box */
.qs-stage.qs-source-rose { background: #f1ece0; }
.qs-source-rose .qs-lock { color: rgba(32, 29, 26, 0.86); }
.qs-stage.qs-source-rose.is-dark { background: #13110f; }
.qs-source-rose.is-dark .qs-lock { color: rgba(236, 228, 214, 0.86); }

/* Page swarm (Blog swarm) · blog posts as bubbles coloured by topic on flat warm paper, dark ink overlay, sans labels */
.qs-stage.qs-page-swarm { background: #f7f2ea; }
.qs-page-swarm .qs-page-swarm__head { text-align: left; }
.qs-page-swarm .qs-counter__value { color: #2b2522; }
.qs-page-swarm .qs-counter__label { color: #6f655e; }
.qs-page-swarm__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35em 1.1em;
  max-width: 42cqw;
  margin-top: 1em;
  font-size: clamp(8px, 2.1cqmin, 30px);
  color: #5c534d;
}
.qs-page-swarm__key span { display: inline-flex; align-items: center; gap: 0.45em; white-space: nowrap; }
.qs-page-swarm__key i { width: 0.7em; height: 0.7em; border-radius: 50%; }
.qs-page-swarm__status {
  margin-top: 0.9em;
  font-family: var(--font);
  font-size: clamp(8px, 2.4cqmin, 34px);
  color: #4a413c;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.6s ease;
}
.qs-page-swarm__status.is-on { opacity: 1; }
.qs-stage.qs-page-swarm.is-dark { background: radial-gradient(130% 110% at 50% 45%, #18161a 0%, #131114 70%, #0f0e10 100%); }
.qs-page-swarm.is-dark .qs-counter__value { color: rgba(240, 233, 226, 0.92); }
.qs-page-swarm.is-dark .qs-counter__label { color: rgba(236, 228, 220, 0.5); }
.qs-page-swarm.is-dark .qs-page-swarm__key { color: rgba(236, 228, 220, 0.6); }
.qs-page-swarm.is-dark .qs-page-swarm__status { color: rgba(236, 228, 220, 0.72); }

/* Visitor mosaic · countries by month on warm paper, three oranges, the ring centred with no headline */
.qs-stage.qs-visitor-mosaic {
  background: radial-gradient(120% 100% at 50% 45%, #fbf7f0 0%, #f7f1e8 60%, #efe6d8 100%);
}
.qs-stage.qs-visitor-mosaic.is-dark {
  background: radial-gradient(120% 100% at 50% 45%, #1b1410 0%, #140f0c 60%, #0d0a08 100%);
}

/* Page census · every page of the site as a radial almanac on cream paper, small Inter ink, muted section arcs */
.qs-stage.qs-page-census { background: #f3eee2; }
.qs-page-census { --pc-ink: #28241f; --pc-ink-2: #5f584d; --pc-ink-3: #8a8173; }
.qs-page-census__centre {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: none;
  text-align: center;
  color: var(--pc-ink);
  font-family: var(--font);
}
.qs-page-census__focus { opacity: 0; transition: opacity 0.45s ease; }
.qs-page-census__focus.is-on { opacity: 1; }
.qs-page-census__focus-sec {
  font-size: calc(var(--pc-r) * 0.072);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qs-page-census__focus-title {
  margin-top: 0.35em;
  font-size: calc(var(--pc-r) * 0.13);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-wrap: balance;
}
.qs-page-census__focus-meta {
  margin-top: 0.5em;
  font-size: calc(var(--pc-r) * 0.088);
  font-variant-numeric: tabular-nums;
  color: var(--pc-ink-2);
  white-space: nowrap;
}
.qs-page-census__focus-meta + .qs-page-census__focus-meta { margin-top: 0.15em; }
.qs-page-census__centre.is-tight,
.qs-page-census__centre.is-snug .qs-page-census__focus-meta.is-more { display: none; }
.qs-page-census .qs-lock { color: rgba(40, 36, 31, 0.86); }
/* Dark: the almanac on warm night paper, off-white ink */
.qs-stage.qs-page-census.is-dark { background: #131210; }
.qs-page-census.is-dark { --pc-ink: #ece4d4; --pc-ink-2: #b3aa9a; --pc-ink-3: #8a8274; }
.qs-page-census.is-dark .qs-lock { color: rgba(236, 228, 212, 0.86); }

/* Talent map · hex-bin map of Australia on a quiet dark ground, stepped legend like a newspaper choropleth */
.qs-stage.qs-talent-map {
  background:
    radial-gradient(120% 100% at 55% 50%, #14151c 0%, #101117 60%, #0b0c10 100%);
}
.qs-talent-map .qs-talent-map__head { text-align: left; }
.qs-talent-map__focus {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.4cqmin, 34px);
  color: #f2dcb4;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.qs-talent-map__focus.is-on { opacity: 1; transform: none; }
.qs-talent-map__legend {
  position: absolute;
  left: 7cqw;
  bottom: 5cqh;
  font-size: clamp(7px, 1.9cqmin, 26px);
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
}
.qs-talent-map__legend-title {
  margin-bottom: 0.7em;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qs-talent-map__scale { display: flex; align-items: flex-start; gap: 0.9em; }
.qs-talent-map__ramp { position: relative; display: flex; padding-bottom: 1.5em; }
.qs-talent-map__ramp i,
.qs-talent-map__none i { display: block; width: 3.2em; height: 0.6em; }
.qs-talent-map__ramp b {
  position: absolute;
  top: -0.2em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  transform: translateX(-50%);
  padding-top: 1.35em;
  white-space: nowrap;
}
.qs-talent-map__ramp b::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 1em;
  background: rgba(20, 21, 28, 0.9);
}
.qs-talent-map__none { display: flex; flex-direction: column; align-items: flex-start; gap: 0.55em; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .qs-talent-map__focus { transition: opacity 1.4s ease; transform: none; }
}

/* Subscription month · a calm business infographic on warm paper: honey, apricot, sky and navy, light numerals */
.qs-stage.qs-subscription-month {
  --sm-ink: #28324a;
  --sm-ink-2: #5d6578;
  --sm-muted: #978f83;
  --sm-panel: rgba(255, 253, 248, 0.62);
  --sm-track: #e9e2d5;
  --sm-honey: #d8ad62;
  --sm-apricot: #d99272;
  --sm-sky: #8db3c7;
  --sm-navy: #44587a;
  --sm-past: #c9d4dd;
  --sm-label: clamp(6.5px, 1.32cqmin, 24px);
  --sm-small: clamp(7px, 1.5cqmin, 27px);
  background: radial-gradient(130% 110% at 28% 18%, #f8f4ec 0%, #f3eee4 58%, #ece5d8 100%);
  color: var(--sm-ink);
}
.qs-subscription-month__host { position: absolute; inset: 0; }
.qs-subscription-month__board {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 2.6cqh;
  padding: 4.4cqh 3.6cqw 4cqh;
}
.qs-subscription-month p { margin: 0; }
.qs-subscription-month__head { display: flex; align-items: baseline; justify-content: space-between; gap: 2em; }
.qs-subscription-month__brand {
  font-size: clamp(8px, 1.9cqmin, 34px);
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
}
.qs-subscription-month__brand span { margin-left: 0.6em; font-weight: 400; color: var(--sm-muted); }
.qs-subscription-month__date,
.qs-subscription-month__label,
.qs-subscription-month__gauge-name,
.qs-subscription-month__side-name {
  font-size: var(--sm-label);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sm-muted);
  white-space: nowrap;
}
.qs-subscription-month__aside,
.qs-subscription-month__dot-key { font-size: var(--sm-label); color: var(--sm-muted); white-space: nowrap; }
.qs-subscription-month__grid {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1.6cqmin;
}
.qs-subscription-month__panel {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 2.5cqmin;
  border-radius: 1.8cqmin;
  background: var(--sm-panel);
  box-shadow: 0 0.5cqmin 2.4cqmin rgba(40, 50, 74, 0.04);
}
.qs-subscription-month__label { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.qs-subscription-month__panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1em; }
.qs-subscription-month__hero { grid-row: 1 / 3; }
.qs-subscription-month__months { grid-column: 2 / 4; }

/* rings, shared */
.qs-subscription-month svg { display: block; overflow: visible; }
.qs-subscription-month text { font-family: var(--font); font-variant-numeric: tabular-nums; }
.qs-subscription-month__track { fill: none; stroke: var(--sm-track); }
.qs-subscription-month__arc,
.qs-subscription-month__seg { fill: none; stroke-linecap: round; }
.qs-subscription-month__seg { stroke-linecap: butt; }
.qs-subscription-month .is-honey { stroke: var(--sm-honey); background: var(--sm-honey); }
.qs-subscription-month .is-apricot { stroke: var(--sm-apricot); background: var(--sm-apricot); }
.qs-subscription-month .is-sky { stroke: var(--sm-sky); background: var(--sm-sky); }
.qs-subscription-month .is-navy { stroke: var(--sm-navy); background: var(--sm-navy); }

/* hero */
.qs-subscription-month__hero-ring { position: relative; flex: 1; min-height: 0; margin: 2.4cqmin 0 2cqmin; }
.qs-subscription-month__hero-ring svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qs-subscription-month__hero-value { font-size: 15.5px; font-weight: 300; letter-spacing: -0.03em; fill: var(--sm-ink); }
.qs-subscription-month__hero-sub { font-size: 4.3px; fill: var(--sm-ink-2); }
.qs-subscription-month__pace line { stroke: var(--sm-ink); stroke-width: 0.7; stroke-linecap: round; opacity: 0.5; }
.qs-subscription-month__now-dot { fill: var(--sm-honey); stroke: #fbf8f2; stroke-width: 0.9; }
.qs-subscription-month__now-halo {
  fill: var(--sm-honey);
  transform-box: fill-box;
  transform-origin: center;
  animation: qs-subscription-month-pulse 4.2s ease-out infinite;
}
@keyframes qs-subscription-month-pulse {
  0% { transform: scale(1); opacity: 0.5; }
  70%, 100% { transform: scale(3.4); opacity: 0; }
}
.qs-subscription-month__hero-pace {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  font-size: var(--sm-small);
  color: var(--sm-ink-2);
  white-space: nowrap;
}
.qs-subscription-month__hero-pace i { width: 2px; height: 1em; border-radius: 1px; background: var(--sm-ink); opacity: 0.45; }

.qs-subscription-month__hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2cqmin;
  margin-top: 3.2cqmin;
  padding-top: 2.4cqmin;
  border-top: 1px solid rgba(40, 50, 74, 0.07);
}
.qs-subscription-month__stat-value {
  margin-bottom: 0.7cqmin !important;
  font-size: clamp(10px, 3.2cqmin, 60px);
  font-weight: 300;
  letter-spacing: -0.025em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

/* revenue by month */
.qs-subscription-month__bars {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.3cqmin;
  margin: 2.6cqmin 0.4cqmin calc(var(--sm-label) + 1.2cqmin);
}
.qs-subscription-month__bar { position: relative; display: flex; flex-direction: column; justify-content: flex-end; }
.qs-subscription-month__bar-fill,
.qs-subscription-month__bar-goal {
  display: block;
  width: 100%;
  border-radius: 0.7cqmin 0.7cqmin 0.25cqmin 0.25cqmin;
}
.qs-subscription-month__bar-fill { position: relative; background: var(--sm-past); transition: height 1.6s ease; }
.qs-subscription-month__bar.is-now .qs-subscription-month__bar-fill { background: var(--sm-honey); transition: none; }
.qs-subscription-month__bar-goal { position: absolute; left: 0; bottom: 0; background: rgba(216, 173, 98, 0.17); }
.qs-subscription-month__bar-label {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 1cqmin;
  text-align: center;
  font-size: var(--sm-label);
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--sm-muted);
}
.qs-subscription-month__bar.is-now .qs-subscription-month__bar-label { color: var(--sm-ink); }

/* subscribers by plan */
.qs-subscription-month__mix-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 2cqmin; margin-top: 2.2cqmin; }
.qs-subscription-month__donut { position: relative; flex: 1; min-height: 0; }
.qs-subscription-month__donut svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.qs-subscription-month__donut-value { font-size: 15px; font-weight: 300; letter-spacing: -0.03em; fill: var(--sm-ink); }
.qs-subscription-month__donut-sub { font-size: 5.6px; fill: var(--sm-muted); }
.qs-subscription-month__legend {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9cqmin 2.2cqmin;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--sm-label);
  color: var(--sm-ink-2);
}
.qs-subscription-month__legend li { display: flex; align-items: center; gap: 0.6em; min-width: 0; white-space: nowrap; }
.qs-subscription-month__legend i { flex: none; width: 0.7em; height: 0.7em; border-radius: 50%; }
.qs-subscription-month__legend-name { overflow: hidden; text-overflow: ellipsis; }
.qs-subscription-month__legend b { margin-left: auto; font-weight: 500; color: var(--sm-ink); font-variant-numeric: tabular-nums; }

/* customer health */
.qs-subscription-month__gauges {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  gap: 1.4cqmin;
  margin-top: 1.8cqmin;
}
.qs-subscription-month__gauge { display: flex; align-items: center; gap: 2.2cqmin; min-width: 0; min-height: 0; }
.qs-subscription-month__gauge svg { flex: none; height: 100%; width: auto; aspect-ratio: 1; }
.qs-subscription-month__gauge-text { min-width: 0; overflow: hidden; }
.qs-subscription-month__gauge-value { font-size: 22px; font-weight: 300; letter-spacing: -0.03em; fill: var(--sm-ink); }
.qs-subscription-month__gauge-name { color: var(--sm-ink-2); }
.qs-subscription-month__gauge-note { margin-top: 0.5cqmin !important; font-size: var(--sm-small); color: var(--sm-muted); white-space: nowrap; }

/* top coffees */
.qs-subscription-month__rank-list {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  margin: 1.2cqmin 0 0;
  padding: 0;
  list-style: none;
}
.qs-subscription-month__rank-row {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: var(--sm-small);
  color: var(--sm-ink-2);
  white-space: nowrap;
}
.qs-subscription-month__rank-row span { overflow: hidden; text-overflow: ellipsis; }
.qs-subscription-month__rank-row b { font-weight: 500; color: var(--sm-ink); font-variant-numeric: tabular-nums; }
.qs-subscription-month__rank-track {
  height: max(2px, 0.55cqmin);
  margin-top: 0.8cqmin;
  border-radius: 99px;
  background: var(--sm-track);
  overflow: hidden;
}
.qs-subscription-month__rank-track i { display: block; height: 100%; border-radius: inherit; background: var(--sm-apricot); }
.qs-subscription-month__rank-list li + li .qs-subscription-month__rank-track i { opacity: 0.62; }

/* new vs churned */
.qs-subscription-month__vs-body {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 1.8cqmin;
  margin-top: 2.2cqmin;
  overflow: hidden;
}
.qs-subscription-month__side { min-width: 0; }
.qs-subscription-month__side-name { overflow: hidden; text-overflow: ellipsis; }
.qs-subscription-month__side.is-new { grid-column: 1; }
.qs-subscription-month__side.is-churn { grid-column: 3; }
.qs-subscription-month__side-value {
  font-size: clamp(12px, 4.4cqmin, 80px);
  font-weight: 300;
  letter-spacing: -0.03em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.qs-subscription-month__side-name { margin: 0.9cqmin 0 1.8cqmin !important; }
.qs-subscription-month__vs-mark { padding-top: 1.6cqmin; font-size: var(--sm-small); color: var(--sm-muted); }
.qs-subscription-month__dots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.9cqmin; }
.qs-subscription-month__dots i { aspect-ratio: 1; border-radius: 50%; background: var(--sm-sky); }
.qs-subscription-month__side.is-churn .qs-subscription-month__dots i { background: var(--sm-apricot); }
.qs-subscription-month__dot-key { display: flex; align-items: center; gap: 0.6em; margin-top: 1cqmin !important; }
.qs-subscription-month__dot-key i { width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--sm-ink); opacity: 0.28; }

/* bare stage, pause, motion */
.qs-subscription-month.is-bare .qs-subscription-month__head { display: none; }
.qs-subscription-month.is-paused .qs-subscription-month__now-halo { animation-play-state: paused; }
.qs-subscription-month.is-still .qs-subscription-month__now-halo { animation: none; opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .qs-subscription-month__now-halo { animation: none; opacity: 0; }
  .qs-subscription-month__bar-fill { transition: none; }
}

/* small cards: keep the shapes, drop the fine print */
@container (max-width: 640px) {
  .qs-subscription-month__board { gap: 2cqh; padding: 4cqh 3.4cqw 3.6cqh; }
  .qs-subscription-month__grid { gap: 1.8cqmin; grid-template-columns: 1.2fr 1fr 1fr 1fr; }
  .qs-subscription-month__panel { padding: 2.6cqmin; border-radius: 2.2cqmin; }
  .qs-subscription-month__brand span,
  .qs-subscription-month__aside,
  .qs-subscription-month__legend,
  .qs-subscription-month__gauge-note,
  .qs-subscription-month__dot-key,
  .qs-subscription-month__vs-mark,
  .qs-subscription-month__hero-pace i { display: none; }
  .qs-subscription-month__label,
  .qs-subscription-month__date,
  .qs-subscription-month__side-name { letter-spacing: 0.07em; }
  .qs-subscription-month__gauge-name { letter-spacing: 0.04em; }
  .qs-subscription-month__gauge { gap: 1.6cqmin; }
  .qs-subscription-month__hero-stats { margin-top: 2cqmin; padding-top: 1.6cqmin; }
  .qs-subscription-month__rank-list li:nth-child(n + 4) { display: none; }
  .qs-subscription-month__bars { gap: 1cqmin; }
}

@container (max-width: 420px) {
  .qs-subscription-month__label,
  .qs-subscription-month__gauge-name,
  .qs-subscription-month__side-name { letter-spacing: 0.02em; }
  .qs-subscription-month__panel { padding: 2.6cqmin 2.2cqmin; }
}

/* portrait full-screen browsers: stack the panels two by two under the hero */
@container (aspect-ratio < 0.9) {
  .qs-subscription-month__grid { grid-template-columns: 1fr 1fr; grid-template-rows: 1.5fr 1fr 1fr 1fr; }
  .qs-subscription-month__hero { grid-row: auto; grid-column: 1 / 3; }
  .qs-subscription-month__months { grid-column: 1 / 3; }
}

/* System calm */
.qs-system-calm .qs-system-calm__head {
  text-align: left;
  transition: opacity 0.7s ease;
  text-shadow: 0 0 14px #080d1c, 0 0 4px #080d1c;
}
.qs-system-calm .qs-system-calm__head.is-fading { opacity: 0; }
.qs-system-calm .qs-counter__value {
  font-size: clamp(14px, 4.6cqmin, 84px);
  letter-spacing: -0.005em;
  color: #e6edff;
}
.qs-system-calm .qs-counter__label {
  margin-top: 0.7em;
  font-size: clamp(9px, 2.4cqmin, 34px);
  letter-spacing: 0.02em;
  text-transform: none;
  color: #8ea3d6;
}

/* Pipeline spectrum · CRM network on porcelain, ink overlay, quiet stage axis along the bottom */
.qs-stage.qs-pipeline-spectrum {
  background:
    radial-gradient(120% 100% at 50% 42%, #fdfcf9 0%, #f8f7f2 58%, #efede5 100%);
}
.qs-pipeline-spectrum .qs-pipeline-spectrum__head {
  left: 4cqw;
  top: 5cqh;
  text-align: left;
  text-shadow: 0 0 14px #f9f8f4, 0 0 5px #f9f8f4, 0 0 2px #f9f8f4;
}
.qs-pipeline-spectrum .qs-counter__value { color: #24233a; }
.qs-pipeline-spectrum .qs-counter__label { color: #6c6a7c; }
.qs-pipeline-spectrum__focus {
  margin-top: 0.9em;
  font-size: clamp(8px, 2.6cqmin, 36px);
  font-weight: 500;
  color: #3d3b52;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(0.3em);
  transition: opacity 1.4s ease, transform 1.4s ease;
}
.qs-pipeline-spectrum__focus.is-on { opacity: 1; transform: none; }
.qs-pipeline-spectrum__axis {
  position: absolute;
  left: 3.5cqw;
  right: 3.5cqw;
  bottom: 4.5cqh;
  height: 1.4em;
  font-size: clamp(7px, 2cqmin, 26px);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a8898;
  white-space: nowrap;
  pointer-events: none;
}
.qs-pipeline-spectrum__axis b {
  position: absolute;
  left: 0;
  right: 0;
  top: -0.9em;
  height: 1px;
  background: linear-gradient(90deg, rgba(230, 172, 50, 0.35), rgba(116, 50, 118, 0.3), rgba(74, 128, 198, 0.3), rgba(74, 156, 106, 0.3), rgba(218, 198, 52, 0.4));
}
.qs-pipeline-spectrum__axis span {
  position: absolute;
  top: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  transform: translateX(-50%);
}
.qs-pipeline-spectrum__axis i { width: 0.55em; height: 0.55em; border-radius: 50%; }
.qs-pipeline-spectrum .qs-lock { color: rgba(36, 35, 58, 0.86); }
.qs-stage.qs-pipeline-spectrum.is-dark {
  background:
    radial-gradient(120% 100% at 50% 42%, #13121d 0%, #0e0d16 58%, #09080f 100%);
}
.qs-pipeline-spectrum.is-dark .qs-pipeline-spectrum__head { text-shadow: 0 0 14px #0e0d16, 0 0 5px #0e0d16, 0 0 2px #0e0d16; }
.qs-pipeline-spectrum.is-dark .qs-counter__value { color: rgba(236, 233, 246, 0.92); }
.qs-pipeline-spectrum.is-dark .qs-counter__label { color: rgba(214, 210, 232, 0.55); }
.qs-pipeline-spectrum.is-dark .qs-pipeline-spectrum__axis { color: rgba(214, 210, 232, 0.45); }
.qs-pipeline-spectrum.is-dark .qs-pipeline-spectrum__axis b {
  background: linear-gradient(90deg, rgba(255, 210, 110, 0.32), rgba(184, 112, 186, 0.3), rgba(130, 176, 240, 0.3), rgba(126, 206, 150, 0.3), rgba(250, 236, 110, 0.36));
}
.qs-pipeline-spectrum.is-dark .qs-lock { color: rgba(236, 233, 246, 0.86); }
@media (prefers-reduced-motion: reduce) {
  .qs-pipeline-spectrum__focus { transition: opacity 1.4s ease; transform: none; }
}
.qs-pipeline-spectrum__axis.is-compact { letter-spacing: 0.04em; }
.qs-pipeline-spectrum__axis.is-compact i { display: none; }

/* Product census · Page census for every product in a shop; shares the .qs-page-census styles, adds the visitors sub line */
.qs-product-census .qs-page-census__sub {
  margin-top: 0.35em;
  font-size: calc(var(--pc-r) * 0.075);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--pc-ink-3);
  white-space: nowrap;
}
.qs-product-census .qs-page-census__centre.is-tight .qs-page-census__sub { display: none; }
.qs-product-census.is-wide .qs-page-census__sub { font-size: clamp(7px, 2.1cqmin, 30px); }

/* Winners and losers · weekly dot columns of product categories on white paper, newspaper diverging legend */
.qs-stage.qs-winners-losers { background: #fbfaf7; }
.qs-winners-losers .qs-winners-losers__head { text-align: left; top: 5.5cqh; }
.qs-winners-losers .qs-counter__value { color: #2b2925; }
.qs-winners-losers .qs-counter__value small { font-size: 0.5em; font-weight: 400; letter-spacing: 0; color: #8a8478; }
.qs-winners-losers .qs-counter__label { color: #6f6a62; }
.qs-winners-losers__status {
  margin-top: 0.8em;
  font-size: clamp(8px, 2.5cqmin, 34px);
  color: #2b2925;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.qs-winners-losers__status.is-on { opacity: 1; }
.qs-winners-losers__legend {
  position: absolute;
  right: 5cqw;
  top: 6.5cqh;
  display: flex;
  align-items: flex-start;
  gap: 1.4em;
  font-size: clamp(7px, 1.9cqmin, 24px);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #8a8478;
  pointer-events: none;
}
.qs-winners-losers__ramp { position: relative; display: flex; padding-bottom: 1.6em; }
.qs-winners-losers__ramp i { display: block; width: 2.3em; height: 1.1em; }
.qs-winners-losers__ramp b {
  position: absolute;
  top: 1.1em;
  padding-top: 0.55em;
  font-weight: 500;
  white-space: nowrap;
  transform: translateX(-50%);
}
.qs-winners-losers__ramp b::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 0.4em;
  background: rgba(43, 41, 37, 0.45);
}
.qs-winners-losers__key { display: flex; align-items: center; gap: 0.5em; height: 1.1em; white-space: nowrap; color: #6f6a62; }
.qs-winners-losers__key i { width: 0.8em; height: 0.8em; border-radius: 50%; background: #2a2724; }
.qs-winners-losers.is-compact .qs-winners-losers__legend { flex-direction: column; align-items: flex-end; gap: 0.2em; }
.qs-winners-losers.is-compact .qs-winners-losers__ramp i { width: 1.5em; }
.qs-stage.qs-winners-losers.is-dark { background: #121110; }
.qs-winners-losers.is-dark .qs-counter__value,
.qs-winners-losers.is-dark .qs-winners-losers__status { color: rgba(236, 230, 218, 0.92); }
.qs-winners-losers.is-dark .qs-counter__value small,
.qs-winners-losers.is-dark .qs-winners-losers__legend { color: rgba(236, 230, 218, 0.5); }
.qs-winners-losers.is-dark .qs-counter__label,
.qs-winners-losers.is-dark .qs-winners-losers__key { color: rgba(236, 230, 218, 0.62); }
.qs-winners-losers.is-dark .qs-winners-losers__ramp b::before { background: rgba(236, 230, 218, 0.4); }
.qs-winners-losers.is-dark .qs-winners-losers__key i { background: #ece6da; }
@media (prefers-reduced-motion: reduce) {
  .qs-winners-losers__status { transition: none; }
}

/* Page arc */
.qs-page-arc { background: #29292b; }
.qs-page-arc__head {
  position: absolute;
  left: 4.5cqw;
  bottom: 5.5cqh;
  font-family: 'Roboto Mono', ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
  text-shadow: 0 0 10px #222224, 0 0 3px #222224;
}
.qs-page-arc__head.is-on { opacity: 1; }
.qs-page-arc__name {
  font-size: clamp(10px, 2cqmin, 28px);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: pre;
  color: #ecebe6;
}
.qs-page-arc__sub {
  margin-top: 0.6em;
  font-size: clamp(8px, 1.25cqmin, 18px);
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #9a9893;
}
.qs-page-arc--compact .qs-page-arc__sub { display: none; }
.qs-stage.qs-page-arc.is-dark { background: #131315; }
.qs-page-arc.is-dark .qs-page-arc__head { text-shadow: 0 0 10px #0f0f11, 0 0 3px #0f0f11; }

/* Source flow · traffic sources flowing to landing products, pastel ribbons on deep navy */
.qs-stage.qs-source-flow {
  background:
    radial-gradient(120% 100% at 45% 40%, #24305a 0%, #1d2749 58%, #161e3b 100%);
}
.qs-source-flow .qs-source-flow__head {
  left: 3.5cqw;
  top: 4.2cqh;
  text-align: left;
  text-shadow: 0 0 12px #1d2749, 0 0 4px #1d2749;
}
.qs-source-flow .qs-counter__value {
  font-size: clamp(11px, 2.5cqmin, 30px);
  font-weight: 400;
  color: #e4e8f8;
  white-space: nowrap;
}
.qs-source-flow .qs-counter__label {
  margin-top: 0.5em;
  font-size: clamp(6.5px, 1.7cqmin, 22px);
  color: rgba(170, 180, 222, 0.7);
}
.qs-source-flow .qs-lock { color: rgba(228, 232, 248, 0.9); }
.qs-stage.qs-source-flow.is-dark {
  background:
    radial-gradient(120% 100% at 45% 40%, #141a30 0%, #10152a 58%, #0b0f1e 100%);
}
.qs-source-flow.is-dark .qs-source-flow__head { text-shadow: 0 0 12px #10152a, 0 0 4px #10152a; }

/* Product schematic · the whole product as an engineering drawing on cream paper, ink overlay */
.qs-stage.qs-product-schematic { background: #f3eddf; }
.qs-product-schematic .qs-product-schematic__head {
  left: 3.5cqw;
  top: 3.5cqh;
  text-align: left;
  font-size: 12px;
  text-shadow: 0 0 10px #f3eddf, 0 0 4px #f3eddf, 0 0 2px #f3eddf;
}
.qs-product-schematic__kicker {
  font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.78em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b625a;
  white-space: nowrap;
}
.qs-product-schematic .qs-counter__value {
  margin-top: 0.15em;
  font-size: 2.6em;
  font-weight: 400;
  color: #221f1e;
}
.qs-product-schematic .qs-counter__label {
  margin-top: 0.2em;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: #a63a2c;
}
.qs-product-schematic .qs-lock { color: rgba(34, 31, 30, 0.86); text-shadow: 0 0 12px #f3eddf, 0 0 4px #f3eddf; }
/* Product schematic · dark: a night blueprint, pale blue-white ink on deep ink-blue */
.qs-stage.qs-product-schematic.is-dark { background: #0d111b; }
.qs-product-schematic.is-dark .qs-product-schematic__head {
  color: rgba(208, 220, 238, 0.9);
  text-shadow: 0 0 10px #0d111b, 0 0 4px #0d111b, 0 0 2px #0d111b;
}
.qs-product-schematic.is-dark .qs-product-schematic__kicker { color: rgba(208, 220, 238, 0.55); }
.qs-product-schematic.is-dark .qs-counter__label { color: #e8796a; }
.qs-product-schematic.is-dark .qs-counter__value { color: rgba(222, 232, 246, 0.94); }
.qs-product-schematic.is-dark .qs-lock { color: rgba(208, 220, 238, 0.86); text-shadow: 0 0 12px #0d111b, 0 0 4px #0d111b; }

/* Site weather · 60 days of web vitals and sessions as a radial almanac on white paper, Roboto Mono throughout; drawn on canvas, legend in the corner box */
.qs-stage.qs-site-weather { background: #faf9f6; }
.qs-site-weather .qs-lock { color: rgba(43, 43, 41, 0.86); }
/* Dark: the same almanac on a graphite night; worse days glow brighter */
.qs-stage.qs-site-weather.is-dark { background: #111215; }
.qs-site-weather.is-dark .qs-lock { color: rgba(226, 226, 220, 0.86); }

/* Account size · customer accounts as a bubble rosette on warm grey-beige, centred; Inter only */
.qs-stage.qs-account-size { background: #ebe8e0; }
.qs-account-size { --as-ink: #454c5c; --as-ink-2: #7c808a; }
/* Normal mode only: the walking account, two quiet lines in the bottom-left margin (size and place set in JS).
   Two stacked notes cross-fade: the old one leaves quickly, the new one arrives a beat later. */
.qs-account-size__focus {
  position: absolute;
  display: grid;
  pointer-events: none;
  font-family: var(--font);
  line-height: 1.45;
  color: var(--as-ink-2);
  font-variant-numeric: tabular-nums;
}
.qs-account-size__note {
  grid-area: 1 / 1;
  justify-self: start;
  align-self: end;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.qs-account-size__note.is-on { opacity: 1; transition: opacity 0.7s ease 0.15s; }
.qs-account-size__note b,
.qs-account-size__note span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-account-size__note b { font-weight: 500; color: var(--as-ink); }
.qs-account-size .qs-lock { color: rgba(69, 76, 92, 0.86); }
/* Dark: the rosette on a deep slate night, pale slate ink */
.qs-stage.qs-account-size.is-dark {
  background: radial-gradient(120% 100% at 50% 50%, #171920 0%, #121318 60%, #0d0e12 100%);
}
.qs-account-size.is-dark { --as-ink: #d6d9e1; --as-ink-2: #8a8f9b; }
.qs-account-size.is-dark .qs-lock { color: rgba(214, 217, 225, 0.86); }
@media (prefers-reduced-motion: reduce) {
  .qs-account-size__note, .qs-account-size__note.is-on { transition: none; }
}

/* Customer journey · one account's life as a polar almanac on white, flat dots, fine grey lines */
.qs-stage.qs-customer-journey { background: #fdfdfb; }
.qs-customer-journey { --cj-ink: #232323; --cj-ink-2: #5d5d5a; --cj-ink-3: #8e8e8a; }
.qs-customer-journey__panel {
  position: absolute;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  font-size: var(--cj-u, 14px);
  color: var(--cj-ink);
  transition: opacity 1.4s ease;
}
.qs-customer-journey__panel.is-out { opacity: 0; transition-duration: 2.4s; }
.qs-customer-journey__kicker {
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cj-ink-3);
}
.qs-customer-journey__name {
  margin-top: 0.5em;
  font-size: 2.05em;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  text-wrap: balance;
}
.qs-customer-journey__meta { margin-top: 0.45em; font-size: 1em; color: var(--cj-ink-2); }
.qs-customer-journey__name-inline { display: none; }
.qs-customer-journey__story {
  margin: 1.2em 0 0;
  max-width: 22em;
  font-size: 0.92em;
  line-height: 1.5;
  color: var(--cj-ink-2);
  text-wrap: pretty;
}
.qs-customer-journey__stats { display: flex; gap: 2em; margin: auto 0 0; }
.qs-customer-journey__stats dt { order: 2; margin-top: 0.35em; white-space: nowrap; font-size: 0.72em; letter-spacing: 0.06em; color: var(--cj-ink-3); }
.qs-customer-journey__stats div { display: flex; flex-direction: column; }
.qs-customer-journey__stats dd { margin: 0; font-size: 1.9em; font-weight: 400; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.qs-customer-journey__stats small { font-size: 0.5em; letter-spacing: 0; color: var(--cj-ink-3); }
.qs-customer-journey__week { margin-top: auto; }
.qs-customer-journey__week-title {
  padding-bottom: 0.6em;
  border-bottom: 1px solid rgba(35, 35, 35, 0.16);
  font-size: 0.72em;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cj-ink-3);
}
.qs-customer-journey__events { margin: 0.5em 0 0; padding: 0; list-style: none; min-height: 6.4em; }
.qs-customer-journey__events li {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 1.6em;
  font-size: 0.92em;
  opacity: 0;
  transform: translateY(-0.3em);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.qs-customer-journey__events li.is-in,
.qs-customer-journey__events li.is-empty { opacity: 1; transform: none; }
.qs-customer-journey__events li.is-empty { color: var(--cj-ink-3); }
.qs-customer-journey__events i { width: 0.68em; height: 0.68em; border-radius: 50%; flex: none; }
.qs-customer-journey__events span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qs-customer-journey__events em { font-style: normal; color: var(--cj-ink-3); font-variant-numeric: tabular-nums; }
.qs-customer-journey__pips { display: flex; gap: 0.55em; margin-top: 1.1em; }
.qs-customer-journey__pips i { width: 0.42em; height: 0.42em; border-radius: 50%; background: rgba(35, 35, 35, 0.18); transition: background 1.4s; }
.qs-customer-journey__pips i.is-on { background: var(--cj-ink); }
.qs-stage.qs-customer-journey.is-dark { background: #101113; }
.qs-customer-journey.is-dark { --cj-ink: rgba(230, 228, 222, 0.92); --cj-ink-2: rgba(230, 228, 222, 0.62); --cj-ink-3: rgba(230, 228, 222, 0.42); }
.qs-customer-journey.is-dark .qs-customer-journey__week-title { border-bottom-color: rgba(230, 228, 222, 0.14); }
.qs-customer-journey.is-dark .qs-customer-journey__pips i { background: rgba(230, 228, 222, 0.16); }
.qs-customer-journey.is-dark .qs-customer-journey__pips i.is-on { background: var(--cj-ink); }
/* Near-square stages: one quiet line under the dial. */
.qs-customer-journey__panel:not(.is-wide) { flex-direction: row; align-items: center; justify-content: space-between; gap: 1em; }
.qs-customer-journey__panel:not(.is-wide) > :not(.qs-customer-journey__meta):not(.qs-customer-journey__pips) { display: none; }
.qs-customer-journey__panel:not(.is-wide) .qs-customer-journey__meta {
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
}
.qs-customer-journey__panel:not(.is-wide) .qs-customer-journey__name-inline { display: inline; font-weight: 600; color: var(--cj-ink); }
.qs-customer-journey__panel:not(.is-wide) .qs-customer-journey__seats { display: none; }
.qs-customer-journey__panel:not(.is-wide) .qs-customer-journey__pips { margin: 0; flex: none; }
.qs-customer-journey .qs-lock { color: rgba(35, 35, 35, 0.86); }
@media (prefers-reduced-motion: reduce) {
  .qs-customer-journey__panel,
  .qs-customer-journey__events li { transition: none; }
}

/* Where we sell (market-wheel) */
.qs-stage.qs-market-wheel { background: #f7f2e9; }
.qs-market-wheel .qs-market-wheel__head {
  left: auto;
  right: 3.4cqw;
  top: 5.5cqh;
  text-align: right;
}
.qs-market-wheel__title {
  font-family: var(--font);
  font-style: italic;
  font-size: clamp(11px, 3.1cqh, 44px);
  line-height: 1.1;
  color: #3e3a37;
}
.qs-market-wheel .qs-counter__value {
  margin-top: 0.25em;
  font-size: clamp(16px, 6.4cqh, 96px);
  font-weight: 300;
  color: #3e3a37;
}
.qs-market-wheel .qs-counter__label {
  margin-top: 0.35em;
  font-size: clamp(7px, 1.55cqh, 22px);
  color: #8b8177;
}
.qs-market-wheel__status {
  margin-top: 1.1em;
  font-size: clamp(8px, 1.75cqh, 26px);
  font-variant-numeric: tabular-nums;
  color: #3e3a37;
  max-width: 25cqw;
  margin-left: auto;
  line-height: 1.45;
  min-height: 2.9em; /* two lines reserved, so nothing shifts as names change */
  text-wrap: balance;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.qs-market-wheel__status.is-on { opacity: 1; }
.qs-market-wheel__key {
  position: absolute;
  right: 3.4cqw;
  /* Sits above the corner "?" (26px, inset max(10px, 2.2cqmin)). */
  bottom: max(5.5cqh, calc(max(10px, 2.2cqmin) + 36px));
  display: grid;
  justify-items: end;
  gap: 0.55em;
  font-size: clamp(7px, 1.5cqh, 21px);
  font-weight: 500;
  color: #6d665f;
  pointer-events: none;
}
.qs-market-wheel__key span { display: flex; align-items: center; gap: 0.6em; white-space: nowrap; }
.qs-market-wheel__key svg { width: 1.15em; height: 1.15em; flex: none; order: 2; }
.qs-market-wheel__key em {
  margin-top: 0.3em;
  font-family: var(--font);
  font-size: 1em;
  font-weight: 400;
  color: #8b8177;
}
.qs-market-wheel.is-compact .qs-market-wheel__head { top: 4cqh; right: 4cqw; }
.qs-market-wheel.is-compact .qs-market-wheel__title { font-size: clamp(10px, 3.2cqw, 40px); }
.qs-market-wheel.is-compact .qs-counter__value { font-size: clamp(15px, 6.2cqw, 90px); }
.qs-market-wheel.is-compact .qs-counter__label { font-size: clamp(7px, 1.9cqw, 22px); }
.qs-market-wheel.is-compact .qs-market-wheel__status { font-size: clamp(7.5px, 2cqw, 24px); max-width: 52cqw; }
.qs-market-wheel.is-compact .qs-market-wheel__key { right: 4cqw; bottom: max(4cqh, calc(max(10px, 2.2cqmin) + 32px)); font-size: clamp(7px, 1.85cqw, 20px); gap: 0.45em; }
.qs-market-wheel.is-small .qs-market-wheel__key { display: none; }
.qs-market-wheel__key.is-tucked { visibility: hidden; }
.qs-stage.qs-market-wheel.is-dark { background: #121012; }
.qs-market-wheel.is-dark .qs-market-wheel__title,
.qs-market-wheel.is-dark .qs-counter__value,
.qs-market-wheel.is-dark .qs-market-wheel__status { color: rgba(238, 230, 220, 0.9); }
.qs-market-wheel.is-dark .qs-counter__label,
.qs-market-wheel.is-dark .qs-market-wheel__key em { color: rgba(238, 230, 220, 0.5); }
.qs-market-wheel.is-dark .qs-market-wheel__key { color: rgba(238, 230, 220, 0.7); }
.qs-market-wheel.is-dark .qs-market-wheel__head { text-shadow: 0 0 6px #121012, 0 0 3px #121012; }
.qs-market-wheel__head { text-shadow: 0 0 6px #f7f2e9, 0 0 3px #f7f2e9; }
@media (prefers-reduced-motion: reduce) {
  .qs-market-wheel__status { transition: none; }
}

/* Who's here · retro transit-poster quarter dial on cream paper; the people-now count sits boxed on the pie */
.qs-stage.qs-whos-here { background: #f5eedb; }
.qs-whos-here .qs-whos-here__count {
  transform: translate(-50%, -50%);
  padding: 0.12em 0.32em 0.16em;
  border: 1.5px solid #221d19;
  border-radius: 0.22em;
  background: #f5eedb;
  font-family: 'Barlow Condensed', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  text-align: center;
}
.qs-whos-here .qs-counter__value {
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1;
  color: #221d19;
}
.qs-whos-here .qs-counter__label {
  margin-top: 0.2em;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #221d19;
}
/* Dark: the same poster after hours, warm near-black with cream ink */
.qs-stage.qs-whos-here.is-dark { background: #131110; }
.qs-whos-here.is-dark .qs-whos-here__count { border-color: #e6dcc8; background: #131110; }
.qs-whos-here.is-dark .qs-counter__value,
.qs-whos-here.is-dark .qs-counter__label { color: #e6dcc8; }

/* Marketing year · a radial wall planner on cream: pale aqua tracks, deep teal campaigns, charcoal labels */
.qs-stage.qs-marketing-year { background: #f4efe0; --qs-my-u: 600px; }
.qs-marketing-year__head,
.qs-marketing-year__now {
  position: absolute;
  pointer-events: none;
  color: #34373b;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}
.qs-marketing-year__mast { display: flex; align-items: center; gap: 0.6em; }
.qs-marketing-year__year {
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  font-size: calc(var(--qs-my-u) * 0.06);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums;
}
.qs-marketing-year__tag {
  display: inline-block;
  padding: 0.5em 0.9em 0.45em;
  background: #34373b;
  color: #f4efe0;
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  font-size: max(6px, calc(var(--qs-my-u) * 0.021));
  letter-spacing: 0.26em;
  text-transform: uppercase;
  white-space: nowrap;
}
.qs-marketing-year__brief {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: max(7px, calc(var(--qs-my-u) * 0.029));
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #6c6e6c;
  white-space: nowrap;
}
.qs-marketing-year__figures,
.qs-marketing-year__key { display: none; }
.qs-marketing-year__now {
  text-align: center;
  font-size: max(7px, calc(var(--qs-my-u) * 0.029));
  font-variant-numeric: tabular-nums;
  color: #6c6e6c;
  white-space: nowrap;
  transition: opacity 0.26s ease;
}
.qs-marketing-year__now.is-out { opacity: 0; }
.qs-marketing-year__now b {
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #34373b;
}
.qs-marketing-year__what { color: #34373b; }
.qs-marketing-year__what.is-campaign { color: #135e69; font-weight: 600; }
.qs-marketing-year__sep { color: #aaa696; }

/* Wide stages: a wall planner. The title block, figures and key sit right of the circle, above the strip. */
.qs-marketing-year.is-wide .qs-marketing-year__mast { flex-direction: column; align-items: flex-start; gap: 0; }
.qs-marketing-year.is-wide .qs-marketing-year__year { font-size: calc(var(--qs-my-u) * 0.118); }
.qs-marketing-year.is-wide .qs-marketing-year__tag {
  margin-top: 0.7em;
  font-size: max(6px, calc(var(--qs-my-u) * 0.0165));
  letter-spacing: 0.34em;
}
.qs-marketing-year.is-wide .qs-marketing-year__brief { display: none; }
.qs-marketing-year.is-wide .qs-marketing-year__figures {
  display: flex;
  gap: 2.4em;
  margin: 1.9em 0 0;
  font-size: calc(var(--qs-my-u) * 0.0122);
}
.qs-marketing-year__figures dt {
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6c6e6c;
  white-space: nowrap;
}
.qs-marketing-year__figures dd {
  margin: 0.25em 0 0;
  font-family: 'Montserrat', 'Inter', -apple-system, sans-serif;
  font-weight: 500;
  font-size: 3.3em;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
  color: #34373b;
}
.qs-marketing-year.is-wide .qs-marketing-year__key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4em 1.5em;
  margin: 2.1em 0 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--qs-my-u) * 0.0122);
  color: #34373b;
}
.qs-marketing-year__key li { display: inline-flex; align-items: center; gap: 0.5em; white-space: nowrap; }
.qs-marketing-year__key i { display: inline-block; width: 0.8em; height: 0.8em; }
.qs-marketing-year__key .is-note { color: #6c6e6c; }
.qs-marketing-year.is-wide .qs-marketing-year__now {
  text-align: left;
  padding-top: 0.85em;
  border-top: 1px solid rgba(52, 55, 59, 0.22);
  font-size: calc(var(--qs-my-u) * 0.0175);
}
.qs-marketing-year.is-wide .qs-marketing-year__now { font-size: max(7px, calc(var(--qs-my-u) * 0.0175)); }
/* Small wide stages (device previews): the figures and key give way to one short line. */
.qs-marketing-year.is-compact .qs-marketing-year__figures,
.qs-marketing-year.is-compact .qs-marketing-year__key { display: none; }
.qs-marketing-year.is-compact .qs-marketing-year__brief {
  display: block;
  position: static;
  transform: none;
  margin-top: 0.9em;
  font-size: max(7px, calc(var(--qs-my-u) * 0.03));
}
.qs-marketing-year .qs-lock { color: rgba(52, 55, 59, 0.86); }
@media (prefers-reduced-motion: reduce) {
  .qs-marketing-year__now { transition: none; }
}
/* Dark: a deep teal-black night; the overlay ink turns to soft off-white */
.qs-stage.qs-marketing-year.is-dark { background: #0c1113; }
.qs-marketing-year.is-dark .qs-marketing-year__head,
.qs-marketing-year.is-dark .qs-marketing-year__now,
.qs-marketing-year.is-dark .qs-marketing-year__now b,
.qs-marketing-year.is-dark .qs-marketing-year__what,
.qs-marketing-year.is-dark .qs-marketing-year__figures dd,
.qs-marketing-year.is-dark .qs-marketing-year__key { color: #e2ded2; }
.qs-marketing-year.is-dark .qs-marketing-year__now,
.qs-marketing-year.is-dark .qs-marketing-year__brief,
.qs-marketing-year.is-dark .qs-marketing-year__figures dt,
.qs-marketing-year.is-dark .qs-marketing-year__key .is-note { color: #979a94; }
.qs-marketing-year.is-dark .qs-marketing-year__tag { background: #232c2f; color: #d6d3c8; }
.qs-marketing-year.is-dark .qs-marketing-year__what.is-campaign { color: #93dce1; }
.qs-marketing-year.is-dark .qs-marketing-year__sep { color: #5c6461; }
.qs-marketing-year.is-dark.is-wide .qs-marketing-year__now { border-top-color: rgba(226, 222, 210, 0.16); }
.qs-marketing-year.is-dark .qs-lock { color: rgba(226, 222, 210, 0.86); }

/* Who's buying what (whos-buying) · dot columns threaded to an order-value scatter, on warm beige */
.qs-stage.qs-whos-buying { background: #e9e3d1; }
.qs-whos-buying .qs-whos-buying__now {
  top: auto;
  left: auto;
  right: 4.2cqw;
  bottom: 3.6cqh;
  text-align: right;
}
.qs-whos-buying .qs-whos-buying__line {
  margin: 0;
  font-family: var(--font);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(8px, 2.2cqh, 34px);
  letter-spacing: 0.01em;
  text-transform: none;
  font-variant-numeric: lining-nums;
  color: #2f2a24;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.qs-whos-buying .qs-whos-buying__line.is-on { opacity: 1; }
.qs-whos-buying.is-tall .qs-whos-buying__now { left: 5.5cqw; right: auto; bottom: 2.6cqh; text-align: left; }
.qs-whos-buying.is-tall .qs-whos-buying__line { font-size: clamp(8.5px, 2.9cqw, 30px); }
@media (prefers-reduced-motion: reduce) {
  .qs-whos-buying .qs-whos-buying__line { transition: none; }
}
.qs-stage.qs-whos-buying.is-dark { background: #13110e; }
.qs-whos-buying.is-dark .qs-whos-buying__line { color: rgba(230, 220, 200, 0.78); }
.qs-whos-buying.is-dark .qs-lock { color: rgba(230, 220, 200, 0.86); }

/* Time to buy (time-to-buy) · Nobel-style diagonal bands on cream paper; the head holds the median wait */
.qs-stage.qs-time-to-buy { background: #f2ead8; }
.qs-time-to-buy .qs-time-to-buy__head {
  left: 3.4cqw;
  top: 6.4cqh;
  text-align: left;
}
.qs-time-to-buy__title {
  font-family: var(--font);
  font-weight: 600;
  font-size: clamp(11px, 3.3cqh, 46px);
  line-height: 1.1;
  color: #2c2723;
}
.qs-time-to-buy .qs-counter__value {
  margin-top: 0.3em;
  font-family: var(--font);
  font-size: clamp(16px, 7cqh, 104px);
  font-weight: 400;
  color: #2c2723;
}
.qs-time-to-buy .qs-counter__label {
  margin-top: 0.4em;
  font-size: clamp(7px, 1.45cqh, 21px);
  letter-spacing: 0.1em;
  color: #8f857a;
}
.qs-time-to-buy:not(.is-wide) .qs-time-to-buy__head { left: 6cqw; top: 5cqh; }
.qs-time-to-buy:not(.is-wide) .qs-time-to-buy__title { font-size: clamp(11px, 4.4cqw, 44px); }
.qs-time-to-buy:not(.is-wide) .qs-counter__value { font-size: clamp(16px, 7.4cqw, 84px); }
.qs-time-to-buy:not(.is-wide) .qs-counter__label { font-size: clamp(7px, 1.9cqw, 20px); }
.qs-time-to-buy .qs-lock { color: rgba(44, 39, 35, 0.86); }
.qs-stage.qs-time-to-buy.is-dark { background: #14110e; }
.qs-time-to-buy.is-dark .qs-time-to-buy__title,
.qs-time-to-buy.is-dark .qs-counter__value { color: rgba(240, 230, 210, 0.9); }
.qs-time-to-buy.is-dark .qs-counter__label { color: rgba(222, 208, 186, 0.48); }
.qs-time-to-buy.is-dark .qs-lock { color: rgba(240, 230, 210, 0.86); }

/* Site paths · an eight-step path map on white paper, after a supply chain map; the count sits above the title cartouche */
.qs-stage.qs-site-paths { background: #fdfdfb; --qs-sp-u: 4px; }
.qs-site-paths .qs-site-paths__count {
  left: auto;
  top: auto;
  text-align: right;
  text-shadow: none;
  font-family: 'Open Sans', 'Inter', -apple-system, 'Helvetica Neue', Arial, sans-serif;
}
.qs-site-paths .qs-counter__value {
  font-size: max(15px, calc(var(--qs-sp-u) * 4.6));
  font-weight: 300;
  line-height: 1;
  color: #2a2a2a;
}
.qs-site-paths .qs-counter__label {
  margin-top: 0.45em;
  font-size: max(7px, calc(var(--qs-sp-u) * 1.05));
  font-weight: 600;
  letter-spacing: 0.14em;
  color: #8f8f8c;
}
.qs-site-paths .qs-site-paths__count.is-compact .qs-counter__value { font-size: max(14px, calc(var(--qs-sp-u) * 6.2)); }
.qs-site-paths .qs-site-paths__count.is-compact .qs-counter__label { font-size: max(7px, calc(var(--qs-sp-u) * 1.9)); }
.qs-site-paths .qs-lock { color: rgba(42, 42, 42, 0.86); }
.qs-stage.qs-site-paths.is-dark { background: #111113; }
.qs-site-paths.is-dark .qs-counter__value { color: rgba(236, 234, 230, 0.9); }
.qs-site-paths.is-dark .qs-counter__label { color: rgba(236, 234, 230, 0.5); }
.qs-site-paths.is-dark .qs-lock { color: rgba(236, 234, 230, 0.86); }

/* Selling fortnight (selling-fortnight) */
.qs-stage.qs-selling-fortnight { background: #fff; }
.qs-selling-fortnight__stats { position: absolute; inset: 0; pointer-events: none; }
.qs-selling-fortnight .qs-selling-fortnight__stat {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  text-align: left;
  color: #121212;
  font-family: 'Roboto Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
.qs-selling-fortnight__intro {
  margin: 0 0 0.55em;
  font-size: var(--intro);
  line-height: 1.2;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.qs-selling-fortnight__stat.is-bare .qs-selling-fortnight__intro { display: none; }
.qs-selling-fortnight__fig { display: flex; align-items: flex-end; }
.qs-selling-fortnight .qs-selling-fortnight__fig .qs-counter__value {
  font-family: 'Archivo Black', 'Arial Black', 'Helvetica Neue', sans-serif;
  font-size: var(--num);
  font-weight: 400;
  line-height: 0.74;
  letter-spacing: -0.035em;
  color: #f8e935;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.qs-selling-fortnight .qs-selling-fortnight__fig .qs-counter__label {
  position: relative;
  margin: 0 0 0 -0.35em;
  font-size: var(--unit);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: #121212;
  white-space: nowrap;
  text-box: trim-both cap alphabetic;
}
.qs-selling-fortnight__rule {
  position: relative;
  height: max(1px, calc(var(--num) * 0.014));
  /* Below the descender of the comma and the dollar sign. */
  margin-top: calc(var(--num) * 0.23);
  background: #121212;
}
.qs-selling-fortnight__rule::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: max(3px, calc(var(--num) * 0.045));
  aspect-ratio: 1;
  background: #121212;
  transform: translateY(-50%);
}
.qs-selling-fortnight .qs-lock { color: rgba(18, 18, 18, 0.86); }
.qs-stage.qs-selling-fortnight.is-dark { background: #11110e; }
.qs-selling-fortnight.is-dark .qs-selling-fortnight__stat,
.qs-selling-fortnight.is-dark .qs-selling-fortnight__fig .qs-counter__label { color: rgba(242, 240, 230, 0.86); }
.qs-selling-fortnight.is-dark .qs-selling-fortnight__fig .qs-counter__value {
  color: #efdc45;
  text-shadow: 0 0 0.25em rgba(239, 220, 69, 0.22);
}
.qs-selling-fortnight.is-dark .qs-selling-fortnight__rule,
.qs-selling-fortnight.is-dark .qs-selling-fortnight__rule::after { background: rgba(242, 240, 230, 0.78); }
.qs-selling-fortnight.is-dark .qs-lock { color: rgba(242, 240, 230, 0.86); }

/* ---- Live visitors, solid ---- */

.qs-stage.qs-live-visitors-solid { background: #10111c; }

/* Weather window · the world as hex-packed teal dots on a warm white ground; weather tints, campaign rings and tags (drawn on canvas) */
.qs-stage.qs-weather-window { background: #f6f5f0; }
/* the campaign ticker: a calm news crawl across the top of the stage */
.qs-weather-window__ticker {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  padding: 0.62em 0;
  font-size: clamp(8.5px, 1.75cqmin, 22px);
  line-height: 1.4;
  color: #26332f;
  background: rgba(38, 51, 47, 0.045);
  border-bottom: 1px solid rgba(38, 51, 47, 0.08);
  pointer-events: none;
}
.qs-weather-window__tlabel {
  flex: none;
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 0 1.4em 0 max(14px, 2.4cqw);
  font-size: 0.74em;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #4f7a6d;
  white-space: nowrap;
}
.qs-weather-window__tlabel i {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: #4f8f7f;
  animation: qs-weather-window-live 2.4s ease-in-out infinite;
}
@keyframes qs-weather-window-live { 50% { opacity: 0.3; } }
.qs-weather-window__track {
  position: relative;
  flex: 1;
  height: 1.4em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 96%, transparent);
}
.qs-weather-window__item {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  will-change: transform;
  transition: opacity 0.6s ease;
}
.qs-weather-window__item::before {
  content: '';
  position: absolute;
  left: -1.6em;
  top: 50%;
  width: 0.3em;
  height: 0.3em;
  margin-top: -0.15em;
  border-radius: 50%;
  background: #9fbcb2;
}
.qs-weather-window__item.is-out { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .qs-weather-window__tlabel i { animation: none; }
}
/* small stages: a smaller crawl, the label folds to its live dot */
@container (max-width: 560px) {
  .qs-weather-window__ticker { font-size: 8.5px; padding: 0.55em 0; }
  .qs-weather-window__tlabel { padding-right: 0.9em; }
  .qs-weather-window__tlabel span { display: none; }
}
.qs-weather-window__item.is-still { left: 1.2em; }
.qs-weather-window__item.is-still::before { display: none; }
.qs-weather-window__icon {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.42em;
  vertical-align: -0.2em;
  overflow: visible;
}
/* Weather window · dark: a deep teal night, the crawl in soft light ink */
.qs-stage.qs-weather-window.is-dark { background: #0b1111; }
.qs-weather-window.is-dark .qs-weather-window__ticker {
  color: rgba(222, 234, 230, 0.86);
  background: rgba(222, 234, 230, 0.035);
  border-bottom-color: rgba(222, 234, 230, 0.08);
}
.qs-weather-window.is-dark .qs-weather-window__tlabel { color: #7fb8a8; }
.qs-weather-window.is-dark .qs-weather-window__tlabel i { background: #80c4b0; box-shadow: 0 0 0.6em rgba(128, 196, 176, 0.6); }
.qs-weather-window.is-dark .qs-weather-window__item::before { background: #3f6a5f; }