@charset "UTF-8";
/* ==========================================================================
   22Bet MULTI — "Paper & Teal"
   Light warm-paper body · deep teal chrome · coral CTA · LEFT sticky rail
   Deliberately unlike every earlier 22Bet build: those are dark-bodied with a
   right-hand rail; this one is light, and the rail sits on the left.
   ========================================================================== */

:root {
  --paper:    #f7f6f2;
  --paper-2:  #ffffff;
  --paper-3:  #efece4;
  --ink:      #14232b;
  --ink-2:    #46606b;
  --muted:    #6f8792;
  --line:     #e3dfd5;
  --line-2:   #d3cec1;

  --teal:     #0d4f5c;
  --teal-2:   #093b45;
  --teal-3:   #126575;
  --coral:    #e8442e;
  --coral-2:  #ff6146;
  --gold:     #cf8a12;
  --green:    #12795a;

  --wrap:     1280px;
  --rail:     306px;
  --r-sm:     7px;
  --r:        12px;
  --r-lg:     18px;
  --head-h:   112px;

  --ff: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;

  --x-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150' viewBox='0 0 150 150'%3E%3Cg fill='none' stroke='%23cf8a12' stroke-width='6' stroke-linejoin='round' opacity='.16'%3E%3Cpath d='M26 8 L40 22 L54 8 L64 18 L50 32 L64 46 L54 56 L40 42 L26 56 L16 46 L30 32 L16 18 Z'/%3E%3Cpath d='M100 86 L114 100 L128 86 L138 96 L124 110 L138 124 L128 134 L114 120 L100 134 L90 124 L104 110 L90 96 Z'/%3E%3C/g%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.72 var(--ff); overflow-x: hidden; }
/* height:auto is load-bearing. The width/height HTML attributes map to the CSS
   width/height properties; max-width:100% overrides only the width, so without
   this the image keeps its 768px attribute height and renders stretched. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--teal-3); }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -.014em; color: var(--ink); }
p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 3px solid var(--teal-3); outline-offset: 2px; border-radius: 4px; }

.mx-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding-left: 22px; padding-right: 22px; }
.mx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── header ─────────────────────────────────────────────────────────────── */
.mx-head { position: sticky; top: 0; z-index: 90; }
.mx-top { background: var(--teal-2); color: #cfe4e8; font-size: .78rem; }
.mx-top__in { display: flex; align-items: center; gap: 16px; min-height: 36px; }
.mx-top__lic { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ── locale picker ─────────────────────────────────────────────────────────
   Built from real <a> links, so it still switches locale with JS disabled.
   Without JS the panel is simply always open below the bar. */
.mx-lang { position: relative; margin-left: auto; }
.mx-lang__btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px; padding: 4px 12px 4px 5px; font-size: .78rem; font-weight: 700;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.mx-lang__btn:hover { background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.45); }
.mx-lang__chev { width: 10px; height: 6px; transition: transform .18s; opacity: .8; }
.mx-lang.is-open .mx-lang__chev { transform: rotate(180deg); }
.mx-lang__code {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 20px; padding: 0 5px; border-radius: 6px;
  background: rgba(255,255,255,.16); font-size: .62rem; font-weight: 900; letter-spacing: .06em;
}
.mx-lang__cur { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mx-lang__panel {
  position: absolute; right: 0; top: calc(100% + 9px); z-index: 120;
  width: 330px; padding: 10px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line-2);
  box-shadow: 0 18px 44px rgba(9,40,47,.28);
  display: none;
}
.mx-lang.is-open .mx-lang__panel { display: block; }
.mx-lang__head { margin-bottom: 8px; }
.mx-lang__search {
  width: 100%; padding: 9px 12px; border-radius: 9px;
  border: 1px solid var(--line-2); background: var(--paper); color: var(--ink); font-size: .86rem;
}
.mx-lang__search:focus { outline: none; border-color: var(--teal-3); }
.mx-lang__list {
  list-style: none; margin: 0; padding: 0; max-height: 306px; overflow-y: auto;
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 2px;
}
.mx-lang__i {
  display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
  color: var(--ink); font-size: .84rem; text-decoration: none; transition: background .12s;
}
.mx-lang__i:hover { background: var(--paper-3); text-decoration: none; }
.mx-lang__i .mx-lang__code { background: var(--paper-3); color: var(--teal); }
.mx-lang__i.is-on { background: var(--teal); color: #fff; font-weight: 700; }
.mx-lang__i.is-on .mx-lang__code { background: rgba(255,255,255,.22); color: #fff; }
.mx-lang__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-lang__empty { margin: 10px 4px 4px; font-size: .82rem; color: var(--muted); }
@media (max-width: 560px) {
  /* pin it under the sticky header (36px strip + 58px bar) rather than relying
     on `top:auto`, which resolves to the static position and drifts */
  .mx-lang__panel { position: fixed; left: 10px; right: 10px; top: 100px; width: auto; }
  .mx-lang__list { grid-template-columns: minmax(0,1fr); max-height: 52vh; }
  .mx-lang__cur { max-width: 86px; }
}

.mx-bar { background: var(--teal); border-bottom: 3px solid var(--gold); }
.mx-bar__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.mx-logo img { height: 40px; width: auto; }
.mx-nav { display: flex; align-items: center; gap: 2px; }
.mx-nav a {
  position: relative; padding: 9px 14px; border-radius: var(--r-sm); color: #d7eaee;
  font-size: .93rem; font-weight: 700; text-decoration: none; white-space: nowrap; transition: .16s;
}
.mx-nav a:hover { color: #fff; background: rgba(255,255,255,.1); text-decoration: none; }
.mx-nav a.is-on { color: #fff; background: rgba(0,0,0,.22); }
.mx-nav a.is-on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px; height: 2px; background: var(--gold); border-radius: 2px; }
.mx-cta { margin-left: auto; display: flex; gap: 9px; }
.mx-burger { display: none; width: 44px; height: 40px; margin-left: auto; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-sm); flex-direction: column; align-items: center; justify-content: center; gap: 4px; }
.mx-burger span { width: 19px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }
.mx-burger.is-on span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.mx-burger.is-on span:nth-child(2) { opacity: 0; }
.mx-burger.is-on span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.mx-mob { display: none; background: var(--teal-2); }
.mx-mob.is-open { display: block; }
.mx-mob a { display: block; padding: 13px 0; color: #eaf5f7; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.12); }
/* `.mx-mob a` (0,1,1) outranks `.mx-btn` (0,1,0) — restate the button here */
.mx-mob .mx-btn { display: flex; align-items: center; justify-content: center; padding: 14px 24px; border-bottom: 0; margin: 14px 0 18px; text-align: center; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.mx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border: 0; border-radius: var(--r-sm);
  font-size: .93rem; font-weight: 800; letter-spacing: .015em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: transform .14s, box-shadow .14s; white-space: nowrap;
}
.mx-btn:hover { text-decoration: none; transform: translateY(-2px); }
.mx-btn--go { background: var(--gold); color: #2a1a00; box-shadow: 0 4px 14px rgba(207,138,18,.32); }
.mx-btn--bonus { background: linear-gradient(180deg, var(--coral-2), var(--coral)); color: #fff; box-shadow: 0 4px 14px rgba(232,68,46,.3); }
.mx-btn--ghost { background: transparent; color: #eaf5f7; border: 1px solid rgba(255,255,255,.35); }
.mx-btn--ghost:hover { border-color: #fff; color: #fff; }
.mx-btn--sm { padding: 8px 16px; font-size: .8rem; }
.mx-btn--lg { padding: 15px 30px; font-size: 1rem; }
.mx-btn--full { width: 100%; }
.mx-btn.mx-store {
  min-height: 52px; padding: 11px 18px; gap: 11px;
  text-align: left; text-transform: none; white-space: normal; line-height: 1.2;
}
.mx-store svg { width: 25px; height: 25px; flex: none; fill: currentColor; }
.mx-store span { display: block; }
.mx-store--android { background: var(--green); color: #fff; box-shadow: 0 4px 14px rgba(18,121,90,.28); }
.mx-store--ios { background: var(--ink); color: #fff; box-shadow: 0 4px 14px rgba(20,35,43,.25); }

/* ── hero ───────────────────────────────────────────────────────────────── */
.mx-hero { position: relative; overflow: hidden; background: linear-gradient(160deg, #ffffff 0%, var(--paper) 46%, #e8efe9 100%); border-bottom: 1px solid var(--line); }
.mx-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--x-gold); background-size: 150px 150px; -webkit-mask-image: linear-gradient(115deg, #000 0%, transparent 60%); mask-image: linear-gradient(115deg, #000 0%, transparent 60%); }
.mx-hero__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.88fr); gap: 44px; align-items: center; padding-top: 50px; padding-bottom: 54px; }
.mx-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 15px; padding: 5px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--line-2); color: var(--teal); font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.mx-h1 { font-size: clamp(1.85rem, 3.7vw, 2.9rem); margin-bottom: 20px; }
.mx-hero__btns { display: flex; flex-wrap: wrap; gap: 11px; margin-bottom: 24px; }
.mx-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.mx-chip { display: flex; flex-direction: column; min-width: 108px; padding: 9px 14px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); }
.mx-chip b { font-size: 1.06rem; font-weight: 900; color: var(--teal); letter-spacing: -.01em; }
.mx-chip span { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; }
.mx-frame { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: #fff; box-shadow: 0 14px 36px rgba(20,35,43,.14); }

/* ── shell: LEFT rail + article ─────────────────────────────────────────── */
.mx-shell { display: grid; grid-template-columns: var(--rail) minmax(0,1fr); gap: 34px; align-items: start; padding-top: 40px; padding-bottom: 70px; }
.mx-main { min-width: 0; }
.mx-rail { position: sticky; top: calc(var(--head-h) + 14px); display: flex; flex-direction: column; gap: 15px; }
@media (min-width: 1041px) {
  .mx-rail {
    height: calc(100vh - var(--head-h) - 28px);
    height: calc(100dvh - var(--head-h) - 28px);
    min-height: 0;
    overflow-x: hidden; overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin; scrollbar-color: var(--line-2) transparent;
  }
  .mx-rail > * { flex: 0 0 auto; }
  /* One scrollbar for the whole rail: the TOC must not trap the wheel before
     the quick-facts table below it can come into view. */
  .mx-rail .mx-toc { max-height: none; overflow: visible; }
  .mx-rail::-webkit-scrollbar { width: 9px; }
  .mx-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; }
}

/* ── article ────────────────────────────────────────────────────────────── */
.mx-sec { margin-bottom: 38px; scroll-margin-top: calc(var(--head-h) + 18px); }
.mx-sec > p, .mx-sec > ul, .mx-sec > ol { color: var(--ink-2); }
.mx-h2 { position: relative; font-size: clamp(1.38rem, 2.4vw, 1.86rem); margin: 0 0 16px; padding-bottom: 11px; border-bottom: 2px solid var(--line-2); }
.mx-h2::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 62px; height: 2px; background: var(--coral); }
.mx-h3 { font-size: clamp(1.08rem, 1.8vw, 1.26rem); margin: 24px 0 11px; color: var(--teal); }
.mx-h4 { font-size: 1.02rem; margin: 18px 0 9px; color: var(--ink); }

.mx-ul { list-style: none; margin: 0 0 1.1em; padding: 0; }
.mx-ul > li { position: relative; padding-left: 25px; margin-bottom: 8px; }
.mx-ul > li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 9px; height: 9px; background: var(--coral); transform: rotate(45deg); border-radius: 2px; }
.mx-ol { list-style: none; margin: 0 0 1.1em; padding: 0; counter-reset: mxol; }
.mx-ol > li { position: relative; padding-left: 42px; margin-bottom: 10px; counter-increment: mxol; min-height: 29px; }
.mx-ol > li::before { content: counter(mxol); position: absolute; left: 0; top: -1px; width: 29px; height: 29px; border-radius: 8px; background: var(--teal); color: #fff; font-size: .82rem; font-weight: 900; display: flex; align-items: center; justify-content: center; }
.mx-sub { list-style: none; margin: 7px 0 0; padding: 0; }
.mx-sub li { position: relative; padding-left: 20px; margin-bottom: 4px; color: var(--muted); }
.mx-sub li::before { content: ""; position: absolute; left: 2px; top: .68em; width: 6px; height: 6px; border-radius: 50%; border: 2px solid var(--teal-3); }

.mx-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px; }

/* ── FAQ accordion (sections detected structurally by the builder) ─────── */
.mx-q { border: 1px solid var(--line); border-radius: var(--r); background: #fff; margin-bottom: 9px; overflow: hidden; }
.mx-q[open] { border-color: var(--teal-3); }
.mx-q > summary { list-style: none; cursor: pointer; padding: 15px 50px 15px 18px; position: relative; }
.mx-q > summary::-webkit-details-marker { display: none; }
.mx-q > summary::after {
  content: ""; position: absolute; right: 19px; top: 50%; width: 10px; height: 10px;
  border-right: 2px solid var(--teal-3); border-bottom: 2px solid var(--teal-3);
  transform: translateY(-70%) rotate(45deg); transition: transform .2s;
}
.mx-q[open] > summary::after { transform: translateY(-30%) rotate(-135deg); }
.mx-q__q { display: inline; font-size: 1rem; font-weight: 800; }
.mx-q__a { padding: 0 18px 16px; color: var(--ink-2); }
.mx-q__a p:last-child { margin-bottom: 0; }

/* ── tables: dark header band on a white body ───────────────────────────── */
.mx-tw { margin: 14px 0 28px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-2); background: #fff; }
.mx-tw__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.mx-tbl { width: 100%; border-collapse: collapse; min-width: 520px; }
.mx-tbl th, .mx-tbl td { padding: 11px 15px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); font-size: .93rem; }
.mx-tbl thead th { background: var(--teal); color: #fff; font-weight: 800; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.mx-tbl tbody tr:nth-child(even) { background: var(--paper); }
.mx-tbl tbody tr:last-child td, .mx-tbl tbody tr:last-child th { border-bottom: 0; }
.mx-tbl tbody th { font-weight: 800; width: 30%; background: var(--paper-3); }
.mx-tw__hint { margin: 0; padding: 8px 15px; font-size: .75rem; color: var(--muted); background: var(--paper-3); border-top: 1px solid var(--line); }
@media (min-width: 861px) { .mx-tw__hint { display: none; } }

/* ── promo band ─────────────────────────────────────────────────────────── */
.mx-band { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1fr); margin: 8px 0 26px; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line-2); background: linear-gradient(120deg, var(--teal-2), var(--teal)); }
.mx-band__pic img { width: 100%; height: 100%; object-fit: cover; }
.mx-band__body { padding: 24px 26px; display: flex; flex-direction: column; justify-content: center; gap: 10px; color: #fff; }
.mx-band__k { font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; color: #ffcf7a; }
.mx-band__t { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 900; margin: 0; color: #fff; letter-spacing: -.02em; }
.mx-band__p { font-size: .92rem; margin: 0; color: #cfe4e8; }
.mx-band--app .mx-band__pic img { object-position: 76% center; }
.mx-app-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 3px; }
.mx-app-ctas .mx-store { flex: 1 1 210px; }

/* ── reviews & scores ───────────────────────────────────────────────────── */
.mx-revs { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.mx-rev { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.mx-rev__who { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.mx-rev__av { width: 36px; height: 36px; flex: none; border-radius: 10px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.mx-rev__n { font-weight: 800; font-size: .93rem; }
.mx-rev__b { margin: 0; color: var(--ink-2); font-size: .94rem; }
.mx-scores { display: flex; flex-direction: column; gap: 13px; }
.mx-score { display: grid; grid-template-columns: minmax(110px,180px) 1fr auto; gap: 13px; align-items: center; }
.mx-score__l { font-weight: 700; color: var(--ink-2); font-size: .93rem; }
.mx-score__t { height: 9px; border-radius: 6px; background: var(--paper-3); border: 1px solid var(--line); overflow: hidden; }
.mx-score__f { display: block; height: 100%; width: 0; border-radius: 6px; background: linear-gradient(90deg, var(--teal), var(--teal-3)); transition: width 1s cubic-bezier(.2,.8,.2,1); }
.mx-score__v { font-weight: 900; color: var(--coral); min-width: 54px; text-align: right; }

/* ── rail widgets ───────────────────────────────────────────────────────── */
.mx-w { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.mx-w__h { padding: 11px 15px; background: var(--paper-3); border-bottom: 1px solid var(--line); font-size: .75rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); }
.mx-w__b { padding: 15px; }
.mx-offer { background: linear-gradient(170deg, var(--teal), var(--teal-2)); border-color: var(--teal-2); text-align: center; }
.mx-offer .mx-w__b { color: #fff; }
.mx-offer__k { font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ffcf7a; margin-bottom: 5px; }
.mx-offer__v { font-size: 1.9rem; font-weight: 900; color: #fff; line-height: 1.1; letter-spacing: -.02em; }
.mx-offer__s { font-size: .85rem; color: #cfe4e8; margin: 5px 0 13px; }
.mx-offer__fine { font-size: .7rem; color: #a9c8ce; margin-top: 9px; }
.mx-toc { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
.mx-toc a { display: block; padding: 6px 9px; border-left: 2px solid var(--line-2); color: var(--muted); font-size: .84rem; line-height: 1.35; text-decoration: none; transition: .15s; }
.mx-toc a:hover { color: var(--ink); border-left-color: var(--teal-3); background: var(--paper); text-decoration: none; }
.mx-toc a.is-on { color: var(--teal); border-left-color: var(--coral); background: var(--paper); font-weight: 700; }
.mx-facts { list-style: none; margin: 0; padding: 0; }
.mx-facts li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .86rem; color: var(--ink-2); }
.mx-facts li:last-child { border-bottom: 0; }
.mx-facts b { margin-left: auto; color: var(--teal); }

/* ── tools ──────────────────────────────────────────────────────────────── */
.mx-tool { border: 1px solid var(--line-2); border-radius: var(--r-lg); background: #fff; overflow: hidden; margin: 10px 0 26px; }
.mx-tool__h { display: flex; align-items: center; gap: 12px; padding: 15px 20px; background: var(--paper-3); border-bottom: 1px solid var(--line); }
.mx-tool__ic { width: 32px; height: 32px; flex: none; border-radius: 9px; background: var(--teal); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; }
.mx-tool__t { display: block; font-size: 1.02rem; font-weight: 900; }
.mx-tool__s { display: block; font-size: .78rem; color: var(--muted); }
.mx-tool__b { padding: 20px; }
.mx-tool__row { display: grid; gap: 13px; margin-bottom: 15px; }
.mx-tool__row--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.mx-tool__row--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.mx-tool__row--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.mx-f { display: flex; flex-direction: column; gap: 5px; }
.mx-f > span { font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mx-f input, .mx-f select { padding: 10px 12px; border-radius: 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-2); width: 100%; }
.mx-f input:focus, .mx-f select:focus { border-color: var(--teal-3); outline: none; }
.mx-out { display: grid; gap: 11px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.mx-out__c { padding: 13px 15px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); }
.mx-out__l { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: 3px; }
.mx-out__v { font-size: 1.25rem; font-weight: 900; color: var(--coral); letter-spacing: -.01em; }
.mx-out__v--alt { color: var(--teal); }
.mx-out__v--alt2 { color: var(--green); }
.mx-tool__note { font-size: .79rem; color: var(--muted); margin: 14px 0 0; }
.mx-verdict { margin-top: 14px; padding: 13px 16px; border-radius: 10px; font-weight: 700; border: 1px solid var(--line-2); background: var(--paper); color: var(--ink-2); }
.mx-verdict--ok { border-color: rgba(18,121,90,.4); background: rgba(18,121,90,.09); color: #0d5c44; }
.mx-verdict--no { border-color: rgba(232,68,46,.4); background: rgba(232,68,46,.08); color: #9e2a19; }

/* ── the Lucky 22 Arc: a half-dial with a sweeping needle ───────────────── */
.mx-spin-fab { position: fixed; right: 20px; bottom: 20px; z-index: 80; display: flex; align-items: center; gap: 10px; padding: 9px 17px 9px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; color: var(--ink); font-weight: 800; font-size: .86rem; box-shadow: 0 8px 22px rgba(20,35,43,.18); }
.mx-spin-fab__d { width: 28px; height: 28px; flex: none; border-radius: 50%; background: conic-gradient(from 180deg, var(--coral) 0 25%, var(--gold) 0 50%, var(--teal) 0 75%, var(--green) 0); }
.mx-ov { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: 18px; background: rgba(12,28,34,.72); }
.mx-ov.is-open { display: flex; }
.mx-ov__box { position: relative; width: 100%; max-width: 440px; max-height: 94vh; overflow-y: auto; padding: 26px 24px 22px; border-radius: 20px; text-align: center; background: var(--paper-2); border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0,0,0,.4); }
.mx-ov__x { position: absolute; right: 11px; top: 9px; width: 32px; height: 32px; border: 0; border-radius: 9px; background: var(--paper-3); font-size: 1.25rem; line-height: 1; }
.mx-ov__t { font-size: 1.26rem; margin-bottom: 3px; }
.mx-ov__s { font-size: .83rem; color: var(--muted); margin-bottom: 16px; }
.mx-arc { position: relative; width: 280px; height: 148px; margin: 0 auto 14px; overflow: hidden; }
.mx-arc__dial { position: absolute; left: 0; top: 0; width: 280px; height: 280px; border-radius: 50%; background: conic-gradient(from 270deg, var(--coral) 0 22.5deg, var(--gold) 0 45deg, var(--teal) 0 67.5deg, var(--green) 0 90deg, var(--coral-2) 0 112.5deg, var(--gold) 0 135deg, var(--teal-3) 0 157.5deg, var(--green) 0 180deg, transparent 0); }
.mx-arc__dial::after { content: ""; position: absolute; left: 50%; top: 50%; width: 168px; height: 168px; transform: translate(-50%,-50%); border-radius: 50%; background: var(--paper-2); }
.mx-arc__needle { position: absolute; left: 50%; bottom: 0; width: 4px; height: 120px; margin-left: -2px; transform-origin: 50% 100%; transform: rotate(-90deg); background: linear-gradient(180deg, var(--ink), var(--teal)); border-radius: 3px 3px 0 0; transition: transform 3.8s cubic-bezier(.16,.72,.15,1); }
.mx-arc__hub { position: absolute; left: 50%; bottom: -13px; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--ink); border: 3px solid var(--gold); }
.mx-rem { font-size: .8rem; color: var(--muted); margin: 10px 0 12px; }
.mx-rem b { color: var(--coral); }
.mx-ov__fine { font-size: .7rem; color: var(--muted); margin-top: 12px; }
.mx-prize { display: none; margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line-2); }
.mx-prize.is-on { display: block; }
.mx-prize__t { font-size: 1.06rem; font-weight: 900; margin: 0 0 4px; }
.mx-prize__v { font-size: 1.28rem; font-weight: 900; color: var(--coral); margin: 0 0 7px; }
.mx-prize__d { font-size: .86rem; color: var(--ink-2); margin: 0 0 13px; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.mx-foot { background: var(--teal-2); color: #cfe4e8; padding-top: 44px; padding-bottom: 24px; }
.mx-foot__g { display: grid; grid-template-columns: 2fr 1fr 1.2fr 1fr; gap: 30px; margin-bottom: 28px; }
.mx-foot__logo { height: 38px; width: auto; object-fit: contain; margin-bottom: 13px; }
.mx-fcol h3 { font-size: .76rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: #ffcf7a; margin-bottom: 12px; }
.mx-fcol a { display: block; padding: 4px 0; color: #cfe4e8; font-size: .9rem; text-decoration: none; }
.mx-fcol a:hover { color: #fff; text-decoration: none; }
.mx-fcol p { font-size: .88rem; color: #a9c8ce; }
.mx-foot__bot { display: flex; flex-wrap: wrap; align-items: center; gap: 13px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: .83rem; color: #a9c8ce; }
.mx-18 { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; flex: none; border-radius: 50%; border: 2px solid var(--coral-2); color: var(--coral-2); font-weight: 900; font-size: .8rem; }
.mx-foot__cr { margin-left: auto; }
.mx-top-btn { position: fixed; right: 20px; bottom: 78px; z-index: 79; width: 42px; height: 42px; border-radius: 11px; background: #fff; border: 1px solid var(--line-2); display: none; align-items: center; justify-content: center; }
.mx-top-btn.is-on { display: flex; }

/* reveal is JS-driven, so a JS failure can never blank the page */
.mx-rv { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.mx-rv.is-in { opacity: 1; transform: none; }

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1180px) { :root { --rail: 270px; } .mx-nav a { padding: 9px 10px; font-size: .87rem; } }
@media (max-width: 1040px) {
  .mx-shell { grid-template-columns: minmax(0,1fr); }
  .mx-rail { position: static; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
  .mx-rail .mx-w--toc { display: none; }
}
@media (max-width: 900px) {
  :root { --head-h: 94px; }
  .mx-nav, .mx-cta { display: none; }
  .mx-burger { display: flex; }
  .mx-hero__in { grid-template-columns: minmax(0,1fr); gap: 28px; padding-top: 32px; padding-bottom: 40px; }
  .mx-hero__art { order: -1; }
  .mx-shell { padding-top: 34px; padding-bottom: 54px; }
  .mx-band { grid-template-columns: minmax(0,1fr); }
  .mx-band__pic img { max-height: 230px; }
  .mx-revs { grid-template-columns: minmax(0,1fr); }
  .mx-tool__row--3, .mx-tool__row--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mx-out { grid-template-columns: minmax(0,1fr); }
  .mx-foot__g { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  body { font-size: 15.5px; }
  .mx-wrap { padding-left: 16px; padding-right: 16px; }
  .mx-tw { margin: 12px 0 24px; }
  .mx-bar__in { min-height: 58px; }
  .mx-logo img { height: 32px; }
  .mx-top__lic { font-size: .7rem; }
  .mx-rail { grid-template-columns: minmax(0,1fr); }
  .mx-tool__row--2, .mx-tool__row--3, .mx-tool__row--4 { grid-template-columns: minmax(0,1fr); }
  .mx-score { grid-template-columns: 1fr auto; }
  .mx-score__t { grid-column: 1 / -1; order: 3; }
  .mx-hero__btns .mx-store, .mx-app-ctas .mx-store { width: 100%; flex: 1 1 100%; }
  .mx-foot { padding-top: 36px; }
  .mx-foot__g { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .mx-foot__cr { margin-left: 0; }
  .mx-spin-fab span:not(.mx-spin-fab__d) { display: none; }
  .mx-spin-fab { padding: 9px; right: 13px; bottom: 13px; }
  .mx-top-btn { right: 13px; bottom: 68px; }
  .mx-arc { width: 240px; height: 128px; }
  .mx-arc__dial { width: 240px; height: 240px; }
  .mx-arc__dial::after { width: 144px; height: 144px; }
  .mx-arc__needle { height: 102px; }
}
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } html { scroll-behavior: auto; } }