/* ============================================================================
   HOME PAGE ONLY — the exam-voucher redesign.

   Loaded by Views/Catalog/Home.cshtml alone (through the layout's Head section), after
   site.css, so no other page downloads a rule of it. Everything here builds on site.css's
   tokens — brand hues, contextual surface tokens, radii, shadows — rather than restating
   them, so a change to the :root block there still re-brands this page with the rest.

   Scoped under .mi-home (the body class Home.cshtml switches on) wherever a selector
   could otherwise meet a shared component, so even a stray copy of this file on another
   page would change nothing there.
   ========================================================================= */

/* ============================ shared bits ============================ */

.mi-ico { flex-shrink: 0; }

/* WhatsApp's own green, used only on controls that open WhatsApp — a visitor recognises
   the colour before the label. Gold stays reserved for "this spends money". */
.mi-home .mi-btn--wa {
  background: linear-gradient(135deg, #25d366 0%, #1aa250 100%);
  color: #fff;
  box-shadow: 0 8px 22px rgb(26 162 80 / 0.26), inset 0 1px 0 rgb(255 255 255 / 0.24);
}
.mi-home .mi-btn--wa:hover {
  background: linear-gradient(135deg, #34e27c 0%, #178f47 100%);
  color: #fff;
  box-shadow: 0 14px 30px rgb(26 162 80 / 0.34), inset 0 1px 0 rgb(255 255 255 / 0.3);
}

/* The top bar moved to site.css on 28 Sep 2026, when every page took it on. */

/* ---------- social icons (footer; the top bar's are in site.css) ---------- */

.mi-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mi-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.mi-home .mi-social li { margin: 0; }

.mi-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: 50%;
  color: #fff;
  transition: background var(--mi-transition), color var(--mi-transition),
              border-color var(--mi-transition), transform var(--mi-transition);
}
.mi-home a.mi-social-link:hover {
  background: #fff;
  border-color: #fff;
  color: var(--mi-ink);
  transform: translateY(-1px);
}

/* Not configured in Admin › Menus › Social yet: present, recognisable, and clearly inert. */
.mi-social-link.is-pending { opacity: 0.5; cursor: default; }

/* ============================ header ============================ */

/* The cart sits hard against the hamburger on small screens and right after the menu on
   large ones — the auto margin, not justify-content, is what places it. */
.mi-header-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  margin-left: auto;
  border: 1px solid var(--mi-line-strong);
  border-radius: var(--mi-radius-sm);
  background: #fff;
  color: var(--mi-title);
  cursor: pointer;
  transition: background var(--mi-transition), border-color var(--mi-transition),
              color var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-header-cart[hidden] { display: none; }
.mi-header-cart:hover {
  background: rgb(67 86 232 / 0.07);
  border-color: rgb(67 86 232 / 0.28);
  color: var(--mi-brand-deep);
}

.mi-header-cart-count {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  padding: 0 6px;
  border-radius: var(--mi-radius-pill);
  background: linear-gradient(135deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  box-shadow: 0 0 0 2px #fff;
  color: #fff;
  font: 700 11px/21px var(--font-primary);
  text-align: center;
}
.mi-header-cart-count[data-empty] { background: var(--mi-surface-2); color: var(--mi-muted); }
.mi-header-cart.is-bumped .mi-header-cart-count { animation: mi-home-bump 0.5s cubic-bezier(0.22, 1, 0.36, 1); }

@keyframes mi-home-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); }
  100% { transform: scale(1); }
}

@media (min-width: 1024px) {
  .mi-home .mi-header-cart { margin-left: 0; border-radius: var(--mi-radius-pill); }
}

/* ============================ section spacing ============================ */

/* HOME PAGE ONLY (.mi-home-page is on the home page's <body> alone, not the PTE voucher page's):
   every section sits 3rem top and bottom at every width, in place of site.css's
   var(--mi-section-y) — 88px, 104px from 1024px, 52px below it. The join rules in site.css
   still apply on top: two plain sections back to back share one pad rather than two. */
.mi-home-page .mi-section {
  position: relative;
  padding-block: 3rem;
}

/* ============================ logo carousel ============================ */

/* HOME PAGE ONLY — the exam-logo strip under the hero (_HomeLogoCarousel). A light band between
   the hero's colour and the voucher grid: white tiles on a faint brand wash, with a thin brand to
   champagne rule along the top edge to mark where the hero ends. */
.mi-logos {
  position: relative;
  background:
    radial-gradient(90% 160% at 0% 0%, rgb(67 86 232 / 0.08), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, #f4f6fe 100%);
  border-bottom: 1px solid var(--mi-line);
}
.mi-logos::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--mi-brand-deep), var(--mi-brand) 45%, var(--mi-metal));
}

.mi-logos-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "rail";
  align-items: center;
  padding-block: 14px;
}
/* The heading beside the strip (.mi-logos-head / -kicker / -title) was removed on 26 Sep 2026 at
   the business's request; the strip now has the row to itself. */

/* Runs to the screen edges on phones, where a container gutter would leave a logo sliced short
   of the edge; the fade at each end does the framing instead. */
.mi-logos-viewport {
  grid-area: rail;
  min-width: 0;
  margin-inline: calc(-1 * var(--mi-gutter));
  padding-block: 8px 12px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* 5s per tile in one copy, whatever the count (--mi-logos-tiles is set by _HomeLogoCarousel). */
.mi-logos-track {
  display: flex;
  width: max-content;
  animation: mi-logos-scroll calc(var(--mi-logos-tiles, 8) * 5s) linear infinite;
}
/* Hover and focus are the whole of it since the pause button was removed on 21 Sep 2026. */
.mi-logos-viewport:hover .mi-logos-track,
.mi-logos-viewport:focus-within .mi-logos-track { animation-play-state: paused; }

@keyframes mi-logos-scroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* The gap is repeated as trailing padding so the spacing across the seam, where the second copy
   meets the first, is the same as everywhere else. */
.mi-logos-list {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0 12px 0 0;
  list-style: none;
}

.mi-logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 148px;
  height: 66px;
  padding: 4px 6px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 16px;
  box-shadow: var(--mi-shadow-sm);
  transition: transform var(--mi-transition), box-shadow var(--mi-transition), border-color var(--mi-transition);
}
/* Every image is the same 320x128 canvas with the mark already sized inside it, so one box fits
   them all and they still read as the same weight. */
.mi-logo-tile img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
}
.mi-logo-tile:hover {
  transform: translateY(-3px);
  border-color: rgb(67 86 232 / 0.28);
  box-shadow: 0 2px 6px rgb(19 26 58 / 0.05), 0 12px 26px rgb(67 86 232 / 0.14);
}
.mi-logo-tile:focus-visible {
  outline: 3px solid var(--mi-brand-light);
  outline-offset: 3px;
}

@media (min-width: 640px) {
  .mi-logo-tile { width: 164px; height: 72px; }
  .mi-logos-list { gap: 14px; padding-right: 14px; }
}

/* Desktop: the strip stays inside the container here, so it lines up with the voucher grid below. */
@media (min-width: 1024px) {
  .mi-logos-inner { padding-block: 18px; }
  .mi-logos-viewport { margin-inline: 0; }
  .mi-logo-tile { width: 176px; height: 76px; }
}

/* ============================ section heads ============================ */

.mi-vouchers-head,
.mi-stories-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mi-space-5);
  margin-bottom: var(--mi-space-7);
}
.mi-vouchers-head .mi-section-head,
.mi-stories-head .mi-section-head { margin-bottom: 0; }

/* HOME PAGE ONLY: a 1rem gap under the voucher and stories heads. The PTE voucher page's
   "Other exam vouchers" head shares .mi-vouchers-head and keeps var(--mi-space-7). */
.mi-home-page .mi-vouchers-head,
.mi-home-page .mi-stories-head { margin-bottom: 1rem; }

/* ============================ exam vouchers ============================ */

.mi-voucher-grid {
  display: grid;
  gap: var(--mi-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .mi-voucher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mi-voucher-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

/* "How to pay" — four steps under the voucher grid, as a numbered timeline (26 Sep 2026).
   A counter rather than typed numbers so reordering the <li>s renumbers them. Desktop: four
   cards in a row joined by a line through their icons; below 1024px the line runs down the
   left and the cards stack. When the panel is revealed (.is-in, set by site.js as it scrolls
   into view) the line fills and the steps arrive one after another. Without script, or under
   reduced motion, everything is simply shown. */
.mi-paysteps {
  position: relative;
  overflow: hidden;
  margin-top: var(--mi-space-7);
  padding: clamp(24px, 3.2vw, 40px);
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(157 123 255 / 0.12) 0%, transparent 55%),
    radial-gradient(80% 110% at 0% 100%, rgb(86 207 253 / 0.12) 0%, transparent 55%),
    #fff;
  border: 1px solid rgb(67 86 232 / 0.12);
  border-radius: var(--mi-radius-xl);
  box-shadow: 0 10px 34px rgb(19 26 58 / 0.07);
}
.mi-paysteps-head { margin-bottom: var(--mi-space-6); text-align: center; }
.mi-paysteps-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--mi-space-2);
  padding: 5px 12px;
  background: rgb(67 86 232 / 0.08);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-brand-deep);
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mi-paysteps-title {
  margin: 0;
  color: var(--mi-title);
  font-size: var(--mi-text-2xl);
  letter-spacing: -0.02em;
}

.mi-paysteps-list {
  --mi-paystep-line: 2px;
  counter-reset: mi-paystep;
  position: relative;
  display: grid;
  gap: var(--mi-space-4);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* The connecting line: a faint track, and a brand-coloured fill drawn over it on reveal. */
.mi-paysteps-list::before,
.mi-paysteps-list::after {
  content: "";
  position: absolute;
  left: 27px;
  top: 28px;
  bottom: 28px;
  width: var(--mi-paystep-line);
  border-radius: 2px;
  background: rgb(67 86 232 / 0.12);
}
.mi-paysteps-list::after {
  background: linear-gradient(180deg, var(--mi-brand), var(--mi-violet), var(--mi-cyan));
  transform-origin: top;
}

.mi-paysteps-list li {
  counter-increment: mi-paystep;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: var(--mi-space-4);
  row-gap: 4px;
  align-content: start;
  padding: 4px 0;
}
.mi-paysteps-icon {
  position: relative;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  /* A light tile in each step's own colour with the icon in the deeper shade (26 Sep 2026 —
     the solid blue-violet tile read too heavy). The white ring keeps the line from running
     through the tile. */
  --mi-paystep-tint: #eef0ff;
  --mi-paystep-ink: #3346d3;
  --mi-paystep-edge: rgb(51 70 211 / 0.2);
  background: linear-gradient(145deg, #fff 0%, var(--mi-paystep-tint) 100%);
  border: 1px solid var(--mi-paystep-edge);
  box-shadow: 0 8px 20px rgb(19 26 58 / 0.08), 0 0 0 5px #fff;
  color: var(--mi-paystep-ink);
}
.mi-paysteps-list li:nth-child(2) .mi-paysteps-icon {
  --mi-paystep-tint: #f3edff; --mi-paystep-ink: #6d44d9; --mi-paystep-edge: rgb(109 68 217 / 0.2);
}
.mi-paysteps-list li:nth-child(3) .mi-paysteps-icon {
  --mi-paystep-tint: #e6f7fd; --mi-paystep-ink: #0a7fa8; --mi-paystep-edge: rgb(10 127 168 / 0.2);
}
.mi-paysteps-list li:nth-child(4) .mi-paysteps-icon {
  --mi-paystep-tint: #e7f8ee; --mi-paystep-ink: #15924a; --mi-paystep-edge: rgb(21 146 74 / 0.22);
}
/* The step number, as a small gold badge on the icon's corner. */
.mi-paysteps-icon::after {
  content: counter(mi-paystep);
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--mi-accent);
  color: #241c00;
  font: 800 11px/1 var(--font-primary);
}
.mi-paysteps-list strong {
  align-self: end;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-base);
}
.mi-paysteps-list li > span:last-child { color: var(--mi-muted); font-size: var(--mi-text-sm); line-height: 1.6; }

@media (min-width: 1024px) {
  .mi-paysteps-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mi-space-5); }
  /* Horizontal now: through the icons' centres, from the first card's to the last's. */
  .mi-paysteps-list::before,
  .mi-paysteps-list::after {
    left: 12.5%;
    right: 12.5%;
    top: 31px;
    bottom: auto;
    width: auto;
    height: var(--mi-paystep-line);
  }
  .mi-paysteps-list::after {
    background: linear-gradient(90deg, var(--mi-brand), var(--mi-violet), var(--mi-cyan));
    transform-origin: left;
  }
  .mi-paysteps-list li {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    padding: 0 6px;
    text-align: center;
  }
  .mi-paysteps-icon { grid-row: auto; margin-bottom: var(--mi-space-3); }
}
@media (max-width: 560px) {
  .mi-paysteps { padding: var(--mi-space-5) var(--mi-space-4); }
  .mi-paysteps-title { font-size: var(--mi-text-xl); }
}

/* The scroll-in sequence. Only with script (.mi-js), so a blocked script never hides a step. */
@media (prefers-reduced-motion: no-preference) {
  .mi-js .mi-paysteps .mi-paysteps-list::after { transform: scaleY(0); }
  .mi-js .mi-paysteps .mi-paysteps-list li { opacity: 0; transform: translateY(18px); }
  .mi-js .mi-paysteps.is-in .mi-paysteps-list::after {
    transform: none;
    transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
  }
  .mi-js .mi-paysteps.is-in .mi-paysteps-list li {
    opacity: 1;
    transform: none;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  }
  .mi-js .mi-paysteps.is-in .mi-paysteps-list li:nth-child(2) { transition-delay: 0.35s; }
  .mi-js .mi-paysteps.is-in .mi-paysteps-list li:nth-child(3) { transition-delay: 0.7s; }
  .mi-js .mi-paysteps.is-in .mi-paysteps-list li:nth-child(4) { transition-delay: 1.05s; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .mi-js .mi-paysteps .mi-paysteps-list::after { transform: scaleX(0); }
}

/* HOME ONLY: the lead added under "Discounted Exam Vouchers" on 26 Sep 2026. */
.mi-vouchers-lead { margin: var(--mi-space-2) 0 0; }

/*
  THE CARD. A white card with a tinted "stage" inset at the top, rather than a printed
  ticket or a full-bleed banner: the exam's mark floats on a white plate over a soft
  brand wash, with the exam code set huge and faint behind it as a watermark. The one
  purchasable card (PTE) gets the gold commercial edge the offer card always carried.
*/
.mi-voucher {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  transition: transform var(--mi-transition-slow), box-shadow var(--mi-transition),
              border-color var(--mi-transition);
  scroll-margin-top: 130px;
}
.mi-voucher::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 2;
  height: 3px;
  background: linear-gradient(90deg, var(--mi-brand), var(--mi-violet), var(--mi-cyan));
  opacity: 0;
  transition: opacity var(--mi-transition);
  pointer-events: none;
}
.mi-voucher--live::before {
  background: linear-gradient(90deg, transparent, var(--mi-accent), transparent);
  opacity: 1;
}
.mi-voucher:hover {
  transform: translateY(-5px);
  border-color: rgb(67 86 232 / 0.26);
  box-shadow: var(--mi-shadow-lg);
}
.mi-voucher:hover::before { opacity: 1; }

.mi-voucher-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 172px;
  margin: 10px 10px 0;
  overflow: hidden;
  border-radius: calc(var(--mi-radius-lg) - 8px);
  background:
    /* Spotlight first: a bright core directly behind the plate, so the mark sits in
       light rather than on a flat wash. The corner tints are turned up to match it. */
    radial-gradient(62% 58% at 50% 46%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 70%),
    radial-gradient(120% 90% at 100% 0%, rgb(157 123 255 / 0.26) 0%, transparent 58%),
    radial-gradient(110% 90% at 0% 100%, rgb(86 207 253 / 0.26) 0%, transparent 58%),
    linear-gradient(160deg, #eef2ff 0%, #e4eafb 100%);
}
.mi-voucher--live .mi-voucher-stage {
  background:
    radial-gradient(62% 58% at 50% 46%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 70%),
    radial-gradient(120% 90% at 100% 0%, rgb(254 198 36 / 0.38) 0%, transparent 58%),
    radial-gradient(110% 90% at 0% 100%, rgb(67 86 232 / 0.20) 0%, transparent 58%),
    linear-gradient(160deg, #fff6e2 0%, #eef1fd 100%);
}

.mi-voucher-code {
  position: absolute;
  right: -4px;
  bottom: -16px;
  z-index: -1;
  color: rgb(19 26 58 / 0.055);
  font-family: var(--font-primary);
  font-size: 92px;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
  pointer-events: none;
}

.mi-voucher-provider,
.mi-voucher-chip {
  position: absolute;
  top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--mi-radius-pill);
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}
.mi-voucher-provider {
  left: 12px;
  background: rgb(255 255 255 / 0.82);
  border: 1px solid var(--mi-line);
  color: var(--mi-muted);
}
.mi-voucher-chip {
  right: 12px;
  background: rgb(19 26 58 / 0.06);
  color: var(--mi-muted);
}
.mi-voucher-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mi-voucher-chip.is-live { background: rgb(18 156 107 / 0.13); color: #0b7a53; }
.mi-voucher-chip.is-save {
  background: linear-gradient(135deg, var(--mi-accent) 0%, var(--mi-accent-dark) 100%);
  color: #241c00;
}

/* Both axes capped and the image contained: these marks are wildly different shapes, and
   nothing here may stretch a registered trademark to fit a box. */
.mi-voucher-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(210px, 72%);
  height: 84px;
  padding: 14px 20px;
  /* Pure white at the centre fading to the faintest brand tint at the edges, so the plate
     reads as lit from within instead of as a flat rectangle laid on the stage. */
  background:
    linear-gradient(180deg, #fff 0%, #fdfdff 62%, #f7f9ff 100%);
  border: 1px solid rgb(67 86 232 / 0.16);
  border-radius: var(--mi-radius);
  /* Three layers: a brand-tinted ring that separates the plate from the stage, the drop
     shadow that was already here but deeper, and an inset top highlight for the bevel. */
  box-shadow:
    0 0 0 4px rgb(67 86 232 / 0.06),
    0 12px 30px rgb(19 26 58 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
  transition: transform var(--mi-transition-slow), box-shadow var(--mi-transition),
              border-color var(--mi-transition);
}
/* The one card that can be bought outright keeps its accent identity on the ring too. */
.mi-voucher--live .mi-voucher-logo {
  border-color: rgb(240 177 0 / 0.30);
  box-shadow:
    0 0 0 4px rgb(254 198 36 / 0.14),
    0 12px 30px rgb(19 26 58 / 0.14),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}
.mi-voucher-logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}
.mi-voucher:hover .mi-voucher-logo {
  transform: translateY(-3px);
  border-color: rgb(67 86 232 / 0.28);
  box-shadow:
    0 0 0 5px rgb(67 86 232 / 0.10),
    0 18px 38px rgb(19 26 58 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}
.mi-voucher--live:hover .mi-voucher-logo {
  border-color: rgb(240 177 0 / 0.45);
  box-shadow:
    0 0 0 5px rgb(254 198 36 / 0.22),
    0 18px 38px rgb(19 26 58 / 0.18),
    inset 0 1px 0 rgb(255 255 255 / 0.9);
}

/* No artwork for the exam: its code set as a mark, in brand ink. */
.mi-voucher-mark {
  color: #253063;
  font-family: var(--font-primary);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.06em;
  line-height: 1;
}

.mi-voucher-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 0;
}

.mi-voucher-title {
  margin: 0;
  font-size: var(--mi-text-xl);
  letter-spacing: -0.02em;
}

.mi-voucher-price {
  display: grid;
  gap: 3px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--mi-line-strong);
}
.mi-voucher-amount {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--mi-space-3);
}
.mi-voucher-now {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mi-voucher-cur {
  margin-right: 5px;
  color: var(--mi-accent-ink);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-voucher-was { color: var(--mi-faint); font-size: var(--mi-text-sm); }
.mi-voucher-ask {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 700;
  line-height: 1.25;
}
.mi-voucher-note { color: var(--mi-faint); font-size: var(--mi-text-xs); line-height: 1.5; }
.mi-voucher-saving { color: var(--mi-success); font-size: var(--mi-text-xs); font-weight: 600; }

/* The card shows ONE price and no options — see the note in _HomeVoucherCard for why the three
   ways to buy live behind More Detail instead. Their styles are .mi-qv-mode*, further down. */

.mi-voucher-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 22px 0;
}
/* A card with no "Explore the exam" link is the LAST CHILD here, so it reserves that row's
   height instead of ending early. Without it the OET card (the one exam with no page on this
   site) sat shorter than its neighbours, and since .mi-voucher-price is bottom-aligned inside
   a flex:1 body, its price and buttons drifted out of line with the rest of the row. This was
   invisible while a two-line summary filled the card; removing the summary exposed it. */
.mi-voucher-foot:last-child { padding-bottom: 56px; }

.mi-voucher-view { flex: 1; min-height: 42px; }

.mi-voucher-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--mi-space-2);
  flex-shrink: 0;
  height: 42px;
  padding: 0 16px;
  border: 1px solid var(--mi-line-strong);
  border-radius: var(--mi-radius-pill);
  background: #fff;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--mi-transition), border-color var(--mi-transition),
              color var(--mi-transition);
}
.mi-voucher-add[hidden] { display: none; }
.mi-voucher-add:hover {
  background: rgb(67 86 232 / 0.06);
  border-color: var(--mi-brand);
  color: var(--mi-brand-deep);
}
.mi-voucher-add.is-added {
  background: rgb(18 156 107 / 0.08);
  border-color: rgb(18 156 107 / 0.4);
  color: #0b7a53;
}

.mi-voucher-explore {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 14px 22px 20px;
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-voucher-explore .mi-ico { transition: transform var(--mi-transition); }
.mi-voucher-explore:hover .mi-ico { transform: translateX(3px); }

@media (max-width: 380px) {
  /* Two controls on a 320px card: the cart button keeps its icon and gives up its label. */
  .mi-voucher-add span { display: none; }
  .mi-voucher-add { width: 42px; padding: 0; }
}

/* ---- the home page's own card (_HomeVoucherCard) ----
   Exactly two buttons, Quick View and Explore More, and no text link below them — so the foot is
   always the last child and the "reserve the missing link's row" padding above must not apply. */
.mi-voucher--home .mi-voucher-foot,
.mi-voucher--home .mi-voucher-foot:last-child { padding: 18px 22px 22px; }
.mi-voucher--home .mi-voucher-view,
.mi-voucher--home .mi-voucher-more { flex: 1 1 0; min-width: 0; min-height: 42px; padding-inline: 12px; }
.mi-voucher--home .mi-voucher-more .mi-ico { transition: transform var(--mi-transition); }
.mi-voucher--home .mi-voucher-more:hover .mi-ico { transform: translateX(3px); }
.mi-voucher--home .mi-voucher-more[target] .mi-ico { transform: none; }
.mi-voucher--home .mi-voucher-more[target]:hover .mi-ico { transform: translate(2px, -2px); }

/* The business's voucher banner in place of the logo plate. The picture area takes the artwork's
   own 400:172 shape instead of a fixed height, so no card width crops the discount panel or the
   mark; its corners are softly rounded, and the artwork eases forward as the card lifts. */
.mi-voucher--home .mi-voucher-stage--banner {
  display: block;
  height: auto;
  aspect-ratio: 400 / 172;
  border-radius: 12px;
  background: #e9edfb;
  box-shadow: 0 6px 18px rgb(19 26 58 / 0.1);
}
.mi-voucher-banner {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  transition: transform var(--mi-transition-slow);
}
.mi-voucher--home:hover .mi-voucher-banner { transform: scale(1.03); }

/* "Save NPR 3,500" — the saving as a warm gold badge under the price, the one thing on the card in
   the accent colour, so it is the first figure the eye lands on after the price itself. Dark gold
   ink on pale gold keeps it at 5:1 and above. */
.mi-voucher-save {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  justify-self: start;
  width: fit-content;
  margin: 6px 0 2px;
  padding: 6px 13px 6px 10px;
  background: linear-gradient(135deg, #fff8e0 0%, #ffe8a3 100%);
  border: 1px solid rgb(240 177 0 / 0.5);
  border-radius: var(--mi-radius-pill);
  box-shadow: 0 6px 16px rgb(240 177 0 / 0.2), inset 0 1px 0 rgb(255 255 255 / 0.8);
  color: var(--mi-accent-ink);
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
}
.mi-voucher-save .mi-ico { flex-shrink: 0; color: var(--mi-accent-dark); }
.mi-voucher-save-amount { color: #6b4a00; font-size: var(--mi-text-sm); font-weight: 800; letter-spacing: 0; }

@media (max-width: 380px) {
  .mi-voucher--home .mi-voucher-foot { gap: 8px; padding-inline: 16px; }
  .mi-voucher--home .mi-voucher-view,
  .mi-voucher--home .mi-voucher-more { padding-inline: 8px; font-size: var(--mi-text-xs); }
}

/* ---- home card, course-card layout (26 Sep 2026) ----
   The business's reference: a flat white card, the picture full-bleed across the top with a
   coloured category tag on its lower edge, a compact title, a grey meta row with small icons,
   then the price in brand blue beside a struck-through price, with the saving on the right.
   Home only — every rule is under .mi-voucher--home, so the PTE page's _VoucherCard and the
   Quick View's .mi-voucher-save keep their own look. Previous version:
   backup/2026-09-26-voucher-card/. */
.mi-voucher--home {
  border-color: rgb(19 26 58 / 0.07);
  border-radius: 12px;
  box-shadow: 0 2px 10px rgb(19 26 58 / 0.07);
}
.mi-voucher--home::before { display: none; }
.mi-voucher--home:hover {
  transform: translateY(-4px);
  border-color: rgb(19 26 58 / 0.1);
  box-shadow: 0 14px 32px rgb(19 26 58 / 0.13);
}

/* Full bleed: no inset, square lower edge, the card's own corners clip the top. */
.mi-voucher--home .mi-voucher-stage,
.mi-voucher--home .mi-voucher-stage--banner {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* The provider as the reference's category tag, straddling the picture's lower-left edge — not
   laid on the picture, where it covered the artwork's own "save ₹…" line. The negative margin
   is half the tag's height plus the body's top padding; the gap it leaves is taken back below.
   Brand blue, with every second card in orange as the reference alternates them. */
.mi-voucher-tag {
  position: relative;
  z-index: 1;
  align-self: flex-start;
  margin: -30px 0 -4px;
  padding: 4px 10px;
  border-radius: 5px;
  background: var(--mi-brand);
  box-shadow: 0 3px 8px rgb(19 26 58 / 0.22);
  color: #fff;
  font-family: var(--font-primary);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
}
.mi-voucher--home:nth-child(3n + 2) .mi-voucher-tag { background: #c75c06; }

.mi-voucher--home .mi-voucher-body { gap: 12px; padding: 18px 20px 0; }
.mi-voucher--home .mi-voucher-title {
  font-size: var(--mi-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.mi-voucher-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
  line-height: 1.4;
}
.mi-voucher-meta li { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.mi-voucher-meta .mi-ico { flex-shrink: 0; color: var(--mi-faint); }
/* "Buy online" and "incl. 13% VAT" as badges on the home card (8 Oct 2026, business's request).
   Scoped to .mi-voucher--home: the PTE page's own card row (_VoucherCard) keeps plain text. */
.mi-voucher--home .mi-voucher-meta { gap: 6px; align-items: center; }
.mi-voucher--home .mi-voucher-badge {
  gap: 4px;
  padding: 2px 8px 2px 6px;
  border: 1px solid transparent;
  border-radius: var(--mi-radius-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.3;
}
.mi-voucher--home .mi-voucher-badge .mi-ico { width: 12px; height: 12px; }
.mi-voucher--home .mi-voucher-badge .mi-ico { color: currentColor; }
.mi-voucher--home .mi-voucher-badge.is-buy {
  border-color: rgb(18 156 107 / 0.28);
  background: rgb(18 156 107 / 0.1);
  color: #0b7a53;
}
.mi-voucher--home .mi-voucher-badge.is-vat {
  border-color: rgb(67 86 232 / 0.24);
  background: rgb(67 86 232 / 0.08);
  color: var(--mi-brand-deep);
}
.mi-voucher--home .mi-voucher-badge.is-request {
  border-color: rgb(184 134 11 / 0.3);
  background: rgb(184 134 11 / 0.1);
  color: #8a6408;
}

/* The meta row (8 Oct 2026, business's request): "Actual Price" over its amount on the left, the
   two badges stacked on the right. One row at every width — the row never wraps; on a narrow card
   the amount breaks between "USD 248.6" and "(NPR 38,500) Approx." instead. */
.mi-voucher--home .mi-voucher-metarow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.mi-voucher--home .mi-voucher-metarow .mi-voucher-meta {
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  margin-left: auto;
}
/* The label on top, the amount under it (8 Oct 2026, business's request). */
.mi-voucher--home .mi-voucher-actual {
  display: inline-flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.35;
}
.mi-voucher--home .mi-voucher-actual-label {
  color: var(--mi-muted);
  font: 600 0.6875rem/1.35 var(--font-primary);
  white-space: nowrap;
}
.mi-voucher--home .mi-voucher-actual-value {
  color: var(--mi-title);
  font: 700 0.78125rem/1.35 var(--font-primary);
}
.mi-voucher--home .mi-voucher-actual .mi-nowrap { white-space: nowrap; }

/* Price left, saving right, on one line — the reference's price / rating row. */
.mi-voucher--home .mi-voucher-price {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding-top: 14px;
  border-top: 1px solid var(--mi-line);
}
.mi-voucher--home .mi-voucher-amount { gap: 8px; }
.mi-voucher--home .mi-voucher-now { color: var(--mi-brand); font-size: var(--mi-text-xl); font-weight: 800; }
.mi-voucher--home .mi-voucher-cur { color: var(--mi-brand); font-size: var(--mi-text-xs); font-weight: 700; }
.mi-voucher--home .mi-voucher-was { font-size: var(--mi-text-xs); }
/* "Offer Price" over the price (9 Oct 2026) — the "Actual Price" label's type and placement, so the
   two figures on the card read as a pair. Stacked, not inline: beside the price it pushed the
   Save badge off the row on most cards. */
.mi-voucher--home .mi-voucher-amount { flex-direction: column; align-items: flex-start; gap: 1px; }
.mi-voucher--home .mi-voucher-offer-label {
  color: var(--mi-muted);
  font: 600 0.6875rem/1.35 var(--font-primary);
  white-space: nowrap;
}
/* "Save NPR …" — the PTE voucher page's solid green badge (5 Oct 2026, business's request; was a
   pale green pill with dark green ink since 26 Sep). The same values as .mi-pb-save and the order
   card's .mi-shop-opt-off in product.css, which this page does not load: a green gradient, white
   tag and words, "Save" at 12px/600 and the amount the focus at 15px/800. White on #059669 is
   above 4.5:1 at the amount's size. The price row wraps (flex-wrap above), so on a narrow card the
   badge drops under the price rather than overlapping it. */
.mi-voucher--home .mi-voucher-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 5px 12px 5px 9px;
  background: linear-gradient(135deg, #10b981 0%, #059669 55%, #047857 100%);
  border: 0;
  border-radius: var(--mi-radius-pill);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.28), 0 6px 16px -6px rgb(5 150 105 / 0.65);
  color: #fff;
  font: 600 12px/1.2 var(--font-primary);
  letter-spacing: normal;
  white-space: nowrap;
}
.mi-voucher--home .mi-voucher-save .mi-ico { flex-shrink: 0; color: #fff; opacity: 0.9; }
.mi-voucher--home .mi-voucher-save-amount {
  color: #fff;
  font: 800 15px/1.1 var(--font-primary);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}

.mi-voucher--home .mi-voucher-foot,
.mi-voucher--home .mi-voucher-foot:last-child { padding: 16px 20px 20px; }

@media (prefers-reduced-motion: reduce) {
  .mi-voucher--home:hover { transform: none; }
}

/* ============================ why trust ============================ */

.mi-trust-grid {
  display: grid;
  gap: var(--mi-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1024px) {
  .mi-trust-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 28px; }
}

/* The one real photograph of the business being recognised — the team with the Pearson
   award — as a dark feature panel beside the list. */
.mi-trust-feature {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 380px;
  margin: 0;
  overflow: hidden;
  background: var(--mi-ink);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow-lg);
}
/* The PTE product page's panel still has one photograph, as a direct child. */
.mi-trust-feature > img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.mi-trust-feature:hover > img { transform: scale(1.03); }

/* The home page's Achievers photographs, sliding one to the next (26 Sep 2026). Five photos plus a copy of
   the first: the strip is six panels wide, each holds ~3.4s then slides for ~0.6s, and the last
   step lands on the copy, which is pixel-identical to where the loop restarts. Pauses while
   hovered so a visitor can look; held on the first photo under reduced motion. */
.mi-trust-slides {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.mi-trust-track {
  display: flex;
  width: 600%;
  height: 100%;
  animation: mi-trust-slide 20s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.mi-trust-feature:hover .mi-trust-track { animation-play-state: paused; }
.mi-trust-slide {
  flex: 0 0 calc(100% / 6);
  width: calc(100% / 6);
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
@keyframes mi-trust-slide {
  0%, 17%   { transform: translateX(0); }
  20%, 37%  { transform: translateX(calc(-100% / 6)); }
  40%, 57%  { transform: translateX(calc(-200% / 6)); }
  60%, 77%  { transform: translateX(calc(-300% / 6)); }
  80%, 97%  { transform: translateX(calc(-400% / 6)); }
  100%      { transform: translateX(calc(-500% / 6)); }
}
@media (prefers-reduced-motion: reduce) {
  .mi-trust-track { animation: none; }
}
.mi-trust-feature::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(16 27 58 / 0.04) 0%, rgb(16 27 58 / 0.34) 42%, rgb(16 27 58 / 0.93) 100%);
}

.mi-trust-feature-body { padding: clamp(22px, 3vw, 34px); }

.mi-trust-feature-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--mi-space-2);
  margin-bottom: var(--mi-space-3);
  padding: 6px 12px;
  background: rgb(254 198 36 / 0.16);
  border: 1px solid rgb(254 198 36 / 0.36);
  border-radius: var(--mi-radius-pill);
  color: #ffd862;
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mi-trust-feature-title {
  margin: 0 0 var(--mi-space-2);
  color: #fff;
  font-family: var(--font-primary);
  font-size: var(--mi-text-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.mi-trust-feature-text {
  max-width: 46ch;
  margin: 0 0 var(--mi-space-4);
  color: #cbd3ec;
  font-size: var(--mi-text-sm);
}
.mi-trust-feature-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-trust-feature-link:hover { color: var(--mi-accent); }

.mi-trust-list {
  display: grid;
  gap: var(--mi-space-4);
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}
@media (min-width: 640px) {
  .mi-trust-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.mi-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  transition: transform var(--mi-transition-slow), border-color var(--mi-transition),
              box-shadow var(--mi-transition);
}
.mi-trust-item:hover {
  transform: translateY(-3px);
  border-color: rgb(67 86 232 / 0.24);
  box-shadow: var(--mi-shadow);
}

.mi-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  background: linear-gradient(140deg, rgb(67 86 232 / 0.12) 0%, rgb(157 123 255 / 0.12) 100%);
  border: 1px solid rgb(67 86 232 / 0.14);
  border-radius: 14px;
  color: var(--mi-brand-deep);
}
.mi-trust-title {
  margin: 2px 0 6px;
  font-size: var(--mi-text-base);
  letter-spacing: -0.01em;
}
.mi-trust-item p { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); line-height: 1.6; }

/* HOME only (.mi-trust is the home section; the PTE page's trust cards sit in #why-us and keep
   the plain plate above). The plate is highlighted in the icons' own colour: every icon here is
   drawn in --mi-brand-deep, so the plate becomes that blue — the gradient the Services icons
   already use — with the icon knocked out in white (above 5:1 on both stops) and a soft glow of
   the same hue. On hover the glow deepens and the plate tilts, as the Services icons do. */
.mi-trust .mi-trust-icon {
  position: relative;
  background: linear-gradient(140deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  border-color: transparent;
  box-shadow: 0 8px 18px rgb(47 63 181 / 0.28), inset 0 1px 0 rgb(255 255 255 / 0.25);
  color: #fff;
  transition: transform var(--mi-transition-slow), box-shadow var(--mi-transition);
}
.mi-trust .mi-trust-icon::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 1px solid rgb(67 86 232 / 0.18);
  border-radius: 18px;
  pointer-events: none;
}
.mi-trust .mi-trust-item:hover .mi-trust-icon {
  box-shadow: 0 12px 26px rgb(47 63 181 / 0.38), inset 0 1px 0 rgb(255 255 255 / 0.25);
  transform: rotate(-4deg) scale(1.04);
}

/* ============================ our services ============================ */

.mi-svc-grid {
  display: grid;
  gap: var(--mi-space-5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 640px) {
  .mi-svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mi-svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
}

.mi-svc {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  color: var(--mi-body);
  transition: transform var(--mi-transition-slow), border-color var(--mi-transition),
              box-shadow var(--mi-transition);
}
.mi-svc::before {
  content: "";
  position: absolute;
  right: -30%;
  bottom: -60%;
  z-index: -1;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(67 86 232 / 0.13) 0%, transparent 66%);
  opacity: 0;
  transition: opacity var(--mi-transition-slow);
  pointer-events: none;
}
.mi-svc:hover {
  transform: translateY(-5px);
  border-color: rgb(67 86 232 / 0.28);
  box-shadow: var(--mi-shadow-lg);
  color: var(--mi-body);
}
.mi-svc:hover::before { opacity: 1; }
/* Highlight border (26 Sep 2026): a 2px brand gradient ring, drawn as a border-box background
   under a white padding-box one so the rounded corners stay clean. */
.mi-svc,
.mi-svc:hover {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--mi-brand) 0%, var(--mi-violet) 55%, var(--mi-cyan) 100%) border-box;
}

.mi-svc-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--mi-space-2);
}
.mi-svc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: var(--mi-plate);
  border: 1px solid var(--mi-line);
  border-radius: 16px;
  color: var(--mi-brand-deep);
  transition: background var(--mi-transition), color var(--mi-transition),
              border-color var(--mi-transition), transform var(--mi-transition-slow);
}
.mi-svc:hover .mi-svc-icon {
  background: linear-gradient(135deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  border-color: transparent;
  color: #fff;
  transform: rotate(-4deg);
}
.mi-svc-num {
  color: rgb(19 26 58 / 0.11);
  font-family: var(--font-primary);
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.mi-svc-title {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.mi-svc-text { color: var(--mi-muted); font-size: var(--mi-text-sm); line-height: 1.6; }
.mi-svc-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  color: var(--mi-link);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-svc-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--mi-line-strong);
  border-radius: 50%;
  transition: transform var(--mi-transition), background var(--mi-transition),
              border-color var(--mi-transition), color var(--mi-transition);
}
.mi-svc:hover .mi-svc-arrow {
  background: var(--mi-brand);
  border-color: var(--mi-brand);
  color: #fff;
  transform: rotate(45deg);
}

/* HOME's services grid (.mi-services is the home section): the deep-blue fill that used to appear
   only on hover is the card's resting surface (26 Sep 2026, business's instruction). The hover is
   a different effect: a brighter violet-to-cyan wash fades in over it (::after, a gradient cannot
   be transitioned) and the card lifts. Every colour on top stays well above 4.5:1 on the darkest
   stop: white title, 82% white copy, the accent yellow for the call to action. Keyboard focus gets
   the same treatment as the pointer. */
/* No border (26 Sep 2026, business's instruction): the fill alone defines the card. */
.mi-services .mi-svc,
.mi-services .mi-svc:hover {
  border: 0;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(157 123 255 / 0.32) 0%, transparent 55%),
    linear-gradient(150deg, #3a4bd6 0%, var(--mi-brand-deep) 45%, #1d2a5c 100%);
  box-shadow: 0 14px 32px rgb(47 63 181 / 0.22);
}
.mi-services .mi-svc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(110% 80% at 0% 100%, rgb(34 211 238 / 0.35) 0%, transparent 60%),
    linear-gradient(150deg, #5b4bf0 0%, #3a4bd6 50%, var(--mi-brand-deep) 100%);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}
.mi-services .mi-svc:is(:hover, :focus-visible)::after { opacity: 1; }
.mi-services .mi-svc:is(:hover, :focus-visible) {
  transform: translateY(-6px);
  box-shadow: 0 26px 54px rgb(47 63 181 / 0.38);
}
.mi-services .mi-svc::before {
  background: radial-gradient(circle, rgb(255 255 255 / 0.12) 0%, transparent 66%);
}
.mi-services .mi-svc-title { color: #fff; }
.mi-services .mi-svc-text { color: #fff; }
.mi-services .mi-svc-num { color: rgb(255 255 255 / 0.16); }
.mi-services .mi-svc-cta { color: var(--mi-accent); }
.mi-services .mi-svc-icon,
.mi-services .mi-svc:is(:hover, :focus-visible) .mi-svc-icon {
  background: rgb(255 255 255 / 0.14);
  border-color: rgb(255 255 255 / 0.22);
  color: #fff;
}
.mi-services .mi-svc:is(:hover, :focus-visible) .mi-svc-icon { transform: rotate(-4deg) scale(1.06); }
.mi-services .mi-svc-arrow { border-color: rgb(255 255 255 / 0.35); color: #fff; }
.mi-services .mi-svc:is(:hover, :focus-visible) .mi-svc-arrow {
  background: var(--mi-accent);
  border-color: var(--mi-accent);
  color: var(--mi-title);
}

/* ============================ scam alert ============================ */

/* Third-party credit-card fraud (_HomeScamAlert). A crimson panel carrying the badge and the
   illustration, beside a white panel with the explanation, a three-step timeline, the warning
   line and the safe-booking line — under a hazard stripe. Stacks on phones. Every text colour
   holds above 4.5:1 on its own surface. */
.mi-fraud { padding-top: 0; }
.mi-fraud-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
  background: #fff;
  border: 1px solid rgb(214 69 92 / 0.28);
  border-radius: var(--mi-radius-xl);
  box-shadow: 0 20px 48px rgb(166 31 54 / 0.16);
}
/* Hazard stripe across the top edge. */
.mi-fraud-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  height: 8px;
  background: repeating-linear-gradient(-45deg, #b8263e 0 12px, #fec624 12px 24px);
}
@media (min-width: 900px) {
  .mi-fraud-card { grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr); }
}

.mi-fraud-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mi-space-4);
  padding: clamp(30px, 4vw, 44px) clamp(20px, 3vw, 30px) clamp(22px, 3vw, 30px);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 120 140 / 0.35) 0%, transparent 60%),
    linear-gradient(160deg, #c9304a 0%, #9e1c33 55%, #6f1224 100%);
  color: #fff;
}
.mi-fraud-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 16px;
  border-radius: var(--mi-radius-pill);
  background: var(--mi-accent);
  box-shadow: 0 8px 20px rgb(0 0 0 / 0.2);
  color: #3a1a00;
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
/* The phone illustration (5 Oct 2026) is portrait, 362 x 488, where the drawing it replaced was
   landscape. Enlarged the same day (business's request, with the badge above it removed) to
   320px — about as tall as the copy beside it, and short of its own 362px so it stays sharp. A
   soft shadow under its transparent edges seats it on the crimson. */
.mi-fraud-art {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  filter: drop-shadow(0 18px 28px rgb(40 0 10 / 0.35));
}
/* …and the panel keeps that shadow to itself: stacked on a phone, it smudged the white below. Its
   side padding is trimmed and its top no longer reserves room for the badge, so the enlarged
   illustration reaches its 320px without the card growing. */
.mi-fraud-side {
  overflow: clip;
  padding: clamp(24px, 2.4vw, 30px) clamp(14px, 1.4vw, 20px) clamp(20px, 2.2vw, 26px);
}
@media (max-width: 899.98px) {
  .mi-fraud-art { max-width: 250px; }
}

.mi-fraud-main {
  min-width: 0;
  padding: clamp(28px, 3.5vw, 42px) clamp(22px, 3vw, 38px) clamp(22px, 3vw, 34px);
  background: linear-gradient(180deg, #fff 0%, #fff7f8 100%);
}
.mi-fraud-title {
  margin: 0 0 var(--mi-space-3);
  color: var(--mi-title);
  font-size: var(--mi-text-xl);
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.mi-fraud-title span { color: #b8263e; }
.mi-fraud-text { margin: 0 0 var(--mi-space-2); max-width: 80ch; color: var(--mi-body); }

/* The copy as a sequence: three steps joined by a line, the last one red. */
.mi-fraud-steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin: var(--mi-space-4) 0 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .mi-fraud-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
}
.mi-fraud-step {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  box-shadow: var(--mi-shadow-sm);
}
@media (min-width: 640px) {
  .mi-fraud-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -14px;
    width: 14px;
    height: 2px;
    background: rgb(214 69 92 / 0.45);
  }
}
.mi-fraud-step-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--mi-plate);
  color: var(--mi-brand-deep);
}
.mi-fraud-step-text {
  display: flex;
  flex-direction: column;
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
  line-height: 1.4;
}
.mi-fraud-step-text b {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
}
.mi-fraud-step--bad {
  background: #fff1f3;
  border-color: rgb(214 69 92 / 0.45);
}
.mi-fraud-step--bad .mi-fraud-step-icon { background: #b8263e; color: #fff; }
.mi-fraud-step--bad .mi-fraud-step-text b { color: #a61f36; }

/* The warning, set as a pull line, then the one thing to do instead. */
.mi-fraud-punch {
  margin: var(--mi-space-5) 0 0;
  padding-left: 14px;
  border-left: 4px solid #b8263e;
  color: #a61f36;
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.mi-fraud-safe {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: var(--mi-space-4) 0 0;
  padding: 12px 16px;
  border-radius: var(--mi-radius);
  background: rgb(18 156 107 / 0.1);
  border: 1px solid rgb(18 156 107 / 0.35);
  color: #0b6b48;
}
.mi-fraud-safe-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #129c6b;
  color: #fff;
}
.mi-fraud-safe-icon .mi-ico * { stroke-width: 3; }

/* ============================ our numbers ============================ */

.mi-stats-grid {
  display: grid;
  gap: var(--mi-space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1024px) {
  .mi-stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}
.mi-stat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 28px 16px 26px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow-sm);
  text-align: center;
  transition: transform var(--mi-transition-slow), box-shadow var(--mi-transition);
}
.mi-stat::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--mi-brand) 0%, var(--mi-violet) 55%, var(--mi-cyan) 100%);
}
.mi-stat:hover { transform: translateY(-4px); box-shadow: var(--mi-shadow-lg); }
.mi-stat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: 4px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5468ee 0%, var(--mi-brand-deep) 100%);
  color: #fff;
}
.mi-stat-value {
  background: linear-gradient(135deg, var(--mi-brand-deep) 0%, var(--mi-violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: var(--mi-brand-deep);
  -webkit-text-fill-color: transparent;
  font-family: var(--font-primary);
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.mi-stat-label {
  color: var(--mi-muted);
  font-size: var(--mi-text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================ comparison ============================ */

.mi-compare-wrap { display: grid; gap: var(--mi-space-6); }
.mi-compare-wrap .mi-section-head { margin-bottom: 0; }
@media (min-width: 1024px) {
  .mi-compare-wrap {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    column-gap: 56px;
  }
  .mi-compare-foot { grid-column: 2; }
}

.mi-compare-card {
  overflow-x: auto;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow-lg);
}

.mi-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--mi-text-sm);
}
.mi-compare-table th,
.mi-compare-table td {
  padding: 15px 18px;
  border-bottom: 1px solid var(--mi-line);
  text-align: left;
  vertical-align: middle;
}
.mi-compare-table tbody tr:last-child > * { border-bottom: 0; }
.mi-compare-table tbody th { color: var(--mi-title); font-weight: 500; line-height: 1.5; }
.mi-compare-table tbody tr:hover > * { background-color: rgb(67 86 232 / 0.03); }

.mi-compare-table thead th {
  background: var(--mi-ink);
  border-bottom: 0;
  color: #cfd6ee;
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}

.mi-compare-table .mi-compare-others { width: 26%; text-align: center; }
.mi-compare-table .mi-compare-us {
  width: 24%;
  background: rgb(67 86 232 / 0.05);
  text-align: center;
}
.mi-compare-table thead .mi-compare-us {
  position: relative;
  background: linear-gradient(135deg, #3445c9 0%, #243190 100%);
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: none;
}
/* Gold underline on the column that is ours — the one place gold marks a win, not a price. */
.mi-compare-table thead .mi-compare-us::after {
  content: "";
  position: absolute;
  inset: auto 18% 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--mi-accent);
}
.mi-compare-table thead .mi-compare-us img {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  padding: 2px;
  background: #fff;
  border-radius: 6px;
  vertical-align: middle;
}
.mi-compare-table thead .mi-compare-us span { vertical-align: middle; font-size: var(--mi-text-sm); }

.mi-compare-soft {
  display: inline-block;
  padding: 4px 10px;
  background: var(--mi-surface-2);
  border-radius: var(--mi-radius-pill);
  color: var(--mi-muted);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  white-space: nowrap;
}
.mi-compare-yes,
.mi-compare-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
/* The resellers column. Was drawn quieter than the tick (faint grey on grey); on 26 Sep 2026 the
   business asked for a bold red cross and a bold tick, so both marks are heavier now — and, later
   the same day, a stronger disc behind each: a deeper tint, a ring and a soft glow. On 29 Sep the
   cross's disc was matched to the tick's — same tint, ring and glow strength, and a red as dark as
   the tick's green — so the two read as a pair rather than the cross looking washed out. */
.mi-compare-yes {
  background: rgb(18 156 107 / 0.24);
  box-shadow: inset 0 0 0 1.5px rgb(18 156 107 / 0.5), 0 4px 10px rgb(18 156 107 / 0.18);
  color: #0b7a53;
}
.mi-compare-no {
  background: rgb(196 40 64 / 0.24);
  box-shadow: inset 0 0 0 1.5px rgb(196 40 64 / 0.5), 0 4px 10px rgb(196 40 64 / 0.18);
  color: #a3182f;
}
.mi-compare-yes .mi-ico,
.mi-compare-no .mi-ico { stroke-width: 3.2; }
.mi-compare-yes .mi-ico *,
.mi-compare-no .mi-ico * { stroke-width: 3.2; }

.mi-compare-foot { margin: 0; color: var(--mi-faint); font-size: var(--mi-text-xs); }

@media (max-width: 560px) {
  .mi-compare-table th,
  .mi-compare-table td { padding: 12px 8px; }
  .mi-compare-table tbody th { padding-left: 14px; }
  .mi-compare-table thead th { font-size: 10px; letter-spacing: 0.05em; }
  /* Two narrow columns, so the benefit keeps the width. "MetaITLearning" is one word and
     would otherwise set its column's minimum width by itself. */
  .mi-compare-table .mi-compare-others { width: 76px; }
  .mi-compare-table .mi-compare-us { width: 76px; }
  .mi-compare-table thead .mi-compare-us img { display: none; }
  /* The view puts a <wbr> between "MetaIT" and "Learning", so the name wraps there rather
     than wherever the column runs out ("MetaITLe / arning" with overflow-wrap: anywhere). */
  .mi-compare-table thead .mi-compare-us span { font-size: 11px; overflow-wrap: normal; }
  .mi-compare-soft { padding: 3px 8px; white-space: normal; }
}

/* ============================ customer stories ============================ */

/* "Share your story on WhatsApp" wraps to two lines in a phone-width card, and .mi-btn's
   line-height: 1 set the second line on top of the first. */
.mi-stories .mi-btn--wa { line-height: 1.25; white-space: normal; }

/* ---- no story yet: the invitation ----
   One panel — the ask on the left, three fanned "reel" cards on the right that say "Coming soon"
   on their face. Replaces a row of three tall, empty players that read as broken video. */
.mi-stories-stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mi-space-7);
  align-items: center;
  padding: clamp(20px, 5vw, 56px);
  overflow: hidden;
  background:
    radial-gradient(55% 85% at 100% 0%, rgb(157 123 255 / 0.16) 0%, transparent 62%),
    radial-gradient(45% 75% at 0% 100%, rgb(67 86 232 / 0.09) 0%, transparent 62%),
    #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow);
}
@media (min-width: 992px) {
  .mi-stories-stage {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--mi-space-8);
  }
}

.mi-stories-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mi-space-6); }
.mi-stories-copy .mi-section-head { margin-bottom: 0; }

.mi-stories-invite {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--mi-space-4);
  padding: 22px;
  background: rgb(247 249 253 / 0.85);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-lg);
}
.mi-stories-invite-title {
  margin: 0;
  color: var(--mi-title);
  font: 700 var(--mi-text-lg)/1.3 var(--font-primary);
}
.mi-stories-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.mi-stories-steps li {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
  line-height: 1.5;
}
.mi-stories-step-icon {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: rgb(67 86 232 / 0.09);
  border-radius: 11px;
  color: var(--mi-brand);
}
.mi-stories-invite .mi-btn { justify-self: start; margin-top: 2px; }

/* The fan. Three phone-shaped cards overlap; the middle one sits forward and upright. */
.mi-reels {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 0 10px;
}
.mi-reel {
  --reel-tilt: 0deg;
  --reel-shift: 0px;
  --reel-scale: 1;
  position: relative;
  isolation: isolate;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  justify-content: space-between;
  width: 188px;
  aspect-ratio: 9 / 16;
  padding: 14px;
  overflow: hidden;
  background: linear-gradient(165deg, #4356e8 0%, #25317a 58%, var(--mi-ink-hero) 100%);
  border: 5px solid #fff;
  border-radius: 30px;
  box-shadow: 0 26px 50px rgb(19 26 58 / 0.22), 0 4px 12px rgb(19 26 58 / 0.08);
  color: #fff;
  transform: translateX(var(--reel-shift)) rotate(var(--reel-tilt)) scale(var(--reel-scale));
  transition: transform var(--mi-transition-slow);
}
.mi-reel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 55% at 20% 8%, rgb(255 255 255 / 0.2) 0%, transparent 60%),
    radial-gradient(80% 50% at 90% 100%, rgb(157 123 255 / 0.45) 0%, transparent 65%);
}
.mi-reel:nth-child(1) {
  --reel-tilt: -8deg;
  --reel-shift: 20px;
  --reel-scale: 0.86;
  background: linear-gradient(165deg, #2f3fb5 0%, #1d2a5c 60%, var(--mi-ink-hero) 100%);
}
.mi-reel:nth-child(2) { z-index: 2; }
.mi-reel:nth-child(3) {
  --reel-tilt: 8deg;
  --reel-shift: -20px;
  --reel-scale: 0.86;
  background: linear-gradient(165deg, #7b64e8 0%, #2f3fb5 55%, var(--mi-ink-hero) 100%);
}
/* The fan opens a little under the pointer — the cards are decoration, so nothing else moves. */
.mi-reels:hover .mi-reel:nth-child(1) { --reel-tilt: -11deg; --reel-shift: 4px; }
.mi-reels:hover .mi-reel:nth-child(3) { --reel-tilt: 11deg; --reel-shift: -4px; }

.mi-reel-tag {
  align-self: flex-start;
  padding: 5px 10px;
  background: rgb(255 255 255 / 0.16);
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: var(--mi-radius-pill);
  font: 600 10px/1.2 var(--font-primary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.mi-reel-play {
  position: relative;
  display: inline-grid;
  place-items: center;
  align-self: center;
  width: 56px;
  height: 56px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgb(6 10 26 / 0.35);
  color: var(--mi-brand-deep);
}
.mi-reel-play .mi-ico { margin-left: 3px; }
.mi-reel:nth-child(2) .mi-reel-play::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 2px solid rgb(255 255 255 / 0.55);
  border-radius: 50%;
  animation: mi-reel-pulse 2.4s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}
@keyframes mi-reel-pulse {
  0% { opacity: 0.9; transform: scale(0.9); }
  100% { opacity: 0; transform: scale(1.5); }
}
.mi-reel-foot { display: grid; gap: 4px; }
.mi-reel-mark { color: var(--mi-accent); line-height: 0; }
.mi-reel-foot strong { font: 700 var(--mi-text-base)/1.25 var(--font-primary); }
.mi-reel-foot > span:not(.mi-reel-mark):not(.mi-reel-bar) {
  color: rgb(255 255 255 / 0.72);
  font-size: 11px;
  line-height: 1.4;
}
.mi-reel-bar {
  height: 3px;
  margin-top: 8px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.22);
  border-radius: var(--mi-radius-pill);
}
.mi-reel-bar span { display: block; width: 34%; height: 100%; background: var(--mi-accent); border-radius: inherit; }

/* The side reels tuck under the middle one, so their caption is centred and cut to the label —
   a left-aligned line would run under the middle card and read as clipped. */
.mi-reel:not(:nth-child(2)) .mi-reel-foot { justify-items: center; text-align: center; }
.mi-reel:not(:nth-child(2)) .mi-reel-foot > span:not(.mi-reel-mark):not(.mi-reel-bar) { display: none; }
.mi-reel:not(:nth-child(2)) .mi-reel-bar { justify-self: stretch; }
.mi-reel:not(:nth-child(2)) .mi-reel-foot strong { font-size: var(--mi-text-sm); }

/* ---- playable reels ----
   The same fan, as a list of real videos. The whole card is one link (stretched over it) that
   home.js turns into "open the player"; the poster sits under the card's own highlight, with a
   scrim at the foot so the white caption reads over any frame. */
.mi-reels--live { margin: 0; padding-left: 0; list-style: none; }
.mi-reel--live { cursor: pointer; }
.mi-reel-poster {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mi-reel--live::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 55%;
  background: linear-gradient(0deg, rgb(8 12 32 / 0.82) 0%, transparent 100%);
  pointer-events: none;
}
.mi-reel-link {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
}
.mi-reel-link:focus-visible { outline: 3px solid var(--mi-accent); outline-offset: -3px; }
.mi-reel--live .mi-reel-play { transition: transform var(--mi-transition), box-shadow var(--mi-transition); }
.mi-reel--live:hover .mi-reel-play,
.mi-reel--live:has(.mi-reel-link:focus-visible) .mi-reel-play {
  transform: scale(1.1);
  box-shadow: 0 12px 30px rgb(6 10 26 / 0.45), 0 0 0 8px rgb(255 255 255 / 0.2);
}

/* ---- the story player ----
   Portrait, sized to the viewport so a phone video fills a phone and never overflows a laptop.
   Two classes, because the generic .mi-sheet rule (width, white ground) comes later in this file. */
.mi-sheet.mi-sheet--story {
  width: min(420px, calc(100vw - 32px));
  background: #0b1026;
  color: #fff;
}
.mi-story-player { position: relative; display: grid; }
.mi-story-player .mi-sheet-close { top: 12px; right: 12px; }
.mi-story-player-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  max-height: calc(100dvh - 120px);
  background: #000;
}
.mi-story-player-frame video,
.mi-story-player-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}
.mi-story-player-caption {
  margin: 0;
  padding: 12px 18px 14px;
  color: rgb(255 255 255 / 0.82);
  font: 600 var(--mi-text-sm)/1.4 var(--font-primary);
}
.mi-story-player-caption:empty { display: none; }

@media (max-width: 575.98px) {
  .mi-reel { width: 120px; padding: 10px; border-width: 4px; border-radius: 22px; }
  .mi-reel, .mi-reels:hover .mi-reel:nth-child(1), .mi-reels:hover .mi-reel:nth-child(3) { --reel-shift: 0px; }
  .mi-reel + .mi-reel { margin-left: -38px; }
  .mi-reel-tag { padding: 4px 8px; font-size: 9px; }
  /* Too narrow for words on the tucked-in reels: they keep the play button and the bar. */
  .mi-reel:not(:nth-child(2)) .mi-reel-tag,
  .mi-reel:not(:nth-child(2)) .mi-reel-mark,
  .mi-reel:not(:nth-child(2)) .mi-reel-foot strong { visibility: hidden; }
  .mi-reel:nth-child(2) .mi-reel-foot strong { font-size: 13px; white-space: nowrap; }
  .mi-reel-play { width: 42px; height: 42px; }
  .mi-reel-foot > span:not(.mi-reel-mark):not(.mi-reel-bar) { display: none; }
  .mi-stories-invite { padding: 18px; }
  .mi-stories-invite .mi-btn { justify-self: stretch; justify-content: center; white-space: normal; text-align: center; }
}

/* ---- stories configured: the video row ----
   A swipeable row on phones, three across from tablet up and four on wide screens. */
.mi-story-row {
  display: grid;
  grid-auto-columns: minmax(230px, 76%);
  grid-auto-flow: column;
  gap: var(--mi-space-5);
  padding-bottom: var(--mi-space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
@media (min-width: 768px) {
  .mi-story-row {
    grid-auto-flow: row;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: visible;
  }
}
@media (min-width: 1200px) {
  .mi-story-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.mi-story {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-xl);
  box-shadow: var(--mi-shadow-sm);
  scroll-snap-align: start;
  transition: transform var(--mi-transition-slow), box-shadow var(--mi-transition);
}
.mi-story:hover { transform: translateY(-4px); box-shadow: var(--mi-shadow-lg); }

/* Portrait, because candidate stories are almost always filmed on a phone. It grows into any
   height the row adds — a story with no quote or name beside one that has both would otherwise
   end in a block of empty white. */
.mi-story-media {
  position: relative;
  isolation: isolate;
  flex: 1 0 auto;
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: linear-gradient(165deg, #2f3fb5 0%, #1d2a5c 60%, var(--mi-ink-hero) 100%);
  color: #fff;
}
/* A scrim under the cue, so white text reads over any poster. */
.mi-story-media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  z-index: -1;
  height: 45%;
  background: linear-gradient(0deg, rgb(10 16 40 / 0.72) 0%, transparent 100%);
  pointer-events: none;
}
.mi-story-media.is-playing::after { content: none; }
.mi-story-media img {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.mi-story:hover .mi-story-media img { transform: scale(1.04); }
.mi-story-media iframe,
.mi-story-media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.mi-story-chip {
  position: absolute;
  top: 14px;
  left: 14px;
  max-width: calc(100% - 28px);
  padding: 5px 10px;
  overflow: hidden;
  background: rgb(255 255 255 / 0.18);
  border: 1px solid rgb(255 255 255 / 0.24);
  border-radius: var(--mi-radius-pill);
  font: 600 11px/1.2 var(--font-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
  backdrop-filter: blur(6px);
}
.mi-story-play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  background: rgb(255 255 255 / 0.95);
  border-radius: 50%;
  box-shadow: 0 12px 30px rgb(6 10 26 / 0.35), 0 0 0 8px rgb(255 255 255 / 0.18);
  color: var(--mi-brand-deep);
  transition: transform var(--mi-transition);
}
.mi-story-play .mi-ico { margin-left: 3px; }
a.mi-story-media:hover .mi-story-play { transform: scale(1.08); }
.mi-story-cue {
  position: absolute;
  bottom: 14px;
  left: 16px;
  font: 600 var(--mi-text-xs)/1.2 var(--font-primary);
  letter-spacing: 0.04em;
}

.mi-story-body { display: grid; gap: var(--mi-space-4); padding: 18px 20px 20px; }
.mi-story-quote {
  margin: 0;
  padding-left: 14px;
  border-left: 3px solid var(--mi-accent);
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
  line-height: 1.55;
}
.mi-story-by {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0;
}
.mi-story-avatar {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--mi-brand) 0%, var(--mi-violet) 100%);
  border-radius: 50%;
  color: #fff;
  font: 700 var(--mi-text-sm)/1 var(--font-primary);
}
.mi-story-who { display: grid; gap: 2px; min-width: 0; font-size: var(--mi-text-sm); }
.mi-story-who strong { color: var(--mi-title); font-family: var(--font-primary); }
.mi-story-who span { color: var(--mi-faint); font-size: var(--mi-text-xs); }

/* ============================ faq ============================ */

.mi-faq-layout { display: grid; gap: var(--mi-space-6); }
@media (min-width: 1024px) {
  .mi-faq-layout {
    grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
    align-items: start;
    gap: 56px;
  }
  /* Stays in view beside a long run of answers; clears the sticky header. */
  .mi-faq-aside { position: sticky; top: 110px; }
}

/* HOME ONLY — testimonials cards get the same highlight border as the service cards (26 Sep
   2026). _Testimonials is shared with other pages, which keep their glass cards. */
.mi-home-page .mi-quote,
.mi-home-page .mi-quote:hover {
  border: 2px solid transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--mi-brand) 0%, var(--mi-violet) 55%, var(--mi-cyan) 100%) border-box;
}

.mi-home .mi-faq-home .mi-faq { max-width: none; }
/* 26 Sep 2026: the heading sits centred above, the "Still have a question?" card is gone and
   the questions run the full width of the container. */
.mi-faq-home .mi-faq-head { margin-bottom: var(--mi-space-6); }
.mi-faq-home .mi-faq { width: 100%; max-width: none; }
/* A visible outline on each question (26 Sep 2026, business's request) — plain, not loud: a
   white card with a light brand-tinted border that firms up on hover and when open. */
.mi-faq-home .mi-faq-item {
  background: #fff;
  border: 1px solid rgb(67 86 232 / 0.22);
}
.mi-faq-home .mi-faq-item:hover { border-color: rgb(67 86 232 / 0.38); }
.mi-faq-home .mi-faq-item[open] { border-color: rgb(67 86 232 / 0.45); }
.mi-home .mi-faq-home .mi-faq-a a { text-decoration: underline; text-underline-offset: 2px; }

.mi-faq-help {
  margin-top: var(--mi-space-5);
  padding: 24px;
  background: linear-gradient(145deg, #eef2ff 0%, #ffffff 60%, #f4efff 100%);
  border: 1px solid var(--mi-glass-border);
  border-radius: var(--mi-radius-lg);
  box-shadow: var(--mi-shadow);
}
.mi-faq-help-title {
  margin: 0 0 4px;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 700;
}
.mi-faq-help p { color: var(--mi-muted); font-size: var(--mi-text-sm); }
.mi-faq-help-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: var(--mi-space-4) 0;
}
.mi-faq-help-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}

/* ============================ dialogs ============================
   Native <dialog> throughout: showModal() supplies the focus trap, Escape and the backdrop.
   Quick View and the checkout are centred panels on desktop and bottom sheets on phones;
   the cart is a side panel. */

/* The page behind an open dialog stays put. */
html:has(dialog.mi-sheet[open]) { overflow: hidden; }

/* The UA's [hidden] loses to any class that sets display; on this page it must always win. */
.mi-home [hidden] { display: none !important; }

.mi-sheet {
  width: min(980px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 48px);
  margin: auto;
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 0;
  border-radius: var(--mi-radius-xl);
  box-shadow: 0 30px 80px rgb(10 16 40 / 0.35);
  color: var(--mi-body);
}
.mi-sheet[open] { animation: mi-sheet-in 0.36s cubic-bezier(0.22, 1, 0.36, 1); }
.mi-sheet::backdrop {
  background: rgb(16 22 48 / 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes mi-sheet-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

.mi-sheet-inner {
  position: relative;
  max-height: inherit;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mi-sheet-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgb(255 255 255 / 0.94);
  border: 1px solid var(--mi-line-strong);
  border-radius: 50%;
  color: var(--mi-title);
  cursor: pointer;
  transition: background var(--mi-transition), color var(--mi-transition),
              border-color var(--mi-transition);
}
.mi-sheet-close:hover { background: var(--mi-title); border-color: var(--mi-title); color: #fff; }

.mi-home .mi-sheet .mi-hint { color: var(--mi-faint); font-size: var(--mi-text-xs); line-height: 1.5; }

/* ---------- quick view ---------- */

.mi-qv { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 820px) {
  .mi-qv { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}

.mi-qv-media {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 56px 28px 64px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 100% 0%, rgb(157 123 255 / 0.18) 0%, transparent 55%),
    radial-gradient(110% 90% at 0% 100%, rgb(86 207 253 / 0.18) 0%, transparent 55%),
    linear-gradient(160deg, #f4f6ff 0%, #eaeefb 100%);
}
.mi-qv-media .mi-voucher-code { font-size: 140px; }
.mi-qv-media .mi-voucher-provider { top: 18px; left: 18px; }

.mi-qv-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(260px, 80%);
  height: 112px;
  padding: 18px 26px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 18px;
  box-shadow: 0 18px 40px rgb(19 26 58 / 0.12);
}
.mi-qv-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

.mi-qv-badge {
  position: absolute;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgb(255 255 255 / 0.92);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius-pill);
  color: #0b7a53;
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  line-height: 1.3;
}

.mi-qv-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 32px 28px 28px;
}

.mi-qv-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-right: 44px;
  color: var(--mi-link);
  font-family: var(--font-primary);
  font-size: var(--mi-text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.mi-qv-title { margin: 0; font-size: var(--mi-text-2xl); letter-spacing: -0.02em; }
.mi-qv-text { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); }

.mi-qv-list { display: grid; gap: var(--mi-space-2); margin: 0; }
.mi-qv-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
  line-height: 1.5;
}
.mi-qv-list .mi-ico { margin-top: 3px; color: var(--mi-success); }

.mi-qv-price {
  display: grid;
  gap: 3px;
  padding: 14px 16px;
  background: var(--mi-surface-2);
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
}

/* WHAT "More Detail" OPENS — the choice of voucher, assisted booking or training bundle.
   Radios and :has(), the same mechanism as the product page's "How would you like to book?", so
   the panels follow the choice with no script. Where :has() is unsupported the first option's
   panel simply stays, which is the checked one anyway. */
.mi-qv-opts { display: grid; gap: var(--mi-space-3); }

.mi-qv-modes {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.mi-qv-modes legend { margin-bottom: var(--mi-space-2); padding: 0; }

.mi-qv-mode { position: relative; cursor: pointer; }
/* Visually hidden but still the focusable, announced control. */
.mi-qv-mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }

.mi-qv-mode-card {
  display: grid;
  gap: 3px;
  height: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1.5px solid var(--mi-line-strong);
  border-radius: var(--mi-radius);
  transition: border-color var(--mi-transition), background var(--mi-transition),
              box-shadow var(--mi-transition);
}
.mi-qv-mode-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--mi-space-2);
}
.mi-qv-mode-label {
  color: var(--mi-title);
  font: 600 var(--mi-text-sm)/1.3 var(--font-primary);
}
.mi-qv-mode-price { display: flex; align-items: baseline; gap: 7px; }
.mi-qv-mode-now {
  color: var(--mi-accent-ink);
  font: 700 var(--mi-text-base)/1.2 var(--font-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mi-qv-mode-was {
  color: var(--mi-faint);
  font-size: var(--mi-text-xs);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.mi-qv-mode-text { color: var(--mi-muted); font-size: var(--mi-text-xs); line-height: 1.45; }

.mi-qv-mode:hover .mi-qv-mode-card { border-color: rgb(67 86 232 / 0.4); }
.mi-qv-mode input:checked + .mi-qv-mode-card {
  background: rgb(67 86 232 / 0.05);
  border-color: var(--mi-brand);
  box-shadow: 0 0 0 3px rgb(67 86 232 / 0.12);
}
.mi-qv-mode input:focus-visible + .mi-qv-mode-card { outline: 2px solid var(--mi-link); outline-offset: 2px; }

/* ONE OPTION AT A TIME. An exam sold three ways renders its checkout, heading, price and
   "how paying works" once per option (.mi-qv-offer--voucher/--booking/--bundle), and exactly
   the checked option's are displayed: same layout, that option's name and price. The voucher
   is the default, so without :has() support the plain voucher's pieces stay — the checked
   option anyway. The heading's names are spans; display:block keeps each on its own. */
.mi-qv-offer:not(.mi-qv-offer--voucher) { display: none; }
.mi-qv:has([data-qv-option="booking"]:checked) .mi-qv-offer:not(.mi-qv-offer--booking),
.mi-qv:has([data-qv-option="bundle"]:checked) .mi-qv-offer:not(.mi-qv-offer--bundle) { display: none; }
.mi-qv:has([data-qv-option="booking"]:checked) .mi-qv-offer--booking,
.mi-qv:has([data-qv-option="bundle"]:checked) .mi-qv-offer--bundle { display: grid; }
.mi-qv-title .mi-qv-offer--voucher,
.mi-qv:has([data-qv-option="booking"]:checked) .mi-qv-title .mi-qv-offer--booking,
.mi-qv:has([data-qv-option="bundle"]:checked) .mi-qv-title .mi-qv-offer--bundle { display: block; }
.mi-qv:has([data-qv-option="booking"]:checked) .mi-qv-title .mi-qv-offer--voucher,
.mi-qv:has([data-qv-option="bundle"]:checked) .mi-qv-title .mi-qv-offer--voucher { display: none; }

/* The enquiry form that takes the checkout's place. Tighter than the contact page's — it sits
   inside a dialog that is already scrolling, so the fields are close together and the textarea
   starts short. */
.mi-opt-form { display: grid; gap: var(--mi-space-2); }
.mi-opt-form .mi-field { gap: 4px; }
.mi-opt-form .mi-checkout-hint { margin-top: -4px; }
.mi-opt-form-msg { min-height: 74px; }
.mi-opt-form .mi-qv-buy-note { margin-top: 2px; }

.mi-qv-opts-note { margin: 0; color: var(--mi-faint); font-size: var(--mi-text-xs); line-height: 1.55; }

.mi-qv-qty { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.mi-qv-qty .mi-label { margin: 0; }

.mi-qv-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.mi-qv-actions .mi-btn { flex: 1 1 200px; }

.mi-qv-how {
  padding: 14px 16px;
  border: 1px dashed var(--mi-line-strong);
  border-radius: var(--mi-radius);
}
.mi-qv-how-title {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2);
  margin: 0 0 var(--mi-space-2);
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-qv-how-title .mi-ico { color: var(--mi-brand); }
.mi-qv-how-text { margin: 0; color: var(--mi-muted); font-size: var(--mi-text-sm); }
.mi-qv-how-text a { text-decoration: underline; text-underline-offset: 2px; }

.mi-qv-steps { display: grid; gap: var(--mi-space-2); margin: 0; counter-reset: qvstep; }
.mi-qv-steps li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
  line-height: 1.5;
}
.mi-qv-steps li::before {
  counter-increment: qvstep;
  content: counter(qvstep);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mi-brand);
  color: #fff;
  font: 700 11px/1 var(--font-primary);
}

.mi-qv-explore {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  font-family: var(--font-primary);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}

/* ---- the home Quick View's checkout (_HomeQuickView) ----
   A voucher on sale shows its checkout form where the logo panel was: left on a wide screen, first
   on a phone. It sits on the logo panel's own soft wash, so the dialog keeps its two-tone shape. */
@media (min-width: 820px) {
  .mi-qv--buy { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
}
.mi-qv-buy {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 30px 28px 28px;
  background:
    radial-gradient(120% 60% at 100% 0%, rgb(157 123 255 / 0.12) 0%, transparent 55%),
    radial-gradient(110% 60% at 0% 100%, rgb(86 207 253 / 0.1) 0%, transparent 55%),
    linear-gradient(160deg, #f6f8ff 0%, #eef1fb 100%);
  border-bottom: 1px solid var(--mi-line);
}
@media (min-width: 820px) {
  .mi-qv-buy { border-bottom: 0; border-right: 1px solid var(--mi-line); }
}
/* The form holds still while the details scroll (6 Oct 2026, business's request): the details
   column runs ~400px longer than the checkout form, and the form's panel used to stretch down beside
   it as an empty block. Now the panel is sticky at the top of the dialog's one scroller, and the
   column's tint and divider are painted by the row itself, full height — the same gradients as
   .mi-qv-buy, sized to its 1.08fr share (54%) — so nothing ends under the form.

   Only on a screen tall enough for the form (~775px) to fit the dialog: on a shorter one a stuck
   form would keep its Buy button out of view until the very end of the scroll, so there the dialog
   scrolls as one, as before. Opening the VAT panel makes the form taller than the dialog even here;
   it then rides up with the last of the scroll, so nothing in it is ever out of reach. */
@media (min-width: 820px) and (min-height: 820px) {
  .mi-qv--buy {
    background:
      linear-gradient(var(--mi-line), var(--mi-line)) calc(54% - 1px) 0 / 1px 100% no-repeat,
      radial-gradient(120% 60% at 100% 0%, rgb(157 123 255 / 0.12) 0%, transparent 55%) 0 0 / 54% 100% no-repeat,
      radial-gradient(110% 60% at 0% 100%, rgb(86 207 253 / 0.1) 0%, transparent 55%) 0 0 / 54% 100% no-repeat,
      linear-gradient(160deg, #f6f8ff 0%, #eef1fb 100%) 0 0 / 54% 100% no-repeat;
  }
  .mi-qv--buy > .mi-qv-buy {
    position: sticky;
    top: 0;
    align-self: start;
    background: none;
    border-right-color: transparent;
  }
}
/* The close button sits over this corner on a phone. */
.mi-qv-buy-head { display: grid; gap: 6px; padding-right: 44px; }
@media (min-width: 820px) {
  .mi-qv-buy-head { padding-right: 0; }
}
.mi-qv-buy-head .mi-qv-kicker { padding-right: 0; }
.mi-qv-buy-title {
  margin: 0;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.mi-qv-buy .mi-checkout-sum { margin-bottom: 0; background: #fff; box-shadow: var(--mi-shadow-sm); }
.mi-checkout-sum-logo .mi-voucher-mark { font-size: 13px; }
.mi-qv-buy .mi-checkout-form .mi-input { background: #fff; }
.mi-qv-buy-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--mi-faint);
  font-size: var(--mi-text-xs);
  line-height: 1.55;
}
.mi-qv-buy-note .mi-ico { flex-shrink: 0; margin-top: 2px; color: var(--mi-brand); }

/* The "Authorised PTE voucher seller" badge moves from the logo panel into the details. */
.mi-qv-badge--inline { position: static; align-self: flex-start; }
.mi-qv-price .mi-voucher-save { margin-top: 4px; }

/* ---------- quantity stepper ---------- */

.mi-stepper {
  display: inline-flex;
  align-items: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--mi-line-strong);
  border-radius: var(--mi-radius-pill);
  transition: border-color var(--mi-transition), box-shadow var(--mi-transition);
}
.mi-stepper:focus-within { border-color: var(--mi-brand); box-shadow: 0 0 0 4px rgb(67 86 232 / 0.14); }

.mi-stepper-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: var(--mi-title);
  cursor: pointer;
  transition: background var(--mi-transition), color var(--mi-transition);
}
.mi-stepper-btn:hover:not(:disabled) { background: rgb(67 86 232 / 0.08); color: var(--mi-brand-deep); }
.mi-stepper-btn:disabled { opacity: 0.35; cursor: default; }

.mi-stepper-input,
.mi-stepper-value {
  width: 46px;
  border: 0;
  background: transparent;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-base);
  font-weight: 700;
  line-height: 40px;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.mi-stepper-input:focus { outline: none; }
.mi-stepper-input::-webkit-outer-spin-button,
.mi-stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.mi-stepper--sm .mi-stepper-btn { width: 32px; height: 32px; }
.mi-stepper--sm .mi-stepper-value { width: 28px; font-size: var(--mi-text-sm); line-height: 32px; }

/* ---------- checkout ---------- */

.mi-sheet--checkout { width: min(620px, calc(100vw - 32px)); }
.mi-sheet--checkout .mi-sheet-inner { padding: 30px 28px 26px; }

.mi-checkout-head { display: grid; gap: var(--mi-space-2); margin-bottom: 18px; padding-right: 44px; }
.mi-checkout-head .mi-qv-kicker { padding-right: 0; }

/* The one "this spends money" panel in the dialog — the same warm edge the offer card used. */
.mi-checkout-sum {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgb(255 250 236) 0%, #fff 60%, rgb(247 249 254) 100%);
  border: 1px solid rgb(240 177 0 / 0.28);
  border-radius: var(--mi-radius);
}
.mi-checkout-sum-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 40px;
  padding: 6px 8px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: 10px;
}
.mi-checkout-sum-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mi-checkout-sum-line {
  display: grid;
  gap: 2px;
  color: var(--mi-title);
  font-size: var(--mi-text-sm);
  font-weight: 600;
}
.mi-checkout-sum-line .mi-hint { font-weight: 400; }
.mi-checkout-sum-total {
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-xl);
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

.mi-checkout-form { gap: 14px; }
.mi-checkout-hint { margin-top: -6px; }

/* ---------- cart ---------- */

.mi-sheet--cart {
  width: min(440px, 100vw);
  height: 100dvh;
  max-height: 100dvh;
  margin: 0 0 0 auto;
  border-radius: var(--mi-radius-xl) 0 0 var(--mi-radius-xl);
}
.mi-sheet--cart[open] { animation: mi-cart-in 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes mi-cart-in {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: none; }
}
/* Head and summary stay put; only the item list scrolls. A sticky summary over one shared
   scroller slid the last rows underneath it, so a voucher could look missing. */
.mi-sheet--cart .mi-sheet-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: none;
  overflow: hidden;
}
.mi-sheet--cart .mi-cart-list { flex: 1 1 auto; min-height: 96px; overflow-y: auto; }

/* Too short for all three: let the whole panel scroll instead of clipping the summary. */
@media (max-height: 640px) {
  .mi-sheet--cart .mi-sheet-inner { overflow-y: auto; }
  .mi-sheet--cart .mi-cart-list { flex: none; overflow: visible; }
}

.mi-cart-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mi-space-3);
  padding: 20px 22px;
  background: #fff;
  border-bottom: 1px solid var(--mi-line);
}
.mi-cart-head .mi-sheet-close { position: static; }
.mi-cart-title { margin: 0; font-size: var(--mi-text-xl); }
.mi-cart-title-count { color: var(--mi-faint); font-weight: 500; }

.mi-cart-empty {
  display: grid;
  justify-items: center;
  gap: var(--mi-space-2);
  margin: auto;
  padding: 40px 24px;
  text-align: center;
}
.mi-cart-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin-bottom: 6px;
  background: var(--mi-surface-2);
  border-radius: 50%;
  color: var(--mi-brand);
}
.mi-cart-empty-title {
  margin: 0;
  color: var(--mi-title);
  font-family: var(--font-primary);
  font-size: var(--mi-text-lg);
  font-weight: 700;
}

.mi-cart-list { display: grid; gap: 10px; margin: 0; padding: 16px 18px; }
.mi-cart-list:empty { display: none; }

.mi-cart-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--mi-space-3);
  padding: 12px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
  box-shadow: var(--mi-shadow-sm);
}
.mi-cart-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 42px;
  padding: 6px;
  background: var(--mi-plate);
  border: 1px solid var(--mi-plate-border);
  border-radius: 10px;
  color: #253063;
  font: 800 12px/1 var(--font-primary);
  letter-spacing: 0.04em;
}
.mi-cart-plate img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.mi-cart-info { display: grid; gap: 2px; min-width: 0; }
.mi-cart-name { color: var(--mi-title); font: 600 var(--mi-text-sm)/1.3 var(--font-primary); }
.mi-cart-price { color: var(--mi-faint); font-size: var(--mi-text-xs); }
.mi-cart-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: var(--mi-faint);
  cursor: pointer;
  transition: background var(--mi-transition), color var(--mi-transition);
}
.mi-cart-remove:hover { background: rgb(214 69 92 / 0.1); color: var(--mi-error); }

.mi-cart-foot {
  flex-shrink: 0;
  display: grid;
  gap: var(--mi-space-3);
  margin-top: auto;
  padding: 16px 18px 22px;
  background: linear-gradient(180deg, #fff 0%, var(--mi-page) 100%);
  border-top: 1px solid var(--mi-line);
}
.mi-cart-block {
  display: grid;
  gap: var(--mi-space-2);
  padding: 14px;
  background: #fff;
  border: 1px solid var(--mi-line);
  border-radius: var(--mi-radius);
}
.mi-cart-block-title {
  display: flex;
  align-items: center;
  gap: var(--mi-space-2);
  margin: 0;
  color: var(--mi-title);
  font: 700 var(--mi-text-sm)/1.3 var(--font-primary);
}
.mi-cart-block-title .mi-ico { color: var(--mi-brand); }
.mi-cart-line {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--mi-body);
  font-size: var(--mi-text-sm);
}
.mi-cart-line strong { color: var(--mi-title); font-family: var(--font-primary); font-size: var(--mi-text-lg); }
/* One per voucher on sale in the cart — the same grid rhythm as the block, ruled off from the
   row above when there is more than one. */
.mi-cart-pay { display: grid; gap: var(--mi-space-2); }
.mi-cart-pay + .mi-cart-pay { padding-top: var(--mi-space-3); border-top: 1px solid var(--mi-line); }
.mi-cart-enquire { justify-self: center; font: 600 var(--mi-text-sm)/1 var(--font-primary); }
.mi-cart-note { margin: 0; color: var(--mi-faint); font-size: var(--mi-text-xs); text-align: center; }

/* ---------- phones ---------- */

@media (max-width: 640px) {
  .mi-sheet:not(.mi-sheet--cart) {
    width: 100vw;
    max-height: 92dvh;
    margin: auto 0 0;
    border-radius: 22px 22px 0 0;
  }
  .mi-sheet:not(.mi-sheet--cart)[open] { animation: mi-sheet-up 0.38s cubic-bezier(0.22, 1, 0.36, 1); }
  .mi-qv-media { min-height: 190px; padding: 48px 20px 56px; }
  .mi-qv-media .mi-voucher-code { font-size: 104px; }
  .mi-qv-body { padding: 22px 18px 24px; }
  .mi-sheet--checkout .mi-sheet-inner { padding: 24px 18px 22px; }
  .mi-checkout-sum { grid-template-columns: minmax(0, 1fr) auto; }
  .mi-checkout-sum-logo { display: none; }
}

@keyframes mi-sheet-up {
  from { transform: translateY(40px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@media (max-width: 480px) {
  .mi-sheet--cart { width: 100vw; border-radius: 0; }
  .mi-cart-item { grid-template-columns: auto minmax(0, 1fr) auto; }
  .mi-cart-item .mi-stepper { grid-column: 2; justify-self: start; }
  .mi-cart-remove { grid-column: 3; grid-row: 1; }
}

/* ============================ toast ============================ */

.mi-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  display: flex;
  align-items: center;
  gap: var(--mi-space-3);
  max-width: calc(100vw - 32px);
  padding: 10px 10px 10px 14px;
  background: var(--mi-ink);
  border-radius: var(--mi-radius-pill);
  box-shadow: 0 18px 40px rgb(10 16 40 / 0.3);
  color: #fff;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.mi-toast.is-in { opacity: 1; transform: translate(-50%, 0); }
.mi-toast-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: var(--mi-success);
  border-radius: 50%;
}
.mi-toast-text { font-size: var(--mi-text-sm); font-weight: 500; line-height: 1.4; }
.mi-toast-action {
  flex-shrink: 0;
  padding: 8px 14px;
  background: #fff;
  border-radius: var(--mi-radius-pill);
  color: var(--mi-ink);
  font: 600 var(--mi-text-xs)/1 var(--font-primary);
  white-space: nowrap;
  cursor: pointer;
}
/* Clear of the WhatsApp button on a phone. */
@media (max-width: 640px) { .mi-toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* ============================ footer ============================
   The footer body (_HomeFooterGrid) is on every page now, so its styles live in site.css
   (the "footer body" block) — not here, where only the storefront would get them. */

/* ============================ motion & print ============================ */

@media (prefers-reduced-motion: reduce) {
  .mi-voucher:hover, .mi-svc:hover, .mi-trust-item:hover, .mi-story:hover,
  .mi-voucher:hover .mi-voucher-logo, .mi-svc:hover .mi-svc-icon, .mi-svc:hover .mi-svc-arrow,
  .mi-trust-feature:hover img, .mi-story:hover .mi-story-media img,
  .mi-voucher--home:hover .mi-voucher-banner { transform: none; }

  /* The logo strip holds still and becomes a row to swipe: one copy of the list, no fade, no
     pause button (there is nothing to pause). */
  .mi-logos-track { animation: none; }
  .mi-logos-viewport {
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--mi-gutter);
    /* Without this the first logo snaps flush to the screen edge, past the padding above. */
    scroll-padding-inline: var(--mi-gutter);
  }
  .mi-logos-viewport::-webkit-scrollbar { display: none; }
  .mi-logos-list[aria-hidden="true"],
  .mi-logos-list > li[aria-hidden="true"] { display: none; }
  .mi-logos-list > li { scroll-snap-align: start; }
  .mi-logo-tile:hover { transform: none; }
  .mi-sheet[open] { animation: none; }
  .mi-reel:nth-child(2) .mi-reel-play::after { animation: none; opacity: 0; }

  /* The story fan keeps its resting pose; it just does not open under the pointer. */
  .mi-reel { transition: none; }
  .mi-reels:hover .mi-reel:nth-child(1) { --reel-tilt: -8deg; --reel-shift: 20px; }
  .mi-reels:hover .mi-reel:nth-child(3) { --reel-tilt: 8deg; --reel-shift: -20px; }
}

@media print {
  .mi-toast, .mi-header-cart, .mi-voucher-foot { display: none !important; }
}

/* ============================ HOME · the PTE page's highlight (5 Oct 2026) ============================
   The business asked for the home page's selected / open / featured states to look like the PTE
   voucher page's (Bento · Ocean, design-variants.css), without redesigning the page. These are
   the same values, read from that page:

     selected or open   the border goes transparent and the Ocean edge gradient shows through it
                        as a border-box, over a blue-to-mint tint, with a blue glow under it;
     at rest            a 1.5px edge in the Ocean blue at 30%, firming to 50% on hover;
     featured column    the compare table in the page's navy, our column in the blue-to-teal
                        gradient, and the tick and cross as solid discs with a white mark;
     why cards          a hover that fills the card with the Ocean button gradient, words in white.

   HOME PAGE ONLY: every rule starts from .mi-home-page (on the home page's <body> alone). The
   voucher pages load home.css and share the FAQ, compare and dialog partials, and keep their own
   look from design-variants.css. Layout, content and markup are untouched — colour, edge and
   shadow only (plus a 1.5px edge where the PTE page has one). */

.mi-home-page {
  --hl-a1: #1d64d8;
  --hl-a1-rgb: 29 100 216;
  --hl-edge: linear-gradient(135deg, #2f7bf0 0%, #06b6d4 50%, #10b981 100%);
  --hl-cta: linear-gradient(135deg, #3b86f5 0%, #1d64d8 50%, #0b4a9e 100%);
  --hl-cta-glow: rgb(29 100 216 / 0.5);
  --hl-tint: #ecf6fd;
  --hl-tint-2: #ebfaf4;
  --hl-navy: #0b2e5c;
  --hl-ink: #06142b;
  --hl-border: rgb(29 100 216 / 0.30);
  --hl-border-strong: rgb(29 100 216 / 0.50);
}

/* ---- Quick View: "Choose what you need" — the PTE page's selected option ---- */
.mi-home-page .mi-qv-mode-card {
  border: 1.5px solid var(--hl-border);
  transition: border-color var(--mi-transition), background var(--mi-transition),
              box-shadow var(--mi-transition), transform 0.12s ease-out;
}
.mi-home-page .mi-qv-mode:hover .mi-qv-mode-card {
  border-color: var(--hl-border-strong);
  box-shadow: 0 10px 22px -14px rgb(var(--hl-a1-rgb) / 0.45);
}
.mi-home-page .mi-qv-mode:active .mi-qv-mode-card { transform: scale(0.985); }
.mi-home-page .mi-qv-mode input:checked + .mi-qv-mode-card {
  border-color: transparent;
  background: linear-gradient(135deg, var(--hl-tint), var(--hl-tint-2)) padding-box, var(--hl-edge) border-box;
  box-shadow: 0 14px 30px -14px rgb(var(--hl-a1-rgb) / 0.5);
}
.mi-home-page .mi-qv-mode input:checked + .mi-qv-mode-card .mi-qv-mode-label { color: var(--hl-ink); }
.mi-home-page .mi-qv-mode input:focus-visible + .mi-qv-mode-card {
  outline: 3px solid rgb(var(--hl-a1-rgb) / 0.5);
  outline-offset: 2px;
}

/* ---- FAQ: the open question edged in the gradient, the closed ones tinted ---- */
.mi-home-page .mi-faq-home .mi-faq-item {
  background: linear-gradient(180deg, var(--hl-tint) 0%, #fff 140%);
  border: 1.5px solid var(--hl-border);
}
.mi-home-page .mi-faq-home .mi-faq-item:hover { border-color: var(--hl-border-strong); }
.mi-home-page .mi-faq-home .mi-faq-item[open] {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--hl-edge) border-box;
  box-shadow: 0 16px 36px -16px rgb(var(--hl-a1-rgb) / 0.4);
}
/* The answers in black, as on the PTE page (5 Oct 2026, business's request; were the grey body
   colour). Links inside an answer keep their underline from the rule further up. */
.mi-home-page .mi-faq-home .mi-faq-a,
.mi-home-page .mi-faq-home .mi-faq-a a { color: var(--hl-ink); }

/* ---- Compare: our column featured as on the PTE page ---- */
.mi-home-page .mi-compare-card { border: 2px solid var(--hl-navy); }
.mi-home-page .mi-compare-table thead th { background: var(--hl-navy); }
.mi-home-page .mi-compare-table thead .mi-compare-us { background: linear-gradient(135deg, #1d64d8 0%, #0e7c9b 100%); }
.mi-home-page .mi-compare-table tbody :is(th, td) { border-bottom: 1.5px solid color-mix(in srgb, var(--hl-navy) 38%, transparent); }
.mi-home-page .mi-compare-table tbody tr:last-child > * { border-bottom: 0; }
.mi-home-page .mi-compare-table tbody tr:hover > * { background-color: rgb(var(--hl-a1-rgb) / 0.04); }
.mi-home-page .mi-compare-table td.mi-compare-us {
  background: rgb(var(--hl-a1-rgb) / 0.05);
  box-shadow: inset 2px 0 0 rgb(var(--hl-a1-rgb) / 0.55), inset -2px 0 0 rgb(var(--hl-a1-rgb) / 0.55);
}
.mi-home-page .mi-compare-table tbody tr:last-child td.mi-compare-us { box-shadow: inset 2px 0 0 rgb(var(--hl-a1-rgb) / 0.55); }
.mi-home-page :is(.mi-compare-yes, .mi-compare-no) { width: 34px; height: 34px; color: #fff; }
.mi-home-page .mi-compare-yes {
  background: linear-gradient(135deg, #25d366 0%, #1aa250 100%);
  box-shadow: 0 4px 12px rgb(26 162 80 / 0.4);
}
.mi-home-page .mi-compare-no {
  background: linear-gradient(135deg, #f0506e 0%, #c81e3a 100%);
  box-shadow: 0 4px 12px rgb(200 30 58 / 0.35);
}

/* ---- Voucher cards: the card you point at, or tab into, takes the Ocean edge ---- */
.mi-home-page .mi-voucher:not(.mi-voucher--live)::before { background: var(--hl-edge); }
.mi-home-page .mi-voucher:is(:hover, :focus-within) {
  border-color: var(--hl-border-strong);
  box-shadow: 0 2px 4px rgb(15 23 42 / 0.05), 0 24px 46px -16px rgb(var(--hl-a1-rgb) / 0.38);
}
.mi-home-page .mi-voucher:focus-within::before { opacity: 1; }

/* ---- Why trust us: the PTE page's "Why us" hover — the card fills with the button gradient.
   Pointer devices only: on a touch screen :hover sticks after a tap and would leave a card blue. */
@media (hover: hover) {
  .mi-home-page .mi-trust-item:hover {
    background: var(--hl-cta);
    border-color: transparent;
    box-shadow: 0 22px 44px -16px var(--hl-cta-glow);
  }
  .mi-home-page .mi-trust-item:hover :is(.mi-trust-title, p) { color: #fff; }
  .mi-home-page .mi-trust-item:hover p { color: rgb(255 255 255 / 0.9); }
  .mi-home-page .mi-trust .mi-trust-item:hover .mi-trust-icon { background: #fff; color: var(--hl-a1); }
  .mi-home-page .mi-trust .mi-trust-item:hover .mi-trust-icon::after { border-color: rgb(255 255 255 / 0.45); }
}

@media (prefers-reduced-motion: reduce) {
  .mi-home-page .mi-qv-mode-card { transition: none; }
  .mi-home-page .mi-qv-mode:active .mi-qv-mode-card { transform: none; }
}