/* ==========================================================================
   20Bet MULTI2 - "Ledger"
   The third 20Bet shell, built to share nothing with the earlier two:
   a light paper canvas and a white header (the older builds run dark chrome),
   section headings set in the left margin instead of above the text,
   soft rounded cards and pill buttons instead of chamfers, and a
   pick-a-card reveal where the other builds used a wheel and a drum reel.
   Prefix: qb-
   ========================================================================== */

:root {
  /* paper */
  --qb-paper:   #f1f3f7;
  --qb-paper-2: #e7ebf2;
  --qb-card:    #ffffff;
  --qb-card-2:  #f8fafc;
  --qb-ink-bg:  #16203a;

  /* ink */
  --qb-ink:   #0f1620;
  --qb-ink-2: #46536a;
  --qb-ink-3: #7c8aa3;
  --qb-on-dark: #eef2f9;

  /* lines */
  --qb-line:   #dfe5ee;
  --qb-line-2: #c9d3e2;

  /* signal */
  --qb-blue:      #1f5fd8;
  --qb-blue-d:    #1748ac;
  --qb-blue-soft: #e8effc;
  --qb-orange:    #ff7a00;
  --qb-orange-d:  #e56a00;
  --qb-orange-soft: #fff1e3;
  --qb-green:     #12a150;
  --qb-green-soft:#e6f6ed;
  --qb-red:       #d94040;
  --qb-red-soft:  #fdecec;

  /* shape */
  --qb-r-sm: 8px;
  --qb-r:    14px;
  --qb-r-lg: 20px;
  --qb-pill: 999px;

  --qb-sh-1: 0 1px 2px rgba(16, 26, 40, .05), 0 2px 8px rgba(16, 26, 40, .05);
  --qb-sh-2: 0 2px 4px rgba(16, 26, 40, .06), 0 12px 28px rgba(16, 26, 40, .09);
  --qb-sh-3: 0 8px 18px rgba(16, 26, 40, .10), 0 26px 60px rgba(16, 26, 40, .14);

  /* metrics */
  --qb-head-h: 70px;
  --qb-wrap:   1200px;
  --qb-aside:  224px;

  --qb-font: "Segoe UI", Roboto, "Helvetica Neue", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --qb-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Roboto Mono", monospace;

  --qb-ease: cubic-bezier(.4, 0, .2, 1);
  --qb-out:  cubic-bezier(.16, 1, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--qb-head-h) + 20px);
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  max-width: 100%;
  background: var(--qb-paper);
  color: var(--qb-ink);
  font-family: var(--qb-font);
  font-size: 16.5px;
  line-height: 1.72;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; height: auto; display: block; border: 0; }

/* any class that sets display would otherwise beat the UA rule for [hidden],
   which is how the JS hides rows in the country list and the route table */
[hidden] { display: none !important; }
a { color: var(--qb-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
::selection { background: var(--qb-blue); color: #fff; }
:focus-visible { outline: 3px solid rgba(31, 95, 216, .45); outline-offset: 2px; }

.qb-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;
}

.qb-skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--qb-blue); color: #fff; padding: 10px 18px;
  border-radius: 0 0 var(--qb-r-sm) 0; font-weight: 700;
}
.qb-skip:focus { left: 0; }

.qb-wrap { width: 100%; max-width: var(--qb-wrap); margin: 0 auto; padding: 0 20px; }
@media (max-width: 700px) { .qb-wrap { padding: 0 26px; } }

/* ==========================================================================
   Header
   ========================================================================== */
.qb-head {
  position: sticky; top: 0; z-index: 70;
  height: var(--qb-head-h);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--qb-line);
  transition: box-shadow .25s var(--qb-ease);
}
.qb-head.is-stuck { box-shadow: 0 6px 22px rgba(16, 26, 40, .08); }
.qb-head__in { display: flex; align-items: center; gap: 14px; height: 100%; }

.qb-logo { display: flex; align-items: center; flex: 0 0 auto; }
.qb-logo img {
  height: 26px; width: auto;
  /* the supplied mark is white, so it is inverted for the light header */
  filter: invert(1) hue-rotate(180deg) saturate(1.25) brightness(.72);
}

.qb-nav { display: none; align-items: center; gap: 2px; margin-left: auto; min-width: 0; }
.qb-nav__a {
  padding: 9px 15px;
  border-radius: var(--qb-pill);
  color: var(--qb-ink-2);
  font: 600 14.5px/1 var(--qb-font);
  text-decoration: none;
  transition: background .18s var(--qb-ease), color .18s var(--qb-ease);
}
.qb-nav__a:hover { background: var(--qb-paper-2); color: var(--qb-ink); text-decoration: none; }
.qb-nav__a.is-on { background: var(--qb-blue-soft); color: var(--qb-blue-d); }
.qb-fact__k, .qb-out__k, .qb-strip__k { overflow-wrap: break-word; }

.qb-head__r { display: flex; align-items: center; gap: 9px; margin-left: auto; flex: 0 0 auto; }
@media (min-width: 1010px) { .qb-nav { display: flex; } .qb-head__r { margin-left: 10px; } }

.qb-burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 42px; height: 40px; padding: 0 10px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-sm); cursor: pointer;
}
.qb-burger span {
  display: block; width: 100%; height: 2px; border-radius: 2px;
  background: var(--qb-ink); transform-origin: 50% 50%;
  transition: transform .24s var(--qb-out), opacity .16s var(--qb-ease), background .18s var(--qb-ease);
}
.qb-burger[aria-expanded="true"] { background: var(--qb-blue-soft); border-color: var(--qb-blue); }
.qb-burger[aria-expanded="true"] span { background: var(--qb-blue); }
.qb-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.qb-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(.4); }
.qb-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
@media (min-width: 1010px) { .qb-burger { display: none; } }

@media (max-width: 1009px) {
  .qb-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    display: block; margin: 0; padding: 10px 26px 18px;
    background: var(--qb-card); border-bottom: 1px solid var(--qb-line);
    box-shadow: var(--qb-sh-2);
    transform: translateY(-10px); opacity: 0; visibility: hidden;
    transition: transform .24s var(--qb-out), opacity .2s var(--qb-ease), visibility .24s;
    max-height: calc(100vh - var(--qb-head-h) - 20px);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .qb-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }
  .qb-nav__a { display: block; padding: 13px 14px; font-size: 16px; border-radius: var(--qb-r-sm); }
}

/* The header holds logo + country + button + burger. Below 620px that is more
   than the row can carry, so the button steps out of the header and appears
   at the foot of the menu panel instead - it is never lost, only moved. */
/* compound selectors on purpose: .qb-btn sets display later in this file, so a
   single-class rule here would lose to it and neither copy would ever hide */
.qb-nav .qb-nav__cta { display: none; }
@media (max-width: 619px) {
  .qb-head__r .qb-head__cta { display: none; }
  .qb-nav .qb-nav__cta { display: flex; margin: 12px 0 2px; width: 100%; }
}
@media (max-width: 1009px) and (min-width: 620px) {
  .qb-head__r .qb-head__cta { max-width: 42vw; overflow: hidden; }
}
@media (max-width: 380px) {
  .qb-head__in { gap: 10px; }
  .qb-logo img { height: 22px; }
}

/* country switcher */
.qb-loc { position: relative; }
.qb-loc__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px;
  background: var(--qb-card); border: 1px solid var(--qb-line); border-radius: var(--qb-pill);
  color: var(--qb-ink); font: 600 13.5px/1 var(--qb-font); cursor: pointer;
  transition: border-color .18s var(--qb-ease), box-shadow .18s var(--qb-ease);
}
.qb-loc__btn:hover { border-color: var(--qb-line-2); box-shadow: var(--qb-sh-1); }
.qb-loc__code {
  font: 700 10.5px/1 var(--qb-mono); letter-spacing: .06em;
  color: var(--qb-blue-d); background: var(--qb-blue-soft);
  padding: 5px 6px; border-radius: 5px;
}
.qb-loc__cur { display: none; }
@media (min-width: 620px) { .qb-loc__cur { display: inline; } }
.qb-loc__chev { width: 9px; height: 6px; opacity: .55; transition: transform .2s var(--qb-ease); }
.qb-loc__btn[aria-expanded="true"] .qb-loc__chev { transform: rotate(180deg); }

.qb-loc__panel {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: min(94vw, 380px);
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); box-shadow: var(--qb-sh-3);
  padding: 12px; z-index: 90;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s var(--qb-ease), transform .22s var(--qb-out), visibility .22s;
}
.qb-loc__panel.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.qb-loc__search {
  width: 100%; height: 40px; padding: 0 12px; margin-bottom: 10px;
  background: var(--qb-card-2); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-sm); color: var(--qb-ink); font: 400 14.5px/1 var(--qb-font);
}
.qb-loc__search::placeholder { color: var(--qb-ink-3); }
.qb-loc__search:focus { border-color: var(--qb-blue); outline: none; background: #fff; }

.qb-loc__list {
  list-style: none; margin: 0; padding: 0 4px 0 0;
  max-height: 330px; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: var(--qb-line-2) transparent;
}
.qb-loc__list::-webkit-scrollbar { width: 8px; }
.qb-loc__list::-webkit-scrollbar-track { background: transparent; }
.qb-loc__list::-webkit-scrollbar-thumb {
  background: var(--qb-line-2); border-radius: var(--qb-pill);
  border: 2px solid var(--qb-card);
}
.qb-loc__list::-webkit-scrollbar-thumb:hover { background: var(--qb-blue); }

.qb-loc__i {
  display: flex; align-items: center; gap: 9px; padding: 9px 10px;
  border-radius: var(--qb-r-sm); color: var(--qb-ink-2);
  font: 500 13.5px/1.3 var(--qb-font); text-decoration: none;
  transition: background .15s var(--qb-ease), color .15s var(--qb-ease);
}
.qb-loc__i:hover { background: var(--qb-paper); color: var(--qb-ink); text-decoration: none; }
.qb-loc__i.is-on { background: var(--qb-blue-soft); color: var(--qb-blue-d); font-weight: 700; }
.qb-loc__i .qb-loc__code { background: transparent; color: var(--qb-ink-3); padding: 0; }
.qb-loc__i.is-on .qb-loc__code { color: var(--qb-blue); }
.qb-loc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qb-loc__empty { color: var(--qb-ink-3); font-size: 13.5px; padding: 10px 4px 2px; margin: 0; }

@media (max-width: 719px) {
  .qb-loc { position: static; }
  .qb-loc__panel { left: 12px; right: 12px; width: auto; max-width: none; top: calc(100% + 8px); z-index: 95; }
  .qb-loc__list { grid-template-columns: 1fr; max-height: min(56vh, 400px); }
  .qb-loc__i { padding: 12px 10px; font-size: 14.5px; }
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.qb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--qb-pill); cursor: pointer;
  font: 700 15px/1 var(--qb-font); text-decoration: none;
  transition: transform .16s var(--qb-out), box-shadow .2s var(--qb-ease), background .18s var(--qb-ease);
}
.qb-btn:hover { text-decoration: none; transform: translateY(-2px); }
.qb-btn:active { transform: translateY(0); }
.qb-btn--pri { background: var(--qb-orange); color: #fff; box-shadow: 0 6px 16px rgba(255, 122, 0, .3); }
.qb-btn--pri:hover { background: var(--qb-orange-d); box-shadow: 0 10px 22px rgba(255, 122, 0, .34); }
.qb-btn--blue { background: var(--qb-blue); color: #fff; box-shadow: 0 6px 16px rgba(31, 95, 216, .26); }
.qb-btn--blue:hover { background: var(--qb-blue-d); }
.qb-btn--ghost { background: var(--qb-card); color: var(--qb-ink); box-shadow: inset 0 0 0 1px var(--qb-line-2); }
.qb-btn--ghost:hover { background: var(--qb-card-2); }
.qb-btn--sm { height: 40px; padding: 0 17px; font-size: 13.5px; }
.qb-btn__ar { width: 15px; height: 10px; flex: 0 0 auto; }

/* ==========================================================================
   Hero - art on the left, words on the right
   ========================================================================== */
.qb-hero { padding: 40px 0 8px; }
.qb-hero__in { display: grid; grid-template-columns: 1fr; gap: 26px; align-items: center; }
@media (min-width: 940px) {
  .qb-hero { padding: 54px 0 10px; }
  .qb-hero__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 48px; }
  .qb-hero__art { order: 1; }
  .qb-hero__tx { order: 2; }
}

.qb-hero__art { position: relative; }
.qb-hero__art img {
  width: 100%; height: clamp(300px, 31vw, 440px); object-fit: cover;
  border-radius: var(--qb-r-lg);
  box-shadow: var(--qb-sh-3);
}
.qb-hero__badge {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: var(--qb-pill);
  font: 700 11px/1 var(--qb-font); letter-spacing: .12em; text-transform: uppercase;
  color: var(--qb-ink-2); box-shadow: var(--qb-sh-1);
}

.qb-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 0 0 15px; padding: 7px 14px;
  background: var(--qb-blue-soft); border-radius: var(--qb-pill);
  color: var(--qb-blue-d); font: 700 11.5px/1 var(--qb-font);
  letter-spacing: .11em; text-transform: uppercase;
}
.qb-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: var(--qb-blue); }

.qb-h1 {
  margin: 0 0 16px;
  font-size: clamp(30px, 4.6vw, 47px);
  line-height: 1.1; font-weight: 800; letter-spacing: -.024em;
  color: var(--qb-ink);
}
.qb-lede { margin: 0 0 24px; font-size: clamp(16px, 1.7vw, 18px); line-height: 1.65; color: var(--qb-ink-2); max-width: 60ch; }
.qb-hero__cta { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 14px; }
.qb-fine { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--qb-ink-3); }

/* fact strip */
.qb-facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin: 34px 0 0;
  background: var(--qb-line); border-radius: var(--qb-r);
  overflow: hidden; box-shadow: var(--qb-sh-1);
}
@media (min-width: 720px) { .qb-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qb-fact { background: var(--qb-card); padding: 18px 18px; }
.qb-fact__v {
  display: block;
  font: 800 clamp(21px, 2.9vw, 27px)/1.1 var(--qb-font);
  letter-spacing: -.022em; color: var(--qb-ink);
  font-variant-numeric: tabular-nums;
}
.qb-fact:nth-child(2) .qb-fact__v { color: var(--qb-blue); }
.qb-fact:nth-child(4) .qb-fact__v { color: var(--qb-green); }
.qb-fact__k {
  display: block; margin-top: 4px;
  font: 600 11px/1.35 var(--qb-font); letter-spacing: .09em;
  text-transform: uppercase; color: var(--qb-ink-3);
}
/* the two OS tiles on the app page put the platform mark beside the figure */
.qb-fact--os .qb-fact__v { display: flex; align-items: center; gap: 9px; }
.qb-fact__ic { flex: 0 0 auto; display: block; width: 22px; height: 22px; color: var(--qb-ink-2); }
.qb-fact__ic svg { display: block; width: 100%; height: 100%; }

/* ==========================================================================
   Body shell
   ========================================================================== */
/* padding-block only: the shorthand here used to reset the side padding that
   .qb-wrap sets, which left every article paragraph flush against the edge */
.qb-body { padding-top: 34px; padding-bottom: 56px; }
.qb-col { max-width: 1080px; margin: 0 auto; min-width: 0; }

/* contents card */
.qb-toc {
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); box-shadow: var(--qb-sh-1);
  margin: 0 0 34px; overflow: hidden;
}
.qb-toc > summary {
  list-style: none; cursor: pointer; padding: 16px 20px;
  display: flex; align-items: center; gap: 10px;
  font: 700 12.5px/1 var(--qb-font); letter-spacing: .1em;
  text-transform: uppercase; color: var(--qb-ink-2);
}
.qb-toc > summary::-webkit-details-marker { display: none; }
.qb-toc > summary::after {
  content: ""; margin-left: auto; width: 9px; height: 9px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s var(--qb-ease);
}
.qb-toc[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.qb-toc[open] > summary { border-bottom: 1px solid var(--qb-line); color: var(--qb-ink); }
.qb-toc__n {
  background: var(--qb-blue); color: #fff; border-radius: var(--qb-pill);
  padding: 3px 9px; font: 700 11px/1.3 var(--qb-mono);
}
.qb-toc__list {
  list-style: none; margin: 0; padding: 14px 20px 18px;
  display: grid; grid-template-columns: 1fr; gap: 0 28px;
}
@media (min-width: 760px) { .qb-toc__list { grid-template-columns: 1fr 1fr; } }
.qb-toc__a {
  display: flex; gap: 11px; padding: 7px 0;
  color: var(--qb-ink-2); font-size: 14.5px; line-height: 1.45; text-decoration: none;
}
.qb-toc__a:hover { color: var(--qb-blue); text-decoration: none; }
.qb-toc__a span:last-child { overflow-wrap: break-word; min-width: 0; }
.qb-toc__a span:first-child { font: 700 11.5px/1.6 var(--qb-mono); color: var(--qb-ink-3); flex: 0 0 auto; }

/* ==========================================================================
   Sections - the signature: heading set in the left margin
   ========================================================================== */
.qb-intro { margin: 0 0 38px; }

.qb-sec {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 12px 0; margin: 0 0 46px;
  scroll-margin-top: calc(var(--qb-head-h) + 22px);
}
@media (min-width: 1040px) {
  .qb-sec { grid-template-columns: var(--qb-aside) minmax(0, 1fr); gap: 0 44px; }
  .qb-sec__h { position: sticky; top: calc(var(--qb-head-h) + 26px); align-self: start; }
}

/* the heading column is a fixed 224px, and a German compound such as
   "Verantwortungsbewusstes" is wider than that on its own, so without an
   explicit break it spills over the body column and overlaps the text */
.qb-sec__h { padding-top: 4px; min-width: 0; }
.qb-h2 {
  margin: 0;
  font-size: clamp(21px, 2.6vw, 26px); line-height: 1.22;
  font-weight: 800; letter-spacing: -.02em; color: var(--qb-ink);
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
          hyphens: auto;
}
.qb-h2__n {
  display: block; margin-bottom: 9px;
  font: 700 11.5px/1 var(--qb-mono); letter-spacing: .16em; color: var(--qb-blue);
}
.qb-sec__h::after {
  content: ""; display: block; width: 46px; height: 3px;
  background: var(--qb-orange); border-radius: 2px; margin-top: 14px;
}
@media (max-width: 1039px) {
  .qb-sec__h::after { margin-top: 10px; }
}

.qb-sec__b { min-width: 0; overflow-wrap: break-word; }
.qb-sec__b > *:first-child { margin-top: 0; }

.qb-h3 {
  overflow-wrap: break-word;
  margin: 30px 0 12px; font-size: clamp(17.5px, 2vw, 20px); line-height: 1.3;
  font-weight: 700; color: var(--qb-ink); letter-spacing: -.01em;
}
.qb-h4 {
  overflow-wrap: break-word;
  margin: 24px 0 10px; font-size: 15.5px; line-height: 1.42; font-weight: 700;
  color: var(--qb-blue-d);
}
.qb-col p { margin: 0 0 17px; color: var(--qb-ink-2); }
.qb-col p strong, .qb-col li strong { color: var(--qb-ink); font-weight: 700; }

.qb-ul, .qb-ol { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: qb-ol; }
.qb-ul > li, .qb-ol > li { position: relative; padding: 0 0 0 30px; margin: 0 0 11px; color: var(--qb-ink-2); }
.qb-ul > li::before {
  content: ""; position: absolute; left: 6px; top: 11px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--qb-card); box-shadow: 0 0 0 2px var(--qb-blue);
}
.qb-ol > li::before {
  counter-increment: qb-ol; content: counter(qb-ol);
  position: absolute; left: 0; top: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--qb-blue-soft); color: var(--qb-blue-d);
  font: 700 11.5px/21px var(--qb-mono); text-align: center;
}
.qb-sub { list-style: none; margin: 9px 0 0; padding: 0; }
.qb-sub > li { position: relative; padding-left: 17px; margin-bottom: 6px; font-size: 15px; color: var(--qb-ink-3); }
.qb-sub > li::before { content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 1px; background: var(--qb-line-2); }

/* ==========================================================================
   Tables
   ========================================================================== */
.qb-tw { margin: 0 0 24px; }
.qb-tw__scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); box-shadow: var(--qb-sh-1);
}
.qb-tbl--flow { min-width: 0 !important; }
.qb-tbl--flow th, .qb-tbl--flow td { overflow-wrap: break-word; }
.qb-tbl { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.qb-tbl thead th {
  background: var(--qb-card-2); color: var(--qb-ink-3);
  font: 700 10.5px/1.4 var(--qb-font); letter-spacing: .1em; text-transform: uppercase;
  text-align: left; padding: 13px 16px; border-bottom: 1px solid var(--qb-line); white-space: nowrap;
}
.qb-tbl td, .qb-tbl tbody th {
  padding: 13px 16px; border-bottom: 1px solid var(--qb-line);
  color: var(--qb-ink-2); text-align: left; vertical-align: top;
}
.qb-tbl tbody th { color: var(--qb-ink); font-weight: 700; width: 40%; background: var(--qb-card-2); }
.qb-tbl tbody tr:last-child td, .qb-tbl tbody tr:last-child th { border-bottom: 0; }
.qb-tbl tbody tr:hover td, .qb-tbl tbody tr:hover th { background: var(--qb-blue-soft); }
.qb-tbl td:first-child { color: var(--qb-ink); font-weight: 600; }
.qb-tw__hint { margin: 9px 0 0; font-size: 12px; color: var(--qb-ink-3); display: flex; align-items: center; gap: 7px; }
.qb-tw__hint::before { content: "\2194"; font-size: 14px; }
@media (min-width: 760px) { .qb-tw__hint { display: none; } }

/* ==========================================================================
   FAQ
   ========================================================================== */
.qb-q {
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); margin: 0 0 10px;
  transition: box-shadow .2s var(--qb-ease), border-color .2s var(--qb-ease);
}
.qb-q[open] { border-color: var(--qb-line-2); box-shadow: var(--qb-sh-1); }
.qb-q > summary { list-style: none; cursor: pointer; padding: 16px 52px 16px 18px; position: relative; }
.qb-q > summary::-webkit-details-marker { display: none; }
.qb-q__q { margin: 0; display: inline; font-size: 16px; line-height: 1.45; font-weight: 700; color: var(--qb-ink); }
.qb-q > summary::after {
  content: ""; position: absolute; right: 18px; top: 20px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--qb-blue-soft);
  transition: background .2s var(--qb-ease);
}
.qb-q > summary::before {
  content: ""; position: absolute; right: 25px; top: 26px; z-index: 2;
  width: 8px; height: 8px;
  border-right: 2px solid var(--qb-blue-d); border-bottom: 2px solid var(--qb-blue-d);
  transform: rotate(45deg); transition: transform .22s var(--qb-ease);
}
.qb-q[open] > summary::before { transform: rotate(-135deg) translate(-2px, -2px); }
.qb-q__a { padding: 0 18px; border-top: 1px solid var(--qb-line); padding-top: 15px; }
.qb-q__a p:last-child { margin-bottom: 16px; }

/* ==========================================================================
   Reviews + score
   ========================================================================== */
.qb-revs { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 22px; }
@media (min-width: 720px) { .qb-revs { grid-template-columns: 1fr 1fr; } }
.qb-rev {
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-left: 3px solid var(--qb-blue);
  border-radius: var(--qb-r); padding: 20px 20px 18px;
  box-shadow: var(--qb-sh-1);
}
.qb-rev:nth-child(3n+2) { border-left-color: var(--qb-orange); }
.qb-rev:nth-child(3n+3) { border-left-color: var(--qb-green); }
.qb-rev__who { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.qb-rev__av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--qb-blue-soft); color: var(--qb-blue-d);
  font: 800 15px/1 var(--qb-font);
}
.qb-rev:nth-child(3n+2) .qb-rev__av { background: var(--qb-orange-soft); color: var(--qb-orange-d); }
.qb-rev:nth-child(3n+3) .qb-rev__av { background: var(--qb-green-soft); color: var(--qb-green); }
.qb-rev__name { font-weight: 700; font-size: 14.5px; color: var(--qb-ink); }
.qb-rev__b { margin: 0; font-size: 15px; line-height: 1.62; color: var(--qb-ink-2); }

.qb-scores {
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); box-shadow: var(--qb-sh-1);
  padding: 22px 20px; margin: 0 0 22px;
}
.qb-scores__top { display: flex; align-items: center; gap: 18px; padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--qb-line); }
.qb-scores__big {
  flex: 0 0 auto;
  display: grid; place-items: center;
  width: 86px; height: 86px; border-radius: 50%;
  background: var(--qb-blue); color: #fff;
  font: 800 30px/1 var(--qb-font); letter-spacing: -.03em;
  box-shadow: 0 8px 20px rgba(31, 95, 216, .3);
  font-variant-numeric: tabular-nums;
}
.qb-scores__big small { display: block; font-size: 12px; font-weight: 600; opacity: .8; margin-top: 3px; }
.qb-scores__lbl { display: block; font: 700 12px/1.4 var(--qb-font); letter-spacing: .12em; text-transform: uppercase; color: var(--qb-ink); }
.qb-scores__sub { display: block; font-size: 13.5px; line-height: 1.5; color: var(--qb-ink-3); margin-top: 4px; max-width: 46ch; }

.qb-score { margin-bottom: 17px; }
.qb-score:last-child { margin-bottom: 0; }
.qb-score__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 7px; }
.qb-score__l { font-weight: 700; font-size: 15px; color: var(--qb-ink); }
.qb-score__v { margin-left: auto; font: 700 13.5px/1 var(--qb-mono); color: var(--qb-blue-d); }
.qb-score__bar { display: block; height: 8px; border-radius: var(--qb-pill); background: var(--qb-paper-2); overflow: hidden; }
.qb-score__fill { display: block; height: 100%; border-radius: var(--qb-pill); background: linear-gradient(90deg, var(--qb-blue), var(--qb-green)); }
.qb-score__d { margin: 7px 0 0; font-size: 13.5px; color: var(--qb-ink-3); }

/* ==========================================================================
   Modules
   ========================================================================== */
.qb-promo {
  margin: 0 0 36px; padding: 28px 26px;
  background: linear-gradient(135deg, #16203a, #223257);
  border-radius: var(--qb-r-lg); box-shadow: var(--qb-sh-2);
  display: grid; gap: 20px; align-items: center; color: var(--qb-on-dark);
}
@media (min-width: 760px) { .qb-promo { grid-template-columns: minmax(0, 1fr) auto; padding: 32px 34px; } }
.qb-promo__k { margin: 0 0 9px; font: 700 11px/1 var(--qb-font); letter-spacing: .16em; text-transform: uppercase; color: var(--qb-orange); }
.qb-promo__t { margin: 0 0 10px; font-size: clamp(20px, 2.6vw, 26px); line-height: 1.2; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.qb-promo__s { margin: 0 0 10px !important; font-size: 15px; color: rgba(238, 242, 249, .82) !important; max-width: 52ch; }
.qb-promo__f { margin: 0 !important; font-size: 12px; color: rgba(238, 242, 249, .55) !important; max-width: 58ch; }

.qb-band { position: relative; margin: 0 0 36px; border-radius: var(--qb-r-lg); overflow: hidden; box-shadow: var(--qb-sh-2); }
.qb-band img { width: 100%; height: 210px; object-fit: cover; }
@media (min-width: 760px) { .qb-band img { height: 260px; } }
.qb-band__cap {
  position: absolute; left: 16px; bottom: 16px;
  background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px);
  padding: 8px 14px; border-radius: var(--qb-pill);
  font: 700 10.5px/1 var(--qb-font); letter-spacing: .12em; text-transform: uppercase; color: var(--qb-ink-2);
}

.qb-next { margin: 6px 0 0; }
.qb-next__k { margin: 0 0 14px; font: 700 11.5px/1 var(--qb-font); letter-spacing: .16em; text-transform: uppercase; color: var(--qb-ink-3); }
.qb-next__grid { display: grid; grid-template-columns: 1fr; gap: 11px; }
@media (min-width: 720px) { .qb-next__grid { grid-template-columns: 1fr 1fr; } }
.qb-next__a {
  display: flex; align-items: center; gap: 12px; padding: 17px 18px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); color: var(--qb-ink-2);
  font-size: 14.5px; line-height: 1.45; text-decoration: none;
  transition: box-shadow .2s var(--qb-ease), transform .18s var(--qb-out), border-color .2s var(--qb-ease);
}
.qb-next__a:hover { box-shadow: var(--qb-sh-2); transform: translateY(-2px); border-color: var(--qb-line-2); color: var(--qb-ink); text-decoration: none; }
.qb-next__ar { flex: 0 0 auto; margin-left: auto; width: 16px; height: 11px; color: var(--qb-blue); }

.qb-strip { margin: 0 0 34px; }
.qb-strip__k { margin: 0 0 13px; font: 700 11px/1 var(--qb-font); letter-spacing: .15em; text-transform: uppercase; color: var(--qb-ink-3); }
.qb-strip__row {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.qb-strip__i {
  flex: 1 1 110px; min-width: 96px;
  background: var(--qb-card); border: 1px solid var(--qb-line); border-radius: var(--qb-r-sm);
  padding: 14px 16px; display: grid; place-items: center;
  transition: box-shadow .2s var(--qb-ease);
}
.qb-strip__i:hover { box-shadow: var(--qb-sh-1); }
.qb-strip__i img { height: 22px; width: auto; max-width: 100%; }

.qb-games { margin: 0 0 34px; }
.qb-games__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 560px) { .qb-games__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 880px) { .qb-games__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.qb-game {
  position: relative; border-radius: var(--qb-r); overflow: hidden;
  background: var(--qb-card); box-shadow: var(--qb-sh-1);
  transition: transform .25s var(--qb-out), box-shadow .25s var(--qb-ease);
}
.qb-game:hover { transform: translateY(-3px); box-shadow: var(--qb-sh-2); }
.qb-game img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.qb-game__n {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 11px 9px;
  background: linear-gradient(180deg, transparent, rgba(10, 16, 28, .88));
  font: 700 12px/1.3 var(--qb-font); color: #fff;
}

/* ==========================================================================
   Pick a card
   ========================================================================== */
.qb-pick {
  margin: 0 0 36px; padding: 26px 24px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-lg); box-shadow: var(--qb-sh-1);
}
.qb-pick__k { margin: 0 0 8px; font: 700 11px/1 var(--qb-font); letter-spacing: .16em; text-transform: uppercase; color: var(--qb-orange-d); }
.qb-pick__t { margin: 0 0 6px; font-size: clamp(19px, 2.5vw, 24px); font-weight: 800; letter-spacing: -.02em; color: var(--qb-ink); }
.qb-pick__s { margin: 0 0 20px !important; font-size: 15px; color: var(--qb-ink-2); }

.qb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 460px; }
.qb-card {
  position: relative; aspect-ratio: 2 / 3;
  background: none; border: 0; padding: 0; cursor: pointer;
  perspective: 900px;
}
.qb-card__in {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  transition: transform .62s var(--qb-out);
}
.qb-card.is-flipped .qb-card__in { transform: rotateY(180deg); }
.qb-card__f, .qb-card__b {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--qb-r); display: grid; place-items: center;
  box-shadow: var(--qb-sh-2);
}
.qb-card__f {
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .1) 0 6px, transparent 6px 12px),
    linear-gradient(150deg, var(--qb-blue), #123a8c);
  color: #fff;
}
.qb-card__f span { font: 800 26px/1 var(--qb-mono); opacity: .55; }
.qb-card:hover .qb-card__f { box-shadow: var(--qb-sh-3); }
.qb-card__b {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, #fff, var(--qb-orange-soft));
  box-shadow: var(--qb-sh-2), inset 0 0 0 2px var(--qb-orange);
  color: var(--qb-orange-d);
  padding: 10px; text-align: center;
}
.qb-card__b b { display: block; font: 800 clamp(15px, 3.4vw, 20px)/1.15 var(--qb-font); }
.qb-card__b i { display: block; font-style: normal; font-size: 11.5px; color: var(--qb-ink-3); margin-top: 5px; }
.qb-pick__hint { margin: 14px 0 0 !important; font-size: 13px; color: var(--qb-ink-3); }

.qb-pick__out { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--qb-line); display: none; }
.qb-pick__out.is-on { display: block; animation: qb-rise .5s var(--qb-out) both; }
@keyframes qb-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.qb-pick__win { margin: 0 0 5px !important; font: 700 11px/1 var(--qb-font); letter-spacing: .15em; text-transform: uppercase; color: var(--qb-green); }
.qb-pick__prize { margin: 0 0 9px; font-size: clamp(19px, 2.7vw, 25px); font-weight: 800; letter-spacing: -.02em; color: var(--qb-ink); }
.qb-pick__desc { margin: 0 0 16px !important; font-size: 15px; color: var(--qb-ink-2); }
.qb-pick__note { margin: 14px 0 0 !important; font-size: 12px; color: var(--qb-ink-3); }

/* ==========================================================================
   Wheel of fortune
   A ring, not a pie: the wedges form an annulus and the hub is a hole with
   the button in it. Wedge 0 sits under the pointer, and the wheel is rigged
   to come back to it, so it is the only wedge that ever lights up.
   ========================================================================== */
/* --- the corner popup that holds it ------------------------------------- */
.qb-wheelbox__tab {
  position: fixed; left: 18px; bottom: 18px; z-index: 66;
  display: inline-flex; align-items: center; gap: 10px;
  height: 56px; padding: 0 18px 0 6px;
  background: var(--qb-card); color: var(--qb-ink);
  border: 1px solid var(--qb-line); border-radius: var(--qb-pill);
  cursor: pointer; font: 800 13.5px/1.15 var(--qb-font); text-align: left;
  box-shadow: 0 10px 26px rgba(16, 26, 40, .16);
  transition: transform .22s var(--qb-out), box-shadow .22s var(--qb-ease);
}
.qb-wheelbox__tab:hover { transform: translateY(-2px); box-shadow: var(--qb-sh-3); }
.qb-wheelbox__lbl { max-width: 108px; }
/* on a phone the label makes the tab wide enough to sit on top of the article,
   so it drops away and the mini wheel alone does the job */
@media (max-width: 560px) {
  .qb-wheelbox__lbl { display: none; }
  .qb-wheelbox__tab { width: 56px; padding: 0; justify-content: center; }
}
.qb-wheelbox__mini {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(
    var(--qb-orange) 0 45deg, #16203a 45deg 90deg, #ffffff 90deg 135deg,
    var(--qb-blue) 135deg 180deg, #cfe0fb 180deg 225deg, var(--qb-blue-d) 225deg 270deg,
    #ffffff 270deg 315deg, #2560cf 315deg 360deg);
  box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--qb-line);
  position: relative;
  animation: qb-spin-slow 9s linear infinite;
}
.qb-wheelbox__mini::after {
  content: ""; position: absolute; inset: 32%;
  border-radius: 50%; background: var(--qb-card);
  box-shadow: 0 0 0 1px var(--qb-line);
}
@keyframes qb-spin-slow { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qb-wheelbox__mini { animation: none; } }
/* once opened, the tab gets out of the way of the panel it opened */
.qb-wheelbox.is-open .qb-wheelbox__tab { opacity: 0; visibility: hidden; }

.qb-wheelbox__veil {
  position: fixed; inset: 0; z-index: 71; display: none;
  animation: qb-veil-in .2s var(--qb-ease) both;
  background: rgba(10, 16, 28, .5);
}
.qb-wheelbox.is-open .qb-wheelbox__veil { display: block; }
@media (min-width: 700px) { .qb-wheelbox__veil { display: none !important; } }

.qb-wheelbox__pop {
  position: fixed; left: 18px; bottom: 18px; z-index: 72;
  /* A fixed box. height, not max-height: the result panel appears after the
     spin and would otherwise make the window grow under the reader's cursor.
     It stops short of the sticky header so the heading and the close button
     never end up underneath it. */
  width: min(370px, calc(100vw - 36px));
  height: min(624px, calc(100vh - var(--qb-head-h) - 28px));
  /* the disc is a square that rotates, so its corners sweep past the panel
     edge; only the circle inside is ever drawn, so clipping across is safe */
  /* the heading and the close button live outside the scroller, so a short
     laptop or phone screen can never scroll them out of the panel */
  display: flex; flex-direction: column; overflow: hidden;
  padding: 22px 20px 20px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-lg); box-shadow: 0 20px 60px rgba(16, 26, 40, .28);
  animation: qb-pop-in .28s var(--qb-out) both;
}
@keyframes qb-pop-in { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes qb-veil-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .qb-wheelbox__pop { animation: none; } }
@media (max-width: 699px) {
  /* on a phone it is a sheet over the veil, so it may cover the header */
  .qb-wheelbox__pop {
    left: 50%; bottom: 12px; transform: translateX(-50%);
    width: calc(100vw - 24px); height: min(624px, calc(100vh - 24px));
  }
  @keyframes qb-pop-in { from { opacity: 0; transform: translate(-50%, 14px); } }
}
.qb-wheelbox__head { flex: 0 0 auto; position: relative; }
.qb-wheelbox__body {
  flex: 1 1 auto; min-height: 0;
  /* the disc is a square that rotates, so its corners sweep past the panel edge;
     only the inscribed circle is ever drawn, so clipping across is safe */
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
}
.qb-wheelbox__x {
  position: absolute; right: -6px; top: -6px; z-index: 2;
  width: 32px; height: 32px; display: grid; place-items: center;
  background: var(--qb-paper); color: var(--qb-ink-2);
  border: 1px solid var(--qb-line); border-radius: 50%; cursor: pointer;
}
.qb-wheelbox__x:hover { background: var(--qb-paper-2); color: var(--qb-ink); }
.qb-wheelbox__x svg { width: 11px; height: 11px; }

.qb-wheel__k { margin: 0 40px 8px 0; font: 700 11px/1 var(--qb-font); letter-spacing: .16em; text-transform: uppercase; color: var(--qb-orange-d); }
.qb-wheel__t { margin: 0 0 6px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--qb-ink); }
.qb-wheel__s { margin: 0 0 18px !important; font-size: 13.5px; color: var(--qb-ink-2); }

.qb-wheel__stage {
  position: relative; width: 100%; max-width: 290px; margin: 0 auto;
  aspect-ratio: 1 / 1;
}
/* the box is a fixed size, so once the wheel has done its job it steps back to
   make room for the result rather than pushing the panel taller */
[data-qb-wheel].is-done .qb-wheel__stage { max-width: 208px; }
[data-qb-wheel].is-done .qb-wheel__s { display: none; }
.qb-wheel__disc { position: absolute; inset: 0; will-change: transform; }
.qb-wheel__disc svg { display: block; width: 100%; height: 100%; }

/* the wheel is the one place the blue-and-white palette runs at full strength:
   four blues, two whites, one pale tint, and the prize alone in brand orange */
.qb-wheel__rim { fill: none; stroke: rgba(15, 22, 32, .12); stroke-width: 1.6; }
.qb-wheel__ring { fill: none; stroke: rgba(15, 22, 32, .12); stroke-width: 1.6; }
.qb-wheel__w {
  stroke: #fff; stroke-width: 1.6;
  transition: fill .3s var(--qb-ease), opacity .3s var(--qb-ease);
}
.qb-wheel__w--0 { fill: var(--qb-orange); }
.qb-wheel__w--1 { fill: #16203a; }
.qb-wheel__w--2 { fill: #ffffff; }
.qb-wheel__w--3 { fill: var(--qb-blue); }
.qb-wheel__w--4 { fill: #cfe0fb; }
.qb-wheel__w--5 { fill: var(--qb-blue-d); }
.qb-wheel__w--6 { fill: #ffffff; }
.qb-wheel__w--7 { fill: #2560cf; }

.qb-wheel__l {
  font: 800 13.5px/1 var(--qb-font); letter-spacing: -.005em;
  fill: #fff; transition: opacity .3s var(--qb-ease);
}
.qb-wheel__l--0, .qb-wheel__l--2, .qb-wheel__l--6 { fill: #16203a; }
.qb-wheel__l--4 { fill: var(--qb-blue-d); }

/* the landing: the prize keeps its colour and everything else steps back */
[data-qb-wheel].is-done .qb-wheel__w.is-prize { stroke: #fff; stroke-width: 3.6; }
[data-qb-wheel].is-done .qb-wheel__disc { filter: drop-shadow(0 0 10px rgba(255, 122, 0, .55)); }

.qb-wheel__pin {
  position: absolute; left: 50%; top: -2px; z-index: 3;
  width: 0; height: 0; transform: translateX(-50%);
  border-left: 11px solid transparent; border-right: 11px solid transparent;
  border-top: 20px solid var(--qb-orange);
  filter: drop-shadow(0 2px 3px rgba(16, 26, 40, .25));
}
.qb-wheel__hub {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 52%; height: 52%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--qb-card);
  display: grid; place-items: center; padding: 10px; text-align: center;
}
.qb-wheel__go {
  max-width: 100%;
  padding: 12px 16px; border: 0; border-radius: var(--qb-pill);
  background: var(--qb-orange); color: #fff; cursor: pointer;
  font: 800 13.5px/1.25 var(--qb-font); letter-spacing: -.01em;
  box-shadow: var(--qb-sh-2);
  transition: transform .2s var(--qb-out), box-shadow .2s var(--qb-ease), background .2s var(--qb-ease);
}
.qb-wheel__go:hover { background: var(--qb-orange-d); box-shadow: var(--qb-sh-3); transform: translateY(-1px); }
.qb-wheel__go[disabled] { opacity: .55; cursor: default; transform: none; box-shadow: var(--qb-sh-1); }

.qb-wheel__out { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--qb-line); display: none; }
.qb-wheel__out.is-on { display: block; animation: qb-rise .5s var(--qb-out) both; }
.qb-wheel__won { margin: 0 0 5px !important; font: 700 11px/1 var(--qb-font); letter-spacing: .15em; text-transform: uppercase; color: var(--qb-green); }
.qb-wheel__prize { margin: 0 0 9px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--qb-ink); overflow-wrap: break-word; }
.qb-wheel__desc { margin: 0 0 14px !important; font-size: 13.5px; color: var(--qb-ink-2); }
/* one row for both buttons: two stacked rows is what pushed the panel over */
.qb-wheel__act { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.qb-wheel__act .qb-btn { height: 42px; padding: 0 18px; font-size: 14px; }
.qb-wheel__note { margin: 14px 0 0 !important; font-size: 12px; color: var(--qb-ink-3); }



/* ==========================================================================
   Tools
   ========================================================================== */
.qb-tool {
  margin: 0 0 36px; padding: 24px 22px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-lg); box-shadow: var(--qb-sh-1);
}
.qb-tool__k { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; font: 700 11px/1 var(--qb-font); letter-spacing: .16em; text-transform: uppercase; color: var(--qb-blue); }
.qb-tool__k::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: var(--qb-blue); }
.qb-tool__t { margin: 0 0 6px; font-size: clamp(18px, 2.3vw, 22px); font-weight: 800; letter-spacing: -.018em; color: var(--qb-ink); }
.qb-tool__s { margin: 0 0 20px !important; font-size: 14px; color: var(--qb-ink-3); }

.qb-fields { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 20px; }
@media (min-width: 640px) {
  .qb-fields--2 { grid-template-columns: 1fr 1fr; }
  .qb-fields--3 { grid-template-columns: repeat(3, 1fr); }
  .qb-fields--5 { grid-template-columns: repeat(5, 1fr); }
}
.qb-f { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.qb-f__l { font: 600 11.5px/1.35 var(--qb-font); letter-spacing: .05em; text-transform: uppercase; color: var(--qb-ink-3); }
.qb-f__in, .qb-f select {
  height: 46px; width: 100%; padding: 0 13px;
  background: var(--qb-card-2); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r-sm); color: var(--qb-ink);
  font: 700 16px/1 var(--qb-mono); font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
  transition: border-color .18s var(--qb-ease), background .18s var(--qb-ease);
}
.qb-f select {
  font-family: var(--qb-font); font-size: 14.5px; font-weight: 600; padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--qb-ink-3) 50%), linear-gradient(135deg, var(--qb-ink-3) 50%, transparent 50%);
  background-position: calc(100% - 18px) 21px, calc(100% - 13px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.qb-f__in:focus, .qb-f select:focus { border-color: var(--qb-blue); background: #fff; outline: none; }
.qb-f__in::-webkit-outer-spin-button, .qb-f__in::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qb-f__in[type="number"] { -moz-appearance: textfield; }

.qb-outs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; margin-bottom: 16px;
  background: var(--qb-line); border-radius: var(--qb-r); overflow: hidden;
  box-shadow: 0 0 0 1px var(--qb-line);
}
@media (min-width: 640px) {
  .qb-outs--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qb-outs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.qb-out { background: var(--qb-card-2); padding: 15px 15px; display: flex; flex-direction: column; gap: 5px; }
.qb-out__k { font: 600 10.5px/1.35 var(--qb-font); letter-spacing: .09em; text-transform: uppercase; color: var(--qb-ink-3); }
.qb-out__v {
  font: 800 clamp(18px, 2.4vw, 23px)/1.15 var(--qb-font);
  color: var(--qb-ink); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.qb-out--hi .qb-out__v { color: var(--qb-blue); }
.qb-out--ok .qb-out__v { color: var(--qb-green); }
.qb-out--sm .qb-out__v { font-size: 15px; line-height: 1.35; }

.qb-verdict {
  padding: 14px 16px; margin-bottom: 14px; border-radius: var(--qb-r-sm);
  font-size: 14.5px; line-height: 1.55;
  background: var(--qb-blue-soft); color: var(--qb-ink);
  border-left: 3px solid var(--qb-blue);
}
.qb-verdict.is-ok { background: var(--qb-green-soft); border-left-color: var(--qb-green); }
.qb-verdict.is-warn { background: var(--qb-orange-soft); border-left-color: var(--qb-orange); }
.qb-tool__note { margin: 0 !important; font-size: 12.5px; color: var(--qb-ink-3); line-height: 1.6; }

.qb-routes { display: grid; grid-template-columns: 1fr; gap: 9px; margin-bottom: 16px; }
.qb-route {
  display: flex; align-items: baseline; gap: 12px; padding: 12px 15px;
  border: 1px solid var(--qb-line); border-radius: var(--qb-r-sm);
  background: var(--qb-card-2); font-size: 14px; color: var(--qb-ink-3);
  transition: border-color .2s var(--qb-ease), background .2s var(--qb-ease);
}
.qb-route.is-pick { border-color: var(--qb-green); background: var(--qb-green-soft); color: var(--qb-ink); }
.qb-route b { color: var(--qb-ink); font-weight: 700; flex: 0 0 auto; }
.qb-route.is-pick b { color: var(--qb-green); }
.qb-route { align-items: center; }
.qb-route__ic { flex: 0 0 auto; display: block; width: 18px; height: 18px; color: var(--qb-ink-3); }
.qb-route__ic svg { display: block; width: 100%; height: 100%; }
.qb-route.is-pick .qb-route__ic { color: var(--qb-green); }
/* neither the label nor the description can shrink, so on a narrow phone the
   description used to run out of the row and get clipped by the page */
@media (max-width: 480px) { .qb-route { flex-wrap: wrap; } }

/* ==========================================================================
   Platform cards (app page) - the two mobile marks, one card each
   ========================================================================== */
.qb-plat { margin: 0 0 34px; }
.qb-plat__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 620px) { .qb-plat__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.qb-plat__c {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px 18px 17px;
  background: var(--qb-card); border: 1px solid var(--qb-line);
  border-radius: var(--qb-r); box-shadow: var(--qb-sh-1);
  color: var(--qb-ink-2); text-decoration: none;
  transition: transform .25s var(--qb-out), box-shadow .25s var(--qb-ease),
              border-color .2s var(--qb-ease);
}
.qb-plat__c:hover {
  transform: translateY(-2px); box-shadow: var(--qb-sh-2);
  border-color: var(--qb-line-2); color: var(--qb-ink-2); text-decoration: none;
}
.qb-plat__ic {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: var(--qb-r-sm);
  background: var(--qb-paper-2); color: var(--qb-ink);
}
.qb-plat__ic svg { display: block; width: 26px; height: 26px; }
.qb-plat__c--ios .qb-plat__ic { background: var(--qb-blue-soft); color: var(--qb-blue-d); }
.qb-plat__c--and .qb-plat__ic { background: var(--qb-green-soft); color: #0c7a3b; }
.qb-plat__tx { min-width: 0; }
.qb-plat__n {
  display: block; font: 800 17px/1.25 var(--qb-font);
  letter-spacing: -.015em; color: var(--qb-ink); overflow-wrap: break-word;
}
.qb-plat__s {
  display: block; margin-top: 3px;
  font: 700 11px/1.3 var(--qb-font); letter-spacing: .1em;
  text-transform: uppercase; color: var(--qb-orange-d); overflow-wrap: break-word;
}
.qb-plat__r { display: block; margin-top: 7px; font-size: 13.5px; line-height: 1.5; overflow-wrap: break-word; }
.qb-plat__ar { flex: 0 0 auto; align-self: center; margin-left: auto; width: 16px; height: 11px; color: var(--qb-blue); }
.qb-plat__note { margin: 12px 0 0 !important; font-size: 12.5px; line-height: 1.6; color: var(--qb-ink-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.qb-foot { background: var(--qb-ink-bg); color: rgba(238, 242, 249, .7); padding: 46px 0 26px; margin-top: 24px; }
.qb-foot__grid { display: grid; grid-template-columns: 1fr; gap: 30px; padding-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
@media (min-width: 760px) { .qb-foot__grid { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 38px; } }
.qb-foot__logo { margin-bottom: 15px; }
.qb-foot__logo img { height: 24px; width: auto; }
.qb-foot p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.65; color: rgba(238, 242, 249, .62); }
.qb-foot__k { margin: 0 0 14px; font: 700 11px/1 var(--qb-font); letter-spacing: .15em; text-transform: uppercase; color: #fff; }
.qb-foot__list { list-style: none; margin: 0; padding: 0; }
.qb-foot__list li { margin-bottom: 9px; }
.qb-foot__list a { color: rgba(238, 242, 249, .62); font-size: 14px; text-decoration: none; }
.qb-foot__list a:hover { color: #fff; }
.qb-foot__resp { display: flex; align-items: flex-start; gap: 15px; padding-top: 22px; }
.qb-foot__resp p { margin: 0; }
.qb-age {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 2px solid var(--qb-orange); color: var(--qb-orange);
  font: 800 13px/1 var(--qb-font);
}
.qb-foot__end { margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1); }
.qb-foot__end p { margin: 0; font-size: 12px; }

.qb-top {
  position: fixed; right: 18px; bottom: 18px; z-index: 65;
  display: inline-flex; align-items: center; gap: 8px;
  height: 44px; padding: 0 18px;
  background: var(--qb-blue); color: #fff; border: 0;
  border-radius: var(--qb-pill); cursor: pointer;
  font: 700 13px/1 var(--qb-font);
  box-shadow: 0 8px 22px rgba(31, 95, 216, .35);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s var(--qb-ease), transform .26s var(--qb-out), visibility .26s, background .18s var(--qb-ease);
}
.qb-top.is-on { opacity: 1; visibility: visible; transform: translateY(0); }
.qb-top:hover { background: var(--qb-blue-d); }
.qb-top svg { width: 14px; height: 14px; }

/* ==========================================================================
   Motion / print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .qb-head, .qb-top, .qb-pick, .qb-tool, .qb-toc, .qb-promo { display: none !important; }
  body { background: #fff; }
  .qb-sec { grid-template-columns: 1fr; }
}