.mt {
  --b: var(--thm-base, #fc8b0b);
  --d: var(--thm-black, #0067ac);
  --n: rgb(var(--thm-black-rgb, 0, 22, 89));
  --g: var(--thm-gray, #838691);
  --std: #0067ac;
  --std-t: #eaf3fa;
  --pre: #fc8b0b;
  --pre-t: #fff3e4;
  --lux: #001659;
  --lux-t: #eceffa;
  --gold: #e2b441;
  --side: #1c2733;
  font-family: var(--thm-font, "Poppins", sans-serif);
}
.mt-frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 24px 50px -24px rgba(0, 22, 89, 0.5);
  border: 1px solid #dfe6ef;
}
.mt-scroll {
  overflow-x: auto;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
}
.mt-scroll:focus-visible {
  outline: 3px solid var(--b);
  outline-offset: -3px;
}
.mt-table {
  width: 100%;
  min-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  margin: 0;
}
.mt-table th,
.mt-table td {
  padding: 0;
  text-align: center;
  vertical-align: middle;
}
/* header: one colour + symbol per plan */
.mt-table thead th {
  padding: 1rem 0.5rem;
  font-weight: 700;
  font-size: 1.05rem;
  border-bottom: 4px solid rgba(0, 0, 0, 0.18);
}
.mt-sym {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 0.35rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.mt-plan {
  display: block;
  letter-spacing: 0.04em;
}
.mt-th[data-t="standard"] {
  background: var(--std);
  color: #fff;
}
.mt-th[data-t="premium"] {
  background: var(--pre);
  color: var(--n);
}
.mt-th[data-t="premium"] .mt-sym {
  background: rgba(0, 22, 89, 0.14);
}
.mt-th[data-t="luxury"] {
  background: var(--lux);
  color: var(--gold);
  border-bottom-color: var(--gold);
}
.mt-th[data-t="luxury"] .mt-sym {
  background: rgba(226, 180, 65, 0.16);
  box-shadow: 0 0 0 2px var(--gold);
}
.mt-table thead .mt-corner {
  width: 10%;
  background: var(--side);
  color: #fff;
  text-align: left;
  padding-left: 1.4rem;
  position: sticky;
  left: 0;
  z-index: 3;
}
/* side titles */
.mt-mat {
  position: sticky;
  left: 0;
  z-index: 2;
  text-align: left !important;
  padding: 0.6rem 0.8rem 0.6rem 1.2rem !important;
  background: #eef2f7;
  color: var(--side);
  border-top: 1px solid #d8e0ea;
  box-shadow:
    inset 6px 0 0 var(--side),
    4px 0 10px -6px rgba(0, 0, 0, 0.3);
}
.mt-ico {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 44px;
  height: 44px;
  margin-right: 0.6rem;
  border-radius: 12px;
  background: var(--n);
  overflow: hidden;
}
.mt-ico img {
  width: 38px;
  height: auto;
}
.mt-matname {
  vertical-align: middle;
  font-weight: 700;
  font-size: 0.98rem;
}
.mt-row:hover .mt-mat {
  background: #dde5ef;
}
/* cells: tinted per plan */
.mt-table td {
  padding: 0.8rem 0.6rem;
  border-top: 1px solid #e3e9f1;
  border-left: 1px solid #fff;
  transition: background 0.25s;
  background: var(--tint);
}
.mt-table td[data-t="standard"] {
  --tint: var(--std-t);
  --c: var(--std);
}
.mt-table td[data-t="premium"] {
  --tint: var(--pre-t);
  --c: var(--pre);
}
.mt-table td[data-t="luxury"] {
  --tint: var(--lux-t);
  --c: var(--lux);
}
.mt-row:nth-child(even) td {
  background: color-mix(in srgb, var(--tint) 55%, #fff);
}
.mt-table td:hover {
  background: color-mix(in srgb, var(--c) 18%, #fff);
}
.mt-fig {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.mt-img {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 150px;
  height: 62px;
  border-radius: 12px;
  background: #fff;
  border: 2px solid var(--c);
  overflow: hidden;
  transition: transform 0.25s;
}
.mt-table td[data-t="luxury"] .mt-img {
  border-color: var(--gold);
}
.mt-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.mt-img img.is-ph {
  width: 42px;
  height: 42px;
  padding: 4px;
  border-radius: 10px;
  background: var(--n);
}
td:hover .mt-img {
  transform: translateY(-2px);
}
.mt-label {
  font-size: 0.85rem;
  line-height: 1.3;
  font-weight: 600;
  color: var(--n);
}
.mt-label small {
  display: block;
  font-size: inherit;
  font-weight: 400;
  color: var(--g);
}
.mt-hint {
  display: none;
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  padding: 0.4rem 0.75rem;
  border-radius: 99px;
  background: var(--b);
  color: var(--n);
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
  transition: opacity 0.3s;
}
.mt-frame.is-scrolled .mt-hint {
  opacity: 0;
}
.js .mt-row {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.45s,
    transform 0.45s;
  transition-delay: calc(var(--i) * 40ms);
}
.js .mt-frame.is-visible .mt-row {
  opacity: 1;
  transform: none;
}
@media (max-width: 991px) {
  .mt-matname {
    font-size: 0.88rem;
  }
  .mt-ico {
    width: 38px;
    height: 38px;
  }
  .mt-ico img {
    width: 32px;
  }
}
@media (max-width: 640px) {
  .mt-hint {
    display: block;
  }
  .mt-table thead .mt-corner,
  .mt-mat {
    width: 128px;
    padding-left: 0.8rem !important;
  }
  .mt-ico {
    display: grid;
    margin: 0 0 0.3rem;
  }
  .mt-matname {
    display: block;
  }
  .mt-table {
    min-width: 640px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .mt-scroll {
    scroll-behavior: auto;
  }
  .js .mt-row {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mt-img,
  .mt-table td {
    transition: none;
  }
}