/* The homepage (DESIGN.md / reference/home.html). Loaded on the homepage only.
   tx = trust strip, sx = sections, bx = today's best, cx = club band,
   kx = categories, px = popular shops, ax = advice, nx = newsletter. */

/* The cause watermark shows down the sides here as on every page: the page itself is see-through (body is the same
   cream), so the fixed watermark layers behind it show in the margins. */
.vmh { background: transparent; }
.vmh .hx-wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 var(--gutter); }
.vmh .hx-ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vmh h2, .vmh h3 { text-wrap: balance; }

/* ---------- trust strip ---------- */
.vmh .tx { background: var(--receipt); border-bottom: 2px dashed var(--rule); }
.vmh .tx .hx-wrap { padding-top: 16px; padding-bottom: 16px; }
.vmh .tx p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 0; font: 600 15px/1.4 var(--font-sans); color: var(--ink-2); }
.vmh .tx p > * + *::before { content: "·"; display: inline-block; width: 24px; text-align: center; color: var(--slate); }
.vmh .tx p > .is-linestart::before { display: none; }
.vmh .tx a { font-weight: 700; color: var(--teal); }

/* ---------- sections ---------- */
.vmh .sx { padding: clamp(56px, 7vw, 96px) 0; scroll-margin-top: 80px; }
.vmh .sx--tight { position: relative; }
.vmh .sx--tight::before { content: ""; position: absolute; top: 0; border-top: 2px dashed var(--rule); }
.vmh .sx-head { display: flex; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.vmh .sx-head h2 { margin: 0; font: 800 clamp(30px, 3.6vw, 48px)/1 var(--font-display); letter-spacing: -.03em; }
.vmh .sx-head p { margin: 10px 0 0; color: var(--slate); max-width: 40em; }
.vmh .sx-all { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 700; color: var(--teal); text-decoration: none; white-space: nowrap; }
.vmh .sx-all:hover { text-decoration: underline; }

/* ---------- today's best ---------- */
.vmh .bx-filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; margin: 0 0 20px; scrollbar-width: none; }
.vmh .bx-filters::-webkit-scrollbar { display: none; }
.vmh .bx-filters button { flex: none; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1.5px solid #cbd3d2; background: #fff; font: 600 14.5px var(--font-sans); color: var(--ink-2); cursor: pointer; }
.vmh .bx-filters button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.vmh .bx-item[hidden] { display: none; }
.vmh .bx-tickets .vm-ticket { height: 100%; }
.vmh .bx-empty { margin: 8px 0 0; color: var(--slate); }

/* ---------- club band ---------- */
.vmh .cx { background: var(--club); color: #fff; padding: clamp(56px, 7vw, 96px) 0; }
.vmh .cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.vmh .cx h2 { margin: 0 0 16px; font: 800 clamp(34px, 4.4vw, 60px)/.98 var(--font-display); letter-spacing: -.03em; }
.vmh .cx h2 span { color: #fff; opacity: .82; }
.vmh .cx p { color: rgba(255,255,255,.88); font-size: 17.5px; max-width: 32em; margin: 0 0 22px; }
.vmh .cx-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.vmh .cx-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 50px; padding: 0 22px; border-radius: 999px; font: 700 16px var(--font-sans); text-decoration: none; }
.vmh .cx-btn--y { background: var(--yellow); color: var(--ink); }
.vmh .cx-btn--y:hover { background: var(--yellow-hover); }
.vmh .cx-btn--o { box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); color: #fff; }
.vmh .cx-btn--o:hover { background: rgba(255,255,255,.1); }
.vmh .cx-pta { margin-top: 26px; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: var(--r-card); background: rgba(0,0,0,.18); max-width: 520px; }
.vmh .cx-pta .hx-ico { width: 30px; height: 30px; stroke-width: 1.8; }
.vmh .cx-pta p { margin: 0; font-size: 15px; }
.vmh .cx-pta a { color: #fff; font-weight: 700; }
.vmh .cx-flow { list-style: none; margin: 0; padding: 0; background: var(--receipt); color: var(--ink); border-radius: var(--r-card); box-shadow: 0 24px 50px rgba(0,0,0,.25); }
.vmh .cx-flow li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; padding: 18px 22px; border-bottom: 1px dotted #cfc8b4; }
.vmh .cx-flow li:last-child { border-bottom: 0; }
.vmh .cx-n { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; background: var(--club); color: #fff; display: grid; place-items: center; font: 800 16px var(--font-display); }
.vmh .cx-flow b { font: 800 18px/1.25 var(--font-display); letter-spacing: -.01em; }
.vmh .cx-flow li > span:not(.cx-n):not(.cx-state) { font: 500 14.5px/1.5 var(--font-sans); color: var(--ink-2); }
.vmh .cx-state { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.vmh .cx-state i { font-style: normal; font: 700 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; }
.vmh .cx-p { background: var(--yellow-soft); color: var(--yellow-ink); }
.vmh .cx-c { background: color-mix(in srgb, var(--club) 14%, #fff); color: var(--club-ink); }

/* ---------- categories: a card per category in its own colour, with three of its shops ---------- */
.vmh .kx-sec { background: #fff; }
.vmh .kx { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; list-style: none; margin: 0; padding: 0; }
.vmh .kx a { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 18px 18px 16px; border-radius: var(--r-card); background: var(--kx-wash); color: var(--ink); text-decoration: none; transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
.vmh .kx a:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(17,20,24,.1); }
.vmh .kx-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.vmh .kx-go { width: 18px; height: 18px; color: var(--kx-ink); opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1); }
.vmh .kx a:hover .kx-go { opacity: 1; transform: none; }
.vmh .kx b { font: 800 19px/1.15 var(--font-display); letter-spacing: -.01em; }
.vmh .kx-blurb { font-size: 14px; line-height: 1.4; color: color-mix(in srgb, var(--kx-ink) 55%, var(--ink)); }
.vmh .kx-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 12px; }
.vmh .kx-logos { display: flex; }
.vmh .kx-logos i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: #fff; box-shadow: 0 0 0 2px var(--kx-wash), 0 2px 6px rgba(17,20,24,.12); }
.vmh .kx-logos i + i { margin-left: -8px; }
.vmh .kx-logos img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.vmh .kx em { font-style: normal; font: 800 13.5px var(--font-sans); color: var(--kx-ink); white-space: nowrap; }

/* ---------- popular shops ---------- */
.vmh .px { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.vmh .px a { display: flex; align-items: center; gap: 10px; min-height: 52px; height: 100%; padding: 6px 14px 6px 8px; border-radius: 999px; background: #fff; box-shadow: var(--sh-card); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; }
.vmh .px a:hover { box-shadow: 0 0 0 2px var(--teal); }
.vmh .px i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; overflow: hidden; background: #fff; font: 800 13px var(--font-display); font-style: normal; box-shadow: inset 0 0 0 1px var(--edge); }
.vmh .px i img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.vmh .px a > span { display: grid; min-width: 0; line-height: 1.2; }
.vmh .px small { font: 600 13px var(--font-sans); color: var(--slate); }
.vmh .px i { flex: none; }
/* Always three rows: 6 across (18 shops), 4 across on tablets (12), 2 on phones (6). */
@media (max-width: 1100px) { .vmh .px { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vmh .px li:nth-child(n+13) { display: none; } }
@media (max-width: 640.98px) { .vmh .px { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vmh .px li:nth-child(n+7) { display: none; } }

/* ---------- money advice ---------- */
.vmh .ax { background: #fff; }
.vmh .ax-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); }
.vmh .ax-lead { display: block; color: var(--ink); text-decoration: none; }
.vmh .ax-ph { display: block; aspect-ratio: 16 / 10; border-radius: var(--r-feature); overflow: hidden; background: linear-gradient(135deg, var(--teal), var(--teal-deep)); }
.vmh .ax-ph img { width: 100%; height: 100%; object-fit: cover; }
.vmh .ax-lead h3 { margin: 18px 0 0; font: 800 clamp(24px, 2.6vw, 34px)/1.08 var(--font-display); letter-spacing: -.02em; }
.vmh .ax-lead:hover h3 { text-decoration: underline; text-decoration-thickness: 2px; }
.vmh .ax-lead p { margin: 10px 0 0; color: var(--ink-2); max-width: 38em; }
.vmh .ax-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 0; font-size: 13.5px; color: var(--slate); }
.vmh .ax-meta b { color: var(--teal); font-weight: 700; }
.vmh .ax-list { list-style: none; margin: 0; padding: 0; }
.vmh .ax-list li { border-bottom: 1px solid var(--rule); }
.vmh .ax-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; padding: 18px 0; color: var(--ink); text-decoration: none; }
.vmh .ax-list h3 { margin: 0; font: 700 18px/1.3 var(--font-display); letter-spacing: -.01em; }
.vmh .ax-list a:hover h3 { text-decoration: underline; }
.vmh .ax-list .ax-meta { margin: 0; grid-column: 1; font-size: 13px; }
.vmh .ax-go { grid-row: 1 / span 2; grid-column: 2; align-self: center; color: var(--teal); }

/* ---------- the Thursday receipt ---------- */
.vmh .nx { background: var(--yellow); color: var(--ink); padding: clamp(56px, 7vw, 96px) 0; }
.vmh .nx :focus-visible { outline-color: var(--ink); }
.vmh .nx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; }
.vmh .nx h2 { margin: 0 0 12px; font: 800 clamp(32px, 4vw, 54px)/1 var(--font-display); letter-spacing: -.03em; }
.vmh .nx-grid > div:first-child > p { margin: 0; font-size: 17px; max-width: 32em; }
.vmh .nx-slip { background: var(--receipt); padding: 30px 28px 32px; box-shadow: var(--sh-slip);
  -webkit-mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top/22px 12px repeat-x, linear-gradient(#000, #000) bottom/100% calc(100% - 12px) no-repeat;
          mask: conic-gradient(from 135deg at 50% 0, #000 90deg, #0000 0) top/22px 12px repeat-x, linear-gradient(#000, #000) bottom/100% calc(100% - 12px) no-repeat; }
.vmh .nx-slip h3 { margin: 6px 0 18px; padding-bottom: 14px; border-bottom: 2px dashed var(--rule); font: 800 15px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; }
.vmh .nx-form { display: flex; flex-wrap: wrap; gap: 8px; background: #fff; border: 2px solid var(--ink); border-radius: 999px; padding: 5px; }
.vmh .nx-form input[type="email"] { min-width: 0; outline: 0; background: none; padding: 0 16px; font: 500 17px var(--font-sans); height: 50px; }
.vmh .nx-form button { border: 0; border-radius: 999px; background: var(--ink); color: #fff; padding: 0 24px; font: 700 16px var(--font-sans); cursor: pointer; }
.vmh .nx-note { margin: 16px 4px 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.vmh .nx-note a { font-weight: 700; color: var(--teal); }
.vmh .nx-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 22px; }
.vmh .nx-share span { font-weight: 700; margin-right: 4px; }
.vmh .nx-share a, .vmh .nx-share button { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(17,20,24,.08); color: var(--ink); text-decoration: none; font: 600 14.5px var(--font-sans); cursor: pointer; }
.vmh .nx-share a:hover, .vmh .nx-share button:hover { background: rgba(17,20,24,.14); }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .vmh .kx { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .vmh .cx-grid, .vmh .nx-grid, .vmh .ax-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640.98px) {
  .vmh .sx-head { flex-direction: column; gap: 6px; }
  .vmh .kx { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vmh .kx a { padding: 16px 14px 14px; }
  .vmh .px a { min-height: 52px; }
  .vmh .nx-form { flex-direction: column; border-radius: var(--r-card); }
  .vmh .nx-form input[type="email"] { height: 52px; }
  .vmh .nx-form button { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) { .vmh .kx a { transition: none; } }

/* Category icons: a teal line icon in a mint disc above each name. */
.vmh .kx-ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: #fff; color: var(--kx-ink); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background .2s ease-out, color .2s ease-out; }
.vmh .kx a:hover .kx-ico { background: var(--kx-ink); color: #fff; }
@media (max-width: 640.98px) { .vmh .kx-ico { width: 38px; height: 38px; padding: 8px; } }

/* Up to tablets the search sits under the heading, above the how-it-works box, so it's on the first screen. */
.vmh .vm-homehead__links { display: none; }
@media (max-width: 1099.98px) {
  .vmh .vm-homehead > .vm-wrap { display: flex; flex-direction: column; }
  .vmh .vm-homehead .vm-homesearch { order: 1; margin-top: 16px; }
  .vmh .vm-homehead .vm-homevhero { order: 2; }
  .vmh .vm-homehead .vm-homehead__links { order: 1; }
}
/* Tablets: the how-it-works box without the phone video, which pushed everything else a screen down. */
@media (min-width: 641px) and (max-width: 1099.98px) {
  .vmh .vm-homevhero .vm-vhero__media { display: none; }
}
/* Phones: heading, subline, search and one cause link, then straight into today's codes. */
@media (max-width: 640.98px) {
  .vmh .vm-homehead .vm-homesearch { margin-top: 4px; }
  .vmh .vm-homehead .vm-homevhero { display: none; }
  .vmh .vm-homehead .vm-homehead__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; margin-top: 4px; }
  .vmh .vm-homehead .vm-homehead__cause { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--teal); font: 700 15px/20px var(--font-sans); text-decoration: underline; text-underline-offset: 3px; }
  .vmh .vm-homehead__trust { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--receipt); color: var(--ink-2); font: 600 14px/20px var(--font-sans); text-decoration: none; }
  .vmh .vm-homehead__trust .vm-ico { width: 16px; height: 16px; color: var(--teal); }
  .vmh .vm-homehead__cause .vm-ico { width: 16px; height: 16px; fill: currentColor; }
}
/* Phones: the trust row is a chip in the hero, and Today's best sits close under it, its heading and "See all" side
   by side, so the first code (and its Get code button) is on the first screen. */
@media (max-width: 640.98px) {
  .vmh .tx { display: none; }
  .vmh .sx--best { border-top: 2px dashed var(--rule); }
  .vmh .sx--best .sx-head { flex-direction: row; align-items: center; }
  .vmh .sx--best .sx-head h2 { font-size: 26px; }
  .vmh .sx--best .sx-head p { display: none; }
  .vmh .sx--best .sx-all { font-size: 15px; }
}

/* Sign-up slip: errors under the box, and a proper confirmation once it's sent. */
.vmh .nx-form[hidden], .vmh .nx-note[hidden], .vmh .nx-done[hidden], .vmh .nx-error[hidden] { display: none; }
.vmh .nx-error { margin: 10px 4px 0; padding: 8px 12px; border-radius: 10px; background: #fdeee4; color: var(--expiring); font: 600 14px/1.4 var(--font-sans); }
.vmh .nx-done { display: flex; gap: 14px; align-items: flex-start; padding: 4px 2px; }
.vmh .nx-done__ico { width: 44px; height: 44px; padding: 10px; border-radius: 50%; background: var(--teal); color: #fff; flex: none; }
.vmh .nx-done h4 { margin: 2px 0 6px; font: 800 22px/1.15 var(--font-display); letter-spacing: -.02em; outline: none; }
.vmh .nx-done p { margin: 0 0 8px; font-size: 15.5px; line-height: 1.5; color: var(--ink-2); }
.vmh .nx-done b { color: var(--ink); overflow-wrap: anywhere; }
.vmh .nx-done__small { font-size: 13.5px !important; color: var(--slate) !important; }
.vmh .nx-done__small button { border: 0; background: none; padding: 0; font: 700 13.5px var(--font-sans); color: var(--teal); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: no-preference) { .vmh .nx-done:not([hidden]) { animation: vm-drop .35s cubic-bezier(.16,1,.3,1) both; } }

/* Today's best: tickets in a row are the same height. Titles always take two lines (longer ones are cut with "…"),
   each ticket fills its grid cell, and the Get code button sits on the bottom edge. Rows size to their own content,
   so opening one ticket's Terms only grows its own row. */
.vmh .bx-tickets { grid-auto-rows: auto; }
.vmh .bx-item { display: flex; min-width: 0; }
.vmh .bx-item > .vm-ticket { flex: 1; display: flex; min-width: 0; }
.vmh .bx-item .vm-ticket__in { flex: 1; height: 100%; }
.vmh .bx-item .vm-ticket__body { display: flex; flex-direction: column; gap: var(--space-3); }
.vmh .bx-item .vm-ticket__text { flex: 1; }
.vmh .bx-item .vm-ticket__title { min-height: 2lh; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.vmh .bx-item .vm-ticket__action { margin-top: auto; }
/* Sign-up box: the email field is at least 44px tall (it collapsed to 20px in the phone column), has its own border on
   phones, and the box shows keyboard focus. */
.vmh .nx-form input[type="email"] { min-height: 44px; flex: 1 1 auto; }
.vmh .nx-form:focus-within { outline: 3px solid var(--yellow, #f5b800); outline-offset: 2px; }
/* Tablets (641-1099px): a compact how-it-works box (the three steps side by side), the trust row on one line and
   Today's best close under it, so the first code card starts on the first screen. */
@media (min-width: 641px) and (max-width: 1099.98px) {
  .vmh .vm-homevhero .vm-vhero__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .vmh .vm-homevhero { min-height: 0; }
  .vmh .tx .hx-wrap { padding-top: 10px; padding-bottom: 10px; }
  .vmh .tx p { font-size: 13.5px; flex-wrap: nowrap; white-space: nowrap; }
  .vmh .tx p > * + *::before { width: 14px; }
}
/* H4 (sweep): the category card footer wraps rather than overflowing; small phones show two logos. */
.vmh .kx-foot { flex-wrap: wrap; row-gap: 6px; min-width: 0; }
.vmh .kx-foot em { margin-left: auto; }
@media (max-width: 400px) { .vmh .kx-foot .kx-logos i:nth-child(n+3) { display: none; } }
/* M3: room for the filter buttons' focus ring inside the scrolling row. */
.vmh .bx-filters { padding-block: 6px; margin-top: -6px; scroll-padding-inline: 6px; }
/* Phones: the 44px chip and Terms button (M12) cost 24px; tighter spacing above Today's best keeps the first Get code
   button on the first screen. */
@media (max-width: 640.98px) {
  .vmh .vm-homehead { padding-bottom: 2px; }
  .vmh .sx--best { padding-top: 4px; }
  .vmh .sx--best .sx-head { margin-bottom: 0; }
  .vmh .sx--best .bx-filters { margin-bottom: 6px; }
}
/* L4: the sign-up box has one border (the field inside it has none). L5: the share row breaks evenly. */
.vmh .nx-form input[type="email"] { border: 0; border-radius: 10px; }
@media (max-width: 640.98px) { .vmh .nx-form input[type="email"] { border: 0; } }
.vmh .nx-share > span { flex-basis: 100%; }
/* L9: on tablets the club band's steps card fills the width rather than sitting to one side. */
@media (max-width: 900px) { .vmh .cx-grid > * { width: 100%; max-width: none; justify-self: stretch; } }
/* C2: tablets: a little less padding in the hero and above Today's best, so the first code card starts within 900px at
   820 even with the cause bar showing. */
@media (min-width: 641px) and (max-width: 1099.98px) {
  .vmh .vm-homevhero .vm-vhero__copy { padding: 20px 28px; gap: 12px; }
  .vmh .vm-homehead { padding-top: 16px; }
  .vmh .sx--best { padding-top: 14px; }
  .vmh .sx--best .sx-head { margin-bottom: 8px; }
}
/* v3 section 0: homepage fixes live here, as home.css loads after extra.css and won the tie. */
/* The dashed rule between sections runs exactly the content width, not past it. */
.vmh .sx--tight::before { left: 50%; right: auto; margin-inline: 0; transform: translateX(-50%); width: calc(min(100%, var(--content-max)) - 2 * var(--gutter)); border-top-color: var(--edge); }
/* Today's best clears the links row and the dashed rule above it. */
@media (max-width: 1180px) { .vmh .sx--best { padding-top: 24px; } }
/* Popular shop names wrap to two lines instead of being cut ("Marks & Spencer", "notonthehighstreet"). */
.vmh .px a > span b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.15; }
/* v3 H4: a lone last category tile spans the row only in the 3-column grid (641-1100px). */
.vmh .kx > li:last-child:nth-child(3n+1) { grid-column: auto; }
@media (min-width: 641px) and (max-width: 1100px) { .vmh .kx > li:last-child:nth-child(3n+1) { grid-column: 1 / -1; } }
/* v3 M-H4: the Thursday sign-up box's focus ring is ink, not yellow on cream. */
.vmh .nx-form:focus-within { outline-color: var(--ink); }
/* v3 LOW: "All…" links sit on the heading's baseline; a lone Ending soon ticket fills the row; the advice list fills its
   column; the Checked line sits a fixed gap under each ticket's text rather than pinned to the bottom. */

.vmh .bx-tickets.is-single > .bx-item:not([hidden]) { grid-column: 1 / -1; }
.vmh .ax-list { display: grid; grid-auto-rows: 1fr; height: 100%; }
.vmh .bx-tickets .vm-ticket__meta { margin-top: 12px; }
/* v4 HIGH 1: a lone ticket across the full row lays its text and Get code side by side (the button collapsed to 2px). */
.vmh .bx-tickets.is-single .vm-ticket__body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; align-items: center; column-gap: 24px; }
.vmh .bx-tickets.is-single .vm-terms { grid-column: 1 / -1; }
@media (max-width: 619.98px) { .vmh .bx-tickets.is-single .vm-ticket__body { display: flex; align-items: stretch; } }
/* v4: the trust strip wraps on small tablets (641-767px); kept on one line it ran past the edge up to about 690px. */
@media (min-width: 641px) and (max-width: 767.98px) { .vmh .tx p { flex-wrap: wrap; white-space: normal; } }
/* v4 optional: from 1400px, where the cause watermark shows down the sides, the white sections (Shop by category,
   Money advice) are white panels inside the content width, so the watermark runs unbroken down the page. */
@media (min-width: 1400px) {
  .vmh .kx-sec, .vmh .ax { background: transparent; }
  .vmh .kx-sec > .hx-wrap, .vmh .ax > .hx-wrap { background: #fff; border-radius: var(--r-feature); padding-block: 48px; }
}
/* Lean audit: the Thursday form's Privacy policy link and the club box link are 44px tall to tap, without moving the text. */
@media (max-width: 1023.98px) {
  .vmh .nx-note a, .vmh .cx-pta p a { display: inline-block; padding-block: 14px; margin-block: -14px; }
}

/* Mobile review, step 2: section headings stack on the left on phones; heading and link share a baseline from 768px. */
@media (max-width: 767.98px) {
  .vmh .sx-head { flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
  .vmh .sx--best .sx-head { flex-direction: row; align-items: center; justify-content: space-between; margin-bottom: 0; }
}
@media (min-width: 768px) { .vmh .sx-head { align-items: last baseline; } }
/* Mobile review, step 4: homepage headings on the same scale. */
@media (max-width: 767.98px) {
  .vmh .vm-homehead h1 { font-size: 28px; line-height: 32px; }
  .vmh .sx h2, .vmh .cx h2, .vmh .nx h2 { font-size: 22px; line-height: 1.2; text-wrap: balance; }
}

/* Review 16 Oct evening: shorter best-deal tickets on phones (the meta pill repeats the filter), and headings in order on desktop: the H1 is the biggest. */
@media (max-width: 767.98px) { .vmh .sx--best .vm-ticket__meta .vm-pill { display: none; } }
@media (min-width: 1024px) {
  .vmh .vm-homehead h1 { font-size: 52px; line-height: 1.05; }
  .vmh .vm-homehead h2 { font-size: 36px; line-height: 1.1; }
  .vmh .sx h2, .vmh .cx h2, .vmh .nx h2 { font-size: 40px; line-height: 1.1; }
}

/* Review 2: shorter best-deal tickets on phones (no chip row, no reserved two title lines); at tablet width the cause and news headings sit below the H1 in size. */
@media (max-width: 767.98px) {
  .vmh .sx--best .vm-tmeta__i:has(> .vm-ticket__chip) { display: none; }
  .vmh .bx-item .vm-ticket__title { min-height: 0; }
}
@media (min-width: 768px) and (max-width: 1023.98px) { .vmh .cx h2, .vmh .nx h2 { font-size: 30px; line-height: 1.1; } }

/* Review 3, step 5: the fundraising-pack and newsletter privacy links keep a 44px tap area (the general paragraph-link rule made them inline). */
@media (max-width: 1023.98px) { .vmh.vmh .nx-note a, .vmh.vmh .cx-pta p a { display: inline-block; padding-block: 14px; margin-block: -14px; } }

/* Review 3, step 6: Money advice rows only as tall as their text; on phones "How it works" sits in the dark band without a box,
   and the category tiles drop their blurbs (1,134px down to about 870px). */
@media (max-width: 1023.98px) { .vmh .ax-list { grid-auto-rows: auto; } }
@media (max-width: 767.98px) {
  .vmh .cx-flow { background: none; border: 0; box-shadow: none; padding: 0; color: #fff; }
  .vmh .cx-flow li { border-top: 1px solid rgba(255,255,255,.14); padding: 14px 0; }
  .vmh .cx-flow li b { color: #fff; }
  .vmh .cx-flow li > span:not(.cx-n):not(.cx-state) { color: rgba(255,255,255,.78); }
  .vmh .cx-flow .cx-n { background: #fff; color: var(--teal); }
  .vmh .kx .kx-blurb { display: none; }
  .vmh .kx a { min-height: 0; }
}

/* Review 4, step 7: Popular shops names stay on one line on desktop (no mid-word breaks), less gap before Money advice,
   and the video hero's steps only on desktop, as How it works follows just below. */
@media (min-width: 1024px) {
  .vmh .px > li > a { gap: 8px; padding-right: 6px; }
  .vmh .px a > span { min-width: 0; }
  .vmh .px a > span > b { font-size: 14px; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .vmh .sx--tight { padding-bottom: 48px; }
  .vmh .sx--tight + .sx.ax { padding-top: 48px; }
}
@media (max-width: 1023.98px) { .vmh .vm-homevhero .vm-vhero__steps { display: none; } }

/* Review 5: a lone last category tile at tablet width is one short row, not a 190px box. */
@media (min-width: 641px) and (max-width: 1100px) {
  .vmh .kx > li:last-child:nth-child(3n+1) > a { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-content: center; }
  .vmh .kx > li:last-child:nth-child(3n+1) .kx-top { grid-row: 1 / span 2; margin: 0; }
  .vmh .kx > li:last-child:nth-child(3n+1) .kx-blurb { grid-column: 2; margin: 0; }
  .vmh .kx > li:last-child:nth-child(3n+1) .kx-foot { grid-column: 3; grid-row: 1 / span 2; margin: 0; gap: 12px; }
}