/* ==========================================================================
   VOUCHER PRODUCT PAGE — BENTO · OCEAN (29 Sep 2026; the only design since 5 Oct 2026)

   Loaded after site.css, home.css and product.css by the voucher product pages
   (VoucherProduct/Pte, Toefl, Gre, Duolingo, Celpip, Oet and Voucher). The inline script in
   _DesignVariantsHead puts class .dv and data-design="3" on <html> before first paint, and every
   rule here starts from .dv; design-variants.js adds Bento's pinning and motion.

   This began as a preview of four layouts (Original, Showcase, Bento, Dock) crossed with four
   themes (Aurora, Royal, Ocean, Midnight), switched from a pill in the bottom-left corner. The
   business kept Bento · Ocean and the switch and the other variants were removed on 5 Oct 2026.
   The Bento rules still carry [data-design="3"]: their extra specificity is what lets them
   override the shared rules, so it is kept rather than flattened.

   What the design fixes, from the audit of the original at 1920px: the timeline was capped at
   820px, the compare table at 920px, the price cards at 1080px and every section head at 760px
   and centred, which left empty bands down both sides of a wide screen. Here nothing inside a
   section is capped narrower than the header's own container; grids size from the width they
   actually get (container queries on each section), and card counts divide evenly (6 "why"
   cards go 1, 2 or 3 across, never 5 + 1).

   EVERY rule is scoped to `main`. The utility strip, the header and the footer live outside
   <main> in _Layout, so they stay exactly as on the home page. Keep it that way.

   Specificity: `.dv main .x` is (0,2,1) — above product.css's `.x` and home.css's
   `.mi-home .x` (0,2,0), so no !important.
   ========================================================================== */

/* ============================ the theme: Ocean (tokens only) ============================
   Clear blue with teal and mint. The layout rules never name a colour; they read these. */

.dv main {
  --dv-a1: #1d64d8;
  --dv-a1-rgb: 29 100 216;
  --dv-a2: #0e7c9b;
  --dv-a2-rgb: 14 124 155;
  --dv-a3: #047857;
  --dv-a4: #4f46e5;
  --dv-edge: linear-gradient(135deg, #2f7bf0 0%, #06b6d4 50%, #10b981 100%);
  --dv-cta: linear-gradient(135deg, #3b86f5 0%, #1d64d8 50%, #0b4a9e 100%);
  --dv-cta-glow: rgb(29 100 216 / 0.5);
  --dv-cta-line: rgb(255 255 255 / 0.4);
  --dv-price: linear-gradient(135deg, #0b3f86 0%, #1d64d8 50%, #0e8a8a 100%);
  --dv-stub: linear-gradient(160deg, #2f7bf0 0%, #1d64d8 50%, #0e7c9b 100%);
  --dv-thead: #0b2e5c;
  --dv-us: linear-gradient(135deg, #1d64d8 0%, #0e7c9b 100%);
  --dv-ink: #06142b;
  --dv-ink-2: #1f2c44;
  --dv-ink-3: #4a5a73;
  --dv-line: rgb(15 23 42 / 0.09);
  --dv-line-2: rgb(15 23 42 / 0.16);
  --dv-tint: #ecf6fd;
  --dv-tint-2: #ebfaf4;
  --dv-chip: #e2f1fd;
  --dv-chip-ink: #0b4f9e;
  --dv-page: #f8fcfd;
  --dv-bento: #ebf3f7;
  --dv-hero-bg: transparent;
  --dv-mesh:
    radial-gradient(38% 46% at 10% 14%, rgb(59 134 245 / 0.18), transparent 70%),
    radial-gradient(34% 42% at 90% 6%, rgb(16 185 129 / 0.16), transparent 70%),
    radial-gradient(40% 48% at 62% 96%, rgb(6 182 212 / 0.15), transparent 70%);
  --dv-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.05), 0 6px 16px -8px rgb(var(--dv-a1-rgb) / 0.22);
  --dv-shadow: 0 1px 2px rgb(15 23 42 / 0.05), 0 16px 36px -14px rgb(var(--dv-a1-rgb) / 0.30);
  --dv-shadow-lg: 0 2px 4px rgb(15 23 42 / 0.05), 0 34px 70px -26px rgb(var(--dv-a1-rgb) / 0.46);
  --dv-hi: inset 0 1px 0 rgb(255 255 255 / 0.95);
}

/* ============================ shared: every new layout ============================ */

@property --dv-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
@keyframes dv-spin { to { --dv-angle: 360deg; } }
@keyframes dv-aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(3%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(-3%, 3%, 0) scale(1.04); }
}
@keyframes dv-sheen {
  0%, 72% { transform: translateX(-130%) skewX(-18deg); }
  100%    { transform: translateX(260%) skewX(-18deg); }
}
@keyframes dv-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

.dv main {
  --mi-title: var(--dv-ink);
  --mi-body: var(--dv-ink-2);
  --mi-muted: var(--dv-ink-3);
  --mi-faint: #697290;
  --mi-line: var(--dv-line);
  --mi-line-strong: var(--dv-line-2);
  --mi-radius-lg: 20px;
  --mi-radius-xl: 26px;
  --dv-gap: clamp(18px, 1.8vw, 28px);
  background: var(--dv-page);
  color: var(--dv-ink-2);
}

/* ---------------- the hero ---------------- */

/* `overflow: clip`, not hidden, so the sticky order card inside still sticks. */
.dv main .mi-pdp {
  isolation: isolate;
  overflow: clip;
  padding-block: clamp(18px, 2vw, 32px) clamp(36px, 4vw, 60px);
  background: var(--dv-hero-bg);
}
.dv main .mi-pdp::before {
  content: "";
  position: absolute;
  inset: -10% -5%;
  z-index: -1;
  background: var(--dv-mesh);
  animation: dv-aurora 20s ease-in-out infinite alternate;
  pointer-events: none;
}

.dv main .mi-breadcrumb,
.dv main .mi-breadcrumb a { color: var(--dv-ink-3); }
.dv main .mi-breadcrumb a:hover { color: var(--dv-ink); text-decoration: underline; }
.dv main .mi-breadcrumb [aria-current] { color: var(--dv-ink); font-weight: 600; }

.dv main .mi-pdp-head { align-items: flex-end; margin-bottom: clamp(20px, 2.2vw, 32px); }
.dv main .mi-pdp-head-text { max-width: min(1040px, 100%); }
.dv main .mi-pdp-title {
  color: var(--dv-ink);
  font-size: clamp(2.3rem, 1.1rem + 3.3vw, 4.25rem);
  letter-spacing: -0.042em;
  line-height: 1.02;
  text-wrap: balance;
}
.dv main .mi-pdp-sub { max-width: 64ch; color: var(--dv-ink-3); text-wrap: pretty; }

.dv main .mi-pdp-authorised {
  background: linear-gradient(180deg, #fff, #fafaff) padding-box, var(--dv-edge) border-box;
  border: 1.5px solid transparent;
  box-shadow: var(--dv-hi), 0 10px 24px -10px rgb(var(--dv-a1-rgb) / 0.45);
  color: var(--dv-ink);
}
.dv main .mi-pdp-authorised .mi-ico { color: var(--mi-accent-dark); }
.dv main .mi-pdp-authorised-note { color: var(--dv-ink-3); }
/* The seal ("Authorised PTE voucher seller") is styled in product.css — one dark green pill in
   every design and theme (29 Sep 2026). */

/* ---------------- the buy box ---------------- */

.dv main .mi-pdp-shop { gap: var(--dv-gap); }
@media (min-width: 960px) {
  .dv main .mi-pdp-shop { grid-template-columns: minmax(0, 1.4fr) minmax(360px, 0.9fr); }
}
.dv main .mi-shop-side { gap: var(--dv-gap); }

/* The ticket: glossy, leaning toward the pointer (design-variants.js sets the angles). The light
   that followed the pointer across the face was removed on 1 Oct 2026 (business's request): a
   white circle over the card, it washed out the illustration. */
.dv main .mi-shop-ticket {
  filter: drop-shadow(0 24px 40px rgb(var(--dv-a1-rgb) / 0.22));
  transform: perspective(1100px) rotateX(var(--dv-rx, 0deg)) rotateY(var(--dv-ry, 0deg));
  transition: transform 0.35s ease-out;
}
.dv main .mi-shop-ticket-main {
  background:
    radial-gradient(90% 120% at 100% 0%, rgb(var(--dv-a2-rgb) / 0.14) 0%, transparent 60%),
    linear-gradient(145deg, #fff 0%, var(--dv-tint) 100%);
}
.dv main .mi-shop-ticket-name { color: var(--dv-ink); }
.dv main .mi-shop-ticket-tagline { color: var(--dv-ink-3); }
.dv main .mi-shop-ticket-chips li {
  background: #fff;
  border: 1px solid rgb(var(--dv-a1-rgb) / 0.22);
  box-shadow: 0 2px 8px -2px rgb(var(--dv-a1-rgb) / 0.18);
  color: var(--dv-ink);
}
.dv main .mi-shop-ticket-chips .mi-ico { color: var(--dv-a1); }

/* Glass side cards: what's included and the trust panel. */
.dv main :is(.mi-shop-includes, .mi-shop-secure) {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.92), rgb(255 255 255 / 0.74));
  border: 1px solid var(--dv-line);
  border-radius: 20px;
  box-shadow: var(--dv-hi), var(--dv-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
          backdrop-filter: blur(14px) saturate(1.4);
}
.dv main .mi-shop-secure::before { background: var(--dv-edge); }
.dv main .mi-shop-includes-title .mi-ico { color: var(--dv-a2); }
.dv main .mi-shop-paywith { border-top-color: rgb(var(--dv-a1-rgb) / 0.22); color: var(--dv-chip-ink); }
.dv main .mi-shop-paywith .mi-pdp-paychips li {
  border-color: rgb(var(--dv-a1-rgb) / 0.22);
  box-shadow: 0 2px 6px -2px rgb(var(--dv-a1-rgb) / 0.2);
  color: var(--dv-ink);
}

.dv main .mi-shop-facts li {
  --fact-ink: var(--dv-a1);
  --fact-tint: var(--dv-tint);
  box-shadow: var(--dv-hi), 0 10px 24px -14px rgb(var(--dv-a1-rgb) / 0.4);
}
.dv main .mi-shop-facts li:nth-child(2) { --fact-ink: var(--dv-a2); --fact-tint: var(--dv-tint-2); }

/* The order card: white inside a slowly turning edge in the theme's colours. */
.dv main .mi-shop-order {
  border: 2px solid transparent;
  background:
    linear-gradient(180deg, #fff 0%, #fcfcff 100%) padding-box,
    conic-gradient(from var(--dv-angle), var(--dv-a1), var(--dv-a2), var(--dv-a3), var(--dv-a1)) border-box;
  box-shadow: var(--dv-hi), 0 0 0 6px rgb(var(--dv-a1-rgb) / 0.06), var(--dv-shadow-lg);
  animation: dv-spin 9s linear infinite;
}
.dv main .mi-shop-step-n { background: var(--dv-chip); color: var(--dv-chip-ink); }
.dv main .mi-shop-pay .mi-shop-step-n { background: var(--dv-tint-2); color: var(--dv-a2); }
.dv main .mi-shop-opt-card {
  border-color: var(--dv-line-2);
  border-radius: 16px;
  transition: border-color var(--mi-transition), background var(--mi-transition),
              box-shadow var(--mi-transition), transform 0.12s ease-out;
}
.dv main .mi-shop-opt:hover .mi-shop-opt-card {
  border-color: rgb(var(--dv-a1-rgb) / 0.45);
  box-shadow: 0 10px 22px -14px rgb(var(--dv-a1-rgb) / 0.45);
}
.dv main .mi-shop-opt:active .mi-shop-opt-card { transform: scale(0.985); }
.dv main .mi-shop-opt input:checked + .mi-shop-opt-card {
  border-color: transparent;
  background: linear-gradient(135deg, var(--dv-tint), var(--dv-tint-2)) padding-box, var(--dv-edge) border-box;
  box-shadow: 0 14px 30px -14px rgb(var(--dv-a1-rgb) / 0.5);
}
.dv main .mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-opt-dot {
  border-color: var(--dv-a1);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--dv-a1);
}
.dv main .mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-opt-price strong { color: var(--dv-ink); }
.dv main .mi-shop-opt input:checked + .mi-shop-opt-card .mi-shop-usd { color: var(--dv-a1); }
.dv main .mi-shop-opt input:focus-visible + .mi-shop-opt-card { outline: 3px solid rgb(var(--dv-a1-rgb) / 0.5); outline-offset: 2px; }
.dv main .mi-shop-opt-off {
  padding: 2px 9px;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5);
  border-radius: var(--mi-radius-pill);
  box-shadow: inset 0 1px 0 #fff;
  color: #047857;
}
.dv main .mi-shop-total {
  background: linear-gradient(135deg, var(--dv-tint), var(--dv-tint-2));
  border: 1px solid rgb(var(--dv-a1-rgb) / 0.14);
  border-radius: 16px;
  box-shadow: var(--dv-hi);
}
.dv main .mi-shop-total strong {
  background: var(--dv-price);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.dv main :is(.mi-shop-opt-price strong, .mi-shop-total strong, .mi-shop-each) { font-variant-numeric: tabular-nums; }

/* Buttons: a glossy fill in the theme, a top highlight, and light sweeping across. */
.dv main .mi-btn--primary {
  overflow: hidden;
  background: var(--dv-cta);
  box-shadow: inset 0 1px 0 var(--dv-cta-line), inset 0 -3px 8px rgb(0 0 0 / 0.18),
              0 14px 28px -10px var(--dv-cta-glow);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.dv main .mi-btn--primary:hover {
  background: var(--dv-cta);
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 var(--dv-cta-line), inset 0 -3px 8px rgb(0 0 0 / 0.18),
              0 20px 36px -12px var(--dv-cta-glow);
}
.dv main .mi-btn--primary:active { transform: translateY(1px) scale(0.99); }
.dv main .mi-btn--primary::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / 0.36), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.dv main .mi-btn--primary:hover::after { animation: dv-sheen 0.9s ease-out; }
/* Buy now shimmers on its own now and then, to draw the eye. */
.dv main .mi-shop-buy::after { animation: dv-sheen 4.8s ease-in-out infinite; }
.dv main .mi-btn--outline {
  background: #fff;
  border: 1.5px solid var(--dv-line-2);
  color: var(--dv-ink);
}
.dv main .mi-btn--outline:hover { border-color: var(--dv-a1); color: var(--dv-ink); }

/* ---------------- the in-page tabs: a floating glass island ---------------- */

/* The bar itself is transparent and lets clicks through; only the pill takes them. */
.dv main .mi-pdp-tabs {
  padding-block: 10px;
  background: transparent;
  border: 0;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  pointer-events: none;
}
.dv main .mi-pdp-tabs ul {
  width: fit-content;
  max-width: 100%;
  margin-inline: auto;
  padding: 6px;
  gap: 4px;
  background: rgb(255 255 255 / 0.74);
  border-radius: var(--mi-radius-pill);
  box-shadow: var(--dv-hi), 0 0 0 1px var(--dv-line), 0 16px 36px -14px rgb(15 23 42 / 0.28);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
          backdrop-filter: blur(18px) saturate(1.6);
  pointer-events: auto;
}
.dv main .mi-pdp-tabs a { padding: 10px 18px; color: var(--dv-ink-2); }
.dv main .mi-pdp-tabs a:is(:hover, :focus-visible) { background: var(--dv-cta); color: #fff; }
@media (pointer: coarse) {
  .dv main .mi-pdp-tabs a { align-items: center; min-height: 44px; }
}

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

/* Each section is a query container, so everything in it lays out from the width it is
   actually given — the full row, half a row (Bento), or the column beside the Dock rail. */
.dv main .mi-pdp-section { container: dvsec / inline-size; }

/* site.css drops the top padding of a section that follows another — (0,4,0), hence the
   doubled classes. */
.dv main .mi-section.mi-pdp-section,
.dv main .mi-section.mi-pdp-section + .mi-section.mi-pdp-section { padding-block: clamp(52px, 5.5vw, 88px); }

.dv main .mi-eyebrow {
  background: #fff;
  border: 1px solid rgb(var(--dv-a1-rgb) / 0.2);
  box-shadow: 0 6px 14px -8px rgb(var(--dv-a1-rgb) / 0.45);
  color: var(--dv-chip-ink);
  font-weight: 700;
}
.dv main .mi-eyebrow::before { background: var(--dv-a1); box-shadow: 0 0 0 3px rgb(var(--dv-a1-rgb) / 0.16); }
.dv main .mi-title-lg {
  color: var(--dv-ink);
  font-size: clamp(1.9rem, 1.15rem + 1.9vw, 2.95rem);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}
.dv main .mi-lead { color: var(--dv-ink-3); text-wrap: pretty; }

/* Section heads: left-aligned, and on a wide section split — the eyebrow and heading on the
   left, the lead on the right behind a gradient rule — so the head uses the row instead of
   sitting in a 760px column in the middle of it. */
.dv main .mi-pdp-section .mi-section-head { max-width: none; margin: 0 0 clamp(26px, 3vw, 44px); text-align: left; }
@container dvsec (min-width: 900px) {
  .dv main .mi-pdp-section .mi-section-head {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(32px, 5cqi, 96px);
    align-items: end;
  }
  .dv main .mi-pdp-section .mi-section-head > .mi-eyebrow { grid-column: 1; justify-self: start; }
  .dv main .mi-pdp-section .mi-section-head > .mi-title-lg { grid-column: 1; margin: 0; }
  .dv main .mi-pdp-section .mi-section-head > .mi-lead {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: end;
    margin: 0;
    padding-left: 22px;
    border-left: 3px solid;
    border-image: var(--dv-edge) 1;
  }
}

/* Overview: the copy and the code card fill the row; the notes become cards two across. */
.dv main .mi-pdp-two { gap: clamp(28px, 4vw, 64px); }
@container dvsec (min-width: 900px) {
  .dv main .mi-pdp-two { grid-template-columns: minmax(0, 1fr) minmax(420px, 0.72fr); }
}
.dv main .mi-pdp-notes { grid-template-columns: minmax(0, 1fr); gap: 12px; }
@container dvsec (min-width: 640px) {
  .dv main .mi-pdp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.dv main .mi-pdp-notes li {
  align-items: center;
  padding: 14px 16px;
  background: linear-gradient(180deg, #fff, #fcfcff);
  border: 1px solid var(--dv-line);
  border-radius: 14px;
  box-shadow: var(--dv-shadow-sm);
  color: var(--dv-ink-2);
}
.dv main .mi-pdp-notes .mi-ico {
  flex-shrink: 0;
  box-sizing: content-box;
  margin: 0;
  padding: 4px;
  background: rgb(18 156 107 / 0.12);
  border-radius: 50%;
}

/* Price: the cards fill the row, however many options there are; a lone card lays itself
   out across instead of stretching a narrow table. */
.dv main .mi-pb-grid {
  max-width: none;
  gap: var(--dv-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.dv main .mi-pb-card {
  background: linear-gradient(180deg, #fff, #fcfcff);
  border: 1px solid var(--dv-line);
  box-shadow: var(--dv-hi), var(--dv-shadow);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dv main .mi-pb-card:hover {
  transform: translateY(-4px);
  border-color: rgb(var(--dv-a1-rgb) / 0.3);
  box-shadow: var(--dv-hi), 0 24px 46px -16px rgb(var(--dv-a1-rgb) / 0.38);
}
.dv main .mi-pb-card { --pb-ink: var(--dv-a1); }
.dv main .mi-pb-card:nth-child(4n + 2) { --pb-ink: var(--dv-a2); }
.dv main .mi-pb-card:nth-child(4n + 3) { --pb-ink: var(--dv-a3); }
.dv main .mi-pb-card:nth-child(4n + 4) { --pb-ink: var(--dv-a4); }
@container dvsec (min-width: 760px) {
  .dv main .mi-pb-card:only-child {
    display: grid;
    grid-template-columns: minmax(200px, 0.35fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 40px;
  }
  .dv main .mi-pb-card:only-child .mi-pb-title { margin: 0; font-size: var(--mi-text-xl); }
}
.dv main .mi-pb-note {
  width: fit-content;
  max-width: 100%;
  padding: 12px 18px;
  background: #fff;
  border: 1px solid var(--dv-line);
  border-radius: 16px;
  box-shadow: var(--dv-shadow-sm);
  color: var(--dv-ink-3);
}

/* How it works: a rail of steps across the full width. Past 760px of section the steps stand
   side by side — all of them when they fit, scrolling sideways (snapping) when they do not —
   so a wide screen never shows one narrow column down the middle. */
.dv main .mi-pdp-timeline { max-width: none; margin: 0; }
.dv main .mi-pdp-timeline li { --step-ink: var(--dv-a1); --step-tint: var(--dv-tint); --step-edge: rgb(var(--dv-a1-rgb) / 0.22); }
.dv main .mi-pdp-timeline li:nth-child(4n + 2) { --step-ink: var(--dv-a2); --step-tint: var(--dv-tint-2); --step-edge: rgb(var(--dv-a2-rgb) / 0.22); }
.dv main .mi-pdp-timeline li:nth-child(4n + 3) { --step-ink: var(--dv-a3); --step-tint: #eaf6fb; --step-edge: rgb(2 132 199 / 0.2); }
.dv main .mi-pdp-timeline li:nth-child(4n + 4) { --step-ink: var(--dv-a4); --step-tint: #e9f8f1; --step-edge: rgb(5 150 105 / 0.22); }
.dv main .mi-pdp-step-icon { box-shadow: 0 0 0 6px var(--dv-page), 0 10px 20px -10px var(--step-ink); }
.dv main .mi-pdp-timeline li > div {
  background: linear-gradient(180deg, #fff, #fcfcff);
  box-shadow: var(--dv-hi), var(--dv-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.dv main .mi-pdp-timeline li:hover > div { transform: translateY(-3px); box-shadow: var(--dv-hi), var(--dv-shadow); }
.dv main .mi-pdp-timeline p { color: var(--dv-ink-3); }
@container dvsec (min-width: 760px) {
  /* The rail scrolls, so it clips whatever spills past it: the padding is room for a hovered
     step's lift and shadow (1 Oct 2026), and the matching negative margin keeps the steps
     exactly where they were. */
  .dv main .mi-pdp-timeline {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 1fr);
    gap: var(--dv-gap);
    margin: -6px -22px -36px;
    padding: 6px 22px 42px;
    scroll-padding-inline: 22px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .dv main .mi-pdp-timeline::before { display: none; }
  .dv main .mi-pdp-timeline li {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    gap: 16px;
    scroll-snap-align: start;
  }
  /* The joining line, icon to icon — per step, so it scrolls with the rail. */
  .dv main .mi-pdp-timeline li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 25px;
    left: 64px;
    right: calc(-1 * var(--dv-gap) + 10px);
    height: 2px;
    background: linear-gradient(90deg, var(--step-ink), transparent);
    opacity: 0.45;
  }
  .dv main .mi-pdp-timeline li > div {
    height: 100%;
    padding: 18px 20px 20px;
    border-left-width: 1px;
    border-top: 3px solid var(--step-ink);
  }
}

/* Compare: the table takes the width it is given. */
.dv main .mi-pdp-compare-card { max-width: none; }
.dv main .mi-compare-card {
  border: 1px solid var(--dv-line);
  border-radius: 22px;
  box-shadow: var(--dv-hi), var(--dv-shadow-lg);
}
.dv main .mi-compare-table thead th { background: var(--dv-thead); }
.dv main .mi-compare-table thead .mi-compare-us { background: var(--dv-us); }
.dv main .mi-compare-table td.mi-compare-us { background: rgb(var(--dv-a1-rgb) / 0.05); }
.dv main .mi-compare-table tbody tr:hover > * { background-color: rgb(var(--dv-a1-rgb) / 0.04); }

/* Why us: 1, 2 or 3 across by the width the section has — six cards always divide evenly. */
.dv main .mi-pdp-why { gap: var(--dv-gap); grid-template-columns: minmax(0, 1fr); }
@container dvsec (min-width: 560px) {
  .dv main .mi-pdp-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container dvsec (min-width: 980px) {
  .dv main .mi-pdp-why { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.dv main .mi-pdp-why-card {
  --why-ink: var(--dv-a1);
  --why-tint: var(--dv-tint);
  background: linear-gradient(180deg, #fff, #fcfcff);
  border: 1px solid var(--dv-line);
  box-shadow: var(--dv-hi), var(--dv-shadow-sm);
}
.dv main .mi-pdp-why-card:nth-child(4n + 2) { --why-ink: var(--dv-a2); --why-tint: var(--dv-tint-2); }
.dv main .mi-pdp-why-card:nth-child(4n + 3) { --why-ink: var(--dv-a3); --why-tint: #eaf6fb; }
.dv main .mi-pdp-why-card:nth-child(4n + 4) { --why-ink: var(--dv-a4); --why-tint: #e9f8f1; }
.dv main .mi-pdp-why-icon { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 8px 18px -10px var(--why-ink); }
.dv main .mi-pdp-why-card h3 { color: var(--dv-ink); }
.dv main .mi-pdp-why-card p { color: var(--dv-ink-3); }
/* Hover fills the card with the theme's button colour — the original's behaviour, themed. */
.dv main .mi-pdp-why-card:hover {
  background: var(--dv-cta);
  border-color: transparent;
  box-shadow: 0 22px 44px -16px var(--dv-cta-glow);
}
/* On the filled card every word turns white and the icon box goes white, as on the original. */
.dv main .mi-pdp-why-card:hover h3 { color: #fff; }
.dv main .mi-pdp-why-card:hover p { color: rgb(255 255 255 / 0.9); }
.dv main .mi-pdp-why-card:hover .mi-pdp-why-icon { background: #fff; color: var(--dv-a1); }
.dv main .mi-pdp-why-card:hover::after { background: radial-gradient(circle, rgb(255 255 255 / 0.18) 0%, transparent 70%); }

/* FAQ: each question a card; the open one edged in the theme's gradient. */
.dv main .mi-faq-home .mi-faq-item {
  background: linear-gradient(180deg, #fff, #fcfcff);
  border: 1px solid var(--dv-line);
  box-shadow: var(--dv-shadow-sm);
}
.dv main .mi-faq-home .mi-faq-item:hover { border-color: rgb(var(--dv-a1-rgb) / 0.35); }
.dv main .mi-faq-home .mi-faq-item[open] {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--dv-edge) border-box;
  box-shadow: 0 16px 36px -16px rgb(var(--dv-a1-rgb) / 0.4);
}
.dv main .mi-faq-a { color: var(--dv-ink); }
.dv main .mi-faq-a a { color: var(--dv-ink); text-decoration-color: var(--dv-a1); }

/* The FAQ, as on the original page (29 Sep 2026, business's request): the heading centred,
   the questions and answers the full width of the section under it. Beats the split head,
   which is the same specificity less one class. */
.dv main .mi-faq-home.mi-pdp-section .mi-section-head {
  display: block;
  max-width: 760px;
  margin: 0 auto clamp(26px, 3vw, 40px);
  text-align: center;
}
.dv main .mi-faq-home.mi-pdp-section .mi-section-head > .mi-title-lg { margin: 0; }
.dv main .mi-faq-home.mi-pdp-section .mi-section-head > .mi-lead {
  margin: 14px auto 0;
  padding: 0;
  border: 0;
  border-image: none;
}
.dv main .mi-faq-home .mi-faq { width: 100%; max-width: none; }

/* ---------------- dialogs and the phone buy bar (also inside <main>) ---------------- */

.dv main .mi-buybar { border-top: 1px solid var(--dv-line-2); }
.dv main .mi-buybar-price strong { color: var(--dv-ink); }

/* ---------------- motion ---------------- */

/* design-variants.js adds .dv-motion to <html> only when motion is allowed and
   IntersectionObserver exists, so without it nothing is ever hidden. An animation, not a
   transition, so a card's own hover lift is not slowed by the reveal once it has run. */
.dv.dv-motion main .dv-reveal:not(.is-in) { opacity: 0; }
.dv.dv-motion main .dv-reveal.is-in { animation: dv-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--dv-delay, 0s) backwards; }

.dv main :is(a, button, summary, input, select, textarea):focus-visible {
  outline: 3px solid rgb(var(--dv-a1-rgb) / 0.5);
  outline-offset: 2px;
}
/* Focus not obscured: the sticky header and the tabs island sit over the top of the page. */
html.dv { scroll-padding-top: 150px; }

@media (prefers-reduced-motion: reduce) {
  .dv main .mi-pdp::before,
  .dv main .mi-shop-order,
  .dv main .mi-shop-buy::after,
  .dv main .mi-btn--primary:hover::after { animation: none; }
  .dv main :is(.mi-pb-card, .mi-pdp-why-card, .mi-pdp-timeline li > div, .mi-btn--primary, .mi-shop-opt-card) { transform: none !important; }
  .dv main .mi-shop-ticket { transform: none; transition: none; }
}

/* ============================ stronger edges (29 Sep 2026) ============================
   The business found the card borders too faint ("bahut normal") across the page. Every card
   and panel now has a 1.5px edge in the theme's own accent (--dv-border), a darker one where a
   block needs to stand out (--dv-border-strong), and the step and price cards take their own
   colour. Two tokens, so each theme darkens in its own hue. */

.dv main {
  --dv-border: rgb(var(--dv-a1-rgb) / 0.30);
  --dv-border-strong: rgb(var(--dv-a1-rgb) / 0.50);
}

/* What's included: the lead line in near-black (the business's colour). */
.dv main .mi-shop-includes-lead { color: #06142b; }

/* Buy box. */
.dv main :is(.mi-shop-includes, .mi-shop-secure) { border: 1.5px solid var(--dv-border); }
.dv main .mi-shop-facts li {
  border: 1.5px solid color-mix(in srgb, var(--fact-ink) 40%, transparent);
  border-left: 4px solid var(--fact-ink);
}
.dv main .mi-shop-opt-card { border-width: 1.5px; border-color: var(--dv-border); }
.dv main .mi-shop-opt:hover .mi-shop-opt-card { border-color: var(--dv-border-strong); }
.dv main .mi-shop-total { border: 1.5px solid var(--dv-border); }
.dv main .mi-shop-ticket-chips li { border: 1.5px solid var(--dv-border); }
.dv main .mi-shop-paywith .mi-pdp-paychips li { border: 1.5px solid var(--dv-border); }

/* Overview: the four notes — a darker edge. */
.dv main .mi-pdp-notes li { border: 1.5px solid var(--dv-border-strong); }

/* Price breakdown: each card edged in its own colour, and the disclaimer under them
   highlighted — a brand edge on a tinted fill. */
.dv main .mi-pb-card { border: 1.5px solid color-mix(in srgb, var(--pb-ink) 45%, transparent); }
.dv main .mi-pb-card:hover { border-color: var(--pb-ink); }
.dv main .mi-pb-table tbody tr > * { border-top-color: rgb(15 23 42 / 0.16); }
.dv main .mi-pb-note {
  background: linear-gradient(135deg, var(--dv-tint), var(--dv-tint-2));
  border: 1.5px solid var(--dv-border-strong);
  color: var(--dv-ink-2);
  box-shadow: var(--dv-hi), 0 8px 20px -12px rgb(var(--dv-a1-rgb) / 0.45);
}

/* How it works: each step edged in its own colour, with its accent bar — the left one on a
   phone's vertical list, the top one on the rail. */
.dv main .mi-pdp-timeline li > div {
  border: 1.5px solid color-mix(in srgb, var(--step-ink) 42%, transparent);
  border-left: 3px solid var(--step-ink);
}
.dv main .mi-pdp-step-icon { border: 1.5px solid color-mix(in srgb, var(--step-ink) 45%, transparent); }
@container dvsec (min-width: 760px) {
  .dv main .mi-pdp-timeline li > div {
    border-left: 1.5px solid color-mix(in srgb, var(--step-ink) 42%, transparent);
    border-top: 3px solid var(--step-ink);
  }
}
.dv main .mi-pdp-timeline li:hover > div { border-color: var(--step-ink); }

/* Compare: a properly dark frame in the table head's own navy, and firmer rules between rows. */
/* Darker again (29 Sep 2026, second pass): the frame in the head's full navy, the row rules at
   a firm 1.5px in the same navy, and our column edged in the brand on both sides. */
.dv main .mi-compare-card { border: 2px solid var(--dv-thead); }
.dv main .mi-compare-table tbody :is(th, td) { border-bottom: 1.5px solid color-mix(in srgb, var(--dv-thead) 38%, transparent); }
.dv main .mi-compare-table td.mi-compare-us { box-shadow: inset 2px 0 0 rgb(var(--dv-a1-rgb) / 0.55), inset -2px 0 0 rgb(var(--dv-a1-rgb) / 0.55); }
.dv main .mi-compare-table tbody tr:last-child td.mi-compare-us { box-shadow: inset 2px 0 0 rgb(var(--dv-a1-rgb) / 0.55); }

/* Why us and the FAQ. */
.dv main .mi-pdp-why-card { border: 1.5px solid var(--dv-border); }
/* Why us cards lift off the page with a soft shadow in the theme's hue (29 Sep 2026) — also in
   Bento, where other cards inside a tile stay flat. */
.dv main .mi-pdp-why-card,
html.dv[data-design="3"] main .mi-pdp-section .mi-pdp-why .mi-pdp-why-card {
  box-shadow: var(--dv-hi), 0 2px 4px rgb(15 23 42 / 0.05), 0 16px 34px -14px rgb(var(--dv-a1-rgb) / 0.38);
}
.dv main .mi-pdp-why-card:hover,
html.dv[data-design="3"] main .mi-pdp-section .mi-pdp-why .mi-pdp-why-card:hover {
  box-shadow: 0 4px 10px rgb(15 23 42 / 0.08), 0 26px 50px -16px var(--dv-cta-glow);
}
.dv main .mi-faq-home .mi-faq-item { border: 1.5px solid var(--dv-border); }
.dv main .mi-faq-home .mi-faq-item:hover { border-color: var(--dv-border-strong); }

/* Section heads' eyebrow chips. */
.dv main .mi-eyebrow { border: 1.5px solid var(--dv-border); }

/* Bento's section tiles. */
html.dv[data-design="3"] main .mi-pdp-section > .mi-container { border: 1.5px solid var(--dv-border); }

/* ============================ black text, solid icons (29 Sep 2026) ============================
   The business's pass over the sections: every section's lead line and the words inside the
   price and "why" cards in near-black; the three price cards one and the same card (no longer
   blue / teal / green each) with a shadow; and every tick and cross a solid, filled circle —
   the WhatsApp button's green for a tick, a matching red for a cross. */

/* Lead lines under the headings: "A PTE Exam Voucher is…", "Every price includes…", "The same
   steps…", "The same Pearson test…" and the rest. */
.dv main .mi-lead,
.dv main .mi-pdp-section .mi-section-head > .mi-lead { color: var(--dv-ink); }

/* The authorised seal in the head: the verified rosette in gold. */
.dv main .mi-pdp-authorised .mi-ico { color: #e3a500; filter: drop-shadow(0 2px 4px rgb(227 165 0 / 0.35)); }

/* Overview notes: a solid WhatsApp-green tick. */
.dv main .mi-pdp-notes .mi-ico {
  padding: 5px;
  background: linear-gradient(135deg, #25d366 0%, #1aa250 100%);
  box-shadow: 0 4px 10px rgb(26 162 80 / 0.35);
  color: #fff;
}
.dv main .mi-pdp-notes .mi-ico * { stroke-width: 3; }

/* Price breakdown: one card for every option — the theme's accent on each — and black words.
   #price in the selector outranks Bento's flat-card rule, so the shadow shows there too. */
.dv main #price .mi-pb-card {
  --pb-ink: var(--dv-a1);
  border: 1.5px solid var(--dv-border);
  box-shadow: var(--dv-hi), 0 2px 4px rgb(15 23 42 / 0.05), 0 18px 36px -14px rgb(var(--dv-a1-rgb) / 0.4);
}
.dv main #price .mi-pb-card:hover { border-color: var(--dv-a1); }
.dv main #price :is(.mi-pb-title, .mi-pb-table th, .mi-pb-table td, .mi-pb-table s,
  .mi-pb-table .is-total > *, .mi-pb-table .is-save td, .mi-pb-table thead th) { color: var(--dv-ink); }
.dv main #price .mi-pb-title .mi-ico { color: var(--dv-a1); }

/* Why us: the words on each card black (white again on the hover fill). */
.dv main .mi-pdp-why-card p { color: var(--dv-ink); }

/* Compare: tick and cross as solid circles with a white mark. */
.dv main :is(.mi-compare-yes, .mi-compare-no) { width: 34px; height: 34px; color: #fff; }
.dv main .mi-compare-yes {
  background: linear-gradient(135deg, #25d366 0%, #1aa250 100%);
  box-shadow: 0 4px 12px rgb(26 162 80 / 0.4);
}
.dv main .mi-compare-no {
  background: linear-gradient(135deg, #f0506e 0%, #c81e3a 100%);
  box-shadow: 0 4px 12px rgb(200 30 58 / 0.35);
}

/* ---------------- second pass (29 Sep 2026) ---------------- */

/* What's included: the same solid WhatsApp-green tick as the overview notes. */
.dv main .mi-pdp-checks .mi-ico {
  padding: 4px;
  background: linear-gradient(135deg, #25d366 0%, #1aa250 100%);
  box-shadow: 0 3px 8px rgb(26 162 80 / 0.35);
  color: #fff;
}
.dv main .mi-pdp-checks .mi-ico * { stroke-width: 3; }

/* The ticket keeps one look whatever the theme — the Aurora ticket the business signed off:
   a lavender face, indigo-edged chips and the violet "% OFF" stub. Custom properties inherit,
   so redeclaring the theme tokens on the ticket alone is enough. */
.dv main .mi-shop-ticket {
  --dv-a1: #4356e8;
  --dv-a1-rgb: 67 86 232;
  --dv-a2-rgb: 124 77 234;
  --dv-tint: #f3f4ff;
  --dv-ink: #0b1026;
  --dv-ink-3: #4f5877;
  --dv-border: rgb(67 86 232 / 0.30);
  --dv-stub: linear-gradient(160deg, #5b4bf0 0%, #3a4bd6 55%, #2f3fb5 100%);
}

/* The price disclaimer: a deeper tinted fill so it reads as a notice, not a caption. */
.dv main .mi-pb-note {
  background: linear-gradient(135deg, rgb(var(--dv-a1-rgb) / 0.14) 0%, rgb(var(--dv-a2-rgb) / 0.12) 100%);
  border-color: rgb(var(--dv-a1-rgb) / 0.45);
  color: var(--dv-ink);
}
.dv main .mi-pb-note .mi-ico { color: #1aa250; }

/* Every section's intro line in one design (29 Sep 2026, business's request — first set on Why
   us, then asked for on all of them): larger, medium weight, the full column, and the gradient
   bar on its left. The overview's lead sits in the copy column rather than a section head, so
   it is named on its own. The FAQ's lead is centred under its heading, so it keeps the size but
   not the bar (its own rule, higher up, clears the border). */
.dv main .mi-pdp-section .mi-section-head > .mi-lead,
.dv main #overview .mi-pdp-two .mi-lead {
  max-width: none;
  padding-left: 22px;
  border-left: 3px solid;
  border-image: var(--dv-edge) 1;
  color: var(--dv-ink);
  font-size: clamp(1.2rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 500;
  line-height: 1.5;
}
.dv main .mi-faq-home.mi-pdp-section .mi-section-head > .mi-lead { padding: 0; border: 0; border-image: none; }

/* ============================ 3 · Bento ============================
   A dashboard of tiles on a soft tinted page. The buy box is a 12-column bento — the ticket,
   the order card, what's included, the two facts and the trust panel each a tile; the tiles
   and the order card are two columns, each as tall as its content. Every section is a tile of its own (no section numbers — removed at the business's
   request, 29 Sep 2026), full width, one below the other, and the in-page tabs leave the top to float as a dock at the bottom of the screen. */

.dv[data-design="3"] main { background: var(--dv-bento); padding-bottom: clamp(32px, 4vw, 72px); }

@media (min-width: 1200px) {
  /* Two columns, each as tall as its own content (1 Oct 2026). The tiles used to be items of
     this grid too (.mi-shop-side was display: contents) with the order card spanning their three
     rows, so an order card taller than the tiles — any extra option — shared its extra height
     across those rows and stretched the ticket and tiles with blank space. Now the tiles sit in
     their own grid inside .mi-shop-side, with the same column count and gap, so they are placed
     exactly as before, and the order card can grow without touching them. */
  .dv[data-design="3"] main .mi-pdp-shop {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    align-items: start;
  }
  .dv[data-design="3"] main .mi-shop-side { grid-column: 1 / 9; grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .dv[data-design="3"] main .mi-shop-ticket { grid-column: 1 / -1; }
  /* The order card is as tall as its content, stacked from the top, and stays in view while the
     tiles beside it are read (30 Sep 2026). Stretched to the tiles' height with its content spread
     apart, it opened a blank band between the last option and "How many?" — widest when the
     picked option has no saving line. */
  .dv[data-design="3"] main .mi-shop-order { grid-column: 9 / 13; grid-row: 1; align-self: start; align-content: start; position: sticky; top: 100px; }
  .dv[data-design="3"] main .mi-shop-includes { grid-column: 1 / 6; }
  .dv[data-design="3"] main .mi-shop-facts { grid-column: 6 / 9; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; }
  .dv[data-design="3"] main .mi-shop-secure { grid-column: 1 / -1; }
  .dv[data-design="3"] main .mi-shop-includes .mi-pdp-checks { grid-template-columns: minmax(0, 1fr); }
  /* A long list (five points or more — the AI Practice options, 1 Oct 2026, business's request)
     reads in two columns, 1 2 / 3 4 / 5 6, once the tile has room for them; a short one stays a
     single column rather than leaving one point alone on its last row. */
  .dv[data-design="3"] main .mi-shop-includes { container: includes / inline-size; }

  /* The PTE page (30 Sep 2026): its order card carries price tables, so it takes 5 of the 12
     columns and the tiles 7. */
  .dv[data-design="3"] main .mi-pdp--wide .mi-shop-side { grid-column: 1 / 8; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .dv[data-design="3"] main .mi-pdp--wide .mi-shop-order { grid-column: 8 / 13; }
  .dv[data-design="3"] main .mi-pdp--wide .mi-shop-includes { grid-column: 1 / 5; }
  .dv[data-design="3"] main .mi-pdp--wide .mi-shop-facts { grid-column: 5 / 8; }
}
/* The "includes" container exists only in the block above (Bento, 1200px and wider). */
@container includes (min-width: 340px) {
  .dv[data-design="3"] main .mi-shop-includes .mi-pdp-checks:has(> li:nth-child(5)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* The left tiles ride beside the order card (1 Oct 2026, business's request: the order card is
   the taller column, and the space under the tiles sat blank beside it). While the order card
   scrolls past, the tiles stay pinned, centred in the window below the header, so whatever
   room the window has beyond the tiles is split above and below them instead of standing as
   one blank band under them; the two columns then leave together, their bottoms level.
   On a window too short for every tile, they pin with their bottom 16px above the window's
   bottom instead: the top of the column (already read on the way down) passes out of view,
   and the rest stays beside the order card — the column is never pinned with its last tile
   out of reach. .dv-pin and --dv-side-h (the tiles' height) come from design-variants.js;
   without the script nothing is pinned and the page scrolls as before. */
@media (min-width: 1200px) {
  .dv[data-design="3"] main .mi-shop-side.dv-pin {
    position: sticky;
    top: min(max(100px, calc((100vh + 77px - var(--dv-side-h)) / 2)), calc(100vh - var(--dv-side-h) - 16px));
    align-self: start;
  }
}

/* Every section a tile, inset to the same edges as the hero. */
.dv[data-design="3"] main .mi-section.mi-pdp-section,
.dv[data-design="3"] main .mi-section.mi-pdp-section + .mi-section.mi-pdp-section { padding-block: 0 var(--dv-gap); }
.dv[data-design="3"] main .mi-pdp-section > .mi-container {
  width: calc(100% - 2 * var(--mi-gutter));
  max-width: calc(var(--mi-container) - 2 * var(--mi-gutter));
  height: 100%;
  padding: clamp(24px, 3vw, 48px);
  background: linear-gradient(180deg, #fff 0%, #fdfdff 100%);
  border: 1px solid var(--dv-line);
  border-radius: 30px;
  box-shadow: var(--dv-hi), 0 1px 2px rgb(15 23 42 / 0.04), 0 24px 50px -30px rgb(var(--dv-a1-rgb) / 0.35);
}
/* Cards inside a tile go flat and tinted — no card-in-card shadows. */
.dv[data-design="3"] main .mi-pdp-section :is(.mi-pb-card, .mi-pdp-why-card, .mi-pdp-timeline li > div, .mi-faq-item, .mi-pdp-notes li) {
  background: linear-gradient(180deg, var(--dv-tint) 0%, #fff 140%);
  box-shadow: none;
}
.dv[data-design="3"] main .mi-pdp-section .mi-pdp-why-card:hover { background: var(--dv-cta); }
/* …except a hovered "How it works" step, which lifts on a shadow in its own colour (1 Oct 2026,
   business's request) — the flat rule above had taken the hover shadow away too. */
.dv[data-design="3"] main .mi-pdp-section .mi-pdp-timeline li:hover > div {
  box-shadow: var(--dv-hi), 0 18px 36px -16px color-mix(in srgb, var(--step-ink) 45%, transparent);
}
.dv[data-design="3"] main .mi-pdp-section .mi-faq-item[open] { background: linear-gradient(#fff, #fff) padding-box, var(--dv-edge) border-box; }
.dv[data-design="3"] main .mi-pdp-section .mi-compare-card { box-shadow: none; }
.dv[data-design="3"] main .mi-pdp-step-icon { box-shadow: 0 0 0 6px #fff, 0 10px 20px -10px var(--step-ink); }


/* Compare and Why us used to share one row here; on 29 Sep 2026 the business asked for them back
   as full-width tiles, one below the other, like every other section. */

/* The tabs: a dock at the bottom of a wide screen. */
@media (min-width: 1024px) {
  .dv[data-design="3"] main .mi-pdp-tabs {
    position: fixed;
    top: auto;
    bottom: 18px;
    left: 50%;
    width: auto;
    padding: 0;
    transform: translateX(-50%);
  }
  .dv[data-design="3"] main .mi-pdp-tabs .mi-container { padding: 0; }
  .dv[data-design="3"] main .mi-pdp-tabs ul { box-shadow: var(--dv-hi), 0 0 0 1px var(--dv-line), 0 20px 44px -12px rgb(15 23 42 / 0.35); }
  html.dv[data-design="3"] { scroll-padding-top: 100px; }
}

/* Phone type scale (8 Oct 2026) — the voucher pages' share of the phone block at the end of
   site.css. The root there is already 15px; these take the display headings a step further,
   since their clamps bottom out at 2.3rem / 1.9rem. */
@media (max-width: 575.98px) {
  .dv main .mi-pdp-title { font-size: 2.125rem; }
  .dv main .mi-title-lg { font-size: 1.625rem; }
  .dv main .mi-pdp-section .mi-section-head > .mi-lead,
  .dv main #overview .mi-pdp-two .mi-lead { font-size: var(--mi-text-lg); }
}